@ixfx/components 0.2.2 → 0.2.4

package/dist/miller/miller-base.js

@@ -0,0 +1,1249 @@
+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