@ixfx/components 0.14.4 → 0.14.6

package/dist/{tree-BFoN2Z_P.js → tree-2_TRrLAV.js}

@@ -3,9 +3,8 @@ import { n as tickledStyles, t as tickledItemStyles } from "./tickled-styles-BrA
 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-JIhwB49y.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-ZTh4htzr.js";
+import { i as animateListItemOut, r as animateListItemIn, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
+import "./interaction-E-uMGHkJ.js";
 import { t as collectDataResult } from "./data-provider-35TyWclX.js";
 import { LitElement, css, html, nothing } from "lit";
 import { property, state } from "lit/decorators.js";
@@ -448,9 +447,54 @@ function treeDragCurrent() {
 	};
 }
 //#endregion
+//#region src/tree/edge-scroll.ts
+/**
+* Edge auto-scroll maths for drag-and-drop in a scrollable list: how far into
+* a trigger zone the pointer is, and how fast to scroll given how long it has
+* been held there. Pure, so it can be tested without a DOM.
+*/
+const ZONE_FRACTION = .2;
+const ZONE_MIN_PX = 24;
+const ZONE_MAX_PX = 64;
+/** Hold time over which the speed ramps from min to max. */
+const EDGE_SCROLL_RAMP_MS = 2500;
+/** Share of the speed you get just inside the zone, rising to 100% at the container's edge. */
+const DEPTH_FLOOR = .35;
+const NONE = {
+	direction: 0,
+	depth: 0
+};
+/** Height of each trigger zone: proportional to the container, with sane bounds. */
+function edgeZonePx(containerHeight) {
+	return Math.min(containerHeight / 2, Math.max(ZONE_MIN_PX, Math.min(ZONE_MAX_PX, containerHeight * ZONE_FRACTION)));
+}
+/** Which trigger zone (if any) the pointer is in. `y` is relative to the container's top edge. */
+function edgeScrollZone(y, containerHeight) {
+	if (containerHeight <= 0) return NONE;
+	const zone = edgeZonePx(containerHeight);
+	if (y < zone) return {
+		direction: -1,
+		depth: Math.min(1, (zone - y) / zone)
+	};
+	if (y > containerHeight - zone) return {
+		direction: 1,
+		depth: Math.min(1, (y - (containerHeight - zone)) / zone)
+	};
+	return NONE;
+}
+/**
+* Scroll speed in px/s. Non-linear in hold time: it starts gentle so a stray
+* pass through the zone barely moves, then accelerates (quadratically) the
+* longer the pointer stays. Pushing closer to the edge scales it further.
+*/
+function edgeScrollSpeed(depth, heldMs) {
+	const ramp = Math.min(1, Math.max(0, heldMs) / EDGE_SCROLL_RAMP_MS);
+	return (120 + 3080 * ramp * ramp) * (DEPTH_FLOOR + .65 * Math.min(1, Math.max(0, depth)));
+}
+//#endregion
 //#region src/tree/tree-drop-controller.ts
-const EDGE_ZONE_PX = 24;
-const MAX_SCROLL_SPEED = 16;
+/** Longest frame step used when integrating scroll, so a stalled tab doesn't jump the list. */
+const MAX_FRAME_MS = 50;
 function clamp(value, min, max) {
 	return Math.max(min, Math.min(max, value));
 }
@@ -467,6 +511,15 @@ var TreeDropController = class {
 	#scrollRaf = 0;
 	#pointerX = 0;
 	#pointerY = 0;
+	/** Direction of the edge zone the pointer has been held in, and since when (ms). 0 = not in a zone. */
+	#edgeDirection = 0;
+	#edgeSince = 0;
+	#lastTickAt = 0;
+	/** Sub-pixel scroll carried between frames (`scrollTop` only takes whole pixels at low speeds). */
+	#scrollRemainder = 0;
+	/** Last `dragover`, replayed after a scroll so the drop indicator follows the content under a still pointer. */
+	#lastDragOver;
+	#reevaluate = false;
 	#boundContainer;
 	constructor(host, config) {
 		this.#host = host;
@@ -530,6 +583,7 @@ var TreeDropController = class {
 		if (this.#config.getDndMode() === `none` || !event.dataTransfer) return;
 		this.#pointerX = event.clientX;
 		this.#pointerY = event.clientY;
+		this.#lastDragOver = event;
 		const drag = this.#config.resolveDrag(event.dataTransfer, `hover`);
 		if (!drag) {
 			this.#reject(event);
@@ -730,26 +784,56 @@ var TreeDropController = class {
 	#kickScroll() {
 		if (this.#scrollRaf === 0) this.#scrollRaf = requestAnimationFrame(this.#scrollTick);
 	}
-	#scrollTick = () => {
+	/**
+	* While the pointer sits in the top/bottom trigger zone, scroll that way.
+	* Speed grows non-linearly with how long it has been held there (see
+	* `edgeScrollSpeed`), and resets when the pointer leaves the zone or flips
+	* to the other one.
+	*/
+	#scrollTick = (now) => {
 		this.#scrollRaf = 0;
 		if (!this.#active) return;
 		const container = this.#config.getScrollContainer();
 		if (!container) return;
+		if (this.#reevaluate && this.#lastDragOver) {
+			this.#reevaluate = false;
+			this.#onDragOver(this.#lastDragOver);
+			if (!this.#active) return;
+		}
 		const rect = container.getBoundingClientRect();
-		const y = this.#pointerY - rect.top;
-		let dy = 0;
-		if (y < EDGE_ZONE_PX) dy = -Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, y) / EDGE_ZONE_PX));
-		else if (y > rect.height - EDGE_ZONE_PX) dy = Math.ceil(MAX_SCROLL_SPEED * (1 - Math.max(0, rect.height - y) / EDGE_ZONE_PX));
-		if (dy !== 0 && this.#pointerX >= rect.left && this.#pointerX <= rect.right) {
-			container.scrollTop += dy;
-			this.#kickScroll();
+		const zone = this.#pointerX >= rect.left && this.#pointerX <= rect.right ? edgeScrollZone(this.#pointerY - rect.top, rect.height) : {
+			direction: 0,
+			depth: 0
+		};
+		if (zone.direction !== this.#edgeDirection) {
+			this.#edgeDirection = zone.direction;
+			this.#edgeSince = now;
+			this.#lastTickAt = now;
+			this.#scrollRemainder = 0;
+		}
+		if (zone.direction === 0) return;
+		const dt = Math.min(MAX_FRAME_MS, Math.max(0, now - this.#lastTickAt));
+		this.#lastTickAt = now;
+		const speed = edgeScrollSpeed(zone.depth, now - this.#edgeSince);
+		const wanted = zone.direction * speed * dt / 1e3 + this.#scrollRemainder;
+		const whole = Math.trunc(wanted);
+		this.#scrollRemainder = wanted - whole;
+		if (whole !== 0) {
+			const before = container.scrollTop;
+			container.scrollTop = before + whole;
+			if (container.scrollTop !== before) this.#reevaluate = true;
 		}
+		this.#kickScroll();
 	};
 	#stopScroll() {
 		if (this.#scrollRaf !== 0) {
 			cancelAnimationFrame(this.#scrollRaf);
 			this.#scrollRaf = 0;
 		}
+		this.#edgeDirection = 0;
+		this.#scrollRemainder = 0;
+		this.#reevaluate = false;
+		this.#lastDragOver = void 0;
 	}
 	#setDropState(state) {
 		const unchanged = state === void 0 ? this.#current === void 0 : state.referenceKey === this.#current?.referenceKey && state.position === this.#current?.position && state.depth === this.#current?.depth && state.index === this.#current?.index;
@@ -812,6 +896,8 @@ function flattenTree(root, options) {
 function indexTree(root) {
 	const parentByKey = /* @__PURE__ */ new Map();
 	const depthsWithIcons = /* @__PURE__ */ new Set();
+	const seenKeys = /* @__PURE__ */ new Set([root.item.key]);
+	const duplicateKeys = /* @__PURE__ */ new Set();
 	const stack = [];
 	if (root.children) for (const child of root.children) {
 		parentByKey.set(child.item.key, root.item.key);
@@ -823,6 +909,8 @@ function indexTree(root) {
 	}
 	while (stack.length > 0) {
 		const { node, depth, parentKey } = stack.pop();
+		if (seenKeys.has(node.item.key)) duplicateKeys.add(node.item.key);
+		seenKeys.add(node.item.key);
 		parentByKey.set(node.item.key, parentKey);
 		if (node.item.icon) depthsWithIcons.add(depth);
 		if (node.children) for (let i = node.children.length - 1; i >= 0; i--) {
@@ -834,6 +922,10 @@ function indexTree(root) {
 			});
 		}
 	}
+	if (duplicateKeys.size > 0) {
+		const sample = [...duplicateKeys].slice(0, 5).map((k) => `"${k}"`).join(`, `);
+		console.warn(`[ixfx-tree] ${duplicateKeys.size} duplicate item key(s) in tree (e.g. ${sample}). Keys must be unique across the whole tree; duplicates break checkbox state, expansion and selection.`);
+	}
 	return {
 		parentByKey,
 		depthsWithIcons
@@ -2588,10 +2680,6 @@ let TreeBaseElement = class TreeBaseElement extends LitElement {
 	_handleItemClick(node, depth, event) {
 		if (this.#drop?.isDragging || this.#nativeDrag?.isDragging || this.#postDragSuppressTimer !== void 0) return;
 		if (event && event.detail >= 2) return;
-		if (this.interactionMode === `checked` && node.item.selectable !== false && event && !(event.target instanceof Element && event.target.closest(`.tree-label`))) {
-			this._handleCheckboxClick(event, node, depth);
-			return;
-		}
 		if (this.#pendingNode && this._expandedKeys.has(this.#pendingNode.item.key)) this.#abortPending();
 		this.tickled.handlePointerEnter(node.item.key);
 		this._focusedDepth = depth;

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-BFoN2Z_P.js";
+import { a as TreeDataModel, i as TreeDropController, n as TreeListElement, r as TreeBaseElement, t as TreeController } from "./tree-2_TRrLAV.js";
 export { TreeBaseElement, TreeController, TreeDataModel, TreeDropController, TreeListElement };

package/dist/vertical-list.js

@@ -2,9 +2,8 @@ import { t as TickledController } from "./tickled-controller-D-HZymaZ.js";
 import { t as themeFallbacks } from "./fallbacks-DQ_5OsmR.js";
 import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { c as createElementListSearchAdapter, i as ListSearchController, n as listSearchStyles, o as registerListSearchCommands, r as LIST_SEARCH_MODES, u as keyForElement } from "./incr-search-JIhwB49y.js";
-import { t as ListNativeDragController } from "./list-native-drag-controller-B9xO0XWn.js";
+import { i as animateListItemOut, r as animateListItemIn, t as ListNativeDragController } from "./list-native-drag-controller-CcXoS0YX.js";
 import { r as ListDragSelectController, t as ListSelectionController } from "./list-selection-controller-BeE70lbB.js";
-import { n as animateListItemIn, r as animateListItemOut } from "./list-item-animation-BUoEKi5s.js";
 import { t as scrollFadeStyles } from "./scroll-fade-Xx28D7mH.js";
 import { n as appearanceColor, t as appearanceAbsent } from "./item-appearance-BjcMyauw.js";
 import "./editable-label.js";

package/docs-user/index.json

@@ -1,7 +1,7 @@
 {
   "name": "@ixfx/components",
-  "version": "0.14.4",
-  "generated": "2026-10-16T16:32:35.695Z",
+  "version": "0.14.6",
+  "generated": "2026-10-16T18:49:43.481Z",
   "components": [
     {
       "name": "ac-text",

package/docs-user/tree.md

@@ -176,7 +176,7 @@ Controls how pointer and keyboard gestures translate to selection changes.
 | `'implicit'` | Single selection follows every click; click also toggles expand/collapse |
 | `'standard'` | Plain click selects + toggles expand; Ctrl/Cmd+click toggles item; Shift+click range-selects |
 | `'manual'` | Component never auto-selects; use `select()` / `deselect()` / `clearSelection()` to drive state |
-| `'checked'` | Checkboxes on every row; clicking the checkbox — or anywhere left of the label (indent, caret, icon) — recursively selects/deselects loaded descendants; label click only expands/collapses |
+| `'checked'` | Checkboxes on every row; clicking the checkbox recursively selects/deselects loaded descendants; any other click on the row (caret, label, icon, whitespace) only expands/collapses |
 | `'vscode'` | Like `standard` for clicks; Shift+Up/Down uses snapshot-based toggle-range (VS Code file-explorer style) |
 
 Switching `interactionMode` clears the current selection.
@@ -206,7 +206,7 @@ tree.checkboxRenderer = (state) => state === `unchecked`
 
 When `checkboxRenderer` is set, the checkbox becomes a `<span class="tree-checkbox" role="checkbox" part="checkbox">` holding your template, with `aria-checked` set to `"true"`, `"false"`, or `"mixed"` to match the tri-state. The span owns the click (same as the native input), so clicking anywhere in it — including empty space when you render nothing for `unchecked` — toggles the row.
 
-To keep the checkbox easy to aim at, the entire row region left of the label — indent gutter, checkbox, caret and icon — acts as one checkbox hit target in `checked` mode. Only clicks on the label itself expand/collapse.
+In `checked` mode **only the checkbox toggles the checked state**: the native input, or the custom renderer's `.tree-checkbox-custom` area when `checkboxRenderer` is set. Clicks anywhere else on the row, including the caret, label, icon and surrounding whitespace, only expand/collapse a branch and never change the selection. If your custom checkbox is small, enlarge the target with `--tree-checkbox-size`.
 
 Both the native input and the custom span expose the `checkbox` CSS part for external styling:
 
@@ -238,7 +238,7 @@ const root: TreeNode = {
 
 In `checked` mode:
 
-- An unselectable row is drawn **without a checkbox**, and clicks in its leading region (indent, caret, icon) expand/collapse it like a normal row instead of toggling a checkbox.
+- An unselectable row is drawn **without a checkbox**, and there is nothing on the row that toggles selection; clicks expand/collapse it like a normal row.
 - Its selectable descendants behave as normal. Unselectable leaves are ignored when working out a parent's `checked` / `indeterminate` state, so a branch whose only selectable children are all checked shows as checked.
 - Only the item's own flag decides whether a checkbox is drawn. A branch that `selectionFilter="leaf"` stops being selected itself still gets a checkbox, because that checkbox toggles its descendants.
 
@@ -459,7 +459,7 @@ Opt in with the single **`item-dnd`** attribute:
 | `acceptDropTypes` | `accept-drop-types` | `string` | – | Space-separated MIME list; an external `dragenter` is only honoured when `dataTransfer.types` intersects it. |
 | `dndExpandHoverMs` | `dnd-expand-hover-ms` | `number` | `500` | Hover-to-open delay: hovering a collapsed branch this long during a drag expands it (spring-loaded folders). |
 | `reorderable` | `reorderable` | `boolean` | `true` | When `false` (`reorderable="false"`), a drag that only reorders siblings — or drops a node back into its current parent — is rejected: no drop indicator, no `tree-drop`. Use for models with no meaningful child order (a filesystem). Reparenting, including via the x-position ancestor walk, is unaffected. |
-| `dragPreviewRenderer` | – | `ListDragPreviewRenderer<TreeNode>` | – | Custom drag image (same contract as `ixfx-grid-list`); unset ⇒ built-in cards/list preview. |
+| `dragPreviewRenderer` | – | `ListDragPreviewRenderer<TreeNode>` | – | Custom drag image (same contract as `ixfx-grid-list`); unset ⇒ built-in row preview: a compact pill with the dragged row's icon and label (taken from the node's `item.icon` / `item.label` / `item.iconColor`), plus a count badge when several rows are dragged. |
 | `canDrag` | – | `(ctx) => boolean` | – | Per-row gate at `dragstart`. Return `false` for every row (with `item-dnd` still set) for a **drop-target-only** tree. |
 | `canDrop` | – | `(ctx: TreeDropContext) => boolean` | – | Sync gate on every `dragover`; controls the valid indicator and whether the drop is allowed. |
 | `parseExternalDrop` | – | `(dt: DataTransfer) => TreeNode[] \| undefined` | – | Turn a foreign payload into nodes to insert (`external` / `both`). |
@@ -479,9 +479,21 @@ While dragging over the tree:
 - Hovering a collapsed branch for `dndExpandHoverMs` springs it open.
 - With `reorderable="false"`, `before`/`after` between current siblings gives no
   feedback — only reparenting drops resolve a target.
-- Dragging near the top/bottom edge auto-scrolls.
+- Dragging into the top or bottom edge zone auto-scrolls the list (see below).
 - Dropping a node onto itself or into its own subtree is rejected (no indicator).
 
+### Edge auto-scroll while dragging
+
+When the list is scrollable, holding a drag in the top or bottom trigger zone scrolls that way so you can reach rows that are off-screen:
+
+- **Zone:** 20% of the list's height at each edge, clamped to 24–64px (never more than half the list).
+- **Accelerates the longer you hold.** Speed starts gentle (about 120px/s) and ramps quadratically to about 3200px/s over roughly 2.5s of holding, so a brief pass through the zone barely moves the list but a deliberate hold covers long distances quickly. Moving closer to the very edge scales the speed further (35% just inside the zone, 100% at the edge).
+- **Resets** when the pointer leaves the zone or switches to the opposite edge, and stops when the drag leaves the list or drops.
+- **The drop indicator keeps up:** after each scroll the target is re-resolved for the unmoved pointer, so the highlighted row/line always matches what is under it, even if the browser isn't sending `dragover` events.
+- Spring-loaded expansion still works while scrolling: hovering a collapsed branch long enough opens it, and the list keeps scrolling past it.
+
+The constants live in [edge-scroll.ts](edge-scroll.ts).
+
 ### Applying drops without a model
 
 ```ts

package/package.json

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

package/dist/list-item-animation-BUoEKi5s.js

@@ -1,129 +0,0 @@
-import { css } from "lit";
-//#region src/interaction/list-item-animation.ts
-/**
-* Shared insertion / removal animation for the list & tree components.
-*
-* Two flavours, because the components split into two layout families:
-*
-* - **Flow layouts** (`ixfx-vertical-list`, `ixfx-detail-list`, `ixfx-tree-*`) —
-*   rows sit in normal flow, so a new row can collapse in from zero height and a
-*   leaving row can collapse back to zero, and the rows around it slide to make
-*   or close the gap for free. Use {@link animateListItemIn} /
-*   {@link animateListItemOut} (Web Animations API, exact measured sizes).
-*
-* - **Virtualised layouts** (`ixfx-grid-list`, `ixfx-data-grid`) — rows are
-*   absolutely positioned (`transform` / `top`), so collapsing a row's box moves
-*   nothing. Those components instead fade the entering / leaving row with the
-*   {@link listItemFadeKeyframes} keyframes and slide the survivors by
-*   transitioning their position for a short window after the change.
-*
-* Everything here is a no-op under `prefers-reduced-motion: reduce`.
-*/
-/** Default duration (ms) for both flavours; overridable per call / per component. */
-const LIST_ITEM_MOTION_MS = 200;
-function prefersReducedMotion() {
-	return typeof window !== `undefined` && typeof window.matchMedia === `function` && window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
-}
-/**
-* Opacity keyframes for the virtualised components. Each one adds its own
-* one-line rule binding `.<row>.ixfx-item-entering` / `.ixfx-item-leaving` to
-* these, plus a `prefers-reduced-motion` guard on its own selectors.
-*/
-const listItemFadeKeyframes = css`
-  @keyframes ixfx-list-item-in {
-    from { opacity: 0; }
-    to { opacity: 1; }
-  }
-  @keyframes ixfx-list-item-out {
-    from { opacity: 1; }
-    to { opacity: 0; }
-  }
-`;
-function measure(el, axis) {
-	const rect = el.getBoundingClientRect();
-	return axis === `inline` ? rect.width : rect.height;
-}
-function resolveDuration(el, explicit) {
-	if (explicit !== void 0) return explicit;
-	const raw = getComputedStyle(el).getPropertyValue(`--ixfx-list-item-move-duration`).trim();
-	if (raw) {
-		const n = Number.parseFloat(raw);
-		if (!Number.isNaN(n)) return raw.endsWith(`ms`) ? n : raw.endsWith(`s`) ? n * 1e3 : n;
-	}
-	return 200;
-}
-function collapsedFrame(axis) {
-	const prop = axis === `inline` ? `width` : `height`;
-	const minProp = axis === `inline` ? `minWidth` : `minHeight`;
-	return {
-		[prop]: `0px`,
-		[minProp]: `0px`,
-		opacity: 0,
-		overflow: `hidden`
-	};
-}
-function fullFrame(size, axis) {
-	const prop = axis === `inline` ? `width` : `height`;
-	const minProp = axis === `inline` ? `minWidth` : `minHeight`;
-	return {
-		[prop]: `${size}px`,
-		[minProp]: `0px`,
-		opacity: 1,
-		overflow: `hidden`
-	};
-}
-/**
-* Collapse + fade `el` in from nothing to its natural size. Call it just after
-* the element has been inserted (it must already be laid out at full size so it
-* can be measured). No-op under reduced motion.
-*/
-function animateListItemIn(el, options = {}) {
-	if (prefersReducedMotion()) return void 0;
-	const { axis = `block`, easing = `ease` } = options;
-	const duration = resolveDuration(el, options.duration);
-	const size = measure(el, axis);
-	if (size <= 0) return void 0;
-	return el.animate([collapsedFrame(axis), fullFrame(size, axis)], {
-		duration,
-		easing
-	});
-}
-function outResult(finished, animation) {
-	return Object.assign(finished, { animation });
-}
-/**
-* Start the collapse + fade-out animation for `el` and return the handle.
-* Returns `undefined` when no animation was started (reduced motion or zero
-* size). The caller owns the handle and must `cancel()` it if the removal is
-* reversed — a retained `fill: forwards` frame otherwise keeps overriding the
-* element's ordinary CSS indefinitely.
-*/
-function startListItemOutAnimation(el, options = {}) {
-	if (prefersReducedMotion()) return void 0;
-	const { axis = `block`, easing = `ease` } = options;
-	const duration = resolveDuration(el, options.duration);
-	const size = measure(el, axis);
-	if (size <= 0) return void 0;
-	return el.animate([fullFrame(size, axis), collapsedFrame(axis)], {
-		duration,
-		easing,
-		fill: `forwards`
-	});
-}
-/**
-* Collapse + fade `el` out. Resolves once the animation finishes (or straight
-* away under reduced motion); the caller detaches the element after. The final
-* collapsed state is held (`fill: forwards`) so there's no flash back to full
-* size in the gap before removal.
-*
-* The returned promise carries an `.animation` handle. If the removal is
-* reversed (the same key becomes visible again), cancel that handle so its
-* filled final frame stops overriding the reused element's style.
-*/
-function animateListItemOut(el, options = {}) {
-	const animation = startListItemOutAnimation(el, options);
-	if (!animation) return outResult(Promise.resolve(), void 0);
-	return outResult(animation.finished.then(() => void 0, () => void 0), animation);
-}
-//#endregion
-export { prefersReducedMotion as a, listItemFadeKeyframes as i, animateListItemIn as n, startListItemOutAnimation as o, animateListItemOut as r, LIST_ITEM_MOTION_MS as t };