@tokenoftrust/storefront-runner 2.2.126 → 2.3.0

package/apps/storefront/src/pages/style-guide/[tenant]/chrome/[theme].astro

@@ -30,6 +30,7 @@ const cspNonce = Astro.locals.cspNonce;
 const favicon = Astro.locals.tenant.theme_tokens.brand?.favicon ?? "/favicon.svg";
 
 import { loadStyleGuideThemes } from "@/lib/styleGuideThemes";
+import { derivedTokenDeclarations } from "@/themes/derivedTokens";
 
 const t = (await loadStyleGuideThemes(
   tenant ?? "",
@@ -62,9 +63,10 @@ const componentVars: Record<string, string> = {
   ...REFERENCE_COMPONENT_VARS,
   ...((t.preview?.componentVars ?? {}) as Record<string, string>),
 };
-const componentVarsInline = Object.entries(componentVars)
-  .map(([k, v]) => `${k}:${v}`)
-  .join(";");
+const componentVarsInline = [
+  ...Object.entries(componentVars).map(([k, v]) => `${k}:${v}`),
+  ...derivedTokenDeclarations(componentVars),
+].join(";");
 ---
 
 <!doctype html>
@@ -88,34 +90,36 @@ const componentVarsInline = Object.entries(componentVars)
       .sg-bar { position: sticky; top: 0; z-index: 500; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #0f1729; color: #e6edf6; padding: 12px 20px; font: 600 .95rem -apple-system, sans-serif; }
       .sg-bar .flag { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; background: #f59e0b; color: #221600; font-weight: 800; padding: 4px 8px; border-radius: 5px; }
       .sg-bar .role { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; background: #0e9f8e; color: #00201b; font-weight: 800; padding: 4px 8px; border-radius: 999px; }
-      .sg-bar a { color: #bfe0ff; }
+      .sg-bar a { color: #bfe0ff; display: inline-flex; align-items: center; min-height: 44px; }
       .sg-bar a.right { margin-left: auto; }
       .sg-page { background: var(--color-bg); color: var(--color-text); min-height: 100vh; padding-bottom: 40px; }
-      .sg-lbl { max-width: var(--container-max, 1240px); margin: 26px auto 6px; padding: 0 20px; font: 800 .78rem/1.3 -apple-system, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); }
+      .sg-lbl { max-width: var(--container-max, 1240px); margin: 26px auto 6px; padding: 0 20px; font: 800 max(.875rem, 14px)/1.3 -apple-system, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); }
       .sg-frame { max-width: var(--container-max, 1240px); margin: 0 auto 6px; padding: 0 20px; }
       .sg-frame > * { border: 1px dashed var(--color-border); border-radius: 8px; }
+      /* Live pages carry a border-box reset (global.css or the theme sheet); the frames match it. */
+      .sg-frame, .sg-frame * { box-sizing: border-box; }
       /* Show the demoed mega panel + age gate open, in normal flow, for review. */
       .sg-open .mega { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: var(--shadow-md); margin-top: 6px; }
       .sg-agegate-frame .age-gate { position: static; display: flex; inset: auto; background: color-mix(in srgb, var(--color-text) 10%, transparent); border-radius: 8px; }
-      .sg-note { max-width: var(--container-max, 1240px); margin: 8px auto 0; padding: 16px 20px 0; border-top: 1px solid var(--color-border); font-size: .82rem; color: var(--color-muted); }
+      .sg-note { max-width: var(--container-max, 1240px); margin: 8px auto 0; padding: 16px 20px 0; border-top: 1px solid var(--color-border); font-size: max(.875rem, 14px); color: var(--color-muted); }
     </style>
   </head>
   <body>
-    <!-- A toolbar, not page content — a real <header> here would duplicate
+    <!-- A labelled nav, not a <header>: a real <header> here would duplicate
          the demoed .site-header's own banner landmark (axe
          landmark-no-duplicate-banner/landmark-unique). -->
-    <div class="sg-bar">
+    <nav class="sg-bar" aria-label="Style guide toolbar">
       <span class="flag">Preview · shared chrome · noindex</span>
       <span class="role">{t.role}</span>
       <b>{t.name}</b>
       <a class="right" href={`/_style-guide/${tenant}/guide/${t.id}/`}>widget library guide →</a>
       <a href={`/_style-guide/${tenant}/${t.id}/`}>← component guide</a>
-    </div>
+    </nav>
 
     <main class="sg-page" style={componentVarsInline}>
       <h1 class="sg-lbl">Shared chrome preview — {t.name}</h1>
       <p class="sg-lbl">Announcement + top utility bar</p>
-      <div class="sg-frame">
+      <div class="sg-frame" data-tot-platform-sample>
         <div>
           <div class="topbar-warning"><div class="container"><p>WARNING: This product contains nicotine. Nicotine is an addictive chemical.</p></div></div>
           <div class="announce"><div class="container">Free US shipping on orders over $100</div></div>
@@ -129,7 +133,7 @@ const componentVarsInline = Object.entries(componentVars)
       </div>
 
       <p class="sg-lbl">Header — brand · search · actions · primary nav + mega panel</p>
-      <div class="sg-frame">
+      <div class="sg-frame" data-tot-platform-sample>
         <header class="site-header sg-open">
           <div class="container header-row">
             <a class="brand" href="#"><span class="b-prime">Prime</span><span class="b-vapor">Vapor</span><span class="b-club">Club</span></a>
@@ -161,7 +165,7 @@ const componentVarsInline = Object.entries(componentVars)
       </div>
 
       <p class="sg-lbl">Brand tiles + category cards</p>
-      <div class="sg-frame">
+      <div class="sg-frame" data-tot-platform-sample>
         <section class="section container">
           <div class="sec-head"><span class="eyebrow">Shop by</span><h2>Top brands</h2></div>
           <div class="tile-grid">
@@ -179,12 +183,12 @@ const componentVarsInline = Object.entries(componentVars)
       </div>
 
       <p class="sg-lbl">Compliance strip</p>
-      <div class="sg-frame">
+      <div class="sg-frame" data-tot-platform-sample>
         <div class="compliance-strip"><div class="container"><p>Must be 21+ to purchase. Products intended for adults of legal smoking age only.</p></div></div>
       </div>
 
       <p class="sg-lbl">Age gate (21+ interstitial) — shown open for review</p>
-      <div class="sg-frame sg-agegate-frame">
+      <div class="sg-frame sg-agegate-frame" data-tot-platform-sample>
         <div class="age-gate is-open">
           <div class="age-gate__panel">
             <p class="age-gate__mark"><span class="is-red">Prime</span>VaporClub</p>
@@ -200,7 +204,7 @@ const componentVarsInline = Object.entries(componentVars)
       </div>
 
       <p class="sg-lbl">Footer — columns · newsletter · payments · trust marks</p>
-      <div class="sg-frame">
+      <div class="sg-frame" data-tot-platform-sample>
         <footer class="site-footer">
           <div class="container">
             <div class="footer-grid">

package/apps/storefront/src/pages/style-guide/[tenant]/guide/[theme].astro

@@ -21,6 +21,7 @@ import "@/styles/global.css";
 import type { MarkdownInstance } from "astro";
 import StyleGuideNav from "@/components/style-guide/StyleGuideNav.astro";
 import { loadStyleGuideThemes } from "@/lib/styleGuideThemes";
+import { derivedTokenDeclarations } from "@/themes/derivedTokens";
 
 const { tenant, theme } = Astro.params;
 const cspNonce = Astro.locals.cspNonce;
@@ -53,7 +54,7 @@ const REFERENCE_COMPONENT_VARS: Record<string, string> = {
   "--color-bg": "#f4f1ea", "--color-surface": "#fcfaf5", "--color-surface-2": "#ece7db",
   "--color-text": "#1c2624", "--color-muted": "#5c6663",
   "--color-primary": "#1f3a34", "--color-primary-contrast": "#f4f1ea",
-  "--color-accent": "#b5612f", "--color-accent-ink": "#8a481f", "--color-border": "#dcd6c9",
+  "--color-accent": "#b5612f", "--color-border": "#dcd6c9",
   "--color-success": "#3f6b4f", "--color-sale": "#9e3b2e",
   "--radius-sm": "3px", "--radius-md": "6px", "--radius-lg": "12px", "--radius-full": "999px",
   "--shadow-sm": "0 1px 2px rgba(28,38,36,.06)", "--shadow-md": "0 6px 24px -8px rgba(28,38,36,.14)",
@@ -63,9 +64,10 @@ const componentVars: Record<string, string> = {
   ...REFERENCE_COMPONENT_VARS,
   ...((t.preview?.componentVars ?? {}) as Record<string, string>),
 };
-const componentVarsInline = Object.entries(componentVars)
-  .map(([k, v]) => `${k}:${v}`)
-  .join(";");
+const componentVarsInline = [
+  ...Object.entries(componentVars).map(([k, v]) => `${k}:${v}`),
+  ...derivedTokenDeclarations(componentVars),
+].join(";");
 ---
 
 <!doctype html>
@@ -91,35 +93,29 @@ const componentVarsInline = Object.entries(componentVars)
       .sg-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; }
       .sg-side { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; background: #0f1729; color: #e6edf6; padding: 22px 14px 40px; }
 
-      /* Left-nav (StyleGuideNav markup) — styled here so the component stays CSP-clean. */
-      .sg-nav__eyebrow { font: 800 .72rem/1.2 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7fe3d4; margin: 0 0 12px; padding: 0 10px; }
-      .sg-nav__list { list-style: none; margin: 0; padding: 0; }
-      .sg-nav__list li { margin: 0; }
-      .sg-nav__link { display: block; padding: 9px 10px; border-radius: 8px; color: #bfe0ff; text-decoration: none; font-size: .92rem; min-height: 40px; }
-      .sg-nav__link:hover { background: #16223c; }
-      .sg-nav__link.is-active { background: #16223c; color: #fff; font-weight: 700; }
-      .sg-nav__link--sub { padding-left: 20px; font-size: .88rem; }
-      .sg-nav__toc { list-style: none; margin: 2px 0 8px; padding: 0; border-left: 1px solid #26365a; margin-left: 16px; }
-      .sg-nav__toc-link { display: block; padding: 5px 10px 5px 14px; color: #9fb0c8; font-size: .82rem; text-decoration: none; line-height: 1.3; }
-      .sg-nav__toc-link:hover { color: #e6edf6; }
 
       /* Themed prose column. .rte styles come from global.css; token vars are
-         supplied by componentVarsInline on this wrapper so they always resolve. */
+         supplied by componentVarsInline on this wrapper so they always resolve.
+         The markdown <Content /> renders outside this page's style scope, so
+         every rule reaching into it is :global(). */
       .sg-content { background: var(--color-bg); color: var(--color-text); min-height: 100vh; padding: 34px clamp(20px, 4vw, 56px) 96px; }
       .sg-content .rte { max-width: 900px; }
-      .sg-content h1 { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; margin: 0 0 10px; color: var(--color-text); }
-      .sg-content .rte h2 { border-top: 1px solid var(--color-border); padding-top: 1.4em; scroll-margin-top: 68px; }
-      .sg-content .rte h3 { scroll-margin-top: 68px; }
-      .sg-content blockquote { border-left: 3px solid var(--color-accent); margin: 1em 0; padding: 2px 0 2px 16px; color: var(--color-muted); }
-      .sg-content pre { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .84rem; line-height: 1.5; }
-      .sg-content pre code { background: none; padding: 0; }
-      .sg-content code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .88em; }
-      .sg-content :not(pre) > code { background: var(--color-surface-2); padding: 1px 5px; border-radius: 4px; }
-      .sg-content table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
-      .sg-content th, .sg-content td { border: 1px solid var(--color-border); padding: 6px 10px; text-align: left; font-size: .9rem; }
+      .sg-content :global(h1) { font-size: clamp(1.9rem, 4vw, 2.7rem); line-height: 1.1; margin: 0 0 10px; color: var(--color-text); }
+      .sg-content .rte :global(h2) { border-top: 1px solid var(--color-border); padding-top: 1.4em; scroll-margin-top: 68px; }
+      .sg-content .rte :global(h3) { scroll-margin-top: 68px; }
+      .sg-content :global(blockquote) { border-left: 3px solid var(--color-accent); margin: 1em 0; padding: 2px 0 2px 16px; color: var(--color-muted); }
+      .sg-content :global(pre) { background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; overflow-x: auto; font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .84rem; line-height: 1.5; }
+      .sg-content :global(pre code) { background: none; padding: 0; }
+      /* The highlighter's github-dark comment gray (#6a737d) is 3:1 on its own
+         #24292e ground; lift it to AA. Its color is an inline style, hence !important. */
+      .sg-content :global(.astro-code span[style*="#6A737D" i]) { color: #9ea7b3 !important; }
+      .sg-content :global(code) { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: .88em; }
+      .sg-content :global(:not(pre) > code) { background: var(--color-surface-2); padding: 1px 5px; border-radius: 4px; }
+      .sg-content :global(table) { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; }
+      .sg-content :global(th), .sg-content :global(td) { border: 1px solid var(--color-border); padding: 6px 10px; text-align: left; font-size: .9rem; }
 
       @media (max-width: 900px) {
-        .sg-shell { grid-template-columns: 1fr; }
+        .sg-shell { grid-template-columns: minmax(0, 1fr); }
         .sg-side { position: static; max-height: none; }
       }
     </style>

package/apps/storefront/src/pages/style-guide/[tenant]/index.astro

@@ -53,15 +53,6 @@ const navTheme = themes[0]?.id;
       body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: #0f1729; color: #e6edf6; line-height: 1.55; }
       .sg-shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); align-items: start; }
       .sg-side { position: sticky; top: 0; align-self: start; max-height: 100vh; overflow-y: auto; padding: 22px 14px 40px; border-right: 1px solid #1c2a44; }
-      .sg-nav__eyebrow { font: 800 .72rem/1.2 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7fe3d4; margin: 0 0 12px; padding: 0 10px; }
-      .sg-nav__list { list-style: none; margin: 0; padding: 0; }
-      .sg-nav__list li { margin: 0; }
-      .sg-nav__link { display: block; padding: 9px 10px; border-radius: 8px; color: #bfe0ff; text-decoration: none; font-size: .92rem; min-height: 40px; }
-      .sg-nav__link:hover { background: #16223c; }
-      .sg-nav__link.is-active { background: #16223c; color: #fff; font-weight: 700; }
-      .sg-nav__link--sub { padding-left: 20px; font-size: .88rem; }
-      .sg-nav__toc { list-style: none; margin: 2px 0 8px; padding: 0; }
-      .sg-nav__toc-link { display: block; padding: 4px 10px 4px 26px; color: #9fb0c8; font-size: .82rem; text-decoration: none; }
       .wrap { max-width: 860px; margin: 0 auto; padding: 40px 24px 80px; }
       .flag { display: inline-block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; background: #f59e0b; color: #221600; font-weight: 800; padding: 4px 10px; border-radius: 6px; }
       h1 { font-size: 1.9rem; margin: 18px 0 6px; }
@@ -75,12 +66,14 @@ const navTheme = themes[0]?.id;
       .badge.legacy { background: #47536e; color: #dfe6f2; }
       .status { margin-left: auto; font-size: .78rem; color: #9fb0c8; font-family: ui-monospace, Menlo, monospace; }
       .name { font-weight: 700; font-size: 1.05rem; }
-      .desc { color: #9fb0c8; font-size: .9rem; margin-top: 8px; }
+      .desc { color: #9fb0c8; font-size: max(.9rem, 14px); margin-top: 8px; }
       .sub-links { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 16px 4px; }
-      .sub-links a { color: #bfe0ff; font-size: .82rem; text-decoration: none; display: inline-flex; align-items: center; min-height: 32px; }
+      .sub-links a { color: #bfe0ff; font-size: max(.875rem, 14px); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
       .sub-links a:hover { text-decoration: underline; }
-      .note { margin-top: 28px; font-size: .82rem; color: #7f8fab; border-top: 1px solid #24324f; padding-top: 16px; }
-      @media (max-width: 900px) { .sg-shell { grid-template-columns: 1fr; } .sg-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid #1c2a44; } }
+      .back { margin: 14px 0 0; }
+      .back a { color: #bfe0ff; font-size: max(.875rem, 14px); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
+      .note { margin-top: 28px; font-size: max(.875rem, 14px); color: #7f8fab; border-top: 1px solid #24324f; padding-top: 16px; }
+      @media (max-width: 900px) { .sg-shell { grid-template-columns: minmax(0, 1fr); } .sg-side { position: static; max-height: none; border-right: 0; border-bottom: 1px solid #1c2a44; } }
     </style>
   </head>
   <body>
@@ -90,7 +83,7 @@ const navTheme = themes[0]?.id;
       </aside>
       <main class="wrap">
         <span class="flag">Preview · dev only · noindex</span>
-        <p style="margin:14px 0 0"><a href="/_style-guide/" style="color:#bfe0ff;font-size:.85rem;text-decoration:none">← all clients</a></p>
+        <p class="back"><a href="/_style-guide/">← all clients</a></p>
         <h1>{tenant} — theme style guides</h1>
         <p class="sub">Open any guide independently to compare looks side-by-side. Nothing here reskins the live site. The <b>Widget Library Guide</b> (left nav) documents every shared component.</p>
 

package/apps/storefront/src/pages/style-guide/index.astro

@@ -70,7 +70,8 @@ const tenants = [...byTenant.entries()]
       .sub { color: #9fb0c8; margin: 0 0 32px; }
       .tenant { margin-bottom: 30px; }
       .tenant > h2 { font-size: 1.05rem; margin: 0 0 12px; display: flex; align-items: baseline; gap: 10px; }
-      .tenant > h2 a { color: #bfe0ff; font-size: .82rem; font-weight: 600; text-decoration: none; }
+      .tenant > h2 a { color: #bfe0ff; font-size: max(.875rem, 14px); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
+      .sub a { color: #bfe0ff; display: inline-flex; align-items: center; min-height: 44px; }
       .card { display: block; text-decoration: none; color: inherit; background: #16223c; border: 1px solid #24324f; border-radius: 14px; padding: 16px 20px; margin-bottom: 12px; transition: border-color .15s, transform .15s; }
       .card:hover { border-color: #3f5680; transform: translateY(-2px); }
       .row { display: flex; align-items: center; gap: 12px; }
@@ -80,12 +81,12 @@ const tenants = [...byTenant.entries()]
       .badge.legacy { background: #47536e; color: #dfe6f2; }
       .status { margin-left: auto; font-size: .78rem; color: #9fb0c8; font-family: ui-monospace, Menlo, monospace; }
       .name { font-weight: 700; font-size: 1.02rem; }
-      .desc { color: #9fb0c8; font-size: .88rem; margin-top: 6px; }
-      .note { margin-top: 28px; font-size: .82rem; color: #7f8fab; border-top: 1px solid #24324f; padding-top: 16px; }
+      .desc { color: #9fb0c8; font-size: max(.88rem, 14px); margin-top: 6px; }
+      .note { margin-top: 28px; font-size: max(.875rem, 14px); color: #7f8fab; border-top: 1px solid #24324f; padding-top: 16px; }
     </style>
   </head>
   <body>
-    <div class="wrap">
+    <main class="wrap">
       <span class="flag">Preview · dev only · noindex</span>
       <h1>Client style guides</h1>
       <p class="sub">Every client tenant and its theme guides. Open a guide to preview the standard components and page sections re-skinned under that theme. Nothing here re-skins a live site.</p>
@@ -117,6 +118,6 @@ const tenants = [...byTenant.entries()]
         These are preview/dev review surfaces — excluded from the sitemap and production marketing
         publishing. Approve a tenant's <b>current</b> guide before propagating its style concept across the site.
       </p>
-    </div>
+    </main>
   </body>
 </html>

package/apps/storefront/src/pages/tenants/[id]/[...path].ts

@@ -16,17 +16,26 @@
  *
  * Preview sessions also consult the image-capture rewrite overlay so rewritten
  * `public/*.css` (and similar text assets) serve `/_a/<sha>` references.
+ *
+ * Version selection, in order: a candidate/revision pin (`tot_preview_version` +
+ * token cookie); else, for a shared-preview viewer (preview host, or a valid token
+ * for this tenant), the version the content `preview` channel serves — what the
+ * preview document itself rendered; else the request's channel pointer.
  */
 import type { APIContext } from "astro";
 import {
   assetContentType,
   parseTenantAssetPath,
+  resolveChannelVersion,
   serveTenantAsset,
   type R2BucketLike,
 } from "@tot/public-runtime";
 import { readWithImagePreviewRewriteOverlay } from "@tot/public-runtime/image-preview-rewrite-overlay";
 import { readR2, readKv, readEnv } from "@/lib/env";
-import { resolvePreviewVersionFromCookies } from "@/lib/assets/preview-version-cookie";
+import {
+  resolvePreviewVersionFromCookies,
+  resolveSharedPreviewAssetVersion,
+} from "@/lib/assets/preview-version-cookie";
 
 export const prerender = false;
 
@@ -73,14 +82,30 @@ export async function GET(context: APIContext): Promise<Response> {
   }
 
   const urlTenant = context.params.id ?? "";
-  const previewVersionId = await resolvePreviewVersionFromCookies({
+  const url = new URL(context.request.url);
+  const secret = await readEnv("CUSTOMIZATION_PREVIEW_SECRET");
+  const tokenCookie = context.cookies.get("tot_preview")?.value;
+  const pinnedVersionId = await resolvePreviewVersionFromCookies({
     tenantId: urlTenant,
     previewVersionCookie: context.cookies.get("tot_preview_version")?.value,
-    previewTokenCookie: context.cookies.get("tot_preview")?.value,
-    secret: await readEnv("CUSTOMIZATION_PREVIEW_SECRET"),
+    previewTokenCookie: tokenCookie,
+    secret,
   });
+  // No candidate/revision pin: a shared-preview viewer reads the version the
+  // preview channel serves — the same version its document rendered.
+  const sharedPreview = pinnedVersionId
+    ? { preview: false, versionId: null }
+    : await resolveSharedPreviewAssetVersion({
+        tenantId: urlTenant,
+        previewHost: url.hostname.toLowerCase().startsWith("preview."),
+        previewToken: url.searchParams.get("__preview") ?? tokenCookie,
+        secret,
+        readPreviewChannelVersion: () =>
+          resolveChannelVersion((key) => kv.get(key), urlTenant, "preview"),
+      });
+  const previewVersionId = pinnedVersionId ?? sharedPreview.versionId;
 
-  const pathname = new URL(context.request.url).pathname;
+  const pathname = url.pathname;
   if (previewVersionId) {
     const overlay = await tryServePreviewRewriteOverlay({
       kvGet: (key) => kv.get(key),
@@ -96,7 +121,7 @@ export async function GET(context: APIContext): Promise<Response> {
       // Runtime binding structurally satisfies the shared-runtime R2 seam.
       bucket: bucket as unknown as R2BucketLike,
       kvGet: (key) => kv.get(key),
-      channel: context.locals.customizationEnv ?? "live",
+      channel: sharedPreview.preview ? "test" : (context.locals.customizationEnv ?? "live"),
       ...(previewVersionId ? { versionId: previewVersionId } : {}),
       ifNoneMatch: context.request.headers.get("if-none-match"),
     },
@@ -107,7 +132,7 @@ export async function GET(context: APIContext): Promise<Response> {
   // (that would poison the public asset with candidate bytes, and Vary doesn't cover
   // the auth cookie). Force no-store for the preview-version path; the normal
   // channel-served asset keeps its revalidating cache header.
-  if (res && previewVersionId) {
+  if (res && (previewVersionId || sharedPreview.preview)) {
     res.headers.set("cache-control", "no-store");
     res.headers.set("x-robots-tag", "noindex, nofollow");
   }

package/apps/storefront/src/pages/the-build/[slug].astro

@@ -5,8 +5,12 @@
 // visibility chokepoint); unlisted posts resolve here but carry noindex and
 // stay out of the index/sitemap/RSS (see collection.ts isVisibleOnLive).
 import Layout from "@/layouts/Layout.astro";
+import Breadcrumbs from "@/components/Breadcrumbs.astro";
 import ReactionBar from "@/components/blog/ReactionBar.astro";
-import { getBuildPost, resolveBuildRedirect, THE_BUILD } from "@/lib/the-build/provider.js";
+import ShareRow from "@/components/blog/ShareRow.astro";
+import { getBuildPost, getTheBuildSettings, resolveBuildRedirect, THE_BUILD } from "@/lib/the-build/provider.js";
+import { bylineAuthor, resolveBlogPresentation, shareLinks } from "@/lib/blog/presentation.js";
+import { homeCrumbLabel, siteTrail } from "@/lib/breadcrumbs.js";
 import { getTranslations } from "@/lib/blog/collection.js";
 import { buildAlternates } from "@/lib/seo/alternates.js";
 import { breadcrumbLd } from "@/lib/jsonld.js";
@@ -27,6 +31,9 @@ if (!post) {
 }
 
 const canonical = new URL(`/the-build/${post.slug}/`, canonicalBase + "/").toString();
+const presentation = resolveBlogPresentation(await getTheBuildSettings(tenant.tenant_id, content));
+// A post that names no author has no byline and no structured-data author.
+const author = bylineAuthor(post.author);
 const articleLd = {
   "@context": "https://schema.org",
   "@type": "BlogPosting",
@@ -36,15 +43,21 @@ const articleLd = {
   mainEntityOfPage: canonical,
   datePublished: post.publishedAt,
   dateModified: post.modifiedAt,
-  author: { "@type": "Person", name: post.author },
+  ...(author ? { author: { "@type": "Person", name: author } } : {}),
   publisher: { "@type": "Organization", name: tenant.displayName, url: canonicalBase },
   ...(post.featuredImage ? { image: new URL(post.featuredImage.src, canonicalBase + "/").toString() } : {}),
 };
-const crumbs = breadcrumbLd([
-  { label: tenant.displayName, href: "/" },
+const trail = siteTrail(
+  homeCrumbLabel(await content.getChrome()),
   { label: "The Build", href: "/the-build/" },
   { label: post.title, href: `/the-build/${post.slug}/` },
-], canonicalBase);
+);
+const crumbs = breadcrumbLd(trail, canonicalBase);
+const share = shareLinks(presentation.share, {
+  url: canonical,
+  title: post.title,
+  image: post.featuredImage ? new URL(post.featuredImage.src, canonicalBase + "/").toString() : undefined,
+});
 const buildHref = `${basePath}/the-build/`;
 
 // I2 — hreflang alternates + per-variant <html lang>. `getTranslations` returns
@@ -73,14 +86,14 @@ const lang = alternates.length ? (post.inLanguage ?? "en") : undefined;
   lang={lang}
 >
   <article class="article-shell">
-    <nav class="breadcrumbs" aria-label="Breadcrumb"><a href={buildHref}>The Build</a><span aria-hidden="true">/</span><span>{post.categories[0] ?? "Article"}</span></nav>
+    <Breadcrumbs crumbs={trail} class="breadcrumbs" />
     <header>
-      {post.tags[0] && <p class="eyebrow eyebrow--tick">{post.tags[0]}</p>}
+      {presentation.postEyebrow && post.tags[0] && <p class="eyebrow eyebrow--tick">{post.tags[0]}</p>}
       <h1>{post.title}</h1>
-      <p class="dek">{post.excerpt}</p>
+      {presentation.dek && post.excerpt && <p class="dek">{post.excerpt}</p>}
       <div class="byline">
-        <span>By {post.author}</span>
-        <span aria-hidden="true">·</span>
+        {author && <span>By {author}</span>}
+        {author && <span aria-hidden="true">·</span>}
         <time datetime={post.publishedAt}>{new Date(post.publishedAt).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" })}</time>
       </div>
     </header>
@@ -95,21 +108,29 @@ const lang = alternates.length ? (post.inLanguage ?? "en") : undefined;
         decoding="async"
       />
     )}
-    <div class="article-grid">
-      <aside>
-        <a href={buildHref}>← All articles</a>
-        {post.tags.length > 0 && <div class="article-tags">{post.tags.map((tag) => <span>{tag}</span>)}</div>}
-      </aside>
-      <div class="blog-body" set:html={post.contentHtml}></div>
+    <div class:list={["article-grid", { "article-grid--single": !presentation.aside }]}>
+      {presentation.aside && (
+        <aside>
+          <a href={buildHref}>← All articles</a>
+          {post.tags.length > 0 && <div class="article-tags">{post.tags.map((tag) => <span>{tag}</span>)}</div>}
+        </aside>
+      )}
+      <div class="blog-main">
+        <div class="blog-body" set:html={post.contentHtml}></div>
+        {!presentation.aside && post.tags.length > 0 && (
+          <ul class="post-tags" aria-label="Tags">{post.tags.map((tag) => <li><span>{tag}</span></li>)}</ul>
+        )}
+        <ShareRow links={share} />
+      </div>
     </div>
-    <ReactionBar collection="the-build" slug={post.slug} />
+    {presentation.reactions && <ReactionBar collection="the-build" slug={post.slug} />}
   </article>
 </Layout>
 
 <style>
   .article-shell { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; padding-block: clamp(2rem, 5vw, 5rem); }
-  .breadcrumbs { display: flex; gap: .55rem; align-items: center; color: var(--color-muted); font-size: .84rem; }
-  .breadcrumbs a { color: var(--color-accent-ink); font-weight: 700; }
+  .article-shell :global(.breadcrumbs) { font-size: .84rem; }
+  .article-shell :global(.breadcrumbs a) { color: var(--color-accent-ink); font-weight: 700; }
   header { max-width: 880px; margin: clamp(2.5rem, 6vw, 5rem) auto clamp(2rem, 5vw, 3.5rem); text-align: center; }
   header .eyebrow { justify-content: center; }
   h1 { margin-top: .9rem; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1.02; }
@@ -120,7 +141,10 @@ const lang = alternates.length ? (post.inLanguage ?? "en") : undefined;
   aside { align-self: start; position: sticky; top: 7rem; }
   aside > a { color: var(--color-accent-ink); font-size: .88rem; font-weight: 700; }
   .article-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.2rem; }
-  .article-tags span { padding: .3rem .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); font-size: .7rem; }
+  .article-tags span, .post-tags span { padding: .3rem .55rem; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-muted); font-size: .7rem; }
+  .article-grid--single { grid-template-columns: minmax(0, 720px); }
+  .blog-main { min-width: 0; }
+  .post-tags { display: flex; flex-wrap: wrap; gap: .45rem; margin: 2rem 0 0; padding: 0; list-style: none; }
   .blog-body { min-width: 0; font-size: 1.05rem; line-height: 1.78; }
   .blog-body :global(p), .blog-body :global(ul), .blog-body :global(ol), .blog-body :global(blockquote), .blog-body :global(figure), .blog-body :global(table), .blog-body :global(pre) { margin-block: 1.25rem; }
   .blog-body :global(h2), .blog-body :global(h3), .blog-body :global(h4) { scroll-margin-top: 7rem; margin: 2.8rem 0 1rem; line-height: 1.18; }

package/apps/storefront/src/pages/the-build/index.astro

@@ -5,6 +5,7 @@
 // with the-build content renders the same way (per-tenant/multi-collection
 // invariant — see docs/plans/2026-08-21-blog-platform-workstream.md §1).
 import TheBuildIndexView from "@/components/the-build/TheBuildIndexView.astro";
+import { resolveBlogPresentation } from "@/lib/blog/presentation.js";
 import { getTheBuildSettings, listBuildPosts } from "@/lib/the-build/provider.js";
 import { paginateBlogPosts } from "@/lib/blog/pagination.js";
 import { resolveTheBuildIndexCopy } from "@/lib/the-build/pagination.js";
@@ -24,6 +25,7 @@ const { posts: pagePosts, totalPages } = paginateBlogPosts(posts, copy.pageSize,
   basePath={basePath}
   canonicalBase={canonicalBase}
   copy={copy}
+  presentation={resolveBlogPresentation(settings)}
   pagePosts={pagePosts}
   page={1}
   totalPages={totalPages}

package/apps/storefront/src/pages/the-build/page/[n].astro

@@ -4,6 +4,7 @@
 // TheBuildIndexView so the tenant-copy + pagination contract can't drift
 // between the two routes (mirrors src/pages/blog/page/[n].astro).
 import TheBuildIndexView from "@/components/the-build/TheBuildIndexView.astro";
+import { resolveBlogPresentation } from "@/lib/blog/presentation.js";
 import { getTheBuildSettings, listBuildPosts } from "@/lib/the-build/provider.js";
 import { paginateBlogPosts } from "@/lib/blog/pagination.js";
 import { parseTheBuildPageParam, resolveTheBuildIndexCopy } from "@/lib/the-build/pagination.js";
@@ -28,6 +29,7 @@ if (!sliced) return new Response(null, { status: 404 });
   basePath={basePath}
   canonicalBase={canonicalBase}
   copy={copy}
+  presentation={resolveBlogPresentation(settings)}
   pagePosts={sliced.posts}
   page={sliced.page}
   totalPages={sliced.totalPages}

package/apps/storefront/src/styles/admin.css

@@ -437,6 +437,53 @@ code {
   color: #ffffff;
 }
 
+/* A disabled action must look disabled. This sheet is unlayered, so it beats
+   global.css's `@layer base` :disabled default; without this rule a disabled
+   .btn.primary is pixel-identical to a live one. Declared after every .btn
+   variant at equal specificity so it wins over each of them; a component rule
+   that paints a .btn variant must exclude :disabled or restyle it (pinned by
+   admin-disabled.contract.test.ts). */
+button:disabled,
+button[aria-disabled="true"] {
+  cursor: not-allowed;
+}
+
+.btn:disabled,
+.btn[aria-disabled="true"],
+.icon-btn:disabled,
+.icon-btn[aria-disabled="true"] {
+  border-color: var(--admin-line);
+  background: var(--admin-surface-soft);
+  color: var(--admin-muted-2);
+  box-shadow: none;
+  filter: none;
+  cursor: not-allowed;
+}
+
+/* The visible "why is this disabled" line beside a disabled action. */
+.action-reason {
+  display: block;
+  max-width: 34ch;
+  margin: 4px 0 0 auto;
+  color: var(--admin-muted);
+  font-size: 12px;
+  line-height: 1.4;
+  white-space: normal;
+  text-align: right;
+}
+
+.action-reason[hidden] {
+  display: none;
+}
+
+.review-actions .action-reason,
+.agg-launch .action-reason {
+  flex-basis: 100%;
+  max-width: none;
+  margin: 0;
+  text-align: left;
+}
+
 .floating-ask {
   position: fixed;
   right: 24px;