@hraness/design-kit 0.35.0 → 0.35.2

package/dist/stylex.css

@@ -712,10 +712,6 @@
     padding-block: .25rem;
   }
 
-  .x1267ecw {
-    padding-block: .35rem;
-  }
-
   .x1bilvtl {
     padding-block: .375rem;
   }
@@ -728,6 +724,10 @@
     padding-block: .5rem;
   }
 
+  .x8fiyw4 {
+    padding-block: .65rem;
+  }
+
   .xo0yzjp {
     padding-block: .75rem;
   }
@@ -816,10 +816,6 @@
     padding-inline: .625rem;
   }
 
-  .x1f6otoe {
-    padding-inline: .65rem;
-  }
-
   .x1ryrjj2 {
     padding-inline: .75rem;
   }
@@ -1283,10 +1279,6 @@
     background-color: color-mix(in srgb,var(--foreground) 8%,transparent);
   }
 
-  .xf7cb96 {
-    background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 4%,var(--hraness-marketing-surface, var(--surface, Canvas)));
-  }
-
   .xy1scu2 {
     background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 5%,var(--hraness-marketing-background, var(--background, Canvas)));
   }
@@ -2587,6 +2579,10 @@
     grid-template-columns: repeat(auto-fit,minmax(min(100%,var(--_hraness-marketing-grid-track, 18rem)),1fr));
   }
 
+  .xe92ajh {
+    grid-template-columns: repeat(var(--_hraness-agent-target-wide-columns, var(--_hraness-agent-target-columns, 1)),minmax(0,1fr));
+  }
+
   .x3g07o8 {
     grid-template-columns: repeat(var(--hraness-marketing-fact-columns, 4),minmax(0,1fr));
   }
@@ -3769,10 +3765,6 @@
     background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 6%,transparent);
   }
 
-  .x3oli7v:hover {
-    background-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 9%,var(--hraness-marketing-surface, var(--surface, Canvas)));
-  }
-
   .xjoriyk:hover {
     background-color: color-mix(in srgb,var(--hraness-marketing-related-tone, var(--hraness-marketing-ink)) 6%,transparent);
   }
@@ -4376,6 +4368,10 @@
     border-right-width: 2px;
   }
 
+  .x1h3am7x {
+    border-top-color: color-mix(in srgb,var(--hraness-marketing-ink, var(--foreground, CanvasText)) 12%,transparent);
+  }
+
   .x1v8p93f {
     border-top-color: #0000;
   }
@@ -4392,6 +4388,10 @@
     border-top-style: solid;
   }
 
+  .x178xt8z {
+    border-top-width: 1px;
+  }
+
   .xamhcws {
     border-top-width: 2px;
   }
@@ -4404,10 +4404,6 @@
     bottom: 0;
   }
 
-  .x1at03k5 {
-    height: .95rem;
-  }
-
   .xqtp20y {
     height: 0;
   }
@@ -4540,10 +4536,6 @@
     min-height: 250px;
   }
 
-  .x1in32aq {
-    min-height: 2rem;
-  }
-
   .x13gjtz1 {
     min-height: 3.5rem;
   }
@@ -4628,10 +4620,6 @@
     top: var(--hraness-design-procedural-ripple-y);
   }
 
-  .x2tfi8i {
-    width: .95rem;
-  }
-
   .xnalus7 {
     width: 0;
   }
@@ -5863,6 +5851,18 @@
   }
 }
 
+@container hraness-agent-setup (width >= 20rem) {
+  .x6fuqh4.x6fuqh4 {
+    --_hraness-agent-target-columns: 2;
+  }
+}
+
+@container hraness-agent-setup (width >= 34rem) {
+  .x1ii36b5.x1ii36b5 {
+    --_hraness-agent-target-wide-columns: 3;
+  }
+}
+
 @container hraness-platform-install (width <= 30rem) {
   .x1rp0mr4.x1rp0mr4 {
     --_hraness-platform-install-narrow-tab-font-size: .8125rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.35.0",
+  "version": "0.35.2",
   "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",
@@ -300,6 +300,8 @@
     "src/agent-setup.ts",
     "src/react/agent-setup-prompt.tsx",
     "src/react/agent-setup-prompt.stylex.ts",
+    "src/react/setup-copy-button.tsx",
+    "src/react/setup-copy-button.stylex.ts",
     "AGENT_SETUP.md",
     "src/react/marketing-comparison.tsx",
     "src/react/marketing-comparison.stylex.ts",

package/portfolio-inventory.json

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

package/src/article-html.ts

@@ -83,6 +83,8 @@ export interface ArticleHtmlInput {
   readonly id?: string;
   readonly provenance: ArticleProvenanceRecord | null;
   readonly published: ArticleIsoDate;
+  /** Show publication and update dates. Defaults to true; dates remain required and validated when hidden. */
+  readonly showDates?: boolean;
   readonly toc?: readonly ArticleTocItem[];
   readonly tocLabel?: string;
   readonly updated?: ArticleIsoDate;
@@ -91,7 +93,7 @@ export interface ArticleHtmlInput {
 /** The static equivalent of `MarketingArticle`. */
 export function renderArticleHtml(input: ArticleHtmlInput): string {
   const headingId = input.headingId ?? "article-title";
-  const { published, updated } = input;
+  const { published, updated, showDates = true } = input;
   assertArticleDates(updated === undefined ? { published } : { published, updated });
   const toc = input.toc ?? [];
   for (const item of toc) {
@@ -99,16 +101,16 @@ export function renderArticleHtml(input: ArticleHtmlInput): string {
   }
   const tocId = `${headingId}-contents`;
   const meta = [
-    input.author === undefined ? "" : renderArticleBylineHtml(input.author) + SEPARATOR,
-    dateHtml("Published", published),
-    updated === undefined ? "" : SEPARATOR + dateHtml("Updated", updated),
-  ].join("");
+    input.author === undefined ? "" : renderArticleBylineHtml(input.author),
+    showDates ? dateHtml("Published", published) : "",
+    showDates && updated !== undefined ? dateHtml("Updated", updated) : "",
+  ].filter(Boolean).join(SEPARATOR);
   const header = [
     '<header class="plain-publication__article-header">',
     present(input.eyebrow) ? `<p class="plain-publication__eyebrow">${escapeArticleHtml(input.eyebrow)}</p>` : "",
     `<h1 id="${escapeArticleHtml(headingId)}">${escapeArticleHtml(input.heading)}</h1>`,
     present(input.dek) ? `<p class="plain-publication__article-dek">${escapeArticleHtml(input.dek)}</p>` : "",
-    `<p class="plain-publication__article-meta">${meta}</p>`,
+    meta === "" ? "" : `<p class="plain-publication__article-meta">${meta}</p>`,
     input.provenance === null ? "" : renderArticleProvenanceHtml(input.provenance),
     "</header>",
   ].join("");
@@ -135,21 +137,35 @@ export function renderArticleHtml(input: ArticleHtmlInput): string {
 export function renderArticleSourcesHtml({
   heading = ARTICLE_SOURCES_HEADING,
   headingId = "article-sources",
+  showDates = true,
   sources,
-}: Readonly<{ heading?: string; headingId?: string; sources: readonly ArticleSourceItem[] }>): string {
+}: Readonly<{
+  heading?: string;
+  headingId?: string;
+  /** Show check dates. Defaults to true; checkedOn remains required and validated when hidden. */
+  showDates?: boolean;
+  sources: readonly ArticleSourceItem[];
+}>): string {
   if (sources.length === 0) return "";
-  for (const source of sources) assertArticleHref(source.href);
+  for (const source of sources) {
+    assertArticleHref(source.href);
+    formatArticleDate(source.checkedOn);
+  }
   return [
     `<section aria-labelledby="${escapeArticleHtml(headingId)}" class="plain-publication__sources">`,
     `<h2 id="${escapeArticleHtml(headingId)}">${escapeArticleHtml(heading)}</h2>`,
     "<ol>",
-    ...sources.map((source) => [
-      `<li><a href="${escapeArticleHtml(source.href)}">${escapeArticleHtml(source.title)}</a>`,
-      "<span>",
-      present(source.publisher) ? escapeArticleHtml(source.publisher) + SEPARATOR : "",
-      dateHtml("Checked", source.checkedOn),
-      "</span></li>",
-    ].join("")),
+    ...sources.map((source) => {
+      const meta = [
+        present(source.publisher) ? escapeArticleHtml(source.publisher) : "",
+        showDates ? dateHtml("Checked", source.checkedOn) : "",
+      ].filter(Boolean).join(SEPARATOR);
+      return [
+        `<li><a href="${escapeArticleHtml(source.href)}">${escapeArticleHtml(source.title)}</a>`,
+        meta === "" ? "" : `<span>${meta}</span>`,
+        "</li>",
+      ].join("");
+    }),
     "</ol></section>",
   ].join("");
 }
@@ -228,6 +244,7 @@ export function renderArticleIndexHtml({
   headingLevel = 2,
   id,
   items,
+  showDates = true,
   summary,
 }: Readonly<{
   className?: string;
@@ -236,6 +253,8 @@ export function renderArticleIndexHtml({
   headingLevel?: 1 | 2 | 3 | 4 | 5;
   id?: string;
   items: readonly ArticleIndexItem[];
+  /** Show publication and update dates. Defaults to true; item dates remain required and validated when hidden. */
+  showDates?: boolean;
   summary?: string;
 }>): string {
   if (![1, 2, 3, 4, 5].includes(headingLevel)) throw new RangeError("Article index heading level must be 1 to 5.");
@@ -259,10 +278,13 @@ export function renderArticleIndexHtml({
       present(item.eyebrow) ? `<p class="plain-publication__entry-label">${escapeArticleHtml(item.eyebrow)}</p>` : "",
       `<${entry} class="plain-publication__entry-title"><a href="${escapeArticleHtml(item.href)}">${escapeArticleHtml(item.title)}</a></${entry}>`,
       `<p class="plain-publication__entry-dek">${escapeArticleHtml(item.dek)}</p>`,
-      '<p class="plain-publication__entry-meta">',
-      dateHtml("Published", item.published),
-      item.updated === undefined ? "" : SEPARATOR + dateHtml("Updated", item.updated),
-      "</p></article>",
+      showDates ? [
+        '<p class="plain-publication__entry-meta">',
+        dateHtml("Published", item.published),
+        item.updated === undefined ? "" : SEPARATOR + dateHtml("Updated", item.updated),
+        "</p>",
+      ].join("") : "",
+      "</article>",
     ].join("")),
     "</div></section>",
   ].join("");

package/src/react/agent-setup-prompt.stylex.ts

@@ -89,39 +89,19 @@ export const agentSetupStyles = stylex.create({
     ":hover": { color: ink },
     "::marker": { content: '""' },
   },
-  copy: {
-    alignItems: "center",
-    appearance: "none",
-    backgroundColor: { default: background, ":hover": surface, [forced]: "ButtonFace" },
-    borderColor: { default: line, [forced]: "ButtonText" },
-    borderRadius: "0.5rem",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    boxSizing: "border-box",
-    color: { default: ink, [forced]: "ButtonText" },
-    cursor: "pointer",
-    display: { default: "inline-flex", [noScript]: "none" },
-    flexShrink: 0,
-    fontFamily: "inherit",
-    fontSize: "0.8125rem",
-    gap: "0.4rem",
-    justifyContent: "center",
-    lineHeight: 1,
-    margin: 0,
-    minBlockSize: "2.75rem",
-    outline: { default: "none", ":focus-visible": `2px solid ${focus}` },
-    outlineOffset: "2px",
-    padding: "0.65rem 0.8rem",
-  },
   copyOverlay: {
     insetBlockEnd: "0.5rem",
     insetInlineEnd: "0.5rem",
     position: "absolute",
   },
-  copyIcon: { blockSize: "1rem", flexShrink: 0, inlineSize: "1rem" },
   targets: { display: "grid", gap: "0.6rem", minInlineSize: 0 },
   targetsLabel: { color: { default: muted, [forced]: "CanvasText" }, fontSize: "0.8125rem", fontWeight: 500, margin: 0 },
   targetList: { display: "grid", gap: "0.45rem", gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 10rem), 1fr))", listStyle: "none", margin: 0, padding: 0 },
+  targetGrid: {
+    gridTemplateColumns: "repeat(var(--_hraness-agent-target-wide-columns, var(--_hraness-agent-target-columns, 1)), minmax(0, 1fr))",
+    "--_hraness-agent-target-columns": { default: null, "@container hraness-agent-setup (min-width: 20rem)": "2" },
+    "--_hraness-agent-target-wide-columns": { default: null, "@container hraness-agent-setup (min-width: 34rem)": "3" },
+  },
   target: {
     alignItems: "center",
     backgroundColor: { default: surface, ":hover": background, [forced]: "ButtonFace" },

package/src/react/agent-setup-prompt.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useId, useRef, useState, type KeyboardEvent, ty
 import type { ProviderMarkDescriptor } from "../provider-marks.js";
 import { agentSetupClassName as cx } from "./agent-setup-prompt.stylex.js";
 import { ProviderMark } from "./provider-mark.js";
+import { SetupCopyButton } from "./setup-copy-button.js";
 import { SyntaxCode } from "./syntax-code.js";
 
 export interface AgentSetupTarget {
@@ -20,6 +21,8 @@ export interface AgentSetupPromptProps {
   readonly prompt: string;
   readonly label?: string;
   readonly targets?: readonly AgentSetupTarget[];
+  /** Keep provider actions below the prompt, or place them beside it in wide containers. */
+  readonly targetsPlacement?: "responsive" | "below";
   readonly className?: string;
   /** Runs once after a successful copy; callback failures do not change copy feedback. */
   readonly onCopied?: () => void;
@@ -186,21 +189,8 @@ function useCopy(text: string, subject: string, fallback: () => HTMLElement | nu
   return { state, message, copy };
 }
 
-function CopyGlyph({ copied }: Readonly<{ copied: boolean }>) {
-  return (
-    <svg aria-hidden="true" className={cx(["copyIcon"])} fill="none" focusable="false" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} viewBox="0 0 24 24">
-      {copied ? <path d="M5 12.5l4.5 4.5L19 7.5" /> : <><rect height="12" rx="2" width="12" x="8" y="8" /><path d="M16 8V6a2 2 0 0 0-2-2H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2" /></>}
-    </svg>
-  );
-}
-
 function CopyButton({ copy, overlay = false, state, subject }: Readonly<{ copy: () => Promise<boolean>; overlay?: boolean; state: CopyState; subject: string }>) {
-  return (
-    <button aria-busy={state === "copying" || undefined} aria-label={`${state === "copied" ? "Copied" : "Copy"} ${subject}`} className={cx(["copy", overlay && "copyOverlay"])} data-copy-state={state} disabled={state === "copying"} onClick={() => { void copy(); }} type="button">
-      <CopyGlyph copied={state === "copied"} />
-      <span>{state === "copied" ? "Copied" : state === "copying" ? "Copying" : state === "failed" ? "Copy failed" : "Copy"}</span>
-    </button>
-  );
+  return <SetupCopyButton className={cx([overlay && "copyOverlay"], "hraness-agent-setup__copy")} iconClassName="hraness-agent-setup__copyIcon" onCopy={() => { void copy(); }} state={state} subject={subject} />;
 }
 
 function CopyStatus({ children }: Readonly<{ children: ReactNode }>) {
@@ -231,10 +221,11 @@ function reserveTargetTab(owner: Window | null): Window | null {
 }
 
 /** A quiet prompt preview with the complete source behind a native disclosure. */
-export function AgentSetupPrompt({ prompt, label = "Agent setup", targets = [], className, onCopied }: AgentSetupPromptProps) {
+export function AgentSetupPrompt({ prompt, label = "Agent setup", targets = [], targetsPlacement = "responsive", className, onCopied }: AgentSetupPromptProps) {
   assertText(prompt, "Agent setup prompt");
   assertText(label, "Agent setup label");
   assertEntries(targets, "Agent setup target");
+  if (targetsPlacement !== "responsive" && targetsPlacement !== "below") throw new RangeError("Unsupported agent setup targets placement.");
   for (const target of targets) {
     assertHref(target.href);
     if (target.mode !== undefined && target.mode !== "prefill" && target.mode !== "copy-and-open") throw new RangeError("Unsupported agent setup target mode.");
@@ -313,8 +304,8 @@ export function AgentSetupPrompt({ prompt, label = "Agent setup", targets = [],
   }, []);
 
   return (
-    <section aria-label={label} className={cx(["root"], className)} data-hraness-agent-setup-prompt="">
-      <div className={cx(["layout", targets.length > 0 && "withTargets"])}>
+    <section aria-label={label} className={cx(["root"], className)} data-hraness-agent-setup-prompt="" data-targets-placement={targetsPlacement}>
+      <div className={cx(["layout", targets.length > 0 && targetsPlacement === "responsive" && "withTargets"])}>
         <div className={cx(["frame"])} data-copy-state={state}>
           <div className={cx(["preview"])} hidden={expanded}>
             <pre aria-label={`${label} preview`} className={cx(["pre", "previewText"])}>{prompt}</pre>
@@ -330,7 +321,7 @@ export function AgentSetupPrompt({ prompt, label = "Agent setup", targets = [],
         {targets.length === 0 ? null : (
           <aside aria-labelledby={`${id}-targets`} className={cx(["targets"])}>
             <p className={cx(["targetsLabel"])} id={`${id}-targets`}>Open in</p>
-            <ul className={cx(["targetList"])}>
+            <ul className={cx(["targetList", targetsPlacement === "below" && "targetGrid"])}>
               {targets.map((target) => (
                 <li key={target.id}>
                   <a aria-busy={target.mode === "copy-and-open" && state === "copying" || undefined} aria-disabled={target.mode === "copy-and-open" && state === "copying" || undefined} aria-label={target.mode === "copy-and-open" ? `Copy prompt and open ${target.label}` : undefined} className={cx(["target"])} data-agent-target={target.id} data-agent-target-mode={target.mode ?? "prefill"} href={target.href} onAuxClick={target.mode === "copy-and-open" ? (event) => { copyAndOpen(event, target); } : undefined} onClick={target.mode === "copy-and-open" ? (event) => { copyAndOpen(event, target); } : undefined} rel="noopener noreferrer" target="_blank">

package/src/react/article.tsx

@@ -93,6 +93,8 @@ export interface MarketingArticleProps {
   /** Required so every article decides its drafting note. Pass null only for writing with no AI involvement and no review record. */
   readonly provenance: ArticleProvenanceRecord | null;
   readonly published: ArticleIsoDate;
+  /** Show publication and update dates. Defaults to true; dates remain required and validated when hidden. */
+  readonly showDates?: boolean;
   readonly toc?: readonly ArticleTocItem[];
   readonly tocLabel?: string;
   readonly updated?: ArticleIsoDate;
@@ -116,6 +118,7 @@ export function MarketingArticle({
   id,
   provenance,
   published,
+  showDates = true,
   toc,
   tocLabel = ARTICLE_TOC_LABEL,
   updated,
@@ -138,11 +141,13 @@ export function MarketingArticle({
         {eyebrow === undefined || eyebrow === "" ? null : <p className="plain-publication__eyebrow">{eyebrow}</p>}
         <h1 id={headingId}>{heading}</h1>
         {dek === undefined || dek === "" ? null : <p className="plain-publication__article-dek">{dek}</p>}
-        <p className="plain-publication__article-meta">
-          {author === undefined ? null : <><ArticleByline author={author} /><Separator /></>}
-          <ArticleDate label="Published" value={published} />
-          {updated === undefined ? null : <><Separator /><ArticleDate label="Updated" value={updated} /></>}
-        </p>
+        {author === undefined && !showDates ? null : (
+          <p className="plain-publication__article-meta">
+            {author === undefined ? null : <><ArticleByline author={author} />{showDates ? <Separator /> : null}</>}
+            {showDates ? <ArticleDate label="Published" value={published} /> : null}
+            {!showDates || updated === undefined ? null : <><Separator /><ArticleDate label="Updated" value={updated} /></>}
+          </p>
+        )}
         {provenance === null ? null : <ArticleProvenance provenance={provenance} />}
       </header>
       <div className="plain-publication__article-layout">
@@ -165,14 +170,20 @@ export function MarketingArticle({
 export function ArticleSources({
   heading = ARTICLE_SOURCES_HEADING,
   headingId = "article-sources",
+  showDates = true,
   sources,
 }: Readonly<{
   heading?: string;
   headingId?: string;
+  /** Show check dates. Defaults to true; checkedOn remains required and validated when hidden. */
+  showDates?: boolean;
   sources: readonly ArticleSourceItem[];
 }>) {
   if (sources.length === 0) return null;
-  for (const source of sources) assertArticleHref(source.href);
+  for (const source of sources) {
+    assertArticleHref(source.href);
+    formatArticleDate(source.checkedOn);
+  }
   return (
     <section aria-labelledby={headingId} className="plain-publication__sources">
       <h2 id={headingId}>{heading}</h2>
@@ -180,10 +191,12 @@ export function ArticleSources({
         {sources.map((source) => (
           <li key={`${source.href}-${source.title}`}>
             <a href={source.href}>{source.title}</a>
-            <span>
-              {source.publisher === undefined || source.publisher === "" ? null : <>{source.publisher}<Separator /></>}
-              <ArticleDate label="Checked" value={source.checkedOn} />
-            </span>
+            {!showDates && (source.publisher === undefined || source.publisher === "") ? null : (
+              <span>
+                {source.publisher === undefined || source.publisher === "" ? null : <>{source.publisher}{showDates ? <Separator /> : null}</>}
+                {showDates ? <ArticleDate label="Checked" value={source.checkedOn} /> : null}
+              </span>
+            )}
           </li>
         ))}
       </ol>
@@ -253,6 +266,7 @@ export function ArticleIndex({
   headingLevel = 2,
   id,
   items,
+  showDates = true,
   summary,
 }: Readonly<{
   className?: string;
@@ -261,6 +275,8 @@ export function ArticleIndex({
   headingLevel?: 1 | 2 | 3 | 4 | 5;
   id?: string;
   items: readonly ArticleIndexItem[];
+  /** Show publication and update dates. Defaults to true; item dates remain required and validated when hidden. */
+  showDates?: boolean;
   summary?: string;
 }>) {
   if (![1, 2, 3, 4, 5].includes(headingLevel)) throw new RangeError("Article index heading level must be 1 to 5.");
@@ -290,10 +306,12 @@ export function ArticleIndex({
             {item.eyebrow === undefined || item.eyebrow === "" ? null : <p className="plain-publication__entry-label">{item.eyebrow}</p>}
             <EntryTag className="plain-publication__entry-title"><a href={item.href}>{item.title}</a></EntryTag>
             <p className="plain-publication__entry-dek">{item.dek}</p>
-            <p className="plain-publication__entry-meta">
-              <ArticleDate label="Published" value={item.published} />
-              {item.updated === undefined ? null : <><Separator /><ArticleDate label="Updated" value={item.updated} /></>}
-            </p>
+            {showDates ? (
+              <p className="plain-publication__entry-meta">
+                <ArticleDate label="Published" value={item.published} />
+                {item.updated === undefined ? null : <><Separator /><ArticleDate label="Updated" value={item.updated} /></>}
+              </p>
+            ) : null}
           </article>
         ))}
       </div>

package/src/react/design-gallery.tsx

@@ -401,6 +401,7 @@ export function DesignSystemGallery({
           <MarketingSection heading="Ask your agent to set it up." headingId="gallery-agent-setup" headingLevel={3} label="Agent setup">
             <AgentSetupPrompt
               label="Relay agent setup"
+              targetsPlacement="below"
               prompt={"Install Relay from https://relay.example/install.sh.\nRead the project instructions before making changes.\nRun relay init in this workspace and create a job named sample.\nRun the job, then show me its log."}
               targets={[
                 { href: "https://claude.ai/new", id: "claude", label: "Claude", mark: "claudecode", mode: "copy-and-open" },
@@ -677,6 +678,7 @@ export function DesignSystemGallery({
           after={(
             <ArticleSources
               headingId="gallery-article-sources"
+              showDates={false}
               sources={[
                 { checkedOn: "2026-09-20", href: "#articles", publisher: "Relay", title: "Relay 2.4 release notes" },
               ]}
@@ -692,6 +694,7 @@ export function DesignSystemGallery({
             review: { reviewer: "an independent AI editorial review", reviewerType: "ai" },
           }}
           published="2026-09-10"
+          showDates={false}
           toc={[
             { href: "#gallery-article-problem", label: "The problem" },
             { href: "#gallery-article-approach", label: "The approach" },

package/src/react/platform-install.stylex.ts

@@ -221,40 +221,6 @@ export const platformInstallStyles = stylex.create({
     fontSize: "inherit",
     padding: 0,
   },
-  copy: {
-    alignItems: "center",
-    appearance: "none",
-    backgroundColor: {
-      default: `color-mix(in srgb, ${ink} 4%, ${surface})`,
-      ":hover": `color-mix(in srgb, ${ink} 9%, ${surface})`,
-      [forced]: "ButtonFace",
-    },
-    borderColor: { default: line, [forced]: "ButtonText" },
-    borderRadius: "0.5rem",
-    borderStyle: "solid",
-    borderWidth: "1px",
-    boxSizing: "border-box",
-    color: { default: ink, [forced]: "ButtonText" },
-    cursor: "pointer",
-    display: { default: "inline-flex", [noScript]: "none" },
-    flexShrink: 0,
-    fontFamily: textFont,
-    fontSize: "0.8125rem",
-    fontWeight: 500,
-    gap: "0.35rem",
-    lineHeight: 1,
-    margin: 0,
-    minBlockSize: { default: "2rem", "@media (pointer: coarse)": "2.75rem" },
-    outline: { default: "none", ":focus-visible": `2px solid ${focusRing}` },
-    outlineOffset: "1px",
-    paddingBlock: "0.35rem",
-    paddingInline: "0.65rem",
-  },
-  copyIcon: {
-    blockSize: "0.95rem",
-    flexShrink: 0,
-    inlineSize: "0.95rem",
-  },
   alternatives: {
     display: "grid",
     gap: "0.6rem",
@@ -269,6 +235,13 @@ export const platformInstallStyles = stylex.create({
     lineHeight: 1.5,
     margin: 0,
   },
+  commandNote: {
+    borderBlockStartColor: { default: line, [forced]: "CanvasText" },
+    borderBlockStartStyle: "solid",
+    borderBlockStartWidth: "1px",
+    paddingBlock: "0.65rem",
+    paddingInline: "0.95rem",
+  },
   unavailable: {
     borderColor: { default: line, [forced]: "CanvasText" },
     borderRadius: "0.75rem",
@@ -359,8 +332,6 @@ const hooks: Partial<Record<Part, string>> = {
   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",