@hanzo/ui 8.29.0 → 8.29.1

package/dist/gallery.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.29.0</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
+<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.29.1</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
 :root { --hanzo-ui-styles: 1; }
 /* Hanzo Design System — the entry point. Import THIS one file.
  *

package/dist/masthead/Masthead.cjs

@@ -0,0 +1,351 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HEADER = void 0;
+exports.Masthead = Masthead;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const gui_1 = require("@hanzo/gui");
+const shell_1 = require("@hanzogui/shell");
+const nav_1 = require("./nav.cjs");
+/** A menu stays open this long after the pointer leaves, so a diagonal path to a row keeps it. */
+const GRACE = 160;
+/** And opens after the pointer rests this long, so crossing the bar opens nothing. */
+const REST = 70;
+/** The bar's height, under the notch. */
+exports.HEADER = 60;
+/** The bar's two inks over the page: a wash for a lit pill, and its hairline. */
+const WASH = '$ink/6';
+const RING = 'inset 0 0 0 1px color-mix(in srgb, var(--foreground) 10%, transparent)';
+/** A pill lit: under the pointer, or holding its menu open. */
+const LIT = { color: 'var(--foreground)', bg: WASH, boxShadow: RING };
+/** Where what hangs from the bar begins: under the bar and the notch above it. */
+const UNDER = `calc(${exports.HEADER}px + env(safe-area-inset-top))`;
+/** The open bar, the planes, the log-in card and the sheet stand on one opaque ground. */
+const PANEL = 'var(--chrome-panel)';
+/** The drop under what hangs from the bar. */
+const DROP = '0 24px 60px -16px color-mix(in srgb, var(--pure-black) 75%, transparent)';
+/** The bar's glass, once the page moves under it. */
+const GLASS = '$background/72';
+/** The highest z-index there is. The search palette stands in a fixed layer at
+ *  it, so nothing fixed to the window draws over an open palette. */
+const TOP = 2147483647;
+/**
+ * The shell's account menu paints with `var(--white-92…)`, and @hanzo/design
+ * keeps those rungs white in both themes. The bar follows the theme, so inside
+ * it the four flip to black: `light-dark()` reads the `color-scheme` @hanzo/design
+ * sets with the theme. The dimmest is PUSHED rather than mirrored — .45 black on
+ * white is 3.35:1, .56 is 4.5:1 on the bar and on the panel.
+ */
+const ink = (dark, light) => `light-dark(color-mix(in srgb, var(--pure-black) ${light}%, transparent), color-mix(in srgb, var(--pure-white) ${dark}%, transparent))`;
+const INK = {
+    '--white-92': ink(92, 92),
+    '--white-60': ink(60, 60),
+    '--white-45': ink(45, 56),
+    '--white-10': 'var(--border)',
+};
+/** The bar: a sticky row under the notch, on the page's gutter. Its height is
+ *  published as `--header`, which @hanzo/design's scroll padding reads. */
+const BAR = {
+    position: 'sticky',
+    t: 0,
+    z: 'var(--z-header)',
+    items: 'center',
+    gap: 12,
+    boxSizing: 'content-box',
+    height: exports.HEADER,
+    pt: 'calc(0px + env(safe-area-inset-top))',
+    pb: 0,
+    px: 'var(--page-gutter)',
+};
+/** The name of the place, lit under the pointer and while the company menu is open. */
+const BRAND = { items: 'center', shrink: 0, height: 34, ml: -4, rounded: 999, hoverStyle: { bg: WASH, boxShadow: RING } };
+/** The wordmark: home, and never dim. */
+const NAME = { display: 'flex', items: 'center', height: '100%', pl: 12, pr: 12, color: 'var(--foreground)', whiteSpace: 'nowrap', textDecorationLine: 'none' };
+/** A pill in the bar: dim at rest, lit under the pointer. A button's own padding is the browser's, so it is stated. */
+const PILL = {
+    display: 'flex',
+    items: 'center',
+    shrink: 0,
+    height: 34,
+    p: 0,
+    borderWidth: 0,
+    rounded: 999,
+    bg: 'transparent',
+    color: 'var(--muted-foreground)',
+    cursor: 'pointer',
+    hoverStyle: LIT,
+};
+/** A pill that opens a menu: its label, then a chevron. */
+const TRIGGER = { ...PILL, gap: 6, px: 12, fontSize: '$2', lineHeight: 20, fontWeight: '500', whiteSpace: 'nowrap' };
+/** The one filled control, in the bar and in the sheet. */
+const ACT = {
+    display: 'flex',
+    items: 'center',
+    justify: 'center',
+    gap: 2,
+    height: 34,
+    px: 14,
+    rounded: 999,
+    bg: 'var(--foreground)',
+    color: 'var(--background)',
+    fontSize: '$2',
+    lineHeight: 20,
+    fontWeight: '600',
+    whiteSpace: 'nowrap',
+    hoverStyle: { opacity: 0.88 },
+};
+/** What hangs from the bar arrives: up 4px, faded in. */
+const ARRIVE = { enterStyle: { opacity: 0, y: -4 }, transition: 'quickest' };
+/**
+ * A row in a plane. As wide as its words, so a keyboard ring hugs the words it
+ * names rather than the column; its padding steps out of the column, so the
+ * words stand on the column's edge.
+ */
+const ROW = {
+    display: 'flex',
+    items: 'center',
+    self: 'flex-start',
+    mx: -8,
+    px: 8,
+    rounded: 8,
+    whiteSpace: 'nowrap',
+    hoverStyle: { color: 'var(--foreground)' },
+    focusVisibleStyle: { color: 'var(--foreground)' },
+};
+/** The destinations someone arrives wanting, in display type. */
+const LEAD = { ...ROW, py: 2, fontSize: '$8', lineHeight: 33.28, fontWeight: '400', letterSpacing: -0.26, color: 'var(--foreground)' };
+const PLAIN = { ...ROW, py: 5, fontSize: '$2', lineHeight: 20, fontWeight: '500', color: 'var(--muted-foreground)' };
+/** A row in the sheet: a thumb's height, the column's width. */
+const LINE = {
+    display: 'flex',
+    items: 'center',
+    justify: 'flex-start',
+    minH: 44,
+    rounded: 8,
+    fontWeight: '400',
+    color: 'var(--muted-foreground)',
+    hoverStyle: { color: 'var(--foreground)' },
+    focusVisibleStyle: { color: 'var(--foreground)' },
+};
+/** The sheet's doors: Log in's rows, or the reader's own page. */
+const DOOR = { display: 'flex', items: 'center', justify: 'flex-start', minH: 44, fontSize: '$4', lineHeight: 20, fontWeight: '400', color: 'var(--foreground)' };
+/** A menu's mark. In the bar it waits for `$xl`; in the sheet it always shows. */
+function Mark({ name, bar = false }) {
+    const Glyph = shell_1.MARKS[name];
+    return ((0, jsx_runtime_1.jsx)(gui_1.View, { render: "span", "data-slot": "mark", "aria-hidden": true, display: bar ? 'none' : 'flex', $xl: bar ? { display: 'flex' } : undefined, opacity: 0.9, children: (0, jsx_runtime_1.jsx)(Glyph, { size: 16 }) }));
+}
+/** ▾, turned over while what it opens is open. */
+function Chevron({ turned, end = false }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.View, { render: "span", "aria-hidden": true, display: "flex", shrink: 0, ml: end ? 'auto' : 0, rotate: turned ? '180deg' : '0deg', transition: "quickest", children: (0, jsx_runtime_1.jsx)("svg", { width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M6 9l6 6 6-6" }) }) }));
+}
+/** ↗ — the shell's outbound arrow, riding the label's size and ink. */
+function Out() {
+    return ((0, jsx_runtime_1.jsx)(gui_1.View, { render: "span", "aria-hidden": true, display: "flex", ml: "calc(0.28em)", opacity: 0.7, children: (0, jsx_runtime_1.jsx)("svg", { width: "0.75em", height: "0.75em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M7 17 17 7M9 7h8v8" }) }) }));
+}
+/** A row: the label, and ↗ with a new tab when it leaves. */
+function Row({ link, place, onClick, ...style }) {
+    const out = (0, nav_1.leaves)(link.href, place.here);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Anchor, { href: (0, nav_1.at)(link.href, place.origin, place.here), target: out ? '_blank' : undefined, rel: out ? 'noreferrer' : undefined, onClick: onClick, textDecorationLine: "none", ...style, children: [link.label, out ? (0, jsx_runtime_1.jsx)(Out, {}) : null] }));
+}
+/** A column's title. In the sheet it is the quiet label over a section's rows. */
+function Title({ sheet = false, children }) {
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { render: "p", mt: sheet ? 4 : 0, mb: sheet ? 2 : 10, mx: 0, fontSize: sheet ? '$1' : '$2', lineHeight: 20, fontWeight: "600", color: sheet ? 'var(--text-tertiary)' : 'var(--foreground)', children: children }));
+}
+/**
+ * A menu's columns, laid out from the wordmark's column: the lead column in
+ * display type, the rest as lists. The column under the pointer is the one
+ * being read; the others step back to 45%.
+ */
+function Columns({ menu, place, onPick }) {
+    const [hot, setHot] = (0, react_1.useState)(null);
+    return ((0, jsx_runtime_1.jsx)(gui_1.View, { display: "grid", gridAutoFlow: "column", gridAutoColumns: "max-content", justify: "flex-start", gap: "max(24px, min(3vw, 64px))", pt: 36, pb: 48, px: "calc(var(--page-gutter) + 8px)", children: menu.groups.map((group, i) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: 2, minW: 0, opacity: hot === null || hot === i ? 1 : 0.45, transition: "quickest", onPointerEnter: () => setHot(i), onPointerLeave: () => setHot(null), children: [(0, jsx_runtime_1.jsx)(Title, { children: group.title }), group.links.map((link) => ((0, jsx_runtime_1.jsx)(Row, { link: link, place: place, onClick: onPick, ...(group.lead ? LEAD : PLAIN) }, link.label)))] }, group.title))) }));
+}
+/** The DOM node a gui element stands for, on the web. */
+const node = (el) => (el instanceof HTMLElement ? el : null);
+/** Publish the bar's content height to `--header` on the document for as long as it is mounted. */
+function measure(el) {
+    if (!el || typeof ResizeObserver === 'undefined')
+        return;
+    const root = document.documentElement.style;
+    const size = new ResizeObserver(([entry]) => root.setProperty('--header', `${entry.contentRect.height}px`));
+    size.observe(el);
+    return () => {
+        size.disconnect();
+        root.removeProperty('--header');
+    };
+}
+/** The bar's rows as ⌘K entries: what a reader can reach from here, they can find. */
+function entries(company, menus, login, place) {
+    return [company, ...menus]
+        .flatMap((menu) => menu.groups.flatMap((group) => group.links.map((link) => ({ menu, link }))))
+        .concat(login.map((link) => ({ menu: company, link })))
+        .filter(({ link }) => !link.href.startsWith(`${nav_1.DOCS}/`))
+        .map(({ menu, link }) => ({
+        id: `nav/${menu.id}/${link.label}`,
+        title: link.label,
+        href: (0, nav_1.at)(link.href, place.origin, place.here),
+        group: menu.label,
+        external: (0, nav_1.leaves)(link.href, place.here),
+    }));
+}
+function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '', tree = {}, person, onSignOut, commands = [], onAsk, askHref, bare = false, }) {
+    const company = tree.company ?? nav_1.COMPANY;
+    const menus = tree.menus ?? nav_1.MENUS;
+    const login = tree.login ?? nav_1.LOGIN;
+    const account = tree.account ?? nav_1.ACCOUNT;
+    const act = person ? (tree.open ?? nav_1.OPEN) : (tree.try ?? nav_1.TRY);
+    const place = { origin, here };
+    const homeHref = (0, nav_1.at)(home, origin, here);
+    const [open, setOpen] = (0, react_1.useState)(null);
+    const [sheet, setSheet] = (0, react_1.useState)(false);
+    const [search, setSearch] = (0, react_1.useState)(false);
+    const [grounded, setGrounded] = (0, react_1.useState)(false);
+    const timer = (0, react_1.useRef)(undefined);
+    const pinned = (0, react_1.useRef)(false);
+    const bar = (0, react_1.useRef)(null);
+    const toggle = (0, react_1.useRef)(null);
+    /** The bar's element, held for the menus and measured for `--header`. */
+    const masthead = (0, react_1.useCallback)((el) => {
+        bar.current = el;
+        return measure(node(el));
+    }, []);
+    const close = (0, react_1.useCallback)(() => {
+        clearTimeout(timer.current);
+        pinned.current = false;
+        setOpen(null);
+    }, []);
+    // The bar is clear over the top of the page and takes the glass once the page
+    // moves under it.
+    (0, react_1.useEffect)(() => {
+        const read = () => setGrounded(window.scrollY > 4);
+        read();
+        window.addEventListener('scroll', read, { passive: true });
+        return () => window.removeEventListener('scroll', read);
+    }, []);
+    // Escape closes whatever is open and hands focus back to what opened it.
+    (0, react_1.useEffect)(() => {
+        if (!open && !sheet)
+            return;
+        const key = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            if (open) {
+                node(bar.current)?.querySelector(`[aria-controls="menu-${open}"]`)?.focus();
+                close();
+            }
+            if (sheet) {
+                setSheet(false);
+                node(toggle.current)?.focus();
+            }
+        };
+        document.addEventListener('keydown', key);
+        return () => document.removeEventListener('keydown', key);
+    }, [open, sheet, close]);
+    // A press anywhere outside the bar closes an open menu.
+    (0, react_1.useEffect)(() => {
+        if (!open)
+            return;
+        const outside = (e) => {
+            if (!node(bar.current)?.contains(e.target))
+                close();
+        };
+        document.addEventListener('pointerdown', outside);
+        return () => document.removeEventListener('pointerdown', outside);
+    }, [open, close]);
+    // The sheet holds the screen: the page under it does not scroll, and it goes
+    // away when the window grows into the bar.
+    (0, react_1.useEffect)(() => {
+        if (!sheet)
+            return;
+        const root = document.documentElement;
+        root.style.overflow = 'hidden';
+        const wide = matchMedia('(min-width: 1024px)');
+        const grow = () => wide.matches && setSheet(false);
+        wide.addEventListener('change', grow);
+        return () => {
+            root.style.overflow = '';
+            wide.removeEventListener('change', grow);
+        };
+    }, [sheet]);
+    const rest = (id) => (e) => {
+        if (e.pointerType !== 'mouse')
+            return;
+        clearTimeout(timer.current);
+        if (open === id)
+            return;
+        if (open) {
+            pinned.current = false;
+            setOpen(id);
+        }
+        else
+            timer.current = setTimeout(() => setOpen(id), REST);
+    };
+    const leave = (e) => {
+        if (e.pointerType !== 'mouse' || pinned.current)
+            return;
+        clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(null), GRACE);
+    };
+    const press = (id) => () => {
+        clearTimeout(timer.current);
+        // A click on a menu the pointer already opened keeps it open; a second one closes it.
+        if (open === id && pinned.current)
+            return close();
+        pinned.current = true;
+        setOpen(id);
+    };
+    const step = (id) => (e) => {
+        if (e.key !== 'ArrowDown')
+            return;
+        e.preventDefault();
+        pinned.current = true;
+        setOpen(id);
+        requestAnimationFrame(() => document.querySelector(`#menu-${id} a`)?.focus());
+    };
+    // Focus that leaves a menu closes it.
+    const blur = (e) => {
+        if (!e.currentTarget.contains(e.relatedTarget))
+            close();
+    };
+    const find = () => {
+        close();
+        setSheet(false);
+        setSearch(true);
+    };
+    /** What a pill wears while its menu is open. */
+    const lit = (id) => (open === id ? LIT : {});
+    const menu = (item, trigger) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { position: "relative", onPointerEnter: rest(item.id), onPointerLeave: leave, onBlur: blur, children: [trigger, open === item.id ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { id: `menu-${item.id}`, role: "group", "aria-label": item.label, position: "fixed", t: UNDER, l: 0, r: 0, z: "var(--z-raised)", maxH: `calc(100dvh - ${exports.HEADER}px)`, overflowY: "auto", bg: PANEL, boxShadow: DROP, ...ARRIVE, children: (0, jsx_runtime_1.jsx)(Columns, { menu: item, place: place, onPick: close }) })) : null] }));
+    const trigger = (item) => ((0, jsx_runtime_1.jsxs)(gui_1.Text, { render: "button", ...TRIGGER, ...lit(item.id), "aria-expanded": open === item.id, "aria-controls": `menu-${item.id}`, onClick: press(item.id), onKeyDown: step(item.id), children: [(0, jsx_runtime_1.jsx)(Mark, { name: item.glyph, bar: true }), item.label, (0, jsx_runtime_1.jsx)(Chevron, { turned: open === item.id })] }));
+    // On the way in and on the way to pay, the name alone. The two bars are
+    // different elements (`key`), so moving between them mounts the other bar
+    // rather than re-rendering one with and without its `transition`, which
+    // changes the hooks @hanzo/gui calls for it.
+    if (bare) {
+        return ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ref: masthead, render: "header", "data-slot": "masthead", ...BAR, children: (0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "span", ...BRAND, children: (0, jsx_runtime_1.jsx)(gui_1.Anchor, { href: homeHref, "aria-label": `${label} home`, ...NAME, children: (0, jsx_runtime_1.jsx)(shell_1.HanzoWordmark, { label: label, size: 22 }) }) }) }, "bare"));
+    }
+    const lifted = open !== null || sheet;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { ref: masthead, render: "header", "data-slot": "masthead", ...BAR, bg: lifted ? PANEL : grounded ? GLASS : 'transparent', 
+                // The chrome's own blur, by name: @hanzo/design's one radius, the glass every bar wears.
+                backdropFilter: !lifted && grounded ? 'var(--chrome-blur)' : 'none', transition: "quickest", 
+                // inline-style: custom properties @hanzogui/shell's account menu reads; no prop sets a variable.
+                style: INK, children: [menu(company, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "span", ...BRAND, ...(open === company.id ? { bg: WASH, boxShadow: RING } : {}), children: [(0, jsx_runtime_1.jsx)(gui_1.Anchor, { href: homeHref, "aria-label": `${label} home`, ...NAME, $lg: { pr: 0 }, children: (0, jsx_runtime_1.jsx)(shell_1.HanzoWordmark, { label: label, size: 22 }) }), (0, jsx_runtime_1.jsx)(gui_1.Text, { render: "button", "aria-label": company.label, "aria-expanded": open === company.id, "aria-controls": `menu-${company.id}`, onClick: press(company.id), onKeyDown: step(company.id), display: "none", $lg: { display: 'grid' }, placeItems: "center", width: 30, height: "100%", p: 0, pr: 6, borderWidth: 0, borderTopRightRadius: 999, borderBottomRightRadius: 999, bg: "transparent", color: "var(--foreground)", cursor: "pointer", children: (0, jsx_runtime_1.jsx)(Chevron, { turned: open === company.id }) })] })), (0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "nav", "aria-label": "Main", display: "none", $lg: { display: 'flex' }, items: "center", gap: 2, children: menus.map((item) => ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: menu(item, trigger(item)) }, item.id))) }), open && open !== 'login' ? ((0, jsx_runtime_1.jsx)(gui_1.View, { "aria-hidden": true, onPress: close, position: "fixed", t: UNDER, l: 0, r: 0, b: 0, z: "var(--z-base)", bg: "$black/40", backdropFilter: "var(--chrome-blur)" })) : null, (0, jsx_runtime_1.jsx)(gui_1.Text, { render: "button", "aria-label": "Search Hanzo or ask AI", onClick: find, ...PILL, justify: "center", width: 44, height: 44, ml: "auto", $lg: { width: 34, height: 34, ml: 0 }, children: (0, jsx_runtime_1.jsx)(shell_1.MARKS.search, { size: 16 }) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", gap: 8, $lg: { ml: 'auto' }, children: [person ? ((0, jsx_runtime_1.jsx)(shell_1.HanzoIdentity, { auth: { user: person, onSignOut, items: [{ id: 'account', label: account.label, href: (0, nav_1.at)(account.href, origin, here) }] } })) : ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { position: "relative", display: "none", $lg: { display: 'flex' }, onPointerEnter: rest('login'), onPointerLeave: leave, onBlur: blur, children: [(0, jsx_runtime_1.jsxs)(gui_1.Text, { render: "button", ...TRIGGER, ...lit('login'), "aria-expanded": open === 'login', "aria-controls": "menu-login", onClick: press('login'), onKeyDown: step('login'), children: ["Log in", (0, jsx_runtime_1.jsx)(Chevron, { turned: open === 'login' })] }), open === 'login' ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { id: "menu-login", role: "group", "aria-label": "Log in", position: "absolute", t: "calc(100% + 8px)", r: 0, display: "grid", gap: 2, minW: 240, p: 6, borderWidth: 1, borderColor: "var(--border)", rounded: 12, bg: PANEL, boxShadow: DROP, ...ARRIVE, children: login.map((link) => ((0, jsx_runtime_1.jsxs)(gui_1.Anchor, { href: (0, nav_1.at)(link.href, origin, here), target: "_blank", rel: "noreferrer", onClick: close, display: "grid", gap: 2, py: 8, px: 10, rounded: 8, color: "var(--foreground)", fontSize: "$2", lineHeight: 20, fontWeight: "600", textDecorationLine: "none", hoverStyle: { bg: WASH }, focusVisibleStyle: { bg: WASH }, children: [link.label, (0, jsx_runtime_1.jsx)(gui_1.Text, { render: "small", fontSize: "$1", lineHeight: 20, fontWeight: "400", color: "var(--muted-foreground)", children: link.hint })] }, link.label))) })) : null] })), (0, jsx_runtime_1.jsx)(Row, { link: act, place: place, ...ACT, display: "none", $lg: { display: 'flex' } }), (0, jsx_runtime_1.jsx)(gui_1.Text, { ref: toggle, render: "button", "aria-label": sheet ? 'Close menu' : 'Open menu', "aria-expanded": sheet, "aria-controls": "sheet", onClick: () => {
+                                    close();
+                                    setSheet((s) => !s);
+                                }, display: "grid", $lg: { display: 'none' }, placeItems: "center", width: 44, height: 44, p: 0, mr: -10, borderWidth: 0, bg: "transparent", color: "var(--foreground)", cursor: "pointer", children: (0, jsx_runtime_1.jsx)("svg", { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)("path", { d: sheet ? 'M6 6l12 12M18 6L6 18' : 'M3 9h18M3 15h18' }) }) })] })] }, "full"), sheet ? ((0, jsx_runtime_1.jsx)(Sheet, { company: company, menus: menus, login: login, door: person ? account : null, act: act, place: place, onClose: () => setSheet(false) })) : null, (0, jsx_runtime_1.jsx)(gui_1.View, { position: "fixed", z: TOP, children: (0, jsx_runtime_1.jsx)(shell_1.HanzoCommandPalette, { commands: [...commands, ...entries(company, menus, login, place).filter((e) => !commands.some((c) => c.href === e.href))], open: search, onOpenChange: setSearch, onAsk: onAsk, askHref: askHref }) })] }));
+}
+/**
+ * The phone's menu: the whole tree, one section open at a time, then the two
+ * doors. A `<details>` per section, so the browser keeps which one is open and
+ * closes the rest (`name`); the chevron reads it back. It stands under the bar
+ * and carries the bottom inset, as the bar carries the top one.
+ */
+function Sheet({ company, menus, login, door, act, place, onClose, }) {
+    const first = (0, react_1.useRef)(null);
+    const [section, setSection] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => node(first.current)?.focus(), []);
+    return ((0, jsx_runtime_1.jsxs)(gui_1.View, { id: "sheet", role: "dialog", "aria-modal": true, "aria-label": "Menu", display: "block", position: "fixed", t: UNDER, l: 0, r: 0, b: 0, z: "var(--z-overlay)", overflowY: "auto", "$platform-web": { overscrollBehaviorX: 'contain', overscrollBehaviorY: 'contain' }, pt: 4, px: "var(--page-gutter)", pb: "calc(24px + env(safe-area-inset-bottom))", bg: PANEL, ...ARRIVE, children: [(0, jsx_runtime_1.jsx)(gui_1.View, { render: "nav", "aria-label": "Main", display: "block", children: [company, ...menus].map((item, i) => ((0, jsx_runtime_1.jsxs)(gui_1.View, { render: (0, jsx_runtime_1.jsx)("details", { name: "sheet", onToggle: (e) => {
+                            const now = e.currentTarget.open;
+                            setSection((s) => (now ? item.id : s === item.id ? null : s));
+                        } }), display: "block", borderBottomWidth: 1, borderColor: "var(--border)", children: [(0, jsx_runtime_1.jsxs)(gui_1.Text, { ref: i === 0 ? first : undefined, render: "summary", display: "flex", items: "center", gap: 10, minH: 56, fontSize: "$6", lineHeight: 20, fontWeight: "500", color: "var(--foreground)", cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(Mark, { name: item.glyph }), item.label, (0, jsx_runtime_1.jsx)(Chevron, { turned: section === item.id, end: true })] }), item.groups.map((group) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: 2, minW: 0, pb: 16, children: [(0, jsx_runtime_1.jsx)(Title, { sheet: true, children: group.title }), group.links.map((link) => ((0, jsx_runtime_1.jsx)(Row, { link: link, place: place, onClick: onClose, ...LINE, fontSize: group.lead ? '$6' : '$4', lineHeight: group.lead ? 20.4 : 18 }, link.label)))] }, group.title)))] }, item.id))) }), (0, jsx_runtime_1.jsxs)(gui_1.View, { display: "grid", gap: 4, pt: 20, children: [door ? ((0, jsx_runtime_1.jsx)(Row, { link: door, place: place, onClick: onClose, ...DOOR })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Title, { sheet: true, children: "Log in" }), login.map((link) => ((0, jsx_runtime_1.jsx)(Row, { link: link, place: place, onClick: onClose, ...DOOR }, link.label)))] })), (0, jsx_runtime_1.jsx)(Row, { link: act, place: place, onClick: onClose, ...ACT, height: 48, mt: 12, fontSize: "$3" })] })] }));
+}

package/dist/masthead/Masthead.d.ts

@@ -0,0 +1,75 @@
+import { type HanzoCommandEntry } from '@hanzogui/shell';
+import { type Link, type Menu } from './nav.js';
+/**
+ * hanzo.ai's header, for every site that wears it: one nav tree (`./nav`) for
+ * the bar and the phone sheet.
+ *
+ * The bar is `@hanzogui/shell`'s vocabulary — its marks, its wordmark, its ⌘K
+ * palette and its account menu — laid out the way hanzo.ai reads: the wordmark
+ * opens the company, the five menus follow with a mark before each label,
+ * search closes the row, and Log in ▾ and Try Hanzo stand at the far end.
+ *
+ * Every style is a gui prop on the element that wears it; no stylesheet rule
+ * reaches the bar, a plane, the log-in card or the sheet. The geometry is the
+ * shell's — a 60px row, 34px pills, 13px labels, a 16px mark before each, a
+ * 12px chevron after — and every ink and ground is a theme token, so the light
+ * theme needs no second copy. Below gui's `$lg` (1024) the bar is the name,
+ * search and a menu button; the marks before the five labels wait for `$xl`
+ * (1280), because between the two the row fits its labels and not its marks.
+ *
+ * THREE GROUNDS for the bar. Clear over the top of a page; glass once the page
+ * moves under it; and the plane's own opaque ground while a menu or the sheet
+ * hangs from it, so bar and plane are one surface. The open bar carries no
+ * backdrop filter on purpose: a filtered element is a backdrop root, and the
+ * veil inside it would then blur the bar instead of the page.
+ *
+ * A row's look is read from the tree, not from where it lands: a path is a page
+ * on hanzo.ai and reads as one on every host (no ↗, the same tab), and a row
+ * that names a host says ↗ and opens a new tab — unless it names `here`, the
+ * host the page is on, when it is that site's own page.
+ */
+/** Who is signed in, as the account menu draws them. */
+export interface Person {
+    name: string;
+    email?: string;
+    avatar?: string;
+}
+/** The rows the bar draws. Each defaults to hanzo.ai's own, in `./nav`. */
+export interface Tree {
+    company: Menu;
+    menus: readonly Menu[];
+    login: readonly Link[];
+    /** The one filled control for a stranger. */
+    try: Link;
+    /** …and for a reader who is signed in. */
+    open: Link;
+    /** The signed-in reader's own page, in the account menu and the sheet. */
+    account: Link;
+}
+export interface MastheadProps {
+    /** The name in the corner: `Hanzo AI` on hanzo.ai. */
+    label?: string;
+    /** Where the name goes, read as a row is. */
+    home?: string;
+    /** The host the tree's paths are pages on: empty on hanzo.ai, `https://hanzo.ai` on any other site. */
+    origin?: string;
+    /** The host this page is on, so a row that names it is a page here (`https://hanzo.agency`). */
+    here?: string;
+    /** The rows, where they are not hanzo.ai's. */
+    tree?: Partial<Tree>;
+    /** The signed-in reader. Absent, the bar offers Log in ▾ and Try Hanzo. */
+    person?: Person | null;
+    onSignOut?: () => void;
+    /** What ⌘K finds, beside the bar's own rows. */
+    commands?: readonly HanzoCommandEntry[];
+    /** A question typed into ⌘K, handed to the host's own assistant. Absent, it goes to `askHref`. */
+    onAsk?: (question: string) => void;
+    /** Where ⌘K sends a question, as `<askHref>?q=`. */
+    askHref?: string;
+    /** The name alone, on the way in and on the way to pay: home is one click away. */
+    bare?: boolean;
+}
+/** The bar's height, under the notch. */
+export declare const HEADER = 60;
+export declare function Masthead({ label, home, origin, here, tree, person, onSignOut, commands, onAsk, askHref, bare, }: MastheadProps): import("react").JSX.Element;
+//# sourceMappingURL=Masthead.d.ts.map

package/dist/masthead/Masthead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Masthead.d.ts","sourceRoot":"","sources":["../../src/masthead/Masthead.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4E,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAElI,OAAO,EAA+D,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,OAAO,CAAA;AAEzG;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AAEH,wDAAwD;AACxD,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,2EAA2E;AAC3E,MAAM,WAAW,IAAI;IACnB,OAAO,EAAE,IAAI,CAAA;IACb,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;IACtB,KAAK,EAAE,SAAS,IAAI,EAAE,CAAA;IACtB,6CAA6C;IAC7C,GAAG,EAAE,IAAI,CAAA;IACT,0CAA0C;IAC1C,IAAI,EAAE,IAAI,CAAA;IACV,0EAA0E;IAC1E,OAAO,EAAE,IAAI,CAAA;CACd;AAED,MAAM,WAAW,aAAa;IAC5B,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uGAAuG;IACvG,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,gGAAgG;IAChG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,+CAA+C;IAC/C,IAAI,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,CAAA;IACpB,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,SAAS,iBAAiB,EAAE,CAAA;IACvC,kGAAkG;IAClG,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,oDAAoD;IACpD,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mFAAmF;IACnF,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAOD,yCAAyC;AACzC,eAAO,MAAM,MAAM,KAAK,CAAA;AAkQxB,wBAAgB,QAAQ,CAAC,EACvB,KAAkB,EAClB,IAAU,EACV,MAAW,EACX,IAAS,EACT,IAAS,EACT,MAAM,EACN,SAAS,EACT,QAAa,EACb,KAAK,EACL,OAAO,EACP,IAAY,GACb,EAAE,aAAa,+BA6Xf"}