@hanzo/ui 8.27.90 → 8.28.0

package/dist/product/DetailPane.d.ts

@@ -13,6 +13,32 @@
  * The last descriptor stays mounted through the close transition, so the exit
  * animates with its content (no flash of empty pane). Opening a new
  * descriptor replaces it.
+ *
+ * A pane is a STACK of pages. `open` starts a new stack, `push` lays a page on
+ * top (a relation opened from a record, a step of a flow), `back` takes it off;
+ * the top bar shows a back button while there is a page under the current one.
+ *
+ * Two modes, chosen by the shell:
+ *
+ *   overlay  (default) the SlideOver above the page, with its scrim — the
+ *            console's contract, unchanged.
+ *   docked   a column in the layout row beside the page content: no scrim, the
+ *            content narrows. 400 wide, resizable 320–600 from its leading edge
+ *            by the kit's one resizer (Grip), the width kept per person
+ *            (useSpan). The width animates 0 ↔ W while the page inside keeps the
+ *            target width, so it never reflows mid-slide. Below lg it is the
+ *            overlay again, full screen.
+ *
+ * A docked pane — or any pane under `<Density value="compact">` — draws the
+ * record frame (twenty-ui's side panel, MIT, NOTICE): a 48px top bar on the
+ * panel ground (back · icon + title · page actions · expand · close), a body
+ * that scrolls without chaining, and a footer on the panel ground with its
+ * actions at the end. An overlay pane at regular density keeps the header it
+ * always had. A page that draws itself (`bare`, a command menu, a search)
+ * composes the same frame from `PaneBar`, `PaneBody` and `PaneFoot`.
+ *
+ * Escape closes a docked pane while focus is inside it (the overlay's
+ * SlideOver already does); ⌘/Ctrl+Enter runs the page's `onExpand`.
  */
 import { type ReactNode } from 'react';
 import { type IconLike } from './color.js';
@@ -24,24 +50,76 @@ export type DetailDescriptor = {
     /** Optional title icon, tinted with `iconColor`. */
     icon?: IconLike;
     iconColor?: string;
-    /** Desktop pane width (px). Mobile is always full-screen. Default 460. */
+    /** Desktop pane width (px), overlay mode. Mobile is always full-screen. Default 460 (400 in the record frame). */
     size?: number;
     /** The body — the detail view or edit form for the item. */
     content: ReactNode;
     /** Optional sticky footer (primary actions), pinned below the scroll body. */
     footer?: ReactNode;
+    /** The page's own actions, in the top bar before expand and close (record frame). */
+    actions?: ReactNode;
+    /** Opens the page on the main surface: shows the expand button and binds ⌘/Ctrl+Enter. */
+    onExpand?: () => void;
+    /** The expand button's tooltip. Default "Open". */
+    expandLabel?: string;
+    /** The page draws its own frame from `PaneBar` / `PaneBody` / `PaneFoot` (a command menu, a search). */
+    bare?: boolean;
 };
 export type DetailPaneApi = {
+    /** A new stack, holding this page. */
     open: (descriptor: DetailDescriptor) => void;
+    /** This page over the current one. Opens the pane when it is shut. */
+    push: (descriptor: DetailDescriptor) => void;
+    /** Off the top: the page under it shows. On the last page, the pane closes. */
+    back: () => void;
     close: () => void;
     isOpen: boolean;
+    /** How many pages the stack holds; a back button shows while it is more than one. */
+    depth: number;
 };
+/** The pane this sits in, or null outside one — for a page that adapts to being in a pane. */
+export declare const usePane: () => DetailPaneApi | null;
 export declare function useDetailPane(): DetailPaneApi;
 export type DetailPaneProps = {
     children: ReactNode;
     /** z-index for stacking — a pane opened over another overlay passes a
      *  higher value. Left to `SlideOver`'s own default otherwise. */
     zIndex?: number;
+    /** `overlay` (default) floats above the page; `docked` is a column in the layout beside it. */
+    mode?: 'overlay' | 'docked';
+    /** Where a docked pane keeps the width a person chose (localStorage key). */
+    store?: string;
 };
-export declare function DetailPane({ children, zIndex }: DetailPaneProps): import("react").JSX.Element;
+/** The record frame's measures (twenty-ui's side panel, MIT). */
+export declare const PANE: {
+    readonly w: 400;
+    readonly min: 320;
+    readonly max: 600;
+    readonly bar: 48;
+    readonly icon: 16;
+};
+export declare function DetailPane({ children, zIndex, mode, store }: DetailPaneProps): import("react").JSX.Element;
+export type PaneBarProps = {
+    /** The leading cluster after the back button: an icon and a title, or a search field. */
+    children?: ReactNode;
+    /** The page's own actions, before expand and close. */
+    actions?: ReactNode;
+};
+/**
+ * The record frame's top bar: 48 high on the panel ground, a hairline under
+ * it, 8 in from each side, its two clusters 16 apart and their parts 4 apart.
+ * Inside a pane it adds back (while there is a page under this one), expand
+ * (when the page can open on the main surface) and close; outside one it is the
+ * bar alone.
+ */
+export declare function PaneBar({ children, actions }: PaneBarProps): import("react").JSX.Element;
+/** The record frame's body: it takes what the bar and footer leave, and scrolls without chaining to the page. */
+export declare function PaneBody({ children, padded }: {
+    children?: ReactNode;
+    padded?: boolean;
+}): import("react").JSX.Element;
+/** The record frame's footer: the panel ground, a hairline above, its actions at the end, 8 apart. */
+export declare function PaneFoot({ children }: {
+    children?: ReactNode;
+}): import("react").JSX.Element;
 //# sourceMappingURL=DetailPane.d.ts.map

package/dist/product/DetailPane.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DetailPane.d.ts","sourceRoot":"","sources":["../../src/product/DetailPane.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,EAML,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAKd,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAEhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oCAAoC;IACpC,KAAK,EAAE,SAAS,CAAA;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,OAAO,EAAE,SAAS,CAAA;IAClB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC5C,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;CAChB,CAAA;AAID,wBAAgB,aAAa,IAAI,aAAa,CAI7C;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB;qEACiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,eAAe,+BAsD/D"}
+{"version":3,"file":"DetailPane.d.ts","sourceRoot":"","sources":["../../src/product/DetailPane.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,OAAO,EAQL,KAAK,SAAS,EACf,MAAM,OAAO,CAAA;AAKd,OAAO,EAAW,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAQhD,MAAM,MAAM,gBAAgB,GAAG;IAC7B,oCAAoC;IACpC,KAAK,EAAE,SAAS,CAAA;IAChB,mEAAmE;IACnE,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,oDAAoD;IACpD,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,kHAAkH;IAClH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,OAAO,EAAE,SAAS,CAAA;IAClB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,qFAAqF;IACrF,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,0FAA0F;IAC1F,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,mDAAmD;IACnD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,wGAAwG;IACxG,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED,MAAM,MAAM,aAAa,GAAG;IAC1B,sCAAsC;IACtC,IAAI,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC5C,sEAAsE;IACtE,IAAI,EAAE,CAAC,UAAU,EAAE,gBAAgB,KAAK,IAAI,CAAA;IAC5C,+EAA+E;IAC/E,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,MAAM,EAAE,OAAO,CAAA;IACf,qFAAqF;IACrF,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAMD,8FAA8F;AAC9F,eAAO,MAAM,OAAO,QAAO,aAAa,GAAG,IAAuB,CAAA;AAElE,wBAAgB,aAAa,IAAI,aAAa,CAI7C;AAED,MAAM,MAAM,eAAe,GAAG;IAC5B,QAAQ,EAAE,SAAS,CAAA;IACnB;qEACiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,+FAA+F;IAC/F,IAAI,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;IAC3B,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,iEAAiE;AACjE,eAAO,MAAM,IAAI;aAAK,CAAC,EAAE,GAAG;aAAE,GAAG,EAAE,GAAG;aAAE,GAAG,EAAE,GAAG;aAAE,GAAG,EAAE,EAAE;aAAE,IAAI,EAAE,EAAE;CAAW,CAAA;AAE9E,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAgB,EAAE,KAAoB,EAAE,EAAE,eAAe,+BAuEvG;AA0KD,MAAM,MAAM,YAAY,GAAG;IACzB,yFAAyF;IACzF,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,uDAAuD;IACvD,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,YAAY,+BAwC1D;AAqBD,iHAAiH;AACjH,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,MAAa,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAC;IAAC,MAAM,CAAC,EAAE,OAAO,CAAA;CAAE,+BAQ/F;AAED,sGAAsG;AACtG,wBAAgB,QAAQ,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,+BAiB9D"}

package/dist/product/DetailPane.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * DetailPane — the ONE reusable right-side pane for viewing or editing the
  * details of an item. A product does NOT build its own pane: it writes a
@@ -15,29 +15,166 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * The last descriptor stays mounted through the close transition, so the exit
  * animates with its content (no flash of empty pane). Opening a new
  * descriptor replaces it.
+ *
+ * A pane is a STACK of pages. `open` starts a new stack, `push` lays a page on
+ * top (a relation opened from a record, a step of a flow), `back` takes it off;
+ * the top bar shows a back button while there is a page under the current one.
+ *
+ * Two modes, chosen by the shell:
+ *
+ *   overlay  (default) the SlideOver above the page, with its scrim — the
+ *            console's contract, unchanged.
+ *   docked   a column in the layout row beside the page content: no scrim, the
+ *            content narrows. 400 wide, resizable 320–600 from its leading edge
+ *            by the kit's one resizer (Grip), the width kept per person
+ *            (useSpan). The width animates 0 ↔ W while the page inside keeps the
+ *            target width, so it never reflows mid-slide. Below lg it is the
+ *            overlay again, full screen.
+ *
+ * A docked pane — or any pane under `<Density value="compact">` — draws the
+ * record frame (twenty-ui's side panel, MIT, NOTICE): a 48px top bar on the
+ * panel ground (back · icon + title · page actions · expand · close), a body
+ * that scrolls without chaining, and a footer on the panel ground with its
+ * actions at the end. An overlay pane at regular density keeps the header it
+ * always had. A page that draws itself (`bare`, a command menu, a search)
+ * composes the same frame from `PaneBar`, `PaneBody` and `PaneFoot`.
+ *
+ * Escape closes a docked pane while focus is inside it (the overlay's
+ * SlideOver already does); ⌘/Ctrl+Enter runs the page's `onExpand`.
  */
-import { createContext, useCallback, useContext, useMemo, useState, } from 'react';
-import { Button, ScrollView, Text, XStack, YStack } from '@hanzo/gui';
-import { X } from '@hanzogui/lucide-icons-2';
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { Button as GuiButton, ScrollView, Text, XStack, YStack, useMedia } from '@hanzo/gui';
+import { ChevronLeft, Maximize2, X } from '@hanzogui/lucide-icons-2';
 import { SlideOver } from './SlideOver.js';
 import { asColor } from './color.js';
-const Ctx = createContext(null);
+import { Button } from '../backends/gui/button.js';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../backends/gui/tooltip.js';
+import { Grip } from '../backends/gui/grip.js';
+import { useSpan } from '../backends/gui/span.js';
+import { useDensity } from '../backends/gui/density.js';
+import { slot } from '../backends/gui/slot.js';
+const Ctx = /* @__PURE__ */ createContext(null);
+/** The page being drawn, for the bar a bare page composes. */
+const PageCtx = /* @__PURE__ */ createContext(null);
+/** The pane this sits in, or null outside one — for a page that adapts to being in a pane. */
+export const usePane = () => useContext(Ctx);
 export function useDetailPane() {
     const ctx = useContext(Ctx);
     if (!ctx)
         throw new Error('useDetailPane must be used within <DetailPane>');
     return ctx;
 }
-export function DetailPane({ children, zIndex }) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [desc, setDesc] = useState(null);
-    const open = useCallback((descriptor) => {
-        setDesc(descriptor);
-        setIsOpen(true);
-    }, []);
-    const close = useCallback(() => setIsOpen(false), []);
-    const api = useMemo(() => ({ open, close, isOpen }), [open, close, isOpen]);
-    const Icon = desc?.icon;
-    return (_jsxs(Ctx.Provider, { value: api, children: [children, _jsxs(SlideOver, { open: isOpen, onClose: close, side: "right", size: desc?.size ?? 460, ariaLabel: typeof desc?.title === 'string' ? desc?.title : 'Details', zIndex: zIndex, children: [_jsxs(XStack, { items: "center", gap: "$2.5", px: "$4", height: 56, borderBottomWidth: 1, borderColor: "$borderColor", children: [Icon ? _jsx(Icon, { size: 18, color: desc?.iconColor ? asColor(desc.iconColor) : undefined }) : null, _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$5", fontWeight: "700", color: "$color12", numberOfLines: 1, children: desc?.title }), desc?.subtitle !== undefined ? (_jsx(Text, { fontSize: "$2", color: "$color10", numberOfLines: 1, children: desc?.subtitle })) : null] }), _jsx(Button, { size: "$2", chromeless: true, icon: _jsx(X, { size: 18 }), onPress: close, "aria-label": "Close" })] }), _jsx(ScrollView, { flex: 1, minH: 0, children: _jsx(YStack, { p: "$4", gap: "$3", children: desc?.content }) }), desc?.footer !== undefined ? (_jsx(XStack, { px: "$4", py: "$3", gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", bg: "$color1", children: desc?.footer })) : null] })] }));
+/** The record frame's measures (twenty-ui's side panel, MIT). */
+export const PANE = { w: 400, min: 320, max: 600, bar: 48, icon: 16 };
+export function DetailPane({ children, zIndex, mode = 'overlay', store = 'hanzo.pane' }) {
+    // One state, so every transition is one pure update: whether it is open, and
+    // the pages it holds (kept through a close, so the exit animates with them).
+    const [state, setState] = useState({ open: false, stack: [] });
+    const { open: isOpen, stack } = state;
+    const density = useDensity();
+    const media = useMedia();
+    const docked = mode === 'docked' && !!media.lg;
+    const record = mode === 'docked' || density === 'compact';
+    const open = useCallback((descriptor) => setState({ open: true, stack: [descriptor] }), []);
+    const push = useCallback((descriptor) => setState((s) => ({ open: true, stack: s.open ? [...s.stack, descriptor] : [descriptor] })), []);
+    const close = useCallback(() => setState((s) => ({ ...s, open: false })), []);
+    const back = useCallback(() => setState((s) => (s.stack.length > 1 ? { ...s, stack: s.stack.slice(0, -1) } : { ...s, open: false })), []);
+    const depth = isOpen ? stack.length : 0;
+    const api = useMemo(() => ({ open, push, back, close, isOpen, depth }), [open, push, back, close, isOpen, depth]);
+    const desc = stack[stack.length - 1] ?? null;
+    const title = typeof desc?.title === 'string' ? desc.title : 'Details';
+    const page = desc ? (_jsx(PageCtx.Provider, { value: desc, children: record || desc.bare ? _jsx(RecordPage, { desc: desc }) : _jsx(SheetPage, { desc: desc, close: close }) })) : null;
+    if (docked)
+        return (_jsx(Ctx.Provider, { value: api, children: _jsxs(XStack, { ...slot('detail-pane-row'), flex: 1, minW: 0, minH: 0, self: "stretch", children: [_jsx(YStack, { flex: 1, minW: 0, minH: 0, children: children }), _jsx(Dock, { open: isOpen, title: title, store: store, onClose: close, onExpand: desc?.onExpand, children: page })] }) }));
+    return (_jsxs(Ctx.Provider, { value: api, children: [children, _jsx(SlideOver, { open: isOpen, onClose: close, side: "right", size: desc?.size ?? (record ? PANE.w : 460), ariaLabel: title, zIndex: zIndex, children: record && desc ? (_jsx(YStack, { flex: 1, minH: 0, bg: "$background", onKeyDown: expandKey(desc.onExpand), children: page })) : (page) })] }));
+}
+/** ⌘/Ctrl+Enter runs `onExpand`, from anywhere inside the pane. */
+const expandKey = (onExpand) => (e) => {
+    if (!onExpand || e.key !== 'Enter' || !(e.metaKey || e.ctrlKey))
+        return;
+    e.preventDefault?.();
+    onExpand();
+};
+/**
+ * The docked column. The OUTER box is what animates and what the Grip measures
+ * (its width is the pane's); the INNER box holds the target width throughout, so
+ * the page slides in already laid out.
+ */
+function Dock({ open, title, store, onClose, onExpand, children, }) {
+    const span = useSpan(store, PANE.w, PANE.min, PANE.max);
+    const node = useRef(null);
+    const opener = useRef(null);
+    // Focus moves in when the pane opens and back to what opened it when it shuts:
+    // a docked pane is not modal, but a keyboard has to be able to reach it.
+    useEffect(() => {
+        if (!open || typeof document === 'undefined')
+            return;
+        opener.current = document.activeElement;
+        const t = window.setTimeout(() => node.current?.focus?.(), 0);
+        return () => {
+            window.clearTimeout(t);
+            const back = opener.current;
+            if (back instanceof HTMLElement && node.current?.contains(document.activeElement))
+                back.focus();
+        };
+    }, [open]);
+    return (_jsxs(YStack, { ref: ((el) => {
+            span.ref(el);
+            node.current = el instanceof HTMLElement ? el : null;
+        }), ...slot('detail-pane'), "data-mode": "docked", "data-open": open ? '' : undefined, role: "complementary", "aria-label": title, "aria-hidden": !open, ...(!open ? { inert: true } : null), tabIndex: -1, position: "relative", shrink: 0, self: "stretch", overflow: "hidden", outlineWidth: 0, onKeyDown: ((e) => {
+            if (e.key === 'Escape' && !e.defaultPrevented) {
+                e.preventDefault?.();
+                onClose();
+                return;
+            }
+            expandKey(onExpand)(e);
+        }), style: {
+            ...span.style,
+            width: open ? 'var(--span)' : 0,
+            transition: 'width var(--duration-base, 300ms) var(--ease-out, ease)',
+        }, children: [_jsx(YStack, { width: "var(--span)", flex: 1, minH: 0, bg: "$background", borderLeftWidth: 1, borderColor: "$borderColor", children: children }), open ? (_jsx(Grip, { side: "right", span: span.span, floor: PANE.min, ceil: PANE.max, reset: PANE.w, bar: "edge", label: "Resize side panel", onSpan: span.move, onKeep: span.keep, onShut: onClose })) : null] }));
+}
+/** The record frame of one page: the bar, the scrolling body, the footer. */
+function RecordPage({ desc }) {
+    if (desc.bare)
+        return _jsx(_Fragment, { children: desc.content });
+    const Icon = desc.icon;
+    return (_jsxs(_Fragment, { children: [_jsxs(PaneBar, { actions: desc.actions, children: [Icon ? _jsx(Icon, { size: PANE.icon, color: desc.iconColor ? asColor(desc.iconColor) : '$aside' }) : null, _jsx(Text, { fontSize: "$2", fontWeight: "500", color: "$ink", numberOfLines: 1, shrink: 1, minW: 0, children: desc.title }), desc.subtitle !== undefined ? (_jsx(Text, { fontSize: "$2", color: "$hint", numberOfLines: 1, shrink: 1, minW: 0, children: desc.subtitle })) : null] }), _jsx(PaneBody, { children: desc.content }), desc.footer !== undefined ? _jsx(PaneFoot, { children: desc.footer }) : null] }));
+}
+/** The overlay sheet's own page, as it always was: the 56px header and the body. */
+function SheetPage({ desc, close }) {
+    const Icon = desc.icon;
+    const pane = useContext(Ctx);
+    return (_jsxs(_Fragment, { children: [_jsxs(XStack, { items: "center", gap: "$2.5", px: "$4", height: 56, borderBottomWidth: 1, borderColor: "$borderColor", children: [pane && pane.depth > 1 ? (_jsx(GuiButton, { size: "$2", chromeless: true, icon: _jsx(ChevronLeft, { size: 18 }), onPress: pane.back, "aria-label": "Back" })) : null, Icon ? _jsx(Icon, { size: 18, color: desc.iconColor ? asColor(desc.iconColor) : undefined }) : null, _jsxs(YStack, { flex: 1, minW: 0, children: [_jsx(Text, { fontSize: "$5", fontWeight: "700", color: "$color12", numberOfLines: 1, children: desc.title }), desc.subtitle !== undefined ? (_jsx(Text, { fontSize: "$2", color: "$color10", numberOfLines: 1, children: desc.subtitle })) : null] }), _jsx(GuiButton, { size: "$2", chromeless: true, icon: _jsx(X, { size: 18 }), onPress: close, "aria-label": "Close" })] }), _jsx(ScrollView, { flex: 1, minH: 0, children: _jsx(YStack, { p: "$4", gap: "$3", children: desc.content }) }), desc.footer !== undefined ? (_jsx(XStack, { px: "$4", py: "$3", gap: "$2", borderTopWidth: 1, borderColor: "$borderColor", bg: "$color1", children: desc.footer })) : null] }));
+}
+/**
+ * The record frame's top bar: 48 high on the panel ground, a hairline under
+ * it, 8 in from each side, its two clusters 16 apart and their parts 4 apart.
+ * Inside a pane it adds back (while there is a page under this one), expand
+ * (when the page can open on the main surface) and close; outside one it is the
+ * bar alone.
+ */
+export function PaneBar({ children, actions }) {
+    const pane = useContext(Ctx);
+    const page = useContext(PageCtx);
+    const expand = page?.onExpand;
+    return (_jsxs(XStack, { ...slot('pane-bar'), height: PANE.bar, shrink: 0, items: "center", justify: "space-between", gap: "$4", px: "$2", bg: "$panel", borderBottomWidth: 1, borderColor: "$borderColor", children: [_jsxs(XStack, { flex: 1, minW: 0, items: "center", gap: "$1", children: [pane && pane.depth > 1 ? (_jsx(Tool, { tip: "Back", onPress: pane.back, children: _jsx(ChevronLeft, {}) })) : null, children] }), _jsxs(XStack, { shrink: 0, items: "center", gap: "$1", children: [actions, expand ? (_jsx(Tool, { tip: page?.expandLabel ?? 'Open', onPress: expand, children: _jsx(Maximize2, {}) })) : null, pane ? (_jsx(Tool, { tip: "Close side panel", onPress: pane.close, children: _jsx(X, {}) })) : null] })] }));
+}
+/**
+ * The bar's quiet 24px icon button, named by its tooltip. The tooltip's trigger
+ * IS the button (`asChild`): wrapped in a box, the trigger's `aria-expanded`
+ * lands on a div, which axe refuses (`aria-allowed-attr`), and a button may
+ * carry it.
+ */
+function Tool({ tip, children, ...props }) {
+    return (_jsxs(Tooltip, { delay: 1000, placement: "bottom", children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { size: "icon-xs", variant: "ghost", emphasis: "subtle", "aria-label": tip, ...props, children: children }) }), _jsx(TooltipContent, { children: tip })] }));
+}
+/** The record frame's body: it takes what the bar and footer leave, and scrolls without chaining to the page. */
+export function PaneBody({ children, padded = true }) {
+    return (_jsx(ScrollView, { ...slot('pane-body'), flex: 1, minH: 0, style: { overscrollBehavior: 'contain' }, children: _jsx(YStack, { ...(padded ? { p: '$2' } : null), gap: "$2", children: children }) }));
+}
+/** The record frame's footer: the panel ground, a hairline above, its actions at the end, 8 apart. */
+export function PaneFoot({ children }) {
+    return (_jsx(XStack, { ...slot('pane-foot'), shrink: 0, items: "center", justify: "flex-end", gap: "$2", px: "$3", py: "$2", bg: "$panel", borderTopWidth: 1, borderColor: "$borderColor", children: children }));
 }
 //# sourceMappingURL=DetailPane.js.map

package/dist/product/DetailPane.js.map

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

package/dist/product/Fact.cjs

@@ -4,6 +4,7 @@ exports.Fact = Fact;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const gui_1 = require("@hanzo/gui");
 const fonts_1 = require("../core/fonts.cjs");
+const progress_ring_1 = require("../backends/gui/progress-ring.cjs");
 /**
  * Fact — one row of a property list: a label on the left, a value on the
  * right, a hairline separator beneath. The read-only counterpart to `Field`'s
@@ -14,6 +15,10 @@ const fonts_1 = require("../core/fonts.cjs");
  * either could find the other. This is the one definition; the wider of the
  * two shapes won (a non-string `value` renders as given, not stringified).
  */
-function Fact({ label, value, mono }) {
+function Fact({ label, value, mono, variant = 'row', startIcon, progress, progressColor, progressValueText }) {
+    if (variant === 'metric') {
+        const shown = typeof value === 'string' || typeof value === 'number' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", fontWeight: "500", color: "$ink", numberOfLines: 1, style: mono ? { fontFamily: fonts_1.fontMono } : undefined, children: value })) : (value);
+        return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { "data-slot": "fact", "data-variant": "metric", items: "center", gap: "$2", minH: 24, children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, minW: 0, items: "center", gap: "$1", children: [startIcon, (0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$1", fontWeight: "500", color: "$hint", numberOfLines: 1, children: label })] }), progress !== undefined ? ((0, jsx_runtime_1.jsx)(progress_ring_1.ProgressRing, { value: progress, size: "sm", ...(progressColor ? { barColor: progressColor } : null), "aria-label": `${label}${progressValueText ? `: ${progressValueText}` : ''}`, children: shown })) : (shown)] }));
+    }
     return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { justify: "space-between", items: "center", py: "$1.5", borderBottomWidth: 1, borderColor: "$borderColor", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color11", children: label }), typeof value === 'string' ? ((0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$color12", fontWeight: "600", numberOfLines: 1, style: mono ? { fontFamily: fonts_1.fontMono } : undefined, children: value })) : (value)] }));
 }

package/dist/product/Fact.d.ts

@@ -8,6 +8,21 @@ export type FactProps = {
     value: ReactNode;
     /** Render a string value in the monospace face — an id, a hash, a path. */
     mono?: boolean;
+    /**
+     * `row` (default) is the property-list row. `metric` is the record kit's
+     * metric row (twenty-ui's MetricRow, MIT — NOTICE): no rule, a 24px floor,
+     * 12px medium, the label quiet beside an optional icon, the value at the end,
+     * and an optional progress ring that the value labels.
+     */
+    variant?: 'row' | 'metric';
+    /** `metric`: an icon before the label. */
+    startIcon?: ReactNode;
+    /** `metric`: a 14px ring at the end, 0–100 or `null` for indeterminate. */
+    progress?: number | null;
+    /** `metric`: the ring's colour. */
+    progressColor?: string;
+    /** `metric`: the ring's accessible value, when the value text is not it. */
+    progressValueText?: string;
 };
 /**
  * Fact — one row of a property list: a label on the left, a value on the
@@ -19,5 +34,5 @@ export type FactProps = {
  * either could find the other. This is the one definition; the wider of the
  * two shapes won (a non-string `value` renders as given, not stringified).
  */
-export declare function Fact({ label, value, mono }: FactProps): import("react").JSX.Element;
+export declare function Fact({ label, value, mono, variant, startIcon, progress, progressColor, progressValueText }: FactProps): import("react").JSX.Element;
 //# sourceMappingURL=Fact.d.ts.map

package/dist/product/Fact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Fact.d.ts","sourceRoot":"","sources":["../../src/product/Fact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,SAAS,GAAG;IACtB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAA;IACb;;iBAEa;IACb,KAAK,EAAE,SAAS,CAAA;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAA;CACf,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,SAAS,+BA4BrD"}
+{"version":3,"file":"Fact.d.ts","sourceRoot":"","sources":["../../src/product/Fact.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,SAAS,GAAG;IACtB,iCAAiC;IACjC,KAAK,EAAE,MAAM,CAAA;IACb;;iBAEa;IACb,KAAK,EAAE,SAAS,CAAA;IAChB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;;OAKG;IACH,OAAO,CAAC,EAAE,KAAK,GAAG,QAAQ,CAAA;IAC1B,0CAA0C;IAC1C,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACxB,mCAAmC;IACnC,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,4EAA4E;IAC5E,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,CAAA;AAED;;;;;;;;;GASG;AACH,wBAAgB,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAE,EAAE,SAAS,+BA4D7H"}

package/dist/product/Fact.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Text, XStack } from '@hanzo/gui';
 import { fontMono } from '../core/fonts.js';
+import { ProgressRing } from '../backends/gui/progress-ring.js';
 /**
  * Fact — one row of a property list: a label on the left, a value on the
  * right, a hairline separator beneath. The read-only counterpart to `Field`'s
@@ -11,7 +12,11 @@ import { fontMono } from '../core/fonts.js';
  * either could find the other. This is the one definition; the wider of the
  * two shapes won (a non-string `value` renders as given, not stringified).
  */
-export function Fact({ label, value, mono }) {
+export function Fact({ label, value, mono, variant = 'row', startIcon, progress, progressColor, progressValueText }) {
+    if (variant === 'metric') {
+        const shown = typeof value === 'string' || typeof value === 'number' ? (_jsx(Text, { fontSize: "$1", fontWeight: "500", color: "$ink", numberOfLines: 1, style: mono ? { fontFamily: fontMono } : undefined, children: value })) : (value);
+        return (_jsxs(XStack, { "data-slot": "fact", "data-variant": "metric", items: "center", gap: "$2", minH: 24, children: [_jsxs(XStack, { flex: 1, minW: 0, items: "center", gap: "$1", children: [startIcon, _jsx(Text, { fontSize: "$1", fontWeight: "500", color: "$hint", numberOfLines: 1, children: label })] }), progress !== undefined ? (_jsx(ProgressRing, { value: progress, size: "sm", ...(progressColor ? { barColor: progressColor } : null), "aria-label": `${label}${progressValueText ? `: ${progressValueText}` : ''}`, children: shown })) : (shown)] }));
+    }
     return (_jsxs(XStack, { justify: "space-between", items: "center", py: "$1.5", borderBottomWidth: 1, borderColor: "$borderColor", gap: "$3", children: [_jsx(Text, { fontSize: "$2", color: "$color11", children: label }), typeof value === 'string' ? (_jsx(Text, { fontSize: "$2", color: "$color12", fontWeight: "600", numberOfLines: 1, style: mono ? { fontFamily: fontMono } : undefined, children: value })) : (value)] }));
 }
 //# sourceMappingURL=Fact.js.map

package/dist/product/Fact.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fact.js","sourceRoot":"","sources":["../../src/product/Fact.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAaxC;;;;;;;;;GASG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAa;IACpD,OAAO,CACL,MAAC,MAAM,IACL,OAAO,EAAC,eAAe,EACvB,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,MAAM,EACT,iBAAiB,EAAE,CAAC,EACpB,WAAW,EAAC,cAAc,EAC1B,GAAG,EAAC,IAAI,aAER,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,YACjC,KAAK,GACD,EACN,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,IAAI,IACH,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,KAAK,EAChB,aAAa,EAAE,CAAC,EAChB,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,YAEjD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACM,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"Fact.js","sourceRoot":"","sources":["../../src/product/Fact.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEzC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAA;AA4B5D;;;;;;;;;GASG;AACH,MAAM,UAAU,IAAI,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,GAAG,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,iBAAiB,EAAa;IAC5H,IAAI,OAAO,KAAK,QAAQ,EAAE,CAAC;QACzB,MAAM,KAAK,GACT,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CACvD,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,MAAM,EAAC,aAAa,EAAE,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,YACnH,KAAK,GACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,CAAA;QACH,OAAO,CACL,MAAC,MAAM,iBAAW,MAAM,kBAAc,QAAQ,EAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAE,EAAE,aAC7E,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC9C,SAAS,EACV,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAE,CAAC,YAChE,KAAK,GACD,IACA,EACR,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,YAAY,IACX,KAAK,EAAE,QAAQ,EACf,IAAI,EAAC,IAAI,KACL,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,aAAa,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,gBAC5C,GAAG,KAAK,GAAG,iBAAiB,CAAC,CAAC,CAAC,KAAK,iBAAiB,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,YAEzE,KAAK,GACO,CAChB,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACM,CACV,CAAA;IACH,CAAC;IACD,OAAO,CACL,MAAC,MAAM,IACL,OAAO,EAAC,eAAe,EACvB,KAAK,EAAC,QAAQ,EACd,EAAE,EAAC,MAAM,EACT,iBAAiB,EAAE,CAAC,EACpB,WAAW,EAAC,cAAc,EAC1B,GAAG,EAAC,IAAI,aAER,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,UAAU,YACjC,KAAK,GACD,EACN,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,KAAC,IAAI,IACH,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,KAAK,EAChB,aAAa,EAAE,CAAC,EAChB,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,YAEjD,KAAK,GACD,CACR,CAAC,CAAC,CAAC,CACF,KAAK,CACN,IACM,CACV,CAAA;AACH,CAAC"}

package/dist/product/Field.cjs

@@ -51,12 +51,24 @@ function FieldTextArea({ value, onChange, disabled, rows = 6, }) {
             onChange(v);
         }, disabled: disabled, numberOfLines: rows }));
 }
-function FieldSwitch({ checked, onChange, disabled, }) {
+/**
+ * A switch, alone or as a settings row.
+ *
+ * With a `label` it is twenty-ui's SettingsRow (MIT, NOTICE): the whole 32px row
+ * is the switch's `<label>`, so a press anywhere on it toggles, with an optional
+ * leading element and a description after a middle dot, the row's hover rung
+ * and the record row's corner and inset. Without one it is the bare switch it
+ * always was.
+ */
+function FieldSwitch({ checked, onChange, disabled, label, description, start, }) {
     const track = useFieldTrack('FieldSwitch');
-    return ((0, jsx_runtime_1.jsx)(gui_1.Switch, { checked: checked, onCheckedChange: (v) => {
+    const control = ((0, jsx_runtime_1.jsx)(gui_1.Switch, { checked: checked, onCheckedChange: (v) => {
             track({ action: 'change', value: v });
             onChange(v);
         }, disabled: disabled, size: "$3", children: (0, jsx_runtime_1.jsx)(gui_1.Switch.Thumb, {}) }));
+    if (label == null)
+        return control;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...{ 'data-slot': 'field-switch-row' }, render: "label", items: "center", gap: 8, px: 4, minH: 32, rounded: "$xs", cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : { bg: '$hover' }, children: [start, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flex: 1, minW: 0, items: "center", gap: 4, children: [(0, jsx_runtime_1.jsx)(gui_1.Text, { fontSize: "$2", color: "$aside", numberOfLines: 1, shrink: 0, children: label }), description ? ((0, jsx_runtime_1.jsxs)(gui_1.Text, { fontSize: "$2", color: "$hint", numberOfLines: 1, shrink: 1, children: ['· ', description] })) : null] }), control] }));
 }
 /**
  * A labeled dropdown.

package/dist/product/Field.d.ts

@@ -48,10 +48,25 @@ export declare function FieldTextArea({ value, onChange, disabled, rows, }: {
     disabled?: boolean;
     rows?: number;
 }): import("react").JSX.Element;
-export declare function FieldSwitch({ checked, onChange, disabled, }: {
+/**
+ * A switch, alone or as a settings row.
+ *
+ * With a `label` it is twenty-ui's SettingsRow (MIT, NOTICE): the whole 32px row
+ * is the switch's `<label>`, so a press anywhere on it toggles, with an optional
+ * leading element and a description after a middle dot, the row's hover rung
+ * and the record row's corner and inset. Without one it is the bare switch it
+ * always was.
+ */
+export declare function FieldSwitch({ checked, onChange, disabled, label, description, start, }: {
     checked: boolean;
     onChange: (v: boolean) => void;
     disabled?: boolean;
+    /** The row's words; the switch's accessible name. */
+    label?: ReactNode;
+    /** Said after the label, quieter. */
+    description?: ReactNode;
+    /** An icon or avatar before the label. */
+    start?: ReactNode;
 }): import("react").JSX.Element;
 export declare function FieldSelect({ value, options, onChange, disabled, placeholder, }: {
     value: string;

package/dist/product/Field.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/product/Field.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAiD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AA2BrF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAanF;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,EAAE,GACH,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;OAUG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,+BAoBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,+BAaA;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BAeA;AA+CD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAuB,GACxB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,+BA4BA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BA0BA"}
+{"version":3,"file":"Field.d.ts","sourceRoot":"","sources":["../../src/product/Field.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAiD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AA2BrF;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAanF;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,EAAE,GACH,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;;;;;;;OAUG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,+BAoBA;AAED,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,+BAaA;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,GACN,EAAE;IACD,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,qDAAqD;IACrD,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,qCAAqC;IACrC,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,+BA4CA;AA+CD,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAuB,GACxB,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB,+BA4BA;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,+BA0BA"}

package/dist/product/Field.js

@@ -43,12 +43,24 @@ export function FieldTextArea({ value, onChange, disabled, rows = 6, }) {
             onChange(v);
         }, disabled: disabled, numberOfLines: rows }));
 }
-export function FieldSwitch({ checked, onChange, disabled, }) {
+/**
+ * A switch, alone or as a settings row.
+ *
+ * With a `label` it is twenty-ui's SettingsRow (MIT, NOTICE): the whole 32px row
+ * is the switch's `<label>`, so a press anywhere on it toggles, with an optional
+ * leading element and a description after a middle dot, the row's hover rung
+ * and the record row's corner and inset. Without one it is the bare switch it
+ * always was.
+ */
+export function FieldSwitch({ checked, onChange, disabled, label, description, start, }) {
     const track = useFieldTrack('FieldSwitch');
-    return (_jsx(Switch, { checked: checked, onCheckedChange: (v) => {
+    const control = (_jsx(Switch, { checked: checked, onCheckedChange: (v) => {
             track({ action: 'change', value: v });
             onChange(v);
         }, disabled: disabled, size: "$3", children: _jsx(Switch.Thumb, {}) }));
+    if (label == null)
+        return control;
+    return (_jsxs(XStack, { ...{ 'data-slot': 'field-switch-row' }, render: "label", items: "center", gap: 8, px: 4, minH: 32, rounded: "$xs", cursor: disabled ? 'default' : 'pointer', opacity: disabled ? 0.5 : 1, hoverStyle: disabled ? undefined : { bg: '$hover' }, children: [start, _jsxs(XStack, { flex: 1, minW: 0, items: "center", gap: 4, children: [_jsx(Text, { fontSize: "$2", color: "$aside", numberOfLines: 1, shrink: 0, children: label }), description ? (_jsxs(Text, { fontSize: "$2", color: "$hint", numberOfLines: 1, shrink: 1, children: ['· ', description] })) : null] }), control] }));
 }
 /**
  * A labeled dropdown.

package/dist/product/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/product/Field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAA;AACrF,OAAO,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,MAAM,EACN,MAAM,GACP,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAgB,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAE7C,kFAAkF;AAClF,0EAA0E;AAC1E,MAAM,gBAAgB,GAAG,aAAa,CAAqB,SAAS,CAAC,CAAA;AAErE;yEACyE;AACzE,SAAS,aAAa,CAAC,SAAiB;IACtC,MAAM,KAAK,GAAG,OAAO,EAAE,CAAA;IACvB,MAAM,IAAI,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA;IACzC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAA;AACpD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA0C;IAClF,OAAO,CACL,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACvC,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,YAAY,EAAC,QAAQ,EAAC,MAAM,aACjD,KAAC,KAAK,IAAC,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACzE,KAAK,GACA,EACR,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,YACzC,QAAQ,GACF,IACF,GACmB,CAC7B,CAAA;AACH,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,EAAE,GA2BH;IACC,MAAM,KAAK,GAAG,aAAa,CAAC,WAAW,CAAC,CAAA;IACxC,OAAO,CACL,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,CAAC,CAAS,EAAE,EAAE;YAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YAC5D,QAAQ,CAAC,CAAC,CAAC,CAAA;QACb,CAAC,EACD,QAAQ,EAAE,QAAQ,KAId,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAC3B,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,EAAE,EACN,cAAc,EAAC,MAAM,GACrB,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,CAAC,GAMT;IACC,MAAM,KAAK,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;IAC5C,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,CAAC,CAAS,EAAE,EAAE;YAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YAC/C,QAAQ,CAAC,CAAC,CAAC,CAAA;QACb,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,IAAI,GACnB,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,QAAQ,GAKT;IACC,MAAM,KAAK,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;IAC1C,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,CAAC,CAAU,EAAE,EAAE;YAC9B,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAA;YACrC,QAAQ,CAAC,CAAC,CAAC,CAAA;QACb,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,IAAI,YAET,KAAC,MAAM,CAAC,KAAK,KAAG,GACT,CACV,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,GAAG,sBAAsB,kBAAkB,CACtD,gNAAgN,CACjN,EAAE,CAAA;AAEH,SAAS,WAAW,CAAC,QAAkB;IACrC,OAAO;QACL,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,YAAY;QACvB,UAAU,EAAE,MAAM;QAClB,gBAAgB,EAAE,MAAM;QACxB,aAAa,EAAE,MAAM;QACrB,UAAU,EAAE,0BAA0B,OAAO,gCAAgC;QAC7E,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,8BAA8B;QACtC,6EAA6E;QAC7E,4EAA4E;QAC5E,sEAAsE;QACtE,4EAA4E;QAC5E,2DAA2D;QAC3D,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,mBAAmB;QAC5B,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;QAC5C,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAA;AACH,CAAC;AAED,MAAM,YAAY,GAAkB,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAA;AAE5F,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,SAAS,GAOxB;IACC,0EAA0E;IAC1E,4EAA4E;IAC5E,MAAM,KAAK,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;IAC1C,MAAM,eAAe,GAAG,KAAK,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAChE,OAAO,CACL,kBACE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EACnC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,CAAA;YACzD,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACjC,CAAC,EACD,QAAQ,EAAE,QAAQ,gBACN,WAAW,EACvB,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,aAE3B,eAAe,CAAC,CAAC,CAAC,CACjB,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,QAAC,KAAK,EAAE,YAAY,YAC1C,WAAW,GACL,CACV,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAAkB,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,YAC9C,GAAG,IADO,GAAG,CAEP,CACV,CAAC,IACK,CACV,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,GAQT;IACC,MAAM,KAAK,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;IAC1C,OAAO,CACL,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,YAC1C,KAAK,GACD,EACP,MAAC,MAAM,IACL,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,CAAC,KAAK,CAAC,EACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;oBACnB,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAA;oBAC/C,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAA;gBACvB,CAAC,EACD,QAAQ,EAAE,QAAQ,aAElB,KAAC,MAAM,CAAC,KAAK,cACX,KAAC,MAAM,CAAC,WAAW,KAAG,GACT,EACf,KAAC,MAAM,CAAC,KAAK,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,SAAG,IAC5B,IACF,CACV,CAAA;AACH,CAAC"}
+{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../src/product/Field.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;GAMG;AACH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAsC,MAAM,OAAO,CAAA;AACrF,OAAO,EACL,KAAK,EACL,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,MAAM,EACN,MAAM,GACP,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAgB,MAAM,cAAc,CAAA;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAE7C,kFAAkF;AAClF,0EAA0E;AAC1E,MAAM,gBAAgB,GAAG,aAAa,CAAqB,SAAS,CAAC,CAAA;AAErE;yEACyE;AACzE,SAAS,aAAa,CAAC,SAAiB;IACtC,MAAM,KAAK,GAAG,OAAO,EAAE,CAAA;IACvB,MAAM,IAAI,GAAG,UAAU,CAAC,gBAAgB,CAAC,CAAA;IACzC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,CAAC,CAAA;AACpD,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA0C;IAClF,OAAO,CACL,KAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YACvC,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,YAAY,EAAC,QAAQ,EAAC,MAAM,aACjD,KAAC,KAAK,IAAC,KAAK,EAAC,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,QAAQ,EAAC,IAAI,EAAC,GAAG,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE,YACzE,KAAK,GACA,EACR,KAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,IAAI,EAAE,GAAG,EAAE,YACzC,QAAQ,GACF,IACF,GACmB,CAC7B,CAAA;AACH,CAAC;AAED,MAAM,UAAU,SAAS,CAAC,EACxB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,WAAW,EACX,YAAY,EACZ,EAAE,GA2BH;IACC,MAAM,KAAK,GAAG,aAAa,CAAC,WAAW,CAAC,CAAA;IACxC,OAAO,CACL,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,CAAC,CAAS,EAAE,EAAE;YAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YAC5D,QAAQ,CAAC,CAAC,CAAC,CAAA;QACb,CAAC,EACD,QAAQ,EAAE,QAAQ,KAId,MAAM,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,EAC3B,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,EAAE,EAAE,EAAE,EACN,cAAc,EAAC,MAAM,GACrB,CACH,CAAA;AACH,CAAC;AAED,MAAM,UAAU,aAAa,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,CAAC,GAMT;IACC,MAAM,KAAK,GAAG,aAAa,CAAC,eAAe,CAAC,CAAA;IAC5C,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,CAAC,CAAS,EAAE,EAAE;YAC1B,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;YAC/C,QAAQ,CAAC,CAAC,CAAC,CAAA;QACb,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,aAAa,EAAE,IAAI,GACnB,CACH,CAAA;AACH,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,GAWN;IACC,MAAM,KAAK,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;IAC1C,MAAM,OAAO,GAAG,CACd,KAAC,MAAM,IACL,OAAO,EAAE,OAAO,EAChB,eAAe,EAAE,CAAC,CAAU,EAAE,EAAE;YAC9B,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,CAAA;YACrC,QAAQ,CAAC,CAAC,CAAC,CAAA;QACb,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,IAAI,YAET,KAAC,MAAM,CAAC,KAAK,KAAG,GACT,CACV,CAAA;IACD,IAAI,KAAK,IAAI,IAAI;QAAE,OAAO,OAAO,CAAA;IACjC,OAAO,CACL,MAAC,MAAM,OACA,EAAE,WAAW,EAAE,kBAAkB,EAAa,EACnD,MAAM,EAAC,OAAO,EACd,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,CAAC,EACN,EAAE,EAAE,CAAC,EACL,IAAI,EAAE,EAAE,EACR,OAAO,EAAC,KAAK,EACb,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EACxC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAC3B,UAAU,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,aAElD,KAAK,EACN,MAAC,MAAM,IAAC,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAE,CAAC,aAC7C,KAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,EAAC,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,YAC3D,KAAK,GACD,EACN,WAAW,CAAC,CAAC,CAAC,CACb,MAAC,IAAI,IAAC,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,OAAO,EAAC,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,aAC1D,IAAI,EACJ,WAAW,IACP,CACR,CAAC,CAAC,CAAC,IAAI,IACD,EACR,OAAO,IACD,CACV,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,MAAM,OAAO,GAAG,sBAAsB,kBAAkB,CACtD,gNAAgN,CACjN,EAAE,CAAA;AAEH,SAAS,WAAW,CAAC,QAAkB;IACrC,OAAO;QACL,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,YAAY;QACvB,UAAU,EAAE,MAAM;QAClB,gBAAgB,EAAE,MAAM;QACxB,aAAa,EAAE,MAAM;QACrB,UAAU,EAAE,0BAA0B,OAAO,gCAAgC;QAC7E,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,8BAA8B;QACtC,6EAA6E;QAC7E,4EAA4E;QAC5E,sEAAsE;QACtE,4EAA4E;QAC5E,2DAA2D;QAC3D,YAAY,EAAE,CAAC;QACf,OAAO,EAAE,mBAAmB;QAC5B,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,MAAM;QAClB,UAAU,EAAE,SAAS;QACrB,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;QAC5C,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;KAC5B,CAAA;AACH,CAAC;AAED,MAAM,YAAY,GAAkB,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,gBAAgB,EAAE,CAAA;AAE5F,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,WAAW,GAAG,SAAS,GAOxB;IACC,0EAA0E;IAC1E,4EAA4E;IAC5E,MAAM,KAAK,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;IAC1C,MAAM,eAAe,GAAG,KAAK,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAA;IAChE,OAAO,CACL,kBACE,KAAK,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,EACnC,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC,CAAA;YACzD,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACjC,CAAC,EACD,QAAQ,EAAE,QAAQ,gBACN,WAAW,EACvB,KAAK,EAAE,WAAW,CAAC,QAAQ,CAAC,aAE3B,eAAe,CAAC,CAAC,CAAC,CACjB,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,QAAC,KAAK,EAAE,YAAY,YAC1C,WAAW,GACL,CACV,CAAC,CAAC,CAAC,IAAI,EACP,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAAkB,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,YAAY,YAC9C,GAAG,IADO,GAAG,CAEP,CACV,CAAC,IACK,CACV,CAAA;AACH,CAAC;AAED,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,GAQT;IACC,MAAM,KAAK,GAAG,aAAa,CAAC,aAAa,CAAC,CAAA;IAC1C,OAAO,CACL,MAAC,MAAM,IAAC,GAAG,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,aAC7B,KAAC,IAAI,IAAC,KAAK,EAAE,EAAE,EAAE,QAAQ,EAAC,IAAI,EAAC,KAAK,EAAC,QAAQ,YAC1C,KAAK,GACD,EACP,MAAC,MAAM,IACL,IAAI,EAAE,CAAC,EACP,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,CAAC,KAAK,CAAC,EACd,aAAa,EAAE,CAAC,CAAC,EAAE,EAAE;oBACnB,KAAK,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAA;oBAC/C,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,CAAC,CAAA;gBACvB,CAAC,EACD,QAAQ,EAAE,QAAQ,aAElB,KAAC,MAAM,CAAC,KAAK,cACX,KAAC,MAAM,CAAC,WAAW,KAAG,GACT,EACf,KAAC,MAAM,CAAC,KAAK,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,SAAG,IAC5B,IACF,CACV,CAAA;AACH,CAAC"}