@oh-just-another/react-ui 0.57.0

package/dist/diagram-root.d.ts

@@ -0,0 +1,70 @@
+import { type CSSProperties, type ReactNode } from "react";
+import { type RendererBackend } from "@oh-just-another/renderer-canvas";
+import { Editor, type Mode } from "@oh-just-another/state";
+import type { Rasterizer, TextShaper } from "@oh-just-another/renderer-core";
+import type { Scene } from "@oh-just-another/scene";
+export interface DiagramRootProps {
+    readonly initialScene: Scene;
+    readonly initialMode?: Mode;
+    readonly children: ReactNode;
+    /** Called once the editor is ready (after a `<DiagramSurface>` mounts). */
+    readonly onReady?: (editor: Editor) => void;
+    /** Skip the implicit `installBuiltinRenderers()` call. */
+    readonly skipInstallRenderers?: boolean;
+    /**
+     * Renderer backend. `"canvas2d"` (default) is the always-safe path;
+     * `"webgl2"` and `"offscreen"` are opt-in and require host support
+     * (the demo wires a switcher to try each at runtime).
+     *
+     * Changing this prop after mount **recreates** the editor and
+     * surface — the host should keep the value stable except when the
+     * user explicitly switches backend.
+     */
+    readonly renderer?: RendererBackend;
+    /**
+     * Worker factory for the `offscreen` backend. Hosts must provide
+     * a function that returns a fresh `Worker` instance pointing at
+     * `@oh-just-another/renderer-canvas`'s `render-worker.ts`. The factory
+     * is bundler-specific (Vite vs webpack vs Rollup all spell the
+     * URL differently), so the kernel never ships a default.
+     */
+    readonly workerFactory?: () => Worker;
+    /**
+     * Pre-loaded WASM text shaper (or any `TextShaper` impl).
+     * Forwarded straight into `EditorOptions.textShaper` so the
+     * built-in `drawText` renderer uses it for wrap measurements.
+     * Pass `WasmTextShaper.loadBundled()` (await first!) from
+     * `@oh-just-another/text-wasm`.
+     */
+    readonly textShaper?: TextShaper;
+    /**
+     * Pre-loaded WASM rasterizer. Forwarded into the editor for
+     * hosts that want path-heavy code to go through WASM bezier
+     * flatten / stroke-to-fill.
+     */
+    readonly rasterizer?: Rasterizer;
+}
+export declare const DiagramRoot: ({ initialScene, initialMode, children, onReady, skipInstallRenderers, renderer, workerFactory, textShaper, rasterizer, }: DiagramRootProps) => import("react/jsx-runtime").JSX.Element;
+export interface DiagramSurfaceProps {
+    readonly style?: CSSProperties;
+    readonly className?: string;
+    /**
+     * Accessible name for the canvas region — read out by screen readers
+     * and shown as the visible focus-ring tooltip. Defaults to
+     * `"Diagram canvas"`. Override per-app to give context (e.g. the
+     * document title).
+     */
+    readonly ariaLabel?: string;
+}
+/**
+ * Mounts the canvas host DOM where it is placed in the tree. Must live
+ * inside a `<DiagramRoot>`. Renders a plain `<div>` and registers it with
+ * the root; the root then creates the editor + `LayeredCanvas` against it.
+ *
+ * The surface is `tabIndex=0` + `role="application"` so keyboard users
+ * can land on it via Tab and screen readers announce it as an interactive
+ * canvas (the contents are non-DOM). Hosts that want a different
+ * accessible name pass `ariaLabel`.
+ */
+export declare const DiagramSurface: ({ style, className, ariaLabel }: DiagramSurfaceProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=diagram-root.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diagram-root.d.ts","sourceRoot":"","sources":["../src/diagram-root.tsx"],"names":[],"mappings":"AAAA,OAAO,EAQL,KAAK,aAAa,EAClB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAIL,KAAK,eAAe,EACrB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAsB,KAAK,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAuBpD,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,YAAY,EAAE,KAAK,CAAC;IAC7B,QAAQ,CAAC,WAAW,CAAC,EAAE,IAAI,CAAC;IAC5B,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAC;IAC7B,2EAA2E;IAC3E,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,0DAA0D;IAC1D,QAAQ,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IACxC;;;;;;;;OAQG;IACH,QAAQ,CAAC,QAAQ,CAAC,EAAE,eAAe,CAAC;IACpC;;;;;;OAMG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,MAAM,MAAM,CAAC;IACtC;;;;;;OAMG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,UAAU,CAAC,EAAE,UAAU,CAAC;CAClC;AAED,eAAO,MAAM,WAAW,GAAI,0HAUzB,gBAAgB,4CAuIlB,CAAC;AAmCF,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B;;;;;OAKG;IACH,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,GAAI,iCAAiC,mBAAmB,4CA2ClF,CAAC"}

package/dist/diagram-root.js

@@ -0,0 +1,180 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { createLayeredSurfaceWithFallback, installBuiltinRenderers, } from "@oh-just-another/renderer-canvas";
+import { Editor } from "@oh-just-another/state";
+import { DiagramEditorBridge } from "./context.js";
+import { ContextMenuControllerProvider } from "./context-menu-controller.js";
+const RegisterSurfaceContext = createContext(null);
+export const DiagramRoot = ({ initialScene, initialMode, children, onReady, skipInstallRenderers, renderer = "canvas2d", workerFactory, textShaper, rasterizer, }) => {
+    const [editor, setEditor] = useState(null);
+    const editorRef = useRef(null);
+    const surfaceRef = useRef(null);
+    const observerRef = useRef(null);
+    const hostRef = useRef(null);
+    const unsubscribeRef = useRef(null);
+    // The factory ref keeps `registerSurface`'s deps stable while
+    // still letting renderer/backend reactivity below see the latest
+    // values when it re-mounts the surface.
+    const rendererRef = useRef(renderer);
+    const workerFactoryRef = useRef(workerFactory);
+    const textShaperRef = useRef(textShaper);
+    const rasterizerRef = useRef(rasterizer);
+    rendererRef.current = renderer;
+    workerFactoryRef.current = workerFactory;
+    textShaperRef.current = textShaper;
+    rasterizerRef.current = rasterizer;
+    const mountSurface = useCallback((host) => {
+        if (!skipInstallRenderers)
+            installBuiltinRenderers();
+        const { width, height } = host.getBoundingClientRect();
+        const { surface, effectiveBackend } = createLayeredSurfaceWithFallback(host, width, height, {
+            backend: rendererRef.current,
+            ...(workerFactoryRef.current ? { workerFactory: workerFactoryRef.current } : {}),
+        }, (requested, err) => {
+            // Backend unavailable (no WebGL2 / OffscreenCanvas / context
+            // limit hit). The fallback already returned a canvas2d
+            // surface; log so dev tools surface the reason. Hosts that
+            // want a toast can read `editor.host.dataset.effectiveBackend`.
+            console.warn(`[DiagramRoot] ${requested} renderer unavailable, falling back to canvas2d:`, err);
+        });
+        host.dataset.effectiveBackend = effectiveBackend;
+        const opts = {
+            host,
+            mainTarget: surface.get("main"),
+            overlayTarget: surface.get("overlay"),
+            backgroundTarget: surface.get("background"),
+            // Flush deferred backends (WebGL2 / OffscreenCanvas) right after each
+            // paint, on the same rAF tick. Must NOT be a notify-microtask: notify
+            // fires before the rAF render, which would leave the surface one frame
+            // behind.
+            onAfterRender: () => surfaceRef.current?.present(),
+            initialScene,
+            ...(initialMode !== undefined ? { initialMode } : {}),
+            ...(textShaperRef.current ? { textShaper: textShaperRef.current } : {}),
+            ...(rasterizerRef.current ? { rasterizer: rasterizerRef.current } : {}),
+        };
+        const e = new Editor(opts);
+        e.setViewportSize(width, height);
+        surfaceRef.current = surface;
+        editorRef.current = e;
+        setEditor(e);
+        onReady?.(e);
+        // Deferred backends are flushed via the editor's `onAfterRender` hook
+        // (set in EditorOptions above) so present() runs right after the paint
+        // on the same rAF tick. Present once now for the initial frame.
+        surface.present();
+        const ro = new ResizeObserver(() => {
+            const next = host.getBoundingClientRect();
+            surface.resize(next.width, next.height);
+            e.setViewportSize(next.width, next.height);
+            e.setMode(e.mode); // forces a re-render at the new size
+        });
+        ro.observe(host);
+        observerRef.current = ro;
+    }, []);
+    const teardownSurface = useCallback(() => {
+        observerRef.current?.disconnect();
+        observerRef.current = null;
+        unsubscribeRef.current?.();
+        unsubscribeRef.current = null;
+        editorRef.current?.dispose();
+        editorRef.current = null;
+        surfaceRef.current?.dispose();
+        surfaceRef.current = null;
+    }, []);
+    const registerSurface = useCallback((host) => {
+        teardownSurface();
+        hostRef.current = host;
+        if (!host) {
+            setEditor(null);
+            return;
+        }
+        mountSurface(host);
+    }, [mountSurface, teardownSurface]);
+    // Re-mount the surface when the host swaps backends at runtime.
+    // The first mount is driven by `registerSurface`; subsequent
+    // backend changes need an explicit tear-down + remount because
+    // `LayeredSurface` ownership is per-backend.
+    useEffect(() => {
+        const host = hostRef.current;
+        if (!host)
+            return;
+        teardownSurface();
+        mountSurface(host);
+    }, [renderer, mountSurface, teardownSurface]);
+    // Make sure the editor is disposed if `<DiagramRoot>` unmounts even if
+    // no surface registered an unmount first (defensive).
+    useLayoutEffect(() => {
+        return () => {
+            teardownSurface();
+            hostRef.current = null;
+        };
+    }, [teardownSurface]);
+    return (_jsx(DiagramEditorBridge.Provider, { value: editor, children: _jsx(RegisterSurfaceContext.Provider, { value: registerSurface, children: _jsxs(ContextMenuControllerProvider, { children: [children, _jsx(LiveRegion, { editor: editor })] }) }) }));
+};
+/**
+ * Hidden `aria-live="polite"` region that pipes `editor.onAnnounce`
+ * messages to assistive tech. Rendered automatically by every
+ * `<DiagramRoot>`; visually hidden but readable by screen readers.
+ */
+const LiveRegion = ({ editor }) => {
+    const [message, setMessage] = useState("");
+    useEffect(() => {
+        if (!editor)
+            return undefined;
+        return editor.onAnnounce(setMessage);
+    }, [editor]);
+    return (_jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", style: {
+            position: "absolute",
+            width: 1,
+            height: 1,
+            padding: 0,
+            margin: -1,
+            overflow: "hidden",
+            clip: "rect(0,0,0,0)",
+            whiteSpace: "nowrap",
+            border: 0,
+        }, children: message }));
+};
+/**
+ * Mounts the canvas host DOM where it is placed in the tree. Must live
+ * inside a `<DiagramRoot>`. Renders a plain `<div>` and registers it with
+ * the root; the root then creates the editor + `LayeredCanvas` against it.
+ *
+ * The surface is `tabIndex=0` + `role="application"` so keyboard users
+ * can land on it via Tab and screen readers announce it as an interactive
+ * canvas (the contents are non-DOM). Hosts that want a different
+ * accessible name pass `ariaLabel`.
+ */
+export const DiagramSurface = ({ style, className, ariaLabel }) => {
+    const register = useContext(RegisterSurfaceContext);
+    const ref = useRef(null);
+    useLayoutEffect(() => {
+        if (!register)
+            return undefined;
+        register(ref.current);
+        return () => { register(null); };
+    }, [register]);
+    if (!register) {
+        throw new Error("@oh-just-another/react-ui: <DiagramSurface> rendered outside <DiagramRoot>.");
+    }
+    return (_jsx("div", { ref: ref, className: className, role: "application", tabIndex: 0, "aria-label": ariaLabel ?? "Diagram canvas", style: {
+            position: "relative",
+            width: "100%",
+            height: "100%",
+            overflow: "hidden",
+            touchAction: "none",
+            userSelect: "none",
+            // Visible focus ring — UA-default for `outline` is sometimes
+            // suppressed by parent `*:focus { outline: none }` rules; we
+            // declare an explicit one so keyboard users always see focus.
+            outline: "none",
+            ...style,
+        }, onFocus: (ev) => {
+            ev.currentTarget.style.outline = "2px solid var(--accent, #1a73e8)";
+            ev.currentTarget.style.outlineOffset = "-2px";
+        }, onBlur: (ev) => {
+            ev.currentTarget.style.outline = "none";
+        } }));
+};
+//# sourceMappingURL=diagram-root.js.map

package/dist/diagram-root.js.map

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

package/dist/diff-panel.d.ts

@@ -0,0 +1,25 @@
+import { type CSSProperties } from "react";
+import { type Scene } from "@oh-just-another/scene";
+/**
+ * Side-by-side scene comparison. Renders two snapshots to SVG via the
+ * headless renderer and overlays diff markers:
+ *
+ *   green box  — added in `right`
+ *   red box    — removed (only in `left`)
+ *   yellow box — modified (in both, different ref)
+ *
+ * Pure presentation — receives two `Scene` values from the host
+ * (typically a `VersionStore` snapshot pair) and never touches the
+ * live editor. Hosts pick which snapshots to compare via the
+ * VersionPanel UI; this component is the visual.
+ */
+export interface DiffPanelProps {
+    readonly left: Scene;
+    readonly right: Scene;
+    readonly leftLabel?: string;
+    readonly rightLabel?: string;
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare const DiffPanel: ({ left, right, leftLabel, rightLabel, className, style, }: DiffPanelProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=diff-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"diff-panel.d.ts","sourceRoot":"","sources":["../src/diff-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAW,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAGL,KAAK,KAAK,EAEX,MAAM,wBAAwB,CAAC;AAIhC;;;;;;;;;;;;GAYG;AAEH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC;IACrB,QAAQ,CAAC,KAAK,EAAE,KAAK,CAAC;IACtB,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AAKD,eAAO,MAAM,SAAS,GAAI,2DAOvB,cAAc,4CA0BhB,CAAC"}

package/dist/diff-panel.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { diffSceneElements, getElementWorldBounds, } from "@oh-just-another/scene";
+import { renderSceneToSvg } from "@oh-just-another/renderer-svg";
+import { DIFF_COLORS } from "@oh-just-another/tokens";
+const PANEL_WIDTH = 480;
+const PANEL_HEIGHT = 360;
+export const DiffPanel = ({ left, right, leftLabel = "Before", rightLabel = "After", className, style, }) => {
+    const diff = useMemo(() => diffSceneElements(left, right), [left, right]);
+    const leftSvg = useMemo(() => renderSceneToSvg(left, { width: PANEL_WIDTH, height: PANEL_HEIGHT }), [left]);
+    const rightSvg = useMemo(() => renderSceneToSvg(right, { width: PANEL_WIDTH, height: PANEL_HEIGHT }), [right]);
+    const container = {
+        display: "flex",
+        gap: 12,
+        padding: 12,
+        background: "var(--panel, #161616)",
+        color: "var(--text, #ddd)",
+        ...style,
+    };
+    return (_jsxs("div", { className: className, style: container, children: [_jsx(SideView, { label: leftLabel, svg: leftSvg, scene: left, diff: diff, side: "left" }), _jsx(SideView, { label: rightLabel, svg: rightSvg, scene: right, diff: diff, side: "right" })] }));
+};
+const SideView = ({ label, svg, scene, diff, side, }) => {
+    // Which markers to draw on this side:
+    //   - left side highlights `removed` (red) — shapes that existed
+    //     in `prev` but not in `next`.
+    //   - right side highlights `added` (green).
+    //   - both sides highlight `modified` (yellow) using each side's
+    //     own bounds — so the user sees the before AND after position
+    //     of a moved shape.
+    const overlays = useMemo(() => {
+        const out = [];
+        const palette = DIFF_COLORS;
+        if (side === "left") {
+            for (const id of diff.removed) {
+                const s = scene.elements.get(id);
+                if (s)
+                    out.push({ id, color: palette.removed, bounds: getElementWorldBounds(s) });
+            }
+        }
+        else {
+            for (const id of diff.added) {
+                const s = scene.elements.get(id);
+                if (s)
+                    out.push({ id, color: palette.added, bounds: getElementWorldBounds(s) });
+            }
+        }
+        for (const id of diff.modified) {
+            const s = scene.elements.get(id);
+            if (s)
+                out.push({ id, color: palette.modified, bounds: getElementWorldBounds(s) });
+        }
+        return out;
+    }, [scene, diff, side]);
+    const frameStyle = {
+        flex: 1,
+        display: "flex",
+        flexDirection: "column",
+        gap: 4,
+        minWidth: 0,
+    };
+    const figureStyle = {
+        position: "relative",
+        width: PANEL_WIDTH,
+        height: PANEL_HEIGHT,
+        background: "var(--surface, #fff)",
+        border: "1px solid var(--border, #2a2a2a)",
+        borderRadius: 4,
+        overflow: "hidden",
+    };
+    return (_jsxs("section", { style: frameStyle, children: [_jsx("header", { style: {
+                    fontSize: 11,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    color: "var(--muted, #888)",
+                }, children: label }), _jsxs("div", { style: figureStyle, children: [_jsx("div", { dangerouslySetInnerHTML: { __html: svg }, style: { position: "absolute", inset: 0 } }), _jsx("svg", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, viewBox: `0 0 ${PANEL_WIDTH} ${PANEL_HEIGHT}`, children: overlays.map((m) => (_jsx("rect", { x: m.bounds.x, y: m.bounds.y, width: m.bounds.width, height: m.bounds.height, fill: "none", stroke: m.color, strokeWidth: 2, strokeDasharray: "4,3" }, `${side}-${m.id}`))) })] })] }));
+};
+//# sourceMappingURL=diff-panel.js.map

package/dist/diff-panel.js.map

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

package/dist/edge-style-panel.d.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from "react";
+/**
+ * Mini-panel that surfaces the most-edited properties of the
+ * currently-selected edge: routing strategy, arrowheads, stroke
+ * style (color / width / dash), and label text. Renders nothing
+ * when no edge is selected — host can put it inside a sidebar slot
+ * unconditionally.
+ *
+ * Field semantics map 1:1 to the scene `Link` shape (routing,
+ * arrowheads.{from,to}, style.{stroke,strokeWidth,dashArray},
+ * label.text). Edits go through `Editor.updateSelectedLink`, which
+ * commits one history step per change.
+ */
+export interface LinkStylePanelProps {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+}
+export declare const LinkStylePanel: ({ className, style }: LinkStylePanelProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=edge-style-panel.d.ts.map

package/dist/edge-style-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"edge-style-panel.d.ts","sourceRoot":"","sources":["../src/edge-style-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAI3C;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;CAChC;AA6BD,eAAO,MAAM,cAAc,GAAI,sBAAsB,mBAAmB,mDAyLvE,CAAC"}

package/dist/edge-style-panel.js

@@ -0,0 +1,120 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useDiagramOptional, useScene, useSelectedLink } from "./hooks.js";
+const ARROW_OPTIONS = [
+    { value: "none", label: "None" },
+    { value: "arrow", label: "Arrow" },
+    { value: "triangle", label: "Triangle" },
+    { value: "diamond", label: "Diamond" },
+    { value: "circle", label: "Circle" },
+];
+const ROUTING_OPTIONS = [
+    { value: "straight", label: "Straight" },
+    { value: "orthogonal", label: "Elbow" },
+    { value: "bezier", label: "Curved" },
+];
+const DASH_OPTIONS = [
+    { value: "solid", label: "Solid", array: null },
+    { value: "dashed", label: "Dashed", array: [6, 4] },
+    { value: "dotted", label: "Dotted", array: [2, 4] },
+];
+const dashKey = (arr) => {
+    if (!arr || arr.length === 0)
+        return "solid";
+    if (arr.length === 2 && arr[0] === 6 && arr[1] === 4)
+        return "dashed";
+    if (arr.length === 2 && arr[0] === 2 && arr[1] === 4)
+        return "dotted";
+    return "custom";
+};
+export const LinkStylePanel = ({ className, style }) => {
+    const editor = useDiagramOptional();
+    const scene = useScene();
+    const selectedLinkId = useSelectedLink();
+    const edge = selectedLinkId !== null ? scene.links.get(selectedLinkId) : undefined;
+    if (!editor || !edge)
+        return null;
+    const containerStyle = {
+        padding: 12,
+        display: "flex",
+        flexDirection: "column",
+        gap: 10,
+        background: "var(--panel, #161616)",
+        color: "var(--text, #ddd)",
+        fontSize: 12,
+        minWidth: 220,
+        ...style,
+    };
+    const setArrowhead = (side, value) => {
+        editor.updateSelectedLink((e) => ({
+            ...e,
+            arrowheads: { ...(e.arrowheads ?? {}), [side]: value === "none" ? undefined : value },
+        }));
+    };
+    const setRouting = (routing) => {
+        editor.updateSelectedLink((e) => ({ ...e, routing }));
+    };
+    const setStroke = (stroke) => {
+        editor.updateSelectedLink((e) => ({ ...e, style: { ...e.style, stroke } }));
+    };
+    const setStrokeWidth = (w) => {
+        editor.updateSelectedLink((e) => ({ ...e, style: { ...e.style, strokeWidth: w } }));
+    };
+    const setDash = (kind) => {
+        const opt = DASH_OPTIONS.find((o) => o.value === kind);
+        editor.updateSelectedLink((e) => {
+            if (!opt?.array) {
+                // "Solid" — strip the field entirely so the renderer treats
+                // the stroke as continuous instead of falling through with
+                // an empty-array dash pattern.
+                const { dashArray: _d, ...restStyle } = e.style;
+                void _d;
+                return { ...e, style: restStyle };
+            }
+            return { ...e, style: { ...e.style, dashArray: opt.array } };
+        });
+    };
+    const setLabel = (text) => {
+        editor.updateSelectedLink((e) => {
+            if (text === "") {
+                // Empty string removes the label entirely.
+                const { label: _l, ...rest } = e;
+                void _l;
+                return rest;
+            }
+            return { ...e, label: { ...(e.label ?? {}), text } };
+        });
+    };
+    return (_jsxs("aside", { className: className, style: containerStyle, children: [_jsx("h2", { style: {
+                    margin: 0,
+                    fontSize: 11,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    color: "var(--muted, #888)",
+                }, children: "Link" }), _jsx(Row, { label: "Kind", children: _jsxs("select", { value: edge.lineKind ?? "line", onChange: (ev) => {
+                        editor.updateSelectedLink((e) => ({
+                            ...e,
+                            lineKind: ev.target.value === "block-arrow" ? "block-arrow" : "line",
+                        }));
+                    }, style: selectStyle, children: [_jsx("option", { value: "line", children: "Line" }), _jsx("option", { value: "block-arrow", children: "Block arrow" })] }) }), _jsx(Row, { label: "Routing", children: _jsx("select", { value: edge.routing ?? "straight", onChange: (ev) => { setRouting(ev.target.value); }, style: selectStyle, children: ROUTING_OPTIONS.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }) }), _jsx(Row, { label: "Start", children: _jsx("select", { value: edge.arrowheads?.from ?? "none", onChange: (ev) => { setArrowhead("from", ev.target.value); }, style: selectStyle, children: ARROW_OPTIONS.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }) }), _jsx(Row, { label: "End", children: _jsx("select", { value: edge.arrowheads?.to ?? "none", onChange: (ev) => { setArrowhead("to", ev.target.value); }, style: selectStyle, children: ARROW_OPTIONS.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }) }), _jsx(Row, { label: "Color", children: _jsx("input", { type: "color", value: normaliseColor(edge.style.stroke), onChange: (ev) => { setStroke(ev.target.value); }, style: { width: 36, height: 24, border: "none", background: "none", padding: 0 } }) }), _jsx(Row, { label: "Width", children: _jsx("input", { type: "number", min: 0.5, max: 20, step: 0.5, value: edge.style.strokeWidth ?? 1.5, onChange: (ev) => { setStrokeWidth(Number(ev.target.value) || 1); }, style: { ...selectStyle, width: 72 } }) }), _jsx(Row, { label: "Dash", children: _jsx("select", { value: dashKey(edge.style.dashArray), onChange: (ev) => { setDash(ev.target.value); }, style: selectStyle, children: DASH_OPTIONS.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }) }), _jsx(Row, { label: "Label", children: _jsx("input", { type: "text", placeholder: "(no label)", value: edge.label?.text ?? "", onChange: (ev) => { setLabel(ev.target.value); }, style: { ...selectStyle, flex: 1 } }) })] }));
+};
+const selectStyle = {
+    background: "var(--button-bg, #1f1f1f)",
+    color: "var(--text, #ddd)",
+    border: "1px solid var(--border, #2a2a2a)",
+    borderRadius: 4,
+    padding: "4px 8px",
+    font: "inherit",
+    fontSize: 12,
+};
+const Row = ({ label, children }) => (_jsxs("label", { style: { display: "flex", alignItems: "center", gap: 8, justifyContent: "space-between" }, children: [_jsx("span", { style: { color: "var(--muted, #888)" }, children: label }), children] }));
+// Accept either #rrggbb (browser color picker) or any other CSS value.
+// The color picker can't display non-hex values, so we coerce to a
+// neutral grey if the current stroke is `null` or non-hex.
+const normaliseColor = (s) => {
+    if (typeof s !== "string")
+        return "#444444";
+    if (/^#[0-9a-f]{6}$/i.test(s))
+        return s;
+    return "#444444";
+};
+//# sourceMappingURL=edge-style-panel.js.map

package/dist/edge-style-panel.js.map

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

package/dist/frame-name-editor-overlay.d.ts

@@ -0,0 +1,13 @@
+/**
+ * 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 declare const FrameNameEditorOverlay: () => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=frame-name-editor-overlay.d.ts.map

package/dist/frame-name-editor-overlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frame-name-editor-overlay.d.ts","sourceRoot":"","sources":["../src/frame-name-editor-overlay.tsx"],"names":[],"mappings":"AAUA;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,sDAmFlC,CAAC"}