forty-cdk 0.2.0 → 0.3.0

package/fesm2022/forty-cdk-tree.mjs

@@ -0,0 +1,2007 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, model, input, booleanAttribute, numberAttribute, output, computed, signal, effect, Directive, DOCUMENT, PLATFORM_ID, DestroyRef } from '@angular/core';
+import { moveIndex, firstEnabledHost, VirtualizedNavigator, createDefaults, injectTextDirection, RovingTabindex, injectTypeahead, Collection, resolveListNavigation, resolveTreeExpandCollapse, resolveLiftedDragControl, LiveAnnouncer, createKeyboardDragMediator, createPointerDragSession, isDragLiftKey, gapFromPointerY, levelFromPointerX, resolveTreeDrop, PreviewController, resolveDropIndicator, hostId, registerHandle } from 'forty-cdk/core';
+import { isPlatformBrowser } from '@angular/common';
+
+/**
+ * Focus engine for the standard (non-virtualized) tree: DOM focus rides the
+ * `treeitem`, tracked through {@link RovingTabindex}. The current node is the
+ * roving-active host; navigation walks the flattened visible-node list.
+ *
+ * Internal — not re-exported from `tree/index.ts` or `public-api.ts`.
+ */
+class RovingFocusModel {
+    #deps;
+    constructor(deps) {
+        this.#deps = deps;
+    }
+    focusTarget(handle) {
+        this.#deps.roving.focusActive(handle.host);
+    }
+    current() {
+        const entry = this.#currentNode();
+        if (!entry) {
+            return null;
+        }
+        const handle = entry.handle;
+        return { value: handle.value(), expandable: handle.expandable(), disabled: handle.disabled() };
+    }
+    navigate(action) {
+        const active = this.#deps.roving.active();
+        const items = this.#deps.visibleHandles();
+        if (items.length === 0) {
+            return;
+        }
+        const currentIndex = items.findIndex((item) => item.host === active);
+        const next = moveIndex(currentIndex < 0 ? 0 : currentIndex, items.length, action, {
+            loop: false,
+            isDisabled: (i) => items[i].disabled(),
+        });
+        if (next === null) {
+            return;
+        }
+        const target = items[next];
+        if (!target) {
+            return;
+        }
+        this.#deps.roving.focusActive(target.host);
+        this.#deps.selectOnFocus(target.value());
+    }
+    enterChild() {
+        const entry = this.#currentNode();
+        if (!entry) {
+            return;
+        }
+        const child = entry.handle.childContainer();
+        const firstChild = child ? firstEnabledHost(child.items()) : null;
+        if (firstChild) {
+            this.#deps.roving.focusActive(firstChild);
+        }
+    }
+    moveToParent() {
+        const entry = this.#currentNode();
+        if (entry?.parentHost) {
+            this.#deps.roving.focusActive(entry.parentHost);
+        }
+    }
+    typeaheadTo(handle) {
+        this.#deps.roving.focusActive(handle.host);
+    }
+    #currentNode() {
+        const active = this.#deps.roving.active();
+        if (active === null) {
+            return null;
+        }
+        return this.#deps.visibleNodes().find((entry) => entry.handle.host === active) ?? null;
+    }
+}
+/**
+ * Focus engine for the virtualized tree: DOM focus stays on the container and
+ * an `aria-activedescendant` pointer tracks the active node. Owns the shared
+ * `_internal/virtualized-navigator` engine directly — a tree never wraps, so it
+ * pins `loop` to `false`, and its snapshot entry carries `level` / `expandable`
+ * / `value` so the tree-specific enter-child / go-to-parent moves can resolve
+ * levels outside the rendered window. Selection never follows focus here.
+ *
+ * Internal — not re-exported from `tree/index.ts` or `public-api.ts`.
+ */
+class ActiveDescendantFocusModel {
+    #deps;
+    #core;
+    constructor(deps) {
+        this.#deps = deps;
+        this.#core = new VirtualizedNavigator({ ...deps, loop: () => false }, {
+            posOf: (n) => n.itemIndex(),
+            idOf: (n) => n.id(),
+            hostOf: (n) => n.host,
+            readEntry: (n) => ({
+                id: n.id(),
+                disabled: n.disabled(),
+                level: n.level(),
+                expandable: n.expandable(),
+                value: n.value(),
+            }),
+        });
+    }
+    /** @see VirtualizedNavigator.prime */
+    prime() {
+        this.#core.prime();
+    }
+    /** @see VirtualizedNavigator.tryResolvePending */
+    tryResolvePending() {
+        return this.#core.tryResolvePending();
+    }
+    focusTarget(handle) {
+        this.#deps.setActiveId(handle.id());
+    }
+    current() {
+        const cur = this.#currentEntry();
+        if (!cur) {
+            return null;
+        }
+        return { value: cur.value, expandable: cur.expandable, disabled: cur.disabled };
+    }
+    navigate(action) {
+        this.#core.navigate(action);
+    }
+    /**
+     * Move activedescendant to the first child of the current node (the node
+     * immediately after it in pre-order flat space). No-op when there is no
+     * active node or when the active node is the last in the list.
+     */
+    enterChild() {
+        const cur = this.#currentEntry();
+        if (!cur)
+            return;
+        const target = cur.pos + 1;
+        const total = this.#deps.totalCount();
+        if (total !== undefined && target < total) {
+            this.#core.seedActive(target);
+        }
+    }
+    /**
+     * Move activedescendant to the nearest preceding node at a shallower level
+     * (the parent). No-op when the active node has no visible parent in the
+     * snapshot — an accepted edge case when the parent has never been rendered.
+     */
+    moveToParent() {
+        const cur = this.#currentEntry();
+        if (!cur)
+            return;
+        const indexed = this.#core.snapshotByPos();
+        for (let p = cur.pos - 1; p >= 0; p--) {
+            const e = indexed.get(p);
+            if (e && e.level < cur.level) {
+                this.#core.seedActive(p);
+                return;
+            }
+        }
+    }
+    typeaheadTo(handle) {
+        this.#deps.setActiveId(handle.id());
+        handle.host.scrollIntoView?.({ block: 'nearest' });
+    }
+    /**
+     * Resolve the active node's position entry from live items first, then the
+     * snapshot. Returns `{ pos, value, level, expandable, disabled }` or `null`
+     * when nothing is active.
+     */
+    #currentEntry() {
+        const currentId = this.#deps.getActiveId();
+        if (currentId === null) {
+            return null;
+        }
+        const live = this.#deps.items().find((o) => o.id() === currentId);
+        if (live) {
+            const pos = live.itemIndex();
+            if (pos !== null) {
+                return {
+                    pos,
+                    value: live.value(),
+                    level: live.level(),
+                    expandable: live.expandable(),
+                    disabled: live.disabled(),
+                };
+            }
+        }
+        const indexed = this.#core.snapshotByPos();
+        for (const [pos, entry] of indexed) {
+            if (entry.id === currentId) {
+                return {
+                    pos,
+                    value: entry.value,
+                    level: entry.level,
+                    expandable: entry.expandable,
+                    disabled: entry.disabled,
+                };
+            }
+        }
+        return null;
+    }
+}
+
+const FOR_TREE_CONTEXT = new InjectionToken('FOR_TREE_CONTEXT');
+const FOR_TREE_CONTAINER_CONTEXT = new InjectionToken('FOR_TREE_CONTAINER_CONTEXT');
+const FOR_TREE_ITEM_CONTEXT = new InjectionToken('FOR_TREE_ITEM_CONTEXT');
+/** Injects the nearest {@link ForTreeContext}, throwing a prefixed error if absent. */
+function injectTreeContext(piece) {
+    const ctx = inject(FOR_TREE_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/tree] ${piece} must be used inside a [forTree] element.`);
+    }
+    return ctx;
+}
+/** Injects the nearest {@link ForTreeContainerContext} (the root or a group). */
+function injectTreeContainerContext(piece) {
+    const ctx = inject(FOR_TREE_CONTAINER_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/tree] ${piece} must be used inside a [forTree] or [forTreeGroup] element.`);
+    }
+    return ctx;
+}
+/** Injects the nearest enclosing {@link ForTreeItemContext}. */
+function injectTreeItemContext(piece) {
+    const ctx = inject(FOR_TREE_ITEM_CONTEXT, { optional: true });
+    if (!ctx) {
+        throw new Error(`[forty-cdk/tree] ${piece} must be used inside a [forTreeItem] element.`);
+    }
+    return ctx;
+}
+
+/**
+ * Library fallback for tree defaults, read at the root injector when no
+ * consumer has called `provideForTreeDefaults`. Exported for the shared
+ * defaults contract spec; not re-exported from the primitive's public entry.
+ */
+const FOR_TREE_FALLBACK_DEFAULTS = {
+    selectionFollowsFocus: false,
+};
+const { token, provideDefaults } = createDefaults('FOR_TREE_DEFAULTS', FOR_TREE_FALLBACK_DEFAULTS);
+/** Token holding the resolved tree defaults for the current scope. */
+const FOR_TREE_DEFAULTS = token;
+/**
+ * Configures forty-cdk tree defaults for this injector scope. Partial
+ * overrides inherit unspecified keys from the parent scope (or library
+ * defaults at the root).
+ */
+function provideForTreeDefaults(defaults = {}) {
+    return provideDefaults(defaults);
+}
+
+/**
+ * Selection + checkbox-cascade engine for `ForTree`, extracted from the root so
+ * the directive keeps only its reactive wiring and ARIA. Owns single / multi /
+ * checkbox selection, cascade tri-state derivation, range selection, select-all,
+ * and the `*`-key sibling expansion — every write goes back through the deps'
+ * model setters so `ForTree` stays the single source of truth.
+ *
+ * Internal — not re-exported from `tree/index.ts` or `public-api.ts`.
+ */
+class TreeSelection {
+    #deps;
+    constructor(deps) {
+        this.#deps = deps;
+    }
+    checkState(value) {
+        const current = this.#deps.value();
+        if (this.#deps.selectionMode() !== 'checkbox' || !this.#deps.cascade()) {
+            return current.includes(value) ? 'true' : 'false';
+        }
+        const descendants = this.#resolveDescendants(value);
+        if (descendants.length === 0) {
+            return current.includes(value) ? 'true' : 'false';
+        }
+        const selected = new Set(current);
+        let checked = 0;
+        for (const d of descendants) {
+            if (selected.has(d)) {
+                checked += 1;
+            }
+        }
+        if (checked === 0) {
+            return 'false';
+        }
+        return checked === descendants.length ? 'true' : 'mixed';
+    }
+    select(value) {
+        if (this.#deps.disabled()) {
+            return;
+        }
+        if (this.#deps.selectionMode() === 'checkbox' && this.#deps.cascade()) {
+            const group = new Set([value, ...this.#resolveDescendants(value)]);
+            const current = this.#deps.value();
+            const allChecked = [...group].every((v) => current.includes(v));
+            this.#deps.setValue(allChecked ? current.filter((v) => !group.has(v)) : [...new Set([...current, ...group])]);
+        }
+        else if (this.#deps.multiple() || this.#deps.selectionMode() === 'checkbox') {
+            const current = this.#deps.value();
+            this.#deps.setValue(current.includes(value) ? current.filter((v) => v !== value) : [...current, value]);
+        }
+        else {
+            this.#deps.setValue([value]);
+        }
+        this.#deps.setAnchorValue(value);
+    }
+    expandSiblings(currentItem) {
+        if (this.#deps.disabled()) {
+            return;
+        }
+        const entries = this.#deps.visibleNodes();
+        const current = entries.find((e) => e.handle.host === currentItem);
+        if (!current) {
+            return;
+        }
+        const next = [...this.#deps.expanded()];
+        for (const entry of entries) {
+            if (entry.parentHost === current.parentHost &&
+                entry.handle.expandable() &&
+                !next.includes(entry.handle.value())) {
+                next.push(entry.handle.value());
+            }
+        }
+        this.#deps.setExpanded(next);
+    }
+    extendByArrow(currentItem, action) {
+        if (this.#deps.disabled() || !this.#deps.multiple()) {
+            return;
+        }
+        const items = this.#deps.visibleHandles();
+        if (items.length === 0) {
+            return;
+        }
+        const currentIndex = items.findIndex((item) => item.host === currentItem);
+        const next = moveIndex(currentIndex < 0 ? 0 : currentIndex, items.length, action, {
+            loop: false,
+            isDisabled: (i) => items[i].disabled(),
+        });
+        if (next === null) {
+            return;
+        }
+        const target = items[next];
+        if (!target) {
+            return;
+        }
+        // Establish the range anchor at the origin of the shift-extend run so a
+        // following Shift+Space ranges from where the user started extending, not
+        // from a stale (or absent) anchor. A pre-existing anchor (e.g. from a prior
+        // click) is left in place, matching the listbox range contract.
+        if (this.#deps.anchorValue() === null && currentIndex >= 0) {
+            this.#deps.setAnchorValue(items[currentIndex].value());
+        }
+        this.#deps.roving.focusActive(target.host);
+        const value = target.value();
+        const current = this.#deps.value();
+        this.#deps.setValue(current.includes(value) ? current.filter((v) => v !== value) : [...current, value]);
+    }
+    selectRangeToFocused(currentItem) {
+        if (this.#deps.disabled() || !this.#deps.multiple()) {
+            return;
+        }
+        const items = this.#deps.visibleHandles();
+        const currentIndex = items.findIndex((item) => item.host === currentItem);
+        if (currentIndex < 0) {
+            return;
+        }
+        const anchorValue = this.#deps.anchorValue();
+        const anchorIndex = anchorValue === null ? currentIndex : items.findIndex((i) => i.value() === anchorValue);
+        const start = anchorIndex < 0 ? currentIndex : anchorIndex;
+        const [lo, hi] = start <= currentIndex ? [start, currentIndex] : [currentIndex, start];
+        const next = [...this.#deps.value()];
+        for (let i = lo; i <= hi; i++) {
+            const item = items[i];
+            if (!item || item.disabled()) {
+                continue;
+            }
+            const value = item.value();
+            if (!next.includes(value)) {
+                next.push(value);
+            }
+        }
+        this.#deps.setValue(next);
+    }
+    selectAll() {
+        if (this.#deps.disabled() || !this.#deps.multiple()) {
+            return;
+        }
+        const values = this.#deps
+            .visibleNodes()
+            .map((entry) => entry.handle)
+            .filter((handle) => !handle.disabled())
+            .map((handle) => handle.value());
+        if (values.length === 0) {
+            return;
+        }
+        const current = this.#deps.value();
+        const allSelected = values.every((v) => current.includes(v));
+        this.#deps.setValue(allSelected ? [] : [...new Set([...current, ...values])]);
+    }
+    #resolveDescendants(value) {
+        const fn = this.#deps.descendantsOf();
+        if (!fn) {
+            throw new Error('[forty-cdk/tree] `cascade` requires a `descendantsOf` descriptor returning the descendant values of a node.');
+        }
+        return fn(value);
+    }
+}
+
+/**
+ * Headless implementation of the
+ * [WAI-ARIA Tree View pattern](https://www.w3.org/WAI/ARIA/apg/patterns/treeview/).
+ *
+ * A nested tree (`role="tree"` → `treeitem` → `group` → `treeitem`) with
+ * `@if`-driven expansion, roving-tabindex focus management (APG Approach A —
+ * DOM focus rides the `treeitem`), typeahead, RTL arrow mirroring, and full
+ * `aria-level` / `aria-setsize` / `aria-posinset` wiring.
+ *
+ * Two orthogonal models:
+ * - `value` — selected node values; single mode (default) keeps 0 or 1
+ *   element, multi mode accumulates.
+ * - `expanded` — open parent node values; always multi (no single mode).
+ *
+ * Single-select consumers read the sole value through {@link ForTree.selected}
+ * instead of unwrapping `value()[0]`.
+ *
+ * @example
+ * ```html
+ * <ul forTree [(value)]="selected" [(expanded)]="expanded" aria-label="Files">
+ *   <ng-container [ngTemplateOutlet]="node" [ngTemplateOutletContext]="{ $implicit: root }" />
+ * </ul>
+ * ```
+ */
+class ForTree {
+    #defaults = inject(FOR_TREE_DEFAULTS);
+    #host = inject(ElementRef);
+    /**
+     * Two-way bindable. Selected node values. Single mode keeps the array at
+     * length <= 1. The `model()` change emitter (`(valueChange)`) fires only on
+     * internal selection changes (node activation or `selectionFollowsFocus`
+     * navigation), never on consumer writes via `[(value)]`.
+     */
+    value = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /**
+     * Two-way bindable. Open (expanded) parent node values. Always multi — any
+     * number of nodes can be open. The `model()` change emitter
+     * (`(expandedChange)`) fires only on internal expand / collapse, never on
+     * consumer writes via `[(expanded)]`.
+     */
+    expanded = model([], /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    /** When true, multiple nodes can be selected. Single mode (default) replaces. */
+    multiple = input(false, { ...(ngDevMode ? { debugName: "multiple" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Disables the whole tree: nodes are not selectable and report `aria-disabled`. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /** Navigation axis. `'vertical'` (default) uses ArrowUp/Down for movement. */
+    orientation = input('vertical', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "orientation" }] : /* istanbul ignore next */ []));
+    /**
+     * Selection presentation. `'highlight'` (default) keeps the `aria-selected`
+     * contract; `'checkbox'` switches each `treeitem` to `aria-checked` and is
+     * inherently multi-select (each node toggles independently).
+     */
+    selectionMode = input('highlight', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selectionMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Enables cascade selection in `selectionMode="checkbox"`: checking or
+     * unchecking a node propagates to all its descendants, and a parent derives
+     * `aria-checked="mixed"` when only some descendants are checked. Ignored in
+     * `'highlight'` mode. Requires {@link ForTree.descendantsOf}. Default `false`.
+     */
+    cascade = input(false, { ...(ngDevMode ? { debugName: "cascade" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Returns the selectable descendant values of a node (excluding the node
+     * itself), used to cascade selection and derive `'mixed'` across collapsed —
+     * possibly unmounted — subtrees. **Required** when {@link ForTree.cascade} is
+     * `true`; the tree throws a `[forty-cdk/tree]` error otherwise.
+     */
+    descendantsOf = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "descendantsOf" }] : /* istanbul ignore next */ []));
+    /**
+     * Total number of nodes in the flattened visible-node list. When set, enables
+     * the virtualized activedescendant focus model. Leave unset (default
+     * `undefined`) for the standard roving-tabindex model.
+     */
+    totalCount = input(undefined, { ...(ngDevMode ? { debugName: "totalCount" } : /* istanbul ignore next */ {}), transform: (v) => (v == null ? undefined : numberAttribute(v)) });
+    /**
+     * Inclusive-exclusive `[start, end)` index range of the currently rendered
+     * nodes. The virtualizer provides this; the tree uses it to decide whether a
+     * navigation target is in the visible window.
+     */
+    visibleRange = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "visibleRange" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when keyboard navigation reaches a node outside the rendered
+     * window. The consumer passes this index to `injectVirtualizer`'s
+     * `scrollToIndex` so the correct node mounts.
+     */
+    scrollToIndex = output();
+    /**
+     * Manual `aria-label` for the tree. Use this when no visible label element
+     * exists; otherwise prefer pointing `aria-labelledby` at one. A `null`
+     * (default) or empty value emits no attribute.
+     */
+    ariaLabel = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+    /**
+     * Writing direction. When unset (default `null`), the inherited ambient
+     * direction is resolved from the nearest ancestor carrying a `dir` attribute
+     * (or `<html dir>`), defaulting to `'ltr'`. An explicit `[dir]` always wins.
+     * The resolved value is reflected to the host `dir` attribute and swaps the
+     * expand / collapse arrow semantics in RTL.
+     */
+    _dirInput = input(null, { ...(ngDevMode ? { debugName: "_dirInput" } : /* istanbul ignore next */ {}), alias: 'dir' });
+    dir = injectTextDirection(this._dirInput);
+    /**
+     * Single-mode only: when true, arrow navigation also selects the focused
+     * node. The default is read from `provideForTreeDefaults` for the
+     * surrounding scope.
+     */
+    selectionFollowsFocus = input(this.#defaults.selectionFollowsFocus, { ...(ngDevMode ? { debugName: "selectionFollowsFocus" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Read-only single-select convenience view of {@link value}. Returns the
+     * sole selected value when exactly one node is selected, otherwise `null`
+     * (empty selection, or multiple selections in `multiple` mode).
+     */
+    selected = computed(() => {
+        const v = this.value();
+        return v.length === 1 ? v[0] : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** Root container hosts level-1 items. */
+    level = signal(1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    roving = new RovingTabindex();
+    #typeahead = injectTypeahead();
+    #items = new Collection();
+    #anchorValue = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#anchorValue" }] : /* istanbul ignore next */ []));
+    items = this.#items.items;
+    #visibleEntries = computed(() => {
+        const expanded = this.expanded();
+        const result = [];
+        const walk = (container, parentHost) => {
+            for (const handle of container.items()) {
+                result.push({ handle, parentHost });
+                if (expanded.includes(handle.value())) {
+                    const child = handle.childContainer();
+                    if (child) {
+                        walk(child, handle.host);
+                    }
+                }
+            }
+        };
+        walk(this, null);
+        return result;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#visibleEntries" }] : /* istanbul ignore next */ []));
+    /**
+     * Flattened currently-visible nodes in DOM order, each with its resolved parent host. Exposed for
+     * drag-drop composition (`[forTreeNodeDrag]`). Reflects expansion: collapsed subtrees are absent.
+     */
+    visibleNodes = this.#visibleEntries;
+    #visibleHandles = computed(() => this.#visibleEntries().map((entry) => entry.handle), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#visibleHandles" }] : /* istanbul ignore next */ []));
+    #firstEnabledRoot = computed(() => firstEnabledHost(this.#items.items()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#firstEnabledRoot" }] : /* istanbul ignore next */ []));
+    #virtualized = computed(() => this.totalCount() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#virtualized" }] : /* istanbul ignore next */ []));
+    #activeId = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#activeId" }] : /* istanbul ignore next */ []));
+    /**
+     * The active node's `id` when using the activedescendant focus model,
+     * `null` in the roving-tabindex path. The host reflects this as
+     * `aria-activedescendant`; items read it to compute `data-highlighted`.
+     */
+    activeDescendantId = computed(() => this.#virtualized() ? this.#activeId() : null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "activeDescendantId" }] : /* istanbul ignore next */ []));
+    /**
+     * Tabindex for the tree host. In the virtualized path the host is always the
+     * single tab stop. In the roving path the host carries no tabindex (items own
+     * their own tab stop). A disabled tree is never tabbable.
+     */
+    hostTabindex = computed(() => {
+        if (this.disabled())
+            return null;
+        return this.#virtualized() ? '0' : null;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hostTabindex" }] : /* istanbul ignore next */ []));
+    #selection = new TreeSelection({
+        value: this.value,
+        expanded: this.expanded,
+        multiple: this.multiple,
+        disabled: this.disabled,
+        selectionMode: this.selectionMode,
+        cascade: this.cascade,
+        descendantsOf: this.descendantsOf,
+        visibleNodes: this.#visibleEntries,
+        visibleHandles: this.#visibleHandles,
+        roving: this.roving,
+        setValue: (next) => this.value.set(next),
+        setExpanded: (next) => this.expanded.set(next),
+        anchorValue: () => this.#anchorValue(),
+        setAnchorValue: (value) => this.#anchorValue.set(value),
+    });
+    #rovingModel = null;
+    #activeDescendantModel = null;
+    #requireActiveDescendantModel() {
+        return (this.#activeDescendantModel ??= new ActiveDescendantFocusModel({
+            items: this.#items.items,
+            totalCount: this.totalCount,
+            visibleRange: this.visibleRange,
+            getActiveId: () => this.#activeId(),
+            setActiveId: (id) => this.#activeId.set(id),
+            emitScrollToIndex: (idx) => this.scrollToIndex.emit(idx),
+        }));
+    }
+    #focusModel() {
+        if (this.#virtualized()) {
+            return this.#requireActiveDescendantModel();
+        }
+        return (this.#rovingModel ??= new RovingFocusModel({
+            roving: this.roving,
+            visibleNodes: this.#visibleEntries,
+            visibleHandles: this.#visibleHandles,
+            selectOnFocus: (value) => {
+                if (!this.multiple() && this.selectionFollowsFocus()) {
+                    this.value.set([value]);
+                    this.#anchorValue.set(value);
+                }
+            },
+        }));
+    }
+    constructor() {
+        effect(() => {
+            if (this.#virtualized())
+                return;
+            const active = this.roving.active();
+            if (active === null) {
+                return;
+            }
+            const visible = this.#visibleEntries();
+            const entry = visible.find((e) => e.handle.host === active);
+            if (entry && !entry.handle.disabled() && active.isConnected) {
+                return;
+            }
+            const fallback = visible.find((e) => !e.handle.disabled());
+            this.roving.setActive(fallback?.handle.host ?? null);
+        });
+        effect(() => {
+            this.#items.items();
+            if (!this.#virtualized())
+                return;
+            const model = this.#requireActiveDescendantModel();
+            model.prime();
+            model.tryResolvePending();
+        });
+    }
+    isExpanded(value) {
+        return this.expanded().includes(value);
+    }
+    isSelected(value) {
+        return this.value().includes(value);
+    }
+    /**
+     * Tri-state check status of a node in `selectionMode="checkbox"`. Without
+     * cascade (or in `'highlight'` mode) returns `'true'` / `'false'` by direct
+     * membership. With cascade a parent returns `'true'` when all its descendants
+     * are checked, `'false'` when none are, and `'mixed'` otherwise.
+     */
+    checkState(value) {
+        return this.#selection.checkState(value);
+    }
+    setExpanded(value, open) {
+        const current = this.expanded();
+        const has = current.includes(value);
+        if (open && !has) {
+            this.expanded.set([...current, value]);
+        }
+        else if (!open && has) {
+            this.#relocateActiveOnCollapse(value);
+            this.expanded.set(current.filter((v) => v !== value));
+        }
+    }
+    select(value) {
+        this.#selection.select(value);
+    }
+    #relocateActiveOnCollapse(value) {
+        const active = this.roving.active();
+        if (active === null) {
+            return;
+        }
+        const visible = this.#visibleEntries();
+        const collapsing = visible.find((e) => e.handle.value() === value);
+        if (!collapsing) {
+            return;
+        }
+        const collapsingHost = collapsing.handle.host;
+        if (collapsingHost !== active && collapsingHost.contains(active)) {
+            this.roving.focusActive(collapsingHost);
+        }
+    }
+    navigate(_currentItem, action) {
+        if (this.disabled()) {
+            return;
+        }
+        this.#focusModel().navigate(action);
+    }
+    expandOrEnter(_currentItem) {
+        if (this.disabled()) {
+            return;
+        }
+        const model = this.#focusModel();
+        const cur = model.current();
+        if (!cur || cur.disabled || !cur.expandable) {
+            return;
+        }
+        if (!this.isExpanded(cur.value)) {
+            this.setExpanded(cur.value, true);
+            return;
+        }
+        model.enterChild();
+    }
+    collapseOrLeave(_currentItem) {
+        if (this.disabled()) {
+            return;
+        }
+        const model = this.#focusModel();
+        const cur = model.current();
+        if (!cur) {
+            return;
+        }
+        if (cur.expandable && this.isExpanded(cur.value)) {
+            this.setExpanded(cur.value, false);
+            return;
+        }
+        model.moveToParent();
+    }
+    expandSiblings(currentItem) {
+        this.#selection.expandSiblings(currentItem);
+    }
+    extendByArrow(currentItem, action) {
+        this.#selection.extendByArrow(currentItem, action);
+    }
+    selectRangeToFocused(currentItem) {
+        this.#selection.selectRangeToFocused(currentItem);
+    }
+    selectAll() {
+        this.#selection.selectAll();
+    }
+    handleTypeahead(event) {
+        if (!this.#typeahead.handle(event)) {
+            return false;
+        }
+        const buffer = this.#typeahead.buffer().toLowerCase();
+        if (!buffer) {
+            return true;
+        }
+        const source = this.#virtualized()
+            ? this.#items.items()
+            : this.#visibleEntries().map((entry) => entry.handle);
+        const match = source.find((handle) => {
+            if (handle.disabled()) {
+                return false;
+            }
+            const text = (handle.textValue() || handle.labelEl()?.textContent || '').trim().toLowerCase();
+            return text.startsWith(buffer);
+        });
+        if (match) {
+            this.#focusModel().typeaheadTo(match);
+        }
+        return true;
+    }
+    isFirstFocusableItem(el) {
+        return this.#firstEnabledRoot() === el;
+    }
+    onHostKeyDown(event) {
+        if (!this.#virtualized() || this.disabled())
+            return;
+        const host = this.#host.nativeElement;
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            this.#activateActiveDescendant();
+            return;
+        }
+        const action = resolveListNavigation(event, {
+            orientation: this.orientation(),
+            dir: this.dir(),
+        });
+        if (action === 'next' || action === 'prev' || action === 'first' || action === 'last') {
+            event.preventDefault();
+            this.navigate(host, action);
+            return;
+        }
+        const intent = resolveTreeExpandCollapse(event, {
+            orientation: this.orientation(),
+            dir: this.dir(),
+        });
+        if (intent === 'expand') {
+            event.preventDefault();
+            this.expandOrEnter(host);
+            return;
+        }
+        if (intent === 'collapse') {
+            event.preventDefault();
+            this.collapseOrLeave(host);
+            return;
+        }
+        this.handleTypeahead(event);
+    }
+    onHostFocusIn() {
+        if (!this.#virtualized() || this.disabled())
+            return;
+        if (this.#activeId() !== null)
+            return;
+        const items = this.#items.items();
+        if (items.length === 0)
+            return;
+        const ordered = [...items].sort((a, b) => (a.itemIndex() ?? 0) - (b.itemIndex() ?? 0));
+        const value = this.value();
+        const selectedFirst = ordered.find((h) => !h.disabled() && value.includes(h.value()));
+        const target = selectedFirst ?? ordered.find((h) => !h.disabled());
+        if (target)
+            this.#activeId.set(target.id());
+    }
+    #activateActiveDescendant() {
+        const id = this.#activeId();
+        if (id === null)
+            return;
+        const handle = this.#items.items().find((o) => o.id() === id);
+        if (!handle || handle.disabled())
+            return;
+        this.select(handle.value());
+    }
+    registerItem(handle) {
+        this.#items.register(handle);
+    }
+    notifyItemClick(itemId) {
+        if (!this.#virtualized())
+            return;
+        this.#activeId.set(itemId);
+        this.#host.nativeElement.focus();
+    }
+    unregisterItem(handle) {
+        this.#items.unregister(handle);
+        this.roving.unregister(handle.host);
+        if (this.#virtualized() && this.#activeId() === handle.id()) {
+            this.#activeId.set(null);
+        }
+    }
+    indexOfHost(el) {
+        return this.#items.indexOfHost(el);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTree, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTree, isStandalone: true, selector: "[forTree]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, selectionMode: { classPropertyName: "selectionMode", publicName: "selectionMode", isSignal: true, isRequired: false, transformFunction: null }, cascade: { classPropertyName: "cascade", publicName: "cascade", isSignal: true, isRequired: false, transformFunction: null }, descendantsOf: { classPropertyName: "descendantsOf", publicName: "descendantsOf", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, visibleRange: { classPropertyName: "visibleRange", publicName: "visibleRange", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, _dirInput: { classPropertyName: "_dirInput", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, selectionFollowsFocus: { classPropertyName: "selectionFollowsFocus", publicName: "selectionFollowsFocus", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", expanded: "expandedChange", scrollToIndex: "scrollToIndex" }, host: { attributes: { "role": "tree" }, listeners: { "keydown": "onHostKeyDown($event)", "focusin": "onHostFocusIn()" }, properties: { "attr.aria-label": "ariaLabel() || null", "attr.aria-multiselectable": "multiple() ? \"true\" : null", "attr.aria-orientation": "orientation()", "attr.aria-disabled": "disabled() ? \"true\" : null", "attr.data-orientation": "orientation()", "attr.data-disabled": "disabled() ? \"\" : null", "attr.dir": "dir()", "attr.aria-activedescendant": "activeDescendantId()", "attr.tabindex": "hostTabindex()" } }, providers: [
+            { provide: FOR_TREE_CONTEXT, useExisting: ForTree },
+            { provide: FOR_TREE_CONTAINER_CONTEXT, useExisting: ForTree },
+        ], exportAs: ["forTree"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTree, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTree]',
+                    exportAs: 'forTree',
+                    host: {
+                        role: 'tree',
+                        '[attr.aria-label]': 'ariaLabel() || null',
+                        '[attr.aria-multiselectable]': 'multiple() ? "true" : null',
+                        '[attr.aria-orientation]': 'orientation()',
+                        '[attr.aria-disabled]': 'disabled() ? "true" : null',
+                        '[attr.data-orientation]': 'orientation()',
+                        '[attr.data-disabled]': 'disabled() ? "" : null',
+                        '[attr.dir]': 'dir()',
+                        '[attr.aria-activedescendant]': 'activeDescendantId()',
+                        '[attr.tabindex]': 'hostTabindex()',
+                        '(keydown)': 'onHostKeyDown($event)',
+                        '(focusin)': 'onHostFocusIn()',
+                    },
+                    providers: [
+                        { provide: FOR_TREE_CONTEXT, useExisting: ForTree },
+                        { provide: FOR_TREE_CONTAINER_CONTEXT, useExisting: ForTree },
+                    ],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], expanded: [{ type: i0.Input, args: [{ isSignal: true, alias: "expanded", required: false }] }, { type: i0.Output, args: ["expandedChange"] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], selectionMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionMode", required: false }] }], cascade: [{ type: i0.Input, args: [{ isSignal: true, alias: "cascade", required: false }] }], descendantsOf: [{ type: i0.Input, args: [{ isSignal: true, alias: "descendantsOf", required: false }] }], totalCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalCount", required: false }] }], visibleRange: [{ type: i0.Input, args: [{ isSignal: true, alias: "visibleRange", required: false }] }], scrollToIndex: [{ type: i0.Output, args: ["scrollToIndex"] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], _dirInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], selectionFollowsFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionFollowsFocus", required: false }] }] } });
+
+/**
+ * Screen-reader announcement strings for `ForTreeNodeDrag`. Kept framework-free and
+ * separate from the directive so the live-region copy lives in one place and can be unit
+ * tested without rendering the tree. Not part of the public API.
+ */
+/** Spoken when a node is picked up (assertive). */
+function announceTreeLift(label) {
+    return `Picked up ${label}. Use arrow keys to move, Space to drop, Escape to cancel.`;
+}
+/** Spoken on each intermediate move while a node is lifted (polite). */
+function announceTreeMove(label, parentLabel, position, total) {
+    const parentPart = parentLabel ? `under ${parentLabel}, ` : 'at root, ';
+    return `${label}: ${parentPart}position ${position} of ${total}.`;
+}
+/** Spoken when a node is committed to its new position (assertive). */
+function announceTreeDrop(label, parentLabel, position, total) {
+    const parentPart = parentLabel ? `under ${parentLabel}, ` : 'at root, ';
+    return `Dropped ${label} ${parentPart}position ${position} of ${total}.`;
+}
+/** Spoken when a lift is cancelled and the node returns to its origin (assertive). */
+function announceTreeCancel(label) {
+    return `Cancelled. ${label} returned to its original position.`;
+}
+/** Spoken when a `canDrop` veto rejects the attempted drop (assertive). */
+function announceTreeInvalid(label) {
+    return `Cannot drop ${label} here.`;
+}
+
+/**
+ * Resolves the action for a key press while a node is lifted, honoring writing direction for
+ * the depth keys (ArrowRight deepens in LTR, ArrowLeft deepens in RTL). Cancel / commit are
+ * delegated to the shared {@link resolveLiftedDragControl}. Returns `null` for keys with no
+ * lifted-drag meaning.
+ *
+ * @param event The keydown event.
+ * @param dir Resolved writing direction.
+ */
+function resolveTreeDragLiftedAction(event, dir) {
+    const control = resolveLiftedDragControl(event);
+    if (control) {
+        return control;
+    }
+    const key = event.key;
+    if (key === 'ArrowDown') {
+        return 'down';
+    }
+    if (key === 'ArrowUp') {
+        return 'up';
+    }
+    const isRtl = dir === 'rtl';
+    if (key === (isRtl ? 'ArrowLeft' : 'ArrowRight')) {
+        return 'deepen';
+    }
+    if (key === (isRtl ? 'ArrowRight' : 'ArrowLeft')) {
+        return 'shallow';
+    }
+    return null;
+}
+
+/**
+ * Builds the flat, DOM-ordered rows the drop resolver works on, EXCLUDING the lifted node
+ * (whose subtree is collapsed during the drag). Reads each row's live viewport rect.
+ *
+ * @param visible The tree's currently visible nodes, in DOM order.
+ * @param liftedValue The value of the node being dragged, filtered out of the result.
+ */
+function buildTreeDropRows(visible, liftedValue) {
+    return visible
+        .filter((e) => e.handle.value() !== liftedValue)
+        .map((e) => {
+        const rect = e.handle.host.getBoundingClientRect();
+        return {
+            value: e.handle.value(),
+            level: e.handle.level(),
+            left: rect.left,
+            top: rect.top,
+            bottom: rect.bottom,
+        };
+    });
+}
+/** The visible row's trimmed accessible label (its label element, else its text content). */
+function treeNodeLabel(entry) {
+    const labelEl = entry.handle.labelEl();
+    return (labelEl?.textContent ?? entry.handle.host.textContent ?? '').trim();
+}
+/**
+ * Whether a pointerdown inside `itemHost` may start a drag, honoring drag handles: when the
+ * item contains one or more registered handles, the press must land inside one; an item with
+ * no handle is grabbable anywhere.
+ *
+ * @param itemHost The `[forTreeItem]` host the press landed in.
+ * @param target The pointerdown event target.
+ * @param handles All registered drag-handle elements (across the whole tree).
+ */
+function isInsideGrabArea(itemHost, target, handles) {
+    const itemHandles = [...handles].filter((h) => itemHost.contains(h));
+    if (itemHandles.length === 0) {
+        return true;
+    }
+    return itemHandles.some((h) => h === target || h.contains(target));
+}
+/** The trimmed label for `parentValue`, or `null` when it has no row (root drop). */
+function treeParentLabel(visible, parentValue) {
+    if (parentValue === null) {
+        return null;
+    }
+    const entry = visible.find((e) => e.handle.value() === parentValue);
+    return entry ? treeNodeLabel(entry) : null;
+}
+/**
+ * Captures the lifted node's origin (value, parent, sibling index) from its position in the
+ * visible list, before any collapse-on-lift mutates the tree.
+ *
+ * @param visible The visible nodes at lift time, in DOM order.
+ * @param visibleIdx The lifted node's index within `visible`.
+ */
+function resolveTreeLiftContext(visible, visibleIdx) {
+    const entry = visible[visibleIdx];
+    if (!entry) {
+        return null;
+    }
+    const parentHost = entry.parentHost;
+    const parentEntry = parentHost ? visible.find((e) => e.handle.host === parentHost) : null;
+    const previousIndex = visible.filter((e) => e.parentHost === parentHost && visible.indexOf(e) < visibleIdx).length;
+    return {
+        value: entry.handle.value(),
+        parentValue: parentEntry ? parentEntry.handle.value() : null,
+        previousIndex,
+    };
+}
+/**
+ * Resolves the initial insertion gap after a collapse-on-lift re-renders the visible list.
+ * Pointer lifts clamp the original `visibleIdx` to the row count; keyboard lifts map it to the
+ * first row whose post-collapse visible index is at or past `visibleIdx` (`rows.length` if
+ * none), keeping the cursor where the focused node sat.
+ *
+ * @param rows The post-collapse drop rows (lifted node already excluded).
+ * @param visibleAfter The visible nodes after the collapse.
+ * @param visibleIdx The lifted node's index before the collapse.
+ * @param mode Whether the lift was started by pointer or keyboard.
+ */
+function resolveLiftGap(rows, visibleAfter, visibleIdx, mode) {
+    if (mode === 'pointer') {
+        return Math.min(visibleIdx, rows.length);
+    }
+    const gap = rows.findIndex((r) => {
+        const nextEntry = visibleAfter.find((e) => e.handle.value() === r.value);
+        return nextEntry && visibleAfter.indexOf(nextEntry) >= visibleIdx;
+    });
+    return gap < 0 ? rows.length : gap;
+}
+
+const POINTER_ARM_THRESHOLD_PX = 5;
+/** InjectionToken for the `[forTreeNodeDrag]` coordinator. */
+const FOR_TREE_NODE_DRAG_CONTEXT = new InjectionToken('FOR_TREE_NODE_DRAG_CONTEXT');
+/**
+ * Root-level drag-drop coordinator for `ForTree`. Apply on the same element as `[forTree]` to
+ * enable reordering and re-parenting of tree nodes by pointer and keyboard.
+ *
+ * Keyboard: focus a node, then press Ctrl+Space (or Cmd+Space) to lift. While lifted, ArrowUp/Down
+ * move the sibling position, ArrowRight/Left change depth, Space/Enter drops, Escape cancels.
+ *
+ * Pointer: drag any enabled item to a new position; an optional `[forTreeNodeDragHandle]` on an
+ * item constrains the grab area.
+ *
+ * The `(nodeDrop)` output fires once per committed move. Apply `moveTreeNode` in the handler to
+ * update the consumer's data. Provide a `[canDrop]` function to veto specific moves.
+ */
+class ForTreeNodeDrag {
+    #ctx = injectTreeContext('ForTreeNodeDrag');
+    #hostEl = inject(ElementRef).nativeElement;
+    #document = inject(DOCUMENT);
+    #isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+    #announcer = inject(LiveAnnouncer);
+    #destroyRef = inject(DestroyRef);
+    /** Disables all drag interactions on this tree. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Optional veto callback. Return `false` to reject a specific drop — the node is returned to its
+     * original position and an announcement is made. When omitted, all drops are accepted.
+     */
+    canDrop = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "canDrop" }] : /* istanbul ignore next */ []));
+    /** Emitted once per committed move. Apply `moveTreeNode` in the handler to update your data. */
+    nodeDrop = output();
+    _dragging = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dragging" }] : /* istanbul ignore next */ []));
+    _dropTargetValid = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dropTargetValid" }] : /* istanbul ignore next */ []));
+    _dropLevel = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dropLevel" }] : /* istanbul ignore next */ []));
+    #dropIndicator = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#dropIndicator" }] : /* istanbul ignore next */ []));
+    /** Resolved drop indicator while a drag is live; `null` when idle. */
+    dropIndicator = this.#dropIndicator.asReadonly();
+    #handles = new Set();
+    #mode = 'idle';
+    #liftedValue = null;
+    #previousParent = null;
+    #previousIndex = 0;
+    #gapIndex = 0;
+    #desiredLevel = 1;
+    #previewController = null;
+    #wasExpanded = false;
+    #liftedHost = null;
+    #label = '';
+    #pointerSession = null;
+    constructor() {
+        if (!this.#isBrowser) {
+            return;
+        }
+        createKeyboardDragMediator({
+            host: this.#hostEl,
+            isBrowser: this.#isBrowser,
+            destroyRef: this.#destroyRef,
+            isLifted: () => this.#mode === 'keyboard',
+            onIdleKeydown: (event) => this.#onIdleKeydown(event),
+            onLiftedKeydown: (event) => this.#handleLiftedKeydown(event),
+            onFocusOut: (event) => this.#onFocusout(event),
+        });
+        this.#pointerSession = createPointerDragSession({
+            host: this.#hostEl,
+            document: this.#document,
+            armThreshold: POINTER_ARM_THRESHOLD_PX,
+            canStart: (event) => this.#canStartPointer(event),
+            onLift: (event) => this.#onPointerLift(event),
+            onMove: (event) => this.#onPointerMove(event),
+            onCommit: (event) => this.#onPointerCommit(event),
+            onCancel: () => this.#cancelSession(true),
+        });
+        this.#destroyRef.onDestroy(() => {
+            this.#pointerSession?.destroy();
+            if (this.#mode !== 'idle') {
+                this.#cancelSession(false);
+            }
+        });
+    }
+    registerHandle(el) {
+        this.#handles.add(el);
+    }
+    unregisterHandle(el) {
+        this.#handles.delete(el);
+    }
+    #onIdleKeydown(event) {
+        if (this.#mode !== 'idle' || !isDragLiftKey(event)) {
+            return;
+        }
+        if (this.disabled() || this.#ctx.disabled()) {
+            return;
+        }
+        const target = event.target;
+        const visible = this.#ctx.visibleNodes();
+        const entry = visible.find((e) => e.handle.host === target);
+        if (!entry || entry.handle.disabled()) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        this.#lift(entry.handle.host, visible.indexOf(entry), visible, 'keyboard');
+    }
+    #handleLiftedKeydown(event) {
+        const action = resolveTreeDragLiftedAction(event, this.#ctx.dir());
+        if (action === null) {
+            return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        if (action === 'cancel') {
+            this.#cancelSession(true);
+            return;
+        }
+        if (action === 'commit') {
+            this.#commitSession();
+            return;
+        }
+        const visible = this.#ctx.visibleNodes();
+        if (action === 'down') {
+            this.#gapIndex = Math.min(this.#gapIndex + 1, buildTreeDropRows(visible, this.#liftedValue).length);
+        }
+        else if (action === 'up') {
+            this.#gapIndex = Math.max(this.#gapIndex - 1, 0);
+        }
+        else if (action === 'deepen') {
+            this.#desiredLevel++;
+        }
+        else {
+            this.#desiredLevel = Math.max(1, this.#desiredLevel - 1);
+        }
+        this.#resolveAndAnnounceMove(visible);
+    }
+    #onFocusout(event) {
+        if (this.#mode !== 'keyboard') {
+            return;
+        }
+        const related = event.relatedTarget;
+        if (related && this.#hostEl.contains(related)) {
+            return;
+        }
+        this.#cancelSession(true);
+    }
+    #canStartPointer(event) {
+        if (this.disabled() || this.#ctx.disabled() || event.button !== 0) {
+            return false;
+        }
+        const target = event.target;
+        const itemHost = target.closest('[forTreeItem]');
+        if (!itemHost) {
+            return false;
+        }
+        const entry = this.#ctx.visibleNodes().find((e) => e.handle.host === itemHost);
+        if (!entry || entry.handle.disabled()) {
+            return false;
+        }
+        if (!isInsideGrabArea(itemHost, target, this.#handles)) {
+            return false;
+        }
+        this.#liftedHost = itemHost;
+        return true;
+    }
+    #onPointerLift(event) {
+        if (!this.#liftedHost) {
+            return false;
+        }
+        const visible = this.#ctx.visibleNodes();
+        const idx = visible.findIndex((e) => e.handle.host === this.#liftedHost);
+        if (idx < 0) {
+            this.#liftedHost = null;
+            return false;
+        }
+        this.#lift(this.#liftedHost, idx, visible, 'pointer', {
+            x: event.clientX,
+            y: event.clientY,
+        });
+        return true;
+    }
+    #applyPointerPosition(event) {
+        const rows = buildTreeDropRows(this.#ctx.visibleNodes(), this.#liftedValue);
+        this.#gapIndex = gapFromPointerY(rows, event.clientY);
+        this.#desiredLevel = levelFromPointerX(rows, this.#gapIndex, event.clientX);
+        return rows;
+    }
+    #onPointerMove(event) {
+        if (this.#mode !== 'pointer') {
+            return;
+        }
+        const rows = this.#applyPointerPosition(event);
+        const target = resolveTreeDrop(rows, this.#gapIndex, this.#desiredLevel);
+        this.#publishDropTarget(rows, target.level);
+        this.#previewController?.moveTo({ x: event.clientX, y: event.clientY });
+    }
+    #onPointerCommit(event) {
+        if (this.#mode !== 'pointer') {
+            return;
+        }
+        this.#applyPointerPosition(event);
+        this.#commitSession();
+    }
+    #lift(host, visibleIdx, visible, mode, point) {
+        const entry = visible[visibleIdx];
+        const origin = resolveTreeLiftContext(visible, visibleIdx);
+        if (!entry || !origin) {
+            return;
+        }
+        this.#liftedValue = origin.value;
+        this.#previousParent = origin.parentValue;
+        this.#previousIndex = origin.previousIndex;
+        this.#wasExpanded = this.#ctx.isExpanded(origin.value);
+        this.#label = treeNodeLabel(entry);
+        this.#mode = mode;
+        this.#liftedHost = host;
+        if (this.#wasExpanded) {
+            this.#ctx.setExpanded(origin.value, false);
+        }
+        if (mode === 'pointer' && point) {
+            this.#previewController = new PreviewController({
+                source: host,
+                point,
+                preview: null,
+                doc: this.#document,
+                boundary: null,
+                lockAxis: () => null,
+            });
+        }
+        const visibleAfter = this.#ctx.visibleNodes();
+        const rows = buildTreeDropRows(visibleAfter, this.#liftedValue);
+        this.#gapIndex = resolveLiftGap(rows, visibleAfter, visibleIdx, mode);
+        this.#desiredLevel = entry.handle.level();
+        this._dragging.set(true);
+        this.#publishDropTarget(rows, this.#desiredLevel);
+        this.#announcer.announce(announceTreeLift(this.#label), 'assertive');
+    }
+    #publishDropTarget(rows, level) {
+        this._dropTargetValid.set(true);
+        this._dropLevel.set(level);
+        this.#dropIndicator.set(resolveDropIndicator(rows, this.#gapIndex, level));
+    }
+    #commitSession() {
+        if (this.#mode === 'idle' || this.#liftedValue === null) {
+            return;
+        }
+        const visible = this.#ctx.visibleNodes();
+        const rows = buildTreeDropRows(visible, this.#liftedValue);
+        const target = resolveTreeDrop(rows, this.#gapIndex, this.#desiredLevel);
+        const parentLabel = treeParentLabel(visible, target.parentValue);
+        const event = {
+            node: this.#liftedValue,
+            previousParent: this.#previousParent,
+            newParent: target.parentValue,
+            previousIndex: this.#previousIndex,
+            currentIndex: target.index,
+        };
+        const veto = this.canDrop();
+        if (veto !== undefined && !veto(event)) {
+            this.#announcer.announce(announceTreeInvalid(this.#label), 'assertive');
+            this.#cancelSession(true);
+            return;
+        }
+        this.#restoreExpansion();
+        this.nodeDrop.emit(event);
+        this.#announcer.announce(announceTreeDrop(this.#label, parentLabel, target.index + 1, target.siblingCount + 1), 'assertive');
+        this.#clearSession();
+    }
+    #cancelSession(restore) {
+        if (restore) {
+            this.#restoreExpansion();
+            this.#announcer.announce(announceTreeCancel(this.#label), 'assertive');
+        }
+        this.#clearSession();
+    }
+    #restoreExpansion() {
+        if (this.#wasExpanded && this.#liftedValue !== null) {
+            this.#ctx.setExpanded(this.#liftedValue, true);
+        }
+    }
+    #clearSession() {
+        this.#mode = 'idle';
+        this.#liftedValue = null;
+        this.#previousParent = null;
+        this.#previousIndex = 0;
+        this.#gapIndex = 0;
+        this.#desiredLevel = 1;
+        this.#wasExpanded = false;
+        this.#liftedHost = null;
+        this.#label = '';
+        if (this.#previewController) {
+            this.#previewController.destroy();
+            this.#previewController = null;
+        }
+        this._dragging.set(false);
+        this._dropTargetValid.set(false);
+        this._dropLevel.set(null);
+        this.#dropIndicator.set(null);
+    }
+    #resolveAndAnnounceMove(visible) {
+        const rows = buildTreeDropRows(visible, this.#liftedValue);
+        const target = resolveTreeDrop(rows, this.#gapIndex, this.#desiredLevel);
+        this.#desiredLevel = target.level;
+        this.#publishDropTarget(rows, target.level);
+        const parentLabel = treeParentLabel(visible, target.parentValue);
+        this.#announcer.announce(announceTreeMove(this.#label, parentLabel, target.index + 1, target.siblingCount + 1), 'polite');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeNodeDrag, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTreeNodeDrag, isStandalone: true, selector: "[forTreeNodeDrag]", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, canDrop: { classPropertyName: "canDrop", publicName: "canDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeDrop: "nodeDrop" }, host: { properties: { "attr.data-dragging": "_dragging() ? \"\" : null", "attr.data-drop-target": "_dropTargetValid() ? \"\" : null", "style.--for-tree-drop-level": "_dropLevel()" } }, providers: [{ provide: FOR_TREE_NODE_DRAG_CONTEXT, useExisting: ForTreeNodeDrag }], exportAs: ["forTreeNodeDrag"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeNodeDrag, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTreeNodeDrag]',
+                    exportAs: 'forTreeNodeDrag',
+                    providers: [{ provide: FOR_TREE_NODE_DRAG_CONTEXT, useExisting: ForTreeNodeDrag }],
+                    host: {
+                        '[attr.data-dragging]': '_dragging() ? "" : null',
+                        '[attr.data-drop-target]': '_dropTargetValid() ? "" : null',
+                        '[style.--for-tree-drop-level]': '_dropLevel()',
+                    },
+                }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], canDrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "canDrop", required: false }] }], nodeDrop: [{ type: i0.Output, args: ["nodeDrop"] }] } });
+
+/**
+ * A single node in a `ForTree`. Carries the `role="treeitem"`, its ARIA state
+ * (`aria-expanded` only when a `[forTreeItemToggle]` is registered, plus
+ * `aria-selected` / `aria-level` / `aria-setsize` / `aria-posinset`), the
+ * roving tab stop, and the full keyboard interaction.
+ *
+ * Apply on the structural element (typically `<li forTreeItem>`); place a
+ * `[forTreeItemLabel]` inside as the pointer target and a `[forTreeGroup]`
+ * (behind `@if`) for children.
+ */
+class ForTreeItem {
+    #tree = injectTreeContext('ForTreeItem');
+    #container = injectTreeContainerContext('ForTreeItem');
+    #host = inject(ElementRef);
+    #drag = inject(FOR_TREE_NODE_DRAG_CONTEXT, { optional: true });
+    /** Stable identifier for this node, mirrored into `[(value)]` / `[(expanded)]`. */
+    value = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    /** Disables this node: not selectable, skipped by keyboard navigation. */
+    disabled = input(false, { ...(ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
+    /**
+     * Typeahead text source override. Falls back to the `[forTreeItemLabel]`
+     * element's text content when empty (default).
+     */
+    textValue = input('', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "textValue" }] : /* istanbul ignore next */ []));
+    /**
+     * Virtualized path: zero-based absolute index in the flattened visible-node list.
+     * Leave unset (default `null`) outside the virtualized path.
+     */
+    itemIndex = input(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "itemIndex" }] : /* istanbul ignore next */ []));
+    /**
+     * Virtualized path: tree depth of this node (1-based, matching `aria-level`).
+     * When set, overrides the container-derived level in the virtualized path.
+     * Leave unset outside the virtualized path.
+     */
+    _levelInput = input(null, { ...(ngDevMode ? { debugName: "_levelInput" } : /* istanbul ignore next */ {}), alias: 'level' });
+    /**
+     * Virtualized path: total number of siblings at this node's level (matching
+     * `aria-setsize`). When set, overrides the container-derived setsize in the
+     * virtualized path. Leave unset outside the virtualized path.
+     */
+    _setSizeInput = input(null, { ...(ngDevMode ? { debugName: "_setSizeInput" } : /* istanbul ignore next */ {}), alias: 'setSize' });
+    /**
+     * Virtualized path: 1-based position among siblings at this node's level
+     * (matching `aria-posinset`). When set, overrides the container-derived
+     * posinset in the virtualized path. Leave unset outside the virtualized path.
+     */
+    _posInSetInput = input(null, { ...(ngDevMode ? { debugName: "_posInSetInput" } : /* istanbul ignore next */ {}), alias: 'posInSet' });
+    #toggleCount = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#toggleCount" }] : /* istanbul ignore next */ []));
+    #childContainer = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#childContainer" }] : /* istanbul ignore next */ []));
+    #labelEl = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#labelEl" }] : /* istanbul ignore next */ []));
+    id = hostId('for-tree-item');
+    #virtualized = computed(() => this.#tree.totalCount() !== undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "#virtualized" }] : /* istanbul ignore next */ []));
+    /** True once a `[forTreeItemToggle]` registers, marking the node a parent (D4). */
+    expandable = computed(() => this.#toggleCount() > 0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expandable" }] : /* istanbul ignore next */ []));
+    expanded = computed(() => this.#tree.isExpanded(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []));
+    selected = computed(() => this.#tree.isSelected(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+    /** True when the root tree is in `'checkbox'` selection mode. */
+    checkboxMode = computed(() => this.#tree.selectionMode() === 'checkbox', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkboxMode" }] : /* istanbul ignore next */ []));
+    /**
+     * Tri-state checkbox status of this node — `'true'` / `'false'`, or `'mixed'`
+     * when cascade is on and only some descendants are checked. Drives the
+     * checkbox anatomy; meaningful only in `selectionMode="checkbox"`.
+     */
+    checkState = computed(() => this.#tree.checkState(this.value()), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "checkState" }] : /* istanbul ignore next */ []));
+    /**
+     * True when this node is the current keyboard-focused / active candidate.
+     * In the roving-tabindex path tracks DOM focus; in the virtualized
+     * activedescendant path tracks `aria-activedescendant`. Reflected as
+     * `data-highlighted`.
+     */
+    highlighted = computed(() => {
+        const activeId = this.#tree.activeDescendantId();
+        if (activeId !== null)
+            return activeId === this.id();
+        return this.#tree.roving.active() === this.#host.nativeElement;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "highlighted" }] : /* istanbul ignore next */ []));
+    effectiveDisabled = computed(() => this.disabled() || this.#tree.disabled(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+    /**
+     * Drop-indicator hook for `[forTreeNodeDrag]`: `'before'` / `'after'` when a live drag would
+     * land adjacent to this row, `null` otherwise (and always `null` without a drag coordinator).
+     * Reflected as `data-drop-position`.
+     */
+    _dropPosition = computed(() => {
+        const indicator = this.#drag?.dropIndicator();
+        if (!indicator || indicator.anchor !== this.value()) {
+            return null;
+        }
+        return indicator.position;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "_dropPosition" }] : /* istanbul ignore next */ []));
+    level = computed(() => this.#virtualized() ? (this._levelInput() ?? this.#container.level()) : this.#container.level(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    posinset = computed(() => this.#virtualized()
+        ? (this._posInSetInput() ?? this.#container.indexOfHost(this.#host.nativeElement) + 1)
+        : this.#container.indexOfHost(this.#host.nativeElement) + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "posinset" }] : /* istanbul ignore next */ []));
+    setsize = computed(() => this.#virtualized()
+        ? (this._setSizeInput() ?? this.#container.items().length)
+        : this.#container.items().length, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "setsize" }] : /* istanbul ignore next */ []));
+    tabindex = computed(() => {
+        if (this.effectiveDisabled()) {
+            return -1;
+        }
+        if (this.#virtualized()) {
+            return -1;
+        }
+        if (this.#tree.roving.hasActive()) {
+            return this.#tree.roving.tabindexFor(this.#host.nativeElement);
+        }
+        if (this.selected()) {
+            return 0;
+        }
+        if (this.#tree.value().length > 0) {
+            return -1;
+        }
+        return this.#tree.isFirstFocusableItem(this.#host.nativeElement) ? 0 : -1;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tabindex" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const handle = {
+            host: this.#host.nativeElement,
+            value: this.value,
+            disabled: this.effectiveDisabled,
+            expandable: this.expandable,
+            childContainer: this.#childContainer.asReadonly(),
+            textValue: this.textValue,
+            labelEl: this.#labelEl.asReadonly(),
+            id: this.id,
+            itemIndex: this.itemIndex,
+            level: this.level,
+        };
+        registerHandle(handle, (h) => this.#container.registerItem(h), (h) => this.#container.unregisterItem(h), 'afterNextRender');
+    }
+    registerToggle() {
+        this.#toggleCount.update((n) => n + 1);
+        return () => this.#toggleCount.update((n) => n - 1);
+    }
+    setChildContainer(container) {
+        this.#childContainer.set(container);
+    }
+    setLabel(el) {
+        this.#labelEl.set(el);
+    }
+    toggle() {
+        if (!this.expandable() || this.effectiveDisabled()) {
+            return;
+        }
+        this.#tree.setExpanded(this.value(), !this.expanded());
+    }
+    select() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        this.#tree.select(this.value());
+    }
+    focusItem() {
+        if (this.effectiveDisabled()) {
+            return;
+        }
+        if (this.#virtualized()) {
+            this.#tree.notifyItemClick(this.id());
+            return;
+        }
+        this.#tree.roving.focusActive(this.#host.nativeElement);
+    }
+    onFocus() {
+        if (this.effectiveDisabled() || this.#virtualized()) {
+            return;
+        }
+        this.#tree.roving.setActive(this.#host.nativeElement);
+    }
+    onPointerDown(event) {
+        if (!this.#virtualized())
+            return;
+        event.preventDefault();
+    }
+    onKeyDown(event) {
+        const host = this.#host.nativeElement;
+        // Tree items nest, so a keydown on a descendant bubbles through every
+        // ancestor treeitem. Only the focused item (the event target) acts.
+        if (event.target !== host || this.effectiveDisabled()) {
+            return;
+        }
+        const tree = this.#tree;
+        if (tree.multiple()) {
+            if ((event.ctrlKey || event.metaKey) &&
+                !event.shiftKey &&
+                !event.altKey &&
+                (event.key === 'a' || event.key === 'A')) {
+                event.preventDefault();
+                tree.selectAll();
+                return;
+            }
+            if (event.shiftKey && !event.ctrlKey && !event.metaKey && !event.altKey) {
+                const action = resolveListNavigation(event, {
+                    orientation: tree.orientation(),
+                    dir: tree.dir(),
+                });
+                if (action === 'next' || action === 'prev') {
+                    event.preventDefault();
+                    tree.extendByArrow(host, action);
+                    return;
+                }
+                if (event.key === ' ' || event.key === 'Spacebar') {
+                    event.preventDefault();
+                    tree.selectRangeToFocused(host);
+                    return;
+                }
+            }
+        }
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            tree.select(this.value());
+            return;
+        }
+        if (event.key === ' ' || event.key === 'Spacebar') {
+            event.preventDefault();
+            tree.select(this.value());
+            return;
+        }
+        if (event.key === '*') {
+            event.preventDefault();
+            tree.expandSiblings(host);
+            return;
+        }
+        const action = resolveListNavigation(event, {
+            orientation: tree.orientation(),
+            dir: tree.dir(),
+        });
+        if (action) {
+            event.preventDefault();
+            tree.navigate(host, action);
+            return;
+        }
+        const intent = resolveTreeExpandCollapse(event, {
+            orientation: tree.orientation(),
+            dir: tree.dir(),
+        });
+        if (intent === 'expand') {
+            event.preventDefault();
+            tree.expandOrEnter(host);
+            return;
+        }
+        if (intent === 'collapse') {
+            event.preventDefault();
+            tree.collapseOrLeave(host);
+            return;
+        }
+        tree.handleTypeahead(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItem, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.2", type: ForTreeItem, isStandalone: true, selector: "[forTreeItem]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, textValue: { classPropertyName: "textValue", publicName: "textValue", isSignal: true, isRequired: false, transformFunction: null }, itemIndex: { classPropertyName: "itemIndex", publicName: "itemIndex", isSignal: true, isRequired: false, transformFunction: null }, _levelInput: { classPropertyName: "_levelInput", publicName: "level", isSignal: true, isRequired: false, transformFunction: null }, _setSizeInput: { classPropertyName: "_setSizeInput", publicName: "setSize", isSignal: true, isRequired: false, transformFunction: null }, _posInSetInput: { classPropertyName: "_posInSetInput", publicName: "posInSet", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "treeitem" }, listeners: { "keydown": "onKeyDown($event)", "focus": "onFocus()", "pointerdown": "onPointerDown($event)" }, properties: { "id": "id()", "attr.aria-expanded": "expandable() ? (expanded() ? \"true\" : \"false\") : null", "attr.aria-checked": "checkboxMode() ? checkState() : null", "attr.aria-selected": "checkboxMode() ? null : (selected() ? \"true\" : \"false\")", "attr.aria-level": "level()", "attr.aria-setsize": "setsize()", "attr.aria-posinset": "posinset()", "attr.aria-disabled": "effectiveDisabled() ? \"true\" : null", "attr.tabindex": "tabindex()", "attr.data-state": "expandable() ? (expanded() ? \"open\" : \"closed\") : null", "attr.data-selected": "selected() ? \"\" : null", "attr.data-highlighted": "highlighted() ? \"\" : null", "attr.data-disabled": "effectiveDisabled() ? \"\" : null", "attr.data-checked": "checkboxMode() ? checkState() : null", "attr.data-drop-position": "_dropPosition()" } }, providers: [{ provide: FOR_TREE_ITEM_CONTEXT, useExisting: ForTreeItem }], exportAs: ["forTreeItem"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItem, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTreeItem]',
+                    exportAs: 'forTreeItem',
+                    host: {
+                        role: 'treeitem',
+                        '[id]': 'id()',
+                        '[attr.aria-expanded]': 'expandable() ? (expanded() ? "true" : "false") : null',
+                        '[attr.aria-checked]': 'checkboxMode() ? checkState() : null',
+                        '[attr.aria-selected]': 'checkboxMode() ? null : (selected() ? "true" : "false")',
+                        '[attr.aria-level]': 'level()',
+                        '[attr.aria-setsize]': 'setsize()',
+                        '[attr.aria-posinset]': 'posinset()',
+                        '[attr.aria-disabled]': 'effectiveDisabled() ? "true" : null',
+                        '[attr.tabindex]': 'tabindex()',
+                        '[attr.data-state]': 'expandable() ? (expanded() ? "open" : "closed") : null',
+                        '[attr.data-selected]': 'selected() ? "" : null',
+                        '[attr.data-highlighted]': 'highlighted() ? "" : null',
+                        '[attr.data-disabled]': 'effectiveDisabled() ? "" : null',
+                        '[attr.data-checked]': 'checkboxMode() ? checkState() : null',
+                        '[attr.data-drop-position]': '_dropPosition()',
+                        '(keydown)': 'onKeyDown($event)',
+                        '(focus)': 'onFocus()',
+                        '(pointerdown)': 'onPointerDown($event)',
+                    },
+                    providers: [{ provide: FOR_TREE_ITEM_CONTEXT, useExisting: ForTreeItem }],
+                }]
+        }], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], textValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "textValue", required: false }] }], itemIndex: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemIndex", required: false }] }], _levelInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "level", required: false }] }], _setSizeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "setSize", required: false }] }], _posInSetInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "posInSet", required: false }] }] } });
+
+/**
+ * Pointer target for a `ForTreeItem` and the default typeahead text source.
+ * Clicking it selects the node and moves roving focus to the `treeitem`
+ * (focus stays on the item, never on the label). Place the
+ * `[forTreeItemToggle]` and the node's visible text inside it.
+ */
+class ForTreeItemLabel {
+    #item = injectTreeItemContext('ForTreeItemLabel');
+    #host = inject(ElementRef);
+    constructor() {
+        this.#item.setLabel(this.#host.nativeElement);
+        inject(DestroyRef).onDestroy(() => this.#item.setLabel(null));
+    }
+    onClick() {
+        this.#item.select();
+        this.#item.focusItem();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItemLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTreeItemLabel, isStandalone: true, selector: "[forTreeItemLabel]", host: { listeners: { "click": "onClick()" } }, exportAs: ["forTreeItemLabel"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItemLabel, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTreeItemLabel]',
+                    exportAs: 'forTreeItemLabel',
+                    host: {
+                        '(click)': 'onClick()',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Optional expand / collapse control inside a `ForTreeItem`. Its mere presence
+ * marks the item as a parent (D4): a `treeitem` emits `aria-expanded` /
+ * `data-state` only when a toggle is registered, so leaves (no toggle) emit
+ * neither — matching the APG "end nodes lack `aria-expanded`" rule.
+ *
+ * Decorative: the enclosing `treeitem` owns `aria-expanded`, so the toggle is
+ * `aria-hidden` and not separately focusable. Clicking it toggles expansion
+ * without selecting the node.
+ */
+class ForTreeItemToggle {
+    item = injectTreeItemContext('ForTreeItemToggle');
+    constructor() {
+        const unregister = this.item.registerToggle();
+        inject(DestroyRef).onDestroy(unregister);
+    }
+    onClick(event) {
+        event.stopPropagation();
+        this.item.toggle();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItemToggle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTreeItemToggle, isStandalone: true, selector: "[forTreeItemToggle]", host: { attributes: { "type": "button", "tabindex": "-1", "aria-hidden": "true" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-state": "item.expanded() ? \"open\" : \"closed\"" } }, exportAs: ["forTreeItemToggle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItemToggle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTreeItemToggle]',
+                    exportAs: 'forTreeItemToggle',
+                    host: {
+                        type: 'button',
+                        tabindex: '-1',
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'item.expanded() ? "open" : "closed"',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Nested container (`role="group"`) holding a parent node's child
+ * `ForTreeItem`s. Rendered behind `@if` so a collapsed parent drops its group
+ * entirely. Its `level` is one deeper than the enclosing item, and it
+ * registers itself as that item's child container so the root can flatten the
+ * visible nodes.
+ *
+ * @example
+ * ```html
+ * @if (n.children?.length && isExpanded(n.id)) {
+ *   <ul forTreeGroup>
+ *     @for (child of n.children; track child.id) { ... }
+ *   </ul>
+ * }
+ * ```
+ */
+class ForTreeGroup {
+    #parentItem = injectTreeItemContext('ForTreeGroup');
+    #items = new Collection();
+    items = this.#items.items;
+    level = computed(() => this.#parentItem.level() + 1, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "level" }] : /* istanbul ignore next */ []));
+    constructor() {
+        this.#parentItem.setChildContainer(this);
+        inject(DestroyRef).onDestroy(() => this.#parentItem.setChildContainer(null));
+    }
+    registerItem(handle) {
+        this.#items.register(handle);
+    }
+    unregisterItem(handle) {
+        this.#items.unregister(handle);
+    }
+    indexOfHost(el) {
+        return this.#items.indexOfHost(el);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeGroup, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTreeGroup, isStandalone: true, selector: "[forTreeGroup]", host: { attributes: { "role": "group" } }, providers: [{ provide: FOR_TREE_CONTAINER_CONTEXT, useExisting: ForTreeGroup }], exportAs: ["forTreeGroup"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeGroup, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTreeGroup]',
+                    exportAs: 'forTreeGroup',
+                    host: {
+                        role: 'group',
+                    },
+                    providers: [{ provide: FOR_TREE_CONTAINER_CONTEXT, useExisting: ForTreeGroup }],
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Visible checkbox surface inside a `ForTreeItem`, used in the tree's
+ * `selectionMode="checkbox"` anatomy. Decorative for assistive tech — the
+ * enclosing `treeitem` owns `aria-checked`, so this element is `aria-hidden`
+ * and not separately focusable. Reflects `data-state="checked" | "unchecked" |
+ * "indeterminate"` for styling. Clicking it toggles the node's selection and
+ * moves roving focus to the node; place a `[forTreeItemCheckboxIndicator]`
+ * inside for the glyph.
+ */
+class ForTreeItemCheckbox {
+    item = injectTreeItemContext('ForTreeItemCheckbox');
+    dataState = computed(() => {
+        const state = this.item.checkState();
+        return state === 'true' ? 'checked' : state === 'mixed' ? 'indeterminate' : 'unchecked';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+    onClick(event) {
+        event.stopPropagation();
+        this.item.select();
+        this.item.focusItem();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItemCheckbox, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTreeItemCheckbox, isStandalone: true, selector: "[forTreeItemCheckbox]", host: { attributes: { "aria-hidden": "true" }, listeners: { "click": "onClick($event)" }, properties: { "attr.data-state": "dataState()" } }, exportAs: ["forTreeItemCheckbox"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItemCheckbox, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTreeItemCheckbox]',
+                    exportAs: 'forTreeItemCheckbox',
+                    host: {
+                        'aria-hidden': 'true',
+                        '[attr.data-state]': 'dataState()',
+                        '(click)': 'onClick($event)',
+                    },
+                }]
+        }] });
+
+/**
+ * Optional glyph slot inside a `[forTreeItemCheckbox]`. Shows while the node
+ * is checked or indeterminate (`data-state="checked"` or `"indeterminate"`);
+ * self-hides only when fully unchecked. Hidden state is enforced with an inline
+ * `display: none` (which beats any author `display` rule applied via a class)
+ * in addition to the `hidden` attribute that removes it from the a11y tree.
+ * Mirrors `data-state="checked" | "unchecked" | "indeterminate"` from the item.
+ */
+class ForTreeItemCheckboxIndicator {
+    item = injectTreeItemContext('ForTreeItemCheckboxIndicator');
+    shown = computed(() => this.item.checkState() !== 'false', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "shown" }] : /* istanbul ignore next */ []));
+    dataState = computed(() => {
+        const state = this.item.checkState();
+        return state === 'true' ? 'checked' : state === 'mixed' ? 'indeterminate' : 'unchecked';
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "dataState" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItemCheckboxIndicator, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTreeItemCheckboxIndicator, isStandalone: true, selector: "[forTreeItemCheckboxIndicator]", host: { properties: { "attr.data-state": "dataState()", "attr.hidden": "shown() ? null : \"\"", "style.display": "shown() ? null : \"none\"" } }, exportAs: ["forTreeItemCheckboxIndicator"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeItemCheckboxIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTreeItemCheckboxIndicator]',
+                    exportAs: 'forTreeItemCheckboxIndicator',
+                    host: {
+                        '[attr.data-state]': 'dataState()',
+                        '[attr.hidden]': 'shown() ? null : ""',
+                        '[style.display]': 'shown() ? null : "none"',
+                    },
+                }]
+        }] });
+
+/**
+ * Returns the de-duplicated ancestor values that must be added to a tree's
+ * `expanded` set so every matched node becomes visible.
+ *
+ * Pure and headless: filtering stays consumer-owned — the consumer matches its
+ * own data, re-renders the tree, and feeds its hierarchy through `ancestorsOf`.
+ * Merge the result into `[(expanded)]`:
+ *
+ * ```ts
+ * this.expanded.update((open) => [
+ *   ...new Set([...open, ...expandToReveal(matches, this.ancestorsOf)]),
+ * ]);
+ * ```
+ *
+ * The matched nodes themselves are not returned — a node is made visible by
+ * expanding its ancestors, so a root-level match contributes nothing.
+ *
+ * @param matches The values of the nodes that matched the current filter.
+ * @param ancestorsOf Returns a node's ancestor values (the node itself excluded);
+ *   order is irrelevant and a root node returns an empty list.
+ * @returns The unique ancestor values to expand. Empty when `matches` is empty
+ *   or every match is a root.
+ */
+function expandToReveal(matches, ancestorsOf) {
+    const reveal = new Set();
+    for (const match of matches) {
+        for (const ancestor of ancestorsOf(match)) {
+            reveal.add(ancestor);
+        }
+    }
+    return [...reveal];
+}
+
+/**
+ * Optional drag handle for a tree node. When placed inside a tree item, it constrains the pointer
+ * grab area — only pointer events originating from within this element start a drag for that item.
+ * Has no effect on the keyboard drag path (Ctrl+Space on the focused item always works).
+ *
+ * @example
+ * ```html
+ * <li forTreeItem value="file">
+ *   <span forTreeNodeDragHandle aria-hidden="true">⠿</span>
+ *   <span forTreeItemLabel>File.txt</span>
+ * </li>
+ * ```
+ */
+class ForTreeNodeDragHandle {
+    constructor() {
+        const ctx = inject(FOR_TREE_NODE_DRAG_CONTEXT, { optional: true });
+        if (!ctx) {
+            throw new Error('[forty-cdk/tree] [forTreeNodeDragHandle] must be used inside a [forTreeNodeDrag] element.');
+        }
+        const el = inject(ElementRef).nativeElement;
+        ctx.registerHandle(el);
+        inject(DestroyRef).onDestroy(() => ctx.unregisterHandle(el));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeNodeDragHandle, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.2", type: ForTreeNodeDragHandle, isStandalone: true, selector: "[forTreeNodeDragHandle]", exportAs: ["forTreeNodeDragHandle"], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: ForTreeNodeDragHandle, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[forTreeNodeDragHandle]',
+                    exportAs: 'forTreeNodeDragHandle',
+                }]
+        }], ctorParameters: () => [] });
+
+function collectSubtreeIds(node, options) {
+    const ids = new Set();
+    ids.add(options.trackBy(node));
+    const kids = options.children(node) ?? [];
+    for (const child of kids) {
+        for (const id of collectSubtreeIds(child, options)) {
+            ids.add(id);
+        }
+    }
+    return ids;
+}
+function detachNode(roots, targetId, options) {
+    for (let i = 0; i < roots.length; i++) {
+        const node = roots[i];
+        if (options.trackBy(node) === targetId) {
+            const next = [...roots.slice(0, i), ...roots.slice(i + 1)];
+            return { found: node, roots: next };
+        }
+        const kids = options.children(node) ?? [];
+        if (kids.length > 0) {
+            const childResult = detachNode(kids, targetId, options);
+            if (childResult !== null) {
+                const updatedNode = options.withChildren(node, childResult.roots);
+                const next = [...roots.slice(0, i), updatedNode, ...roots.slice(i + 1)];
+                return { found: childResult.found, roots: next };
+            }
+        }
+    }
+    return null;
+}
+function insertNode(roots, parentId, index, nodeToInsert, options) {
+    if (parentId === null) {
+        const clamped = Math.max(0, Math.min(index, roots.length));
+        return [...roots.slice(0, clamped), nodeToInsert, ...roots.slice(clamped)];
+    }
+    for (let i = 0; i < roots.length; i++) {
+        const node = roots[i];
+        if (options.trackBy(node) === parentId) {
+            const kids = options.children(node) ?? [];
+            const clamped = Math.max(0, Math.min(index, kids.length));
+            const newKids = [...kids.slice(0, clamped), nodeToInsert, ...kids.slice(clamped)];
+            const updated = options.withChildren(node, newKids);
+            return [...roots.slice(0, i), updated, ...roots.slice(i + 1)];
+        }
+        const kids = options.children(node) ?? [];
+        if (kids.length > 0) {
+            const result = insertNode(kids, parentId, index, nodeToInsert, options);
+            if (result !== null) {
+                const updated = options.withChildren(node, result);
+                return [...roots.slice(0, i), updated, ...roots.slice(i + 1)];
+            }
+        }
+    }
+    return null;
+}
+/**
+ * Applies a {@link ForTreeDragDropEvent} to a nested, consumer-owned tree, returning a new roots
+ * array. Pure and immutable — never mutates `roots` or any node. Detaches `event.node` from its
+ * current parent and re-inserts it (with its subtree) under `event.newParent` at
+ * `event.currentIndex` (or among the roots when `newParent` is `null`). Returns a shallow copy of
+ * `roots` unchanged when the move is a no-op or invalid (node not found, or `newParent` is the node
+ * itself or one of its descendants).
+ */
+function moveTreeNode(roots, options) {
+    const { event } = options;
+    const detachResult = detachNode(roots, event.node, options);
+    if (detachResult === null) {
+        return [...roots];
+    }
+    const { found, roots: rootsAfterDetach } = detachResult;
+    if (event.newParent !== null) {
+        const subtreeIds = collectSubtreeIds(found, options);
+        if (subtreeIds.has(event.newParent)) {
+            return [...roots];
+        }
+        if (event.newParent === event.node) {
+            return [...roots];
+        }
+    }
+    const result = insertNode(rootsAfterDetach, event.newParent, event.currentIndex, found, options);
+    if (result === null) {
+        return [...roots];
+    }
+    return result;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FOR_TREE_CONTAINER_CONTEXT, FOR_TREE_CONTEXT, FOR_TREE_DEFAULTS, FOR_TREE_ITEM_CONTEXT, FOR_TREE_NODE_DRAG_CONTEXT, ForTree, ForTreeGroup, ForTreeItem, ForTreeItemCheckbox, ForTreeItemCheckboxIndicator, ForTreeItemLabel, ForTreeItemToggle, ForTreeNodeDrag, ForTreeNodeDragHandle, expandToReveal, moveTreeNode, provideForTreeDefaults };
+//# sourceMappingURL=forty-cdk-tree.mjs.map