entangle-ui 0.9.0 → 0.10.0

package/dist/types/components/editor/AssetBrowser/assetBrowserLabels.d.ts

@@ -0,0 +1,70 @@
+import { AssetSortField } from './AssetBrowser.types.js';
+
+/**
+ * Every user-facing string in the AssetBrowser chrome. Pass a partial
+ * `labels` prop to translate or reword any subset; unspecified keys fall back
+ * to {@link DEFAULT_ASSET_BROWSER_LABELS} (English).
+ *
+ * The `*Aria` keys are accessible names (screen-reader only); the rest are
+ * visible text. `sortFields` maps each sortable field id to its menu/column
+ * label. `itemCount` / `selectedCount` build the live-region announcement and
+ * receive the relevant counts.
+ */
+interface AssetBrowserLabels {
+    /** Search input placeholder. @default "Search assets…" */
+    searchPlaceholder: string;
+    /** Accessible name of the view-mode toggle. @default "View mode" */
+    viewModeAria: string;
+    /** Grid-view tooltip. @default "Grid view" */
+    gridViewTooltip: string;
+    /** List-view tooltip. @default "List view" */
+    listViewTooltip: string;
+    /** Accessible name of the grid region. @default "Assets" */
+    gridAria: string;
+    /** Sort menu trigger. @default "Sort" */
+    sort: string;
+    /** Ascending radio item. @default "Ascending" */
+    sortAscending: string;
+    /** Descending radio item. @default "Descending" */
+    sortDescending: string;
+    /** Filter menu trigger. @default "Filter" */
+    filter: string;
+    /** Back button accessible name. @default "Back" */
+    back: string;
+    /** Forward button accessible name. @default "Forward" */
+    forward: string;
+    /** Thumbnail-size control accessible name. @default "Thumbnail size" */
+    thumbnailSizeAria: string;
+    /** Default empty-folder message. @default "This folder is empty." */
+    empty: string;
+    /** Loading message (list view) / skeleton aria. @default "Loading assets…" */
+    loading: string;
+    /** Built-in error title. @default "Couldn’t load assets" */
+    errorTitle: string;
+    /** Built-in error description. */
+    errorDescription: string;
+    /** Retry button. @default "Retry" */
+    retry: string;
+    /** File-import drop overlay. @default "Drop files to import" */
+    importOverlay: string;
+    /** List "Type" value for folders. @default "Folder" */
+    folder: string;
+    /** Rename default-action label + rename-field accessible name. @default "Rename" */
+    rename: string;
+    /** Delete default-action label. @default "Delete" */
+    delete: string;
+    /** Duplicate default-action label. @default "Duplicate" */
+    duplicate: string;
+    /** New-folder default-action label. @default "New folder" */
+    newFolder: string;
+    /** Per-sort-field labels (also the list column headers). */
+    sortFields: Record<AssetSortField, string>;
+    /** Live-region item count, e.g. `n => \`${n} items\``. */
+    itemCount: (count: number) => string;
+    /** Live-region selected count suffix, e.g. `n => \`, ${n} selected\``. */
+    selectedCount: (count: number) => string;
+}
+declare const DEFAULT_ASSET_BROWSER_LABELS: AssetBrowserLabels;
+
+export { DEFAULT_ASSET_BROWSER_LABELS };
+export type { AssetBrowserLabels };

package/dist/types/components/editor/ChatPanel/ChatMarkdownRenderer.types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
 import { BaseComponent } from '../../../types/common.js';
 import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 interface ChatMarkdownRendererBaseProps extends BaseComponent {
     /** Raw markdown content. */

package/dist/types/components/editor/ChatPanel/ChatPanel.types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Prettify } from '../../../types/utilities.js';
 import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+import React from 'react';
 
 /**
  * Standard message roles in an LLM conversation.

package/dist/types/components/editor/Minimap/Minimap.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { MinimapProps } from './Minimap.types.js';
+
+/**
+ * Compact navigation widget for editor viewports. Renders a miniature of
+ * the world content alongside a draggable rectangle that mirrors the main
+ * viewport's visible region. Intended to be shared by NodeGraph, Timeline,
+ * and any custom 2D editor surface.
+ *
+ * Designed as a controlled primitive — pass the current `transform` /
+ * `viewportSize` from your `<Viewport>` and translate `onNavigate.worldPoint`
+ * into a `viewport.centerOn(...)` call.
+ *
+ * Children may include `<Minimap.Title>`, `<Minimap.Footer>`,
+ * `<Minimap.Corner>` slot subcomponents — any other nodes render as a
+ * free-form overlay layer above the canvas body. Children can read live
+ * state (hover position, hovered item id, transform) via
+ * `useMinimapContext()` / `useMinimapHover()` / `useMinimapGeometry()` /
+ * `useMinimapDragState()`.
+ */
+declare const Minimap: {
+    ({ items, worldBounds, transform, viewportSize, onNavigate, width, minHeight, maxHeight, interactions, keyboardPanStep, backgroundColor, defaultItemColor, viewportRectStroke, outsideOverlay, renderOverlay, disabled, ariaLabel, className, style, testId, id, children, ref, ...rest }: MinimapProps): React.ReactElement;
+    displayName: string;
+};
+
+export { Minimap };

package/dist/types/components/editor/Minimap/Minimap.types.d.ts

@@ -0,0 +1,249 @@
+import { Point2D } from '../../primitives/canvas/canvas.types.js';
+import React from 'react';
+import { WorldRect, ViewportSize, ViewportTransform } from '../../primitives/viewport/Viewport.types.js';
+import { BaseComponent } from '../../../types/common.js';
+import { Prettify } from '../../../types/utilities.js';
+
+/**
+ * Helpers and current state passed to `renderOverlay` and to custom item
+ * `draw` callbacks. Exposes the same world ↔ minimap math the built-in
+ * shapes use, so consumer drawing stays aligned with everything else.
+ */
+interface MinimapDrawInfo {
+    /** Minimap size in CSS pixels (canvas already DPR-scaled). */
+    minimapSize: ViewportSize;
+    /** World rectangle this minimap maps from. */
+    worldBounds: WorldRect;
+    /** Current main-viewport transform (mirrored). */
+    transform: ViewportTransform;
+    /** Current main-viewport size in CSS pixels (mirrored). */
+    viewportSize: ViewportSize;
+    /** Uniform world → minimap scale (px per world unit). */
+    scale: number;
+    /** Letterbox offset applied when minimap aspect ≠ worldBounds aspect. */
+    offset: Point2D;
+    /** Map a world point to a minimap CSS-pixel point. */
+    worldToMinimap: (point: Point2D) => Point2D;
+    /** Inverse of `worldToMinimap`. */
+    minimapToWorld: (point: Point2D) => Point2D;
+}
+interface MinimapItemBase {
+    /** Stable identity. Used for hover hit-testing and future selection support. */
+    id: string;
+    /** Override draw color for this item. Falls back to `defaultItemColor`. */
+    color?: string;
+}
+interface MinimapRectItem extends MinimapItemBase {
+    type: 'rect';
+    /** Top-left X in world units. */
+    x: number;
+    /** Top-left Y in world units. */
+    y: number;
+    /** Width in world units. */
+    width: number;
+    /** Height in world units. */
+    height: number;
+}
+interface MinimapCircleItem extends MinimapItemBase {
+    type: 'circle';
+    /** Center X in world units. */
+    cx: number;
+    /** Center Y in world units. */
+    cy: number;
+    /** Radius in world units. */
+    r: number;
+}
+interface MinimapLineItem extends MinimapItemBase {
+    type: 'line';
+    x1: number;
+    y1: number;
+    x2: number;
+    y2: number;
+    /** Stroke width in minimap CSS pixels (does not scale with content). @default 1 */
+    lineWidth?: number;
+}
+/**
+ * Caller-defined item. `draw` is invoked with the minimap canvas context
+ * and a `MinimapDrawInfo` object containing world ↔ minimap helpers.
+ * `bounds` (world coords) is used for hover hit-testing.
+ */
+interface MinimapCustomItem extends MinimapItemBase {
+    type: 'custom';
+    bounds: WorldRect;
+    draw: (ctx: CanvasRenderingContext2D, info: MinimapDrawInfo) => void;
+}
+/** Discriminated union of all minimap item shapes. */
+type MinimapItem = MinimapRectItem | MinimapCircleItem | MinimapLineItem | MinimapCustomItem;
+type MinimapNavigatePhase = 'click' | 'drag-start' | 'drag' | 'drag-end';
+/**
+ * Info passed to `onNavigate` for every navigation event.
+ *
+ * `worldPoint` is the world-space point the user wants at the center
+ * of the main viewport — call `viewport.centerOn(info.worldPoint)`
+ * (or update your transform accordingly) to satisfy the request.
+ */
+interface MinimapNavigateInfo {
+    worldPoint: Point2D;
+    phase: MinimapNavigatePhase;
+}
+/** Fine-grained gesture toggles. Pass `false` to `interactions` to disable everything. */
+interface MinimapInteractionConfig {
+    /** Tap outside the viewport rect → `phase: 'click'`. @default true */
+    click?: boolean;
+    /** Drag the viewport rect itself → `phase: 'drag-*'`. @default true */
+    dragViewportRect?: boolean;
+    /** Drag starting outside the rect → immediately jumps + pans. @default true */
+    dragFromEmpty?: boolean;
+}
+/**
+ * Symbol attached to `Minimap.Title` / `.Footer` / `.Corner` so the parent
+ * `<Minimap>` can identify slot children without relying on `displayName`
+ * (which gets clobbered by wrappers like `React.memo`, `React.forwardRef`,
+ * or Vanilla Extract recipes).
+ */
+declare const MINIMAP_SLOT: unique symbol;
+type MinimapSlotKind = 'title' | 'footer' | 'corner';
+interface MinimapSlotMarker {
+    [MINIMAP_SLOT]: MinimapSlotKind;
+}
+type MinimapTitlePlacement = 'top-outside' | 'top-inside';
+type MinimapFooterPlacement = 'bottom-outside' | 'bottom-inside';
+type MinimapCornerSide = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/**
+ * Imperative handle exposed via `ref` on `<Minimap>` and `<ViewportMinimap>`.
+ * Stable for the lifetime of the component.
+ */
+interface MinimapHandle {
+    /** Focus the minimap body so arrow keys start working. */
+    focus(): void;
+    /** Access the underlying body DOM element (the `role="region"` div). */
+    getElement(): HTMLDivElement | null;
+    /** Convert a world-space point to minimap CSS-pixel coordinates. */
+    worldToMinimap(point: Point2D): Point2D;
+    /** Inverse of `worldToMinimap`. */
+    minimapToWorld(point: Point2D): Point2D;
+}
+interface MinimapBaseProps extends Omit<BaseComponent, 'onChange' | 'ref'> {
+    /** Items rendered as the content miniature. */
+    items: ReadonlyArray<MinimapItem>;
+    /**
+     * World-space rectangle the minimap maps to. Use the exported
+     * `computeBoundsFromItems(items, padding?)` helper if you don't already
+     * track one yourself.
+     */
+    worldBounds: WorldRect;
+    /** Current main-viewport transform — drives the viewport rect overlay. */
+    transform: ViewportTransform;
+    /** Current main-viewport size in CSS pixels — drives the viewport rect overlay. */
+    viewportSize: ViewportSize;
+    /**
+     * Called when the user navigates via click, drag, or arrow keys.
+     * `info.worldPoint` is the world-space point that should sit at the
+     * center of the main viewport — pass it to `viewport.centerOn(...)`.
+     */
+    onNavigate?: (info: MinimapNavigateInfo) => void;
+    /**
+     * Minimap width in CSS pixels. Height is derived from `worldBounds`
+     * aspect ratio and clamped to `[minHeight, maxHeight]`.
+     * @default 200
+     */
+    width?: number;
+    /** @default 60 */
+    minHeight?: number;
+    /** @default 200 */
+    maxHeight?: number;
+    /**
+     * Gesture configuration. Pass `false` to disable all interactions.
+     * @default { click: true, dragViewportRect: true, dragFromEmpty: true }
+     */
+    interactions?: MinimapInteractionConfig | false;
+    /**
+     * Keyboard pan step, as a fraction of the current main-viewport's
+     * world-space extent per arrow-key press. Shift × 5.
+     * @default 0.1
+     */
+    keyboardPanStep?: number;
+    /** Override background color. Defaults to theme `--etui-color-bg-secondary`. */
+    backgroundColor?: string;
+    /** Default item color. Defaults to theme accent. */
+    defaultItemColor?: string;
+    /** Viewport-rect outline color. Defaults to theme accent. */
+    viewportRectStroke?: string;
+    /**
+     * Dimmed overlay color covering the area outside the viewport rect.
+     * @default 'rgba(0, 0, 0, 0.4)'
+     */
+    outsideOverlay?: string;
+    /**
+     * Custom canvas drawing pass executed after items and before the
+     * viewport-rect shroud + outline. Use for backdrops, playheads, grid
+     * overlays, selection regions — anything that should sit between items
+     * and the viewport-rect chrome.
+     */
+    renderOverlay?: (ctx: CanvasRenderingContext2D, info: MinimapDrawInfo) => void;
+    /** Disable interactions and dim the minimap. @default false */
+    disabled?: boolean;
+    /** @default 'Minimap' */
+    ariaLabel?: string;
+    /**
+     * Slot children. Pass `<Minimap.Title>`, `<Minimap.Footer>`,
+     * `<Minimap.Corner>` subcomponents for chrome, or arbitrary nodes for
+     * absolute overlays inside the canvas body. Children that aren't
+     * recognised slot markers render as a free-form overlay layer.
+     */
+    children?: React.ReactNode;
+    /** Imperative handle. */
+    ref?: React.Ref<MinimapHandle>;
+}
+type MinimapProps = Prettify<MinimapBaseProps>;
+interface MinimapTitleProps {
+    children?: React.ReactNode;
+    /** @default 'top-outside' */
+    placement?: MinimapTitlePlacement;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface MinimapFooterProps {
+    children?: React.ReactNode;
+    /** @default 'bottom-outside' */
+    placement?: MinimapFooterPlacement;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface MinimapCornerProps {
+    children?: React.ReactNode;
+    /** Which corner of the canvas body to anchor in. @default 'top-right' */
+    side?: MinimapCornerSide;
+    className?: string;
+    style?: React.CSSProperties;
+}
+/**
+ * Live state available to children of a `<Minimap>` via `useMinimapContext()`.
+ *
+ * For perf-conscious consumers, prefer the per-slice hooks
+ * (`useMinimapHover`, `useMinimapGeometry`, `useMinimapDragState`) — each
+ * subscribes to a single slice and re-renders only when that slice
+ * changes. `useMinimapContext()` re-renders on every store mutation.
+ */
+interface MinimapContextValue {
+    worldBounds: WorldRect;
+    minimapSize: ViewportSize;
+    transform: ViewportTransform;
+    viewportSize: ViewportSize;
+    /** Current pointer position in world coordinates, or null when not hovering. */
+    hoverWorldPoint: Point2D | null;
+    /** Id of the item currently under the pointer (hit-test), or null. */
+    hoveredItemId: string | null;
+    /** True during an active drag (rect or pan). */
+    isDragging: boolean;
+    /** Uniform world → minimap scale. */
+    scale: number;
+    /** Letterbox offset. */
+    offset: Point2D;
+    /** Same helpers exposed in `MinimapDrawInfo`, for symmetry. */
+    worldToMinimap: (point: Point2D) => Point2D;
+    minimapToWorld: (point: Point2D) => Point2D;
+}
+
+export { MINIMAP_SLOT };
+export type { MinimapBaseProps, MinimapCircleItem, MinimapContextValue, MinimapCornerProps, MinimapCornerSide, MinimapCustomItem, MinimapDrawInfo, MinimapFooterPlacement, MinimapFooterProps, MinimapHandle, MinimapInteractionConfig, MinimapItem, MinimapLineItem, MinimapNavigateInfo, MinimapNavigatePhase, MinimapProps, MinimapRectItem, MinimapSlotKind, MinimapSlotMarker, MinimapTitlePlacement, MinimapTitleProps };

package/dist/types/components/editor/Minimap/MinimapContext.d.ts

@@ -0,0 +1,27 @@
+import { MinimapContextValue } from './Minimap.types.js';
+import { MinimapGeometryState, MinimapHoverState } from './MinimapStore.js';
+
+/**
+ * Subscribe to **all** Minimap state. Convenient catch-all but re-renders
+ * on every store mutation. For perf-sensitive consumers, prefer the
+ * slice-specific hooks (`useMinimapHover`, `useMinimapGeometry`,
+ * `useMinimapDragState`).
+ */
+declare function useMinimapContext(): MinimapContextValue;
+/**
+ * Subscribe to the hover slice. Re-renders only when the pointer position
+ * or hovered item id changes.
+ */
+declare function useMinimapHover(): MinimapHoverState;
+/**
+ * Subscribe to the geometry slice (transform / sizes / bounds). Re-renders
+ * only on geometry mutations.
+ */
+declare function useMinimapGeometry(): MinimapGeometryState;
+/**
+ * Subscribe to the drag slice — `true` while a pan/rect-drag gesture is
+ * in flight. Re-renders only on drag-state transitions.
+ */
+declare function useMinimapDragState(): boolean;
+
+export { useMinimapContext, useMinimapDragState, useMinimapGeometry, useMinimapHover };

package/dist/types/components/editor/Minimap/MinimapCorner.d.ts

@@ -0,0 +1,8 @@
+import { MinimapCornerProps, MINIMAP_SLOT } from './Minimap.types.js';
+
+declare const MinimapCorner: ((props: MinimapCornerProps) => null) & {
+    displayName: string;
+    [MINIMAP_SLOT]: "corner";
+};
+
+export { MinimapCorner };

package/dist/types/components/editor/Minimap/MinimapFooter.d.ts

@@ -0,0 +1,8 @@
+import { MinimapFooterProps, MINIMAP_SLOT } from './Minimap.types.js';
+
+declare const MinimapFooter: ((props: MinimapFooterProps) => null) & {
+    displayName: string;
+    [MINIMAP_SLOT]: "footer";
+};
+
+export { MinimapFooter };

package/dist/types/components/editor/Minimap/MinimapStore.d.ts

@@ -0,0 +1,17 @@
+import { Point2D } from '../../primitives/canvas/canvas.types.js';
+import { ViewportTransform, ViewportSize, WorldRect } from '../../primitives/viewport/Viewport.types.js';
+
+/** Snapshot of the geometry slice — the data needed to position anything. */
+interface MinimapGeometryState {
+    transform: ViewportTransform;
+    viewportSize: ViewportSize;
+    worldBounds: WorldRect;
+    minimapSize: ViewportSize;
+}
+/** Snapshot of the hover slice. */
+interface MinimapHoverState {
+    hoverWorldPoint: Point2D | null;
+    hoveredItemId: string | null;
+}
+
+export type { MinimapGeometryState, MinimapHoverState };

package/dist/types/components/editor/Minimap/MinimapTitle.d.ts

@@ -0,0 +1,8 @@
+import { MinimapTitleProps, MINIMAP_SLOT } from './Minimap.types.js';
+
+declare const MinimapTitle: ((props: MinimapTitleProps) => null) & {
+    displayName: string;
+    [MINIMAP_SLOT]: "title";
+};
+
+export { MinimapTitle };

package/dist/types/components/editor/Minimap/ViewportMinimap.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { MinimapProps, MinimapHandle } from './Minimap.types.js';
+
+type ViewportMinimapPlacement = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | {
+    top?: number | string;
+    right?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    width?: number | string;
+    height?: number | string;
+};
+interface ViewportMinimapProps extends Omit<MinimapProps, 'transform' | 'viewportSize' | 'ref'> {
+    /**
+     * Anchored position inside the parent `<Viewport>`. Use a preset for
+     * the four corners, or an object for custom anchoring.
+     * @default 'bottom-right'
+     */
+    placement?: ViewportMinimapPlacement;
+    /**
+     * Distance (CSS px) from the viewport edge when using a preset placement.
+     * Ignored when `placement` is an object.
+     * @default 12
+     */
+    margin?: number;
+    /**
+     * When true, the minimap width tracks the wrapper's measured width via
+     * ResizeObserver. The wrapper size must be controlled externally (e.g.
+     * via custom `placement` or a parent container). The `width` prop, if
+     * provided, becomes a fallback used until the first measurement lands.
+     * @default false
+     */
+    responsive?: boolean;
+    /** Imperative handle (same shape as `<Minimap>`'s). */
+    ref?: React.Ref<MinimapHandle>;
+}
+/**
+ * Auto-bound minimap for use inside a `<Viewport>`. Reads live `transform`
+ * and `size` from `useViewportContext()`, positions itself in a corner
+ * (or custom anchor), and wires `onNavigate` to the viewport handle's
+ * `centerOn`. Falls back to the manual `<Minimap>` if you need the
+ * minimap outside the Viewport tree.
+ *
+ * Recognized by `<Viewport>` as an overlay child — drop it among layers
+ * and world/overlay siblings without an explicit `<ViewportOverlay>` wrapper.
+ */
+declare const ViewportMinimap: {
+    ({ placement, margin, responsive, width: widthProp, onNavigate: userOnNavigate, ref, ...minimapProps }: ViewportMinimapProps): React.ReactElement;
+    displayName: string;
+};
+
+export { ViewportMinimap };
+export type { ViewportMinimapPlacement, ViewportMinimapProps };

package/dist/types/components/editor/Minimap/computeBoundsFromItems.d.ts

@@ -0,0 +1,13 @@
+import { MinimapItem } from './Minimap.types.js';
+import { WorldRect } from '../../primitives/viewport/Viewport.types.js';
+
+/**
+ * Compute the tight axis-aligned bounding box of a set of minimap items,
+ * with optional uniform padding (in world units) on every side.
+ *
+ * An empty input returns a zero-area rect at the origin so the minimap
+ * can still render a meaningful surface.
+ */
+declare function computeBoundsFromItems(items: ReadonlyArray<MinimapItem>, padding?: number): WorldRect;
+
+export { computeBoundsFromItems };

package/dist/types/components/editor/Minimap/index.d.ts

@@ -0,0 +1,13 @@
+import { Minimap as Minimap$1 } from './Minimap.js';
+import { MinimapCorner } from './MinimapCorner.js';
+import { MinimapFooter } from './MinimapFooter.js';
+import { MinimapTitle } from './MinimapTitle.js';
+
+type MinimapCompound = typeof Minimap$1 & {
+    Title: typeof MinimapTitle;
+    Footer: typeof MinimapFooter;
+    Corner: typeof MinimapCorner;
+};
+declare const Minimap: MinimapCompound;
+
+export { Minimap, MinimapCorner, MinimapFooter, MinimapTitle };

package/dist/types/components/editor/NodeGraph/NodeGraph.d.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import { NodeGraphNodeBody, NodeGraphNodeHeader, NodeGraphPinList, NodeGraphPinRow } from './NodeGraphNodeParts.js';
+import { NodeGraphNodeSection } from './NodeGraphNodeSection.js';
+import { NodeGraphPin } from './NodeGraphPin.js';
+import { NodeGraphPort } from './NodeGraphPort.js';
+import { NodeGraphPortVisual } from './NodeGraphPortVisual.js';
+import { NodeGraphMinimap, NodeGraphBackground, NodeGraphToolbar, NodeGraphSpawnPalette } from './NodeGraphSlots.js';
+import { NodeGraphToolbarSeparator, NodeGraphFitContentButton, NodeGraphFitSelectionButton, NodeGraphZoomInButton, NodeGraphZoomOutButton, NodeGraphResetZoomButton } from './NodeGraphToolbar.js';
+import { NodeGraphProps } from './NodeGraph.types.js';
+
+/**
+ * `NodeGraph` — interactive, data-driven node editor surface built on
+ * `Viewport`. Renders nodes as HTML in world space (`renderNode`) and
+ * edges as Béziers on a perf-isolated canvas layer.
+ *
+ * The component is fully controlled-or-uncontrolled across four data
+ * dimensions (nodes / edges / groups / selection) — each emits a full
+ * array on change. Connection drags, marquee selection, drag-to-move,
+ * snap-to-grid, and keyboard nav are all wired in.
+ *
+ * @example
+ * ```tsx
+ * <NodeGraph
+ *   nodes={nodes}
+ *   edges={edges}
+ *   onNodesChange={setNodes}
+ *   onEdgesChange={setEdges}
+ *   renderNode={node => <MyNode data={node.data} />}
+ *   isValidConnection={(src, tgt) => src.node !== tgt.node}
+ *   responsive
+ * >
+ *   <NodeGraph.Background variant="dots" gap={24} />
+ *   <NodeGraph.Minimap placement="bottom-right" />
+ * </NodeGraph>
+ * ```
+ */
+declare const NodeGraphImpl: {
+    ({ nodes: nodesProp, defaultNodes, onNodesChange, edges: edgesProp, defaultEdges, onEdgesChange, groups: groupsProp, defaultGroups, onGroupsChange, selection: selectionProp, defaultSelection, onSelectionChange, renderNode, renderEdgeLabel, edgeStyle, isValidConnection, snapToGrid, onConnectStart, onConnectEnd, onContextMenu, onDelete, onActivate, pan, zoom, minZoom, maxZoom, selectionRect, responsive, height, defaultNodeSize: defaultNodeSizeProp, disabled, ariaLabel, className, style, testId, id, children, ref, }: NodeGraphProps): React.ReactElement;
+    displayName: string;
+};
+type NodeGraphCompound = typeof NodeGraphImpl & {
+    Minimap: typeof NodeGraphMinimap;
+    Background: typeof NodeGraphBackground;
+    Port: typeof NodeGraphPort;
+    PortVisual: typeof NodeGraphPortVisual;
+    Pin: typeof NodeGraphPin;
+    NodeBody: typeof NodeGraphNodeBody;
+    NodeHeader: typeof NodeGraphNodeHeader;
+    NodeSection: typeof NodeGraphNodeSection;
+    PinList: typeof NodeGraphPinList;
+    PinRow: typeof NodeGraphPinRow;
+    Toolbar: typeof NodeGraphToolbar;
+    ToolbarSeparator: typeof NodeGraphToolbarSeparator;
+    FitContentButton: typeof NodeGraphFitContentButton;
+    FitSelectionButton: typeof NodeGraphFitSelectionButton;
+    ZoomInButton: typeof NodeGraphZoomInButton;
+    ZoomOutButton: typeof NodeGraphZoomOutButton;
+    ResetZoomButton: typeof NodeGraphResetZoomButton;
+    SpawnPalette: typeof NodeGraphSpawnPalette;
+};
+declare const NodeGraph: NodeGraphCompound;
+
+export { NodeGraph };