@iloveagents/foundry-web-shell 0.13.0 → 0.14.1

package/dist/shell-layout.js

@@ -89,11 +89,22 @@ export function ShellLayout({ modules, baseThemeLayers }) {
                                             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") })), !isExpanded && _jsx(ChatHeader, {}), _jsxs("div", { className: cn(isExpanded
-                                            ? cn("h-full shrink-0 border-l border-border bg-background xl:flex xl:flex-col", 
-                                            // Below xl (or with the panel off) the chat owns the
-                                            // full width: keep the page mounted, just hidden.
-                                            showPagePanel ? "hidden" : "hidden xl:hidden")
+                                        }, className: cn("hidden w-1.5 shrink-0 cursor-col-resize touch-none min-[780px]:block", "bg-transparent hover:bg-primary/30 focus-visible:bg-primary", "focus:outline-none") })), !isExpanded && _jsx(ChatHeader, {}), _jsxs("div", { className: cn(isExpanded
+                                            ? cn("h-full shrink-0 border-l border-border bg-background", 
+                                            // 780px === SIDE_BY_SIDE_BREAKPOINT_PX, which a
+                                            // test pins to MIN_PAGE_PANEL_WIDTH + MIN_CHAT_WIDTH.
+                                            // The literal cannot be interpolated — Tailwind only
+                                            // sees static class strings — so the two are tied by
+                                            // that test rather than by the compiler.
+                                            // 780px = MIN_PAGE_PANEL_WIDTH + MIN_CHAT_WIDTH, the
+                                            // narrowest viewport where both columns fit. This was
+                                            // `xl` (1280px), which hid the document on every
+                                            // window between the two — expanding the chat beside
+                                            // an open editor made the editor disappear.
+                                            "min-[780px]:flex min-[780px]:flex-col", 
+                                            // Genuinely too narrow (or panel off): chat owns the
+                                            // width and the page stays mounted, just hidden.
+                                            showPagePanel ? "hidden" : "hidden min-[780px]:hidden")
                                             : "flex min-h-0 flex-1 flex-col overflow-hidden"), style: isExpanded && showPagePanel ? { width: pagePanelWidth } : undefined, children: [isExpanded && showPagePanel && _jsx(PagePanelActions, {}), _jsx("div", { className: "flex-1 flex flex-col min-h-0 overflow-hidden", children: page })] })] }) })] }), _jsx(ChatBubble, {}), _jsx(GlobalSelectionPopover, {})] }) }));
 }
 function ModuleExtra({ children }) {
@@ -101,5 +112,5 @@ function ModuleExtra({ children }) {
 }
 function PagePanelActions() {
     const togglePagePanel = useChatBubbleStore((s) => s.togglePagePanel);
-    return (_jsx("div", { className: "shrink-0 flex items-center justify-end px-4 py-3 border-b border-border", children: _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(ContextPins, { compact: true, flyoutDirection: "down" }), _jsx(TooltipIconButton, { tooltip: "Close panel", size: "icon", onClick: togglePagePanel, children: _jsx(X, { className: "size-4" }) })] }) }));
+    return (_jsx("div", { className: "shrink-0 flex items-center justify-end px-4 py-3 border-b border-border", children: _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsx(ContextPins, { compact: true, flyoutDirection: "down", showPinButton: true }), _jsx(TooltipIconButton, { tooltip: "Close panel", size: "icon", onClick: togglePagePanel, children: _jsx(X, { className: "size-4" }) })] }) }));
 }

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

@@ -1,4 +1,25 @@
 export declare const MIN_PAGE_PANEL_WIDTH = 360;
+/**
+ * Narrowest viewport that can show chat and page side by side.
+ *
+ * Both minimums have to fit, so this IS the breakpoint — the layout used a
+ * hand-picked `xl` (1280px) instead, which hid the page on every window
+ * between 780 and 1280. Expanding the chat next to an open document made the
+ * document vanish, on a perfectly ordinary laptop width.
+ *
+ * `shell-layout.tsx` cannot interpolate this into a Tailwind class (they must
+ * be static strings), so it hardcodes `min-[780px]:` and a unit test asserts
+ * the two agree.
+ */
+export declare const SIDE_BY_SIDE_MIN_VIEWPORT: number;
+/**
+ * The width literally written into `shell-layout.tsx`'s `min-[780px]:`
+ * classes. Tailwind only sees static class strings, so the number cannot be
+ * interpolated from {@link SIDE_BY_SIDE_MIN_VIEWPORT} — it is duplicated by
+ * necessity, and `side-by-side-breakpoint` fails the build if the two ever
+ * disagree. Change one, change the class, or the test stops you.
+ */
+export declare const SIDE_BY_SIDE_BREAKPOINT_PX = 780;
 export declare function clampPagePanelWidth(desired: number, viewport: number): number;
 export declare function usePagePanelWidth(): {
     width: number;

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

@@ -10,6 +10,27 @@ 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;
+/**
+ * Narrowest viewport that can show chat and page side by side.
+ *
+ * Both minimums have to fit, so this IS the breakpoint — the layout used a
+ * hand-picked `xl` (1280px) instead, which hid the page on every window
+ * between 780 and 1280. Expanding the chat next to an open document made the
+ * document vanish, on a perfectly ordinary laptop width.
+ *
+ * `shell-layout.tsx` cannot interpolate this into a Tailwind class (they must
+ * be static strings), so it hardcodes `min-[780px]:` and a unit test asserts
+ * the two agree.
+ */
+export const SIDE_BY_SIDE_MIN_VIEWPORT = MIN_PAGE_PANEL_WIDTH + MIN_CHAT_WIDTH;
+/**
+ * The width literally written into `shell-layout.tsx`'s `min-[780px]:`
+ * classes. Tailwind only sees static class strings, so the number cannot be
+ * interpolated from {@link SIDE_BY_SIDE_MIN_VIEWPORT} — it is duplicated by
+ * necessity, and `side-by-side-breakpoint` fails the build if the two ever
+ * disagree. Change one, change the class, or the test stops you.
+ */
+export const SIDE_BY_SIDE_BREAKPOINT_PX = 780;
 const DEFAULT_PAGE_PANEL_WIDTH = 600;
 const STORAGE_KEY = "foundry.pagePanel.width";
 export function clampPagePanelWidth(desired, viewport) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iloveagents/foundry-web-shell",
-  "version": "0.13.0",
+  "version": "0.14.1",
   "license": "MIT",
   "description": "Browser bootstrap and layout shell for Foundry UI — bootstrapShell({ modules, pages, theme, authProvider }) mounts the SPA around foundry-web-ui. Module-agnostic.",
   "keywords": [
@@ -45,9 +45,9 @@
     "zustand": "^5.0.0"
   },
   "dependencies": {
-    "@iloveagents/foundry-agent": "^0.13.0",
-    "@iloveagents/foundry-web-ui": "^0.13.0",
-    "@iloveagents/foundry-web-primitives": "^0.13.0"
+    "@iloveagents/foundry-agent": "^0.14.1",
+    "@iloveagents/foundry-web-primitives": "^0.14.1",
+    "@iloveagents/foundry-web-ui": "^0.14.1"
   },
   "devDependencies": {
     "@assistant-ui/react": "^0.15.1",