@atom63/slides 0.1.1 → 0.3.0

package/dist/editor/index.js

@@ -1,10 +1,12 @@
-import { listTemplates, slideMdxComponents, SlidesPlayer } from '../chunk-AD3ZOVWR.js';
+import { listTemplates, slideMdxComponents, SlidesPlayer, templateNames, getTemplate } from '../chunk-AD3ZOVWR.js';
 import { evaluate } from '@mdx-js/mdx';
 import yaml from 'js-yaml';
 import * as runtime from 'react/jsx-runtime';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx as jsx$1, jsxs, Fragment } from 'react/jsx-runtime';
 import remarkGfm from 'remark-gfm';
-import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { Parser } from 'acorn';
+import jsx from 'acorn-jsx';
 
 function parseFrontmatter(source) {
   const normalized = source.replace(/^/, "");
@@ -52,6 +54,384 @@ async function compileDeck(source) {
     return { ok: false, error };
   }
 }
+var JsxParser = Parser.extend(jsx());
+var IMPORT_RE2 = /^[ \t]*import\b[\s\S]*?(?:from\s*['"][^'"]*['"]|['"][^'"]*['"])[ \t]*;?[ \t]*$/gm;
+function blankImports(block) {
+  return block.replace(IMPORT_RE2, (m) => m.replace(/[^\n]/g, " "));
+}
+function findTemplateElement(block) {
+  let ast;
+  try {
+    ast = JsxParser.parse(blankImports(block), { ecmaVersion: "latest", sourceType: "module" });
+  } catch {
+    return null;
+  }
+  const body = ast.body;
+  let jsxElement = null;
+  for (const node of body) {
+    if (node.type === "ImportDeclaration") {
+      continue;
+    }
+    if (node.type === "ExpressionStatement" && node.expression?.type === "JSXElement") {
+      if (jsxElement !== null) {
+        return null;
+      }
+      jsxElement = node.expression;
+    } else {
+      return null;
+    }
+  }
+  return jsxElement;
+}
+function parseSlide(block) {
+  const element = findTemplateElement(block);
+  if (element === null) {
+    return { kind: "opaque", reason: "block contains no single JSX template element" };
+  }
+  const openingEl = element.openingElement;
+  const nameNode = openingEl.name;
+  if (nameNode.type !== "JSXIdentifier") {
+    return { kind: "opaque", reason: "JSX element name is not a plain identifier" };
+  }
+  const componentName = nameNode.name;
+  if (!templateNames.includes(componentName)) {
+    return { kind: "opaque", reason: `"${componentName}" is not a registered template` };
+  }
+  const children = element.children ?? [];
+  for (const child of children) {
+    if (child.type === "JSXText") {
+      if (child.value.trim() !== "") {
+        return { kind: "opaque", reason: "element has non-whitespace children" };
+      }
+    } else {
+      return { kind: "opaque", reason: "element has non-whitespace children" };
+    }
+  }
+  const props = {};
+  const attributes = openingEl.attributes ?? [];
+  for (const attr of attributes) {
+    if (attr.type === "JSXSpreadAttribute") {
+      return { kind: "opaque", reason: "element has spread attribute" };
+    }
+    if (attr.type !== "JSXAttribute") {
+      return { kind: "opaque", reason: "unexpected attribute node type" };
+    }
+    const attrName = attr.name.name;
+    const attrValue = attr.value;
+    if (attrValue === null) {
+      return { kind: "opaque", reason: `attribute "${attrName}" has no string value (boolean shorthand)` };
+    }
+    if (attrValue.type !== "Literal" || typeof attrValue.value !== "string") {
+      return {
+        kind: "opaque",
+        reason: `attribute "${attrName}" is not a string literal`
+      };
+    }
+    props[attrName] = attrValue.value;
+  }
+  return { kind: "template", name: componentName, props };
+}
+
+// src/editor/serialize-slot.ts
+function renderJsxAttr(name, value) {
+  const encoded = value.replaceAll("&", "&").replaceAll('"', """);
+  return `${name}="${encoded}"`;
+}
+function renderValue(value) {
+  const encoded = value.replaceAll("&", "&").replaceAll('"', """);
+  return `"${encoded}"`;
+}
+function setProp(block, name, value) {
+  const element = findTemplateElement(block);
+  if (element === null) {
+    return block;
+  }
+  const openingEl = element.openingElement;
+  const attributes = openingEl.attributes ?? [];
+  const existing = attributes.find(
+    (attr) => attr.type === "JSXAttribute" && attr.name?.name === name
+  );
+  if (existing !== void 0) {
+    const attrValue = existing.value;
+    if (attrValue === null || attrValue.type !== "Literal") {
+      return block;
+    }
+    const existingRaw = block.slice(attrValue.start, attrValue.end);
+    const rendered2 = renderValue(value);
+    if (existingRaw === rendered2) {
+      return block;
+    }
+    return block.slice(0, attrValue.start) + rendered2 + block.slice(attrValue.end);
+  }
+  const tagEnd = openingEl.end;
+  const rendered = renderValue(value);
+  let insertAt;
+  if (block[tagEnd - 1] === ">" && block[tagEnd - 2] === "/") {
+    insertAt = tagEnd - 2;
+  } else if (block[tagEnd - 1] === ">") {
+    insertAt = tagEnd - 1;
+  } else {
+    insertAt = tagEnd;
+  }
+  const insertion = ` ${name}=${rendered}`;
+  return block.slice(0, insertAt) + insertion + block.slice(insertAt);
+}
+
+// src/editor/slide-blocks.ts
+function isFenceMarker(trimmed) {
+  return trimmed.startsWith("```") || trimmed.startsWith("~~~");
+}
+function splitBlocks(source) {
+  const blocks = [];
+  let idx = 0;
+  const normalized = source.replace(/^/, "");
+  const allLines = normalized.split("\n");
+  let remainder = source;
+  let frontmatterConsumed = 0;
+  if (allLines[0]?.trim() === "---") {
+    let closeIdx = -1;
+    for (let i = 1; i < allLines.length; i++) {
+      if (allLines[i].trim() === "---") {
+        closeIdx = i;
+        break;
+      }
+    }
+    if (closeIdx !== -1) {
+      const fmLines = allLines.slice(0, closeIdx + 1);
+      const fmText = `${fmLines.join("\n")}
+`;
+      if (source.startsWith(fmText) || normalized.startsWith(fmText)) {
+        frontmatterConsumed = fmText.length;
+        blocks.push({ index: idx++, kind: "frontmatter", text: fmText });
+        remainder = source.slice(frontmatterConsumed);
+      }
+    }
+  }
+  const remLines = remainder.split("\n");
+  const lineRaws = [];
+  for (let i = 0; i < remLines.length; i++) {
+    const isLast = i === remLines.length - 1;
+    if (isLast && remLines[i] === "") {
+      break;
+    }
+    lineRaws.push(isLast ? remLines[i] : `${remLines[i]}
+`);
+  }
+  let inFence = false;
+  let slideText = "";
+  const flushSlide = () => {
+    blocks.push({ index: idx++, kind: "slide", text: slideText });
+    slideText = "";
+  };
+  for (let i = 0; i < lineRaws.length; i++) {
+    const raw = lineRaws[i];
+    const trimmed = raw.trimEnd().replace(/\r$/, "");
+    if (!inFence && trimmed === "---") {
+      flushSlide();
+      blocks.push({ index: idx++, kind: "separator", text: raw });
+    } else {
+      if (isFenceMarker(trimmed)) {
+        inFence = !inFence;
+      }
+      slideText += raw;
+    }
+  }
+  if (slideText !== "" || blocks.filter((b) => b.kind === "slide").length === 0) {
+    flushSlide();
+  }
+  return blocks;
+}
+function joinBlocks(blocks) {
+  return blocks.map((b) => b.text).join("");
+}
+
+// src/editor/slide-edit.ts
+function slideBlockIndices(source) {
+  const blocks = splitBlocks(source);
+  const indices = [];
+  for (const block of blocks) {
+    if (block.kind === "slide" && block.text.trim() !== "") {
+      indices.push(block.index);
+    }
+  }
+  return indices;
+}
+function getSlideBlock(source, slideOrdinal) {
+  const indices = slideBlockIndices(source);
+  if (slideOrdinal < 0 || slideOrdinal >= indices.length) return null;
+  const blockIndex = indices[slideOrdinal];
+  const blocks = splitBlocks(source);
+  const block = blocks.find((b) => b.index === blockIndex);
+  if (!block) return null;
+  return { blockIndex, text: block.text };
+}
+function setSlideProp(source, slideOrdinal, key, value) {
+  const indices = slideBlockIndices(source);
+  if (slideOrdinal < 0 || slideOrdinal >= indices.length) return source;
+  const blockIndex = indices[slideOrdinal];
+  const blocks = splitBlocks(source);
+  const updated = blocks.map((b) => {
+    if (b.index !== blockIndex) return b;
+    if (parseSlide(b.text).kind !== "template") return b;
+    return { ...b, text: setProp(b.text, key, value) };
+  });
+  return joinBlocks(updated);
+}
+function renderProps(props) {
+  return Object.entries(props).map(([k, v]) => renderJsxAttr(k, v)).join(" ");
+}
+function switchSlideTemplate(source, slideOrdinal, nextName, nextProps) {
+  const indices = slideBlockIndices(source);
+  if (slideOrdinal < 0 || slideOrdinal >= indices.length) return source;
+  const blockIndex = indices[slideOrdinal];
+  const blocks = splitBlocks(source);
+  const updated = blocks.map((b) => {
+    if (b.index !== blockIndex) return b;
+    if (parseSlide(b.text).kind !== "template") return b;
+    const element = findTemplateElement(b.text);
+    if (element === null) return b;
+    const propsStr = renderProps(nextProps);
+    const replacement = propsStr.length > 0 ? `<${nextName} ${propsStr} />` : `<${nextName} />`;
+    const newText = b.text.slice(0, element.start) + replacement + b.text.slice(element.end);
+    return { ...b, text: newText };
+  });
+  return joinBlocks(updated);
+}
+function fieldId(templateName, key) {
+  return `a63-slot-${templateName}-${key}`;
+}
+function isMultiline(kind) {
+  return kind === "richtext" || kind === "list";
+}
+function SlotField({
+  templateName,
+  slot,
+  value,
+  onChange
+}) {
+  const id = fieldId(templateName, slot.key);
+  const multiline = isMultiline(slot.kind);
+  return /* @__PURE__ */ jsxs("div", { className: "a63-form__field", children: [
+    /* @__PURE__ */ jsxs("div", { className: "a63-form__label-row", children: [
+      /* @__PURE__ */ jsx$1("label", { className: "a63-form__label", htmlFor: id, children: slot.label }),
+      slot.required && /* @__PURE__ */ jsx$1("span", { className: "a63-form__required", "aria-hidden": "true", children: "*" })
+    ] }),
+    multiline ? /* @__PURE__ */ jsx$1(
+      "textarea",
+      {
+        id,
+        className: "a63-form__textarea",
+        value,
+        required: slot.required,
+        "aria-required": slot.required,
+        onChange: (e) => onChange(slot.key, e.target.value)
+      }
+    ) : /* @__PURE__ */ jsx$1(
+      "input",
+      {
+        type: "text",
+        id,
+        className: "a63-form__input",
+        value,
+        required: slot.required,
+        "aria-required": slot.required,
+        onChange: (e) => onChange(slot.key, e.target.value)
+      }
+    )
+  ] });
+}
+function SlotForm({ name, props, onChange }) {
+  const tpl = getTemplate(name);
+  if (!tpl) {
+    return /* @__PURE__ */ jsxs("p", { className: "a63-form__unknown", children: [
+      "Unknown template: ",
+      /* @__PURE__ */ jsx$1("code", { children: name })
+    ] });
+  }
+  const slotGroupNames = tpl.slots.map((s) => s.name);
+  return /* @__PURE__ */ jsxs("div", { className: "a63-form", children: [
+    tpl.props.map((slot) => /* @__PURE__ */ jsx$1(
+      SlotField,
+      {
+        templateName: name,
+        slot,
+        value: props[slot.key] ?? "",
+        onChange
+      },
+      slot.key
+    )),
+    slotGroupNames.length > 0 && /* @__PURE__ */ jsxs("p", { className: "a63-form__slots-note", children: [
+      "Repeatable sections (",
+      slotGroupNames.join(", "),
+      ") are edited in Source."
+    ] })
+  ] });
+}
+function TemplatePicker({ name, props, onSwitch }) {
+  const [warning, setWarning] = useState(
+    null
+  );
+  function handleChange(next) {
+    if (next === name) return;
+    const nextDef = getTemplate(next);
+    if (!nextDef) return;
+    const nextKeys = new Set(nextDef.props.map((s) => s.key));
+    const carried = {};
+    for (const [k, v] of Object.entries(props)) {
+      if (nextKeys.has(k)) {
+        carried[k] = v;
+      }
+    }
+    const dropped = Object.entries(props).filter(([k, v]) => !nextKeys.has(k) && v !== "").map(([k]) => k);
+    for (const slot of nextDef.props) {
+      if (!(slot.key in carried)) {
+        carried[slot.key] = "";
+      }
+    }
+    onSwitch(next, { props: carried, dropped });
+    if (dropped.length > 0) {
+      setWarning({ from: name, to: next, dropped });
+    } else {
+      setWarning(null);
+    }
+  }
+  const templates = listTemplates();
+  return /* @__PURE__ */ jsxs("div", { className: "a63-form__field", children: [
+    /* @__PURE__ */ jsx$1("label", { className: "a63-form__label", htmlFor: "a63-template-picker", children: "Template" }),
+    /* @__PURE__ */ jsx$1(
+      "select",
+      {
+        id: "a63-template-picker",
+        className: "a63-form__input",
+        "aria-label": "Template",
+        value: name,
+        onChange: (e) => handleChange(e.target.value),
+        children: templates.map((tpl) => /* @__PURE__ */ jsx$1("option", { value: tpl.name, children: tpl.label ?? tpl.name }, tpl.name))
+      }
+    ),
+    warning && /* @__PURE__ */ jsxs("output", { className: "a63-form__picker-warning", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Switched ",
+        warning.from,
+        " \u2192 ",
+        warning.to,
+        "; dropped: ",
+        warning.dropped.join(", "),
+        "."
+      ] }),
+      /* @__PURE__ */ jsx$1(
+        "button",
+        {
+          type: "button",
+          className: "a63-form__picker-dismiss",
+          "aria-label": "Dismiss",
+          onClick: () => setWarning(null),
+          children: "\xD7"
+        }
+      )
+    ] })
+  ] });
+}
 
 // src/editor/template-snippets.ts
 var PLACEHOLDER_IMG = "/images/placeholder-1920x1080.webp";
@@ -130,50 +510,31 @@ ${synthExample(t)}
 var templateSnippets = Object.fromEntries(
   listTemplates().map((t) => [t.name, toInsertSnippet(t)])
 );
-function DeckEditor({ source: sourceProp, onChange, debounceMs = 300 }) {
-  const isControlled = onChange !== void 0;
-  const [internalSource, setInternalSource] = useState(sourceProp);
-  const source = isControlled ? sourceProp : internalSource;
-  const [preview, setPreview] = useState(null);
-  const [error, setError] = useState(null);
+function EditPane({ source, onChange, onSave, deck, error, onPresent }) {
   const [theme, setTheme] = useState("light");
+  const [rightTab, setRightTab] = useState("source");
+  const [formSlideIdx, setFormSlideIdx] = useState(0);
   const textareaRef = useRef(null);
   const templates = useMemo(() => listTemplates(), []);
-  const setSource = useCallback(
-    (next) => {
-      if (isControlled) onChange(next);
-      else setInternalSource(next);
-    },
-    [isControlled, onChange]
+  const handleChange = useCallback(
+    (e) => onChange(e.target.value),
+    [onChange]
   );
-  useEffect(() => {
-    let cancelled = false;
-    const handle = setTimeout(async () => {
-      const result = await compileDeck(source);
-      if (cancelled) return;
-      if (result.ok) {
-        setPreview({ Content: result.Content, meta: result.meta });
-        setError(null);
-      } else {
-        setError(result.error);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "s") {
+        e.preventDefault();
+        onSave?.(source);
       }
-    }, debounceMs);
-    return () => {
-      cancelled = true;
-      clearTimeout(handle);
-    };
-  }, [source, debounceMs]);
-  const handleChange = useCallback(
-    (e) => setSource(e.target.value),
-    [setSource]
+    },
+    [onSave, source]
   );
-  const handleInsertTemplate = useCallback(
+  const insert = useCallback(
     (name) => {
       const snippet = templateSnippets[name];
       if (!snippet) return;
-      const next = `${source.replace(/\s*$/, "")}
-${snippet}`;
-      setSource(next);
+      onChange(`${source.replace(/\s*$/, "")}
+${snippet}`);
       requestAnimationFrame(() => {
         const el = textareaRef.current;
         if (!el) return;
@@ -182,71 +543,250 @@ ${snippet}`;
         el.scrollTop = el.scrollHeight;
       });
     },
-    [source, setSource]
+    [source, onChange]
+  );
+  const slideCount = useMemo(() => slideBlockIndices(source).length, [source]);
+  const clampedIdx = Math.min(formSlideIdx, Math.max(0, slideCount - 1));
+  const currentBlock = useMemo(() => getSlideBlock(source, clampedIdx), [source, clampedIdx]);
+  const parsedSlide = useMemo(
+    () => currentBlock ? parseSlide(currentBlock.text) : null,
+    [currentBlock]
+  );
+  const handleSlotChange = useCallback(
+    (key, value) => {
+      onChange(setSlideProp(source, clampedIdx, key, value));
+    },
+    [source, clampedIdx, onChange]
+  );
+  const handleTemplateSwitch = useCallback(
+    (next, mapped) => {
+      onChange(switchSlideTemplate(source, clampedIdx, next, mapped.props));
+    },
+    [source, clampedIdx, onChange]
   );
-  const deck = useMemo(() => {
-    if (!preview) return null;
-    return { slug: "draft", meta: preview.meta, content: preview.Content };
-  }, [preview]);
   return /* @__PURE__ */ jsxs("div", { className: "a63-editor", children: [
     /* @__PURE__ */ jsxs("section", { className: "a63-editor__preview", "data-theme": theme, children: [
       error ? /* @__PURE__ */ jsxs("div", { className: "a63-editor__error", role: "alert", children: [
-        /* @__PURE__ */ jsx("span", { className: "a63-editor__error-tag", children: "MDX error" }),
-        /* @__PURE__ */ jsx("span", { className: "a63-editor__error-msg", children: error })
+        /* @__PURE__ */ jsx$1("span", { className: "a63-editor__error-tag", children: "MDX error" }),
+        /* @__PURE__ */ jsx$1("span", { className: "a63-editor__error-msg", children: error })
       ] }) : null,
-      deck ? (
-        // Remount on theme change so the player picks up the canvas theme.
-        /* @__PURE__ */ jsx("div", { className: "a63-editor__preview-stage", children: /* @__PURE__ */ jsx(SlidesPlayer, { deck, onBack: () => {
-        } }) }, `${theme}`)
-      ) : /* @__PURE__ */ jsx("div", { className: "a63-editor__preview-empty", children: error ? "Fix the MDX error to render a preview." : "Compiling preview\u2026" })
+      deck ? /* @__PURE__ */ jsx$1("div", { className: "a63-editor__preview-stage", children: /* @__PURE__ */ jsx$1(SlidesPlayer, { deck, onBack: () => {
+      } }) }, theme) : /* @__PURE__ */ jsx$1("div", { className: "a63-editor__preview-empty", children: error ? "Fix the MDX error to render a preview." : "Compiling preview\u2026" })
     ] }),
     /* @__PURE__ */ jsxs("section", { className: "a63-editor__source", children: [
       /* @__PURE__ */ jsxs("div", { className: "a63-editor__toolbar", children: [
-        /* @__PURE__ */ jsx("span", { className: "a63-editor__title", children: "Deck source \xB7 MDX" }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "a63-editor__theme-toggle",
-            onClick: () => setTheme((t) => t === "light" ? "dark" : "light"),
-            "aria-pressed": theme === "dark",
-            children: theme === "light" ? "\u2600\uFE0E Light" : "\u263E Dark"
-          }
-        )
+        /* @__PURE__ */ jsx$1("span", { className: "a63-editor__title", children: "Deck source \xB7 MDX" }),
+        /* @__PURE__ */ jsxs("div", { className: "a63-editor__toolbar-actions", children: [
+          /* @__PURE__ */ jsxs("div", { className: "a63-editor__subtoggle", role: "group", "aria-label": "Edit mode", children: [
+            /* @__PURE__ */ jsx$1(
+              "button",
+              {
+                type: "button",
+                className: "a63-editor__subtoggle-btn",
+                "aria-pressed": rightTab === "source",
+                onClick: () => setRightTab("source"),
+                children: "Source"
+              }
+            ),
+            /* @__PURE__ */ jsx$1(
+              "button",
+              {
+                type: "button",
+                className: "a63-editor__subtoggle-btn",
+                "aria-pressed": rightTab === "form",
+                onClick: () => setRightTab("form"),
+                children: "Form"
+              }
+            )
+          ] }),
+          onSave ? /* @__PURE__ */ jsx$1("button", { type: "button", className: "a63-editor__save", onClick: () => onSave(source), children: "Save" }) : null,
+          /* @__PURE__ */ jsx$1(
+            "button",
+            {
+              type: "button",
+              className: "a63-editor__theme-toggle",
+              onClick: () => setTheme((t) => t === "light" ? "dark" : "light"),
+              "aria-pressed": theme === "dark",
+              children: theme === "light" ? "\u2600\uFE0E Light" : "\u263E Dark"
+            }
+          ),
+          /* @__PURE__ */ jsx$1("button", { type: "button", className: "a63-editor__present", onClick: onPresent, children: "Present" })
+        ] })
       ] }),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          ref: textareaRef,
-          className: "a63-editor__textarea",
-          value: source,
-          onChange: handleChange,
-          spellCheck: false,
-          "aria-label": "Deck MDX source"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "a63-editor__palette", children: [
-        /* @__PURE__ */ jsx("div", { className: "a63-editor__palette-label", children: "Templates \xB7 click to append" }),
-        /* @__PURE__ */ jsx("div", { className: "a63-editor__palette-grid", children: templates.map((t) => /* @__PURE__ */ jsxs(
-          "button",
+      rightTab === "source" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx$1(
+          "textarea",
           {
-            type: "button",
-            className: "a63-editor__chip",
-            onClick: () => handleInsertTemplate(t.name),
-            title: `Insert ${t.name}`,
-            children: [
-              /* @__PURE__ */ jsx("span", { className: "a63-editor__chip-name", children: t.name }),
-              /* @__PURE__ */ jsx("span", { className: "a63-editor__chip-meta", children: t.label })
-            ]
-          },
-          t.name
-        )) }),
-        /* @__PURE__ */ jsx("p", { className: "a63-editor__footnote", children: "v0.1 \xB7 plain-textarea editing (CodeMirror is a future upgrade). Per-slide form editing & template-switch are deferred to v2." })
+            ref: textareaRef,
+            className: "a63-editor__textarea",
+            value: source,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            spellCheck: false,
+            "aria-label": "Deck MDX source"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "a63-editor__palette", children: [
+          /* @__PURE__ */ jsx$1("div", { className: "a63-editor__palette-label", children: "Templates \xB7 click to append" }),
+          /* @__PURE__ */ jsx$1("div", { className: "a63-editor__palette-grid", children: templates.map((t) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: "a63-editor__chip",
+              onClick: () => insert(t.name),
+              title: `Insert ${t.name}`,
+              children: [
+                /* @__PURE__ */ jsx$1("span", { className: "a63-editor__chip-name", children: t.name }),
+                /* @__PURE__ */ jsx$1("span", { className: "a63-editor__chip-meta", children: t.label })
+              ]
+            },
+            t.name
+          )) })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs("div", { className: "a63-editor__form-panel", children: [
+        /* @__PURE__ */ jsxs("div", { className: "a63-editor__slide-stepper", children: [
+          /* @__PURE__ */ jsx$1(
+            "button",
+            {
+              type: "button",
+              className: "a63-editor__stepper-btn",
+              "aria-label": "Previous slide",
+              disabled: clampedIdx <= 0,
+              onClick: () => setFormSlideIdx((i) => Math.max(0, i - 1)),
+              children: "\u2039"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "a63-editor__stepper-label", children: [
+            "Slide ",
+            clampedIdx + 1,
+            " / ",
+            slideCount
+          ] }),
+          /* @__PURE__ */ jsx$1(
+            "button",
+            {
+              type: "button",
+              className: "a63-editor__stepper-btn",
+              "aria-label": "Next slide",
+              disabled: clampedIdx >= slideCount - 1,
+              onClick: () => setFormSlideIdx((i) => Math.min(slideCount - 1, i + 1)),
+              children: "\u203A"
+            }
+          )
+        ] }),
+        parsedSlide === null ? /* @__PURE__ */ jsx$1("p", { className: "a63-editor__form-empty", children: "No slides found." }) : parsedSlide.kind === "opaque" ? /* @__PURE__ */ jsxs("div", { className: "a63-editor__form-opaque", children: [
+          /* @__PURE__ */ jsx$1("p", { children: "This slide is only editable in Source." }),
+          /* @__PURE__ */ jsx$1(
+            "button",
+            {
+              type: "button",
+              className: "a63-editor__subtoggle-btn",
+              onClick: () => setRightTab("source"),
+              children: "Switch to Source"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "a63-editor__form-fields", children: [
+          /* @__PURE__ */ jsx$1(
+            TemplatePicker,
+            {
+              name: parsedSlide.name,
+              props: parsedSlide.props,
+              onSwitch: handleTemplateSwitch
+            }
+          ),
+          /* @__PURE__ */ jsx$1(
+            SlotForm,
+            {
+              name: parsedSlide.name,
+              props: parsedSlide.props,
+              onChange: handleSlotChange
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
 }
+function DeckSurface({
+  source: sourceProp,
+  onChange,
+  onSave,
+  initialMode = "present",
+  debounceMs = 300
+}) {
+  const editable = onChange !== void 0;
+  const [internalSource, setInternalSource] = useState(sourceProp);
+  const source = editable ? sourceProp : internalSource;
+  const setSource = (next) => {
+    if (editable) onChange(next);
+    else setInternalSource(next);
+  };
+  const [mode, setMode] = useState(editable ? initialMode : "present");
+  const [preview, setPreview] = useState(null);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    const h = setTimeout(async () => {
+      const r = await compileDeck(source);
+      if (cancelled) return;
+      if (r.ok) {
+        setPreview({ Content: r.Content, meta: r.meta });
+        setError(null);
+      } else {
+        setError(r.error);
+      }
+    }, debounceMs);
+    return () => {
+      cancelled = true;
+      clearTimeout(h);
+    };
+  }, [source, debounceMs]);
+  const deck = useMemo(
+    () => preview ? { slug: "draft", meta: preview.meta, content: preview.Content } : null,
+    [preview]
+  );
+  useEffect(() => {
+    if (!editable) return;
+    const onKey = (e) => {
+      const typing = e.target?.tagName === "TEXTAREA";
+      if (e.key === "e" && !typing && mode === "present") setMode("edit");
+      if (e.key === "Escape" && mode === "edit") setMode("present");
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [editable, mode]);
+  if (editable && mode === "edit") {
+    return /* @__PURE__ */ jsx$1(
+      EditPane,
+      {
+        source,
+        onChange: setSource,
+        onSave,
+        deck,
+        error,
+        onPresent: () => setMode("present")
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "a63-surface", children: [
+    editable && /* @__PURE__ */ jsx$1("button", { type: "button", className: "a63-surface__edit", onClick: () => setMode("edit"), children: "Edit" }),
+    deck ? /* @__PURE__ */ jsx$1(SlidesPlayer, { deck, onBack: () => {
+    } }) : /* @__PURE__ */ jsx$1("div", { className: "a63-editor__preview-empty", children: error ? "Fix the MDX error to render a preview." : "Compiling preview\u2026" })
+  ] });
+}
+function DeckEditor({ source, onChange, debounceMs }) {
+  return /* @__PURE__ */ jsx$1(
+    DeckSurface,
+    {
+      source,
+      onChange: onChange ?? (() => {
+      }),
+      initialMode: "edit",
+      debounceMs
+    }
+  );
+}
 
-export { DeckEditor, compileDeck, stripImports, synthExample, templateSnippets, toInsertSnippet };
+export { DeckEditor, DeckSurface, compileDeck, stripImports, synthExample, templateSnippets, toInsertSnippet };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map