@hanzo/ui 8.27.15 → 8.27.16

package/dist/backends/gui/toaster.d.ts

@@ -1,17 +1,3 @@
-/**
- * Toaster — the toast viewport, mounted once near the root of an app.
- *
- * gui already owns the whole thing: `@hanzogui/toast/v2` ships a sonner-shaped
- * `toast()` observer and a `Toaster` that portals a themed, swipe-dismissable
- * stack on web, native and desktop. So this is a prop translation, not a
- * reimplementation.
- *
- * `className`, `style` and the per-part `classNames` are accepted and ignored:
- * gui paints from theme tokens (`$background`, `$color`, `$borderColor`), the one
- * styling channel that also exists on native. They stay in the type so existing
- * call sites keep compiling.
- */
-import type { GuiElement } from '@hanzo/gui';
 import { toast, type ExternalToast, type ToasterProps as GuiToasterProps } from '@hanzogui/toast/v2';
 /** Sonner's per-part class hooks. Inert — see the note above. */
 export type ToasterClassNames = Partial<Record<'toast' | 'title' | 'description' | 'icon' | 'actionButton' | 'cancelButton' | 'closeButton', string>>;
@@ -26,6 +12,6 @@ export interface ToasterProps extends Omit<GuiToasterProps, 'toastOptions'> {
         classNames?: ToasterClassNames;
     };
 }
-declare const Toaster: import("react").ForwardRefExoticComponent<ToasterProps & import("react").RefAttributes<GuiElement>>;
+declare const Toaster: import("react").ForwardRefExoticComponent<ToasterProps & import("react").RefAttributes<any>>;
 export { Toaster, toast };
 //# sourceMappingURL=toaster.d.ts.map

package/dist/backends/gui/toaster.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/toaster.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAC5C,OAAO,EAEL,KAAK,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,oBAAoB,CAAA;AAG3B,iEAAiE;AACjE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACrC,MAAM,CACF,OAAO,GACP,OAAO,GACP,aAAa,GACb,MAAM,GACN,cAAc,GACd,cAAc,GACd,aAAa,EACf,MAAM,CACP,CACF,CAAA;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACzE,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;IACvC,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,aAAa,GAAG;QAAE,UAAU,CAAC,EAAE,iBAAiB,CAAA;KAAE,CAAA;CAClE;AAED,QAAA,MAAM,OAAO,qGAGX,CAAA;AAEF,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"toaster.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/toaster.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,EACL,KAAK,aAAa,EAClB,KAAK,YAAY,IAAI,eAAe,EACrC,MAAM,oBAAoB,CAAA;AAG3B,iEAAiE;AACjE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CACrC,MAAM,CACF,OAAO,GACP,OAAO,GACP,aAAa,GACb,MAAM,GACN,cAAc,GACd,cAAc,GACd,aAAa,EACf,MAAM,CACP,CACF,CAAA;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IACzE,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kDAAkD;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;IACvC,2EAA2E;IAC3E,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,aAAa,GAAG;QAAE,UAAU,CAAC,EAAE,iBAAiB,CAAA;KAAE,CAAA;CAClE;AAED,QAAA,MAAM,OAAO,8FAGX,CAAA;AAEF,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/backends/gui/toggle.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps, MouseEventHandler, ReactNode } from 'react';
 export type ToggleVariant = 'default' | 'outline';
 export type ToggleSize = 'default' | 'sm' | 'lg';
-declare const ToggleFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+declare const ToggleFrame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, any, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     disabled?: boolean | undefined;
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
     fullscreen?: boolean | undefined;

package/dist/backends/gui/video-player.d.ts

@@ -24,7 +24,7 @@ export type MediaSubtitleTrack = {
     default?: boolean;
 };
 export type MediaPlayerSize = 'sm' | 'md' | 'lg' | 'full';
-declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, import("@hanzogui/web").GuiElement, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
+declare const Frame: import("@hanzogui/web").GuiComponent<import("@hanzogui/web").TamaDefer, any, import("@hanzogui/core").RNGuiViewNonStyleProps, import("@hanzogui/web").StackStyleBase, {
     elevation?: number | import("@hanzogui/web").SizeTokens | undefined;
     fullscreen?: boolean | undefined;
     size?: "full" | "lg" | "md" | "sm" | undefined;

package/dist/chat/Composer.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ASK = void 0;
 exports.Composer = Composer;
+exports.ComposerTool = ComposerTool;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Composer — the one chat input for every Hanzo surface.
@@ -35,6 +36,16 @@ 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;
+/**
+ * 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.
+ */
+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;
 /**
  * The resting placeholder.
  *
@@ -44,7 +55,7 @@ const FLOOR = 44;
  * 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, maxHeight = CEILING, children, hint, label, field, send, ...props }) {
+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 ?? '';
@@ -64,12 +75,52 @@ function Composer({ value, onChange, onSend, onStop, busy = false, disabled = fa
         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, ...props, children: [(0, jsx_runtime_1.jsx)(gui_2.Textarea, { ...(0, slot_1.slot)('composer-field'), rows: rows, placeholder: placeholder, disabled: disabled, borderWidth: 0, 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.
-                value: value, onChangeText: onChange, onKeyDown: (e) => {
-                    field?.onKeyDown?.(e);
-                    if (!e?.defaultPrevented)
-                        keyed(e);
-                } }), (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: "$soft", children: hint })) : null, 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', 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 }) }))] })] }));
+    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',
+            }
+            : { 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.
+        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'), width: "100%", items: "center", rounded: "$3", borderWidth: 1, borderColor: "$rim", bg: "$hover", pl: "$3", pr: "$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', 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 }) }))] })] }));
+    // 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 !== ' '))
+                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] }));
 }

package/dist/chat/Composer.d.ts

@@ -16,7 +16,7 @@
  * Growth is `Textarea`'s and follows the content, so a wrapped paragraph raises
  * the field. `rows` is the floor, `maxHeight` the ceiling.
  */
-import { YStack } from '@hanzo/gui';
+import { XStack, YStack } from '@hanzo/gui';
 import type { ComponentProps, ReactNode } from 'react';
 import { Textarea } from '../backends/gui/index.js';
 /** `onChange` is dropped: here it carries the draft, not a DOM change event. */
@@ -63,7 +63,47 @@ export interface ComposerProps extends Stack {
     /** 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.
+     */
+    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;
 }
-export declare function Composer({ value, onChange, onSend, onStop, busy, disabled, placeholder, rows, maxHeight, children, hint, label, field, send, ...props }: ComposerProps): import("react").JSX.Element;
+/**
+ * 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;
 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,EAAuB,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;AAajF;;;;;;;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;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,GAAG,KAAK,EACT,EAAE,aAAa,+BAyEf"}
+{"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,+BA2Jf;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"}

package/dist/chat/Composer.js

@@ -19,9 +19,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * the field. `rows` is the floor, `maxHeight` the ceiling.
  */
 import { SizableText, XStack, YStack } from '@hanzo/gui';
-import { ArrowUp, Square } from '@hanzogui/lucide-icons-2';
+import { ArrowUp, ChevronDown, CornerDownLeft, Square } from '@hanzogui/lucide-icons-2';
 import { Button, Textarea } from '../backends/gui/index.js';
-import { slot } from '../backends/gui/slot.js';
+import { slot, tip } from '../backends/gui/slot.js';
 import { ready, sends } from './send.js';
 const PAD = 8;
 const MIN_ROWS = 1;
@@ -31,6 +31,16 @@ 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;
+/**
+ * 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.
+ */
+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;
 /**
  * The resting placeholder.
  *
@@ -40,7 +50,7 @@ const FLOOR = 44;
  * 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, maxHeight = CEILING, children, hint, label, field, send, ...props }) {
+export function Composer({ value, onChange, onSend, onStop, busy = false, disabled = false, placeholder = ASK, rows = MIN_ROWS, maxHeight = CEILING, children, hint, label, field, send, head, foot, inline = false, ...props }) {
     const sendable = ready(value, busy, disabled);
     const keyed = (e) => {
         const key = e.key ?? e.nativeEvent?.key ?? '';
@@ -60,13 +70,53 @@ export function Composer({ value, onChange, onSend, onStop, busy = false, disabl
         if (sendable)
             onSend();
     };
-    return (_jsxs(YStack, { ...slot('composer'), width: "100%", rounded: "$5", borderWidth: 1, borderColor: "$borderColor", bg: "$background", p: PAD, gap: PAD, ...props, children: [_jsx(Textarea, { ...slot('composer-field'), rows: rows, placeholder: placeholder, disabled: disabled, borderWidth: 0, 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.
-                value: value, onChangeText: onChange, onKeyDown: (e) => {
-                    field?.onKeyDown?.(e);
-                    if (!e?.defaultPrevented)
-                        keyed(e);
-                } }), _jsxs(XStack, { items: "center", gap: PAD, children: [children, _jsx(XStack, { flex: 1 }), hint ? (_jsx(SizableText, { size: "$1", color: "$soft", children: hint })) : null, send ?? (_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 }) }))] })] }));
+    const input = (_jsx(Textarea, { ...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',
+            }
+            : { 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.
+        value: value, onChangeText: onChange, onKeyDown: (e) => {
+            field?.onKeyDown?.(e);
+            if (!e?.defaultPrevented)
+                keyed(e);
+        } }));
+    const said = hint ? (_jsx(SizableText, { size: "$1", color: "$soft", children: hint })) : null;
+    const frame = inline ? (_jsxs(XStack, { ...slot('composer'), width: "100%", items: "center", rounded: "$3", borderWidth: 1, borderColor: "$rim", bg: "$hover", pl: "$3", pr: "$1.5", gap: "$1.5", ...props, children: [input, children, said, send ?? (_jsx(XStack, { ...slot('composer-send'), ...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 ? _jsx(Square, { size: 12, color: "$soft" }) : _jsx(CornerDownLeft, { size: 14, color: "$soft" }) }))] })) : (_jsxs(YStack, { ...slot('composer'), width: "100%", rounded: "$5", borderWidth: 1, borderColor: "$borderColor", bg: "$background", p: PAD, gap: PAD, ...props, children: [input, _jsxs(XStack, { items: "center", gap: PAD, children: [children, _jsx(XStack, { flex: 1 }), said, send ?? (_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 }) }))] })] }));
+    // 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 (_jsxs(YStack, { ...slot('composer-shell'), width: "100%", gap: "$2.5", children: [head ? (_jsx(XStack, { ...slot('composer-head'), items: "center", gap: "$1.5", flexWrap: "wrap", children: head })) : null, frame, foot ? (_jsx(XStack, { ...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.
+ */
+export function ComposerTool({ label, icon, text, caret = false, onPress, disabled = false, ...rest }) {
+    return (_jsxs(XStack, { ...slot('composer-tool'), ...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 !== ' '))
+                return;
+            e.preventDefault?.();
+            onPress?.();
+        }, ...rest, children: [icon ? (_jsx(XStack, { "aria-hidden": true, items: "center", children: icon })) : null, text ? (_jsx(SizableText, { size: "$2", color: "$quiet", numberOfLines: 1, children: text })) : null, caret ? _jsx(ChevronDown, { size: 12, color: "$soft", "aria-hidden": true }) : null] }));
 }
 //# sourceMappingURL=Composer.js.map

package/dist/chat/Composer.js.map

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

package/dist/chat/EmptyPrompt.cjs

@@ -0,0 +1,27 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NEXT = void 0;
+exports.EmptyPrompt = EmptyPrompt;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * EmptyPrompt — what an empty conversation pane says before anything is asked.
+ *
+ * One line at the top of the pane: a small mark and a question. It is aligned
+ * to the COLUMN the composer sits in, not centred on the pane, so the question
+ * and the field that answers it start at the same left edge — the eye reads
+ * down one line into the other.
+ *
+ * The mark is a slot, never a brand this package picks: a surface passes its
+ * own (`BrandMark`, an org mark, nothing), and the heading is the same either
+ * way.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+/** The composer column's width, so the two line up by default. */
+const COLUMN = 768;
+/** What an empty pane asks when the surface says nothing else. */
+exports.NEXT = 'What’s up next?';
+function EmptyPrompt({ title = exports.NEXT, mark, column = COLUMN, level = 1, ...rest }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('empty-prompt'), width: "100%", items: "center", px: "$4", pt: "$2.5", ...rest, children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { width: "100%", maxW: column, items: "center", gap: "$2", children: [mark ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('empty-prompt-mark'), shrink: 0, items: "center", "aria-hidden": true, children: mark })) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('empty-prompt-title'), role: "heading", "aria-level": level, size: "$7", color: "$ink", children: title })] }) }));
+}

package/dist/chat/EmptyPrompt.d.ts

@@ -0,0 +1,30 @@
+/**
+ * EmptyPrompt — what an empty conversation pane says before anything is asked.
+ *
+ * One line at the top of the pane: a small mark and a question. It is aligned
+ * to the COLUMN the composer sits in, not centred on the pane, so the question
+ * and the field that answers it start at the same left edge — the eye reads
+ * down one line into the other.
+ *
+ * The mark is a slot, never a brand this package picks: a surface passes its
+ * own (`BrandMark`, an org mark, nothing), and the heading is the same either
+ * way.
+ */
+import { YStack } from '@hanzo/gui';
+import type { ComponentProps, ReactNode } from 'react';
+type Col = Omit<ComponentProps<typeof YStack>, 'children'>;
+/** What an empty pane asks when the surface says nothing else. */
+export declare const NEXT = "What\u2019s up next?";
+export interface EmptyPromptProps extends Col {
+    /** The question. */
+    title?: ReactNode;
+    /** Drawn before the question — a surface's own mark, ~20px. */
+    mark?: ReactNode;
+    /** The column the heading aligns to, px. Match the composer's. */
+    column?: number;
+    /** The heading's outline level; a pane with a page title above it passes 2. */
+    level?: 1 | 2 | 3;
+}
+export declare function EmptyPrompt({ title, mark, column, level, ...rest }: EmptyPromptProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=EmptyPrompt.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyPrompt.d.ts","sourceRoot":"","sources":["../../src/chat/EmptyPrompt.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,EAAuB,MAAM,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,KAAK,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,CAAA;AAK1D,kEAAkE;AAClE,eAAO,MAAM,IAAI,yBAAoB,CAAA;AAErC,MAAM,WAAW,gBAAiB,SAAQ,GAAG;IAC3C,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,kEAAkE;IAClE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+EAA+E;IAC/E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAClB;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAY,EACZ,IAAI,EACJ,MAAe,EACf,KAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,+BAqBlB"}

package/dist/chat/EmptyPrompt.js

@@ -0,0 +1,24 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * EmptyPrompt — what an empty conversation pane says before anything is asked.
+ *
+ * One line at the top of the pane: a small mark and a question. It is aligned
+ * to the COLUMN the composer sits in, not centred on the pane, so the question
+ * and the field that answers it start at the same left edge — the eye reads
+ * down one line into the other.
+ *
+ * The mark is a slot, never a brand this package picks: a surface passes its
+ * own (`BrandMark`, an org mark, nothing), and the heading is the same either
+ * way.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+/** The composer column's width, so the two line up by default. */
+const COLUMN = 768;
+/** What an empty pane asks when the surface says nothing else. */
+export const NEXT = 'What’s up next?';
+export function EmptyPrompt({ title = NEXT, mark, column = COLUMN, level = 1, ...rest }) {
+    return (_jsx(YStack, { ...slot('empty-prompt'), width: "100%", items: "center", px: "$4", pt: "$2.5", ...rest, children: _jsxs(XStack, { width: "100%", maxW: column, items: "center", gap: "$2", children: [mark ? (_jsx(XStack, { ...slot('empty-prompt-mark'), shrink: 0, items: "center", "aria-hidden": true, children: mark })) : null, _jsx(SizableText, { ...slot('empty-prompt-title'), role: "heading", "aria-level": level, size: "$7", color: "$ink", children: title })] }) }));
+}
+//# sourceMappingURL=EmptyPrompt.js.map

package/dist/chat/EmptyPrompt.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyPrompt.js","sourceRoot":"","sources":["../../src/chat/EmptyPrompt.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGxD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAI3C,kEAAkE;AAClE,MAAM,MAAM,GAAG,GAAG,CAAA;AAElB,kEAAkE;AAClE,MAAM,CAAC,MAAM,IAAI,GAAG,iBAAiB,CAAA;AAarC,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,GAAG,IAAI,EACZ,IAAI,EACJ,MAAM,GAAG,MAAM,EACf,KAAK,GAAG,CAAC,EACT,GAAG,IAAI,EACU;IACjB,OAAO,CACL,KAAC,MAAM,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAC,QAAQ,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,MAAM,KAAK,IAAI,YACtF,MAAC,MAAM,IAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aACvD,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,MAAM,OAAK,IAAI,CAAC,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,iCAC7D,IAAI,GACE,CACV,CAAC,CAAC,CAAC,IAAI,EACR,KAAC,WAAW,OACN,IAAI,CAAC,oBAAoB,CAAC,EAC9B,IAAI,EAAC,SAAS,gBACF,KAAK,EACjB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,MAAM,YAEX,KAAK,GACM,IACP,GACF,CACV,CAAA;AACH,CAAC"}

package/dist/chat/SessionRail.cjs

@@ -0,0 +1,97 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StatusDot = StatusDot;
+exports.SessionRail = SessionRail;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * SessionRail — the left rail of a sessions surface: start one, go somewhere,
+ * reopen a recent one, and who you are.
+ *
+ *   + New                       the primary row; the current view on a fresh pane
+ *   Artifacts · Customize …     the surface's own places, as `links`
+ *   More ⌄                      a disclosure over `more`, when there are more
+ *   Recents            ⇅        the sessions, newest first, each with a status dot
+ *   (z) z@hanzo.ai ⌄   ⚙ ⌕      the account, then settings and search
+ *
+ * Presentational: no routing, no fetching. `active` comes in, `onOpen` goes out.
+ *
+ * THE SIDEBAR CANON (console, hanzo.app, hanzo.chat, the extension):
+ *   - Collapse is an EXPLICIT toggle and the host persists it. `collapsed` in,
+ *     `onCollapse` out. There is no hover-to-expand and no pin.
+ *   - Collapsed is a narrow RAIL that stays on screen — icons only, labels as
+ *     tooltips — and its top row is the expand control.
+ *   - Below `md` there is no rail at all. The column hides, and the same
+ *     contents open as a drawer from the left when the host says so (`open`,
+ *     `onOpenChange`) — typically from a menu button only a phone shows.
+ *
+ * Built from the chat `Sidebar` column and its icon button, so the rail is the
+ * same material as every other chat surface's.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const react_1 = require("react");
+const sheet_1 = require("../backends/gui/sheet.cjs");
+const slot_1 = require("../backends/gui/slot.cjs");
+const Sidebar_1 = require("./Sidebar.cjs");
+/** Expanded width, px — the column's own width, its hairline outside it. */
+const WIDTH = 272;
+/** Collapsed width, px. The same rail width every chat surface collapses to. */
+const RAIL = 56;
+/** The keyboard focus ring every control in the package draws. */
+const RING = { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' };
+/** One row: 32px, the 8px radius, icon then label. */
+const ROW = { minH: 32, px: '$2', rounded: '$3', gap: '$2.5' };
+/** The status mark: a 6px dot, filled while something is happening. */
+function StatusDot({ status = 'idle' }) {
+    const filled = status === 'running' || status === 'paused' || status === 'error';
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('status-dot'), "data-status": status, 
+        // The pulse is a class the package's own sheet owns (styles/motion.css),
+        // opacity only — nothing reflows for a dot nobody is reading.
+        className: status === 'running' ? 'hz-pulse' : undefined, width: 6, height: 6, rounded: 9999, shrink: 0, bg: filled ? (status === 'error' ? '$bad' : status === 'paused' ? '$faint' : '$quiet') : 'transparent', borderWidth: filled ? 0 : 1, borderColor: "$faint", "aria-hidden": true }));
+}
+/** Where a row starts: the 16px column every icon and dot sits centred in. */
+const Lead = ({ children }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 16, height: 16, shrink: 0, items: "center", justify: "center", children: children }));
+/** One nav row. On the rail it is the icon alone, the label its tooltip and name. */
+function Row({ label, icon, onPress, active, rail, quiet, expanded, controls, data = 'rail-row' }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)(data), ...(rail ? (0, slot_1.tip)(label) : null), ...ROW, items: "center", justify: rail ? 'center' : 'flex-start', cursor: "pointer", role: "button", tabIndex: 0, "aria-label": rail ? label : undefined, "aria-current": active ? 'page' : undefined, "aria-expanded": expanded, "aria-controls": controls, bg: active ? '$raised' : undefined, hoverStyle: { bg: active ? '$raised' : '$hover' }, pressStyle: { bg: '$raised' }, focusVisibleStyle: RING, onPress: onPress, onKeyDown: (e) => {
+            if (e?.key !== 'Enter' && e?.key !== ' ')
+                return;
+            e.preventDefault?.();
+            onPress?.();
+        }, children: [(0, jsx_runtime_1.jsx)(Lead, { children: icon }), rail ? null : ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", numberOfLines: 1, flex: 1, color: quiet ? '$soft' : '$ink', children: label }))] }));
+}
+/** The account line: avatar, the name clamped, the caret. */
+function Account({ account, rail }) {
+    const face = ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 24, height: 24, rounded: 9999, items: "center", justify: "center", bg: "$raised", overflow: "hidden", shrink: 0, children: account.avatar ?? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", fontWeight: "600", color: "$ink", children: account.name.charAt(0).toUpperCase() })) }));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('rail-account'), ...(rail ? (0, slot_1.tip)(account.name) : null), ...ROW, gap: "$2", px: "$1", flex: rail ? undefined : 1, minW: 0, items: "center", justify: rail ? 'center' : 'flex-start', cursor: account.onPress ? 'pointer' : undefined, role: account.onPress ? 'button' : undefined, tabIndex: account.onPress ? 0 : undefined, "aria-label": account.onPress ? `Account: ${account.name}` : undefined, "aria-haspopup": account.onPress ? 'menu' : undefined, hoverStyle: account.onPress ? { bg: '$hover' } : undefined, onPress: account.onPress, onKeyDown: (e) => {
+            if (!account.onPress || (e?.key !== 'Enter' && e?.key !== ' '))
+                return;
+            e.preventDefault?.();
+            account.onPress();
+        }, children: [face, rail ? null : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", numberOfLines: 1, flex: 1, minW: 0, color: "$ink", children: account.name }), account.onPress ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 14, color: "$soft" }) : null] }))] }));
+}
+/** The rail's contents — the same tree in the column and in the drawer. */
+function Contents({ onNew, newLabel = 'New', fresh = false, links = [], more = [], moreLabel = 'More', recents, recentsLabel = 'Recents', active = null, onOpen, onSort, sortLabel = 'Sort and filter', empty, notice, account, onSettings, onSearch, collapsed = false, onCollapse, mark, rail, }) {
+    const [unfolded, setUnfolded] = (0, react_1.useState)(false);
+    const id = (0, react_1.useId)();
+    const moreId = `${id}-more`;
+    const headId = `${id}-recents`;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [rail ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { justify: "center", pb: "$1", children: (0, jsx_runtime_1.jsx)(Sidebar_1.SidebarIconButton, { label: "Expand sidebar", width: 36, height: 36, onPress: () => onCollapse?.(false), children: mark ?? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.PanelLeft, { size: 16 }) }) })) : null, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('rail-nav'), gap: "$0", role: "list", children: [onNew ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { role: "listitem", children: (0, jsx_runtime_1.jsx)(Row, { label: newLabel, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 16 }), onPress: onNew, active: fresh, rail: rail, data: "rail-new" }) })) : null, links.map((link) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { role: "listitem", children: (0, jsx_runtime_1.jsx)(Row, { label: link.label, icon: link.icon, onPress: link.onPress, active: link.active, rail: rail }) }, link.id))), more.length ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { role: "listitem", children: [(0, jsx_runtime_1.jsx)(Row, { label: moreLabel, icon: unfolded ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronUp, { size: 16 }) : (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ChevronDown, { size: 16 }), onPress: () => setUnfolded((v) => !v), rail: rail, quiet: true, expanded: unfolded, controls: moreId, data: "rail-more" }), unfolded ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { id: moreId, role: "list", gap: "$0", children: more.map((link) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { role: "listitem", children: (0, jsx_runtime_1.jsx)(Row, { label: link.label, icon: link.icon, onPress: link.onPress, active: link.active, rail: rail }) }, link.id))) })) : null] })) : null] }), rail ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { flex: 1 })) : ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('rail-recents'), flex: 1, minH: 0, mt: "$5", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", height: 28, pl: "$2", pr: "$1", shrink: 0, children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: headId, size: "$2", color: "$soft", children: recentsLabel }), onSort ? ((0, jsx_runtime_1.jsx)(Sidebar_1.SidebarIconButton, { label: sortLabel, onPress: onSort, width: 24, height: 24, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ArrowDownUp, { size: 14 }) })) : null] }), (0, jsx_runtime_1.jsx)(gui_1.ScrollView, { flex: 1, showsVerticalScrollIndicator: false, children: recents.length === 0 ? (empty ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { px: "$2", py: "$2", children: typeof empty === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$soft", children: empty })) : (empty) })) : null) : ((0, jsx_runtime_1.jsx)(gui_1.YStack, { role: "list", "aria-labelledby": headId, gap: 1, children: recents.map((s) => {
+                                const on = s.id === active;
+                                return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { role: "listitem", children: (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('rail-session'), ...ROW, items: "center", cursor: "pointer", role: "button", tabIndex: 0, "aria-current": on ? 'page' : undefined, bg: on ? '$raised' : undefined, hoverStyle: { bg: on ? '$raised' : '$hover' }, pressStyle: { bg: '$raised' }, focusVisibleStyle: RING, onPress: () => onOpen(s.id), onKeyDown: (e) => {
+                                            if (e?.key !== 'Enter' && e?.key !== ' ')
+                                                return;
+                                            e.preventDefault?.();
+                                            onOpen(s.id);
+                                        }, children: [(0, jsx_runtime_1.jsx)(Lead, { children: (0, jsx_runtime_1.jsx)(StatusDot, { status: s.status }) }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", numberOfLines: 1, flex: 1, minW: 0, color: on ? '$ink' : '$quiet', children: s.title })] }) }, s.id));
+                            }) })) })] })), notice && !rail ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { pt: "$2", children: notice }) : null, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('rail-foot'), items: "center", gap: "$1", pt: "$2", mt: "$1", borderTopWidth: 1, borderColor: "$borderColor", flexDirection: rail ? 'column' : 'row', children: [account ? (0, jsx_runtime_1.jsx)(Account, { account: account, rail: rail }) : (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), onSettings ? ((0, jsx_runtime_1.jsx)(Sidebar_1.SidebarIconButton, { label: "Settings", onPress: onSettings, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings, { size: 16 }) })) : null, onSearch ? ((0, jsx_runtime_1.jsx)(Sidebar_1.SidebarIconButton, { label: "Search", onPress: onSearch, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 16 }) })) : null, onCollapse && !rail ? ((0, jsx_runtime_1.jsx)(Sidebar_1.SidebarIconButton, { label: "Collapse sidebar", onPress: () => onCollapse(!collapsed), children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.PanelLeft, { size: 16 }) })) : null] })] }));
+}
+function SessionRail(props) {
+    const { 
+    // Everything the contents read is named here, so none of it reaches the
+    // column as a stray DOM attribute through `rest`.
+    onNew, newLabel, fresh, links, more, moreLabel, recents, recentsLabel, active, onOpen, onSort, sortLabel, empty, notice, account, onSettings, onSearch, collapsed = false, onCollapse, mark, open = false, onOpenChange, label = 'Sessions', width = WIDTH, ...rest } = props;
+    const rail = collapsed;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Sidebar_1.Sidebar, { ...(0, slot_1.slot)('session-rail'), role: "navigation", "aria-label": label, "data-collapsed": rail ? 'true' : 'false', width: rail ? RAIL : width, gap: "$0", px: rail ? '$1.5' : '$2', py: "$2", "$max-md": { display: 'none' }, ...rest, children: (0, jsx_runtime_1.jsx)(Contents, { ...props, rail: rail }) }), open ? ((0, jsx_runtime_1.jsx)(sheet_1.Sheet, { open: open, onOpenChange: onOpenChange, children: (0, jsx_runtime_1.jsxs)(sheet_1.SheetContent, { side: "left", width: width, maxW: "86%", p: "$2", gap: "$0", bg: "$panel", children: [(0, jsx_runtime_1.jsx)(sheet_1.SheetTitle, { ...(0, slot_1.slot)('session-rail-title'), position: "absolute", opacity: 0, pointerEvents: "none", children: label }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('session-rail-drawer'), role: "navigation", "aria-label": label, flex: 1, minH: 0, children: (0, jsx_runtime_1.jsx)(Contents, { ...props, rail: false, collapsed: false, onCollapse: undefined, onNew: onNew ? () => (onOpenChange?.(false), onNew()) : undefined, onOpen: (sid) => (onOpenChange?.(false), onOpen(sid)) }) })] }) })) : null] }));
+}