@hanzo/ui 8.0.44 → 8.0.46

package/dist/backends/gui/index.cjs

@@ -16,8 +16,8 @@
 // one room. Re-run after changing the surface:
 //   node scripts/gen-primitives.mjs
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuShortcut = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuTrigger = exports.DropdownMenu = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = exports.CommandSeparator = exports.CommandShortcut = exports.CommandItem = exports.CommandGroup = exports.CommandEmpty = exports.CommandList = exports.CommandInput = exports.CommandDialog = exports.Command = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.Checkbox = exports.CardContent = exports.CardDescription = exports.CardAction = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.AvatarFallback = exports.AvatarImage = exports.Avatar = exports.AspectRatio = void 0;
-exports.TooltipProvider = exports.TooltipContent = exports.TooltipTrigger = exports.Tooltip = exports.toast = exports.Toaster = exports.Textarea = exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.Tabs = exports.Switch = exports.Slider = exports.Separator = exports.SelectScrollDownButton = exports.SelectScrollUpButton = exports.SelectSeparator = exports.SelectItem = exports.SelectLabel = exports.SelectContent = exports.SelectTrigger = exports.SelectValue = exports.SelectGroup = exports.Select = exports.ScrollBar = exports.ScrollArea = exports.ResizableHandle = exports.ResizablePanel = exports.ResizablePanelGroup = exports.Progress = exports.PopoverClose = exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.Label = exports.Input = exports.Glass = exports.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = void 0;
+exports.DropdownMenuPortal = exports.DropdownMenuGroup = exports.DropdownMenuShortcut = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.DropdownMenuContent = exports.DropdownMenuTrigger = exports.DropdownMenu = exports.DialogTrigger = exports.DialogTitle = exports.DialogPortal = exports.DialogOverlay = exports.DialogHeader = exports.DialogFooter = exports.DialogDescription = exports.DialogContent = exports.DialogClose = exports.Dialog = exports.CommandSeparator = exports.CommandShortcut = exports.CommandItem = exports.CommandGroup = exports.CommandEmpty = exports.CommandList = exports.CommandInput = exports.CommandDialog = exports.Command = exports.CollapsibleContent = exports.CollapsibleTrigger = exports.Collapsible = exports.Checkbox = exports.CardMedia = exports.CardContent = exports.CardDescription = exports.CardAction = exports.CardTitle = exports.CardFooter = exports.CardHeader = exports.Card = exports.buttonVariants = exports.Button = exports.badgeVariants = exports.Badge = exports.AvatarFallback = exports.AvatarImage = exports.Avatar = exports.AspectRatio = void 0;
+exports.TooltipProvider = exports.TooltipContent = exports.TooltipTrigger = exports.Tooltip = exports.toast = exports.Toaster = exports.Textarea = exports.TabsContent = exports.TabsTrigger = exports.TabsList = exports.Tabs = exports.Switch = exports.Slider = exports.Separator = exports.Section = exports.SelectScrollDownButton = exports.SelectScrollUpButton = exports.SelectSeparator = exports.SelectItem = exports.SelectLabel = exports.SelectContent = exports.SelectTrigger = exports.SelectValue = exports.SelectGroup = exports.Select = exports.ScrollBar = exports.ScrollArea = exports.ResizableHandle = exports.ResizablePanel = exports.ResizablePanelGroup = exports.Progress = exports.PopoverClose = exports.PopoverAnchor = exports.PopoverContent = exports.PopoverTrigger = exports.Popover = exports.Label = exports.Input = exports.Grid = exports.Glass = exports.DropdownMenuRadioGroup = exports.DropdownMenuSubTrigger = exports.DropdownMenuSubContent = exports.DropdownMenuSub = void 0;
 var aspect_ratio_1 = require("./aspect-ratio.cjs");
 Object.defineProperty(exports, "AspectRatio", { enumerable: true, get: function () { return aspect_ratio_1.AspectRatio; } });
 var avatar_1 = require("./avatar.cjs");
@@ -38,6 +38,7 @@ Object.defineProperty(exports, "CardTitle", { enumerable: true, get: function ()
 Object.defineProperty(exports, "CardAction", { enumerable: true, get: function () { return card_1.CardAction; } });
 Object.defineProperty(exports, "CardDescription", { enumerable: true, get: function () { return card_1.CardDescription; } });
 Object.defineProperty(exports, "CardContent", { enumerable: true, get: function () { return card_1.CardContent; } });
+Object.defineProperty(exports, "CardMedia", { enumerable: true, get: function () { return card_1.CardMedia; } });
 var checkbox_1 = require("./checkbox.cjs");
 Object.defineProperty(exports, "Checkbox", { enumerable: true, get: function () { return checkbox_1.Checkbox; } });
 var collapsible_1 = require("./collapsible.cjs");
@@ -83,6 +84,8 @@ Object.defineProperty(exports, "DropdownMenuSubTrigger", { enumerable: true, get
 Object.defineProperty(exports, "DropdownMenuRadioGroup", { enumerable: true, get: function () { return dropdown_menu_1.DropdownMenuRadioGroup; } });
 var glass_1 = require("./glass.cjs");
 Object.defineProperty(exports, "Glass", { enumerable: true, get: function () { return glass_1.Glass; } });
+var grid_1 = require("./grid.cjs");
+Object.defineProperty(exports, "Grid", { enumerable: true, get: function () { return grid_1.Grid; } });
 var input_1 = require("./input.cjs");
 Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return input_1.Input; } });
 var label_1 = require("./label.cjs");
@@ -113,6 +116,8 @@ Object.defineProperty(exports, "SelectItem", { enumerable: true, get: function (
 Object.defineProperty(exports, "SelectSeparator", { enumerable: true, get: function () { return select_1.SelectSeparator; } });
 Object.defineProperty(exports, "SelectScrollUpButton", { enumerable: true, get: function () { return select_1.SelectScrollUpButton; } });
 Object.defineProperty(exports, "SelectScrollDownButton", { enumerable: true, get: function () { return select_1.SelectScrollDownButton; } });
+var section_1 = require("./section.cjs");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return section_1.Section; } });
 var separator_1 = require("./separator.cjs");
 Object.defineProperty(exports, "Separator", { enumerable: true, get: function () { return separator_1.Separator; } });
 var slider_1 = require("./slider.cjs");

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

@@ -2,13 +2,14 @@ export { AspectRatio, type AspectRatioProps } from './aspect-ratio.js';
 export { Avatar, AvatarImage, AvatarFallback } from './avatar.js';
 export { Badge, badgeVariants, type BadgeProps, type BadgeVariant } from './badge.js';
 export { Button, buttonVariants, type ButtonProps, type ButtonSize, type ButtonVariant } from './button.js';
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './card.js';
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, CardMedia, type CardMediaProps, } from './card.js';
 export { Checkbox } from './checkbox.js';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible.js';
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, type CommandFilter, type CommandProps, } from './command.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './dialog.js';
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, type DropdownMenuProps, } from './dropdown-menu.js';
 export { Glass, type GlassProps } from './glass.js';
+export { Grid, type GridProps } from './grid.js';
 export { Input, type InputProps } from './input.js';
 export { Label } from './label.js';
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose } from './popover.js';
@@ -16,6 +17,7 @@ export { Progress } from './progress.js';
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle, type ResizablePanelGroupProps, type ResizablePanelProps, type ResizableHandleProps, } from './resizable.js';
 export { ScrollArea, ScrollBar } from './scroll-area.js';
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } from './select.js';
+export { Section, type SectionProps } from './section.js';
 export { Separator } from './separator.js';
 export { Slider } from './slider.js';
 export { Switch } from './switch.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/index.ts"],"names":[],"mappings":"AAiBA,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,YAAY,EAAE,MAAM,SAAS,CAAA;AAClF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,UAAU,CAAA;AACxG,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AACnF,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,YAAY,GAClB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,EACtB,KAAK,iBAAiB,GACvB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAChG,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EACxB,KAAK,oBAAoB,GAC1B,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/index.ts"],"names":[],"mappings":"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"}

package/dist/backends/gui/index.js

@@ -18,13 +18,14 @@ export { AspectRatio } from './aspect-ratio.js';
 export { Avatar, AvatarImage, AvatarFallback } from './avatar.js';
 export { Badge, badgeVariants } from './badge.js';
 export { Button, buttonVariants } from './button.js';
-export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, } from './card.js';
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, CardMedia, } from './card.js';
 export { Checkbox } from './checkbox.js';
 export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './collapsible.js';
 export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, } from './command.js';
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, } from './dialog.js';
 export { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuGroup, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuRadioGroup, } from './dropdown-menu.js';
 export { Glass } from './glass.js';
+export { Grid } from './grid.js';
 export { Input } from './input.js';
 export { Label } from './label.js';
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverClose } from './popover.js';
@@ -32,6 +33,7 @@ export { Progress } from './progress.js';
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle, } from './resizable.js';
 export { ScrollArea, ScrollBar } from './scroll-area.js';
 export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, } from './select.js';
+export { Section } from './section.js';
 export { Separator } from './separator.js';
 export { Slider } from './slider.js';
 export { Switch } from './switch.js';

package/dist/backends/gui/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/backends/gui/index.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,EAAE;AACF,kFAAkF;AAClF,4EAA4E;AAC5E,uEAAuE;AACvE,EAAE;AACF,4EAA4E;AAC5E,iFAAiF;AACjF,+EAA+E;AAC/E,0BAA0B;AAC1B,EAAE;AACF,6DAA6D;AAC7D,6EAA6E;AAC7E,iFAAiF;AACjF,+CAA+C;AAC/C,oCAAoC;AAEpC,OAAO,EAAE,WAAW,EAAyB,MAAM,gBAAgB,CAAA;AACnE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9D,OAAO,EAAE,KAAK,EAAE,aAAa,EAAsC,MAAM,SAAS,CAAA;AAClF,OAAO,EAAE,MAAM,EAAE,cAAc,EAAyD,MAAM,UAAU,CAAA;AACxG,OAAO,EACL,IAAI,EACJ,UAAU,EACV,UAAU,EACV,SAAS,EACT,UAAU,EACV,eAAe,EACf,WAAW,GACZ,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AACnF,OAAO,EACL,OAAO,EACP,aAAa,EACb,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,eAAe,EACf,gBAAgB,GAGjB,MAAM,WAAW,CAAA;AAClB,OAAO,EACL,MAAM,EACN,WAAW,EACX,aAAa,EACb,iBAAiB,EACjB,YAAY,EACZ,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,WAAW,EACX,aAAa,GACd,MAAM,UAAU,CAAA;AACjB,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,EAChB,wBAAwB,EACxB,qBAAqB,EACrB,iBAAiB,EACjB,qBAAqB,EACrB,oBAAoB,EACpB,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,sBAAsB,EACtB,sBAAsB,EACtB,sBAAsB,GAEvB,MAAM,iBAAiB,CAAA;AACxB,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAChG,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EACL,mBAAmB,EACnB,cAAc,EACd,eAAe,GAIhB,MAAM,aAAa,CAAA;AACpB,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EACL,MAAM,EACN,WAAW,EACX,WAAW,EACX,aAAa,EACb,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAC1C,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/backends/gui/index.ts"],"names":[],"mappings":"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"}

package/dist/backends/gui/section.cjs

@@ -0,0 +1,39 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Section — the page's vertical rhythm, in one place.
+ *
+ * Components kept inventing their own vertical story: a margin here, a padding
+ * there, a `<div style={{marginTop: 64}}>` somewhere else. The result is a page
+ * whose spacing is the sum of everyone's guesses, and which is never the same
+ * twice on a phone.
+ *
+ * So the page-level spacing decision is made once, from the space scale, and it
+ * is mobile-first: phone values by default, stepping up past `$gtSm`. A caller
+ * that writes nothing gets the right answer at every width, which is the point —
+ * the failure mode being designed out is "had to remember something".
+ *
+ * Two boxes, because they do two different jobs and merging them is what breaks:
+ * the OUTER runs full-bleed and owns the vertical rhythm and the side gutter, so
+ * a background set on it reaches both edges; the INNER is the centred measure and
+ * owns `maxWidth`. Put `maxWidth` on the outer box instead and a section can
+ * never have a full-width background.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+const Section = ({ maxWidth = 1200, children, innerProps, ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('section'), width: "100%", 
+    // Values come from the space scale, never literals — a section spaced in
+    // raw px drifts from everything else on the page. `$md` is a MAX-width
+    // query in this config, so the base is the roomy value and the phone steps
+    // it down; that is the direction every other responsive prop in this
+    // package is written in ($md/$sm in Field, PageHeader, SiteNav) and mixing
+    // both directions in one codebase is how a breakpoint ends up applying
+    // twice.
+    py: "$11", px: "$6", "$md": { py: '$8', px: '$4' }, ...props, children: (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('section-inner'), width: "100%", ...(maxWidth === false ? {} : { maxWidth }), 
+        // The centring. `self: center` is the cross-axis rule a YStack understands
+        // on web AND native, where `margin: auto` is web-only.
+        self: "center", ...innerProps, children: children }) }));
+exports.Section = Section;

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

@@ -0,0 +1,29 @@
+/**
+ * Section — the page's vertical rhythm, in one place.
+ *
+ * Components kept inventing their own vertical story: a margin here, a padding
+ * there, a `<div style={{marginTop: 64}}>` somewhere else. The result is a page
+ * whose spacing is the sum of everyone's guesses, and which is never the same
+ * twice on a phone.
+ *
+ * So the page-level spacing decision is made once, from the space scale, and it
+ * is mobile-first: phone values by default, stepping up past `$gtSm`. A caller
+ * that writes nothing gets the right answer at every width, which is the point —
+ * the failure mode being designed out is "had to remember something".
+ *
+ * Two boxes, because they do two different jobs and merging them is what breaks:
+ * the OUTER runs full-bleed and owns the vertical rhythm and the side gutter, so
+ * a background set on it reaches both edges; the INNER is the centred measure and
+ * owns `maxWidth`. Put `maxWidth` on the outer box instead and a section can
+ * never have a full-width background.
+ */
+import { type YStackProps } from '@hanzo/gui';
+export interface SectionProps extends YStackProps {
+    /** The centred measure. `false` lets the content run the full width. */
+    maxWidth?: number | false;
+    /** Props for the inner centred column. */
+    innerProps?: YStackProps;
+}
+declare const Section: ({ maxWidth, children, innerProps, ...props }: SectionProps) => import("react/jsx-runtime").JSX.Element;
+export { Section };
+//# sourceMappingURL=section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/section.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAGrD,MAAM,WAAW,YAAa,SAAQ,WAAW;IAC/C,wEAAwE;IACxE,QAAQ,CAAC,EAAE,MAAM,GAAG,KAAK,CAAA;IACzB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,WAAW,CAAA;CACzB;AAED,QAAA,MAAM,OAAO,GAAI,8CAAqD,YAAY,4CA4BjF,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/backends/gui/section.js

@@ -0,0 +1,37 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Section — the page's vertical rhythm, in one place.
+ *
+ * Components kept inventing their own vertical story: a margin here, a padding
+ * there, a `<div style={{marginTop: 64}}>` somewhere else. The result is a page
+ * whose spacing is the sum of everyone's guesses, and which is never the same
+ * twice on a phone.
+ *
+ * So the page-level spacing decision is made once, from the space scale, and it
+ * is mobile-first: phone values by default, stepping up past `$gtSm`. A caller
+ * that writes nothing gets the right answer at every width, which is the point —
+ * the failure mode being designed out is "had to remember something".
+ *
+ * Two boxes, because they do two different jobs and merging them is what breaks:
+ * the OUTER runs full-bleed and owns the vertical rhythm and the side gutter, so
+ * a background set on it reaches both edges; the INNER is the centred measure and
+ * owns `maxWidth`. Put `maxWidth` on the outer box instead and a section can
+ * never have a full-width background.
+ */
+import { YStack } from '@hanzo/gui';
+import { slot } from './slot.js';
+const Section = ({ maxWidth = 1200, children, innerProps, ...props }) => (_jsx(YStack, { ...slot('section'), width: "100%", 
+    // Values come from the space scale, never literals — a section spaced in
+    // raw px drifts from everything else on the page. `$md` is a MAX-width
+    // query in this config, so the base is the roomy value and the phone steps
+    // it down; that is the direction every other responsive prop in this
+    // package is written in ($md/$sm in Field, PageHeader, SiteNav) and mixing
+    // both directions in one codebase is how a breakpoint ends up applying
+    // twice.
+    py: "$11", px: "$6", "$md": { py: '$8', px: '$4' }, ...props, children: _jsx(YStack, { ...slot('section-inner'), width: "100%", ...(maxWidth === false ? {} : { maxWidth }), 
+        // The centring. `self: center` is the cross-axis rule a YStack understands
+        // on web AND native, where `margin: auto` is web-only.
+        self: "center", ...innerProps, children: children }) }));
+export { Section };
+//# sourceMappingURL=section.js.map

package/dist/backends/gui/section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"section.js","sourceRoot":"","sources":["../../../src/backends/gui/section.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AACrD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAS7B,MAAM,OAAO,GAAG,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE,CAAC,CACrF,KAAC,MAAM,OACD,IAAI,CAAC,SAAS,CAAC,EACnB,KAAK,EAAC,MAAM;IACZ,yEAAyE;IACzE,uEAAuE;IACvE,2EAA2E;IAC3E,qEAAqE;IACrE,2EAA2E;IAC3E,uEAAuE;IACvE,SAAS;IACT,EAAE,EAAC,KAAK,EACR,EAAE,EAAC,IAAI,SACF,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,KACvB,KAAK,YAET,KAAC,MAAM,OACD,IAAI,CAAC,eAAe,CAAC,EACzB,KAAK,EAAC,MAAM,KACR,CAAC,QAAQ,KAAK,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC;QAC5C,2EAA2E;QAC3E,uDAAuD;QACvD,IAAI,EAAC,QAAQ,KACT,UAAU,YAEb,QAAQ,GACF,GACF,CACV,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/core/index.cjs

@@ -2,7 +2,13 @@
 // @hanzo/ui — design core.
 //
 // Backend-agnostic foundation every backend draws from: the class-name composer,
-// the design tokens (from @hanzo/tokens), and the Geist typography variables.
+// the design tokens (from @hanzo/design), and the Geist typography variables.
+//
+// ESM-ONLY, and so is `@hanzo/ui/tokens`: @hanzo/design is `"type": "module"`
+// with no `require` condition, so a CJS build of this subpath cannot load it.
+// The `require` condition is removed from both subpaths in package.json rather
+// than left to crash deep inside design at run time. The MAIN barrel is
+// unaffected — it pulls `./core/cn` directly, not this file.
 // The visual identity these describe is emitted as CSS by `theme.css`.
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;

package/dist/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACjF,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACjF,cAAc,UAAU,CAAA"}

package/dist/core/index.js

@@ -1,7 +1,13 @@
 // @hanzo/ui — design core.
 //
 // Backend-agnostic foundation every backend draws from: the class-name composer,
-// the design tokens (from @hanzo/tokens), and the Geist typography variables.
+// the design tokens (from @hanzo/design), and the Geist typography variables.
+//
+// ESM-ONLY, and so is `@hanzo/ui/tokens`: @hanzo/design is `"type": "module"`
+// with no `require` condition, so a CJS build of this subpath cannot load it.
+// The `require` condition is removed from both subpaths in package.json rather
+// than left to crash deep inside design at run time. The MAIN barrel is
+// unaffected — it pulls `./core/cn` directly, not this file.
 // The visual identity these describe is emitted as CSS by `theme.css`.
 export { cn } from './cn.js';
 export { fonts, fontSans, fontMono, FONT_SANS_VAR, FONT_MONO_VAR } from './fonts.js';

package/dist/core/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,EAAE;AACF,iFAAiF;AACjF,8EAA8E;AAC9E,uEAAuE;AAEvE,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACjF,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAC3B,EAAE;AACF,iFAAiF;AACjF,8EAA8E;AAC9E,EAAE;AACF,8EAA8E;AAC9E,8EAA8E;AAC9E,+EAA+E;AAC/E,wEAAwE;AACxE,6DAA6D;AAC7D,uEAAuE;AAEvE,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAA;AACzB,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AACjF,cAAc,UAAU,CAAA"}

package/dist/core/tokens.cjs

@@ -1,35 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.themes = exports.light = exports.dark = exports.letterSpacing = exports.lineHeight = exports.fontWeight = exports.fontSizePx = exports.fontSize = exports.fontFamily = exports.radiiPx = exports.radii = exports.spacingPx = exports.spacing = exports.hsl = exports.oklch = exports.zinc = exports.colors = void 0;
+exports.tokenValue = exports.cssVar = exports.cssVars = exports.fonts = exports.zIndex = exports.motion = exports.elevation = exports.radius = exports.grid = exports.spacing = exports.typography = exports.colors = void 0;
 /**
- * Design tokens — re-exported from `@hanzo/tokens`, the single source of truth.
+ * Design tokens — re-exported from `@hanzo/design`, the single source of truth.
  *
- * `@hanzo/ui` is BUILT ON `@hanzo/tokens`: the color scale, the dark/light theme
- * token sets (the exact values `theme.css` emits as CSS variables), the radii,
- * the spacing, and the typography scale all originate there. Surfacing them here
- * lets a consumer read the same tokens programmatically —
- * `import { themes, colors } from '@hanzo/ui/tokens'` — that the stylesheet and
- * the components render against, so runtime and CSS can never drift.
+ * This used to read `@hanzo/tokens`, a workspace package last touched
+ * 2026-03-22, while the design lane and several surfaces had already moved to
+ * `@hanzo/design`. One fact, two homes: store/billing/hanzo.industries followed
+ * design, the convergence branches followed the stale package, and pushing
+ * either over the other reverted real work. `@hanzo/design` wins — it IS the
+ * design system, it publishes the finished values, and it is what the rest of
+ * the estate already consumes.
+ *
+ * The token layer this exposes to code is the SAME layer `theme.css` ships as
+ * CSS — composed from @hanzo/design at build time by scripts/compose-theme.mjs
+ * — so runtime and stylesheet cannot drift.
+ *
+ * `cssVar` is how code should reach a token: it returns `var(--name, <literal>)`
+ * so the value resolves through the live cascade and honours the viewer's theme
+ * instead of baking one theme's number into a component.
  *
  * NOTE: the root barrel's `tokens` export (the gui/product theme object from
  * `@hanzo/data`) is a DIFFERENT, complementary thing; these are named exports
- * (`colors`, `themes`, `dark`, `light`, `radii`, …) and never collide with it.
+ * and never collide with it.
  */
-var tokens_1 = require("@hanzo/tokens");
-Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return tokens_1.colors; } });
-Object.defineProperty(exports, "zinc", { enumerable: true, get: function () { return tokens_1.zinc; } });
-Object.defineProperty(exports, "oklch", { enumerable: true, get: function () { return tokens_1.oklch; } });
-Object.defineProperty(exports, "hsl", { enumerable: true, get: function () { return tokens_1.hsl; } });
-Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return tokens_1.spacing; } });
-Object.defineProperty(exports, "spacingPx", { enumerable: true, get: function () { return tokens_1.spacingPx; } });
-Object.defineProperty(exports, "radii", { enumerable: true, get: function () { return tokens_1.radii; } });
-Object.defineProperty(exports, "radiiPx", { enumerable: true, get: function () { return tokens_1.radiiPx; } });
-Object.defineProperty(exports, "fontFamily", { enumerable: true, get: function () { return tokens_1.fontFamily; } });
-Object.defineProperty(exports, "fontSize", { enumerable: true, get: function () { return tokens_1.fontSize; } });
-Object.defineProperty(exports, "fontSizePx", { enumerable: true, get: function () { return tokens_1.fontSizePx; } });
-Object.defineProperty(exports, "fontWeight", { enumerable: true, get: function () { return tokens_1.fontWeight; } });
-Object.defineProperty(exports, "lineHeight", { enumerable: true, get: function () { return tokens_1.lineHeight; } });
-Object.defineProperty(exports, "letterSpacing", { enumerable: true, get: function () { return tokens_1.letterSpacing; } });
-Object.defineProperty(exports, "dark", { enumerable: true, get: function () { return tokens_1.dark; } });
-Object.defineProperty(exports, "light", { enumerable: true, get: function () { return tokens_1.light; } });
-Object.defineProperty(exports, "themes", { enumerable: true, get: function () { return tokens_1.themes; } });
+var design_1 = require("@hanzo/design");
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return design_1.colors; } });
+Object.defineProperty(exports, "typography", { enumerable: true, get: function () { return design_1.typography; } });
+Object.defineProperty(exports, "spacing", { enumerable: true, get: function () { return design_1.spacing; } });
+Object.defineProperty(exports, "grid", { enumerable: true, get: function () { return design_1.grid; } });
+Object.defineProperty(exports, "radius", { enumerable: true, get: function () { return design_1.radius; } });
+Object.defineProperty(exports, "elevation", { enumerable: true, get: function () { return design_1.elevation; } });
+Object.defineProperty(exports, "motion", { enumerable: true, get: function () { return design_1.motion; } });
+Object.defineProperty(exports, "zIndex", { enumerable: true, get: function () { return design_1.zIndex; } });
+Object.defineProperty(exports, "fonts", { enumerable: true, get: function () { return design_1.fonts; } });
+Object.defineProperty(exports, "cssVars", { enumerable: true, get: function () { return design_1.cssVars; } });
+Object.defineProperty(exports, "cssVar", { enumerable: true, get: function () { return design_1.cssVar; } });
+Object.defineProperty(exports, "tokenValue", { enumerable: true, get: function () { return design_1.tokenValue; } });

package/dist/core/tokens.d.ts

@@ -1,17 +1,26 @@
 /**
- * Design tokens — re-exported from `@hanzo/tokens`, the single source of truth.
+ * Design tokens — re-exported from `@hanzo/design`, the single source of truth.
  *
- * `@hanzo/ui` is BUILT ON `@hanzo/tokens`: the color scale, the dark/light theme
- * token sets (the exact values `theme.css` emits as CSS variables), the radii,
- * the spacing, and the typography scale all originate there. Surfacing them here
- * lets a consumer read the same tokens programmatically —
- * `import { themes, colors } from '@hanzo/ui/tokens'` — that the stylesheet and
- * the components render against, so runtime and CSS can never drift.
+ * This used to read `@hanzo/tokens`, a workspace package last touched
+ * 2026-03-22, while the design lane and several surfaces had already moved to
+ * `@hanzo/design`. One fact, two homes: store/billing/hanzo.industries followed
+ * design, the convergence branches followed the stale package, and pushing
+ * either over the other reverted real work. `@hanzo/design` wins — it IS the
+ * design system, it publishes the finished values, and it is what the rest of
+ * the estate already consumes.
+ *
+ * The token layer this exposes to code is the SAME layer `theme.css` ships as
+ * CSS — composed from @hanzo/design at build time by scripts/compose-theme.mjs
+ * — so runtime and stylesheet cannot drift.
+ *
+ * `cssVar` is how code should reach a token: it returns `var(--name, <literal>)`
+ * so the value resolves through the live cascade and honours the viewer's theme
+ * instead of baking one theme's number into a component.
  *
  * NOTE: the root barrel's `tokens` export (the gui/product theme object from
  * `@hanzo/data`) is a DIFFERENT, complementary thing; these are named exports
- * (`colors`, `themes`, `dark`, `light`, `radii`, …) and never collide with it.
+ * and never collide with it.
  */
-export { colors, zinc, oklch, hsl, spacing, spacingPx, radii, radiiPx, fontFamily, fontSize, fontSizePx, fontWeight, lineHeight, letterSpacing, dark, light, themes, } from '@hanzo/tokens';
-export type { ColorToken, ZincStep, SpacingStep, RadiusToken, FontSizeToken, FontWeightToken, ThemeTokens, } from '@hanzo/tokens';
+export { colors, typography, spacing, grid, radius, elevation, motion, zIndex, fonts, cssVars, cssVar, tokenValue, } from '@hanzo/design';
+export type { CssVarName, TokenName } from '@hanzo/design';
 //# sourceMappingURL=tokens.d.ts.map

package/dist/core/tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/core/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,GAAG,EACH,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,IAAI,EACJ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAA;AAEtB,YAAY,EACV,UAAU,EACV,QAAQ,EACR,WAAW,EACX,WAAW,EACX,aAAa,EACb,eAAe,EACf,WAAW,GACZ,MAAM,eAAe,CAAA"}
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../../src/core/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,EACN,UAAU,GACX,MAAM,eAAe,CAAA;AAEtB,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA"}

package/dist/core/tokens.js

@@ -1,16 +1,25 @@
 /**
- * Design tokens — re-exported from `@hanzo/tokens`, the single source of truth.
+ * Design tokens — re-exported from `@hanzo/design`, the single source of truth.
  *
- * `@hanzo/ui` is BUILT ON `@hanzo/tokens`: the color scale, the dark/light theme
- * token sets (the exact values `theme.css` emits as CSS variables), the radii,
- * the spacing, and the typography scale all originate there. Surfacing them here
- * lets a consumer read the same tokens programmatically —
- * `import { themes, colors } from '@hanzo/ui/tokens'` — that the stylesheet and
- * the components render against, so runtime and CSS can never drift.
+ * This used to read `@hanzo/tokens`, a workspace package last touched
+ * 2026-03-22, while the design lane and several surfaces had already moved to
+ * `@hanzo/design`. One fact, two homes: store/billing/hanzo.industries followed
+ * design, the convergence branches followed the stale package, and pushing
+ * either over the other reverted real work. `@hanzo/design` wins — it IS the
+ * design system, it publishes the finished values, and it is what the rest of
+ * the estate already consumes.
+ *
+ * The token layer this exposes to code is the SAME layer `theme.css` ships as
+ * CSS — composed from @hanzo/design at build time by scripts/compose-theme.mjs
+ * — so runtime and stylesheet cannot drift.
+ *
+ * `cssVar` is how code should reach a token: it returns `var(--name, <literal>)`
+ * so the value resolves through the live cascade and honours the viewer's theme
+ * instead of baking one theme's number into a component.
  *
  * NOTE: the root barrel's `tokens` export (the gui/product theme object from
  * `@hanzo/data`) is a DIFFERENT, complementary thing; these are named exports
- * (`colors`, `themes`, `dark`, `light`, `radii`, …) and never collide with it.
+ * and never collide with it.
  */
-export { colors, zinc, oklch, hsl, spacing, spacingPx, radii, radiiPx, fontFamily, fontSize, fontSizePx, fontWeight, lineHeight, letterSpacing, dark, light, themes, } from '@hanzo/tokens';
+export { colors, typography, spacing, grid, radius, elevation, motion, zIndex, fonts, cssVars, cssVar, tokenValue, } from '@hanzo/design';
 //# sourceMappingURL=tokens.js.map

package/dist/core/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/core/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AACH,OAAO,EACL,MAAM,EACN,IAAI,EACJ,KAAK,EACL,GAAG,EACH,OAAO,EACP,SAAS,EACT,KAAK,EACL,OAAO,EACP,UAAU,EACV,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EACb,IAAI,EACJ,KAAK,EACL,MAAM,GACP,MAAM,eAAe,CAAA"}
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../../src/core/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EACL,MAAM,EACN,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,SAAS,EACT,MAAM,EACN,MAAM,EACN,KAAK,EACL,OAAO,EACP,MAAM,EACN,UAAU,GACX,MAAM,eAAe,CAAA"}

package/dist/gallery.cjs

@@ -4,6 +4,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Gallery = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const gui_1 = 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. */
+const SWATCH = 'data:image/svg+xml;utf8,' +
+    encodeURIComponent(
+    // `#` is written literally and encodeURIComponent turns it into %23. Writing
+    // %23 here instead double-encodes it to %25888, the fill is invalid, and the
+    // swatch silently renders black — which it did.
+    '<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40"><rect width="120" height="40" fill="#888"/></svg>');
 const BUTTON_VARIANTS = [
     'default', 'destructive', 'outline', 'secondary', 'ghost', 'link', 'primary', 'linkFG', 'linkMuted',
 ];
@@ -18,6 +27,6 @@ const Section = ({ name, children }) => ((0, jsx_runtime_1.jsx)("section", { "da
  * Every component, once. `data-gallery` names each section so a browser test can
  * scope its assertions without depending on document order.
  */
-const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, padding: 24, maxWidth: 928 }, children: [(0, jsx_runtime_1.jsxs)(Section, { name: "button", children: [BUTTON_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_1.Button, { variant: variant, children: variant }, variant))), BUTTON_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: size, children: size }, size))), (0, jsx_runtime_1.jsx)(gui_1.Button, { disabled: true, children: "disabled" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { isLoading: true, children: "loading" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "badge", children: BADGE_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_1.Badge, { variant: variant, children: variant }, variant))) }), (0, jsx_runtime_1.jsx)(Section, { name: "card", children: (0, jsx_runtime_1.jsxs)(gui_1.Card, { children: [(0, jsx_runtime_1.jsxs)(gui_1.CardHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Card title" }), (0, jsx_runtime_1.jsx)(gui_1.CardDescription, { children: "Card description" }), (0, jsx_runtime_1.jsx)(gui_1.CardAction, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", variant: "ghost", children: "action" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "Card content" }), (0, jsx_runtime_1.jsx)(gui_1.CardFooter, { children: "Card footer" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "form", children: [(0, jsx_runtime_1.jsx)(gui_1.Label, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.Input, { placeholder: "Input" }), (0, jsx_runtime_1.jsx)(gui_1.Input, { placeholder: "Password", type: "password" }), (0, jsx_runtime_1.jsx)(gui_1.Textarea, { placeholder: "Textarea" }), (0, jsx_runtime_1.jsx)(gui_1.Checkbox, {}), (0, jsx_runtime_1.jsx)(gui_1.Checkbox, { checked: true }), (0, jsx_runtime_1.jsx)(gui_1.Switch, {}), (0, jsx_runtime_1.jsx)(gui_1.Switch, { checked: true }), (0, jsx_runtime_1.jsx)(gui_1.Slider, { defaultValue: [40] }), (0, jsx_runtime_1.jsx)(gui_1.Progress, { value: 40 })] }), (0, jsx_runtime_1.jsx)(Section, { name: "tabs", children: (0, jsx_runtime_1.jsxs)(gui_1.Tabs, { defaultValue: "one", children: [(0, jsx_runtime_1.jsxs)(gui_1.TabsList, { children: [(0, jsx_runtime_1.jsx)(gui_1.TabsTrigger, { value: "one", children: "One" }), (0, jsx_runtime_1.jsx)(gui_1.TabsTrigger, { value: "two", children: "Two" })] }), (0, jsx_runtime_1.jsx)(gui_1.TabsContent, { value: "one", children: "Panel one" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "surface", children: [(0, jsx_runtime_1.jsx)(gui_1.Separator, {}), (0, jsx_runtime_1.jsx)(gui_1.AspectRatio, { ratio: 16 / 9 }), (0, jsx_runtime_1.jsx)(gui_1.Avatar, { children: (0, jsx_runtime_1.jsx)(gui_1.AvatarFallback, { children: "HZ" }) }), (0, jsx_runtime_1.jsx)(gui_1.ScrollArea, { height: 80, children: "Scroll area" }), (0, jsx_runtime_1.jsxs)(gui_1.ResizablePanelGroup, { direction: "horizontal", children: [(0, jsx_runtime_1.jsx)(gui_1.ResizablePanel, {}), (0, jsx_runtime_1.jsx)(gui_1.ResizableHandle, {}), (0, jsx_runtime_1.jsx)(gui_1.ResizablePanel, {})] })] }), (0, jsx_runtime_1.jsx)(Section, { name: "collapsible", children: (0, jsx_runtime_1.jsxs)(gui_1.Collapsible, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.CollapsibleTrigger, { children: "Collapsible trigger" }), (0, jsx_runtime_1.jsx)(gui_1.CollapsibleContent, { children: "Collapsible content" })] }) }), (0, jsx_runtime_1.jsx)(Section, { name: "command", children: (0, jsx_runtime_1.jsxs)(gui_1.Command, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsx)(gui_1.CommandGroup, { heading: "Group", children: (0, jsx_runtime_1.jsxs)(gui_1.CommandItem, { value: "a", children: ["Item", (0, jsx_runtime_1.jsx)(gui_1.CommandShortcut, { children: "\u2318A" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.CommandSeparator, {})] })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_1.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_1.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_1.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.Toaster, {})] })] }));
+const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, padding: 24, maxWidth: 928 }, children: [(0, jsx_runtime_1.jsxs)(Section, { name: "button", children: [BUTTON_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_1.Button, { variant: variant, children: variant }, variant))), BUTTON_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(gui_1.Button, { size: size, children: size }, size))), (0, jsx_runtime_1.jsx)(gui_1.Button, { disabled: true, children: "disabled" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { isLoading: true, children: "loading" })] }), (0, jsx_runtime_1.jsx)(Section, { name: "badge", children: BADGE_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(gui_1.Badge, { variant: variant, children: variant }, variant))) }), (0, jsx_runtime_1.jsx)(Section, { name: "card", children: (0, jsx_runtime_1.jsxs)(gui_1.Card, { children: [(0, jsx_runtime_1.jsxs)(gui_1.CardHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Card title" }), (0, jsx_runtime_1.jsx)(gui_1.CardDescription, { children: "Card description" }), (0, jsx_runtime_1.jsx)(gui_1.CardAction, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", variant: "ghost", children: "action" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "Card content" }), (0, jsx_runtime_1.jsx)(gui_1.CardFooter, { children: "Card footer" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "form", children: [(0, jsx_runtime_1.jsx)(gui_1.Label, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.Input, { placeholder: "Input" }), (0, jsx_runtime_1.jsx)(gui_1.Input, { placeholder: "Password", type: "password" }), (0, jsx_runtime_1.jsx)(gui_1.Textarea, { placeholder: "Textarea" }), (0, jsx_runtime_1.jsx)(gui_1.Checkbox, {}), (0, jsx_runtime_1.jsx)(gui_1.Checkbox, { checked: true }), (0, jsx_runtime_1.jsx)(gui_1.Switch, {}), (0, jsx_runtime_1.jsx)(gui_1.Switch, { checked: true }), (0, jsx_runtime_1.jsx)(gui_1.Slider, { defaultValue: [40] }), (0, jsx_runtime_1.jsx)(gui_1.Progress, { value: 40 })] }), (0, jsx_runtime_1.jsx)(Section, { name: "tabs", children: (0, jsx_runtime_1.jsxs)(gui_1.Tabs, { defaultValue: "one", children: [(0, jsx_runtime_1.jsxs)(gui_1.TabsList, { children: [(0, jsx_runtime_1.jsx)(gui_1.TabsTrigger, { value: "one", children: "One" }), (0, jsx_runtime_1.jsx)(gui_1.TabsTrigger, { value: "two", children: "Two" })] }), (0, jsx_runtime_1.jsx)(gui_1.TabsContent, { value: "one", children: "Panel one" })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "surface", children: [(0, jsx_runtime_1.jsx)(gui_1.Separator, {}), (0, jsx_runtime_1.jsx)(gui_1.AspectRatio, { ratio: 16 / 9 }), (0, jsx_runtime_1.jsx)(gui_1.Avatar, { children: (0, jsx_runtime_1.jsx)(gui_1.AvatarFallback, { children: "HZ" }) }), (0, jsx_runtime_1.jsx)(gui_1.ScrollArea, { height: 80, children: "Scroll area" }), (0, jsx_runtime_1.jsxs)(gui_1.ResizablePanelGroup, { direction: "horizontal", children: [(0, jsx_runtime_1.jsx)(gui_1.ResizablePanel, {}), (0, jsx_runtime_1.jsx)(gui_1.ResizableHandle, {}), (0, jsx_runtime_1.jsx)(gui_1.ResizablePanel, {})] })] }), (0, jsx_runtime_1.jsx)(Section, { name: "collapsible", children: (0, jsx_runtime_1.jsxs)(gui_1.Collapsible, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.CollapsibleTrigger, { children: "Collapsible trigger" }), (0, jsx_runtime_1.jsx)(gui_1.CollapsibleContent, { children: "Collapsible content" })] }) }), (0, jsx_runtime_1.jsx)(Section, { name: "command", children: (0, jsx_runtime_1.jsxs)(gui_1.Command, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandInput, {}), (0, jsx_runtime_1.jsxs)(gui_1.CommandList, { children: [(0, jsx_runtime_1.jsx)(gui_1.CommandEmpty, { children: "No results" }), (0, jsx_runtime_1.jsx)(gui_1.CommandGroup, { heading: "Group", children: (0, jsx_runtime_1.jsxs)(gui_1.CommandItem, { value: "a", children: ["Item", (0, jsx_runtime_1.jsx)(gui_1.CommandShortcut, { children: "\u2318A" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.CommandSeparator, {})] })] }) }), (0, jsx_runtime_1.jsxs)(Section, { name: "overlay", children: [(0, jsx_runtime_1.jsx)(gui_1.Dialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.DialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.DialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.DialogTitle, { children: "Dialog title" }), (0, jsx_runtime_1.jsx)(gui_1.DialogDescription, { children: "Dialog description" })] }), (0, jsx_runtime_1.jsx)(gui_1.DialogFooter, { children: (0, jsx_runtime_1.jsx)(gui_1.Button, { size: "sm", children: "OK" }) })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenu, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuTrigger, { children: "Menu" }), (0, jsx_runtime_1.jsxs)(gui_1.DropdownMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.DropdownMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.DropdownMenuItem, { children: "Item" })] })] }), (0, jsx_runtime_1.jsxs)(gui_1.Popover, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.PopoverTrigger, { children: "Popover" }), (0, jsx_runtime_1.jsx)(gui_1.PopoverContent, { children: "Popover content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectValue, { placeholder: "Select" }) }), (0, jsx_runtime_1.jsx)(gui_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(gui_1.SelectItem, { value: "x", index: 0, children: "Option" }) })] }), (0, jsx_runtime_1.jsx)(gui_1.TooltipProvider, { delay: 0, children: (0, jsx_runtime_1.jsxs)(gui_1.Tooltip, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.TooltipTrigger, { children: "Tooltip" }), (0, jsx_runtime_1.jsx)(gui_1.TooltipContent, { children: "Tooltip content" })] }) }), (0, jsx_runtime_1.jsx)(gui_1.Toaster, {})] }), (0, jsx_runtime_1.jsxs)(Section, { name: "layout", children: [(0, jsx_runtime_1.jsx)(gui_1.Grid, { 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_1.Card, { children: [(0, jsx_runtime_1.jsx)(gui_1.CardMedia, { ratio: 16 / 10, children: (0, jsx_runtime_1.jsx)("img", { src: SWATCH, alt: "" }) }), (0, jsx_runtime_1.jsxs)(gui_1.CardHeader, { children: [(0, jsx_runtime_1.jsxs)(gui_1.CardTitle, { children: ["Card ", i] }), (0, jsx_runtime_1.jsx)(gui_1.CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), (0, jsx_runtime_1.jsxs)(gui_1.Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "wide" }) })] }), (0, jsx_runtime_1.jsx)("div", { style: { width: '100%', overflow: 'hidden' }, children: (0, jsx_runtime_1.jsxs)(gui_1.Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [(0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Card, { children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "short" }) })] }) }), (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_1.Card, { "data-card": "lean", children: (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }) }), (0, jsx_runtime_1.jsxs)(gui_1.Card, { "data-card": "fat", children: [(0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "one line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "two line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "three line" }), (0, jsx_runtime_1.jsx)(gui_1.CardContent, { children: "four line" })] })] }), (0, jsx_runtime_1.jsx)(gui_1.Card, { interactive: true, "data-card": "interactive", children: (0, jsx_runtime_1.jsx)(gui_1.CardHeader, { children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Interactive card" }) }) }), (0, jsx_runtime_1.jsx)(gui_1.Section, { maxWidth: 600, "data-section": "demo", children: (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { children: "Section" }) }), (0, jsx_runtime_1.jsx)(gui_1.CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), (0, jsx_runtime_1.jsx)(gui_1.Button, { "data-button": "block-child", children: (0, jsx_runtime_1.jsx)("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] })] }));
 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":"AA2DA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CAiJnB,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AAuEA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CAsOnB,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/gallery.js

@@ -1,6 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { AspectRatio, Avatar, AvatarFallback, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from './backends/gui/index.js';
+import { AspectRatio, Avatar, AvatarFallback, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Input, Label, Popover, PopoverContent, PopoverTrigger, Progress, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Separator, Slider, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Grid, Section as PageSection, CardMedia, } from './backends/gui/index.js';
+/** 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. */
+const SWATCH = 'data:image/svg+xml;utf8,' +
+    encodeURIComponent(
+    // `#` is written literally and encodeURIComponent turns it into %23. Writing
+    // %23 here instead double-encodes it to %25888, the fill is invalid, and the
+    // swatch silently renders black — which it did.
+    '<svg xmlns="http://www.w3.org/2000/svg" width="120" height="40"><rect width="120" height="40" fill="#888"/></svg>');
 const BUTTON_VARIANTS = [
     'default', 'destructive', 'outline', 'secondary', 'ghost', 'link', 'primary', 'linkFG', 'linkMuted',
 ];
@@ -15,6 +24,6 @@ const Section = ({ name, children }) => (_jsx("section", { "data-gallery": name,
  * Every component, once. `data-gallery` names each section so a browser test can
  * scope its assertions without depending on document order.
  */
-export const Gallery = () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, padding: 24, maxWidth: 928 }, children: [_jsxs(Section, { name: "button", children: [BUTTON_VARIANTS.map((variant) => (_jsx(Button, { variant: variant, children: variant }, variant))), BUTTON_SIZES.map((size) => (_jsx(Button, { size: size, children: size }, size))), _jsx(Button, { disabled: true, children: "disabled" }), _jsx(Button, { isLoading: true, children: "loading" })] }), _jsx(Section, { name: "badge", children: BADGE_VARIANTS.map((variant) => (_jsx(Badge, { variant: variant, children: variant }, variant))) }), _jsx(Section, { name: "card", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Card title" }), _jsx(CardDescription, { children: "Card description" }), _jsx(CardAction, { children: _jsx(Button, { size: "sm", variant: "ghost", children: "action" }) })] }), _jsx(CardContent, { children: "Card content" }), _jsx(CardFooter, { children: "Card footer" })] }) }), _jsxs(Section, { name: "form", children: [_jsx(Label, { children: "Label" }), _jsx(Input, { placeholder: "Input" }), _jsx(Input, { placeholder: "Password", type: "password" }), _jsx(Textarea, { placeholder: "Textarea" }), _jsx(Checkbox, {}), _jsx(Checkbox, { checked: true }), _jsx(Switch, {}), _jsx(Switch, { checked: true }), _jsx(Slider, { defaultValue: [40] }), _jsx(Progress, { value: 40 })] }), _jsx(Section, { name: "tabs", children: _jsxs(Tabs, { defaultValue: "one", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "one", children: "One" }), _jsx(TabsTrigger, { value: "two", children: "Two" })] }), _jsx(TabsContent, { value: "one", children: "Panel one" })] }) }), _jsxs(Section, { name: "surface", children: [_jsx(Separator, {}), _jsx(AspectRatio, { ratio: 16 / 9 }), _jsx(Avatar, { children: _jsx(AvatarFallback, { children: "HZ" }) }), _jsx(ScrollArea, { height: 80, children: "Scroll area" }), _jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, {}), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, {})] })] }), _jsx(Section, { name: "collapsible", children: _jsxs(Collapsible, { open: true, children: [_jsx(CollapsibleTrigger, { children: "Collapsible trigger" }), _jsx(CollapsibleContent, { children: "Collapsible content" })] }) }), _jsx(Section, { name: "command", children: _jsxs(Command, { children: [_jsx(CommandInput, {}), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results" }), _jsx(CommandGroup, { heading: "Group", children: _jsxs(CommandItem, { value: "a", children: ["Item", _jsx(CommandShortcut, { children: "\u2318A" })] }) }), _jsx(CommandSeparator, {})] })] }) }), _jsxs(Section, { name: "overlay", children: [_jsx(Dialog, { open: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Dialog title" }), _jsx(DialogDescription, { children: "Dialog description" })] }), _jsx(DialogFooter, { children: _jsx(Button, { size: "sm", children: "OK" }) })] }) }), _jsxs(DropdownMenu, { open: true, children: [_jsx(DropdownMenuTrigger, { children: "Menu" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Label" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Item" })] })] }), _jsxs(Popover, { open: true, children: [_jsx(PopoverTrigger, { children: "Popover" }), _jsx(PopoverContent, { children: "Popover content" })] }), _jsxs(Select, { open: true, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "x", index: 0, children: "Option" }) })] }), _jsx(TooltipProvider, { delay: 0, children: _jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { children: "Tooltip" }), _jsx(TooltipContent, { children: "Tooltip content" })] }) }), _jsx(Toaster, {})] })] }));
+export const Gallery = () => (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, padding: 24, maxWidth: 928 }, children: [_jsxs(Section, { name: "button", children: [BUTTON_VARIANTS.map((variant) => (_jsx(Button, { variant: variant, children: variant }, variant))), BUTTON_SIZES.map((size) => (_jsx(Button, { size: size, children: size }, size))), _jsx(Button, { disabled: true, children: "disabled" }), _jsx(Button, { isLoading: true, children: "loading" })] }), _jsx(Section, { name: "badge", children: BADGE_VARIANTS.map((variant) => (_jsx(Badge, { variant: variant, children: variant }, variant))) }), _jsx(Section, { name: "card", children: _jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Card title" }), _jsx(CardDescription, { children: "Card description" }), _jsx(CardAction, { children: _jsx(Button, { size: "sm", variant: "ghost", children: "action" }) })] }), _jsx(CardContent, { children: "Card content" }), _jsx(CardFooter, { children: "Card footer" })] }) }), _jsxs(Section, { name: "form", children: [_jsx(Label, { children: "Label" }), _jsx(Input, { placeholder: "Input" }), _jsx(Input, { placeholder: "Password", type: "password" }), _jsx(Textarea, { placeholder: "Textarea" }), _jsx(Checkbox, {}), _jsx(Checkbox, { checked: true }), _jsx(Switch, {}), _jsx(Switch, { checked: true }), _jsx(Slider, { defaultValue: [40] }), _jsx(Progress, { value: 40 })] }), _jsx(Section, { name: "tabs", children: _jsxs(Tabs, { defaultValue: "one", children: [_jsxs(TabsList, { children: [_jsx(TabsTrigger, { value: "one", children: "One" }), _jsx(TabsTrigger, { value: "two", children: "Two" })] }), _jsx(TabsContent, { value: "one", children: "Panel one" })] }) }), _jsxs(Section, { name: "surface", children: [_jsx(Separator, {}), _jsx(AspectRatio, { ratio: 16 / 9 }), _jsx(Avatar, { children: _jsx(AvatarFallback, { children: "HZ" }) }), _jsx(ScrollArea, { height: 80, children: "Scroll area" }), _jsxs(ResizablePanelGroup, { direction: "horizontal", children: [_jsx(ResizablePanel, {}), _jsx(ResizableHandle, {}), _jsx(ResizablePanel, {})] })] }), _jsx(Section, { name: "collapsible", children: _jsxs(Collapsible, { open: true, children: [_jsx(CollapsibleTrigger, { children: "Collapsible trigger" }), _jsx(CollapsibleContent, { children: "Collapsible content" })] }) }), _jsx(Section, { name: "command", children: _jsxs(Command, { children: [_jsx(CommandInput, {}), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results" }), _jsx(CommandGroup, { heading: "Group", children: _jsxs(CommandItem, { value: "a", children: ["Item", _jsx(CommandShortcut, { children: "\u2318A" })] }) }), _jsx(CommandSeparator, {})] })] }) }), _jsxs(Section, { name: "overlay", children: [_jsx(Dialog, { open: true, children: _jsxs(DialogContent, { children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Dialog title" }), _jsx(DialogDescription, { children: "Dialog description" })] }), _jsx(DialogFooter, { children: _jsx(Button, { size: "sm", children: "OK" }) })] }) }), _jsxs(DropdownMenu, { open: true, children: [_jsx(DropdownMenuTrigger, { children: "Menu" }), _jsxs(DropdownMenuContent, { children: [_jsx(DropdownMenuLabel, { children: "Label" }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { children: "Item" })] })] }), _jsxs(Popover, { open: true, children: [_jsx(PopoverTrigger, { children: "Popover" }), _jsx(PopoverContent, { children: "Popover content" })] }), _jsxs(Select, { open: true, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Select" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "x", index: 0, children: "Option" }) })] }), _jsx(TooltipProvider, { delay: 0, children: _jsxs(Tooltip, { open: true, children: [_jsx(TooltipTrigger, { children: "Tooltip" }), _jsx(TooltipContent, { children: "Tooltip content" })] }) }), _jsx(Toaster, {})] }), _jsxs(Section, { name: "layout", children: [_jsx(Grid, { min: 240, gap: "$3", style: { width: '100%' }, "data-grid": "auto", children: [0, 1, 2, 3, 4, 5, 6].map((i) => (_jsxs(Card, { children: [_jsx(CardMedia, { ratio: 16 / 10, children: _jsx("img", { src: SWATCH, alt: "" }) }), _jsxs(CardHeader, { children: [_jsxs(CardTitle, { children: ["Card ", i] }), _jsx(CardDescription, { children: "Sized by its content, never by a pinned height." })] })] }, i))) }), _jsxs(Grid, { min: 900, gap: "$3", style: { width: '100%' }, "data-grid": "wide", children: [_jsx(Card, { children: _jsx(CardContent, { children: "wide" }) }), _jsx(Card, { children: _jsx(CardContent, { children: "wide" }) })] }), _jsx("div", { style: { width: '100%', overflow: 'hidden' }, children: _jsxs(Grid, { cols: 3, gap: "$3", style: { width: '100%' }, "data-grid": "fixed", children: [_jsx(Card, { children: _jsx(CardContent, { children: "short" }) }), _jsx(Card, { children: _jsx(CardContent, { children: _jsx("span", { style: { whiteSpace: 'nowrap' }, children: "MMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMMM" }) }) }), _jsx(Card, { children: _jsx(CardContent, { children: "short" }) })] }) }), _jsxs("div", { "data-grid": "growth", style: { display: 'flex', alignItems: 'flex-start', gap: 12, width: '100%' }, children: [_jsx(Card, { "data-card": "lean", children: _jsx(CardContent, { children: "one line" }) }), _jsxs(Card, { "data-card": "fat", children: [_jsx(CardContent, { children: "one line" }), _jsx(CardContent, { children: "two line" }), _jsx(CardContent, { children: "three line" }), _jsx(CardContent, { children: "four line" })] })] }), _jsx(Card, { interactive: true, "data-card": "interactive", children: _jsx(CardHeader, { children: _jsx(CardTitle, { children: "Interactive card" }) }) }), _jsx(PageSection, { maxWidth: 600, "data-section": "demo", children: _jsx(CardTitle, { children: "Section" }) }), _jsx(CardTitle, { fontFamily: "$mono", "data-type": "mono", children: "1234567890" }), _jsx(Button, { "data-button": "block-child", children: _jsx("span", { "data-block-child": true, style: { display: 'block', height: 119, width: 119 } }) })] })] }));
 export default Gallery;
 //# sourceMappingURL=gallery.js.map