@hanzo/ui 8.29.9 → 8.29.10

package/dist/corner/Corner.cjs

@@ -0,0 +1,279 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Corner = Corner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Corner — help and preferences, behind the one control that is on every page.
+ *
+ *   <Corner
+ *     help={[{ label: 'Get help', href: '/support' }, { label: 'Docs', href: 'https://docs.hanzo.ai' }]}
+ *     language={{ value: locale, options: LANGUAGES, onChange: setLocale }}
+ *     currency={{ value: fiat, options: CURRENCIES, onChange: setFiat }}
+ *   />
+ *
+ * A small `?` sits at the bottom START corner of the window (bottom-left in a
+ * left-to-right page, bottom-right in a right-to-left one), clear of the notch
+ * and the home indicator. Pressing it opens one card that opens toward the
+ * inside: the host's help links first, then Theme, Language and Currency. The
+ * three settings a visitor is most likely to want are where they look when they
+ * want the page to explain itself, on every surface, in the same place.
+ *
+ * Theme is the library's own: `@hanzo/appearance`, written through `<Hanzo>`'s
+ * resolved stack when there is one (`Look`), so it is stored, painted before
+ * first paint and carried across origins exactly as the settings panel does.
+ * Language and currency are the HOST's — this package depends on no i18n or
+ * money library, so it draws the value it is handed and reports a choice. A row
+ * the host passes nothing for is not drawn.
+ *
+ * Behaviour is the package `Popover`'s: portalled, dismissed by Escape and an
+ * outside press, focus trapped while open and handed back to the trigger on
+ * close. Escape in a list returns to the card rather than closing it. Arrow keys
+ * move through the card's rows and through a list; a long list (more than
+ * `LONG`) gets a search field that owns the cursor (`aria-activedescendant`).
+ * Nothing animates, so there is no motion to reduce.
+ *
+ * Web-only — it is fixed to the window — so it ships at `@hanzo/ui/corner`
+ * beside `consent`, not on the barrel that promises native.
+ */
+const gui_1 = require("@hanzo/gui");
+const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
+const appearance_1 = require("@hanzo/appearance");
+const react_1 = require("react");
+const popover_1 = require("../backends/gui/popover.cjs");
+const gesture_1 = require("../backends/gui/gesture.cjs");
+const press_1 = require("../backends/gui/press.cjs");
+const slot_1 = require("../backends/gui/slot.cjs");
+const nav_1 = require("../masthead/nav.cjs");
+const chipSelect_logic_1 = require("../product/chipSelect.logic.cjs");
+const Filters_1 = require("../product/Filters.cjs");
+const instrument_1 = require("../product/instrument.cjs");
+const look_1 = require("../look.cjs");
+const logic_1 = require("./logic.cjs");
+/**
+ * The trigger's distance from the window's foot and its start edge: 10px, or the
+ * device's inset and 4px where that is wider. A right-to-left page puts the
+ * trigger on the right, so the inline edge takes the wider of the two side insets.
+ */
+const EDGE = {
+    bottom: 'max(10px, calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 4px))',
+    start: 'max(10px, calc(max(var(--safe-left, env(safe-area-inset-left, 0px)), var(--safe-right, env(safe-area-inset-right, 0px))) + 4px))',
+};
+/**
+ * A row's height: 36 under a mouse, 44 under a finger. Rows sit edge to edge,
+ * so the height itself is the target — an overlay past it would land on the
+ * next row. (`[role=button]` gets the same floor from design's base sheet.)
+ */
+const ROW = { minH: 36, $touchable: { minH: 44 } };
+/** The keys a list answers. */
+const MOVES = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End', 'PageDown', 'PageUp']);
+/** Everything in the card the arrow keys step through, in document order. */
+const STOPS = '[data-corner-stop], [data-slot="segmented-item"][data-state="checked"]';
+/**
+ * The theme, as the person chose it, and the one way to change it.
+ *
+ * Under `<Hanzo>` it writes through the root's `useAppearance` (its org,
+ * install and account layers). Under a host's own gui provider it writes the
+ * device's layer and repaints the resolved stack, which is what `useAppearance`
+ * would do there. Nobody chose yet: the row marks what the document shows.
+ */
+function useTheme() {
+    const look = (0, react_1.useContext)(look_1.Look);
+    const ground = (0, appearance_1.useScheme)();
+    const [own, setOwn] = (0, react_1.useState)(undefined);
+    (0, react_1.useEffect)(() => {
+        if (!look)
+            setOwn((0, appearance_1.read)().theme);
+    }, [look]);
+    const set = (0, react_1.useCallback)((theme) => {
+        if (look)
+            return look.set({ theme });
+        (0, appearance_1.write)({ ...(0, appearance_1.read)(), theme });
+        (0, appearance_1.apply)((0, appearance_1.current)().pref);
+        setOwn(theme);
+    }, [look]);
+    return [(look ? look.pref.theme : own) ?? ground, set];
+}
+function Corner({ help = [], language, currency, words }) {
+    const w = { ...logic_1.WORDS, ...words };
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [view, setView] = (0, react_1.useState)('main');
+    // Which row opened a list, so going back puts focus where it was.
+    const [from, setFrom] = (0, react_1.useState)('main');
+    const [rtl, setRtl] = (0, react_1.useState)(false);
+    const [theme, setTheme] = useTheme();
+    const emit = (0, instrument_1.useEmit)();
+    const trigger = (0, react_1.useRef)(null);
+    const panel = (0, react_1.useRef)(null);
+    const settings = { language, currency };
+    // Focus follows the view: a list puts it on its search or its options, the
+    // card on the row the list was opened from.
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const root = panel.current;
+        if (!root)
+            return;
+        const target = view === 'main'
+            ? from === 'main'
+                ? null
+                : root.querySelector(`[data-corner-row="${from}"]`)
+            : root.querySelector('[data-corner-field]');
+        target?.focus();
+    }, [open, view, from]);
+    const toggle = (next) => {
+        if (next) {
+            // A right-to-left page mirrors the chevrons; read once, where the trigger sits.
+            if (trigger.current && typeof getComputedStyle === 'function')
+                setRtl(getComputedStyle(trigger.current).direction === 'rtl');
+            setView('main');
+            setFrom('main');
+            emit({ component: 'Corner', action: 'open' });
+        }
+        setOpen(next);
+    };
+    const back = () => setView('main');
+    const choose = (kind, code) => {
+        const s = settings[kind];
+        if (!s)
+            return;
+        if (code !== s.value) {
+            emit({ component: 'Corner', action: 'change', id: kind, value: code });
+            s.onChange(code);
+        }
+        back();
+    };
+    // The card's own arrows: up and down walk its stops. A radio group keeps its
+    // arrows (they move the theme, as a radio group's should).
+    const onCard = (e) => {
+        const key = e.key;
+        if (key !== 'ArrowDown' && key !== 'ArrowUp' && key !== 'Home' && key !== 'End')
+            return;
+        const el = e.target;
+        if (el?.closest?.('[role="radiogroup"]') && (key === 'ArrowDown' || key === 'ArrowUp'))
+            return;
+        const stops = Array.from(panel.current?.querySelectorAll(STOPS) ?? []);
+        if (!stops.length)
+            return;
+        e.preventDefault?.();
+        const at = stops.findIndex((s) => s === el || s.contains(el));
+        const to = key === 'Home' ? 0 : key === 'End' ? stops.length - 1 : Math.max(0, Math.min(stops.length - 1, at + (key === 'ArrowDown' ? 1 : -1)));
+        stops[to]?.focus();
+    };
+    const Forward = rtl ? lucide_icons_2_1.ChevronLeft : lucide_icons_2_1.ChevronRight;
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('corner'), position: "fixed", bottom: EDGE.bottom, insetInlineStart: EDGE.start, z: 'var(--z-dock, 40)', children: (0, jsx_runtime_1.jsxs)(popover_1.Popover, { open: open, onOpenChange: toggle, placement: "top-start", allowFlip: true, stayInFrame: true, children: [(0, jsx_runtime_1.jsx)(popover_1.PopoverTrigger, { asChild: true, children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { ref: trigger, ...(0, slot_1.slot)('corner-trigger'), ...(0, slot_1.tip)(w.open), role: "button", tabIndex: 0, "aria-label": w.open, "aria-haspopup": "dialog", "aria-expanded": open, ...(0, gesture_1.touch)(32), width: 32, height: 32, items: "center", justify: "center", rounded: "$10", cursor: "pointer", opacity: open ? 1 : 0.85, hoverStyle: { opacity: 1 }, focusVisibleStyle: press_1.RING, onKeyDown: (e) => {
+                            if (e?.key !== 'Enter' && e?.key !== ' ')
+                                return;
+                            e.preventDefault?.();
+                            toggle(!open);
+                        }, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.CircleHelp, { size: 22, color: "$background", fill: "var(--foreground)", "aria-hidden": true }) }) }), (0, jsx_runtime_1.jsxs)(popover_1.PopoverContent, { ref: panel, ...(0, slot_1.slot)('corner-card'), role: "dialog", "aria-label": w.open, solid: true, sideOffset: 6, width: 288, maxW: "calc(100vw - 20px)", maxH: 'calc(100dvh - 72px)', overflowY: "auto", p: "$3", gap: "$2", items: "stretch", elevation: "$4", trapFocus: true, onOpenAutoFocus: (e) => {
+                        // The first thing in the card that does something, not its close button.
+                        e.preventDefault();
+                        panel.current?.querySelector(STOPS)?.focus();
+                    }, onCloseAutoFocus: (e) => {
+                        e.preventDefault();
+                        trigger.current?.focus();
+                    }, onEscapeKeyDown: (e) => {
+                        // Escape in a list goes back to the card; on the card it closes.
+                        if (view === 'main')
+                            return;
+                        e.preventDefault();
+                        back();
+                    }, children: [(0, jsx_runtime_1.jsx)(Reflow, { on: view }), view === 'main' ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", onKeyDown: onCard, children: [help.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head, { title: w.help, close: w.close, onClose: () => toggle(false) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('corner-help'), role: "list", "aria-label": w.help, children: help.map((link) => ((0, jsx_runtime_1.jsx)(Item, { link: link, leaving: w.leaves, onPress: () => emit({ component: 'Corner', action: 'click', id: link.label }) }, link.href + link.label))) }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { height: 1, bg: "$borderColor", my: "$1", "aria-hidden": true })] })) : null, (0, jsx_runtime_1.jsx)(Head, { title: w.preferences, close: help.length ? undefined : w.close, onClose: () => toggle(false) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('corner-theme'), ...ROW, items: "center", justify: "space-between", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: "$aside", children: w.theme }), (0, jsx_runtime_1.jsx)(Filters_1.Segmented, { variant: "track", itemWidth: "content", name: "theme", "aria-label": w.theme, value: theme, onChange: setTheme, options: [
+                                                { value: 'system', label: w.auto },
+                                                { value: 'light', label: '', 'aria-label': w.light, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Sun, { size: 14, color: "$ink", "aria-hidden": true }) },
+                                                { value: 'dark', label: '', 'aria-label': w.dark, icon: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Moon, { size: 14, color: "$ink", "aria-hidden": true }) },
+                                            ] })] }), ['language', 'currency'].map((kind) => {
+                                    const s = settings[kind];
+                                    if (!s)
+                                        return null;
+                                    const chosen = s.options.find((o) => o.code === s.value);
+                                    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('corner-row'), ...(0, press_1.press)(() => {
+                                            setFrom(kind);
+                                            setView(kind);
+                                        }), "data-corner-stop": "", "data-corner-row": kind, "aria-haspopup": "listbox", ...ROW, items: "center", gap: "$3", mx: -8, px: "$2", rounded: "$3", cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: press_1.RING, children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: "$aside", flex: 1, children: w[kind] }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: "$ink", fontWeight: "600", numberOfLines: 1, shrink: 1, ...(kind === 'language' ? { lang: s.value, dir: chosen?.dir } : null), children: (0, logic_1.shown)(s) }), (0, jsx_runtime_1.jsx)(Forward, { size: 16, color: "$hint", "aria-hidden": true })] }, kind));
+                                })] })) : ((0, jsx_runtime_1.jsx)(List, { kind: view, setting: settings[view], title: w[view], words: w, rtl: rtl, onBack: back, onChoose: (code) => choose(view, code) }, view))] })] }) }));
+}
+/**
+ * Places the card again when it changes size. gui's popper re-measures when its
+ * TRIGGER moves, never when the card does, so a card that grows into a list
+ * keeps its old top and runs off the foot of the window. Inside the content,
+ * so it reads the popper the content belongs to.
+ */
+function Reflow({ on }) {
+    const { update } = (0, gui_1.usePopperContextSlow)();
+    (0, react_1.useLayoutEffect)(() => {
+        update?.();
+    }, [on, update]);
+    return null;
+}
+/** A section's quiet title, and the card's close button when the section is first. */
+function Head({ title, close, onClose }) {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", minH: 28, children: [(0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$hint", render: "h2", m: 0, children: title }), close ? (0, jsx_runtime_1.jsx)(Icon, { label: close, onPress: onClose, glyph: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.X, { size: 18, color: "$aside", "aria-hidden": true }) }) : null] }));
+}
+/** An icon-only button: 28px drawn, 44 under a finger. */
+function Icon({ label, glyph, onPress }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, press_1.press)(onPress), ...(0, slot_1.tip)(label), "aria-label": label, ...(0, gesture_1.touch)(28), width: 28, height: 28, marginInlineEnd: -6, items: "center", justify: "center", rounded: "$10", cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: press_1.RING, children: glyph }));
+}
+/** One help link. A link that leaves the site opens a new tab and says so, to the eye and to a screen reader. */
+function Item({ link, leaving, onPress }) {
+    const out = typeof location !== 'undefined' && (0, nav_1.leaves)(link.href, location.origin);
+    return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { role: "listitem", children: (0, jsx_runtime_1.jsxs)(gui_1.Anchor, { ...(0, slot_1.slot)('corner-link'), "data-corner-stop": "", href: link.href, target: out ? '_blank' : undefined, rel: out ? 'noopener noreferrer' : undefined, "aria-label": out ? `${link.label} (${leaving})` : undefined, onPress: onPress, display: "flex", flexDirection: "row", flex: 1, items: "center", gap: "$2.5", ...ROW, mx: -8, px: "$2", rounded: "$3", textDecorationLine: "none", color: "$ink", hoverStyle: { bg: '$hover' }, focusVisibleStyle: press_1.RING, children: [link.icon ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 20, items: "center", justify: "center", "aria-hidden": true, children: link.icon })) : null, (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: "$ink", fontWeight: "500", children: link.label }), out ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.ExternalLink, { size: 12, color: "$hint", "aria-hidden": true }) : null] }) }));
+}
+/**
+ * A setting's options, in place of the card: back, the title, a search when the
+ * list is long, then the options with a check on the current one.
+ *
+ * ARIA: the options are a listbox. With a search, the field is the combobox and
+ * owns the cursor through `aria-activedescendant`, so focus never leaves it
+ * while the arrows move; without one the listbox itself takes focus and does the
+ * same. Enter or a press chooses.
+ */
+function List({ kind, setting, title, words, rtl, onBack, onChoose, }) {
+    const [q, setQ] = (0, react_1.useState)('');
+    const rows = (0, logic_1.find)(setting.options, q);
+    const [at, setAt] = (0, react_1.useState)(() => Math.max(0, rows.findIndex((o) => o.code === setting.value)));
+    const id = (0, react_1.useId)();
+    const listId = `${id}-list`;
+    const optionId = (i) => `${id}-opt-${i}`;
+    const searchable = setting.options.length > logic_1.LONG;
+    const Back = rtl ? lucide_icons_2_1.ChevronRight : lucide_icons_2_1.ChevronLeft;
+    // A new search starts the cursor at the top.
+    (0, react_1.useEffect)(() => {
+        if (q)
+            setAt(0);
+    }, [q]);
+    // Keep the row under the cursor in view as it moves.
+    (0, react_1.useEffect)(() => {
+        if (typeof document === 'undefined')
+            return;
+        document.getElementById(optionId(at))?.scrollIntoView?.({ block: 'nearest' });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [at]);
+    const onKey = (e) => {
+        const key = e?.key;
+        if (MOVES.has(key)) {
+            if ((key === 'Home' || key === 'End') && q)
+                return;
+            e.preventDefault?.();
+            setAt((0, chipSelect_logic_1.move)(key, at, rows.length));
+            return;
+        }
+        if (key === 'Enter' || (key === ' ' && !searchable)) {
+            e.preventDefault?.();
+            const o = rows[at];
+            if (o)
+                onChoose(o.code);
+        }
+    };
+    const active = rows[at] ? optionId(at) : undefined;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: "$1", minH: 28, children: [(0, jsx_runtime_1.jsx)(gui_1.XStack, { marginInlineStart: -6, children: (0, jsx_runtime_1.jsx)(Icon, { label: words.back, onPress: onBack, glyph: (0, jsx_runtime_1.jsx)(Back, { size: 18, color: "$aside", "aria-hidden": true }) }) }), (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: "$ink", fontWeight: "600", render: "h2", m: 0, children: title })] }), searchable ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('corner-search'), height: 32, px: "$2", gap: "$1.5", items: "center", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$background", focusWithinStyle: { borderColor: '$outlineColor' }, children: [(0, jsx_runtime_1.jsx)(lucide_icons_2_1.Search, { size: 14, color: "$hint", "aria-hidden": true }), (0, jsx_runtime_1.jsx)(gui_1.Input, { ...(0, slot_1.slot)('corner-input'), "data-corner-field": "", unstyled: true, flex: 1, minW: 0, height: 30, p: 0, borderWidth: 0, bg: "transparent", fontSize: "$3", color: "$ink", placeholderTextColor: "$placeholderColor", placeholder: words.search, value: q, onChangeText: setQ, role: "combobox", "aria-label": `${words.search}: ${title}`, "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active, autoComplete: "off", spellCheck: false, onKeyDown: onKey })] })) : null, (0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('corner-list'), id: listId, role: "listbox", "aria-label": title, ...(searchable
+                    ? null
+                    : { 'data-corner-field': '', tabIndex: 0, 'aria-activedescendant': active, onKeyDown: onKey, focusVisibleStyle: press_1.RING }), 
+                // A height, not a ceiling: a search that narrows the list leaves the card
+                // where it is instead of shrinking it away from the trigger.
+                height: 'min(320px, calc(100dvh - 180px))', overflowY: "auto", mx: -4, px: "$1", rounded: "$3", children: [rows.map((o, i) => {
+                        const picked = o.code === setting.value;
+                        return ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { ...(0, slot_1.slot)('corner-option'), id: optionId(i), role: "option", "aria-selected": picked, ...ROW, px: "$2", gap: "$2", items: "center", rounded: "$3", cursor: "pointer", bg: i === at ? '$hover' : 'transparent', onHoverIn: () => setAt(i), onPress: () => onChoose(o.code), children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { flex: 1, minW: 0, children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: "$ink", fontWeight: picked ? '600' : '400', numberOfLines: 1, self: "flex-start", maxW: "100%", ...(kind === 'language' ? { lang: o.code, dir: o.dir } : null), children: o.label }) }), o.hint ? ((0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$2", color: "$hint", numberOfLines: 1, shrink: 0, children: o.hint })) : null, (0, jsx_runtime_1.jsx)(gui_1.XStack, { width: 16, items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: picked ? (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16, color: "$ink" }) : null })] }, o.code));
+                    }), rows.length === 0 ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...ROW, px: "$2", items: "center", role: "status", children: (0, jsx_runtime_1.jsx)(gui_1.SizableText, { size: "$3", color: "$hint", children: words.none }) })) : null] })] }));
+}

package/dist/corner/Corner.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { type Setting, type Words } from './logic.js';
+export type { Option, Setting, Words } from './logic.js';
+/** A help link. `icon` leads the label; an address on another host opens in a new tab with the outbound mark. */
+export type Link = {
+    label: string;
+    href: string;
+    icon?: ReactNode;
+};
+export type CornerProps = {
+    /** Help links, in order: Get help, Docs, Contact us. None, and the card opens on Preferences. */
+    help?: readonly Link[];
+    /** The page's language, owned by the host. Absent, the row is not drawn. */
+    language?: Setting;
+    /** The page's display currency, owned by the host. Absent, the row is not drawn. */
+    currency?: Setting;
+    /** The panel's own words, for a host that speaks another language. */
+    words?: Partial<Words>;
+};
+export declare function Corner({ help, language, currency, words }: CornerProps): import("react").JSX.Element;
+//# sourceMappingURL=Corner.d.ts.map

package/dist/corner/Corner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Corner.d.ts","sourceRoot":"","sources":["../../src/corner/Corner.tsx"],"names":[],"mappings":"AAsCA,OAAO,EAAgF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAWpH,OAAO,EAAyC,KAAK,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,SAAS,CAAA;AAEzF,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAErD,iHAAiH;AACjH,MAAM,MAAM,IAAI,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AAEpE,MAAM,MAAM,WAAW,GAAG;IACxB,iGAAiG;IACjG,IAAI,CAAC,EAAE,SAAS,IAAI,EAAE,CAAA;IACtB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oFAAoF;IACpF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,sEAAsE;IACtE,KAAK,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAA;CACvB,CAAA;AAuDD,wBAAgB,MAAM,CAAC,EAAE,IAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,WAAW,+BA0O3E"}

package/dist/corner/Corner.js

@@ -0,0 +1,277 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Corner — help and preferences, behind the one control that is on every page.
+ *
+ *   <Corner
+ *     help={[{ label: 'Get help', href: '/support' }, { label: 'Docs', href: 'https://docs.hanzo.ai' }]}
+ *     language={{ value: locale, options: LANGUAGES, onChange: setLocale }}
+ *     currency={{ value: fiat, options: CURRENCIES, onChange: setFiat }}
+ *   />
+ *
+ * A small `?` sits at the bottom START corner of the window (bottom-left in a
+ * left-to-right page, bottom-right in a right-to-left one), clear of the notch
+ * and the home indicator. Pressing it opens one card that opens toward the
+ * inside: the host's help links first, then Theme, Language and Currency. The
+ * three settings a visitor is most likely to want are where they look when they
+ * want the page to explain itself, on every surface, in the same place.
+ *
+ * Theme is the library's own: `@hanzo/appearance`, written through `<Hanzo>`'s
+ * resolved stack when there is one (`Look`), so it is stored, painted before
+ * first paint and carried across origins exactly as the settings panel does.
+ * Language and currency are the HOST's — this package depends on no i18n or
+ * money library, so it draws the value it is handed and reports a choice. A row
+ * the host passes nothing for is not drawn.
+ *
+ * Behaviour is the package `Popover`'s: portalled, dismissed by Escape and an
+ * outside press, focus trapped while open and handed back to the trigger on
+ * close. Escape in a list returns to the card rather than closing it. Arrow keys
+ * move through the card's rows and through a list; a long list (more than
+ * `LONG`) gets a search field that owns the cursor (`aria-activedescendant`).
+ * Nothing animates, so there is no motion to reduce.
+ *
+ * Web-only — it is fixed to the window — so it ships at `@hanzo/ui/corner`
+ * beside `consent`, not on the barrel that promises native.
+ */
+import { Anchor, Input as GuiInput, SizableText, XStack, YStack, usePopperContextSlow } from '@hanzo/gui';
+import { Check, ChevronLeft, ChevronRight, CircleHelp, ExternalLink, Moon, Search, Sun, X } from '@hanzogui/lucide-icons-2';
+import { apply, current, read, useScheme, write } from '@hanzo/appearance';
+import { useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '../backends/gui/popover.js';
+import { touch } from '../backends/gui/gesture.js';
+import { RING, press } from '../backends/gui/press.js';
+import { slot, tip } from '../backends/gui/slot.js';
+import { leaves } from '../masthead/nav.js';
+import { move } from '../product/chipSelect.logic.js';
+import { Segmented } from '../product/Filters.js';
+import { useEmit } from '../product/instrument.js';
+import { Look } from '../look.js';
+import { LONG, WORDS, find, shown } from './logic.js';
+/**
+ * The trigger's distance from the window's foot and its start edge: 10px, or the
+ * device's inset and 4px where that is wider. A right-to-left page puts the
+ * trigger on the right, so the inline edge takes the wider of the two side insets.
+ */
+const EDGE = {
+    bottom: 'max(10px, calc(var(--safe-bottom, env(safe-area-inset-bottom, 0px)) + 4px))',
+    start: 'max(10px, calc(max(var(--safe-left, env(safe-area-inset-left, 0px)), var(--safe-right, env(safe-area-inset-right, 0px))) + 4px))',
+};
+/**
+ * A row's height: 36 under a mouse, 44 under a finger. Rows sit edge to edge,
+ * so the height itself is the target — an overlay past it would land on the
+ * next row. (`[role=button]` gets the same floor from design's base sheet.)
+ */
+const ROW = { minH: 36, $touchable: { minH: 44 } };
+/** The keys a list answers. */
+const MOVES = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End', 'PageDown', 'PageUp']);
+/** Everything in the card the arrow keys step through, in document order. */
+const STOPS = '[data-corner-stop], [data-slot="segmented-item"][data-state="checked"]';
+/**
+ * The theme, as the person chose it, and the one way to change it.
+ *
+ * Under `<Hanzo>` it writes through the root's `useAppearance` (its org,
+ * install and account layers). Under a host's own gui provider it writes the
+ * device's layer and repaints the resolved stack, which is what `useAppearance`
+ * would do there. Nobody chose yet: the row marks what the document shows.
+ */
+function useTheme() {
+    const look = useContext(Look);
+    const ground = useScheme();
+    const [own, setOwn] = useState(undefined);
+    useEffect(() => {
+        if (!look)
+            setOwn(read().theme);
+    }, [look]);
+    const set = useCallback((theme) => {
+        if (look)
+            return look.set({ theme });
+        write({ ...read(), theme });
+        apply(current().pref);
+        setOwn(theme);
+    }, [look]);
+    return [(look ? look.pref.theme : own) ?? ground, set];
+}
+export function Corner({ help = [], language, currency, words }) {
+    const w = { ...WORDS, ...words };
+    const [open, setOpen] = useState(false);
+    const [view, setView] = useState('main');
+    // Which row opened a list, so going back puts focus where it was.
+    const [from, setFrom] = useState('main');
+    const [rtl, setRtl] = useState(false);
+    const [theme, setTheme] = useTheme();
+    const emit = useEmit();
+    const trigger = useRef(null);
+    const panel = useRef(null);
+    const settings = { language, currency };
+    // Focus follows the view: a list puts it on its search or its options, the
+    // card on the row the list was opened from.
+    useEffect(() => {
+        if (!open)
+            return;
+        const root = panel.current;
+        if (!root)
+            return;
+        const target = view === 'main'
+            ? from === 'main'
+                ? null
+                : root.querySelector(`[data-corner-row="${from}"]`)
+            : root.querySelector('[data-corner-field]');
+        target?.focus();
+    }, [open, view, from]);
+    const toggle = (next) => {
+        if (next) {
+            // A right-to-left page mirrors the chevrons; read once, where the trigger sits.
+            if (trigger.current && typeof getComputedStyle === 'function')
+                setRtl(getComputedStyle(trigger.current).direction === 'rtl');
+            setView('main');
+            setFrom('main');
+            emit({ component: 'Corner', action: 'open' });
+        }
+        setOpen(next);
+    };
+    const back = () => setView('main');
+    const choose = (kind, code) => {
+        const s = settings[kind];
+        if (!s)
+            return;
+        if (code !== s.value) {
+            emit({ component: 'Corner', action: 'change', id: kind, value: code });
+            s.onChange(code);
+        }
+        back();
+    };
+    // The card's own arrows: up and down walk its stops. A radio group keeps its
+    // arrows (they move the theme, as a radio group's should).
+    const onCard = (e) => {
+        const key = e.key;
+        if (key !== 'ArrowDown' && key !== 'ArrowUp' && key !== 'Home' && key !== 'End')
+            return;
+        const el = e.target;
+        if (el?.closest?.('[role="radiogroup"]') && (key === 'ArrowDown' || key === 'ArrowUp'))
+            return;
+        const stops = Array.from(panel.current?.querySelectorAll(STOPS) ?? []);
+        if (!stops.length)
+            return;
+        e.preventDefault?.();
+        const at = stops.findIndex((s) => s === el || s.contains(el));
+        const to = key === 'Home' ? 0 : key === 'End' ? stops.length - 1 : Math.max(0, Math.min(stops.length - 1, at + (key === 'ArrowDown' ? 1 : -1)));
+        stops[to]?.focus();
+    };
+    const Forward = rtl ? ChevronLeft : ChevronRight;
+    return (_jsx(XStack, { ...slot('corner'), position: "fixed", bottom: EDGE.bottom, insetInlineStart: EDGE.start, z: 'var(--z-dock, 40)', children: _jsxs(Popover, { open: open, onOpenChange: toggle, placement: "top-start", allowFlip: true, stayInFrame: true, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(XStack, { ref: trigger, ...slot('corner-trigger'), ...tip(w.open), role: "button", tabIndex: 0, "aria-label": w.open, "aria-haspopup": "dialog", "aria-expanded": open, ...touch(32), width: 32, height: 32, items: "center", justify: "center", rounded: "$10", cursor: "pointer", opacity: open ? 1 : 0.85, hoverStyle: { opacity: 1 }, focusVisibleStyle: RING, onKeyDown: (e) => {
+                            if (e?.key !== 'Enter' && e?.key !== ' ')
+                                return;
+                            e.preventDefault?.();
+                            toggle(!open);
+                        }, children: _jsx(CircleHelp, { size: 22, color: "$background", fill: "var(--foreground)", "aria-hidden": true }) }) }), _jsxs(PopoverContent, { ref: panel, ...slot('corner-card'), role: "dialog", "aria-label": w.open, solid: true, sideOffset: 6, width: 288, maxW: "calc(100vw - 20px)", maxH: 'calc(100dvh - 72px)', overflowY: "auto", p: "$3", gap: "$2", items: "stretch", elevation: "$4", trapFocus: true, onOpenAutoFocus: (e) => {
+                        // The first thing in the card that does something, not its close button.
+                        e.preventDefault();
+                        panel.current?.querySelector(STOPS)?.focus();
+                    }, onCloseAutoFocus: (e) => {
+                        e.preventDefault();
+                        trigger.current?.focus();
+                    }, onEscapeKeyDown: (e) => {
+                        // Escape in a list goes back to the card; on the card it closes.
+                        if (view === 'main')
+                            return;
+                        e.preventDefault();
+                        back();
+                    }, children: [_jsx(Reflow, { on: view }), view === 'main' ? (_jsxs(YStack, { gap: "$2", onKeyDown: onCard, children: [help.length ? (_jsxs(_Fragment, { children: [_jsx(Head, { title: w.help, close: w.close, onClose: () => toggle(false) }), _jsx(YStack, { ...slot('corner-help'), role: "list", "aria-label": w.help, children: help.map((link) => (_jsx(Item, { link: link, leaving: w.leaves, onPress: () => emit({ component: 'Corner', action: 'click', id: link.label }) }, link.href + link.label))) }), _jsx(YStack, { height: 1, bg: "$borderColor", my: "$1", "aria-hidden": true })] })) : null, _jsx(Head, { title: w.preferences, close: help.length ? undefined : w.close, onClose: () => toggle(false) }), _jsxs(XStack, { ...slot('corner-theme'), ...ROW, items: "center", justify: "space-between", gap: "$3", children: [_jsx(SizableText, { size: "$3", color: "$aside", children: w.theme }), _jsx(Segmented, { variant: "track", itemWidth: "content", name: "theme", "aria-label": w.theme, value: theme, onChange: setTheme, options: [
+                                                { value: 'system', label: w.auto },
+                                                { value: 'light', label: '', 'aria-label': w.light, icon: _jsx(Sun, { size: 14, color: "$ink", "aria-hidden": true }) },
+                                                { value: 'dark', label: '', 'aria-label': w.dark, icon: _jsx(Moon, { size: 14, color: "$ink", "aria-hidden": true }) },
+                                            ] })] }), ['language', 'currency'].map((kind) => {
+                                    const s = settings[kind];
+                                    if (!s)
+                                        return null;
+                                    const chosen = s.options.find((o) => o.code === s.value);
+                                    return (_jsxs(XStack, { ...slot('corner-row'), ...press(() => {
+                                            setFrom(kind);
+                                            setView(kind);
+                                        }), "data-corner-stop": "", "data-corner-row": kind, "aria-haspopup": "listbox", ...ROW, items: "center", gap: "$3", mx: -8, px: "$2", rounded: "$3", cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: RING, children: [_jsx(SizableText, { size: "$3", color: "$aside", flex: 1, children: w[kind] }), _jsx(SizableText, { size: "$3", color: "$ink", fontWeight: "600", numberOfLines: 1, shrink: 1, ...(kind === 'language' ? { lang: s.value, dir: chosen?.dir } : null), children: shown(s) }), _jsx(Forward, { size: 16, color: "$hint", "aria-hidden": true })] }, kind));
+                                })] })) : (_jsx(List, { kind: view, setting: settings[view], title: w[view], words: w, rtl: rtl, onBack: back, onChoose: (code) => choose(view, code) }, view))] })] }) }));
+}
+/**
+ * Places the card again when it changes size. gui's popper re-measures when its
+ * TRIGGER moves, never when the card does, so a card that grows into a list
+ * keeps its old top and runs off the foot of the window. Inside the content,
+ * so it reads the popper the content belongs to.
+ */
+function Reflow({ on }) {
+    const { update } = usePopperContextSlow();
+    useLayoutEffect(() => {
+        update?.();
+    }, [on, update]);
+    return null;
+}
+/** A section's quiet title, and the card's close button when the section is first. */
+function Head({ title, close, onClose }) {
+    return (_jsxs(XStack, { items: "center", justify: "space-between", minH: 28, children: [_jsx(SizableText, { size: "$2", color: "$hint", render: "h2", m: 0, children: title }), close ? _jsx(Icon, { label: close, onPress: onClose, glyph: _jsx(X, { size: 18, color: "$aside", "aria-hidden": true }) }) : null] }));
+}
+/** An icon-only button: 28px drawn, 44 under a finger. */
+function Icon({ label, glyph, onPress }) {
+    return (_jsx(XStack, { ...press(onPress), ...tip(label), "aria-label": label, ...touch(28), width: 28, height: 28, marginInlineEnd: -6, items: "center", justify: "center", rounded: "$10", cursor: "pointer", hoverStyle: { bg: '$hover' }, focusVisibleStyle: RING, children: glyph }));
+}
+/** One help link. A link that leaves the site opens a new tab and says so, to the eye and to a screen reader. */
+function Item({ link, leaving, onPress }) {
+    const out = typeof location !== 'undefined' && leaves(link.href, location.origin);
+    return (_jsx(XStack, { role: "listitem", children: _jsxs(Anchor, { ...slot('corner-link'), "data-corner-stop": "", href: link.href, target: out ? '_blank' : undefined, rel: out ? 'noopener noreferrer' : undefined, "aria-label": out ? `${link.label} (${leaving})` : undefined, onPress: onPress, display: "flex", flexDirection: "row", flex: 1, items: "center", gap: "$2.5", ...ROW, mx: -8, px: "$2", rounded: "$3", textDecorationLine: "none", color: "$ink", hoverStyle: { bg: '$hover' }, focusVisibleStyle: RING, children: [link.icon ? (_jsx(XStack, { width: 20, items: "center", justify: "center", "aria-hidden": true, children: link.icon })) : null, _jsx(SizableText, { size: "$3", color: "$ink", fontWeight: "500", children: link.label }), out ? _jsx(ExternalLink, { size: 12, color: "$hint", "aria-hidden": true }) : null] }) }));
+}
+/**
+ * A setting's options, in place of the card: back, the title, a search when the
+ * list is long, then the options with a check on the current one.
+ *
+ * ARIA: the options are a listbox. With a search, the field is the combobox and
+ * owns the cursor through `aria-activedescendant`, so focus never leaves it
+ * while the arrows move; without one the listbox itself takes focus and does the
+ * same. Enter or a press chooses.
+ */
+function List({ kind, setting, title, words, rtl, onBack, onChoose, }) {
+    const [q, setQ] = useState('');
+    const rows = find(setting.options, q);
+    const [at, setAt] = useState(() => Math.max(0, rows.findIndex((o) => o.code === setting.value)));
+    const id = useId();
+    const listId = `${id}-list`;
+    const optionId = (i) => `${id}-opt-${i}`;
+    const searchable = setting.options.length > LONG;
+    const Back = rtl ? ChevronRight : ChevronLeft;
+    // A new search starts the cursor at the top.
+    useEffect(() => {
+        if (q)
+            setAt(0);
+    }, [q]);
+    // Keep the row under the cursor in view as it moves.
+    useEffect(() => {
+        if (typeof document === 'undefined')
+            return;
+        document.getElementById(optionId(at))?.scrollIntoView?.({ block: 'nearest' });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [at]);
+    const onKey = (e) => {
+        const key = e?.key;
+        if (MOVES.has(key)) {
+            if ((key === 'Home' || key === 'End') && q)
+                return;
+            e.preventDefault?.();
+            setAt(move(key, at, rows.length));
+            return;
+        }
+        if (key === 'Enter' || (key === ' ' && !searchable)) {
+            e.preventDefault?.();
+            const o = rows[at];
+            if (o)
+                onChoose(o.code);
+        }
+    };
+    const active = rows[at] ? optionId(at) : undefined;
+    return (_jsxs(YStack, { gap: "$2", children: [_jsxs(XStack, { items: "center", gap: "$1", minH: 28, children: [_jsx(XStack, { marginInlineStart: -6, children: _jsx(Icon, { label: words.back, onPress: onBack, glyph: _jsx(Back, { size: 18, color: "$aside", "aria-hidden": true }) }) }), _jsx(SizableText, { size: "$3", color: "$ink", fontWeight: "600", render: "h2", m: 0, children: title })] }), searchable ? (_jsxs(XStack, { ...slot('corner-search'), height: 32, px: "$2", gap: "$1.5", items: "center", rounded: "$3", borderWidth: 1, borderColor: "$borderColor", bg: "$background", focusWithinStyle: { borderColor: '$outlineColor' }, children: [_jsx(Search, { size: 14, color: "$hint", "aria-hidden": true }), _jsx(GuiInput, { ...slot('corner-input'), "data-corner-field": "", unstyled: true, flex: 1, minW: 0, height: 30, p: 0, borderWidth: 0, bg: "transparent", fontSize: "$3", color: "$ink", placeholderTextColor: "$placeholderColor", placeholder: words.search, value: q, onChangeText: setQ, role: "combobox", "aria-label": `${words.search}: ${title}`, "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active, autoComplete: "off", spellCheck: false, onKeyDown: onKey })] })) : null, _jsxs(YStack, { ...slot('corner-list'), id: listId, role: "listbox", "aria-label": title, ...(searchable
+                    ? null
+                    : { 'data-corner-field': '', tabIndex: 0, 'aria-activedescendant': active, onKeyDown: onKey, focusVisibleStyle: RING }), 
+                // A height, not a ceiling: a search that narrows the list leaves the card
+                // where it is instead of shrinking it away from the trigger.
+                height: 'min(320px, calc(100dvh - 180px))', overflowY: "auto", mx: -4, px: "$1", rounded: "$3", children: [rows.map((o, i) => {
+                        const picked = o.code === setting.value;
+                        return (_jsxs(XStack, { ...slot('corner-option'), id: optionId(i), role: "option", "aria-selected": picked, ...ROW, px: "$2", gap: "$2", items: "center", rounded: "$3", cursor: "pointer", bg: i === at ? '$hover' : 'transparent', onHoverIn: () => setAt(i), onPress: () => onChoose(o.code), children: [_jsx(YStack, { flex: 1, minW: 0, children: _jsx(SizableText, { size: "$3", color: "$ink", fontWeight: picked ? '600' : '400', numberOfLines: 1, self: "flex-start", maxW: "100%", ...(kind === 'language' ? { lang: o.code, dir: o.dir } : null), children: o.label }) }), o.hint ? (_jsx(SizableText, { size: "$2", color: "$hint", numberOfLines: 1, shrink: 0, children: o.hint })) : null, _jsx(XStack, { width: 16, items: "center", justify: "center", shrink: 0, "aria-hidden": true, children: picked ? _jsx(Check, { size: 16, color: "$ink" }) : null })] }, o.code));
+                    }), rows.length === 0 ? (_jsx(XStack, { ...ROW, px: "$2", items: "center", role: "status", children: _jsx(SizableText, { size: "$3", color: "$hint", children: words.none }) })) : null] })] }));
+}
+//# sourceMappingURL=Corner.js.map