@hraness/design-kit 0.34.0 → 0.35.1

package/src/portfolio.ts

@@ -108,11 +108,39 @@ export type PortfolioProvenance = Readonly<{
   files: readonly Readonly<{ path: string; sha256: string }>[];
 }>;
 
+export type PortfolioPackTone = "rose" | "indigo" | "amber" | "emerald";
+
+/** The homepage categories, in the same order as hraness.com. */
+export type PortfolioPack = Readonly<{
+  slug: string;
+  title: string;
+  tone: PortfolioPackTone;
+  members: readonly PortfolioProductId[];
+}>;
+
+export type PortfolioStudioItem = Readonly<{
+  productId: PortfolioProductId;
+  href: string;
+  name: string;
+  role: string;
+  mark: string;
+  domain: string;
+}>;
+
+/** Product-neutral data shaped for the shared MarketingRelated composition. */
+export type PortfolioStudioGroup = Readonly<{
+  heading: string;
+  headingId: string;
+  tone: PortfolioPackTone | "neutral";
+  items: readonly PortfolioStudioItem[];
+}>;
+
 export type PortfolioSnapshot = Readonly<{
   contract: "hraness.design-kit-portfolio/v1";
   formatVersion: 1;
   provenance: PortfolioProvenance;
   products: Readonly<Record<PortfolioProductId, PortfolioProduct>>;
+  packs: readonly PortfolioPack[];
   relations: readonly PortfolioRelation[];
   /** SHA-256 of the snapshot's compact JSON without this key. Pin it in a consumer test. */
   digest: string;
@@ -154,6 +182,7 @@ function deepFreeze<T>(value: T): T {
 /** The whole snapshot, frozen so one consumer cannot change another's facts at runtime. */
 export const portfolioFacts: PortfolioSnapshot = deepFreeze(portfolioSnapshot);
 export const portfolioProducts: PortfolioSnapshot["products"] = portfolioFacts.products;
+export const portfolioPacks: readonly PortfolioPack[] = portfolioFacts.packs;
 export const portfolioRelations: PortfolioSnapshot["relations"] = portfolioFacts.relations;
 export const portfolioProvenance: PortfolioProvenance = portfolioFacts.provenance;
 export const portfolioDigest: string = portfolioFacts.digest;
@@ -224,3 +253,47 @@ export function usesPairs(): readonly PortfolioUsesPair[] {
     target: product(relation.target),
   }));
 }
+
+/**
+ * Present only the caller's selected products, once each, in the homepage's
+ * category and member order. Categories with no selected products disappear.
+ * Products outside a pack follow in a neutral group. This does not infer an
+ * integration or expand a site's curated related-product selection.
+ */
+export function portfolioRelatedGroups(
+  ids: readonly PortfolioProductId[],
+  headingPrefix = "related",
+): readonly PortfolioStudioGroup[] {
+  if (!/^[a-z][a-z0-9-]*$/u.test(headingPrefix)) {
+    throw new PortfolioFactsError("The related heading prefix must be a lowercase HTML identifier.");
+  }
+  const selected = new Set(ids.map((id) => product(id).id));
+  const item = (id: PortfolioProductId): PortfolioStudioItem => {
+    const entry = product(id);
+    return {
+      productId: id,
+      href: entry.canonicalUrl,
+      name: entry.messaging.names.name,
+      role: entry.oneLiner,
+      mark: entry.mark,
+      domain: entry.canonicalUrl.replace(/^https?:\/\/(?:www\.)?([^/:?#]+).*$/u, "$1"),
+    };
+  };
+  const groups: PortfolioStudioGroup[] = [];
+  for (const pack of portfolioPacks) {
+    const members = pack.members.filter((id) => selected.delete(id));
+    if (members.length > 0) groups.push({
+      heading: pack.title,
+      headingId: `${headingPrefix}-${pack.slug}`,
+      tone: pack.tone,
+      items: members.map(item),
+    });
+  }
+  if (selected.size > 0) groups.push({
+    heading: "More from Hraness",
+    headingId: `${headingPrefix}-more`,
+    tone: "neutral",
+    items: portfolioProductIds.filter((id) => selected.has(id)).map(item),
+  });
+  return groups;
+}

package/src/product-marketing-foundation.css

@@ -108,6 +108,21 @@
   text-underline-offset: 0.16em;
 }
 
+
+.hraness-marketing-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]),
+.hraness-marketing-maker__links a {
+  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.2em;
+}
+
+.hraness-marketing-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]):is(:hover, :focus-visible),
+.hraness-marketing-maker__links a:is(:hover, :focus-visible) {
+  text-decoration-color: currentColor;
+}
+
 .hraness-marketing-page :where(code, kbd, pre) {
   font-family: var(--hraness-marketing-mono-font);
 }
@@ -431,3 +446,17 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 }
 
 }
+
+/* Product-owned SVG content grammar; the diagram's React frame stays compiled. */
+@layer components.hraness-design-kit.legacy {
+.hraness-diagram .hraness-diagram__label { fill: var(--foreground); font-family: var(--font-text); font-size: 20px; font-weight: 500; }
+.hraness-diagram .hraness-diagram__detail { fill: var(--muted); font-family: var(--font-text); font-size: 16px; font-weight: 400; }
+.hraness-diagram .hraness-diagram__node { fill: var(--background); stroke: var(--line); stroke-width: 1; }
+.hraness-diagram .hraness-diagram__connector,
+.hraness-diagram .hraness-diagram__icon { color: var(--primary); fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+@media (forced-colors: active) {
+.hraness-diagram .hraness-diagram__label, .hraness-diagram .hraness-diagram__detail { fill: CanvasText; }
+.hraness-diagram .hraness-diagram__node { fill: Canvas; stroke: CanvasText; }
+.hraness-diagram .hraness-diagram__connector, .hraness-diagram .hraness-diagram__icon { color: CanvasText; }
+}
+}

package/src/product-marketing.css

@@ -101,6 +101,21 @@
   text-underline-offset: 0.16em;
 }
 
+
+.hraness-marketing-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]),
+.hraness-marketing-maker__links a {
+  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.2em;
+}
+
+.hraness-marketing-page :where(p, li, dd, dt, figcaption) a:not([role="button"], [data-emphasis], [data-hraness-marketing], [data-foil]):is(:hover, :focus-visible),
+.hraness-marketing-maker__links a:is(:hover, :focus-visible) {
+  text-decoration-color: currentColor;
+}
+
 .hraness-marketing-page :where(code, kbd, pre) {
   font-family: var(--hraness-marketing-mono-font);
 }
@@ -749,6 +764,8 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   line-height: var(--hraness-marketing-summary-leading, 1.6);
 }
 
+.hraness-marketing-hero__install { inline-size: min(100%, 44rem); min-inline-size: 0; margin-block-start: 0.75rem; text-align: start; }
+
 .hraness-marketing-hero__example {
   max-inline-size: var(--hraness-marketing-example-measure, var(--hraness-marketing-copy-measure));
   margin-block-start: -0.35rem;
@@ -1029,6 +1046,11 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   line-height: 1.5;
 }
 
+.hraness-marketing-pillars[data-presentation="benefits"] { border-block: 0; gap: 2.75rem 3rem; }
+.hraness-marketing-pillars[data-presentation="benefits"] > div { border: 0; padding: 0; gap: 0.75rem; }
+.hraness-marketing-pillars__icon { display: block; inline-size: 1.5rem; block-size: 1.5rem; margin-block-end: 1.1rem; color: var(--primary); }
+.hraness-marketing-pillars__icon > svg { inline-size: 100%; block-size: 100%; }
+
 /* Product frame */
 
 .hraness-marketing-proof-frame {
@@ -1345,12 +1367,28 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   max-inline-size: none;
 }
 
-/* Related: labeled tiers of sibling cards */
+/* Studio products use the portfolio category rule and compact mark rows. */
+
+.hraness-marketing-related__groups {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
+  gap: 2.5rem 3.5rem;
+  align-items: start;
+}
 
 .hraness-marketing-related__group {
+  --hraness-marketing-related-tone: var(--hraness-marketing-ink);
   display: grid;
-  gap: 1.5rem;
+  gap: 1rem;
   min-inline-size: 0;
+  border-block-start: 2px solid var(--hraness-marketing-related-tone);
+  padding-block-start: 1rem;
+}
+
+@media (forced-colors: active) {
+  .hraness-marketing-related__group {
+    --hraness-marketing-related-tone: CanvasText;
+  }
 }
 
 .hraness-marketing-related__group-header {
@@ -1359,93 +1397,151 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   gap: 0.5rem;
 }
 
-/* Tier headings take the third heading size so a display face never renders
- * at caption size. */
 .hraness-marketing-related__group-heading {
   margin: 0;
   color: var(--hraness-marketing-ink);
-  font-family: var(--hraness-marketing-heading-font);
-  font-weight: var(--hraness-marketing-heading-weight);
-  letter-spacing: var(--hraness-marketing-h2-tracking, -0.012em);
-  line-height: var(--hraness-marketing-h3-leading, 1.15);
+  font-family: var(--hraness-marketing-text-font);
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.35;
   text-wrap: balance;
-  font-size: var(--hraness-marketing-h3-size, clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem));
+  font-size: 1.125rem;
 }
 
 .hraness-marketing-related__group-summary {
   margin: 0;
   color: var(--hraness-marketing-muted);
   font-family: var(--hraness-marketing-text-font);
-  font-size: 1.125rem;
+  font-size: 1rem;
   line-height: 1.5;
 }
 
-/* A related product is one linked row, as on the hraness.com project index:
- * its mark, its name, and its one-line description. Names and descriptions
- * stay in the text face at reading sizes. */
+.hraness-marketing-related__list {
+  --hraness-marketing-grid-columns: initial;
+  --_hraness-marketing-grid-track: max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 0.5rem) / var(--hraness-marketing-grid-columns)));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 100%)), 1fr));
+  display: grid;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  min-inline-size: 0;
+}
+
+.hraness-marketing-related__item {
+  margin: 0;
+  min-inline-size: 0;
+}
+
 .hraness-marketing-related__card {
   display: flex;
   flex-direction: row;
-  align-items: center;
+  align-items: flex-start;
   position: relative;
-  isolation: isolate;
   min-inline-size: 0;
-  min-block-size: 100%;
-  align-self: stretch;
-  gap: 1rem;
-  padding: clamp(1rem, 2vw, 1.25rem) clamp(1.125rem, 2.5vw, 1.5rem);
-  border: var(--hraness-marketing-surface-rule);
-  border-radius: var(--hraness-marketing-frame-radius);
-  background: var(--hraness-marketing-surface);
-  color: inherit;
+  min-block-size: 2.75rem;
+  gap: 0.85rem;
+  padding: 0.55rem 0.5rem;
+  margin-inline: 0;
+  border: 0;
+  border-radius: 0.375rem;
+  background-color: transparent;
+  color: var(--hraness-marketing-ink);
   text-decoration: none;
-  box-shadow: var(--hraness-marketing-surface-shadow);
+  box-shadow: none;
 }
 
 .hraness-marketing-related__card:hover {
-  box-shadow: 0 0 0 1px var(--hraness-marketing-line-strong);
+  background-color: color-mix(in srgb, var(--hraness-marketing-related-tone, var(--hraness-marketing-ink)) 6%, transparent);
 }
 
 .hraness-marketing-related__card:focus-visible {
-  outline: 2px solid var(--hraness-marketing-accent);
-  outline-offset: 2px;
+  outline: 2px solid var(--hraness-marketing-ink);
+  outline-offset: -2px;
 }
 
 .hraness-marketing-related__card-mark {
+  --hraness-foil-text-base: var(--hraness-marketing-related-tone, var(--hraness-marketing-ink));
+  color: var(--hraness-marketing-related-tone, var(--hraness-marketing-ink));
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
   display: inline-flex;
-  flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  inline-size: 2.75rem;
-  block-size: 2.75rem;
+  inline-size: 1.75rem;
+  block-size: 1.75rem;
+  margin-block-start: 0.1rem;
 }
 
 .hraness-marketing-related__card-text {
   display: grid;
-  gap: 0.25rem;
+  gap: 0.05rem;
   min-inline-size: 0;
 }
 
+.hraness-marketing-related__card-heading {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  column-gap: 0.6rem;
+}
+
 .hraness-marketing-related__card-name {
   margin: 0;
   color: var(--hraness-marketing-ink);
   font-family: var(--hraness-marketing-text-font);
-  font-size: 1.25rem;
-  font-weight: 700;
+  font-size: 1.0625rem;
+  font-weight: 600;
   letter-spacing: -0.01em;
-  line-height: 1.25;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  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.2em;
+}
+
+.hraness-marketing-related__card-domain {
+  color: var(--hraness-marketing-muted);
+  font-family: var(--hraness-marketing-text-font);
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.5;
   overflow-wrap: anywhere;
 }
 
 .hraness-marketing-related__card-role {
   margin: 0;
-  color: var(--hraness-marketing-ink);
+  color: var(--hraness-marketing-muted);
   font-family: var(--hraness-marketing-text-font);
-  font-size: 1.0625rem;
+  font-size: 0.9375rem;
   line-height: 1.45;
+  overflow-wrap: anywhere;
   text-wrap: pretty;
 }
 
+.hraness-marketing-related__group[data-tone="rose"] {
+  --hraness-marketing-related-tone: var(--hraness-studio-rose);
+}
+
+.hraness-marketing-related__group[data-tone="indigo"] {
+  --hraness-marketing-related-tone: var(--hraness-studio-indigo);
+}
+
+.hraness-marketing-related__group[data-tone="amber"] {
+  --hraness-marketing-related-tone: var(--hraness-studio-amber);
+}
+
+.hraness-marketing-related__group[data-tone="emerald"] {
+  --hraness-marketing-related-tone: var(--hraness-studio-emerald);
+}
+
+@media (forced-colors: active) {
+  .hraness-marketing-related__group[data-tone] { --hraness-marketing-related-tone: CanvasText; }
+}
+
 /* Primitives: numbered building blocks */
 
 .hraness-marketing-primitives {
@@ -1720,7 +1816,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 }
 
 .hraness-marketing-quote figcaption a:hover {
-  text-decoration: underline;
+  text-decoration-line: underline;
 }
 
 /* Pricing */
@@ -2126,7 +2222,6 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   .hraness-marketing-trust-item,
   .hraness-marketing-card,
   .hraness-marketing-card__art,
-  .hraness-marketing-related__card,
   .hraness-marketing-quote,
   .hraness-marketing-plan {
     border: 1px solid CanvasText;

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

@@ -512,10 +512,10 @@ export type ComparisonRow = Readonly<{
 
 const COMPARISON_TEXT = { yes: "Yes", no: "No", partial: "Partly" } as const;
 
-function ComparisonGlyph({ kind }: Readonly<{ kind: "yes" | "no" | "partial" }>) {
+export function ComparisonGlyph({ kind, className }: Readonly<{ kind: "yes" | "no" | "partial"; className?: string }>) {
   const path = kind === "yes" ? "M3.5 8.5l3 3 6-7" : kind === "no" ? "M4.5 4.5l7 7m0-7l-7 7" : "M4 8h8";
   return (
-    <svg aria-hidden="true" className="plain-publication__comparison-glyph" focusable="false" height="16" viewBox="0 0 16 16" width="16">
+    <svg aria-hidden="true" className={joinClasses("plain-publication__comparison-glyph", className)} focusable="false" height="16" viewBox="0 0 16 16" width="16">
       <path d={path} fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.75" />
     </svg>
   );

package/src/react/design-gallery.tsx

@@ -1,5 +1,8 @@
 "use client";
 
+import { MarketingAccount, MarketingAccountActions } from "./marketing-account.js";
+import { MarketingComparison } from "./marketing-comparison.js";
+import { MarketingDiagram, DiagramArrowhead } from "./marketing-diagram.js";
 import {
   Badge,
   Button,
@@ -343,6 +346,7 @@ export function DesignSystemGallery({
           />
           <MarketingPillars
             ariaLabel="Relay in three points"
+            presentation="benefits"
             columns={3}
             pillars={[
               { label: "No hosted service", summary: "Jobs run on your machine and never wait on a server." },
@@ -397,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" },
@@ -523,41 +528,64 @@ export function DesignSystemGallery({
             columns={2}
             groups={[
               {
-                heading: "Sibling tools",
+                heading: "Relationships",
+                tone: "rose",
                 headingId: "design-gallery-related-tools",
                 items: [
                   {
                     href: "#gallery-install",
                     name: "Ledger",
+                    domain: "ledger.example",
                     role: "Long-term storage for run logs",
                   },
                   {
                     href: "#marketing",
                     name: "Index",
+                    domain: "index.example",
                     role: "A local search index",
                   },
                 ],
               },
               {
                 columns: 1,
-                heading: "Shared infrastructure",
+                heading: "Knowledge",
+                tone: "indigo",
                 headingId: "design-gallery-related-infra",
                 items: [
                   {
                     href: "#marketing",
                     name: "Relay",
+                    domain: "relay.example",
                     role: "The shared job runner",
                   },
                 ],
-                summary: "The runner the other tools depend on.",
               },
             ]}
-            heading="Related tools."
+            heading="Other tools from our studio"
             headingId="design-gallery-related-title"
             headingLevel={3}
-            label="Related"
-            summary="Each is a separate release. Its card says how it works with Relay."
           />
+          <MarketingDiagram width={720} height={216} label="Your sources stay on your device; your chosen agent reads the local workspace.">
+            <defs><DiagramArrowhead id="gallery-diagram-arrow" /></defs>
+            <rect className="hraness-diagram__node" x={24} y={40} width={276} height={136} rx={12} />
+            <rect className="hraness-diagram__node" x={420} y={40} width={276} height={136} rx={12} />
+            <path className="hraness-diagram__icon" d="M48 66h18v14H48z M53 84h8 M57 80v4" />
+            <text className="hraness-diagram__label" x={48} y={116}>Your sources</text>
+            <text className="hraness-diagram__detail" x={48} y={143}>Stored on your device</text>
+            <path className="hraness-diagram__connector" d="M320 108H400" markerEnd="url(#gallery-diagram-arrow)" />
+            <path className="hraness-diagram__icon" d="M444 73h18 M453 64v18 M447 67l12 12 M459 67l-12 12" />
+            <text className="hraness-diagram__label" x={444} y={116}>Your chosen agent</text>
+            <text className="hraness-diagram__detail" x={444} y={143}>Reads the local workspace</text>
+          </MarketingDiagram>
+          <MarketingComparison caption="Choose where your work lives" options={[{ name: "Relay" }, { name: "Hosted workspace" }]} highlight={0} rows={[
+            { label: "Works offline", values: [true, false] },
+            { label: "Bring your model", values: [true, { status: "optional", label: "On some plans" }] },
+            { label: "Local storage", values: [true, { status: "depends", detail: "Check the provider's export format." }] },
+            { label: "Cost", values: ["Free locally", "Subscription"] },
+          ]} note="An illustrative comparison. Product pages supply current facts and sources." />
+          <MarketingAccount id="gallery-account" summary="Keep your preferences and shared work together.">
+            <MarketingAccountActions primary={{ href: "#gallery-account", label: "Create account" }} signIn={{ href: "#gallery-account" }} />
+          </MarketingAccount>
           <MarketingMaker
             heading="Who builds Relay"
             headingId="design-gallery-maker-title"

package/src/react/index.ts

@@ -26,6 +26,8 @@ export * from "./procedural-recipe.js";
 export * from "./relative-time.js";
 export * from "./production-data-preview-notice.js";
 export * from "./product-marketing.js";
+export * from "./marketing-account.js";
+export * from "./marketing-comparison.js";
 export * from "./route-state.js";
 export * from "./sticky-offset.js";
 export * from "./surfaces.js";
@@ -37,3 +39,4 @@ export * from "./launch-beats.js";
 export * from "./social-kit-panel.js";
 export * from "./platform-icons.js";
 export * from "./platform-install.js";
+export * from "./marketing-diagram.js";