@hanzo/rooms 0.1.93 → 0.1.95

package/dist/Chat.js

@@ -18,9 +18,9 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 //
 // The FREE lane is about PRICE, not identity: a free turn spends no balance and
 // is data-shared in exchange. That choice is made once, at onboarding, where
-// the terms are linked. The line under the composer says so for as long as a
-// free model answers. Signing in buys the paid models and a history that
-// follows you; it is never the price of asking a question.
+// the terms are linked. Nothing under the composer repeats it. Signing in buys
+// the paid models and a history that follows you; it is never the price of
+// asking a question.
 //
 // This file used to branch on `isAuthenticated` and hand a visitor a composer
 // whose only action was a trip to hanzo.id, captioned "Sign in to send". The
@@ -31,7 +31,6 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "r
 import { billed, detail, familyOf, planRequired, plainly, refused } from "./failure.js";
 import { Prose } from "./Prose.js";
 import { useAgent, useAi, useChat, } from "@hanzo/ai/react";
-import { isFree } from "@hanzo/ai";
 import { ASK, Chat as ChatSurface, Failure, Parts, words } from "@hanzo/ui/chat";
 import { carriedIn, carrying, compose, partsOf, said as told, weigh } from "./lib/attach.js";
 import { download, dropped, fileOf, pct, readable, refOf, retrieve } from "./lib/files.js";
@@ -70,7 +69,7 @@ import { Upgrade, useFree } from './Upgrade.js';
 import { enter, LOGIN } from './lib/destination.js';
 import { first } from './lib/first.js';
 import { BAD } from "./lib/mix.js";
-import { brand, site } from './where.js';
+import { brand } from './where.js';
 // NO REASONING PANEL HERE. Every assistant turn opened a "Thinking" disclosure
 // listing seven steps — "Planning CSS extraction for chat styles", "Designing
 // responsive top bar grid layout" — typed into this file as a literal array.
@@ -466,8 +465,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
      * `useState(anonymous ? FREE : ENSO)` read the flag ONCE, on the first render
      * — which is the render before hydration settles, where `anonymous` is always
      * false. So every visitor opened on ENSO while the composer beside them said
-     * "Enso Free", and `isFree(model)` was false, so the data-sharing notice
-     * never appeared. A visitor was sending on the paid pool, because a state
+     * "Enso Free". A visitor was sending on the paid pool, because a state
      * initialiser cannot see a value that arrives later.
      *
      * A CHOICE, or the identity. `null` is "nobody has chosen", which is a
@@ -684,8 +682,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
     // EVERY MODEL IS CHOSEN, never asked for: one the plan does not cover still
     // picks, and the gateway answers it with the policy's refusal or from Enso,
     // which the room then shows. A turn the gateway refuses `plan_required`
-    // opens the upgrade, titled with the model. `isFree` still drives the
-    // free-lane notice.
+    // opens the upgrade, titled with the model.
     const free = useFree(!anonymous) && !held;
     const [ask, setAsk] = useState(null);
     // KEEPING THE CONVERSATION is the reader's account, not this pane's choice:
@@ -1115,8 +1112,7 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
      *  no longer allowed to draw. `:focus-within` would say this in CSS; the
      *  stylesheet that would hold it cannot reach past gui's own rule, so the
      *  state is read where the event is. */
-    // A free send goes. The data-share choice was made at onboarding, once,
-    // and the line under the composer still says what a free model does.
+    // A free send goes. The data-share choice was made at onboarding, once.
     const guarded = speak;
     /**
      * The draft and the files, sent as one turn.
@@ -1523,5 +1519,5 @@ function Thread({ placeholder = message(), initial, anonymous = false, heading,
                 empty: heading === null ? undefined : (_jsxs(YStack, { "data-slot": "opening", items: "center", width: "100%", pt: "$6", pb: "$2", ...(media.sm ? null : { flex: 1, justify: "flex-end" }), children: [room.length > 1 ? (_jsx(XStack, { items: "center", justify: "center", mb: "$4", children: room.map((name, i) => (_jsx(Box, { ml: i ? -16 : 0, rounded: 40, borderWidth: 2, borderColor: "$background", z: room.length - i, children: _jsx(Face, { src: faces[name]?.avatar, emoji: faces[name]?.emoji, name: name, size: 72 }) }, name))) })) : portrait ? (_jsx(Box, { width: 160, height: 160, rounded: 24, overflow: "hidden", borderWidth: 2, borderColor: "var(--white-15)", boxShadow: "0 10px 24px color-mix(in srgb, var(--pure-black) 70%, transparent)", mb: "$4", bg: "var(--neutral-900)", children: _jsx(View, { render: _jsx("img", { src: portrait, alt: withWhom }), width: "100%", height: "100%", objectFit: "cover" }) })) : null, room.length === 1 && !portrait ? (_jsx(Box, { mb: "$3", children: _jsx(Face, { emoji: mate?.emoji ?? persona?.emoji, name: withWhom, size: 72 }) })) : null, _jsx(Text, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", text: "center", mb: "$1", children: join(room) || heading || (firstName ? `What’s up, ${firstName}?` : "What’s up?") }), room.length === 1 && (mate?.description ?? persona?.description) ? (_jsx(Text, { fontSize: "$3", color: "$soft", text: "center", maxW: 500, mb: "$4", lineHeight: "$4", children: mate?.description ?? persona?.description })) : null] })), 
                 // The transcript reads at the same measure. `Thread` defaults to 768
                 // itself; handing it the column here is what lets Width reach it.
-                column: { maxW: MEASURE }, composer: prompt({ ...composing, field: mention.field }, mention.state) }), _jsx(AgentMaker, {}), carry.dialog, _jsx(XStack, { items: "center", justify: "center", py: "$1", px: "$3", gap: "$2", children: isFree(model) ? (_jsxs(Text, { fontSize: "$1", color: "$soft", children: ["Free chat is data-shared to train models.", " ", _jsx(Anchor, { href: site("/legal/privacy"), fontSize: "$1", color: "$ink", children: "Privacy" })] })) : (_jsxs(_Fragment, { children: [_jsx(Anchor, { href: site("/legal/terms"), fontSize: "$1", color: "$soft", children: "Terms" }), _jsx(Text, { fontSize: "$1", color: "$soft", children: "\u00B7" }), _jsx(Anchor, { href: site("/legal/privacy"), fontSize: "$1", color: "$soft", children: "Privacy" })] })) }), _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
+                column: { maxW: MEASURE }, composer: prompt({ ...composing, field: mention.field }, mention.state) }), _jsx(AgentMaker, {}), carry.dialog, _jsx(Upgrade, { ask: ask, onClose: () => setAsk(null) })] }));
 }

package/dist/Chrome.d.ts

@@ -0,0 +1,20 @@
+/**
+ * The bar over a focused page: the organization chooser, the way in, the way to
+ * pay, a beta application. One bar for all of them, so none draws its own.
+ *
+ * The brand at the start (`HanzoLockup`: the mark and `brand()`), going to this
+ * host's root; then the host's `back`, where the page has a step to go back to.
+ * At the end, once someone is signed in, who it is: the face, the name and the
+ * address, with Use another account and Log out. Signed out, nothing but the
+ * brand. Under gui's `md` the account folds into its face, a menu of the address
+ * and the same two ways out.
+ *
+ * Use another account writes this page down first (destination.ts
+ * `rememberDestination`), so the sign-in that follows comes back to it, as
+ * hanzo.ai's /join does. Log out is the account menu's own (lib/signout). The
+ * session is IAM's: the host mounts `IamProvider`.
+ */
+import type { ReactNode } from 'react';
+export declare function Chrome({ back }: {
+    back?: ReactNode;
+}): import("react").JSX.Element;

package/dist/Chrome.js

@@ -0,0 +1,31 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useIam } from '@hanzo/iam/react';
+import { Text, View, XStack, YStack } from '@hanzo/gui';
+import { Avatar, Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@hanzo/ui';
+import { HanzoLockup } from '@hanzogui/shell';
+import { rememberDestination } from './lib/destination.js';
+import { named } from './lib/session.js';
+import { useSignOut } from './lib/signout.js';
+import { brand } from './where.js';
+/** The bar's height under the notch: hanzo.ai's masthead's. */
+const HEIGHT = 60;
+/** The notch's inset. gui carries a CSS function to the page unchanged; its types only name custom properties. */
+const NOTCH = 'env(safe-area-inset-top)';
+export function Chrome({ back }) {
+    const { user, isAuthenticated } = useIam();
+    const signOut = useSignOut();
+    const claimed = named();
+    const u = user;
+    const name = u?.displayName || u?.name || claimed?.name || '';
+    const email = u?.email || claimed?.email || '';
+    const avatar = typeof u?.avatar === 'string' && u.avatar.startsWith('https://') ? u.avatar : '';
+    const who = name || email;
+    const other = () => {
+        rememberDestination();
+        void signOut();
+    };
+    const out = () => void signOut();
+    const signed = isAuthenticated && Boolean(who);
+    return (_jsxs(XStack, { render: "header", "data-slot": "masthead", position: "sticky", t: 0, z: "var(--z-header)", shrink: 0, boxSizing: "content-box", height: HEIGHT, pt: NOTCH, px: "var(--page-gutter, 20px)", gap: 12, items: "center", bg: "var(--background)", borderBottomWidth: 1, borderColor: "var(--border)", children: [_jsx(Text, { render: _jsx("a", { href: "/", "aria-label": `${brand()} home` }), display: "flex", items: "center", shrink: 0, color: "var(--foreground)", textDecorationLine: "none", children: _jsx(HanzoLockup, { label: brand(), size: 22 }) }), back, _jsx(View, { flex: 1 }), signed ? (_jsxs(_Fragment, { children: [_jsxs(XStack, { render: "section", "aria-label": "Account", items: "center", gap: 12, minW: 0, "$max-md": { display: 'none' }, children: [_jsx(Avatar, { src: avatar || null, name: who, alt: "" }), _jsxs(YStack, { minW: 0, gap: 2, children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", numberOfLines: 1, children: who }), name && email ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: email })) : null] }), _jsx(Button, { variant: "ghost", size: "sm", onClick: other, children: "Use another account" }), _jsx(Button, { variant: "ghost", size: "sm", onClick: out, children: "Log out" })] }), _jsx(View, { display: "none", "$max-md": { display: 'flex' }, children: _jsxs(DropdownMenu, { placement: "bottom-end", offset: 8, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(XStack, { render: "button", "aria-label": `Account: ${who}`, width: 40, height: 40, rounded: 999, items: "center", justify: "center", borderWidth: 0, bg: "transparent", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, cursor: "pointer", children: _jsx(Avatar, { src: avatar || null, name: who, alt: "" }) }) }), _jsxs(DropdownMenuContent, { minW: 240, maxW: "calc(100vw - 16px)", "aria-labelledby": undefined, "aria-label": "Account", children: [_jsx(DropdownMenuLabel, { children: _jsxs(YStack, { minW: 0, gap: 2, children: [_jsx(Text, { fontSize: "$3", fontWeight: "500", color: "$ink", numberOfLines: 1, children: who }), name && email ? (_jsx(Text, { fontSize: "$2", color: "$soft", numberOfLines: 1, children: email })) : null] }) }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onSelect: other, children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "Use another account" }) }), _jsx(DropdownMenuItem, { onSelect: out, children: _jsx(Text, { fontSize: "$3", color: "$ink", children: "Log out" }) })] })] }) })] })) : null] }));
+}

package/dist/Orgs.js

@@ -52,7 +52,8 @@ import { createOrg, say } from './lib/org.js';
 import { countSignup } from './lib/intent.js';
 import { BAD, mix } from './lib/mix.js';
 import { useRooms } from './host.js';
-import { brand, site, where } from './where.js';
+import { Chrome } from './Chrome.js';
+import { site, where } from './where.js';
 /** A template to set up once the organization is live. */
 const SETUP = 'hanzo:org:template';
 /** Checkout for a plan, coming back to this room. */
@@ -292,9 +293,14 @@ const FIELD = {
     bg: 'var(--background)',
     color: 'var(--foreground)',
 };
-/** The sheet every screen stands on: the whole viewport, scrolling, its column centred. */
+/**
+ * The sheet every screen stands on: the whole viewport, scrolling, its column
+ * centred, under the focused pages' one bar (`Chrome`) once someone is signed
+ * in. "Signing you in" stands alone.
+ */
 function Page({ label, children }) {
-    return (_jsx(YStack, { position: "fixed", inset: 0, z: SHEET, overflowY: "auto", bg: "var(--background)", pt: TOP, px: 20, pb: 48, role: "region", "aria-label": label, children: children }));
+    const { isAuthenticated } = useIam();
+    return (_jsxs(YStack, { position: "fixed", inset: 0, z: SHEET, overflowY: "auto", bg: "var(--background)", role: "region", "aria-label": label, children: [isAuthenticated ? _jsx(Chrome, {}) : null, _jsx(YStack, { pt: TOP, px: 20, pb: 48, children: children })] }));
 }
 /** The column a screen's words sit in. */
 function Column({ children }) {
@@ -331,9 +337,6 @@ function Forward({ to }) {
 function Step({ at, of }) {
     return (_jsxs(Text, { render: "p", mb: 10, fontSize: "$2", fontFamily: "$mono", color: "$soft", children: ["Step ", at, " of ", of] }));
 }
-function Brand() {
-    return (_jsx(Text, { fontSize: "$6", fontWeight: "500", mb: 28, color: "var(--foreground)", children: brand() }));
-}
 /** The free rung's name in the billing catalog. */
 const FREE_TIER = 'free';
 /**
@@ -362,7 +365,7 @@ function SignIn({ to }) {
 function Create() {
     const [open, setOpen] = useState(false);
     const [details, setDetails] = useState(false);
-    return (_jsxs(Page, { label: "Organizations", children: [_jsxs(Column, { children: [_jsx(Brand, {}), _jsxs(XStack, { items: "flex-start", justify: "space-between", gap: 16, flexWrap: "wrap", children: [_jsxs(YStack, { children: [_jsx(Text, { render: "h1", fontSize: "$10", fontWeight: "500", letterSpacing: -0.32, color: "var(--text-primary)", children: "Organizations" }), _jsx(Text, { render: "p", mt: 6, fontSize: "$4", color: muted, children: "You do not belong to one yet." })] }), _jsxs(Button, { variant: "primary", size: "lg", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 16, "aria-hidden": true }), "New organization"] })] }), _jsx(Rule, {}), _jsxs(YStack, { items: "center", py: 28, children: [_jsx(Text, { render: "p", fontSize: "$6", fontWeight: "500", color: "var(--foreground)", text: "center", children: "No organizations yet" }), _jsx(Button, { variant: "linkMuted", size: "sm", mt: 8, onClick: () => setDetails((d) => !d), children: details ? '- Details' : '+ Details' }), details ? (_jsx(Text, { render: "p", mt: 12, maxW: 440, fontSize: "$4", color: muted, lineHeight: 23.25, text: "center", children: "An organization owns every agent, credit and member. Create one and you are its owner." })) : null] }), _jsx(Rule, {})] }), open ? _jsx(CreateDialog, { onClose: () => setOpen(false) }) : null] }));
+    return (_jsxs(Page, { label: "Organizations", children: [_jsxs(Column, { children: [_jsxs(XStack, { items: "flex-start", justify: "space-between", gap: 16, flexWrap: "wrap", children: [_jsxs(YStack, { children: [_jsx(Text, { render: "h1", fontSize: "$10", fontWeight: "500", letterSpacing: -0.32, color: "var(--text-primary)", children: "Organizations" }), _jsx(Text, { render: "p", mt: 6, fontSize: "$4", color: muted, children: "You do not belong to one yet." })] }), _jsxs(Button, { variant: "primary", size: "lg", onClick: () => setOpen(true), children: [_jsx(Plus, { size: 16, "aria-hidden": true }), "New organization"] })] }), _jsx(Rule, {}), _jsxs(YStack, { items: "center", py: 28, children: [_jsx(Text, { render: "p", fontSize: "$6", fontWeight: "500", color: "var(--foreground)", text: "center", children: "No organizations yet" }), _jsx(Button, { variant: "linkMuted", size: "sm", mt: 8, onClick: () => setDetails((d) => !d), children: details ? '- Details' : '+ Details' }), details ? (_jsx(Text, { render: "p", mt: 12, maxW: 440, fontSize: "$4", color: muted, lineHeight: 23.25, text: "center", children: "An organization owns every agent, credit and member. Create one and you are its owner." })) : null] }), _jsx(Rule, {})] }), open ? _jsx(CreateDialog, { onClose: () => setOpen(false) }) : null] }));
 }
 /** Name it, pick what it runs and its plan: a paid plan goes to checkout, Free goes straight in. */
 function CreateDialog({ onClose }) {
@@ -580,7 +583,7 @@ function Pick({ members, current, onPick, onClose, }) {
         document.addEventListener('keydown', key);
         return () => document.removeEventListener('keydown', key);
     }, [onClose, founding]);
-    return (_jsxs(Page, { label: "Choose an organization", children: [_jsxs(Column, { children: [_jsxs(XStack, { items: "flex-start", justify: "space-between", gap: 12, children: [_jsx(Brand, {}), onClose ? (_jsx(Button, { variant: "ghost", size: "icon-sm", mt: -6, mr: -8, onClick: onClose, "aria-label": "Close", children: _jsx(X, { size: 16, "aria-hidden": true }) })) : null] }), _jsx(Heading, { title: "Choose an organization", lede: _jsx(_Fragment, { children: "Everything you open \u2014 chats, agents, credit \u2014 is this one's." }) }), _jsx(Rule, {}), _jsx(XStack, { render: "form", onSubmit: (e) => {
+    return (_jsxs(Page, { label: "Choose an organization", children: [_jsxs(Column, { children: [_jsxs(XStack, { items: "flex-start", justify: "space-between", gap: 12, children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(Heading, { title: "Choose an organization", lede: _jsx(_Fragment, { children: "Everything you open \u2014 chats, agents, credit \u2014 is this one's." }) }) }), onClose ? (_jsx(Button, { variant: "ghost", size: "icon-sm", mr: -8, onClick: onClose, "aria-label": "Close", children: _jsx(X, { size: 16, "aria-hidden": true }) })) : null] }), _jsx(Rule, {}), _jsx(XStack, { render: "form", onSubmit: (e) => {
                             e.preventDefault();
                             if (shown[0])
                                 onPick(shown[0].name);
@@ -712,7 +715,7 @@ function Found({ onClose }) {
 function Subscribe({ org, members, onSwitch, }) {
     const { plan, price } = usePlan('team');
     const seat = plan?.pricePerUser ? ' / seat' : '';
-    return (_jsx(Page, { label: "Subscribe", children: _jsxs(Column, { children: [_jsx(Brand, {}), _jsx(Heading, { title: org, lead: 22.5, lede: plan ? `This organization runs on the ${plan.name} plan at ${price}${seat} / month, and nothing in it works until that plan is live.` : 'Its plan is not live yet.' }), _jsx(Rule, {}), _jsxs(XStack, { gap: 10, flexWrap: "wrap", children: [plan ? (_jsx(Button, { asChild: true, variant: "primary", size: "lg", children: _jsx("a", { href: checkout(plan), children: `Subscribe — ${price}${seat} / month` }) })) : null, members.length > 1 ? (_jsx(Button, { size: "lg", onClick: onSwitch, children: "Switch organization" })) : null] })] }) }));
+    return (_jsx(Page, { label: "Subscribe", children: _jsxs(Column, { children: [_jsx(Heading, { title: org, lead: 22.5, lede: plan ? `This organization runs on the ${plan.name} plan at ${price}${seat} / month, and nothing in it works until that plan is live.` : 'Its plan is not live yet.' }), _jsx(Rule, {}), _jsxs(XStack, { gap: 10, flexWrap: "wrap", children: [plan ? (_jsx(Button, { asChild: true, variant: "primary", size: "lg", children: _jsx("a", { href: checkout(plan), children: `Subscribe — ${price}${seat} / month` }) })) : null, members.length > 1 ? (_jsx(Button, { size: "lg", onClick: onSwitch, children: "Switch organization" })) : null] })] }) }));
 }
 // ── the front door's setup ─────────────────────────────────────────────────────
 /**
@@ -808,7 +811,7 @@ function Start({ founded = null, onFounded, first, members = [], onSwitch, }) {
     };
     if (step === 'plan' && founded)
         return _jsx(Plan, { org: founded, members: [founded], seats: 1 + sent.filter((s) => s.link).length, setup: true });
-    return (_jsx(Page, { label: "Create your team", children: _jsxs(Column, { children: [_jsx(Brand, {}), step === 'name' ? (_jsxs(YStack, { render: "form", onSubmit: create, children: [_jsx(Step, { at: 1, of: 3 }), _jsx(Heading, { title: "Create your team", lede: "A team owns its agents, credit and members. You are its owner." }), _jsx(Rule, {}), _jsxs(View, { render: "label", display: "block", children: [_jsx(Text, { display: "block", fontSize: "$4", fontWeight: "500", mb: 8, color: "$ink", children: "Team name" }), _jsx(Text, { render: _jsx("input", { value: name, onChange: (e) => setName(e.target.value), placeholder: "Acme", autoFocus: true }), ...FIELD }), _jsx(Text, { display: "block", fontSize: "$3", color: "$soft", mt: 8, children: "What the rail and every invoice call it." })] }), refused ? (_jsx(Text, { render: "p", role: "alert", mt: 14, fontSize: "$3", color: BAD, children: refused })) : null, _jsxs(XStack, { gap: 10, flexWrap: "wrap", mt: 24, children: [_jsx(Button, { type: "submit", variant: "primary", size: "lg", disabled: busy, children: busy ? 'Creating…' : 'Continue' }), members.length > 1 && onSwitch ? (_jsx(Button, { type: "button", size: "lg", onClick: onSwitch, children: "Switch organization" })) : null] }), _jsx(Rule, {}), _jsxs(Text, { render: "p", fontSize: "$3", color: "$soft", children: ["Just you? Hanzo Chat is free for personal use at", ' ', _jsx(Text, { render: _jsx("a", { href: site('/chat') }), color: "$ink", textDecorationLine: "underline", children: "hanzo.ai/chat" }), "."] })] })) : (_jsxs(YStack, { render: "form", onSubmit: invite, children: [_jsx(Step, { at: 2, of: 3 }), _jsx(Heading, { title: "Invite your teammates", lede: "Each address gets its own single-use link to join. You can skip this and invite people later." }), _jsx(Rule, {}), _jsxs(View, { render: "label", display: "block", children: [_jsx(Text, { display: "block", fontSize: "$4", fontWeight: "500", mb: 8, color: "$ink", children: "Email addresses" }), _jsx(Text, { render: _jsx("textarea", { value: emails, onChange: (e) => setEmails(e.target.value), placeholder: "ada@acme.com, alan@acme.com", rows: 3 }), ...FIELD }), _jsx(Text, { display: "block", fontSize: "$3", color: "$soft", mt: 8, children: "Separate them with commas, spaces or new lines." })] }), sent.length ? (_jsx(YStack, { render: "ul", gap: 8, m: 0, p: 0, mt: 18, "aria-label": "Invitations", children: sent.map((s) => (_jsx(YStack, { render: "li", children: _jsxs(Text, { fontSize: "$3", color: "$soft", wordWrap: "break-word", children: [_jsx(Text, { fontWeight: "500", color: "$ink", children: s.email }), ' ', s.link ? (_jsxs(_Fragment, { children: ["invited. Their link:", ' ', _jsx(Text, { render: _jsx("a", { href: s.link }), color: "$ink", textDecorationLine: "underline", children: s.link })] })) : (_jsx(Text, { role: "alert", color: BAD, children: s.refused }))] }) }, s.email))) })) : null, _jsx(XStack, { gap: 10, flexWrap: "wrap", mt: 24, children: sent.length ? (_jsx(Button, { type: "button", variant: "primary", size: "lg", onClick: () => setStep('plan'), children: "Continue" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: "submit", variant: "primary", size: "lg", disabled: busy, children: busy ? 'Inviting…' : emails.trim() ? 'Invite and continue' : 'Continue' }), _jsx(Button, { type: "button", size: "lg", onClick: () => setStep('plan'), children: "Skip for now" })] })) })] }))] }) }));
+    return (_jsx(Page, { label: "Create your team", children: _jsx(Column, { children: step === 'name' ? (_jsxs(YStack, { render: "form", onSubmit: create, children: [_jsx(Step, { at: 1, of: 3 }), _jsx(Heading, { title: "Create your team", lede: "A team owns its agents, credit and members. You are its owner." }), _jsx(Rule, {}), _jsxs(View, { render: "label", display: "block", children: [_jsx(Text, { display: "block", fontSize: "$4", fontWeight: "500", mb: 8, color: "$ink", children: "Team name" }), _jsx(Text, { render: _jsx("input", { value: name, onChange: (e) => setName(e.target.value), placeholder: "Acme", autoFocus: true }), ...FIELD }), _jsx(Text, { display: "block", fontSize: "$3", color: "$soft", mt: 8, children: "What the rail and every invoice call it." })] }), refused ? (_jsx(Text, { render: "p", role: "alert", mt: 14, fontSize: "$3", color: BAD, children: refused })) : null, _jsxs(XStack, { gap: 10, flexWrap: "wrap", mt: 24, children: [_jsx(Button, { type: "submit", variant: "primary", size: "lg", disabled: busy, children: busy ? 'Creating…' : 'Continue' }), members.length > 1 && onSwitch ? (_jsx(Button, { type: "button", size: "lg", onClick: onSwitch, children: "Switch organization" })) : null] }), _jsx(Rule, {}), _jsxs(Text, { render: "p", fontSize: "$3", color: "$soft", children: ["Just you? Hanzo Chat is free for personal use at", ' ', _jsx(Text, { render: _jsx("a", { href: site('/chat') }), color: "$ink", textDecorationLine: "underline", children: "hanzo.ai/chat" }), "."] })] })) : (_jsxs(YStack, { render: "form", onSubmit: invite, children: [_jsx(Step, { at: 2, of: 3 }), _jsx(Heading, { title: "Invite your teammates", lede: "Each address gets its own single-use link to join. You can skip this and invite people later." }), _jsx(Rule, {}), _jsxs(View, { render: "label", display: "block", children: [_jsx(Text, { display: "block", fontSize: "$4", fontWeight: "500", mb: 8, color: "$ink", children: "Email addresses" }), _jsx(Text, { render: _jsx("textarea", { value: emails, onChange: (e) => setEmails(e.target.value), placeholder: "ada@acme.com, alan@acme.com", rows: 3 }), ...FIELD }), _jsx(Text, { display: "block", fontSize: "$3", color: "$soft", mt: 8, children: "Separate them with commas, spaces or new lines." })] }), sent.length ? (_jsx(YStack, { render: "ul", gap: 8, m: 0, p: 0, mt: 18, "aria-label": "Invitations", children: sent.map((s) => (_jsx(YStack, { render: "li", children: _jsxs(Text, { fontSize: "$3", color: "$soft", wordWrap: "break-word", children: [_jsx(Text, { fontWeight: "500", color: "$ink", children: s.email }), ' ', s.link ? (_jsxs(_Fragment, { children: ["invited. Their link:", ' ', _jsx(Text, { render: _jsx("a", { href: s.link }), color: "$ink", textDecorationLine: "underline", children: s.link })] })) : (_jsx(Text, { role: "alert", color: BAD, children: s.refused }))] }) }, s.email))) })) : null, _jsx(XStack, { gap: 10, flexWrap: "wrap", mt: 24, children: sent.length ? (_jsx(Button, { type: "button", variant: "primary", size: "lg", onClick: () => setStep('plan'), children: "Continue" })) : (_jsxs(_Fragment, { children: [_jsx(Button, { type: "submit", variant: "primary", size: "lg", disabled: busy, children: busy ? 'Inviting…' : emails.trim() ? 'Invite and continue' : 'Continue' }), _jsx(Button, { type: "button", size: "lg", onClick: () => setStep('plan'), children: "Skip for now" })] })) })] })) }) }));
 }
 /** Where a checkout from the setup returns: the rooms' Home, on this origin. */
 const home = () => `${window.location.origin}${where().home}`;
@@ -835,7 +838,7 @@ function Plan({ org, members, onSwitch, outage, onRetry, seats: wanted = 1, setu
         ['month', 'Monthly', `${money(monthly)} / seat / month`],
         ...(yearly ? [['year', 'Annual', `${money(yearly)} / seat, billed once a year`]] : []),
     ];
-    return (_jsx(Page, { label: "Choose your plan", children: _jsxs(Column, { children: [_jsx(Brand, {}), setup ? _jsx(Step, { at: 3, of: 3 }) : null, _jsx(Heading, { title: org, lead: 22.5, lede: outage
+    return (_jsx(Page, { label: "Choose your plan", children: _jsxs(Column, { children: [setup ? _jsx(Step, { at: 3, of: 3 }) : null, _jsx(Heading, { title: org, lead: 22.5, lede: outage
                         ? 'Billing could not be read just now, so this team cannot open yet. That is ours to fix.'
                         : plan
                             ? `A team runs on the ${plan.name} plan, and nothing in it works until that plan is live.`

package/dist/index.d.ts

@@ -12,3 +12,4 @@ export { configure, where, site, brand } from './where.js';
 export type { Addresses } from './where.js';
 export { Rooms, Look, useRooms, useLook, useOrg } from './host.js';
 export type { Router, Link, RoomsProps } from './host.js';
+export { Chrome } from './Chrome.js';

package/dist/index.js

@@ -10,3 +10,5 @@
  */
 export { configure, where, site, brand } from './where.js';
 export { Rooms, Look, useRooms, useLook, useOrg } from './host.js';
+// The bar over a focused page (the chooser, the way in, the way to pay): one for every host.
+export { Chrome } from './Chrome.js';

package/dist/lib/ai.d.ts

@@ -40,7 +40,7 @@ export declare const base: () => {
 export interface Ai {
     client: AiClient | null;
     model: string;
-    /** Answering free, so the turn is data-shared and owes the notice. */
+    /** Answering on the free pool. The data-share choice was made at onboarding. */
     free: boolean;
     /** Mounted client-side. The static export always prerenders the signed-out
      *  page, so nothing interactive may render until this is true. */

package/dist/lib/ai.js

@@ -5,8 +5,8 @@
 // their account like every other turn they run.
 //
 // Signed out — the FREE POOL, anonymously. There is no account to bill and none
-// is needed: a free turn spends no balance, and what it costs instead is stated
-// in the consent block the composer asks before the first send. A widget key, if
+// is needed: a free turn spends no balance. The data-share choice is made
+// once, at onboarding. A widget key, if
 // one is configured, rides along so the turn attributes to the org that minted
 // it; without one the turn is simply anonymous. Either way the client EXISTS,
 // because a chat you cannot send is not a chat.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/rooms",
-  "version": "0.1.93",
+  "version": "0.1.95",
   "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",