@atom63/slides 0.2.0 → 0.4.0

package/dist/editor/index.js

@@ -1,10 +1,12 @@
-import { listTemplates, slideMdxComponents, SlidesPlayer } from '../chunk-AD3ZOVWR.js';
+import { listTemplates, slideMdxComponents, resolveTheme, SlidesPlayer, templateNames, BUILTIN_THEMES, getTemplate } from '../chunk-FNPEZIX4.js';
 import { evaluate } from '@mdx-js/mdx';
 import yaml from 'js-yaml';
 import * as runtime from 'react/jsx-runtime';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx as jsx$1, jsxs, Fragment } from 'react/jsx-runtime';
 import remarkGfm from 'remark-gfm';
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useState, useEffect, useMemo, useRef, useCallback, useId } 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,8 +510,98 @@ ${synthExample(t)}
 var templateSnippets = Object.fromEntries(
   listTemplates().map((t) => [t.name, toInsertSnippet(t)])
 );
-function EditPane({ source, onChange, onSave, deck, error, onPresent }) {
+
+// src/editor/frontmatter-edit.ts
+var BOM = "\uFEFF";
+function detectNewline(text) {
+  const crlf = (text.match(/\r\n/g) ?? []).length;
+  const lf = (text.match(/(?<!\r)\n/g) ?? []).length;
+  return crlf >= lf && crlf > 0 ? "\r\n" : "\n";
+}
+function setFrontmatterField(source, key, value) {
+  const hasBom = source.startsWith(BOM);
+  const withoutBom = hasBom ? source.slice(1) : source;
+  const nl = detectNewline(withoutBom);
+  const lines = withoutBom.split("\n").map((l) => l.replace(/\r$/, ""));
+  const hasFrontmatter = lines[0]?.trim() === "---";
+  if (!hasFrontmatter) {
+    if (!value) return source;
+    const prefix = `---${nl}${key}: ${value}${nl}---${nl}`;
+    return hasBom ? BOM + prefix + withoutBom : prefix + withoutBom;
+  }
+  let closingIndex = -1;
+  for (let i = 1; i < lines.length; i++) {
+    if (lines[i].trim() === "---") {
+      closingIndex = i;
+      break;
+    }
+  }
+  if (closingIndex === -1) {
+    if (!value) return source;
+    const prefix = `---${nl}${key}: ${value}${nl}---${nl}`;
+    return hasBom ? BOM + prefix + withoutBom : prefix + withoutBom;
+  }
+  const innerLines = lines.slice(1, closingIndex);
+  const bodyLines = lines.slice(closingIndex + 1);
+  const keyRe = new RegExp(`^${escapeRegExp(key)}:`);
+  const existingIdx = innerLines.findIndex((l) => keyRe.test(l));
+  let newInnerLines;
+  if (existingIdx !== -1) {
+    const existing = innerLines[existingIdx];
+    if (value) {
+      const desired = `${key}: ${value}`;
+      if (existing === desired) return source;
+      newInnerLines = [...innerLines];
+      newInnerLines[existingIdx] = desired;
+    } else {
+      newInnerLines = innerLines.filter((_, i) => i !== existingIdx);
+    }
+  } else {
+    if (!value) {
+      return source;
+    }
+    newInnerLines = [...innerLines, `${key}: ${value}`];
+  }
+  const innerBlock = newInnerLines.join(nl);
+  const bodyBlock = bodyLines.join(nl);
+  const rebuilt = `---${nl}${innerBlock}${nl}---${nl}${bodyBlock}`;
+  return hasBom ? BOM + rebuilt : rebuilt;
+}
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function ThemePicker({ source, theme, onChange }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("label", { htmlFor: id, className: "a63-editor__theme-picker-label", children: [
+    /* @__PURE__ */ jsx$1("span", { className: "a63-editor__theme-picker-text", children: "Theme" }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id,
+        "aria-label": "Theme",
+        className: "a63-editor__theme-select",
+        value: theme ?? "",
+        onChange: (e) => onChange(setFrontmatterField(source, "theme", e.target.value)),
+        children: [
+          /* @__PURE__ */ jsx$1("option", { value: "", children: "Default" }),
+          BUILTIN_THEMES.map((t) => /* @__PURE__ */ jsx$1("option", { value: t, children: t.charAt(0).toUpperCase() + t.slice(1) }, t))
+        ]
+      }
+    )
+  ] });
+}
+function EditPane({
+  source,
+  onChange,
+  onSave,
+  deck,
+  error,
+  onPresent,
+  themeValue
+}) {
   const [theme, setTheme] = useState("light");
+  const [rightTab, setRightTab] = useState("source");
+  const [formSlideIdx, setFormSlideIdx] = useState(0);
   const textareaRef = useRef(null);
   const templates = useMemo(() => listTemplates(), []);
   const handleChange = useCallback(
@@ -163,21 +633,63 @@ ${snippet}`);
     },
     [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]
+  );
   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 ? /* @__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$1("span", { className: "a63-editor__title", children: "Deck source \xB7 MDX" }),
         /* @__PURE__ */ jsxs("div", { className: "a63-editor__toolbar-actions", children: [
-          onSave ? /* @__PURE__ */ jsx("button", { type: "button", className: "a63-editor__save", onClick: () => onSave(source), children: "Save" }) : null,
-          /* @__PURE__ */ jsx(
+          /* @__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"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx$1(ThemePicker, { source, theme: themeValue, onChange }),
+          onSave ? /* @__PURE__ */ jsx$1("button", { type: "button", className: "a63-editor__save", onClick: () => onSave(source), children: "Save" }) : null,
+          /* @__PURE__ */ jsx$1(
             "button",
             {
               type: "button",
@@ -187,37 +699,99 @@ ${snippet}`);
               children: theme === "light" ? "\u2600\uFE0E Light" : "\u263E Dark"
             }
           ),
-          /* @__PURE__ */ jsx("button", { type: "button", className: "a63-editor__present", onClick: onPresent, children: "Present" })
+          /* @__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,
-          onKeyDown: handleKeyDown,
-          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: () => insert(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
-        )) })
+            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
+            }
+          )
+        ] })
       ] })
     ] })
   ] });
@@ -260,6 +834,7 @@ function DeckSurface({
     () => preview ? { slug: "draft", meta: preview.meta, content: preview.Content } : null,
     [preview]
   );
+  const theme = resolveTheme(deck?.meta);
   useEffect(() => {
     if (!editable) return;
     const onKey = (e) => {
@@ -271,7 +846,7 @@ function DeckSurface({
     return () => window.removeEventListener("keydown", onKey);
   }, [editable, mode]);
   if (editable && mode === "edit") {
-    return /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx$1("div", { className: "a63-surface-edit", "data-slides-theme": theme, children: /* @__PURE__ */ jsx$1(
       EditPane,
       {
         source,
@@ -279,18 +854,19 @@ function DeckSurface({
         onSave,
         deck,
         error,
-        onPresent: () => setMode("present")
+        onPresent: () => setMode("present"),
+        themeValue: theme
       }
-    );
+    ) });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "a63-surface", children: [
-    editable && /* @__PURE__ */ jsx("button", { type: "button", className: "a63-surface__edit", onClick: () => setMode("edit"), children: "Edit" }),
-    deck ? /* @__PURE__ */ jsx(SlidesPlayer, { deck, onBack: () => {
-    } }) : /* @__PURE__ */ jsx("div", { className: "a63-editor__preview-empty", children: error ? "Fix the MDX error to render a preview." : "Compiling preview\u2026" })
+  return /* @__PURE__ */ jsxs("div", { className: "a63-surface", "data-slides-theme": theme, 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(
+  return /* @__PURE__ */ jsx$1(
     DeckSurface,
     {
       source,