@hanzo/ui 8.4.13 → 8.5.1

package/dist/primitives/VideoPlayer.cjs

@@ -0,0 +1,8 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoPlayer = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var video_1 = require("../backends/gui/video.cjs");
+Object.defineProperty(exports, "VideoPlayer", { enumerable: true, get: function () { return video_1.VideoPlayer; } });

package/dist/primitives/VideoPlayer.d.ts

@@ -0,0 +1,2 @@
+export { VideoPlayer } from '../backends/gui/video.js';
+//# sourceMappingURL=VideoPlayer.d.ts.map

package/dist/primitives/VideoPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../src/primitives/VideoPlayer.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/primitives/VideoPlayer.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { VideoPlayer } from '../backends/gui/video.js';
+//# sourceMappingURL=VideoPlayer.js.map

package/dist/primitives/VideoPlayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"VideoPlayer.js","sourceRoot":"","sources":["../../src/primitives/VideoPlayer.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/primitives/YouTubeEmbed.cjs

@@ -0,0 +1,8 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YouTubeEmbed = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var video_1 = require("../backends/gui/video.cjs");
+Object.defineProperty(exports, "YouTubeEmbed", { enumerable: true, get: function () { return video_1.YouTubeEmbed; } });

package/dist/primitives/YouTubeEmbed.d.ts

@@ -0,0 +1,2 @@
+export { YouTubeEmbed } from '../backends/gui/video.js';
+//# sourceMappingURL=YouTubeEmbed.d.ts.map

package/dist/primitives/YouTubeEmbed.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"YouTubeEmbed.d.ts","sourceRoot":"","sources":["../../src/primitives/YouTubeEmbed.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/primitives/YouTubeEmbed.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { YouTubeEmbed } from '../backends/gui/video.js';
+//# sourceMappingURL=YouTubeEmbed.js.map

package/dist/primitives/YouTubeEmbed.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"YouTubeEmbed.js","sourceRoot":"","sources":["../../src/primitives/YouTubeEmbed.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/primitives/useLink.cjs

@@ -0,0 +1,8 @@
+'use client';"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLink = void 0;
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+var link_1 = require("../backends/gui/link.cjs");
+Object.defineProperty(exports, "useLink", { enumerable: true, get: function () { return link_1.useLink; } });

package/dist/primitives/useLink.d.ts

@@ -0,0 +1,2 @@
+export { useLink } from '../backends/gui/link.js';
+//# sourceMappingURL=useLink.d.ts.map

package/dist/primitives/useLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLink.d.ts","sourceRoot":"","sources":["../../src/primitives/useLink.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/primitives/useLink.js

@@ -0,0 +1,5 @@
+// GENERATED by scripts/gen-primitives.mjs — do not edit. Per-member entrypoint
+// for hosts that modularize `@hanzo/ui` imports. Source of truth:
+// src/backends/gui/index.ts. Re-run: node scripts/gen-primitives.mjs
+export { useLink } from '../backends/gui/link.js';
+//# sourceMappingURL=useLink.js.map

package/dist/primitives/useLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLink.js","sourceRoot":"","sources":["../../src/primitives/useLink.tsx"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,kEAAkE;AAClE,qEAAqE;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAA"}

package/dist/product/menu/items.d.ts

@@ -31,7 +31,7 @@ export type MenuItemSpec = {
     description?: string;
     /** Right-aligned shortcut / hint text (e.g. "⌘K"). */
     shortcut?: string;
-    /** Renders a right check + purple tint. */
+    /** Renders a right check + the ACCENT_SOFT row wash. */
     selected?: boolean;
     disabled?: boolean;
     /** Danger styling (red label/icon). */

package/dist/product/menu/items.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../../src/product/menu/items.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAcrD,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,SAAS,IAAI,CAAA;AAsB1B,MAAM,MAAM,YAAY,GACpB;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kBAAkB;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,GACD;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAGlD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAc,EACd,SAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IACtC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,2CA0BA;AAKD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,WAAmB,EACnB,UAAkB,EAClB,QAAQ,GACT,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,eAAe,CAAC,2CAkElF;AAGD,wBAAgB,iBAAiB,4CAEhC;AAGD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAclE;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,IAAI,GAAG,SAAS,CAgBpF"}
+{"version":3,"file":"items.d.ts","sourceRoot":"","sources":["../../../src/product/menu/items.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAcrD,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,SAAS,IAAI,CAAA;AAsB1B,MAAM,MAAM,YAAY,GACpB;IACE,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,kBAAkB;IAClB,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,8DAA8D;IAC9D,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,wDAAwD;IACxD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,2DAA2D;IAC3D,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,GACD;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAA;AAGlD,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,QAAc,EACd,SAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;IACtC,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7C,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB,2CA0BA;AAKD,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,QAAgB,EAChB,QAAgB,EAChB,WAAmB,EACnB,UAAkB,EAClB,QAAQ,GACT,EAAE,IAAI,CAAC,OAAO,CAAC,YAAY,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,eAAe,CAAC,2CAkElF;AAGD,wBAAgB,iBAAiB,4CAEhC;AAGD,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAclE;AAGD,wBAAgB,eAAe,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE,KAAK,CAAC,EAAE,MAAM,IAAI,GAAG,SAAS,CAgBpF"}

package/dist/styles.css

@@ -1341,6 +1341,107 @@
    an indirection through a name that does not exist, with a hardcoded shadow
    behind it, next to a design system that publishes real ones. */
 
+/* ── Prose ───────────────────────────────────────────────────────────────────
+   What `<ApplyTypography>` turns on: running text — a heading, a byline, a
+   paragraph, a list — styled by TAG, so a block of authored content needs no
+   class on any element inside it. That is the whole point; the content comes
+   from a CMS or an .mdx file and cannot carry classes.
+
+   The 5.x line did this with a tailwind typography plugin, so the sizes lived
+   in a plugin config and arrived as `typography typography-sm` utilities. Those
+   are gone with the engine. These are the same sizes as real rules on the
+   @hanzo/design ramp, which is where every other surface already reads them —
+   so prose and a Button now round to the same scale instead of two.
+
+   Scoped under `.hz-prose` and applied with `>` only one level down, so a nested
+   component keeps its own type. */
+.hz-prose {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+  color: var(--foreground);
+  font-family: var(--font-sans), sans-serif;
+  font-size: var(--text-base);
+  line-height: var(--leading-base, var(--leading-normal));
+}
+
+.hz-prose > h1, .hz-prose > h2, .hz-prose > h3,
+.hz-prose > h4, .hz-prose > h5, .hz-prose > h6 {
+  font-family: var(--font-display, var(--font-sans)), sans-serif;
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  margin: 0;
+}
+
+.hz-prose > h1 { font-size: var(--text-4xl) }
+.hz-prose > h2 { font-size: var(--text-3xl) }
+.hz-prose > h3 { font-size: var(--text-2xl) }
+.hz-prose > h4 { font-size: var(--text-xl) }
+.hz-prose > h5 { font-size: var(--text-lg) }
+/* h6 is the byline rung: heading TAG, body weight and colour, because that is
+   what a byline is — subordinate text that happens to sit in the heading
+   stack. */
+.hz-prose > h6 {
+  font-size: var(--text-base);
+  font-weight: 400;
+  color: var(--muted-foreground);
+}
+
+.hz-prose > p { margin: 0 }
+.hz-prose > ul, .hz-prose > ol { margin: 0; padding-inline-start: 1.5em }
+.hz-prose li { margin-block: 0.25em }
+.hz-prose > blockquote {
+  margin: 0;
+  padding-inline-start: 1em;
+  border-inline-start: 2px solid var(--border);
+  color: var(--muted-foreground);
+}
+.hz-prose code {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 0.9em;
+}
+.hz-prose a { color: inherit; text-decoration: underline }
+.hz-prose strong { font-weight: 600 }
+.hz-prose :where(img, video) { max-width: 100%; height: auto }
+
+/* The named rungs. `responsive` is the default and is the only one that moves
+   with the viewport — a t-shirt size is a DECISION, so it stays put. */
+.hz-prose-sm { font-size: var(--text-sm); gap: var(--space-3, 0.75rem) }
+.hz-prose-sm > h1 { font-size: var(--text-3xl) }
+.hz-prose-sm > h2 { font-size: var(--text-2xl) }
+.hz-prose-sm > h3 { font-size: var(--text-xl) }
+.hz-prose-sm > p  { font-size: var(--text-sm) }
+
+.hz-prose-lg { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
+.hz-prose-lg > h1 { font-size: var(--text-5xl) }
+.hz-prose-lg > h2 { font-size: var(--text-4xl) }
+.hz-prose-lg > h3 { font-size: var(--text-3xl) }
+.hz-prose-lg > p  { font-size: var(--text-lg) }
+
+.hz-prose-xl { font-size: var(--text-lg); gap: var(--space-6, 1.5rem) }
+.hz-prose-xl > h1 { font-size: var(--text-6xl) }
+.hz-prose-xl > h2 { font-size: var(--text-5xl) }
+.hz-prose-xl > h3 { font-size: var(--text-4xl) }
+.hz-prose-xl > p  { font-size: var(--text-lg) }
+
+/* Responsive: start at the small rung and climb. Written as min-width so the
+   phone case is the unprefixed one and needs no query at all. */
+@media (min-width: 640px) {
+  .hz-prose-responsive { gap: var(--space-4, 1rem) }
+}
+@media (min-width: 1024px) {
+  .hz-prose-responsive { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
+  .hz-prose-responsive > h1 { font-size: var(--text-5xl) }
+  .hz-prose-responsive > h2 { font-size: var(--text-4xl) }
+  .hz-prose-responsive > h3 { font-size: var(--text-3xl) }
+}
+@media (min-width: 1280px) {
+  .hz-prose-responsive { gap: var(--space-6, 1.5rem) }
+  .hz-prose-responsive > h1 { font-size: var(--text-6xl) }
+  .hz-prose-responsive > h2 { font-size: var(--text-5xl) }
+}
+
 /* Glass — the material floating chrome is made of, and the ladder it stands on.
  *
  *   import '@hanzo/ui/glass.css'      // this slice alone

package/dist/theme.css

@@ -1339,6 +1339,107 @@
    an indirection through a name that does not exist, with a hardcoded shadow
    behind it, next to a design system that publishes real ones. */
 
+/* ── Prose ───────────────────────────────────────────────────────────────────
+   What `<ApplyTypography>` turns on: running text — a heading, a byline, a
+   paragraph, a list — styled by TAG, so a block of authored content needs no
+   class on any element inside it. That is the whole point; the content comes
+   from a CMS or an .mdx file and cannot carry classes.
+
+   The 5.x line did this with a tailwind typography plugin, so the sizes lived
+   in a plugin config and arrived as `typography typography-sm` utilities. Those
+   are gone with the engine. These are the same sizes as real rules on the
+   @hanzo/design ramp, which is where every other surface already reads them —
+   so prose and a Button now round to the same scale instead of two.
+
+   Scoped under `.hz-prose` and applied with `>` only one level down, so a nested
+   component keeps its own type. */
+.hz-prose {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3, 0.75rem);
+  color: var(--foreground);
+  font-family: var(--font-sans), sans-serif;
+  font-size: var(--text-base);
+  line-height: var(--leading-base, var(--leading-normal));
+}
+
+.hz-prose > h1, .hz-prose > h2, .hz-prose > h3,
+.hz-prose > h4, .hz-prose > h5, .hz-prose > h6 {
+  font-family: var(--font-display, var(--font-sans)), sans-serif;
+  font-weight: 600;
+  line-height: var(--leading-tight);
+  letter-spacing: var(--tracking-tight);
+  margin: 0;
+}
+
+.hz-prose > h1 { font-size: var(--text-4xl) }
+.hz-prose > h2 { font-size: var(--text-3xl) }
+.hz-prose > h3 { font-size: var(--text-2xl) }
+.hz-prose > h4 { font-size: var(--text-xl) }
+.hz-prose > h5 { font-size: var(--text-lg) }
+/* h6 is the byline rung: heading TAG, body weight and colour, because that is
+   what a byline is — subordinate text that happens to sit in the heading
+   stack. */
+.hz-prose > h6 {
+  font-size: var(--text-base);
+  font-weight: 400;
+  color: var(--muted-foreground);
+}
+
+.hz-prose > p { margin: 0 }
+.hz-prose > ul, .hz-prose > ol { margin: 0; padding-inline-start: 1.5em }
+.hz-prose li { margin-block: 0.25em }
+.hz-prose > blockquote {
+  margin: 0;
+  padding-inline-start: 1em;
+  border-inline-start: 2px solid var(--border);
+  color: var(--muted-foreground);
+}
+.hz-prose code {
+  font-family: var(--font-mono), ui-monospace, monospace;
+  font-size: 0.9em;
+}
+.hz-prose a { color: inherit; text-decoration: underline }
+.hz-prose strong { font-weight: 600 }
+.hz-prose :where(img, video) { max-width: 100%; height: auto }
+
+/* The named rungs. `responsive` is the default and is the only one that moves
+   with the viewport — a t-shirt size is a DECISION, so it stays put. */
+.hz-prose-sm { font-size: var(--text-sm); gap: var(--space-3, 0.75rem) }
+.hz-prose-sm > h1 { font-size: var(--text-3xl) }
+.hz-prose-sm > h2 { font-size: var(--text-2xl) }
+.hz-prose-sm > h3 { font-size: var(--text-xl) }
+.hz-prose-sm > p  { font-size: var(--text-sm) }
+
+.hz-prose-lg { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
+.hz-prose-lg > h1 { font-size: var(--text-5xl) }
+.hz-prose-lg > h2 { font-size: var(--text-4xl) }
+.hz-prose-lg > h3 { font-size: var(--text-3xl) }
+.hz-prose-lg > p  { font-size: var(--text-lg) }
+
+.hz-prose-xl { font-size: var(--text-lg); gap: var(--space-6, 1.5rem) }
+.hz-prose-xl > h1 { font-size: var(--text-6xl) }
+.hz-prose-xl > h2 { font-size: var(--text-5xl) }
+.hz-prose-xl > h3 { font-size: var(--text-4xl) }
+.hz-prose-xl > p  { font-size: var(--text-lg) }
+
+/* Responsive: start at the small rung and climb. Written as min-width so the
+   phone case is the unprefixed one and needs no query at all. */
+@media (min-width: 640px) {
+  .hz-prose-responsive { gap: var(--space-4, 1rem) }
+}
+@media (min-width: 1024px) {
+  .hz-prose-responsive { font-size: var(--text-lg); gap: var(--space-5, 1.25rem) }
+  .hz-prose-responsive > h1 { font-size: var(--text-5xl) }
+  .hz-prose-responsive > h2 { font-size: var(--text-4xl) }
+  .hz-prose-responsive > h3 { font-size: var(--text-3xl) }
+}
+@media (min-width: 1280px) {
+  .hz-prose-responsive { gap: var(--space-6, 1.5rem) }
+  .hz-prose-responsive > h1 { font-size: var(--text-6xl) }
+  .hz-prose-responsive > h2 { font-size: var(--text-5xl) }
+}
+
 /* Glass — the material floating chrome is made of, and the ladder it stands on.
  *
  *   import '@hanzo/ui/glass.css'      // this slice alone

package/dist/tw.cjs

@@ -175,6 +175,23 @@ function one(c) {
         case 'inline': return { display: 'inline' };
         case 'inline-block': return { display: 'inline-block' };
         case 'hidden': return { display: 'none' };
+        // `invisible` keeps the box and hides what is in it, which is what a spacer
+        // wants — `hidden` above would collapse the very space it exists to take.
+        //
+        // Rendered as opacity rather than `visibility`, which the native target has
+        // no equivalent for. The two differ in one way that matters: `visibility:
+        // hidden` also takes the subtree out of the accessibility tree and the tab
+        // order, and opacity does not. Anything decorative therefore still needs
+        // `aria-hidden` — it always did, since `visibility` cannot cross to native
+        // at all.
+        case 'invisible': return { opacity: 0 };
+        case 'visible': return { opacity: 1 };
+        // Where padding and border sit relative to a declared width. `content-box`
+        // is the css default but NOT the default here: the browser reset every one
+        // of these apps loads sets `border-box` on everything, so an element asking
+        // for `box-content` is asking to opt back out and needs the property said.
+        case 'box-content': return { boxSizing: 'content-box' };
+        case 'box-border': return { boxSizing: 'border-box' };
         case 'flex-col': return { flexDirection: 'column' };
         case 'flex-row': return { flexDirection: 'row' };
         case 'flex-col-reverse': return { flexDirection: 'column-reverse' };
@@ -321,6 +338,16 @@ function one(c) {
                 return { fontSize: FONT_SIZE[v], lineHeight: `var(--text-${v}--line-height)` };
             if (v === 'left' || v === 'center' || v === 'right' || v === 'justify')
                 return { textAlign: v };
+            // `text-` sets a size OR a colour, and an arbitrary value has to say
+            // which. A LENGTH is a size: `text-[96px]` was reaching the colour branch
+            // and returning `{ color: '96px' }` — a declaration the browser drops, so
+            // the heading kept its inherited size and nothing anywhere reported a
+            // problem. Measured on lux/bitcoin's 404, where a 96px numeral rendered
+            // at 28px.
+            const arb = /^\[(.+)]$/.exec(v);
+            if (arb && /^-?[\d.]+(px|rem|em|ch|ex|vw|vh|vmin|vmax|%|pt)?$/.test(arb[1])) {
+                return { fontSize: arb[1] };
+            }
             const col = color(v);
             return col ? { color: col } : null;
         }
@@ -387,6 +414,10 @@ function one(c) {
         case 'transition': return TRANSITION[v] ? { transitionProperty: TRANSITION[v] } : null;
         case 'duration': return DURATION[v] !== undefined ? { transitionDuration: `${DURATION[v]}ms` } : null;
         case 'delay': return DURATION[v] !== undefined ? { transitionDelay: `${DURATION[v]}ms` } : null;
+        // `ease` was in the head list with no case, so `transition duration-500
+        // ease-out` converted two thirds of one declaration and left the curve on
+        // the element as a dead class. The three named curves are Tailwind's own.
+        case 'ease': return EASE[v] ? { transitionTimingFunction: EASE[v] } : null;
         case 'blur': return BLUR[v] !== undefined ? { filter: `blur(${BLUR[v]}px)` } : null;
         case 'backdrop-blur': return BLUR[v] !== undefined ? { backdropFilter: `blur(${BLUR[v]}px)` } : null;
         // `space-y` is deliberately NOT converted. It sets margins on the CHILDREN,
@@ -408,10 +439,21 @@ function one(c) {
     }
     return null;
 }
+const EASE = {
+    linear: 'linear',
+    in: 'cubic-bezier(0.4, 0, 1, 1)',
+    out: 'cubic-bezier(0, 0, 0.2, 1)',
+    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+};
 const MAX_W = {
     none: 'none', xs: 320, sm: 384, md: 448, lg: 512, xl: 576, '2xl': 672,
     '3xl': 768, '4xl': 896, '5xl': 1024, '6xl': 1152, '7xl': 1280, full: '100%',
     prose: '65ch', screen: '100vw',
+    // `max-w-screen-<rung>` is the BREAKPOINT width, not the size ramp above —
+    // the idiom for "hold the content to the width this layout was designed at".
+    // Unlisted, `max-w-screen-xl` fell through as an unread class and the
+    // container it bounds grew to whatever the viewport was.
+    'screen-sm': 640, 'screen-md': 768, 'screen-lg': 1024, 'screen-xl': 1280, 'screen-2xl': 1536,
 };
 const CORNER = {
     t: 'Top', r: 'Right', b: 'Bottom', l: 'Left',
@@ -419,6 +461,18 @@ const CORNER = {
 };
 /** Where a prefixed class lands: a gui media prop, or a pseudo-style. */
 const VARIANT = {
+    // `xs` is the smallest rung, so it lands at the BASE — an empty destination,
+    // not a `$xs` bucket. gui publishes no `$xs` media prop because there is
+    // nothing below it: a style with no media wrapper already applies there, and
+    // every larger rung overrides it in turn. That is also what `xs` meant in the
+    // tailwind config this notation came from, where it was a custom screen at
+    // the bottom rather than one of tailwind's own.
+    //
+    // It has to be HERE rather than absent: content authored on 5.x writes the
+    // rung out explicitly (`SPACE_DEFAULTS` and `GridDef.at` both start at `xs`),
+    // and an unlisted prefix keeps the whole class as an unconverted string — so
+    // the smallest rung of every ladder would be the one silently dropped.
+    xs: '',
     sm: '$sm', md: '$md', lg: '$lg', xl: '$xl', '2xl': '$2xl',
     hover: 'hoverStyle', focus: 'focusStyle', 'focus-visible': 'focusVisibleStyle',
     active: 'pressStyle', disabled: 'disabledStyle', dark: '$theme-dark',
@@ -484,10 +538,17 @@ function tw(input) {
             continue;
         }
         const key = VARIANT[parts[parts.length - 1]];
-        if (!key) {
+        if (key === undefined) {
             rest.push(raw);
             continue;
         }
+        // An empty destination is the base rung (`xs:`), which is where a style with
+        // no media wrapper already lives — so it merges into props rather than
+        // opening a bucket gui would never read.
+        if (!key) {
+            Object.assign(props, found);
+            continue;
+        }
         const bucket = (props[key] ??= {});
         Object.assign(bucket, found);
     }

package/dist/tw.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tw.d.ts","sourceRoot":"","sources":["../src/tw.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE3C,gEAAgE;AAChE,MAAM,MAAM,MAAM,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AA0WnD,MAAM,MAAM,UAAU,GAClB,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,GAC1C,UAAU,EAAE,GACZ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAY3B;;;GAGG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAyC5C;eAEc,EAAE"}
+{"version":3,"file":"tw.d.ts","sourceRoot":"","sources":["../src/tw.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,MAAM,MAAM,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAE3C,gEAAgE;AAChE,MAAM,MAAM,MAAM,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAA;AAianD,MAAM,MAAM,UAAU,GAClB,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,GAC1C,UAAU,EAAE,GACZ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;AAY3B;;;GAGG;AACH,wBAAgB,EAAE,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CA6C5C;eAEc,EAAE"}

package/dist/tw.js

@@ -172,6 +172,23 @@ function one(c) {
         case 'inline': return { display: 'inline' };
         case 'inline-block': return { display: 'inline-block' };
         case 'hidden': return { display: 'none' };
+        // `invisible` keeps the box and hides what is in it, which is what a spacer
+        // wants — `hidden` above would collapse the very space it exists to take.
+        //
+        // Rendered as opacity rather than `visibility`, which the native target has
+        // no equivalent for. The two differ in one way that matters: `visibility:
+        // hidden` also takes the subtree out of the accessibility tree and the tab
+        // order, and opacity does not. Anything decorative therefore still needs
+        // `aria-hidden` — it always did, since `visibility` cannot cross to native
+        // at all.
+        case 'invisible': return { opacity: 0 };
+        case 'visible': return { opacity: 1 };
+        // Where padding and border sit relative to a declared width. `content-box`
+        // is the css default but NOT the default here: the browser reset every one
+        // of these apps loads sets `border-box` on everything, so an element asking
+        // for `box-content` is asking to opt back out and needs the property said.
+        case 'box-content': return { boxSizing: 'content-box' };
+        case 'box-border': return { boxSizing: 'border-box' };
         case 'flex-col': return { flexDirection: 'column' };
         case 'flex-row': return { flexDirection: 'row' };
         case 'flex-col-reverse': return { flexDirection: 'column-reverse' };
@@ -318,6 +335,16 @@ function one(c) {
                 return { fontSize: FONT_SIZE[v], lineHeight: `var(--text-${v}--line-height)` };
             if (v === 'left' || v === 'center' || v === 'right' || v === 'justify')
                 return { textAlign: v };
+            // `text-` sets a size OR a colour, and an arbitrary value has to say
+            // which. A LENGTH is a size: `text-[96px]` was reaching the colour branch
+            // and returning `{ color: '96px' }` — a declaration the browser drops, so
+            // the heading kept its inherited size and nothing anywhere reported a
+            // problem. Measured on lux/bitcoin's 404, where a 96px numeral rendered
+            // at 28px.
+            const arb = /^\[(.+)]$/.exec(v);
+            if (arb && /^-?[\d.]+(px|rem|em|ch|ex|vw|vh|vmin|vmax|%|pt)?$/.test(arb[1])) {
+                return { fontSize: arb[1] };
+            }
             const col = color(v);
             return col ? { color: col } : null;
         }
@@ -384,6 +411,10 @@ function one(c) {
         case 'transition': return TRANSITION[v] ? { transitionProperty: TRANSITION[v] } : null;
         case 'duration': return DURATION[v] !== undefined ? { transitionDuration: `${DURATION[v]}ms` } : null;
         case 'delay': return DURATION[v] !== undefined ? { transitionDelay: `${DURATION[v]}ms` } : null;
+        // `ease` was in the head list with no case, so `transition duration-500
+        // ease-out` converted two thirds of one declaration and left the curve on
+        // the element as a dead class. The three named curves are Tailwind's own.
+        case 'ease': return EASE[v] ? { transitionTimingFunction: EASE[v] } : null;
         case 'blur': return BLUR[v] !== undefined ? { filter: `blur(${BLUR[v]}px)` } : null;
         case 'backdrop-blur': return BLUR[v] !== undefined ? { backdropFilter: `blur(${BLUR[v]}px)` } : null;
         // `space-y` is deliberately NOT converted. It sets margins on the CHILDREN,
@@ -405,10 +436,21 @@ function one(c) {
     }
     return null;
 }
+const EASE = {
+    linear: 'linear',
+    in: 'cubic-bezier(0.4, 0, 1, 1)',
+    out: 'cubic-bezier(0, 0, 0.2, 1)',
+    'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+};
 const MAX_W = {
     none: 'none', xs: 320, sm: 384, md: 448, lg: 512, xl: 576, '2xl': 672,
     '3xl': 768, '4xl': 896, '5xl': 1024, '6xl': 1152, '7xl': 1280, full: '100%',
     prose: '65ch', screen: '100vw',
+    // `max-w-screen-<rung>` is the BREAKPOINT width, not the size ramp above —
+    // the idiom for "hold the content to the width this layout was designed at".
+    // Unlisted, `max-w-screen-xl` fell through as an unread class and the
+    // container it bounds grew to whatever the viewport was.
+    'screen-sm': 640, 'screen-md': 768, 'screen-lg': 1024, 'screen-xl': 1280, 'screen-2xl': 1536,
 };
 const CORNER = {
     t: 'Top', r: 'Right', b: 'Bottom', l: 'Left',
@@ -416,6 +458,18 @@ const CORNER = {
 };
 /** Where a prefixed class lands: a gui media prop, or a pseudo-style. */
 const VARIANT = {
+    // `xs` is the smallest rung, so it lands at the BASE — an empty destination,
+    // not a `$xs` bucket. gui publishes no `$xs` media prop because there is
+    // nothing below it: a style with no media wrapper already applies there, and
+    // every larger rung overrides it in turn. That is also what `xs` meant in the
+    // tailwind config this notation came from, where it was a custom screen at
+    // the bottom rather than one of tailwind's own.
+    //
+    // It has to be HERE rather than absent: content authored on 5.x writes the
+    // rung out explicitly (`SPACE_DEFAULTS` and `GridDef.at` both start at `xs`),
+    // and an unlisted prefix keeps the whole class as an unconverted string — so
+    // the smallest rung of every ladder would be the one silently dropped.
+    xs: '',
     sm: '$sm', md: '$md', lg: '$lg', xl: '$xl', '2xl': '$2xl',
     hover: 'hoverStyle', focus: 'focusStyle', 'focus-visible': 'focusVisibleStyle',
     active: 'pressStyle', disabled: 'disabledStyle', dark: '$theme-dark',
@@ -481,10 +535,17 @@ export function tw(input) {
             continue;
         }
         const key = VARIANT[parts[parts.length - 1]];
-        if (!key) {
+        if (key === undefined) {
             rest.push(raw);
             continue;
         }
+        // An empty destination is the base rung (`xs:`), which is where a style with
+        // no media wrapper already lives — so it merges into props rather than
+        // opening a bucket gui would never read.
+        if (!key) {
+            Object.assign(props, found);
+            continue;
+        }
         const bucket = (props[key] ??= {});
         Object.assign(bucket, found);
     }