@oh-just-another/react-ui 0.57.0

package/dist/property-panel.js

@@ -0,0 +1,728 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { AlignCenter, AlignLeft, AlignRight, Bold, CaseSensitive, ChevronsDown, ChevronsUp, Copy as CopyIcon, Group as GroupIcon, Italic, Link as LinkIcon, Minus, MoreHorizontal, MoreVertical, MoveDown, MoveRight, MoveUp, Spline, Square, SquareDashed, SquareDot, Strikethrough, Trash2, Underline, Ungroup as UngroupIcon, Waypoints, } from "lucide-react";
+import { isGroup, } from "@oh-just-another/scene";
+import { useDiagramOptional, useScene, useSelectedLink, useSelection } from "./hooks.js";
+import { useContextMenuController } from "./context-menu-controller.js";
+import { ColorSwatchPicker } from "./color-swatch-picker.js";
+import { Popover } from "./popover.js";
+import { SegmentedControl } from "./segmented-control.js";
+import { Slider } from "./slider.js";
+import { TEXT_FONT_SIZE_MAX, TEXT_FONT_SIZE_MIN, TEXT_FONT_SIZE_PRESETS, TEXT_FONT_STACKS, } from "./constants.js";
+export const PropertyPanel = ({ style, className, mobile = false }) => {
+    const selection = useSelection();
+    const selectedLinkId = useSelectedLink();
+    const scene = useScene();
+    // Dispatcher: edge wins only when no shape is selected — if both
+    // happen to be set (rare), the shape panel is more useful. Each branch
+    // splits its controls into `primary` (always visible) and `overflow`
+    // (behind the ⋮ on mobile; inline on desktop).
+    if (selection.size > 0) {
+        const shapes = [...selection]
+            .map((id) => scene.elements.get(id))
+            .filter((s) => s !== undefined);
+        if (shapes.length === 0)
+            return null;
+        const allText = shapes.every((s) => s.type === "text");
+        const allImage = shapes.every((s) => s.type === "image");
+        const allFrame = shapes.every((s) => s.type === "frame");
+        const primary = [];
+        const overflow = [];
+        if (allFrame) {
+            // A frame's border is fixed chrome (dashed outline); only its body fill
+            // is user-configurable. No stroke / width / dash / roundness controls.
+            primary.push(_jsx(FillControl, { shapes: shapes }, "fill"));
+        }
+        else if (allText) {
+            primary.push(_jsx(FontSizeControl, { shapes: shapes }, "size"), _jsx(ColorOpacityControl, { shapes: shapes }, "color"), _jsx(TextAlignControl, { shapes: shapes }, "align"));
+            overflow.push(_jsx(FontFamilyControl, { shapes: shapes }, "family"), _jsx(TextDecorationControl, { shapes: shapes }, "decor"));
+        }
+        else if (allImage) {
+            // An image's pixels are the content — fill/stroke make no sense.
+            primary.push(_jsx(OpacityControl, { shapes: shapes }, "opacity"));
+        }
+        else {
+            primary.push(_jsx(FillControl, { shapes: shapes }, "fill"), _jsx(StrokeControl, { shapes: shapes }, "stroke"), _jsx(StrokeWidthControl, { shapes: shapes }, "width"));
+            overflow.push(_jsx(StrokeStyleControl, { shapes: shapes }, "dash"), _jsx(RoundnessControl, { shapes: shapes }, "round"), _jsx(OpacityControl, { shapes: shapes }, "opacity"));
+        }
+        // Common trailing controls for every shape type.
+        overflow.push(_jsx(ZOrderControl, {}, "z"), _jsx(LinkControl, { shapes: shapes }, "link"), _jsx(ActionsControl, { shapes: shapes }, "actions"), _jsx(MoreButton, {}, "more"));
+        return (_jsx(PanelShell, { mobile: mobile, primary: primary, overflow: overflow, className: className, style: style }));
+    }
+    if (selectedLinkId !== null) {
+        const edge = scene.links.get(selectedLinkId);
+        if (!edge)
+            return null;
+        const primary = [
+            _jsx(LinkStrokeColorControl, { edge: edge }, "color"),
+            _jsx(LinkStrokeWidthControl, { edge: edge }, "width"),
+            _jsx(LinkArrowheadControl, { edge: edge, side: "to" }, "arrow-to"),
+        ];
+        const overflow = [
+            _jsx(LinkStrokeStyleControl, { edge: edge }, "dash"),
+            _jsx(LinkRoutingControl, { edge: edge }, "routing"),
+            _jsx(LinkLineKindControl, { edge: edge }, "kind"),
+            _jsx(LinkArrowheadControl, { edge: edge, side: "from" }, "arrow-from"),
+            _jsx(LinkAutoRouteControl, { edge: edge }, "auto"),
+            _jsx(LinkDeleteControl, {}, "delete"),
+            _jsx(MoreButton, {}, "more"),
+        ];
+        return (_jsx(PanelShell, { mobile: mobile, primary: primary, overflow: overflow, className: className, style: style }));
+    }
+    return null;
+};
+/**
+ * Lays out the primary / overflow control groups. Desktop = one floating
+ * pill row (primary · divider · overflow). Mobile = a primary row with a
+ * vertical-dots ⋮ that expands a wrapped overflow grid below it.
+ */
+const PanelShell = ({ mobile, primary, overflow, className, style, }) => {
+    const [expanded, setExpanded] = useState(false);
+    const panelRef = useRef(null);
+    // Collapse the expanded overflow sheet on a tap outside the panel.
+    // The ⋮ button and the grabber collapse it directly; this covers taps
+    // on the canvas / elsewhere.
+    useEffect(() => {
+        if (!mobile || !expanded)
+            return undefined;
+        const onDown = (e) => {
+            const el = panelRef.current;
+            if (el && e.target instanceof Node && !el.contains(e.target))
+                setExpanded(false);
+        };
+        // `capture` so we see the tap even if something stops propagation.
+        document.addEventListener("pointerdown", onDown, true);
+        return () => {
+            document.removeEventListener("pointerdown", onDown, true);
+        };
+    }, [mobile, expanded]);
+    if (!mobile) {
+        return (_jsxs("div", { className: `du-sel-panel ${className ?? ""}`.trim(), style: style, children: [primary, overflow.length > 0 ? _jsx(Divider, {}) : null, overflow] }));
+    }
+    return (_jsxs("div", { ref: panelRef, className: `du-sel-panel du-sel-panel-mobile ${className ?? ""}`.trim(), style: style, children: [_jsxs("div", { className: "du-sel-mobile-row", children: [_jsx("div", { className: "du-sel-mobile-primary", children: primary }), overflow.length > 0 ? (_jsx("button", { type: "button", className: `du-sel-icon-button du-sel-mobile-expand${expanded ? " is-active" : ""}`, "aria-expanded": expanded, "aria-label": expanded ? "Hide more properties" : "More properties", title: "More properties", onClick: () => {
+                            setExpanded((v) => !v);
+                        }, children: _jsx(MoreVertical, { size: 18, strokeWidth: 1.75, "aria-hidden": true }) })) : null] }), expanded && overflow.length > 0 ? (_jsx("div", { className: "du-sel-mobile-overflow", children: overflow })) : null] }));
+};
+/**
+ * Element link control. One trigger (chain icon, active when a link is
+ * set) opens a popover with a URL field plus Save / Open / Remove. Works
+ * for any shape — the href lives on `ElementBase`. The URL is normalised
+ * (`normalizeHref`: adds `https://`, `mailto:`, rejects `javascript:`)
+ * before storing. Multi-select applies to all.
+ */
+const LinkControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    const inputRef = useRef(null);
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const current = sharedString(shapes, (s) => s.href);
+    const hasLink = shapes.some((s) => Boolean(s.href));
+    const save = (raw) => {
+        editor.setLink(ids, raw);
+    };
+    return (_jsx(Popover, { ariaLabel: "Link", trigger: _jsx("button", { type: "button", className: `du-sel-icon-button${hasLink ? " is-active" : ""}`, title: "Link", "aria-label": "Link", children: _jsx(LinkIcon, { size: 14, strokeWidth: 1.75, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Link" }), _jsx("input", { ref: inputRef, className: "du-sel-link-input", type: "text", placeholder: "https://\u2026  \u00B7  name@mail", defaultValue: current ?? "", "aria-label": "Link URL", onKeyDown: (ev) => {
+                        if (ev.key === "Enter") {
+                            ev.preventDefault();
+                            save(ev.currentTarget.value);
+                        }
+                    } }), _jsxs("div", { style: { display: "flex", gap: 2 }, children: [_jsx("button", { type: "button", className: "du-sel-text-button", onClick: () => {
+                                save(inputRef.current?.value ?? "");
+                            }, children: "Save" }), hasLink ? (_jsx("button", { type: "button", className: "du-sel-text-button", onClick: () => {
+                                editor.openLink(current);
+                            }, children: "Open" })) : null, hasLink ? (_jsx("button", { type: "button", className: "du-sel-text-button", onClick: () => {
+                                editor.setLink(ids, null);
+                            }, children: "Remove" })) : null] })] }) }));
+};
+const MoreButton = () => {
+    const editor = useDiagramOptional();
+    const controller = useContextMenuController();
+    if (!editor || !controller)
+        return null;
+    return (_jsx("button", { type: "button", className: "du-sel-icon-button", title: "More actions", "aria-label": "More actions", onClick: (ev) => {
+            const rect = ev.currentTarget.getBoundingClientRect();
+            const screenPoint = { x: rect.left, y: rect.bottom + 4 };
+            const host = editor.hostElement;
+            const hostRect = host?.getBoundingClientRect();
+            const worldPoint = hostRect
+                ? editor.screenToWorld({
+                    x: screenPoint.x - hostRect.left,
+                    y: screenPoint.y - hostRect.top,
+                })
+                : { x: 0, y: 0 };
+            controller.open({ screenPoint, worldPoint });
+        }, children: _jsx(MoreHorizontal, { size: 14, strokeWidth: 1.75, "aria-hidden": true }) }));
+};
+// ---------------------------------------------------------------------------
+// Inline controls
+// ---------------------------------------------------------------------------
+/**
+ * Color trigger: a 24×24 square button with a colored fill plus an
+ * outer ring, opens the full swatch picker in a popover.
+ */
+const ColorTrigger = ({ label, color, onChange, ariaLabel, }) => (_jsx(Popover, { ariaLabel: ariaLabel, trigger: _jsx("button", { type: "button", className: "du-sel-color-trigger", title: label, "aria-label": ariaLabel, children: _jsx("span", { className: "du-sel-color-swatch", style: {
+                background: !color || color === "transparent"
+                    ? "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 6px 6px"
+                    : color,
+            } }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: label }), _jsx(ColorSwatchPicker, { value: color, onChange: onChange })] }) }));
+/**
+ * Combined color & opacity control — a single swatch trigger whose
+ * popover has both the palette and an opacity slider. Used for the text
+ * panel in place of separate Fill + Opacity triggers. Writes `fill` and
+ * `opacity` through `editor.updateStyle`.
+ */
+const ColorOpacityControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const color = sharedString(shapes, (s) => s.style.fill);
+    const opacity = sharedValue(shapes, (s) => s.style.opacity ?? 1);
+    const pct = opacity === null ? null : Math.round(opacity * 100);
+    const swatchBg = !color || color === "transparent"
+        ? "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 6px 6px"
+        : color;
+    return (_jsx(Popover, { ariaLabel: "Text color and opacity", trigger: _jsx("button", { type: "button", className: "du-sel-color-trigger", title: "Color & opacity", "aria-label": "Text color and opacity", children: _jsx("span", { className: "du-sel-color-swatch", style: { background: swatchBg, opacity: opacity ?? 1 } }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Color" }), _jsx(ColorSwatchPicker, { value: color, onChange: (v) => {
+                        editor.updateStyle(ids, { fill: v ?? "transparent" });
+                    } }), _jsx("header", { className: "du-sel-popover-label", children: "Opacity" }), _jsx(Slider, { value: pct, min: 0, max: 100, step: 5, ariaLabel: "Opacity", valueLabel: pct === null ? "—" : `${pct}%`, onChange: (v) => {
+                        editor.updateStyle(ids, { opacity: v / 100 });
+                    } })] }) }));
+};
+const FillControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor || !shapes.some(hasFill))
+        return null;
+    const value = sharedString(shapes, (s) => s.style.fill);
+    const ids = shapes.map((s) => s.id);
+    return (_jsx(ColorTrigger, { label: "Fill", ariaLabel: "Fill color", color: value, onChange: (v) => {
+            editor.updateStyle(ids, { fill: v ?? "transparent" });
+        } }));
+};
+// ---------------------------------------------------------------------------
+// Text controls — rendered only for a text-only selection (see the
+// dispatcher in `PropertyPanel`). `fontSize` / `fontFamily` are
+// top-level `TextElement` fields written via `editor.updateTextProps`;
+// `textAlign` / `textBaseline` are `TextStyle` fields written via
+// `editor.updateStyle`.
+// ---------------------------------------------------------------------------
+const FontSizeControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const value = sharedValue(shapes, 
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- cast asserts TextElement; non-text shapes lack fontSize at runtime
+    (s) => s.fontSize ?? null);
+    const presetValue = value !== null && TEXT_FONT_SIZE_PRESETS.some((p) => p.value === value) ? value : null;
+    return (_jsx(Popover, { ariaLabel: "Font size", trigger: _jsx("button", { type: "button", className: "du-sel-text-button", title: "Font size", "aria-label": `Font size ${value ?? "mixed"}`, children: value === null ? "—" : `${Math.round(value)}` }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Font size" }), _jsx(SegmentedControl, { ariaLabel: "Font size preset", value: presetValue, options: TEXT_FONT_SIZE_PRESETS.map((p) => ({
+                        value: p.value,
+                        label: p.label,
+                        icon: _jsx("span", { style: { fontSize: 11, fontWeight: 600 }, children: p.label }),
+                    })), onChange: (v) => {
+                        editor.updateTextProps(ids, { fontSize: v });
+                    } }), _jsx(Slider, { value: value, min: TEXT_FONT_SIZE_MIN, max: TEXT_FONT_SIZE_MAX, step: 1, ariaLabel: "Font size", valueLabel: value === null ? "—" : `${value}px`, onChange: (v) => {
+                        editor.updateTextProps(ids, { fontSize: v });
+                    } })] }) }));
+};
+const FontFamilyControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const value = sharedString(shapes, (s) => s.fontFamily);
+    const current = TEXT_FONT_STACKS.find((f) => f.value === value);
+    const label = value === null ? "Mixed" : (current?.label ?? "Custom");
+    return (_jsx(Popover, { ariaLabel: "Font family", trigger: _jsx("button", { type: "button", className: "du-sel-text-button", title: "Font family", "aria-label": `Font family ${label}`, style: value ? { fontFamily: value } : undefined, children: label }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Font family" }), TEXT_FONT_STACKS.map((f) => (_jsx("button", { type: "button", role: "menuitemradio", "aria-checked": f.value === value, className: `du-sel-menu-row${f.value === value ? " is-active" : ""}`, style: { fontFamily: f.value }, onClick: () => {
+                        editor.updateTextProps(ids, { fontFamily: f.value });
+                    }, children: f.label }, f.value)))] }) }));
+};
+const TextAlignControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const value = sharedValue(shapes, (s) => s.style.textAlign ?? "left");
+    return (_jsx(SegmentedControl, { ariaLabel: "Text alignment", value: value, options: [
+            { value: "left", label: "Left", icon: _jsx(AlignLeft, { size: 14, strokeWidth: 1.75 }) },
+            { value: "center", label: "Center", icon: _jsx(AlignCenter, { size: 14, strokeWidth: 1.75 }) },
+            { value: "right", label: "Right", icon: _jsx(AlignRight, { size: 14, strokeWidth: 1.75 }) },
+        ], onChange: (v) => {
+            editor.updateStyle(ids, { textAlign: v });
+        } }));
+};
+/**
+ * Bold / Italic / Underline / Strikethrough. One trigger (Aa) opens a
+ * popover with four independent toggles. Each writes through
+ * `editor.updateStyle`: bold→`fontWeight`, italic→`fontStyle`,
+ * underline/strikethrough→merged `textDecoration`. Active = every
+ * selected shape already has that decoration on.
+ */
+const TextDecorationControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const ids = shapes.map((s) => s.id);
+    const allBold = shapes.every((s) => s.style?.fontWeight === "bold");
+    const allItalic = shapes.every((s) => s.style?.fontStyle === "italic");
+    const allUnderline = shapes.every((s) => s.style?.textDecoration?.underline === true);
+    const allStrike = shapes.every((s) => s.style?.textDecoration?.strikethrough === true);
+    // Toggling underline/strikethrough must preserve the other flag per
+    // shape, so merge into each shape's current decoration individually.
+    const setDecoration = (key, on) => {
+        for (const s of shapes) {
+            const cur = s.style?.textDecoration ?? {};
+            editor.updateStyle([s.id], { textDecoration: { ...cur, [key]: on } });
+        }
+    };
+    const Toggle = ({ active, label, icon, onClick, }) => (_jsx("button", { type: "button", className: `du-sel-icon-button${active ? " is-active" : ""}`, title: label, "aria-label": label, "aria-pressed": active, onClick: onClick, children: icon }));
+    return (_jsx(Popover, { ariaLabel: "Text style", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Text style (bold / italic / \u2026)", "aria-label": "Text style", children: _jsx(CaseSensitive, { size: 16, strokeWidth: 1.75, "aria-hidden": true }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Style" }), _jsxs("div", { style: { display: "flex", gap: 2 }, children: [_jsx(Toggle, { active: allBold, label: "Bold", icon: _jsx(Bold, { size: 14, strokeWidth: 1.75 }), onClick: () => {
+                                editor.updateStyle(ids, { fontWeight: allBold ? "normal" : "bold" });
+                            } }), _jsx(Toggle, { active: allItalic, label: "Italic", icon: _jsx(Italic, { size: 14, strokeWidth: 1.75 }), onClick: () => {
+                                editor.updateStyle(ids, { fontStyle: allItalic ? "normal" : "italic" });
+                            } }), _jsx(Toggle, { active: allUnderline, label: "Underline", icon: _jsx(Underline, { size: 14, strokeWidth: 1.75 }), onClick: () => {
+                                setDecoration("underline", !allUnderline);
+                            } }), _jsx(Toggle, { active: allStrike, label: "Strikethrough", icon: _jsx(Strikethrough, { size: 14, strokeWidth: 1.75 }), onClick: () => {
+                                setDecoration("strikethrough", !allStrike);
+                            } })] })] }) }));
+};
+const StrokeControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor || !shapes.some(hasStroke))
+        return null;
+    const value = sharedString(shapes, (s) => s.style.stroke);
+    const ids = shapes.map((s) => s.id);
+    return (_jsx(ColorTrigger, { label: "Stroke", ariaLabel: "Stroke color", color: value, onChange: (v) => {
+            editor.updateStyle(ids, { stroke: v ?? "transparent" });
+        } }));
+};
+const StrokeWidthControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor || !shapes.some((s) => s.style.stroke !== undefined))
+        return null;
+    const value = sharedValue(shapes, (s) => s.style.strokeWidth ?? null);
+    const ids = shapes.map((s) => s.id);
+    return (_jsx(SegmentedControl, { ariaLabel: "Stroke width", value: value, options: [
+            { value: 1, label: "Thin", icon: _jsx(StrokeWidthIcon, { thickness: 1 }) },
+            { value: 2, label: "Medium", icon: _jsx(StrokeWidthIcon, { thickness: 2.5 }) },
+            { value: 4, label: "Thick", icon: _jsx(StrokeWidthIcon, { thickness: 4 }) },
+        ], onChange: (v) => {
+            editor.updateStyle(ids, { strokeWidth: v });
+        } }));
+};
+const StrokeStyleControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor || !shapes.some(hasStroke))
+        return null;
+    // Tolerant detection: any 2-element array with first ≤ 3 → dotted;
+    // anything else with first > 3 → dashed. Lets the panel recognise
+    // template-authored arrays like `[6, 4]` (auto-grid frames) as
+    // "dashed" instead of "mixed".
+    const value = sharedValue(shapes, (s) => {
+        const da = s.style.dashArray;
+        if (!da || da.length === 0)
+            return "solid";
+        const first = da[0] ?? 0;
+        return first <= 3 ? "dotted" : "dashed";
+    });
+    const ids = shapes.map((s) => s.id);
+    return (_jsx(SegmentedControl, { ariaLabel: "Stroke style", value: value, options: [
+            { value: "solid", label: "Solid", icon: _jsx(Square, { size: 14, strokeWidth: 1.75 }) },
+            { value: "dashed", label: "Dashed", icon: _jsx(SquareDashed, { size: 14, strokeWidth: 1.75 }) },
+            { value: "dotted", label: "Dotted", icon: _jsx(SquareDot, { size: 14, strokeWidth: 1.75 }) },
+        ], onChange: (v) => {
+            // An empty `dashArray: []` renders solid (Canvas2D `setLineDash([])`),
+            // and an empty array is truthy in JS so the renderer's dash call still
+            // goes through. Always pass an array.
+            const dashArray = v === "solid" ? [] : v === "dashed" ? [8, 4] : [2, 4];
+            editor.updateStyle(ids, { dashArray });
+        } }));
+};
+/**
+ * Corner control: an icon button (sharp / round) opens a popover with
+ * the round-radius slider plus an auto checkbox. Renders nothing when no
+ * corner-capable shapes are selected.
+ */
+const RoundnessControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const supports = shapes.every((s) => s.type === "rectangle" || s.type === "container");
+    if (!supports)
+        return null;
+    const type = sharedValue(shapes, (s) => s.style.roundness?.type ?? "sharp");
+    const radius = sharedValue(shapes, (s) => s.style.roundness?.value ?? null);
+    const ids = shapes.map((s) => s.id);
+    const isAuto = radius === null;
+    return (_jsx(Popover, { ariaLabel: "Corners", trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: "Corners", "aria-label": "Corners", children: _jsx(CornerIcon, { kind: type ?? "sharp" }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Corners" }), _jsx(SegmentedControl, { ariaLabel: "Corner roundness", value: type, options: [
+                        { value: "sharp", label: "Sharp", icon: _jsx(CornerIcon, { kind: "sharp" }) },
+                        { value: "round", label: "Round", icon: _jsx(CornerIcon, { kind: "round" }) },
+                    ], onChange: (v) => {
+                        editor.updateStyle(ids, { roundness: { type: v } });
+                    } }), type === "round" ? (_jsxs(_Fragment, { children: [_jsxs("label", { className: "du-prop-checkbox", children: [_jsx("input", { type: "checkbox", checked: isAuto, onChange: (ev) => {
+                                        if (ev.target.checked) {
+                                            editor.updateStyle(ids, { roundness: { type: "round" } });
+                                        }
+                                        else {
+                                            editor.updateStyle(ids, {
+                                                roundness: { type: "round", value: radius ?? 8 },
+                                            });
+                                        }
+                                    } }), _jsx("span", { children: "Auto radius" })] }), !isAuto ? (_jsx(Slider, { value: radius, min: 0, max: 64, step: 1, ariaLabel: "Corner radius", valueLabel: `${radius}px`, onChange: (v) => {
+                                editor.updateStyle(ids, { roundness: { type: "round", value: v } });
+                            } })) : null] })) : null] }) }));
+};
+/**
+ * Opacity control: percentage badge button opens a popover with a
+ * slider. The trigger is always rendered (even at implicit opacity 1) so
+ * the user can jump to 50% without a multi-step interaction.
+ */
+const OpacityControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const value = sharedValue(shapes, (s) => s.style.opacity ?? 1);
+    const ids = shapes.map((s) => s.id);
+    const percent = value === null ? null : Math.round(value * 100);
+    const label = percent === null ? "—" : `${percent}%`;
+    return (_jsx(Popover, { ariaLabel: "Opacity", trigger: _jsx("button", { type: "button", className: "du-sel-text-button", title: "Opacity", "aria-label": `Opacity ${label}`, children: label }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsx("header", { className: "du-sel-popover-label", children: "Opacity" }), _jsx(Slider, { value: percent, min: 0, max: 100, step: 5, ariaLabel: "Opacity", valueLabel: label, onChange: (v) => {
+                        editor.updateStyle(ids, { opacity: v / 100 });
+                    } })] }) }));
+};
+const ZOrderControl = () => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    return (_jsx(SegmentedControl, { ariaLabel: "Z-order", value: null, options: [
+            {
+                value: "back",
+                label: "Send to back",
+                icon: _jsx(ChevronsDown, { size: 14, strokeWidth: 1.75 }),
+            },
+            {
+                value: "backward",
+                label: "Send backward",
+                icon: _jsx(MoveDown, { size: 14, strokeWidth: 1.75 }),
+            },
+            { value: "forward", label: "Bring forward", icon: _jsx(MoveUp, { size: 14, strokeWidth: 1.75 }) },
+            {
+                value: "front",
+                label: "Bring to front",
+                icon: _jsx(ChevronsUp, { size: 14, strokeWidth: 1.75 }),
+            },
+        ], onChange: (v) => {
+            if (v === "back")
+                editor.sendToBack();
+            else if (v === "backward")
+                editor.sendBackward();
+            else if (v === "forward")
+                editor.bringForward();
+            else
+                editor.bringToFront();
+        } }));
+};
+const ActionsControl = ({ shapes }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const canGroup = shapes.length >= 2;
+    const canUngroup = shapes.some((s) => isGroup(s));
+    const options = [
+        { value: "duplicate", label: "Duplicate", icon: _jsx(CopyIcon, { size: 14, strokeWidth: 1.75 }) },
+        { value: "delete", label: "Delete", icon: _jsx(Trash2, { size: 14, strokeWidth: 1.75 }) },
+    ];
+    if (canGroup) {
+        options.push({
+            value: "group",
+            label: "Group",
+            icon: _jsx(GroupIcon, { size: 14, strokeWidth: 1.75 }),
+        });
+    }
+    if (canUngroup) {
+        options.push({
+            value: "ungroup",
+            label: "Ungroup",
+            icon: _jsx(UngroupIcon, { size: 14, strokeWidth: 1.75 }),
+        });
+    }
+    return (_jsx(SegmentedControl, { ariaLabel: "Element actions", value: null, options: options, onChange: (v) => {
+            if (v === "duplicate")
+                editor.duplicateSelected();
+            else if (v === "delete")
+                editor.deleteSelected();
+            else if (v === "group")
+                editor.groupSelected();
+            else
+                editor.ungroup();
+        } }));
+};
+// ---------------------------------------------------------------------------
+// Link controls — horizontal compact set used when an edge (not a
+// shape) is the active selection. Mirrors the shape control surface
+// (color triggers + segmented row controls) so the floating panel
+// reads consistently regardless of selection type.
+// ---------------------------------------------------------------------------
+const LinkStrokeColorControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const color = typeof edge.style.stroke === "string" ? edge.style.stroke : null;
+    return (_jsx(ColorTrigger, { label: "Stroke", ariaLabel: "Link stroke color", color: color, onChange: (v) => {
+            editor.updateSelectedLink((e) => ({
+                ...e,
+                style: { ...e.style, stroke: v ?? "transparent" },
+            }));
+        } }));
+};
+const LinkStrokeWidthControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const value = typeof edge.style.strokeWidth === "number" ? edge.style.strokeWidth : null;
+    return (_jsx(SegmentedControl, { ariaLabel: "Link stroke width", value: value, options: [
+            { value: 1, label: "Thin", icon: _jsx(StrokeWidthIcon, { thickness: 1 }) },
+            { value: 2, label: "Medium", icon: _jsx(StrokeWidthIcon, { thickness: 2.5 }) },
+            { value: 4, label: "Thick", icon: _jsx(StrokeWidthIcon, { thickness: 4 }) },
+        ], onChange: (v) => {
+            editor.updateSelectedLink((e) => ({
+                ...e,
+                style: { ...e.style, strokeWidth: v },
+            }));
+        } }));
+};
+const LinkStrokeStyleControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const da = edge.style.dashArray;
+    const value = (() => {
+        if (!da || da.length === 0)
+            return "solid";
+        const first = da[0] ?? 0;
+        return first <= 3 ? "dotted" : "dashed";
+    })();
+    return (_jsx(SegmentedControl, { ariaLabel: "Link stroke style", value: value, options: [
+            { value: "solid", label: "Solid", icon: _jsx(Square, { size: 14, strokeWidth: 1.75 }) },
+            { value: "dashed", label: "Dashed", icon: _jsx(SquareDashed, { size: 14, strokeWidth: 1.75 }) },
+            { value: "dotted", label: "Dotted", icon: _jsx(SquareDot, { size: 14, strokeWidth: 1.75 }) },
+        ], onChange: (v) => {
+            const dashArray = v === "solid" ? [] : v === "dashed" ? [8, 4] : [2, 4];
+            editor.updateSelectedLink((e) => ({
+                ...e,
+                style: { ...e.style, dashArray },
+            }));
+        } }));
+};
+const LinkLineKindControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const value = edge.lineKind ?? "line";
+    return (_jsx(SegmentedControl, { ariaLabel: "Link body", value: value, options: [
+            { value: "line", label: "Line", icon: _jsx(Minus, { size: 14, strokeWidth: 1.75 }) },
+            {
+                value: "block-arrow",
+                label: "Block arrow",
+                icon: _jsx(MoveRight, { size: 14, strokeWidth: 2.5 }),
+            },
+        ], onChange: (v) => {
+            editor.updateSelectedLink((e) => ({ ...e, lineKind: v }));
+        } }));
+};
+const LinkRoutingControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    const value = edge.routing ?? "straight";
+    return (_jsx(SegmentedControl, { ariaLabel: "Link routing", value: value, options: [
+            { value: "straight", label: "Straight", icon: _jsx(RoutingIcon, { kind: "straight" }) },
+            { value: "orthogonal", label: "Elbow", icon: _jsx(RoutingIcon, { kind: "orthogonal" }) },
+            { value: "bezier", label: "Curved", icon: _jsx(Spline, { size: 14, strokeWidth: 1.75 }) },
+        ], onChange: (v) => {
+            editor.updateSelectedLink((e) => ({ ...e, routing: v }));
+        } }));
+};
+const LinkArrowheadControl = ({ edge, side, }) => {
+    const editor = useDiagramOptional();
+    const [showErd, setShowErd] = useState(false);
+    if (!editor)
+        return null;
+    const current = edge.arrowheads?.[side] ?? "none";
+    const pick = (style) => {
+        editor.updateSelectedLink((e) => ({
+            ...e,
+            arrowheads: { ...(e.arrowheads ?? {}), [side]: style },
+        }));
+    };
+    const Option = ({ style }) => (_jsx("button", { type: "button", className: `du-arrowhead-option${style === current ? " du-arrowhead-option--active" : ""}`, title: ARROWHEAD_LABELS[style], "aria-label": ARROWHEAD_LABELS[style], "aria-pressed": style === current, onClick: () => {
+            pick(style);
+        }, children: style === "none" ? (_jsx("span", { className: "du-arrowhead-none", children: "\u2205" })) : arrowheadGlyphFamily(style) === "none" ? (_jsx("span", { className: "du-arrowhead-erd-label", children: ARROWHEAD_LABELS[style].replace(/^ERD /, "") })) : (_jsx(ArrowheadGlyph, { kind: style, side: side })) }));
+    return (_jsx(Popover, { trigger: _jsx("button", { type: "button", className: "du-sel-icon-button", title: `Arrow ${side}: ${ARROWHEAD_LABELS[current]}`, "aria-label": `Arrow ${side}`, children: _jsx(ArrowheadGlyph, { kind: current, side: side }) }), children: _jsxs("div", { className: "du-sel-popover-section", children: [_jsxs("header", { className: "du-sel-popover-label", children: ["Arrow ", side] }), _jsx("div", { className: "du-arrowhead-grid", children: BASIC_ARROWHEADS.map((s) => (_jsx(Option, { style: s }, s))) }), _jsxs("button", { type: "button", className: "du-arrowhead-erd-toggle", "aria-expanded": showErd, onClick: () => {
+                        setShowErd((v) => !v);
+                    }, children: [showErd ? "▾" : "▸", " ER diagram"] }), showErd && (_jsx("div", { className: "du-arrowhead-grid", children: ERD_ARROWHEADS.map((s) => (_jsx(Option, { style: s }, s))) }))] }) }));
+};
+const LinkAutoRouteControl = ({ edge }) => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    // Obstacle-avoidance produces an orthogonal path, so it only makes sense
+    // for straight / elbow links — a curved (bezier) link can't carry the
+    // routed polyline. Hide the toggle for curved.
+    const routing = edge.routing ?? "straight";
+    if (routing === "bezier")
+        return null;
+    const on = edge.avoidObstacles === true;
+    return (_jsx("button", { type: "button", className: `du-sel-icon-button${on ? " is-active" : ""}`, title: "Route around shapes", "aria-label": "Route around shapes", "aria-pressed": on, onClick: () => {
+            editor.setSelectedLinkAvoidObstacles(!on);
+        }, children: _jsx(Waypoints, { size: 14, strokeWidth: 1.75, "aria-hidden": true }) }));
+};
+const LinkDeleteControl = () => {
+    const editor = useDiagramOptional();
+    if (!editor)
+        return null;
+    return (_jsx("button", { type: "button", className: "du-sel-icon-button", title: "Delete edge", "aria-label": "Delete edge", onClick: () => {
+            editor.deleteSelected();
+        }, children: _jsx(Trash2, { size: 14, strokeWidth: 1.75, "aria-hidden": true }) }));
+};
+// Inline SVG glyph for routing variant — Lucide has `Spline` for the
+// curve but no clean "straight" / "elbow" line variants.
+const RoutingIcon = ({ kind }) => {
+    if (kind === "straight") {
+        return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: _jsx("line", { x1: 2, y1: 11, x2: 12, y2: 3, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" }) }));
+    }
+    // orthogonal (elbow)
+    return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: _jsx("path", { d: "M 2 11 L 2 7 L 12 7 L 12 3", stroke: "currentColor", strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+};
+// Which compact glyph family renders a given arrowhead style.
+const arrowheadGlyphFamily = (kind) => {
+    switch (kind) {
+        case "arrow":
+        case "openArrow":
+        case "roundedArrow":
+        case "arcArrow":
+            return "open";
+        case "triangle":
+        case "filledArrow":
+            return "triangle";
+        case "diamond":
+        case "rhombus":
+        case "filledRhombus":
+            return "diamond";
+        case "circle":
+        case "filledCircle":
+            return "circle";
+        default:
+            return "none"; // none + ERD caps (labelled by name in the picker)
+    }
+};
+// Picker option sets. ERD caps are gated behind a toggle.
+const BASIC_ARROWHEADS = [
+    "none",
+    "arrow",
+    "openArrow",
+    "roundedArrow",
+    "arcArrow",
+    "filledArrow",
+    "triangle",
+    "circle",
+    "filledCircle",
+    "rhombus",
+    "filledRhombus",
+];
+const ERD_ARROWHEADS = [
+    "erdOne",
+    "erdOnlyOne",
+    "erdMany",
+    "erdOneOrMany",
+    "erdZeroOrOne",
+    "erdZeroOrMany",
+];
+const ARROWHEAD_LABELS = {
+    none: "None",
+    arrow: "Arrow",
+    openArrow: "Open arrow",
+    roundedArrow: "Rounded arrow",
+    arcArrow: "Arc arrow",
+    triangle: "Triangle",
+    filledArrow: "Filled arrow",
+    circle: "Circle",
+    filledCircle: "Filled circle",
+    diamond: "Diamond",
+    rhombus: "Rhombus",
+    filledRhombus: "Filled rhombus",
+    erdOne: "ERD one",
+    erdOnlyOne: "ERD only one",
+    erdMany: "ERD many",
+    erdOneOrMany: "ERD one or many",
+    erdZeroOrOne: "ERD zero or one",
+    erdZeroOrMany: "ERD zero or many",
+};
+const ArrowheadGlyph = ({ kind, side, }) => {
+    // Build a 14×14 horizontal line with the head at right (for `to`) or
+    // left (for `from`), all in stroke / fill currentColor.
+    const flipped = side === "from";
+    const lineX1 = flipped ? 12 : 2;
+    const lineX2 = flipped ? 5 : 9;
+    const headCx = flipped ? 3 : 11;
+    const headBase = flipped ? 5 : 9;
+    const stroke = (_jsx("line", { x1: lineX1, y1: 7, x2: lineX2, y2: 7, stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round" }));
+    // Map the full vocabulary onto the four drawable glyph families. ERD caps
+    // have no compact glyph — they fall through to a bare line; the picker
+    // labels them by name so they stay distinguishable.
+    const fam = arrowheadGlyphFamily(kind);
+    let head = null;
+    if (fam === "open") {
+        head = (_jsx("polyline", { points: flipped
+                ? `${headCx + 3},4 ${headCx},7 ${headCx + 3},10`
+                : `${headCx - 3},4 ${headCx},7 ${headCx - 3},10`, stroke: "currentColor", strokeWidth: 1.5, fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }));
+    }
+    else if (fam === "triangle") {
+        head = (_jsx("polygon", { points: flipped
+                ? `${headCx},7 ${headBase},4 ${headBase},10`
+                : `${headCx},7 ${headBase},4 ${headBase},10`, fill: "currentColor" }));
+    }
+    else if (fam === "diamond") {
+        head = (_jsx("polygon", { points: `${headCx},4 ${headCx + (flipped ? -3 : 3)},7 ${headCx},10 ${headCx + (flipped ? 3 : -3)},7`, fill: kind === "filledRhombus" ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 1.2 }));
+    }
+    else if (fam === "circle") {
+        head = (_jsx("circle", { cx: headCx, cy: 7, r: 2.2, fill: kind === "filledCircle" ? "currentColor" : "none", stroke: "currentColor", strokeWidth: 1.2 }));
+    }
+    return (_jsxs("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: [stroke, head] }));
+};
+// ---------------------------------------------------------------------------
+// Layout primitives
+// ---------------------------------------------------------------------------
+const Divider = () => _jsx("span", { className: "du-sel-divider", "aria-hidden": true });
+// Section / Row kept as exports because tests may rely on them; they're
+// no longer used internally.
+export const Section = ({ label, children, }) => (_jsxs("section", { className: "du-prop-section", children: [_jsx("h3", { className: "du-prop-section-label", children: label }), children] }));
+// ---------------------------------------------------------------------------
+// Inline SVG glyphs
+// ---------------------------------------------------------------------------
+const StrokeWidthIcon = ({ thickness }) => (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: _jsx("line", { x1: 2, y1: 7, x2: 12, y2: 7, stroke: "currentColor", strokeWidth: thickness, strokeLinecap: "round" }) }));
+const CornerIcon = ({ kind }) => {
+    if (kind === "sharp") {
+        return _jsx(Square, { size: 14, strokeWidth: 1.75, "aria-hidden": true });
+    }
+    return (_jsx("svg", { width: 14, height: 14, viewBox: "0 0 14 14", fill: "none", "aria-hidden": true, children: _jsx("rect", { x: 2, y: 2, width: 10, height: 10, rx: 3, ry: 3, stroke: "currentColor", strokeWidth: 1.5 }) }));
+};
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+const sharedValue = (elements, pick) => {
+    const set = new Set();
+    for (const s of elements)
+        set.add(pick(s));
+    if (set.size !== 1)
+        return null;
+    const v = set.values().next().value;
+    return v ?? null;
+};
+const sharedString = (elements, pick) => {
+    const value = sharedValue(elements, (s) => pick(s));
+    return typeof value === "string" ? value : null;
+};
+// Frames are always fillable (white by default) even when `style.fill` is
+// unset.
+const hasFill = (shape) => shape.style.fill !== undefined || shape.type === "frame";
+const hasStroke = (shape) => shape.style.stroke !== undefined;
+//# sourceMappingURL=property-panel.js.map