@tokenoftrust/storefront-runner 2.2.78 → 2.2.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tokenoftrust/storefront-runner",
-  "version": "2.2.78",
+  "version": "2.2.80",
   "license": "SEE LICENSE IN LICENSE",
   "description": "World-shareable storefront runner: multi-tenant renderer on Astro/Cloudflare. No control plane.",
   "packageManager": "pnpm@11.9.0",

package/packages/public-runtime/src/integration/consent-broker.ts

@@ -797,6 +797,49 @@ function renderControlState(root: HTMLElement, state: ViewerAnalyticsConsentStat
   }
 }
 
+function firstEnabledButton(root: HTMLElement): HTMLButtonElement | null {
+  return root.querySelector<HTMLButtonElement>("button:not(:disabled)");
+}
+
+/**
+ * Bind each persistent "Analytics choices" disclosure to the control its
+ * `aria-controls` names: a click opens the control and moves focus into it; a second
+ * click, the control's Close button, or Escape inside it closes it again, and the
+ * latter two return focus to the toggle.
+ */
+function bindViewerAnalyticsChoicesToggles(win: ViewerConsentWindow): void {
+  const doc = win.document;
+  doc?.querySelectorAll<HTMLButtonElement>("[data-tot-analytics-choices-toggle]").forEach((toggle) => {
+    if (toggle.dataset["totAnalyticsChoicesBound"] === "true") return;
+    const controlId = toggle.getAttribute("aria-controls");
+    const control = controlId ? doc.getElementById(controlId) : null;
+    if (!control) return;
+    toggle.dataset["totAnalyticsChoicesBound"] = "true";
+
+    const open = () => {
+      control.hidden = false;
+      toggle.setAttribute("aria-expanded", "true");
+      firstEnabledButton(control)?.focus();
+    };
+    const close = (returnFocus: boolean) => {
+      control.hidden = true;
+      toggle.setAttribute("aria-expanded", "false");
+      if (returnFocus) toggle.focus();
+    };
+
+    toggle.addEventListener("click", () => (control.hidden ? open() : close(false)));
+    control.addEventListener("click", (event) => {
+      const target = event.target;
+      if (target instanceof Element && target.closest("[data-tot-analytics-consent-close]")) close(true);
+    });
+    control.addEventListener("keydown", (event) => {
+      if (event.key !== "Escape" || control.hidden) return;
+      event.preventDefault();
+      close(true);
+    });
+  });
+}
+
 /** Bind the renderer-owned control once; safe when a document contains no analytics plan. */
 export function bootViewerAnalyticsConsentControl(
   win: ViewerConsentWindow,
@@ -816,8 +859,11 @@ export function bootViewerAnalyticsConsentControl(
       const decision = button?.dataset["totAnalyticsConsentDecision"];
       if (decision !== "granted" && decision !== "denied") return;
       renderControlState(root, setViewerAnalyticsConsent(win, decision, now()));
+      // The pressed button is now disabled; keep keyboard focus inside the control.
+      if (button?.disabled) firstEnabledButton(root)?.focus();
     });
   });
+  bindViewerAnalyticsChoicesToggles(win);
 
   const storageBoundGlobal = "__TOT_VIEWER_ANALYTICS_CONSENT_STORAGE_BOUND__";
   if (win.addEventListener && win[storageBoundGlobal] !== true) {

package/packages/public-runtime/src/integration/render-phases.ts

@@ -177,6 +177,7 @@ export function renderIntegrationPhases(
   const bodyDeferred =
     phaseBoundary("document.deferred") +
     `<div data-tot-integration-deferred hidden></div>` +
+    viewerAnalyticsChoicesLink(plan) +
     lifecycleHostScript();
 
   return { head, bodyStart, bodyDeferred };
@@ -234,20 +235,37 @@ function inlineScript(source: string, nonce: string): string {
 
 /** Renderer-owned, provider-neutral viewer control: identical in both document mounts. */
 function viewerAnalyticsConsentStyle(nonce: string): string {
-  const style = `.tot-analytics-consent{position:fixed;z-index:900;right:1rem;bottom:1rem;display:flex;max-width:min(30rem,calc(100vw - 2rem));align-items:center;gap:.65rem;padding:.7rem .8rem;border:1px solid var(--color-border,#cbd5e1);border-radius:.75rem;background:var(--color-bg,#fff);color:var(--color-text,#111827);box-shadow:0 8px 30px rgba(15,23,42,.18);font:500 .75rem/1.25 system-ui,sans-serif}.tot-analytics-consent__copy{display:grid;gap:.15rem;min-width:8rem}.tot-analytics-consent__detail{color:var(--color-muted,#475569);font-size:.68rem}.tot-analytics-consent__actions{display:flex;gap:.4rem}.tot-analytics-consent button{border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;padding:.4rem .65rem;font:inherit;cursor:pointer}.tot-analytics-consent button:disabled{cursor:default;opacity:.45}@media(max-width:34rem){.tot-analytics-consent{left:1rem;right:1rem;align-items:flex-start;flex-direction:column}.tot-analytics-consent__actions{width:100%}.tot-analytics-consent button{flex:1}}.tot-analytics-consent[hidden]{display:none}`;
+  const style = `.tot-analytics-consent{position:fixed;z-index:900;right:1rem;bottom:1rem;display:flex;max-width:min(30rem,calc(100vw - 2rem));align-items:center;gap:.65rem;padding:.7rem .8rem;border:1px solid var(--color-border,#cbd5e1);border-radius:.75rem;background:var(--color-bg,#fff);color:var(--color-text,#111827);box-shadow:0 8px 30px rgba(15,23,42,.18);font:500 .75rem/1.25 system-ui,sans-serif}.tot-analytics-consent__copy{display:grid;gap:.15rem;min-width:8rem}.tot-analytics-consent__detail{color:var(--color-muted,#475569);font-size:.68rem}.tot-analytics-consent__actions{display:flex;gap:.4rem}.tot-analytics-consent button{border:1px solid currentColor;border-radius:999px;background:transparent;color:inherit;padding:.4rem .65rem;font:inherit;cursor:pointer}.tot-analytics-consent button:disabled{cursor:default;opacity:.45}@media(max-width:34rem){.tot-analytics-consent{left:1rem;right:1rem;align-items:flex-start;flex-direction:column}.tot-analytics-consent__actions{width:100%}.tot-analytics-consent button{flex:1}}.tot-analytics-consent[hidden]{display:none}.tot-analytics-choices{display:flex;justify-content:center;padding:.75rem 1rem;background:var(--color-bg,#fff)}.tot-analytics-choices__toggle{border:0;background:none;padding:.25rem;color:var(--color-muted,#475569);font:500 .75rem/1.25 system-ui,sans-serif;text-decoration:underline;cursor:pointer}`;
   return `<style${nonce ? ` nonce="${nonce}"` : ""}>${style}</style>`;
 }
 
+/** The id the persistent "Analytics choices" toggle names in `aria-controls`. */
+const VIEWER_ANALYTICS_CONSENT_CONTROL_ID = "tot-analytics-consent";
+
 function viewerAnalyticsConsentControl(): string {
-  return `<aside class="tot-analytics-consent" data-tot-analytics-consent-control aria-label="Analytics privacy settings" hidden>` +
+  return `<aside id="${VIEWER_ANALYTICS_CONSENT_CONTROL_ID}" class="tot-analytics-consent" data-tot-analytics-consent-control aria-label="Analytics privacy settings" hidden>` +
     `<span class="tot-analytics-consent__copy"><strong data-tot-analytics-consent-status aria-live="polite">Analytics off</strong>` +
-    `<span class="tot-analytics-consent__detail">Choose whether anonymous analytics may run.</span></span>` +
+    `<span class="tot-analytics-consent__detail">Choose whether analytics may run on this site.</span></span>` +
     `<span class="tot-analytics-consent__actions">` +
     `<button type="button" data-tot-analytics-consent-decision="granted" aria-pressed="false" disabled>Allow</button>` +
     `<button type="button" data-tot-analytics-consent-decision="denied" aria-pressed="true" disabled>Decline</button>` +
+    `<button type="button" data-tot-analytics-consent-close>Close</button>` +
     `</span></aside>`;
 }
 
+/**
+ * The persistent, platform-owned way to reach the control: a disclosure button placed
+ * after the tenant's own footer, on every page whose plan asks for analytics consent.
+ * The lifecycle host binds it (`bootViewerAnalyticsConsentControl`); no inline handler.
+ */
+function viewerAnalyticsChoicesLink(plan: EffectivePlan): string {
+  if (!plan.consentNeeds.includes("analytics")) return "";
+  return `<div class="tot-analytics-choices">` +
+    `<button type="button" class="tot-analytics-choices__toggle" data-tot-analytics-choices-toggle ` +
+    `aria-controls="${VIEWER_ANALYTICS_CONSENT_CONTROL_ID}" aria-expanded="false">Analytics choices</button>` +
+    `</div>`;
+}
+
 /**
  * Replace every {@link INTEGRATION_NONCE_PLACEHOLDER} in `text` (an HTML body or a
  * CSP header value) with one fresh per-response `nonce`. Idempotent on text with no