@hanzo/ui 8.27.91 → 8.29.0

package/dist/gallery/display.cjs

@@ -0,0 +1,47 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Display = Display;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit's display parts in the gallery — tags in every hue, chips,
+ * avatars, keycaps, counts, statuses, tiles and swatches — so the sheet holds
+ * every rule they render, and the browser suites see them in both themes.
+ * twenty-ui's data-display parts (MIT, NOTICE), regular and compact.
+ */
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const data_1 = require("@hanzo/tokens/data");
+const section_1 = require("./section.cjs");
+const tag_1 = require("../backends/gui/tag.cjs");
+const tags_1 = require("../backends/gui/tags.cjs");
+const chip_1 = require("../backends/gui/chip.cjs");
+const truncated_text_1 = require("../backends/gui/truncated-text.cjs");
+const avatar_1 = require("../backends/gui/avatar.cjs");
+const avatar_group_1 = require("../backends/gui/avatar-group.cjs");
+const shortcut_1 = require("../backends/gui/shortcut.cjs");
+const kbd_1 = require("../backends/gui/kbd.cjs");
+const overflowing_list_1 = require("../backends/gui/overflowing-list.cjs");
+const badge_1 = require("../backends/gui/badge.cjs");
+const status_1 = require("../backends/gui/status.cjs");
+const icon_tile_1 = require("../backends/gui/icon-tile.cjs");
+const color_sample_1 = require("../backends/gui/color-sample.cjs");
+const stack_icon_1 = require("../backends/gui/stack-icon.cjs");
+const heading_1 = require("../backends/gui/heading.cjs");
+const label_1 = require("../backends/gui/label.cjs");
+const density_1 = require("../backends/gui/density.cjs");
+const motion_1 = require("../motion.cjs");
+const NOOP = () => { };
+const ALL = [...data_1.hues, ...data_1.neutrals];
+const TAG_VARIANTS = ['soft', 'solid', 'outline', 'ghost'];
+const CHIP_VARIANTS = ['ghost', 'soft', 'solid'];
+const AVATAR_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+const AVATAR_SHAPES = ['square', 'rounded', 'circle'];
+const BADGE_SIZES = ['xs', 'sm', 'md'];
+const PEOPLE = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Edsger Dijkstra', 'Barbara Liskov', 'Donald Knuth'];
+function Parts() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "tag", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: hue, children: hue }, `s-${hue}`))), ALL.map((hue) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: hue, variant: "solid", children: hue }, `f-${hue}`))), TAG_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "blue", variant: variant, weight: "medium", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, {}), children: variant }, variant))), (0, jsx_runtime_1.jsx)(tag_1.Tag, { variant: "outline", color: "transparent", borderStyle: "dashed", children: "No value" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "transparent", children: "transparent" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "green", onPress: NOOP, children: "pressable" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "red", disabled: true, children: "disabled" }), (0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "purple", maxW: 96, children: "A tag whose label is far too long for it" }), (0, jsx_runtime_1.jsx)(tags_1.Tags, { tags: [{ id: 'a', label: 'Lead', color: 'sky' }, { id: 'b', label: 'Plain' }], onRemove: NOOP })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "chip", children: [CHIP_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { variant: variant, label: variant }, variant))), CHIP_VARIANTS.map((variant) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { variant: variant, label: `${variant} press`, onPress: NOOP }, `p-${variant}`))), (0, jsx_runtime_1.jsx)(chip_1.Chip, { size: "md", label: "Acme", startElement: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: "Acme" }), onPress: NOOP }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { shape: "round", variant: "soft", color: "secondary", label: "Round" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { weight: "medium", label: "Medium" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Not shared", startElement: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Lock, { size: 14 }), variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "With end", endElementDivider: true, endElement: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 12 }), variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "Disabled", disabled: true, onPress: NOOP }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "A chip whose name runs past its width", maxW: 120, variant: "soft" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { href: "https://hanzo.ai", label: "Link chip" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "truncated-text", children: [(0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: "One line that is far too long for the narrow box it sits in, cut with an ellipsis", maxW: 180, size: "$2" }), (0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: 'Two lines, clamped, wrapping anywhere, with a word that is longer than everything else', lineClamp: 2, maxW: 180, size: "$2" }), (0, jsx_runtime_1.jsx)(truncated_text_1.TruncatedText, { text: "Focusable", isFocusable: true, size: "$2" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "avatar-record", children: [AVATAR_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: size, name: "Ada Lovelace" }, size))), AVATAR_SHAPES.map((shape) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: shape, name: shape }, shape))), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Grace Hopper", variant: "outline" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, {}) }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "" }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Ring", ring: true }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", name: "Pulsing", pulsing: true }), (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: "Press", onPress: NOOP }), data_1.hues.map((hue) => ((0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: hue, colorSeed: hue }, hue)))] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "avatar-group", children: [(0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)) }), (0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.slice(0, 3).map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "md", name: p, ring: true }, p)), total: 12 }), (0, jsx_runtime_1.jsx)(avatar_group_1.AvatarGroup, { avatars: PEOPLE.map((p) => (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)), overflowShape: "circle", overlap: "left" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "shortcut", children: [(0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'K'], platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'K'], platform: "other" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: [['G'], ['P']] }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Shift', 'Enter'], variant: "text", platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Mod', 'Enter'], variant: "button", platform: "mac" }), (0, jsx_runtime_1.jsx)(shortcut_1.Shortcut, { keys: ['Escape'], visibility: "desktop" }), (0, jsx_runtime_1.jsx)(kbd_1.Kbd, { variant: "cap", children: "\u2318" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "overflowing-list", children: [(0, jsx_runtime_1.jsx)(overflowing_list_1.OverflowingList, { maxW: 220, maxInlineCount: 3, showOverflowCount: "always", children: ['Lead', 'Customer', 'Partner', 'Investor', 'Press'].map((t, i) => ((0, jsx_runtime_1.jsx)(tag_1.Tag, { color: data_1.hues[i * 3], children: t }, t))) }), (0, jsx_runtime_1.jsx)(overflowing_list_1.OverflowingList, { maxW: 200, children: ['ada@hanzo.ai', 'grace@hanzo.ai', 'alan@hanzo.ai'].map((e) => ((0, jsx_runtime_1.jsx)(chip_1.Chip, { label: e, variant: "soft" }, e))) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "badge-record", children: [BADGE_SIZES.map((size) => ((0, jsx_runtime_1.jsx)(badge_1.Badge, { size: size, variant: "muted", children: size === 'xs' ? '3' : '12' }, size))), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", variant: "secondary", children: "Soon" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "md", variant: "accent", children: "New" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", variant: "inherit", children: "4" }), (0, jsx_runtime_1.jsx)(badge_1.Badge, { size: "sm", shape: "circle", variant: "muted", children: "2" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "status-record", children: [['gray', 'red', 'teal', 'orange', 'blue', 'chartreuse'].map((c) => ((0, jsx_runtime_1.jsx)(status_1.Status, { color: c, children: c }, c))), ['success', 'warning', 'error', 'info', 'default'].map((c) => ((0, jsx_runtime_1.jsx)(status_1.Status, { color: c, children: c }, c))), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "teal", loading: true, children: "Importing" }), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "green", weight: "medium", dot: false, children: "Synced" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "icon-tile", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(icon_tile_1.IconTile, { color: hue, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, {}) }, hue))), (0, jsx_runtime_1.jsx)(icon_tile_1.IconTile, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.User, {}) }), (0, jsx_runtime_1.jsx)(stack_icon_1.StackIcon, { icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 16 }), stackedIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 10 }) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "color-sample", children: [ALL.map((hue) => ((0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { colorName: hue }, hue))), (0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { colorName: "blue", variant: "circle" }), (0, jsx_runtime_1.jsx)(color_sample_1.ColorSample, { color: "#3e63dd", variant: "circle" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "heading-label", children: [(0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$2", tone: "primary", children: "Section title" }), (0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$1", tone: "secondary", children: "Group header" }), (0, jsx_runtime_1.jsx)(heading_1.Heading, { size: "$4", tone: "tertiary", children: "Dialog title" }), (0, jsx_runtime_1.jsx)(label_1.Label, { variant: "section", children: "Favorites" }), (0, jsx_runtime_1.jsx)(label_1.Label, { variant: "section-sm", children: "Workspace" }), (0, jsx_runtime_1.jsx)(motion_1.Crossfade, { isActive: true, activeIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 14 }), inactiveIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Pencil, { size: 14 }) }), (0, jsx_runtime_1.jsx)(motion_1.Crossfade, { isActive: false, activeIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Heart, { size: 14 }), inactiveIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Heart, { size: 14 }) })] })] }));
+}
+/** The parts regular, then the density-sensitive ones (chips, tags) under compact. */
+function Display() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Parts, {}), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "display-compact", children: [(0, jsx_runtime_1.jsx)(tag_1.Tag, { color: "amber", children: "compact tag" }), (0, jsx_runtime_1.jsx)(chip_1.Chip, { label: "compact chip", variant: "soft", startElement: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { size: "sm", name: "Compact" }) }), (0, jsx_runtime_1.jsx)(status_1.Status, { color: "green", children: "compact status" })] }) })] }));
+}

package/dist/gallery/display.d.ts

@@ -0,0 +1,3 @@
+/** The parts regular, then the density-sensitive ones (chips, tags) under compact. */
+export declare function Display(): import("react").JSX.Element;
+//# sourceMappingURL=display.d.ts.map

package/dist/gallery/display.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../src/gallery/display.tsx"],"names":[],"mappings":"AAmOA,sFAAsF;AACtF,wBAAgB,OAAO,gCAatB"}

package/dist/gallery/display.js

@@ -0,0 +1,45 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The record kit's display parts in the gallery — tags in every hue, chips,
+ * avatars, keycaps, counts, statuses, tiles and swatches — so the sheet holds
+ * every rule they render, and the browser suites see them in both themes.
+ * twenty-ui's data-display parts (MIT, NOTICE), regular and compact.
+ */
+import { Building2, Heart, Lock, Pencil, Plus, User, X } from '@hanzogui/lucide-icons-2';
+import { hues, neutrals } from '@hanzo/tokens/data';
+import { Section } from './section.js';
+import { Tag } from '../backends/gui/tag.js';
+import { Tags } from '../backends/gui/tags.js';
+import { Chip } from '../backends/gui/chip.js';
+import { TruncatedText } from '../backends/gui/truncated-text.js';
+import { Avatar } from '../backends/gui/avatar.js';
+import { AvatarGroup } from '../backends/gui/avatar-group.js';
+import { Shortcut } from '../backends/gui/shortcut.js';
+import { Kbd } from '../backends/gui/kbd.js';
+import { OverflowingList } from '../backends/gui/overflowing-list.js';
+import { Badge } from '../backends/gui/badge.js';
+import { Status } from '../backends/gui/status.js';
+import { IconTile } from '../backends/gui/icon-tile.js';
+import { ColorSample } from '../backends/gui/color-sample.js';
+import { StackIcon } from '../backends/gui/stack-icon.js';
+import { Heading } from '../backends/gui/heading.js';
+import { Label } from '../backends/gui/label.js';
+import { Density } from '../backends/gui/density.js';
+import { Crossfade } from '../motion.js';
+const NOOP = () => { };
+const ALL = [...hues, ...neutrals];
+const TAG_VARIANTS = ['soft', 'solid', 'outline', 'ghost'];
+const CHIP_VARIANTS = ['ghost', 'soft', 'solid'];
+const AVATAR_SIZES = ['xs', 'sm', 'md', 'lg', 'xl'];
+const AVATAR_SHAPES = ['square', 'rounded', 'circle'];
+const BADGE_SIZES = ['xs', 'sm', 'md'];
+const PEOPLE = ['Ada Lovelace', 'Grace Hopper', 'Alan Turing', 'Edsger Dijkstra', 'Barbara Liskov', 'Donald Knuth'];
+function Parts() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "tag", children: [ALL.map((hue) => (_jsx(Tag, { color: hue, children: hue }, `s-${hue}`))), ALL.map((hue) => (_jsx(Tag, { color: hue, variant: "solid", children: hue }, `f-${hue}`))), TAG_VARIANTS.map((variant) => (_jsx(Tag, { color: "blue", variant: variant, weight: "medium", startIcon: _jsx(Building2, {}), children: variant }, variant))), _jsx(Tag, { variant: "outline", color: "transparent", borderStyle: "dashed", children: "No value" }), _jsx(Tag, { color: "transparent", children: "transparent" }), _jsx(Tag, { color: "green", onPress: NOOP, children: "pressable" }), _jsx(Tag, { color: "red", disabled: true, children: "disabled" }), _jsx(Tag, { color: "purple", maxW: 96, children: "A tag whose label is far too long for it" }), _jsx(Tags, { tags: [{ id: 'a', label: 'Lead', color: 'sky' }, { id: 'b', label: 'Plain' }], onRemove: NOOP })] }), _jsxs(Section, { name: "chip", children: [CHIP_VARIANTS.map((variant) => (_jsx(Chip, { variant: variant, label: variant }, variant))), CHIP_VARIANTS.map((variant) => (_jsx(Chip, { variant: variant, label: `${variant} press`, onPress: NOOP }, `p-${variant}`))), _jsx(Chip, { size: "md", label: "Acme", startElement: _jsx(Avatar, { size: "md", name: "Acme" }), onPress: NOOP }), _jsx(Chip, { shape: "round", variant: "soft", color: "secondary", label: "Round" }), _jsx(Chip, { weight: "medium", label: "Medium" }), _jsx(Chip, { label: "Not shared", startElement: _jsx(Lock, { size: 14 }), variant: "soft" }), _jsx(Chip, { label: "With end", endElementDivider: true, endElement: _jsx(X, { size: 12 }), variant: "soft" }), _jsx(Chip, { label: "Disabled", disabled: true, onPress: NOOP }), _jsx(Chip, { label: "A chip whose name runs past its width", maxW: 120, variant: "soft" }), _jsx(Chip, { href: "https://hanzo.ai", label: "Link chip" })] }), _jsxs(Section, { name: "truncated-text", children: [_jsx(TruncatedText, { text: "One line that is far too long for the narrow box it sits in, cut with an ellipsis", maxW: 180, size: "$2" }), _jsx(TruncatedText, { text: 'Two lines, clamped, wrapping anywhere, with a word that is longer than everything else', lineClamp: 2, maxW: 180, size: "$2" }), _jsx(TruncatedText, { text: "Focusable", isFocusable: true, size: "$2" })] }), _jsxs(Section, { name: "avatar-record", children: [AVATAR_SIZES.map((size) => (_jsx(Avatar, { size: size, name: "Ada Lovelace" }, size))), AVATAR_SHAPES.map((shape) => (_jsx(Avatar, { size: "lg", shape: shape, name: shape }, shape))), _jsx(Avatar, { size: "lg", name: "Grace Hopper", variant: "outline" }), _jsx(Avatar, { size: "lg", icon: _jsx(User, {}) }), _jsx(Avatar, { size: "lg", name: "" }), _jsx(Avatar, { size: "lg", name: "Ring", ring: true }), _jsx(Avatar, { size: "lg", name: "Pulsing", pulsing: true }), _jsx(Avatar, { size: "lg", shape: "circle", name: "Press", onPress: NOOP }), hues.map((hue) => (_jsx(Avatar, { size: "md", name: hue, colorSeed: hue }, hue)))] }), _jsxs(Section, { name: "avatar-group", children: [_jsx(AvatarGroup, { avatars: PEOPLE.map((p) => _jsx(Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)) }), _jsx(AvatarGroup, { avatars: PEOPLE.slice(0, 3).map((p) => _jsx(Avatar, { size: "md", name: p, ring: true }, p)), total: 12 }), _jsx(AvatarGroup, { avatars: PEOPLE.map((p) => _jsx(Avatar, { size: "lg", shape: "circle", name: p, ring: true }, p)), overflowShape: "circle", overlap: "left" })] }), _jsxs(Section, { name: "shortcut", children: [_jsx(Shortcut, { keys: ['Mod', 'K'], platform: "mac" }), _jsx(Shortcut, { keys: ['Mod', 'K'], platform: "other" }), _jsx(Shortcut, { keys: [['G'], ['P']] }), _jsx(Shortcut, { keys: ['Shift', 'Enter'], variant: "text", platform: "mac" }), _jsx(Shortcut, { keys: ['Mod', 'Enter'], variant: "button", platform: "mac" }), _jsx(Shortcut, { keys: ['Escape'], visibility: "desktop" }), _jsx(Kbd, { variant: "cap", children: "\u2318" })] }), _jsxs(Section, { name: "overflowing-list", children: [_jsx(OverflowingList, { maxW: 220, maxInlineCount: 3, showOverflowCount: "always", children: ['Lead', 'Customer', 'Partner', 'Investor', 'Press'].map((t, i) => (_jsx(Tag, { color: hues[i * 3], children: t }, t))) }), _jsx(OverflowingList, { maxW: 200, children: ['ada@hanzo.ai', 'grace@hanzo.ai', 'alan@hanzo.ai'].map((e) => (_jsx(Chip, { label: e, variant: "soft" }, e))) })] }), _jsxs(Section, { name: "badge-record", children: [BADGE_SIZES.map((size) => (_jsx(Badge, { size: size, variant: "muted", children: size === 'xs' ? '3' : '12' }, size))), _jsx(Badge, { size: "sm", variant: "secondary", children: "Soon" }), _jsx(Badge, { size: "md", variant: "accent", children: "New" }), _jsx(Badge, { size: "sm", variant: "inherit", children: "4" }), _jsx(Badge, { size: "sm", shape: "circle", variant: "muted", children: "2" })] }), _jsxs(Section, { name: "status-record", children: [['gray', 'red', 'teal', 'orange', 'blue', 'chartreuse'].map((c) => (_jsx(Status, { color: c, children: c }, c))), ['success', 'warning', 'error', 'info', 'default'].map((c) => (_jsx(Status, { color: c, children: c }, c))), _jsx(Status, { color: "teal", loading: true, children: "Importing" }), _jsx(Status, { color: "green", weight: "medium", dot: false, children: "Synced" })] }), _jsxs(Section, { name: "icon-tile", children: [ALL.map((hue) => (_jsx(IconTile, { color: hue, icon: _jsx(Building2, {}) }, hue))), _jsx(IconTile, { icon: _jsx(User, {}) }), _jsx(StackIcon, { icon: _jsx(Building2, { size: 16 }), stackedIcon: _jsx(Plus, { size: 10 }) })] }), _jsxs(Section, { name: "color-sample", children: [ALL.map((hue) => (_jsx(ColorSample, { colorName: hue }, hue))), _jsx(ColorSample, { colorName: "blue", variant: "circle" }), _jsx(ColorSample, { color: "#3e63dd", variant: "circle" })] }), _jsxs(Section, { name: "heading-label", children: [_jsx(Heading, { size: "$2", tone: "primary", children: "Section title" }), _jsx(Heading, { size: "$1", tone: "secondary", children: "Group header" }), _jsx(Heading, { size: "$4", tone: "tertiary", children: "Dialog title" }), _jsx(Label, { variant: "section", children: "Favorites" }), _jsx(Label, { variant: "section-sm", children: "Workspace" }), _jsx(Crossfade, { isActive: true, activeIcon: _jsx(X, { size: 14 }), inactiveIcon: _jsx(Pencil, { size: 14 }) }), _jsx(Crossfade, { isActive: false, activeIcon: _jsx(Heart, { size: 14 }), inactiveIcon: _jsx(Heart, { size: 14 }) })] })] }));
+}
+/** The parts regular, then the density-sensitive ones (chips, tags) under compact. */
+export function Display() {
+    return (_jsxs(_Fragment, { children: [_jsx(Parts, {}), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "display-compact", children: [_jsx(Tag, { color: "amber", children: "compact tag" }), _jsx(Chip, { label: "compact chip", variant: "soft", startElement: _jsx(Avatar, { size: "sm", name: "Compact" }) }), _jsx(Status, { color: "green", children: "compact status" })] }) })] }));
+}
+//# sourceMappingURL=display.js.map

package/dist/gallery/display.js.map

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

package/dist/gallery/feedback.cjs

@@ -0,0 +1,38 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Feedback = Feedback;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit's feedback in the gallery: skeletons, the dot loader, both
+ * progress shapes and the ring, toasts at rest in every status, banners and
+ * callouts in every colour and layout, the boxed JSON tree, the metric row,
+ * the command block and the headed code editor (twenty-ui, MIT — NOTICE).
+ * Every variant that carries a style of its own is rendered, so its rules ship.
+ */
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const section_1 = require("./section.cjs");
+const skeleton_1 = require("../backends/gui/skeleton.cjs");
+const spinner_1 = require("../backends/gui/spinner.cjs");
+const progress_1 = require("../backends/gui/progress.cjs");
+const progress_ring_1 = require("../backends/gui/progress-ring.cjs");
+const toaster_1 = require("../backends/gui/toaster.cjs");
+const banner_1 = require("../backends/gui/banner.cjs");
+const alert_1 = require("../backends/gui/alert.cjs");
+const json_tree_1 = require("../backends/gui/json-tree.cjs");
+const snippet_1 = require("../backends/gui/snippet.cjs");
+const code_editor_1 = require("../backends/gui/code-editor.cjs");
+const button_1 = require("../backends/gui/button.cjs");
+const Fact_1 = require("../product/Fact.cjs");
+const NOOP = () => { };
+const RUN = {
+    trigger: { type: 'DATABASE_EVENT', object: 'person', fields: ['email', 'name'] },
+    output: { id: 'p_42', name: 'Ada Lovelace', score: 0.97, active: true, owner: null, tags: [] },
+};
+const MARK = (path) => (path === 'output.name' ? 'blue' : path === 'output.owner' ? 'red' : path === 'output' ? 'partial-blue' : null);
+function Feedback() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "skeleton-record", children: [(0, jsx_runtime_1.jsxs)("div", { style: { width: 240, fontSize: 13 }, children: ["Loading ", (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { width: 80 }), " records"] }), ['xs', 's', 'm', 'l', 'xl'].map((size) => ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { layout: "block", size: size, width: 120 }, size))), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { layout: "block", width: 120, animated: false })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "loader", children: [(0, jsx_runtime_1.jsx)(spinner_1.Spinner, { variant: "dot" }), (0, jsx_runtime_1.jsx)(spinner_1.Spinner, { variant: "dot", color: "var(--state-error)" }), (0, jsx_runtime_1.jsx)("div", { style: { color: 'var(--state-success)' }, children: (0, jsx_runtime_1.jsx)(spinner_1.Spinner, { variant: "dot" }) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "progress-record", children: [(0, jsx_runtime_1.jsx)(progress_1.Progress, { value: 40 }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: 40, variant: "line" }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: 1, variant: "line" }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: 60, variant: "line", ends: "round", track: true, size: "sm" }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: null }), (0, jsx_runtime_1.jsx)(progress_1.Progress, { value: null, variant: "line" }), (0, jsx_runtime_1.jsx)(progress_ring_1.ProgressRing, { value: 40, children: "40%" }), (0, jsx_runtime_1.jsx)(progress_ring_1.ProgressRing, { value: 0, size: "sm", "aria-label": "Not started" }), (0, jsx_runtime_1.jsx)(progress_ring_1.ProgressRing, { value: 100, "aria-label": "Done" }), (0, jsx_runtime_1.jsx)(progress_ring_1.ProgressRing, { value: null, "aria-label": "Working" })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "toast-record", children: [(0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Record created', type: 'default' }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Link copied', type: 'info' }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Merged 3 records', description: 'Acme, Acme Inc. and ACME', type: 'success' }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: '3 of 5 files imported', type: 'warning', cancel: { label: 'Cancel', onClick: NOOP } }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Delete failed', type: 'error', action: { label: 'Retry', onClick: NOOP } }, duration: 6000, paused: true }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'Importing people', type: 'info', data: { progress: 60 } } }), (0, jsx_runtime_1.jsx)(toaster_1.ToastCard, { t: { title: 'On a phone', type: 'success' }, phone: true })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "banner-record", children: [(0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "info", action: (0, jsx_runtime_1.jsx)(banner_1.BannerAction, { children: "Reconnect" }), children: "Your mailbox needs reconnecting." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "error", onClose: NOOP, children: "Sync failed for 2 accounts." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "neutral", children: "This is a sandbox workspace." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "success", emphasis: "soft", children: "Everything is synced." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "warning", layout: "inline", children: "This field is used by 3 workflows." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { color: "blue", layout: "inline", embedded: true, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Sparkles, { size: 16 }), children: "Fields can be renamed later." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { status: "error", layout: "compact", action: (0, jsx_runtime_1.jsx)(banner_1.BannerAction, { children: "Restore" }), children: "This record was deleted." }), (0, jsx_runtime_1.jsx)(banner_1.Banner, { variant: "warning", children: "The legacy strip, unchanged." })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "callout", children: [(0, jsx_runtime_1.jsx)(alert_1.Alert, { status: "info", title: "Code steps run in a sandbox", description: "They can read the trigger's output and the steps before them.", action: (0, jsx_runtime_1.jsx)(alert_1.CalloutAction, { children: "Learn more" }), onDismiss: NOOP }), (0, jsx_runtime_1.jsx)(alert_1.Alert, { status: "error", title: "This object cannot be deleted", description: "Two relations point at it." }), (0, jsx_runtime_1.jsx)(alert_1.Alert, { status: "success", title: "Webhook verified" }), (0, jsx_runtime_1.jsx)(alert_1.Alert, { status: "warning", title: "Rate limited", icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Bot, { size: 16 }), fullWidth: true }), (0, jsx_runtime_1.jsx)(alert_1.Alert, { color: "gray", title: "No description", icon: null }), (0, jsx_runtime_1.jsxs)(alert_1.Alert, { children: [(0, jsx_runtime_1.jsx)(alert_1.AlertTitle, { children: "The legacy alert" }), (0, jsx_runtime_1.jsx)(alert_1.AlertDescription, { children: "Unchanged when no record prop is given." })] })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "json-record", children: [(0, jsx_runtime_1.jsx)(json_tree_1.JsonTree, { data: RUN, variant: "boxed", depth: 3, title: "Run", getNodeHighlighting: MARK, onNodeValueClick: NOOP }), (0, jsx_runtime_1.jsx)(json_tree_1.JsonTree, { variant: "boxed", search: false, showCopyButton: false, entries: [
+                            { id: 'trigger', label: 'Trigger', value: RUN.trigger },
+                            { id: 'step1', label: 'Find person', value: '' },
+                        ] })] }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "metric", children: (0, jsx_runtime_1.jsxs)("div", { style: { width: 260 }, children: [(0, jsx_runtime_1.jsx)(Fact_1.Fact, { variant: "metric", label: "Context window", value: "12k / 200k", progress: 6, startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Bot, { size: 14 }) }), (0, jsx_runtime_1.jsx)(Fact_1.Fact, { variant: "metric", label: "Usage", value: "$4.20" }), (0, jsx_runtime_1.jsx)(Fact_1.Fact, { variant: "metric", label: "Indexing", value: "", progress: null })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "command-block", children: [(0, jsx_runtime_1.jsx)(snippet_1.Snippet, { variant: "command", code: 'npx hanzo mcp add\nhanzo login' }), (0, jsx_runtime_1.jsx)(snippet_1.Snippet, { variant: "command", code: "curl https://api.hanzo.ai/v1/models", actions: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "xs", variant: "ghost", children: "Run" }) })] }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "code-editor-record", children: [(0, jsx_runtime_1.jsx)(code_editor_1.CodeEditor, { title: "Code step", language: "json", defaultValue: '{\n  "a": 1\n}', actions: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "xs", variant: "ghost", children: "Test" }) }), (0, jsx_runtime_1.jsx)(code_editor_1.CodeEditor, { variant: "borderless", language: "javascript", defaultValue: "return input", showLanguageSelector: false, autoHeight: true })] })] }));
+}

package/dist/gallery/feedback.d.ts

@@ -0,0 +1,2 @@
+export declare function Feedback(): import("react").JSX.Element;
+//# sourceMappingURL=feedback.d.ts.map

package/dist/gallery/feedback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.d.ts","sourceRoot":"","sources":["../../src/gallery/feedback.tsx"],"names":[],"mappings":"AAiCA,wBAAgB,QAAQ,gCAqHvB"}

package/dist/gallery/feedback.js

@@ -0,0 +1,36 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The record kit's feedback in the gallery: skeletons, the dot loader, both
+ * progress shapes and the ring, toasts at rest in every status, banners and
+ * callouts in every colour and layout, the boxed JSON tree, the metric row,
+ * the command block and the headed code editor (twenty-ui, MIT — NOTICE).
+ * Every variant that carries a style of its own is rendered, so its rules ship.
+ */
+import { Bot, Sparkles } from '@hanzogui/lucide-icons-2';
+import { Section } from './section.js';
+import { Skeleton } from '../backends/gui/skeleton.js';
+import { Spinner } from '../backends/gui/spinner.js';
+import { Progress } from '../backends/gui/progress.js';
+import { ProgressRing } from '../backends/gui/progress-ring.js';
+import { ToastCard } from '../backends/gui/toaster.js';
+import { Banner, BannerAction } from '../backends/gui/banner.js';
+import { Alert, AlertDescription, AlertTitle, CalloutAction } from '../backends/gui/alert.js';
+import { JsonTree } from '../backends/gui/json-tree.js';
+import { Snippet } from '../backends/gui/snippet.js';
+import { CodeEditor } from '../backends/gui/code-editor.js';
+import { Button } from '../backends/gui/button.js';
+import { Fact } from '../product/Fact.js';
+const NOOP = () => { };
+const RUN = {
+    trigger: { type: 'DATABASE_EVENT', object: 'person', fields: ['email', 'name'] },
+    output: { id: 'p_42', name: 'Ada Lovelace', score: 0.97, active: true, owner: null, tags: [] },
+};
+const MARK = (path) => (path === 'output.name' ? 'blue' : path === 'output.owner' ? 'red' : path === 'output' ? 'partial-blue' : null);
+export function Feedback() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "skeleton-record", children: [_jsxs("div", { style: { width: 240, fontSize: 13 }, children: ["Loading ", _jsx(Skeleton, { width: 80 }), " records"] }), ['xs', 's', 'm', 'l', 'xl'].map((size) => (_jsx(Skeleton, { layout: "block", size: size, width: 120 }, size))), _jsx(Skeleton, { layout: "block", width: 120, animated: false })] }), _jsxs(Section, { name: "loader", children: [_jsx(Spinner, { variant: "dot" }), _jsx(Spinner, { variant: "dot", color: "var(--state-error)" }), _jsx("div", { style: { color: 'var(--state-success)' }, children: _jsx(Spinner, { variant: "dot" }) })] }), _jsxs(Section, { name: "progress-record", children: [_jsx(Progress, { value: 40 }), _jsx(Progress, { value: 40, variant: "line" }), _jsx(Progress, { value: 1, variant: "line" }), _jsx(Progress, { value: 60, variant: "line", ends: "round", track: true, size: "sm" }), _jsx(Progress, { value: null }), _jsx(Progress, { value: null, variant: "line" }), _jsx(ProgressRing, { value: 40, children: "40%" }), _jsx(ProgressRing, { value: 0, size: "sm", "aria-label": "Not started" }), _jsx(ProgressRing, { value: 100, "aria-label": "Done" }), _jsx(ProgressRing, { value: null, "aria-label": "Working" })] }), _jsxs(Section, { name: "toast-record", children: [_jsx(ToastCard, { t: { title: 'Record created', type: 'default' }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: 'Link copied', type: 'info' }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: 'Merged 3 records', description: 'Acme, Acme Inc. and ACME', type: 'success' }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: '3 of 5 files imported', type: 'warning', cancel: { label: 'Cancel', onClick: NOOP } }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: 'Delete failed', type: 'error', action: { label: 'Retry', onClick: NOOP } }, duration: 6000, paused: true }), _jsx(ToastCard, { t: { title: 'Importing people', type: 'info', data: { progress: 60 } } }), _jsx(ToastCard, { t: { title: 'On a phone', type: 'success' }, phone: true })] }), _jsxs(Section, { name: "banner-record", children: [_jsx(Banner, { status: "info", action: _jsx(BannerAction, { children: "Reconnect" }), children: "Your mailbox needs reconnecting." }), _jsx(Banner, { status: "error", onClose: NOOP, children: "Sync failed for 2 accounts." }), _jsx(Banner, { status: "neutral", children: "This is a sandbox workspace." }), _jsx(Banner, { status: "success", emphasis: "soft", children: "Everything is synced." }), _jsx(Banner, { status: "warning", layout: "inline", children: "This field is used by 3 workflows." }), _jsx(Banner, { color: "blue", layout: "inline", embedded: true, icon: _jsx(Sparkles, { size: 16 }), children: "Fields can be renamed later." }), _jsx(Banner, { status: "error", layout: "compact", action: _jsx(BannerAction, { children: "Restore" }), children: "This record was deleted." }), _jsx(Banner, { variant: "warning", children: "The legacy strip, unchanged." })] }), _jsxs(Section, { name: "callout", children: [_jsx(Alert, { status: "info", title: "Code steps run in a sandbox", description: "They can read the trigger's output and the steps before them.", action: _jsx(CalloutAction, { children: "Learn more" }), onDismiss: NOOP }), _jsx(Alert, { status: "error", title: "This object cannot be deleted", description: "Two relations point at it." }), _jsx(Alert, { status: "success", title: "Webhook verified" }), _jsx(Alert, { status: "warning", title: "Rate limited", icon: _jsx(Bot, { size: 16 }), fullWidth: true }), _jsx(Alert, { color: "gray", title: "No description", icon: null }), _jsxs(Alert, { children: [_jsx(AlertTitle, { children: "The legacy alert" }), _jsx(AlertDescription, { children: "Unchanged when no record prop is given." })] })] }), _jsxs(Section, { name: "json-record", children: [_jsx(JsonTree, { data: RUN, variant: "boxed", depth: 3, title: "Run", getNodeHighlighting: MARK, onNodeValueClick: NOOP }), _jsx(JsonTree, { variant: "boxed", search: false, showCopyButton: false, entries: [
+                            { id: 'trigger', label: 'Trigger', value: RUN.trigger },
+                            { id: 'step1', label: 'Find person', value: '' },
+                        ] })] }), _jsx(Section, { name: "metric", children: _jsxs("div", { style: { width: 260 }, children: [_jsx(Fact, { variant: "metric", label: "Context window", value: "12k / 200k", progress: 6, startIcon: _jsx(Bot, { size: 14 }) }), _jsx(Fact, { variant: "metric", label: "Usage", value: "$4.20" }), _jsx(Fact, { variant: "metric", label: "Indexing", value: "", progress: null })] }) }), _jsxs(Section, { name: "command-block", children: [_jsx(Snippet, { variant: "command", code: 'npx hanzo mcp add\nhanzo login' }), _jsx(Snippet, { variant: "command", code: "curl https://api.hanzo.ai/v1/models", actions: _jsx(Button, { size: "xs", variant: "ghost", children: "Run" }) })] }), _jsxs(Section, { name: "code-editor-record", children: [_jsx(CodeEditor, { title: "Code step", language: "json", defaultValue: '{\n  "a": 1\n}', actions: _jsx(Button, { size: "xs", variant: "ghost", children: "Test" }) }), _jsx(CodeEditor, { variant: "borderless", language: "javascript", defaultValue: "return input", showLanguageSelector: false, autoHeight: true })] })] }));
+}
+//# sourceMappingURL=feedback.js.map

package/dist/gallery/feedback.js.map

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

package/dist/gallery/fields.cjs

@@ -0,0 +1,53 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FieldsGallery = FieldsGallery;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The field controls of the record kit — Field, Textarea, Select, Picker,
+ * Checkbox, Radio, ChoiceCard, Switch, SearchInput and Stepper — in every look,
+ * size and state that carries its own style, regular and compact. Part of the
+ * one gallery (records.tsx renders it).
+ */
+const react_1 = require("react");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const section_1 = require("./section.cjs");
+const density_1 = require("../backends/gui/density.cjs");
+const button_1 = require("../backends/gui/button.cjs");
+const input_1 = require("../backends/gui/input.cjs");
+const textarea_1 = require("../backends/gui/textarea.cjs");
+const checkbox_1 = require("../backends/gui/checkbox.cjs");
+const radio_group_1 = require("../backends/gui/radio-group.cjs");
+const choice_1 = require("../backends/gui/choice.cjs");
+const switch_1 = require("../backends/gui/switch.cjs");
+const stepper_1 = require("../backends/gui/stepper.cjs");
+const select_1 = require("../backends/gui/select.cjs");
+const field_1 = require("../backends/gui/field.cjs");
+const Filters_1 = require("../product/Filters.cjs");
+const NOOP = () => { };
+/** Every record checkbox look, unchecked / checked / indeterminate / disabled / disabled-checked. */
+const LOOKS = [
+    { variant: 'solid' },
+    { variant: 'outline' },
+    { variant: 'soft' },
+    { variant: 'solid', size: 'md' },
+    { variant: 'solid', shape: 'round' },
+    { variant: 'solid', color: 'success' },
+    { variant: 'solid', color: 'warning' },
+    { variant: 'solid', hoverable: false },
+];
+const STATES = [
+    { checked: false },
+    { checked: true },
+    { checked: 'indeterminate' },
+    { checked: false, disabled: true },
+    { checked: true, disabled: true },
+];
+function Fields() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(field_1.Field, { children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "g-name", children: "Name" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "g-name", placeholder: "Ada Lovelace" }), (0, jsx_runtime_1.jsx)(field_1.FieldDescription, { children: "Shown on the record." })] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { invalid: true, children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "g-mail", children: "Email" }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { id: "g-mail", placeholder: "ada@" }), (0, jsx_runtime_1.jsx)(field_1.FieldError, { children: "Enter a valid address." })] }), (0, jsx_runtime_1.jsxs)(field_1.Field, { invalid: false, children: [(0, jsx_runtime_1.jsx)(field_1.FieldLabel, { htmlFor: "g-ok", children: "Domain" }), (0, jsx_runtime_1.jsx)(input_1.Input, { id: "g-ok", placeholder: "ada.dev" }), (0, jsx_runtime_1.jsx)(field_1.FieldError, { children: "Hidden: the field says it is valid." })] })] }));
+}
+function FieldsGallery() {
+    const [n, setN] = (0, react_1.useState)(2);
+    const [q, setQ] = (0, react_1.useState)('');
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(section_1.Section, { name: "field-record", children: [(0, jsx_runtime_1.jsx)(Fields, {}), (0, jsx_runtime_1.jsxs)(field_1.FieldSet, { children: [(0, jsx_runtime_1.jsx)(field_1.FieldLegend, { children: "Profile" }), (0, jsx_runtime_1.jsx)(field_1.FieldLegend, { variant: "label", children: "Notifications" })] }), (0, jsx_runtime_1.jsx)(field_1.FieldError, { errors: [{ message: 'Too short.' }, { message: 'Must include a number.' }] })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsx)(section_1.Section, { name: "field-compact", children: (0, jsx_runtime_1.jsx)(Fields, {}) }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "textarea-record", children: [(0, jsx_runtime_1.jsx)(textarea_1.Textarea, { size: "sm", placeholder: "sm" }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { size: "xs", placeholder: "xs" }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { size: "sm", maxRows: 4, placeholder: "maxRows 4", defaultValue: 'one\ntwo\nthree\nfour\nfive\nsix' }), (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { size: "sm", "aria-invalid": true, placeholder: "Invalid" })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsx)(section_1.Section, { name: "textarea-compact", children: (0, jsx_runtime_1.jsx)(textarea_1.Textarea, { placeholder: "Compact" }) }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "select-record", children: [(0, jsx_runtime_1.jsxs)(select_1.Select, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { size: "sm", children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "sm" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "a", children: "A" }) })] }), (0, jsx_runtime_1.jsxs)(select_1.Select, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { size: "xs", children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "xs" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "a", children: "A" }) })] }), (0, jsx_runtime_1.jsxs)(select_1.Select, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { size: "sm", "aria-invalid": true, children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "Invalid" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "a", children: "A" }) })] }), (0, jsx_runtime_1.jsx)(select_1.Picker, { size: "sm", "aria-label": "Picker sm", defaultValue: "a", children: (0, jsx_runtime_1.jsx)("option", { value: "a", children: "Picker sm" }) }), (0, jsx_runtime_1.jsx)(select_1.Picker, { size: "xs", "aria-label": "Picker xs", defaultValue: "a", children: (0, jsx_runtime_1.jsx)("option", { value: "a", children: "Picker xs" }) })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "select-compact", children: [(0, jsx_runtime_1.jsxs)(select_1.Select, { open: true, children: [(0, jsx_runtime_1.jsx)(select_1.SelectTrigger, { children: (0, jsx_runtime_1.jsx)(select_1.SelectValue, { placeholder: "Stage" }) }), (0, jsx_runtime_1.jsx)(select_1.SelectContent, { children: (0, jsx_runtime_1.jsxs)(select_1.SelectGroup, { children: [(0, jsx_runtime_1.jsx)(select_1.SelectLabel, { children: "Stages" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "lead", children: "Lead" }), (0, jsx_runtime_1.jsx)(select_1.SelectItem, { value: "won", children: "Won" })] }) })] }), (0, jsx_runtime_1.jsx)(select_1.Picker, { "aria-label": "Compact picker", defaultValue: "a", children: (0, jsx_runtime_1.jsx)("option", { value: "a", children: "Compact picker" }) })] }) }), (0, jsx_runtime_1.jsx)(section_1.Section, { name: "checkbox-record", children: LOOKS.map((look, i) => STATES.map((state, j) => (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": `look ${i} state ${j}`, ...look, ...state }, `${i}-${j}`))) }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "checkbox-compact", children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "compact" }), (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { "aria-label": "compact checked", checked: true })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "radio-record", children: [(0, jsx_runtime_1.jsxs)(radio_group_1.RadioGroup, { defaultValue: "b", children: [(0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "sm", value: "a", "aria-label": "sm a" }), (0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "sm", value: "b", "aria-label": "sm b" }), (0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "sm", value: "c", "aria-label": "sm c", disabled: true })] }), (0, jsx_runtime_1.jsxs)(radio_group_1.RadioGroup, { defaultValue: "a", orientation: "horizontal", children: [(0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "md", value: "a", "aria-label": "md a" }), (0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { size: "md", value: "b", "aria-label": "md b" })] }), (0, jsx_runtime_1.jsxs)(choice_1.ChoiceGroup, { label: "Visibility", children: [(0, jsx_runtime_1.jsx)(choice_1.ChoiceCard, { indicator: true, selected: true, onSelect: NOOP, children: "Everything" }), (0, jsx_runtime_1.jsx)(choice_1.ChoiceCard, { indicator: true, selected: false, onSelect: NOOP, children: "Subject only" })] })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "radio-compact", children: [(0, jsx_runtime_1.jsxs)(radio_group_1.RadioGroup, { defaultValue: "a", children: [(0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { value: "a", "aria-label": "compact a" }), (0, jsx_runtime_1.jsx)(radio_group_1.RadioGroupItem, { value: "b", "aria-label": "compact b" })] }), (0, jsx_runtime_1.jsxs)(choice_1.ChoiceGroup, { label: "Open records in", children: [(0, jsx_runtime_1.jsx)(choice_1.ChoiceCard, { indicator: true, selected: true, onSelect: NOOP, children: "Side panel" }), (0, jsx_runtime_1.jsx)(choice_1.ChoiceCard, { indicator: true, selected: false, onSelect: NOOP, children: "Record page" })] })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "switch-record", children: [['md', 'sm'].map((size) => ((0, jsx_runtime_1.jsx)(switch_1.Switch, { size: size, "aria-label": size }, size))), ['md', 'sm'].map((size) => ((0, jsx_runtime_1.jsx)(switch_1.Switch, { size: size, checked: true, "aria-label": `${size} on` }, `${size}-on`))), (0, jsx_runtime_1.jsx)(switch_1.Switch, { size: "sm", disabled: true, "aria-label": "sm disabled" })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "switch-compact", children: [(0, jsx_runtime_1.jsx)(switch_1.Switch, { "aria-label": "compact" }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: true, "aria-label": "compact on" })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "search-record", children: [(0, jsx_runtime_1.jsx)(Filters_1.SearchInput, { value: q, onChange: setQ, placeholder: "Search objects" }), (0, jsx_runtime_1.jsx)(Filters_1.SearchInput, { value: q, onChange: setQ, size: "sm", placeholder: "Search fields", actions: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "outline", startIcon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, {}), children: "Add field" }) })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsx)(section_1.Section, { name: "search-compact", children: (0, jsx_runtime_1.jsx)(Filters_1.SearchInput, { value: q, onChange: setQ, placeholder: "Search members" }) }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "stepper-record", children: [(0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Decimals", value: n, onChange: setN, min: 0, max: 100, editable: true }), (0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Maximum values", value: 1, onChange: NOOP, min: 1, readOnly: true, editable: true })] }), (0, jsx_runtime_1.jsx)(density_1.Density, { value: "compact", children: (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "stepper-compact", children: [(0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Decimals", value: n, onChange: setN, min: 0, max: 100 }), (0, jsx_runtime_1.jsx)(stepper_1.Stepper, { label: "Amount", value: 12500.5, onChange: NOOP, step: 0.5, decimals: 2 })] }) })] }));
+}

package/dist/gallery/fields.d.ts

@@ -0,0 +1,2 @@
+export declare function FieldsGallery(): import("react").JSX.Element;
+//# sourceMappingURL=fields.d.ts.map

package/dist/gallery/fields.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fields.d.ts","sourceRoot":"","sources":["../../src/gallery/fields.tsx"],"names":[],"mappings":"AAoFA,wBAAgB,aAAa,gCAmL5B"}

package/dist/gallery/fields.js

@@ -0,0 +1,51 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The field controls of the record kit — Field, Textarea, Select, Picker,
+ * Checkbox, Radio, ChoiceCard, Switch, SearchInput and Stepper — in every look,
+ * size and state that carries its own style, regular and compact. Part of the
+ * one gallery (records.tsx renders it).
+ */
+import { useState } from 'react';
+import { Plus } from '@hanzogui/lucide-icons-2';
+import { Section } from './section.js';
+import { Density } from '../backends/gui/density.js';
+import { Button } from '../backends/gui/button.js';
+import { Input } from '../backends/gui/input.js';
+import { Textarea } from '../backends/gui/textarea.js';
+import { Checkbox } from '../backends/gui/checkbox.js';
+import { RadioGroup, RadioGroupItem } from '../backends/gui/radio-group.js';
+import { ChoiceCard, ChoiceGroup } from '../backends/gui/choice.js';
+import { Switch } from '../backends/gui/switch.js';
+import { Stepper } from '../backends/gui/stepper.js';
+import { Picker, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, } from '../backends/gui/select.js';
+import { Field, FieldDescription, FieldError, FieldLabel, FieldLegend, FieldSet, } from '../backends/gui/field.js';
+import { SearchInput } from '../product/Filters.js';
+const NOOP = () => { };
+/** Every record checkbox look, unchecked / checked / indeterminate / disabled / disabled-checked. */
+const LOOKS = [
+    { variant: 'solid' },
+    { variant: 'outline' },
+    { variant: 'soft' },
+    { variant: 'solid', size: 'md' },
+    { variant: 'solid', shape: 'round' },
+    { variant: 'solid', color: 'success' },
+    { variant: 'solid', color: 'warning' },
+    { variant: 'solid', hoverable: false },
+];
+const STATES = [
+    { checked: false },
+    { checked: true },
+    { checked: 'indeterminate' },
+    { checked: false, disabled: true },
+    { checked: true, disabled: true },
+];
+function Fields() {
+    return (_jsxs(_Fragment, { children: [_jsxs(Field, { children: [_jsx(FieldLabel, { htmlFor: "g-name", children: "Name" }), _jsx(Input, { id: "g-name", placeholder: "Ada Lovelace" }), _jsx(FieldDescription, { children: "Shown on the record." })] }), _jsxs(Field, { invalid: true, children: [_jsx(FieldLabel, { htmlFor: "g-mail", children: "Email" }), _jsx(Textarea, { id: "g-mail", placeholder: "ada@" }), _jsx(FieldError, { children: "Enter a valid address." })] }), _jsxs(Field, { invalid: false, children: [_jsx(FieldLabel, { htmlFor: "g-ok", children: "Domain" }), _jsx(Input, { id: "g-ok", placeholder: "ada.dev" }), _jsx(FieldError, { children: "Hidden: the field says it is valid." })] })] }));
+}
+export function FieldsGallery() {
+    const [n, setN] = useState(2);
+    const [q, setQ] = useState('');
+    return (_jsxs(_Fragment, { children: [_jsxs(Section, { name: "field-record", children: [_jsx(Fields, {}), _jsxs(FieldSet, { children: [_jsx(FieldLegend, { children: "Profile" }), _jsx(FieldLegend, { variant: "label", children: "Notifications" })] }), _jsx(FieldError, { errors: [{ message: 'Too short.' }, { message: 'Must include a number.' }] })] }), _jsx(Density, { value: "compact", children: _jsx(Section, { name: "field-compact", children: _jsx(Fields, {}) }) }), _jsxs(Section, { name: "textarea-record", children: [_jsx(Textarea, { size: "sm", placeholder: "sm" }), _jsx(Textarea, { size: "xs", placeholder: "xs" }), _jsx(Textarea, { size: "sm", maxRows: 4, placeholder: "maxRows 4", defaultValue: 'one\ntwo\nthree\nfour\nfive\nsix' }), _jsx(Textarea, { size: "sm", "aria-invalid": true, placeholder: "Invalid" })] }), _jsx(Density, { value: "compact", children: _jsx(Section, { name: "textarea-compact", children: _jsx(Textarea, { placeholder: "Compact" }) }) }), _jsxs(Section, { name: "select-record", children: [_jsxs(Select, { children: [_jsx(SelectTrigger, { size: "sm", children: _jsx(SelectValue, { placeholder: "sm" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "a", children: "A" }) })] }), _jsxs(Select, { children: [_jsx(SelectTrigger, { size: "xs", children: _jsx(SelectValue, { placeholder: "xs" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "a", children: "A" }) })] }), _jsxs(Select, { children: [_jsx(SelectTrigger, { size: "sm", "aria-invalid": true, children: _jsx(SelectValue, { placeholder: "Invalid" }) }), _jsx(SelectContent, { children: _jsx(SelectItem, { value: "a", children: "A" }) })] }), _jsx(Picker, { size: "sm", "aria-label": "Picker sm", defaultValue: "a", children: _jsx("option", { value: "a", children: "Picker sm" }) }), _jsx(Picker, { size: "xs", "aria-label": "Picker xs", defaultValue: "a", children: _jsx("option", { value: "a", children: "Picker xs" }) })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "select-compact", children: [_jsxs(Select, { open: true, children: [_jsx(SelectTrigger, { children: _jsx(SelectValue, { placeholder: "Stage" }) }), _jsx(SelectContent, { children: _jsxs(SelectGroup, { children: [_jsx(SelectLabel, { children: "Stages" }), _jsx(SelectItem, { value: "lead", children: "Lead" }), _jsx(SelectItem, { value: "won", children: "Won" })] }) })] }), _jsx(Picker, { "aria-label": "Compact picker", defaultValue: "a", children: _jsx("option", { value: "a", children: "Compact picker" }) })] }) }), _jsx(Section, { name: "checkbox-record", children: LOOKS.map((look, i) => STATES.map((state, j) => _jsx(Checkbox, { "aria-label": `look ${i} state ${j}`, ...look, ...state }, `${i}-${j}`))) }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "checkbox-compact", children: [_jsx(Checkbox, { "aria-label": "compact" }), _jsx(Checkbox, { "aria-label": "compact checked", checked: true })] }) }), _jsxs(Section, { name: "radio-record", children: [_jsxs(RadioGroup, { defaultValue: "b", children: [_jsx(RadioGroupItem, { size: "sm", value: "a", "aria-label": "sm a" }), _jsx(RadioGroupItem, { size: "sm", value: "b", "aria-label": "sm b" }), _jsx(RadioGroupItem, { size: "sm", value: "c", "aria-label": "sm c", disabled: true })] }), _jsxs(RadioGroup, { defaultValue: "a", orientation: "horizontal", children: [_jsx(RadioGroupItem, { size: "md", value: "a", "aria-label": "md a" }), _jsx(RadioGroupItem, { size: "md", value: "b", "aria-label": "md b" })] }), _jsxs(ChoiceGroup, { label: "Visibility", children: [_jsx(ChoiceCard, { indicator: true, selected: true, onSelect: NOOP, children: "Everything" }), _jsx(ChoiceCard, { indicator: true, selected: false, onSelect: NOOP, children: "Subject only" })] })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "radio-compact", children: [_jsxs(RadioGroup, { defaultValue: "a", children: [_jsx(RadioGroupItem, { value: "a", "aria-label": "compact a" }), _jsx(RadioGroupItem, { value: "b", "aria-label": "compact b" })] }), _jsxs(ChoiceGroup, { label: "Open records in", children: [_jsx(ChoiceCard, { indicator: true, selected: true, onSelect: NOOP, children: "Side panel" }), _jsx(ChoiceCard, { indicator: true, selected: false, onSelect: NOOP, children: "Record page" })] })] }) }), _jsxs(Section, { name: "switch-record", children: [['md', 'sm'].map((size) => (_jsx(Switch, { size: size, "aria-label": size }, size))), ['md', 'sm'].map((size) => (_jsx(Switch, { size: size, checked: true, "aria-label": `${size} on` }, `${size}-on`))), _jsx(Switch, { size: "sm", disabled: true, "aria-label": "sm disabled" })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "switch-compact", children: [_jsx(Switch, { "aria-label": "compact" }), _jsx(Switch, { checked: true, "aria-label": "compact on" })] }) }), _jsxs(Section, { name: "search-record", children: [_jsx(SearchInput, { value: q, onChange: setQ, placeholder: "Search objects" }), _jsx(SearchInput, { value: q, onChange: setQ, size: "sm", placeholder: "Search fields", actions: _jsx(Button, { size: "sm", variant: "outline", startIcon: _jsx(Plus, {}), children: "Add field" }) })] }), _jsx(Density, { value: "compact", children: _jsx(Section, { name: "search-compact", children: _jsx(SearchInput, { value: q, onChange: setQ, placeholder: "Search members" }) }) }), _jsxs(Section, { name: "stepper-record", children: [_jsx(Stepper, { label: "Decimals", value: n, onChange: setN, min: 0, max: 100, editable: true }), _jsx(Stepper, { label: "Maximum values", value: 1, onChange: NOOP, min: 1, readOnly: true, editable: true })] }), _jsx(Density, { value: "compact", children: _jsxs(Section, { name: "stepper-compact", children: [_jsx(Stepper, { label: "Decimals", value: n, onChange: setN, min: 0, max: 100 }), _jsx(Stepper, { label: "Amount", value: 12500.5, onChange: NOOP, step: 0.5, decimals: 2 })] }) })] }));
+}
+//# sourceMappingURL=fields.js.map

package/dist/gallery/fields.js.map

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

package/dist/gallery/frames.cjs

@@ -0,0 +1,47 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Frames = Frames;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * The record kit's frames in the gallery: the side panel's record frame (bar,
+ * body, footer) at its 400px width, and the command menu as a pane page
+ * (twenty-ui's side panel and command menu frames, MIT, NOTICE).
+ *
+ * The frame is drawn from its parts rather than through an open DetailPane: a
+ * pane opens through its API, which a server render never calls, and the parts
+ * are exactly what an open docked pane draws. Every field here passes
+ * `autoFocus={false}`, as the menus do, so the page is not pulled to it on load.
+ */
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const gui_1 = require("@hanzo/gui");
+const section_1 = require("./section.cjs");
+const button_1 = require("../backends/gui/button.cjs");
+const DetailPane_1 = require("../product/DetailPane.cjs");
+const CommandMenu_1 = require("../product/CommandMenu.cjs");
+const layout_1 = require("../backends/gui/layout.cjs");
+const NOOP = () => { };
+const GROUPS = [
+    {
+        id: 'record',
+        label: 'Record',
+        icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 16 }),
+        items: [
+            { id: 'create', label: 'Create company', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Plus, { size: 16 }), contextual: 'Companies', onSelect: NOOP },
+            { id: 'copy', label: 'Copy link', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, { size: 16 }), shortcut: ['Mod', 'L'], onSelect: NOOP },
+        ],
+    },
+    {
+        id: 'go',
+        label: 'Go to',
+        icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Kanban, { size: 16 }),
+        items: [
+            { id: 'people', label: 'Go to People', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Users, { size: 16 }), shortcut: [['G'], ['P']], onSelect: NOOP },
+            { id: 'settings', label: 'Settings', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings, { size: 16 }), submenu: true, onSelect: NOOP },
+            { id: 'billing', label: 'Billing', icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Settings, { size: 16 }), disabled: true, onSelect: NOOP },
+        ],
+    },
+];
+function Frames() {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(section_1.Section, { name: "pane-record", children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { width: 400, height: 320, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: [(0, jsx_runtime_1.jsxs)(DetailPane_1.PaneBar, { actions: (0, jsx_runtime_1.jsx)(button_1.Button, { size: "icon-xs", variant: "ghost", emphasis: "subtle", "aria-label": "Copy link", children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Copy, {}) }), children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Building2, { size: 16, color: "$aside" }), (0, jsx_runtime_1.jsx)(layout_1.Text, { fontSize: "$2", fontWeight: "500", color: "$ink", numberOfLines: 1, children: "Acme Corporation" })] }), (0, jsx_runtime_1.jsx)(DetailPane_1.PaneBody, { children: (0, jsx_runtime_1.jsx)(layout_1.Text, { fontSize: "$2", color: "$aside", children: "The record's fields, timeline and notes." }) }), (0, jsx_runtime_1.jsxs)(DetailPane_1.PaneFoot, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "ghost", children: "Cancel" }), (0, jsx_runtime_1.jsx)(button_1.Button, { size: "sm", variant: "primary", children: "Save" })] })] }) }), (0, jsx_runtime_1.jsxs)(section_1.Section, { name: "command-menu", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 400, height: 360, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(CommandMenu_1.CommandMenu, { groups: GROUPS, autoFocus: false }) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: 400, height: 160, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: (0, jsx_runtime_1.jsx)(CommandMenu_1.CommandMenu, { groups: GROUPS, query: "zzzz", autoFocus: false }) })] })] }));
+}

package/dist/gallery/frames.d.ts

@@ -0,0 +1,2 @@
+export declare function Frames(): import("react").JSX.Element;
+//# sourceMappingURL=frames.d.ts.map

package/dist/gallery/frames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"frames.d.ts","sourceRoot":"","sources":["../../src/gallery/frames.tsx"],"names":[],"mappings":"AA4CA,wBAAgB,MAAM,gCA0CrB"}

package/dist/gallery/frames.js

@@ -0,0 +1,45 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The record kit's frames in the gallery: the side panel's record frame (bar,
+ * body, footer) at its 400px width, and the command menu as a pane page
+ * (twenty-ui's side panel and command menu frames, MIT, NOTICE).
+ *
+ * The frame is drawn from its parts rather than through an open DetailPane: a
+ * pane opens through its API, which a server render never calls, and the parts
+ * are exactly what an open docked pane draws. Every field here passes
+ * `autoFocus={false}`, as the menus do, so the page is not pulled to it on load.
+ */
+import { Building2, Copy, Kanban, Plus, Settings, Users } from '@hanzogui/lucide-icons-2';
+import { YStack } from '@hanzo/gui';
+import { Section } from './section.js';
+import { Button } from '../backends/gui/button.js';
+import { PaneBar, PaneBody, PaneFoot } from '../product/DetailPane.js';
+import { CommandMenu } from '../product/CommandMenu.js';
+import { Text } from '../backends/gui/layout.js';
+const NOOP = () => { };
+const GROUPS = [
+    {
+        id: 'record',
+        label: 'Record',
+        icon: _jsx(Building2, { size: 16 }),
+        items: [
+            { id: 'create', label: 'Create company', icon: _jsx(Plus, { size: 16 }), contextual: 'Companies', onSelect: NOOP },
+            { id: 'copy', label: 'Copy link', icon: _jsx(Copy, { size: 16 }), shortcut: ['Mod', 'L'], onSelect: NOOP },
+        ],
+    },
+    {
+        id: 'go',
+        label: 'Go to',
+        icon: _jsx(Kanban, { size: 16 }),
+        items: [
+            { id: 'people', label: 'Go to People', icon: _jsx(Users, { size: 16 }), shortcut: [['G'], ['P']], onSelect: NOOP },
+            { id: 'settings', label: 'Settings', icon: _jsx(Settings, { size: 16 }), submenu: true, onSelect: NOOP },
+            { id: 'billing', label: 'Billing', icon: _jsx(Settings, { size: 16 }), disabled: true, onSelect: NOOP },
+        ],
+    },
+];
+export function Frames() {
+    return (_jsxs(_Fragment, { children: [_jsx(Section, { name: "pane-record", children: _jsxs(YStack, { width: 400, height: 320, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: [_jsxs(PaneBar, { actions: _jsx(Button, { size: "icon-xs", variant: "ghost", emphasis: "subtle", "aria-label": "Copy link", children: _jsx(Copy, {}) }), children: [_jsx(Building2, { size: 16, color: "$aside" }), _jsx(Text, { fontSize: "$2", fontWeight: "500", color: "$ink", numberOfLines: 1, children: "Acme Corporation" })] }), _jsx(PaneBody, { children: _jsx(Text, { fontSize: "$2", color: "$aside", children: "The record's fields, timeline and notes." }) }), _jsxs(PaneFoot, { children: [_jsx(Button, { size: "sm", variant: "ghost", children: "Cancel" }), _jsx(Button, { size: "sm", variant: "primary", children: "Save" })] })] }) }), _jsxs(Section, { name: "command-menu", children: [_jsx(YStack, { width: 400, height: 360, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: _jsx(CommandMenu, { groups: GROUPS, autoFocus: false }) }), _jsx(YStack, { width: 400, height: 160, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: _jsx(CommandMenu, { groups: GROUPS, query: "zzzz", autoFocus: false }) })] })] }));
+}
+//# sourceMappingURL=frames.js.map

package/dist/gallery/frames.js.map

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