@hanzo/build 0.2.59 → 0.2.61

package/lib/landing.js

@@ -16,10 +16,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SizableText, XStack, YStack } from '@hanzo/gui';
 import { Cloud, Monitor } from '@hanzogui/lucide-icons-2';
 import { Button } from '@hanzo/ui';
-import { ModeSelect } from '@hanzo/ui/agents';
 import { BranchSelect, ChipSelect, FooterLink, RepoSelect } from '@hanzo/ui/product';
 import { useLimits } from '@hanzo/ui/product/useLimits';
-import { useDictation, useVoice } from '@hanzo/voice';
+import { useDictation, useTalk, useVoice } from '@hanzo/voice';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { start, unhonoured } from './api/coding.js';
 import { asRepo, chosen, codebases, one } from './api/codebases.js';
@@ -36,7 +35,10 @@ import { useMind } from './mind.js';
 import { usePrefs } from './prefs.js';
 import { Publish } from './publish.js';
 import { path } from './route.js';
+import { useCarry } from './carry.js';
+import { Suggestions, useSuggestions } from './suggestions.js';
 import { MEASURE, Prompt, useEar } from './prompt.js';
+import { Monitor as Device } from '@hanzogui/lucide-icons-2';
 import { compose, Files, pick } from './tools.js';
 import { useSpoken } from './voice.js';
 /** One vocabulary for the mode, on New and in a workspace. */
@@ -77,7 +79,7 @@ export function Landing({ onStarted }) {
     const host = useHost();
     const t = useTarget();
     const signed = Boolean(host.person);
-    const { prefs } = usePrefs();
+    const { prefs, save: savePrefs } = usePrefs();
     const [stored, keep] = useKept(`hanzo.build.new.${host.org ?? 'none'}`, null);
     // What was chosen here, over the person's coding defaults (Settings → Code), over
     // the first run's. Field by field: a codebase or an issue handed over from its own
@@ -107,9 +109,14 @@ export function Landing({ onStarted }) {
     }, []);
     const places = usePlaces(t, signed);
     // The model and effort Chat shares, and dictation into the ask.
-    const mind = useMind(t);
     const { limits } = useLimits(signed ? (signal) => readLimits(t, signal) : null, t);
+    const mind = useMind(t, limits?.plan);
     const voice = useVoice({ speech: useEar(t), language: useSpoken(), ...useDictation(draft, setDraft) });
+    const talk = useTalk({ baseUrl: t.api, token: () => t.token(), ...(t.org ? { org: t.org } : {}) });
+    // What the run carries beside the ask: skills, memory and the mode, as Chat's turns do.
+    const carry = useCarry(t, '', (tab) => host.go(path({ kind: 'customize', tab })));
+    const mode = carry.gear.gear.mode === 'plan' ? 'plan' : 'build';
+    const hints = useSuggestions(t);
     // The chosen codebase's environment, so New can say when it has none yet.
     const codebase = isForge(kept.repo) ? kept.repo.name : '';
     // The org's repositories on the forge: what a run and an environment can name.
@@ -161,7 +168,7 @@ export function Landing({ onStarted }) {
             return;
         }
         // A plan or a setup routed to a machine is refused here, in its own words, before it leaves the page.
-        const why = unhonoured(kept.mode, place.id);
+        const why = unhonoured(mode, place.id);
         if (why) {
             setNote(why);
             return;
@@ -175,13 +182,13 @@ export function Landing({ onStarted }) {
         setNote('');
         try {
             const run = await start(t, {
-                prompt: compose(draft.trim(), files),
+                prompt: compose([draft.trim(), carry.text].filter(Boolean).join('\n\n---\n'), files),
                 // The name alone. The org rides the request, and a slash is not a repo name.
                 // An empty base or place is not sent: the default branch, and the sandbox.
                 repo: repo?.name ?? hub?.full_name,
                 base: repo ? kept.branch : hub ? kept.branch || hub.default_branch : undefined,
                 targetId: place.id,
-                mode: kept.mode,
+                mode,
                 model: mind.model,
                 effort: mind.effort,
                 issue,
@@ -237,7 +244,7 @@ export function Landing({ onStarted }) {
         place: p,
     })), [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 : 'Cloud', chosen: placeItems.find((i) => i.place.id === place.id), 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) || isHub(kept.repo) ? kept.repo : null, onChange: (r) => {
+    const where = (_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), 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) || isHub(kept.repo) ? kept.repo : null, onChange: (r) => {
                     const hub = r.github ? hubs.current.get((r.full_name ?? "").toLowerCase()) : undefined;
                     setIssue(0);
                     if (hub) {
@@ -260,10 +267,23 @@ export function Landing({ onStarted }) {
                             name: r.name,
                         });
                     },
-                }, placeholder: "Choose a project", disabled: !signed }, round), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null, _jsx(Files, { files: files, onFiles: setFiles })] }));
+                }, placeholder: "Choose a project", disabled: !signed }, round), isForge(kept.repo) ? _jsx(BranchSelect, { value: branch, onChange: (b) => set({ branch: b }), load: loadBranches }) : null] }));
+    const head = files.length ? (_jsx(XStack, { gap: 6, items: "center", flexWrap: "wrap", children: _jsx(Files, { files: files, onFiles: setFiles }) })) : undefined;
+    // The machines a run can go to, as the `+` menu's Devices: the same choice as `where`'s.
+    const devices = {
+        rows: placeItems.map((i) => ({ id: i.place.id || 'sandbox', label: i.label, note: i.hint, icon: _jsx(Device, { size: 16 }), on: i.place.id === place.id })),
+        pick: (id) => set({ place: id === 'sandbox' ? '' : id }),
+        loading: places.loading,
+        error: places.error?.message ?? null,
+    };
     return (_jsxs(YStack, { flex: 1, minH: 0, minW: 0, items: "center", justify: "center", pb: "$10", overflowY: "auto", overflowX: "hidden", children: [_jsxs(YStack, { width: "100%", maxW: MEASURE, gap: "$5", children: [_jsx(SizableText, { render: "h1", fontSize: "$7", lineHeight: "$7", fontWeight: "700", color: "$ink", style: { textAlign: 'center' }, children: prefs.callName ? `What’s up next, ${prefs.callName}?` : 'What’s up next?' }), _jsxs(YStack, { gap: "$2", children: [stranger ? (_jsxs(XStack, { items: "center", justify: "space-between", gap: "$3", px: "$3", py: "$2", rounded: "$10", borderWidth: 1, borderColor: "$borderColor", role: "alert", children: [_jsx(SizableText, { size: "$2", color: "$ink", flex: 1, minW: 0, children: `${codebase} is not one of this organization’s repositories.` }), _jsx(Button, { size: "sm", variant: "outline", onPress: () => setPicking(true), children: "Choose a repository" })] })) : env.value && (env.value.state === 'proposed' || unset(env.value)) && !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) || mind.note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(kept.mode, place.id) || mind.note })) : null, _jsx(Prompt, { framed: 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, onAttach: () => pick(files, setFiles, setNote), tools: _jsx(ModeSelect, { modes: MODES, value: kept.mode, onChange: (m) => set({ mode: m }), bg: "transparent", minH: 24, px: "$1.5", self: "center" }), mind: mind, limits: limits, voice: voice })] })] }), _jsx(Publish, { source: adding, onClose: () => setAdding(null) }), codebase ? (_jsx(SetupDialog, { repo: codebase, homes: homes, open: offering, onOpenChange: setOffering, onStart: setup, onRepo: choose, onSaved: () => {
+                                            : `${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(mode, place.id) || mind.note ? (_jsx(SizableText, { size: "$1", color: "$soft", role: "status", children: note || unhonoured(mode, place.id) || mind.note })) : null, _jsx(Prompt, { framed: true, value: draft, onChange: setDraft, onSend: () => void send(), busy: busy, label: "Describe a task or ask a question", head: head, plus: {
+                                    upload: () => pick(files, setFiles, setNote),
+                                    skills: carry.skills,
+                                    devices,
+                                    memory: { on: carry.gear.gear.memory, set: (on) => carry.gear.set({ memory: on }) },
+                                }, on: carry.on, slash: carry.skills, mode: { value: carry.gear.gear.mode, set: (m) => carry.gear.set({ mode: m }) }, where: where, below: _jsx(Suggestions, { rows: hints.rows, onPick: setDraft, onDismiss: hints.dismiss }), mind: mind, limits: limits, onUpgrade: () => host.go(path({ kind: 'screen', screen: 'plans' })), voice: voice, language: prefs.language ?? null, onLanguage: (id) => void savePrefs({ language: id }), talk: talk })] })] }), _jsx(Publish, { source: adding, onClose: () => setAdding(null) }), codebase ? (_jsx(SetupDialog, { repo: codebase, homes: homes, open: offering, onOpenChange: setOffering, onStart: setup, onRepo: choose, onSaved: () => {
                     setOffering(false);
                     env.reload();
                 } })) : null] }));

package/lib/mic.d.ts

@@ -0,0 +1,10 @@
+import { type Machine } from '@hanzo/voice';
+export interface DictationProps {
+    voice: Machine;
+    disabled?: boolean;
+    /** The language dictation listens in, or null for Auto (the browser's own). */
+    language?: string | null;
+    onLanguage?: (id: string | null) => void;
+}
+/** The mic and its chevron, one control on the composer's row. */
+export declare function Dictation({ voice, disabled, language, onLanguage }: DictationProps): import("react").JSX.Element;

package/lib/mic.js

@@ -0,0 +1,95 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Dictation: the mic, and beside it a chevron that opens its menu — the
+ * microphones this browser has, the chosen one's live level, and the language
+ * dictation listens in (Auto is the browser's own).
+ *
+ * The microphones are listed as the browser names them, the system's own
+ * input first; dictation opens that one. The meter listens only while the menu
+ * is open, and only where the person has already let the page use a
+ * microphone: opening a menu never asks for permission.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Check, ChevronDown, Mic as MicIcon } from '@hanzogui/lucide-icons-2';
+import { Control } from '@hanzo/composer';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@hanzo/ui';
+import { Voice } from '@hanzo/voice';
+import { useEffect, useRef, useState } from 'react';
+import { LANGUAGES } from './voice.js';
+/** The mic is a plain mark until it is pointed at. */
+const PLAIN = { bg: 'transparent', color: 'var(--foreground)', hoverStyle: { bg: '$hover' } };
+/** The microphones this browser lists; labels only once the page may use one. */
+function useInputs(open) {
+    const [inputs, setInputs] = useState([]);
+    const [allowed, setAllowed] = useState(false);
+    const [using, setUsing] = useState('');
+    useEffect(() => {
+        if (!open || typeof navigator === 'undefined' || !navigator.mediaDevices?.enumerateDevices)
+            return;
+        let live = true;
+        void navigator.mediaDevices.enumerateDevices().then((all) => {
+            if (!live)
+                return;
+            const mics = all.filter((d) => d.kind === 'audioinput' && d.deviceId !== 'default' && d.deviceId !== 'communications');
+            setInputs(mics);
+            // The system's own input: the group the browser's "default" entry belongs to, else the first.
+            setUsing(all.find((d) => d.kind === 'audioinput' && d.deviceId === 'default')?.groupId || mics[0]?.groupId || '');
+            setAllowed(mics.some((d) => d.label));
+        });
+        return () => {
+            live = false;
+        };
+    }, [open]);
+    return { inputs, allowed, using };
+}
+/** The microphone's level while the menu is open, drawn without re-rendering. */
+function Meter({ on }) {
+    const bar = useRef(null);
+    useEffect(() => {
+        if (!on)
+            return;
+        let stream = null;
+        let ctx = null;
+        let frame = 0;
+        let live = true;
+        void navigator.mediaDevices
+            .getUserMedia({ audio: true })
+            .then((s) => {
+            if (!live)
+                return s.getTracks().forEach((t) => t.stop());
+            stream = s;
+            ctx = new AudioContext();
+            const tap = ctx.createAnalyser();
+            tap.fftSize = 512;
+            ctx.createMediaStreamSource(s).connect(tap);
+            const buf = new Uint8Array(tap.fftSize);
+            const draw = () => {
+                tap.getByteTimeDomainData(buf);
+                let peak = 0;
+                for (const v of buf)
+                    peak = Math.max(peak, Math.abs(v - 128));
+                if (bar.current)
+                    bar.current.style.transform = `scaleX(${Math.min(1, (peak / 128) * 2.5)})`;
+                frame = requestAnimationFrame(draw);
+            };
+            draw();
+        })
+            .catch(() => { });
+        return () => {
+            live = false;
+            cancelAnimationFrame(frame);
+            stream?.getTracks().forEach((t) => t.stop());
+            void ctx?.close();
+        };
+    }, [on]);
+    return (_jsxs(XStack, { items: "center", gap: 10, px: 8, py: 8, "data-slot": "mic-meter", "aria-hidden": true, children: [_jsx(MicIcon, { size: 14, color: "$hint" }), _jsx(YStack, { flex: 1, height: 4, rounded: 2, bg: "$hover", overflow: "hidden", children: _jsx(YStack, { ref: bar, height: 4, width: "100%", bg: "$ink", 
+                    // inline-style: the level is written per frame onto the node; a style prop would mint a class per value.
+                    style: { transform: 'scaleX(0)', transformOrigin: 'left' } }) })] }));
+}
+/** The mic and its chevron, one control on the composer's row. */
+export function Dictation({ voice, disabled = false, language = null, onLanguage }) {
+    const [open, setOpen] = useState(false);
+    const { inputs, allowed, using } = useInputs(open);
+    const spoken = LANGUAGES.find((l) => l.id === language);
+    return (_jsxs(XStack, { "data-slot": "dictation", items: "center", rounded: 8, borderWidth: 1, borderColor: open ? '$borderColor' : 'transparent', hoverStyle: { borderColor: '$borderColor' }, shrink: 0, children: [_jsx(Control, { asChild: true, size: 30, ...PLAIN, children: _jsx(Voice, { voice: voice, disabled: disabled, says: { idle: 'Dictate', listening: 'Dictating — click to stop' }, children: (state) => _jsx(MicIcon, { size: 16, fill: state === 'idle' ? 'none' : 'currentColor' }) }) }), _jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: disabled, children: _jsx(XStack, { render: "button", "aria-label": "Dictation settings", "data-slot": "dictation-menu", width: 16, height: 30, items: "center", justify: "center", rounded: 6, cursor: "pointer", bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, "$max-sm": { width: 28, height: 44 }, children: _jsx(ChevronDown, { size: 12, color: "$hint" }) }) }), _jsxs(DropdownMenuContent, { align: "end", minW: 200, "data-slot": "dictation-panel", children: [_jsx(Meter, { on: open && allowed }), inputs.length === 0 ? (_jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 14, color: "$hint", children: "No devices found" }) })) : (inputs.map((d, i) => (_jsx(DropdownMenuLabel, { children: _jsxs(XStack, { items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", numberOfLines: 1, flex: 1, children: d.label || `Microphone ${i + 1}` }), d.groupId === using ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-label": "In use" }) : null] }) }, d.deviceId || i)))), onLanguage ? (_jsxs(_Fragment, { children: [_jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuLabel, { children: _jsx(SizableText, { fontSize: 13, color: "$hint", children: "Dictation settings" }) }), _jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { "data-slot": "dictation-language", children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: "Language" }), _jsx(SizableText, { fontSize: 14, color: "$hint", children: spoken?.label ?? 'Auto' })] }) }), _jsx(DropdownMenuSubContent, { minW: 160, children: [{ id: '', label: 'Auto' }, ...LANGUAGES].map((l) => (_jsx(DropdownMenuItem, { onSelect: () => onLanguage(l.id || null), children: _jsxs(XStack, { flex: 1, items: "center", gap: 8, children: [_jsx(SizableText, { fontSize: 14, color: "$ink", flex: 1, children: l.label }), (language ?? '') === l.id ? _jsx(Check, { size: 14, color: "var(--primary)", "aria-hidden": true }) : null] }) }, l.id || 'auto'))) })] })] })) : null] })] })] }));
+}

package/lib/mind.d.ts

@@ -12,6 +12,10 @@ export interface Choice {
     effort: Effort;
 }
 export declare const FIRST: Choice;
+/** What Free answers on: the catalog's free lane, Enso's first. `free` is an alias of it. */
+export declare const FREE = "enso-free";
+/** Whether a plan grants only the free lane. An unknown plan is not taken for Free. */
+export declare const isFree: (plan: string | null | undefined) => boolean;
 /** The kept choice, Enso and Medium where nothing is kept. Stable while the stored text is. */
 export declare function kept(): Choice;
 /** Keep a change, in this browser, for every surface that reads it. */
@@ -22,6 +26,10 @@ export declare function useChoice(): readonly [Choice, (patch: Partial<Choice>)
 export declare function reasons(model: string, catalog: readonly Model[]): boolean;
 /** A model's name as the catalog spells it; Enso for the router. */
 export declare function nameOf(model: string, catalog: readonly Model[]): string;
+/** An id said as a name: its last path part, each word capitalised (`enso-flash` → Enso Flash). */
+export declare function spelled(id: string): string;
+/** The ids that are the router under another name: the picker's Enso row stands for all of them. */
+export declare const ROUTER_IDS: ReadonlySet<string>;
 /** `GET /v1/models` for a target, asked once and shared; a refusal is not kept, so the next ask goes again. */
 export declare function catalog(t: Target): Promise<Model[]>;
 /** The catalog as a chooser draws it, and the list a kept pick is judged against. */
@@ -44,6 +52,8 @@ export interface Catalog {
  * the reason in the chooser — never the platform's own words.
  */
 export declare function useCatalog(t: Target): Catalog;
+/** Whether `model` is one this plan may send: on Free, the catalog's free class alone. */
+export declare function grants(free: boolean, model: string, catalog: readonly Model[]): boolean;
 /** The chip's whole state: the catalog, what answers next, and how to change either. */
 export interface Mind {
     model: string;
@@ -53,8 +63,15 @@ export interface Mind {
     error: string | null;
     /** A list shown from before, because this read failed. */
     note: string;
+    /** The plan grants only the free lane: anything else is an upgrade, never a pick. */
+    free: boolean;
     /** A premium pick holds for this screen; any other is kept. */
     pick: (id: string) => void;
     pace: (effort: Effort) => void;
 }
-export declare function useMind(t: Target): Mind;
+/**
+ * The model and effort for the plan `plan` names (`GET /v1/ai/limits` `plan`).
+ * On Free the default is `FREE` and a kept pick outside the free lane is set
+ * aside rather than sent — it comes back once the plan grants it.
+ */
+export declare function useMind(t: Target, plan?: string | null): Mind;

package/lib/mind.js

@@ -16,7 +16,7 @@
  * lists as not reasoning offers none; Enso and a model the catalog does not
  * describe offer all three.
  */
-import { modelName, parseModels } from '@hanzo/ui/models/catalog';
+import { parseModels } from '@hanzo/ui/models/catalog';
 import { useEffect, useState, useSyncExternalStore } from 'react';
 import { Refusal } from './api/call.js';
 import { ENSO, models as read } from './api/models.js';
@@ -27,6 +27,10 @@ export const EFFORTS = [
     { id: 'high', label: 'High', note: 'Slow and careful, for hard problems' },
 ];
 export const FIRST = { model: ENSO, effort: 'medium' };
+/** What Free answers on: the catalog's free lane, Enso's first. `free` is an alias of it. */
+export const FREE = 'enso-free';
+/** Whether a plan grants only the free lane. An unknown plan is not taken for Free. */
+export const isFree = (plan) => plan === 'free';
 const KEY = 'hanzo.mind';
 const CHANGE = 'hanzo:mind';
 const effortOf = (v) => (EFFORTS.some((e) => e.id === v) ? v : FIRST.effort);
@@ -103,9 +107,22 @@ export function reasons(model, catalog) {
 export function nameOf(model, catalog) {
     if (model === ENSO)
         return 'Enso';
+    if (model === 'free')
+        return nameOf(FREE, catalog);
     const row = catalog.find((m) => m.id === model);
-    return modelName(row ?? { id: model });
+    return row?.name ?? spelled(model);
 }
+/** An id said as a name: its last path part, each word capitalised (`enso-flash` → Enso Flash). */
+export function spelled(id) {
+    const tail = id.split('/').pop() ?? id;
+    return tail
+        .split(/[-_]/)
+        .filter(Boolean)
+        .map((w) => w[0].toUpperCase() + w.slice(1))
+        .join(' ');
+}
+/** The ids that are the router under another name: the picker's Enso row stands for all of them. */
+export const ROUTER_IDS = new Set([ENSO, 'enso', 'hanzo/enso', 'free']);
 // The catalog, once per platform for the page: Chat and Dev read the same list.
 const catalogs = new Map();
 const settled = new Map();
@@ -179,9 +196,35 @@ export function useCatalog(t) {
         note: '',
     };
 }
-export function useMind(t) {
+/** Whether `model` is one this plan may send: on Free, the catalog's free class alone. */
+export function grants(free, model, catalog) {
+    if (!free)
+        return true;
+    return catalog.find((m) => m.id === model)?.class === 'free';
+}
+/**
+ * The model and effort for the plan `plan` names (`GET /v1/ai/limits` `plan`).
+ * On Free the default is `FREE` and a kept pick outside the free lane is set
+ * aside rather than sent — it comes back once the plan grants it.
+ */
+export function useMind(t, plan) {
     const [choice, change] = useChoice();
     const { models, list, loading, error, note } = useCatalog(t);
-    const [model, pick] = usePick(choice.model, (id) => change({ model: id }), list);
-    return { model, effort: choice.effort, models, loading, error, note, pick, pace: (effort) => change({ effort }) };
+    const free = isFree(plan);
+    const [picked, pick] = usePick(choice.model, (id) => change({ model: id }), list);
+    const model = free && !grants(true, picked, models) ? FREE : picked;
+    return {
+        model,
+        effort: choice.effort,
+        models,
+        loading,
+        error,
+        note,
+        free,
+        pick: (id) => {
+            if (grants(free, id, models))
+                pick(id);
+        },
+        pace: (effort) => change({ effort }),
+    };
 }

package/lib/panel.js

@@ -17,15 +17,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * (`frames`) — and offers any other address in a new window instead of a frame
  * the site would refuse.
  *
- * The column the panel stands in is the host's: its width and edge. On a phone
- * the panel is a sheet over the page instead (`sheet`).
+ * The column the panel stands in is the host's (side.tsx `useSplit`): its
+ * width and edge. The strip reads it for full screen (Escape returns) and, while
+ * the panel has the middle column's room, the way back to it. On a phone the
+ * panel is the whole window instead (`sheet`).
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ArrowLeft, ArrowRight, ChevronRight, Columns2, ExternalLink, Globe, Maximize2, Minus, MoreHorizontal, Pin, Plus, RotateCcw, RotateCw, SquarePlus, X } from '@hanzogui/lucide-icons-2';
+import { ArrowLeft, ArrowRight, ChevronRight, Columns2, ExternalLink, Globe, Maximize2, Minimize2, Minus, MoreHorizontal, PanelLeftOpen, Pin, Plus, RotateCcw, RotateCw, SquarePlus, X } from '@hanzogui/lucide-icons-2';
 import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@hanzo/ui';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useBrowse, useBrowser } from './host.js';
+import { useSide } from './side.js';
 import { destination, PAGE } from './tabs.js';
 const MAC = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
 /** The tabs' shortcut, as this platform writes it. */
@@ -357,6 +360,9 @@ function Strip({ tab, on, side, index, label, icon, ...rest }) {
 /** The panel: the strip, and the chosen tab. */
 export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label = 'Side panel', suggested, ...acts }) {
     const tab = side.tabs.find((t) => t.id === side.at) ?? null;
+    // The column it stands in; a phone's sheet is the whole window already.
+    const stands = useSide();
+    const column = sheet ? null : stands;
     // The chosen tab is in view in a strip that scrolls: a tab just opened stands at its end.
     useEffect(() => {
         if (side.at)
@@ -370,14 +376,15 @@ export function Panel({ side, kinds, onHide, sheet = false, bar, menu, label = '
     const blank = () => side.open({ kind: PAGE, title: BLANK, url: '' });
     const poppable = tab?.kind === PAGE && (tab.body !== undefined || Boolean(tab.url));
     const plus = (_jsx(XStack, { render: "button", role: "button", "aria-label": "Open a tab", width: 28, height: 28, ...quiet(), onPress: closed.length ? undefined : blank, children: _jsx(Plus, { size: 16 }) }));
-    const body = (_jsxs(YStack, { role: "complementary", "aria-label": label, "data-slot": "side", flex: 1, minW: 0, minH: 0, overflow: "hidden", style: { borderRadius: 'inherit' }, children: [_jsxs(XStack, { "data-slot": "side-strip", height: STRIP, px: "$2", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [_jsx(XStack, { role: "tablist", "aria-label": "Tabs", shrink: 1, minW: 0, gap: "$1", items: "center", overflowX: "auto", overflowY: "hidden", "$platform-web": { scrollbarWidth: 'none' }, children: side.tabs.map((t, i) => (_jsx(Leaf, { tab: t, on: t.id === side.at, side: side, index: i, label: title(t), icon: mark(t) }, t.id))) }), closed.length ? (_jsx(DropdownMenu, { trigger: plus, items: [
+    const body = (_jsxs(YStack, { role: "complementary", "aria-label": label, "data-slot": "side", flex: 1, minW: 0, minH: 0, overflow: "hidden", style: { borderRadius: 'inherit' }, children: [_jsxs(XStack, { "data-slot": "side-strip", height: STRIP, px: "$2", gap: "$1.5", items: "center", borderBottomWidth: 1, borderColor: "$borderColor", shrink: 0, children: [column?.hidden && !column.full ? (_jsxs(XStack, { render: "button", role: "button", "data-slot": "side-show", onPress: column.show, height: 32, px: "$2", gap: "$1.5", ...quiet(), children: [_jsx(PanelLeftOpen, { size: 16 }), _jsx(SizableText, { fontSize: 13, color: "$ink", children: `Show ${column.main}` })] })) : null, _jsx(XStack, { role: "tablist", "aria-label": "Tabs", shrink: 1, minW: 0, gap: "$1", items: "center", overflowX: "auto", overflowY: "hidden", "$platform-web": { scrollbarWidth: 'none' }, children: side.tabs.map((t, i) => (_jsx(Leaf, { tab: t, on: t.id === side.at, side: side, index: i, label: title(t), icon: mark(t) }, t.id))) }), closed.length ? (_jsx(DropdownMenu, { trigger: plus, items: [
                             ...closed.map((k) => ({ key: k.id, label: k.label, onSelect: () => side.open({ kind: k.id, title: k.label }) })),
                             { key: PAGE, label: 'Page', description: 'An address, framed here', onSelect: blank },
-                        ] })) : (plus), _jsx(XStack, { flex: 1 }), menu, _jsx(XStack, { render: "button", role: "button", "aria-label": "Open this tab in a new window", "aria-disabled": !poppable || undefined, onPress: poppable ? () => popOut(tab) : undefined, width: 28, height: 28, ...quiet(false, !poppable), children: _jsx(Maximize2, { size: 14 }) }), _jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": "Hide tabs", "aria-expanded": true, "aria-keyshortcuts": SHORTCUTS, ...{ title: `Hide tabs (${KEYS})` }, onPress: onHide, width: 32, height: 32, ...quiet(true), children: _jsx(Columns2, { size: 16 }) })] }), bar, _jsx(YStack, { id: "side-body", role: "tabpanel", "aria-labelledby": tab ? `side-tab-${tab.id}` : undefined, 
+                        ] })) : (plus), _jsx(XStack, { flex: 1 }), menu, _jsx(XStack, { render: "button", role: "button", "aria-label": "Open this tab in a new window", "aria-disabled": !poppable || undefined, onPress: poppable ? () => popOut(tab) : undefined, width: 28, height: 28, ...quiet(false, !poppable), children: _jsx(ExternalLink, { size: 14 }) }), column ? (_jsx(XStack, { render: "button", role: "button", "data-slot": "side-full", "aria-label": column.full ? 'Exit full screen' : 'Full screen', "aria-pressed": column.full, "aria-keyshortcuts": column.full ? 'Escape' : undefined, ...{ title: column.full ? 'Exit full screen (Esc)' : 'Full screen' }, onPress: () => column.fill(!column.full), width: 28, height: 28, ...quiet(column.full), children: column.full ? _jsx(Minimize2, { size: 14 }) : _jsx(Maximize2, { size: 14 }) })) : null, _jsx(XStack, { render: "button", role: "button", "data-slot": "side-toggle", "aria-label": "Hide tabs", "aria-expanded": true, "aria-keyshortcuts": SHORTCUTS, ...{ title: `Hide tabs (${KEYS})` }, onPress: onHide, width: 32, height: 32, ...quiet(true), children: _jsx(Columns2, { size: 16 }) })] }), bar, _jsx(YStack, { id: "side-body", role: "tabpanel", "aria-labelledby": tab ? `side-tab-${tab.id}` : undefined, 
                 // What a tab lays over itself (a door's "Connecting…") stays inside it, under the strip.
                 position: "relative", flex: 1, minH: 0, overflowY: bleed ? 'hidden' : 'auto', overflowX: "hidden", px: bleed ? 0 : '$3', py: bleed ? 0 : '$3', children: !tab ? (_jsx(YStack, { flex: 1, items: "center", justify: "center", p: "$5", children: _jsx(SizableText, { fontSize: 13, color: "$soft", children: "No tabs open." }) })) : tab.kind === PAGE ? (_jsx(Page, { tab: tab, onGo: (url) => side.go(tab.id, url), onBack: () => side.back(tab.id), onForward: () => side.forward(tab.id), onTitle: (t) => side.rename(tab.id, t), onPin: (on) => (on ? side.pin(tab.id) : side.unpin(tab.id)), suggested: suggested, ...acts }, tab.id)) : kind ? (kind.render()) : (_jsx(SizableText, { size: "$2", color: "$soft", children: "This tab is not offered here." })) })] }));
     if (!sheet || typeof document === 'undefined')
         return body;
-    // A phone: a sheet from the foot of the window over a dim, the same panel in it.
-    return createPortal(_jsxs(YStack, { "data-slot": "side-sheet", position: "fixed", t: 0, r: 0, b: 0, l: 0, z: 60, children: [_jsx(YStack, { "aria-hidden": true, onPress: onHide, position: "absolute", t: 0, r: 0, l: 0, height: "12dvh", bg: "var(--surface-scrim)" }), _jsx(YStack, { position: "absolute", l: 0, r: 0, b: 0, height: "88dvh", bg: "$background", borderTopWidth: 1, borderColor: "$borderColor", style: { borderTopLeftRadius: 16, borderTopRightRadius: 16 }, overflow: "hidden", children: body })] }), document.body);
+    // A phone: the panel over the whole window, clear of the notch and the home
+    // indicator. The strip's toggle puts it away.
+    return createPortal(_jsx(YStack, { "data-slot": "side-sheet", position: "fixed", t: 0, r: 0, b: 0, l: 0, z: 60, bg: "$background", style: { paddingTop: 'env(safe-area-inset-top)', paddingBottom: 'env(safe-area-inset-bottom)' }, children: body }), document.body);
 }

package/lib/plugin.d.ts

@@ -0,0 +1,56 @@
+/**
+ * A plugin: one thing the composer can do beyond words, picked from `+` ›
+ * Plugins or by typing `@`. Chat and Dev offer the same list (`usePlugins`,
+ * plugins/), each one running on Hanzo's own services.
+ *
+ * A plugin acts in one of two ways, or both:
+ *
+ *   open      picked, it shows something of its own (a sketch pad, a picker)
+ *             and hands its result back to the composer: a file, the draft.
+ *   prepare   while it is on in the conversation (Gear.plugins), it is asked
+ *             just before each message goes, and what it answers rides that
+ *             message: words for the leading system turn, files, or an answer
+ *             of its own that replaces the model's (`reply`).
+ *
+ * A plugin whose service is not there for this person is not listed: `usePlugins`
+ * answers only the ones that run.
+ */
+import type { ReactNode } from 'react';
+import type { Target } from './api/call.ts';
+/** What a plugin may do to the composer it was picked from. */
+export interface Composer {
+    target: Target;
+    draft: string;
+    setDraft: (text: string) => void;
+    /** Hold files with the next message, as the paperclip does. */
+    attach: (files: File[]) => void;
+    /** Draw a dialog over the page; null takes it down. */
+    show: (node: ReactNode | null) => void;
+    /** Move the app (a path of the host's, or an address on another origin). */
+    go: (href: string) => void;
+}
+/** The message about to go. */
+export interface Turn {
+    text: string;
+    files: File[];
+    /** The conversation's id, or '' for one not begun. */
+    thread: string;
+}
+/** What a plugin adds to the message. */
+export interface Prep {
+    /** Appended to the leading system turn. */
+    system?: string;
+    /** Files to send beside the person's. */
+    files?: File[];
+    /** An answer of the plugin's own, in markdown; the model is not asked. */
+    reply?: string;
+}
+export interface Plugin {
+    id: string;
+    name: string;
+    /** One line: what it does. */
+    note: string;
+    icon: ReactNode;
+    open?: (c: Composer) => void;
+    prepare?: (turn: Turn, c: Composer, signal: AbortSignal) => Promise<Prep>;
+}

package/lib/plugin.js

@@ -0,0 +1 @@
+export {};

package/lib/plus.d.ts

@@ -0,0 +1,46 @@
+import { type ReactNode } from 'react';
+/** One thing a shelf holds. `on` marks what the conversation already has. */
+export interface Row {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    /** A few dim words beside the label, where they help. */
+    note?: string;
+    on?: boolean;
+}
+export interface Link {
+    label: string;
+    onPress: () => void;
+}
+export interface Shelf {
+    rows: Row[];
+    pick: (id: string) => void;
+    loading?: boolean;
+    error?: string | null;
+    /** A search field over the rows, with this placeholder. */
+    search?: string;
+    /** Said when there are no rows and nothing is loading. */
+    empty?: string;
+    create?: Link;
+    manage?: Link;
+    browse?: Link;
+}
+export interface Switch {
+    on: boolean;
+    set: (on: boolean) => void;
+}
+export interface PlusProps {
+    /** Upload or add files (Ctrl+U). */
+    upload?: () => void;
+    agents?: Shelf;
+    skills?: Shelf;
+    connectors?: Shelf;
+    design?: Shelf;
+    plugins?: Shelf;
+    devices?: Shelf;
+    research?: Switch;
+    memory?: Switch;
+    disabled?: boolean;
+}
+/** The `+` and its menu. */
+export declare function Plus(p: PlusProps): import("react").JSX.Element;

package/lib/plus.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The composer's `+`: files, then what the conversation works with — agents,
+ * skills, connectors, a design system, plugins, a device — then the Research
+ * and Memory switches. A row is drawn only when the surface hands it a shelf:
+ * a shelf is what is there (`rows`), what picking one does, and the ways to
+ * make, manage and find more. A row with nothing behind it is not drawn.
+ *
+ * On a laptop each shelf opens beside the menu; on a phone it is a page of the
+ * same menu, with Back.
+ */
+import { SizableText, useMedia, XStack } from '@hanzo/gui';
+import { Blocks, Bot, Briefcase, Brain, Monitor, Palette, Paperclip, Plug, Plus as PlusIcon, ScrollText, Telescope, } from '@hanzogui/lucide-icons-2';
+import { DropdownMenu, DropdownMenuBack, DropdownMenuContent, DropdownMenuEmpty, DropdownMenuItem, DropdownMenuLoading, DropdownMenuPage, DropdownMenuSearch, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '@hanzo/ui';
+import { Check } from '@hanzogui/lucide-icons-2';
+import { useMemo, useState } from 'react';
+const ICON = 16;
+/** The shelves, in the menu's order, with their names and marks. */
+const SHELVES = [
+    { key: 'agents', label: 'Agents', icon: _jsx(Bot, { size: ICON }) },
+    { key: 'skills', label: 'Skills', icon: _jsx(ScrollText, { size: ICON }) },
+    { key: 'connectors', label: 'Connectors', icon: _jsx(Blocks, { size: ICON }) },
+    { key: 'design', label: 'Design system', icon: _jsx(Palette, { size: ICON }) },
+    { key: 'plugins', label: 'Plugins', icon: _jsx(Plug, { size: ICON }) },
+    { key: 'devices', label: 'Devices', icon: _jsx(Monitor, { size: ICON }) },
+];
+/** A row's anatomy: its mark, its label, a dim note, and a check when it is on. */
+function Line({ icon, label, note, on, tail }) {
+    return (_jsxs(XStack, { flex: 1, minW: 0, items: "center", gap: 10, children: [icon ? (_jsx(XStack, { width: ICON, height: ICON, items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: icon })) : null, _jsx(SizableText, { fontSize: 14, color: "$ink", numberOfLines: 1, shrink: 0, children: label }), note ? (_jsx(SizableText, { fontSize: 13, color: "$hint", numberOfLines: 1, flex: 1, minW: 0, children: note })) : (_jsx(XStack, { flex: 1 })), tail, on ? _jsx(Check, { size: ICON, color: "var(--primary)", "aria-hidden": true }) : null] }));
+}
+/** A shelf's rows, its status, then its ways to more. */
+function Contents({ shelf, name, close }) {
+    const [q, setQ] = useState('');
+    const needle = q.trim().toLowerCase();
+    const rows = needle ? shelf.rows.filter((r) => `${r.label} ${r.note ?? ''}`.toLowerCase().includes(needle)) : shelf.rows;
+    const links = [shelf.create, shelf.manage, shelf.browse].filter((l) => Boolean(l));
+    return (_jsxs(_Fragment, { children: [shelf.search ? _jsx(DropdownMenuSearch, { value: q, onValueChange: setQ, placeholder: shelf.search, "aria-label": `Search ${name.toLowerCase()}` }) : null, shelf.loading && !shelf.rows.length ? _jsxs(DropdownMenuLoading, { children: ["Reading ", name.toLowerCase()] }) : null, shelf.error ? _jsx(DropdownMenuEmpty, { children: shelf.error }) : null, !shelf.loading && !shelf.error && !rows.length ? _jsx(DropdownMenuEmpty, { children: needle ? 'Nothing matches' : (shelf.empty ?? `No ${name.toLowerCase()} yet`) }) : null, rows.map((r) => (_jsx(DropdownMenuItem, { preventCloseOnSelect: true, onSelect: () => shelf.pick(r.id), "aria-checked": r.on ?? false, "data-slot": "plus-row", children: _jsx(Line, { icon: r.icon, label: r.label, note: r.note, on: r.on }) }, r.id))), links.length ? _jsx(DropdownMenuSeparator, {}) : null, links.map((l, i) => (_jsx(DropdownMenuItem, { onSelect: () => {
+                    close();
+                    l.onPress();
+                }, children: _jsx(Line, { icon: l === shelf.manage ? _jsx(Briefcase, { size: ICON }) : _jsx(PlusIcon, { size: ICON }), label: l.label }) }, l.label)))] }));
+}
+/** The `+` and its menu. */
+export function Plus(p) {
+    const media = useMedia();
+    const wide = media.sm;
+    const [open, setOpen] = useState(false);
+    const close = () => setOpen(false);
+    const shelves = useMemo(() => SHELVES.filter((s) => p[s.key]), [p]);
+    const switches = [
+        p.research ? { key: 'research', label: 'Research', icon: _jsx(Telescope, { size: ICON }), s: p.research } : null,
+        p.memory ? { key: 'memory', label: 'Memory', icon: _jsx(Brain, { size: ICON }), s: p.memory } : null,
+    ].filter((x) => x !== null);
+    const main = (_jsxs(_Fragment, { children: [p.upload ? (_jsx(DropdownMenuItem, { "data-slot": "plus-upload", onSelect: () => {
+                    close();
+                    p.upload?.();
+                }, children: _jsx(Line, { icon: _jsx(Paperclip, { size: ICON }), label: "Upload or add files", tail: _jsx(DropdownMenuShortcut, { children: "Ctrl+U" }) }) })) : null, p.upload && shelves.length ? _jsx(DropdownMenuSeparator, {}) : null, shelves.map((s) => wide ? (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { "data-slot": `plus-${s.key}`, children: _jsx(Line, { icon: s.icon, label: s.label }) }), _jsx(DropdownMenuSubContent, { minW: 200, maxW: 340, maxH: 420, style: { overflowY: 'auto' }, children: _jsx(Contents, { shelf: p[s.key], name: s.label, close: close }) })] }, s.key)) : (_jsx(DropdownMenuItem, { page: s.key, "data-slot": `plus-${s.key}`, children: _jsx(Line, { icon: s.icon, label: s.label }) }, s.key))), switches.length && (p.upload || shelves.length) ? _jsx(DropdownMenuSeparator, {}) : null, switches.map((w) => (_jsx(DropdownMenuItem, { preventCloseOnSelect: true, onSelect: () => w.s.set(!w.s.on), role: 'menuitemcheckbox', "aria-checked": w.s.on, "data-slot": `plus-${w.key}`, children: _jsx(Line, { icon: w.icon, label: w.label, on: w.s.on }) }, w.key)))] }));
+    return (_jsxs(DropdownMenu, { open: open, onOpenChange: setOpen, ...(wide ? null : { defaultPage: 'main' }), children: [_jsx(DropdownMenuTrigger, { asChild: true, disabled: p.disabled, children: _jsx(XStack, { render: "button", "data-slot": "plus", "aria-label": "Add files, agents, skills and more", width: 32, height: 32, rounded: 8, items: "center", justify: "center", shrink: 0, cursor: p.disabled ? 'default' : 'pointer', opacity: p.disabled ? 0.4 : 1, bg: open ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, "$max-sm": { width: 44, height: 44, rounded: 22 }, children: _jsx(PlusIcon, { size: 18, color: "$ink" }) }) }), _jsx(DropdownMenuContent, { align: "start", minW: 240, "data-slot": "plus-menu", children: wide ? (main) : (_jsxs(_Fragment, { children: [_jsx(DropdownMenuPage, { id: "main", children: main }), shelves.map((s) => (_jsxs(DropdownMenuPage, { id: s.key, children: [_jsx(DropdownMenuBack, { children: s.label }), _jsx(Contents, { shelf: p[s.key], name: s.label, close: close })] }, s.key)))] })) })] }));
+}

package/lib/prefs.d.ts

@@ -7,6 +7,10 @@
  * 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.
+ *
+ * A host mounts it too, above the builder (the Hanzo app, for Chat's side
+ * panel), and the builder's own then reads through that one: one document, one
+ * read. The look (`Look`) is the builder's alone: a host has its own.
  */
 import { type ReactNode } from 'react';
 import { type Patch, type Prefs } from './api/pref.ts';
@@ -20,11 +24,20 @@ export interface PrefState {
 }
 export declare function PrefsProvider({ children }: {
     children: ReactNode;
-}): import("react").JSX.Element;
+}): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+/** The settings; with `false`, null where nothing holds them (the side panel drawn without a host: hanzo.team's rooms). */
 export declare function usePrefs(): PrefState;
+export declare function usePrefs(need: false): PrefState | null;
 /** 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;
 };
+/**
+ * The saved theme handed to the host, and the text size and motion put on the
+ * page. A stylesheet rather than a property on <html>: the design system's own
+ * root re-applies its appearance on mount, and a rule marked important outlasts
+ * that, while the builder is on the page and no longer.
+ */
+export declare function Look(): import("react").JSX.Element | null;