@iloveagents/foundry-web-ui 0.26.0 → 0.27.0

package/dist/components/data-table/data-table-frame.js

@@ -1,61 +1,34 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * The frame around a list: normally a plain container, in focus mode a
- * fullscreen layer (Escape leaves it). `DataTableToolbar` shows the focus
- * button whenever it renders inside a frame — users with wide lists get a
- * way out of a cramped page without the host doing anything.
- *
- * The focus layer stays where it is in the tree — only its classes change —
- * so entering and leaving focus never remounts the list (its rows, drawer,
- * selection and in-flight edits survive) and it keeps inheriting the host's
- * theme scope. It never scrolls itself: it is a fixed flex column whose
- * growing child — the table — owns the scrolling, which keeps the toolbar in
- * place while the rows move under a sticky header (see `DataTable`, which
- * reads this context).
- *
- * A `position: fixed` layer is relative to the viewport unless an ancestor
- * establishes a containing block (`transform`, `filter`, `perspective`,
- * `contain: paint`); a host that does that on a list's ancestor has to opt
- * out of focus mode.
- */
-import { createContext, forwardRef, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, forwardRef, useContext, useMemo, useRef, useState, } from "react";
 import { cn } from "@iloveagents/foundry-web-primitives";
+import { TooltipProvider } from "../../ui/tooltip.js";
+import { Dialog, DialogPortal } from "../../ui/dialog.js";
+import { FocusDialog } from "../focus-dialog.js";
 const DataTableFrameContext = createContext(null);
-/** The enclosing frame's focus state, or `null` outside a frame. */
 export function useDataTableFrame() {
     return useContext(DataTableFrameContext);
 }
 export const DataTableFrame = forwardRef(function DataTableFrame({ children, className, focusClassName, defaultFocused = false, onFocusChange, ...rest }, ref) {
     const [focused, setFocused] = useState(defaultFocused);
-    const changeRef = useRef(onFocusChange);
-    changeRef.current = onFocusChange;
-    useEffect(() => {
-        if (!focused)
-            return;
-        const onKeyDown = (event) => {
-            // Through the same door as the button: a host told about focus mode
-            // must hear about it however it ended.
-            if (event.key === "Escape") {
-                setFocused(false);
-                changeRef.current?.(false);
-            }
-        };
-        document.addEventListener("keydown", onKeyDown);
-        const previousOverflow = document.body.style.overflow;
-        document.body.style.overflow = "hidden";
-        return () => {
-            document.removeEventListener("keydown", onKeyDown);
-            document.body.style.overflow = previousOverflow;
-        };
-    }, [focused]);
+    const [host] = useState(() => typeof document === "undefined" ? null : document.createElement("div"));
+    const returnFocus = useRef(null);
     const value = useMemo(() => ({
         focused,
         setFocused: (next) => {
+            if (next && !focused)
+                returnFocus.current = document.activeElement;
             setFocused(next);
-            changeRef.current?.(next);
+            onFocusChange?.(next);
         },
-    }), [focused]);
-    return (_jsx(DataTableFrameContext.Provider, { value: value, children: _jsx("div", { ...rest, ref: ref, "data-focused": focused ? "" : undefined, className: focused
-                ? cn("fixed inset-0 z-50 flex flex-col gap-3 overflow-hidden bg-background p-4 sm:p-6", focusClassName)
-                : className, children: children }) }));
+    }), [focused, onFocusChange]);
+    const attach = (element) => {
+        if (element && host && host.parentElement !== element) {
+            host.style.display = "contents";
+            element.appendChild(host);
+        }
+    };
+    const content = (_jsx("div", { ...rest, ref: ref, "data-focused": focused ? "" : undefined, "data-focus-title": rest["aria-label"] || "Focused content", className: focused
+            ? cn("flex min-h-0 flex-1 flex-col gap-3 overflow-hidden bg-background p-4 sm:p-6", focusClassName)
+            : className, children: children }));
+    return (_jsx(DataTableFrameContext.Provider, { value: value, children: _jsxs(TooltipProvider, { children: [_jsx("div", { ref: focused ? undefined : attach, className: "contents" }), _jsxs(Dialog, { open: focused, onOpenChange: value.setFocused, children: [_jsx(FocusDialog, { focused: focused, setFocused: value.setFocused, host: host, attach: attach, title: rest["aria-label"] || "Table focus", onReturnFocus: () => returnFocus.current?.focus() }), host ? (_jsx(DialogPortal, { container: host, forceMount: true, children: content })) : (content)] })] }) }));
 });

package/dist/components/data-table/data-table-overflow.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from "react";
+/** Discoverable, keyboard-accessible navigation for a table wider than its pane. */
+export declare function DataTableOverflow({ scroller }: {
+    scroller: RefObject<HTMLDivElement | null>;
+}): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/data-table/data-table-overflow.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { Button } from "@iloveagents/foundry-web-primitives";
+/** Discoverable, keyboard-accessible navigation for a table wider than its pane. */
+export function DataTableOverflow({ scroller }) {
+    const [edges, setEdges] = useState({ previous: false, next: false });
+    useEffect(() => {
+        const element = scroller.current;
+        if (!element)
+            return;
+        const read = () => {
+            const position = Math.abs(element.scrollLeft);
+            const maximum = Math.max(0, element.scrollWidth - element.clientWidth);
+            const next = { previous: position > 1, next: position < maximum - 1 };
+            setEdges((current) => current.previous === next.previous && current.next === next.next ? current : next);
+        };
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(read);
+        observer?.observe(element);
+        if (element.firstElementChild)
+            observer?.observe(element.firstElementChild);
+        element.addEventListener("scroll", read, { passive: true });
+        read();
+        return () => {
+            observer?.disconnect();
+            element.removeEventListener("scroll", read);
+        };
+    }, [scroller]);
+    if (!edges.previous && !edges.next)
+        return null;
+    const move = (direction) => {
+        const element = scroller.current;
+        if (!element)
+            return;
+        const sign = getComputedStyle(element).direction === "rtl" ? -1 : 1;
+        element.scrollBy({
+            left: direction * sign * Math.max(160, element.clientWidth * 0.7),
+            behavior: "auto",
+        });
+    };
+    return (_jsxs("div", { className: "flex shrink-0 items-center justify-between gap-3 border-t border-border px-3 py-1 text-xs text-muted-foreground", children: [_jsx("span", { children: edges.next ? "More columns to explore" : "You’re at the last column" }), _jsxs("div", { className: "flex items-center gap-1", role: "group", "aria-label": "Scroll table columns", children: [_jsx(Button, { variant: "ghost", size: "icon", className: "size-8 [@media(pointer:coarse)]:size-11", "aria-label": "Previous columns", disabled: !edges.previous, onClick: () => move(-1), children: _jsx(ChevronLeft, { className: "size-4 rtl:rotate-180" }) }), _jsx(Button, { variant: "ghost", size: "icon", className: "size-8 [@media(pointer:coarse)]:size-11", "aria-label": "Next columns", disabled: !edges.next, onClick: () => move(1), children: _jsx(ChevronRight, { className: "size-4 rtl:rotate-180" }) })] })] }));
+}

package/dist/components/data-table/data-table.js

@@ -11,6 +11,7 @@ import { useCallback, useEffect, useRef, useState, } from "react";
 import { DATA_TABLE_MIN_WIDTH } from "./facets.js";
 import { useDataTableFrame } from "./data-table-frame.js";
 import { usePinnedOffsets } from "./use-pinned-offsets.js";
+import { DataTableOverflow } from "./data-table-overflow.js";
 import { useElementWidth } from "./use-element-width.js";
 import { cn } from "@iloveagents/foundry-web-primitives";
 // Native controls, the ARIA widgets that own the same keys (a slider or a
@@ -207,97 +208,97 @@ export function DataTable({ table, onRowClick, onRowOpen, activeRowId, onActiveR
             return;
         handler(row, event);
     };
-    return (_jsx("div", { ref: rootRef, "data-scrolled-x": scrolledX ? "" : undefined, className: cn("overflow-hidden rounded-2xl border border-border/45 bg-card/60", filling && "flex min-h-0 flex-1 flex-col", className), children: _jsx("div", { ref: scrollerRef, onScroll: (event) => {
-                const next = event.currentTarget.scrollLeft > 0;
-                setScrolledX((current) => (current === next ? current : next));
-            }, "data-list-scroller": "", style: bounded ? { maxHeight } : undefined, className: cn(filling ? "min-h-0 flex-1 overflow-auto" : bounded ? "overflow-auto" : "overflow-x-auto"), children: _jsxs("table", { className: "w-full caption-bottom text-sm", "aria-label": ariaLabel, onKeyDown: onActiveRowChange
-                    ? (event) => {
-                        // Let a control that owns these keys keep them.
-                        if (event.target.closest(INTERACTIVE))
-                            return;
-                        if (event.key === "ArrowDown")
-                            moveActive(1);
-                        else if (event.key === "ArrowUp")
-                            moveActive(-1);
-                        else if (event.key === "Home")
-                            moveActive("first");
-                        else if (event.key === "End")
-                            moveActive("last");
-                        else if (event.key === "Escape") {
-                            // Only when there IS a row to let go of. One Escape, one
-                            // effect: it clears the active row without also leaving
-                            // focus mode — but with no active row it belongs to the
-                            // frame, so it is left alone to bubble there.
-                            if (!activeRowId)
+    return (_jsxs("div", { ref: rootRef, "data-scrolled-x": scrolledX ? "" : undefined, className: cn("overflow-hidden rounded-2xl border border-border/45 bg-card/60", filling && "flex min-h-0 flex-1 flex-col", className), children: [_jsx("div", { ref: scrollerRef, onScroll: (event) => {
+                    const next = Math.abs(event.currentTarget.scrollLeft) > 0;
+                    setScrolledX((current) => (current === next ? current : next));
+                }, "data-list-scroller": "", role: "region", "aria-label": `${ariaLabel ?? "Table"} scroll area`, tabIndex: 0, style: bounded ? { maxHeight } : undefined, className: cn(filling ? "min-h-0 flex-1 overflow-auto" : bounded ? "overflow-auto" : "overflow-x-auto"), children: _jsxs("table", { className: "w-full caption-bottom text-sm", "aria-label": ariaLabel, onKeyDown: onActiveRowChange
+                        ? (event) => {
+                            // Let a control that owns these keys keep them.
+                            if (event.target.closest(INTERACTIVE))
                                 return;
-                            onActiveRowChange(null);
-                            event.stopPropagation();
-                            event.nativeEvent.stopImmediatePropagation();
-                        }
-                        else
-                            return;
-                        event.preventDefault();
-                    }
-                    : undefined, children: [_jsx("thead", { className: cn(sticky && "sticky top-0 z-10 bg-card"), children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "border-b border-border/45", children: [headerGroup.headers.map((header) => {
-                                    const meta = header.column.columnDef.meta;
-                                    // A grouping header spans its leaves; when the width gate
-                                    // drops some of them it has to narrow, and when it drops all
-                                    // of them the group header goes too.
-                                    const span = fittingLeafCount(header);
-                                    if (span === 0)
-                                        return null;
-                                    // `getSize()` sums EVERY descendant, including the ones the
-                                    // width gate just dropped, so a half-gated group would hold
-                                    // space for a column that is not there and push the table
-                                    // wider than its own columns.
-                                    const sized = header.subHeaders.length
-                                        ? fittingLeafWidth(header)
-                                        : header.getSize();
-                                    return (_jsx("th", { colSpan: span, scope: "col", 
-                                        // Every column in the run, not only the marked ones: the
-                                        // run can start with an unmarked leader (a selection
-                                        // checkbox), and an unmeasured leader leaves the column
-                                        // after it stacked at zero, overlapping it.
-                                        ref: pinnedIds.includes(header.column.id) ? measure(header.column.id) : undefined, ...pinnedProps(header.column.id, "header"), style: {
-                                            ...(sized !== undefined && sized !== 150 ? { width: sized } : {}),
-                                            ...pinnedStyle(header.column.id),
-                                        }, className: cn("h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground", meta?.align === "right" && "text-right", meta?.align === "center" && "text-center", meta?.headerClassName), children: header.isPlaceholder
-                                            ? null
-                                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
-                                }), spacer ? _jsx("th", { "aria-hidden": "true", className: "w-full p-0" }) : null] }, headerGroup.id))) }), _jsx("tbody", { ref: bodyRef, children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columnCount, className: "h-24 text-center text-sm text-muted-foreground", children: emptyState }) })) : (rows.map((row) => row.getIsGrouped() ? (_jsx("tr", { "data-group-row": "", className: "border-t border-border/45 bg-muted/35 text-sm font-medium", children: _jsx("td", { colSpan: columnCount, className: "p-0", children: _jsxs("div", { "data-group-content": "", style: width ? { width } : undefined, className: "flex items-center gap-2 px-3 py-1.5", children: [_jsx("button", { type: "button", onClick: row.getToggleExpandedHandler(), "aria-expanded": row.getIsExpanded(), "aria-label": row.getIsExpanded() ? "Collapse group" : "Expand group", className: "rounded-md p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground", children: row.getIsExpanded() ? (_jsx(ChevronDown, { className: "size-4" })) : (_jsx(ChevronRight, { className: "size-4" })) }), _jsx("div", { className: "min-w-0 flex-1", children: renderGroup ? renderGroup(row) : _jsx(DefaultGroupLabel, { row: row }) })] }) }) }, row.id)) : (_jsxs("tr", { "data-row-id": row.id, "data-state": row.getIsSelected() ? "selected" : undefined, "data-active": activeRowId != null && row.id === activeRowId ? "" : undefined, "aria-current": activeRowId != null && row.id === activeRowId ? "true" : undefined, "aria-selected": row.getIsSelected() || undefined, "data-clickable": onRowClick || onRowOpen ? "" : undefined, "data-focusable": onRowClick || onRowOpen || onActiveRowChange ? "" : undefined, tabIndex: onRowClick || onRowOpen || onActiveRowChange ? 0 : undefined, 
-                            // `detail` counts the clicks in the sequence: the second
-                            // one belongs to the double-click that follows, and
-                            // letting it through would toggle a selection off again
-                            // right before the row opens.
-                            onClick: (event) => {
-                                if (event.detail > 1)
+                            if (event.key === "ArrowDown")
+                                moveActive(1);
+                            else if (event.key === "ArrowUp")
+                                moveActive(-1);
+                            else if (event.key === "Home")
+                                moveActive("first");
+                            else if (event.key === "End")
+                                moveActive("last");
+                            else if (event.key === "Escape") {
+                                // Only when there IS a row to let go of. One Escape, one
+                                // effect: it clears the active row without also leaving
+                                // focus mode — but with no active row it belongs to the
+                                // frame, so it is left alone to bubble there.
+                                if (!activeRowId)
                                     return;
-                                activate(row, event, onRowClick);
-                            }, onDoubleClick: (event) => activate(row, event, onRowOpen), onKeyDown: (event) => {
-                                if (event.key === "Enter") {
-                                    if (event.target.closest(INTERACTIVE))
-                                        return;
-                                    event.preventDefault();
-                                    activate(row, event, onRowOpen ?? onRowClick);
-                                }
-                                else if (event.key === " ") {
-                                    if (event.target.closest(INTERACTIVE))
+                                onActiveRowChange(null);
+                                event.stopPropagation();
+                                event.nativeEvent.stopImmediatePropagation();
+                            }
+                            else
+                                return;
+                            event.preventDefault();
+                        }
+                        : undefined, children: [_jsx("thead", { className: cn(sticky && "sticky top-0 z-10 bg-card"), children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { className: "border-b border-border/45", children: [headerGroup.headers.map((header) => {
+                                        const meta = header.column.columnDef.meta;
+                                        // A grouping header spans its leaves; when the width gate
+                                        // drops some of them it has to narrow, and when it drops all
+                                        // of them the group header goes too.
+                                        const span = fittingLeafCount(header);
+                                        if (span === 0)
+                                            return null;
+                                        // `getSize()` sums EVERY descendant, including the ones the
+                                        // width gate just dropped, so a half-gated group would hold
+                                        // space for a column that is not there and push the table
+                                        // wider than its own columns.
+                                        const sized = header.subHeaders.length
+                                            ? fittingLeafWidth(header)
+                                            : header.getSize();
+                                        return (_jsx("th", { colSpan: span, scope: "col", 
+                                            // Every column in the run, not only the marked ones: the
+                                            // run can start with an unmarked leader (a selection
+                                            // checkbox), and an unmeasured leader leaves the column
+                                            // after it stacked at zero, overlapping it.
+                                            ref: pinnedIds.includes(header.column.id) ? measure(header.column.id) : undefined, ...pinnedProps(header.column.id, "header"), style: {
+                                                ...(sized !== undefined && sized !== 150 ? { width: sized } : {}),
+                                                ...pinnedStyle(header.column.id),
+                                            }, className: cn("h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground", meta?.align === "right" && "text-right", meta?.align === "center" && "text-center", meta?.headerClassName), children: header.isPlaceholder
+                                                ? null
+                                                : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                    }), spacer ? _jsx("th", { "aria-hidden": "true", className: "w-full p-0" }) : null] }, headerGroup.id))) }), _jsx("tbody", { ref: bodyRef, children: rows.length === 0 ? (_jsx("tr", { children: _jsx("td", { colSpan: columnCount, className: "h-24 text-center text-sm text-muted-foreground", children: emptyState }) })) : (rows.map((row) => row.getIsGrouped() ? (_jsx("tr", { "data-group-row": "", className: "border-t border-border/45 bg-muted/35 text-sm font-medium", children: _jsx("td", { colSpan: columnCount, className: "p-0", children: _jsxs("div", { "data-group-content": "", style: width ? { width } : undefined, className: "flex items-center gap-2 px-3 py-1.5", children: [_jsx("button", { type: "button", onClick: row.getToggleExpandedHandler(), "aria-expanded": row.getIsExpanded(), "aria-label": row.getIsExpanded() ? "Collapse group" : "Expand group", className: "rounded-md p-0.5 text-muted-foreground hover:bg-accent hover:text-foreground", children: row.getIsExpanded() ? (_jsx(ChevronDown, { className: "size-4" })) : (_jsx(ChevronRight, { className: "size-4" })) }), _jsx("div", { className: "min-w-0 flex-1", children: renderGroup ? renderGroup(row) : _jsx(DefaultGroupLabel, { row: row }) })] }) }) }, row.id)) : (_jsxs("tr", { "data-row-id": row.id, "data-state": row.getIsSelected() ? "selected" : undefined, "data-active": activeRowId != null && row.id === activeRowId ? "" : undefined, "aria-current": activeRowId != null && row.id === activeRowId ? "true" : undefined, "aria-selected": row.getIsSelected() || undefined, "data-clickable": onRowClick || onRowOpen ? "" : undefined, "data-focusable": onRowClick || onRowOpen || onActiveRowChange ? "" : undefined, tabIndex: onRowClick || onRowOpen || onActiveRowChange ? 0 : undefined, 
+                                // `detail` counts the clicks in the sequence: the second
+                                // one belongs to the double-click that follows, and
+                                // letting it through would toggle a selection off again
+                                // right before the row opens.
+                                onClick: (event) => {
+                                    if (event.detail > 1)
                                         return;
-                                    event.preventDefault();
                                     activate(row, event, onRowClick);
-                                }
-                            }, className: cn("group/row border-t border-border/35 transition-colors", (onRowClick || onRowOpen) && "cursor-pointer hover:bg-muted/30", 
-                            // Anything focusable has to SHOW where the keyboard is —
-                            // a list navigated with the arrows is focusable without
-                            // being clickable, and silent focus leaves a keyboard
-                            // user guessing which row the next key belongs to.
-                            (onRowClick || onRowOpen || onActiveRowChange) &&
-                                "focus-visible:bg-muted/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", "data-[state=selected]:bg-primary/6 data-[active]:bg-primary/8", rowClassName?.(row)), children: [row.getVisibleCells().map((cell) => {
-                                    const meta = cell.column.columnDef.meta;
-                                    if (!fits(meta))
-                                        return null;
-                                    return (_jsx("td", { ...pinnedProps(cell.column.id, "cell"), style: pinnedStyle(cell.column.id), className: cn(cellPad, "align-middle", meta?.align === "right" && "text-right", meta?.align === "center" && "text-center", meta?.className), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                                }), spacer ? _jsx("td", { "aria-hidden": "true", className: "w-full p-0" }) : null] }, row.id)))) })] }) }) }));
+                                }, onDoubleClick: (event) => activate(row, event, onRowOpen), onKeyDown: (event) => {
+                                    if (event.key === "Enter") {
+                                        if (event.target.closest(INTERACTIVE))
+                                            return;
+                                        event.preventDefault();
+                                        activate(row, event, onRowOpen ?? onRowClick);
+                                    }
+                                    else if (event.key === " ") {
+                                        if (event.target.closest(INTERACTIVE))
+                                            return;
+                                        event.preventDefault();
+                                        activate(row, event, onRowClick);
+                                    }
+                                }, className: cn("group/row border-t border-border/35 transition-colors", (onRowClick || onRowOpen) && "cursor-pointer hover:bg-muted/30", 
+                                // Anything focusable has to SHOW where the keyboard is —
+                                // a list navigated with the arrows is focusable without
+                                // being clickable, and silent focus leaves a keyboard
+                                // user guessing which row the next key belongs to.
+                                (onRowClick || onRowOpen || onActiveRowChange) &&
+                                    "focus-visible:bg-muted/30 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ring", "data-[state=selected]:bg-primary/6 data-[active]:bg-primary/8", rowClassName?.(row)), children: [row.getVisibleCells().map((cell) => {
+                                        const meta = cell.column.columnDef.meta;
+                                        if (!fits(meta))
+                                            return null;
+                                        return (_jsx("td", { ...pinnedProps(cell.column.id, "cell"), style: pinnedStyle(cell.column.id), className: cn(cellPad, "align-middle", meta?.align === "right" && "text-right", meta?.align === "center" && "text-center", meta?.className), children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
+                                    }), spacer ? _jsx("td", { "aria-hidden": "true", className: "w-full p-0" }) : null] }, row.id)))) })] }) }), _jsx(DataTableOverflow, { scroller: scrollerRef })] }));
 }
 function DefaultGroupLabel({ row }) {
     const grouping = row

package/dist/components/data-table/focus-pane-resize.d.ts

@@ -0,0 +1,8 @@
+/** Resize a focus-view side pane without remounting its chat or source. */
+export declare function FocusPaneResize({ label, side, width, onResize, breakpoint, }: {
+    breakpoint?: "md" | "xl";
+    label: string;
+    side: "left" | "right";
+    width?: number;
+    onResize: (width?: number) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/data-table/focus-pane-resize.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+/** Resize a focus-view side pane without remounting its chat or source. */
+export function FocusPaneResize({ label, side, width, onResize, breakpoint = "md", }) {
+    const start = useRef(null);
+    const elementRef = useRef(null);
+    const [maximum, setMaximum] = useState(880);
+    const [renderedWidth, setRenderedWidth] = useState(240);
+    const getMaximum = (element) => {
+        const pane = element.parentElement;
+        const dialog = pane.closest('[role="dialog"]');
+        const other = [...(pane.parentElement?.querySelectorAll(":scope > aside") ?? [])]
+            .filter((n) => n !== pane && !["absolute", "fixed"].includes(getComputedStyle(n).position))
+            .reduce((sum, n) => sum + n.getBoundingClientRect().width, 0);
+        return Math.max(240, (dialog?.getBoundingClientRect().width ?? 1200) - other - 320);
+    };
+    useEffect(() => {
+        const element = elementRef.current;
+        if (!element)
+            return;
+        const update = () => {
+            const maximum = getMaximum(element);
+            setMaximum(maximum);
+            setRenderedWidth(Math.round(element.parentElement.getBoundingClientRect().width));
+            // Automatic percentage widths obey the same content reserve as a drag.
+            if (getComputedStyle(element).display !== "none" &&
+                element.parentElement.getBoundingClientRect().width > maximum)
+                onResize(maximum);
+        };
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(update);
+        const dialog = element.closest('[role="dialog"]');
+        const layout = element.parentElement?.parentElement;
+        const observePanes = () => {
+            observer?.disconnect();
+            if (dialog) {
+                observer?.observe(dialog);
+                layout?.querySelectorAll(":scope > aside").forEach((pane) => observer?.observe(pane));
+            }
+            update();
+        };
+        observePanes();
+        const mutations = typeof MutationObserver === "undefined" ? null : new MutationObserver(observePanes);
+        if (layout)
+            mutations?.observe(layout, { childList: true });
+        return () => {
+            observer?.disconnect();
+            mutations?.disconnect();
+        };
+    }, [onResize]);
+    const adjust = (element, next) => {
+        const maximum = getMaximum(element);
+        setMaximum(maximum);
+        onResize(Math.round(Math.max(240, Math.min(maximum, next))));
+    };
+    return (_jsx("div", { ref: elementRef, role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${label}`, tabIndex: 0, "aria-valuemin": 240, "aria-valuemax": maximum, "aria-valuenow": width ?? renderedWidth, "aria-valuetext": width ? `${width} pixels` : `${renderedWidth} pixels (automatic)`, title: "Drag to resize. Double-click to reset.", className: `absolute inset-y-0 z-30 hidden w-2 cursor-col-resize touch-none hover:bg-border/60 focus-visible:bg-border focus-visible:outline-none ${breakpoint === "xl" ? "xl:block" : "md:block"} ${side === "right" ? "right-0" : "left-0"}`, onPointerDown: (event) => {
+            if (event.button !== 0)
+                return;
+            event.preventDefault();
+            start.current = {
+                x: event.clientX,
+                width: event.currentTarget.parentElement.getBoundingClientRect().width,
+                original: width,
+            };
+            event.currentTarget.setPointerCapture(event.pointerId);
+        }, onPointerMove: (event) => {
+            if (start.current)
+                adjust(event.currentTarget, start.current.width + (event.clientX - start.current.x) * (side === "right" ? 1 : -1));
+        }, onPointerUp: () => {
+            start.current = null;
+        }, onPointerCancel: () => {
+            if (start.current)
+                onResize(start.current.original);
+            start.current = null;
+        }, onLostPointerCapture: () => {
+            start.current = null;
+        }, onDoubleClick: () => onResize(), onKeyDown: (event) => {
+            if (event.key === "Home") {
+                event.preventDefault();
+                onResize();
+                return;
+            }
+            if (event.key !== "ArrowLeft" && event.key !== "ArrowRight")
+                return;
+            event.preventDefault();
+            adjust(event.currentTarget, event.currentTarget.parentElement.getBoundingClientRect().width +
+                (event.key === "ArrowRight" ? 32 : -32) * (side === "right" ? 1 : -1));
+        } }));
+}

package/dist/components/focus-chat-pane.d.ts

@@ -0,0 +1,8 @@
+export declare function FocusChatPane({ chatOpen, setChatOpen, chatWidth, setChatWidth, source, onClose, }: {
+    chatOpen: boolean;
+    setChatOpen: (v: boolean) => void;
+    chatWidth?: number;
+    setChatWidth: (v?: number) => void;
+    source: boolean;
+    onClose: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/focus-chat-pane.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, cn } from "@iloveagents/foundry-web-primitives";
+import { X, PanelLeft, MessageSquare } from "lucide-react";
+import { TooltipIconButton } from "./tooltip-icon-button.js";
+import { FocusPaneResize } from "./data-table/focus-pane-resize.js";
+import { ChatContent } from "./assistant-chat.js";
+export function FocusChatPane({ chatOpen, setChatOpen, chatWidth, setChatWidth, source, onClose, }) {
+    return (_jsxs("aside", { "aria-label": "Focused content chat", style: { "--focus-chat-width": `${chatWidth ?? 384}px` }, className: cn("relative flex min-h-0 shrink-0 flex-col border-r border-border bg-background", chatOpen ? "w-full md:w-[var(--focus-chat-width)]" : "w-11", source && "hidden xl:flex"), children: [_jsx("div", { className: cn("flex h-12 shrink-0 items-center", chatOpen ? "gap-1 border-b border-border px-2" : "justify-center"), children: chatOpen ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "min-w-0 flex-1 px-2 text-sm font-semibold", children: "Chat" }), _jsx(TooltipIconButton, { tooltip: "Collapse chat", "aria-label": "Collapse chat", className: "size-8", onClick: () => setChatOpen(false), children: _jsx(PanelLeft, { size: 18 }) }), _jsx(Button, { variant: "ghost", size: "icon", title: "Close", "aria-label": "Close", className: "size-8 md:hidden", onClick: () => onClose(), children: _jsx(X, { size: 18 }) })] })) : (_jsx(TooltipIconButton, { tooltip: "Expand chat", "aria-label": "Expand chat", "aria-expanded": false, className: "size-8", onClick: () => setChatOpen(true), children: _jsx(MessageSquare, { size: 18 }) })) }), chatOpen && (_jsx(FocusPaneResize, { label: "chat", side: "right", width: chatWidth, onResize: setChatWidth })), chatOpen && (_jsx(ChatContent, { compactComposer: true, showPinButton: false, hideCurrentPageBadge: true, starterSuggestions: [] }))] }));
+}

package/dist/components/focus-dialog.d.ts

@@ -0,0 +1,8 @@
+export declare function FocusDialog({ focused, setFocused, host, attach, title, onReturnFocus, }: {
+    focused: boolean;
+    setFocused: (v: boolean) => void;
+    host: HTMLElement | null;
+    attach: (el: HTMLDivElement | null) => void;
+    title: string;
+    onReturnFocus: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/focus-dialog.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useAuiState } from "@assistant-ui/react";
+import { Button, cn } from "@iloveagents/foundry-web-primitives";
+import { X } from "lucide-react";
+import { DialogContent, DialogTitle } from "../ui/dialog.js";
+import { useToolPanelStore } from "../lib/tool-panel-store.js";
+import { FocusChatPane } from "./focus-chat-pane.js";
+import { FocusSourcePane } from "./focus-source-pane.js";
+export function FocusDialog({ focused, setFocused, host, attach, title, onReturnFocus, }) {
+    const [chatOpen, setChatOpen] = useState(false);
+    const [chatWidth, setChatWidth] = useState();
+    const [sourceWidth, setSourceWidth] = useState();
+    const [source, setSource] = useState(null);
+    const hasChat = useAuiState((state) => Boolean(state.optional.thread));
+    const dialogRef = useRef(null);
+    const sourceTrigger = useRef(null);
+    const ownedSource = useRef(undefined);
+    const previousPanel = useRef(null);
+    const releaseSource = () => {
+        if (previousPanel.current &&
+            useToolPanelStore.getState().isWindowHosted &&
+            useToolPanelStore.getState().isOpen &&
+            useToolPanelStore.getState().content?.sourceId === ownedSource.current)
+            useToolPanelStore.setState(previousPanel.current);
+        previousPanel.current = null;
+        ownedSource.current = undefined;
+    };
+    const closeSource = () => {
+        releaseSource();
+        setSource(null);
+        requestAnimationFrame(() => sourceTrigger.current?.focus());
+    };
+    useEffect(() => {
+        if (!focused) {
+            releaseSource();
+            setChatOpen(false);
+            setSource(null);
+        }
+    }, [focused]);
+    useEffect(() => {
+        if (!focused)
+            return;
+        const openSource = (event) => {
+            const request = event;
+            if (request.defaultPrevented || typeof request.detail?.content !== "string")
+                return;
+            const dialogs = Array.from(document.querySelectorAll('[role="dialog"]:not([aria-modal="false"])'));
+            if (host?.closest('[role="dialog"]') !== dialogs[dialogs.length - 1])
+                return;
+            request.preventDefault();
+            if (event.type === "preview:open-source") {
+                const { content, isOpen, isWindowHosted, hostedOwnerContent } = useToolPanelStore.getState();
+                previousPanel.current ?? (previousPanel.current = { content, isOpen, isWindowHosted, hostedOwnerContent });
+                ownedSource.current = request.detail.sourceId;
+            }
+            const active = document.activeElement;
+            if (active instanceof HTMLElement && !active.closest('[aria-label="Citation source"]'))
+                sourceTrigger.current = active;
+            setSource(request.detail);
+        };
+        const updateSource = (event) => {
+            const content = event.detail;
+            if (ownedSource.current && content.sourceId === ownedSource.current)
+                setSource(content);
+        };
+        const unsubscribe = useToolPanelStore.subscribe((state) => {
+            const dialogs = Array.from(document.querySelectorAll('[role="dialog"]:not([aria-modal="false"])'));
+            const isActiveHost = host?.closest('[role="dialog"]') === dialogs[dialogs.length - 1];
+            if (ownedSource.current &&
+                (!state.isOpen ||
+                    !state.isWindowHosted ||
+                    (isActiveHost && state.content?.sourceId !== ownedSource.current))) {
+                previousPanel.current = null;
+                ownedSource.current = undefined;
+                setSource(null);
+            }
+        });
+        window.addEventListener("preview:update-source", updateSource);
+        window.addEventListener("focus:open-source", openSource);
+        window.addEventListener("preview:open-source", openSource, true);
+        return () => {
+            unsubscribe();
+            releaseSource();
+            window.removeEventListener("preview:update-source", updateSource);
+            window.removeEventListener("focus:open-source", openSource);
+            window.removeEventListener("preview:open-source", openSource, true);
+        };
+    }, [focused, host]);
+    return (_jsxs(DialogContent, { ref: dialogRef, tabIndex: -1, onOpenAutoFocus: (event) => {
+            event.preventDefault();
+            dialogRef.current?.focus();
+        }, showCloseButton: false, "aria-describedby": undefined, onEscapeKeyDown: (event) => {
+            event.preventDefault();
+            if (source)
+                closeSource();
+            else
+                setFocused(false);
+        }, onCloseAutoFocus: (event) => {
+            event.preventDefault();
+            onReturnFocus();
+        }, className: "inset-0 left-0 top-0 flex h-dvh w-screen max-w-none translate-x-0 translate-y-0 flex-row gap-0 rounded-none border-0 bg-background p-0 sm:max-w-none", children: [hasChat && (_jsx(FocusChatPane, { chatOpen: chatOpen, setChatOpen: setChatOpen, chatWidth: chatWidth, setChatWidth: setChatWidth, source: !!source, onClose: () => setFocused(false) })), _jsxs("div", { className: cn("min-h-0 min-w-0 flex-1 flex-col", source ? "hidden xl:flex" : chatOpen ? "hidden md:flex" : "flex"), children: [_jsxs("div", { className: "flex h-12 shrink-0 items-center gap-3 border-b border-border px-4", children: [_jsx(DialogTitle, { className: "min-w-0 flex-1 truncate text-sm", children: title }), _jsx(Button, { variant: "ghost", size: "icon", title: "Close", "aria-label": "Close", className: "size-8", onClick: () => setFocused(false), children: _jsx(X, { size: 18 }) })] }), _jsx("div", { ref: focused ? attach : undefined, className: "flex min-h-0 min-w-0 flex-1 flex-col" })] }), source && (_jsx(FocusSourcePane, { source: source, sourceWidth: sourceWidth, setSourceWidth: setSourceWidth, closeSource: closeSource }))] }));
+}

package/dist/components/focus-source-pane.d.ts

@@ -0,0 +1,7 @@
+import type { ToolPanelContent } from "../lib/tool-panel-store.js";
+export declare function FocusSourcePane({ source, sourceWidth, setSourceWidth, closeSource, }: {
+    source: ToolPanelContent;
+    sourceWidth?: number;
+    setSourceWidth: (v?: number) => void;
+    closeSource: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/focus-source-pane.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { Button } from "@iloveagents/foundry-web-primitives";
+import { X } from "lucide-react";
+import { FocusPaneResize } from "./data-table/focus-pane-resize.js";
+import { PanelContentRenderer } from "./tool-panel.js";
+export function FocusSourcePane({ source, sourceWidth, setSourceWidth, closeSource, }) {
+    const closeRef = useRef(null);
+    useEffect(() => {
+        closeRef.current?.focus();
+    }, []);
+    return (_jsxs("aside", { "aria-label": "Citation source", style: {
+            "--focus-source-width": sourceWidth ? `${sourceWidth}px` : "40%",
+        }, "data-focus-source-entity": source.entityId, "data-focus-source-title": source.title, className: "absolute inset-0 z-20 flex min-h-0 flex-col border-l border-border bg-background xl:relative xl:inset-auto xl:w-[var(--focus-source-width)] xl:min-w-60 xl:shrink-0", children: [_jsx(FocusPaneResize, { breakpoint: "xl", label: "source", side: "left", width: sourceWidth, onResize: setSourceWidth }), _jsxs("div", { className: "flex h-12 shrink-0 items-center gap-2 border-b border-border px-4", children: [_jsx("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", title: source.title, children: source.title }), _jsx(Button, { ref: closeRef, variant: "ghost", size: "icon", "aria-label": "Close citation", title: "Close citation", className: "size-8", onClick: closeSource, children: _jsx(X, { size: 18 }) })] }), _jsx("div", { className: "relative min-h-0 flex-1 overflow-auto", children: _jsx(PanelContentRenderer, { content: source }) })] }));
+}

package/dist/components/loading-indicator.js

@@ -36,5 +36,5 @@ export function LoadingIndicator() {
     // above it — measured, not guessed: the rows sit at x=469 and so does
     // this. The old `h-10` did NOT belong: a fixed 40px block on top of the
     // parts' own gap-4 left a visible hole under the last tool row.
-    _jsx("div", { className: "min-h-6 px-4", children: _jsxs("div", { className: "flex items-center gap-2 py-0.5 text-foreground leading-relaxed animate-in fade-in duration-300", children: [_jsx("span", { className: stalled ? "text-sm text-warning" : "text-sm text-muted-foreground", children: label }), _jsx("span", { "aria-hidden": "true", className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_infinite]` })] }) }));
+    _jsx("div", { role: "status", "aria-live": "polite", className: "min-h-6 px-4", children: _jsxs("div", { className: "flex items-center gap-2 py-0.5 text-foreground leading-relaxed animate-in fade-in duration-300", children: [_jsx("span", { className: stalled ? "text-xs text-warning" : "text-xs text-muted-foreground", children: label }), _jsx("span", { "aria-hidden": "true", className: `size-1.5 rounded-full ${stalled ? "bg-warning/70" : "bg-primary/60"} animate-[pulse_1.4s_ease-in-out_infinite]` })] }) }));
 }