@hanzo/rooms 0.1.97 → 0.1.99

package/dist/App.js

@@ -1,5 +1,5 @@
 'use client';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The web app as the whole window, in three modes: Chat, a conversation with
 // the product's AI; Dev, @hanzo/build's `<Builder>` without a rail of its own;
 // and Studio, @hanzo/studio's `<Studio>` the same way, its places (`nav`) in the
@@ -47,7 +47,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // nothing fills it. So Dev's pane is cut on its own and the tabs are Chat's.
 //
 // EVERY MOVE PUTS THE DRAWER AWAY, the one to where the reader already is
-// included.
+// included. A phone's drawer (Drawer.tsx) is the menu behind the pane, the pane
+// sliding toward the end side over it; a move made from it takes its place in
+// the history (`depart`), so Back never reopens it.
 //
 // STUDIO LOADS WITH ITS MODE. Its module (and three.js behind a 3D tab) is
 // fetched the first time the reader stands in Studio; its places are a few
@@ -70,6 +72,7 @@ import { Orgs } from './Orgs.js';
 import { useRooms } from './host.js';
 import { useKept } from './kept.js';
 import { Mark, Rail, spot, Toggle } from './Rail.js';
+import { Foot, Layer, Lift, RAISED, useDrawer } from './Drawer.js';
 import { empty, openThread, useOpen } from './open.js';
 import { Paned } from './Shell.js';
 import { Palette } from './Palette.js';
@@ -87,18 +90,6 @@ const Terminals = lazy(() => import('./Terminals.js'));
 const HOME = { mode: 'chat', thread: null };
 /** The bar's height, px: the reference window's title bar. */
 const BAR = 40;
-/**
- * The dim under the phone's drawer: design's scrim at two fifths, so the page
- * still reads through the drawer's glass. gui carries a `color-mix()` to the
- * page unchanged; its types only name custom properties.
- */
-const DIM = 'color-mix(in srgb, var(--surface-scrim) 40%, transparent)';
-/** The phone's drawer stands the gutter off each edge, or the device's inset where that is wider. */
-const INSET = {
-    top: 'max(var(--pane-gap), var(--safe-top))',
-    bottom: 'max(var(--pane-gap), var(--safe-bottom))',
-    left: 'max(var(--pane-gap), var(--safe-left))',
-};
 /** Where each mode was last, so the rail goes back to it. */
 const last = { chat: '', dev: '', studio: '', tabs: '' };
 /** Whether a key press is the reader typing, where the app's keys are the field's. */
@@ -113,24 +104,26 @@ export function App({ bar } = {}) {
 }
 /** The window itself, drawn once the organization is settled. */
 function Window({ bar }) {
-    const [drawer, setDrawer] = useState(false);
+    const drawer = useDrawer();
+    const { close: shut, depart } = drawer;
     // On a phone the window stands in the visual viewport, so the keyboard never covers the composer (view.ts).
     const view = useView();
-    const shut = useCallback(() => setDrawer(false), []);
+    const hold = drawer.window;
+    const windowRef = useCallback((node) => {
+        view(node);
+        hold(node);
+    }, [view, hold]);
     // The sidebar shut, kept per browser under the key the builder's rail kept it under.
     const [closed, setClosed] = useKept('hanzo.build.rail', false);
     // The palette is open (the sidebar's search; ⌘K toggles it).
     const [finding, setFinding] = useState(false);
     const found = useCallback(() => setFinding(false), []);
     const dev = useDevHost();
-    // The builder's moves put the drawer away first.
+    // The builder's moves put the drawer away, in its place in the history.
     const host = useMemo(() => ({
         ...dev,
-        go: (to, how) => {
-            shut();
-            dev.go(to, how);
-        },
-    }), [dev, shut]);
+        go: (to, how) => depart((replace) => dev.go(to, replace ? { ...how, replace } : how)),
+    }), [dev, depart]);
     const { client } = useAi();
     const { router, path } = useRooms();
     const here = path ?? '/';
@@ -144,15 +137,12 @@ function Window({ bar }) {
         ...host,
         name: 'Hanzo Studio',
         path: made,
-        go: (to, how) => {
-            shut();
-            go(studio(to), how?.replace);
-        },
+        go: (to, how) => depart((replace) => go(studio(to), replace || how?.replace)),
         chooseOrg: (next) => {
             pick(next);
             window.location.assign(studio(''));
         },
-    }), [host, made, shut]);
+    }), [host, made, depart]);
     // A run floats two panes of its own, so the pane it stands in is not cut.
     const run = where !== null && route(where).kind === 'run';
     const asked = at.mode === 'chat' ? at.thread : null;
@@ -161,8 +151,8 @@ function Window({ bar }) {
     // the address does not move (the reader was on that page already).
     useEffect(() => {
         if (settings)
-            setDrawer(false);
-    }, [settings]);
+            shut();
+    }, [settings, shut]);
     const plans = where !== null && isPlans(where);
     useEffect(() => {
         if (plans)
@@ -195,10 +185,12 @@ function Window({ bar }) {
         // The selection writes the address only when it moves.
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [mode, thread]);
+    // The address moved under the drawer: it goes, and the history keeps the move.
+    const drop = drawer.drop;
     useEffect(() => {
         last[mode] = `${window.location.pathname}${window.location.search}`;
-        setDrawer(false);
-    }, [mode, here]);
+        drop();
+    }, [mode, here, drop]);
     // Where the reader was before a place that takes the sidebar (Library, Scheduled
     // tasks, Customize, Settings): its Back returns there, Chat or Dev alike.
     const away = useRef('');
@@ -207,11 +199,8 @@ function Window({ bar }) {
         if (!inPlace)
             away.current = `${window.location.pathname}${window.location.search}`;
     }, [inPlace, here]);
-    /** A move of the app's own: the drawer away, then the address. */
-    const move = useCallback((address) => {
-        shut();
-        go(address);
-    }, [shut]);
+    /** A move of the app's own: the drawer away, the address in its place. */
+    const move = useCallback((address) => depart((replace) => go(address, replace)), [depart]);
     // The app's keys.
     useEffect(() => {
         const key = (e) => {
@@ -248,6 +237,11 @@ function Window({ bar }) {
     const toDev = () => move(last.dev || app(''));
     const toStudio = () => move(last.studio || studio(''));
     const toTabs = () => move(TERMINALS);
+    /** The drawer's New chat. */
+    const fresh = () => {
+        empty();
+        move(talk());
+    };
     // Another organization: picked, and the app opened in it at the mode's New.
     const org = (o) => {
         pick(o);
@@ -259,5 +253,7 @@ function Window({ bar }) {
         shut();
         setFinding(true);
     };
-    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsxs(YStack, { ref: view, "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", "$max-md": { position: 'fixed', t: TOP, l: 0, r: 0, height: HEIGHT }, children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer, onPress: () => setDrawer(true), label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [_jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }) }), closed || mode === 'tabs' ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), onSeek: seek, onBack: back, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, go: move, onMenu: () => setDrawer(true), onChat: toChat, onDev: toDev }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'tabs' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(Suspense, { fallback: null, children: _jsx(Terminals, {}) }) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer ? (_jsxs(_Fragment, { children: [_jsx(YStack, { render: "button", "aria-label": "Close sidebar", onPress: () => setDrawer(false), bg: DIM, position: "absolute", t: 0, r: 0, b: 0, l: 0, z: "var(--z-overlay)", $md: { display: 'none' } }), _jsx(YStack, { "data-slot": "drawer", position: "absolute", t: INSET.top, b: INSET.bottom, l: INSET.left, width: "min(320px, calc(100% - 2 * var(--pane-gap) - 48px))", z: "var(--z-modal)", $md: { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, onSeek: seek, onBack: back, drawer: true, places: sidebar, foot: _jsx(Rail, { host: host, mode: mode, at: where, open: true, flat: true, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }) }) })] })) : null, finding ? _jsx(Palette, { go: move, onClose: found, mode: mode, host: host }) : null] }) }) }) }));
+    return (_jsx(AiProvider, { client: client ?? undefined, children: _jsx(HostProvider, { host: host, children: _jsx(PrefsProvider, { children: _jsxs(YStack, { ref: windowRef, "data-slot": "window", ...(bar ? floor : null), flex: 1, minW: 0, height: "100dvh", overflow: "hidden", "$max-md": { position: 'fixed', t: TOP, l: 0, r: 0, height: HEIGHT, ...{ overflow: 'clip' } }, children: [bar ? (_jsxs(XStack, { "data-slot": "title-bar", height: BAR, shrink: 0, items: "center", gap: 2, pl: (bar.inset ?? 0) + 6, pr: "$2", ...bar.drag, children: [_jsx(XStack, { "$max-md": { display: 'none' }, children: _jsx(Toggle, { open: !closed, onPress: flip }) }), _jsx(XStack, { $md: { display: 'none' }, children: _jsx(Toggle, { open: drawer.state === 'open', onPress: drawer.open, label: "Open sidebar" }) }), _jsx(Mark, { label: "Back", "data-slot": "back", onPress: () => router.back(), children: _jsx(ArrowLeft, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Forward", "data-slot": "forward", onPress: () => router.forward(), children: _jsx(ArrowRight, { size: 18, "aria-hidden": true }) }), _jsx(XStack, { flex: 1, self: "stretch", ...bar.drag })] })) : null, _jsxs(XStack, { ref: drawer.pane, "data-room": "", "data-app": mode, "data-slot": "frame", ...(bar ? null : floor), ...(drawer.slide ? RAISED : null), 
+                            // inline-style: the slide, a transform with no logical form whose sign and distance the drawer writes on the element itself, a drag every frame (Drawer.tsx).
+                            style: drawer.slide ?? undefined, flex: 1, minW: 0, minH: 0, pr: "var(--pane-gap)", pb: "var(--pane-gap)", pt: bar ? 0 : 'var(--pane-gap)', "$max-md": { p: 0 }, children: [drawer.slide ? _jsx(Lift, {}) : null, _jsx(YStack, { height: "100%", "$max-md": { display: 'none' }, children: _jsx(Rail, { host: host, mode: mode, at: where, open: !closed, toggle: bar ? undefined : flip, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }) }), closed || mode === 'tabs' ? null : (_jsx(YStack, { "$max-md": { display: 'none' }, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: () => setClosed(true), onSeek: seek, onBack: back, places: sidebar }) })), _jsxs(YStack, { "data-slot": "stage", flex: 1, minW: 0, minH: 0, ml: "var(--pane-gap)", "$max-md": { ml: 0, pb: FOOT }, children: [bar ? null : _jsx(Top, { host: host, mode: mode, places: sidebar, go: move, onMenu: drawer.open, onChat: toChat, onDev: toDev }), _jsx(XStack, { "data-slot": "panes", flex: 1, minW: 0, minH: 0, children: mode === 'chat' ? (_jsx(Paned, { framed: true, children: _jsx(Chat, {}) })) : mode === 'tabs' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(Suspense, { fallback: null, children: _jsx(Terminals, {}) }) })) : mode === 'studio' ? (_jsx(YStack, { render: "main", "data-slot": "pane", ...pane(), overflow: "hidden", flex: 1, minW: 0, minH: 0, children: _jsx(YStack, { flex: 1, minH: 0, height: "100%", children: _jsx(Suspense, { fallback: null, children: _jsx(Studio, { host: maker, rail: false }) }) }) })) : (_jsx(YStack, { render: "main", "data-slot": "pane", ...(run ? null : { ...pane(), overflow: 'hidden' }), flex: 1, minW: 0, minH: 0, children: plans ? null : _jsx(Builder, { host: host, rail: false }) })) })] })] }), drawer.state === 'shut' ? null : (_jsx(Layer, { drawer: drawer, top: bar ? BAR : 0, children: _jsx(Column, { host: host, mode: mode, thread: thread, go: move, onShut: shut, onSeek: seek, onBack: back, drawer: true, places: sidebar, rail: _jsx(Rail, { host: host, mode: mode, at: where, open: true, rows: true, onChat: toChat, onDev: toDev, onStudio: toStudio, onTabs: toTabs, go: move, onOrg: org }), foot: _jsx(Foot, { host: host, onChat: fresh, onOrg: org }) }) })), finding ? _jsx(Palette, { go: move, onClose: found, mode: mode, host: host }) : null] }) }) }) }));
 }

package/dist/Column.d.ts

@@ -2,7 +2,7 @@ import { type Host } from '@hanzo/build';
 import { type RailLink } from '@hanzo/ui/chat';
 import { type ReactNode } from 'react';
 import { type Place } from './lib/host.js';
-export declare function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer, foot, places, }: {
+export declare function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer, rail, foot, places, }: {
     host: Host;
     mode: Place['mode'];
     /** The Chat conversation the pane holds, or null. */
@@ -15,9 +15,11 @@ export declare function Column({ host, mode, thread, go, onShut, onSeek, onBack,
     onSeek?: () => void;
     /** Leaves a place that took the sidebar, for where the reader was before it. */
     onBack: () => void;
-    /** Drawn in the phone's drawer: no edge, cut as a floating pane. */
+    /** Drawn in the phone's drawer (Drawer.tsx): on the floor behind the pane, no edge, no handle. */
     drawer?: boolean;
-    /** What stands at its foot: the drawer's rail, laid flat. */
+    /** What stands under the mode's own rows: the drawer's places, the rail's as rows. */
+    rail?: ReactNode;
+    /** What stands at its foot: the drawer's account and New chat. */
     foot?: ReactNode;
     /** The mode's places, where they are not Dev's (Studio's `nav`). */
     places?: {

package/dist/Column.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The app's sidebar, beside the rail on the window's floor (App.tsx): the
 // mode's name with the bell and the search at its right, New, Dev's places in
 // Dev, the reader's Recents (Pinned first), and the first-run cards. Which
-// product it lists is the rail's to say; the account is at the rail's foot.
+// product it lists is the rail's to say; the account is at the rail's foot, or
+// on a phone at the foot of its menu (Drawer.tsx), where this column is the menu.
 //
 // It is the window, not a panel: no fill, no edge, the floor's own ground. The
 // content beside it is the panel, inset by the gutter.
@@ -35,22 +36,11 @@ import { Setup } from './Setup.js';
 import { ago } from './recent.js';
 import { empty } from './open.js';
 import { useSpan } from './span.js';
-import { pane } from './ground.js';
 import { talk } from './lib/host.js';
 import { brand, wordmark } from './where.js';
 /** The sidebar fills the column. Its `width` is typed in px alone, though its frame takes any gui size — the type is
  *  @hanzo/ui's to widen. */
 const FILL = { width: '100%' };
-/**
- * The phone's drawer floats over the page under the browser's own glass bar, so
- * it is cut like that bar: the composer's corner, the strong hairline, the lit
- * top edge and the floating drop. Its fill and blur stay the pane's.
- */
-const FLOAT = {
-    borderRadius: 'var(--radius-composer)',
-    borderColor: 'var(--border-strong)',
-    boxShadow: 'var(--edge-highlight), var(--shadow-floating)',
-};
 /** The sidebar's width, px: its default, and the two a drag holds it between. */
 const WIDTH = 240;
 const FLOOR = 200;
@@ -66,14 +56,14 @@ const keys = (press) => ({
         press();
     },
 });
-/** A row of the sidebar: a pill on a 31px pitch, lit where the reader is. */
-const ROW = { rounded: '$4', minH: 31, py: 0, px: '$2' };
+/** A row of the sidebar: a pill on a 31px pitch, a thumb's 44 on a touch screen, lit where the reader is. */
+const ROW = { rounded: '$4', minH: 31, py: 0, px: '$2', $touchable: { minH: 44 } };
 /** The run activity behind the bell: the runs that moved last, newest first. */
 const RECENT = 6;
 /** What a place that takes the sidebar is called at its head. */
 const TITLE = { library: 'Library', scheduled: 'Scheduled tasks', customize: 'Customize', settings: 'Settings' };
-/** A header mark: a 16px glyph in a 32px target. */
-const HEAD = { width: 32, height: 32, rounded: '$3' };
+/** A header mark: a 16px glyph in a 32px target, a thumb's 44 on a touch screen. */
+const HEAD = { width: 32, height: 32, rounded: '$3', $touchable: { width: 44, height: 44 } };
 function Activity({ host }) {
     const { t } = useI18n();
     const store = useSessions(host);
@@ -94,7 +84,7 @@ function Activity({ host }) {
     ];
     return (_jsx(DropdownMenu, { minWidth: 280, trigger: _jsx(XStack, { render: "button", "aria-label": t("Activity"), ...{ title: 'Activity' }, ...HEAD, items: "center", justify: "center", cursor: "pointer", opacity: 0.7, hoverStyle: { bg: '$hover', opacity: 1 }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: _jsx(Bell, { size: 16, "aria-hidden": true }) }), items: items }));
 }
-export function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer = false, foot, places, }) {
+export function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer = false, rail, foot, places, }) {
     const { t } = useI18n();
     // The desktop sidebar and a phone's drawer can both be in the page: each names its own group labels.
     const uid = useId();
@@ -121,5 +111,5 @@ export function Column({ host, mode, thread, go, onShut, onSeek, onBack, drawer
     };
     return (_jsxs(YStack, { "data-slot": "app-column", ref: drawer ? undefined : span.ref, 
         // inline-style: `--span`, the width a drag rewrites on the element itself (span.ts); no prop sets a variable.
-        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), ...(drawer ? { ...pane(), ...FLOAT } : { bg: 'transparent', borderWidth: 0 }), ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [at ? (_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: 2, pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(SidebarIconButton, { label: t("Back"), "data-slot": "place-back", onPress: onBack, ...HEAD, children: _jsx(ArrowLeft, { size: 16, "aria-hidden": true }) }), _jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, "data-slot": "place-name", children: TITLE[at] })] })) : (_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), _jsx(SidebarIconButton, { label: t("Search"), onPress: onSeek, "aria-haspopup": "dialog", ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] })), mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: t("New chat") }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i && g.label ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i && g.label ? `${uid}-${g.id}` : undefined, "aria-label": i && g.label ? undefined : g.label || (at ? TITLE[at] : g.id), gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), mode === 'studio' || mode === 'tabs' || at ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, onOpen: open, onNew: create }), at ? null : (_jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] })), foot] }), drawer ? null : (_jsx(Gutter, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: t("Resize sidebar") }))] }));
+        style: drawer ? undefined : span.style, position: "relative", flex: drawer ? 1 : undefined, shrink: drawer ? 1 : 0, minW: 0, height: "100%", width: drawer ? undefined : 'var(--span)', children: [_jsxs(Sidebar, { "data-slot": "app-rail", role: "navigation", "aria-label": brand(), bg: "transparent", borderWidth: 0, ...FILL, px: "$2", pt: drawer ? '$2' : 0, pb: "$2", gap: "$0", children: [at ? (_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: 2, pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(SidebarIconButton, { label: t("Back"), "data-slot": "place-back", onPress: onBack, ...HEAD, children: _jsx(ArrowLeft, { size: 16, "aria-hidden": true }) }), _jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, "data-slot": "place-name", children: TITLE[at] })] })) : (_jsxs(XStack, { "data-slot": "app-head", items: "center", gap: "$1", pl: "$2", pr: 2, height: 52, shrink: 0, minW: 0, children: [_jsx(Text, { flex: 1, minW: 0, fontSize: 18, lineHeight: 24, fontWeight: "600", color: "$ink", numberOfLines: 1, children: wordmark(mode) }), _jsx(Activity, { host: host }), _jsx(SidebarIconButton, { label: t("Search"), onPress: onSeek, "aria-haspopup": "dialog", ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] })), mode === 'chat' ? (_jsx(YStack, { role: "list", gap: 2, shrink: 0, children: _jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, bg: "transparent", hoverStyle: { bg: '$hover' }, icon: _jsx(SquarePen, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: _jsx(Text, { fontSize: "$3", color: "$ink", children: t("New chat") }) }) }) })) : (_jsx(YStack, { "data-slot": "app-places", shrink: 0, children: groups.map((g, i) => (_jsxs(YStack, { pt: i ? '$2' : 0, children: [i && g.label ? (_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$3", color: "$soft", children: g.label })) : null, _jsx(YStack, { role: "list", "aria-labelledby": i && g.label ? `${uid}-${g.id}` : undefined, "aria-label": i && g.label ? undefined : g.label || (at ? TITLE[at] : g.id), gap: 1, children: g.links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.id === NEW ? _jsx(SquarePen, { size: 16, "aria-hidden": true }) : link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: _jsx(Text, { fontSize: "$3", color: link.active ? '$ink' : '$quiet', children: link.label }) }) }, link.id))) })] }, g.id))) })), rail, mode === 'studio' || mode === 'tabs' || at ? null : _jsx(Recents, { host: host, mode: mode, thread: thread, onOpen: open, onNew: create }), at ? null : (_jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] })), foot] }), drawer ? null : (_jsx(Gutter, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: t("Resize sidebar") }))] }));
 }

package/dist/Drawer.d.ts

@@ -0,0 +1,55 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import { type Who } from './Me.js';
+import { type State } from './slide.js';
+/** A press that moves the app: told whether it should take the menu's place in history. */
+export type Move = (replace: boolean) => void;
+export interface Drawer {
+    state: State;
+    open: () => void;
+    close: () => void;
+    /** Moves the app from the menu: the move replaces the menu's history entry, and the menu goes. */
+    depart: (move: Move) => void;
+    /** The address moved under the menu, by a way that was not `depart`: the menu goes, and its entry stays behind the move. */
+    drop: () => void;
+    /** The window: everything in it but the menu is inert while the menu is out. */
+    window: (node: unknown) => void;
+    /** The pane that slides. */
+    pane: (node: unknown) => void;
+    /** The menu's layer. */
+    layer: (node: unknown) => void;
+    /** The pane's slide, for its `style`: null while shut, so nothing is transformed and nothing is raised. */
+    slide: CSSProperties | null;
+}
+export declare function useDrawer(): Drawer;
+/**
+ * The pane while the menu is out: raised over the floor, its edge drawn and a
+ * drop falling on the menu, clipped to its corners. Spread on the pane beside
+ * `slide`; `Lift` is its fill.
+ */
+export declare const RAISED: {
+    readonly z: 'var(--z-raised)';
+    readonly overflow: 'hidden';
+    readonly boxShadow: '0 0 0 1px var(--pane-edge), var(--shadow-floating)';
+};
+/**
+ * The raised pane's fill: the pane's own material composited opaque, a step
+ * brighter than the floor the menu stands on, in both themes. Drawn UNDER the
+ * pane's content (`--z-under` inside the pane's own stacking) rather than as the
+ * pane's background, which is the frame's and a host may paint it at rest.
+ */
+export declare function Lift(): import("react").JSX.Element;
+/**
+ * The menu's layer: the menu at the start on the floor, and over the strip of
+ * pane left in sight the press that closes it. Drawn while the drawer is not shut.
+ */
+export declare function Layer({ drawer, top, children }: {
+    drawer: Drawer;
+    top?: number;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The menu's foot: the account (its menu opens above it) and the accent New chat. */
+export declare function Foot({ host, onChat, onOrg }: {
+    host: Who;
+    onChat: () => void;
+    onOrg: (org: string) => void;
+}): import("react").JSX.Element;

package/dist/Drawer.js

@@ -0,0 +1,334 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// A phone's menu (App.tsx, under gui's `md`), drawn the way the ChatGPT iOS app
+// draws its own: the menu stands BEHIND, on the window's subdued floor, and the
+// pane slides toward the END side over it, raised — the pane's own brighter
+// material, its start corners rounded, a drop falling on the menu. A strip of
+// the pane stays in sight; a press on it, or a pull back toward the start, slides
+// it home.
+//
+//   ┌──────────────────────────┬────╮
+//   │ Hanzo AI           🔔 ⌕  │    │   the pane: STRIP px of it, inert but for
+//   │ ✎ New chat                │    │   the press that closes (`drawer-close`)
+//   │ ◇ Studio  ⌨ Tabs  ⋯ More  │    │
+//   │ Pinned …  Recents …       │    │
+//   │ (ZK)            (✎ Chat)  │    │   the foot: the account and the accent New chat
+//   └──────────────────────────┴────╯
+//
+// Three states, because the slide home has to be seen: shut (no menu, the pane
+// as it always is), open, and closing (the menu still drawn, the pane sliding
+// home), after which the menu unmounts. The pane's offset is a transform, so the
+// slide is the compositor's; under reduced motion it is not animated at all.
+//
+// THE SLIDE IS LOGICAL but for its sign (slide.ts): the menu stands at the
+// start, the strip at the end, both by logical insets; the transform's sign is
+// read off the pane's own `direction` as the menu opens, so an RTL page (by
+// @hanzo/i18n or the host's own `dir`) slides the pane left, and a drag reads
+// along the line the same way.
+//
+// WHILE IT IS OUT the window behind it is inert (`inert` on every other child of
+// the window) and the menu is a modal dialog: focus moves into it as it opens and
+// back to what opened it as it shuts; Escape closes it, unless a menu or dialog
+// it opened holds the focus; Back closes it, because opening it pushed an entry
+// of the same address that Back pops. A move made from inside it takes that
+// entry's place (`depart`), so the history holds the move and never the menu.
+// Its list's scroll stays its own (Recents' `overscrollBehavior`), and the pane,
+// never unmounted, keeps its own.
+import { useI18n } from '@hanzo/i18n/react';
+import { Text, XStack, YStack, useMedia } from '@hanzo/gui';
+import { SquarePen } from 'lucide-react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { Me } from './Me.js';
+import { axis, OPEN, pull, settle, sign } from './slide.js';
+/**
+ * The pane's offset as a transform: `--drawer-way` the end side's sign,
+ * `--drawer-at` the distance, both written on the pane by the drawer (a drag
+ * rewrites the distance every frame, no React commit). Its start corners round.
+ */
+const SLIDE = {
+    transform: 'translateX(calc(var(--drawer-way, 1) * var(--drawer-at, 0px)))',
+    borderStartStartRadius: 'var(--radius-composer)',
+    borderEndStartRadius: 'var(--radius-composer)',
+};
+/** The slide's motion: the system's base duration on its entrance curve. */
+const MOTION = 'transform var(--duration-base) var(--ease-emphasis)';
+/** The element a gui stack hands its ref, on the web. */
+const element = (node) => (node instanceof HTMLElement ? node : null);
+/** The reader asked for no motion. */
+function useStill() {
+    const [still, setStill] = useState(false);
+    useEffect(() => {
+        const query = window.matchMedia?.('(prefers-reduced-motion: reduce)');
+        if (!query)
+            return;
+        const read = () => setStill(query.matches);
+        read();
+        query.addEventListener('change', read);
+        return () => query.removeEventListener('change', read);
+    }, []);
+    return still;
+}
+/** The pane's distance from home, px, measured: where it stands against the layer, which stands where it rests. */
+const travel = (pane, layer) => Math.abs(pane.getBoundingClientRect().left - layer.getBoundingClientRect().left);
+export function useDrawer() {
+    const [state, setState] = useState('shut');
+    // Which way the end side is; read as the menu opens.
+    const [way, setWay] = useState(1);
+    const still = useStill();
+    const media = useMedia();
+    const win = useRef(null);
+    const pane = useRef(null);
+    const layer = useRef(null);
+    const opener = useRef(null);
+    // The entry opening pushed is the one the history stands on.
+    const marked = useRef(false);
+    const home = useCallback((now = false) => setState((s) => (s === 'shut' || now || still ? 'shut' : 'closing')), [still]);
+    const open = useCallback(() => {
+        const el = pane.current;
+        setWay(sign(el ? getComputedStyle(el).direction : 'ltr'));
+        const at = document.activeElement;
+        if (at instanceof HTMLElement && at !== document.body)
+            opener.current = at;
+        if (!marked.current) {
+            window.history.pushState(window.history.state, '');
+            marked.current = true;
+        }
+        setState('open');
+    }, []);
+    const close = useCallback(() => {
+        if (marked.current) {
+            marked.current = false;
+            window.history.back();
+        }
+        home();
+    }, [home]);
+    const depart = useCallback((move) => {
+        const replace = marked.current;
+        marked.current = false;
+        const before = window.location.href;
+        move(replace);
+        // Nothing moved (the reader was there already): the menu's entry is popped instead.
+        if (replace && window.location.href === before)
+            window.history.back();
+        home();
+    }, [home]);
+    const drop = useCallback(() => {
+        marked.current = false;
+        home();
+    }, [home]);
+    // Back closes it: the entry it pushed is the one popped.
+    useEffect(() => {
+        if (state !== 'open')
+            return;
+        const back = () => {
+            if (!marked.current)
+                return;
+            marked.current = false;
+            home();
+        };
+        window.addEventListener('popstate', back);
+        return () => window.removeEventListener('popstate', back);
+    }, [state, home]);
+    // Escape closes it, unless a menu or dialog it opened holds the focus: that one closes first.
+    useEffect(() => {
+        if (state !== 'open')
+            return;
+        const key = (e) => {
+            if (e.key !== 'Escape' || e.defaultPrevented)
+                return;
+            const at = document.activeElement;
+            if (at && at !== document.body && !layer.current?.contains(at))
+                return;
+            e.preventDefault();
+            close();
+        };
+        document.addEventListener('keydown', key);
+        return () => document.removeEventListener('keydown', key);
+    }, [state, close]);
+    // A window that grows past a phone has no drawer: it goes at once.
+    useEffect(() => {
+        if (!media.md || state === 'shut')
+            return;
+        if (marked.current) {
+            marked.current = false;
+            window.history.back();
+        }
+        home(true);
+    }, [media.md, state, home]);
+    // Everything in the window but the menu is inert while it is out, and the focus goes in.
+    useLayoutEffect(() => {
+        const w = win.current;
+        const out = state !== 'shut';
+        if (w)
+            for (const child of Array.from(w.children))
+                if (child !== layer.current && child instanceof HTMLElement)
+                    child.inert = out;
+        if (state === 'open')
+            layer.current?.focus({ preventScroll: true });
+        if (state !== 'shut')
+            return;
+        // Shut: the focus goes back to what opened it, where nothing else took it.
+        const back = opener.current;
+        opener.current = null;
+        const at = document.activeElement;
+        if (back?.isConnected && (!at || at === document.body))
+            back.focus({ preventScroll: true });
+    }, [state]);
+    // The slide, written on the pane: its way, its motion, and how far it stands from home.
+    useLayoutEffect(() => {
+        const s = pane.current?.style;
+        if (!s)
+            return;
+        if (state === 'shut') {
+            for (const p of ['--drawer-at', '--drawer-way', 'transition'])
+                s.removeProperty(p);
+            return;
+        }
+        s.setProperty('--drawer-way', String(way));
+        s.setProperty('transition', still ? 'none' : MOTION);
+        s.setProperty('--drawer-at', state === 'open' ? OPEN : '0px');
+    }, [state, way, still]);
+    // Closing ends when the slide does, or after it would have.
+    useEffect(() => {
+        if (state !== 'closing')
+            return;
+        const el = pane.current;
+        const done = () => setState((s) => (s === 'closing' ? 'shut' : s));
+        const end = (e) => {
+            if (e.target === el && e.propertyName === 'transform')
+                done();
+        };
+        el?.addEventListener('transitionend', end);
+        const late = window.setTimeout(done, 700);
+        return () => {
+            el?.removeEventListener('transitionend', end);
+            window.clearTimeout(late);
+        };
+    }, [state]);
+    // A finger on the menu or the strip pulls the pane along the line; a scroll stays a scroll.
+    useEffect(() => {
+        const el = pane.current;
+        const over = layer.current;
+        if (state !== 'open' || !el || !over)
+            return;
+        let grip = null;
+        let pulling = false;
+        let at = 0;
+        let last = { along: 0, t: 0 };
+        let speed = 0;
+        const down = (e) => {
+            if (e.pointerType === 'mouse' && e.button !== 0)
+                return;
+            grip = { id: e.pointerId, x: e.clientX, y: e.clientY, reach: travel(el, over) };
+            pulling = false;
+            at = grip.reach;
+            last = { along: 0, t: e.timeStamp };
+            speed = 0;
+        };
+        const move = (e) => {
+            if (!grip || e.pointerId !== grip.id)
+                return;
+            const dx = e.clientX - grip.x;
+            if (!pulling) {
+                const a = axis(dx, e.clientY - grip.y);
+                if (a === null)
+                    return;
+                if (a === 'y') {
+                    grip = null;
+                    return;
+                }
+                pulling = true;
+                over.setPointerCapture?.(e.pointerId);
+                el.style.setProperty('transition', 'none');
+            }
+            e.preventDefault();
+            at = pull(grip.reach, dx, way, grip.reach);
+            const along = dx * way;
+            const dt = e.timeStamp - last.t;
+            if (dt > 0)
+                speed = (along - last.along) / dt;
+            last = { along, t: e.timeStamp };
+            el.style.setProperty('--drawer-at', `${at}px`);
+        };
+        const up = (e) => {
+            if (!grip || e.pointerId !== grip.id)
+                return;
+            const reach = grip.reach;
+            grip = null;
+            if (!pulling)
+                return;
+            pulling = false;
+            el.style.setProperty('transition', still ? 'none' : MOTION);
+            // The press that ends a pull is not a tap on the strip.
+            const swallow = (c) => {
+                c.stopPropagation();
+                c.preventDefault();
+            };
+            window.addEventListener('click', swallow, { capture: true, once: true });
+            window.setTimeout(() => window.removeEventListener('click', swallow, { capture: true }), 0);
+            if (e.type === 'pointerup' && !settle(at, reach, speed))
+                close();
+            else
+                el.style.setProperty('--drawer-at', OPEN);
+        };
+        over.addEventListener('pointerdown', down);
+        over.addEventListener('pointermove', move);
+        over.addEventListener('pointerup', up);
+        over.addEventListener('pointercancel', up);
+        return () => {
+            over.removeEventListener('pointerdown', down);
+            over.removeEventListener('pointermove', move);
+            over.removeEventListener('pointerup', up);
+            over.removeEventListener('pointercancel', up);
+        };
+    }, [state, way, still, close]);
+    return {
+        state,
+        open,
+        close,
+        depart,
+        drop,
+        window: useCallback((node) => {
+            win.current = element(node);
+        }, []),
+        pane: useCallback((node) => {
+            pane.current = element(node);
+        }, []),
+        layer: useCallback((node) => {
+            layer.current = element(node);
+        }, []),
+        slide: state === 'shut' ? null : SLIDE,
+    };
+}
+/**
+ * The pane while the menu is out: raised over the floor, its edge drawn and a
+ * drop falling on the menu, clipped to its corners. Spread on the pane beside
+ * `slide`; `Lift` is its fill.
+ */
+export const RAISED = {
+    z: 'var(--z-raised)',
+    overflow: 'hidden',
+    boxShadow: '0 0 0 1px var(--pane-edge), var(--shadow-floating)',
+};
+/**
+ * The raised pane's fill: the pane's own material composited opaque, a step
+ * brighter than the floor the menu stands on, in both themes. Drawn UNDER the
+ * pane's content (`--z-under` inside the pane's own stacking) rather than as the
+ * pane's background, which is the frame's and a host may paint it at rest.
+ */
+export function Lift() {
+    return _jsx(YStack, { "data-slot": "lift", position: "absolute", inset: 0, bg: "var(--pane-solid)", z: "var(--z-under)", pointerEvents: "none" });
+}
+/**
+ * The menu's layer: the menu at the start on the floor, and over the strip of
+ * pane left in sight the press that closes it. Drawn while the drawer is not shut.
+ */
+export function Layer({ drawer, top = 0, children }) {
+    const { t } = useI18n();
+    return (_jsxs(YStack, { ref: drawer.layer, role: "dialog", "aria-modal": true, "aria-label": t('Menu'), tabIndex: -1, "data-slot": "drawer", "data-state": drawer.state, position: "absolute", t: top, b: 0, insetInlineStart: 0, insetInlineEnd: 0, outlineStyle: "none", $md: { display: 'none' }, children: [_jsx(YStack, { "data-slot": "menu", position: "absolute", t: 0, b: 0, insetInlineStart: 0, width: OPEN, bg: "var(--pane-floor)", pt: "var(--safe-top)", pb: "max(var(--pane-gap), var(--safe-bottom))", ...{ paddingInlineStart: 'max(var(--safe-left), var(--safe-right))', touchAction: 'pan-y' }, children: children }), drawer.state === 'open' ? (_jsx(YStack, { render: "button", "data-slot": "drawer-close", "aria-label": t('Close sidebar'), onPress: drawer.close, position: "absolute", t: 0, b: 0, insetInlineEnd: 0, z: "var(--z-panel)", bg: "transparent", borderWidth: 0, cursor: "pointer", ...{ insetInlineStart: OPEN, touchAction: 'none' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' } })) : null] }));
+}
+/** The menu's foot: the account (its menu opens above it) and the accent New chat. */
+export function Foot({ host, onChat, onOrg }) {
+    const { t } = useI18n();
+    return (_jsxs(XStack, { "data-slot": "drawer-foot", items: "center", justify: "space-between", gap: "$2", pt: "$2", px: "$1", shrink: 0, children: [_jsx(Me, { host: host, narrow: true, above: true, onOrg: onOrg }), _jsxs(XStack, { render: "button", "data-slot": "drawer-chat", "aria-label": t('New chat'), onPress: onChat, height: 44, px: "$4", gap: "$2", rounded: 9999, items: "center", justify: "center", bg: "var(--accent)", borderWidth: 0, cursor: "pointer", hoverStyle: { bg: 'var(--accent-hover)' }, pressStyle: { bg: 'var(--accent-hover)' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(SquarePen, { size: 18, color: "var(--accent-foreground)", "aria-hidden": true }), _jsx(Text, { fontSize: "$4", fontWeight: "600", color: "var(--accent-foreground)", children: t('Chat') })] })] }));
+}

package/dist/Me.d.ts

@@ -26,8 +26,8 @@ export declare function Me({ host, narrow, above, onOrg, }: {
     /** The rail's: the face alone, the menu opening beside it. */
     narrow?: boolean;
     /**
-     * The menu opens above the face, not beside it: the rail laid along a phone
-     * drawer's foot. That copy leaves ⌘/ to the rail's own, so one press opens one dialog.
+     * The menu opens above the face, not beside it: the foot of a phone's menu
+     * (Drawer.tsx). That copy leaves ⌘/ to the rail's own, so one press opens one dialog.
      */
     above?: boolean;
     /** Work in another organization: picked, then the app opened in it. */

package/dist/Me.js

@@ -199,7 +199,9 @@ export function Me({ host, narrow = false, above = false, onOrg, }) {
                 // Clear of the rail's mark (or the row) it opens from, and flush with its foot.
                 offset: 8, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(XStack, { ref: (el) => {
                                 row.current = el instanceof HTMLElement ? el : null;
-                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, ...{ title: who }, width: narrow ? 36 : '100%', minH: narrow ? 36 : 48, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 26 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), working ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: working })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsxs(DropdownMenuContent, { minW: 260, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": t("Account"), onCloseAutoFocus: back, children: [_jsxs(DropdownMenuSub, { open: account, onOpenChange: setAccount, children: [_jsxs(DropdownMenuSubTrigger, { minH: 48, gap: "$2.5", children: [_jsx(Face, { host: host, size: 28 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", fontWeight: "600", color: "$ink", numberOfLines: 1, children: who }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: host.person.email || working })] })] }), account ? (_jsxs(DropdownMenuSubContent, { minW: 260, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [_jsx(Meter, { read: read, onPlans: () => leave('here'), onBilling: () => (setOpen(false), showSettings('billing')) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: t("Organizations") }), all.map((o) => (_jsx(DropdownMenuItem, { onSelect: () => o.name !== current && onOrg(o.name), children: _jsx(Line, { icon: _jsx(Mark, { org: o }), sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), trail: o.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: o.display }) }, o.name))), _jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Plus, { size: 16, "aria-hidden": true }), children: t("Create organization") }) }), _jsx(DropdownMenuItem, { onSelect: () => out(site(ORG_SETTINGS)), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), children: t("Organization settings") }) }), where().team ? null : here && !here.personal ? (_jsx(DropdownMenuItem, { onSelect: () => out(`${ENTRY}&org=${encodeURIComponent(here.name)}`), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), trail: _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }), children: t("Open in Hanzo Team") }) })) : (_jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), children: t("Create a team") }) })), superAdmin() ? (_jsx(DropdownMenuItem, { onSelect: choose, children: _jsx(Line, { icon: _jsx(Building2, { size: 16, "aria-hidden": true }), children: t("All organizations") }) })) : null] })) : null] }), team ? (_jsx(DropdownMenuItem, { "data-slot": "me-team", onSelect: () => team.name !== current && onOrg(team.name), children: _jsx(Line, { icon: _jsx(Mark, { org: team }), trail: team.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: `${team.display} · ${teamPlan || 'No plan'}` }) })) : null, personal ? (_jsx(DropdownMenuItem, { "data-slot": "me-personal", onSelect: () => personal.name !== current && onOrg(personal.name), actionsVisibility: "always", actions: ownPlan ? undefined : (_jsx(Button, { size: "xs", variant: "outline", onPress: getPro, children: t("Get Pro") })), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), trail: personal.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: `Personal · ${ownPlan || 'No plan'}` }) })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => leave('here'), children: _jsx(Line, { icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), children: upgrade(read.value?.label?.name) }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Palette, { size: 16, "aria-hidden": true }), children: t("Personalization") }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('account'), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), children: t("Profile") }) }), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+, Meta+,", onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘,' : 'Ctrl+,' }), children: t("Settings") }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site('/beta/status')), children: _jsx(Line, { icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), children: t("Beta") }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { open: help, onOpenChange: setHelp, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(LifeBuoy, { size: 16, "aria-hidden": true }), children: t("Help") }) }), help ? (_jsxs(DropdownMenuSubContent, { minW: 240, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [pages().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], trail: p.key === 'help' ? _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }) : null, children: p.label }) }, p.key))), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+/ Meta+/", onSelect: () => setKeys(true), children: _jsx(Line, { icon: _jsx(Keyboard, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘/' : 'Ctrl+/' }), children: t("Keyboard shortcuts") }) }), _jsx(DropdownMenuSeparator, {}), legal().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], children: p.label }) }, p.key)))] })) : null] }), host.signOut ? (_jsx(DropdownMenuItem, { onSelect: () => host.signOut?.(), children: _jsx(Line, { icon: _jsx(LogOut, { size: 16, "aria-hidden": true }), children: t("Log out") }) })) : null] })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), _jsx(Shortcuts, { open: keys, onOpenChange: setKeys, apple: apple })] }));
+                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, ...{ title: who }, width: narrow ? 36 : '100%', minH: narrow ? 36 : 48, 
+                            // A thumb's 44 on a touch screen.
+                            $touchable: narrow ? { width: 44, minH: 44 } : undefined, px: narrow ? 0 : '$2', gap: "$2.5", rounded: narrow ? 999 : '$5', items: "center", justify: narrow ? 'center' : 'flex-start', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: [_jsx(Face, { host: host, size: narrow ? 26 : 32 }), narrow ? null : (_jsxs(_Fragment, { children: [_jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, text: "left", children: who }), working ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: working })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsxs(DropdownMenuContent, { minW: 260, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": t("Account"), onCloseAutoFocus: back, children: [_jsxs(DropdownMenuSub, { open: account, onOpenChange: setAccount, children: [_jsxs(DropdownMenuSubTrigger, { minH: 48, gap: "$2.5", children: [_jsx(Face, { host: host, size: 28 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", fontWeight: "600", color: "$ink", numberOfLines: 1, children: who }), _jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: host.person.email || working })] })] }), account ? (_jsxs(DropdownMenuSubContent, { minW: 260, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [_jsx(Meter, { read: read, onPlans: () => leave('here'), onBilling: () => (setOpen(false), showSettings('billing')) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: t("Organizations") }), all.map((o) => (_jsx(DropdownMenuItem, { onSelect: () => o.name !== current && onOrg(o.name), children: _jsx(Line, { icon: _jsx(Mark, { org: o }), sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), trail: o.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: o.display }) }, o.name))), _jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Plus, { size: 16, "aria-hidden": true }), children: t("Create organization") }) }), _jsx(DropdownMenuItem, { onSelect: () => out(site(ORG_SETTINGS)), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), children: t("Organization settings") }) }), where().team ? null : here && !here.personal ? (_jsx(DropdownMenuItem, { onSelect: () => out(`${ENTRY}&org=${encodeURIComponent(here.name)}`), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), trail: _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }), children: t("Open in Hanzo Team") }) })) : (_jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), children: t("Create a team") }) })), superAdmin() ? (_jsx(DropdownMenuItem, { onSelect: choose, children: _jsx(Line, { icon: _jsx(Building2, { size: 16, "aria-hidden": true }), children: t("All organizations") }) })) : null] })) : null] }), team ? (_jsx(DropdownMenuItem, { "data-slot": "me-team", onSelect: () => team.name !== current && onOrg(team.name), children: _jsx(Line, { icon: _jsx(Mark, { org: team }), trail: team.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: `${team.display} · ${teamPlan || 'No plan'}` }) })) : null, personal ? (_jsx(DropdownMenuItem, { "data-slot": "me-personal", onSelect: () => personal.name !== current && onOrg(personal.name), actionsVisibility: "always", actions: ownPlan ? undefined : (_jsx(Button, { size: "xs", variant: "outline", onPress: getPro, children: t("Get Pro") })), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), trail: personal.name === current ? _jsx(Check, { size: 16, "aria-label": t("Current") }) : null, children: `Personal · ${ownPlan || 'No plan'}` }) })) : null, _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: () => leave('here'), children: _jsx(Line, { icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), children: upgrade(read.value?.label?.name) }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Palette, { size: 16, "aria-hidden": true }), children: t("Personalization") }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('account'), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), children: t("Profile") }) }), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+, Meta+,", onSelect: () => showSettings('general'), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘,' : 'Ctrl+,' }), children: t("Settings") }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site('/beta/status')), children: _jsx(Line, { icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), children: t("Beta") }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { open: help, onOpenChange: setHelp, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(LifeBuoy, { size: 16, "aria-hidden": true }), children: t("Help") }) }), help ? (_jsxs(DropdownMenuSubContent, { minW: 240, maxW: "calc(100vw - 16px)", pointerEvents: "auto", children: [pages().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], trail: p.key === 'help' ? _jsx(ArrowUpRight, { size: 14, "aria-hidden": true, opacity: 0.6 }) : null, children: p.label }) }, p.key))), _jsx(DropdownMenuItem, { "aria-keyshortcuts": "Control+/ Meta+/", onSelect: () => setKeys(true), children: _jsx(Line, { icon: _jsx(Keyboard, { size: 16, "aria-hidden": true }), trail: _jsx(DropdownMenuShortcut, { "aria-hidden": true, children: apple ? '⌘/' : 'Ctrl+/' }), children: t("Keyboard shortcuts") }) }), _jsx(DropdownMenuSeparator, {}), legal().map((p) => (_jsx(DropdownMenuItem, { onSelect: () => out(p.href), children: _jsx(Line, { icon: ICONS[p.key], children: p.label }) }, p.key)))] })) : null] }), host.signOut ? (_jsx(DropdownMenuItem, { onSelect: () => host.signOut?.(), children: _jsx(Line, { icon: _jsx(LogOut, { size: 16, "aria-hidden": true }), children: t("Log out") }) })) : null] })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), _jsx(Shortcuts, { open: keys, onOpenChange: setKeys, apple: apple })] }));
 }
 /** The app's keys (help.ts `KEYS`), one row each, spelled for this platform. */
 function Shortcuts({ open, onOpenChange, apple }) {

package/dist/Palette.js

@@ -164,6 +164,12 @@ const obj = (v) => (v && typeof v === 'object' ? v : {});
 const str = (v) => (typeof v === 'string' ? v : '');
 const list = (v) => (Array.isArray(v) ? v : []);
 /** `/v1/projects`: a project by its slug, found by its name, slug and repository. */
+/**
+ * The builder as a frame without it holds it (hanzo.team's Shell): nobody signed
+ * in to it, so `useSessions` reads no runs. The hook reads `api`, `token`, `org`
+ * and `person` off whatever it is handed, and handed nothing it throws.
+ */
+const NOBODY = { api: '', token: () => null, org: null, person: null };
 const projects = (body) => (Array.isArray(body) ? body : list(obj(body).data))
     .map(obj)
     .filter((p) => str(p.slug))
@@ -187,7 +193,7 @@ export function Palette({ onClose, go, actions: frame = [], mode = 'chat', host,
     const known = useRead('/v1/tool/skills?activated=true', skills);
     const plugged = useRead('/v1/tool/mcp/servers', connectors);
     const signOut = useSignOut();
-    const runs = useSessions(host ?? null);
+    const runs = useSessions(host ?? NOBODY);
     const { open: opened } = useBetas();
     const groups = useMemo(() => {
         const { top, deep } = places(host, go);

package/dist/Rail.d.ts

@@ -31,7 +31,7 @@ export declare function Toggle({ open, onPress, label }: {
     onPress: () => void;
     label?: string;
 }): import("react").JSX.Element;
-export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, onStudio, onTabs, go, onOrg, }: {
+export declare function Rail({ host, mode, at, open, toggle, rows, onChat, onDev, onStudio, onTabs, go, onOrg, }: {
     host: Host;
     mode: Place['mode'];
     /** Dev's builder address, or null outside Dev. */
@@ -40,8 +40,8 @@ export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev
     open: boolean;
     /** Lead with the sidebar's toggle; absent where the host's bar holds it. */
     toggle?: () => void;
-    /** Laid along the foot of the phone's drawer rather than down the window's edge. */
-    flat?: boolean;
+    /** Listed as rows in a phone's menu rather than marks down the window's edge. */
+    rows?: boolean;
     /** To Chat, Dev and Studio, each where the reader left it. */
     onChat: () => void;
     onDev: () => void;

package/dist/Rail.js

@@ -1,5 +1,5 @@
 'use client';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // The app's rail: its products as marks down the window's left edge, in one
 // order — Chat, Dev, Studio, Tabs, Library, Scheduled tasks, Customize — then
 // More (Team, on a host of its own, then the apps in beta this reader may open
@@ -24,16 +24,18 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //
 // The sidebar's toggle leads it (`toggle`) where the host has no bar of its own:
 // a browser tab. A host that is a window draws the toggle in its bar beside Back
-// and Forward (App.tsx `bar`), and its rail starts with Chat. On a phone the
-// rail lies along the foot of the drawer (`flat`), the account at its end; the
-// drawer is too narrow for every mark, so Library, Scheduled tasks and
-// Customize lead More there.
+// and Forward (App.tsx `bar`), and its rail starts with Chat. A phone has no
+// rail: its menu (Drawer.tsx) lists the places as rows (`rows`) under the mode's
+// own — Studio, Tabs, then More, which Library, Scheduled tasks and Customize
+// lead there. Chat and Dev are the phone's bar's (Top.tsx), and the account is
+// the menu's foot.
 import { useI18n } from '@hanzo/i18n/react';
 import { Clock, Code2, Ellipsis, FlaskConical, Library, MessageSquare, PanelLeft, Puzzle, Sparkles, SquareTerminal, Users, WandSparkles } from 'lucide-react';
 import { useState } from 'react';
-import { XStack, YStack } from '@hanzo/gui';
+import { Text, XStack, YStack } from '@hanzo/gui';
 import { route } from '@hanzo/build';
 import { DropdownMenu } from '@hanzo/ui';
+import { SidebarItem } from '@hanzo/ui/chat';
 import { BetasDialog, useBetas } from './Betas.js';
 import { out } from './help.js';
 import { BETAS } from './lib/betas.js';
@@ -67,11 +69,21 @@ export function Mark({ label, on = false, onPress, children, ...rest }) {
         // A thumb's 44px on a touch screen.
         $touchable: { width: 44, height: 44 }, ...rest, children: children }));
 }
+/** A place as a phone's menu lists it: a row on the sidebar's pitch, a thumb's 44 on a touch screen, lit where the reader is. */
+function Row({ label, on = false, onPress, icon, ...rest }) {
+    const { t } = useI18n();
+    return (_jsx(SidebarItem, { rounded: "$4", minH: 31, py: 0, px: "$2", $touchable: { minH: 44 }, active: on, icon: icon, onPress: onPress, onKeyDown: (e) => {
+            if (!onPress || (e.key !== 'Enter' && e.key !== ' '))
+                return;
+            e.preventDefault?.();
+            onPress();
+        }, ...rest, children: _jsx(Text, { fontSize: "$3", color: on ? '$ink' : '$quiet', children: t(label) }) }));
+}
 /** The sidebar's toggle: the same mark wherever a host draws it. */
 export function Toggle({ open, onPress, label }) {
     return (_jsx(Mark, { label: label ?? (open ? 'Close sidebar' : 'Open sidebar'), "data-slot": "sidebar-toggle", "aria-expanded": open, onPress: onPress, children: _jsx(PanelLeft, { size: 18, "aria-hidden": true }) }));
 }
-export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev, onStudio, onTabs, go, onOrg, }) {
+export function Rail({ host, mode, at, open, toggle, rows = false, onChat, onDev, onStudio, onTabs, go, onOrg, }) {
     const { t } = useI18n();
     const here = mode === 'dev' ? spot(at) : null;
     const to = (p) => () => go(app(p));
@@ -83,23 +95,25 @@ export function Rail({ host, mode, at, open, toggle, flat = false, onChat, onDev
     // The apps in beta this reader may open, each where it lives.
     const granted = BETAS.filter((b) => b.href && opened(b.id));
     const rest = [
-        ...(flat
+        ...(rows
             ? [
-                { key: 'library', label: 'Library', icon: _jsx(Library, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.library) },
-                { key: 'scheduled', label: 'Scheduled tasks', icon: _jsx(Clock, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.scheduled) },
-                { key: 'customize', label: 'Customize', icon: _jsx(Puzzle, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.customize) },
+                { key: 'library', label: t('Library'), icon: _jsx(Library, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.library) },
+                { key: 'scheduled', label: t('Scheduled tasks'), icon: _jsx(Clock, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.scheduled) },
+                { key: 'customize', label: t('Customize'), icon: _jsx(Puzzle, { size: 16, "aria-hidden": true }), onSelect: to(RAISED.customize) },
                 ...(team ? [{ type: 'separator', key: 'raised' }] : []),
             ]
             : []),
         ...(team
             ? [
-                { key: 'team', label: 'Team', icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) },
+                { key: 'team', label: t('Team'), icon: _jsx(Users, { size: 16, "aria-hidden": true }), onSelect: () => out(WORKSPACE) },
                 ...granted.map((b) => ({ key: `beta-${b.id}`, label: b.name, icon: _jsx(Sparkles, { size: 16, "aria-hidden": true }), onSelect: () => out(b.href) })),
                 { type: 'separator', key: 'betas-rule' },
-                { key: 'betas', label: 'Betas', icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), onSelect: () => setBetas(true) },
+                { key: 'betas', label: t('Betas'), icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), onSelect: () => setBetas(true) },
             ]
             : []),
     ];
-    const Stack = flat ? XStack : YStack;
-    return (_jsxs(Stack, { "data-slot": "rail", render: "nav", "aria-label": t("Products"), ...(flat ? { pt: '$2', mt: '$2', borderTopWidth: 1, borderColor: '$borderColor', gap: '$1' } : { width: RAIL, flex: 1, pt: '$2', pb: '$2', gap: 8 }), shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: t("Chat"), on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Dev"), on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Studio"), on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Tabs"), on: mode === 'tabs', onPress: onTabs, "data-slot": "rail-tabs", children: _jsx(SquareTerminal, { size: 18, "aria-hidden": true }) }), flat ? null : (_jsxs(_Fragment, { children: [_jsx(Mark, { label: t("Library"), on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Scheduled tasks"), on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Customize"), on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) })] })), _jsx(BetasDialog, { open: betas, onOpenChange: setBetas, go: out }), rest.length ? (_jsx(DropdownMenu, { placement: flat ? 'top-start' : 'right-start', minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": t("More"), ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest })) : null, _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, above: flat, onOrg: onOrg })] }));
+    const betasDialog = _jsx(BetasDialog, { open: betas, onOpenChange: setBetas, go: out });
+    if (rows)
+        return (_jsxs(YStack, { "data-slot": "places", render: "nav", "aria-label": t('Products'), pt: "$2", shrink: 0, children: [_jsxs(YStack, { role: "list", gap: 2, children: [_jsx(YStack, { role: "listitem", children: _jsx(Row, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "place-studio", icon: _jsx(WandSparkles, { size: 16, "aria-hidden": true }) }) }), _jsx(YStack, { role: "listitem", children: _jsx(Row, { label: "Tabs", on: mode === 'tabs', onPress: onTabs, "data-slot": "place-tabs", icon: _jsx(SquareTerminal, { size: 16, "aria-hidden": true }) }) }), _jsx(YStack, { role: "listitem", children: _jsx(DropdownMenu, { placement: "bottom-start", minWidth: 220, trigger: _jsx(Row, { label: "More", "data-slot": "place-more", "aria-haspopup": "menu", icon: _jsx(Ellipsis, { size: 16, "aria-hidden": true }) }), items: rest }) })] }), betasDialog] }));
+    return (_jsxs(YStack, { "data-slot": "rail", render: "nav", "aria-label": t('Products'), width: RAIL, flex: 1, pt: "$2", pb: "$2", gap: 8, shrink: 0, items: "center", children: [toggle ? (_jsx(YStack, { pb: 8, children: _jsx(Toggle, { open: open, onPress: toggle }) })) : null, _jsx(Mark, { label: t("Chat"), on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Dev"), on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Studio"), on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Tabs"), on: mode === 'tabs', onPress: onTabs, "data-slot": "rail-tabs", children: _jsx(SquareTerminal, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Library"), on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Scheduled tasks"), on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: t("Customize"), on: here === 'customize', onPress: to(RAISED.customize), "data-slot": "rail-customize", children: _jsx(Puzzle, { size: 18, "aria-hidden": true }) }), betasDialog, rest.length ? (_jsx(DropdownMenu, { placement: "right-start", minWidth: 220, trigger: _jsx(XStack, { render: "button", "aria-label": t("More"), ...{ title: 'More' }, "data-slot": "rail-more", width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", cursor: "pointer", opacity: 0.62, hoverStyle: { bg: '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, $touchable: { width: 44, height: 44 }, children: _jsx(Ellipsis, { size: 18, "aria-hidden": true }) }), items: rest })) : null, _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: onOrg })] }));
 }

package/dist/Recents.js

@@ -73,7 +73,9 @@ function List({ mode, rows, view, keep, open, reading, error, onOpen, threads, h
     // shows on hover and focus, a run's state is a dot at its end.
     const row = (r) => {
         const t = threads?.get(r.id);
-        const item = (_jsx(SidebarItem, { "data-kind": r.kind, active: open(r), rounded: "$4", minH: 31, px: "$2", pr: t || r.kind === 'dev' ? '$7' : '$2', ...(t ? { $touchable: { pr: 52 } } : null), onKeyDown: (e) => {
+        const item = (_jsx(SidebarItem, { "data-kind": r.kind, active: open(r), rounded: "$4", minH: 31, px: "$2", pr: t || r.kind === 'dev' ? '$7' : '$2', 
+            // A thumb's 44 on a touch screen; a conversation's ⋯ is a thumb wide there and always there: the title stops short of it.
+            $touchable: t ? { minH: 44, pr: 52 } : { minH: 44 }, onKeyDown: (e) => {
                 if (e.key !== 'Enter' && e.key !== ' ')
                     return;
                 e.preventDefault?.();
@@ -98,5 +100,5 @@ function List({ mode, rows, view, keep, open, reading, error, onOpen, threads, h
         : pinned
             ? null
             : note;
-    return (_jsx(YStack, { "data-slot": "recents", flex: 1, minH: 0, children: _jsxs(ScrollView, { flex: 1, showsVerticalScrollIndicator: false, children: [error ? _jsx(Note, { children: error.message }) : null, _jsxs(YStack, { role: "list", "aria-labelledby": label, gap: 1, children: [pinned ? (_jsxs(YStack, { role: "listitem", gap: 1, children: [heading(PINNED), menus(_jsx(YStack, { role: "list", "aria-label": PINNED, gap: 1, children: pinned.rows.map(row) }))] })) : null, _jsxs(YStack, { role: "listitem", gap: 1, children: [heading('Recents', label, true), loose.length ? menus(rest) : rest] })] })] }) }));
+    return (_jsx(YStack, { "data-slot": "recents", flex: 1, minH: 0, children: _jsxs(ScrollView, { flex: 1, showsVerticalScrollIndicator: false, ...{ overscrollBehavior: 'contain' }, children: [error ? _jsx(Note, { children: error.message }) : null, _jsxs(YStack, { role: "list", "aria-labelledby": label, gap: 1, children: [pinned ? (_jsxs(YStack, { role: "listitem", gap: 1, children: [heading(PINNED), menus(_jsx(YStack, { role: "list", "aria-label": PINNED, gap: 1, children: pinned.rows.map(row) }))] })) : null, _jsxs(YStack, { role: "listitem", gap: 1, children: [heading('Recents', label, true), loose.length ? menus(rest) : rest] })] })] }) }));
 }

package/dist/slide.d.ts

@@ -0,0 +1,24 @@
+/** The pane left in sight at the end edge while the menu is open, px: a thumb's 44 and room around it. */
+export declare const STRIP = 64;
+/** The menu's widest, px: a phone held sideways, or a small tablet, keeps the menu a menu. */
+export declare const REACH = 360;
+/** How far the pane slides, as CSS: the window less the strip, up to `REACH`. `%` is the window's width wherever it is read. */
+export declare const OPEN = "min(100% - 64px, 360px)";
+/** Shut (no menu), open, or sliding home before the menu goes. */
+export type State = 'shut' | 'open' | 'closing';
+/** Which way the end side is, as a sign on the x axis. */
+export declare const sign: (direction: string) => 1 | -1;
+/** px a finger moves before a drag is a drag, and not a tap or a scroll. */
+export declare const SLOP = 8;
+/**
+ * What a finger's first movement is: a pull along the line (`x`), a scroll
+ * (`y`), or nothing yet. Along the line has to win clearly: a list scrolls on a
+ * slant.
+ */
+export declare function axis(dx: number, dy: number): 'x' | 'y' | null;
+/** Where the pane stands while a finger holds it, px from home: where it was, moved along the line, never past home or open. */
+export declare function pull(from: number, dx: number, way: 1 | -1, reach: number): number;
+/** A flick, px per ms along the line: faster than this decides by its way, whatever the distance. */
+export declare const FLICK = 0.4;
+/** Whether a pane let go at `at` px from home, moving `speed` px/ms along the line, stays open. */
+export declare function settle(at: number, reach: number, speed: number): boolean;

package/dist/slide.js

@@ -0,0 +1,48 @@
+// The phone's drawer as numbers (Drawer.tsx draws it): how far the pane slides,
+// which way, and where a drag lets it go.
+//
+// The pane slides toward the END side of the line: right where text runs left to
+// right, left under `dir="rtl"`. A transform has no logical form, so its sign is
+// the one physical fact in the drawer, and it is read off the page
+// (`getComputedStyle(…).direction`), never assumed. Everything else is logical:
+// the menu stands at the start, the strip of pane left in sight at the end.
+//
+// A drag is measured ALONG the line: positive toward the end, whichever way the
+// line runs, so the same numbers close an LTR drawer pulled left and an RTL one
+// pulled right.
+/** The pane left in sight at the end edge while the menu is open, px: a thumb's 44 and room around it. */
+export const STRIP = 64;
+/** The menu's widest, px: a phone held sideways, or a small tablet, keeps the menu a menu. */
+export const REACH = 360;
+/** How far the pane slides, as CSS: the window less the strip, up to `REACH`. `%` is the window's width wherever it is read. */
+export const OPEN = `min(100% - ${STRIP}px, ${REACH}px)`;
+/** Which way the end side is, as a sign on the x axis. */
+export const sign = (direction) => (direction === 'rtl' ? -1 : 1);
+/** px a finger moves before a drag is a drag, and not a tap or a scroll. */
+export const SLOP = 8;
+/**
+ * What a finger's first movement is: a pull along the line (`x`), a scroll
+ * (`y`), or nothing yet. Along the line has to win clearly: a list scrolls on a
+ * slant.
+ */
+export function axis(dx, dy) {
+    const x = Math.abs(dx);
+    const y = Math.abs(dy);
+    if (x < SLOP && y < SLOP)
+        return null;
+    return x > y * 1.2 ? 'x' : 'y';
+}
+/** Where the pane stands while a finger holds it, px from home: where it was, moved along the line, never past home or open. */
+export function pull(from, dx, way, reach) {
+    return Math.min(reach, Math.max(0, from + dx * way));
+}
+/** A flick, px per ms along the line: faster than this decides by its way, whatever the distance. */
+export const FLICK = 0.4;
+/** Whether a pane let go at `at` px from home, moving `speed` px/ms along the line, stays open. */
+export function settle(at, reach, speed) {
+    if (speed <= -FLICK)
+        return false;
+    if (speed >= FLICK)
+        return true;
+    return at > reach / 2;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.97",
+  "version": "0.1.99",
   "description": "The workspace rooms — Home, Chat, Inbox, Contacts, Meet, Cal, Drive, Board, Work, Bots — and the frame that holds them, once, for every Hanzo surface.",
   "type": "module",
   "main": "./dist/index.js",