@bendyline/squisq-editor-react 2.5.0 → 2.6.0

package/dist/{chunk-DCMJXDQY.js → chunk-5FG3NAPH.js}

@@ -15,7 +15,7 @@ import {
 import {
   RecorderPanel,
   useModalDialog
-} from "./chunk-ZSQN6IO7.js";
+} from "./chunk-JUAQQTJE.js";
 import {
   Icon
 } from "./chunk-GS7QWYFT.js";
@@ -10108,7 +10108,15 @@ function MermaidDiagramTypeThumbnail({ preview }) {
 }
 
 // src/Toolbar.tsx
-import { useCallback as useCallback29, useEffect as useEffect24, useMemo as useMemo24, useReducer, useRef as useRef28, useState as useState31 } from "react";
+import {
+  useCallback as useCallback29,
+  useEffect as useEffect24,
+  useLayoutEffect as useLayoutEffect4,
+  useMemo as useMemo24,
+  useReducer,
+  useRef as useRef28,
+  useState as useState31
+} from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS2 } from "@bendyline/squisq/schemas";
 import { DEFAULT_THEME, flattenBlocks } from "@bendyline/squisq/doc";
 import {
@@ -10286,8 +10294,8 @@ function RecorderEntry({ open, onOpenChange, showTrigger = true } = {}) {
   const handleSave = useCallback16(
     (result) => {
       bumpMediaRevision();
-      if (result.source === "mic") {
-        if (activeView === "raw" && monacoEditor) {
+      if (result.mediaKind === "audio") {
+        if (result.source === "mic" && activeView === "raw" && monacoEditor) {
           annotateMonacoHeading(monacoEditor, result.filename);
         }
         const audioTag = `<audio src="${result.relativePath}" controls></audio>`;
@@ -16824,6 +16832,8 @@ function Toolbar({
   slotAfterActions,
   slotRight,
   showPlayTab = true,
+  showFormattingControls = true,
+  showInsertControls = true,
   hostMode = "document"
 }) {
   const {
@@ -16915,9 +16925,8 @@ function Toolbar({
   const codeSnippetMenuRef = useRef28(null);
   const mermaidTypeMenuRef = useRef28(null);
   const chartTypeMenuRef = useRef28(null);
-  const [insertMenuAnchor, setInsertMenuAnchor] = useState31(
-    null
-  );
+  const insertMenuTriggerRectRef = useRef28(null);
+  const [insertMenuAnchor, setInsertMenuAnchor] = useState31(null);
   const [codeSnippetMenuAnchor, setCodeSnippetMenuAnchor] = useState31(null);
   const [mermaidTypeMenuAnchor, setMermaidTypeMenuAnchor] = useState31(null);
   const [chartTypeMenuAnchor, setChartTypeMenuAnchor] = useState31(null);
@@ -16933,7 +16942,8 @@ function Toolbar({
     if (left + INSERT_MENU_WIDTH + margin > vw) {
       left = Math.max(margin, rect.right - INSERT_MENU_WIDTH);
     }
-    setInsertMenuAnchor({ top: rect.bottom + gap, left });
+    insertMenuTriggerRectRef.current = rect;
+    setInsertMenuAnchor({ top: rect.bottom + gap, left, placement: "down" });
     setCodeSnippetMenuAnchor(null);
     setMermaidTypeMenuAnchor(null);
     setChartTypeMenuAnchor(null);
@@ -16987,6 +16997,7 @@ function Toolbar({
     setMermaidTypeMenuAnchor(null);
   }, []);
   const closeInsertMenu = useCallback29(() => {
+    insertMenuTriggerRectRef.current = null;
     setInsertMenuAnchor(null);
     setCodeSnippetMenuAnchor(null);
     setMermaidTypeMenuAnchor(null);
@@ -17080,6 +17091,28 @@ function Toolbar({
     document.addEventListener("mousedown", handleClick);
     return () => document.removeEventListener("mousedown", handleClick);
   }, [insertMenuAnchor, closeInsertMenu]);
+  const insertMenuOpen = insertMenuAnchor !== null;
+  useLayoutEffect4(() => {
+    if (!insertMenuOpen) return;
+    const menu = insertMenuRef.current;
+    const triggerRect = insertMenuTriggerRectRef.current;
+    if (!menu || !triggerRect) return;
+    const gap = 4;
+    const margin = 8;
+    const spaceBelow = Math.max(0, window.innerHeight - triggerRect.bottom - gap - margin);
+    const spaceAbove = Math.max(0, triggerRect.top - gap - margin);
+    const naturalHeight = Math.max(menu.scrollHeight, menu.getBoundingClientRect().height);
+    const placement = naturalHeight > spaceBelow && spaceAbove > spaceBelow ? "up" : "down";
+    const maxHeight = placement === "up" ? spaceAbove : spaceBelow;
+    const visibleHeight = Math.min(naturalHeight, maxHeight);
+    const top = placement === "up" ? Math.max(margin, triggerRect.top - gap - visibleHeight) : triggerRect.bottom + gap;
+    setInsertMenuAnchor((current) => {
+      if (!current || current.top === top && current.maxHeight === maxHeight && current.placement === placement) {
+        return current;
+      }
+      return { ...current, top, maxHeight, placement };
+    });
+  }, [insertMenuOpen]);
   const [overflowPlacement, setOverflowPlacement] = useState31("down");
   useEffect24(() => {
     if (!showOverflow || !overflowRef.current) return;
@@ -17806,7 +17839,7 @@ ${TASK_LIST_MARKDOWN}
     return Number(m[1]) <= visibleHeadingMax;
   };
   const hasVisibleMediaButtons = MEDIA_BUTTONS.some((b) => isButtonVisible(b.id));
-  const showInsertInOverflow = overflowIndex !== null && overflowIndex <= FIRST_MEDIA_INDEX && hasVisibleMediaButtons;
+  const showInsertInOverflow = showInsertControls && overflowIndex !== null && overflowIndex <= FIRST_MEDIA_INDEX && hasVisibleMediaButtons;
   const isInTable = isWysiwyg ? tiptapEditor.isActive("table") : false;
   const wysiwygTemplate = isWysiwyg ? tiptapEditor.isActive("heading") ? tiptapEditor.getAttributes("heading")?.dataTemplate ?? "" : null : null;
   const isRawView = activeView === "raw";
@@ -18026,17 +18059,17 @@ ${TASK_LIST_MARKDOWN}
       dataTemplateParams: updated.templateParams
     }).run();
   };
-  const showTemplateInOverflow = currentTemplate !== null && clippedContextual.has("template");
-  const showTransitionInOverflow = currentTransition !== null && clippedContextual.has("transition");
+  const showTemplateInOverflow = showFormattingControls && currentTemplate !== null && clippedContextual.has("template");
+  const showTransitionInOverflow = showFormattingControls && currentTransition !== null && clippedContextual.has("transition");
   const showBlockSectionInOverflow = showTemplateInOverflow || showTransitionInOverflow;
   const overflowBlockLabel = currentTemplate ? templateLabel(currentTemplate) : "Heading";
-  const showToolbarOverflow = !findMode && !isPreview && !isCodeMode && (overflowIndex !== null || clippedContextual.size > 0);
+  const showToolbarOverflow = !findMode && !isPreview && !isCodeMode && (showFormattingControls && (overflowIndex !== null || clippedContextual.size > 0) || showInsertInOverflow);
   return /* @__PURE__ */ jsxs31(
     "div",
     {
       className: `squisq-toolbar${findMode ? " squisq-toolbar--find" : ""} ${className || ""}`,
       role: "toolbar",
-      "aria-label": findMode ? "Find toolbar" : "Formatting toolbar",
+      "aria-label": findMode ? "Find toolbar" : showFormattingControls ? "Formatting toolbar" : "Editor toolbar",
       children: [
         /* @__PURE__ */ jsx41(
           "input",
@@ -18107,8 +18140,8 @@ ${TASK_LIST_MARKDOWN}
           );
         }) }),
         findMode ? /* @__PURE__ */ jsx41(FindToolbar, { onClose: () => setFindMode(false) }) : slotAfterTabs,
-        !findMode && !isPreview && !isCodeMode && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [
-          groups.map((group, gi) => /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
+        !findMode && !isPreview && !isCodeMode && (showFormattingControls || showInsertControls) && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [
+          showFormattingControls && groups.map((group, gi) => /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
             gi > 0 && /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-separator" }),
             BUTTONS.filter((b) => b.group === group && isButtonVisible(b.id)).map((btn) => {
               const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
@@ -18130,8 +18163,8 @@ ${TASK_LIST_MARKDOWN}
               );
             })
           ] }, group)),
-          /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
-            /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-separator" }),
+          showInsertControls && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-group", children: [
+            showFormattingControls && /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-separator" }),
             /* @__PURE__ */ jsx41(
               "button",
               {
@@ -18147,7 +18180,7 @@ ${TASK_LIST_MARKDOWN}
               }
             )
           ] }),
-          currentTemplate !== null && /* @__PURE__ */ jsxs31(
+          showFormattingControls && currentTemplate !== null && /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `squisq-toolbar-group squisq-toolbar-contextual squisq-template-picker${clippedContextual.has("template") ? " squisq-toolbar-contextual--clipped" : ""}`,
@@ -18167,7 +18200,7 @@ ${TASK_LIST_MARKDOWN}
               ]
             }
           ),
-          currentTransition !== null && /* @__PURE__ */ jsxs31(
+          showFormattingControls && currentTransition !== null && /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `squisq-toolbar-group squisq-toolbar-contextual squisq-transition-picker-group${clippedContextual.has("transition") ? " squisq-toolbar-contextual--clipped" : ""}`,
@@ -18186,7 +18219,7 @@ ${TASK_LIST_MARKDOWN}
               ]
             }
           ),
-          isInTable && /* @__PURE__ */ jsxs31(
+          showFormattingControls && isInTable && /* @__PURE__ */ jsxs31(
             "div",
             {
               className: `squisq-toolbar-group squisq-toolbar-contextual squisq-table-controls${clippedContextual.has("table") ? " squisq-toolbar-contextual--clipped" : ""}`,
@@ -18386,6 +18419,7 @@ ${TASK_LIST_MARKDOWN}
             }
           )
         ] }),
+        !findMode && !isPreview && !isCodeMode && !showFormattingControls && !showInsertControls && /* @__PURE__ */ jsx41("div", { className: "squisq-toolbar-actions" }),
         showToolbarOverflow && /* @__PURE__ */ jsxs31("div", { className: "squisq-toolbar-overflow", ref: overflowRef, children: [
           /* @__PURE__ */ jsx41(
             "button",
@@ -18404,7 +18438,7 @@ ${TASK_LIST_MARKDOWN}
             {
               className: `squisq-toolbar-overflow-menu squisq-toolbar-overflow-menu--${overflowPlacement}`,
               children: [
-                BUTTONS.slice(overflowIndex ?? BUTTONS.length).filter((b) => isButtonVisible(b.id)).filter((b) => b.group !== "media").map((btn) => {
+                showFormattingControls && BUTTONS.slice(overflowIndex ?? BUTTONS.length).filter((b) => isButtonVisible(b.id)).filter((b) => b.group !== "media").map((btn) => {
                   const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
                   const disabled = btn.id === "image" && !mediaProvider || !buttonAllowed(btn.id);
                   return /* @__PURE__ */ jsxs31(
@@ -18480,7 +18514,7 @@ ${TASK_LIST_MARKDOWN}
                     accentColor: previewSettings?.activeTheme.colors.primary
                   }
                 ) }),
-                isInTable && clippedContextual.has("table") && /* @__PURE__ */ jsxs31(Fragment13, { children: [
+                showFormattingControls && isInTable && clippedContextual.has("table") && /* @__PURE__ */ jsxs31(Fragment13, { children: [
                   /* @__PURE__ */ jsx41(
                     "div",
                     {
@@ -18608,7 +18642,13 @@ ${TASK_LIST_MARKDOWN}
               ref: insertMenuRef,
               className: "squisq-insert-menu",
               "data-theme": colorScheme,
-              style: { position: "fixed", top: insertMenuAnchor.top, left: insertMenuAnchor.left },
+              "data-placement": insertMenuAnchor.placement,
+              style: {
+                position: "fixed",
+                top: insertMenuAnchor.top,
+                left: insertMenuAnchor.left,
+                maxHeight: insertMenuAnchor.maxHeight
+              },
               role: "menu",
               children: [
                 showConvertActions && /* @__PURE__ */ jsxs31(Fragment13, { children: [
@@ -22574,7 +22614,7 @@ function mermaidErrorMessage(error) {
 }
 
 // src/mermaid/MermaidDiagramCanvas.tsx
-import { useCallback as useCallback33, useEffect as useEffect27, useId as useId12, useLayoutEffect as useLayoutEffect4, useRef as useRef32, useState as useState36 } from "react";
+import { useCallback as useCallback33, useEffect as useEffect27, useId as useId12, useLayoutEffect as useLayoutEffect5, useRef as useRef32, useState as useState36 } from "react";
 import { jsx as jsx46, jsxs as jsxs35 } from "react/jsx-runtime";
 var renderSequence = 0;
 function excludesCanvasPan(target, viewport) {
@@ -22704,7 +22744,7 @@ function MermaidDiagramCanvas({
       current = false;
     };
   }, [source, onModelChange, theme]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const scroll = scrollRef.current;
     if (!scroll) return;
     const measure = () => {
@@ -22725,7 +22765,7 @@ function MermaidDiagramCanvas({
     observer.observe(scroll);
     return () => observer.disconnect();
   }, []);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     setContentSize(readSvgViewBox(svgRootRef.current));
   }, [svg]);
   const fitZoom = contentSize && canvasSize ? calculateFitScale(contentSize, canvasSize) : 1;
@@ -22734,7 +22774,7 @@ function MermaidDiagramCanvas({
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
   }, [fitZoom]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     if (viewMode !== "fit") return;
     setZoom(fitZoom);
     setPan({ x: 0, y: 0 });
@@ -22801,7 +22841,7 @@ function MermaidDiagramCanvas({
     selectedNodeId,
     selectedTextId
   ]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const node2 = renamingNodeId ? model2?.nodes.find((candidate) => candidate.id === renamingNodeId) : null;
     const edge2 = renamingEdgeId ? model2?.edges.find((candidate) => candidate.id === renamingEdgeId) : null;
     const text = renamingTextId ? model2 && mermaidEditableTexts(model2).find((candidate) => candidate.id === renamingTextId) : null;
@@ -22814,7 +22854,7 @@ function MermaidDiagramCanvas({
     });
     return () => window.cancelAnimationFrame(frame);
   }, [model2, renamingEdgeId, renamingNodeId, renamingTextId]);
-  useLayoutEffect4(() => {
+  useLayoutEffect5(() => {
     const root = svgRootRef.current;
     if (!root || !model2) {
       setSelectionAnchor(null);
@@ -23354,7 +23394,7 @@ function CanvasAction({
 }
 
 // src/mermaid/MermaidShapePalette.tsx
-import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect5, useMemo as useMemo29, useRef as useRef33, useState as useState37 } from "react";
+import { useEffect as useEffect28, useLayoutEffect as useLayoutEffect6, useMemo as useMemo29, useRef as useRef33, useState as useState37 } from "react";
 import { jsx as jsx47, jsxs as jsxs36 } from "react/jsx-runtime";
 var CATEGORIES = ["Basic", "Process", "Data", "Documents", "Symbols"];
 var PALETTE_WIDTH = 360;
@@ -23390,7 +23430,7 @@ function MermaidShapePalette({ selected, onPick, onClose }) {
       )
     })).filter((section) => section.shapes.length > 0);
   }, [query]);
-  useLayoutEffect5(() => {
+  useLayoutEffect6(() => {
     const palette = ref.current;
     const anchor = palette?.parentElement;
     if (!palette || !anchor) return;
@@ -23549,7 +23589,7 @@ import { createRoot as createRoot3 } from "react-dom/client";
 import {
   useCallback as useCallback34,
   useEffect as useEffect29,
-  useLayoutEffect as useLayoutEffect6,
+  useLayoutEffect as useLayoutEffect7,
   useRef as useRef34,
   useState as useState38,
   useSyncExternalStore
@@ -24443,7 +24483,7 @@ function useDismissibleMermaidPopover(ref, onClose) {
 }
 function useClampedMermaidPopoverPosition(ref, preferredWidth, preferredMaxHeight) {
   const [position, setPosition] = useState38(null);
-  useLayoutEffect6(() => {
+  useLayoutEffect7(() => {
     const picker = ref.current;
     const anchor = picker?.parentElement;
     if (!picker || !anchor) return;
@@ -27435,7 +27475,7 @@ function persistFromWrite(bodyMd, state) {
 }
 
 // src/WysiwygEditor.tsx
-import { useCallback as useCallback38, useEffect as useEffect39, useMemo as useMemo35, useRef as useRef40, useState as useState49 } from "react";
+import { useCallback as useCallback38, useEffect as useEffect40, useMemo as useMemo35, useRef as useRef40, useState as useState50 } from "react";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { Selection } from "@tiptap/pm/state";
 import StarterKit2 from "@tiptap/starter-kit";
@@ -27876,6 +27916,7 @@ var ImageWithMediaProvider = Image.extend({
 // src/tiptap/TiptapVideo.tsx
 import { Node as Node3, mergeAttributes as mergeAttributes2 } from "@tiptap/core";
 import { NodeViewWrapper as NodeViewWrapper2, ReactNodeViewRenderer as ReactNodeViewRenderer2 } from "@tiptap/react";
+import { useEffect as useEffect39, useState as useState49 } from "react";
 
 // src/tiptap/useResolvedMediaSrc.ts
 import { useEffect as useEffect38, useState as useState48 } from "react";
@@ -27934,15 +27975,23 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
   const placement = normalizeVideoPlacement(rawPlacement);
   const lockToBlock = normalizeLockToBlock(rawLockToBlock);
   const resolvedSrc = useResolvedMediaSrc(src ?? "");
+  const [audioOnly, setAudioOnly] = useState49(false);
   const resolvedPoster = useResolvedMediaSrc(poster ?? "");
+  useEffect39(() => {
+    setAudioOnly(false);
+  }, [resolvedSrc]);
+  const handleLoadedMetadata = (event) => {
+    const video = event.currentTarget;
+    setAudioOnly(video.videoWidth <= 0 && video.videoHeight <= 0);
+  };
   return /* @__PURE__ */ jsxs43(
     NodeViewWrapper2,
     {
       as: "div",
-      className: `squisq-inline-video-player squisq-video-node${selected ? " squisq-video-node--selected" : ""}`,
+      className: `${audioOnly ? "squisq-inline-audio-player squisq-video-node--audio-only" : "squisq-inline-video-player"} squisq-video-node${selected ? " squisq-video-node--selected" : ""}`,
       "data-video-placement": placement,
       children: [
-        /* @__PURE__ */ jsxs43(
+        !audioOnly && /* @__PURE__ */ jsxs43(
           "div",
           {
             className: "squisq-video-placement-toolbar",
@@ -27980,7 +28029,16 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
             ]
           }
         ),
-        /* @__PURE__ */ jsx54(
+        audioOnly ? /* @__PURE__ */ jsx54(
+          "audio",
+          {
+            "data-drag-handle": true,
+            draggable: true,
+            src: resolvedSrc || void 0,
+            controls,
+            preload: "metadata"
+          }
+        ) : /* @__PURE__ */ jsx54(
           "video",
           {
             "data-drag-handle": true,
@@ -27991,7 +28049,8 @@ function VideoNodeView({ node: node2, updateAttributes, selected }) {
             playsInline: true,
             preload: "metadata",
             width: width ?? void 0,
-            height: height ?? void 0
+            height: height ?? void 0,
+            onLoadedMetadata: handleLoadedMetadata
           }
         )
       ]
@@ -28584,11 +28643,11 @@ function WysiwygEditor({
     mermaidThemeStoreRef.current = createMermaidThemeStore(activeTheme ?? DEFAULT_THEME4);
   }
   const mermaidThemeStore = mermaidThemeStoreRef.current;
-  useEffect39(() => {
+  useEffect40(() => {
     mermaidThemeStore.setTheme(activeTheme ?? DEFAULT_THEME4);
   }, [activeTheme, mermaidThemeStore]);
   const { docTemplates, onDocTemplatesChange } = useDocCustomTemplates();
-  const [designerState, setDesignerState] = useState49(
+  const [designerState, setDesignerState] = useState50(
     null
   );
   const handleDesignerSave = useCallback38(
@@ -28604,7 +28663,7 @@ function WysiwygEditor({
     [docTemplates, onDocTemplatesChange]
   );
   const mentionProviderRef = useRef40(mentionProvider);
-  useEffect39(() => {
+  useEffect40(() => {
     mentionProviderRef.current = mentionProvider;
   }, [mentionProvider]);
   const resolvedPlaceholder = useMemo35(() => placeholder ?? pickEmptyPrompt(), [placeholder]);
@@ -28612,7 +28671,7 @@ function WysiwygEditor({
   const lastSourceRef = useRef40(editorSource);
   const pendingLocalSourcesRef = useRef40([]);
   const mediaProviderRef = useRef40(mediaProvider);
-  useEffect39(() => {
+  useEffect40(() => {
     mediaProviderRef.current = mediaProvider;
   }, [mediaProvider]);
   const frontmatterRef = useRef40(stripFrontmatter(editorSource).frontmatter);
@@ -28629,7 +28688,7 @@ function WysiwygEditor({
     }
   }
   const submitOnEnterRef = useRef40(submitOnEnter);
-  useEffect39(() => {
+  useEffect40(() => {
     submitOnEnterRef.current = submitOnEnter;
   }, [submitOnEnter]);
   const editor = useEditor2({
@@ -28811,25 +28870,25 @@ function WysiwygEditor({
       }
     }
   });
-  useEffect39(() => {
+  useEffect40(() => {
     if (editor) {
       setTiptapEditor(editor);
     }
     return () => setTiptapEditor(null);
   }, [editor, setTiptapEditor]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (editor) editor.setEditable(!readOnly);
   }, [editor, readOnly]);
   const containerRef = useRef40(null);
-  const [badgeMenu, setBadgeMenu] = useState49(null);
-  const [propsMenu, setPropsMenu] = useState49(null);
+  const [badgeMenu, setBadgeMenu] = useState50(null);
+  const [propsMenu, setPropsMenu] = useState50(null);
   const closeBadgeMenu = useCallback38(() => {
     setBadgeMenu(null);
     requestAnimationFrame(() => {
       if (editor && !editor.isDestroyed) editor.commands.focus();
     });
   }, [editor]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (!editor) return;
     const root = containerRef.current;
     if (!root) return;
@@ -28885,7 +28944,7 @@ function WysiwygEditor({
     root.addEventListener("mousedown", onClick);
     return () => root.removeEventListener("mousedown", onClick);
   }, [editor]);
-  useEffect39(() => {
+  useEffect40(() => {
     if (!editor) return;
     const pendingIndex = pendingLocalSourcesRef.current.lastIndexOf(editorSource);
     if (pendingIndex >= 0) {
@@ -29142,7 +29201,7 @@ function moveSelectionToDropPoint(view, event) {
 }
 
 // src/InlinePreviewGutter.tsx
-import { useLayoutEffect as useLayoutEffect7, useMemo as useMemo37, useRef as useRef41, useState as useState51 } from "react";
+import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo37, useRef as useRef41, useState as useState52 } from "react";
 import { VIEWPORT_PRESETS as VIEWPORT_PRESETS4 } from "@bendyline/squisq/schemas";
 import {
   flattenBlocks as flattenBlocks4,
@@ -29154,14 +29213,14 @@ import { extractPlainText as extractPlainText3, getChildren } from "@bendyline/s
 import { BlockRenderer as BlockRenderer3, MediaContext as MediaContext4 } from "@bendyline/squisq-react";
 
 // src/useHeadingLayout.ts
-import { useCallback as useCallback39, useEffect as useEffect40, useMemo as useMemo36, useState as useState50 } from "react";
+import { useCallback as useCallback39, useEffect as useEffect41, useMemo as useMemo36, useState as useState51 } from "react";
 import { flattenBlocks as flattenBlocks3, hasTemplate } from "@bendyline/squisq/doc";
 function useHeadingLayout(refInsideWrapper) {
   const { doc, activeView, monacoEditor, tiptapEditor } = useEditorContext();
   const flatBlocks = useMemo36(() => doc ? flattenBlocks3(doc.blocks) : [], [doc]);
-  const [entries, setEntries] = useState50([]);
-  const [pageEdges, setPageEdges] = useState50(null);
-  useEffect40(() => {
+  const [entries, setEntries] = useState51([]);
+  const [pageEdges, setPageEdges] = useState51(null);
+  useEffect41(() => {
     if (activeView !== "wysiwyg") return;
     const node2 = refInsideWrapper.current;
     if (!node2) return;
@@ -29229,7 +29288,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, flatBlocks, refInsideWrapper]);
-  useEffect40(() => {
+  useEffect41(() => {
     if (activeView !== "raw") return;
     if (!monacoEditor) return;
     const node2 = refInsideWrapper.current;
@@ -29290,7 +29349,7 @@ function useHeadingLayout(refInsideWrapper) {
       window.removeEventListener("resize", recompute);
     };
   }, [activeView, monacoEditor, flatBlocks, refInsideWrapper]);
-  useEffect40(() => {
+  useEffect41(() => {
     setEntries([]);
     setPageEdges(null);
   }, [activeView]);
@@ -29584,8 +29643,8 @@ function InlinePreviewGutter({
     headingEntries.forEach((e2) => m.set(e2.block.id, e2.top));
     return m;
   }, [headingEntries]);
-  const [positions, setPositions] = useState51(/* @__PURE__ */ new Map());
-  useLayoutEffect7(() => {
+  const [positions, setPositions] = useState52(/* @__PURE__ */ new Map());
+  useLayoutEffect8(() => {
     if (items.length === 0) {
       setPositions((prev) => prev.size === 0 ? prev : /* @__PURE__ */ new Map());
       return;
@@ -30100,10 +30159,10 @@ function buildPreviewDoc(doc, options) {
 // src/OutlinePanel.tsx
 import {
   useCallback as useCallback40,
-  useEffect as useEffect41,
+  useEffect as useEffect42,
   useMemo as useMemo38,
   useRef as useRef42,
-  useState as useState52
+  useState as useState53
 } from "react";
 import { flattenBlocks as flattenBlocks5, hasTemplate as hasTemplate3 } from "@bendyline/squisq/doc";
 import { extractPlainText as extractPlainText5 } from "@bendyline/squisq/markdown";
@@ -30222,8 +30281,8 @@ function OutlinePanel({ width, className, readOnly = false }) {
   const { scrollToBlock } = useHeadingLayout(paneRef);
   const cursorActiveId = useActiveOutlineBlockId();
   const activeDragRef = useRef42(null);
-  const [draggedBlockId, setDraggedBlockId] = useState52(null);
-  const [dropTarget, setDropTarget] = useState52(null);
+  const [draggedBlockId, setDraggedBlockId] = useState53(null);
+  const [dropTarget, setDropTarget] = useState53(null);
   const blockModeActiveId = useMemo38(() => {
     if (layoutMode !== "block" || activeBlockStartLine == null || !doc) return null;
     const match = flattenBlocks5(doc.blocks).find(
@@ -30490,11 +30549,11 @@ function OutlineNode({
 function useActiveOutlineBlockId() {
   const { doc, activeView, tiptapEditor, monacoEditor } = useEditorContext();
   const flatBlocks = useMemo38(() => doc ? flattenBlocks5(doc.blocks) : [], [doc]);
-  const [activeId, setActiveId] = useState52(null);
-  useEffect41(() => {
+  const [activeId, setActiveId] = useState53(null);
+  useEffect42(() => {
     setActiveId(null);
   }, [activeView]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (activeView !== "wysiwyg" || !tiptapEditor) return;
     const update = () => {
       const { from } = tiptapEditor.state.selection;
@@ -30516,7 +30575,7 @@ function useActiveOutlineBlockId() {
       tiptapEditor.off("update", update);
     };
   }, [activeView, tiptapEditor, flatBlocks]);
-  useEffect41(() => {
+  useEffect42(() => {
     if (activeView !== "raw" || !monacoEditor) return;
     const update = () => {
       const line = monacoEditor.getPosition()?.lineNumber;
@@ -30567,7 +30626,7 @@ function bumpHeadingLevelInSource(source, line, delta) {
 }
 
 // src/codeContext/CodeContextZones.tsx
-import { useCallback as useCallback42, useEffect as useEffect43, useMemo as useMemo40, useRef as useRef44, useState as useState53 } from "react";
+import { useCallback as useCallback42, useEffect as useEffect44, useMemo as useMemo40, useRef as useRef44, useState as useState54 } from "react";
 import { createPortal as createPortal10 } from "react-dom";
 
 // src/codeContext/diffContextSections.ts
@@ -30691,7 +30750,7 @@ function setOrdinal(zone, ordinal) {
 // src/codeContext/CodeContextSectionView.tsx
 import { parseMarkdown as parseMarkdown8 } from "@bendyline/squisq/markdown";
 import { MarkdownRenderer } from "@bendyline/squisq-react";
-import { useCallback as useCallback41, useEffect as useEffect42, useMemo as useMemo39, useRef as useRef43 } from "react";
+import { useCallback as useCallback41, useEffect as useEffect43, useMemo as useMemo39, useRef as useRef43 } from "react";
 import { jsx as jsx59, jsxs as jsxs47 } from "react/jsx-runtime";
 function CodeContextSectionView({
   section,
@@ -30711,7 +30770,7 @@ function CodeContextSectionView({
     () => expanded && section.markdown ? parseMarkdown8(section.markdown).children : null,
     [expanded, section.markdown]
   );
-  useEffect42(() => {
+  useEffect43(() => {
     const el = rootRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const report = () => {
@@ -30783,11 +30842,11 @@ function CodeContextSectionView({
 import { Fragment as Fragment18, jsx as jsx60 } from "react/jsx-runtime";
 function CodeContextZones({ options }) {
   const { monacoEditor } = useEditorContext();
-  const [manager, setManager] = useState53(null);
-  const [, setZonesVersion] = useState53(0);
-  const [expandedById, setExpandedById] = useState53({});
+  const [manager, setManager] = useState54(null);
+  const [, setZonesVersion] = useState54(0);
+  const [expandedById, setExpandedById] = useState54({});
   const seenIds = useRef44(/* @__PURE__ */ new Set());
-  useEffect43(() => {
+  useEffect44(() => {
     if (!monacoEditor) return;
     const mgr = new CodeContextZoneManager(monacoEditor);
     const off = mgr.onDidChangeZones(() => setZonesVersion((v2) => v2 + 1));
@@ -30810,7 +30869,7 @@ function CodeContextZones({ options }) {
     });
     return out;
   }, [fileTop, sections]);
-  useEffect43(() => {
+  useEffect44(() => {
     if (!manager) return;
     manager.sync(resolved.map((r) => r.spec));
     setExpandedById((prev) => {
@@ -31246,7 +31305,7 @@ function placeClipInBlock(source, fromLine, targetHeadingLine, spec, startAt) {
 }
 
 // src/TimelineTrack.tsx
-import { useCallback as useCallback44, useEffect as useEffect46, useMemo as useMemo41, useRef as useRef47, useState as useState56 } from "react";
+import { useCallback as useCallback44, useEffect as useEffect47, useMemo as useMemo41, useRef as useRef47, useState as useState57 } from "react";
 import {
   resolveMediaSchedule as resolveMediaSchedule2,
   getDocPlaybackDuration,
@@ -31405,7 +31464,7 @@ function resolveBlockVisual(doc, block, theme, viewport) {
 }
 
 // src/useTimelineClock.ts
-import { useCallback as useCallback43, useEffect as useEffect44, useRef as useRef45, useState as useState54 } from "react";
+import { useCallback as useCallback43, useEffect as useEffect45, useRef as useRef45, useState as useState55 } from "react";
 function advanceTime(prev, dt, total) {
   if (total <= 0) return 0;
   return Math.min(total, Math.max(0, prev + dt));
@@ -31425,8 +31484,8 @@ function playTimelineMediaAt(root, time) {
   });
 }
 function useTimelineClock(total) {
-  const [currentTime, setCurrentTime] = useState54(0);
-  const [isPlaying, setIsPlaying] = useState54(false);
+  const [currentTime, setCurrentTime] = useState55(0);
+  const [isPlaying, setIsPlaying] = useState55(false);
   const rafRef = useRef45(null);
   const lastRef = useRef45(0);
   const currentTimeRef = useRef45(0);
@@ -31434,10 +31493,10 @@ function useTimelineClock(total) {
   const mediaHostRef = useRef45(null);
   currentTimeRef.current = currentTime;
   isPlayingRef.current = isPlaying;
-  useEffect44(() => {
+  useEffect45(() => {
     setCurrentTime((t) => Math.min(t, Math.max(0, total)));
   }, [total]);
-  useEffect44(() => {
+  useEffect45(() => {
     if (!isPlaying) return;
     lastRef.current = performance.now();
     const tick = (now) => {
@@ -31499,7 +31558,7 @@ function timelineMediaLabel(src, kind) {
 }
 
 // src/TimelineItemMenu.tsx
-import { useEffect as useEffect45, useLayoutEffect as useLayoutEffect8, useRef as useRef46, useState as useState55 } from "react";
+import { useEffect as useEffect46, useLayoutEffect as useLayoutEffect9, useRef as useRef46, useState as useState56 } from "react";
 import { createPortal as createPortal11 } from "react-dom";
 import { Fragment as Fragment19, jsx as jsx63, jsxs as jsxs49 } from "react/jsx-runtime";
 function TimelineItemMenu({
@@ -31514,8 +31573,8 @@ function TimelineItemMenu({
   onClose
 }) {
   const panelRef = useRef46(null);
-  const [style, setStyle] = useState55(() => menuStyle(anchor));
-  useLayoutEffect8(() => {
+  const [style, setStyle] = useState56(() => menuStyle(anchor));
+  useLayoutEffect9(() => {
     const panel = panelRef.current;
     if (!panel) return;
     const updatePosition = () => setStyle(menuStyle(anchor, panel));
@@ -31528,7 +31587,7 @@ function TimelineItemMenu({
       resizeObserver?.disconnect();
     };
   }, [anchor]);
-  useEffect45(() => {
+  useEffect46(() => {
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
       event.preventDefault();
@@ -31588,12 +31647,12 @@ function BlockMenu({
   onStartTime,
   onTransition
 }) {
-  const [explicitDuration, setExplicitDuration] = useState55(target.explicitDuration);
-  const [duration, setDuration] = useState55(formatNumber(target.duration));
-  const [startTime, setStartTime] = useState55(
+  const [explicitDuration, setExplicitDuration] = useState56(target.explicitDuration);
+  const [duration, setDuration] = useState56(formatNumber(target.duration));
+  const [startTime, setStartTime] = useState56(
     target.startTime == null ? "" : formatNumber(target.startTime)
   );
-  const [transition, setTransition] = useState55(target.transition);
+  const [transition, setTransition] = useState56(target.transition);
   const toggleAutotime = (autotimed) => {
     setExplicitDuration(!autotimed);
     if (autotimed) {
@@ -31665,11 +31724,11 @@ function VideoMenu({
   target,
   onPatch
 }) {
-  const [placement, setPlacement] = useState55(target.placement);
-  const [locked, setLocked] = useState55(target.lockToBlock);
-  const [pipSize, setPipSize] = useState55(target.pipSize ?? "");
-  const [pipShape, setPipShape] = useState55(target.pipShape ?? "");
-  const [pipPosition, setPipPosition] = useState55(target.pipPosition ?? "");
+  const [placement, setPlacement] = useState56(target.placement);
+  const [locked, setLocked] = useState56(target.lockToBlock);
+  const [pipSize, setPipSize] = useState56(target.pipSize ?? "");
+  const [pipShape, setPipShape] = useState56(target.pipShape ?? "");
+  const [pipPosition, setPipPosition] = useState56(target.pipPosition ?? "");
   const placed = placement === "picture-in-picture" || placement === "overlay";
   const placementOptions = [
     target.canUseContentPlacement ? { value: "content", label: "In layout" } : { value: "default", label: "Default" },
@@ -31939,9 +31998,9 @@ function TimelineTrack({
     colorScheme
   } = useEditorContext();
   const doc = docProp ?? contextDoc;
-  const [drag, setDrag] = useState56(null);
-  const [itemMenu, setItemMenu] = useState56(null);
-  const [pxPerSecond, setPxPerSecond] = useState56(DEFAULT_PX_PER_SECOND);
+  const [drag, setDrag] = useState57(null);
+  const [itemMenu, setItemMenu] = useState57(null);
+  const [pxPerSecond, setPxPerSecond] = useState57(DEFAULT_PX_PER_SECOND);
   const scrollRef = useRef47(null);
   const blocks = useMemo41(() => doc ? flattenBlocks6(doc.blocks) : [], [doc]);
   const previewSettings = usePreviewSettingsOptional();
@@ -31974,8 +32033,8 @@ function TimelineTrack({
     setDrag(null);
     play();
   }, [play]);
-  const [scrubbing, setScrubbing] = useState56(false);
-  useEffect46(() => {
+  const [scrubbing, setScrubbing] = useState57(false);
+  useEffect47(() => {
     if (!scrubbing) return;
     const onMove = (e2) => {
       const scroll = scrollRef.current;
@@ -32013,7 +32072,7 @@ function TimelineTrack({
     [blocks]
   );
   const followedBlockRef = useRef47(null);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!isPlaying) {
       followedBlockRef.current = null;
       return;
@@ -32024,7 +32083,7 @@ function TimelineTrack({
     const line = headingLine(block);
     if (line != null) goToBlockByLine(line);
   }, [isPlaying, currentTime, blockAtTime, goToBlockByLine]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (!isPlaying) return;
     const scroll = scrollRef.current;
     if (!scroll) return;
@@ -32072,8 +32131,8 @@ function TimelineTrack({
   );
   const zoomIn = useCallback44(() => setPxPerSecond((s) => Math.min(ZOOM_MAX, s * ZOOM_FACTOR)), []);
   const zoomOut = useCallback44(() => setPxPerSecond((s) => Math.max(ZOOM_MIN, s / ZOOM_FACTOR)), []);
-  const [viewportWidth, setViewportWidth] = useState56(0);
-  useEffect46(() => {
+  const [viewportWidth, setViewportWidth] = useState57(0);
+  useEffect47(() => {
     const el = scrollRef.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const update = () => setViewportWidth(el.clientWidth);
@@ -32087,7 +32146,7 @@ function TimelineTrack({
   const dragRef = useRef47(null);
   dragRef.current = drag;
   const isDragging = drag != null && !drag.committed;
-  useEffect46(() => {
+  useEffect47(() => {
     if (!isDragging) return;
     const onMove = (e2) => {
       const d = dragRef.current;
@@ -32118,7 +32177,7 @@ function TimelineTrack({
       window.removeEventListener("pointerup", onUp);
     };
   }, [isDragging]);
-  useEffect46(() => {
+  useEffect47(() => {
     if (dragRef.current?.committed) setDrag(null);
   }, [doc]);
   const beginDrag = useCallback44(
@@ -32723,7 +32782,7 @@ import { getDocPlaybackDuration as getDocPlaybackDuration2, resolveMediaSchedule
 import { DocPlayer } from "@bendyline/squisq-react";
 
 // src/usePreviewProjection.ts
-import { useEffect as useEffect47, useState as useState57 } from "react";
+import { useEffect as useEffect48, useState as useState58 } from "react";
 import { resolveAudioMapping } from "@bendyline/squisq/doc";
 import { applyTransform } from "@bendyline/squisq/transform";
 function hasEquivalentAudio(left, right) {
@@ -32743,8 +32802,8 @@ function preserveEquivalentAudio(previous, next) {
   };
 }
 function usePreviewProjection(doc, transformStyle, workspaceContainer, documentTitle2) {
-  const [projection, setProjection] = useState57(null);
-  useEffect47(() => {
+  const [projection, setProjection] = useState58(null);
+  useEffect48(() => {
     if (!doc || !doc.blocks.length) {
       setProjection(null);
       return;
@@ -33004,7 +33063,7 @@ function TimelineToolbar({
 }
 
 // src/PlainHtmlPreview.tsx
-import { useCallback as useCallback45, useEffect as useEffect48, useMemo as useMemo44, useRef as useRef48, useState as useState58 } from "react";
+import { useCallback as useCallback45, useEffect as useEffect49, useMemo as useMemo44, useRef as useRef48, useState as useState59 } from "react";
 import { parseMarkdown as parseMarkdown9 } from "@bendyline/squisq/markdown";
 
 // src/utils/collectInlineFontAwesomeCss.ts
@@ -33070,10 +33129,13 @@ function PlainHtmlPreview({
   style,
   globalKeyboardShortcuts = false,
   onFrameChange,
-  onLinkClick
+  onLinkClick,
+  showCodeCopyButton = false,
+  onCopyCode
 }) {
   const iframeRef = useRef48(null);
   const removeFrameLinkHandlerRef = useRef48(() => void 0);
+  const removeFrameCodeCopyControlsRef = useRef48(() => void 0);
   const setIframeRef = useCallback45(
     (frame) => {
       iframeRef.current = frame;
@@ -33082,8 +33144,8 @@ function PlainHtmlPreview({
     [onFrameChange]
   );
   const mdDoc = useMemo44(() => parseMarkdown9(markdown), [markdown]);
-  const [resolvedImages, setResolvedImages] = useState58(null);
-  useEffect48(() => {
+  const [resolvedImages, setResolvedImages] = useState59(null);
+  useEffect49(() => {
     if (!mediaProvider) {
       setResolvedImages(null);
       return;
@@ -33119,8 +33181,8 @@ function PlainHtmlPreview({
     return merged;
   }, [resolvedImages, images]);
   const iconsCss = useMemo44(() => collectInlineFontAwesomeCss(), []);
-  const [renderFn, setRenderFn] = useState58(() => cachedRender);
-  useEffect48(() => {
+  const [renderFn, setRenderFn] = useState59(() => cachedRender);
+  useEffect49(() => {
     if (renderFn) return;
     let cancelled = false;
     loadRenderFn().then((fn) => {
@@ -33153,11 +33215,107 @@ function PlainHtmlPreview({
     frameDocument.addEventListener("click", handleClick, true);
     removeFrameLinkHandlerRef.current = () => frameDocument.removeEventListener("click", handleClick, true);
   }, [onLinkClick]);
-  useEffect48(() => {
+  useEffect49(() => {
     installFrameLinkHandler();
     return () => removeFrameLinkHandlerRef.current();
   }, [html, installFrameLinkHandler]);
-  useEffect48(() => {
+  const installFrameCodeCopyControls = useCallback45(() => {
+    removeFrameCodeCopyControlsRef.current();
+    removeFrameCodeCopyControlsRef.current = () => void 0;
+    const frameDocument = iframeRef.current?.contentDocument;
+    if (!frameDocument || !showCodeCopyButton) return;
+    const style2 = frameDocument.createElement("style");
+    style2.dataset.squisqCodeCopy = "";
+    style2.textContent = `
+      .squisq-preview-code-copy-frame { position: relative; margin: 1em 0; }
+      .squisq-preview-code-copy-frame > pre { margin: 0; padding-right: 5rem; }
+      .squisq-preview-code-copy {
+        position: absolute; z-index: 1; top: .55rem; right: .55rem;
+        min-width: 3.7rem; padding: .28rem .5rem;
+        border: 1px solid color-mix(in srgb, var(--plain-text) 20%, transparent);
+        border-radius: 5px;
+        background: color-mix(in srgb, var(--plain-bg) 90%, transparent);
+        color: inherit; font: 500 .72rem/1.2 system-ui, sans-serif;
+        cursor: pointer; opacity: .58;
+        transition: opacity 120ms ease, background-color 120ms ease;
+      }
+      .squisq-preview-code-copy-frame:hover > .squisq-preview-code-copy,
+      .squisq-preview-code-copy:focus-visible,
+      .squisq-preview-code-copy[data-copy-state="copied"],
+      .squisq-preview-code-copy[data-copy-state="failed"] { opacity: 1; }
+      .squisq-preview-code-copy:hover { background: var(--plain-bg); }
+      .squisq-preview-code-copy:disabled { cursor: wait; }
+    `;
+    frameDocument.head.append(style2);
+    const cleanups = [];
+    const wrappers = [];
+    const timers = /* @__PURE__ */ new Set();
+    for (const code of frameDocument.querySelectorAll(
+      "pre.squisq-code-block > code"
+    )) {
+      const pre = code.parentElement;
+      if (!pre?.parentElement) continue;
+      const wrapper = frameDocument.createElement("div");
+      wrapper.className = "squisq-preview-code-copy-frame";
+      pre.replaceWith(wrapper);
+      wrapper.append(pre);
+      wrappers.push(wrapper);
+      const button = frameDocument.createElement("button");
+      button.type = "button";
+      button.className = "squisq-preview-code-copy";
+      button.dataset.copyState = "idle";
+      button.textContent = "Copy";
+      button.setAttribute("aria-label", "Copy code to clipboard");
+      wrapper.append(button);
+      const languageClass = Array.from(code.classList).find((name) => name.startsWith("language-"));
+      const language = languageClass?.slice("language-".length) || void 0;
+      const handleCopy = async () => {
+        if (button.dataset.copyState === "copying") return;
+        button.dataset.copyState = "copying";
+        button.textContent = "Copying\u2026";
+        button.disabled = true;
+        try {
+          if (onCopyCode) {
+            await onCopyCode(code.textContent ?? "", language === void 0 ? {} : { language });
+          } else {
+            const clipboard = frameDocument.defaultView?.navigator.clipboard ?? (typeof navigator === "undefined" ? void 0 : navigator.clipboard);
+            if (!clipboard?.writeText) throw new Error("Clipboard access is unavailable");
+            await clipboard.writeText(code.textContent ?? "");
+          }
+          button.dataset.copyState = "copied";
+          button.textContent = "Copied";
+        } catch {
+          button.dataset.copyState = "failed";
+          button.textContent = "Copy failed";
+        } finally {
+          button.disabled = false;
+          const timer = setTimeout(() => {
+            timers.delete(timer);
+            button.dataset.copyState = "idle";
+            button.textContent = "Copy";
+          }, 1600);
+          timers.add(timer);
+        }
+      };
+      button.addEventListener("click", handleCopy);
+      cleanups.push(() => button.removeEventListener("click", handleCopy));
+    }
+    removeFrameCodeCopyControlsRef.current = () => {
+      for (const cleanup of cleanups) cleanup();
+      for (const timer of timers) clearTimeout(timer);
+      timers.clear();
+      for (const wrapper of wrappers) {
+        const pre = wrapper.firstElementChild;
+        if (pre && wrapper.parentElement) wrapper.replaceWith(pre);
+      }
+      style2.remove();
+    };
+  }, [onCopyCode, showCodeCopyButton]);
+  useEffect49(() => {
+    installFrameCodeCopyControls();
+    return () => removeFrameCodeCopyControlsRef.current();
+  }, [html, installFrameCodeCopyControls]);
+  useEffect49(() => {
     if (!globalKeyboardShortcuts) return;
     const handleKeyDown = (event) => {
       if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.key !== "ArrowDown" && event.key !== "ArrowUp") {
@@ -33189,7 +33347,10 @@ function PlainHtmlPreview({
       "data-testid": "plain-html-preview",
       title: title ?? "HTML preview",
       srcDoc: html,
-      onLoad: installFrameLinkHandler,
+      onLoad: () => {
+        installFrameLinkHandler();
+        installFrameCodeCopyControls();
+      },
       sandbox: "allow-same-origin",
       style: { ...IFRAME_STYLE, ...style }
     }
@@ -33233,7 +33394,7 @@ function collectImageRefs(doc) {
 }
 
 // src/PreviewPanel.tsx
-import { useState as useState61, useEffect as useEffect52, useMemo as useMemo48, useCallback as useCallback49, useRef as useRef52 } from "react";
+import { useState as useState62, useEffect as useEffect53, useMemo as useMemo48, useCallback as useCallback49, useRef as useRef52 } from "react";
 import { createPortal as createPortal13 } from "react-dom";
 import { DocPlayer as DocPlayer2, LinearDocView as LinearDocView2, useMediaProvider as useMediaProvider2 } from "@bendyline/squisq-react";
 import { resolveTransformStyle as resolveTransformStyle2 } from "@bendyline/squisq/transform";
@@ -33372,12 +33533,12 @@ import {
   createContext as createContext5,
   useCallback as useCallback46,
   useContext as useContext5,
-  useEffect as useEffect49,
+  useEffect as useEffect50,
   useId as useId14,
-  useLayoutEffect as useLayoutEffect9,
+  useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo45,
   useRef as useRef49,
-  useState as useState59
+  useState as useState60
 } from "react";
 import { createPortal as createPortal12 } from "react-dom";
 import { jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
@@ -33460,10 +33621,10 @@ function PresentationModeProvider({
   const { activeView, colorScheme, doc } = useEditorContext();
   const { activeTheme } = usePreviewSettings();
   const popupNameId = useId14().replace(/[^a-zA-Z0-9_-]/g, "");
-  const [selectedTarget, setSelectedTarget] = useState59("control");
-  const [activeTarget, setActiveTarget] = useState59(null);
-  const [popupRoot, setPopupRoot] = useState59(null);
-  const [error, setError] = useState59(null);
+  const [selectedTarget, setSelectedTarget] = useState60("control");
+  const [activeTarget, setActiveTarget] = useState60(null);
+  const [popupRoot, setPopupRoot] = useState60(null);
+  const [error, setError] = useState60(null);
   const activeTargetRef = useRef49(activeTarget);
   activeTargetRef.current = activeTarget;
   const previousActiveTargetRef = useRef49(null);
@@ -33606,12 +33767,12 @@ function PresentationModeProvider({
     },
     [availableTargets, selectedTarget, stop]
   );
-  useEffect49(() => {
+  useEffect50(() => {
     if (availableTargets.includes(selectedTarget)) return;
     setSelectedTarget("control");
     if (activeTargetRef.current !== null) void stop();
   }, [availableTargets, selectedTarget, stop]);
-  useEffect49(() => {
+  useEffect50(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
     if (!root || !ownerDocument) return;
@@ -33623,7 +33784,7 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("fullscreenchange", handleFullscreenChange);
     return () => ownerDocument.removeEventListener("fullscreenchange", handleFullscreenChange);
   }, [rootRef]);
-  useEffect49(() => {
+  useEffect50(() => {
     const root = rootRef.current;
     if (!root) return;
     if (activeTarget) root.dataset.presentationMode = activeTarget;
@@ -33632,10 +33793,10 @@ function PresentationModeProvider({
       delete root.dataset.presentationMode;
     };
   }, [activeTarget, rootRef]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (activeView !== "preview" && activeTargetRef.current !== null) void stop();
   }, [activeView, stop]);
-  useEffect49(() => {
+  useEffect50(() => {
     const previous = previousActiveTargetRef.current;
     previousActiveTargetRef.current = activeTarget;
     if (previous === null || activeTarget !== null) return;
@@ -33643,7 +33804,7 @@ function PresentationModeProvider({
     returnFocusRef.current = null;
     if (target?.isConnected) target.focus();
   }, [activeTarget]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (activeTarget !== "control") return;
     const ownerDocument = rootRef.current?.ownerDocument;
     if (!ownerDocument) return;
@@ -33655,12 +33816,12 @@ function PresentationModeProvider({
     ownerDocument.addEventListener("keydown", handleKeyDown);
     return () => ownerDocument.removeEventListener("keydown", handleKeyDown);
   }, [activeTarget, rootRef, stop]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!error) return;
     const timer = window.setTimeout(() => setError(null), 6e3);
     return () => window.clearTimeout(timer);
   }, [error]);
-  useEffect49(
+  useEffect50(
     () => () => {
       popupCleanupRef.current?.();
       const popup = popupRef.current;
@@ -33763,8 +33924,8 @@ function PresentationModeControl() {
   const { colorScheme } = useEditorContext();
   const triggerRef = useRef49(null);
   const menuRef = useRef49(null);
-  const [open, setOpen] = useState59(false);
-  const [anchor, setAnchor] = useState59(null);
+  const [open, setOpen] = useState60(false);
+  const [anchor, setAnchor] = useState60(null);
   const options = PRESENTATION_OPTIONS.filter((option) => availableTargets.includes(option.target));
   const selected = options.find((option) => option.target === selectedTarget) ?? PRESENTATION_OPTIONS[0];
   const updatePosition = useCallback46(() => {
@@ -33789,7 +33950,7 @@ function PresentationModeControl() {
     updatePosition();
     setOpen(true);
   }, [updatePosition]);
-  useEffect49(() => {
+  useEffect50(() => {
     if (!open) return;
     const handlePointerDown = (event) => {
       const target = event.target;
@@ -33812,7 +33973,7 @@ function PresentationModeControl() {
       window.removeEventListener("scroll", updatePosition, true);
     };
   }, [closeMenu, open, updatePosition]);
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     if (!open || !anchor) return;
     const checked = menuRef.current?.querySelector('[aria-checked="true"]');
     const first = menuRef.current?.querySelector('[role="menuitemradio"]');
@@ -33932,10 +34093,10 @@ import {
   createContext as createContext6,
   useCallback as useCallback47,
   useContext as useContext6,
-  useEffect as useEffect50,
+  useEffect as useEffect51,
   useMemo as useMemo46,
   useRef as useRef50,
-  useState as useState60
+  useState as useState61
 } from "react";
 import { jsx as jsx70, jsxs as jsxs55 } from "react/jsx-runtime";
 var PrintModeContext = createContext6(null);
@@ -33950,8 +34111,8 @@ function usePrintModeOptional() {
 function PrintModeProvider({ rootRef, children }) {
   const { activeView } = useEditorContext();
   const { activeTarget: presentationTarget, stop: stopPresentation } = usePresentationMode();
-  const [active, setActive] = useState60(false);
-  const [slidesPerPage, setSlidesPerPage] = useState60(1);
+  const [active, setActive] = useState61(false);
+  const [slidesPerPage, setSlidesPerPage] = useState61(1);
   const customPrintHandlerRef = useRef50(null);
   const printAncestorsRef = useRef50([]);
   const unmarkPrinting = useCallback47(() => {
@@ -34002,7 +34163,7 @@ function PrintModeProvider({ rootRef, children }) {
     markPrinting();
     ownerWindow.print();
   }, [markPrinting, rootRef]);
-  useEffect50(() => {
+  useEffect51(() => {
     const root = rootRef.current;
     if (!root) return;
     if (active) root.dataset.printPreview = "true";
@@ -34011,10 +34172,10 @@ function PrintModeProvider({ rootRef, children }) {
       delete root.dataset.printPreview;
     };
   }, [active, rootRef]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (activeView !== "preview" && active) close();
   }, [active, activeView, close]);
-  useEffect50(() => {
+  useEffect51(() => {
     if (!active) return;
     const ownerWindow = rootRef.current?.ownerDocument.defaultView;
     const ownerDocument = rootRef.current?.ownerDocument;
@@ -34105,7 +34266,7 @@ function PrintPreviewToolbar() {
 }
 
 // src/print/PrintPreview.tsx
-import { useCallback as useCallback48, useEffect as useEffect51, useMemo as useMemo47, useRef as useRef51 } from "react";
+import { useCallback as useCallback48, useEffect as useEffect52, useMemo as useMemo47, useRef as useRef51 } from "react";
 import {
   BlockRenderer as BlockRenderer5,
   LinearDocView,
@@ -34156,7 +34317,7 @@ function PrintPreview({
     };
   }, [previewDoc?.startBlock, showCover, theme, viewport]);
   const isTextDocument = displayMode === "page" || displayMode === "narrate";
-  useEffect51(() => {
+  useEffect52(() => {
     if (!isTextDocument) return registerPrintHandler(null);
     return registerPrintHandler(() => {
       const frameWindow = documentFrameRef.current?.contentWindow;
@@ -34244,7 +34405,9 @@ function PreviewPanel({
   basePath = "/",
   className,
   workspaceContainer,
-  onLinkClick
+  onLinkClick,
+  showCodeCopyButton = false,
+  onCopyCode
 }) {
   const {
     doc,
@@ -34280,7 +34443,7 @@ function PreviewPanel({
   } = usePreviewSettings();
   const mainSurfaceRef = useRef52(null);
   const popupSurfaceRef = useRef52(null);
-  const [playbackState, setPlaybackState] = useState61(null);
+  const [playbackState, setPlaybackState] = useState62(null);
   const handlePlaybackStateChange = useCallback49((next) => {
     setPlaybackState(next);
   }, []);
@@ -34318,11 +34481,11 @@ function PreviewPanel({
   const isDocumentMode = activeDisplayMode === "page";
   const isPageMode = activeDisplayMode === "linear";
   const isNarrateMode = activeDisplayMode === "narrate";
-  useEffect52(() => {
+  useEffect53(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
   }, [presentation?.activeTarget]);
-  useEffect52(() => {
+  useEffect53(() => {
     if (presentation?.activeTarget !== "window" || !presentation.popupRoot) return;
     const mainRoot = mainSurfaceRef.current;
     const followerRoot = popupSurfaceRef.current;
@@ -34426,7 +34589,9 @@ function PreviewPanel({
           mediaRevision,
           theme: activeTheme,
           globalKeyboardShortcuts: !audience,
-          onLinkClick
+          onLinkClick,
+          showCodeCopyButton,
+          onCopyCode
         }
       );
     }
@@ -34460,7 +34625,9 @@ function PreviewPanel({
           theme: activeTheme,
           globalKeyboardShortcuts: !audience,
           showCover: activeCoverSlide,
-          transformPage: activeTransformStyle ? resolveTransformStyle2(activeTransformStyle).page : void 0
+          transformPage: activeTransformStyle ? resolveTransformStyle2(activeTransformStyle).page : void 0,
+          showCodeCopyButton,
+          onCopyCode
         }
       );
     }
@@ -34494,6 +34661,8 @@ function PreviewPanel({
         audioController: audience ? followerAudioController : void 0,
         enableSwipe: !audience,
         globalKeyboardShortcuts: !audience,
+        showCodeCopyButton,
+        onCopyCode,
         onPlaybackStateChange: !audience && audienceWindowOpen ? handlePlaybackStateChange : void 0
       },
       `${audience ? "audience" : "primary"}-${activeTransformStyle || "none"}`
@@ -34549,7 +34718,7 @@ function PreviewPanel({
 }
 
 // src/MediaBin.tsx
-import { useState as useState62, useEffect as useEffect53, useRef as useRef53, useCallback as useCallback50 } from "react";
+import { useState as useState63, useEffect as useEffect54, useRef as useRef53, useCallback as useCallback50 } from "react";
 import { jsx as jsx73, jsxs as jsxs58 } from "react/jsx-runtime";
 function formatSize(bytes) {
   if (bytes < 1024) return `${bytes} B`;
@@ -34614,12 +34783,12 @@ function MediaBin({
   isRecorderOpen = false,
   allowBinaryDownloads = true
 }) {
-  const [entries, setEntries] = useState62([]);
-  const [thumbUrls, setThumbUrls] = useState62({});
-  const [loading, setLoading] = useState62(false);
-  const [isDropActive, setIsDropActive] = useState62(false);
-  const [downloadingPath, setDownloadingPath] = useState62(null);
-  const [contextMenu, setContextMenu] = useState62(null);
+  const [entries, setEntries] = useState63([]);
+  const [thumbUrls, setThumbUrls] = useState63({});
+  const [loading, setLoading] = useState63(false);
+  const [isDropActive, setIsDropActive] = useState63(false);
+  const [downloadingPath, setDownloadingPath] = useState63(null);
+  const [contextMenu, setContextMenu] = useState63(null);
   const fileInputRef = useRef53(null);
   const contextMenuRef = useRef53(null);
   const dropDepthRef = useRef53(0);
@@ -34641,7 +34810,7 @@ function MediaBin({
     },
     [onCountChange]
   );
-  useEffect53(() => {
+  useEffect54(() => {
     if (!contextMenu) return;
     const handlePointerDown = (event) => {
       if (contextMenuRef.current?.contains(event.target)) return;
@@ -34662,7 +34831,7 @@ function MediaBin({
       window.removeEventListener("resize", close);
     };
   }, [contextMenu]);
-  useEffect53(() => {
+  useEffect54(() => {
     if (!mediaProvider) {
       setEntries([]);
       setThumbUrls({});
@@ -35004,7 +35173,7 @@ ${formatSize(entry.size)}`,
 }
 
 // src/DropZoneOverlay.tsx
-import { useState as useState63 } from "react";
+import { useState as useState64 } from "react";
 import { Fragment as Fragment21, jsx as jsx74, jsxs as jsxs59 } from "react/jsx-runtime";
 function DropZoneOverlay({
   dragContentType,
@@ -35061,7 +35230,7 @@ function DropZone({
   disabled,
   variant
 }) {
-  const [isHovering, setIsHovering] = useState63(false);
+  const [isHovering, setIsHovering] = useState64(false);
   const props = zoneProps(target);
   return /* @__PURE__ */ jsxs59(
     "div",
@@ -35105,7 +35274,7 @@ function DropZone({
 }
 
 // src/Tooltip.tsx
-import { useEffect as useEffect54, useLayoutEffect as useLayoutEffect10, useRef as useRef54, useState as useState64 } from "react";
+import { useEffect as useEffect55, useLayoutEffect as useLayoutEffect11, useRef as useRef54, useState as useState65 } from "react";
 import { createPortal as createPortal14 } from "react-dom";
 
 // src/tooltipPlacement.ts
@@ -35121,12 +35290,12 @@ function clampTooltipLeft(anchorX, tooltipWidth, viewportWidth, edgePadding = ED
 import { jsx as jsx75 } from "react/jsx-runtime";
 var SHOW_DELAY_MS = 180;
 function TooltipLayer() {
-  const [state, setState3] = useState64(null);
+  const [state, setState3] = useState65(null);
   const tooltipRef = useRef54(null);
   const timerRef = useRef54(null);
   const currentTargetRef = useRef54(null);
   const visibleRef = useRef54(false);
-  useLayoutEffect10(() => {
+  useLayoutEffect11(() => {
     if (!state) return;
     const node2 = tooltipRef.current;
     if (!node2) return;
@@ -35137,7 +35306,7 @@ function TooltipLayer() {
     node2.style.left = `${left}px`;
     node2.style.visibility = "visible";
   }, [state]);
-  useEffect54(() => {
+  useEffect55(() => {
     const clearTimer = () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
@@ -35223,7 +35392,7 @@ function TooltipLayer() {
 }
 
 // src/EditorShell.tsx
-import { useEffect as useEffect55, useRef as useRef55, useState as useState65, useCallback as useCallback51, useMemo as useMemo50 } from "react";
+import { useEffect as useEffect56, useRef as useRef55, useState as useState66, useCallback as useCallback51, useMemo as useMemo50 } from "react";
 
 // src/BlockPreviewPanel.tsx
 import { useMemo as useMemo49 } from "react";
@@ -35515,6 +35684,8 @@ function EditorShell({
   basePath = "/",
   onChange,
   onLinkClick,
+  showCodeCopyButton = false,
+  onCopyCode,
   colorScheme = "light",
   className,
   height = "100vh",
@@ -35528,6 +35699,8 @@ function EditorShell({
   versioningAutoSaveIdleMs,
   onSaveVersion,
   showFilesToggle,
+  showFormattingControls = hostMode !== "chat",
+  showInsertControls = true,
   allowBinaryDownloads = true,
   toolbarSlotLeft,
   toolbarSlotAfterActions,
@@ -35621,6 +35794,8 @@ function EditorShell({
           defaultViewportPreset,
           onChange,
           onLinkClick,
+          showCodeCopyButton,
+          onCopyCode,
           className,
           height,
           minHeight,
@@ -35629,6 +35804,8 @@ function EditorShell({
           mediaProvider: effectiveMediaProvider ?? null,
           workspaceContainer: effectiveContainer,
           filesToggleEnabled,
+          showFormattingControls,
+          showInsertControls,
           allowBinaryDownloads,
           toolbarSlotLeft,
           toolbarSlotAfterActions,
@@ -35691,6 +35868,8 @@ function EditorShellInner({
   defaultViewportPreset,
   onChange,
   onLinkClick,
+  showCodeCopyButton,
+  onCopyCode,
   className,
   height,
   minHeight,
@@ -35699,6 +35878,8 @@ function EditorShellInner({
   mediaProvider,
   workspaceContainer,
   filesToggleEnabled,
+  showFormattingControls,
+  showInsertControls,
   allowBinaryDownloads,
   toolbarSlotLeft,
   toolbarSlotAfterActions,
@@ -35797,13 +35978,13 @@ function EditorShellInner({
   );
   const timelineClock = useTimelineClock(isTimelineMode ? timelineDuration : 0);
   const hasTimelineVideo = timelineVideoSchedule.length > 0;
-  const [timelineVideoVisible, setTimelineVideoVisible] = useState65(false);
-  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState65(false);
+  const [timelineVideoVisible, setTimelineVideoVisible] = useState66(false);
+  const [timelineCompositionVisible, setTimelineCompositionVisible] = useState66(false);
   const timelinePreviewCount = Number(timelineVideoVisible) + Number(timelineCompositionVisible);
-  const [showFiles, setShowFiles] = useState65(false);
-  const [mediaRefreshKey, setMediaRefreshKey] = useState65(0);
-  const [mediaCount, setMediaCount] = useState65(0);
-  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState65(false);
+  const [showFiles, setShowFiles] = useState66(false);
+  const [mediaRefreshKey, setMediaRefreshKey] = useState66(0);
+  const [mediaCount, setMediaCount] = useState66(0);
+  const [mediaBinRecorderOpen, setMediaBinRecorderOpen] = useState66(false);
   const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
   const usedMediaPaths = useMemo50(
     () => collectMediaReferencesFromMarkdown(markdownSource),
@@ -35815,13 +35996,13 @@ function EditorShellInner({
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
   const isDark = colorScheme === "dark";
-  useEffect55(() => {
+  useEffect56(() => {
     if (!isTimelineMode || !hasTimelineVideo) setTimelineVideoVisible(false);
   }, [isTimelineMode, hasTimelineVideo]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!isTimelineMode || !doc?.blocks.length) setTimelineCompositionVisible(false);
   }, [isTimelineMode, doc]);
-  useEffect55(() => {
+  useEffect56(() => {
     if (!mediaProvider) {
       setMediaCount(0);
       return;
@@ -35930,7 +36111,7 @@ ${snippet}` : snippet);
     onDrop: handleFileDrop,
     enabled: !readOnly
   });
-  useEffect55(() => {
+  useEffect56(() => {
     onChange?.(markdownSource);
   }, [markdownSource, onChange]);
   const handleShellKeyDown = useCallback51(
@@ -36046,6 +36227,8 @@ ${snippet}` : snippet);
                       slotAfterActions: toolbarSlotAfterActions,
                       slotRight: toolbarSlotRight,
                       showPlayTab,
+                      showFormattingControls,
+                      showInsertControls,
                       hostMode
                     }
                   ) }),
@@ -36158,7 +36341,9 @@ ${snippet}` : snippet);
                                 {
                                   basePath,
                                   workspaceContainer,
-                                  onLinkClick
+                                  onLinkClick,
+                                  showCodeCopyButton,
+                                  onCopyCode
                                 }
                               )
                             ]
@@ -36292,9 +36477,9 @@ function ImageEditModal({
     const parent = container ?? new MemoryContentContainer();
     return scopeContainer(parent, `.imageEdits/${scopedName}`);
   }, [container, relativePath]);
-  const [initialSrc, setInitialSrc] = useState65(null);
-  const [resolveError, setResolveError] = useState65(null);
-  useEffect55(() => {
+  const [initialSrc, setInitialSrc] = useState66(null);
+  const [resolveError, setResolveError] = useState66(null);
+  useEffect56(() => {
     let cancelled = false;
     setInitialSrc(null);
     setResolveError(null);