@iloveagents/foundry-web-shell 0.6.0 → 0.7.0

package/dist/shell-layout.js

@@ -4,6 +4,7 @@ import { Outlet, useLocation } from "react-router";
 import { Sidebar, ToolPanelLayout, ChatHeader, ChatBubble, ThemeDocumentMetadata, ThemeRuntimeProvider, ThemeScope, GlobalSelectionPopover, ChatContent, ContextPins, TooltipIconButton, useAppStore, useNavStore, findNavItem, useChatBubbleStore, useThemeStore, } from "@iloveagents/foundry-web-ui";
 import { cn } from "@iloveagents/foundry-web-primitives";
 import { X } from "lucide-react";
+import { usePagePanelWidth, MIN_PAGE_PANEL_WIDTH } from "./use-page-panel-width.js";
 /**
  * Generic app layout — rendered as the outlet for the customer's routes.
  *
@@ -65,13 +66,30 @@ export function ShellLayout({ modules, baseThemeLayers }) {
     // Page content (Outlet) — always rendered to keep page tools and context alive.
     const page = _jsx(Outlet, {});
     // Aggregate module layoutExtras into a single fragment.
+    const { width: pagePanelWidth, setWidth: setPagePanelWidth, nudgeWidth: nudgePagePanelWidth, startDrag: startPagePanelDrag, maxWidth: pagePanelMaxWidth, } = usePagePanelWidth();
     const layoutExtras = [];
     for (const m of modules) {
         if (m.layoutExtras) {
             layoutExtras.push(_jsx(ModuleExtra, { children: m.layoutExtras }, m.name));
         }
     }
-    return (_jsx(ThemeRuntimeProvider, { layers: themeLayers, mode: themeMode, children: _jsxs(ThemeScope, { className: "flex h-dvh flex-col overflow-hidden bg-background text-foreground", children: [_jsx(ThemeDocumentMetadata, {}), layoutExtras, _jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx(Sidebar, {}), isExpanded ? (_jsx(ToolPanelLayout, { children: _jsxs("div", { className: "flex h-full min-w-0 flex-1 overflow-hidden", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [_jsx(ChatHeader, {}), _jsx(ChatContent, {})] }), showPagePanel && (_jsxs("div", { className: cn("hidden h-full shrink-0 border-l border-border bg-background xl:flex xl:flex-col"), style: { width: 600 }, children: [_jsx(PagePanelActions, {}), _jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: page })] }))] }) })) : (_jsx(ToolPanelLayout, { children: _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsx(ChatHeader, {}), page] }) }))] }), _jsx(ChatBubble, {}), _jsx(GlobalSelectionPopover, {})] }) }));
+    return (_jsx(ThemeRuntimeProvider, { layers: themeLayers, mode: themeMode, children: _jsxs(ThemeScope, { className: "flex h-dvh flex-col overflow-hidden bg-background text-foreground", children: [_jsx(ThemeDocumentMetadata, {}), layoutExtras, _jsxs("div", { className: "flex min-h-0 flex-1 overflow-hidden", children: [_jsx(Sidebar, {}), isExpanded ? (_jsx(ToolPanelLayout, { children: _jsxs("div", { className: "flex h-full min-w-0 flex-1 overflow-hidden", children: [_jsxs("div", { className: "flex min-w-0 flex-1 flex-col overflow-hidden", children: [_jsx(ChatHeader, {}), _jsx(ChatContent, {})] }), showPagePanel && (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize content panel", "aria-valuemin": MIN_PAGE_PANEL_WIDTH, "aria-valuemax": pagePanelMaxWidth, "aria-valuenow": Math.round(pagePanelWidth), tabIndex: 0, onPointerDown: (event) => {
+                                            event.preventDefault();
+                                            startPagePanelDrag(event.pointerId);
+                                        }, onKeyDown: (event) => {
+                                            const step = event.shiftKey ? 80 : 24;
+                                            if (event.key === "ArrowLeft")
+                                                nudgePagePanelWidth(step);
+                                            else if (event.key === "ArrowRight")
+                                                nudgePagePanelWidth(-step);
+                                            else if (event.key === "Home")
+                                                setPagePanelWidth(pagePanelMaxWidth);
+                                            else if (event.key === "End")
+                                                setPagePanelWidth(MIN_PAGE_PANEL_WIDTH);
+                                            else
+                                                return;
+                                            event.preventDefault();
+                                        }, className: cn("hidden w-1.5 shrink-0 cursor-col-resize touch-none xl:block", "bg-transparent hover:bg-primary/30 focus-visible:bg-primary", "focus:outline-none") })), showPagePanel && (_jsxs("div", { className: cn("hidden h-full shrink-0 border-l border-border bg-background xl:flex xl:flex-col"), style: { width: pagePanelWidth }, children: [_jsx(PagePanelActions, {}), _jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: page })] }))] }) })) : (_jsx(ToolPanelLayout, { children: _jsxs("div", { className: "flex flex-1 flex-col overflow-hidden", children: [_jsx(ChatHeader, {}), page] }) }))] }), _jsx(ChatBubble, {}), _jsx(GlobalSelectionPopover, {})] }) }));
 }
 function ModuleExtra({ children }) {
     return _jsx(_Fragment, { children: children });

package/dist/use-page-panel-width.d.ts

@@ -0,0 +1,9 @@
+export declare const MIN_PAGE_PANEL_WIDTH = 360;
+export declare function clampPagePanelWidth(desired: number, viewport: number): number;
+export declare function usePagePanelWidth(): {
+    width: number;
+    setWidth: (next: number) => void;
+    nudgeWidth: (delta: number) => void;
+    startDrag: (pointerId: number) => void;
+    maxWidth: number;
+};

package/dist/use-page-panel-width.js

@@ -0,0 +1,108 @@
+/**
+ * Width of the page panel beside the chat in expanded ("medium") mode.
+ *
+ * The navigation sidebar is resizable; this split was a hardcoded 600px, so
+ * the chat/content ratio was fixed no matter the screen or the task. Users
+ * comparing us to ChatGPT/Claude expect to drag it. Clamped so neither side
+ * collapses, and persisted per user.
+ */
+import { useCallback, useEffect, useRef, useState } from "react";
+export const MIN_PAGE_PANEL_WIDTH = 360;
+/** The chat column must stay usable too. */
+const MIN_CHAT_WIDTH = 420;
+const DEFAULT_PAGE_PANEL_WIDTH = 600;
+const STORAGE_KEY = "foundry.pagePanel.width";
+export function clampPagePanelWidth(desired, viewport) {
+    const max = Math.max(MIN_PAGE_PANEL_WIDTH, viewport - MIN_CHAT_WIDTH);
+    return Math.round(Math.min(max, Math.max(MIN_PAGE_PANEL_WIDTH, desired)));
+}
+function readStored() {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const raw = window.localStorage.getItem(STORAGE_KEY);
+        const parsed = raw ? Number.parseInt(raw, 10) : Number.NaN;
+        return Number.isFinite(parsed) && parsed > 0 ? parsed : null;
+    }
+    catch {
+        return null; // storage disabled — fall back to the default
+    }
+}
+export function usePagePanelWidth() {
+    const [width, setWidthState] = useState(() => {
+        if (typeof window === "undefined")
+            return DEFAULT_PAGE_PANEL_WIDTH;
+        return clampPagePanelWidth(readStored() ?? DEFAULT_PAGE_PANEL_WIDTH, window.innerWidth);
+    });
+    const dragPointerId = useRef(null);
+    const applyWidth = useCallback((resolve, persist = true) => {
+        if (typeof window === "undefined")
+            return;
+        setWidthState((prev) => {
+            const clamped = clampPagePanelWidth(resolve(prev), window.innerWidth);
+            // A drag fires pointermove every frame; writing localStorage each time
+            // is a synchronous main-thread write per frame for a value only the
+            // final position of which matters. Live moves skip the write and the
+            // drag persists once, on release.
+            if (persist) {
+                try {
+                    window.localStorage.setItem(STORAGE_KEY, String(clamped));
+                }
+                catch {
+                    // best-effort; the change still applies for this session
+                }
+            }
+            return clamped;
+        });
+    }, []);
+    const setWidth = useCallback((next) => applyWidth(() => next), [applyWidth]);
+    /** Relative nudge — resolved against the LATEST width, so held/repeated
+     * arrow keys accumulate instead of all reading the same stale value. */
+    const nudgeWidth = useCallback((delta) => applyWidth((prev) => prev + delta), [applyWidth]);
+    // Re-clamp on viewport changes so a narrower window can never strand the
+    // chat column off-screen.
+    useEffect(() => {
+        const onResize = () => setWidthState((w) => clampPagePanelWidth(w, window.innerWidth));
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+    // Drag listeners live in an effect and end on pointerup OR pointercancel,
+    // so a cancelled drag can never leave the document unselectable.
+    useEffect(() => {
+        const onMove = (event) => {
+            if (dragPointerId.current === null)
+                return;
+            applyWidth(() => window.innerWidth - event.clientX, false);
+        };
+        const onEnd = (event) => {
+            if (dragPointerId.current !== null && event.pointerId !== dragPointerId.current)
+                return;
+            const wasDragging = dragPointerId.current !== null;
+            dragPointerId.current = null;
+            // Persist the position the drag actually landed on.
+            if (wasDragging)
+                applyWidth((prev) => prev);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+        };
+        window.addEventListener("pointermove", onMove);
+        window.addEventListener("pointerup", onEnd);
+        window.addEventListener("pointercancel", onEnd);
+        return () => {
+            window.removeEventListener("pointermove", onMove);
+            window.removeEventListener("pointerup", onEnd);
+            window.removeEventListener("pointercancel", onEnd);
+            document.body.style.cursor = "";
+            document.body.style.userSelect = "";
+        };
+    }, [applyWidth]);
+    const startDrag = useCallback((pointerId) => {
+        dragPointerId.current = pointerId;
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+    }, []);
+    const maxWidth = typeof window === "undefined"
+        ? DEFAULT_PAGE_PANEL_WIDTH
+        : clampPagePanelWidth(Number.POSITIVE_INFINITY, window.innerWidth);
+    return { width, setWidth, nudgeWidth, startDrag, maxWidth };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-shell",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,9 +28,9 @@
     "zustand": "^5.0.0"
   },
   "dependencies": {
-    "@iloveagents/foundry-agent": "^0.6.0",
-    "@iloveagents/foundry-web-ui": "^0.6.0",
-    "@iloveagents/foundry-web-primitives": "^0.6.0"
+    "@iloveagents/foundry-web-primitives": "^0.7.0",
+    "@iloveagents/foundry-web-ui": "^0.7.0",
+    "@iloveagents/foundry-agent": "^0.7.0"
   },
   "devDependencies": {
     "@assistant-ui/react": "^0.12.25",