@bendyline/docblocks-react 2.0.0 → 2.1.1

package/README.md

@@ -38,11 +38,19 @@ export default defineConfig({ worker: { format: 'es' } });
 The canonical DocBlocks experience in one component — file explorer, workspace picker, app menu, the Squisq editor with its Editor / Markdown / Play views, and the export pipeline.
 
 ```tsx
-<DocBlocksShell theme="auto" logoUrl="/logo.png" />
+<DocBlocksShell
+  theme="auto"
+  logoUrl="/logo.png"
+  ffmpegWasm={{
+    coreURL: '/ffmpeg-core/ffmpeg-core.js',
+    wasmURL: '/ffmpeg-core/ffmpeg-core.wasm',
+  }}
+/>
 ```
 
 - `theme` — `'light' | 'dark' | 'auto'` (auto follows `prefers-color-scheme`)
 - `logoUrl` — brand mark for the app menu button
+- `ffmpegWasm` — optional same-origin ffmpeg core URLs; supplying them enables the built-in Animated GIF flow on cross-origin-isolated hosts
 
 Storage is abstracted behind the byte-authoritative `FileSystemProviderV2` contract from `@bendyline/docblocks/filesystem`: browser-local (IndexedDB), native folders (File System Access API), transient memory workspaces, or the Electron host. Built-in compatibility facades expose it as `provider.v2`; first-party shell and file-tree operations are v2-first.
 
@@ -74,7 +82,13 @@ import {
 } from '@bendyline/docblocks-react/export';
 ```
 
-The export flow: quick re-export of the last configuration plus the full dialog — format (PDF, Word, PowerPoint, HTML, Markdown), visual theme, and page size.
+The shell overflow also offers **Share link with content embedded**. It creates
+a bounded `#shared(<base64>)` URL containing a compressed, Markdown-only copy
+and an optional initial Use mode. Opening the URL creates a session-only
+workspace; generated links warn after 4,096 characters and are capped at
+32,768 characters.
+
+The export flow: quick re-export of the last configuration plus the full dialog — format (PDF, Word, PowerPoint, EPUB, HTML, Markdown), visual theme, and page size. Hosts that supply `ffmpegWasm` also expose Animated GIF with timing, orientation, captions, looping, and color controls.
 
 ## Hooks
 
@@ -94,7 +108,8 @@ File tree state management over any v2-capable provider — returns the tree, se
 import '@bendyline/docblocks-react/styles';
 ```
 
-One stylesheet (`docblocks.css`) covers all components in both themes. The package also bundles the self-hosted woff2 fonts used by document themes (see `NOTICE.md` at the repo root for licenses).
+One explicit stylesheet import covers the Squisq editor and all DocBlocks components in both
+themes. Theme fonts are supplied by the host application; this package does not bundle fonts.
 
 ## Where new UI belongs
 

package/dist/ExportDialog-VYATD5UC.js

@@ -0,0 +1,9 @@
+import {
+  ExportDialog
+} from "./chunk-3CZ27FOA.js";
+import "./chunk-YBEYTVU2.js";
+import "./chunk-LG6HAWCK.js";
+import "./chunk-EBWYGTN7.js";
+export {
+  ExportDialog
+};

package/dist/{ExportToolbarControls-D2YDWOXW.js → ExportToolbarControls-5HUE3LSX.js}

@@ -1,12 +1,15 @@
 import {
   loadTransformStyleSummaries
-} from "./chunk-4XXSWN3T.js";
+} from "./chunk-YBEYTVU2.js";
+import {
+  Dialog
+} from "./chunk-LG6HAWCK.js";
 import {
   DEFAULT_OPTIONS,
   FORMAT_EXTENSIONS,
   loadLastExportOptions,
   saveExportOptions
-} from "./chunk-DD4VFJQI.js";
+} from "./chunk-EBWYGTN7.js";
 
 // src/Export/ExportToolbarControls.tsx
 import {
@@ -18,18 +21,40 @@ import {
   useRef,
   useMemo
 } from "react";
-import { useEditorContext } from "@bendyline/squisq-editor-react";
+import { useEditorContext, usePreviewSettings } from "@bendyline/squisq-editor-react";
 import { getThemeSummaries } from "@bendyline/squisq/schemas";
 import { parseMarkdown } from "@bendyline/squisq/markdown";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 var ExportDialog = lazy(
-  () => import("./ExportDialog-MEUISWZX.js").then((module) => ({ default: module.ExportDialog }))
+  () => import("./ExportDialog-VYATD5UC.js").then((module) => ({ default: module.ExportDialog }))
+);
+var ShareDialog = lazy(
+  () => import("./ShareDialog-PAMOQQFB.js").then((module) => ({ default: module.ShareDialog }))
 );
 var runExportModulePromise = null;
 function loadRunExportModule() {
-  runExportModulePromise ?? (runExportModulePromise = import("./run-export-ICTZITXC.js"));
+  runExportModulePromise ?? (runExportModulePromise = import("./run-export-Z5BVFLIR.js"));
   return runExportModulePromise;
 }
+var SHARED_USE_MODES = Object.freeze({
+  slideshow: "slideshow",
+  video: "video",
+  page: "linear",
+  document: "page",
+  narrate: "narrate"
+});
+function SharedModeInitializer({ mode }) {
+  const appliedRef = useRef(false);
+  const { setActiveView } = useEditorContext();
+  const { setSelectedDisplayMode } = usePreviewSettings();
+  useEffect(() => {
+    if (appliedRef.current) return;
+    appliedRef.current = true;
+    setSelectedDisplayMode(SHARED_USE_MODES[mode]);
+    setActiveView("preview");
+  }, [mode, setActiveView, setSelectedDisplayMode]);
+  return null;
+}
 var videoExportModulesPromise = null;
 function loadVideoExportModules() {
   videoExportModulesPromise ?? (videoExportModulesPromise = Promise.all([
@@ -43,6 +68,10 @@ function loadVideoExportModules() {
   })));
   return videoExportModulesPromise;
 }
+function exportErrorMessage(caught) {
+  const detail = caught instanceof Error ? caught.message.trim() : "";
+  return detail ? `Export failed: ${detail}` : "Export failed. The document could not be exported.";
+}
 function quickLabel(opts, transformSummaries) {
   const baseExt = FORMAT_EXTENSIONS[opts.format].toUpperCase().replace(".", "");
   const isRecursiveHtml = opts.format === "html" && opts.includeLinkedDocs;
@@ -73,18 +102,26 @@ function ExportToolbarControls({
   saveBlob,
   destinationAdapter,
   trigger = "menu",
-  showVideoExport = true
+  showVideoExport = true,
+  ffmpegWasm,
+  colorScheme = "light",
+  videoExportPalette,
+  shareBaseUrl,
+  initialSharedMode = null
 }) {
   const { markdownSource, markdownDoc } = useEditorContext();
   const [menuOpen, setMenuOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
+  const [shareDialogOpen, setShareDialogOpen] = useState(false);
   const [videoModalOpen, setVideoModalOpen] = useState(false);
+  const [videoOutputFormat, setVideoOutputFormat] = useState("mp4");
   const [videoLoading, setVideoLoading] = useState(false);
   const [videoLoadError, setVideoLoadError] = useState(null);
   const [videoModules, setVideoModules] = useState(null);
   const [videoDoc, setVideoDoc] = useState(null);
   const [transformSummaries, setTransformSummaries] = useState([]);
   const [exporting, setExporting] = useState(false);
+  const [exportError, setExportError] = useState(null);
   const [destinationTarget, setDestinationTarget] = useState(null);
   const destinationRequestRef = useRef(0);
   const menuRef = useRef(null);
@@ -147,27 +184,51 @@ function ExportToolbarControls({
   );
   const handleOpenDialog = useCallback(() => {
     setMenuOpen(false);
+    setExportError(null);
     setDialogOpen(true);
     void refreshDestination(dialogInitial);
   }, [dialogInitial, refreshDestination]);
   const handleCloseDialog = useCallback(() => {
     setDialogOpen(false);
+    setExportError(null);
   }, []);
-  const handleOpenVideoModal = useCallback(async () => {
+  const handleOpenShareDialog = useCallback(() => {
     setMenuOpen(false);
-    setVideoModalOpen(true);
-    setVideoLoading(true);
-    setVideoLoadError(null);
-    try {
-      const modules = videoModules ?? await loadVideoExportModules();
-      setVideoModules(modules);
-      setVideoDoc(modules.markdownToDoc(parseMarkdown(markdownSource)));
-    } catch {
-      setVideoLoadError("Video export could not be loaded.");
-    } finally {
-      setVideoLoading(false);
-    }
-  }, [markdownSource, videoModules]);
+    setShareDialogOpen(true);
+  }, []);
+  const handleCloseShareDialog = useCallback(() => {
+    setShareDialogOpen(false);
+  }, []);
+  const handleOpenVideoModal = useCallback(
+    async (outputFormat) => {
+      setMenuOpen(false);
+      setVideoOutputFormat(outputFormat);
+      setVideoModalOpen(true);
+      setVideoLoadError(null);
+      if (outputFormat === "gif" && typeof SharedArrayBuffer === "undefined") {
+        setVideoLoading(false);
+        setVideoLoadError(
+          "Animated GIF export needs cross-origin isolation. If this app just finished installing for offline use, reload it once and try again."
+        );
+        return;
+      }
+      setVideoLoading(true);
+      try {
+        const modules = videoModules ?? await loadVideoExportModules();
+        setVideoModules(modules);
+        setVideoDoc(modules.markdownToDoc(parseMarkdown(markdownSource)));
+      } catch {
+        setVideoLoadError("Video export could not be loaded.");
+      } finally {
+        setVideoLoading(false);
+      }
+    },
+    [markdownSource, videoModules]
+  );
+  const handleOpenAnimatedGifFromDialog = useCallback(() => {
+    setDialogOpen(false);
+    void handleOpenVideoModal("gif");
+  }, [handleOpenVideoModal]);
   const handleCloseVideoModal = useCallback(() => {
     setVideoModalOpen(false);
     setVideoDoc(null);
@@ -210,6 +271,7 @@ function ExportToolbarControls({
   const handleExport = useCallback(
     async (opts) => {
       setExporting(true);
+      setExportError(null);
       try {
         const { runExport } = await loadRunExportModule();
         await runExport(
@@ -219,9 +281,11 @@ function ExportToolbarControls({
           mediaContainer,
           destinationAdapter ? handleDestinationSaveBlob : saveBlob
         );
+        setDialogOpen(false);
+      } catch (caught) {
+        setExportError(exportErrorMessage(caught));
       } finally {
         setExporting(false);
-        setDialogOpen(false);
       }
     },
     [
@@ -237,6 +301,7 @@ function ExportToolbarControls({
     if (!lastOptions) return;
     setMenuOpen(false);
     setExporting(true);
+    setExportError(null);
     try {
       saveExportOptions(lastOptions);
       const { runExport } = await loadRunExportModule();
@@ -254,6 +319,8 @@ function ExportToolbarControls({
         mediaContainer,
         destinationAdapter ? async (blob, filename) => saveToDestination(blob, filename, quickTarget) : saveBlob
       );
+    } catch (caught) {
+      setExportError(exportErrorMessage(caught));
     } finally {
       setExporting(false);
     }
@@ -266,8 +333,13 @@ function ExportToolbarControls({
     saveToDestination,
     selectedFile
   ]);
+  const handleDismissExportError = useCallback(() => {
+    setExportError(null);
+  }, []);
   const LoadedVideoExportModal = videoModules?.Modal;
+  const showAnimatedGifExport = showVideoExport && typeof ffmpegWasm?.coreURL === "string" && ffmpegWasm.coreURL.length > 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
+    initialSharedMode && /* @__PURE__ */ jsx(SharedModeInitializer, { mode: initialSharedMode }),
     trigger === "button" ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -280,30 +352,76 @@ function ExportToolbarControls({
         children: /* @__PURE__ */ jsx(ExportGlyph, {})
       }
     ) : /* @__PURE__ */ jsxs("div", { className: "db-toolbar-menu", ref: menuRef, children: [
-      /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsxs(
         "button",
         {
+          type: "button",
           className: "db-toolbar-menu-trigger",
           onClick: handleToggleMenu,
-          "aria-label": "More actions",
-          title: "More actions",
-          children: "\xB7\xB7\xB7"
+          "aria-label": "Export and share",
+          "aria-haspopup": "menu",
+          "aria-expanded": menuOpen,
+          title: "Export and share",
+          children: [
+            /* @__PURE__ */ jsx(ShareGlyph, {}),
+            /* @__PURE__ */ jsx("span", { className: "db-toolbar-menu-trigger-label", children: "Export" })
+          ]
         }
       ),
-      menuOpen && /* @__PURE__ */ jsxs("div", { className: "db-toolbar-menu-dropdown", children: [
+      menuOpen && /* @__PURE__ */ jsxs("div", { className: "db-toolbar-menu-dropdown", role: "menu", children: [
         lastOptions && /* @__PURE__ */ jsx(
           "button",
           {
+            type: "button",
+            role: "menuitem",
             className: "db-toolbar-menu-item",
             onClick: handleQuickExport,
             disabled: exporting,
             children: quickLabel(lastOptions, transformSummaries)
           }
         ),
-        /* @__PURE__ */ jsx("button", { className: "db-toolbar-menu-item", onClick: handleOpenDialog, children: "Export..." }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: "db-toolbar-menu-item",
+            onClick: handleOpenDialog,
+            children: "Export..."
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            role: "menuitem",
+            className: "db-toolbar-menu-item",
+            onClick: handleOpenShareDialog,
+            children: "Share link with content embedded..."
+          }
+        ),
         showVideoExport && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("div", { className: "db-toolbar-menu-divider" }),
-          /* @__PURE__ */ jsx("button", { className: "db-toolbar-menu-item", onClick: handleOpenVideoModal, children: "Export Video..." })
+          /* @__PURE__ */ jsx("div", { className: "db-toolbar-menu-divider", role: "separator" }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "db-toolbar-menu-item",
+              onClick: () => void handleOpenVideoModal("mp4"),
+              children: "Export Video..."
+            }
+          ),
+          showAnimatedGifExport && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              className: "db-toolbar-menu-item",
+              onClick: () => void handleOpenVideoModal("gif"),
+              children: "Export Animated GIF..."
+            }
+          )
         ] })
       ] })
     ] }),
@@ -312,6 +430,7 @@ function ExportToolbarControls({
       {
         initial: dialogInitial,
         exporting,
+        error: exportError,
         destination: destinationAdapter ? {
           value: destinationTarget?.displayPath ?? "",
           onPick: handlePickDestination,
@@ -319,29 +438,56 @@ function ExportToolbarControls({
         } : void 0,
         onExport: handleExport,
         onOptionsChange: destinationAdapter ? handleOptionsChange : void 0,
+        onAnimatedGifExport: showAnimatedGifExport ? handleOpenAnimatedGifFromDialog : void 0,
         onClose: handleCloseDialog
       }
     ) }),
-    videoModalOpen && (videoLoading || videoLoadError) && /* @__PURE__ */ jsx("div", { className: "db-dialog-overlay", children: /* @__PURE__ */ jsxs("div", { className: "db-dialog", children: [
-      /* @__PURE__ */ jsxs("div", { className: "db-dialog-header", children: [
-        /* @__PURE__ */ jsx("h2", { className: "db-dialog-title", children: "Export Video" }),
-        /* @__PURE__ */ jsx(
+    exportError && !dialogOpen && /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        title: "Export Document",
+        onClose: handleDismissExportError,
+        footer: /* @__PURE__ */ jsx(
           "button",
           {
-            className: "db-dialog-close",
-            onClick: handleCloseVideoModal,
-            "aria-label": "Close",
-            children: "\xD7"
+            type: "button",
+            className: "db-export-btn db-export-btn--secondary",
+            onClick: handleDismissExportError,
+            children: "Close"
           }
-        )
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "db-dialog-body", children: /* @__PURE__ */ jsx("p", { className: "db-export-hint", children: videoLoadError ?? "Loading..." }) })
-    ] }) }),
+        ),
+        children: /* @__PURE__ */ jsx("p", { className: "db-export-error", role: "alert", children: exportError })
+      }
+    ),
+    shareDialogOpen && /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+      ShareDialog,
+      {
+        markdown: markdownSource,
+        selectedFile,
+        baseUrl: shareBaseUrl ?? (typeof window === "undefined" ? "https://bendyline.github.io/docblocks/" : window.location.href),
+        onClose: handleCloseShareDialog
+      }
+    ) }),
+    videoModalOpen && (videoLoading || videoLoadError) && /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        title: videoOutputFormat === "gif" ? "Export Animated GIF" : "Export Video",
+        onClose: handleCloseVideoModal,
+        children: /* @__PURE__ */ jsx("p", { className: "db-export-hint", role: videoLoadError ? "alert" : void 0, children: videoLoadError ?? "Loading..." })
+      }
+    ),
     videoModalOpen && videoModules && LoadedVideoExportModal && videoDoc && !videoLoading && !videoLoadError && /* @__PURE__ */ jsx(
       LoadedVideoExportModal,
       {
         doc: videoDoc,
         playerScript: videoModules.playerScript,
+        colorScheme,
+        uiPalette: videoExportPalette,
+        defaultConfig: {
+          audioPolicy: "best-effort",
+          ...ffmpegWasm ? { ffmpegWasm } : {},
+          outputFormat: videoOutputFormat
+        },
         onClose: handleCloseVideoModal
       }
     )
@@ -367,7 +513,25 @@ function ExportGlyph() {
     }
   );
 }
+function ShareGlyph() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M8 10.5V1.75" }),
+        /* @__PURE__ */ jsx("path", { d: "M5.25 4.5 8 1.75l2.75 2.75" }),
+        /* @__PURE__ */ jsx("path", { d: "M4.25 6.75h-1a1.5 1.5 0 0 0-1.5 1.5v4.5a1.5 1.5 0 0 0 1.5 1.5h9.5a1.5 1.5 0 0 0 1.5-1.5v-4.5a1.5 1.5 0 0 0-1.5-1.5h-1" })
+      ]
+    }
+  );
+}
 export {
   ExportToolbarControls
 };
-//# sourceMappingURL=ExportToolbarControls-D2YDWOXW.js.map

package/dist/{GitToolbarControl-LMIR4R7I.js → GitToolbarControl-FW3BZFXV.js}

@@ -1,7 +1,10 @@
+import {
+  useMenuKeyboard
+} from "./chunk-TFMO7EVO.js";
 import {
   isFileDirty,
   useGitContext
-} from "./chunk-5A4KEWKT.js";
+} from "./chunk-HFYPTTCH.js";
 
 // src/Git/GitToolbarControl.tsx
 import { useEffect, useRef, useState } from "react";
@@ -9,11 +12,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function GitToolbarControl({ selectedFile }) {
   const git = useGitContext();
   const [menuOpen, setMenuOpen] = useState(false);
-  const menuRef = useRef(null);
+  const rootRef = useRef(null);
+  const { menuRef, triggerRef, handleMenuKeyDown, handleTriggerKeyDown, closeMenu } = useMenuKeyboard(menuOpen, setMenuOpen);
   useEffect(() => {
     if (!menuOpen) return;
     const onPointerDown = (e) => {
-      if (menuRef.current && !menuRef.current.contains(e.target)) {
+      if (rootRef.current && !rootRef.current.contains(e.target)) {
         setMenuOpen(false);
       }
     };
@@ -24,24 +28,26 @@ function GitToolbarControl({ selectedFile }) {
   const dirty = isFileDirty(git.status, selectedFile);
   const label = dirty ? "Git actions (file modified)" : "Git actions";
   const openDiff = () => {
-    setMenuOpen(false);
+    closeMenu(false);
     git.openDialog({ kind: "diff", path: selectedFile });
   };
   const openHistory = () => {
-    setMenuOpen(false);
+    closeMenu(false);
     git.openDialog({ kind: "history", path: selectedFile });
   };
   const openOnRemote = () => {
-    setMenuOpen(false);
+    closeMenu(false);
     git.openOnRemote(selectedFile);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "db-toolbar-menu", ref: menuRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: "db-toolbar-menu", ref: rootRef, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
+        ref: triggerRef,
         type: "button",
         className: "squisq-toolbar-button db-git-toolbar-trigger",
         onClick: () => setMenuOpen((prev) => !prev),
+        onKeyDown: handleTriggerKeyDown,
         "aria-label": label,
         "aria-haspopup": "menu",
         "aria-expanded": menuOpen,
@@ -52,42 +58,55 @@ function GitToolbarControl({ selectedFile }) {
         ]
       }
     ),
-    menuOpen && /* @__PURE__ */ jsxs("div", { className: "db-toolbar-menu-dropdown", role: "menu", children: [
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          role: "menuitem",
-          className: "db-toolbar-menu-item",
-          disabled: !dirty,
-          onClick: openDiff,
-          children: "View changes"
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          role: "menuitem",
-          className: "db-toolbar-menu-item",
-          onClick: openHistory,
-          children: "File history\u2026"
-        }
-      ),
-      git.remoteWeb && /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          role: "menuitem",
-          className: "db-toolbar-menu-item",
-          onClick: openOnRemote,
-          children: [
-            "Open on ",
-            git.remoteWeb.host
-          ]
-        }
-      )
-    ] })
+    menuOpen && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: menuRef,
+        className: "db-toolbar-menu-dropdown",
+        role: "menu",
+        "aria-label": label,
+        onKeyDown: handleMenuKeyDown,
+        children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              className: "db-toolbar-menu-item",
+              disabled: !dirty,
+              onClick: openDiff,
+              children: "View changes"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              className: "db-toolbar-menu-item",
+              onClick: openHistory,
+              children: "File history\u2026"
+            }
+          ),
+          git.remoteWeb && /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "menuitem",
+              tabIndex: -1,
+              className: "db-toolbar-menu-item",
+              onClick: openOnRemote,
+              children: [
+                "Open on ",
+                git.remoteWeb.host
+              ]
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 function BranchGlyph() {
@@ -114,4 +133,3 @@ function BranchGlyph() {
 export {
   GitToolbarControl
 };
-//# sourceMappingURL=GitToolbarControl-LMIR4R7I.js.map