@oh-just-another/react-ui 0.57.0

package/dist/sidebar.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, } from "react";
+const Ctx = createContext(null);
+const useSidebar = () => {
+    const ctx = useContext(Ctx);
+    if (!ctx)
+        throw new Error("Sidebar sub-component must be inside <Sidebar>");
+    return ctx;
+};
+export const Sidebar = ({ children, defaultTab = "", docked = "right", width = 280, className, style, }) => {
+    const [active, setActive] = useState(defaultTab);
+    const ctx = useMemo(() => ({ active, setActive }), [active]);
+    const wrapper = {
+        width,
+        background: "var(--panel, #161616)",
+        color: "var(--text, #ddd)",
+        display: "flex",
+        flexDirection: "column",
+        minHeight: 0,
+        borderLeft: docked === "right" ? "1px solid var(--border, #2a2a2a)" : "none",
+        borderRight: docked === "left" ? "1px solid var(--border, #2a2a2a)" : "none",
+        ...style,
+    };
+    return (_jsx(Ctx.Provider, { value: ctx, children: _jsx("aside", { className: className, style: wrapper, children: children }) }));
+};
+const Header = ({ children }) => (_jsx("header", { style: {
+        padding: "12px 14px",
+        fontSize: 13,
+        fontWeight: 600,
+        color: "var(--text-strong, #fff)",
+        borderBottom: "1px solid var(--border, #2a2a2a)",
+    }, children: children }));
+const TabTriggers = ({ children }) => (_jsx("div", { style: {
+        display: "flex",
+        gap: 4,
+        padding: "8px 10px",
+        borderBottom: "1px solid var(--border, #2a2a2a)",
+    }, children: children }));
+const Trigger = ({ tab, children }) => {
+    const { active, setActive } = useSidebar();
+    const isActive = active === tab;
+    return (_jsx("button", { type: "button", "aria-pressed": isActive, onClick: () => { setActive(tab); }, style: {
+            background: isActive ? "var(--accent, #1a73e8)" : "transparent",
+            color: isActive ? "var(--surface, #fff)" : "var(--text, #ddd)",
+            border: `1px solid ${isActive ? "var(--accent, #1a73e8)" : "var(--border, #2a2a2a)"}`,
+            borderRadius: 4,
+            padding: "4px 10px",
+            fontSize: 12,
+            cursor: "pointer",
+            font: "inherit",
+        }, children: children }));
+};
+const Tab = ({ tab, children }) => {
+    const { active } = useSidebar();
+    if (active !== tab)
+        return null;
+    return (_jsx("div", { style: { flex: "1 1 auto", overflowY: "auto", padding: "10px 12px" }, children: children }));
+};
+/** Plain section (no tab gating) — for content that's always visible. */
+const Section = ({ children }) => (_jsx("div", { style: { padding: "10px 12px", borderBottom: "1px solid var(--border, #2a2a2a)" }, children: children }));
+Sidebar.Header = Header;
+Sidebar.TabTriggers = TabTriggers;
+Sidebar.Trigger = Trigger;
+Sidebar.Tab = Tab;
+Sidebar.Section = Section;
+//# sourceMappingURL=sidebar.js.map

package/dist/sidebar.js.map

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

package/dist/slider.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Native `<input type=range>` wrapped in a styled track. Drives
+ * continuous numeric properties (opacity, blur, …). Optional
+ * `valueLabel` shows the formatted current value alongside the track —
+ * the host owns the formatter (e.g. `${Math.round(v * 100)}%`).
+ *
+ * `value === null` (mixed multi-selection) leaves the thumb at the
+ * midpoint of the range and renders a "—" label until the user moves it.
+ */
+export interface SliderProps {
+    readonly value: number | null;
+    readonly min: number;
+    readonly max: number;
+    readonly step?: number;
+    readonly onChange: (value: number) => void;
+    readonly ariaLabel?: string;
+    readonly valueLabel?: string;
+}
+export declare const Slider: ({ value, min, max, step, onChange, ariaLabel, valueLabel, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=slider.d.ts.map

package/dist/slider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../src/slider.tsx"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,MAAM,GAAI,6DAQpB,WAAW,4CAoBb,CAAC"}

package/dist/slider.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Slider = ({ value, min, max, step = 1, onChange, ariaLabel, valueLabel, }) => {
+    const handle = (ev) => {
+        onChange(Number(ev.target.value));
+    };
+    const thumbValue = value ?? (min + max) / 2;
+    return (_jsxs("div", { className: "du-slider", children: [_jsx("input", { type: "range", min: min, max: max, step: step, value: thumbValue, onChange: handle, "aria-label": ariaLabel, className: "du-slider-track" }), _jsx("span", { className: "du-slider-value", children: value === null ? "—" : valueLabel ?? value })] }));
+};
+//# sourceMappingURL=slider.js.map

package/dist/slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slider.js","sourceRoot":"","sources":["../src/slider.tsx"],"names":[],"mappings":";AAqBA,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EACrB,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,GAAG,CAAC,EACR,QAAQ,EACR,SAAS,EACT,UAAU,GACE,EAAE,EAAE;IAChB,MAAM,MAAM,GAAG,CAAC,EAAiC,EAAQ,EAAE;QACzD,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IACpC,CAAC,CAAC;IACF,MAAM,UAAU,GAAG,KAAK,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC;IAC5C,OAAO,CACL,eAAK,SAAS,EAAC,WAAW,aACxB,gBACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,MAAM,gBACJ,SAAS,EACrB,SAAS,EAAC,iBAAiB,GAC3B,EACF,eAAM,SAAS,EAAC,iBAAiB,YAAE,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,UAAU,IAAI,KAAK,GAAQ,IACjF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/dist/text-editor-overlay.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Invisible keystroke/IME sink for in-canvas text editing. The caret and
+ * selection are drawn on the canvas by the renderer (the editor's
+ * overlay pass); this component is not a visible editor — it is a 1×1,
+ * fully-transparent `<textarea>` that holds keyboard focus so the
+ * browser delivers typing, IME composition, clipboard and native
+ * caret/selection navigation. Each change is mirrored into the editor
+ * (`setEditingText` / `setEditingSelection`), which mutates the shape's
+ * text live and owns the on-canvas caret.
+ *
+ * Wiring: drop as a sibling of `<DiagramSurface>` inside `<DiagramRoot>`.
+ * Editing opens via `editor.beginTextEdit(id)` / the text tool; it
+ * commits on Escape, on a click outside the shape, or on a tool change.
+ */
+export declare const TextEditorOverlay: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=text-editor-overlay.d.ts.map

package/dist/text-editor-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-editor-overlay.d.ts","sourceRoot":"","sources":["../src/text-editor-overlay.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,iBAAiB,sDA4G7B,CAAC"}

package/dist/text-editor-overlay.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useLayoutEffect, useReducer, useRef } from "react";
+import { getElement } from "@oh-just-another/scene";
+import { useDiagramOptional } from "./hooks.js";
+/**
+ * Invisible keystroke/IME sink for in-canvas text editing. The caret and
+ * selection are drawn on the canvas by the renderer (the editor's
+ * overlay pass); this component is not a visible editor — it is a 1×1,
+ * fully-transparent `<textarea>` that holds keyboard focus so the
+ * browser delivers typing, IME composition, clipboard and native
+ * caret/selection navigation. Each change is mirrored into the editor
+ * (`setEditingText` / `setEditingSelection`), which mutates the shape's
+ * text live and owns the on-canvas caret.
+ *
+ * Wiring: drop as a sibling of `<DiagramSurface>` inside `<DiagramRoot>`.
+ * Editing opens via `editor.beginTextEdit(id)` / the text tool; it
+ * commits on Escape, on a click outside the shape, or on a tool change.
+ */
+export const TextEditorOverlay = () => {
+    const editor = useDiagramOptional();
+    const ref = useRef(null);
+    const [, force] = useReducer((x) => x + 1, 0);
+    // Re-render on any editor change so value/selection stay mirrored.
+    useEffect(() => {
+        if (!editor)
+            return undefined;
+        return editor.on("change", force);
+    }, [editor]);
+    const editingId = editor?.editingTextElement ?? null;
+    // Focus the sink whenever an edit starts.
+    useEffect(() => {
+        if (!editingId)
+            return;
+        ref.current?.focus();
+    }, [editingId]);
+    // Mirror the editor's text + selection INTO the textarea so native
+    // navigation, IME and typing all operate on the live content. Guarded
+    // so it never fights the user's own caret.
+    useLayoutEffect(() => {
+        const ta = ref.current;
+        if (!editor || !editingId || !ta)
+            return;
+        const shape = getElement(editor.scene, editingId);
+        const text = shape?.type === "text" ? shape.text : "";
+        if (ta.value !== text)
+            ta.value = text;
+        const sel = editor.editingTextSelection;
+        if (sel && (ta.selectionStart !== sel.start || ta.selectionEnd !== sel.end)) {
+            ta.setSelectionRange(sel.start, sel.end, sel.dir);
+        }
+    });
+    if (!editor || !editingId)
+        return null;
+    const shape = getElement(editor.scene, editingId);
+    if (shape?.type !== "text")
+        return null;
+    // Park the sink at the text's screen position so the IME candidate
+    // window appears near the caret. It's invisible and click-through.
+    const vp = editor.scene.viewport;
+    const left = (shape.position.x - vp.pan.x) * vp.zoom;
+    const top = (shape.position.y - vp.pan.y) * vp.zoom;
+    const dirOf = (ta) => ta.selectionDirection === "backward" ? "backward" : "forward";
+    return (_jsx("textarea", { ref: ref, defaultValue: shape.text, 
+        // `onInput` covers typing, paste, cut, delete and IME end — read
+        // the textarea's authoritative value + caret and push them live.
+        onInput: (ev) => {
+            const t = ev.currentTarget;
+            editor.setEditingText(t.value, t.selectionStart, t.selectionEnd, dirOf(t));
+        }, onSelect: (ev) => {
+            const t = ev.currentTarget;
+            editor.setEditingSelection(t.selectionStart, t.selectionEnd, dirOf(t));
+        }, onKeyDown: (ev) => {
+            // Escape (and Cmd/Ctrl+Enter) commit and exit; plain Enter is a
+            // newline (native textarea behaviour, mirrored via onInput).
+            if (ev.key === "Escape" || (ev.key === "Enter" && (ev.metaKey || ev.ctrlKey))) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                editor.commitTextEdit();
+            }
+        }, onBlur: () => {
+            // A click inside the text repositions the caret (canvas handles
+            // it) and must NOT end editing — keep focus if still in an edit
+            // after the click resolves. A real exit (commit) clears
+            // `editingTextElement`, so it won't refocus then.
+            const id = editingId;
+            setTimeout(() => {
+                const ta = ref.current;
+                if (ta && editor.editingTextElement === id && document.activeElement !== ta) {
+                    ta.focus();
+                }
+            }, 0);
+        }, spellCheck: false, autoCapitalize: "off", autoCorrect: "off", "aria-label": "Text editor", style: {
+            position: "absolute",
+            top,
+            left,
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: 0,
+            border: 0,
+            outline: "none",
+            opacity: 0,
+            resize: "none",
+            overflow: "hidden",
+            whiteSpace: "pre",
+            // Click-through so canvas pointer handling (caret placement /
+            // drag-select / commit-outside) receives the events.
+            pointerEvents: "none",
+            zIndex: 100,
+        } }));
+};
+//# sourceMappingURL=text-editor-overlay.js.map

package/dist/text-editor-overlay.js.map

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

package/dist/toast.d.ts

@@ -0,0 +1,34 @@
+import { type CSSProperties, type ReactNode } from "react";
+/**
+ * In-process toast bus. Hosts mount `<ToastHost>` once at the root;
+ * descendants call `useToast()` to push messages. Each toast dismisses
+ * itself after `duration` ms; the × button closes it manually.
+ */
+export type ToastKind = "info" | "success" | "warn" | "error";
+export interface Toast {
+    readonly id: string;
+    readonly kind: ToastKind;
+    readonly message: string;
+    /** ms before auto-dismiss; 0 / Infinity keeps it open. */
+    readonly duration?: number;
+}
+export interface ToastApi {
+    push(message: string, kind?: ToastKind, duration?: number): string;
+    dismiss(id: string): void;
+}
+export declare const useToast: () => ToastApi;
+/** Like `useToast` but returns null instead of throwing. */
+export declare const useToastOptional: () => ToastApi | null;
+export interface ToastHostProps {
+    readonly children?: ReactNode;
+    /** Default duration for `push` calls that omit the argument. */
+    readonly defaultDuration?: number;
+    readonly style?: CSSProperties;
+}
+export declare const ToastHost: ({ children, defaultDuration, style, }: ToastHostProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Auto-mount helper for hosts that want a single ToastHost at the top
+ * of their component tree without writing the JSX themselves.
+ */
+export declare const useEphemeralToast: (message: string, kind?: ToastKind) => void;
+//# sourceMappingURL=toast.d.ts.map

package/dist/toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.d.ts","sourceRoot":"","sources":["../src/toast.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf;;;;GAIG;AAEH,MAAM,MAAM,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAE9D,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAC;IACzB,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC;IACzB,0DAA0D;IAC1D,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACnE,OAAO,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3B;AAID,eAAO,MAAM,QAAQ,QAAO,QAI3B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,gBAAgB,QAAO,QAAQ,GAAG,IAAgC,CAAC;AAEhF,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;IAC9B,gEAAgE;IAChE,QAAQ,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC;IAClC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAED,eAAO,MAAM,SAAS,GAAI,uCAIvB,cAAc,4CA6BhB,CAAC;AAoFF;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,SAAS,MAAM,EAAE,OAAM,SAAkB,KAAG,IAK7E,CAAC"}

package/dist/toast.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { TOAST_DEFAULT_DURATION_MS } from "./constants.js";
+const ToastContext = createContext(null);
+export const useToast = () => {
+    const ctx = useContext(ToastContext);
+    if (!ctx)
+        throw new Error("useToast: must be wrapped in <ToastHost>");
+    return ctx;
+};
+/** Like `useToast` but returns null instead of throwing. */
+export const useToastOptional = () => useContext(ToastContext);
+export const ToastHost = ({ children, defaultDuration = TOAST_DEFAULT_DURATION_MS, style, }) => {
+    const [items, setItems] = useState([]);
+    const counter = useRef(0);
+    const dismiss = useCallback((id) => {
+        setItems((prev) => prev.filter((t) => t.id !== id));
+    }, []);
+    const push = useCallback((message, kind = "info", duration) => {
+        const id = `toast-${++counter.current}`;
+        const ttl = duration ?? defaultDuration;
+        setItems((prev) => [...prev, { id, kind, message, duration: ttl }]);
+        if (ttl > 0 && Number.isFinite(ttl)) {
+            window.setTimeout(() => { dismiss(id); }, ttl);
+        }
+        return id;
+    }, [defaultDuration, dismiss]);
+    const api = useMemo(() => ({ push, dismiss }), [push, dismiss]);
+    return (_jsxs(ToastContext.Provider, { value: api, children: [children, _jsx(ToastStack, { toasts: items, onDismiss: dismiss, ...(style ? { style } : {}) })] }));
+};
+const ToastStack = ({ toasts, onDismiss, style, }) => {
+    const stackStyle = {
+        position: "fixed",
+        top: 16,
+        right: 16,
+        zIndex: 1100,
+        display: "flex",
+        flexDirection: "column",
+        gap: 8,
+        pointerEvents: "none",
+        ...style,
+    };
+    return (_jsx("div", { style: stackStyle, "aria-live": "polite", "aria-atomic": "false", children: toasts.map((t) => (_jsx(ToastItem, { toast: t, onDismiss: onDismiss }, t.id))) }));
+};
+const KIND_ACCENT = {
+    info: "var(--accent, #1a73e8)",
+    success: "#2e8b57",
+    warn: "#c79100",
+    error: "#c83232",
+};
+const ToastItem = ({ toast, onDismiss, }) => {
+    const itemStyle = {
+        pointerEvents: "auto",
+        minWidth: 240,
+        maxWidth: 360,
+        padding: "10px 12px",
+        background: "var(--panel, #1a1a1a)",
+        color: "var(--text, #ddd)",
+        border: "1px solid var(--border, #2a2a2a)",
+        borderLeft: `4px solid ${KIND_ACCENT[toast.kind]}`,
+        borderRadius: 4,
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.3)",
+        fontSize: 13,
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 12,
+    };
+    return (_jsxs("div", { role: "status", style: itemStyle, children: [_jsx("span", { style: { flex: 1, lineHeight: 1.35 }, children: toast.message }), _jsx("button", { type: "button", "aria-label": "Dismiss", onClick: () => { onDismiss(toast.id); }, style: {
+                    background: "transparent",
+                    border: "none",
+                    color: "var(--muted, #888)",
+                    cursor: "pointer",
+                    fontSize: 16,
+                    lineHeight: 1,
+                    padding: 0,
+                }, children: "\u00D7" })] }));
+};
+/**
+ * Auto-mount helper for hosts that want a single ToastHost at the top
+ * of their component tree without writing the JSX themselves.
+ */
+export const useEphemeralToast = (message, kind = "info") => {
+    const toast = useToastOptional();
+    useEffect(() => {
+        if (toast && message)
+            toast.push(message, kind);
+    }, [toast, message, kind]);
+};
+//# sourceMappingURL=toast.js.map

package/dist/toast.js.map

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

package/dist/toolbar.d.ts

@@ -0,0 +1,149 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { Editor, Mode } from "@oh-just-another/state";
+/**
+ * Single toolbar item. Builtin `mode` items wire to `editor.setMode`;
+ * `action` items receive the live editor and decide what to do; `divider`
+ * draws a thin vertical separator. The `zoom-*` kinds let hosts place
+ * individual zoom controls anywhere in the toolbar; `zoom` packs all
+ * four into a single compact widget (− / % / + / Fit).
+ */
+export type ToolbarItem = {
+    readonly kind: "mode";
+    readonly mode: Mode;
+    readonly label: ReactNode;
+    readonly title?: string;
+} | {
+    readonly kind: "action";
+    readonly id: string;
+    readonly label: ReactNode;
+    readonly title?: string;
+    readonly disabled?: boolean;
+    /** Render the button in its pressed/active state (e.g. a toggle). */
+    readonly active?: boolean;
+    readonly onClick: (editor: Editor) => void;
+} | {
+    /**
+     * Button sourced from a registered action by id — label / icon /
+     * hotkey / pressed (`checked`) / disabled (`predicate`) all come from
+     * `defaultActionRegistry`. The registry-driven way to place a built-in
+     * (mode-*, undo, redo, tool-lock, …) on the toolbar.
+     */
+    readonly kind: "action-ref";
+    readonly id: string;
+} | {
+    readonly kind: "divider";
+} | {
+    readonly kind: "undo";
+    readonly label?: ReactNode;
+} | {
+    readonly kind: "redo";
+    readonly label?: ReactNode;
+} | {
+    readonly kind: "zoom";
+} | {
+    readonly kind: "zoom-in";
+    readonly label?: ReactNode;
+} | {
+    readonly kind: "zoom-out";
+    readonly label?: ReactNode;
+} | {
+    readonly kind: "zoom-reset";
+    readonly label?: ReactNode;
+} | {
+    readonly kind: "zoom-fit";
+    readonly label?: ReactNode;
+} | {
+    readonly kind: "zoom-display";
+} | {
+    /**
+     * Tool-lock toggle. Renders a pressed-when-locked button; click flips
+     * `editor.toolLocked`. When locked, draw modes (rectangle / ellipse /
+     * edge / brush) persist after each create instead of reverting to
+     * select.
+     */
+    readonly kind: "tool-lock";
+    readonly label?: ReactNode;
+    readonly title?: string;
+};
+/**
+ * Open an OS file picker for image(s) and insert them at the viewport
+ * centre via the editor's file-drop pipeline (same path as drag-and-drop,
+ * so sizing / GIF animation / Scene.files registration all apply).
+ * Multi-select supported — each file dispatched independently.
+ *
+ * Lives in the UI layer rather than the L2 `state` package because it
+ * touches the DOM (`<input type=file>`). Exported so hosts can wire it to
+ * a hotkey or a custom button.
+ */
+export declare const openImageFilePicker: (editor: Editor) => void;
+/** Convenience default — modes + tool-lock + undo/redo + zoom widget. */
+export declare const DEFAULT_TOOLBAR: readonly ToolbarItem[];
+/**
+ * Creation-tool set for the vertical left dock. Just the creation tools +
+ * the tool-lock toggle — no undo/redo/zoom (those live in the menu /
+ * bottom-left). Hosts prepend their own leading items (e.g. a
+ * templates-library toggle) and render with
+ * `<Toolbar orientation="vertical" />`.
+ */
+export declare const DEFAULT_VERTICAL_TOOLBAR: readonly ToolbarItem[];
+export interface ToolbarProps {
+    readonly items?: readonly ToolbarItem[];
+    readonly style?: CSSProperties;
+    readonly className?: string;
+    /**
+     * Lay the toolbar out as a horizontal row (default) or a vertical
+     * column (the left creation dock). Vertical flips the button-group
+     * flex direction and draws horizontal dividers.
+     */
+    readonly orientation?: "horizontal" | "vertical";
+}
+export declare const Toolbar: ({ items, style, className, orientation, }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Pressable tool-lock affordance. Reads `editor.toolLocked` reactively so
+ * the active state stays in sync when the user toggles via hotkey or
+ * context menu.
+ */
+export declare const ToolLockButton: ({ label, title, }: {
+    readonly label?: ReactNode;
+    readonly title?: string;
+}) => import("react/jsx-runtime").JSX.Element;
+export interface ZoomButtonProps {
+    readonly label?: ReactNode;
+    readonly title?: string;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+/** "−" — calls `editor.zoomOut()`. */
+export declare const ZoomOutButton: ({ label, title, className, style, }: ZoomButtonProps) => import("react/jsx-runtime").JSX.Element;
+/** "+" — calls `editor.zoomIn()`. */
+export declare const ZoomInButton: ({ label, title, className, style, }: ZoomButtonProps) => import("react/jsx-runtime").JSX.Element;
+/** "100%" / "Reset" — calls `editor.resetZoom()`. */
+export declare const ResetZoomButton: ({ label, title, className, style, }: ZoomButtonProps) => import("react/jsx-runtime").JSX.Element;
+/** "Fit" — calls `editor.zoomToFit()`. */
+export declare const ZoomToFitButton: ({ label, title, className, style, }: ZoomButtonProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Live zoom percent. Clicks reset zoom to 100% — same UX as the percent
+ * button in `ZoomWidget`.
+ */
+export declare const ZoomDisplay: ({ className, style }: {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Pre-composed inline zoom widget: − / current % / + / Fit. Equivalent
+ * to laying the four standalone buttons + display in a row.
+ */
+export declare const ZoomWidget: ({ className, style }: {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Floating zoom controls — bottom-right cluster with rounded shadow
+ * chrome. Drops the widget into a corner so the toolbar stays free for
+ * tools. Hosts that need a different position pass `style`.
+ */
+export declare const FloatingZoomControls: ({ className, style, }: {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/toolbar.d.ts.map

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