@hraness/design-kit 0.35.2 → 0.36.0

package/MARKETING_COPY.md

@@ -24,6 +24,7 @@ Limits are maximums. Count characters in the rendered text.
 | `MarketingPillars`, `MarketingPrimitives` | Two to four items. Labels name a thing or state a fact ("A log for every run"); each summary is one sentence. | Label: five words. Summary: 120 characters | Adjective triads ("Fast / Legible / Yours") and abstract nouns ("durable objects"). |
 | Section `heading` | Sentence case. A full sentence in the editorial preset may end with a period; other headings do not. | 70 characters | Slogans and headings that promise more than the section shows. |
 | `MarketingTrustBoundary` | What stays on the reader's machine, what is shared, and what the product will not do, each stated once on the page. | Four items | Authority, custody, admission, or lease vocabulary. |
+| `MarketingCard` / `MarketingCardRow` `icon`, `meta` | For comparisons, place a recognizable mark beside one concise reason to choose the featured product. Support the claim in the linked comparison. Use `art` for a full-width illustration. | `meta`: 120 characters | Generic descriptions of the other product, unsupported superiority claims, or marks in illustration wells. |
 | `MarketingRelated` `role` | The sibling product's own one-line description from the portfolio registry. It is the only text the card shows, under the product's mark and name. | One line | A new description invented for this page. |
 | `MarketingRelated` `mark` | The sibling product's portfolio mark, such as a `relatedFor()` item's `mark`. | | Artwork the sibling does not use. |
 | `MarketingQuestionList` | Questions readers actually ask. The first sentence of each answer answers it. Generate any FAQ JSON-LD from the same array. | Eight questions | Questions written to deliver a talking point. |

package/README.md

@@ -11,7 +11,7 @@ Pin a GitHub release tag:
 ```json
 {
   "dependencies": {
-    "@hraness/design-kit": "github:hraness/design-kit#v0.35.2",
+    "@hraness/design-kit": "github:hraness/design-kit#v0.36.0",
     "@hraness/ui": "github:hraness/ui#v0.5.17"
   }
 }
@@ -23,6 +23,30 @@ Pin a GitHub release tag:
 installation so the framework-neutral root and syntax highlighter can be used
 on their own. React 18 or 19 and React DOM 18 or 19 are also peer dependencies.
 
+### Compact comparison cards and fitted walkthroughs
+
+Version 0.36.0 adds an optional split hero with copy beside the product frame, and an `icon` slot to marketing cards for a product mark beside
+complete, wrapping copy. Illustration cards keep their separate `art` slot.
+`StepThrough fit="fill"` fills a stable stage with each slide, and
+`TerminalFrame density="presentation"` uses the available space for larger
+readable text. Complete source lines determine the fit before animation;
+user text zoom can enlarge the stage. `ModeShowcase fit="fill"` reserves the
+largest complete surface across every mode and option before a selection changes,
+with `height` as a minimum. The provider registry adds sourced marks
+for iMessage, WhatsApp, Beeper, Ollama, and Vercel.
+
+In fill mode, `ModeShowcase` renders each authored surface/mode/option combination
+as a hidden, inert, nonanimated measurement fixture. Render functions must be
+pure and provide complete content. The limit is 128 combinations. Visible
+presentation terminals fit their current content within that shared maximum;
+changing a mode or option never changes the reserved height. At narrower widths
+or larger user text settings, the stage can grow to keep the full content readable.
+Natural mode retains its existing scaling and page-height behavior.
+
+### Joined showcase tabs
+
+Version 0.35.3 brings the same folder tabs to mode showcases. Surface tabs attach to one panel containing the controls and preview, while mode and option selections persist across surfaces. A grid reserves the tallest preview so switching surfaces keeps the panel height stable; inactive previews remain hidden and inert. Single-surface showcases keep a complete rounded panel.
+
 ### Compact agent setup and consistent copying
 
 Version 0.35.2 lets evergreen articles, article indexes, and source lists hide visible dates with `showDates: false`. React and static renderers keep authors, review credits, and source publishers, remove empty date rows, and still require valid publication, update, and source-check metadata. Dates remain visible by default.
@@ -357,14 +381,22 @@ next sticky strip should use `.hraness-sticky-below-chrome` or
 `StickyOffsetSync` once from `@hraness/design-kit/react` or call
 `syncStickyOffset` from `@hraness/design-kit/browser` to replace the token
 fallback with the measured border box. `MarketingCardRow` stretches every
-direct child to the tallest item in the row and reserves a two-line meta
-block; titles wrap and are not clamped. `MarketingCardArt` /
-`.hraness-marketing-card__art` clips each card's logo or media well so
-background paint cannot bleed through the gutter.
+direct child to the tallest item in its row. Use `icon` for a decorative
+product mark beside the title and summary. The mark occupies a 3.5rem left
+column, and the summary wraps in full. Use `art` for a full-width illustration;
+its summary reserves two lines. A card accepts either `icon` or `art`.
+`MarketingCardArt` / `.hraness-marketing-card__art` clips illustration paint
+inside the card. Raw HTML uses `data-layout="icon"` with
+`.hraness-marketing-card__icon` beside `.hraness-marketing-card__copy`.
+Keep icon contents decorative and size custom mark components to 56px. Named
+Hraness integrations use the registry's marks, names, URLs, and relationship
+details in these icon rows. Compact recommendations use `MarketingRelated`.
 
 `tone="accent"` on the hero or the call to action paints that role edge to
 edge in the product accent. `layout="split"` or `"split-reverse"` on a
-section places its heading group beside its body. `MarketingQuoteGrid` and
+section places its heading group beside its body. Stacked section headings stay
+in normal flow. Apply sticky copy only in an explicitly split layout, where its
+own column contains it and the result can scroll beside it. `MarketingQuoteGrid` and
 `MarketingPillars` render nothing for an empty list, so a site adds quotes
 only when it has real, attributed ones.
 
@@ -755,7 +787,7 @@ bun run browser:install
 bun run check
 ```
 
-The stable dependency pair for this release is `@hraness/ui` `v0.5.17` with `@hraness/design-kit` `v0.35.2`. Version 0.31.0 keeps the `limits` beat and beats marked `social: false` out of the social kit and adds `socialPost` for social wording that stands without a caveat. Version 0.30.3 refreshes the portfolio snapshot so related-product cards use each product's own spelling, such as GhostGet and TextButler. Version 0.30.2 keeps the narrow and stacked install-tab layout when another package compiles the same atoms into a later cascade layer. Version 0.30.1 keeps every PlatformInstall tab name whole in columns down to 200px by stacking each mark above its name, using a container query on the component. Version 0.30.0 adds `site-shell.css`, which keeps short-page footers at the viewport bottom. Version 0.29.3 preserves readable selected install tabs in forced colors. Version 0.29.2 keeps all three PlatformInstall tabs visible at 320 to 360px and draws each platform mark once per component. Version 0.29.1 keeps marketing action labels readable in forced colors. Version 0.29.0 adds `PlatformInstall`, one install block for every CLI site: a tab per operating system with its mark, the install command with a Copy button that announces the result, optional alternative commands such as npm or Homebrew, and a note for platforms without a native build. After hydration it selects the visitor's operating system; without JavaScript every command shows. It also adds `PlatformIcon` (Apple, Tux, and Windows marks in `currentColor`) and a `PlatformBadges` "Runs on" row, plus `platformLabel`, `platformMark`, `detectPlatform`, and `matchDetectedPlatform` at the package root. See [Install commands for each platform](#install-commands-for-each-platform). No existing export changes. Version 0.28.0 adds the launch kit. `@hraness/design-kit/mockups` draws labelled illustrations of chat, feeds, inboxes, articles, terminals, browsers, desktop windows, menu bars, and phones in server-safe plain React with no StyleX or React Aria, styled by `@hraness/design-kit/mockups.css`; each renders as one image with a text description and no headings. `@hraness/design-kit/mockups/client` adds `ModeShowcase`, `FitToWidth`, and `StepThrough`. `@hraness/design-kit/launch`, with no React, holds the `LaunchBeat`, `LaunchFacts`, and `SocialKit` shapes with `resolveLaunchBeats`, `buildSocialKit`, and `assertLaunchKit`. `@hraness/design-kit/testing` gives product repositories `blogConformance`, `renderMatrix`, `assertNoHeadings`, `assertRoleImgWithLabel`, and `assertFakeHandles`. The React entries add `ArticleFigure`, `ArticleVideo` with `articleVideoJsonLd`, `ArticleTable`, `ArticleBarChart`, `ComparisonTable`, `LaunchBeats`, and `SocialKitPanel`, and `MarketingProofFrame` takes `chrome` (`window`, `browser` with `url`, or `terminal`). [ARTICLE_COPY.md](ARTICLE_COPY.md) now writes "Introducing a product" as beats; the admission rules are unchanged. No existing export changes. Version 0.27.0 adds explicit Rust, TOML, YAML, Lean, and TLA+ code highlighting, including nested comments and multiline strings. The existing highlighter API and stylesheet remain the shared entry points; unsupported languages still render as escaped text. Version 0.26.0 adds `MarketingNotice` and the raw `.hraness-marketing-notice` class: one status or alert line (`info`, `success`, or `error`) that sits on the content edge of the page column instead of spanning the window. Errors are announced as alerts and other tones as status. Signed-in account pages that render inside `MarketingSiteHeader` should compose `MarketingMain`, `MarketingNotice`, `MarketingStatStrip`, and `MarketingSection` so every block shares the header's measure and gutter, rather than hand-rolled full-bleed banners and nested cards. Version 0.25.0 moves bordered foil surfaces off the spectrum: `.hraness-foil` and `[data-emphasis="primary"]` actions keep their flat surface fill under one theme-aware monochrome edge — black on light, white on dark, overridable through the new `--hraness-foil-edge` token — while the metallic spectrum stays on wordmarks and marks. The foil material contract advances to version 3: `surfaceImage` and `surfaceBackgroundClip` are replaced by `surfaceFill`, `edge`, `edgeDark`, and `edgeColor`. Reinstall any vendored marketing snapshot from the 0.25.0 commit. Version 0.24.0 joins a marketing footer directly followed by the shared `@hraness/site-footer` network footer into one band: the product row's bottom space collapses to a compact gap and the network row's content follows the marketing measure and gutter through `--hraness-site-footer-measure`, so product links and the organization row share one column instead of reading as two stacked bars. Mount the network footer directly after `MarketingSiteFooter`; no prop or markup change is needed inside either landmark. Version 0.23.0 moves marketing pages to the Quiet direction described in [DESIGN.md](DESIGN.md). `ProductHero` no longer renders a backdrop, `HeroBackdrop` renders nothing, and `attachHeroLight` is an inert disposer; their names and props stay so existing code compiles and are marked deprecated. The `cells`, `weave`, `contour`, and `mesh` patterns render as `none`, and marketing fields and Lantern walls paint the flat palette background. Both marketing presets use Nebula Sans for display headings (editorial at weight 550); Instrument Serif stays vendored for explicit opt-in only. Hero eyebrows are plain labels, the accent band loses its grid, and cards and header chrome use hairline edges instead of lifted shadows. On phones `MarketingSiteHeader` keeps the brand, primary action, and appearance menu on one row and moves the links to a second row that scrolls sideways, with 44px targets. To migrate, delete `backdrop` artwork, `HeroBackdrop`, `attachHeroLight`, pattern values, and product CSS that recreated textures or serif headings, then reinstall any vendored marketing snapshot from the 0.23.0 commit. Version 0.22.2 restores the canonical roughday mark — the rain-cloud artwork pinned by the portfolio registry — after the mark slot briefly carried a stray illustration. Version 0.22.1 completes the icon library with the roughday inline chip family (65 admitted assets, no pending members). Version 0.22.0 adds the `./icons` surface: 62 vetted single-ink assets across ten sets — a shared illustration family, product illustration families, and the product marks, each admitted through a measured gate (single ink, bounded aspect, coverage, stroke, paths, bytes) and per-set family coherence, distributed as a typed registry module (`hranessIcons`, `hranessIcon`, `hranessIconMarkup`, `hranessIconsForSet`) and as canonical `./icons/<set>/<slug>.svg` files for image consumers. See [ICONS.md](ICONS.md). Version 0.21.1 accepts status-page `routes` straight from a sitemap: long titles are shortened for the "Did you mean" line and unusable entries are dropped instead of failing the render. Version 0.21.0 replaces the 404 and route-error pages with one shared status page: the product's main action, a "Did you mean" link to the closest known page, at most three next links with one-line descriptions, an optional line for AI agents, and a glyph drawn as dots that gather, move away from the pointer, and settle. `RouteNotFoundPage`, `RouteErrorPage`, and `GlobalErrorDocument` render it; `renderStatusPageHtml` and `attachStatusPage` bring the same page to static sites; `status-page.css` ships in `styles.css` and `compiler-foundation.css`. The default copy changes to "We can’t find that page". See [STATUS_PAGES.md](STATUS_PAGES.md). Version 0.20.0 gives `ThemeMenuButton` the Lantern material: under `data-hraness-material="lantern"` its trigger is raised at rest and inset while pressed, and its menu uses the material plane, lift and warm selection, with no new props. Sites can delete their local Lantern CSS for the appearance menu. It also adds `formatRelativeTime` at the package root and a hydration-safe `RelativeTime` component in `@hraness/design-kit/react`. Version 0.19.0 redraws related-product cards as the hraness.com project cards: each shows the product's mark, its name, and its one-line `role` at reading size, and no longer renders the `relationship` sentence (the prop stays accepted and is deprecated). `MarketingRelatedProduct` and the static `ArticleRelatedLink` take a `mark`, and every `@hraness/design-kit/portfolio` product and `relatedFor()` item now carries its portfolio mark as an inert `data:image/svg+xml` URL. Related-tier and proof headings move to the new `--hraness-marketing-h3-size` token, so the editorial display face never renders below 1.75rem. `typography.css` gains per-level heading tokens (`--hraness-type-h1-font` through `--hraness-type-h4-font`, the matching `-weight` tokens, `--hraness-type-subheading-font`, and `--hraness-type-display-min`). h3 and h4 in `.hraness-prose` and publication articles now use the text face, and the h2 floor rises to 1.75rem. Version 0.18.3 adds the Sponge and Wordcell runtime relations to Oh to the `@hraness/design-kit/portfolio` snapshot, so related-product cards on all three sites can link them. Version 0.18.2 refreshes the `@hraness/design-kit/portfolio` snapshot from the registry: the public ghostget.com entry, updated Gobstopper and xcb naming and descriptions, and the current sibling-product relations for related-product cards. Version 0.18.1 adds the Perplexity mark and a dependency-free `@hraness/design-kit/provider-marks` leaf entry (`providerMark`, `providerMarks`, `providerMarkFallback`, `providerMarkGlyphDataUri`, `providerMarkArtDataUri`, `providerMarkOnAccent`, `providerMarkMonogram`) so packages such as `@hraness/ui` can consume the registry without pulling the marketing surface. Version 0.18.0 adds the shared provider-mark registry: `providerMarks`, `providerMark()` alias resolution, `ProviderMark`/`ProviderMarkChip` accent-tinted tile components on both React entry points, vendored agent and vendor artwork from LobeHub icons 1.95.1 plus documented Crush and Aider marks, monogram fallbacks for uncovered names, and data-URI helpers for CSS-mask consumers. See `vendor/provider-marks/UPSTREAM.md` for asset provenance. Version 0.17.2 carries the canonical portfolio messaging record per product (`names`, `category`, `tagline`, `short`, `meta`, `medium`, `long`, and hero copy) in the `/portfolio` snapshot. Version 0.17.1 lets Next.js apps that compile dependencies with Babel build the article layer: its link check no longer uses a Unicode property escape that Babel cannot rewrite, and it rejects the same control characters and whitespace as before. Version 0.17.0 adds the article layer: server-safe `MarketingArticle`, byline, provenance, sources, callout, related-product, and index components, a matching static HTML renderer for sites without React, long-form article styles in `plain-publication.css`, and the `ArticleAdmission` rubric with `assertArticleAdmissions()`. It also adds `@hraness/design-kit/portfolio`, a snapshot of public product names, one-liners, links, and relations for related-product cards and "How X uses Y" posts. See [ARTICLE_COPY.md](ARTICLE_COPY.md). Version 0.16.4 keeps native appearance-menu labels usable inside keyboard-focusable page landmarks, including mouse and touch selection. Version 0.16.3 keeps decorative hero backgrounds hidden in forced colors and reduced transparency when other packages load their styles afterward. Version 0.16.2 preserves palette hues in translucent headers, material surfaces, and decorative highlights. Version 0.16.1 keeps plain reading pages and nested compiled surfaces in their selected palette, including system appearance without JavaScript. Version 0.16.0 adds a shared bounded hero light, product-owned backdrop slots, five Lantern patterns, palette-derived soft surfaces, and responsive typography across marketing and reading layouts. Static sites can use the palette bridge for system appearance before JavaScript. See [HERO_FIELDS.md](HERO_FIELDS.md), [LANTERN_MATERIAL.md](LANTERN_MATERIAL.md), and [MARKETING_PRESET.md](MARKETING_PRESET.md). Version 0.15.0 lets `MarketingRelated` present labeled tiers of sibling products: a `groups` collection renders each tier under its own heading with an accessible card-row label, while the flat `items` shape stays available for a single group. Version 0.14.0 adds `MarketingRelated`, a collection section that presents sibling products as linked cards, each framed by its relationship to the featured product. Version 0.13.0 publishes `--hraness-sticky-offset` from sticky marketing chrome, gives `MarketingMain` and the next sticky sibling a clearance contract, stretches marketing card rows to the tallest item with a reserved two-line meta block, and clips per-card art wells so a logo surface cannot paint through the gutter. Version 0.12.0 replaces pointer-driven gradient rotation with a steady material and a moving light: the spectrum and its 115deg direction stay fixed while `--hraness-foil-x`/`--hraness-foil-y` highlights travel across each lockup, and marketing footers can opt into the same icon-plus-wordmark foil as the site header with `brandMark`. Version 0.11.1 preserves visible metallic marks when another package repeats a generic hidden atom in a later CSS layer. React consumers load `components.css` or `styles.css`; the raw marketing entry supports authored HTML hooks. Version 0.11 adds server-rendered `FoilMark` artwork and metallic text with subtle rainbow reflections, including a shared header mark seam and original-artwork fallbacks. Version 0.10.1 adds conservative server syntax defaults, includes their styles in the narrow marketing entry, and pins the icon dependency to preserve fresh Linux installs. Version 0.10 adds the shared foil contract: `.hraness-foil` surfaces and `.hraness-foil-text` wordmarks render a pointer-following metallic spectrum from the `--hraness-foil-*` custom properties, applied by default to marketing header brands and primary actions. The `attachFoil` browser export drives the bounded `x`/`y`/`angle` inputs with damped easing, reduced-motion and forced-color fallbacks, and no style injection; the same spectrum feeds `@hraness/site-footer` signup controls. Dark appearances use a deeper palette so the sheen stays visible. Version 0.8 removes Jelly's optional API, stylesheet, vendor runtime and theme-provider side effect. Migrate direct Jelly surfaces to native shared primitives before upgrading. Lantern now uses softer directional depth and shaded faces; the marketing preset adds individually shaded static cells, theme-aware terminal colors and window chrome. Code blocks retain source lines and follow the active palette. Paper preferences, semantic palettes, and compiler identity stay stable. Compiler adopters must regenerate their finalized stylesheet with the new package manifest.
+The stable dependency pair for this release is `@hraness/ui` `v0.5.17` with `@hraness/design-kit` `v0.36.0`. Version 0.31.0 keeps the `limits` beat and beats marked `social: false` out of the social kit and adds `socialPost` for social wording that stands without a caveat. Version 0.30.3 refreshes the portfolio snapshot so related-product cards use each product's own spelling, such as GhostGet and TextButler. Version 0.30.2 keeps the narrow and stacked install-tab layout when another package compiles the same atoms into a later cascade layer. Version 0.30.1 keeps every PlatformInstall tab name whole in columns down to 200px by stacking each mark above its name, using a container query on the component. Version 0.30.0 adds `site-shell.css`, which keeps short-page footers at the viewport bottom. Version 0.29.3 preserves readable selected install tabs in forced colors. Version 0.29.2 keeps all three PlatformInstall tabs visible at 320 to 360px and draws each platform mark once per component. Version 0.29.1 keeps marketing action labels readable in forced colors. Version 0.29.0 adds `PlatformInstall`, one install block for every CLI site: a tab per operating system with its mark, the install command with a Copy button that announces the result, optional alternative commands such as npm or Homebrew, and a note for platforms without a native build. After hydration it selects the visitor's operating system; without JavaScript every command shows. It also adds `PlatformIcon` (Apple, Tux, and Windows marks in `currentColor`) and a `PlatformBadges` "Runs on" row, plus `platformLabel`, `platformMark`, `detectPlatform`, and `matchDetectedPlatform` at the package root. See [Install commands for each platform](#install-commands-for-each-platform). No existing export changes. Version 0.28.0 adds the launch kit. `@hraness/design-kit/mockups` draws labelled illustrations of chat, feeds, inboxes, articles, terminals, browsers, desktop windows, menu bars, and phones in server-safe plain React with no StyleX or React Aria, styled by `@hraness/design-kit/mockups.css`; each renders as one image with a text description and no headings. `@hraness/design-kit/mockups/client` adds `ModeShowcase`, `FitToWidth`, and `StepThrough`. `@hraness/design-kit/launch`, with no React, holds the `LaunchBeat`, `LaunchFacts`, and `SocialKit` shapes with `resolveLaunchBeats`, `buildSocialKit`, and `assertLaunchKit`. `@hraness/design-kit/testing` gives product repositories `blogConformance`, `renderMatrix`, `assertNoHeadings`, `assertRoleImgWithLabel`, and `assertFakeHandles`. The React entries add `ArticleFigure`, `ArticleVideo` with `articleVideoJsonLd`, `ArticleTable`, `ArticleBarChart`, `ComparisonTable`, `LaunchBeats`, and `SocialKitPanel`, and `MarketingProofFrame` takes `chrome` (`window`, `browser` with `url`, or `terminal`). [ARTICLE_COPY.md](ARTICLE_COPY.md) now writes "Introducing a product" as beats; the admission rules are unchanged. No existing export changes. Version 0.27.0 adds explicit Rust, TOML, YAML, Lean, and TLA+ code highlighting, including nested comments and multiline strings. The existing highlighter API and stylesheet remain the shared entry points; unsupported languages still render as escaped text. Version 0.26.0 adds `MarketingNotice` and the raw `.hraness-marketing-notice` class: one status or alert line (`info`, `success`, or `error`) that sits on the content edge of the page column instead of spanning the window. Errors are announced as alerts and other tones as status. Signed-in account pages that render inside `MarketingSiteHeader` should compose `MarketingMain`, `MarketingNotice`, `MarketingStatStrip`, and `MarketingSection` so every block shares the header's measure and gutter, rather than hand-rolled full-bleed banners and nested cards. Version 0.25.0 moves bordered foil surfaces off the spectrum: `.hraness-foil` and `[data-emphasis="primary"]` actions keep their flat surface fill under one theme-aware monochrome edge — black on light, white on dark, overridable through the new `--hraness-foil-edge` token — while the metallic spectrum stays on wordmarks and marks. The foil material contract advances to version 3: `surfaceImage` and `surfaceBackgroundClip` are replaced by `surfaceFill`, `edge`, `edgeDark`, and `edgeColor`. Reinstall any vendored marketing snapshot from the 0.25.0 commit. Version 0.24.0 joins a marketing footer directly followed by the shared `@hraness/site-footer` network footer into one band: the product row's bottom space collapses to a compact gap and the network row's content follows the marketing measure and gutter through `--hraness-site-footer-measure`, so product links and the organization row share one column instead of reading as two stacked bars. Mount the network footer directly after `MarketingSiteFooter`; no prop or markup change is needed inside either landmark. Version 0.23.0 moves marketing pages to the Quiet direction described in [DESIGN.md](DESIGN.md). `ProductHero` no longer renders a backdrop, `HeroBackdrop` renders nothing, and `attachHeroLight` is an inert disposer; their names and props stay so existing code compiles and are marked deprecated. The `cells`, `weave`, `contour`, and `mesh` patterns render as `none`, and marketing fields and Lantern walls paint the flat palette background. Both marketing presets use Nebula Sans for display headings (editorial at weight 550); Instrument Serif stays vendored for explicit opt-in only. Hero eyebrows are plain labels, the accent band loses its grid, and cards and header chrome use hairline edges instead of lifted shadows. On phones `MarketingSiteHeader` keeps the brand, primary action, and appearance menu on one row and moves the links to a second row that scrolls sideways, with 44px targets. To migrate, delete `backdrop` artwork, `HeroBackdrop`, `attachHeroLight`, pattern values, and product CSS that recreated textures or serif headings, then reinstall any vendored marketing snapshot from the 0.23.0 commit. Version 0.22.2 restores the canonical roughday mark — the rain-cloud artwork pinned by the portfolio registry — after the mark slot briefly carried a stray illustration. Version 0.22.1 completes the icon library with the roughday inline chip family (65 admitted assets, no pending members). Version 0.22.0 adds the `./icons` surface: 62 vetted single-ink assets across ten sets — a shared illustration family, product illustration families, and the product marks, each admitted through a measured gate (single ink, bounded aspect, coverage, stroke, paths, bytes) and per-set family coherence, distributed as a typed registry module (`hranessIcons`, `hranessIcon`, `hranessIconMarkup`, `hranessIconsForSet`) and as canonical `./icons/<set>/<slug>.svg` files for image consumers. See [ICONS.md](ICONS.md). Version 0.21.1 accepts status-page `routes` straight from a sitemap: long titles are shortened for the "Did you mean" line and unusable entries are dropped instead of failing the render. Version 0.21.0 replaces the 404 and route-error pages with one shared status page: the product's main action, a "Did you mean" link to the closest known page, at most three next links with one-line descriptions, an optional line for AI agents, and a glyph drawn as dots that gather, move away from the pointer, and settle. `RouteNotFoundPage`, `RouteErrorPage`, and `GlobalErrorDocument` render it; `renderStatusPageHtml` and `attachStatusPage` bring the same page to static sites; `status-page.css` ships in `styles.css` and `compiler-foundation.css`. The default copy changes to "We can’t find that page". See [STATUS_PAGES.md](STATUS_PAGES.md). Version 0.20.0 gives `ThemeMenuButton` the Lantern material: under `data-hraness-material="lantern"` its trigger is raised at rest and inset while pressed, and its menu uses the material plane, lift and warm selection, with no new props. Sites can delete their local Lantern CSS for the appearance menu. It also adds `formatRelativeTime` at the package root and a hydration-safe `RelativeTime` component in `@hraness/design-kit/react`. Version 0.19.0 redraws related-product cards as the hraness.com project cards: each shows the product's mark, its name, and its one-line `role` at reading size, and no longer renders the `relationship` sentence (the prop stays accepted and is deprecated). `MarketingRelatedProduct` and the static `ArticleRelatedLink` take a `mark`, and every `@hraness/design-kit/portfolio` product and `relatedFor()` item now carries its portfolio mark as an inert `data:image/svg+xml` URL. Related-tier and proof headings move to the new `--hraness-marketing-h3-size` token, so the editorial display face never renders below 1.75rem. `typography.css` gains per-level heading tokens (`--hraness-type-h1-font` through `--hraness-type-h4-font`, the matching `-weight` tokens, `--hraness-type-subheading-font`, and `--hraness-type-display-min`). h3 and h4 in `.hraness-prose` and publication articles now use the text face, and the h2 floor rises to 1.75rem. Version 0.18.3 adds the Sponge and Wordcell runtime relations to Oh to the `@hraness/design-kit/portfolio` snapshot, so related-product cards on all three sites can link them. Version 0.18.2 refreshes the `@hraness/design-kit/portfolio` snapshot from the registry: the public ghostget.com entry, updated Gobstopper and xcb naming and descriptions, and the current sibling-product relations for related-product cards. Version 0.18.1 adds the Perplexity mark and a dependency-free `@hraness/design-kit/provider-marks` leaf entry (`providerMark`, `providerMarks`, `providerMarkFallback`, `providerMarkGlyphDataUri`, `providerMarkArtDataUri`, `providerMarkOnAccent`, `providerMarkMonogram`) so packages such as `@hraness/ui` can consume the registry without pulling the marketing surface. Version 0.18.0 adds the shared provider-mark registry: `providerMarks`, `providerMark()` alias resolution, `ProviderMark`/`ProviderMarkChip` accent-tinted tile components on both React entry points, vendored agent and vendor artwork from LobeHub icons 1.95.1 plus documented Crush and Aider marks, monogram fallbacks for uncovered names, and data-URI helpers for CSS-mask consumers. See `vendor/provider-marks/UPSTREAM.md` for asset provenance. Version 0.17.2 carries the canonical portfolio messaging record per product (`names`, `category`, `tagline`, `short`, `meta`, `medium`, `long`, and hero copy) in the `/portfolio` snapshot. Version 0.17.1 lets Next.js apps that compile dependencies with Babel build the article layer: its link check no longer uses a Unicode property escape that Babel cannot rewrite, and it rejects the same control characters and whitespace as before. Version 0.17.0 adds the article layer: server-safe `MarketingArticle`, byline, provenance, sources, callout, related-product, and index components, a matching static HTML renderer for sites without React, long-form article styles in `plain-publication.css`, and the `ArticleAdmission` rubric with `assertArticleAdmissions()`. It also adds `@hraness/design-kit/portfolio`, a snapshot of public product names, one-liners, links, and relations for related-product cards and "How X uses Y" posts. See [ARTICLE_COPY.md](ARTICLE_COPY.md). Version 0.16.4 keeps native appearance-menu labels usable inside keyboard-focusable page landmarks, including mouse and touch selection. Version 0.16.3 keeps decorative hero backgrounds hidden in forced colors and reduced transparency when other packages load their styles afterward. Version 0.16.2 preserves palette hues in translucent headers, material surfaces, and decorative highlights. Version 0.16.1 keeps plain reading pages and nested compiled surfaces in their selected palette, including system appearance without JavaScript. Version 0.16.0 adds a shared bounded hero light, product-owned backdrop slots, five Lantern patterns, palette-derived soft surfaces, and responsive typography across marketing and reading layouts. Static sites can use the palette bridge for system appearance before JavaScript. See [HERO_FIELDS.md](HERO_FIELDS.md), [LANTERN_MATERIAL.md](LANTERN_MATERIAL.md), and [MARKETING_PRESET.md](MARKETING_PRESET.md). Version 0.15.0 lets `MarketingRelated` present labeled tiers of sibling products: a `groups` collection renders each tier under its own heading with an accessible card-row label, while the flat `items` shape stays available for a single group. Version 0.14.0 adds `MarketingRelated`, a collection section that presents sibling products as linked cards, each framed by its relationship to the featured product. Version 0.13.0 publishes `--hraness-sticky-offset` from sticky marketing chrome, gives `MarketingMain` and the next sticky sibling a clearance contract, stretches marketing card rows to the tallest item with a reserved two-line meta block, and clips per-card art wells so a logo surface cannot paint through the gutter. Version 0.12.0 replaces pointer-driven gradient rotation with a steady material and a moving light: the spectrum and its 115deg direction stay fixed while `--hraness-foil-x`/`--hraness-foil-y` highlights travel across each lockup, and marketing footers can opt into the same icon-plus-wordmark foil as the site header with `brandMark`. Version 0.11.1 preserves visible metallic marks when another package repeats a generic hidden atom in a later CSS layer. React consumers load `components.css` or `styles.css`; the raw marketing entry supports authored HTML hooks. Version 0.11 adds server-rendered `FoilMark` artwork and metallic text with subtle rainbow reflections, including a shared header mark seam and original-artwork fallbacks. Version 0.10.1 adds conservative server syntax defaults, includes their styles in the narrow marketing entry, and pins the icon dependency to preserve fresh Linux installs. Version 0.10 adds the shared foil contract: `.hraness-foil` surfaces and `.hraness-foil-text` wordmarks render a pointer-following metallic spectrum from the `--hraness-foil-*` custom properties, applied by default to marketing header brands and primary actions. The `attachFoil` browser export drives the bounded `x`/`y`/`angle` inputs with damped easing, reduced-motion and forced-color fallbacks, and no style injection; the same spectrum feeds `@hraness/site-footer` signup controls. Dark appearances use a deeper palette so the sheen stays visible. Version 0.8 removes Jelly's optional API, stylesheet, vendor runtime and theme-provider side effect. Migrate direct Jelly surfaces to native shared primitives before upgrading. Lantern now uses softer directional depth and shaded faces; the marketing preset adds individually shaded static cells, theme-aware terminal colors and window chrome. Code blocks retain source lines and follow the active palette. Paper preferences, semantic palettes, and compiler identity stay stable. Compiler adopters must regenerate their finalized stylesheet with the new package manifest.
 
 The complete check runs linting, typechecking, production builds, an installed-package smoke test, deterministic examples, property tests, server rendering, vendor-integrity checks, and headless Chromium regressions. The browser gate verifies responsive shell ownership, extracted AnimatedRailStage, Fader, layout-surface, and playback-transport delivery, reduced-motion stage fallback, Fader keyboard and focus behavior, forced-color behavior, keyboard-operable appearance, browser-chrome synchronization across opposing device and saved preferences, global-error static metadata and runtime lifecycle, accessible title and copy, deterministic procedural layers, viewport containment, and the absence of the excluded canvas effect. Provision the pinned Chromium with `bun run browser:install`. An explicit `CHROMIUM_EXECUTABLE_PATH` must resolve to a provisioned Chrome for Testing; the browser gate rejects installed auto-updating Chrome.
 
@@ -775,6 +807,24 @@ Import `@hraness/design-kit/product-marketing-preset.css` after your existing ma
 
 [Marketing preset contract](MARKETING_PRESET.md) documents the native HTML hooks, shared tokens, paint-only header hook, and immutable CSS/font/asset snapshots for consumers that retain an older component release. The preset leaves application UI outside its explicit scope untouched.
 
+Mockups use inline-size container queries. Give their ancestor a width or let it
+stretch in its grid or flex layout; a shrink-wrapped figure cannot infer its
+width from size-contained children. For a figure in a grid with
+`justify-items: start`, set `justify-self: stretch`, `inline-size: 100%`, and
+`min-inline-size: 0` on the figure. Keep its maximum width in the product layout.
+
 `MarketingPillars` accepts `presentation="benefits"` for a generous open grid with optional decorative `icon`, a short `label`, and one-sentence `summary`. Use explicit columns for six-item grids. Keep statistical evidence in the numerical components; benefits do not need oversized numbers. `StepThrough` uses folder tabs joined to one stable-height stage, accessible chevrons, and a screen-reader-only progress announcement. Its render functions stay mounted; use pure mockups and keep inactive panels inert. Existing step hints remain accessible without repeating them below the visual.
 
+`ProductHero layout="split"` places copy beside the frame from 64rem upwards, with proof and facts across both columns. It stays stacked on smaller screens or when no frame is present. Use `align="start"` for left-aligned copy.
+
 `ProductHero` accepts an `install` slot directly below its summary, before secondary actions, and omits an empty product name. Install commands in `PlatformInstall` use the shared shell syntax highlighter and a restrained primary border and shadow. Copying still uses the original command string.
+
+
+For a sequence that mixes terminals and reports, use `StepThrough fit="fill"`.
+Each frame fills the tallest complete slide at the current width; selecting a
+step leaves that height unchanged. This mode wraps content without scaling it,
+so `minWidth` applies only to the default natural layout. Set
+`TerminalFrame density="presentation"` inside that walkthrough to fit complete terminal lines between
+1rem and 4rem in the available width and height, without adding line wraps beyond
+the readable baseline. Keep the full lines stable
+while animating their reveal. Text zoom can increase the natural stage height.

package/dist/{chunk-vst6p4wd.js → chunk-sabcr66p.js}

@@ -34,6 +34,16 @@ var providerMarkAssets = {
     },
     art: null
   },
+  beeper: {
+    glyph: {
+      viewBox: "62 47 114 143",
+      body: '<path fill-rule="evenodd" clip-rule="evenodd" d="M62.2222 87.1665C62.2222 65.2221 79.9305 47.1665 102.312 47.1665H135.466C157.607 47.1665 175.555 65.0257 175.555 87.1665C175.529 99.0909 170.321 109.363 163.073 116.194L155.477 123.764C166.539 130.217 175.464 140.342 175.464 154.072C175.464 174.631 158.797 189.389 138.238 189.389H82.2222V121.819C70.3819 114.91 62.2222 101.987 62.2222 87.1665ZM102.312 58.2776C86.1111 58.2776 73.3333 71.2984 73.3333 87.1665C73.3333 103.035 86.1111 116.055 102.312 116.055H116.115L108.437 154.875L155.269 108.286C160.634 103.286 164.444 95.7229 164.444 87.1665C164.444 71.0554 151.25 58.104 135.466 58.2776H102.312Z" fill="currentColor"/>'
+    },
+    art: {
+      viewBox: "0 0 240 241",
+      body: '<g clip-path="url(#clip0_2816_41661)"> <rect width="240" height="240" transform="translate(0 0.5)" fill="url(#paint0_linear_2816_41661)"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M62.2222 87.1665C62.2222 65.2221 79.9305 47.1665 102.312 47.1665H135.466C157.607 47.1665 175.555 65.0257 175.555 87.1665C175.529 99.0909 170.321 109.363 163.073 116.194L155.477 123.764C166.539 130.217 175.464 140.342 175.464 154.072C175.464 174.631 158.797 189.389 138.238 189.389H82.2222V121.819C70.3819 114.91 62.2222 101.987 62.2222 87.1665ZM102.312 58.2776C86.1111 58.2776 73.3333 71.2984 73.3333 87.1665C73.3333 103.035 86.1111 116.055 102.312 116.055H116.115L108.437 154.875L155.269 108.286C160.634 103.286 164.444 95.7229 164.444 87.1665C164.444 71.0554 151.25 58.104 135.466 58.2776H102.312Z" fill="white"/> </g> <defs> <linearGradient id="paint0_linear_2816_41661" x1="240" y1="-20.4739" x2="182.953" y2="299.878" gradientUnits="userSpaceOnUse"> <stop stop-color="#6953F2"/> <stop offset="1" stop-color="#0C52F9"/> <stop offset="1" stop-color="#0C52F9"/> </linearGradient> <clipPath id="clip0_2816_41661"> <rect y="0.5" width="240" height="240" rx="120" fill="white"/> </clipPath> </defs>'
+    }
+  },
   claude: {
     glyph: {
       viewBox: "0 0 24 24",
@@ -132,6 +142,13 @@ var providerMarkAssets = {
     },
     art: null
   },
+  imessage: {
+    glyph: {
+      viewBox: "0 0 24 24",
+      body: '<path d="M5.285 0A5.273 5.273 0 0 0 0 5.285v13.43A5.273 5.273 0 0 0 5.285 24h13.43A5.273 5.273 0 0 0 24 18.715V5.285A5.273 5.273 0 0 0 18.715 0ZM12 4.154a8.809 7.337 0 0 1 8.809 7.338A8.809 7.337 0 0 1 12 18.828a8.809 7.337 0 0 1-2.492-.303A8.656 7.337 0 0 1 5.93 19.93a9.929 7.337 0 0 0 1.54-2.155 8.809 7.337 0 0 1-4.279-6.283A8.809 7.337 0 0 1 12 4.154"/>'
+    },
+    art: null
+  },
   mem0: {
     glyph: {
       viewBox: "0 0 100 100",
@@ -189,6 +206,13 @@ var providerMarkAssets = {
       body: '<path d="M9.643 14.012c.615-.183 1.605-.465 2.745-.534-.684-1.725-.849-3.235-.716-4.579.153-1.552.7-2.847 1.234-3.95.114-.235.223-.454.328-.664.149-.297.289-.577.42-.86.217-.47.378-.885.46-1.27.08-.38.08-.719-.014-1.044-.095-.325-.297-.675-.681-1.06a1.6 1.6 0 00-1.475.36l-4.95 4.453a1.602 1.602 0 00-.512.952l-.427 2.83c.67.592 2.327 2.317 3.335 4.71.09.213.174.432.253.656zM5.855 9.937c-.024.1-.057.197-.099.29L3.14 16.058a1.602 1.602 0 00.313 1.772l4.117 4.24c2.102-3.102 1.795-6.02.835-8.3-.728-1.73-1.832-3.083-2.55-3.833z" fill="#A88BFA"></path><path d="M8.52 22.57c.073.01.146.018.22.02.781.023 2.095.091 3.16.288.87.16 2.593.642 4.011 1.056 1.082.316 2.197-.548 2.354-1.664.115-.814.33-1.735.725-2.58l-.009.004c-.67-1.87-1.523-3.077-2.417-3.847a5.294 5.294 0 00-2.777-1.258c-1.541-.216-2.952.189-3.841.45.532 2.218.368 4.828-1.425 7.53z" fill="#A88BFA"></path><path d="M19.676 18.538a69.072 69.072 0 001.858-2.952.811.811 0 00-.061-.901c-.516-.684-1.504-2.075-2.042-3.362-.554-1.323-.636-3.378-.64-4.378a1.708 1.708 0 00-.359-1.051L15.235 1.83a3.757 3.757 0 01-.076.545c-.107.503-.307 1.004-.536 1.498-.135.29-.29.601-.446.915-.105.21-.21.42-.31.626-.517 1.068-.998 2.227-1.132 3.59-.125 1.262.046 2.73.814 4.484.128.01.257.025.386.043a6.364 6.364 0 013.327 1.506c.916.79 1.743 1.921 2.414 3.5z" fill="#A88BFA"></path>'
     }
   },
+  ollama: {
+    glyph: {
+      viewBox: "0 0 24 24",
+      body: '<path d="M7.905 1.09c.216.085.411.225.588.41.295.306.544.744.734 1.263.191.522.315 1.1.362 1.68a5.054 5.054 0 012.049-.636l.051-.004c.87-.07 1.73.087 2.48.474.101.053.2.11.297.17.05-.569.172-1.134.36-1.644.19-.52.439-.957.733-1.264a1.67 1.67 0 01.589-.41c.257-.1.53-.118.796-.042.401.114.745.368 1.016.737.248.337.434.769.561 1.287.23.934.27 2.163.115 3.645l.053.04.026.019c.757.576 1.284 1.397 1.563 2.35.435 1.487.216 3.155-.534 4.088l-.018.021.002.003c.417.762.67 1.567.724 2.4l.002.03c.064 1.065-.2 2.137-.814 3.19l-.007.01.01.024c.472 1.157.62 2.322.438 3.486l-.006.039a.651.651 0 01-.747.536.648.648 0 01-.54-.742c.167-1.033.01-2.069-.48-3.123a.643.643 0 01.04-.617l.004-.006c.604-.924.854-1.83.8-2.72-.046-.779-.325-1.544-.8-2.273a.644.644 0 01.18-.886l.009-.006c.243-.159.467-.565.58-1.12a4.229 4.229 0 00-.095-1.974c-.205-.7-.58-1.284-1.105-1.683-.595-.454-1.383-.673-2.38-.61a.653.653 0 01-.632-.371c-.314-.665-.772-1.141-1.343-1.436a3.288 3.288 0 00-1.772-.332c-1.245.099-2.343.801-2.67 1.686a.652.652 0 01-.61.425c-1.067.002-1.893.252-2.497.703-.522.39-.878.935-1.066 1.588a4.07 4.07 0 00-.068 1.886c.112.558.331 1.02.582 1.269l.008.007c.212.207.257.53.109.785-.36.622-.629 1.549-.673 2.44-.05 1.018.186 1.902.719 2.536l.016.019a.643.643 0 01.095.69c-.576 1.236-.753 2.252-.562 3.052a.652.652 0 01-1.269.298c-.243-1.018-.078-2.184.473-3.498l.014-.035-.008-.012a4.339 4.339 0 01-.598-1.309l-.005-.019a5.764 5.764 0 01-.177-1.785c.044-.91.278-1.842.622-2.59l.012-.026-.002-.002c-.293-.418-.51-.953-.63-1.545l-.005-.024a5.352 5.352 0 01.093-2.49c.262-.915.777-1.701 1.536-2.269.06-.045.123-.09.186-.132-.159-1.493-.119-2.73.112-3.67.127-.518.314-.95.562-1.287.27-.368.614-.622 1.015-.737.266-.076.54-.059.797.042zm4.116 9.09c.936 0 1.8.313 2.446.855.63.527 1.005 1.235 1.005 1.94 0 .888-.406 1.58-1.133 2.022-.62.375-1.451.557-2.403.557-1.009 0-1.871-.259-2.493-.734-.617-.47-.963-1.13-.963-1.845 0-.707.398-1.417 1.056-1.946.668-.537 1.55-.849 2.485-.849zm0 .896a3.07 3.07 0 00-1.916.65c-.461.37-.722.835-.722 1.25 0 .428.21.829.61 1.134.455.347 1.124.548 1.943.548.799 0 1.473-.147 1.932-.426.463-.28.7-.686.7-1.257 0-.423-.246-.89-.683-1.256-.484-.405-1.14-.643-1.864-.643zm.662 1.21l.004.004c.12.151.095.37-.056.49l-.292.23v.446a.375.375 0 01-.376.373.375.375 0 01-.376-.373v-.46l-.271-.218a.347.347 0 01-.052-.49.353.353 0 01.494-.051l.215.172.22-.174a.353.353 0 01.49.051zm-5.04-1.919c.478 0 .867.39.867.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zm8.706 0c.48 0 .868.39.868.871a.87.87 0 01-.868.871.87.87 0 01-.867-.87.87.87 0 01.867-.872zM7.44 2.3l-.003.002a.659.659 0 00-.285.238l-.005.006c-.138.189-.258.467-.348.832-.17.692-.216 1.631-.124 2.782.43-.128.899-.208 1.404-.237l.01-.001.019-.034c.046-.082.095-.161.148-.239.123-.771.022-1.692-.253-2.444-.134-.364-.297-.65-.453-.813a.628.628 0 00-.107-.09L7.44 2.3zm9.174.04l-.002.001a.628.628 0 00-.107.09c-.156.163-.32.45-.453.814-.29.794-.387 1.776-.23 2.572l.058.097.008.014h.03a5.184 5.184 0 011.466.212c.086-1.124.038-2.043-.128-2.722-.09-.365-.21-.643-.349-.832l-.004-.006a.659.659 0 00-.285-.239h-.004z"></path>'
+    },
+    art: null
+  },
   openai: {
     glyph: {
       viewBox: "0 0 24 24",
@@ -230,6 +254,20 @@ var providerMarkAssets = {
     },
     art: null
   },
+  vercel: {
+    glyph: {
+      viewBox: "0 0 24 24",
+      body: '<path d="M12 0l12 20.785H0L12 0z"></path>'
+    },
+    art: null
+  },
+  whatsapp: {
+    glyph: {
+      viewBox: "0 0 24 24",
+      body: '<path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>'
+    },
+    art: null
+  },
   xai: {
     glyph: {
       viewBox: "0 0 24 24",
@@ -304,6 +342,12 @@ var MARK_SPECS = {
     kind: "vendor",
     name: "Anthropic"
   },
+  beeper: {
+    accent: "#6953f2",
+    aliases: ["beeper", "beeper chat"],
+    kind: "vendor",
+    name: "Beeper"
+  },
   claude: {
     accent: "#d97757",
     aliases: ["claude"],
@@ -370,6 +414,12 @@ var MARK_SPECS = {
     kind: "agent",
     name: "Goose"
   },
+  imessage: {
+    accent: "#34da50",
+    aliases: ["imessage", "apple messages"],
+    kind: "vendor",
+    name: "iMessage"
+  },
   mem0: {
     accent: "#cbb2ff",
     aliases: ["mem0", "memzero"],
@@ -406,6 +456,12 @@ var MARK_SPECS = {
     kind: "vendor",
     name: "Obsidian"
   },
+  ollama: {
+    accent: "#111111",
+    aliases: ["ollama"],
+    kind: "vendor",
+    name: "Ollama"
+  },
   openai: {
     accent: "#0f1014",
     aliases: ["openai", "chatgpt", "gpt"],
@@ -436,6 +492,18 @@ var MARK_SPECS = {
     kind: "vendor",
     name: "Supermemory"
   },
+  vercel: {
+    accent: "#000000",
+    aliases: ["vercel", "vercel ai gateway"],
+    kind: "vendor",
+    name: "Vercel"
+  },
+  whatsapp: {
+    accent: "#25d366",
+    aliases: ["whatsapp", "whats app"],
+    kind: "vendor",
+    name: "WhatsApp"
+  },
   xai: {
     accent: "#1a1a1a",
     aliases: ["xai", "x.ai", "grok", "spacexai"],

package/dist/{chunk-fmeg5cxf.js → chunk-thv5t11w.js}

@@ -13,7 +13,7 @@ import {
   mixPaletteColor,
   paletteContrast,
   readablePaletteColor
-} from "./chunk-vst6p4wd.js";
+} from "./chunk-sabcr66p.js";
 
 // src/palettes.ts
 var designPalettes = ["catppuccin", "gruvbox", "rose-pine", "tokyo-night", "paper"];

package/dist/{chunk-4tgt8egt.js → chunk-v8byd3hw.js}

@@ -30,7 +30,7 @@ import {
   providerMark,
   providerMarkFallback,
   providerMarkOnAccent
-} from "./chunk-vst6p4wd.js";
+} from "./chunk-sabcr66p.js";
 
 // src/react/provider-mark.stylex.ts
 import * as stylex from "@stylexjs/stylex";
@@ -683,6 +683,11 @@ var marketingStyles = {
     kyVV8l: "x1hl2dhg",
     $$css: true
   },
+  heroSplit: {
+    kg9kkx: "x1mkdm3x x13f99nf",
+    kkeX5w: "x6s0dn4",
+    $$css: true
+  },
   hero: {
     kVAEAm: "x1n2onr6",
     kHBbk8: "xc8icb0",
@@ -2331,6 +2336,40 @@ var marketingStyles = {
     kyVV8l: "x1hl2dhg",
     $$css: true
   },
+  cardIcon: {
+    k1xSpc: "xrvj5dj",
+    kg9kkx: "xrdwe0",
+    kkeX5w: "x6s0dn4",
+    kOIVth: "x8fetqu",
+    kmVPX3: "x1aetswf",
+    kI3sdo: "xg81e2w",
+    kVtf5F: "xj3ae5l",
+    $$css: true
+  },
+  card__icon: {
+    k1xSpc: "x78zum5",
+    kkeX5w: "x6s0dn4",
+    kGmCso: "xl56j7k",
+    kULEZF: "x1pf0uk5",
+    kLWsYc: "x1vlpzvb",
+    kdYMnH: "xesnm00",
+    kLXb5Q: "x47corl",
+    $$css: true
+  },
+  card__copy: {
+    k1xSpc: "xrvj5dj",
+    kNk6WL: "xc26acl",
+    kdYMnH: "xesnm00",
+    kOIVth: "x73f2yu",
+    $$css: true
+  },
+  cardMetaIcon: {
+    kVQacm: "x1rea2x4",
+    kVQ08L: "x159srwy",
+    kLO5vc: "x1vj640n",
+    k7QVf6: "xj0a0fe",
+    $$css: true
+  },
   card__art: {
     k1xSpc: "x78zum5",
     kVZ5iK: "x1c4vz4f",
@@ -3612,7 +3651,14 @@ var recipes = {
     default: marketingStyles.card_row
   },
   "hraness-marketing-card": {
-    default: marketingStyles.card
+    default: marketingStyles.card,
+    icon: [marketingStyles.card, marketingStyles.cardIcon]
+  },
+  "hraness-marketing-card__icon": {
+    default: marketingStyles.card__icon
+  },
+  "hraness-marketing-card__copy": {
+    default: marketingStyles.card__copy
   },
   "hraness-marketing-card__art": {
     default: marketingStyles.card__art
@@ -3621,7 +3667,8 @@ var recipes = {
     default: marketingStyles.card__title
   },
   "hraness-marketing-card__meta": {
-    default: marketingStyles.card__meta
+    default: marketingStyles.card__meta,
+    icon: [marketingStyles.card__meta, marketingStyles.cardMetaIcon]
   },
   "hraness-marketing-card__body": {
     default: marketingStyles.card__body
@@ -3764,6 +3811,22 @@ function marketingClassName(hook, caller, variant = "default") {
   const selected = variants[variant];
   return [hook, stylex3.props(selected, hook === "hraness-marketing-action" && marketingStyles.actionFocus, hook === "hraness-marketing-question" && questionMarker).className, caller].filter((value) => value !== undefined && value.length > 0).join(" ");
 }
+function marketingHeroClassName(caller, tone, split) {
+  return ["hraness-marketing-hero", {
+    0: {
+      className: "x1n2onr6 xc8icb0 xtylnni xrtw95r x19vpta5 xesnm00 xvueqy4 xrvj5dj x1kfhdh0 xgu4rd8"
+    },
+    2: {
+      className: "x1n2onr6 xc8icb0 x102ovp5 xs5hli xrtw95r x19vpta5 xesnm00 xvueqy4 xrvj5dj x1kfhdh0 xgu4rd8 xvor1dj x9yvj25 x18o3ruo xhobzj1 x1y4qj14 x2c5uud x103pssi x1ug5rqp x182nak8 x1pjo12s x12koezg xzln6ae x1u7o2vf x1tzqu68 x1fdtg7e xcrev8p x5kubdt xwaqzdf xmdugnb x18z9243 xv2i73l xtthz4l xug5yj x1cfjbvc x1a4igh8 xsdpl10 x1sz4vi2 x4aylkk"
+    },
+    1: {
+      className: "x1n2onr6 xc8icb0 xtylnni xrtw95r x19vpta5 xesnm00 xvueqy4 xrvj5dj x1kfhdh0 xgu4rd8 x1mkdm3x x13f99nf x6s0dn4"
+    },
+    3: {
+      className: "x1n2onr6 xc8icb0 x102ovp5 xs5hli xrtw95r x19vpta5 xesnm00 xvueqy4 xrvj5dj x1kfhdh0 xgu4rd8 xvor1dj x9yvj25 x18o3ruo xhobzj1 x1y4qj14 x2c5uud x103pssi x1ug5rqp x182nak8 x1pjo12s x12koezg xzln6ae x1u7o2vf x1tzqu68 x1fdtg7e xcrev8p x5kubdt xwaqzdf xmdugnb x18z9243 xv2i73l xtthz4l xug5yj x1cfjbvc x1a4igh8 xsdpl10 x1sz4vi2 x4aylkk x1mkdm3x x13f99nf x6s0dn4"
+    }
+  }[!!(tone === "accent") << 1 | !!split << 0].className, caller].filter((value) => value !== undefined && value.length > 0).join(" ");
+}
 function marketingFactCellVariant(index) {
   return index === 0 ? "default" : index < 2 ? "later" : index % 2 === 0 ? "row-odd" : "row";
 }
@@ -3902,16 +3965,7 @@ function MarketingCardRow({
     "data-hraness-marketing": "card-row",
     children: [
       cards?.map((card) => /* @__PURE__ */ jsx3(MarketingCard, {
-        title: card.title,
-        ...card.art === undefined ? {} : {
-          art: card.art
-        },
-        ...card.href === undefined ? {} : {
-          href: card.href
-        },
-        ...card.meta === undefined ? {} : {
-          meta: card.meta
-        }
+        ...card
       }, card.title)),
       children
     ]
@@ -3935,38 +3989,62 @@ function MarketingCard({
   children,
   className,
   href,
+  icon,
   meta,
   title
 }) {
-  const body = /* @__PURE__ */ jsxs3(Fragment2, {
+  const hasIcon = isPresentNode(icon);
+  if (hasIcon && isPresentNode(art))
+    throw new RangeError("Marketing cards accept either icon or art, not both.");
+  const copy = /* @__PURE__ */ jsxs3(Fragment2, {
     children: [
-      isPresentNode(art) ? /* @__PURE__ */ jsx3(MarketingCardArt, {
-        children: art
-      }) : null,
       /* @__PURE__ */ jsx3("h3", {
         className: marketingClassName("hraness-marketing-card__title"),
         children: title
       }),
-      meta === undefined || meta === "" ? null : /* @__PURE__ */ jsx3("p", {
-        className: marketingClassName("hraness-marketing-card__meta"),
+      isPresentNode(meta) ? /* @__PURE__ */ jsx3("p", {
+        className: marketingClassName("hraness-marketing-card__meta", undefined, hasIcon ? "icon" : "default"),
         children: meta
-      }),
+      }) : null,
       isPresentNode(children) ? /* @__PURE__ */ jsx3("div", {
         className: marketingClassName("hraness-marketing-card__body"),
         children
       }) : null
     ]
   });
+  const body = hasIcon ? /* @__PURE__ */ jsxs3(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsx3("div", {
+        "aria-hidden": "true",
+        className: marketingClassName("hraness-marketing-card__icon"),
+        children: icon
+      }),
+      /* @__PURE__ */ jsx3("div", {
+        className: marketingClassName("hraness-marketing-card__copy"),
+        children: copy
+      })
+    ]
+  }) : /* @__PURE__ */ jsxs3(Fragment2, {
+    children: [
+      isPresentNode(art) ? /* @__PURE__ */ jsx3(MarketingCardArt, {
+        children: art
+      }) : null,
+      copy
+    ]
+  });
+  const cardClassName = marketingClassName("hraness-marketing-card", className, hasIcon ? "icon" : "default");
   if (href === undefined) {
     return /* @__PURE__ */ jsx3("article", {
-      className: marketingClassName("hraness-marketing-card", className),
+      className: cardClassName,
       "data-hraness-marketing": "card",
+      "data-layout": hasIcon ? "icon" : undefined,
       children: body
     });
   }
   return /* @__PURE__ */ jsx3("a", {
-    className: marketingClassName("hraness-marketing-card", className),
+    className: cardClassName,
     "data-hraness-marketing": "card",
+    "data-layout": hasIcon ? "icon" : undefined,
     href,
     children: body
   });
@@ -4178,17 +4256,22 @@ function ProductHero({
   headingId,
   headingLevel = 1,
   install,
+  layout = "stack",
   name,
   notice,
   proof,
   summary,
   tone = "paper"
 }) {
+  if (layout !== "stack" && layout !== "split")
+    throw new RangeError("Hero layout must be stack or split.");
+  const split = layout === "split" && isPresentNode(frame);
   return /* @__PURE__ */ jsxs3("header", {
     "aria-labelledby": headingId,
-    className: marketingClassName("hraness-marketing-hero", className, tone === "accent" ? "accent" : "default"),
+    className: marketingHeroClassName(className, tone, split),
     "data-align": align,
     "data-hraness-marketing": "hero",
+    "data-layout": split ? "split" : undefined,
     "data-tone": tone,
     children: [
       /* @__PURE__ */ jsxs3("div", {

package/dist/index.js

@@ -64,7 +64,7 @@ import {
   themeFor,
   typeScale,
   typography
-} from "./chunk-fmeg5cxf.js";
+} from "./chunk-thv5t11w.js";
 import {
   diagramMetrics
 } from "./chunk-gmea6p0d.js";
@@ -124,7 +124,7 @@ import {
   providerMarkMonogram,
   providerMarkOnAccent,
   providerMarks
-} from "./chunk-vst6p4wd.js";
+} from "./chunk-sabcr66p.js";
 import"./chunk-5gtx3pza.js";
 export {
   typography,