@oh-just-another/editor 0.58.2 → 0.60.0

package/dist/Diagram.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
 import { Clipboard, Copy, Delete, Download, FileDown, FileUp, Grid3x3, Grip, HelpCircle, ImageDown, Library as LibraryIcon, Magnet, Maximize, Minus, Monitor, Moon, MousePointer, Plus, Redo2, RotateCcw, Scissors, Sun, Undo2, ZoomIn, ZoomOut, } from "lucide-react";
-import { BottomBar, BottomSheet, ButtonGroup, ContextMenu, DEFAULT_CONTEXT_MENU, DEFAULT_VERTICAL_TOOLBAR, DiagramRoot, CommandPalette, DiagramSurface, HelpButton, HelpDialog, IconButton, LibraryPanel, MainMenu, ResetToContentButton, LinkHoverPopup, LinkDropShapeMenu, LinkCaptionEditor, SelectionFloatingPanel, TextEditorOverlay, FrameNameEditorOverlay, ToastHost, Toolbar, Tooltip, TooltipProvider, TopBar, UILayer, useDiagramOptional, useHelpDialogHotkey, useMobileLayout, usePalettePlacement, useScene, } from "@oh-just-another/react-ui";
+import { BottomBar, BottomSheet, ButtonGroup, ContextMenu, DEFAULT_CONTEXT_MENU, DEFAULT_VERTICAL_TOOLBAR, DiagramRoot, CommandPalette, DiagramSurface, HelpButton, HelpDialog, IconButton, DrawingPanel, LibraryPanel, MainMenu, Minimap, ResetToContentButton, LinkHoverPopup, LinkDropShapeMenu, LinkCaptionEditor, SelectionFloatingPanel, SearchOverlay, StatsPanel, TextEditorOverlay, FrameNameEditorOverlay, PortalContainerProvider, ToastHost, Toolbar, Tooltip, TooltipProvider, TopBar, UILayer, ZenModeProvider, useDiagramOptional, useHelpDialogHotkey, useMobileLayout, usePalettePlacement, useScene, useZenMode, } from "@oh-just-another/react-ui";
 /**
  * Lucide icon sizing — `MENU_ICON_SIZE` is for in-row icons of
  * `MainMenu.Item`, `TOGGLE_ICON_SIZE` is for the segmented Theme /
@@ -19,20 +19,21 @@ const buttonIcon = { size: BUTTON_ICON_SIZE, strokeWidth: BUTTON_ICON_STROKE };
 /** Default target for the Help-menu "GitHub" link (overridable / hideable via the `repositoryUrl` prop). */
 const DEFAULT_REPOSITORY_URL = "https://github.com/oh-just-another/diagram";
 import { formatHotkey } from "@oh-just-another/state";
-import { emptyScene } from "@oh-just-another/scene";
-import { parseScene, stringifyScene } from "@oh-just-another/serialization";
-import { renderSceneToSvg } from "@oh-just-another/renderer-svg";
+import { hydrateScene, isText, } from "@oh-just-another/scene";
 import { WasmTextShaper } from "@oh-just-another/text-wasm";
 import { WasmRasterizer } from "@oh-just-another/raster-wasm";
+import { registerBundledFonts } from "@oh-just-another/fonts";
 import { createRenderWorker } from "@oh-just-another/renderer-canvas";
 import { registerAnimationAdapter, setActiveRasterizer, setActiveTextShaper, } from "@oh-just-another/renderer-core";
 import { registerLayoutKind } from "@oh-just-another/scene";
 import { defaultRegistry } from "@oh-just-another/templates";
 import { detectCapabilities, logCapabilities, } from "./capabilities";
-import { exportSceneToPng } from "./png-export";
+import { installGifAnimationAdapter } from "./gif-animation.js";
+import { useThemedPortalContainer } from "./themed-portal-container.js";
+import { downloadScene, downloadSvg, downloadPng, openSceneFile, copySceneAsImage, registerFileActions, setFileActionNotifier, } from "./file-actions.js";
 import { isEditableTarget } from "./dom-focus";
 export const Diagram = forwardRef(function Diagram(props, ref) {
-    const { initialScene, initialMode = "select", templates, fileDropHandlers, layoutKinds, animationAdapters, onReady, onSceneChange, onSelectionChange, capabilities: capabilityOverrides, workerFactory, hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton, hideMainMenu, hideZoomControls, hideResetToContent, hideHelpButton, hideContextMenu, hideSelectionPanel, renderTopBarLeft, renderTopBarCenter, renderTopBarRight, renderBottomBarLeft, renderBottomBarCenter, renderBottomBarRight, renderMainMenuExtras, onImportTemplates, theme: themeProp, defaultTheme = "system", onThemeChange, persistTheme, repositoryUrl, onConfirm, onNotify, className, style, } = props;
+    const { initialScene, initialMode = "select", grid, snap, templates, fileDropHandlers, layoutKinds, animationAdapters, onReady, onSceneChange, onSelectionChange, capabilities: capabilityOverrides, workerFactory, hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton, hideMainMenu, hideZoomControls, hideResetToContent, hideHelpButton, hideContextMenu, hideSelectionPanel, hideDrawingPanel, minimap, renderTopBarLeft, renderTopBarCenter, renderTopBarRight, renderBottomBarLeft, renderBottomBarCenter, renderBottomBarRight, renderMainMenuExtras, onImportTemplates, theme: themeProp, defaultTheme = "system", onThemeChange, persistTheme, repositoryUrl, onConfirm, onNotify, className, style, } = props;
     // Theme: controlled when `themeProp` is provided, otherwise
     // self-managed via `internalTheme`. The lazy `useState` initializer
     // reads from `localStorage` once when `persistTheme` is on.
@@ -52,6 +53,9 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
         return defaultTheme;
     });
     const theme = themeProp ?? internalTheme;
+    // Floating UI portals here (a body-level wrapper that mirrors `theme`) so it
+    // inherits the app theme instead of the OS `prefers-color-scheme` fallback.
+    const portalContainer = useThemedPortalContainer(theme);
     const changeTheme = useCallback((next) => {
         if (themeProp === undefined)
             setInternalTheme(next);
@@ -60,17 +64,30 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
         }
         onThemeChange?.(next);
     }, [themeProp, onThemeChange, storageKey]);
-    const seed = useMemo(() => initialScene ?? emptyScene(), [initialScene]);
+    // Seed scene: host grid/snap props are merged over the defaults; a persisted
+    // `initialScene` (user data) wins over them. Depend on primitives so an
+    // inline `grid` object prop doesn't re-seed the editor every render.
+    const gridEnabled = grid?.enabled;
+    const gridStyle = grid?.style;
+    const seed = useMemo(() => hydrateScene({
+        ...(initialScene ? { saved: initialScene } : {}),
+        hostSettings: buildHostSettings(gridEnabled, gridStyle, snap),
+    }), [initialScene, gridEnabled, gridStyle, snap]);
     // Does the initial scene contain any text? Drives whether first paint
     // waits for the MSDF shaper (see the mount gate below).
     const sceneHasText = useMemo(() => {
         for (const s of seed.elements.values())
-            if (s.type === "text")
+            if (isText(s))
                 return true;
         return false;
     }, [seed]);
     // --- Plugin registration ---
     useEffect(() => {
+        // Built-in GIF decoder, registered by default so dropped / pasted GIFs play
+        // out of the box. Idempotent + lazy (gifuct-js loads on first decode). A
+        // host `animationAdapters` entry with kind "gif" overrides it (those are
+        // registered after).
+        installGifAnimationAdapter();
         if (templates)
             for (const t of templates)
                 defaultRegistry.register(t);
@@ -90,6 +107,9 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
     // font is ready, so text doesn't render in a fallback font and then
     // snap to the WASM font ("jump" on load — a FOUT).
     const [wasmTextSettled, setWasmTextSettled] = useState(false);
+    // Flipped once the bundled web fonts finish loading, so the canvas can
+    // redraw text in them (the browser doesn't auto-repaint canvas text).
+    const [fontsReady, setFontsReady] = useState(false);
     const detectionRef = useRef(null);
     const loggedRef = useRef(false);
     useEffect(() => {
@@ -106,6 +126,18 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
             }
             setProfile(detected);
             const loads = [];
+            // Load the bundled fonts so every backend draws the same faces; redraw
+            // once they settle.
+            loads.push(registerBundledFonts(document).then(() => {
+                if (!cancelled)
+                    setFontsReady(true);
+            }, (err) => {
+                // Settle even on failure so a text scene still mounts (in the
+                // fallback font) instead of hanging on the first-paint gate.
+                if (!cancelled)
+                    setFontsReady(true);
+                console.warn("[diagram] bundled fonts load failed", err);
+            }));
             if (detected.wasmText) {
                 loads.push(WasmTextShaper.loadBundled().then((shaper) => {
                     if (cancelled)
@@ -156,19 +188,24 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
         editor.setMode(editor.mode);
         return undefined;
     }, [editor, wasmShaper, wasmRaster]);
-    // Animation adapters (GIF decoder) are registered in the plugin
-    // effect above, which runs AFTER the editor's first paint (child
-    // effects fire before parent ones). Force one render once both the
-    // editor and the adapters are in place so each animated shape's first
-    // `getFrameAt` runs — that kicks off the async decode, after which the
-    // decode→re-render nudge (`onAnimationContentReady`) paints the frame.
-    // Without this, a paused GIF restored from storage never even starts
-    // decoding and stays blank.
+    // Animation adapters (GIF decoder) are registered in the plugin effect above,
+    // which runs AFTER the editor's first paint (child effects fire before parent
+    // ones). Force one render once the editor is ready so each animated shape's
+    // first `getFrameAt` runs — that kicks off the async decode, after which the
+    // decode→re-render nudge (`onAnimationContentReady`) paints the frame. The
+    // built-in GIF adapter is always registered, so this nudge is unconditional
+    // (also re-runs if a host swaps `animationAdapters`). Without it, a paused GIF
+    // restored from storage never even starts decoding and stays blank.
     useEffect(() => {
-        if (editor && animationAdapters && animationAdapters.length > 0) {
+        if (editor)
             editor.forceRender();
-        }
     }, [editor, animationAdapters]);
+    // Redraw once the bundled fonts load so canvas text switches from the
+    // fallback face to the bundled one.
+    useEffect(() => {
+        if (editor && fontsReady)
+            editor.forceRender();
+    }, [editor, fontsReady]);
     useEffect(() => {
         if (!editor || (!onSceneChange && !onSelectionChange))
             return undefined;
@@ -185,30 +222,58 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
             }
         });
     }, [editor, onSceneChange, onSelectionChange]);
-    // Hold Cmd / Ctrl to temporarily pull a shape off the grid during a
-    // drag (standard). We read the modifier state off every key event
-    // (and reset on blur) so a missed keyup can't leave snapping stuck off.
+    // Track transform modifiers off every key event (and reset on blur) so a
+    // missed keyup can't leave a flag stuck: Cmd/Ctrl pulls a shape off the grid
+    // for one drag; Alt resizes about the centre; Shift locks the resize aspect
+    // ratio or constrains a move to one axis.
     useEffect(() => {
         if (!editor)
             return undefined;
+        const ed = editor;
         const sync = (e) => {
-            // Don't track the modifier (or touch snap state) while typing in a
-            // field — keep the editor's snap-suppress flag inert there.
+            // Don't track modifiers (or touch snap state) while typing in a field —
+            // keep the editor's transform flags inert there.
+            if (isEditableTarget(e.target))
+                return;
+            ed.setSnapSuppressed(e.metaKey || e.ctrlKey);
+            ed.setTransformModifiers({ alt: e.altKey, shift: e.shiftKey });
+        };
+        // Flowchart CREATE lifecycle: Cmd/Ctrl+Arrow grows a pending preview; the
+        // session commits when Cmd/Ctrl is released and cancels on Escape. Keydown
+        // handles the cancel; keyup the commit.
+        const onKeyDown = (e) => {
+            sync(e);
             if (isEditableTarget(e.target))
                 return;
-            editor.setSnapSuppressed(e.metaKey || e.ctrlKey);
+            if (e.key === "Escape" && ed.flowchartPreview !== null) {
+                ed.cancelFlowchart();
+                e.preventDefault();
+            }
+        };
+        const onKeyUp = (e) => {
+            sync(e);
+            // Cmd/Ctrl released while a session is open → commit the preview.
+            if (!e.metaKey && !e.ctrlKey && ed.flowchartPreview !== null) {
+                ed.commitFlowchart();
+            }
         };
         const reset = () => {
-            editor.setSnapSuppressed(false);
+            ed.setSnapSuppressed(false);
+            ed.setTransformModifiers({ alt: false, shift: false });
+            // A window blur can swallow the Cmd/Ctrl keyup — commit any live session
+            // so a missed keyup can't strand the preview.
+            if (ed.flowchartPreview !== null)
+                ed.commitFlowchart();
         };
-        window.addEventListener("keydown", sync);
-        window.addEventListener("keyup", sync);
+        window.addEventListener("keydown", onKeyDown);
+        window.addEventListener("keyup", onKeyUp);
         window.addEventListener("blur", reset);
         return () => {
-            window.removeEventListener("keydown", sync);
-            window.removeEventListener("keyup", sync);
+            window.removeEventListener("keydown", onKeyDown);
+            window.removeEventListener("keyup", onKeyUp);
             window.removeEventListener("blur", reset);
-            editor.setSnapSuppressed(false);
+            ed.setSnapSuppressed(false);
+            ed.setTransformModifiers({ alt: false, shift: false });
         };
     }, [editor]);
     useImperativeHandle(ref, () => ({
@@ -233,24 +298,26 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
     if (!profile) {
         return _jsx("div", { className: className, style: style });
     }
-    // Hold the first paint of a text-bearing scene until the MSDF shaper
-    // has settled, so text renders in its final font from frame one (no
-    // fallback-font → WASM-font jump). Only the WebGL2 MSDF path swaps
-    // fonts like this; Canvas2D always draws system fonts (no jump), and
-    // text-free scenes have nothing to jump — both mount immediately, so
-    // we don't pay shaper-load latency on first paint.
+    // Hold the first paint of a text-bearing scene until its font is ready, so
+    // text renders in its final face from frame one (no fallback-font jump).
+    // Every backend now draws the bundled fonts, so all wait on `fontsReady`;
+    // the WebGL2 MSDF path also waits on the shaper. Text-free scenes mount
+    // immediately and don't pay the load latency.
+    if (sceneHasText && !fontsReady) {
+        return _jsx("div", { className: className, style: style });
+    }
     if (profile.renderer === "webgl2" && profile.wasmText && !wasmTextSettled && sceneHasText) {
         return _jsx("div", { className: className, style: style });
     }
-    return (_jsx(ToastHost, { children: _jsx(TooltipProvider, { children: _jsx("div", { className: className, "data-diagram-root": true, ...(theme === "system" ? {} : { "data-theme": theme }), style: {
-                    position: "relative",
-                    width: "100%",
-                    height: "100%",
-                    background: "var(--du-canvas-bg)",
-                    ...style,
-                }, children: _jsx(DiagramRoot, { initialScene: seed, initialMode: initialMode, onReady: handleReady, renderer: profile.renderer, ...(profile.renderer === "offscreen"
-                        ? { workerFactory: workerFactory ?? createRenderWorker }
-                        : {}), ...(wasmShaper ? { textShaper: wasmShaper } : {}), ...(wasmRaster ? { rasterizer: wasmRaster } : {}), children: _jsx(EditorShell, { hideTopBar: hideTopBar, hideBottomBar: hideBottomBar, hideToolbar: hideToolbar, hideLibraryButton: hideLibraryButton, hideMainMenu: hideMainMenu, hideZoomControls: hideZoomControls, hideResetToContent: hideResetToContent, hideHelpButton: hideHelpButton, hideContextMenu: hideContextMenu, hideSelectionPanel: hideSelectionPanel, renderTopBarLeft: renderTopBarLeft, renderTopBarCenter: renderTopBarCenter, renderTopBarRight: renderTopBarRight, renderBottomBarLeft: renderBottomBarLeft, renderBottomBarCenter: renderBottomBarCenter, renderBottomBarRight: renderBottomBarRight, renderMainMenuExtras: renderMainMenuExtras, onImportTemplates: onImportTemplates, repositoryUrl: repositoryUrl, onConfirm: onConfirm, onNotify: onNotify, theme: theme, changeTheme: changeTheme }) }) }) }) }));
+    return (_jsx(PortalContainerProvider, { container: portalContainer, children: _jsx(ToastHost, { children: _jsx(TooltipProvider, { children: _jsx("div", { className: className, "data-diagram-root": true, ...(theme === "system" ? {} : { "data-theme": theme }), style: {
+                        position: "relative",
+                        width: "100%",
+                        height: "100%",
+                        background: "var(--du-canvas-bg)",
+                        ...style,
+                    }, children: _jsx(DiagramRoot, { initialScene: seed, initialMode: initialMode, onReady: handleReady, renderer: profile.renderer, ...(profile.renderer === "offscreen"
+                            ? { workerFactory: workerFactory ?? createRenderWorker }
+                            : {}), ...(wasmShaper ? { textShaper: wasmShaper } : {}), ...(wasmRaster ? { rasterizer: wasmRaster } : {}), children: _jsx(ZenModeProvider, { children: _jsx(EditorShell, { hideTopBar: hideTopBar, hideBottomBar: hideBottomBar, hideToolbar: hideToolbar, hideLibraryButton: hideLibraryButton, hideMainMenu: hideMainMenu, hideZoomControls: hideZoomControls, hideResetToContent: hideResetToContent, hideHelpButton: hideHelpButton, hideContextMenu: hideContextMenu, hideSelectionPanel: hideSelectionPanel, hideDrawingPanel: hideDrawingPanel, minimap: minimap, renderTopBarLeft: renderTopBarLeft, renderTopBarCenter: renderTopBarCenter, renderTopBarRight: renderTopBarRight, renderBottomBarLeft: renderBottomBarLeft, renderBottomBarCenter: renderBottomBarCenter, renderBottomBarRight: renderBottomBarRight, renderMainMenuExtras: renderMainMenuExtras, onImportTemplates: onImportTemplates, repositoryUrl: repositoryUrl, onConfirm: onConfirm, onNotify: onNotify, theme: theme, changeTheme: changeTheme }) }) }) }) }) }) }));
 });
 // Match the primary public name (`<Editor>`) in DevTools / stack traces,
 // even though the internal forwardRef function is named `Diagram`.
@@ -261,8 +328,11 @@ Diagram.displayName = "Editor";
  * `useHelpDialogHotkey`) resolve correctly. Composes the
  * canvas-surface + ui-layer overlay + side panels into one tree.
  */
-const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton, hideMainMenu, hideZoomControls, hideResetToContent, hideHelpButton, hideContextMenu, hideSelectionPanel, renderTopBarLeft, renderTopBarCenter, renderTopBarRight, renderBottomBarLeft, renderBottomBarCenter, renderBottomBarRight, renderMainMenuExtras, onImportTemplates, repositoryUrl, onConfirm, onNotify, theme, changeTheme, }) => {
+const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton, hideMainMenu, hideZoomControls, hideResetToContent, hideHelpButton, hideContextMenu, hideSelectionPanel, hideDrawingPanel, minimap, renderTopBarLeft, renderTopBarCenter, renderTopBarRight, renderBottomBarLeft, renderBottomBarCenter, renderBottomBarRight, renderMainMenuExtras, onImportTemplates, repositoryUrl, onConfirm, onNotify, theme, changeTheme, }) => {
     const editor = useDiagramOptional();
+    // Zen mode (⌥Z): hide every chrome surface for focused work, leaving the
+    // canvas + the observational overlays (search, stats, command palette).
+    const { zen } = useZenMode();
     // Omitted → project repo; explicit string → that URL; null → no link.
     const repositoryHref = repositoryUrl === undefined ? DEFAULT_REPOSITORY_URL : repositoryUrl;
     // Native dialogs by default; hosts can route through their own UI.
@@ -271,8 +341,16 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
         ((message) => {
             window.alert(message);
         });
+    // Register the file-ops actions (Save / Open / Export / Copy-as-image)
+    // on the shared registry so hosts binding hotkeys / the command palette
+    // pick them up, and route their error messages through this shell's
+    // notifier (host toast or the alert fallback above).
+    useEffect(() => {
+        registerFileActions();
+        setFileActionNotifier(notify);
+    }, [notify]);
     // Subscribe to scene changes so the Grid toggle in MainMenu reads
-    // the latest viewport.gridSize / gridStyle. `useScene` is a thin
+    // the latest viewport.gridEnabled / gridStyle. `useScene` is a thin
     // selector hook — re-renders only on scene identity flips.
     void useScene();
     const paletteDropHandlers = usePalettePlacement();
@@ -319,7 +397,7 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
                     bottom: 0,
                     left: 0,
                     right: 0,
-                }, children: [_jsx(DiagramSurface, { style: { position: "absolute", inset: 0 } }), _jsx(TextEditorOverlay, {}), _jsx(FrameNameEditorOverlay, {}), _jsx(LinkHoverPopup, {}), _jsx(LinkDropShapeMenu, {}), _jsx(LinkCaptionEditor, {}), !hideContextMenu && _jsx(ContextMenu, { items: DEFAULT_CONTEXT_MENU })] }), !hideToolbar ? (_jsx(Toolbar, { orientation: "vertical", items: toolbarItems, style: {
+                }, children: [_jsx(DiagramSurface, { style: { position: "absolute", inset: 0 } }), _jsx(TextEditorOverlay, {}), _jsx(FrameNameEditorOverlay, {}), _jsx(LinkHoverPopup, {}), _jsx(LinkDropShapeMenu, {}), _jsx(LinkCaptionEditor, {}), !hideContextMenu && _jsx(ContextMenu, { items: DEFAULT_CONTEXT_MENU })] }), !hideToolbar && !zen ? (_jsx(Toolbar, { orientation: "vertical", items: toolbarItems, style: {
                     position: "absolute",
                     // Vertically centred on the left; floats just to the right of
                     // the library when it's open (else flush near the edge).
@@ -329,18 +407,22 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
                     left: `calc(env(safe-area-inset-left, 0px) + ${toolbarLeft}px)`,
                     transform: "translateY(-50%)",
                     zIndex: 60,
-                } })) : null, _jsxs(UILayer, { children: [!hideTopBar && (_jsx(TopBar, { left: _jsxs(ButtonGroup, { ariaLabel: "Logo and main menu", children: [_jsx("span", { "aria-label": "Diagram", title: "Diagram", className: "du-icon-button", style: {
+                } })) : null, _jsxs(UILayer, { children: [!hideTopBar && !zen && (_jsx(TopBar, { left: _jsxs(ButtonGroup, { ariaLabel: "Logo and main menu", children: [_jsx("span", { "aria-label": "Diagram", title: "Diagram", className: "du-icon-button", style: {
                                         minWidth: 36,
                                         padding: "0 10px",
                                         cursor: "default",
                                         fontWeight: 600,
                                         letterSpacing: 0.5,
                                     }, children: "\u2317" }), !hideMainMenu && (_jsxs(MainMenu, { children: [_jsxs(MainMenu.Group, { title: "File", children: [_jsx(MainMenu.Item, { icon: _jsx(FileUp, { ...menuIcon }), onClick: () => {
-                                                        openSceneFile(editor, notify);
-                                                    }, children: "Open\u2026" }), _jsx(MainMenu.Item, { icon: _jsx(FileDown, { ...menuIcon }), onClick: () => {
+                                                        if (editor)
+                                                            openSceneFile(editor);
+                                                    }, shortcut: formatHotkey({ key: "O", meta: true }), children: "Open\u2026" }), _jsx(MainMenu.Item, { icon: _jsx(FileDown, { ...menuIcon }), onClick: () => {
                                                         if (editor)
                                                             downloadScene(editor.scene);
-                                                    }, disabled: !editor, children: "Save as JSON" }), _jsxs(MainMenu.Submenu, { icon: _jsx(Download, { ...menuIcon }), label: "Export\u2026", disabled: !editor, children: [_jsx(MainMenu.Item, { icon: _jsx(ImageDown, { ...menuIcon }), onClick: () => editor && void downloadPng(editor, "transparent", notify), disabled: !editor, children: "PNG (transparent)" }), _jsx(MainMenu.Item, { icon: _jsx(ImageDown, { ...menuIcon }), onClick: () => editor && void downloadPng(editor, "color", notify), disabled: !editor, children: "PNG (with background)" }), _jsx(MainMenu.Item, { icon: _jsx(ImageDown, { ...menuIcon }), onClick: () => editor && void downloadPng(editor, "color-and-grid", notify), disabled: !editor, children: "PNG (with background + grid)" }), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Item, { icon: _jsx(Download, { ...menuIcon }), onClick: () => {
+                                                    }, disabled: !editor, shortcut: formatHotkey({ key: "S", meta: true }), children: "Save as JSON" }), _jsx(MainMenu.Item, { icon: _jsx(Copy, { ...menuIcon }), onClick: () => {
+                                                        if (editor)
+                                                            void copySceneAsImage(editor);
+                                                    }, disabled: !editor, shortcut: formatHotkey({ key: "C", shift: true, alt: true }), children: "Copy as image" }), _jsxs(MainMenu.Submenu, { icon: _jsx(Download, { ...menuIcon }), label: "Export\u2026", disabled: !editor, children: [_jsx(MainMenu.Item, { icon: _jsx(ImageDown, { ...menuIcon }), onClick: () => editor && void downloadPng(editor, "transparent"), disabled: !editor, children: "PNG (transparent)" }), _jsx(MainMenu.Item, { icon: _jsx(ImageDown, { ...menuIcon }), onClick: () => editor && void downloadPng(editor, "color"), disabled: !editor, shortcut: formatHotkey({ key: "E", meta: true, shift: true }), children: "PNG (with background)" }), _jsx(MainMenu.Item, { icon: _jsx(ImageDown, { ...menuIcon }), onClick: () => editor && void downloadPng(editor, "color-and-grid"), disabled: !editor, children: "PNG (with background + grid)" }), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Item, { icon: _jsx(Download, { ...menuIcon }), onClick: () => {
                                                                 if (editor)
                                                                     downloadSvg(editor.scene);
                                                             }, disabled: !editor, children: "SVG" })] }), _jsx(MainMenu.Item, { icon: _jsx(RotateCcw, { ...menuIcon }), onClick: () => {
@@ -348,10 +430,10 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
                                                             return;
                                                         if (confirmDialog("Reset canvas? This clears all shapes.")) {
                                                             // editor.clear() keeps viewport (zoom /
-                                                            // pan / gridSize) and layers — only
+                                                            // pan / gridEnabled) and layers — only
                                                             // shapes / edges go. loadScene(emptyScene())
-                                                            // would also drop the grid because
-                                                            // DEFAULT_VIEWPORT has no gridSize.
+                                                            // would also reset the grid because
+                                                            // DEFAULT_VIEWPORT has it disabled.
                                                             editor.clear();
                                                         }
                                                     }, disabled: !editor, children: "Reset canvas" })] }), _jsx(MainMenu.Separator, {}), _jsxs(MainMenu.Group, { title: "Edit", children: [_jsx(MainMenu.Item, { icon: _jsx(Undo2, { ...menuIcon }), shortcut: "\u2318Z", onClick: () => editor?.undo(), disabled: !editor, children: "Undo" }), _jsx(MainMenu.Item, { icon: _jsx(Redo2, { ...menuIcon }), shortcut: "\u21E7\u2318Z", onClick: () => editor?.redo(), disabled: !editor, children: "Redo" }), _jsx(MainMenu.Item, { icon: _jsx(Scissors, { ...menuIcon }), shortcut: "\u2318X", onClick: () => editor?.cutSelected(), disabled: !editor, children: "Cut" }), _jsx(MainMenu.Item, { icon: _jsx(Copy, { ...menuIcon }), shortcut: "\u2318C", onClick: () => editor?.copySelected(), disabled: !editor, children: "Copy" }), _jsx(MainMenu.Item, { icon: _jsx(Clipboard, { ...menuIcon }), shortcut: "\u2318V", onClick: () => editor?.paste(), disabled: !editor, children: "Paste" }), _jsx(MainMenu.Item, { icon: _jsx(MousePointer, { ...menuIcon }), shortcut: "\u2318A", onClick: () => editor?.selectAll(), disabled: !editor, children: "Select all" }), _jsx(MainMenu.Item, { icon: _jsx(Delete, { ...menuIcon }), shortcut: "\u232B", onClick: () => editor?.deleteSelected(), disabled: !editor, children: "Delete selected" })] }), _jsx(MainMenu.Separator, {}), _jsxs(MainMenu.Group, { title: "View", children: [_jsx(MainMenu.Item, { icon: _jsx(Maximize, { ...menuIcon }), shortcut: "\u21E7F", onClick: () => editor?.zoomToFit(), disabled: !editor, children: "Fit to screen" }), _jsx(MainMenu.Item, { icon: _jsx(ZoomIn, { ...menuIcon }), shortcut: "\u2318+", onClick: () => editor?.zoomIn(), disabled: !editor, children: "Zoom in" }), _jsx(MainMenu.Item, { icon: _jsx(ZoomOut, { ...menuIcon }), shortcut: "\u2318\u2212", onClick: () => editor?.zoomOut(), disabled: !editor, children: "Zoom out" })] }), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Group, { title: "Theme", children: _jsx(MainMenu.Toggle, { value: theme, onChange: changeTheme, options: [
@@ -371,24 +453,39 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
                                                     { value: "off", label: "Off", icon: _jsx(Minus, { ...toggleIcon }) },
                                                 ] }) }), _jsx(MainMenu.Separator, {}), _jsxs(MainMenu.Group, { title: "Help", children: [_jsx(MainMenu.Item, { icon: _jsx(HelpCircle, { ...menuIcon }), shortcut: "?", onClick: () => {
                                                         setHelpOpen(true);
-                                                    }, children: "Hotkeys" }), repositoryHref ? (_jsx(MainMenu.ItemLink, { href: repositoryHref, external: true, children: "GitHub" })) : null] }), renderMainMenuExtras ? (_jsxs(_Fragment, { children: [_jsx(MainMenu.Separator, {}), renderMainMenuExtras()] })) : null] })), renderTopBarLeft ? renderTopBarLeft() : null] }), center: renderTopBarCenter?.(), right: _jsx(ButtonGroup, { ariaLabel: "Top bar actions", children: renderTopBarRight ? renderTopBarRight() : null }) })), !hideBottomBar && (_jsx(BottomBar, { left: renderBottomBarLeft ? renderBottomBarLeft() : null, center: renderBottomBarCenter ? (renderBottomBarCenter()) : !hideResetToContent ? (_jsx(ResetToContentButton, {})) : null, right: renderBottomBarRight ? (renderBottomBarRight()) : !hideZoomControls ? (
+                                                    }, children: "Hotkeys" }), repositoryHref ? (_jsx(MainMenu.ItemLink, { href: repositoryHref, external: true, children: "GitHub" })) : null] }), renderMainMenuExtras ? (_jsxs(_Fragment, { children: [_jsx(MainMenu.Separator, {}), renderMainMenuExtras()] })) : null] })), renderTopBarLeft ? renderTopBarLeft() : null] }), center: renderTopBarCenter?.(), right: _jsx(ButtonGroup, { ariaLabel: "Top bar actions", children: renderTopBarRight ? renderTopBarRight() : null }) })), !hideBottomBar && !zen && (_jsx(BottomBar, { left: renderBottomBarLeft ? renderBottomBarLeft() : null, center: renderBottomBarCenter ? (renderBottomBarCenter()) : !hideResetToContent ? (_jsx(ResetToContentButton, {})) : null, right: renderBottomBarRight ? (renderBottomBarRight()) : !hideZoomControls ? (
                         // Help sits inside the zoom pill group, right next to it.
-                        _jsx(ZoomControls, { trailing: !hideHelpButton ? _jsx(HelpButton, {}) : undefined })) : !hideHelpButton ? (_jsx(HelpButton, {})) : null })), mobile ? (libraryOpen ? (_jsx(BottomSheet, { snapPoints: [0, 60, 92], defaultValue: 60, style: { pointerEvents: "auto" }, onChange: (vh) => {
+                        _jsx(ZoomControls, { trailing: !hideHelpButton ? _jsx(HelpButton, {}) : undefined })) : !hideHelpButton ? (_jsx(HelpButton, {})) : null })), zen ? null : mobile ? (libraryOpen ? (_jsx(BottomSheet, { snapPoints: [0, 60, 92], defaultValue: 60, style: { pointerEvents: "auto" }, onChange: (vh) => {
                             if (vh <= 0)
                                 setLibraryOpen(false);
                         }, children: _jsx(LibraryPanel, { open: true, sheet: true, onClose: () => {
                                 setLibraryOpen(false);
                             }, ...(onImportTemplates ? { onImport: onImportTemplates } : {}) }) })) : null) : (_jsx(LibraryPanel, { open: libraryOpen, side: "left", style: { left: 0 }, onClose: () => {
                             setLibraryOpen(false);
-                        }, ...(onImportTemplates ? { onImport: onImportTemplates } : {}) }))] }), !hideSelectionPanel && _jsx(SelectionFloatingPanel, {}), _jsx(HelpDialog, { open: helpOpen, onClose: () => {
+                        }, ...(onImportTemplates ? { onImport: onImportTemplates } : {}) }))] }), minimap && !zen && (_jsx("div", { style: {
+                    position: "absolute",
+                    right: "var(--du-bar-inset, 12px)",
+                    bottom: "calc(var(--du-bar-inset, 12px) + 52px)",
+                    border: "1px solid var(--du-border, #d0d0d0)",
+                    borderRadius: 6,
+                    background: "var(--du-surface, #fff)",
+                    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+                    overflow: "hidden",
+                    zIndex: 40,
+                }, children: _jsx(Minimap, {}) })), !hideDrawingPanel && !zen && (_jsx("div", { style: {
+                    position: "absolute",
+                    top: "calc(var(--du-bar-inset, 12px) + 52px)",
+                    right: "var(--du-bar-inset, 12px)",
+                    zIndex: 40,
+                }, children: _jsx(DrawingPanel, {}) })), !hideSelectionPanel && !zen && _jsx(SelectionFloatingPanel, {}), _jsx(HelpDialog, { open: helpOpen, onClose: () => {
                     setHelpOpen(false);
-                } }), _jsx(CommandPalette, {}), void editor] }));
+                } }), _jsx(CommandPalette, {}), _jsx(SearchOverlay, {}), _jsx(StatsPanel, {}), void editor] }));
 };
 /**
  * Platform-correct hotkey labels for the zoom-control tooltips — ⌘
  * glyphs on macOS, "Ctrl+…" elsewhere, mirroring the top toolbar's
- * tool tooltips. Descriptors mirror the bound zoom hotkeys in
- * `actionZoom.ts` (display uses the minus/plus glyphs).
+ * tool tooltips. Mirror the bound zoom hotkeys (display uses the
+ * minus/plus glyphs).
  */
 const ZOOM_OUT_HOTKEY = formatHotkey({ meta: true, key: "−" });
 const ZOOM_IN_HOTKEY = formatHotkey({ meta: true, key: "+" });
@@ -431,122 +528,25 @@ const ZoomControls = ({ trailing }) => {
                     editor.zoomToFit();
                 }, children: _jsx(Maximize, { ...buttonIcon }) }), trailing] }));
 };
-// --- MainMenu File-group helpers --------------------------------------------
-/**
- * Trigger a browser download of arbitrary bytes. Used by the
- * Save / Export menu items. Creates a temporary `<a>`, clicks it,
- * cleans up the object URL on the next animation frame so the
- * browser has time to start the download.
- */
-const downloadBlob = (blob, filename) => {
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement("a");
-    a.href = url;
-    a.download = filename;
-    document.body.appendChild(a);
-    a.click();
-    document.body.removeChild(a);
-    requestAnimationFrame(() => {
-        URL.revokeObjectURL(url);
-    });
-};
-/** "Save as JSON" — serialises the scene through @serialization. */
-const downloadScene = (scene) => {
-    const json = stringifyScene(scene, 2);
-    downloadBlob(new Blob([json], { type: "application/json" }), "scene.diagram.json");
-};
-/**
- * "Open…" — file picker that accepts `.diagram.json`, parses it,
- * and replaces the editor's scene. Resets history (matches the
- * default `loadScene` behaviour). User cancellation = no-op.
- */
-const openSceneFile = (editor, notify) => {
-    if (!editor)
-        return;
-    const input = document.createElement("input");
-    input.type = "file";
-    input.accept = "application/json,.json";
-    input.onchange = () => {
-        const file = input.files?.[0];
-        if (!file)
-            return;
-        void file.text().then((text) => {
-            try {
-                const scene = parseScene(text);
-                editor.loadScene(scene);
-            }
-            catch (err) {
-                console.error("[diagram] failed to parse scene file:", err);
-                notify("Failed to parse the file — make sure it was saved through this app's Save action.");
-            }
-        });
-    };
-    input.click();
-};
-/**
- * "Export as PNG" — renders the **full scene** (not just the visible
- * viewport) into an OffscreenCanvas via the standard `renderScene` +
- * `renderLinks` pipeline and downloads the result. Three variants
- * exposed in the menu:
- *
- *   • transparent      — PNG with alpha channel preserved
- *   • color            — solid background fill (host canvas colour)
- *   • color-and-grid   — solid fill + same grid the user sees
- *
- * Scale fixed at 2× for retina-quality output (matches the standard /
- * standard default). The full-scene contract makes this symmetric with
- * SVG export, which always emits the whole scene.
- *
- * Implementation lives in `./png-export.ts` so this file stays
- * focused on UI wiring.
- */
-const PNG_EXPORT_SCALE = 2;
-const downloadPng = async (editor, background, notify) => {
-    const backgroundColor = readCanvasBackgroundColor();
-    const blob = await exportSceneToPng(editor.scene, {
-        background,
-        scale: PNG_EXPORT_SCALE,
-        backgroundColor,
-    });
-    if (!blob) {
-        // Empty scene — convertToBlob unavailable or no shapes to export.
-        notify("Nothing to export — the canvas is empty.");
-        return;
-    }
-    downloadBlob(blob, "scene.png");
-};
-/**
- * Read the host's current `--du-canvas-bg` CSS variable. Falls back
- * to white if the variable isn't set (e.g. host hasn't loaded the
- * react-ui stylesheet). Matches what the user sees behind the
- * shapes on the live canvas.
- */
-const readCanvasBackgroundColor = () => {
-    const probe = document.querySelector('canvas[data-layer="main"]') ?? document.body;
-    const value = getComputedStyle(probe).getPropertyValue("--du-canvas-bg").trim();
-    return value || "#ffffff";
-};
-/**
- * "Export as SVG" — uses `@renderer-svg.renderSceneToSvg` so the
- * output is identical to the headless render path (vector, no
- * bitmap fall-back, works in any browser). One file per scene.
- */
-const downloadSvg = (scene) => {
-    const svg = renderSceneToSvg(scene);
-    downloadBlob(new Blob([svg], { type: "image/svg+xml" }), "scene.svg");
-};
 // --- Grid toggle helpers ----------------------------------------------------
-const DEFAULT_GRID_SIZE = 20;
+/** Translate the `grid` / `snap` props into a partial settings override. */
+const buildHostSettings = (gridEnabled, gridStyle, snap) => ({
+    viewport: {
+        ...(gridEnabled !== undefined ? { gridEnabled } : {}),
+        ...(gridStyle !== undefined ? { gridStyle } : {}),
+        ...(snap !== undefined ? { snapToGrid: snap } : {}),
+    },
+});
 /**
- * Map the current viewport state to the segmented Grid toggle's
- * value. `"off"` when the user hid the grid (gridSize 0 / unset);
- * otherwise the stored gridStyle (default `"lines"`).
+ * Map the current viewport state to the segmented Grid toggle's value.
+ * `"off"` when the grid is disabled; otherwise the stored gridStyle
+ * (default `"lines"`).
  */
 const gridSelection = (editor) => {
     if (!editor)
         return "lines";
     const vp = editor.scene.viewport;
-    if (!vp.gridSize || vp.gridSize <= 0)
+    if (!vp.gridEnabled)
         return "off";
     return vp.gridStyle ?? "lines";
 };
@@ -556,21 +556,14 @@ const gridSelection = (editor) => {
  * visibility).
  */
 const snapSelection = (editor) => (editor?.snapToGridEnabled ?? true) ? "on" : "off";
-/**
- * Inverse — translate the toggle's value back into a `setGrid`
- * call. Switching from "off" to lines/dots restores the default
- * grid size so the user doesn't have to also re-enter it
- * separately.
- */
+/** Inverse — translate the toggle's value back into a `setGrid` call. */
 const applyGridSelection = (editor, next) => {
     if (!editor)
         return;
     if (next === "off") {
-        editor.setGrid({ size: 0 });
+        editor.setGrid({ enabled: false });
         return;
     }
-    const vp = editor.scene.viewport;
-    const size = vp.gridSize && vp.gridSize > 0 ? vp.gridSize : DEFAULT_GRID_SIZE;
-    editor.setGrid({ size, style: next });
+    editor.setGrid({ enabled: true, style: next });
 };
 //# sourceMappingURL=Diagram.js.map