@hanzo/ui 8.29.22 → 8.29.23

package/dist/chat/Composer.cjs

@@ -1,131 +1,213 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ASK = void 0;
+exports.ROUND = exports.measure = exports.GAP = exports.MEASURE = exports.ASK = void 0;
+exports.useUpload = useUpload;
 exports.Composer = Composer;
-exports.ComposerTool = ComposerTool;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Composer — the one chat input for every Hanzo surface.
+ * Composer — the one composer every Hanzo surface draws: Chat, Dev, Studio, a
+ * room, a reply, a run being steered. A surface hands it slots and defaults and
+ * nothing else; the field, the keys, the controls and their look are here once.
  *
- * Presentational and controlled: it owns no draft, no transport and no model
- * state. `children` is the toolbar slot, which is where a surface puts its
- * `ModelPicker`, attachment control or mode chips — that keeps the shell the
- * same everywhere while the affordances stay per-surface.
+ *   ┌ pills ───────────────────────────────┐   where a run goes, which repository
+ *   │ the field                            │
+ *   │ +  carried…  children     ✦  🎙  ⬆   │   + menu, what the draft carries,
+ *   └──────────────────────────────────────┘   commands, dictation, send / stop
+ *     chips…                 model effort mode
  *
- * The send control is the same button in both states: it submits, and while a
- * turn is in flight it stops. Two buttons in one place was the thing every
- * surface got subtly different.
+ * Above the frame: the surface's `head`, the `/` or `@` list, and the `note`.
+ * Under it, one row: the surface's chips, then the model, the effort and the mode.
  *
- * Escape and ArrowUp are not bound. Dismissal belongs to whatever the composer
- * floats inside, and history recall needs a turn store this has no view of.
+ * THE PERSON'S SETTING (@hanzo/appearance `useComposing`, Settings →
+ * Appearance) decides which key sends and whether the chips, the model
+ * selector and the mode are drawn, everywhere at once. An axis they left on
+ * Auto takes the surface's `defaults`, and the model selector is off until
+ * they turn it on.
  *
- * Growth is `Textarea`'s and follows the content, so a wrapped paragraph raises
- * the field. `rows` is the floor, `maxHeight` the ceiling.
+ * Its paint is @hanzo/design's: `$` tokens and `--primary`, sized through
+ * `--density` (the round controls are @hanzo/composer's `Control`), so text
+ * size, density and accent change it with the rest of the product.
+ *
+ * Its own words are the reader's language (@hanzo/i18n `t`). A host's words —
+ * its placeholder, a shelf's rows, a chip's label — are drawn as given.
  */
 const gui_1 = require("@hanzo/gui");
+const appearance_1 = require("@hanzo/appearance");
+const composer_1 = require("@hanzo/composer");
+const i18n_1 = require("@hanzo/i18n");
+const react_1 = require("@hanzo/i18n/react");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const voice_1 = require("@hanzo/voice");
+const react_2 = require("react");
 const gui_2 = require("../backends/gui/index.cjs");
 const slot_1 = require("../backends/gui/slot.cjs");
+const Dial_1 = require("./Dial.cjs");
+const Dictation_1 = require("./Dictation.cjs");
+const Mention_1 = require("./Mention.cjs");
+const Palette_1 = require("./Palette.cjs");
+const Plus_1 = require("./Plus.cjs");
 const send_1 = require("./send.cjs");
-const PAD = 8;
-const MIN_ROWS = 1;
-/** How tall the field may grow before it scrolls, px. Uncapped, a long paste
- *  pushes the thread off screen; narrower frames pass their own. */
-const CEILING = 200;
-/** Floor for the field, px. `Textarea` defaults to 64, which is three lines of
- *  chrome before anything is typed. 44 is the touch-target floor. */
-const FLOOR = 44;
+const ring_1 = require("./ring.cjs");
+const Tune_1 = require("./Tune.cjs");
 /**
- * The one-line frame: 40px outside, so the field inside is 38 — a 20px line
- * with 9px above and below it. The frame is the target, not the glyph, which
- * is why the send control can be a 28px mark inside a row a thumb already hits.
+ * The resting placeholder. It addresses the person rather than the mechanism,
+ * and as one constant it never re-announces when the model changes.
  */
-const LINE = 40;
-const LINE_FIELD = LINE - 2;
-const LINE_PAD = (LINE_FIELD - 20) / 2;
-/** The inline send mark: a glyph in the field's own row, never a filled slab. */
-const MARK = 28;
+exports.ASK = (0, i18n_1.phrase)('Ask anything');
+/** The reading measure: @hanzo/design's prose width, which Width (appearance) retunes. */
+exports.MEASURE = 'var(--container-prose, 48rem)';
+/** The space between turns, px: one rhythm for every thread. */
+exports.GAP = 20;
+/** The composer's width under a thread: the measure less its 0.75rem gutters, centred, so its edges are the text's. */
+exports.measure = { width: 'calc(100% - 1.5rem)', maxW: `calc(${exports.MEASURE} - 1.5rem)`, mx: 'auto' };
+/** The round controls' box, px, and a phone's, a finger's width: `+`, the effort, the mic, its chevron and send all take it, so they share one centreline. */
+exports.ROUND = 36;
+const TAP = 44;
+/** The frame's corner, px: 12 on a laptop, 22 on a phone. */
+const CORNER = 12;
+const CORNER_PHONE = 22;
+/** How tall the field grows before it scrolls, px. */
+const CEILING = 200;
+/** The ink on a filled round: the accent's own foreground. */
+const ON = 'var(--primary-foreground)';
+/** A round control with no ground of its own until it is pointed at. */
+const QUIET = { bg: 'transparent', color: 'var(--foreground)', hoverStyle: { bg: '$hover' } };
+/** Ctrl+U (⌘U) uploads, while a composer with an upload is on the page. */
+function useUpload(upload) {
+    const now = (0, react_2.useRef)(upload);
+    now.current = upload;
+    (0, react_2.useEffect)(() => {
+        if (!upload)
+            return;
+        const key = (e) => {
+            if ((e.ctrlKey || e.metaKey) && !e.altKey && !e.shiftKey && e.key.toLowerCase() === 'u') {
+                e.preventDefault();
+                now.current?.();
+            }
+        };
+        window.addEventListener('keydown', key);
+        return () => window.removeEventListener('keydown', key);
+    }, [Boolean(upload)]); // eslint-disable-line react-hooks/exhaustive-deps
+}
+/** The modifier state off a keydown, web or native. */
+const modsOf = (e) => ({
+    shiftKey: e.shiftKey ?? e.nativeEvent?.shiftKey,
+    altKey: e.altKey ?? e.nativeEvent?.altKey,
+    metaKey: e.metaKey ?? e.nativeEvent?.metaKey,
+    ctrlKey: e.ctrlKey ?? e.nativeEvent?.ctrlKey,
+    isComposing: e.isComposing ?? e.nativeEvent?.isComposing,
+    // Safari's only honest IME signal on this keydown.
+    keyCode: e.keyCode ?? e.nativeEvent?.keyCode,
+});
 /**
- * The resting placeholder.
- *
- * "Ask anything", not "Send a message" and not "Message <model>". It addresses
- * the person rather than describing the mechanism, and being one constant string
- * it never has to be recomputed or re-announced when the model or endpoint
- * changes — which is what a model-named placeholder forces a surface to do.
+ * How far the software keyboard covers the page, px: the layout viewport less the
+ * visual one. A phone keyboard that does not shrink the layout leaves a fixed
+ * composer under it; this is how far to lift it. Zero where the layout follows the
+ * keyboard (the browser resized it) and wherever there is no keyboard.
  */
-exports.ASK = 'Ask anything';
-function Composer({ value, onChange, onSend, onStop, busy = false, disabled = false, placeholder = exports.ASK, rows = MIN_ROWS, maxHeight = CEILING, children, hint, label, field, send, head, foot, inline = false, ...props }) {
-    const sendable = (0, send_1.ready)(value, busy, disabled);
-    const keyed = (e) => {
-        const key = e.key ?? e.nativeEvent?.key ?? '';
-        const mods = {
-            shiftKey: e.shiftKey ?? e.nativeEvent?.shiftKey,
-            altKey: e.altKey ?? e.nativeEvent?.altKey,
-            metaKey: e.metaKey ?? e.nativeEvent?.metaKey,
-            ctrlKey: e.ctrlKey ?? e.nativeEvent?.ctrlKey,
-            isComposing: e.isComposing ?? e.nativeEvent?.isComposing,
-            // Safari's only honest IME signal on this keydown. Dropping it here would
-            // put the mid-candidate submit straight back, whatever `sends` checks.
-            keyCode: e.keyCode ?? e.nativeEvent?.keyCode,
+function useLift() {
+    const [lift, setLift] = (0, react_2.useState)(0);
+    (0, react_2.useEffect)(() => {
+        const vv = typeof window === 'undefined' ? null : window.visualViewport;
+        if (!vv)
+            return;
+        const read = () => {
+            const covered = Math.round(window.innerHeight - vv.height - vv.offsetTop);
+            // A bar of the browser's own coming and going is not a keyboard.
+            setLift(covered > 100 ? covered : 0);
         };
-        if (!(0, send_1.sends)(key, mods))
+        read();
+        vv.addEventListener('resize', read);
+        vv.addEventListener('scroll', read);
+        return () => {
+            vv.removeEventListener('resize', read);
+            vv.removeEventListener('scroll', read);
+        };
+    }, []);
+    return lift;
+}
+function Composer({ value, onChange, onSend, onStop, busy = false, disabled = false, ready: readyProp, placeholder, label, rows = 1, maxHeight = CEILING, field, hint, children, head, pills, carried, plus, slash, at, commands, chips, mind, effort, limits, onUpgrade, mode, voice, language = null, onLanguage, talk, starters, note, column = false, framed = false, narrow: narrowProp, defaults, ...props }) {
+    const { t } = (0, react_1.useI18n)();
+    const media = (0, gui_1.useMedia)();
+    const narrow = narrowProp ?? !media.sm;
+    const hit = narrow ? TAP : exports.ROUND;
+    const lift = useLift();
+    const chosen = (0, appearance_1.useComposing)();
+    const rule = chosen.send ?? defaults?.send ?? 'enter';
+    const showChips = chosen.chips ?? defaults?.chips ?? true;
+    const showModel = chosen.model ?? defaults?.model ?? false;
+    const showMode = chosen.mode ?? defaults?.mode ?? true;
+    const lit = readyProp ?? (0, send_1.ready)(value);
+    const live = busy ? Boolean(onStop) : lit && !disabled;
+    useUpload(plus?.upload);
+    // `/` and `@`: the shelf the caret's word opens, filtered by what follows it.
+    const [index, setIndex] = (0, react_2.useState)(0);
+    const [closed, setClosed] = (0, react_2.useState)(null);
+    const typed = (0, Mention_1.trigger)(value);
+    const shelf = typed ? (typed.char === '/' ? slash : at) : undefined;
+    const listed = shelf && typed && closed !== value ? shelf.rows.filter((r) => r.label.toLowerCase().includes(typed.query)).slice(0, 8) : null;
+    const row = Math.min(index, Math.max(0, (listed?.length ?? 1) - 1));
+    (0, react_2.useEffect)(() => setIndex(0), [typed?.char, typed?.query]);
+    const pick = (id) => {
+        if (!typed || !shelf)
             return;
-        e.preventDefault?.();
-        if (sendable)
+        onChange(value.slice(0, typed.at).trimEnd() + (typed.at > 0 ? ' ' : ''));
+        shelf.pick(id);
+    };
+    const [palette, setPalette] = (0, react_2.useState)(false);
+    const submit = () => {
+        if (listed?.length)
+            return pick(listed[row].id);
+        if (live && !busy)
             onSend();
     };
-    const input = ((0, jsx_runtime_1.jsx)(gui_2.Textarea, { ...(0, slot_1.slot)('composer-field'), rows: rows, placeholder: placeholder, disabled: disabled, borderWidth: 0, ...(inline
-            ? {
-                flex: 1,
-                minW: 0,
-                minH: LINE_FIELD,
-                px: 0,
-                pt: LINE_PAD,
-                pb: LINE_PAD,
-                bg: 'transparent',
+    const keyed = (e) => {
+        const key = e?.key ?? e?.nativeEvent?.key ?? '';
+        const mods = modsOf(e ?? {});
+        if (listed) {
+            if (key === 'ArrowDown') {
+                e.preventDefault?.();
+                return setIndex((i) => Math.min(i + 1, listed.length - 1));
+            }
+            if (key === 'ArrowUp') {
+                e.preventDefault?.();
+                return setIndex((i) => Math.max(0, i - 1));
             }
-            : { minH: FLOOR }), maxH: maxHeight, "aria-label": label ?? placeholder, ...field, 
-        // After `field`: spread over, a caller's `onKeyDown` would replace the
-        // Enter rule and the IME guard. Theirs runs first and can claim the key.
+            if (key === 'Escape') {
+                e.preventDefault?.();
+                return setClosed(value);
+            }
+        }
+        if (commands?.length && (mods.metaKey || mods.ctrlKey) && key.toLowerCase() === 'k') {
+            e.preventDefault?.();
+            return setPalette(true);
+        }
+        if (!(0, send_1.sends)(key, mods, rule))
+            return;
+        e.preventDefault?.();
+        submit();
+    };
+    const input = ((0, jsx_runtime_1.jsx)(gui_2.Textarea, { ...(0, slot_1.slot)('composer-field'), rows: rows, placeholder: placeholder ?? t(exports.ASK), disabled: disabled, borderWidth: 0, fontSize: 16, lineHeight: 24, px: 8, pt: 2, pb: 0, minH: 26, maxH: maxHeight, bg: "transparent", "aria-label": label ?? placeholder ?? t(exports.ASK), ...field, 
+        // After `field`: a caller's `onKeyDown` runs first and can claim the key,
+        // but cannot replace the send rule and the IME guard.
         value: value, onChangeText: onChange, onKeyDown: (e) => {
             field?.onKeyDown?.(e);
             if (!e?.defaultPrevented)
                 keyed(e);
         } }));
-    const said = hint ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", children: hint })) : null;
-    const frame = inline ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer'), "data-variant": "inline", width: "100%", items: "center", rounded: "$3", borderWidth: 1, borderColor: "$rim", bg: "$hover", paddingInlineStart: "$3", paddingInlineEnd: "$1.5", gap: "$1.5", ...props, children: [input, children, said, send ?? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('composer-send'), ...(0, slot_1.tip)(busy ? 'Stop' : 'Send'), role: "button", tabIndex: busy ? (onStop ? 0 : -1) : sendable ? 0 : -1, "aria-label": busy ? 'Stop' : 'Send', "aria-disabled": busy ? !onStop : !sendable, width: MARK, height: MARK, shrink: 0, rounded: "$2", items: "center", justify: "center", cursor: (busy ? onStop : sendable) ? 'pointer' : 'default', opacity: (busy ? onStop : sendable) ? 1 : 0.6, hoverStyle: { bg: '$raised' }, onPress: () => (busy ? onStop?.() : sendable ? onSend() : undefined), onKeyDown: (e) => {
-                    if (e?.key !== 'Enter' && e?.key !== ' ')
-                        return;
-                    e.preventDefault?.();
-                    if (busy)
-                        onStop?.();
-                    else if (sendable)
-                        onSend();
-                }, children: busy ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Square, { size: 12, color: "$soft" }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.CornerDownLeft, { size: 14, color: "$soft" }) }))] })) : ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('composer'), width: "100%", rounded: "$5", borderWidth: 1, borderColor: "$borderColor", bg: "$background", p: PAD, gap: PAD, ...props, children: [input, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: PAD, children: [children, (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), said, send ?? ((0, jsx_runtime_1.jsx)(gui_2.Button, { ...(0, slot_1.slot)('composer-send'), size: "sm", disabled: busy ? !onStop : !sendable, onPress: busy ? onStop : onSend, "aria-label": busy ? 'Stop' : 'Send', 
-                        // A circle, and the room's one primary control. The height is the
-                        // size's; `aspectRatio` takes the width from it, so no second number
-                        // is written down. `--primary` is the accent a reader picks, and at
-                        // rest it is the ink pair Send already paints in both themes.
-                        px: 0, aspectRatio: 1, rounded: 'var(--radius-full, 9999px)', bg: "var(--primary)", borderWidth: 0, hoverStyle: { bg: 'var(--primary)', opacity: 0.9 }, pressStyle: { bg: 'var(--primary)', opacity: 0.85 }, children: busy ? ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.Square, { size: 14, color: 'var(--primary-foreground)' })) : ((0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowUp, { size: 16, color: 'var(--primary-foreground)' })) }))] })] }));
-    // With nothing above or below it the composer IS the frame, exactly as it
-    // was before either existed — no wrapper, so every caller's tree is unchanged.
-    if (!head && !foot)
-        return frame;
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('composer-shell'), width: "100%", gap: "$2.5", children: [head ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('composer-head'), items: "center", gap: "$1.5", flexWrap: "wrap", children: head })) : null, frame, foot ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('composer-foot'), items: "center", gap: "$2", px: "$1.5", mt: -4, children: foot })) : null] }));
-}
-/**
- * ComposerTool — one quiet control in a composer's `foot` or `head`: attach,
- * voice, a mode, the model. 24px tall, muted until pointed at, and a real
- * button to the keyboard. Its name is `label` whether or not it shows words,
- * because an icon-only control is the whole navigation for someone who cannot
- * see the icon.
- */
-function ComposerTool({ label, icon, text, caret = false, onPress, disabled = false, ...rest }) {
-    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-tool'), ...(0, slot_1.tip)(label), role: "button", tabIndex: disabled ? -1 : 0, "aria-label": label, "aria-disabled": disabled || undefined, "aria-haspopup": caret ? 'menu' : undefined, height: 24, px: text ? '$1.5' : '$1', gap: "$1", items: "center", rounded: "$2", shrink: 0, cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : { bg: '$hover' }, focusVisibleStyle: { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' }, hitSlop: { top: 10, bottom: 10, left: 2, right: 2 }, onPress: disabled ? undefined : onPress, onKeyDown: (e) => {
-            if (disabled || (e?.key !== 'Enter' && e?.key !== ' '))
+    const round = ((0, jsx_runtime_1.jsx)(composer_1.Control, { type: "button", size: hit, fill: true, rounded: 999, ...(0, slot_1.slot)('composer-send'), "aria-label": t(busy ? 'Stop' : 'Send'), "aria-disabled": !live || undefined, opacity: live ? 1 : 0.4, focusVisibleStyle: ring_1.RING, onClick: () => {
+            if (!live)
                 return;
-            e.preventDefault?.();
-            onPress?.();
-        }, ...rest, children: [icon ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { "aria-hidden": true, items: "center", children: icon })) : null, text ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$quiet", numberOfLines: 1, children: text })) : null, caret ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 12, color: "$soft", "aria-hidden": true }) : null] }));
+            if (busy)
+                onStop?.();
+            else
+                onSend();
+        }, children: busy ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Square, { size: 13, color: ON, fill: ON }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowUp, { size: 16, strokeWidth: 2.5, color: ON }) }));
+    const mention = listed && shelf && typed ? (0, jsx_runtime_1.jsx)(Mention_1.Mention, { shelf: shelf, rows: listed, index: row, onPick: pick, skills: typed.char === '/' }) : null;
+    const above = starters || head || note || mention ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('composer-head'), gap: "$1.5", children: [starters, head, mention, note ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('composer-note'), fontSize: 12, color: "$soft", text: "center", self: "center", children: note })) : null] })) : null;
+    const shown = showChips && chips?.length ? chips : null;
+    const tuned = (showModel && mind) || (showMode && mode);
+    const under = shown || tuned ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-foot'), items: "center", gap: 6, flexWrap: "wrap", rowGap: 4, width: "100%", children: [shown ? (0, jsx_runtime_1.jsx)(Tune_1.Chips, { chips: shown }) : null, tuned ? (0, jsx_runtime_1.jsx)(Tune_1.Tune, { mind: showModel ? mind : null, mode: showMode ? mode : null, onUpgrade: onUpgrade, limits: limits }) : null] })) : null;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('composer-shell'), ...(column ? exports.measure : { width: '100%' }), gap: 6, ...(lift ? { mb: lift } : null), ...props, children: [above, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('composer'), width: "100%", rounded: CORNER, borderWidth: 1, borderColor: "$borderColor", bg: "$edge", p: 8, pt: pills ? 8 : 12, gap: 6, "$max-sm": { rounded: CORNER_PHONE }, ...(framed ? { boxShadow: 'var(--shadow-sheet-1)' } : null), children: [pills ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('composer-pills'), items: "center", gap: 4, flexWrap: "wrap", rowGap: 4, px: 2, children: pills })) : null, input, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: 4, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-start'), items: "center", gap: 4, flex: 1, minW: 0, flexWrap: "wrap", children: [plus ? (0, jsx_runtime_1.jsx)(Plus_1.Plus, { ...plus, size: hit, disabled: disabled || plus.disabled }) : null, (carried ?? []).map((c) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-carried'), items: "center", gap: 6, paddingInlineStart: 8, paddingInlineEnd: 4, height: 28, rounded: 8, bg: "$hover", maxW: 180, children: [c.icon ? (0, jsx_runtime_1.jsx)(gui_1.XStack, { "aria-hidden": true, children: c.icon }) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { fontSize: 13, color: "$ink", numberOfLines: 1, shrink: 1, children: c.label }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "button", "aria-label": t('Remove {name}', { name: c.label }), onPress: c.onRemove, width: 20, height: 20, rounded: 6, items: "center", justify: "center", hoverStyle: { bg: '$raised' }, cursor: "pointer", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 12, color: "$hint" }) })] }, c.id))), children] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer-end'), items: "center", gap: 4, shrink: 0, children: [hint ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", numberOfLines: 1, children: hint })) : null, effort ? (0, jsx_runtime_1.jsx)(Dial_1.Dial, { effort: effort, size: hit, disabled: disabled }) : null, commands?.length ? (0, jsx_runtime_1.jsx)(Palette_1.Palette, { commands: commands, open: palette, onOpenChange: setPalette, size: hit, disabled: disabled }) : null, voice ? (0, jsx_runtime_1.jsx)(Dictation_1.Dictation, { voice: voice, disabled: disabled, size: hit, language: language, ...(onLanguage ? { onLanguage } : {}) }) : null, !busy && !lit && talk ? ((0, jsx_runtime_1.jsx)(composer_1.Control, { asChild: true, size: hit, fill: narrow, rounded: 999, ...(narrow ? null : QUIET), focusVisibleStyle: ring_1.RING, children: (0, jsx_runtime_1.jsx)(voice_1.Voice, { voice: talk, disabled: disabled, "data-slot": "composer-talk", says: { idle: t('Voice mode'), listening: t('In conversation — click to hang up'), speaking: t('Hanzo is speaking — talk to interrupt') }, children: () => (0, jsx_runtime_1.jsx)(lucide_icons_2_1.AudioLines, { size: 16, color: narrow ? ON : 'var(--foreground)' }) }) })) : (round)] })] })] }), under] }));
 }

package/dist/chat/Composer.d.ts

@@ -1,109 +1,138 @@
 /**
- * Composer — the one chat input for every Hanzo surface.
+ * Composer — the one composer every Hanzo surface draws: Chat, Dev, Studio, a
+ * room, a reply, a run being steered. A surface hands it slots and defaults and
+ * nothing else; the field, the keys, the controls and their look are here once.
  *
- * Presentational and controlled: it owns no draft, no transport and no model
- * state. `children` is the toolbar slot, which is where a surface puts its
- * `ModelPicker`, attachment control or mode chips — that keeps the shell the
- * same everywhere while the affordances stay per-surface.
+ *   ┌ pills ───────────────────────────────┐   where a run goes, which repository
+ *   │ the field                            │
+ *   │ +  carried…  children     ✦  🎙  ⬆   │   + menu, what the draft carries,
+ *   └──────────────────────────────────────┘   commands, dictation, send / stop
+ *     chips…                 model effort mode
  *
- * The send control is the same button in both states: it submits, and while a
- * turn is in flight it stops. Two buttons in one place was the thing every
- * surface got subtly different.
+ * Above the frame: the surface's `head`, the `/` or `@` list, and the `note`.
+ * Under it, one row: the surface's chips, then the model, the effort and the mode.
  *
- * Escape and ArrowUp are not bound. Dismissal belongs to whatever the composer
- * floats inside, and history recall needs a turn store this has no view of.
+ * THE PERSON'S SETTING (@hanzo/appearance `useComposing`, Settings →
+ * Appearance) decides which key sends and whether the chips, the model
+ * selector and the mode are drawn, everywhere at once. An axis they left on
+ * Auto takes the surface's `defaults`, and the model selector is off until
+ * they turn it on.
  *
- * Growth is `Textarea`'s and follows the content, so a wrapped paragraph raises
- * the field. `rows` is the floor, `maxHeight` the ceiling.
+ * Its paint is @hanzo/design's: `$` tokens and `--primary`, sized through
+ * `--density` (the round controls are @hanzo/composer's `Control`), so text
+ * size, density and accent change it with the rest of the product.
+ *
+ * Its own words are the reader's language (@hanzo/i18n `t`). A host's words —
+ * its placeholder, a shelf's rows, a chip's label — are drawn as given.
  */
-import { XStack, YStack } from '@hanzo/gui';
-import type { ComponentProps, ReactNode } from 'react';
+import { YStack } from '@hanzo/gui';
+import { type Composing } from '@hanzo/appearance';
+import { type Machine } from '@hanzo/voice';
+import { type ComponentProps, type ReactNode } from 'react';
 import { Textarea } from '../backends/gui/index.js';
+import type { PauseSource } from '../models/catalog.js';
+import { type Command } from './Palette.js';
+import { type PlusProps, type Shelf } from './Plus.js';
+import { type Chip, type Mind, type Modes } from './Tune.js';
 /** `onChange` is dropped: here it carries the draft, not a DOM change event. */
 type Stack = Omit<ComponentProps<typeof YStack>, 'children' | 'onChange'>;
 type FieldProps = Omit<ComponentProps<typeof Textarea>, 'value' | 'onChangeText'>;
 /**
- * The resting placeholder.
- *
- * "Ask anything", not "Send a message" and not "Message <model>". It addresses
- * the person rather than describing the mechanism, and being one constant string
- * it never has to be recomputed or re-announced when the model or endpoint
- * changes — which is what a model-named placeholder forces a surface to do.
+ * The resting placeholder. It addresses the person rather than the mechanism,
+ * and as one constant it never re-announces when the model changes.
  */
-export declare const ASK = "Ask anything";
+export declare const ASK: string;
+/** The reading measure: @hanzo/design's prose width, which Width (appearance) retunes. */
+export declare const MEASURE = "var(--container-prose, 48rem)";
+/** The space between turns, px: one rhythm for every thread. */
+export declare const GAP = 20;
+/** The composer's width under a thread: the measure less its 0.75rem gutters, centred, so its edges are the text's. */
+export declare const measure: {
+    readonly width: 'calc(100% - 1.5rem)';
+    readonly maxW: "calc(var(--container-prose, 48rem) - 1.5rem)";
+    readonly mx: 'auto';
+};
+/** The round controls' box, px, and a phone's, a finger's width: `+`, the effort, the mic, its chevron and send all take it, so they share one centreline. */
+export declare const ROUND = 36;
+/** One thing the draft carries, after `+`: a file, a skill that is on. */
+export interface Carried {
+    id: string;
+    label: string;
+    icon?: ReactNode;
+    onRemove: () => void;
+}
 export interface ComposerProps extends Stack {
     value: string;
     onChange: (value: string) => void;
-    /** Called when the draft is submitted. Clearing `value` is the host's job. */
+    /** The draft is submitted. Clearing `value` is the host's job. */
     onSend: () => void;
-    /** Called instead of `onSend` while `busy`. Omit to disable stopping. */
+    /** Called instead of `onSend` while `busy`. Absent, busy only disables send. */
     onStop?: () => void;
-    /** A turn is in flight: the send control becomes stop. */
+    /** A turn is in flight: send becomes stop. */
     busy?: boolean;
     disabled?: boolean;
+    /** Whether send is lit. Default: the draft has words. */
+    ready?: boolean;
     placeholder?: string;
+    /** The field's accessible name, independent of the placeholder. */
+    label?: string;
     /** Row floor for the field. It grows with the draft from here. */
     rows?: number;
-    /** Ceiling for that growth, px. Past it the field scrolls instead. */
+    /** Ceiling for that growth, px. Past it the field scrolls. */
     maxHeight?: number;
-    /** Toolbar slot, rendered at the start of the footer row. */
-    children?: ReactNode;
-    /** Hint shown at the end of the footer row. */
-    hint?: string;
-    /**
-     * The accessible name of the field, independent of `placeholder`.
-     *
-     * A placeholder that rotates renames the control on every tick and gets the
-     * field re-announced mid-sentence. The name is stable; the placeholder is
-     * decoration.
-     */
-    label?: string;
-    /** The field's own props — a ref, a testid, focus handlers, a paste handler. */
+    /** The field's own props — a ref, a testid, a paste handler. */
     field?: FieldProps;
-    /** Replaces the send control. `children` is the START of the footer row, so a
-     *  second commit mode has nowhere else to go. */
-    send?: ReactNode;
-    /**
-     * Drawn ABOVE the frame — the row of context a draft is sent with (where it
-     * runs, which repository, which branch). Outside the frame on purpose: it
-     * says what the draft is about, and the field says what it is.
-     */
+    /** A word at the end of the tool row, before the controls: a status. */
+    hint?: string;
+    /** The tool row's start, after `+` and what the draft carries. */
+    children?: ReactNode;
+    /** Above the frame, at its width: what the draft is sent with, a banner. */
     head?: ReactNode;
-    /**
-     * Drawn UNDER the frame — attach, voice, mode at its start and the model at
-     * its end, as the host arranges them. Unlike `children`, which lives inside
-     * the frame beside the send control.
-     */
-    foot?: ReactNode;
-    /**
-     * One line: the field and the send control share a single row inside the
-     * frame, and the send control is a glyph at the field's end — Enter's own
-     * mark while idle, Stop while busy. `children` and `hint` join that row
-     * before it. Unset, the frame is the stacked field-over-toolbar it has
-     * always been.
-     */
-    inline?: boolean;
-}
-export declare function Composer({ value, onChange, onSend, onStop, busy, disabled, placeholder, rows, maxHeight, children, hint, label, field, send, head, foot, inline, ...props }: ComposerProps): import("react").JSX.Element;
-type Row = Omit<ComponentProps<typeof XStack>, 'children'>;
-export interface ComposerToolProps extends Row {
-    /** The control's name — what a screen reader says and the tooltip shows. */
-    label: string;
-    icon?: ReactNode;
-    /** Words drawn after the icon — a mode, a model. Absent, the tool is icon-only. */
-    text?: string;
-    /** A trailing caret: this opens a menu. */
-    caret?: boolean;
-    onPress?: () => void;
-    disabled?: boolean;
+    /** The frame's first row: the surface's pills — where a run goes, which repository, which branch. */
+    pills?: ReactNode;
+    /** What the draft carries, as chips after `+`. */
+    carried?: readonly Carried[];
+    /** The `+` menu. Absent, there is none. */
+    plus?: PlusProps;
+    /** `/` lists these (the skills) above the frame. */
+    slash?: Shelf;
+    /** `@` lists these (the plugins) above the frame. */
+    at?: Shelf;
+    /** The commands ✦ and ⌘K open. */
+    commands?: readonly Command[];
+    /** Under the frame, at the row's start. Hidden where the person hid chips. */
+    chips?: readonly Chip[];
+    /** The model, drawn where the person turned the model selector on. Null where the next send names none (steering a run). */
+    mind?: Mind | null;
+    /** The effort, one in force. Null where the next send takes none (steering a run). */
+    effort?: Modes | null;
+    limits?: PauseSource | null;
+    /** A model the plan does not grant was chosen: the way to the plan that does. */
+    onUpgrade?: (model: string) => void;
+    /** The mode, as the pill at the row's end. */
+    mode?: Modes | null;
+    /** Dictation into the draft (@hanzo/voice `useVoice` + `useDictation`). */
+    voice?: Machine;
+    /** The language dictation listens in, null for Auto, and how to change it. */
+    language?: string | null;
+    onLanguage?: (id: string | null) => void;
+    /** A spoken conversation (@hanzo/voice `useTalk`): the round button while the draft is empty. */
+    talk?: Machine;
+    /** Above the frame, nearest it: the person's suggestions, at every width. */
+    starters?: ReactNode;
+    /** Centred just above the frame: what every message is sent under. */
+    note?: ReactNode;
+    /** At the reading column's width (`measure`), centred: the composer under a thread, so its edges are the text's. Absent, the width of what holds it. */
+    column?: boolean;
+    /** Drawn on a pane: the frame floats as a pane of its own. */
+    framed?: boolean;
+    /** A phone: suggestions go above the frame and every target is 44px. Absent, the viewport decides. */
+    narrow?: boolean;
+    /** This surface's answer where the person left an axis on Auto. */
+    defaults?: Composing;
 }
-/**
- * ComposerTool — one quiet control in a composer's `foot` or `head`: attach,
- * voice, a mode, the model. 24px tall, muted until pointed at, and a real
- * button to the keyboard. Its name is `label` whether or not it shows words,
- * because an icon-only control is the whole navigation for someone who cannot
- * see the icon.
- */
-export declare function ComposerTool({ label, icon, text, caret, onPress, disabled, ...rest }: ComposerToolProps): import("react").JSX.Element;
+/** Ctrl+U (⌘U) uploads, while a composer with an upload is on the page. */
+export declare function useUpload(upload: (() => void) | undefined): void;
+export declare function Composer({ value, onChange, onSend, onStop, busy, disabled, ready: readyProp, placeholder, label, rows, maxHeight, field, hint, children, head, pills, carried, plus, slash, at, commands, chips, mind, effort, limits, onUpgrade, mode, voice, language, onLanguage, talk, starters, note, column, framed, narrow: narrowProp, defaults, ...props }: ComposerProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Composer.d.ts.map

package/dist/chat/Composer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../../src/chat/Composer.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAe,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAExD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAU,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAIlD,gFAAgF;AAChF,KAAK,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAA;AACzE,KAAK,UAAU,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,CAAA;AAyBjF;;;;;;;GAOG;AACH,eAAO,MAAM,GAAG,iBAAiB,CAAA;AAEjC,MAAM,WAAW,aAAc,SAAQ,KAAK;IAC1C,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,8EAA8E;IAC9E,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,yEAAyE;IACzE,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,0DAA0D;IAC1D,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sEAAsE;IACtE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB;qDACiD;IACjD,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,IAAY,EACZ,QAAgB,EAChB,WAAiB,EACjB,IAAe,EACf,SAAmB,EACnB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,IAAI,EACJ,MAAc,EACd,GAAG,KAAK,EACT,EAAE,aAAa,+BA2Kf;AAED,KAAK,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,CAAA;AAE1D,MAAM,WAAW,iBAAkB,SAAQ,GAAG;IAC5C,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,mFAAmF;IACnF,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,2CAA2C;IAC3C,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,IAAI,EACJ,KAAa,EACb,OAAO,EACP,QAAgB,EAChB,GAAG,IAAI,EACR,EAAE,iBAAiB,+BA0CnB"}
+{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../../src/chat/Composer.tsx"],"names":[],"mappings":"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"}