npm - @tokenoftrust/storefront-runner - Versions diffs - 1.3.2 - Mend

@tokenoftrust/storefront-runner 1.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (310) hide show

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

@@ -0,0 +1,229 @@
+---
+/**
+ * Preview/dev-only SHARED RAW-CHROME STYLE GUIDE —
+ * `/_style-guide/<tenant>/chrome/<theme-id>/` (unit F4).
+ *
+ * Renders the platform-shipped raw chrome set — the `/shared/commerce-chrome.css`
+ * class vocabulary (announcement + utility bar, header + search + actions, primary
+ * nav + mega panels, brand/category tiles, compliance strip, age gate, footer) —
+ * re-skinned under ONE tenant theme's component tokens. Swap the theme in the URL
+ * and the whole chrome re-skins; the CSS never forks. This is the visual counterpart
+ * to the style-concept-audit `chromeConcept` gate: the guide shows the shared chrome,
+ * the gate proves no tenant re-authors it. Per decision raw-chrome-single-stylesheet.
+ *
+ * Deliberately links ONLY the theme token sheet + the shared chrome sheet — NOT the
+ * tenant's own mkt.css — so what renders is exactly the platform chrome, isolated
+ * from any per-tenant CSS. The token re-skin uses the same component-var mechanism
+ * as the component guide ([theme].astro): reference tokens overridden by the
+ * descriptor's preview.componentVars, emitted on a scoping wrapper.
+ * noindex, never in the sitemap, never production publishing.
+ */
+const { tenant, theme } = Astro.params;
+const cspNonce = Astro.locals.cspNonce;
+// Tenant-local theme descriptors. From src/pages/style-guide/[tenant]/chrome/ the
+// repo root is seven levels up.
+const themeModules = import.meta.glob<Record<string, any>>(
+  "../../../../../../../tenants/*/content/themes/*.json",
+  { eager: true, import: "default" },
+);
+const seg = `/tenants/${tenant}/content/themes/`;
+const t = Object.entries(themeModules)
+  .filter(([path]) => path.includes(seg))
+  .map(([, mod]) => mod)
+  .find((m) => m.id === theme);
+if (!t) return new Response(null, { status: 404 });
+// Reference component tokens (the "Northwind" pilot identity), overridden per theme
+// by the descriptor's preview.componentVars — the same reskin mechanism the component
+// guide uses. Fonts are intentionally omitted so the theme stylesheet's --font-display
+// (inherited from :root) drives type. Emitted on the .sg-page wrapper so the shared
+// chrome inherits them.
+const REFERENCE_COMPONENT_VARS: Record<string, string> = {
+  "--color-bg": "#f4f1ea", "--color-surface": "#fcfaf5", "--color-surface-2": "#efe9dc",
+  "--color-text": "#1c2624", "--color-muted": "#5c6663",
+  "--color-primary": "#1f3a34", "--color-primary-hover": "#16302b", "--color-primary-contrast": "#f4f1ea",
+  // --color-accent darkened from #b5612f (L 0.174) to #9a5228 (L 0.130) — the lighter
+  // value read below 4.5:1 against both --color-primary-contrast (as an accent-fill
+  // background) and --color-surface (as accent-colored text), which axe caught on any
+  // tenant relying on this fallback instead of its own theme override.
+  "--color-accent": "#9a5228", "--color-accent-hover": "#804421", "--color-border": "#dcd6c9",
+  "--color-success": "#3f6b4f", "--color-sale": "#9e3b2e", "--color-error": "#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)",
+  "--shadow-lg": "0 24px 60px -20px rgba(28,38,36,.22)", "--container-max": "1240px",
+};
+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(";");
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <link rel="icon" type="image/png" href={`/tenants/${tenant}/favicon.png`} />
+    <title>{t.name} — shared chrome (preview)</title>
+    {/* The theme token sheet (fonts + any :root tokens) + the shared chrome sheet.
+        NO tenant mkt.css — the chrome renders purely from the platform stylesheet. */}
+    <link rel="stylesheet" href={t.stylesheet} />
+    <link rel="stylesheet" href="/shared/commerce-chrome.css" />
+    {/* Guide-only chrome + preview affordances (distinct .sg-* names). The mega panel
+        + age gate are shown OPEN in normal flow so reviewers see them without hover or
+        the fixed overlay covering the page. Every styled selector is authored in this
+        component, so component-scoped styles apply. */}
+    <style nonce={cspNonce}>
+      .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.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-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; }
+      /* 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); }
+    </style>
+  </head>
+  <body>
+    <!-- A toolbar, not page content — 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">
+      <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>
+    <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>
+          <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>
+          <div class="announce-marquee"><div class="announce-marquee__track"><span>Clearance event — up to 40% off</span><span>Clearance event — up to 40% off</span></div></div>
+          <div class="announce-bar"><div class="container"><span class="announce-bar__msg">Members save 10% every day — <a href="#">join free</a></span><button class="announce-bar__close" aria-label="Dismiss">×</button></div></div>
+          <nav class="utility-nav" aria-label="Utility"><div class="container">
+            <ul><li><a href="#">News</a></li><li><a href="#">About</a></li><li><a href="#">Contact</a></li></ul>
+            <div class="utility-nav__right"><a class="member-cue" href="#">Member pricing</a><span class="sel">USD $</span></div>
+          </div></nav>
+        </div>
+      </div>
+      <p class="sg-lbl">Header — brand · search · actions · primary nav + mega panel</p>
+      <div class="sg-frame">
+        <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>
+            <div class="header-search">
+              <input type="search" placeholder="Search products…" aria-label="Search" />
+              <button aria-label="Search"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"></circle><path d="M21 21l-4-4"></path></svg></button>
+            </div>
+            <div class="header-actions">
+              <a href="#" aria-label="Account"><svg viewBox="0 0 24 24"><circle cx="12" cy="8" r="4"></circle><path d="M4 21c0-4 4-6 8-6s8 2 8 6"></path></svg></a>
+              <a class="cart" href="#" aria-label="Cart"><svg viewBox="0 0 24 24"><path d="M3 3h2l2 13h11l2-8H7"></path></svg><span class="count">2</span></a>
+            </div>
+            <button class="hamburger" aria-label="Menu"><span></span><span></span><span></span></button>
+          </div>
+          <div class="primary-nav-bar"><div class="container">
+            <nav class="primary-nav" aria-label="Primary"><ul>
+              <li><a class="is-flag" href="#">New<span class="new-badge">NEW</span></a></li>
+              <li class="nav-item">
+                <a href="#">Shop <span class="caret">▾</span></a>
+                <div class="mega mega--wide"><div class="mega__cols">
+                  <div class="mega__col"><h4>Category</h4><a href="#">Disposables</a><a href="#">E-Liquid</a><a href="#">Devices</a></div>
+                  <div class="mega__col"><h4>Featured</h4><a href="#">Best Sellers</a><a href="#">On Sale</a></div>
+                </div></div>
+              </li>
+              <li><a href="#">Coils &amp; Parts</a></li>
+              <li><a href="#">On Sale</a></li>
+            </ul></nav>
+          </div></div>
+        </header>
+      </div>
+      <p class="sg-lbl">Brand tiles + category cards</p>
+      <div class="sg-frame">
+        <section class="section container">
+          <div class="sec-head"><span class="eyebrow">Shop by</span><h2>Top brands</h2></div>
+          <div class="tile-grid">
+            <a class="tile" href="#"><span>Northwind</span></a>
+            <a class="tile" href="#"><span>Summit Co.</span></a>
+            <a class="tile" href="#"><span>Cascade</span></a>
+            <a class="tile" href="#"><span>Harbor</span></a>
+          </div>
+          <div class="cat-grid" style="margin-top:20px">
+            <a class="cat-card" href="#"><h3>Disposables</h3></a>
+            <a class="cat-card" href="#"><h3>E-Liquid</h3></a>
+            <a class="cat-card" href="#"><h3>Devices</h3></a>
+          </div>
+        </section>
+      </div>
+      <p class="sg-lbl">Compliance strip</p>
+      <div class="sg-frame">
+        <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="age-gate is-open">
+          <div class="age-gate__panel">
+            <p class="age-gate__mark"><span class="is-red">Prime</span>VaporClub</p>
+            <h2>Are you 21 or older?</h2>
+            <p class="age-gate__lede">You must be of legal smoking age to enter this store.</p>
+            <div class="age-gate__actions">
+              <a class="btn btn-primary age-gate__enter" href="#">Yes, I'm 21+</a>
+              <a class="btn btn-outline" href="#">No</a>
+            </div>
+            <p class="age-gate__fine">By entering you agree you are of legal age to purchase these products.</p>
+          </div>
+        </div>
+      </div>
+      <p class="sg-lbl">Footer — columns · newsletter · payments · trust marks</p>
+      <div class="sg-frame">
+        <footer class="site-footer">
+          <div class="container">
+            <div class="footer-grid">
+              <div class="footer-brand">
+                <a class="brand" href="#"><span class="b-prime">Prime</span><span class="b-vapor">Vapor</span><span class="b-club">Club</span></a>
+                <p>Regulated-commerce chrome, one shared stylesheet, re-skinned per tenant theme.</p>
+                <div class="footer-news"><div class="footer-news__row"><input type="email" placeholder="Email address" aria-label="Email" /><button>Join</button></div>
+                  <label class="footer-attest"><input type="checkbox" /> <span>I confirm I am 21 or older.</span></label>
+                </div>
+                <div class="pay-badges"><span>Visa</span><span>Mastercard</span><span>Amex</span><span>PayPal</span></div>
+              </div>
+              <div class="footer-col"><h4>Shop</h4><ul><li><a href="#">Disposables</a></li><li><a href="#">E-Liquid</a></li><li><a href="#">Devices</a></li></ul></div>
+              <div class="footer-col"><h4>Support</h4><ul><li><a href="#">Contact</a></li><li><a href="#">Shipping</a></li><li><a href="#">Returns</a></li></ul></div>
+              <div class="footer-col"><h4>Company</h4><ul><li><a href="#">About</a></li><li><a href="#">Blog</a></li></ul></div>
+            </div>
+            <div class="trust-marks"><span>🔒 Secure checkout</span><span>✓ Age-verified</span><span>★ 4.9 / 5</span></div>
+            <div class="footer-warning"><strong>WARNING:</strong><p>This product contains nicotine. Nicotine is an addictive chemical.</p></div>
+            <div class="footer-bottom"><p>© Sample Store. All rights reserved.</p><p><a href="#">Privacy</a> · <a href="#">Terms</a></p></div>
+          </div>
+        </footer>
+      </div>
+      <p class="sg-note">
+        Every element above is styled solely by <code>/shared/commerce-chrome.css</code> under the
+        <b>{t.name}</b> theme's tokens — no tenant chrome CSS is linked here. The
+        <code>chromeConcept</code> gate (style-concept-audit + verify-tenant.sh) fails any tenant
+        that re-authors or inlines these selectors instead of linking the shared sheet.
+      </p>
+    </main>
+  </body>
+</html>

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

@@ -0,0 +1,144 @@
+---
+/**
+ * Preview/dev-only WIDGET LIBRARY GUIDE —
+ * `/_style-guide/<tenant>/guide/<theme-id>/`.
+ *
+ * Renders `docs/widget-library-guide.md` (the source of truth) as HTML via
+ * Astro's native markdown pipeline, inside the tenant's theme so the prose reads
+ * under real tokens. The .md file is imported (never duplicated here) so the doc
+ * has ONE maintained home. A persistent left sidebar (StyleGuideNav) makes the
+ * guide reachable in one click from the tenant hub and links across the other
+ * style-guide surfaces. noindex, never in the sitemap, never production publishing.
+ */
+import "@/styles/global.css";
+import type { MarkdownInstance } from "astro";
+import StyleGuideNav from "@/components/style-guide/StyleGuideNav.astro";
+const { tenant, theme } = Astro.params;
+const cspNonce = Astro.locals.cspNonce;
+// Tenant-local theme descriptors. From src/pages/style-guide/[tenant]/guide/ the
+// repo root is seven levels up (same depth as the chrome guide).
+const themeModules = import.meta.glob<Record<string, any>>(
+  "../../../../../../../tenants/*/content/themes/*.json",
+  { eager: true, import: "default" },
+);
+const seg = `/tenants/${tenant}/content/themes/`;
+const t = Object.entries(themeModules)
+  .filter(([path]) => path.includes(seg))
+  .map(([, mod]) => mod)
+  .find((m) => m.id === theme);
+if (!t) return new Response(null, { status: 404 });
+// The guide markdown — the single maintained source of truth (repo-root docs/).
+// Imported through Astro's markdown pipeline so we render its <Content /> and
+// pull its heading outline for the sidebar TOC; the prose is never copied here.
+const guideModules = import.meta.glob<MarkdownInstance<Record<string, unknown>>>(
+  "../../../../../../../docs/widget-library-guide.md",
+  { eager: true },
+);
+const guide = Object.values(guideModules)[0];
+if (!guide) return new Response(null, { status: 404 });
+const { Content } = guide;
+const headings = guide.getHeadings();
+// Same reskin mechanism as the component/chrome guides: reference tokens (the
+// Northwind pilot identity) overridden by the descriptor's preview.componentVars,
+// emitted on the themed content wrapper so the prose reads under THIS theme.
+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-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)",
+  "--shadow-lg": "0 24px 60px -20px rgba(28,38,36,.22)", "--container-max": "1240px",
+};
+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(";");
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <link rel="icon" type="image/png" href={`/tenants/${tenant}/favicon.png`} />
+    <title>Widget library guide — {t.name} (preview)</title>
+    {/* The tenant's theme sheet so the prose reads under real brand tokens. */}
+    <link rel="stylesheet" href={t.stylesheet} />
+    <style nonce={cspNonce}>
+      body { margin: 0; }
+      .sg-bar { position: sticky; top: 0; z-index: 200; 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; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
+      .sg-bar a.right { margin-left: auto; }
+      /* Two-column docs layout: persistent left rail + themed prose. */
+      .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. */
+      .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; }
+      @media (max-width: 900px) {
+        .sg-shell { grid-template-columns: 1fr; }
+        .sg-side { position: static; max-height: none; }
+      }
+    </style>
+  </head>
+  <body>
+    <header class="sg-bar">
+      <span class="flag">Preview · widget library · noindex</span>
+      <span class="role">{t.role}</span>
+      <b>{t.name}</b>
+      <a class="right" href={`/_style-guide/${tenant}/${t.id}/`}>← component guide</a>
+      <a href={`/_style-guide/${tenant}/`}>tenant hub →</a>
+    </header>
+    <div class="sg-shell">
+      <aside class="sg-side">
+        <StyleGuideNav tenant={tenant!} theme={t.id} active="guide" headings={headings} />
+      </aside>
+      <main class="sg-content" style={componentVarsInline}>
+        <article class="rte">
+          <Content />
+        </article>
+      </main>
+    </div>
+  </body>
+</html>

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

@@ -0,0 +1,116 @@
+---
+/**
+ * Preview/dev-only STYLE-GUIDE HUB for a tenant — `/_style-guide/<tenant>/`.
+ *
+ * Lists every theme guide (current / candidate / legacy) so reviewers can open
+ * them side-by-side WITHOUT reskinning the live marketing site. A persistent
+ * left sidebar (StyleGuideNav) puts the Widget Library Guide one click away.
+ * This is a review surface only: noindex, never in the sitemap, never part of
+ * production marketing publishing. Tenant-agnostic route; theme data is
+ * tenant-local (tenants/<tenant>/content/themes/*.json).
+ */
+import StyleGuideNav from "@/components/style-guide/StyleGuideNav.astro";
+const { tenant } = Astro.params;
+const cspNonce = Astro.locals.cspNonce;
+// Tenant-local theme descriptors. Colocated repo-root layout: from
+// src/pages/style-guide/[tenant]/ the repo root is six levels up.
+const themeModules = import.meta.glob<Record<string, any>>(
+  "../../../../../../tenants/*/content/themes/*.json",
+  { eager: true, import: "default" },
+);
+const seg = `/tenants/${tenant}/content/themes/`;
+const themes = Object.entries(themeModules)
+  .filter(([path]) => path.includes(seg))
+  .map(([, mod]) => mod);
+if (themes.length === 0) return new Response(null, { status: 404 });
+const ROLE_ORDER: Record<string, number> = { current: 0, candidate: 1, legacy: 2 };
+themes.sort(
+  (a, b) => (ROLE_ORDER[a.role] ?? 9) - (ROLE_ORDER[b.role] ?? 9),
+);
+// The current (or first) theme skins the persistent sidebar's per-theme links.
+const navTheme = themes[0]?.id;
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <link rel="icon" type="image/png" href={`/tenants/${tenant}/favicon.png`} />
+    <title>Style guides — {tenant} (preview)</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light; }
+      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; }
+      .sub { color: #9fb0c8; margin: 0 0 32px; }
+      .card { display: block; text-decoration: none; color: inherit; background: #16223c; border: 1px solid #24324f; border-radius: 14px; padding: 20px 22px; margin-bottom: 6px; transition: border-color .15s, transform .15s; }
+      .card:hover { border-color: #3f5680; transform: translateY(-2px); }
+      .card .row { display: flex; align-items: center; gap: 12px; }
+      .badge { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
+      .badge.current { background: #0e9f8e; color: #001f1a; }
+      .badge.candidate { background: #6f7dff; color: #060a26; }
+      .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; }
+      .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: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; } }
+    </style>
+  </head>
+  <body>
+    <div class="sg-shell">
+      <aside class="sg-side">
+        <StyleGuideNav tenant={tenant!} theme={navTheme} active="tenant" />
+      </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>
+        <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>
+        {themes.map((t) => (
+          <div>
+            <a class="card" href={`/_style-guide/${tenant}/${t.id}/`}>
+              <div class="row">
+                <span class:list={["badge", t.role]}>{t.role}</span>
+                <span class="name">{t.name}</span>
+                <span class="status">{t.status}</span>
+              </div>
+              {t.description && <p class="desc">{t.description}</p>}
+            </a>
+            <div class="sub-links">
+              <a href={`/_style-guide/${tenant}/chrome/${t.id}/`}>shared chrome preview →</a>
+              <a href={`/_style-guide/${tenant}/guide/${t.id}/`}>widget library guide →</a>
+            </div>
+          </div>
+        ))}
+        <p class="note">
+          These are preview/dev review surfaces — excluded from the sitemap and production marketing
+          publishing. Approve the <b>current</b> guide before propagating its style concept across the site.
+        </p>
+      </main>
+    </div>
+  </body>
+</html>

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

@@ -0,0 +1,98 @@
+---
+/**
+ * Preview/dev-only STYLE-GUIDE ROOT INDEX — `/_style-guide/`.
+ *
+ * Lists EVERY tenant and each of its theme guides, so all clients' guides are
+ * discoverable from one place. Review surface only: noindex, never in the
+ * sitemap, never part of production marketing publishing. Tenant-agnostic —
+ * theme data is tenant-local (tenants/<tenant>/content/themes/*.json).
+ */
+const cspNonce = Astro.locals.cspNonce;
+// All tenant-local theme descriptors, grouped by tenant. Colocated repo-root
+// layout: from src/pages/style-guide/ the repo root is five levels up.
+const themeModules = import.meta.glob<Record<string, any>>(
+  "../../../../../tenants/*/content/themes/*.json",
+  { eager: true, import: "default" },
+);
+const ROLE_ORDER: Record<string, number> = { current: 0, candidate: 1, legacy: 2 };
+const byTenant = new Map<string, any[]>();
+for (const [path, mod] of Object.entries(themeModules)) {
+  const m = /\/tenants\/([^/]+)\/content\/themes\//.exec(path);
+  const tenant = m?.[1];
+  if (!tenant) continue;
+  if (!byTenant.has(tenant)) byTenant.set(tenant, []);
+  byTenant.get(tenant)!.push(mod);
+}
+const tenants = [...byTenant.entries()]
+  .map(([tenant, themes]) => ({
+    tenant,
+    themes: themes.sort((a, b) => (ROLE_ORDER[a.role] ?? 9) - (ROLE_ORDER[b.role] ?? 9)),
+  }))
+  .sort((a, b) => a.tenant.localeCompare(b.tenant));
+---
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="robots" content="noindex, nofollow" />
+    <title>Style guides — all clients (preview)</title>
+    <style nonce={cspNonce}>
+      :root { color-scheme: light; }
+      body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: #0f1729; color: #e6edf6; line-height: 1.55; }
+      .wrap { max-width: 920px; margin: 0 auto; padding: 48px 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; }
+      .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; }
+      .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; }
+      .badge { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; padding: 3px 9px; border-radius: 999px; }
+      .badge.current { background: #0e9f8e; color: #001f1a; }
+      .badge.candidate { background: #6f7dff; color: #060a26; }
+      .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; }
+    </style>
+  </head>
+  <body>
+    <div class="wrap">
+      <span class="flag">Preview · dev only · noindex</span>
+      <h1>Client style guides</h1>
+      <p class="sub">Every 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>
+      {tenants.map(({ tenant, themes }) => (
+        <section class="tenant">
+          <h2>
+            {tenant}
+            <a href={`/_style-guide/${tenant}/`}>tenant hub →</a>
+            {themes[0]?.id && <a href={`/_style-guide/${tenant}/guide/${themes[0].id}/`}>widget library guide →</a>}
+          </h2>
+          {themes.map((t) => (
+            <a class="card" href={`/_style-guide/${tenant}/${t.id}/`}>
+              <div class="row">
+                <span class:list={["badge", t.role]}>{t.role}</span>
+                <span class="name">{t.name}</span>
+                <span class="status">{t.status}</span>
+              </div>
+              {t.description && <p class="desc">{t.description}</p>}
+            </a>
+          ))}
+        </section>
+      ))}
+      <p class="note">
+        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>
+  </body>
+</html>