@hanzo/ui 8.27.19 → 8.27.22

package/dist/gallery.cjs

@@ -2,8 +2,31 @@
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Gallery = void 0;
+exports.Phone = Phone;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const gui_1 = require("@hanzo/gui");
+/**
+ * The gallery — every component @hanzo/ui exports, rendered once, in every
+ * variant that carries its own styling.
+ *
+ * It exists because three different jobs need the same answer to "what does this
+ * package have to style", and three copies of that list would drift:
+ *
+ *   1. `scripts/gen-css.mjs` renders this in Node and harvests the atomic CSS
+ *      that render produces. A component missing here ships with classes and no
+ *      rules — the exact defect this package now guarantees against.
+ *   2. `src/gallery.test.tsx` mounts it, so a component that throws on first
+ *      paint fails the build.
+ *   3. The consumer test installs the tarball and renders this in a browser,
+ *      then asserts computed styles against it.
+ *
+ * So the list is the specification, and the generator, the unit test and the
+ * consumer test all read it. Add a component to the barrel, add it here.
+ *
+ * Variants are enumerated rather than sampled: gui compiles each distinct style
+ * VALUE to its own class, so an unrendered variant is an unwritten rule.
+ */
+const react_1 = require("react");
 const box_1 = require("./box.cjs");
 const Workbench_1 = require("./product/Workbench.cjs");
 const Skeleton_1 = require("./product/Skeleton.cjs");
@@ -15,10 +38,18 @@ const DialogTemplate_1 = require("./product/DialogTemplate.cjs");
 const ChipSelect_1 = require("./product/ChipSelect.cjs");
 const RepoSelect_1 = require("./product/RepoSelect.cjs");
 const BranchSelect_1 = require("./product/BranchSelect.cjs");
+const models_1 = require("./models/index.cjs");
 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");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+// The settings page and its section parts. Aliased where a part shares a word
+// with a primitive above (`Card`, `Field`), exactly as a consumer importing both
+// would have to.
+const settings_1 = require("./settings/index.cjs");
+// A catalogue page — web-only, like the grid its cards lay out on.
+const catalog_1 = require("./catalog/index.cjs");
 const agents_1 = require("./agents/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
@@ -49,6 +80,17 @@ const SESSIONS = [
     { id: 's4', title: 'Enterprise/OSS feature audit', status: 'error' },
     { id: 's5', title: 'Idle one', status: 'idle' },
 ];
+/** A settings page's sections, in two groups, so both group labels render. */
+const ENTRIES = [
+    { id: 'general', label: 'General', group: 'Settings' },
+    { id: 'account', label: 'Account', group: 'Settings' },
+    { id: 'keys', label: 'API keys', group: 'Code' },
+];
+/** A shelf's kinds, one with an icon and one without, so the tab draws both. */
+const KINDS = [
+    { id: 'skills', label: 'Skills', icon: lucide_icons_2_1.BookOpen },
+    { id: 'connectors', label: 'Connectors', icon: lucide_icons_2_1.Plug },
+];
 /** A loader that never needs to answer — the chips render closed. */
 const NONE = async () => ({ repos: [], branches: [], items: [] });
 /** Two: one with a host and one without, so the card's second line and its
@@ -93,7 +135,11 @@ const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex'
                         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.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: {
+                    }, 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.ModelSelector, { open: true, value: "zen6", onChange: NOOP, models: [
+                    { id: 'enso', owned_by: 'hanzo', label: 'Enso', premium: true },
+                    { id: 'zen6', owned_by: 'zenlm', label: 'Zen 6', context_window: 1_000_000 },
+                    ...models_1.RESEARCH,
+                ] }) }), (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: {
                         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" }) },
@@ -115,6 +161,36 @@ 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", { style: { display: 'flex', width: '100%', maxWidth: 560, height: 420, gap: 12 }, children: [(0, jsx_runtime_1.jsx)(chat_1.SessionRail, { 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, account: { name: 'z@hanzo.ai', onPress: NOOP }, onSettings: NOOP, onSearch: NOOP, onCollapse: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.SessionRail, { onNew: NOOP, recents: SESSIONS, onOpen: NOOP, collapsed: true, onCollapse: NOOP, account: { name: 'z' } })] }), (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", { 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.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" }) })] })] }));
+                        ], 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: {
+                                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" }) })] })] }));
 exports.Gallery = Gallery;
+/**
+ * A phone's page, driven: the bar opens the rail's drawer, and the host keeps
+ * it open or shut and counts every close it is told of (`data-closes`).
+ *
+ * Not in the gallery, on purpose. The gallery holds a dozen modal surfaces open
+ * so each is styled, and every one of them takes focus back the moment the
+ * drawer lets go of it — so where focus lands after the drawer closes is a
+ * question only a page with nothing else open can answer. The consumer suite
+ * renders this at `?page=phone`: a real `<dialog>` moves focus on its own, and
+ * jsdom's does not, so this is the only place the drawer's focus return is
+ * measured.
+ */
+function Phone() {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [closes, setCloses] = (0, react_1.useState)(0);
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-phone": "demo", "data-closes": closes, style: { display: 'flex', flexDirection: 'column', height: '100vh' }, children: [(0, jsx_runtime_1.jsx)(chat_1.RailBar, { onMenu: () => {
+                    setCloses(0);
+                    setOpen(true);
+                }, menuLabel: "Open runs", brand: "Hanzo Build", onSearch: NOOP }), (0, jsx_runtime_1.jsx)(chat_1.SessionRail, { onNew: NOOP, recents: SESSIONS, onOpen: NOOP, open: open, onOpenChange: (next) => {
+                    if (!next)
+                        setCloses((n) => n + 1);
+                    setOpen(next);
+                }, account: { name: 'Dave', groups: [[{ id: 'usage', label: 'Usage', onPress: NOOP }]], onSignOut: NOOP }, label: "Runs" })] }));
+}
 exports.default = exports.Gallery;

package/dist/gallery.d.ts

@@ -3,5 +3,18 @@
  * scope its assertions without depending on document order.
  */
 export declare const Gallery: () => import("react").JSX.Element;
+/**
+ * A phone's page, driven: the bar opens the rail's drawer, and the host keeps
+ * it open or shut and counts every close it is told of (`data-closes`).
+ *
+ * Not in the gallery, on purpose. The gallery holds a dozen modal surfaces open
+ * so each is styled, and every one of them takes focus back the moment the
+ * drawer lets go of it — so where focus lands after the drawer closes is a
+ * question only a page with nothing else open can answer. The consumer suite
+ * renders this at `?page=phone`: a real `<dialog>` moves focus on its own, and
+ * jsdom's does not, so this is the only place the drawer's focus return is
+ * measured.
+ */
+export declare function Phone(): import("react").JSX.Element;
 export default Gallery;
 //# sourceMappingURL=gallery.d.ts.map

package/dist/gallery.d.ts.map

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