@bendyline/squisq-react 1.4.0 → 1.4.1

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/DocPlayer.tsx
-import { Fragment as Fragment3, useRef as useRef6, useState as useState6, useEffect as useEffect7, useCallback as useCallback5, useMemo as useMemo9 } from "react";
+import { Fragment as Fragment3, useRef as useRef7, useState as useState7, useEffect as useEffect8, useCallback as useCallback6, useMemo as useMemo9 } from "react";
 import {
   isTemplateBlock as isTemplateBlock2,
   getCaptionAtTime as getCaptionAtTime2,
@@ -2245,16 +2245,164 @@ function useViewportOrientation() {
   };
 }
 
+// src/hooks/useSlideSwipe.ts
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState5 } from "react";
+var DISTANCE_RATIO = 0.3;
+var FLICK_VELOCITY = 0.5;
+var MIN_FLICK_DISTANCE = 12;
+var RUBBER_BAND = 0.35;
+var DEFAULT_SETTLE_MS = 260;
+function decideSwipe({
+  dx,
+  width,
+  elapsedMs,
+  canNext,
+  canPrev
+}) {
+  const distanceThreshold = width > 0 ? width * DISTANCE_RATIO : Infinity;
+  const velocity = elapsedMs > 0 ? Math.abs(dx) / elapsedMs : 0;
+  const passesDistance = Math.abs(dx) >= distanceThreshold;
+  const passesFlick = velocity >= FLICK_VELOCITY && Math.abs(dx) >= MIN_FLICK_DISTANCE;
+  if (!passesDistance && !passesFlick) return "snap";
+  if (dx < 0) return canNext ? "next" : "snap";
+  if (dx > 0) return canPrev ? "prev" : "snap";
+  return "snap";
+}
+function useSlideSwipe(opts) {
+  const settleMs = opts.settleMs ?? DEFAULT_SETTLE_MS;
+  const [offsetPx, setOffsetPx] = useState5(0);
+  const [phase, setPhase] = useState5("idle");
+  const optsRef = useRef5(opts);
+  optsRef.current = opts;
+  const dragRef = useRef5(null);
+  const phaseRef = useRef5("idle");
+  phaseRef.current = phase;
+  const settleTimer = useRef5(null);
+  const settleRaf = useRef5(null);
+  const clearPending = useCallback4(() => {
+    if (settleTimer.current != null) {
+      clearTimeout(settleTimer.current);
+      settleTimer.current = null;
+    }
+    if (settleRaf.current != null) {
+      cancelAnimationFrame(settleRaf.current);
+      settleRaf.current = null;
+    }
+  }, []);
+  const onPointerDown = useCallback4((e) => {
+    const o = optsRef.current;
+    if (!o.enabled) return;
+    if (phaseRef.current === "settling") return;
+    if (e.pointerType === "mouse" && e.button !== 0) return;
+    const target = e.target;
+    if (target.closest?.("button, a, input, textarea, select, [data-no-swipe]")) return;
+    dragRef.current = {
+      pointerId: e.pointerId,
+      startX: e.clientX,
+      startTime: performance.now(),
+      target
+    };
+    try {
+      target.setPointerCapture?.(e.pointerId);
+    } catch {
+    }
+    setPhase("dragging");
+    setOffsetPx(0);
+  }, []);
+  useEffect7(() => {
+    function currentWidth() {
+      return optsRef.current.containerRef.current?.getBoundingClientRect().width ?? 0;
+    }
+    function endDrag(drag) {
+      dragRef.current = null;
+      try {
+        drag.target.releasePointerCapture?.(drag.pointerId);
+      } catch {
+      }
+    }
+    function settleTo(target, onArrive) {
+      setPhase("settling");
+      settleRaf.current = requestAnimationFrame(() => {
+        settleRaf.current = null;
+        setOffsetPx(target);
+        settleTimer.current = setTimeout(() => {
+          settleTimer.current = null;
+          onArrive?.();
+          setOffsetPx(0);
+          setPhase("idle");
+        }, settleMs);
+      });
+    }
+    function onMove(e) {
+      const drag = dragRef.current;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      const o = optsRef.current;
+      const raw = e.clientX - drag.startX;
+      const blocked = raw > 0 && !o.canGoPrev || raw < 0 && !o.canGoNext;
+      setOffsetPx(blocked ? raw * RUBBER_BAND : raw);
+    }
+    function onUp(e) {
+      const drag = dragRef.current;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      endDrag(drag);
+      const o = optsRef.current;
+      const rawDx = e.clientX - drag.startX;
+      const width = currentWidth();
+      const elapsedMs = performance.now() - drag.startTime;
+      const decision = decideSwipe({
+        dx: rawDx,
+        width,
+        elapsedMs,
+        canNext: o.canGoNext,
+        canPrev: o.canGoPrev
+      });
+      if (decision === "snap") {
+        settleTo(0);
+        return;
+      }
+      const distance = Math.max(width, Math.abs(rawDx));
+      const target = decision === "next" ? -distance : distance;
+      settleTo(target, decision === "next" ? o.onNext : o.onPrev);
+    }
+    function onCancel(e) {
+      const drag = dragRef.current;
+      if (!drag || e.pointerId !== drag.pointerId) return;
+      endDrag(drag);
+      settleTo(0);
+    }
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onCancel);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onCancel);
+    };
+  }, [settleMs]);
+  useEffect7(() => {
+    if (!opts.enabled) {
+      dragRef.current = null;
+      clearPending();
+      setPhase("idle");
+      setOffsetPx(0);
+    }
+  }, [opts.enabled, clearPending]);
+  useEffect7(() => clearPending, [clearPending]);
+  return { offsetPx, phase, onPointerDown };
+}
+
 // src/DocPlayer.tsx
 import {
   expandCoverBlock,
   createTemplateContext,
+  markdownToDoc as markdownToDoc2,
   DEFAULT_THEME as DEFAULT_THEME3,
   VIEWPORT_PRESETS as VIEWPORT_PRESETS4
 } from "@bendyline/squisq/doc";
+import { parseMarkdown as parseMarkdown2 } from "@bendyline/squisq/markdown";
 
 // src/DocProgressBar.tsx
-import { useRef as useRef5, useState as useState5, useCallback as useCallback4 } from "react";
+import { useRef as useRef6, useState as useState6, useCallback as useCallback5 } from "react";
 
 // src/types.ts
 function formatTime(seconds) {
@@ -2272,10 +2420,10 @@ function DocProgressBar({
   expandedBlocks,
   getBlockTitle
 }) {
-  const progressBarRef = useRef5(null);
-  const [hoverPosition, setHoverPosition] = useState5(null);
+  const progressBarRef = useRef6(null);
+  const [hoverPosition, setHoverPosition] = useState6(null);
   const playProgress = state.totalDuration > 0 ? Math.max(0, Math.min(1, state.currentTime / state.totalDuration)) : 0;
-  const handleProgressHover = useCallback4((e) => {
+  const handleProgressHover = useCallback5((e) => {
     const bar = progressBarRef.current;
     if (!bar) return;
     const rect = bar.getBoundingClientRect();
@@ -2283,10 +2431,10 @@ function DocProgressBar({
     const progress = Math.max(0, Math.min(1, x / rect.width));
     setHoverPosition(progress);
   }, []);
-  const handleProgressLeave = useCallback4(() => {
+  const handleProgressLeave = useCallback5(() => {
     setHoverPosition(null);
   }, []);
-  const getBlockAtTimeLocal = useCallback4(
+  const getBlockAtTimeLocal = useCallback5(
     (time) => {
       for (let i = expandedBlocks.length - 1; i >= 0; i--) {
         const blk = expandedBlocks[i];
@@ -2681,8 +2829,14 @@ import {
   resolveFontFamily as resolveFontFamily2
 } from "@bendyline/squisq/schemas";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS3 } from "@bendyline/squisq/schemas";
-import { getLayers, hasTemplate, DEFAULT_THEME as DEFAULT_THEME2, deriveTemplateInputs } from "@bendyline/squisq/doc";
-import { extractPlainText } from "@bendyline/squisq/markdown";
+import {
+  getLayers,
+  hasTemplate,
+  markdownToDoc,
+  DEFAULT_THEME as DEFAULT_THEME2,
+  deriveTemplateInputs
+} from "@bendyline/squisq/doc";
+import { extractPlainText, parseMarkdown } from "@bendyline/squisq/markdown";
 
 // src/MarkdownRenderer.tsx
 import { Fragment as Fragment2 } from "react";
@@ -2737,7 +2891,8 @@ function InlineAudioPlayer({
 
 // src/MarkdownRenderer.tsx
 import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
-function renderInline(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
+var DEFAULT_CTX = { htmlPolicy: "sanitize" };
+function renderInline(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
   return nodes.map((node, i) => {
     const key = `${keyPrefix}i${i}`;
     switch (node.type) {
@@ -2752,17 +2907,17 @@ function renderInline(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
         ] }, j)) }, key);
       }
       case "emphasis":
-        return /* @__PURE__ */ jsx18("em", { className: "squisq-md-em", children: renderInline(node.children, key, htmlPolicy) }, key);
+        return /* @__PURE__ */ jsx18("em", { className: "squisq-md-em", children: renderInline(node.children, key, ctx) }, key);
       case "strong":
-        return /* @__PURE__ */ jsx18("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, htmlPolicy) }, key);
+        return /* @__PURE__ */ jsx18("strong", { className: "squisq-md-strong", children: renderInline(node.children, key, ctx) }, key);
       case "delete":
-        return /* @__PURE__ */ jsx18("del", { className: "squisq-md-del", children: renderInline(node.children, key, htmlPolicy) }, key);
+        return /* @__PURE__ */ jsx18("del", { className: "squisq-md-del", children: renderInline(node.children, key, ctx) }, key);
       case "inlineCode":
         return /* @__PURE__ */ jsx18("code", { className: "squisq-md-inline-code", children: node.value }, key);
       case "link": {
-        const href = sanitizeUrl(node.url, "link");
+        const href = sanitizeUrl(node.url, "link", { extraLinkSchemes: ctx.linkSchemes });
         if (!href) {
-          return /* @__PURE__ */ jsx18("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, htmlPolicy) }, key);
+          return /* @__PURE__ */ jsx18("span", { className: "squisq-md-link squisq-md-link--blocked", children: renderInline(node.children, key, ctx) }, key);
         }
         return /* @__PURE__ */ jsx18(
           "a",
@@ -2772,7 +2927,7 @@ function renderInline(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
             title: node.title ?? void 0,
             target: "_blank",
             rel: "noopener noreferrer",
-            children: renderInline(node.children, key, htmlPolicy)
+            children: renderInline(node.children, key, ctx)
           },
           key
         );
@@ -2784,8 +2939,8 @@ function renderInline(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
       case "inlineMath":
         return /* @__PURE__ */ jsx18("code", { className: "squisq-md-inline-math", children: node.value }, key);
       case "htmlInline":
-        if (htmlPolicy === "strip") return null;
-        if (htmlPolicy === "trusted" && !containsMediaTag(node.htmlChildren) && !containsDangerousTag(node.htmlChildren) && !hasDangerousRawHtml(node.rawHtml)) {
+        if (ctx.htmlPolicy === "strip") return null;
+        if (ctx.htmlPolicy === "trusted" && !containsMediaTag(node.htmlChildren) && !containsDangerousTag(node.htmlChildren) && !hasDangerousRawHtml(node.rawHtml)) {
           return /* @__PURE__ */ jsx18(
             "span",
             {
@@ -2795,7 +2950,7 @@ function renderInline(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
             key
           );
         }
-        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, htmlPolicy), `${key}h`) }, key);
+        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-html-inline", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`) }, key);
       case "footnoteReference":
         return /* @__PURE__ */ jsx18("sup", { className: "squisq-md-footnote-ref", children: /* @__PURE__ */ jsxs11("a", { href: `#fn-${node.identifier}`, children: [
           "[",
@@ -2803,7 +2958,7 @@ function renderInline(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
           "]"
         ] }) }, key);
       case "linkReference":
-        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, htmlPolicy) }, key);
+        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-link-ref", children: renderInline(node.children, key, ctx) }, key);
       case "imageReference":
         return /* @__PURE__ */ jsxs11("span", { className: "squisq-md-image-ref", children: [
           "[",
@@ -2811,7 +2966,7 @@ function renderInline(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
           "]"
         ] }, key);
       case "textDirective":
-        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, htmlPolicy) }, key);
+        return /* @__PURE__ */ jsx18("span", { className: "squisq-md-text-directive", "data-directive": node.name, children: renderInline(node.children, key, ctx) }, key);
       case "mention":
         return /* @__PURE__ */ jsxs11(
           "span",
@@ -2833,30 +2988,30 @@ function renderInline(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
     }
   });
 }
-function renderBlock(node, key, htmlPolicy = "sanitize") {
+function renderBlock(node, key, ctx = DEFAULT_CTX) {
   switch (node.type) {
     case "paragraph":
-      return /* @__PURE__ */ jsx18("p", { className: "squisq-md-p", children: renderInline(node.children, key, htmlPolicy) }, key);
+      return /* @__PURE__ */ jsx18("p", { className: "squisq-md-p", children: renderInline(node.children, key, ctx) }, key);
     case "heading": {
       const Tag = `h${node.depth}`;
-      return /* @__PURE__ */ jsx18(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, htmlPolicy) }, key);
+      return /* @__PURE__ */ jsx18(Tag, { className: `squisq-md-heading squisq-md-h${node.depth}`, children: renderInline(node.children, key, ctx) }, key);
     }
     case "blockquote":
-      return /* @__PURE__ */ jsx18("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, htmlPolicy) }, key);
+      return /* @__PURE__ */ jsx18("blockquote", { className: "squisq-md-blockquote", children: renderBlocks(node.children, key, ctx) }, key);
     case "list":
       if (node.ordered) {
-        return /* @__PURE__ */ jsx18("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, htmlPolicy)) }, key);
+        return /* @__PURE__ */ jsx18("ol", { className: "squisq-md-list squisq-md-ol", start: node.start ?? void 0, children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
       }
-      return /* @__PURE__ */ jsx18("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, htmlPolicy)) }, key);
+      return /* @__PURE__ */ jsx18("ul", { className: "squisq-md-list squisq-md-ul", children: node.children.map((item, i) => renderListItem(item, `${key}li${i}`, ctx)) }, key);
     case "code":
       return /* @__PURE__ */ jsx18("pre", { className: "squisq-md-code-block", children: /* @__PURE__ */ jsx18("code", { className: node.lang ? `language-${node.lang}` : void 0, children: node.value }) }, key);
     case "thematicBreak":
       return /* @__PURE__ */ jsx18("hr", { className: "squisq-md-hr" }, key);
     case "table":
-      return renderTable(node.children, node.align, key, htmlPolicy);
+      return renderTable(node.children, node.align, key, ctx);
     case "htmlBlock":
-      if (htmlPolicy === "strip") return null;
-      if (htmlPolicy === "trusted" && !containsMediaTag(node.htmlChildren) && !containsDangerousTag(node.htmlChildren) && !hasDangerousRawHtml(node.rawHtml)) {
+      if (ctx.htmlPolicy === "strip") return null;
+      if (ctx.htmlPolicy === "trusted" && !containsMediaTag(node.htmlChildren) && !containsDangerousTag(node.htmlChildren) && !hasDangerousRawHtml(node.rawHtml)) {
         return /* @__PURE__ */ jsx18(
           "div",
           {
@@ -2866,7 +3021,7 @@ function renderBlock(node, key, htmlPolicy = "sanitize") {
           key
         );
       }
-      return /* @__PURE__ */ jsx18("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, htmlPolicy), `${key}h`) }, key);
+      return /* @__PURE__ */ jsx18("div", { className: "squisq-md-html-block", children: renderHtmlNodes(resolveHtmlNodes(node.htmlChildren, ctx.htmlPolicy), `${key}h`) }, key);
     case "math":
       return /* @__PURE__ */ jsx18("pre", { className: "squisq-md-math-block", children: /* @__PURE__ */ jsx18("code", { children: node.value }) }, key);
     case "definition":
@@ -2874,7 +3029,7 @@ function renderBlock(node, key, htmlPolicy = "sanitize") {
     case "footnoteDefinition":
       return /* @__PURE__ */ jsxs11("div", { className: "squisq-md-footnote-def", id: `fn-${node.identifier}`, children: [
         /* @__PURE__ */ jsx18("sup", { children: node.label ?? node.identifier }),
-        renderBlocks(node.children, key, htmlPolicy)
+        renderBlocks(node.children, key, ctx)
       ] }, key);
     case "containerDirective":
       return /* @__PURE__ */ jsxs11(
@@ -2884,7 +3039,7 @@ function renderBlock(node, key, htmlPolicy = "sanitize") {
           "data-directive": node.name,
           children: [
             node.label && /* @__PURE__ */ jsx18("div", { className: "squisq-md-directive-label", children: node.label }),
-            renderBlocks(node.children, key, htmlPolicy)
+            renderBlocks(node.children, key, ctx)
           ]
         },
         key
@@ -2895,29 +3050,29 @@ function renderBlock(node, key, htmlPolicy = "sanitize") {
         {
           className: `squisq-md-directive squisq-md-directive-${node.name}`,
           "data-directive": node.name,
-          children: renderInline(node.children, key, htmlPolicy)
+          children: renderInline(node.children, key, ctx)
         },
         key
       );
     case "definitionList":
       return /* @__PURE__ */ jsx18("dl", { className: "squisq-md-dl", children: node.children.map((child, i) => {
         if (child.type === "definitionTerm") {
-          return /* @__PURE__ */ jsx18("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, htmlPolicy) }, `${key}dt${i}`);
+          return /* @__PURE__ */ jsx18("dt", { className: "squisq-md-dt", children: renderInline(child.children, `${key}dt${i}`, ctx) }, `${key}dt${i}`);
         }
-        return /* @__PURE__ */ jsx18("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, htmlPolicy) }, `${key}dd${i}`);
+        return /* @__PURE__ */ jsx18("dd", { className: "squisq-md-dd", children: renderBlocks(child.children, `${key}dd${i}`, ctx) }, `${key}dd${i}`);
       }) }, key);
     default:
       return null;
   }
 }
-function renderListItem(item, key, htmlPolicy = "sanitize") {
+function renderListItem(item, key, ctx = DEFAULT_CTX) {
   const isTask = item.checked !== null && item.checked !== void 0;
   return /* @__PURE__ */ jsxs11("li", { className: `squisq-md-li${isTask ? " squisq-md-task" : ""}`, children: [
     isTask && /* @__PURE__ */ jsx18("input", { type: "checkbox", checked: !!item.checked, readOnly: true, className: "squisq-md-checkbox" }),
-    renderBlocks(item.children, key, htmlPolicy)
+    renderBlocks(item.children, key, ctx)
   ] }, key);
 }
-function renderTable(rows, align, key, htmlPolicy = "sanitize") {
+function renderTable(rows, align, key, ctx = DEFAULT_CTX) {
   const [headerRow, ...bodyRows] = rows;
   return /* @__PURE__ */ jsxs11("table", { className: "squisq-md-table", children: [
     headerRow && /* @__PURE__ */ jsx18("thead", { children: /* @__PURE__ */ jsx18("tr", { children: headerRow.children.map((cell, ci) => /* @__PURE__ */ jsx18(
@@ -2925,7 +3080,7 @@ function renderTable(rows, align, key, htmlPolicy = "sanitize") {
       {
         className: "squisq-md-th",
         style: align?.[ci] ? { textAlign: align[ci] } : void 0,
-        children: renderInline(cell.children, `${key}th${ci}`, htmlPolicy)
+        children: renderInline(cell.children, `${key}th${ci}`, ctx)
       },
       `${key}th${ci}`
     )) }) }),
@@ -2934,14 +3089,14 @@ function renderTable(rows, align, key, htmlPolicy = "sanitize") {
       {
         className: "squisq-md-td",
         style: align?.[ci] ? { textAlign: align[ci] } : void 0,
-        children: renderInline(cell.children, `${key}td${ri}-${ci}`, htmlPolicy)
+        children: renderInline(cell.children, `${key}td${ri}-${ci}`, ctx)
       },
       `${key}td${ri}-${ci}`
     )) }, `${key}tr${ri}`)) })
   ] }, key);
 }
-function renderBlocks(nodes, keyPrefix = "", htmlPolicy = "sanitize") {
-  return nodes.map((node, i) => renderBlock(node, `${keyPrefix}b${i}`, htmlPolicy));
+function renderBlocks(nodes, keyPrefix = "", ctx = DEFAULT_CTX) {
+  return nodes.map((node, i) => renderBlock(node, `${keyPrefix}b${i}`, ctx));
 }
 function MdImage({ src, alt, title }) {
   const safeSrc = sanitizeUrl(src, "media");
@@ -3070,18 +3225,29 @@ function renderHtmlNodes(nodes, keyPrefix) {
 function MarkdownRenderer({
   nodes,
   className,
-  htmlPolicy = "sanitize"
+  htmlPolicy = "sanitize",
+  linkSchemes
 }) {
   if (!nodes || nodes.length === 0) return null;
-  return /* @__PURE__ */ jsx18("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", htmlPolicy) });
+  return /* @__PURE__ */ jsx18("div", { className: `squisq-md ${className || ""}`, children: renderBlocks(nodes, "", { htmlPolicy, linkSchemes }) });
 }
 
 // src/LinearDocView.tsx
 import { jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+var warnedUnknownTemplates = /* @__PURE__ */ new Set();
 function isAnnotatedBlock(block) {
   const annotation = block.sourceHeading?.templateAnnotation;
-  if (!annotation) return false;
-  return !!annotation.template && hasTemplate(annotation.template);
+  if (!annotation?.template) return false;
+  if (!hasTemplate(annotation.template)) {
+    if (!warnedUnknownTemplates.has(annotation.template)) {
+      warnedUnknownTemplates.add(annotation.template);
+      console.warn(
+        `[squisq] Unknown template "${annotation.template}" \u2014 rendering the block as plain markdown.`
+      );
+    }
+    return false;
+  }
+  return true;
 }
 function countAll(blocks) {
   let count = 0;
@@ -3173,6 +3339,7 @@ function BlockSection({ block, basePath, viewport, renderContext, blockIndex })
 }
 function LinearDocView({
   doc,
+  markdown,
   basePath = "/",
   viewport,
   className,
@@ -3182,7 +3349,15 @@ function LinearDocView({
   imageDisplayMode = "inline"
 }) {
   const activeViewport = viewport ?? VIEWPORT_PRESETS3.landscape;
-  const totalBlocks = useMemo8(() => countAll(doc.blocks), [doc.blocks]);
+  const markdownDoc = useMemo8(
+    () => !doc && markdown !== void 0 ? markdownToDoc(parseMarkdown(markdown)) : void 0,
+    [doc, markdown]
+  );
+  const resolvedDoc = doc ?? markdownDoc;
+  const totalBlocks = useMemo8(
+    () => resolvedDoc ? countAll(resolvedDoc.blocks) : 0,
+    [resolvedDoc]
+  );
   const autoSurface = useAutoSurface(surface === "auto");
   const resolvedSurface = surface === "auto" ? autoSurface : surface;
   const renderContext = useMemo8(() => {
@@ -3198,6 +3373,9 @@ function LinearDocView({
     };
   }, [activeViewport, totalBlocks, theme, resolvedSurface]);
   const activeTheme = renderContext.theme;
+  if (!resolvedDoc) {
+    return /* @__PURE__ */ jsx19("div", { className: `squisq-linear squisq-linear--empty ${className || ""}` });
+  }
   const bgColor = activeTheme.colors.background;
   const textColor = activeTheme.colors.text;
   const mutedColor = activeTheme.colors.textMuted;
@@ -3358,7 +3536,7 @@ function LinearDocView({
             background: color-mix(in srgb, var(--squisq-linear-primary) 8%, transparent);
           }
         ` }),
-            doc.blocks.map((block, i) => /* @__PURE__ */ jsx19(
+            resolvedDoc.blocks.map((block, i) => /* @__PURE__ */ jsx19(
               BlockSection,
               {
                 block,
@@ -3395,9 +3573,9 @@ var SMALL_WORDS = /* @__PURE__ */ new Set([
   "by",
   "is"
 ]);
-function buildSegmentTitleMap(script) {
+function buildSegmentTitleMap(doc) {
   const map = /* @__PURE__ */ new Map();
-  for (const block of script.blocks) {
+  for (const block of doc.blocks) {
     if (isTemplateBlock2(block) && block.template === "sectionHeader" && "title" in block) {
       const segIdx = block.audioSegment;
       if (!map.has(segIdx)) {
@@ -3405,9 +3583,9 @@ function buildSegmentTitleMap(script) {
       }
     }
   }
-  for (let i = 0; i < script.audio.segments.length; i++) {
+  for (let i = 0; i < doc.audio.segments.length; i++) {
     if (!map.has(i)) {
-      const name = script.audio.segments[i].name;
+      const name = doc.audio.segments[i].name;
       if (name === "intro" || name.includes("intro")) {
         map.set(i, "Introduction");
       } else if (name === "flight-context" || name.includes("flight-context")) {
@@ -3423,14 +3601,34 @@ function buildSegmentTitleMap(script) {
   }
   return map;
 }
-function DocPlayer({
-  script,
-  basePath,
+function isDevEnvironment() {
+  try {
+    return typeof process !== "undefined" && process.env.NODE_ENV !== "production";
+  } catch {
+    return false;
+  }
+}
+var warnedMissingStyles = false;
+function DocPlayer(props) {
+  const { doc, markdown } = props;
+  const markdownDoc = useMemo9(
+    () => !doc && markdown !== void 0 ? markdownToDoc2(parseMarkdown2(markdown)) : void 0,
+    [doc, markdown]
+  );
+  const resolvedDoc = doc ?? markdownDoc;
+  if (!resolvedDoc) {
+    return /* @__PURE__ */ jsx20("div", { className: "doc-player doc-player--empty" });
+  }
+  return /* @__PURE__ */ jsx20(DocPlayerContent, { ...props, doc: resolvedDoc });
+}
+function DocPlayerContent({
+  doc,
+  basePath = ".",
   renderMode = false,
   autoPlay = false,
   onEnded,
   onTimeUpdate,
-  audioProvider: externalAudioProvider,
+  audioController: externalAudioController,
   showControls = true,
   showScrubber = false,
   muted = false,
@@ -3445,14 +3643,15 @@ function DocPlayer({
   displayMode = "video",
   theme,
   surface,
-  captionStyle = "standard"
+  captionStyle = "standard",
+  enableSwipe = true
 }) {
   const isSlideshowMode = displayMode === "slideshow";
   const isLinearMode = displayMode === "linear";
-  const audioRef = useRef6(null);
-  const containerRef = useRef6(null);
-  const [tapFeedback, setTapFeedback] = useState6(null);
-  const tapFeedbackTimer = useRef6();
+  const audioRef = useRef7(null);
+  const containerRef = useRef7(null);
+  const [tapFeedback, setTapFeedback] = useState7(null);
+  const tapFeedbackTimer = useRef7();
   const { viewport, orientation } = useViewportOrientation();
   const activeViewport = forceViewport || (renderMode ? VIEWPORT_PRESETS4.landscape : viewport);
   const isDebugMode = useMemo9(() => {
@@ -3460,8 +3659,20 @@ function DocPlayer({
     const params = new URLSearchParams(window.location.search);
     return params.get("debug") === "true";
   }, []);
-  const internalAudio = useAudioSync(audioRef, script.audio, basePath);
-  const audio = externalAudioProvider || internalAudio;
+  const internalAudio = useAudioSync(audioRef, doc.audio, basePath);
+  const audio = externalAudioController || internalAudio;
+  useEffect8(() => {
+    if (warnedMissingStyles || !isDevEnvironment()) return;
+    const el = containerRef.current;
+    if (!el || typeof getComputedStyle !== "function") return;
+    const value = getComputedStyle(el).getPropertyValue("--squisq-styles-loaded");
+    if (!value.trim()) {
+      warnedMissingStyles = true;
+      console.warn(
+        '[squisq] @bendyline/squisq-react/styles is not loaded \u2014 import "@bendyline/squisq-react/styles"'
+      );
+    }
+  }, []);
   const {
     currentTime,
     isPlaying,
@@ -3478,13 +3689,13 @@ function DocPlayer({
     skipToSegment: _skipToSegment,
     restart
   } = audio;
-  const mediaSchedule = useMemo9(() => resolveMediaSchedule(script), [script]);
-  const currentTimeRef = useRef6(currentTime);
+  const mediaSchedule = useMemo9(() => resolveMediaSchedule(doc), [doc]);
+  const currentTimeRef = useRef7(currentTime);
   currentTimeRef.current = currentTime;
-  const totalDurationRef = useRef6(totalDuration);
+  const totalDurationRef = useRef7(totalDuration);
   totalDurationRef.current = totalDuration;
-  const expandedBlocksLenRef = useRef6(0);
-  const handleContainerClick = useCallback5(
+  const expandedBlocksLenRef = useRef7(0);
+  const handleContainerClick = useCallback6(
     (e) => {
       if (renderMode || isSlideshowMode || isLinearMode) return;
       const target = e.target;
@@ -3518,9 +3729,9 @@ function DocPlayer({
     nextBlock: _nextBlock,
     prevBlock: _prevBlock,
     blocks: expandedBlocks
-  } = useDocPlayback(script, currentTime, activeViewport, renderMode, effectiveTheme);
+  } = useDocPlayback(doc, currentTime, activeViewport, renderMode, effectiveTheme);
   const coverBlock = useMemo9(() => {
-    const startBlockConfig = script.startBlock;
+    const startBlockConfig = doc.startBlock;
     if (!startBlockConfig) return null;
     const context = createTemplateContext(effectiveTheme, 0, 1, activeViewport);
     const layers = expandCoverBlock(startBlockConfig, context);
@@ -3533,15 +3744,15 @@ function DocPlayer({
       audioSegment: -1,
       layers
     };
-  }, [script.startBlock, activeViewport, effectiveTheme]);
-  const [coverForced, setCoverForced] = useState6(false);
-  const [coverGraceActive, setCoverGraceActive] = useState6(false);
-  const coverGraceTimer = useRef6();
-  const coverWasShowing = useRef6(false);
-  const hasPlayedOnce = useRef6(false);
+  }, [doc.startBlock, activeViewport, effectiveTheme]);
+  const [coverForced, setCoverForced] = useState7(false);
+  const [coverGraceActive, setCoverGraceActive] = useState7(false);
+  const coverGraceTimer = useRef7();
+  const coverWasShowing = useRef7(false);
+  const hasPlayedOnce = useRef7(false);
   const atRest = !!(coverBlock && !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
   if (atRest) coverWasShowing.current = true;
-  useEffect7(() => {
+  useEffect8(() => {
     if (isPlaying && coverWasShowing.current && coverBlock && !renderMode) {
       coverWasShowing.current = false;
       hasPlayedOnce.current = true;
@@ -3549,24 +3760,24 @@ function DocPlayer({
       coverGraceTimer.current = setTimeout(() => setCoverGraceActive(false), 3e3);
     }
   }, [isPlaying, coverBlock, renderMode]);
-  useEffect7(() => () => clearTimeout(coverGraceTimer.current), []);
+  useEffect8(() => () => clearTimeout(coverGraceTimer.current), []);
   const showCoverBlock = !isSlideshowMode && !isLinearMode && coverBlock && (coverForced || coverGraceActive || !isPlaying && currentTime === 0 && !hasPlayedOnce.current && !renderMode && !autoPlay);
-  const hasAutoPlayed = useRef6(false);
-  useEffect7(() => {
+  const hasAutoPlayed = useRef7(false);
+  useEffect8(() => {
     if (isAudioReady && autoPlay && !hasAutoPlayed.current) {
       hasAutoPlayed.current = true;
       play();
     }
   }, [isAudioReady, autoPlay, play]);
-  useEffect7(() => {
+  useEffect8(() => {
     onTimeUpdate?.(currentTime);
   }, [currentTime, onTimeUpdate]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (isEnded) {
       onEnded?.();
     }
   }, [isEnded, onEnded]);
-  useEffect7(() => {
+  useEffect8(() => {
     if ((renderMode || isDebugMode) && typeof window !== "undefined") {
       const w = window;
       w.seekTo = (time) => {
@@ -3645,7 +3856,7 @@ function DocPlayer({
         });
       };
       w.getDuration = () => {
-        const mediaDuration = getDocPlaybackDuration(script);
+        const mediaDuration = getDocPlaybackDuration(doc);
         if (totalDuration > 0) return Math.max(totalDuration, mediaDuration);
         return mediaDuration;
       };
@@ -3655,20 +3866,20 @@ function DocPlayer({
         startTime: s.startTime,
         duration: s.duration
       }));
-      w.getAudioSegments = () => script.audio.segments.map((seg) => ({
+      w.getAudioSegments = () => doc.audio.segments.map((seg) => ({
         src: seg.src,
         name: seg.name,
         duration: seg.duration,
         startTime: seg.startTime
       }));
-      w.getCaptions = () => script.captions?.phrases?.map((p) => ({
+      w.getCaptions = () => doc.captions?.phrases?.map((p) => ({
         text: p.text,
         startTime: p.startTime,
         endTime: p.endTime
       })) || [];
       w.getChapters = () => {
-        const titleMap = buildSegmentTitleMap(script);
-        return script.audio.segments.map((seg, i) => ({
+        const titleMap = buildSegmentTitleMap(doc);
+        return doc.audio.segments.map((seg, i) => ({
           title: titleMap.get(i) || seg.name,
           startTime: seg.startTime,
           duration: seg.duration
@@ -3700,25 +3911,28 @@ function DocPlayer({
     };
   }, [renderMode, isDebugMode, seekTo, totalDuration, expandedBlocks, coverBlock]);
   const defaultMode = captionsEnabledProp === false ? "off" : captionStyle || "standard";
-  const [captionMode, setCaptionMode] = useState6(defaultMode);
+  const [captionMode, setCaptionMode] = useState7(defaultMode);
+  useEffect8(() => {
+    setCaptionMode(defaultMode);
+  }, [defaultMode]);
   const captionsEnabled = captionMode !== "off";
   const activeCaptionStyle = captionMode === "social" ? "social" : "standard";
-  const setCaptionsEnabled = useCallback5(
+  const setCaptionsEnabled = useCallback6(
     (enabled) => {
       setCaptionMode(enabled ? captionStyle || "standard" : "off");
       onCaptionsToggle?.(enabled);
     },
     [onCaptionsToggle, captionStyle]
   );
-  const cycleCaptionMode = useCallback5(() => {
+  const cycleCaptionMode = useCallback6(() => {
     setCaptionMode((prev) => {
       const next = prev === "off" ? "standard" : prev === "standard" ? "social" : "off";
       onCaptionsToggle?.(next !== "off");
       return next;
     });
   }, [onCaptionsToggle]);
-  const hasCaptions = script.captions && script.captions.phrases.length > 0;
-  const segmentTitleMap = useMemo9(() => buildSegmentTitleMap(script), [script]);
+  const hasCaptions = doc.captions && doc.captions.phrases.length > 0;
+  const segmentTitleMap = useMemo9(() => buildSegmentTitleMap(doc), [doc]);
   const playbackState = useMemo9(
     () => ({
       isPlaying,
@@ -3732,10 +3946,10 @@ function DocPlayer({
       captionMode,
       isFullscreen,
       currentSegmentIndex: currentSegment,
-      currentSegmentName: segmentTitleMap.get(currentSegment) ?? script.audio.segments[currentSegment]?.name ?? null,
+      currentSegmentName: segmentTitleMap.get(currentSegment) ?? doc.audio.segments[currentSegment]?.name ?? null,
       currentBlock: currentBlock ?? null
     }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- script.audio.segments is stable within a given script
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- doc.audio.segments is stable within a given doc
     [
       isPlaying,
       currentTime,
@@ -3795,13 +4009,22 @@ function DocPlayer({
     }),
     [currentBlockIndex, expandedBlocks, seekTo, pause]
   );
-  useEffect7(() => {
+  const swipeEnabled = isSlideshowMode && !isLinearMode && !renderMode && enableSwipe;
+  const swipe = useSlideSwipe({
+    enabled: swipeEnabled,
+    containerRef,
+    canGoNext: currentBlockIndex < expandedBlocks.length - 1,
+    canGoPrev: currentBlockIndex > 0,
+    onNext: slideNavActions.nextSlide,
+    onPrev: slideNavActions.prevSlide
+  });
+  useEffect8(() => {
     onPlaybackStateChange?.(playbackState);
   }, [playbackState, onPlaybackStateChange]);
-  useEffect7(() => {
+  useEffect8(() => {
     onControlsReady?.({ play, pause, ...playbackActions });
   }, [play, pause, playbackActions, onControlsReady]);
-  const getBlockTitle = useCallback5((block) => {
+  const getBlockTitle = useCallback6((block) => {
     const docBlock = block;
     if (isTemplateBlock2(docBlock)) {
       const props = docBlock;
@@ -3840,13 +4063,13 @@ function DocPlayer({
       };
     });
   }, [expandedBlocks, totalDuration, getBlockTitle]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (blockMarkers.length > 0) {
       onBlockMarkers?.(blockMarkers);
     }
   }, [blockMarkers, onBlockMarkers]);
   expandedBlocksLenRef.current = expandedBlocks.length;
-  const handleKeyDown = useCallback5(
+  const handleKeyDown = useCallback6(
     (e) => {
       const activeEl = document.activeElement;
       if (activeEl && (activeEl.tagName === "INPUT" || activeEl.tagName === "TEXTAREA" || activeEl.tagName === "SELECT")) {
@@ -3892,7 +4115,7 @@ function DocPlayer({
     },
     [isSlideshowMode, isLinearMode, toggle, seekTo, slideNavActions]
   );
-  useEffect7(() => {
+  useEffect8(() => {
     if (renderMode) return;
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
@@ -3912,7 +4135,7 @@ function DocPlayer({
         children: /* @__PURE__ */ jsx20(
           LinearDocView,
           {
-            doc: script,
+            doc,
             basePath,
             viewport: activeViewport,
             theme,
@@ -3926,15 +4149,19 @@ function DocPlayer({
     "div",
     {
       ref: containerRef,
-      className: "doc-player",
+      className: `doc-player${swipeEnabled ? " doc-player--swipe" : ""}${swipe.phase === "dragging" ? " doc-player--grabbing" : ""}`,
       onClick: handleContainerClick,
+      onPointerDown: swipe.onPointerDown,
       style: {
         position: "relative",
         width: "100%",
         aspectRatio: `${activeViewport.width} / ${activeViewport.height}`,
         margin: "0 auto",
         overflow: "hidden",
-        cursor: renderMode ? void 0 : "pointer"
+        // Swipe uses the grab/grabbing cursor via CSS classes; let vertical page
+        // scroll through on touch while we own horizontal drags.
+        cursor: renderMode || swipeEnabled ? void 0 : "pointer",
+        touchAction: swipeEnabled ? "pan-y" : void 0
       },
       children: [
         /* @__PURE__ */ jsx20("audio", { ref: audioRef, preload: "auto", muted }),
@@ -3974,21 +4201,29 @@ function DocPlayer({
               viewport: activeViewport
             }
           ) }, previousBlock.id),
-          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx20("div", { className: "doc-player__block doc-player__block--active", children: /* @__PURE__ */ jsx20(
-            BlockRenderer,
+          !showCoverBlock && currentBlock && /* @__PURE__ */ jsx20(
+            "div",
             {
-              block: currentBlock,
-              blockTime,
-              basePath,
-              isEntering,
-              viewport: activeViewport,
-              isPlaying
-            }
-          ) }, currentBlock.id),
+              className: `doc-player__block doc-player__block--active${swipe.phase !== "idle" ? ` doc-player__block--${swipe.phase}` : ""}`,
+              style: swipe.phase !== "idle" ? { transform: `translateX(${swipe.offsetPx}px)` } : void 0,
+              children: /* @__PURE__ */ jsx20(
+                BlockRenderer,
+                {
+                  block: currentBlock,
+                  blockTime,
+                  basePath,
+                  isEntering,
+                  viewport: activeViewport,
+                  isPlaying
+                }
+              )
+            },
+            currentBlock.id
+          ),
           hasCaptions && (renderMode ? captionsEnabled : true) && /* @__PURE__ */ jsx20(
             CaptionOverlay,
             {
-              captions: script.captions,
+              captions: doc.captions,
               currentTime,
               enabled: captionsEnabled && (renderMode || isPlaying || currentTime > 0),
               fontSize: 16,
@@ -4049,9 +4284,8 @@ function DocPlayer({
                   /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
                     "(progress: ",
                     (docProgress * 100).toFixed(1),
-                    "%, scriptDur:",
-                    " ",
-                    script.duration.toFixed(1),
+                    "%, scriptDur: ",
+                    doc.duration.toFixed(1),
                     ")"
                   ] })
                 ] }),
@@ -4069,11 +4303,11 @@ function DocPlayer({
                   " ",
                   currentSegment,
                   "/",
-                  script.audio.segments.length - 1,
+                  doc.audio.segments.length - 1,
                   " ",
                   /* @__PURE__ */ jsxs13("span", { style: { color: "#666" }, children: [
                     "(",
-                    script.audio.segments[currentSegment]?.name || "none",
+                    doc.audio.segments[currentSegment]?.name || "none",
                     ")"
                   ] })
                 ] }),
@@ -4095,13 +4329,13 @@ function DocPlayer({
                   showCoverBlock && /* @__PURE__ */ jsx20("span", { style: { color: "#60a5fa" }, children: " (cover)" })
                 ] }),
                 hasCaptions && (() => {
-                  const debugPhrase = getCaptionAtTime2(script.captions, currentTime);
+                  const debugPhrase = getCaptionAtTime2(doc.captions, currentTime);
                   const debugEnabled = captionsEnabled && (isPlaying || currentTime > 0);
                   return /* @__PURE__ */ jsxs13(Fragment3, { children: [
                     /* @__PURE__ */ jsxs13("div", { children: [
                       /* @__PURE__ */ jsx20("span", { style: { color: "#888" }, children: "captions:" }),
                       " ",
-                      script.captions?.phrases.length || 0,
+                      doc.captions?.phrases.length || 0,
                       " phrases",
                       " ",
                       /* @__PURE__ */ jsxs13("span", { style: { color: captionsEnabled ? "#4ade80" : "#666" }, children: [
@@ -4331,7 +4565,7 @@ function DocControlsSidebar({ state, actions }) {
 }
 
 // src/DocPlayerWithSidebar.tsx
-import { useRef as useRef7, useState as useState7, useCallback as useCallback6, useEffect as useEffect8 } from "react";
+import { useRef as useRef8, useState as useState8, useCallback as useCallback7, useEffect as useEffect9 } from "react";
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var DEFAULT_STATE = {
   isPlaying: false,
@@ -4348,24 +4582,25 @@ var DEFAULT_STATE = {
   currentBlock: null
 };
 function DocPlayerWithSidebar({
-  script,
+  doc,
   basePath,
   autoPlay = false,
   onEnded,
   onTimeUpdate,
-  audioProvider,
+  audioController,
   muted,
   captionsEnabled,
   isFullscreen,
   onFullscreenToggle,
   forceViewport,
-  onPlayingChange
+  onPlayingChange,
+  theme
 }) {
-  const stateRef = useRef7(DEFAULT_STATE);
-  const actionsRef = useRef7(null);
-  const wasPlayingRef = useRef7(false);
-  const [, setTick] = useState7(0);
-  const handleStateChange = useCallback6(
+  const stateRef = useRef8(DEFAULT_STATE);
+  const actionsRef = useRef8(null);
+  const wasPlayingRef = useRef8(false);
+  const [, setTick] = useState8(0);
+  const handleStateChange = useCallback7(
     (state) => {
       stateRef.current = state;
       if (onPlayingChange && state.isPlaying !== wasPlayingRef.current) {
@@ -4375,7 +4610,7 @@ function DocPlayerWithSidebar({
     },
     [onPlayingChange]
   );
-  const handleControlsReady = useCallback6(
+  const handleControlsReady = useCallback7(
     (controls) => {
       const isFirst = !actionsRef.current;
       actionsRef.current = controls;
@@ -4383,7 +4618,7 @@ function DocPlayerWithSidebar({
     },
     []
   );
-  useEffect8(() => {
+  useEffect9(() => {
     const interval = setInterval(() => {
       setTick((t) => t + 1);
     }, 250);
@@ -4393,12 +4628,13 @@ function DocPlayerWithSidebar({
     /* @__PURE__ */ jsx23("div", { className: "doc-player-sidebar-layout__video", children: /* @__PURE__ */ jsx23(
       DocPlayer,
       {
-        script,
+        doc,
+        theme,
         basePath,
         autoPlay,
         onEnded,
         onTimeUpdate,
-        audioProvider,
+        audioController,
         muted,
         captionsEnabled,
         showControls: isFullscreen,
@@ -4416,36 +4652,15 @@ function DocPlayerWithSidebar({
 
 // src/jsonView/useJsonViewTokens.ts
 import { useMemo as useMemo10 } from "react";
-import {
-  applySurface as applySurface3,
-  resolveFontFamily as resolveFontFamily3
-} from "@bendyline/squisq/schemas";
-import { DEFAULT_THEME as DEFAULT_THEME4 } from "@bendyline/squisq/doc";
+import { buildJsonFormTokens, resolveJsonFormTheme } from "@bendyline/squisq/jsonForm";
 function useJsonViewTokens(theme, surface) {
   const auto = useAutoSurface(surface === "auto");
   const effectiveSurface = surface === "auto" ? auto : surface ?? void 0;
   return useMemo10(() => {
-    const baseTheme = theme ?? DEFAULT_THEME4;
-    const finalTheme = effectiveSurface ? applySurface3(baseTheme, effectiveSurface) : baseTheme;
-    const titleFont = resolveFontFamily3(finalTheme.typography.titleFont, "system-ui, sans-serif");
-    const bodyFont = resolveFontFamily3(finalTheme.typography.bodyFont, "system-ui, sans-serif");
-    const monoFont = resolveFontFamily3(
-      finalTheme.typography.monoFont,
-      "ui-monospace, Consolas, monospace"
-    );
-    const style = {
-      ["--squisq-json-bg"]: finalTheme.colors.background,
-      ["--squisq-json-text"]: finalTheme.colors.text,
-      ["--squisq-json-muted"]: finalTheme.colors.textMuted,
-      ["--squisq-json-primary"]: finalTheme.colors.primary,
-      ["--squisq-json-accent"]: finalTheme.colors.secondary,
-      ["--squisq-json-border"]: `color-mix(in srgb, ${finalTheme.colors.textMuted} 35%, transparent)`,
-      ["--squisq-json-title-font"]: titleFont,
-      ["--squisq-json-body-font"]: bodyFont,
-      ["--squisq-json-mono-font"]: monoFont,
-      ["--squisq-json-radius"]: `${finalTheme.style.borderRadius ?? 8}px`
-    };
-    return { style, theme: finalTheme };
+    const style = buildJsonFormTokens(theme, effectiveSurface, {
+      prefix: "--squisq-json"
+    });
+    return { style, theme: resolveJsonFormTheme(theme, effectiveSurface) };
   }, [theme, effectiveSurface]);
 }
 
@@ -4461,7 +4676,7 @@ import { Fragment as Fragment4, useMemo as useMemo11 } from "react";
 import {
   arrayItemKind
 } from "@bendyline/squisq/jsonForm";
-import { parseMarkdown } from "@bendyline/squisq/markdown";
+import { parseMarkdown as parseMarkdown3 } from "@bendyline/squisq/markdown";
 import { Fragment as Fragment5, jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 function TextViewer({ value }) {
   if (value === void 0 || value === null || value === "") {
@@ -4479,7 +4694,7 @@ function RichTextViewer({ value }) {
   const nodes = useMemo11(() => {
     if (typeof value !== "string" || value === "") return null;
     try {
-      const doc = parseMarkdown(value);
+      const doc = parseMarkdown3(value);
       return doc.children;
     } catch {
       return null;