@bendyline/squisq-editor-react 2.7.2 → 2.8.0

package/NOTICE.md

@@ -25,7 +25,7 @@ Third-party components remain under their respective license terms.
 | @tiptap/react                     | 2.27.2               | MIT                           | https://github.com/ueberdosis/tiptap          |
 | @tiptap/starter-kit               | 2.27.2               | MIT                           | https://github.com/ueberdosis/tiptap          |
 | @tiptap/suggestion                | 2.27.2               | MIT                           | https://github.com/ueberdosis/tiptap          |
-| mermaid                           | 11.16.0              | MIT                           | https://github.com/mermaid-js/mermaid         |
+| mermaid                           | 11.16.1              | MIT                           | https://github.com/mermaid-js/mermaid         |
 | type-fest                         | 4.41.0               | MIT OR CC0-1.0                | https://github.com/sindresorhus/type-fest     |
 | @monaco-editor/react _(bundled)_  | 4.7.0                | MIT                           | https://github.com/suren-atoyan/monaco-react  |
 | @monaco-editor/loader _(bundled)_ | 1.7.0                | MIT                           | https://github.com/suren-atoyan/monaco-loader |

package/dist/{chunk-7K4LSSNL.js → chunk-SUXRSZ4Y.js}

@@ -384,6 +384,8 @@ function EditorProvider({
   allowNarrate = true,
   preserveSourceWrapping = true,
   fileName,
+  saveCoverImageOutput,
+  saveDashboardImageOutput,
   language,
   findMode: controlledFindMode,
   onFindModeChange,
@@ -869,6 +871,8 @@ function EditorProvider({
       fenceRenderers,
       linkSchemes,
       fileName,
+      saveCoverImageOutput,
+      saveDashboardImageOutput,
       setMarkdownSource,
       setEditorSource,
       setLayoutMode,
@@ -931,6 +935,8 @@ function EditorProvider({
       fenceRenderers,
       linkSchemes,
       fileName,
+      saveCoverImageOutput,
+      saveDashboardImageOutput,
       setMarkdownSource,
       setEditorSource,
       setLayoutMode,
@@ -3289,9 +3295,16 @@ import {
   COVER_SLIDE_TEMPLATE_OPTIONS,
   createTemplateContext,
   expandCoverBlock,
-  resolveCoverSlideSettings
+  resolveCoverSlideSettings,
+  DASHBOARD_AUTO_LAYOUT_ID,
+  DASHBOARD_STYLES,
+  listDashboardLayouts,
+  resolveDashboardStyleId
 } from "@bendyline/squisq/doc";
 import { CoverImageExportModal } from "@bendyline/squisq-video-react/cover-image";
+import {
+  DashboardImageExportModal
+} from "@bendyline/squisq-video-react/dashboard-image";
 
 // src/transformStyleId.ts
 import { getTransformStyleSummaries } from "@bendyline/squisq/transform";
@@ -3304,7 +3317,12 @@ function resolvePersistedTransformStyleId(value) {
 }
 
 // src/frontmatterSettings.ts
-import { COVER_SLIDE_FRONTMATTER_KEYS, DEFAULT_COVER_SLIDE_SETTINGS } from "@bendyline/squisq/doc";
+import {
+  COVER_SLIDE_FRONTMATTER_KEYS,
+  DASHBOARD_FRONTMATTER_KEYS,
+  DEFAULT_COVER_SLIDE_SETTINGS,
+  DEFAULT_DASHBOARD_SETTINGS
+} from "@bendyline/squisq/doc";
 var FRONTMATTER_SETTING_KEYS = {
   theme: { canonical: "squisq-theme", legacy: ["themeId", "theme"] },
   transform: { canonical: "squisq-transform", legacy: "transform-style" },
@@ -3320,7 +3338,10 @@ var FRONTMATTER_SETTING_KEYS = {
   },
   pipSize: { canonical: "squisq-pip-size", legacy: "pip-size" },
   pipShape: { canonical: "squisq-pip-shape", legacy: "pip-shape" },
-  pipPosition: { canonical: "squisq-pip-position", legacy: "pip-position" }
+  pipPosition: { canonical: "squisq-pip-position", legacy: "pip-position" },
+  dashboardLayout: DASHBOARD_FRONTMATTER_KEYS.layout,
+  dashboardTitle: DASHBOARD_FRONTMATTER_KEYS.showTitle,
+  dashboardStyle: DASHBOARD_FRONTMATTER_KEYS.style
 };
 var FRONTMATTER_SETTING_DEFAULTS = {
   theme: "standard",
@@ -3334,7 +3355,10 @@ var FRONTMATTER_SETTING_DEFAULTS = {
   videoPresentation: "background",
   pipSize: "small",
   pipShape: "square",
-  pipPosition: "bottom-right"
+  pipPosition: "bottom-right",
+  dashboardLayout: DEFAULT_DASHBOARD_SETTINGS.layout,
+  dashboardTitle: DEFAULT_DASHBOARD_SETTINGS.showTitle,
+  dashboardStyle: DEFAULT_DASHBOARD_SETTINGS.style
 };
 function omitFrontmatterDefault(value, defaultValue) {
   return value === defaultValue ? null : value;
@@ -3375,6 +3399,7 @@ function resolveDisplayMode(value) {
   if (v2 === "video" || v2 === "slideshow" || v2 === "linear" || v2 === "narrate") return v2;
   if (v2 === "slides" || v2 === "presentation" || v2 === "deck") return "slideshow";
   if (v2 === "teleprompter" || v2 === "prompter") return "narrate";
+  if (v2 === "dashboard" || v2 === "dash") return "dashboard";
   if (v2 === "page" || v2 === "paged") return "linear";
   if (v2 === "document" || v2 === "scroll" || v2 === "html" || v2 === "plain" || v2 === "reader") {
     return "page";
@@ -3451,6 +3476,13 @@ function resolveFrontmatterBoolean(value) {
   if (v2 === "false" || v2 === "no" || v2 === "off" || v2 === "hide" || v2 === "hidden") return false;
   return null;
 }
+function resolveDashboardLayoutId(value) {
+  if (typeof value !== "string") return null;
+  const normalized = value.trim().toLowerCase();
+  if (!normalized) return null;
+  if (normalized === "auto" || normalized === "default") return DASHBOARD_AUTO_LAYOUT_ID;
+  return normalized;
+}
 function readFrontmatterKey(fm, canonical, legacy) {
   if (!fm) return void 0;
   return Object.prototype.hasOwnProperty.call(fm, canonical) ? fm[canonical] : fm[legacy];
@@ -3499,7 +3531,7 @@ function PreviewSettingsProvider({
   );
   const [selectedPreset, setSelectedPreset] = useState9(null);
   useEffect8(() => setSelectedPreset(null), [fmPreset]);
-  const playbackDefaultPreset = activeDisplayMode === "slideshow" || activeDisplayMode === "video" ? defaultViewportPreset : "landscape";
+  const playbackDefaultPreset = activeDisplayMode === "slideshow" || activeDisplayMode === "video" || activeDisplayMode === "dashboard" ? defaultViewportPreset : "landscape";
   const activePreset = selectedPreset ?? fmPreset ?? playbackDefaultPreset;
   const activeViewport = VIEWPORT_PRESETS[activePreset];
   const custom = useCustomThemes();
@@ -3879,6 +3911,92 @@ function PreviewSettingsProvider({
     } : null,
     [designer.open, designer.editing, handleDesignerSave, closeThemeDesigner]
   );
+  const fmDashboardLayout = useMemo8(
+    () => resolveDashboardLayoutId(
+      readFrontmatterKey(
+        frontmatter,
+        FRONTMATTER_SETTING_KEYS.dashboardLayout.canonical,
+        FRONTMATTER_SETTING_KEYS.dashboardLayout.legacy
+      )
+    ),
+    [frontmatter]
+  );
+  const [selectedDashboardLayout, setSelectedDashboardLayout] = useState9(null);
+  useEffect8(() => setSelectedDashboardLayout(null), [fmDashboardLayout]);
+  const activeDashboardLayout = selectedDashboardLayout ?? fmDashboardLayout ?? FRONTMATTER_SETTING_DEFAULTS.dashboardLayout;
+  const handleSetDashboardLayout = useCallback9(
+    (id) => {
+      const next = resolveDashboardLayoutId(id) ?? FRONTMATTER_SETTING_DEFAULTS.dashboardLayout;
+      setSelectedDashboardLayout(next);
+      persistFrontmatter({
+        [FRONTMATTER_SETTING_KEYS.dashboardLayout.canonical]: omitFrontmatterDefault(
+          next,
+          FRONTMATTER_SETTING_DEFAULTS.dashboardLayout
+        ),
+        [FRONTMATTER_SETTING_KEYS.dashboardLayout.legacy]: null
+      });
+    },
+    [persistFrontmatter]
+  );
+  const fmDashboardTitle = useMemo8(
+    () => resolveFrontmatterBoolean(
+      readFrontmatterKey(
+        frontmatter,
+        FRONTMATTER_SETTING_KEYS.dashboardTitle.canonical,
+        FRONTMATTER_SETTING_KEYS.dashboardTitle.legacy
+      )
+    ),
+    [frontmatter]
+  );
+  const [selectedDashboardTitle, setSelectedDashboardTitle] = useState9(null);
+  useEffect8(() => setSelectedDashboardTitle(null), [fmDashboardTitle]);
+  const activeDashboardTitle = selectedDashboardTitle ?? fmDashboardTitle ?? FRONTMATTER_SETTING_DEFAULTS.dashboardTitle;
+  const handleSetDashboardTitleEnabled = useCallback9(
+    (enabled) => {
+      setSelectedDashboardTitle(enabled);
+      persistFrontmatter({
+        [FRONTMATTER_SETTING_KEYS.dashboardTitle.canonical]: omitFrontmatterDefault(
+          enabled,
+          FRONTMATTER_SETTING_DEFAULTS.dashboardTitle
+        ),
+        [FRONTMATTER_SETTING_KEYS.dashboardTitle.legacy]: null
+      });
+    },
+    [persistFrontmatter]
+  );
+  const fmDashboardStyle = useMemo8(
+    () => resolveDashboardStyleId(
+      readFrontmatterKey(
+        frontmatter,
+        FRONTMATTER_SETTING_KEYS.dashboardStyle.canonical,
+        FRONTMATTER_SETTING_KEYS.dashboardStyle.legacy
+      )
+    ),
+    [frontmatter]
+  );
+  const [selectedDashboardStyle, setSelectedDashboardStyle] = useState9(
+    null
+  );
+  useEffect8(() => setSelectedDashboardStyle(null), [fmDashboardStyle]);
+  const activeDashboardStyle = selectedDashboardStyle ?? fmDashboardStyle ?? FRONTMATTER_SETTING_DEFAULTS.dashboardStyle;
+  const handleSetDashboardStyle = useCallback9(
+    (id) => {
+      const next = resolveDashboardStyleId(id) ?? FRONTMATTER_SETTING_DEFAULTS.dashboardStyle;
+      setSelectedDashboardStyle(next);
+      persistFrontmatter({
+        [FRONTMATTER_SETTING_KEYS.dashboardStyle.canonical]: omitFrontmatterDefault(
+          next,
+          FRONTMATTER_SETTING_DEFAULTS.dashboardStyle
+        ),
+        [FRONTMATTER_SETTING_KEYS.dashboardStyle.legacy]: null
+      });
+    },
+    [persistFrontmatter]
+  );
+  const dashboardLayoutOptions = useMemo8(
+    () => listDashboardLayouts({ frontmatter }),
+    [frontmatter]
+  );
   const value = useMemo8(
     () => ({
       activePreset,
@@ -3905,6 +4023,13 @@ function PreviewSettingsProvider({
       setPipPosition: handlePipPosition,
       activeVideoLoop,
       setVideoLoopEnabled: handleSetVideoLoopEnabled,
+      activeDashboardLayout,
+      setDashboardLayout: handleSetDashboardLayout,
+      activeDashboardTitle,
+      setDashboardTitleEnabled: handleSetDashboardTitleEnabled,
+      activeDashboardStyle,
+      setDashboardStyle: handleSetDashboardStyle,
+      dashboardLayoutOptions,
       activeCoverSlide,
       setCoverSlideEnabled: handleSetCoverSlideEnabled,
       activeCoverSlideTemplate,
@@ -3934,6 +4059,10 @@ function PreviewSettingsProvider({
       activePipShape,
       activePipPosition,
       activeVideoLoop,
+      activeDashboardLayout,
+      activeDashboardTitle,
+      activeDashboardStyle,
+      dashboardLayoutOptions,
       activeCoverSlide,
       activeCoverSlideTemplate,
       activeCoverSlideDuration,
@@ -3946,6 +4075,9 @@ function PreviewSettingsProvider({
       handlePipShape,
       handlePipPosition,
       handleSetVideoLoopEnabled,
+      handleSetDashboardLayout,
+      handleSetDashboardTitleEnabled,
+      handleSetDashboardStyle,
       handleSetCoverSlideEnabled,
       handleSetCoverSlideTemplate,
       handleSetCoverSlideDuration,
@@ -4019,6 +4151,12 @@ var DISPLAY_MODE_OPTIONS = [
     icon: "fa-solid fa-window-maximize",
     summary: "Scroll through the fully designed page."
   },
+  {
+    key: "dashboard",
+    label: "Dashboard",
+    icon: "fa-solid fa-table-cells-large",
+    summary: "See every block arranged on one canvas."
+  },
   {
     key: "page",
     label: "Document",
@@ -4042,15 +4180,20 @@ var TRANSFORM_STYLE_OPTIONS = [
 var SUMMARIZE_TOOLTIP = "Extract and summarize content for presentation with these Use modes. Your underlying content is not changed.";
 var CONTROL_KEYS = [
   "format",
+  "layout",
   "video",
   "theme",
   "transform",
   "captions",
   "loop",
-  "cover"
+  "cover",
+  "dashboardImage"
 ];
 function controlKeysForMode(displayMode, hasVideoMedia) {
-  let keys = CONTROL_KEYS;
+  if (displayMode === "dashboard") {
+    return ["format", "layout", "theme", "transform", "dashboardImage"];
+  }
+  let keys = CONTROL_KEYS.filter((key) => key !== "layout" && key !== "dashboardImage");
   if (displayMode !== "video") {
     keys = keys.filter((key) => key !== "loop");
   }
@@ -4097,9 +4240,54 @@ var selectStyle = {
 var COVER_MENU_WIDTH = 336;
 var COVER_MENU_GAP = 4;
 var COVER_MENU_MARGIN = 8;
+var DASHBOARD_EXPORT_RESOLUTION_BY_PRESET = {
+  landscape: "fhd",
+  portrait: "portrait",
+  square: "square",
+  standard: "standard"
+};
+function DashboardImageExportControl({ compact }) {
+  const settings = usePreviewSettings();
+  const { colorScheme, doc, fileName, mediaProvider, saveDashboardImageOutput } = useEditorContext();
+  const [exportOpen, setExportOpen] = useState9(false);
+  return /* @__PURE__ */ jsxs6("div", { className: `squisq-preview-control${compact ? " squisq-preview-control--compact" : ""}`, children: [
+    compact && /* @__PURE__ */ jsx8("label", { style: labelStyle, children: "Export:" }),
+    /* @__PURE__ */ jsx8(
+      "button",
+      {
+        type: "button",
+        className: "squisq-toolbar-button",
+        disabled: !doc,
+        onClick: () => setExportOpen(true),
+        "aria-label": "Export dashboard as image",
+        title: "Export dashboard as image",
+        children: /* @__PURE__ */ jsx8(Icon, { icon: "fa-solid fa-file-image" })
+      }
+    ),
+    exportOpen && doc && createPortal2(
+      /* @__PURE__ */ jsx8(
+        DashboardImageExportModal,
+        {
+          doc,
+          mediaProvider,
+          theme: settings.activeTheme,
+          defaultResolution: DASHBOARD_EXPORT_RESOLUTION_BY_PRESET[settings.activePreset],
+          defaultLayout: settings.activeDashboardLayout,
+          defaultShowTitle: settings.activeDashboardTitle,
+          defaultStyle: settings.activeDashboardStyle,
+          defaultFileName: fileName,
+          colorScheme,
+          saveOutput: saveDashboardImageOutput,
+          onClose: () => setExportOpen(false)
+        }
+      ),
+      document.body
+    )
+  ] });
+}
 function CoverSlideMenuControl({ compact }) {
   const settings = usePreviewSettings();
-  const { colorScheme, doc, fileName, mediaProvider } = useEditorContext();
+  const { colorScheme, doc, fileName, mediaProvider, saveCoverImageOutput } = useEditorContext();
   const triggerRef = useRef7(null);
   const menuRef = useRef7(null);
   const [open, setOpen] = useState9(false);
@@ -4361,6 +4549,7 @@ function CoverSlideMenuControl({ compact }) {
               defaultHeight: settings.activeViewport.height,
               defaultFileName: fileName,
               colorScheme,
+              saveOutput: saveCoverImageOutput,
               onClose: () => setExportOpen(false)
             }
           ),
@@ -4472,6 +4661,56 @@ function PreviewToolbarControls({ displayMode } = {}) {
           },
           "format"
         );
+      case "layout": {
+        const builtIns = s.dashboardLayoutOptions.filter((option) => !option.custom);
+        const customs = s.dashboardLayoutOptions.filter((option) => option.custom);
+        return /* @__PURE__ */ jsxs6(
+          "div",
+          {
+            className: `squisq-preview-control${compact ? " squisq-preview-control--compact" : ""}`,
+            children: [
+              /* @__PURE__ */ jsx8("label", { style: labelStyle, children: "Layout:" }),
+              /* @__PURE__ */ jsxs6(
+                "select",
+                {
+                  "aria-label": "Dashboard layout",
+                  style: selectStyle,
+                  value: s.activeDashboardLayout,
+                  onChange: (event) => s.setDashboardLayout(event.target.value),
+                  children: [
+                    /* @__PURE__ */ jsx8("option", { value: DASHBOARD_AUTO_LAYOUT_ID, children: "Auto" }),
+                    builtIns.map((option) => /* @__PURE__ */ jsx8("option", { value: option.id, children: `${option.label} (${option.capacity})` }, option.id)),
+                    customs.length > 0 && /* @__PURE__ */ jsx8("optgroup", { label: "Custom", children: customs.map((option) => /* @__PURE__ */ jsx8("option", { value: option.id, children: `${option.label} (${option.capacity})` }, option.id)) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx8("label", { style: labelStyle, children: "Style:" }),
+              /* @__PURE__ */ jsx8(
+                "select",
+                {
+                  "aria-label": "Dashboard cell style",
+                  style: selectStyle,
+                  value: s.activeDashboardStyle,
+                  onChange: (event) => s.setDashboardStyle(event.target.value),
+                  children: DASHBOARD_STYLES.map((option) => /* @__PURE__ */ jsx8("option", { value: option.id, title: option.description, children: option.label }, option.id))
+                }
+              ),
+              /* @__PURE__ */ jsxs6("label", { className: "squisq-preview-checkbox", children: [
+                /* @__PURE__ */ jsx8(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: s.activeDashboardTitle,
+                    onChange: (event) => s.setDashboardTitleEnabled(event.target.checked)
+                  }
+                ),
+                /* @__PURE__ */ jsx8("span", { children: "Title" })
+              ] })
+            ]
+          },
+          "layout"
+        );
+      }
       case "video": {
         const showPipOptions = s.activeVideoPresentation === "picture-in-picture";
         return /* @__PURE__ */ jsxs6(
@@ -4663,6 +4902,8 @@ function PreviewToolbarControls({ displayMode } = {}) {
         );
       case "cover":
         return /* @__PURE__ */ jsx8(CoverSlideMenuControl, { compact }, "cover");
+      case "dashboardImage":
+        return /* @__PURE__ */ jsx8(DashboardImageExportControl, { compact }, "dashboardImage");
     }
   };
   const hasOverflow = visibleCount < controlKeys.length;
@@ -33341,7 +33582,7 @@ function collectImageRefs(doc) {
 // src/PreviewPanel.tsx
 import { useState as useState64, useEffect as useEffect55, useMemo as useMemo50, 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 { DashboardView, DocPlayer as DocPlayer2, LinearDocView as LinearDocView2, useMediaProvider as useMediaProvider2 } from "@bendyline/squisq-react";
 import { resolveTransformStyle as resolveTransformStyle2 } from "@bendyline/squisq/transform";
 
 // src/buildDocumentPreviewMarkdown.ts
@@ -34409,7 +34650,10 @@ function PreviewPanel({
     activeCoverSlide,
     activeCoverSlideTemplate,
     activeCoverSlideDuration,
-    activeCoverSlidePlayback
+    activeCoverSlidePlayback,
+    activeDashboardLayout,
+    activeDashboardTitle,
+    activeDashboardStyle
   } = usePreviewSettings();
   const mainSurfaceRef = useRef52(null);
   const popupSurfaceRef = useRef52(null);
@@ -34451,6 +34695,7 @@ function PreviewPanel({
   const isDocumentMode = activeDisplayMode === "page";
   const isPageMode = activeDisplayMode === "linear";
   const isNarrateMode = activeDisplayMode === "narrate";
+  const isDashboardMode = activeDisplayMode === "dashboard";
   useEffect55(() => {
     if (presentation?.activeTarget === "window") return;
     setPlaybackState(null);
@@ -34602,6 +34847,21 @@ function PreviewPanel({
         }
       );
     }
+    if (isDashboardMode) {
+      return /* @__PURE__ */ jsx73("div", { className: "squisq-dashboard-fit", children: /* @__PURE__ */ jsx73(
+        DashboardView,
+        {
+          doc: contentDoc ?? doc,
+          basePath,
+          viewport: activeViewport,
+          theme: activeTheme,
+          layout: activeDashboardLayout,
+          showTitle: activeDashboardTitle,
+          style: activeDashboardStyle,
+          documentTitle: documentTitleFromFileName(fileName)
+        }
+      ) });
+    }
     if (audience && !followerAudioController) {
       return /* @__PURE__ */ jsx73("div", { className: "squisq-presentation-connecting", children: "Connecting presentation..." });
     }
@@ -35690,6 +35950,8 @@ function EditorShell({
   showStatusBar = true,
   imageDisplayMode = "inline",
   fileName,
+  saveCoverImageOutput,
+  saveDashboardImageOutput,
   language,
   findMode,
   onFindModeChange,
@@ -35749,6 +36011,8 @@ function EditorShell({
       allowNarrate,
       preserveSourceWrapping,
       fileName,
+      saveCoverImageOutput,
+      saveDashboardImageOutput,
       language,
       findMode,
       onFindModeChange,

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CodeContext, E as EditorHostMode, S as SceneTextChannel } from './shell-595XbANu.js';
-export { B as BlockTagVisibility, a as CodeContextSection, D as DocumentLinkCandidate, b as DocumentLinkProvider, c as EditorActions, d as EditorColorScheme, e as EditorContextValue, f as EditorMode, g as EditorProvider, h as EditorProviderProps, i as EditorShell, j as EditorShellProps, k as EditorState, l as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, m as MentionProvider, P as PreviewPanel, n as PreviewPanelProps, R as RawEditor, o as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, W as WriteCanvasSettings, p as WysiwygEditor, q as WysiwygEditorProps, u as useEditorContext } from './shell-595XbANu.js';
+import { C as CodeContext, E as EditorHostMode, S as SceneTextChannel } from './shell-Bv6neeA6.js';
+export { B as BlockTagVisibility, a as CodeContextSection, b as CoverImageSaveOutput, D as DashboardImageSaveOutput, c as DocumentLinkCandidate, d as DocumentLinkProvider, e as EditorActions, f as EditorColorScheme, g as EditorContextValue, h as EditorMode, i as EditorProvider, j as EditorProviderProps, k as EditorShell, l as EditorShellProps, m as EditorState, n as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, o as MentionProvider, P as PreviewPanel, p as PreviewPanelProps, R as RawEditor, q as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, W as WriteCanvasSettings, r as WysiwygEditor, s as WysiwygEditorProps, u as useEditorContext } from './shell-Bv6neeA6.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';
@@ -8,7 +8,7 @@ import { ContentContainer } from '@bendyline/squisq/storage';
 export { CanvasRect, ImageEditor, ImageEditorAction, ImageEditorProps, ImageEditorState, ImageEditorTool, ImageViewer, ImageViewerProps, UseImageEditorOptions, UseImageEditorReturn, imageEditorReducer, initialImageEditorState, useImageEditor } from './image-editor/index.js';
 import { CodeBlockCopyHandler, DisplayMode, CaptionStyle, VideoPresentation, PipSize, PipShape, PipPosition } from '@bendyline/squisq-react';
 import { IconFamily } from '@bendyline/squisq/icons';
-import { CoverSlideTemplate, CoverSlidePlayback, ConnectorRouting, AsciiDiagram, Tree, AsciiTimeline, AsciiTimelineSide, AsciiTimelineMarker } from '@bendyline/squisq/doc';
+import { CoverSlideTemplate, CoverSlidePlayback, DashboardStyleId, DashboardLayoutSummary, ConnectorRouting, AsciiDiagram, Tree, AsciiTimeline, AsciiTimelineSide, AsciiTimelineMarker } from '@bendyline/squisq/doc';
 export { BuildPreviewDocOptions, buildPreviewDoc, documentTitleFromFileName } from '@bendyline/squisq/doc';
 import { MarkdownWrapState } from '@bendyline/squisq/markdown';
 import * as monaco_editor from 'monaco-editor';
@@ -842,6 +842,20 @@ interface PreviewSettings {
     activeVideoLoop: boolean;
     /** Enable/disable automatic Video-mode playback restart. */
     setVideoLoopEnabled: (enabled: boolean) => void;
+    /** Dashboard layout id, or `'auto'` for the block-count auto-pick. */
+    activeDashboardLayout: string;
+    /** Set (and persist) the dashboard layout; null resets to auto. */
+    setDashboardLayout: (id: string | null) => void;
+    /** Whether the dashboard renders the document-title band. */
+    activeDashboardTitle: boolean;
+    /** Enable/disable (and persist) the dashboard title band. */
+    setDashboardTitleEnabled: (enabled: boolean) => void;
+    /** Dashboard cell style variant — the dressing axis beside the layout. */
+    activeDashboardStyle: DashboardStyleId;
+    /** Set (and persist) the dashboard cell style; null resets to `basic`. */
+    setDashboardStyle: (id: string | null) => void;
+    /** Layouts available to the doc: customs first, then built-ins. */
+    dashboardLayoutOptions: DashboardLayoutSummary[];
     /** User-authored themes (doc + browser library) for the picker's "Custom" group. */
     customThemes: Theme[];
     /** Open the custom-theme designer for a theme (or null to create a new one). */

package/dist/index.js

@@ -205,7 +205,7 @@ import {
   usePreviewSettings,
   useTimelineData,
   useTreeViewData
-} from "./chunk-7K4LSSNL.js";
+} from "./chunk-SUXRSZ4Y.js";
 import "./chunk-V4NBQF5C.js";
 import {
   JsonEditor

package/dist/shell/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BlockTagVisibility, D as DocumentLinkCandidate, b as DocumentLinkProvider, c as EditorActions, d as EditorColorScheme, e as EditorContextValue, E as EditorHostMode, f as EditorMode, g as EditorProvider, h as EditorProviderProps, i as EditorShell, j as EditorShellProps, k as EditorState, l as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, m as MentionProvider, P as PreviewPanel, n as PreviewPanelProps, R as RawEditor, o as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, p as WysiwygEditor, q as WysiwygEditorProps, u as useEditorContext } from '../shell-595XbANu.js';
+export { B as BlockTagVisibility, c as DocumentLinkCandidate, d as DocumentLinkProvider, e as EditorActions, f as EditorColorScheme, g as EditorContextValue, E as EditorHostMode, h as EditorMode, i as EditorProvider, j as EditorProviderProps, k as EditorShell, l as EditorShellProps, m as EditorState, n as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, o as MentionProvider, P as PreviewPanel, p as PreviewPanelProps, R as RawEditor, q as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, r as WysiwygEditor, s as WysiwygEditorProps, u as useEditorContext } from '../shell-Bv6neeA6.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-7K4LSSNL.js";
+} from "../chunk-SUXRSZ4Y.js";
 import "../chunk-V4NBQF5C.js";
 import "../chunk-K2WJYVS4.js";
 import "../chunk-V44VP242.js";

package/dist/{shell-595XbANu.d.ts → shell-Bv6neeA6.d.ts}

@@ -301,6 +301,16 @@ interface EditorActions {
      */
     bumpMediaRevision: () => void;
 }
+/**
+ * Host-owned persistence for a rendered cover image. Return `false` when the
+ * user cancels so the export modal stays open without reporting an error.
+ */
+type CoverImageSaveOutput = (blob: Blob, filename: string) => boolean | void | Promise<boolean | void>;
+/**
+ * Host-owned persistence for a rendered dashboard image — the same contract
+ * as {@link CoverImageSaveOutput} (`false` keeps the export dialog open).
+ */
+type DashboardImageSaveOutput = CoverImageSaveOutput;
 interface EditorContextValue extends EditorState, EditorActions {
     /** The live Tiptap editor instance (null when WYSIWYG is not mounted) */
     tiptapEditor: Editor | null;
@@ -382,6 +392,10 @@ interface EditorContextValue extends EditorState, EditorActions {
      * document has no frontmatter `title:`.
      */
     fileName: string | undefined;
+    /** Optional host save flow for cover-slide image exports. */
+    saveCoverImageOutput: CoverImageSaveOutput | undefined;
+    /** Optional host save flow for dashboard image exports. */
+    saveDashboardImageOutput: DashboardImageSaveOutput | undefined;
 }
 type ImageDisplayMode = 'inline' | 'thumbnail';
 /**
@@ -481,6 +495,10 @@ interface EditorProviderProps {
      * language and decide between markdown vs. code mode.
      */
     fileName?: string;
+    /** Optional host save flow for cover-slide image exports. */
+    saveCoverImageOutput?: CoverImageSaveOutput;
+    /** Optional host save flow for dashboard image exports. */
+    saveDashboardImageOutput?: DashboardImageSaveOutput;
     /** Explicit Monaco language ID — wins over the fileName-derived one. */
     language?: string;
     /**
@@ -569,7 +587,7 @@ interface ViewPreferences {
     /** Document vs. block-at-a-time layout. */
     layoutMode?: LayoutMode;
 }
-declare function EditorProvider({ initialMarkdown, initialView, articleId, colorScheme: initialColorScheme, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, mediaProvider, imageDisplayMode, mentionProvider, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, fileName, language, findMode: controlledFindMode, onFindModeChange, inlinePreview, showStatusBar, outline, blockTags, blockTagVisibility: initialBlockTagVisibility, themeInheritance, layoutMode, viewPreferences, onViewPreferencesChange, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+declare function EditorProvider({ initialMarkdown, initialView, articleId, colorScheme: initialColorScheme, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, mediaProvider, imageDisplayMode, mentionProvider, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, fileName, saveCoverImageOutput, saveDashboardImageOutput, language, findMode: controlledFindMode, onFindModeChange, inlinePreview, showStatusBar, outline, blockTags, blockTagVisibility: initialBlockTagVisibility, themeInheritance, layoutMode, viewPreferences, onViewPreferencesChange, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Host-supplied context sections rendered INSIDE the Monaco (raw/code)
@@ -908,6 +926,16 @@ interface EditorShellProps {
      * experience. Omit to get today's markdown behavior unchanged.
      */
     fileName?: string;
+    /**
+     * Optional host save flow for cover-slide image exports. When omitted, the
+     * editor uses the browser File System Access picker or download fallback.
+     */
+    saveCoverImageOutput?: CoverImageSaveOutput;
+    /**
+     * Optional host save flow for dashboard image exports. When omitted, the
+     * editor uses the browser File System Access picker or download fallback.
+     */
+    saveDashboardImageOutput?: DashboardImageSaveOutput;
     /**
      * Explicit Monaco language ID override (e.g. `'typescript'`,
      * `'python'`, `'json'`). Wins over the language derived from
@@ -1108,7 +1136,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, hostMode, defaultViewportPreset, articleId, basePath, onChange, onLinkClick, showCodeCopyButton, onCopyCode, colorScheme, className, height, minHeight, maxHeight, mediaProvider, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, showFormattingControls, showInsertControls, allowBinaryDownloads, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, statusBarSlotRight, showPlayTab, allowPresentationWindow, allowPresentationFullscreen, allowPrint, submitOnEnter, codeContext, fullWidth, uxFont, thinMargins, writeCanvasSettings, showStatusBar, imageDisplayMode, fileName, language, findMode, onFindModeChange, mentionProvider, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, 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, hostMode, defaultViewportPreset, articleId, basePath, onChange, onLinkClick, showCodeCopyButton, onCopyCode, colorScheme, className, height, minHeight, maxHeight, mediaProvider, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, showFormattingControls, showInsertControls, allowBinaryDownloads, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, statusBarSlotRight, showPlayTab, allowPresentationWindow, allowPresentationFullscreen, allowPrint, submitOnEnter, codeContext, fullWidth, uxFont, thinMargins, writeCanvasSettings, showStatusBar, imageDisplayMode, fileName, saveCoverImageOutput, saveDashboardImageOutput, language, findMode, onFindModeChange, mentionProvider, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, placeholder, readOnly, imageSrc, imageAlt, imageMode, imageEditorContainer, onImageExport, inlinePreview, inlinePreviewWidth, outline, outlineWidth, blockTags, blockTagVisibility, themeInheritance, viewPreferences, onViewPreferencesChange, themeOverride, }: EditorShellProps): react_jsx_runtime.JSX.Element;
 
 /**
  * RawEditor
@@ -1198,4 +1226,4 @@ interface PreviewPanelProps {
  */
 declare function PreviewPanel({ basePath, className, workspaceContainer, onLinkClick, showCodeCopyButton, onCopyCode, }: PreviewPanelProps): react_jsx_runtime.JSX.Element;
 
-export { type BlockTagVisibility as B, type CodeContext as C, type DocumentLinkCandidate as D, type EditorHostMode as E, type ImageDisplayMode as I, type LayoutMode as L, type MentionCandidate as M, PreviewPanel as P, RawEditor as R, type SceneTextChannel as S, type ThemeInheritance as T, type ViewPreferences as V, type WriteCanvasSettings as W, type CodeContextSection as a, type DocumentLinkProvider as b, type EditorActions as c, type EditorColorScheme as d, type EditorContextValue as e, type EditorMode as f, EditorProvider as g, type EditorProviderProps as h, EditorShell as i, type EditorShellProps as j, type EditorState as k, type EditorView as l, type MentionProvider as m, type PreviewPanelProps as n, type RawEditorProps as o, WysiwygEditor as p, type WysiwygEditorProps as q, useEditorContext as u };
+export { type BlockTagVisibility as B, type CodeContext as C, type DashboardImageSaveOutput as D, type EditorHostMode as E, type ImageDisplayMode as I, type LayoutMode as L, type MentionCandidate as M, PreviewPanel as P, RawEditor as R, type SceneTextChannel as S, type ThemeInheritance as T, type ViewPreferences as V, type WriteCanvasSettings as W, type CodeContextSection as a, type CoverImageSaveOutput as b, type DocumentLinkCandidate as c, type DocumentLinkProvider as d, type EditorActions as e, type EditorColorScheme as f, type EditorContextValue as g, type EditorMode as h, EditorProvider as i, type EditorProviderProps as j, EditorShell as k, type EditorShellProps as l, type EditorState as m, type EditorView as n, type MentionProvider as o, type PreviewPanelProps as p, type RawEditorProps as q, WysiwygEditor as r, type WysiwygEditorProps as s, useEditorContext as u };

package/dist/styles/index.css

@@ -9715,6 +9715,19 @@
   background: #f5f5f5;
   padding: 16px;
 }
+.squisq-dashboard-fit {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  container-type: size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.squisq-dashboard-fit .squisq-dashboard {
+  --squisq-dashboard-fit-width: min(100%, calc(100cqh * var(--squisq-dashboard-aspect, 1.7778)));
+}
 .squisq-editor-shell[data-print-preview=true] > .squisq-status-bar,
 .squisq-editor-shell[data-print-preview=true] > .squisq-timeline,
 .squisq-editor-shell[data-print-preview=true] .squisq-media-bin,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.7.2",
+  "version": "2.8.0",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -84,10 +84,10 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.7.1",
-    "@bendyline/squisq-formats": "2.4.3",
-    "@bendyline/squisq-react": "2.7.1",
-    "@bendyline/squisq-video-react": "2.3.4",
+    "@bendyline/squisq": "2.8.0",
+    "@bendyline/squisq-formats": "2.4.5",
+    "@bendyline/squisq-react": "2.8.0",
+    "@bendyline/squisq-video-react": "2.4.0",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@tiptap/core": "2.27.2",
     "@tiptap/extension-heading": "2.27.2",
@@ -105,7 +105,7 @@
     "@tiptap/react": "2.27.2",
     "@tiptap/starter-kit": "2.27.2",
     "@tiptap/suggestion": "2.27.2",
-    "mermaid": "11.16.0",
+    "mermaid": "11.16.1",
     "type-fest": "4.41.0"
   },
   "devDependencies": {