@hanzo/ui 8.29.44 → 8.30.3

package/dist/masthead/Masthead.cjs

@@ -7,6 +7,7 @@ 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 react_2 = require("@hanzo/i18n/react");
 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;
@@ -59,9 +60,25 @@ const BAR = {
     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, marginInlineStart: -4, rounded: 999, hoverStyle: { bg: WASH, boxShadow: RING } };
+const BRAND = {
+    items: 'center',
+    shrink: 0,
+    height: 34,
+    marginInlineStart: -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' };
+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',
@@ -77,7 +94,15 @@ const PILL = {
     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' };
+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',
@@ -96,7 +121,10 @@ const ACT = {
     hoverStyle: { opacity: 0.88 },
 };
 /** What hangs from the bar arrives: up 4px, faded in. */
-const ARRIVE = { enterStyle: { opacity: 0, y: -4 }, transition: 'quickest' };
+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
@@ -114,8 +142,23 @@ const ROW = {
     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)' };
+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',
@@ -129,7 +172,16 @@ const LINE = {
     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)' };
+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];
@@ -146,7 +198,8 @@ function Out() {
 /** 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] }));
+    const { t } = (0, react_2.useI18n)();
+    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: [t(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 }) {
@@ -159,7 +212,8 @@ function Title({ sheet = false, children }) {
  */
 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))) }));
+    const { t } = (0, react_2.useI18n)();
+    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: t(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);
@@ -176,20 +230,21 @@ function measure(el) {
     };
 }
 /** The bar's rows as ⌘K entries: what a reader can reach from here, they can find. */
-function entries(company, menus, login, place) {
+function entries(company, menus, login, place, t) {
     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,
+        title: t(link.label),
         href: (0, nav_1.at)(link.href, place.origin, place.here),
-        group: menu.label,
+        group: t(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, }) {
+function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '', tree = {}, person, onSignOut, commands = [], onAsk, askHref, bare = false }) {
+    const { t } = (0, react_2.useI18n)();
     const company = tree.company ?? nav_1.COMPANY;
     const menus = tree.menus ?? nav_1.MENUS;
     const login = tree.login ?? nav_1.LOGIN;
@@ -215,6 +270,35 @@ function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '', tree
         pinned.current = false;
         setOpen(null);
     }, []);
+    // The oversized footer signature is another doorway to the SAME Company menu.
+    // The DOM event is cancellable: Footer only intercepts its home link if this
+    // masthead is mounted and handles the request. Mobile opens the regular sheet.
+    (0, react_1.useEffect)(() => {
+        if (bare)
+            return;
+        const fromFooter = (event) => {
+            event.preventDefault();
+            clearTimeout(timer.current);
+            if (window.matchMedia('(min-width: 1024px)').matches) {
+                setSheet(false);
+                if (open === company.id && pinned.current) {
+                    close();
+                }
+                else {
+                    pinned.current = true;
+                    setOpen(company.id);
+                    // Present the real Company links to keyboard users, not a duplicate menu.
+                    requestAnimationFrame(() => document.querySelector(`#menu-${company.id} a`)?.focus());
+                }
+            }
+            else {
+                close();
+                setSheet(true);
+            }
+        };
+        window.addEventListener(nav_1.COMPANY_MENU_EVENT, fromFooter);
+        return () => window.removeEventListener(nav_1.COMPANY_MENU_EVENT, fromFooter);
+    }, [bare, company.id, open, close]);
     // The bar is clear over the top of the page and takes the glass once the page
     // moves under it.
     (0, react_1.useEffect)(() => {
@@ -315,24 +399,24 @@ function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '', tree
     };
     /** 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 })] }));
+    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": t(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 }), t(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"));
+        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": t('{name} home', { name: label }), ...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: { paddingInlineEnd: 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, paddingInlineEnd: 6, borderWidth: 0, borderStartEndRadius: 999, borderEndEndRadius: 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, marginInlineStart: "auto", $lg: { width: 34, height: 34, marginInlineStart: 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: { marginInlineStart: '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)", insetInlineEnd: 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: () => {
+                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": t('{name} home', { name: label }), ...NAME, $lg: { paddingInlineEnd: 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": t(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, paddingInlineEnd: 6, borderWidth: 0, borderStartEndRadius: 999, borderEndEndRadius: 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": t('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": t('Search Hanzo or ask AI'), onClick: find, ...PILL, justify: "center", width: 44, height: 44, marginInlineStart: "auto", $lg: { width: 34, height: 34, marginInlineStart: 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: { marginInlineStart: 'auto' }, children: [person ? ((0, jsx_runtime_1.jsx)(shell_1.HanzoIdentity, { auth: { user: person, onSignOut, items: [{ id: 'account', label: t(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: [t('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": t('Log in'), position: "absolute", t: "calc(100% + 8px)", insetInlineEnd: 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: [t(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 ? t(link.hint) : null })] }, 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 ? t('Close menu') : t('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, marginInlineEnd: -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 }) })] }));
+                                }, display: "grid", $lg: { display: 'none' }, placeItems: "center", width: 44, height: 44, p: 0, marginInlineEnd: -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, t).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
@@ -341,11 +425,15 @@ function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '', tree
  * and carries the bottom inset, as the bar carries the top one.
  */
 function Sheet({ company, menus, login, door, act, place, onClose, }) {
+    const { t } = (0, react_2.useI18n)();
     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) => {
+    return ((0, jsx_runtime_1.jsxs)(gui_1.View, { id: "sheet", role: "dialog", "aria-modal": true, "aria-label": t('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": t('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" })] })] }));
+                        } }), 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 }), t(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: t(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: t('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

@@ -71,5 +71,5 @@ export interface MastheadProps {
 }
 /** 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;
+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

@@ -1 +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"}
+{"version":3,"file":"Masthead.d.ts","sourceRoot":"","sources":["../../src/masthead/Masthead.tsx"],"names":[],"mappings":"AAIA,OAAO,EAA4E,KAAK,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AAGlI,OAAO,EAAmF,KAAK,IAAI,EAAE,KAAK,IAAI,EAAE,MAAM,OAAO,CAAA;AAE7H;;;;;;;;;;;;;;;;;;;;;;;;;;;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;AAsTxB,wBAAgB,QAAQ,CAAC,EAAE,KAAkB,EAAE,IAAU,EAAE,MAAW,EAAE,IAAS,EAAE,IAAS,EAAE,MAAM,EAAE,SAAS,EAAE,QAAa,EAAE,KAAK,EAAE,OAAO,EAAE,IAAY,EAAE,EAAE,aAAa,+BAuY5K"}

package/dist/masthead/Masthead.js

@@ -3,7 +3,8 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { Anchor, Text, View, XStack, YStack } from '@hanzo/gui';
 import { HanzoCommandPalette, HanzoIdentity, HanzoWordmark, MARKS } from '@hanzogui/shell';
-import { ACCOUNT, COMPANY, DOCS, LOGIN, MENUS, OPEN, TRY, at, leaves } from './nav.js';
+import { useI18n } from '@hanzo/i18n/react';
+import { ACCOUNT, at, COMPANY, COMPANY_MENU_EVENT, DOCS, leaves, LOGIN, MENUS, OPEN, TRY } 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. */
@@ -55,9 +56,25 @@ const BAR = {
     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, marginInlineStart: -4, rounded: 999, hoverStyle: { bg: WASH, boxShadow: RING } };
+const BRAND = {
+    items: 'center',
+    shrink: 0,
+    height: 34,
+    marginInlineStart: -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' };
+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',
@@ -73,7 +90,15 @@ const PILL = {
     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' };
+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',
@@ -92,7 +117,10 @@ const ACT = {
     hoverStyle: { opacity: 0.88 },
 };
 /** What hangs from the bar arrives: up 4px, faded in. */
-const ARRIVE = { enterStyle: { opacity: 0, y: -4 }, transition: 'quickest' };
+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
@@ -110,8 +138,23 @@ const ROW = {
     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)' };
+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',
@@ -125,7 +168,16 @@ const LINE = {
     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)' };
+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 = MARKS[name];
@@ -142,7 +194,8 @@ function Out() {
 /** A row: the label, and ↗ with a new tab when it leaves. */
 function Row({ link, place, onClick, ...style }) {
     const out = leaves(link.href, place.here);
-    return (_jsxs(Anchor, { href: at(link.href, place.origin, place.here), target: out ? '_blank' : undefined, rel: out ? 'noreferrer' : undefined, onClick: onClick, textDecorationLine: "none", ...style, children: [link.label, out ? _jsx(Out, {}) : null] }));
+    const { t } = useI18n();
+    return (_jsxs(Anchor, { href: at(link.href, place.origin, place.here), target: out ? '_blank' : undefined, rel: out ? 'noreferrer' : undefined, onClick: onClick, textDecorationLine: "none", ...style, children: [t(link.label), out ? _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 }) {
@@ -155,7 +208,8 @@ function Title({ sheet = false, children }) {
  */
 function Columns({ menu, place, onPick }) {
     const [hot, setHot] = useState(null);
-    return (_jsx(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) => (_jsxs(YStack, { gap: 2, minW: 0, opacity: hot === null || hot === i ? 1 : 0.45, transition: "quickest", onPointerEnter: () => setHot(i), onPointerLeave: () => setHot(null), children: [_jsx(Title, { children: group.title }), group.links.map((link) => (_jsx(Row, { link: link, place: place, onClick: onPick, ...(group.lead ? LEAD : PLAIN) }, link.label)))] }, group.title))) }));
+    const { t } = useI18n();
+    return (_jsx(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) => (_jsxs(YStack, { gap: 2, minW: 0, opacity: hot === null || hot === i ? 1 : 0.45, transition: "quickest", onPointerEnter: () => setHot(i), onPointerLeave: () => setHot(null), children: [_jsx(Title, { children: t(group.title) }), group.links.map((link) => (_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);
@@ -172,20 +226,21 @@ function measure(el) {
     };
 }
 /** The bar's rows as ⌘K entries: what a reader can reach from here, they can find. */
-function entries(company, menus, login, place) {
+function entries(company, menus, login, place, t) {
     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(`${DOCS}/`))
         .map(({ menu, link }) => ({
         id: `nav/${menu.id}/${link.label}`,
-        title: link.label,
+        title: t(link.label),
         href: at(link.href, place.origin, place.here),
-        group: menu.label,
+        group: t(menu.label),
         external: leaves(link.href, place.here),
     }));
 }
-export function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '', tree = {}, person, onSignOut, commands = [], onAsk, askHref, bare = false, }) {
+export function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '', tree = {}, person, onSignOut, commands = [], onAsk, askHref, bare = false }) {
+    const { t } = useI18n();
     const company = tree.company ?? COMPANY;
     const menus = tree.menus ?? MENUS;
     const login = tree.login ?? LOGIN;
@@ -211,6 +266,35 @@ export function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '
         pinned.current = false;
         setOpen(null);
     }, []);
+    // The oversized footer signature is another doorway to the SAME Company menu.
+    // The DOM event is cancellable: Footer only intercepts its home link if this
+    // masthead is mounted and handles the request. Mobile opens the regular sheet.
+    useEffect(() => {
+        if (bare)
+            return;
+        const fromFooter = (event) => {
+            event.preventDefault();
+            clearTimeout(timer.current);
+            if (window.matchMedia('(min-width: 1024px)').matches) {
+                setSheet(false);
+                if (open === company.id && pinned.current) {
+                    close();
+                }
+                else {
+                    pinned.current = true;
+                    setOpen(company.id);
+                    // Present the real Company links to keyboard users, not a duplicate menu.
+                    requestAnimationFrame(() => document.querySelector(`#menu-${company.id} a`)?.focus());
+                }
+            }
+            else {
+                close();
+                setSheet(true);
+            }
+        };
+        window.addEventListener(COMPANY_MENU_EVENT, fromFooter);
+        return () => window.removeEventListener(COMPANY_MENU_EVENT, fromFooter);
+    }, [bare, company.id, open, close]);
     // The bar is clear over the top of the page and takes the glass once the page
     // moves under it.
     useEffect(() => {
@@ -311,24 +395,24 @@ export function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '
     };
     /** What a pill wears while its menu is open. */
     const lit = (id) => (open === id ? LIT : {});
-    const menu = (item, trigger) => (_jsxs(XStack, { position: "relative", onPointerEnter: rest(item.id), onPointerLeave: leave, onBlur: blur, children: [trigger, open === item.id ? (_jsx(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 - ${HEADER}px)`, overflowY: "auto", bg: PANEL, boxShadow: DROP, ...ARRIVE, children: _jsx(Columns, { menu: item, place: place, onPick: close }) })) : null] }));
-    const trigger = (item) => (_jsxs(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: [_jsx(Mark, { name: item.glyph, bar: true }), item.label, _jsx(Chevron, { turned: open === item.id })] }));
+    const menu = (item, trigger) => (_jsxs(XStack, { position: "relative", onPointerEnter: rest(item.id), onPointerLeave: leave, onBlur: blur, children: [trigger, open === item.id ? (_jsx(YStack, { id: `menu-${item.id}`, role: "group", "aria-label": t(item.label), position: "fixed", t: UNDER, l: 0, r: 0, z: "var(--z-raised)", maxH: `calc(100dvh - ${HEADER}px)`, overflowY: "auto", bg: PANEL, boxShadow: DROP, ...ARRIVE, children: _jsx(Columns, { menu: item, place: place, onPick: close }) })) : null] }));
+    const trigger = (item) => (_jsxs(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: [_jsx(Mark, { name: item.glyph, bar: true }), t(item.label), _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 (_jsx(XStack, { ref: masthead, render: "header", "data-slot": "masthead", ...BAR, children: _jsx(XStack, { render: "span", ...BRAND, children: _jsx(Anchor, { href: homeHref, "aria-label": `${label} home`, ...NAME, children: _jsx(HanzoWordmark, { label: label, size: 22 }) }) }) }, "bare"));
+        return (_jsx(XStack, { ref: masthead, render: "header", "data-slot": "masthead", ...BAR, children: _jsx(XStack, { render: "span", ...BRAND, children: _jsx(Anchor, { href: homeHref, "aria-label": t('{name} home', { name: label }), ...NAME, children: _jsx(HanzoWordmark, { label: label, size: 22 }) }) }) }, "bare"));
     }
     const lifted = open !== null || sheet;
     return (_jsxs(_Fragment, { children: [_jsxs(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, _jsxs(XStack, { render: "span", ...BRAND, ...(open === company.id ? { bg: WASH, boxShadow: RING } : {}), children: [_jsx(Anchor, { href: homeHref, "aria-label": `${label} home`, ...NAME, $lg: { paddingInlineEnd: 0 }, children: _jsx(HanzoWordmark, { label: label, size: 22 }) }), _jsx(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, paddingInlineEnd: 6, borderWidth: 0, borderStartEndRadius: 999, borderEndEndRadius: 999, bg: "transparent", color: "var(--foreground)", cursor: "pointer", children: _jsx(Chevron, { turned: open === company.id }) })] })), _jsx(XStack, { render: "nav", "aria-label": "Main", display: "none", $lg: { display: 'flex' }, items: "center", gap: 2, children: menus.map((item) => (_jsx(Fragment, { children: menu(item, trigger(item)) }, item.id))) }), open && open !== 'login' ? (_jsx(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, _jsx(Text, { render: "button", "aria-label": "Search Hanzo or ask AI", onClick: find, ...PILL, justify: "center", width: 44, height: 44, marginInlineStart: "auto", $lg: { width: 34, height: 34, marginInlineStart: 0 }, children: _jsx(MARKS.search, { size: 16 }) }), _jsxs(XStack, { items: "center", gap: 8, $lg: { marginInlineStart: 'auto' }, children: [person ? (_jsx(HanzoIdentity, { auth: { user: person, onSignOut, items: [{ id: 'account', label: account.label, href: at(account.href, origin, here) }] } })) : (_jsxs(XStack, { position: "relative", display: "none", $lg: { display: 'flex' }, onPointerEnter: rest('login'), onPointerLeave: leave, onBlur: blur, children: [_jsxs(Text, { render: "button", ...TRIGGER, ...lit('login'), "aria-expanded": open === 'login', "aria-controls": "menu-login", onClick: press('login'), onKeyDown: step('login'), children: ["Log in", _jsx(Chevron, { turned: open === 'login' })] }), open === 'login' ? (_jsx(YStack, { id: "menu-login", role: "group", "aria-label": "Log in", position: "absolute", t: "calc(100% + 8px)", insetInlineEnd: 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) => (_jsxs(Anchor, { href: 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, _jsx(Text, { render: "small", fontSize: "$1", lineHeight: 20, fontWeight: "400", color: "var(--muted-foreground)", children: link.hint })] }, link.label))) })) : null] })), _jsx(Row, { link: act, place: place, ...ACT, display: "none", $lg: { display: 'flex' } }), _jsx(Text, { ref: toggle, render: "button", "aria-label": sheet ? 'Close menu' : 'Open menu', "aria-expanded": sheet, "aria-controls": "sheet", onClick: () => {
+                style: INK, children: [menu(company, _jsxs(XStack, { render: "span", ...BRAND, ...(open === company.id ? { bg: WASH, boxShadow: RING } : {}), children: [_jsx(Anchor, { href: homeHref, "aria-label": t('{name} home', { name: label }), ...NAME, $lg: { paddingInlineEnd: 0 }, children: _jsx(HanzoWordmark, { label: label, size: 22 }) }), _jsx(Text, { render: "button", "aria-label": t(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, paddingInlineEnd: 6, borderWidth: 0, borderStartEndRadius: 999, borderEndEndRadius: 999, bg: "transparent", color: "var(--foreground)", cursor: "pointer", children: _jsx(Chevron, { turned: open === company.id }) })] })), _jsx(XStack, { render: "nav", "aria-label": t('Main'), display: "none", $lg: { display: 'flex' }, items: "center", gap: 2, children: menus.map((item) => (_jsx(Fragment, { children: menu(item, trigger(item)) }, item.id))) }), open && open !== 'login' ? (_jsx(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, _jsx(Text, { render: "button", "aria-label": t('Search Hanzo or ask AI'), onClick: find, ...PILL, justify: "center", width: 44, height: 44, marginInlineStart: "auto", $lg: { width: 34, height: 34, marginInlineStart: 0 }, children: _jsx(MARKS.search, { size: 16 }) }), _jsxs(XStack, { items: "center", gap: 8, $lg: { marginInlineStart: 'auto' }, children: [person ? (_jsx(HanzoIdentity, { auth: { user: person, onSignOut, items: [{ id: 'account', label: t(account.label), href: at(account.href, origin, here) }] } })) : (_jsxs(XStack, { position: "relative", display: "none", $lg: { display: 'flex' }, onPointerEnter: rest('login'), onPointerLeave: leave, onBlur: blur, children: [_jsxs(Text, { render: "button", ...TRIGGER, ...lit('login'), "aria-expanded": open === 'login', "aria-controls": "menu-login", onClick: press('login'), onKeyDown: step('login'), children: [t('Log in'), _jsx(Chevron, { turned: open === 'login' })] }), open === 'login' ? (_jsx(YStack, { id: "menu-login", role: "group", "aria-label": t('Log in'), position: "absolute", t: "calc(100% + 8px)", insetInlineEnd: 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) => (_jsxs(Anchor, { href: 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: [t(link.label), _jsx(Text, { render: "small", fontSize: "$1", lineHeight: 20, fontWeight: "400", color: "var(--muted-foreground)", children: link.hint ? t(link.hint) : null })] }, link.label))) })) : null] })), _jsx(Row, { link: act, place: place, ...ACT, display: "none", $lg: { display: 'flex' } }), _jsx(Text, { ref: toggle, render: "button", "aria-label": sheet ? t('Close menu') : t('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, marginInlineEnd: -10, borderWidth: 0, bg: "transparent", color: "var(--foreground)", cursor: "pointer", 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' }) }) })] })] }, "full"), sheet ? (_jsx(Sheet, { company: company, menus: menus, login: login, door: person ? account : null, act: act, place: place, onClose: () => setSheet(false) })) : null, _jsx(View, { position: "fixed", z: TOP, children: _jsx(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 }) })] }));
+                                }, display: "grid", $lg: { display: 'none' }, placeItems: "center", width: 44, height: 44, p: 0, marginInlineEnd: -10, borderWidth: 0, bg: "transparent", color: "var(--foreground)", cursor: "pointer", 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' }) }) })] })] }, "full"), sheet ? _jsx(Sheet, { company: company, menus: menus, login: login, door: person ? account : null, act: act, place: place, onClose: () => setSheet(false) }) : null, _jsx(View, { position: "fixed", z: TOP, children: _jsx(HanzoCommandPalette, { commands: [...commands, ...entries(company, menus, login, place, t).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
@@ -337,12 +421,16 @@ export function Masthead({ label = 'Hanzo AI', home = '/', origin = '', here = '
  * and carries the bottom inset, as the bar carries the top one.
  */
 function Sheet({ company, menus, login, door, act, place, onClose, }) {
+    const { t } = useI18n();
     const first = useRef(null);
     const [section, setSection] = useState(null);
     useEffect(() => node(first.current)?.focus(), []);
-    return (_jsxs(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: [_jsx(View, { render: "nav", "aria-label": "Main", display: "block", children: [company, ...menus].map((item, i) => (_jsxs(View, { render: _jsx("details", { name: "sheet", onToggle: (e) => {
+    return (_jsxs(View, { id: "sheet", role: "dialog", "aria-modal": true, "aria-label": t('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: [_jsx(View, { render: "nav", "aria-label": t('Main'), display: "block", children: [company, ...menus].map((item, i) => (_jsxs(View, { render: _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: [_jsxs(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: [_jsx(Mark, { name: item.glyph }), item.label, _jsx(Chevron, { turned: section === item.id, end: true })] }), item.groups.map((group) => (_jsxs(YStack, { gap: 2, minW: 0, pb: 16, children: [_jsx(Title, { sheet: true, children: group.title }), group.links.map((link) => (_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))) }), _jsxs(View, { display: "grid", gap: 4, pt: 20, children: [door ? (_jsx(Row, { link: door, place: place, onClick: onClose, ...DOOR })) : (_jsxs(_Fragment, { children: [_jsx(Title, { sheet: true, children: "Log in" }), login.map((link) => (_jsx(Row, { link: link, place: place, onClick: onClose, ...DOOR }, link.label)))] })), _jsx(Row, { link: act, place: place, onClick: onClose, ...ACT, height: 48, mt: 12, fontSize: "$3" })] })] }));
+                        } }), display: "block", borderBottomWidth: 1, borderColor: "var(--border)", children: [_jsxs(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: [_jsx(Mark, { name: item.glyph }), t(item.label), _jsx(Chevron, { turned: section === item.id, end: true })] }), item.groups.map((group) => (_jsxs(YStack, { gap: 2, minW: 0, pb: 16, children: [_jsx(Title, { sheet: true, children: t(group.title) }), group.links.map((link) => (_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))) }), _jsxs(View, { display: "grid", gap: 4, pt: 20, children: [door ? (_jsx(Row, { link: door, place: place, onClick: onClose, ...DOOR })) : (_jsxs(_Fragment, { children: [_jsx(Title, { sheet: true, children: t('Log in') }), login.map((link) => (_jsx(Row, { link: link, place: place, onClick: onClose, ...DOOR }, link.label)))] })), _jsx(Row, { link: act, place: place, onClick: onClose, ...ACT, height: 48, mt: 12, fontSize: "$3" })] })] }));
 }
 //# sourceMappingURL=Masthead.js.map