@hanzo/rooms 0.1.36 → 0.1.38

package/dist/Recents.js

@@ -4,9 +4,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // conversations (`/v1/agents/chat/conversations`, `useThreadList`), Dev its
 // coding runs (`/v1/agent/sessions?kind=coding`, @hanzo/build `useSessions`). Each
 // mode reads its own store. The menu beside the heading narrows, groups and sorts
-// the list; the choice is kept per mode in this browser. A conversation's row
-// carries its own menu (thread.tsx): pinned ones list first, under Pinned, and
-// Chat's Status shows the archived ones apart.
+// the list; the choice is kept per mode in this browser. Chat's rows share one
+// menu (thread.tsx `ConversationMenu`): pinned ones list first, under Pinned,
+// and Chat's Status shows the archived ones apart.
 import { useEffect, useId, useMemo, useRef } from 'react';
 import { ScrollView, SizableText, XStack, YStack } from '@hanzo/gui';
 import { ListFilter, MessageSquare } from 'lucide-react';
@@ -15,7 +15,7 @@ import { DropdownMenu } from '@hanzo/ui';
 import { SidebarItem, StatusDot } from '@hanzo/ui/chat';
 import { useKept } from './kept.js';
 import { ago, arrange, chats, MENUS, PLAIN, runs, SINCE, viewOf } from './recent.js';
-import { ThreadRow, useThreadList } from './thread.js';
+import { ConversationMenu, ThreadRow, useThreadList } from './thread.js';
 /** The menu's items: each section a heading and its options, the one in force checked. */
 function items(mode, view, set) {
     const m = MENUS[mode];
@@ -45,7 +45,7 @@ function Chats({ thread, words, view, keep, onOpen, onNew, }) {
     const store = useThreadList(view.status === 'archived', thread);
     const rows = useMemo(() => chats(store.threads), [store.threads]);
     const byId = useMemo(() => new Map(store.threads.map((t) => [t.id, t])), [store.threads]);
-    return (_jsx(List, { mode: "chat", rows: rows, words: words, view: view, keep: keep, open: (r) => r.id === thread, reading: store.loading && !store.threads.length, error: store.error, onOpen: onOpen, threads: byId, onNew: onNew }));
+    return (_jsx(List, { mode: "chat", rows: rows, words: words, view: view, keep: keep, open: (r) => r.id === thread, reading: store.loading && !store.threads.length, error: store.error, onOpen: onOpen, threads: byId, held: thread, onNew: onNew }));
 }
 /** Dev's Recents: the org's coding runs alone. */
 function Runs({ host, words, view, keep, onOpen }) {
@@ -64,7 +64,7 @@ function Runs({ host, words, view, keep, onOpen }) {
     const rows = useMemo(() => runs(store.value), [store.value]);
     return (_jsx(List, { mode: "dev", rows: rows, words: words, view: view, keep: keep, open: (row) => row.id === run, reading: store.loading && !store.value.length, error: store.error, onOpen: onOpen }));
 }
-function List({ mode, rows, words, view, keep, open, reading, error, onOpen, threads, onNew, }) {
+function List({ mode, rows, words, view, keep, open, reading, error, onOpen, threads, held = null, onNew, }) {
     const label = useId();
     const groups = arrange(rows, view, words);
     const narrowed = view.status !== PLAIN.status || view.since !== PLAIN.since;
@@ -72,7 +72,8 @@ function List({ mode, rows, words, view, keep, open, reading, error, onOpen, thr
     const running = mode === 'dev' ? rows.filter((r) => r.status === 'running').length : 0;
     const row = (r) => {
         const when = ago(r.at, now);
-        const item = (_jsx(SidebarItem, { "data-kind": r.kind, active: open(r), rounded: "$4", minH: 32, pr: when ? '$8' : '$2', onKeyDown: (e) => {
+        const t = threads?.get(r.id);
+        const item = (_jsx(SidebarItem, { "data-kind": r.kind, active: open(r), rounded: "$4", minH: 32, pr: when || t ? '$8' : '$2', ...(t ? { $touchable: { pr: 52 } } : null), onKeyDown: (e) => {
                 if (e.key !== 'Enter' && e.key !== ' ')
                     return;
                 e.preventDefault?.();
@@ -80,10 +81,10 @@ function List({ mode, rows, words, view, keep, open, reading, error, onOpen, thr
             }, icon: r.kind === 'chat' ? (_jsx(MessageSquare, { size: 14, "aria-hidden": true })) : (_jsx(XStack, { width: 14, justify: "center", children: _jsx(StatusDot, { status: DOTS[r.status] ?? 'idle' }) })), onPress: () => onOpen(r), children: r.title }));
         // How long ago, at the row's end; the full time is its title.
         const age = when ? (_jsx(SizableText, { size: "$1", color: "$soft", pointerEvents: "none", display: "flex", items: "center", fontVariant: ['tabular-nums'], children: _jsx("time", { dateTime: r.at, title: new Date(r.at).toLocaleString(), children: when }) })) : null;
-        const t = threads?.get(r.id);
         if (t)
-            return (_jsx(ThreadRow, { t: t, active: open(r), aside: age, onGone: onNew, children: item }, r.id));
+            return (_jsx(ThreadRow, { t: t, active: open(r), aside: age, children: item }, r.id));
         return (_jsxs(YStack, { role: "listitem", position: "relative", children: [item, age ? (_jsx(XStack, { position: "absolute", r: "$2", t: 0, b: 0, items: "center", pointerEvents: "none", children: age })) : null] }, r.id));
     };
-    return (_jsxs(YStack, { "data-slot": "recents", flex: 1, minH: 0, mt: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", height: 30, pl: "$2", pr: "$1", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { id: label, size: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: "Recents" }), running ? (_jsx(XStack, { "aria-label": `${running} running`, minW: 18, height: 18, px: "$1.5", rounded: 999, items: "center", justify: "center", bg: "$edge", borderWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", "aria-hidden": true, children: String(running) }) })) : null] }), _jsx(DropdownMenu, { minWidth: 200, trigger: _jsx(XStack, { render: "button", "aria-label": "Recents view", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", hoverStyle: { bg: '$hover' }, bg: narrowed ? '$hover' : 'transparent', children: _jsx(ListFilter, { size: 14, "aria-hidden": true }) }), items: items(mode, view, keep) })] }), _jsxs(ScrollView, { flex: 1, showsVerticalScrollIndicator: false, children: [error ? _jsx(Note, { children: error.message }) : null, groups.length ? (_jsx(YStack, { role: "list", "aria-labelledby": label, gap: 1, children: groups.map((g) => g.title ? (_jsxs(YStack, { role: "listitem", gap: 1, pt: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g.title }), _jsx(YStack, { role: "list", "aria-label": g.title, gap: 1, children: g.rows.map(row) })] }, g.title)) : (g.rows.map(row))) })) : reading ? (_jsx(Note, { children: mode === 'chat' ? 'Reading your chats…' : 'Reading your runs…' })) : error ? null : words.trim() ? (_jsx(Note, { children: `Nothing matches “${words.trim()}”.` })) : view.status === 'archived' ? (_jsx(Note, { children: "No archived chats." })) : narrowed ? (_jsx(Note, { children: "Nothing in this view." })) : (_jsx(Note, { children: mode === 'chat' ? 'No chats yet. Say something and it lands here.' : 'No runs yet.' }))] })] }));
+    const body = groups.length ? (_jsx(YStack, { role: "list", "aria-labelledby": label, gap: 1, children: groups.map((g) => g.title ? (_jsxs(YStack, { role: "listitem", gap: 1, pt: "$2", children: [_jsx(SizableText, { size: "$1", color: "$soft", px: "$2", pb: "$1", children: g.title }), _jsx(YStack, { role: "list", "aria-label": g.title, gap: 1, children: g.rows.map(row) })] }, g.title)) : (g.rows.map(row))) })) : reading ? (_jsx(Note, { children: mode === 'chat' ? 'Reading your chats…' : 'Reading your runs…' })) : error ? null : words.trim() ? (_jsx(Note, { children: `Nothing matches “${words.trim()}”.` })) : view.status === 'archived' ? (_jsx(Note, { children: "No archived chats." })) : narrowed ? (_jsx(Note, { children: "Nothing in this view." })) : (_jsx(Note, { children: mode === 'chat' ? 'No chats yet. Say something and it lands here.' : 'No runs yet.' }));
+    return (_jsxs(YStack, { "data-slot": "recents", flex: 1, minH: 0, mt: "$2", children: [_jsxs(XStack, { items: "center", justify: "space-between", height: 30, pl: "$2", pr: "$1", shrink: 0, children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { id: label, size: "$1", color: "$soft", fontWeight: "600", textTransform: "uppercase", letterSpacing: 0.6, children: "Recents" }), running ? (_jsx(XStack, { "aria-label": `${running} running`, minW: 18, height: 18, px: "$1.5", rounded: 999, items: "center", justify: "center", bg: "$edge", borderWidth: 1, borderColor: "$borderColor", children: _jsx(SizableText, { size: "$1", fontWeight: "600", color: "$ink", "aria-hidden": true, children: String(running) }) })) : null] }), _jsx(DropdownMenu, { minWidth: 200, trigger: _jsx(XStack, { render: "button", "aria-label": "Recents view", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", hoverStyle: { bg: '$hover' }, bg: narrowed ? '$hover' : 'transparent', children: _jsx(ListFilter, { size: 14, "aria-hidden": true }) }), items: items(mode, view, keep) })] }), _jsxs(ScrollView, { flex: 1, showsVerticalScrollIndicator: false, children: [error ? _jsx(Note, { children: error.message }) : null, threads ? (_jsx(ConversationMenu, { threads: threads, active: held, onGone: onNew, children: _jsx(YStack, { children: body }) })) : (body)] })] }));
 }

package/dist/Share.d.ts

@@ -1,3 +1,13 @@
 export declare function Share({ thread }: {
     thread: string;
 }): import("react").JSX.Element;
+/**
+ * The same panel as a dialog, for a conversation the pane need not hold: a row
+ * menu's Share…. `onCloseAutoFocus` says where focus goes when it shuts.
+ */
+export declare function ShareDialog({ thread, open, onOpenChange, onCloseAutoFocus, }: {
+    thread: string | null;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onCloseAutoFocus?: (e: Event) => void;
+}): import("react").JSX.Element;

package/dist/Share.js

@@ -1,6 +1,8 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// The conversation header's Share control and the panel it opens.
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The conversation header's Share control and the panel it opens, and the same
+// panel as a dialog for a conversation's row menu (thread.tsx): one `Sharing`,
+// placed two ways.
 //
 // A link opens this ONE conversation, read only, as it stands when the link is
 // made (lib/share.ts), to the people who open it signed in. The panel copies
@@ -9,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // do not reply: a conversation belongs to the member who started it.
 import { useCallback, useEffect, useId, useRef, useState } from 'react';
 import { Check, Link2, Share2 } from 'lucide-react';
-import { Box, Button, Text, XStack, YStack } from '@hanzo/ui';
+import { Box, Button, Dialog, DialogContent, DialogTitle, Text, XStack, YStack } from '@hanzo/ui';
 import { hold, heldToken, link, Refused, shares } from './lib/share.js';
 import { BAD } from './lib/mix.js';
 /** How long "Link copied" stays. The same 1400 ms `Take` confirms for. */
@@ -29,9 +31,40 @@ export function Share({ thread }) {
     }, []);
     return (_jsxs(Box, { position: "relative", children: [_jsx(Box, { ref: button, render: "button", onClick: () => setOpen((o) => !o), "aria-haspopup": "dialog", "aria-expanded": open, "aria-label": "Share this conversation", borderWidth: 0, bg: "transparent", p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsxs(XStack, { items: "center", gap: "$1", children: [_jsx(Share2, { size: 13, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "$ink", children: "Share" })] }) }), open ? _jsx(Panel, { thread: thread, onClose: close }) : null] }));
 }
+/** The header's panel: hung under its button, shut by Escape or a press outside, focus starting inside. */
 function Panel({ thread, onClose }) {
     const heading = useId();
     const box = useRef(null);
+    // Escape closes; a press outside closes; focus starts inside.
+    useEffect(() => {
+        box.current?.querySelector('button')?.focus();
+        const key = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        const press = (e) => {
+            if (box.current && !box.current.contains(e.target) && !e.target?.closest?.('[aria-haspopup="dialog"]'))
+                onClose();
+        };
+        document.addEventListener('keydown', key);
+        document.addEventListener('mousedown', press);
+        return () => {
+            document.removeEventListener('keydown', key);
+            document.removeEventListener('mousedown', press);
+        };
+    }, [onClose]);
+    return (_jsx(YStack, { ref: box, role: "dialog", "aria-labelledby": heading, position: "absolute", r: 0, t: "100%", mt: "$2", z: "var(--z-dropdown)", width: 360, maxW: "calc(100vw - 32px)", p: "$4", gap: "$3", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$background", boxShadow: "0 16px 36px color-mix(in srgb, var(--pure-black) 30%, transparent)", children: _jsx(Sharing, { thread: thread, note: `${heading}-said`, title: _jsx(Text, { id: heading, render: "h2", fontSize: "$4", fontWeight: "600", color: "$ink", children: "Share this chat" }) }) }));
+}
+/**
+ * The same panel as a dialog, for a conversation the pane need not hold: a row
+ * menu's Share…. `onCloseAutoFocus` says where focus goes when it shuts.
+ */
+export function ShareDialog({ thread, open, onOpenChange, onCloseAutoFocus, }) {
+    const note = useId();
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsx(DialogContent, { maxW: 400, rounded: "$6", gap: "$3", onCloseAutoFocus: onCloseAutoFocus, children: thread ? _jsx(Sharing, { thread: thread, note: note, title: _jsx(DialogTitle, { children: "Share this chat" }) }) : null }) }));
+}
+/** What a link to one conversation is, who opened each, and the controls over them. */
+function Sharing({ thread, title, note }) {
     const [live, setLive] = useState(null);
     const [busy, setBusy] = useState(null);
     const [wrong, setWrong] = useState(null);
@@ -51,24 +84,6 @@ function Panel({ thread, onClose }) {
             on = false;
         };
     }, [thread]);
-    // Escape closes; a press outside closes; focus starts inside.
-    useEffect(() => {
-        box.current?.querySelector('button')?.focus();
-        const key = (e) => {
-            if (e.key === 'Escape')
-                onClose();
-        };
-        const press = (e) => {
-            if (box.current && !box.current.contains(e.target) && !e.target?.closest?.('[aria-haspopup="dialog"]'))
-                onClose();
-        };
-        document.addEventListener('keydown', key);
-        document.addEventListener('mousedown', press);
-        return () => {
-            document.removeEventListener('keydown', key);
-            document.removeEventListener('mousedown', press);
-        };
-    }, [onClose]);
     useEffect(() => {
         if (!copied)
             return;
@@ -126,5 +141,5 @@ function Panel({ thread, onClose }) {
             setBusy(null);
         }
     };
-    return (_jsxs(YStack, { ref: box, role: "dialog", "aria-labelledby": heading, position: "absolute", r: 0, t: "100%", mt: "$2", z: "var(--z-dropdown)", width: 360, maxW: "calc(100vw - 32px)", p: "$4", gap: "$3", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$background", boxShadow: "0 16px 36px color-mix(in srgb, var(--pure-black) 30%, transparent)", children: [_jsx(Text, { id: heading, render: "h2", fontSize: "$4", fontWeight: "600", color: "$ink", children: "Share this chat" }), _jsx(Text, { fontSize: "$2", color: "$soft", lineHeight: "$3", children: "People who open the link signed in can read this chat as it is now, and you see who they are below. They cannot reply, and messages you send later are not shared." }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Button, { size: "sm", onClick: () => void copy(), disabled: busy !== null || live === null, "aria-describedby": `${heading}-said`, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [copied ? _jsx(Check, { size: 14, "aria-hidden": true }) : _jsx(Link2, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "inherit", children: copied ? 'Link copied' : busy === 'copy' ? 'Making a link…' : 'Copy link' })] }) }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Read only" })] }), _jsx(Text, { id: `${heading}-said`, "aria-live": "polite", fontSize: "$1", color: "$soft", minH: 16, children: copied ? 'The link is on your clipboard.' : '' }), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$1", color: "$soft", textTransform: "uppercase", children: "Who has access" }), _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsx(Text, { fontSize: "$2", color: "$ink", children: "You" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Owner" })] }), live === null ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "Reading links." })) : live.length === 0 ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "No links yet. Copy link makes one." })) : (_jsx(YStack, { render: "ul", gap: "$2", m: 0, p: 0, "aria-label": "Live links", children: live.map((row) => (_jsxs(YStack, { render: "li", gap: "$1.5", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(YStack, { minW: 0, children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: "Link" }), _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read only", day(row.createdAt) ? ` · made ${day(row.createdAt)}` : ''] })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void revoke(row.id), disabled: busy !== null, "aria-label": `Revoke the link made ${day(row.createdAt) || 'earlier'}`, children: busy === row.id ? 'Revoking…' : 'Revoke' })] }), (row.viewers ?? []).length === 0 ? (_jsx(Text, { fontSize: "$1", color: "$soft", pl: "$3", children: "Nobody has opened it yet." })) : (_jsx(YStack, { render: "ul", gap: "$1", m: 0, pl: "$3", "aria-label": "Opened by", children: row.viewers.map((v) => (_jsxs(XStack, { render: "li", items: "center", justify: "space-between", gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: v.name || 'Someone signed in' }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void unview(row, v), disabled: busy !== null, "aria-label": `Remove ${v.name || 'this reader'}`, children: busy === v.id ? 'Removing…' : 'Remove' })] }, v.id))) }))] }, row.id))) }))] }), wrong ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: wrong })) : null] }));
+    return (_jsxs(_Fragment, { children: [title, _jsx(Text, { fontSize: "$2", color: "$soft", lineHeight: "$3", children: "People who open the link signed in can read this chat as it is now, and you see who they are below. They cannot reply, and messages you send later are not shared." }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Button, { size: "sm", onClick: () => void copy(), disabled: busy !== null || live === null, "aria-describedby": note, children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [copied ? _jsx(Check, { size: 14, "aria-hidden": true }) : _jsx(Link2, { size: 14, "aria-hidden": true }), _jsx(Text, { fontSize: "$2", color: "inherit", children: copied ? 'Link copied' : busy === 'copy' ? 'Making a link…' : 'Copy link' })] }) }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Read only" })] }), _jsx(Text, { id: note, "aria-live": "polite", fontSize: "$1", color: "$soft", minH: 16, children: copied ? 'The link is on your clipboard.' : '' }), _jsxs(YStack, { gap: "$2", children: [_jsx(Text, { fontSize: "$1", color: "$soft", textTransform: "uppercase", children: "Who has access" }), _jsxs(XStack, { items: "center", justify: "space-between", children: [_jsx(Text, { fontSize: "$2", color: "$ink", children: "You" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "Owner" })] }), live === null ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "Reading links." })) : live.length === 0 ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: "No links yet. Copy link makes one." })) : (_jsx(YStack, { render: "ul", gap: "$2", m: 0, p: 0, "aria-label": "Live links", children: live.map((row) => (_jsxs(YStack, { render: "li", gap: "$1.5", children: [_jsxs(XStack, { items: "center", justify: "space-between", gap: "$2", children: [_jsxs(YStack, { minW: 0, children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: "Link" }), _jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Read only", day(row.createdAt) ? ` · made ${day(row.createdAt)}` : ''] })] }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void revoke(row.id), disabled: busy !== null, "aria-label": `Revoke the link made ${day(row.createdAt) || 'earlier'}`, children: busy === row.id ? 'Revoking…' : 'Revoke' })] }), (row.viewers ?? []).length === 0 ? (_jsx(Text, { fontSize: "$1", color: "$soft", pl: "$3", children: "Nobody has opened it yet." })) : (_jsx(YStack, { render: "ul", gap: "$1", m: 0, pl: "$3", "aria-label": "Opened by", children: row.viewers.map((v) => (_jsxs(XStack, { render: "li", items: "center", justify: "space-between", gap: "$2", children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: v.name || 'Someone signed in' }), _jsx(Button, { size: "sm", variant: "outline", onClick: () => void unview(row, v), disabled: busy !== null, "aria-label": `Remove ${v.name || 'this reader'}`, children: busy === v.id ? 'Removing…' : 'Remove' })] }, v.id))) }))] }, row.id))) }))] }), wrong ? (_jsx(Text, { role: "alert", fontSize: "$2", color: BAD, children: wrong })) : null] }));
 }

package/dist/Shell.js

@@ -18,7 +18,7 @@ import { createPortal } from "react-dom";
 import { MessageSquare, Code2, Inbox, Bot, ListChecks, HardDrive, Settings2, UserPlus, Building2, Search, Hash, AtSign, Lock, Workflow, Plus, ArrowLeft, ArrowRight, Send, Minus, Blocks, Star, FolderOpen, Activity, BookOpen, SquareTerminal, Share2, Sparkles, PanelLeft, PanelRight, Users, Globe, Cpu, Boxes, Wallet, Video, Calendar, LayoutGrid, ArrowUpLeft, } from "lucide-react";
 import { AiProvider, useAgents, useInbox, useModels, usePeople, } from "@hanzo/ai/react";
 import { PINNED } from "./recent.js";
-import { ThreadRow, useThreadList } from "./thread.js";
+import { ConversationMenu, ThreadRow, useThreadList } from "./thread.js";
 import { Box, XStack, YStack, Text } from "@hanzo/ui";
 // THE PAPER LADDER. `sheet(n)` is a fill AND the light on it, published as a
 // pair by @hanzo/design, so a surface asks for a HEIGHT instead of composing a
@@ -406,6 +406,7 @@ function Chats({ filter = "", onPick, }) {
         return list;
     }, [threads, customThreads]);
     const found = mergedThreads.filter((t) => matches(t.title || "Untitled", filter));
+    const byId = useMemo(() => new Map(threads.map((t) => [t.id, t])), [threads]);
     // PINNED FIRST, by the server's pin (thread.tsx), then the days.
     const shown = found.filter((t) => !t.thread?.pinned);
     const kept = found.filter((t) => t.thread?.pinned);
@@ -424,14 +425,14 @@ function Chats({ filter = "", onPick, }) {
     if (!signedIn)
         return _jsx(Note, { children: "Sign in to see your recent chats." });
     const mine = wrong ? (_jsx(Note, { children: say(wrong, "your chats") })) : loading && threads.length === 0 ? (_jsx(Note, { children: "Reading your chats." })) : found.length === 0 && filter ? (_jsxs(Note, { children: ["No chat matches \u201C", filter, "\u201D."] })) : threads.length === 0 ? (_jsx(Note, { children: "No chats yet. Say something and it lands here." })) : null;
-    return (_jsxs(_Fragment, { children: [mine, mine ? null : bands.map((band) => (_jsx(SidebarSection, { label: band.label, children: band.rows.map((t) => {
-                    const item = (_jsx(SidebarItem, { active: t.id === thread, onPress: () => {
-                            open(t.id);
-                            onPick?.();
-                        }, children: _jsxs(YStack, { minW: 0, children: [_jsxs(XStack, { items: "center", gap: "$1.5", minW: 0, children: [t.kind === "call" ? _jsx(Video, { size: 13, color: "var(--muted-foreground)", "aria-label": "Call" }) : null, t.kind === "group" ? _jsx(Users, { size: 13, color: "var(--muted-foreground)", "aria-label": "Group" }) : null, _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: t.title || "Untitled" })] }), _jsx(Span, { id: t.id, updatedAt: t.updatedAt })] }) }, t.id));
-                    // A stored conversation carries its menu; a call or a group is no conversation of the store's.
-                    return t.thread ? (_jsx(ThreadRow, { t: t.thread, active: t.id === thread, listed: false, children: item }, t.id)) : (item);
-                }) }, band.label))), _jsx(SharedWithYou, { filter: filter, onPick: onPick })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(ConversationMenu, { threads: byId, active: thread, children: _jsxs(YStack, { children: [mine, mine ? null : bands.map((band) => (_jsx(SidebarSection, { label: band.label, children: band.rows.map((t) => {
+                                const item = (_jsx(SidebarItem, { active: t.id === thread, ...(t.thread ? { pr: "$8", $touchable: { pr: 52 } } : null), onPress: () => {
+                                        open(t.id);
+                                        onPick?.();
+                                    }, children: _jsxs(YStack, { minW: 0, children: [_jsxs(XStack, { items: "center", gap: "$1.5", minW: 0, children: [t.kind === "call" ? _jsx(Video, { size: 13, color: "var(--muted-foreground)", "aria-label": "Call" }) : null, t.kind === "group" ? _jsx(Users, { size: 13, color: "var(--muted-foreground)", "aria-label": "Group" }) : null, _jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, children: t.title || "Untitled" })] }), _jsx(Span, { id: t.id, updatedAt: t.updatedAt })] }) }, t.id));
+                                // A stored conversation carries its menu; a call or a group is no conversation of the store's.
+                                return t.thread ? (_jsx(ThreadRow, { t: t.thread, active: t.id === thread, listed: false, children: item }, t.id)) : (item);
+                            }) }, band.label)))] }) }), _jsx(SharedWithYou, { filter: filter, onPick: onPick })] }));
 }
 /**
  * The chats other people shared with this reader, and who shared each: every

package/dist/chord.d.ts

@@ -0,0 +1,21 @@
+export type Act = 'rename' | 'pin';
+/** The part of a keydown this reads. */
+export interface Press {
+    key?: string;
+    code?: string;
+    ctrlKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    repeat?: boolean;
+    isComposing?: boolean;
+    target: EventTarget | null;
+}
+/** Whether a key pressed on `target` is typing: a field, a picker, or text that edits itself. */
+export declare function typing(target: EventTarget | null): boolean;
+/** What a keydown asks of a conversation, or null when it asks nothing of one. */
+export declare function chord(e: Press): Act | null;
+/** A chord as a menu prints it: ⌃⌥R on a Mac, Ctrl+Alt+R elsewhere. */
+export declare function said(act: Act, mac: boolean): string;
+/** A chord as `aria-keyshortcuts` says it, the same on every platform. */
+export declare const named: (act: Act) => string;

package/dist/chord.js

@@ -0,0 +1,51 @@
+// The keys that act on a conversation: Ctrl+Alt+R renames it, Ctrl+Alt+P pins
+// or unpins it — the one whose menu is open, or else the one the pane holds.
+// Never while the reader is typing or a dialog holds the keys, and once a press:
+// a held key repeats, and a held Ctrl+Alt+P would toggle the pin thirty times a
+// second. No React, so a spec reads it as it is.
+const LETTERS = { r: 'rename', p: 'pin' };
+/** Whether `target` sits inside something matching `selector`. */
+const within = (target, selector) => {
+    const el = target;
+    return Boolean(el && typeof el === 'object' && typeof el.closest === 'function' && el.closest(selector) !== null);
+};
+/** Whether a key pressed on `target` is typing: a field, a picker, or text that edits itself. */
+export function typing(target) {
+    const el = target;
+    if (!el || typeof el !== 'object')
+        return false;
+    if (el.isContentEditable)
+        return true;
+    const tag = (el.tagName ?? '').toUpperCase();
+    if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT')
+        return true;
+    return within(target, '[contenteditable=""],[contenteditable="true"],[role="textbox"]');
+}
+/**
+ * The letter a key press names: the one on the key, whatever the layout (the
+ * labelled P is where QWERTY's R is on Dvorak), or — where Option or AltGr made
+ * it another character, ⌥R being "®" on a Mac — the key's place.
+ */
+function letter(e) {
+    if (e.key && /^[a-z]$/i.test(e.key))
+        return e.key.toLowerCase();
+    const place = /^Key([A-Z])$/.exec(e.code ?? '');
+    return place ? place[1].toLowerCase() : null;
+}
+/** What a keydown asks of a conversation, or null when it asks nothing of one. */
+export function chord(e) {
+    if (!e.ctrlKey || !e.altKey || e.metaKey || e.shiftKey || e.repeat || e.isComposing)
+        return null;
+    const l = letter(e);
+    const act = l ? LETTERS[l] : undefined;
+    if (!act || typing(e.target) || within(e.target, '[role="dialog"],[role="alertdialog"]'))
+        return null;
+    return act;
+}
+/** A chord as a menu prints it: ⌃⌥R on a Mac, Ctrl+Alt+R elsewhere. */
+export function said(act, mac) {
+    const key = act === 'rename' ? 'R' : 'P';
+    return mac ? `⌃⌥${key}` : `Ctrl+Alt+${key}`;
+}
+/** A chord as `aria-keyshortcuts` says it, the same on every platform. */
+export const named = (act) => `Control+Alt+${act === 'rename' ? 'R' : 'P'}`;

package/dist/pending.d.ts

@@ -0,0 +1,41 @@
+import type { Thread } from '@hanzo/ai';
+/** What a change sets: the fields it names. */
+export type Patch = Partial<Pick<Thread, 'title' | 'pinned' | 'archived'>>;
+/** A list of conversations on the page: the moment its rows were asked for, and how to ask again. */
+export interface Reader {
+    at: number;
+    reload: () => void;
+}
+/** The next moment. A read takes one as it is asked for, an answer as it lands. */
+export declare const tick: () => number;
+/** For `useSyncExternalStore`: told whenever a change is made, settled, taken back or dropped. */
+export declare function subscribe(listener: () => void): () => void;
+/** For `useSyncExternalStore`: a number that moves whenever the changes do. */
+export declare const snapshot: () => number;
+/**
+ * Whose conversations these are: the client the lists read through. Another
+ * client is another reader or organization, and nothing asked under the last
+ * one is drawn over its rows.
+ */
+export declare function bind(next: unknown): void;
+/** A list joins the page; the returned function is its leaving. */
+export declare function enlist(reader: Reader): () => void;
+/** Every list on the page reads the store again. */
+export declare function reread(): void;
+/** Folds each settled change every list on the page has read after into the thread it was laid over. */
+export declare function sweep(): void;
+/**
+ * A list as it reads with every change it has not read yet: `threads` read at
+ * `at`, from the archived shelf or the active one. A deleted conversation
+ * leaves; one archived or brought back leaves the shelf it is no longer on and
+ * joins the other; any other change shows in place.
+ */
+export declare function view(threads: Thread[], at: number, archived: boolean): Thread[];
+/**
+ * Asks the store for one change to `t`, shown at once: `patch` the fields it
+ * sets, or null for a delete, and `send` the request, made once every earlier
+ * change to the same conversation has been answered. What the store answers
+ * for those fields is what shows. On a refusal this change alone is taken back
+ * and the refusal thrown.
+ */
+export declare function attempt(t: Thread, patch: Patch | null, send: () => Promise<Thread | void>): Promise<void>;

package/dist/pending.js

@@ -0,0 +1,181 @@
+// Changes asked of the conversation store that every list already shows.
+//
+// A pin, a rename, an archive or a delete shows at once: each list draws the
+// changes held here over what it last read (`view`). No React, so a spec reads
+// it as it is.
+//
+// ONE CONVERSATION'S CHANGES GO TO THE STORE IN ORDER. Each waits for the one
+// before it to be answered, so two toggles are never answered out of order and
+// the last one asked is the one the store keeps. A change is a PATCH of the
+// fields it names, laid over the row; a refusal takes that one change back and
+// leaves the others standing, so a refused rename does not unpin a pin still
+// in flight.
+//
+// A SETTLED CHANGE IS KEPT UNTIL EVERY LIST HAS READ AFTER IT. Dropping it the
+// moment the store answers would draw the list's older read, the row back where
+// it was, until the list read again. So every read and every answer takes a
+// moment from one clock (`tick`): a list read before a change settled still
+// shows the change, one read after shows its own read, and once every list on
+// the page has read after it the change is folded away (`sweep`).
+let clock = 0;
+/** The next moment. A read takes one as it is asked for, an answer as it lands. */
+export const tick = () => ++clock;
+const entries = new Map();
+const readers = new Set();
+const listeners = new Set();
+let version = 0;
+let owner = null;
+const publish = () => {
+    version++;
+    for (const listener of listeners)
+        listener();
+};
+/** For `useSyncExternalStore`: told whenever a change is made, settled, taken back or dropped. */
+export function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+/** For `useSyncExternalStore`: a number that moves whenever the changes do. */
+export const snapshot = () => version;
+/**
+ * Whose conversations these are: the client the lists read through. Another
+ * client is another reader or organization, and nothing asked under the last
+ * one is drawn over its rows.
+ */
+export function bind(next) {
+    if (owner !== null && owner !== next && entries.size) {
+        entries.clear();
+        publish();
+    }
+    owner = next;
+}
+/** A list joins the page; the returned function is its leaving. */
+export function enlist(reader) {
+    readers.add(reader);
+    return () => {
+        readers.delete(reader);
+        sweep();
+    };
+}
+/** Every list on the page reads the store again. */
+export function reread() {
+    for (const reader of readers)
+        reader.reload();
+}
+/** Folds each settled change every list on the page has read after into the thread it was laid over. */
+export function sweep() {
+    let moved = false;
+    for (const [id, entry] of entries) {
+        while (entry.layers.length) {
+            const layer = entry.layers[0];
+            if (!layer.settled)
+                break;
+            let read = true;
+            for (const reader of readers)
+                if (reader.at <= layer.settled)
+                    read = false;
+            if (!read)
+                break;
+            entry.layers.shift();
+            moved = true;
+            if (!layer.patch) {
+                entry.layers.length = 0;
+                break;
+            }
+            entry.seed = { ...entry.seed, ...layer.patch };
+        }
+        if (!entry.layers.length)
+            entries.delete(id);
+    }
+    if (moved)
+        publish();
+}
+/** Pinned first, then most recently spoken in: the store's own order. */
+const first = (a, b) => Number(Boolean(b.pinned)) - Number(Boolean(a.pinned)) || (b.updatedAt ?? '').localeCompare(a.updatedAt ?? '');
+/** One conversation added to a list in the store's order. */
+const place = (threads, t) => {
+    const i = threads.findIndex((one) => first(t, one) < 0);
+    return i < 0 ? [...threads, t] : [...threads.slice(0, i), t, ...threads.slice(i)];
+};
+/** A thread with changes laid over it in order; null once one of them deleted it. */
+const lay = (t, layers) => {
+    let out = t;
+    for (const layer of layers) {
+        if (!layer.patch)
+            return null;
+        out = { ...out, ...layer.patch };
+    }
+    return out;
+};
+/**
+ * A list as it reads with every change it has not read yet: `threads` read at
+ * `at`, from the archived shelf or the active one. A deleted conversation
+ * leaves; one archived or brought back leaves the shelf it is no longer on and
+ * joins the other; any other change shows in place.
+ */
+export function view(threads, at, archived) {
+    let out = threads;
+    for (const [id, entry] of entries) {
+        const unread = entry.layers.filter((layer) => !layer.settled || at < layer.settled);
+        if (!unread.length)
+            continue;
+        const i = out.findIndex((t) => t.id === id);
+        // A row this list read carries every change it read after; one it lacks is the thread before them all.
+        const want = i >= 0 ? lay(out[i], unread) : lay(entry.seed, entry.layers);
+        if (!want || Boolean(want.archived) !== archived) {
+            if (i >= 0)
+                out = out.filter((t) => t.id !== id);
+        }
+        else {
+            out = i >= 0 ? out.map((t) => (t.id === id ? want : t)) : place(out, want);
+        }
+    }
+    return out;
+}
+/**
+ * Asks the store for one change to `t`, shown at once: `patch` the fields it
+ * sets, or null for a delete, and `send` the request, made once every earlier
+ * change to the same conversation has been answered. What the store answers
+ * for those fields is what shows. On a refusal this change alone is taken back
+ * and the refusal thrown.
+ */
+export function attempt(t, patch, send) {
+    let entry = entries.get(t.id);
+    if (!entry) {
+        entry = { seed: t, layers: [], queue: Promise.resolve() };
+        entries.set(t.id, entry);
+    }
+    const held = entry;
+    const mine = { patch: patch ? { ...patch } : null, settled: 0 };
+    held.layers.push(mine);
+    publish();
+    const run = held.queue.then(async () => {
+        try {
+            const answer = await send();
+            if (answer && mine.patch) {
+                const said = answer;
+                for (const key of Object.keys(mine.patch))
+                    if (said[key] !== undefined)
+                        Object.assign(mine.patch, { [key]: said[key] });
+            }
+            mine.settled = tick();
+            publish();
+        }
+        catch (e) {
+            const i = held.layers.indexOf(mine);
+            if (i >= 0) {
+                held.layers.splice(i, 1);
+                if (!held.layers.length && entries.get(t.id) === held)
+                    entries.delete(t.id);
+                publish();
+            }
+            throw e;
+        }
+        reread();
+        sweep();
+    });
+    held.queue = run.catch(() => { });
+    return run;
+}

package/dist/stars.d.ts

@@ -14,3 +14,11 @@ export declare const titleOf: (name: string, direct?: boolean) => string;
  * between them through the four components that separate them.
  */
 export declare function useStarred(kind?: string): [Set<string>, (id: string) => void];
+/**
+ * The conversations starred in this browser before a pin was the server's
+ * (@hanzo/rooms 0.1.36 stopped reading the set), made pins once. Each is asked
+ * for as a pin through `pin`; once the store has taken any of them the stars
+ * are forgotten, and a store that takes none — one without the route yet —
+ * leaves them for a later visit. Answers whether they were carried.
+ */
+export declare function carry(pin: (id: string) => Promise<unknown>): Promise<boolean>;

package/dist/stars.js

@@ -73,3 +73,35 @@ export function useStarred(kind = 'rooms') {
     }, [kind]);
     return [starred, toggle];
 }
+/**
+ * The conversations starred in this browser before a pin was the server's
+ * (@hanzo/rooms 0.1.36 stopped reading the set), made pins once. Each is asked
+ * for as a pin through `pin`; once the store has taken any of them the stars
+ * are forgotten, and a store that takes none — one without the route yet —
+ * leaves them for a later visit. Answers whether they were carried.
+ */
+export async function carry(pin) {
+    const key = keyOf('threads');
+    let ids;
+    try {
+        ids = JSON.parse(localStorage.getItem(key) || '[]');
+    }
+    catch {
+        return false;
+    }
+    if (!Array.isArray(ids))
+        return false;
+    const named = ids.filter((id) => typeof id === 'string' && id !== '');
+    if (!named.length)
+        return false;
+    const said = await Promise.allSettled(named.map((id) => pin(id)));
+    if (!said.some((one) => one.status === 'fulfilled'))
+        return false;
+    try {
+        localStorage.removeItem(key);
+    }
+    catch {
+        // A browser that refuses storage asks again next visit; a pin asked twice is still one pin.
+    }
+    return true;
+}

package/dist/thread.d.ts

@@ -1,34 +1,56 @@
 import { type ReactElement, type ReactNode } from 'react';
 import type { Thread } from '@hanzo/ai';
-import { useThreads } from '@hanzo/ai/react';
+export interface ThreadList {
+    threads: Thread[];
+    loading: boolean;
+    error: Error | null;
+    reload: () => void;
+}
 /**
  * The member's conversations: pinned first, then most recently spoken in, the
- * archived ones left out — or, with `archived`, those alone. It reads again
- * whenever a conversation changes here, and once for `seek` when it does not
- * hold it: a conversation it has not seen is one just begun.
+ * archived ones left out — or, with `archived`, those alone — with every change
+ * in flight drawn over them. It reads again whenever a conversation changes
+ * here, and once for `seek` when it does not hold it: a conversation it has not
+ * seen is one just begun.
  */
-export declare function useThreadList(archived?: boolean, seek?: string | null): ReturnType<typeof useThreads>;
-/** What a conversation can be asked to do. Each reports a failure in a toast, in its own words. */
+export declare function useThreadList(archived?: boolean, seek?: string | null): ThreadList;
+/** What a conversation can be asked to do. Each shows at once; a refusal takes it back and says so in a toast. */
 export declare function useThreadActions(): {
     pin: (t: Thread) => Promise<boolean>;
     archive: (t: Thread) => Promise<boolean>;
     rename: (t: Thread, title: string) => Promise<boolean>;
     remove: (t: Thread) => Promise<boolean>;
 };
+/** A conversation's own address, whole: the app at `/?chat=<id>` (lib/host `talk`), wherever the rooms are drawn. */
+export declare const href: (id: string) => string;
 /**
- * One conversation's row with its menu: a right-click anywhere on it, or its ⋯.
+ * A list of conversations with their menu: a right-click on a row or a
+ * long-press opens it at the point, a row's ⋯ hangs it from itself. Its one
+ * child holds the rows (`ThreadRow`). `threads` are the list's conversations by
+ * id, `active` the one the pane holds (what the keys act on with no menu open),
+ * and `onGone` runs after that one is deleted — the room moves to a new chat —
+ * defaulting to emptying the room.
+ */
+export declare function ConversationMenu({ threads, active, onGone, children, }: {
+    threads: Map<string, Thread>;
+    active?: string | null;
+    onGone?: () => void;
+    children: ReactElement;
+}): import("react").JSX.Element;
+/**
+ * One conversation's row, inside a `ConversationMenu`: its menu opens by a
+ * right-click anywhere on it, a long-press, or its ⋯; a middle-click or a
+ * ⌘/Ctrl-click opens it in a new tab.
  *
  * The ⋯ stands where `aside` (the row's age) stands, and takes its place while
- * the row is hovered, focused, open in the pane or has its menu open; the rest
- * of the time the age reads there. `onGone` runs after the conversation the
- * pane holds is deleted — the column moves to a new chat — and defaults to
- * emptying the room.
+ * the row is hovered, focused, open in the pane or has its menu open, and
+ * always on a touch screen, which has no hover to find it by; the rest of the
+ * time the age reads there.
  */
-export declare function ThreadRow({ t, active, aside, onGone, listed, children, }: {
+export declare function ThreadRow({ t, active, aside, listed, children, }: {
     t: Thread;
     active?: boolean;
     aside?: ReactNode;
-    onGone?: () => void;
     /** A row of a list (`role="listitem"`); false where it stands among other rows. */
     listed?: boolean;
     children: ReactElement;

package/dist/thread.js

@@ -1,42 +1,80 @@
 'use client';
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// A conversation's own actions — pin, rename, archive, delete — kept where the
-// conversation is: PATCH and DELETE /v1/agent/chat/conversations/{id}
-// (hanzoai/agent v1.0.12), the member's own only. One menu, two ways in: a
-// right-click on the row opens it at the cursor (gui's ContextMenu), and the
-// row's ⋯ hangs it from itself (gui's DropdownMenu), which a keyboard reaches.
-// One list of items feeds both. Not @hanzo/ui/product/menu's ContextMenu: it
-// portals its panel under gui's `pointer-events: none` host, so it drew and took
-// no click (measured: every ancestor of its panel reads `none`).
+// A conversation's own actions, kept where the conversation is: PATCH and DELETE
+// /v1/agents/chat/conversations/{id} (hanzoai/agent v1.0.12), the member's own
+// only — and the ones that need nothing of the store: its link, a new tab, the
+// Share panel.
 //
-// EVERY LIST ON THE PAGE READS AGAIN WHEN ONE CONVERSATION CHANGES, so the
-// column's Recents, the rooms' shell and the conversation's own header agree
-// without a second copy of anyone's pins. A pin is the server's, never this
-// browser's: it follows the person to every device they sign in on.
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useAi, useThreads } from '@hanzo/ai/react';
-import { Archive, ArchiveRestore, MoreHorizontal, Pencil, Pin, PinOff, Trash2 } from 'lucide-react';
-import { Button, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, Dialog, DialogContent, DialogTitle, DropdownMenu, Input, SizableText, XStack, YStack, toast, } from '@hanzo/ui';
-import { empty, useOpen } from './open.js';
+// ONE MENU A LIST. `ConversationMenu` wraps a list of rows and mounts, once for
+// all of them, gui's ContextMenu (a right-click at the cursor, a long-press on
+// touch), gui's Menu hung from whichever row's ⋯ was pressed (a gui Menu takes
+// many triggers and anchors to the one pressed), and the Rename, Delete and
+// Share dialogs. A row (`ThreadRow`) is its markup and a trigger. The column's
+// Recents and the shell's /chat list both wrap theirs in it. Not
+// @hanzo/ui/product/menu's ContextMenu: it portals its panel under gui's
+// `pointer-events: none` host, so it drew and took no click (measured: every
+// ancestor of its panel reads `none`).
+//
+// A CHANGE SHOWS AT ONCE, everywhere, and is taken back with a toast if the
+// store refuses it (pending.ts): every list on the page draws the changes in
+// flight over what it last read, and reads the store again once it answers.
+// A pin is the server's, never this browser's: it follows the person to every
+// device they sign in on.
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState, useSyncExternalStore, } from 'react';
+import { useAi } from '@hanzo/ai/react';
+import { Archive, ArchiveRestore, ExternalLink, Link2, MoreHorizontal, Pencil, Pin, PinOff, Share2, Trash2 } from 'lucide-react';
+import { Button, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, Dialog, DialogContent, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, Input, SizableText, Text, XStack, YStack, toast, } from '@hanzo/ui';
+import { empty } from './open.js';
 import { say } from './lib/org.js';
-const lists = new Set();
-/** Every list of conversations on the page reads again. */
-const changed = () => lists.forEach((reload) => reload());
+import { talk } from './lib/host.js';
+import { BAD } from './lib/mix.js';
+import { site } from './where.js';
+import { attempt, bind, enlist, reread, snapshot, subscribe, sweep, tick, view } from './pending.js';
+import { chord, named, said } from './chord.js';
+import { carry } from './stars.js';
+import { ShareDialog } from './Share.js';
 /**
  * The member's conversations: pinned first, then most recently spoken in, the
- * archived ones left out — or, with `archived`, those alone. It reads again
- * whenever a conversation changes here, and once for `seek` when it does not
- * hold it: a conversation it has not seen is one just begun.
+ * archived ones left out — or, with `archived`, those alone — with every change
+ * in flight drawn over them. It reads again whenever a conversation changes
+ * here, and once for `seek` when it does not hold it: a conversation it has not
+ * seen is one just begun.
  */
 export function useThreadList(archived = false, seek = null) {
-    const store = useThreads({ archived });
-    const { reload, loading, threads } = store;
+    const ai = useAi();
+    // What was read, when, and from which shelf: the other shelf's rows are never drawn as this one's.
+    const [read, setRead] = useState({ threads: [], at: 0, archived });
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [asks, ask] = useState(0);
+    const reload = useCallback(() => ask((n) => n + 1), []);
+    const me = useRef({ at: 0, reload });
+    useEffect(() => enlist(me.current), []);
+    useEffect(() => bind(ai), [ai]);
     useEffect(() => {
-        lists.add(reload);
-        return () => {
-            lists.delete(reload);
-        };
-    }, [reload]);
+        const control = new AbortController();
+        const at = tick();
+        setLoading(true);
+        ai.threads.list({ archived, signal: control.signal }).then((threads) => {
+            if (control.signal.aborted)
+                return;
+            me.current.at = at;
+            setRead({ threads, at, archived });
+            setError(null);
+            setLoading(false);
+            sweep();
+            // A read that answers is a client the store takes: the browser's old stars can become pins.
+            stars(ai);
+        }, (e) => {
+            if (control.signal.aborted)
+                return;
+            setError(e instanceof Error ? e : new Error(String(e)));
+            setLoading(false);
+        });
+        return () => control.abort();
+    }, [ai, archived, asks]);
+    const changes = useSyncExternalStore(subscribe, snapshot, snapshot);
+    const threads = useMemo(() => (read.archived === archived ? view(read.threads, read.at, archived) : view([], 0, archived)), [read, archived, changes]);
     const asked = useRef(new Set());
     useEffect(() => {
         if (archived || !seek || loading || asked.current.has(seek) || threads.some((t) => t.id === seek))
@@ -44,104 +82,327 @@ export function useThreadList(archived = false, seek = null) {
         asked.current.add(seek);
         reload();
     }, [archived, seek, loading, threads, reload]);
-    return store;
+    return { threads, loading, error, reload };
+}
+/** How long a change waits for the store before it is taken back. */
+const WAIT = 15_000;
+/** A refusal in the store's words, or that the store did not answer at all. */
+const refused = (e) => e instanceof DOMException && e.name === 'TimeoutError' ? 'The conversation store did not answer. Try again.' : say(e);
+let carried = false;
+/** The browser's stars from before pins were the server's, made pins once a page (stars.ts `carry`). */
+function stars(ai) {
+    if (carried)
+        return;
+    carried = true;
+    void carry((id) => ai.threads.update(id, { pinned: true }, { signal: AbortSignal.timeout(WAIT) })).then((done) => {
+        if (done)
+            reread();
+    });
 }
-/** What a conversation can be asked to do. Each reports a failure in a toast, in its own words. */
+/** What a conversation can be asked to do. Each shows at once; a refusal takes it back and says so in a toast. */
 export function useThreadActions() {
     const ai = useAi();
-    const run = useCallback(async (work) => {
-        try {
-            await work();
-            changed();
-            return true;
-        }
-        catch (e) {
-            toast.error(say(e));
-            return false;
-        }
+    return useMemo(() => {
+        const run = async (t, change, send) => {
+            try {
+                // The clock starts when the change is asked, after the ones before it are answered.
+                await attempt(t, change, () => send(AbortSignal.timeout(WAIT)));
+                return true;
+            }
+            catch (e) {
+                toast.error(refused(e));
+                return false;
+            }
+        };
+        const change = (t, to) => run(t, to, (signal) => ai.threads.update(t.id, to, { signal }));
+        return {
+            pin: (t) => change(t, { pinned: !t.pinned }),
+            archive: (t) => change(t, { archived: !t.archived }),
+            rename: (t, title) => change(t, { title }),
+            remove: (t) => run(t, null, (signal) => ai.threads.remove(t.id, { signal })),
+        };
+    }, [ai]);
+}
+const titleOf = (t) => t.title || 'Untitled';
+/** A conversation's own address, whole: the app at `/?chat=<id>` (lib/host `talk`), wherever the rooms are drawn. */
+export const href = (id) => new URL(site(talk(id)), window.location.href).href;
+/** Opens a conversation in a tab of its own. */
+const away = (id) => {
+    window.open(href(id), '_blank', 'noopener');
+};
+/** Puts a conversation's address on the clipboard. */
+async function copy(id) {
+    try {
+        await navigator.clipboard.writeText(href(id));
+        toast.success('Link copied');
+    }
+    catch {
+        toast.error('The browser would not copy the link.');
+    }
+}
+/** The one colour in the menu: Delete's — design's destructive mixed toward the theme's ink, 4.5:1 on either theme's panel. */
+const DANGER = BAD;
+const mac = () => typeof navigator !== 'undefined' && /Mac|iPhone|iPad|iPod/.test(navigator.platform || navigator.userAgent);
+const Rows = createContext(null);
+const keyed = new Set();
+/**
+ * A keydown anywhere on the page, before anything inside it handles it (an
+ * open menu takes its keys): the list whose menu is open, or else the first
+ * that holds the open conversation, acts.
+ */
+function hear(e) {
+    const act = chord(e);
+    if (!act)
+        return;
+    const all = [...keyed].map((one) => one.current).filter((one) => one !== null);
+    if (all.some((one) => one.held))
+        return;
+    const list = all.find((one) => one.open) ?? all.find((one) => one.target() !== null);
+    const t = list?.target();
+    if (!list || !t)
+        return;
+    e.preventDefault();
+    list.act(act, t);
+}
+function listen(keys) {
+    if (!keyed.size)
+        window.addEventListener('keydown', hear, true);
+    keyed.add(keys);
+    return () => {
+        keyed.delete(keys);
+        if (!keyed.size)
+            window.removeEventListener('keydown', hear, true);
+    };
+}
+/** The element of a row that takes focus: the row itself, a button. */
+const own = (row) => row?.querySelector('[data-slot="sidebar-item"], [role="button"]') ?? null;
+/**
+ * A list of conversations with their menu: a right-click on a row or a
+ * long-press opens it at the point, a row's ⋯ hangs it from itself. Its one
+ * child holds the rows (`ThreadRow`). `threads` are the list's conversations by
+ * id, `active` the one the pane holds (what the keys act on with no menu open),
+ * and `onGone` runs after that one is deleted — the room moves to a new chat —
+ * defaulting to emptying the room.
+ */
+export function ConversationMenu({ threads, active = null, onGone = empty, children, }) {
+    const act = useThreadActions();
+    // The conversation the pane holds NOW: a delete answered after the reader moved on leaves the room they moved to.
+    const holds = useRef(active);
+    holds.current = active;
+    // The list's own element, for the row after one deleted.
+    const list = useId();
+    const [menu, setMenu] = useState(null);
+    const [dialogue, setDialogue] = useState(null);
+    // The conversation the menu or a dialog acts on, by id, read from the list so
+    // it is current; the last one read stands in once the list lets it go (a
+    // closing Delete dialog still names it).
+    const [aimed, setAimed] = useState(null);
+    const last = useRef(null);
+    const listed = aimed ? (threads.get(aimed) ?? null) : null;
+    if (listed)
+        last.current = listed;
+    const subject = aimed ? (listed ?? (last.current?.id === aimed ? last.current : null)) : null;
+    // Where focus goes back to: the ⋯ pressed, or the row right-clicked.
+    const from = useRef(null);
+    // What a right-click or a long-press landed on, before the menu decides to open.
+    const pointed = useRef(null);
+    const ask = useCallback((d, t) => {
+        setAimed(t.id);
+        setMenu(null);
+        setDialogue(d);
     }, []);
-    return {
-        pin: (t) => run(() => ai.threads.update(t.id, { pinned: !t.pinned })),
-        archive: (t) => run(() => ai.threads.update(t.id, { archived: !t.archived })),
-        rename: (t, title) => run(() => ai.threads.update(t.id, { title })),
-        remove: (t) => run(() => ai.threads.remove(t.id)),
+    const aim = useCallback((t, el) => {
+        from.current = el;
+        setAimed(t.id);
+    }, []);
+    const point = (e) => {
+        const row = e.target?.closest?.('[data-thread]') ?? null;
+        pointed.current = row ? (threads.get(row.getAttribute('data-thread') ?? '') ?? null) : null;
+        if (pointed.current)
+            from.current = own(row);
+    };
+    // A menu shut by Escape, a choice or a press outside gives focus back where it
+    // was opened from — unless what was chosen opened a dialog, which takes it.
+    const back = (e) => {
+        e.preventDefault();
+        requestAnimationFrame(() => {
+            const now = document.activeElement;
+            if (!now || now === document.body)
+                from.current?.focus();
+        });
+    };
+    const shut = (open) => {
+        if (!open)
+            setDialogue(null);
+    };
+    const after = (e) => {
+        e.preventDefault();
+        if (from.current?.isConnected)
+            from.current.focus();
+    };
+    const keys = useRef(null);
+    keys.current = {
+        open: menu !== null,
+        held: dialogue !== null,
+        target: () => (menu !== null ? subject : active ? (threads.get(active) ?? null) : null),
+        act: (a, t) => {
+            // With no menu open, focus goes back to wherever the keys were pressed.
+            if (menu === null && document.activeElement instanceof HTMLElement)
+                from.current = document.activeElement;
+            if (a === 'rename')
+                return ask('rename', t);
+            setMenu(null);
+            void act.pin(t);
+        },
     };
+    useEffect(() => listen(keys), []);
+    const rows = useMemo(() => ({ aim, open: menu ? aimed : null }), [aim, menu, aimed]);
+    // The menu is named by its conversation: gui would name it by its trigger, the
+    // list itself for a right-click, and the ⋯ for the other.
+    const title = subject ? titleOf(subject) : undefined;
+    const apple = mac();
+    const entries = subject
+        ? [
+            {
+                key: 'rename',
+                label: 'Rename',
+                icon: _jsx(Pencil, { size: 16, "aria-hidden": true }),
+                shortcut: said('rename', apple),
+                keys: named('rename'),
+                run: () => ask('rename', subject),
+            },
+            {
+                key: 'pin',
+                label: subject.pinned ? 'Unpin' : 'Pin',
+                icon: subject.pinned ? _jsx(PinOff, { size: 16, "aria-hidden": true }) : _jsx(Pin, { size: 16, "aria-hidden": true }),
+                shortcut: said('pin', apple),
+                keys: named('pin'),
+                run: () => void act.pin(subject),
+            },
+            { key: 'share', label: 'Share…', icon: _jsx(Share2, { size: 16, "aria-hidden": true }), run: () => ask('share', subject) },
+            { key: 'copy', label: 'Copy link', icon: _jsx(Link2, { size: 16, "aria-hidden": true }), run: () => void copy(subject.id) },
+            { key: 'tab', label: 'Open in new tab', icon: _jsx(ExternalLink, { size: 16, "aria-hidden": true }), run: () => away(subject.id) },
+            {
+                key: 'archive',
+                label: subject.archived ? 'Unarchive' : 'Archive',
+                icon: subject.archived ? _jsx(ArchiveRestore, { size: 16, "aria-hidden": true }) : _jsx(Archive, { size: 16, "aria-hidden": true }),
+                run: () => void act.archive(subject),
+            },
+            { key: 'gone', line: true },
+            { key: 'delete', label: 'Delete', icon: _jsx(Trash2, { size: 16, color: DANGER, "aria-hidden": true }), destructive: true, run: () => ask('delete', subject) },
+        ]
+        : [];
+    return (_jsxs(Rows.Provider, { value: rows, children: [_jsxs(DropdownMenu, { open: menu === 'dots', onOpenChange: (open) => setMenu(open ? 'dots' : null), children: [_jsxs(ContextMenu
+                    // Held here as well as inside gui's ContextMenu, so the keys can shut it.
+                    , { 
+                        // Held here as well as inside gui's ContextMenu, so the keys can shut it.
+                        open: menu === 'point', onOpenChange: (open, e) => {
+                            if (!open)
+                                return setMenu((m) => (m === 'point' ? null : m));
+                            // Not on a conversation: the browser's own menu answers.
+                            if (!pointed.current)
+                                return e?.preventDefault();
+                            setAimed(pointed.current.id);
+                            setMenu('point');
+                        }, children: [_jsx(ContextMenuTrigger, { asChild: true, "data-menu": list, onContextMenu: point, onPointerDown: (e) => {
+                                    if (e.pointerType !== 'mouse')
+                                        point(e);
+                                }, children: children }), _jsx(ContextMenuContent, { minW: 220, onCloseAutoFocus: back, "aria-labelledby": undefined, "aria-label": title, children: entries.map((one) => 'line' in one ? (_jsx(ContextMenuSeparator, {}, one.key)) : (_jsx(ContextMenuItem, { variant: one.destructive ? 'destructive' : 'default', "aria-keyshortcuts": one.keys, onSelect: one.run, children: _jsx(Face, { entry: one, Shortcut: ContextMenuShortcut }) }, one.key))) })] }), _jsx(DropdownMenuContent, { align: "end", minW: 220, onCloseAutoFocus: back, "aria-labelledby": undefined, "aria-label": title, children: entries.map((one) => 'line' in one ? (_jsx(DropdownMenuSeparator, {}, one.key)) : (_jsx(DropdownMenuItem, { variant: one.destructive ? 'destructive' : 'default', "aria-keyshortcuts": one.keys, onSelect: one.run, children: _jsx(Face, { entry: one, Shortcut: DropdownMenuShortcut }) }, one.key))) })] }), _jsx(Rename, { t: subject, open: dialogue === 'rename', onOpenChange: shut, onCloseAutoFocus: after, save: (t, words) => {
+                    if (words !== titleOf(t))
+                        void act.rename(t, words);
+                } }), _jsx(Delete, { t: subject, open: dialogue === 'delete', onOpenChange: shut, onCloseAutoFocus: after, remove: (t) => {
+                    // Focus goes on to the row after it, or the one before, not to the page.
+                    const rows = [...(document.querySelector(`[data-menu="${list}"]`)?.querySelectorAll('[data-thread]') ?? [])];
+                    const at = rows.findIndex((row) => row.getAttribute('data-thread') === t.id);
+                    if (at >= 0)
+                        from.current = own(rows[at + 1] ?? rows[at - 1] ?? null);
+                    void act.remove(t).then((ok) => {
+                        if (ok && holds.current === t.id)
+                            onGone();
+                    });
+                } }), _jsx(ShareDialog, { thread: subject?.id ?? null, open: dialogue === 'share', onOpenChange: shut, onCloseAutoFocus: after })] }));
+}
+/** One entry's line: its icon in a 16px well, its name, and its keys at the end. */
+function Face({ entry, Shortcut, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(XStack, { width: 16, height: 16, items: "center", justify: "center", shrink: 0, children: entry.icon }), _jsx(Text, { flex: 1, minW: 0, fontSize: "$2", color: entry.destructive ? DANGER : '$ink', numberOfLines: 1, children: entry.label }), entry.shortcut ? _jsx(Shortcut, { "aria-hidden": true, children: entry.shortcut }) : null] }));
 }
-const titleOf = (t) => t.title || 'Untitled';
 /**
- * One conversation's row with its menu: a right-click anywhere on it, or its ⋯.
+ * One conversation's row, inside a `ConversationMenu`: its menu opens by a
+ * right-click anywhere on it, a long-press, or its ⋯; a middle-click or a
+ * ⌘/Ctrl-click opens it in a new tab.
  *
  * The ⋯ stands where `aside` (the row's age) stands, and takes its place while
- * the row is hovered, focused, open in the pane or has its menu open; the rest
- * of the time the age reads there. `onGone` runs after the conversation the
- * pane holds is deleted — the column moves to a new chat — and defaults to
- * emptying the room.
+ * the row is hovered, focused, open in the pane or has its menu open, and
+ * always on a touch screen, which has no hover to find it by; the rest of the
+ * time the age reads there.
  */
-export function ThreadRow({ t, active = false, aside, onGone = empty, listed = true, children, }) {
-    const act = useThreadActions();
-    const { thread } = useOpen();
-    const [menu, setMenu] = useState(false);
+export function ThreadRow({ t, active = false, aside, listed = true, children, }) {
+    const menus = useContext(Rows);
+    if (!menus)
+        throw new Error('ThreadRow is drawn inside a ConversationMenu, which holds its menu.');
     const [focused, setFocused] = useState(false);
-    const [renaming, setRenaming] = useState(false);
-    const [deleting, setDeleting] = useState(false);
-    const items = [
-        {
-            key: 'pin',
-            label: t.pinned ? 'Unpin' : 'Pin',
-            icon: t.pinned ? _jsx(PinOff, { size: 16, "aria-hidden": true }) : _jsx(Pin, { size: 16, "aria-hidden": true }),
-            onSelect: () => void act.pin(t),
-        },
-        { key: 'rename', label: 'Rename', icon: _jsx(Pencil, { size: 16, "aria-hidden": true }), onSelect: () => setRenaming(true) },
-        {
-            key: 'archive',
-            label: t.archived ? 'Unarchive' : 'Archive',
-            icon: t.archived ? _jsx(ArchiveRestore, { size: 16, "aria-hidden": true }) : _jsx(Archive, { size: 16, "aria-hidden": true }),
-            onSelect: () => void act.archive(t),
-        },
-        { type: 'separator', key: 'gone' },
-        { key: 'delete', label: 'Delete', icon: _jsx(Trash2, { size: 16, "aria-hidden": true }), destructive: true, onSelect: () => setDeleting(true) },
-    ];
+    // Its own id: gui gives every trigger of one menu the menu's one id.
+    const id = useId();
+    // What the ⋯ is for, said after its name: the row's title.
+    const about = useId();
     // The ⋯ and the age share one place: whichever shows, the other gives way.
-    const shown = active || menu || focused;
-    return (_jsxs(_Fragment, { children: [_jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { asChild: true, children: _jsxs(YStack, { ...(listed ? { role: 'listitem' } : null), position: "relative", group: true, "data-thread": t.id, "data-pinned": t.pinned ? '' : undefined, children: [children, aside ? (_jsx(XStack, { position: "absolute", r: "$2", t: 0, b: 0, items: "center", pointerEvents: "none", opacity: shown ? 0 : 1, "$group-hover": { opacity: 0 }, children: aside })) : null, _jsx(XStack, { position: "absolute", r: "$1", t: 0, b: 0, items: "center", children: _jsx(DropdownMenu, { open: menu, onOpenChange: setMenu, minWidth: 180, items: items, trigger: _jsx(XStack, { render: "button", "aria-label": "Chat options", "aria-haspopup": "menu", "data-slot": "thread-options", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", bg: "transparent", opacity: shown ? 1 : 0, "$group-hover": { opacity: 1 }, hoverStyle: { bg: '$hover' }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: _jsx(MoreHorizontal, { size: 15, "aria-hidden": true }) }) }) })] }) }), _jsx(ContextMenuContent, { children: items.map((one, i) => one.type === 'separator' ? (_jsx(ContextMenuSeparator, {}, one.key ?? i)) : one.type === 'label' ? null : (_jsxs(ContextMenuItem, { variant: one.destructive ? 'destructive' : 'default', onSelect: one.onSelect, children: [one.icon, one.label] }, one.key))) })] }), _jsx(Rename, { t: t, open: renaming, onOpenChange: setRenaming, save: (words) => act.rename(t, words) }), _jsx(Delete, { t: t, open: deleting, onOpenChange: setDeleting, remove: async () => {
-                    const ok = await act.remove(t);
-                    if (ok && thread === t.id)
-                        onGone();
-                    return ok;
-                } })] }));
+    const shown = active || menus.open === t.id || focused;
+    // gui types these handlers by React Native's event; on the web they carry the DOM's.
+    const aim = (e) => menus.aim(t, e.currentTarget);
+    // A new tab for the row itself, never for its ⋯.
+    const onDots = (target) => Boolean(target?.closest?.('[data-slot="thread-options"]'));
+    return (_jsxs(YStack, { ...(listed ? { role: 'listitem' } : null), position: "relative", group: true, "data-thread": t.id, "data-pinned": t.pinned ? '' : undefined, onClickCapture: (press) => {
+            const e = press;
+            if (!(e.metaKey || e.ctrlKey) || onDots(e.target))
+                return;
+            e.preventDefault();
+            e.stopPropagation();
+            away(t.id);
+        }, onMouseDown: (e) => {
+            // The middle button's own autoscroll would start here.
+            if (e.button === 1)
+                e.preventDefault();
+        }, onMouseUp: (e) => {
+            if (e.button !== 1 || onDots(e.target))
+                return;
+            e.preventDefault();
+            away(t.id);
+        }, children: [children, _jsx(Text, { id: about, display: "none", children: titleOf(t) }), aside ? (_jsx(XStack, { position: "absolute", r: "$2", t: 0, b: 0, items: "center", pointerEvents: "none", opacity: shown ? 0 : 1, "$group-hover": { opacity: 0 }, $touchable: { opacity: 0 }, children: aside })) : null, _jsx(XStack, { position: "absolute", r: "$1", t: 0, b: 0, items: "center", children: _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "aria-label": "Chat options", "aria-describedby": about, id: id, "data-slot": "thread-options", width: 26, height: 26, rounded: "$2", items: "center", justify: "center", cursor: "pointer", bg: "transparent", opacity: shown ? 1 : 0, "$group-hover": { opacity: 1 }, 
+                        // A thumb's 44px on a touch screen (lib/tap.ts), centred on the row and over its edges.
+                        $touchable: { opacity: 1, minW: 44, minH: 44 }, hoverStyle: { bg: '$hover' }, 
+                        // Before gui's own press handler, which opens the menu and stops there.
+                        onPointerDownCapture: aim, onKeyDownCapture: aim, onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: _jsx(MoreHorizontal, { size: 15, "aria-hidden": true }) }) }) })] }));
 }
 /** A conversation's title, written again: one line, never empty. */
-function Rename({ t, open, onOpenChange, save, }) {
-    const [words, setWords] = useState(titleOf(t));
-    const [busy, setBusy] = useState(false);
+function Rename({ t, open, onOpenChange, onCloseAutoFocus, save, }) {
+    const [words, setWords] = useState('');
+    // The title as it stood when the dialog opened; a list read again meanwhile does not overwrite the typing.
+    const id = t?.id;
     useEffect(() => {
-        if (open)
+        if (open && t)
             setWords(titleOf(t));
-    }, [open, t]);
-    const submit = async () => {
+    }, [open, id]);
+    const submit = () => {
         const title = words.trim();
-        if (!title || busy)
+        // Once: a second Enter while the dialog closes asks nothing.
+        if (!open || !title || !t)
             return;
-        setBusy(true);
-        if (await save(title))
-            onOpenChange(false);
-        setBusy(false);
+        onOpenChange(false);
+        save(t, title);
     };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: "Rename chat" }), _jsx(Input, { autoFocus: true, value: words, onChangeText: setWords, "aria-label": "Chat title", maxLength: 80, onKeyDown: (e) => {
-                        if (e.key === 'Enter')
-                            void submit();
-                    } }), _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 || !words.trim(), onPress: () => void submit(), children: busy ? 'Saving…' : 'Save' })] })] }) }));
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", onCloseAutoFocus: onCloseAutoFocus, children: [_jsx(DialogTitle, { children: "Rename chat" }), _jsx(Input, { autoFocus: true, value: words, onChangeText: setWords, "aria-label": "Chat title", maxLength: 80, onKeyDown: (e) => {
+                        // An Enter that ends an IME composition writes the word; it does not save.
+                        if (e.key === 'Enter' && !e.nativeEvent?.isComposing && e.keyCode !== 229)
+                            submit();
+                    } }), _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: !words.trim(), onPress: submit, children: "Save" })] })] }) }));
 }
 /** Deleting asks first, and says what goes with it: every turn, and every link it was shared by. */
-function Delete({ t, open, onOpenChange, remove, }) {
-    const [busy, setBusy] = useState(false);
-    const submit = async () => {
-        if (busy)
-            return;
-        setBusy(true);
-        if (await remove())
-            onOpenChange(false);
-        setBusy(false);
-    };
-    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", children: [_jsx(DialogTitle, { children: "Delete chat?" }), _jsx(SizableText, { size: "$2", color: "$soft", children: `“${titleOf(t)}” is deleted for good, with every link it was shared by. To keep it out of the list instead, archive it.` }), _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", variant: "destructive", rounded: 999, disabled: busy, onPress: () => void submit(), children: busy ? 'Deleting…' : 'Delete' })] })] }) }));
+function Delete({ t, open, onOpenChange, onCloseAutoFocus, remove, }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { maxW: 440, rounded: "$6", gap: "$3", onCloseAutoFocus: onCloseAutoFocus, children: [_jsx(DialogTitle, { children: "Delete chat?" }), _jsx(SizableText, { size: "$2", color: "$soft", children: `“${t ? titleOf(t) : ''}” is deleted for good, with every link it was shared by. To keep it out of the list instead, archive it.` }), _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", variant: "destructive", rounded: 999, disabled: !t, onPress: () => {
+                                // Once: a second press while the dialog closes would ask the store to delete it again.
+                                if (!open || !t)
+                                    return;
+                                onOpenChange(false);
+                                remove(t);
+                            }, children: "Delete" })] })] }) }));
 }

package/dist/waiting.d.ts

@@ -7,7 +7,8 @@
  * a layout that already supplies a header and a footer — so a page carrying one
  * line of text scrolled, and the line sat below the middle of it.
  *
- * It takes the space a short message needs and leaves the rest to the layout.
+ * It fills the viewport below the bar (`--header`, which the bar publishes) and
+ * centres one spinner and one line in it, the same on every route that waits.
  */
 export declare function Waiting({ title, lede }: {
     title: string;

package/dist/waiting.js

@@ -10,8 +10,9 @@ import { Spinner, Text, YStack } from '@hanzo/gui';
  * a layout that already supplies a header and a footer — so a page carrying one
  * line of text scrolled, and the line sat below the middle of it.
  *
- * It takes the space a short message needs and leaves the rest to the layout.
+ * It fills the viewport below the bar (`--header`, which the bar publishes) and
+ * centres one spinner and one line in it, the same on every route that waits.
  */
 export function Waiting({ title, lede }) {
-    return (_jsxs(YStack, { items: "center", justify: "center", gap: "$5", minH: 360, px: "$4", py: "$10", children: [_jsx(Spinner, { size: "small", color: "$ink", width: 28, height: 28, shrink: 0 }), _jsx(Text, { render: "h1", fontSize: "$7", fontWeight: "500", color: "$ink", text: "center", children: title }), lede ? (_jsx(Text, { fontSize: "$4", color: "$soft", text: "center", children: lede })) : null] }));
+    return (_jsxs(YStack, { items: "center", justify: "center", gap: "$5", minH: "calc(100dvh - var(--header, 64px))", px: "$4", py: "$6", children: [_jsx(Spinner, { size: "large", color: "$ink", width: 44, height: 44, shrink: 0 }), _jsx(Text, { render: "h1", fontSize: "$7", fontWeight: "500", color: "$ink", text: "center", children: title }), lede ? (_jsx(Text, { fontSize: "$4", color: "$soft", text: "center", children: lede })) : null] }));
 }

package/package.json

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