@hanzo/ui 8.27.91 → 8.28.0

package/dist/gallery.cjs

@@ -28,6 +28,8 @@ const gui_1 = require("@hanzo/gui");
  */
 const react_1 = require("react");
 const box_1 = require("./box.cjs");
+const section_1 = require("./gallery/section.cjs");
+const records_1 = require("./gallery/records.cjs");
 const Workbench_1 = require("./product/Workbench.cjs");
 const Skeleton_1 = require("./product/Skeleton.cjs");
 const ConnectionBadge_1 = require("./product/ConnectionBadge.cjs");
@@ -153,27 +155,19 @@ const USAGE = (0, limits_1.limitsOf)({
         { kind: 'topup', label: 'Add prepaid credit', url: 'https://hanzo.ai/billing' },
     ],
 });
-const Section = ({ name, children }) => ((0, jsx_runtime_1.jsx)("section", { "data-gallery": name, style: {
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: 12,
-        alignItems: 'flex-start',
-        width: '100%',
-        maxWidth: 880,
-    }, children: children }));
 /**
  * Every component, once. `data-gallery` names each section so a browser test can
  * scope its assertions without depending on document order.
  */
-const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, padding: 24, maxWidth: 928 }, children: [(0, jsx_runtime_1.jsx)(Section, { name: "type", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }, children: [11, 10, 9, 7, 6, 4, 3, 2, 1].map((rung) => ((0, jsx_runtime_1.jsx)(gui_2.Text, { fontSize: `$${rung}`, lineHeight: `$${rung}`, letterSpacing: `$${rung}`, children: "Hanzo \u2014 the Open AI Cloud" }, rung))) }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "button", children: [BUTTON_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_2.Button, { variant: variant, children: variant }, variant))), BUTTON_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(gui_2.Button, { size: size, children: size }, size))), (0, jsx_runtime_1.jsx)(gui_2.Button, { disabled: true, children: "disabled" }), (0, jsx_runtime_1.jsx)(gui_2.Button, { isLoading: true, children: "loading" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "badge", children: BADGE_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_2.Badge, { variant: variant, children: variant }, variant))) }), (0, jsx_runtime_1.jsx)(Section, { name: "card", children: (0, jsx_runtime_1.jsxs)(gui_2.Card, { children: [(0, jsx_runtime_1.jsxs)(gui_2.CardHeader, { children: [(0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Card title" }), (0, jsx_runtime_1.jsx)(gui_2.CardDescription, { children: "Card description" }), (0, jsx_runtime_1.jsx)(gui_2.CardAction, { children: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", variant: "ghost", children: "action" }) })] }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "Card content" }), (0, jsx_runtime_1.jsx)(gui_2.CardFooter, { children: "Card footer" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "form", children: [(0, jsx_runtime_1.jsx)(gui_2.Label, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "Input" }), (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "Password", type: "password" }), (0, jsx_runtime_1.jsx)(gui_2.Textarea, { placeholder: "Textarea" }), (0, jsx_runtime_1.jsx)(gui_2.Checkbox, {}), (0, jsx_runtime_1.jsx)(gui_2.Checkbox, { checked: true }), (0, jsx_runtime_1.jsx)(gui_2.Switch, {}), (0, jsx_runtime_1.jsx)(gui_2.Switch, { checked: true }), (0, jsx_runtime_1.jsx)(gui_2.Slider, { defaultValue: [40] }), (0, jsx_runtime_1.jsx)(gui_2.Progress, { value: 40 }), (0, jsx_runtime_1.jsxs)(gui_2.RadioGroup, { defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "a" }), (0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "b" }), (0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "c", disabled: true })] }), (0, jsx_runtime_1.jsxs)(gui_2.RadioGroup, { orientation: "horizontal", defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "a" }), (0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "b" })] })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "toggle-group", children: [['default', 'outline'].map((variant) => ['default', 'sm', 'lg'].map((size) => ((0, jsx_runtime_1.jsxs)(gui_2.ToggleGroup, { type: "single", defaultValue: "a", variant: variant, size: size, children: [(0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "b", children: "B" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "c", disabled: true, children: "C" })] }, `${variant}-${size}`)))), (0, jsx_runtime_1.jsxs)(gui_2.ToggleGroup, { type: "multiple", defaultValue: ['a'], children: [(0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "b", children: "B" })] }), (0, jsx_runtime_1.jsxs)(gui_2.ToggleGroup, { type: "single", orientation: "vertical", defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "b", children: "B" })] })] }), (0, jsx_runtime_1.jsx)(Section, { name: "accordion", children: (0, jsx_runtime_1.jsxs)(gui_2.Accordion, { type: "single", collapsible: true, defaultValue: "one", children: [(0, jsx_runtime_1.jsxs)(gui_2.AccordionItem, { value: "one", children: [(0, jsx_runtime_1.jsx)(gui_2.AccordionTrigger, { children: "Accordion trigger" }), (0, jsx_runtime_1.jsx)(gui_2.AccordionContent, { children: "Accordion content" })] }), (0, jsx_runtime_1.jsxs)(gui_2.AccordionItem, { value: "two", children: [(0, jsx_runtime_1.jsx)(gui_2.AccordionTrigger, { children: "Second trigger" }), (0, jsx_runtime_1.jsx)(gui_2.AccordionContent, { children: "Second content" })] })] }) }), (0, jsx_runtime_1.jsx)(Section, { name: "tabs", children: (0, jsx_runtime_1.jsxs)(gui_2.Tabs, { defaultValue: "one", children: [(0, jsx_runtime_1.jsxs)(gui_2.TabsList, { children: [(0, jsx_runtime_1.jsx)(gui_2.TabsTrigger, { value: "one", children: "One" }), (0, jsx_runtime_1.jsx)(gui_2.TabsTrigger, { value: "two", children: "Two" })] }), (0, jsx_runtime_1.jsx)(gui_2.TabsContent, { value: "one", children: "Panel one" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "surface", children: [(0, jsx_runtime_1.jsx)(gui_2.Separator, {}), (0, jsx_runtime_1.jsx)(gui_2.AspectRatio, { ratio: 16 / 9 }), (0, jsx_runtime_1.jsx)(gui_2.Avatar, { children: (0, jsx_runtime_1.jsx)(gui_2.AvatarFallback, { children: "HZ" }) }), (0, jsx_runtime_1.jsx)(gui_2.ScrollArea, { height: 80, children: "Scroll area" }), (0, jsx_runtime_1.jsxs)(gui_2.ResizablePanelGroup, { direction: "horizontal", children: [(0, jsx_runtime_1.jsx)(gui_2.ResizablePanel, {}), (0, jsx_runtime_1.jsx)(gui_2.ResizableHandle, {}), (0, jsx_runtime_1.jsx)(gui_2.ResizablePanel, {})] })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "connection-badge", children: [(0, jsx_runtime_1.jsx)(ConnectionBadge_1.ConnectionBadge, { method: "OAuth", extra: "acme/site", onDisconnect: () => { } }), (0, jsx_runtime_1.jsx)(ConnectionBadge_1.ConnectionBadge, { method: "API key", onDisconnect: () => { }, disconnecting: true })] }), (0, jsx_runtime_1.jsx)(Section, { name: "project-thumb", children: (0, jsx_runtime_1.jsx)("div", { style: { width: 240 }, children: (0, jsx_runtime_1.jsx)(ProjectThumb_1.ProjectThumb, { name: "Acme" }) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "split", children: (0, jsx_runtime_1.jsx)("div", { style: { width: 360, height: 120 }, children: (0, jsx_runtime_1.jsx)(Split_1.Split, { left: (0, jsx_runtime_1.jsx)(box_1.Box, { children: "left" }), right: (0, jsx_runtime_1.jsx)(box_1.Box, { children: "right" }) }) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "spinner", children: [12, 16, 20, 32].map((size) => ((0, jsx_runtime_1.jsx)(gui_2.Spinner, { size: size }, size))) }), (0, jsx_runtime_1.jsx)(Section, { name: "collapsible", children: (0, jsx_runtime_1.jsxs)(gui_2.Collapsible, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.CollapsibleTrigger, { children: "Collapsible trigger" }), (0, jsx_runtime_1.jsx)(gui_2.CollapsibleContent, { children: "Collapsible content" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "command", children: [(0, jsx_runtime_1.jsxs)(gui_2.Command, { children: [(0, jsx_runtime_1.jsx)(gui_2.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_2.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_2.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsx)(gui_2.CommandGroup, { heading: "Group", children: (0, jsx_runtime_1.jsxs)(gui_2.CommandItem, { value: "a", children: ["Item", (0, jsx_runtime_1.jsx)(gui_2.CommandShortcut, { children: "\u2318A" })] }) }), (0, jsx_runtime_1.jsx)(gui_2.CommandSeparator, {})] })] }), (0, jsx_runtime_1.jsxs)(gui_2.CommandDialog, { open: true, defaultValue: "alpha", onValueChange: (v) => {
+const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, padding: 24, maxWidth: 928 }, children: [(0, jsx_runtime_1.jsx)(section_1.Section, { name: "type", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }, children: [11, 10, 9, 7, 6, 4, 3, 2, 1].map((rung) => ((0, jsx_runtime_1.jsx)(gui_2.Text, { fontSize: `$${rung}`, lineHeight: `$${rung}`, letterSpacing: `$${rung}`, children: "Hanzo \u2014 the Open AI Cloud" }, rung))) }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "button", children: [BUTTON_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_2.Button, { variant: variant, children: variant }, variant))), BUTTON_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(gui_2.Button, { size: size, children: size }, size))), (0, jsx_runtime_1.jsx)(gui_2.Button, { disabled: true, children: "disabled" }), (0, jsx_runtime_1.jsx)(gui_2.Button, { isLoading: true, children: "loading" })] }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "badge", children: BADGE_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_2.Badge, { variant: variant, children: variant }, variant))) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "card", children: (0, jsx_runtime_1.jsxs)(gui_2.Card, { children: [(0, jsx_runtime_1.jsxs)(gui_2.CardHeader, { children: [(0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Card title" }), (0, jsx_runtime_1.jsx)(gui_2.CardDescription, { children: "Card description" }), (0, jsx_runtime_1.jsx)(gui_2.CardAction, { children: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", variant: "ghost", children: "action" }) })] }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "Card content" }), (0, jsx_runtime_1.jsx)(gui_2.CardFooter, { children: "Card footer" })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "form", children: [(0, jsx_runtime_1.jsx)(gui_2.Label, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "Input" }), (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "Password", type: "password" }), (0, jsx_runtime_1.jsx)(gui_2.Textarea, { placeholder: "Textarea" }), (0, jsx_runtime_1.jsx)(gui_2.Checkbox, {}), (0, jsx_runtime_1.jsx)(gui_2.Checkbox, { checked: true }), (0, jsx_runtime_1.jsx)(gui_2.Switch, {}), (0, jsx_runtime_1.jsx)(gui_2.Switch, { checked: true }), (0, jsx_runtime_1.jsx)(gui_2.Slider, { defaultValue: [40] }), (0, jsx_runtime_1.jsx)(gui_2.Progress, { value: 40 }), (0, jsx_runtime_1.jsxs)(gui_2.RadioGroup, { defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "a" }), (0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "b" }), (0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "c", disabled: true })] }), (0, jsx_runtime_1.jsxs)(gui_2.RadioGroup, { orientation: "horizontal", defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "a" }), (0, jsx_runtime_1.jsx)(gui_2.RadioGroupItem, { value: "b" })] })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "toggle-group", children: [['default', 'outline'].map((variant) => ['default', 'sm', 'lg'].map((size) => ((0, jsx_runtime_1.jsxs)(gui_2.ToggleGroup, { type: "single", defaultValue: "a", variant: variant, size: size, children: [(0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "b", children: "B" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "c", disabled: true, children: "C" })] }, `${variant}-${size}`)))), (0, jsx_runtime_1.jsxs)(gui_2.ToggleGroup, { type: "multiple", defaultValue: ['a'], children: [(0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "b", children: "B" })] }), (0, jsx_runtime_1.jsxs)(gui_2.ToggleGroup, { type: "single", orientation: "vertical", defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_2.ToggleGroupItem, { value: "b", children: "B" })] })] }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "accordion", children: (0, jsx_runtime_1.jsxs)(gui_2.Accordion, { type: "single", collapsible: true, defaultValue: "one", children: [(0, jsx_runtime_1.jsxs)(gui_2.AccordionItem, { value: "one", children: [(0, jsx_runtime_1.jsx)(gui_2.AccordionTrigger, { children: "Accordion trigger" }), (0, jsx_runtime_1.jsx)(gui_2.AccordionContent, { children: "Accordion content" })] }), (0, jsx_runtime_1.jsxs)(gui_2.AccordionItem, { value: "two", children: [(0, jsx_runtime_1.jsx)(gui_2.AccordionTrigger, { children: "Second trigger" }), (0, jsx_runtime_1.jsx)(gui_2.AccordionContent, { children: "Second content" })] })] }) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "tabs", children: (0, jsx_runtime_1.jsxs)(gui_2.Tabs, { defaultValue: "one", children: [(0, jsx_runtime_1.jsxs)(gui_2.TabsList, { children: [(0, jsx_runtime_1.jsx)(gui_2.TabsTrigger, { value: "one", children: "One" }), (0, jsx_runtime_1.jsx)(gui_2.TabsTrigger, { value: "two", children: "Two" })] }), (0, jsx_runtime_1.jsx)(gui_2.TabsContent, { value: "one", children: "Panel one" })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "surface", children: [(0, jsx_runtime_1.jsx)(gui_2.Separator, {}), (0, jsx_runtime_1.jsx)(gui_2.AspectRatio, { ratio: 16 / 9 }), (0, jsx_runtime_1.jsx)(gui_2.Avatar, { children: (0, jsx_runtime_1.jsx)(gui_2.AvatarFallback, { children: "HZ" }) }), (0, jsx_runtime_1.jsx)(gui_2.ScrollArea, { height: 80, children: "Scroll area" }), (0, jsx_runtime_1.jsxs)(gui_2.ResizablePanelGroup, { direction: "horizontal", children: [(0, jsx_runtime_1.jsx)(gui_2.ResizablePanel, {}), (0, jsx_runtime_1.jsx)(gui_2.ResizableHandle, {}), (0, jsx_runtime_1.jsx)(gui_2.ResizablePanel, {})] })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "connection-badge", children: [(0, jsx_runtime_1.jsx)(ConnectionBadge_1.ConnectionBadge, { method: "OAuth", extra: "acme/site", onDisconnect: () => { } }), (0, jsx_runtime_1.jsx)(ConnectionBadge_1.ConnectionBadge, { method: "API key", onDisconnect: () => { }, disconnecting: true })] }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "project-thumb", children: (0, jsx_runtime_1.jsx)("div", { style: { width: 240 }, children: (0, jsx_runtime_1.jsx)(ProjectThumb_1.ProjectThumb, { name: "Acme" }) }) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "split", children: (0, jsx_runtime_1.jsx)("div", { style: { width: 360, height: 120 }, children: (0, jsx_runtime_1.jsx)(Split_1.Split, { left: (0, jsx_runtime_1.jsx)(box_1.Box, { children: "left" }), right: (0, jsx_runtime_1.jsx)(box_1.Box, { children: "right" }) }) }) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "spinner", children: [12, 16, 20, 32].map((size) => ((0, jsx_runtime_1.jsx)(gui_2.Spinner, { size: size }, size))) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "collapsible", children: (0, jsx_runtime_1.jsxs)(gui_2.Collapsible, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.CollapsibleTrigger, { children: "Collapsible trigger" }), (0, jsx_runtime_1.jsx)(gui_2.CollapsibleContent, { children: "Collapsible content" })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "command", children: [(0, jsx_runtime_1.jsxs)(gui_2.Command, { children: [(0, jsx_runtime_1.jsx)(gui_2.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_2.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_2.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsx)(gui_2.CommandGroup, { heading: "Group", children: (0, jsx_runtime_1.jsxs)(gui_2.CommandItem, { value: "a", children: ["Item", (0, jsx_runtime_1.jsx)(gui_2.CommandShortcut, { children: "\u2318A" })] }) }), (0, jsx_runtime_1.jsx)(gui_2.CommandSeparator, {})] })] }), (0, jsx_runtime_1.jsxs)(gui_2.CommandDialog, { open: true, defaultValue: "alpha", onValueChange: (v) => {
                         const el = document.querySelector('[data-palette-selected]');
                         if (el)
                             el.setAttribute('data-palette-selected', v);
-                    }, children: [(0, jsx_runtime_1.jsx)(gui_2.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_2.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_2.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsxs)(gui_2.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_2.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_2.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_2.CommandItem, { value: "gamma", children: "gamma" })] })] })] }), (0, jsx_runtime_1.jsx)("span", { "data-palette-selected": "" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "models", children: (0, jsx_runtime_1.jsx)(models_1.ModelPicker, { open: true, value: "zen6", onChange: NOOP, limits: { classes: { premium: { state: 'limited' } } }, models: [
+                    }, children: [(0, jsx_runtime_1.jsx)(gui_2.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_2.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_2.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsxs)(gui_2.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_2.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_2.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_2.CommandItem, { value: "gamma", children: "gamma" })] })] })] }), (0, jsx_runtime_1.jsx)("span", { "data-palette-selected": "" })] }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "models", children: (0, jsx_runtime_1.jsx)(models_1.ModelPicker, { open: true, value: "zen6", onChange: NOOP, limits: { classes: { premium: { state: 'limited' } } }, models: [
                     { id: 'enso-auto', owned_by: 'hanzo', family: 'enso', class: 'ours', name: 'Enso' },
                     { id: 'zen6', owned_by: 'zenlm', family: 'zen', class: 'ours', name: 'Zen 6', context_window: 1_000_000 },
                     { id: 'anthropic/claude-sonnet-4.5', owned_by: 'anthropic', class: 'premium', name: 'Claude Sonnet 4.5', context_window: 1_000_000 },
-                ] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_2.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_2.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_2.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_2.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_2.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_2.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_2.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_2.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_2.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_2.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_2.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_2.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_2.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_2.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_2.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_2.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_2.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_2.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_2.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_2.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_2.AlertDialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_2.AlertDialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_2.AlertDialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_2.AlertDialogTitle, { children: "Alert title" }), (0, jsx_runtime_1.jsx)(gui_2.AlertDialogDescription, { children: "Alert description" })] }), (0, jsx_runtime_1.jsxs)(gui_2.AlertDialogFooter, { children: [(0, jsx_runtime_1.jsx)(gui_2.AlertDialogCancel, { children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_2.AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), (0, jsx_runtime_1.jsxs)(gui_2.HoverCard, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.HoverCardTrigger, { children: "Hover card" }), (0, jsx_runtime_1.jsx)(gui_2.HoverCardContent, { children: "Hover card content" })] }), (0, jsx_runtime_1.jsxs)(gui_2.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(gui_2.ContextMenuTrigger, { children: "Context menu" }), (0, jsx_runtime_1.jsxs)(gui_2.ContextMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_2.ContextMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_2.ContextMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_2.ContextMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsx)(gui_2.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 240 }, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => ((0, jsx_runtime_1.jsxs)(gui_2.Card, { children: [(0, jsx_runtime_1.jsx)(gui_2.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_2.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_2.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_2.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 160, max: 4 }, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => ((0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsxs)(gui_2.CardContent, { children: ["cap ", i] }) }, i))) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: { min: 900 }, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: ['2fr', '1fr'], gap: "$3", style: { width: '100%' }, "data-grid": "list", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "2fr" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "1fr" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: "repeat(3, 1fr)", gap: "$3", style: { width: '100%' }, "data-grid": "written", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "a" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "b" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "c" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "short" }) })] }) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, rows: 2, gap: "$3", style: { width: '100%' }, "data-grid": "cells", children: [(0, jsx_runtime_1.jsx)(grid_1.Cell, { col: 2, "data-cell": "span2", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "spans two" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: 2, "data-cell": "rows2", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "spans two rows" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { "data-cell": "plain", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "one" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: "2 / 4", "data-cell": "rowplaced", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "placed down" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { col: "1 / -1", "data-cell": "full", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "the whole row" }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_2.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_2.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_2.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_2.Band, { measure: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_2.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "workbench", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', height: 220, width: '100%', maxWidth: 880, overflowX: 'auto' }, children: (0, jsx_runtime_1.jsx)(Workbench_1.Workbench, { left: { tabs: [{ id: 'files', title: 'Files', content: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "left" }) }] }, right: {
+                ] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_2.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_2.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_2.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_2.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_2.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_2.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_2.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_2.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_2.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_2.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_2.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_2.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_2.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_2.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_2.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_2.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_2.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_2.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_2.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_2.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_2.AlertDialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_2.AlertDialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_2.AlertDialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_2.AlertDialogTitle, { children: "Alert title" }), (0, jsx_runtime_1.jsx)(gui_2.AlertDialogDescription, { children: "Alert description" })] }), (0, jsx_runtime_1.jsxs)(gui_2.AlertDialogFooter, { children: [(0, jsx_runtime_1.jsx)(gui_2.AlertDialogCancel, { children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_2.AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), (0, jsx_runtime_1.jsxs)(gui_2.HoverCard, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_2.HoverCardTrigger, { children: "Hover card" }), (0, jsx_runtime_1.jsx)(gui_2.HoverCardContent, { children: "Hover card content" })] }), (0, jsx_runtime_1.jsxs)(gui_2.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(gui_2.ContextMenuTrigger, { children: "Context menu" }), (0, jsx_runtime_1.jsxs)(gui_2.ContextMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_2.ContextMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_2.ContextMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_2.ContextMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsx)(gui_2.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 240 }, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => ((0, jsx_runtime_1.jsxs)(gui_2.Card, { children: [(0, jsx_runtime_1.jsx)(gui_2.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_2.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_2.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_2.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 160, max: 4 }, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => ((0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsxs)(gui_2.CardContent, { children: ["cap ", i] }) }, i))) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: { min: 900 }, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: ['2fr', '1fr'], gap: "$3", style: { width: '100%' }, "data-grid": "list", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "2fr" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "1fr" }) })] }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: "repeat(3, 1fr)", gap: "$3", style: { width: '100%' }, "data-grid": "written", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "a" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "b" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "c" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "short" }) })] }) }), (0, jsx_runtime_1.jsxs)(grid_1.Grid, { columns: 3, rows: 2, gap: "$3", style: { width: '100%' }, "data-grid": "cells", children: [(0, jsx_runtime_1.jsx)(grid_1.Cell, { col: 2, "data-cell": "span2", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "spans two" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: 2, "data-cell": "rows2", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "spans two rows" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { "data-cell": "plain", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "one" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { row: "2 / 4", "data-cell": "rowplaced", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "placed down" }) }) }), (0, jsx_runtime_1.jsx)(grid_1.Cell, { col: "1 / -1", "data-cell": "full", children: (0, jsx_runtime_1.jsx)(gui_2.Card, { children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "the whole row" }) }) })] }), (0, jsx_runtime_1.jsxs)("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [(0, jsx_runtime_1.jsx)(gui_2.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_2.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_2.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_2.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_2.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_2.Band, { measure: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_2.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "workbench", children: (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', height: 220, width: '100%', maxWidth: 880, overflowX: 'auto' }, children: (0, jsx_runtime_1.jsx)(Workbench_1.Workbench, { left: { tabs: [{ id: 'files', title: 'Files', content: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "left" }) }] }, right: {
                         tabs: [
                             { id: 'chat', title: 'Side chat', content: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "chat" }) },
                             { id: 'browser', title: 'Browser', content: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "browser" }) },
@@ -182,7 +176,7 @@ 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.jsx)(Section, { name: "usage-limits", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 16, width: '100%', maxWidth: 480 }, children: [['md', 'sm'].map((size) => ((0, jsx_runtime_1.jsx)(UsageMeter_1.UsageMeter, { size: size, limits: USAGE }, size))), (0, jsx_runtime_1.jsx)(LimitedBanner_1.LimitedBanner, { message: "Premium models are paused until Oct 31. You're chatting on Zen Free.", actions: USAGE.actions, onAction: () => { }, onUsage: () => { }, onClose: () => { } }), (0, jsx_runtime_1.jsx)(PlanUsage_1.PlanUsage, { limits: { ...USAGE, state: 'ok', period_start: '2026-10-01T00:00:00Z', period_end: '2026-10-31T00:00:00Z', creditsAfterAllowance: true }, onAction: () => { }, onCredits: async () => { }, creditsHref: "https://hanzo.ai/billing", addCreditsHref: "https://hanzo.ai/billing" }), (0, jsx_runtime_1.jsx)(PlanUsage_1.PlanUsage, { limits: { ...USAGE, plan: '' }, onAction: () => { } })] }) }), (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: "workspace", children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: '100%', height: 420 }, children: (0, jsx_runtime_1.jsx)(agents_1.Workspace, { start: (0, jsx_runtime_1.jsx)(agents_1.ProjectChip, { name: "MEGA Shop", onPress: NOOP }), middle: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(agents_1.Views, { views: [...agents_1.VIEWS, agents_1.CHAT], value: "preview", onChange: NOOP, label: "Editor view" }), (0, jsx_runtime_1.jsx)(agents_1.Views, { views: agents_1.DEVICES, value: "desktop", onChange: NOOP, label: "Device", labels: "none" }), (0, jsx_runtime_1.jsx)(agents_1.PageSelect, { pages: [{ id: '/', label: 'Homepage' }], value: "/", onChange: NOOP })] }), end: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "Publish" }), chat: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(agents_1.Suggestions, { items: agents_1.SUGGESTIONS, onPick: NOOP, onDismiss: NOOP }), (0, jsx_runtime_1.jsx)(agents_1.Attachments, { items: [
+                    }, children: (0, jsx_runtime_1.jsx)(gui_2.CardTitle, { children: "center" }) }) }) }), (0, jsx_runtime_1.jsxs)(section_1.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.jsx)(section_1.Section, { name: "usage-limits", children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 16, width: '100%', maxWidth: 480 }, children: [['md', 'sm'].map((size) => ((0, jsx_runtime_1.jsx)(UsageMeter_1.UsageMeter, { size: size, limits: USAGE }, size))), (0, jsx_runtime_1.jsx)(LimitedBanner_1.LimitedBanner, { message: "Premium models are paused until Oct 31. You're chatting on Zen Free.", actions: USAGE.actions, onAction: () => { }, onUsage: () => { }, onClose: () => { } }), (0, jsx_runtime_1.jsx)(PlanUsage_1.PlanUsage, { limits: { ...USAGE, state: 'ok', period_start: '2026-10-01T00:00:00Z', period_end: '2026-10-31T00:00:00Z', creditsAfterAllowance: true }, onAction: () => { }, onCredits: async () => { }, creditsHref: "https://hanzo.ai/billing", addCreditsHref: "https://hanzo.ai/billing" }), (0, jsx_runtime_1.jsx)(PlanUsage_1.PlanUsage, { limits: { ...USAGE, plan: '' }, onAction: () => { } })] }) }), (0, jsx_runtime_1.jsxs)(section_1.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_1.Section, { name: "workspace", children: [(0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: '100%', height: 420 }, children: (0, jsx_runtime_1.jsx)(agents_1.Workspace, { start: (0, jsx_runtime_1.jsx)(agents_1.ProjectChip, { name: "MEGA Shop", onPress: NOOP }), middle: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(agents_1.Views, { views: [...agents_1.VIEWS, agents_1.CHAT], value: "preview", onChange: NOOP, label: "Editor view" }), (0, jsx_runtime_1.jsx)(agents_1.Views, { views: agents_1.DEVICES, value: "desktop", onChange: NOOP, label: "Device", labels: "none" }), (0, jsx_runtime_1.jsx)(agents_1.PageSelect, { pages: [{ id: '/', label: 'Homepage' }], value: "/", onChange: NOOP })] }), end: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "Publish" }), chat: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(agents_1.Suggestions, { items: agents_1.SUGGESTIONS, onPick: NOOP, onDismiss: NOOP }), (0, jsx_runtime_1.jsx)(agents_1.Attachments, { items: [
                                         { id: 'a', kind: 'file', label: 'src/app.tsx' },
                                         { id: 'b', kind: 'element', label: '<button> .cta' },
                                         { id: 'c', kind: 'upload', label: 'shot.png' },
@@ -195,13 +189,13 @@ const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex'
                             ], height: 200, onHeight: NOOP, onClear: NOOP, onRun: NOOP }), children: (0, jsx_runtime_1.jsx)(agents_1.PreviewFrame, { src: "https://hanzo.ai/", toolbar: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "icon-sm", variant: "ghost", children: "+" }) }) }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: 280, height: 240 }, children: (0, jsx_runtime_1.jsx)(agents_1.FileTree, { files: ['src/app.tsx', 'src/lib/a.ts', 'README.md'], value: "src/lib/a.ts", onSelect: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: 360, height: 240 }, children: (0, jsx_runtime_1.jsx)(agents_1.FileTabs, { files: [
                             { path: 'src/app.tsx', content: 'export {}', dirty: true },
                             { path: 'big.bin', error: 'Too large to show here.' },
-                        ], value: "src/app.tsx", onSelect: NOOP, onClose: NOOP, onChange: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: 280, height: 160 }, children: (0, jsx_runtime_1.jsx)(agents_1.PreviewFrame, { src: null }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: 360 }, children: (0, jsx_runtime_1.jsx)(agents_1.Console, { lines: [], height: 36, onHeight: NOOP }) })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "sessions", children: [(0, jsx_runtime_1.jsxs)("div", { "data-rail": "shell", style: { display: 'flex', width: '100%', maxWidth: 560, height: 520, gap: 12 }, children: [(0, jsx_runtime_1.jsx)(chat_1.SessionRail, { brand: "Hanzo Build", onSearch: NOOP, searchLabel: "Search runs", onNew: NOOP, fresh: true, links: [{ id: 'a', label: 'Artifacts', icon: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "a" }) }], more: [{ id: 'p', label: 'Projects', icon: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "p" }) }], recents: SESSIONS, active: "s2", onOpen: NOOP, onSort: NOOP, notice: (0, jsx_runtime_1.jsx)(chat_1.RailNotice, { icon: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "s" }), title: "Try Hanzo in Slack", action: "Set up", onAction: NOOP, onDismiss: NOOP }), account: {
+                        ], value: "src/app.tsx", onSelect: NOOP, onClose: NOOP, onChange: NOOP }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: 280, height: 160 }, children: (0, jsx_runtime_1.jsx)(agents_1.PreviewFrame, { src: null }) }), (0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', width: 360 }, children: (0, jsx_runtime_1.jsx)(agents_1.Console, { lines: [], height: 36, onHeight: NOOP }) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "sessions", children: [(0, jsx_runtime_1.jsxs)("div", { "data-rail": "shell", style: { display: 'flex', width: '100%', maxWidth: 560, height: 520, gap: 12 }, children: [(0, jsx_runtime_1.jsx)(chat_1.SessionRail, { brand: "Hanzo Build", onSearch: NOOP, searchLabel: "Search runs", onNew: NOOP, fresh: true, links: [{ id: 'a', label: 'Artifacts', icon: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "a" }) }], more: [{ id: 'p', label: 'Projects', icon: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "p" }) }], recents: SESSIONS, active: "s2", onOpen: NOOP, onSort: NOOP, notice: (0, jsx_runtime_1.jsx)(chat_1.RailNotice, { icon: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "s" }), title: "Try Hanzo in Slack", action: "Set up", onAction: NOOP, onDismiss: NOOP }), account: {
                                 name: 'Dave',
                                 sub: 'acme',
                                 email: 'dave@acme.test',
                                 groups: [{ label: 'Organization', items: [{ id: 'acme', label: 'acme', active: true, onPress: NOOP }] }],
                                 onSignOut: NOOP,
-                            }, onCollapse: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.SessionRail, { onNew: NOOP, onSearch: NOOP, recents: SESSIONS, onOpen: NOOP, collapsed: true, onCollapse: NOOP, account: { name: 'Sign in', onPress: NOOP } })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 560 }, children: (0, jsx_runtime_1.jsx)(chat_1.RailBar, { onMenu: NOOP, menuLabel: "Open runs", brand: "Hanzo Build", onBrand: NOOP, onSearch: NOOP, searchLabel: "Search runs" }) }), (0, jsx_runtime_1.jsx)(chat_1.EmptyPrompt, { mark: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "h" }) }), (0, jsx_runtime_1.jsx)("div", { "data-home": "demo", style: { display: 'flex', width: '100%', height: 320 }, children: (0, jsx_runtime_1.jsx)(chat_1.Home, { mark: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "h" }), children: (0, jsx_runtime_1.jsx)(chat_1.Composer, { inline: true, value: "", onChange: NOOP, onSend: NOOP, placeholder: "Describe a task or ask a question" }) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 768 }, children: (0, jsx_runtime_1.jsx)(chat_1.Composer, { inline: true, value: "", onChange: NOOP, onSend: NOOP, placeholder: "Describe a task or ask a question", head: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChipSelect_1.ChipSelect, { name: "Environment", label: "Default", onChange: NOOP, items: [] }), (0, jsx_runtime_1.jsx)(RepoSelect_1.RepoSelect, { value: { owner: 'hanzo-inc', name: 'cloud' }, onChange: NOOP, load: NONE }), (0, jsx_runtime_1.jsx)(BranchSelect_1.BranchSelect, { value: "main", onChange: NOOP, load: NONE }), (0, jsx_runtime_1.jsx)(ChipSelect_1.ChipSelect, { name: "Disabled", label: "off", onChange: NOOP, items: [], disabled: true })] }), foot: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(chat_1.ComposerTool, { label: "Attach", icon: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "+" }), onPress: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.ComposerTool, { label: "Mode", text: "Auto", caret: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.ComposerTool, { label: "Disabled", text: "off", disabled: true }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), (0, jsx_runtime_1.jsx)(ChipSelect_1.ChipSelect, { name: "Model", label: "Zen 5", onChange: NOOP, items: [], quiet: true })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 768 }, children: (0, jsx_runtime_1.jsx)(chat_1.Composer, { inline: true, value: "a draft", onChange: NOOP, onSend: NOOP, onStop: NOOP, busy: true }) })] }), (0, jsx_runtime_1.jsx)(Section, { name: "settings", children: (0, jsx_runtime_1.jsx)("div", { "data-settings": "demo", style: { display: 'flex', width: '100%', height: 560 }, children: (0, jsx_runtime_1.jsx)(settings_1.Settings, { entries: ENTRIES, active: "general", onPick: NOOP, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$6", children: [(0, jsx_runtime_1.jsx)(settings_1.Heading, { title: "General", detail: "How this surface looks and listens.", action: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "Save" }) }), (0, jsx_runtime_1.jsx)(settings_1.Group, { title: "Appearance", detail: "Per browser.", children: (0, jsx_runtime_1.jsxs)(settings_1.Card, { children: [(0, jsx_runtime_1.jsx)(settings_1.Row, { first: true, title: "Theme", detail: "Follows the system.", trailing: (0, jsx_runtime_1.jsx)(gui_2.Switch, {}) }), (0, jsx_runtime_1.jsx)(settings_1.Row, { mono: true, title: "hk-live-3f9a", leading: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "k" }) })] }) }), (0, jsx_runtime_1.jsx)(settings_1.Field, { label: "Call me", hint: "What the home page greets you by.", children: (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "Name", "aria-label": "Call me" }) }), (0, jsx_runtime_1.jsx)(settings_1.Card, { children: (0, jsx_runtime_1.jsx)(settings_1.Soft, { children: "No keys yet." }) }), (0, jsx_runtime_1.jsx)(settings_1.Soft, { action: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "Sign in" }), children: "Sign in to see your settings." }), (0, jsx_runtime_1.jsx)(settings_1.Note, { children: "Saved." }), (0, jsx_runtime_1.jsx)(settings_1.Once, { value: "hk-live-3f9a0c", label: "API key" })] }) }) }) }), (0, jsx_runtime_1.jsx)(Section, { name: "catalog", children: (0, jsx_runtime_1.jsx)("div", { "data-shelf": "demo", style: { display: 'flex', width: '100%', height: 720 }, children: (0, jsx_runtime_1.jsxs)(catalog_1.Shelf, { title: "Customize", detail: "What the agent brings to a run.", tabs: KINDS, tab: "skills", onTab: NOOP, view: "discover", onView: NOOP, search: "Search skills", query: "", onQuery: NOOP, add: "New skill", onAdd: NOOP, children: [(0, jsx_runtime_1.jsx)(catalog_1.Featured, { title: "Triage", detail: "How we triage an issue.", meta: "Saved Sep 21", mark: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "t" }), onOpen: NOOP, action: (0, jsx_runtime_1.jsx)(catalog_1.Add, { name: "Triage", added: false, onPress: NOOP }) }), (0, jsx_runtime_1.jsxs)(catalog_1.Tiles, { label: "Skills to add", children: [(0, jsx_runtime_1.jsx)(catalog_1.Tile, { title: "git_repos", detail: "List the forge's repositories.", meta: "git", mark: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "g" }), onOpen: NOOP, action: (0, jsx_runtime_1.jsx)(catalog_1.Add, { name: "git_repos", added: false, onPress: NOOP }) }), (0, jsx_runtime_1.jsx)(catalog_1.Tile, { title: "git_branches", detail: "List a repository's branches.", meta: "git", onOpen: NOOP, action: (0, jsx_runtime_1.jsx)(catalog_1.Add, { name: "git_branches", added: true, onPress: NOOP }) }), (0, jsx_runtime_1.jsx)(catalog_1.Tile, { title: "kms_secrets", detail: "Read the names of an org's secrets.", action: (0, jsx_runtime_1.jsx)(catalog_1.Add, { name: "kms_secrets", added: false, busy: true, onPress: 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.jsxs)(Section, { name: "onboarding", children: [(0, jsx_runtime_1.jsxs)(react_2.IamProvider, { config: { serverUrl: 'https://hanzo.id', clientId: 'hanzo-gallery', redirectUri: 'https://hanzo.ai/auth/callback' }, autoInit: false, children: [(0, jsx_runtime_1.jsx)(auth_1.SignIn, {}), (0, jsx_runtime_1.jsx)(auth_1.SignIn, { mode: "signup" }), (0, jsx_runtime_1.jsx)(auth_1.SignIn, { frame: false })] }), (0, jsx_runtime_1.jsx)(account_1.CreateAccount, { email: "you@example.com", onCreate: NOOP, onOther: NOOP }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Do more with Hanzo Pro", width: 340, children: (0, jsx_runtime_1.jsx)(screens_1.Pro, { interval: "annual", setInterval: NOOP, onPro: NOOP, onFree: NOOP, onAll: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "How are you planning to use Hanzo?", back: NOOP, children: (0, jsx_runtime_1.jsx)(screens_1.UseCards, { onPick: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Plans that grow with you", busy: true, width: 1140, children: (0, jsx_runtime_1.jsx)(screens_1.Plans, { interval: "annual", setInterval: NOOP, onFree: NOOP, onPick: NOOP, onTeam: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Let\u2019s create your team", center: true, children: (0, jsx_runtime_1.jsx)(screens_1.TeamName, { api: "", onCreated: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Choose your seats and plan", children: (0, jsx_runtime_1.jsx)(screens_1.Seats, { interval: "monthly", setInterval: NOOP, value: { plan: 'team_premium', seats: 20 }, setValue: NOOP, onContinue: NOOP, onEnterprise: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Talk to our sales team", children: (0, jsx_runtime_1.jsx)(screens_1.Enterprise, { api: "", onSent: NOOP }) }), (0, jsx_runtime_1.jsxs)(gui_3.ChoiceGroup, { label: "Billing interval", children: [(0, jsx_runtime_1.jsx)(gui_3.ChoiceCard, { selected: true, onSelect: NOOP, children: "Monthly" }), (0, jsx_runtime_1.jsx)(gui_3.ChoiceCard, { selected: false, onSelect: NOOP, children: "Annually" })] }), (0, jsx_runtime_1.jsx)(gui_3.Stepper, { label: "Seats", value: 2, min: 2, max: 150, onChange: NOOP })] })] }));
+                            }, onCollapse: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.SessionRail, { onNew: NOOP, onSearch: NOOP, recents: SESSIONS, onOpen: NOOP, collapsed: true, onCollapse: NOOP, account: { name: 'Sign in', onPress: NOOP } })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 560 }, children: (0, jsx_runtime_1.jsx)(chat_1.RailBar, { onMenu: NOOP, menuLabel: "Open runs", brand: "Hanzo Build", onBrand: NOOP, onSearch: NOOP, searchLabel: "Search runs" }) }), (0, jsx_runtime_1.jsx)(chat_1.EmptyPrompt, { mark: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "h" }) }), (0, jsx_runtime_1.jsx)("div", { "data-home": "demo", style: { display: 'flex', width: '100%', height: 320 }, children: (0, jsx_runtime_1.jsx)(chat_1.Home, { mark: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "h" }), children: (0, jsx_runtime_1.jsx)(chat_1.Composer, { inline: true, value: "", onChange: NOOP, onSend: NOOP, placeholder: "Describe a task or ask a question" }) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 768 }, children: (0, jsx_runtime_1.jsx)(chat_1.Composer, { inline: true, value: "", onChange: NOOP, onSend: NOOP, placeholder: "Describe a task or ask a question", head: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ChipSelect_1.ChipSelect, { name: "Environment", label: "Default", onChange: NOOP, items: [] }), (0, jsx_runtime_1.jsx)(RepoSelect_1.RepoSelect, { value: { owner: 'hanzo-inc', name: 'cloud' }, onChange: NOOP, load: NONE }), (0, jsx_runtime_1.jsx)(BranchSelect_1.BranchSelect, { value: "main", onChange: NOOP, load: NONE }), (0, jsx_runtime_1.jsx)(ChipSelect_1.ChipSelect, { name: "Disabled", label: "off", onChange: NOOP, items: [], disabled: true })] }), foot: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(chat_1.ComposerTool, { label: "Attach", icon: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "+" }), onPress: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.ComposerTool, { label: "Mode", text: "Auto", caret: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.ComposerTool, { label: "Disabled", text: "off", disabled: true }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { flex: 1 }), (0, jsx_runtime_1.jsx)(ChipSelect_1.ChipSelect, { name: "Model", label: "Zen 5", onChange: NOOP, items: [], quiet: true })] }) }) }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', maxWidth: 768 }, children: (0, jsx_runtime_1.jsx)(chat_1.Composer, { inline: true, value: "a draft", onChange: NOOP, onSend: NOOP, onStop: NOOP, busy: true }) })] }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "settings", children: (0, jsx_runtime_1.jsx)("div", { "data-settings": "demo", style: { display: 'flex', width: '100%', height: 560 }, children: (0, jsx_runtime_1.jsx)(settings_1.Settings, { entries: ENTRIES, active: "general", onPick: NOOP, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$6", children: [(0, jsx_runtime_1.jsx)(settings_1.Heading, { title: "General", detail: "How this surface looks and listens.", action: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "Save" }) }), (0, jsx_runtime_1.jsx)(settings_1.Group, { title: "Appearance", detail: "Per browser.", children: (0, jsx_runtime_1.jsxs)(settings_1.Card, { children: [(0, jsx_runtime_1.jsx)(settings_1.Row, { first: true, title: "Theme", detail: "Follows the system.", trailing: (0, jsx_runtime_1.jsx)(gui_2.Switch, {}) }), (0, jsx_runtime_1.jsx)(settings_1.Row, { mono: true, title: "hk-live-3f9a", leading: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "k" }) })] }) }), (0, jsx_runtime_1.jsx)(settings_1.Field, { label: "Call me", hint: "What the home page greets you by.", children: (0, jsx_runtime_1.jsx)(gui_2.Input, { placeholder: "Name", "aria-label": "Call me" }) }), (0, jsx_runtime_1.jsx)(settings_1.Card, { children: (0, jsx_runtime_1.jsx)(settings_1.Soft, { children: "No keys yet." }) }), (0, jsx_runtime_1.jsx)(settings_1.Soft, { action: (0, jsx_runtime_1.jsx)(gui_2.Button, { size: "sm", children: "Sign in" }), children: "Sign in to see your settings." }), (0, jsx_runtime_1.jsx)(settings_1.Note, { children: "Saved." }), (0, jsx_runtime_1.jsx)(settings_1.Once, { value: "hk-live-3f9a0c", label: "API key" })] }) }) }) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "catalog", children: (0, jsx_runtime_1.jsx)("div", { "data-shelf": "demo", style: { display: 'flex', width: '100%', height: 720 }, children: (0, jsx_runtime_1.jsxs)(catalog_1.Shelf, { title: "Customize", detail: "What the agent brings to a run.", tabs: KINDS, tab: "skills", onTab: NOOP, view: "discover", onView: NOOP, search: "Search skills", query: "", onQuery: NOOP, add: "New skill", onAdd: NOOP, children: [(0, jsx_runtime_1.jsx)(catalog_1.Featured, { title: "Triage", detail: "How we triage an issue.", meta: "Saved Sep 21", mark: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "t" }), onOpen: NOOP, action: (0, jsx_runtime_1.jsx)(catalog_1.Add, { name: "Triage", added: false, onPress: NOOP }) }), (0, jsx_runtime_1.jsxs)(catalog_1.Tiles, { label: "Skills to add", children: [(0, jsx_runtime_1.jsx)(catalog_1.Tile, { title: "git_repos", detail: "List the forge's repositories.", meta: "git", mark: (0, jsx_runtime_1.jsx)(gui_2.Badge, { children: "g" }), onOpen: NOOP, action: (0, jsx_runtime_1.jsx)(catalog_1.Add, { name: "git_repos", added: false, onPress: NOOP }) }), (0, jsx_runtime_1.jsx)(catalog_1.Tile, { title: "git_branches", detail: "List a repository's branches.", meta: "git", onOpen: NOOP, action: (0, jsx_runtime_1.jsx)(catalog_1.Add, { name: "git_branches", added: true, onPress: NOOP }) }), (0, jsx_runtime_1.jsx)(catalog_1.Tile, { title: "kms_secrets", detail: "Read the names of an org's secrets.", action: (0, jsx_runtime_1.jsx)(catalog_1.Add, { name: "kms_secrets", added: false, busy: true, onPress: NOOP }) })] })] }) }) }), (0, jsx_runtime_1.jsxs)(section_1.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.jsxs)(section_1.Section, { name: "onboarding", children: [(0, jsx_runtime_1.jsxs)(react_2.IamProvider, { config: { serverUrl: 'https://hanzo.id', clientId: 'hanzo-gallery', redirectUri: 'https://hanzo.ai/auth/callback' }, autoInit: false, children: [(0, jsx_runtime_1.jsx)(auth_1.SignIn, {}), (0, jsx_runtime_1.jsx)(auth_1.SignIn, { mode: "signup" }), (0, jsx_runtime_1.jsx)(auth_1.SignIn, { frame: false })] }), (0, jsx_runtime_1.jsx)(account_1.CreateAccount, { email: "you@example.com", onCreate: NOOP, onOther: NOOP }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Do more with Hanzo Pro", width: 340, children: (0, jsx_runtime_1.jsx)(screens_1.Pro, { interval: "annual", setInterval: NOOP, onPro: NOOP, onFree: NOOP, onAll: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "How are you planning to use Hanzo?", back: NOOP, children: (0, jsx_runtime_1.jsx)(screens_1.UseCards, { onPick: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Plans that grow with you", busy: true, width: 1140, children: (0, jsx_runtime_1.jsx)(screens_1.Plans, { interval: "annual", setInterval: NOOP, onFree: NOOP, onPick: NOOP, onTeam: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Let\u2019s create your team", center: true, children: (0, jsx_runtime_1.jsx)(screens_1.TeamName, { api: "", onCreated: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Choose your seats and plan", children: (0, jsx_runtime_1.jsx)(screens_1.Seats, { interval: "monthly", setInterval: NOOP, value: { plan: 'team_premium', seats: 20 }, setValue: NOOP, onContinue: NOOP, onEnterprise: NOOP }) }), (0, jsx_runtime_1.jsx)(frame_1.Page, { site: "Hanzo", title: "Talk to our sales team", children: (0, jsx_runtime_1.jsx)(screens_1.Enterprise, { api: "", onSent: NOOP }) }), (0, jsx_runtime_1.jsxs)(gui_3.ChoiceGroup, { label: "Billing interval", children: [(0, jsx_runtime_1.jsx)(gui_3.ChoiceCard, { selected: true, onSelect: NOOP, children: "Monthly" }), (0, jsx_runtime_1.jsx)(gui_3.ChoiceCard, { selected: false, onSelect: NOOP, children: "Annually" })] }), (0, jsx_runtime_1.jsx)(gui_3.Stepper, { label: "Seats", value: 2, min: 2, max: 150, onChange: NOOP })] }), (0, jsx_runtime_1.jsx)(records_1.Records, {})] }));
 exports.Gallery = Gallery;
 /**
  * A phone's page, driven: the bar opens the rail's drawer, and the host keeps

package/dist/gallery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAgQA;;;GAGG;AACH,eAAO,MAAM,OAAO,mCAq4BnB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,gCA4BpB;eAEc,OAAO"}
+{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAmPA;;;GAGG;AACH,eAAO,MAAM,OAAO,mCAw4BnB,CAAA;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,gCA4BpB;eAEc,OAAO"}