@ixfx/components 0.2.3 → 0.2.4

package/dist/colour-picker/styles.js

@@ -0,0 +1,139 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: inline-flex;
+    max-width: 100%;
+    --_slider-height: var(--picker-slider-height, 24px);
+    --_slider-gap: var(--picker-slider-gap, 8px);
+    --_handle-size: var(--picker-handle-size, 16px);
+    --_handle-stroke-light: var(--picker-handle-stroke-light, #fff);
+    --_handle-stroke-dark: var(--picker-handle-stroke-dark, #000);
+    --_handle-stroke-width: var(--picker-handle-stroke-width, 2px);
+    --_preview-height: var(--picker-preview-height, 48px);
+    --_checker-light: var(--picker-checker-light, #fff);
+    --_checker-dark: var(--picker-checker-dark, #ccc);
+  }
+
+  .lch-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .lch-container[horizontal] {
+    flex-direction: row;
+    align-items: flex-start;
+  }
+
+  .lch-container[horizontal] .lch-preview {
+    width: var(--_preview-height);
+    height: var(--_preview-height);
+    margin-bottom: 0;
+    margin-right: var(--_slider-gap);
+    flex-shrink: 0;
+  }
+
+  .lch-preview {
+    height: var(--_preview-height);
+    border-radius: 2px;
+    margin-bottom: var(--_slider-gap);
+    position: relative;
+    overflow: hidden;
+  }
+
+  .lch-preview::before,.lch-alpha::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(45deg, var(--_checker-dark) 25%, transparent 25%),
+      linear-gradient(-45deg, var(--_checker-dark) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--_checker-dark) 75%),
+      linear-gradient(-45deg, transparent 75%, var(--_checker-dark) 75%);
+    background-size: 16px 16px;
+    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
+    background-color: var(--_checker-light);
+    z-index: 0;
+  }
+
+  .lch-preview canvas,.lch-alpha canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .lch-preview[hidden] {
+    display: none;
+  }
+
+  .lch-sliders {
+    display: flex;
+    flex-direction: column;
+    gap: var(--_slider-gap);
+    min-width: 0;
+    flex: 1;
+  }
+
+  .lch-slider {
+    position: relative;
+    height: var(--_slider-height);
+    cursor: pointer;
+    touch-action: none;
+  }
+
+  .lch-slider canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 2px;
+  }
+
+  .lch-slider svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .lch-slider .handle {
+    pointer-events: auto;
+    cursor: grab;
+  }
+
+  .lch-slider .handle:active {
+    cursor: grabbing;
+  }
+
+  .handle-circle {
+    fill: transparent;
+    stroke-width: var(--_handle-stroke-width);
+  }
+
+  /* Hidden state for toggled-off sliders */
+  .lch-slider[hidden] {
+    display: none;
+  }
+
+  :host([hide-preview]) .lch-preview {
+    display: none;
+  }
+
+  :host([hide-h]) .lch-hue {
+    display: none;
+  }
+
+  :host([hide-l]) .lch-lightness {
+    display: none;
+  }
+
+  :host([hide-c]) .lch-chroma {
+    display: none;
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/colour-picker/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/colour-picker/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwIxB,CAAC"}

package/dist/colour-picker/types.d.ts

@@ -0,0 +1,33 @@
+/**
+ * OKLCH colour value representation
+ */
+export type OklchValue = {
+    readonly l: number;
+    readonly c: number;
+    readonly h: number;
+    readonly a?: number;
+};
+/**
+ * Event detail for colour picker input/change events
+ */
+export type ColourPickerEventDetail = OklchValue;
+/**
+ * Colour picker custom events
+ */
+export type ColourPickerInputEvent = CustomEvent<ColourPickerEventDetail>;
+export type ColourPickerChangeEvent = CustomEvent<ColourPickerEventDetail>;
+/**
+ * Type declaration for color-parse module
+ */
+export type SliderType = `l` | `c` | `h` | `a`;
+export type Range = readonly [number, number];
+export type RangeInput = readonly [number, number] | readonly number[];
+/**
+ * Augment HTMLElementTagNameMap for the custom element
+ */
+declare global {
+    interface HTMLElementTagNameMap {
+        'ixfx-colour-picker': import('./colour-picker.js').ColourPicker;
+    }
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/colour-picker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/colour-picker/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,CAAC,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,uBAAuB,GAAG,UAAU,CAAC;AAEjD;;GAEG;AACH,MAAM,MAAM,sBAAsB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;AAC1E,MAAM,MAAM,uBAAuB,GAAG,WAAW,CAAC,uBAAuB,CAAC,CAAC;AAE3E;;GAEG;AAWH,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAE/C,MAAM,MAAM,KAAK,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC9C,MAAM,MAAM,UAAU,GAAG,SAAS,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,SAAS,MAAM,EAAE,CAAC;AAEvE;;GAEG;AACH,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,oBAAoB,EAAE,OAAO,oBAAoB,EAAE,YAAY,CAAC;KACjE;CACF"}

package/dist/colour-picker/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/colour-picker/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/colour-picker/types.ts"],"names":[],"mappings":""}

package/dist/colour-picker/util.d.ts

@@ -0,0 +1,15 @@
+import type { Range, SliderType } from "./types";
+export declare const MAX_CHROMA = 0.4;
+export declare const RANGE_LIMITS: Record<SliderType, Range>;
+export declare const DEFAULT_RANGES: Record<SliderType, Range>;
+export declare function rangeSpan([min, max]: Range): number;
+export declare function cloneRange(range: Range): Range;
+/**
+ * Convert OKLCH to a CSS string
+ */
+export declare function oklchToCss(l: number, c: number, h: number, a?: number): string;
+/**
+ * Clamp a value between min and max
+ */
+export declare function clamp(value: number, min: number, max: number): number;
+//# sourceMappingURL=util.d.ts.map

package/dist/colour-picker/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/colour-picker/util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAEjD,eAAO,MAAM,UAAU,MAAM,CAAC;AAC9B,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,CAKzC,CAAC;AACX,eAAO,MAAM,cAAc,EAAE,MAAM,CAAC,UAAU,EAAE,KAAK,CAK3C,CAAC;AAEX,wBAAgB,SAAS,CAAC,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,CAEnD;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAE9C;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,GAAE,MAAU,GAAG,MAAM,CAKjF;AAED;;GAEG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,CAErE"}

package/dist/colour-picker/util.js

@@ -0,0 +1,35 @@
+export const MAX_CHROMA = 0.4;
+export const RANGE_LIMITS = {
+    l: [0, 1],
+    c: [0, MAX_CHROMA],
+    h: [0, 360],
+    a: [0, 1],
+};
+export const DEFAULT_RANGES = {
+    l: RANGE_LIMITS.l,
+    c: RANGE_LIMITS.c,
+    h: RANGE_LIMITS.h,
+    a: RANGE_LIMITS.a,
+};
+export function rangeSpan([min, max]) {
+    return Math.max(max - min, 0);
+}
+export function cloneRange(range) {
+    return [range[0], range[1]];
+}
+/**
+ * Convert OKLCH to a CSS string
+ */
+export function oklchToCss(l, c, h, a = 1) {
+    if (a < 1) {
+        return `oklch(${l} ${c} ${h} / ${a})`;
+    }
+    return `oklch(${l} ${c} ${h})`;
+}
+/**
+ * Clamp a value between min and max
+ */
+export function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}
+//# sourceMappingURL=util.js.map

package/dist/colour-picker/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/colour-picker/util.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAC;AAC9B,MAAM,CAAC,MAAM,YAAY,GAA8B;IACrD,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;IACT,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC;IAClB,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC;IACX,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;CACD,CAAC;AACX,MAAM,CAAC,MAAM,cAAc,GAA8B;IACvD,CAAC,EAAE,YAAY,CAAC,CAAC;IACjB,CAAC,EAAE,YAAY,CAAC,CAAC;IACjB,CAAC,EAAE,YAAY,CAAC,CAAC;IACjB,CAAC,EAAE,YAAY,CAAC,CAAC;CACT,CAAC;AAEX,MAAM,UAAU,SAAS,CAAC,CAAC,GAAG,EAAE,GAAG,CAAQ;IACzC,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC,CAAC,CAAC;AAChC,CAAC;AAED,MAAM,UAAU,UAAU,CAAC,KAAY;IACrC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,CAAC,CAAU,CAAC;AACvC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,CAAS,EAAE,CAAS,EAAE,CAAS,EAAE,IAAY,CAAC;IACvE,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;QACV,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC;IACxC,CAAC;IACD,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC;AACjC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,KAAK,CAAC,KAAa,EAAE,GAAW,EAAE,GAAW;IAC3D,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,EAAE,GAAG,CAAC,CAAC;AAC7C,CAAC"}

package/dist/common/searchable.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Incremental-search host interface for tree-like components.
+ *
+ * The unified `TreeSearchHost` (with a depth-aware `filterPredicate`) replaces the
+ * previous separate `TreeSearchHost` / `MillerSearchHost` types, allowing a single
+ * search controller to work with all tree components.
+ */
+export type { TreeSearchHost } from './tree-component.js';
+//# sourceMappingURL=searchable.d.ts.map

package/dist/common/searchable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchable.d.ts","sourceRoot":"","sources":["../../src/common/searchable.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,YAAY,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/common/searchable.js

@@ -0,0 +1,9 @@
+/**
+ * Incremental-search host interface for tree-like components.
+ *
+ * The unified `TreeSearchHost` (with a depth-aware `filterPredicate`) replaces the
+ * previous separate `TreeSearchHost` / `MillerSearchHost` types, allowing a single
+ * search controller to work with all tree components.
+ */
+export {};
+//# sourceMappingURL=searchable.js.map

package/dist/common/searchable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchable.js","sourceRoot":"","sources":["../../src/common/searchable.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG"}

package/dist/common/tree-component.d.ts

@@ -0,0 +1,172 @@
+/**
+ * Common interface and event types for all tree-like components:
+ * ixfx-tree-list, ixfx-miller-list, ixfx-crumb-navigation.
+ *
+ * Import canonical data types from `./types.js`.
+ */
+import type { TreeDataModel } from './tree-data-model.js';
+import type { LoadChildrenCallback, TreeExclusivity, TreeFilterPredicate, TreeNode, TreeSelectionFilter } from './types.js';
+/**
+ * Fired when the selection set changes by any means (click, keyboard, programmatic).
+ * Event name: `select`
+ */
+export type TreeSelectDetail = {
+    /** The new selection set. */
+    readonly selected: ReadonlySet<TreeNode>;
+    /** The previous selection set (empty set if there was no prior selection). */
+    readonly previous: ReadonlySet<TreeNode>;
+};
+/**
+ * Fired when an item enters cursor focus — either the pointer hovers over it, or
+ * the keyboard navigation cursor moves to it.
+ * Event name: `tickle`
+ */
+export type TreeTickleDetail = {
+    readonly node: TreeNode;
+    readonly depth: number;
+};
+/**
+ * Fired when the user explicitly activates an item (Enter key or double-click).
+ * Event name: `activate`
+ */
+export type TreeActivateDetail = {
+    readonly node: TreeNode;
+    readonly depth: number;
+};
+/**
+ * Fired when the user clicks an item (raw pointer event, before any selection change).
+ * Event name: `item-click`
+ */
+export type TreeItemClickDetail = {
+    readonly node: TreeNode;
+    readonly depth: number;
+};
+/**
+ * Fired when a node or column is expanded.
+ * Event name: `expand`
+ */
+export type TreeExpandDetail = {
+    readonly node: TreeNode;
+    readonly depth: number;
+};
+/**
+ * Fired when a node or column is collapsed.
+ * Event name: `collapse`
+ */
+export type TreeCollapseDetail = {
+    readonly node: TreeNode;
+    readonly depth: number;
+};
+export type TreeSelectEvent = CustomEvent<TreeSelectDetail>;
+export type TreeTickleEvent = CustomEvent<TreeTickleDetail>;
+export type TreeActivateEvent = CustomEvent<TreeActivateDetail>;
+export type TreeItemClickEvent = CustomEvent<TreeItemClickDetail>;
+export type TreeExpandEvent = CustomEvent<TreeExpandDetail>;
+export type TreeCollapseEvent = CustomEvent<TreeCollapseDetail>;
+export interface TreeComponentEventMap {
+    'select': TreeSelectEvent;
+    'tickle': TreeTickleEvent;
+    'activate': TreeActivateEvent;
+    'item-click': TreeItemClickEvent;
+    'expand': TreeExpandEvent;
+    'collapse': TreeCollapseEvent;
+}
+/**
+ * The common interface all tree-like components must implement.
+ *
+ * Use this interface when writing controllers or utilities that should work
+ * across different tree component implementations.
+ *
+ * @example Writing a controller that works with any tree component:
+ * ```typescript
+ * function attachMyController(component: TreeComponent) {
+ *   component.addEventListener('select', e => console.log(e.detail.selected));
+ * }
+ * ```
+ */
+export interface TreeComponent extends EventTarget {
+    /**
+     * Root node of the tree.
+     * Set this directly for static/fully-known trees.
+     * Use `model` for lazy-loaded or programmatically mutated trees.
+     */
+    root: TreeNode | undefined;
+    /**
+     * Optional data model providing lazy loading, caching, and mutation helpers.
+     * When set, the component uses `model.getChildren()` instead of `loadChildren`,
+     * and re-renders when the model notifies of root or invalidation changes.
+     * `model` takes precedence over `loadChildren` when both are set.
+     */
+    model: TreeDataModel | undefined;
+    /**
+     * Callback for lazily loading children of a node.
+     * Superseded by `model` when both are set.
+     * Kept for backwards compatibility and simple use-cases.
+     */
+    loadChildren: LoadChildrenCallback | undefined;
+    /**
+     * The primary/most-recently selected node, or `undefined` if nothing is selected.
+     * In multi-selection modes (e.g. `interactionMode='standard'` with Ctrl+click) this is the most recently added node.
+     */
+    selectedNode: TreeNode | undefined;
+    /**
+     * The full selection set. Always in sync with `selectedNode`.
+     * Empty set when nothing is selected.
+     */
+    readonly selectedNodes: ReadonlySet<TreeNode>;
+    /**
+     * Restricts which kinds of nodes may be selected. Applied as a guard in all interaction modes.
+     * Reflected as the `selection-filter` attribute.
+     * @default 'leaf'
+     */
+    selectionFilter: TreeSelectionFilter;
+    /**
+     * Predicate used by search/filter controllers.
+     * When set, nodes for which the predicate returns `false` (and which have no
+     * matching descendants) are hidden from the rendered output.
+     */
+    filterPredicate: TreeFilterPredicate | undefined;
+    /**
+     * Controls how expanding one node affects other expanded nodes.
+     * Reflected as the `exclusivity` attribute.
+     * @default 'none'
+     */
+    exclusivity: TreeExclusivity;
+    /** Select `node`, replacing any current selection. Respects `selectionFilter` — no-op if the node is not selectable. */
+    select(node: TreeNode): void;
+    /** Remove `node` from the selection. */
+    deselect(node: TreeNode): void;
+    /** Clear the entire selection. */
+    clearSelection(): void;
+    /**
+     * Expand ancestors and select the node reached by following `keys` from the root's children.
+     * Returns `true` if the path was found and applied.
+     */
+    navigateTo(keys: readonly string[]): boolean;
+    /**
+     * Expand ancestors and select the first node for which `predicate` returns `true`.
+     * Returns `true` if a matching node was found.
+     */
+    navigateToNode(predicate: (node: TreeNode) => boolean): boolean;
+    /**
+     * Returns all nodes currently visible in the rendered output, in render order,
+     * with their depth (0-based, root's children are depth 0).
+     */
+    getNodes(): ReadonlyArray<{
+        node: TreeNode;
+        depth: number;
+    }>;
+}
+/**
+ * Extended interface used by search/filter controllers.
+ * Both TreeBaseElement and MillerBaseElement implement this.
+ *
+ * Replaces the previous separate `TreeSearchHost` / `MillerSearchHost` types
+ * in `searchable.ts`. The unified `filterPredicate` signature (with `depth`)
+ * allows a single search controller implementation to work with all tree components.
+ */
+export interface TreeSearchHost extends TreeComponent {
+    readonly shadowRoot: ShadowRoot | null;
+    readonly updateComplete: Promise<boolean>;
+}
+//# sourceMappingURL=tree-component.d.ts.map

package/dist/common/tree-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-component.d.ts","sourceRoot":"","sources":["../../src/common/tree-component.ts"],"names":[],"mappings":"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"}

package/dist/common/tree-component.js

@@ -0,0 +1,8 @@
+/**
+ * Common interface and event types for all tree-like components:
+ * ixfx-tree-list, ixfx-miller-list, ixfx-crumb-navigation.
+ *
+ * Import canonical data types from `./types.js`.
+ */
+export {};
+//# sourceMappingURL=tree-component.js.map

package/dist/common/tree-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-component.js","sourceRoot":"","sources":["../../src/common/tree-component.ts"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/dist/common/tree-data-model.d.ts

@@ -0,0 +1,100 @@
+import type { LoadChildrenCallback, TreeItem, TreeNode } from './types.js';
+type InvalidateEvent = {
+    type: 'invalidate';
+    key: string;
+};
+type RootEvent = {
+    type: 'root';
+    root: TreeNode;
+};
+type ModelEvent = InvalidateEvent | RootEvent;
+type ModelSubscriber = (event: ModelEvent) => void;
+export type TreeDataModelOptions = {
+    /** The initial root node. Required. */
+    root: TreeNode;
+    /**
+     * Optional callback for lazily loading children.
+     * If omitted, nodes with `children === undefined` are treated as empty branches.
+     */
+    loadChildren?: LoadChildrenCallback;
+};
+/**
+ * Manages tree data for tree-like components.
+ *
+ * Handles two concerns:
+ * 1. **Lazy loading** — caches children fetched via `loadChildren` and can invalidate
+ *    specific branches so they are re-fetched on next expand.
+ * 2. **Structural mutations** — convenience methods to add, remove, update, or move
+ *    nodes. Each mutation produces a new immutable root and notifies connected components.
+ *
+ * Assign an instance to a component's `model` property instead of setting `root`/`loadChildren`
+ * directly. The same model instance can be shared across multiple components.
+ *
+ * @example
+ * ```typescript
+ * const model = new TreeDataModel({
+ *   root: { item: { key: 'root', label: 'Root' }, children: [] },
+ *   loadChildren: async (node, depth, signal) => fetchChildren(node.item.key),
+ * });
+ * myTreeList.model = model;
+ * myMillerList.model = model;
+ *
+ * // Later — invalidate a branch to force a re-fetch on next expand:
+ * model.invalidate('some-key');
+ * ```
+ */
+export declare class TreeDataModel {
+    #private;
+    constructor(options: TreeDataModelOptions);
+    /** The current immutable root snapshot. */
+    get root(): TreeNode;
+    /**
+     * Replace the entire root with a new immutable snapshot.
+     * All cached children are cleared. Connected components re-render.
+     */
+    setRoot(root: TreeNode): void;
+    /**
+     * Returns children for the given node.
+     * If children are cached, they are returned immediately (as a resolved Promise).
+     * Otherwise the `loadChildren` callback is invoked and the result is cached.
+     * If no `loadChildren` is set and no cache entry exists, returns `[]`.
+     *
+     * Called by components internally — not typically called by application code.
+     */
+    getChildren(node: TreeNode, depth: number, signal: AbortSignal): Promise<TreeNode[]>;
+    /**
+     * Clears the cached children for the node with the given key.
+     * Connected components will collapse that node (if currently expanded), so that
+     * the next expand triggers a fresh `loadChildren` call.
+     */
+    invalidate(key: string): void;
+    /**
+     * Adds `node` as a child of the node identified by `parentKey`.
+     * Returns the new root (connected components are notified automatically).
+     */
+    addNode(parentKey: string, node: TreeNode): TreeNode;
+    /**
+     * Removes the node with the given key and all its descendants.
+     * Returns the new root (connected components are notified automatically).
+     */
+    removeNode(key: string): TreeNode;
+    /**
+     * Applies a partial update to the `item` of the node with the given key.
+     * Returns the new root (connected components are notified automatically).
+     */
+    updateItem(key: string, patch: Partial<TreeItem>): TreeNode;
+    /**
+     * Moves the node with the given key to become a child of `newParentKey`.
+     * Returns the new root (connected components are notified automatically).
+     */
+    moveNode(key: string, newParentKey: string): TreeNode;
+    /**
+     * Subscribe to model events. Returns an unsubscribe function.
+     * Components call this when the `model` property is set, and unsubscribe when it is unset.
+     *
+     * @internal
+     */
+    _subscribe(callback: ModelSubscriber): () => void;
+}
+export {};
+//# sourceMappingURL=tree-data-model.d.ts.map

package/dist/common/tree-data-model.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-data-model.d.ts","sourceRoot":"","sources":["../../src/common/tree-data-model.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAM3E,KAAK,eAAe,GAAG;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAC3D,KAAK,SAAS,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,QAAQ,CAAA;CAAE,CAAC;AAClD,KAAK,UAAU,GAAG,eAAe,GAAG,SAAS,CAAC;AAE9C,KAAK,eAAe,GAAG,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;AA2DnD,MAAM,MAAM,oBAAoB,GAAG;IACjC,uCAAuC;IACvC,IAAI,EAAE,QAAQ,CAAC;IACf;;;OAGG;IACH,YAAY,CAAC,EAAE,oBAAoB,CAAC;CACrC,CAAC;AAMF;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,aAAa;;gBAMZ,OAAO,EAAE,oBAAoB;IASzC,2CAA2C;IAC3C,IAAI,IAAI,IAAI,QAAQ,CAEnB;IAED;;;OAGG;IACH,OAAO,CAAC,IAAI,EAAE,QAAQ,GAAG,IAAI;IAU7B;;;;;;;OAOG;IACG,WAAW,CAAC,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,GAAG,OAAO,CAAC,QAAQ,EAAE,CAAC;IAmB1F;;;;OAIG;IACH,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI;IAS7B;;;OAGG;IACH,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,GAAG,QAAQ;IAMpD;;;OAGG;IACH,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,QAAQ;IAOjC;;;OAGG;IACH,UAAU,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,QAAQ;IAS3D;;;OAGG;IACH,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,GAAG,QAAQ;IAUrD;;;;;OAKG;IACH,UAAU,CAAC,QAAQ,EAAE,eAAe,GAAG,MAAM,IAAI;CAUlD"}