@hanzo/ui 8.27.46 → 8.27.47

package/dist/marketing/surface.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Surfaces that answer approach, and the marks inside them that answer with
+ * them.
+ *
+ *   Leaf    a card: a corner, an edge that brightens on hover, no ground
+ *   Cell    a tile of a ruled grid: no corner and no edge, a ground that brightens
+ *   Lift    ink that brightens when its card is hovered; `step` also moves it
+ *           2px toward where it goes
+ *   Reveal  a line offered only on approach — hover, or a keyboard's focus
+ *   Lattice a ruled backdrop: a decorative grid behind a hero
+ *
+ * A Leaf or a Cell is a gui `group`, and the marks read it with `$group-hover`,
+ * so the card decides when and the mark decides how. It is a group and NOT a
+ * size container: gui's default `container-type: inline-size` sizes the box as
+ * if it were empty, so a card a row sizes by its content — a filter chip —
+ * collapsed to its own padding. No mark asks the group its size. An ink written on a mark
+ * is a prop beside the hover, so nothing has to out-rank anything: the lift a
+ * stylesheet used to apply lost to every atomic `color` a mark carried, and
+ * those cards never lifted.
+ *
+ * Every default is a prop a caller replaces: `p` for the padding, `borderColor`
+ * for the resting edge, `hoverStyle` for the approach, `bg` for a ground.
+ */
+import { Text, View } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+import { useHost } from './host.js';
+/** The element's own display — what @hanzo/design's base or the browser gives
+ *  it — under gui Text's `inline`. */
+const OWN = 'revert-layer';
+/** The element's own ink, the same way: @hanzo/design's base gives every `<a>`
+ *  and every heading `--text-primary`, and anything else takes its parent's. */
+const INK = 'revert-layer';
+/** The lifted ink: white on the dark ground, ink on the light one. */
+const LIFT = 'var(--text-primary)';
+/** A card. The defaults change nothing but the corner and the hover edge: no
+ *  ground, a transparent resting edge, so a card that names only a ground gets
+ *  a ground and no lift. */
+const Leaf = ({ render, ...p }) => {
+    const host = useHost(render, p.href, 'div');
+    return (_jsx(Text, { ...slot('leaf'), group: true, containerType: "normal", render: host, display: "block", height: "100%", whiteSpace: "inherit", textDecorationLine: "none", color: INK, p: "$4", borderWidth: 1, borderStyle: "solid", borderColor: "transparent", rounded: "var(--radius-xl)", hoverStyle: { borderColor: 'var(--white-15)' }, ...p }));
+};
+/** A tile of a ruled grid, which rules its own lines with a 1px gap over a
+ *  neutral ground — so a Cell adds no edge and no corner, which would break the
+ *  flush rule the grid is made of, and no box: the element keeps the display the
+ *  document gives it, so a row stays a row and an icon button stays centred. */
+const Cell = ({ render, ...p }) => {
+    const host = useHost(render, p.href, 'div');
+    return (_jsx(Text, { ...slot('cell'), group: true, containerType: "normal", render: host, display: OWN, whiteSpace: "inherit", textDecorationLine: "none", bg: "var(--pure-black)", color: "inherit", hoverStyle: { bg: 'var(--neutral-950)' }, ...p }));
+};
+/** Ink that brightens with its card. Inline, like the word or icon it wraps;
+ *  a mark that steps is a box (`display="inline-flex"`), because an inline box
+ *  does not move. */
+const Lift = ({ render = 'span', step = false, ...p }) => (_jsx(Text, { ...slot('lift'), render: render, display: OWN, whiteSpace: "inherit", color: INK, transition: (step
+        ? 'color var(--duration-fast) var(--ease-in-out), transform var(--duration-fast) var(--ease-in-out)'
+        : 'color var(--duration-fast) var(--ease-in-out)'), "$group-hover": step ? { color: LIFT, x: 2 } : { color: LIFT }, ...p }));
+/** A line only offered on approach: hidden at rest, shown while its group is
+ *  hovered or holds a keyboard's focus — a reveal a keyboard cannot reach is
+ *  one half of the people never see. */
+const Reveal = ({ render = 'span', ...p }) => (_jsx(Text, { ...slot('reveal'), render: render, display: OWN, whiteSpace: "inherit", color: INK, opacity: 0, transition: 'opacity var(--duration-fast) var(--ease-in-out)', "$group-hover": { opacity: 1 }, "$group-focusVisible": { opacity: 1 }, "$group-focusWithin": { opacity: 1 }, ...p }));
+/** A ruled backdrop, in the foreground ink so it reads on either ground. Two
+ *  knobs, the pitch and the strength; everything else — where it sits, what
+ *  masks it — is the caller's props. */
+const Lattice = ({ size = 30, opacity = 0.05, ...p }) => {
+    const ink = `color-mix(in srgb, var(--foreground) ${opacity * 100}%, transparent)`;
+    return (_jsx(View, { ...slot('lattice'), "aria-hidden": true, backgroundImage: `linear-gradient(to right, ${ink} 1px, transparent 1px), linear-gradient(to bottom, ${ink} 1px, transparent 1px)`, backgroundSize: `${size}px ${size}px`, ...p }));
+};
+export { Leaf, Cell, Lift, Reveal, Lattice };
+//# sourceMappingURL=surface.js.map

package/dist/marketing/surface.js.map

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

package/dist/marketing/type.cjs

@@ -1,7 +1,7 @@
 'use client';"use strict";
 'use client';
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Line = void 0;
+exports.Claim = exports.Lede = exports.Eyebrow = exports.Title = exports.Display = exports.Line = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
  * Line — one line of type on the marketing ramp.
@@ -15,6 +15,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
  * so, and a page with no headings passes every visual check.
  */
 const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+const host_1 = require("./host.cjs");
 const SIZE = {
     xs: { fontSize: '$1', lineHeight: '$1' },
     sm: { fontSize: '$2', lineHeight: '$2' },
@@ -33,6 +35,31 @@ const TONE = {
 };
 const Line = ({ size, tone = 'plain', weight, align, render, children, ...p }) => {
     const pair = size ? SIZE[size] : undefined;
-    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { render: render, fontSize: pair?.fontSize, lineHeight: pair?.lineHeight, fontWeight: weight, color: TONE[tone], text: align, ...p, children: children }));
+    const host = (0, host_1.useHost)(render, p.href, 'span');
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { render: host, fontSize: pair?.fontSize, lineHeight: pair?.lineHeight, fontWeight: weight, color: TONE[tone], text: align, ...p, children: children }));
 };
 exports.Line = Line;
+/** The element's own box — a heading's or a paragraph's block, a span's line —
+ *  which is what the document gives it under gui Text's `inline`. */
+const BLOCK = { display: 'revert-layer', whiteSpace: 'inherit' };
+/** How a heading and a paragraph break: evened out, and no lone last word. A
+ *  web-only prop, typed once here. */
+const BALANCE = { textWrap: 'balance' };
+const PRETTY = { textWrap: 'pretty' };
+/** The page heading: three rungs of one ramp, 32 / 40 / 52. */
+const Display = ({ render = 'h1', ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('display'), render: render, ...BLOCK, fontFamily: "$heading", fontSize: "$10", fontWeight: '497', lineHeight: '1.19', letterSpacing: '-0.012em', color: "var(--foreground)", ...BALANCE, ...(p.fontSize === undefined ? { $sm: { fontSize: '$11' }, $lg: { fontSize: 'var(--text-6xl)' } } : null), ...p }));
+exports.Display = Display;
+/** The section heading: one size at every width, so it never grows into a page
+ *  heading. `quiet` is one rung down, for a heading under another section's. */
+const Title = ({ render = 'h2', quiet = false, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('title'), render: render, ...BLOCK, fontFamily: "$heading", fontSize: quiet ? '$7' : '$8', fontWeight: '497', lineHeight: (quiet ? '1.2' : '1.22'), letterSpacing: '-0.01em', color: "var(--foreground)", ...BALANCE, ...p }));
+exports.Title = Title;
+/** The small caps line above a heading. */
+const Eyebrow = ({ render = 'p', ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('eyebrow'), render: render, ...BLOCK, fontSize: "$2", fontWeight: "500", lineHeight: 'calc(1.25 / 0.875)', letterSpacing: '0.2em', textTransform: "uppercase", color: "var(--muted-foreground)", ...p }));
+exports.Eyebrow = Eyebrow;
+/** The paragraph under a heading. */
+const Lede = ({ render = 'p', ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('lede'), render: render, ...BLOCK, fontSize: "$3", lineHeight: '1.65', letterSpacing: 0, color: "var(--muted-foreground)", ...PRETTY, ...p }));
+exports.Lede = Lede;
+/** The category line under the promise: read second, so bigger and brighter than
+ *  a lede, a rung up at 640 the way the display above it steps. */
+const Claim = ({ render = 'p', ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('claim'), render: render, ...BLOCK, fontSize: "$7", lineHeight: 'var(--leading-snug)', color: "var(--text-secondary)", ...(p.fontSize === undefined ? { $sm: { fontSize: '$8' } } : null), ...p }));
+exports.Claim = Claim;

package/dist/marketing/type.d.ts

@@ -10,7 +10,7 @@
  * so, and a page with no headings passes every visual check.
  */
 import { type TextProps } from '@hanzo/gui';
-import type { ReactNode } from 'react';
+import type { Host, Loose } from './loose.js';
 declare const SIZE: {
     readonly xs: {
         readonly fontSize: '$1';
@@ -53,14 +53,53 @@ declare const TONE: {
 };
 export type LineSize = keyof typeof SIZE;
 export type LineTone = keyof typeof TONE;
-export type LineProps = Omit<TextProps, 'children' | 'render' | 'color'> & {
+export type LineProps = Loose<Omit<TextProps, 'children' | 'render' | 'color'>> & Host & {
     size?: LineSize;
     tone?: LineTone;
+    /** An ink of its own, in place of a tone. */
+    color?: string;
     weight?: '400' | '500' | '600' | '700';
-    render?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'div' | 'li' | 'blockquote' | 'cite';
+    render?: TextProps['render'];
     align?: 'center' | 'right';
-    children?: ReactNode;
 };
 declare const Line: ({ size, tone, weight, align, render, children, ...p }: LineProps) => import("react").JSX.Element;
 export { Line };
+/**
+ * The type a page's own copy is set in: the page heading, the section heading,
+ * the small caps line above one and the paragraph under it, and the category
+ * line under the promise. One rung of @hanzo/design's ramp each, said once here
+ * so a call site passes words and spacing, never type.
+ *
+ * Each is a block of running text: `display="revert-layer"` and
+ * `whiteSpace="inherit"` undo gui Text's inline, pre-wrap default, which is
+ * right for a label and wrong for a paragraph — the element is the box the
+ * document makes it, and takes the white space of the page it sits in. `render` picks the element and defaults to the one the role
+ * is — a page heading is an `<h1>` — and accepts an element, so a link or a
+ * motion host can carry the role: `render={<motion.p {...reveal} />}`.
+ *
+ * A stated `fontSize` is the whole size: the display and claim ramps step up at
+ * 640 and 1024, and a breakpoint would otherwise re-grow a size the caller set.
+ *
+ * Hierarchy is by scale, not weight: the headings are book weight (497, the
+ * Zen cut that reads as regular at display size) with leading that lets them
+ * breathe, and one ink — the heading owns its colour.
+ */
+export type RoleProps = Loose<Omit<TextProps, 'render' | 'children'>> & Host & {
+    render?: TextProps['render'];
+};
+/** The page heading: three rungs of one ramp, 32 / 40 / 52. */
+declare const Display: ({ render, ...p }: RoleProps) => import("react").JSX.Element;
+/** The section heading: one size at every width, so it never grows into a page
+ *  heading. `quiet` is one rung down, for a heading under another section's. */
+declare const Title: ({ render, quiet, ...p }: RoleProps & {
+    quiet?: boolean;
+}) => import("react").JSX.Element;
+/** The small caps line above a heading. */
+declare const Eyebrow: ({ render, ...p }: RoleProps) => import("react").JSX.Element;
+/** The paragraph under a heading. */
+declare const Lede: ({ render, ...p }: RoleProps) => import("react").JSX.Element;
+/** The category line under the promise: read second, so bigger and brighter than
+ *  a lede, a rung up at 640 the way the display above it steps. */
+declare const Claim: ({ render, ...p }: RoleProps) => import("react").JSX.Element;
+export { Display, Title, Eyebrow, Lede, Claim };
 //# sourceMappingURL=type.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/marketing/type.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,QAAA,MAAM,IAAI;aACR,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,IAAI;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACxC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,KAAK;iBAAE,UAAU,EAAE,KAAK;;CAChC,CAAA;AAEV,QAAA,MAAM,IAAI;aACR,KAAK,EAAE,MAAM;aACb,KAAK,EAAE,OAAO;aACd,IAAI,EAAE,QAAQ;aACd,GAAG,EAAE,QAAQ;CACL,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,IAAI,CAAA;AACxC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,IAAI,CAAA;AAExC,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC,GAAG;IACzE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IACtC,MAAM,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,YAAY,GAAG,MAAM,CAAA;IACxF,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,IAAI,0DAAqE,SAAS,gCAevF,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../src/marketing/type.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAKjD,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE1C,QAAA,MAAM,IAAI;aACR,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,IAAI;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACxC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,IAAI;iBAAE,UAAU,EAAE,IAAI;;aACtC,EAAE;iBAAI,QAAQ,EAAE,KAAK;iBAAE,UAAU,EAAE,KAAK;;CAChC,CAAA;AAEV,QAAA,MAAM,IAAI;aACR,KAAK,EAAE,MAAM;aACb,KAAK,EAAE,OAAO;aACd,IAAI,EAAE,QAAQ;aACd,GAAG,EAAE,QAAQ;CACL,CAAA;AAEV,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,IAAI,CAAA;AACxC,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,IAAI,CAAA;AAExC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAC,GAC7E,IAAI,GAAG;IACL,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAA;IACtC,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAC3B,CAAA;AAEH,QAAA,MAAM,IAAI,0DAAqE,SAAS,gCAgBvF,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA;AAEf;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC,GACnE,IAAI,GAAG;IACL,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;CAC7B,CAAA;AAWH,+DAA+D;AAC/D,QAAA,MAAM,OAAO,qBAA6B,SAAS,gCAelD,CAAA;AAED;gFACgF;AAChF,QAAA,MAAM,KAAK,4BAA4C,SAAS,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAA;CAAE,gCAcrF,CAAA;AAED,2CAA2C;AAC3C,QAAA,MAAM,OAAO,qBAA4B,SAAS,gCAajD,CAAA;AAED,qCAAqC;AACrC,QAAA,MAAM,IAAI,qBAA4B,SAAS,gCAY9C,CAAA;AAED;mEACmE;AACnE,QAAA,MAAM,KAAK,qBAA4B,SAAS,gCAW/C,CAAA;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,CAAA"}

package/dist/marketing/type.js

@@ -12,6 +12,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * so, and a page with no headings passes every visual check.
  */
 import { Text } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+import { useHost } from './host.js';
 const SIZE = {
     xs: { fontSize: '$1', lineHeight: '$1' },
     sm: { fontSize: '$2', lineHeight: '$2' },
@@ -30,7 +32,28 @@ const TONE = {
 };
 const Line = ({ size, tone = 'plain', weight, align, render, children, ...p }) => {
     const pair = size ? SIZE[size] : undefined;
-    return (_jsx(Text, { render: render, fontSize: pair?.fontSize, lineHeight: pair?.lineHeight, fontWeight: weight, color: TONE[tone], text: align, ...p, children: children }));
+    const host = useHost(render, p.href, 'span');
+    return (_jsx(Text, { render: host, fontSize: pair?.fontSize, lineHeight: pair?.lineHeight, fontWeight: weight, color: TONE[tone], text: align, ...p, children: children }));
 };
 export { Line };
+/** The element's own box — a heading's or a paragraph's block, a span's line —
+ *  which is what the document gives it under gui Text's `inline`. */
+const BLOCK = { display: 'revert-layer', whiteSpace: 'inherit' };
+/** How a heading and a paragraph break: evened out, and no lone last word. A
+ *  web-only prop, typed once here. */
+const BALANCE = { textWrap: 'balance' };
+const PRETTY = { textWrap: 'pretty' };
+/** The page heading: three rungs of one ramp, 32 / 40 / 52. */
+const Display = ({ render = 'h1', ...p }) => (_jsx(Text, { ...slot('display'), render: render, ...BLOCK, fontFamily: "$heading", fontSize: "$10", fontWeight: '497', lineHeight: '1.19', letterSpacing: '-0.012em', color: "var(--foreground)", ...BALANCE, ...(p.fontSize === undefined ? { $sm: { fontSize: '$11' }, $lg: { fontSize: 'var(--text-6xl)' } } : null), ...p }));
+/** The section heading: one size at every width, so it never grows into a page
+ *  heading. `quiet` is one rung down, for a heading under another section's. */
+const Title = ({ render = 'h2', quiet = false, ...p }) => (_jsx(Text, { ...slot('title'), render: render, ...BLOCK, fontFamily: "$heading", fontSize: quiet ? '$7' : '$8', fontWeight: '497', lineHeight: (quiet ? '1.2' : '1.22'), letterSpacing: '-0.01em', color: "var(--foreground)", ...BALANCE, ...p }));
+/** The small caps line above a heading. */
+const Eyebrow = ({ render = 'p', ...p }) => (_jsx(Text, { ...slot('eyebrow'), render: render, ...BLOCK, fontSize: "$2", fontWeight: "500", lineHeight: 'calc(1.25 / 0.875)', letterSpacing: '0.2em', textTransform: "uppercase", color: "var(--muted-foreground)", ...p }));
+/** The paragraph under a heading. */
+const Lede = ({ render = 'p', ...p }) => (_jsx(Text, { ...slot('lede'), render: render, ...BLOCK, fontSize: "$3", lineHeight: '1.65', letterSpacing: 0, color: "var(--muted-foreground)", ...PRETTY, ...p }));
+/** The category line under the promise: read second, so bigger and brighter than
+ *  a lede, a rung up at 640 the way the display above it steps. */
+const Claim = ({ render = 'p', ...p }) => (_jsx(Text, { ...slot('claim'), render: render, ...BLOCK, fontSize: "$7", lineHeight: 'var(--leading-snug)', color: "var(--text-secondary)", ...(p.fontSize === undefined ? { $sm: { fontSize: '$8' } } : null), ...p }));
+export { Display, Title, Eyebrow, Lede, Claim };
 //# sourceMappingURL=type.js.map

package/dist/marketing/type.js.map

@@ -1 +1 @@
-{"version":3,"file":"type.js","sourceRoot":"","sources":["../../src/marketing/type.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,IAAI,EAAkB,MAAM,YAAY,CAAA;AAGjD,MAAM,IAAI,GAAG;IACX,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IACxC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IACxC,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IAC1C,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IACxC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IACxC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IACxC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE;IACxC,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE;CAClC,CAAA;AAEV,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,QAAQ;IACd,GAAG,EAAE,QAAQ;CACL,CAAA;AAcV,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAa,EAAE,EAAE;IAC1F,MAAM,IAAI,GAAG,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAA;IAC1C,OAAO,CACL,KAAC,IAAI,IACH,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,IAAI,EAAE,QAAQ,EACxB,UAAU,EAAE,IAAI,EAAE,UAAU,EAC5B,UAAU,EAAE,MAAM,EAClB,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,EACjB,IAAI,EAAE,KAAK,KACN,CAAY,YAEhB,QAAQ,GACJ,CACR,CAAA;AACH,CAAC,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}
+{"version":3,"file":"type.js","sourceRoot":"","sources":["../../src/marketing/type.tsx"],"names":[],"mappings":"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"}

package/dist/styles/document.css

@@ -0,0 +1,93 @@
+/* @hanzo/ui document — the body of a long document: a policy, a set of terms, an
+   explanation authored in markdown.
+
+   Import once at the app root:  import '@hanzo/ui/styles/document.css'
+
+   KEYED ON `data-slot='document'`, NEVER ON A CLASS. `<Document>` stamps the
+   slot. The content arrives as bare tags rendered from markdown, which is the
+   one case no prop can reach, so these rules select by tag from the container.
+   Everything else on a page is props.
+
+   A contents list in a <nav> is chrome, and its links do not underline. A
+   table is the one thing that can outgrow its column, and nothing wraps it, so
+   the scroll goes on the table itself. */
+
+[data-slot='document'] {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  font-size: var(--text-base);
+  line-height: var(--leading-relaxed);
+  color: var(--muted-foreground);
+}
+
+[data-slot='document'] a {
+  color: var(--foreground);
+  text-underline-offset: 4px;
+}
+
+[data-slot='document'] a:not(:is(nav, aside, header, [role=navigation]) a) {
+  text-decoration: underline;
+}
+
+[data-slot='document'] :is(strong, th) {
+  font-weight: var(--weight-medium);
+  color: var(--foreground);
+}
+
+[data-slot='document'] :is(h2, h3) {
+  font-weight: var(--weight-medium);
+  color: var(--foreground);
+}
+
+[data-slot='document'] h2 {
+  margin-top: var(--space-6);
+  font-size: var(--text-xl);
+}
+
+[data-slot='document'] h3 {
+  margin-top: var(--space-4);
+  font-size: var(--text-base);
+}
+
+[data-slot='document'] ul { list-style: disc; }
+[data-slot='document'] ol { list-style: decimal; }
+
+[data-slot='document'] :is(ul, ol) {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding-left: var(--space-5);
+}
+
+[data-slot='document'] blockquote {
+  padding: var(--space-4);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  background-color: var(--secondary);
+}
+
+[data-slot='document'] code {
+  font-family: var(--font-mono);
+  font-size: var(--text-sm);
+  color: var(--foreground);
+}
+
+[data-slot='document'] hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+}
+
+[data-slot='document'] table {
+  display: block;
+  overflow-x: auto;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+
+[data-slot='document'] :is(th, td) {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  text-align: start;
+  vertical-align: top;
+}

package/dist/styles/motion.css

@@ -11,13 +11,15 @@
    itself. Every animation is off under `prefers-reduced-motion: reduce`.
 
      rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+              `data-beat="n"` staggers it n x 70ms
      fade     opacity eases 240ms                      SlideOver's scrim
      slide    transform eases 260ms                    SlideOver's panel
      drag     a row eases into place while one is held Reorder
      pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
      blink    on/off, 1s                               Caret
      shimmer  a highlight sweeps a placeholder         product Skeleton
-     unfold   a sheet turns open about its hinge       unfold()                 */
+     unfold   a sheet turns open about its hinge       unfold()
+     run      a light sweeps a set, child by child     Run                      */
 
 @keyframes rise {
   from {
@@ -35,6 +37,17 @@
   will-change: transform, opacity;
 }
 
+/* A staged entrance: `data-beat="n"` holds a rise back n beats of 70ms, so a set
+   that arrives together still reads in order. Reduced motion drops the
+   animation and the delay with it, so nothing waits hidden. */
+[data-motion='rise'][data-beat='1'] { animation-delay: 70ms; }
+[data-motion='rise'][data-beat='2'] { animation-delay: 140ms; }
+[data-motion='rise'][data-beat='3'] { animation-delay: 210ms; }
+[data-motion='rise'][data-beat='4'] { animation-delay: 280ms; }
+[data-motion='rise'][data-beat='5'] { animation-delay: 350ms; }
+[data-motion='rise'][data-beat='6'] { animation-delay: 420ms; }
+[data-motion='rise'][data-beat='7'] { animation-delay: 490ms; }
+
 [data-motion='fade'] {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
@@ -115,8 +128,45 @@
   --turn: 7deg;
 }
 
+/* A run: a light crosses a set of things that are all true at once (`<Run>`).
+   Each direct child is lit `data-beat` steps of `--run-step` after the first;
+   the sweep owns `color` and returns it to `--run-rest`. */
+@keyframes run {
+  0%,
+  26%,
+  100% {
+    color: var(--run-rest, var(--neutral-400));
+    border-color: var(--neutral-800);
+  }
+  8% {
+    color: var(--foreground);
+    border-color: var(--muted-foreground);
+  }
+}
+
+[data-motion='run'] > * {
+  animation: run 5.4s var(--ease-in-out) infinite;
+}
+
+[data-motion='run'] > [data-beat='1'] { animation-delay: calc(1 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='2'] { animation-delay: calc(2 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='3'] { animation-delay: calc(3 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='4'] { animation-delay: calc(4 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='5'] { animation-delay: calc(5 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='6'] { animation-delay: calc(6 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='7'] { animation-delay: calc(7 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='8'] { animation-delay: calc(8 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='9'] { animation-delay: calc(9 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='10'] { animation-delay: calc(10 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='11'] { animation-delay: calc(11 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='12'] { animation-delay: calc(12 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='13'] { animation-delay: calc(13 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='14'] { animation-delay: calc(14 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='15'] { animation-delay: calc(15 * var(--run-step, 0.22s)); }
+
 @media (prefers-reduced-motion: reduce) {
-  [data-motion] {
+  [data-motion],
+  [data-motion='run'] > * {
     animation: none;
     transition: none;
   }

package/dist/styles.css

@@ -1819,13 +1819,15 @@
    itself. Every animation is off under `prefers-reduced-motion: reduce`.
 
      rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+              `data-beat="n"` staggers it n x 70ms
      fade     opacity eases 240ms                      SlideOver's scrim
      slide    transform eases 260ms                    SlideOver's panel
      drag     a row eases into place while one is held Reorder
      pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
      blink    on/off, 1s                               Caret
      shimmer  a highlight sweeps a placeholder         product Skeleton
-     unfold   a sheet turns open about its hinge       unfold()                 */
+     unfold   a sheet turns open about its hinge       unfold()
+     run      a light sweeps a set, child by child     Run                      */
 
 @keyframes rise {
   from {
@@ -1843,6 +1845,17 @@
   will-change: transform, opacity;
 }
 
+/* A staged entrance: `data-beat="n"` holds a rise back n beats of 70ms, so a set
+   that arrives together still reads in order. Reduced motion drops the
+   animation and the delay with it, so nothing waits hidden. */
+[data-motion='rise'][data-beat='1'] { animation-delay: 70ms; }
+[data-motion='rise'][data-beat='2'] { animation-delay: 140ms; }
+[data-motion='rise'][data-beat='3'] { animation-delay: 210ms; }
+[data-motion='rise'][data-beat='4'] { animation-delay: 280ms; }
+[data-motion='rise'][data-beat='5'] { animation-delay: 350ms; }
+[data-motion='rise'][data-beat='6'] { animation-delay: 420ms; }
+[data-motion='rise'][data-beat='7'] { animation-delay: 490ms; }
+
 [data-motion='fade'] {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
@@ -1923,8 +1936,45 @@
   --turn: 7deg;
 }
 
+/* A run: a light crosses a set of things that are all true at once (`<Run>`).
+   Each direct child is lit `data-beat` steps of `--run-step` after the first;
+   the sweep owns `color` and returns it to `--run-rest`. */
+@keyframes run {
+  0%,
+  26%,
+  100% {
+    color: var(--run-rest, var(--neutral-400));
+    border-color: var(--neutral-800);
+  }
+  8% {
+    color: var(--foreground);
+    border-color: var(--muted-foreground);
+  }
+}
+
+[data-motion='run'] > * {
+  animation: run 5.4s var(--ease-in-out) infinite;
+}
+
+[data-motion='run'] > [data-beat='1'] { animation-delay: calc(1 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='2'] { animation-delay: calc(2 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='3'] { animation-delay: calc(3 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='4'] { animation-delay: calc(4 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='5'] { animation-delay: calc(5 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='6'] { animation-delay: calc(6 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='7'] { animation-delay: calc(7 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='8'] { animation-delay: calc(8 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='9'] { animation-delay: calc(9 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='10'] { animation-delay: calc(10 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='11'] { animation-delay: calc(11 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='12'] { animation-delay: calc(12 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='13'] { animation-delay: calc(13 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='14'] { animation-delay: calc(14 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='15'] { animation-delay: calc(15 * var(--run-step, 0.22s)); }
+
 @media (prefers-reduced-motion: reduce) {
-  [data-motion] {
+  [data-motion],
+  [data-motion='run'] > * {
     animation: none;
     transition: none;
   }
@@ -2500,13 +2550,15 @@ a svg,
    itself. Every animation is off under `prefers-reduced-motion: reduce`.
 
      rise     enter: fade up 10px over 400ms           FadeIn, Timeline, tooltips
+              `data-beat="n"` staggers it n x 70ms
      fade     opacity eases 240ms                      SlideOver's scrim
      slide    transform eases 260ms                    SlideOver's panel
      drag     a row eases into place while one is held Reorder
      pulse    opacity dims and returns, 2s             Pulse, StatusDot, Skeleton
      blink    on/off, 1s                               Caret
      shimmer  a highlight sweeps a placeholder         product Skeleton
-     unfold   a sheet turns open about its hinge       unfold()                 */
+     unfold   a sheet turns open about its hinge       unfold()
+     run      a light sweeps a set, child by child     Run                      */
 
 @keyframes rise {
   from {
@@ -2524,6 +2576,17 @@ a svg,
   will-change: transform, opacity;
 }
 
+/* A staged entrance: `data-beat="n"` holds a rise back n beats of 70ms, so a set
+   that arrives together still reads in order. Reduced motion drops the
+   animation and the delay with it, so nothing waits hidden. */
+[data-motion='rise'][data-beat='1'] { animation-delay: 70ms; }
+[data-motion='rise'][data-beat='2'] { animation-delay: 140ms; }
+[data-motion='rise'][data-beat='3'] { animation-delay: 210ms; }
+[data-motion='rise'][data-beat='4'] { animation-delay: 280ms; }
+[data-motion='rise'][data-beat='5'] { animation-delay: 350ms; }
+[data-motion='rise'][data-beat='6'] { animation-delay: 420ms; }
+[data-motion='rise'][data-beat='7'] { animation-delay: 490ms; }
+
 [data-motion='fade'] {
   transition: opacity 240ms cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity;
@@ -2604,8 +2667,45 @@ a svg,
   --turn: 7deg;
 }
 
+/* A run: a light crosses a set of things that are all true at once (`<Run>`).
+   Each direct child is lit `data-beat` steps of `--run-step` after the first;
+   the sweep owns `color` and returns it to `--run-rest`. */
+@keyframes run {
+  0%,
+  26%,
+  100% {
+    color: var(--run-rest, var(--neutral-400));
+    border-color: var(--neutral-800);
+  }
+  8% {
+    color: var(--foreground);
+    border-color: var(--muted-foreground);
+  }
+}
+
+[data-motion='run'] > * {
+  animation: run 5.4s var(--ease-in-out) infinite;
+}
+
+[data-motion='run'] > [data-beat='1'] { animation-delay: calc(1 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='2'] { animation-delay: calc(2 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='3'] { animation-delay: calc(3 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='4'] { animation-delay: calc(4 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='5'] { animation-delay: calc(5 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='6'] { animation-delay: calc(6 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='7'] { animation-delay: calc(7 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='8'] { animation-delay: calc(8 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='9'] { animation-delay: calc(9 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='10'] { animation-delay: calc(10 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='11'] { animation-delay: calc(11 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='12'] { animation-delay: calc(12 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='13'] { animation-delay: calc(13 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='14'] { animation-delay: calc(14 * var(--run-step, 0.22s)); }
+[data-motion='run'] > [data-beat='15'] { animation-delay: calc(15 * var(--run-step, 0.22s)); }
+
 @media (prefers-reduced-motion: reduce) {
-  [data-motion] {
+  [data-motion],
+  [data-motion='run'] > * {
     animation: none;
     transition: none;
   }