@hanzo/ui 8.29.44 → 8.30.3

package/dist/marketing/Footer.cjs

@@ -2,42 +2,77 @@
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Footer = void 0;
+exports.HanzoFooterSignature = HanzoFooterSignature;
 const jsx_runtime_1 = require("react/jsx-runtime");
-/**
- * Footer — the foot of a marketing page: a place to ask, the doors, the legal line.
- *
- * It shares the header's edges: the same side gutter, so the wordmark and the
- * columns stand under the header's wordmark and nav with nothing between them
- * to shift. `gutter` is that one number; a site passes the value its header uses.
- *
- *   ask       a slot above the columns for the site's composer, so it lives
- *             where a page ends and never floats over one.
- *   columns   titled lists of links; a title may itself be a link.
- *   wordmark  a slot at the far end of the last row; the copyright and the
- *             legal line share that row's start.
- *   after     a slot under that row, inside the footer, for the site's own
- *             last line (its social links).
- *
- * It stands on the panel's ground ($panel), a step off the page's, so the page
- * visibly ends where the footer begins.
- *
- * Plain anchors. A link that leaves the site opens a new tab and is marked with
- * ↗ by the host's own data (`out`).
- */
+const react_1 = require("react");
 const gui_1 = require("@hanzo/gui");
+const logo_1 = require("@hanzo/logo");
+const react_2 = require("@hanzo/i18n/react");
 const slot_1 = require("../backends/gui/slot.cjs");
-const type_1 = require("./type.cjs");
 const icon_1 = require("../consent/icon.cjs");
-const open = (out) => (out ? { target: '_blank', rel: 'noreferrer' } : {});
+const type_1 = require("./type.cjs");
+const nav_1 = require("../masthead/nav.cjs");
 /**
- * A legal link's box. @hanzo/design gives every link a 24px floor, taller than
- * the line, and a plain block anchor sets its words at the top of it, 3px above
- * the box's middle; the copyright beside them, and the consent sheet's link
- * (`#choices`, its words beside California's privacy options icon), sat on the
- * middle. Every link centres its words in the floor, so the row shares one
- * centre line.
+ * The enormous closing signature. "hanzo" is real, selectable Zen typography,
+ * NOT a raster or outlined wordmark. Its punctuation is the canonical seven-path
+ * H from @hanzo/logo, held in the same baseline-relative flex lockup.
+ *
+ * This is opt-in: the marketing Footer is also used by non-Hanzo brands.
  */
+function HanzoFooterSignature() {
+    const [highlight, setHighlight] = (0, react_1.useState)(false);
+    const openCompanyMenu = (e) => {
+        // Modifier-click retains the usual home link behavior.
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+            return;
+        // Masthead cancels the event when it opens the real Company menu.
+        // On a page with no Masthead, the link still goes to hanzo.ai.
+        if (!window.dispatchEvent(new Event(nav_1.COMPANY_MENU_EVENT, { cancelable: true }))) {
+            e.preventDefault();
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("a", { href: "https://hanzo.ai", "aria-label": "Open Hanzo company menu", onClick: openCompanyMenu, onPointerEnter: () => setHighlight(true), onPointerLeave: () => setHighlight(false), onFocus: () => setHighlight(true), onBlur: () => setHighlight(false), style: {
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'flex-start',
+            gap: 'clamp(4px, 0.5vw, 10px)',
+            width: 'max-content',
+            maxWidth: '100%',
+            // Glyphs must stay visible: the site may position this lockup at the
+            // bottom edge of a long footer and clipped ascenders look like a bar.
+            overflow: 'visible',
+            textDecoration: 'none',
+            fontFamily: 'var(--font-sans, ui-sans-serif, system-ui, sans-serif)',
+            // Preserve the giant signature without allowing 5 letters + H to
+            // overrun narrow viewports or small split-screen browser windows.
+            fontSize: 'clamp(64px, 23vw, 410px)',
+            fontWeight: 750,
+            letterSpacing: '-0.085em',
+            lineHeight: 1,
+            paddingTop: '0.025em',
+            paddingBottom: '0.04em',
+            color: 'var(--foreground)',
+            opacity: highlight ? 0.35 : 0.18,
+            transition: 'opacity 160ms ease',
+        }, children: [(0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", style: { whiteSpace: 'nowrap', paddingInlineEnd: '0.04em' }, children: "hanzo" }), (0, jsx_runtime_1.jsx)("span", { "aria-hidden": "true", style: {
+                    display: 'block',
+                    flex: '0 0 auto',
+                    width: '0.225em',
+                    height: '0.225em',
+                    marginBottom: '0.14em',
+                    lineHeight: 0,
+                    letterSpacing: 'normal',
+                }, children: (0, jsx_runtime_1.jsxs)("svg", { width: "100%", height: "100%", viewBox: logo_1.MARK_VIEWBOX, fill: "currentColor", focusable: "false", "aria-hidden": "true", style: { display: 'block', width: '100%', height: '100%' }, children: [logo_1.MARK_BLOCKS.map((d) => (0, jsx_runtime_1.jsx)("path", { d: d }, d)), logo_1.MARK_SHADE.map((d) => (0, jsx_runtime_1.jsx)("path", { d: d }, d))] }) })] }));
+}
+const open = (out) => (out ? { target: '_blank', rel: 'noopener noreferrer' } : {});
 const LEGAL = { display: 'inline-flex', alignItems: 'center', gap: 6 };
-const Door = ({ link }) => ((0, jsx_runtime_1.jsxs)(gui_1.Anchor, { href: link.href, ...open(link.out), color: "$soft", fontSize: "$2", lineHeight: "$2", py: 3, textDecorationLine: "none", hoverStyle: { color: '$ink' }, children: [link.label, link.out ? ' ↗' : ''] }));
-const Footer = ({ columns, ask, wordmark, copyright, legal = [], gutter = 'clamp(20px, 4vw, 72px)', after }) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('footer'), render: "footer", width: "100%", bg: "$panel", borderTopWidth: 1, borderColor: "$edge", pt: 48, pb: 32, gap: 40, style: { paddingInline: gutter }, children: [ask ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", items: "center", children: ask })) : null, (0, jsx_runtime_1.jsx)(gui_1.XStack, { flexWrap: "wrap", gap: 28, $sm: { gap: 40 }, children: columns.map((c) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { render: "nav", "aria-label": c.title, flexBasis: "100%", flexGrow: 1, minW: 140, $sm: { flexBasis: 150 }, gap: 2, children: [c.href ? ((0, jsx_runtime_1.jsxs)(gui_1.Anchor, { href: c.href, ...open(c.out), color: "$ink", fontSize: "$2", lineHeight: "$2", fontWeight: "600", pb: 10, textDecorationLine: "none", children: [c.title, c.out ? ' ↗' : ''] })) : ((0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", weight: "600", pb: 10, children: c.title })), (0, jsx_runtime_1.jsx)(gui_1.YStack, { display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", columnGap: 16, $sm: { display: 'flex', flexDirection: 'column' }, children: c.links.map((l) => ((0, jsx_runtime_1.jsx)(Door, { link: l }, l.label))) })] }, c.id))) }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flexWrap: "wrap", items: "center", gap: 20, rowGap: 12, children: [copyright ? ((0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "dim", children: copyright })) : null, (0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "nav", "aria-label": "Terms & Policies", flexWrap: "wrap", gap: 16, rowGap: 8, shrink: 1, minW: 0, children: legal.map((l) => ((0, jsx_runtime_1.jsxs)(gui_1.Anchor, { href: l.href, ...open(l.out), color: "$faint", fontSize: "$2", lineHeight: "$2", textDecorationLine: "none", hoverStyle: { color: '$ink' }, ...LEGAL, children: [l.href.endsWith('#choices') ? (0, jsx_runtime_1.jsx)(icon_1.PrivacyChoicesIcon, {}) : null, l.label] }, l.label))) }), wordmark ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { marginInlineStart: "auto", items: "center", shrink: 1, minW: 0, maxW: "100%", children: wordmark })) : null] }), after] }));
+const Door = ({ link }) => {
+    const { t } = (0, react_2.useI18n)();
+    return ((0, jsx_runtime_1.jsxs)(gui_1.Anchor, { href: link.href, ...open(link.out), color: "$soft", fontSize: "$2", lineHeight: "$2", py: 3, textDecorationLine: "none", hoverStyle: { color: '$ink' }, children: [t(link.label), link.out ? ' ↗' : ''] }));
+};
+const Footer = ({ columns, ask, wordmark, signature, copyright, legal = [], social = [], gutter = 'clamp(20px, 4vw, 72px)', after, }) => {
+    const { t } = (0, react_2.useI18n)();
+    const closing = signature ?? wordmark;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('footer'), render: "footer", width: "100%", bg: "$panel", borderTopWidth: 1, borderColor: "$edge", pt: 48, pb: 16, gap: 28, style: { paddingInline: gutter }, children: [ask ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", items: "center", children: ask }) : null, (0, jsx_runtime_1.jsx)(gui_1.XStack, { display: "grid", width: "100%", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", columnGap: 22, rowGap: 32, $sm: { gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }, $lg: { gridTemplateColumns: 'repeat(6, minmax(0, 1fr))' }, children: columns.map((c) => ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { render: "nav", "aria-label": t(c.title), minW: 0, gap: 2, children: [c.href ? ((0, jsx_runtime_1.jsxs)(gui_1.Anchor, { href: c.href, ...open(c.out), color: "$ink", fontSize: "$2", lineHeight: "$2", fontWeight: "600", pb: 10, textDecorationLine: "none", children: [t(c.title), c.out ? ' ↗' : ''] })) : ((0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", weight: "600", pb: 10, children: t(c.title) })), (0, jsx_runtime_1.jsx)(gui_1.YStack, { children: c.links.map((l) => (0, jsx_runtime_1.jsx)(Door, { link: l }, l.href + l.label)) })] }, c.id))) }), (social.length > 0 || after) ? ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { borderTopWidth: 1, borderColor: "$edge", pt: 18, gap: 8, children: [social.length > 0 ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "nav", "aria-label": t('Social links'), flexWrap: "wrap", gap: 18, rowGap: 6, children: social.map((l) => (0, jsx_runtime_1.jsx)(Door, { link: l }, l.href + l.label)) })) : null, after] })) : null, (0, jsx_runtime_1.jsxs)(gui_1.XStack, { borderTopWidth: 1, borderColor: "$edge", pt: 16, flexWrap: "wrap", items: "center", gap: 16, rowGap: 8, children: [copyright ? (0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "dim", children: copyright }) : null, (0, jsx_runtime_1.jsx)(gui_1.XStack, { render: "nav", "aria-label": t('Terms & Policies'), flexWrap: "wrap", gap: 16, rowGap: 8, shrink: 1, minW: 0, children: legal.map((l) => ((0, jsx_runtime_1.jsxs)(gui_1.Anchor, { href: l.href, ...open(l.out), color: "$faint", fontSize: "$2", lineHeight: "$2", textDecorationLine: "none", hoverStyle: { color: '$ink' }, ...LEGAL, children: [l.href.endsWith('#choices') ? (0, jsx_runtime_1.jsx)(icon_1.PrivacyChoicesIcon, {}) : null, t(l.label)] }, l.href + l.label))) })] }), closing ? (0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", pt: 4, minW: 0, children: closing }) : null] }));
+};
 exports.Footer = Footer;

package/dist/marketing/Footer.d.ts

@@ -1,4 +1,12 @@
-import type { ReactNode } from 'react';
+import { type ReactNode } from 'react';
+/**
+ * The enormous closing signature. "hanzo" is real, selectable Zen typography,
+ * NOT a raster or outlined wordmark. Its punctuation is the canonical seven-path
+ * H from @hanzo/logo, held in the same baseline-relative flex lockup.
+ *
+ * This is opt-in: the marketing Footer is also used by non-Hanzo brands.
+ */
+export declare function HanzoFooterSignature(): import("react").JSX.Element;
 export type FooterLink = {
     label: string;
     href: string;
@@ -14,14 +22,18 @@ export type FooterColumn = {
 export type FooterProps = {
     columns: readonly FooterColumn[];
     ask?: ReactNode;
+    /** Backwards-compatible closing lockup slot; render this AFTER legal/social. */
     wordmark?: ReactNode;
+    /** Explicit closing signature; takes precedence over wordmark when supplied. */
+    signature?: ReactNode;
     copyright?: ReactNode;
     legal?: readonly FooterLink[];
-    /** The side gutter, shared with the header. */
+    /** Social destinations are separate from legal links. Only pass verified URLs. */
+    social?: readonly FooterLink[];
     gutter?: string;
-    /** A last line inside the footer, under the legal row: the site's social links. */
+    /** Legacy custom social content. Rendered above legal and signature. */
     after?: ReactNode;
 };
-declare const Footer: ({ columns, ask, wordmark, copyright, legal, gutter, after }: FooterProps) => import("react").JSX.Element;
+declare const Footer: ({ columns, ask, wordmark, signature, copyright, legal, social, gutter, after, }: FooterProps) => import("react").JSX.Element;
 export { Footer };
 //# sourceMappingURL=Footer.d.ts.map

package/dist/marketing/Footer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/marketing/Footer.tsx"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMtC,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AACvE,MAAM,MAAM,YAAY,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,SAAS,UAAU,EAAE,CAAA;CAAE,CAAA;AAEpH,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC7B,+CAA+C;IAC/C,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AA8BD,QAAA,MAAM,MAAM,gEAAiG,WAAW,gCAoFvH,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}
+{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/marketing/Footer.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAUjE;;;;;;GAMG;AACH,wBAAgB,oBAAoB,gCA4EnC;AAED,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AACvE,MAAM,MAAM,YAAY,GAAG;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,SAAS,UAAU,EAAE,CAAA;CAC7B,CAAA;AAED,MAAM,MAAM,WAAW,GAAG;IACxB,OAAO,EAAE,SAAS,YAAY,EAAE,CAAA;IAChC,GAAG,CAAC,EAAE,SAAS,CAAA;IACf,gFAAgF;IAChF,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,gFAAgF;IAChF,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC7B,kFAAkF;IAClF,MAAM,CAAC,EAAE,SAAS,UAAU,EAAE,CAAA;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,wEAAwE;IACxE,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAwBD,QAAA,MAAM,MAAM,oFAGT,WAAW,gCA0Fb,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,CAAA"}

package/dist/marketing/Footer.js

@@ -1,41 +1,75 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Footer — the foot of a marketing page: a place to ask, the doors, the legal line.
- *
- * It shares the header's edges: the same side gutter, so the wordmark and the
- * columns stand under the header's wordmark and nav with nothing between them
- * to shift. `gutter` is that one number; a site passes the value its header uses.
- *
- *   ask       a slot above the columns for the site's composer, so it lives
- *             where a page ends and never floats over one.
- *   columns   titled lists of links; a title may itself be a link.
- *   wordmark  a slot at the far end of the last row; the copyright and the
- *             legal line share that row's start.
- *   after     a slot under that row, inside the footer, for the site's own
- *             last line (its social links).
- *
- * It stands on the panel's ground ($panel), a step off the page's, so the page
- * visibly ends where the footer begins.
- *
- * Plain anchors. A link that leaves the site opens a new tab and is marked with
- * ↗ by the host's own data (`out`).
- */
+import { useState } from 'react';
 import { Anchor, XStack, YStack } from '@hanzo/gui';
+import { MARK_BLOCKS, MARK_SHADE, MARK_VIEWBOX } from '@hanzo/logo';
+import { useI18n } from '@hanzo/i18n/react';
 import { slot } from '../backends/gui/slot.js';
-import { Line } from './type.js';
 import { PrivacyChoicesIcon } from '../consent/icon.js';
-const open = (out) => (out ? { target: '_blank', rel: 'noreferrer' } : {});
+import { Line } from './type.js';
+import { COMPANY_MENU_EVENT } from '../masthead/nav.js';
 /**
- * A legal link's box. @hanzo/design gives every link a 24px floor, taller than
- * the line, and a plain block anchor sets its words at the top of it, 3px above
- * the box's middle; the copyright beside them, and the consent sheet's link
- * (`#choices`, its words beside California's privacy options icon), sat on the
- * middle. Every link centres its words in the floor, so the row shares one
- * centre line.
+ * The enormous closing signature. "hanzo" is real, selectable Zen typography,
+ * NOT a raster or outlined wordmark. Its punctuation is the canonical seven-path
+ * H from @hanzo/logo, held in the same baseline-relative flex lockup.
+ *
+ * This is opt-in: the marketing Footer is also used by non-Hanzo brands.
  */
+export function HanzoFooterSignature() {
+    const [highlight, setHighlight] = useState(false);
+    const openCompanyMenu = (e) => {
+        // Modifier-click retains the usual home link behavior.
+        if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey)
+            return;
+        // Masthead cancels the event when it opens the real Company menu.
+        // On a page with no Masthead, the link still goes to hanzo.ai.
+        if (!window.dispatchEvent(new Event(COMPANY_MENU_EVENT, { cancelable: true }))) {
+            e.preventDefault();
+        }
+    };
+    return (_jsxs("a", { href: "https://hanzo.ai", "aria-label": "Open Hanzo company menu", onClick: openCompanyMenu, onPointerEnter: () => setHighlight(true), onPointerLeave: () => setHighlight(false), onFocus: () => setHighlight(true), onBlur: () => setHighlight(false), style: {
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'flex-start',
+            gap: 'clamp(4px, 0.5vw, 10px)',
+            width: 'max-content',
+            maxWidth: '100%',
+            // Glyphs must stay visible: the site may position this lockup at the
+            // bottom edge of a long footer and clipped ascenders look like a bar.
+            overflow: 'visible',
+            textDecoration: 'none',
+            fontFamily: 'var(--font-sans, ui-sans-serif, system-ui, sans-serif)',
+            // Preserve the giant signature without allowing 5 letters + H to
+            // overrun narrow viewports or small split-screen browser windows.
+            fontSize: 'clamp(64px, 23vw, 410px)',
+            fontWeight: 750,
+            letterSpacing: '-0.085em',
+            lineHeight: 1,
+            paddingTop: '0.025em',
+            paddingBottom: '0.04em',
+            color: 'var(--foreground)',
+            opacity: highlight ? 0.35 : 0.18,
+            transition: 'opacity 160ms ease',
+        }, children: [_jsx("span", { "aria-hidden": "true", style: { whiteSpace: 'nowrap', paddingInlineEnd: '0.04em' }, children: "hanzo" }), _jsx("span", { "aria-hidden": "true", style: {
+                    display: 'block',
+                    flex: '0 0 auto',
+                    width: '0.225em',
+                    height: '0.225em',
+                    marginBottom: '0.14em',
+                    lineHeight: 0,
+                    letterSpacing: 'normal',
+                }, children: _jsxs("svg", { width: "100%", height: "100%", viewBox: MARK_VIEWBOX, fill: "currentColor", focusable: "false", "aria-hidden": "true", style: { display: 'block', width: '100%', height: '100%' }, children: [MARK_BLOCKS.map((d) => _jsx("path", { d: d }, d)), MARK_SHADE.map((d) => _jsx("path", { d: d }, d))] }) })] }));
+}
+const open = (out) => (out ? { target: '_blank', rel: 'noopener noreferrer' } : {});
 const LEGAL = { display: 'inline-flex', alignItems: 'center', gap: 6 };
-const Door = ({ link }) => (_jsxs(Anchor, { href: link.href, ...open(link.out), color: "$soft", fontSize: "$2", lineHeight: "$2", py: 3, textDecorationLine: "none", hoverStyle: { color: '$ink' }, children: [link.label, link.out ? ' ↗' : ''] }));
-const Footer = ({ columns, ask, wordmark, copyright, legal = [], gutter = 'clamp(20px, 4vw, 72px)', after }) => (_jsxs(YStack, { ...slot('footer'), render: "footer", width: "100%", bg: "$panel", borderTopWidth: 1, borderColor: "$edge", pt: 48, pb: 32, gap: 40, style: { paddingInline: gutter }, children: [ask ? (_jsx(YStack, { width: "100%", items: "center", children: ask })) : null, _jsx(XStack, { flexWrap: "wrap", gap: 28, $sm: { gap: 40 }, children: columns.map((c) => (_jsxs(YStack, { render: "nav", "aria-label": c.title, flexBasis: "100%", flexGrow: 1, minW: 140, $sm: { flexBasis: 150 }, gap: 2, children: [c.href ? (_jsxs(Anchor, { href: c.href, ...open(c.out), color: "$ink", fontSize: "$2", lineHeight: "$2", fontWeight: "600", pb: 10, textDecorationLine: "none", children: [c.title, c.out ? ' ↗' : ''] })) : (_jsx(Line, { size: "sm", weight: "600", pb: 10, children: c.title })), _jsx(YStack, { display: "grid", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", columnGap: 16, $sm: { display: 'flex', flexDirection: 'column' }, children: c.links.map((l) => (_jsx(Door, { link: l }, l.label))) })] }, c.id))) }), _jsxs(XStack, { flexWrap: "wrap", items: "center", gap: 20, rowGap: 12, children: [copyright ? (_jsx(Line, { size: "sm", tone: "dim", children: copyright })) : null, _jsx(XStack, { render: "nav", "aria-label": "Terms & Policies", flexWrap: "wrap", gap: 16, rowGap: 8, shrink: 1, minW: 0, children: legal.map((l) => (_jsxs(Anchor, { href: l.href, ...open(l.out), color: "$faint", fontSize: "$2", lineHeight: "$2", textDecorationLine: "none", hoverStyle: { color: '$ink' }, ...LEGAL, children: [l.href.endsWith('#choices') ? _jsx(PrivacyChoicesIcon, {}) : null, l.label] }, l.label))) }), wordmark ? (_jsx(XStack, { marginInlineStart: "auto", items: "center", shrink: 1, minW: 0, maxW: "100%", children: wordmark })) : null] }), after] }));
+const Door = ({ link }) => {
+    const { t } = useI18n();
+    return (_jsxs(Anchor, { href: link.href, ...open(link.out), color: "$soft", fontSize: "$2", lineHeight: "$2", py: 3, textDecorationLine: "none", hoverStyle: { color: '$ink' }, children: [t(link.label), link.out ? ' ↗' : ''] }));
+};
+const Footer = ({ columns, ask, wordmark, signature, copyright, legal = [], social = [], gutter = 'clamp(20px, 4vw, 72px)', after, }) => {
+    const { t } = useI18n();
+    const closing = signature ?? wordmark;
+    return (_jsxs(YStack, { ...slot('footer'), render: "footer", width: "100%", bg: "$panel", borderTopWidth: 1, borderColor: "$edge", pt: 48, pb: 16, gap: 28, style: { paddingInline: gutter }, children: [ask ? _jsx(YStack, { width: "100%", items: "center", children: ask }) : null, _jsx(XStack, { display: "grid", width: "100%", gridTemplateColumns: "repeat(2, minmax(0, 1fr))", columnGap: 22, rowGap: 32, $sm: { gridTemplateColumns: 'repeat(3, minmax(0, 1fr))' }, $lg: { gridTemplateColumns: 'repeat(6, minmax(0, 1fr))' }, children: columns.map((c) => (_jsxs(YStack, { render: "nav", "aria-label": t(c.title), minW: 0, gap: 2, children: [c.href ? (_jsxs(Anchor, { href: c.href, ...open(c.out), color: "$ink", fontSize: "$2", lineHeight: "$2", fontWeight: "600", pb: 10, textDecorationLine: "none", children: [t(c.title), c.out ? ' ↗' : ''] })) : (_jsx(Line, { size: "sm", weight: "600", pb: 10, children: t(c.title) })), _jsx(YStack, { children: c.links.map((l) => _jsx(Door, { link: l }, l.href + l.label)) })] }, c.id))) }), (social.length > 0 || after) ? (_jsxs(YStack, { borderTopWidth: 1, borderColor: "$edge", pt: 18, gap: 8, children: [social.length > 0 ? (_jsx(XStack, { render: "nav", "aria-label": t('Social links'), flexWrap: "wrap", gap: 18, rowGap: 6, children: social.map((l) => _jsx(Door, { link: l }, l.href + l.label)) })) : null, after] })) : null, _jsxs(XStack, { borderTopWidth: 1, borderColor: "$edge", pt: 16, flexWrap: "wrap", items: "center", gap: 16, rowGap: 8, children: [copyright ? _jsx(Line, { size: "sm", tone: "dim", children: copyright }) : null, _jsx(XStack, { render: "nav", "aria-label": t('Terms & Policies'), flexWrap: "wrap", gap: 16, rowGap: 8, shrink: 1, minW: 0, children: legal.map((l) => (_jsxs(Anchor, { href: l.href, ...open(l.out), color: "$faint", fontSize: "$2", lineHeight: "$2", textDecorationLine: "none", hoverStyle: { color: '$ink' }, ...LEGAL, children: [l.href.endsWith('#choices') ? _jsx(PrivacyChoicesIcon, {}) : null, t(l.label)] }, l.href + l.label))) })] }), closing ? _jsx(YStack, { width: "100%", pt: 4, minW: 0, children: closing }) : null] }));
+};
 export { Footer };
 //# sourceMappingURL=Footer.js.map

package/dist/marketing/Footer.js.map

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

package/dist/marketing/PageLoading.cjs

@@ -15,7 +15,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * `role="status"` with a label, because the spinner itself is `aria-hidden`.
  */
 const gui_1 = require("@hanzo/gui");
+const react_1 = require("@hanzo/i18n/react");
 const slot_1 = require("../backends/gui/slot.cjs");
 const spinner_1 = require("../backends/gui/spinner.cjs");
-const PageLoading = ({ label = 'Loading', ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('page-loading'), role: "status", "aria-label": label, width: "100%", minH: "100dvh", items: "center", justify: "center", ...p, children: (0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 28, color: "var(--quiet, currentColor)" }) }));
+const PageLoading = ({ label, ...p }) => {
+    const { t } = (0, react_1.useI18n)();
+    return ((0, jsx_runtime_1.jsx)(gui_1.YStack, { ...(0, slot_1.slot)('page-loading'), role: "status", "aria-label": label ?? t('Loading'), width: "100%", minH: "100dvh", items: "center", justify: "center", ...p, children: (0, jsx_runtime_1.jsx)(spinner_1.Spinner, { size: 28, color: "var(--quiet, currentColor)" }) }));
+};
 exports.PageLoading = PageLoading;

package/dist/marketing/PageLoading.d.ts

@@ -12,7 +12,7 @@
 import { YStack } from '@hanzo/gui';
 import type { ComponentProps } from 'react';
 export type PageLoadingProps = Omit<ComponentProps<typeof YStack>, 'children'> & {
-    /** What assistive tech hears. */
+    /** What assistive tech hears; absent, "Loading" in the reader's language. */
     label?: string;
 };
 declare const PageLoading: ({ label, ...p }: PageLoadingProps) => import("react").JSX.Element;

package/dist/marketing/PageLoading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoading.d.ts","sourceRoot":"","sources":["../../src/marketing/PageLoading.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,WAAW,oBAAiC,gBAAgB,gCAajE,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"PageLoading.d.ts","sourceRoot":"","sources":["../../src/marketing/PageLoading.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAEnC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAK3C,MAAM,MAAM,gBAAgB,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC/E,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,QAAA,MAAM,WAAW,oBAAqB,gBAAgB,gCAgBrD,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/marketing/PageLoading.js

@@ -12,8 +12,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * `role="status"` with a label, because the spinner itself is `aria-hidden`.
  */
 import { YStack } from '@hanzo/gui';
+import { useI18n } from '@hanzo/i18n/react';
 import { slot } from '../backends/gui/slot.js';
 import { Spinner } from '../backends/gui/spinner.js';
-const PageLoading = ({ label = 'Loading', ...p }) => (_jsx(YStack, { ...slot('page-loading'), role: "status", "aria-label": label, width: "100%", minH: "100dvh", items: "center", justify: "center", ...p, children: _jsx(Spinner, { size: 28, color: "var(--quiet, currentColor)" }) }));
+const PageLoading = ({ label, ...p }) => {
+    const { t } = useI18n();
+    return (_jsx(YStack, { ...slot('page-loading'), role: "status", "aria-label": label ?? t('Loading'), width: "100%", minH: "100dvh", items: "center", justify: "center", ...p, children: _jsx(Spinner, { size: 28, color: "var(--quiet, currentColor)" }) }));
+};
 export { PageLoading };
 //# sourceMappingURL=PageLoading.js.map

package/dist/marketing/PageLoading.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageLoading.js","sourceRoot":"","sources":["../../src/marketing/PageLoading.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAOjD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,GAAG,SAAS,EAAE,GAAG,CAAC,EAAoB,EAAE,EAAE,CAAC,CACrE,KAAC,MAAM,OACD,IAAI,CAAC,cAAc,CAAC,EACxB,IAAI,EAAC,QAAQ,gBACD,KAAK,EACjB,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,KACX,CAAY,YAEjB,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,4BAA4B,GAAG,GACjD,CACV,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"PageLoading.js","sourceRoot":"","sources":["../../src/marketing/PageLoading.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAA;AAG3C,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAOjD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,CAAC,EAAoB,EAAE,EAAE;IACxD,MAAM,EAAE,CAAC,EAAE,GAAG,OAAO,EAAE,CAAA;IACvB,OAAO,CACP,KAAC,MAAM,OACD,IAAI,CAAC,cAAc,CAAC,EACxB,IAAI,EAAC,QAAQ,gBACD,KAAK,IAAI,CAAC,CAAC,SAAS,CAAC,EACjC,KAAK,EAAC,MAAM,EACZ,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,KACX,CAAY,YAEjB,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,4BAA4B,GAAG,GACjD,CACR,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/marketing/Plans.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Plans = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 /**
  * Plans — one card per plan on the chosen tab, each with its own way in.
  *
@@ -21,8 +22,9 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * a card's button is pressed.
  */
 const gui_1 = require("@hanzo/gui");
+const i18n_1 = require("@hanzo/i18n");
+const react_2 = require("@hanzo/i18n/react");
 const lucide_icons_2_1 = require("@hanzogui/lucide-icons-2");
-const react_1 = require("react");
 const slot_1 = require("../backends/gui/slot.cjs");
 const switch_1 = require("../backends/gui/switch.cjs");
 const toggle_group_1 = require("../backends/gui/toggle-group.cjs");
@@ -32,12 +34,13 @@ const rows_1 = require("./rows.cjs");
 const type_1 = require("./type.cjs");
 const TIGHT = { letterSpacing: '-0.012em', textWrap: 'balance' };
 const TABS = [
-    ['individual', 'Individual'],
-    ['team', 'Team & Enterprise'],
+    ['individual', (0, i18n_1.phrase)('Individual')],
+    ['team', (0, i18n_1.phrase)('Team & Enterprise')],
 ];
 /** The plan families the ladder sells. */
 const FAMILIES = new Set(['personal', 'team', 'enterprise']);
-const Plans = ({ plans, heading = 'h1', title = 'Plans that grow with you', checkout, signIn = '/login', cta = 'Try Hanzo', contactHref = '/contact-sales', onView, onChoose, footnote, }) => {
+const Plans = ({ plans, heading = 'h1', title, checkout, signIn = '/login', cta, contactHref = '/contact-sales', onView, onChoose, footnote, }) => {
+    const { t } = (0, react_2.useI18n)();
     const all = (0, react_1.useMemo)(() => plans.filter((p) => FAMILIES.has(p.category)), [plans]);
     const tabs = TABS.filter(([a]) => all.some((p) => (0, rows_1.audience)(p) === a));
     const [picked, setPicked] = (0, react_1.useState)('individual');
@@ -46,7 +49,7 @@ const Plans = ({ plans, heading = 'h1', title = 'Plans that grow with you', chec
     const { plans: here, from } = (0, react_1.useMemo)(() => (0, rows_1.merged)(all.filter((p) => (0, rows_1.audience)(p) === tab)), [all, tab]);
     const savings = here.map(rows_1.saving).filter((n) => n !== null);
     const most = savings.length ? Math.max(...savings) : 0;
-    const label = savings.every((n) => n === most) ? `Save ${most}% with annual` : `Save up to ${most}% with annual`;
+    const label = savings.every((n) => n === most) ? t('Save {n}% with annual', { n: most }) : t('Save up to {n}% with annual', { n: most });
     // One view per tab a reader looks at; a repaint of the same rows is not a new view.
     const shown = here.map((p) => p.id).join();
     (0, react_1.useEffect)(() => {
@@ -60,21 +63,34 @@ const Plans = ({ plans, heading = 'h1', title = 'Plans that grow with you', chec
             ? `${signIn}?next=${encodeURIComponent(checkout(p, (0, rows_1.termOf)(p, yearly)).replace(/^https:\/\/hanzo\.ai(?=\/)/, ''))}`
             : (0, rows_1.way)(p) === 'free'
                 ? signIn
-                : contactHref, cta: cta, onPress: (cta) => onChoose?.({ plan: p, interval: (0, rows_1.termOf)(p, yearly), tab, cta, way: (0, rows_1.way)(p) }) }, p.id));
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('plans'), render: "section", width: "100%", maxW: 1280, mx: "auto", gap: "$8", items: "center", px: "$6", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { items: "center", gap: "$3", maxW: 768, children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: heading, m: 0, align: "center", fontFamily: "$heading", fontSize: "$9", lineHeight: "$9", fontWeight: 500, $md: { fontSize: '$11', lineHeight: '$11' }, style: TIGHT, children: title }), (0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "lg", tone: "muted", align: "center", children: "You are charged exactly the price shown. Past a plan\u2019s included usage, agents are metered at the rates below." })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flexWrap: "wrap", items: "center", justify: "center", gap: "$4", children: [tabs.length > 1 ? ((0, jsx_runtime_1.jsx)(toggle_group_1.ToggleGroup, { type: "single", value: tab, onValueChange: (v) => {
+                : contactHref, cta: cta ?? t('Try Hanzo'), onPress: (cta) => onChoose?.({ plan: p, interval: (0, rows_1.termOf)(p, yearly), tab, cta, way: (0, rows_1.way)(p) }) }, p.id));
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('plans'), render: "section", width: "100%", maxW: 1280, mx: "auto", gap: "$8", items: "center", px: "$6", children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { items: "center", gap: "$3", maxW: 768, children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: heading, m: 0, align: "center", fontFamily: "$heading", fontSize: "$9", lineHeight: "$9", fontWeight: 500, $md: { fontSize: '$11', lineHeight: '$11' }, style: TIGHT, children: title ?? t('Plans that grow with you') }), (0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "lg", tone: "muted", align: "center", children: `${t('You are charged exactly the price shown.')} ${t('Past a plan’s included usage, agents are metered at the rates below.')}` })] }), (0, jsx_runtime_1.jsxs)(gui_1.XStack, { flexWrap: "wrap", items: "center", justify: "center", gap: "$4", children: [tabs.length > 1 ? ((0, jsx_runtime_1.jsx)(toggle_group_1.ToggleGroup, { type: "single", value: tab, onValueChange: (v) => {
                             if (v)
                                 setPicked(v);
-                        }, disableDeactivation: true, "aria-label": "Who this is for", style: { padding: 4, borderRadius: 9999, background: 'var(--surface-2)' }, children: tabs.map(([a, name]) => ((0, jsx_runtime_1.jsx)(toggle_group_1.ToggleGroupItem, { value: a, variant: "outline", rounded: "$10", borderColor: "transparent", px: "$4", children: name }, a))) })) : null, most > 0 ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "label", items: "center", gap: "$3", paddingInlineStart: "$5", paddingInlineEnd: "$3", py: "$2", rounded: 9999, borderWidth: 1, borderColor: "$edge", bg: "$panel", cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "muted", children: label }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: yearly, onCheckedChange: setYearly, "aria-label": "Bill yearly" })] })) : null] }), here.length > 1 ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 250, max: 4 }, gap: 24, children: here.map(card) }) })) : here[0] ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", maxW: 440, children: card(here[0]) })) : null, footnote ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "xs", tone: "muted", align: "center", maxW: 620, children: footnote })) : null] }));
+                        }, disableDeactivation: true, "aria-label": t('Who this is for'), style: { padding: 4, borderRadius: 9999, background: 'var(--surface-2)' }, children: tabs.map(([a, name]) => ((0, jsx_runtime_1.jsx)(toggle_group_1.ToggleGroupItem, { value: a, variant: "outline", rounded: "$10", borderColor: "transparent", px: "$4", children: t(name) }, a))) })) : null, most > 0 ? ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "label", items: "center", gap: "$3", paddingInlineStart: "$5", paddingInlineEnd: "$3", py: "$2", rounded: 9999, borderWidth: 1, borderColor: "$edge", bg: "$panel", cursor: "pointer", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "muted", children: label }), (0, jsx_runtime_1.jsx)(switch_1.Switch, { checked: yearly, onCheckedChange: setYearly, "aria-label": t('Bill yearly') })] })) : null] }), here.length > 1 ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", children: (0, jsx_runtime_1.jsx)(grid_1.Grid, { columns: { min: 250, max: 4 }, gap: 24, children: here.map(card) }) })) : here[0] ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { width: "100%", maxW: 440, children: card(here[0]) })) : null, footnote ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "xs", tone: "muted", align: "center", maxW: 620, children: footnote })) : null] }));
 };
 exports.Plans = Plans;
 /** One plan: its name, its price for the term, the way in, and what it includes. */
 function Card({ plan, every, href, cta: label, from, team, onPress, }) {
+    const { t } = (0, react_2.useI18n)();
     const how = (0, rows_1.way)(plan);
     const year = (0, rows_1.charge)(plan, 'year');
     // A year is headlined as the month it works out to, with the whole year under it.
     const headline = every === 'year' && year ? Math.round((year / 12) * 100) / 100 : (plan.priceMonthly ?? 0);
     const floor = (0, rows_1.seats)(plan);
     // Team and Enterprise name the plan; everyone else is one button.
-    const cta = team ? `Get ${plan.name} plan` : label;
-    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('plan'), render: "section", "aria-label": plan.name, height: "100%", gap: "$5", p: "$5", $sm: { p: '$6' }, rounded: "var(--radius-xl)", borderWidth: 1, borderColor: plan.popular ? '$bound' : '$edge', bg: plan.popular ? '$hover' : '$panel', children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: "h3", m: 0, size: "xl", weight: "600", children: plan.name }), plan.popular ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('plan-badge'), display: "inline-flex", self: "flex-start", items: "center", px: "$2", py: 2, rounded: 9999, borderWidth: 1, borderColor: "$edge", bg: "$raised", children: (0, jsx_runtime_1.jsx)(type_1.Line, { fontSize: 10, px: 10, tone: "soft", weight: "700", style: { textTransform: 'uppercase', letterSpacing: '0.05em' }, children: "Most popular" }) })) : null] }), plan.description ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "sm", tone: "muted", children: plan.description })) : null] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$1", children: how === 'card' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { display: "block", children: [from ? ((0, jsx_runtime_1.jsxs)(type_1.Line, { size: "sm", tone: "muted", children: ["From", ' '] })) : null, (0, jsx_runtime_1.jsx)(type_1.Line, { size: "x4", weight: "600", children: (0, rows_1.money)(headline) }), ' ', (0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "muted", children: plan.pricePerUser ? 'USD/seat/month' : 'USD/month' })] }), (0, jsx_runtime_1.jsxs)(type_1.Line, { render: "p", m: 0, size: "sm", tone: "muted", children: [every === 'year' && year ? `Billed ${(0, rows_1.money)(year)}${plan.pricePerUser ? ' per seat' : ''} yearly` : 'Billed monthly', floor > 1 ? ` · from ${floor} seats` : ''] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(type_1.Line, { size: "x4", weight: "600", children: how === 'free' ? 'Free' : 'Custom' }), (0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "sm", tone: "muted", children: how === 'free' ? 'No card needed' : 'Priced with our team' })] })) }), (0, jsx_runtime_1.jsx)(Cta_1.Cta, { href: href, "data-ga": true, onPress: () => onPress(cta), children: cta }), how === 'card' ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "xs", tone: "muted", align: "center", mt: -12, children: "No commitment \u00B7 Cancel anytime" })) : null, plan.features.length ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { render: "ul", gap: "$3", m: 0, p: 0, style: { listStyle: 'none' }, children: plan.features.map((f) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "li", items: "flex-start", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { shrink: 0, mt: 3, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16, color: "var(--primary)" }) }), (0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "muted", children: f })] }, f))) })) : null] }));
+    const cta = team ? t('Get {plan} plan', { plan: plan.name }) : label;
+    return ((0, jsx_runtime_1.jsxs)(gui_1.YStack, { ...(0, slot_1.slot)('plan'), render: "section", "aria-label": plan.name, height: "100%", gap: "$5", p: "$5", $sm: { p: '$6' }, rounded: "var(--radius-xl)", borderWidth: 1, borderColor: plan.popular ? '$bound' : '$edge', bg: plan.popular ? '$hover' : '$panel', children: [(0, jsx_runtime_1.jsxs)(gui_1.YStack, { gap: "$2", children: [(0, jsx_runtime_1.jsxs)(gui_1.XStack, { items: "center", justify: "space-between", gap: "$3", children: [(0, jsx_runtime_1.jsx)(type_1.Line, { render: "h3", m: 0, size: "xl", weight: "600", children: plan.name }), plan.popular ? ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('plan-badge'), display: "inline-flex", self: "flex-start", items: "center", px: "$2", py: 2, rounded: 9999, borderWidth: 1, borderColor: "$edge", bg: "$raised", children: (0, jsx_runtime_1.jsx)(type_1.Line, { fontSize: 10, px: 10, tone: "soft", weight: "700", style: { textTransform: 'uppercase', letterSpacing: '0.05em' }, children: t('Most popular') }) })) : null] }), plan.description ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "sm", tone: "muted", children: plan.description })) : null] }), (0, jsx_runtime_1.jsx)(gui_1.YStack, { gap: "$1", children: how === 'card' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { display: "block", children: (0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "muted", children: t(from
+                                    ? plan.pricePerUser
+                                        ? 'From {price} USD/seat/month'
+                                        : 'From {price} USD/month'
+                                    : plan.pricePerUser
+                                        ? '{price} USD/seat/month'
+                                        : '{price} USD/month', {
+                                    price: ((0, jsx_runtime_1.jsx)(type_1.Line, { size: "x4", weight: "600", children: (0, rows_1.money)(headline) })),
+                                }) }) }), (0, jsx_runtime_1.jsxs)(type_1.Line, { render: "p", m: 0, size: "sm", tone: "muted", children: [every === 'year' && year
+                                    ? plan.pricePerUser
+                                        ? t('Billed {price} per seat yearly', { price: (0, rows_1.money)(year) })
+                                        : t('Billed {price} yearly', { price: (0, rows_1.money)(year) })
+                                    : t('Billed monthly'), floor > 1 ? ` · ${t('from {n} seats', { n: floor })}` : ''] })] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(type_1.Line, { size: "x4", weight: "600", children: how === 'free' ? t('Free') : t('Custom') }), (0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "sm", tone: "muted", children: how === 'free' ? t('No card needed') : t('Priced with our team') })] })) }), (0, jsx_runtime_1.jsx)(Cta_1.Cta, { href: href, "data-ga": true, onPress: () => onPress(cta), children: cta }), how === 'card' ? ((0, jsx_runtime_1.jsx)(type_1.Line, { render: "p", m: 0, size: "xs", tone: "muted", align: "center", mt: -12, children: t('No commitment · Cancel anytime') })) : null, plan.features.length ? ((0, jsx_runtime_1.jsx)(gui_1.YStack, { render: "ul", gap: "$3", m: 0, p: 0, style: { listStyle: 'none' }, children: plan.features.map((f) => ((0, jsx_runtime_1.jsxs)(gui_1.XStack, { render: "li", items: "flex-start", gap: "$3", children: [(0, jsx_runtime_1.jsx)(gui_1.YStack, { shrink: 0, mt: 3, "aria-hidden": true, children: (0, jsx_runtime_1.jsx)(lucide_icons_2_1.Check, { size: 16, color: "var(--primary)" }) }), (0, jsx_runtime_1.jsx)(type_1.Line, { size: "sm", tone: "muted", children: f })] }, f))) })) : null] }));
 }

package/dist/marketing/Plans.d.ts

@@ -11,12 +11,13 @@ export type PlansProps = {
     plans: readonly PlanRow[];
     /** The level the title is drawn at: `h1` alone on a page, `h2` inside one. */
     heading?: 'h1' | 'h2';
+    /** The heading; absent, "Plans that grow with you" in the reader's language. */
     title?: string;
     /** The address a paid plan's button opens, for the term on the card. */
     checkout: (plan: PlanRow, interval: Interval) => string;
     /** Where every card starts: sign-in first, payment second. A paid card opens it with `?next=<checkout>`. */
     signIn?: string;
-    /** What every way in says. */
+    /** What every way in says; absent, "Try Hanzo" in the reader's language. */
     cta?: string;
     contactHref?: string;
     onView?: (tab: Audience, shown: readonly {

package/dist/marketing/Plans.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Plans.d.ts","sourceRoot":"","sources":["../../src/marketing/Plans.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAOpE,OAAO,EAA+D,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAA;AAahI,MAAM,MAAM,UAAU,GAAG;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,QAAQ,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;CAAE,CAAA;AAE1H,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,OAAO,EAAE,CAAA;IACzB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wEAAwE;IACxE,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,KAAK,MAAM,CAAA;IACvD,4GAA4G;IAC5G,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,8BAA8B;IAC9B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,QAAQ,CAAA;KAAE,EAAE,KAAK,IAAI,CAAA;IACzF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IACvC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,KAAK,+FAWR,UAAU,gCAyHZ,CAAA;AAuID,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"Plans.d.ts","sourceRoot":"","sources":["../../src/marketing/Plans.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AA4BpE,OAAO,EAA+D,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAA;AAahI,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,EAAE,OAAO,CAAA;IACb,QAAQ,EAAE,QAAQ,CAAA;IAClB,GAAG,EAAE,QAAQ,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,SAAS,OAAO,EAAE,CAAA;IACzB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,CAAA;IACrB,gFAAgF;IAChF,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wEAAwE;IACxE,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,KAAK,MAAM,CAAA;IACvD,4GAA4G;IAC5G,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,4EAA4E;IAC5E,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,QAAQ,CAAA;KAAE,EAAE,KAAK,IAAI,CAAA;IACzF,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,IAAI,CAAA;IACvC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,KAAK,+FAWR,UAAU,gCAiHZ,CAAA;AA6HD,OAAO,EAAE,KAAK,EAAE,CAAA"}