@ixfx/components 0.10.0 → 0.10.2

package/dist/{tree-C25xYUa6.js → tree-Bm2TzTfe.js}

@@ -2,8 +2,8 @@ import { t as TickledController } from "./tickled-controller-Dh1Uh_vG.js";
 import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrAHEj1q.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
-import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-C05WjbZh.js";
-import { t as ListNativeDragController } from "./list-native-drag-controller-D97TYjn1.js";
+import { i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, t as createTreeListSearchAdapter } from "./incr-search-D91M4Ozq.js";
+import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
 import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import "./interaction-BskmlA9t.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
@@ -775,6 +775,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.itemDnd = `none`;
 		this.dndExpandHoverMs = 500;
 		this.reorderable = true;
+		this.stickyHeaders = true;
 		this.applyInternalDrop = true;
 		this._expandedKeys = /* @__PURE__ */ new Set();
 		this.tickled = new TickledController(this, {
@@ -807,6 +808,18 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.#onContainerScroll = () => {
 			this.#rowsCache = void 0;
 		};
+		this.#onStickyScroll = () => {
+			if (this.#stickyRaf !== 0) return;
+			this.#stickyRaf = requestAnimationFrame(() => {
+				this.#stickyRaf = 0;
+				this.#updateStickyHeaders();
+			});
+		};
+		this._stickyKeys = [];
+		this.#stickyEntries = /* @__PURE__ */ new Map();
+		this.#stickyDirty = true;
+		this.#stickyRaf = 0;
+		this.#stickyScrollBound = false;
 		this.#onKeyDown = (event) => {
 			if (this.search.isOpen) return;
 			const nodes = this.#getAllNodes();
@@ -910,7 +923,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			}
 		};
 		this.#onDblClick = (e) => {
-			const li = e.target.closest(`li`);
+			const li = e.target.closest(`ul.tree-list li`);
 			if (!li) return;
 			const key = li.dataset.key;
 			if (!key) return;
@@ -972,6 +985,157 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	/** Per-drag cache of measured rows; invalidated on scroll / update. */
 	#rowsCache;
 	#onContainerScroll;
+	/** Bind the sticky scroll listener once the container exists; unbind on opt-out. */
+	#syncStickyScroll() {
+		const container = this.#container();
+		if (this.stickyHeaders && container) {
+			if (!this.#stickyScrollBound || this.#stickyScrollContainer !== container) {
+				this.#stickyScrollContainer?.removeEventListener(`scroll`, this.#onStickyScroll);
+				container.addEventListener(`scroll`, this.#onStickyScroll, { passive: true });
+				this.#stickyScrollContainer = container;
+				this.#stickyScrollBound = true;
+			}
+		} else if (this.#stickyScrollBound) {
+			this.#stickyScrollContainer?.removeEventListener(`scroll`, this.#onStickyScroll);
+			this.#stickyScrollContainer = void 0;
+			this.#stickyScrollBound = false;
+		}
+	}
+	#onStickyScroll;
+	/** Real (non-sticky) row element for `key`, or `null`. */
+	#stickyRowEl(key) {
+		return this.renderRoot.querySelector(`ul.tree-list li[data-key="${CSS.escape(key)}"]`);
+	}
+	/**
+	* Recompute which ancestors stick to the top: the ancestors of the first
+	* row whose bottom clears the container top, minus any ancestor that is
+	* itself still visible below the overlay. Synchronous — reads current
+	* geometry, renders nothing, expands nothing.
+	*/
+	#updateStickyHeaders() {
+		this.#stickyDirty = false;
+		const empty = /* @__PURE__ */ new Map();
+		if (!this.stickyHeaders || !this.root) {
+			this.#setStickyKeys([], empty);
+			return;
+		}
+		const container = this.#container();
+		if (!container) {
+			this.#setStickyKeys([], empty);
+			return;
+		}
+		const nodes = this.#getAllNodes();
+		if (nodes.length === 0) {
+			this.#setStickyKeys([], empty);
+			return;
+		}
+		const parent = /* @__PURE__ */ new Map();
+		const walk = (n) => {
+			for (const child of n.children ?? []) {
+				parent.set(child.item.key, n.item.key);
+				walk(child);
+			}
+		};
+		walk(this.root);
+		const containerTop = container.getBoundingClientRect().top;
+		const visibleThreshold = containerTop + (this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0);
+		let topKey;
+		for (const { node } of nodes) {
+			const li = this.#stickyRowEl(node.item.key);
+			if (!li || li.classList.contains(`leaving`)) continue;
+			if (li.getBoundingClientRect().bottom > containerTop) {
+				topKey = node.item.key;
+				break;
+			}
+		}
+		if (topKey === void 0) {
+			this.#setStickyKeys([], empty);
+			return;
+		}
+		const rootKey = this.root.item.key;
+		const chain = [];
+		let cursor = parent.get(topKey);
+		while (cursor !== void 0 && cursor !== rootKey) {
+			chain.unshift(cursor);
+			cursor = parent.get(cursor);
+		}
+		const byKey = new Map(nodes.map((entry) => [entry.node.item.key, entry]));
+		const entries = /* @__PURE__ */ new Map();
+		const stuck = [];
+		for (const key of chain) {
+			const li = this.#stickyRowEl(key);
+			if (!li || li.getBoundingClientRect().bottom > visibleThreshold) continue;
+			const entry = byKey.get(key);
+			if (!entry) continue;
+			stuck.push(key);
+			entries.set(key, entry);
+		}
+		this.#setStickyKeys(stuck, entries);
+	}
+	#setStickyKeys(keys, entries) {
+		const prev = this._stickyKeys;
+		if (prev.length === keys.length && prev.every((key, i) => key === keys[i])) return;
+		this.#stickyEntries = entries;
+		this._stickyKeys = keys;
+	}
+	#renderStickyHeaders() {
+		if (!this.stickyHeaders || this._stickyKeys.length === 0) return nothing;
+		return html`
+      <div class="sticky-headers" part="sticky-headers">
+        ${this._stickyKeys.map((key) => {
+			const entry = this.#stickyEntries.get(key);
+			if (!entry) return nothing;
+			return this.#renderStickyHeader(entry.node, entry.depth);
+		})}
+      </div>
+    `;
+	}
+	#renderStickyHeader(node, depth) {
+		const selected = this._isSelected(node);
+		const isBranch = node.item.isLeaf !== true;
+		return html`
+      <div
+        class="item ${isBranch ? `branch` : `leaf`} sticky-header${selected ? ` selected` : ``}"
+        part="sticky-header"
+        role="button"
+        tabindex="0"
+        aria-label="Go to ${node.item.label}"
+        data-key=${node.item.key}
+        style=${`--depth: ${depth}`}
+        @click=${(e) => this.#onStickyClick(e, node)}
+        @keydown=${(e) => {
+			if (e.key === `Enter` || e.key === ` `) {
+				e.preventDefault();
+				this.#activateSticky(node);
+			}
+		}}
+      >${this.renderNodeContent(node, depth)}</div>
+    `;
+	}
+	#onStickyClick(event, node) {
+		if (this.#drop?.isDragging || this.#nativeDrag?.isDragging) return;
+		if (node.item.isLeaf !== true && event.target instanceof Element && event.target.closest(`.tree-caret`)) {
+			const depth = this.#stickyEntries.get(node.item.key)?.depth ?? 0;
+			this.#toggleExpand(node, depth);
+			this.#stickyDirty = true;
+			this.requestUpdate();
+			return;
+		}
+		this.#activateSticky(node);
+	}
+	#activateSticky(node) {
+		if (this.#canSelect(node)) this.select(node);
+		this.#scrollKeyIntoView(node.item.key);
+		this.#stickyDirty = true;
+		this.requestUpdate();
+	}
+	/** Visible `{ node, depth }` entries for `_stickyKeys` — depths drive the indent. */
+	#stickyEntries;
+	/** Set when expansion / data / filter changes may have altered the sticky set. Consumed in `updated()`. */
+	#stickyDirty;
+	#stickyRaf;
+	#stickyScrollContainer;
+	#stickyScrollBound;
 	get nativeDrag() {
 		return this.#nativeDrag;
 	}
@@ -995,6 +1159,8 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	willUpdate(changedProps) {
 		super.willUpdate(changedProps);
 		this.#diffVisibleNodes();
+		if (changedProps.has(`root`) || changedProps.has(`model`) || changedProps.has(`filterPredicate`) || changedProps.has(`stickyHeaders`)) this.#stickyDirty = true;
+		if (this.#stickyDirty) this.#updateStickyHeaders();
 	}
 	#diffVisibleNodes() {
 		const nodes = this.root ? this.#getAllNodes() : [];
@@ -1094,6 +1260,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	}
 	updated(changedProps) {
 		this.#rowsCache = void 0;
+		this.#syncStickyScroll();
 		if (changedProps.has(`root`) && this.root) {
 			this.#abortPending();
 			this._expandedKeys.clear();
@@ -1117,6 +1284,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 					} else if (event.type === `invalidate`) {
 						if (this._expandedKeys.has(event.key)) {
 							this._expandedKeys.delete(event.key);
+							this.#stickyDirty = true;
 							this.requestUpdate();
 						}
 					}
@@ -1159,7 +1327,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			isEnabled: () => this.itemDnd !== `none` && this.#anyRowDraggable(),
 			resolveEventToKey: (target) => {
 				if (!(target instanceof Element)) return void 0;
-				return target.closest(`li[data-key]`)?.getAttribute(`data-key`) ?? void 0;
+				return target.closest(`ul.tree-list li[data-key]`)?.getAttribute(`data-key`) ?? void 0;
 			},
 			prepareSelection: (originKey) => {
 				const allNodes = this.#getAllNodes();
@@ -1174,7 +1342,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 					key: n.node.item.key,
 					index: i,
 					item: n.node,
-					element: this.shadowRoot?.querySelector(`li[data-key="${CSS.escape(n.node.item.key)}"]`) ?? void 0
+					element: this.shadowRoot?.querySelector(`ul.tree-list li[data-key="${CSS.escape(n.node.item.key)}"]`) ?? void 0
 				}));
 				const origin = selected.find((e) => e.key === originKey) ?? {
 					key: originKey,
@@ -1329,7 +1497,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		if (this.#rowsCache) return this.#rowsCache;
 		const rows = [];
 		for (const { node, depth } of this.#getAllNodes()) {
-			const li = this.shadowRoot?.querySelector(`li[data-key="${CSS.escape(node.item.key)}"]`);
+			const li = this.shadowRoot?.querySelector(`ul.tree-list li[data-key="${CSS.escape(node.item.key)}"]`);
 			if (li) rows.push({
 				key: node.item.key,
 				node,
@@ -1451,6 +1619,15 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			this.#postDragSuppressTimer = void 0;
 		}
 		this.#container()?.removeEventListener(`scroll`, this.#onContainerScroll);
+		if (this.#stickyScrollBound) {
+			this.#stickyScrollContainer?.removeEventListener(`scroll`, this.#onStickyScroll);
+			this.#stickyScrollContainer = void 0;
+			this.#stickyScrollBound = false;
+		}
+		if (this.#stickyRaf !== 0) {
+			cancelAnimationFrame(this.#stickyRaf);
+			this.#stickyRaf = 0;
+		}
 		treeDragUnregister(this.#dragSourceId);
 		if (this.#ownedRegistry) {
 			this.#ownedRegistry.unregister(`select-all`);
@@ -1539,6 +1716,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			}
 			currentNode = found;
 		}
+		this.#stickyDirty = true;
 		this.requestUpdate();
 		this.#scrollKeyIntoView(keys.at(-1));
 		return true;
@@ -1559,6 +1737,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			this._expandedKeys.add(path[i]);
 		}
 		this.tickled.setTickled(key);
+		this.#stickyDirty = true;
 		this.requestUpdate();
 		this.updateComplete.then(() => this.#scrollKeyIntoView(key));
 		return true;
@@ -1794,7 +1973,9 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 		this.requestUpdate();
 	}
 	#toggleExpand(node, depth) {
-		if (this._expandedKeys.has(node.item.key)) {
+		const isExpanded = this._expandedKeys.has(node.item.key);
+		this.#stickyDirty = true;
+		if (isExpanded) {
 			this._expandedKeys.delete(node.item.key);
 			this.dispatchEvent(new CustomEvent(`collapse`, {
 				detail: {
@@ -1887,6 +2068,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 			node.children = children;
 			this.#applyExclusivity(node.item.key);
 			this._expandedKeys.add(node.item.key);
+			this.#stickyDirty = true;
 			this.#pendingNode = void 0;
 			this.#pendingController = void 0;
 			this.dispatchEvent(new CustomEvent(`expand`, {
@@ -1927,14 +2109,16 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	}
 	#scrollKeyIntoView(key) {
 		requestAnimationFrame(() => {
-			const el = this.shadowRoot?.querySelector(`[data-key="${CSS.escape(key)}"]`);
-			if (!el) return;
+			const container = this.#container();
+			const el = this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(key)}"]`);
+			if (!el || !container) return;
 			const elRect = el.getBoundingClientRect();
-			const hostRect = this.getBoundingClientRect();
-			const relativeTop = elRect.top - hostRect.top;
+			const containerRect = container.getBoundingClientRect();
+			const relativeTop = elRect.top - containerRect.top;
 			const relativeBottom = relativeTop + elRect.height;
-			if (relativeTop < 0) this.scrollTop += relativeTop;
-			else if (relativeBottom > this.clientHeight) this.scrollTop += relativeBottom - this.clientHeight;
+			const overlayHeight = this.renderRoot.querySelector(`.sticky-headers`)?.getBoundingClientRect().height ?? 0;
+			if (relativeTop < overlayHeight) container.scrollTop += relativeTop - overlayHeight;
+			else if (relativeBottom > container.clientHeight) container.scrollTop += relativeBottom - container.clientHeight;
 		});
 	}
 	#abortPending() {
@@ -2023,7 +2207,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	#scrollTickledIntoView() {
 		const tickledKey = this.tickled.tickledId;
 		if (tickledKey === void 0) return;
-		(this.shadowRoot?.querySelector(`[data-key="${tickledKey}"]`))?.scrollIntoView({
+		(this.shadowRoot?.querySelector(`ul.tree-list [data-key="${CSS.escape(tickledKey)}"]`))?.scrollIntoView({
 			block: `nearest`,
 			behavior: `smooth`
 		});
@@ -2043,6 +2227,7 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
         @pointerleave=${(e) => this.tickled.handlePointerLeave(e)}
         tabindex="0"
       >
+        ${this.#renderStickyHeaders()}
         ${this.root ? this.#renderNodes(nodes) : nothing}
       </div>
       ${this.search.renderField()}
@@ -2141,6 +2326,9 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       --tree-drop-nub-size: 5px;
       --tree-drop-into-outline: 2px solid var(--accent);
       --tree-drop-into-bg: color-mix(in srgb, var(--accent) 14%, transparent);
+      --tree-sticky-bg: var(--tree-bg);
+      --tree-sticky-border: var(--border, transparent);
+      --tree-sticky-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
 
       position: relative;
       display: block;
@@ -2167,6 +2355,28 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
       padding: var(--space-xs);
     }
 
+    /* VS Code-style sticky headers: ancestors of the top-visible row, pinned
+       to the top of the scroll container. Rows reuse the item class for
+       identical metrics; the overlay itself is opaque so rows slide under it. */
+    .sticky-headers {
+      position: sticky;
+      top: 0;
+      z-index: 5;
+      background: var(--tree-sticky-bg);
+      border-bottom: 1px solid var(--tree-sticky-border);
+      box-shadow: var(--tree-sticky-shadow);
+    }
+
+    .sticky-header {
+      margin: 0;
+      border-radius: 0;
+    }
+
+    .sticky-header:focus-visible {
+      outline: 2px solid var(--accent);
+      outline-offset: -2px;
+    }
+
     .item {
       position: relative; /* anchor for the .drop-line before/after indicator */
       display: flex;
@@ -2340,6 +2550,14 @@ __decorate([property({
 		toAttribute: (value) => value ? null : `false`
 	}
 })], TreeBaseElement.prototype, "reorderable", void 0);
+__decorate([property({
+	reflect: true,
+	attribute: `sticky-headers`,
+	converter: {
+		fromAttribute: (value) => value !== `false`,
+		toAttribute: (value) => value ? null : `false`
+	}
+})], TreeBaseElement.prototype, "stickyHeaders", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "dragPreviewRenderer", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "dragPreviewSource", void 0);
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "canDrag", void 0);
@@ -2348,6 +2566,7 @@ __decorate([property({ attribute: false })], TreeBaseElement.prototype, "parseEx
 __decorate([property({ attribute: false })], TreeBaseElement.prototype, "applyInternalDrop", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_expandedKeys", void 0);
 __decorate([state()], TreeBaseElement.prototype, "_focusedDepth", void 0);
+__decorate([state()], TreeBaseElement.prototype, "_stickyKeys", void 0);
 TreeBaseElement = __decorate([safeCustomElement(`ixfx-tree-base`)], TreeBaseElement);
 //#endregion
 //#region src/tree/tree-list.ts
@@ -2632,4 +2851,4 @@ var TreeController = class {
 //#endregion
 export { TreeDataModel as a, pruneDraggedDescendants as c, TreeDropController as i, TreeListElement as n, applyTreeDrop as o, TreeBaseElement as r, dropTargetFor as s, TreeController as t };
 
-//# sourceMappingURL=tree-C25xYUa6.js.map
+//# sourceMappingURL=tree-Bm2TzTfe.js.map