@oh-just-another/react-ui 0.57.0

package/dist/frame-name-editor-overlay.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useReducer, useRef } from "react";
+import { getElement, isFrame, FRAME_HEADER_HEIGHT, FRAME_HEADER_PADDING_X, FRAME_HEADER_FONT_SIZE, } from "@oh-just-another/scene";
+import { useDiagramOptional } from "./hooks.js";
+/**
+ * Inline editor for a frame's header name. Unlike the in-canvas text
+ * editor (invisible sink + canvas-drawn caret), the frame label has no
+ * canvas caret, so this is a VISIBLE `<input>` positioned over the header
+ * strip and styled to match it (dark bar, light text). Opens via
+ * `editor.beginFrameNameEdit(id)` (double-click the header / frame body);
+ * commits on Enter or blur, cancels on Escape.
+ *
+ * Wiring: drop as a sibling of `<DiagramSurface>` inside `<DiagramRoot>`,
+ * next to `<TextEditorOverlay>`.
+ */
+export const FrameNameEditorOverlay = () => {
+    const editor = useDiagramOptional();
+    const ref = useRef(null);
+    const [, force] = useReducer((x) => x + 1, 0);
+    // Follow scene / viewport changes (pan / zoom) while editing.
+    useEffect(() => {
+        if (!editor)
+            return undefined;
+        return editor.on("change", force);
+    }, [editor]);
+    const editingId = editor?.editingFrameName ?? null;
+    // Focus + select-all when an edit starts.
+    useEffect(() => {
+        if (!editingId)
+            return;
+        const el = ref.current;
+        if (el) {
+            el.focus();
+            el.select();
+        }
+    }, [editingId]);
+    if (!editor || !editingId)
+        return null;
+    const frame = getElement(editor.scene, editingId);
+    if (!frame || !isFrame(frame))
+        return null;
+    const vp = editor.scene.viewport;
+    const z = vp.zoom;
+    const left = (frame.position.x - vp.pan.x) * z;
+    const top = (frame.position.y - FRAME_HEADER_HEIGHT * frame.scale.y - vp.pan.y) * z;
+    // Editor input spans the frame's full width so a long name stays visible
+    // while typing (the rendered label hugs/ellipsises, but editing wants room).
+    const width = frame.width * frame.scale.x * z;
+    const height = FRAME_HEADER_HEIGHT * frame.scale.y * z;
+    return (_jsx("input", { ref: ref, type: "text", defaultValue: frame.name ?? "", placeholder: "Frame", "aria-label": "Frame name", spellCheck: false, autoCapitalize: "off", autoCorrect: "off", onKeyDown: (ev) => {
+            if (ev.key === "Enter") {
+                ev.preventDefault();
+                ev.stopPropagation();
+                editor.commitFrameNameEdit(ev.currentTarget.value);
+            }
+            else if (ev.key === "Escape") {
+                ev.preventDefault();
+                ev.stopPropagation();
+                editor.cancelFrameNameEdit();
+            }
+            else {
+                // Keep typing keys from reaching canvas hotkeys.
+                ev.stopPropagation();
+            }
+        }, onBlur: (ev) => { editor.commitFrameNameEdit(ev.currentTarget.value); }, style: {
+            position: "absolute",
+            left,
+            top,
+            width,
+            height,
+            boxSizing: "border-box",
+            padding: `0 ${FRAME_HEADER_PADDING_X * z}px`,
+            margin: 0,
+            border: 0,
+            outline: "none",
+            background: "#222",
+            color: "#ddd",
+            font: `${FRAME_HEADER_FONT_SIZE * z}px system-ui, sans-serif`,
+            lineHeight: `${height}px`,
+            pointerEvents: "auto",
+            zIndex: 100,
+        } }, editingId));
+};
+//# sourceMappingURL=frame-name-editor-overlay.js.map

package/dist/frame-name-editor-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-name-editor-overlay.js","sourceRoot":"","sources":["../src/frame-name-editor-overlay.tsx"],"names":[],"mappings":"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"}

package/dist/frame-panel.d.ts

@@ -0,0 +1,19 @@
+import { type CSSProperties } from "react";
+import type { ElementId } from "@oh-just-another/types";
+import { type FrameElement } from "@oh-just-another/scene";
+/**
+ * Sidebar panel listing every `FrameElement` in the scene. Each row
+ * shows the frame's name and size and exposes two actions:
+ *
+ *   • Select — sets the editor's selection to the frame.
+ *   • Export — fires `onExport(frameId)`; the host decides what to do.
+ *
+ * Renders nothing when there are no frames.
+ */
+export interface FramePanelProps {
+    /** Host-side export callback. Invoked per-frame on the action click. */
+    readonly onExport?: (frameId: ElementId, frame: FrameElement) => void;
+    readonly style?: CSSProperties;
+}
+export declare const FramePanel: ({ onExport, style }: FramePanelProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=frame-panel.d.ts.map

package/dist/frame-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-panel.d.ts","sourceRoot":"","sources":["../src/frame-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAG3D;;;;;;;;GAQG;AACH,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IACtE,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,eAAO,MAAM,UAAU,GAAI,qBAAqB,eAAe,mDA0G9D,CAAC"}

package/dist/frame-panel.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import {} from "@oh-just-another/scene";
+import { useDiagramOptional, useScene } from "./hooks.js";
+export const FramePanel = ({ onExport, style }) => {
+    const editor = useDiagramOptional();
+    const scene = useScene();
+    const frames = useMemo(() => {
+        const out = [];
+        for (const s of scene.elements.values()) {
+            if (s.type === "frame")
+                out.push(s);
+        }
+        out.sort((a, b) => (a.order < b.order ? -1 : a.order > b.order ? 1 : 0));
+        return out;
+    }, [scene]);
+    if (frames.length === 0)
+        return null;
+    return (_jsxs("aside", { "data-panel": "frames", style: {
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0,
+            fontSize: 12,
+            ...style,
+        }, children: [_jsxs("h2", { style: {
+                    margin: 0,
+                    padding: "10px 12px",
+                    fontSize: 11,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    color: "var(--muted)",
+                    borderBottom: "1px solid var(--border)",
+                    display: "flex",
+                    justifyContent: "space-between",
+                }, children: ["Frames", _jsx("span", { style: { textTransform: "none", color: "var(--faint)" }, children: frames.length })] }), _jsx("ul", { style: {
+                    listStyle: "none",
+                    margin: 0,
+                    padding: 0,
+                    flex: "1 1 auto",
+                    overflowY: "auto",
+                }, children: frames.map((frame) => (_jsx("li", { children: _jsxs("div", { style: {
+                            display: "flex",
+                            alignItems: "center",
+                            gap: 8,
+                            padding: "6px 12px",
+                            borderBottom: "1px solid var(--divider, transparent)",
+                        }, children: [_jsxs("button", { type: "button", onClick: () => editor?.setSelection([frame.id]), style: {
+                                    flex: "1 1 auto",
+                                    textAlign: "left",
+                                    background: "transparent",
+                                    color: "var(--text)",
+                                    border: 0,
+                                    padding: 0,
+                                    cursor: "pointer",
+                                    font: "inherit",
+                                }, title: "Select this frame on canvas", children: [_jsx("div", { style: { fontWeight: 500 }, children: frame.name ?? "Untitled frame" }), _jsxs("div", { style: { color: "var(--faint)", fontSize: 10 }, children: [Math.round(frame.width), " \u00D7 ", Math.round(frame.height)] })] }), onExport ? (_jsx("button", { type: "button", onClick: () => { onExport(frame.id, frame); }, style: {
+                                    fontSize: 10,
+                                    padding: "2px 8px",
+                                    border: "1px solid var(--border, #2a2a2a)",
+                                    borderRadius: 3,
+                                    background: "var(--button-bg, #2a2a2a)",
+                                    color: "var(--text, #ddd)",
+                                    cursor: "pointer",
+                                }, title: "Export only this frame's content", children: "Export" })) : null] }) }, frame.id))) })] }));
+};
+//# sourceMappingURL=frame-panel.js.map

package/dist/frame-panel.js.map

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

package/dist/help-button.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Help icon button. Opens the bundled `<HelpDialog>` modal and manages
+ * its open state internally.
+ *
+ * Hosts that want a custom modal pass `renderDialog` — it receives
+ * `{open, onClose}` and renders whatever they like instead of the
+ * bundled `HelpDialog`.
+ */
+export interface HelpButtonProps {
+    readonly renderDialog?: (api: {
+        open: boolean;
+        onClose: () => void;
+    }) => React.ReactNode;
+}
+export declare const HelpButton: ({ renderDialog }: HelpButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=help-button.d.ts.map

package/dist/help-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"help-button.d.ts","sourceRoot":"","sources":["../src/help-button.tsx"],"names":[],"mappings":"AAQA;;;;;;;GAOG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,OAAO,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;CAC1F;AAED,eAAO,MAAM,UAAU,GAAI,kBAAkB,eAAe,4CAY3D,CAAC"}

package/dist/help-button.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { HelpCircle } from "lucide-react";
+import { HelpDialog } from "./help-dialog.js";
+import { IconButton } from "./icon-button.js";
+const HELP_ICON_SIZE = 16;
+const HELP_ICON_STROKE = 1.75;
+export const HelpButton = ({ renderDialog }) => {
+    const [open, setOpen] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { label: "Help", onClick: () => { setOpen(true); }, children: _jsx(HelpCircle, { size: HELP_ICON_SIZE, strokeWidth: HELP_ICON_STROKE }) }), renderDialog
+                ? renderDialog({ open, onClose: () => { setOpen(false); } })
+                : _jsx(HelpDialog, { open: open, onClose: () => { setOpen(false); } })] }));
+};
+//# sourceMappingURL=help-button.js.map

package/dist/help-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"help-button.js","sourceRoot":"","sources":["../src/help-button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,MAAM,cAAc,GAAG,EAAE,CAAC;AAC1B,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAc9B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,YAAY,EAAmB,EAAE,EAAE;IAC9D,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,OAAO,CACL,8BACE,KAAC,UAAU,IAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,YACxD,KAAC,UAAU,IAAC,IAAI,EAAE,cAAc,EAAE,WAAW,EAAE,gBAAgB,GAAI,GACxD,EACZ,YAAY;gBACX,CAAC,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;gBAC5D,CAAC,CAAC,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,GAAI,IACjE,CACJ,CAAC;AACJ,CAAC,CAAC"}

package/dist/help-dialog.d.ts

@@ -0,0 +1,56 @@
+import { type ReactElement } from "react";
+import { type ActionRegistry } from "@oh-just-another/state";
+/**
+ * Help dialog — a cheatsheet of every Action's hotkey. Opens on "?" by
+ * default; hosts can also drive `open` via state.
+ *
+ * Shortcuts are grouped into bordered "islands"; every key is rendered
+ * as its own pill `<kbd>` chip. Multiple alternative shortcuts on one
+ * row are joined with "or".
+ *
+ * Platform-aware key labels come from `formatHotkeyParts`: macOS gets
+ * glyphs (⌘ ⌥ ⇧ ⌃ ⏎ ⌫), other platforms get spelled-out names (Ctrl,
+ * Alt, Shift, Enter, Delete). The platform badge in the header shows
+ * which set is in use.
+ */
+export interface HelpDialogProps {
+    /** Override the registry — defaults to the package's shared default. */
+    readonly registry?: ActionRegistry;
+    /**
+     * Open / close control. Hosts that wire their own bindings pass these;
+     * the bundled `?` listener flips them via `useHelpDialogHotkey`.
+     */
+    readonly open: boolean;
+    readonly onClose: () => void;
+    readonly title?: string;
+    readonly extraSections?: readonly HelpSection[];
+}
+export interface HelpSection {
+    readonly title: string;
+    readonly rows: readonly HelpRow[];
+}
+/**
+ * Row payload. `keys` is an array of alternative shortcut combinations;
+ * each combination is a list of platform-formatted key labels (e.g.
+ * `[["⌘", "Z"], ["⌃", "Z"]]`). Empty `keys` renders an "—" placeholder.
+ */
+export interface HelpRow {
+    readonly label: string;
+    readonly keys: readonly (readonly string[])[];
+}
+/**
+ * Hook that flips `open` when the user presses `?`. Wire in app shell:
+ *
+ * ```tsx
+ * const [help, setHelp] = useState(false);
+ * useHelpDialogHotkey(() => setHelp(true));
+ * <HelpDialog open={help} onClose={() => setHelp(false)} />
+ * ```
+ *
+ * "?" is Shift+/ on the typical keyboard — the listener checks for both
+ * `event.key === "?"` and `Shift + /`. Inputs and textareas are exempt
+ * so the user can still type a literal "?" into a text field.
+ */
+export declare const useHelpDialogHotkey: (open: () => void) => void;
+export declare const HelpDialog: ({ registry, open, onClose, title, extraSections, }: HelpDialogProps) => ReactElement | null;
+//# sourceMappingURL=help-dialog.d.ts.map

package/dist/help-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"help-dialog.d.ts","sourceRoot":"","sources":["../src/help-dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoD,KAAK,YAAY,EAAE,MAAM,OAAO,CAAC;AAE5F,OAAO,EAML,KAAK,cAAc,EAEpB,MAAM,wBAAwB,CAAC;AAIhC;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,QAAQ,CAAC,QAAQ,CAAC,EAAE,cAAc,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,aAAa,CAAC,EAAE,SAAS,WAAW,EAAE,CAAC;CACjD;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,SAAS,OAAO,EAAE,CAAC;CACnC;AAED;;;;GAIG;AACH,MAAM,WAAW,OAAO;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,MAAM,EAAE,CAAC,EAAE,CAAC;CAC/C;AA4BD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mBAAmB,GAAI,MAAM,MAAM,IAAI,KAAG,IAatD,CAAC;AAuBF,eAAO,MAAM,UAAU,GAAI,oDAMxB,eAAe,KAAG,YAAY,GAAG,IAuFnC,CAAC"}

package/dist/help-dialog.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useEffect, useMemo } from "react";
+import { X } from "lucide-react";
+import { defaultActionRegistry, formatHotkeyParts, isMac, } from "@oh-just-another/state";
+import { HELP_DIALOG_MAX_WIDTH_PX } from "./constants.js";
+import { Modal } from "./modal.js";
+const CATEGORY_TITLES = {
+    history: "History",
+    selection: "Selection",
+    clipboard: "Clipboard",
+    "z-order": "Z-order",
+    grouping: "Grouping",
+    zoom: "Zoom",
+    mode: "Tools",
+    layout: "Layout",
+    edit: "Editing",
+    other: "Other",
+};
+const CATEGORY_ORDER = [
+    "mode",
+    "edit",
+    "selection",
+    "clipboard",
+    "history",
+    "z-order",
+    "grouping",
+    "layout",
+    "zoom",
+    "other",
+];
+/**
+ * Hook that flips `open` when the user presses `?`. Wire in app shell:
+ *
+ * ```tsx
+ * const [help, setHelp] = useState(false);
+ * useHelpDialogHotkey(() => setHelp(true));
+ * <HelpDialog open={help} onClose={() => setHelp(false)} />
+ * ```
+ *
+ * "?" is Shift+/ on the typical keyboard — the listener checks for both
+ * `event.key === "?"` and `Shift + /`. Inputs and textareas are exempt
+ * so the user can still type a literal "?" into a text field.
+ */
+export const useHelpDialogHotkey = (open) => {
+    useEffect(() => {
+        const onKey = (ev) => {
+            const t = ev.target;
+            if (t instanceof HTMLInputElement || t instanceof HTMLTextAreaElement)
+                return;
+            const isQuestion = ev.key === "?" || (ev.shiftKey && ev.key === "/");
+            if (!isQuestion)
+                return;
+            ev.preventDefault();
+            open();
+        };
+        window.addEventListener("keydown", onKey);
+        return () => { window.removeEventListener("keydown", onKey); };
+    }, [open]);
+};
+/**
+ * Resolve the action's hotkey(s) into the per-chip parts the dialog
+ * renders. Single-hotkey actions return one combination; actions with
+ * an array hotkey return one combination per entry. Toolbar-only
+ * actions (no hotkey) return an empty array.
+ */
+const actionKeys = (action) => {
+    const combos = [];
+    if (action.hotkey) {
+        const raw = Array.isArray(action.hotkey) ? action.hotkey : [action.hotkey];
+        for (const h of raw)
+            combos.push(formatHotkeyParts(h));
+    }
+    // Multi-key sequences (e.g. `d d`) render as a single chip with the keys
+    // space-separated, distinct from a `+` chord.
+    if (action.sequence && action.sequence.length > 0) {
+        const seq = action.sequence.map((k) => (k.length === 1 ? k.toUpperCase() : k)).join(" ");
+        combos.push([seq]);
+    }
+    return combos;
+};
+export const HelpDialog = ({ registry = defaultActionRegistry, open, onClose, title = "Keyboard shortcuts", extraSections, }) => {
+    // Esc / focus-trap / backdrop dismiss live on the base Modal.
+    const sections = useMemo(() => {
+        const byCategory = new Map();
+        for (const action of registry.getAll()) {
+            if (!action.label)
+                continue;
+            const cat = action.category ?? "other";
+            const list = byCategory.get(cat) ?? [];
+            list.push({ label: action.label, keys: actionKeys(action) });
+            byCategory.set(cat, list);
+        }
+        const out = [];
+        for (const cat of CATEGORY_ORDER) {
+            const rows = byCategory.get(cat);
+            if (!rows || rows.length === 0)
+                continue;
+            out.push({ title: CATEGORY_TITLES[cat], rows });
+        }
+        if (extraSections)
+            out.push(...extraSections);
+        return out;
+    }, [registry, extraSections]);
+    const modalStyle = {
+        maxWidth: HELP_DIALOG_MAX_WIDTH_PX,
+        width: "calc(100vw - 64px)",
+        display: "flex",
+        flexDirection: "column",
+    };
+    const headerStyle = {
+        padding: "16px 20px",
+        borderBottom: "1px solid var(--du-ui-border)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+    };
+    const bodyStyle = {
+        padding: "16px 20px 20px",
+        overflowY: "auto",
+    };
+    return (_jsx(Modal, { open: open, onClose: onClose, title: title, style: modalStyle, children: _jsxs("div", { children: [_jsxs("div", { style: headerStyle, children: [_jsx("h2", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: title }), _jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [_jsx("span", { className: "du-help-platform-badge", children: isMac ? "macOS" : "Win / Linux" }), _jsx("button", { type: "button", "aria-label": "Close help", onClick: onClose, style: {
+                                        background: "transparent",
+                                        border: "none",
+                                        color: "var(--du-text)",
+                                        cursor: "pointer",
+                                        display: "inline-flex",
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                        padding: 4,
+                                    }, children: _jsx(X, { size: 18, strokeWidth: 1.75 }) })] })] }), _jsx("div", { style: bodyStyle, children: _jsx("div", { className: "du-help-islands", children: sections.map((section) => (_jsxs("section", { className: "du-help-island", children: [_jsx("h3", { className: "du-help-island-title", children: section.title }), _jsx("div", { className: "du-help-island-rows", children: section.rows.map((row) => (_jsxs("div", { className: "du-help-row", children: [_jsx("span", { className: "du-help-row-label", children: row.label }), _jsx(ShortcutKeys, { combos: row.keys })] }, row.label))) })] }, section.title))) }) })] }) }));
+};
+/**
+ * Render N alternative key combinations joined with "or". Each key
+ * renders as its own pill `<kbd>` chip.
+ */
+const ShortcutKeys = ({ combos }) => {
+    if (combos.length === 0) {
+        return _jsx("span", { className: "du-help-keys-separator", children: "\u2014" });
+    }
+    return (_jsx("span", { className: "du-help-keys", children: combos.map((combo, i) => (_jsxs(Fragment, { children: [i > 0 ? _jsx("span", { className: "du-help-keys-separator", children: "or" }) : null, combo.map((part, j) => (_jsx("kbd", { className: "du-help-key", children: part }, j)))] }, i))) }));
+};
+//# sourceMappingURL=help-dialog.js.map

package/dist/help-dialog.js.map

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

package/dist/hooks.d.ts

@@ -0,0 +1,54 @@
+import { type Annotation, type Layer, type Scene } from "@oh-just-another/scene";
+import { type AnnotationId, type LinkId, type LayerId } from "@oh-just-another/types";
+import { type Editor, type Mode, type Selection } from "@oh-just-another/state";
+/**
+ * Live `Editor` instance. Use for imperative actions (`addElement`,
+ * `loadScene`, `screenToWorld`). Throws if not inside a provider.
+ *
+ * The reactive hooks below (`useScene`, etc.) accept the brief pre-mount
+ * window and return default values; this one assumes the caller already
+ * waited until the editor is ready.
+ */
+export declare const useDiagram: () => Editor;
+export declare const useMobileLayout: () => boolean;
+/**
+ * Same as `useDiagram` but returns `null` while the editor is being
+ * created. Useful in components that render before `<DiagramSurface>`
+ * mounts and want to fire callbacks lazily.
+ */
+export declare const useDiagramOptional: () => Editor | null;
+/** Current `Scene`. Returns `emptyScene()` while the editor is being created. */
+export declare const useScene: () => Scene;
+/** Selected shape ids. Returns the canonical `EMPTY` set pre-mount. */
+export declare const useSelection: () => Selection;
+/** Current interaction mode. Defaults to `"select"` pre-mount. */
+export declare const useMode: () => Mode;
+/**
+ * History introspection and actions. Returns no-op callbacks (and `false`
+ * flags) while the editor is being created so toolbar buttons can render
+ * disabled without bespoke null-checking.
+ *
+ * Subscribes to the typed `history` event so undo/redo button updates
+ * skip pan / zoom / selection notifies entirely.
+ */
+export declare const useHistory: () => {
+    readonly canUndo: boolean;
+    readonly canRedo: boolean;
+    readonly undo: () => void;
+    readonly redo: () => void;
+};
+/** All layers in z-order (back → front). Returns an empty array pre-mount. */
+export declare const useLayers: () => readonly Layer[];
+/** Currently active layer id (new shapes go here). */
+export declare const useActiveLayerId: () => LayerId;
+/**
+ * All annotations in scene order (insertion). Returns empty pre-mount.
+ * Newest annotations come last; hosts can sort by `createdAt` for
+ * chronological order.
+ */
+export declare const useAnnotations: () => readonly Annotation[];
+/** Currently focused annotation id (or null when nothing is open). */
+export declare const useSelectedAnnotation: () => AnnotationId | null;
+/** Currently selected edge id, or null when no edge is selected. */
+export declare const useSelectedLink: () => LinkId | null;
+//# sourceMappingURL=hooks.d.ts.map

package/dist/hooks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../src/hooks.ts"],"names":[],"mappings":"AACA,OAAO,EAIL,KAAK,UAAU,EACf,KAAK,KAAK,EACV,KAAK,KAAK,EACX,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,MAAM,EAEX,KAAK,OAAO,EACb,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAa,KAAK,MAAM,EAAE,KAAK,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAG3F;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,QAAO,MAA6B,CAAC;AAc5D,eAAO,MAAM,eAAe,QAAO,OAahC,CAAC;AAEJ;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,QAAO,MAAM,GAAG,IAAmC,CAAC;AAInF,iFAAiF;AACjF,eAAO,MAAM,QAAQ,QAAO,KAAgE,CAAC;AAE7F,uEAAuE;AACvE,eAAO,MAAM,YAAY,QAAO,SACqC,CAAC;AAEtE,kEAAkE;AAClE,eAAO,MAAM,OAAO,QAAO,IAAgE,CAAC;AAE5F;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,QAAO;IAC5B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,OAAO,EAAE,OAAO,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;IAC1B,QAAQ,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;CAc3B,CAAC;AAIF,8EAA8E;AAC9E,eAAO,MAAM,SAAS,QAAO,SAAS,KAAK,EACwB,CAAC;AAIpE,sDAAsD;AACtD,eAAO,MAAM,gBAAgB,QAAO,OAC6B,CAAC;AAIlE;;;;GAIG;AACH,eAAO,MAAM,cAAc,QAAO,SAAS,UAAU,EAC2B,CAAC;AAEjF,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,QAAO,YAAY,GAAG,IACmB,CAAC;AAE5E,oEAAoE;AACpE,eAAO,MAAM,eAAe,QAAO,MAAM,GAAG,IACmB,CAAC"}

package/dist/hooks.js

@@ -0,0 +1,85 @@
+import { useCallback, useSyncExternalStore } from "react";
+import { DEFAULT_LAYER_ID, emptyScene, getLayersInOrder, } from "@oh-just-another/scene";
+import { MOBILE_MAX_WIDTH_PX } from "./constants.js";
+import { layerId as castLayerId, } from "@oh-just-another/types";
+import { selection } from "@oh-just-another/state";
+import { useDiagramContext, useDiagramContextOptional, useEditorSelector } from "./context.js";
+/**
+ * Live `Editor` instance. Use for imperative actions (`addElement`,
+ * `loadScene`, `screenToWorld`). Throws if not inside a provider.
+ *
+ * The reactive hooks below (`useScene`, etc.) accept the brief pre-mount
+ * window and return default values; this one assumes the caller already
+ * waited until the editor is ready.
+ */
+export const useDiagram = () => useDiagramContext();
+/**
+ * `true` when the chrome should use its mobile layout — a coarse pointer
+ * (touch) OR a narrow viewport (≤ {@link MOBILE_MAX_WIDTH_PX}). Reactive:
+ * re-renders on orientation / resize / input-mode change. SSR-safe (returns
+ * `false` until mounted). Single source of truth for mobile adaptations.
+ */
+const MOBILE_MEDIA = `(pointer: coarse), (max-width: ${MOBILE_MAX_WIDTH_PX}px)`;
+const matchMobile = () => typeof window !== "undefined" && typeof window.matchMedia === "function"
+    ? window.matchMedia(MOBILE_MEDIA).matches
+    : false;
+export const useMobileLayout = () => useSyncExternalStore((onChange) => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+        return () => {
+            /* no-op: SSR / no-matchMedia env has no subscription to tear down */
+        };
+    const mq = window.matchMedia(MOBILE_MEDIA);
+    mq.addEventListener("change", onChange);
+    return () => { mq.removeEventListener("change", onChange); };
+}, matchMobile, () => false);
+/**
+ * Same as `useDiagram` but returns `null` while the editor is being
+ * created. Useful in components that render before `<DiagramSurface>`
+ * mounts and want to fire callbacks lazily.
+ */
+export const useDiagramOptional = () => useDiagramContextOptional();
+const EMPTY_SCENE = emptyScene();
+/** Current `Scene`. Returns `emptyScene()` while the editor is being created. */
+export const useScene = () => useEditorSelector((e) => e.scene, EMPTY_SCENE, "scene");
+/** Selected shape ids. Returns the canonical `EMPTY` set pre-mount. */
+export const useSelection = () => useEditorSelector((e) => e.selection, selection.EMPTY, "selection");
+/** Current interaction mode. Defaults to `"select"` pre-mount. */
+export const useMode = () => useEditorSelector((e) => e.mode, "select", "mode");
+/**
+ * History introspection and actions. Returns no-op callbacks (and `false`
+ * flags) while the editor is being created so toolbar buttons can render
+ * disabled without bespoke null-checking.
+ *
+ * Subscribes to the typed `history` event so undo/redo button updates
+ * skip pan / zoom / selection notifies entirely.
+ */
+export const useHistory = () => {
+    const editor = useDiagramOptional();
+    const canUndo = useEditorSelector((e) => e.canUndo, false, "history");
+    const canRedo = useEditorSelector((e) => e.canRedo, false, "history");
+    const undo = useCallback(() => {
+        editor?.undo();
+    }, [editor]);
+    const redo = useCallback(() => {
+        editor?.redo();
+    }, [editor]);
+    return { canUndo, canRedo, undo, redo };
+};
+const EMPTY_LAYERS = [];
+/** All layers in z-order (back → front). Returns an empty array pre-mount. */
+export const useLayers = () => useEditorSelector((e) => getLayersInOrder(e.scene), EMPTY_LAYERS);
+const DEFAULT_ACTIVE_LAYER = castLayerId(DEFAULT_LAYER_ID);
+/** Currently active layer id (new shapes go here). */
+export const useActiveLayerId = () => useEditorSelector((e) => e.activeLayerId, DEFAULT_ACTIVE_LAYER);
+const EMPTY_ANNOTATIONS = [];
+/**
+ * All annotations in scene order (insertion). Returns empty pre-mount.
+ * Newest annotations come last; hosts can sort by `createdAt` for
+ * chronological order.
+ */
+export const useAnnotations = () => useEditorSelector((e) => [...e.scene.annotations.values()], EMPTY_ANNOTATIONS);
+/** Currently focused annotation id (or null when nothing is open). */
+export const useSelectedAnnotation = () => useEditorSelector((e) => e.selectedAnnotation, null);
+/** Currently selected edge id, or null when no edge is selected. */
+export const useSelectedLink = () => useEditorSelector((e) => e.selectedLink, null);
+//# sourceMappingURL=hooks.js.map

package/dist/hooks.js.map

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

package/dist/icon-button.d.ts

@@ -0,0 +1,28 @@
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+/**
+ * Square clickable button — the base primitive for the top / bottom
+ * bars and panel headers. Style comes entirely from `du-icon-button` in
+ * `diagram-ui.css`; hosts override via CSS variables, not inline `style`.
+ *
+ * Active state is signalled through `aria-pressed` (the CSS hooks onto
+ * `[aria-pressed="true"]`). For tools that toggle on/off pass
+ * `active={true}`; for momentary actions omit it.
+ *
+ * The tooltip uses the shared `<TooltipProvider>` singleton so a second
+ * hover within the open-delay window skips the delay.
+ */
+export interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "title"> {
+    /**
+     * Accessible name and tooltip text. Required. Renders through
+     * `<Tooltip>` (singleton) when a `<TooltipProvider>` is mounted; falls
+     * back to native `title=` otherwise.
+     */
+    readonly label: string;
+    /** Toggle state: maps to `aria-pressed` and a CSS `is-active` class. */
+    readonly active?: boolean;
+    /** Compact 28-px variant for dense panels (e.g. side-panel headers). */
+    readonly size?: "default" | "sm";
+    readonly children: ReactNode;
+}
+export declare const IconButton: ({ label, active, size, className, children, ...rest }: IconButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=icon-button.d.ts.map

package/dist/icon-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../src/icon-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC9D;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,wEAAwE;IACxE,QAAQ,CAAC,MAAM,CAAC,EAAE,OAAO,CAAC;IAC1B,wEAAwE;IACxE,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAED,eAAO,MAAM,UAAU,GAAI,uDAOxB,eAAe,4CAsBjB,CAAC"}