@hanzo/ui 8.27.46 → 8.27.47

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"}

package/dist/marketing/pair.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "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} />}`.
+ */
+import { View } from '@hanzo/gui';
+import { slot } from '../backends/gui/slot.js';
+const Pair = ({ render, ...p }) => (_jsx(View, { ...slot('pair'), ...(render === undefined ? null : { render }), display: "grid", gap: "$4", justifyItems: "center", justify: "center", items: "center", $sm: { gridAutoFlow: 'column' }, ...p }));
+export { Pair };
+//# sourceMappingURL=pair.js.map

package/dist/marketing/pair.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pair.js","sourceRoot":"","sources":["../../src/marketing/pair.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;GAWG;AACH,OAAO,EAAE,IAAI,EAAkB,MAAM,YAAY,CAAA;AAGjD,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAQ3C,MAAM,IAAI,GAAG,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAa,EAAE,EAAE,CAAC,CAC5C,KAAC,IAAI,OACC,IAAI,CAAC,MAAM,CAAC,KACZ,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAC9C,OAAO,EAAC,MAAM,EACd,GAAG,EAAC,IAAI,EACR,YAAY,EAAC,QAAQ,EACrB,OAAO,EAAC,QAAQ,EAChB,KAAK,EAAC,QAAQ,EACd,GAAG,EAAE,EAAE,YAAY,EAAE,QAAQ,EAAE,KAC1B,CAAY,GACjB,CACH,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,CAAA"}

package/dist/marketing/run.cjs

@@ -0,0 +1,28 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Run = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+/**
+ * Run — a light crosses a set of things that are all true at once.
+ *
+ * Prose states invariants one at a time, and a reader has finished the first
+ * before the fourth exists; a run lays the set out and sweeps it, so several
+ * are lit together and none is ever "next". Each DIRECT child says where it
+ * stands with `data-beat={n}`, and is lit `n` steps after the first:
+ *
+ *   <Run step={0.31}>{steps.map((s, i) => <Chip key={s} data-beat={i}>{s}</Chip>)}</Run>
+ *
+ * `step` is the delay per beat, short against the 5.4s cycle so several are lit
+ * at once; an ORDERED set takes a step near cycle/n, and the order is the
+ * content's to say, so the caller says it. `rest` is the ink the sweep returns
+ * to, because the animation owns `color` for the whole cycle.
+ *
+ * The keyframe is `@hanzo/ui/styles/motion.css`, keyed on `data-motion`, and
+ * reduced motion stills it. The two knobs ride this element's own custom
+ * properties, which no gui prop names. Colour and edge only, so it composes
+ * with an entrance that owns transform and opacity.
+ */
+const gui_1 = require("@hanzo/gui");
+const Run = ({ step = 0.22, rest, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.View, { "data-motion": "run", ...p, style: { '--run-step': `${step}s`, ...(rest ? { '--run-rest': rest } : null) } }));
+exports.Run = Run;

package/dist/marketing/run.d.ts

@@ -0,0 +1,33 @@
+/**
+ * Run — a light crosses a set of things that are all true at once.
+ *
+ * Prose states invariants one at a time, and a reader has finished the first
+ * before the fourth exists; a run lays the set out and sweeps it, so several
+ * are lit together and none is ever "next". Each DIRECT child says where it
+ * stands with `data-beat={n}`, and is lit `n` steps after the first:
+ *
+ *   <Run step={0.31}>{steps.map((s, i) => <Chip key={s} data-beat={i}>{s}</Chip>)}</Run>
+ *
+ * `step` is the delay per beat, short against the 5.4s cycle so several are lit
+ * at once; an ORDERED set takes a step near cycle/n, and the order is the
+ * content's to say, so the caller says it. `rest` is the ink the sweep returns
+ * to, because the animation owns `color` for the whole cycle.
+ *
+ * The keyframe is `@hanzo/ui/styles/motion.css`, keyed on `data-motion`, and
+ * reduced motion stills it. The two knobs ride this element's own custom
+ * properties, which no gui prop names. Colour and edge only, so it composes
+ * with an entrance that owns transform and opacity.
+ */
+import { type ViewProps } from '@hanzo/gui';
+import type { ReactNode } from 'react';
+import type { Loose } from './loose.js';
+export type RunProps = Loose<Omit<ViewProps, 'children'>> & {
+    children?: ReactNode;
+    /** Seconds between one beat and the next. */
+    step?: number;
+    /** The ink a lit child returns to. */
+    rest?: string;
+};
+declare const Run: ({ step, rest, ...p }: RunProps) => import("react").JSX.Element;
+export { Run };
+//# sourceMappingURL=run.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"run.d.ts","sourceRoot":"","sources":["../../src/marketing/run.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AACjD,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,GAAG;IAC1D,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,sCAAsC;IACtC,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,QAAA,MAAM,GAAG,yBAAiC,QAAQ,gCAMjD,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/dist/marketing/run.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Run — a light crosses a set of things that are all true at once.
+ *
+ * Prose states invariants one at a time, and a reader has finished the first
+ * before the fourth exists; a run lays the set out and sweeps it, so several
+ * are lit together and none is ever "next". Each DIRECT child says where it
+ * stands with `data-beat={n}`, and is lit `n` steps after the first:
+ *
+ *   <Run step={0.31}>{steps.map((s, i) => <Chip key={s} data-beat={i}>{s}</Chip>)}</Run>
+ *
+ * `step` is the delay per beat, short against the 5.4s cycle so several are lit
+ * at once; an ORDERED set takes a step near cycle/n, and the order is the
+ * content's to say, so the caller says it. `rest` is the ink the sweep returns
+ * to, because the animation owns `color` for the whole cycle.
+ *
+ * The keyframe is `@hanzo/ui/styles/motion.css`, keyed on `data-motion`, and
+ * reduced motion stills it. The two knobs ride this element's own custom
+ * properties, which no gui prop names. Colour and edge only, so it composes
+ * with an entrance that owns transform and opacity.
+ */
+import { View } from '@hanzo/gui';
+const Run = ({ step = 0.22, rest, ...p }) => (_jsx(View, { "data-motion": "run", ...p, style: { '--run-step': `${step}s`, ...(rest ? { '--run-rest': rest } : null) } }));
+export { Run };
+//# sourceMappingURL=run.js.map

package/dist/marketing/run.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"run.js","sourceRoot":"","sources":["../../src/marketing/run.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,IAAI,EAAkB,MAAM,YAAY,CAAA;AAajD,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAE,IAAI,EAAE,GAAG,CAAC,EAAY,EAAE,EAAE,CAAC,CACrD,KAAC,IAAI,mBACS,KAAK,KACZ,CAAY,EACjB,KAAK,EAAE,EAAE,YAAY,EAAE,GAAG,IAAI,GAAG,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,EAAmB,GAC/F,CACH,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA"}

package/dist/marketing/surface.cjs

@@ -0,0 +1,76 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Lattice = exports.Reveal = exports.Lift = exports.Cell = exports.Leaf = void 0;
+const jsx_runtime_1 = require("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.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+const host_1 = require("./host.cjs");
+/** 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 = (0, host_1.useHost)(render, p.href, 'div');
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.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 }));
+};
+exports.Leaf = Leaf;
+/** 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 = (0, host_1.useHost)(render, p.href, 'div');
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.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 }));
+};
+exports.Cell = Cell;
+/** 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 }) => ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.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 }));
+exports.Lift = Lift;
+/** 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 }) => ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.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 }));
+exports.Reveal = Reveal;
+/** 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 ((0, jsx_runtime_1.jsx)(gui_1.View, { ...(0, slot_1.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 }));
+};
+exports.Lattice = Lattice;

package/dist/marketing/surface.d.ts

@@ -0,0 +1,59 @@
+/**
+ * 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 { type TextProps, type ViewProps } from '@hanzo/gui';
+import type { Host, Loose } from './loose.js';
+export type SurfaceProps = Loose<Omit<TextProps, 'render' | 'children'>> & Host & {
+    render?: TextProps['render'];
+};
+/** 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. */
+declare const Leaf: ({ render, ...p }: SurfaceProps) => import("react").JSX.Element;
+/** 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. */
+declare const Cell: ({ render, ...p }: SurfaceProps) => import("react").JSX.Element;
+/** 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. */
+declare const Lift: ({ render, step, ...p }: SurfaceProps & {
+    step?: boolean;
+}) => import("react").JSX.Element;
+/** 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. */
+declare const Reveal: ({ render, ...p }: SurfaceProps) => import("react").JSX.Element;
+export type LatticeProps = Loose<Omit<ViewProps, 'children'>> & {
+    /** The pitch of the rule, in px. */
+    size?: number;
+    /** How much of the foreground ink each line takes, 0..1. */
+    opacity?: number;
+};
+/** 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. */
+declare const Lattice: ({ size, opacity, ...p }: LatticeProps) => import("react").JSX.Element;
+export { Leaf, Cell, Lift, Reveal, Lattice };
+//# sourceMappingURL=surface.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"surface.d.ts","sourceRoot":"","sources":["../../src/marketing/surface.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,OAAO,EAAc,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAA;AAGvE,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;AAaH;;4BAE4B;AAC5B,QAAA,MAAM,IAAI,qBAAsB,YAAY,gCAsB3C,CAAA;AAED;;;gFAGgF;AAChF,QAAA,MAAM,IAAI,qBAAsB,YAAY,gCAiB3C,CAAA;AAED;;qBAEqB;AACrB,QAAA,MAAM,IAAI,2BAA6C,YAAY,GAAG;IAAE,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,gCAavF,CAAA;AAED;;wCAEwC;AACxC,QAAA,MAAM,MAAM,qBAA+B,YAAY,gCActD,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,GAAG;IAC9D,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,4DAA4D;IAC5D,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED;;wCAEwC;AACxC,QAAA,MAAM,OAAO,4BAAyC,YAAY,gCAWjE,CAAA;AAED,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,CAAA"}