@ixfx/components 0.16.5 → 0.17.1

package/dist/vertical-list.d.ts

@@ -1,5 +1,5 @@
-import { B as ListNativeDragStartDetail, F as ListDragPreview, I as ListDragPreviewContext, L as ListDragPreviewRenderer, P as ListDragEntry, V as ListNativeDragStartEvent, z as ListDragSource } from "./tree-component-DgfkxmVY.js";
-import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BRZsLcvp.js";
-import { _ as ListTickleEvent, a as ListItemClickDetail, c as ListSelectDetail, g as ListTickleDetail, h as ListSelectionMode, i as ListInteractionMode, l as ListSelectEvent, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, t as ListActivateDetail } from "./list-selection-types-Dnamh2Lu.js";
-import { a as VerticalListViewState, c as ListDragLeaveDetail, d as ListDropDetail, f as ListDropEvent, g as ListEditCommitEvent, h as ListEditCommitDetail, i as VerticalListElementEventMap, l as ListDragLeaveEvent, m as ListEditCancelEvent, n as CustomCheckboxOptions, o as ListContextMenuDetail, p as ListEditCancelDetail, r as VerticalListElement, s as ListContextMenuEvent, t as AddItemOptions, u as ListDragOverEvent } from "./vertical-list-DtHX26JO.js";
+import { B as ListNativeDragStartDetail, F as ListDragPreview, I as ListDragPreviewContext, L as ListDragPreviewRenderer, P as ListDragEntry, V as ListNativeDragStartEvent, z as ListDragSource } from "./tree-component-DNuzfo6R.js";
+import { n as ListViewportChangeEvent, t as ListViewportChangeDetail } from "./list-viewport-types-BJ8c6qur.js";
+import { _ as ListTickleEvent, a as ListItemClickDetail, c as ListSelectDetail, g as ListTickleDetail, h as ListSelectionMode, i as ListInteractionMode, l as ListSelectEvent, n as ListActivateEvent, o as ListItemClickEvent, r as ListElementEventMap, t as ListActivateDetail } from "./list-selection-types-CKTt7Rrw.js";
+import { a as VerticalListViewState, c as ListDragLeaveDetail, d as ListDropDetail, f as ListDropEvent, g as ListEditCommitEvent, h as ListEditCommitDetail, i as VerticalListElementEventMap, l as ListDragLeaveEvent, m as ListEditCancelEvent, n as CustomCheckboxOptions, o as ListContextMenuDetail, p as ListEditCancelDetail, r as VerticalListElement, s as ListContextMenuEvent, t as AddItemOptions, u as ListDragOverEvent } from "./vertical-list-BzeXehBt.js";
 export { AddItemOptions, CustomCheckboxOptions, type ListActivateDetail, type ListActivateEvent, type ListContextMenuDetail, type ListContextMenuEvent, type ListDragEntry, type ListDragLeaveDetail, type ListDragLeaveEvent, type ListDragOverEvent, type ListDragPreview, type ListDragPreviewContext, type ListDragPreviewRenderer, type ListDragSource, type ListDropDetail, type ListDropEvent, type ListEditCancelDetail, type ListEditCancelEvent, type ListEditCommitDetail, type ListEditCommitEvent, type ListElementEventMap, type ListInteractionMode, type ListItemClickDetail, type ListItemClickEvent, type ListNativeDragStartDetail, type ListNativeDragStartEvent, type ListSelectDetail, type ListSelectEvent, type ListSelectionMode, type ListTickleDetail, type ListTickleEvent, type ListViewportChangeDetail, type ListViewportChangeEvent, VerticalListElement, VerticalListElementEventMap, type VerticalListViewState };

package/dist/vertical-list.js

@@ -1,2 +1 @@
-import { t as VerticalListElement } from "./vertical-list-o5hfqH87.js";
-export { VerticalListElement };
+export { t as VerticalListElement } from "./vertical-list-B9z1lbjM.js";

package/dist/{view-state-controller-BdyXWUUM.js → view-state-controller-DiPAPiA7.js}

@@ -1,4 +1,4 @@
-//#region src/common/view-state/types.ts
+// src/common/view-state/types.ts
 /**
 * Shared view-state contract for list-like components.
 *
@@ -17,8 +17,7 @@
 const VIEW_STATE_VERSION = 1;
 /** Name of the debounced change event every view-stateful component fires. */
 const VIEW_STATE_CHANGE = `view-state-change`;
-//#endregion
-//#region src/common/view-state/scroll-anchor.ts
+// src/common/view-state/scroll-anchor.ts
 /**
 * Capture a {@link ScrollState} for a DOM-rendered list. `items` must be in
 * visual order along `axis`; the first one whose far edge is below / right of
@@ -143,8 +142,7 @@ function onUserScrollIntent(target, onIntent) {
 		for (const type of events) target.removeEventListener(type, handler, { capture: true });
 	};
 }
-//#endregion
-//#region src/common/view-state/view-state-controller.ts
+// src/common/view-state/view-state-controller.ts
 const REASON_RANK = {
 	restore: 0,
 	data: 1,
@@ -301,5 +299,4 @@ var ViewStateController = class {
 		this.notify(reason);
 	}
 };
-//#endregion
 export { restoreElementScroll as a, VIEW_STATE_VERSION as c, onUserScrollIntent as i, anchorFromRow as n, scrollToOffset as o, captureElementScroll as r, VIEW_STATE_CHANGE as s, ViewStateController as t };

package/dist/{wheel-nudge-D5rmht3v.js → wheel-nudge-DgJzrL28.js}

@@ -1,6 +1,6 @@
-import { t as __decorate } from "./decorate-VRK8rslU.js";
+import { t as __decorate } from "./decorate-Dxs8sFX8.js";
 import { property } from "lit/decorators.js";
-//#region src/mixins/wheel-nudge.ts
+// src/mixins/wheel-nudge.ts
 /**
 * Mixin that adds mousewheel support with an optional `lighttouch` hover mode.
 *
@@ -85,5 +85,4 @@ function WheelNudgeMixin(superClass) {
 	})], WheelNudgeMixinClass.prototype, "lighttouch", void 0);
 	return WheelNudgeMixinClass;
 }
-//#endregion
 export { WheelNudgeMixin as t };

package/dist/{wheel-nudge-By5s_ioH.d.ts → wheel-nudge-oMFKat9P.d.ts}

@@ -1,5 +1,4 @@
-import { LitElement } from "lit";
-//#region src/mixins/wheel-nudge.d.ts
+import "lit";
 /**
  * Direction of a wheel tick. `+1` for `deltaY < 0` (wheel up/away), `-1` for
  * `deltaY > 0` (wheel down/toward).
@@ -26,5 +25,4 @@ interface WheelNudgeConsumer {
   _applyWheelDelta(direction: WheelDirection, event: WheelEvent): void;
   _shouldHandleWheel(): boolean;
 }
-//#endregion
 export { WheelNudgeConsumer as n, WheelDirection as t };

package/dist/{xy-axis-DQqd2yXJ.d.ts → xy-axis-Bf6WfOS2.d.ts}

@@ -1,5 +1,4 @@
 import { LitElement, PropertyValues } from "lit";
-//#region src/plots/colour-map.d.ts
 type ColourMode = `fixed` | `opacity` | `hue` | `saturation` | `lightness` | `scale`;
 type ColourMapConfig = {
   mode: ColourMode;
@@ -30,8 +29,6 @@ declare function computeColour(scaledValue: number, baseColour: string, config:
  * 'size' is not handled here — the caller adjusts the radius separately.
  */
 declare function applyAgeModification(base: ColourResult, ageFraction: number, ageStyle: string): ColourResult;
-//#endregion
-//#region src/plots/data.d.ts
 type PlotDataSeriesOptions = {
   /**
    * Limit of how many data points to store.
@@ -101,8 +98,6 @@ declare class PlotDataSeries {
    */
   clear(): boolean;
 }
-//#endregion
-//#region src/plots/single-axis.d.ts
 type SingleAxisDrawStyle = `line-sharp` | `line-round` | `circles` | `squares` | `vbar` | `hbar` | `hist-bottom` | `hist-top` | `hist-middle`;
 type SingleAxisAgeStyle = `none` | `opacity` | `desaturation` | `size`;
 /**
@@ -210,8 +205,6 @@ interface PlotSingleAxis {
     (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
   };
 }
-//#endregion
-//#region src/plots/multi-axis.d.ts
 type PlotMultiAxisLayout = `overlap` | `horizontal` | `vertical` | `grid`;
 type PlotMultiAxisDataPointClickDetail = {
   readonly value: number;
@@ -282,8 +275,6 @@ interface PlotMultiAxis {
     (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
   };
 }
-//#endregion
-//#region src/plots/plot-histogram.d.ts
 type PlotHistogramOrientation = `horizontal` | `vertical`;
 /**
  * - `hover`: floating `ixfx-tooltip` bubble, shown/hidden with a debounce delay.
@@ -382,8 +373,6 @@ declare global {
 interface PlotHistogram {
   addEventListener: (<K extends keyof PlotHistogramElementEventMap>(type: K, listener: (this: PlotHistogram, event: PlotHistogramElementEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
 }
-//#endregion
-//#region src/plots/xy-axis.d.ts
 type XyDrawStyle = `circles` | `squares`;
 type XyAgeStyle = `none` | `opacity` | `desaturation` | `size`;
 declare class PlotXyAxis extends LitElement {
@@ -422,5 +411,4 @@ declare global {
     'ixfx-plot-xy-axis': PlotXyAxis;
   }
 }
-//#endregion
 export { applyAgeModification as A, SingleAxisAgeStyle as C, ColourMapConfig as D, PlotDataSeriesOptions as E, parseColourScaleAttr as M, readBaseColour as N, ColourMode as O, PlotSingleAxisPointerMoveEvent as S, PlotDataSeries as T, PlotMultiAxisElementEventMap as _, PlotHistogramBucketClickDetail as a, PlotSingleAxisElementEventMap as b, PlotHistogramInteractionMode as c, PlotHistogramSelectionChangeEvent as d, PlotHistogramSelectionRange as f, PlotMultiAxisDataPointClickEvent as g, PlotMultiAxisDataPointClickDetail as h, PlotHistogram as i, computeColour as j, ColourResult as k, PlotHistogramOrientation as l, PlotMultiAxis as m, XyAgeStyle as n, PlotHistogramBucketClickEvent as o, PlotHistogramValueTooltips as p, XyDrawStyle as r, PlotHistogramElementEventMap as s, PlotXyAxis as t, PlotHistogramSelectionChangeDetail as u, PlotMultiAxisLayout as v, SingleAxisDrawStyle as w, PlotSingleAxisPointerMoveDetail as x, PlotSingleAxis as y };

package/dist/{xy-axis-CyMd_Bn1.js → xy-axis-CBpml-3S.js}

@@ -1,5 +1,5 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { i as hasIcon } from "./registry-BEtb8_wB.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-Dxs8sFX8.js";
+import { i as hasIcon } from "./registry-DcF0fO7l.js";
 import "./icons.js";
 import { LitElement, css, html, nothing, svg } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -9,7 +9,7 @@ import { Colour } from "@ixfx/visual";
 import { clamp, rangeStream } from "@ixfx/numbers";
 import { classMap } from "lit/directives/class-map.js";
 import { Easings } from "@ixfx/modulation";
-//#region src/plots/colour-map.ts
+// src/plots/colour-map.ts
 const DEFAULT_BASE = `oklch(60% 0.15 140)`;
 const DEFAULT_PALETTE = [
 	`green`,
@@ -141,8 +141,7 @@ function applyAgeModification(base, ageFraction, ageStyle) {
 	}
 	return base;
 }
-//#endregion
-//#region src/plots/data.ts
+// src/plots/data.ts
 /**
 * A data series
 */
@@ -246,16 +245,14 @@ var PlotDataSeries = class {
 		return !empty;
 	}
 };
-//#endregion
-//#region src/util/is-numeric.ts
+// src/util/is-numeric.ts
 function isNumeric(str) {
 	if (typeof str === `number`) return true;
 	if (typeof str !== `string`) return false;
 	const trimmed = str.trim();
 	return trimmed !== `` && !Number.isNaN(Number(trimmed));
 }
-//#endregion
-//#region src/util/tooltip.ts
+// src/util/tooltip.ts
 var _TooltipElement;
 let _baseStylesInjected = false;
 function ensureBaseTooltipStyles() {
@@ -348,8 +345,7 @@ __decorate([property({ type: String })], TooltipElement.prototype, "anchor", voi
 __decorate([property()], TooltipElement.prototype, "value", void 0);
 __decorate([property({ type: String })], TooltipElement.prototype, "icon", void 0);
 TooltipElement = _TooltipElement = __decorate([safeCustomElement(`ixfx-tooltip`)], TooltipElement);
-//#endregion
-//#region src/plots/svg-utils.ts
+// src/plots/svg-utils.ts
 let _tooltipEl = null;
 let _tooltipOwner = null;
 function ensureTooltip() {
@@ -455,8 +451,7 @@ function scaleValue(v, min, max) {
 	const range = max - min;
 	return range === 0 ? .5 : (v - min) / range;
 }
-//#endregion
-//#region src/plots/multi-axis.ts
+// src/plots/multi-axis.ts
 const PLOT_PALETTE = [
 	`oklch(60% 0.15 30)`,
 	`oklch(60% 0.15 90)`,
@@ -704,8 +699,7 @@ __decorate([property({
 	type: Number
 })], PlotMultiAxis.prototype, "gridMinWidth", void 0);
 PlotMultiAxis = __decorate([safeCustomElement(`ixfx-plot-multi-axis`)], PlotMultiAxis);
-//#endregion
-//#region src/plots/plot-histogram.ts
+// src/plots/plot-histogram.ts
 let PlotHistogram = class PlotHistogram extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -1284,8 +1278,7 @@ __decorate([state()], PlotHistogram.prototype, "_selectionEnd", void 0);
 __decorate([state()], PlotHistogram.prototype, "_isDragging", void 0);
 __decorate([state()], PlotHistogram.prototype, "_selectionOverlayText", void 0);
 PlotHistogram = __decorate([safeCustomElement(`ixfx-plot-histogram`)], PlotHistogram);
-//#endregion
-//#region src/plots/single-axis.ts
+// src/plots/single-axis.ts
 function buildLinePath(points) {
 	if (points.length === 0) return ``;
 	let d = `M ${points[0].x},${points[0].y}`;
@@ -1731,8 +1724,7 @@ __decorate([property({ attribute: `color-scale` })], PlotSingleAxis.prototype, "
 __decorate([state()], PlotSingleAxis.prototype, "_width", void 0);
 __decorate([state()], PlotSingleAxis.prototype, "_height", void 0);
 PlotSingleAxis = __decorate([safeCustomElement(`ixfx-plot-single-axis`)], PlotSingleAxis);
-//#endregion
-//#region src/plots/xy-axis.ts
+// src/plots/xy-axis.ts
 let PlotXyAxis = class PlotXyAxis extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -2001,5 +1993,4 @@ __decorate([property({ attribute: `color-scale` })], PlotXyAxis.prototype, "colo
 __decorate([state()], PlotXyAxis.prototype, "_width", void 0);
 __decorate([state()], PlotXyAxis.prototype, "_height", void 0);
 PlotXyAxis = __decorate([safeCustomElement(`ixfx-plot-xy-axis`)], PlotXyAxis);
-//#endregion
 export { TooltipElement as a, computeColour as c, PlotMultiAxis as i, parseColourScaleAttr as l, PlotSingleAxis as n, PlotDataSeries as o, PlotHistogram as r, applyAgeModification as s, PlotXyAxis as t, readBaseColour as u };

package/dist/xy-pad.d.ts

@@ -1,8 +1,7 @@
-import { n as WheelNudgeConsumer, t as WheelDirection } from "./wheel-nudge-By5s_ioH.js";
+import { n as WheelNudgeConsumer, t as WheelDirection } from "./wheel-nudge-oMFKat9P.js";
 import { LitElement, PropertyValues, html } from "lit";
-//#region src/xy-pad/xy-pad.d.ts
 declare const XyPad_base: typeof LitElement & (new (...args: any[]) => WheelNudgeConsumer);
-declare class XyPad extends XyPad_base {
+export declare class XyPad extends XyPad_base {
   static styles: import("lit").CSSResult[];
   xMin: number;
   xMax: number;
@@ -69,22 +68,21 @@ declare class XyPad extends XyPad_base {
   disconnectedCallback(): void;
   render(): ReturnType<typeof html>;
 }
-type XyPadInputDetail = {
+export type XyPadInputDetail = {
   readonly x: number;
   readonly y: number;
 };
-type XyPadInputEvent = CustomEvent<XyPadInputDetail>;
+export type XyPadInputEvent = CustomEvent<XyPadInputDetail>;
 declare global {
   interface HTMLElementTagNameMap {
     'ixfx-xy-pad': XyPad;
   }
 }
-interface XyPadEventMap {
+export interface XyPadEventMap {
   input: XyPadInputEvent;
   change: XyPadInputEvent;
 }
-interface XyPad {
+export interface XyPad {
   addEventListener: (<K extends keyof XyPadEventMap>(type: K, listener: (this: XyPad, event: XyPadEventMap[K]) => void, options?: boolean | AddEventListenerOptions) => void) & ((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void);
 }
-//#endregion
-export { XyPad, XyPadEventMap, XyPadInputDetail, XyPadInputEvent };
+export {};

package/dist/xy-pad.js

@@ -1,11 +1,11 @@
-import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
-import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { t as prominenceStyles } from "./prominence-DlFShic3.js";
-import { t as resolveAxisStep } from "./keyboard-B5xD7Fz-.js";
-import { t as WheelNudgeMixin } from "./wheel-nudge-D5rmht3v.js";
+import { t as resolveAxisStep } from "./keyboard-DMwjIYh7.js";
+import { t as WheelNudgeMixin } from "./wheel-nudge-DgJzrL28.js";
+import { t as themeFallbacks } from "./fallbacks-BPjjBoED.js";
+import { t as prominenceStyles } from "./prominence-BOOQVWF-.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-Dxs8sFX8.js";
 import { LitElement, css, html } from "lit";
 import { property } from "lit/decorators.js";
-//#region src/xy-pad/xy-pad.ts
+// src/xy-pad/xy-pad.ts
 /**
 * <x-xy-pad> — 2D touch-friendly XY pad for controlling two parameters.
 *
@@ -475,5 +475,4 @@ __decorate([property({
 	attribute: `stops-y`
 })], XyPad.prototype, "stopsY", void 0);
 XyPad = __decorate([safeCustomElement(`ixfx-xy-pad`)], XyPad);
-//#endregion
 export { XyPad };

package/docs-user/README.md

@@ -36,6 +36,7 @@ This directory contains documentation for each component and some architectural
 - [miller](./miller.md)
 - [multicol-list](./multicol-list.md)
 - [narrowed-text](./narrowed-text.md)
+- [node-graph](./node-graph.md)
 - [notifier](./notifier.md)
 - [pan-text](./pan-text.md)
 - [panel](./panel.md)

package/docs-user/grid-list.md

@@ -412,6 +412,8 @@ Parts: `part="icon"` and `part="badge"` on the wrappers this adds.
 | `setItems(items)` | Replace the collection. Selection / cursor keep any key still present; vanished keys are deselected silently and held pending (see [View state](#view-state)). |
 | `appendItems(items)` | Add to the end. Scroll, selection and cursor untouched; no reflow animation. |
 | `updateItem(key, item)` | Replace one item. A visible cell re-renders in place; an offscreen one updates when scrolled in. |
+| `updateItems(entries)` | Replace many items at once — the batched form of `updateItem`. See [Batched updates](#batched-updates). |
+| `refreshItem(key)` | Re-render one cell **without** changing `items`. See [Refreshing a cell](#refreshing-a-cell). |
 | `removeItems(keys)` | Remove items. Removed keys drop out of selection / cursor silently and are held pending. |
 | `clearItems()` | Drop everything. Resets selection / cursor and emits one empty `list-select`; the keys are held pending, so re-adding them restores the selection. |
 
@@ -424,6 +426,49 @@ key-based. Data-mode events carry the data value as `detail.item` and
 Duplicate keys are warned about once; the first occurrence wins for key-based
 operations.
 
+#### Batched updates
+
+`updateItems(entries)` applies many replacements with **one** array copy and
+**one** source rebuild:
+
+```typescript
+grid.updateItems([
+  { key: 'a', item: { ...fileA, name: 'Renamed' } },
+  { key: 'b', item: { ...fileB, thumb: newThumb } },
+]);
+
+// A Map works too:
+grid.updateItems(new Map([['a', newA], ['b', newB]]));
+```
+
+It has the same semantics as the equivalent run of `updateItem` calls: unknown
+keys are ignored, selection / cursor / scroll are untouched, and an entry whose
+`item` is the identical object already at that key is skipped. If nothing
+changes, `items` keeps its identity and nothing is emitted.
+
+**Use `updateItems` rather than a loop of `updateItem`s** when you have more
+than one row to change. A loop pays one array copy per call, so changing n rows
+costs n copies; the batched form pays one. On a 20k-item collection, replacing
+500 rows measured ~22 ms as a loop versus ~0.7 ms as one batch (happy-dom).
+
+#### Refreshing a cell
+
+`updateItem(key, item)` with the **same object** that is already at `key` is a
+no-op — the array is not copied and nothing is emitted. That is the right
+behaviour when you only want to push the *data* through.
+
+If instead you want to redraw a cell whose data is unchanged — because the
+adapter renders something that lives outside the item, such as a thumbnail that
+just finished loading — use `refreshItem(key)`:
+
+```typescript
+grid.refreshItem('a');   // re-renders the cell for 'a'; `items` is untouched
+```
+
+The adapter's `render` is called again for that cell, so it picks up the new
+state. The `items` array keeps its identity, so nothing is copied and the
+collection is not rebuilt.
+
 ---
 
 ## Grouping
@@ -608,6 +653,26 @@ Inserting is O(items): one `appendItems` costs ~5 ms at 5k items and ~21 ms at
 50k (the source and search index are rebuilt, and `items` is copied); the
 element-mode equivalents are ~8 ms at 2k and ~16 ms at 10k.
 
+### Mutation API
+
+`src/grid-list/grid-list.perf.test.ts` guards the data-mode mutation API with
+**work counters** — how many times the adapter's `key` is called per mutation.
+That number must not scale with the item count. Run it with:
+
+```sh
+pnpm test:perf            # all perf suites, verbose
+PERF_REPORT=1 pnpm vitest run src/grid-list/grid-list.perf.test.ts
+```
+
+The mutation paths keep a key → raw index map, so a lookup is O(1) rather than
+an O(n) scan of the array:
+
+- `updateItem(key, item)` — one lookup and one array copy. Passing the
+  identical object is a no-op (no copy, no emit).
+- `updateItems(entries)` — many replacements, one copy, one rebuild.
+- `appendItems(items)` — the appended items are added to the map; the existing
+  ones are not re-scanned.
+
 Things that keep the per-frame paths flat, and that the benchmark guards:
 
 - **Cell recycling.** Cells are keyed by a stable cell id, not the item key, so

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.16.5",
-  "generated": "2026-11-08T23:14:38.622Z",
+  "version": "0.17.1",
+  "generated": "2026-11-10T11:14:57.413Z",
   "components": [
     {
       "name": "ac-text",
@@ -163,6 +163,11 @@
       "summary": "A filtered text selection component with inline search. Shows slotted items filtered by a query string as the user types.",
       "path": "docs-user/narrowed-text.md"
     },
+    {
+      "name": "node-graph",
+      "summary": "A Svelte-Flow-style node editor: nodes on a pan/zoom canvas, wires between typed ports, and a magnetic connect gesture. Nodes are ordinary light-DOM elements, so you can put anything inside them — inc",
+      "path": "docs-user/node-graph.md"
+    },
     {
       "name": "notifier",
       "summary": "A \"lookless\" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the",

package/docs-user/llms.txt

@@ -43,6 +43,7 @@ import '@ixfx/components/data-grid';
 - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
 - [multicol-list](docs-user/multicol-list.md): A faceted-filtering component: each column shows one property (facet) of the *same*
 - [narrowed-text](docs-user/narrowed-text.md): A filtered text selection component with inline search. Shows slotted items filtered by a query string as the user types.
+- [node-graph](docs-user/node-graph.md): A Svelte-Flow-style node editor: nodes on a pan/zoom canvas, wires between typed ports, and a magnetic connect gesture. Nodes are ordinary light-DOM elements, so you can put anything inside them — inc
 - [notifier](docs-user/notifier.md): A "lookless" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the
 - [pan-text](docs-user/pan-text.md): Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.
 - [panel](docs-user/panel.md): An collapsible panel component with support for titles, icons, toolbars, and multiple visual variants.