@bendyline/squisq-editor-react 2.0.0 → 2.0.1

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/EditorShell.tsx
-import { useEffect as useEffect61, useRef as useRef60, useState as useState70, useCallback as useCallback56, useMemo as useMemo47 } from "react";
+import { useEffect as useEffect61, useRef as useRef61, useState as useState70, useCallback as useCallback56, useMemo as useMemo47 } from "react";
 
 // src/EditorContext.tsx
 import {
@@ -204,7 +204,14 @@ function markdownToTiptap(markdown) {
     }
     if (line.startsWith("> ")) {
       flushList();
-      pushBlock(`<blockquote><p>${inlineToHtml(line.slice(2))}</p></blockquote>`);
+      const quoteLines = [line.slice(2)];
+      while (i + 1 < lines.length && lines[i + 1].startsWith("> ")) {
+        i++;
+        quoteLines.push(lines[i].slice(2));
+      }
+      pushBlock(
+        `<blockquote>${quoteLines.map((quoteLine) => `<p>${inlineToHtml(quoteLine)}</p>`).join("")}</blockquote>`
+      );
       continue;
     }
     const taskMatch = line.match(/^[-*+]\s+\[([xX ])\]\s*(.*)$/);
@@ -329,10 +336,15 @@ function tiptapToMarkdown(html) {
     }
     const bqMatch = remaining.match(/^<blockquote>(.*?)<\/blockquote>/s);
     if (bqMatch) {
-      const inner = htmlToInline(bqMatch[1].replace(/<\/?p>/g, ""));
-      lines.push("> " + inner);
-      lines.push("");
-      remaining = remaining.slice(bqMatch[0].length);
+      const paragraphs = bqMatch[1].split(/<\/p>\s*<p[^>]*>/i).map((paragraph) => paragraph.replace(/^<p[^>]*>/i, "").replace(/<\/p>\s*$/i, ""));
+      for (const paragraph of paragraphs) {
+        for (const quoteLine of htmlToInline(paragraph).split("\n")) {
+          lines.push("> " + quoteLine);
+        }
+      }
+      const next = remaining.slice(bqMatch[0].length);
+      if (!/^\s*<blockquote>/.test(next)) lines.push("");
+      remaining = next;
       continue;
     }
     if (remaining.startsWith("<hr>") || remaining.startsWith("<hr/>") || remaining.startsWith("<hr />")) {
@@ -346,11 +358,11 @@ function tiptapToMarkdown(html) {
       /^<div[^>]*class="[^"]*tableWrapper[^"]*"[^>]*><table[^>]*>(.*?)<\/table>\s*<\/div>/s
     ) || remaining.match(/^<table[^>]*>(.*?)<\/table>/s);
     if (tableMatch) {
-      const tableContent = tableMatch[1];
+      const tableContent2 = tableMatch[1];
       const rows = [];
       const rowRegex = /<tr[^>]*>(.*?)<\/tr>/gs;
       let rowExec;
-      while ((rowExec = rowRegex.exec(tableContent)) !== null) {
+      while ((rowExec = rowRegex.exec(tableContent2)) !== null) {
         const rowHtml = rowExec[1];
         const cells = [];
         const cellRegex = /<(th|td)([^>]*)>(.*?)<\/\1>/gs;
@@ -2357,9 +2369,27 @@ var overlayStyle = {
   justifyContent: "center",
   zIndex: 1e4
 };
+function recorderThemeStyle(colorScheme) {
+  const dark = colorScheme === "dark";
+  return {
+    colorScheme,
+    "--squisq-recorder-surface": `var(--squisq-bg, ${dark ? "#1f2937" : "#fffdf7"})`,
+    "--squisq-recorder-input": `var(--squisq-input-bg, ${dark ? "#374151" : "#fff"})`,
+    "--squisq-recorder-border": `var(--squisq-border, ${dark ? "#4b5563" : "#c9b98a"})`,
+    "--squisq-recorder-text": `var(--squisq-text, ${dark ? "#e5e7eb" : "#4a3c1f"})`,
+    "--squisq-recorder-muted": `var(--squisq-text-muted, ${dark ? "#9ca3af" : "#5a4a2a"})`,
+    "--squisq-recorder-accent": "var(--squisq-accent, #8b6914)",
+    "--squisq-recorder-accent-text": "#fff",
+    "--squisq-recorder-danger": dark ? "#dc4c4c" : "#b33a3a",
+    "--squisq-recorder-danger-border": dark ? "#ef6a6a" : "#902929",
+    "--squisq-recorder-error-bg": dark ? "#3f151b" : "#fceeee",
+    "--squisq-recorder-error-border": dark ? "#7f1d1d" : "#d88a8a",
+    "--squisq-recorder-error-text": dark ? "#fecdd3" : "#8c2a2a"
+  };
+}
 var modalStyle = {
-  background: "#FFFDF7",
-  border: "1px solid #c9b98a",
+  background: "var(--squisq-recorder-surface)",
+  border: "1px solid var(--squisq-recorder-border)",
   borderRadius: 0,
   padding: "24px 28px",
   width: "min(560px, calc(100vw - 48px))",
@@ -2367,30 +2397,30 @@ var modalStyle = {
   overflowY: "auto",
   boxShadow: "0 8px 32px rgba(0,0,0,0.18)",
   fontFamily: "system-ui, -apple-system, sans-serif",
-  color: "#4a3c1f"
+  color: "var(--squisq-recorder-text)"
 };
 var titleStyle = {
   margin: "0 0 16px 0",
   fontSize: 18,
   fontWeight: 600,
-  color: "#2d2310"
+  color: "var(--squisq-recorder-text)"
 };
 var labelStyle = {
   display: "block",
   fontSize: 13,
   fontWeight: 500,
   marginBottom: 4,
-  color: "#5a4a2a"
+  color: "var(--squisq-recorder-text)"
 };
 var inputStyle = {
   width: "100%",
   padding: "6px 8px",
   fontSize: 13,
   fontFamily: "inherit",
-  border: "1px solid #c9b98a",
+  border: "1px solid var(--squisq-recorder-border)",
   borderRadius: 0,
-  background: "#fff",
-  color: "#4a3c1f",
+  background: "var(--squisq-recorder-input)",
+  color: "var(--squisq-recorder-text)",
   marginBottom: 12,
   boxSizing: "border-box"
 };
@@ -2405,9 +2435,9 @@ var btnPrimary = {
   fontFamily: "inherit",
   fontWeight: 500,
   cursor: "pointer",
-  background: "#8B6914",
-  color: "#fff",
-  border: "1px solid #7a5c10",
+  background: "var(--squisq-recorder-accent)",
+  color: "var(--squisq-recorder-accent-text)",
+  border: "1px solid var(--squisq-recorder-accent)",
   borderRadius: 0
 };
 var btnSecondary = {
@@ -2416,15 +2446,15 @@ var btnSecondary = {
   fontFamily: "inherit",
   fontWeight: 500,
   cursor: "pointer",
-  background: "#E8DFC6",
-  color: "#4a3c1f",
-  border: "1px solid #c9b98a",
+  background: "var(--squisq-recorder-input)",
+  color: "var(--squisq-recorder-text)",
+  border: "1px solid var(--squisq-recorder-border)",
   borderRadius: 0
 };
 var btnDanger = {
   ...btnPrimary,
-  background: "#B33A3A",
-  borderColor: "#902929"
+  background: "var(--squisq-recorder-danger)",
+  borderColor: "var(--squisq-recorder-danger-border)"
 };
 var toggleRowStyle = {
   display: "flex",
@@ -2437,16 +2467,16 @@ var toggleBase = {
   fontFamily: "inherit",
   cursor: "pointer",
   background: "transparent",
-  color: "#5a4a2a",
-  border: "1px solid #c9b98a",
+  color: "var(--squisq-recorder-text)",
+  border: "1px solid var(--squisq-recorder-border)",
   borderRadius: 999
 };
 var toggleActive = {
   ...toggleBase,
-  color: "#fffdf5",
+  color: "var(--squisq-recorder-accent-text)",
   fontWeight: 600,
-  background: "#8B6914",
-  borderColor: "#8B6914"
+  background: "var(--squisq-recorder-accent)",
+  borderColor: "var(--squisq-recorder-accent)"
 };
 var previewBoxStyle = {
   width: "100%",
@@ -2464,20 +2494,20 @@ var previewBoxStyle = {
 var audioMeterStyle = {
   width: "100%",
   height: 56,
-  background: "#F2EBD9",
-  border: "1px solid #c9b98a",
+  background: "var(--squisq-recorder-input)",
+  border: "1px solid var(--squisq-recorder-border)",
   marginBottom: 12,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  color: "#5a4a2a",
+  color: "var(--squisq-recorder-muted)",
   fontSize: 13,
   fontVariantNumeric: "tabular-nums"
 };
 var errorStyle = {
-  background: "#FCEEEE",
-  border: "1px solid #D88A8A",
-  color: "#8C2A2A",
+  background: "var(--squisq-recorder-error-bg)",
+  border: "1px solid var(--squisq-recorder-error-border)",
+  color: "var(--squisq-recorder-error-text)",
   padding: "8px 10px",
   fontSize: 13,
   marginBottom: 12
@@ -2488,6 +2518,18 @@ var buttonRowStyle = {
   justifyContent: "flex-end",
   marginTop: 8
 };
+var summaryStyle = {
+  margin: "0 0 12px 0",
+  fontSize: 12,
+  color: "var(--squisq-recorder-muted)"
+};
+var recordingStatusStyle = {
+  fontSize: 13,
+  fontVariantNumeric: "tabular-nums",
+  marginBottom: 12,
+  color: "var(--squisq-recorder-accent)",
+  fontWeight: 600
+};
 function formatDurationMs(ms) {
   const totalSec = Math.floor(ms / 1e3);
   const m = Math.floor(totalSec / 60);
@@ -2529,6 +2571,7 @@ function RecorderModal({
   mediaProvider,
   container = null,
   initialMode = "mic",
+  colorScheme = "light",
   onClose,
   onSave
 }) {
@@ -2663,144 +2706,144 @@ function RecorderModal({
       setVideo((v) => v === key ? "none" : key);
     }
   };
-  return /* @__PURE__ */ jsx4("div", { style: overlayStyle, role: "dialog", "aria-modal": "true", "aria-label": "Record media", children: /* @__PURE__ */ jsxs2("div", { style: modalStyle, onClick: (e2) => e2.stopPropagation(), children: [
-    /* @__PURE__ */ jsx4("h2", { style: titleStyle, children: "Record media" }),
-    /* @__PURE__ */ jsx4("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLES.map((t) => {
-      const active = toggleActiveFor(t.key);
-      return /* @__PURE__ */ jsx4(
-        "button",
-        {
-          type: "button",
-          "aria-pressed": active,
-          style: active ? toggleActive : toggleBase,
-          onClick: () => onToggle(t.key),
-          disabled: togglesLocked,
-          children: t.label
-        },
-        t.key
-      );
-    }) }),
-    /* @__PURE__ */ jsx4("p", { style: { margin: "0 0 12px 0", fontSize: 12, color: "#5a4a2a" }, children: captureSummary(micOn, video) }),
-    recorder.error && /* @__PURE__ */ jsx4("div", { style: errorStyle, children: recorder.error.message }),
-    saveError && /* @__PURE__ */ jsx4("div", { style: errorStyle, children: saveError }),
-    !showPreview && /* @__PURE__ */ jsx4("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx4("span", { children: "Click Start Preview to start a recording." }) }),
-    showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsx4("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx4(
-      "video",
-      {
-        ref: previewRef,
-        autoPlay: true,
-        muted: true,
-        playsInline: true,
-        style: { width: "100%", height: "100%", objectFit: "contain" }
-      }
-    ) }),
-    showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx4("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
-      "\u25CF Recording ",
-      formatDurationMs(recorder.durationMs)
-    ] }) : /* @__PURE__ */ jsx4(Fragment, { children: "Microphone ready" }) }),
-    recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsx4("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx4(
-      "video",
-      {
-        src: playbackUrl,
-        controls: true,
-        playsInline: true,
-        style: { width: "100%", height: "100%", objectFit: "contain" }
-      }
-    ) }),
-    recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 12 }, children: [
-      /* @__PURE__ */ jsxs2("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
-        "\u2713 Recorded ",
-        formatDurationMs(recorder.durationMs)
-      ] }),
-      /* @__PURE__ */ jsx4("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
-    ] }),
-    source === "mic" && /* @__PURE__ */ jsxs2(Fragment, { children: [
-      /* @__PURE__ */ jsx4("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
-      /* @__PURE__ */ jsx4(
-        "textarea",
-        {
-          id: "recorder-source-text",
-          style: textareaStyle,
-          placeholder: "Type the text you're going to read aloud.",
-          value: sourceText,
-          onChange: (e2) => setSourceText(e2.target.value),
-          disabled: recorder.state === "recording"
-        }
-      )
-    ] }),
-    video === "screen" && /* @__PURE__ */ jsxs2(
-      "label",
-      {
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 6,
-          marginBottom: 12,
-          fontSize: 13
-        },
-        children: [
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: "squisq-editor-shell squisq-recorder-overlay",
+      "data-theme": colorScheme,
+      style: { ...overlayStyle, ...recorderThemeStyle(colorScheme) },
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": "Record media",
+      children: /* @__PURE__ */ jsxs2("div", { style: modalStyle, onClick: (e2) => e2.stopPropagation(), children: [
+        /* @__PURE__ */ jsx4("h2", { style: titleStyle, children: "Record media" }),
+        /* @__PURE__ */ jsx4("div", { style: toggleRowStyle, role: "group", "aria-label": "Capture sources", children: TOGGLES.map((t) => {
+          const active = toggleActiveFor(t.key);
+          return /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              "aria-pressed": active,
+              style: active ? toggleActive : toggleBase,
+              onClick: () => onToggle(t.key),
+              disabled: togglesLocked,
+              children: t.label
+            },
+            t.key
+          );
+        }) }),
+        /* @__PURE__ */ jsx4("p", { style: summaryStyle, children: captureSummary(micOn, video) }),
+        recorder.error && /* @__PURE__ */ jsx4("div", { style: errorStyle, children: recorder.error.message }),
+        saveError && /* @__PURE__ */ jsx4("div", { style: errorStyle, children: saveError }),
+        !showPreview && /* @__PURE__ */ jsx4("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx4("span", { children: "Click Start Preview to start a recording." }) }),
+        showPreview && recorder.state !== "stopped" && !isAudioOnly && /* @__PURE__ */ jsx4("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx4(
+          "video",
+          {
+            ref: previewRef,
+            autoPlay: true,
+            muted: true,
+            playsInline: true,
+            style: { width: "100%", height: "100%", objectFit: "contain" }
+          }
+        ) }),
+        showPreview && recorder.state !== "stopped" && isAudioOnly && /* @__PURE__ */ jsx4("div", { style: audioMeterStyle, children: recorder.state === "recording" ? /* @__PURE__ */ jsxs2(Fragment, { children: [
+          "\u25CF Recording ",
+          formatDurationMs(recorder.durationMs)
+        ] }) : /* @__PURE__ */ jsx4(Fragment, { children: "Microphone ready" }) }),
+        recorder.state === "stopped" && playbackUrl && !isAudioOnly && /* @__PURE__ */ jsx4("div", { style: previewBoxStyle, children: /* @__PURE__ */ jsx4(
+          "video",
+          {
+            src: playbackUrl,
+            controls: true,
+            playsInline: true,
+            style: { width: "100%", height: "100%", objectFit: "contain" }
+          }
+        ) }),
+        recorder.state === "stopped" && playbackUrl && isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: { marginBottom: 12 }, children: [
+          /* @__PURE__ */ jsxs2("div", { style: { ...audioMeterStyle, marginBottom: 8 }, children: [
+            "\u2713 Recorded ",
+            formatDurationMs(recorder.durationMs)
+          ] }),
+          /* @__PURE__ */ jsx4("audio", { src: playbackUrl, controls: true, style: { width: "100%" } })
+        ] }),
+        source === "mic" && /* @__PURE__ */ jsxs2(Fragment, { children: [
+          /* @__PURE__ */ jsx4("label", { style: labelStyle, htmlFor: "recorder-source-text", children: "Script (used to auto-match this narration to a block)" }),
           /* @__PURE__ */ jsx4(
-            "input",
+            "textarea",
             {
-              type: "checkbox",
-              checked: includeSystemAudio,
-              onChange: (e2) => setIncludeSystemAudio(e2.target.checked),
-              disabled: recorder.state === "recording" || recorder.state === "requesting"
+              id: "recorder-source-text",
+              style: textareaStyle,
+              placeholder: "Type the text you're going to read aloud.",
+              value: sourceText,
+              onChange: (e2) => setSourceText(e2.target.value),
+              disabled: recorder.state === "recording"
             }
-          ),
-          "Include system audio (Chrome only)"
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx4("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
-    /* @__PURE__ */ jsx4(
-      "input",
-      {
-        id: "recorder-basename",
-        type: "text",
-        style: inputStyle,
-        placeholder: source === "mic" ? "narration" : "recording",
-        value: basename,
-        onChange: (e2) => setBasename(e2.target.value),
-        disabled: recorder.state === "recording"
-      }
-    ),
-    recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        style: {
-          fontSize: 13,
-          fontVariantNumeric: "tabular-nums",
-          marginBottom: 12,
-          color: "#8B6914",
-          fontWeight: 600
-        },
-        children: [
+          )
+        ] }),
+        video === "screen" && /* @__PURE__ */ jsxs2(
+          "label",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              marginBottom: 12,
+              fontSize: 13
+            },
+            children: [
+              /* @__PURE__ */ jsx4(
+                "input",
+                {
+                  type: "checkbox",
+                  style: { accentColor: "var(--squisq-recorder-accent)" },
+                  checked: includeSystemAudio,
+                  onChange: (e2) => setIncludeSystemAudio(e2.target.checked),
+                  disabled: recorder.state === "recording" || recorder.state === "requesting"
+                }
+              ),
+              "Include system audio (Chrome only)"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4("label", { style: labelStyle, htmlFor: "recorder-basename", children: "Filename (optional)" }),
+        /* @__PURE__ */ jsx4(
+          "input",
+          {
+            id: "recorder-basename",
+            type: "text",
+            style: inputStyle,
+            placeholder: source === "mic" ? "narration" : "recording",
+            value: basename,
+            onChange: (e2) => setBasename(e2.target.value),
+            disabled: recorder.state === "recording"
+          }
+        ),
+        recorder.state === "recording" && !isAudioOnly && /* @__PURE__ */ jsxs2("div", { style: recordingStatusStyle, children: [
           "\u25CF Recording ",
           formatDurationMs(recorder.durationMs)
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs2("div", { style: buttonRowStyle, children: [
-      /* @__PURE__ */ jsx4("button", { type: "button", style: btnSecondary, onClick: handleClose, disabled: isBusy, children: "Close" }),
-      (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx4(
-        "button",
-        {
-          type: "button",
-          style: btnPrimary,
-          onClick: handleRequest,
-          disabled: isBusy || !canCapture,
-          children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
-        }
-      ),
-      canRecord && /* @__PURE__ */ jsx4("button", { type: "button", style: btnPrimary, onClick: handleStart, disabled: isBusy, children: "Record" }),
-      canStop && /* @__PURE__ */ jsx4("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
-      canSave && /* @__PURE__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx4("button", { type: "button", style: btnSecondary, onClick: handleDiscard, disabled: isBusy, children: "Discard & re-record" }),
-        /* @__PURE__ */ jsx4("button", { type: "button", style: btnPrimary, onClick: handleSave, disabled: isBusy, children: isSaving ? "Saving\u2026" : "Save to document" })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { style: buttonRowStyle, children: [
+          /* @__PURE__ */ jsx4("button", { type: "button", style: btnSecondary, onClick: handleClose, disabled: isBusy, children: "Close" }),
+          (recorder.state === "idle" || recorder.state === "error" || recorder.state === "requesting") && /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              style: btnPrimary,
+              onClick: handleRequest,
+              disabled: isBusy || !canCapture,
+              children: recorder.state === "requesting" ? "Requesting\u2026" : "Start preview"
+            }
+          ),
+          canRecord && /* @__PURE__ */ jsx4("button", { type: "button", style: btnPrimary, onClick: handleStart, disabled: isBusy, children: "Record" }),
+          canStop && /* @__PURE__ */ jsx4("button", { type: "button", style: btnDanger, onClick: handleStop, disabled: isBusy, children: "Stop" }),
+          canSave && /* @__PURE__ */ jsxs2(Fragment, { children: [
+            /* @__PURE__ */ jsx4("button", { type: "button", style: btnSecondary, onClick: handleDiscard, disabled: isBusy, children: "Discard & re-record" }),
+            /* @__PURE__ */ jsx4("button", { type: "button", style: btnPrimary, onClick: handleSave, disabled: isBusy, children: isSaving ? "Saving\u2026" : "Save to document" })
+          ] })
+        ] })
       ] })
-    ] })
-  ] }) });
+    }
+  );
 }
 
 // src/recorder/RecorderPanel.tsx
@@ -2809,6 +2852,7 @@ function RecorderPanel({
   mediaProvider,
   container = null,
   initialMode = "mic",
+  colorScheme = "light",
   onSave,
   tooltip = "Record media",
   className
@@ -2835,6 +2879,7 @@ function RecorderPanel({
           mediaProvider,
           container,
           initialMode,
+          colorScheme,
           onClose: handleClose,
           onSave: (result) => {
             onSave?.(result);
@@ -2892,7 +2937,8 @@ function RecorderEntry() {
     insertAtCursor,
     bumpMediaRevision,
     markdownSource,
-    setMarkdownSource
+    setMarkdownSource,
+    colorScheme
   } = useEditorContext();
   const handleSave = useCallback7(
     (result) => {
@@ -2953,6 +2999,7 @@ ${videoTag}` : videoTag);
     {
       mediaProvider,
       container: workspaceContainer,
+      colorScheme,
       onSave: handleSave,
       className: "squisq-toolbar-button"
     }
@@ -5812,13 +5859,25 @@ function resolvePersistedTransformStyleId(value) {
   return VALID_TRANSFORM_IDS.has(normalized) ? normalized : null;
 }
 
-// src/DocumentSettingsDialog.tsx
-import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
-var FM = {
+// src/frontmatterSettings.ts
+var FRONTMATTER_SETTING_KEYS = {
   theme: { canonical: "squisq-theme", legacy: ["themeId", "theme"] },
   transform: { canonical: "squisq-transform", legacy: "transform-style" },
-  captions: { canonical: "squisq-captions", legacy: "caption-style" }
+  captions: { canonical: "squisq-captions", legacy: "caption-style" },
+  coverSlide: { canonical: "squisq-cover-slide", legacy: "cover-slide" }
 };
+var FRONTMATTER_SETTING_DEFAULTS = {
+  theme: "standard",
+  transform: "",
+  captions: "standard",
+  coverSlide: true
+};
+function omitFrontmatterDefault(value, defaultValue) {
+  return value === defaultValue ? null : value;
+}
+
+// src/DocumentSettingsDialog.tsx
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function readFm(fm, canonical, legacy) {
   if (!fm) return "";
   const v = Object.prototype.hasOwnProperty.call(fm, canonical) ? fm[canonical] : fm[legacy];
@@ -5840,9 +5899,17 @@ function DocumentSettingsDialog({
   const currentTitle = typeof frontmatter?.title === "string" ? frontmatter.title : "";
   const currentTheme = readFrontmatterThemeId(frontmatter) ?? "";
   const currentTransform = resolvePersistedTransformStyleId(
-    readFm(frontmatter, FM.transform.canonical, FM.transform.legacy)
+    readFm(
+      frontmatter,
+      FRONTMATTER_SETTING_KEYS.transform.canonical,
+      FRONTMATTER_SETTING_KEYS.transform.legacy
+    )
   ) ?? "";
-  const currentCaptions = readFm(frontmatter, FM.captions.canonical, FM.captions.legacy);
+  const currentCaptions = readFm(
+    frontmatter,
+    FRONTMATTER_SETTING_KEYS.captions.canonical,
+    FRONTMATTER_SETTING_KEYS.captions.legacy
+  );
   const [title, setTitle] = useState14(currentTitle);
   const [theme, setTheme] = useState14(currentTheme);
   const [transform, setTransform] = useState14(currentTransform);
@@ -5880,19 +5947,28 @@ function DocumentSettingsDialog({
       const nextTitle = !trimmedTitle || titleMatchesInferred ? null : trimmedTitle;
       const updates = {
         title: nextTitle,
-        [FM.theme.canonical]: theme || null,
+        [FRONTMATTER_SETTING_KEYS.theme.canonical]: omitFrontmatterDefault(
+          theme || FRONTMATTER_SETTING_DEFAULTS.theme,
+          FRONTMATTER_SETTING_DEFAULTS.theme
+        ),
         // Saving settings canonicalizes all older theme spellings.
-        [FM.theme.legacy[0]]: null,
-        [FM.theme.legacy[1]]: null,
-        [FM.transform.canonical]: transform || null,
-        [FM.transform.legacy]: null,
-        [FM.captions.canonical]: captions || null,
-        ...currentCaptions && captions !== currentCaptions ? { [FM.captions.legacy]: null } : {}
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[0]]: null,
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[1]]: null,
+        [FRONTMATTER_SETTING_KEYS.transform.canonical]: omitFrontmatterDefault(
+          transform,
+          FRONTMATTER_SETTING_DEFAULTS.transform
+        ),
+        [FRONTMATTER_SETTING_KEYS.transform.legacy]: null,
+        [FRONTMATTER_SETTING_KEYS.captions.canonical]: omitFrontmatterDefault(
+          captions || FRONTMATTER_SETTING_DEFAULTS.captions,
+          FRONTMATTER_SETTING_DEFAULTS.captions
+        ),
+        [FRONTMATTER_SETTING_KEYS.captions.legacy]: null
       };
       const nextSource = setFrontmatterValues(markdownSource, updates);
       onSave(nextSource);
     },
-    [title, theme, transform, captions, inferredTitle, markdownSource, currentCaptions, onSave]
+    [title, theme, transform, captions, inferredTitle, markdownSource, onSave]
   );
   return /* @__PURE__ */ jsx16("div", { className: "squisq-doc-settings-overlay", onMouseDown: handleBackdrop, children: /* @__PURE__ */ jsxs11("form", { className: "squisq-doc-settings-dialog", onSubmit: handleSave, children: [
     /* @__PURE__ */ jsxs11("div", { className: "squisq-doc-settings-header", children: [
@@ -7906,8 +7982,7 @@ var SelectTool = {
       }
     } else if (dragState.kind === "resize") {
       const { x, y, width, height } = dragState.currentBounds;
-      ctx.dispatch({ kind: "moveLayer", id: dragState.layerId, x, y });
-      ctx.dispatch({ kind: "resizeLayer", id: dragState.layerId, width, height });
+      ctx.dispatch({ kind: "resizeLayer", id: dragState.layerId, x, y, width, height });
     }
     e2.currentTarget.releasePointerCapture?.(e2.pointerId);
     setDragState(ctx.interaction, null);
@@ -11078,6 +11153,9 @@ function useLayoutAdapter(editor, headingPos, options = {}) {
         moveLayoutLayer(editor, headingPos, cmd.id, cmd.x, cmd.y);
         return;
       case "resizeLayer":
+        if (cmd.x !== void 0 && cmd.y !== void 0) {
+          moveLayoutLayer(editor, headingPos, cmd.id, cmd.x, cmd.y);
+        }
         resizeLayoutLayer(editor, headingPos, cmd.id, cmd.width, cmd.height);
         return;
       case "addLayer": {
@@ -12271,7 +12349,12 @@ function useDrawingAdapter(editor, headingPos, options = {}) {
       case "resizeLayer": {
         if (!isPrimaryShapeLayer(cmd.id)) return;
         const id = shapeIdFromLayerId(cmd.id);
-        if (id) resizeShape(editor, headingPos, id, cmd.width, cmd.height);
+        if (id) {
+          if (cmd.x !== void 0 && cmd.y !== void 0) {
+            moveShape(editor, headingPos, id, cmd.x, cmd.y);
+          }
+          resizeShape(editor, headingPos, id, cmd.width, cmd.height);
+        }
         return;
       }
       case "addLayer": {
@@ -13493,7 +13576,13 @@ function applyCommand(layers, cmd) {
       return layers.map(
         (l) => l.id === cmd.id ? {
           ...l,
-          position: { ...l.position, width: cmd.width, height: cmd.height }
+          position: {
+            ...l.position,
+            ...cmd.x !== void 0 ? { x: cmd.x } : {},
+            ...cmd.y !== void 0 ? { y: cmd.y } : {},
+            width: cmd.width,
+            height: cmd.height
+          }
         } : l
       );
     case "addLayer":
@@ -15957,12 +16046,6 @@ function resolveFrontmatterBoolean(value) {
   if (v === "false" || v === "no" || v === "off" || v === "hide" || v === "hidden") return false;
   return null;
 }
-var FM_KEYS = {
-  theme: { canonical: "squisq-theme", legacy: ["themeId", "theme"] },
-  transform: { canonical: "squisq-transform", legacy: "transform-style" },
-  captions: { canonical: "squisq-captions", legacy: "caption-style" },
-  coverSlide: { canonical: "squisq-cover-slide", legacy: "cover-slide" }
-};
 function readFrontmatterKey(fm, canonical, legacy) {
   if (!fm) return void 0;
   return Object.prototype.hasOwnProperty.call(fm, canonical) ? fm[canonical] : fm[legacy];
@@ -16009,7 +16092,7 @@ function PreviewSettingsProvider({
   );
   const [selectedThemeId, setSelectedThemeId] = useState32(null);
   useEffect26(() => setSelectedThemeId(null), [fmTheme]);
-  const resolvedThemeId = selectedThemeId ?? fmTheme ?? "standard";
+  const resolvedThemeId = selectedThemeId ?? fmTheme ?? FRONTMATTER_SETTING_DEFAULTS.theme;
   const resolvedTheme = useMemo21(
     () => customThemes.find((theme) => theme.id === resolvedThemeId) ?? resolveThemeForDoc(doc, resolvedThemeId),
     [customThemes, doc, resolvedThemeId]
@@ -16028,9 +16111,12 @@ function PreviewSettingsProvider({
       const selectedCustom = customThemes.find((theme) => theme.id === id);
       const alreadyDocScoped = docThemes.some((theme) => theme.id === id);
       const updates = {
-        [FM_KEYS.theme.canonical]: id,
-        [FM_KEYS.theme.legacy[0]]: null,
-        [FM_KEYS.theme.legacy[1]]: null
+        [FRONTMATTER_SETTING_KEYS.theme.canonical]: omitFrontmatterDefault(
+          id,
+          FRONTMATTER_SETTING_DEFAULTS.theme
+        ),
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[0]]: null,
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[1]]: null
       };
       if (selectedCustom && !alreadyDocScoped) {
         updates[FRONTMATTER_CUSTOM_THEMES_KEY2] = writeCustomThemesToFrontmatter2([...docThemes, selectedCustom]) ?? null;
@@ -16057,7 +16143,7 @@ function PreviewSettingsProvider({
         const nextThemes = idx >= 0 ? docThemes2.map((t, i) => i === idx ? theme : t) : [...docThemes2, theme];
         const updates = {
           [FRONTMATTER_CUSTOM_THEMES_KEY2]: writeCustomThemesToFrontmatter2(nextThemes) ?? null,
-          [FM_KEYS.theme.canonical]: theme.id
+          [FRONTMATTER_SETTING_KEYS.theme.canonical]: theme.id
         };
         if (extras?.templates && extras.templates.length > 0) {
           const existing = doc?.customTemplates ?? [];
@@ -16083,7 +16169,11 @@ function PreviewSettingsProvider({
   );
   const fmTransform = useMemo21(
     () => resolvePersistedTransformStyleId(
-      readFrontmatterKey(frontmatter, FM_KEYS.transform.canonical, FM_KEYS.transform.legacy)
+      readFrontmatterKey(
+        frontmatter,
+        FRONTMATTER_SETTING_KEYS.transform.canonical,
+        FRONTMATTER_SETTING_KEYS.transform.legacy
+      )
     ),
     [frontmatter]
   );
@@ -16094,42 +16184,71 @@ function PreviewSettingsProvider({
     (id) => {
       setSelectedTransformStyle(id);
       if (id !== null) {
-        persistFrontmatter({ [FM_KEYS.transform.canonical]: id === "" ? null : id });
+        persistFrontmatter({
+          [FRONTMATTER_SETTING_KEYS.transform.canonical]: omitFrontmatterDefault(
+            id,
+            FRONTMATTER_SETTING_DEFAULTS.transform
+          ),
+          [FRONTMATTER_SETTING_KEYS.transform.legacy]: null
+        });
       }
     },
     [persistFrontmatter]
   );
   const fmCaptionMode = useMemo21(
     () => resolveFrontmatterCaptionMode(
-      readFrontmatterKey(frontmatter, FM_KEYS.captions.canonical, FM_KEYS.captions.legacy)
+      readFrontmatterKey(
+        frontmatter,
+        FRONTMATTER_SETTING_KEYS.captions.canonical,
+        FRONTMATTER_SETTING_KEYS.captions.legacy
+      )
     ),
     [frontmatter]
   );
   const [selectedCaptionMode, setSelectedCaptionMode] = useState32(null);
   useEffect26(() => setSelectedCaptionMode(null), [fmCaptionMode]);
-  const activeCaptionMode = selectedCaptionMode ?? fmCaptionMode ?? "standard";
+  const activeCaptionMode = selectedCaptionMode ?? fmCaptionMode ?? FRONTMATTER_SETTING_DEFAULTS.captions;
   const activeCaptionsEnabled = activeCaptionMode !== "off";
   const activeCaptionStyle = activeCaptionMode === "social" ? "social" : "standard";
   const handleSetCaptionMode = useCallback29(
     (mode) => {
       setSelectedCaptionMode(mode);
-      persistFrontmatter({ [FM_KEYS.captions.canonical]: mode });
+      persistFrontmatter({
+        [FRONTMATTER_SETTING_KEYS.captions.canonical]: omitFrontmatterDefault(
+          mode,
+          FRONTMATTER_SETTING_DEFAULTS.captions
+        ),
+        [FRONTMATTER_SETTING_KEYS.captions.legacy]: null
+      });
     },
     [persistFrontmatter]
   );
   const fmCoverSlide = useMemo21(
     () => resolveFrontmatterBoolean(
-      readFrontmatterKey(frontmatter, FM_KEYS.coverSlide.canonical, FM_KEYS.coverSlide.legacy)
+      readFrontmatterKey(
+        frontmatter,
+        FRONTMATTER_SETTING_KEYS.coverSlide.canonical,
+        FRONTMATTER_SETTING_KEYS.coverSlide.legacy
+      )
     ),
     [frontmatter]
   );
   const [selectedCoverSlide, setSelectedCoverSlide] = useState32(null);
   useEffect26(() => setSelectedCoverSlide(null), [fmCoverSlide]);
-  const activeCoverSlide = selectedCoverSlide ?? fmCoverSlide ?? true;
+  const activeCoverSlide = selectedCoverSlide ?? fmCoverSlide ?? FRONTMATTER_SETTING_DEFAULTS.coverSlide;
   const handleSetCoverSlideEnabled = useCallback29(
     (enabled) => {
       setSelectedCoverSlide(enabled);
-      persistFrontmatter({ [FM_KEYS.coverSlide.canonical]: enabled ? "true" : "false" });
+      persistFrontmatter({
+        // The cover is enabled by default, so only persist the non-default
+        // state. Pass the boolean through so YAML writes `false`, not
+        // the string `"false"`.
+        [FRONTMATTER_SETTING_KEYS.coverSlide.canonical]: omitFrontmatterDefault(
+          enabled,
+          FRONTMATTER_SETTING_DEFAULTS.coverSlide
+        ),
+        [FRONTMATTER_SETTING_KEYS.coverSlide.legacy]: null
+      });
     },
     [persistFrontmatter]
   );
@@ -16770,6 +16889,106 @@ function filterVisibleMediaEntries(entries) {
   return entries.filter(isVisibleMediaEntry);
 }
 
+// src/selectionConversions.ts
+function selectionLines(text) {
+  return text.replace(/\r\n?/g, "\n").split("\n").map((line) => line.trim()).filter((line) => line.length > 0);
+}
+function splitPipeLine(line) {
+  let value = line.trim();
+  if (value.startsWith("|")) value = value.slice(1);
+  if (value.endsWith("|") && !value.endsWith("\\|")) value = value.slice(0, -1);
+  const cells = [];
+  let cell = "";
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i];
+    if (char === "\\" && value[i + 1] === "|") {
+      cell += "|";
+      i++;
+    } else if (char === "|") {
+      cells.push(cell.trim());
+      cell = "";
+    } else {
+      cell += char;
+    }
+  }
+  cells.push(cell.trim());
+  return cells;
+}
+function splitCommaLine(line) {
+  const cells = [];
+  let cell = "";
+  let quoted = false;
+  for (let i = 0; i < line.length; i++) {
+    const char = line[i];
+    if (char === '"' && !quoted && cell.trim().length === 0) {
+      quoted = true;
+      cell = "";
+    } else if (char === '"' && quoted) {
+      if (line[i + 1] === '"') {
+        cell += '"';
+        i++;
+      } else {
+        quoted = false;
+      }
+    } else if (char === "," && !quoted) {
+      cells.push(cell.trim());
+      cell = "";
+    } else {
+      cell += char;
+    }
+  }
+  if (quoted) return line.split(",").map((value) => value.trim());
+  cells.push(cell.trim());
+  return cells;
+}
+function splitLine(line, delimiter) {
+  switch (delimiter) {
+    case "pipe":
+      return splitPipeLine(line);
+    case "comma":
+      return splitCommaLine(line);
+    case "tab":
+      return line.trim().split("	").map((cell) => cell.trim());
+    case "multispace":
+      return line.trim().split(/[ \u00a0]{2,}/).map((cell) => cell.trim());
+  }
+}
+function selectionToTable(text) {
+  const lines = selectionLines(text);
+  const candidates = ["pipe", "comma", "tab", "multispace"];
+  if (lines.length >= 2) {
+    for (const delimiter of candidates) {
+      const rows = lines.map((line) => splitLine(line, delimiter));
+      const columnCount = rows[0]?.length ?? 0;
+      if (columnCount >= 2 && rows.every((row) => row.length === columnCount)) {
+        return { delimiter, rows };
+      }
+    }
+  }
+  return { delimiter: null, rows: lines.map((line) => [line]) };
+}
+function escapeTableCell(cell) {
+  return cell.replace(/\|/g, "\\|");
+}
+function selectionToTableMarkdown(text) {
+  const { rows } = selectionToTable(text);
+  if (rows.length === 0) return "";
+  const formatRow = (row) => `| ${row.map(escapeTableCell).join(" | ")} |`;
+  const separator = rows[0].map(() => "---");
+  return [formatRow(rows[0]), formatRow(separator), ...rows.slice(1).map(formatRow)].join("\n");
+}
+function selectionToTaskItems(text) {
+  return selectionLines(text).map((line) => {
+    const task = /^[-*+]\s+\[([ xX])\]\s*(.*)$/.exec(line);
+    if (task) return { checked: task[1].toLowerCase() === "x", text: task[2].trim() };
+    const withoutListMarker = line.replace(/^(?:[-*+]\s+|\d+[.)]\s+)/, "");
+    return { checked: false, text: withoutListMarker.trim() };
+  });
+}
+function selectionToTaskListMarkdown(text) {
+  return selectionToTaskItems(text).map((item) => `- [${item.checked ? "x" : " "}] ${item.text}`).join("\n");
+}
+
 // src/Toolbar.tsx
 import { Fragment as Fragment14, jsx as jsx39, jsxs as jsxs29 } from "react/jsx-runtime";
 var VIEWS = [
@@ -16947,6 +17166,7 @@ var BUTTONS = [
 ];
 var FIRST_MEDIA_INDEX = BUTTONS.findIndex((b) => b.group === "media");
 var MEDIA_BUTTONS = BUTTONS.filter((b) => b.group === "media");
+var CONVERT_BUTTONS = MEDIA_BUTTONS.filter((b) => b.id === "table" || b.id === "tasklist");
 var INSERT_MENU_WIDTH = 200;
 var TASK_LIST_ITEMS = ["Task 1", "Task 2", "Task 3"];
 var TASK_LIST_MARKDOWN = TASK_LIST_ITEMS.map((item) => `- [ ] ${item}`).join("\n");
@@ -16960,18 +17180,31 @@ function fileCountLabel(count) {
 function fileCountBadge(count) {
   return count > 99 ? "99+" : String(count);
 }
-function taskListContent() {
+function paragraphContent(text) {
+  return text ? { type: "paragraph", content: [{ type: "text", text }] } : { type: "paragraph" };
+}
+function tableContent(rows) {
+  return {
+    type: "table",
+    content: rows.map((row, rowIndex) => ({
+      type: "tableRow",
+      content: row.map((cell) => ({
+        type: rowIndex === 0 ? "tableHeader" : "tableCell",
+        content: [paragraphContent(cell)]
+      }))
+    }))
+  };
+}
+function taskListContent(items = TASK_LIST_ITEMS.map((text) => ({
+  checked: false,
+  text
+}))) {
   return {
     type: "taskList",
-    content: TASK_LIST_ITEMS.map((item) => ({
+    content: items.map((item) => ({
       type: "taskItem",
-      attrs: { checked: false },
-      content: [
-        {
-          type: "paragraph",
-          content: [{ type: "text", text: item }]
-        }
-      ]
+      attrs: { checked: item.checked },
+      content: [paragraphContent(item.text)]
     }))
   };
 }
@@ -16980,6 +17213,13 @@ function insertTaskList(editor) {
   const content = supportsTaskList ? taskListContent() : TASK_LIST_MARKDOWN;
   editor.chain().focus().insertContent(content).run();
 }
+function blockConversionRange(editor) {
+  const { from, to, $from, $to } = editor.state.selection;
+  return {
+    from: $from.depth === 1 && $from.parent.isTextblock && $from.parentOffset === 0 ? $from.before(1) : from,
+    to: $to.depth === 1 && $to.parent.isTextblock && $to.parentOffset === $to.parent.content.size ? $to.after(1) : to
+  };
+}
 function isTiptapActive(editor, id) {
   if (!editor) return false;
   switch (id) {
@@ -17024,14 +17264,16 @@ var LAYOUT_STARTER_MARKDOWN = `
 Layout
 `;
 var DIAGRAM_STARTER_ART = [
-  "\u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510",
-  "\u2502  Start  \u2502",
-  "\u2514\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2518",
-  "     \u2502",
-  "     \u25BC",
-  "\u250C\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2510",
-  "\u2502  Next   \u2502",
-  "\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518"
+  "",
+  "",
+  "        \u250C\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510",
+  "        \u2502  Start  \u2502",
+  "        \u2514\u2500\u2500\u2500\u2500\u252C\u2500\u2500\u2500\u2500\u2518",
+  "             \u2502",
+  "             \u25BC",
+  "        \u250C\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2510",
+  "        \u2502  Next   \u2502",
+  "        \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518"
 ].join("\n");
 var DIAGRAM_STARTER_MARKDOWN = "\n```diagram\n" + DIAGRAM_STARTER_ART + "\n```\n";
 function insertAsciiDiagramBlock(editor) {
@@ -17677,6 +17919,43 @@ ${TASK_LIST_MARKDOWN}
     },
     [monacoEditor, markdownSource, setMarkdownSource]
   );
+  const readSelectedText = useCallback30(() => {
+    if (activeSceneText) return "";
+    if (activeView === "wysiwyg" && tiptapEditor) {
+      const { from, to, empty } = tiptapEditor.state.selection;
+      return empty ? "" : tiptapEditor.state.doc.textBetween(from, to, "\n");
+    }
+    if (activeView === "raw" && monacoEditor) {
+      const selection = monacoEditor.getSelection();
+      const model = monacoEditor.getModel();
+      return selection && model ? model.getValueInRange(selection) : "";
+    }
+    return "";
+  }, [activeSceneText, activeView, monacoEditor, tiptapEditor]);
+  const handleConvertSelection = useCallback30(
+    (target) => {
+      const selectedText = readSelectedText();
+      if (!selectedText.trim()) return;
+      if (activeView === "wysiwyg" && tiptapEditor) {
+        const content = target === "table" ? tableContent(selectionToTable(selectedText).rows) : taskListContent(selectionToTaskItems(selectedText));
+        tiptapEditor.chain().focus().insertContentAt(blockConversionRange(tiptapEditor), content).run();
+        return;
+      }
+      if (activeView === "raw" && monacoEditor) {
+        const selection = monacoEditor.getSelection();
+        if (!selection) return;
+        const converted = target === "table" ? selectionToTableMarkdown(selectedText) : selectionToTaskListMarkdown(selectedText);
+        if (!converted) return;
+        const leadingNewline = /^(?:\r?\n)/.test(selectedText) ? "\n" : "";
+        const trailingNewline = /(?:\r?\n)$/.test(selectedText) ? "\n" : "";
+        monacoEditor.executeEdits("toolbar-convert-selection", [
+          { range: selection, text: leadingNewline + converted + trailingNewline }
+        ]);
+        monacoEditor.focus();
+      }
+    },
+    [activeView, monacoEditor, readSelectedText, tiptapEditor]
+  );
   const handleImageFile = useCallback30(
     async (file) => {
       if (!mediaProvider) return;
@@ -17866,6 +18145,7 @@ ${TASK_LIST_MARKDOWN}
     if (sceneTextLevel === "block") return BLOCK_SCENE_BUTTONS.has(id);
     return INLINE_SCENE_BUTTONS.has(id);
   };
+  const showConvertActions = insertMenuAnchor !== null && readSelectedText().trim().length > 0 && CONVERT_BUTTONS.some((button) => buttonAllowed(button.id));
   const maxHeadingLevelInDoc = useMemo22(() => {
     if (!markdownSource) return 0;
     let max = 0;
@@ -18682,7 +18962,37 @@ ${TASK_LIST_MARKDOWN}
               style: { position: "fixed", top: insertMenuAnchor.top, left: insertMenuAnchor.left },
               role: "menu",
               children: [
-                /* @__PURE__ */ jsx39("div", { className: "squisq-insert-menu-header", children: "Insert" }),
+                showConvertActions && /* @__PURE__ */ jsxs29(Fragment14, { children: [
+                  /* @__PURE__ */ jsx39("div", { className: "squisq-insert-menu-header", children: "Convert" }),
+                  CONVERT_BUTTONS.map((btn) => {
+                    const label = btn.id === "table" ? "Table" : "Task List";
+                    return /* @__PURE__ */ jsxs29(
+                      "button",
+                      {
+                        className: "squisq-toolbar-overflow-item",
+                        disabled: !buttonAllowed(btn.id),
+                        onClick: () => {
+                          handleConvertSelection(btn.id);
+                          closeInsertMenu();
+                        },
+                        role: "menuitem",
+                        "aria-label": `Convert selection to ${label}`,
+                        children: [
+                          /* @__PURE__ */ jsx39("span", { className: "squisq-toolbar-overflow-icon", children: buttonIcon(btn) }),
+                          /* @__PURE__ */ jsx39("span", { children: label })
+                        ]
+                      },
+                      `convert-${btn.id}`
+                    );
+                  })
+                ] }),
+                /* @__PURE__ */ jsx39(
+                  "div",
+                  {
+                    className: `squisq-insert-menu-header${showConvertActions ? " squisq-insert-menu-header--separated" : ""}`,
+                    children: "Insert"
+                  }
+                ),
                 MEDIA_BUTTONS.filter((b) => isButtonVisible(b.id)).map((btn) => {
                   const disabled = btn.id === "image" && !mediaProvider || !buttonAllowed(btn.id);
                   const stripped = btn.title.replace(/^Insert\s+/i, "");
@@ -19310,7 +19620,7 @@ function RawEditor({
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback36, useEffect as useEffect36, useMemo as useMemo30, useRef as useRef34, useState as useState44 } from "react";
+import { useCallback as useCallback36, useEffect as useEffect36, useMemo as useMemo30, useRef as useRef35, useState as useState44 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection as Selection2 } from "@tiptap/pm/state";
 import StarterKit2 from "@tiptap/starter-kit";
@@ -19648,7 +19958,14 @@ function DiagramCanvas({
           if (!cmd.id.startsWith("node-card-")) return;
           const nodeId = nodeIdFromCardLayerId(cmd.id);
           if (!nodeId) return;
-          onCommand({ kind: "resizeNode", nodeId, width: cmd.width, height: cmd.height });
+          onCommand({
+            kind: "resizeNode",
+            nodeId,
+            width: cmd.width,
+            height: cmd.height,
+            ...cmd.x !== void 0 ? { x: cmd.x } : {},
+            ...cmd.y !== void 0 ? { y: cmd.y } : {}
+          });
           return;
         }
         case "setLayerAttr":
@@ -19734,6 +20051,168 @@ import {
   ASCII_CHAR_H,
   ASCII_CHAR_W
 } from "@bendyline/squisq/doc";
+
+// src/asciiDiagram/asciiDiagramOps.ts
+function sanitizeAsciiLabel(label) {
+  return label.replace(/[─-╿▲▼◀-◄▶-►←-↓`]/gu, " ").replace(/\s+/g, " ").trim();
+}
+function descendantsOf(diagram, nodeId) {
+  const out = /* @__PURE__ */ new Set();
+  let grew = true;
+  while (grew) {
+    grew = false;
+    for (const n of diagram.nodes) {
+      if (out.has(n.id)) continue;
+      if (n.containerId === nodeId || n.containerId && out.has(n.containerId)) {
+        out.add(n.id);
+        grew = true;
+      }
+    }
+  }
+  return out;
+}
+function translateDiagramOp(diagram, dCol, dRow) {
+  const colDelta = Math.round(dCol);
+  const rowDelta = Math.round(dRow);
+  if (colDelta === 0 && rowDelta === 0) return diagram;
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map((node) => ({
+      ...node,
+      col: Math.max(0, node.col + colDelta),
+      row: Math.max(0, node.row + rowDelta)
+    }))
+  };
+}
+function moveNodeOp(diagram, nodeId, col, row) {
+  const node = diagram.nodes.find((n) => n.id === nodeId);
+  if (!node) return diagram;
+  const dCol = Math.max(0, col) - node.col;
+  const dRow = Math.max(0, row) - node.row;
+  if (dCol === 0 && dRow === 0) return diagram;
+  const moving = descendantsOf(diagram, nodeId);
+  moving.add(nodeId);
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map(
+      (n) => moving.has(n.id) ? { ...n, col: Math.max(0, n.col + dCol), row: Math.max(0, n.row + dRow) } : n
+    )
+  };
+}
+function resizeNodeOp(diagram, nodeId, wCols, hRows) {
+  const node = diagram.nodes.find((n) => n.id === nodeId);
+  if (!node) return diagram;
+  const labelLines = node.label.length > 0 ? node.label.split("\n") : [];
+  const minW = Math.max(3, labelLines.reduce((w, l) => Math.max(w, l.length), 0) + 4);
+  const minH = Math.max(3, labelLines.length + 2);
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map(
+      (n) => n.id === nodeId ? {
+        ...n,
+        wCols: Math.max(minW, Math.round(wCols)),
+        hRows: Math.max(minH, Math.round(hRows))
+      } : n
+    )
+  };
+}
+function addEdgeOp(diagram, source, target, label) {
+  const ids = new Set(diagram.nodes.map((n) => n.id));
+  if (!ids.has(source) || !ids.has(target) || source === target) return diagram;
+  const exists = diagram.edges.some(
+    (e2) => e2.source === source && e2.target === target && (e2.label ?? "") === (label ?? "")
+  );
+  if (exists) return diagram;
+  const edge = {
+    source,
+    target,
+    ...label ? { label } : {},
+    directed: true
+  };
+  return { ...diagram, edges: [...diagram.edges, edge] };
+}
+function removeEdgeOp(diagram, source, target, label) {
+  let removed = false;
+  const edges = diagram.edges.filter((e2) => {
+    if (removed) return true;
+    const match = e2.source === source && e2.target === target && (label !== void 0 ? (e2.label ?? "") === label : true);
+    if (match) {
+      removed = true;
+      return false;
+    }
+    return true;
+  });
+  return removed ? { ...diagram, edges } : diagram;
+}
+function renameNodeOp(diagram, nodeId, label) {
+  const node = diagram.nodes.find((n) => n.id === nodeId);
+  if (!node) return diagram;
+  const clean = sanitizeAsciiLabel(label);
+  if (clean.length === 0 || clean === node.label) return diagram;
+  return {
+    ...diagram,
+    nodes: diagram.nodes.map((n) => n.id === nodeId ? { ...n, label: clean } : n)
+  };
+}
+function addNodeOp(diagram, opts) {
+  let label = opts.label;
+  if (!label) {
+    let i = 1;
+    const labels = new Set(diagram.nodes.map((n) => n.label.split("\n")[0]));
+    while (labels.has(`Node ${i}`)) i++;
+    label = `Node ${i}`;
+  }
+  const clean = sanitizeAsciiLabel(label) || "Node";
+  const col = Math.max(0, Math.round(opts.col));
+  const row = Math.max(0, Math.round(opts.row));
+  const wCols = clean.length + 4;
+  const hRows = 3;
+  const centerCol = col + wCols / 2;
+  const centerRow = row + hRows / 2;
+  const containers = diagram.nodes.filter((n) => diagram.nodes.some((m) => m.containerId === n.id)).filter(
+    (n) => centerCol > n.col && centerCol < n.col + n.wCols && centerRow > n.row && centerRow < n.row + n.hRows
+  ).sort((a, b) => a.wCols * a.hRows - b.wCols * b.hRows);
+  const node = {
+    id: `__new-${diagram.nodes.length}`,
+    // provisional; the re-parse derives the real slug id
+    label: clean,
+    col,
+    row,
+    wCols,
+    hRows,
+    ...containers[0] ? { containerId: containers[0].id } : {}
+  };
+  return { diagram: { ...diagram, nodes: [...diagram.nodes, node] }, label: clean };
+}
+function removeNodeOp(diagram, nodeId) {
+  const node = diagram.nodes.find((n) => n.id === nodeId);
+  if (!node) return diagram;
+  const nodes = diagram.nodes.filter((n) => n.id !== nodeId).map((n) => {
+    if (n.containerId !== nodeId) return n;
+    const promoted = { ...n };
+    if (node.containerId) promoted.containerId = node.containerId;
+    else delete promoted.containerId;
+    return promoted;
+  });
+  const edges = diagram.edges.filter((e2) => e2.source !== nodeId && e2.target !== nodeId);
+  return { ...diagram, nodes, edges };
+}
+
+// src/asciiDiagram/asciiDiagramData.ts
+var ASCII_DIAGRAM_GUTTER_COLS = 8;
+var ASCII_DIAGRAM_GUTTER_ROWS = 2;
+function initialAsciiDiagramCanvasOffset(diagram) {
+  if (diagram.nodes.length === 0) return { col: 0, row: 0 };
+  const minCol = Math.min(...diagram.nodes.map((node) => node.col));
+  const minRow = Math.min(...diagram.nodes.map((node) => node.row));
+  return {
+    col: Math.max(0, ASCII_DIAGRAM_GUTTER_COLS - minCol),
+    row: Math.max(0, ASCII_DIAGRAM_GUTTER_ROWS - minRow)
+  };
+}
+function offsetAsciiDiagram(diagram, offset) {
+  return translateDiagramOp(diagram, offset.col, offset.row);
+}
 function asciiDiagramToCanvas(diagram) {
   const containerIds = new Set(
     diagram.nodes.map((n) => n.containerId).filter((id) => id !== void 0)
@@ -19941,139 +20420,6 @@ var RepairableDiagramExtension = Extension.create({
   }
 });
 
-// src/asciiDiagram/asciiDiagramOps.ts
-function sanitizeAsciiLabel(label) {
-  return label.replace(/[─-╿▲▼◀-◄▶-►←-↓`]/gu, " ").replace(/\s+/g, " ").trim();
-}
-function descendantsOf(diagram, nodeId) {
-  const out = /* @__PURE__ */ new Set();
-  let grew = true;
-  while (grew) {
-    grew = false;
-    for (const n of diagram.nodes) {
-      if (out.has(n.id)) continue;
-      if (n.containerId === nodeId || n.containerId && out.has(n.containerId)) {
-        out.add(n.id);
-        grew = true;
-      }
-    }
-  }
-  return out;
-}
-function moveNodeOp(diagram, nodeId, col, row) {
-  const node = diagram.nodes.find((n) => n.id === nodeId);
-  if (!node) return diagram;
-  const dCol = Math.max(0, col) - node.col;
-  const dRow = Math.max(0, row) - node.row;
-  if (dCol === 0 && dRow === 0) return diagram;
-  const moving = descendantsOf(diagram, nodeId);
-  moving.add(nodeId);
-  return {
-    ...diagram,
-    nodes: diagram.nodes.map(
-      (n) => moving.has(n.id) ? { ...n, col: Math.max(0, n.col + dCol), row: Math.max(0, n.row + dRow) } : n
-    )
-  };
-}
-function resizeNodeOp(diagram, nodeId, wCols, hRows) {
-  const node = diagram.nodes.find((n) => n.id === nodeId);
-  if (!node) return diagram;
-  const labelLines = node.label.length > 0 ? node.label.split("\n") : [];
-  const minW = Math.max(3, labelLines.reduce((w, l) => Math.max(w, l.length), 0) + 4);
-  const minH = Math.max(3, labelLines.length + 2);
-  return {
-    ...diagram,
-    nodes: diagram.nodes.map(
-      (n) => n.id === nodeId ? {
-        ...n,
-        wCols: Math.max(minW, Math.round(wCols)),
-        hRows: Math.max(minH, Math.round(hRows))
-      } : n
-    )
-  };
-}
-function addEdgeOp(diagram, source, target, label) {
-  const ids = new Set(diagram.nodes.map((n) => n.id));
-  if (!ids.has(source) || !ids.has(target) || source === target) return diagram;
-  const exists = diagram.edges.some(
-    (e2) => e2.source === source && e2.target === target && (e2.label ?? "") === (label ?? "")
-  );
-  if (exists) return diagram;
-  const edge = {
-    source,
-    target,
-    ...label ? { label } : {},
-    directed: true
-  };
-  return { ...diagram, edges: [...diagram.edges, edge] };
-}
-function removeEdgeOp(diagram, source, target, label) {
-  let removed = false;
-  const edges = diagram.edges.filter((e2) => {
-    if (removed) return true;
-    const match = e2.source === source && e2.target === target && (label !== void 0 ? (e2.label ?? "") === label : true);
-    if (match) {
-      removed = true;
-      return false;
-    }
-    return true;
-  });
-  return removed ? { ...diagram, edges } : diagram;
-}
-function renameNodeOp(diagram, nodeId, label) {
-  const node = diagram.nodes.find((n) => n.id === nodeId);
-  if (!node) return diagram;
-  const clean = sanitizeAsciiLabel(label);
-  if (clean.length === 0 || clean === node.label) return diagram;
-  return {
-    ...diagram,
-    nodes: diagram.nodes.map((n) => n.id === nodeId ? { ...n, label: clean } : n)
-  };
-}
-function addNodeOp(diagram, opts) {
-  let label = opts.label;
-  if (!label) {
-    let i = 1;
-    const labels = new Set(diagram.nodes.map((n) => n.label.split("\n")[0]));
-    while (labels.has(`Node ${i}`)) i++;
-    label = `Node ${i}`;
-  }
-  const clean = sanitizeAsciiLabel(label) || "Node";
-  const col = Math.max(0, Math.round(opts.col));
-  const row = Math.max(0, Math.round(opts.row));
-  const wCols = clean.length + 4;
-  const hRows = 3;
-  const centerCol = col + wCols / 2;
-  const centerRow = row + hRows / 2;
-  const containers = diagram.nodes.filter((n) => diagram.nodes.some((m) => m.containerId === n.id)).filter(
-    (n) => centerCol > n.col && centerCol < n.col + n.wCols && centerRow > n.row && centerRow < n.row + n.hRows
-  ).sort((a, b) => a.wCols * a.hRows - b.wCols * b.hRows);
-  const node = {
-    id: `__new-${diagram.nodes.length}`,
-    // provisional; the re-parse derives the real slug id
-    label: clean,
-    col,
-    row,
-    wCols,
-    hRows,
-    ...containers[0] ? { containerId: containers[0].id } : {}
-  };
-  return { diagram: { ...diagram, nodes: [...diagram.nodes, node] }, label: clean };
-}
-function removeNodeOp(diagram, nodeId) {
-  const node = diagram.nodes.find((n) => n.id === nodeId);
-  if (!node) return diagram;
-  const nodes = diagram.nodes.filter((n) => n.id !== nodeId).map((n) => {
-    if (n.containerId !== nodeId) return n;
-    const promoted = { ...n };
-    if (node.containerId) promoted.containerId = node.containerId;
-    else delete promoted.containerId;
-    return promoted;
-  });
-  const edges = diagram.edges.filter((e2) => e2.source !== nodeId && e2.target !== nodeId);
-  return { ...diagram, nodes, edges };
-}
-
 // src/asciiDiagram/asciiDiagramCommands.ts
 function replaceAsciiFenceText(editor, pos, nextText, ensureLanguage) {
   return editor.chain().command(({ tr, state }) => {
@@ -20101,43 +20447,52 @@ function applyRepairCommand(editor, blockId) {
   if (!repaired) return false;
   return replaceAsciiFenceText(editor, pos, repaired.art, "diagram");
 }
-function applyOp(editor, blockId, op) {
+function applyOp(editor, blockId, op, diagramOffset) {
   const pos = findAsciiDiagramBlockPos(editor, blockId);
   if (pos === null) return false;
   const node = editor.state.doc.nodeAt(pos);
   if (!node || node.type.name !== "codeBlock") return false;
-  const diagram = parseAsciiDiagramForNode(node);
-  if (!diagram) return false;
+  const sourceDiagram = parseAsciiDiagramForNode(node);
+  if (!sourceDiagram) return false;
+  const diagram = diagramOffset ? translateDiagramOp(sourceDiagram, diagramOffset.col, diagramOffset.row) : sourceDiagram;
   const next = op(diagram);
-  if (next === diagram) return false;
+  if (next === diagram && diagram === sourceDiagram) return false;
   const rendered = renderAsciiDiagram(next);
   const verification = parseAsciiDiagram(rendered);
   if (verification.nodes.length !== next.nodes.length) return false;
   return replaceAsciiFenceText(editor, pos, rendered, "diagram");
 }
-function applyAsciiDiagramCommand(editor, blockId, cmd) {
+function applyAsciiDiagramCommand(editor, blockId, cmd, options = {}) {
+  const apply = (op) => applyOp(editor, blockId, op, options.diagramOffset);
   switch (cmd.kind) {
     case "moveNode": {
       const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
-      return applyOp(editor, blockId, (d) => moveNodeOp(d, cmd.nodeId, col, row));
+      return apply((d) => moveNodeOp(d, cmd.nodeId, col, row));
     }
     case "resizeNode": {
       const wCols = Math.max(3, Math.round(cmd.width / ASCII_CHAR_W2));
       const hRows = Math.max(3, Math.round(cmd.height / ASCII_CHAR_H2));
-      return applyOp(editor, blockId, (d) => resizeNodeOp(d, cmd.nodeId, wCols, hRows));
+      return apply((d) => {
+        let next = d;
+        if (cmd.x !== void 0 && cmd.y !== void 0) {
+          const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
+          next = moveNodeOp(next, cmd.nodeId, col, row);
+        }
+        return resizeNodeOp(next, cmd.nodeId, wCols, hRows);
+      });
     }
     case "addConnection":
-      return applyOp(editor, blockId, (d) => addEdgeOp(d, cmd.source, cmd.target, cmd.type));
+      return apply((d) => addEdgeOp(d, cmd.source, cmd.target, cmd.type));
     case "removeConnection":
-      return applyOp(editor, blockId, (d) => removeEdgeOp(d, cmd.source, cmd.target, cmd.type));
+      return apply((d) => removeEdgeOp(d, cmd.source, cmd.target, cmd.type));
     case "renameNode":
-      return applyOp(editor, blockId, (d) => renameNodeOp(d, cmd.nodeId, cmd.newLabel));
+      return apply((d) => renameNodeOp(d, cmd.nodeId, cmd.newLabel));
     case "addNode": {
       const { col, row } = canvasToAsciiCell(cmd.x, cmd.y);
-      return applyOp(editor, blockId, (d) => addNodeOp(d, { col, row }).diagram);
+      return apply((d) => addNodeOp(d, { col, row }).diagram);
     }
     case "removeNode":
-      return applyOp(editor, blockId, (d) => removeNodeOp(d, cmd.nodeId));
+      return apply((d) => removeNodeOp(d, cmd.nodeId));
   }
   const _exhaustive = cmd;
   void _exhaustive;
@@ -20158,11 +20513,28 @@ function AsciiDiagramWidget({
   const [maximized, setMaximized] = useState36(false);
   const [height, setHeight] = useState36(null);
   const [dragHeight, setDragHeight] = useState36(null);
+  const canvasOffsetRef = useRef29(null);
+  const [canvasOffsetVersion, setCanvasOffsetVersion] = useState36(0);
   const inlineRef = useRef29(null);
   const effectiveHeight = dragHeight ?? height;
+  if (view && canvasOffsetRef.current === null) {
+    canvasOffsetRef.current = initialAsciiDiagramCanvasOffset(view.diagram);
+  }
+  const canvasView = useMemo26(() => {
+    if (!view) return null;
+    const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
+    return asciiDiagramToCanvas(offsetAsciiDiagram(view.diagram, offset));
+  }, [view, canvasOffsetVersion]);
   const dispatch = useCallback33(
     (cmd) => {
-      applyAsciiDiagramCommand(editor, blockId, cmd);
+      const offset = canvasOffsetRef.current ?? { col: 0, row: 0 };
+      const applied = applyAsciiDiagramCommand(editor, blockId, cmd, {
+        diagramOffset: offset
+      });
+      if (applied && (offset.col !== 0 || offset.row !== 0)) {
+        canvasOffsetRef.current = { col: 0, row: 0 };
+        setCanvasOffsetVersion((version) => version + 1);
+      }
     },
     [editor, blockId]
   );
@@ -20253,8 +20625,8 @@ function AsciiDiagramWidget({
     DiagramCanvas,
     {
       textChannel,
-      nodes: view.nodes,
-      edges: view.edges,
+      nodes: canvasView?.nodes ?? view.nodes,
+      edges: canvasView?.edges ?? view.edges,
       onCommand: dispatch,
       showMaximize: true,
       maximized,
@@ -20530,7 +20902,7 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/treeview/TreeOutlineWidget.tsx
-import { useCallback as useCallback34, useState as useState38 } from "react";
+import { useCallback as useCallback34, useRef as useRef30, useState as useState38 } from "react";
 
 // src/treeview/treeViewData.ts
 import { useEffect as useEffect30, useMemo as useMemo27, useState as useState37 } from "react";
@@ -20584,6 +20956,9 @@ function locate(roots, id, parent = null) {
 function markDir(n) {
   n.isDir = n.label.endsWith("/") || n.children.length > 0;
 }
+function containsNode(node, id) {
+  return node.id === id || node.children.some((child) => containsNode(child, id));
+}
 function renameItemOp(tree, id, label) {
   const clean = sanitizeTreeLabel(label);
   const next = cloneTree(tree);
@@ -20642,6 +21017,34 @@ function outdentItemOp(tree, id) {
   markDir(loc.parent);
   return next;
 }
+function moveItemOp(tree, id, targetId, position) {
+  const currentSource = locate(tree.roots, id);
+  const currentTarget = locate(tree.roots, targetId);
+  if (!currentSource || !currentTarget || id === targetId || containsNode(currentSource.node, targetId)) {
+    return tree;
+  }
+  if (currentSource.siblings === currentTarget.siblings) {
+    if (position === "before" && currentSource.index === currentTarget.index - 1) return tree;
+    if (position === "after" && currentSource.index === currentTarget.index + 1) return tree;
+  }
+  if (position === "child" && currentSource.parent?.id === currentTarget.node.id && currentSource.index === currentSource.siblings.length - 1) {
+    return tree;
+  }
+  const next = cloneTree(tree);
+  const source = locate(next.roots, id);
+  if (!source) return tree;
+  const [moved] = source.siblings.splice(source.index, 1);
+  if (source.parent) markDir(source.parent);
+  const target = locate(next.roots, targetId);
+  if (!target) return tree;
+  if (position === "child") {
+    target.node.children.push(moved);
+    markDir(target.node);
+  } else {
+    target.siblings.splice(target.index + (position === "after" ? 1 : 0), 0, moved);
+  }
+  return next;
+}
 function moveItemUpOp(tree, id) {
   const next = cloneTree(tree);
   const loc = locate(next.roots, id);
@@ -20713,6 +21116,8 @@ function applyTreeCommand(editor, blockId, cmd) {
       return applyOp2(editor, blockId, (t) => indentItemOp(t, cmd.id));
     case "outdentItem":
       return applyOp2(editor, blockId, (t) => outdentItemOp(t, cmd.id));
+    case "moveItem":
+      return applyOp2(editor, blockId, (t) => moveItemOp(t, cmd.id, cmd.targetId, cmd.position));
     case "moveItemUp":
       return applyOp2(editor, blockId, (t) => moveItemUpOp(t, cmd.id));
     case "moveItemDown":
@@ -20729,9 +21134,36 @@ function applyTreeCommand(editor, blockId, cmd) {
 
 // src/treeview/TreeOutlineWidget.tsx
 import { jsx as jsx44, jsxs as jsxs33 } from "react/jsx-runtime";
+var TREE_DRAG_MIME = "application/x-squisq-tree-node";
+function findNode(nodes, id) {
+  for (const node of nodes) {
+    if (node.id === id) return node;
+    const child = findNode(node.children, id);
+    if (child) return child;
+  }
+  return null;
+}
+function nodeContains(node, id) {
+  return node.id === id || node.children.some((child) => nodeContains(child, id));
+}
+function canDropNode(nodes, sourceId, targetId) {
+  const source = findNode(nodes, sourceId);
+  return source != null && !nodeContains(source, targetId);
+}
+function dropPositionForPointer(event) {
+  const rect = event.currentTarget.getBoundingClientRect();
+  if (rect.height <= 0) return "child";
+  const ratio = (event.clientY - rect.top) / rect.height;
+  if (ratio < 0.3) return "before";
+  if (ratio > 0.7) return "after";
+  return "child";
+}
 function TreeOutlineWidget({ editor, blockId }) {
   const view = useTreeViewData(editor, blockId);
   const [collapsed, setCollapsed] = useState38(() => /* @__PURE__ */ new Set());
+  const activeDragRef = useRef30(null);
+  const [draggedId, setDraggedId] = useState38(null);
+  const [dropTarget, setDropTarget] = useState38(null);
   const dispatch = useCallback34(
     (cmd) => applyTreeCommand(editor, blockId, cmd),
     [editor, blockId]
@@ -20744,6 +21176,61 @@ function TreeOutlineWidget({ editor, blockId }) {
       return next;
     });
   }, []);
+  const clearDragState = useCallback34(() => {
+    activeDragRef.current = null;
+    setDraggedId(null);
+    setDropTarget(null);
+  }, []);
+  const handleDragStart = useCallback34((event, id) => {
+    event.stopPropagation();
+    activeDragRef.current = id;
+    setDraggedId(id);
+    setDropTarget(null);
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData(TREE_DRAG_MIME, id);
+    event.dataTransfer.setData("text/plain", id);
+  }, []);
+  const handleDragOver = useCallback34(
+    (event, targetId) => {
+      const sourceId = activeDragRef.current;
+      if (!sourceId) return;
+      event.preventDefault();
+      event.stopPropagation();
+      if (!view || !canDropNode(view.tree.roots, sourceId, targetId)) {
+        event.dataTransfer.dropEffect = "none";
+        setDropTarget(null);
+        return;
+      }
+      const position = dropPositionForPointer(event);
+      event.dataTransfer.dropEffect = "move";
+      setDropTarget(
+        (current) => current?.id === targetId && current.position === position ? current : { id: targetId, position }
+      );
+    },
+    [view]
+  );
+  const handleDrop = useCallback34(
+    (event, targetId) => {
+      const sourceId = activeDragRef.current;
+      if (!sourceId) return;
+      event.preventDefault();
+      event.stopPropagation();
+      const position = dropPositionForPointer(event);
+      const canMove = view && canDropNode(view.tree.roots, sourceId, targetId);
+      clearDragState();
+      if (!canMove) return;
+      const moved = dispatch({ kind: "moveItem", id: sourceId, targetId, position });
+      if (moved && position === "child") {
+        setCollapsed((current) => {
+          if (!current.has(targetId)) return current;
+          const next = new Set(current);
+          next.delete(targetId);
+          return next;
+        });
+      }
+    },
+    [clearDragState, dispatch, view]
+  );
   if (!view) return null;
   const roots = view.tree.roots;
   const firstRootId = roots[0]?.id;
@@ -20789,8 +21276,14 @@ function TreeOutlineWidget({ editor, blockId }) {
         node,
         depth: 0,
         collapsed,
+        draggedId,
+        dropTarget,
         toggleCollapse,
-        dispatch
+        dispatch,
+        onDragStart: handleDragStart,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        onDragEnd: clearDragState
       },
       node.id
     )) }),
@@ -20805,129 +21298,167 @@ function TreeRowView({
   node,
   depth,
   collapsed,
+  draggedId,
+  dropTarget,
   toggleCollapse,
-  dispatch
+  dispatch,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd
 }) {
   const hasChildren = node.children.length > 0;
   const isCollapsed = collapsed.has(node.id);
   const isDir = node.isDir || hasChildren;
   const [draft, setDraft] = useState38(node.label);
+  const dropPosition = dropTarget?.id === node.id ? dropTarget.position : null;
+  const itemClassName = [
+    "squisq-tree-item",
+    draggedId === node.id ? "squisq-tree-item--dragging" : "",
+    dropPosition ? `squisq-tree-item--drop-${dropPosition}` : ""
+  ].filter(Boolean).join(" ");
   const commit = () => {
     if (draft !== node.label && draft.trim().length > 0) {
       dispatch({ kind: "renameItem", id: node.id, label: draft });
     }
   };
-  return /* @__PURE__ */ jsxs33("li", { role: "treeitem", style: { paddingLeft: `${depth * 18}px` }, children: [
-    /* @__PURE__ */ jsxs33("div", { className: "squisq-tree-row", children: [
-      hasChildren ? /* @__PURE__ */ jsx44(
-        "button",
-        {
-          type: "button",
-          className: "squisq-tree-chevron",
-          "aria-label": isCollapsed ? "Expand" : "Collapse",
-          onClick: () => toggleCollapse(node.id),
-          children: /* @__PURE__ */ jsx44(Icon, { icon: `fa-solid ${isCollapsed ? "fa-chevron-right" : "fa-chevron-down"}` })
-        }
-      ) : /* @__PURE__ */ jsx44("span", { className: "squisq-tree-chevron squisq-tree-chevron--empty" }),
-      /* @__PURE__ */ jsx44(
-        "button",
-        {
-          type: "button",
-          className: "squisq-tree-icon",
-          title: isDir ? "Make a file" : "Make a folder",
-          onClick: () => dispatch({ kind: "toggleDir", id: node.id }),
-          children: /* @__PURE__ */ jsx44(Icon, { icon: `fa-solid ${isDir ? "fa-folder" : "fa-file"}` })
-        }
-      ),
-      /* @__PURE__ */ jsx44(
-        "input",
-        {
-          className: "squisq-tree-label",
-          value: draft,
-          onChange: (e2) => setDraft(e2.target.value),
-          onBlur: commit,
-          onKeyDown: (e2) => {
-            if (e2.key === "Enter") {
-              e2.preventDefault();
-              commit();
-              dispatch({ kind: "addItem", targetId: node.id, position: "siblingAfter" });
-            } else if (e2.key === "Backspace" && draft.length === 0) {
-              e2.preventDefault();
-              dispatch({ kind: "removeItem", id: node.id });
-            } else if (e2.key === "Tab") {
-              e2.preventDefault();
-              commit();
-              dispatch({ kind: e2.shiftKey ? "outdentItem" : "indentItem", id: node.id });
+  return /* @__PURE__ */ jsxs33("li", { className: itemClassName, role: "treeitem", style: { paddingLeft: `${depth * 18}px` }, children: [
+    /* @__PURE__ */ jsxs33(
+      "div",
+      {
+        className: "squisq-tree-row",
+        onDragOver: (event) => onDragOver(event, node.id),
+        onDrop: (event) => onDrop(event, node.id),
+        children: [
+          hasChildren ? /* @__PURE__ */ jsx44(
+            "button",
+            {
+              type: "button",
+              className: "squisq-tree-chevron",
+              "aria-label": isCollapsed ? "Expand" : "Collapse",
+              onClick: () => toggleCollapse(node.id),
+              children: /* @__PURE__ */ jsx44(Icon, { icon: `fa-solid ${isCollapsed ? "fa-chevron-right" : "fa-chevron-down"}` })
             }
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs33("span", { className: "squisq-tree-controls", children: [
-        /* @__PURE__ */ jsx44(
-          "button",
-          {
-            type: "button",
-            title: "Add child",
-            onClick: () => dispatch({ kind: "addItem", targetId: node.id, position: "child" }),
-            children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-plus" })
-          }
-        ),
-        /* @__PURE__ */ jsx44(
-          "button",
-          {
-            type: "button",
-            title: "Outdent",
-            onClick: () => dispatch({ kind: "outdentItem", id: node.id }),
-            children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-outdent" })
-          }
-        ),
-        /* @__PURE__ */ jsx44(
-          "button",
-          {
-            type: "button",
-            title: "Indent",
-            onClick: () => dispatch({ kind: "indentItem", id: node.id }),
-            children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-indent" })
-          }
-        ),
-        /* @__PURE__ */ jsx44(
-          "button",
-          {
-            type: "button",
-            title: "Move up",
-            onClick: () => dispatch({ kind: "moveItemUp", id: node.id }),
-            children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-arrow-up" })
-          }
-        ),
-        /* @__PURE__ */ jsx44(
-          "button",
-          {
-            type: "button",
-            title: "Move down",
-            onClick: () => dispatch({ kind: "moveItemDown", id: node.id }),
-            children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-arrow-down" })
-          }
-        ),
-        /* @__PURE__ */ jsx44(
-          "button",
-          {
-            type: "button",
-            title: "Delete",
-            className: "squisq-tree-delete",
-            onClick: () => dispatch({ kind: "removeItem", id: node.id }),
-            children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-trash" })
-          }
-        )
-      ] })
-    ] }),
+          ) : /* @__PURE__ */ jsx44("span", { className: "squisq-tree-chevron squisq-tree-chevron--empty" }),
+          /* @__PURE__ */ jsx44(
+            "button",
+            {
+              type: "button",
+              className: "squisq-tree-icon",
+              title: isDir ? "Make a file" : "Make a folder",
+              onClick: () => dispatch({ kind: "toggleDir", id: node.id }),
+              children: /* @__PURE__ */ jsx44(Icon, { icon: `fa-solid ${isDir ? "fa-folder" : "fa-file"}` })
+            }
+          ),
+          /* @__PURE__ */ jsx44(
+            "input",
+            {
+              className: "squisq-tree-label",
+              value: draft,
+              onChange: (e2) => setDraft(e2.target.value),
+              onBlur: commit,
+              onKeyDown: (e2) => {
+                if (e2.key === "Enter") {
+                  e2.preventDefault();
+                  commit();
+                  dispatch({ kind: "addItem", targetId: node.id, position: "siblingAfter" });
+                } else if (e2.key === "Backspace" && draft.length === 0) {
+                  e2.preventDefault();
+                  dispatch({ kind: "removeItem", id: node.id });
+                } else if (e2.key === "Tab") {
+                  e2.preventDefault();
+                  commit();
+                  dispatch({ kind: e2.shiftKey ? "outdentItem" : "indentItem", id: node.id });
+                }
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs33("span", { className: "squisq-tree-controls", children: [
+            /* @__PURE__ */ jsx44(
+              "span",
+              {
+                className: "squisq-tree-drag-handle",
+                draggable: true,
+                "aria-hidden": "true",
+                title: `Drag ${node.label} to move`,
+                onDragStart: (event) => onDragStart(event, node.id),
+                onDragEnd,
+                children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-grip-vertical" })
+              }
+            ),
+            /* @__PURE__ */ jsx44(
+              "button",
+              {
+                type: "button",
+                title: "Add child",
+                onClick: () => dispatch({ kind: "addItem", targetId: node.id, position: "child" }),
+                children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-plus" })
+              }
+            ),
+            /* @__PURE__ */ jsx44(
+              "button",
+              {
+                type: "button",
+                title: "Outdent",
+                onClick: () => dispatch({ kind: "outdentItem", id: node.id }),
+                children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-outdent" })
+              }
+            ),
+            /* @__PURE__ */ jsx44(
+              "button",
+              {
+                type: "button",
+                title: "Indent",
+                onClick: () => dispatch({ kind: "indentItem", id: node.id }),
+                children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-indent" })
+              }
+            ),
+            /* @__PURE__ */ jsx44(
+              "button",
+              {
+                type: "button",
+                title: "Move up",
+                onClick: () => dispatch({ kind: "moveItemUp", id: node.id }),
+                children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-arrow-up" })
+              }
+            ),
+            /* @__PURE__ */ jsx44(
+              "button",
+              {
+                type: "button",
+                title: "Move down",
+                onClick: () => dispatch({ kind: "moveItemDown", id: node.id }),
+                children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-arrow-down" })
+              }
+            ),
+            /* @__PURE__ */ jsx44(
+              "button",
+              {
+                type: "button",
+                title: "Delete",
+                className: "squisq-tree-delete",
+                onClick: () => dispatch({ kind: "removeItem", id: node.id }),
+                children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-trash" })
+              }
+            )
+          ] })
+        ]
+      }
+    ),
     hasChildren && !isCollapsed ? /* @__PURE__ */ jsx44("ul", { className: "squisq-tree-rows", role: "group", children: node.children.map((child) => /* @__PURE__ */ jsx44(
       TreeRowView,
       {
         node: child,
         depth: depth + 1,
         collapsed,
+        draggedId,
+        dropTarget,
         toggleCollapse,
-        dispatch
+        dispatch,
+        onDragStart,
+        onDragOver,
+        onDrop,
+        onDragEnd
       },
       child.id
     )) }) : null
@@ -21118,16 +21649,16 @@ import {
 } from "@bendyline/squisq/doc";
 
 // src/timeline/TimelineEditorWidget.tsx
-import { useCallback as useCallback35, useEffect as useEffect32, useMemo as useMemo29, useRef as useRef31, useState as useState40 } from "react";
+import { useCallback as useCallback35, useEffect as useEffect32, useMemo as useMemo29, useRef as useRef32, useState as useState40 } from "react";
 import {
   asciiTimelineToTemplateData
 } from "@bendyline/squisq/doc";
 
 // src/timeline/timelineData.ts
-import { useEffect as useEffect31, useMemo as useMemo28, useRef as useRef30, useState as useState39 } from "react";
+import { useEffect as useEffect31, useMemo as useMemo28, useRef as useRef31, useState as useState39 } from "react";
 function useTimelineData(editor, blockId) {
   const [version, setVersion] = useState39(0);
-  const dataCache = useRef30(null);
+  const dataCache = useRef31(null);
   useEffect31(() => {
     const onEditorChange = () => setVersion((value) => value + 1);
     editor.on("transaction", onEditorChange);
@@ -21176,12 +21707,79 @@ function sanitizeTimelineText(value) {
 }
 function nextTimelineEventId(timeline, base = "event") {
   const used = new Set(timeline.tracks.flatMap((track) => track.events.map((event) => event.id)));
-  const safeBase = safeId(base) || "event";
+  const safeBase = safeId(base, "event");
+  if (!used.has(safeBase)) return safeBase;
+  let suffix = 2;
+  while (used.has(`${safeBase}-${suffix}`)) suffix++;
+  return `${safeBase}-${suffix}`;
+}
+function nextTimelineTrackId(timeline, base = "track") {
+  const used = new Set(timeline.tracks.map((track) => track.id));
+  const safeBase = safeId(base, "track");
   if (!used.has(safeBase)) return safeBase;
   let suffix = 2;
   while (used.has(`${safeBase}-${suffix}`)) suffix++;
   return `${safeBase}-${suffix}`;
 }
+function addTimelineTrackOp(timeline, options = {}) {
+  const label = sanitizeTimelineText(options.label ?? "") || "New line";
+  const eventLabel = sanitizeTimelineText(options.eventLabel ?? "") || "New event";
+  const trackId = nextTimelineTrackId(timeline, options.id ?? label);
+  const eventId = nextTimelineEventId(timeline, options.eventId ?? eventLabel);
+  const { start, span } = globalBounds(timeline);
+  const column = Math.round((start + span / 2) * COORDINATE_PRECISION) / COORDINATE_PRECISION;
+  const row = timeline.tracks.reduce((maximum, track2) => Math.max(maximum, track2.row), -1) + 1;
+  const track = {
+    id: trackId,
+    label,
+    row,
+    startColumn: start,
+    endColumn: start + span,
+    events: [
+      {
+        id: eventId,
+        label: eventLabel,
+        column,
+        side: "above",
+        marker: "filled"
+      }
+    ]
+  };
+  return {
+    timeline: {
+      ...timeline,
+      tracks: [...timeline.tracks, track],
+      width: Math.max(timeline.width, Math.ceil(track.endColumn) + 1),
+      height: Math.max(timeline.height, row + 1)
+    },
+    trackId,
+    eventId
+  };
+}
+function updateTimelineTrackOp(timeline, trackId, label) {
+  const track = timeline.tracks.find((candidate) => candidate.id === trackId);
+  const nextLabel = sanitizeTimelineText(label);
+  if (!track || !nextLabel || track.label === nextLabel) return timeline;
+  return {
+    ...timeline,
+    tracks: timeline.tracks.map(
+      (candidate) => candidate.id === trackId ? { ...candidate, label: nextLabel } : candidate
+    )
+  };
+}
+function removeTimelineTrackOp(timeline, trackId) {
+  if (timeline.tracks.length <= 1) return timeline;
+  const track = timeline.tracks.find((candidate) => candidate.id === trackId);
+  if (!track) return timeline;
+  const removedEventIds = new Set(track.events.map((event) => event.id));
+  return {
+    ...timeline,
+    tracks: timeline.tracks.filter((candidate) => candidate.id !== trackId),
+    links: timeline.links.filter(
+      (link) => !removedEventIds.has(link.source) && !removedEventIds.has(link.target)
+    )
+  };
+}
 function addTimelineEventOp(timeline, trackId, position, options = {}) {
   if (!Number.isFinite(position)) return null;
   const track = timeline.tracks.find((candidate) => candidate.id === trackId);
@@ -21284,8 +21882,8 @@ function columnAtPosition(timeline, position) {
   const clamped = Math.max(0, Math.min(1, position));
   return Math.round((start + clamped * span) * COORDINATE_PRECISION) / COORDINATE_PRECISION;
 }
-function safeId(value) {
-  return sanitizeTimelineText(value).toLowerCase().replace(/[^a-z0-9_.~-]+/g, "-").replace(/^-+|-+$/g, "") || "event";
+function safeId(value, fallback) {
+  return sanitizeTimelineText(value).toLowerCase().replace(/[^a-z0-9_.~-]+/g, "-").replace(/^-+|-+$/g, "") || fallback;
 }
 function findEvent(timeline, eventId) {
   for (const track of timeline.tracks) {
@@ -21308,6 +21906,9 @@ function countEvents(timeline) {
 function hasEvent(timeline, eventId) {
   return timeline.tracks.some((track) => track.events.some((event) => event.id === eventId));
 }
+function hasTrack(timeline, trackId) {
+  return timeline.tracks.some((track) => track.id === trackId);
+}
 function semanticSignature(timeline) {
   return JSON.stringify({
     style: timeline.style,
@@ -21460,6 +22061,8 @@ function verifyRenderedTimeline(next, rendered) {
   const ids = new Set(
     verification.tracks.flatMap((track) => track.events.map((event) => event.id))
   );
+  const trackIds = new Set(verification.tracks.map((track) => track.id));
+  if (trackIds.size !== verification.tracks.length) return null;
   if (ids.size !== countEvents(verification)) return null;
   if (verification.links.some((link) => !ids.has(link.source) || !ids.has(link.target))) {
     return null;
@@ -21478,18 +22081,50 @@ function applyOp3(editor, blockId, op, verifyResult) {
   if (!result || result.timeline === timeline) return NOT_APPLIED;
   const rendered = renderAsciiTimeline(result.timeline);
   const verification = verifyRenderedTimeline(result.timeline, rendered);
-  if (!verification || result.eventId && !hasEvent(verification, result.eventId) || verifyResult && !verifyResult(verification)) {
+  if (!verification || result.eventId && !hasEvent(verification, result.eventId) || result.trackId && !hasTrack(verification, result.trackId) || verifyResult && !verifyResult(verification)) {
     return NOT_APPLIED;
   }
   if (!replaceAsciiFenceText(editor, pos, rendered, "timeline")) return NOT_APPLIED;
   return {
     applied: true,
-    ...result.eventId ? { eventId: result.eventId } : {}
+    ...result.eventId ? { eventId: result.eventId } : {},
+    ...result.trackId ? { trackId: result.trackId } : {}
   };
 }
 function applyTimelineCommand(editor, blockId, command2) {
   if (!editor.isEditable) return READ_ONLY;
   switch (command2.kind) {
+    case "addTrack":
+      return applyOp3(
+        editor,
+        blockId,
+        (timeline) => addTimelineTrackOp(timeline, {
+          id: command2.id,
+          label: command2.label,
+          eventId: command2.eventId,
+          eventLabel: command2.eventLabel
+        })
+      );
+    case "updateTrack": {
+      const expectedLabel = sanitizeTimelineText(command2.label);
+      return applyOp3(
+        editor,
+        blockId,
+        (timeline) => ({
+          timeline: updateTimelineTrackOp(timeline, command2.trackId, command2.label)
+        }),
+        (timeline) => timeline.tracks.some(
+          (track) => track.id === command2.trackId && track.label === expectedLabel
+        )
+      );
+    }
+    case "removeTrack":
+      return applyOp3(
+        editor,
+        blockId,
+        (timeline) => ({ timeline: removeTimelineTrackOp(timeline, command2.trackId) }),
+        (timeline) => !hasTrack(timeline, command2.trackId)
+      );
     case "addEvent":
       return applyOp3(editor, blockId, (timeline) => {
         const result = addTimelineEventOp(timeline, command2.trackId, command2.position, {
@@ -21526,14 +22161,16 @@ function applyTimelineCommand(editor, blockId, command2) {
 }
 
 // src/timeline/TimelineEditorWidget.tsx
-import { jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx45, jsxs as jsxs34 } from "react/jsx-runtime";
 var clamp01 = (value) => Math.max(0, Math.min(1, value));
 function TimelineEditorWidget({ editor, blockId }) {
   const view = useTimelineData(editor, blockId);
   const [selectedEventId, setSelectedEventId] = useState40(null);
+  const [addingTrackId, setAddingTrackId] = useState40(null);
+  const [editingTrackId, setEditingTrackId] = useState40(null);
   const [hover, setHover] = useState40(null);
   const [dragged, setDragged] = useState40(null);
-  const suppressClickEventId = useRef31(null);
+  const suppressClickEventId = useRef32(null);
   const [announcement, setAnnouncement] = useState40("");
   const dispatch = useCallback35(
     (command2) => {
@@ -21556,6 +22193,8 @@ function TimelineEditorWidget({ editor, blockId }) {
     // editor's cursor/selection hot path.
     [sourceText, sourceTimeline]
   );
+  const editorEditable = editor.isEditable;
+  const editable = editorEditable && sourceSafe;
   const positioned = useMemo29(() => {
     if (!view) return [];
     const normalized = asciiTimelineToTemplateData(view.timeline).tracks;
@@ -21603,22 +22242,58 @@ function TimelineEditorWidget({ editor, blockId }) {
     if (selectedEventId && ids.has(selectedEventId)) return;
     setSelectedEventId(view.timeline.tracks[0]?.events[0]?.id ?? null);
   }, [selectedEventId, view]);
+  useEffect32(() => {
+    if (editable) return;
+    setAddingTrackId(null);
+    setEditingTrackId(null);
+    setHover(null);
+  }, [editable]);
+  useEffect32(() => {
+    if (!editingTrackId || view?.timeline.tracks.some((track) => track.id === editingTrackId)) {
+      return;
+    }
+    setEditingTrackId(null);
+  }, [editingTrackId, view]);
   if (!view) return null;
-  const editorEditable = editor.isEditable;
-  const editable = editorEditable && sourceSafe;
   const totalEvents = positioned.length;
+  const addTrack = () => {
+    if (!editable) return;
+    const result = dispatch({ kind: "addTrack" });
+    if (result.applied && result.eventId && result.trackId) {
+      setAddingTrackId(null);
+      setEditingTrackId(result.trackId);
+      setHover(null);
+      setSelectedEventId(result.eventId);
+      setAnnouncement("New timeline line added. Edit its name on the line.");
+    }
+  };
   const addEvent = (trackId, position) => {
     if (!editable) return;
     const result = dispatch({ kind: "addEvent", trackId, position: clamp01(position) });
     if (result.applied && result.eventId) {
+      setAddingTrackId(null);
+      setEditingTrackId(null);
+      setHover(null);
       setSelectedEventId(result.eventId);
       setAnnouncement("New timeline point added. Edit its text below.");
     }
   };
   const selectEvent = (event, trackLabel) => {
+    setAddingTrackId(null);
+    setHover(null);
     setSelectedEventId(event.id);
     setAnnouncement(`${event.label || "Timeline point"} selected on ${trackLabel}.`);
   };
+  const deleteTrack = (trackId, trackLabel) => {
+    const remaining = positioned.filter((point) => point.trackId !== trackId);
+    const result = dispatch({ kind: "removeTrack", trackId });
+    if (!result.applied) return;
+    setAddingTrackId(null);
+    setEditingTrackId((current) => current === trackId ? null : current);
+    setHover(null);
+    if (selected?.trackId === trackId) setSelectedEventId(remaining[0]?.event.id ?? null);
+    setAnnouncement(`${trackLabel} line deleted.`);
+  };
   const dragPosition = (event) => {
     const rail = event.currentTarget.closest(".squisq-ascii-timeline-rail");
     if (!rail) return null;
@@ -21626,291 +22301,408 @@ function TimelineEditorWidget({ editor, blockId }) {
     if (rect.width <= 0 || !Number.isFinite(event.clientX)) return null;
     return clamp01((event.clientX - rect.left) / rect.width);
   };
-  return /* @__PURE__ */ jsxs34("section", { className: "squisq-ascii-timeline-editor", "aria-label": "Timeline editor", children: [
-    /* @__PURE__ */ jsxs34("header", { className: "squisq-ascii-timeline-header", children: [
-      /* @__PURE__ */ jsxs34("span", { children: [
-        /* @__PURE__ */ jsx45(Icon, { icon: "fa-solid fa-timeline" }),
-        " Timeline"
-      ] }),
-      editable ? /* @__PURE__ */ jsx45("small", { children: "Click the line to add a point \xB7 Drag dots to move" }) : editorEditable ? /* @__PURE__ */ jsx45("small", { children: "Source repair needed" }) : /* @__PURE__ */ jsx45("small", { children: "Read only" })
-    ] }),
-    /* @__PURE__ */ jsxs34(
-      "div",
-      {
-        className: "squisq-ascii-timeline-canvas",
-        style: { "--squisq-ascii-timeline-track-count": view.timeline.tracks.length },
-        children: [
-          view.timeline.links.length > 0 ? /* @__PURE__ */ jsx45(
-            "svg",
-            {
-              className: "squisq-ascii-timeline-branches",
-              viewBox: `0 0 100 ${Math.max(1, view.timeline.tracks.length) * 96}`,
-              preserveAspectRatio: "none",
-              "aria-hidden": "true",
-              children: view.timeline.links.map((link, index) => {
-                const source = displayedPositioned.find((point) => point.event.id === link.source);
-                const target = displayedPositioned.find((point) => point.event.id === link.target);
-                if (!source || !target) return null;
-                const sx = source.position * 100;
-                const tx = target.position * 100;
-                const sy = source.trackIndex * 96 + 48;
-                const ty = target.trackIndex * 96 + 48;
-                const sameTrack = source.trackIndex === target.trackIndex;
-                const controlY = sameTrack ? sy + (source.event.side === "below" ? -30 : 30) : (sy + ty) / 2;
-                return /* @__PURE__ */ jsx45(
-                  "path",
-                  {
-                    d: `M ${sx} ${sy} C ${sx} ${controlY}, ${tx} ${controlY}, ${tx} ${ty}`,
-                    vectorEffect: "non-scaling-stroke"
-                  },
-                  `${link.source}-${link.target}-${index}`
-                );
-              })
-            }
-          ) : null,
-          view.timeline.tracks.map((track, trackIndex) => {
-            const trackLabel = track.label || `Track ${trackIndex + 1}`;
-            const events = track.events.map((event) => ({ event, position: positionById.get(event.id) ?? 0 })).sort((a, b) => a.position - b.position);
-            const eventPositions = events.map((entry) => entry.position);
-            const gaps = insertionGaps(eventPositions);
-            return /* @__PURE__ */ jsxs34("div", { className: "squisq-ascii-timeline-track", children: [
-              /* @__PURE__ */ jsxs34("div", { className: "squisq-ascii-timeline-track-label", title: trackLabel, children: [
-                /* @__PURE__ */ jsx45("span", { children: trackLabel }),
-                editable ? /* @__PURE__ */ jsx45(
-                  "button",
-                  {
-                    type: "button",
-                    className: "squisq-ascii-timeline-track-add",
-                    "aria-label": `Add point to ${trackLabel} timeline`,
-                    title: "Add point in the largest available gap",
-                    onClick: () => addEvent(track.id, largestGap(eventPositions)),
-                    children: "+"
-                  }
-                ) : null
-              ] }),
-              /* @__PURE__ */ jsxs34(
-                "div",
+  return /* @__PURE__ */ jsxs34(
+    "section",
+    {
+      className: "squisq-ascii-timeline-editor",
+      "aria-label": "Timeline editor",
+      onKeyDown: (event) => {
+        if (event.key !== "Escape" || !addingTrackId) return;
+        setAddingTrackId(null);
+        setHover(null);
+        setAnnouncement("Add point cancelled.");
+      },
+      children: [
+        /* @__PURE__ */ jsxs34("header", { className: "squisq-ascii-timeline-header", children: [
+          /* @__PURE__ */ jsxs34("span", { children: [
+            /* @__PURE__ */ jsx45(Icon, { icon: "fa-solid fa-timeline" }),
+            " Timeline"
+          ] }),
+          /* @__PURE__ */ jsxs34("div", { className: "squisq-ascii-timeline-header-actions", children: [
+            editable && addingTrackId ? /* @__PURE__ */ jsx45("small", { children: "Click the line to add a point \xB7 Esc to cancel" }) : editable ? /* @__PURE__ */ jsx45("small", { children: "Use + to add a point \xB7 Drag dots to move" }) : editorEditable ? /* @__PURE__ */ jsx45("small", { children: "Source repair needed" }) : /* @__PURE__ */ jsx45("small", { children: "Read only" }),
+            editable ? /* @__PURE__ */ jsxs34("button", { type: "button", onClick: addTrack, children: [
+              /* @__PURE__ */ jsx45(Icon, { icon: "fa-solid fa-plus" }),
+              " Add line"
+            ] }) : null
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs34(
+          "div",
+          {
+            className: "squisq-ascii-timeline-canvas",
+            style: { "--squisq-ascii-timeline-track-count": view.timeline.tracks.length },
+            children: [
+              view.timeline.links.length > 0 ? /* @__PURE__ */ jsx45(
+                "svg",
                 {
-                  className: `squisq-ascii-timeline-rail${editable ? "" : " squisq-ascii-timeline-rail--readonly"}`,
-                  role: "group",
-                  "aria-label": `${trackLabel} timeline rail`,
-                  title: editable ? "Click anywhere on the line to add a point" : void 0,
-                  onPointerMove: (event) => {
-                    if (!editable || dragged) return;
-                    const rect = event.currentTarget.getBoundingClientRect();
-                    if (rect.width <= 0) return;
-                    setHover({
-                      trackId: track.id,
-                      position: clamp01((event.clientX - rect.left) / rect.width)
-                    });
-                  },
-                  onPointerLeave: () => setHover((current) => current?.trackId === track.id ? null : current),
-                  onClick: (event) => {
-                    if (!editable || event.target !== event.currentTarget) return;
-                    const rect = event.currentTarget.getBoundingClientRect();
-                    if (rect.width <= 0) return;
-                    addEvent(track.id, (event.clientX - rect.left) / rect.width);
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx45("span", { className: "squisq-ascii-timeline-rail-line", "aria-hidden": "true" }),
-                    hover?.trackId === track.id && !dragged ? /* @__PURE__ */ jsx45(
-                      "span",
+                  className: "squisq-ascii-timeline-branches",
+                  viewBox: `0 0 100 ${Math.max(1, view.timeline.tracks.length) * 96}`,
+                  preserveAspectRatio: "none",
+                  "aria-hidden": "true",
+                  children: view.timeline.links.map((link, index) => {
+                    const source = displayedPositioned.find((point) => point.event.id === link.source);
+                    const target = displayedPositioned.find((point) => point.event.id === link.target);
+                    if (!source || !target) return null;
+                    const sx = source.position * 100;
+                    const tx = target.position * 100;
+                    const sy = source.trackIndex * 96 + 48;
+                    const ty = target.trackIndex * 96 + 48;
+                    const sameTrack = source.trackIndex === target.trackIndex;
+                    const controlY = sameTrack ? sy + (source.event.side === "below" ? -30 : 30) : (sy + ty) / 2;
+                    return /* @__PURE__ */ jsx45(
+                      "path",
                       {
-                        className: "squisq-ascii-timeline-add-ghost",
-                        style: { left: `${hover.position * 100}%` },
-                        "aria-hidden": "true",
-                        children: "+"
-                      }
-                    ) : null,
-                    editable && !dragged ? gaps.map((position) => /* @__PURE__ */ jsx45(
-                      "button",
+                        d: `M ${sx} ${sy} C ${sx} ${controlY}, ${tx} ${controlY}, ${tx} ${ty}`,
+                        vectorEffect: "non-scaling-stroke"
+                      },
+                      `${link.source}-${link.target}-${index}`
+                    );
+                  })
+                }
+              ) : null,
+              view.timeline.tracks.map((track, trackIndex) => {
+                const trackLabel = track.label || `Track ${trackIndex + 1}`;
+                const events = track.events.map((event) => ({ event, position: positionById.get(event.id) ?? 0 })).sort((a, b) => a.position - b.position);
+                const eventPositions = events.map((entry) => entry.position);
+                const gaps = insertionGaps(eventPositions);
+                const addingPoint = editable && addingTrackId === track.id;
+                return /* @__PURE__ */ jsxs34("div", { className: "squisq-ascii-timeline-track", children: [
+                  /* @__PURE__ */ jsxs34("div", { className: "squisq-ascii-timeline-track-label", children: [
+                    /* @__PURE__ */ jsx45(
+                      InlineTrackLabel,
                       {
-                        type: "button",
-                        className: "squisq-ascii-timeline-gap-add",
-                        style: { left: `${position * 100}%` },
-                        "aria-label": `Add point to ${trackLabel} at ${Math.round(position * 100)} percent`,
-                        title: "Add point",
-                        onClick: (event) => {
-                          event.stopPropagation();
-                          addEvent(track.id, position);
+                        trackId: track.id,
+                        label: trackLabel,
+                        editing: editable && editingTrackId === track.id,
+                        editable,
+                        dispatch,
+                        onStart: () => {
+                          setAddingTrackId(null);
+                          setHover(null);
+                          setEditingTrackId(track.id);
                         },
-                        children: "+"
-                      },
-                      position
-                    )) : null,
-                    events.map(({ event, position }, eventIndex) => {
-                      const selectedPoint = selectedEventId === event.id;
-                      const draggedPoint = dragged?.eventId === event.id;
-                      const side = event.side ?? (eventIndex % 2 === 0 ? "above" : "below");
-                      const descriptionSide = event.descriptionSide ?? side;
-                      return /* @__PURE__ */ jsxs34(
-                        "span",
+                        onFinish: () => setEditingTrackId(null)
+                      }
+                    ),
+                    editable ? /* @__PURE__ */ jsxs34(Fragment15, { children: [
+                      /* @__PURE__ */ jsx45(
+                        "button",
                         {
-                          className: `squisq-ascii-timeline-point squisq-ascii-timeline-point--${side}${draggedPoint ? " squisq-ascii-timeline-point--dragging" : ""}`,
-                          style: { left: `${position * 100}%` },
-                          children: [
-                            event.callout !== false ? /* @__PURE__ */ jsx45(
-                              "span",
-                              {
-                                className: `squisq-ascii-timeline-callout squisq-ascii-timeline-callout--${side}`,
-                                children: event.label
-                              }
-                            ) : null,
-                            event.callout !== false && event.description ? /* @__PURE__ */ jsx45(
-                              "span",
-                              {
-                                className: `squisq-ascii-timeline-description squisq-ascii-timeline-description--${descriptionSide}`,
-                                children: event.description
-                              }
-                            ) : null,
-                            /* @__PURE__ */ jsx45(
-                              "button",
-                              {
-                                type: "button",
-                                className: `squisq-ascii-timeline-marker squisq-ascii-timeline-marker--${event.marker ?? "filled"}${selectedPoint ? " squisq-ascii-timeline-marker--selected" : ""}`,
-                                "aria-label": `Edit ${event.label || "timeline point"}, ${trackLabel}, ${Math.round(position * 100)} percent`,
-                                "aria-pressed": selectedPoint,
-                                "aria-roledescription": editable ? "draggable timeline point" : void 0,
-                                title: editable ? `${event.description || event.label || "Timeline point"} \xB7 Drag to move` : event.description || event.label,
-                                draggable: false,
-                                onPointerDown: (pointerEvent) => {
-                                  if (!editable || pointerEvent.button !== void 0 && pointerEvent.button !== 0) {
-                                    return;
-                                  }
-                                  const point = dragPosition(pointerEvent);
-                                  if (point === null) return;
-                                  pointerEvent.stopPropagation();
-                                  setHover(null);
-                                  setSelectedEventId(event.id);
-                                  suppressClickEventId.current = null;
-                                  setDragged({
-                                    eventId: event.id,
-                                    pointerId: pointerEvent.pointerId,
-                                    startClientX: pointerEvent.clientX,
-                                    startPosition: position,
-                                    position,
-                                    moved: false
-                                  });
-                                  pointerEvent.currentTarget.setPointerCapture?.(pointerEvent.pointerId);
-                                },
-                                onPointerMove: (pointerEvent) => {
-                                  if (!editable || !draggedPoint || dragged.pointerId !== pointerEvent.pointerId) {
-                                    return;
-                                  }
-                                  const point = dragPosition(pointerEvent);
-                                  if (point === null) return;
-                                  pointerEvent.preventDefault();
-                                  pointerEvent.stopPropagation();
-                                  setDragged(
-                                    (current) => current?.eventId === event.id && current.pointerId === pointerEvent.pointerId ? {
-                                      ...current,
-                                      position: point,
-                                      moved: current.moved || Math.abs(pointerEvent.clientX - current.startClientX) >= 3
-                                    } : current
-                                  );
-                                },
-                                onPointerUp: (pointerEvent) => {
-                                  if (!draggedPoint || dragged.pointerId !== pointerEvent.pointerId) {
-                                    return;
-                                  }
-                                  const point = dragPosition(pointerEvent);
-                                  const finalPosition = point ?? dragged.position;
-                                  const moved = dragged.moved || Math.abs(pointerEvent.clientX - dragged.startClientX) >= 3;
-                                  pointerEvent.preventDefault();
-                                  pointerEvent.stopPropagation();
-                                  if (pointerEvent.currentTarget.hasPointerCapture?.(pointerEvent.pointerId)) {
-                                    pointerEvent.currentTarget.releasePointerCapture(
-                                      pointerEvent.pointerId
-                                    );
-                                  }
-                                  setDragged(null);
-                                  if (!moved) {
-                                    selectEvent(event, trackLabel);
-                                    return;
-                                  }
-                                  suppressClickEventId.current = event.id;
-                                  const result = dispatch({
-                                    kind: "updateEvent",
-                                    eventId: event.id,
-                                    patch: { position: finalPosition }
-                                  });
-                                  if (result.applied) {
-                                    setAnnouncement(
-                                      `${event.label || "Timeline point"} moved to ${Math.round(finalPosition * 100)} percent.`
-                                    );
-                                  } else if (!result.reason && Math.abs(finalPosition - dragged.startPosition) > 1e-3) {
-                                    setAnnouncement(
-                                      "Timeline points cannot overlap. Move the point elsewhere."
-                                    );
-                                  }
-                                },
-                                onPointerCancel: (pointerEvent) => {
-                                  if (!draggedPoint || dragged.pointerId !== pointerEvent.pointerId) {
-                                    return;
+                          type: "button",
+                          className: "squisq-ascii-timeline-track-delete",
+                          "aria-label": `Delete line: ${trackLabel}`,
+                          disabled: view.timeline.tracks.length <= 1,
+                          title: view.timeline.tracks.length > 1 ? `Delete ${trackLabel} line and all of its points` : "A timeline needs one line",
+                          onClick: () => deleteTrack(track.id, trackLabel),
+                          children: /* @__PURE__ */ jsx45(Icon, { icon: "fa-solid fa-trash" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx45(
+                        "button",
+                        {
+                          type: "button",
+                          className: "squisq-ascii-timeline-track-add",
+                          "aria-label": `Add point to ${trackLabel} timeline`,
+                          "aria-pressed": addingPoint,
+                          title: addingPoint ? "Cancel adding a point" : "Choose where to add a point",
+                          onClick: () => {
+                            setEditingTrackId(null);
+                            setAddingTrackId((current) => current === track.id ? null : track.id);
+                            setHover(null);
+                            setAnnouncement(
+                              addingPoint ? "Add point cancelled." : `Choose where to add a point on ${trackLabel}.`
+                            );
+                          },
+                          children: "+"
+                        }
+                      )
+                    ] }) : null
+                  ] }),
+                  /* @__PURE__ */ jsxs34(
+                    "div",
+                    {
+                      className: `squisq-ascii-timeline-rail${addingPoint ? " squisq-ascii-timeline-rail--adding" : ""}${editable ? "" : " squisq-ascii-timeline-rail--readonly"}`,
+                      role: "group",
+                      "aria-label": `${trackLabel} timeline rail`,
+                      title: addingPoint ? "Click anywhere on the line to add a point" : void 0,
+                      onPointerMove: (event) => {
+                        if (!addingPoint || dragged) return;
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        if (rect.width <= 0) return;
+                        setHover({
+                          trackId: track.id,
+                          position: clamp01((event.clientX - rect.left) / rect.width)
+                        });
+                      },
+                      onPointerLeave: () => setHover((current) => current?.trackId === track.id ? null : current),
+                      onClick: (event) => {
+                        if (!addingPoint || event.target !== event.currentTarget) return;
+                        const rect = event.currentTarget.getBoundingClientRect();
+                        if (rect.width <= 0) return;
+                        addEvent(track.id, (event.clientX - rect.left) / rect.width);
+                      },
+                      children: [
+                        /* @__PURE__ */ jsx45("span", { className: "squisq-ascii-timeline-rail-line", "aria-hidden": "true" }),
+                        addingPoint && hover?.trackId === track.id && !dragged ? /* @__PURE__ */ jsx45(
+                          "span",
+                          {
+                            className: "squisq-ascii-timeline-add-ghost",
+                            style: { left: `${hover.position * 100}%` },
+                            "aria-hidden": "true",
+                            children: "+"
+                          }
+                        ) : null,
+                        addingPoint && !dragged ? gaps.map((position) => /* @__PURE__ */ jsx45(
+                          "button",
+                          {
+                            type: "button",
+                            className: "squisq-ascii-timeline-gap-add",
+                            style: { left: `${position * 100}%` },
+                            "aria-label": `Add point to ${trackLabel} at ${Math.round(position * 100)} percent`,
+                            title: "Add point",
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              addEvent(track.id, position);
+                            },
+                            children: "+"
+                          },
+                          position
+                        )) : null,
+                        events.map(({ event, position }, eventIndex) => {
+                          const selectedPoint = selectedEventId === event.id;
+                          const draggedPoint = dragged?.eventId === event.id;
+                          const side = event.side ?? (eventIndex % 2 === 0 ? "above" : "below");
+                          const descriptionSide = event.descriptionSide ?? side;
+                          return /* @__PURE__ */ jsxs34(
+                            "span",
+                            {
+                              className: `squisq-ascii-timeline-point squisq-ascii-timeline-point--${side}${draggedPoint ? " squisq-ascii-timeline-point--dragging" : ""}`,
+                              style: { left: `${position * 100}%` },
+                              children: [
+                                event.callout !== false ? /* @__PURE__ */ jsx45(
+                                  "span",
+                                  {
+                                    className: `squisq-ascii-timeline-callout squisq-ascii-timeline-callout--${side}`,
+                                    children: event.label
                                   }
-                                  if (pointerEvent.currentTarget.hasPointerCapture?.(pointerEvent.pointerId)) {
-                                    pointerEvent.currentTarget.releasePointerCapture(
-                                      pointerEvent.pointerId
-                                    );
+                                ) : null,
+                                event.callout !== false && event.description ? /* @__PURE__ */ jsx45(
+                                  "span",
+                                  {
+                                    className: `squisq-ascii-timeline-description squisq-ascii-timeline-description--${descriptionSide}`,
+                                    children: event.description
                                   }
-                                  setDragged(null);
-                                  setAnnouncement("Timeline point move cancelled.");
-                                },
-                                onClick: (clickEvent) => {
-                                  clickEvent.stopPropagation();
-                                  if (suppressClickEventId.current === event.id) {
-                                    suppressClickEventId.current = null;
-                                    return;
+                                ) : null,
+                                /* @__PURE__ */ jsx45(
+                                  "button",
+                                  {
+                                    type: "button",
+                                    className: `squisq-ascii-timeline-marker squisq-ascii-timeline-marker--${event.marker ?? "filled"}${selectedPoint ? " squisq-ascii-timeline-marker--selected" : ""}`,
+                                    "aria-label": `Edit ${event.label || "timeline point"}, ${trackLabel}, ${Math.round(position * 100)} percent`,
+                                    "aria-pressed": selectedPoint,
+                                    "aria-roledescription": editable ? "draggable timeline point" : void 0,
+                                    title: editable ? `${event.description || event.label || "Timeline point"} \xB7 Drag to move` : event.description || event.label,
+                                    draggable: false,
+                                    onPointerDown: (pointerEvent) => {
+                                      if (!editable || pointerEvent.button !== void 0 && pointerEvent.button !== 0) {
+                                        return;
+                                      }
+                                      const point = dragPosition(pointerEvent);
+                                      if (point === null) return;
+                                      pointerEvent.stopPropagation();
+                                      setAddingTrackId(null);
+                                      setHover(null);
+                                      setSelectedEventId(event.id);
+                                      suppressClickEventId.current = null;
+                                      setDragged({
+                                        eventId: event.id,
+                                        pointerId: pointerEvent.pointerId,
+                                        startClientX: pointerEvent.clientX,
+                                        startPosition: position,
+                                        position,
+                                        moved: false
+                                      });
+                                      pointerEvent.currentTarget.setPointerCapture?.(pointerEvent.pointerId);
+                                    },
+                                    onPointerMove: (pointerEvent) => {
+                                      if (!editable || !draggedPoint || dragged.pointerId !== pointerEvent.pointerId) {
+                                        return;
+                                      }
+                                      const point = dragPosition(pointerEvent);
+                                      if (point === null) return;
+                                      pointerEvent.preventDefault();
+                                      pointerEvent.stopPropagation();
+                                      setDragged(
+                                        (current) => current?.eventId === event.id && current.pointerId === pointerEvent.pointerId ? {
+                                          ...current,
+                                          position: point,
+                                          moved: current.moved || Math.abs(pointerEvent.clientX - current.startClientX) >= 3
+                                        } : current
+                                      );
+                                    },
+                                    onPointerUp: (pointerEvent) => {
+                                      if (!draggedPoint || dragged.pointerId !== pointerEvent.pointerId) {
+                                        return;
+                                      }
+                                      const point = dragPosition(pointerEvent);
+                                      const finalPosition = point ?? dragged.position;
+                                      const moved = dragged.moved || Math.abs(pointerEvent.clientX - dragged.startClientX) >= 3;
+                                      pointerEvent.preventDefault();
+                                      pointerEvent.stopPropagation();
+                                      if (pointerEvent.currentTarget.hasPointerCapture?.(pointerEvent.pointerId)) {
+                                        pointerEvent.currentTarget.releasePointerCapture(
+                                          pointerEvent.pointerId
+                                        );
+                                      }
+                                      setDragged(null);
+                                      if (!moved) {
+                                        selectEvent(event, trackLabel);
+                                        return;
+                                      }
+                                      suppressClickEventId.current = event.id;
+                                      const result = dispatch({
+                                        kind: "updateEvent",
+                                        eventId: event.id,
+                                        patch: { position: finalPosition }
+                                      });
+                                      if (result.applied) {
+                                        setAnnouncement(
+                                          `${event.label || "Timeline point"} moved to ${Math.round(finalPosition * 100)} percent.`
+                                        );
+                                      } else if (!result.reason && Math.abs(finalPosition - dragged.startPosition) > 1e-3) {
+                                        setAnnouncement(
+                                          "Timeline points cannot overlap. Move the point elsewhere."
+                                        );
+                                      }
+                                    },
+                                    onPointerCancel: (pointerEvent) => {
+                                      if (!draggedPoint || dragged.pointerId !== pointerEvent.pointerId) {
+                                        return;
+                                      }
+                                      if (pointerEvent.currentTarget.hasPointerCapture?.(pointerEvent.pointerId)) {
+                                        pointerEvent.currentTarget.releasePointerCapture(
+                                          pointerEvent.pointerId
+                                        );
+                                      }
+                                      setDragged(null);
+                                      setAnnouncement("Timeline point move cancelled.");
+                                    },
+                                    onClick: (clickEvent) => {
+                                      clickEvent.stopPropagation();
+                                      if (suppressClickEventId.current === event.id) {
+                                        suppressClickEventId.current = null;
+                                        return;
+                                      }
+                                      selectEvent(event, trackLabel);
+                                    },
+                                    onKeyDown: (keyEvent) => navigateTrackPoints(keyEvent)
                                   }
-                                  selectEvent(event, trackLabel);
-                                },
-                                onKeyDown: (keyEvent) => navigateTrackPoints(keyEvent)
-                              }
-                            )
-                          ]
-                        },
-                        event.id
-                      );
-                    }),
-                    track.endLabel ? /* @__PURE__ */ jsx45("span", { className: "squisq-ascii-timeline-end-label", children: track.endLabel }) : null
-                  ]
-                }
-              )
-            ] }, track.id);
-          })
-        ]
-      }
-    ),
-    view.timeline.links.length > 0 ? /* @__PURE__ */ jsx45("ul", { className: "squisq-ascii-timeline-link-list", "aria-label": "Timeline branches", children: view.timeline.links.map((link, index) => /* @__PURE__ */ jsxs34("li", { children: [
-      link.source,
-      " \u2192 ",
-      link.target,
-      link.label ? `: ${link.label}` : ""
-    ] }, `${link.source}-${link.target}-${index}`)) }) : null,
-    selected ? /* @__PURE__ */ jsx45(
-      EventInspector,
-      {
-        selected,
-        editable,
-        canDelete: totalEvents > 1,
-        dispatch,
-        onDelete: () => {
-          const remaining = positioned.filter((point) => point.event.id !== selected.event.id);
-          const result = dispatch({ kind: "removeEvent", eventId: selected.event.id });
-          if (result.applied) {
-            setSelectedEventId(remaining[0]?.event.id ?? null);
-            setAnnouncement(`${selected.event.label} deleted.`);
+                                )
+                              ]
+                            },
+                            event.id
+                          );
+                        }),
+                        track.endLabel ? /* @__PURE__ */ jsx45("span", { className: "squisq-ascii-timeline-end-label", children: track.endLabel }) : null
+                      ]
+                    }
+                  )
+                ] }, track.id);
+              })
+            ]
           }
+        ),
+        view.timeline.links.length > 0 ? /* @__PURE__ */ jsx45("ul", { className: "squisq-ascii-timeline-link-list", "aria-label": "Timeline branches", children: view.timeline.links.map((link, index) => /* @__PURE__ */ jsxs34("li", { children: [
+          link.source,
+          " \u2192 ",
+          link.target,
+          link.label ? `: ${link.label}` : ""
+        ] }, `${link.source}-${link.target}-${index}`)) }) : null,
+        selected ? /* @__PURE__ */ jsx45(
+          EventInspector,
+          {
+            selected,
+            editable,
+            canDelete: totalEvents > 1,
+            dispatch,
+            onDelete: () => {
+              const remaining = positioned.filter((point) => point.event.id !== selected.event.id);
+              const result = dispatch({ kind: "removeEvent", eventId: selected.event.id });
+              if (result.applied) {
+                setSelectedEventId(remaining[0]?.event.id ?? null);
+                setAnnouncement(`${selected.event.label} deleted.`);
+              }
+            }
+          },
+          `${selected.trackId}:${selected.event.id}`
+        ) : null,
+        !sourceSafe ? /* @__PURE__ */ jsxs34("div", { className: "squisq-ascii-timeline-warnings", role: "status", children: [
+          "Visual editing paused: this timeline contains source the canvas cannot safely rewrite. Repair it in Source view first.",
+          view.warnings.length > 0 ? ` (${view.warnings.length} parser note${view.warnings.length === 1 ? "" : "s"})` : ""
+        ] }) : null,
+        /* @__PURE__ */ jsx45("div", { className: "squisq-sr-only", "aria-live": "polite", children: announcement })
+      ]
+    }
+  );
+}
+function InlineTrackLabel({
+  trackId,
+  label,
+  editing,
+  editable,
+  dispatch,
+  onStart,
+  onFinish
+}) {
+  const [draft, setDraft] = useState40(label);
+  useEffect32(() => {
+    if (editing) setDraft(label);
+  }, [editing, label]);
+  const commitLabel = () => {
+    const next = draft.trim();
+    if (!next) {
+      setDraft(label);
+    } else if (next !== label) {
+      const result = dispatch({ kind: "updateTrack", trackId, label: next });
+      if (!result.applied) setDraft(label);
+    }
+    onFinish();
+  };
+  if (!editable) return /* @__PURE__ */ jsx45("span", { className: "squisq-ascii-timeline-track-name", children: label });
+  return editing ? /* @__PURE__ */ jsx45(
+    "input",
+    {
+      className: "squisq-ascii-timeline-track-name-input",
+      "aria-label": `Rename line: ${label}`,
+      value: draft,
+      autoFocus: true,
+      onFocus: (event) => event.currentTarget.select(),
+      onChange: (event) => setDraft(event.target.value),
+      onBlur: commitLabel,
+      onKeyDown: (event) => {
+        if (event.key === "Enter") {
+          event.preventDefault();
+          event.stopPropagation();
+          commitLabel();
+        } else if (event.key === "Escape") {
+          event.preventDefault();
+          event.stopPropagation();
+          setDraft(label);
+          onFinish();
         }
-      },
-      `${selected.trackId}:${selected.event.id}`
-    ) : null,
-    !sourceSafe ? /* @__PURE__ */ jsxs34("div", { className: "squisq-ascii-timeline-warnings", role: "status", children: [
-      "Visual editing paused: this timeline contains source the canvas cannot safely rewrite. Repair it in Source view first.",
-      view.warnings.length > 0 ? ` (${view.warnings.length} parser note${view.warnings.length === 1 ? "" : "s"})` : ""
-    ] }) : null,
-    /* @__PURE__ */ jsx45("div", { className: "squisq-sr-only", "aria-live": "polite", children: announcement })
-  ] });
+      }
+    }
+  ) : /* @__PURE__ */ jsx45(
+    "button",
+    {
+      type: "button",
+      className: "squisq-ascii-timeline-track-name",
+      "aria-label": `Rename line: ${label}`,
+      title: `Rename ${label}`,
+      onClick: onStart,
+      children: label
+    }
+  );
 }
 function EventInspector({
   selected,
@@ -22075,19 +22867,6 @@ function insertionGaps(positions) {
   }
   return gaps;
 }
-function largestGap(positions) {
-  if (positions.length === 0) return 0.5;
-  const sorted = [0, ...positions.map(clamp01).sort((a, b) => a - b), 1];
-  let start = sorted[0];
-  let end = sorted[1];
-  for (let index = 1; index < sorted.length - 1; index++) {
-    if (sorted[index + 1] - sorted[index] > end - start) {
-      start = sorted[index];
-      end = sorted[index + 1];
-    }
-  }
-  return (start + end) / 2;
-}
 function navigateTrackPoints(event) {
   if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
   const rail = event.currentTarget.closest(".squisq-ascii-timeline-rail");
@@ -22475,7 +23254,7 @@ var InlineIcon = Node2.create({
 });
 
 // src/ImageNodeView.tsx
-import { useEffect as useEffect33, useRef as useRef32, useState as useState41 } from "react";
+import { useEffect as useEffect33, useRef as useRef33, useState as useState41 } from "react";
 import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
 import Image2 from "@tiptap/extension-image";
 
@@ -22491,13 +23270,13 @@ function normalizeMalformedAssetUrl(src) {
 }
 
 // src/ImageNodeView.tsx
-import { Fragment as Fragment15, jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 function ImageComponent({ node, selected, editor, updateAttributes: updateAttributes2 }) {
   const { src, alt, title, width } = node.attrs;
   const { mediaProvider, imageDisplayMode, openImageEdit, mediaRevision } = useEditorContext();
   const [resolvedSrc, setResolvedSrc] = useState41(src);
   const [hovered, setHovered] = useState41(false);
-  const imgRef = useRef32(null);
+  const imgRef = useRef33(null);
   const [previewWidth, setPreviewWidth] = useState41(null);
   const isThumbnail = imageDisplayMode === "thumbnail";
   const isEditable = editor?.isEditable ?? true;
@@ -22619,7 +23398,7 @@ function ImageComponent({ node, selected, editor, updateAttributes: updateAttrib
             ]
           }
         ),
-        showResize && /* @__PURE__ */ jsxs35(Fragment15, { children: [
+        showResize && /* @__PURE__ */ jsxs35(Fragment16, { children: [
           /* @__PURE__ */ jsx46(
             "span",
             {
@@ -22827,7 +23606,7 @@ var TiptapAudio = Node2.create({
 });
 
 // src/BlockPropertiesPopover.tsx
-import { useEffect as useEffect35, useId as useId8, useRef as useRef33, useState as useState43 } from "react";
+import { useEffect as useEffect35, useId as useId8, useRef as useRef34, useState as useState43 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 import { jsx as jsx49, jsxs as jsxs36 } from "react/jsx-runtime";
 var TRANSITION_FLYOUT = ".squisq-transition-flyout";
@@ -22841,7 +23620,7 @@ function BlockPropertiesPopover({
   accentColor,
   onClose
 }) {
-  const panelRef = useRef33(null);
+  const panelRef = useRef34(null);
   const panelId = `squisq-block-props-portal-${useId8().replace(/:/g, "")}`;
   const [inner, setInner] = useState43(blockAttrs);
   const [templateInner, setTemplateInner] = useState43(templateParams);
@@ -23383,19 +24162,19 @@ function WysiwygEditor({
     },
     [docTemplates, onDocTemplatesChange]
   );
-  const mentionProviderRef = useRef34(mentionProvider);
+  const mentionProviderRef = useRef35(mentionProvider);
   useEffect36(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const resolvedPlaceholder = useMemo30(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
-  const isExternalUpdate = useRef34(false);
-  const lastSourceRef = useRef34(editorSource);
-  const mediaProviderRef = useRef34(mediaProvider);
+  const isExternalUpdate = useRef35(false);
+  const lastSourceRef = useRef35(editorSource);
+  const mediaProviderRef = useRef35(mediaProvider);
   useEffect36(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
-  const frontmatterRef = useRef34(stripFrontmatter(editorSource).frontmatter);
-  const submitOnEnterRef = useRef34(submitOnEnter);
+  const frontmatterRef = useRef35(stripFrontmatter(editorSource).frontmatter);
+  const submitOnEnterRef = useRef35(submitOnEnter);
   useEffect36(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
@@ -23584,7 +24363,7 @@ function WysiwygEditor({
   useEffect36(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  const containerRef = useRef34(null);
+  const containerRef = useRef35(null);
   const [badgeMenu, setBadgeMenu] = useState44(null);
   const [propsMenu, setPropsMenu] = useState44(null);
   const closeBadgeMenu = useCallback36(() => {
@@ -23861,7 +24640,7 @@ function moveSelectionToDropPoint(view, event) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo32, useRef as useRef35, useState as useState46 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useMemo as useMemo32, useRef as useRef36, useState as useState46 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS4 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks4,
@@ -24071,7 +24850,7 @@ function sameEntries(a, b) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { Fragment as Fragment16, jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx51, jsxs as jsxs38 } from "react/jsx-runtime";
 function isAnnotated(block) {
   const annotation = block.sourceHeading?.templateAnnotation;
   if (!annotation) return false;
@@ -24237,7 +25016,7 @@ function InlinePreviewGutter({
   mediaProvider = null
 }) {
   const { doc } = useEditorContext();
-  const gutterRef = useRef35(null);
+  const gutterRef = useRef36(null);
   const { entries: headingEntries, scrollToBlock } = useHeadingLayout(gutterRef);
   const previewSettings = usePreviewSettingsOptional();
   const activeTheme = previewSettings?.activeTheme ?? DEFAULT_THEME3;
@@ -24457,7 +25236,7 @@ function InlinePreviewGutter({
               children: [
                 /* @__PURE__ */ jsxs38("div", { className: "squisq-inline-preview-card-label", children: [
                   /* @__PURE__ */ jsx51("span", { className: "squisq-inline-preview-card-template", children: templateLabel(item.template) }),
-                  item.headingText && /* @__PURE__ */ jsxs38(Fragment16, { children: [
+                  item.headingText && /* @__PURE__ */ jsxs38(Fragment17, { children: [
                     /* @__PURE__ */ jsx51("span", { className: "squisq-inline-preview-card-sep", children: "\u2014" }),
                     /* @__PURE__ */ jsx51("span", { className: "squisq-inline-preview-card-title", children: item.headingText })
                   ] })
@@ -24870,7 +25649,7 @@ import {
   useCallback as useCallback38,
   useEffect as useEffect38,
   useMemo as useMemo34,
-  useRef as useRef36,
+  useRef as useRef37,
   useState as useState47
 } from "react";
 import { flattenBlocks as flattenBlocks6, hasTemplate as hasTemplate3 } from "@bendyline/squisq/doc";
@@ -24986,10 +25765,10 @@ function OutlinePanel({ width, className, readOnly = false }) {
     goToBlockByLine,
     activeBlockStartLine
   } = useEditorContext();
-  const paneRef = useRef36(null);
+  const paneRef = useRef37(null);
   const { scrollToBlock } = useHeadingLayout(paneRef);
   const cursorActiveId = useActiveOutlineBlockId();
-  const activeDragRef = useRef36(null);
+  const activeDragRef = useRef37(null);
   const [draggedBlockId, setDraggedBlockId] = useState47(null);
   const [dropTarget, setDropTarget] = useState47(null);
   const blockModeActiveId = useMemo34(() => {
@@ -25335,7 +26114,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback40, useEffect as useEffect40, useMemo as useMemo36, useRef as useRef38, useState as useState48 } from "react";
+import { useCallback as useCallback40, useEffect as useEffect40, useMemo as useMemo36, useRef as useRef39, useState as useState48 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -25459,7 +26238,7 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown7 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback39, useEffect as useEffect39, useMemo as useMemo35, useRef as useRef37 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect39, useMemo as useMemo35, useRef as useRef38 } from "react";
 import { jsx as jsx55, jsxs as jsxs40 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -25470,7 +26249,7 @@ function CodeContextSectionView({
   onRevealLine,
   onMeasure
 }) {
-  const rootRef = useRef37(null);
+  const rootRef = useRef38(null);
   const stripNodes = useMemo35(
     () => parseMarkdown7(section.summaryMarkdown).children,
     [section.summaryMarkdown]
@@ -25548,13 +26327,13 @@ function CodeContextSectionView({
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { Fragment as Fragment17, jsx as jsx56 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx56 } from "react/jsx-runtime";
 function CodeContextZones({ options }) {
   const { monacoEditor } = useEditorContext();
   const [manager, setManager] = useState48(null);
   const [, setZonesVersion] = useState48(0);
   const [expandedById, setExpandedById] = useState48({});
-  const seenIds = useRef38(/* @__PURE__ */ new Set());
+  const seenIds = useRef39(/* @__PURE__ */ new Set());
   useEffect40(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
@@ -25617,7 +26396,7 @@ function CodeContextZones({ options }) {
     [monacoEditor]
   );
   if (!manager) return null;
-  return /* @__PURE__ */ jsx56(Fragment17, { children: resolved.map(({ section }) => {
+  return /* @__PURE__ */ jsx56(Fragment18, { children: resolved.map(({ section }) => {
     const domNode = manager.getDomNode(section.id);
     if (!domNode) return null;
     return createPortal11(
@@ -25749,7 +26528,7 @@ function BlockCardView({
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback42, useEffect as useEffect42, useMemo as useMemo37, useRef as useRef40, useState as useState50 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect42, useMemo as useMemo37, useRef as useRef41, useState as useState50 } from "react";
 import {
   resolveMediaSchedule,
   getDocPlaybackDuration,
@@ -25943,7 +26722,7 @@ function collectEmbeddedMedia(block) {
 }
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback41, useEffect as useEffect41, useRef as useRef39, useState as useState49 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect41, useRef as useRef40, useState as useState49 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -25951,8 +26730,8 @@ function advanceTime(prev, dt, total) {
 function useTimelineClock(total) {
   const [currentTime, setCurrentTime] = useState49(0);
   const [isPlaying, setIsPlaying] = useState49(false);
-  const rafRef = useRef39(null);
-  const lastRef = useRef39(0);
+  const rafRef = useRef40(null);
+  const lastRef = useRef40(0);
   useEffect41(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
@@ -26014,7 +26793,7 @@ function TimelineTrack({ height = 160 }) {
   } = useEditorContext();
   const [drag, setDrag] = useState50(null);
   const [pxPerSecond, setPxPerSecond] = useState50(DEFAULT_PX_PER_SECOND);
-  const scrollRef = useRef40(null);
+  const scrollRef = useRef41(null);
   const blocks = useMemo37(() => doc ? flattenBlocks7(doc.blocks) : [], [doc]);
   const previewSettings = usePreviewSettingsOptional();
   const previewTheme = previewSettings?.activeTheme ?? DEFAULT_THEME5;
@@ -26074,7 +26853,7 @@ function TimelineTrack({ height = 160 }) {
     },
     [blocks]
   );
-  const followedBlockRef = useRef40(null);
+  const followedBlockRef = useRef41(null);
   useEffect42(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
@@ -26144,9 +26923,9 @@ function TimelineTrack({ height = 160 }) {
     ro.observe(el);
     return () => ro.disconnect();
   }, []);
-  const scaleRef = useRef40(pxPerSecond);
+  const scaleRef = useRef41(pxPerSecond);
   scaleRef.current = pxPerSecond;
-  const dragRef = useRef40(null);
+  const dragRef = useRef41(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
   useEffect42(() => {
@@ -26482,7 +27261,7 @@ function clipName(src) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState58, useEffect as useEffect51, useMemo as useMemo44, useCallback as useCallback49, useRef as useRef50 } from "react";
+import { useState as useState58, useEffect as useEffect51, useMemo as useMemo44, useCallback as useCallback49, useRef as useRef51 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 import { DocPlayer, LinearDocView, useMediaProvider } from "@bendyline/squisq-react";
 import { applyTransform } from "@bendyline/squisq/transform";
@@ -26618,7 +27397,7 @@ function buildDocumentPreviewMarkdown(doc) {
 }
 
 // src/PlainHtmlPreview.tsx
-import { useEffect as useEffect43, useMemo as useMemo38, useRef as useRef41, useState as useState51 } from "react";
+import { useEffect as useEffect43, useMemo as useMemo38, useRef as useRef42, useState as useState51 } from "react";
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 
 // src/utils/collectInlineFontAwesomeCss.ts
@@ -26684,7 +27463,7 @@ function PlainHtmlPreview({
   style,
   globalKeyboardShortcuts = false
 }) {
-  const iframeRef = useRef41(null);
+  const iframeRef = useRef42(null);
   const mdDoc = useMemo38(() => parseMarkdown8(markdown), [markdown]);
   const [resolvedImages, setResolvedImages] = useState51(null);
   useEffect43(() => {
@@ -26813,12 +27592,12 @@ function collectImageRefs(doc) {
 }
 
 // src/teleprompter/TeleprompterView.tsx
-import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo42, useRef as useRef48, useState as useState56 } from "react";
+import { useCallback as useCallback47, useEffect as useEffect49, useMemo as useMemo42, useRef as useRef49, useState as useState56 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 import { wordIndexAtTime } from "@bendyline/squisq/narration";
 
 // src/teleprompter/useTeleprompter.ts
-import { useCallback as useCallback44, useEffect as useEffect45, useMemo as useMemo39, useRef as useRef43, useState as useState53 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect45, useMemo as useMemo39, useRef as useRef44, useState as useState53 } from "react";
 import {
   buildNarrationScript,
   createNarrationSession,
@@ -26828,7 +27607,7 @@ import {
 } from "@bendyline/squisq/narration";
 
 // src/teleprompter/useMicAnalysis.ts
-import { useCallback as useCallback43, useEffect as useEffect44, useRef as useRef42, useState as useState52 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect44, useRef as useRef43, useState as useState52 } from "react";
 
 // src/teleprompter/pcmWorklet.ts
 var PCM_WORKLET_NAME = "squisq-pcm-tap";
@@ -26881,9 +27660,9 @@ function useMicAnalysis() {
   const [devices, setDevices] = useState52([]);
   const [stream, setStream] = useState52(null);
   const [sampleRate, setSampleRate] = useState52(null);
-  const graphRef = useRef42(null);
-  const listenersRef = useRef42(/* @__PURE__ */ new Set());
-  const generationRef = useRef42(0);
+  const graphRef = useRef43(null);
+  const listenersRef = useRef43(/* @__PURE__ */ new Set());
+  const generationRef = useRef43(0);
   const refreshDevices = useCallback43(async () => {
     try {
       const all = await navigator.mediaDevices.enumerateDevices();
@@ -27075,17 +27854,17 @@ function useTeleprompter(opts) {
   const [countdownRemaining, setCountdownRemaining] = useState53(null);
   const [view, setView] = useState53({ wordPos: 0, micLevel: 0, voiceActive: false });
   const mic = useMicAnalysis();
-  const scriptRef = useRef43(script);
-  const prefsRef = useRef43(prefs);
-  const transportRef = useRef43(transport);
-  const wordPosRef = useRef43(0);
-  const sessionRef = useRef43(null);
-  const sessionKeyRef = useRef43("");
-  const lastPublishRef = useRef43(0);
-  const tickSubsRef = useRef43(/* @__PURE__ */ new Set());
-  const levelRef = useRef43(0);
-  const voiceRef = useRef43(false);
-  const countdownTimerRef = useRef43(null);
+  const scriptRef = useRef44(script);
+  const prefsRef = useRef44(prefs);
+  const transportRef = useRef44(transport);
+  const wordPosRef = useRef44(0);
+  const sessionRef = useRef44(null);
+  const sessionKeyRef = useRef44("");
+  const lastPublishRef = useRef44(0);
+  const tickSubsRef = useRef44(/* @__PURE__ */ new Set());
+  const levelRef = useRef44(0);
+  const voiceRef = useRef44(false);
+  const countdownTimerRef = useRef44(null);
   scriptRef.current = script;
   prefsRef.current = prefs;
   transportRef.current = transport;
@@ -27347,7 +28126,7 @@ function useTeleprompter(opts) {
 }
 
 // src/teleprompter/useFloatingWindow.ts
-import { useCallback as useCallback45, useEffect as useEffect46, useMemo as useMemo40, useRef as useRef44, useState as useState54 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect46, useMemo as useMemo40, useRef as useRef45, useState as useState54 } from "react";
 
 // src/teleprompter/floatingWindow.ts
 function detectFloatTiers() {
@@ -27590,7 +28369,7 @@ html,body{margin:0;height:100%;}#squisq-float-root{height:100%;display:flex;}`;
 var FLOAT_WIDTH = 380;
 var FLOAT_HEIGHT = 540;
 function useFloatingWindow(styleCss) {
-  const managerRef = useRef44(null);
+  const managerRef = useRef45(null);
   if (managerRef.current === null) {
     managerRef.current = createFloatingWindowManager({ styleCss });
   }
@@ -27630,7 +28409,7 @@ function useFloatingWindow(styleCss) {
 }
 
 // src/teleprompter/TeleprompterSurface.tsx
-import { memo as memo2, useEffect as useEffect47, useMemo as useMemo41, useRef as useRef45 } from "react";
+import { memo as memo2, useEffect as useEffect47, useMemo as useMemo41, useRef as useRef46 } from "react";
 
 // src/teleprompter/scrollModel.ts
 var EYE_LINE_FRACTION = 0.35;
@@ -27961,7 +28740,7 @@ var TELEPROMPTER_CSS = `
 `;
 
 // src/teleprompter/TeleprompterSurface.tsx
-import { Fragment as Fragment18, jsx as jsx60, jsxs as jsxs43 } from "react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx60, jsxs as jsxs43 } from "react/jsx-runtime";
 function groupScript(script) {
   return script.blocks.map((range) => {
     const paragraphs = [];
@@ -27986,7 +28765,7 @@ var ScriptColumn = memo2(function ScriptColumn2({
   compact
 }) {
   const groups = useMemo41(() => groupScript(script), [script]);
-  return /* @__PURE__ */ jsx60(Fragment18, { children: groups.map((group) => /* @__PURE__ */ jsxs43("section", { "data-block-id": group.blockId, children: [
+  return /* @__PURE__ */ jsx60(Fragment19, { children: groups.map((group) => /* @__PURE__ */ jsxs43("section", { "data-block-id": group.blockId, children: [
     !compact && group.heading ? /* @__PURE__ */ jsx60("span", { className: "squisq-teleprompter-block-marker", children: group.heading }) : null,
     group.paragraphs.map((paragraph) => /* @__PURE__ */ jsx60("p", { className: "squisq-teleprompter-para", children: paragraph.tokenIndexes.map((idx) => /* @__PURE__ */ jsxs43("span", { className: "squisq-teleprompter-word", "data-token-idx": idx, children: [
       script.tokens[idx].text,
@@ -28006,9 +28785,9 @@ function TeleprompterSurface({
   compact = false,
   onSeekToken
 }) {
-  const surfaceRef = useRef45(null);
-  const columnRef = useRef45(null);
-  const wordPosRef = useRef45(wordPos);
+  const surfaceRef = useRef46(null);
+  const columnRef = useRef46(null);
+  const wordPosRef = useRef46(wordPos);
   wordPosRef.current = wordPos;
   const vars = useMemo41(() => prompterVarsFromTheme(theme), [theme]);
   useEffect47(() => {
@@ -28105,7 +28884,7 @@ function TeleprompterSurface({
             children: /* @__PURE__ */ jsx60(ScriptColumn, { script, compact })
           }
         ) }),
-        lineGuide ? /* @__PURE__ */ jsxs43(Fragment18, { children: [
+        lineGuide ? /* @__PURE__ */ jsxs43(Fragment19, { children: [
           /* @__PURE__ */ jsx60(
             "div",
             {
@@ -28129,7 +28908,7 @@ function TeleprompterSurface({
 }
 
 // src/teleprompter/TeleprompterControls.tsx
-import { Fragment as Fragment19, jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx61, jsxs as jsxs44 } from "react/jsx-runtime";
 var TIER_LABELS = {
   "document-pip": "Floating window (always on top)",
   "video-pip": "Picture-in-picture (read-only)",
@@ -28213,7 +28992,7 @@ function TeleprompterControls({ controller, float, recordSlot }) {
               children: "\u{1F399} Voice pace"
             }
           ),
-          prefs.voiceTracking ? /* @__PURE__ */ jsxs44(Fragment19, { children: [
+          prefs.voiceTracking ? /* @__PURE__ */ jsxs44(Fragment20, { children: [
             /* @__PURE__ */ jsx61("label", { htmlFor: "squisq-prompter-sensitivity", title: "Voice detection sensitivity", children: "Sens." }),
             /* @__PURE__ */ jsx61(
               "input",
@@ -28299,7 +29078,7 @@ function TeleprompterControls({ controller, float, recordSlot }) {
           )
         ] }),
         recordSlot,
-        float.supportedTiers.length > 0 ? /* @__PURE__ */ jsx61("span", { className: "squisq-teleprompter-group", style: { marginLeft: "auto" }, children: float.isOpen ? /* @__PURE__ */ jsx61("button", { type: "button", onClick: float.close, children: "\u21E4 Bring back" }) : /* @__PURE__ */ jsxs44(Fragment19, { children: [
+        float.supportedTiers.length > 0 ? /* @__PURE__ */ jsx61("span", { className: "squisq-teleprompter-group", style: { marginLeft: "auto" }, children: float.isOpen ? /* @__PURE__ */ jsx61("button", { type: "button", onClick: float.close, children: "\u21E4 Bring back" }) : /* @__PURE__ */ jsxs44(Fragment20, { children: [
           float.supportedTiers.length > 1 ? /* @__PURE__ */ jsx61(
             "select",
             {
@@ -28332,10 +29111,10 @@ function TeleprompterControls({ controller, float, recordSlot }) {
 }
 
 // src/teleprompter/TeleprompterSelfView.tsx
-import { useRef as useRef46 } from "react";
+import { useRef as useRef47 } from "react";
 import { jsx as jsx62 } from "react/jsx-runtime";
 function TeleprompterSelfView({ stream }) {
-  const videoRef = useRef46(null);
+  const videoRef = useRef47(null);
   useStreamPreview(videoRef, stream);
   if (!stream) return null;
   return /* @__PURE__ */ jsx62(
@@ -28465,7 +29244,7 @@ function drawPrompterFrame(canvas, frame) {
 }
 
 // src/teleprompter/recording/useNarrationRecorder.ts
-import { useCallback as useCallback46, useEffect as useEffect48, useRef as useRef47, useState as useState55 } from "react";
+import { useCallback as useCallback46, useEffect as useEffect48, useRef as useRef48, useState as useState55 } from "react";
 import {
   alignNarration
 } from "@bendyline/squisq/narration";
@@ -28499,8 +29278,8 @@ function useNarrationRecorder(options) {
   const [withCamera, setWithCamera] = useState55(false);
   const [cameraStream, setCameraStream] = useState55(null);
   const [take, setTake] = useState55(null);
-  const captureRef = useRef47(null);
-  const optionsRef = useRef47(options);
+  const captureRef = useRef48(null);
+  const optionsRef = useRef48(options);
   optionsRef.current = options;
   const teardownCapture = useCallback46(() => {
     const capture = captureRef.current;
@@ -28802,13 +29581,13 @@ async function executeNarrationSave(plan, take, deps) {
 }
 
 // src/teleprompter/TeleprompterView.tsx
-import { Fragment as Fragment20, jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx63, jsxs as jsxs45 } from "react/jsx-runtime";
 function TeleprompterView(props) {
   const { doc, theme, presentationTarget = null, recording = null } = props;
   const controller = useTeleprompter({ doc });
   const float = useFloatingWindow(TELEPROMPTER_CSS);
-  const rootRef = useRef48(null);
-  const controllerRef = useRef48(controller);
+  const rootRef = useRef49(null);
+  const controllerRef = useRef49(controller);
   controllerRef.current = controller;
   const [saveNotice, setSaveNotice] = useState56(null);
   const recorder = useNarrationRecorder({
@@ -28819,7 +29598,7 @@ function TeleprompterView(props) {
     onRecordingStart: () => controllerRef.current.play(),
     onRecordingStop: () => controllerRef.current.pause()
   });
-  const recorderRef = useRef48(recorder);
+  const recorderRef = useRef49(recorder);
   recorderRef.current = recorder;
   useEffect49(() => {
     const ownerDoc = rootRef.current?.ownerDocument;
@@ -28828,7 +29607,7 @@ function TeleprompterView(props) {
   useEffect49(() => {
     if (presentationTarget) ensureTeleprompterStyles(presentationTarget.ownerDocument);
   }, [presentationTarget]);
-  const canvasFrameRef = useRef48(null);
+  const canvasFrameRef = useRef49(null);
   canvasFrameRef.current = controller.script ? {
     script: controller.script,
     fontSizePx: controller.prefs.fontSizePx,
@@ -28927,7 +29706,7 @@ function TeleprompterView(props) {
     ]
   );
   if (!controller.script) {
-    return /* @__PURE__ */ jsxs45(Fragment20, { children: [
+    return /* @__PURE__ */ jsxs45(Fragment21, { children: [
       /* @__PURE__ */ jsx63("div", { ref: rootRef, className: "squisq-teleprompter-root", "data-testid": "teleprompter-view", children: /* @__PURE__ */ jsx63("div", { className: "squisq-teleprompter-float-note", children: /* @__PURE__ */ jsx63("p", { children: "Nothing to narrate yet \u2014 add some content to the document." }) }) }),
       presentationTarget ? createPortal12(
         /* @__PURE__ */ jsx63("div", { className: "squisq-presentation-teleprompter", "aria-label": "Audience presentation", children: /* @__PURE__ */ jsx63("div", { className: "squisq-teleprompter-float-note", children: /* @__PURE__ */ jsx63("p", { children: "Nothing to narrate yet \u2014 add some content to the document." }) }) }),
@@ -28938,7 +29717,7 @@ function TeleprompterView(props) {
   const script = controller.script;
   const portalOpen = float.portalTarget !== null;
   const busyRecording = recorder.state === "recording" || recorder.state === "starting";
-  const recordSlot = recording ? /* @__PURE__ */ jsx63("span", { className: "squisq-teleprompter-group", "data-testid": "teleprompter-record", children: recorder.state === "idle" || recorder.state === "error" ? /* @__PURE__ */ jsxs45(Fragment20, { children: [
+  const recordSlot = recording ? /* @__PURE__ */ jsx63("span", { className: "squisq-teleprompter-group", "data-testid": "teleprompter-record", children: recorder.state === "idle" || recorder.state === "error" ? /* @__PURE__ */ jsxs45(Fragment21, { children: [
     /* @__PURE__ */ jsx63(
       "button",
       {
@@ -29038,7 +29817,7 @@ import {
   useId as useId9,
   useLayoutEffect as useLayoutEffect5,
   useMemo as useMemo43,
-  useRef as useRef49,
+  useRef as useRef50,
   useState as useState57
 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
@@ -29105,12 +29884,12 @@ function PresentationModeProvider({ rootRef, children }) {
   const [activeTarget, setActiveTarget] = useState57(null);
   const [popupRoot, setPopupRoot] = useState57(null);
   const [error, setError] = useState57(null);
-  const activeTargetRef = useRef49(activeTarget);
+  const activeTargetRef = useRef50(activeTarget);
   activeTargetRef.current = activeTarget;
-  const previousActiveTargetRef = useRef49(null);
-  const returnFocusRef = useRef49(null);
-  const popupRef = useRef49(null);
-  const popupCleanupRef = useRef49(null);
+  const previousActiveTargetRef = useRef50(null);
+  const returnFocusRef = useRef50(null);
+  const popupRef = useRef50(null);
+  const popupCleanupRef = useRef50(null);
   const fullscreenSupported = typeof document !== "undefined" && typeof document.documentElement.requestFullscreen === "function";
   const releasePopup = useCallback48((closeWindow) => {
     const popup = popupRef.current;
@@ -29349,8 +30128,8 @@ var MENU_GAP = 4;
 function PresentationModeControl() {
   const { selectedTarget, activeTarget, fullscreenSupported, selectTarget, start, stop } = usePresentationMode();
   const { colorScheme } = useEditorContext();
-  const triggerRef = useRef49(null);
-  const menuRef = useRef49(null);
+  const triggerRef = useRef50(null);
+  const menuRef = useRef50(null);
   const [open, setOpen] = useState57(false);
   const [anchor, setAnchor] = useState57(null);
   const selected = PRESENTATION_OPTIONS.find((option) => option.target === selectedTarget) ?? PRESENTATION_OPTIONS[0];
@@ -29515,7 +30294,7 @@ function PresentationModeControl() {
 }
 
 // src/PreviewPanel.tsx
-import { Fragment as Fragment21, jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx65, jsxs as jsxs47 } from "react/jsx-runtime";
 function PreviewPanel({ basePath = "/", className, workspaceContainer }) {
   const {
     doc,
@@ -29539,8 +30318,8 @@ function PreviewPanel({ basePath = "/", className, workspaceContainer }) {
     activeCaptionsEnabled,
     activeCoverSlide
   } = usePreviewSettings();
-  const mainSurfaceRef = useRef50(null);
-  const popupSurfaceRef = useRef50(null);
+  const mainSurfaceRef = useRef51(null);
+  const popupSurfaceRef = useRef51(null);
   const [playbackState, setPlaybackState] = useState58(null);
   const handlePlaybackStateChange = useCallback49((next) => {
     setPlaybackState(next);
@@ -29759,7 +30538,7 @@ function PreviewPanel({ basePath = "/", className, workspaceContainer }) {
     overflow: "hidden",
     minHeight: 0
   };
-  return /* @__PURE__ */ jsxs47(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs47(Fragment22, { children: [
     /* @__PURE__ */ jsx65(
       "div",
       {
@@ -29800,14 +30579,14 @@ function PreviewPanel({ basePath = "/", className, workspaceContainer }) {
 }
 
 // src/ImageViewer.tsx
-import { useCallback as useCallback50, useEffect as useEffect52, useRef as useRef51, useState as useState59 } from "react";
-import { Fragment as Fragment22, jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
+import { useCallback as useCallback50, useEffect as useEffect52, useRef as useRef52, useState as useState59 } from "react";
+import { Fragment as Fragment23, jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
 var MIN_ZOOM = 0.1;
 var MAX_ZOOM = 16;
 var ZOOM_STEP = 1.25;
 function ImageViewer({ src, alt = "", className, theme = "light" }) {
-  const imgRef = useRef51(null);
-  const stageRef = useRef51(null);
+  const imgRef = useRef52(null);
+  const stageRef = useRef52(null);
   const [naturalSize, setNaturalSize] = useState59(null);
   const [fitZoom, setFitZoom] = useState59(1);
   const [state, setState2] = useState59({ mode: "fit" });
@@ -29859,7 +30638,7 @@ function ImageViewer({ src, alt = "", className, theme = "light" }) {
   }, [setZoom]);
   const onZoomIn = useCallback50(() => setZoom(effectiveZoom * ZOOM_STEP), [effectiveZoom, setZoom]);
   const onZoomOut = useCallback50(() => setZoom(effectiveZoom / ZOOM_STEP), [effectiveZoom, setZoom]);
-  const dragRef = useRef51(
+  const dragRef = useRef52(
     null
   );
   const onMouseDown = useCallback50(
@@ -29966,7 +30745,7 @@ function ImageViewer({ src, alt = "", className, theme = "light" }) {
         ]
       }
     ),
-    /* @__PURE__ */ jsx66("div", { className: "squisq-image-viewer-status", children: naturalSize ? /* @__PURE__ */ jsxs48(Fragment22, { children: [
+    /* @__PURE__ */ jsx66("div", { className: "squisq-image-viewer-status", children: naturalSize ? /* @__PURE__ */ jsxs48(Fragment23, { children: [
       /* @__PURE__ */ jsxs48("span", { children: [
         naturalSize.w,
         " \xD7 ",
@@ -29981,11 +30760,11 @@ function ImageViewer({ src, alt = "", className, theme = "light" }) {
 }
 
 // src/ImageEditor.tsx
-import { useCallback as useCallback54, useRef as useRef57, useState as useState66 } from "react";
+import { useCallback as useCallback54, useRef as useRef58, useState as useState66 } from "react";
 import { exportImageEditDoc as exportImageEditDoc2 } from "@bendyline/squisq/imageEdit";
 
 // src/imageEditor/CanvasSurface.tsx
-import { useCallback as useCallback51, useEffect as useEffect54, useId as useId10, useLayoutEffect as useLayoutEffect6, useRef as useRef52, useState as useState61 } from "react";
+import { useCallback as useCallback51, useEffect as useEffect54, useId as useId10, useLayoutEffect as useLayoutEffect6, useRef as useRef53, useState as useState61 } from "react";
 import { PathLayer as PathLayer2 } from "@bendyline/squisq-react";
 
 // src/imageEditor/layers/EditorImageLayer.tsx
@@ -30180,16 +30959,16 @@ function CanvasSurface({
   requestEditLayerId
 }) {
   const checkerId = `squisq-image-editor-checker-${useId10().replace(/:/g, "")}`;
-  const svgRef = useRef52(null);
-  const dragRef = useRef52(null);
+  const svgRef = useRef53(null);
+  const dragRef = useRef53(null);
   const [, forceRender] = useState61(0);
   const [cropDrag, setCropDrag] = useState61(null);
   const [shapeLineDrag, setShapeLineDrag] = useState61(null);
-  const internalWrapRef = useRef52(null);
-  const pendingScrollRef = useRef52(null);
+  const internalWrapRef = useRef53(null);
+  const pendingScrollRef = useRef53(null);
   const [zoomDrag, setZoomDrag] = useState61(null);
   const [editingLayerId, setEditingLayerId] = useState61(null);
-  const editTextareaRef = useRef52(null);
+  const editTextareaRef = useRef53(null);
   const toCanvas = useCallback51(
     (clientX, clientY) => {
       const svg = svgRef.current;
@@ -30698,7 +31477,7 @@ function measureTextLayerBox(layer, fallback) {
 }
 
 // src/imageEditor/ImageVersionHistoryDropdown.tsx
-import { useCallback as useCallback52, useEffect as useEffect55, useRef as useRef53, useState as useState62 } from "react";
+import { useCallback as useCallback52, useEffect as useEffect55, useRef as useRef54, useState as useState62 } from "react";
 import {
   exportImageEditDoc
 } from "@bendyline/squisq/imageEdit";
@@ -30715,9 +31494,9 @@ function ImageVersionHistoryDropdown({
   const [loading, setLoading] = useState62(false);
   const [busyTimestamp, setBusyTimestamp] = useState62(null);
   const [meta, setMeta2] = useState62({});
-  const popoverRef = useRef53(null);
-  const triggerRef = useRef53(null);
-  const urlsRef = useRef53(/* @__PURE__ */ new Set());
+  const popoverRef = useRef54(null);
+  const triggerRef = useRef54(null);
+  const urlsRef = useRef54(/* @__PURE__ */ new Set());
   useEffect55(() => {
     if (!open) return;
     let cancelled = false;
@@ -30966,7 +31745,7 @@ function emptyDoc() {
 }
 
 // src/imageEditor/LayersPanel.tsx
-import { useEffect as useEffect56, useRef as useRef54, useState as useState63 } from "react";
+import { useEffect as useEffect56, useRef as useRef55, useState as useState63 } from "react";
 
 // src/imageEditor/icons.tsx
 import { jsx as jsx73 } from "react/jsx-runtime";
@@ -31022,7 +31801,7 @@ var ADD_LAYER_OPTIONS = [
 ];
 function LayersPanel({ doc, selectedLayerId, dispatch, onAddLayer }) {
   const [addMenuOpen, setAddMenuOpen] = useState63(false);
-  const addMenuRef = useRef54(null);
+  const addMenuRef = useRef55(null);
   useEffect56(() => {
     if (!addMenuOpen) return;
     const closeOnOutsideClick = (event) => {
@@ -31194,7 +31973,7 @@ function defaultLayerName(layer) {
 }
 
 // src/imageEditor/PropertiesPanel.tsx
-import { Fragment as Fragment23, jsx as jsx75, jsxs as jsxs53 } from "react/jsx-runtime";
+import { Fragment as Fragment24, jsx as jsx75, jsxs as jsxs53 } from "react/jsx-runtime";
 function PropertiesPanel({ doc, selectedLayerId, dispatch }) {
   const selected = selectedLayerId ? doc.layers.find((l) => l.id === selectedLayerId) ?? null : null;
   return /* @__PURE__ */ jsxs53("div", { className: "squisq-image-editor-properties", "data-testid": "image-editor-properties", children: [
@@ -31246,7 +32025,7 @@ function LayerSection({
   dispatch
 }) {
   const update = (patch) => dispatch({ type: "update-layer", layerId: layer.id, patch });
-  return /* @__PURE__ */ jsxs53(Fragment23, { children: [
+  return /* @__PURE__ */ jsxs53(Fragment24, { children: [
     /* @__PURE__ */ jsxs53("fieldset", { className: "squisq-image-editor-fieldset", children: [
       /* @__PURE__ */ jsx75("legend", { children: "Layer" }),
       /* @__PURE__ */ jsx75(TextField, { label: "Name", value: layer.name ?? "", onChange: (name) => update({ name }) }),
@@ -31590,7 +32369,7 @@ function normalizeColor2(v) {
 }
 
 // src/imageEditor/Toolbar.tsx
-import { useRef as useRef55, useState as useState64, useEffect as useEffect57 } from "react";
+import { useRef as useRef56, useState as useState64, useEffect as useEffect57 } from "react";
 import { jsx as jsx76, jsxs as jsxs54 } from "react/jsx-runtime";
 function RedlineArrowIcon() {
   return /* @__PURE__ */ jsxs54("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", "aria-hidden": "true", children: [
@@ -31697,7 +32476,7 @@ function Toolbar2({
   onZoomFit,
   onZoom1to1
 }) {
-  const internalImageInputRef = useRef55(null);
+  const internalImageInputRef = useRef56(null);
   const fileInputRef = imageInputRef ?? internalImageInputRef;
   const [shapePaletteOpen, setShapePaletteOpen] = useState64(false);
   const onFilePicked = async (file) => {
@@ -31900,8 +32679,8 @@ function Toolbar2({
 }
 function ExportDropdown({ onExport }) {
   const [open, setOpen] = useState64(false);
-  const wrapRef = useRef55(null);
-  const triggerRef = useRef55(null);
+  const wrapRef = useRef56(null);
+  const triggerRef = useRef56(null);
   useEffect57(() => {
     if (!open) return;
     function onDocClick(e2) {
@@ -31977,7 +32756,7 @@ function probeDims(file) {
 }
 
 // src/imageEditor/useImageEditor.ts
-import { useCallback as useCallback53, useEffect as useEffect58, useMemo as useMemo45, useReducer as useReducer2, useRef as useRef56, useState as useState65 } from "react";
+import { useCallback as useCallback53, useEffect as useEffect58, useMemo as useMemo45, useReducer as useReducer2, useRef as useRef57, useState as useState65 } from "react";
 import {
   IMAGE_EDIT_ASSETS_PREFIX,
   IMAGE_EDIT_STATE_FILENAME,
@@ -32093,7 +32872,7 @@ function useImageEditor(options) {
   );
   const [ready, setReady] = useState65(false);
   const [error, setError] = useState65(null);
-  const seededOnLoadRef = useRef56(false);
+  const seededOnLoadRef = useRef57(false);
   useEffect58(() => {
     let cancelled = false;
     setReady(false);
@@ -32124,11 +32903,11 @@ function useImageEditor(options) {
       cancelled = true;
     };
   }, [container, stateFilename, initialSrc]);
-  const persistTimerRef = useRef56(null);
-  const docRef = useRef56(null);
-  const dirtyRef = useRef56(false);
-  const revisionRef = useRef56(0);
-  const previousDocRef = useRef56(null);
+  const persistTimerRef = useRef57(null);
+  const docRef = useRef57(null);
+  const dirtyRef = useRef57(false);
+  const revisionRef = useRef57(0);
+  const previousDocRef = useRef57(null);
   const nextDoc = state?.doc ?? null;
   if (nextDoc !== previousDocRef.current) {
     previousDocRef.current = nextDoc;
@@ -32136,8 +32915,8 @@ function useImageEditor(options) {
   }
   docRef.current = nextDoc;
   dirtyRef.current = state?.dirty ?? false;
-  const writeQueueRef = useRef56(Promise.resolve());
-  const persistTargetRef = useRef56({ container, stateFilename });
+  const writeQueueRef = useRef57(Promise.resolve());
+  const persistTargetRef = useRef57({ container, stateFilename });
   persistTargetRef.current = { container, stateFilename };
   const enqueueWrite = useCallback53(
     (doc, revision, markClean) => {
@@ -32224,8 +33003,8 @@ function useImageEditor(options) {
     }, versioningAutoSaveIdleMs);
     return () => clearTimeout(timer);
   }, [versioning, versioningAutoSaveIdleMs, state?.doc]);
-  const urlCacheRef = useRef56(/* @__PURE__ */ new Map());
-  const urlCacheGenerationRef = useRef56(0);
+  const urlCacheRef = useRef57(/* @__PURE__ */ new Map());
+  const urlCacheGenerationRef = useRef57(0);
   const resolveAssetUrl = useCallback53(
     async (path) => {
       const cache2 = urlCacheRef.current;
@@ -32627,8 +33406,8 @@ function ImageEditor(props) {
     versioningAutoSaveIdleMs
   });
   const [historyRefreshKey, setHistoryRefreshKey] = useState66(0);
-  const surfaceRef = useRef57(null);
-  const imageInputRef = useRef57(null);
+  const surfaceRef = useRef58(null);
+  const imageInputRef = useRef58(null);
   const [zoom, setZoom] = useState66(1);
   const handleZoomIn = useCallback54(() => {
     setZoom((z) => ZOOM_STEPS.find((s) => s > z + 1e-3) ?? 16);
@@ -32879,7 +33658,7 @@ function ImageEditor(props) {
 }
 
 // src/MediaBin.tsx
-import { useState as useState67, useEffect as useEffect59, useRef as useRef58, useCallback as useCallback55 } from "react";
+import { useState as useState67, useEffect as useEffect59, useRef as useRef59, useCallback as useCallback55 } from "react";
 import { jsx as jsx78, jsxs as jsxs56 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -32933,9 +33712,9 @@ function MediaBin({
   const [loading, setLoading] = useState67(false);
   const [isDropActive, setIsDropActive] = useState67(false);
   const [contextMenu, setContextMenu] = useState67(null);
-  const fileInputRef = useRef58(null);
-  const contextMenuRef = useRef58(null);
-  const dropDepthRef = useRef58(0);
+  const fileInputRef = useRef59(null);
+  const contextMenuRef = useRef59(null);
+  const dropDepthRef = useRef59(0);
   const updateEntries = useCallback55(
     async (provider) => {
       const list = sortMediaEntries(filterVisibleMediaEntries(await provider.listMedia()));
@@ -33265,7 +34044,7 @@ ${formatSize(entry.size)}`,
 
 // src/DropZoneOverlay.tsx
 import { useState as useState68 } from "react";
-import { Fragment as Fragment24, jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
+import { Fragment as Fragment25, jsx as jsx79, jsxs as jsxs57 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
   zoneProps,
@@ -33286,7 +34065,7 @@ function DropZoneOverlay({
         variant: "media"
       }
     ),
-    showText && /* @__PURE__ */ jsxs57(Fragment24, { children: [
+    showText && /* @__PURE__ */ jsxs57(Fragment25, { children: [
       /* @__PURE__ */ jsx79(
         DropZone,
         {
@@ -33365,7 +34144,7 @@ function DropZone({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect60, useLayoutEffect as useLayoutEffect7, useRef as useRef59, useState as useState69 } from "react";
+import { useEffect as useEffect60, useLayoutEffect as useLayoutEffect7, useRef as useRef60, useState as useState69 } from "react";
 import { createPortal as createPortal15 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -33382,10 +34161,10 @@ import { jsx as jsx80 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
   const [state, setState2] = useState69(null);
-  const tooltipRef = useRef59(null);
-  const timerRef = useRef59(null);
-  const currentTargetRef = useRef59(null);
-  const visibleRef = useRef59(false);
+  const tooltipRef = useRef60(null);
+  const timerRef = useRef60(null);
+  const currentTargetRef = useRef60(null);
+  const visibleRef = useRef60(false);
   useLayoutEffect7(() => {
     if (!state) return;
     const node = tooltipRef.current;
@@ -33717,7 +34496,7 @@ import {
   createMediaProviderFromContainer
 } from "@bendyline/squisq/storage";
 import { MediaContext as MediaContext6 } from "@bendyline/squisq-react";
-import { Fragment as Fragment25, jsx as jsx81, jsxs as jsxs58 } from "react/jsx-runtime";
+import { Fragment as Fragment26, jsx as jsx81, jsxs as jsxs58 } from "react/jsx-runtime";
 function EditorShell({
   initialMarkdown = "",
   initialView = "wysiwyg",
@@ -33879,7 +34658,7 @@ function EditorShellInner({
   outlineWidth,
   themeOverride
 }) {
-  const shellRef = useRef60(null);
+  const shellRef = useRef61(null);
   const {
     activeView,
     markdownSource,
@@ -33920,7 +34699,7 @@ function EditorShellInner({
     () => collectMediaReferencesFromMarkdown(markdownSource),
     [markdownSource]
   );
-  const imageEditFallbackContainerRef = useRef60(null);
+  const imageEditFallbackContainerRef = useRef61(null);
   if (imageEditFallbackContainerRef.current === null) {
     imageEditFallbackContainerRef.current = new MemoryContentContainer();
   }
@@ -34093,7 +34872,7 @@ ${snippet}` : snippet);
               fileCount: mediaCount,
               onToggleFiles: !isCodeMode && filesToggleEnabled ? handleToggleFiles : void 0,
               slotLeft: toolbarSlotLeft,
-              slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsxs58(Fragment25, { children: [
+              slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsxs58(Fragment26, { children: [
                 /* @__PURE__ */ jsx81(PreviewToolbarControls, {}),
                 /* @__PURE__ */ jsx81(PresentationModeControl, {})
               ] }),
@@ -34279,9 +35058,9 @@ function ImageEditModal({
   versioningAutoSaveIdleMs,
   shellTheme
 }) {
-  const modalRef = useRef60(null);
-  const surfaceRef = useRef60(null);
-  const onCloseRef = useRef60(onClose);
+  const modalRef = useRef61(null);
+  const surfaceRef = useRef61(null);
+  const onCloseRef = useRef61(onClose);
   onCloseRef.current = onClose;
   const extension = relativePath.split(/[?#]/, 1)[0]?.split(".").pop()?.toLowerCase();
   const saveFormat = extension === "png" ? "png" : extension === "jpg" || extension === "jpeg" ? "jpeg" : extension === "webp" ? "webp" : null;
@@ -34533,7 +35312,7 @@ function ViewSwitcher({ className }) {
 }
 
 // src/ThemeCustomizerPanel.tsx
-import { useCallback as useCallback57, useEffect as useEffect62, useMemo as useMemo48, useRef as useRef61, useState as useState71 } from "react";
+import { useCallback as useCallback57, useEffect as useEffect62, useMemo as useMemo48, useRef as useRef62, useState as useState71 } from "react";
 import { deriveScale, isHex as isHex2, serializeTheme } from "@bendyline/squisq/schemas";
 import { jsx as jsx84, jsxs as jsxs61 } from "react/jsx-runtime";
 function ThemeCustomizerPanel({
@@ -34545,8 +35324,8 @@ function ThemeCustomizerPanel({
 }) {
   const [open, setOpen] = useState71(false);
   const [draft, setDraft] = useState71(() => themeToDraft(value));
-  const containerRef = useRef61(null);
-  const externalIdRef = useRef61(value?.id ?? null);
+  const containerRef = useRef62(null);
+  const externalIdRef = useRef62(value?.id ?? null);
   useEffect62(() => {
     const incomingId = value?.id ?? null;
     if (incomingId !== externalIdRef.current) {
@@ -34871,14 +35650,14 @@ import {
 import { useId as useId12 } from "react";
 
 // src/jsonEditor/editors.tsx
-import { useEffect as useEffect65, useId as useId11, useRef as useRef63, useState as useState72 } from "react";
+import { useEffect as useEffect65, useId as useId11, useRef as useRef64, useState as useState72 } from "react";
 import {
   appendPointer,
   arrayItemKind
 } from "@bendyline/squisq/jsonForm";
 
 // src/jsonEditor/EmbeddedRichTextField.tsx
-import { useEffect as useEffect64, useRef as useRef62 } from "react";
+import { useEffect as useEffect64, useRef as useRef63 } from "react";
 import { useEditor as useEditor4, EditorContent as EditorContent3 } from "@tiptap/react";
 import StarterKit3 from "@tiptap/starter-kit";
 import Table2 from "@tiptap/extension-table";
@@ -34891,8 +35670,8 @@ import Placeholder2 from "@tiptap/extension-placeholder";
 import { jsx as jsx86 } from "react/jsx-runtime";
 function EmbeddedRichTextField(props) {
   const { value, onChange, readOnly = false, placeholder, className } = props;
-  const isExternalUpdate = useRef62(false);
-  const lastValueRef = useRef62(value);
+  const isExternalUpdate = useRef63(false);
+  const lastValueRef = useRef63(value);
   const editor = useEditor4({
     editable: !readOnly,
     extensions: [
@@ -34977,7 +35756,7 @@ function TextEditor(props) {
 function MultilineEditor(props) {
   const { value, schema, pointer, disabled } = props;
   const { setAtPath } = useJsonEditor();
-  const ref = useRef63(null);
+  const ref = useRef64(null);
   useEffect65(() => {
     const ta = ref.current;
     if (!ta) return;
@@ -35676,11 +36455,12 @@ function JsonEditor(props) {
 // src/recorder/RecorderButton.tsx
 import { useCallback as useCallback58, useState as useState73 } from "react";
 import { createPortal as createPortal16 } from "react-dom";
-import { Fragment as Fragment26, jsx as jsx90, jsxs as jsxs64 } from "react/jsx-runtime";
+import { Fragment as Fragment27, jsx as jsx90, jsxs as jsxs64 } from "react/jsx-runtime";
 function RecorderButton({
   mediaProvider,
   container = null,
   initialMode = "mic",
+  colorScheme = "light",
   onSave,
   label = "Record",
   style,
@@ -35695,7 +36475,7 @@ function RecorderButton({
     },
     [onSave]
   );
-  return /* @__PURE__ */ jsxs64(Fragment26, { children: [
+  return /* @__PURE__ */ jsxs64(Fragment27, { children: [
     /* @__PURE__ */ jsx90("button", { type: "button", onClick: handleOpen, style, disabled, children: label }),
     open && typeof document !== "undefined" && createPortal16(
       /* @__PURE__ */ jsx90(
@@ -35704,6 +36484,7 @@ function RecorderButton({
           mediaProvider,
           container,
           initialMode,
+          colorScheme,
           onClose: handleClose,
           onSave: handleSave
         }
@@ -35878,6 +36659,7 @@ export {
   toggleAsciiSource,
   toggleDirOp,
   transitionLabel,
+  translateDiagramOp,
   updateTimelineEventOp,
   useAsciiDiagramData,
   useBlockNavigator,