@loradb/lora-graph-canvas 0.10.0

package/dist/internal/accessor-fn.d.ts

@@ -0,0 +1,2 @@
+export type Accessor<T> = T | string | ((obj: unknown) => T);
+export default function accessorFn<T = unknown>(param: Accessor<T> | null | undefined): (obj: unknown) => T;

package/dist/internal/bezier.d.ts

@@ -0,0 +1,16 @@
+export declare class Bezier {
+    #private;
+    constructor(...pts: number[]);
+    /** Point on the curve at parameter `t` ∈ [0, 1]. Implementation
+     *  uses the explicit cubic / quadratic forms (faster than
+     *  de Casteljau for two/three subdivisions). */
+    get(t: number): {
+        x: number;
+        y: number;
+    };
+    /** Arc length via Gauss-Legendre quadrature would be cleaner, but
+     *  this consumer only uses the length to position arrowheads and
+     *  photons — a 40-step polyline approximation is plenty accurate.
+     *  Allocation-free in the steady state (one number per step). */
+    length(): number;
+}

package/dist/internal/canvas-color-tracker.d.ts

@@ -0,0 +1,13 @@
+export default class CanvasColorTracker<T = unknown> {
+    #private;
+    constructor(csBits?: number);
+    reset(): void;
+    /** Allocate a fresh colour for `obj` and return its hex string,
+     *  or `null` once the registry is full. */
+    register(obj: T): string | null;
+    /** Reverse a hex string (as returned by `register`) or an [r,g,b]
+     *  triple (as read from `ImageData.data`) back to its registered
+     *  object. Returns `null` if the colour doesn't decode to a valid
+     *  entry or fails the checksum. */
+    lookup(color: string | [number, number, number]): T | null;
+}

package/dist/internal/debounce.d.ts

@@ -0,0 +1,5 @@
+export interface Debounced<F extends (...args: never[]) => unknown> {
+    (...args: Parameters<F>): void;
+    cancel: () => void;
+}
+export declare function debounce<F extends (...args: never[]) => unknown>(fn: F, wait: number): Debounced<F>;

package/dist/internal/float-tooltip.d.ts

@@ -0,0 +1,14 @@
+export type TooltipContent = string | HTMLElement | false | null;
+export interface TooltipOptions {
+    style?: Partial<CSSStyleDeclaration>;
+}
+export default class Tooltip {
+    #private;
+    constructor(host: HTMLElement, options?: TooltipOptions);
+    content(): TooltipContent;
+    content(value: TooltipContent): this;
+    offsetX(): number | string | null;
+    offsetX(value: number | string | null): this;
+    offsetY(): number | string | null;
+    offsetY(value: number | string | null): this;
+}

package/dist/internal/kapsule-link.d.ts

@@ -0,0 +1,24 @@
+type ChainableKapsule = {
+    _destructor?: () => void;
+    [k: string]: unknown;
+};
+type KapsuleConstructor = new () => ChainableKapsule;
+interface KapsulePropConfig {
+    default: unknown;
+    onChange: (v: unknown, state: Record<string, ChainableKapsule>) => void;
+    triggerUpdate: false;
+}
+interface KapsuleLinker {
+    /** Build a kapsule prop config that forwards the prop to one or more
+     *  named inner kapsules on every change. The `default` is read from a
+     *  throwaway instance of the inner kapsule type so it stays in sync
+     *  with upstream. */
+    linkProp: (prop: string) => KapsulePropConfig;
+    /** Build a method shim that calls `method(...args)` on every named
+     *  inner kapsule and returns either the inner's return value (when
+     *  it's not the kapsule itself, i.e. a getter) or `this` for chain
+     *  continuity. */
+    linkMethod: (method: string) => (state: Record<string, ChainableKapsule>, ...args: unknown[]) => unknown;
+}
+export default function kapsuleLink(kapsulePropNames: string | string[], kapsuleType: KapsuleConstructor): KapsuleLinker;
+export {};

package/dist/internal/kapsule.d.ts

@@ -0,0 +1,43 @@
+export interface KapsuleState {
+    initialised: boolean;
+    _rerender: () => void;
+    [key: string]: unknown;
+}
+export interface PropConfig {
+    /** Default prop value, applied at construction time. */
+    default?: unknown;
+    /** Fire `update()` after this prop changes. Default true. */
+    triggerUpdate?: boolean;
+    /** Callback fired synchronously when the prop changes. */
+    onChange?: (newVal: unknown, state: KapsuleState, prevVal: unknown) => void;
+}
+export type KapsuleMethod = (state: KapsuleState, ...args: any[]) => unknown;
+export interface KapsuleConfig {
+    props?: Record<string, PropConfig>;
+    methods?: Record<string, KapsuleMethod>;
+    /** Alias one prop/method name to another (for backwards compat). */
+    aliases?: Record<string, string>;
+    /** Initial state factory. Run once at construction. */
+    stateInit?: (options?: Record<string, unknown>) => Partial<KapsuleState>;
+    /** Constructor-time initialiser. Receives the host element (or
+     *  whatever was passed to `new Kapsule(...)`). Typed `any` so
+     *  consumers can declare a narrower DOM type without an extra cast. */
+    init?: (constructorItem: any, state: KapsuleState, options?: Record<string, unknown>) => void;
+    /** Trailing-edge digest. Fired after each batch of prop changes. */
+    update?: (state: KapsuleState, changedProps: Record<string, unknown>) => void;
+}
+/** A kapsule instance — every prop/method ends up as a chainable
+ *  property on the result. We type it loosely (any-keyed) because
+ *  the concrete shape depends on the caller's `props`/`methods`;
+ *  consumers can narrow by declaring their own interface and casting
+ *  the return through `unknown`. */
+export interface KapsuleInstance {
+    (constructorItem?: unknown): KapsuleInstance;
+    resetProps: () => KapsuleInstance;
+    [propOrMethod: string]: (...args: unknown[]) => unknown;
+}
+export interface KapsuleClassCtor {
+    new (element?: unknown, options?: Record<string, unknown>): KapsuleInstance;
+    (element?: unknown, options?: Record<string, unknown>): KapsuleInstance;
+}
+export default function Kapsule(cfg?: KapsuleConfig): KapsuleClassCtor;

package/dist/internal/throttle.d.ts

@@ -0,0 +1,6 @@
+export interface Throttled<F extends (...args: never[]) => unknown> {
+    (...args: Parameters<F>): ReturnType<F> | undefined;
+    flush: () => ReturnType<F> | undefined;
+    cancel: () => void;
+}
+export declare function throttle<F extends (...args: never[]) => unknown>(fn: F, wait: number): Throttled<F>;

package/dist/internal/tween.d.ts

@@ -0,0 +1,31 @@
+type Numbers = Record<string, number>;
+type EasingFn = (k: number) => number;
+export declare const Easing: {
+    readonly Linear: {
+        readonly None: (k: number) => number;
+    };
+    readonly Quadratic: {
+        readonly In: (k: number) => number;
+        readonly Out: (k: number) => number;
+        readonly InOut: (k: number) => number;
+    };
+};
+export declare class Group {
+    #private;
+    add<T extends Numbers>(t: Tween<T>): void;
+    remove<T extends Numbers>(t: Tween<T>): void;
+    /** Step every active tween. Should be called once per animation
+     *  frame; finished tweens self-remove via their `onComplete`. */
+    update(time?: number): void;
+}
+export declare class Tween<T extends Numbers> {
+    #private;
+    constructor(initial: T);
+    to(target: Partial<T>, duration: number): this;
+    easing(fn: EasingFn): this;
+    onUpdate(cb: (obj: T) => void): this;
+    onComplete(cb: (this: Tween<T>, obj: T) => void): this;
+    start(time?: number): this;
+    update(time: number): boolean;
+}
+export {};

package/dist/style.css

@@ -0,0 +1 @@
+.graph-info-msg{top:50%;width:100%;text-align:center;color:#e6e6fa;opacity:.7;font-size:22px;position:absolute;font-family:Sans-serif}.scene-container .clickable{cursor:pointer}.scene-container .grabbable{cursor:move;cursor:grab;cursor:-moz-grab;cursor:-webkit-grab}.scene-container .grabbable:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.lora-graph-canvas{--lgc-bg: transparent;--lgc-fg: #1c1f23;--lgc-border: #d8dde3;--lgc-accent: #4f8ef7;--lgc-toolbar-bg: rgba(255, 255, 255, .92);--lgc-toolbar-fg: var(--lgc-fg);--lgc-toolbar-border: var(--lgc-border);--lgc-tool-active-bg: rgba(79, 142, 247, .18);--lgc-tool-hover-bg: rgba(0, 0, 0, .05);--lgc-tooltip-bg: rgba(28, 31, 35, .9);--lgc-tooltip-fg: #ffffff;--lgc-menu-bg: #ffffff;--lgc-menu-fg: var(--lgc-fg);--lgc-menu-hover-bg: rgba(0, 0, 0, .06);--lgc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--lgc-font-size: 13px;position:relative;overflow:hidden;background:var(--lgc-bg);color:var(--lgc-fg);font-family:var(--lgc-font);font-size:var(--lgc-font-size)}.lora-graph-canvas .lgc-engine-mount{position:absolute;inset:0}.lora-graph-canvas .lgc-engine-mount>canvas{display:block}.lora-graph-canvas .lgc-toolbar{position:absolute;display:flex;gap:2px;padding:4px;background:var(--lgc-toolbar-bg);color:var(--lgc-toolbar-fg);border:1px solid var(--lgc-toolbar-border);border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 1px 2px #0000000f;z-index:2}.lora-graph-canvas .lgc-toolbar--top,.lora-graph-canvas .lgc-toolbar--top-right,.lora-graph-canvas .lgc-toolbar--top-left{top:12px}.lora-graph-canvas .lgc-toolbar--top{left:50%;transform:translate(-50%)}.lora-graph-canvas .lgc-toolbar--top-right{right:12px}.lora-graph-canvas .lgc-toolbar--top-left{left:12px}.lora-graph-canvas .lgc-toolbar--bottom{bottom:12px;left:50%;transform:translate(-50%)}.lora-graph-canvas .lgc-tool{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:6px;background:transparent;color:inherit;cursor:pointer;transition:background-color 90ms ease,color 90ms ease}.lora-graph-canvas .lgc-tool:hover{background:var(--lgc-tool-hover-bg)}.lora-graph-canvas .lgc-tool--active{background:var(--lgc-tool-active-bg);color:var(--lgc-accent)}.lora-graph-canvas .lgc-tool--disabled,.lora-graph-canvas .lgc-tool:disabled{opacity:.35;cursor:not-allowed}.lora-graph-canvas .lgc-tool--disabled:hover,.lora-graph-canvas .lgc-tool:disabled:hover{background:transparent}.lora-graph-canvas .lgc-tool:focus-visible{outline:2px solid var(--lgc-accent);outline-offset:1px}.lora-graph-canvas .lgc-selpanel{position:absolute;top:12px;left:12px;display:flex;align-items:center;gap:4px;padding:4px 6px 4px 10px;background:var(--lgc-toolbar-bg);color:var(--lgc-toolbar-fg);border:1px solid var(--lgc-toolbar-border);border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 1px 2px #0000000f;font-size:12px;z-index:2}.lora-graph-canvas .lgc-selpanel-label{font-weight:500;white-space:nowrap}.lora-graph-canvas .lgc-selpanel-divider{width:1px;height:16px;background:var(--lgc-toolbar-border);margin:0 2px}.lora-graph-canvas .lgc-selpanel-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer;transition:background-color 90ms ease}.lora-graph-canvas .lgc-selpanel-btn:hover{background:var(--lgc-tool-hover-bg)}.lora-graph-canvas .lgc-selpanel-btn:disabled{opacity:.35;cursor:not-allowed}.lora-graph-canvas .lgc-selpanel-btn:disabled:hover{background:transparent}.lora-graph-canvas .lgc-options-menu{position:absolute;bottom:52px;right:12px;z-index:2}.lora-graph-canvas .lgc-options-trigger{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;background:var(--lgc-toolbar-bg);color:var(--lgc-toolbar-fg);border:1px solid var(--lgc-toolbar-border);border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 1px 2px #0000000f;cursor:pointer;transition:background-color 90ms ease}.lora-graph-canvas .lgc-options-trigger:hover{background:var(--lgc-tool-hover-bg)}.lora-graph-canvas .lgc-options-trigger:focus-visible{outline:2px solid var(--lgc-accent);outline-offset:1px}.lora-graph-canvas .lgc-options-panel{position:absolute;bottom:36px;right:0;min-width:220px;padding:6px;background:var(--lgc-menu-bg);color:var(--lgc-menu-fg);border:1px solid var(--lgc-toolbar-border);border-radius:8px;box-shadow:0 8px 24px #00000029;font-size:12px;line-height:1.3}.lora-graph-canvas .lgc-options-item{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:4px;cursor:pointer}.lora-graph-canvas .lgc-options-item:hover{background:var(--lgc-menu-hover-bg)}.lora-graph-canvas .lgc-options-item input[type=checkbox]{margin-top:2px}.lora-graph-canvas .lgc-options-item-text{display:flex;flex-direction:column;gap:2px}.lora-graph-canvas .lgc-options-item-label{font-weight:500}.lora-graph-canvas .lgc-options-item-hint{opacity:.65;font-size:11px}.lora-graph-canvas .lgc-options-select{margin-left:auto;font:inherit;font-size:11px;padding:2px 4px;background:var(--lgc-toolbar-bg);color:var(--lgc-toolbar-fg);border:1px solid var(--lgc-toolbar-border);border-radius:4px}.lora-graph-canvas .lgc-mode-toggle{position:absolute;bottom:12px;right:12px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:var(--lgc-toolbar-bg);color:var(--lgc-toolbar-fg);border:1px solid var(--lgc-toolbar-border);border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 1px 2px #0000000f;font:inherit;font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer;z-index:2;transition:background-color 90ms ease}.lora-graph-canvas .lgc-mode-toggle:hover{background:var(--lgc-tool-hover-bg)}.lora-graph-canvas .lgc-mode-toggle:focus-visible{outline:2px solid var(--lgc-accent);outline-offset:1px}.lora-graph-canvas .lgc-mode-toggle-label{font-variant-numeric:tabular-nums}.lora-graph-canvas .lgc-legend{position:absolute;bottom:12px;left:12px;display:flex;flex-direction:column;gap:2px;padding:6px;background:var(--lgc-toolbar-bg);color:var(--lgc-toolbar-fg);border:1px solid var(--lgc-toolbar-border);border-radius:8px;backdrop-filter:blur(8px);font-size:12px;z-index:2;max-height:40%;overflow-y:auto}.lora-graph-canvas .lgc-legend-item{appearance:none;display:flex;align-items:center;gap:8px;padding:2px 8px 2px 4px;border:0;border-radius:4px;background:transparent;color:inherit;cursor:pointer;text-align:left;font:inherit}.lora-graph-canvas .lgc-legend-item:hover{background:var(--lgc-tool-hover-bg)}.lora-graph-canvas .lgc-legend-item--hidden{opacity:.35;text-decoration:line-through}.lora-graph-canvas .lgc-legend-swatch{display:inline-block;width:12px;height:12px;border-radius:3px}.lora-graph-canvas .lgc-marquee{position:absolute;border:1px dashed var(--lgc-accent);background:color-mix(in srgb,var(--lgc-accent) 12%,transparent);border-radius:2px;z-index:2}.lora-graph-canvas .lgc-tooltip{position:absolute;max-width:280px;padding:4px 8px;background:var(--lgc-tooltip-bg);color:var(--lgc-tooltip-fg);border-radius:4px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;z-index:4;box-shadow:0 2px 6px #0000001f}.lora-graph-canvas .lgc-menu{position:absolute;min-width:180px;padding:4px;background:var(--lgc-menu-bg);color:var(--lgc-menu-fg);border:1px solid var(--lgc-toolbar-border);border-radius:8px;box-shadow:0 8px 24px #00000029;z-index:3}.lora-graph-canvas .lgc-menu-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:4px;cursor:pointer;user-select:none}.lora-graph-canvas .lgc-menu-item:hover{background:var(--lgc-menu-hover-bg)}.lora-graph-canvas .lgc-menu-separator{height:1px;margin:4px 0;background:var(--lgc-toolbar-border)}

package/dist/theme/presets.d.ts

@@ -0,0 +1,8 @@
+import { LoraGraphTheme } from '../types';
+/** Light theme — matches the package default. Useful as a reset value
+ *  when toggling between presets. */
+export declare const lightTheme: LoraGraphTheme;
+/** Dark theme — dark surface, accent kept blue. The engine
+ *  `backgroundColor` accessor is independent; pair this with a dark
+ *  `backgroundColor` prop for the full effect. */
+export declare const darkTheme: LoraGraphTheme;

package/dist/tools/ContextMenu.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export interface ContextMenuItem {
+    id: string;
+    label: ReactNode;
+    shortcut?: string;
+    disabled?: boolean;
+    onSelect(): void;
+}
+export interface ContextMenuProps {
+    x: number;
+    y: number;
+    items: Array<ContextMenuItem | {
+        separator: true;
+    }>;
+    onClose(): void;
+}
+export declare function ContextMenu({ x, y, items, onClose }: ContextMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/tools/GraphToolbar.d.ts

@@ -0,0 +1,18 @@
+import { ToolId, ToolbarConfig } from '../types';
+export interface GraphToolbarProps {
+    /** Tools the user configured. Falsy → none; `true` → defaults;
+     *  array → that exact order; object → include/exclude + position. */
+    config: boolean | ToolId[] | ToolbarConfig;
+    /** Currently active *toggleable* tool (the cursor mode). */
+    activeTool: ToolId;
+    /** Engine paused state, so we can swap pause↔resume into one slot. */
+    paused: boolean;
+    /** Current view mode, so the toggle-mode button can show the right
+     *  icon and the right tooltip. */
+    mode: "2d" | "3d";
+    /** Optional predicate to grey out individual tools (e.g. undo / redo
+     *  when the corresponding stack is empty). */
+    isDisabled?: (id: ToolId) => boolean;
+    onSelect(id: ToolId): void;
+}
+export declare function GraphToolbar(props: GraphToolbarProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/tools/GroupLegend.d.ts

@@ -0,0 +1,11 @@
+import { NodeObject } from '../types';
+export interface GroupLegendProps<N extends NodeObject = NodeObject> {
+    nodes: N[];
+    /** Same accessor as `nodeAutoColorBy` — string key or function. */
+    groupBy?: string | ((n: N) => string | number | null);
+    /** Hidden group keys (stringified). Toggled by clicking. */
+    hidden: Set<string>;
+    onToggle(group: string): void;
+}
+export declare function colorForGroup(group: string): string;
+export declare function GroupLegend<N extends NodeObject = NodeObject>({ nodes, groupBy, hidden, onToggle, }: GroupLegendProps<N>): import("react/jsx-runtime").JSX.Element | null;

package/dist/tools/HoverTooltip.d.ts

@@ -0,0 +1,15 @@
+export interface HoverTooltipProps {
+    /** Content the tooltip should display. Pass `null` to hide. */
+    content: string | HTMLElement | null;
+    /** Host element to anchor against (positions are relative to this). */
+    hostRef: React.RefObject<HTMLElement | null>;
+}
+/** Floating tooltip that tracks the mouse position inside the host
+ *  element. Hidden when `content` is null.
+ *
+ *  Perf note: the mousemove listener (and the per-move
+ *  `getBoundingClientRect`) is only installed while there is content
+ *  to show. Otherwise we'd be doing a forced layout + React render at
+ *  60Hz whenever the user's mouse is over the canvas, even though
+ *  nothing is being displayed. Themed via --lgc-tooltip-*. */
+export declare function HoverTooltip({ content, hostRef }: HoverTooltipProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/tools/MarqueeOverlay.d.ts

@@ -0,0 +1,13 @@
+export interface MarqueeRect {
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+}
+export interface MarqueeOverlayProps {
+    rect: MarqueeRect | null;
+}
+/** Renders the dashed selection rectangle while the user is dragging a
+ *  marquee. Positioned absolutely inside the host. Hidden when `rect`
+ *  is null. */
+export declare function MarqueeOverlay({ rect }: MarqueeOverlayProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/tools/ModeToggle.d.ts

@@ -0,0 +1,10 @@
+export interface ModeToggleProps {
+    mode: "2d" | "3d";
+    onToggle(): void;
+}
+/** Floating bottom-right pill that switches between 2D and 3D modes.
+ *  Pulled out of the main toolbar so it stays out of the way and is
+ *  always findable. Hosts who want the toggle inline can add
+ *  `"toggle-mode"` to their `tools` array — the inline button keeps
+ *  working alongside this one. */
+export declare function ModeToggle({ mode, onToggle }: ModeToggleProps): import("react/jsx-runtime").JSX.Element;

package/dist/tools/OptionsMenu.d.ts

@@ -0,0 +1,28 @@
+/** A single entry shown inside the menu. Either a boolean checkbox
+ *  or a dropdown select. */
+export type OptionItem = {
+    kind?: "toggle";
+    id: string;
+    label: string;
+    checked: boolean;
+    onChange(next: boolean): void;
+    hint?: string;
+} | {
+    kind: "select";
+    id: string;
+    label: string;
+    value: string;
+    options: Array<{
+        value: string;
+        label?: string;
+    }>;
+    onChange(next: string): void;
+    hint?: string;
+};
+export interface OptionsMenuProps {
+    items: OptionItem[];
+}
+/** Floating bottom-right button + popover. The button toggles a small
+ *  panel of checkbox-style options. Auto-closes on outside click /
+ *  Escape. Renders nothing if `items` is empty. */
+export declare function OptionsMenu({ items }: OptionsMenuProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/tools/SelectionPanel.d.ts

@@ -0,0 +1,18 @@
+export interface SelectionPanelProps {
+    nodeCount: number;
+    linkCount: number;
+    hasClipboard: boolean;
+    enableClipboard: boolean;
+    onDelete(): void;
+    onDuplicate(): void;
+    onAddConnected(): void;
+    onCopy(): void;
+    onCut(): void;
+    onPaste(): void;
+    onClear(): void;
+}
+/** Inline summary that sits in the top-left of the canvas while
+ *  anything is selected. Surfaces the count + the most common
+ *  selection-scoped actions so the user doesn't have to reach for
+ *  the right-side toolbar. Hidden when nothing is selected. */
+export declare function SelectionPanel({ nodeCount, linkCount, hasClipboard, enableClipboard, onDelete, onDuplicate, onAddConnected, onCopy, onCut, onPaste, onClear, }: SelectionPanelProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/tools/icons.d.ts

@@ -0,0 +1,23 @@
+import { SVGProps } from 'react';
+type IconProps = SVGProps<SVGSVGElement>;
+export declare const IconSelect: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconPan: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconAddNode: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconAddLink: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconDelete: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconFit: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconZoomIn: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconZoomOut: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconPause: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconResume: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconScreenshot: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconCube: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconSquare: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconDuplicate: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconSelectAll: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconExport: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const IconImport: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+/** Source node on the left, a "+" on the right, joined by an edge —
+ *  visualises "create a new node connected to the selection". */
+export declare const IconAddConnected: (p: IconProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/tools/tools.d.ts

@@ -0,0 +1,37 @@
+import { ComponentType, SVGProps } from 'react';
+import { ToolId } from '../types';
+export interface ToolDescriptor {
+    id: ToolId;
+    label: string;
+    /** Aria label / tooltip. */
+    hint: string;
+    icon: ComponentType<SVGProps<SVGSVGElement>>;
+    /** Tools that toggle an active mode (select, pan, add-node, add-link).
+     *  Others are one-shot actions. */
+    toggleable?: boolean;
+    /** Suggested keybinding. The toolbar surfaces this in tooltips; the
+     *  actual binding is registered by the component. */
+    shortcut?: string;
+}
+export declare const TOOL_DESCRIPTORS: Record<ToolId, ToolDescriptor>;
+/** Default toolbar order when `tools={true}`.
+ *
+ *  Tools are grouped by purpose:
+ *    1. cursor modes (select, pan, add-node, add-link)
+ *    2. view (fit, zoom-in, zoom-out)
+ *    3. engine (pause, resume)
+ *    4. file ops (screenshot, export-json, import-json)
+ *
+ *  Selection-scoped actions — delete, duplicate, copy, cut, paste,
+ *  clear — live in the auto-appearing top-left SelectionPanel so the
+ *  main toolbar doesn't restate the same controls. `select-all` lives
+ *  with the cursor modes (Cmd+A keybinding) since it bootstraps a
+ *  selection rather than acting on one. `toggle-mode` is its own
+ *  bottom-right pill (`<ModeToggle>`). Hosts who want a different
+ *  layout can pass their own `tools` array. */
+export declare const DEFAULT_TOOL_ORDER: ToolId[];
+/** Icon for the toggle-mode button, depending on the currently active
+ *  mode (we render a cube when in 2D — "switch to 3D" — and a square
+ *  when in 3D). The toolbar reads from this rather than the static
+ *  descriptor for that one button. */
+export declare function toggleModeIcon(currentMode: "2d" | "3d"): (p: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;