@oh-just-another/editor 0.61.0 → 0.62.0

package/dist/Diagram.d.ts

@@ -87,18 +87,32 @@ export interface DiagramProps {
      */
     readonly hideDrawingPanel?: boolean;
     /**
-     * Show the built-in minimap: a scene overview + viewport rect, docked
+     * Show the built-in minimap at startup: a scene overview + viewport rect, docked
      * bottom-right above the zoom controls. Click / drag it to pan. Hidden in
      * zen mode along with the rest of the chrome. Off by default.
      */
     readonly minimap?: boolean;
+    /**
+     * Brand cell at the start of the top bar. Defaults to the built-in
+     * `BrandLogo` (light / dark artwork from `assets/logo*.svg`); pass a node
+     * to replace it, or `null` to drop the cell.
+     */
+    readonly logo?: ReactNode;
     readonly renderTopBarLeft?: () => ReactNode;
     readonly renderTopBarCenter?: () => ReactNode;
     readonly renderTopBarRight?: () => ReactNode;
     readonly renderBottomBarLeft?: () => ReactNode;
     readonly renderBottomBarCenter?: () => ReactNode;
     readonly renderBottomBarRight?: () => ReactNode;
+    /** Extra rows appended to the main menu's top level (after a separator). */
     readonly renderMainMenuExtras?: () => ReactNode;
+    /** Extra rows inside the main menu's Board › submenu, right after Export (e.g. import / export formats). */
+    readonly renderBoardMenuExtras?: () => ReactNode;
+    /**
+     * Extra rows inside Board › Export, after the built-in PNG / SVG entries —
+     * for host export formats (JSON, Mermaid, …). Render `MainMenu.Item`s.
+     */
+    readonly renderExportMenuExtras?: () => ReactNode;
     /** Called when user clicks the "Import" button in the Library panel. */
     readonly onImportTemplates?: () => void;
     /**
@@ -128,6 +142,13 @@ export interface DiagramProps {
      * on reload).
      */
     readonly persistTheme?: boolean | string;
+    /**
+     * Persist the per-user editor preferences (`EditorPreferences`: object
+     * snapping, size readouts, wheel mode — the canvas menu's check rows) in
+     * `localStorage`. Pass `true` for the default key `"diagram-preferences"`,
+     * or a custom key string. Omit to keep them in memory for the session.
+     */
+    readonly persistPreferences?: boolean | string;
     /**
      * URL for the "GitHub" link in the Help menu. Omit to use the
      * project's repository; pass your own, or `null` to hide the link

package/dist/Diagram.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Diagram.d.ts","sourceRoot":"","sources":["../src/Diagram.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Diagram.d.ts","sourceRoot":"","sources":["../src/Diagram.tsx"],"names":[],"mappings":"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"}

package/dist/Diagram.js

@@ -1,23 +1,21 @@
 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, 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";
+import { Ban, Clipboard, Command, Copy, Delete, Download, Expand, Eye, FileDown, FileUp, Grid3x3, Grip, ImageDown, Keyboard, LayoutDashboard, Magnet, Map as MapIcon, Maximize, Minus, Monitor, Moon, Mouse, MousePointer, Pencil, Plus, Redo2, RotateCcw, Ruler, Scissors, Search, Shrink, SlidersHorizontal, Sun, Undo2, ZoomIn, } from "lucide-react";
+import { BottomBar, BottomSheet, ButtonGroup, ContextMenu, DEFAULT_CONTEXT_MENU, DEFAULT_VERTICAL_TOOLBAR, DiagramRoot, CommandPalette, DiagramSurface, HelpButton, HelpDialog, IconButton, DrawingPanel, LibraryPanel, MainMenu, Minimap, ResetToContentButton, LinkHoverPopup, LinkBadges, StickyReactions, LinkDropShapeMenu, LinkCaptionEditor, SelectionFloatingPanel, SearchOverlay, StatsPanel, TextEditorOverlay, FrameNameEditorOverlay, PortalContainerProvider, ToastHost, Toolbar, TooltipProvider, TopBar, UILayer, ZenModeProvider, useDiagramOptional, useHelpDialogHotkey, useMobileLayout, usePalettePlacement, useEditorSelector, useFullscreen, useZenMode, CONTROL_ICON, ROW_ICON, FileDropOverlay, } from "@oh-just-another/react-ui";
+import { BrandLogo } from "./brand/brand-logo.js";
+import { diagramFileDropHandler } from "@oh-just-another/importers";
 /**
  * Lucide icon sizing — `MENU_ICON_SIZE` is for in-row icons of
- * `MainMenu.Item`, `TOGGLE_ICON_SIZE` is for the segmented Theme /
- * Grid toggles, `BUTTON_ICON_SIZE` is for `IconButton` slot
+ * `MainMenu.Item`, `BUTTON_ICON_SIZE` is for `IconButton` slot
  * children (library, zoom, fit). All share `BUTTON_ICON_STROKE`
  * for visual consistency with the toolbar.
  */
-const MENU_ICON_SIZE = 14;
-const TOGGLE_ICON_SIZE = 14;
-const BUTTON_ICON_SIZE = 16;
-const BUTTON_ICON_STROKE = 1.75;
-const menuIcon = { size: MENU_ICON_SIZE, strokeWidth: BUTTON_ICON_STROKE };
-const toggleIcon = { size: TOGGLE_ICON_SIZE, strokeWidth: BUTTON_ICON_STROKE };
-const buttonIcon = { size: BUTTON_ICON_SIZE, strokeWidth: BUTTON_ICON_STROKE };
+const menuIcon = ROW_ICON;
+const buttonIcon = CONTROL_ICON;
 /** 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 { defaultActionRegistry } from "@oh-just-another/state";
+import { DEFAULT_PREFERENCES_STORAGE_KEY, bindPreferencesPersistence, } from "./preferences-storage.js";
 import { formatHotkey } from "@oh-just-another/state";
 import { hydrateScene, isText, } from "@oh-just-another/scene";
 import { WasmTextShaper } from "@oh-just-another/text-wasm";
@@ -33,7 +31,7 @@ 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, initialTool = "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;
+    const { initialScene, initialTool = "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, logo = _jsx(BrandLogo, {}), renderTopBarLeft, renderTopBarCenter, renderTopBarRight, renderBottomBarLeft, renderBottomBarCenter, renderBottomBarRight, renderMainMenuExtras, renderBoardMenuExtras, renderExportMenuExtras, onImportTemplates, theme: themeProp, defaultTheme = "system", onThemeChange, persistTheme, persistPreferences, 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.
@@ -173,6 +171,9 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
     // --- Editor wiring ---
     const [editor, setEditor] = useState(null);
     const handleReady = useCallback((e) => {
+        // Built-in diagram import (native JSON, Excalidraw, Mermaid, …) first,
+        // then the host's handlers.
+        e.registerFileDropHandler(diagramFileDropHandler);
         if (fileDropHandlers) {
             for (const handler of fileDropHandlers)
                 e.registerFileDropHandler(handler);
@@ -180,6 +181,30 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
         setEditor(e);
         onReady?.(e);
     }, [fileDropHandlers, onReady]);
+    // Minimap visibility: the `minimap` prop seeds it; the zoom menu's
+    // "Hide / Show minimap" row and the `M` key toggle it at runtime.
+    const [minimapVisible, setMinimapVisible] = useState(minimap === true);
+    useEffect(() => {
+        setMinimapVisible(minimap === true);
+    }, [minimap]);
+    const toggleMinimap = useCallback(() => {
+        setMinimapVisible((v) => !v);
+    }, []);
+    // Fullscreen target: the editor root (chrome + canvas), see the zoom menu.
+    const rootRef = useRef(null);
+    // Per-user preferences: load once the editor exists, then mirror changes.
+    const preferencesKey = useMemo(() => {
+        if (persistPreferences === true)
+            return DEFAULT_PREFERENCES_STORAGE_KEY;
+        if (typeof persistPreferences === "string")
+            return persistPreferences;
+        return null;
+    }, [persistPreferences]);
+    useEffect(() => {
+        if (!editor || !preferencesKey)
+            return undefined;
+        return bindPreferencesPersistence(editor, preferencesKey);
+    }, [editor, preferencesKey]);
     useEffect(() => {
         if (!editor)
             return undefined;
@@ -249,6 +274,11 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
                 ed.cancelFlowchart();
                 e.preventDefault();
             }
+            // `M` — toggle the minimap (zoom menu parity).
+            if (e.key.toLowerCase() === "m" && !e.metaKey && !e.ctrlKey && !e.altKey && !e.shiftKey) {
+                toggleMinimap();
+                e.preventDefault();
+            }
         };
         const onKeyUp = (e) => {
             sync(e);
@@ -275,7 +305,7 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
             ed.setSnapSuppressed(false);
             ed.setTransformModifiers({ alt: false, shift: false });
         };
-    }, [editor]);
+    }, [editor, toggleMinimap]);
     useImperativeHandle(ref, () => ({
         editor,
         capabilities: profile,
@@ -309,7 +339,7 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
     if (profile.renderer === "webgl2" && profile.wasmText && !wasmTextSettled && sceneHasText) {
         return _jsx("div", { className: className, style: style });
     }
-    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: {
+    return (_jsx(PortalContainerProvider, { container: portalContainer, children: _jsx(ToastHost, { children: _jsx(TooltipProvider, { children: _jsx("div", { ref: rootRef, className: className, "data-diagram-root": true, ...(theme === "system" ? {} : { "data-theme": theme }), style: {
                         position: "relative",
                         width: "100%",
                         height: "100%",
@@ -317,7 +347,7 @@ export const Diagram = forwardRef(function Diagram(props, ref) {
                         ...style,
                     }, children: _jsx(DiagramRoot, { initialScene: seed, initialTool: initialTool, 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 }) }) }) }) }) }) }));
+                            : {}), ...(wasmShaper ? { textShaper: wasmShaper } : {}), ...(wasmRaster ? { rasterizer: wasmRaster } : {}), children: _jsx(ZenModeProvider, { children: _jsx(EditorShell, { hideTopBar: hideTopBar, hideBottomBar: hideBottomBar, hideToolbar: hideToolbar, hideLibraryButton: hideLibraryButton, hideMainMenu: hideMainMenu, logo: logo, hideZoomControls: hideZoomControls, hideResetToContent: hideResetToContent, hideHelpButton: hideHelpButton, hideContextMenu: hideContextMenu, hideSelectionPanel: hideSelectionPanel, hideDrawingPanel: hideDrawingPanel, minimapVisible: minimapVisible, onToggleMinimap: toggleMinimap, rootRef: rootRef, renderTopBarLeft: renderTopBarLeft, renderTopBarCenter: renderTopBarCenter, renderTopBarRight: renderTopBarRight, renderBottomBarLeft: renderBottomBarLeft, renderBottomBarCenter: renderBottomBarCenter, renderBottomBarRight: renderBottomBarRight, renderMainMenuExtras: renderMainMenuExtras, renderBoardMenuExtras: renderBoardMenuExtras, renderExportMenuExtras: renderExportMenuExtras, 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`.
@@ -328,11 +358,12 @@ 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, hideDrawingPanel, minimap, renderTopBarLeft, renderTopBarCenter, renderTopBarRight, renderBottomBarLeft, renderBottomBarCenter, renderBottomBarRight, renderMainMenuExtras, onImportTemplates, repositoryUrl, onConfirm, onNotify, theme, changeTheme, }) => {
+const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton, hideMainMenu, logo, hideZoomControls, hideResetToContent, hideHelpButton, hideContextMenu, hideSelectionPanel, hideDrawingPanel, minimapVisible, onToggleMinimap, rootRef, renderTopBarLeft, renderTopBarCenter, renderTopBarRight, renderBottomBarLeft, renderBottomBarCenter, renderBottomBarRight, renderMainMenuExtras, renderBoardMenuExtras, renderExportMenuExtras, 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();
+    const fullscreen = useFullscreen(rootRef);
     // 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.
@@ -349,11 +380,20 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
         registerFileActions();
         setFileActionNotifier(notify);
     }, [notify]);
-    // Subscribe to scene changes so the Grid toggle in MainMenu reads
-    // the latest viewport.gridEnabled / gridStyle. `useScene` is a thin
-    // selector hook — re-renders only on scene identity flips.
-    void useScene();
-    const paletteDropHandlers = usePalettePlacement();
+    // Subscribe ONLY to the Grid / Snap toggle VALUES, not the scene
+    // identity: the scene reference flips on every frame of a drag, and a
+    // whole-shell re-render (menus, toolbars, HelpDialog) per frame makes
+    // moving elements visibly sluggish. The selectors return primitives,
+    // so `Object.is` skips re-renders until a toggle actually changes.
+    useEditorSelector((e) => gridSelection(e), "lines", "scene");
+    useEditorSelector((e) => snapSelection(e), "on");
+    // Preference switches in the View / Preferences submenus.
+    const showObjectSize = useEditorSelector((e) => e.preferences.showObjectSize, true);
+    const snapObjects = useEditorSelector((e) => e.preferences.snapObjects, true);
+    const suggestObjectSize = useEditorSelector((e) => e.preferences.suggestObjectSize, true);
+    const wheelMode = useEditorSelector((e) => e.preferences.wheelMode, "auto");
+    const [fileDragging, setFileDragging] = useState(false);
+    const paletteDropHandlers = usePalettePlacement({ onFileDrag: setFileDragging });
     // Touch / narrow screens: the library opens as a bottom sheet instead of
     // a left overlay (which would cover the whole small canvas).
     const mobile = useMobileLayout();
@@ -361,6 +401,13 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
     // toggle and closed via its ✕. Starts closed; no dock / pin.
     const [libraryOpen, setLibraryOpen] = useState(false);
     const [helpOpen, setHelpOpen] = useState(false);
+    // Export content switches (sticky reactions / tags / author) — session
+    // state seeded by EXPORT_CONTENT_DEFAULTS inside the export helpers;
+    // the Export… submenu checkboxes flip them per run.
+    const [exportContent, setExportContent] = useState({});
+    const toggleExportContent = (key) => {
+        setExportContent((cur) => ({ ...cur, [key]: !(cur?.[key] ?? true) }));
+    };
     useHelpDialogHotkey(() => {
         setHelpOpen((v) => !v);
     });
@@ -369,51 +416,37 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
     // The library overlays the canvas (no reflow); the toolbar floats just
     // to its right when open, else near the edge. On mobile the library is a
     // bottom sheet, so the toolbar never shifts.
-    const LIBRARY_PANEL_WIDTH = 240;
-    const BAR_INSET = 12;
-    const toolbarLeft = !mobile && libraryOpen ? LIBRARY_PANEL_WIDTH + BAR_INSET : BAR_INSET;
+    // Dock inset from the edge, or past the open library (its inset + width)
+    // with a flyout gap — all CSS tokens so hosts retune them in one place.
+    const toolbarLeft = !mobile && libraryOpen
+        ? "var(--du-bar-inset) + var(--du-side-panel-w) + var(--du-flyout-gap)"
+        : "var(--du-dock-inset)";
     // Items for the vertical creation dock: an optional templates-library
     // toggle on top (hidden with `hideLibraryButton`), then the standard
     // creation tools.
-    const toolbarItems = useMemo(() => hideLibraryButton
-        ? [...DEFAULT_VERTICAL_TOOLBAR]
-        : [
-            {
-                kind: "action",
-                id: "toggle-library",
-                label: _jsx(LibraryIcon, { ...buttonIcon }),
-                title: "Templates library",
-                active: libraryOpen,
-                onClick: () => {
-                    setLibraryOpen((v) => !v);
-                },
+    // The template library's only toolbar entry point is the "More shapes"
+    // row inside the Shapes and lines flyout (`hideLibraryButton` removes
+    // it). No standalone library toggle in the dock.
+    const toolbarItems = useMemo(() => DEFAULT_VERTICAL_TOOLBAR.map((item) => item.kind === "shapes-flyout" && !hideLibraryButton
+        ? {
+            ...item,
+            onMoreShapes: () => {
+                setLibraryOpen(true);
             },
-            { kind: "divider" },
-            ...DEFAULT_VERTICAL_TOOLBAR,
-        ], [hideLibraryButton, libraryOpen]);
-    return (_jsxs("div", { style: { position: "absolute", inset: 0 }, onDragEnter: paletteDropHandlers.onDragEnter, onDragOver: paletteDropHandlers.onDragOver, onDragLeave: paletteDropHandlers.onDragLeave, onDrop: paletteDropHandlers.onDrop, children: [_jsxs("div", { style: {
+        }
+        : item), [hideLibraryButton]);
+    return (_jsxs("div", { style: { position: "absolute", inset: 0 }, onDragEnter: paletteDropHandlers.onDragEnter, onDragOver: paletteDropHandlers.onDragOver, onDragLeave: paletteDropHandlers.onDragLeave, onDrop: paletteDropHandlers.onDrop, children: [_jsx(FileDropOverlay, { active: fileDragging }), _jsxs("div", { style: {
                     position: "absolute",
                     top: 0,
                     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 && !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).
-                    // `env(safe-area-inset-left)` is 0 on desktop, clears the notch
-                    // in mobile landscape.
-                    top: "50%",
-                    left: `calc(env(safe-area-inset-left, 0px) + ${toolbarLeft}px)`,
-                    transform: "translateY(-50%)",
-                    zIndex: 60,
-                } })) : 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: () => {
+                }, children: [_jsx(DiagramSurface, { style: { position: "absolute", inset: 0 } }), _jsx(TextEditorOverlay, {}), _jsx(FrameNameEditorOverlay, {}), _jsx(LinkHoverPopup, {}), _jsx(LinkBadges, {}), _jsx(StickyReactions, {}), _jsx(LinkDropShapeMenu, {}), _jsx(LinkCaptionEditor, {}), !hideContextMenu && _jsx(ContextMenu, { items: DEFAULT_CONTEXT_MENU })] }), !hideToolbar && !zen ? (_jsx("div", { className: "du-dock", style: {
+                    // Floats just to the right of the library when it's open (else
+                    // near the edge). `env(safe-area-inset-left)` is 0 on desktop,
+                    // clears the notch in mobile landscape.
+                    left: `calc(env(safe-area-inset-left, 0px) + ${toolbarLeft})`,
+                }, children: _jsx(Toolbar, { orientation: "vertical", items: toolbarItems }) })) : null, _jsxs(UILayer, { children: [!hideTopBar && !zen && (_jsx(TopBar, { left: _jsxs(ButtonGroup, { ariaLabel: "Logo and main menu", children: [logo !== null && _jsx("span", { className: "du-icon-button du-brand", children: logo }), !hideMainMenu && (_jsxs(MainMenu, { children: [_jsxs(MainMenu.Submenu, { icon: _jsx(LayoutDashboard, { ...menuIcon }), label: "Board", children: [_jsx(MainMenu.Item, { icon: _jsx(FileUp, { ...menuIcon }), onClick: () => {
                                                         if (editor)
                                                             openSceneFile(editor);
                                                     }, shortcut: formatHotkey({ key: "O", meta: true }), children: "Open\u2026" }), _jsx(MainMenu.Item, { icon: _jsx(FileDown, { ...menuIcon }), onClick: () => {
@@ -422,10 +455,16 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
                                                     }, 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: () => {
+                                                    }, disabled: !editor, shortcut: formatHotkey({ key: "C", shift: true, alt: true }), children: "Copy as image" }), _jsxs(MainMenu.Submenu, { icon: _jsx(Download, { ...menuIcon }), label: "Export", disabled: !editor, children: [_jsx(MainMenu.Item, { icon: _jsx(ImageDown, { ...menuIcon }), onClick: () => editor && void downloadPng(editor, "transparent", exportContent), disabled: !editor, children: "PNG (transparent)" }), _jsx(MainMenu.Item, { icon: _jsx(ImageDown, { ...menuIcon }), onClick: () => editor && void downloadPng(editor, "color", exportContent), 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", exportContent), 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: () => {
+                                                                    downloadSvg(editor.scene, exportContent);
+                                                            }, disabled: !editor, children: "SVG" }), renderExportMenuExtras?.(), _jsx(MainMenu.Separator, {}), _jsxs(MainMenu.Group, { title: "Include in export", children: [_jsx(MainMenu.Item, { keepOpen: true, onClick: () => {
+                                                                        toggleExportContent("stickyReactions");
+                                                                    }, checked: exportContent?.stickyReactions !== false, children: "Sticky reactions" }), _jsx(MainMenu.Item, { keepOpen: true, onClick: () => {
+                                                                        toggleExportContent("stickyTags");
+                                                                    }, checked: exportContent?.stickyTags !== false, children: "Sticky tags" }), _jsx(MainMenu.Item, { keepOpen: true, onClick: () => {
+                                                                        toggleExportContent("stickyAuthor");
+                                                                    }, checked: exportContent?.stickyAuthor !== false, children: "Sticky author" })] })] }), renderBoardMenuExtras?.(), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Item, { icon: _jsx(MapIcon, { ...menuIcon }), onClick: () => editor?.goToStartView(), disabled: (editor?.startView ?? null) === null, children: "Start view" }), _jsx(MainMenu.Item, { icon: _jsx(MapIcon, { ...menuIcon }), onClick: () => editor?.setCurrentViewAsStart(), disabled: !editor, children: "Set current view as start" }), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Item, { icon: _jsx(RotateCcw, { ...menuIcon }), onClick: () => {
                                                         if (!editor)
                                                             return;
                                                         if (confirmDialog("Reset canvas? This clears all shapes.")) {
@@ -436,48 +475,29 @@ const EditorShell = ({ hideTopBar, hideBottomBar, hideToolbar, hideLibraryButton
                                                             // 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: [
-                                                    { value: "light", label: "Light", icon: _jsx(Sun, { ...toggleIcon }) },
-                                                    { value: "dark", label: "Dark", icon: _jsx(Moon, { ...toggleIcon }) },
-                                                    { value: "system", label: "System", icon: _jsx(Monitor, { ...toggleIcon }) },
-                                                ] }) }), _jsx(MainMenu.Group, { title: "Grid", children: _jsx(MainMenu.Toggle, { value: gridSelection(editor), onChange: (next) => {
-                                                    applyGridSelection(editor, next);
-                                                }, options: [
-                                                    { value: "lines", label: "Lines", icon: _jsx(Grid3x3, { ...toggleIcon }) },
-                                                    { value: "dots", label: "Dots", icon: _jsx(Grip, { ...toggleIcon }) },
-                                                    { value: "off", label: "Off", icon: _jsx(Minus, { ...toggleIcon }) },
-                                                ] }) }), _jsx(MainMenu.Group, { title: "Snap to grid", children: _jsx(MainMenu.Toggle, { value: snapSelection(editor), onChange: (next) => {
-                                                    editor?.setSnapToGrid(next === "on");
-                                                }, options: [
-                                                    { value: "on", label: "On", icon: _jsx(Magnet, { ...toggleIcon }) },
-                                                    { 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 && !zen && (_jsx(BottomBar, { left: renderBottomBarLeft ? renderBottomBarLeft() : null, center: renderBottomBarCenter ? (renderBottomBarCenter()) : !hideResetToContent ? (_jsx(ResetToContentButton, {})) : null, right: renderBottomBarRight ? (renderBottomBarRight()) : !hideZoomControls ? (
+                                                    }, disabled: !editor, children: "Reset canvas" })] }), _jsxs(MainMenu.Submenu, { icon: _jsx(Pencil, { ...menuIcon }), label: "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.Separator, {}), _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.Separator, {}), _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, {}), _jsx(MainMenu.Item, { icon: _jsx(Command, { ...menuIcon }), shortcut: "\u2318K", onClick: () => {
+                                                        if (editor) {
+                                                            defaultActionRegistry.dispatch("open-command-palette", { editor });
+                                                        }
+                                                    }, disabled: !editor, children: "Commands" }), _jsx(MainMenu.Item, { icon: _jsx(Search, { ...menuIcon }), shortcut: "\u2318F", onClick: () => {
+                                                        if (editor)
+                                                            defaultActionRegistry.dispatch("open-search", { editor });
+                                                    }, disabled: !editor, children: "Find" })] }), _jsxs(MainMenu.Submenu, { icon: _jsx(Eye, { ...menuIcon }), label: "View", children: [_jsxs(MainMenu.Submenu, { icon: _jsx(Grid3x3, { ...menuIcon }), label: "Grid", children: [GRID_OPTIONS.map((opt) => (_jsx(MainMenu.Item, { icon: opt.icon, active: gridSelection(editor) === opt.value, onClick: () => {
+                                                                applyGridSelection(editor, opt.value);
+                                                            }, children: opt.label }, opt.value))), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Item, { icon: _jsx(Magnet, { ...menuIcon }), keepOpen: true, onClick: () => editor?.setSnapToGrid(!editor.snapToGridEnabled), checked: snapSelection(editor) === "on", children: "Snap to grid" })] }), _jsx(MainMenu.Item, { icon: _jsx(Ruler, { ...menuIcon }), keepOpen: true, onClick: () => editor?.setPreferences({ showObjectSize: !showObjectSize }), checked: showObjectSize, children: "Object dimensions" }), _jsx(MainMenu.Item, { icon: _jsx(MapIcon, { ...menuIcon }), keepOpen: true, onClick: onToggleMinimap, checked: minimapVisible, children: "Minimap" }), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Submenu, { icon: _jsx(Sun, { ...menuIcon }), label: "Theme", children: THEME_OPTIONS.map((opt) => (_jsx(MainMenu.Item, { icon: opt.icon, active: theme === opt.value, onClick: () => {
+                                                            changeTheme(opt.value);
+                                                        }, children: opt.label }, opt.value))) }), fullscreen.supported ? (_jsxs(_Fragment, { children: [_jsx(MainMenu.Separator, {}), _jsx(MainMenu.Item, { icon: fullscreen.active ? (_jsx(Shrink, { ...menuIcon })) : (_jsx(Expand, { ...menuIcon })), onClick: fullscreen.toggle, children: fullscreen.active ? "Exit full screen" : "Enter full screen" })] })) : null] }), _jsxs(MainMenu.Submenu, { icon: _jsx(SlidersHorizontal, { ...menuIcon }), label: "Preferences", children: [_jsx(MainMenu.Submenu, { icon: _jsx(Mouse, { ...menuIcon }), label: "Mouse or trackpad", children: WHEEL_MODE_OPTIONS.map((opt) => (_jsx(MainMenu.Item, { active: wheelMode === opt.value, onClick: () => editor?.setPreferences({ wheelMode: opt.value }), children: opt.label }, opt.value))) }), _jsx(MainMenu.Item, { icon: _jsx(Magnet, { ...menuIcon }), keepOpen: true, onClick: () => editor?.setPreferences({ snapObjects: !snapObjects }), checked: snapObjects, children: "Snap objects" }), _jsx(MainMenu.Item, { icon: _jsx(Ruler, { ...menuIcon }), keepOpen: true, onClick: () => editor?.setPreferences({ suggestObjectSize: !suggestObjectSize }), checked: suggestObjectSize, children: "Suggest object size" })] }), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Item, { icon: _jsx(Keyboard, { ...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 && !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 })), zen ? null : mobile ? (libraryOpen ? (_jsx(BottomSheet, { snapPoints: [0, 60, 92], defaultValue: 60, style: { pointerEvents: "auto" }, onChange: (vh) => {
+                        _jsx(ZoomControls, { trailing: !hideHelpButton ? _jsx(HelpButton, {}) : undefined, fullscreen: fullscreen, minimapVisible: minimapVisible, onToggleMinimap: onToggleMinimap })) : !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: () => {
+                            }, ...(onImportTemplates ? { onImport: onImportTemplates } : {}) }) })) : null) : (_jsx(LibraryPanel, { open: libraryOpen, side: "left", onClose: () => {
                             setLibraryOpen(false);
-                        }, ...(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: () => {
+                        }, ...(onImportTemplates ? { onImport: onImportTemplates } : {}) }))] }), minimapVisible && !zen && (_jsx("div", { className: "du-minimap-dock", children: _jsx(Minimap, {}) })), !hideDrawingPanel && !zen && (_jsx("div", { className: "du-tool-options-dock", children: _jsx(DrawingPanel, {}) })), !hideSelectionPanel && !zen && _jsx(SelectionFloatingPanel, {}), _jsx(HelpDialog, { open: helpOpen, onClose: () => {
                     setHelpOpen(false);
                 } }), _jsx(CommandPalette, {}), _jsx(SearchOverlay, {}), _jsx(StatsPanel, {}), void editor] }));
 };
@@ -500,34 +520,51 @@ const ZOOM_FIT_HOTKEY = formatHotkey({ alt: true, key: "1" });
  * `trailing` lets the host append extra controls inside the same pill
  * group (e.g. the Help button, so it sits right next to zoom).
  */
-const ZoomControls = ({ trailing }) => {
+/** Zoom presets of the zoom menu (fractions of 100 %). */
+const ZOOM_PRESETS = [0.5, 0.7, 1, 4, 12, 20];
+const ZoomControls = ({ trailing, fullscreen, minimapVisible, onToggleMinimap, }) => {
     const editor = useDiagramOptional();
-    // Force re-render on viewport change.
-    const [, force] = useState(0);
-    useEffect(() => {
-        if (!editor)
-            return undefined;
-        return editor.subscribe(() => {
-            force((n) => n + 1);
-        });
-    }, [editor]);
+    // Subscribe to the zoom VALUE only — a whole-editor subscription would
+    // re-render these buttons on every frame of an element drag.
+    const zoom = useEditorSelector((e) => e.scene.viewport.zoom, 1);
+    const showObjectSize = useEditorSelector((e) => e.preferences.showObjectSize, true);
     if (!editor)
         return null;
-    const zoom = editor.scene.viewport.zoom;
+    const setShowObjectSize = (next) => {
+        editor.setPreferences({ showObjectSize: next });
+    };
     return (_jsxs(ButtonGroup, { ariaLabel: "Zoom", children: [_jsx(IconButton, { label: `Zoom out (${ZOOM_OUT_HOTKEY})`, onClick: () => {
                     editor.zoomOut();
-                }, children: _jsx(Minus, { ...buttonIcon }) }), _jsx(Tooltip, { content: `Reset zoom to 100% (${ZOOM_RESET_HOTKEY})`, children: _jsxs("button", { type: "button", className: "du-icon-button", "aria-label": "Reset zoom to 100%", onClick: () => {
-                        editor.resetZoom();
-                    }, style: {
-                        minWidth: 56,
-                        padding: "0 8px",
-                        borderRadius: 0,
-                    }, children: [Math.round(zoom * 100), "%"] }) }), _jsx(IconButton, { label: `Zoom in (${ZOOM_IN_HOTKEY})`, onClick: () => {
+                }, children: _jsx(Minus, { ...buttonIcon }) }), _jsxs(MainMenu, { ariaLabel: "Zoom menu", placement: "top-end", triggerClassName: "du-icon-button du-icon-button-flat du-zoom-trigger", trigger: _jsxs(_Fragment, { children: [Math.round(zoom * 100), "%"] }), children: [fullscreen.supported ? (_jsx(MainMenu.Item, { icon: fullscreen.active ? _jsx(Shrink, { ...menuIcon }) : _jsx(Expand, { ...menuIcon }), onClick: fullscreen.toggle, children: fullscreen.active ? "Exit full screen" : "Enter full screen" })) : null, _jsx(MainMenu.Item, { icon: _jsx(MapIcon, { ...menuIcon }), shortcut: "M", onClick: onToggleMinimap, children: minimapVisible ? "Hide minimap" : "Show minimap" }), _jsx(MainMenu.Submenu, { icon: _jsx(Grid3x3, { ...menuIcon }), label: "Grid", children: GRID_OPTIONS.map((opt) => (_jsx(MainMenu.Item, { icon: opt.icon, active: gridSelection(editor) === opt.value, onClick: () => {
+                                applyGridSelection(editor, opt.value);
+                            }, children: opt.label }, opt.value))) }), _jsx(MainMenu.Item, { icon: _jsx(Ruler, { ...menuIcon }), keepOpen: true, onClick: () => {
+                            setShowObjectSize(!showObjectSize);
+                        }, checked: showObjectSize, children: "Object dimensions" }), _jsx(MainMenu.Separator, {}), _jsx(MainMenu.Item, { icon: _jsx(Maximize, { ...menuIcon }), shortcut: ZOOM_FIT_HOTKEY, onClick: () => {
+                            editor.zoomToFit();
+                        }, children: "Fit to screen" }), ZOOM_PRESETS.map((level) => (_jsx(MainMenu.Item, { icon: _jsx(ZoomIn, { ...menuIcon }), ...(level === 1 ? { shortcut: ZOOM_RESET_HOTKEY } : {}), onClick: () => {
+                            editor.setZoom(level);
+                        }, children: `${String(Math.round(level * 100))}%` }, level)))] }), _jsx(IconButton, { label: `Zoom in (${ZOOM_IN_HOTKEY})`, onClick: () => {
                     editor.zoomIn();
                 }, children: _jsx(Plus, { ...buttonIcon }) }), _jsx(IconButton, { label: `Fit to screen (${ZOOM_FIT_HOTKEY})`, onClick: () => {
                     editor.zoomToFit();
                 }, children: _jsx(Maximize, { ...buttonIcon }) }), trailing] }));
 };
+/** Grid submenu rows (reference labels), mapped onto the grid toggle values. */
+const GRID_OPTIONS = [
+    { value: "off", label: "None", icon: _jsx(Ban, { ...menuIcon }) },
+    { value: "lines", label: "Line grid", icon: _jsx(Grid3x3, { ...menuIcon }) },
+    { value: "dots", label: "Dot grid", icon: _jsx(Grip, { ...menuIcon }) },
+];
+const THEME_OPTIONS = [
+    { value: "light", label: "Light", icon: _jsx(Sun, { ...menuIcon }) },
+    { value: "dark", label: "Dark", icon: _jsx(Moon, { ...menuIcon }) },
+    { value: "system", label: "System", icon: _jsx(Monitor, { ...menuIcon }) },
+];
+const WHEEL_MODE_OPTIONS = [
+    { value: "auto", label: "Auto-detect" },
+    { value: "mouse", label: "Mouse" },
+    { value: "trackpad", label: "Trackpad" },
+];
 // --- Grid toggle helpers ----------------------------------------------------
 /** Translate the `grid` / `snap` props into a partial settings override. */
 const buildHostSettings = (gridEnabled, gridStyle, snap) => ({