@oh-just-another/react-ui 0.57.0

package/dist/context-menu.js

@@ -0,0 +1,333 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState, } from "react";
+import { defaultActionRegistry, formatHotkey } from "@oh-just-another/state";
+import { useDiagramOptional } from "./hooks.js";
+import { useContextMenuController } from "./context-menu-controller.js";
+export const ContextMenu = ({ items, target, style, className }) => {
+    const editor = useDiagramOptional();
+    const controller = useContextMenuController();
+    const [open, setOpen] = useState(null);
+    const menuRef = useRef(null);
+    // Register an imperative opener so UI outside the canvas (e.g. the
+    // "⋯" button in the selection floating panel) can open this same
+    // menu at a chosen point.
+    useEffect(() => {
+        if (!controller)
+            return undefined;
+        return controller.register(({ screenPoint, worldPoint }) => { setOpen({ screenPoint, worldPoint }); });
+    }, [controller]);
+    // Wire the contextmenu listener (mouse right-click) AND long-press
+    // (touch). Both end up calling `setOpen` with viewport-relative
+    // screen coords.
+    useEffect(() => {
+        if (!editor)
+            return undefined;
+        const root = target ?? window;
+        const onContext = (ev) => {
+            const me = ev;
+            me.preventDefault();
+            const screenPoint = { x: me.clientX, y: me.clientY };
+            const rect = editor.hostElement.getBoundingClientRect();
+            const worldPoint = editor.screenToWorld({
+                x: screenPoint.x - rect.left,
+                y: screenPoint.y - rect.top,
+            });
+            setOpen({ screenPoint, worldPoint });
+        };
+        root.addEventListener("contextmenu", onContext);
+        // Touch fallback: editor fires onLongPress with host-relative
+        // coords; the menu needs viewport-relative for positioning.
+        const unsubscribeLongPress = editor.onLongPress(({ screenPoint, worldPoint }) => {
+            const rect = editor.hostElement.getBoundingClientRect();
+            setOpen({
+                screenPoint: { x: screenPoint.x + rect.left, y: screenPoint.y + rect.top },
+                worldPoint,
+            });
+        });
+        return () => {
+            root.removeEventListener("contextmenu", onContext);
+            unsubscribeLongPress();
+        };
+    }, [editor, target]);
+    // Dismiss on click outside / Escape.
+    useEffect(() => {
+        if (!open)
+            return undefined;
+        const onPointer = (ev) => {
+            if (menuRef.current?.contains(ev.target))
+                return;
+            setOpen(null);
+        };
+        const onKey = (ev) => {
+            if (ev.key === "Escape")
+                setOpen(null);
+        };
+        window.addEventListener("pointerdown", onPointer, true);
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("pointerdown", onPointer, true);
+            window.removeEventListener("keydown", onKey);
+        };
+    }, [open]);
+    const close = useCallback(() => { setOpen(null); }, []);
+    if (!editor || !open)
+        return null;
+    const ctx = {
+        worldPoint: open.worldPoint,
+        screenPoint: open.screenPoint,
+    };
+    // Filter visibility once per open — items that compute `visible` against
+    // the editor still see a consistent snapshot.
+    const visibleItems = items.filter((item) => item.kind === "divider" || item.visible?.(editor, ctx) !== false);
+    // Collapse adjacent dividers + leading/trailing dividers.
+    const cleanedItems = collapseDividers(visibleItems);
+    if (cleanedItems.length === 0)
+        return null;
+    return (_jsx("div", { ref: menuRef, role: "menu", style: {
+            position: "fixed",
+            zIndex: 1000,
+            top: open.screenPoint.y,
+            left: open.screenPoint.x,
+            background: "var(--menu-bg, #1a1a1a)",
+            color: "var(--menu-text, #ddd)",
+            border: "1px solid var(--menu-border, #333)",
+            borderRadius: 6,
+            padding: "4px 0",
+            minWidth: 180,
+            boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
+            font: "13px system-ui, -apple-system, Segoe UI, Roboto, sans-serif",
+            ...style,
+        }, className: className, children: cleanedItems.map((item, i) => item.kind === "divider" ? (_jsx("hr", { style: {
+                border: 0,
+                borderTop: "1px solid var(--menu-divider, #2a2a2a)",
+                margin: "4px 0",
+            } }, `d-${i}`)) : (_jsx(ContextMenuRow, { item: item, editor: editor, ctx: ctx, onActivate: () => {
+                close();
+                item.onClick(editor, ctx);
+            } }, item.id))) }));
+};
+const ContextMenuRow = ({ item, editor, ctx, onActivate, }) => {
+    const disabled = item.disabled?.(editor, ctx) ?? false;
+    const handle = (ev) => {
+        if (disabled) {
+            ev.preventDefault();
+            return;
+        }
+        ev.stopPropagation();
+        onActivate();
+    };
+    return (_jsxs("button", { type: "button", role: "menuitem", onClick: handle, disabled: disabled, style: {
+            all: "unset",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "6px 12px",
+            cursor: disabled ? "not-allowed" : "pointer",
+            opacity: disabled ? 0.4 : 1,
+            width: "100%",
+            boxSizing: "border-box",
+        }, onMouseEnter: (ev) => {
+            if (!disabled)
+                ev.currentTarget.style.background = "#2a2a2a";
+        }, onMouseLeave: (ev) => {
+            ev.currentTarget.style.background = "transparent";
+        }, children: [_jsx("span", { children: item.label }), item.shortcut ? (_jsx("span", { style: { marginLeft: 16, opacity: 0.6, fontSize: 11 }, children: item.shortcut })) : null] }));
+};
+const collapseDividers = (items) => {
+    const out = [];
+    for (const item of items) {
+        if (item.kind === "divider") {
+            if (out.length === 0)
+                continue;
+            const last = out[out.length - 1];
+            if (last?.kind === "divider")
+                continue;
+        }
+        out.push(item);
+    }
+    while (out.length > 0) {
+        const last = out[out.length - 1];
+        if (last?.kind !== "divider")
+            break;
+        out.pop();
+    }
+    return out;
+};
+/**
+ * Build a context-menu row from a registered action: label, shortcut (from
+ * the action's hotkey, platform-correct), visibility (the action's
+ * `predicate`) and click (dispatch) all come from the registry. Position-/
+ * DOM-dependent menu items (annotations, add-comment, move-to-layer) can't be
+ * registry actions (the action context carries no world point) and stay
+ * inline below.
+ *
+ * `opts.label` / `opts.visible` override when the menu needs different
+ * text or visibility than the action's defaults (e.g. z-order entries
+ * shown only for a single selection).
+ */
+const actionMenuItem = (actionId, opts) => {
+    const action = defaultActionRegistry.get(actionId);
+    const pred = action?.predicate;
+    const matchers = !action?.hotkey
+        ? []
+        : Array.isArray(action.hotkey)
+            ? action.hotkey
+            : [action.hotkey];
+    const first = matchers[0];
+    const visible = opts?.visible ?? (pred ? (editor) => pred({ editor }) : undefined);
+    return {
+        kind: "action",
+        id: actionId,
+        label: opts?.label ?? action?.label ?? actionId,
+        ...(first ? { shortcut: formatHotkey(first) } : {}),
+        ...(visible ? { visible } : {}),
+        onClick: (editor) => { defaultActionRegistry.dispatch(actionId, { editor }); },
+    };
+};
+export const DEFAULT_CONTEXT_MENU = [
+    // --- Annotation pin actions (only when right-click landed on a pin) ---
+    {
+        kind: "action",
+        id: "annotation-open",
+        label: "Open thread",
+        visible: (e, ctx) => e.hitAnnotation(ctx.worldPoint) !== null,
+        onClick: (e, ctx) => {
+            const id = e.hitAnnotation(ctx.worldPoint);
+            if (id)
+                e.setSelectedAnnotation(id);
+        },
+    },
+    {
+        kind: "action",
+        id: "annotation-toggle-resolved",
+        label: "Toggle resolved",
+        visible: (e, ctx) => e.hitAnnotation(ctx.worldPoint) !== null,
+        onClick: (e, ctx) => {
+            const id = e.hitAnnotation(ctx.worldPoint);
+            if (id)
+                e.toggleAnnotationResolved(id);
+        },
+    },
+    {
+        kind: "action",
+        id: "annotation-delete",
+        label: "Delete annotation",
+        visible: (e, ctx) => e.hitAnnotation(ctx.worldPoint) !== null,
+        onClick: (e, ctx) => {
+            const id = e.hitAnnotation(ctx.worldPoint);
+            if (id)
+                e.removeAnnotation(id);
+        },
+    },
+    {
+        kind: "divider",
+    },
+    // --- Selection ops (registry-backed) ---
+    actionMenuItem("delete-selection", { label: "Delete" }),
+    actionMenuItem("duplicate-selection", { label: "Duplicate" }),
+    actionMenuItem("copy"),
+    actionMenuItem("cut"),
+    actionMenuItem("paste"),
+    actionMenuItem("select-all"),
+    { kind: "divider" },
+    // --- Grouping + arrange (registry-backed) ---
+    actionMenuItem("group-selection", { label: "Group" }),
+    actionMenuItem("ungroup-selection", { label: "Ungroup" }),
+    actionMenuItem("arrange-grid"),
+    actionMenuItem("arrange-stack-h"),
+    actionMenuItem("arrange-stack-v"),
+    actionMenuItem("auto-arrange"),
+    actionMenuItem("compact-z-order"),
+    { kind: "divider" },
+    // --- Z-order (single-selection scope; registry-backed, visibility
+    //     narrowed to a single selection) ---
+    actionMenuItem("bring-to-front", { visible: (e) => e.selection.size === 1 }),
+    actionMenuItem("send-to-back", { visible: (e) => e.selection.size === 1 }),
+    {
+        kind: "action",
+        id: "move-to-layer",
+        label: "Move to layer…",
+        visible: (e) => e.selection.size > 0 && e.scene.layers.size > 1,
+        onClick: (e) => {
+            if (typeof window === "undefined")
+                return;
+            const layers = [...e.scene.layers.values()];
+            const names = layers.map((l, i) => `${i + 1}. ${l.name}`).join("\n");
+            const choice = window.prompt(`Move selection to layer (1-${layers.length}):\n${names}`);
+            if (!choice)
+                return;
+            const idx = parseInt(choice, 10) - 1;
+            const target = layers[idx];
+            if (target)
+                e.moveSelectionToLayer(target.id);
+        },
+    },
+    { kind: "divider" },
+    // --- Annotation actions (when right-click hits a pin) ---
+    {
+        kind: "action",
+        id: "open-thread",
+        label: "Open thread",
+        visible: (e, ctx) => e.hitAnnotation(ctx.worldPoint) !== null,
+        onClick: (e, ctx) => {
+            const ann = e.hitAnnotation(ctx.worldPoint);
+            if (ann)
+                e.setSelectedAnnotation(ann);
+        },
+    },
+    {
+        kind: "action",
+        id: "resolve-annotation",
+        label: "Toggle resolved",
+        visible: (e, ctx) => e.hitAnnotation(ctx.worldPoint) !== null,
+        onClick: (e, ctx) => {
+            const ann = e.hitAnnotation(ctx.worldPoint);
+            if (ann)
+                e.toggleAnnotationResolved(ann);
+        },
+    },
+    {
+        kind: "action",
+        id: "remove-annotation",
+        label: "Delete annotation",
+        visible: (e, ctx) => e.hitAnnotation(ctx.worldPoint) !== null,
+        onClick: (e, ctx) => {
+            const ann = e.hitAnnotation(ctx.worldPoint);
+            if (ann)
+                e.removeAnnotation(ann);
+        },
+    },
+    {
+        kind: "action",
+        id: "add-comment",
+        label: "Add comment",
+        visible: (e, ctx) => e.hitAnnotation(ctx.worldPoint) === null,
+        onClick: (e, ctx) => {
+            const elementUnder = [...e.scene.elements.values()].reverse().find((s) => {
+                const pos = s.position;
+                const w = "width" in s && typeof s.width === "number" ? s.width : 0;
+                const h = "height" in s && typeof s.height === "number" ? s.height : 0;
+                return (ctx.worldPoint.x >= pos.x &&
+                    ctx.worldPoint.y >= pos.y &&
+                    ctx.worldPoint.x <= pos.x + w &&
+                    ctx.worldPoint.y <= pos.y + h);
+            });
+            const position = elementUnder
+                ? {
+                    x: ctx.worldPoint.x - elementUnder.position.x,
+                    y: ctx.worldPoint.y - elementUnder.position.y,
+                }
+                : ctx.worldPoint;
+            e.addAnnotation({ position, elementId: elementUnder?.id ?? null });
+        },
+    },
+    { kind: "divider" },
+    // --- Viewport (registry-backed) ---
+    actionMenuItem("zoom-in"),
+    actionMenuItem("zoom-out"),
+    actionMenuItem("zoom-reset", { label: "Reset zoom (100%)" }),
+    actionMenuItem("zoom-to-fit", {
+        label: "Fit to screen",
+        visible: (e) => e.scene.elements.size > 0,
+    }),
+];
+//# sourceMappingURL=context-menu.js.map

package/dist/context-menu.js.map

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

package/dist/context.d.ts

@@ -0,0 +1,44 @@
+import { type ReactNode } from "react";
+import type { Editor, EditorEvents } from "@oh-just-another/state";
+export interface DiagramProviderProps {
+    readonly editor: Editor;
+    readonly children: ReactNode;
+}
+/** Static provider — wraps a ready-made editor. */
+export declare const DiagramProvider: ({ editor, children }: DiagramProviderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Internal bridge used by `<DiagramRoot>` to flow a lazy editor down to its
+ * descendants. Exported so the root can set it.
+ */
+export declare const DiagramEditorBridge: import("react").Context<Editor | null>;
+/**
+ * Strict accessor — throws when called outside any provider. Use for
+ * imperative paths that *require* the editor right now (`editor.addElement`,
+ * `editor.screenToWorld`, etc).
+ */
+export declare const useDiagramContext: () => Editor;
+/**
+ * Forgiving variant — returns `null` when the editor hasn't been created
+ * yet. Pair with safe defaults; used by the reactive hooks to render
+ * cleanly during the first frame.
+ */
+export declare const useDiagramContextOptional: () => Editor | null;
+/**
+ * "Subscribe to editor + select a value" helper. Re-runs `select` whenever
+ * the editor notifies a change; re-renders the caller when the projected
+ * value actually changes.
+ *
+ * The editor may be missing during the very first frame (before
+ * `<DiagramSurface>` registers with `<DiagramRoot>`). `defaultValue` is
+ * returned during that window.
+ */
+export declare const useEditorSelector: <T>(select: (editor: Editor) => T, defaultValue: T, 
+/**
+ * Optional typed event to subscribe to instead of the umbrella
+ * `change`. When omitted, falls back to `editor.subscribe(fn)`, which
+ * fires on every notify. Passing e.g. `"mode"` makes the hook re-run
+ * the selector only when the mode flipped, skipping selection /
+ * viewport / scene notifies entirely.
+ */
+event?: keyof EditorEvents) => T;
+//# sourceMappingURL=context.d.ts.map

package/dist/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA0D,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAC/F,OAAO,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAoBnE,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;CAC9B;AAED,mDAAmD;AACnD,eAAO,MAAM,eAAe,GAAI,sBAAsB,oBAAoB,4CAEzE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,wCAAiB,CAAC;AAElD;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,QAAO,MASpC,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,QAAO,MAAM,GAAG,IAAkC,CAAC;AAEzF;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,GAAI,CAAC,EACjC,QAAQ,CAAC,MAAM,EAAE,MAAM,KAAK,CAAC,EAC7B,cAAc,CAAC;AACf;;;;;;GAMG;AACH,QAAQ,MAAM,YAAY,KACzB,CA+BF,CAAC"}

package/dist/context.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+/**
+ * Holds the live `Editor` instance. Components and hooks read from this
+ * context to subscribe to scene / selection / history changes.
+ *
+ * Two ways to populate it:
+ *   - Build an editor yourself and pass it via `<DiagramProvider>`. Useful
+ *     when you want full lifecycle control (multi-canvas, server-built
+ *     editor, etc).
+ *   - Use `<DiagramRoot>` (in `diagram-root.tsx`): it lazy-creates the editor
+ *     when a child `<DiagramSurface>` mounts and provides it here.
+ *
+ * Most hooks tolerate the `null` value during the brief window between
+ * `<DiagramRoot>` rendering and `<DiagramSurface>` mounting — they return
+ * sensible defaults. `useDiagramContext` (the strict variant) still throws
+ * so direct imperative misuse outside a provider is caught early.
+ */
+const DiagramContext = createContext(null);
+/** Static provider — wraps a ready-made editor. */
+export const DiagramProvider = ({ editor, children }) => {
+    return _jsx(DiagramContext.Provider, { value: editor, children: children });
+};
+/**
+ * Internal bridge used by `<DiagramRoot>` to flow a lazy editor down to its
+ * descendants. Exported so the root can set it.
+ */
+export const DiagramEditorBridge = DiagramContext;
+/**
+ * Strict accessor — throws when called outside any provider. Use for
+ * imperative paths that *require* the editor right now (`editor.addElement`,
+ * `editor.screenToWorld`, etc).
+ */
+export const useDiagramContext = () => {
+    const editor = useContext(DiagramContext);
+    if (!editor) {
+        throw new Error("@oh-just-another/react-ui: hook called outside <DiagramProvider> / <DiagramRoot>, " +
+            "or before <DiagramSurface> mounted.");
+    }
+    return editor;
+};
+/**
+ * Forgiving variant — returns `null` when the editor hasn't been created
+ * yet. Pair with safe defaults; used by the reactive hooks to render
+ * cleanly during the first frame.
+ */
+export const useDiagramContextOptional = () => useContext(DiagramContext);
+/**
+ * "Subscribe to editor + select a value" helper. Re-runs `select` whenever
+ * the editor notifies a change; re-renders the caller when the projected
+ * value actually changes.
+ *
+ * The editor may be missing during the very first frame (before
+ * `<DiagramSurface>` registers with `<DiagramRoot>`). `defaultValue` is
+ * returned during that window.
+ */
+export const useEditorSelector = (select, defaultValue, 
+/**
+ * Optional typed event to subscribe to instead of the umbrella
+ * `change`. When omitted, falls back to `editor.subscribe(fn)`, which
+ * fires on every notify. Passing e.g. `"mode"` makes the hook re-run
+ * the selector only when the mode flipped, skipping selection /
+ * viewport / scene notifies entirely.
+ */
+event) => {
+    const editor = useDiagramContextOptional();
+    const [value, setValue] = useState(() => (editor ? select(editor) : defaultValue));
+    // Keep select / defaultValue in refs so the subscription effect runs only
+    // when the editor identity changes. Callers may pass fresh literals every
+    // render — that's fine.
+    const selectRef = useRef(select);
+    selectRef.current = select;
+    const defaultRef = useRef(defaultValue);
+    defaultRef.current = defaultValue;
+    useEffect(() => {
+        if (!editor) {
+            setValue(defaultRef.current);
+            return undefined;
+        }
+        const update = () => {
+            const next = selectRef.current(editor);
+            setValue((prev) => (Object.is(prev, next) ? prev : next));
+        };
+        update();
+        // Typed event when given; umbrella subscribe otherwise. Both paths
+        // fire in lock-step (typed events fan out of the same notify() that
+        // runs the umbrella subscribers), so the typed path is just narrower.
+        if (event !== undefined) {
+            return editor.on(event, update);
+        }
+        return editor.subscribe(update);
+    }, [editor, event]);
+    return value;
+};
+//# sourceMappingURL=context.js.map

package/dist/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../src/context.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AAG/F;;;;;;;;;;;;;;;GAeG;AACH,MAAM,cAAc,GAAG,aAAa,CAAgB,IAAI,CAAC,CAAC;AAO1D,mDAAmD;AACnD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAwB,EAAE,EAAE;IAC5E,OAAO,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,MAAM,YAAG,QAAQ,GAA2B,CAAC;AACtF,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,cAAc,CAAC;AAElD;;;;GAIG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAW,EAAE;IAC5C,MAAM,MAAM,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC1C,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,MAAM,IAAI,KAAK,CACb,oFAAoF;YAClF,qCAAqC,CACxC,CAAC;IACJ,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC,CAAC;AAEF;;;;GAIG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAkB,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC;AAEzF;;;;;;;;GAQG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAC/B,MAA6B,EAC7B,YAAe;AACf;;;;;;GAMG;AACH,KAA0B,EACvB,EAAE;IACL,MAAM,MAAM,GAAG,yBAAyB,EAAE,CAAC;IAC3C,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAI,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC;IACtF,0EAA0E;IAC1E,0EAA0E;IAC1E,wBAAwB;IACxB,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC;IACjC,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;IAC3B,MAAM,UAAU,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IACxC,UAAU,CAAC,OAAO,GAAG,YAAY,CAAC;IAElC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;YAC7B,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,MAAM,MAAM,GAAG,GAAG,EAAE;YAClB,MAAM,IAAI,GAAG,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;YACvC,QAAQ,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;QAC5D,CAAC,CAAC;QACF,MAAM,EAAE,CAAC;QACT,mEAAmE;QACnE,oEAAoE;QACpE,sEAAsE;QACtE,IAAI,KAAK,KAAK,SAAS,EAAE,CAAC;YACxB,OAAO,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;QAClC,CAAC;QACD,OAAO,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC;IAEpB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC"}

package/dist/diagram-bars.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+/**
+ * modern-style 3-zone bar (left / center / right). Sits at the
+ * top or bottom of the canvas with a small inset margin. Each zone
+ * is an inline-flex row of buttons / button-groups; the wrapper
+ * keeps them at the edges + centred middle without flex shrinking
+ * (passing `null` for a zone collapses that slot cleanly).
+ *
+ * `pointer-events: none` on the bar itself means clicks pass
+ * through to the canvas; only the buttons inside the zones receive
+ * events. The CSS handles that via `du-bar > * { pointer-events:
+ * auto }` so authors don't have to think about it.
+ */
+export interface DiagramBarProps {
+    readonly left?: ReactNode;
+    readonly center?: ReactNode;
+    readonly right?: ReactNode;
+}
+export declare const TopBar: ({ left, center, right }: DiagramBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BottomBar: ({ left, center, right }: DiagramBarProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=diagram-bars.d.ts.map

package/dist/diagram-bars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram-bars.d.ts","sourceRoot":"","sources":["../src/diagram-bars.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,GAAI,yBAAyB,eAAe,4CAU9D,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,yBAAyB,eAAe,4CAUjE,CAAC"}

package/dist/diagram-bars.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const TopBar = ({ left, center, right }) => (_jsxs("div", { className: "du-bar du-bar-top", children: [_jsx("div", { className: "du-bar-zone", children: left }), center !== undefined && center !== null ? (_jsx("div", { className: "du-bar-zone du-bar-zone-center", children: center })) : (_jsx("div", {})), _jsx("div", { className: "du-bar-zone", children: right })] }));
+export const BottomBar = ({ left, center, right }) => (_jsxs("div", { className: "du-bar du-bar-bottom", children: [_jsx("div", { className: "du-bar-zone", children: left }), center !== undefined && center !== null ? (_jsx("div", { className: "du-bar-zone du-bar-zone-center", children: center })) : (_jsx("div", {})), _jsx("div", { className: "du-bar-zone", children: right })] }));
+//# sourceMappingURL=diagram-bars.js.map

package/dist/diagram-bars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram-bars.js","sourceRoot":"","sources":["../src/diagram-bars.tsx"],"names":[],"mappings":";AAoBA,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAmB,EAAE,EAAE,CAAC,CAClE,eAAK,SAAS,EAAC,mBAAmB,aAChC,cAAK,SAAS,EAAC,aAAa,YAAE,IAAI,GAAO,EACxC,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,CACzC,cAAK,SAAS,EAAC,gCAAgC,YAAE,MAAM,GAAO,CAC/D,CAAC,CAAC,CAAC,CACF,eAAO,CACR,EACD,cAAK,SAAS,EAAC,aAAa,YAAE,KAAK,GAAO,IACtC,CACP,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAmB,EAAE,EAAE,CAAC,CACrE,eAAK,SAAS,EAAC,sBAAsB,aACnC,cAAK,SAAS,EAAC,aAAa,YAAE,IAAI,GAAO,EACxC,MAAM,KAAK,SAAS,IAAI,MAAM,KAAK,IAAI,CAAC,CAAC,CAAC,CACzC,cAAK,SAAS,EAAC,gCAAgC,YAAE,MAAM,GAAO,CAC/D,CAAC,CAAC,CAAC,CACF,eAAO,CACR,EACD,cAAK,SAAS,EAAC,aAAa,YAAE,KAAK,GAAO,IACtC,CACP,CAAC"}

package/dist/diagram-canvas.d.ts

@@ -0,0 +1,39 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { Editor, Mode } from "@oh-just-another/state";
+import type { Scene } from "@oh-just-another/scene";
+/**
+ * Convenience one-component setup for the simple case where the canvas is
+ * the **only** content (no side panels or floating toolbar). Equivalent to:
+ *
+ * ```tsx
+ * <DiagramRoot initialScene={s}>
+ *   <DiagramSurface style={style} />
+ * </DiagramRoot>
+ * ```
+ *
+ * For layouts with a palette / property panel / toolbar living next to the
+ * canvas, prefer `<DiagramRoot>` + `<DiagramSurface>` directly — that lets
+ * the side panels be flex siblings of the canvas surface instead of being
+ * covered by the underlying canvas elements.
+ */
+export interface DiagramCanvasProps {
+    readonly initialScene: Scene;
+    readonly initialMode?: Mode;
+    readonly onReady?: (editor: Editor) => void;
+    readonly style?: CSSProperties;
+    readonly className?: string;
+    readonly skipInstallRenderers?: boolean;
+    /**
+     * Optional React subtree rendered **as a sibling** of the canvas surface
+     * inside a shared `<DiagramRoot>`. Useful when the host wants e.g. a
+     * floating toolbar with `position: absolute` over the surface.
+     *
+     * Note: anything that needs to share horizontal space with the canvas
+     * (palettes, inspectors) should be placed alongside a `<DiagramSurface>`
+     * inside a `<DiagramRoot>` instead — using this `children` prop overlays
+     * them, which is rarely what you want.
+     */
+    readonly children?: ReactNode;
+}
+export declare const DiagramCanvas: ({ initialScene, initialMode, onReady, style, className, skipInstallRenderers, children, }: DiagramCanvasProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=diagram-canvas.d.ts.map

package/dist/diagram-canvas.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram-canvas.d.ts","sourceRoot":"","sources":["../src/diagram-canvas.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAGpD;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC;IAC5B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC;;;;;;;;;OASG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B;AAED,eAAO,MAAM,aAAa,GAAI,2FAQ3B,kBAAkB,4CAoBpB,CAAC"}

package/dist/diagram-canvas.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DiagramRoot, DiagramSurface } from "./diagram-root.js";
+export const DiagramCanvas = ({ initialScene, initialMode, onReady, style, className, skipInstallRenderers, children, }) => (_jsx(DiagramRoot, { initialScene: initialScene, ...(initialMode !== undefined ? { initialMode } : {}), ...(onReady !== undefined ? { onReady } : {}), ...(skipInstallRenderers !== undefined ? { skipInstallRenderers } : {}), children: _jsxs("div", { className: className, style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            ...style,
+        }, children: [_jsx(DiagramSurface, {}), children] }) }));
+//# sourceMappingURL=diagram-canvas.js.map

package/dist/diagram-canvas.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"diagram-canvas.js","sourceRoot":"","sources":["../src/diagram-canvas.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAqChE,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,WAAW,EACX,OAAO,EACP,KAAK,EACL,SAAS,EACT,oBAAoB,EACpB,QAAQ,GACW,EAAE,EAAE,CAAC,CACxB,KAAC,WAAW,IACV,YAAY,EAAE,YAAY,KACtB,CAAC,WAAW,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAClD,CAAC,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,KAC1C,CAAC,oBAAoB,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,oBAAoB,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,YAExE,eACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE;YACL,QAAQ,EAAE,UAAU;YACpB,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;YACd,GAAG,KAAK;SACT,aAED,KAAC,cAAc,KAAG,EACjB,QAAQ,IACL,GACM,CACf,CAAC"}