Add a toggleable live preview panel to both editors

Hidden by default, shares horizontal space with the body editor once
opened rather than a separate section, and only requests the iframe's
src on first toggle -- no preview traffic at all until someone
actually wants to see it. Refreshes automatically on every successful
autosave; a separate force-render button re-attempts a save-and-
refresh cycle immediately, for when the normal 7-second cycle has
been interrupted (a lock-lost error, a transient failure) and waiting
for the next tick isn't good enough.

1 files changed, 68 insertions, 0 deletions

diff --git a/public/stylesheets/admin.css b/public/stylesheets/admin.css
index 93cc3f5..5f7723b 100644
--- a/public/stylesheets/admin.css
+++ b/public/stylesheets/admin.css
@@ -683,6 +683,10 @@ table.user_table td.user_login {
     display: block;
     margin-bottom: 1rem;
   }
+
+  .body_toolbar_row {
+    margin-left: 120px;
+  }
 }
 @media(max-width:1015px) {
   div.node_description {
@@ -1324,3 +1328,67 @@ div#image_browser ul li {
   border-radius: 4px;
 }
 
+/* ============================================================
+   Live edit preview
+   ============================================================ */
+
+#editor_and_preview {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+@media (min-width: 1016px) {
+  #editor_and_preview {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  #editor_and_preview .preview_content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  #preview_panel {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+#preview_panel iframe {
+  width: 100%;
+  height: 612px;
+  border: 0.5px solid var(--border);
+  border-radius: var(--radius);
+}
+
+.body_toolbar_row {
+  min-height: 2rem;
+  margin-bottom: 1rem;
+  display: flex;
+  gap: 8px;
+}
+
+.view_toggle {
+  background: #f7f7f7;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  padding: 4px 8px;
+  cursor: pointer;
+  color: #555;
+  display: flex;
+  align-items: center;
+  gap: 1em;
+}
+
+.view_toggle:hover {
+  background: #ececec;
+  border-color: #ccc;
+  color: #222;
+}
+
+.view_toggle[aria-pressed="true"] {
+  background: #dde8f5;
+  border-color: #a9c6e8;
+  color: #1a4d8f;
+}