@conduction/docusaurus-preset 3.31.0 → 3.32.0

package/MISSING_COMPONENTS.md

@@ -47,7 +47,7 @@ Most consume one or more primitives.
 - **FeatureGrid / FeatureGridItem / FeatureGridGroup** — `FeatureGrid/FeatureGrid.jsx`. Compact spec list with hover-tooltip and stable/beta/soon status hexes.
 - **HowSteps / HowStep** — `HowSteps/HowSteps.jsx`. Numbered process-step row. Auto-numbers and auto-tints (cobalt → orange → cobalt-700) when `number` and `tier` are omitted.
 - **Pipeline / PipelineStep / IconList** — `Pipeline/Pipeline.jsx`. Horizontal hex-numbered pipeline with chevron flow lines and optional source/consumer end-boxes.
-- **DetailHero** — `DetailHero/DetailHero.jsx`. Shared 1fr/360px hero pattern between app/solution/partner detail pages. Crumb + status + version + locales + downloads badge + h1 + tagline + 3 CTAs + right-column illustration.
+- **DetailHero** — `DetailHero/DetailHero.jsx`. Shared 1fr/360px hero pattern between app/solution/partner detail pages. Crumb + status + version + locales + downloads badge + "View on GitHub" chip (both link to the repo via `repoHref` / GitHub tertiaryCta / ConductionNL fallback) + h1 + tagline + primary/secondary CTA pair + right-column illustration.
 - **FacetedFilters / FilterChip** — `FacetedFilters/FacetedFilters.jsx`. Sidebar facet checkbox panel + active-chip strip.
 - **ConductionBg** — `ConductionBg/ConductionBg.jsx`. Parallax honeycomb background. Real component with self-contained runtime hook.
 - **HexNetwork** — `HexNetwork/HexNetwork.jsx`. Centre hex with surrounding satellites. Used on `/support` to render the partner network around Conduction.
@@ -58,8 +58,12 @@ Most consume one or more primitives.
 - **ComposeBlock** — `ComposeBlock/ComposeBlock.jsx`. Branded code block (cobalt-900 + Plex Mono + filename pill + copy button). For docker-compose, bash recipes, and any verbatim copy-paste content. Used on `/demo`.
 - **AgentTrace** — `AgentTrace/AgentTrace.jsx`. Terminal-styled agent execution trace with cursor + mode chrome. Specimen: `preview/components/agent-trace.html`.
 - **AppMock** — `AppMock/AppMock.jsx`. Selector that renders one of 16 app-specific UI mockups (DeciDesk, DocuDesk, LarpingApp, LaunchPad + variants, NLDesign, OpenCatalogi, OpenConnector, OpenRegister, OpenWoo, PipelinQ, Procest, SoftwareCatalog, ZaakAfhandelApp). Each variant lives under `AppMock/variants/`. Specimen: `preview/components/app-mock.html`.
+- **FlowMock** — `FlowMock/FlowMock.jsx`. Token-painted abstract of the flow editor: node cards on a dotted canvas with coloured left bars (mint trigger, lavender steps, vermillion end), curved grey edges with pill labels, and a mint run-line looping trigger → step → approval → end. Freezes to the full static route under `prefers-reduced-motion` or `running={false}`. Specimen: `preview/components/flow-mock.html`.
+- **LeafMock** — `LeafMock/LeafMock.jsx`. Small integration-leaf panels for Showcase items: `leaf="contacts"` (hex-avatar rows + mint sync arrow to a phone), `"calendar"` (mini month grid + linked-event chip), `"mail"` (message list + mint create-from-email chip), `"files"` (folder/file rows + forest link-to-record chip).
+- **BuildMock** — `BuildMock/BuildMock.jsx`. Looping "make it yours" animation: the orange OpenBuild edit FAB is pressed, a component palette opens, and a widget is dragged into the page layout where it snaps in (~8s loop). `prefers-reduced-motion` / `running={false}` renders the static end state (component placed).
+- **KanbanMock** — `KanbanMock/KanbanMock.jsx`. Looping kanban drag for the pipelinq hero: a cursor lifts the top lead card, drags it to the next column, drops it, and the column counts nudge (~7s loop). `prefers-reduced-motion` / `running={false}` renders the static board.
 - **ExternalAppShelf** — `ExternalAppShelf/ExternalAppShelf.jsx`. Third-party-app shelf (Outlook-style, Mattermost, Keycloak, etc.) used on `/connext`. Specimen: `preview/components/external-app-shelf.html`.
-- **WidgetShelf** — `WidgetShelf/WidgetShelf.jsx`. Widget showcase grid with eyebrow + title + lede + N-column widget cards. Specimen: `preview/components/widget-shelf.html`.
+- **WidgetShelf** — `WidgetShelf/WidgetShelf.jsx`. Widget showcase with eyebrow + title + lede. Default is a slow single-row carousel (seamless duplicated track, pause on hover/focus, static wrapping grid under `prefers-reduced-motion`); `carousel={false}` renders the N-column grid. Specimen: `preview/components/widget-shelf.html`.
 - **Showcase** — `Showcase/Showcase.jsx`. Multi-item collapsible showcase with screenshot + body. Used on `/commonground` for the "5-lagen model". Specimen: `preview/components/showcase.html`.
 - **RotatingCards** — `RotatingCards/RotatingCards.jsx`. Rotating card carousel. Specimen: `preview/components/rotating-cards.html`.
 - **FAQ / FAQItem** — `FAQ/FAQ.jsx`. Disclosure-pattern FAQ block. Used on `/support`. Specimen: `preview/components/faq.html`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.31.0",
+  "version": "3.32.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js",
     "test": "node --test"

package/src/components/BuildMock/BuildMock.jsx

@@ -0,0 +1,101 @@
+/**
+ * <BuildMock />
+ *
+ * Token-built abstract of the OpenBuild "make it yours" moment: the
+ * orange edit button gets pressed, a small component palette opens, a
+ * widget is picked and dragged onto the page, and it snaps into the
+ * empty layout slot. Loops every ~8 seconds. Used on every app's
+ * Make-it-yours card.
+ *
+ * Same abstraction level as <AppMock>: greeked content, tokens only.
+ * The orange FAB is this component's single orange accent (it *is*
+ * the OpenBuild edit button).
+ *
+ * `prefers-reduced-motion: reduce` (and `running={false}`) renders
+ * the static end state: palette closed, cursor gone, the dragged
+ * component already snapped into the layout.
+ *
+ * Usage:
+ *
+ *   <BuildMock />
+ *   <BuildMock size="sm" caption />
+ *   <BuildMock running={false} />
+ *
+ * Props:
+ *   - size:      'sm' | 'md' (default)  — frame width, as AppMock
+ *   - caption:   string | true          — small label below the frame;
+ *                `true` renders the default "Make it yours"
+ *   - running:   boolean (default true) — false freezes to the end state
+ *   - className: string
+ */
+
+import React from 'react';
+import styles from './BuildMock.module.css';
+
+function MiniTile({wide}) {
+  return (
+    <span className={styles.miniTile}>
+      <span className={styles.miniBar} style={{width: wide ? '70%' : '50%'}} />
+      <span className={styles.miniLine} />
+      <span className={styles.miniLine} style={{width: '60%'}} />
+    </span>
+  );
+}
+
+export default function BuildMock({size = 'md', caption, running = true, className}) {
+  return (
+    <div className={styles.bm}>
+      <figure className={[styles.figure, className].filter(Boolean).join(' ')}>
+        <div
+          className={[styles.frame, styles[`size-${size}`], !running && styles.static].filter(Boolean).join(' ')}
+          role="img"
+          aria-label="Abstract page editor: the edit button opens a component palette and a widget is dragged into the page layout."
+        >
+          <div className={styles.page}>
+            <div className={styles.pageHead}>
+              <span className={styles.headGreek} />
+            </div>
+            <div className={styles.pageGrid}>
+              <div className={styles.tile}><MiniTile wide /></div>
+              <div className={styles.tile}><MiniTile /></div>
+              <div className={styles.slot}>
+                {/* The component the drag delivers. Fades in when the
+                    ghost lands; permanently visible in the static /
+                    reduced-motion end state. */}
+                <div className={styles.snapTile}><MiniTile wide /></div>
+              </div>
+              <div className={styles.tile}><MiniTile /></div>
+            </div>
+          </div>
+
+          {/* Component palette, opened by the FAB press. */}
+          <div className={styles.palette}>
+            <span className={styles.paletteTile} />
+            <span className={[styles.paletteTile, styles.paletteTileActive].join(' ')} />
+            <span className={styles.paletteTile} />
+          </div>
+
+          {/* The OpenBuild edit button — the one orange accent. */}
+          <div className={styles.fab}>
+            <svg viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z" />
+            </svg>
+          </div>
+
+          {/* The dragged component ghost. */}
+          <div className={styles.ghost}><MiniTile wide /></div>
+
+          {/* The cursor driving the loop. */}
+          <svg className={styles.cursor} viewBox="0 0 24 24" aria-hidden="true">
+            <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
+          </svg>
+        </div>
+        {caption && (
+          <figcaption className={styles.caption}>
+            {caption === true ? 'Make it yours' : caption}
+          </figcaption>
+        )}
+      </figure>
+    </div>
+  );
+}

package/src/components/BuildMock/BuildMock.module.css

@@ -0,0 +1,290 @@
+/**
+ * <BuildMock /> styles. Scoped under `.bm` (display: contents), the
+ * AppMock `.am` convention, so specimen pages can reuse the file as a
+ * plain global stylesheet.
+ *
+ * One shared timeline (--bm-dur, default 8s) drives five animations:
+ * the cursor path, the FAB press, the palette open/close, the dragged
+ * ghost, and the snap-in of the placed component. Percentages line up
+ * across the keyframe sets:
+ *
+ *   0–14%   cursor travels to the FAB, presses it
+ *   16–22%  palette opens, cursor moves to the middle palette tile
+ *   30–58%  ghost is dragged from the palette to the empty slot
+ *   58–62%  snap: ghost settles, placed component fades in
+ *   62–88%  hold the result
+ *   88–100% everything resets for the next loop
+ *
+ * prefers-reduced-motion (and the .static class from running={false})
+ * freezes the mock at the end state: component placed, palette closed,
+ * no cursor. Tokens only; the orange FAB is the single orange accent.
+ */
+
+.bm { display: contents; }
+
+.bm .figure {
+  margin: 0;
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  width: 100%;
+  max-width: 100%;
+}
+
+.bm .frame {
+  --bm-dur: 8s;
+  width: 100%;
+  max-width: 720px;
+  aspect-ratio: 16 / 10;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-3);
+  overflow: hidden;
+  position: relative;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.bm .size-sm { max-width: 480px; }
+.bm .size-md { max-width: 720px; }
+
+.bm .caption {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  color: var(--c-cobalt-400);
+  text-transform: uppercase;
+  text-align: center;
+}
+
+/* ---- Page skeleton ---- */
+
+.bm .page {
+  position: absolute;
+  inset: 0;
+  padding: 7% 8%;
+  display: flex;
+  flex-direction: column;
+  gap: 5%;
+}
+.bm .pageHead { flex-shrink: 0; }
+.bm .headGreek {
+  display: block;
+  width: 34%;
+  height: 8px;
+  border-radius: 2px;
+  background: var(--c-cobalt-700);
+}
+.bm .pageGrid {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr 1fr;
+  gap: 5%;
+  /* Leave the right quarter free for the palette + FAB. */
+  margin-right: 22%;
+}
+
+.bm .tile,
+.bm .slot {
+  border-radius: var(--radius-md);
+  padding: 8px 10px;
+}
+.bm .tile {
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+}
+.bm .slot {
+  border: 2px dashed var(--c-cobalt-200);
+  animation: bmSlotHint var(--bm-dur) linear infinite;
+}
+
+.bm .miniTile {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 100%;
+}
+.bm .miniBar  { display: block; height: 5px; border-radius: 1.5px; background: var(--c-cobalt-700); }
+.bm .miniLine { display: block; height: 3px; border-radius: 1px; background: var(--c-cobalt-200); width: 80%; }
+
+/* The delivered component inside the slot. */
+.bm .snapTile {
+  opacity: 0;
+  animation: bmSnapIn var(--bm-dur) linear infinite;
+}
+
+/* ---- Palette ---- */
+
+.bm .palette {
+  position: absolute;
+  right: 4%;
+  top: 22%;
+  width: 13%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-3);
+  padding: 8px;
+  opacity: 0;
+  transform: translateX(10px);
+  animation: bmPalette var(--bm-dur) linear infinite;
+}
+.bm .paletteTile {
+  display: block;
+  height: 18px;
+  border-radius: 3px;
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+}
+.bm .paletteTileActive { animation: bmPaletteTile var(--bm-dur) linear infinite; }
+
+/* ---- FAB (the one orange accent) ---- */
+
+.bm .fab {
+  position: absolute;
+  right: 5%;
+  bottom: 7%;
+  width: 34px;
+  height: 34px;
+  border-radius: 50%;
+  background: var(--c-orange-knvb);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: var(--shadow-2);
+  animation: bmFabPress var(--bm-dur) linear infinite;
+}
+.bm .fab svg {
+  width: 15px;
+  height: 15px;
+  fill: none;
+  stroke: white;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ---- Dragged ghost ---- */
+
+.bm .ghost {
+  position: absolute;
+  width: 22%;
+  left: 76%;
+  top: 30%;
+  background: white;
+  border: 1px solid var(--c-lavender-500);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-3);
+  padding: 8px 10px;
+  opacity: 0;
+  animation: bmGhost var(--bm-dur) linear infinite;
+}
+
+/* ---- Cursor ---- */
+
+.bm .cursor {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  left: 55%;
+  top: 42%;
+  fill: var(--c-cobalt-900);
+  stroke: white;
+  stroke-width: 1;
+  filter: drop-shadow(0 1px 2px rgba(10, 23, 47, 0.35));
+  animation: bmCursor var(--bm-dur) linear infinite;
+  z-index: 2;
+}
+
+/* ---- Timeline keyframes ---- */
+
+@keyframes bmCursor {
+  0%   { left: 55%; top: 42%; }
+  12%  { left: 88%; top: 82%; }   /* over the FAB */
+  16%  { left: 88%; top: 82%; }   /* press */
+  24%  { left: 82%; top: 36%; }   /* over the middle palette tile */
+  30%  { left: 82%; top: 36%; }   /* grab */
+  58%  { left: 26%; top: 66%; }   /* drag to the slot */
+  64%  { left: 26%; top: 66%; }   /* release */
+  82%  { left: 55%; top: 42%; }
+  100% { left: 55%; top: 42%; }
+}
+
+@keyframes bmFabPress {
+  0%, 11%  { transform: scale(1); }
+  13%      { transform: scale(0.85); }
+  16%, 100% { transform: scale(1); }
+}
+
+@keyframes bmPalette {
+  0%, 15%  { opacity: 0; transform: translateX(10px); }
+  18%, 72% { opacity: 1; transform: translateX(0); }
+  78%, 100% { opacity: 0; transform: translateX(10px); }
+}
+
+@keyframes bmPaletteTile {
+  0%, 22%  { background: var(--c-cobalt-50); border-color: var(--c-cobalt-100); }
+  26%, 34% { background: var(--c-cobalt-100); border-color: var(--c-lavender-500); }
+  38%, 100% { background: var(--c-cobalt-50); border-color: var(--c-cobalt-100); }
+}
+
+@keyframes bmGhost {
+  0%, 29%  { opacity: 0; left: 76%; top: 30%; transform: scale(1); }
+  31%      { opacity: 1; left: 76%; top: 30%; transform: scale(1.02); }
+  58%      { opacity: 1; left: 12%; top: 58%; transform: scale(1.02); }
+  61%      { opacity: 1; left: 12%; top: 60%; transform: scale(1); }
+  63%      { opacity: 0; left: 12%; top: 60%; transform: scale(1); }
+  100%     { opacity: 0; left: 12%; top: 60%; transform: scale(1); }
+}
+
+@keyframes bmSnapIn {
+  0%, 60%  { opacity: 0; }
+  63%, 88% { opacity: 1; }
+  94%, 100% { opacity: 0; }
+}
+
+@keyframes bmSlotHint {
+  0%, 38%  { border-color: var(--c-cobalt-200); }
+  44%, 58% { border-color: var(--c-lavender-500); }
+  63%, 100% { border-color: var(--c-cobalt-200); }
+}
+
+/* ---- Static end state (running={false} and reduced motion) ----
+ * Component placed, palette closed, no cursor, no ghost. */
+
+.bm .static .snapTile,
+.bm .static .slot,
+.bm .static .fab,
+.bm .static .palette,
+.bm .static .paletteTile,
+.bm .static .ghost,
+.bm .static .cursor { animation: none; }
+.bm .static .snapTile { opacity: 1; }
+.bm .static .slot {
+  border-style: solid;
+  border-color: var(--c-cobalt-100);
+  border-width: 1px;
+  background: var(--c-cobalt-50);
+}
+.bm .static .palette, .bm .static .ghost, .bm .static .cursor { opacity: 0; visibility: hidden; }
+
+@media (prefers-reduced-motion: reduce) {
+  .bm .snapTile,
+  .bm .slot,
+  .bm .fab,
+  .bm .palette,
+  .bm .paletteTile,
+  .bm .ghost,
+  .bm .cursor { animation: none; }
+  .bm .snapTile { opacity: 1; }
+  .bm .slot {
+    border-style: solid;
+    border-color: var(--c-cobalt-100);
+    border-width: 1px;
+    background: var(--c-cobalt-50);
+  }
+  .bm .palette, .bm .ghost, .bm .cursor { opacity: 0; visibility: hidden; }
+}

package/src/components/DetailHero/DetailHero.jsx

@@ -38,6 +38,16 @@
  * (or secondary) variant to the KNVB-orange accent. Reserved for
  * product pages with an orange-leaning brand identity (launchpad).
  *
+ * GitHub lives in the badge row, not the CTA row: the downloads
+ * counter links to the app's repository and a "View on GitHub" chip
+ * sits next to it (both new-tab). The URL comes from the `repoHref`
+ * prop when given; otherwise a GitHub-pointing `tertiaryCta` href is
+ * reused (and that tertiary is then dropped from the CTA row, so
+ * existing pages upgrade without edits); otherwise it falls back to
+ * https://github.com/ConductionNL/{appId}. The CTA row therefore
+ * normally holds just the primary + secondary pair; a non-GitHub
+ * tertiary still renders for compatibility.
+ *
  * `background="cobalt"` paints the hero in a full-bleed cobalt panel
  * with white type — the product-page identity used on the
  * {slug}.conduction.nl landings. Default (undefined) keeps the
@@ -85,8 +95,26 @@ export default function DetailHero({
   appId,
   downloads,
   background,
+  repoHref,
 }) {
   const dlCount = downloads != null ? downloads : (appId ? downloadsForApp(appId) : 0);
+  /* GitHub repo link for the badge row. Priority: explicit `repoHref`
+     prop → a GitHub-pointing tertiaryCta (the old "View on GitHub"
+     ghost button, which this hero now renders as a meta-row chip
+     instead of a third CTA) → the ConductionNL org default for the
+     appId. Both the downloads counter and the "View on GitHub" chip
+     link here, in a new tab. */
+  const tertiaryIsRepo = Boolean(
+    tertiaryCta && typeof tertiaryCta.href === 'string' && tertiaryCta.href.includes('github.com')
+  );
+  const resolvedRepoHref = repoHref
+    || (tertiaryIsRepo ? tertiaryCta.href : undefined)
+    || (appId ? `https://github.com/ConductionNL/${appId}` : undefined);
+  /* A GitHub tertiary CTA is "moved up top": it renders as the meta-row
+     chip and disappears from the CTA row, which then holds just the
+     primary + secondary pair. Any other tertiary (docs, demo, ...)
+     keeps rendering as before for compatibility. */
+  const renderedTertiaryCta = tertiaryIsRepo ? null : tertiaryCta;
   const hasIllustration = Boolean(illustration);
   /* Default the title mark to the canonical app glyph (the same logo
      served on identity.conduction.nl/apps) when the caller doesn't pass
@@ -238,7 +266,7 @@ export default function DetailHero({
 
       <div className={styles.headInner}>
         <div className={styles.copy}>
-          {(resolvedStatus || resolvedVersion || locales || dlCount > 0) && (
+          {(resolvedStatus || resolvedVersion || locales || dlCount > 0 || resolvedRepoHref) && (
             <div className={styles.badgeRow}>
               {resolvedStatus && (
                 <span className={styles.badge}>
@@ -248,17 +276,39 @@ export default function DetailHero({
               )}
               {resolvedVersion && <span className={[styles.badge, styles.versionBadge].join(' ')}>{resolvedVersion}</span>}
               {locales && <span className={[styles.badge, styles.versionBadge].join(' ')}>{locales}</span>}
-              {dlCount > 0 && (
-                <span
+              {dlCount > 0 && (() => {
+                /* The downloads counter links to the repo when one
+                   resolves; a plain chip otherwise. */
+                const DlTag = resolvedRepoHref ? 'a' : 'span';
+                const dlLinkProps = resolvedRepoHref
+                  ? {href: resolvedRepoHref, target: '_blank', rel: 'noopener noreferrer'}
+                  : {};
+                return (
+                  <DlTag
+                    className={[styles.badge, styles.downloadsBadge].join(' ')}
+                    title="Total release-asset downloads from GitHub. Updated weekdays at 09:00."
+                    data-app-downloads={appId || ''}
+                    {...dlLinkProps}
+                  >
+                    <svg className={styles.downloadIcon} viewBox="0 0 24 24" aria-hidden="true">
+                      <path d="M12 3v12m0 0l-5-5m5 5l5-5M5 21h14"/>
+                    </svg>
+                    {formatDownloads(dlCount)} downloads
+                  </DlTag>
+                );
+              })()}
+              {resolvedRepoHref && (
+                <a
                   className={[styles.badge, styles.downloadsBadge].join(' ')}
-                  title="Total release-asset downloads from GitHub. Updated weekdays at 09:00."
-                  data-app-downloads={appId || ''}
+                  href={resolvedRepoHref}
+                  target="_blank"
+                  rel="noopener noreferrer"
                 >
-                  <svg className={styles.downloadIcon} viewBox="0 0 24 24" aria-hidden="true">
-                    <path d="M12 3v12m0 0l-5-5m5 5l5-5M5 21h14"/>
+                  <svg className={styles.repoIcon} viewBox="0 0 16 16" aria-hidden="true">
+                    <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8z"/>
                   </svg>
-                  {formatDownloads(dlCount)} downloads
-                </span>
+                  View on GitHub
+                </a>
               )}
             </div>
           )}
@@ -280,7 +330,7 @@ export default function DetailHero({
           {tagline && <p className={styles.tagline}>{tagline}</p>}
           {intro && <div className={styles.intro}>{intro}</div>}
 
-          {(primaryCta || secondaryCta || tertiaryCta) && (
+          {(primaryCta || secondaryCta || renderedTertiaryCta) && (
             <div className={styles.actions}>
               {primaryCta && (
                 <Button
@@ -306,19 +356,21 @@ export default function DetailHero({
                   {secondaryCta.label}
                 </Button>
               )}
-              {tertiaryCta && (
+              {renderedTertiaryCta && (
                 /* On a cobalt-bg hero the default ghost variant
                    (cobalt-700 text) disappears against the dark panel;
                    auto-switch to on-dark-tertiary (white text + white
                    border) so the CTA reads at parity with the primary
                    and secondary buttons. Sites can still pass an
-                   explicit `variant` to opt out. */
+                   explicit `variant` to opt out. GitHub-pointing
+                   tertiaries never reach this row: they render as the
+                   "View on GitHub" chip in the badge row instead. */
                 <Button
-                  variant={tertiaryCta.variant || (background === 'cobalt' ? 'on-dark-tertiary' : 'ghost')}
-                  href={tertiaryCta.href}
-                  icon={tertiaryCta.icon}
+                  variant={renderedTertiaryCta.variant || (background === 'cobalt' ? 'on-dark-tertiary' : 'ghost')}
+                  href={renderedTertiaryCta.href}
+                  icon={renderedTertiaryCta.icon}
                 >
-                  {tertiaryCta.label} →
+                  {renderedTertiaryCta.label} →
                 </Button>
               )}
             </div>

package/src/components/DetailHero/DetailHero.module.css

@@ -37,7 +37,22 @@
 .bgCobalt .sep { color: var(--c-cobalt-300); }
 .bgCobalt .badge { color: var(--c-cobalt-100); }
 .bgCobalt .versionBadge { color: var(--c-cobalt-200); }
-.bgCobalt .downloadsBadge { color: white; }
+/* On the cobalt hero the default chip (cobalt text on a cobalt-50
+   plate) inverts to full-opacity white text on a translucent white
+   chip. The 16%-white plate blends to #45649E over cobalt, which
+   keeps white text at 5.9:1 — above the 4.5:1 WCAG AA floor. The
+   earlier rule only recoloured the text and left the light plate,
+   which made the chip near-invisible on the blue panel. */
+.bgCobalt .downloadsBadge {
+  color: white;
+  background: rgba(255, 255, 255, 0.16);
+  border-color: rgba(255, 255, 255, 0.35);
+}
+.bgCobalt a.downloadsBadge:hover {
+  color: white;
+  background: rgba(255, 255, 255, 0.26);
+  border-color: rgba(255, 255, 255, 0.5);
+}
 .bgCobalt .title,
 .bgCobalt .titleText { color: white; }
 .bgCobalt .tagline { color: var(--c-cobalt-100); }
@@ -91,6 +106,9 @@
 }
 .versionBadge { color: var(--c-cobalt-400); }
 
+/* Meta-row chip. Shared by the downloads counter and the "View on
+   GitHub" link; both are usually <a> elements pointing at the app's
+   repository, so the chip carries link resets + a hover state. */
 .downloadsBadge {
   color: var(--c-blue-cobalt);
   background: var(--c-cobalt-50);
@@ -98,6 +116,13 @@
   border-radius: var(--radius-sm);
   padding: 4px 10px;
   letter-spacing: 0.04em;
+  text-decoration: none;
+  transition: background 120ms ease, border-color 120ms ease;
+}
+a.downloadsBadge:hover {
+  color: var(--c-blue-cobalt);
+  background: var(--c-cobalt-100);
+  border-color: var(--c-cobalt-200);
 }
 .downloadIcon {
   width: 12px;
@@ -108,6 +133,11 @@
   stroke-linecap: round;
   stroke-linejoin: round;
 }
+.repoIcon {
+  width: 12px;
+  height: 12px;
+  fill: currentColor;
+}
 
 .title {
   font-size: 64px;