cursedbelt 0.0.0 → 2.3.0

package/dist/react/file-tree/FileTree.js

@@ -0,0 +1,796 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { describeDrop, descendantIdsOf, filterFileTree, flattenFileTree, matchTypeahead, resolveDrop, resolveKeyboardMove, } from '../../core/file-tree/fileTreeModel';
+import { Input } from '../components/Input';
+import { Tooltip } from '../components/Tooltip';
+import './fileTree.css';
+/** How far a press travels before it stops being a click and becomes a drag. */
+const DRAG_THRESHOLD = 4;
+/** How near the top or bottom of the list the pointer scrolls it. */
+const AUTOSCROLL_EDGE = 36;
+/** How fast it scrolls while held there, in px per tick. */
+const AUTOSCROLL_STEP = 12;
+/**
+ * How long something hovers a shut folder before it opens itself.
+ *
+ * Without this a collapsed folder is a folder nothing can be dropped into, which is the
+ * state most folders in a long list are in. 600ms is the Finder and Explorer figure — long
+ * enough that passing over a folder on the way somewhere else does not open it.
+ */
+const SPRING_OPEN_MS = 600;
+/** How long a typeahead word survives a pause. One second is what every file explorer uses. */
+const TYPEAHEAD_RESET_MS = 1000;
+const NO_OFFER = { target: null, refused: false, reason: null };
+/**
+ * The default marks — a consumer that wants kind-specific icons passes `renderIcon`.
+ *
+ * 🔴 A FILE gets a glyph and a FOLDER's is optional, which is the opposite of what a tree
+ * usually does and is deliberate. The twisty already says folder-ness and open-ness, so a
+ * folder icon beside it is a second glyph saying the same thing — the owner's own note on
+ * the tree this was ported from: *"a different look matching vscode (no folder icons for
+ * example)"*. Both are still overridable per row.
+ *
+ * 🔴 Since 2026-09-10 the twisty and the icon share ONE column, and since 2026-09-11 every
+ * folder draws a twisty — so the folder branch below is reached only by a row that opted out
+ * with `expandable: false`. In practice this function answers for FILES.
+ */
+function DefaultIcon({ node, open }) {
+    if (node.kind !== 'folder')
+        return (_jsxs("svg", { className: 'cbft-icon cbft-icon-file', viewBox: '0 0 16 16', "aria-hidden": 'true', children: [_jsx("title", { children: "File" }), _jsx("path", { d: 'M3.5 1.5h5.3l3.7 3.7v9.3a1 1 0 0 1-1 1h-8a1 1 0 0 1-1-1v-12a1 1 0 0 1 1-1z' }), _jsx("path", { d: 'M8.8 1.5v3.7h3.7', className: 'cbft-icon-file-fold' })] }));
+    return (_jsxs("svg", { className: 'cbft-icon cbft-icon-folder', viewBox: '0 0 16 16', "aria-hidden": 'true', children: [_jsx("title", { children: open ? 'Open folder' : 'Folder' }), _jsx("path", { d: 'M1.5 4a1 1 0 0 1 1-1h3.2l1.3 1.5h6.5a1 1 0 0 1 1 1v6.5a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1z' })] }));
+}
+/**
+ * What a row draws in its one glyph box: a thumbnail if it has one, otherwise its icon.
+ *
+ * 🔴 The fallback fires ONCE and is then permanent for that URL (`failed`, keyed by `src`).
+ * Re-pointing `src` from inside `onError` is an infinite request loop on a slow connection,
+ * and a tree is the surface where that costs most — every row in view retries at the same
+ * time. This is the same contract `media-gallery`'s `ThumbImg`/`DocThumb` settled on, for
+ * the same reason: a derived thumbnail's ABSENCE is a normal state (the renderer may not have
+ * run yet), not an error, so the honest picture of "no thumbnail" and "no thumbnail yet" is
+ * the type icon in both cases — never a broken-image glyph.
+ *
+ * `loading='lazy'` and `decoding='async'` because the consumer hands over a URL per row and a
+ * 2,000-row tree must not open 2,000 connections to draw the twelve rows on screen.
+ */
+function RowGlyph({ node, open, renderIcon, }) {
+    const [failed, setFailed] = useState(null);
+    const icon = renderIcon ? renderIcon(node) : _jsx(DefaultIcon, { node: node, open: open });
+    const src = node.thumbnailUrl;
+    if (!src || failed === src)
+        return icon;
+    return (_jsx("img", { className: 'cbft-thumb', src: src, alt: '', "aria-hidden": 'true', loading: 'lazy', decoding: 'async', draggable: false, onError: () => setFailed(src) }, src));
+}
+export function FileTree({ nodes, selectedId, onSelect, onOpen, collapsed: collapsedProp, onCollapsedChange, onMove, allowReorder = false, lockedReason, canDrop, unavailableReason, renamingId, onRenameStart, onRename, onRenameCancel, onDelete, draft, onDraftCommit, onDraftCancel, onRowMenu, renderTools, renderIcon, renderAccessory, onDropExternal, acceptsExternalDrag, filter, empty = 'Nothing here yet.', ariaLabel = 'Files', className, }) {
+    const scrollRef = useRef(null);
+    const rowRefs = useRef(new Map());
+    const autoScroll = useRef(null);
+    const spring = useRef(null);
+    /** Folders this drag opened by hovering, to shut again if it never drops. */
+    const sprung = useRef([]);
+    const typeahead = useRef({ word: '', at: 0 });
+    /**
+     * Swallow the `click` a finished drag leaves behind.
+     *
+     * 🔴 A pointerdown and a pointerup on the same row still produce a click even when the
+     * pointer travelled the length of the list in between — and with `setPointerCapture` the
+     * click is delivered to the row the gesture STARTED on whatever it ended over. So without
+     * this, dropping a row into a folder also selects the row that was dropped, which in a
+     * consumer that navigates on select means the drag takes you somewhere. The drag is the
+     * gesture; the click is debris from it.
+     */
+    const draggedJustNow = useRef(false);
+    const [ownCollapsed, setOwnCollapsed] = useState([]);
+    const collapsed = collapsedProp ?? ownCollapsed;
+    const setCollapsed = useCallback((next) => {
+        if (collapsedProp === undefined)
+            setOwnCollapsed(next);
+        onCollapsedChange?.(next);
+    }, [collapsedProp, onCollapsedChange]);
+    const [drag, setDrag] = useState(null);
+    const [focusedId, setFocusedId] = useState(null);
+    /** The row an EXTERNAL drag is over, drawn with the same marker an internal one uses. */
+    const [externalOverId, setExternalOverId] = useState(null);
+    /**
+     * The last thing a KEYBOARD move said, for the live region.
+     *
+     * A pointer drag states its refusal on the chip while the row is still in the air; ⌥← on a
+     * top-level row has no chip and nowhere else to say "it is already at the top level", so a
+     * keyboard route with no voice would be a control that silently does nothing — the exact
+     * reading of "broken" this tree's whole drop design exists to avoid.
+     */
+    const [notice, setNotice] = useState('');
+    const shown = useMemo(() => (filter ? filterFileTree(nodes, filter) : nodes), [nodes, filter]);
+    /*
+     * A search shows everything it kept — a match hidden inside a collapsed folder is a match
+     * the person cannot see, which reads as "not found".
+     */
+    const rows = useMemo(() => flattenFileTree(shown, filter ? [] : collapsed), [shown, collapsed, filter]);
+    /**
+     * The folders between the root and the selected row, and the shut one HOLDING it.
+     *
+     * A tree with most of its folders shut says nothing about where you are, and the one state
+     * where that matters most is the state where the selected row is not drawn at all. So the
+     * path is marked (`data-ancestor`) and the folder actually holding the selection is marked
+     * more strongly (`data-holds-open`) — which is also the thing the reveal below scrolls to
+     * when the row itself does not exist on screen.
+     *
+     * Computed over the whole tree rather than over `rows`, because a shut folder's children
+     * are not in `rows` — which is exactly the case this is for.
+     */
+    const openPath = useMemo(() => {
+        const path = new Set();
+        let holder = null;
+        if (selectedId === null)
+            return { path, holder };
+        const walk = (list, ancestors) => {
+            for (const node of list) {
+                if (node.id === selectedId) {
+                    for (const id of ancestors)
+                        path.add(id);
+                    holder = ancestors.at(-1) ?? null;
+                    return true;
+                }
+                if (node.children && walk(node.children, [...ancestors, node.id]))
+                    return true;
+            }
+            return false;
+        };
+        walk(shown, []);
+        return { path, holder };
+    }, [shown, selectedId]);
+    /**
+     * How many siblings a row has, by parent — `aria-setsize`, without an O(n²) scan per row.
+     *
+     * Every sibling of a visible row is itself visible (a shut folder hides its children, never
+     * its peers), so counting the rows on screen is counting the level.
+     */
+    const setSizes = useMemo(() => {
+        const counts = new Map();
+        for (const row of rows) {
+            const key = row.parentId ?? '';
+            counts.set(key, (counts.get(key) ?? 0) + 1);
+        }
+        return counts;
+    }, [rows]);
+    const toggle = useCallback((id) => {
+        const set = new Set(collapsed);
+        if (set.has(id))
+            set.delete(id);
+        else
+            set.add(id);
+        setCollapsed([...set]);
+    }, [collapsed, setCollapsed]);
+    const openFolder = useCallback((id) => {
+        if (!collapsed.includes(id))
+            return false;
+        setCollapsed(collapsed.filter((c) => c !== id));
+        return true;
+    }, [collapsed, setCollapsed]);
+    /**
+     * Bring the selected row into view — the explorer's *reveal*.
+     *
+     * 🔴 Every other cue for "where am I" is worth nothing in the one case that matters most:
+     * a long list where the selected row is eight hundred pixels above the fold. A consumer
+     * changes `selectedId` from a command palette, a tab, a Back button, a deep link or a
+     * recents list — all of them **without the pointer ever going near the tree** — so nothing
+     * was scrolling it. `cursedesk`'s tree has had this since it was written and this one did
+     * not, which would have made adopting it a regression on a 200-row library.
+     *
+     * Three deliberate limits, each of which VS Code gets right or wrong depending on a setting:
+     *
+     * 1. 🔴 **A shut folder stays shut.** Its `data-holds-open` marker is scrolled to instead.
+     *    Auto-expanding is what `explorer.autoReveal` does and it is the behaviour people turn
+     *    off, because it silently undoes a collapse they chose — and `collapsed` here is often
+     *    a CONTROLLED value the consumer persists, so expanding would write it open for good.
+     * 2. **Only when the row is not already visible.** A list that jumps a few pixels every
+     *    time you click a row you can already see reads as a bug.
+     * 3. **Never mid-drag.** Scrolling the list under a drag moves the drop target out from
+     *    under the pointer.
+     */
+    /*
+     * 🔴 The dependency list is deliberately neither what this reads nor a superset of it.
+     *
+     * `selectedId` is not read in the body at all — the row is found through the DOM, because
+     * `data-holds-open` is the answer precisely when the selected row has none — but it is the
+     * one thing whose CHANGE should reveal. And `drag` IS read, as a guard rather than a
+     * trigger: adding it would reveal the moment a drag ends, which is limit 3 above.
+     */
+    // biome-ignore lint/correctness/useExhaustiveDependencies: `selectedId` is the trigger and not a read; `drag` is a guard and not a trigger — see just above.
+    useEffect(() => {
+        const scroller = scrollRef.current;
+        if (!scroller || drag?.active)
+            return;
+        const row = scroller.querySelector('.cbft-row[data-selected]') ??
+            scroller.querySelector('.cbft-row[data-holds-open]');
+        if (!row?.scrollIntoView)
+            return;
+        const box = row.getBoundingClientRect();
+        const frame = scroller.getBoundingClientRect();
+        if (box.top >= frame.top && box.bottom <= frame.bottom)
+            return;
+        // `nearest` on both axes: the least movement that makes the row visible, and no sideways
+        // travel in a list that does not scroll sideways.
+        row.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+    }, [selectedId]);
+    // ── The drag ──────────────────────────────────────────────────────────────────────────
+    const stopAutoScroll = useCallback(() => {
+        if (!autoScroll.current)
+            return;
+        clearInterval(autoScroll.current.timer);
+        autoScroll.current = null;
+    }, []);
+    const stopSpring = useCallback(() => {
+        if (!spring.current)
+            return;
+        clearTimeout(spring.current.timer);
+        spring.current = null;
+    }, []);
+    /** The row under a client point, and how far down it the pointer is. */
+    const rowAt = useCallback((x, y) => {
+        for (const row of rows) {
+            const el = rowRefs.current.get(row.node.id);
+            if (!el)
+                continue;
+            const box = el.getBoundingClientRect();
+            if (y >= box.top && y <= box.bottom && x >= box.left && x <= box.right)
+                return { row, ratio: box.height > 0 ? (y - box.top) / box.height : 0.5 };
+        }
+        return null;
+    }, [rows]);
+    const endDrag = useCallback((commit, state) => {
+        stopAutoScroll();
+        stopSpring();
+        // Whatever happens next, a gesture that actually travelled owes the row a swallowed
+        // click — see `draggedJustNow`. Set for a cancelled drag too: the click arrives either
+        // way, and Escape landing you on a different row would be its own surprise.
+        if (state?.active)
+            draggedJustNow.current = true;
+        if (commit && state?.active && state.offer.target && onMove) {
+            onMove(state.id, state.offer.target);
+            sprung.current = [];
+        }
+        else if (sprung.current.length > 0) {
+            // A drag that opened folders on its way and then went nowhere puts them back — the
+            // tree it leaves behind must be the tree it found.
+            const shut = new Set(collapsed);
+            for (const id of sprung.current)
+                shut.add(id);
+            sprung.current = [];
+            setCollapsed([...shut]);
+        }
+        setDrag(null);
+    }, [collapsed, onMove, setCollapsed, stopAutoScroll, stopSpring]);
+    const beginDrag = useCallback((event, node) => {
+        // A row the consumer marked undraggable never starts a gesture — see
+        // `FileTreeNode.draggable`. A drag that refuses everywhere reads as a broken tree.
+        if (!onMove || event.button !== 0 || node.draggable === false)
+            return;
+        const startX = event.clientX;
+        const startY = event.clientY;
+        let state = {
+            id: node.id,
+            startX,
+            startY,
+            x: startX,
+            y: startY,
+            active: false,
+            offer: NO_OFFER,
+        };
+        const target = event.currentTarget;
+        target.setPointerCapture?.(event.pointerId);
+        const move = (moveEvent) => {
+            const travelled = Math.abs(moveEvent.clientX - startX) + Math.abs(moveEvent.clientY - startY);
+            if (!state.active && travelled < DRAG_THRESHOLD)
+                return;
+            const hit = rowAt(moveEvent.clientX, moveEvent.clientY);
+            const offer = resolveDrop({
+                nodes: shown,
+                row: hit?.row ?? null,
+                offsetRatio: hit?.ratio ?? 0.5,
+                dragId: node.id,
+                allowReorder,
+                ...(lockedReason ? { lockedReason } : {}),
+                ...(canDrop ? { canDrop } : {}),
+            });
+            // Spring-open: a shut folder held over long enough opens itself, so a collapsed
+            // branch is not a branch nothing can be filed into.
+            const over = hit?.row.node;
+            const shut = over && over.kind === 'folder' && collapsed.includes(over.id);
+            if (!shut || spring.current?.id !== over?.id)
+                stopSpring();
+            if (shut && over && !spring.current) {
+                spring.current = {
+                    id: over.id,
+                    timer: setTimeout(() => {
+                        spring.current = null;
+                        if (openFolder(over.id))
+                            sprung.current.push(over.id);
+                    }, SPRING_OPEN_MS),
+                };
+            }
+            // Autoscroll near the edges, so a drag can reach a row that is off screen.
+            const box = scrollRef.current?.getBoundingClientRect();
+            const direction = !box
+                ? 0
+                : moveEvent.clientY < box.top + AUTOSCROLL_EDGE
+                    ? -1
+                    : moveEvent.clientY > box.bottom - AUTOSCROLL_EDGE
+                        ? 1
+                        : 0;
+            if (direction === 0)
+                stopAutoScroll();
+            else if (autoScroll.current?.direction !== direction) {
+                stopAutoScroll();
+                autoScroll.current = {
+                    direction,
+                    timer: setInterval(() => {
+                        scrollRef.current?.scrollBy({ top: direction * AUTOSCROLL_STEP });
+                    }, 16),
+                };
+            }
+            state = { ...state, x: moveEvent.clientX, y: moveEvent.clientY, active: true, offer };
+            setDrag(state);
+        };
+        const finish = (commit) => () => {
+            target.releasePointerCapture?.(event.pointerId);
+            target.removeEventListener('pointermove', move);
+            target.removeEventListener('pointerup', up);
+            target.removeEventListener('pointercancel', cancel);
+            window.removeEventListener('keydown', abort);
+            endDrag(commit, state);
+        };
+        const up = finish(true);
+        const cancel = finish(false);
+        /*
+         * 🔴 Escape puts the row back — the way out of a gesture you did not mean to start.
+         *
+         * Every drag surface has it and this one did not: the only way to abandon a drag here
+         * was to find somewhere the tree refuses and release there, which is a thing you have
+         * to already understand the rules to do. `pointercancel` fires when the SYSTEM takes
+         * the pointer away, never when a person changes their mind.
+         *
+         * On `window` rather than the row, because a pointer capture is in force and the
+         * keyboard's focus is wherever it was before the press — quite possibly not this tree.
+         * It is removed by `finish` on every exit path, including this one.
+         */
+        const abort = (keyEvent) => {
+            if (keyEvent.key !== 'Escape')
+                return;
+            keyEvent.preventDefault();
+            cancel();
+        };
+        target.addEventListener('pointermove', move);
+        target.addEventListener('pointerup', up);
+        target.addEventListener('pointercancel', cancel);
+        window.addEventListener('keydown', abort);
+    }, [
+        allowReorder,
+        canDrop,
+        collapsed,
+        endDrag,
+        lockedReason,
+        onMove,
+        openFolder,
+        rowAt,
+        shown,
+        stopAutoScroll,
+        stopSpring,
+    ]);
+    // A drag abandoned by a re-render — the folder deleted in another tab, the list replaced
+    // under the pointer — must not leave a marker behind.
+    useEffect(() => {
+        if (drag && !rows.some((r) => r.node.id === drag.id))
+            setDrag(null);
+    }, [drag, rows]);
+    useEffect(() => () => {
+        stopAutoScroll();
+        stopSpring();
+    }, [stopAutoScroll, stopSpring]);
+    // ── The keyboard ──────────────────────────────────────────────────────────────────────
+    const focusRow = useCallback((id) => {
+        setFocusedId(id);
+        if (id)
+            rowRefs.current.get(id)?.focus();
+    }, []);
+    /*
+     * ── The keyboard comes back from a rename ─────────────────────────────────────────────
+     *
+     * Owner, of the tree this one was ported from: *"I clicked a file, pressed enter, changed
+     * the title, pressed enter, and it saved. Then I pressed enter and it should have started
+     * renaming again but didn't. I think the focus gets lost on saving a rename."*
+     *
+     * The word "lost" is literal: committing unmounts the `<input>` that had focus, and a
+     * browser hands focus to `<body>` when that happens. `<body>` is not in the tree, so the
+     * next Enter goes to the application — which has no answer for it — rather than to the row
+     * that was just renamed. Every key this tree defines is gone until something is clicked.
+     *
+     * 🔴 **Only when focus was actually lost.** Blur commits too, so the ordinary way to end a
+     * rename is to click something else, and stealing focus back would undo that click.
+     * `document.body` (or nothing at all) is the signature of the unmount; anything else means
+     * a person is already somewhere on purpose.
+     */
+    const wasRenaming = useRef(null);
+    useEffect(() => {
+        const previous = wasRenaming.current;
+        wasRenaming.current = renamingId ?? null;
+        if (!previous || renamingId)
+            return;
+        const active = document.activeElement;
+        if (active && active !== document.body)
+            return;
+        focusRow(previous);
+    }, [renamingId, focusRow]);
+    const onKeyDown = useCallback((event, row) => {
+        if (renamingId)
+            return;
+        const index = rows.findIndex((r) => r.node.id === row.node.id);
+        const step = (delta) => {
+            const next = rows[Math.min(rows.length - 1, Math.max(0, index + delta))];
+            if (next)
+                focusRow(next.node.id);
+        };
+        /*
+         * The keyboard's route to the row's own menu — see {@link FileTreeProps.onRowMenu}.
+         * Before the switch, because `ContextMenu` and Shift+F10 are not arrow keys and the
+         * shelf is deliberately not a tab stop that could answer them itself.
+         */
+        if (onRowMenu && (event.key === 'ContextMenu' || (event.shiftKey && event.key === 'F10'))) {
+            event.preventDefault();
+            const box = rowRefs.current.get(row.node.id)?.getBoundingClientRect();
+            onRowMenu(row.node, { x: box?.right ?? 0, y: box?.bottom ?? 0 });
+            return;
+        }
+        /*
+         * ⌥→ and ⌥← MOVE the focused row — the keyboard's half of the drag, and the only half
+         * that exists on touch (a press-and-drag there scrolls the list, so the gesture is
+         * deliberately not offered). See `resolveKeyboardMove` for what the two directions mean
+         * and why there is no ⌥↑/⌥↓.
+         *
+         * 🔴 Before the arrow cases below, so one key never means two things. Everything else
+         * in this handler is bare-key, which is what keeps ⇧⏎/⌘F and the rest free for the app.
+         */
+        if (onMove &&
+            event.altKey &&
+            !event.metaKey &&
+            !event.ctrlKey &&
+            (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
+            event.preventDefault();
+            const offer = resolveKeyboardMove({
+                nodes: shown,
+                rows,
+                row,
+                direction: event.key === 'ArrowRight' ? 'in' : 'out',
+                ...(lockedReason ? { lockedReason } : {}),
+                ...(canDrop ? { canDrop } : {}),
+            });
+            if (offer.target) {
+                setNotice(describeDrop(shown, offer.target));
+                onMove(row.node.id, offer.target);
+            }
+            else {
+                setNotice(offer.reason ?? '');
+            }
+            return;
+        }
+        switch (event.key) {
+            case 'ArrowDown':
+                event.preventDefault();
+                step(1);
+                return;
+            case 'ArrowUp':
+                event.preventDefault();
+                step(-1);
+                return;
+            case 'ArrowRight':
+                event.preventDefault();
+                // Open, then step in — the two halves of "go deeper", in the order every tree
+                // control uses them.
+                if (row.expandable && !row.expanded)
+                    toggle(row.node.id);
+                else if (row.expandable)
+                    step(1);
+                return;
+            case 'ArrowLeft': {
+                event.preventDefault();
+                if (row.expandable && row.expanded)
+                    toggle(row.node.id);
+                else if (row.parentId)
+                    focusRow(row.parentId);
+                return;
+            }
+            case 'Home':
+                event.preventDefault();
+                if (rows[0])
+                    focusRow(rows[0].node.id);
+                return;
+            case 'End':
+                event.preventDefault();
+                if (rows.at(-1))
+                    focusRow(rows.at(-1).node.id);
+                return;
+            /*
+              ── The keys VS Code taught everybody ───────────────────────────────────────────
+    
+              🔴 **Enter renames, and it can only take Enter because Space still opens.**
+              Owner, 2026-09-08, comparing this tree to the spreadsheet's: *"press enter to
+              rename files"*. VS Code's explorer binds it exactly this way on macOS, with F2
+              everywhere, and it costs nothing here because ' ' below is a second, equal way to
+              open the row — a tree that gave rename to Enter and left no other open key would
+              be trading one gesture for another.
+    
+              Only when `onRenameStart` is wired. A consumer that cannot rename keeps Enter as
+              "open", so this moves nobody who had not asked for it.
+    
+              Bare Enter only: ⇧⏎/⌥⏎/⌘⏎ stay free for whatever the app around this puts on them,
+              the same way the typeahead below refuses modified keys.
+            */
+            case 'Enter':
+                event.preventDefault();
+                if (onRenameStart &&
+                    !event.altKey &&
+                    !event.metaKey &&
+                    !event.ctrlKey &&
+                    !event.shiftKey) {
+                    onRenameStart(row.node);
+                    return;
+                }
+                (onOpen ?? onSelect)(row.node);
+                return;
+            case ' ':
+                event.preventDefault();
+                // The other half of the Enter split above: where Enter has been taken for rename,
+                // Space inherits exactly what Enter used to do. Where it has not, Space keeps the
+                // plain select it has always been — so a consumer without rename sees no change
+                // to either key.
+                (onRenameStart ? (onOpen ?? onSelect) : onSelect)(row.node);
+                return;
+            case 'F2':
+                event.preventDefault();
+                onRenameStart?.(row.node);
+                return;
+            // ⌫, Delete, and ⌘⌫ — the macOS chord arrives as `Backspace` + `metaKey`, so it is
+            // this branch and not a fourth one. See {@link FileTreeProps.onDelete}.
+            case 'Backspace':
+            case 'Delete':
+                if (!onDelete)
+                    return;
+                event.preventDefault();
+                onDelete(row.node);
+                return;
+            default:
+                break;
+        }
+        // Typeahead: `bud` jumps to `budget-2026`. One printable character, no modifiers.
+        if (event.key.length !== 1 || event.metaKey || event.ctrlKey || event.altKey)
+            return;
+        const now = Date.now();
+        const word = now - typeahead.current.at > TYPEAHEAD_RESET_MS
+            ? event.key
+            : typeahead.current.word + event.key;
+        typeahead.current = { word, at: now };
+        const found = matchTypeahead(rows, word, index);
+        if (found >= 0) {
+            event.preventDefault();
+            focusRow(rows[found].node.id);
+        }
+    }, [
+        canDrop,
+        focusRow,
+        lockedReason,
+        onDelete,
+        onMove,
+        onOpen,
+        onRenameStart,
+        onRowMenu,
+        onSelect,
+        renamingId,
+        rows,
+        shown,
+        toggle,
+    ]);
+    // ── External drags (Finder files, gallery tiles) ──────────────────────────────────────
+    const externalWanted = useCallback((event) => Boolean(onDropExternal) && (acceptsExternalDrag?.(event) ?? true), [acceptsExternalDrag, onDropExternal]);
+    /**
+     * 🔴 An external drag springs a shut folder open too (2026-09-11).
+     *
+     * It did not until this date, and that made a whole class of destination UNREACHABLE. The
+     * internal pointer drag has had spring-open since it was ported, for the reason stated at
+     * {@link SPRING_OPEN_MS}: *"a collapsed folder is a folder nothing can be dropped into,
+     * which is the state most folders in a long list are in."* Every word of that is equally
+     * true of a tile dragged out of a gallery — and a gallery is exactly where a person is
+     * standing when they decide a file belongs somewhere else.
+     *
+     * Owner, 2026-09-11: *"In collections Allow dragging a media file from the content area
+     * into a different folder."* The gesture was wired end to end and worked — onto a folder
+     * that was already open. A folder nested inside a shut one could not be reached at all, and
+     * from the outside the two are the same complaint.
+     *
+     * The folders it opens are remembered in `sprung` and PUT BACK if the drag ends without a
+     * drop, which is the same contract the internal drag holds: the tree a drag leaves behind
+     * must be the tree it found. `dragleave`/`drop`/`dragend` all land in `endExternalDrag`,
+     * because a drag abandoned outside the window fires only the last of those.
+     */
+    const endExternalDrag = useCallback((dropped) => {
+        stopSpring();
+        setExternalOverId(null);
+        if (sprung.current.length === 0)
+            return;
+        if (dropped) {
+            // It landed. The folders it opened on the way are where the file now IS, so leaving
+            // them open is what shows the person the move happened.
+            sprung.current = [];
+            return;
+        }
+        const shut = new Set(collapsed);
+        for (const id of sprung.current)
+            shut.add(id);
+        sprung.current = [];
+        setCollapsed([...shut]);
+    }, [collapsed, setCollapsed, stopSpring]);
+    const externalHandlers = (node) => onDropExternal
+        ? {
+            onDragOver: (event) => {
+                if (!externalWanted(event))
+                    return;
+                // Both, and in this order: `preventDefault` is what makes the element a drop
+                // target at all, and without it the browser's own "no entry" cursor stays.
+                event.preventDefault();
+                event.stopPropagation();
+                setExternalOverId(node?.id ?? null);
+                // 🔴 `dragover` fires continuously while the pointer rests, so the timer is armed
+                // once per folder and cleared the moment the pointer moves to a different row —
+                // otherwise every frame restarts the countdown and it never fires at all.
+                const shut = node?.kind === 'folder' && collapsed.includes(node.id);
+                if (!shut || spring.current?.id !== node?.id)
+                    stopSpring();
+                if (shut && node && !spring.current) {
+                    spring.current = {
+                        id: node.id,
+                        timer: setTimeout(() => {
+                            spring.current = null;
+                            if (openFolder(node.id))
+                                sprung.current.push(node.id);
+                        }, SPRING_OPEN_MS),
+                    };
+                }
+            },
+            onDragLeave: () => {
+                setExternalOverId((current) => (current === (node?.id ?? null) ? null : current));
+                // Only the row's OWN countdown, not the whole gesture: leaving one row for the
+                // next is the ordinary case, and `endExternalDrag` here would put every sprung
+                // folder back while the drag is still in the air.
+                if (spring.current?.id === node?.id)
+                    stopSpring();
+            },
+            onDrop: (event) => {
+                if (!externalWanted(event))
+                    return;
+                event.preventDefault();
+                event.stopPropagation();
+                endExternalDrag(true);
+                onDropExternal(node, event);
+            },
+            // The drag left the window, or was abandoned — the only event that fires when a
+            // drop happens somewhere this tree never sees.
+            onDragEnd: () => endExternalDrag(false),
+        }
+        : {};
+    // ── Drawing ───────────────────────────────────────────────────────────────────────────
+    const dropId = drag?.active && drag.offer.target?.kind === 'into' ? drag.offer.target.parentId : null;
+    const dragging = drag?.active ? descendantIdsOf(shown, drag.id) : null;
+    /**
+     * The unnamed row, at whatever depth it is being made at.
+     *
+     * A function rather than an element so the two placements below — nested under a parent,
+     * or at the root — cannot drift into drawing two different things.
+     */
+    const draftRow = (depth) => (_jsxs("div", { className: 'cbft-row cbft-row-draft', style: { '--cbft-depth': depth }, children: [_jsx("span", { className: 'cbft-slot', "aria-hidden": 'true', children: renderIcon ? (renderIcon({ id: '', name: '', kind: 'folder' })) : (_jsx(DefaultIcon, { node: { id: '', name: '', kind: 'folder' }, open: false })) }), nameField('', (value) => onDraftCommit?.(value), () => onDraftCancel?.())] }));
+    const nameField = (initial, commit, cancel) => (_jsx(Input, { className: 'cbft-name-input', defaultValue: initial, autoFocus: true, "aria-label": 'Name', onFocus: (event) => event.currentTarget.select(), onClick: (event) => event.stopPropagation(), onPointerDown: (event) => event.stopPropagation(), onBlur: (event) => {
+            const value = event.currentTarget.value.trim();
+            if (!value || value === initial)
+                cancel();
+            else
+                commit(value);
+        }, onKeyDown: (event) => {
+            event.stopPropagation();
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                cancel();
+            }
+            else if (event.key === 'Enter') {
+                event.preventDefault();
+                const value = event.currentTarget.value.trim();
+                if (!value || value === initial)
+                    cancel();
+                else
+                    commit(value);
+            }
+        } }));
+    return (_jsxs("div", { className: `cbft${className ? ` ${className}` : ''}`, children: [_jsx("div", { className: 'cbft-scroll', ref: scrollRef, ...externalHandlers(null), onPointerUp: () => {
+                    // Releasing over the blank space means the top level; the pointer capture keeps
+                    // the row's own listeners running, so this only has to not swallow the event.
+                }, children: _jsxs("div", { role: 'tree', "aria-label": ariaLabel, className: `cbft-list${drag?.active ? ' cbft-list-dragging' : ''}`, children: [rows.length === 0 && !draft ? _jsx("div", { className: 'cbft-empty', children: empty }) : null, draft && draft.parentId === null ? draftRow(0) : null, rows.map((row) => {
+                            const { node } = row;
+                            const isSelected = node.id === selectedId;
+                            const isRenaming = renamingId === node.id;
+                            const isDragged = dragging?.has(node.id) === true;
+                            const isDropTarget = dropId === node.id || externalOverId === node.id;
+                            const marker = drag?.active && drag.offer.target && 'siblingId' in drag.offer.target
+                                ? drag.offer.target.siblingId === node.id
+                                    ? drag.offer.target.kind
+                                    : null
+                                : null;
+                            const rowBody = (_createElement("div", { role: 'treeitem', "aria-selected": isSelected, "aria-level": row.depth + 1, "aria-posinset": row.index + 1, "aria-setsize": setSizes.get(row.parentId ?? '') ?? 1, ...(row.expandable ? { 'aria-expanded': row.expanded } : {}), tabIndex: node.id === (focusedId ?? selectedId ?? rows[0]?.node.id) ? 0 : -1, ref: (el) => {
+                                    if (el)
+                                        rowRefs.current.set(node.id, el);
+                                    else
+                                        rowRefs.current.delete(node.id);
+                                }, key: node.id, className: 'cbft-row', "data-selected": isSelected || undefined, "data-dragged": isDragged || undefined, "data-into": isDropTarget || undefined, "data-marker": marker ?? undefined, "data-ancestor": openPath.path.has(node.id) || undefined, "data-holds-open": (row.expandable && !row.expanded && openPath.holder === node.id) || undefined, "data-access": node.access && node.access !== 'normal' ? node.access : undefined, style: { '--cbft-depth': row.depth }, onPointerDown: (event) => {
+                                    if (inTools(event.target))
+                                        return;
+                                    beginDrag(event, node);
+                                }, onClick: (event) => {
+                                    if (inTools(event.target))
+                                        return;
+                                    // The click a finished drag left behind — see `draggedJustNow`.
+                                    if (draggedJustNow.current) {
+                                        draggedJustNow.current = false;
+                                        return;
+                                    }
+                                    onSelect(node);
+                                }, onDoubleClick: (event) => {
+                                    if (inTools(event.target))
+                                        return;
+                                    (onOpen ?? onSelect)(node);
+                                }, onKeyDown: (event) => onKeyDown(event, row), onFocus: () => setFocusedId(node.id), ...externalHandlers(node) },
+                                row.expandable ? (_jsx("span", { className: 'cbft-twisty', "data-open": row.expanded || undefined, "aria-hidden": 'true', onPointerDown: (event) => event.stopPropagation(), onClick: (event) => {
+                                        event.stopPropagation();
+                                        toggle(node.id);
+                                    }, children: _jsx("svg", { viewBox: '0 0 24 24', width: '12', height: '12', fill: 'none', stroke: 'currentColor', strokeWidth: '2.2', strokeLinecap: 'round', strokeLinejoin: 'round', focusable: 'false', "aria-hidden": 'true', children: _jsx("path", { d: 'm9 6 6 6-6 6' }) }) })) : (_jsx("span", { className: 'cbft-slot', "aria-hidden": 'true', children: _jsx(RowGlyph, { node: node, open: row.expanded, ...(renderIcon ? { renderIcon } : {}) }) })),
+                                isRenaming && onRename ? (nameField(node.name, (value) => onRename(node, value), () => onRenameCancel?.())) : (_jsx(Tooltip, { content: node.name, children: _jsx("span", { className: 'cbft-name', children: node.name }) })),
+                                node.access === 'private' || node.access === 'locked' ? (_jsx(Tooltip, { content: node.access === 'locked'
+                                        ? 'Hidden — unlock to see what is in here'
+                                        : // Deliberately "this or what is in it": a consumer sets `private` both
+                                            // for a row that is itself private and for a public folder holding
+                                            // private children (collections does exactly that), and a wording that
+                                            // claimed only the first would be false on half the rows it marks.
+                                            'Private — this, or something in it, is hidden from a locked page', children: _jsx("span", { className: 'cbft-access', role: 'img', "aria-label": 'Private', children: "\uD83D\uDD12" }) })) : null,
+                                renderAccessory ? renderAccessory(node) : null,
+                                node.count !== undefined ? (_jsx("span", { className: 'cbft-count', children: node.count })) : null,
+                                renderTools ? _jsx("span", { className: 'cbft-tools', children: renderTools(node) }) : null));
+                            // The "why not" only exists while the tree genuinely cannot be rearranged;
+                            // wrapping every row in a tooltip otherwise would put a hint on a working
+                            // control saying nothing.
+                            const body = unavailableReason && !onMove ? (_jsx(Tooltip, { content: unavailableReason, children: rowBody }, node.id)) : (rowBody);
+                            // The draft belongs INSIDE the folder it is being made in, one level deeper —
+                            // see the note above the parentless case.
+                            return draft && draft.parentId === node.id ? (_jsxs(Fragment, { children: [body, draftRow(row.depth + 1)] }, node.id)) : (body);
+                        }), draft && draft.parentId !== null && !rows.some((r) => r.node.id === draft.parentId)
+                            ? draftRow(0)
+                            : null] }) }), drag?.active ? (_jsxs("div", { className: 'cbft-chip', "data-refused": drag.offer.refused || undefined, style: { left: `${drag.x}px`, top: `${drag.y}px` }, "aria-hidden": 'true', children: [_jsx("span", { className: 'cbft-chip-name', children: nameOf(shown, drag.id) }), _jsx("span", { className: 'cbft-chip-where', children: drag.offer.reason ?? describeDrop(shown, drag.offer.target) })] })) : null, _jsx("span", { className: 'cbft-sr', role: 'status', "aria-live": 'polite', children: drag?.active ? (drag.offer.reason ?? describeDrop(shown, drag.offer.target)) : notice })] }));
+}
+/**
+ * Whether an event landed on the consumer's own row controls.
+ *
+ * 🔴 Asked on the ROW rather than answered by handlers on the shelf. A container with an
+ * `onClick` that only calls `stopPropagation` is a static element the a11y rules correctly
+ * refuse — it looks interactive, announces nothing, and has no keyboard equivalent. The row
+ * bailing is the same behaviour said once, in the place that actually has the rule: a press
+ * on a tool must not select the row or start a drag.
+ */
+function inTools(target) {
+    return target instanceof Element && target.closest('.cbft-tools') !== null;
+}
+function nameOf(nodes, id) {
+    for (const node of nodes) {
+        if (node.id === id)
+            return node.name;
+        const found = node.children ? nameOf(node.children, id) : '';
+        if (found)
+            return found;
+    }
+    return '';
+}
+//# sourceMappingURL=FileTree.js.map