@hanzo/rooms 0.1.96 → 0.1.98

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

@@ -28,6 +28,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // the plan from billing and the limits. An organization is created by the same
 // `POST /v1/account/orgs` the no-organization gate uses (Orgs.tsx); the next load
 // mints a token that carries it.
+import { useI18n } from '@hanzo/i18n/react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { ArrowUpRight, Building2, Check, ChevronsUpDown, CircleHelp, CircleUserRound, Download, FileText, FlaskConical, Info, Keyboard, LifeBuoy, LogOut, Palette, Plus, ScrollText, Settings, ShieldCheck, Sparkles, Users, X, } from 'lucide-react';
@@ -135,6 +136,7 @@ export const upgrade = (family) => family === 'Enterprise' ? 'Enterprise plan' :
 /** The keys a row prints, in this platform's spelling. */
 const mac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 export function Me({ host, narrow = false, above = false, onOrg, }) {
+    const { t } = useI18n();
     const [open, setOpen] = useState(false);
     const [account, setAccount] = useState(false);
     const [help, setHelp] = useState(false);
@@ -197,11 +199,14 @@ 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": "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: "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": "Current" }) : null, children: o.display }) }, o.name))), _jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Plus, { size: 16, "aria-hidden": true }), children: "Create organization" }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site(ORG_SETTINGS)), children: _jsx(Line, { icon: _jsx(Settings, { size: 16, "aria-hidden": true }), children: "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: "Open in Hanzo Team" }) })) : (_jsx(DropdownMenuItem, { onSelect: () => setCreating(true), children: _jsx(Line, { icon: _jsx(Users, { size: 16, "aria-hidden": true }), children: "Create a team" }) })), superAdmin() ? (_jsx(DropdownMenuItem, { onSelect: choose, children: _jsx(Line, { icon: _jsx(Building2, { size: 16, "aria-hidden": true }), children: "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": "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: "Get Pro" })), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), trail: personal.name === current ? _jsx(Check, { size: 16, "aria-label": "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: "Personalization" }) }), _jsx(DropdownMenuItem, { onSelect: () => showSettings('account'), children: _jsx(Line, { icon: _jsx(CircleUserRound, { size: 16, "aria-hidden": true }), children: "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: "Settings" }) }), _jsx(DropdownMenuItem, { onSelect: () => window.location.assign(site('/beta/status')), children: _jsx(Line, { icon: _jsx(FlaskConical, { size: 16, "aria-hidden": true }), children: "Beta" }) }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuSub, { open: help, onOpenChange: setHelp, children: [_jsx(DropdownMenuSubTrigger, { children: _jsx(Line, { icon: _jsx(LifeBuoy, { size: 16, "aria-hidden": true }), children: "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: "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: "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 }) {
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: "Keyboard shortcuts" }), _jsx(YStack, { gap: "$1", children: KEYS.map((k) => (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", minH: 32, children: [_jsx(SizableText, { size: "$2", color: "$ink", children: k.does }), _jsx(Kbd, { children: apple ? k.mac : k.pc })] }, k.does))) })] }) }));
+    const { t } = useI18n();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: t("Keyboard shortcuts") }), _jsx(YStack, { gap: "$1", children: KEYS.map((k) => (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", minH: 32, children: [_jsx(SizableText, { size: "$2", color: "$ink", children: k.does }), _jsx(Kbd, { children: apple ? k.mac : k.pc })] }, k.does))) })] }) }));
 }
 /**
  * The sheet that creates an organization: a name, then `POST /v1/account/orgs`,
@@ -210,6 +215,7 @@ function Shortcuts({ open, onOpenChange, apple }) {
  * it yet.
  */
 function Create({ open, onOpenChange }) {
+    const { t } = useI18n();
     const [name, setName] = useState('');
     const [busy, setBusy] = useState(false);
     const [refused, setRefused] = useState('');
@@ -244,16 +250,17 @@ function Create({ open, onOpenChange }) {
             setBusy(false);
         }
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: "Create organization" }), _jsx(SizableText, { size: "$2", color: "$soft", children: "You own it. Agents, credits and members belong to it, and you switch to it from this menu." }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": "Organization name", placeholder: "Acme", maxLength: 80, onKeyDown: (e) => {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: t("Create organization") }), _jsx(SizableText, { size: "$2", color: "$soft", children: t("You own it. Agents, credits and members belong to it, and you switch to it from this menu.") }), _jsx(Input, { autoFocus: true, value: name, onChangeText: setName, "aria-label": t("Organization name"), placeholder: t("Acme"), maxLength: 80, onKeyDown: (e) => {
                         if (e.key === 'Enter')
                             void submit();
-                    } }), refused ? (_jsx(SizableText, { size: "$1", color: BAD, role: "alert", children: refused })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", rounded: 999, onPress: () => onOpenChange(false), children: "Cancel" }), _jsx(Button, { size: "sm", rounded: 999, disabled: busy || !name.trim(), onPress: () => void submit(), children: busy ? 'Creating…' : 'Create' })] })] }) }));
+                    } }), refused ? (_jsx(SizableText, { size: "$1", color: BAD, role: "alert", children: refused })) : null, _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "outline", rounded: 999, onPress: () => onOpenChange(false), children: t("Cancel") }), _jsx(Button, { size: "sm", rounded: 999, disabled: busy || !name.trim(), onPress: () => void submit(), children: busy ? 'Creating…' : 'Create' })] })] }) }));
 }
 /**
  * What became of an organization this tab created: nothing to say once the token
  * carries it (the app is already in it), and a plain line while it does not.
  */
 export function Made() {
+    const { t } = useI18n();
     const [made, setMade] = useState(null);
     useEffect(() => {
         try {
@@ -284,5 +291,5 @@ export function Made() {
         }
         setMade(null);
     };
-    return (_jsxs(XStack, { "data-slot": "made", role: "status", items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$5", borderWidth: 1, borderColor: "$borderColor", bg: "$edge", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$ink", children: `${made.name} was created, and your sign-in does not include it yet, so you are still in this organization. It appears here once IAM adds you to it.` }), _jsx(XStack, { render: "button", "aria-label": "Dismiss", onPress: dismiss, p: "$1", rounded: 999, hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 13, "aria-hidden": true }) })] }));
+    return (_jsxs(XStack, { "data-slot": "made", role: "status", items: "flex-start", gap: "$2", px: "$3", py: "$2.5", rounded: "$5", borderWidth: 1, borderColor: "$borderColor", bg: "$edge", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$1", color: "$ink", children: `${made.name} was created, and your sign-in does not include it yet, so you are still in this organization. It appears here once IAM adds you to it.` }), _jsx(XStack, { render: "button", "aria-label": t("Dismiss"), onPress: dismiss, p: "$1", rounded: 999, hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 13, "aria-hidden": true }) })] }));
 }

package/dist/Orgs.js

@@ -277,7 +277,7 @@ function useArrival(door, hydrated, isLoading, isAuthenticated) {
 const SHEET = 'calc(var(--z-modal) + 10)';
 const DIALOG = 'calc(var(--z-modal) + 20)';
 /** The sheet's top inset: a share of the window's height, held between two lengths. */
-const TOP = 'clamp(32px, 12vh, 120px)';
+const TOP = 'clamp(72px, 12vh, 120px)';
 const muted = 'var(--muted-foreground)';
 /** The black that veils and shadows, at a share of itself. */
 const shade = (share) => mix('var(--pure-black)', share, 'srgb');

package/dist/Palette.js

@@ -79,7 +79,7 @@ export function places(host, go) {
         { id: 'tabs', label: 'Tabs', icon: _jsx(SquareTerminal, { ...ICON }), run: () => go(TERMINALS) },
         ...(host ? [{ id: 'team', label: 'Team', icon: _jsx(Users, { ...ICON }), keywords: ['workspace'], run: () => out(WORKSPACE) }] : []),
         ...(host ? rows(nav(host, builder).map((g) => ({ links: g.links.filter((l) => l.id !== NEW) })), '', 'dev') : []),
-        { id: 'settings', label: 'Settings', icon: _jsx(Settings, { ...ICON }), shortcut: ['Mod', ','], run: () => go(app(SETTINGS)) },
+        { id: 'settings', label: 'Settings', icon: _jsx(Settings, { ...ICON }), shortcut: ['Mod', ','], run: () => go('/settings') },
         // The site's own pages, outside the app: the browser loads them.
         { id: 'referral', label: 'Referral', icon: _jsx(Gift, { ...ICON }), keywords: ['invite', 'share'], run: () => window.location.assign(site('/referral')) },
         { id: 'beta', label: 'Beta status', icon: _jsx(FlaskConical, { ...ICON }), keywords: ['waitlist'], run: () => window.location.assign(site('/beta/status')) },

package/dist/ProviderMark.js

@@ -107,7 +107,8 @@ const MARKS = {
     // disc (zoo-disc.svg): top green, bottom-left red, bottom-right blue, whose
     // pairwise overlaps are the secondaries the full disc shows. The enclosing
     // ring stays `currentColor` — it is the frame, not one of the three, and a
-    // fourth hue there would read as a fourth petal.
+    // fourth hue there would read as a fourth petal. Under `ink` the petals'
+    // strokes come off (`INKED`) and they take the group's `currentColor`.
     '<defs><clipPath id="zoo-cut"><circle cx="12" cy="12" r="11.5"></circle></clipPath></defs><g clip-path="url(#zoo-cut)" fill="none" stroke="currentColor"><circle cx="12.203" cy="6.27" r="9.509" stroke-width="1.341" stroke="#00A652"></circle><circle cx="6.189" cy="15.454" r="9.509" stroke-width="1.341" stroke="#ED1C24"></circle><circle cx="17.486" cy="15.454" r="9.509" stroke-width="1.341" stroke="#2E3192"></circle><circle cx="12" cy="12" r="10.769" stroke-width="1.463"></circle></g>',
     // THE CHANNELS, keyed by the registry's provider id. These are the brands'
     // own published marks, from simple-icons, so a connect tile is drawn the way
@@ -169,6 +170,8 @@ const OF = {
     'z-ai': 'zai',
     zen: 'zoo',
 };
+/** A body's own stroke hues: under `ink` they come off, so it draws in the page's ink. */
+const INKED = / stroke="#[0-9A-Fa-f]{6}"/g;
 /**
  * The mark's NAME, resolved through the alias table — not its body. The body
  * and the hue are both read under this one key, so a lab cannot end up wearing
@@ -270,5 +273,5 @@ export function ProviderMark({ org, provider, model, size = 32, ink, }) {
             // stroke, so one presentation attribute colours a filled glyph and a
             // drawn one alike. A lab with no hue inherits the page's ink, which is
             // the whole point.
-            color: ink ? undefined : HUE[mark], dangerouslySetInnerHTML: { __html: MARKS[mark] } }) }));
+            color: ink ? undefined : HUE[mark], dangerouslySetInnerHTML: { __html: ink ? MARKS[mark].replace(INKED, '') : MARKS[mark] } }) }));
 }

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,15 +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';
@@ -61,15 +64,27 @@ export function raised(at) {
 }
 /** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
 export function Mark({ label, on = false, onPress, children, ...rest }) {
-    return (_jsx(XStack, { render: "button", "aria-label": label, ...{ title: label }, "aria-current": on ? 'page' : undefined, onPress: onPress, width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", shrink: 0, cursor: "pointer", opacity: on ? 1 : 0.62, bg: on ? '$edge' : 'transparent', hoverStyle: { bg: on ? '$edge' : '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, 
+    const { t } = useI18n();
+    return (_jsx(XStack, { render: "button", "aria-label": t(label), ...{ title: label }, "aria-current": on ? 'page' : undefined, onPress: onPress, width: MARK, height: MARK, rounded: "$4", items: "center", justify: "center", shrink: 0, cursor: "pointer", opacity: on ? 1 : 0.62, bg: on ? '$edge' : 'transparent', hoverStyle: { bg: on ? '$edge' : '$hover', opacity: 1 }, pressStyle: { bg: '$raised' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, 
         // 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));
     // The products on hosts of their own, behind More; on a phone the raised places lead it.
@@ -80,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": "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: "Chat", on: mode === 'chat', onPress: onChat, "data-slot": "rail-chat", children: _jsx(MessageSquare, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Dev", on: mode === 'dev' && !here, onPress: onDev, "data-slot": "rail-dev", children: _jsx(Code2, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Studio", on: mode === 'studio', onPress: onStudio, "data-slot": "rail-studio", children: _jsx(WandSparkles, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "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: "Library", on: here === 'library', onPress: to(RAISED.library), "data-slot": "rail-library", children: _jsx(Library, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "Scheduled tasks", on: here === 'scheduled', onPress: to(RAISED.scheduled), "data-slot": "rail-scheduled", children: _jsx(Clock, { size: 18, "aria-hidden": true }) }), _jsx(Mark, { label: "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": "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 })] }));
 }