@hanzo/rooms 0.1.0

package/dist/Column.d.ts

@@ -0,0 +1,15 @@
+import { type Host } from '@hanzo/build';
+import type { Mode } from './recent.js';
+export declare function Column({ host, mode, thread, onChat, onDev, go, drawer, }: {
+    host: Host;
+    mode: Mode;
+    /** The Chat conversation the pane holds, or null. */
+    thread: string | null;
+    /** The switch: 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;
+    /** Drawn in the phone's drawer: no collapse, no edge, always open. */
+    drawer?: boolean;
+}): import("react").JSX.Element;

package/dist/Column.js

@@ -0,0 +1,88 @@
+'use client';
+import { 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
+// Slack card and the account (components/workspace/Me.tsx).
+//
+// 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.
+import { Text, XStack, YStack } from '@hanzo/gui';
+import { ChevronDown, ChevronUp, PanelLeft, Plus, Search } from 'lucide-react';
+import { Grip, nav, path, route, Slack } from '@hanzo/build';
+import { Sidebar, SidebarIconButton, SidebarItem } from '@hanzo/ui/chat';
+import { HanzoMark } from '@hanzogui/shell';
+import { useState } from 'react';
+import { ModeMark } from './ModeMark.js';
+import { useKept } from './kept.js';
+import { Made, Me } from './Me.js';
+import { Recents } from './Recents.js';
+import { Setup } from './Setup.js';
+import { empty } from './open.js';
+import { useSpan } from './span.js';
+import { pane } from './ground.js';
+import { pick } from './lib/session.js';
+import { app, talk } from './lib/host.js';
+/** The grip stands in the gutter between the column and the pane. 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
+ *  @hanzo/ui's to widen. */
+const FILL = { width: '100%' };
+/** The column's width, px: its default, and the two a drag holds it between. */
+const WIDTH = 272;
+const FLOOR = 220;
+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. */
+const keys = (press) => ({
+    onKeyDown: (e) => {
+        if (e.key !== 'Enter' && e.key !== ' ')
+            return;
+        e.preventDefault?.();
+        press();
+    },
+});
+/** A row of the column: a pill, lit where the reader is. */
+const ROW = { rounded: '$4', minH: 34 };
+export function Column({ host, mode, thread, onChat, onDev, go, drawer = false, }) {
+    const [kept, setCollapsed] = useKept('hanzo.build.rail', false);
+    const collapsed = kept && !drawer;
+    const [slack, setSlack] = useKept('hanzo.build.slack', false);
+    const [unfolded, setUnfolded] = useState(false);
+    const [words, setWords] = useState('');
+    const span = useSpan(SPAN, WIDTH, FLOOR, CEIL);
+    const dev = (p) => host.go(p);
+    const r = route(host.path);
+    const fresh = mode === 'chat' ? !thread : r.kind === 'new';
+    const { links, more } = nav(host, dev);
+    const open = (row) => (row.kind === 'chat' ? go(talk(row.id)) : dev(row.id));
+    const create = () => {
+        if (mode === 'dev')
+            return dev('');
+        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());
+    };
+    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": "Hanzo", ...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 }), _jsx(SidebarIconButton, { label: mode === 'chat' ? 'New chat' : 'New run', onPress: create, width: 36, height: 36, rounded: 999, children: _jsx(Plus, { size: 16 }) }), _jsx(YStack, { flex: 1 }), _jsx(Me, { host: host, narrow: true, onOrg: org })] }) }));
+    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": "Hanzo", ...pane(), ...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) => {
+                                        if (e.key === 'Escape')
+                                            setWords('');
+                                    }, placeholder: "Filter", "aria-label": "Filter recents" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2" })] }), _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: fresh, icon: _jsx(Plus, { size: 16, "aria-hidden": true }), onPress: create, ...keys(create), children: mode === 'chat' ? 'New chat' : 'New run' }) }), mode === 'dev'
+                                ? links.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id)))
+                                : null, mode === 'dev' ? (_jsxs(YStack, { role: "listitem", children: [_jsx(SidebarItem, { ...ROW, "aria-expanded": unfolded, icon: unfolded ? _jsx(ChevronUp, { size: 16, "aria-hidden": true }) : _jsx(ChevronDown, { size: 16, "aria-hidden": true }), onPress: () => setUnfolded((v) => !v), ...keys(() => setUnfolded((v) => !v)), children: "More" }), unfolded ? (_jsx(YStack, { role: "list", gap: 2, children: more.map((link) => (_jsx(YStack, { role: "listitem", children: _jsx(SidebarItem, { ...ROW, active: link.active, icon: link.icon, onPress: link.onPress, ...keys(() => link.onPress?.()), children: link.label }) }, link.id))) })) : null] })) : null] }), _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 }), _jsxs(YStack, { gap: "$2", pt: "$2", shrink: 0, children: [_jsx(Made, {}), _jsx(Setup, {}), host.person && !slack ? (_jsx(YStack, { "data-slot": "app-slack", children: _jsx(Slack, { onOpen: () => dev(path({ kind: 'settings', section: 'integrations' })), onDismiss: () => setSlack(true) }) })) : null] }), _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.
+                r: GUTTER_END, width: "var(--pane-gap)" }))] }));
+}

package/dist/Contacts.d.ts

@@ -0,0 +1 @@
+export declare function Contacts(): import("react").JSX.Element;

package/dist/Contacts.js

@@ -0,0 +1,301 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The directory: who is in this org, and who you can put in a room.
+//
+// IT IS A LIST OF SUBJECTS AND NOTHING ELSE. People, the org's agents, and the
+// presets an org can install as one. It holds no conversations, keeps no
+// threads, and remembers nothing of its own — the rooms it starts live in the
+// thread store with every other conversation, which is `conversations.ts`.
+//
+// WHAT IT USED TO DO. Four `localStorage` keys: a roster of people it invented,
+// a list of agents it invented, a set of `direct_…`/`group_…`/`call_…` threads
+// nothing on the platform had ever seen, and an event the sidebar merged them
+// in through. Adding a person wrote a row into that store — no invitation, no
+// account, nobody told — and the row was gone on the next machine. Pressing
+// Call minted a thread whose title began with a telephone and rang nowhere.
+//
+// EVERY ROW IS NOW A READ, and every control a write:
+//   people   GET  /v1/iam/scim/v2/Users?owner=<org>   (`usePeople`)
+//   agents   GET  /v1/agents                          (`useCrew`, crew.tsx)
+//   presets  GET  /v1/agent/chat/presets              (the catalog, public)
+//   invite   POST /v1/iam/invitations                 (`createInvitation`)
+//   agent    POST /v1/agents                          (`Hire`, the crew's sheet)
+//   room     POST /v1/agents/chat/conversations       (`start`)
+//
+// THERE IS NO CALL CONTROL, because there is no call. Measured against the
+// platform's own contract — 1629 paths in /v1/openapi.json — nothing serves
+// signalling, an SFU, a room token or a TURN credential. A button that says
+// Call and opens a chat is worse than no button: it reports a thing that did
+// not happen. When the estate serves a call, the room it attaches to is the one
+// `start` already writes, and this file gains a verb rather than a store.
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useRooms } from './host.js';
+import { Check, Plus, Search, UserPlus } from 'lucide-react';
+import { Box, Text, XStack, YStack } from '@hanzo/ui';
+import { useAi, useModels, usePeople, useThreads } from '@hanzo/ai/react';
+import { useIam, useOrganizations } from '@hanzo/iam/react';
+import { hasSession } from './lib/session.js';
+import { useHydrated } from './lib/hydrated.js';
+import { ENSO, served } from './lib/ai.js';
+import { createInvitation, inviteLink } from './lib/invite.js';
+import { reach } from './lib/reach.js';
+import { Face } from './cast.js';
+import { Take } from './copy.js';
+import { Hire, useCrew } from './crew.js';
+import { called } from './team.js';
+import { say } from './failure.js';
+import { openThread } from './open.js';
+import { spokenAt, start } from "./conversations.js";
+const TABS = [
+    { id: 'all', label: 'All' },
+    { id: 'person', label: 'People' },
+    { id: 'agent', label: 'Agents' },
+    { id: 'preset', label: 'Presets' },
+];
+export function Contacts() {
+    const hydrated = useHydrated();
+    const { isAuthenticated } = useIam();
+    const { currentOrgId } = useOrganizations();
+    const signedIn = isAuthenticated || hasSession();
+    // A prerender knows neither the reader nor the org, so it draws the heading
+    // and waits. Announcing "sign in" before hydration tells a signed-in reader
+    // they are signed out for a frame.
+    if (!hydrated)
+        return _jsx(Alone, { children: "\u00A0" });
+    if (!signedIn)
+        return _jsx(Alone, { children: "Sign in to see who is in your organization." });
+    if (!currentOrgId)
+        return _jsx(Alone, { children: "This account is not in an organization yet." });
+    return _jsx(Roster, { owner: currentOrgId });
+}
+/** The room's one heading, for every state that has nothing to list. */
+function Alone({ children }) {
+    return (_jsxs(YStack, { flex: 1, items: "center", justify: "center", p: "$6", gap: "$3", children: [_jsx(Text, { render: "h1", fontSize: "$4", fontWeight: "600", color: "$ink", children: "Contacts" }), _jsx(Text, { fontSize: "$3", color: "$soft", maxW: 420, text: "center", children: children })] }));
+}
+/** A read that answered no, said once, above whatever else is on screen. */
+function Note({ children }) {
+    return (_jsx(Text, { fontSize: "$2", color: "$soft", px: "$3", py: "$2", children: children }));
+}
+/**
+ * The directory itself.
+ *
+ * SPLIT OUT because `usePeople` needs an owner and a hook cannot be called
+ * conditionally — the same reason Home and Vibe split theirs.
+ */
+function Roster({ owner }) {
+    const ai = useAi();
+    const { router } = useRooms();
+    const { people, loading: reading, error: unread } = usePeople({ owner, service: false });
+    // `create` and not `ai.agents.create`: the hook's own writer refreshes the
+    // list it read, which is what moves an installed preset out of the catalog
+    // and into the org's agents without a reload.
+    const { agents, create, loading: gathering, error: ungathered } = useCrew();
+    // WHAT "RECENTLY" MEANS: the conversations this reader has. It is the same
+    // read the sidebar makes, and the only record of who a room was with.
+    const { threads } = useThreads();
+    // An installed preset needs a model, and `POST /v1/agents` refuses one this
+    // deployment does not serve — so it is named against the served catalog by
+    // the one function that does that, rather than typed in and hoped for.
+    const { models } = useModels();
+    // `null` is the catalog unknown; `[]` is a deployment that publishes none.
+    const [presets, setPresets] = useState(null);
+    const [unlisted, setUnlisted] = useState(null);
+    useEffect(() => {
+        const stop = new AbortController();
+        ai.http
+            .collection('presets', {
+            method: 'GET',
+            path: '/v1/agent/chat/presets',
+            signal: stop.signal,
+        })
+            .then(setPresets)
+            .catch((e) => {
+            if (!stop.signal.aborted)
+                setUnlisted(e);
+        });
+        return () => stop.abort();
+    }, [ai]);
+    const [tab, setTab] = useState('all');
+    const [order, setOrder] = useState('name');
+    const [look, setLook] = useState('');
+    const [picked, setPicked] = useState([]);
+    const [inviting, setInviting] = useState(false);
+    const [hiring, setHiring] = useState(false);
+    const [busy, setBusy] = useState(null);
+    const [wrong, setWrong] = useState(null);
+    const entries = useMemo(() => {
+        const rows = [];
+        for (const one of people) {
+            const label = one.displayName || one.name;
+            rows.push({
+                key: `person:${one.id}`,
+                kind: 'person',
+                name: one.name,
+                label,
+                note: one.email ?? '',
+                at: spokenAt(threads, label),
+            });
+        }
+        for (const one of agents) {
+            rows.push({
+                key: `agent:${one.id}`,
+                kind: 'agent',
+                name: one.name,
+                label: called(one.name),
+                note: one.description || one.model || '',
+                avatar: one.avatar,
+                emoji: one.emoji,
+                at: spokenAt(threads, one.name),
+            });
+        }
+        // A preset the org has already installed IS the agent above it. Drawing
+        // both would offer to install what is already here.
+        for (const one of presets ?? []) {
+            if (agents.some((made) => made.name === one.id))
+                continue;
+            rows.push({
+                key: `preset:${one.id}`,
+                kind: 'preset',
+                name: one.id,
+                label: one.title || one.id,
+                note: 'Not installed',
+                at: 0,
+            });
+        }
+        return rows;
+    }, [people, agents, presets, threads]);
+    const shown = useMemo(() => {
+        const q = look.trim().toLowerCase();
+        return entries
+            .filter((one) => tab === 'all' || one.kind === tab)
+            .filter((one) => !q || `${one.label} ${one.name} ${one.note}`.toLowerCase().includes(q))
+            .sort((a, b) => order === 'name'
+            ? a.label.localeCompare(b.label)
+            : b.at - a.at || a.label.localeCompare(b.label));
+    }, [entries, tab, look, order]);
+    const install = useCallback(async (one) => {
+        const preset = (presets ?? []).find((p) => p.id === one.name);
+        if (!preset || busy)
+            return;
+        setBusy(one.key);
+        setWrong(null);
+        try {
+            // The list this row leaves and the list it joins are both `useAgents`,
+            // so the row moves by itself.
+            await create({
+                name: preset.id,
+                model: served(models, ENSO),
+                ...(preset.systemPrompt ? { instructions: preset.systemPrompt } : {}),
+                ...(preset.title ? { description: preset.title } : {}),
+            });
+        }
+        catch (e) {
+            setWrong(reach(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [busy, create, models, presets]);
+    /**
+     * INTO A ROOM, by the one call that starts one.
+     *
+     * One selected is a direct conversation, several is a group, and a group of
+     * agents or a mix of both is the same act — nothing here branches on how many
+     * or on what kind, because the thread store does not either.
+     */
+    const enter = useCallback(async () => {
+        const members = picked
+            .map((key) => entries.find((one) => one.key === key))
+            .filter((one) => Boolean(one))
+            .map((one) => ({ id: one.key, name: one.label || one.name, agent: one.kind === 'agent' }));
+        if (members.length === 0 || busy)
+            return;
+        setBusy('room');
+        setWrong(null);
+        try {
+            const id = await start(ai, members);
+            // The selection the chat pane reads, and the address a reload lands on.
+            openThread(id);
+            router.push(`/chat?thread=${encodeURIComponent(id)}`);
+        }
+        catch (e) {
+            setWrong(reach(e));
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [ai, busy, entries, picked, router]);
+    const waiting = (reading && people.length === 0) || (gathering && agents.length === 0);
+    return (_jsxs(YStack, { flex: 1, minH: 0, children: [_jsxs(XStack, { height: 48, shrink: 0, items: "center", gap: "$2", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { render: "h1", flex: 1, fontSize: "$3", fontWeight: "600", color: "$ink", numberOfLines: 1, children: "Contacts" }), _jsx(Control, { onPress: () => setInviting(true), icon: _jsx(UserPlus, { size: 13, "aria-hidden": true }), children: "Invite" }), _jsx(Control, { onPress: () => setHiring(true), icon: _jsx(Plus, { size: 13, "aria-hidden": true }), children: "New agent" })] }), _jsxs(XStack, { shrink: 0, items: "center", gap: "$2", px: "$3", py: "$2", borderBottomWidth: 1, borderColor: "$borderColor", flexWrap: "wrap", children: [_jsxs(XStack, { items: "center", gap: "$1.5", flex: 1, minW: 160, px: "$2", borderWidth: 1, borderColor: "$borderColor", rounded: "$3", children: [_jsx(Search, { size: 13, "aria-hidden": true }), _jsx(Text, { render: _jsx("input", { value: look, onChange: (e) => setLook(e.target.value), placeholder: "Search", "aria-label": "Search contacts" }), flex: 1, minW: 0, bg: "transparent", borderWidth: 0, outlineStyle: "none", color: "inherit", fontSize: "$2", px: 0, py: 6 })] }), TABS.map((one) => (_jsx(Pill, { on: tab === one.id, onPress: () => setTab(one.id), children: one.label }, one.id))), _jsx(Box, { width: 1, height: 18, bg: "$borderColor" }), _jsx(Pill, { on: order === 'name', onPress: () => setOrder('name'), children: "A\u2013Z" }), _jsx(Pill, { on: order === 'recent', onPress: () => setOrder('recent'), children: "Recent" })] }), unread ? _jsx(Note, { children: say(unread, 'your organization') }) : null, ungathered ? _jsx(Note, { children: say(ungathered, "this org's agents") }) : null, unlisted ? _jsx(Note, { children: say(unlisted, 'the agent presets') }) : null, wrong ? _jsx(Note, { children: wrong }) : null, _jsx(YStack, { flex: 1, minH: 0, overflow: "scroll", children: waiting && shown.length === 0 ? (_jsx(Note, { children: "Reading your directory." })) : shown.length === 0 ? (_jsx(Note, { children: look.trim()
+                        ? `Nobody here matches “${look.trim()}”.`
+                        : tab === 'agent'
+                            ? 'No agents yet. New agent writes one.'
+                            : tab === 'preset'
+                                ? 'Every preset this deployment publishes is installed.'
+                                : 'Nobody else in this organization yet. Invite sends the link.' })) : (shown.map((one) => (_jsx(Row, { one: one, on: picked.includes(one.key), busy: busy === one.key, onPress: () => one.kind === 'preset'
+                        ? void install(one)
+                        : setPicked((was) => was.includes(one.key)
+                            ? was.filter((k) => k !== one.key)
+                            : [...was, one.key]) }, one.key)))) }), picked.length > 0 ? (_jsxs(XStack, { shrink: 0, items: "center", gap: "$2", p: "$3", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(Text, { flex: 1, fontSize: "$2", color: "$soft", numberOfLines: 1, children: picked.length === 1 ? '1 selected' : `${picked.length} selected` }), _jsx(Control, { onPress: () => setPicked([]), children: "Clear" }), _jsx(Control, { onPress: () => void enter(), strong: true, children: busy === 'room' ? 'Opening…' : 'Start conversation' })] })) : null, inviting ? _jsx(Invite, { owner: owner, onClose: () => setInviting(false) }) : null, hiring ? _jsx(Hire, { onClose: () => setHiring(false), onMade: () => setHiring(false) }) : null] }));
+}
+/** One row: a face, a name, a line about them, and what pressing it does. */
+function Row({ one, on, busy, onPress, }) {
+    return (_jsx(Box, { render: "button", onClick: onPress, "aria-label": one.label, "aria-pressed": one.kind === 'preset' ? undefined : on, width: "100%", display: "block", cursor: "pointer", borderWidth: 0, borderBottomWidth: 1, borderBottomColor: "var(--borderColor, var(--white-08))", bg: on ? 'var(--raised, var(--white-06))' : 'transparent', children: _jsxs(XStack, { gap: "$3", items: "center", p: "$3", children: [_jsx(Face, { src: one.avatar, emoji: one.emoji, name: one.name, size: 32 }), _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$2", color: "$ink", numberOfLines: 1, text: "left", children: one.label }), one.note ? (_jsx(Text, { fontSize: "$1", color: "$soft", numberOfLines: 1, text: "left", children: one.note })) : null] }), one.kind === 'preset' ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: busy ? 'Installing…' : 'Install' })) : on ? (_jsx(Check, { size: 14, "aria-hidden": true })) : null] }) }));
+}
+/** A named control. One shape for every button in this room. */
+function Control({ children, onPress, icon, strong, }) {
+    return (_jsx(Box, { render: "button", onClick: onPress, px: "$3", py: "$2", rounded: "$3", borderWidth: strong ? 0 : 1, borderColor: "$borderColor", bg: strong ? '$ink' : 'transparent', hoverStyle: { bg: strong ? '$ink' : '$hover' }, cursor: "pointer", children: _jsxs(XStack, { items: "center", gap: "$1.5", children: [icon, _jsx(Text, { fontSize: "$2", color: strong ? '$background' : '$ink', fontWeight: strong ? '600' : undefined, numberOfLines: 1, children: children })] }) }));
+}
+/** A switch that is on or off — a tab, an order. Same shape, so they read alike. */
+function Pill({ children, on, onPress, }) {
+    return (_jsx(Box, { render: "button", onClick: onPress, "aria-pressed": on, px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: on ? '$ink' : '$borderColor', hoverStyle: { bg: '$hover' }, cursor: "pointer", children: _jsx(Text, { fontSize: "$2", color: on ? '$ink' : '$soft', numberOfLines: 1, children: children }) }));
+}
+/**
+ * ADDING A PERSON IS AN INVITATION, and it is the only honest shape for it.
+ *
+ * The other way in is `POST /v1/iam/users`, which takes the password the person
+ * will sign in with — so adding a colleague would mean choosing their
+ * credential and then telling it to them. An invitation is a code they redeem
+ * on hanzo.id under a password only they ever see.
+ *
+ * The link is the deliverable. Nothing here sends mail: no route on the
+ * platform mails an invitation, so this hands over the address instead of
+ * claiming to have sent one.
+ */
+function Invite({ owner, onClose }) {
+    const [email, setEmail] = useState('');
+    const [link, setLink] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const [wrong, setWrong] = useState(null);
+    useEffect(() => {
+        const key = (e) => {
+            if (e.key === 'Escape')
+                onClose();
+        };
+        window.addEventListener('keydown', key);
+        return () => window.removeEventListener('keydown', key);
+    }, [onClose]);
+    const make = async () => {
+        if (busy)
+            return;
+        setBusy(true);
+        setWrong(null);
+        try {
+            const invitation = await createInvitation(owner, email.trim() || undefined);
+            setLink(inviteLink(invitation.owner, invitation.code));
+        }
+        catch (e) {
+            setWrong(reach(e));
+        }
+        finally {
+            setBusy(false);
+        }
+    };
+    return (_jsx(Box, { position: "fixed", inset: 0, z: "var(--z-modal)", display: "flex", items: "center", justify: "center", p: "$4", bg: "$sunken", onClick: (e) => {
+            if (e.target === e.currentTarget)
+                onClose();
+        }, children: _jsxs(YStack, { role: "dialog", "aria-label": "Invite", width: "100%", maxW: 440, gap: "$3", p: "$5", rounded: "$6", borderWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsx(Text, { fontSize: "$5", fontWeight: "600", color: "$ink", children: "Invite" }), link ? (_jsxs(_Fragment, { children: [_jsxs(Text, { fontSize: "$2", color: "$soft", children: ["This link joins ", owner, ". It redeems once."] }), _jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(Text, { flex: 1, fontSize: "$2", color: "$ink", numberOfLines: 1, children: link }), _jsx(Take, { text: link, says: "the invitation link", label: "Copy" })] })] })) : (_jsxs(_Fragment, { children: [_jsx(Text, { render: _jsx("input", { value: email, onChange: (e) => setEmail(e.target.value), onKeyDown: (e) => {
+                                    if (e.key === 'Enter')
+                                        void make();
+                                }, placeholder: "Their email \u2014 or leave it open to anyone with the link", "aria-label": "Email", autoFocus: true }), width: "100%", bg: "transparent", borderWidth: 1, borderColor: "var(--border)", rounded: "var(--radius-md)", px: 10, py: 8, outlineStyle: "none", color: "inherit", fontSize: "$2" }), wrong ? (_jsx(Text, { fontSize: "$2", color: "$soft", children: wrong })) : null] })), _jsxs(XStack, { justify: "flex-end", gap: "$2", children: [_jsx(Control, { onPress: onClose, children: link ? 'Done' : 'Cancel' }), link ? null : (_jsx(Control, { onPress: () => void make(), strong: true, children: busy ? 'Making…' : 'Make a link' }))] })] }) }));
+}

package/dist/Directory.d.ts

@@ -0,0 +1,24 @@
+/**
+ * The four ways this experience is customized, and the whole taxonomy.
+ *
+ * APPS are connected services — the thing that used to be called Connectors,
+ * which named the wire rather than what a reader installs. CHANNELS are
+ * transports: where a conversation reaches you. PLUGINS extend the client.
+ * SKILLS extend what an agent knows how to do.
+ *
+ * Order is the ruling's: Apps, Channels, Plugins, Skills.
+ */
+export type Tab = 'apps' | 'channels' | 'plugins' | 'skills';
+export declare function Directory({ open, onClose, tab: first, }: {
+    open: boolean;
+    onClose: () => void;
+    /** The tab the directory opens on. A door that leads to channels opens on them. */
+    tab?: Tab;
+}): import("react").JSX.Element;
+/**
+ * The body. Rendered inside the Directory modal AND inside Settings, which is
+ * why it is exported and takes the tab as a prop.
+ */
+export declare function Catalog({ tab }: {
+    tab: Tab;
+}): import("react").JSX.Element;