@hanzo/ui 8.27.22 → 8.27.24

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.27.22</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.27.24</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,168 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Mark = Mark;
+exports.Chevron = Chevron;
+exports.Out = Out;
+exports.Row = Row;
+exports.Masthead = Masthead;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+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;
+function Mark({ name }) {
+    const Glyph = shell_1.MARKS[name];
+    return ((0, jsx_runtime_1.jsx)("span", { className: "hz-mark", "aria-hidden": "true", children: (0, jsx_runtime_1.jsx)(Glyph, { size: 16 }) }));
+}
+function Chevron() {
+    return ((0, jsx_runtime_1.jsx)("svg", { className: "hz-chevron", width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", 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)("svg", { className: "hz-out", width: "0.75em", height: "0.75em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", 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 hanzo.ai. Whether it
+ * leaves is read from the tree, so a row looks the same on every host.
+ */
+function Row({ link, origin = '', className, onClick }) {
+    const out = (0, nav_1.away)(link.href);
+    return ((0, jsx_runtime_1.jsxs)("a", { href: (0, nav_1.at)(link.href, origin), className: className, target: out ? '_blank' : undefined, rel: out ? 'noreferrer' : undefined, onClick: onClick, children: [link.label, out ? (0, jsx_runtime_1.jsx)(Out, {}) : null] }));
+}
+/** A menu's columns: the lead column in display type, the rest as lists. */
+function Columns({ menu, origin, onPick }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "hz-columns", children: menu.groups.map((group) => ((0, jsx_runtime_1.jsxs)("div", { className: "hz-column", "data-lead": group.lead ? '' : undefined, children: [(0, jsx_runtime_1.jsx)("p", { className: "hz-column-title", children: group.title }), group.links.map((link) => ((0, jsx_runtime_1.jsx)(Row, { link: link, origin: origin, onClick: onPick }, link.label)))] }, group.title))) }));
+}
+function Masthead({ label = 'Hanzo AI', home = '/', origin = '', person, onSignOut, commands = [], onAsk }) {
+    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);
+    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) {
+                bar.current?.querySelector(`[aria-controls="menu-${open}"]`)?.focus();
+                close();
+            }
+            if (sheet) {
+                setSheet(false);
+                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 (!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);
+    };
+    const menu = (item, trigger) => ((0, jsx_runtime_1.jsxs)("div", { className: "hz-menu", onPointerEnter: rest(item.id), onPointerLeave: leave, onBlur: blur, children: [trigger, open === item.id ? ((0, jsx_runtime_1.jsx)("div", { id: `menu-${item.id}`, className: "hz-plane", role: "group", "aria-label": item.label, children: (0, jsx_runtime_1.jsx)(Columns, { menu: item, origin: origin, onPick: close }) })) : null] }));
+    const trigger = (item) => ((0, jsx_runtime_1.jsxs)("button", { type: "button", className: "hz-trigger", "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 }), item.label, (0, jsx_runtime_1.jsx)(Chevron, {})] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("header", { ref: bar, className: "hz-masthead", "data-grounded": grounded || open || sheet ? '' : undefined, children: [menu(nav_1.COMPANY, (0, jsx_runtime_1.jsxs)("span", { className: "hz-brand", children: [(0, jsx_runtime_1.jsx)("a", { href: home, "aria-label": `${label} home`, className: "hz-wordmark", children: (0, jsx_runtime_1.jsx)(shell_1.HanzoWordmark, { label: label, size: 22 }) }), (0, jsx_runtime_1.jsx)("button", { type: "button", className: "hz-company", "aria-label": "Company", "aria-expanded": open === nav_1.COMPANY.id, "aria-controls": `menu-${nav_1.COMPANY.id}`, onClick: press(nav_1.COMPANY.id), onKeyDown: step(nav_1.COMPANY.id), children: (0, jsx_runtime_1.jsx)(Chevron, {}) })] })), (0, jsx_runtime_1.jsx)("nav", { className: "hz-nav", "aria-label": "Main", children: nav_1.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)("div", { className: "hz-veil", "aria-hidden": "true", onClick: close }) : null, (0, jsx_runtime_1.jsx)("button", { type: "button", className: "hz-find", "aria-label": "Search Hanzo or ask AI", onClick: find, children: (0, jsx_runtime_1.jsx)(shell_1.MARKS.search, { size: 16 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "hz-end", children: [person ? ((0, jsx_runtime_1.jsx)(shell_1.HanzoIdentity, { auth: { user: person, onSignOut, items: [{ id: 'account', label: nav_1.ACCOUNT.label, href: (0, nav_1.at)(nav_1.ACCOUNT.href, origin) }] } })) : ((0, jsx_runtime_1.jsxs)("div", { className: "hz-menu hz-login", onPointerEnter: rest('login'), onPointerLeave: leave, onBlur: blur, children: [(0, jsx_runtime_1.jsxs)("button", { type: "button", className: "hz-trigger", "aria-expanded": open === 'login', "aria-controls": "menu-login", onClick: press('login'), onKeyDown: step('login'), children: ["Log in", (0, jsx_runtime_1.jsx)(Chevron, {})] }), open === 'login' ? ((0, jsx_runtime_1.jsx)("div", { id: "menu-login", className: "hz-card", role: "group", "aria-label": "Log in", children: nav_1.LOGIN.map((link) => ((0, jsx_runtime_1.jsxs)("a", { href: (0, nav_1.at)(link.href, origin), target: "_blank", rel: "noreferrer", onClick: close, children: [(0, jsx_runtime_1.jsx)("span", { children: link.label }), (0, jsx_runtime_1.jsx)("small", { children: link.hint })] }, link.label))) })) : null] })), (0, jsx_runtime_1.jsx)(Row, { link: person ? nav_1.OPEN : nav_1.TRY, origin: origin, className: "hz-try" }), (0, jsx_runtime_1.jsx)("button", { ref: toggle, type: "button", className: "hz-toggle", "aria-label": sheet ? 'Close menu' : 'Open menu', "aria-expanded": sheet, "aria-controls": "sheet", onClick: () => {
+                                    close();
+                                    setSheet((s) => !s);
+                                }, 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' }) }) })] })] }), sheet ? (0, jsx_runtime_1.jsx)(Sheet, { signedIn: Boolean(person), origin: origin, onClose: () => setSheet(false) }) : null, (0, jsx_runtime_1.jsx)(shell_1.HanzoCommandPalette, { commands: commands, open: search, onOpenChange: setSearch, onAsk: onAsk })] }));
+}
+/**
+ * The phone's menu: the whole tree, one section open at a time, then the two
+ * doors. A `<details>` per section, so it opens with no script and a tap never
+ * waits on one.
+ */
+function Sheet({ signedIn, origin, onClose }) {
+    const first = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => first.current?.focus(), []);
+    return ((0, jsx_runtime_1.jsxs)("div", { id: "sheet", className: "hz-sheet", role: "dialog", "aria-modal": "true", "aria-label": "Menu", children: [(0, jsx_runtime_1.jsx)("nav", { "aria-label": "Main", children: [nav_1.COMPANY, ...nav_1.MENUS].map((item, i) => ((0, jsx_runtime_1.jsxs)("details", { name: "sheet", children: [(0, jsx_runtime_1.jsxs)("summary", { ref: i === 0 ? first : undefined, children: [(0, jsx_runtime_1.jsx)(Mark, { name: item.glyph }), item.label, (0, jsx_runtime_1.jsx)(Chevron, {})] }), item.groups.map((group) => ((0, jsx_runtime_1.jsxs)("div", { className: "hz-column", "data-lead": group.lead ? '' : undefined, children: [(0, jsx_runtime_1.jsx)("p", { className: "hz-column-title", children: group.title }), group.links.map((link) => ((0, jsx_runtime_1.jsx)(Row, { link: link, origin: origin, onClick: onClose }, link.label)))] }, group.title)))] }, item.id))) }), (0, jsx_runtime_1.jsxs)("div", { className: "hz-doors", children: [signedIn ? ((0, jsx_runtime_1.jsx)("a", { href: (0, nav_1.at)(nav_1.ACCOUNT.href, origin), className: "hz-door", children: nav_1.ACCOUNT.label })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("p", { className: "hz-column-title", children: "Log in" }), nav_1.LOGIN.map((link) => ((0, jsx_runtime_1.jsx)(Row, { link: link, origin: origin, className: "hz-door", onClick: onClose }, link.label)))] })), (0, jsx_runtime_1.jsx)(Row, { link: signedIn ? nav_1.OPEN : nav_1.TRY, origin: origin, className: "hz-try", onClick: onClose })] })] }));
+}

package/dist/masthead/Masthead.d.ts

@@ -0,0 +1,54 @@
+import { type GlyphName, type HanzoCommandEntry } from '@hanzogui/shell';
+import { type Link } from './nav.js';
+/**
+ * hanzo.ai's header: 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.
+ *
+ * Styled by `@hanzo/ui/masthead.css`, which the host imports once.
+ */
+/** Who is signed in, as the account menu draws them. */
+export interface Person {
+    name: string;
+    email?: string;
+    avatar?: string;
+}
+export interface MastheadProps {
+    /** The name in the corner: `Hanzo AI` on hanzo.ai, `Hanzo Blog` on the blog. */
+    label?: string;
+    /** Where the name goes. */
+    home?: string;
+    /**
+     * The host the tree's paths are pages on. Empty on hanzo.ai itself; any other
+     * site passes `https://hanzo.ai`, and a row keeps its look while it goes there.
+     */
+    origin?: string;
+    /** The signed-in reader. Absent, the bar offers Log in ▾ and Try Hanzo. */
+    person?: Person | null;
+    onSignOut?: () => void;
+    /** What ⌘K finds. */
+    commands?: HanzoCommandEntry[];
+    /** A question typed into ⌘K. */
+    onAsk?: (question: string) => void;
+}
+export declare function Mark({ name }: {
+    name: GlyphName;
+}): import("react").JSX.Element;
+export declare function Chevron(): import("react").JSX.Element;
+/** ↗ — the shell's outbound arrow, riding the label's size and ink. */
+export declare function Out(): import("react").JSX.Element;
+/**
+ * A row: the label, and ↗ with a new tab when it leaves hanzo.ai. Whether it
+ * leaves is read from the tree, so a row looks the same on every host.
+ */
+export declare function Row({ link, origin, className, onClick }: {
+    link: Link;
+    origin?: string;
+    className?: string;
+    onClick?: () => void;
+}): import("react").JSX.Element;
+export declare function Masthead({ label, home, origin, person, onSignOut, commands, onAsk }: 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":"AAGA,OAAO,EAA4D,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAClI,OAAO,EAAuD,KAAK,IAAI,EAAa,MAAM,OAAO,CAAA;AAEjG;;;;;;;;;GASG;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,MAAM,WAAW,aAAa;IAC5B,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,2EAA2E;IAC3E,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,iBAAiB,EAAE,CAAA;IAC9B,gCAAgC;IAChC,KAAK,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC;AAOD,wBAAgB,IAAI,CAAC,EAAE,IAAI,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,+BAOjD;AAED,wBAAgB,OAAO,gCAMtB;AAED,uEAAuE;AACvE,wBAAgB,GAAG,gCAMlB;AAED;;;GAGG;AACH,wBAAgB,GAAG,CAAC,EAAE,IAAI,EAAE,MAAW,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,IAAI,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAcvI;AAkBD,wBAAgB,QAAQ,CAAC,EAAE,KAAkB,EAAE,IAAU,EAAE,MAAW,EAAE,MAAM,EAAE,SAAS,EAAE,QAAa,EAAE,KAAK,EAAE,EAAE,aAAa,+BAuN/H"}

package/dist/masthead/Masthead.js

@@ -0,0 +1,162 @@
+'use client';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
+import { HanzoCommandPalette, HanzoIdentity, HanzoWordmark, MARKS } from '@hanzogui/shell';
+import { ACCOUNT, COMPANY, LOGIN, MENUS, OPEN, TRY, at, away } from './nav.js';
+/** 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;
+export function Mark({ name }) {
+    const Glyph = MARKS[name];
+    return (_jsx("span", { className: "hz-mark", "aria-hidden": "true", children: _jsx(Glyph, { size: 16 }) }));
+}
+export function Chevron() {
+    return (_jsx("svg", { className: "hz-chevron", width: 12, height: 12, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M6 9l6 6 6-6" }) }));
+}
+/** ↗ — the shell's outbound arrow, riding the label's size and ink. */
+export function Out() {
+    return (_jsx("svg", { className: "hz-out", width: "0.75em", height: "0.75em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: _jsx("path", { d: "M7 17 17 7M9 7h8v8" }) }));
+}
+/**
+ * A row: the label, and ↗ with a new tab when it leaves hanzo.ai. Whether it
+ * leaves is read from the tree, so a row looks the same on every host.
+ */
+export function Row({ link, origin = '', className, onClick }) {
+    const out = away(link.href);
+    return (_jsxs("a", { href: at(link.href, origin), className: className, target: out ? '_blank' : undefined, rel: out ? 'noreferrer' : undefined, onClick: onClick, children: [link.label, out ? _jsx(Out, {}) : null] }));
+}
+/** A menu's columns: the lead column in display type, the rest as lists. */
+function Columns({ menu, origin, onPick }) {
+    return (_jsx("div", { className: "hz-columns", children: menu.groups.map((group) => (_jsxs("div", { className: "hz-column", "data-lead": group.lead ? '' : undefined, children: [_jsx("p", { className: "hz-column-title", children: group.title }), group.links.map((link) => (_jsx(Row, { link: link, origin: origin, onClick: onPick }, link.label)))] }, group.title))) }));
+}
+export function Masthead({ label = 'Hanzo AI', home = '/', origin = '', person, onSignOut, commands = [], onAsk }) {
+    const [open, setOpen] = useState(null);
+    const [sheet, setSheet] = useState(false);
+    const [search, setSearch] = useState(false);
+    const [grounded, setGrounded] = useState(false);
+    const timer = useRef(undefined);
+    const pinned = useRef(false);
+    const bar = useRef(null);
+    const toggle = useRef(null);
+    const close = 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.
+    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.
+    useEffect(() => {
+        if (!open && !sheet)
+            return;
+        const key = (e) => {
+            if (e.key !== 'Escape')
+                return;
+            if (open) {
+                bar.current?.querySelector(`[aria-controls="menu-${open}"]`)?.focus();
+                close();
+            }
+            if (sheet) {
+                setSheet(false);
+                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.
+    useEffect(() => {
+        if (!open)
+            return;
+        const outside = (e) => {
+            if (!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.
+    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);
+    };
+    const menu = (item, trigger) => (_jsxs("div", { className: "hz-menu", onPointerEnter: rest(item.id), onPointerLeave: leave, onBlur: blur, children: [trigger, open === item.id ? (_jsx("div", { id: `menu-${item.id}`, className: "hz-plane", role: "group", "aria-label": item.label, children: _jsx(Columns, { menu: item, origin: origin, onPick: close }) })) : null] }));
+    const trigger = (item) => (_jsxs("button", { type: "button", className: "hz-trigger", "aria-expanded": open === item.id, "aria-controls": `menu-${item.id}`, onClick: press(item.id), onKeyDown: step(item.id), children: [_jsx(Mark, { name: item.glyph }), item.label, _jsx(Chevron, {})] }));
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { ref: bar, className: "hz-masthead", "data-grounded": grounded || open || sheet ? '' : undefined, children: [menu(COMPANY, _jsxs("span", { className: "hz-brand", children: [_jsx("a", { href: home, "aria-label": `${label} home`, className: "hz-wordmark", children: _jsx(HanzoWordmark, { label: label, size: 22 }) }), _jsx("button", { type: "button", className: "hz-company", "aria-label": "Company", "aria-expanded": open === COMPANY.id, "aria-controls": `menu-${COMPANY.id}`, onClick: press(COMPANY.id), onKeyDown: step(COMPANY.id), children: _jsx(Chevron, {}) })] })), _jsx("nav", { className: "hz-nav", "aria-label": "Main", children: MENUS.map((item) => (_jsx(Fragment, { children: menu(item, trigger(item)) }, item.id))) }), open && open !== 'login' ? _jsx("div", { className: "hz-veil", "aria-hidden": "true", onClick: close }) : null, _jsx("button", { type: "button", className: "hz-find", "aria-label": "Search Hanzo or ask AI", onClick: find, children: _jsx(MARKS.search, { size: 16 }) }), _jsxs("div", { className: "hz-end", children: [person ? (_jsx(HanzoIdentity, { auth: { user: person, onSignOut, items: [{ id: 'account', label: ACCOUNT.label, href: at(ACCOUNT.href, origin) }] } })) : (_jsxs("div", { className: "hz-menu hz-login", onPointerEnter: rest('login'), onPointerLeave: leave, onBlur: blur, children: [_jsxs("button", { type: "button", className: "hz-trigger", "aria-expanded": open === 'login', "aria-controls": "menu-login", onClick: press('login'), onKeyDown: step('login'), children: ["Log in", _jsx(Chevron, {})] }), open === 'login' ? (_jsx("div", { id: "menu-login", className: "hz-card", role: "group", "aria-label": "Log in", children: LOGIN.map((link) => (_jsxs("a", { href: at(link.href, origin), target: "_blank", rel: "noreferrer", onClick: close, children: [_jsx("span", { children: link.label }), _jsx("small", { children: link.hint })] }, link.label))) })) : null] })), _jsx(Row, { link: person ? OPEN : TRY, origin: origin, className: "hz-try" }), _jsx("button", { ref: toggle, type: "button", className: "hz-toggle", "aria-label": sheet ? 'Close menu' : 'Open menu', "aria-expanded": sheet, "aria-controls": "sheet", onClick: () => {
+                                    close();
+                                    setSheet((s) => !s);
+                                }, children: _jsx("svg", { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: sheet ? 'M6 6l12 12M18 6L6 18' : 'M3 9h18M3 15h18' }) }) })] })] }), sheet ? _jsx(Sheet, { signedIn: Boolean(person), origin: origin, onClose: () => setSheet(false) }) : null, _jsx(HanzoCommandPalette, { commands: commands, open: search, onOpenChange: setSearch, onAsk: onAsk })] }));
+}
+/**
+ * The phone's menu: the whole tree, one section open at a time, then the two
+ * doors. A `<details>` per section, so it opens with no script and a tap never
+ * waits on one.
+ */
+function Sheet({ signedIn, origin, onClose }) {
+    const first = useRef(null);
+    useEffect(() => first.current?.focus(), []);
+    return (_jsxs("div", { id: "sheet", className: "hz-sheet", role: "dialog", "aria-modal": "true", "aria-label": "Menu", children: [_jsx("nav", { "aria-label": "Main", children: [COMPANY, ...MENUS].map((item, i) => (_jsxs("details", { name: "sheet", children: [_jsxs("summary", { ref: i === 0 ? first : undefined, children: [_jsx(Mark, { name: item.glyph }), item.label, _jsx(Chevron, {})] }), item.groups.map((group) => (_jsxs("div", { className: "hz-column", "data-lead": group.lead ? '' : undefined, children: [_jsx("p", { className: "hz-column-title", children: group.title }), group.links.map((link) => (_jsx(Row, { link: link, origin: origin, onClick: onClose }, link.label)))] }, group.title)))] }, item.id))) }), _jsxs("div", { className: "hz-doors", children: [signedIn ? (_jsx("a", { href: at(ACCOUNT.href, origin), className: "hz-door", children: ACCOUNT.label })) : (_jsxs(_Fragment, { children: [_jsx("p", { className: "hz-column-title", children: "Log in" }), LOGIN.map((link) => (_jsx(Row, { link: link, origin: origin, className: "hz-door", onClick: onClose }, link.label)))] })), _jsx(Row, { link: signedIn ? OPEN : TRY, origin: origin, className: "hz-try", onClick: onClose })] })] }));
+}
+//# sourceMappingURL=Masthead.js.map

package/dist/masthead/Masthead.js.map

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

package/dist/masthead/index.cjs

@@ -0,0 +1,31 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Row = exports.Out = exports.Masthead = exports.Mark = exports.Chevron = void 0;
+/**
+ * hanzo.ai's header, for every Hanzo site that wears it: `Masthead` draws the
+ * nav tree in `./nav`, and `@hanzo/ui/masthead.css` styles it.
+ *
+ * A server component that needs only the tree imports `@hanzo/ui/masthead/nav`,
+ * which is data.
+ */
+var Masthead_1 = require("./Masthead.cjs");
+Object.defineProperty(exports, "Chevron", { enumerable: true, get: function () { return Masthead_1.Chevron; } });
+Object.defineProperty(exports, "Mark", { enumerable: true, get: function () { return Masthead_1.Mark; } });
+Object.defineProperty(exports, "Masthead", { enumerable: true, get: function () { return Masthead_1.Masthead; } });
+Object.defineProperty(exports, "Out", { enumerable: true, get: function () { return Masthead_1.Out; } });
+Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return Masthead_1.Row; } });
+__exportStar(require("./nav.cjs"), exports);

package/dist/masthead/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * hanzo.ai's header, for every Hanzo site that wears it: `Masthead` draws the
+ * nav tree in `./nav`, and `@hanzo/ui/masthead.css` styles it.
+ *
+ * A server component that needs only the tree imports `@hanzo/ui/masthead/nav`,
+ * which is data.
+ */
+export { Chevron, Mark, Masthead, Out, Row, type MastheadProps, type Person } from './Masthead.js';
+export * from './nav.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/masthead/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,aAAa,EAAE,KAAK,MAAM,EAAE,MAAM,YAAY,CAAA;AAC/F,cAAc,OAAO,CAAA"}

package/dist/masthead/index.js

@@ -0,0 +1,10 @@
+/**
+ * hanzo.ai's header, for every Hanzo site that wears it: `Masthead` draws the
+ * nav tree in `./nav`, and `@hanzo/ui/masthead.css` styles it.
+ *
+ * A server component that needs only the tree imports `@hanzo/ui/masthead/nav`,
+ * which is data.
+ */
+export { Chevron, Mark, Masthead, Out, Row } from './Masthead.js';
+export * from './nav.js';
+//# sourceMappingURL=index.js.map

package/dist/masthead/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/masthead/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAmC,MAAM,YAAY,CAAA;AAC/F,cAAc,OAAO,CAAA"}