add live preview pane to page editor

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

assets/css/admin/components.css

@@ -1144,6 +1144,74 @@
   color: color-mix(in oklch, var(--t-text-primary) 30%, transparent);
 }
 
+/* Page editor split layout */
+
+.page-editor-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.page-editor-pane-hidden-mobile {
+  display: none;
+}
+
+.page-editor-preview-hidden-mobile {
+  display: none;
+}
+
+.page-editor-preview-pane {
+  border: 1px solid color-mix(in oklch, var(--t-text-primary) 15%, transparent);
+  border-radius: 0.5rem;
+  overflow: hidden;
+}
+
+.page-editor-preview {
+  transform: scale(0.55);
+  transform-origin: top left;
+  width: 181.82%; /* 1/0.55 */
+  pointer-events: none;
+}
+
+.page-editor-toggle-preview {
+  display: inline-flex;
+}
+
+@media (min-width: 64em) {
+  .page-editor-container {
+    flex-direction: row;
+    gap: 1.5rem;
+  }
+
+  .page-editor-pane {
+    flex: 1;
+    min-width: 0;
+    overflow-y: auto;
+  }
+
+  .page-editor-pane-hidden-mobile {
+    display: block;
+  }
+
+  .page-editor-preview-pane {
+    flex: 1;
+    min-width: 0;
+    max-height: calc(100vh - 14rem);
+    overflow-y: auto;
+    position: sticky;
+    top: 1rem;
+  }
+
+  .page-editor-preview-hidden-mobile {
+    display: block;
+  }
+
+  .page-editor-toggle-preview {
+    display: none;
+  }
+}
+
 /* Block list in editor */
 
 .block-list {