@hanzo/ui 8.27.11 → 8.27.12

package/dist/chat/Composer.cjs

@@ -7,20 +7,20 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Composer — the one chat input for every Hanzo surface.
  *
- * ONE ROW: `[add] [field] [mic] [send]`. `add` and `mic` are slots a surface
- * fills; everything else is the same everywhere.
- *
  * Presentational and controlled: it owns no draft, no transport and no model
- * state.
+ * 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.
+ * turn is in flight it stops. Two buttons in one place was the thing every
+ * surface got subtly different.
  *
  * 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.
  *
- * Growth is `Textarea`'s and follows the content. `rows` is the floor,
- * `maxHeight` the ceiling.
+ * Growth is `Textarea`'s and follows the content, so a wrapped paragraph raises
+ * the field. `rows` is the floor, `maxHeight` the ceiling.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
@@ -44,7 +44,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, add, mic, 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, ...props }) {
     const sendable = (0, send_1.ready)(value, busy, disabled);
     const keyed = (e) => {
         const key = e.key ?? e.nativeEvent?.key ?? '';
@@ -64,12 +64,12 @@ function Composer({ value, onChange, onSend, onStop, busy = false, disabled = fa
         if (sendable)
             onSend();
     };
-    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('composer'), width: "100%", items: "center", gap: PAD, rounded: 9999, borderWidth: 1, borderColor: "$borderColor", bg: "$background", p: PAD, ...props, children: [add, (0, jsx_runtime_1.jsx)(gui_2.Textarea, { ...(0, slot_1.slot)('composer-field'), rows: rows, placeholder: placeholder, disabled: disabled, borderWidth: 0, minH: FLOOR, flex: 1, maxH: maxHeight, "aria-label": label ?? placeholder, ...field, 
+    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);
-                } }), mic, send ?? ((0, jsx_runtime_1.jsx)(gui_2.Button, { ...(0, slot_1.slot)('composer-send'), size: "sm", circular: true, 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 }) }))] }));
+                } }), (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 }) }))] })] }));
 }

package/dist/chat/Composer.d.ts

@@ -1,26 +1,26 @@
 /**
  * Composer — the one chat input for every Hanzo surface.
  *
- * ONE ROW: `[add] [field] [mic] [send]`. `add` and `mic` are slots a surface
- * fills; everything else is the same everywhere.
- *
  * Presentational and controlled: it owns no draft, no transport and no model
- * state.
+ * 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.
+ * turn is in flight it stops. Two buttons in one place was the thing every
+ * surface got subtly different.
  *
  * 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.
  *
- * Growth is `Textarea`'s and follows the content. `rows` is the floor,
- * `maxHeight` the ceiling.
+ * Growth is `Textarea`'s and follows the content, so a wrapped paragraph raises
+ * the field. `rows` is the floor, `maxHeight` the ceiling.
  */
-import { XStack } from '@hanzo/gui';
+import { 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. */
-type Row = Omit<ComponentProps<typeof XStack>, 'children' | 'onChange'>;
+type Stack = Omit<ComponentProps<typeof YStack>, 'children' | 'onChange'>;
 type FieldProps = Omit<ComponentProps<typeof Textarea>, 'value' | 'onChangeText'>;
 /**
  * The resting placeholder.
@@ -31,7 +31,7 @@ type FieldProps = Omit<ComponentProps<typeof Textarea>, 'value' | 'onChangeText'
  * changes — which is what a model-named placeholder forces a surface to do.
  */
 export declare const ASK = "Ask anything";
-export interface ComposerProps extends Row {
+export interface ComposerProps extends Stack {
     value: string;
     onChange: (value: string) => void;
     /** Called when the draft is submitted. Clearing `value` is the host's job. */
@@ -46,10 +46,10 @@ export interface ComposerProps extends Row {
     rows?: number;
     /** Ceiling for that growth, px. Past it the field scrolls instead. */
     maxHeight?: number;
-    /** Leading slot — attachment, or whatever a surface adds from. */
-    add?: ReactNode;
-    /** Trailing slot, before send. Dictation belongs here. */
-    mic?: ReactNode;
+    /** 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`.
      *
@@ -60,9 +60,10 @@ export interface ComposerProps extends Row {
     label?: string;
     /** The field's own props — a ref, a testid, focus handlers, a paste handler. */
     field?: FieldProps;
-    /** Replaces the send control. */
+    /** Replaces the send control. `children` is the START of the footer row, so a
+     *  second commit mode has nowhere else to go. */
     send?: ReactNode;
 }
-export declare function Composer({ value, onChange, onSend, onStop, busy, disabled, placeholder, rows, maxHeight, add, mic, label, field, send, ...props }: ComposerProps): import("react").JSX.Element;
+export declare function Composer({ value, onChange, onSend, onStop, busy, disabled, placeholder, rows, maxHeight, children, hint, label, field, send, ...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,YAAY,CAAA;AAEnC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAU,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAIlD,gFAAgF;AAChF,KAAK,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC,CAAA;AACvE,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,GAAG;IACxC,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,kEAAkE;IAClE,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,0DAA0D;IAC1D,GAAG,CAAC,EAAE,SAAS,CAAA;IAEf;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gFAAgF;IAChF,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,iCAAiC;IACjC,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,GAAG,EACH,GAAG,EACH,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACT,EAAE,aAAa,+BAqEf"}
+{"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"}

package/dist/chat/Composer.js

@@ -3,22 +3,22 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Composer — the one chat input for every Hanzo surface.
  *
- * ONE ROW: `[add] [field] [mic] [send]`. `add` and `mic` are slots a surface
- * fills; everything else is the same everywhere.
- *
  * Presentational and controlled: it owns no draft, no transport and no model
- * state.
+ * 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.
+ * turn is in flight it stops. Two buttons in one place was the thing every
+ * surface got subtly different.
  *
  * 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.
  *
- * Growth is `Textarea`'s and follows the content. `rows` is the floor,
- * `maxHeight` the ceiling.
+ * Growth is `Textarea`'s and follows the content, so a wrapped paragraph raises
+ * the field. `rows` is the floor, `maxHeight` the ceiling.
  */
-import { XStack } from '@hanzo/gui';
+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';
@@ -40,7 +40,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, add, mic, 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, ...props }) {
     const sendable = ready(value, busy, disabled);
     const keyed = (e) => {
         const key = e.key ?? e.nativeEvent?.key ?? '';
@@ -60,13 +60,13 @@ export function Composer({ value, onChange, onSend, onStop, busy = false, disabl
         if (sendable)
             onSend();
     };
-    return (_jsxs(XStack, { ...slot('composer'), width: "100%", items: "center", gap: PAD, rounded: 9999, borderWidth: 1, borderColor: "$borderColor", bg: "$background", p: PAD, ...props, children: [add, _jsx(Textarea, { ...slot('composer-field'), rows: rows, placeholder: placeholder, disabled: disabled, borderWidth: 0, minH: FLOOR, flex: 1, maxH: maxHeight, "aria-label": label ?? placeholder, ...field, 
+    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);
-                } }), mic, send ?? (_jsx(Button, { ...slot('composer-send'), size: "sm", circular: true, disabled: busy ? !onStop : !sendable, onPress: busy ? onStop : onSend, "aria-label": busy ? 'Stop' : 'Send', children: busy ? _jsx(Square, { size: 14 }) : _jsx(ArrowUp, { size: 16 }) }))] }));
+                } }), _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 }) }))] })] }));
 }
 //# 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":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACxD,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAA;AAG1D,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,KAAK,EAAE,KAAK,EAAa,MAAM,QAAQ,CAAA;AAMhD,MAAM,GAAG,GAAG,CAAC,CAAA;AACb,MAAM,QAAQ,GAAG,CAAC,CAAA;AAElB;oEACoE;AACpE,MAAM,OAAO,GAAG,GAAG,CAAA;AAEnB;qEACqE;AACrE,MAAM,KAAK,GAAG,EAAE,CAAA;AAEhB;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,GAAG,GAAG,cAAc,CAAA;AAoCjC,MAAM,UAAU,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,IAAI,GAAG,KAAK,EACZ,QAAQ,GAAG,KAAK,EAChB,WAAW,GAAG,GAAG,EACjB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,OAAO,EACnB,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAI,EACJ,GAAG,KAAK,EACM;IACd,MAAM,QAAQ,GAAG,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAA;IAE7C,MAAM,KAAK,GAAG,CAAC,CAAiE,EAAE,EAAE;QAClF,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,WAAW,EAAE,GAAG,IAAI,EAAE,CAAA;QAC7C,MAAM,IAAI,GAAS;YACjB,QAAQ,EAAE,CAAC,CAAC,QAAQ,IAAI,CAAC,CAAC,WAAW,EAAE,QAAQ;YAC/C,MAAM,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,WAAW,EAAE,MAAM;YACzC,OAAO,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,EAAE,OAAO;YAC5C,OAAO,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,EAAE,OAAO;YAC5C,WAAW,EAAE,CAAC,CAAC,WAAW,IAAI,CAAC,CAAC,WAAW,EAAE,WAAW;YACxD,0EAA0E;YAC1E,uEAAuE;YACvE,OAAO,EAAE,CAAC,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,EAAE,OAAO;SAC7C,CAAA;QACD,IAAI,CAAC,KAAK,CAAC,GAAG,EAAE,IAAI,CAAC;YAAE,OACtB;QAAC,CAAqC,CAAC,cAAc,EAAE,EAAE,CAAA;QAC1D,IAAI,QAAQ;YAAE,MAAM,EAAE,CAAA;IACxB,CAAC,CAAA;IAED,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,UAAU,CAAC,EACpB,KAAK,EAAC,MAAM,EACZ,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,EAAE,EAAC,aAAa,EAChB,CAAC,EAAE,GAAG,EACN,GAAG,EAAE,GAAG,KACJ,KAAK,aAET,KAAC,QAAQ,OACH,IAAI,CAAC,gBAAgB,CAAC,EAC1B,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,CAAC,EACd,IAAI,EAAE,KAAK,EACX,IAAI,EAAE,SAAS,gBACH,KAAK,IAAI,WAAW,KAC5B,KAAK;gBACT,uEAAuE;gBACvE,yEAAyE;gBACzE,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,QAAQ,EACtB,SAAS,EAAE,CAAC,CAAM,EAAE,EAAE;oBACpB,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,CAAA;oBACrB,IAAI,CAAC,CAAC,EAAE,gBAAgB;wBAAE,KAAK,CAAC,CAAC,CAAC,CAAA;gBACpC,CAAC,GACD,EACF,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,GAAG,aAC5B,QAAQ,EACT,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,GAAI,EAClB,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,YACjC,IAAI,GACO,CACf,CAAC,CAAC,CAAC,IAAI,EACP,IAAI,IAAI,CACP,KAAC,MAAM,OACD,IAAI,CAAC,eAAe,CAAC,EACzB,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,QAAQ,EACpC,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,gBACnB,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,YAEjC,IAAI,CAAC,CAAC,CAAC,KAAC,MAAM,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI,GAC7C,CACV,IACM,IACF,CACV,CAAA;AACH,CAAC"}

package/dist/gallery.cjs

@@ -16,14 +16,6 @@ const chat_1 = require("./chat/index.cjs");
 const gui_2 = require("./backends/gui/index.cjs");
 // Off the barrel — web-only, so it is imported the way a consumer imports it.
 const grid_1 = require("./grid.cjs");
-// The gui-backed surface ported onto @hanzo/ui, in the barrel's order. Every
-// export from here down in `./backends/gui/index.ts` needs a render below —
-// see the docblock above.
-const gui_3 = require("./backends/gui/index.cjs");
-const gui_4 = require("./backends/gui/index.cjs");
-const gui_5 = require("./backends/gui/index.cjs");
-const gui_6 = require("./backends/gui/index.cjs");
-const gui_7 = require("./backends/gui/index.cjs");
 /** A real <img> with real intrinsic pixels, inline so nothing hits the network.
  *  120x40 on purpose: the wrong ratio for every box it goes in, so a frame that
  *  fails to cover-fit its child is visible rather than merely untested. */
@@ -38,170 +30,6 @@ const BUTTON_VARIANTS = [
 ];
 const BUTTON_SIZES = ['default', 'sm', 'lg', 'icon', 'icon-sm', 'icon-lg'];
 const BADGE_VARIANTS = ['default', 'secondary', 'destructive', 'outline'];
-const ANDROID_SIZES = ['sm', 'default', 'lg', 'xl'];
-const ALERT_VARIANTS = ['default', 'destructive'];
-const BANNER_VARIANTS = ['default', 'info', 'success', 'warning', 'error'];
-const MARQUEE_VARIANTS = ['default', 'neon', 'rainbow', 'metallic', 'fire', 'glass'];
-const MARQUEE_SIZES = ['sm', 'default', 'lg', 'xl', '2xl', '3xl'];
-const MARQUEE_DIRECTIONS = ['left', 'right', 'up', 'down'];
-const TESTIMONIALS = [
-    { id: 't1', content: 'This shipped our redesign in a week.', author: 'A. Ryder', role: 'Design lead', company: 'Acme', avatar: SWATCH },
-    { id: 't2', content: 'No surprises in production.', author: 'J. Okafor' },
-];
-const CAROUSEL_CARDS = [
-    { id: 'c1', title: 'Ship faster', subtitle: 'One stack', image: SWATCH },
-    { id: 'c2', title: 'Stay consistent', gradient: gui_3.gradientPresets.ocean },
-    { id: 'c3', title: 'Scale calmly', gradient: gui_3.gradientPresets.forest },
-];
-const CHOICEBOX_OPTIONS = [
-    { value: 'a', label: 'Starter', description: 'For a single project' },
-    { value: 'b', label: 'Team', description: 'For a growing team' },
-    { value: 'c', label: 'Enterprise' },
-];
-const ORDERS = [
-    { id: 'o1', symbol: 'NASDAQ:AAPL', type: 'buy', shares: 100, price: 175.5, status: 'open', timestamp: Date.parse('2024-06-03T14:22:00Z'), orderType: 'limit' },
-    { id: 'o2', symbol: 'NASDAQ:MSFT', type: 'sell', shares: 25, price: 415.2, status: 'filled', timestamp: Date.parse('2024-06-03T13:05:00Z') },
-    { id: 'o3', symbol: 'NASDAQ:TSLA', type: 'buy', shares: 10, price: 0, status: 'pending', timestamp: Date.parse('2024-06-03T12:40:00Z'), orderType: 'market' },
-    { id: 'o4', symbol: 'NASDAQ:GOOG', type: 'sell', shares: 5, price: 140.1, status: 'cancelled', timestamp: Date.parse('2024-06-02T09:15:00Z') },
-];
-const POSITIONS = [
-    { symbol: 'NASDAQ:AAPL', shares: 100, avgPrice: 150.0, currentPrice: 175.5 },
-    { symbol: 'NASDAQ:MSFT', shares: 25, avgPrice: 420.0, currentPrice: 415.2 },
-];
-const PILL_VARIANTS = ['default', 'secondary', 'outline', 'success', 'warning', 'error'];
-const PIN_ITEMS = [
-    { id: 'quasar', label: 'Quasar', description: 'Consensus engine' },
-    { id: 'pulsar', label: 'Pulsar', description: 'Threshold signatures' },
-    { id: 'prism', label: 'Prism', description: 'State sync' },
-];
-const WHEEL_SIZES = ['sm', 'default', 'lg'];
-const CODE_BLOCK_THEMES = [
-    'dark', 'light', 'github', 'github-dark', 'vs-dark', 'monokai', 'dracula', 'nord',
-];
-const CODE_BLOCK_SIZES = ['sm', 'default', 'lg'];
-const CODE = 'function add(a, b) {\n  return a + b\n}\n';
-const COMPARISON_COLUMNS = [
-    { title: 'Starter', items: [{ label: 'Seats', value: '5' }, { label: 'SSO', value: false }, { label: 'Support', value: true }] },
-    { title: 'Team', highlighted: true, items: [{ label: 'Seats', value: '50' }, { label: 'SSO', value: true }, { label: 'Support', value: true }] },
-];
-const CODE_TABS = [
-    { label: 'JavaScript', code: 'console.log(1)', language: 'javascript' },
-    { label: 'Python', code: 'print(1)', language: 'python' },
-];
-const COMBOBOX_OPTIONS = [
-    { value: 'next', label: 'Next.js' },
-    { value: 'remix', label: 'Remix' },
-];
-/** A minimal icon component, just to exercise `ComboboxIconOption`'s shape. */
-const DotIcon = ({ size = 16 }) => ((0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-block', width: size / 2, height: size / 2, borderRadius: '50%', background: 'currentColor' } }));
-const COMBOBOX_ICON_OPTIONS = [
-    { value: 'todo', label: 'Todo', icon: DotIcon },
-    { value: 'done', label: 'Done', icon: DotIcon },
-];
-const PEOPLE = [
-    { id: '1', name: 'Ada', role: 'Engineer' },
-    { id: '2', name: 'Grace', role: 'Admin' },
-];
-const PEOPLE_COLUMNS = [
-    { id: 'select' },
-    { id: 'name', accessorKey: 'name', header: 'Name' },
-    { id: 'role', accessorKey: 'role', header: 'Role', enableSorting: false },
-];
-const DIALOG_STACK_ITEMS = [
-    { id: 'a', title: 'Back', content: 'First panel' },
-    { id: 'b', title: 'Front', content: 'Second panel' },
-];
-const WINDOW_TYPES = ['default', 'dark', 'light', 'transparent'];
-const DOCK_POSITIONS = ['bottom', 'left', 'right'];
-const SPOTLIGHT_ITEMS = [
-    { id: 's1', title: 'New chat', category: 'Actions' },
-    { id: 's2', title: 'Settings', category: 'Actions' },
-    { id: 's3', title: 'Docs', category: 'Navigate' },
-];
-const GANTT_TASKS = [
-    { id: 'g1', name: 'Design', start: new Date(2026, 0, 1), end: new Date(2026, 0, 10), progress: 100 },
-    { id: 'g2', name: 'Build', start: new Date(2026, 0, 8), end: new Date(2026, 0, 20), progress: 40 },
-];
-const GRID_PATTERN_VARIANTS = ['dots', 'lines', 'crosses', 'plus', 'squares'];
-const IPHONE_VARIANTS = ['mini', 'default', 'pro-max'];
-const IPHONE_COLORS = ['black', 'white', 'blue', 'natural'];
-const ITEM_VARIANTS = ['default', 'outline', 'muted'];
-const ITEM_SIZES = ['default', 'sm'];
-const NAV_ITEMS = [
-    { id: 'overview', label: 'Overview' },
-    { id: 'docs', label: 'Docs' },
-    { id: 'changelog', label: 'Changelog' },
-];
-const KANBAN_BOARD = {
-    id: 'board-1',
-    title: 'Project board',
-    labels: [{ id: 'bug', name: 'Bug', color: '#ef4444' }],
-    columns: [
-        {
-            id: 'todo',
-            title: 'To do',
-            limit: 5,
-            cards: [
-                {
-                    id: 'card-1',
-                    title: 'Setup project',
-                    priority: 'high',
-                    assignee: 'Alex',
-                    labels: [{ id: 'bug', name: 'Bug', color: '#ef4444' }],
-                    createdAt: '2026-01-01T00:00:00.000Z',
-                    updatedAt: '2026-01-01T00:00:00.000Z',
-                },
-            ],
-        },
-        { id: 'doing', title: 'In progress', cards: [] },
-        { id: 'done', title: 'Done', cards: [] },
-    ],
-};
-const MESSAGE_DOCK_MESSAGES = [
-    { id: 'm1', type: 'success', title: 'Saved', description: 'Your changes were saved.' },
-    { id: 'm2', type: 'info', title: 'Update available' },
-    { id: 'm3', type: 'warning', title: 'Check your settings' },
-    { id: 'm4', type: 'error', title: 'Upload failed' },
-];
-const MESSAGE_DOCK_POSITIONS = ['top', 'bottom', 'top-right', 'bottom-right'];
-const SNIPPET_VARIANTS = ['default', 'inline', 'minimal'];
-const SNIPPET_THEMES = ['dark', 'light', 'github', 'github-dark', 'terminal', 'retro'];
-const SNIPPET_SIZES = ['xs', 'sm', 'default', 'lg'];
-const SNIPPET_CODE = 'const sum = (a, b) => a + b';
-const STATUS_VARIANTS = ['default', 'success', 'warning', 'error', 'info', 'gray'];
-const TAGS = [
-    { id: 't1', label: 'design' },
-    { id: 't2', label: 'engineering' },
-];
-const TOGGLE_VARIANTS = ['default', 'outline'];
-const TOGGLE_SIZES = ['default', 'sm', 'lg'];
-const TERMINAL_THEMES = ['dark', 'light', 'matrix', 'dracula'];
-const TERMINAL_COMMANDS = [
-    { id: 'c1', input: 'help', output: 'Available commands: clear, help, date, echo', timestamp: new Date(0), type: 'info' },
-];
-const TIMELINE_ITEMS = [
-    { id: 'e1', title: 'Kickoff', description: 'Project started', date: 'Jan 1', status: 'completed' },
-    { id: 'e2', title: 'Build', description: 'In progress', date: 'Jan 8', status: 'active' },
-    { id: 'e3', title: 'Ship', date: 'Jan 20', status: 'pending' },
-];
-const TIMELINE_VARIANTS = ['default', 'alternate', 'compact', 'simple'];
-const MEDIA_SOURCES = [{ src: 'https://example.com/video.mp4', type: 'video/mp4' }];
-const MEDIA_SIZES = ['sm', 'md', 'lg', 'full'];
-const NAV_LINKS = [
-    { label: 'Product', href: '#' },
-    { label: 'Docs', href: '#' },
-    { label: 'Pricing', href: '#' },
-];
-const NAV_OPTIONS = [
-    { id: 'a', label: 'Acme Inc' },
-    { id: 'b', label: 'Beta Co' },
-];
-const NAV_PEOPLE = [
-    { name: 'Ada' },
-    { name: 'Grace' },
-    { name: 'Linus' },
-    { name: 'Margaret' },
-];
 /** A thread for `Chat`, which takes the turns as data rather than as children. */
 const TURNS = [
     { id: 't1', role: 'user', content: 'ask' },
@@ -260,13 +88,6 @@ const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex'
                         tabs: [
                             { id: 'console', title: 'Console', closable: false, content: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "console" }) },
                         ],
-                    }, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "center" }) }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "product-arrangements", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%', maxWidth: 320 }, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: 120 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: "100%", height: 72, rounded: "$4" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton.Text, { lines: 3 })] }), (0, jsx_runtime_1.jsx)(TooltipAnchor_1.TooltipAnchor, { description: "Delete this agent", children: (0, jsx_runtime_1.jsx)(gui_2.Button, { children: "hinted" }) }), (0, jsx_runtime_1.jsx)(gui_2.Dialog, { open: true, children: (0, jsx_runtime_1.jsx)(DialogTemplate_1.DialogTemplate, { title: "Delete agent", description: "This removes every run recorded against it.", confirm: { label: 'Delete', tone: 'danger' }, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "body" }) }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "chat", children: [(0, jsx_runtime_1.jsxs)(gui_2.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: [(0, jsx_runtime_1.jsxs)(chat_1.Header, { title: "A conversation with a long enough name to clamp", leading: (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {}), onOpenMenu: NOOP, children: [(0, jsx_runtime_1.jsx)(chat_1.ShareButton, {}), (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {})] }), (0, jsx_runtime_1.jsx)(gui_2.Fill, { children: (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "plain Fill \u2014 the middle, without a Thread" }) }), (0, jsx_runtime_1.jsxs)(chat_1.Thread, { children: [(0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "ask" }), (0, jsx_runtime_1.jsxs)(chat_1.Message, { role: "assistant", icon: (0, jsx_runtime_1.jsx)(gui_2.Spinner, {}), actions: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "copy" }), children: [(0, jsx_runtime_1.jsx)(chat_1.Step, { name: "shell", status: "running", detail: "git status --porcelain" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "write", status: "done", detail: "src/index.ts", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "json", value: "{}", children: '{}' }) }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "fetch", status: "error", detail: "timed out", children: "plain body" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "plan", status: "cancelled" }), (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "typescript", value: "const x = 1", children: "const x = 1" }), (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES })] }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", busy: true, children: "answering" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { onRetry: NOOP, children: "The model stopped before finishing." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { children: "Rate limited." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", body: { bg: '$color5', rounded: '$3' }, children: "restyled bubble" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "system", children: "note" })] }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "a draft", onChange: NOOP, onSend: NOOP, add: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "tool" }) }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "", onChange: NOOP, onSend: NOOP, onStop: NOOP, busy: true })] }), (0, jsx_runtime_1.jsx)(gui_2.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { messages: TURNS, streaming: true, send: NOOP, stop: NOOP, composer: { placeholder: 'Ask anything' } }) }), (0, jsx_runtime_1.jsx)(gui_2.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { messages: [], send: NOOP, empty: (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "system", children: "nothing yet" }) }) }), (0, jsx_runtime_1.jsx)(chat_1.Aside, { children: (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: '100%', maxWidth: 260, height: 320 }, children: (0, jsx_runtime_1.jsxs)(chat_1.Sidebar, { children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarHeader, { title: "Hanzo", onOpenSwitcher: NOOP, onSearch: NOOP, onCollapse: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.SidebarNewChat, { onPress: NOOP }), (0, jsx_runtime_1.jsxs)(chat_1.SidebarScroll, { children: [(0, jsx_runtime_1.jsxs)(chat_1.SidebarSection, { label: "Today", children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { active: true, onPress: NOOP, children: "Selected thread" }), (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Another thread" })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarFolder, { name: "Archive", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Nested thread" }) })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarUser, { name: "z", secondary: "z@hanzo.ai", onPress: NOOP, onHelp: NOOP })] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "box", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", gap: 16, px: 24, py: 12, rounded: "var(--radius-lg, 0.75rem)", borderWidth: 1, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "utility classes" }) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: 8, maxW: 768, ml: "auto", mr: "auto", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "column" }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "3d-card", children: (0, jsx_runtime_1.jsxs)(gui_3.Card3D, { style: { width: 260 }, children: [(0, jsx_runtime_1.jsxs)(gui_3.Card3DHeader, { children: [(0, jsx_runtime_1.jsx)(gui_3.Card3DTitle, { children: "Tilt card" }), (0, jsx_runtime_1.jsx)(gui_3.Card3DDescription, { children: "Turns toward the pointer" })] }), (0, jsx_runtime_1.jsx)(gui_3.Card3DContent, { children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsx)(gui_3.Card3DFooter, { children: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "Open" }) })] }) }), (0, jsx_runtime_1.jsx)(Section, { name: "advanced-chart", children: (0, jsx_runtime_1.jsx)(gui_3.AdvancedChart, { height: 240 }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "android", children: [ANDROID_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(gui_3.Android, { size: size }, size))), (0, jsx_runtime_1.jsx)(gui_3.Android, { color: "#3DDC84" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "3d-pin", children: [(0, jsx_runtime_1.jsx)(gui_3.Pin3D, { style: { width: 160, height: 100 }, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "plain" }) }), (0, jsx_runtime_1.jsx)(gui_3.Pin3D, { href: "/docs", title: "3D pin", style: { width: 160, height: 100 }, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "linked" }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "alert", children: ALERT_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsxs)(gui_3.Alert, { variant: variant, style: { width: 320 }, children: [(0, jsx_runtime_1.jsx)("svg", { width: 16, height: 16, "aria-hidden": true }), (0, jsx_runtime_1.jsx)(gui_3.AlertTitle, { children: "Heads up" }), (0, jsx_runtime_1.jsx)(gui_3.AlertDescription, { children: "Check the deploy before merging." })] }, variant))) }), (0, jsx_runtime_1.jsx)(Section, { name: "3d-marquee", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, width: '100%' }, children: [MARQUEE_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_3.Marquee3D, { variant: variant, children: "Hanzo" }, variant))), MARQUEE_SIZES.filter((s) => s !== 'default').map((size) => ((0, jsx_runtime_1.jsx)(gui_3.Marquee3D, { size: size, children: "Hanzo" }, size))), MARQUEE_DIRECTIONS.filter((d) => d !== 'left').map((direction) => ((0, jsx_runtime_1.jsx)(gui_3.Marquee3D, { direction: direction, children: "Hanzo" }, direction))), (0, jsx_runtime_1.jsx)(gui_3.Marquee3DFloating, { children: "Float" }), (0, jsx_runtime_1.jsx)(gui_3.Marquee3DPreset.Hero, { children: "Hero" }), (0, jsx_runtime_1.jsx)(gui_3.Marquee3DPreset.Neon, { children: "Neon" }), (0, jsx_runtime_1.jsx)(gui_3.Marquee3DPreset.Metallic, { children: "Metallic" }), (0, jsx_runtime_1.jsx)(gui_3.Marquee3DPreset.Fire, { children: "Fire" }), (0, jsx_runtime_1.jsx)(gui_3.Marquee3DPreset.Glass, { children: "Glass" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "announcement", children: [(0, jsx_runtime_1.jsx)(gui_3.Announcement, { onDismiss: NOOP, children: "New: usage-based billing is live." }), (0, jsx_runtime_1.jsx)(gui_3.Announcement, { dismissible: false, children: "Pinned notice, no dismiss." })] }), (0, jsx_runtime_1.jsx)(Section, { name: "animated-tooltip", children: (0, jsx_runtime_1.jsx)(gui_3.AnimatedTooltip, { content: "Delete this file", children: (0, jsx_runtime_1.jsx)(gui_2.Button, { children: "hover me" }) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "animated-beam", children: (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: 240, height: 80 }, children: (0, jsx_runtime_1.jsx)(gui_3.AnimatedBeam, {}) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "animated-testimonials", children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 480 }, children: (0, jsx_runtime_1.jsx)(gui_3.AnimatedTestimonials, { testimonials: TESTIMONIALS, autoPlay: false }) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "animated-cursor", children: (0, jsx_runtime_1.jsx)(gui_3.AnimatedCursor, {}) }), (0, jsx_runtime_1.jsx)(Section, { name: "apple-cards-carousel", children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_3.AppleCardsCarousel, { cards: CAROUSEL_CARDS }) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "apple-hello-effect", children: (0, jsx_runtime_1.jsx)(gui_3.AppleHelloEffect, { text: "Hello" }) }), (0, jsx_runtime_1.jsx)(Section, { name: "banner", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }, children: BANNER_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsxs)(gui_3.Banner, { variant: variant, onClose: NOOP, children: [(0, jsx_runtime_1.jsx)("svg", { width: 16, height: 16, "aria-hidden": true }), "Deployment ", variant, " \u2014 three services affected."] }, variant))) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "choicebox", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 320 }, children: (0, jsx_runtime_1.jsx)(gui_3.Choicebox, { options: CHOICEBOX_OPTIONS, defaultValue: "b" }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 320 }, children: (0, jsx_runtime_1.jsx)(gui_3.Choicebox, { options: CHOICEBOX_OPTIONS, defaultValue: "a,c", multiple: true }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "news-timeline", children: [(0, jsx_runtime_1.jsx)(gui_2.NewsTimeline, { width: 320, height: 200 }), (0, jsx_runtime_1.jsx)(gui_2.NewsTimeline, { width: 320, height: 200, feedMode: "market", market: "crypto", colorTheme: "light" }), (0, jsx_runtime_1.jsx)(gui_2.NewsTimeline, { width: 320, height: 200, feedMode: "symbol", symbol: "NASDAQ:AAPL", isTransparent: true })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "minimal-tiptap", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_2.MinimalTiptap, { placeholder: "Write the release notes\u2026" }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_2.MinimalTiptap, { minH: 80, placeholder: "One-line summary" }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_2.MinimalTiptap, { disabled: true, defaultValue: "Locked after the release shipped." }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "motion-highlight", children: (0, jsx_runtime_1.jsx)(gui_2.MotionHighlight, { children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "hover glow" }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "orders-history", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(gui_2.OrdersHistory, { orders: ORDERS, onCancelOrder: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(gui_2.OrdersHistory, { orders: [], showFilters: false }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "pagination", children: (0, jsx_runtime_1.jsx)(gui_2.Pagination, { children: (0, jsx_runtime_1.jsxs)(gui_2.PaginationContent, { children: [(0, jsx_runtime_1.jsx)(gui_2.PaginationItem, { children: (0, jsx_runtime_1.jsx)(gui_2.PaginationPrevious, { href: "#" }) }), (0, jsx_runtime_1.jsx)(gui_2.PaginationItem, { children: (0, jsx_runtime_1.jsx)(gui_2.PaginationLink, { href: "#", children: "1" }) }), (0, jsx_runtime_1.jsx)(gui_2.PaginationItem, { children: (0, jsx_runtime_1.jsx)(gui_2.PaginationLink, { href: "#", isActive: true, children: "2" }) }), (0, jsx_runtime_1.jsx)(gui_2.PaginationItem, { children: (0, jsx_runtime_1.jsx)(gui_2.PaginationEllipsis, {}) }), (0, jsx_runtime_1.jsx)(gui_2.PaginationItem, { children: (0, jsx_runtime_1.jsx)(gui_2.PaginationLink, { href: "#", children: "9" }) }), (0, jsx_runtime_1.jsx)(gui_2.PaginationItem, { children: (0, jsx_runtime_1.jsx)(gui_2.PaginationNext, { href: "#" }) })] }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "order-entry", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_2.OrderEntry, { symbol: "NASDAQ:AAPL", accountBalance: 10000, onPlaceOrder: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_2.OrderEntry, { symbol: "NASDAQ:MSFT", accountBalance: 5000, disabled: true }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "positions-list", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 320 }, children: (0, jsx_runtime_1.jsx)(gui_2.PositionsList, { positions: POSITIONS, onPositionClick: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 320 }, children: (0, jsx_runtime_1.jsx)(gui_2.PositionsList, { positions: [] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "pixel-image", children: [(0, jsx_runtime_1.jsx)(gui_2.PixelImage, { src: SWATCH, pixelSize: 8, alt: "swatch" }), (0, jsx_runtime_1.jsx)(gui_2.PixelImage, { src: SWATCH, pixelSize: 10, width: 160, rounded: "$4", overflow: "hidden", borderWidth: 1, borderColor: "$borderColor" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "particles", children: (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: 240, height: 160, overflow: 'hidden', background: '#000' }, children: (0, jsx_runtime_1.jsx)(gui_2.Particles, { particleCount: 20 }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "pill", children: [PILL_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_2.Pill, { variant: variant, children: variant }, variant))), (0, jsx_runtime_1.jsx)(gui_2.Pill, { variant: "secondary", onRemove: NOOP, children: "removable" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "particles-background", children: (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: '100%', maxWidth: 320, height: 120, overflow: 'hidden', background: '#000' }, children: (0, jsx_runtime_1.jsx)(gui_2.ParticlesBackground, { particleCount: 20 }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "pin-list", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_2.PinList, { items: PIN_ITEMS, defaultValue: ['pulsar'] }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_2.PinList, { items: PIN_ITEMS, defaultValue: ['quasar', 'pulsar'], max: 2 }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "relative-time", children: [(0, jsx_runtime_1.jsx)(gui_2.RelativeTime, { date: new Date(Date.now() - 60 * 60 * 1000) }), (0, jsx_runtime_1.jsx)(gui_2.RelativeTime, { date: new Date(Date.now() - 3 * 60 * 60 * 1000), format: "short" }), (0, jsx_runtime_1.jsx)(gui_2.RelativeTime, { date: new Date(Date.now() - 24 * 60 * 60 * 1000), format: "long" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "safari", children: [(0, jsx_runtime_1.jsx)(gui_2.Safari, { url: "https://ui.hanzo.ai", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "preview" }) }), (0, jsx_runtime_1.jsx)(gui_2.Safari, { url: "https://ui.hanzo.ai/docs", showToolbar: false, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "no toolbar" }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "stars-scrolling-wheel", children: [WHEEL_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(gui_2.StarsScrollingWheel, { size: size, defaultValue: 3, max: 5 }, size))), WHEEL_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(gui_2.StarsScrollingWheel, { size: size, orientation: "horizontal", defaultValue: 3, max: 5 }, `h-${size}`))), (0, jsx_runtime_1.jsx)(gui_2.StarsScrollingWheel, { defaultValue: 2.5, max: 5, step: 0.5 }), (0, jsx_runtime_1.jsx)(gui_2.StarsScrollingWheel, { defaultValue: 3, max: 5, disabled: true })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "calendar", children: [(0, jsx_runtime_1.jsx)(gui_4.Calendar, { mode: "single", month: new Date(2026, 0, 1), selected: new Date(2026, 0, 15) }), (0, jsx_runtime_1.jsx)(gui_4.Calendar, { mode: "multiple", month: new Date(2026, 0, 1), selected: [new Date(2026, 0, 3), new Date(2026, 0, 10)] }), (0, jsx_runtime_1.jsx)(gui_4.Calendar, { mode: "range", month: new Date(2026, 0, 1), selected: { from: new Date(2026, 0, 5), to: new Date(2026, 0, 12) } }), (0, jsx_runtime_1.jsx)(gui_4.Calendar, { month: new Date(2026, 0, 1), numberOfMonths: 2, disabled: (d) => d.getDay() === 0 })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "code-editor", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeEditor, { language: "typescript", defaultValue: "const x = 1", height: 160 }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeEditor, { theme: "light", defaultValue: "a", height: 120 }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeEditor, { theme: "dark", defaultValue: "a", height: 120 }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeEditor, { wordWrap: "off", defaultValue: "a long line that does not wrap", height: 120 }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeEditor, { readOnly: true, defaultValue: "locked", height: 120, showLanguageSelector: false }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeEditor, { showLanguageSelector: false, showCopyButton: false, defaultValue: "no toolbar", height: 120 }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "code-block", children: [CODE_BLOCK_THEMES.map((theme) => ((0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeBlock, { code: CODE, language: "javascript", filename: "add.js", theme: theme }) }, theme))), CODE_BLOCK_SIZES.filter((s) => s !== 'default').map((size) => ((0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeBlock, { code: CODE, language: "javascript", size: size }) }, size))), (0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeBlock, { code: CODE, highlightLines: [2] }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeBlock, { code: CODE, diff: { added: [2], removed: [1] } }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeBlock, { code: CODE, showLineNumbers: false, showCopyButton: false }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "company-profile", children: [(0, jsx_runtime_1.jsx)(gui_4.CompanyProfile, { symbol: "NASDAQ:AAPL", height: 200 }), (0, jsx_runtime_1.jsx)(gui_4.CompanyProfile, { symbol: "NASDAQ:MSFT", height: 200, colorTheme: "light", isTransparent: true })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "credit-card", children: [(0, jsx_runtime_1.jsx)(gui_4.CreditCard, { number: "4242 4242 4242 4242", name: "A. Ryder", expiry: "09/28", cvv: "123" }), (0, jsx_runtime_1.jsx)(gui_4.CreditCard, { variant: "minimal", number: "4242 4242 4242 4242", name: "A. Ryder", expiry: "09/28" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "comparison", children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_4.Comparison, { columns: COMPARISON_COLUMNS }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "code-tabs", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeTabs, { tabs: CODE_TABS }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_4.CodeTabs, { tabs: [] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "combobox", children: [(0, jsx_runtime_1.jsx)(gui_4.Combobox, { options: COMBOBOX_OPTIONS }), (0, jsx_runtime_1.jsx)(gui_4.Combobox, { options: COMBOBOX_OPTIONS, value: "next" }), (0, jsx_runtime_1.jsx)(gui_4.ComboboxWithIcons, { options: COMBOBOX_ICON_OPTIONS, value: "done" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "color-picker", children: [(0, jsx_runtime_1.jsx)(gui_4.ColorPicker, {}), (0, jsx_runtime_1.jsx)(gui_4.ColorPicker, { value: "#22c55e", presets: ['#ef4444', '#22c55e', '#3b82f6'] }), (0, jsx_runtime_1.jsx)(gui_4.ColorPicker, { disabled: true })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "crypto-screener", children: [(0, jsx_runtime_1.jsx)(gui_4.CryptoScreener, { height: 200 }), (0, jsx_runtime_1.jsx)(gui_4.CryptoScreener, { height: 200, colorTheme: "light", defaultColumn: "performance", isTransparent: true })] }), (0, jsx_runtime_1.jsx)(Section, { name: "cursor", children: (0, jsx_runtime_1.jsx)(gui_4.Cursor, { cursorText: "view", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "hover area" }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "crypto-market", children: [(0, jsx_runtime_1.jsx)(gui_4.MarketOverview, { height: 220 }), (0, jsx_runtime_1.jsx)(gui_4.MarketOverview, { height: 220, tabs: ['indices', 'forex'], colorTheme: "light" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "desktop", children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 160 }, children: (0, jsx_runtime_1.jsx)(gui_4.Desktop, { background: "linear-gradient(135deg, #1e293b, #0f172a)", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "desktop surface" }) }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "data-table", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_4.DataTable, { columns: PEOPLE_COLUMNS, data: PEOPLE, filterColumnId: "name", pageSize: 1 }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_4.DataTable, { columns: PEOPLE_COLUMNS, data: [] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "date-picker", children: [(0, jsx_runtime_1.jsx)(gui_4.DatePicker, {}), (0, jsx_runtime_1.jsx)(gui_4.DatePicker, { selected: new Date(2026, 0, 15), presets: [{ label: 'Today', days: 0 }, { label: 'In a week', days: 7 }] }), (0, jsx_runtime_1.jsx)(gui_4.DatePicker, { mode: "range", selected: { from: new Date(2026, 0, 5), to: new Date(2026, 0, 12) } })] }), (0, jsx_runtime_1.jsx)(Section, { name: "dialog-stack", children: (0, jsx_runtime_1.jsx)("div", { style: { width: 280, height: 160 }, children: (0, jsx_runtime_1.jsx)(gui_5.DialogStack, { dialogs: DIALOG_STACK_ITEMS, onClose: NOOP }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "desktop-window", children: [WINDOW_TYPES.map((windowType) => ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: 220, height: 140, overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(gui_5.DesktopWindow, { title: windowType, windowType: windowType, initialPosition: { x: 0, y: 0 }, initialSize: { width: 220, height: 140 }, draggable: false, resizable: false, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "window body" }) }) }, windowType))), (0, jsx_runtime_1.jsx)(gui_5.DesktopWindowControls, { onClose: NOOP, onMinimize: NOOP, onMaximize: NOOP }), (0, jsx_runtime_1.jsx)(gui_5.DesktopWindowControls, { onClose: NOOP, onMinimize: NOOP, onMaximize: NOOP, isMaximized: true })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "dropzone", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_5.Dropzone, { onFilesAccepted: NOOP, onFilesRejected: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_5.Dropzone, { disabled: true }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "editor", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_5.Editor, { placeholder: "Start typing\u2026" }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 320 }, children: (0, jsx_runtime_1.jsx)(gui_5.Editor, { value: "<p>Existing <strong>content</strong></p>", onChange: NOOP }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "dock", children: DOCK_POSITIONS.map((position) => ((0, jsx_runtime_1.jsxs)(gui_5.Dock, { position: position, children: [(0, jsx_runtime_1.jsx)(gui_5.DockItem, { tooltip: "Files", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "F" }) }), (0, jsx_runtime_1.jsx)(gui_5.DockItem, { tooltip: "Mail", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "M" }) }), (0, jsx_runtime_1.jsx)(gui_5.DockSeparator, {}), (0, jsx_runtime_1.jsx)(gui_5.DockItem, { tooltip: "Settings", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "S" }) })] }, position))) }), (0, jsx_runtime_1.jsx)(Section, { name: "desktop-spotlight", children: (0, jsx_runtime_1.jsx)(gui_5.Spotlight, { isOpen: true, onClose: NOOP, items: SPOTLIGHT_ITEMS, onSelect: NOOP }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "empty", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsxs)(gui_5.Empty, { children: [(0, jsx_runtime_1.jsxs)(gui_5.EmptyHeader, { children: [(0, jsx_runtime_1.jsx)(gui_5.EmptyMedia, { variant: "icon", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "+" }) }), (0, jsx_runtime_1.jsx)(gui_5.EmptyTitle, { children: "No projects yet" }), (0, jsx_runtime_1.jsx)(gui_5.EmptyDescription, { children: "Create one to get started." })] }), (0, jsx_runtime_1.jsx)(gui_5.EmptyContent, { children: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "New project" }) })] }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 280 }, children: (0, jsx_runtime_1.jsx)(gui_5.Empty, { children: (0, jsx_runtime_1.jsxs)(gui_5.EmptyHeader, { children: [(0, jsx_runtime_1.jsx)(gui_5.EmptyMedia, { children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "\u2205" }) }), (0, jsx_runtime_1.jsx)(gui_5.EmptyTitle, { children: "Nothing found" })] }) }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "forex-screener", children: [(0, jsx_runtime_1.jsx)(gui_5.ForexScreener, { height: 220 }), (0, jsx_runtime_1.jsx)(gui_5.ForexScreener, { height: 220, colorTheme: "light", showToolbar: false })] }), (0, jsx_runtime_1.jsx)(Section, { name: "forex-market", children: (0, jsx_runtime_1.jsx)(gui_5.ForexMarket, { height: 220 }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "gantt", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(gui_5.Gantt, { tasks: GANTT_TASKS }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(gui_5.Gantt, { tasks: [] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "financials", children: [(0, jsx_runtime_1.jsx)(gui_5.Financials, { symbol: "NASDAQ:AAPL", height: 260 }), (0, jsx_runtime_1.jsx)(gui_5.Financials, { symbol: "NASDAQ:MSFT", height: 260, colorTheme: "light", displayMode: "compact" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "field", children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsxs)(gui_5.FieldSet, { children: [(0, jsx_runtime_1.jsx)(gui_5.FieldLegend, { children: "Account" }), (0, jsx_runtime_1.jsx)(gui_5.FieldLegend, { variant: "label", children: "Label-styled legend" }), (0, jsx_runtime_1.jsxs)(gui_5.FieldGroup, { children: [(0, jsx_runtime_1.jsxs)(gui_5.Field, { children: [(0, jsx_runtime_1.jsx)(gui_5.FieldLabel, { children: "Name" }), (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "Ada Lovelace" }), (0, jsx_runtime_1.jsx)(gui_5.FieldDescription, { children: "Shown on your profile." })] }), (0, jsx_runtime_1.jsxs)(gui_5.Field, { orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(gui_5.FieldLabel, { children: "Email" }), (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "ada@hanzo.ai" })] }), (0, jsx_runtime_1.jsxs)(gui_5.Field, { orientation: "responsive", "data-invalid": true, children: [(0, jsx_runtime_1.jsx)(gui_5.FieldLabel, { children: "Password" }), (0, jsx_runtime_1.jsx)(gui_2.Input, { type: "password" }), (0, jsx_runtime_1.jsx)(gui_5.FieldError, { children: "Must be at least 8 characters." })] }), (0, jsx_runtime_1.jsx)(gui_5.FieldSeparator, { children: "or" }), (0, jsx_runtime_1.jsx)(gui_5.FieldLabel, { children: (0, jsx_runtime_1.jsxs)(gui_5.Field, { children: [(0, jsx_runtime_1.jsx)(gui_5.FieldTitle, { children: "Two-factor auth" }), (0, jsx_runtime_1.jsx)(gui_5.FieldDescription, { children: "Require a code at sign-in." })] }) })] })] }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "image-crop", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: 240 }, children: (0, jsx_runtime_1.jsx)(gui_5.ImageCrop, { src: SWATCH, onCrop: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 240 }, children: (0, jsx_runtime_1.jsx)(gui_5.ImageCrop, { src: SWATCH, aspect: 16 / 9 }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "interactive-grid-pattern", children: (0, jsx_runtime_1.jsx)("div", { style: { width: 200, height: 120, overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(gui_5.InteractiveGridPattern, { width: 20, height: 20, squares: [10, 6] }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "grid-pattern", children: [GRID_PATTERN_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: 120, height: 80, overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(gui_5.GridPattern, { variant: variant }) }, variant))), (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: 120, height: 80, overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(gui_5.GridPattern, { fade: "center" }) }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: 120, height: 80, overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(gui_5.GridPattern, { fade: "radial" }) }), (0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', width: 120, height: 80, overflow: 'hidden' }, children: (0, jsx_runtime_1.jsx)(gui_5.GridPattern, { gradient: { from: '#3b82f6', to: '#22c55e' }, animation: {} }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "iphone-15-pro", children: [IPHONE_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_6.IPhone15Pro, { variant: variant }, variant))), IPHONE_COLORS.map((color) => ((0, jsx_runtime_1.jsx)(gui_6.IPhone15Pro, { color: color, variant: "mini" }, color)))] }), (0, jsx_runtime_1.jsxs)(Section, { name: "image-zoom", children: [(0, jsx_runtime_1.jsx)(gui_6.ImageZoom, { src: SWATCH, alt: "Swatch", width: 160, height: 120 }), (0, jsx_runtime_1.jsx)(gui_6.ImageZoom, { src: SWATCH, alt: "Swatch", width: 120, height: 120, zoomScale: 3 })] }), (0, jsx_runtime_1.jsx)(Section, { name: "glimpse", children: (0, jsx_runtime_1.jsxs)(gui_6.Glimpse, { children: [(0, jsx_runtime_1.jsx)(gui_6.GlimpseTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("a", { href: "https://ui.hanzo.ai", children: "ui.hanzo.ai" }) }), (0, jsx_runtime_1.jsxs)(gui_6.GlimpseContent, { children: [(0, jsx_runtime_1.jsx)(gui_6.GlimpseImage, { src: SWATCH, alt: "" }), (0, jsx_runtime_1.jsx)(gui_6.GlimpseTitle, { children: "Hanzo UI" }), (0, jsx_runtime_1.jsx)(gui_6.GlimpseDescription, { children: "A design system for the whole estate." })] })] }) }), (0, jsx_runtime_1.jsx)(Section, { name: "list", children: (0, jsx_runtime_1.jsxs)(gui_6.List, { children: [(0, jsx_runtime_1.jsx)(gui_6.ListItem, { children: "First item" }), (0, jsx_runtime_1.jsx)(gui_6.ListItem, { children: "Second item" }), (0, jsx_runtime_1.jsx)(gui_6.ListItem, { children: "Third item" })] }) }), (0, jsx_runtime_1.jsx)(Section, { name: "macos-dock", children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 140, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }, children: (0, jsx_runtime_1.jsxs)(gui_6.MacosDock, { children: [(0, jsx_runtime_1.jsx)(gui_6.MacosDockItem, { tooltip: "Finder", children: "\uD83C\uDFE0" }), (0, jsx_runtime_1.jsx)(gui_6.MacosDockItem, { tooltip: "Search", children: "\uD83D\uDD0D" }), (0, jsx_runtime_1.jsx)(gui_6.MacosDockItem, { tooltip: "Mail", children: "\u2709\uFE0F" })] }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "kbd", children: [(0, jsx_runtime_1.jsx)(gui_6.Kbd, { children: "Esc" }), (0, jsx_runtime_1.jsxs)(gui_6.KbdGroup, { children: [(0, jsx_runtime_1.jsx)(gui_6.Kbd, { children: "Ctrl" }), (0, jsx_runtime_1.jsx)(gui_6.Kbd, { children: "B" })] })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "item", children: [ITEM_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_6.Item, { variant: variant, children: (0, jsx_runtime_1.jsxs)(gui_6.ItemContent, { children: [(0, jsx_runtime_1.jsx)(gui_6.ItemTitle, { children: variant }), (0, jsx_runtime_1.jsx)(gui_6.ItemDescription, { children: "A short description line." })] }) }, variant))), ITEM_SIZES.map((size) => ((0, jsx_runtime_1.jsxs)(gui_6.Item, { size: size, variant: "outline", children: [(0, jsx_runtime_1.jsx)(gui_6.ItemMedia, { variant: "icon", children: (0, jsx_runtime_1.jsx)(gui_2.Badge, { variant: "secondary", children: "i" }) }), (0, jsx_runtime_1.jsx)(gui_6.ItemContent, { children: (0, jsx_runtime_1.jsxs)(gui_6.ItemTitle, { children: ["size ", size] }) }), (0, jsx_runtime_1.jsx)(gui_6.ItemActions, { children: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", variant: "outline", children: "Reply" }) })] }, size))), (0, jsx_runtime_1.jsxs)(gui_6.ItemGroup, { children: [(0, jsx_runtime_1.jsx)(gui_6.Item, { size: "sm", variant: "outline", children: (0, jsx_runtime_1.jsx)(gui_6.ItemContent, { children: (0, jsx_runtime_1.jsx)(gui_6.ItemTitle, { children: "Invoice #1024" }) }) }), (0, jsx_runtime_1.jsx)(gui_6.ItemSeparator, {}), (0, jsx_runtime_1.jsx)(gui_6.Item, { size: "sm", variant: "outline", children: (0, jsx_runtime_1.jsx)(gui_6.ItemContent, { children: (0, jsx_runtime_1.jsx)(gui_6.ItemTitle, { children: "Invoice #1025" }) }) })] }), (0, jsx_runtime_1.jsxs)(gui_6.Item, { variant: "outline", children: [(0, jsx_runtime_1.jsx)(gui_6.ItemMedia, { variant: "image", children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsx)(gui_6.ItemContent, { children: (0, jsx_runtime_1.jsx)(gui_6.ItemTitle, { children: "Image media" }) })] })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "limelight-nav", children: [(0, jsx_runtime_1.jsx)(gui_6.LimelightNav, { items: NAV_ITEMS, defaultValue: "docs" }), (0, jsx_runtime_1.jsx)(gui_6.LimelightNav, { items: NAV_ITEMS, defaultValue: "overview", variant: "bar" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "kanban", children: (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', height: 420 }, children: (0, jsx_runtime_1.jsx)(gui_6.KanbanBoard, { board: KANBAN_BOARD, onUpdateBoard: NOOP }) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "magnetic", children: (0, jsx_runtime_1.jsx)(gui_6.Magnetic, { strength: 0.3, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Hover me" }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "menu-dock", children: [(0, jsx_runtime_1.jsx)("div", { style: { minHeight: 160, display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_6.MenuDock, { items: [
-                            { icon: '🏠', label: 'Home', active: true },
-                            { icon: '🔍', label: 'Search' },
-                            { icon: '🔔', label: 'Alerts' },
-                        ] }) }), (0, jsx_runtime_1.jsx)("div", { style: { minHeight: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_6.MenuDock, { orientation: "vertical", items: [
-                            { icon: '🏠', label: 'Home' },
-                            { icon: '🔍', label: 'Search', active: true },
-                        ] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "marquee", children: [(0, jsx_runtime_1.jsxs)(gui_6.Marquee, { children: [(0, jsx_runtime_1.jsx)("span", { children: "Fast" }), (0, jsx_runtime_1.jsx)("span", { children: "Accessible" }), (0, jsx_runtime_1.jsx)("span", { children: "Themeable" })] }), (0, jsx_runtime_1.jsx)("div", { style: { height: 160 }, children: (0, jsx_runtime_1.jsxs)(gui_6.Marquee, { vertical: true, gap: 12, children: [(0, jsx_runtime_1.jsx)("span", { children: "One" }), (0, jsx_runtime_1.jsx)("span", { children: "Two" }), (0, jsx_runtime_1.jsx)("span", { children: "Three" })] }) }), (0, jsx_runtime_1.jsx)(gui_6.Marquee, { reverse: true, pauseOnHover: true, repeat: 4, children: (0, jsx_runtime_1.jsx)("span", { children: "Hover to pause" }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "mini-calendar", children: (0, jsx_runtime_1.jsx)(gui_6.MiniCalendar, { month: new Date(2026, 0, 1), selected: new Date(2026, 0, 15), onSelect: NOOP }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "message-dock", children: [(0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', minHeight: 220, width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_6.MessageDock, { messages: MESSAGE_DOCK_MESSAGES }) }), MESSAGE_DOCK_POSITIONS.map((position) => ((0, jsx_runtime_1.jsx)("div", { style: { position: 'relative', minHeight: 100, width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_6.MessageDock, { messages: [{ id: position, type: 'info', title: `Docked ${position}` }], position: position }) }, position)))] }), (0, jsx_runtime_1.jsx)(Section, { name: "menubar", children: (0, jsx_runtime_1.jsxs)(gui_6.Menubar, { defaultValue: "edit", children: [(0, jsx_runtime_1.jsxs)(gui_6.MenubarMenu, { value: "file", children: [(0, jsx_runtime_1.jsx)(gui_6.MenubarTrigger, { children: "File" }), (0, jsx_runtime_1.jsx)(gui_6.MenubarContent, { children: (0, jsx_runtime_1.jsx)(gui_6.MenubarItem, { children: "New Tab" }) })] }), (0, jsx_runtime_1.jsxs)(gui_6.MenubarMenu, { value: "edit", children: [(0, jsx_runtime_1.jsx)(gui_6.MenubarTrigger, { children: "Edit" }), (0, jsx_runtime_1.jsxs)(gui_6.MenubarContent, { children: [(0, jsx_runtime_1.jsxs)(gui_6.MenubarItem, { children: ["Undo", (0, jsx_runtime_1.jsx)(gui_6.MenubarShortcut, { children: "\u2318Z" })] }), (0, jsx_runtime_1.jsx)(gui_6.MenubarItem, { disabled: true, children: "Redo" }), (0, jsx_runtime_1.jsx)(gui_6.MenubarSeparator, {}), (0, jsx_runtime_1.jsx)(gui_6.MenubarCheckboxItem, { checked: true, children: "Full URLs" }), (0, jsx_runtime_1.jsx)(gui_6.MenubarCheckboxItem, { children: "Bookmarks bar" }), (0, jsx_runtime_1.jsx)(gui_6.MenubarSeparator, {}), (0, jsx_runtime_1.jsxs)(gui_6.MenubarRadioGroup, { value: "b", children: [(0, jsx_runtime_1.jsx)(gui_6.MenubarRadioItem, { value: "a", children: "Andy" }), (0, jsx_runtime_1.jsx)(gui_6.MenubarRadioItem, { value: "b", children: "Benoit" })] }), (0, jsx_runtime_1.jsx)(gui_6.MenubarSeparator, {}), (0, jsx_runtime_1.jsxs)(gui_6.MenubarSub, { children: [(0, jsx_runtime_1.jsx)(gui_6.MenubarSubTrigger, { children: "Share" }), (0, jsx_runtime_1.jsx)(gui_6.MenubarSubContent, { children: (0, jsx_runtime_1.jsx)(gui_6.MenubarItem, { children: "Email link" }) })] }), (0, jsx_runtime_1.jsxs)(gui_6.MenubarItem, { inset: true, children: ["Reload", (0, jsx_runtime_1.jsx)(gui_6.MenubarShortcut, { children: "\u2318R" })] })] })] })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "qr-code", children: [(0, jsx_runtime_1.jsx)(gui_7.QRCode, { value: "https://hanzo.ai", size: 120 }), (0, jsx_runtime_1.jsx)(gui_7.QRCode, { value: "https://hanzo.ai", size: 120, includeMargin: true, level: "H" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "snippet", children: [SNIPPET_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)("div", { style: { width: 260 }, children: (0, jsx_runtime_1.jsx)(gui_7.Snippet, { code: SNIPPET_CODE, language: "javascript", filename: "sum.js", variant: variant }) }, variant))), SNIPPET_THEMES.filter((t) => t !== 'dark').map((theme) => ((0, jsx_runtime_1.jsx)("div", { style: { width: 260 }, children: (0, jsx_runtime_1.jsx)(gui_7.Snippet, { code: SNIPPET_CODE, theme: theme }) }, theme))), SNIPPET_SIZES.filter((s) => s !== 'default').map((size) => ((0, jsx_runtime_1.jsx)("div", { style: { width: 260 }, children: (0, jsx_runtime_1.jsx)(gui_7.Snippet, { code: SNIPPET_CODE, size: size }) }, size))), (0, jsx_runtime_1.jsx)("div", { style: { width: 260 }, children: (0, jsx_runtime_1.jsx)(gui_7.Snippet, { code: SNIPPET_CODE, showLineNumbers: true, highlightLines: [1] }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: 260 }, children: (0, jsx_runtime_1.jsx)(gui_7.Snippet, { code: SNIPPET_CODE, expandable: true, collapsedHeight: 40 }) }), (0, jsx_runtime_1.jsx)(gui_7.InlineCode, { children: "npm install" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "stock-screener", children: [(0, jsx_runtime_1.jsx)(gui_7.StockScreener, { height: 220 }), (0, jsx_runtime_1.jsx)(gui_7.StockScreener, { height: 220, colorTheme: "light", showToolbar: false, market: "germany" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "symbol-info", children: [(0, jsx_runtime_1.jsx)(gui_7.SymbolInfo, { symbol: "NASDAQ:AAPL" }), (0, jsx_runtime_1.jsx)(gui_7.SymbolInfo, { symbol: "NASDAQ:MSFT", colorTheme: "light", isTransparent: true })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "status", children: [STATUS_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_7.Status, { variant: variant, children: variant }, variant))), (0, jsx_runtime_1.jsx)(gui_7.Status, { dot: false, children: "no dot" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "stock-market", children: (0, jsx_runtime_1.jsx)(gui_7.StockMarket, { height: 220 }) }), (0, jsx_runtime_1.jsx)(Section, { name: "table", children: (0, jsx_runtime_1.jsxs)(gui_7.Table, { children: [(0, jsx_runtime_1.jsx)(gui_7.TableCaption, { children: "A list of recent invoices." }), (0, jsx_runtime_1.jsx)(gui_7.TableHeader, { children: (0, jsx_runtime_1.jsxs)(gui_7.TableRow, { children: [(0, jsx_runtime_1.jsx)(gui_7.TableHead, { children: "Invoice" }), (0, jsx_runtime_1.jsx)(gui_7.TableHead, { children: "Status" }), (0, jsx_runtime_1.jsx)(gui_7.TableHead, { children: "Amount" })] }) }), (0, jsx_runtime_1.jsxs)(gui_7.TableBody, { children: [(0, jsx_runtime_1.jsxs)(gui_7.TableRow, { children: [(0, jsx_runtime_1.jsx)(gui_7.TableCell, { children: "INV001" }), (0, jsx_runtime_1.jsx)(gui_7.TableCell, { children: "Paid" }), (0, jsx_runtime_1.jsx)(gui_7.TableCell, { children: "$250.00" })] }), (0, jsx_runtime_1.jsxs)(gui_7.TableRow, { selected: true, children: [(0, jsx_runtime_1.jsx)(gui_7.TableCell, { children: "INV002" }), (0, jsx_runtime_1.jsx)(gui_7.TableCell, { children: "Pending" }), (0, jsx_runtime_1.jsx)(gui_7.TableCell, { children: "$150.00" })] })] }), (0, jsx_runtime_1.jsx)(gui_7.TableFooter, { children: (0, jsx_runtime_1.jsxs)(gui_7.TableRow, { children: [(0, jsx_runtime_1.jsx)(gui_7.TableCell, { colSpan: 2, children: "Total" }), (0, jsx_runtime_1.jsx)(gui_7.TableCell, { children: "$400.00" })] }) })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "tags", children: [(0, jsx_runtime_1.jsx)(gui_7.Tags, { tags: TAGS, onRemove: NOOP }), (0, jsx_runtime_1.jsx)(gui_7.Tags, { tags: TAGS, variant: "secondary" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "technical-analysis", children: [(0, jsx_runtime_1.jsx)(gui_7.TechnicalAnalysis, { height: 260 }), (0, jsx_runtime_1.jsx)(gui_7.TechnicalAnalysis, { height: 260, colorTheme: "light", displayMode: "multiple", showIntervalTabs: false })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "ticker", children: [(0, jsx_runtime_1.jsx)(gui_7.Ticker, { children: "Hanzo" }), (0, jsx_runtime_1.jsx)(gui_7.Ticker, { direction: "right", pauseOnHover: false, children: "Hanzo" })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "toggle", children: [TOGGLE_VARIANTS.map((variant) => TOGGLE_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(gui_7.Toggle, { variant: variant, size: size, children: size }, `${variant}-${size}`)))), (0, jsx_runtime_1.jsx)(gui_7.Toggle, { defaultPressed: true, children: "pressed" }), (0, jsx_runtime_1.jsx)(gui_7.Toggle, { disabled: true, children: "disabled" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "terminal", children: TERMINAL_THEMES.map((theme) => ((0, jsx_runtime_1.jsx)("div", { style: { width: 280, height: 160 }, children: (0, jsx_runtime_1.jsx)(gui_7.Terminal, { theme: theme, initialCommands: TERMINAL_COMMANDS }) }, theme))) }), (0, jsx_runtime_1.jsxs)(Section, { name: "timeline", children: [TIMELINE_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 360 }, children: (0, jsx_runtime_1.jsx)(gui_7.Timeline, { items: TIMELINE_ITEMS, variant: variant, animated: false }) }, variant))), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.Timeline, { items: TIMELINE_ITEMS, orientation: "horizontal", animated: false }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "video-player", children: MEDIA_SIZES.map((size) => ((0, jsx_runtime_1.jsx)("div", { style: { width: size === 'full' ? '100%' : undefined }, children: (0, jsx_runtime_1.jsx)(gui_7.MediaPlayer, { sources: MEDIA_SOURCES, size: size }) }, size))) }), (0, jsx_runtime_1.jsxs)(Section, { name: "navigation-bar", children: [(0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.NavigationBar, { variant: "simple", logo: "Hanzo", items: NAV_LINKS }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.NavigationBar, { variant: "centered", logo: "Hanzo", leftItems: NAV_LINKS.slice(0, 1), rightItems: NAV_LINKS.slice(1) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.NavigationBar, { variant: "breadcrumb", items: NAV_LINKS }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.NavigationBar, { variant: "icon", items: [{ label: 'Home', href: '#', icon: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "H" }) }] }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.NavigationBar, { variant: "dashboard", title: "Overview", user: { name: 'Ada' }, onSearch: NOOP, onNotifications: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.NavigationBar, { variant: "ecommerce", logo: "Shop", items: NAV_LINKS, cartCount: 3, onSearch: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.NavigationBar, { variant: "collaboration", title: "Untitled doc", collaborators: NAV_PEOPLE }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.NavigationBar, { variant: "communication", contactName: "Support", onCall: NOOP, onVideo: NOOP, onMessage: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%' }, children: (0, jsx_runtime_1.jsx)(gui_7.NavigationBar, { variant: "switcher", options: NAV_OPTIONS, value: "a", onValueChange: NOOP }) })] })] }));
+                    }, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "center" }) }) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "product-arrangements", children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%', maxWidth: 320 }, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: 120 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { width: "100%", height: 72, rounded: "$4" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton.Text, { lines: 3 })] }), (0, jsx_runtime_1.jsx)(TooltipAnchor_1.TooltipAnchor, { description: "Delete this agent", children: (0, jsx_runtime_1.jsx)(gui_2.Button, { children: "hinted" }) }), (0, jsx_runtime_1.jsx)(gui_2.Dialog, { open: true, children: (0, jsx_runtime_1.jsx)(DialogTemplate_1.DialogTemplate, { title: "Delete agent", description: "This removes every run recorded against it.", confirm: { label: 'Delete', tone: 'danger' }, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "body" }) }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "chat", children: [(0, jsx_runtime_1.jsxs)(gui_2.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: [(0, jsx_runtime_1.jsxs)(chat_1.Header, { title: "A conversation with a long enough name to clamp", leading: (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {}), onOpenMenu: NOOP, children: [(0, jsx_runtime_1.jsx)(chat_1.ShareButton, {}), (0, jsx_runtime_1.jsx)(chat_1.AsideToggle, {})] }), (0, jsx_runtime_1.jsx)(gui_2.Fill, { children: (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "plain Fill \u2014 the middle, without a Thread" }) }), (0, jsx_runtime_1.jsxs)(chat_1.Thread, { children: [(0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", children: "ask" }), (0, jsx_runtime_1.jsxs)(chat_1.Message, { role: "assistant", icon: (0, jsx_runtime_1.jsx)(gui_2.Spinner, {}), actions: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "copy" }), children: [(0, jsx_runtime_1.jsx)(chat_1.Step, { name: "shell", status: "running", detail: "git status --porcelain" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "write", status: "done", detail: "src/index.ts", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "json", value: "{}", children: '{}' }) }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "fetch", status: "error", detail: "timed out", children: "plain body" }), (0, jsx_runtime_1.jsx)(chat_1.Step, { name: "plan", status: "cancelled" }), (0, jsx_runtime_1.jsx)(chat_1.Code, { language: "typescript", value: "const x = 1", children: "const x = 1" }), (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES })] }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", busy: true, children: "answering" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { onRetry: NOOP, children: "The model stopped before finishing." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "assistant", children: (0, jsx_runtime_1.jsx)(chat_1.Failure, { children: "Rate limited." }) }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "user", body: { bg: '$color5', rounded: '$3' }, children: "restyled bubble" }), (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "system", children: "note" })] }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "a draft", onChange: NOOP, onSend: NOOP, hint: "Enter to send", children: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "tool" }) }), (0, jsx_runtime_1.jsx)(chat_1.Composer, { value: "", onChange: NOOP, onSend: NOOP, onStop: NOOP, busy: true })] }), (0, jsx_runtime_1.jsx)(gui_2.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { messages: TURNS, streaming: true, send: NOOP, stop: NOOP, composer: { placeholder: 'Ask anything' } }) }), (0, jsx_runtime_1.jsx)(gui_2.Screen, { height: "min(72vh, 620px)", minH: 420, maxW: 720, gap: "$3", children: (0, jsx_runtime_1.jsx)(chat_1.Chat, { messages: [], send: NOOP, empty: (0, jsx_runtime_1.jsx)(chat_1.Message, { role: "system", children: "nothing yet" }) }) }), (0, jsx_runtime_1.jsx)(chat_1.Aside, { children: (0, jsx_runtime_1.jsx)(chat_1.Sources, { sources: SOURCES }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: '100%', maxWidth: 260, height: 320 }, children: (0, jsx_runtime_1.jsxs)(chat_1.Sidebar, { children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarHeader, { title: "Hanzo", onOpenSwitcher: NOOP, onSearch: NOOP, onCollapse: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.SidebarNewChat, { onPress: NOOP }), (0, jsx_runtime_1.jsxs)(chat_1.SidebarScroll, { children: [(0, jsx_runtime_1.jsxs)(chat_1.SidebarSection, { label: "Today", children: [(0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { active: true, onPress: NOOP, children: "Selected thread" }), (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Another thread" })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarFolder, { name: "Archive", defaultOpen: true, children: (0, jsx_runtime_1.jsx)(chat_1.SidebarItem, { onPress: NOOP, children: "Nested thread" }) })] }), (0, jsx_runtime_1.jsx)(chat_1.SidebarUser, { name: "z", secondary: "z@hanzo.ai", onPress: NOOP, onHelp: NOOP })] }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "box", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { items: "center", gap: 16, px: 24, py: 12, rounded: "var(--radius-lg, 0.75rem)", borderWidth: 1, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "utility classes" }) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: 8, maxW: 768, ml: "auto", mr: "auto", overflow: "hidden", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "column" }) })] })] }));
 exports.Gallery = Gallery;
 exports.default = exports.Gallery;

package/dist/gallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAwZA;;;GAGG;AACH,eAAO,MAAM,OAAO,mCA8kDnB,CAAA;eAEc,OAAO"}
+{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAsJA;;;GAGG;AACH,eAAO,MAAM,OAAO,mCA+lBnB,CAAA;eAEc,OAAO"}