@ixfx/components 0.16.5 → 0.17.0

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/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.16.5",
-  "generated": "2026-11-08T23:14:38.622Z",
+  "version": "0.17.0",
+  "generated": "2026-11-09T22:52:59.151Z",
   "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.