@hanzo/ui 8.27.19 → 8.27.22

package/dist/settings/Settings.cjs

@@ -0,0 +1,54 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Settings = Settings;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Settings — a settings page: every section listed by group, and the chosen one
+ * in a readable column.
+ *
+ *   Settings          │  General
+ *   Settings          │  ─────────────────────────
+ *    General  ◀       │  (the section, as `children`, 760px at most)
+ *    Account          │
+ *   Code              │
+ *    Environments     │
+ *
+ * From `md` up the sections are a 220px column on the left, grouped under quiet
+ * labels, the current one marked `aria-current="page"`. Below `md` that column
+ * is gone and the same sections are a row of chips over the content — every
+ * section one press away on a phone, with no drawer to open first.
+ *
+ * Presentational: which section is open comes in as `active`, a choice goes out
+ * through `onPick`, and the section itself is the host's `children` — the page
+ * never learns what a section holds. A section is its own address in the host,
+ * so it can be linked to and survives a reload.
+ *
+ * The section's own parts — heading, groups, bordered lists, fields, the quiet
+ * lines — are in `./Section`, so every section reads as one page.
+ */
+const gui_1 = require("@hanzo/gui");
+const react_1 = require("react");
+const press_1 = require("../backends/gui/press.cjs");
+const slot_1 = require("../backends/gui/slot.cjs");
+/** The nav column's width, px. */
+const NAV = 220;
+/** The content column's measure, px — a form reads badly any wider. */
+const MEASURE = 760;
+function Settings({ entries, groups, active, onPick, title = 'Settings', children, ...rest }) {
+    const id = (0, react_1.useId)();
+    const order = groups ?? [...new Set(entries.map((e) => e.group))];
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('settings'), flex: 1, minH: 0, minW: 0, ...rest, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('settings-nav'), role: "navigation", "aria-label": title, width: NAV, shrink: 0, minH: 0, borderRightWidth: 1, borderColor: "$borderColor", "$max-md": { display: 'none' }, children: (0, jsx_runtime_1.jsx)(gui_1.ScrollView, { flex: 1, minH: 0, overflowY: "auto", showsVerticalScrollIndicator: false, children: (0, jsx_runtime_1.jsxs)(gui_1.YStack, { px: "$2", py: "$4", gap: "$4", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$4", color: "$ink", px: "$2", children: title }), order.map((g, i) => {
+                                const list = entries.filter((e) => e.group === g);
+                                if (!list.length)
+                                    return null;
+                                const head = `${id}-group-${i}`;
+                                return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$0.5", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { id: head, size: "$1", color: "$soft", px: "$2", pb: "$1", children: g }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { role: "list", "aria-labelledby": head, gap: "$0.5", children: list.map((e) => {
+                                                const on = e.id === active;
+                                                return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { role: "listitem", children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('settings-entry'), ...(0, press_1.press)(() => onPick(e.id)), "aria-current": on ? 'page' : undefined, px: "$2", py: "$1.5", rounded: "$2", cursor: "pointer", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: press_1.RING, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: on ? '$ink' : '$soft', numberOfLines: 1, children: e.label }) }) }, e.id));
+                                            }) })] }, g));
+                            })] }) }) }), (0, jsx_runtime_1.jsxs)(gui_1.ScrollView, { flex: 1, minW: 0, minH: 0, overflowY: "auto", children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('settings-chips'), role: "navigation", "aria-label": title, flexWrap: "wrap", gap: "$1.5", px: "$4", pt: "$3", $md: { display: 'none' }, children: entries.map((e) => {
+                            const on = e.id === active;
+                            return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('settings-chip'), ...(0, press_1.press)(() => onPick(e.id)), "aria-current": on ? 'page' : undefined, px: "$2.5", py: "$1", rounded: "$10", cursor: "pointer", borderWidth: 1, borderColor: on ? '$ink' : '$borderColor', hoverStyle: { bg: '$hover' }, focusVisibleStyle: press_1.RING, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: on ? '$ink' : '$soft', children: e.label }) }, e.id));
+                        }) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('settings-body'), width: "100%", maxW: MEASURE, self: "center", px: "$5", py: "$6", children: children })] })] }));
+}

package/dist/settings/Settings.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Settings — a settings page: every section listed by group, and the chosen one
+ * in a readable column.
+ *
+ *   Settings          │  General
+ *   Settings          │  ─────────────────────────
+ *    General  ◀       │  (the section, as `children`, 760px at most)
+ *    Account          │
+ *   Code              │
+ *    Environments     │
+ *
+ * From `md` up the sections are a 220px column on the left, grouped under quiet
+ * labels, the current one marked `aria-current="page"`. Below `md` that column
+ * is gone and the same sections are a row of chips over the content — every
+ * section one press away on a phone, with no drawer to open first.
+ *
+ * Presentational: which section is open comes in as `active`, a choice goes out
+ * through `onPick`, and the section itself is the host's `children` — the page
+ * never learns what a section holds. A section is its own address in the host,
+ * so it can be linked to and survives a reload.
+ *
+ * The section's own parts — heading, groups, bordered lists, fields, the quiet
+ * lines — are in `./Section`, so every section reads as one page.
+ */
+import { XStack } from '@hanzo/gui';
+import { type ComponentProps, type ReactNode } from 'react';
+type Row = Omit<ComponentProps<typeof XStack>, 'children'>;
+/** One section of the page, as the nav lists it. */
+export interface Entry {
+    id: string;
+    label: string;
+    /** The group it is listed under. */
+    group: string;
+}
+export interface SettingsProps<E extends Entry = Entry> extends Row {
+    /** Every section, in the order the page lists them. */
+    entries: readonly E[];
+    /** The groups, in order. Omitted, they are the entries' own, in first-seen order. */
+    groups?: readonly string[];
+    /** The open section's id. */
+    active: E['id'];
+    onPick: (id: E['id']) => void;
+    /** The page's name — the nav's heading and its landmark name. */
+    title?: string;
+    /** The open section. */
+    children?: ReactNode;
+}
+export declare function Settings<E extends Entry>({ entries, groups, active, onPick, title, children, ...rest }: SettingsProps<E>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=Settings.d.ts.map

package/dist/settings/Settings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Settings.d.ts","sourceRoot":"","sources":["../../src/settings/Settings.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,OAAO,EAA2B,MAAM,EAAU,MAAM,YAAY,CAAA;AACpE,OAAO,EAAS,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAKlE,KAAK,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,CAAA;AAQ1D,oDAAoD;AACpD,MAAM,WAAW,KAAK;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,oCAAoC;IACpC,KAAK,EAAE,MAAM,CAAA;CACd;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,KAAK,GAAG,KAAK,CAAE,SAAQ,GAAG;IACjE,uDAAuD;IACvD,OAAO,EAAE,SAAS,CAAC,EAAE,CAAA;IACrB,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;IAC1B,6BAA6B;IAC7B,MAAM,EAAE,CAAC,CAAC,IAAI,CAAC,CAAA;IACf,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAA;IAC7B,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,wBAAgB,QAAQ,CAAC,CAAC,SAAS,KAAK,EAAE,EACxC,OAAO,EACP,MAAM,EACN,MAAM,EACN,MAAM,EACN,KAAkB,EAClB,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,aAAa,CAAC,CAAC,CAAC,+BA2GlB"}

package/dist/settings/Settings.js

@@ -0,0 +1,52 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings — a settings page: every section listed by group, and the chosen one
+ * in a readable column.
+ *
+ *   Settings          │  General
+ *   Settings          │  ─────────────────────────
+ *    General  ◀       │  (the section, as `children`, 760px at most)
+ *    Account          │
+ *   Code              │
+ *    Environments     │
+ *
+ * From `md` up the sections are a 220px column on the left, grouped under quiet
+ * labels, the current one marked `aria-current="page"`. Below `md` that column
+ * is gone and the same sections are a row of chips over the content — every
+ * section one press away on a phone, with no drawer to open first.
+ *
+ * Presentational: which section is open comes in as `active`, a choice goes out
+ * through `onPick`, and the section itself is the host's `children` — the page
+ * never learns what a section holds. A section is its own address in the host,
+ * so it can be linked to and survives a reload.
+ *
+ * The section's own parts — heading, groups, bordered lists, fields, the quiet
+ * lines — are in `./Section`, so every section reads as one page.
+ */
+import { ScrollView, SizableText, XStack, YStack } from '@hanzo/gui';
+import { useId } from 'react';
+import { press, RING } from '../backends/gui/press.js';
+import { slot } from '../backends/gui/slot.js';
+/** The nav column's width, px. */
+const NAV = 220;
+/** The content column's measure, px — a form reads badly any wider. */
+const MEASURE = 760;
+export function Settings({ entries, groups, active, onPick, title = 'Settings', children, ...rest }) {
+    const id = useId();
+    const order = groups ?? [...new Set(entries.map((e) => e.group))];
+    return (_jsxs(XStack, { ...slot('settings'), flex: 1, minH: 0, minW: 0, ...rest, children: [_jsx(YStack, { ...slot('settings-nav'), role: "navigation", "aria-label": title, width: NAV, shrink: 0, minH: 0, borderRightWidth: 1, borderColor: "$borderColor", "$max-md": { display: 'none' }, children: _jsx(ScrollView, { flex: 1, minH: 0, overflowY: "auto", showsVerticalScrollIndicator: false, children: _jsxs(YStack, { px: "$2", py: "$4", gap: "$4", children: [_jsx(SizableText, { size: "$4", color: "$ink", px: "$2", children: title }), order.map((g, i) => {
+                                const list = entries.filter((e) => e.group === g);
+                                if (!list.length)
+                                    return null;
+                                const head = `${id}-group-${i}`;
+                                return (_jsxs(YStack, { gap: "$0.5", children: [_jsx(SizableText, { id: head, size: "$1", color: "$soft", px: "$2", pb: "$1", children: g }), _jsx(YStack, { role: "list", "aria-labelledby": head, gap: "$0.5", children: list.map((e) => {
+                                                const on = e.id === active;
+                                                return (_jsx(YStack, { role: "listitem", children: _jsx(XStack, { ...slot('settings-entry'), ...press(() => onPick(e.id)), "aria-current": on ? 'page' : undefined, px: "$2", py: "$1.5", rounded: "$2", cursor: "pointer", bg: on ? '$hover' : 'transparent', hoverStyle: { bg: '$hover' }, focusVisibleStyle: RING, children: _jsx(SizableText, { size: "$2", color: on ? '$ink' : '$soft', numberOfLines: 1, children: e.label }) }) }, e.id));
+                                            }) })] }, g));
+                            })] }) }) }), _jsxs(ScrollView, { flex: 1, minW: 0, minH: 0, overflowY: "auto", children: [_jsx(XStack, { ...slot('settings-chips'), role: "navigation", "aria-label": title, flexWrap: "wrap", gap: "$1.5", px: "$4", pt: "$3", $md: { display: 'none' }, children: entries.map((e) => {
+                            const on = e.id === active;
+                            return (_jsx(XStack, { ...slot('settings-chip'), ...press(() => onPick(e.id)), "aria-current": on ? 'page' : undefined, px: "$2.5", py: "$1", rounded: "$10", cursor: "pointer", borderWidth: 1, borderColor: on ? '$ink' : '$borderColor', hoverStyle: { bg: '$hover' }, focusVisibleStyle: RING, children: _jsx(SizableText, { size: "$1", color: on ? '$ink' : '$soft', children: e.label }) }, e.id));
+                        }) }), _jsx(YStack, { ...slot('settings-body'), width: "100%", maxW: MEASURE, self: "center", px: "$5", py: "$6", children: children })] })] }));
+}
+//# sourceMappingURL=Settings.js.map

package/dist/settings/Settings.js.map

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

package/dist/settings/index.cjs

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Soft = exports.Row = exports.Once = exports.Note = exports.Heading = exports.Group = exports.Field = exports.Card = exports.Settings = void 0;
+/**
+ * @hanzo/ui/settings — a settings page, and what its sections are drawn from.
+ *
+ * `Settings` is the page: the sections grouped in a column from `md` up, a row
+ * of chips below it, and the open section in a 760px column. The section is the
+ * host's `children`, drawn from `Heading`, `Group`, `Card` + `Row`, `Field`,
+ * `Soft`, `Note` and `Once`, so every section of every surface reads as one
+ * page.
+ *
+ * Props in, callbacks out: which section is open is the host's (its address),
+ * and nothing here fetches.
+ */
+var Settings_1 = require("./Settings.cjs");
+Object.defineProperty(exports, "Settings", { enumerable: true, get: function () { return Settings_1.Settings; } });
+var Section_1 = require("./Section.cjs");
+Object.defineProperty(exports, "Card", { enumerable: true, get: function () { return Section_1.Card; } });
+Object.defineProperty(exports, "Field", { enumerable: true, get: function () { return Section_1.Field; } });
+Object.defineProperty(exports, "Group", { enumerable: true, get: function () { return Section_1.Group; } });
+Object.defineProperty(exports, "Heading", { enumerable: true, get: function () { return Section_1.Heading; } });
+Object.defineProperty(exports, "Note", { enumerable: true, get: function () { return Section_1.Note; } });
+Object.defineProperty(exports, "Once", { enumerable: true, get: function () { return Section_1.Once; } });
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return Section_1.Row; } });
+Object.defineProperty(exports, "Soft", { enumerable: true, get: function () { return Section_1.Soft; } });

package/dist/settings/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @hanzo/ui/settings — a settings page, and what its sections are drawn from.
+ *
+ * `Settings` is the page: the sections grouped in a column from `md` up, a row
+ * of chips below it, and the open section in a 760px column. The section is the
+ * host's `children`, drawn from `Heading`, `Group`, `Card` + `Row`, `Field`,
+ * `Soft`, `Note` and `Once`, so every section of every surface reads as one
+ * page.
+ *
+ * Props in, callbacks out: which section is open is the host's (its address),
+ * and nothing here fetches.
+ */
+export { Settings, type Entry, type SettingsProps } from './Settings.js';
+export { Card, Field, Group, Heading, Note, Once, Row, Soft, type GroupProps, type HeadingProps, type OnceProps, type RowProps, } from './Section.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/settings/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,QAAQ,EAAE,KAAK,KAAK,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACrE,OAAO,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,EACJ,KAAK,UAAU,EACf,KAAK,YAAY,EACjB,KAAK,SAAS,EACd,KAAK,QAAQ,GACd,MAAM,WAAW,CAAA"}

package/dist/settings/index.js

@@ -0,0 +1,15 @@
+/**
+ * @hanzo/ui/settings — a settings page, and what its sections are drawn from.
+ *
+ * `Settings` is the page: the sections grouped in a column from `md` up, a row
+ * of chips below it, and the open section in a 760px column. The section is the
+ * host's `children`, drawn from `Heading`, `Group`, `Card` + `Row`, `Field`,
+ * `Soft`, `Note` and `Once`, so every section of every surface reads as one
+ * page.
+ *
+ * Props in, callbacks out: which section is open is the host's (its address),
+ * and nothing here fetches.
+ */
+export { Settings } from './Settings.js';
+export { Card, Field, Group, Heading, Note, Once, Row, Soft, } from './Section.js';
+//# sourceMappingURL=index.js.map

package/dist/settings/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/settings/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,QAAQ,EAAkC,MAAM,YAAY,CAAA;AACrE,OAAO,EACL,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,GAAG,EACH,IAAI,GAKL,MAAM,WAAW,CAAA"}

package/dist/styles.css

@@ -3139,6 +3139,7 @@ a svg,
 :root.t_dark .t_light .t_yellow_SwitchThumb, :root.t_dark .t_light .t_yellow_Tooltip, :root.t_dark .t_light .t_yellow_accent, :root.t_light .t_yellow_SwitchThumb, :root.t_light .t_yellow_Tooltip, :root.t_light .t_yellow_accent, .tm_xxt {--accentBackground:var(--t16);--accentColor:var(--t26);--background0:var(--t1051);--background02:var(--t1036);--background04:var(--t1037);--background06:var(--t1038);--background08:var(--t1039);--color1:var(--t1050);--color2:var(--t1049);--color3:var(--t1048);--color4:var(--t595);--color5:var(--t1047);--color6:var(--t1046);--color7:var(--t1045);--color8:var(--t1044);--color9:var(--t1043);--color10:var(--t1042);--color11:var(--t1041);--color12:var(--t1040);--color0:var(--t1035);--color02:var(--t1068);--color04:var(--t1069);--color06:var(--t1070);--color08:var(--t1071);--color:var(--t1040);--colorHover:var(--t1040);--colorPress:var(--t1040);--colorFocus:var(--t1071);--background:var(--t1049);--backgroundHover:var(--t1050);--backgroundPress:var(--t1048);--backgroundFocus:var(--t1048);--backgroundActive:var(--t1049);--borderColor:var(--t595);--borderColorHover:var(--t1048);--borderColorFocus:var(--t595);--borderColorPress:var(--t1047);--placeholderColor:var(--t1043);--colorTransparent:var(--t1035);--color01:var(--t1056);--color0075:var(--t1057);--color005:var(--t1058);--color0025:var(--t1059);--color002:var(--t1060);--color001:var(--t1061);--background01:var(--t1062);--background0075:var(--t1063);--background005:var(--t1064);--background0025:var(--t1065);--background002:var(--t1066);--background001:var(--t1067);--outlineColor:var(--t739);}
 .t_light_yellow_SwitchThumb ::selection, .t_light_yellow_Tooltip ::selection, .t_light_yellow_accent ::selection{background:var(--color5);color:var(--color11)}
 :root ._WebkitBoxOrient-vertical{-webkit-box-orient:vertical;}
+:root ._WebkitLineClamp-2{-webkit-line-clamp:2;}
 :root ._WebkitLineClamp-3{-webkit-line-clamp:3;}
 :root ._aspectRatio-1--6{aspect-ratio:1.6;}
 :root ._aspectRatio-1--77777777771627090080{aspect-ratio:1.7777777777777777;}
@@ -3201,6 +3202,7 @@ a svg,
 @media (hover) {:root:root  ._bg-0hover-panel:hover{background-color:var(--panel) !important;}}
 @media (hover) {:root:root  ._bg-0hover-raised:hover{background-color:var(--raised) !important;}}
 @media (hover) {:root:root  ._bg-0hover-rim:hover{background-color:var(--rim) !important;}}
+@media (hover) {:root:root  ._bg-0hover-transparent:hover{background-color:transparent !important;}}
 :root ._bg-accentBackg108704142{background-color:var(--accentBackground);}
 :root ._bg-background{background-color:var(--background);}
 :root ._bg-backgroundA94988999{background-color:var(--backgroundActive);}
@@ -3238,6 +3240,8 @@ a svg,
 @media (hover) {:root:root  ._borderBottomColor-0hover-borderColor69916956._borderBottomColor-0hover-borderColor69916956:hover{border-bottom-color:var(--borderColorHover) !important;}}
 @media (hover) {:root:root  ._borderBottomColor-0hover-bound._borderBottomColor-0hover-bound:hover{border-bottom-color:var(--bound) !important;}}
 @media (hover) {:root:root  ._borderBottomColor-0hover-dim._borderBottomColor-0hover-dim:hover{border-bottom-color:var(--dim) !important;}}
+@media (hover) {:root:root  ._borderBottomColor-0hover-edge._borderBottomColor-0hover-edge:hover{border-bottom-color:var(--edge) !important;}}
+@media (hover) {:root:root  ._borderBottomColor-0hover-ink._borderBottomColor-0hover-ink:hover{border-bottom-color:var(--ink) !important;}}
 @media (hover) {:root:root  ._borderBottomColor-0hover-rim._borderBottomColor-0hover-rim:hover{border-bottom-color:var(--rim) !important;}}
 @media (hover) {:root:root  ._borderBottomColor-0hover-transparent._borderBottomColor-0hover-transparent:hover{border-bottom-color:transparent !important;}}
 :root ._borderBottomColor-borderColor._borderBottomColor-borderColor{border-bottom-color:var(--borderColor);}
@@ -3263,6 +3267,8 @@ a svg,
 @media (hover) {:root:root  ._borderLeftColor-0hover-borderColor69916956._borderLeftColor-0hover-borderColor69916956:hover{border-left-color:var(--borderColorHover) !important;}}
 @media (hover) {:root:root  ._borderLeftColor-0hover-bound._borderLeftColor-0hover-bound:hover{border-left-color:var(--bound) !important;}}
 @media (hover) {:root:root  ._borderLeftColor-0hover-dim._borderLeftColor-0hover-dim:hover{border-left-color:var(--dim) !important;}}
+@media (hover) {:root:root  ._borderLeftColor-0hover-edge._borderLeftColor-0hover-edge:hover{border-left-color:var(--edge) !important;}}
+@media (hover) {:root:root  ._borderLeftColor-0hover-ink._borderLeftColor-0hover-ink:hover{border-left-color:var(--ink) !important;}}
 @media (hover) {:root:root  ._borderLeftColor-0hover-rim._borderLeftColor-0hover-rim:hover{border-left-color:var(--rim) !important;}}
 @media (hover) {:root:root  ._borderLeftColor-0hover-transparent._borderLeftColor-0hover-transparent:hover{border-left-color:transparent !important;}}
 :root ._borderLeftColor-borderColor._borderLeftColor-borderColor{border-left-color:var(--borderColor);}
@@ -3270,6 +3276,7 @@ a svg,
 :root ._borderLeftColor-color12._borderLeftColor-color12{border-left-color:var(--color12);}
 :root ._borderLeftColor-faint._borderLeftColor-faint{border-left-color:var(--faint);}
 :root ._borderLeftColor-green3._borderLeftColor-green3{border-left-color:var(--green3);}
+:root ._borderLeftColor-ink._borderLeftColor-ink{border-left-color:var(--ink);}
 :root ._borderLeftColor-rim._borderLeftColor-rim{border-left-color:var(--rim);}
 :root ._borderLeftColor-transparent._borderLeftColor-transparent{border-left-color:transparent;}
 :root ._borderLeftWidth-0px._borderLeftWidth-0px{border-left-width:0px;}
@@ -3286,6 +3293,8 @@ a svg,
 @media (hover) {:root:root  ._brc-0hover-borderColor69916956._brc-0hover-borderColor69916956:hover{border-right-color:var(--borderColorHover) !important;}}
 @media (hover) {:root:root  ._brc-0hover-bound._brc-0hover-bound:hover{border-right-color:var(--bound) !important;}}
 @media (hover) {:root:root  ._brc-0hover-dim._brc-0hover-dim:hover{border-right-color:var(--dim) !important;}}
+@media (hover) {:root:root  ._brc-0hover-edge._brc-0hover-edge:hover{border-right-color:var(--edge) !important;}}
+@media (hover) {:root:root  ._brc-0hover-ink._brc-0hover-ink:hover{border-right-color:var(--ink) !important;}}
 @media (hover) {:root:root  ._brc-0hover-rim._brc-0hover-rim:hover{border-right-color:var(--rim) !important;}}
 @media (hover) {:root:root  ._brc-0hover-transparent._brc-0hover-transparent:hover{border-right-color:transparent !important;}}
 :root ._brc-borderColor._brc-borderColor{border-right-color:var(--borderColor);}
@@ -3293,6 +3302,7 @@ a svg,
 :root ._brc-color12._brc-color12{border-right-color:var(--color12);}
 :root ._brc-faint._brc-faint{border-right-color:var(--faint);}
 :root ._brc-green3._brc-green3{border-right-color:var(--green3);}
+:root ._brc-ink._brc-ink{border-right-color:var(--ink);}
 :root ._brc-rim._brc-rim{border-right-color:var(--rim);}
 :root ._brc-transparent._brc-transparent{border-right-color:transparent;}
 :root ._brs-solid._brs-solid{border-right-style:solid;}
@@ -3310,6 +3320,8 @@ a svg,
 @media (hover) {:root:root  ._btc-0hover-borderColor69916956._btc-0hover-borderColor69916956:hover{border-top-color:var(--borderColorHover) !important;}}
 @media (hover) {:root:root  ._btc-0hover-bound._btc-0hover-bound:hover{border-top-color:var(--bound) !important;}}
 @media (hover) {:root:root  ._btc-0hover-dim._btc-0hover-dim:hover{border-top-color:var(--dim) !important;}}
+@media (hover) {:root:root  ._btc-0hover-edge._btc-0hover-edge:hover{border-top-color:var(--edge) !important;}}
+@media (hover) {:root:root  ._btc-0hover-ink._btc-0hover-ink:hover{border-top-color:var(--ink) !important;}}
 @media (hover) {:root:root  ._btc-0hover-rim._btc-0hover-rim:hover{border-top-color:var(--rim) !important;}}
 @media (hover) {:root:root  ._btc-0hover-transparent._btc-0hover-transparent:hover{border-top-color:transparent !important;}}
 :root ._btc-borderColor._btc-borderColor{border-top-color:var(--borderColor);}
@@ -3317,6 +3329,7 @@ a svg,
 :root ._btc-color12._btc-color12{border-top-color:var(--color12);}
 :root ._btc-faint._btc-faint{border-top-color:var(--faint);}
 :root ._btc-green3._btc-green3{border-top-color:var(--green3);}
+:root ._btc-ink._btc-ink{border-top-color:var(--ink);}
 :root ._btc-rim._btc-rim{border-top-color:var(--rim);}
 :root ._btc-transparent._btc-transparent{border-top-color:transparent;}
 :root ._btlr-0px{border-top-left-radius:0px;}
@@ -3366,6 +3379,8 @@ a svg,
 :root ._col-accentColor{color:var(--accentColor);}
 :root ._col-bad{color:var(--bad);}
 :root ._col-color{color:var(--color);}
+:root ._col-color11{color:var(--color11);}
+:root ._col-color12{color:var(--color12);}
 :root ._col-faint{color:var(--faint);}
 :root ._col-green11{color:var(--green11);}
 :root ._col-ink{color:var(--ink);}
@@ -3402,8 +3417,10 @@ a svg,
 :root ._fs-f-size-2{font-size:var(--f-size-2);}
 :root ._fs-f-size-3{font-size:var(--f-size-3);}
 :root ._fs-f-size-4{font-size:var(--f-size-4);}
+:root ._fs-f-size-5{font-size:var(--f-size-5);}
 :root ._fs-f-size-6{font-size:var(--f-size-6);}
 :root ._fs-f-size-7{font-size:var(--f-size-7);}
+:root ._fs-f-size-8{font-size:var(--f-size-8);}
 :root ._fs-f-size-9{font-size:var(--f-size-9);}
 :root ._fw-500{font-weight:500;}
 :root ._fw-600{font-weight:600;}
@@ -3411,7 +3428,9 @@ a svg,
 :root ._fw-f-weight-2{font-weight:var(--f-weight-2);}
 :root ._fw-f-weight-3{font-weight:var(--f-weight-3);}
 :root ._fw-f-weight-4{font-weight:var(--f-weight-4);}
+:root ._fw-f-weight-6{font-weight:var(--f-weight-6);}
 :root ._fw-f-weight-7{font-weight:var(--f-weight-7);}
+:root ._fw-f-weight-8{font-weight:var(--f-weight-8);}
 :root ._fwr-nowrap{flex-wrap:nowrap;}
 :root ._fwr-wrap{flex-wrap:wrap;}
 :root ._gap-0px{gap:0px;}
@@ -3420,6 +3439,7 @@ a svg,
 :root ._gap-24px{gap:24px;}
 :root ._gap-2px{gap:2px;}
 :root ._gap-8px{gap:8px;}
+@media (max-width: 767.98px){:root:root:root:root:root:root:root ._gap-_maxmd_c-space-3{gap:var(--c-space-3);}}
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._gap-_md_c-space-3{gap:var(--c-space-3);}}
 :root ._gap-c-space-0{gap:var(--c-space-0);}
 :root ._gap-c-space-0--53{gap:var(--c-space-0--5);}
@@ -3428,6 +3448,9 @@ a svg,
 :root ._gap-c-space-2{gap:var(--c-space-2);}
 :root ._gap-c-space-2--53{gap:var(--c-space-2--5);}
 :root ._gap-c-space-3{gap:var(--c-space-3);}
+:root ._gap-c-space-4{gap:var(--c-space-4);}
+:root ._gap-c-space-5{gap:var(--c-space-5);}
+:root ._gap-c-space-6{gap:var(--c-space-6);}
 :root ._gap-calc6pxvar-1380234971{gap:calc(6px * var(--radius-scale, 1));}
 :root ._gap-calc8pxvar-1380234971{gap:calc(8px * var(--radius-scale, 1));}
 :root ._grow-0{flex-grow:0;}
@@ -3445,6 +3468,7 @@ a svg,
 :root ._height-24px{height:24px;}
 :root ._height-28px{height:28px;}
 :root ._height-32px{height:32px;}
+:root ._height-34px{height:34px;}
 :root ._height-36px{height:36px;}
 :root ._height-40px{height:40px;}
 :root ._height-44px{height:44px;}
@@ -3477,16 +3501,21 @@ a svg,
 :root ._lh-f-lineHeigh112921{line-height:var(--f-lineHeight-2);}
 :root ._lh-f-lineHeigh112922{line-height:var(--f-lineHeight-3);}
 :root ._lh-f-lineHeigh112923{line-height:var(--f-lineHeight-4);}
+:root ._lh-f-lineHeigh112924{line-height:var(--f-lineHeight-5);}
 :root ._lh-f-lineHeigh112925{line-height:var(--f-lineHeight-6);}
 :root ._lh-f-lineHeigh112926{line-height:var(--f-lineHeight-7);}
+:root ._lh-f-lineHeigh112927{line-height:var(--f-lineHeight-8);}
 :root ._lh-f-lineHeigh112928{line-height:var(--f-lineHeight-9);}
 :root ._lh-f-lineHeigh3500568{line-height:var(--f-lineHeight-10);}
 :root ._lh-f-lineHeigh3500569{line-height:var(--f-lineHeight-11);}
 :root ._ls-0--6px{letter-spacing:0.6px;}
 :root ._ls-1--5px{letter-spacing:1.5px;}
+:root ._ls-1px{letter-spacing:1px;}
 :root ._ls-f-letterSpa1360334197{letter-spacing:var(--f-letterSpacing-9);}
+:root ._ls-f-letterSpa1360334198{letter-spacing:var(--f-letterSpacing-8);}
 :root ._ls-f-letterSpa1360334199{letter-spacing:var(--f-letterSpacing-7);}
 :root ._ls-f-letterSpa1360334200{letter-spacing:var(--f-letterSpacing-6);}
+:root ._ls-f-letterSpa1360334201{letter-spacing:var(--f-letterSpacing-5);}
 :root ._ls-f-letterSpa1360334202{letter-spacing:var(--f-letterSpacing-4);}
 :root ._ls-f-letterSpa1360334203{letter-spacing:var(--f-letterSpacing-3);}
 :root ._ls-f-letterSpa1360334204{letter-spacing:var(--f-letterSpacing-2);}
@@ -3502,6 +3531,7 @@ a svg,
 :root ._maxH-initial{max-height:initial;}
 :root ._maxW-0px{max-width:0px;}
 :root ._maxW-10037{max-width:100%;}
+:root ._maxW-1080px{max-width:1080px;}
 :root ._maxW-16px{max-width:16px;}
 :root ._maxW-180px{max-width:180px;}
 :root ._maxW-200px{max-width:200px;}
@@ -3510,9 +3540,11 @@ a svg,
 :root ._maxW-360px{max-width:360px;}
 :root ._maxW-600px{max-width:600px;}
 :root ._maxW-720px{max-width:720px;}
+:root ._maxW-760px{max-width:760px;}
 :root ._maxW-768px{max-width:768px;}
 :root ._maxW-8537{max-width:85%;}
 :root ._maxW-c-size-1{max-width:var(--c-size-1);}
+:root ._mb--1px{margin-bottom:-1px;}
 :root ._mb-0px{margin-bottom:0px;}
 :root ._minH-0px{min-height:0px;}
 :root ._minH-16px{min-height:16px;}
@@ -3587,16 +3619,19 @@ a svg,
 :root ._pb-7px{padding-bottom:7px;}
 :root ._pb-8px{padding-bottom:8px;}
 :root ._pb-9px{padding-bottom:9px;}
+@media (max-width: 767.98px){:root:root:root:root:root:root:root ._pb-_maxmd_c-space-4{padding-bottom:var(--c-space-4);}}
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._pb-_md_c-space-3{padding-bottom:var(--c-space-3);}}
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._pb-_md_c-space-8{padding-bottom:var(--c-space-8);}}
 :root ._pb-c-space-1{padding-bottom:var(--c-space-1);}
 :root ._pb-c-space-1--53{padding-bottom:var(--c-space-1--5);}
+:root ._pb-c-space-10{padding-bottom:var(--c-space-10);}
 :root ._pb-c-space-11{padding-bottom:var(--c-space-11);}
 :root ._pb-c-space-2{padding-bottom:var(--c-space-2);}
 :root ._pb-c-space-2--53{padding-bottom:var(--c-space-2--5);}
 :root ._pb-c-space-3{padding-bottom:var(--c-space-3);}
 :root ._pb-c-space-3--53{padding-bottom:var(--c-space-3--5);}
 :root ._pb-c-space-4{padding-bottom:var(--c-space-4);}
+:root ._pb-c-space-5{padding-bottom:var(--c-space-5);}
 :root ._pb-c-space-6{padding-bottom:var(--c-space-6);}
 :root ._pe-boxnone{pointer-events:none !important;}
 :root ._pe-none{pointer-events:none !important;}
@@ -3608,6 +3643,7 @@ a svg,
 :root ._pl-2px{padding-left:2px;}
 :root ._pl-3px{padding-left:3px;}
 :root ._pl-8px{padding-left:8px;}
+@media (max-width: 767.98px){:root:root:root:root:root:root:root ._pl-_maxmd_c-space-4{padding-left:var(--c-space-4);}}
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._pl-_md_c-space-4{padding-left:var(--c-space-4);}}
 :root ._pl-c-space-1{padding-left:var(--c-space-1);}
 :root ._pl-c-space-1--53{padding-left:var(--c-space-1--5);}
@@ -3615,6 +3651,7 @@ a svg,
 :root ._pl-c-space-2--53{padding-left:var(--c-space-2--5);}
 :root ._pl-c-space-3{padding-left:var(--c-space-3);}
 :root ._pl-c-space-4{padding-left:var(--c-space-4);}
+:root ._pl-c-space-5{padding-left:var(--c-space-5);}
 :root ._pl-c-space-6{padding-left:var(--c-space-6);}
 :root ._pl-c-space-tru101{padding-left:var(--c-space-true);}
 :root ._pos-absolute{position:absolute;}
@@ -3627,6 +3664,7 @@ a svg,
 :root ._pr-36px{padding-right:36px;}
 :root ._pr-3px{padding-right:3px;}
 :root ._pr-8px{padding-right:8px;}
+@media (max-width: 767.98px){:root:root:root:root:root:root:root ._pr-_maxmd_c-space-4{padding-right:var(--c-space-4);}}
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._pr-_md_c-space-3{padding-right:var(--c-space-3);}}
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._pr-_md_c-space-4{padding-right:var(--c-space-4);}}
 :root ._pr-c-space-1{padding-right:var(--c-space-1);}
@@ -3635,6 +3673,7 @@ a svg,
 :root ._pr-c-space-2--53{padding-right:var(--c-space-2--5);}
 :root ._pr-c-space-3{padding-right:var(--c-space-3);}
 :root ._pr-c-space-4{padding-right:var(--c-space-4);}
+:root ._pr-c-space-5{padding-right:var(--c-space-5);}
 :root ._pr-c-space-6{padding-right:var(--c-space-6);}
 :root ._pr-c-space-tru101{padding-right:var(--c-space-true);}
 :root ._pt-0px{padding-top:0px;}
@@ -3646,6 +3685,7 @@ a svg,
 :root ._pt-7px{padding-top:7px;}
 :root ._pt-8px{padding-top:8px;}
 :root ._pt-9px{padding-top:9px;}
+@media (max-width: 767.98px){:root:root:root:root:root:root:root ._pt-_maxmd_c-space-4{padding-top:var(--c-space-4);}}
 @media (min-width: 768px){:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root:root ._pt-_md_c-space-8{padding-top:var(--c-space-8);}}
 :root ._pt-c-space-1{padding-top:var(--c-space-1);}
 :root ._pt-c-space-1--53{padding-top:var(--c-space-1--5);}
@@ -3655,10 +3695,12 @@ a svg,
 :root ._pt-c-space-3{padding-top:var(--c-space-3);}
 :root ._pt-c-space-3--53{padding-top:var(--c-space-3--5);}
 :root ._pt-c-space-4{padding-top:var(--c-space-4);}
+:root ._pt-c-space-5{padding-top:var(--c-space-5);}
 :root ._pt-c-space-6{padding-top:var(--c-space-6);}
 :root ._r-0px{right:0px;}
 :root ._r-12px{right:12px;}
 :root ._r-6037{right:60%;}
+:root ._rowGap-c-space-3{row-gap:var(--c-space-3);}
 :root ._select-auto{user-select:auto;-webkit-user-select:auto;}
 :root ._select-none{user-select:none;-webkit-user-select:none;}
 :root ._self-center{align-self:center;}
@@ -3671,6 +3713,7 @@ a svg,
 :root ._t-0px{top:0px;}
 :root ._t-5037{top:50%;}
 @media (hover) {:root:root  ._td-0hover-underline:hover{text-decoration-line:underline !important;}}
+:root ._td-underline{text-decoration-line:underline;}
 :root ._text-center{text-align:center;}
 :root ._textOverflow-ellipsis{text-overflow:ellipsis;}
 :root ._tr-rotate0deg1281{transform:rotate(0deg);}
@@ -3691,6 +3734,7 @@ a svg,
 :root ._width-16px{width:16px;}
 :root ._width-20037{width:200%;}
 :root ._width-20px{width:20px;}
+:root ._width-220px{width:220px;}
 :root ._width-22px{width:22px;}
 :root ._width-24px{width:24px;}
 :root ._width-260px{width:260px;}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "8.27.19",
+  "version": "8.27.22",
   "type": "module",
   "description": "Hanzo UI — the one canonical Hanzo component library, on @hanzo/gui + @hanzo/design. ONE substrate: every component renders through @hanzo/gui primitives, so the same import works on web, native (expo) and desktop (Tauri). Self-contained (theme.css), presentational, host-agnostic, clean-room.",
   "exports": {
@@ -33,12 +33,30 @@
       "require": "./dist/models/index.cjs",
       "default": "./dist/models/index.js"
     },
+    "./models/catalog": {
+      "types": "./dist/models/catalog.d.ts",
+      "import": "./dist/models/catalog.js",
+      "require": "./dist/models/catalog.cjs",
+      "default": "./dist/models/catalog.js"
+    },
     "./chat": {
       "types": "./dist/chat/index.d.ts",
       "import": "./dist/chat/index.js",
       "require": "./dist/chat/index.cjs",
       "default": "./dist/chat/index.js"
     },
+    "./settings": {
+      "types": "./dist/settings/index.d.ts",
+      "import": "./dist/settings/index.js",
+      "require": "./dist/settings/index.cjs",
+      "default": "./dist/settings/index.js"
+    },
+    "./catalog": {
+      "types": "./dist/catalog/index.d.ts",
+      "import": "./dist/catalog/index.js",
+      "require": "./dist/catalog/index.cjs",
+      "default": "./dist/catalog/index.js"
+    },
     "./backdrop": {
       "types": "./dist/backdrop/index.d.ts",
       "import": "./dist/backdrop/index.js",