@hanzo/build 0.2.10 → 0.2.11

package/lib/foot.js

@@ -0,0 +1,36 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The rail's foot: the card that offers Hanzo in Slack, and the menu the account
+ * row opens — who is signed in, Settings, Usage, the plans, help and logging out.
+ * Everything it opens is an address of this page, but help, which is the
+ * documentation.
+ */
+import { Popover, SizableText, XStack, YStack } from '@hanzo/gui';
+import { Gauge, LifeBuoy, LogOut, Settings, Slack as Mark, Sparkles, X } from '@hanzogui/lucide-icons-2';
+import { MenuRow, MenuRule } from '@hanzo/ui/product';
+import { useHost } from './host.js';
+import { path } from './route.js';
+export const DOCS = 'https://docs.hanzo.ai/docs/dev';
+/** Hanzo in Slack is set up under Settings; the card goes there, and once dismissed stays gone. */
+export function Slack({ onOpen, onDismiss }) {
+    return (_jsxs(XStack, { items: "center", gap: "$2.5", px: "$3", py: "$2.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$panel", children: [_jsx(Mark, { size: 16 }), _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, children: "Try Hanzo in Slack" }), _jsx(XStack, { render: "button", "aria-label": "Set up Hanzo in Slack", onPress: onOpen, cursor: "pointer", children: _jsx(SizableText, { size: "$1", color: "$soft", textDecorationLine: "underline", children: "Set up" }) })] }), _jsx(XStack, { render: "button", "aria-label": "Dismiss", onPress: onDismiss, p: "$1", rounded: "$2", hoverStyle: { bg: '$hover' }, children: _jsx(X, { size: 14 }) })] }));
+}
+/**
+ * The account menu. The rail draws the account row and says when it was pressed,
+ * so the menu hangs off an anchor laid over the rail's foot: above it on the
+ * open rail, beside it on the collapsed one.
+ */
+export function Who({ open, onOpenChange, narrow }) {
+    const host = useHost();
+    const go = (p) => {
+        onOpenChange(false);
+        host.go(p);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, placement: narrow ? 'right-end' : 'top-start', allowFlip: true, stayInFrame: true, offset: 6, children: [_jsx(Popover.Anchor, { position: "absolute", l: 8, b: 8, width: narrow ? 48 : 256, height: 36, pointerEvents: "none" }), _jsx(Popover.Content, { role: "menu", "aria-label": "Account", items: "stretch", borderWidth: 1, elevation: "$2", px: "$1", py: "$1", width: 260, bg: "$panel", borderColor: "$borderColor", children: _jsxs(YStack, { gap: "$1", children: [_jsx(SizableText, { size: "$2", color: "$soft", px: "$2", py: "$1.5", numberOfLines: 1, children: host.person?.email || host.person?.name || '' }), _jsx(MenuRule, {}), _jsx(MenuRow, { label: "Settings", icon: _jsx(Settings, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'general' })) }), _jsx(MenuRow, { label: "Usage", icon: _jsx(Gauge, { size: 16 }), onPress: () => go(path({ kind: 'settings', section: 'usage' })) }), _jsx(MenuRow, { label: "View all plans", icon: _jsx(Sparkles, { size: 16 }), onPress: () => go(path({ kind: 'screen', screen: 'plans' })) }), _jsx(MenuRow, { label: "Get help", icon: _jsx(LifeBuoy, { size: 16 }), onPress: () => {
+                                onOpenChange(false);
+                                window.open(DOCS, '_blank', 'noopener,noreferrer');
+                            } }), host.signOut ? (_jsxs(_Fragment, { children: [_jsx(MenuRule, {}), _jsx(MenuRow, { label: "Log out", icon: _jsx(LogOut, { size: 16 }), onPress: () => {
+                                        onOpenChange(false);
+                                        host.signOut?.();
+                                    } })] })) : null] }) })] }));
+}

package/lib/forge.js

@@ -10,7 +10,6 @@ import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { ChevronDown, GitBranch, Plus, Settings, Workflow } from '@hanzogui/lucide-icons-2';
 import { Button, Dialog, DialogContent, DialogTitle, Input } from '@hanzo/ui';
 import { useEffect, useState } from 'react';
-import { revealAccount } from './account.js';
 import { add, arm, flows } from './api/auto.js';
 import { codebases, create } from './api/codebases.js';
 import { environments } from './api/environment.js';
@@ -19,7 +18,7 @@ import { boardKey, pinBoard, pinCodebase, readPending, writePending } from './ch
 import { useKept, useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
 import { path } from './route.js';
-import { Servers } from './mcp.js';
+import { Customize } from './customize/index.js';
 import { Sync } from './sync.js';
 import { grants } from './api/github.js';
 function Head({ title, says }) {
@@ -43,8 +42,9 @@ export function Forge({ screen }) {
         return _jsx(Automations, {});
     if (screen === 'sync')
         return _jsx(Sync, {});
+    // The fleet's native servers are Connectors → Discover now; the old address lands there.
     if (screen === 'mcp')
-        return _jsx(Servers, {});
+        return _jsx(Customize, { tab: "connectors", view: "discover" });
     if (screen === 'codebases')
         return _jsx(Codebases, {});
     if (screen === 'projects')
@@ -177,7 +177,7 @@ function Codebases() {
         pinCodebase(host.org, c);
         host.go('');
     };
-    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$6", fontWeight: "500", color: "$ink", children: host.org || 'Forge' }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Create and browse this organization\u2019s repositories." })] }), _jsxs(XStack, { render: "button", "aria-label": "Settings", shrink: 0, items: "center", gap: "$1.5", px: "$2", py: "$1", rounded: "$3", hoverStyle: { bg: '$hover' }, onPress: () => revealAccount(), children: [_jsx(Settings, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Settings" })] })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(XStack, { px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", shrink: 0, "$max-md": { display: 'none' }, children: _jsx(SizableText, { size: "$2", color: "$ink", children: "All repos" }) }), _jsx(YStack, { flex: 1, "$max-md": { display: 'none' } }), _jsx(YStack, { width: 240, minW: 0, shrink: 1, "$max-md": { width: 'auto', flex: 1 }, children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Find repo\u2026", "aria-label": "Find a repository", disabled: !signed }) }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync" }), _jsxs(Button, { size: "sm", disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "New"] })] }), list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's repositories." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : shown.length === 0 ? (_jsx(Note, { children: list.value.length === 0 ? 'No repositories yet.' : 'Nothing matches.' })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", items: "center", children: [_jsxs(XStack, { flex: 1, render: "button", "aria-label": "Sort by name", items: "center", gap: "$1", onPress: () => setSort('name'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Name" }), sort === 'name' ? _jsx(ChevronDown, { size: 12 }) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", width: 96, "$max-md": { display: 'none' }, children: "Environment" }), _jsxs(XStack, { render: "button", "aria-label": "Sort by last updated", items: "center", justify: "flex-end", gap: "$1", width: 140, onPress: () => setSort('updated'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Last updated" }), sort === 'updated' ? _jsx(ChevronDown, { size: 12 }) : null] })] }), slice.map((c) => (_jsxs(XStack, { render: "button", "aria-label": `Work on ${c.name}`, onPress: () => open(c), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(GitBranch, { size: 14 }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: c.name }), _jsx(SizableText, { size: "$1", color: "$soft", width: 96, "$max-md": { display: 'none' }, children: envOf.get(c.name) === 'ready' ? 'Ready' : envOf.get(c.name) === 'proposed' ? 'To review' : '—' }), _jsx(SizableText, { size: "$1", color: "$soft", width: 140, style: { textAlign: 'right' }, children: syncing.has(c.name) ? 'Syncing…' : when(c.updated) })] }, `${c.org}/${c.name}`))), _jsxs(XStack, { px: "$3", py: "$2", justify: "space-between", items: "center", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: `Showing ${from}–${to} of ${shown.length}` }), _jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Previous page", disabled: safePage === 0, onPress: () => setPage(safePage - 1), children: _jsx(SizableText, { size: "$1", color: safePage === 0 ? '$soft' : '$ink', children: "Prev" }) }), _jsx(SizableText, { size: "$1", color: "$soft", children: `${safePage + 1} / ${pages}` }), _jsx(XStack, { render: "button", "aria-label": "Next page", disabled: safePage >= pages - 1, onPress: () => setPage(safePage + 1), children: _jsx(SizableText, { size: "$1", color: safePage >= pages - 1 ? '$soft' : '$ink', children: "Next" }) })] })] })] }))] }), _jsx(NewRepo, { open: making, onOpenChange: setMaking, onCreate: async (name, description) => {
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", px: "$6", py: "$6", children: [_jsxs(YStack, { width: "100%", maxW: 1040, mx: "auto", gap: "$4", children: [_jsxs(XStack, { justify: "space-between", items: "flex-start", gap: "$4", children: [_jsxs(YStack, { gap: "$1", flex: 1, minW: 0, children: [_jsx(SizableText, { size: "$6", fontWeight: "500", color: "$ink", children: host.org || 'Forge' }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Create and browse this organization\u2019s repositories." })] }), _jsxs(XStack, { render: "button", "aria-label": "Settings", shrink: 0, items: "center", gap: "$1.5", px: "$2", py: "$1", rounded: "$3", hoverStyle: { bg: '$hover' }, onPress: () => host.go('-/settings/environments'), children: [_jsx(Settings, { size: 14 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Settings" })] })] }), _jsxs(XStack, { gap: "$2", items: "center", children: [_jsx(XStack, { px: "$2.5", py: "$1.5", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", shrink: 0, "$max-md": { display: 'none' }, children: _jsx(SizableText, { size: "$2", color: "$ink", children: "All repos" }) }), _jsx(YStack, { flex: 1, "$max-md": { display: 'none' } }), _jsx(YStack, { width: 240, minW: 0, shrink: 1, "$max-md": { width: 'auto', flex: 1 }, children: _jsx(Input, { value: q, onChangeText: setQ, placeholder: "Find repo\u2026", "aria-label": "Find a repository", disabled: !signed }) }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })), children: "Sync" }), _jsxs(Button, { size: "sm", disabled: !signed, onPress: () => setMaking(true), children: [_jsx(Plus, { size: 14 }), "New"] })] }), list.error ? (_jsx(Note, { children: list.error.message })) : !signed ? (_jsx(Note, { children: "Sign in to see this organization's repositories." })) : list.loading && list.value.length === 0 ? (_jsx(Note, { children: "Reading the forge\u2026" })) : shown.length === 0 ? (_jsx(Note, { children: list.value.length === 0 ? 'No repositories yet.' : 'Nothing matches.' })) : (_jsxs(YStack, { borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: [_jsxs(XStack, { px: "$3", py: "$2", gap: "$3", items: "center", children: [_jsxs(XStack, { flex: 1, render: "button", "aria-label": "Sort by name", items: "center", gap: "$1", onPress: () => setSort('name'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Name" }), sort === 'name' ? _jsx(ChevronDown, { size: 12 }) : null] }), _jsx(SizableText, { size: "$1", color: "$soft", width: 96, "$max-md": { display: 'none' }, children: "Environment" }), _jsxs(XStack, { render: "button", "aria-label": "Sort by last updated", items: "center", justify: "flex-end", gap: "$1", width: 140, onPress: () => setSort('updated'), children: [_jsx(SizableText, { size: "$1", color: "$soft", children: "Last updated" }), sort === 'updated' ? _jsx(ChevronDown, { size: 12 }) : null] })] }), slice.map((c) => (_jsxs(XStack, { render: "button", "aria-label": `Work on ${c.name}`, onPress: () => open(c), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: 1, borderColor: "$borderColor", hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineWidth: 2, outlineStyle: 'solid', outlineColor: '$outlineColor' }, children: [_jsx(GitBranch, { size: 14 }), _jsx(SizableText, { flex: 1, size: "$2", color: "$ink", numberOfLines: 1, children: c.name }), _jsx(SizableText, { size: "$1", color: "$soft", width: 96, "$max-md": { display: 'none' }, children: envOf.get(c.name) === 'ready' ? 'Ready' : envOf.get(c.name) === 'proposed' ? 'To review' : '—' }), _jsx(SizableText, { size: "$1", color: "$soft", width: 140, style: { textAlign: 'right' }, children: syncing.has(c.name) ? 'Syncing…' : when(c.updated) })] }, `${c.org}/${c.name}`))), _jsxs(XStack, { px: "$3", py: "$2", justify: "space-between", items: "center", borderTopWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", color: "$soft", children: `Showing ${from}–${to} of ${shown.length}` }), _jsxs(XStack, { gap: "$3", items: "center", children: [_jsx(XStack, { render: "button", "aria-label": "Previous page", disabled: safePage === 0, onPress: () => setPage(safePage - 1), children: _jsx(SizableText, { size: "$1", color: safePage === 0 ? '$soft' : '$ink', children: "Prev" }) }), _jsx(SizableText, { size: "$1", color: "$soft", children: `${safePage + 1} / ${pages}` }), _jsx(XStack, { render: "button", "aria-label": "Next page", disabled: safePage >= pages - 1, onPress: () => setPage(safePage + 1), children: _jsx(SizableText, { size: "$1", color: safePage >= pages - 1 ? '$soft' : '$ink', children: "Next" }) })] })] })] }))] }), _jsx(NewRepo, { open: making, onOpenChange: setMaking, onCreate: async (name, description) => {
                     const row = await create(t, name, description);
                     pinCodebase(host.org, row);
                     setMaking(false);

package/lib/git.d.ts

@@ -3,3 +3,7 @@ export declare function Git({ session, title, live }: {
     title: string;
     live: boolean;
 }): import("react").JSX.Element;
+/** A unified diff's lines, coloured by what each does: the Git tab's, and a transcript's edit card's. */
+export declare function Patch({ text }: {
+    text: string;
+}): import("react").JSX.Element;

package/lib/git.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * A run's Git tab: what it pushed, read from the forge. Diff is the net change
  * from its base, Review is the pull request it opened and what reviewers said,
@@ -44,7 +44,11 @@ export function Git({ session, title, live }) {
 function File({ change: f, first }) {
     const [open, setOpen] = useState(false);
     const lines = f.patch ? f.patch.split('\n') : [];
-    return (_jsxs(YStack, { borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", children: [_jsxs(XStack, { render: "button", "aria-label": `${open ? 'Hide' : 'Show'} ${f.path}`, onPress: () => setOpen(!open), items: "center", gap: "$2", px: "$3", py: "$2", hoverStyle: { bg: '$hover' }, children: [open ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }), _jsx(SizableText, { size: "$1", color: "$soft", width: 12, children: f.status[0].toUpperCase() }), _jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", numberOfLines: 1, style: { textAlign: 'left' }, children: f.from ? `${f.from} → ${f.path}` : f.path }), _jsx(SizableText, { size: "$1", color: "$green10", children: `+${f.additions}` }), _jsx(SizableText, { size: "$1", color: "$red10", children: `−${f.deletions}` })] }), open ? (_jsxs(YStack, { px: "$3", pb: "$2", overflow: "scroll", children: [lines.length ? (lines.map((l, i) => (_jsx(SizableText, { size: "$1", style: mono, color: l.startsWith('@@') ? '$soft' : l.startsWith('+') ? '$green10' : l.startsWith('-') ? '$red10' : '$ink', children: l || ' ' }, i)))) : (_jsx(SizableText, { size: "$1", color: "$soft", children: f.truncated ? 'Too large to show here.' : 'Binary file' })), lines.length && f.truncated ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "The rest of this file\u2019s change is too large to show here." })) : null] })) : null] }));
+    return (_jsxs(YStack, { borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", children: [_jsxs(XStack, { render: "button", "aria-label": `${open ? 'Hide' : 'Show'} ${f.path}`, onPress: () => setOpen(!open), items: "center", gap: "$2", px: "$3", py: "$2", hoverStyle: { bg: '$hover' }, children: [open ? _jsx(ChevronDown, { size: 14 }) : _jsx(ChevronRight, { size: 14 }), _jsx(SizableText, { size: "$1", color: "$soft", width: 12, children: f.status[0].toUpperCase() }), _jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", numberOfLines: 1, style: { textAlign: 'left' }, children: f.from ? `${f.from} → ${f.path}` : f.path }), _jsx(SizableText, { size: "$1", color: "$green10", children: `+${f.additions}` }), _jsx(SizableText, { size: "$1", color: "$red10", children: `−${f.deletions}` })] }), open ? (_jsxs(YStack, { px: "$3", pb: "$2", overflow: "scroll", children: [lines.length ? (_jsx(Patch, { text: f.patch })) : (_jsx(SizableText, { size: "$1", color: "$soft", children: f.truncated ? 'Too large to show here.' : 'Binary file' })), lines.length && f.truncated ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "The rest of this file\u2019s change is too large to show here." })) : null] })) : null] }));
+}
+/** A unified diff's lines, coloured by what each does: the Git tab's, and a transcript's edit card's. */
+export function Patch({ text }) {
+    return (_jsx(_Fragment, { children: text.split('\n').map((l, i) => (_jsx(SizableText, { size: "$1", style: mono, color: l.startsWith('@@') ? '$soft' : l.startsWith('+') ? '$green10' : l.startsWith('-') ? '$red10' : '$ink', children: l || ' ' }, i))) }));
 }
 function label(v) {
     return v === 'diff' ? 'Diff' : v === 'review' ? 'Review' : 'Commits';

package/lib/host.d.ts

@@ -9,6 +9,7 @@
  */
 import { type ReactNode } from 'react';
 import type { Target } from './api/call.ts';
+import type { Theme } from './api/pref.ts';
 export interface Person {
     name: string;
     email: string;
@@ -26,6 +27,10 @@ export interface Host {
     memberships?: readonly string[];
     /** Stay on this page and scope every read to `org`. */
     chooseOrg?: (org: string) => void;
+    /** The page's theme as last chosen, for a host that can change it. */
+    theme?: Theme;
+    /** Paint the page in `theme`. A host without it keeps its own, and Settings offers no choice. */
+    chooseTheme?: (theme: Theme) => void;
     /** Who is signed in, or null. */
     person: Person | null;
     /** Whether the person administers `org`: an admin publishes to main, anyone else opens a review. */

package/lib/landing.d.ts

@@ -8,6 +8,16 @@ export declare const MODES: readonly [{
     readonly label: 'Plan';
     readonly hint: 'Plans the change and writes nothing';
 }];
+export declare const EFFORTS: readonly [{
+    readonly id: 'low';
+    readonly label: 'Low';
+}, {
+    readonly id: 'medium';
+    readonly label: 'Medium';
+}, {
+    readonly id: 'high';
+    readonly label: 'High';
+}];
 export declare function Landing({ onStarted }: {
     onStarted: (session: string) => void;
 }): import("react").JSX.Element;

package/lib/landing.js

@@ -1,8 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * New: the empty state. A heading at the top of the column, and at the foot of
- * the pane the composer — where the run goes (the sandbox or one of the org's
- * machines), which repository and branch it starts from, and the ask itself.
+ * the pane the composer — where the run goes (Cloud: the sandbox with the
+ * codebase's environment; or one of the org's machines, under remote control),
+ * which repository and branch it starts from, and the ask itself.
  * Under it: attach, dictate, the mode, and the model and effort on the right.
  *
  * Sending starts a coding run and opens it. The choices a person made here are
@@ -13,7 +14,7 @@ import { Cloud, Monitor } from '@hanzogui/lucide-icons-2';
 import { Button } from '@hanzo/ui';
 import { ModeSelect } from '@hanzo/ui/agents';
 import { Composer, EmptyPrompt } from '@hanzo/ui/chat';
-import { BranchSelect, ChipSelect, HanzoMark, RepoSelect } from '@hanzo/ui/product';
+import { BranchSelect, ChipSelect, FooterLink, HanzoMark, RepoSelect } from '@hanzo/ui/product';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { start, unhonoured } from './api/coding.js';
 import { asRepo, chosen, codebases, one } from './api/codebases.js';
@@ -24,6 +25,7 @@ import { ready, SANDBOX } from './api/places.js';
 import { isForge } from './choice.js';
 import { useKept, usePlaces, useRead } from './data.js';
 import { useHost, useTarget } from './host.js';
+import { usePrefs } from './prefs.js';
 import { Publish } from './publish.js';
 import { path } from './route.js';
 import { Attach, compose, Dictate, Files } from './tools.js';
@@ -32,7 +34,7 @@ export const MODES = [
     { id: 'build', label: 'Build', hint: 'Edits, commits and pushes a branch' },
     { id: 'plan', label: 'Plan', hint: 'Plans the change and writes nothing' },
 ];
-const EFFORTS = [
+export const EFFORTS = [
     { id: 'low', label: 'Low' },
     { id: 'medium', label: 'Medium' },
     { id: 'high', label: 'High' },
@@ -43,7 +45,10 @@ export function Landing({ onStarted }) {
     const host = useHost();
     const t = useTarget();
     const signed = Boolean(host.person);
-    const [kept, keep] = useKept(`hanzo.build.new.${host.org ?? 'none'}`, FIRST);
+    const { prefs } = usePrefs();
+    const [stored, keep] = useKept(`hanzo.build.new.${host.org ?? 'none'}`, null);
+    // Nothing chosen here yet: start from the person's coding defaults (Settings → Code).
+    const kept = stored ?? { ...FIRST, ...prefs.code };
     const set = (patch) => keep({ ...kept, ...patch });
     const [draft, setDraft] = useState(kept.ask || '');
     const [files, setFiles] = useState([]);
@@ -51,6 +56,9 @@ export function Landing({ onStarted }) {
     const [note, setNote] = useState('');
     const [adding, setAdding] = useState(null);
     const [offering, setOffering] = useState(false);
+    // The repository list is read again each time it opens; Refresh reads it again while open.
+    const [picking, setPicking] = useState(false);
+    const [round, setRound] = useState(0);
     // A codebase or an issue hands its words over once. Left in the kept choice,
     // every later visit to New would put them back.
     useEffect(() => {
@@ -122,21 +130,29 @@ export function Landing({ onStarted }) {
         const run = await start(t, { prompt: SETUP, repo: codebase, mode: 'setup' });
         onStarted(run.session);
     };
+    // Cloud is the sandbox, set up by the chosen codebase's environment.
+    const setUp = codebase && env.value
+        ? env.value.state === 'ready'
+            ? `${codebase} environment`
+            : env.value.state === 'proposed'
+                ? `${codebase} environment proposed`
+                : `no ${codebase} environment yet`
+        : '';
     const placeItems = useMemo(() => (places.value.length ? places.value : [SANDBOX]).map((p) => ({
         id: p.id || 'sandbox',
-        label: p.label,
-        hint: p.id ? [p.status, p.capacity].filter(Boolean).join(' · ') : 'The platform’s own sandbox',
+        label: p.id ? p.label : 'Cloud',
+        hint: p.id ? ['Remote control', p.status, p.capacity].filter(Boolean).join(' · ') : ['Hanzo sandbox', setUp].filter(Boolean).join(' · '),
         disabled: !ready(p),
         place: p,
-    })), [places.value]);
+    })), [places.value, setUp]);
     const branch = kept.branch || kept.repo?.default_branch || 'main';
-    const head = (_jsxs(XStack, { gap: 6, items: "center", flexWrap: "wrap", children: [_jsx(ChipSelect, { name: "Where the run runs", icon: place.id ? _jsx(Monitor, { size: 13 }) : _jsx(Cloud, { size: 13 }), label: place.id ? place.label : 'Default', chosen: placeItems.find((i) => i.place.id === place.id) ?? null, items: placeItems, onChange: (i) => set({ place: i.place.id }), placeholder: "Search machines\u2026", loading: places.loading, error: places.error?.message ?? null, footer: _jsx(SizableText, { size: "$1", color: "$soft", children: "A run on a machine uses that machine\u2019s checkout and credentials." }) }), _jsx(RepoSelect, { value: isForge(kept.repo) ? kept.repo : null, onChange: (r) => {
+    const head = (_jsxs(XStack, { gap: 6, items: "center", flexWrap: "wrap", children: [_jsx(ChipSelect, { name: "Where the run runs", icon: place.id ? _jsx(Monitor, { size: 13 }) : _jsx(Cloud, { size: 13 }), label: place.id ? place.label : 'Cloud', chosen: placeItems.find((i) => i.place.id === place.id) ?? null, items: placeItems, onChange: (i) => set({ place: i.place.id }), placeholder: "Search machines\u2026", loading: places.loading, error: places.error?.message ?? null, footer: _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$1", color: "$ink", children: "Set up remote control" }), _jsxs(SizableText, { size: "$1", color: "$soft", children: ["Run", ' ', _jsx(SizableText, { size: "$1", color: "$ink", style: { fontFamily: 'var(--f-mono, ui-monospace, monospace)' }, children: "hanzo link" }), ' ', "on a machine: it joins this list, and a run there uses its checkout and credentials."] })] }) }), _jsx(RepoSelect, { open: picking, onOpenChange: setPicking, value: isForge(kept.repo) ? kept.repo : null, onChange: (r) => {
                     const row = known.current.get(r.name) ?? chosen(r);
                     set({ repo: row, branch: row.default_branch });
                 }, load: loadRepos, troubleshoot: {
-                    label: 'Browse codebases',
-                    onPress: () => host.go(path({ kind: 'screen', screen: 'codebases' })),
-                }, note: "Repositories on the forge. Type to search.", action: {
+                    label: 'Missing a GitHub repository? Bring it onto the forge',
+                    onPress: () => host.go(path({ kind: 'screen', screen: 'sync' })),
+                }, connect: _jsx(XStack, { justify: "flex-end", children: _jsx(FooterLink, { label: "Refresh list", onPress: () => setRound((n) => n + 1) }) }), note: "Repositories on the forge. Type to search.", action: {
                     label: 'Add to project',
                     onPress: (r) => {
                         const row = known.current.get(r.name);
@@ -147,9 +163,9 @@ export function Landing({ onStarted }) {
                             name: r.name,
                         });
                     },
-                }, placeholder: "Codebase", disabled: !signed }), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null, _jsx(Files, { files: files, onFiles: setFiles })] }));
+                }, placeholder: "Codebase", disabled: !signed }, round), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null, _jsx(Files, { files: files, onFiles: setFiles })] }));
     const foot = (_jsxs(XStack, { flex: 1, items: "center", gap: "$2", flexWrap: "wrap", rowGap: "$1", children: [_jsx(Attach, { files: files, onFiles: setFiles, onNote: setNote }), _jsx(Dictate, { onText: (said) => setDraft((d) => (d ? `${d} ${said}` : said)), onNote: setNote }), _jsx(ModeSelect, { modes: MODES, value: kept.mode, onChange: (m) => set({ mode: m }), bg: "transparent", minH: 24, px: "$1.5", self: "center" }), _jsx(XStack, { flex: 1 }), _jsx(ChipSelect, { quiet: true, name: "Model", label: catalog.value.find((m) => m.id === kept.model)?.label ?? 'Enso', chosen: catalog.value.find((m) => m.id === kept.model) ?? null, items: catalog.value, onChange: (m) => set({ model: m.id }), placeholder: "Search models\u2026", placement: "top-end", loading: catalog.loading, error: catalog.error?.message ?? null }), _jsx(ChipSelect, { quiet: true, name: "Effort", label: EFFORTS.find((e) => e.id === kept.effort)?.label ?? 'Medium', chosen: EFFORTS.find((e) => e.id === kept.effort) ?? null, items: EFFORTS, onChange: (e) => set({ effort: e.id }), placement: "top-end", width: 180 })] }));
-    return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", px: "$4", children: [_jsxs(YStack, { width: "100%", maxW: COLUMN, flex: 1, minH: 0, children: [_jsx(EmptyPrompt, { title: "What\u2019s up next?", mark: _jsx(HanzoMark, { size: 18 }), column: COLUMN }), _jsx(YStack, { flex: 1 }), _jsxs(YStack, { pb: "$2", gap: "$2", children: [env.value && env.value.state !== 'ready' && !place.id ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: env.value.state === 'proposed'
+    return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", px: "$4", children: [_jsxs(YStack, { width: "100%", maxW: COLUMN, flex: 1, minH: 0, children: [_jsx(EmptyPrompt, { title: prefs.callName ? `What’s up next, ${prefs.callName}?` : 'What’s up next?', mark: _jsx(HanzoMark, { size: 18 }), column: COLUMN }), _jsx(YStack, { flex: 1 }), _jsxs(YStack, { pb: "$2", gap: "$2", children: [env.value && env.value.state !== 'ready' && !place.id ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: env.value.state === 'proposed'
                                             ? `A proposed environment for ${codebase} is waiting for review.`
                                             : `${codebase} has no environment yet, so every run starts it bare.` }), env.value.state === 'proposed' && env.value.session ? (_jsx(Button, { size: "sm", variant: "outline", onPress: () => host.go(env.value.session), children: "Review" })) : (_jsx(Button, { size: "sm", onPress: () => setOffering(true), children: "Set up environment" }))] })) : null, note || unhonoured(kept.mode, place.id) ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(kept.mode, place.id) })) : null, _jsx(Composer, { inline: true, value: draft, onChange: setDraft, onSend: () => void send(), busy: busy, placeholder: "Describe a task or ask a question", label: "Describe a task or ask a question", head: head, foot: foot })] })] }), _jsx(Publish, { source: adding, onClose: () => setAdding(null) }), codebase ? (_jsx(SetupDialog, { repo: codebase, open: offering, onOpenChange: setOffering, onStart: setup, onSaved: () => {
                     setOffering(false);

package/lib/markdown.d.ts

@@ -0,0 +1,49 @@
+/**
+ * The markdown an agent writes, read into blocks and inline pieces: paragraphs,
+ * headings, lists, quotes, rules, tables and fenced code; inline code, bold,
+ * italics and links. What prose.tsx draws, as plain values.
+ *
+ * A link keeps an address only when it is http(s); anything else, and every
+ * image, is its words.
+ */
+export type Block = {
+    kind: 'paragraph';
+    text: string;
+} | {
+    kind: 'heading';
+    level: number;
+    text: string;
+} | {
+    kind: 'code';
+    lang: string;
+    text: string;
+} | {
+    kind: 'list';
+    ordered: boolean;
+    start: number;
+    items: {
+        text: string;
+        depth: number;
+    }[];
+} | {
+    kind: 'quote';
+    text: string;
+} | {
+    kind: 'rule';
+} | {
+    kind: 'table';
+    head: string[];
+    rows: string[][];
+};
+/** The blocks of a markdown text, in order. */
+export declare function blocks(md: string): Block[];
+export type Span = {
+    kind: 'text' | 'code' | 'strong' | 'em';
+    text: string;
+} | {
+    kind: 'link';
+    text: string;
+    href: string;
+};
+/** A line's inline pieces. A link to anything but http(s) is its words. */
+export declare function spans(text: string): Span[];

package/lib/markdown.js

@@ -0,0 +1,123 @@
+const FENCE = /^\s{0,3}(```+|~~~+)\s*([\w+#.-]*)\s*$/;
+const HEADING = /^\s{0,3}(#{1,6})\s+(.*?)\s*#*\s*$/;
+const ITEM = /^(\s*)([-*+]|\d{1,9}[.)])\s+(.*)$/;
+const RULE = /^\s{0,3}([-*_])(\s*\1){2,}\s*$/;
+const QUOTE = /^\s{0,3}>\s?(.*)$/;
+const ROW = /^\s*\|(.*)\|\s*$/;
+const DIVIDER = /^\s*\|?\s*:?-{3,}:?\s*(\|\s*:?-{3,}:?\s*)*\|?\s*$/;
+const cells = (line) => (ROW.exec(line)?.[1] ?? line).split('|').map((c) => c.trim());
+/** The blocks of a markdown text, in order. */
+export function blocks(md) {
+    const lines = md.replace(/\r\n?/g, '\n').split('\n');
+    const out = [];
+    let para = [];
+    const flush = () => {
+        if (para.length)
+            out.push({ kind: 'paragraph', text: para.join(' ').trim() });
+        para = [];
+    };
+    for (let i = 0; i < lines.length; i++) {
+        const line = lines[i];
+        const fence = FENCE.exec(line);
+        if (fence) {
+            flush();
+            const body = [];
+            i++;
+            while (i < lines.length && !lines[i].trim().startsWith(fence[1]))
+                body.push(lines[i++]);
+            out.push({ kind: 'code', lang: fence[2] ?? '', text: body.join('\n') });
+            continue;
+        }
+        if (!line.trim()) {
+            flush();
+            continue;
+        }
+        const heading = HEADING.exec(line);
+        if (heading) {
+            flush();
+            out.push({ kind: 'heading', level: heading[1].length, text: heading[2] });
+            continue;
+        }
+        if (RULE.test(line)) {
+            flush();
+            out.push({ kind: 'rule' });
+            continue;
+        }
+        if (ROW.test(line) && DIVIDER.test(lines[i + 1] ?? '')) {
+            flush();
+            const head = cells(line);
+            const rows = [];
+            i += 2;
+            while (i < lines.length && ROW.test(lines[i]))
+                rows.push(cells(lines[i++]));
+            i--;
+            out.push({ kind: 'table', head, rows });
+            continue;
+        }
+        const quote = QUOTE.exec(line);
+        if (quote) {
+            flush();
+            const body = [quote[1]];
+            while (i + 1 < lines.length && QUOTE.test(lines[i + 1]))
+                body.push(QUOTE.exec(lines[++i])[1]);
+            out.push({ kind: 'quote', text: body.join(' ').trim() });
+            continue;
+        }
+        const item = ITEM.exec(line);
+        if (item) {
+            flush();
+            const ordered = /\d/.test(item[2]);
+            const items = [];
+            const start = ordered ? parseInt(item[2], 10) : 1;
+            let j = i;
+            while (j < lines.length) {
+                const m = ITEM.exec(lines[j]);
+                if (m) {
+                    items.push({ text: m[3], depth: Math.min(3, Math.floor(m[1].replace(/\t/g, '  ').length / 2)) });
+                    j++;
+                    continue;
+                }
+                // A line indented under an item continues it.
+                if (lines[j].trim() && /^\s{2,}/.test(lines[j]) && items.length) {
+                    items[items.length - 1].text += ` ${lines[j].trim()}`;
+                    j++;
+                    continue;
+                }
+                break;
+            }
+            out.push({ kind: 'list', ordered, start, items });
+            i = j - 1;
+            continue;
+        }
+        para.push(line.trim());
+    }
+    flush();
+    return out;
+}
+const INLINE = /(`+)([^`]+?)\1|!?\[([^\]]+)\]\(((?:[^()\s]|\([^()\s]*\))+)(?:\s+"[^"]*")?\)|\*\*(.+?)\*\*|__(.+?)__|\*([^*\s](?:[^*]*[^*\s])?)\*|(?<![\w])_([^_\s](?:[^_]*[^_\s])?)_(?![\w])|(https?:\/\/[^\s<>()]+[^\s<>().,;:!?'"])/g;
+const safe = (href) => (/^https?:\/\/[^\s]+$/i.test(href) ? href : '');
+/** A line's inline pieces. A link to anything but http(s) is its words. */
+export function spans(text) {
+    const out = [];
+    let at = 0;
+    for (const m of text.matchAll(INLINE)) {
+        if (m.index > at)
+            out.push({ kind: 'text', text: text.slice(at, m.index) });
+        if (m[2] !== undefined)
+            out.push({ kind: 'code', text: m[2] });
+        else if (m[3] !== undefined) {
+            const href = safe(m[4]);
+            out.push(href && !m[0].startsWith('!') ? { kind: 'link', text: m[3], href } : { kind: 'text', text: m[3] });
+        }
+        else if (m[5] !== undefined || m[6] !== undefined)
+            out.push({ kind: 'strong', text: (m[5] ?? m[6]) });
+        else if (m[7] !== undefined || m[8] !== undefined)
+            out.push({ kind: 'em', text: (m[7] ?? m[8]) });
+        else if (m[9] !== undefined)
+            out.push({ kind: 'link', text: m[9], href: m[9] });
+        at = m.index + m[0].length;
+    }
+    if (at < text.length)
+        out.push({ kind: 'text', text: text.slice(at) });
+    return out;
+}

package/lib/plans.d.ts

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

package/lib/plans.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Plans: every plan this brand sells, priced as the checkout will charge, with
+ * the one the organization is on marked, and the move to another.
+ *
+ * Buying charges a saved card for the plan's first period at the catalog's
+ * price; the platform sells one paid plan at a time, so a move between paid
+ * plans is the current one ending first. Going back to Free is ending the paid
+ * plan at the close of the period already paid for.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Check, ChevronLeft } from '@hanzogui/lucide-icons-2';
+import { Button, Dialog, DialogContent, DialogTitle } from '@hanzo/ui';
+import { useState } from 'react';
+import { cancel, chosen, current, label, methods, money, plans, subscribe, subscriptions } from './api/billing.js';
+import { useRead } from './data.js';
+import { useHost, useTarget } from './host.js';
+import { path } from './route.js';
+import { AddCard } from './settings/card.js';
+import { day } from './settings/ui.js';
+/** What a plan costs a month on a term, and what the term charges at once. */
+function price(p, term) {
+    const month = term === 'year' && p.yearly ? p.yearly : p.monthly;
+    return { month, now: term === 'year' && p.yearly ? p.yearly * 12 : p.monthly };
+}
+export function Plans() {
+    const host = useHost();
+    const t = useTarget();
+    const signed = Boolean(host.person);
+    const list = useRead(() => plans(t), [], [t]);
+    const subs = useRead(signed ? () => subscriptions(t) : null, [], [t, signed]);
+    const cards = useRead(signed ? () => methods(t) : null, [], [t, signed]);
+    const [term, setTerm] = useState('month');
+    const [buying, setBuying] = useState(null);
+    const [leaving, setLeaving] = useState(false);
+    const [adding, setAdding] = useState(false);
+    const [working, setWorking] = useState(false);
+    const [note, setNote] = useState('');
+    const on = current(subs.value);
+    const card = chosen(cards.value);
+    const yearly = list.value.some((p) => p.yearly > 0);
+    const free = (p) => p.monthly === 0 && !p.sales;
+    const mine = (p) => signed && (on ? p.id === on.plan : free(p));
+    // Until the plan and the cards are read, no move is offered: it would be a guess.
+    const settled = signed && !(subs.loading && !subs.value.length) && !(cards.loading && !cards.value.length);
+    const act = async (what) => {
+        setWorking(true);
+        setNote('');
+        try {
+            setNote(await what());
+            subs.reload();
+        }
+        catch (e) {
+            setNote(e instanceof Error ? e.message : 'That did not work');
+        }
+        finally {
+            setWorking(false);
+            setBuying(null);
+            setLeaving(false);
+        }
+    };
+    /** The one thing a card can do, or a line saying why it does nothing. */
+    const move = (p) => {
+        if (mine(p)) {
+            return (_jsx(Button, { size: "sm", variant: "outline", disabled: true, children: "Current plan" }));
+        }
+        if (p.sales)
+            return _jsx(Line, { children: "Priced with our team for your organization." });
+        if (!signed)
+            return _jsx(Line, { children: "Sign in to choose a plan." });
+        if (!host.admin)
+            return _jsx(Line, { children: "An org admin changes the plan." });
+        if (!settled)
+            return null;
+        if (free(p)) {
+            if (!on)
+                return null;
+            if (on.ending)
+                return _jsx(Line, { children: `You move to ${p.name} when ${on.name} ends on ${day(on.ends)}.` });
+            return (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setLeaving(true), children: `Switch to ${p.name}` }));
+        }
+        if (on && on.price > 0)
+            return _jsx(Line, { children: `One paid plan at a time: ${on.name} ends before ${p.name} begins.` });
+        if (!card) {
+            return (_jsx(Button, { size: "sm", variant: "outline", onPress: () => setAdding(true), children: "Add a card to upgrade" }));
+        }
+        return (_jsx(Button, { size: "sm", variant: p.popular ? 'primary' : 'outline', onPress: () => setBuying(p), children: `Upgrade to ${p.name}` }));
+    };
+    return (_jsxs(YStack, { flex: 1, minH: 0, overflow: "scroll", children: [_jsxs(YStack, { width: "100%", maxW: 1100, mx: "auto", px: "$5", py: "$5", gap: "$5", children: [_jsxs(XStack, { render: "button", "aria-label": "Back to billing", items: "center", gap: "$1", self: "flex-start", onPress: () => host.go(path({ kind: 'settings', section: 'billing' })), children: [_jsx(ChevronLeft, { size: 16 }), _jsx(SizableText, { size: "$2", color: "$soft", children: "Billing" })] }), _jsxs(XStack, { items: "flex-end", gap: "$4", flexWrap: "wrap", children: [_jsxs(YStack, { flex: 1, minW: 240, gap: "$1", children: [_jsx(SizableText, { render: "h1", size: "$7", color: "$ink", children: "Plans that grow with you" }), _jsx(SizableText, { size: "$2", color: "$soft", children: !signed
+                                            ? 'Sign in to see the plan you are on.'
+                                            : on
+                                                ? `${host.org ?? 'This organization'} is on ${on.name}.`
+                                                : `${host.org ?? 'This organization'} is on the free plan.` })] }), yearly ? (_jsx(XStack, { role: "radiogroup", "aria-label": "Billing period", p: "$1", gap: "$1", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", children: ['month', 'year'].map((k) => (_jsx(XStack, { render: "button", role: "radio", "aria-checked": term === k, "aria-label": k === 'month' ? 'Monthly' : 'Yearly', onPress: () => setTerm(k), px: "$3", py: "$1.5", rounded: "$10", bg: term === k ? '$hover' : 'transparent', children: _jsx(SizableText, { size: "$2", color: term === k ? '$ink' : '$soft', children: k === 'month' ? 'Monthly' : 'Yearly' }) }, k))) })) : null] }), list.error ? (_jsx(Line, { children: list.error.message })) : list.loading && !list.value.length ? (_jsx(Line, { children: "Reading plans\u2026" })) : list.value.length === 0 ? (_jsx(Line, { children: "This brand sells no plans." })) : (_jsx(XStack, { flexWrap: "wrap", gap: "$4", children: list.value.map((p) => {
+                            const cost = price(p, term);
+                            return (_jsxs(YStack, { "aria-label": `${p.name} plan`, flex: 1, minW: 240, maxW: 360, "$max-sm": { maxW: '100%' }, gap: "$3", p: "$4", rounded: "$4", borderWidth: 1, borderColor: mine(p) || p.popular ? '$ink' : '$borderColor', bg: "$panel", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, size: "$5", color: "$ink", children: p.name }), mine(p) ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Current" })) : p.popular ? (_jsx(SizableText, { size: "$1", color: "$soft", children: "Popular" })) : null] }), p.description ? (_jsx(SizableText, { size: "$2", color: "$soft", children: p.description })) : null, _jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { size: "$7", color: "$ink", children: p.sales ? 'Custom' : cost.month === 0 ? 'Free' : money(cost.month, p.currency) }), _jsx(SizableText, { size: "$1", color: "$soft", children: p.sales
+                                                    ? 'Talk to us'
+                                                    : cost.month === 0
+                                                        ? 'Forever'
+                                                        : `${p.perSeat ? 'per seat, ' : ''}a month${term === 'year' && p.yearly ? `, ${money(cost.now, p.currency)} billed yearly` : ''}` })] }), _jsx(XStack, { children: move(p) }), p.features.length ? (_jsx(YStack, { gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", pt: "$3", children: p.features.map((f) => (_jsxs(XStack, { gap: "$2", items: "flex-start", children: [_jsx(YStack, { pt: 2, children: _jsx(Check, { size: 14 }) }), _jsx(SizableText, { flex: 1, size: "$2", color: "$soft", children: f })] }, f))) })) : null] }, p.id));
+                        }) })), note ? (_jsx(SizableText, { size: "$2", color: "$soft", role: "status", children: note })) : null] }), _jsx(Dialog, { open: Boolean(buying), onOpenChange: (o) => (o ? undefined : setBuying(null)), children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: buying ? `Upgrade to ${buying.name}` : 'Upgrade' }), buying && card ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${label(card)} is charged ${money(price(buying, term).now, buying.currency)} now, and again every ${term} until you cancel.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setBuying(null), children: "Not now" }), _jsx(Button, { size: "sm", disabled: working, onPress: () => void act(async () => {
+                                                await subscribe(t, { plan: buying.id, interval: yearly && buying.yearly ? term : 'month', method: card.id });
+                                                return `${host.org ?? 'This organization'} is on ${buying.name}`;
+                                            }), children: "Upgrade" })] })] })) : null] }) }), _jsx(Dialog, { open: leaving, onOpenChange: setLeaving, children: _jsxs(DialogContent, { maxW: 420, showCloseButton: false, children: [_jsx(DialogTitle, { children: "Switch to the free plan?" }), on ? (_jsxs(YStack, { gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", children: `${on.name} stays on until ${day(on.ends) || 'the end of this period'}, and nothing is charged after that.` }), _jsxs(XStack, { gap: "$2", justify: "flex-end", children: [_jsx(Button, { size: "sm", variant: "ghost", onPress: () => setLeaving(false), children: `Keep ${on.name}` }), _jsx(Button, { size: "sm", variant: "destructive", disabled: working, onPress: () => void act(async () => {
+                                                await cancel(t, on.id);
+                                                return `${on.name} ends on ${day(on.ends)}`;
+                                            }), children: "Switch" })] })] })) : null] }) }), _jsx(AddCard, { open: adding, onOpenChange: setAdding, onSaved: (m) => {
+                    cards.reload();
+                    setNote(`${label(m)} is saved`);
+                } })] }));
+}
+function Line({ children }) {
+    return (_jsx(SizableText, { size: "$2", color: "$soft", children: children }));
+}

package/lib/prefs.d.ts

@@ -0,0 +1,30 @@
+/**
+ * The person's own settings, read once for the whole builder and shared by
+ * everything that follows them: Settings writes them, New starts from the
+ * coding defaults and says the name, dictation listens in the chosen language,
+ * and the page takes the theme, the text size and the motion.
+ *
+ * The last document read is kept in this browser, per org, so the page is
+ * drawn the person's way before the platform answers. A save shows at once and
+ * is taken back, key by key, if the platform refuses it.
+ */
+import { type ReactNode } from 'react';
+import { type Patch, type Prefs } from './api/pref.ts';
+export interface PrefState {
+    prefs: Prefs;
+    /** The first read is still in flight. */
+    loading: boolean;
+    error: Error | null;
+    /** Merge a change in and keep it. Throws the platform's refusal. */
+    save: (patch: Patch) => Promise<void>;
+}
+export declare function PrefsProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function usePrefs(): PrefState;
+/** The type scale each text size is drawn at. Medium is the design system's own. */
+export declare const SCALE: {
+    readonly small: 0.9;
+    readonly medium: 1;
+    readonly large: 1.15;
+};