@hanzo/rooms 0.1.96 → 0.1.98

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/Chrome.js

@@ -1,5 +1,6 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useI18n } from '@hanzo/i18n/react';
 import { useIam } from '@hanzo/iam/react';
 import { Text, View, XStack, YStack } from '@hanzo/gui';
 import { Avatar, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@hanzo/ui';
@@ -13,6 +14,7 @@ const HEIGHT = 60;
 /** The notch's inset. gui carries a CSS function to the page unchanged; its types only name custom properties. */
 const NOTCH = 'env(safe-area-inset-top)';
 export function Chrome({ back }) {
+    const { t } = useI18n();
     const { user, isAuthenticated } = useIam();
     const signOut = useSignOut();
     const claimed = named();
@@ -27,5 +29,5 @@ export function Chrome({ back }) {
     };
     const out = () => void signOut();
     const signed = isAuthenticated && Boolean(who);
-    return (_jsxs(XStack, { render: "header", "data-slot": "masthead", position: "sticky", t: 0, z: "var(--z-header)", shrink: 0, boxSizing: "content-box", height: HEIGHT, pt: NOTCH, px: "var(--page-gutter, 20px)", gap: 12, items: "center", bg: "var(--background)", borderBottomWidth: 1, borderColor: "var(--border)", children: [_jsx(Text, { render: _jsx("a", { href: "/", "aria-label": `${brand()} home` }), display: "flex", items: "center", shrink: 0, color: "var(--foreground)", textDecorationLine: "none", children: _jsx(HanzoLockup, { label: brand(), size: 22 }) }), back, _jsx(View, { flex: 1 }), signed ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { render: "section", "aria-label": "Account", items: "center", gap: 12, minW: 0, "$max-md": { display: 'none' }, children: [_jsx(Avatar, { src: avatar || null, name: who, alt: "" }), _jsxs(YStack, { minW: 0, gap: 2, children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", numberOfLines: 1, children: who }), name && email ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: email })) : null] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: other, children: "Use another account" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: out, children: "Log out" })] }), _jsx(View, { display: "none", "$max-md": { display: 'flex' }, children: _jsxs(DropdownMenu, { placement: "bottom-end", offset: 8, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "aria-label": `Account: ${who}`, width: 40, height: 40, rounded: 999, items: "center", justify: "center", borderWidth: 0, bg: "transparent", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: _jsx(Avatar, { src: avatar || null, name: who, alt: "" }) }) }), _jsxs(DropdownMenuContent, { minW: 240, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": "Account", children: [_jsx(DropdownMenuLabel, { children: _jsxs(YStack, { minW: 0, gap: 2, children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", numberOfLines: 1, children: who }), name && email ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: email })) : null] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: other, children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "Use another account" }) }), _jsx(DropdownMenuItem, { onSelect: out, children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "Log out" }) })] })] }) })] })) : null] }));
+    return (_jsxs(XStack, { render: "header", "data-slot": "masthead", position: "sticky", t: 0, z: "var(--z-header)", shrink: 0, boxSizing: "content-box", height: HEIGHT, pt: NOTCH, px: "var(--page-gutter, 20px)", gap: 12, items: "center", bg: "var(--background)", borderBottomWidth: 1, borderColor: "var(--border)", children: [_jsx(Text, { render: _jsx("a", { href: "/", "aria-label": t('{brandName} home', { brandName: brand() }) }), display: "flex", items: "center", shrink: 0, color: "var(--foreground)", textDecorationLine: "none", children: _jsx(HanzoLockup, { label: brand(), size: 22 }) }), back, _jsx(View, { flex: 1 }), signed ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { render: "section", "aria-label": t('Account'), items: "center", gap: 12, minW: 0, "$max-md": { display: 'none' }, children: [_jsx(Avatar, { src: avatar || null, name: who, alt: "" }), _jsxs(YStack, { minW: 0, gap: 2, children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", numberOfLines: 1, children: who }), name && email ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: email })) : null] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: other, children: t('Use another account') }), _jsx(Button, { variant: "ghost", size: "sm", onClick: out, children: t('Log out') })] }), _jsx(View, { display: "none", "$max-md": { display: 'flex' }, children: _jsxs(DropdownMenu, { placement: "bottom-end", offset: 8, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "aria-label": t('Account: {name}', { name: who }), width: 40, height: 40, rounded: 999, items: "center", justify: "center", borderWidth: 0, bg: "transparent", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: _jsx(Avatar, { src: avatar || null, name: who, alt: "" }) }) }), _jsxs(DropdownMenuContent, { minW: 240, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": t('Account'), children: [_jsx(DropdownMenuLabel, { children: _jsxs(YStack, { minW: 0, gap: 2, children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", numberOfLines: 1, children: who }), name && email ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: email })) : null] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: other, children: _jsx(Text, { fontSize: "$3", color: "$ink", children: t('Use another account') }) }), _jsx(DropdownMenuItem, { onSelect: out, children: _jsx(Text, { fontSize: "$3", color: "$ink", children: t('Log out') }) })] })] }) })] })) : 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.
@@ -20,6 +21,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Its width is the edge's in the gutter to its right: dragged, keyed or
 // double-clicked back (@hanzo/build's `Grip`), kept per browser. Pulled in past
 // its floor it shuts (`onShut`), as the sidebar's toggle shuts it.
+import { useI18n } from '@hanzo/i18n/react';
 import { Text, XStack, YStack } from '@hanzo/gui';
 import { ArrowLeft, Bell, Search, Settings2, SquarePen } from 'lucide-react';
 import { DOTS, Gutter, library, NEW, own, path as written, sections, tabs, useScheduled, useSessions } from '@hanzo/build';
@@ -34,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;
@@ -65,15 +56,16 @@ 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);
     const latest = [...store.value].sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1)).slice(0, RECENT);
     const items = [
@@ -90,9 +82,10 @@ function Activity({ host }) {
         { type: 'separator', key: 'line' },
         { key: 'settings', label: 'Notification settings', icon: _jsx(Settings2, { size: 16, "aria-hidden": true }), onSelect: () => host.go(written({ kind: 'settings', section: 'notifications' })) },
     ];
-    return (_jsx(DropdownMenu, { minWidth: 280, trigger: _jsx(XStack, { render: "button", "aria-label": "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 }));
+    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();
     const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
@@ -118,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: "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: "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: "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: "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;