@oh-just-another/react-ui 0.57.0

package/dist/constants.d.ts

@@ -0,0 +1,112 @@
+/**
+ * Tunable visual sizes for the React UI panels and toolbar. Pixel values,
+ * overridable via component props when a host wants a different layout —
+ * these are the defaults baked into the built-in panels.
+ */
+/**
+ * Viewport width (CSS px) at/below which the chrome switches to its mobile
+ * layout (bottom-sheet property panel, etc.). Combined with `(pointer: coarse)`
+ * so touch tablets also get the mobile treatment regardless of width.
+ * See `useMobileLayout`.
+ */
+export declare const MOBILE_MAX_WIDTH_PX = 640;
+/** Width of the left palette panel, in CSS pixels. */
+export declare const PALETTE_WIDTH = 200;
+/** Pixel side of the per-template hit area inside the palette grid. */
+export declare const PALETTE_ITEM_SIZE = 28;
+/** Width of the right property panel, in CSS pixels. */
+export declare const PROPERTY_PANEL_WIDTH = 240;
+/** Pixel side of the colour swatches inside the property panel. */
+export declare const PROPERTY_SWATCH_SIZE = 12;
+/** Width of the layer panel, in CSS pixels. */
+export declare const LAYER_PANEL_WIDTH = 220;
+/** Pixel side of the toggle icon (visibility / lock) buttons. */
+export declare const LAYER_TOGGLE_ICON_SIZE = 20;
+/** Pixel side of the per-row colour swatch in the layer panel. */
+export declare const LAYER_SWATCH_SIZE = 22;
+/** Width of the comments popover, in CSS pixels. */
+export declare const COMMENTS_PANEL_WIDTH = 280;
+/** Pixel height of the toolbar vertical separator. */
+export declare const TOOLBAR_SEPARATOR_HEIGHT = 20;
+/**
+ * Default auto-dismiss time for a toast (ms). 0 / Infinity keep it
+ * open until the user clicks the × — useful for sticky errors.
+ */
+export declare const TOAST_DEFAULT_DURATION_MS = 3000;
+/**
+ * Maximum width of the `<HelpDialog>` modal in CSS pixels. The dialog
+ * still respects the viewport via `min(this, 100vw - 64px)`.
+ */
+export declare const HELP_DIALOG_MAX_WIDTH_PX = 720;
+/**
+ * Delay before a `<Tooltip>` opens on first hover (ms). Short enough to
+ * feel responsive on an intentional pause, long enough not to flash on a
+ * pointer that's just passing through.
+ */
+export declare const TOOLTIP_OPEN_DELAY_MS = 600;
+/**
+ * Window after a tooltip closes during which the next hover opens the next
+ * tooltip instantly — lets users scan a toolbar without waiting for each hint.
+ */
+export declare const TOOLTIP_SKIP_DELAY_MS = 600;
+/**
+ * Grace period before a tooltip actually hides after pointerleave.
+ * Small value smooths over pointer jitter at the edge of the
+ * trigger without letting stale hints linger.
+ */
+export declare const TOOLTIP_HIDE_GRACE_MS = 80;
+/**
+ * Distance in CSS pixels between the trigger edge and the tooltip
+ * box on the side specified by the `side` prop.
+ */
+export declare const TOOLTIP_OFFSET_PX = 6;
+/**
+ * Floating-panel positioning defaults for the `@floating-ui/dom`-positioned
+ * overlays. Each is the fallback used when the component is rendered without
+ * an explicit prop, so hosts can re-tune the spacing globally here.
+ *
+ * - `SELECTION_PANEL_OFFSET_PX` — distance between the selection floating
+ *   panel and the selected element's bbox. Range: 6–48.
+ * - `SELECTION_PANEL_EDGE_INSET_*_PX` — per-side inset that shrinks the region
+ *   the panel is allowed to occupy, measured from each viewport edge (fed to
+ *   the `shift` middleware as a per-side `padding`). The panel starts shifting
+ *   to stay inside the inset region as it approaches that edge, so it never
+ *   lands over fixed chrome on that side (top toolbar, bottom zoom bar, docked
+ *   side panels). Tune each side to the chrome that lives there. Range per
+ *   side: 0–320.
+ * - `POPOVER_OFFSET_PX` — distance between a popover and its trigger. Smaller
+ *   than the selection-panel gap since a popover hangs off a control, not a
+ *   shape. Range: 4–12.
+ */
+export declare const SELECTION_PANEL_OFFSET_PX = 48;
+/** Inset from the TOP edge — clears the top toolbar. */
+export declare const SELECTION_PANEL_EDGE_INSET_TOP_PX = 66;
+/** Inset from the RIGHT edge. Bump it if a right-docked panel must stay clear. */
+export declare const SELECTION_PANEL_EDGE_INSET_RIGHT_PX = 16;
+/** Inset from the BOTTOM edge — clears the bottom zoom / status bar. */
+export declare const SELECTION_PANEL_EDGE_INSET_BOTTOM_PX = 66;
+/** Inset from the LEFT edge — small margin (no left-docked chrome by default). */
+export declare const SELECTION_PANEL_EDGE_INSET_LEFT_PX = 16;
+export declare const POPOVER_OFFSET_PX = 6;
+/**
+ * Text contextual-panel controls.
+ *
+ * - `TEXT_FONT_SIZE_PRESETS` — the S/M/L/XL quick buckets in the font
+ *   size segmented control (world-unit px). The popover slider covers
+ *   the full {@link TEXT_FONT_SIZE_MIN}–{@link TEXT_FONT_SIZE_MAX} range.
+ * - `TEXT_FONT_SIZE_MIN` / `TEXT_FONT_SIZE_MAX` — slider clamp range.
+ * - `TEXT_FONT_STACKS` — font-family choices offered in the family
+ *   dropdown. `value` is written verbatim to `TextElement.fontFamily`;
+ *   `label` is the human name shown in the menu.
+ */
+export declare const TEXT_FONT_SIZE_PRESETS: readonly {
+    readonly label: string;
+    readonly value: number;
+}[];
+export declare const TEXT_FONT_SIZE_MIN = 8;
+export declare const TEXT_FONT_SIZE_MAX = 256;
+export declare const TEXT_FONT_STACKS: readonly {
+    readonly label: string;
+    readonly value: string;
+}[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,MAAM,CAAC;AAEvC,sDAAsD;AACtD,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,uEAAuE;AACvE,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,wDAAwD;AACxD,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,mEAAmE;AACnE,eAAO,MAAM,oBAAoB,KAAK,CAAC;AAEvC,+CAA+C;AAC/C,eAAO,MAAM,iBAAiB,MAAM,CAAC;AAErC,iEAAiE;AACjE,eAAO,MAAM,sBAAsB,KAAK,CAAC;AAEzC,kEAAkE;AAClE,eAAO,MAAM,iBAAiB,KAAK,CAAC;AAEpC,oDAAoD;AACpD,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,sDAAsD;AACtD,eAAO,MAAM,wBAAwB,KAAK,CAAC;AAE3C;;;GAGG;AACH,eAAO,MAAM,yBAAyB,OAAQ,CAAC;AAE/C;;;GAGG;AACH,eAAO,MAAM,wBAAwB,MAAM,CAAC;AAE5C;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;GAGG;AACH,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAEzC;;;;GAIG;AACH,eAAO,MAAM,qBAAqB,KAAK,CAAC;AAExC;;;GAGG;AACH,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,yBAAyB,KAAK,CAAC;AAC5C,wDAAwD;AACxD,eAAO,MAAM,iCAAiC,KAAK,CAAC;AACpD,kFAAkF;AAClF,eAAO,MAAM,mCAAmC,KAAK,CAAC;AACtD,wEAAwE;AACxE,eAAO,MAAM,oCAAoC,KAAK,CAAC;AACvD,kFAAkF;AAClF,eAAO,MAAM,kCAAkC,KAAK,CAAC;AACrD,eAAO,MAAM,iBAAiB,IAAI,CAAC;AAEnC;;;;;;;;;;GAUG;AACH,eAAO,MAAM,sBAAsB,EAAE,SAAS;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAM7F,CAAC;AACJ,eAAO,MAAM,kBAAkB,IAAI,CAAC;AACpC,eAAO,MAAM,kBAAkB,MAAM,CAAC;AACtC,eAAO,MAAM,gBAAgB,EAAE,SAAS;IAAE,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CAAE,EAQzF,CAAC"}

package/dist/constants.js

@@ -0,0 +1,119 @@
+/**
+ * Tunable visual sizes for the React UI panels and toolbar. Pixel values,
+ * overridable via component props when a host wants a different layout —
+ * these are the defaults baked into the built-in panels.
+ */
+/**
+ * Viewport width (CSS px) at/below which the chrome switches to its mobile
+ * layout (bottom-sheet property panel, etc.). Combined with `(pointer: coarse)`
+ * so touch tablets also get the mobile treatment regardless of width.
+ * See `useMobileLayout`.
+ */
+export const MOBILE_MAX_WIDTH_PX = 640;
+/** Width of the left palette panel, in CSS pixels. */
+export const PALETTE_WIDTH = 200;
+/** Pixel side of the per-template hit area inside the palette grid. */
+export const PALETTE_ITEM_SIZE = 28;
+/** Width of the right property panel, in CSS pixels. */
+export const PROPERTY_PANEL_WIDTH = 240;
+/** Pixel side of the colour swatches inside the property panel. */
+export const PROPERTY_SWATCH_SIZE = 12;
+/** Width of the layer panel, in CSS pixels. */
+export const LAYER_PANEL_WIDTH = 220;
+/** Pixel side of the toggle icon (visibility / lock) buttons. */
+export const LAYER_TOGGLE_ICON_SIZE = 20;
+/** Pixel side of the per-row colour swatch in the layer panel. */
+export const LAYER_SWATCH_SIZE = 22;
+/** Width of the comments popover, in CSS pixels. */
+export const COMMENTS_PANEL_WIDTH = 280;
+/** Pixel height of the toolbar vertical separator. */
+export const TOOLBAR_SEPARATOR_HEIGHT = 20;
+/**
+ * Default auto-dismiss time for a toast (ms). 0 / Infinity keep it
+ * open until the user clicks the × — useful for sticky errors.
+ */
+export const TOAST_DEFAULT_DURATION_MS = 3_000;
+/**
+ * Maximum width of the `<HelpDialog>` modal in CSS pixels. The dialog
+ * still respects the viewport via `min(this, 100vw - 64px)`.
+ */
+export const HELP_DIALOG_MAX_WIDTH_PX = 720;
+/**
+ * Delay before a `<Tooltip>` opens on first hover (ms). Short enough to
+ * feel responsive on an intentional pause, long enough not to flash on a
+ * pointer that's just passing through.
+ */
+export const TOOLTIP_OPEN_DELAY_MS = 600;
+/**
+ * Window after a tooltip closes during which the next hover opens the next
+ * tooltip instantly — lets users scan a toolbar without waiting for each hint.
+ */
+export const TOOLTIP_SKIP_DELAY_MS = 600;
+/**
+ * Grace period before a tooltip actually hides after pointerleave.
+ * Small value smooths over pointer jitter at the edge of the
+ * trigger without letting stale hints linger.
+ */
+export const TOOLTIP_HIDE_GRACE_MS = 80;
+/**
+ * Distance in CSS pixels between the trigger edge and the tooltip
+ * box on the side specified by the `side` prop.
+ */
+export const TOOLTIP_OFFSET_PX = 6;
+/**
+ * Floating-panel positioning defaults for the `@floating-ui/dom`-positioned
+ * overlays. Each is the fallback used when the component is rendered without
+ * an explicit prop, so hosts can re-tune the spacing globally here.
+ *
+ * - `SELECTION_PANEL_OFFSET_PX` — distance between the selection floating
+ *   panel and the selected element's bbox. Range: 6–48.
+ * - `SELECTION_PANEL_EDGE_INSET_*_PX` — per-side inset that shrinks the region
+ *   the panel is allowed to occupy, measured from each viewport edge (fed to
+ *   the `shift` middleware as a per-side `padding`). The panel starts shifting
+ *   to stay inside the inset region as it approaches that edge, so it never
+ *   lands over fixed chrome on that side (top toolbar, bottom zoom bar, docked
+ *   side panels). Tune each side to the chrome that lives there. Range per
+ *   side: 0–320.
+ * - `POPOVER_OFFSET_PX` — distance between a popover and its trigger. Smaller
+ *   than the selection-panel gap since a popover hangs off a control, not a
+ *   shape. Range: 4–12.
+ */
+export const SELECTION_PANEL_OFFSET_PX = 48;
+/** Inset from the TOP edge — clears the top toolbar. */
+export const SELECTION_PANEL_EDGE_INSET_TOP_PX = 66;
+/** Inset from the RIGHT edge. Bump it if a right-docked panel must stay clear. */
+export const SELECTION_PANEL_EDGE_INSET_RIGHT_PX = 16;
+/** Inset from the BOTTOM edge — clears the bottom zoom / status bar. */
+export const SELECTION_PANEL_EDGE_INSET_BOTTOM_PX = 66;
+/** Inset from the LEFT edge — small margin (no left-docked chrome by default). */
+export const SELECTION_PANEL_EDGE_INSET_LEFT_PX = 16;
+export const POPOVER_OFFSET_PX = 6;
+/**
+ * Text contextual-panel controls.
+ *
+ * - `TEXT_FONT_SIZE_PRESETS` — the S/M/L/XL quick buckets in the font
+ *   size segmented control (world-unit px). The popover slider covers
+ *   the full {@link TEXT_FONT_SIZE_MIN}–{@link TEXT_FONT_SIZE_MAX} range.
+ * - `TEXT_FONT_SIZE_MIN` / `TEXT_FONT_SIZE_MAX` — slider clamp range.
+ * - `TEXT_FONT_STACKS` — font-family choices offered in the family
+ *   dropdown. `value` is written verbatim to `TextElement.fontFamily`;
+ *   `label` is the human name shown in the menu.
+ */
+export const TEXT_FONT_SIZE_PRESETS = [
+    { label: "S", value: 16 },
+    { label: "M", value: 24 },
+    { label: "L", value: 36 },
+    { label: "XL", value: 64 },
+];
+export const TEXT_FONT_SIZE_MIN = 8;
+export const TEXT_FONT_SIZE_MAX = 256;
+export const TEXT_FONT_STACKS = [
+    // Labels map to the three fonts embedded in the WASM MSDF shaper
+    // (sans / serif / mono). Canvas2D resolves the same stacks against
+    // real system fonts. Keep the family keywords ("serif", "mono") in
+    // each value so the shaper's resolver picks the right embedded font.
+    { label: "Sans", value: "system-ui, sans-serif" },
+    { label: "Serif", value: "Georgia, 'Times New Roman', serif" },
+    { label: "Mono", value: "ui-monospace, 'SF Mono', Menlo, monospace" },
+];
+//# sourceMappingURL=constants.js.map

package/dist/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,GAAG,CAAC;AAEvC,sDAAsD;AACtD,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC;AAEjC,uEAAuE;AACvE,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAEpC,wDAAwD;AACxD,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAExC,mEAAmE;AACnE,MAAM,CAAC,MAAM,oBAAoB,GAAG,EAAE,CAAC;AAEvC,+CAA+C;AAC/C,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,CAAC;AAErC,iEAAiE;AACjE,MAAM,CAAC,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAEzC,kEAAkE;AAClE,MAAM,CAAC,MAAM,iBAAiB,GAAG,EAAE,CAAC;AAEpC,oDAAoD;AACpD,MAAM,CAAC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAExC,sDAAsD;AACtD,MAAM,CAAC,MAAM,wBAAwB,GAAG,EAAE,CAAC;AAE3C;;;GAGG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,KAAK,CAAC;AAE/C;;;GAGG;AACH,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAC;AAE5C;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAEzC;;;GAGG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAC;AAEzC;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,EAAE,CAAC;AAExC;;;GAGG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAEnC;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,EAAE,CAAC;AAC5C,wDAAwD;AACxD,MAAM,CAAC,MAAM,iCAAiC,GAAG,EAAE,CAAC;AACpD,kFAAkF;AAClF,MAAM,CAAC,MAAM,mCAAmC,GAAG,EAAE,CAAC;AACtD,wEAAwE;AACxE,MAAM,CAAC,MAAM,oCAAoC,GAAG,EAAE,CAAC;AACvD,kFAAkF;AAClF,MAAM,CAAC,MAAM,kCAAkC,GAAG,EAAE,CAAC;AACrD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAEnC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,MAAM,sBAAsB,GACjC;IACE,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;IACzB,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;IACzB,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,EAAE,EAAE;IACzB,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,EAAE,EAAE;CAC3B,CAAC;AACJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,CAAC;AACpC,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAC;AACtC,MAAM,CAAC,MAAM,gBAAgB,GAAkE;IAC7F,iEAAiE;IACjE,mEAAmE;IACnE,mEAAmE;IACnE,qEAAqE;IACrE,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,uBAAuB,EAAE;IACjD,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,mCAAmC,EAAE;IAC9D,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,2CAA2C,EAAE;CACtE,CAAC"}

package/dist/context-menu-controller.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+/** Screen-space (CSS px) + world-space point pair an open request carries. */
+export interface ContextMenuOpenRequest {
+    readonly screenPoint: {
+        readonly x: number;
+        readonly y: number;
+    };
+    readonly worldPoint: {
+        readonly x: number;
+        readonly y: number;
+    };
+}
+type OpenFn = (req: ContextMenuOpenRequest) => void;
+/**
+ * Shared imperative handle for the diagram's context menu. Lets UI
+ * outside the canvas — e.g. the "⋯" button in the selection floating
+ * panel — open the same menu that a right-click opens, positioned
+ * wherever the caller asks.
+ *
+ * `<ContextMenu>` registers its open handler on mount; callers use
+ * {@link useContextMenuController}.`open(...)`. When no `<ContextMenu>`
+ * is mounted, `open` is a no-op.
+ */
+export interface ContextMenuController {
+    readonly open: OpenFn;
+    /** `<ContextMenu>` registers its open handler here. */
+    readonly register: (fn: OpenFn) => () => void;
+}
+/**
+ * Provides a single {@link ContextMenuController} to everything
+ * inside. Mounted automatically by `<DiagramRoot>`; context flows
+ * through React portals, so the floating selection panel (portaled to
+ * `document.body`) still sees it.
+ */
+export declare const ContextMenuControllerProvider: ({ children }: {
+    readonly children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+/** Access the shared context-menu controller, or `null` outside a provider. */
+export declare const useContextMenuController: () => ContextMenuController | null;
+export {};
+//# sourceMappingURL=context-menu-controller.d.ts.map

package/dist/context-menu-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-controller.d.ts","sourceRoot":"","sources":["../src/context-menu-controller.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,8EAA8E;AAC9E,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,WAAW,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjE,QAAQ,CAAC,UAAU,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACjE;AAED,KAAK,MAAM,GAAG,CAAC,GAAG,EAAE,sBAAsB,KAAK,IAAI,CAAC;AAEpD;;;;;;;;;GASG;AACH,MAAM,WAAW,qBAAqB;IACpC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,uDAAuD;IACvD,QAAQ,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,IAAI,CAAC;CAC/C;AAID;;;;;GAKG;AACH,eAAO,MAAM,6BAA6B,GAAI,cAAc;IAAE,QAAQ,CAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,4CAmB3F,CAAC;AAEF,+EAA+E;AAC/E,eAAO,MAAM,wBAAwB,QAAO,qBAAqB,GAAG,IAC1B,CAAC"}

package/dist/context-menu-controller.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef, } from "react";
+const ContextMenuControllerContext = createContext(null);
+/**
+ * Provides a single {@link ContextMenuController} to everything
+ * inside. Mounted automatically by `<DiagramRoot>`; context flows
+ * through React portals, so the floating selection panel (portaled to
+ * `document.body`) still sees it.
+ */
+export const ContextMenuControllerProvider = ({ children }) => {
+    const ref = useRef(null);
+    const controller = useMemo(() => ({
+        open: (req) => ref.current?.(req),
+        register: (fn) => {
+            ref.current = fn;
+            return () => {
+                if (ref.current === fn)
+                    ref.current = null;
+            };
+        },
+    }), []);
+    return (_jsx(ContextMenuControllerContext.Provider, { value: controller, children: children }));
+};
+/** Access the shared context-menu controller, or `null` outside a provider. */
+export const useContextMenuController = () => useContext(ContextMenuControllerContext);
+//# sourceMappingURL=context-menu-controller.js.map

package/dist/context-menu-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu-controller.js","sourceRoot":"","sources":["../src/context-menu-controller.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,UAAU,EACV,OAAO,EACP,MAAM,GAEP,MAAM,OAAO,CAAC;AA0Bf,MAAM,4BAA4B,GAAG,aAAa,CAA+B,IAAI,CAAC,CAAC;AAEvF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAAC,EAAE,QAAQ,EAAoC,EAAE,EAAE;IAC9F,MAAM,GAAG,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IACxC,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CAAC;QACL,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,GAAG,CAAC;QACjC,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE;YACf,GAAG,CAAC,OAAO,GAAG,EAAE,CAAC;YACjB,OAAO,GAAG,EAAE;gBACV,IAAI,GAAG,CAAC,OAAO,KAAK,EAAE;oBAAE,GAAG,CAAC,OAAO,GAAG,IAAI,CAAC;YAC7C,CAAC,CAAC;QACJ,CAAC;KACF,CAAC,EACF,EAAE,CACH,CAAC;IACF,OAAO,CACL,KAAC,4BAA4B,CAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,YACrD,QAAQ,GAC6B,CACzC,CAAC;AACJ,CAAC,CAAC;AAEF,+EAA+E;AAC/E,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAiC,EAAE,CACzE,UAAU,CAAC,4BAA4B,CAAC,CAAC"}

package/dist/context-menu.d.ts

@@ -0,0 +1,53 @@
+import { type CSSProperties, type ReactNode } from "react";
+import type { Editor } from "@oh-just-another/state";
+/**
+ * Declarative menu entry. `divider` paints a separator; everything else
+ * is a clickable row.
+ *
+ * The `visible` / `disabled` predicates run against the *current* editor
+ * snapshot when the menu opens. They can read selection, mode, history
+ * state, anything on the editor.
+ */
+export type ContextMenuItem = {
+    readonly kind: "divider";
+} | {
+    readonly kind: "action";
+    readonly id: string;
+    readonly label: ReactNode;
+    readonly shortcut?: string;
+    readonly visible?: (editor: Editor, ctx: ContextMenuContext) => boolean;
+    readonly disabled?: (editor: Editor, ctx: ContextMenuContext) => boolean;
+    readonly onClick: (editor: Editor, ctx: ContextMenuContext) => void;
+};
+/** Per-open snapshot the menu hands to predicates and click handlers. */
+export interface ContextMenuContext {
+    /** World-space pointer position where the menu opened. */
+    readonly worldPoint: {
+        readonly x: number;
+        readonly y: number;
+    };
+    /** Screen-space pointer position (CSS pixels). */
+    readonly screenPoint: {
+        readonly x: number;
+        readonly y: number;
+    };
+}
+/**
+ * Render-prop helper that listens for `contextmenu` on the wrapped
+ * element, opens a positioned menu, and dispatches the chosen item's
+ * `onClick` against the live editor. Drop it as a sibling of the canvas
+ * surface inside `<DiagramRoot>`.
+ */
+export interface ContextMenuProps {
+    readonly items: readonly ContextMenuItem[];
+    /**
+     * Target element to attach the `contextmenu` listener to. Defaults to
+     * the element the trigger is rendered into.
+     */
+    readonly target?: HTMLElement | null;
+    readonly style?: CSSProperties;
+    readonly className?: string;
+}
+export declare const ContextMenu: ({ items, target, style, className }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const DEFAULT_CONTEXT_MENU: readonly ContextMenuItem[];
+//# sourceMappingURL=context-menu.d.ts.map

package/dist/context-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-menu.d.ts","sourceRoot":"","sources":["../src/context-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAKL,KAAK,aAAa,EAElB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAKrD;;;;;;;GAOG;AACH,MAAM,MAAM,eAAe,GACvB;IAAE,QAAQ,CAAC,IAAI,EAAE,SAAS,CAAA;CAAE,GAC5B;IACE,QAAQ,CAAC,IAAI,EAAE,QAAQ,CAAC;IACxB,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,kBAAkB,KAAK,OAAO,CAAC;IACxE,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,kBAAkB,KAAK,OAAO,CAAC;IACzE,QAAQ,CAAC,OAAO,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACrE,CAAC;AAEN,yEAAyE;AACzE,MAAM,WAAW,kBAAkB;IACjC,0DAA0D;IAC1D,QAAQ,CAAC,UAAU,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IAChE,kDAAkD;IAClD,QAAQ,CAAC,WAAW,EAAE;QAAE,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAClE;AAOD;;;;;GAKG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,KAAK,EAAE,SAAS,eAAe,EAAE,CAAC;IAC3C;;;OAGG;IACH,QAAQ,CAAC,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,KAAK,CAAC,EAAE,aAAa,CAAC;IAC/B,QAAQ,CAAC,SAAS,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,WAAW,GAAI,qCAAqC,gBAAgB,mDAmIhF,CAAC;AA6GF,eAAO,MAAM,oBAAoB,EAAE,SAAS,eAAe,EA2I1D,CAAC"}