Add live event preview to the editor form (issue #54)

Renders the event being edited with the existing <ote-events> widget
(apps/embed), fed purely in-memory from the current form draft and
debounced as the organizer types, so they can see how title length,
description, tags, and venue will actually look without saving/exporting
first. Works on a blank or mid-edit draft since the underlying JSON
conversion never requires a schema-valid document.

On narrow viewports it's a Form/Preview toggle above the form (same
pattern as the description field's own Edit/Preview toggle). From a new
72rem breakpoint up, the form and preview render side by side as two
columns instead, making better use of desktop screen space — the editor
is no longer single-column at every width, reversing that prior
convention documented in styles.css/CLAUDE.md.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XXpiV7p6xPpVmiVWtYsugd

Author: claude

apps/editor/CHANGELOG.md

@@ -6,6 +6,18 @@ tied to semver releases.
 
 ## 2026-08-13
 
+- **Live preview**: the form now renders the event being edited with the
+  same `<ote-events>` widget (`apps/embed`) used elsewhere in the app, fed
+  purely in-memory from the current draft (`layout="cards"`, debounced ~200ms
+  as you type) — no need to save/export to see how title length, description
+  formatting, tags, or venue will actually look. Works on a blank or
+  mid-edit draft; missing fields just render as absent, nothing blocks the
+  preview on validity. On narrow viewports it's a Form/Preview toggle above
+  the form (same pattern as the description field's own Edit/Preview
+  toggle); from the new wide-desktop breakpoint up, the form and preview
+  render side by side as two columns instead — the editor's layout is no
+  longer single-column at every width (see the updated note at the top of
+  `styles.css`).
 - **"Edit series" warns per field when occurrences already disagree**: any
   field in the shared bulk-edit template that isn't uniform across the
   series — e.g. one occurrence's `description` was hand-tweaked — now shows

apps/editor/CLAUDE.md

@@ -133,6 +133,53 @@ is expected and the filename should never be treated as authoritative —
 only `startDate` inside the JSON is. See DESIGN.md's "Flujo de escritura"
 section for the cross-repo rationale.
 
+## The layout is no longer single-column at every width
+
+`styles.css`'s top-of-file comment used to say the layout "never splits."
+That was a deliberate choice at the time, but it's been overridden: from a
+new wide-desktop breakpoint (`min-width: 72rem`) up, `#form-view` becomes a
+two-column CSS grid — the form on the left, the live preview
+(`#preview-column`, see below) on the right — so a wide screen shows both
+instead of just getting more padding. Below that breakpoint (including the
+existing "wider desktop" ~52rem tier), the app is still genuinely
+single-column, unchanged. Don't assume single-column-always when reading
+older comments or issues that predate this — check the `72rem` tier's rules
+in `styles.css` first.
+
+`body`'s `max-width` and `#action-bar`'s fixed width both grow to match at
+the same `72rem` tier (44rem form column + 2rem gap + 26rem preview column),
+reusing the exact centering mechanism `#action-bar` already used at the
+52rem tier (`left: 50%; transform: translateX(-50%); width: …`) rather than
+inventing new positioning math — that existing mechanism has its own
+hard-won comment nearby about a centering bug already hit once; don't
+recompute the action bar's position independently of `body`'s max-width, or
+you'll likely reintroduce it.
+
+`#form-view` toggling `data-mobile-tab="form"/"preview"` (below the wide
+tier, to pick which of `#form-column`/`#preview-column` shows) uses
+attribute-selector rules like `#form-view[data-mobile-tab="preview"]
+#form-column`. The wide-tier override that forces both columns visible has
+to repeat those same compound selectors (see the comment in `styles.css`
+right above it) rather than a plain `#form-column, #preview-column { display:
+block }` — a lower-specificity override there would silently lose to the
+mobile-tab rule if `data-mobile-tab` still happens to be `"preview"` from a
+narrower viewport (main.ts doesn't reset it on resize).
+
+## Live preview: `<ote-events>` fed purely in-memory
+
+`#preview-column` embeds the same `<ote-events>` widget (`apps/embed`,
+already self-hosted via `dist/embed` — see `build.mjs`) as the events list
+view, but driven from the in-memory draft rather than a fetched feed:
+`main.ts`'s `refresh()` computes `toEventJson(state)` and calls
+`schedulePreviewUpdate()`, which debounces ~200ms then sets
+`previewWidget.events = [event]`. This works because
+`oteJsonToPreviewFeed` (`packages/preview-feed`) treats every event field as
+optional and only ever throws if its input isn't shaped like `{ events:
+[...] }` — never true here — so the preview renders fine even for a blank
+new-event draft or mid-edit bulk-edit template. There is deliberately no
+"wait until the draft is schema-valid" gate; if you're tempted to add one,
+it isn't needed and would just make the preview lag behind typing.
+
 ## OTE has no recurrence-rule concept
 
 The spec is explicit: one document per occurrence, always ("un documento

apps/editor/index.html

@@ -279,6 +279,35 @@ <h3 data-i18n="dialog.feedSettings.editorGroup">Editor setup</h3>
            untouched; this wrapper is a second, independent layer on top of
            that, not a replacement for it. -->
       <div id="form-view">
+      <!-- Narrow viewports only (hidden once the two-column layout kicks in
+           at the wide breakpoint, where the form and preview render side
+           by side) — lets the organizer switch between editing and seeing
+           the live preview without leaving the form view. Same
+           .mode-toggle radiogroup component as #description-editor-mode's
+           Edit/Preview toggle; driven by main.ts setting
+           #form-view[data-mobile-tab] rather than the hidden attribute.
+           Deliberately a sibling of #form-column, not nested inside it —
+           nesting it there would hide the toggle itself along with the
+           rest of the form as soon as the Preview tab is selected,
+           trapping the organizer on the preview with no way back. -->
+      <div
+        class="mode-toggle"
+        id="preview-toggle"
+        role="radiogroup"
+        aria-label="View"
+        data-i18n-aria-label="nav.previewToggle.label"
+      >
+        <label>
+          <input type="radio" name="preview-toggle" value="form" checked />
+          <span data-i18n="nav.previewToggle.form">Form</span>
+        </label>
+        <label>
+          <input type="radio" name="preview-toggle" value="preview" />
+          <span data-i18n="nav.previewToggle.preview">Preview</span>
+        </label>
+      </div>
+
+      <div id="form-column">
       <button id="back-to-list" type="button" class="secondary" hidden data-i18n="nav.backToEvents">
         ← Back to events
       </button>
@@ -367,6 +396,19 @@ <h3 data-i18n="dialog.feedSettings.editorGroup">Editor setup</h3>
       <form id="event-form" autocomplete="off"></form>
 
       <ul id="document-errors" hidden></ul>
+      </div>
+
+      <!-- Live preview: <ote-events> (apps/embed), fed purely in-memory from
+           the current form state (main.ts's schedulePreviewUpdate, called
+           from refresh()) — no feed=/network fetch. Below the wide
+           breakpoint this is shown/hidden by #preview-toggle instead of
+           sitting beside the form; see the #form-view grid rule in
+           styles.css. Same widget attributes as the events-list-view's own
+           #events-widget instance, for a consistent look. -->
+      <aside id="preview-column">
+        <h2 data-i18n="nav.previewToggle.heading">Preview</h2>
+        <ote-events id="event-preview" layout="cards" sort="none" theme="light"></ote-events>
+      </aside>
 
       <div id="action-bar">
         <button id="valid-badge" type="button" hidden></button>

apps/editor/src/i18n/es.ts

@@ -37,6 +37,10 @@ export const es: Record<string, string> = {
   "nav.sectionsMenu": "☰ Secciones",
   "nav.eventsSearchLabel": "Buscar eventos",
   "nav.backToEvents": "← Volver a eventos",
+  "nav.previewToggle.label": "Vista",
+  "nav.previewToggle.form": "Formulario",
+  "nav.previewToggle.preview": "Vista previa",
+  "nav.previewToggle.heading": "Vista previa",
   "nav.groupEvents": "Vista",
   "nav.groupEvents.individual": "Individual",
   "nav.groupEvents.grouped": "Agrupado",

apps/editor/src/main.ts

@@ -350,6 +350,21 @@ async function startEditor(repo: string | null): Promise<void> {
   const feedSettingsOpen = el<HTMLButtonElement>("feed-settings-open");
   const actionBar = el<HTMLDivElement>("action-bar");
   const bulkEditBanner = el<HTMLDivElement>("bulk-edit-banner");
+  const previewWidget = el<OteEventsElement>("event-preview");
+  const previewToggle = el<HTMLDivElement>("preview-toggle");
+
+  // Narrow viewports: which of #form-column/#preview-column is shown (see
+  // styles.css's "#form-view: two-column layout" — both always show at the
+  // wide-desktop tier regardless of this attribute).
+  formView.dataset.mobileTab = "form";
+  previewToggle.addEventListener("input", () => {
+    const mode =
+      previewToggle.querySelector<HTMLInputElement>('input[name="preview-toggle"]:checked')
+        ?.value === "preview"
+        ? "preview"
+        : "form";
+    formView.dataset.mobileTab = mode;
+  });
 
   /** Toggles the three top-level views. Elements *inside* form-view keep their own content-driven `hidden` logic (section-nav, document-errors…) untouched — this only gates the wrapper. */
   function showView(): void {
@@ -873,7 +888,24 @@ async function startEditor(repo: string | null): Promise<void> {
   /** Result of the last refresh, consulted by the button handlers. */
   let draftValid = false;
 
+  // Debounced so a fast typist doesn't force a full shadow-DOM re-render on
+  // every keystroke; the preview always reflects `state` as of the most
+  // recent refresh() call, including mid-edit while bulk-editing a series
+  // template — toEventJson() never throws on a partial/blank event (see
+  // packages/preview-feed's tolerant field handling), so no separate
+  // "wait until valid" gate is needed here.
+  let previewTimer: ReturnType<typeof setTimeout> | undefined;
+  function schedulePreviewUpdate(event: OteEvent): void {
+    clearTimeout(previewTimer);
+    previewTimer = setTimeout(() => {
+      previewWidget.events = [event] as unknown as OriginalOteEvent[];
+    }, 200);
+  }
+
   function refresh(): boolean {
+    const event = toEventJson(state);
+    schedulePreviewUpdate(event);
+
     // Bulk-edit template: id/slug/startDate are deliberately blank (see
     // buildBulkEditTemplate) — the normal required-field validation would
     // be pure noise here, and slug/id auto-suggest/collision-checking
@@ -902,7 +934,6 @@ async function startEditor(repo: string | null): Promise<void> {
         setControlValue("id", state.id);
       }
     }
-    const event = toEventJson(state);
     const result = validateDraft(config, event, new Date().toISOString());
 
     // Collisions against the repo's existing events (best-effort: the

apps/editor/styles.css

@@ -1,5 +1,9 @@
-/* Mobile-first. Single column; the layout never splits — wider screens just
-   get more breathing room. */
+/* Mobile-first. Single column below the wide-desktop breakpoint — wider
+   screens up to that point just get more breathing room, same as before.
+   At the wide-desktop tier (see "#form-view: two-column layout" further
+   down), the form view splits into a form column and a live preview
+   column side by side; every other view stays single-column at every
+   width. */
 
 :root {
   --bg: #f6f7f9;
@@ -36,6 +40,16 @@ body {
   -webkit-font-smoothing: antialiased;
 }
 
+/* Matches the two-column form/preview layout's own total width (see
+   "#form-view: two-column layout" further down) — every view (header,
+   footer, the events list) gets the same wider column at this tier, not
+   just the form. */
+@media (min-width: 72rem) {
+  body {
+    max-width: 72rem;
+  }
+}
+
 /* --- header ------------------------------------------------------------- */
 
 header {
@@ -223,6 +237,12 @@ header h1 {
   outline-offset: 2px;
 }
 
+/* Form/Preview switch — narrow viewports only, see "#form-view: two-column
+   layout" for the wide-breakpoint override that hides this entirely. */
+#preview-toggle {
+  margin: 0 0 0.75rem;
+}
+
 .description-toolbar {
   display: flex;
   align-items: center;
@@ -1537,6 +1557,66 @@ select {
   padding: 0.6rem 0.85rem 0.6rem 2rem;
 }
 
+/* --- form/preview layout ---------------------------------------------------- */
+
+/* Mobile-first default: the live preview column is off-screen entirely,
+   and #preview-toggle (in #form-column) switches which one of
+   #form-column/#preview-column is shown. Below the wide-desktop tier this
+   stays a single column throughout, same as every other view in the app. */
+#preview-column {
+  display: none;
+}
+
+#form-view[data-mobile-tab="preview"] #form-column {
+  display: none;
+}
+
+#form-view[data-mobile-tab="preview"] #preview-column {
+  display: block;
+}
+
+@media (min-width: 72rem) {
+  /* Two-column layout: form on the left, live preview on the right, both
+     always visible — #preview-toggle is hidden below (nothing to switch
+     between anymore). 44rem + 2rem gap + 26rem = 72rem, matching this
+     tier's own min-width and this file's widened `body` max-width, so the
+     grid never renders cramped right at the breakpoint edge. */
+  #form-view:not([hidden]) {
+    display: grid;
+    grid-template-columns: 44rem 26rem;
+    gap: 2rem;
+    align-items: start;
+  }
+
+  #preview-toggle {
+    display: none;
+  }
+
+  /* Matches the specificity of the mobile-tab rules above
+     (#form-view[data-mobile-tab="…"] #form-column/#preview-column) so this
+     override actually wins by source order — a plain `#form-column,
+     #preview-column { display: block }` here would lose to those rules
+     whenever data-mobile-tab happens to still be "preview" from a narrower
+     viewport (main.ts doesn't reset it on resize). */
+  #form-view[data-mobile-tab="form"] #form-column,
+  #form-view[data-mobile-tab="preview"] #form-column,
+  #form-view[data-mobile-tab="form"] #preview-column,
+  #form-view[data-mobile-tab="preview"] #preview-column {
+    display: block;
+  }
+
+  #preview-column {
+    position: sticky;
+    top: 1rem;
+  }
+
+  #preview-column h2 {
+    margin: 0 0 0.6rem;
+    font-size: 1rem;
+    color: var(--muted);
+  }
+}
+
 /* --- action bar ------------------------------------------------------------- */
 
 /* :not([hidden]) — bulk-edit mode toggles this off in favor of
@@ -1608,6 +1688,16 @@ select {
   }
 }
 
+@media (min-width: 72rem) {
+  /* Same centering mechanism as the 52rem tier above, just spanning the
+     wider two-column content width (form + gap + preview, see "#form-view:
+     two-column layout") instead of the single form column — the action bar
+     reads as applying to the whole page, not just the form side. */
+  #action-bar:not([hidden]) {
+    width: 72rem;
+  }
+}
+
 /* --- buttons -------------------------------------------------------------- */
 
 button {