@hanzo/ui 8.0.27 → 8.0.31

package/dist/chat/Code.cjs

@@ -0,0 +1,70 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Code = Code;
+exports.CopyButton = CopyButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Code — a labelled, copyable code region.
+ *
+ * The language label and the controls live in a bar above the code, never
+ * floating over it: an overlaid copy button covers the first line, which is
+ * where the prompt or the import sits and the part most often being read.
+ *
+ * Highlighting is not here. Surfaces disagree on the highlighter (and on whether
+ * they want one at all), and a package that picked would either impose a large
+ * dependency or be bypassed. `children` is rendered as-is, so a surface can pass
+ * plain text or its own highlighted nodes.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const slot_1 = require("../backends/gui/slot.cjs");
+/** How long the copy control shows its confirmation, in ms. */
+const CONFIRM = 2000;
+/**
+ * Monospace stack, applied through `style` rather than a `$mono` token.
+ *
+ * There is no mono family in the token set — only `$body` and `$heading` — so a
+ * `fontFamily="$mono"` would not typecheck, and picking `$body` would set code
+ * in a proportional face, where columns stop aligning and l/1/I stop being
+ * distinguishable. The CSS variable is honoured when the host defines Geist
+ * Mono and falls back to the platform's own monospace when it does not.
+ */
+const MONO = {
+    fontFamily: 'var(--font-geist-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+};
+function Code({ children, language = 'text', value, actions }) {
+    const text = value ?? (typeof children === 'string' ? children : '');
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('code'), width: "100%", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$color2", overflow: "hidden", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", px: "$3", py: "$1.5", borderBottomWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", style: MONO, color: "$color10", children: language }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), actions, text ? (0, jsx_runtime_1.jsx)(CopyButton, { value: text }) : null] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { px: "$3", py: "$2.5", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", style: MONO, lineHeight: 20, children: children }) })] }));
+}
+/**
+ * CopyButton — copy with a confirmation tick.
+ *
+ * The tick is the point. A control that looks identical before and after leaves
+ * the reader unsure whether it fired, and the usual response is to press it
+ * again. Reverts after `CONFIRM`, and clears its timer on unmount so it cannot
+ * set state on a component that is gone.
+ */
+function CopyButton({ value, label = 'Copy' }) {
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const timer = (0, react_1.useRef)(undefined);
+    (0, react_1.useEffect)(() => () => clearTimeout(timer.current), []);
+    const copy = () => {
+        // Optional-chained rather than assumed: `navigator.clipboard` is undefined
+        // in insecure contexts and absent entirely on native, and these components
+        // are meant to run on both.
+        navigator?.clipboard
+            ?.writeText(value)
+            .then(() => {
+            setCopied(true);
+            clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), CONFIRM);
+        })
+            .catch(() => {
+            // A refused clipboard needs no toast — the missing tick already says it,
+            // and an error dialog for a failed copy is louder than the failure.
+        });
+    };
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 24, height: 24, items: "center", justify: "center", rounded: "$2", cursor: "pointer", opacity: 0.7, onPress: copy, role: "button", tabIndex: 0, "aria-label": copied ? 'Copied' : label, ...(0, slot_1.tip)(copied ? 'Copied' : label), hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: copied ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 14 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, { size: 14 }) }));
+}

package/dist/chat/Code.d.ts

@@ -0,0 +1,25 @@
+import { type ReactNode } from 'react';
+export interface CodeProps {
+    children?: ReactNode;
+    /** Shown in the label bar. */
+    language?: string;
+    /** Raw text for the copy control. Falls back to `children` when it is a string. */
+    value?: string;
+    /** Extra controls in the label bar, before copy. */
+    actions?: ReactNode;
+}
+export declare function Code({ children, language, value, actions }: CodeProps): import("react/jsx-runtime").JSX.Element;
+export interface CopyButtonProps {
+    value: string;
+    label?: string;
+}
+/**
+ * CopyButton — copy with a confirmation tick.
+ *
+ * The tick is the point. A control that looks identical before and after leaves
+ * the reader unsure whether it fired, and the usual response is to press it
+ * again. Reverts after `CONFIRM`, and clears its timer on unmount so it cannot
+ * set state on a component that is gone.
+ */
+export declare function CopyButton({ value, label }: CopyButtonProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Code.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Code.d.ts","sourceRoot":"","sources":["../../src/chat/Code.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAoBnE,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,8BAA8B;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,mFAAmF;IACnF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AAED,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAiB,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,SAAS,2CAoC9E;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,KAAc,EAAE,EAAE,eAAe,2CA2CpE"}

package/dist/chat/Code.js

@@ -0,0 +1,67 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Code — a labelled, copyable code region.
+ *
+ * The language label and the controls live in a bar above the code, never
+ * floating over it: an overlaid copy button covers the first line, which is
+ * where the prompt or the import sits and the part most often being read.
+ *
+ * Highlighting is not here. Surfaces disagree on the highlighter (and on whether
+ * they want one at all), and a package that picked would either impose a large
+ * dependency or be bypassed. `children` is rendered as-is, so a surface can pass
+ * plain text or its own highlighted nodes.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Check, Copy } from '@hanzogui/lucide-icons-2';
+import { useEffect, useRef, useState } from 'react';
+import { slot, tip } from '../backends/gui/slot.js';
+/** How long the copy control shows its confirmation, in ms. */
+const CONFIRM = 2000;
+/**
+ * Monospace stack, applied through `style` rather than a `$mono` token.
+ *
+ * There is no mono family in the token set — only `$body` and `$heading` — so a
+ * `fontFamily="$mono"` would not typecheck, and picking `$body` would set code
+ * in a proportional face, where columns stop aligning and l/1/I stop being
+ * distinguishable. The CSS variable is honoured when the host defines Geist
+ * Mono and falls back to the platform's own monospace when it does not.
+ */
+const MONO = {
+    fontFamily: 'var(--font-geist-mono, ui-monospace, SFMono-Regular, Menlo, monospace)',
+};
+export function Code({ children, language = 'text', value, actions }) {
+    const text = value ?? (typeof children === 'string' ? children : '');
+    return (_jsxs(YStack, { ...slot('code'), width: "100%", rounded: "$4", borderWidth: 1, borderColor: "$borderColor", bg: "$color2", overflow: "hidden", children: [_jsxs(XStack, { items: "center", gap: "$1", px: "$3", py: "$1.5", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsx(SizableText, { size: "$1", style: MONO, color: "$color10", children: language }), _jsx(XStack, { flex: 1 }), actions, text ? _jsx(CopyButton, { value: text }) : null] }), _jsx(YStack, { px: "$3", py: "$2.5", children: _jsx(SizableText, { size: "$1", style: MONO, lineHeight: 20, children: children }) })] }));
+}
+/**
+ * CopyButton — copy with a confirmation tick.
+ *
+ * The tick is the point. A control that looks identical before and after leaves
+ * the reader unsure whether it fired, and the usual response is to press it
+ * again. Reverts after `CONFIRM`, and clears its timer on unmount so it cannot
+ * set state on a component that is gone.
+ */
+export function CopyButton({ value, label = 'Copy' }) {
+    const [copied, setCopied] = useState(false);
+    const timer = useRef(undefined);
+    useEffect(() => () => clearTimeout(timer.current), []);
+    const copy = () => {
+        // Optional-chained rather than assumed: `navigator.clipboard` is undefined
+        // in insecure contexts and absent entirely on native, and these components
+        // are meant to run on both.
+        navigator?.clipboard
+            ?.writeText(value)
+            .then(() => {
+            setCopied(true);
+            clearTimeout(timer.current);
+            timer.current = setTimeout(() => setCopied(false), CONFIRM);
+        })
+            .catch(() => {
+            // A refused clipboard needs no toast — the missing tick already says it,
+            // and an error dialog for a failed copy is louder than the failure.
+        });
+    };
+    return (_jsx(XStack, { width: 24, height: 24, items: "center", justify: "center", rounded: "$2", cursor: "pointer", opacity: 0.7, onPress: copy, role: "button", tabIndex: 0, "aria-label": copied ? 'Copied' : label, ...tip(copied ? 'Copied' : label), hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: copied ? _jsx(Check, { size: 14 }) : _jsx(Copy, { size: 14 }) }));
+}
+//# sourceMappingURL=Code.js.map

package/dist/chat/Code.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Code.js","sourceRoot":"","sources":["../../src/chat/Code.tsx"],"names":[],"mappings":"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"}

package/dist/chat/Composer.cjs

@@ -0,0 +1,56 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ASK = void 0;
+exports.Composer = Composer;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Composer — the one chat input for every Hanzo surface.
+ *
+ * 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
+ * `ModelSelector`, attachment control or mode chips — that keeps the shell the
+ * same everywhere while the affordances stay per-surface.
+ *
+ * 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.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_2 = require("../backends/gui/index.cjs");
+const slot_1 = require("../backends/gui/slot.cjs");
+const send_1 = require("./send.cjs");
+const PAD = 8;
+const MIN_ROWS = 1;
+/**
+ * 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.
+ */
+exports.ASK = 'Ask anything';
+function Composer({ value, onChange, onSend, onStop, busy = false, disabled = false, placeholder = exports.ASK, rows = MIN_ROWS, children, hint, }) {
+    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,
+        };
+        if (!(0, send_1.sends)(key, mods))
+            return;
+        e.preventDefault?.();
+        if (sendable)
+            onSend();
+    };
+    return ((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, children: [(0, jsx_runtime_1.jsx)(gui_2.Textarea, { ...(0, slot_1.slot)('composer-field'), rows: rows, value: value, placeholder: placeholder, disabled: disabled, onChangeText: onChange, onKeyDown: keyed, borderWidth: 0, "aria-label": placeholder }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: PAD, children: [children, (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), hint ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$color10", children: hint })) : null, (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', children: busy ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Square, { size: 14 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowUp, { size: 16 }) })] })] }));
+}

package/dist/chat/Composer.d.ts

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+/**
+ * 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.
+ */
+export declare const ASK = "Ask anything";
+export interface ComposerProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** Called when the draft is submitted. Clearing `value` is the host's job. */
+    onSend: () => void;
+    /** Called instead of `onSend` while `busy`. Omit to disable stopping. */
+    onStop?: () => void;
+    /** A turn is in flight: the send control becomes stop. */
+    busy?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    /** Row floor for the field. It grows with the draft from here. */
+    rows?: number;
+    /** Toolbar slot, rendered at the start of the footer row. */
+    children?: ReactNode;
+    /** Hint shown at the end of the footer row. */
+    hint?: string;
+}
+export declare function Composer({ value, onChange, onSend, onStop, busy, disabled, placeholder, rows, children, hint, }: ComposerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Composer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.d.ts","sourceRoot":"","sources":["../../src/chat/Composer.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAStC;;;;;;;GAOG;AACH,eAAO,MAAM,GAAG,iBAAiB,CAAA;AAEjC,MAAM,WAAW,aAAa;IAC5B,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,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,+CAA+C;IAC/C,IAAI,CAAC,EAAE,MAAM,CAAA;CACd;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,IAAY,EACZ,QAAgB,EAChB,WAAiB,EACjB,IAAe,EACf,QAAQ,EACR,IAAI,GACL,EAAE,aAAa,2CA8Df"}

package/dist/chat/Composer.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Composer — the one chat input for every Hanzo surface.
+ *
+ * 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
+ * `ModelSelector`, attachment control or mode chips — that keeps the shell the
+ * same everywhere while the affordances stay per-surface.
+ *
+ * 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.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { ArrowUp, Square } from '@hanzogui/lucide-icons-2';
+import { Button, Textarea } from '../backends/gui/index.js';
+import { slot } from '../backends/gui/slot.js';
+import { ready, sends } from './send.js';
+const PAD = 8;
+const MIN_ROWS = 1;
+/**
+ * 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.
+ */
+export const ASK = 'Ask anything';
+export function Composer({ value, onChange, onSend, onStop, busy = false, disabled = false, placeholder = ASK, rows = MIN_ROWS, children, hint, }) {
+    const sendable = 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,
+        };
+        if (!sends(key, mods))
+            return;
+        e.preventDefault?.();
+        if (sendable)
+            onSend();
+    };
+    return (_jsxs(YStack, { ...slot('composer'), width: "100%", rounded: "$5", borderWidth: 1, borderColor: "$borderColor", bg: "$background", p: PAD, gap: PAD, children: [_jsx(Textarea, { ...slot('composer-field'), rows: rows, value: value, placeholder: placeholder, disabled: disabled, onChangeText: onChange, onKeyDown: keyed, borderWidth: 0, "aria-label": placeholder }), _jsxs(XStack, { items: "center", gap: PAD, children: [children, _jsx(XStack, { flex: 1 }), hint ? (_jsx(SizableText, { size: "$1", color: "$color10", children: hint })) : null, _jsx(Button, { ...slot('composer-send'), size: "sm", disabled: busy ? !onStop : !sendable, onPress: busy ? onStop : onSend, "aria-label": busy ? 'Stop' : 'Send', children: busy ? _jsx(Square, { size: 14 }) : _jsx(ArrowUp, { size: 16 }) })] })] }));
+}
+//# sourceMappingURL=Composer.js.map

package/dist/chat/Composer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Composer.js","sourceRoot":"","sources":["../../src/chat/Composer.tsx"],"names":[],"mappings":"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"}

package/dist/chat/Header.cjs

@@ -0,0 +1,49 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Header = Header;
+exports.HeaderButton = HeaderButton;
+exports.ShareButton = ShareButton;
+exports.AsideToggle = AsideToggle;
+exports.Aside = Aside;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Header — the conversation title bar.
+ *
+ * Title on the left, `children` as the action slot on the right. The actions are
+ * a slot rather than a fixed set because what belongs there is per-surface:
+ * hanzo.chat shares and opens a details rail, the console shows the owning
+ * project, hanzo.app shows neither.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const slot_1 = require("../backends/gui/slot.cjs");
+function Header({ title, onOpenMenu, children }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('chat-header'), width: "100%", height: 48, shrink: 0, items: "center", gap: "$2", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", shrink: 1, children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", fontWeight: "500", numberOfLines: 1, children: title }), onOpenMenu ? ((0, jsx_runtime_1.jsx)(HeaderButton, { label: "Conversation options", onPress: onOpenMenu, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Ellipsis, { size: 16 }) })) : null] }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), children] }));
+}
+function HeaderButton({ label, onPress, children }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 32, height: 32, items: "center", justify: "center", rounded: "$3", cursor: "pointer", opacity: 0.7, onPress: onPress, role: "button", tabIndex: 0, "aria-label": label, ...(0, slot_1.tip)(label), hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: children }));
+}
+/**
+ * ShareButton — carries a word, unlike its neighbours.
+ *
+ * Sharing sends the conversation somewhere else and is not quietly undoable, so
+ * it reads as a label rather than a glyph. Everything reversible in this bar is
+ * an icon; this deliberately is not.
+ */
+function ShareButton({ label = 'Share', onPress }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('chat-share'), items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", cursor: "pointer", opacity: 0.8, onPress: onPress, role: "button", tabIndex: 0, hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Share2, { size: 14 }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", fontWeight: "500", children: label })] }));
+}
+function AsideToggle({ label = 'Toggle details panel', onPress }) {
+    return ((0, jsx_runtime_1.jsx)(HeaderButton, { label: label, onPress: onPress, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.PanelRight, { size: 16 }) }));
+}
+/**
+ * Aside — the right rail (sources, artifacts, run details).
+ *
+ * Its own column, not an overlay: an overlay would sit on top of the prose the
+ * reader is comparing it against, which is the one thing a citation panel must
+ * not do. Surfaces hide it at narrow widths by not rendering it.
+ */
+function Aside({ children, width = 320 }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('chat-aside'), width: width, shrink: 0, height: "100%", p: "$3", gap: "$3", borderLeftWidth: 1, borderColor: "$borderColor", children: children }));
+}

package/dist/chat/Header.d.ts

@@ -0,0 +1,46 @@
+import type { ReactNode } from 'react';
+export interface HeaderProps {
+    title: string;
+    /** Overflow menu next to the title. Omit to hide it. */
+    onOpenMenu?: () => void;
+    /** Action slot, rendered at the end of the row. */
+    children?: ReactNode;
+}
+export declare function Header({ title, onOpenMenu, children }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export interface HeaderButtonProps {
+    /** Required — the accessible name for an icon-only control. */
+    label: string;
+    onPress?: () => void;
+    children?: ReactNode;
+}
+export declare function HeaderButton({ label, onPress, children }: HeaderButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface ShareButtonProps {
+    label?: string;
+    onPress?: () => void;
+}
+/**
+ * ShareButton — carries a word, unlike its neighbours.
+ *
+ * Sharing sends the conversation somewhere else and is not quietly undoable, so
+ * it reads as a label rather than a glyph. Everything reversible in this bar is
+ * an icon; this deliberately is not.
+ */
+export declare function ShareButton({ label, onPress }: ShareButtonProps): import("react/jsx-runtime").JSX.Element;
+export interface AsideToggleProps {
+    label?: string;
+    onPress?: () => void;
+}
+export declare function AsideToggle({ label, onPress }: AsideToggleProps): import("react/jsx-runtime").JSX.Element;
+export interface AsideProps {
+    children?: ReactNode;
+    width?: number;
+}
+/**
+ * Aside — the right rail (sources, artifacts, run details).
+ *
+ * Its own column, not an overlay: an overlay would sit on top of the prose the
+ * reader is comparing it against, which is the one thing a citation panel must
+ * not do. Surfaces hide it at narrow widths by not rendering it.
+ */
+export declare function Aside({ children, width }: AsideProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Header.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/chat/Header.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,WAAW,2CAiClE;AAED,MAAM,WAAW,iBAAiB;IAChC,+DAA+D;IAC/D,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,iBAAiB,2CAqB3E;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAe,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CAuBzE;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,wBAAgB,WAAW,CAAC,EAAE,KAA8B,EAAE,OAAO,EAAE,EAAE,gBAAgB,2CAMxF;AAED,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,EAAE,QAAQ,EAAE,KAAW,EAAE,EAAE,UAAU,2CAe1D"}

package/dist/chat/Header.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Header — the conversation title bar.
+ *
+ * Title on the left, `children` as the action slot on the right. The actions are
+ * a slot rather than a fixed set because what belongs there is per-surface:
+ * hanzo.chat shares and opens a details rail, the console shows the owning
+ * project, hanzo.app shows neither.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { Ellipsis, PanelRight, Share2 } from '@hanzogui/lucide-icons-2';
+import { slot, tip } from '../backends/gui/slot.js';
+export function Header({ title, onOpenMenu, children }) {
+    return (_jsxs(XStack, { ...slot('chat-header'), width: "100%", height: 48, shrink: 0, items: "center", gap: "$2", px: "$3", borderBottomWidth: 1, borderColor: "$borderColor", bg: "$background", children: [_jsxs(XStack, { items: "center", gap: "$1", shrink: 1, children: [_jsx(SizableText, { size: "$2", fontWeight: "500", numberOfLines: 1, children: title }), onOpenMenu ? (_jsx(HeaderButton, { label: "Conversation options", onPress: onOpenMenu, children: _jsx(Ellipsis, { size: 16 }) })) : null] }), _jsx(XStack, { flex: 1 }), children] }));
+}
+export function HeaderButton({ label, onPress, children }) {
+    return (_jsx(XStack, { width: 32, height: 32, items: "center", justify: "center", rounded: "$3", cursor: "pointer", opacity: 0.7, onPress: onPress, role: "button", tabIndex: 0, "aria-label": label, ...tip(label), hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: children }));
+}
+/**
+ * ShareButton — carries a word, unlike its neighbours.
+ *
+ * Sharing sends the conversation somewhere else and is not quietly undoable, so
+ * it reads as a label rather than a glyph. Everything reversible in this bar is
+ * an icon; this deliberately is not.
+ */
+export function ShareButton({ label = 'Share', onPress }) {
+    return (_jsxs(XStack, { ...slot('chat-share'), items: "center", gap: "$1.5", px: "$2.5", py: "$1.5", rounded: "$3", cursor: "pointer", opacity: 0.8, onPress: onPress, role: "button", tabIndex: 0, hoverStyle: { bg: '$color4', opacity: 1 }, pressStyle: { bg: '$color5' }, children: [_jsx(Share2, { size: 14 }), _jsx(SizableText, { size: "$1", fontWeight: "500", children: label })] }));
+}
+export function AsideToggle({ label = 'Toggle details panel', onPress }) {
+    return (_jsx(HeaderButton, { label: label, onPress: onPress, children: _jsx(PanelRight, { size: 16 }) }));
+}
+/**
+ * Aside — the right rail (sources, artifacts, run details).
+ *
+ * Its own column, not an overlay: an overlay would sit on top of the prose the
+ * reader is comparing it against, which is the one thing a citation panel must
+ * not do. Surfaces hide it at narrow widths by not rendering it.
+ */
+export function Aside({ children, width = 320 }) {
+    return (_jsx(YStack, { ...slot('chat-aside'), width: width, shrink: 0, height: "100%", p: "$3", gap: "$3", borderLeftWidth: 1, borderColor: "$borderColor", children: children }));
+}
+//# sourceMappingURL=Header.js.map

package/dist/chat/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../src/chat/Header.tsx"],"names":[],"mappings":"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"}

package/dist/chat/Message.cjs

@@ -0,0 +1,27 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = Message;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Message — one turn in a thread.
+ *
+ * Role drives presentation and nothing else: a user turn is a contained bubble
+ * that shrinks to its content, an assistant turn is full-bleed prose, a system
+ * turn is a muted aside. Content is `children`, so the surface keeps its own
+ * markdown pipeline — the surfaces disagree on remark plugins and none of that
+ * belongs in a presentational package.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+function Message({ role, children, actions, busy = false, icon }) {
+    if (role === 'system')
+        return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('message'), "data-role": "system", width: "100%", justify: "center", py: "$2", children: (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", color: "$color10", text: "center", children: children }) }));
+    const mine = role === 'user';
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('message'), "data-role": role, width: "100%", justify: mine ? 'flex-end' : 'flex-start', gap: "$2", children: [icon && !mine ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { pt: "$1", children: icon }) : null, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('message-body'), "data-bubble": mine ? 'true' : undefined, gap: "$2", maxW: mine ? '80%' : '100%', flex: mine ? undefined : 1, ...(mine && {
+                    bg: '$color3',
+                    rounded: '$5',
+                    px: '$3',
+                    py: '$2',
+                }), children: [children, busy ? (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('message-busy'), size: "$2", color: "$color10", children: "\u2026" }) : null, actions ? (0, jsx_runtime_1.jsx)(gui_1.XStack, { gap: "$1", items: "center", children: actions }) : null] })] }));
+}

package/dist/chat/Message.d.ts

@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+export type Role = 'user' | 'assistant' | 'system';
+export interface MessageProps {
+    role: Role;
+    children?: ReactNode;
+    /** Row rendered under the turn — copy, retry, feedback. */
+    actions?: ReactNode;
+    /** The turn is still streaming. */
+    busy?: boolean;
+    /** Leading affordance for an assistant turn: avatar or model mark. */
+    icon?: ReactNode;
+}
+export declare function Message({ role, children, actions, busy, icon }: MessageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Message.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Message.d.ts","sourceRoot":"","sources":["../../src/chat/Message.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,MAAM,IAAI,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAA;AAElD,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,IAAI,CAAA;IACV,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sEAAsE;IACtE,IAAI,CAAC,EAAE,SAAS,CAAA;CACjB;AAED,wBAAgB,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAY,EAAE,IAAI,EAAE,EAAE,YAAY,2CAuCpF"}

package/dist/chat/Message.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Message — one turn in a thread.
+ *
+ * Role drives presentation and nothing else: a user turn is a contained bubble
+ * that shrinks to its content, an assistant turn is full-bleed prose, a system
+ * turn is a muted aside. Content is `children`, so the surface keeps its own
+ * markdown pipeline — the surfaces disagree on remark plugins and none of that
+ * belongs in a presentational package.
+ */
+import { SizableText, Text, XStack, YStack } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+export function Message({ role, children, actions, busy = false, icon }) {
+    if (role === 'system')
+        return (_jsx(XStack, { ...slot('message'), "data-role": "system", width: "100%", justify: "center", py: "$2", children: _jsx(Text, { fontSize: "$1", color: "$color10", text: "center", children: children }) }));
+    const mine = role === 'user';
+    return (_jsxs(XStack, { ...slot('message'), "data-role": role, width: "100%", justify: mine ? 'flex-end' : 'flex-start', gap: "$2", children: [icon && !mine ? _jsx(YStack, { pt: "$1", children: icon }) : null, _jsxs(YStack, { ...slot('message-body'), "data-bubble": mine ? 'true' : undefined, gap: "$2", maxW: mine ? '80%' : '100%', flex: mine ? undefined : 1, ...(mine && {
+                    bg: '$color3',
+                    rounded: '$5',
+                    px: '$3',
+                    py: '$2',
+                }), children: [children, busy ? _jsx(SizableText, { ...slot('message-busy'), size: "$2", color: "$color10", children: "\u2026" }) : null, actions ? _jsx(XStack, { gap: "$1", items: "center", children: actions }) : null] })] }));
+}
+//# sourceMappingURL=Message.js.map

package/dist/chat/Message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Message.js","sourceRoot":"","sources":["../../src/chat/Message.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;GAQG;AACH,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAG9D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAe3C,MAAM,UAAU,OAAO,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,GAAG,KAAK,EAAE,IAAI,EAAgB;IACnF,IAAI,IAAI,KAAK,QAAQ;QACnB,OAAO,CACL,KAAC,MAAM,OAAK,IAAI,CAAC,SAAS,CAAC,eAAY,QAAQ,EAAC,KAAK,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,YACnF,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,EAAC,IAAI,EAAC,QAAQ,YAC/C,QAAQ,GACJ,GACA,CACV,CAAA;IAEH,MAAM,IAAI,GAAG,IAAI,KAAK,MAAM,CAAA;IAC5B,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,SAAS,CAAC,eACR,IAAI,EACf,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,EACzC,GAAG,EAAC,IAAI,aAEP,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,EAAE,EAAC,IAAI,YAAE,IAAI,GAAU,CAAC,CAAC,CAAC,IAAI,EACvD,MAAC,MAAM,OACD,IAAI,CAAC,cAAc,CAAC,iBACX,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,GAAG,EAAC,IAAI,EACR,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,EAC3B,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,KACtB,CAAC,IAAI,IAAI;oBACX,EAAE,EAAE,SAAS;oBACb,OAAO,EAAE,IAAI;oBACb,EAAE,EAAE,IAAI;oBACR,EAAE,EAAE,IAAI;iBACT,CAAC,aAED,QAAQ,EACR,IAAI,CAAC,CAAC,CAAC,KAAC,WAAW,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,uBAAgB,CAAC,CAAC,CAAC,IAAI,EAC/F,OAAO,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,YAAE,OAAO,GAAU,CAAC,CAAC,CAAC,IAAI,IAC7D,IACF,CACV,CAAA;AACH,CAAC"}