@hanzo/ui 8.27.91 → 8.28.0

package/dist/backends/gui/shortcut.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Shortcut — a keyboard shortcut as keycaps, named for the platform it is read
+ * on, and spoken as one phrase.
+ *
+ * A shortcut is one combination (`['Mod', 'K']`) or a sequence of them
+ * (`[['G'], ['P']]`, "G then P"). Key names translate per platform: `Mod` and
+ * `CommandOrControl` are ⌘ on a Mac and Ctrl elsewhere, `Alt` is ⌥ on a Mac,
+ * Enter is ⏎, arrows and Escape take their glyphs. The whole thing is one image
+ * to assistive technology, labelled in words ("Command + K", "G then P"), and
+ * the caps inside it are hidden — a screen reader hears the shortcut once, not
+ * a list of symbols.
+ *
+ * The platform is read through `useSyncExternalStore` with a server answer of
+ * "other", so a server render and the first client render agree and a Mac
+ * swaps Ctrl for ⌘ right after hydration rather than mismatching it.
+ *
+ * Re-expressed from twenty-ui's Shortcut and formatShortcut (MIT, see NOTICE):
+ * keys, text and button variants, a `desktop` visibility that hides it under a
+ * coarse pointer, keys 4px apart in a combination.
+ */
+import { SizableText, XStack } from '@hanzo/gui';
+import { useSyncExternalStore } from 'react';
+import { Kbd } from './kbd.js';
+import { slot } from './slot.js';
+/** Every key name the two platforms spell differently, by its lowercase alias. */
+const KEYS = (platform) => {
+    const mac = platform === 'mac';
+    const mod = mac ? { glyph: '⌘', word: 'Command' } : { glyph: 'Ctrl', word: 'Control' };
+    return {
+        mod,
+        commandorcontrol: mod,
+        cmdorctrl: mod,
+        command: { glyph: '⌘', word: 'Command' },
+        cmd: { glyph: '⌘', word: 'Command' },
+        meta: { glyph: '⌘', word: 'Command' },
+        control: mac ? { glyph: '⌃', word: 'Control' } : { glyph: 'Ctrl', word: 'Control' },
+        ctrl: mac ? { glyph: '⌃', word: 'Control' } : { glyph: 'Ctrl', word: 'Control' },
+        alt: mac ? { glyph: '⌥', word: 'Option' } : { glyph: 'Alt', word: 'Alt' },
+        option: mac ? { glyph: '⌥', word: 'Option' } : { glyph: 'Alt', word: 'Alt' },
+        shift: { glyph: '⇧', word: 'Shift' },
+        enter: { glyph: '⏎', word: 'Enter' },
+        return: { glyph: '⏎', word: 'Enter' },
+        backspace: { glyph: '⌫', word: 'Backspace' },
+        delete: { glyph: '⌦', word: 'Delete' },
+        escape: { glyph: 'esc', word: 'Escape' },
+        esc: { glyph: 'esc', word: 'Escape' },
+        tab: { glyph: '⇥', word: 'Tab' },
+        space: { glyph: 'Space', word: 'Space' },
+        arrowup: { glyph: '↑', word: 'Up arrow' },
+        arrowdown: { glyph: '↓', word: 'Down arrow' },
+        arrowleft: { glyph: '←', word: 'Left arrow' },
+        arrowright: { glyph: '→', word: 'Right arrow' },
+        up: { glyph: '↑', word: 'Up arrow' },
+        down: { glyph: '↓', word: 'Down arrow' },
+        left: { glyph: '←', word: 'Left arrow' },
+        right: { glyph: '→', word: 'Right arrow' },
+    };
+};
+/** A key's glyph and word on `platform`; a plain key is itself, a letter uppercased. */
+export const keyName = (key, platform) => {
+    const known = KEYS(platform)[key.toLowerCase()];
+    if (known)
+        return known;
+    const label = key.length === 1 ? key.toUpperCase() : key;
+    return { glyph: label, word: label };
+};
+/** `keys` as a list of combinations, whichever shape it was given in. */
+export const combinations = (keys) => keys.length > 0 && Array.isArray(keys[0]) ? keys.map((c) => [...c]) : [[...keys]];
+/** The shortcut as text, without rendering: "⌘K", "Ctrl K", "G then P". */
+export function formatShortcut(keys, options = {}) {
+    const platform = options.platform ?? detect();
+    const join = options.combinationSeparator ?? (platform === 'mac' ? '' : ' ');
+    return combinations(keys)
+        .map((c) => c.map((k) => keyName(k, platform).glyph).join(join))
+        .join(` ${options.sequenceJoinLabel ?? 'then'} `);
+}
+/** The shortcut in words, for assistive technology: "Command + K", "G then P". */
+export function speakShortcut(keys, platform, then = 'then') {
+    return combinations(keys)
+        .map((c) => c.map((k) => keyName(k, platform).word).join(' + '))
+        .join(` ${then} `);
+}
+/** macOS and iOS read as a Mac; anything else, or no navigator, does not. */
+function detect() {
+    if (typeof navigator === 'undefined')
+        return 'other';
+    const nav = navigator;
+    const p = nav.userAgentData?.platform ?? nav.platform ?? nav.userAgent ?? '';
+    return /mac|iphone|ipad|ipod/i.test(p) ? 'mac' : 'other';
+}
+const never = () => () => { };
+export function Shortcut({ keys, platform, variant = 'keys', visibility = 'always', sequenceJoinLabel = 'then', combinationSeparator, ...props }) {
+    const detected = useSyncExternalStore(never, detect, () => 'other');
+    const on = platform ?? detected;
+    const label = speakShortcut(keys, on, sequenceJoinLabel);
+    const hidden = visibility === 'desktop' ? { $touchable: { display: 'none' } } : null;
+    const frame = {
+        ...slot('shortcut'),
+        'data-variant': variant,
+        role: 'img',
+        'aria-label': label,
+        display: 'inline-flex',
+        items: 'center',
+        ...hidden,
+    };
+    if (variant === 'text' || variant === 'button') {
+        const text = formatShortcut(keys, { platform: on, sequenceJoinLabel, combinationSeparator });
+        return (_jsxs(XStack, { ...frame, ...(variant === 'button' ? { gap: 6, ml: '$1', opacity: 0.5 } : null), ...props, children: [variant === 'button' ? (_jsx(XStack, { "aria-hidden": true, width: 1, height: 8, opacity: 0.4, style: { backgroundColor: 'currentColor' } })) : null, _jsx(SizableText, { "aria-hidden": true, size: "$2", ...(variant === 'button' ? { fontWeight: '500' } : null), children: text })] }));
+    }
+    const combos = combinations(keys);
+    return (_jsx(XStack, { ...frame, gap: "$1", ...props, children: combos.map((combo, i) => (_jsxs(XStack, { "aria-hidden": true, display: "inline-flex", items: "center", gap: "$1", children: [i > 0 ? (_jsx(SizableText, { size: "$1", color: "$hint", children: sequenceJoinLabel })) : null, combo.map((k, j) => (_jsx(Kbd, { variant: "cap", children: keyName(k, on).glyph }, j)))] }, i))) }));
+}
+//# sourceMappingURL=shortcut.js.map

package/dist/backends/gui/shortcut.js.map

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

package/dist/backends/gui/skeleton.cjs

@@ -1,14 +1,45 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Skeleton = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const box_1 = require("../../box.cjs");
-const cn_1 = require("../../core/cn.cjs");
-const Skeleton = ({ className, ...props }) => ((0, jsx_runtime_1.jsx)(box_1.Box
-// Announced as busy so a screen reader says "loading" rather than reading
-// out an empty box, or nothing at all. A boolean, not the string "true":
-// gui types the ARIA states as booleans and React writes the attribute out
-// either way.
-, { "aria-busy": true, "aria-live": "polite", "data-motion": "pulse", className: (0, cn_1.cn)('rounded-md bg-muted', className), ...props }));
+exports.SKELETON_HEIGHT = void 0;
 exports.Skeleton = Skeleton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Skeleton — the shape of content that has not arrived. ONE implementation:
+ * `@hanzo/ui`'s `Skeleton` is this, and `@hanzo/ui/product`'s `Skeleton` (with
+ * `Skeleton.Text`) is this with its own defaults.
+ *
+ * It is a box with a highlight sweeping across it and nothing else, so the SIZE
+ * is the caller's to state and should match what will land there. A skeleton
+ * that is not the size of its content is worse than none: the page reflows when
+ * the real thing appears, which is the jump the skeleton existed to prevent.
+ *
+ * After twenty-ui's Skeleton (MIT, NOTICE): the base is the hover rung, the
+ * highlight a faint glass band, 4px corners, a 1.5s sweep (`--duration-loop`,
+ * stopped under reduced motion), height presets xs 13 / s 16 / m 24 / l 32 /
+ * xl 40, and two layouts — `inline` takes a line box of the text around it
+ * (it holds a zero-width non-joiner, so it is a line tall with no height
+ * given), `block` is a box of its own. The highlight is `--glass` rather than
+ * the panel rung: twenty-ui's is 2% black on light and 3% white on dark, and
+ * the panel rung is a SOLID step that sits darker than the hover rung in the
+ * dark theme, which would sweep a shadow instead of a light.
+ *
+ * Hidden from assistive technology: a placeholder is scenery, and the content
+ * is what should be read when it lands.
+ *
+ * Class notation is still read (`<Skeleton className="h-4 w-32" />`), the way
+ * `Box` reads it, so call sites written against the Box version keep their
+ * sizes; a class it does not know stays a class.
+ */
+const gui_1 = require("@hanzo/gui");
+const tw_1 = require("../../tw.cjs");
+const slot_1 = require("./slot.cjs");
+/** The height presets, px. */
+exports.SKELETON_HEIGHT = { xs: 13, s: 16, m: 24, l: 32, xl: 40 };
+/** The band that sweeps: transparent, the glass light, transparent. */
+const BAND = 'linear-gradient(90deg, transparent 0%, var(--glass, rgba(128, 128, 128, 0.08)) 50%, transparent 100%)';
+function Skeleton({ size, layout = 'inline', animated = true, className, ...props }) {
+    const { props: read, rest } = (0, tw_1.tw)(className);
+    const height = size ? exports.SKELETON_HEIGHT[size] : layout === 'block' ? '1em' : undefined;
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('skeleton'), "aria-hidden": true, "data-layout": layout, "data-motion": animated ? 'shimmer' : undefined, display: layout === 'inline' ? 'inline-flex' : 'flex', width: "100%", ...(height === undefined ? null : { height }), rounded: "$xs", bg: "$hover", backgroundImage: animated ? BAND : undefined, backgroundSize: "160px 100%", backgroundRepeat: "no-repeat", overflow: "hidden", ...read, ...(rest ? { className: rest } : null), ...props, children: layout === 'inline' && height === undefined && !('height' in props) && !('height' in read) ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", "aria-hidden": true, children: '‌' })) : null }));
+}

package/dist/backends/gui/skeleton.d.ts

@@ -1,12 +1,50 @@
 /**
- * Skeleton — the shape of content that has not arrived.
+ * Skeleton — the shape of content that has not arrived. ONE implementation:
+ * `@hanzo/ui`'s `Skeleton` is this, and `@hanzo/ui/product`'s `Skeleton` (with
+ * `Skeleton.Text`) is this with its own defaults.
  *
- * It is a box with the pulse on it and nothing else, so the SIZE is the caller's
- * to state and should match what will land there. A skeleton that is not the
- * size of its content is worse than none: the page reflows when the real thing
- * appears, which is the jump the skeleton existed to prevent.
+ * It is a box with a highlight sweeping across it and nothing else, so the SIZE
+ * is the caller's to state and should match what will land there. A skeleton
+ * that is not the size of its content is worse than none: the page reflows when
+ * the real thing appears, which is the jump the skeleton existed to prevent.
+ *
+ * After twenty-ui's Skeleton (MIT, NOTICE): the base is the hover rung, the
+ * highlight a faint glass band, 4px corners, a 1.5s sweep (`--duration-loop`,
+ * stopped under reduced motion), height presets xs 13 / s 16 / m 24 / l 32 /
+ * xl 40, and two layouts — `inline` takes a line box of the text around it
+ * (it holds a zero-width non-joiner, so it is a line tall with no height
+ * given), `block` is a box of its own. The highlight is `--glass` rather than
+ * the panel rung: twenty-ui's is 2% black on light and 3% white on dark, and
+ * the panel rung is a SOLID step that sits darker than the hover rung in the
+ * dark theme, which would sweep a shadow instead of a light.
+ *
+ * Hidden from assistive technology: a placeholder is scenery, and the content
+ * is what should be read when it lands.
+ *
+ * Class notation is still read (`<Skeleton className="h-4 w-32" />`), the way
+ * `Box` reads it, so call sites written against the Box version keep their
+ * sizes; a class it does not know stays a class.
  */
-import * as React from 'react';
-import { Box } from '../../box.js';
-export declare const Skeleton: ({ className, ...props }: React.ComponentProps<typeof Box>) => React.JSX.Element;
+import { YStack } from '@hanzo/gui';
+import type { ComponentProps } from 'react';
+import { type ClassValue } from '../../tw.js';
+/** The height presets, px. */
+export declare const SKELETON_HEIGHT: {
+    readonly xs: 13;
+    readonly s: 16;
+    readonly m: 24;
+    readonly l: 32;
+    readonly xl: 40;
+};
+export type SkeletonSize = keyof typeof SKELETON_HEIGHT;
+export type SkeletonProps = Omit<ComponentProps<typeof YStack>, 'children' | 'size'> & {
+    /** A height preset; a `height` given beside it wins. */
+    size?: SkeletonSize;
+    /** `inline` (default) is a line of the surrounding text; `block` is a box. */
+    layout?: 'inline' | 'block';
+    /** The sweep; off, a still block. Off under reduced motion regardless. */
+    animated?: boolean;
+    className?: ClassValue;
+};
+export declare function Skeleton({ size, layout, animated, className, ...props }: SkeletonProps): import("react").JSX.Element;
 //# sourceMappingURL=skeleton.d.ts.map

package/dist/backends/gui/skeleton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAG/B,eAAO,MAAM,QAAQ,4BAA6B,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,sBAYjF,CAAA"}
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/skeleton.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAe,MAAM,EAAE,MAAM,YAAY,CAAA;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAM,KAAK,UAAU,EAAE,MAAM,UAAU,CAAA;AAG9C,8BAA8B;AAC9B,eAAO,MAAM,eAAe;aAAK,EAAE,EAAE,EAAE;aAAE,CAAC,EAAE,EAAE;aAAE,CAAC,EAAE,EAAE;aAAE,CAAC,EAAE,EAAE;aAAE,EAAE,EAAE,EAAE;CAAW,CAAA;AAE/E,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,eAAe,CAAA;AAEvD,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IACrF,wDAAwD;IACxD,IAAI,CAAC,EAAE,YAAY,CAAA;IACnB,8EAA8E;IAC9E,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,UAAU,CAAA;CACvB,CAAA;AAKD,wBAAgB,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAiB,EAAE,QAAe,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,aAAa,+BA+BxG"}

package/dist/backends/gui/skeleton.js

@@ -1,11 +1,42 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '../../box.js';
-import { cn } from '../../core/cn.js';
-export const Skeleton = ({ className, ...props }) => (_jsx(Box
-// Announced as busy so a screen reader says "loading" rather than reading
-// out an empty box, or nothing at all. A boolean, not the string "true":
-// gui types the ARIA states as booleans and React writes the attribute out
-// either way.
-, { "aria-busy": true, "aria-live": "polite", "data-motion": "pulse", className: cn('rounded-md bg-muted', className), ...props }));
+/**
+ * Skeleton — the shape of content that has not arrived. ONE implementation:
+ * `@hanzo/ui`'s `Skeleton` is this, and `@hanzo/ui/product`'s `Skeleton` (with
+ * `Skeleton.Text`) is this with its own defaults.
+ *
+ * It is a box with a highlight sweeping across it and nothing else, so the SIZE
+ * is the caller's to state and should match what will land there. A skeleton
+ * that is not the size of its content is worse than none: the page reflows when
+ * the real thing appears, which is the jump the skeleton existed to prevent.
+ *
+ * After twenty-ui's Skeleton (MIT, NOTICE): the base is the hover rung, the
+ * highlight a faint glass band, 4px corners, a 1.5s sweep (`--duration-loop`,
+ * stopped under reduced motion), height presets xs 13 / s 16 / m 24 / l 32 /
+ * xl 40, and two layouts — `inline` takes a line box of the text around it
+ * (it holds a zero-width non-joiner, so it is a line tall with no height
+ * given), `block` is a box of its own. The highlight is `--glass` rather than
+ * the panel rung: twenty-ui's is 2% black on light and 3% white on dark, and
+ * the panel rung is a SOLID step that sits darker than the hover rung in the
+ * dark theme, which would sweep a shadow instead of a light.
+ *
+ * Hidden from assistive technology: a placeholder is scenery, and the content
+ * is what should be read when it lands.
+ *
+ * Class notation is still read (`<Skeleton className="h-4 w-32" />`), the way
+ * `Box` reads it, so call sites written against the Box version keep their
+ * sizes; a class it does not know stays a class.
+ */
+import { SizableText, YStack } from '@hanzo/gui';
+import { tw } from '../../tw.js';
+import { slot } from './slot.js';
+/** The height presets, px. */
+export const SKELETON_HEIGHT = { xs: 13, s: 16, m: 24, l: 32, xl: 40 };
+/** The band that sweeps: transparent, the glass light, transparent. */
+const BAND = 'linear-gradient(90deg, transparent 0%, var(--glass, rgba(128, 128, 128, 0.08)) 50%, transparent 100%)';
+export function Skeleton({ size, layout = 'inline', animated = true, className, ...props }) {
+    const { props: read, rest } = tw(className);
+    const height = size ? SKELETON_HEIGHT[size] : layout === 'block' ? '1em' : undefined;
+    return (_jsx(YStack, { ...slot('skeleton'), "aria-hidden": true, "data-layout": layout, "data-motion": animated ? 'shimmer' : undefined, display: layout === 'inline' ? 'inline-flex' : 'flex', width: "100%", ...(height === undefined ? null : { height }), rounded: "$xs", bg: "$hover", backgroundImage: animated ? BAND : undefined, backgroundSize: "160px 100%", backgroundRepeat: "no-repeat", overflow: "hidden", ...read, ...(rest ? { className: rest } : null), ...props, children: layout === 'inline' && height === undefined && !('height' in props) && !('height' in read) ? (_jsx(SizableText, { size: "$2", "aria-hidden": true, children: '‌' })) : null }));
+}
 //# sourceMappingURL=skeleton.js.map

package/dist/backends/gui/skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/backends/gui/skeleton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAYZ,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAC/B,OAAO,EAAE,EAAE,EAAE,MAAM,eAAe,CAAA;AAElC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAoC,EAAE,EAAE,CAAC,CACrF,KAAC,GAAG;AACF,0EAA0E;AAC1E,yEAAyE;AACzE,2EAA2E;AAC3E,cAAc;iBACH,IAAI,eACL,QAAQ,iBACN,OAAO,EACnB,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,KAC3C,KAAK,GACT,CACH,CAAA"}
+{"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../../src/backends/gui/skeleton.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEhD,OAAO,EAAE,EAAE,EAAmB,MAAM,UAAU,CAAA;AAC9C,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAE7B,8BAA8B;AAC9B,MAAM,CAAC,MAAM,eAAe,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAW,CAAA;AAc/E,uEAAuE;AACvE,MAAM,IAAI,GAAG,uGAAuG,CAAA;AAEpH,MAAM,UAAU,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,GAAG,QAAQ,EAAE,QAAQ,GAAG,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAiB;IACvG,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAA;IAC3C,MAAM,MAAM,GAAG,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAA;IACpF,OAAO,CACL,KAAC,MAAM,OACD,IAAI,CAAC,UAAU,CAAC,sCAEP,MAAM,iBAGN,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAC7C,OAAO,EAAE,MAAM,KAAK,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,EACrD,KAAK,EAAC,MAAM,KACR,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAC9C,OAAO,EAAC,KAAK,EACb,EAAE,EAAC,QAAQ,EACX,eAAe,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,EAC5C,cAAc,EAAC,YAAY,EAC3B,gBAAgB,EAAC,WAAW,EAC5B,QAAQ,EAAC,QAAQ,KACZ,IAAe,KAChB,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,KACnC,KAAK,YAER,MAAM,KAAK,QAAQ,IAAI,MAAM,KAAK,SAAS,IAAI,CAAC,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAC5F,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,iCACnB,GAAG,GACQ,CACf,CAAC,CAAC,CAAC,IAAI,GACD,CACV,CAAA;AACH,CAAC"}

package/dist/backends/gui/snippet.cjs

@@ -17,6 +17,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * no syntax highlighter, the same constraint `code-block.tsx` documents.
  * `theme` names a fixed palette for the code surface, independent of the
  * page's own light or dark theme; `size` picks the type scale.
+ *
+ * `variant="command"` is the record kit's command block (twenty-ui's
+ * CommandBlock, MIT — NOTICE): shell lines on the panel ground, 1px hairline,
+ * 4px corners, 12px padding, each line led by a "> " the reader does not copy
+ * or hear, wrapping anywhere, with `actions` (the copy button by default) 12px
+ * from the text and never shrinking. It follows the page's theme rather than a
+ * fixed palette, since it sits in settings and setup pages beside other chrome.
  */
 const gui_1 = require("@hanzo/gui");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
@@ -99,7 +106,7 @@ function CopyButton({ copied, onPress, muted, floating, }) {
  * copy button. `expandable` clamps the body to `collapsedHeight` until its
  * maximize control is pressed.
  */
-function Snippet({ code, language = 'text', filename, variant, theme, size, showLineNumbers = false, highlightLines = [], showCopyButton = true, showLanguageBadge = true, showHeader = true, maxHeight, expandable = false, collapsedHeight = 200, wrapLines = false, startLineNumber = 1, ...props }) {
+function Snippet({ code, language = 'text', filename, variant, theme, size, showLineNumbers = false, highlightLines = [], showCopyButton = true, showLanguageBadge = true, showHeader = true, maxHeight, expandable = false, collapsedHeight = 200, wrapLines = false, startLineNumber = 1, actions, ...props }) {
     const resolvedVariant = variant ?? 'default';
     const palette = PALETTE[theme ?? 'dark'];
     const fontSize = FONT_SIZE[size ?? 'default'];
@@ -117,6 +124,10 @@ function Snippet({ code, language = 'text', filename, variant, theme, size, show
             // No clipboard permission or no clipboard API — nothing else to do.
         }
     }, [code]);
+    if (resolvedVariant === 'command') {
+        return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('snippet'), "data-variant": "command", items: "flex-start", justify: "space-between", gap: "$3", p: "$3", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$xs", ...props, children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('snippet-body'), flex: 1, minW: 0, children: code.split('\n').map((line, i) => ((0, jsx_runtime_1.jsxs)(Mono, { "data-slot": "snippet-line", size: "$2", color: "$ink", style: { whiteSpace: 'pre-wrap', wordBreak: 'break-all' }, children: [(0, jsx_runtime_1.jsx)(Mono, { "aria-hidden": true, color: "$codeNumber", select: "none", children: '> ' }), line] }, i))) }), (0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('snippet-actions'), shrink: 0, items: "center", gap: "$2", children: actions ??
+                        (showCopyButton ? (0, jsx_runtime_1.jsx)(CopyButton, { copied: copied, onPress: copy, muted: '$hint' }) : null) })] }));
+    }
     if (resolvedVariant === 'inline') {
         return ((0, jsx_runtime_1.jsx)(Mono, { ...(0, slot_1.slot)('snippet'), "data-variant": "inline", fontFamily: "$mono", rounded: "$2", px: "$2", py: "$1", wrap: wrapLines, style: {
                 display: 'inline-block',

package/dist/backends/gui/snippet.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentProps, type ReactNode } from 'react';
-export type SnippetVariant = 'default' | 'inline' | 'minimal';
+export type SnippetVariant = 'default' | 'inline' | 'minimal' | 'command';
 export type SnippetTheme = 'dark' | 'light' | 'github' | 'github-dark' | 'terminal' | 'retro';
 export type SnippetSize = 'xs' | 'sm' | 'default' | 'lg';
 export interface SnippetProps extends Omit<ComponentProps<'div'>, 'children'> {
@@ -21,6 +21,8 @@ export interface SnippetProps extends Omit<ComponentProps<'div'>, 'children'> {
     collapsedHeight?: number | string;
     wrapLines?: boolean;
     startLineNumber?: number;
+    /** `command`: the controls beside the lines; the copy button unless given. */
+    actions?: ReactNode;
 }
 /**
  * A syntax-plain code panel: `variant="default"` shows a header and a gutter
@@ -29,7 +31,7 @@ export interface SnippetProps extends Omit<ComponentProps<'div'>, 'children'> {
  * copy button. `expandable` clamps the body to `collapsedHeight` until its
  * maximize control is pressed.
  */
-export declare function Snippet({ code, language, filename, variant, theme, size, showLineNumbers, highlightLines, showCopyButton, showLanguageBadge, showHeader, maxHeight, expandable, collapsedHeight, wrapLines, startLineNumber, ...props }: SnippetProps): import("react").JSX.Element;
+export declare function Snippet({ code, language, filename, variant, theme, size, showLineNumbers, highlightLines, showCopyButton, showLanguageBadge, showHeader, maxHeight, expandable, collapsedHeight, wrapLines, startLineNumber, actions, ...props }: SnippetProps): import("react").JSX.Element;
 export interface InlineCodeProps extends Omit<SnippetProps, 'variant' | 'code'> {
     children: string;
 }

package/dist/backends/gui/snippet.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"snippet.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/snippet.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK3F,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAA;AAE7D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,OAAO,CAAA;AAE7F,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;AAiBxD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3E,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACzB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;CACzB;AA6FD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,QAAiB,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,IAAI,EACJ,eAAuB,EACvB,cAAmB,EACnB,cAAqB,EACrB,iBAAwB,EACxB,UAAiB,EACjB,SAAS,EACT,UAAkB,EAClB,eAAqB,EACrB,SAAiB,EACjB,eAAmB,EACnB,GAAG,KAAK,EACT,EAAE,YAAY,+BAkKd;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7E,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,SAAS,CAYvF"}
+{"version":3,"file":"snippet.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/snippet.tsx"],"names":[],"mappings":"AAyBA,OAAO,EAAkC,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAK3F,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;AAEzE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,UAAU,GAAG,OAAO,CAAA;AAE7F,MAAM,MAAM,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,CAAA;AAiBxD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAC3E,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAA;IAC/B,KAAK,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC3B,IAAI,CAAC,EAAE,WAAW,GAAG,IAAI,CAAA;IACzB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB;AA6FD;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,EACtB,IAAI,EACJ,QAAiB,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,IAAI,EACJ,eAAuB,EACvB,cAAmB,EACnB,cAAqB,EACrB,iBAAwB,EACxB,UAAiB,EACjB,SAAS,EACT,UAAkB,EAClB,eAAqB,EACrB,SAAiB,EACjB,eAAmB,EACnB,OAAO,EACP,GAAG,KAAK,EACT,EAAE,YAAY,+BAyMd;AAED,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7E,QAAQ,EAAE,MAAM,CAAA;CACjB;AAED,+EAA+E;AAC/E,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,GAAG,SAAS,CAYvF"}

package/dist/backends/gui/snippet.js

@@ -13,6 +13,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * no syntax highlighter, the same constraint `code-block.tsx` documents.
  * `theme` names a fixed palette for the code surface, independent of the
  * page's own light or dark theme; `size` picks the type scale.
+ *
+ * `variant="command"` is the record kit's command block (twenty-ui's
+ * CommandBlock, MIT — NOTICE): shell lines on the panel ground, 1px hairline,
+ * 4px corners, 12px padding, each line led by a "> " the reader does not copy
+ * or hear, wrapping anywhere, with `actions` (the copy button by default) 12px
+ * from the text and never shrinking. It follows the page's theme rather than a
+ * fixed palette, since it sits in settings and setup pages beside other chrome.
  */
 import { SizableText, XStack, YStack, styled } from '@hanzo/gui';
 import { Check, Copy, FileText, Maximize2, Minimize2 } from '@hanzogui/lucide-icons-2';
@@ -95,7 +102,7 @@ function CopyButton({ copied, onPress, muted, floating, }) {
  * copy button. `expandable` clamps the body to `collapsedHeight` until its
  * maximize control is pressed.
  */
-export function Snippet({ code, language = 'text', filename, variant, theme, size, showLineNumbers = false, highlightLines = [], showCopyButton = true, showLanguageBadge = true, showHeader = true, maxHeight, expandable = false, collapsedHeight = 200, wrapLines = false, startLineNumber = 1, ...props }) {
+export function Snippet({ code, language = 'text', filename, variant, theme, size, showLineNumbers = false, highlightLines = [], showCopyButton = true, showLanguageBadge = true, showHeader = true, maxHeight, expandable = false, collapsedHeight = 200, wrapLines = false, startLineNumber = 1, actions, ...props }) {
     const resolvedVariant = variant ?? 'default';
     const palette = PALETTE[theme ?? 'dark'];
     const fontSize = FONT_SIZE[size ?? 'default'];
@@ -113,6 +120,10 @@ export function Snippet({ code, language = 'text', filename, variant, theme, siz
             // No clipboard permission or no clipboard API — nothing else to do.
         }
     }, [code]);
+    if (resolvedVariant === 'command') {
+        return (_jsxs(XStack, { ...slot('snippet'), "data-variant": "command", items: "flex-start", justify: "space-between", gap: "$3", p: "$3", bg: "$panel", borderWidth: 1, borderColor: "$borderColor", rounded: "$xs", ...props, children: [_jsx(YStack, { ...slot('snippet-body'), flex: 1, minW: 0, children: code.split('\n').map((line, i) => (_jsxs(Mono, { "data-slot": "snippet-line", size: "$2", color: "$ink", style: { whiteSpace: 'pre-wrap', wordBreak: 'break-all' }, children: [_jsx(Mono, { "aria-hidden": true, color: "$codeNumber", select: "none", children: '> ' }), line] }, i))) }), _jsx(XStack, { ...slot('snippet-actions'), shrink: 0, items: "center", gap: "$2", children: actions ??
+                        (showCopyButton ? _jsx(CopyButton, { copied: copied, onPress: copy, muted: '$hint' }) : null) })] }));
+    }
     if (resolvedVariant === 'inline') {
         return (_jsx(Mono, { ...slot('snippet'), "data-variant": "inline", fontFamily: "$mono", rounded: "$2", px: "$2", py: "$1", wrap: wrapLines, style: {
                 display: 'inline-block',

package/dist/backends/gui/snippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"snippet.js","sourceRoot":"","sources":["../../../src/backends/gui/snippet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;GAaG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAChE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACtF,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AAC3F,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAQ7B,mFAAmF;AACnF,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IAC3E,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IAC5E,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7E,aAAa,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACpF,QAAQ,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE;IACnF,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;CACsB,CAAA;AAEpG,MAAM,SAAS,GAAgC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAA;AA0BtF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IAEb,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE;YAC9D,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;SAChC;KACO;IAEV,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;CACxC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE;IAC5B,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,eAAe;IACxB,GAAG,EAAE,IAAI;IACT,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,iBAAiB,EAAE,CAAC;CACrB,CAAC,CAAA;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE;IACzB,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,MAAM;IACV,GAAG,EAAE,IAAI;IACT,eAAe,EAAE,CAAC;IAClB,eAAe,EAAE,aAAa;IAE9B,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,IAAI,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE;SACtD;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;SAC3B;KACO;CACX,CAAC,CAAA;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,EAAE;IAC/B,IAAI,EAAE,aAAa;IACnB,UAAU,EAAE,OAAO;IAEnB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE;YACpE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE;SAC7B;KACO;IAEV,eAAe,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;CACjC,CAAC,CAAA;AAEF,qEAAqE;AACrE,MAAM,IAAI,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;AAE7D,+DAA+D;AAC/D,SAAS,UAAU,CAAC,EAClB,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,GAMT;IACC,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAA;IAC7C,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,OAAO,gBACJ,KAAK,EACjB,KAAK,EAAE,KAAK,KACR,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAmB,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAE1E,MAAM,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,GACzE,CACV,CAAA;AACH,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,EACJ,QAAQ,GAAG,MAAM,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,IAAI,EACJ,eAAe,GAAG,KAAK,EACvB,cAAc,GAAG,EAAE,EACnB,cAAc,GAAG,IAAI,EACrB,iBAAiB,GAAG,IAAI,EACxB,UAAU,GAAG,IAAI,EACjB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,eAAe,GAAG,GAAG,EACrB,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,CAAC,EACnB,GAAG,KAAK,EACK;IACb,MAAM,eAAe,GAAG,OAAO,IAAI,SAAS,CAAA;IAC5C,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC,CAAA;IACxC,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,CAAA;IAC7C,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAA;IACjC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACzD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAA;IAEjF,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAClC,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACzC,SAAS,CAAC,IAAI,CAAC,CAAA;YACf,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;QAC1C,CAAC;QAAC,MAAM,CAAC;YACP,oEAAoE;QACtE,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAI,eAAe,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,CACL,KAAC,IAAI,OACC,IAAI,CAAC,SAAS,CAAC,kBACN,QAAQ,EACrB,UAAU,EAAC,OAAO,EAClB,OAAO,EAAC,IAAI,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,IAAI,EAAE,SAAS,EACf,KAAK,EAAE;gBACL,OAAO,EAAE,cAAc;gBACvB,eAAe,EAAE,OAAO,CAAC,EAAE;gBAC3B,KAAK,EAAE,OAAO,CAAC,EAAE;gBACjB,QAAQ;aACT,KACI,KAAqC,YAEzC,IAAI,GACA,CACR,CAAA;IACH,CAAC;IAED,MAAM,SAAS,GACb,eAAe,KAAK,SAAS;QAC7B,UAAU;QACV,OAAO,CAAC,QAAQ,IAAI,CAAC,iBAAiB,IAAI,QAAQ,CAAC,IAAI,cAAc,IAAI,UAAU,CAAC,CAAA;IAEtF,OAAO,CACL,MAAC,KAAK,OACA,IAAI,CAAC,SAAS,CAAC,kBACL,eAAe,EAC7B,OAAO,EAAE,eAAe,EACxB,KAAK,EACH,eAAe,KAAK,SAAS;YAC3B,CAAC,CAAC,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,CAAC,MAAM,EAAE;YAC9D,CAAC,CAAC,SAAS,KAEV,KAAsC,aAE1C,SAAS,IAAI,CACZ,MAAC,MAAM,OAAK,IAAI,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,CAAC,MAAM,EAAE,aAC9E,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC5B,QAAQ,IAAI,CACX,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,aAC/B,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,GAAI,EAC5C,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,EAAE,YACjE,QAAQ,GACG,IACP,CACV,EACA,iBAAiB,IAAI,QAAQ,IAAI,CAChC,KAAC,KAAK,OAAK,IAAI,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAC,WAAW,YACrD,QAAQ,GACH,CACT,IACM,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC5B,UAAU,IAAI,CACb,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,gBAC3B,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAC9C,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,YAExC,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,GAAI,CAC9C,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,GAAI,CAC9C,GACM,CACV,EACA,cAAc,IAAI,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,GAAI,IAC/E,IACF,CACV,EAED,KAAC,MAAM,OACD,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE;oBACL,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe;oBACnD,QAAQ,EAAE,MAAM;iBACjB,YAED,KAAC,MAAM,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,YAAY,YAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;wBACzB,MAAM,aAAa,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;wBAChD,OAAO,CACL,MAAC,GAAG,IAEF,WAAW,EAAE,aAAa,EAC1B,IAAI,EAAE,SAAS,eACL,cAAc,eACb,CAAC,sBACM,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAEnD,eAAe,IAAI,CAClB,KAAC,IAAI,IACH,KAAK,EAAE,EAAE,EACT,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,MAAM,EACb,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,SAAS,CAAC,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,YAE9B,CAAC,GACG,CACR,EACD,KAAC,IAAI,IACH,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,EAAE,YAE3B,IAAI,IAAI,GAAG,GACP,KA5BF,CAAC,CA6BF,CACP,CAAA;oBACH,CAAC,CAAC,GACK,GACF,EAER,UAAU,IAAI,CAAC,UAAU,IAAI,CAC5B,KAAC,MAAM,OACD,IAAI,CAAC,cAAc,CAAC,EACxB,QAAQ,EAAC,UAAU,EACnB,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,MAAM,EAAE,EAAE,EACV,aAAa,EAAC,MAAM,EACpB,KAAK,EAAE,EAAE,UAAU,EAAE,2BAA2B,OAAO,CAAC,EAAE,gBAAgB,EAAE,GAC5E,CACH,EAEA,eAAe,KAAK,SAAS,IAAI,cAAc,IAAI,CAClD,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,SAAG,CAC7E,IACK,CACT,CAAA;AACH,CAAC;AAMD,+EAA+E;AAC/E,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAC1E,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,QAAQ,EAChB,cAAc,EAAE,KAAK,EACrB,iBAAiB,EAAE,KAAK,EACxB,UAAU,EAAE,KAAK,KACb,KAAK,GACT,CACH,CAAA;AACH,CAAC"}
+{"version":3,"file":"snippet.js","sourceRoot":"","sources":["../../../src/backends/gui/snippet.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAChE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACtF,OAAO,EAAE,WAAW,EAAE,OAAO,EAAE,QAAQ,EAAuC,MAAM,OAAO,CAAA;AAC3F,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAQ7B,mFAAmF;AACnF,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IAC3E,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IAC5E,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IAC7E,aAAa,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;IACpF,QAAQ,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,WAAW,EAAE;IACnF,KAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,EAAE;CACsB,CAAA;AAEpG,MAAM,SAAS,GAAgC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAA;AA4BtF,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE;IAC3B,IAAI,EAAE,SAAS;IACf,QAAQ,EAAE,UAAU;IACpB,KAAK,EAAE,MAAM;IAEb,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE;YAC9D,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE;SAChC;KACO;IAEV,eAAe,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;CACxC,CAAC,CAAA;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE;IAC5B,IAAI,EAAE,eAAe;IACrB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,eAAe;IACxB,GAAG,EAAE,IAAI;IACT,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,IAAI;IACR,iBAAiB,EAAE,CAAC;CACrB,CAAC,CAAA;AAEF,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,EAAE;IACzB,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE,QAAQ;IACf,IAAI,EAAE,EAAE;IACR,EAAE,EAAE,IAAI;IACR,EAAE,EAAE,MAAM;IACV,GAAG,EAAE,IAAI;IACT,eAAe,EAAE,CAAC;IAClB,eAAe,EAAE,aAAa;IAE9B,QAAQ,EAAE;QACR,WAAW,EAAE;YACX,IAAI,EAAE,EAAE,EAAE,EAAE,WAAW,EAAE,eAAe,EAAE,SAAS,EAAE;SACtD;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE;SAC3B;KACO;CACX,CAAC,CAAA;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,WAAW,EAAE;IAC/B,IAAI,EAAE,aAAa;IACnB,UAAU,EAAE,OAAO;IAEnB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,IAAI,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE;YACpE,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,EAAE;SAC7B;KACO;IAEV,eAAe,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE;CACjC,CAAC,CAAA;AAEF,qEAAqE;AACrE,MAAM,IAAI,GAAG,CAAC,IAAY,EAAE,KAAa,EAAE,EAAE,CAC3C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,GAAG,KAAK,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;AAE7D,+DAA+D;AAC/D,SAAS,UAAU,CAAC,EAClB,MAAM,EACN,OAAO,EACP,KAAK,EACL,QAAQ,GAMT;IACC,MAAM,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAA;IAC7C,OAAO,CACL,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,OAAO,gBACJ,KAAK,EACjB,KAAK,EAAE,KAAK,KACR,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAmB,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,YAE1E,MAAM,CAAC,CAAC,CAAC,KAAC,KAAK,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,KAAC,IAAI,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,GAAI,GACzE,CACV,CAAA;AACH,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,OAAO,CAAC,EACtB,IAAI,EACJ,QAAQ,GAAG,MAAM,EACjB,QAAQ,EACR,OAAO,EACP,KAAK,EACL,IAAI,EACJ,eAAe,GAAG,KAAK,EACvB,cAAc,GAAG,EAAE,EACnB,cAAc,GAAG,IAAI,EACrB,iBAAiB,GAAG,IAAI,EACxB,UAAU,GAAG,IAAI,EACjB,SAAS,EACT,UAAU,GAAG,KAAK,EAClB,eAAe,GAAG,GAAG,EACrB,SAAS,GAAG,KAAK,EACjB,eAAe,GAAG,CAAC,EACnB,OAAO,EACP,GAAG,KAAK,EACK;IACb,MAAM,eAAe,GAAG,OAAO,IAAI,SAAS,CAAA;IAC5C,MAAM,OAAO,GAAG,OAAO,CAAC,KAAK,IAAI,MAAM,CAAC,CAAA;IACxC,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,IAAI,SAAS,CAAC,CAAA;IAC7C,MAAM,UAAU,GAAG,QAAQ,GAAG,GAAG,CAAA;IACjC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC3C,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAA;IACzD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,eAAe,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,CAAC,CAAC,CAAA;IAEjF,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,IAAI,EAAE;QAClC,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YACzC,SAAS,CAAC,IAAI,CAAC,CAAA;YACf,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAA;QAC1C,CAAC;QAAC,MAAM,CAAC;YACP,oEAAoE;QACtE,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,IAAI,eAAe,KAAK,SAAS,EAAE,CAAC;QAClC,OAAO,CACL,MAAC,MAAM,OACD,IAAI,CAAC,SAAS,CAAC,kBACN,SAAS,EACtB,KAAK,EAAC,YAAY,EAClB,OAAO,EAAC,eAAe,EACvB,GAAG,EAAC,IAAI,EACR,CAAC,EAAC,IAAI,EACN,EAAE,EAAC,QAAQ,EACX,WAAW,EAAE,CAAC,EACd,WAAW,EAAC,cAAc,EAC1B,OAAO,EAAC,KAAK,KACR,KAAuC,aAE5C,KAAC,MAAM,OAAK,IAAI,CAAC,cAAc,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,YAC/C,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CACjC,MAAC,IAAI,iBAEO,cAAc,EACxB,IAAI,EAAC,IAAI,EACT,KAAK,EAAC,MAAM,EACZ,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,aAEzD,KAAC,IAAI,yBAAa,KAAK,EAAC,aAAa,EAAC,MAAM,EAAC,MAAM,YAChD,IAAI,GACA,EACN,IAAI,KATA,CAAC,CAUD,CACR,CAAC,GACK,EACT,KAAC,MAAM,OAAK,IAAI,CAAC,iBAAiB,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,YACpE,OAAO;wBACN,CAAC,cAAc,CAAC,CAAC,CAAC,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAgB,GAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAC3F,IACF,CACV,CAAA;IACH,CAAC;IAED,IAAI,eAAe,KAAK,QAAQ,EAAE,CAAC;QACjC,OAAO,CACL,KAAC,IAAI,OACC,IAAI,CAAC,SAAS,CAAC,kBACN,QAAQ,EACrB,UAAU,EAAC,OAAO,EAClB,OAAO,EAAC,IAAI,EACZ,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,IAAI,EAAE,SAAS,EACf,KAAK,EAAE;gBACL,OAAO,EAAE,cAAc;gBACvB,eAAe,EAAE,OAAO,CAAC,EAAE;gBAC3B,KAAK,EAAE,OAAO,CAAC,EAAE;gBACjB,QAAQ;aACT,KACI,KAAqC,YAEzC,IAAI,GACA,CACR,CAAA;IACH,CAAC;IAED,MAAM,SAAS,GACb,eAAe,KAAK,SAAS;QAC7B,UAAU;QACV,OAAO,CAAC,QAAQ,IAAI,CAAC,iBAAiB,IAAI,QAAQ,CAAC,IAAI,cAAc,IAAI,UAAU,CAAC,CAAA;IAEtF,OAAO,CACL,MAAC,KAAK,OACA,IAAI,CAAC,SAAS,CAAC,kBACL,eAAe,EAC7B,OAAO,EAAE,eAAe,EACxB,KAAK,EACH,eAAe,KAAK,SAAS;YAC3B,CAAC,CAAC,EAAE,eAAe,EAAE,OAAO,CAAC,EAAE,EAAE,WAAW,EAAE,OAAO,CAAC,MAAM,EAAE;YAC9D,CAAC,CAAC,SAAS,KAEV,KAAsC,aAE1C,SAAS,IAAI,CACZ,MAAC,MAAM,OAAK,IAAI,CAAC,gBAAgB,CAAC,EAAE,KAAK,EAAE,EAAE,iBAAiB,EAAE,OAAO,CAAC,MAAM,EAAE,aAC9E,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC5B,QAAQ,IAAI,CACX,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,MAAM,aAC/B,KAAC,QAAQ,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,GAAI,EAC5C,KAAC,WAAW,IAAC,IAAI,EAAC,IAAI,EAAC,UAAU,EAAC,KAAK,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,EAAE,YACjE,QAAQ,GACG,IACP,CACV,EACA,iBAAiB,IAAI,QAAQ,IAAI,CAChC,KAAC,KAAK,OAAK,IAAI,CAAC,kBAAkB,CAAC,EAAE,OAAO,EAAC,WAAW,YACrD,QAAQ,GACH,CACT,IACM,EACT,MAAC,MAAM,IAAC,KAAK,EAAC,QAAQ,EAAC,GAAG,EAAC,IAAI,aAC5B,UAAU,IAAI,CACb,KAAC,MAAM,IACL,OAAO,EAAC,OAAO,EACf,IAAI,EAAC,SAAS,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,gBAC3B,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,EAC9C,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,YAExC,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,GAAI,CAC9C,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,GAAI,CAC9C,GACM,CACV,EACA,cAAc,IAAI,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,GAAI,IAC/E,IACF,CACV,EAED,KAAC,MAAM,OACD,IAAI,CAAC,cAAc,CAAC,EACxB,KAAK,EAAE;oBACL,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe;oBACnD,QAAQ,EAAE,MAAM;iBACjB,YAED,KAAC,MAAM,IAAC,EAAE,EAAC,IAAI,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,YAAY,YAC1C,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE;wBACzB,MAAM,aAAa,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;wBAChD,OAAO,CACL,MAAC,GAAG,IAEF,WAAW,EAAE,aAAa,EAC1B,IAAI,EAAE,SAAS,eACL,cAAc,eACb,CAAC,sBACM,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,aAEnD,eAAe,IAAI,CAClB,KAAC,IAAI,IACH,KAAK,EAAE,EAAE,EACT,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,MAAM,EACb,IAAI,EAAE,KAAK,EACX,QAAQ,EAAE,SAAS,CAAC,EAAE,EACtB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,YAE9B,CAAC,GACG,CACR,EACD,KAAC,IAAI,IACH,IAAI,EAAE,CAAC,EACP,IAAI,EAAE,SAAS,EACf,QAAQ,EAAE,QAAQ,EAClB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,CAAC,EAAE,EAAE,YAE3B,IAAI,IAAI,GAAG,GACP,KA5BF,CAAC,CA6BF,CACP,CAAA;oBACH,CAAC,CAAC,GACK,GACF,EAER,UAAU,IAAI,CAAC,UAAU,IAAI,CAC5B,KAAC,MAAM,OACD,IAAI,CAAC,cAAc,CAAC,EACxB,QAAQ,EAAC,UAAU,EACnB,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,CAAC,EAAE,CAAC,EACJ,MAAM,EAAE,EAAE,EACV,aAAa,EAAC,MAAM,EACpB,KAAK,EAAE,EAAE,UAAU,EAAE,2BAA2B,OAAO,CAAC,EAAE,gBAAgB,EAAE,GAC5E,CACH,EAEA,eAAe,KAAK,SAAS,IAAI,cAAc,IAAI,CAClD,KAAC,UAAU,IAAC,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,QAAQ,SAAG,CAC7E,IACK,CACT,CAAA;AACH,CAAC;AAMD,+EAA+E;AAC/E,MAAM,UAAU,UAAU,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAmB;IAC1E,OAAO,CACL,KAAC,OAAO,IACN,IAAI,EAAE,QAAQ,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAC,QAAQ,EAChB,cAAc,EAAE,KAAK,EACrB,iBAAiB,EAAE,KAAK,EACxB,UAAU,EAAE,KAAK,KACb,KAAK,GACT,CACH,CAAA;AACH,CAAC"}

package/dist/backends/gui/spinner.cjs

@@ -21,10 +21,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  *
  * `aria-hidden`, because a spinner is never the message: the thing that is
  * loading says so in text beside it.
+ *
+ * `variant="dot"` is the record kit's loader (twenty-ui's Loader, MIT — NOTICE):
+ * a 24×12 pill outline with an 8px dot that travels across it and squashes as
+ * it lands, 0.8s a loop (`data-motion="hop"` in styles/motion.css, stopped under
+ * reduced motion). It is the quieter one, for a status pill, a button that is
+ * busy or a list fetching more; the arc stays the default everywhere else. Both
+ * take the surrounding ink unless given a colour.
  */
 const gui_1 = require("@hanzo/gui");
 const slot_1 = require("./slot.cjs");
-const Spinner = ({ size = 16, color = 'currentColor', ...props }) => ((0, jsx_runtime_1.jsx)(gui_1.Spinner, { ...(0, slot_1.slot)('spinner'), "aria-hidden": true, 
+const Spinner = ({ size = 16, color = 'currentColor', variant = 'arc', ...props }) => variant === 'dot' ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('spinner'), "data-variant": "dot", "aria-hidden": true, width: 24, height: 12, shrink: 0, rounded: "$10", borderWidth: 1, borderColor: color, overflow: "hidden", items: "center", justify: "center", ...props, children: (0, jsx_runtime_1.jsx)(gui_1.View, { "data-motion": "hop", width: 8, height: 8, rounded: "$10", bg: color }) })) : ((0, jsx_runtime_1.jsx)(gui_1.Spinner, { ...(0, slot_1.slot)('spinner'), "aria-hidden": true, 
     // The enum is upstream's TYPE; a number is what the element reads.
     size: size, color: color, ...props }));
 exports.Spinner = Spinner;

package/dist/backends/gui/spinner.d.ts

@@ -16,15 +16,24 @@
  *
  * `aria-hidden`, because a spinner is never the message: the thing that is
  * loading says so in text beside it.
+ *
+ * `variant="dot"` is the record kit's loader (twenty-ui's Loader, MIT — NOTICE):
+ * a 24×12 pill outline with an 8px dot that travels across it and squashes as
+ * it lands, 0.8s a loop (`data-motion="hop"` in styles/motion.css, stopped under
+ * reduced motion). It is the quieter one, for a status pill, a button that is
+ * busy or a list fetching more; the arc stays the default everywhere else. Both
+ * take the surrounding ink unless given a colour.
  */
 import { Spinner as GuiSpinner } from '@hanzo/gui';
 import type { ComponentProps } from 'react';
 export type SpinnerProps = Omit<ComponentProps<typeof GuiSpinner>, 'size' | 'color'> & {
-    /** Edge of the arc, px. */
+    /** Edge of the arc, px. The dot's pill is always 24×12. */
     size?: number;
     /** Ink. Inherits the surrounding text by default. */
     color?: string;
+    /** `arc` (default) or the travelling `dot`. */
+    variant?: 'arc' | 'dot';
 };
-declare const Spinner: ({ size, color, ...props }: SpinnerProps) => import("react").JSX.Element;
+declare const Spinner: ({ size, color, variant, ...props }: SpinnerProps) => import("react").JSX.Element;
 export { Spinner };
 //# sourceMappingURL=spinner.d.ts.map

package/dist/backends/gui/spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/spinner.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAClD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACrF,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,OAAO,8BAAqD,YAAY,gCAS7E,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"spinner.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/spinner.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAgB,MAAM,YAAY,CAAA;AAChE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAG3C,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACrF,2DAA2D;IAC3D,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+CAA+C;IAC/C,OAAO,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;CACxB,CAAA;AAED,QAAA,MAAM,OAAO,uCAAsE,YAAY,gCA4B5F,CAAA;AAEH,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/backends/gui/spinner.js

@@ -18,10 +18,17 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * `aria-hidden`, because a spinner is never the message: the thing that is
  * loading says so in text beside it.
+ *
+ * `variant="dot"` is the record kit's loader (twenty-ui's Loader, MIT — NOTICE):
+ * a 24×12 pill outline with an 8px dot that travels across it and squashes as
+ * it lands, 0.8s a loop (`data-motion="hop"` in styles/motion.css, stopped under
+ * reduced motion). It is the quieter one, for a status pill, a button that is
+ * busy or a list fetching more; the arc stays the default everywhere else. Both
+ * take the surrounding ink unless given a colour.
  */
-import { Spinner as GuiSpinner } from '@hanzo/gui';
+import { Spinner as GuiSpinner, View, XStack } from '@hanzo/gui';
 import { slot } from './slot.js';
-const Spinner = ({ size = 16, color = 'currentColor', ...props }) => (_jsx(GuiSpinner, { ...slot('spinner'), "aria-hidden": true, 
+const Spinner = ({ size = 16, color = 'currentColor', variant = 'arc', ...props }) => variant === 'dot' ? (_jsx(XStack, { ...slot('spinner'), "data-variant": "dot", "aria-hidden": true, width: 24, height: 12, shrink: 0, rounded: "$10", borderWidth: 1, borderColor: color, overflow: "hidden", items: "center", justify: "center", ...props, children: _jsx(View, { "data-motion": "hop", width: 8, height: 8, rounded: "$10", bg: color }) })) : (_jsx(GuiSpinner, { ...slot('spinner'), "aria-hidden": true, 
     // The enum is upstream's TYPE; a number is what the element reads.
     size: size, color: color, ...props }));
 export { Spinner };

package/dist/backends/gui/spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/backends/gui/spinner.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,YAAY,CAAA;AAElD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAS7B,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,cAAc,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE,CAAC,CACjF,KAAC,UAAU,OACL,IAAI,CAAC,SAAS,CAAC;IAEnB,mEAAmE;IACnE,IAAI,EAAE,IAA0B,EAChC,KAAK,EAAE,KAAK,KACR,KAAK,GACT,CACH,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,CAAA"}
+{"version":3,"file":"spinner.js","sourceRoot":"","sources":["../../../src/backends/gui/spinner.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEhE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAW7B,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,GAAG,EAAE,EAAE,KAAK,GAAG,cAAc,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,KAAK,EAAgB,EAAE,EAAE,CACjG,OAAO,KAAK,KAAK,CAAC,CAAC,CAAC,CAClB,KAAC,MAAM,OACD,IAAI,CAAC,SAAS,CAAC,kBACN,KAAK,uBAElB,KAAK,EAAE,EAAE,EACT,MAAM,EAAE,EAAE,EACV,MAAM,EAAE,CAAC,EACT,OAAO,EAAC,KAAK,EACb,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,KAAc,EAC3B,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,KACX,KAAgB,YAErB,KAAC,IAAI,mBAAa,KAAK,EAAC,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,OAAO,EAAC,KAAK,EAAC,EAAE,EAAE,KAAc,GAAI,GAC1E,CACV,CAAC,CAAC,CAAC,CACJ,KAAC,UAAU,OACL,IAAI,CAAC,SAAS,CAAC;IAEnB,mEAAmE;IACnE,IAAI,EAAE,IAA0B,EAChC,KAAK,EAAE,KAAK,KACR,KAAK,GACT,CACD,CAAA;AAEH,OAAO,EAAE,OAAO,EAAE,CAAA"}

package/dist/backends/gui/stack-icon.cjs

@@ -0,0 +1,17 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StackIcon = StackIcon;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * StackIcon — an icon with a smaller one pinned over its lower-right quadrant:
+ * a provider and its state, an app and its connection.
+ *
+ * Re-expressed from twenty-ui's StackIcon (MIT, see NOTICE): a 16px box, the
+ * stacked icon 8px from the left and 7px from the top. Both are decorative.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("./slot.cjs");
+function StackIcon({ icon, stackedIcon, ...props }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('stack-icon'), "aria-hidden": true, position: "relative", width: 16, height: 16, shrink: 0, items: "center", justify: "center", ...props, children: [icon, (0, jsx_runtime_1.jsx)(gui_1.XStack, { position: "absolute", l: 8, t: 7, children: stackedIcon })] }));
+}

package/dist/backends/gui/stack-icon.d.ts

@@ -0,0 +1,15 @@
+/**
+ * StackIcon — an icon with a smaller one pinned over its lower-right quadrant:
+ * a provider and its state, an app and its connection.
+ *
+ * Re-expressed from twenty-ui's StackIcon (MIT, see NOTICE): a 16px box, the
+ * stacked icon 8px from the left and 7px from the top. Both are decorative.
+ */
+import { XStack } from '@hanzo/gui';
+import type { ComponentProps, ReactNode } from 'react';
+export type StackIconProps = Omit<ComponentProps<typeof XStack>, 'children'> & {
+    icon: ReactNode;
+    stackedIcon: ReactNode;
+};
+export declare function StackIcon({ icon, stackedIcon, ...props }: StackIconProps): import("react").JSX.Element;
+//# sourceMappingURL=stack-icon.d.ts.map

package/dist/backends/gui/stack-icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stack-icon.d.ts","sourceRoot":"","sources":["../../../src/backends/gui/stack-icon.tsx"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC7E,IAAI,EAAE,SAAS,CAAA;IACf,WAAW,EAAE,SAAS,CAAA;CACvB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,+BASxE"}

package/dist/backends/gui/stack-icon.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * StackIcon — an icon with a smaller one pinned over its lower-right quadrant:
+ * a provider and its state, an app and its connection.
+ *
+ * Re-expressed from twenty-ui's StackIcon (MIT, see NOTICE): a 16px box, the
+ * stacked icon 8px from the left and 7px from the top. Both are decorative.
+ */
+import { XStack } from '@hanzo/gui';
+import { slot } from './slot.js';
+export function StackIcon({ icon, stackedIcon, ...props }) {
+    return (_jsxs(XStack, { ...slot('stack-icon'), "aria-hidden": true, position: "relative", width: 16, height: 16, shrink: 0, items: "center", justify: "center", ...props, children: [icon, _jsx(XStack, { position: "absolute", l: 8, t: 7, children: stackedIcon })] }));
+}
+//# sourceMappingURL=stack-icon.js.map