@hanzo/ui 8.27.46 → 8.27.47

package/dist/gallery.html

@@ -1,4 +1,4 @@
-<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.27.46</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
+<!doctype html><html lang="en" class="t_dark"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>@hanzo/ui 8.27.47</title><style>/* @hanzo/ui — generated by scripts/gen-css.mjs. Do not edit. */
 :root { --hanzo-ui-styles: 1; }
 /* Hanzo Design System — the entry point. Import THIS one file.
  *
@@ -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;
   }

package/dist/marketing/Cta.cjs

@@ -19,8 +19,14 @@ const slot_1 = require("../backends/gui/slot.cjs");
 const Cta = ({ href, children, quiet = false, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Anchor, { ...(0, slot_1.slot)(quiet ? 'cta-quiet' : 'cta'), href: href, display: "inline-flex", items: "center", justify: "center", minH: 44, px: "$5", rounded: "$4", borderWidth: 1, borderColor: quiet ? '$borderColor' : 'transparent', bg: quiet ? 'transparent' : 'var(--primary)', color: quiet ? '$ink' : 'var(--primary-foreground)', fontSize: "$4", fontWeight: "500", text: "center", textDecorationLine: "none", hoverStyle: quiet ? { bg: '$hover' } : { bg: 'var(--primary-hover)' }, ...p, children: children }));
 exports.Cta = Cta;
 /**
- * TextLink — a link inside a sentence: the surrounding ink, underlined.
- * `Cta` is the control; this is the word.
+ * TextLink — a link inside a sentence: full ink and an underline, because in
+ * quiet text colour alone does not say "link", and the sentence's own face and
+ * size. `Cta` is the control; this is the word. A button inside such a sentence (no `href`) reads as one of its
+ * links: no box, and the sentence's own face, which @hanzo/design's base hands
+ * every button.
  */
-const TextLink = ({ href, children, ...p }) => ((0, jsx_runtime_1.jsx)(gui_1.Anchor, { ...(0, slot_1.slot)('text-link'), href: href, color: "$ink", textDecorationLine: "underline", style: { textUnderlineOffset: 3 }, ...p, children: children }));
+/** The sentence's own type, which gui's Text would otherwise replace with its
+ *  body size. */
+const WORD = { fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', lineHeight: 'inherit', letterSpacing: 'inherit' };
+const TextLink = ({ href, children, ...p }) => href !== undefined ? ((0, jsx_runtime_1.jsx)(gui_1.Anchor, { ...(0, slot_1.slot)('text-link'), href: href, ...WORD, color: "$ink", textDecorationLine: "underline", style: { textUnderlineOffset: 3 }, ...p, children: children })) : ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.slot)('text-link'), render: (0, jsx_runtime_1.jsx)("button", { type: "button" }), p: 0, borderWidth: 0, bg: "transparent", ...WORD, color: "$ink", textDecorationLine: "underline", cursor: "pointer", style: { textUnderlineOffset: 3 }, ...p, children: children }));
 exports.TextLink = TextLink;

package/dist/marketing/Cta.d.ts

@@ -20,10 +20,12 @@ export type CtaProps = Omit<ComponentProps<typeof Anchor>, 'children' | 'href'>
 };
 declare const Cta: ({ href, children, quiet, ...p }: CtaProps) => import("react").JSX.Element;
 export { Cta };
-/**
- * TextLink — a link inside a sentence: the surrounding ink, underlined.
- * `Cta` is the control; this is the word.
- */
-declare const TextLink: ({ href, children, ...p }: Omit<CtaProps, 'quiet'>) => import("react").JSX.Element;
+export type TextLinkProps = Omit<CtaProps, 'quiet' | 'href'> & {
+    /** Where it goes. Without one it is a button that reads as a link — "try
+     *  again", "change address" — and `onPress` is what it does. */
+    href?: string;
+    disabled?: boolean;
+};
+declare const TextLink: ({ href, children, ...p }: TextLinkProps) => import("react").JSX.Element;
 export { TextLink };
 //# sourceMappingURL=Cta.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cta.d.ts","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACnC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,CAAA;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,GAAG,oCAA6C,QAAQ,gCAuB7D,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AAEd;;;GAGG;AACH,QAAA,MAAM,QAAQ,6BAA8B,IAAI,CAAC,QAAQ,EAAE,OAAO,CAAC,gCAWlE,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"Cta.d.ts","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAQ,MAAM,YAAY,CAAA;AAEzC,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItD,MAAM,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,GAAG;IAChF,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,SAAS,CAAA;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,QAAA,MAAM,GAAG,oCAA6C,QAAQ,gCAuB7D,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AAEd,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAC,GAAG;IAC7D;oEACgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAaD,QAAA,MAAM,QAAQ,6BAA8B,aAAa,gCA6BtD,CAAA;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/marketing/Cta.js

@@ -11,14 +11,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * The 44px floor is `minH`, not padding, so a two-line label stays balanced.
  */
-import { Anchor } from '@hanzo/gui';
+import { Anchor, Text } from '@hanzo/gui';
 import { slot } from '../backends/gui/slot.js';
 const Cta = ({ href, children, quiet = false, ...p }) => (_jsx(Anchor, { ...slot(quiet ? 'cta-quiet' : 'cta'), href: href, display: "inline-flex", items: "center", justify: "center", minH: 44, px: "$5", rounded: "$4", borderWidth: 1, borderColor: quiet ? '$borderColor' : 'transparent', bg: quiet ? 'transparent' : 'var(--primary)', color: quiet ? '$ink' : 'var(--primary-foreground)', fontSize: "$4", fontWeight: "500", text: "center", textDecorationLine: "none", hoverStyle: quiet ? { bg: '$hover' } : { bg: 'var(--primary-hover)' }, ...p, children: children }));
 export { Cta };
 /**
- * TextLink — a link inside a sentence: the surrounding ink, underlined.
- * `Cta` is the control; this is the word.
+ * TextLink — a link inside a sentence: full ink and an underline, because in
+ * quiet text colour alone does not say "link", and the sentence's own face and
+ * size. `Cta` is the control; this is the word. A button inside such a sentence (no `href`) reads as one of its
+ * links: no box, and the sentence's own face, which @hanzo/design's base hands
+ * every button.
  */
-const TextLink = ({ href, children, ...p }) => (_jsx(Anchor, { ...slot('text-link'), href: href, color: "$ink", textDecorationLine: "underline", style: { textUnderlineOffset: 3 }, ...p, children: children }));
+/** The sentence's own type, which gui's Text would otherwise replace with its
+ *  body size. */
+const WORD = { fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', lineHeight: 'inherit', letterSpacing: 'inherit' };
+const TextLink = ({ href, children, ...p }) => href !== undefined ? (_jsx(Anchor, { ...slot('text-link'), href: href, ...WORD, color: "$ink", textDecorationLine: "underline", style: { textUnderlineOffset: 3 }, ...p, children: children })) : (_jsx(Text, { ...slot('text-link'), render: _jsx("button", { type: "button" }), p: 0, borderWidth: 0, bg: "transparent", ...WORD, color: "$ink", textDecorationLine: "underline", cursor: "pointer", style: { textUnderlineOffset: 3 }, ...p, children: children }));
 export { TextLink };
 //# sourceMappingURL=Cta.js.map

package/dist/marketing/Cta.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cta.js","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AAGnC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAU3C,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,CAAC,EAAY,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,OACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,EACrC,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,EAAE,EACR,EAAE,EAAC,IAAI,EACP,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,EACnD,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,EAC5C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,2BAA2B,EACnD,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,KAAK,EAChB,IAAI,EAAC,QAAQ,EACb,kBAAkB,EAAC,MAAM,EACzB,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,sBAAsB,EAAE,KAChE,CAAY,YAEhB,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AAEd;;;GAGG;AACH,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,EAA2B,EAAE,EAAE,CAAC,CACtE,KAAC,MAAM,OACD,IAAI,CAAC,WAAW,CAAC,EACrB,IAAI,EAAE,IAAI,EACV,KAAK,EAAC,MAAM,EACZ,kBAAkB,EAAC,WAAW,EAC9B,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAC,EAAE,KAC5B,CAAY,YAEhB,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"Cta.js","sourceRoot":"","sources":["../../src/marketing/Cta.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;;AAEZ;;;;;;;;;;GAUG;AACH,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAIzC,OAAO,EAAE,IAAI,EAAE,MAAM,sBAAsB,CAAA;AAU3C,MAAM,GAAG,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,CAAC,EAAY,EAAE,EAAE,CAAC,CACjE,KAAC,MAAM,OACD,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,EACrC,IAAI,EAAE,IAAI,EACV,OAAO,EAAC,aAAa,EACrB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAE,EAAE,EACR,EAAE,EAAC,IAAI,EACP,OAAO,EAAC,IAAI,EACZ,WAAW,EAAE,CAAC,EACd,WAAW,EAAE,KAAK,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,aAAa,EACnD,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,EAC5C,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,2BAA2B,EACnD,QAAQ,EAAC,IAAI,EACb,UAAU,EAAC,KAAK,EAChB,IAAI,EAAC,QAAQ,EACb,kBAAkB,EAAC,MAAM,EACzB,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,sBAAsB,EAAE,KAChE,CAAY,YAEhB,QAAQ,GACF,CACV,CAAA;AAED,OAAO,EAAE,GAAG,EAAE,CAAA;AASd;;;;;;GAMG;AACH;iBACiB;AACjB,MAAM,IAAI,GAAG,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAW,CAAA;AAE5I,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAiB,EAAE,EAAE,CAC3D,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CACnB,KAAC,MAAM,OACD,IAAI,CAAC,WAAW,CAAC,EACrB,IAAI,EAAE,IAAI,KACL,IAAe,EACpB,KAAK,EAAC,MAAM,EACZ,kBAAkB,EAAC,WAAW,EAC9B,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAC,EAAE,KAC5B,CAAY,YAEhB,QAAQ,GACF,CACV,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,OACC,IAAI,CAAC,WAAW,CAAC,EACrB,MAAM,EAAE,iBAAQ,IAAI,EAAC,QAAQ,GAAG,EAChC,CAAC,EAAE,CAAC,EACJ,WAAW,EAAE,CAAC,EACd,EAAE,EAAC,aAAa,KACX,IAAe,EACpB,KAAK,EAAC,MAAM,EACZ,kBAAkB,EAAC,WAAW,EAC9B,MAAM,EAAC,SAAS,EAChB,KAAK,EAAE,EAAE,mBAAmB,EAAE,CAAC,EAAE,KAC5B,CAAY,YAEhB,QAAQ,GACJ,CACR,CAAA;AAEH,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/dist/marketing/controls.cjs

@@ -0,0 +1,112 @@
+'use client';"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.More = exports.Chip = exports.Action = void 0;
+const jsx_runtime_1 = require("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.
+ */
+const gui_1 = require("@hanzo/gui");
+const slot_1 = require("../backends/gui/slot.cjs");
+const host_1 = require("./host.cjs");
+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 = (0, host_1.useHost)(render, p.href, 'a');
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.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 }));
+};
+exports.Action = Action;
+/** 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 = (0, host_1.useHost)(render, p.href, 'span');
+    const link = (0, host_1.address)(host, p.href);
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.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 }));
+};
+exports.Chip = Chip;
+/** 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 = (0, host_1.useHost)(render, p.href, 'a');
+    return ((0, jsx_runtime_1.jsx)(gui_1.Text, { ...(0, slot_1.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 }));
+};
+exports.More = More;

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;