@hanzo/ui 8.27.45 → 8.27.47

package/dist/marketing/controls.d.ts

@@ -0,0 +1,42 @@
+/**
+ * The three controls a marketing page closes a thought with, one set:
+ *
+ *   Action  the button — chrome glass, or `fill` for the one loud control
+ *   Chip    a word in an outline: a badge, a tag, a filter
+ *   More    the quiet link — "View all →", "See full pricing ↗"
+ *
+ * Each is a gui Text, so it carries its own type and draws its own box: the
+ * label and any icon beside it inherit the ink, and nothing reaches in from a
+ * stylesheet. White space is the parent's, so a control inside a line that
+ * clips with an ellipsis stays on that line. An `href` makes it a link: an internal one goes through the app's
+ * router link (@hanzo/ui's `Link` context, set once at the root), any other is
+ * an anchor. A control that does something passes `render="button"`.
+ *
+ * The ease between rest and hover is @hanzo/design's base, which grants every
+ * `<a>` and `<button>` its colour, fill, edge and shadow transition, and the
+ * pointer (or `not-allowed` on a disabled button); a control restates none of it.
+ *
+ * Both themes are props. On the light ground the dark glass would draw a grey
+ * slab and the white fill would vanish into the page, so `$theme-light` turns
+ * the quiet weight to white glass with a dark edge and the loud one to ink.
+ */
+import { type TextProps } from '@hanzo/gui';
+import type { Host, Loose } from './loose.js';
+export type ControlProps = Loose<Omit<TextProps, 'render' | 'children'>> & Host & {
+    render?: TextProps['render'];
+};
+/** The quiet weight is chrome glass; `fill` drops the border outright rather
+ *  than making it transparent, which would leave the loud control 2px wider
+ *  than the quiet one beside it. 44px is the thumb floor, not a style. */
+declare const Action: ({ render, fill, ...p }: ControlProps & {
+    fill?: boolean;
+}) => import("react").JSX.Element;
+/** A word in an outline. Not an action — no fill, no weight — so the padding is
+ *  the caller's: a chip and a badge are the same outline at two sizes. It
+ *  brightens on approach only when it is a link. */
+declare const Chip: ({ render, ...p }: ControlProps) => import("react").JSX.Element;
+/** The quiet link. The hover is the reason it is a component rather than a
+ *  colour at the call site. */
+declare const More: ({ render, ...p }: ControlProps) => import("react").JSX.Element;
+export { Action, Chip, More };
+//# sourceMappingURL=controls.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"controls.d.ts","sourceRoot":"","sources":["../../src/marketing/controls.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAIjD,OAAO,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAE1C,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC,GACtE,IAAI,GAAG;IACL,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;CAC7B,CAAA;AAiCH;;0EAE0E;AAC1E,QAAA,MAAM,MAAM,2BAAoC,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,gCAuDhF,CAAA;AAED;;oDAEoD;AACpD,QAAA,MAAM,IAAI,qBAAsB,YAAY,gCA6B3C,CAAA;AAED;+BAC+B;AAC/B,QAAA,MAAM,IAAI,qBAAsB,YAAY,gCAe3C,CAAA;AAED,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,CAAA"}

package/dist/marketing/controls.js

@@ -0,0 +1,108 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The three controls a marketing page closes a thought with, one set:
+ *
+ *   Action  the button — chrome glass, or `fill` for the one loud control
+ *   Chip    a word in an outline: a badge, a tag, a filter
+ *   More    the quiet link — "View all →", "See full pricing ↗"
+ *
+ * Each is a gui Text, so it carries its own type and draws its own box: the
+ * label and any icon beside it inherit the ink, and nothing reaches in from a
+ * stylesheet. White space is the parent's, so a control inside a line that
+ * clips with an ellipsis stays on that line. An `href` makes it a link: an internal one goes through the app's
+ * router link (@hanzo/ui's `Link` context, set once at the root), any other is
+ * an anchor. A control that does something passes `render="button"`.
+ *
+ * The ease between rest and hover is @hanzo/design's base, which grants every
+ * `<a>` and `<button>` its colour, fill, edge and shadow transition, and the
+ * pointer (or `not-allowed` on a disabled button); a control restates none of it.
+ *
+ * Both themes are props. On the light ground the dark glass would draw a grey
+ * slab and the white fill would vanish into the page, so `$theme-light` turns
+ * the quiet weight to white glass with a dark edge and the loud one to ink.
+ */
+import { Text } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+import { address, useHost } from './host.js';
+const BOX = {
+    display: 'inline-flex',
+    items: 'center',
+    whiteSpace: 'inherit',
+    textDecorationLine: 'none',
+};
+/** A rung that carries its own leading: naming the size alone leaves the line
+ *  box to whatever an ancestor sets. */
+const SMALL = { fontSize: '$2', lineHeight: 'calc(1.25 / 0.875)' };
+/**
+ * A caller's own value holds in every state, the way a value stated on the
+ * element always has: a key the caller passes is dropped from the hover and from
+ * the light theme, so `color` on a chip stays that colour under the pointer and
+ * on the light ground. A caller's own `hoverStyle` or `$theme-light` replaces
+ * the default whole.
+ */
+const states = (p, hover, light) => {
+    const own = (s) => Object.fromEntries(Object.entries(s).filter(([k]) => !(k in p)));
+    const { hoverStyle: lightHover, ...lightRest } = light;
+    return {
+        ...(p.hoverStyle === undefined ? { hoverStyle: own(hover) } : null),
+        ...(p['$theme-light'] === undefined
+            ? { '$theme-light': { ...own(lightRest), ...(lightHover && p.hoverStyle === undefined ? { hoverStyle: own(lightHover) } : null) } }
+            : null),
+    };
+};
+/** The quiet weight is chrome glass; `fill` drops the border outright rather
+ *  than making it transparent, which would leave the loud control 2px wider
+ *  than the quiet one beside it. 44px is the thumb floor, not a style. */
+const Action = ({ render, fill = false, ...p }) => {
+    const host = useHost(render, p.href, 'a');
+    return (_jsx(Text, { ...slot('action'), ...(fill ? { 'data-fill': '' } : null), render: host, ...BOX, ...SMALL, justify: "center", gap: "$2", minH: 44, px: "$5", rounded: 9999, fontWeight: "500", backdropFilter: "var(--chrome-blur)", ...(fill
+            ? {
+                borderWidth: 0,
+                bg: 'var(--pure-white)',
+                color: 'var(--pure-black)',
+                boxShadow: '0 4px 20px -2px var(--white-22), 0 2px 8px 0 color-mix(in srgb, var(--pure-black) 40%, transparent)',
+                ...states(p, { opacity: 0.92, bg: 'var(--neutral-100)', color: 'var(--pure-black)' }, {
+                    bg: 'var(--foreground)',
+                    color: 'var(--background)',
+                    boxShadow: '0 4px 16px -6px color-mix(in srgb, var(--pure-black) 40%, transparent)',
+                    hoverStyle: { bg: 'var(--foreground)', color: 'var(--background)' },
+                }),
+            }
+            : {
+                borderWidth: 1,
+                borderStyle: 'solid',
+                borderColor: 'var(--white-14)',
+                bg: 'color-mix(in srgb, var(--neutral-900) 65%, transparent)',
+                color: 'var(--foreground)',
+                boxShadow: 'inset 0 1px 0 0 var(--white-14), 0 4px 16px -2px color-mix(in srgb, var(--pure-black) 30%, transparent)',
+                ...states(p, { bg: 'color-mix(in srgb, var(--neutral-800) 80%, transparent)', borderColor: 'var(--white-22)', color: 'var(--pure-white)' }, {
+                    borderColor: 'color-mix(in srgb, var(--pure-black) 14%, transparent)',
+                    bg: 'color-mix(in srgb, var(--pure-white) 72%, transparent)',
+                    color: 'var(--foreground)',
+                    boxShadow: '0 2px 10px -4px color-mix(in srgb, var(--pure-black) 18%, transparent)',
+                    hoverStyle: { borderColor: 'color-mix(in srgb, var(--pure-black) 26%, transparent)', bg: 'var(--pure-white)', color: 'var(--foreground)' },
+                }),
+            }), ...p }));
+};
+/** A word in an outline. Not an action — no fill, no weight — so the padding is
+ *  the caller's: a chip and a badge are the same outline at two sizes. It
+ *  brightens on approach only when it is a link. */
+const Chip = ({ render, ...p }) => {
+    const host = useHost(render, p.href, 'span');
+    const link = address(host, p.href);
+    return (_jsx(Text, { ...slot('chip'), render: host, ...BOX, ...SMALL, gap: "$2", borderWidth: 1, borderStyle: "solid", borderColor: "var(--white-08)", rounded: 9999, color: "var(--neutral-300)", bg: "var(--white-03)", ...states(p, link ? { borderColor: 'var(--white-20)', color: 'var(--pure-white)' } : {}, {
+            borderColor: 'var(--border)',
+            bg: 'var(--glass)',
+            color: 'var(--muted-foreground)',
+            ...(link ? { hoverStyle: { borderColor: 'var(--border-strong)', color: 'var(--foreground)' } } : null),
+        }), ...p }));
+};
+/** The quiet link. The hover is the reason it is a component rather than a
+ *  colour at the call site. */
+const More = ({ render, ...p }) => {
+    const host = useHost(render, p.href, 'a');
+    return (_jsx(Text, { ...slot('more'), render: host, ...BOX, ...SMALL, gap: "$2", fontWeight: "500", color: "var(--neutral-300)", ...states(p, { color: 'var(--pure-white)' }, { color: 'var(--muted-foreground)', hoverStyle: { color: 'var(--foreground)' } }), ...p }));
+};
+export { Action, Chip, More };
+//# sourceMappingURL=controls.js.map

package/dist/marketing/controls.js.map

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

package/dist/marketing/document.cjs

@@ -0,0 +1,7 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Document = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Document = ({ html, children }) => html !== undefined ? ((0, jsx_runtime_1.jsx)("div", { "data-slot": "document", dangerouslySetInnerHTML: { __html: html } })) : ((0, jsx_runtime_1.jsx)("div", { "data-slot": "document", children: children }));
+exports.Document = Document;

package/dist/marketing/document.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Document — the body of a long document: a policy, a set of terms, an
+ * explanation.
+ *
+ * Its content is authored as markdown and arrives as bare tags, which no prop
+ * can reach, so the type is `@hanzo/ui/styles/document.css`, keyed on the slot
+ * this stamps and selecting by tag from here down. `html` is a document
+ * rendered from markdown at build time; it goes on this element itself, because
+ * nested one level deeper the whole document would be one flex item and every
+ * paragraph gap would vanish.
+ *
+ * A plain element, not a gui frame: a frame's base would lay the paragraphs out
+ * as its own flex items with its own type, and the sheet is the type here.
+ */
+import type { ReactNode } from 'react';
+export type DocumentProps = {
+    html?: string;
+    children?: ReactNode;
+};
+declare const Document: ({ html, children }: DocumentProps) => import("react").JSX.Element;
+export { Document };
+//# sourceMappingURL=document.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"document.d.ts","sourceRoot":"","sources":["../../src/marketing/document.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;GAaG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,aAAa,GAAG;IAAE,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAAE,CAAA;AAEnE,QAAA,MAAM,QAAQ,uBAAwB,aAAa,gCAKhD,CAAA;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/marketing/document.js

@@ -0,0 +1,5 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+const Document = ({ html, children }) => html !== undefined ? (_jsx("div", { "data-slot": "document", dangerouslySetInnerHTML: { __html: html } })) : (_jsx("div", { "data-slot": "document", children: children }));
+export { Document };
+//# sourceMappingURL=document.js.map

package/dist/marketing/document.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"document.js","sourceRoot":"","sources":["../../src/marketing/document.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAoBZ,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAiB,EAAE,EAAE,CACrD,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACnB,2BAAe,UAAU,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CACxE,CAAC,CAAC,CAAC,CACF,2BAAe,UAAU,YAAE,QAAQ,GAAO,CAC3C,CAAA;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/marketing/host.cjs

@@ -0,0 +1,39 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.address = exports.useHost = void 0;
+const react_1 = require("react");
+const link_1 = require("../backends/gui/link.cjs");
+/**
+ * Where a marketing control's element comes from.
+ *
+ * An explicit `render` wins. Otherwise an internal `href` to a page goes
+ * through the app's router link — @hanzo/ui's link context, `<Link value={NextLink}>` once
+ * at the root — so navigation stays client-side; any other address is a plain
+ * anchor, and no address is the role's own element.
+ *
+ * The router link is made HERE, in the client component, and never handed in
+ * from a page. A server page that passes `render={<NextLink …/>}` sends an
+ * element through the RSC payload, which may arrive as a lazy reference
+ * rather than an element; gui then renders that reference as a component and
+ * the prerender dies on "Element type is invalid … got: object".
+ */
+const useHost = (render, href, own) => {
+    const Link = (0, link_1.useLink)();
+    if (render !== undefined)
+        return render;
+    if (href === undefined)
+        return own;
+    return Link !== 'a' && route(href) ? (0, react_1.createElement)(Link, { href }) : 'a';
+};
+exports.useHost = useHost;
+/** An address the app's router can open: a path on this site that names a
+ *  page. A path that ends in a file extension — `/skill.md`, `/feed.xml` — is a
+ *  file the server hands back as it is, so it stays an anchor; a version in a
+ *  page's name (`/models/…/claude-opus-5.5`) is not an extension. */
+const route = (href) => href.startsWith('/') && !href.startsWith('//') && !/\.[a-z][a-z0-9]{1,4}$/i.test(href.split(/[?#]/)[0]);
+/** Whether a host is an address: an `href`, an anchor, or an element carrying
+ *  one. A control that is a link answers the pointer; a card that is a link
+ *  rests in the link ink the document gives every `<a>`. */
+const address = (host, href) => href !== undefined || host === 'a' || ((0, react_1.isValidElement)(host) && host.props.href !== undefined);
+exports.address = address;

package/dist/marketing/host.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement } from 'react';
+/**
+ * Where a marketing control's element comes from.
+ *
+ * An explicit `render` wins. Otherwise an internal `href` to a page goes
+ * through the app's router link — @hanzo/ui's link context, `<Link value={NextLink}>` once
+ * at the root — so navigation stays client-side; any other address is a plain
+ * anchor, and no address is the role's own element.
+ *
+ * The router link is made HERE, in the client component, and never handed in
+ * from a page. A server page that passes `render={<NextLink …/>}` sends an
+ * element through the RSC payload, which may arrive as a lazy reference
+ * rather than an element; gui then renders that reference as a component and
+ * the prerender dies on "Element type is invalid … got: object".
+ */
+export declare const useHost: <R>(render: R | undefined, href: string | undefined, own: string) => R | string | ReactElement;
+/** Whether a host is an address: an `href`, an anchor, or an element carrying
+ *  one. A control that is a link answers the pointer; a card that is a link
+ *  rests in the link ink the document gives every `<a>`. */
+export declare const address: (host: unknown, href: string | undefined) => boolean;
+//# sourceMappingURL=host.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"host.d.ts","sourceRoot":"","sources":["../../src/marketing/host.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiC,KAAK,YAAY,EAAE,MAAM,OAAO,CAAA;AAIxE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,UAAU,CAAC,GAAG,SAAS,QAAQ,MAAM,GAAG,SAAS,OAAO,MAAM,KAAG,CAAC,GAAG,MAAM,GAAG,YAKtG,CAAA;AAQD;;4DAE4D;AAC5D,eAAO,MAAM,OAAO,SAAU,OAAO,QAAQ,MAAM,GAAG,SAAS,YACwD,CAAA"}

package/dist/marketing/host.js

@@ -0,0 +1,35 @@
+'use client';
+import { createElement, isValidElement } from 'react';
+import { useLink } from '../backends/gui/link.js';
+/**
+ * Where a marketing control's element comes from.
+ *
+ * An explicit `render` wins. Otherwise an internal `href` to a page goes
+ * through the app's router link — @hanzo/ui's link context, `<Link value={NextLink}>` once
+ * at the root — so navigation stays client-side; any other address is a plain
+ * anchor, and no address is the role's own element.
+ *
+ * The router link is made HERE, in the client component, and never handed in
+ * from a page. A server page that passes `render={<NextLink …/>}` sends an
+ * element through the RSC payload, which may arrive as a lazy reference
+ * rather than an element; gui then renders that reference as a component and
+ * the prerender dies on "Element type is invalid … got: object".
+ */
+export const useHost = (render, href, own) => {
+    const Link = useLink();
+    if (render !== undefined)
+        return render;
+    if (href === undefined)
+        return own;
+    return Link !== 'a' && route(href) ? createElement(Link, { href }) : 'a';
+};
+/** An address the app's router can open: a path on this site that names a
+ *  page. A path that ends in a file extension — `/skill.md`, `/feed.xml` — is a
+ *  file the server hands back as it is, so it stays an anchor; a version in a
+ *  page's name (`/models/…/claude-opus-5.5`) is not an extension. */
+const route = (href) => href.startsWith('/') && !href.startsWith('//') && !/\.[a-z][a-z0-9]{1,4}$/i.test(href.split(/[?#]/)[0]);
+/** Whether a host is an address: an `href`, an anchor, or an element carrying
+ *  one. A control that is a link answers the pointer; a card that is a link
+ *  rests in the link ink the document gives every `<a>`. */
+export const address = (host, href) => href !== undefined || host === 'a' || (isValidElement(host) && host.props.href !== undefined);
+//# sourceMappingURL=host.js.map

package/dist/marketing/host.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"host.js","sourceRoot":"","sources":["../../src/marketing/host.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,EAAE,aAAa,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAA;AAExE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA;AAE9C;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,CAAI,MAAqB,EAAE,IAAwB,EAAE,GAAW,EAA6B,EAAE;IACpH,MAAM,IAAI,GAAG,OAAO,EAAE,CAAA;IACtB,IAAI,MAAM,KAAK,SAAS;QAAE,OAAO,MAAM,CAAA;IACvC,IAAI,IAAI,KAAK,SAAS;QAAE,OAAO,GAAG,CAAA;IAClC,OAAO,IAAI,KAAK,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAA;AAC1E,CAAC,CAAA;AAED;;;qEAGqE;AACrE,MAAM,KAAK,GAAG,CAAC,IAAY,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,wBAAwB,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAEvI;;4DAE4D;AAC5D,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,IAAa,EAAE,IAAwB,EAAE,EAAE,CACjE,IAAI,KAAK,SAAS,IAAI,IAAI,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAK,IAAI,CAAC,KAA4B,CAAC,IAAI,KAAK,SAAS,CAAC,CAAA"}

package/dist/marketing/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LogoRow = exports.Quote = exports.Steps = exports.FeatureGrid = exports.Feature = exports.Section = exports.PageHeader = exports.Line = exports.TextLink = exports.Cta = exports.ClosingCta = exports.Faq = exports.Footer = exports.way = exports.termOf = exports.seats = exports.saving = exports.money = exports.merged = exports.charge = exports.audience = exports.Plans = exports.Media = exports.Hero = exports.PageLoading = void 0;
+exports.LogoRow = exports.Quote = exports.Steps = exports.FeatureGrid = exports.Feature = exports.Section = exports.PageHeader = exports.Run = exports.Document = exports.Pager = exports.Pair = exports.Lattice = exports.Reveal = exports.Lift = exports.Cell = exports.Leaf = exports.More = exports.Chip = exports.Action = exports.Claim = exports.Lede = exports.Eyebrow = exports.Title = exports.Display = exports.Line = exports.TextLink = exports.Cta = exports.ClosingCta = exports.Faq = exports.Footer = exports.way = exports.termOf = exports.seats = exports.saving = exports.money = exports.merged = exports.charge = exports.audience = exports.Plans = exports.Media = exports.Hero = exports.PageLoading = void 0;
 /**
  * The marketing surface every Hanzo, Lux and Zoo site shares: the first screen,
  * the plans, the questions, the closing call and the blocks a feature page is
@@ -34,6 +34,29 @@ Object.defineProperty(exports, "Cta", { enumerable: true, get: function () { ret
 Object.defineProperty(exports, "TextLink", { enumerable: true, get: function () { return Cta_1.TextLink; } });
 var type_1 = require("./type.cjs");
 Object.defineProperty(exports, "Line", { enumerable: true, get: function () { return type_1.Line; } });
+Object.defineProperty(exports, "Display", { enumerable: true, get: function () { return type_1.Display; } });
+Object.defineProperty(exports, "Title", { enumerable: true, get: function () { return type_1.Title; } });
+Object.defineProperty(exports, "Eyebrow", { enumerable: true, get: function () { return type_1.Eyebrow; } });
+Object.defineProperty(exports, "Lede", { enumerable: true, get: function () { return type_1.Lede; } });
+Object.defineProperty(exports, "Claim", { enumerable: true, get: function () { return type_1.Claim; } });
+var controls_1 = require("./controls.cjs");
+Object.defineProperty(exports, "Action", { enumerable: true, get: function () { return controls_1.Action; } });
+Object.defineProperty(exports, "Chip", { enumerable: true, get: function () { return controls_1.Chip; } });
+Object.defineProperty(exports, "More", { enumerable: true, get: function () { return controls_1.More; } });
+var surface_1 = require("./surface.cjs");
+Object.defineProperty(exports, "Leaf", { enumerable: true, get: function () { return surface_1.Leaf; } });
+Object.defineProperty(exports, "Cell", { enumerable: true, get: function () { return surface_1.Cell; } });
+Object.defineProperty(exports, "Lift", { enumerable: true, get: function () { return surface_1.Lift; } });
+Object.defineProperty(exports, "Reveal", { enumerable: true, get: function () { return surface_1.Reveal; } });
+Object.defineProperty(exports, "Lattice", { enumerable: true, get: function () { return surface_1.Lattice; } });
+var pair_1 = require("./pair.cjs");
+Object.defineProperty(exports, "Pair", { enumerable: true, get: function () { return pair_1.Pair; } });
+var pager_1 = require("./pager.cjs");
+Object.defineProperty(exports, "Pager", { enumerable: true, get: function () { return pager_1.Pager; } });
+var document_1 = require("./document.cjs");
+Object.defineProperty(exports, "Document", { enumerable: true, get: function () { return document_1.Document; } });
+var run_1 = require("./run.cjs");
+Object.defineProperty(exports, "Run", { enumerable: true, get: function () { return run_1.Run; } });
 var blocks_1 = require("./blocks.cjs");
 Object.defineProperty(exports, "PageHeader", { enumerable: true, get: function () { return blocks_1.PageHeader; } });
 Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return blocks_1.Section; } });

package/dist/marketing/index.d.ts

@@ -11,7 +11,13 @@ export { audience, charge, merged, money, saving, seats, termOf, way, type Audie
 export { Footer, type FooterColumn, type FooterLink, type FooterProps } from './Footer.js';
 export { Faq, type FaqItem, type FaqProps } from './Faq.js';
 export { ClosingCta, type ClosingCtaProps } from './ClosingCta.js';
-export { Cta, TextLink, type CtaProps } from './Cta.js';
-export { Line, type LineProps, type LineSize, type LineTone } from './type.js';
+export { Cta, TextLink, type CtaProps, type TextLinkProps } from './Cta.js';
+export { Line, Display, Title, Eyebrow, Lede, Claim, type LineProps, type LineSize, type LineTone, type RoleProps } from './type.js';
+export { Action, Chip, More, type ControlProps } from './controls.js';
+export { Leaf, Cell, Lift, Reveal, Lattice, type SurfaceProps, type LatticeProps } from './surface.js';
+export { Pair, type PairProps } from './pair.js';
+export { Pager, type PagerProps } from './pager.js';
+export { Document, type DocumentProps } from './document.js';
+export { Run, type RunProps } from './run.js';
 export { PageHeader, Section, Feature, FeatureGrid, Steps, Quote, LogoRow, type Step, type Logo, type PageHeaderProps, type SectionProps, type FeatureProps, type QuoteProps, } from './blocks.js';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAA;AAC3E,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,UAAU,GAChB,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAE,KAAK,YAAY,EAAE,KAAK,UAAU,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAAE,KAAK,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,SAAS,EAAE,KAAK,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AACjI,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,YAAY,EAAE,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAA;AACnG,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,GAAG,EAAE,KAAK,QAAQ,EAAE,MAAM,OAAO,CAAA;AAC1C,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,EACP,KAAK,IAAI,EACT,KAAK,IAAI,EACT,KAAK,eAAe,EACpB,KAAK,YAAY,EACjB,KAAK,YAAY,EACjB,KAAK,UAAU,GAChB,MAAM,UAAU,CAAA"}

package/dist/marketing/index.js

@@ -12,6 +12,12 @@ export { Footer } from './Footer.js';
 export { Faq } from './Faq.js';
 export { ClosingCta } from './ClosingCta.js';
 export { Cta, TextLink } from './Cta.js';
-export { Line } from './type.js';
+export { Line, Display, Title, Eyebrow, Lede, Claim } from './type.js';
+export { Action, Chip, More } from './controls.js';
+export { Leaf, Cell, Lift, Reveal, Lattice } from './surface.js';
+export { Pair } from './pair.js';
+export { Pager } from './pager.js';
+export { Document } from './document.js';
+export { Run } from './run.js';
 export { PageHeader, Section, Feature, FeatureGrid, Steps, Quote, LogoRow, } from './blocks.js';
 //# sourceMappingURL=index.js.map

package/dist/marketing/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAoC,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAwD,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAwD,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAiB,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,IAAI,EAAgD,MAAM,QAAQ,CAAA;AAC3E,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,GAOR,MAAM,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/marketing/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,WAAW,EAAyB,MAAM,eAAe,CAAA;AAClE,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,KAAK,EAAoC,MAAM,SAAS,CAAA;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,EAAwD,MAAM,QAAQ,CAAA;AAC1I,OAAO,EAAE,MAAM,EAAwD,MAAM,UAAU,CAAA;AACvF,OAAO,EAAE,GAAG,EAA+B,MAAM,OAAO,CAAA;AACxD,OAAO,EAAE,UAAU,EAAwB,MAAM,cAAc,CAAA;AAC/D,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAqC,MAAM,OAAO,CAAA;AACxE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAgE,MAAM,QAAQ,CAAA;AACjI,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAqB,MAAM,YAAY,CAAA;AAClE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAwC,MAAM,WAAW,CAAA;AACnG,OAAO,EAAE,IAAI,EAAkB,MAAM,QAAQ,CAAA;AAC7C,OAAO,EAAE,KAAK,EAAmB,MAAM,SAAS,CAAA;AAChD,OAAO,EAAE,QAAQ,EAAsB,MAAM,YAAY,CAAA;AACzD,OAAO,EAAE,GAAG,EAAiB,MAAM,OAAO,CAAA;AAC1C,OAAO,EACL,UAAU,EACV,OAAO,EACP,OAAO,EACP,WAAW,EACX,KAAK,EACL,KAAK,EACL,OAAO,GAOR,MAAM,UAAU,CAAA"}

package/dist/marketing/loose.cjs

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/marketing/loose.d.ts

@@ -0,0 +1,41 @@
+import type { MouseEventHandler, ReactNode, Ref } from 'react';
+/**
+ * The props a marketing component takes from a page.
+ *
+ * gui types a style value against its token table, and a page's own values are
+ * CSS: `var(--text-xs)`, `color-mix(in srgb, var(--primary) 15%, transparent)`,
+ * a unitless leading. gui emits each of them exactly as written, so refusing
+ * them at the type only pushed callers back to `style={{…}}`, which is the
+ * thing these components exist to retire. A value prop also takes a string or a
+ * number, and a state or a breakpoint (`hoverStyle`, `$sm`, `$theme-light`)
+ * takes the same values inside it.
+ *
+ * `Host` is what the element underneath answers to on the web: a button's
+ * `type`, a link's `download`, a tooltip's `title`. gui forwards every prop it
+ * does not style to the DOM node, so these already arrive; they are declared
+ * so a call site does not have to re-declare the component to pass one.
+ */
+export type Loose<P> = {
+    [K in keyof P]?: K extends 'children' | 'render' ? P[K] : K extends `$${string}` | 'hoverStyle' | 'pressStyle' | 'focusStyle' | 'focusVisibleStyle' | 'focusWithinStyle' | 'disabledStyle' | 'enterStyle' | 'exitStyle' ? {
+        [key: string]: unknown;
+    } : NonNullable<P[K]> extends object ? P[K] : P[K] | (string & {}) | number;
+};
+export type Host = {
+    children?: ReactNode;
+    href?: string;
+    target?: string;
+    rel?: string;
+    download?: boolean | string;
+    type?: 'button' | 'submit' | 'reset';
+    title?: string;
+    name?: string;
+    value?: string;
+    disabled?: boolean;
+    tabIndex?: number;
+    onClick?: MouseEventHandler<HTMLElement>;
+    /** The node is whatever `render` names, so the ref takes any element. */
+    ref?: Ref<any>;
+    textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
+    WebkitBackdropFilter?: string;
+};
+//# sourceMappingURL=loose.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"loose.d.ts","sourceRoot":"","sources":["../../src/marketing/loose.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAE9D;;;;;;;;;;;;;;;GAeG;AACH,MAAM,MAAM,KAAK,CAAC,CAAC,IAAI;KACpB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,SAAS,UAAU,GAAG,QAAQ,GAC5C,CAAC,CAAC,CAAC,CAAC,GACJ,CAAC,SAAS,IAAI,MAAM,EAAE,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,GAAG,mBAAmB,GAAG,kBAAkB,GAAG,eAAe,GAAG,YAAY,GAAG,WAAW,GAC3J;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,GAC1B,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,MAAM,GAC9B,CAAC,CAAC,CAAC,CAAC,GACJ,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,MAAM;CACtC,CAAA;AAED,MAAM,MAAM,IAAI,GAAG;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC3B,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAA;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAA;IACxC,yEAAyE;IAEzE,GAAG,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,CAAA;IAC9D,oBAAoB,CAAC,EAAE,MAAM,CAAA;CAC9B,CAAA"}

package/dist/marketing/loose.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=loose.js.map

package/dist/marketing/loose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loose.js","sourceRoot":"","sources":["../../src/marketing/loose.ts"],"names":[],"mappings":""}

package/dist/marketing/pager.cjs

@@ -0,0 +1,22 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pager = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Pager — which of a run of slides is showing, and the way to any other.
+ *
+ * Each page is a pill: six pixels high, a dot at rest and a 24px bar for the
+ * one showing, drawn in the ink of the ground it sits on so it reads on both
+ * themes. The mark is drawn INSIDE a target rather than being one: a 6px mark
+ * sized as the control would be a target nobody can hit, so each button is 24px
+ * square around it (44px tall under a coarse pointer) and the row stays the
+ * width of its marks plus their floors — ten pages fit a 360px phone.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+const Pager = ({ count, index, onSelect, label = (i) => `Go to slide ${i + 1}`, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.XStack, { ...(0, slot_1.slot)('pager'), items: "center", ...p, children: Array.from({ length: count }, (_, i) => {
+        const on = i === index;
+        return ((0, jsx_runtime_1.jsx)(gui_1.View, { render: (0, jsx_runtime_1.jsx)("button", { type: "button" }), "aria-label": label(i), "aria-current": on ? 'true' : undefined, onPress: () => onSelect(i), group: true, containerType: "normal", display: "flex", items: "center", justify: "center", minW: 24, height: 24, px: 9, py: 0, borderWidth: 0, bg: "transparent", cursor: "pointer", $touchable: { height: 44 }, children: (0, jsx_runtime_1.jsx)(gui_1.View, { width: on ? 24 : 6, height: 6, rounded: 9999, bg: on ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: on ? 1 : 0.35, ...(on ? null : { '$group-hover': { opacity: 0.7 } }) }) }, i));
+    }) }));
+exports.Pager = Pager;

package/dist/marketing/pager.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Pager — which of a run of slides is showing, and the way to any other.
+ *
+ * Each page is a pill: six pixels high, a dot at rest and a 24px bar for the
+ * one showing, drawn in the ink of the ground it sits on so it reads on both
+ * themes. The mark is drawn INSIDE a target rather than being one: a 6px mark
+ * sized as the control would be a target nobody can hit, so each button is 24px
+ * square around it (44px tall under a coarse pointer) and the row stays the
+ * width of its marks plus their floors — ten pages fit a 360px phone.
+ */
+import { type XStackProps } from '@hanzo/gui';
+export type PagerProps = Omit<XStackProps, 'children'> & {
+    count: number;
+    /** The page showing. */
+    index: number;
+    onSelect: (index: number) => void;
+    /** What a page is called, for its button's label. */
+    label?: (index: number) => string;
+};
+declare const Pager: ({ count, index, onSelect, label, ...p }: PagerProps) => import("react").JSX.Element;
+export { Pager };
+//# sourceMappingURL=pager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pager.d.ts","sourceRoot":"","sources":["../../src/marketing/pager.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AACH,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,YAAY,CAAA;AAI3D,MAAM,MAAM,UAAU,GAAG,IAAI,CAAC,WAAW,EAAE,UAAU,CAAC,GAAG;IACvD,KAAK,EAAE,MAAM,CAAA;IACb,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,qDAAqD;IACrD,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAA;CAClC,CAAA;AAED,QAAA,MAAM,KAAK,4CAA6E,UAAU,gCAqCjG,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/marketing/pager.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Pager — which of a run of slides is showing, and the way to any other.
+ *
+ * Each page is a pill: six pixels high, a dot at rest and a 24px bar for the
+ * one showing, drawn in the ink of the ground it sits on so it reads on both
+ * themes. The mark is drawn INSIDE a target rather than being one: a 6px mark
+ * sized as the control would be a target nobody can hit, so each button is 24px
+ * square around it (44px tall under a coarse pointer) and the row stays the
+ * width of its marks plus their floors — ten pages fit a 360px phone.
+ */
+import { View, XStack } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+const Pager = ({ count, index, onSelect, label = (i) => `Go to slide ${i + 1}`, ...p }) => (_jsx(XStack, { ...slot('pager'), items: "center", ...p, children: Array.from({ length: count }, (_, i) => {
+        const on = i === index;
+        return (_jsx(View, { render: _jsx("button", { type: "button" }), "aria-label": label(i), "aria-current": on ? 'true' : undefined, onPress: () => onSelect(i), group: true, containerType: "normal", display: "flex", items: "center", justify: "center", minW: 24, height: 24, px: 9, py: 0, borderWidth: 0, bg: "transparent", cursor: "pointer", $touchable: { height: 44 }, children: _jsx(View, { width: on ? 24 : 6, height: 6, rounded: 9999, bg: on ? 'var(--foreground)' : 'var(--muted-foreground)', opacity: on ? 1 : 0.35, ...(on ? null : { '$group-hover': { opacity: 0.7 } }) }) }, i));
+    }) }));
+export { Pager };
+//# sourceMappingURL=pager.js.map

package/dist/marketing/pager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pager.js","sourceRoot":"","sources":["../../src/marketing/pager.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;GASG;AACH,OAAO,EAAE,IAAI,EAAE,MAAM,EAAoB,MAAM,YAAY,CAAA;AAE3D,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAW3C,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,eAAe,CAAC,GAAG,CAAC,EAAE,EAAE,GAAG,CAAC,EAAc,EAAE,EAAE,CAAC,CACrG,KAAC,MAAM,OAAK,IAAI,CAAC,OAAO,CAAC,EAAE,KAAK,EAAC,QAAQ,KAAM,CAAY,YACxD,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;QACtC,MAAM,EAAE,GAAG,CAAC,KAAK,KAAK,CAAA;QACtB,OAAO,CACL,KAAC,IAAI,IAEH,MAAM,EAAE,iBAAQ,IAAI,EAAC,QAAQ,GAAG,gBACpB,KAAK,CAAC,CAAC,CAAC,kBACN,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACrC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,EAC1B,KAAK,QACL,aAAa,EAAC,QAAQ,EACtB,OAAO,EAAC,MAAM,EACd,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,EAAE,EACR,MAAM,EAAE,EAAE,EACV,EAAE,EAAE,CAAC,EACL,EAAE,EAAE,CAAC,EACL,WAAW,EAAE,CAAC,EACd,EAAE,EAAC,aAAa,EAChB,MAAM,EAAC,SAAS,EAChB,UAAU,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,YAE1B,KAAC,IAAI,IACH,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAClB,MAAM,EAAE,CAAC,EACT,OAAO,EAAE,IAAI,EACb,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,yBAAyB,EACxD,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,KAClB,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,cAAc,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EAAE,CAAC,GACtD,IA1BG,CAAC,CA2BD,CACR,CAAA;IACH,CAAC,CAAC,GACK,CACV,CAAA;AAED,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/dist/marketing/pair.cjs

@@ -0,0 +1,21 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pair = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Pair — the two controls that close a section: stacked on a phone, side by
+ * side from 640.
+ *
+ * A grid, not a row of flex items. A row of two is a track list, and
+ * `gridAutoFlow="column"` says the direction once; the stacked case needs
+ * nothing said at all, because a grid is already one column. Each control keeps
+ * its own width and the pair centres as a whole.
+ *
+ * `render` accepts an element, so an entrance can be the pair rather than wrap
+ * it: `render={<motion.div {...reveal} />}`.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+const Pair = ({ render, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.View, { ...(0, slot_1.slot)('pair'), ...(render === undefined ? null : { render }), display: "grid", gap: "$4", justifyItems: "center", justify: "center", items: "center", $sm: { gridAutoFlow: 'column' }, ...p }));
+exports.Pair = Pair;

package/dist/marketing/pair.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Pair — the two controls that close a section: stacked on a phone, side by
+ * side from 640.
+ *
+ * A grid, not a row of flex items. A row of two is a track list, and
+ * `gridAutoFlow="column"` says the direction once; the stacked case needs
+ * nothing said at all, because a grid is already one column. Each control keeps
+ * its own width and the pair centres as a whole.
+ *
+ * `render` accepts an element, so an entrance can be the pair rather than wrap
+ * it: `render={<motion.div {...reveal} />}`.
+ */
+import { type ViewProps } from '@hanzo/gui';
+import type { ReactNode } from 'react';
+import type { Loose } from './loose.js';
+export type PairProps = Loose<Omit<ViewProps, 'render' | 'children'>> & {
+    render?: ViewProps['render'];
+    children?: ReactNode;
+};
+declare const Pair: ({ render, ...p }: PairProps) => import("react").JSX.Element;
+export { Pair };
+//# sourceMappingURL=pair.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"pair.d.ts","sourceRoot":"","sources":["../../src/marketing/pair.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;GAWG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,QAAQ,GAAG,UAAU,CAAC,CAAC,GAAG;IACtE,MAAM,CAAC,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAA;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,IAAI,qBAAsB,SAAS,gCAYxC,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}