@hanzo/ui 8.0.66 → 8.0.69

package/dist/backends/gui/toggle-group.cjs

@@ -0,0 +1,114 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleGroup = ToggleGroup;
+exports.ToggleGroupItem = ToggleGroupItem;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * ToggleGroup — the segmented control, on @hanzogui/toggle-group.
+ *
+ * gui ships the group machinery (single/multiple selection, roving arrow-key
+ * focus, `data-state="on|off"`, `aria-pressed`), so this file flattens
+ * `ToggleGroup` + `ToggleGroup.Item` into the two shadcn names, adds the
+ * `variant`/`size` recipe those names carry, and repairs three things gui does
+ * not do for itself.
+ *
+ * NO RENAMES. type / value / defaultValue / onValueChange / disabled /
+ * orientation / rovingFocus / loop / dir / variant / size are the Radix +
+ * shadcn spellings, and `variant`/`size` still resolve the shadcn way: set on
+ * the GROUP they win for every item, otherwise each item decides for itself.
+ *
+ * WORKED AROUND, 1 — SELECTION WAS UNREADABLE TO A SCREEN READER in `single`
+ * mode. Radix gives a single-select group `role="radiogroup"` and each item
+ * `role="radio"` + `aria-checked`; gui keeps `role="group"` and, for single,
+ * deletes `aria-pressed` (correct — an exclusive choice is not a pressed
+ * button) without putting the radio semantics back. So the selected segment
+ * announced as an ordinary unlabelled button with no state at all. The roles
+ * are restored here, `toolbar` + `aria-pressed` for `multiple` exactly as Radix
+ * has it, and that is why this file mirrors the value at all: `aria-checked`
+ * needs to know which item is on, and gui's value context is internal.
+ *
+ * The mirror is not a second source of truth — it is THE source. gui is handed
+ * `value` + `onValueChange` from it, i.e. driven as a controlled component, so
+ * there is exactly one place the current value lives whether the call site
+ * controls it or not.
+ *
+ * WORKED AROUND, 2 — a horizontal group laid out VERTICALLY. `ToggleGroupImpl`
+ * consumes `orientation` for the roving-focus axis and never forwards it, and
+ * its frame is a plain `View`, which stacks. Radix's was a `<div>` that call
+ * sites made a row with `flex`. The axis is restored here from the same prop.
+ *
+ * WORKED AROUND, 3 — `size` on a gui toggle means a SQUARE (its variant sets
+ * width AND height from one token), which is not what `size="sm"` means on a
+ * labelled segment. Items render `unstyled` and this file supplies the whole
+ * recipe, so the shadcn ladder (height + horizontal padding + type scale) is
+ * what the prop actually does.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const ink_1 = require("./ink.cjs");
+const slot_1 = require("./slot.cjs");
+const gesture_1 = require("./gesture.cjs");
+/** Density ladder — the Button's, so a toggle and a button line up in a row. */
+const HEIGHT = { default: 36, sm: 32, lg: 40 };
+const PAD = { default: '$3', sm: '$2.5', lg: '$4' };
+const TYPE = { default: '$3', sm: '$2', lg: '$3' };
+/** Resting fill per variant. `outline` is the one that draws its own edge. */
+const REST = {
+    default: {
+        backgroundColor: '$color3',
+        borderColor: 'transparent',
+        hoverStyle: { backgroundColor: '$color4' },
+    },
+    outline: {
+        backgroundColor: 'transparent',
+        borderColor: '$borderColor',
+        hoverStyle: { backgroundColor: '$color3' },
+    },
+};
+/**
+ * The ON treatment. gui merges `activeStyle` into hover and focus as well as
+ * rest, so the selected segment keeps its fill under the pointer — which is the
+ * whole reason this is `activeStyle` and not a conditional prop. Fill AND edge
+ * move together: one step of grey is what a segmented control has to say with,
+ * and the label brightens alongside it (see `ink` below).
+ */
+const ON = {
+    default: { backgroundColor: '$color6', borderColor: '$color7' },
+    outline: { backgroundColor: '$color5', borderColor: '$color7' },
+};
+/** The system's WCAG-checked ring — `unstyled` items lose gui's, so restore it. */
+const RING = { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' };
+const GroupContext = /* @__PURE__ */ (0, react_1.createContext)({
+    type: 'multiple',
+    selected: [],
+});
+function ToggleGroup({ type, value, defaultValue, onValueChange, orientation = 'horizontal', disableDeactivation, variant, size, disabled, children, ...props }) {
+    const [current, setCurrent] = (0, gui_1.useControllableState)({
+        prop: value,
+        defaultProp: defaultValue,
+        onChange: onValueChange,
+    });
+    const selected = current ? (Array.isArray(current) ? current : [current]) : [];
+    return ((0, jsx_runtime_1.jsx)(gui_1.ToggleGroup, { ...(0, slot_1.slot)('toggle-group'), ...{
+            type,
+            value: current,
+            onValueChange: setCurrent,
+            disableDeactivation,
+        }, role: type === 'single' ? 'radiogroup' : 'toolbar', orientation: orientation, disabled: disabled, flexDirection: orientation === 'vertical' ? 'column' : 'row', items: "center", gap: "$1", ...props, children: (0, jsx_runtime_1.jsx)(GroupContext.Provider, { value: { type, selected, variant, size, disabled }, children: children }) }));
+}
+function ToggleGroupItem({ variant, size, disabled, children, ...props }) {
+    const group = (0, react_1.useContext)(GroupContext);
+    const v = group.variant ?? variant ?? 'default';
+    const s = group.size ?? size ?? 'default';
+    const on = group.selected.includes(props.value);
+    const off = disabled || group.disabled;
+    return ((0, jsx_runtime_1.jsx)(gui_1.ToggleGroup.Item, { ...(0, slot_1.slot)('toggle-group-item'), "data-variant": v, "data-size": s, 
+        // The two Radix semantics gui drops in `single` mode. `aria-pressed` is
+        // left alone for `multiple`, where gui already sets it from the same state.
+        role: group.type === 'single' ? 'radio' : undefined, "aria-checked": group.type === 'single' ? on : undefined, unstyled: true, flexDirection: "row", items: "center", justify: "center", height: HEIGHT[s], px: PAD[s], gap: "$1.5", borderWidth: 1, rounded: "$3", select: "none", disabled: off, opacity: off ? 0.5 : 1, cursor: off ? 'not-allowed' : 'pointer', focusVisibleStyle: RING, ...REST[v], activeStyle: ON[v], ...(0, gesture_1.touch)(HEIGHT[s], 44, 'y'), ...props, children: (0, ink_1.ink)(children, undefined, {
+            size: TYPE[s],
+            fontWeight: '500',
+            color: on ? '$color12' : '$color11',
+        }) }));
+}

package/dist/backends/gui/toggle-group.d.ts

@@ -0,0 +1,57 @@
+/**
+ * ToggleGroup — the segmented control, on @hanzogui/toggle-group.
+ *
+ * gui ships the group machinery (single/multiple selection, roving arrow-key
+ * focus, `data-state="on|off"`, `aria-pressed`), so this file flattens
+ * `ToggleGroup` + `ToggleGroup.Item` into the two shadcn names, adds the
+ * `variant`/`size` recipe those names carry, and repairs three things gui does
+ * not do for itself.
+ *
+ * NO RENAMES. type / value / defaultValue / onValueChange / disabled /
+ * orientation / rovingFocus / loop / dir / variant / size are the Radix +
+ * shadcn spellings, and `variant`/`size` still resolve the shadcn way: set on
+ * the GROUP they win for every item, otherwise each item decides for itself.
+ *
+ * WORKED AROUND, 1 — SELECTION WAS UNREADABLE TO A SCREEN READER in `single`
+ * mode. Radix gives a single-select group `role="radiogroup"` and each item
+ * `role="radio"` + `aria-checked`; gui keeps `role="group"` and, for single,
+ * deletes `aria-pressed` (correct — an exclusive choice is not a pressed
+ * button) without putting the radio semantics back. So the selected segment
+ * announced as an ordinary unlabelled button with no state at all. The roles
+ * are restored here, `toolbar` + `aria-pressed` for `multiple` exactly as Radix
+ * has it, and that is why this file mirrors the value at all: `aria-checked`
+ * needs to know which item is on, and gui's value context is internal.
+ *
+ * The mirror is not a second source of truth — it is THE source. gui is handed
+ * `value` + `onValueChange` from it, i.e. driven as a controlled component, so
+ * there is exactly one place the current value lives whether the call site
+ * controls it or not.
+ *
+ * WORKED AROUND, 2 — a horizontal group laid out VERTICALLY. `ToggleGroupImpl`
+ * consumes `orientation` for the roving-focus axis and never forwards it, and
+ * its frame is a plain `View`, which stacks. Radix's was a `<div>` that call
+ * sites made a row with `flex`. The axis is restored here from the same prop.
+ *
+ * WORKED AROUND, 3 — `size` on a gui toggle means a SQUARE (its variant sets
+ * width AND height from one token), which is not what `size="sm"` means on a
+ * labelled segment. Items render `unstyled` and this file supplies the whole
+ * recipe, so the shadcn ladder (height + horizontal padding + type scale) is
+ * what the prop actually does.
+ */
+import { ToggleGroup as GuiToggleGroup } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+export type ToggleGroupVariant = 'default' | 'outline';
+export type ToggleGroupSize = 'default' | 'sm' | 'lg';
+export type ToggleGroupProps = Omit<ComponentProps<typeof GuiToggleGroup>, 'size'> & {
+    variant?: ToggleGroupVariant;
+    size?: ToggleGroupSize;
+    children?: ReactNode;
+};
+declare function ToggleGroup({ type, value, defaultValue, onValueChange, orientation, disableDeactivation, variant, size, disabled, children, ...props }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;
+export type ToggleGroupItemProps = Omit<ComponentProps<typeof GuiToggleGroup.Item>, 'size'> & {
+    variant?: ToggleGroupVariant;
+    size?: ToggleGroupSize;
+};
+declare function ToggleGroupItem({ variant, size, disabled, children, ...props }: ToggleGroupItemProps): import("react/jsx-runtime").JSX.Element;
+export { ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=toggle-group.d.ts.map

package/dist/backends/gui/toggle-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/toggle-group.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAwB,MAAM,YAAY,CAAA;AAChF,OAAO,EAA6B,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtF,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,CAAA;AACtD,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,IAAI,GAAG,IAAI,CAAA;AAyDrD,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAAE,MAAM,CAAC,GAAG;IACnF,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,iBAAS,WAAW,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,YAAY,EACZ,aAAa,EACb,WAA0B,EAC1B,mBAAmB,EACnB,OAAO,EACP,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,gBAAgB,2CAoClB;AAED,MAAM,MAAM,oBAAoB,GAAG,IAAI,CACrC,cAAc,CAAC,OAAO,cAAc,CAAC,IAAI,CAAC,EAC1C,MAAM,CACP,GAAG;IACF,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,IAAI,CAAC,EAAE,eAAe,CAAA;CACvB,CAAA;AAED,iBAAS,eAAe,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,2CA8C7F;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,CAAA"}

package/dist/backends/gui/toggle-group.js

@@ -0,0 +1,112 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * ToggleGroup — the segmented control, on @hanzogui/toggle-group.
+ *
+ * gui ships the group machinery (single/multiple selection, roving arrow-key
+ * focus, `data-state="on|off"`, `aria-pressed`), so this file flattens
+ * `ToggleGroup` + `ToggleGroup.Item` into the two shadcn names, adds the
+ * `variant`/`size` recipe those names carry, and repairs three things gui does
+ * not do for itself.
+ *
+ * NO RENAMES. type / value / defaultValue / onValueChange / disabled /
+ * orientation / rovingFocus / loop / dir / variant / size are the Radix +
+ * shadcn spellings, and `variant`/`size` still resolve the shadcn way: set on
+ * the GROUP they win for every item, otherwise each item decides for itself.
+ *
+ * WORKED AROUND, 1 — SELECTION WAS UNREADABLE TO A SCREEN READER in `single`
+ * mode. Radix gives a single-select group `role="radiogroup"` and each item
+ * `role="radio"` + `aria-checked`; gui keeps `role="group"` and, for single,
+ * deletes `aria-pressed` (correct — an exclusive choice is not a pressed
+ * button) without putting the radio semantics back. So the selected segment
+ * announced as an ordinary unlabelled button with no state at all. The roles
+ * are restored here, `toolbar` + `aria-pressed` for `multiple` exactly as Radix
+ * has it, and that is why this file mirrors the value at all: `aria-checked`
+ * needs to know which item is on, and gui's value context is internal.
+ *
+ * The mirror is not a second source of truth — it is THE source. gui is handed
+ * `value` + `onValueChange` from it, i.e. driven as a controlled component, so
+ * there is exactly one place the current value lives whether the call site
+ * controls it or not.
+ *
+ * WORKED AROUND, 2 — a horizontal group laid out VERTICALLY. `ToggleGroupImpl`
+ * consumes `orientation` for the roving-focus axis and never forwards it, and
+ * its frame is a plain `View`, which stacks. Radix's was a `<div>` that call
+ * sites made a row with `flex`. The axis is restored here from the same prop.
+ *
+ * WORKED AROUND, 3 — `size` on a gui toggle means a SQUARE (its variant sets
+ * width AND height from one token), which is not what `size="sm"` means on a
+ * labelled segment. Items render `unstyled` and this file supplies the whole
+ * recipe, so the shadcn ladder (height + horizontal padding + type scale) is
+ * what the prop actually does.
+ */
+import { ToggleGroup as GuiToggleGroup, useControllableState } from '@hanzo/gui';
+import { createContext, useContext } from 'react';
+import { ink } from './ink.js';
+import { slot } from './slot.js';
+import { touch } from './gesture.js';
+/** Density ladder — the Button's, so a toggle and a button line up in a row. */
+const HEIGHT = { default: 36, sm: 32, lg: 40 };
+const PAD = { default: '$3', sm: '$2.5', lg: '$4' };
+const TYPE = { default: '$3', sm: '$2', lg: '$3' };
+/** Resting fill per variant. `outline` is the one that draws its own edge. */
+const REST = {
+    default: {
+        backgroundColor: '$color3',
+        borderColor: 'transparent',
+        hoverStyle: { backgroundColor: '$color4' },
+    },
+    outline: {
+        backgroundColor: 'transparent',
+        borderColor: '$borderColor',
+        hoverStyle: { backgroundColor: '$color3' },
+    },
+};
+/**
+ * The ON treatment. gui merges `activeStyle` into hover and focus as well as
+ * rest, so the selected segment keeps its fill under the pointer — which is the
+ * whole reason this is `activeStyle` and not a conditional prop. Fill AND edge
+ * move together: one step of grey is what a segmented control has to say with,
+ * and the label brightens alongside it (see `ink` below).
+ */
+const ON = {
+    default: { backgroundColor: '$color6', borderColor: '$color7' },
+    outline: { backgroundColor: '$color5', borderColor: '$color7' },
+};
+/** The system's WCAG-checked ring — `unstyled` items lose gui's, so restore it. */
+const RING = { outlineColor: '$outlineColor', outlineWidth: 2, outlineStyle: 'solid' };
+const GroupContext = /* @__PURE__ */ createContext({
+    type: 'multiple',
+    selected: [],
+});
+function ToggleGroup({ type, value, defaultValue, onValueChange, orientation = 'horizontal', disableDeactivation, variant, size, disabled, children, ...props }) {
+    const [current, setCurrent] = useControllableState({
+        prop: value,
+        defaultProp: defaultValue,
+        onChange: onValueChange,
+    });
+    const selected = current ? (Array.isArray(current) ? current : [current]) : [];
+    return (_jsx(GuiToggleGroup, { ...slot('toggle-group'), ...{
+            type,
+            value: current,
+            onValueChange: setCurrent,
+            disableDeactivation,
+        }, role: type === 'single' ? 'radiogroup' : 'toolbar', orientation: orientation, disabled: disabled, flexDirection: orientation === 'vertical' ? 'column' : 'row', items: "center", gap: "$1", ...props, children: _jsx(GroupContext.Provider, { value: { type, selected, variant, size, disabled }, children: children }) }));
+}
+function ToggleGroupItem({ variant, size, disabled, children, ...props }) {
+    const group = useContext(GroupContext);
+    const v = group.variant ?? variant ?? 'default';
+    const s = group.size ?? size ?? 'default';
+    const on = group.selected.includes(props.value);
+    const off = disabled || group.disabled;
+    return (_jsx(GuiToggleGroup.Item, { ...slot('toggle-group-item'), "data-variant": v, "data-size": s, 
+        // The two Radix semantics gui drops in `single` mode. `aria-pressed` is
+        // left alone for `multiple`, where gui already sets it from the same state.
+        role: group.type === 'single' ? 'radio' : undefined, "aria-checked": group.type === 'single' ? on : undefined, unstyled: true, flexDirection: "row", items: "center", justify: "center", height: HEIGHT[s], px: PAD[s], gap: "$1.5", borderWidth: 1, rounded: "$3", select: "none", disabled: off, opacity: off ? 0.5 : 1, cursor: off ? 'not-allowed' : 'pointer', focusVisibleStyle: RING, ...REST[v], activeStyle: ON[v], ...touch(HEIGHT[s], 44, 'y'), ...props, children: ink(children, undefined, {
+            size: TYPE[s],
+            fontWeight: '500',
+            color: on ? '$color12' : '$color11',
+        }) }));
+}
+export { ToggleGroup, ToggleGroupItem };
+//# sourceMappingURL=toggle-group.js.map

package/dist/backends/gui/toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-group.js","sourceRoot":"","sources":["../../../src/backends/gui/toggle-group.tsx"],"names":[],"mappings":"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"}

package/dist/gallery.cjs

@@ -27,10 +27,10 @@ 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.jsxs)(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)(gui_1.CommandDialog, { open: true, defaultValue: "alpha", onValueChange: (v) => {
+const Gallery = () => ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', flexDirection: 'column', gap: 28, padding: 24, maxWidth: 928 }, children: [(0, jsx_runtime_1.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.jsxs)(gui_1.RadioGroup, { defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_1.RadioGroupItem, { value: "a" }), (0, jsx_runtime_1.jsx)(gui_1.RadioGroupItem, { value: "b" }), (0, jsx_runtime_1.jsx)(gui_1.RadioGroupItem, { value: "c", disabled: true })] }), (0, jsx_runtime_1.jsxs)(gui_1.RadioGroup, { orientation: "horizontal", defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_1.RadioGroupItem, { value: "a" }), (0, jsx_runtime_1.jsx)(gui_1.RadioGroupItem, { value: "b" })] })] }), (0, jsx_runtime_1.jsxs)(Section, { name: "toggle-group", children: [['default', 'outline'].map((variant) => ['default', 'sm', 'lg'].map((size) => ((0, jsx_runtime_1.jsxs)(gui_1.ToggleGroup, { type: "single", defaultValue: "a", variant: variant, size: size, children: [(0, jsx_runtime_1.jsx)(gui_1.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_1.ToggleGroupItem, { value: "b", children: "B" }), (0, jsx_runtime_1.jsx)(gui_1.ToggleGroupItem, { value: "c", disabled: true, children: "C" })] }, `${variant}-${size}`)))), (0, jsx_runtime_1.jsxs)(gui_1.ToggleGroup, { type: "multiple", defaultValue: ['a'], children: [(0, jsx_runtime_1.jsx)(gui_1.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_1.ToggleGroupItem, { value: "b", children: "B" })] }), (0, jsx_runtime_1.jsxs)(gui_1.ToggleGroup, { type: "single", orientation: "vertical", defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(gui_1.ToggleGroupItem, { value: "a", children: "A" }), (0, jsx_runtime_1.jsx)(gui_1.ToggleGroupItem, { value: "b", children: "B" })] })] }), (0, jsx_runtime_1.jsx)(Section, { name: "accordion", children: (0, jsx_runtime_1.jsxs)(gui_1.Accordion, { type: "single", collapsible: true, defaultValue: "one", children: [(0, jsx_runtime_1.jsxs)(gui_1.AccordionItem, { value: "one", children: [(0, jsx_runtime_1.jsx)(gui_1.AccordionTrigger, { children: "Accordion trigger" }), (0, jsx_runtime_1.jsx)(gui_1.AccordionContent, { children: "Accordion content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.AccordionItem, { value: "two", children: [(0, jsx_runtime_1.jsx)(gui_1.AccordionTrigger, { children: "Second trigger" }), (0, jsx_runtime_1.jsx)(gui_1.AccordionContent, { children: "Second content" })] })] }) }), (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.jsxs)(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)(gui_1.CommandDialog, { open: true, defaultValue: "alpha", onValueChange: (v) => {
                         const el = document.querySelector('[data-palette-selected]');
                         if (el)
                             el.setAttribute('data-palette-selected', v);
-                    }, children: [(0, jsx_runtime_1.jsx)(gui_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.jsxs)(gui_1.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_1.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_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.jsx)(gui_1.Grid, { 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_1.Card, { children: (0, jsx_runtime_1.jsxs)(gui_1.CardContent, { children: ["cap ", i] }) }, 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 } }) })] })] }));
+                    }, 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.jsxs)(gui_1.CommandGroup, { heading: "Palette", children: [(0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "alpha", children: "alpha" }), (0, jsx_runtime_1.jsx)(gui_1.CommandItem, { value: "beta", children: "beta" }), (0, jsx_runtime_1.jsx)(gui_1.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_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.AlertDialog, { open: true, children: (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogContent, { children: [(0, jsx_runtime_1.jsxs)(gui_1.AlertDialogHeader, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogTitle, { children: "Alert title" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogDescription, { children: "Alert description" })] }), (0, jsx_runtime_1.jsxs)(gui_1.AlertDialogFooter, { children: [(0, jsx_runtime_1.jsx)(gui_1.AlertDialogCancel, { children: "Cancel" }), (0, jsx_runtime_1.jsx)(gui_1.AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), (0, jsx_runtime_1.jsxs)(gui_1.HoverCard, { open: true, children: [(0, jsx_runtime_1.jsx)(gui_1.HoverCardTrigger, { children: "Hover card" }), (0, jsx_runtime_1.jsx)(gui_1.HoverCardContent, { children: "Hover card content" })] }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenu, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuTrigger, { children: "Context menu" }), (0, jsx_runtime_1.jsxs)(gui_1.ContextMenuContent, { children: [(0, jsx_runtime_1.jsx)(gui_1.ContextMenuLabel, { children: "Label" }), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuSeparator, {}), (0, jsx_runtime_1.jsx)(gui_1.ContextMenuItem, { children: "Item" })] })] }), (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.jsx)(gui_1.Grid, { 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_1.Card, { children: (0, jsx_runtime_1.jsxs)(gui_1.CardContent, { children: ["cap ", i] }) }, 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":"AAuEA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CAyQnB,CAAA;AAED,eAAe,OAAO,CAAA"}
+{"version":3,"file":"gallery.d.ts","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"AA4EA;;;GAGG;AACH,eAAO,MAAM,OAAO,+CAkWnB,CAAA;AAED,eAAe,OAAO,CAAA"}

package/dist/gallery.js

@@ -1,6 +1,6 @@
 '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, Grid, Section as PageSection, CardMedia, CommandDialog, } from './backends/gui/index.js';
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuTrigger, HoverCard, HoverCardContent, HoverCardTrigger, RadioGroup, RadioGroupItem, ToggleGroup, ToggleGroupItem, 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, CommandDialog, } 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. */
@@ -24,10 +24,10 @@ 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" })] }) }), _jsxs(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(CommandDialog, { open: true, defaultValue: "alpha", onValueChange: (v) => {
+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 }), _jsxs(RadioGroup, { defaultValue: "a", children: [_jsx(RadioGroupItem, { value: "a" }), _jsx(RadioGroupItem, { value: "b" }), _jsx(RadioGroupItem, { value: "c", disabled: true })] }), _jsxs(RadioGroup, { orientation: "horizontal", defaultValue: "a", children: [_jsx(RadioGroupItem, { value: "a" }), _jsx(RadioGroupItem, { value: "b" })] })] }), _jsxs(Section, { name: "toggle-group", children: [['default', 'outline'].map((variant) => ['default', 'sm', 'lg'].map((size) => (_jsxs(ToggleGroup, { type: "single", defaultValue: "a", variant: variant, size: size, children: [_jsx(ToggleGroupItem, { value: "a", children: "A" }), _jsx(ToggleGroupItem, { value: "b", children: "B" }), _jsx(ToggleGroupItem, { value: "c", disabled: true, children: "C" })] }, `${variant}-${size}`)))), _jsxs(ToggleGroup, { type: "multiple", defaultValue: ['a'], children: [_jsx(ToggleGroupItem, { value: "a", children: "A" }), _jsx(ToggleGroupItem, { value: "b", children: "B" })] }), _jsxs(ToggleGroup, { type: "single", orientation: "vertical", defaultValue: "a", children: [_jsx(ToggleGroupItem, { value: "a", children: "A" }), _jsx(ToggleGroupItem, { value: "b", children: "B" })] })] }), _jsx(Section, { name: "accordion", children: _jsxs(Accordion, { type: "single", collapsible: true, defaultValue: "one", children: [_jsxs(AccordionItem, { value: "one", children: [_jsx(AccordionTrigger, { children: "Accordion trigger" }), _jsx(AccordionContent, { children: "Accordion content" })] }), _jsxs(AccordionItem, { value: "two", children: [_jsx(AccordionTrigger, { children: "Second trigger" }), _jsx(AccordionContent, { children: "Second content" })] })] }) }), _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" })] }) }), _jsxs(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(CommandDialog, { open: true, defaultValue: "alpha", onValueChange: (v) => {
                         const el = document.querySelector('[data-palette-selected]');
                         if (el)
                             el.setAttribute('data-palette-selected', v);
-                    }, children: [_jsx(CommandInput, {}), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results" }), _jsxs(CommandGroup, { heading: "Palette", children: [_jsx(CommandItem, { value: "alpha", children: "alpha" }), _jsx(CommandItem, { value: "beta", children: "beta" }), _jsx(CommandItem, { value: "gamma", children: "gamma" })] })] })] }), _jsx("span", { "data-palette-selected": "" })] }), _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))) }), _jsx(Grid, { min: 160, max: 4, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => (_jsx(Card, { children: _jsxs(CardContent, { children: ["cap ", i] }) }, 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 } }) })] })] }));
+                    }, children: [_jsx(CommandInput, {}), _jsxs(CommandList, { children: [_jsx(CommandEmpty, { children: "No results" }), _jsxs(CommandGroup, { heading: "Palette", children: [_jsx(CommandItem, { value: "alpha", children: "alpha" }), _jsx(CommandItem, { value: "beta", children: "beta" }), _jsx(CommandItem, { value: "gamma", children: "gamma" })] })] })] }), _jsx("span", { "data-palette-selected": "" })] }), _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(AlertDialog, { open: true, children: _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Alert title" }), _jsx(AlertDialogDescription, { children: "Alert description" })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { variant: "destructive", children: "Delete" })] })] }) }), _jsxs(HoverCard, { open: true, children: [_jsx(HoverCardTrigger, { children: "Hover card" }), _jsx(HoverCardContent, { children: "Hover card content" })] }), _jsxs(ContextMenu, { children: [_jsx(ContextMenuTrigger, { children: "Context menu" }), _jsxs(ContextMenuContent, { children: [_jsx(ContextMenuLabel, { children: "Label" }), _jsx(ContextMenuSeparator, {}), _jsx(ContextMenuItem, { children: "Item" })] })] }), _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))) }), _jsx(Grid, { min: 160, max: 4, gap: "$3", style: { width: '100%' }, "data-grid": "capped", children: [0, 1, 2, 3, 4, 5].map((i) => (_jsx(Card, { children: _jsxs(CardContent, { children: ["cap ", i] }) }, 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

package/dist/gallery.js.map

@@ -1 +1 @@
-{"version":3,"file":"gallery.js","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"gallery.js","sourceRoot":"","sources":["../src/gallery.tsx"],"names":[],"mappings":"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"}

package/dist/glass.css

@@ -195,3 +195,120 @@
 [data-slot="rows"] > * + * {
   border-top: 1px solid var(--borderColor, var(--border));
 }
+
+/* ── The composer prism — the ONE ring on any Hanzo surface ──────────────────
+   The composer is where you talk to Hanzo, so it is the thing that should look
+   alive, and it earns that with MOTION and LIGHT rather than hue. Every other
+   pixel of chrome stays monochrome; there is no second exemption, and the two
+   attempts to grant one (a violet ring, then a full-wheel rainbow) each made
+   the surface wearing it the only colour in the product.
+
+   THIS LIVES HERE BECAUSE IT WAS DECLARED TWICE AND DRIFTED. hanzo.chat's
+   client/src/style.css and hanzo.app's assets/globals.css each carried a copy,
+   each calling itself "the ONE prism on any Hanzo surface". chat fixed the ring
+   to be a rim; hanzo.app's copy kept drawing a filled DISC and never got the
+   fix — invisible until a glass panel sat in it, at which point the whole
+   spectrum washed up through the composer's interior. chat also quieted the
+   halo (0.5 with a pulse -> 0.22, no pulse); hanzo.app kept the loud one. Two
+   copies of one look is how that happens, and neither app could see the other
+   was wrong.
+
+   Structure: `.hz-composer` is a 1.5px-padded host; its direct child is the
+   panel. ::before is the ring, ::after the halo. Both are MASKED to exclude the
+   panel's footprint, so the ring is a rim BY CONSTRUCTION and the panel is free
+   to be any material — opaque, glass, anything. The stops are declared once and
+   read by both, because duplicated they drift on the first palette change and
+   nobody notices which half moved. */
+
+/* `@property` is what lets a conic angle animate. Where it is unsupported the
+   ring is simply static, which is a fine floor. */
+@property --hz-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+
+:root {
+  /* One sweep, closing on the stop it opened with — a conic gradient whose
+     first and last stop differ shows a hard seam. */
+  --hz-spectrum: rgba(8, 148, 255, 0.45), rgba(201, 89, 221, 0.48),
+    rgba(255, 46, 84, 0.4), rgba(255, 144, 4, 0.4), rgba(8, 148, 255, 0.45);
+}
+
+@keyframes hzComposerSpin {
+  to {
+    --hz-angle: 360deg;
+  }
+}
+
+.hz-composer {
+  position: relative;
+  isolation: isolate;
+  padding: 1.5px;
+}
+
+/* The ring DRAWS A RING. `padding` is its thickness; the two-layer mask keeps
+   paint outside it — `content-box` is the hole, the full box the plate, and
+   `exclude` leaves the lip. */
+.hz-composer::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  padding: 1.5px;
+  border-radius: inherit;
+  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
+  animation: hzComposerSpin 10s linear infinite;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  /* After the standard shorthand: WebKit aliases `mask` onto `-webkit-mask`, so
+     declaring this first lets the shorthand reset it to `source-over` — the
+     filled disc again, on exactly the browsers too old to have `mask-composite`
+     at all. */
+  -webkit-mask-composite: xor;
+  z-index: 0;
+  pointer-events: none;
+}
+
+/* The halo lights the air AROUND the box and nothing behind it. */
+.hz-composer::after {
+  content: "";
+  position: absolute;
+  inset: -6px;
+  padding: 6px;
+  /* Concentric with the box, NOT `inherit`: the halo lives 6px outside, so an
+     inherited corner on this larger box curves too tight and reads as a second,
+     mismatched rounding just outside the panel. */
+  border-radius: calc(1.5rem + 6px);
+  background: conic-gradient(from var(--hz-angle), var(--hz-spectrum));
+  filter: blur(16px);
+  opacity: 0.22;
+  animation: hzComposerSpin 10s linear infinite;
+  -webkit-mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask:
+    linear-gradient(#000 0 0) content-box,
+    linear-gradient(#000 0 0);
+  mask-composite: exclude;
+  -webkit-mask-composite: xor;
+  z-index: -1;
+  pointer-events: none;
+}
+
+/* The panel sits above ring and halo. */
+.hz-composer > * {
+  position: relative;
+  z-index: 1;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hz-composer::before,
+  .hz-composer::after {
+    animation: none;
+  }
+}