@bendyline/squisq-editor-react 2.3.2 → 2.3.3

package/README.md

@@ -78,6 +78,8 @@ and block-at-a-time / timeline editing primitives (`useBlockNavigator`,
   SVG preview gutter, `inlinePreviewWidth` default 320).
 - **Code & image modes** — pass `fileName` / `language` to get a Monaco-only
   code editor, or `imageSrc` (+ `imageMode: 'edit'`) for the image surface.
+  `.jsonc` files, `language="jsonc"`, and fenced `jsonc` snippets use JSON
+  highlighting with line and block comment support.
 - **Host-triggered Find mode** — control `findMode` and
   `onFindModeChange` (or call `setFindMode` from context) to replace the
   toolbar's editing actions with live search, previous/next navigation, and

package/dist/chunk-BWPFPHWY.js

@@ -0,0 +1,32 @@
+// src/monacoWorkers.ts
+function configureMonacoWorkers(workers) {
+  const host = globalThis;
+  host.MonacoEnvironment = {
+    getWorker(_workerId, label) {
+      switch (label) {
+        case "json":
+          if (workers.json) return new workers.json();
+          break;
+        case "css":
+        case "scss":
+        case "less":
+          if (workers.css) return new workers.css();
+          break;
+        case "html":
+        case "handlebars":
+        case "razor":
+          if (workers.html) return new workers.html();
+          break;
+        case "typescript":
+        case "javascript":
+          if (workers.ts) return new workers.ts();
+          break;
+      }
+      return new workers.editor();
+    }
+  };
+}
+
+export {
+  configureMonacoWorkers
+};

package/dist/{chunk-6QFPBDTY.js → chunk-QN3Q64LV.js}

@@ -75,6 +75,9 @@ var EXT_TO_LANGUAGE = {
 };
 var MARKDOWN_MODE_LANGUAGES = /* @__PURE__ */ new Set(["markdown", "plaintext"]);
 var IMAGE_MODE_LANGUAGES = /* @__PURE__ */ new Set(["image"]);
+var MONACO_LANGUAGE_ALIASES = {
+  jsonc: "json"
+};
 function extractExtension(fileName) {
   const trimmed = fileName.trim();
   if (!trimmed) return null;
@@ -93,7 +96,8 @@ function detectLanguageFromFileName(fileName) {
   return EXT_TO_LANGUAGE[ext] ?? null;
 }
 function resolveFileKind(fileName, language) {
-  const resolvedLanguage = language ?? (fileName ? detectLanguageFromFileName(fileName) : null);
+  const requestedLanguage = language ?? (fileName ? detectLanguageFromFileName(fileName) : null);
+  const resolvedLanguage = requestedLanguage ? MONACO_LANGUAGE_ALIASES[requestedLanguage.toLowerCase()] ?? requestedLanguage : null;
   if (!resolvedLanguage) {
     return { mode: "markdown", language: "markdown" };
   }
@@ -2679,7 +2683,7 @@ var TEMPLATE_ENTRIES = [
   {
     name: "sectionHeader",
     label: "Section Header",
-    description: "A clean section break with a prominent title and optional subtitle.",
+    description: "A clean section break with a prominent title and optional background image.",
     icon: /* @__PURE__ */ jsxs5(TemplateIcon, { children: [
       /* @__PURE__ */ jsx8("rect", { x: 4, y: 4, width: 3, height: 32, rx: 1, fill: FA }),
       /* @__PURE__ */ jsx8("rect", { x: 11, y: 8, width: 36, height: 6, rx: 1, fill: F2 }),
@@ -2687,6 +2691,18 @@ var TEMPLATE_ENTRIES = [
       /* @__PURE__ */ jsx8("rect", { x: 11, y: 24, width: 20, height: 2.5, rx: 1, fill: F1, opacity: 0.7 })
     ] })
   },
+  {
+    name: "content",
+    label: "Content",
+    description: "Shows a heading and the complete body in a loss-averse content-first layout.",
+    icon: /* @__PURE__ */ jsxs5(TemplateIcon, { children: [
+      /* @__PURE__ */ jsx8("rect", { x: 7, y: 7, width: 34, height: 5, rx: 1, fill: FA }),
+      /* @__PURE__ */ jsx8("rect", { x: 7, y: 17, width: 42, height: 2.5, rx: 1, fill: F2 }),
+      /* @__PURE__ */ jsx8("rect", { x: 7, y: 22, width: 38, height: 2.5, rx: 1, fill: F1 }),
+      /* @__PURE__ */ jsx8("rect", { x: 7, y: 27, width: 41, height: 2.5, rx: 1, fill: F1 }),
+      /* @__PURE__ */ jsx8("rect", { x: 7, y: 32, width: 30, height: 2.5, rx: 1, fill: F1, opacity: 0.7 })
+    ] })
+  },
   {
     name: "statHighlight",
     label: "Stat Highlight",
@@ -8423,6 +8439,14 @@ var CODE_SNIPPET_LANGUAGES = [
     monacoLanguage: "json",
     starter: '{\n  "key": "value"\n}'
   },
+  {
+    fenceLanguage: "jsonc",
+    label: "JSONC",
+    // Monaco exposes JSON-with-comments through its `json` language service;
+    // it does not register a separate rich-service `jsonc` language id.
+    monacoLanguage: "json",
+    starter: '{\n  // Comments are allowed.\n  "key": "value"\n}'
+  },
   {
     fenceLanguage: "html",
     label: "HTML",
@@ -8540,7 +8564,7 @@ var SPECIAL_FENCE_LANGUAGES = /* @__PURE__ */ new Set([
   "timeline",
   "mermaid"
 ]);
-var MONACO_LANGUAGE_ALIASES = {
+var MONACO_LANGUAGE_ALIASES2 = {
   c: "c",
   "c++": "cpp",
   "c#": "csharp",
@@ -8550,6 +8574,7 @@ var MONACO_LANGUAGE_ALIASES = {
   htm: "html",
   js: "javascript",
   jsx: "javascript",
+  jsonc: "json",
   md: "markdown",
   py: "python",
   rb: "ruby",
@@ -8570,7 +8595,7 @@ function isCodeSnippetFenceLanguage(language) {
 function monacoLanguageForFence(language) {
   const token = codeSnippetFenceLanguageToken(language);
   const catalogEntry = BY_FENCE_LANGUAGE.get(token);
-  return (catalogEntry?.monacoLanguage ?? MONACO_LANGUAGE_ALIASES[token] ?? token) || "plaintext";
+  return (catalogEntry?.monacoLanguage ?? MONACO_LANGUAGE_ALIASES2[token] ?? token) || "plaintext";
 }
 function codeSnippetLanguageLabel(language) {
   const token = codeSnippetFenceLanguageToken(language);
@@ -32490,7 +32515,12 @@ function preparePopupDocument(popup, source, title) {
 function presentationTitle(docTitle) {
   return typeof docTitle === "string" && docTitle.trim() ? `${docTitle.trim()} - Presentation` : "Squisq Presentation";
 }
-function PresentationModeProvider({ rootRef, children }) {
+function PresentationModeProvider({
+  rootRef,
+  children,
+  allowWindow = true,
+  allowFullscreen = true
+}) {
   const { activeView, colorScheme, doc } = useEditorContext();
   const popupNameId = useId14().replace(/[^a-zA-Z0-9_-]/g, "");
   const [selectedTarget, setSelectedTarget] = useState55("control");
@@ -32504,6 +32534,14 @@ function PresentationModeProvider({ rootRef, children }) {
   const popupRef = useRef46(null);
   const popupCleanupRef = useRef46(null);
   const fullscreenSupported = typeof document !== "undefined" && typeof document.documentElement.requestFullscreen === "function";
+  const availableTargets = useMemo41(
+    () => [
+      "control",
+      ...allowWindow ? ["window"] : [],
+      ...allowFullscreen ? ["fullscreen"] : []
+    ],
+    [allowFullscreen, allowWindow]
+  );
   const releasePopup = useCallback45((closeWindow) => {
     const popup = popupRef.current;
     popupCleanupRef.current?.();
@@ -32555,6 +32593,7 @@ function PresentationModeProvider({ rootRef, children }) {
       return;
     }
     if (selectedTarget === "fullscreen") {
+      if (!allowFullscreen) return;
       if (typeof root.requestFullscreen !== "function") {
         setError("Browser full screen is not available here.");
         return;
@@ -32567,6 +32606,7 @@ function PresentationModeProvider({ rootRef, children }) {
       }
       return;
     }
+    if (!allowWindow) return;
     let popup = null;
     try {
       const screenWidth = window.screen?.availWidth || POPUP_WIDTH;
@@ -32607,15 +32647,29 @@ function PresentationModeProvider({ rootRef, children }) {
       else if (popup && !popup.closed) popup.close();
       setError("The presentation window was blocked. Allow pop-ups and try again.");
     }
-  }, [doc?.frontmatter?.title, popupNameId, releasePopup, rootRef, selectedTarget]);
+  }, [
+    allowFullscreen,
+    allowWindow,
+    doc?.frontmatter?.title,
+    popupNameId,
+    releasePopup,
+    rootRef,
+    selectedTarget
+  ]);
   const selectTarget = useCallback45(
     (target) => {
+      if (!availableTargets.includes(target)) return;
       if (target === selectedTarget) return;
       setSelectedTarget(target);
       if (activeTargetRef.current !== null) void stop();
     },
-    [selectedTarget, stop]
+    [availableTargets, selectedTarget, stop]
   );
+  useEffect45(() => {
+    if (availableTargets.includes(selectedTarget)) return;
+    setSelectedTarget("control");
+    if (activeTargetRef.current !== null) void stop();
+  }, [availableTargets, selectedTarget, stop]);
   useEffect45(() => {
     const root = rootRef.current;
     const ownerDocument = root?.ownerDocument;
@@ -32683,12 +32737,22 @@ function PresentationModeProvider({ rootRef, children }) {
       selectedTarget,
       activeTarget,
       popupRoot,
+      availableTargets,
       fullscreenSupported,
       selectTarget,
       start,
       stop
     }),
-    [selectedTarget, activeTarget, popupRoot, fullscreenSupported, selectTarget, start, stop]
+    [
+      selectedTarget,
+      activeTarget,
+      popupRoot,
+      availableTargets,
+      fullscreenSupported,
+      selectTarget,
+      start,
+      stop
+    ]
   );
   const exitButton = activeTarget ? /* @__PURE__ */ jsxs47(
     "button",
@@ -32739,13 +32803,22 @@ var MENU_WIDTH = 340;
 var MENU_MARGIN = 8;
 var MENU_GAP = 4;
 function PresentationModeControl() {
-  const { selectedTarget, activeTarget, fullscreenSupported, selectTarget, start, stop } = usePresentationMode();
+  const {
+    selectedTarget,
+    activeTarget,
+    availableTargets,
+    fullscreenSupported,
+    selectTarget,
+    start,
+    stop
+  } = usePresentationMode();
   const { colorScheme } = useEditorContext();
   const triggerRef = useRef46(null);
   const menuRef = useRef46(null);
   const [open, setOpen] = useState55(false);
   const [anchor, setAnchor] = useState55(null);
-  const selected = PRESENTATION_OPTIONS.find((option) => option.target === selectedTarget) ?? PRESENTATION_OPTIONS[0];
+  const options = PRESENTATION_OPTIONS.filter((option) => availableTargets.includes(option.target));
+  const selected = options.find((option) => option.target === selectedTarget) ?? PRESENTATION_OPTIONS[0];
   const updatePosition = useCallback45(() => {
     const trigger = triggerRef.current;
     if (!trigger) return;
@@ -32810,7 +32883,7 @@ function PresentationModeControl() {
         children: /* @__PURE__ */ jsx63(Icon, { icon: "fa-solid fa-display" })
       }
     ),
-    /* @__PURE__ */ jsx63(
+    options.length > 1 && /* @__PURE__ */ jsx63(
       "button",
       {
         ref: triggerRef,
@@ -32857,7 +32930,7 @@ function PresentationModeControl() {
             const nextIndex = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : event.key === "ArrowUp" ? (currentIndex - 1 + items.length) % items.length : (currentIndex + 1) % items.length;
             items[nextIndex]?.focus();
           },
-          children: PRESENTATION_OPTIONS.map((option) => {
+          children: options.map((option) => {
             const isSelected = option.target === selectedTarget;
             const disabled = option.target === "fullscreen" && !fullscreenSupported;
             return /* @__PURE__ */ jsxs47(
@@ -34431,6 +34504,9 @@ function EditorShell({
   toolbarSlotRight,
   statusBarSlotRight,
   showPlayTab = true,
+  allowPresentationWindow = true,
+  allowPresentationFullscreen = true,
+  allowPrint = true,
   submitOnEnter,
   codeContext,
   fullWidth = false,
@@ -34525,6 +34601,9 @@ function EditorShell({
           toolbarSlotRight,
           statusBarSlotRight,
           showPlayTab,
+          allowPresentationWindow,
+          allowPresentationFullscreen,
+          allowPrint,
           submitOnEnter,
           codeContext,
           fullWidth,
@@ -34547,20 +34626,30 @@ function EditorShell({
     }
   ) });
 }
-function UseModeToolbarControls() {
+function UseModeToolbarControls({ allowPrint }) {
   const printMode = usePrintMode();
   if (printMode.active) return /* @__PURE__ */ jsx71(PrintPreviewToolbar, {});
   return /* @__PURE__ */ jsxs53(Fragment21, { children: [
     /* @__PURE__ */ jsx71(PreviewToolbarControls, {}),
     /* @__PURE__ */ jsx71(PresentationModeControl, {}),
-    /* @__PURE__ */ jsx71(PrintModeControl, {})
+    allowPrint && /* @__PURE__ */ jsx71(PrintModeControl, {})
   ] });
 }
 function UseModeProviders({
   rootRef,
-  children
+  children,
+  allowPresentationWindow,
+  allowPresentationFullscreen
 }) {
-  return /* @__PURE__ */ jsx71(PresentationModeProvider, { rootRef, children: /* @__PURE__ */ jsx71(PrintModeProvider, { rootRef, children }) });
+  return /* @__PURE__ */ jsx71(
+    PresentationModeProvider,
+    {
+      rootRef,
+      allowWindow: allowPresentationWindow,
+      allowFullscreen: allowPresentationFullscreen,
+      children: /* @__PURE__ */ jsx71(PrintModeProvider, { rootRef, children })
+    }
+  );
 }
 function EditorShellInner({
   basePath,
@@ -34579,6 +34668,9 @@ function EditorShellInner({
   toolbarSlotRight,
   statusBarSlotRight,
   showPlayTab,
+  allowPresentationWindow,
+  allowPresentationFullscreen,
+  allowPrint,
   submitOnEnter,
   codeContext,
   fullWidth,
@@ -34837,109 +34929,126 @@ ${snippet}` : snippet);
       },
       ...containerProps,
       children: [
-        /* @__PURE__ */ jsx71(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx71(PreviewSettingsProvider, { doc, themeOverride, children: /* @__PURE__ */ jsxs53(UseModeProviders, { rootRef: shellRef, children: [
-          isImageMode ? (toolbarSlotLeft || toolbarSlotRight) && /* @__PURE__ */ jsxs53("div", { className: "squisq-editor-header squisq-editor-header--image", children: [
-            toolbarSlotLeft,
-            /* @__PURE__ */ jsx71("div", { style: { flex: 1 } }),
-            toolbarSlotRight
-          ] }) : /* @__PURE__ */ jsx71("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx71(
-            Toolbar,
-            {
-              showFiles,
-              fileCount: mediaCount,
-              onToggleFiles: !isCodeMode && filesToggleEnabled ? handleToggleFiles : void 0,
-              slotLeft: toolbarSlotLeft,
-              slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx71(UseModeToolbarControls, {}),
-              slotAfterActions: toolbarSlotAfterActions,
-              slotRight: toolbarSlotRight,
-              showPlayTab
-            }
-          ) }),
-          /* @__PURE__ */ jsxs53(
-            "div",
-            {
-              className: "squisq-editor-content",
-              style: {
-                flex: autoGrow ? "1 1 auto" : 1,
-                overflowY: autoGrow ? "auto" : "hidden",
-                overflowX: "hidden",
-                minHeight: 0,
-                position: "relative",
-                display: "flex"
-              },
-              children: [
-                /* @__PURE__ */ jsxs53(
-                  "div",
-                  {
-                    style: {
-                      flex: autoGrow ? "1 1 auto" : 1,
-                      overflow: autoGrow ? "visible" : "hidden",
-                      minHeight: 0,
-                      position: "relative"
-                    },
-                    children: [
-                      isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx71(
-                        ImageEditor,
-                        {
-                          filesContainer: imageEditorContainer,
-                          initialSrc: imageSrc,
-                          allowVersioning,
-                          versioningAutoSaveIdleMs,
-                          onExport: onImageExport,
-                          surface: colorScheme === "dark" ? DARK_SURFACE : LIGHT_SURFACE
-                        }
-                      ) : /* @__PURE__ */ jsx71(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
-                      !isImageMode && activeView === "raw" && /* @__PURE__ */ jsxs53("div", { className: "squisq-editor-with-gutter", children: [
-                        isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx71(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                        isCardMode ? /* @__PURE__ */ jsx71(
-                          BlockCardView,
-                          {
-                            blockCount,
-                            activeBlockKey,
-                            onPrev: prevBlock,
-                            onNext: nextBlock,
-                            onAdd: addBlock,
-                            children: /* @__PURE__ */ jsx71("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx71(
+        /* @__PURE__ */ jsx71(CustomThemeProvider, { docThemes, onDocThemesChange, children: /* @__PURE__ */ jsx71(PreviewSettingsProvider, { doc, themeOverride, children: /* @__PURE__ */ jsxs53(
+          UseModeProviders,
+          {
+            rootRef: shellRef,
+            allowPresentationWindow,
+            allowPresentationFullscreen,
+            children: [
+              isImageMode ? (toolbarSlotLeft || toolbarSlotRight) && /* @__PURE__ */ jsxs53("div", { className: "squisq-editor-header squisq-editor-header--image", children: [
+                toolbarSlotLeft,
+                /* @__PURE__ */ jsx71("div", { style: { flex: 1 } }),
+                toolbarSlotRight
+              ] }) : /* @__PURE__ */ jsx71("div", { className: "squisq-editor-header", children: /* @__PURE__ */ jsx71(
+                Toolbar,
+                {
+                  showFiles,
+                  fileCount: mediaCount,
+                  onToggleFiles: !isCodeMode && filesToggleEnabled ? handleToggleFiles : void 0,
+                  slotLeft: toolbarSlotLeft,
+                  slotAfterTabs: !isCodeMode && isPreview && /* @__PURE__ */ jsx71(UseModeToolbarControls, { allowPrint }),
+                  slotAfterActions: toolbarSlotAfterActions,
+                  slotRight: toolbarSlotRight,
+                  showPlayTab
+                }
+              ) }),
+              /* @__PURE__ */ jsxs53(
+                "div",
+                {
+                  className: "squisq-editor-content",
+                  style: {
+                    flex: autoGrow ? "1 1 auto" : 1,
+                    overflowY: autoGrow ? "auto" : "hidden",
+                    overflowX: "hidden",
+                    minHeight: 0,
+                    position: "relative",
+                    display: "flex"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsxs53(
+                      "div",
+                      {
+                        style: {
+                          flex: autoGrow ? "1 1 auto" : 1,
+                          overflow: autoGrow ? "visible" : "hidden",
+                          minHeight: 0,
+                          position: "relative"
+                        },
+                        children: [
+                          isImageMode && imageSrc && (imageMode === "edit" && imageEditorContainer ? /* @__PURE__ */ jsx71(
+                            ImageEditor,
+                            {
+                              filesContainer: imageEditorContainer,
+                              initialSrc: imageSrc,
+                              allowVersioning,
+                              versioningAutoSaveIdleMs,
+                              onExport: onImageExport,
+                              surface: colorScheme === "dark" ? DARK_SURFACE : LIGHT_SURFACE
+                            }
+                          ) : /* @__PURE__ */ jsx71(ImageViewer, { src: imageSrc, alt: imageAlt, theme: colorScheme })),
+                          !isImageMode && activeView === "raw" && /* @__PURE__ */ jsxs53("div", { className: "squisq-editor-with-gutter", children: [
+                            isMarkdownMode && outlineVisible && /* @__PURE__ */ jsx71(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                            isCardMode ? /* @__PURE__ */ jsx71(
+                              BlockCardView,
+                              {
+                                blockCount,
+                                activeBlockKey,
+                                onPrev: prevBlock,
+                                onNext: nextBlock,
+                                onAdd: addBlock,
+                                children: /* @__PURE__ */ jsx71("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx71(
+                                  RawEditor,
+                                  {
+                                    monacoTheme: colorScheme === "dark" ? "vs-dark" : "vs",
+                                    submitOnEnter,
+                                    readOnly
+                                  }
+                                ) }, "raw-editor")
+                              },
+                              "raw-card"
+                            ) : /* @__PURE__ */ jsx71("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx71(
                               RawEditor,
                               {
                                 monacoTheme: colorScheme === "dark" ? "vs-dark" : "vs",
                                 submitOnEnter,
                                 readOnly
                               }
-                            ) }, "raw-editor")
-                          },
-                          "raw-card"
-                        ) : /* @__PURE__ */ jsx71("div", { className: "squisq-raw-editor-container", children: /* @__PURE__ */ jsx71(
-                          RawEditor,
-                          {
-                            monacoTheme: colorScheme === "dark" ? "vs-dark" : "vs",
-                            submitOnEnter,
-                            readOnly
-                          }
-                        ) }, "raw-editor"),
-                        isCodeMode && codeContext && /* @__PURE__ */ jsx71(CodeContextZones, { options: codeContext }, "code-context"),
-                        isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx71(BlockPreviewPanel, { basePath }, "block-preview"),
-                        isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx71(
-                          InlinePreviewGutter,
-                          {
-                            width: inlinePreviewWidth,
-                            basePath,
-                            mediaProvider
-                          },
-                          "inline"
-                        )
-                      ] }, "raw-shell"),
-                      isMarkdownMode && activeView === "wysiwyg" && /* @__PURE__ */ jsxs53("div", { className: "squisq-editor-with-gutter", children: [
-                        outlineVisible && /* @__PURE__ */ jsx71(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
-                        isCardMode ? /* @__PURE__ */ jsx71(
-                          BlockCardView,
-                          {
-                            blockCount,
-                            activeBlockKey,
-                            onPrev: prevBlock,
-                            onNext: nextBlock,
-                            onAdd: addBlock,
-                            children: /* @__PURE__ */ jsx71(
+                            ) }, "raw-editor"),
+                            isCodeMode && codeContext && /* @__PURE__ */ jsx71(CodeContextZones, { options: codeContext }, "code-context"),
+                            isMarkdownMode && isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx71(BlockPreviewPanel, { basePath }, "block-preview"),
+                            isMarkdownMode && !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx71(
+                              InlinePreviewGutter,
+                              {
+                                width: inlinePreviewWidth,
+                                basePath,
+                                mediaProvider
+                              },
+                              "inline"
+                            )
+                          ] }, "raw-shell"),
+                          isMarkdownMode && activeView === "wysiwyg" && /* @__PURE__ */ jsxs53("div", { className: "squisq-editor-with-gutter", children: [
+                            outlineVisible && /* @__PURE__ */ jsx71(OutlinePanel, { width: outlineWidth, readOnly }, "outline"),
+                            isCardMode ? /* @__PURE__ */ jsx71(
+                              BlockCardView,
+                              {
+                                blockCount,
+                                activeBlockKey,
+                                onPrev: prevBlock,
+                                onNext: nextBlock,
+                                onAdd: addBlock,
+                                children: /* @__PURE__ */ jsx71(
+                                  WysiwygEditor,
+                                  {
+                                    submitOnEnter,
+                                    placeholder,
+                                    readOnly
+                                  },
+                                  "wysiwyg-editor"
+                                )
+                              },
+                              "wysiwyg-card"
+                            ) : /* @__PURE__ */ jsx71(
                               WysiwygEditor,
                               {
                                 submitOnEnter,
@@ -34947,60 +35056,51 @@ ${snippet}` : snippet);
                                 readOnly
                               },
                               "wysiwyg-editor"
+                            ),
+                            isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx71(BlockPreviewPanel, { basePath }, "block-preview"),
+                            !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx71(
+                              InlinePreviewGutter,
+                              {
+                                width: inlinePreviewWidth,
+                                basePath,
+                                mediaProvider
+                              },
+                              "inline"
                             )
-                          },
-                          "wysiwyg-card"
-                        ) : /* @__PURE__ */ jsx71(
-                          WysiwygEditor,
-                          {
-                            submitOnEnter,
-                            placeholder,
-                            readOnly
-                          },
-                          "wysiwyg-editor"
-                        ),
-                        isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx71(BlockPreviewPanel, { basePath }, "block-preview"),
-                        !isCardMode && inlinePreviewVisible && /* @__PURE__ */ jsx71(
-                          InlinePreviewGutter,
-                          {
-                            width: inlinePreviewWidth,
-                            basePath,
-                            mediaProvider
-                          },
-                          "inline"
-                        )
-                      ] }, "wysiwyg-shell"),
-                      isMarkdownMode && isPreview && /* @__PURE__ */ jsx71(PreviewPanel, { basePath, workspaceContainer })
-                    ]
-                  }
-                ),
-                isMarkdownMode && showFiles && /* @__PURE__ */ jsx71(
-                  MediaBin,
-                  {
-                    mediaProvider,
-                    isDark,
-                    refreshKey: mediaListRefreshKey,
-                    usedMediaPaths,
-                    onMediaUploaded: handleMediaUploaded,
-                    onMediaRemoved: handleMediaRemoved,
-                    onCountChange: setMediaCount
-                  }
-                ),
-                isMarkdownMode && /* @__PURE__ */ jsx71(ThemeDesignerDock, {}),
-                isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx71(
-                  DropZoneOverlay,
-                  {
-                    dragContentType,
-                    zoneProps,
-                    hasMediaProvider: mediaProvider !== null
-                  }
-                )
-              ]
-            }
-          ),
-          isTimelineMode && /* @__PURE__ */ jsx71(TimelineTrack, {}),
-          statusBarVisible && !isImageMode && /* @__PURE__ */ jsx71(StatusBar, { slotRight: statusBarSlotRight })
-        ] }) }) }),
+                          ] }, "wysiwyg-shell"),
+                          isMarkdownMode && isPreview && /* @__PURE__ */ jsx71(PreviewPanel, { basePath, workspaceContainer })
+                        ]
+                      }
+                    ),
+                    isMarkdownMode && showFiles && /* @__PURE__ */ jsx71(
+                      MediaBin,
+                      {
+                        mediaProvider,
+                        isDark,
+                        refreshKey: mediaListRefreshKey,
+                        usedMediaPaths,
+                        onMediaUploaded: handleMediaUploaded,
+                        onMediaRemoved: handleMediaRemoved,
+                        onCountChange: setMediaCount
+                      }
+                    ),
+                    isMarkdownMode && /* @__PURE__ */ jsx71(ThemeDesignerDock, {}),
+                    isMarkdownMode && isDragging && !(activeView === "wysiwyg" && dragContentType === "media") && /* @__PURE__ */ jsx71(
+                      DropZoneOverlay,
+                      {
+                        dragContentType,
+                        zoneProps,
+                        hasMediaProvider: mediaProvider !== null
+                      }
+                    )
+                  ]
+                }
+              ),
+              isTimelineMode && /* @__PURE__ */ jsx71(TimelineTrack, {}),
+              statusBarVisible && !isImageMode && /* @__PURE__ */ jsx71(StatusBar, { slotRight: statusBarSlotRight })
+            ]
+          }
+        ) }) }),
         /* @__PURE__ */ jsx71(TooltipLayer, {}),
         imageEditTarget !== null && mediaProvider && /* @__PURE__ */ jsx71(
           ImageEditModal,

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CodeContext, S as SceneTextChannel } from './shell-DYdK5qFd.js';
-export { B as BlockTagVisibility, a as CodeContextSection, D as DocumentLinkCandidate, b as DocumentLinkProvider, E as EditorActions, c as EditorColorScheme, d as EditorContextValue, e as EditorMode, f as EditorProvider, g as EditorProviderProps, h as EditorShell, i as EditorShellProps, j as EditorState, k as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, l as MentionProvider, P as PreviewPanel, m as PreviewPanelProps, R as RawEditor, n as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, W as WriteCanvasSettings, o as WysiwygEditor, p as WysiwygEditorProps, u as useEditorContext } from './shell-DYdK5qFd.js';
+import { C as CodeContext, S as SceneTextChannel } from './shell-YIIUac26.js';
+export { B as BlockTagVisibility, a as CodeContextSection, D as DocumentLinkCandidate, b as DocumentLinkProvider, E as EditorActions, c as EditorColorScheme, d as EditorContextValue, e as EditorMode, f as EditorProvider, g as EditorProviderProps, h as EditorShell, i as EditorShellProps, j as EditorState, k as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, l as MentionProvider, P as PreviewPanel, m as PreviewPanelProps, R as RawEditor, n as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, W as WriteCanvasSettings, o as WysiwygEditor, p as WysiwygEditorProps, u as useEditorContext } from './shell-YIIUac26.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';
@@ -8,6 +8,7 @@ import { MediaProvider, Theme, CustomTemplateDefinition, ThemeSeedColors, Viewpo
 import { IconFamily } from '@bendyline/squisq/icons';
 import { DisplayMode, CaptionStyle } from '@bendyline/squisq-react';
 import * as monaco_editor from 'monaco-editor';
+export { MonacoWorkerConstructor, MonacoWorkerConstructors, configureMonacoWorkers } from './monaco-workers/index.js';
 import { ConnectorRouting, AsciiDiagram, Tree, AsciiTimeline, AsciiTimelineSide, AsciiTimelineMarker } from '@bendyline/squisq/doc';
 import * as _tiptap_core from '@tiptap/core';
 import { Extension } from '@tiptap/core';
@@ -1298,63 +1299,6 @@ interface UseMonacoLoaderResult {
  */
 declare function useMonacoLoader(): UseMonacoLoaderResult;
 
-/**
- * Monaco language-service worker wiring.
- *
- * Monaco offloads its heavy language services — css / html / json / typescript
- * IntelliSense — plus a base editor service (word-based completions, link
- * detection, diffing) to web workers. Those worker bundles must be produced by
- * the HOST application's bundler: the mechanisms for it (Vite's `?worker`
- * import suffix, `new Worker(new URL(...))`, webpack loaders) are all
- * bundler-specific and cannot live inside this tsup-built library.
- *
- * So the division of labor is: the host supplies the five worker constructors
- * (one line each with Vite's `?worker`), and this helper owns the
- * `label → worker` mapping — the part that's fiddly and easy to get wrong.
- *
- * Call once, before the first editor mounts (typically in the app entry):
- *
- * ```ts
- * import { configureMonacoWorkers } from '@bendyline/squisq-editor-react';
- * import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
- * import JsonWorker   from 'monaco-editor/esm/vs/language/json/json.worker?worker';
- * import CssWorker    from 'monaco-editor/esm/vs/language/css/css.worker?worker';
- * import HtmlWorker   from 'monaco-editor/esm/vs/language/html/html.worker?worker';
- * import TsWorker     from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
- *
- * configureMonacoWorkers({
- *   editor: EditorWorker, json: JsonWorker, css: CssWorker,
- *   html: HtmlWorker, ts: TsWorker,
- * });
- * ```
- *
- * This is purely additive: without it, highlighting, editing, and custom
- * completion providers (e.g. the `{[template]}` typeahead) still work — they
- * run on the main thread. Only the language-service IntelliSense is dormant
- * until the workers are wired.
- */
-/** Zero-arg worker constructor, as produced by Vite's `?worker` import. */
-type MonacoWorkerConstructor = new () => Worker;
-interface MonacoWorkerConstructors {
-    /** Base editor worker (word completions, links, diff). Required. */
-    editor: MonacoWorkerConstructor;
-    /** JSON language service. */
-    json?: MonacoWorkerConstructor;
-    /** CSS/SCSS/LESS language service. */
-    css?: MonacoWorkerConstructor;
-    /** HTML/Handlebars/Razor language service. */
-    html?: MonacoWorkerConstructor;
-    /** TypeScript service — also handles JavaScript. */
-    ts?: MonacoWorkerConstructor;
-}
-/**
- * Install `globalThis.MonacoEnvironment.getWorker` so Monaco routes each
- * language to the matching worker, falling back to the base editor worker for
- * any label without a dedicated service (which is every plain language — its
- * grammar-based highlighting needs no worker).
- */
-declare function configureMonacoWorkers(workers: MonacoWorkerConstructors): void;
-
 interface CustomTemplateContextValue {
     /** Templates inlined into the current doc's frontmatter. */
     docTemplates: CustomTemplateDefinition[];
@@ -2705,4 +2649,4 @@ declare function applyTimelineCommand(editor: Editor, blockId: string, command:
 /** Paste gate for bare, high-confidence Unicode timeline art. */
 declare function shouldPasteAsTimelineFence(text: string): boolean;
 
-export { ALL_PICKER_ENTRIES, type AddTimelineEventOptions, type AddTimelineEventResult, type ApplyAsciiDiagramCommandOptions, type AsciiDiagramBlockEntry, AsciiDiagramExtension, type AsciiDiagramExtensionOptions, type AsciiDiagramPluginState, type AsciiDiagramView, AsciiDiagramWidget, BlockCardView, type BlockCardViewProps, type BlockNavigator, BlockPropertiesPopover, type BlockPropertiesPopoverProps, type BlockRange, type BlockSlice, CODE_SNIPPET_KEY, CODE_SNIPPET_LANGUAGES, CodeContext, CodeContextZones, type CodeSnippetBlockEntry, type CodeSnippetData, CodeSnippetExtension, type CodeSnippetExtensionOptions, type CodeSnippetLanguage, type CodeSnippetPluginState, CodeSnippetWidget, type CodeSnippetWidgetProps, type CustomTemplateContextValue, CustomTemplateProvider, type CustomTemplateProviderProps, type CustomThemeContextValue, CustomThemeProvider, type CustomThemeProviderProps, DEFAULT_MERMAID_DIAGRAM_TYPE, DiagramCanvas, type DiagramCommand, type DiagramData, type DiagramEdge, type DiagramNode, type DirectionModel, type DocCustomTemplates, type DocCustomThemes, DocumentSettingsDialog, type DocumentSettingsDialogProps, type DragContentType, type DropTarget, DropZoneOverlay, type DropZoneOverlayProps, EMPTY_TRANSITION, EmojiPicker, type EmojiPickerProps, type FileCategory, type FileKind, type FolderEntry, FolderView, type FolderViewProps, type HeadingTransitionAttrs, HeadingWithTemplate, ImportThemeSection, type ImportThemeSectionProps, type ImportedThemeResult, InlinePreviewGutter, type InlinePreviewGutterProps, MERMAID_DIAGRAM_KEY, MERMAID_DIAGRAM_TYPES, MERMAID_FLOWCHART_SHAPES, MediaBin, type MediaBinProps, type MediaClipPatch, type MermaidDiagramBlockEntry, MermaidDiagramCanvas, type MermaidDiagramCanvasProps, type MermaidDiagramCategory, type MermaidDiagramData, MermaidDiagramExtension, type MermaidDiagramExtensionOptions, type MermaidDiagramPluginState, type MermaidDiagramPreview, type MermaidDiagramProperty, type MermaidDiagramType, MermaidDiagramTypeThumbnail, MermaidDiagramWidget, type MermaidDiagramWidgetProps, type MermaidEditCapabilities, type MermaidEditableDiagramKind, type MermaidEditableEdge, type MermaidEditableModel, type MermaidEditableNode, type MermaidEditableText, type MermaidEditableTextTarget, type MermaidFlowchartDirection, type MermaidFlowchartModel, type MermaidFlowchartShape, type MermaidFlowchartShapeId, type MermaidNodeCanvasAction, type MermaidRenderResult, type MermaidSelection, MermaidShapePalette, type MermaidShapePaletteProps, type MermaidSourceEditableModel, type MonacoWorkerConstructor, type MonacoWorkerConstructors, OutlinePanel, type OutlinePanelProps, PICKER_CATEGORIES, type PickerCategory, type PickerEntry, PlainHtmlPreview, type PlainHtmlPreviewProps, PreviewFormatSwitch, PreviewModeMenu, PreviewModeSwitch, type PreviewSettings, PreviewSettingsProvider, PreviewToolbarControls, REPAIRABLE_KEY, type RepairableBlockEntry, RepairableDiagramExtension, type RepairableDiagramExtensionOptions, type RepairablePluginState, StatusBar, type StatusBarProps, TIMELINE_VIEW_KEY, TRANSITION_ENTRIES, TRANSITION_GROUPS, TemplatePicker, ThemeCustomizerPanel, type ThemeCustomizerPanelProps, ThemePicker, type ThemePickerProps, type ThemeSaveExtras, type TimelineBlockEntry, type TimelineCommand, type TimelineCommandResult, TimelineEditorWidget, type TimelineEditorWidgetProps, type TimelineEventPatch, TimelineTrack, type TimelineTrackProps, type TimelineViewData, TimelineViewExtension, type TimelineViewExtensionOptions, type TimelineViewPluginState, Toolbar, type ToolbarProps, TooltipLayer, type TransitionCatalogEntry, type TransitionFields, type TransitionGroup, TransitionPicker, type TransitionPickerProps, type TreeBlockEntry, type TreeCommand, TreeOutlineWidget, type TreeViewData, TreeViewExtension, type TreeViewExtensionOptions, type TreeViewPluginState, type UseBlockNavigatorOptions, type UseFileDropOptions, type UseFileDropResult, type UseMonacoLoaderResult, VersionHistoryPanel, ViewMenuPanel, ViewSwitcher, type ViewSwitcherProps, addEdgeOp, addItemOp, addNodeOp, addTimelineEventOp, applyAsciiDiagramCommand, applyRepairCommand, applyTimelineCommand, applyTreeCommand, asciiDiagramToCanvas, buildPreviewDoc, classifyFile, codeSnippetFenceLanguageToken, codeSnippetLanguageLabel, codeSnippetMarkdown, configureMonacoWorkers, detectLanguageFromFileName, draftPatchFromImportedTheme, findAsciiDiagramBlockPos, findCodeSnippetBlockPos, findMermaidDiagramBlockPos, findRepairableBlockPos, findTimelineBlockPos, findTransitionEntry, findTreeBlockPos, formatSeconds, getBlockSlices, getTimelineForNode, indentItemOp, inspectMermaidSource, isAsciiSourceVisible, isCodeSnippetFenceLanguage, isCodeSnippetNode, isMermaidDiagramNode, isMermaidFlowchartShapeId, isMermaidSourceVisible, isRepairableFence, isTimelineSourceSafeForSemanticEdit, lineToOffset, markdownToTiptap, mermaidDiagramMarkdown, mermaidDiagramProperties, mermaidEditCapabilities, mermaidEditableTexts, mermaidErrorMessage, monacoLanguageForFence, moveItemDownOp, moveItemUpOp, moveNodeOp, nextTimelineEventId, normalizeMermaidFlowchartShape, offsetToLine, outdentItemOp, parseTimelineForNode, partitionFiles, processMediaFiles, processTextFile, processTextFiles, readBlockAttrsParams, readBlockAttrsTransition, readBlockAttrsValue, readHeadingLineTransition, removeEdgeOp, removeItemOp, removeNodeOp, removeTimelineEventOp, renameItemOp, renameNodeOp, renderMermaidDiagram, replaceAsciiFenceText, replaceCodeSnippetText, replaceAsciiFenceText as replaceTreeFenceText, resizeNodeOp, resolveFileKind, sanitizeAsciiLabel, sanitizeTimelineText, sanitizeTreeLabel, searchPickerEntries, setBlockAttrsValue, setBlockDurationInSource, setHeadingAttrsTransition, setHeadingLineTransition, setMediaClipInSource, shouldPasteAsAsciiFence, shouldPasteAsTimelineFence, shouldPasteAsTreeFence, sliceIndexAtOffset, spliceBlock, summarizeBlockProps, templateLabel, tiptapToMarkdown, toggleAsciiSource, toggleDirOp, toggleMermaidSource, transitionLabel, translateDiagramOp, updateTimelineEventOp, useAsciiDiagramData, useBlockNavigator, useCodeSnippetData, useCustomTemplates, useCustomThemes, useDocCustomTemplates, useDocCustomThemes, useFileDrop, useMermaidDiagramData, useMonacoLoader, usePreviewSettings, useTimelineData, useTreeViewData };
+export { ALL_PICKER_ENTRIES, type AddTimelineEventOptions, type AddTimelineEventResult, type ApplyAsciiDiagramCommandOptions, type AsciiDiagramBlockEntry, AsciiDiagramExtension, type AsciiDiagramExtensionOptions, type AsciiDiagramPluginState, type AsciiDiagramView, AsciiDiagramWidget, BlockCardView, type BlockCardViewProps, type BlockNavigator, BlockPropertiesPopover, type BlockPropertiesPopoverProps, type BlockRange, type BlockSlice, CODE_SNIPPET_KEY, CODE_SNIPPET_LANGUAGES, CodeContext, CodeContextZones, type CodeSnippetBlockEntry, type CodeSnippetData, CodeSnippetExtension, type CodeSnippetExtensionOptions, type CodeSnippetLanguage, type CodeSnippetPluginState, CodeSnippetWidget, type CodeSnippetWidgetProps, type CustomTemplateContextValue, CustomTemplateProvider, type CustomTemplateProviderProps, type CustomThemeContextValue, CustomThemeProvider, type CustomThemeProviderProps, DEFAULT_MERMAID_DIAGRAM_TYPE, DiagramCanvas, type DiagramCommand, type DiagramData, type DiagramEdge, type DiagramNode, type DirectionModel, type DocCustomTemplates, type DocCustomThemes, DocumentSettingsDialog, type DocumentSettingsDialogProps, type DragContentType, type DropTarget, DropZoneOverlay, type DropZoneOverlayProps, EMPTY_TRANSITION, EmojiPicker, type EmojiPickerProps, type FileCategory, type FileKind, type FolderEntry, FolderView, type FolderViewProps, type HeadingTransitionAttrs, HeadingWithTemplate, ImportThemeSection, type ImportThemeSectionProps, type ImportedThemeResult, InlinePreviewGutter, type InlinePreviewGutterProps, MERMAID_DIAGRAM_KEY, MERMAID_DIAGRAM_TYPES, MERMAID_FLOWCHART_SHAPES, MediaBin, type MediaBinProps, type MediaClipPatch, type MermaidDiagramBlockEntry, MermaidDiagramCanvas, type MermaidDiagramCanvasProps, type MermaidDiagramCategory, type MermaidDiagramData, MermaidDiagramExtension, type MermaidDiagramExtensionOptions, type MermaidDiagramPluginState, type MermaidDiagramPreview, type MermaidDiagramProperty, type MermaidDiagramType, MermaidDiagramTypeThumbnail, MermaidDiagramWidget, type MermaidDiagramWidgetProps, type MermaidEditCapabilities, type MermaidEditableDiagramKind, type MermaidEditableEdge, type MermaidEditableModel, type MermaidEditableNode, type MermaidEditableText, type MermaidEditableTextTarget, type MermaidFlowchartDirection, type MermaidFlowchartModel, type MermaidFlowchartShape, type MermaidFlowchartShapeId, type MermaidNodeCanvasAction, type MermaidRenderResult, type MermaidSelection, MermaidShapePalette, type MermaidShapePaletteProps, type MermaidSourceEditableModel, OutlinePanel, type OutlinePanelProps, PICKER_CATEGORIES, type PickerCategory, type PickerEntry, PlainHtmlPreview, type PlainHtmlPreviewProps, PreviewFormatSwitch, PreviewModeMenu, PreviewModeSwitch, type PreviewSettings, PreviewSettingsProvider, PreviewToolbarControls, REPAIRABLE_KEY, type RepairableBlockEntry, RepairableDiagramExtension, type RepairableDiagramExtensionOptions, type RepairablePluginState, StatusBar, type StatusBarProps, TIMELINE_VIEW_KEY, TRANSITION_ENTRIES, TRANSITION_GROUPS, TemplatePicker, ThemeCustomizerPanel, type ThemeCustomizerPanelProps, ThemePicker, type ThemePickerProps, type ThemeSaveExtras, type TimelineBlockEntry, type TimelineCommand, type TimelineCommandResult, TimelineEditorWidget, type TimelineEditorWidgetProps, type TimelineEventPatch, TimelineTrack, type TimelineTrackProps, type TimelineViewData, TimelineViewExtension, type TimelineViewExtensionOptions, type TimelineViewPluginState, Toolbar, type ToolbarProps, TooltipLayer, type TransitionCatalogEntry, type TransitionFields, type TransitionGroup, TransitionPicker, type TransitionPickerProps, type TreeBlockEntry, type TreeCommand, TreeOutlineWidget, type TreeViewData, TreeViewExtension, type TreeViewExtensionOptions, type TreeViewPluginState, type UseBlockNavigatorOptions, type UseFileDropOptions, type UseFileDropResult, type UseMonacoLoaderResult, VersionHistoryPanel, ViewMenuPanel, ViewSwitcher, type ViewSwitcherProps, addEdgeOp, addItemOp, addNodeOp, addTimelineEventOp, applyAsciiDiagramCommand, applyRepairCommand, applyTimelineCommand, applyTreeCommand, asciiDiagramToCanvas, buildPreviewDoc, classifyFile, codeSnippetFenceLanguageToken, codeSnippetLanguageLabel, codeSnippetMarkdown, detectLanguageFromFileName, draftPatchFromImportedTheme, findAsciiDiagramBlockPos, findCodeSnippetBlockPos, findMermaidDiagramBlockPos, findRepairableBlockPos, findTimelineBlockPos, findTransitionEntry, findTreeBlockPos, formatSeconds, getBlockSlices, getTimelineForNode, indentItemOp, inspectMermaidSource, isAsciiSourceVisible, isCodeSnippetFenceLanguage, isCodeSnippetNode, isMermaidDiagramNode, isMermaidFlowchartShapeId, isMermaidSourceVisible, isRepairableFence, isTimelineSourceSafeForSemanticEdit, lineToOffset, markdownToTiptap, mermaidDiagramMarkdown, mermaidDiagramProperties, mermaidEditCapabilities, mermaidEditableTexts, mermaidErrorMessage, monacoLanguageForFence, moveItemDownOp, moveItemUpOp, moveNodeOp, nextTimelineEventId, normalizeMermaidFlowchartShape, offsetToLine, outdentItemOp, parseTimelineForNode, partitionFiles, processMediaFiles, processTextFile, processTextFiles, readBlockAttrsParams, readBlockAttrsTransition, readBlockAttrsValue, readHeadingLineTransition, removeEdgeOp, removeItemOp, removeNodeOp, removeTimelineEventOp, renameItemOp, renameNodeOp, renderMermaidDiagram, replaceAsciiFenceText, replaceCodeSnippetText, replaceAsciiFenceText as replaceTreeFenceText, resizeNodeOp, resolveFileKind, sanitizeAsciiLabel, sanitizeTimelineText, sanitizeTreeLabel, searchPickerEntries, setBlockAttrsValue, setBlockDurationInSource, setHeadingAttrsTransition, setHeadingLineTransition, setMediaClipInSource, shouldPasteAsAsciiFence, shouldPasteAsTimelineFence, shouldPasteAsTreeFence, sliceIndexAtOffset, spliceBlock, summarizeBlockProps, templateLabel, tiptapToMarkdown, toggleAsciiSource, toggleDirOp, toggleMermaidSource, transitionLabel, translateDiagramOp, updateTimelineEventOp, useAsciiDiagramData, useBlockNavigator, useCodeSnippetData, useCustomTemplates, useCustomThemes, useDocCustomTemplates, useDocCustomThemes, useFileDrop, useMermaidDiagramData, useMonacoLoader, usePreviewSettings, useTimelineData, useTreeViewData };

package/dist/index.js

@@ -1,3 +1,6 @@
+import {
+  configureMonacoWorkers
+} from "./chunk-BWPFPHWY.js";
 import {
   ALL_PICKER_ENTRIES,
   ANIMATION_SPEED_PRESETS,
@@ -179,7 +182,7 @@ import {
   usePreviewSettings,
   useTimelineData,
   useTreeViewData
-} from "./chunk-6QFPBDTY.js";
+} from "./chunk-QN3Q64LV.js";
 import {
   JsonEditor
 } from "./chunk-54UGTQBO.js";
@@ -664,35 +667,6 @@ function ThemeCustomizerPanel({
     )
   ] });
 }
-
-// src/monacoWorkers.ts
-function configureMonacoWorkers(workers) {
-  const host = globalThis;
-  host.MonacoEnvironment = {
-    getWorker(_workerId, label) {
-      switch (label) {
-        case "json":
-          if (workers.json) return new workers.json();
-          break;
-        case "css":
-        case "scss":
-        case "less":
-          if (workers.css) return new workers.css();
-          break;
-        case "html":
-        case "handlebars":
-        case "razor":
-          if (workers.html) return new workers.html();
-          break;
-        case "typescript":
-        case "javascript":
-          if (workers.ts) return new workers.ts();
-          break;
-      }
-      return new workers.editor();
-    }
-  };
-}
 export {
   ALL_PICKER_ENTRIES,
   AsciiDiagramExtension,

package/dist/monaco-workers/index.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Monaco language-service worker wiring.
+ *
+ * Monaco offloads its heavy language services — css / html / json / typescript
+ * IntelliSense — plus a base editor service (word-based completions, link
+ * detection, diffing) to web workers. Those worker bundles must be produced by
+ * the HOST application's bundler: the mechanisms for it (Vite's `?worker`
+ * import suffix, `new Worker(new URL(...))`, webpack loaders) are all
+ * bundler-specific and cannot live inside this tsup-built library.
+ *
+ * So the division of labor is: the host supplies the five worker constructors
+ * (one line each with Vite's `?worker`), and this helper owns the
+ * `label → worker` mapping — the part that's fiddly and easy to get wrong.
+ *
+ * Call once, before the first editor mounts (typically in the app entry):
+ *
+ * ```ts
+ * import { configureMonacoWorkers } from '@bendyline/squisq-editor-react/monaco-workers';
+ * import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+ * import JsonWorker   from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+ * import CssWorker    from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+ * import HtmlWorker   from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+ * import TsWorker     from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+ *
+ * configureMonacoWorkers({
+ *   editor: EditorWorker, json: JsonWorker, css: CssWorker,
+ *   html: HtmlWorker, ts: TsWorker,
+ * });
+ * ```
+ *
+ * This is purely additive: without it, highlighting, editing, and custom
+ * completion providers (e.g. the `{[template]}` typeahead) still work — they
+ * run on the main thread. Only the language-service IntelliSense is dormant
+ * until the workers are wired.
+ */
+/** Zero-arg worker constructor, as produced by Vite's `?worker` import. */
+type MonacoWorkerConstructor = new () => Worker;
+interface MonacoWorkerConstructors {
+    /** Base editor worker (word completions, links, diff). Required. */
+    editor: MonacoWorkerConstructor;
+    /** JSON language service. */
+    json?: MonacoWorkerConstructor;
+    /** CSS/SCSS/LESS language service. */
+    css?: MonacoWorkerConstructor;
+    /** HTML/Handlebars/Razor language service. */
+    html?: MonacoWorkerConstructor;
+    /** TypeScript service — also handles JavaScript. */
+    ts?: MonacoWorkerConstructor;
+}
+/**
+ * Install `globalThis.MonacoEnvironment.getWorker` so Monaco routes each
+ * language to the matching worker, falling back to the base editor worker for
+ * any label without a dedicated service (which is every plain language — its
+ * grammar-based highlighting needs no worker).
+ */
+declare function configureMonacoWorkers(workers: MonacoWorkerConstructors): void;
+
+export { type MonacoWorkerConstructor, type MonacoWorkerConstructors, configureMonacoWorkers };

package/dist/monaco-workers/index.js

@@ -0,0 +1,6 @@
+import {
+  configureMonacoWorkers
+} from "../chunk-BWPFPHWY.js";
+export {
+  configureMonacoWorkers
+};

package/dist/monaco.js

@@ -1,3 +1,68 @@
 // src/monaco.ts
 import "monaco-editor/esm/vs/editor/editor.main.js";
+import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
+
+// src/monacoJsonc.ts
+var JSONC_LANGUAGE = {
+  defaultToken: "",
+  // Reuse Monaco's JSON token scopes so built-in and host themes color JSONC
+  // exactly like JSON instead of requiring JSONC-specific theme rules.
+  tokenPostfix: ".json",
+  brackets: [
+    { open: "{", close: "}", token: "delimiter.bracket" },
+    { open: "[", close: "]", token: "delimiter.array" }
+  ],
+  tokenizer: {
+    root: [
+      { include: "@whitespace" },
+      [/[{}[\]]/, "@brackets"],
+      [/[,:]/, "delimiter"],
+      [/-?\d+(?:\.\d+)?(?:[eE][+-]?\d+)?/, "number"],
+      [/"(?:[^"\\]|\\.)*"(?=\s*:)/, "string.key"],
+      [/"(?:[^"\\]|\\.)*"/, "string.value"],
+      [/\b(?:true|false|null)\b/, "keyword"]
+    ],
+    whitespace: [
+      [/[ \t\r\n]+/, ""],
+      [/\/\*/, "comment", "@comment"],
+      [/\/\/.*$/, "comment"]
+    ],
+    comment: [
+      [/[^*/]+/, "comment"],
+      [/\*\//, "comment", "@pop"],
+      [/[*/]/, "comment"]
+    ]
+  }
+};
+var JSONC_CONFIGURATION = {
+  comments: { lineComment: "//", blockComment: ["/*", "*/"] },
+  brackets: [
+    ["{", "}"],
+    ["[", "]"]
+  ],
+  autoClosingPairs: [
+    { open: "{", close: "}" },
+    { open: "[", close: "]" },
+    { open: '"', close: '"', notIn: ["string"] }
+  ],
+  surroundingPairs: [
+    { open: "{", close: "}" },
+    { open: "[", close: "]" },
+    { open: '"', close: '"' }
+  ]
+};
+function registerJsoncLanguage(monaco2) {
+  if (monaco2.languages.getLanguages().some(({ id }) => id === "jsonc")) return;
+  monaco2.languages.register({
+    id: "jsonc",
+    aliases: ["JSONC", "JSON with Comments", "jsonc"],
+    extensions: [".jsonc"],
+    mimetypes: ["application/jsonc"]
+  });
+  monaco2.languages.setLanguageConfiguration("jsonc", JSONC_CONFIGURATION);
+  monaco2.languages.setMonarchTokensProvider("jsonc", JSONC_LANGUAGE);
+}
+
+// src/monaco.ts
 export * from "monaco-editor/esm/vs/editor/editor.api.js";
+registerJsoncLanguage(monaco);

package/dist/shell/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BlockTagVisibility, D as DocumentLinkCandidate, b as DocumentLinkProvider, E as EditorActions, c as EditorColorScheme, d as EditorContextValue, e as EditorMode, f as EditorProvider, g as EditorProviderProps, h as EditorShell, i as EditorShellProps, j as EditorState, k as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, l as MentionProvider, P as PreviewPanel, m as PreviewPanelProps, R as RawEditor, n as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, o as WysiwygEditor, p as WysiwygEditorProps, u as useEditorContext } from '../shell-DYdK5qFd.js';
+export { B as BlockTagVisibility, D as DocumentLinkCandidate, b as DocumentLinkProvider, E as EditorActions, c as EditorColorScheme, d as EditorContextValue, e as EditorMode, f as EditorProvider, g as EditorProviderProps, h as EditorShell, i as EditorShellProps, j as EditorState, k as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, l as MentionProvider, P as PreviewPanel, m as PreviewPanelProps, R as RawEditor, n as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, o as WysiwygEditor, p as WysiwygEditorProps, u as useEditorContext } from '../shell-YIIUac26.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@bendyline/squisq/schemas';

package/dist/shell/index.js

@@ -5,7 +5,7 @@ import {
   RawEditor,
   WysiwygEditor,
   useEditorContext
-} from "../chunk-6QFPBDTY.js";
+} from "../chunk-QN3Q64LV.js";
 import "../chunk-NITZVAXL.js";
 import "../chunk-V44VP242.js";
 import "../chunk-MJJK7YQB.js";

package/dist/{shell-DYdK5qFd.d.ts → shell-YIIUac26.d.ts}

@@ -727,6 +727,18 @@ interface EditorShellProps {
      * sense (e.g. editing free-form prompt documents). Defaults to true.
      */
     showPlayTab?: boolean;
+    /**
+     * Whether Use mode may open its audience view in a separate browser window.
+     * Defaults to true. Disable this in embedded hosts that block popups.
+     */
+    allowPresentationWindow?: boolean;
+    /**
+     * Whether Use mode may enter browser full screen. Defaults to true. Disable
+     * this in embedded hosts whose webview does not support the Fullscreen API.
+     */
+    allowPresentationFullscreen?: boolean;
+    /** Whether to offer print preview and browser printing. Defaults to true. */
+    allowPrint?: boolean;
     /**
      * Optional "submit on Enter" callback. When provided, a plain Enter
      * keypress fires this callback instead of inserting a newline, and
@@ -983,7 +995,7 @@ interface EditorShellProps {
  * Complete markdown editor shell with toolbar, view switcher, and three
  * editing modes: Raw (Monaco), WYSIWYG (Tiptap), and Preview.
  */
-declare function EditorShell({ initialMarkdown, initialView, articleId, basePath, onChange, onLinkClick, colorScheme, className, height, minHeight, maxHeight, mediaProvider, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, statusBarSlotRight, showPlayTab, submitOnEnter, codeContext, fullWidth, uxFont, thinMargins, writeCanvasSettings, showStatusBar, imageDisplayMode, fileName, language, findMode, onFindModeChange, mentionProvider, documentLinkProvider, linkSchemes, allowRecording, allowNarrate, placeholder, readOnly, imageSrc, imageAlt, imageMode, imageEditorContainer, onImageExport, inlinePreview, inlinePreviewWidth, outline, outlineWidth, blockTags, blockTagVisibility, themeInheritance, viewPreferences, onViewPreferencesChange, themeOverride, }: EditorShellProps): react_jsx_runtime.JSX.Element;
+declare function EditorShell({ initialMarkdown, initialView, articleId, basePath, onChange, onLinkClick, colorScheme, className, height, minHeight, maxHeight, mediaProvider, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, statusBarSlotRight, showPlayTab, allowPresentationWindow, allowPresentationFullscreen, allowPrint, submitOnEnter, codeContext, fullWidth, uxFont, thinMargins, writeCanvasSettings, showStatusBar, imageDisplayMode, fileName, language, findMode, onFindModeChange, mentionProvider, documentLinkProvider, linkSchemes, allowRecording, allowNarrate, placeholder, readOnly, imageSrc, imageAlt, imageMode, imageEditorContainer, onImageExport, inlinePreview, inlinePreviewWidth, outline, outlineWidth, blockTags, blockTagVisibility, themeInheritance, viewPreferences, onViewPreferencesChange, themeOverride, }: EditorShellProps): react_jsx_runtime.JSX.Element;
 
 /**
  * RawEditor

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.3.2",
+  "version": "2.3.3",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -44,6 +44,10 @@
       "types": "./dist/monaco.d.ts",
       "import": "./dist/monaco.js"
     },
+    "./monaco-workers": {
+      "types": "./dist/monaco-workers/index.d.ts",
+      "import": "./dist/monaco-workers/index.js"
+    },
     "./shell": {
       "types": "./dist/shell/index.d.ts",
       "import": "./dist/shell/index.js"
@@ -80,9 +84,9 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.3.1",
-    "@bendyline/squisq-formats": "2.3.1",
-    "@bendyline/squisq-react": "2.3.1",
+    "@bendyline/squisq": "2.3.2",
+    "@bendyline/squisq-formats": "2.3.2",
+    "@bendyline/squisq-react": "2.3.2",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@tiptap/extension-image": "2.27.2",
     "@tiptap/extension-link": "2.27.2",