@spectare-personalisation/react 0.2.2 → 0.4.0

package/dist/index.cjs

@@ -13,6 +13,7 @@ var DOMPurify__default = /*#__PURE__*/_interopDefault(DOMPurify);
 
 // src/types.ts
 var COMPONENT_ZONES = {
+  AnnouncementBar: "announce",
   HeroStatement: "hero",
   ImageCtaHero: "hero",
   AtomCard: "body",
@@ -30,12 +31,83 @@ function filterAssemblyByZone(assembly, zone) {
     return effectiveZone === zone;
   });
 }
+
+// src/tokens.ts
+var DEFAULT_ACCENT = "#60a5fa";
+var SP_ROOT = "sp-root";
+function palette(accent) {
+  return {
+    "--sp-accent": accent,
+    "--sp-accent-bg": `color-mix(in srgb,${accent} 10%,transparent)`,
+    "--sp-accent-border": `color-mix(in srgb,${accent} 20%,transparent)`,
+    "--sp-bg": "#18181b",
+    "--sp-surface": "#09090b",
+    "--sp-border": "#27272a",
+    "--sp-text": "#f4f4f5",
+    "--sp-text-sub": "#d4d4d8",
+    "--sp-text-strong": "#e4e4e7",
+    "--sp-text-muted": "#82828b",
+    "--sp-text-dim": "#6b6b74",
+    "--sp-text-body": "#a1a1aa",
+    "--sp-positive": "#6ee7b7",
+    "--sp-cta-bg": "#fff",
+    "--sp-cta-text": "#09090b",
+    "--sp-divider": "rgba(255,255,255,0.06)",
+    "--sp-code-bg": "rgba(255,255,255,0.07)",
+    "--sp-code-border": "rgba(255,255,255,0.08)",
+    "--sp-pre-bg": "rgba(0,0,0,0.4)"
+  };
+}
+function rules(unit) {
+  const gap = unit === "px" ? "20px" : "1.25rem";
+  return [
+    ".sp-root .sp-prose p{margin-bottom:.625rem}",
+    ".sp-root .sp-prose p:last-child{margin-bottom:0}",
+    ".sp-root .sp-prose ul{list-style:disc;padding-left:1.25rem;margin-bottom:.625rem}",
+    ".sp-root .sp-prose ol{list-style:decimal;padding-left:1.25rem;margin-bottom:.625rem}",
+    ".sp-root .sp-prose li{margin-bottom:.25rem}",
+    ".sp-root .sp-prose strong{color:var(--sp-text-strong);font-weight:600}",
+    ".sp-root .sp-prose h2,.sp-root .sp-prose h3{color:var(--sp-text);font-weight:600;margin:.875rem 0 .375rem;font-size:1rem}",
+    ".sp-root .sp-prose code{background:var(--sp-code-bg);border:1px solid var(--sp-code-border);padding:.1rem .35rem;border-radius:.25rem;font-size:.82em;color:var(--sp-text)}",
+    ".sp-root .sp-prose blockquote{border-left:3px solid var(--sp-border);padding-left:1rem;color:var(--sp-text-muted);margin:.75rem 0}",
+    `.sp-root .sp-pair{display:grid;grid-template-columns:1fr 1fr;gap:${gap}}`,
+    "@media(max-width:640px){.sp-root .sp-pair{grid-template-columns:1fr}}"
+  ].join("");
+}
+function buildTokenCss({ accent = DEFAULT_ACCENT, unit = "px", scope = `.${SP_ROOT}` } = {}) {
+  const decls = Object.entries(palette(accent)).map(([k, v]) => `${k}:${v}`).join(";");
+  return `${scope}{${decls}}${rules(unit)}`;
+}
 function renderMarkdown(content) {
   const raw = marked.marked.parse(content != null ? content : "", { async: false });
   return DOMPurify__default.default.sanitize(raw, { USE_PROFILES: { html: true } });
 }
 var HALF_COMPONENTS = /* @__PURE__ */ new Set(["TestimonialCard"]);
 var flexItems = (a) => a === "center" ? "center" : a === "right" ? "flex-end" : "flex-start";
+function AnnouncementBar({ text, link }) {
+  if (!text) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "10px",
+    flexWrap: "wrap",
+    textAlign: "center",
+    background: "var(--sp-accent-bg)",
+    border: "1px solid var(--sp-accent-border)",
+    borderRadius: "8px",
+    padding: "8px 16px",
+    fontSize: "14px",
+    lineHeight: 1.4,
+    color: "var(--sp-text-sub)"
+  }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: text }),
+    (link == null ? void 0 : link.href) && (link == null ? void 0 : link.label) && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: link.href, style: { color: "var(--sp-accent)", fontWeight: 600, textDecoration: "none", whiteSpace: "nowrap" }, children: [
+      link.label,
+      " \u2192"
+    ] })
+  ] });
+}
 function HeroStatement({ headline, subheading, align = "left" }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: flexItems(align), textAlign: align, paddingTop: "24px", paddingBottom: "24px" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "32px", fontWeight: 700, letterSpacing: "-0.025em", lineHeight: 1.2, color: "var(--sp-text)", margin: "0 0 12px" }, children: headline }),
@@ -43,11 +115,18 @@ function HeroStatement({ headline, subheading, align = "left" }) {
   ] });
 }
 var ATOM_LAYOUT_DEFAULT = ["title", "content", "stats", "cta"];
-function AtomCard({ title, content, layout, stats = [], ctaText, ctaUrl }) {
+var ATOM_CLAMP_LINES = 4;
+var clampStyle = {
+  display: "-webkit-box",
+  WebkitLineClamp: ATOM_CLAMP_LINES,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+};
+function AtomCard({ title, content, layout, stats = [], ctaText, ctaUrl, full }) {
   const order = layout && layout.length ? layout : ATOM_LAYOUT_DEFAULT;
   const element = (name) => {
     if (name === "title") return title ? /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "16px", fontWeight: 600, color: "var(--sp-text)", margin: "0 0 12px" }, children: title }, "title") : null;
-    if (name === "content") return content ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sp-prose", style: { fontSize: "15px", color: "var(--sp-text-sub)", lineHeight: 1.6 }, dangerouslySetInnerHTML: { __html: renderMarkdown(content) } }, "content") : null;
+    if (name === "content") return content ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sp-prose", style: { fontSize: "15px", color: "var(--sp-text-sub)", lineHeight: 1.6, ...full ? {} : clampStyle }, dangerouslySetInnerHTML: { __html: renderMarkdown(content) } }, "content") : null;
     if (name === "stats") return stats.length ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: "20px", margin: "0 0 12px", paddingBottom: "12px", borderBottom: "1px solid var(--sp-border)" }, children: stats.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "2px" }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "22px", fontWeight: 700, color: "var(--sp-text)", lineHeight: 1, fontVariantNumeric: "tabular-nums" }, children: s.value }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "11px", color: "var(--sp-text-muted)", textTransform: "uppercase", letterSpacing: "0.06em" }, children: s.label })
@@ -135,7 +214,7 @@ function CtaStrip({ headline, primary, secondary, align = "center" }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { border: "1px solid var(--sp-border)", borderRadius: "12px", padding: "32px", textAlign: align, background: "var(--sp-bg)" }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { fontSize: "24px", fontWeight: 700, color: "var(--sp-text)", margin: "0 0 24px" }, children: headline }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: flexItems(align), gap: "16px", flexWrap: "wrap" }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("a", { href: primary.href, style: { background: "#fff", color: "#09090b", padding: "10px 24px", borderRadius: "12px", fontWeight: 600, fontSize: "15px", textDecoration: "none" }, children: primary.label }),
+      /* @__PURE__ */ jsxRuntime.jsx("a", { href: primary.href, style: { background: "var(--sp-cta-bg)", color: "var(--sp-cta-text)", padding: "10px 24px", borderRadius: "12px", fontWeight: 600, fontSize: "15px", textDecoration: "none" }, children: primary.label }),
       secondary && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: secondary.href, style: { fontSize: "15px", color: "var(--sp-text-sub)", textDecoration: "none" }, children: [
         secondary.label,
         " \u2192"
@@ -147,10 +226,13 @@ function renderSingle(item, brand, align) {
   var _a, _b;
   const s = (_a = item.slots) != null ? _a : {};
   switch (item.component) {
+    case "AnnouncementBar":
+      return /* @__PURE__ */ jsxRuntime.jsx(AnnouncementBar, { text: s.text, link: s.link });
     case "HeroStatement":
       return /* @__PURE__ */ jsxRuntime.jsx(HeroStatement, { headline: s.headline, subheading: s.subheading, align });
+    // A full-width card has nothing beside it, so there is nothing for a clamp to protect.
     case "AtomCard":
-      return /* @__PURE__ */ jsxRuntime.jsx(AtomCard, { title: s.title, content: s.content, layout: s.layout, stats: s.stats, ctaText: s.ctaText, ctaUrl: s.ctaUrl });
+      return /* @__PURE__ */ jsxRuntime.jsx(AtomCard, { title: s.title, content: s.content, layout: s.layout, stats: s.stats, ctaText: s.ctaText, ctaUrl: s.ctaUrl, full: s.full || resolvedSize(item) === "full" });
     case "StatGrid":
       return /* @__PURE__ */ jsxRuntime.jsx(StatGrid, { stats: s.stats, caption: s.caption });
     case "CodeBlock":
@@ -165,8 +247,20 @@ function renderSingle(item, brand, align) {
       return /* @__PURE__ */ jsxRuntime.jsx(ImageCtaHero, { src: s.src, alt: s.alt, headline: s.headline, subheading: s.subheading, ctaLabel: s.ctaLabel, ctaHref: s.ctaHref, align });
     case "CtaStrip":
       return /* @__PURE__ */ jsxRuntime.jsx(CtaStrip, { headline: s.headline, primary: s.primary, secondary: s.secondary, align });
-    default:
-      return null;
+    // An unrecognised component name used to render nothing at all. A component needs a
+    // renderer in three places plus the WordPress plugin, so missing one made its content
+    // silently absent on that surface only: no error, no warning, just a shorter page that
+    // looks deliberate. That is the failure mode to remove before the registry grows.
+    //
+    // Falls back to AtomCard when the slots carry something readable, since almost every
+    // component is built from an atom and title/content is the shape they share. When there
+    // is genuinely nothing to show it still renders nothing, because an empty card is worse
+    // than a gap, but the warning fires either way.
+    default: {
+      console.warn(`[spectare] ComponentRenderer: no renderer for "${item.component}", falling back to AtomCard`);
+      if (!s.title && !s.content) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(AtomCard, { title: s.title, content: s.content, stats: s.stats, ctaText: s.ctaText, ctaUrl: s.ctaUrl, full: true });
+    }
   }
 }
 function resolvedSize(item) {
@@ -198,12 +292,11 @@ function XrayBadge({ name, size }) {
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: "10px", fontFamily: "monospace", color: "#71717a", lineHeight: 1 }, children: size })
   ] });
 }
-var PAIR_STYLE = ".sp-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:640px){.sp-pair{grid-template-columns:1fr}}";
-function ComponentRenderer({ assembly, brand, xray = false, zone, align }) {
+function ComponentRenderer({ assembly, brand, xray = false, zone, align, accent }) {
   const filtered = zone ? filterAssemblyByZone(assembly, zone) : assembly;
   const layout = buildLayout(filtered);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "20px", fontSize: "16px" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: PAIR_STYLE } }),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: SP_ROOT, style: { display: "flex", flexDirection: "column", gap: "20px", fontSize: "16px" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: buildTokenCss({ accent }) } }),
     layout.map((group, i) => {
       if (group.type === "full") {
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: xray ? { position: "relative" } : void 0, children: [
@@ -230,7 +323,20 @@ function ComponentRenderer({ assembly, brand, xray = false, zone, align }) {
     })
   ] });
 }
-var CSS_TOKENS = `:root{--sp-accent:#60a5fa;--sp-accent-bg:rgba(96,165,250,0.1);--sp-accent-border:rgba(96,165,250,0.2);--sp-bg:#18181b;--sp-surface:#09090b;--sp-border:#27272a;--sp-text:#f4f4f5;--sp-text-sub:#d4d4d8;--sp-text-strong:#e4e4e7;--sp-text-muted:#71717a;--sp-text-dim:#52525b;--sp-text-body:#a1a1aa;--sp-positive:#6ee7b7;--sp-divider:rgba(255,255,255,0.06);--sp-code-bg:rgba(255,255,255,0.07);--sp-code-border:rgba(255,255,255,0.08);--sp-pre-bg:rgba(0,0,0,0.4)}.sp-prose p{margin-bottom:.625rem}.sp-prose p:last-child{margin-bottom:0}.sp-prose ul{list-style:disc;padding-left:1.25rem;margin-bottom:.625rem}.sp-prose ol{list-style:decimal;padding-left:1.25rem;margin-bottom:.625rem}.sp-prose li{margin-bottom:.25rem}.sp-prose strong{color:var(--sp-text-strong);font-weight:600}.sp-prose h2,.sp-prose h3{color:var(--sp-text);font-weight:600;margin:.875rem 0 .375rem;font-size:1rem}.sp-prose code{background:var(--sp-code-bg);border:1px solid var(--sp-code-border);padding:.1rem .35rem;border-radius:.25rem;font-size:.82em;color:var(--sp-text)}.sp-prose blockquote{border-left:3px solid var(--sp-border);padding-left:1rem;color:var(--sp-text-muted);margin:.75rem 0}`;
+var VARIANT_KEY = (orgSlug) => `_spectare_variant_${orgSlug}`;
+function readVariantId(orgSlug) {
+  try {
+    return sessionStorage.getItem(VARIANT_KEY(orgSlug));
+  } catch (e) {
+    return null;
+  }
+}
+function writeVariantId(orgSlug, variantId) {
+  try {
+    sessionStorage.setItem(VARIANT_KEY(orgSlug), variantId);
+  } catch (e) {
+  }
+}
 function buildSummary(pageHint, orgSlug) {
   const parts = [pageHint];
   const referrer = document.referrer;
@@ -282,32 +388,39 @@ function PersonalisedSection({
   style,
   initialAssembly,
   initialIntent,
+  initialVariantId,
+  directSummary,
   zone,
-  align
+  align,
+  accent
 }) {
   const [assembly, setAssembly] = react.useState(initialAssembly != null ? initialAssembly : []);
   const [loading, setLoading] = react.useState(!initialAssembly);
   const [orgName, setOrgName] = react.useState(void 0);
+  const [debugMode, setDebugMode] = react.useState(false);
+  const [debugIntent, setDebugIntent] = react.useState(null);
   const tokenRef = react.useRef(null);
   const conversionFiredRef = react.useRef(false);
+  react.useEffect(() => {
+    setDebugMode(new URLSearchParams(window.location.search).has("spectare_debug"));
+    if (initialIntent) setDebugIntent(initialIntent);
+  }, [initialIntent]);
+  react.useEffect(() => {
+    if (initialVariantId) writeVariantId(orgSlug, initialVariantId);
+  }, [orgSlug, initialVariantId]);
   react.useEffect(() => {
     let cancelled = false;
     async function load() {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i;
       try {
-        const p = new URLSearchParams(window.location.search);
-        const utmSuffix = ["utm_source", "utm_medium", "utm_campaign", "utm_term"].map((k) => {
-          var _a2;
-          return (_a2 = p.get(k)) != null ? _a2 : "";
-        }).filter(Boolean).join("_");
-        const tokenKey = `_spectare_token_${orgSlug}${utmSuffix ? "_" + utmSuffix : ""}`;
-        let token = sessionStorage.getItem(tokenKey);
-        if (!token) {
-          const summary = buildSummary(pageHint != null ? pageHint : `Visiting ${document.title}`, orgSlug);
+        let token = null;
+        if (directSummary) {
+          setLoading(true);
+          setAssembly([]);
           const res2 = await fetch(`${baseUrl}/api/qualify/${orgSlug}`, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ summary })
+            body: JSON.stringify({ summary: directSummary, direct: true })
           });
           if (!res2.ok || cancelled) {
             setLoading(false);
@@ -315,8 +428,30 @@ function PersonalisedSection({
           }
           const data = await res2.json();
           token = (_a = data.token) != null ? _a : null;
-          if (token) sessionStorage.setItem(tokenKey, token);
-          if (data.orgName) setOrgName(data.orgName);
+        } else {
+          const p = new URLSearchParams(window.location.search);
+          const utmSuffix = ["utm_source", "utm_medium", "utm_campaign", "utm_term"].map((k) => {
+            var _a2;
+            return (_a2 = p.get(k)) != null ? _a2 : "";
+          }).filter(Boolean).join("_");
+          const tokenKey = `_spectare_token_${orgSlug}${utmSuffix ? "_" + utmSuffix : ""}`;
+          token = sessionStorage.getItem(tokenKey);
+          if (!token) {
+            const summary = buildSummary(pageHint != null ? pageHint : `Visiting ${document.title}`, orgSlug);
+            const res2 = await fetch(`${baseUrl}/api/qualify/${orgSlug}`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ summary })
+            });
+            if (!res2.ok || cancelled) {
+              setLoading(false);
+              return;
+            }
+            const data = await res2.json();
+            token = (_b = data.token) != null ? _b : null;
+            if (token) sessionStorage.setItem(tokenKey, token);
+            if (data.orgName) setOrgName(data.orgName);
+          }
         }
         if (!token || cancelled) {
           setLoading(false);
@@ -326,9 +461,19 @@ function PersonalisedSection({
         let res = await fetch(`${baseUrl}/api/assemble/components`, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ token, orgSlug })
+          // Direct: flag it so the server cost-caps the build, and omit the seen-variant
+          // exclusion so it can read the shared cache instead of forcing a fresh build.
+          body: JSON.stringify(
+            directSummary ? { token, orgSlug, direct: true } : { token, orgSlug, excludeVariantId: readVariantId(orgSlug) }
+          )
         });
-        if (res.status === 401 && !cancelled) {
+        if (res.status === 401 && !cancelled && !directSummary) {
+          const p = new URLSearchParams(window.location.search);
+          const utmSuffix = ["utm_source", "utm_medium", "utm_campaign", "utm_term"].map((k) => {
+            var _a2;
+            return (_a2 = p.get(k)) != null ? _a2 : "";
+          }).filter(Boolean).join("_");
+          const tokenKey = `_spectare_token_${orgSlug}${utmSuffix ? "_" + utmSuffix : ""}`;
           sessionStorage.removeItem(tokenKey);
           const summary = buildSummary(pageHint != null ? pageHint : `Visiting ${document.title}`, orgSlug);
           const qRes = await fetch(`${baseUrl}/api/qualify/${orgSlug}`, {
@@ -341,7 +486,7 @@ function PersonalisedSection({
             return;
           }
           const qData = await qRes.json();
-          token = (_b = qData.token) != null ? _b : null;
+          token = (_c = qData.token) != null ? _c : null;
           if (token) {
             sessionStorage.setItem(tokenKey, token);
             tokenRef.current = token;
@@ -353,14 +498,14 @@ function PersonalisedSection({
           res = await fetch(`${baseUrl}/api/assemble/components`, {
             method: "POST",
             headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({ token, orgSlug })
+            body: JSON.stringify({ token, orgSlug, excludeVariantId: readVariantId(orgSlug) })
           });
         }
         if (!res.ok || cancelled) {
           setLoading(false);
           return;
         }
-        const contentType = (_c = res.headers.get("content-type")) != null ? _c : "";
+        const contentType = (_d = res.headers.get("content-type")) != null ? _d : "";
         if (contentType.includes("text/event-stream")) {
           const reader = res.body.getReader();
           const decoder = new TextDecoder();
@@ -372,13 +517,26 @@ function PersonalisedSection({
               if (done || cancelled) break;
               buf += decoder.decode(value, { stream: true });
               const lines = buf.split("\n");
-              buf = (_d = lines.pop()) != null ? _d : "";
+              buf = (_e = lines.pop()) != null ? _e : "";
               for (const line of lines) {
                 if (!line.startsWith("data: ")) continue;
                 const payload = line.slice(6).trim();
                 if (payload === "[DONE]") break;
                 try {
-                  const comp = JSON.parse(payload);
+                  const parsed = JSON.parse(payload);
+                  if (parsed._variant && typeof parsed._variant === "string") {
+                    writeVariantId(orgSlug, parsed._variant);
+                    continue;
+                  }
+                  if (parsed._error) {
+                    if (!loadingCleared) {
+                      setLoading(false);
+                      loadingCleared = true;
+                    }
+                    continue;
+                  }
+                  if (!parsed.component) continue;
+                  const comp = parsed;
                   if (!loadingCleared) {
                     setLoading(false);
                     loadingCleared = true;
@@ -394,10 +552,14 @@ function PersonalisedSection({
           }
         } else {
           const data = await res.json();
+          if (data.variantId) writeVariantId(orgSlug, data.variantId);
           if (cancelled) return;
-          const clientAudience = (_f = (_e = data.intent) == null ? void 0 : _e.userContext) == null ? void 0 : _f.audience;
-          const clientStage = (_h = (_g = data.intent) == null ? void 0 : _g.userContext) == null ? void 0 : _h.stage;
+          const clientAudience = (_g = (_f = data.intent) == null ? void 0 : _f.userContext) == null ? void 0 : _g.audience;
+          const clientStage = (_i = (_h = data.intent) == null ? void 0 : _h.userContext) == null ? void 0 : _i.stage;
           const ssrMatches = initialIntent && clientAudience === initialIntent.audience && clientStage === initialIntent.stage;
+          if (clientAudience && clientStage) {
+            setDebugIntent({ audience: clientAudience, stage: clientStage });
+          }
           if (!ssrMatches && Array.isArray(data.assembly) && data.assembly.length > 0) {
             setAssembly(data.assembly);
           }
@@ -411,7 +573,7 @@ function PersonalisedSection({
     return () => {
       cancelled = true;
     };
-  }, [orgSlug, baseUrl, pageHint, initialAssembly, initialIntent]);
+  }, [orgSlug, baseUrl, pageHint, initialAssembly, initialIntent, directSummary]);
   react.useEffect(() => {
     if (!assembly.length || conversionFiredRef.current) return;
     const token = tokenRef.current;
@@ -456,6 +618,7 @@ function PersonalisedSection({
           token,
           orgSlug,
           url,
+          variantId: readVariantId(orgSlug),
           ...atomsShown.length ? { atomsShown } : {},
           ...visitPath.length > 1 ? { visitPath } : {},
           ...data.goalName ? { goalName: data.goalName } : {},
@@ -467,15 +630,39 @@ function PersonalisedSection({
     });
   }, [assembly, orgSlug, baseUrl]);
   if (!loading && assembly.length === 0) return null;
+  const debugStyle = debugMode ? { outline: "2px solid rgba(96,165,250,0.5)", borderRadius: "0.5rem", position: "relative", padding: "0.5rem", ...style } : style;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: CSS_TOKENS } }),
     /* @__PURE__ */ jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: "@keyframes sp-pulse{0%,100%{opacity:1}50%{opacity:0.4}}" } }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className, style, children: loading && assembly.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Shimmer, {}) : /* @__PURE__ */ jsxRuntime.jsx(ComponentRenderer, { assembly: zone ? filterAssemblyByZone(assembly, zone) : assembly, brand: brand != null ? brand : orgName, align }) })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: debugStyle, children: [
+      debugMode && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "absolute", top: "-1px", right: "-1px", zIndex: 20, display: "flex", alignItems: "center", gap: "0.375rem", background: "rgba(96,165,250,0.9)", borderRadius: "0 0.5rem 0 0.375rem", padding: "0.25rem 0.625rem", fontSize: "0.625rem", fontFamily: "monospace", color: "#fff", pointerEvents: "none", userSelect: "none" }, children: [
+        "Personalised by Spectare",
+        debugIntent && /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { opacity: 0.75 }, children: [
+          " ",
+          debugIntent.audience,
+          "/",
+          debugIntent.stage
+        ] })
+      ] }),
+      loading && assembly.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Shimmer, {}) : /* @__PURE__ */ jsxRuntime.jsx(ComponentRenderer, { assembly: zone ? filterAssemblyByZone(assembly, zone) : assembly, brand: brand != null ? brand : orgName, align, accent })
+    ] })
   ] });
 }
 
+exports.AnnouncementBar = AnnouncementBar;
+exports.AtomCard = AtomCard;
+exports.CodeBlock = CodeBlock;
+exports.ComparisonTable = ComparisonTable;
 exports.ComponentRenderer = ComponentRenderer;
+exports.CtaStrip = CtaStrip;
+exports.DEFAULT_ACCENT = DEFAULT_ACCENT;
+exports.FeatureList = FeatureList;
+exports.HeroStatement = HeroStatement;
+exports.ImageCtaHero = ImageCtaHero;
 exports.PersonalisedSection = PersonalisedSection;
+exports.SP_ROOT = SP_ROOT;
+exports.StatGrid = StatGrid;
+exports.TestimonialCard = TestimonialCard;
+exports.buildTokenCss = buildTokenCss;
 exports.filterAssemblyByZone = filterAssemblyByZone;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map