@ixfx/components 0.2.4 → 0.2.6

package/dist/miller/miller-base.js

@@ -1,1249 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { TreeDataModel } from '../common/tree-data-model.js';
-import { css, html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { TickledController } from '../interaction/tickled-controller.js';
-import { tickledStyles } from '../interaction/tickled-styles.js';
-const EXPAND_DEBOUNCE_MS = 150;
-/**
- * Base class for Miller column components. Handles column lifecycle,
- * column resizing, keyboard navigation, and selection modes.
- *
- * Subclasses must override `renderColumnContent`.
- *
- * ## Interaction modes (`interactionMode`)
- *
- * Controls how clicks map to selection changes. Default: `'standard'`.
- *
- * - `implicit`: Selection follows the cursor path (navigation mode).
- * - `standard`: Single click selects; Shift+click range-selects within a column;
- *   Cmd/Ctrl+click toggles individual items.
- * - `manual`: Component never modifies selection. Use `selectedKeys` / `setSelected`
- *   / `clearSelection` to drive state externally.
- * - `checked`: Checkboxes on every item (rendered by subclass via `_isChecked` /
- *   `_handleCheckboxClick`). Clicking the item navigates/expands; clicking the
- *   checkbox toggles selection of the node and all loaded descendants.
- *
- * ## Events
- * - `expand`: FYI event fired after a column opens. Detail: `{ node, depth }`
- * - `collapse`: FYI event fired when a column closes. Detail: `{ node, depth }`
- * - `header-click`: fired when a column header is clicked (requires `headers` attr).
- *   Detail: `{ depth, label, path: MillerNode[] }`
- * - `activate`: fired when Enter is pressed on an item. Detail: `{ node, depth }`
- * - `select`: fired when the selection set changes. Detail: `{ selected, previous }`
- * - `item-click`: fired on any item click. Detail: `{ node, depth }`
- * - `tickle`: fired when an item is hovered or keyboard cursor moves to it. Detail: `{ node, depth }`
- *
- * ## CSS variables
- * - `--column-bg`: var(--surface-3)
- * - `--column-header-bg`: var(--surface-2)
- * - `--column-header-text`: var(--surface-muted-text)
- * - `--column-separator`: var(--surface-5)
- * - `--column-resize-handle`: var(--surface-5)
- * - `--column-resize-handle-hover`: var(--accent)
- * - `--column-resize-width`: 4px
- * - `--item-hover-bg`: var(--item-bg-tickled)
- * - `--item-selected-bg`: var(--item-bg-selected)
- * - `--item-selected-text`: var(--item-text-selected)
- */
-let MillerBaseElement = class MillerBaseElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.headers = false;
-        /**
-         * Controls the column-level interaction pattern (how clicks map to column changes).
-         * This is distinct from `selectionFilter` (which restricts which node kinds are selectable).
-         * Default: `'standard'`.
-         */
-        this.interactionMode = `standard`;
-        // --- TreeComponent shared interface properties ---
-        this.selectionFilter = 'leaf';
-        this.exclusivity = 'none';
-        this._columns = [];
-        // Selected node at each depth (implicit mode)
-        this._selectedByDepth = new Map();
-        // Selected item keys (standard / manual / checked / interactionMode modes)
-        this._selectedKeys = new Set();
-        // Full selection set — implements TreeComponent.selectedNodes
-        this._selectedNodes = new Set();
-        // User-resized widths by depth (px)
-        this.#columnWidths = new Map();
-        // Resize drag state
-        this.#resizingDepth = -1;
-        this.#resizeStartX = 0;
-        this.#resizeStartWidth = 0;
-        // Tickled controller for hover/keyboard focus
-        this.tickled = new TickledController(this, {
-            getItems: () => {
-                const items = [];
-                for (let depth = 0; depth < this._columns.length; depth++) {
-                    const col = this._columns[depth];
-                    if (col) {
-                        for (const node of col) {
-                            items.push({ id: this.#buildTickledId(node, depth) });
-                        }
-                    }
-                }
-                return items;
-            },
-        });
-        this.#onKeyDown = (event) => {
-            const currentDepth = this.#getTickledDepthOrDefault();
-            const col = this._columns[currentDepth];
-            if (!col || col.length === 0) {
-                const depth0Col = this._columns[0];
-                if (depth0Col && depth0Col.length > 0) {
-                    this.tickled.setTickled(this.#buildTickledId(depth0Col[0], 0));
-                    this.requestUpdate();
-                }
-                return;
-            }
-            switch (event.key) {
-                case `ArrowDown`: {
-                    event.preventDefault();
-                    const current = this.#getTickledNodeAndDepth();
-                    let targetIndex = 0;
-                    if (current && current.depth === currentDepth) {
-                        targetIndex = Math.min(current.index + 1, col.length - 1);
-                    }
-                    const targetNode = col[targetIndex];
-                    if (!targetNode)
-                        break;
-                    this.#setTickledNode(targetNode, currentDepth);
-                    if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
-                        const prevIndex = current?.index ?? 0;
-                        if (event.shiftKey) {
-                            if (!this.#anchor || this.#anchor.depth !== currentDepth) {
-                                const anchorNode = col[prevIndex];
-                                if (anchorNode) {
-                                    this.#anchor = {
-                                        key: anchorNode.item.key,
-                                        depth: currentDepth,
-                                        index: prevIndex,
-                                        selectionSnapshot: this.interactionMode === `vscode` ? new Set(this._selectedKeys) : undefined,
-                                    };
-                                }
-                            }
-                            if (this.#anchor) {
-                                const from = Math.min(this.#anchor.index, targetIndex);
-                                const to = Math.max(this.#anchor.index, targetIndex);
-                                const rangeKeys = col.slice(from, to + 1).map(n => n.item.key);
-                                if (this.interactionMode === `vscode`) {
-                                    const snap = this.#anchor.selectionSnapshot;
-                                    for (const k of rangeKeys) {
-                                        if (snap.has(k))
-                                            this._selectedKeys.delete(k);
-                                        else
-                                            this._selectedKeys.add(k);
-                                    }
-                                }
-                                else {
-                                    this._selectedKeys = new Set(rangeKeys);
-                                }
-                            }
-                        }
-                        else if (this.interactionMode === `standard`) {
-                            this.#anchor = { key: targetNode.item.key, depth: currentDepth, index: targetIndex };
-                        }
-                        else {
-                            this.#anchor = undefined;
-                        }
-                    }
-                    this.requestUpdate();
-                    break;
-                }
-                case `ArrowUp`: {
-                    event.preventDefault();
-                    const current = this.#getTickledNodeAndDepth();
-                    let targetIndex = 0;
-                    if (current && current.depth === currentDepth) {
-                        targetIndex = Math.max(current.index - 1, 0);
-                    }
-                    const targetNode = col[targetIndex];
-                    if (!targetNode)
-                        break;
-                    this.#setTickledNode(targetNode, currentDepth);
-                    if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
-                        const prevIndex = current?.index ?? 0;
-                        if (event.shiftKey) {
-                            if (!this.#anchor || this.#anchor.depth !== currentDepth) {
-                                const anchorNode = col[prevIndex];
-                                if (anchorNode) {
-                                    this.#anchor = {
-                                        key: anchorNode.item.key,
-                                        depth: currentDepth,
-                                        index: prevIndex,
-                                        selectionSnapshot: this.interactionMode === `vscode` ? new Set(this._selectedKeys) : undefined,
-                                    };
-                                }
-                            }
-                            if (this.#anchor) {
-                                const from = Math.min(this.#anchor.index, targetIndex);
-                                const to = Math.max(this.#anchor.index, targetIndex);
-                                const rangeKeys = col.slice(from, to + 1).map(n => n.item.key);
-                                if (this.interactionMode === `vscode`) {
-                                    const snap = this.#anchor.selectionSnapshot;
-                                    for (const k of rangeKeys) {
-                                        if (snap.has(k))
-                                            this._selectedKeys.delete(k);
-                                        else
-                                            this._selectedKeys.add(k);
-                                    }
-                                }
-                                else {
-                                    this._selectedKeys = new Set(rangeKeys);
-                                }
-                            }
-                        }
-                        else if (this.interactionMode === `standard`) {
-                            this.#anchor = { key: targetNode.item.key, depth: currentDepth, index: targetIndex };
-                        }
-                        else {
-                            this.#anchor = undefined;
-                        }
-                    }
-                    this.requestUpdate();
-                    break;
-                }
-                case `ArrowRight`: {
-                    event.preventDefault();
-                    const tickled = this.#getTickledNodeAndDepth();
-                    if (!tickled) {
-                        if (col.length > 0) {
-                            this.#setTickledNode(col[0], currentDepth);
-                            this.requestUpdate();
-                        }
-                        return;
-                    }
-                    const { node, depth } = tickled;
-                    if (this.interactionMode === `vscode` || this.interactionMode === `standard`) {
-                        this._selectedByDepth.set(depth, node);
-                        this.#expandNode(node, depth);
-                    }
-                    else {
-                        this.#onItemClick(node, depth);
-                    }
-                    if (this._columns.length > depth + 1) {
-                        const nextCol = this._columns[depth + 1];
-                        if (nextCol && nextCol.length > 0) {
-                            this.#setTickledNode(nextCol[0], depth + 1);
-                        }
-                    }
-                    this.requestUpdate();
-                    break;
-                }
-                case `ArrowLeft`: {
-                    event.preventDefault();
-                    if (currentDepth > 0) {
-                        this.#abortPending();
-                        this._columns = this._columns.slice(0, currentDepth);
-                        const prevCol = this._columns[currentDepth - 1];
-                        if (prevCol && prevCol.length > 0) {
-                            const selectedNode = this._selectedByDepth.get(currentDepth - 1);
-                            const targetNode = selectedNode && prevCol.includes(selectedNode) ? selectedNode : prevCol[0];
-                            this.#setTickledNode(targetNode, currentDepth - 1);
-                        }
-                        this.requestUpdate();
-                    }
-                    break;
-                }
-                case `Enter`: {
-                    event.preventDefault();
-                    const tickled = this.#getTickledNodeAndDepth();
-                    if (!tickled)
-                        return;
-                    const { node, depth, index } = tickled;
-                    if (this.interactionMode === `standard` || this.interactionMode === `vscode`) {
-                        if (event.shiftKey && this.#anchor?.depth === depth) {
-                            const from = Math.min(this.#anchor.index, index);
-                            const to = Math.max(this.#anchor.index, index);
-                            this._selectedKeys = new Set(col.slice(from, to + 1).map(n => n.item.key));
-                        }
-                        else {
-                            this._selectedKeys.add(node.item.key);
-                            this.#anchor = { key: node.item.key, depth, index };
-                        }
-                    }
-                    else {
-                        this._selectedByDepth.set(depth, node);
-                    }
-                    this.dispatchEvent(new CustomEvent(`activate`, {
-                        detail: { node, depth },
-                        bubbles: true,
-                        composed: true,
-                    }));
-                    this.requestUpdate();
-                    break;
-                }
-                case `Escape`: {
-                    event.preventDefault();
-                    this.#abortPending();
-                    if (this._columns.length > 1) {
-                        this._columns = this._columns.slice(0, -1);
-                        const newDepth = Math.max(0, currentDepth - 1);
-                        const prevCol = this._columns[newDepth];
-                        if (prevCol && prevCol.length > 0) {
-                            const selectedNode = this._selectedByDepth.get(newDepth);
-                            const targetNode = selectedNode && prevCol.includes(selectedNode) ? selectedNode : prevCol[0];
-                            this.#setTickledNode(targetNode, newDepth);
-                        }
-                        this.requestUpdate();
-                    }
-                    break;
-                }
-            }
-        };
-        // --- Column resize ---
-        this.#onResizeStart = (event, depth) => {
-            event.preventDefault();
-            event.stopPropagation();
-            this.#resizingDepth = depth;
-            this.#resizeStartX = event.clientX;
-            const el = this.shadowRoot?.querySelectorAll(`.column`)[depth];
-            this.#resizeStartWidth = el ? el.getBoundingClientRect().width : 200;
-            window.addEventListener(`pointermove`, this.#onResizeMove);
-            window.addEventListener(`pointerup`, this.#onResizeEnd);
-        };
-        this.#onResizeMove = (event) => {
-            if (this.#resizingDepth < 0)
-                return;
-            const delta = event.clientX - this.#resizeStartX;
-            const newWidth = Math.max(32, this.#resizeStartWidth + delta);
-            this.#columnWidths.set(this.#resizingDepth, newWidth);
-            this.requestUpdate();
-        };
-        this.#onResizeEnd = () => {
-            this.#resizingDepth = -1;
-            window.removeEventListener(`pointermove`, this.#onResizeMove);
-            window.removeEventListener(`pointerup`, this.#onResizeEnd);
-        };
-    }
-    // Most recently selected node
-    #lastSelectedNode;
-    // Anchor for shift-click / shift-arrow range selection
-    #anchor;
-    // User-resized widths by depth (px)
-    #columnWidths;
-    // Pending lazy expansion
-    #pendingNode;
-    #pendingController;
-    // Debounce timer for loadChildren callback
-    #expandTimer;
-    // Resize drag state
-    #resizingDepth;
-    #resizeStartX;
-    #resizeStartWidth;
-    // Model subscription teardown
-    #modelUnsubscribe;
-    // Helper to build unique ID from depth and node key
-    #buildTickledId(node, depth) {
-        return `${depth}:${node.item.key}`;
-    }
-    // Helper to extract depth from tickled ID
-    #getTickledDepth() {
-        const id = this.tickled.tickledId;
-        if (!id)
-            return undefined;
-        const colonIndex = id.indexOf(':');
-        if (colonIndex < 0)
-            return undefined;
-        return Number(id.substring(0, colonIndex));
-    }
-    updated(changedProps) {
-        if (changedProps.has(`root`) && this.root) {
-            this.#abortPending();
-            this._columns = this.root.children ? [this.root.children] : [];
-            this._selectedByDepth.clear();
-            this._selectedKeys = new Set();
-            this._selectedNodes.clear();
-            this.#lastSelectedNode = undefined;
-            this.#anchor = undefined;
-            this.tickled.clearTickled();
-        }
-        if (changedProps.has(`model`)) {
-            this.#modelUnsubscribe?.();
-            this.#modelUnsubscribe = undefined;
-            const model = this.model;
-            if (model) {
-                this.root = model.root;
-                this.#modelUnsubscribe = model._subscribe(event => {
-                    if (event.type === 'root') {
-                        this.root = event.root;
-                        this.requestUpdate();
-                    }
-                    else if (event.type === 'invalidate') {
-                        // Collapse the column that shows this node's children, if open
-                        // Find which column depth contains the invalidated node
-                        for (let depth = 0; depth < this._columns.length - 1; depth++) {
-                            const col = this._columns[depth];
-                            if (col?.some(n => n.item.key === event.key)) {
-                                this._columns = this._columns.slice(0, depth + 1);
-                                this.requestUpdate();
-                                break;
-                            }
-                        }
-                    }
-                });
-            }
-        }
-        // Detect when the app has resolved a pending expansion
-        if (this.#pendingNode?.children !== undefined && this._loadingDepth !== undefined) {
-            const loadingDepth = this._loadingDepth;
-            const resolvedChildren = this.#pendingNode.children;
-            this.#pendingNode = undefined;
-            this.#pendingController = undefined;
-            this._loadingDepth = undefined;
-            const cols = this._columns.slice(0, loadingDepth);
-            if (resolvedChildren.length > 0)
-                cols.push(resolvedChildren);
-            this._columns = cols;
-        }
-        // Scroll new rightmost column into view
-        const prevColumns = changedProps.get(`_columns`);
-        const columnAdded = changedProps.has(`_columns`) && (prevColumns?.length ?? 0) < this._columns.length;
-        const loadingAppeared = changedProps.has(`_loadingDepth`) && this._loadingDepth !== undefined;
-        if (columnAdded || loadingAppeared) {
-            const container = this.shadowRoot?.querySelector(`#container`);
-            container?.scrollTo({ left: container.scrollWidth, behavior: `smooth` });
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#modelUnsubscribe?.();
-        this.#modelUnsubscribe = undefined;
-    }
-    // --- Public API ---
-    getConfig() {
-        const columnWidths = {};
-        for (const [depth, width] of this.#columnWidths) {
-            columnWidths[depth] = width;
-        }
-        return { columnWidths };
-    }
-    setConfig(config) {
-        this.#columnWidths.clear();
-        for (const [depth, width] of Object.entries(config.columnWidths)) {
-            this.#columnWidths.set(Number(depth), width);
-        }
-        this.requestUpdate();
-    }
-    /** Read current selection as an immutable set of item keys. */
-    get selectedKeys() {
-        return this._selectedKeys;
-    }
-    /** Replace entire selection and trigger a re-render. */
-    set selectedKeys(keys) {
-        this._selectedKeys = new Set(keys);
-        this.requestUpdate();
-    }
-    // --- TreeComponent.selectedNode / selectedNodes ---
-    /** The most recently selected node. */
-    get selectedNode() {
-        return this.#lastSelectedNode;
-    }
-    set selectedNode(node) {
-        this.#lastSelectedNode = node;
-        if (node) {
-            if (this.interactionMode === `implicit` || this.interactionMode === `standard`) {
-                this._selectedKeys = new Set([node.item.key]);
-            }
-        }
-        this.requestUpdate();
-    }
-    /** Full selection set (implements TreeComponent interface). */
-    get selectedNodes() {
-        return this._selectedNodes;
-    }
-    // --- TreeComponent programmatic selection ---
-    /** Add `node` to the selection (respects selectionFilter). Dispatches `select` event. */
-    select(node) {
-        if (!this.#canSelect(node))
-            return;
-        const prev = new Set(this._selectedNodes);
-        this._selectedNodes.add(node);
-        this._selectedKeys.add(node.item.key);
-        this.#lastSelectedNode = node;
-        this.#dispatchSelectEvent(prev);
-        this.requestUpdate();
-    }
-    /** Remove `node` from the selection. Dispatches `select` event. */
-    deselect(node) {
-        if (!this._selectedNodes.has(node))
-            return;
-        const prev = new Set(this._selectedNodes);
-        this._selectedNodes.delete(node);
-        this._selectedKeys.delete(node.item.key);
-        if (this.#lastSelectedNode === node) {
-            this.#lastSelectedNode = [...this._selectedNodes].at(-1);
-        }
-        this.#dispatchSelectEvent(prev);
-        this.requestUpdate();
-    }
-    /**
-     * Clear all selection and trigger a re-render.
-     */
-    clearSelection() {
-        const prev = new Set(this._selectedNodes);
-        this._selectedKeys = new Set();
-        this._selectedNodes.clear();
-        this.#lastSelectedNode = undefined;
-        if (prev.size > 0) {
-            this.#dispatchSelectEvent(prev);
-        }
-        this.requestUpdate();
-    }
-    /**
-     * Select or deselect a single node by key.
-     * In `checked` interactionMode this also recursively selects/deselects all loaded descendants.
-     */
-    setSelected(node, selected) {
-        if (this.interactionMode === `checked`) {
-            this.#applyCheckedToggle(node, selected);
-        }
-        else {
-            if (selected) {
-                this._selectedKeys.add(node.item.key);
-                this._selectedNodes.add(node);
-            }
-            else {
-                this._selectedKeys.delete(node.item.key);
-                this._selectedNodes.delete(node);
-            }
-        }
-        this.requestUpdate();
-    }
-    /**
-     * Return all MillerNodes whose key is in `_selectedKeys`, searching only
-     * the currently visible columns.
-     */
-    getSelected() {
-        const results = [];
-        for (const col of this._columns) {
-            for (const node of col) {
-                if (this._selectedKeys.has(node.item.key))
-                    results.push(node);
-            }
-        }
-        return results;
-    }
-    /**
-     * Programmatically navigate to a node by key path.
-     */
-    navigateTo(keys) {
-        if (!this.root?.children)
-            return false;
-        this.#abortPending();
-        this._selectedByDepth.clear();
-        this.tickled.clearTickled();
-        const newColumns = [this.root.children];
-        let currentColumn = this.root.children;
-        let success = true;
-        let lastNode;
-        let lastDepth = 0;
-        for (let depth = 0; depth < keys.length; depth++) {
-            const idx = currentColumn.findIndex(n => n.item.key === keys[depth]);
-            if (idx < 0) {
-                success = false;
-                break;
-            }
-            const node = currentColumn[idx];
-            this._selectedByDepth.set(depth, node);
-            lastNode = node;
-            lastDepth = depth;
-            if (node.item.isLeaf || !node.children || node.children.length === 0) {
-                if (depth < keys.length - 1)
-                    success = false;
-                break;
-            }
-            newColumns.push(node.children);
-            currentColumn = node.children;
-        }
-        this._columns = newColumns;
-        if (lastNode) {
-            this.tickled.setTickled(this.#buildTickledId(lastNode, lastDepth));
-        }
-        if (this.interactionMode !== `implicit` && this.interactionMode !== `manual`) {
-            const leafKey = keys.at(-1);
-            if (leafKey)
-                this._selectedKeys = new Set([leafKey]);
-        }
-        this.requestUpdate();
-        this.#scrollNavigatedItemIntoView();
-        return success;
-    }
-    /**
-     * Programmatically navigate to the first node (breadth-first) matching a predicate.
-     */
-    navigateToNode(predicate) {
-        if (!this.root?.children)
-            return false;
-        const keyPath = this.#findNodePath(this.root.children, predicate);
-        if (!keyPath)
-            return false;
-        return this.navigateTo(keyPath);
-    }
-    getNodes() {
-        if (!this.root?.children)
-            return [];
-        const result = [];
-        const visit = (node, depth) => {
-            result.push({ node, depth });
-            if (node.children) {
-                for (const child of node.children)
-                    visit(child, depth + 1);
-            }
-        };
-        for (const child of this.root.children)
-            visit(child, 0);
-        return result;
-    }
-    #findNodePath(nodes, predicate, prefix = []) {
-        for (const node of nodes) {
-            const path = [...prefix, node.item.key];
-            if (predicate(node))
-                return path;
-            if (node.children?.length) {
-                const result = this.#findNodePath(node.children, predicate, path);
-                if (result)
-                    return result;
-            }
-        }
-        return undefined;
-    }
-    // --- Methods subclasses override ---
-    renderColumnContent(nodes, depth) {
-        console.warn(`ixfx-miller-base: renderColumnContent not overridden. depth=${depth}, nodes=${nodes.length}`);
-        return nothing;
-    }
-    // Called by subclasses to handle item clicks
-    _handleItemClick(node, depth, event) {
-        this.#onItemClick(node, depth, event);
-    }
-    /**
-     * Called by subclasses (in `checked` interactionMode) when a checkbox is clicked.
-     */
-    _handleCheckboxClick(event, node, _depth) {
-        event.stopPropagation();
-        this.#onCheckboxClick(node);
-    }
-    /**
-     * Called by subclasses when an item is double-clicked.
-     */
-    _handleItemDblClick(node, depth, _event) {
-        this.dispatchEvent(new CustomEvent(`item-dblclick`, {
-            detail: { node, depth },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    /**
-     * Called by subclasses when an item is right-clicked.
-     */
-    _handleItemRightClick(node, depth, event) {
-        this.dispatchEvent(new CustomEvent(`item-rightclick`, {
-            detail: { node, depth, mouseEvent: event },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    /**
-     * Called by subclasses when a column header is right-clicked.
-     */
-    _handleHeaderRightClick(event, depth) {
-        const label = this.#getColumnHeader(depth);
-        const path = this.#buildPath(depth);
-        this.dispatchEvent(new CustomEvent(`header-rightclick`, {
-            detail: { depth, label, path, mouseEvent: event },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    _isSelected(node, depth) {
-        if (this.interactionMode === `implicit`) {
-            return this._selectedByDepth.get(depth) === node;
-        }
-        return this._selectedKeys.has(node.item.key);
-    }
-    #isAncestor(node, depth) {
-        const nextCol = this._columns[depth + 1];
-        return nextCol !== undefined && node.children === nextCol;
-    }
-    _isOpen(node, depth) {
-        return this.#isAncestor(node, depth);
-    }
-    /**
-     * Return the display state for an item identified by key at a given depth.
-     */
-    getItemState(key, depth) {
-        const col = this._columns[depth];
-        const node = col?.find(n => n.item.key === key);
-        if (!node)
-            return undefined;
-        return {
-            selected: this._isSelected(node, depth),
-            open: this.#isAncestor(node, depth),
-            focused: this._isFocused(node, depth),
-            isLeaf: node.item.isLeaf ?? false,
-        };
-    }
-    // --- Internal ---
-    #canSelect(node) {
-        if (this.selectionFilter === 'none')
-            return false;
-        if (this.selectionFilter === 'leaf')
-            return node.item.isLeaf !== false;
-        if (this.selectionFilter === 'branch')
-            return node.item.isLeaf === false || (node.children !== undefined && node.children.length > 0);
-        return true;
-    }
-    #dispatchSelectEvent(previous) {
-        const detail = {
-            selected: new Set(this._selectedNodes),
-            previous,
-        };
-        this.dispatchEvent(new CustomEvent(`select`, {
-            detail,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    #abortPending() {
-        if (this.#expandTimer !== undefined) {
-            clearTimeout(this.#expandTimer);
-            this.#expandTimer = undefined;
-        }
-        if (this.#pendingController) {
-            const node = this.#pendingNode;
-            const depth = this._loadingDepth;
-            this.#pendingController.abort();
-            this.#pendingController = undefined;
-            this.#pendingNode = undefined;
-            this._loadingDepth = undefined;
-            if (node && depth !== undefined) {
-                this.dispatchEvent(new CustomEvent(`collapse`, {
-                    detail: { node, depth },
-                    bubbles: true,
-                    composed: true,
-                }));
-            }
-        }
-    }
-    /**
-     * Build the ancestry path for a given column depth.
-     */
-    #buildPath(depth) {
-        const path = [];
-        if (this.root)
-            path.push(this.root);
-        for (let d = 0; d < depth; d++) {
-            const sel = this._selectedByDepth.get(d);
-            if (sel)
-                path.push(sel);
-        }
-        return path;
-    }
-    #onHeaderClick(depth) {
-        const label = this.#getColumnHeader(depth);
-        const path = this.#buildPath(depth);
-        const detail = { depth, label, path };
-        this.dispatchEvent(new CustomEvent(`header-click`, {
-            detail,
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    #onItemClick(node, depth, event) {
-        if (this._loadingDepth !== undefined && this._loadingDepth > depth) {
-            this.#abortPending();
-        }
-        this.tickled.setTickled(this.#buildTickledId(node, depth));
-        this.dispatchEvent(new CustomEvent(`item-click`, {
-            detail: { node, depth },
-            bubbles: true,
-            composed: true,
-        }));
-        switch (this.interactionMode) {
-            case `implicit`:
-                this.#handleImplicitClick(node, depth);
-                break;
-            case `standard`:
-                this.#handleStandardClick(node, depth, event);
-                break;
-            case `vscode`:
-                this.#handleStandardClick(node, depth, event);
-                break;
-            case `manual`:
-                break;
-            case `checked`:
-                this.#expandNode(node, depth);
-                break;
-        }
-    }
-    #handleImplicitClick(node, depth) {
-        const previous = new Set(this._selectedNodes);
-        this._selectedByDepth.set(depth, node);
-        this.#lastSelectedNode = node;
-        this._selectedKeys = new Set([node.item.key]);
-        this._selectedNodes.clear();
-        this._selectedNodes.add(node);
-        this.#expandNode(node, depth);
-        if (!previous.has(node)) {
-            this.#dispatchSelectEvent(previous);
-        }
-    }
-    #handleStandardClick(node, depth, event) {
-        const col = this._columns[depth];
-        const index = col ? col.indexOf(node) : -1;
-        const isMeta = event ? (event.metaKey || event.ctrlKey) : false;
-        const isShift = event ? event.shiftKey : false;
-        if (isMeta) {
-            if (this._selectedKeys.has(node.item.key)) {
-                this._selectedKeys.delete(node.item.key);
-                this._selectedNodes.delete(node);
-            }
-            else {
-                this._selectedKeys.add(node.item.key);
-                this._selectedNodes.add(node);
-            }
-            this.#anchor = index >= 0 ? { key: node.item.key, depth, index } : this.#anchor;
-            this.requestUpdate();
-            return;
-        }
-        if (isShift && this.#anchor && this.#anchor.depth === depth && col) {
-            const from = Math.min(this.#anchor.index, index);
-            const to = Math.max(this.#anchor.index, index);
-            const rangeNodes = col.slice(from, to + 1);
-            this._selectedKeys = new Set(rangeNodes.map(n => n.item.key));
-            this._selectedNodes = new Set(rangeNodes);
-            this.requestUpdate();
-            return;
-        }
-        const previous = new Set(this._selectedNodes);
-        this._selectedKeys = new Set([node.item.key]);
-        this._selectedNodes = new Set([node]);
-        this.#anchor = index >= 0 ? { key: node.item.key, depth, index } : undefined;
-        this._selectedByDepth.set(depth, node);
-        this.#lastSelectedNode = node;
-        this.#expandNode(node, depth);
-        if (!previous.has(node) || previous.size !== 1) {
-            this.#dispatchSelectEvent(previous);
-        }
-    }
-    #expandNode(node, depth) {
-        if (node.item.isLeaf) {
-            this._columns = this._columns.slice(0, depth + 1);
-            this.requestUpdate();
-            return;
-        }
-        if (node.children === undefined) {
-            this._columns = this._columns.slice(0, depth + 1);
-            this._loadingDepth = depth + 1;
-            this.#pendingNode = node;
-            const controller = new AbortController();
-            this.#pendingController = controller;
-            this.dispatchEvent(new CustomEvent(`expand`, {
-                detail: { node, depth },
-                bubbles: true,
-                composed: true,
-            }));
-            const applyChildren = (children) => {
-                if (controller.signal.aborted)
-                    return;
-                node.children = children;
-                this.#pendingNode = undefined;
-                this.#pendingController = undefined;
-                this._loadingDepth = undefined;
-                const cols = this._columns.slice(0, depth + 1);
-                if (children.length > 0)
-                    cols.push(children);
-                this._columns = cols;
-            };
-            const handleError = (err) => {
-                if (err.name !== `AbortError`)
-                    console.error(err);
-                node.children = [];
-                this.#pendingNode = undefined;
-                this.#pendingController = undefined;
-                this._loadingDepth = undefined;
-                this.requestUpdate();
-            };
-            const loadFn = this.model
-                ? (n, d, s) => this.model.getChildren(n, d, s)
-                : this.loadChildren;
-            if (loadFn) {
-                if (this.#expandTimer !== undefined) {
-                    clearTimeout(this.#expandTimer);
-                }
-                this.#expandTimer = setTimeout(() => {
-                    this.#expandTimer = undefined;
-                    if (this.#pendingNode !== node)
-                        return;
-                    const result = loadFn(node, depth, controller.signal);
-                    if (result instanceof Promise) {
-                        result.then(applyChildren).catch(handleError);
-                    }
-                    else {
-                        applyChildren(result);
-                    }
-                }, EXPAND_DEBOUNCE_MS);
-            }
-            else {
-                this._loadingDepth = undefined;
-                this.#pendingNode = undefined;
-                this.#pendingController = undefined;
-                const newColumns = this._columns.slice(0, depth + 1);
-                newColumns.push([]);
-                this._columns = newColumns;
-            }
-        }
-        else {
-            const newColumns = this._columns.slice(0, depth + 1);
-            newColumns.push(node.children);
-            this._columns = newColumns;
-            this.dispatchEvent(new CustomEvent(`expand`, {
-                detail: { node, depth },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    }
-    #onCheckboxClick(node) {
-        const currentlySelected = this._selectedKeys.has(node.item.key);
-        const hasLoadedChildren = !!(node.children?.length);
-        const allDescendantsSelected = hasLoadedChildren
-            ? this.#allDescendantsSelected(node)
-            : currentlySelected;
-        if (allDescendantsSelected) {
-            this.#applyCheckedToggle(node, false);
-        }
-        else {
-            this.#applyCheckedToggle(node, true);
-        }
-        this.requestUpdate();
-    }
-    #allDescendantsSelected(node) {
-        if (!this._selectedKeys.has(node.item.key))
-            return false;
-        if (!node.children?.length)
-            return true;
-        return node.children.every(child => this.#allDescendantsSelected(child));
-    }
-    #applyCheckedToggle(node, selected) {
-        if (selected) {
-            this._selectedKeys.add(node.item.key);
-            this._selectedNodes.add(node);
-        }
-        else {
-            this._selectedKeys.delete(node.item.key);
-            this._selectedNodes.delete(node);
-        }
-        if (node.children) {
-            for (const child of node.children) {
-                this.#applyCheckedToggle(child, selected);
-            }
-        }
-    }
-    #getTickledDepthOrDefault() {
-        return this.#getTickledDepth() ?? 0;
-    }
-    #getTickledNodeAndDepth() {
-        const id = this.tickled.tickledId;
-        if (!id)
-            return undefined;
-        const colonIndex = id.indexOf(':');
-        if (colonIndex < 0)
-            return undefined;
-        const depth = Number(id.substring(0, colonIndex));
-        const key = id.substring(colonIndex + 1);
-        const col = this._columns[depth];
-        if (!col)
-            return undefined;
-        const index = col.findIndex(n => n.item.key === key);
-        if (index < 0)
-            return undefined;
-        return { node: col[index], depth, index };
-    }
-    #scrollNavigatedItemIntoView() {
-        requestAnimationFrame(() => {
-            const tickled = this.#getTickledNodeAndDepth();
-            if (!tickled)
-                return;
-            const container = this.shadowRoot?.querySelectorAll(`.column`)[tickled.depth]?.querySelector(`.column-content`);
-            if (!container)
-                return;
-            const items = container.querySelectorAll(`.item`);
-            const item = items[tickled.index];
-            item?.scrollIntoView({ block: `nearest`, behavior: `smooth` });
-        });
-    }
-    #setTickledNode(node, depth) {
-        this.tickled.setTickled(this.#buildTickledId(node, depth));
-        this.dispatchEvent(new CustomEvent(`tickle`, {
-            detail: { node, depth },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    #onKeyDown;
-    // --- Column resize ---
-    #onResizeStart;
-    #onResizeMove;
-    #onResizeEnd;
-    // --- Render ---
-    #getColumnHeader(depth) {
-        if (depth === 0)
-            return this.root?.item.label ?? ``;
-        const explicit = this._selectedByDepth.get(depth - 1);
-        if (explicit)
-            return explicit.item.label;
-        const prevCol = this._columns[depth - 1];
-        const thisCol = this._columns[depth];
-        if (prevCol && thisCol) {
-            const parent = prevCol.find(n => n.children === thisCol);
-            if (parent)
-                return parent.item.label;
-        }
-        return ``;
-    }
-    #columnStyle(depth) {
-        const w = this.#columnWidths.get(depth);
-        return w !== undefined ? `width:${w}px;flex-shrink:0` : `width:max-content`;
-    }
-    #isFocused(node, depth) {
-        return this.tickled.isTickled(this.#buildTickledId(node, depth));
-    }
-    /**
-     * Override to provide a custom loading indicator.
-     */
-    renderLoadingIndicator() {
-        return html `<div class="loading-spinner"></div>`;
-    }
-    #renderLoadingColumn() {
-        const depth = this._loadingDepth;
-        return html `
-      <div class="column loading-column" style=${this.#columnStyle(depth)}>
-        ${this.headers
-            ? html `
-          <div class="column-header">${this.#getColumnHeader(depth)}</div>
-        `
-            : nothing}
-        <div class="column-content loading-content">
-          ${this.renderLoadingIndicator()}
-        </div>
-      </div>
-    `;
-    }
-    render() {
-        return html `
-      <div id="container" @keydown=${this.#onKeyDown} tabindex="0">
-        ${this._columns.map((nodes, depth) => {
-            const visibleNodes = this.filterPredicate
-                ? nodes.filter(n => this.filterPredicate(n, depth))
-                : nodes;
-            return html `
-          <div class="column" style=${this.#columnStyle(depth)}>
-            ${this.headers
-                ? html `
-              <div class="column-header"
-                @click=${() => this.#onHeaderClick(depth)}
-                @contextmenu=${(e) => this._handleHeaderRightClick(e, depth)}>
-                ${this.#getColumnHeader(depth)}
-              </div>
-            `
-                : nothing}
-            <div class="column-content">
-              ${this.renderColumnContent(visibleNodes, depth)}
-            </div>
-            <div class="resize-handle"
-              @pointerdown=${(e) => this.#onResizeStart(e, depth)}>
-            </div>
-          </div>
-        `;
-        })}
-        ${this._loadingDepth !== undefined ? this.#renderLoadingColumn() : nothing}
-      </div>
-    `;
-    }
-    _getFocusedIndex(depth) {
-        const tickled = this.#getTickledNodeAndDepth();
-        if (tickled && tickled.depth === depth) {
-            return tickled.index;
-        }
-        return 0;
-    }
-    _isFocused(node, depth) {
-        return this.#isFocused(node, depth);
-    }
-    /**
-     * Called by subclasses when pointer enters an item.
-     * Fires tickle event and switches to mouse mode.
-     */
-    _handleItemPointerEnter(node, depth) {
-        this.tickled.handlePointerEnter(this.#buildTickledId(node, depth));
-        this.dispatchEvent(new CustomEvent(`tickle`, {
-            detail: { node, depth },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    /**
-     * Called by subclasses when pointer leaves the column container.
-     */
-    _handleColumnPointerLeave() {
-        this.tickled.handlePointerLeave(new PointerEvent('pointerleave'));
-    }
-    static { this.styles = [tickledStyles, css `
-    :host {
-      --column-bg: var(--surface-3);
-      --column-header-bg: var(--surface-2);
-      --column-header-text: var(--surface-muted-text);
-      --column-separator: var(--surface-5);
-      --column-resize-handle: var(--surface-5);
-      --column-resize-handle-hover: var(--accent);
-      --column-resize-width: 4px;
-      --item-hover-bg: var(--item-bg-tickled);
-      --item-open-bg: color-mix(in oklch, var(--accent, oklch(60% 0.15 140)) 15%, transparent);
-      --item-selected-bg: var(--item-bg-selected);
-      --item-selected-text: var(--item-text-selected);
-
-      display: block;
-      overflow: hidden;
-      position: relative;
-      box-sizing: border-box;
-    }
-
-    #container {
-      display: flex;
-      height: 100%;
-      overflow-x: auto;
-      outline: none;
-    }
-
-    .column {
-      display: flex;
-      flex-direction: column;
-      position: relative;
-      background: var(--column-bg);
-      border-right: 1px solid var(--column-separator);
-      flex-shrink: 0;
-    }
-
-    .column-header {
-      background: var(--column-header-bg);
-      color: var(--column-header-text);
-      font-size: var(--text-s, 11px);
-      font-family: var(--font-family, system-ui, sans-serif);
-      font-weight: var(--font-weight-bold, 600);
-      padding: var(--space-xs, 3px) var(--space-m, 8px);
-      border-bottom: 1px solid var(--column-separator);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex-shrink: 0;
-      cursor: pointer;
-      user-select: none;
-      transition: background var(--transition, 0.15s ease-out),
-                  color var(--transition, 0.15s ease-out);
-    }
-
-    .column-header:hover {
-      background: var(--item-hover-bg);
-      color: var(--surface-2-text, #fff);
-    }
-
-    .column-content {
-      flex: 1;
-      overflow-y: auto;
-      overflow-x: visible;
-    }
-
-    .resize-handle {
-      position: absolute;
-      top: 0;
-      right: 0;
-      width: var(--column-resize-width);
-      height: 100%;
-      background: var(--column-resize-handle);
-      cursor: ew-resize;
-      z-index: 1;
-      transition: background var(--transition, 0.15s ease-out);
-    }
-
-    .resize-handle:hover {
-      background: var(--column-resize-handle-hover);
-    }
-
-    .loading-column {
-      min-width: 60px;
-    }
-
-    .loading-content {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .loading-spinner {
-      width: 22px;
-      height: 22px;
-      border: 2px solid var(--column-separator);
-      border-top-color: var(--accent, oklch(60% 0.15 140));
-      border-radius: 50%;
-      animation: miller-spin 0.7s linear infinite;
-    }
-
-    @keyframes miller-spin {
-      to { transform: rotate(360deg); }
-    }
-
-    ::highlight(incr-search-highlight) {
-      background: var(--search-highlight-bg, var(--accent));
-      color: var(--search-highlight-color, var(--accent-text, #fff));
-      border-radius: 2px;
-      padding: 0 1px;
-    }
-  `]; }
-};
-__decorate([
-    property({ type: Object })
-], MillerBaseElement.prototype, "root", void 0);
-__decorate([
-    property({ attribute: false })
-], MillerBaseElement.prototype, "model", void 0);
-__decorate([
-    property({ type: Boolean })
-], MillerBaseElement.prototype, "headers", void 0);
-__decorate([
-    property({ type: String })
-], MillerBaseElement.prototype, "interactionMode", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'selection-filter' })
-], MillerBaseElement.prototype, "selectionFilter", void 0);
-__decorate([
-    property({ reflect: true, attribute: 'exclusivity' })
-], MillerBaseElement.prototype, "exclusivity", void 0);
-__decorate([
-    property({ type: Object })
-], MillerBaseElement.prototype, "loadChildren", void 0);
-__decorate([
-    property({ attribute: false })
-], MillerBaseElement.prototype, "filterPredicate", void 0);
-__decorate([
-    state()
-], MillerBaseElement.prototype, "_columns", void 0);
-__decorate([
-    state()
-], MillerBaseElement.prototype, "_loadingDepth", void 0);
-__decorate([
-    state()
-], MillerBaseElement.prototype, "_selectedNodes", void 0);
-MillerBaseElement = __decorate([
-    customElement(`ixfx-miller-base`)
-], MillerBaseElement);
-export { MillerBaseElement };
-//# sourceMappingURL=miller-base.js.map