@oh-just-another/react-ui 0.57.0

package/dist/color-palette.js

@@ -0,0 +1,77 @@
+/**
+ * Element + canvas color palettes used by the bundled
+ * `<ColorSwatchPicker>`. Hosts that want a custom palette import
+ * these constants and concat their own; the picker accepts any
+ * `readonly string[]`.
+ *
+ * Palette is sourced from `@oh-just-another/tokens`. Each hue carries
+ * two pinned tones — step-4 ("subtle") for fills and step-9 ("solid")
+ * for strokes / marks. Step-9 stays the same hex on both themes per
+ * Radix spec, so the picker reads as the same "brand" colour
+ * regardless of the active theme.
+ *
+ * `"transparent"` is the canonical "no colour" sentinel — the picker
+ * renders it as a checkerboard swatch and writes the string
+ * `"transparent"` into the underlying style.
+ */
+import { CANVAS_TONES, HUES, HUE_TONES } from "@oh-just-another/tokens";
+const fillsLight = HUES.map((hue) => HUE_TONES.light[hue].fill);
+const solidsLight = HUES.map((hue) => HUE_TONES.light[hue].solid);
+const fillsDark = HUES.map((hue) => HUE_TONES.dark[hue].fill);
+const solidsDark = HUES.map((hue) => HUE_TONES.dark[hue].solid);
+const canvasLight = HUES.map((hue) => CANVAS_TONES.light[hue]);
+const canvasDark = HUES.map((hue) => CANVAS_TONES.dark[hue]);
+/**
+ * Light-theme element palette: step-4 subtle tints first row,
+ * step-9 solids second row, neutrals + transparent last row.
+ */
+export const ELEMENT_PALETTE_LIGHT = [
+    ...fillsLight,
+    ...solidsLight,
+    "#ffffff",
+    "#1e1e1e",
+    "transparent",
+];
+/**
+ * Dark-theme element palette — step-4 dark tints for fills,
+ * step-9 dark for solids. Per Radix spec, the step-9 hex matches
+ * the light variant so brand colour stays anchored across themes;
+ * only the tint row swaps to deep-tinted backgrounds.
+ */
+export const ELEMENT_PALETTE_DARK = [
+    ...fillsDark,
+    ...solidsDark,
+    "#1e1e1e",
+    "#ffffff",
+    "transparent",
+];
+/**
+ * Light-theme canvas palette — paper-like backgrounds for the
+ * editor surface. Pure white sits first; the rest are step-2 hues
+ * (almost-pure tints with a hint of colour). Meant for the canvas
+ * itself, not for shapes.
+ */
+export const CANVAS_PALETTE_LIGHT = ["#ffffff", ...canvasLight];
+/**
+ * Dark-theme canvas palette — near-black backgrounds. Step-2 dark
+ * from each Radix hue: deep, almost-neutral tints that read as
+ * "themed background" rather than "filled colour".
+ */
+export const CANVAS_PALETTE_DARK = ["#121113", ...canvasDark];
+/**
+ * Resolve which palette flavour to use given a `theme` setting
+ * ("light" / "dark" / "system"). For `"system"` consults the OS
+ * `prefers-color-scheme` media query, re-checked on each call so a
+ * host that re-renders on theme change picks up the switch without
+ * subscribing.
+ */
+export const resolvePaletteTheme = (theme) => {
+    if (theme === "light" || theme === "dark")
+        return theme;
+    if (typeof window === "undefined")
+        return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+        ? "dark"
+        : "light";
+};
+//# sourceMappingURL=color-palette.js.map

package/dist/color-palette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-palette.js","sourceRoot":"","sources":["../src/color-palette.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAExE,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;AAChE,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;AAClE,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;AAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC;AAEhE,MAAM,WAAW,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;AAC/D,MAAM,UAAU,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAE7D;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAsB;IACtD,GAAG,UAAU;IACb,GAAG,WAAW;IACd,SAAS;IACT,SAAS;IACT,aAAa;CACd,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAsB;IACrD,GAAG,SAAS;IACZ,GAAG,UAAU;IACb,SAAS;IACT,SAAS;IACT,aAAa;CACd,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAsB,CAAC,SAAS,EAAE,GAAG,WAAW,CAAC,CAAC;AAEnF;;;;GAIG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAsB,CAAC,SAAS,EAAE,GAAG,UAAU,CAAC,CAAC;AAEjF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,KAAkC,EAChB,EAAE;IACpB,IAAI,KAAK,KAAK,OAAO,IAAI,KAAK,KAAK,MAAM;QAAE,OAAO,KAAK,CAAC;IACxD,IAAI,OAAO,MAAM,KAAK,WAAW;QAAE,OAAO,OAAO,CAAC;IAClD,OAAO,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO;QAC9D,CAAC,CAAC,MAAM;QACR,CAAC,CAAC,OAAO,CAAC;AACd,CAAC,CAAC"}

package/dist/color-swatch-picker.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Swatch grid + custom-colour picker. A row of pinned palette colours;
+ * users click a swatch to pick, or click the `+` button to open a
+ * native colour picker for anything outside the palette. The
+ * "transparent" swatch shows a checkerboard pattern and reports `null`
+ * upstream.
+ *
+ * Each cell is a fixed 26 × 26 box: a 24 × 24 colour fill sits
+ * centred inside, with 1 px of breathing room. On hover the fill
+ * grows to the full 26 × 26 (no layout shift — the cell itself
+ * stays at 26). Selected cells get a 2-px tonal ring on the cell
+ * border so the ring sits outside the fill, not over it.
+ *
+ * Default palette is theme-aware — when `palette` is omitted, the
+ * picker reads from the OS theme (via `prefers-color-scheme`) and
+ * picks the appropriate light / dark palette.
+ */
+export interface ColorSwatchPickerProps {
+    readonly value: string | null;
+    readonly onChange: (color: string | null) => void;
+    /** Override the bundled palette. Defaults to theme-aware element palette. */
+    readonly palette?: readonly string[];
+    /** Show the `+` button that opens the native colour picker. Default `true`. */
+    readonly allowCustom?: boolean;
+    /** Show the `×` clear button that sets value to `null`. Default `true`. */
+    readonly allowClear?: boolean;
+}
+export declare const ColorSwatchPicker: ({ value, onChange, palette, allowCustom, allowClear, }: ColorSwatchPickerProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=color-swatch-picker.d.ts.map

package/dist/color-swatch-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color-swatch-picker.d.ts","sourceRoot":"","sources":["../src/color-swatch-picker.tsx"],"names":[],"mappings":"AAQA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,QAAQ,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAClD,6EAA6E;IAC7E,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IACrC,+EAA+E;IAC/E,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,2EAA2E;IAC3E,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,eAAO,MAAM,iBAAiB,GAAI,wDAM/B,sBAAsB,4CAoCxB,CAAC"}

package/dist/color-swatch-picker.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Plus, X } from "lucide-react";
+import { ELEMENT_PALETTE_LIGHT, ELEMENT_PALETTE_DARK, resolvePaletteTheme, } from "./color-palette.js";
+export const ColorSwatchPicker = ({ value, onChange, palette, allowCustom = true, allowClear = true, }) => {
+    const resolved = palette ?? defaultPaletteForCurrentTheme();
+    const [customOpen, setCustomOpen] = useState(false);
+    return (_jsxs("div", { className: "du-swatch-grid", role: "radiogroup", "aria-label": "Colour", children: [resolved.map((c) => (_jsx(Swatch, { color: c, selected: normalise(c) === normalise(value), onClick: () => { onChange(c === "transparent" ? null : c); } }, c))), allowCustom ? (_jsx(CustomSwatch, { value: value, onChange: onChange, open: customOpen, onOpenChange: setCustomOpen })) : null, allowClear ? (_jsx("button", { type: "button", "aria-label": "Clear colour", title: "Clear colour", onClick: () => { onChange(null); }, className: "du-swatch du-swatch-clear", children: _jsx("span", { className: "du-swatch-fill du-swatch-fill-blank", children: _jsx(X, { size: 12, strokeWidth: 2 }) }) })) : null] }));
+};
+const Swatch = ({ color, selected, onClick, }) => {
+    const isTransparent = color === "transparent";
+    return (_jsx("button", { type: "button", role: "radio", "aria-checked": selected, "aria-label": color, title: color, onClick: onClick, className: "du-swatch", children: _jsx("span", { className: "du-swatch-fill", style: {
+                background: isTransparent
+                    ? "repeating-conic-gradient(#ccc 0% 25%, #fff 0% 50%) 50% / 6px 6px"
+                    : color,
+            } }) }));
+};
+/**
+ * The `+` button — opens the browser's native colour picker. When
+ * `value` is already a custom colour (not in palette) the trigger
+ * shows that colour instead of a `+`.
+ */
+const CustomSwatch = ({ value, onChange, open, onOpenChange, }) => {
+    const hasColour = !!value && value !== "transparent";
+    return (_jsxs("label", { className: "du-swatch du-swatch-custom", title: "Pick custom colour", children: [_jsx("span", { className: "du-swatch-fill", style: hasColour ? { background: value } : undefined, children: hasColour ? null : _jsx(Plus, { size: 12, strokeWidth: 2 }) }), _jsx("input", { type: "color", "aria-label": "Custom colour", value: normaliseHex(value), onChange: (ev) => {
+                    onChange(ev.target.value);
+                    onOpenChange(false);
+                }, onClick: () => { onOpenChange(!open); }, className: "du-swatch-color-input" })] }));
+};
+const normalise = (color) => color === null ? "transparent" : color.toLowerCase();
+const normaliseHex = (value) => {
+    if (!value || value === "transparent")
+        return "#000000";
+    if (/^#[0-9a-f]{6}$/i.test(value))
+        return value.toLowerCase();
+    if (/^#[0-9a-f]{3}$/i.test(value)) {
+        const v = value.slice(1);
+        return `#${v[0]}${v[0]}${v[1]}${v[1]}${v[2]}${v[2]}`.toLowerCase();
+    }
+    return "#000000";
+};
+const defaultPaletteForCurrentTheme = () => {
+    if (typeof document === "undefined")
+        return ELEMENT_PALETTE_LIGHT;
+    // Respect the host's forced theme attribute when present; fall
+    // back to OS preference otherwise.
+    const attr = document.documentElement.getAttribute("data-theme");
+    if (attr === "dark")
+        return ELEMENT_PALETTE_DARK;
+    if (attr === "light")
+        return ELEMENT_PALETTE_LIGHT;
+    return resolvePaletteTheme("system") === "dark"
+        ? ELEMENT_PALETTE_DARK
+        : ELEMENT_PALETTE_LIGHT;
+};
+//# sourceMappingURL=color-swatch-picker.js.map

package/dist/color-swatch-picker.js.map

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

package/dist/command-palette.d.ts

@@ -0,0 +1,13 @@
+import { type ReactElement } from "react";
+/**
+ * Command palette (standard `⌘K`). A searchable list of every registered action,
+ * dispatched through the same `ActionRegistry` as hotkeys / context menu — so
+ * it stays in sync automatically as actions are added. Self-contained: manages
+ * its own open state and registers the `open-command-palette` action (so the
+ * `⌘K` shortcut also appears in the help dialog). Mount once per host.
+ *
+ * Predicate-gated actions whose predicate currently fails are shown disabled
+ * (greyed, not runnable) so the list is stable but can't fire a no-op.
+ */
+export declare const CommandPalette: () => ReactElement | null;
+//# sourceMappingURL=command-palette.d.ts.map

package/dist/command-palette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-palette.d.ts","sourceRoot":"","sources":["../src/command-palette.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,YAAY,EAClB,MAAM,OAAO,CAAC;AAUf;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,QAAO,YAAY,GAAG,IA8HhD,CAAC"}

package/dist/command-palette.js

@@ -0,0 +1,146 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState, } from "react";
+import { defaultActionRegistry, formatHotkey, } from "@oh-just-another/state";
+import { Modal } from "./modal.js";
+import { useDiagramOptional } from "./hooks.js";
+/**
+ * Command palette (standard `⌘K`). A searchable list of every registered action,
+ * dispatched through the same `ActionRegistry` as hotkeys / context menu — so
+ * it stays in sync automatically as actions are added. Self-contained: manages
+ * its own open state and registers the `open-command-palette` action (so the
+ * `⌘K` shortcut also appears in the help dialog). Mount once per host.
+ *
+ * Predicate-gated actions whose predicate currently fails are shown disabled
+ * (greyed, not runnable) so the list is stable but can't fire a no-op.
+ */
+export const CommandPalette = () => {
+    const editor = useDiagramOptional();
+    const [open, setOpen] = useState(false);
+    const [query, setQuery] = useState("");
+    const [active, setActive] = useState(0);
+    const inputRef = useRef(null);
+    // Register the open action so `⌘K` routes through the registry like every
+    // other hotkey (fed by the host keydown listener) and shows in the help
+    // dialog. `replace` is idempotent across StrictMode / HMR.
+    useEffect(() => {
+        defaultActionRegistry.replace({
+            id: "open-command-palette",
+            label: "Command palette",
+            category: "other",
+            hotkey: { key: "k", meta: true },
+            perform: () => { setOpen(true); },
+        });
+        return () => { defaultActionRegistry.unregister("open-command-palette"); };
+    }, []);
+    // Actions with a label, minus the palette opener itself. Built once; the
+    // registry is stable for the session.
+    const all = useMemo(() => defaultActionRegistry
+        .getAll()
+        .filter((a) => a.label !== undefined && a.id !== "open-command-palette"), [open]);
+    const ctx = editor ? { editor } : null;
+    const matches = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        const list = q
+            ? all.filter((a) => (a.label ?? "").toLowerCase().includes(q))
+            : all;
+        return list.map((a) => ({
+            action: a,
+            enabled: ctx ? (a.predicate ? a.predicate(ctx) : true) : false,
+        }));
+    }, [all, query, ctx]);
+    // Reset transient state whenever the palette opens.
+    useEffect(() => {
+        if (!open)
+            return;
+        setQuery("");
+        setActive(0);
+        // Focus the input after the modal mounts.
+        const id = requestAnimationFrame(() => inputRef.current?.focus());
+        return () => { cancelAnimationFrame(id); };
+    }, [open]);
+    useEffect(() => { setActive(0); }, [query]);
+    if (!open)
+        return null;
+    const close = () => { setOpen(false); };
+    const run = (entry) => {
+        if (!entry.enabled || !ctx)
+            return;
+        close();
+        defaultActionRegistry.dispatch(entry.action.id, ctx);
+    };
+    const onInputKey = (ev) => {
+        if (ev.key === "ArrowDown") {
+            ev.preventDefault();
+            setActive((i) => Math.min(matches.length - 1, i + 1));
+        }
+        else if (ev.key === "ArrowUp") {
+            ev.preventDefault();
+            setActive((i) => Math.max(0, i - 1));
+        }
+        else if (ev.key === "Enter") {
+            ev.preventDefault();
+            const entry = matches[active];
+            if (entry)
+                run(entry);
+        }
+    };
+    const rowStyle = (i, enabled) => ({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        padding: "8px 14px",
+        cursor: enabled ? "pointer" : "default",
+        opacity: enabled ? 1 : 0.4,
+        background: i === active ? "var(--du-ui-hover, rgba(0,0,0,0.06))" : "transparent",
+    });
+    return (_jsxs(Modal, { open: open, onClose: close, title: "Command palette", style: MODAL_STYLE, children: [_jsx("input", { ref: inputRef, value: query, onChange: (e) => { setQuery(e.target.value); }, onKeyDown: onInputKey, placeholder: "Search commands\u2026", "aria-label": "Search commands", style: INPUT_STYLE }), _jsx("ul", { style: LIST_STYLE, role: "listbox", children: matches.length === 0 ? (_jsx("li", { style: { padding: "12px 14px", opacity: 0.6 }, children: "No commands" })) : (matches.map((entry, i) => {
+                    const keys = actionHotkey(entry.action);
+                    return (_jsxs("li", { role: "option", "aria-selected": i === active, "aria-disabled": !entry.enabled, style: rowStyle(i, entry.enabled), onPointerEnter: () => { setActive(i); }, onClick: () => { run(entry); }, children: [_jsx("span", { children: entry.action.label }), keys ? _jsx("kbd", { style: KBD_STYLE, children: keys }) : null] }, entry.action.id));
+                })) })] }));
+};
+/** First hotkey/sequence of an action, formatted for the chip (or null). */
+const actionHotkey = (action) => {
+    if (action.hotkey) {
+        const raw = Array.isArray(action.hotkey)
+            ? action.hotkey
+            : [action.hotkey];
+        const first = raw[0];
+        if (first)
+            return formatHotkey(first);
+    }
+    if (action.sequence && action.sequence.length > 0) {
+        return action.sequence.map((k) => (k.length === 1 ? k.toUpperCase() : k)).join(" ");
+    }
+    return null;
+};
+const MODAL_STYLE = {
+    maxWidth: 520,
+    width: "calc(100vw - 64px)",
+    padding: 0,
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+};
+const INPUT_STYLE = {
+    border: "none",
+    borderBottom: "1px solid var(--du-ui-border)",
+    outline: "none",
+    padding: "14px 16px",
+    fontSize: 15,
+    background: "transparent",
+    color: "inherit",
+};
+const LIST_STYLE = {
+    listStyle: "none",
+    margin: 0,
+    padding: 4,
+    maxHeight: 360,
+    overflowY: "auto",
+};
+const KBD_STYLE = {
+    fontSize: 11,
+    color: "var(--du-text-muted, #6b6b6b)",
+    fontFamily: "inherit",
+};
+//# sourceMappingURL=command-palette.js.map

package/dist/command-palette.js.map

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

package/dist/comments-panel.d.ts

@@ -0,0 +1,27 @@
+import { type CSSProperties } from "react";
+/**
+ * Side-panel listing every annotation thread in the scene. Each row is
+ * a button that focuses the annotation (opens `<CommentsPopover>` and
+ * highlights the pin). Resolved threads render dimmed. Hosts that want
+ * a different layout can compose their own from `useAnnotations` +
+ * `editor.setSelectedAnnotation`.
+ */
+export interface CommentsPanelProps {
+    readonly style?: CSSProperties;
+    readonly className?: string;
+}
+export declare const CommentsPanel: ({ style, className }: CommentsPanelProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Floating thread view for the focused annotation. Renders nothing
+ * when no annotation is open. Drop it as a sibling of `<DiagramSurface>`
+ * inside `<DiagramRoot>` so it can position itself over the canvas.
+ *
+ * Composes from `useAnnotations` + `useSelectedAnnotation`; hosts that
+ * want a different layout (modal, side-panel, etc.) can rebuild it.
+ */
+export interface CommentsPopoverProps {
+    readonly style?: CSSProperties;
+    readonly className?: string;
+}
+export declare const CommentsPopover: ({ style, className }: CommentsPopoverProps) => import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=comments-panel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"comments-panel.d.ts","sourceRoot":"","sources":["../src/comments-panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,OAAO,CAAC;AAKrD;;;;;;GAMG;AACH,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,aAAa,GAAI,sBAAsB,kBAAkB,4CAyFrE,CAAC;AAEF;;;;;;;GAOG;AACH,MAAM,WAAW,oBAAoB;IACnC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,eAAe,GAAI,sBAAsB,oBAAoB,mDAyJzE,CAAC"}

package/dist/comments-panel.js

@@ -0,0 +1,139 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { useAnnotations, useDiagramOptional, useSelectedAnnotation } from "./hooks.js";
+import { COMMENTS_PANEL_WIDTH } from "./constants.js";
+import { Markdown } from "./markdown.js";
+export const CommentsPanel = ({ style, className }) => {
+    const editor = useDiagramOptional();
+    const annotations = useAnnotations();
+    const selectedId = useSelectedAnnotation();
+    return (_jsxs("aside", { className: className, style: {
+            flex: "0 0 240px",
+            background: "var(--panel, #161616)",
+            color: "var(--text, #ddd)",
+            borderLeft: "1px solid var(--border, #2a2a2a)",
+            display: "flex",
+            flexDirection: "column",
+            minHeight: 0,
+            ...style,
+        }, children: [_jsxs("header", { style: {
+                    padding: "8px 12px",
+                    fontSize: 11,
+                    textTransform: "uppercase",
+                    letterSpacing: 0.5,
+                    color: "var(--muted, #888)",
+                    borderBottom: "1px solid var(--border, #2a2a2a)",
+                }, children: ["Comments (", annotations.length, ")"] }), _jsx("div", { style: { flex: 1, overflowY: "auto" }, children: annotations.length === 0 ? (_jsx("div", { style: { padding: "16px 12px", color: "var(--faint, #555)", fontSize: 12 }, children: "No comments yet. Right-click on the canvas to add one." })) : (annotations.map((ann) => {
+                    const first = ann.thread[0];
+                    const isOpen = ann.id === selectedId;
+                    return (_jsxs("button", { type: "button", onClick: () => editor?.setSelectedAnnotation(ann.id), style: {
+                            display: "block",
+                            width: "100%",
+                            textAlign: "left",
+                            padding: "8px 12px",
+                            border: "none",
+                            borderLeft: isOpen ? "3px solid var(--accent, #1a73e8)" : "3px solid transparent",
+                            background: isOpen ? "var(--cursor-bg, rgba(26,115,232,0.12))" : "transparent",
+                            color: "inherit",
+                            cursor: "pointer",
+                            opacity: ann.resolved ? 0.55 : 1,
+                            borderBottom: "1px solid var(--divider, #333)",
+                            font: "inherit",
+                            fontSize: 12,
+                        }, children: [_jsxs("div", { style: { display: "flex", gap: 6, marginBottom: 2 }, children: [_jsx("span", { style: { fontWeight: 600 }, children: first?.authorName ?? "—" }), ann.thread.length > 1 ? (_jsxs("span", { style: { color: "var(--muted, #888)" }, children: ["+", ann.thread.length - 1] })) : null, ann.resolved ? (_jsx("span", { style: { marginLeft: "auto", color: "var(--muted, #888)" }, children: "resolved" })) : null] }), _jsx("div", { style: {
+                                    color: "var(--muted, #888)",
+                                    overflow: "hidden",
+                                    textOverflow: "ellipsis",
+                                    whiteSpace: "nowrap",
+                                }, children: first?.body ?? "(empty)" })] }, ann.id));
+                })) })] }));
+};
+export const CommentsPopover = ({ style, className }) => {
+    const editor = useDiagramOptional();
+    const annotations = useAnnotations();
+    const selectedId = useSelectedAnnotation();
+    const [draft, setDraft] = useState("");
+    if (!editor || !selectedId)
+        return null;
+    const ann = annotations.find((a) => a.id === selectedId);
+    if (!ann)
+        return null;
+    const submit = () => {
+        const body = draft.trim();
+        if (!body)
+            return;
+        editor.addComment(ann.id, body);
+        setDraft("");
+    };
+    return (_jsxs("div", { className: className, role: "dialog", "aria-label": "Annotation thread", style: {
+            position: "absolute",
+            top: 16,
+            right: 16,
+            width: COMMENTS_PANEL_WIDTH,
+            maxHeight: "70vh",
+            display: "flex",
+            flexDirection: "column",
+            background: "var(--panel, #161616)",
+            color: "var(--text, #ddd)",
+            border: "1px solid var(--border, #2a2a2a)",
+            borderRadius: 8,
+            boxShadow: "0 6px 24px rgba(0,0,0,0.4)",
+            font: "13px system-ui, -apple-system, sans-serif",
+            ...style,
+        }, children: [_jsxs("header", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 8,
+                    padding: "8px 10px",
+                    borderBottom: "1px solid var(--divider, #333)",
+                }, children: [_jsx("span", { style: { fontSize: 11, color: "var(--muted, #888)" }, children: ann.resolved ? "Resolved" : "Open" }), _jsx("button", { type: "button", onClick: () => { editor.toggleAnnotationResolved(ann.id); }, style: popoverButtonStyle, children: ann.resolved ? "Reopen" : "Resolve" }), _jsx("button", { type: "button", onClick: () => {
+                            editor.removeAnnotation(ann.id);
+                        }, style: popoverButtonStyle, "aria-label": "Delete thread", children: "\u00D7" }), _jsx("button", { type: "button", onClick: () => { editor.setSelectedAnnotation(null); }, style: { ...popoverButtonStyle, marginLeft: 4 }, "aria-label": "Close", children: "\u2304" })] }), _jsx("div", { style: { flex: 1, overflowY: "auto", padding: "8px 10px" }, children: ann.thread.length === 0 ? (_jsx("div", { style: { color: "var(--faint, #555)" }, children: "No comments yet." })) : (ann.thread.map((c) => (_jsxs("div", { style: { marginBottom: 10, position: "relative" }, children: [_jsx("button", { type: "button", onClick: () => { editor.removeComment(ann.id, c.id); }, "aria-label": "Delete comment", title: "Delete comment", style: {
+                                position: "absolute",
+                                top: 0,
+                                right: 0,
+                                background: "transparent",
+                                border: "none",
+                                color: "var(--muted, #888)",
+                                cursor: "pointer",
+                                padding: "0 4px",
+                                fontSize: 12,
+                                lineHeight: 1,
+                            }, children: "\u00D7" }), _jsxs("div", { style: {
+                                fontSize: 11,
+                                color: "var(--muted, #888)",
+                                marginBottom: 2,
+                            }, children: [_jsx("strong", { style: { color: "var(--text, #ddd)" }, children: c.authorName }), " ", formatTime(c.createdAt)] }), _jsx("div", { style: { whiteSpace: "pre-wrap", paddingRight: 16 }, children: _jsx(Markdown, { text: c.body }) })] }, c.id)))) }), _jsxs("form", { onSubmit: (ev) => {
+                    ev.preventDefault();
+                    submit();
+                }, style: {
+                    padding: "8px 10px",
+                    borderTop: "1px solid var(--divider, #333)",
+                    display: "flex",
+                    gap: 6,
+                }, children: [_jsx("input", { type: "text", value: draft, onChange: (ev) => { setDraft(ev.target.value); }, placeholder: "Reply\u2026", style: {
+                            flex: 1,
+                            background: "var(--button-bg, #2a2a2a)",
+                            border: "1px solid var(--border, #2a2a2a)",
+                            color: "inherit",
+                            padding: "4px 8px",
+                            borderRadius: 4,
+                            font: "inherit",
+                        } }), _jsx("button", { type: "submit", style: popoverButtonStyle, disabled: !draft.trim(), children: "Send" })] })] }));
+};
+const popoverButtonStyle = {
+    background: "var(--button-bg, #2a2a2a)",
+    border: "1px solid var(--border, #2a2a2a)",
+    color: "inherit",
+    padding: "3px 8px",
+    borderRadius: 4,
+    cursor: "pointer",
+    fontSize: 11,
+};
+const formatTime = (iso) => {
+    const date = new Date(iso);
+    if (Number.isNaN(date.getTime()))
+        return "";
+    return date.toLocaleString();
+};
+//# sourceMappingURL=comments-panel.js.map

package/dist/comments-panel.js.map

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