@hraness/design-kit 0.35.0 → 0.35.1

package/AGENT_SETUP.md

@@ -13,6 +13,7 @@ import { AgentCommandTabs, AgentSetupPrompt } from "@hraness/design-kit/react";
   label="Set up Relay with your agent"
   prompt={setupPrompt}
   targets={agentSetupTargets(setupPrompt)}
+  targetsPlacement="below"
 />
 <AgentCommandTabs commands={[
   { id: "terminal", label: "Codex", mark: "codex", command: "relay init" },
@@ -24,6 +25,9 @@ The prompt preview clips long text with a bottom fade. Copy sits at the
 bottom right and copies the complete source. A native disclosure reveals
 the complete prompt without JavaScript. Provider actions move beside the
 preview when the containing block is wide enough; narrower blocks stack.
+Set `targetsPlacement="below"` to keep actions under the prompt in a compact
+grid with up to three columns. Prompt, command-tab, and platform-install copy
+buttons share the same 44-pixel minimum height and visual treatment.
 The optional `onCopied` callback runs after a successful copy. Its errors
 cannot change clipboard feedback.
 

package/ARTICLE_COPY.md

@@ -118,13 +118,18 @@ Title: "How <consumer> uses <provider>". It lives on the consumer's host.
 
 A provider may keep one page, such as "Built on <provider>", that lists the products using it. Each entry is the registered relation's own sentence and a link to the consumer's "How <consumer> uses <provider>" post when one exists. The hub is an index. It does not restate each post.
 
-### Technique posts in two halves
+### Technique posts
 
 A technique post teaches one method, such as property tests, model checking, or proofs. It lives on hraness.com, and a product host may carry a product-specific version that shows the technique inside that product.
 
-- **First half, for any reader.** Ground it in problems people already know, such as vibe-coded slop (software a model wrote quickly that looks finished and breaks on the second use) and fragile foundations (a product built on code nobody checked). Use one familiar failure ("It only breaks if you save, lose connection, then reopen"). Then describe the brighter alternative: what it is like when a whole class of that failure cannot happen. No code or notation in this half.
-- **Second half, how Hraness does it.** Show the method with durable examples: laws, invariants, and small code excerpts that still read correctly after a refactor. Cite the repository file that holds the real example. Avoid line numbers and file names that change often, and keep internal jargon to the one term the technique needs.
-- End on the last supported fact. State what the technique does not prove, once, at its true scope.
+- Answer one useful question. Explain the reasoning with a concrete example the reader can follow, using code or notation where it helps.
+- Use public references when they clarify the method or support a claim. A product example belongs only when it helps answer the question; neither Hraness code nor a product recommendation is required.
+- Keep internal build diaries, verification logs, and implementation chronology out of the article. Teach the method in the order the reader needs it.
+- End on the last supported fact. State a material limitation where it changes the reader’s decision; do not append a generic disclaimer.
+
+### Illustrations
+
+Follow the [shared illustration guidance](https://github.com/hraness/.github/blob/main/STYLE.md). Use SlopCamera to create an illustration when it helps explain the article, with a limited brand palette and a reference that establishes the intended visual style. Record the tools, model, references, and actual asset source used; do not substitute a generic provenance claim. Keep captions useful and optional.
 
 ## Titles and formulas
 
@@ -152,10 +157,10 @@ Some products can be pointed at other people's accounts or data: authenticated b
 
 ## Drafting and review note
 
-Every article states who drafted it and who reviewed it, visibly, on every host. The owner decided this on 2026-09-23, as relayed to the task that added this guide. It applies to articles only; other pages follow `STYLE.md`.
+Every article states who drafted it and who reviewed it, visibly, on every host. This applies to articles only; other pages follow `STYLE.md`.
 
 - Render `ArticleProvenance`, or the `provenance` prop of `MarketingArticle`, from the admission record with `articleProvenanceFromAdmission()`. Do not type the sentence by hand.
-- An AI-drafted post from repository sources reads: "Drafted with AI from the source code and reviewed by <reviewer>."
+- The default AI drafting kind is `ai`: "Drafted with AI and reviewed by <reviewer>." Use `ai-from-source` and its "from the source code" wording only when the article was drafted from source code.
 - Name the reviewer as it is. An AI reviewer has `reviewerType: "ai"` and a name that says it is AI, for example "Claude Opus 5.5 (claude-opus-5-5) editorial review". The sentence says "human" only when `reviewerType` is `human-editor`.
 - Keep `humanReview` null unless a person reviewed the article. Never describe AI review as human review.
 - The byline is "Hraness" on every host. Do not credit a person, including the owner, for an AI-drafted post. A person who later adopts a post may switch the byline to their own name; the drafting and review note stays.
@@ -172,6 +177,7 @@ Every article URL has an `ArticleAdmission` record in its host's registry, check
 
 ## Freshness
 
+- Keep review, publication, and update metadata truthful. Educational bodies do not need repeated "as of" dates, build identifiers, or freshness labels; include a date or version in the prose only when the explanation depends on it.
 - Every record has `reassessOn`, 28 to 56 days after `review.reviewedOn`. `articleAdmissionsDue(registry, today)` lists the records to look at again.
 - Render versions, release dates, and status labels from release data (`package.json`, a published release file, or the portfolio facts). Never type a version into an article body.
 - Each record names its refresh triggers: a release tag bump, a change to a relation's `detail`, a rename, or a change to the feature the post describes.

package/README.md

@@ -11,7 +11,7 @@ Pin a GitHub release tag:
 ```json
 {
   "dependencies": {
-    "@hraness/design-kit": "github:hraness/design-kit#v0.35.0",
+    "@hraness/design-kit": "github:hraness/design-kit#v0.35.1",
     "@hraness/ui": "github:hraness/ui#v0.5.17"
   }
 }
@@ -23,6 +23,10 @@ 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 agent setup and consistent copying
+
+Version 0.35.1 adds `AgentSetupPrompt.targetsPlacement="below"` for a compact provider grid beneath the prompt. Prompt, agent-command, and platform-install copy actions share a 44-pixel control. Platform requirements appear in the terminal footer. Clipboard fallbacks, copy-before-open handoffs, keyboard controls, and no-script access remain available. The article guide also centers technique posts on the reader’s question, with accurate drafting notes and focused illustration guidance.
+
 ### Clearer marketing controls and agent setup
 
 Version 0.35.0 aligns related tools with the studio's portfolio categories and compact product cards. It adds account sections and matching actions, a compact comparison table, shared SVG diagram conventions, open benefit grids, and an install-first hero slot. Walkthroughs use folder tabs and a stable stage with accessible chevron controls. Install commands use shell syntax colors and a quiet primary border; ordinary links use dotted underlines.
@@ -749,7 +753,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.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 stable dependency pair for this release is `@hraness/ui` `v0.5.17` with `@hraness/design-kit` `v0.35.1`. 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.
 

package/dist/{chunk-c9mhn3yb.js → chunk-6bfr0g23.js}

@@ -1,7 +1,7 @@
 import {
   SyntaxCode,
   platformInstallClassName
-} from "./chunk-fjf81bww.js";
+} from "./chunk-6ts4955n.js";
 import {
   diagramMetrics
 } from "./chunk-gmea6p0d.js";

package/dist/{chunk-fjf81bww.js → chunk-6ts4955n.js}

@@ -214,38 +214,6 @@ var platformInstallStyles = {
     kmVPX3: "x1717udv",
     $$css: true
   },
-  copy: {
-    kGNEyG: "x6s0dn4",
-    kysU6D: "xjyslct",
-    kWkggS: "xf7cb96 x3oli7v xnwy5bs",
-    kVAM5u: "x1ls9zlr x1ylmb6m",
-    kaIpWk: "x116uinm",
-    ksu8eU: "x1y0btm7",
-    kMzoRj: "xmkeg23",
-    kB7OPa: "x9f619",
-    kMwMTN: "x1p5laik x1ggml12",
-    kkrTdU: "x1ypdohk",
-    k1xSpc: "x3nfvp2 x1cfwndu",
-    kmuXW: "x2lah0s",
-    kMv6JI: "x1vnz01h",
-    kGuDYH: "x1dcheo9",
-    k63SB2: "xk50ysn",
-    kOIVth: "x73f2yu",
-    kLWn49: "xo5v014",
-    kogj98: "x1ghz6dp",
-    kAzted: "x1in32aq x1rewkhn",
-    kI3sdo: "x1a2a7pz x11dsm9b",
-    kInvED: "x1y3gkto",
-    k8WAf4: "x1267ecw",
-    kg3NbH: "x1f6otoe",
-    $$css: true
-  },
-  copyIcon: {
-    kZKoxP: "x1at03k5",
-    kmuXW: "x2lah0s",
-    kzqmXN: "x2tfi8i",
-    $$css: true
-  },
   alternatives: {
     k1xSpc: "xrvj5dj",
     kOIVth: "x1uma3xh",
@@ -262,6 +230,14 @@ var platformInstallStyles = {
     kogj98: "x1ghz6dp",
     $$css: true
   },
+  commandNote: {
+    kLZC3w: "x1h3am7x x19dwuzr",
+    kPef9Z: "x13fuv20",
+    kEafiO: "x178xt8z",
+    k8WAf4: "x8fiyw4",
+    kg3NbH: "x1fi0nvg",
+    $$css: true
+  },
   unavailable: {
     kVAM5u: "x1ls9zlr x1w1tqly",
     kaIpWk: "x1yt6v20",
@@ -367,8 +343,6 @@ var hooks = {
   code: "hraness-platform-install__code",
   command: "hraness-platform-install__command",
   commandBar: "hraness-platform-install__command-bar",
-  copy: "hraness-platform-install__copy",
-  copyIcon: "hraness-platform-install__copy-icon",
   icon: "hraness-platform-icon",
   markSymbols: "hraness-platform-install__marks",
   note: "hraness-platform-install__note",

package/dist/{chunk-8xfssb9c.js → chunk-tzd7177a.js}

@@ -1,7 +1,7 @@
 import {
   SyntaxCode,
   platformInstallClassName
-} from "./chunk-fjf81bww.js";
+} from "./chunk-6ts4955n.js";
 import {
   detectPlatform,
   isKnownPlatformId,
@@ -13,7 +13,102 @@ import {
 
 // src/react/platform-install.tsx
 import { useCallback, useEffect, useId, useRef, useState } from "react";
+
+// src/react/setup-copy-button.stylex.ts
+import * as stylex from "@stylexjs/stylex";
+var setupCopyButtonStyles = {
+  button: {
+    kGNEyG: "x6s0dn4",
+    kysU6D: "xjyslct",
+    kWkggS: "x17tv4j5 x1lf5oka xnwy5bs",
+    kVAM5u: "x3ugid2 x1ylmb6m",
+    kaIpWk: "x116uinm",
+    ksu8eU: "x1y0btm7",
+    kMzoRj: "xmkeg23",
+    kB7OPa: "x9f619",
+    kMwMTN: "xm06a53 x1ggml12",
+    kkrTdU: "x1ypdohk",
+    k1xSpc: "x3nfvp2 x1cfwndu",
+    kmuXW: "x2lah0s",
+    kMv6JI: "xtls1wf",
+    kGuDYH: "x1dcheo9",
+    k63SB2: "xk50ysn",
+    kOIVth: "x1neeqzj",
+    kjj79g: "xl56j7k",
+    kLWn49: "xo5v014",
+    kogj98: "x1ghz6dp",
+    kAzted: "xgbkey0",
+    kI3sdo: "x1a2a7pz xr5lfjo",
+    kInvED: "x1hl8ikr",
+    kmVPX3: "x1i4hug3",
+    $$css: true
+  },
+  icon: {
+    kZKoxP: "x1l36t39",
+    kmuXW: "x2lah0s",
+    kzqmXN: "xcdlrvm",
+    $$css: true
+  }
+};
+function setupCopyButtonClassName(part, caller) {
+  return [`hraness-setup-copy__${part}`, stylex.props(setupCopyButtonStyles[part]).className, caller].filter(Boolean).join(" ");
+}
+
+// src/react/setup-copy-button.tsx
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+function SetupCopyButton({
+  className,
+  iconClassName,
+  onCopy,
+  state,
+  subject,
+  failedLabel = "Copy failed"
+}) {
+  return /* @__PURE__ */ jsxs("button", {
+    "aria-busy": state === "copying" || undefined,
+    "aria-label": `${state === "copied" ? "Copied" : "Copy"} ${subject}`,
+    className: setupCopyButtonClassName("button", className),
+    "data-copy-state": state,
+    disabled: state === "copying",
+    onClick: onCopy,
+    type: "button",
+    children: [
+      /* @__PURE__ */ jsx("svg", {
+        "aria-hidden": "true",
+        className: setupCopyButtonClassName("icon", iconClassName),
+        fill: "none",
+        focusable: "false",
+        stroke: "currentColor",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        strokeWidth: 2,
+        viewBox: "0 0 24 24",
+        children: state === "copied" ? /* @__PURE__ */ jsx("path", {
+          d: "M5 12.5l4.5 4.5L19 7.5"
+        }) : /* @__PURE__ */ jsxs(Fragment, {
+          children: [
+            /* @__PURE__ */ jsx("rect", {
+              height: "12",
+              rx: "2",
+              width: "12",
+              x: "8",
+              y: "8"
+            }),
+            /* @__PURE__ */ jsx("path", {
+              d: "M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"
+            })
+          ]
+        })
+      }),
+      /* @__PURE__ */ jsx("span", {
+        children: state === "copied" ? "Copied" : state === "copying" ? "Copying" : state === "failed" ? failedLabel : "Copy"
+      })
+    ]
+  });
+}
+
+// src/react/platform-install.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var copyResetMilliseconds = 2000;
 function assertTargets(platforms, defaultPlatform) {
   if (platforms.length === 0)
@@ -82,17 +177,17 @@ function PlatformMarkSymbols({
   ids,
   symbolId
 }) {
-  return /* @__PURE__ */ jsx("svg", {
+  return /* @__PURE__ */ jsx2("svg", {
     "aria-hidden": "true",
     className: platformInstallClassName(["markSymbols"]),
     focusable: "false",
     xmlns: "http://www.w3.org/2000/svg",
     children: ids.map((id) => {
       const mark = platformMark(id);
-      return /* @__PURE__ */ jsx("symbol", {
+      return /* @__PURE__ */ jsx2("symbol", {
         id: symbolId(id),
         viewBox: mark.viewBox,
-        children: /* @__PURE__ */ jsx("path", {
+        children: /* @__PURE__ */ jsx2("path", {
           d: mark.path
         })
       }, id);
@@ -103,7 +198,7 @@ function PlatformMarkUse({
   platform,
   symbolId
 }) {
-  return /* @__PURE__ */ jsx("svg", {
+  return /* @__PURE__ */ jsx2("svg", {
     "aria-hidden": "true",
     className: platformInstallClassName(["icon"]),
     "data-platform": platform,
@@ -111,97 +206,58 @@ function PlatformMarkUse({
     focusable: "false",
     viewBox: platformMark(platform).viewBox,
     xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ jsx("use", {
+    children: /* @__PURE__ */ jsx2("use", {
       href: `#${symbolId}`
     })
   });
 }
-function CopyGlyph({
-  copied
-}) {
-  return /* @__PURE__ */ jsx("svg", {
-    "aria-hidden": "true",
-    className: platformInstallClassName(["copyIcon"]),
-    fill: "none",
-    focusable: "false",
-    stroke: "currentColor",
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    strokeWidth: 2,
-    viewBox: "0 0 24 24",
-    children: copied ? /* @__PURE__ */ jsx("path", {
-      d: "M5 12.5l4.5 4.5L19 7.5"
-    }) : /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx("rect", {
-          height: "12",
-          rx: "2",
-          width: "12",
-          x: "8",
-          y: "8"
-        }),
-        /* @__PURE__ */ jsx("path", {
-          d: "M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2"
-        })
-      ]
-    })
-  });
-}
 function CommandBlock({
   caption,
   command,
   copyKey,
   onCopy,
+  note,
   status,
   subject
 }) {
   const preRef = useRef(null);
   const state = status?.key === copyKey ? status.ok ? "copied" : "failed" : "idle";
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsxs2("div", {
     className: platformInstallClassName(["command"]),
     "data-copy-state": state,
     children: [
-      /* @__PURE__ */ jsxs("div", {
+      /* @__PURE__ */ jsxs2("div", {
         className: platformInstallClassName(["commandBar", (caption === undefined || caption === "") && "commandBarEmpty"]),
         children: [
-          /* @__PURE__ */ jsx("span", {
+          /* @__PURE__ */ jsx2("span", {
             className: platformInstallClassName(["shell"]),
             children: caption
           }),
-          /* @__PURE__ */ jsxs("button", {
-            className: platformInstallClassName(["copy"]),
-            "data-copy-state": state,
-            onClick: () => onCopy(copyKey, command, subject, preRef.current),
-            type: "button",
-            children: [
-              /* @__PURE__ */ jsx(CopyGlyph, {
-                copied: state === "copied"
-              }),
-              /* @__PURE__ */ jsx("span", {
-                children: state === "copied" ? "Copied" : state === "failed" ? "Select to copy" : "Copy"
-              }),
-              /* @__PURE__ */ jsxs("span", {
-                className: platformInstallClassName(["status"]),
-                children: [
-                  " ",
-                  subject
-                ]
-              })
-            ]
+          /* @__PURE__ */ jsx2(SetupCopyButton, {
+            className: "hraness-platform-install__copy",
+            iconClassName: "hraness-platform-install__copy-icon",
+            failedLabel: "Select to copy",
+            onCopy: () => onCopy(copyKey, command, subject, preRef.current),
+            state,
+            subject
           })
         ]
       }),
-      /* @__PURE__ */ jsx("pre", {
+      /* @__PURE__ */ jsx2("pre", {
         "aria-label": subject,
         className: platformInstallClassName(["pre"]),
         ref: preRef,
         tabIndex: 0,
-        children: /* @__PURE__ */ jsx(SyntaxCode, {
+        children: /* @__PURE__ */ jsx2(SyntaxCode, {
           className: platformInstallClassName(["code"]),
           code: command,
           language: "shell",
           styles: "classes"
         })
+      }),
+      note === undefined ? null : /* @__PURE__ */ jsx2("div", {
+        className: platformInstallClassName(["note", "commandNote"]),
+        children: note
       })
     ]
   });
@@ -286,25 +342,25 @@ function PlatformInstall({
     event.preventDefault();
     choose(target, true);
   };
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsxs2("div", {
     className: platformInstallClassName(["root"], className),
     "data-hraness-platform-install": "",
     "data-selected-platform": current,
     "data-selection-source": source,
     id,
     children: [
-      /* @__PURE__ */ jsx(PlatformMarkSymbols, {
+      /* @__PURE__ */ jsx2(PlatformMarkSymbols, {
         ids,
         symbolId
       }),
-      /* @__PURE__ */ jsx("div", {
+      /* @__PURE__ */ jsx2("div", {
         "aria-label": label,
         className: platformInstallClassName(["tablist"]),
         onKeyDown,
         role: "tablist",
         children: platforms.map((target) => {
           const isSelected = target.id === current;
-          return /* @__PURE__ */ jsxs("button", {
+          return /* @__PURE__ */ jsxs2("button", {
             "aria-controls": `${baseId}-panel-${target.id}`,
             "aria-selected": isSelected,
             className: platformInstallClassName(["tab", isSelected && "tabSelected"]),
@@ -322,11 +378,11 @@ function PlatformInstall({
             tabIndex: isSelected ? 0 : -1,
             type: "button",
             children: [
-              /* @__PURE__ */ jsx(PlatformMarkUse, {
+              /* @__PURE__ */ jsx2(PlatformMarkUse, {
                 platform: target.id,
                 symbolId: symbolId(target.id)
               }),
-              /* @__PURE__ */ jsx("span", {
+              /* @__PURE__ */ jsx2("span", {
                 className: platformInstallClassName(["tabLabel"]),
                 children: labelOf(target)
               })
@@ -337,7 +393,7 @@ function PlatformInstall({
       platforms.map((target) => {
         const name = labelOf(target);
         const alternatives = target.alternatives ?? [];
-        return /* @__PURE__ */ jsx("div", {
+        return /* @__PURE__ */ jsx2("div", {
           "aria-labelledby": `${baseId}-tab-${target.id}`,
           className: platformInstallClassName(["panel"]),
           "data-availability": target.unavailable === true ? "unavailable" : "available",
@@ -345,38 +401,39 @@ function PlatformInstall({
           hidden: target.id !== current,
           id: `${baseId}-panel-${target.id}`,
           role: "tabpanel",
-          children: /* @__PURE__ */ jsxs("div", {
+          children: /* @__PURE__ */ jsxs2("div", {
             className: platformInstallClassName(["panelBody"]),
             children: [
-              /* @__PURE__ */ jsxs("p", {
+              /* @__PURE__ */ jsxs2("p", {
                 className: platformInstallClassName(["panelLabel"]),
                 children: [
-                  /* @__PURE__ */ jsx(PlatformMarkUse, {
+                  /* @__PURE__ */ jsx2(PlatformMarkUse, {
                     platform: target.id,
                     symbolId: symbolId(target.id)
                   }),
-                  /* @__PURE__ */ jsx("span", {
+                  /* @__PURE__ */ jsx2("span", {
                     children: name
                   })
                 ]
               }),
-              target.unavailable === true ? /* @__PURE__ */ jsx("div", {
+              target.unavailable === true ? /* @__PURE__ */ jsx2("div", {
                 className: platformInstallClassName(["unavailable"]),
                 children: target.unavailableNote
               }) : null,
-              target.command === undefined ? null : /* @__PURE__ */ jsx(CommandBlock, {
+              target.command === undefined ? null : /* @__PURE__ */ jsx2(CommandBlock, {
                 caption: target.shell,
                 command: target.command,
                 copyKey: `${target.id}:primary`,
                 onCopy: copy,
+                note: target.note,
                 status,
                 subject: `${name} install command`
               }),
-              alternatives.length === 0 ? null : /* @__PURE__ */ jsx("ul", {
+              alternatives.length === 0 ? null : /* @__PURE__ */ jsx2("ul", {
                 "aria-label": `Other ways to install on ${name}`,
                 className: platformInstallClassName(["alternatives"]),
-                children: alternatives.map((alternative, index) => /* @__PURE__ */ jsx("li", {
-                  children: /* @__PURE__ */ jsx(CommandBlock, {
+                children: alternatives.map((alternative, index) => /* @__PURE__ */ jsx2("li", {
+                  children: /* @__PURE__ */ jsx2(CommandBlock, {
                     caption: [alternative.label, alternative.shell].filter(Boolean).join(" · "),
                     command: alternative.command,
                     copyKey: `${target.id}:${index}`,
@@ -386,7 +443,7 @@ function PlatformInstall({
                   })
                 }, `${alternative.label}-${index}`))
               }),
-              target.note === undefined ? null : /* @__PURE__ */ jsx("div", {
+              target.command !== undefined || target.note === undefined ? null : /* @__PURE__ */ jsx2("div", {
                 className: platformInstallClassName(["note"]),
                 children: target.note
               })
@@ -394,7 +451,7 @@ function PlatformInstall({
           })
         }, target.id);
       }),
-      /* @__PURE__ */ jsx("p", {
+      /* @__PURE__ */ jsx2("p", {
         "aria-live": "polite",
         className: platformInstallClassName(["status"]),
         role: "status",
@@ -404,4 +461,4 @@ function PlatformInstall({
   });
 }
 
-export { PlatformInstall };
+export { SetupCopyButton, PlatformInstall };