Add evidence blocks to the marketing grammar

MARKETING_COPY.md

@@ -16,6 +16,10 @@ Limits are maximums. Count characters in the rendered text.
 | `boundary` | Price or license, requirements, and release state, once and plainly: "Free and open source · Needs Rust 1.85 or newer · Latest release: v0.2.1". | 110 characters | Governance terms such as "verified release", "admitted", "qualified", or "source pilot". |
 | `notice` | Status only when it changes what the reader can do today. | One sentence | A second copy of the boundary, or caveats a reader cannot act on. |
 | `MarketingProofFrame` | Output a reader can reproduce with the current release. Put the capture date in `credit` and label a historical record as historical. | | Commands or flags the current release rejects; "Live qualification" as a label. |
+| `MarketingDataTable` `caption` | The measurement's name: what was run, on what. | 70 characters | A verdict disguised as a caption. |
+| `MarketingDataTable` `meta`, `note` | The date, source, or sample size in `meta`; the caveat that bounds the claim in `note`. | `note`: 160 characters | Data that outlives its caveat, or a table presented as a guarantee. |
+| `MarketingDataTable` columns | Short unit-bearing labels. Numbers go in `numeric` columns; the first column names each row. | | Wide dumps that belong in documentation. |
+| `MarketingCodeBlock` | Commands and output a reader can copy and run on the current release. Keep lines inside about 32 characters on a phone. | | Prompts, placeholders, or output the release cannot produce. |
 | `MarketingPillars`, `MarketingPrimitives` | Two to four items. Labels name a thing or state a fact ("A log for every run"); each summary is one sentence. | Label: five words. Summary: 120 characters | Adjective triads ("Fast / Legible / Yours") and abstract nouns ("durable objects"). |
 | Section `heading` | Sentence case. A full sentence in the editorial preset may end with a period; other headings do not. | 70 characters | Slogans and headings that promise more than the section shows. |
 | `MarketingTrustBoundary` | What stays on the reader's machine, what is shared, and what the product will not do, each stated once on the page. | Four items | Authority, custody, admission, or lease vocabulary. |

dist/chunk-rs1jeher.js → dist/chunk-kb67f931.js

@@ -965,8 +965,10 @@ var marketingStyles = {
   proof_frame: {
     kMwMTN: "xtylnni xs5hli",
     knIRL8: "xrtw95r",
+    kULEZF: "x19vpta5",
     kdYMnH: "xesnm00",
-    kogj98: "x1ghz6dp",
+    kCbEA6: "x10im51j",
+    kYk0Dm: "xvueqy4",
     kVQacm: "x7giv3",
     k99D8V: "x17p5ghk x18z9243",
     kNdqCV: "x16x8cr2 xv2i73l",
@@ -1049,6 +1051,88 @@ var marketingStyles = {
     kLh5Sq: "xp1qmoa",
     $$css: true
   },
+  data_table: {
+    kMwMTN: "xtylnni",
+    knIRL8: "xrtw95r",
+    kULEZF: "x19vpta5",
+    kdYMnH: "xesnm00",
+    kCbEA6: "x10im51j",
+    kYk0Dm: "xvueqy4",
+    kLh5Sq: "xyr29y3",
+    kN5DiO: "x1evy7pa",
+    $$css: true
+  },
+  data_table__head: {
+    k1xSpc: "x78zum5",
+    kR2Kwr: "x1a02dak",
+    kkeX5w: "x1pha0wt",
+    kGmCso: "x1qughib",
+    kOIVth: "x1a0l8n0",
+    klAkkO: "x16287ni",
+    $$css: true
+  },
+  data_table__title: {
+    kMwMTN: "xtylnni",
+    ko3Kzr: "x7cedwp",
+    kUEKN5: "xjat59b",
+    $$css: true
+  },
+  data_table__meta: {
+    kMwMTN: "xs87ocq xs5hli",
+    kLh5Sq: "xym1t2f",
+    $$css: true
+  },
+  data_table__scroll: {
+    k2kXS: "xgyk9h7",
+    kNmBvv: "xw2csxc",
+    khsPd: "xlejusl x1ndh9ne",
+    ke4D0g: "xknh1wj x1j9yjdw",
+    $$css: true
+  },
+  data_table__table: {
+    kULEZF: "xiuoait",
+    kZnR7y: "x1mwwwfo",
+    kNUL7p: "xss6m8b",
+    $$css: true
+  },
+  data_table__heading: {
+    kmVPX3: "x3699eh",
+    kG2bcC: "x11njtxf",
+    kMwMTN: "xs87ocq xs5hli",
+    kLh5Sq: "xgommxb",
+    ko3Kzr: "xk50ysn",
+    kBYq9C: "xuxw1ft",
+    $$css: true
+  },
+  data_table__row_heading: {
+    kmVPX3: "x3699eh",
+    kG2bcC: "x11njtxf",
+    kMwMTN: "xtylnni",
+    ko3Kzr: "xk50ysn",
+    khsPd: "xlejusl x1ndh9ne",
+    $$css: true
+  },
+  data_table__cell: {
+    kmVPX3: "x3699eh",
+    kG2bcC: "x11njtxf",
+    khsPd: "xlejusl x1ndh9ne",
+    $$css: true
+  },
+  data_table__note: {
+    kogj98: "x1ghz6dp",
+    kAiAap: "x4pwpt2",
+    k2kXS: "xjq529q",
+    kMwMTN: "xs87ocq xs5hli",
+    kLh5Sq: "xyr29y3",
+    $$css: true
+  },
+  code: {
+    kULEZF: "x19vpta5",
+    kdYMnH: "xesnm00",
+    kCbEA6: "x10im51j",
+    kYk0Dm: "xvueqy4",
+    $$css: true
+  },
   install: {
     kMwMTN: "xtylnni xs5hli",
     knIRL8: "xrtw95r",
@@ -2867,6 +2951,39 @@ var recipes = {
   "hraness-marketing-proof-frame__credit": {
     default: marketingStyles.proof_frame__credit
   },
+  "hraness-marketing-data-table": {
+    default: marketingStyles.data_table
+  },
+  "hraness-marketing-data-table__head": {
+    default: marketingStyles.data_table__head
+  },
+  "hraness-marketing-data-table__title": {
+    default: marketingStyles.data_table__title
+  },
+  "hraness-marketing-data-table__meta": {
+    default: marketingStyles.data_table__meta
+  },
+  "hraness-marketing-data-table__scroll": {
+    default: marketingStyles.data_table__scroll
+  },
+  "hraness-marketing-data-table__table": {
+    default: marketingStyles.data_table__table
+  },
+  "hraness-marketing-data-table__heading": {
+    default: marketingStyles.data_table__heading
+  },
+  "hraness-marketing-data-table__row-heading": {
+    default: marketingStyles.data_table__row_heading
+  },
+  "hraness-marketing-data-table__cell": {
+    default: marketingStyles.data_table__cell
+  },
+  "hraness-marketing-data-table__note": {
+    default: marketingStyles.data_table__note
+  },
+  "hraness-marketing-code": {
+    default: marketingStyles.code
+  },
   "hraness-marketing-install": {
     default: marketingStyles.install
   },
@@ -3837,6 +3954,111 @@ function MarketingProofFrame({
     ]
   });
 }
+function dataTableCell(cell) {
+  if (cell !== null && typeof cell === "object" && !Array.isArray(cell) && "content" in cell) {
+    return cell;
+  }
+  return {
+    content: cell
+  };
+}
+function MarketingDataTable({
+  caption,
+  className,
+  columns,
+  meta,
+  note,
+  rows
+}) {
+  if (columns.length === 0)
+    throw new RangeError("Marketing data table needs at least one column.");
+  for (const row of rows) {
+    if (row.length !== columns.length)
+      throw new RangeError("Marketing data table rows must match the column count.");
+  }
+  return /* @__PURE__ */ jsxs2("figure", {
+    className: marketingClassName("hraness-marketing-data-table", className),
+    "data-hraness-marketing": "data-table",
+    children: [
+      /* @__PURE__ */ jsxs2("figcaption", {
+        className: marketingClassName("hraness-marketing-data-table__head"),
+        children: [
+          /* @__PURE__ */ jsx3("span", {
+            className: marketingClassName("hraness-marketing-data-table__title"),
+            children: caption
+          }),
+          meta === undefined ? null : /* @__PURE__ */ jsx3("span", {
+            className: marketingClassName("hraness-marketing-data-table__meta"),
+            children: meta
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx3("div", {
+        className: marketingClassName("hraness-marketing-data-table__scroll"),
+        children: /* @__PURE__ */ jsxs2("table", {
+          className: marketingClassName("hraness-marketing-data-table__table"),
+          children: [
+            /* @__PURE__ */ jsx3("thead", {
+              children: /* @__PURE__ */ jsx3("tr", {
+                children: columns.map((column, index) => /* @__PURE__ */ jsx3("th", {
+                  className: marketingClassName("hraness-marketing-data-table__heading"),
+                  "data-numeric": column.numeric === true ? "" : undefined,
+                  scope: "col",
+                  children: column.label
+                }, index))
+              })
+            }),
+            /* @__PURE__ */ jsx3("tbody", {
+              children: rows.map((row, rowIndex) => /* @__PURE__ */ jsx3("tr", {
+                children: row.map((cell, cellIndex) => {
+                  const {
+                    content,
+                    tone
+                  } = dataTableCell(cell);
+                  if (cellIndex === 0) {
+                    return /* @__PURE__ */ jsx3("th", {
+                      className: marketingClassName("hraness-marketing-data-table__row-heading"),
+                      "data-numeric": columns[0]?.numeric === true ? "" : undefined,
+                      scope: "row",
+                      children: content
+                    }, cellIndex);
+                  }
+                  return /* @__PURE__ */ jsx3("td", {
+                    className: marketingClassName("hraness-marketing-data-table__cell"),
+                    "data-numeric": columns[cellIndex]?.numeric === true ? "" : undefined,
+                    "data-tone": tone,
+                    children: content
+                  }, cellIndex);
+                })
+              }, rowIndex))
+            })
+          ]
+        })
+      }),
+      note === undefined ? null : /* @__PURE__ */ jsx3("p", {
+        className: marketingClassName("hraness-marketing-data-table__note"),
+        children: note
+      })
+    ]
+  });
+}
+function MarketingCodeBlock({
+  className,
+  code,
+  language
+}) {
+  return /* @__PURE__ */ jsx3("pre", {
+    className: marketingClassName("hraness-marketing-code", className),
+    "data-hraness-marketing": "code",
+    children: /* @__PURE__ */ jsx3(SyntaxCode, {
+      code,
+      ...language === undefined ? {} : {
+        language
+      },
+      styles: "classes"
+    })
+  });
+}
 function MarketingSectionLabel({
   children,
   className,
@@ -6016,4 +6238,4 @@ function ParticleHalo({
   });
 }
 
-export { foilEdge, foilTextImage, foilHalo, foilTextHalo, foilStyles, foilClassName, foilMarkClassName, FoilMark, SyntaxCode, marketingPatterns, MarketingPage, MarketingField, MarketingMain, MarketingCardRow, MarketingCardArt, MarketingCard, MarketingSiteHeader, MarketingSiteFooter, MarketingFlow, MarketingFacts, ProductHero, MarketingPillars, MarketingInstallPanel, MarketingProofFrame, MarketingSectionLabel, MarketingSection, MarketingPrimitives, MarketingStatStrip, MarketingInterfaceGrid, MarketingTrustBoundary, MarketingQuoteGrid, MarketingPricing, MarketingQuestionList, MarketingMaker, MarketingRelated, MarketingCallToAction, ArticleByline, ArticleProvenance, MarketingArticle, ArticleSources, ArticleCallout, ArticleRelatedProducts, ArticleIndex, effectsStyles, DitherSurface, TopBar, BottomBar, PageCanvas, DockedFooter, proceduralBackdropVariants, proceduralRecipeVersion, createProceduralBackdropRecipe, createParticleHaloRecipe, ProceduralBackdrop, ProviderMark, ProviderMarkChip, ParticleHalo };
+export { foilEdge, foilTextImage, foilHalo, foilTextHalo, foilStyles, foilClassName, foilMarkClassName, FoilMark, SyntaxCode, marketingPatterns, MarketingPage, MarketingField, MarketingMain, MarketingCardRow, MarketingCardArt, MarketingCard, MarketingSiteHeader, MarketingSiteFooter, MarketingFlow, MarketingFacts, ProductHero, MarketingPillars, MarketingInstallPanel, MarketingProofFrame, MarketingDataTable, MarketingCodeBlock, MarketingSectionLabel, MarketingSection, MarketingPrimitives, MarketingStatStrip, MarketingInterfaceGrid, MarketingTrustBoundary, MarketingQuoteGrid, MarketingPricing, MarketingQuestionList, MarketingMaker, MarketingRelated, MarketingCallToAction, ArticleByline, ArticleProvenance, MarketingArticle, ArticleSources, ArticleCallout, ArticleRelatedProducts, ArticleIndex, effectsStyles, DitherSurface, TopBar, BottomBar, PageCanvas, DockedFooter, proceduralBackdropVariants, proceduralRecipeVersion, createProceduralBackdropRecipe, createParticleHaloRecipe, ProceduralBackdrop, ProviderMark, ProviderMarkChip, ParticleHalo };

dist/react/index.js

@@ -15,6 +15,8 @@ import {
   MarketingCard,
   MarketingCardArt,
   MarketingCardRow,
+  MarketingCodeBlock,
+  MarketingDataTable,
   MarketingFacts,
   MarketingField,
   MarketingFlow,
@@ -57,7 +59,7 @@ import {
   marketingPatterns,
   proceduralBackdropVariants,
   proceduralRecipeVersion
-} from "../chunk-rs1jeher.js";
+} from "../chunk-kb67f931.js";
 import {
   STATUS_PAGE_AGENT_PREFIX,
   STATUS_PAGE_BACK_LABEL,
@@ -5545,12 +5547,10 @@ function DesignSystemGallery({
                       caption: "The log written by the example job.",
                       credit: "Captured 5 September 2026",
                       title: "relay run job-01",
-                      children: /* @__PURE__ */ jsx16("pre", {
+                      children: /* @__PURE__ */ jsx16(MarketingCodeBlock, {
                         className: "design-gallery__marketing-command",
-                        children: /* @__PURE__ */ jsx16(SyntaxCode, {
-                          code: '{"status":"complete","job":"job-01","durationMs":412}',
-                          styles: "classes"
-                        })
+                        code: '{"status":"complete","job":"job-01","durationMs":412}',
+                        language: "json"
                       })
                     }),
                     heading: "Run a job from your terminal, your code, or your agent",
@@ -5588,12 +5588,10 @@ function DesignSystemGallery({
                       children: "Requires Bun 1.3.14."
                     }),
                     children: [
-                      /* @__PURE__ */ jsx16("pre", {
+                      /* @__PURE__ */ jsx16(MarketingCodeBlock, {
                         className: "design-gallery__marketing-command",
-                        children: /* @__PURE__ */ jsx16(SyntaxCode, {
-                          code: "bun add --global relay@1.2.3",
-                          styles: "classes"
-                        })
+                        code: "bun add --global relay@1.2.3",
+                        language: "sh"
                       }),
                       /* @__PURE__ */ jsx16(MarketingFlow, {
                         ariaLabel: "First Relay job",
@@ -5666,10 +5664,8 @@ function DesignSystemGallery({
                     interfaces: [{
                       label: "CLI",
                       summary: "Run a named job.",
-                      example: /* @__PURE__ */ jsx16("pre", {
-                        children: /* @__PURE__ */ jsx16("code", {
-                          children: "relay run job-01"
-                        })
+                      example: /* @__PURE__ */ jsx16(MarketingCodeBlock, {
+                        code: "relay run job-01"
                       })
                     }, {
                       label: "SDK",
@@ -5741,6 +5737,32 @@ function DesignSystemGallery({
                       value: "0"
                     }]
                   }),
+                  /* @__PURE__ */ jsx16(MarketingDataTable, {
+                    caption: "Cold-run timing across interfaces",
+                    columns: [{
+                      label: "Interface"
+                    }, {
+                      label: "Median",
+                      numeric: true
+                    }, {
+                      label: "Worst observed",
+                      numeric: true
+                    }, {
+                      label: "Within target?"
+                    }],
+                    meta: "12 example jobs · 5 September 2026",
+                    note: "One repository on one machine; a smoke check, not a guarantee.",
+                    rows: [["CLI", "41 ms", "58 ms", {
+                      content: "yes",
+                      tone: "positive"
+                    }], ["SDK", "43 ms", "61 ms", {
+                      content: "yes",
+                      tone: "positive"
+                    }], ["Agent Skill", "77 ms", "120 ms", {
+                      content: "no",
+                      tone: "negative"
+                    }]]
+                  }),
                   /* @__PURE__ */ jsx16(MarketingQuoteGrid, {
                     heading: "From the people building with it.",
                     headingId: "design-gallery-quotes-title",
@@ -5948,13 +5970,10 @@ function DesignSystemGallery({
                   eyebrow: "Job runner",
                   frame: /* @__PURE__ */ jsx16(MarketingProofFrame, {
                     title: "relay run job-01",
-                    children: /* @__PURE__ */ jsx16("pre", {
+                    children: /* @__PURE__ */ jsx16(MarketingCodeBlock, {
                       className: "design-gallery__marketing-command",
-                      children: /* @__PURE__ */ jsx16(SyntaxCode, {
-                        code: `$ relay run job-01
-{"status":"complete","job":"job-01","durationMs":412}`,
-                        styles: "classes"
-                      })
+                      code: `$ relay run job-01
+{"status":"complete","job":"job-01","durationMs":412}`
                     })
                   }),
                   heading: "Run a job from your terminal, your code, or your agent",
@@ -6980,6 +6999,8 @@ export {
   MarketingFlow,
   MarketingField,
   MarketingFacts,
+  MarketingDataTable,
+  MarketingCodeBlock,
   MarketingCardRow,
   MarketingCardArt,
   MarketingCard,