@hanzo/ui 8.27.19 → 8.27.20

package/dist/settings/Section.cjs

@@ -0,0 +1,71 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Heading = Heading;
+exports.Group = Group;
+exports.Card = Card;
+exports.Row = Row;
+exports.Field = Field;
+exports.Soft = Soft;
+exports.Note = Note;
+exports.Once = Once;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * What a settings section is drawn from, so every section reads as one page:
+ *
+ *   Heading   the section's title, what it is for, and its one action
+ *   Group     a small title over a run of rows or fields
+ *   Card      a bordered list; its `Row`s draw the rules between them
+ *   Row       one thing in a Card: what it is, a line about it, what can be done
+ *   Field     a labelled control, with a line under it when there is more to say
+ *   Soft      the quiet line for empty, loading, signed-out and refused
+ *   Note      what the last action did, said once, where it was done
+ *   Once      a credential the platform shows once: the value, and a copy
+ *
+ * Presentational. Every string is the host's; nothing here fetches or decides.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+const CopyButton_1 = require("../product/CopyButton.cjs");
+/** A section's title, what it is for, and its one action. */
+function Heading({ title, detail, action, level = 2 }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('settings-heading'), items: "flex-start", gap: "$3", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, gap: "$1", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { role: "heading", "aria-level": level, size: "$6", color: "$ink", children: title }), detail ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$soft", children: detail })) : null] }), action] }));
+}
+/** A group inside a section: a small title over what it holds. */
+function Group({ title, detail, action, level = 3, children }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('settings-group'), gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, gap: "$0.5", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { role: "heading", "aria-level": level, size: "$3", color: "$ink", children: title }), detail ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", children: detail })) : null] }), action] }), children] }));
+}
+/**
+ * A bordered box of rows. Its rows draw the rules between them; the first says
+ * `first`. It holds what a section needs in one frame — `Row`s, a form line, a
+ * `Soft` — so it claims no list role its children would have to live up to.
+ */
+function Card({ children }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('settings-card'), borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: children }));
+}
+/** One row of a Card: what it is, a line about it, and what can be done to it. */
+function Row({ title, detail, leading, trailing, first, mono }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('settings-row'), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", children: [leading, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { flex: 1, minW: 0, gap: "$0.5", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$ink", numberOfLines: 1, fontFamily: mono ? '$mono' : undefined, children: title }), detail ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: detail })) : null] }), trailing] }));
+}
+/** A labelled control, with a line under it when there is more to say. */
+function Field({ label, hint, children }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('settings-field'), gap: "$1.5", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$ink", children: label }), children, hint ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", children: hint })) : null] }));
+}
+/** The quiet line for empty, loading, signed-out and refused — and the one thing to do about it. */
+function Soft({ children, action }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('settings-soft'), py: "$5", items: "center", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$soft", text: "center", children: children }), action] }));
+}
+/**
+ * What the last action did, said once, where it was done.
+ *
+ * The live region is ALWAYS there, empty when there is nothing to say: a
+ * `role=status` that mounts together with its text is often not announced,
+ * because a reader watches regions it already knows about for changes.
+ */
+function Note({ children }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { ...(0, slot_1.slot)('settings-note'), size: "$1", color: "$soft", role: "status", children: children }));
+}
+/** A credential the platform answers once: the value to copy, and what it is for. */
+function Once({ value, label, says = 'Copy it now. It is not shown again.', children }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('settings-once'), gap: "$2", px: "$3", py: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$2", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", fontFamily: "$mono", "aria-label": label, style: { wordBreak: 'break-all' }, children: value }), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { value: value, label: `Copy ${label.toLowerCase()}` })] }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$1", color: "$soft", children: says }), children] }));
+}

package/dist/settings/Section.d.ts

@@ -0,0 +1,78 @@
+import type { ReactNode } from 'react';
+export interface HeadingProps {
+    title: string;
+    /** One or two lines on what the section is for. */
+    detail?: string;
+    /** The section's one action — an Add, a Save. */
+    action?: ReactNode;
+    /** The heading's outline level. The page's own title is the nav's, so 2. */
+    level?: 1 | 2 | 3;
+}
+/** A section's title, what it is for, and its one action. */
+export declare function Heading({ title, detail, action, level }: HeadingProps): import("react").JSX.Element;
+export interface GroupProps {
+    title: string;
+    detail?: string;
+    action?: ReactNode;
+    /** One level under the section's `Heading`. */
+    level?: 2 | 3 | 4;
+    children: ReactNode;
+}
+/** A group inside a section: a small title over what it holds. */
+export declare function Group({ title, detail, action, level, children }: GroupProps): import("react").JSX.Element;
+/**
+ * A bordered box of rows. Its rows draw the rules between them; the first says
+ * `first`. It holds what a section needs in one frame — `Row`s, a form line, a
+ * `Soft` — so it claims no list role its children would have to live up to.
+ */
+export declare function Card({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export interface RowProps {
+    title: string;
+    detail?: string;
+    /** Before the words — a mark, an icon, a status. */
+    leading?: ReactNode;
+    /** After them — what can be done to this row. */
+    trailing?: ReactNode;
+    /** The Card's first row draws no rule above itself. */
+    first?: boolean;
+    /** The title is an identifier — a key name, a path — and is set in `$mono`. */
+    mono?: boolean;
+}
+/** One row of a Card: what it is, a line about it, and what can be done to it. */
+export declare function Row({ title, detail, leading, trailing, first, mono }: RowProps): import("react").JSX.Element;
+/** A labelled control, with a line under it when there is more to say. */
+export declare function Field({ label, hint, children }: {
+    label: string;
+    hint?: string;
+    children: ReactNode;
+}): import("react").JSX.Element;
+/** The quiet line for empty, loading, signed-out and refused — and the one thing to do about it. */
+export declare function Soft({ children, action }: {
+    children: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+/**
+ * What the last action did, said once, where it was done.
+ *
+ * The live region is ALWAYS there, empty when there is nothing to say: a
+ * `role=status` that mounts together with its text is often not announced,
+ * because a reader watches regions it already knows about for changes.
+ */
+export declare function Note({ children }: {
+    children: string;
+}): import("react").JSX.Element;
+export interface OnceProps {
+    /** The credential. */
+    value: string;
+    /** What it is — "API key". Names the value and its copy control. */
+    label: string;
+    /** The line under it. */
+    says?: string;
+    /** What follows — a Done. */
+    children?: ReactNode;
+}
+/** A credential the platform answers once: the value to copy, and what it is for. */
+export declare function Once({ value, label, says, children }: OnceProps): import("react").JSX.Element;
+//# sourceMappingURL=Section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Section.d.ts","sourceRoot":"","sources":["../../src/settings/Section.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAA;IACb,mDAAmD;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iDAAiD;IACjD,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,4EAA4E;IAC5E,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;CAClB;AAED,6DAA6D;AAC7D,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAS,EAAE,EAAE,YAAY,+BAgBzE;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,+CAA+C;IAC/C,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;IACjB,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED,kEAAkE;AAClE,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,KAAS,EAAE,QAAQ,EAAE,EAAE,UAAU,+BAmB/E;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAYzD;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,iDAAiD;IACjD,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uDAAuD;IACvD,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,+EAA+E;IAC/E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,kFAAkF;AAClF,wBAAgB,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,QAAQ,+BAyB9E;AAED,0EAA0E;AAC1E,wBAAgB,KAAK,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAcrG;AAED,oGAAoG;AACpG,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,SAAS,CAAA;CAAE,+BASlF;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,MAAM,CAAA;CAAE,+BAMtD;AAED,MAAM,WAAW,SAAS;IACxB,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAA;IACb,yBAAyB;IACzB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,6BAA6B;IAC7B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB;AAED,qFAAqF;AACrF,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAA4C,EAAE,QAAQ,EAAE,EAAE,SAAS,+BAgCvG"}

package/dist/settings/Section.js

@@ -0,0 +1,62 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * What a settings section is drawn from, so every section reads as one page:
+ *
+ *   Heading   the section's title, what it is for, and its one action
+ *   Group     a small title over a run of rows or fields
+ *   Card      a bordered list; its `Row`s draw the rules between them
+ *   Row       one thing in a Card: what it is, a line about it, what can be done
+ *   Field     a labelled control, with a line under it when there is more to say
+ *   Soft      the quiet line for empty, loading, signed-out and refused
+ *   Note      what the last action did, said once, where it was done
+ *   Once      a credential the platform shows once: the value, and a copy
+ *
+ * Presentational. Every string is the host's; nothing here fetches or decides.
+ */
+import { SizableText, XStack, YStack } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+import { CopyButton } from '../product/CopyButton.js';
+/** A section's title, what it is for, and its one action. */
+export function Heading({ title, detail, action, level = 2 }) {
+    return (_jsxs(XStack, { ...slot('settings-heading'), items: "flex-start", gap: "$3", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$1", children: [_jsx(SizableText, { role: "heading", "aria-level": level, size: "$6", color: "$ink", children: title }), detail ? (_jsx(SizableText, { size: "$2", color: "$soft", children: detail })) : null] }), action] }));
+}
+/** A group inside a section: a small title over what it holds. */
+export function Group({ title, detail, action, level = 3, children }) {
+    return (_jsxs(YStack, { ...slot('settings-group'), gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { role: "heading", "aria-level": level, size: "$3", color: "$ink", children: title }), detail ? (_jsx(SizableText, { size: "$1", color: "$soft", children: detail })) : null] }), action] }), children] }));
+}
+/**
+ * A bordered box of rows. Its rows draw the rules between them; the first says
+ * `first`. It holds what a section needs in one frame — `Row`s, a form line, a
+ * `Soft` — so it claims no list role its children would have to live up to.
+ */
+export function Card({ children }) {
+    return (_jsx(YStack, { ...slot('settings-card'), borderWidth: 1, borderColor: "$borderColor", rounded: "$3", overflow: "hidden", children: children }));
+}
+/** One row of a Card: what it is, a line about it, and what can be done to it. */
+export function Row({ title, detail, leading, trailing, first, mono }) {
+    return (_jsxs(XStack, { ...slot('settings-row'), items: "center", gap: "$3", px: "$3", py: "$2.5", borderTopWidth: first ? 0 : 1, borderColor: "$borderColor", children: [leading, _jsxs(YStack, { flex: 1, minW: 0, gap: "$0.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", numberOfLines: 1, fontFamily: mono ? '$mono' : undefined, children: title }), detail ? (_jsx(SizableText, { size: "$1", color: "$soft", numberOfLines: 2, children: detail })) : null] }), trailing] }));
+}
+/** A labelled control, with a line under it when there is more to say. */
+export function Field({ label, hint, children }) {
+    return (_jsxs(YStack, { ...slot('settings-field'), gap: "$1.5", children: [_jsx(SizableText, { size: "$2", color: "$ink", children: label }), children, hint ? (_jsx(SizableText, { size: "$1", color: "$soft", children: hint })) : null] }));
+}
+/** The quiet line for empty, loading, signed-out and refused — and the one thing to do about it. */
+export function Soft({ children, action }) {
+    return (_jsxs(YStack, { ...slot('settings-soft'), py: "$5", items: "center", gap: "$3", children: [_jsx(SizableText, { size: "$2", color: "$soft", text: "center", children: children }), action] }));
+}
+/**
+ * What the last action did, said once, where it was done.
+ *
+ * The live region is ALWAYS there, empty when there is nothing to say: a
+ * `role=status` that mounts together with its text is often not announced,
+ * because a reader watches regions it already knows about for changes.
+ */
+export function Note({ children }) {
+    return (_jsx(SizableText, { ...slot('settings-note'), size: "$1", color: "$soft", role: "status", children: children }));
+}
+/** A credential the platform answers once: the value to copy, and what it is for. */
+export function Once({ value, label, says = 'Copy it now. It is not shown again.', children }) {
+    return (_jsxs(YStack, { ...slot('settings-once'), gap: "$2", px: "$3", py: "$3", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$raised", children: [_jsxs(XStack, { items: "center", gap: "$2", children: [_jsx(SizableText, { flex: 1, minW: 0, size: "$2", color: "$ink", fontFamily: "$mono", "aria-label": label, style: { wordBreak: 'break-all' }, children: value }), _jsx(CopyButton, { value: value, label: `Copy ${label.toLowerCase()}` })] }), _jsx(SizableText, { size: "$1", color: "$soft", children: says }), children] }));
+}
+//# sourceMappingURL=Section.js.map

package/dist/settings/Section.js.map

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

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"}