Pin interface-card links to the card foot; release v0.41.1

dist/chunk-w76f3ah1.js → dist/chunk-kgrbekna.js

@@ -1269,7 +1269,7 @@ var marketingStyles = {
     k1xSpc: "x78zum5",
     kkeX5w: "x6s0dn4",
     kOIVth: "x8233eu",
-    kmVPX3: "x86o7ao",
+    kmVPX3: "xrqs5gp",
     kb5WsR: "x1drtmal xhobzj1",
     kTJQHc: "xs301gt xwaqzdf",
     ke4D0g: "xothggy x1j9yjdw",
@@ -2214,10 +2214,10 @@ var marketingStyles = {
     $$css: true
   },
   interface: {
-    k1xSpc: "xrvj5dj",
+    k1xSpc: "x78zum5",
+    kvQiKF: "xdt5ytf",
     kdYMnH: "xesnm00",
     kVQ08L: "x1ljpu7r",
-    kNk6WL: "x10ukxgv",
     kOIVth: "x13z6uf9",
     kmVPX3: "x1nn0urv",
     k99D8V: "x17p5ghk x18z9243",
@@ -2285,6 +2285,21 @@ var marketingStyles = {
     kN5DiO: "x1evy7pa",
     $$css: true
   },
+  interface__action: {
+    kAiAap: "x1n5yk0f",
+    kLh5Sq: "x1qzg9v8",
+    kMCLAl: "xp4054r",
+    $$css: true
+  },
+  interface__link: {
+    kMwMTN: "xs87ocq x16tyrwk x1eyr600 x1ljrylj",
+    kXaGww: "xujl8zx",
+    kCBxTS: "xi2nhp4",
+    kRHfhz: "x4k6xgu x9ojkr9 x1e7jyuc",
+    kKoZWP: "xyi4chj",
+    k1PBYE: "x5hzr90",
+    $$css: true
+  },
   trust_item__label: {
     kogj98: "x1ghz6dp",
     kLh5Sq: "x1ksoetq",
@@ -3659,6 +3674,12 @@ var recipes = {
   "hraness-marketing-interface__summary": {
     default: marketingStyles.interface__summary
   },
+  "hraness-marketing-interface__action": {
+    default: marketingStyles.interface__action
+  },
+  "hraness-marketing-interface__link": {
+    default: marketingStyles.interface__link
+  },
   "hraness-marketing-trust-item__label": {
     default: marketingStyles.trust_item__label
   },
@@ -4475,8 +4496,8 @@ function MarketingProofFrame({
     throw new RangeError('Proof frame url needs chrome="browser".');
   const bar = chrome ?? (title === undefined ? undefined : "window");
   const label = bar === "browser" ? url === undefined ? title : marketingProofFrameAddress(url) : title;
-  if (bar !== undefined && (label === undefined || label.trim() === "")) {
-    throw new RangeError(`Proof frame chrome=${bar} needs ${bar === "browser" ? "a url or title" : "a title"}.`);
+  if (bar === "browser" && (label === undefined || label.trim() === "")) {
+    throw new RangeError("Proof frame chrome=browser needs a url or title.");
   }
   return /* @__PURE__ */ jsxs3("figure", {
     className: marketingClassName("hraness-marketing-proof-frame", className),
@@ -4504,7 +4525,7 @@ function MarketingProofFrame({
           bar === "browser" ? /* @__PURE__ */ jsx3("span", {
             className: marketingClassName("hraness-marketing-proof-frame__address"),
             children: label
-          }) : /* @__PURE__ */ jsx3("span", {
+          }) : label === undefined || label.trim() === "" ? null : /* @__PURE__ */ jsx3("span", {
             className: marketingClassName("hraness-marketing-proof-frame__title", undefined, bar === "terminal" ? "terminal" : "default"),
             children: label
           })
@@ -4882,7 +4903,16 @@ function MarketingInterfaceGrid({
               className: marketingClassName("hraness-marketing-interface__summary"),
               children: entry.summary
             }),
-            entry.example
+            entry.example,
+            entry.link === undefined ? null : /* @__PURE__ */ jsx3("p", {
+              className: marketingClassName("hraness-marketing-interface__action"),
+              children: /* @__PURE__ */ jsx3("a", {
+                className: marketingClassName("hraness-marketing-interface__link"),
+                "data-hraness-marketing": "interfaces",
+                href: entry.link.href,
+                children: entry.link.label
+              })
+            })
           ]
         }, entry.label))
       })

dist/react/index.js

@@ -90,7 +90,7 @@ import {
   marketingProofFrameAddress,
   proceduralBackdropVariants,
   proceduralRecipeVersion
-} from "../chunk-w76f3ah1.js";
+} from "../chunk-kgrbekna.js";
 import {
   SyntaxCode
 } from "../chunk-6ts4955n.js";
@@ -6872,10 +6872,18 @@ Run the job, then show me its log.`,
                       summary: "Run a named job.",
                       example: /* @__PURE__ */ jsx17(MarketingCodeBlock, {
                         code: "relay run job-01"
-                      })
+                      }),
+                      link: {
+                        href: "#gallery-install",
+                        label: "Read the CLI guide"
+                      }
                     }, {
                       label: "SDK",
-                      summary: "Use typed application code."
+                      summary: "Use typed application code.",
+                      link: {
+                        href: "#gallery-install",
+                        label: "Read the SDK guide"
+                      }
                     }]
                   }),
                   /* @__PURE__ */ jsx17(MarketingCardRow, {

dist/react/server.js

@@ -69,7 +69,7 @@ import {
   marketingProofFrameAddress,
   proceduralBackdropVariants,
   proceduralRecipeVersion
-} from "../chunk-w76f3ah1.js";
+} from "../chunk-kgrbekna.js";
 import {
   SyntaxCode
 } from "../chunk-6ts4955n.js";

dist/stylex.css

@@ -85,6 +85,10 @@
     padding: .5rem 1rem 4rem;
   }
 
+  .xrqs5gp {
+    padding: .5rem 1rem;
+  }
+
   .x1i4hug3 {
     padding: .65rem .8rem;
   }
@@ -101,10 +105,6 @@
     padding: .75rem .95rem;
   }
 
-  .x86o7ao {
-    padding: .8rem 1rem;
-  }
-
   .x1717udv {
     padding: 0;
   }
@@ -2943,6 +2943,10 @@
     margin-block-start: 1rem;
   }
 
+  .x1n5yk0f {
+    margin-block-start: auto;
+  }
+
   .xvc5jky {
     margin-inline-start: auto;
   }
@@ -3390,6 +3394,10 @@
     text-align: center;
   }
 
+  .xp4054r {
+    text-align: end;
+  }
+
   .x1yc453h {
     text-align: start;
   }
@@ -3428,6 +3436,10 @@
     text-transform: uppercase;
   }
 
+  .x5hzr90 {
+    text-underline-offset: .18em;
+  }
+
   .xdsgf93 {
     text-underline-offset: .22em;
   }
@@ -3713,6 +3725,10 @@
     color: var(--hraness-appearance-accent-foreground, var(--hraness-material-ink, var(--ui-accent-foreground, ButtonText)));
   }
 
+  .x1eyr600:focus-visible {
+    color: var(--hraness-marketing-ink);
+  }
+
   .x89zja:is([data-hovered], :hover) {
     color: var(--secondary-foreground);
   }

gallery/product-marketing-fixture.tsx

@@ -153,8 +153,8 @@ export function ProductMarketingFixture({ api }: Readonly<{ api: typeof Marketin
       <MarketingNotice tone="error">That link expired.</MarketingNotice>
       <MarketingStatStrip ariaLabel="Observed counts" source={<>Snapshot <strong data-marketing-oracle="stats-strong">today</strong><span data-marketing-oracle="stats-span">only</span></>} stats={facts} />
       <MarketingInterfaceGrid heading="Choose an interface." headingId="interfaces-title" id="interfaces" label="Interfaces" summary="One result." interfaces={[
-        { label: "CLI", summary: "For terminal users.", example: <p data-marketing-oracle="interface-paragraph">Consumer paragraph.</p> },
-        { label: "SDK", summary: "For typed code.", example: <pre data-marketing-oracle="interface-pre"><code data-marketing-oracle="interface-code">relay.run()</code></pre> },
+        { label: "CLI", summary: "For terminal users.", example: <p data-marketing-oracle="interface-paragraph">Consumer paragraph.</p>, link: { href: "#interfaces", label: "Read the CLI guide" } },
+        { label: "SDK", summary: "For typed code.", example: <pre data-marketing-oracle="interface-pre"><code data-marketing-oracle="interface-code">relay.run()</code></pre>, link: { href: "#interfaces", label: "Read the SDK guide" } },
       ]} />
       <MarketingCardRow ariaLabel="Release radar" cards={[
         { art: <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="8" /></svg>, href: "#fixture", title: "Grok 4.7", meta: "First observed 21 September 2026." },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.41.0",
+  "version": "0.41.1",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",

portfolio-inventory.json

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.41.0"
+      "version": "0.41.1"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

scripts/product-marketing-browser.ts

@@ -32,7 +32,7 @@ async function legacyStylesheetHash(): Promise<string> {
   const syntaxImport = '@import "./syntax-highlighting.css";\n@import "./site-shell.css";\n\n';
   assert(source.startsWith(syntaxImport), "The marketing entry lost its exact syntax import");
   const grammarSha256 = createHash("sha256").update(source.slice(syntaxImport.length)).digest("hex");
-  assert.equal(grammarSha256, "d73aadc873410e05dd148143c693baa6e263053bb4caa80db3859842e1f48dab", "The independent static CSS grammar changed");
+  assert.equal(grammarSha256, "fa2bffaf56437ae902d57cc8ea8cfc60a5535f694a106a3e6fcb16a8e4ff55fa", "The independent static CSS grammar changed");
   return createHash("sha256").update(source).digest("hex");
 }
 
@@ -1087,8 +1087,10 @@ try {
   const mismatchEvidencePath = join(output, "mismatch-summary.json");
   await writeFile(mismatchEvidencePath, mismatchEvidence, { flag: "wx" });
   assert.deepEqual(failures, [], "Unexpected browser errors after all fixture pages closed");
+  const mismatchSample = deliveryMismatchSamples.slice(0, 24)
+    .map(({ label, index, hook, property, actual, expected }) => `${label} #${index} ${hook} ${property}: ${JSON.stringify(actual)} !== ${JSON.stringify(expected)}`);
   assert.equal(deliveryMismatchCount, 0,
-    `Delivery differs from the projected original-source oracle; retained snapshots and mismatch summary: ${mismatchEvidencePath}`);
+    `Delivery differs from the projected original-source oracle; retained snapshots and mismatch summary: ${mismatchEvidencePath}\n${mismatchSample.join("\n")}`);
   const stylesheetHashes = { legacySha256,
     native: [...nativeOracle.assets].filter(([, asset]) => asset.contentType === "text/css").map(([url, asset]) => ({ url, sha256: createHash("sha256").update(asset.body).digest("hex") })).sort((a, b) => a.url.localeCompare(b.url)),
     projectedNative: [...projectedOracle.assets].filter(([, asset]) => asset.contentType === "text/css").map(([url, asset]) => ({ url, sha256: createHash("sha256").update(asset.body).digest("hex") })).sort((a, b) => a.url.localeCompare(b.url)),

src/product-marketing-foundation.css

@@ -304,10 +304,14 @@
   line-height: 1.5;
 }
 
-.hraness-marketing-interface pre {
+.hraness-marketing-interface > :where(pre) {
   margin-block-start: 0.5rem;
 }
 
+.hraness-marketing-interface :where(pre) {
+  font-size: 0.78rem;
+}
+
 .hraness-marketing-question__answer > :first-child {
   margin-block-start: 0;
 }

src/product-marketing.css

@@ -1081,7 +1081,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.8rem 1rem;
+  padding: 0.5rem 1rem;
   background-image: var(--hraness-marketing-frame-chrome, none);
   box-shadow: var(--hraness-marketing-chrome-shadow);
   border-block-end: var(--hraness-marketing-chrome-rule);
@@ -1641,10 +1641,8 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 
 .hraness-marketing-interface,
 .hraness-marketing-trust-item {
-  display: grid;
   min-inline-size: 0;
   min-block-size: 100%;
-  align-content: start;
   gap: 0.5rem;
   padding: clamp(1.25rem, 2.5vw, 1.75rem);
   border: var(--hraness-marketing-surface-rule);
@@ -1653,6 +1651,17 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   box-shadow: var(--hraness-marketing-surface-shadow);
 }
 
+/* A vertical column lets the optional action pin to the foot of the card. */
+.hraness-marketing-interface {
+  display: flex;
+  flex-direction: column;
+}
+
+.hraness-marketing-trust-item {
+  display: grid;
+  align-content: start;
+}
+
 .hraness-marketing-interface :where(.hraness-marketing-interface__heading, p),
 .hraness-marketing-trust-item :where(dt, dd) {
   margin: 0;
@@ -1672,10 +1681,42 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   line-height: 1.5;
 }
 
-.hraness-marketing-interface pre {
+/* The card's reference link sits at the foot, quiet and end-aligned. */
+.hraness-marketing-interface .hraness-marketing-interface__action {
+  margin-block-start: auto;
+  font-size: 0.85rem;
+  text-align: end;
+}
+
+.hraness-marketing-interface__link {
+  color: var(--hraness-marketing-muted);
+  text-decoration-line: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.18em;
+}
+
+.hraness-marketing-interface__link:hover,
+.hraness-marketing-interface__link:focus-visible {
+  color: var(--hraness-marketing-ink);
+  text-decoration-color: currentColor;
+}
+
+@media (forced-colors: active) {
+  .hraness-marketing-interface__link {
+    color: LinkText;
+  }
+}
+
+.hraness-marketing-interface > :where(pre) {
   margin-block-start: 0.5rem;
 }
 
+.hraness-marketing-interface :where(pre) {
+  font-size: 0.78rem;
+}
+
 /* Equal-height product card rows. Direct children stretch to the tallest
  * item. Meta occupies a reserved two-line block so one long blurb does not
  * stagger the row. Titles wrap without clamping. Each card is a containing

src/react/design-gallery.tsx

@@ -512,8 +512,8 @@ export function DesignSystemGallery({
             <p>Consumer-owned content can include <a href="#gallery-install">links</a> and <code>inline code</code>.</p>
           </MarketingSection>
           <MarketingInterfaceGrid columns={2} heading="Choose your interface." headingId="gallery-marketing-interfaces" headingLevel={3} label="Interfaces" interfaces={[
-            { label: "CLI", summary: "Run a named job.", example: <MarketingCodeBlock code="relay run job-01" /> },
-            { label: "SDK", summary: "Use typed application code." },
+            { label: "CLI", summary: "Run a named job.", example: <MarketingCodeBlock code="relay run job-01" />, link: { href: "#gallery-install", label: "Read the CLI guide" } },
+            { label: "SDK", summary: "Use typed application code.", link: { href: "#gallery-install", label: "Read the SDK guide" } },
           ]} />
           <MarketingCardRow ariaLabel="Release radar" columns={2} cards={[
             { art: <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="8" /></svg>, href: "#marketing", title: "Grok 4.7", meta: "First observed 21 September 2026." },

src/react/product-marketing-stylex.test.tsx

@@ -215,7 +215,7 @@ test("the reviewed static grammar and 30-token foundation stay separate from own
   const syntaxImport = '@import "./syntax-highlighting.css";\n@import "./site-shell.css";\n\n';
   expect(legacy).toStartWith(syntaxImport);
   expect(createHash("sha256").update(legacy.slice(syntaxImport.length)).digest("hex"))
-    .toBe("d73aadc873410e05dd148143c693baa6e263053bb4caa80db3859842e1f48dab");
+    .toBe("fa2bffaf56437ae902d57cc8ea8cfc60a5535f694a106a3e6fcb16a8e4ff55fa");
   const tokenNames = (text: string) => [...new Set([...(text.match(/:where\([\s\S]*?\)\s*\{([^}]*)\}/u)?.[1] ?? "").matchAll(/(--hraness-marketing-[a-z-]+):/gu)].map((match) => match[1]))].sort();
   expect(tokenNames(foundation)).toHaveLength(30);
   expect(tokenNames(foundation)).toEqual(tokenNames(legacy));