@ixfx/components 0.13.7 → 0.13.9

package/dist/{index-BG8E13J5.d.ts → index-CSCrK0hR.d.ts}

@@ -123,6 +123,24 @@ declare class TreeBaseElement extends LitElement implements TreeComponent, TreeS
   clearSelection(): void;
   selectAll(): void;
   deselectAll(): void;
+  /**
+   * Expand every already-loaded branch in a single update. With `maxDepth`,
+   * only branches at depth < `maxDepth` are expanded (the root's children are
+   * depth 0), so rows at depth `maxDepth` become visible but stay collapsed.
+   *
+   * Unloaded (lazy) branches are not fetched — call again once their children
+   * have loaded to expand further. Bulk expansion ignores `exclusivity`. Fires
+   * one `expand` event per branch that actually opens — none for branches that
+   * were already expanded, including ones opened by filter auto-expansion.
+   */
+  expandAll(maxDepth?: number): void;
+  /**
+   * Collapse expanded branches in a single update. With `maxDepth`, only
+   * branches at depth >= `maxDepth` are collapsed, leaving the tree open down
+   * to depth `maxDepth - 1` (`collapseAll(0)` is a full collapse). Fires one
+   * `collapse` event per branch that actually closes.
+   */
+  collapseAll(maxDepth?: number): void;
   navigateTo(keys: readonly string[], options?: TreeNavigateOptions): boolean;
   navigateToNode(predicate: (node: TreeNode) => boolean): boolean;
   /** Expand ancestors + move the cursor to `key`, without touching the selection (search "navigate" mode). */

package/dist/index.d.ts

@@ -9,7 +9,7 @@ import { a as ColourPickerInputEvent, i as ColourPickerEventDetail, n as ColourP
 import { t as LabelledRangeInput } from "./index-CoqtMSd9.js";
 import { A as TreeTickleEvent, B as ListNativeDragStartEvent, C as TreeItemDblClickEvent, D as TreeSelectDetail, E as TreeSearchHost, F as ListDragPreviewContext, I as ListDragPreviewRenderer, L as ListDragPreviewSourceResolver, M as TreeDataModelOptions, N as ListDragEntry, O as TreeSelectEvent, P as ListDragPreview, R as ListDragSource, S as TreeItemDblClickDetail, T as TreeRevealMode, _ as TreeDropTarget, a as TreeComponent, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, f as TreeDropApplyContext, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, j as TreeDataModel, k as TreeTickleDetail, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeNavigateOptions, x as TreeItemClickEvent, y as TreeExpandEvent, z as ListNativeDragStartDetail } from "./tree-component-Tslymyyl.js";
 import { a as TreeItem, i as TreeInteractionMode, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-DQ7KOUIj.js";
-import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-BG8E13J5.js";
+import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-CSCrK0hR.js";
 import "./menu-item-bF6narIz.js";
 import { a as NarrowedTextItem, i as NarrowedTextChangeEvent, n as FuzzySearchResult, o as Orientation, r as NarrowedTextChangeDetail, s as SelectionMode, t as NarrowedTextElement } from "./index-o-CWDt11.js";
 import { CrumbNavigationChangeDetail, CrumbNavigationChangeEvent, CrumbNavigationElement, CrumbNavigationElementEventMap, CrumbNavigationExpandDetail, CrumbNavigationExpandEvent, CrumbNavigationItemClickDetail, CrumbNavigationItemClickEvent } from "./crumbs.js";
@@ -2446,6 +2446,8 @@ type MulticolCategoryDefaults = {
 type MulticolCategory = {
   readonly key: string;
   readonly label: string;
+  /** Shown as a tooltip on the column header label. */
+  readonly description?: string;
   readonly children?: readonly MulticolCategory[];
   readonly defaults?: MulticolCategoryDefaults;
 };
@@ -2523,6 +2525,8 @@ declare class MulticolListElement extends LitElement {
   protected updated(changedProperties: Map<string, unknown>): void;
   private _renderColumn;
   private _getCategoryLabel;
+  /** Category description if present, else the default 'Change category' hint. */
+  private _getCategoryTooltip;
   private _onHeaderPointerDown;
   private _onResizePointerDown;
   private _openCategoryPicker;

package/dist/index.js

@@ -27,7 +27,7 @@ import { t as CheckedSelect } from "./checked-select-lDgAQQ7v.js";
 import { n as ColourPicker, t as ColourPickerPopup } from "./colour-picker-BCMU7W7R.js";
 import { LabelledRangeInput } from "./labelled-range-input.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
-import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-BjrfaX7d.js";
+import { a as TreeDataModel, c as pruneDraggedDescendants, i as TreeDropController, n as TreeListElement, o as applyTreeDrop, r as TreeBaseElement, s as dropTargetFor, t as TreeController } from "./tree-9Hs7VxuX.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { NarrowedTextElement } from "./narrowed-text.js";
 import { CrumbNavigationElement } from "./crumbs.js";
@@ -3848,7 +3848,7 @@ TabListItemElement = __decorate([safeCustomElement(`ixfx-tab-list-item`)], TabLi
 //#endregion
 //#region src/dock/dock-panel.ts
 /** Pointer movement threshold before a titlebar press becomes a dock drag. */
-const DRAG_THRESHOLD_PX$3 = 5;
+const DRAG_THRESHOLD_PX$4 = 5;
 let DockPanelElement = class DockPanelElement extends LitElement {
 	constructor(..._args) {
 		super(..._args);
@@ -3880,7 +3880,7 @@ let DockPanelElement = class DockPanelElement extends LitElement {
 		this._onPointerMove = (event) => {
 			if (this._dragPointerId === null || event.pointerId !== this._dragPointerId) return;
 			if (!this._dragStarted) {
-				if (Math.hypot(event.clientX - this._dragStartX, event.clientY - this._dragStartY) < DRAG_THRESHOLD_PX$3) return;
+				if (Math.hypot(event.clientX - this._dragStartX, event.clientY - this._dragStartY) < DRAG_THRESHOLD_PX$4) return;
 				this._dragStarted = true;
 				const pointerId = this._dragPointerId;
 				this._teardownDragListeners();
@@ -4035,7 +4035,7 @@ DockPanelElement = __decorate([safeCustomElement(`ixfx-dock-panel`)], DockPanelE
 /** Fraction of the leaf rect (from each edge) that forms the split bands. */
 const BAND = .25;
 /** Pointer movement threshold before a press becomes a dock drag (matches tab-list). */
-const DRAG_THRESHOLD_PX$2 = 5;
+const DRAG_THRESHOLD_PX$3 = 5;
 /** Tolerance (px) when matching a child gutter endpoint to a parent gutter line. */
 const JUNCTION_TOL_PX = 6;
 /** Junction points closer than this merge into one handle (a 4-way cross yields one per side). */
@@ -4152,7 +4152,7 @@ let DockHostElement = class DockHostElement extends LitElement {
 		this._onTabDragMove = (event) => {
 			const pending = this._tabDragPending;
 			if (pending === null || event.pointerId !== pending.pointerId) return;
-			if (Math.hypot(event.clientX - pending.startX, event.clientY - pending.startY) < DRAG_THRESHOLD_PX$2) return;
+			if (Math.hypot(event.clientX - pending.startX, event.clientY - pending.startY) < DRAG_THRESHOLD_PX$3) return;
 			this._tabDragPending = null;
 			this._teardownTabDragListeners();
 			this._suppressNextClick();
@@ -5880,6 +5880,16 @@ function createVerticalListAdapter(renderItem, options) {
 	});
 	return adapter;
 }
+//#endregion
+//#region src/hyperbolic-tree/child-preview.ts
+/** Lucide `arrow-up`. */
+const upIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 7-7 7 7"/><path d="M12 19V5"/></svg>`;
+/** Picks the popover's side for a node anchored at `anchor` in a `width` x `height` host. */
+function choosePreviewSide(anchor, width, height) {
+	if (anchor.y < height * .25) return `below`;
+	if (anchor.y > height * .75) return `above`;
+	return anchor.x > width / 2 ? `left` : `right`;
+}
 /**
 * Whether `n` deserves a preview: it has children and at least one of them
 * isn't legible right now — laid out without a label, or not laid out at
@@ -5906,7 +5916,7 @@ function renderChildPreview(preview, handlers) {
 	const more = children.length - listed.length;
 	return html`
     <div
-      class="child-preview ${preview.above ? `above` : `below`}"
+      class="child-preview ${preview.side}"
       part="child-preview"
       role="dialog"
       aria-label=${`Children of ${preview.node.item.label}`}
@@ -5915,7 +5925,17 @@ function renderChildPreview(preview, handlers) {
       @pointerleave=${handlers.onPointerLeave}
       @pointerdown=${(e) => e.stopPropagation()}
     >
-      <div class="child-preview-title">${preview.node.item.label}</div>
+      <div class="child-preview-title">
+        ${preview.parent ? html`<button
+              type="button"
+              class="child-preview-up"
+              tabindex="-1"
+              title=${`Up to ${preview.parent.item.label}`}
+              aria-label=${`Up to ${preview.parent.item.label}`}
+              @click=${() => handlers.onPick(preview.parent)}
+            >${upIcon}</button>` : nothing}
+        <span>${preview.node.item.label}</span>
+      </div>
       <ul>
         ${listed.map((child) => html`<li>
           <button type="button" tabindex="-1" @click=${() => handlers.onPick(child)}>${child.item.label}</button>
@@ -5926,9 +5946,11 @@ function renderChildPreview(preview, handlers) {
   `;
 }
 /**
-* Show/hide timing for the preview: shows at once for a qualifying node;
-* otherwise hides after a short grace period, unless the pointer is over the
-* popover itself — so it can travel from the node onto the list.
+* Show/hide timing for the preview: opens only after the pointer has rested
+* on a qualifying node for {@link PREVIEW_SHOW_DELAY_MS} (re-checked when the
+* delay elapses, so a drag in the meantime suppresses it); otherwise hides
+* after a short grace period, unless the pointer is over the popover itself —
+* so it can travel from the node onto the list.
 */
 function createChildPreviewTiming(host) {
 	let hovered = false;
@@ -5937,7 +5959,11 @@ function createChildPreviewTiming(host) {
 		clearTimeout(timer);
 		const candidate = host.candidate(id);
 		if (candidate !== void 0) {
-			host.setPreviewId(candidate);
+			if (candidate === host.currentId()) return;
+			timer = setTimeout(() => {
+				const still = host.candidate(id);
+				if (still !== void 0) host.setPreviewId(still);
+			}, 600);
 			return;
 		}
 		timer = setTimeout(() => {
@@ -6279,6 +6305,7 @@ function isBackground(event) {
 function createGestureHandlers(host) {
 	const pointers = /* @__PURE__ */ new Map();
 	let pan;
+	let dragged = false;
 	let pinch;
 	const screenOf = (event) => {
 		const rect = host.svgRect();
@@ -6289,11 +6316,13 @@ function createGestureHandlers(host) {
 		x: (a.x + b.x) / 2,
 		y: (a.y + b.y) / 2
 	});
-	const startPan = (pointerId, screen) => {
+	const startPan = (pointerId, screen, downClient, armed) => {
 		pan = {
 			pointerId,
 			start: diskOf(screen),
-			baseView: host.takeView()
+			baseView: host.takeView(),
+			downClient,
+			armed
 		};
 	};
 	const startPinch = () => {
@@ -6309,14 +6338,21 @@ function createGestureHandlers(host) {
 	};
 	return {
 		onPointerDown(event) {
-			if (!isBackground(event)) return;
+			dragged = false;
+			const onBackground = isBackground(event);
 			host.focusTree();
 			const screen = screenOf(event);
 			if (!screen) return;
-			event.currentTarget.setPointerCapture?.(event.pointerId);
+			if (onBackground) {
+				event.currentTarget.setPointerCapture?.(event.pointerId);
+				host.onDragStart?.();
+			}
 			pointers.set(event.pointerId, screen);
 			if (pointers.size === 2 && host.zoomGesturesEnabled()) startPinch();
-			else if (pointers.size === 1) startPan(event.pointerId, screen);
+			else if (pointers.size === 1) startPan(event.pointerId, screen, {
+				x: event.clientX,
+				y: event.clientY
+			}, onBackground);
 		},
 		onPointerMove(event) {
 			if (!pointers.has(event.pointerId)) return;
@@ -6337,14 +6373,26 @@ function createGestureHandlers(host) {
 						y: mid.y - clampedZoom * pinch.anchor.y
 					}
 				}));
-			} else if (pan && pan.pointerId === event.pointerId) host.setView(panView(pan.baseView, pan.start, diskOf(screen)));
+			} else if (pan && pan.pointerId === event.pointerId) {
+				if (!pan.armed) {
+					if (Math.hypot(event.clientX - pan.downClient.x, event.clientY - pan.downClient.y) < 4) return;
+					pan.armed = true;
+					dragged = true;
+					event.currentTarget.setPointerCapture?.(event.pointerId);
+					host.onDragStart?.();
+				}
+				host.setView(panView(pan.baseView, pan.start, diskOf(screen)));
+			}
 		},
 		onPointerUp(event) {
 			if (!pointers.delete(event.pointerId)) return;
 			if (pinch) {
 				pinch = void 0;
 				const [remaining] = [...pointers.entries()];
-				if (remaining) startPan(remaining[0], remaining[1]);
+				if (remaining) startPan(remaining[0], remaining[1], {
+					x: 0,
+					y: 0
+				}, true);
 			} else if (pan?.pointerId === event.pointerId) pan = void 0;
 		},
 		/**
@@ -6363,6 +6411,14 @@ function createGestureHandlers(host) {
 			const factor = Math.exp(-delta * (modified ? .01 : .002));
 			host.setZoomState(zoomAt(host.zoomState(), screen, factor));
 		},
+		/** Whether the view is being dragged right now. */
+		isDragging() {
+			return pan?.armed === true;
+		},
+		/** Whether the last press turned into a drag — so the click that follows it shouldn't count. */
+		wasDragged() {
+			return dragged;
+		},
 		/** Forget any in-progress pan (e.g. when a focus change takes over the view). */
 		cancel() {
 			pan = void 0;
@@ -6565,6 +6621,15 @@ const hyperbolicTreeStyles = css`
       border-radius: var(--radius-m, 6px);
       box-shadow: var(--shadow-m);
       font-size: var(--hyperbolictree-font-size);
+      /* Beside the node, never over it, with the dot level with the popover's middle. */
+      transform: translate(14px, -50%);
+    }
+
+    .child-preview.left {
+      transform: translate(calc(-100% - 14px), -50%);
+    }
+
+    .child-preview.below {
       transform: translate(-50%, 14px);
     }
 
@@ -6573,13 +6638,26 @@ const hyperbolicTreeStyles = css`
     }
 
     .child-preview-title {
+      display: flex;
+      align-items: center;
+      gap: 4px;
       padding: 2px 6px 4px;
       font-weight: 600;
+    }
+
+    .child-preview-title span {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
     }
 
+    .child-preview button.child-preview-up {
+      display: inline-flex;
+      flex: none;
+      width: auto;
+      padding: 2px;
+    }
+
     .child-preview ul {
       margin: 0;
       padding: 0;
@@ -7535,7 +7613,6 @@ function renderNodeGroup(n, args, transform, content) {
       part="node node-${partToken(key)}"
       style=${weightStyle + branchStyle(id, ctx.branches)}
       transform=${transform}
-      @pointerdown=${handlers.onPointerDown}
       @mousedown=${preventMouseDownFocus}
       @click=${(e) => handlers.onClick(n, e)}
       @dblclick=${(e) => handlers.onDblClick(n, e)}
@@ -7657,8 +7734,9 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 			candidate: (id) => {
 				const nodes = this.#layout().nodes;
 				const n = id === void 0 || this.disableChildPreview ? void 0 : nodes.find((v) => v.id === id);
-				return n && needsChildPreview(n, nodes, this.#lastLabelIds) ? n.id : void 0;
+				return n && !this.#gestures.isDragging() && needsChildPreview(n, nodes, this.#lastLabelIds) ? n.id : void 0;
 			},
+			currentId: () => this._previewId,
 			setPreviewId: (id) => {
 				this._previewId = id;
 			}
@@ -7701,6 +7779,7 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		};
 		this.#gestures = createGestureHandlers({
 			svgRect: () => this.renderRoot.querySelector(`svg.hyperbolictree`)?.getBoundingClientRect(),
+			onDragStart: () => this.#preview.hide(),
 			takeView: () => {
 				const view = this.#currentView();
 				this.#cancelAnimation();
@@ -8170,10 +8249,6 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 	#focusTree() {
 		this.renderRoot.querySelector(`svg.hyperbolictree`)?.focus({ preventScroll: true });
 	}
-	#handleNodePointerDown(event) {
-		event.stopPropagation();
-		this.#focusTree();
-	}
 	#pickPreviewChild(child) {
 		this.#preview.hide();
 		if (this.interactionMode !== `manual`) this.select(child);
@@ -8187,10 +8262,12 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 		if (!n) return void 0;
 		const { width, height } = this._hostSize;
 		const anchor = diskToHostPx(n.position, this.#zoomState(), width || 420, height || 420);
+		const parent = n.parentId === void 0 ? void 0 : nodes.find((v) => v.id === n.parentId)?.node;
 		return {
 			node: n.node,
 			anchor,
-			above: anchor.y > (height || 420) / 2
+			side: choosePreviewSide(anchor, width || 420, height || 420),
+			parent
 		};
 	}
 	#nodeContext(nodes, branches) {
@@ -8221,14 +8298,13 @@ let HyperbolicTreeListElement = class HyperbolicTreeListElement extends LitEleme
 				isPending: (node) => this.#lazy.isPending(node)
 			},
 			handlers: {
-				onPointerDown: (e) => this.#handleNodePointerDown(e),
 				onClick: (n, e) => {
 					e.stopPropagation();
-					this.#handleItemClick(n, e);
+					if (!this.#gestures.wasDragged()) this.#handleItemClick(n, e);
 				},
 				onDblClick: (n, e) => {
 					e.stopPropagation();
-					this.#handleItemDblClick(n);
+					if (!this.#gestures.wasDragged()) this.#handleItemDblClick(n);
 				},
 				onPointerEnter: (id) => this.tickled.handlePointerEnter(id)
 			}
@@ -10026,7 +10102,7 @@ let MulticolListElement = class MulticolListElement extends LitElement {
           ><span class="ixfx-handle" data-handle="dotted" data-shape="vertical" part="reorder-handle"></span></span>
           <button
             class="column-label"
-            data-tooltip="Change category"
+            data-tooltip=${this._getCategoryTooltip(col.categoryKey)}
             @click=${(e) => {
 			e.stopPropagation();
 			this._openCategoryPicker(col, e.currentTarget);
@@ -10056,6 +10132,10 @@ let MulticolListElement = class MulticolListElement extends LitElement {
 	_getCategoryLabel(key) {
 		return this.categories.find((c) => c.key === key)?.label ?? key;
 	}
+	/** Category description if present, else the default 'Change category' hint. */
+	_getCategoryTooltip(key) {
+		return this.categories.find((c) => c.key === key)?.description ?? `Change category`;
+	}
 	#createController(id, category) {
 		return new MulticolColumnController({
 			id,

package/dist/{tree-BjrfaX7d.js → tree-9Hs7VxuX.js}

@@ -2386,6 +2386,69 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#dispatchSelect(prev);
 		this.requestUpdate();
 	}
+	/**
+	* Expand every already-loaded branch in a single update. With `maxDepth`,
+	* only branches at depth < `maxDepth` are expanded (the root's children are
+	* depth 0), so rows at depth `maxDepth` become visible but stay collapsed.
+	*
+	* Unloaded (lazy) branches are not fetched — call again once their children
+	* have loaded to expand further. Bulk expansion ignores `exclusivity`. Fires
+	* one `expand` event per branch that actually opens — none for branches that
+	* were already expanded, including ones opened by filter auto-expansion.
+	*/
+	expandAll(maxDepth) {
+		this.#bulkExpand(true, maxDepth);
+	}
+	/**
+	* Collapse expanded branches in a single update. With `maxDepth`, only
+	* branches at depth >= `maxDepth` are collapsed, leaving the tree open down
+	* to depth `maxDepth - 1` (`collapseAll(0)` is a full collapse). Fires one
+	* `collapse` event per branch that actually closes.
+	*/
+	collapseAll(maxDepth) {
+		this.#bulkExpand(false, maxDepth);
+	}
+	/** Shared bulk expand / collapse: one `_expandedKeys` write, per-node events for real changes only. */
+	#bulkExpand(expand, maxDepth) {
+		const root = this.root;
+		if (!root) return;
+		const inScope = (depth) => expand ? depth < (maxDepth ?? Number.POSITIVE_INFINITY) : depth >= (maxDepth ?? 0);
+		const changed = [];
+		let next = this._expandedKeys;
+		const visit = (node, depth) => {
+			const children = node.children;
+			if (node.item.isLeaf !== true && children !== void 0 && children.length > 0 && inScope(depth)) {
+				const keyed = next.has(node.item.key);
+				if (expand && !keyed) {
+					next = withKey(next, node.item.key);
+					if (!this._isExpanded(node, depth)) changed.push({
+						node,
+						depth
+					});
+				} else if (!expand && keyed) {
+					next = withoutKey(next, node.item.key);
+					changed.push({
+						node,
+						depth
+					});
+				}
+			}
+			for (const child of children ?? []) visit(child, depth + 1);
+		};
+		for (const child of root.children ?? []) visit(child, 0);
+		if (next === this._expandedKeys) return;
+		this.#setExpanded(next);
+		const type = expand ? `expand` : `collapse`;
+		for (const { node, depth } of changed) this.dispatchEvent(new CustomEvent(type, {
+			detail: {
+				node,
+				depth
+			},
+			bubbles: true,
+			composed: true
+		}));
+		this.requestUpdate();
+	}
 	navigateTo(keys, options = {}) {
 		if (!this.root?.children) return false;
 		const prevOrigin = this.#selectOrigin;

package/dist/tree.d.ts

@@ -1,4 +1,4 @@
 import { A as TreeTickleEvent, D as TreeSelectDetail, M as TreeDataModelOptions, O as TreeSelectEvent, T as TreeRevealMode, _ as TreeDropTarget, b as TreeItemClickDetail, c as TreeDragContext, d as TreeDragStartEvent, g as TreeDropPosition, h as TreeDropEvent, i as TreeCollapseEvent, j as TreeDataModel, k as TreeTickleDetail, l as TreeDragEndEvent, m as TreeDropDetail, n as TreeActivateEvent, o as TreeComponentEventMap, p as TreeDropContext, r as TreeCollapseDetail, s as TreeDndMode, t as TreeActivateDetail, u as TreeDragOverEvent, v as TreeExpandDetail, w as TreeNavigateOptions, x as TreeItemClickEvent, y as TreeExpandEvent } from "./tree-component-Tslymyyl.js";
 import { a as TreeItem, n as TreeExclusivity, o as TreeNode, r as TreeFilterPredicate, s as TreeSelectionFilter, t as LoadChildrenCallback } from "./types-DQ7KOUIj.js";
-import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-BG8E13J5.js";
+import { a as TreeDropVisibleRow, c as TreeListElement, d as TreeBaseElementEventMap, f as TreeVirtualize, i as TreeDropRowInfo, l as TreeCheckboxState, n as TreeDropControllerConfig, o as TreeController, p as TreeConfig, r as TreeDropResolvedDrag, s as TreeControllerOptions, t as TreeDropController, u as TreeBaseElement } from "./index-CSCrK0hR.js";
 export { type LoadChildrenCallback, type TreeActivateDetail, type TreeActivateEvent, TreeBaseElement, TreeBaseElementEventMap, type TreeCheckboxState, type TreeCollapseDetail, type TreeCollapseEvent, type TreeComponentEventMap, TreeConfig, TreeController, TreeControllerOptions, TreeDataModel, type TreeDataModelOptions, type TreeDndMode, type TreeDragContext, type TreeDragEndEvent, type TreeDragOverEvent, type TreeDragStartEvent, type TreeDropContext, TreeDropController, TreeDropControllerConfig, type TreeDropDetail, type TreeDropEvent, type TreeDropPosition, TreeDropResolvedDrag, TreeDropRowInfo, type TreeDropTarget, TreeDropVisibleRow, type TreeExclusivity, type TreeExpandDetail, type TreeExpandEvent, type TreeFilterPredicate, type TreeItem, type TreeItemClickDetail, type TreeItemClickEvent, TreeListElement, type TreeNavigateOptions, type TreeNode, type TreeRevealMode, type TreeSelectDetail, type TreeSelectEvent, type TreeSelectionFilter, type TreeTickleDetail, type TreeTickleEvent, TreeVirtualize };

package/dist/tree.js

@@ -1,2 +1,2 @@
-import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-BjrfaX7d.js";
+import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-9Hs7VxuX.js";
 export { TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeListElement };

package/docs-user/hyperbolic-tree.md

@@ -118,7 +118,7 @@ Labels keep their on-screen size while zooming, so zooming in spreads a crowd ap
 
 ### Child preview
 
-On by default; `disable-child-preview` turns it off. Hovering or keyboard-tickling a node whose children aren't all legible opens a popover listing them. That means some children had their labels culled, or sit beyond `maxRadius`. It shows up to 12 children, then "+N more". Clicking an entry focuses that child and selects it, per `interactionMode`. The popover stays open while the pointer moves onto it, and Escape closes it. Style it with `::part(child-preview)`. Nodes that can show a preview drop their native `<title>` tooltip so the two don't stack. With the preview disabled, every node keeps its tooltip.
+On by default; `disable-child-preview` turns it off. Hovering or keyboard-tickling a node whose children aren't all legible, and resting there for 600ms, opens a popover listing them. That means some children had their labels culled, or sit beyond `maxRadius`. It shows up to 12 children, then "+N more". Clicking an entry focuses that child and selects it, per `interactionMode`. The popover stays open while the pointer moves onto it, and Escape closes it. Starting a drag (pan) cancels a pending preview and closes an open one. Style it with `::part(child-preview)`. Nodes that can show a preview drop their native `<title>` tooltip so the two don't stack. With the preview disabled, every node keeps its tooltip.
 
 ### Crowded fans
 

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.13.7",
-  "generated": "2026-10-05T21:23:39.070Z",
+  "version": "0.13.9",
+  "generated": "2026-10-09T19:37:11.157Z",
   "components": [
     {
       "name": "ac-text",

package/docs-user/multicol-list.md

@@ -17,7 +17,7 @@ provider returns that column's choices; items may carry a `count` for display.
 
 | Property | Type | Default | Description |
 |----------|------|---------|-------------|
-| `categories` | `readonly MulticolCategory[]` | `[]` | Facet definitions (tree, shown in the header picker menu). Each may carry `defaults`: `grouped`, `groupBy`, `allLabel`, `sort`. |
+| `categories` | `readonly MulticolCategory[]` | `[]` | Facet definitions (tree, shown in the header picker menu). Each may carry `description` (shown as a tooltip on the column header label) and `defaults`: `grouped`, `groupBy`, `allLabel`, `sort`. |
 | `dataProvider` | `IDataProvider<MulticolQuery, MulticolItem>` \| `undefined` | — | Called per column whenever that column's inputs change. Sync arrays, Promises and async-iterables are supported; the `AbortSignal` is honoured. |
 | `selectionMode` | `ListSelectionMode` | `'multiple'` | `'none'`, `'single'` or `'multiple'` selection within a column. |
 | `minColumns` | `number` | `1` | Floor for column removal. |

package/docs-user/tree.md

@@ -330,6 +330,39 @@ el.addEventListener('select', ({ detail }) => {
 
 ---
 
+## Expansion
+
+### Programmatic expansion
+
+```typescript
+// Expand every already-loaded branch
+el.expandAll();
+
+// Expand down to depth 1: top-level branches open, so their children
+// (depth 1) are visible (root's children are depth 0)
+el.expandAll(1);
+
+// Collapse everything
+el.collapseAll();
+
+// Collapse branches at depth 1 and deeper — top-level branches stay open,
+// so the tree remains open down to depth 0
+el.collapseAll(1);
+```
+
+Notes:
+
+- Both methods apply in a single update — one re-render for the whole tree.
+- Only **already-loaded** branches are expanded; lazily loaded children are not
+  fetched. Call `expandAll()` again after children load to expand further.
+- Bulk expansion ignores `exclusivity` — it is an explicit "open everything"
+  command.
+- One `expand` / `collapse` event fires per branch whose state actually changes;
+  branches already in the target state (including those opened by filter
+  auto-expansion) stay silent.
+
+---
+
 ## Events
 
 All events **bubble** and are **composed** (cross shadow-DOM boundaries).

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.13.7",
+  "version": "0.13.9",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",