@iloveagents/foundry-web-ui 0.33.0 → 0.33.2

package/dist/components/sidebar.d.ts

@@ -1,7 +1,39 @@
 import { type ReactNode } from "react";
-import type { NavGroup } from "../lib/nav-config.js";
+import type { NavGroup, NavItemDnd } from "../lib/nav-config.js";
 declare function scrollNavRowIntoView(nav: HTMLElement, row: HTMLElement): void;
 export declare const _scrollNavRowIntoViewForTest: typeof scrollNavRowIntoView;
+/** Drop zone rendered inside expanded containers so users can move items back to the container root.
+ *
+ * The strip stays IN FLOW and reserves its full height for the whole drag:
+ * 4px at rest, 28px from the moment a drag begins until it ends, with the
+ * band filling exactly what was reserved. Growing on hover instead — the
+ * obvious design — fails in both of its available shapes:
+ *
+ *  - in flow, every row beneath jumps 24px at the exact moment the pointer
+ *    crosses the strip, which is the moment the user is aiming at one of
+ *    those rows. Dragging a file from a nested folder down to a sibling
+ *    crosses one strip per open container, so the destination walks away
+ *    from the cursor mid-drag (measured: 28px per crossing) and the drop
+ *    lands on whatever slid underneath. From the user's seat the gesture
+ *    simply does nothing, with no request made and nothing to read.
+ *  - out of flow, nothing moves, but the expanded band overlaps ~12px of
+ *    the rows on either side and, being positioned, takes their drops — a
+ *    moving target traded for a wrong one.
+ *
+ * Reserving for the whole drag settles the layout once, before the user has
+ * aimed at anything. The opening is deliberately NOT animated: a 150ms
+ * height transition is a moving target for 150ms, which is inside the time
+ * a short drag to a nearby row takes. Only the collapse animates, and by
+ * then nothing is being aimed at.
+ *
+ * Exported for its test only — it is not in the package barrel, and the
+ * invariants (in flow, reserved by the drag rather than the pointer, band
+ * == strip) are ones jsdom can check from the class names and nothing can
+ * check from the outside.
+ */
+export declare function ContainerDropZone({ dnd }: {
+    dnd: NavItemDnd;
+}): import("react/jsx-runtime").JSX.Element;
 interface SidebarViewProps {
     /** Display-only navigation override; the navigation registry remains intact. */
     groups?: NavGroup[];

package/dist/components/sidebar.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, } from "react";
 import { NavLink, useLocation, useNavigate } from "react-router";
 import { Ellipsis, Layers, PanelLeft, PanelLeftOpen, SquarePen, ChevronDown, ChevronRight, GripVertical, Plus, Upload, ChevronLeft, } from "lucide-react";
@@ -8,7 +8,7 @@ import { useToolPanelStore } from "../lib/tool-panel-store.js";
 import { useNewConversation } from "../lib/use-new-conversation.js";
 import { useNavStore } from "../lib/nav-store.js";
 import { useAppStore } from "../lib/app-store.js";
-import { getContainerDropZoneLabel, hasAnyDropTarget, hasExternalFilesData, } from "../lib/nav-dnd.js";
+import { beginNavDrag, subscribeNavDrag, getNavDragVersion, navDragAccepts, hasAnyDropTarget, hasExternalFilesData, } from "../lib/nav-dnd.js";
 import { TooltipIconButton } from "./tooltip-icon-button.js";
 import { Button } from "@iloveagents/foundry-web-primitives";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "../ui/dropdown-menu.js";
@@ -262,6 +262,12 @@ function useNavItemDnd(dnd) {
             return;
         e.dataTransfer.setData(dnd.type, data);
         e.dataTransfer.effectAllowed = "move";
+        // Container drop zones reserve their space for the whole drag rather
+        // than growing under the pointer — see `beginNavDrag`. The MIME type
+        // goes with it so only zones that would take THIS drag open, and the
+        // source element so its `dragend` is still heard if a nav refresh
+        // detaches this row mid-drag.
+        beginNavDrag(dnd.type, e.currentTarget);
     }, [dnd]);
     const onDragEnter = useCallback((e) => {
         if (!hasMatchingDragData(e))
@@ -359,57 +365,101 @@ function useNavItemDnd(dnd) {
             : {},
     };
 }
-/** Drop zone rendered inside expanded containers so users can move items back to the container root. */
-function ContainerDropZone({ dnd }) {
+/** Drop zone rendered inside expanded containers so users can move items back to the container root.
+ *
+ * The strip stays IN FLOW and reserves its full height for the whole drag:
+ * 4px at rest, 28px from the moment a drag begins until it ends, with the
+ * band filling exactly what was reserved. Growing on hover instead — the
+ * obvious design — fails in both of its available shapes:
+ *
+ *  - in flow, every row beneath jumps 24px at the exact moment the pointer
+ *    crosses the strip, which is the moment the user is aiming at one of
+ *    those rows. Dragging a file from a nested folder down to a sibling
+ *    crosses one strip per open container, so the destination walks away
+ *    from the cursor mid-drag (measured: 28px per crossing) and the drop
+ *    lands on whatever slid underneath. From the user's seat the gesture
+ *    simply does nothing, with no request made and nothing to read.
+ *  - out of flow, nothing moves, but the expanded band overlaps ~12px of
+ *    the rows on either side and, being positioned, takes their drops — a
+ *    moving target traded for a wrong one.
+ *
+ * Reserving for the whole drag settles the layout once, before the user has
+ * aimed at anything. The opening is deliberately NOT animated: a 150ms
+ * height transition is a moving target for 150ms, which is inside the time
+ * a short drag to a nearby row takes. Only the collapse animates, and by
+ * then nothing is being aimed at.
+ *
+ * Exported for its test only — it is not in the package barrel, and the
+ * invariants (in flow, reserved by the drag rather than the pointer, band
+ * == strip) are ones jsdom can check from the class names and nothing can
+ * check from the outside.
+ */
+export function ContainerDropZone({ dnd }) {
     const [isDragOver, setIsDragOver] = useState(false);
-    const [isFileDragOver, setIsFileDragOver] = useState(false);
     const dragCounter = useRef(0);
     const acceptsFiles = dnd.canDropFiles?.() ?? false;
     const acceptsEntities = dnd.canDrop();
+    // Whether this zone is open is the DRAG's business, not the pointer's:
+    // the band is reserved before the pointer reaches it, so hover can no
+    // longer say anything about what is being dragged. And reserving space
+    // and painting a label is a promise that a drop will land here — so a
+    // zone opens only for a drag it would accept, which the drag's own MIME
+    // types decide.
+    //
+    // The subscribed snapshot is a VERSION, not the types themselves: a MIME
+    // token may legally contain whatever character one joins them with, and a
+    // split on it turns one type into two. The predicate reads the set.
+    useSyncExternalStore(subscribeNavDrag, getNavDragVersion, () => 0);
+    const dragActive = navDragAccepts({ type: dnd.type, acceptsEntities });
     const hasExternalFiles = (e) => hasExternalFilesData(e.dataTransfer);
     const hasMatchingDragData = (e) => Boolean((acceptsEntities && e.dataTransfer.types.includes(dnd.type)) ||
         (acceptsFiles && hasExternalFiles(e)));
-    return (_jsx("div", { onDragEnter: (e) => {
-            if (!hasMatchingDragData(e))
-                return;
-            e.preventDefault();
-            dragCounter.current++;
-            setIsFileDragOver(hasExternalFiles(e));
-            setIsDragOver(true);
-        }, onDragLeave: () => {
-            dragCounter.current--;
-            if (dragCounter.current <= 0) {
+    return (_jsx("div", { className: cn("relative mx-2", 
+        // Reserved for the whole drag, so the rows below settle once —
+        // before the user has aimed — and never while they are aiming.
+        // The transition rides on the RESTING class, so the reservation
+        // opens instantly and only the collapse animates: an animated
+        // opening is a moving target for as long as it runs.
+        dragActive ? "mt-0 h-7" : "-mt-1 h-1 transition-[height,margin] duration-150"), children: _jsx("div", { onDragEnter: (e) => {
+                if (!hasMatchingDragData(e))
+                    return;
+                e.preventDefault();
+                // Hover state only — the band's size is the drag's business, not
+                // the pointer's. Opening it from here is the original bug: the row
+                // the user is aiming at slides away as they reach it.
+                dragCounter.current++;
+                setIsDragOver(true);
+            }, onDragLeave: () => {
+                dragCounter.current--;
+                if (dragCounter.current <= 0) {
+                    dragCounter.current = 0;
+                    setIsDragOver(false);
+                }
+            }, onDragOver: (e) => {
+                if (!hasMatchingDragData(e))
+                    return;
+                e.preventDefault();
+                e.dataTransfer.dropEffect = hasExternalFiles(e) ? "copy" : "move";
+            }, onDrop: async (e) => {
+                const files = Array.from(e.dataTransfer.files ?? []);
+                const draggedData = acceptsEntities ? e.dataTransfer.getData(dnd.type) : "";
+                const hasFiles = acceptsFiles && files.length > 0 && dnd.onFileDrop;
+                const hasEntityDrop = Boolean(acceptsEntities && draggedData);
+                if (!hasFiles && !hasEntityDrop)
+                    return;
+                e.preventDefault();
+                e.stopPropagation();
                 dragCounter.current = 0;
-                setIsFileDragOver(false);
                 setIsDragOver(false);
-            }
-        }, onDragOver: (e) => {
-            if (!hasMatchingDragData(e))
-                return;
-            e.preventDefault();
-            e.dataTransfer.dropEffect = hasExternalFiles(e) ? "copy" : "move";
-        }, onDrop: async (e) => {
-            const files = Array.from(e.dataTransfer.files ?? []);
-            const draggedData = acceptsEntities ? e.dataTransfer.getData(dnd.type) : "";
-            const hasFiles = acceptsFiles && files.length > 0 && dnd.onFileDrop;
-            const hasEntityDrop = Boolean(acceptsEntities && draggedData);
-            if (!hasFiles && !hasEntityDrop)
-                return;
-            e.preventDefault();
-            e.stopPropagation();
-            dragCounter.current = 0;
-            setIsFileDragOver(false);
-            setIsDragOver(false);
-            if (hasFiles) {
-                await dnd.onFileDrop(files);
-                return;
-            }
-            await dnd.onDrop(draggedData);
-        }, className: cn("relative mx-2 rounded-md overflow-hidden", isDragOver
-            ? cn("h-7 flex items-center justify-center gap-1", isFileDragOver
-                ? "bg-primary/10 border border-dashed border-primary"
-                : "bg-primary/10 border border-dashed border-primary/30")
-            : "-mt-1 h-1"), children: isDragOver && (_jsxs(_Fragment, { children: [isFileDragOver && _jsx(Upload, { className: "size-3 text-primary" }), _jsx("span", { className: "text-[10px] text-primary/70", children: getContainerDropZoneLabel(isFileDragOver) })] })) }));
+                if (hasFiles) {
+                    await dnd.onFileDrop(files);
+                    return;
+                }
+                await dnd.onDrop(draggedData);
+            }, className: cn(
+            // Fills the reserved strip exactly: what is painted is what
+            // accepts a drop, and nothing extends over a neighbouring row.
+            "h-full w-full rounded-md overflow-hidden", dragActive && "flex items-center justify-center", isDragOver && "bg-primary/10 border border-dashed border-primary/30"), children: dragActive && (_jsx("span", { className: cn("text-[10px] transition-colors", isDragOver ? "text-primary/70" : "text-sidebar-foreground/35"), children: "Move to root" })) }) }));
 }
 /**
  * Leading disclosure cell on every nav row — the Confluence page-tree

package/dist/lib/nav-dnd.d.ts

@@ -5,4 +5,112 @@ export declare function hasExternalFilesData(dataTransfer: {
     } | null;
 }): boolean;
 export declare function hasAnyDropTarget(isDropTarget: boolean, isFileDropTarget: boolean): boolean;
-export declare function getContainerDropZoneLabel(hasExternalFiles: boolean): string;
+/**
+ * Is a drag that the nav can accept in flight, anywhere — and what is it?
+ *
+ * Container drop zones are a 4px strip at rest and a labelled band while a
+ * drag is in flight, and WHEN they grow decides whether the sidebar is
+ * usable. Growing on hover is the trap, in both available shapes:
+ *
+ *  - in flow, every row below the strip jumps 24px at the moment the pointer
+ *    crosses it — which is the moment the user is aiming at one of them, so
+ *    the destination walks away from the cursor;
+ *  - out of flow, nothing moves, but the expanded band then covers ~12px of
+ *    the rows on either side and takes their drops.
+ *
+ * So the space is reserved for the whole drag instead. The layout settles
+ * once, before the user has aimed at anything, and from then on every zone's
+ * hit area is exactly the band that is painted — no moving target, and no
+ * neighbour quietly answering for another.
+ *
+ * "Before the user has aimed" is the whole value, and it is also the whole
+ * PRECONDITION. Only a drag that starts in this document has a moment before
+ * the aim: `dragstart` fires before any movement, so the layout can settle
+ * while the pointer is still on the row being picked up.
+ *
+ * A drag arriving from OUTSIDE — the desktop, or another window — has no such
+ * moment. The browser hit-tests whatever is under the pointer before any
+ * script runs, so the first `dragenter` this document sees is already aimed
+ * at something; opening the zones from it moves that something out from under
+ * a stationary pointer. That is the very failure this whole change exists to
+ * remove, arriving by a different road.
+ *
+ * So outside drags get no reservation: the strips stay 4px and nothing moves.
+ * They are not left without a target — container rows accept and highlight
+ * file drops themselves, which is the path a file drag was always going to
+ * take. The root-drop affordance is a convenience with a redundant route; the
+ * mis-aim was a correctness failure with none.
+ *
+ * WHAT is tracked is the gesture's set of MIME types, not just "a drag is
+ * happening". Reserving space and painting a label is a promise that a drop
+ * will land, so only a zone that would take this particular drag may make it.
+ * A set rather than one type because `dragstart` BUBBLES: a draggable row
+ * sits inside a draggable container, both handlers run, and tracking one
+ * would track whichever ran last — the ancestor's — leaving zones that match
+ * the child's payload shut.
+ *
+ * The set is read directly and never serialised. It was briefly published as
+ * a joined string, for `useSyncExternalStore`'s identity comparison — but a
+ * MIME token may legally contain the separator (`|` is not one of RFC 2045's
+ * tspecials), and then one type splits into two. The snapshot is a version
+ * counter instead, so there is nothing to encode.
+ */
+type NavDragListener = () => void;
+/**
+ * Ends whatever drag is in flight.
+ *
+ * Bound to the window for `dragend` (a drop or a cancel) and `drop` (a
+ * source outside this document, which has no `dragend` here at all), and to
+ * the source element itself, whose own `dragend` is the only one left once a
+ * nav refresh has detached it.
+ *
+ * There is deliberately no `dragleave` ending. A relatedTarget-less
+ * `dragleave` is the only signal a drag leaving the window gives, and it is
+ * the same signal whether the drag is over or merely outside — so it ended
+ * live in-page drags, collapsing every zone for the rest of the gesture. It
+ * existed for drags with no `dragend` in this document, and none of those
+ * opens a reservation now.
+ */
+export declare function endNavDrag(): void;
+/**
+ * Called from `dragstart` on a nav row, with the MIME type that row wrote its
+ * payload under and the element it started from.
+ *
+ * The type ADDS rather than replaces: `dragstart` bubbles through every
+ * draggable ancestor, and each one's type belongs to the same gesture.
+ *
+ * The source is held so its `dragend` can be heard even after a nav refresh
+ * has removed the row mid-drag. A detached node still receives its own
+ * `dragend`, but the event reaches no window listener from there — so
+ * without this the reservation would stay open, every zone expanded, until
+ * some later drag happened to finish elsewhere.
+ */
+export declare function beginNavDrag(type: string, source?: Element | null): void;
+export declare function subscribeNavDrag(listener: NavDragListener): () => void;
+/**
+ * The snapshot `useSyncExternalStore` compares: a version, bumped on every
+ * change. A primitive, so identity comparison is meaningful, and carrying no
+ * encoding of its own — see the note about `|` above.
+ */
+export declare function getNavDragVersion(): number;
+/**
+ * Would a zone with this `dnd.type` accept the live drag?
+ *
+ * Reserving space and painting a label is a promise that a drop will land,
+ * so only a zone that would actually take this drag may do either. "A drag
+ * is happening" was not enough: two modules with different `dnd.type`s
+ * opened each other's zones.
+ *
+ * Files need no case here. Only a nav row's `dragstart` opens a reservation
+ * and those carry an entity, so no zone ever opens for a file drag whatever
+ * it is configured to accept. It still HANDLES one — the resting strip takes
+ * a file drop like any other target — and the container's own row advertises
+ * that same drop at full size.
+ */
+export declare function navDragAccepts(zone: {
+    type: string;
+    acceptsEntities: boolean;
+}): boolean;
+/** Test seam — module-level state outlives a test file otherwise. */
+export declare function __resetNavDragForTest(): void;
+export {};

package/dist/lib/nav-dnd.js

@@ -4,6 +4,106 @@ export function hasExternalFilesData(dataTransfer) {
 export function hasAnyDropTarget(isDropTarget, isFileDropTarget) {
     return isDropTarget || isFileDropTarget;
 }
-export function getContainerDropZoneLabel(hasExternalFiles) {
-    return hasExternalFiles ? "Upload to root" : "Move to root";
+const navDragListeners = new Set();
+/** The MIME types this gesture carries. Empty means no drag is in flight. */
+const navDragTypes = new Set();
+/** Bumped on every change — the `useSyncExternalStore` snapshot. */
+let navDragVersion = 0;
+/** The element the drag started from, when we were given one — so its
+ *  `dragend` is heard even after a nav refresh detaches it mid-drag. */
+let navDragSource = null;
+let navDragWatchBound = false;
+function publish() {
+    navDragVersion += 1;
+    for (const listener of navDragListeners)
+        listener();
+}
+/**
+ * Ends whatever drag is in flight.
+ *
+ * Bound to the window for `dragend` (a drop or a cancel) and `drop` (a
+ * source outside this document, which has no `dragend` here at all), and to
+ * the source element itself, whose own `dragend` is the only one left once a
+ * nav refresh has detached it.
+ *
+ * There is deliberately no `dragleave` ending. A relatedTarget-less
+ * `dragleave` is the only signal a drag leaving the window gives, and it is
+ * the same signal whether the drag is over or merely outside — so it ended
+ * live in-page drags, collapsing every zone for the rest of the gesture. It
+ * existed for drags with no `dragend` in this document, and none of those
+ * opens a reservation now.
+ */
+export function endNavDrag() {
+    navDragSource = null;
+    if (navDragTypes.size === 0)
+        return;
+    navDragTypes.clear();
+    publish();
+}
+function bindNavDragWatch() {
+    if (navDragWatchBound || typeof window === "undefined")
+        return;
+    navDragWatchBound = true;
+    window.addEventListener("dragend", endNavDrag, true);
+    window.addEventListener("drop", endNavDrag, true);
+}
+/**
+ * Called from `dragstart` on a nav row, with the MIME type that row wrote its
+ * payload under and the element it started from.
+ *
+ * The type ADDS rather than replaces: `dragstart` bubbles through every
+ * draggable ancestor, and each one's type belongs to the same gesture.
+ *
+ * The source is held so its `dragend` can be heard even after a nav refresh
+ * has removed the row mid-drag. A detached node still receives its own
+ * `dragend`, but the event reaches no window listener from there — so
+ * without this the reservation would stay open, every zone expanded, until
+ * some later drag happened to finish elsewhere.
+ */
+export function beginNavDrag(type, source) {
+    bindNavDragWatch();
+    if (source && source !== navDragSource) {
+        navDragSource = source;
+        source.addEventListener("dragend", endNavDrag, { once: true });
+    }
+    if (navDragTypes.has(type))
+        return;
+    navDragTypes.add(type);
+    publish();
+}
+export function subscribeNavDrag(listener) {
+    bindNavDragWatch();
+    navDragListeners.add(listener);
+    return () => navDragListeners.delete(listener);
+}
+/**
+ * The snapshot `useSyncExternalStore` compares: a version, bumped on every
+ * change. A primitive, so identity comparison is meaningful, and carrying no
+ * encoding of its own — see the note about `|` above.
+ */
+export function getNavDragVersion() {
+    return navDragVersion;
+}
+/**
+ * Would a zone with this `dnd.type` accept the live drag?
+ *
+ * Reserving space and painting a label is a promise that a drop will land,
+ * so only a zone that would actually take this drag may do either. "A drag
+ * is happening" was not enough: two modules with different `dnd.type`s
+ * opened each other's zones.
+ *
+ * Files need no case here. Only a nav row's `dragstart` opens a reservation
+ * and those carry an entity, so no zone ever opens for a file drag whatever
+ * it is configured to accept. It still HANDLES one — the resting strip takes
+ * a file drop like any other target — and the container's own row advertises
+ * that same drop at full size.
+ */
+export function navDragAccepts(zone) {
+    return zone.acceptsEntities && navDragTypes.has(zone.type);
+}
+/** Test seam — module-level state outlives a test file otherwise. */
+export function __resetNavDragForTest() {
+    navDragTypes.clear();
+    navDragSource = null;
+    navDragVersion = 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-ui",
-  "version": "0.33.0",
+  "version": "0.33.2",
   "license": "MIT",
   "description": "React agent UI core for Foundry UI — chat, composer, AG-UI adapter for assistant-ui, tool cards, panels, sidebar, theme runtime, and UI stores.",
   "keywords": [
@@ -80,8 +80,8 @@
     "recharts": "^3.10.1",
     "remark-gfm": "^4.0.0",
     "tailwind-merge": "^3.5.0",
-    "@iloveagents/foundry-agent": "^0.33.0",
-    "@iloveagents/foundry-web-primitives": "^0.33.0"
+    "@iloveagents/foundry-agent": "^0.33.2",
+    "@iloveagents/foundry-web-primitives": "^0.33.2"
   },
   "devDependencies": {
     "@ag-ui/client": "^0.0.52",