@hanzo/rooms 0.1.57 → 0.1.59

package/dist/Column.js

@@ -1,38 +1,39 @@
 'use client';
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The app's one column, the same in both modes: the Chat / Dev switch, a filter,
-// New, Dev's places, the Recents of the mode it is in, and at the foot the
-// account (components/workspace/Me.tsx).
+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.
 //
-// Dev's places are @hanzo/build's `nav`, the one list every rail draws, each a
-// row of its own under a quiet group label: nothing waits behind a More.
+// 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.
+//
+// The bell is the org's run activity (@hanzo/build `useSessions`): the runs
+// that moved last, each one press from its page, and Notifications in Settings.
+// The search opens the filter over Recents (⌘K / Ctrl+K from anywhere, `seek`).
 //
-// Tabs sits under New in both modes. Hanzo Tabs lives at tabs.hanzo.ai, so the
-// row is a link there, in a tab of its own.
+// Dev's places are @hanzo/build's `nav`, the one list every rail draws, each a
+// row under a quiet group label.
 //
-// It is a pane on the frame's ground (app/_web.tsx), sized by the edge 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 collapses to a rail of
-// marks, kept under the key the builder's rail kept it under, so a reader's
-// choice outlives the move.
+// 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 { Text, XStack, YStack } from '@hanzo/gui';
-import { PanelLeft, Plus, Search, SquareTerminal } from 'lucide-react';
-import { Grip, nav, NEW } from '@hanzo/build';
-import { Sidebar, SidebarIconButton, SidebarItem } from '@hanzo/ui/chat';
-import { HanzoMark } from '@hanzogui/shell';
-import { Fragment, useId, useState } from 'react';
-import { ModeMark } from './ModeMark.js';
-import { useKept } from './kept.js';
-import { Made, Me } from './Me.js';
+import { Bell, Search, Settings2, SquarePen, X } from 'lucide-react';
+import { DOTS, Grip, nav, NEW, path as written, useSessions } from '@hanzo/build';
+import { DropdownMenu } from '@hanzo/ui';
+import { Sidebar, SidebarIconButton, SidebarItem, StatusDot } from '@hanzo/ui/chat';
+import { useEffect, useId, useRef, useState } from 'react';
+import { Made } from './Me.js';
 import { Recents } from './Recents.js';
 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 { pick } from './lib/session.js';
-import { app, TABS, talk } from './lib/host.js';
-import { brand } from './where.js';
-/** The grip stands in the gutter between the column and the pane. gui carries a `calc()` to the page unchanged; its
+import { talk } from './lib/host.js';
+import { brand, wordmark } from './where.js';
+/** The grip stands in the gutter between the sidebar and the panel. gui carries a `calc()` to the page unchanged; its
  *  types only name custom properties. */
 const GUTTER_END = 'calc(-1 * var(--pane-gap))';
 /** The sidebar fills the column. Its `width` is typed in px alone, though its frame takes any gui size — the type is
@@ -48,12 +49,10 @@ const FLOAT = {
     borderColor: 'var(--border-strong)',
     boxShadow: 'var(--edge-highlight), var(--shadow-floating)',
 };
-/** The column's width, px: its default, and the two a drag holds it between. */
-const WIDTH = 272;
-const FLOOR = 220;
+/** The sidebar's width, px: its default, and the two a drag holds it between. */
+const WIDTH = 240;
+const FLOOR = 200;
 const CEIL = 420;
-/** The collapsed rail's width, px. */
-const RAIL = 60;
 /** Per reader, per browser. */
 const SPAN = 'hanzo.app.column';
 /** Enter and Space press a row the way a click does. */
@@ -65,19 +64,37 @@ const keys = (press) => ({
         press();
     },
 });
-/** A row of the column: a pill, lit where the reader is. Compact, so every place fits a laptop's height with Recents under them. */
-const ROW = { rounded: '$4', minH: 30, py: 0 };
-/** Tabs, a row drawn as a link out: another origin, its own tab, no handle back to this page. */
-const OUT = { 'data-slot': 'app-tabs', role: 'link', render: _jsx("a", { href: TABS, target: "_blank", rel: "noopener noreferrer" }) };
-/** Tabs in the rail, as its mark. */
-const Mark = () => (_jsx(SidebarIconButton, { label: "Tabs", width: 36, height: 32, rounded: 999, ...OUT, children: _jsx(SquareTerminal, { size: 16 }) }));
-/** Tabs in the column, as a row. */
-const Row = () => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, icon: _jsx(SquareTerminal, { size: 16, "aria-hidden": true }), ...OUT, children: "Tabs" }) }));
-export function Column({ host, mode, thread, onChat, onDev, go, drawer = false, }) {
-    const [kept, setCollapsed] = useKept('hanzo.build.rail', false);
-    const collapsed = kept && !drawer;
+/** 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' };
+/** The run activity behind the bell: the runs that moved last, newest first. */
+const RECENT = 6;
+/** A header mark: a 16px glyph in a 32px target. */
+const HEAD = { width: 32, height: 32, rounded: '$3' };
+function Activity({ host }) {
+    const store = useSessions(host);
+    const latest = [...store.value].sort((a, b) => (a.updatedAt < b.updatedAt ? 1 : -1)).slice(0, RECENT);
+    const items = [
+        { type: 'label', key: 'head', label: 'Activity' },
+        ...(latest.length
+            ? latest.map((s) => ({
+                key: s.id,
+                label: s.title || 'Untitled run',
+                description: [s.status, ago(s.updatedAt || s.createdAt)].filter(Boolean).join(' · '),
+                icon: _jsx(StatusDot, { status: DOTS[s.status] ?? 'idle' }),
+                onSelect: () => host.go(s.id),
+            }))
+            : [{ key: 'none', label: 'Nothing new', disabled: true, onSelect: () => { } }]),
+        { 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 }));
+}
+export function Column({ host, mode, thread, go, onShut, seek = 0, drawer = false, foot, }) {
     const [words, setWords] = useState('');
-    // The desktop column and a phone's drawer can both be in the page: each names its own group labels.
+    // The search field shows once asked for, and while it holds words.
+    const [seeking, setSeeking] = useState(false);
+    const field = useRef(null);
+    // 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);
     const dev = (p) => host.go(p);
@@ -88,21 +105,27 @@ export function Column({ host, mode, thread, onChat, onDev, go, drawer = false,
         empty();
         go(talk());
     };
-    // Another organization: picked, and the app opened in it at the mode's New.
-    const org = (o) => {
-        pick(o);
-        window.location.assign(mode === 'dev' ? app('') : talk());
+    const ask = () => {
+        setSeeking(true);
+        requestAnimationFrame(() => field.current?.focus());
+    };
+    const done = () => {
+        setWords('');
+        setSeeking(false);
     };
-    if (collapsed)
-        return (_jsx(YStack, { "data-slot": "app-column", "data-collapsed": "", position: "relative", shrink: 0, width: RAIL, "$max-md": { display: 'none' }, children: _jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "true", role: "navigation", "aria-label": brand(), ...pane(), ...FILL, px: "$1.5", py: "$2.5", gap: "$1.5", items: "center", children: [_jsx(SidebarIconButton, { label: "Expand sidebar", onPress: () => setCollapsed(false), width: 36, height: 36, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev, stacked: true }), mode === 'chat' ? (_jsxs(_Fragment, { children: [_jsx(SidebarIconButton, { label: "New chat", onPress: create, width: 36, height: 36, rounded: 999, children: _jsx(Plus, { size: 16 }) }), _jsx(Mark, {})] })) : (
-                    // Every place, as its mark: collapsed is narrower, never shorter of a destination.
-                    groups.map((g) => (_jsx(YStack, { role: "group", "aria-label": g.label, items: "center", gap: 2, pt: "$1", children: g.links.map((link) => (_jsxs(Fragment, { children: [_jsx(SidebarIconButton, { label: link.label, onPress: () => link.onPress?.(), width: 36, height: 32, rounded: 999, "aria-current": link.active ? 'page' : undefined, children: link.icon }), link.id === NEW ? _jsx(Mark, {}) : null] }, link.id))) }, g.id)))), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
+    useEffect(() => {
+        if (seek)
+            ask();
+    }, [seek]);
     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", shrink: 0, height: "100%", width: drawer ? '100%' : 'var(--span)', ...(drawer ? {} : { '$max-md': { display: 'none' } }), children: [_jsxs(Sidebar, { "data-slot": "app-rail", "data-collapsed": "false", role: "navigation", "aria-label": brand(), ...pane(), ...(drawer ? FLOAT : null), ...FILL, px: "$2.5", pt: "$3", pb: "$2", gap: "$0", children: [_jsxs(XStack, { "data-slot": "mode-switch", items: "center", gap: "$2", px: "$1.5", pb: "$3", minW: 0, children: [_jsx(HanzoMark, { size: 18 }), _jsx(ModeMark, { mode: mode, onChat: onChat, onDev: onDev })] }), _jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", px: "$3", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
+        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: [_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: mode === 'chat' ? 'Search chats' : 'Search runs', onPress: seeking ? done : ask, "aria-expanded": seeking || !!words, ...HEAD, children: _jsx(Search, { size: 16, "aria-hidden": true }) })] }), seeking || words ? (_jsxs(XStack, { "data-slot": "app-filter", items: "center", gap: "$2", pl: "$3", pr: "$1", height: 36, rounded: 999, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", shrink: 0, mb: "$1.5", children: [_jsx(Search, { size: 15, "aria-hidden": true, color: "var(--soft, var(--muted-foreground))" }), _jsx(Text, { render: _jsx("input", { ref: field, value: words, onChange: (e) => setWords(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Escape')
-                                            setWords('');
-                                    }, placeholder: mode === 'chat' ? 'Filter chats' : 'Filter runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), mode === 'chat' ? (_jsxs(YStack, { role: "list", mt: "$2.5", gap: 2, shrink: 0, children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { "data-slot": "app-new", ...ROW, active: !thread, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: "New chat" }) }), _jsx(Row, {})] })) : (_jsx(YStack, { "data-slot": "app-places", mt: "$1.5", shrink: 0, children: groups.map((g) => (_jsxs(YStack, { pt: "$1.5", children: [_jsx(Text, { id: `${uid}-${g.id}`, pl: "$2", pb: 2, fontSize: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: g.label }), _jsx(YStack, { role: "list", "aria-labelledby": `${uid}-${g.id}`, gap: 1, children: g.links.map((link) => (_jsxs(Fragment, { children: [_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, ...(link.id === NEW ? { 'data-slot': 'app-new' } : {}), active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }), link.id === NEW ? _jsx(Row, {}) : null] }, link.id))) })] }, g.id))) })), _jsx(XStack, { height: 1, bg: "$borderColor", mx: "$1.5", mt: "$3", shrink: 0 }), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), _jsxs(XStack, { "data-slot": "app-foot", items: "center", gap: "$1", pt: "$2", shrink: 0, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Me, { host: host, onOrg: org }) }), drawer ? null : (_jsx(SidebarIconButton, { label: "Collapse sidebar", onPress: () => setCollapsed(true), width: 32, height: 32, rounded: 999, children: _jsx(PanelLeft, { size: 16 }) }))] })] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: () => setCollapsed(true), label: "Resize sidebar", 
-                // In the gutter between the column and the pane, not over the column's own rows.
+                                            done();
+                                    }, onBlur: () => {
+                                        if (!words)
+                                            setSeeking(false);
+                                    }, placeholder: mode === 'chat' ? 'Search chats' : 'Search runs', "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$3" }), words ? (_jsx(SidebarIconButton, { label: "Clear search", onPress: done, width: 28, height: 28, rounded: 999, children: _jsx(X, { size: 14, "aria-hidden": true }) })) : null] })) : null, 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 ? (_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 ? `${uid}-${g.id}` : undefined, "aria-label": i ? undefined : g.label, 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))) })), _jsx(Recents, { host: host, mode: mode, thread: thread, words: words, onOpen: open, onNew: create }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {})] }), foot] }), drawer ? null : (_jsx(Grip, { side: "left", span: span.span, floor: FLOOR, ceil: CEIL, reset: WIDTH, onSpan: span.move, onKeep: span.keep, onShut: onShut, label: "Resize sidebar", 
+                // In the gutter between the sidebar and the panel, not over the sidebar's own rows.
                 r: GUTTER_END, width: "var(--pane-gap)" }))] }));
 }

package/dist/Home.js

@@ -110,12 +110,12 @@ function Open({ at, rooms, back, }) {
         return _jsx(Talk, { room: found }, teamKey(found));
     const reading = isLoading || (isAuthenticated && rooms.rooms === null && !rooms.wrong);
     const line = reading
-        ? 'Reading the room.'
+        ? 'Reading the channel.'
         : !isAuthenticated
-            ? 'Sign in to read this room.'
+            ? 'Sign in to read this channel.'
             : rooms.wrong
-                ? say(rooms.wrong, 'this room')
-                : 'That room is not here.';
+                ? say(rooms.wrong, 'this channel')
+                : 'That channel is not here.';
     return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$6", gap: "$3", children: [_jsx(Text, { fontSize: "$3", color: SOFT, children: line }), reading ? null : (_jsx(Box, { render: "button", onClick: back, ...tap, children: _jsx(Text, { fontSize: "$2", fontWeight: "500", color: INK, children: "Back to home" }) }))] }));
 }
 /* ─────────────────────────────────────────────────────────────────────────────
@@ -151,18 +151,18 @@ function Rooms({ rooms, wrong, open }) {
             openRoom(teamKey(made));
         }
         catch (e) {
-            setRefused(plainly(e, 'this room'));
+            setRefused(plainly(e, 'this channel'));
         }
         finally {
             setOpening(false);
         }
     };
-    return (_jsxs(Card, { kind: "rooms", icon: _jsx(Hash, { size: 14, "aria-hidden": true }), title: "Rooms", children: [rooms === null ? (_jsx(Waiting, { wrong: wrong, subject: "your rooms" })) : rooms.length === 0 ? (_jsx(Quiet, { children: "No rooms yet. Open one and the conversation has somewhere to live." })) : (_jsx(YStack, { gap: "$1", children: rooms.slice(0, 6).map((one) => (_jsx(Row, { icon: one.direct ? _jsx(AtSign, { size: 12, "aria-hidden": true }) : _jsx(Hash, { size: 12, "aria-hidden": true }), onPress: () => openRoom(teamKey(one)), children: one.name || 'Direct message' }, teamKey(one)))) })), !me ? null : naming ? (_jsxs(YStack, { gap: "$1", children: [_jsxs(XStack, { gap: "$1", items: "center", children: [_jsx(Text, { render: _jsx("input", { value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
+    return (_jsxs(Card, { kind: "rooms", icon: _jsx(Hash, { size: 14, "aria-hidden": true }), title: "Channels", children: [rooms === null ? (_jsx(Waiting, { wrong: wrong, subject: "your channels" })) : rooms.length === 0 ? (_jsx(Quiet, { children: "No channels yet." })) : (_jsx(YStack, { gap: "$1", children: rooms.slice(0, 6).map((one) => (_jsx(Row, { icon: one.direct ? _jsx(AtSign, { size: 12, "aria-hidden": true }) : _jsx(Hash, { size: 12, "aria-hidden": true }), onPress: () => openRoom(teamKey(one)), children: one.name || 'Direct message' }, teamKey(one)))) })), !me ? null : naming ? (_jsxs(YStack, { gap: "$1", children: [_jsxs(XStack, { gap: "$1", items: "center", children: [_jsx(Text, { render: _jsx("input", { value: name, onChange: (e) => setName(e.target.value), onKeyDown: (e) => {
                                         if (e.key === 'Enter')
                                             void make();
                                         if (e.key === 'Escape')
                                             setNaming(false);
-                                    }, placeholder: "Name", "aria-label": "Room name", autoFocus: true }), flex: 1, minW: 0, bg: "transparent", borderWidth: 1, borderColor: "var(--border)", rounded: 6, px: 8, py: 6, color: "inherit", fontSize: "$2" }), _jsx(Box, { render: "button", onClick: () => void make(), "aria-disabled": opening, opacity: opening ? 0.5 : 1, px: "$2", py: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$2", fontWeight: "500", color: INK, children: "Open it" }) })] }), refused ? (_jsx(Text, { fontSize: "$2", color: BAD, children: refused })) : null] })) : (_jsx(Row, { icon: _jsx(Plus, { size: 12, "aria-hidden": true }), onPress: () => setNaming(true), children: "New room" }))] }));
+                                    }, placeholder: "Name", "aria-label": "Channel name", autoFocus: true }), flex: 1, minW: 0, bg: "transparent", borderWidth: 1, borderColor: "var(--border)", rounded: 6, px: 8, py: 6, color: "inherit", fontSize: "$2" }), _jsx(Box, { render: "button", onClick: () => void make(), "aria-disabled": opening, opacity: opening ? 0.5 : 1, px: "$2", py: "$1.5", rounded: "$2", borderWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, children: _jsx(Text, { fontSize: "$2", fontWeight: "500", color: INK, children: "Open it" }) })] }), refused ? (_jsx(Text, { fontSize: "$2", color: BAD, children: refused })) : null] })) : (_jsx(Row, { icon: _jsx(Plus, { size: 12, "aria-hidden": true }), onPress: () => setNaming(true), children: "New room" }))] }));
 }
 /**
  * A read the SDK has no hook for.

package/dist/Inbox.js

@@ -127,7 +127,7 @@ function Reading({ room, reload, }) {
             reload();
         }
         catch (e) {
-            setFailed(plainly(e, 'this room'));
+            setFailed(plainly(e, 'this conversation'));
         }
         finally {
             setSending(false);

package/dist/Me.d.ts

@@ -13,10 +13,18 @@ export declare function Face({ host, size }: {
     host: Host;
     size?: number;
 }): import("react").JSX.Element;
-export declare function Me({ host, narrow, onOrg, }: {
+/**
+ * The plans row, named by the plan the organization is on: Enterprise and
+ * Agency are plans a person stays on, so the row names theirs; every other
+ * plan, Free included, is one to move up from.
+ */
+export declare const upgrade: (family: string | null | undefined) => string;
+export declare function Me({ host, narrow, above, onOrg, }: {
     host: Host;
-    /** The collapsed rail's: the face alone, the menu opening beside it. */
+    /** 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. */
+    above?: boolean;
     /** Work in another organization: picked, then the app opened in it. */
     onOrg: (org: string) => void;
 }): import("react").JSX.Element;

package/dist/Me.js

@@ -25,7 +25,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 // Orgs.tsx); the next load mints a token that carries it.
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { Popover, SizableText, usePopperContextSlow, View, XStack, YStack } from '@hanzo/gui';
-import { Building2, ChevronsUpDown, CreditCard, ExternalLink, Gauge, KeyRound, LifeBuoy, LogOut, Plus, Settings, Sparkles, Users, X } from 'lucide-react';
+import { Building2, ChevronLeft, ChevronRight, ChevronsUpDown, CreditCard, ExternalLink, Gauge, KeyRound, LifeBuoy, LogOut, Mail, Plus, Settings, Sparkles, Users, X } from 'lucide-react';
 import { label, Meter, path, said as spoken, useStanding, useWho } from '@hanzo/build';
 import { useOrganizations } from '@hanzo/iam/react';
 import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
@@ -111,7 +111,7 @@ export function Face({ host, size = 28 }) {
 /** One row of the menu: a real button, so Enter, Space and focus are the browser's. */
 function Item({ icon, label, sub, checked, onPress, trail, }) {
     const radio = checked !== undefined;
-    return (_jsxs(XStack, { render: "button", ...{ role: radio ? 'menuitemradio' : 'menuitem' }, "aria-checked": radio ? checked : undefined, "data-item": "", onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 36, py: "$1.5", rounded: "$4", bg: checked ? '$edge' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { bg: '$hover', outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", width: "100%", children: [icon ? (_jsx(XStack, { width: 20, justify: "center", shrink: 0, opacity: 0.8, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, text: "left", children: label }), sub ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: sub })) : null] }), trail] }));
+    return (_jsxs(XStack, { render: "button", ...{ role: radio ? 'menuitemradio' : 'menuitem' }, "aria-checked": radio ? checked : undefined, "data-item": "", onPress: onPress, items: "center", gap: "$2.5", px: "$2", minH: 30, py: 4, rounded: "$3", bg: checked ? '$edge' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { bg: '$hover', outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", width: "100%", children: [icon ? (_jsx(XStack, { width: 20, justify: "center", shrink: 0, opacity: 0.8, children: icon })) : null, _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, text: "left", children: label }), sub ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: sub })) : null] }), trail] }));
 }
 const Rule = () => _jsx(XStack, { height: 1, bg: "$borderColor", my: "$1", mx: "$1" });
 const Label = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pt: "$1.5", pb: "$1", children: children }));
@@ -150,8 +150,21 @@ function Refit({ children }) {
     }, [update]);
     return (_jsx(View, { render: _jsx("div", { ref: box }), self: "stretch", minW: 0, children: children }));
 }
-export function Me({ host, narrow = false, onOrg, }) {
+/**
+ * The plans row, named by the plan the organization is on: Enterprise and
+ * Agency are plans a person stays on, so the row names theirs; every other
+ * plan, Free included, is one to move up from.
+ */
+export const upgrade = (family) => family === 'Enterprise' ? 'Enterprise plan' : family === 'Agency' ? 'Agency plan' : 'Upgrade plan';
+/** The keys a row prints, in this platform's spelling. */
+const mac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+/** A row's keys at its end, quiet. */
+const Keys = ({ children }) => (_jsx(SizableText, { size: "$1", color: "$soft", shrink: 0, children: children }));
+/** A row that opens a page of the menu. */
+const More = () => _jsx(ChevronRight, { size: 14, "aria-hidden": true, opacity: 0.6 });
+export function Me({ host, narrow = false, above = false, onOrg, }) {
     const menu = useWho();
+    const [page, setPage] = useState('main');
     const [creating, setCreating] = useState(false);
     const [supporting, setSupporting] = useState(false);
     const row = useRef(null);
@@ -165,15 +178,24 @@ export function Me({ host, narrow = false, onOrg, }) {
     const other = usePlan(personal && personal.name !== current ? personal.name : null, menu.open);
     const planFor = (o) => (o.name === current ? spoken(read.value?.label ?? null) : o.personal ? other : '');
     const who = host.person?.name || host.person?.email || '';
-    const standing = [said(here?.role ?? ''), here?.display ?? current].filter(Boolean).join(' · ');
-    // The organization in use takes focus once the menu is drawn — after the
-    // popover has placed its own focus — so the keys reach the rows at once.
+    const plan = spoken(read.value?.label ?? null);
+    const apple = mac();
+    // Each page opens on its first row, once it is drawn — after the popover has
+    // placed its own focus — so the keys reach the rows at once.
     const land = (node) => {
         content.current = node;
         if (!node)
             return;
         requestAnimationFrame(() => requestAnimationFrame(() => (node.querySelector('[data-item][aria-checked="true"]') ?? node.querySelector('[data-item]'))?.focus()));
     };
+    const turn = (to) => {
+        setPage(to);
+        requestAnimationFrame(() => land(content.current));
+    };
+    const toggle = () => {
+        setPage('main');
+        menu.toggle();
+    };
     const close = () => {
         menu.onOpenChange(false);
         row.current?.focus();
@@ -182,15 +204,20 @@ export function Me({ host, narrow = false, onOrg, }) {
         menu.onOpenChange(false);
         host.go(p);
     };
+    const back = (title) => _jsx(Item, { icon: _jsx(ChevronLeft, { size: 15, "aria-hidden": true }), label: title, onPress: () => turn('main') });
     if (!host.person)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: menu.open, onOpenChange: menu.onOpenChange, placement: narrow ? 'right-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 8, children: [_jsx(Popover.Anchor, { width: "100%", children: _jsxs(XStack, { ref: (el) => {
+    return (_jsxs(_Fragment, { children: [_jsxs(Popover, { open: menu.open, onOpenChange: (open) => {
+                    if (open)
+                        setPage('main');
+                    menu.onOpenChange(open);
+                }, placement: narrow && !above ? 'right-end' : above ? 'top-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 8, children: [_jsx(Popover.Anchor, { width: narrow ? undefined : '100%', 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(' · ')}`, "aria-haspopup": "menu", "aria-expanded": menu.open, onPress: menu.toggle, width: narrow ? 40 : '100%', minH: narrow ? 40 : 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 ? 30 : 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 }), standing ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: standing })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsx(Popover.Content, { ...glass(2), items: "stretch", borderWidth: 1, rounded: "$6", p: "$1.5", width: 288, maxW: "calc(100vw - 16px)", maxH: "calc(100dvh - 32px)", overflowY: "auto", overflowX: "hidden", children: _jsx(Refit, { children: _jsx(View, { render: _jsx("div", { ref: land, role: "menu", "aria-label": "Account", onKeyDown: (e) => rove(e, close) }), self: "stretch", minW: 0, children: _jsxs(YStack, { gap: 2, children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person.email || who }), _jsx(Rule, {}), _jsx(Meter, { read: read, onPlans: () => go(path({ kind: 'screen', screen: 'plans' })), onBilling: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(Rule, {}), _jsx(Label, { children: "Organizations" }), _jsx(YStack, { role: "group", "aria-label": "Organizations", gap: 2, children: all.map((o) => (_jsx(Item, { icon: _jsx(Mark, { org: o }), label: o.display, sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), checked: o.name === current, onPress: () => {
+                            }, render: "button", "data-slot": "me", "aria-label": `Account: ${[who, current].filter(Boolean).join(' · ')}`, ...{ title: who }, "aria-haspopup": "menu", "aria-expanded": menu.open, onPress: toggle, 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 }), plan ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 1, text: "left", children: plan })) : null] }), _jsx(ChevronsUpDown, { size: 14, "aria-hidden": true, opacity: 0.6 })] }))] }) }), _jsx(Popover.Content, { ...glass(2), items: "stretch", borderWidth: 1, rounded: "$5", p: "$1", width: 240, maxW: "calc(100vw - 16px)", maxH: "calc(100dvh - 32px)", overflowY: "auto", overflowX: "hidden", children: _jsx(Refit, { children: _jsx(View, { render: _jsx("div", { ref: land, role: "menu", "aria-label": "Account", onKeyDown: (e) => rove(e, close) }), self: "stretch", minW: 0, children: page === 'main' ? (_jsxs(YStack, { gap: 1, children: [_jsxs(XStack, { items: "center", gap: "$2.5", px: "$2", pt: "$1.5", pb: "$2", 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: plan || host.person.email || '' })] })] }), _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage remaining", trail: _jsx(More, {}), onPress: () => turn('usage') }), _jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: here?.display ?? current ?? 'Organization', sub: "Organization", trail: _jsx(More, {}), onPress: () => turn('orgs') }), _jsx(Item, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), label: "API keys", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(KEYS)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Settings", trail: _jsx(Keys, { children: apple ? '⌘,' : 'Ctrl+,' }), onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(Rule, {}), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Help", trail: _jsx(More, {}), onPress: () => turn('help') }), host.signOut ? _jsx(Item, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), label: "Log out", onPress: () => (menu.onOpenChange(false), host.signOut?.()) }) : null] })) : page === 'usage' ? (_jsxs(YStack, { gap: 1, children: [back('Usage remaining'), _jsx(Rule, {}), _jsx(Meter, { read: read, onPlans: () => go(path({ kind: 'screen', screen: 'plans' })), onBilling: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage", onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(Item, { icon: _jsx(CreditCard, { size: 15, "aria-hidden": true }), label: "Billing", onPress: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: upgrade(read.value?.label?.name), onPress: () => go(path({ kind: 'screen', screen: 'plans' })) })] })) : page === 'orgs' ? (_jsxs(YStack, { gap: 1, children: [back('Organization'), _jsx(Rule, {}), _jsx(Label, { children: "Organizations" }), _jsx(YStack, { role: "group", "aria-label": "Organizations", gap: 2, children: all.map((o) => (_jsx(Item, { icon: _jsx(Mark, { org: o }), label: o.display, sub: [o.personal ? 'Personal' : said(o.role), planFor(o)].filter(Boolean).join(' · '), checked: o.name === current, onPress: () => {
                                                     menu.onOpenChange(false);
                                                     if (o.name !== current)
                                                         onOrg(o.name);
-                                                } }, o.name))) }), _jsx(Item, { icon: _jsx(Plus, { size: 15, "aria-hidden": true }), label: "Create organization", onPress: () => (menu.onOpenChange(false), setCreating(true)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Organization settings", onPress: () => (menu.onOpenChange(false), window.location.assign(site(ORG_SETTINGS))) }), where().team ? null : here && !here.personal ? (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Open in Hanzo Team", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(`${ENTRY}&org=${encodeURIComponent(here.name)}`)) })) : (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Create a team", onPress: () => (menu.onOpenChange(false), setCreating(true)) })), superAdmin() ? (_jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: "All organizations", onPress: () => (menu.onOpenChange(false), setSupporting(true)) })) : null, _jsx(Rule, {}), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Settings", onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(Item, { icon: _jsx(Gauge, { size: 15, "aria-hidden": true }), label: "Usage", onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(Item, { icon: _jsx(CreditCard, { size: 15, "aria-hidden": true }), label: "Billing", onPress: () => go(path({ kind: 'settings', section: 'billing' })) }), _jsx(Item, { icon: _jsx(KeyRound, { size: 15, "aria-hidden": true }), label: "API keys", onPress: () => (menu.onOpenChange(false), window.location.assign(KEYS)) }), _jsx(Item, { icon: _jsx(Sparkles, { size: 15, "aria-hidden": true }), label: "View all plans", onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Get help", onPress: () => (menu.onOpenChange(false), window.open(DOCS, '_blank', 'noopener,noreferrer')) }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(Rule, {}), _jsx(Item, { icon: _jsx(LogOut, { size: 15, "aria-hidden": true }), label: "Log out", onPress: () => (menu.onOpenChange(false), host.signOut?.()) })] })) : null] }) }) }) })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null] }));
+                                                } }, o.name))) }), _jsx(Item, { icon: _jsx(Plus, { size: 15, "aria-hidden": true }), label: "Create organization", onPress: () => (menu.onOpenChange(false), setCreating(true)) }), _jsx(Item, { icon: _jsx(Settings, { size: 15, "aria-hidden": true }), label: "Organization settings", onPress: () => (menu.onOpenChange(false), window.location.assign(site(ORG_SETTINGS))) }), where().team ? null : here && !here.personal ? (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Open in Hanzo Team", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.location.assign(`${ENTRY}&org=${encodeURIComponent(here.name)}`)) })) : (_jsx(Item, { icon: _jsx(Users, { size: 15, "aria-hidden": true }), label: "Create a team", onPress: () => (menu.onOpenChange(false), setCreating(true)) })), superAdmin() ? (_jsx(Item, { icon: _jsx(Building2, { size: 15, "aria-hidden": true }), label: "All organizations", onPress: () => (menu.onOpenChange(false), setSupporting(true)) })) : null] })) : (_jsxs(YStack, { gap: 1, children: [back('Help'), _jsx(Rule, {}), _jsx(Item, { icon: _jsx(LifeBuoy, { size: 15, "aria-hidden": true }), label: "Get help", trail: _jsx(ExternalLink, { size: 13, "aria-hidden": true, opacity: 0.6 }), onPress: () => (menu.onOpenChange(false), window.open(DOCS, '_blank', 'noopener,noreferrer')) }), _jsx(Item, { icon: _jsx(Mail, { size: 15, "aria-hidden": true }), label: "Contact us", onPress: () => (menu.onOpenChange(false), window.location.assign(site('/contact'))) })] })) }) }) })] }), _jsx(Create, { open: creating, onOpenChange: setCreating }), supporting ? _jsx(SupportPicker, { onClose: () => setSupporting(false) }) : null] }));
 }
 /**
  * The sheet that creates an organization: a name, then `POST /v1/account/orgs`,

package/dist/Meet.js

@@ -273,7 +273,7 @@ export function Meet() {
     return (_jsxs(YStack, { width: "100%", height: "100%", bg: "$background", overflowX: "auto", overflowY: "auto", children: [_jsxs(XStack, { minH: 56, px: 20, py: 8, gap: 10, flexWrap: "wrap", bg: "$panel", borderBottomWidth: 1, borderBottomColor: "$borderColor", items: "center", justify: "space-between", children: [_jsxs(XStack, { items: "center", gap: 12, shrink: 1, minW: "auto", children: [_jsx(XStack, { width: 32, height: 32, rounded: 8, bg: "$raised", items: "center", justify: "center", shrink: 1, minW: "auto", children: _jsx(Video, { size: 18, color: "var(--foreground)" }) }), _jsxs(YStack, { shrink: 1, minW: "auto", children: [_jsxs(XStack, { items: "center", gap: 8, children: [_jsx(Text, { fontSize: "$4", fontWeight: "700", color: "$ink", children: "Hanzo Meet" }), _jsx(Text, { fontSize: FLOOR, fontWeight: "700", bg: "$hover", color: "$soft", borderWidth: 1, borderColor: "$borderColor", px: 6, py: 1, rounded: 4, children: "LIVE \u00B7 meet.hanzo.ai" })] }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Native WebRTC video conferencing with AI meeting bot transcription & voice" })] })] }), activeMeetingRoom ? (_jsxs(XStack, { items: "center", gap: 8, shrink: 1, minW: "auto", flexWrap: "wrap", children: [_jsx(XStack, { bg: "$hover", rounded: 8, p: 2, gap: 2, borderWidth: 1, borderColor: "$borderColor", shrink: 1, minW: "auto", children: [
                                     ['iframe', 'SFU Stage', Tv],
                                     ['grid', 'Agent Grid', LayoutGrid],
-                                ].map(([view, label, Icon]) => (_jsxs(Button, { size: "sm", variant: meetingView === view ? 'primary' : 'ghost', ...(meetingView === view ? null : { color: '$soft' }), "aria-pressed": meetingView === view, onClick: () => setMeetingView(view), children: [_jsx(Icon, { size: 12 }), label] }, view))) }), botAssisting ? (_jsx(View, { display: "none", "$max-md": { display: 'flex' }, children: _jsxs(Button, { size: "sm", variant: copilot ? 'secondary' : 'default', onClick: () => setCopilot((v) => !v), "aria-label": "Co-pilot", "aria-expanded": copilot, "aria-controls": "meet-copilot", children: [_jsx(Bot, { size: 13 }), "Co-pilot"] }) })) : null, _jsxs(Button, { size: "sm", onClick: () => handleCopyLink(activeMeetingRoom), children: [copied ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }), copied ? 'Link Copied' : 'Copy Room Link'] }), _jsxs(Button, { size: "sm", variant: "destructive", onClick: () => {
+                                ].map(([view, label, Icon]) => (_jsxs(Button, { size: "sm", variant: meetingView === view ? 'primary' : 'ghost', ...(meetingView === view ? null : { color: '$soft' }), "aria-pressed": meetingView === view, onClick: () => setMeetingView(view), children: [_jsx(Icon, { size: 12 }), label] }, view))) }), botAssisting ? (_jsx(View, { display: "none", "$max-md": { display: 'flex' }, children: _jsxs(Button, { size: "sm", variant: copilot ? 'secondary' : 'default', onClick: () => setCopilot((v) => !v), "aria-label": "Co-pilot", "aria-expanded": copilot, "aria-controls": "meet-copilot", children: [_jsx(Bot, { size: 13 }), "Co-pilot"] }) })) : null, _jsxs(Button, { size: "sm", onClick: () => handleCopyLink(activeMeetingRoom), children: [copied ? _jsx(Check, { size: 13 }) : _jsx(Copy, { size: 13 }), copied ? 'Link Copied' : 'Copy meeting link'] }), _jsxs(Button, { size: "sm", variant: "destructive", onClick: () => {
                                     stopAgentSpeech();
                                     // Leaving the call hangs up the hands-free conversation and
                                     // settles the transcript with it.

package/dist/Prose.js

@@ -7,8 +7,15 @@ const INK = 'var(--foreground)';
 const QUIET = 'var(--muted-foreground)';
 const EDGE = 'var(--border)';
 const GROUND = 'var(--secondary)';
-/** A heading's rung, by depth: one step down the type ramp per level. */
-const RUNG = ['$6', '$4', '$3', '$2', '$2', '$2'];
+/**
+ * The reading type, px: a 16px body on a 24px line, and a heading's size and
+ * line by depth, as the reference conversation sets them — the body a reader
+ * reads at arm's length, not a sidebar's 14.
+ */
+const BODY = 16;
+const LINE = 24;
+const RUNG = [28, 24, 20, 17, 16, 16];
+const LEAD = [36, 32, 28, 24, 24, 24];
 /** The character references a model writes, as the characters they name. An
  *  HTML renderer let the browser decode `&`; a string React sets is shown
  *  exactly as written. */
@@ -21,7 +28,7 @@ const decode = (s) => s.replace(/&(?:#x([0-9a-f]{1,6})|#(\d{1,7})|([a-z]+));/gi,
     return NAMED[name.toLowerCase()] ?? all;
 });
 /** One run of inline tokens, in `tone`, at the block's `rung`. */
-function inline(tokens, tone, rung = '$2') {
+function inline(tokens, tone, rung = BODY) {
     return (tokens ?? []).map((t, i) => {
         switch (t.type) {
             case 'strong':
@@ -31,7 +38,7 @@ function inline(tokens, tone, rung = '$2') {
             case 'del':
                 return (_jsx(Text, { render: "del", color: tone, textDecorationLine: "line-through", opacity: 0.7, children: inline(t.tokens, tone, rung) }, i));
             case 'codespan':
-                return (_jsx(Text, { render: "code", color: tone, fontFamily: "$mono", fontSize: "$1", px: "$1", rounded: 4, bg: GROUND, children: decode(t.text) }, i));
+                return (_jsx(Text, { render: "code", color: tone, fontFamily: "$mono", fontSize: Math.round(rung * 0.875), px: "$1", rounded: 4, bg: GROUND, children: decode(t.text) }, i));
             case 'br':
                 return _jsx("br", {}, i);
             case 'link': {
@@ -41,7 +48,7 @@ function inline(tokens, tone, rung = '$2') {
                 // AWAY IS A NEW TAB, HOME IS NOT. Someone else's page opened from a
                 // message never gets a handle on this one and never inherits the
                 // referrer; a link back into this app is a link.
-                return (_jsx(Anchor, { href: to.href, ...(to.away ? { target: '_blank', rel: 'noopener noreferrer nofollow' } : {}), ...(t.title ? { title: t.title } : {}), size: rung, color: INK, textDecorationLine: "underline", children: inline(t.tokens, INK, rung) }, i));
+                return (_jsx(Anchor, { href: to.href, ...(to.away ? { target: '_blank', rel: 'noopener noreferrer nofollow' } : {}), ...(t.title ? { title: t.title } : {}), fontSize: rung, color: INK, textDecorationLine: "underline", children: inline(t.tokens, INK, rung) }, i));
             }
             // An image is a fetch to wherever the message says, which is a reader's
             // address leaking to whoever wrote it. The alt text is the message.
@@ -59,11 +66,11 @@ function inline(tokens, tone, rung = '$2') {
 }
 /** Running text: a paragraph, or a list item's own words. */
 function Line({ tokens, tone }) {
-    return (_jsx(Text, { render: "p", color: tone, fontSize: "$2", lineHeight: "$3", children: inline(tokens, tone) }));
+    return (_jsx(Text, { render: "p", color: tone, fontSize: BODY, lineHeight: LINE, children: inline(tokens, tone) }));
 }
 function List({ list, tone }) {
     const start = typeof list.start === 'number' ? list.start : 1;
-    return (_jsx(YStack, { render: list.ordered ? 'ol' : 'ul', m: 0, p: 0, gap: "$1", children: list.items.map((item, i) => (_jsxs(XStack, { render: "li", gap: "$1", children: [_jsx(Text, { "aria-hidden": true, color: tone, fontSize: "$2", lineHeight: "$3", minW: 14, text: "right", children: item.task ? (item.checked ? '☑' : '☐') : list.ordered ? `${start + i}.` : '•' }), _jsx(YStack, { flex: 1, minW: 0, gap: "$1", children: blocks(item.tokens, tone) })] }, i))) }));
+    return (_jsx(YStack, { render: list.ordered ? 'ol' : 'ul', m: 0, p: 0, gap: "$1", children: list.items.map((item, i) => (_jsxs(XStack, { render: "li", gap: "$1", children: [_jsx(Text, { "aria-hidden": true, color: tone, fontSize: BODY, lineHeight: LINE, minW: 16, text: "right", children: item.task ? (item.checked ? '☑' : '☐') : list.ordered ? `${start + i}.` : '•' }), _jsx(YStack, { flex: 1, minW: 0, gap: "$1", children: blocks(item.tokens, tone) })] }, i))) }));
 }
 /** A table is a grid: one track per column, as wide as what the column holds,
  *  in a box that scrolls sideways rather than widening the message. Cells
@@ -71,7 +78,7 @@ function List({ list, tone }) {
  *  the top and the first column the left. */
 function Table({ table, tone }) {
     const align = (c) => table.align[c] ?? 'left';
-    return (_jsx(View, { role: "table", display: "grid", gridTemplateColumns: `repeat(${table.header.length}, max-content)`, self: "flex-start", maxW: "100%", overflowX: "auto", children: [table.header, ...table.rows].map((row, r) => (_jsx(View, { role: "row", display: "contents", children: row.map((cell, c) => (_jsx(Text, { role: r ? 'cell' : 'columnheader', color: tone, fontSize: "$2", lineHeight: "$3", fontWeight: r ? '400' : '600', text: align(c), px: "$2", py: "$1", bg: r ? undefined : GROUND, borderColor: EDGE, borderStyle: "solid", borderRightWidth: 1, borderBottomWidth: 1, borderTopWidth: r ? 0 : 1, borderLeftWidth: c ? 0 : 1, children: inline(cell.tokens, tone) }, c))) }, r))) }));
+    return (_jsx(View, { role: "table", display: "grid", gridTemplateColumns: `repeat(${table.header.length}, max-content)`, self: "flex-start", maxW: "100%", overflowX: "auto", children: [table.header, ...table.rows].map((row, r) => (_jsx(View, { role: "row", display: "contents", children: row.map((cell, c) => (_jsx(Text, { role: r ? 'cell' : 'columnheader', color: tone, fontSize: 14, lineHeight: 20, fontWeight: r ? '400' : '600', text: align(c), px: "$2", py: "$1", bg: r ? undefined : GROUND, borderColor: EDGE, borderStyle: "solid", borderRightWidth: 1, borderBottomWidth: 1, borderTopWidth: r ? 0 : 1, borderLeftWidth: c ? 0 : 1, children: inline(cell.tokens, tone, 14) }, c))) }, r))) }));
 }
 /** A run of block tokens. A tight list item's words arrive as a `text` block. */
 function blocks(tokens, tone) {
@@ -82,7 +89,7 @@ function blocks(tokens, tone) {
             case 'text':
                 return _jsx(Line, { tokens: 'tokens' in t && t.tokens ? t.tokens : [t], tone: tone }, i);
             case 'heading':
-                return (_jsx(Text, { render: `h${t.depth}`, m: 0, color: tone, fontSize: RUNG[t.depth - 1], lineHeight: RUNG[t.depth - 1], fontWeight: "600", children: inline(t.tokens, tone, RUNG[t.depth - 1]) }, i));
+                return (_jsx(Text, { render: `h${t.depth}`, m: 0, mt: t.depth < 3 ? 8 : 4, color: tone, fontSize: RUNG[t.depth - 1], lineHeight: LEAD[t.depth - 1], fontWeight: "600", children: inline(t.tokens, tone, RUNG[t.depth - 1]) }, i));
             case 'list':
                 return _jsx(List, { list: t, tone: tone }, i);
             case 'table':

package/dist/Rail.d.ts

@@ -0,0 +1,39 @@
+import type { ReactNode } from 'react';
+import { type Host } from '@hanzo/build';
+import type { Mode } from './recent.js';
+/** The rail's width, px. */
+export declare const RAIL = 48;
+/** One mark: an icon button named for where it goes, its name its tooltip, lit where the reader is. */
+export declare function Mark({ label, on, onPress, children, ...rest }: {
+    label: string;
+    /** The reader is there. */
+    on?: boolean;
+    onPress?: () => void;
+    children: ReactNode;
+    [attribute: `data-${string}` | `aria-${string}`]: unknown;
+}): import("react").JSX.Element;
+/** The sidebar's toggle: the same mark wherever a host draws it. */
+export declare function Toggle({ open, onPress, label }: {
+    open: boolean;
+    onPress: () => void;
+    label?: string;
+}): import("react").JSX.Element;
+export declare function Rail({ host, mode, at, open, toggle, flat, onChat, onDev, go, onOrg, }: {
+    host: Host;
+    mode: Mode;
+    /** Dev's builder address, or null in Chat. */
+    at: string | null;
+    /** The sidebar beside the rail is open. */
+    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;
+    /** To Chat and to Dev, each where the reader left it. */
+    onChat: () => void;
+    onDev: () => void;
+    /** Moves the app to an address of this page. */
+    go: (address: string) => void;
+    /** Work in another organization. */
+    onOrg: (org: string) => void;
+}): import("react").JSX.Element;