@hanzo/ui 8.27.11 → 8.27.13

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"}