@syntrologie/runtime-sdk 2.14.0 → 2.16.0

package/dist/{chunk-JCDCANR7.js → chunk-NVV7IWJC.js}

@@ -1,9 +1,14 @@
+import {
+  ThemeProvider,
+  blue,
+  useTheme
+} from "./chunk-2IQ2PTLJ.js";
 import {
   __privateAdd,
   __privateGet,
   __privateSet,
   __publicField
-} from "./chunk-YLLWLUQX.js";
+} from "./chunk-JMHRHAEL.js";
 
 // ../adaptives/adaptive-content/dist/reconciliation-guard.js
 function guardAgainstReconciliation(container, anchor, reinsertFn, opts) {
@@ -91,13 +96,13 @@ var ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "rect",
   "g"
 ]);
-function sanitizeHtml(html) {
+function sanitizeHtml(html2) {
   var _a2;
   const hasNative = typeof window.Sanitizer === "function";
   if (hasNative) {
     try {
       const s = new window.Sanitizer({});
-      const frag = s.sanitizeToFragment(html);
+      const frag = s.sanitizeToFragment(html2);
       const div = document.createElement("div");
       div.append(frag);
       return div.innerHTML;
@@ -105,14 +110,14 @@ function sanitizeHtml(html) {
     }
   }
   const tpl = document.createElement("template");
-  tpl.innerHTML = html;
+  tpl.innerHTML = html2;
   const root = tpl.content;
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
   const toRemove = [];
   while (walker.nextNode()) {
     const el = walker.currentNode;
-    const tag2 = el.tagName.toLowerCase();
-    if (!ALLOWED_TAGS.has(tag2)) {
+    const tag = el.tagName.toLowerCase();
+    if (!ALLOWED_TAGS.has(tag)) {
       toRemove.push(el);
       continue;
     }
@@ -256,6 +261,22 @@ var executeInsertHtml = async (action, context) => {
     }
   };
 };
+function findTextTarget(el) {
+  var _a2, _b;
+  if (el.children.length === 0)
+    return el;
+  const textChildren = Array.from(el.children).filter((child) => {
+    var _a3;
+    return (_a3 = child.textContent) == null ? void 0 : _a3.trim();
+  });
+  if (textChildren.length === 1) {
+    const child = textChildren[0];
+    if (((_a2 = child.textContent) == null ? void 0 : _a2.trim()) === ((_b = el.textContent) == null ? void 0 : _b.trim())) {
+      return findTextTarget(child);
+    }
+  }
+  return el;
+}
 var executeSetText = async (action, context) => {
   var _a2;
   let anchorEl = context.resolveAnchor(action.anchorId);
@@ -267,8 +288,9 @@ var executeSetText = async (action, context) => {
     return { cleanup: () => {
     } };
   }
-  const originalText = (_a2 = anchorEl.textContent) != null ? _a2 : "";
-  anchorEl.textContent = action.text;
+  const textTarget = findTextTarget(anchorEl);
+  const originalText = (_a2 = textTarget.textContent) != null ? _a2 : "";
+  textTarget.textContent = action.text;
   context.publishEvent("action.applied", {
     id: context.generateId(),
     kind: "content:setText",
@@ -278,11 +300,11 @@ var executeSetText = async (action, context) => {
     cleanup: () => {
       if (!anchorEl.isConnected)
         return;
-      anchorEl.textContent = originalText;
+      textTarget.textContent = originalText;
     },
     updateFn: (changes) => {
       if ("text" in changes && typeof changes.text === "string") {
-        anchorEl.textContent = changes.text;
+        textTarget.textContent = changes.text;
       }
     }
   };
@@ -1150,392 +1172,6 @@ var executeTour = async (action, context) => {
   return { cleanup };
 };
 
-// ../design-system/src/tokens/colors.ts
-var base = {
-  white: "#ffffff",
-  black: "#000000"
-};
-var brand = {
-  0: "#2c0b0a",
-  1: "#5b1715",
-  2: "#89221f",
-  3: "#b72e2a",
-  4: "#d44844",
-  5: "#dd6d69",
-  6: "#e5918f",
-  7: "#eeb6b4",
-  8: "#f6dada",
-  9: "#faebea"
-};
-var slateGrey = {
-  0: "#07080a",
-  1: "#0f1318",
-  2: "#0e1114",
-  3: "#1c222a",
-  4: "#2b333f",
-  5: "#394454",
-  6: "#475569",
-  7: "#677384",
-  8: "#87919f",
-  9: "#a8afba",
-  10: "#cbd0d7",
-  11: "#e8eaee",
-  12: "#f6f7f9"
-};
-var green = {
-  0: "#07230a",
-  1: "#0e4514",
-  2: "#16681e",
-  3: "#1d8a28",
-  4: "#24ad32",
-  5: "#4fbd5a",
-  6: "#7acd82",
-  7: "#a5deab",
-  8: "#d0eed3",
-  9: "#e5f6e7"
-};
-var yellow = {
-  0: "#301f09",
-  1: "#5f3e12",
-  2: "#8f5e1b",
-  3: "#be7d24",
-  4: "#ee9c2d",
-  5: "#f1b057",
-  6: "#f5c481",
-  7: "#f8d7ab",
-  8: "#fcebd5",
-  9: "#fdf5ea"
-};
-var red = {
-  0: "#330707",
-  1: "#660f0e",
-  2: "#991616",
-  3: "#cc1e1d",
-  4: "#ff2524",
-  5: "#ff5150",
-  6: "#ff7c7c",
-  7: "#ffa8a7",
-  8: "#ffd3d3",
-  9: "#ffe9e9"
-};
-var blue = {
-  0: "#051533",
-  1: "#0a2a66",
-  2: "#0f3f98",
-  3: "#1454cb",
-  4: "#1969fe",
-  5: "#4787fe",
-  6: "#75a5fe",
-  7: "#a3c3ff",
-  8: "#d1e1ff",
-  9: "#e8f0ff"
-};
-var orange = {
-  0: "#662500",
-  1: "#993d00",
-  2: "#cc5800",
-  3: "#ff7700",
-  4: "#fea85d",
-  5: "#fec58f",
-  6: "#ffd6ae",
-  7: "#fee6cd",
-  8: "#fff1e1",
-  9: "#fff8f0"
-};
-var purple = {
-  0: "#151229",
-  1: "#2a2452",
-  2: "#40357c",
-  3: "#5547a5",
-  4: "#6a59ce",
-  5: "#887ad8",
-  6: "#a69be2",
-  7: "#c3bdeb",
-  8: "#e1def5",
-  9: "#f0eefa"
-};
-var pink = {
-  0: "#37091f",
-  1: "#69123c",
-  2: "#9b1c58",
-  3: "#cd2575",
-  4: "#ff2e92",
-  5: "#ff58a8",
-  6: "#ff82be",
-  7: "#ffabd3",
-  8: "#ffd5e9",
-  9: "#ffeaf4"
-};
-var text = {
-  primary: slateGrey[10],
-  secondary: slateGrey[9],
-  tertiary: slateGrey[8]
-};
-var background = {
-  primary: slateGrey[2],
-  secondary: slateGrey[0]
-};
-var border = {
-  primary: slateGrey[4],
-  secondary: slateGrey[3]
-};
-var button = {
-  primary: {
-    text: base.white,
-    icon: base.white,
-    border: brand[3],
-    backgroundDefault: brand[3],
-    backgroundHover: brand[2]
-  },
-  neutral: {
-    text: slateGrey[10],
-    textHover: base.white,
-    icon: slateGrey[10],
-    iconHover: base.white,
-    border: slateGrey[4],
-    background: slateGrey[2]
-  },
-  link: {
-    text: base.white,
-    icon: base.white,
-    hover: brand[5]
-  },
-  error: {
-    text: red[5],
-    hover: red[6]
-  },
-  success: {
-    text: green[5],
-    hover: green[6]
-  }
-};
-var badge = {
-  slateGrey: {
-    content: slateGrey[10],
-    pillOutline: slateGrey[10],
-    borderPrimary: slateGrey[5],
-    borderSecondary: slateGrey[5],
-    background: slateGrey[3]
-  },
-  brand: {
-    content: brand[9],
-    pillOutline: brand[9],
-    borderPrimary: brand[6],
-    borderSecondary: brand[6],
-    background: brand[0]
-  },
-  red: {
-    content: red[8],
-    pillOutline: red[4],
-    borderPrimary: red[2],
-    borderSecondary: red[2],
-    background: red[0]
-  },
-  yellow: {
-    content: yellow[8],
-    pillOutline: yellow[4],
-    borderPrimary: yellow[2],
-    borderSecondary: yellow[2],
-    background: yellow[0]
-  },
-  green: {
-    content: green[8],
-    pillOutline: green[4],
-    borderPrimary: green[2],
-    borderSecondary: green[2],
-    background: green[0]
-  },
-  purple: {
-    content: purple[8],
-    pillOutline: purple[4],
-    borderPrimary: purple[2],
-    borderSecondary: purple[2],
-    background: purple[0]
-  },
-  blue: {
-    content: blue[8],
-    pillOutline: blue[4],
-    borderPrimary: blue[2],
-    borderSecondary: blue[2],
-    background: blue[0]
-  },
-  orange: {
-    content: orange[8],
-    pillOutline: orange[4],
-    borderPrimary: orange[2],
-    borderSecondary: orange[2],
-    background: orange[0]
-  },
-  pink: {
-    content: pink[8],
-    pillOutline: pink[4],
-    borderPrimary: pink[2],
-    borderSecondary: pink[2],
-    background: pink[0]
-  }
-};
-var badgeBanner = {
-  green: {
-    content: green[8],
-    border: green[2],
-    background: green[0]
-  },
-  yellow: {
-    content: yellow[8],
-    border: yellow[2],
-    background: yellow[0]
-  },
-  red: {
-    content: red[8],
-    border: red[2],
-    background: red[0]
-  }
-};
-var alert = {
-  green: {
-    content: green[1],
-    background: green[9]
-  },
-  yellow: {
-    content: yellow[1],
-    background: yellow[9]
-  },
-  red: {
-    content: red[1],
-    background: red[9]
-  }
-};
-var tag = {
-  content: slateGrey[10],
-  border: slateGrey[4],
-  background: slateGrey[3]
-};
-var menu = {
-  backgroundDefault: slateGrey[2],
-  backgroundHover: slateGrey[1],
-  selected: slateGrey[3]
-};
-var inputDropdown = {
-  background: slateGrey[2],
-  icon: slateGrey[10],
-  borderDefault: slateGrey[4],
-  borderSelected: brand[3],
-  textLabel: slateGrey[9],
-  textPlaceholder: slateGrey[8],
-  textHint: slateGrey[8]
-};
-var inputField = {
-  backgroundDefault: slateGrey[2],
-  backgroundDisabled: slateGrey[0],
-  textLabel: slateGrey[9],
-  textPlaceholder: slateGrey[8],
-  textHint: slateGrey[8],
-  textError: red[5],
-  iconDefault: slateGrey[9],
-  iconPlaceholder: slateGrey[10],
-  iconError: red[5],
-  borderDefault: slateGrey[4],
-  borderSelected: brand[3],
-  borderError: red[5]
-};
-var toggle = {
-  handleDefault: base.white,
-  handleDisabled: slateGrey[10],
-  off: {
-    backgroundDefault: slateGrey[4],
-    backgroundHover: slateGrey[5],
-    backgroundDisabled: slateGrey[4]
-  },
-  on: {
-    backgroundDefault: green[3],
-    backgroundHover: green[2],
-    backgroundDisabled: slateGrey[4]
-  }
-};
-var checkbox = {
-  off: {
-    backgroundDefault: "#00000000",
-    backgroundHover: slateGrey[5],
-    backgroundDisabled: slateGrey[2],
-    border: slateGrey[6]
-  },
-  on: {
-    backgroundDefault: green[0],
-    backgroundHover: green[1],
-    backgroundDisabled: slateGrey[2],
-    border: green[3]
-  }
-};
-var avatar = {
-  content: slateGrey[10],
-  background: slateGrey[4]
-};
-var progressBarSlider = {
-  background: slateGrey[4],
-  active: green[3]
-};
-var card = {
-  background: slateGrey[1],
-  content: slateGrey[9],
-  border: slateGrey[4]
-};
-var sidebar = {
-  backgroundDefault: slateGrey[1],
-  backgroundHover: slateGrey[3],
-  backgroundActive: slateGrey[4],
-  border: slateGrey[4],
-  contentPrimary: slateGrey[10],
-  contentSecondary: slateGrey[9],
-  contentTertiary: slateGrey[8]
-};
-var modal = {
-  background: slateGrey[1],
-  content: slateGrey[9],
-  border: slateGrey[4]
-};
-var tab = {
-  activeBackground: slateGrey[3],
-  activeContent: brand[5],
-  inactiveContent: slateGrey[9],
-  border: slateGrey[4]
-};
-var table = {
-  header: {
-    textDefault: slateGrey[9],
-    textHover: slateGrey[8],
-    backgroundDefault: slateGrey[1]
-  },
-  border: slateGrey[4],
-  cell: {
-    textPrimary: slateGrey[10],
-    textSecondary: slateGrey[9],
-    backgroundDefault: slateGrey[2],
-    backgroundHover: slateGrey[1]
-  }
-};
-var breadcrumbs = {
-  textPrimaryDefault: slateGrey[10],
-  textPrimaryHover: slateGrey[10],
-  textSecondaryDefault: slateGrey[8],
-  textSecondaryHover: slateGrey[9],
-  iconPrimary: slateGrey[10],
-  iconSecondary: slateGrey[8]
-};
-var loadingIndicator = {
-  background: green[1],
-  active: green[5]
-};
-var datePicker = {
-  textDefault: slateGrey[10],
-  textSelected: base.white,
-  textDisabled: slateGrey[7],
-  backgroundDefault: slateGrey[2],
-  backgroundMiddle: slateGrey[3],
-  backgroundSelected: brand[3],
-  border: slateGrey[4]
-};
-var scroll = slateGrey[9];
-
 // ../adaptives/adaptive-overlays/dist/highlight.js
 var _a;
 var supportsPathClip = typeof CSS !== "undefined" && ((_a = CSS.supports) == null ? void 0 : _a.call(CSS, "clip-path", "path('M0 0 H1 V1 Z')"));
@@ -1727,13 +1363,13 @@ var ALLOWED_TAGS2 = /* @__PURE__ */ new Set([
   "rect",
   "g"
 ]);
-function sanitizeHtml2(html) {
+function sanitizeHtml2(html2) {
   var _a2;
   const hasNative = typeof window.Sanitizer === "function";
   if (hasNative) {
     try {
       const s = new window.Sanitizer({});
-      const frag = s.sanitizeToFragment(html);
+      const frag = s.sanitizeToFragment(html2);
       const div = document.createElement("div");
       div.append(frag);
       return div.innerHTML;
@@ -1741,14 +1377,14 @@ function sanitizeHtml2(html) {
     }
   }
   const tpl = document.createElement("template");
-  tpl.innerHTML = html;
+  tpl.innerHTML = html2;
   const root = tpl.content;
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
   const toRemove = [];
   while (walker.nextNode()) {
     const el = walker.currentNode;
-    const tag2 = el.tagName.toLowerCase();
-    if (!ALLOWED_TAGS2.has(tag2)) {
+    const tag = el.tagName.toLowerCase();
+    if (!ALLOWED_TAGS2.has(tag)) {
       toRemove.push(el);
       continue;
     }
@@ -1793,12 +1429,12 @@ var executeModal = async (action, context) => {
     transition: opacity 200ms ease-out;
   `;
   context.overlayRoot.appendChild(scrimEl);
-  const modal2 = document.createElement("div");
-  modal2.className = `syntro-modal syntro-modal-${size}`;
-  modal2.setAttribute("role", "dialog");
-  modal2.setAttribute("aria-modal", "true");
+  const modal = document.createElement("div");
+  modal.className = `syntro-modal syntro-modal-${size}`;
+  modal.setAttribute("role", "dialog");
+  modal.setAttribute("aria-modal", "true");
   const sizeMap = { sm: "360px", md: "480px", lg: "640px" };
-  modal2.style.cssText = `
+  modal.style.cssText = `
     position: fixed;
     top: 50%;
     left: 50%;
@@ -1813,13 +1449,13 @@ var executeModal = async (action, context) => {
     transition: opacity 200ms ease-out, transform 200ms ease-out;
     padding: 24px;
   `;
-  let html = "";
+  let html2 = "";
   if (content.title) {
-    html += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: ${V.title};">${sanitizeHtml2(content.title)}</h2>`;
+    html2 += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: ${V.title};">${sanitizeHtml2(content.title)}</h2>`;
   }
-  html += `<div class="syntro-modal-body" style="color: ${V.text}; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
+  html2 += `<div class="syntro-modal-body" style="color: ${V.text}; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
   if ((dismiss == null ? void 0 : dismiss.closeButton) !== false) {
-    html += `
+    html2 += `
       <button class="syntro-modal-close" data-syntro-action="dismiss" style="
         position: absolute;
         top: 16px;
@@ -1838,10 +1474,10 @@ var executeModal = async (action, context) => {
     `;
   }
   if (ctaButtons && ctaButtons.length > 0) {
-    html += `<div class="syntro-modal-actions" style="display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end;">`;
+    html2 += `<div class="syntro-modal-actions" style="display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end;">`;
     for (const btn of ctaButtons) {
       const isPrimary = (_b = btn.primary) != null ? _b : false;
-      html += `
+      html2 += `
         <button
           class="syntro-modal-btn ${isPrimary ? "syntro-modal-btn-primary" : ""}"
           data-syntro-action="${sanitizeHtml2(btn.actionId)}"
@@ -1859,12 +1495,12 @@ var executeModal = async (action, context) => {
         </button>
       `;
     }
-    html += `</div>`;
+    html2 += `</div>`;
   }
-  modal2.innerHTML = html;
-  context.overlayRoot.appendChild(modal2);
+  modal.innerHTML = html2;
+  context.overlayRoot.appendChild(modal);
   let actionClicked = null;
-  const actionBtns = modal2.querySelectorAll("[data-syntro-action]");
+  const actionBtns = modal.querySelectorAll("[data-syntro-action]");
   const actionHandler = (e) => {
     const btn = e.currentTarget;
     const actionId = btn.getAttribute("data-syntro-action");
@@ -1904,14 +1540,14 @@ var executeModal = async (action, context) => {
       handle.destroy();
     }, dismiss.timeoutMs);
   }
-  const focusableEls = modal2.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+  const focusableEls = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
   if (focusableEls.length > 0) {
     requestAnimationFrame(() => focusableEls[0].focus());
   }
   requestAnimationFrame(() => {
     scrimEl.style.opacity = "1";
-    modal2.style.opacity = "1";
-    modal2.style.transform = "translate(-50%, -50%) scale(1)";
+    modal.style.opacity = "1";
+    modal.style.transform = "translate(-50%, -50%) scale(1)";
   });
   context.publishEvent("action.applied", {
     id: context.generateId(),
@@ -1928,14 +1564,14 @@ var executeModal = async (action, context) => {
       scrimEl.removeEventListener("click", onScrimClick);
       actionBtns.forEach((btn) => btn.removeEventListener("click", actionHandler));
       originalInert.forEach((el) => el.removeAttribute("inert"));
-      modal2.style.pointerEvents = "none";
+      modal.style.pointerEvents = "none";
       scrimEl.style.pointerEvents = "none";
-      modal2.style.opacity = "0";
-      modal2.style.transform = "translate(-50%, -50%) scale(0.95)";
+      modal.style.opacity = "0";
+      modal.style.transform = "translate(-50%, -50%) scale(0.95)";
       scrimEl.style.opacity = "0";
       setTimeout(() => {
         try {
-          modal2.remove();
+          modal.remove();
         } catch {
         }
         try {
@@ -2163,7 +1799,7 @@ function showTooltip(anchorEl, overlayRoot, opts) {
       };
     }
     if (opts.trigger === "click") {
-      const toggle2 = () => {
+      const toggle = () => {
         const isVisible = div.style.visibility === "visible";
         if (isVisible) {
           handle.destroy();
@@ -2175,8 +1811,8 @@ function showTooltip(anchorEl, overlayRoot, opts) {
       div.style.visibility = "hidden";
       div.style.opacity = "0";
       div.style.transition = "opacity 200ms ease, visibility 200ms";
-      anchorEl.addEventListener("click", toggle2);
-      return () => anchorEl.removeEventListener("click", toggle2);
+      anchorEl.addEventListener("click", toggle);
+      return () => anchorEl.removeEventListener("click", toggle);
     }
     div.style.opacity = "0";
     div.style.transition = "opacity 200ms ease";
@@ -2503,6 +2139,543 @@ var WorkflowMountableWidget = {
   }
 };
 
+// ../adaptives/adaptive-overlays/dist/WorkflowWidgetLit.js
+import { html, LitElement, nothing } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+var __classPrivateFieldSet = function(receiver, state, value, kind, f) {
+  if (kind === "m") throw new TypeError("Private method is not writable");
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+  return kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value), value;
+};
+var __classPrivateFieldGet = function(receiver, state, kind, f) {
+  if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+  if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+  return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _WorkflowTrackerLit_unsubTourStarted;
+var _WorkflowTrackerLit_unsubTourEvents;
+var _WorkflowTrackerLit_toastCleanups;
+var _WorkflowTrackerLit_notified;
+var _WorkflowTrackerLit_completedMap;
+var _WorkflowTrackerLit_persistInitialized;
+var _WorkflowTrackerLit_tourWorkflows;
+var TOKEN_BLUE_4 = "#1969fe";
+var TOKEN_GREEN_4 = "#24ad32";
+var TOKEN_SLATE_2 = "#0e1114";
+var TOKEN_SLATE_7 = "#677384";
+var TOKEN_SLATE_9 = "#a8afba";
+var TOKEN_SLATE_12 = "#f6f7f9";
+var TOKEN_WHITE = "#ffffff";
+function showWorkflowToast2(notification) {
+  const toast = document.createElement("div");
+  toast.setAttribute("data-testid", "workflow-toast");
+  Object.assign(toast.style, {
+    position: "fixed",
+    bottom: "16px",
+    right: "16px",
+    zIndex: "2147483646",
+    padding: "12px 16px",
+    borderRadius: "8px",
+    backgroundColor: `var(--se-color-bg-surface, ${TOKEN_WHITE})`,
+    color: `var(--se-color-text-primary, ${TOKEN_SLATE_2})`,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    maxWidth: "320px",
+    fontFamily: "var(--se-font-family, system-ui, sans-serif)",
+    fontSize: "14px",
+    lineHeight: "1.4",
+    transition: "opacity 0.3s ease"
+  });
+  const titleEl = document.createElement("div");
+  titleEl.style.fontWeight = "600";
+  titleEl.textContent = notification.title;
+  toast.appendChild(titleEl);
+  if (notification.body) {
+    const bodyEl = document.createElement("div");
+    bodyEl.style.marginTop = "4px";
+    bodyEl.style.fontSize = "13px";
+    bodyEl.style.color = "var(--se-color-text-secondary, #666)";
+    bodyEl.textContent = notification.body;
+    toast.appendChild(bodyEl);
+  }
+  document.body.appendChild(toast);
+  let removeTimer;
+  const fadeTimer = setTimeout(() => {
+    toast.style.opacity = "0";
+    removeTimer = setTimeout(() => {
+      toast.remove();
+    }, 300);
+  }, 4e3);
+  return () => {
+    clearTimeout(fadeTimer);
+    clearTimeout(removeTimer);
+    toast.remove();
+  };
+}
+function extractWorkflowsFromActive2(activeActions) {
+  const workflows = /* @__PURE__ */ new Map();
+  for (const entry of activeActions) {
+    const action = entry.action;
+    if (action.kind === "overlays:tour" && action.workflow && action.tourId) {
+      const meta = action.workflow;
+      const rawSteps = action.steps || [];
+      const steps = rawSteps.map((s) => {
+        var _a2;
+        return {
+          id: s.id,
+          title: ((_a2 = meta.stepTitles) == null ? void 0 : _a2[s.id]) || s.id
+        };
+      });
+      workflows.set(action.tourId, { meta, steps });
+    }
+  }
+  return workflows;
+}
+var TAG_NAME = "syntro-workflow-tracker";
+var WorkflowTrackerLit = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.runtimeRef = null;
+    this._workflowEntries = [];
+    this._actionVersion = 0;
+    _WorkflowTrackerLit_unsubTourStarted.set(this, null);
+    _WorkflowTrackerLit_unsubTourEvents.set(this, null);
+    _WorkflowTrackerLit_toastCleanups.set(this, []);
+    _WorkflowTrackerLit_notified.set(this, /* @__PURE__ */ new Set());
+    _WorkflowTrackerLit_completedMap.set(this, {});
+    _WorkflowTrackerLit_persistInitialized.set(this, false);
+    _WorkflowTrackerLit_tourWorkflows.set(this, /* @__PURE__ */ new Map());
+  }
+  // ── Light DOM ─────────────────────────────────────────────────────────────
+  /**
+   * Render into the element itself (light DOM) so host-page CSS variables
+   * flow through without a nested shadow boundary.
+   */
+  createRenderRoot() {
+    return this;
+  }
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  get _stateNs() {
+    var _a2, _b, _c, _d, _e;
+    return (_e = (_d = (_c = (_b = (_a2 = this.runtimeRef) == null ? void 0 : _a2.state) == null ? void 0 : _b.user) == null ? void 0 : _c.ns) == null ? void 0 : _d.call(_c, "workflows")) != null ? _e : null;
+  }
+  /**
+   * Re-scan active actions and update _tourWorkflows + entries.
+   * Called initially and whenever _actionVersion bumps.
+   */
+  _rescanWorkflows() {
+    var _a2, _b, _c, _d, _e, _f, _g, _h;
+    const active = (_d = (_c = (_b = (_a2 = this.runtimeRef) == null ? void 0 : _a2.actions) == null ? void 0 : _b.getActive) == null ? void 0 : _c.call(_b)) != null ? _d : [];
+    const workflows = extractWorkflowsFromActive2(active);
+    __classPrivateFieldSet(this, _WorkflowTrackerLit_tourWorkflows, workflows, "f");
+    if (workflows.size === 0)
+      return;
+    const stateNs = this._stateNs;
+    const dismissed = (_e = stateNs == null ? void 0 : stateNs.get("dismissed")) != null ? _e : [];
+    const completed = (_f = stateNs == null ? void 0 : stateNs.get("completed")) != null ? _f : {};
+    this._workflowEntries = (() => {
+      const existingIds = new Set(this._workflowEntries.map((e) => e.tourId));
+      const newEntries = [];
+      for (const [tourId, { meta, steps }] of workflows) {
+        if (existingIds.has(tourId))
+          continue;
+        let status = "active";
+        if (dismissed.includes(tourId)) {
+          status = "dismissed";
+        } else if (completed[tourId]) {
+          status = "completed";
+        }
+        newEntries.push({
+          tourId,
+          meta,
+          steps,
+          currentStepId: null,
+          completedSteps: [],
+          status,
+          completedAt: completed[tourId] || void 0
+        });
+      }
+      return newEntries.length > 0 ? [...this._workflowEntries, ...newEntries] : this._workflowEntries;
+    })();
+    for (const [tourId, { meta }] of workflows) {
+      const dismissed2 = (_g = stateNs == null ? void 0 : stateNs.get("dismissed")) != null ? _g : [];
+      const completed2 = (_h = stateNs == null ? void 0 : stateNs.get("completed")) != null ? _h : {};
+      if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").has(tourId) && meta.notification && !dismissed2.includes(tourId) && !completed2[tourId]) {
+        __classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").add(tourId);
+        stateNs == null ? void 0 : stateNs.set("notified", [...__classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f")]);
+        const cleanup = showWorkflowToast2(meta.notification);
+        __classPrivateFieldGet(this, _WorkflowTrackerLit_toastCleanups, "f").push(cleanup);
+      }
+    }
+  }
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback();
+    this._initSubscriptions();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardownSubscriptions();
+    for (const cleanup of __classPrivateFieldGet(this, _WorkflowTrackerLit_toastCleanups, "f")) {
+      cleanup();
+    }
+    __classPrivateFieldSet(this, _WorkflowTrackerLit_toastCleanups, [], "f");
+  }
+  updated(changed) {
+    if (changed.has("runtimeRef")) {
+      this._teardownSubscriptions();
+      this._initSubscriptions();
+    }
+    if (changed.has("_actionVersion")) {
+      this._rescanWorkflows();
+    }
+  }
+  // ── Subscription management ───────────────────────────────────────────────
+  _initSubscriptions() {
+    var _a2, _b, _c, _d;
+    if (!((_b = (_a2 = this.runtimeRef) == null ? void 0 : _a2.events) == null ? void 0 : _b.subscribe))
+      return;
+    if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_persistInitialized, "f") && this._stateNs) {
+      const notified = (_c = this._stateNs.get("notified")) != null ? _c : [];
+      for (const id of notified) {
+        __classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").add(id);
+      }
+      const completed = (_d = this._stateNs.get("completed")) != null ? _d : {};
+      __classPrivateFieldSet(this, _WorkflowTrackerLit_completedMap, { ...completed }, "f");
+      __classPrivateFieldSet(this, _WorkflowTrackerLit_persistInitialized, true, "f");
+    }
+    __classPrivateFieldSet(this, _WorkflowTrackerLit_unsubTourStarted, this.runtimeRef.events.subscribe({ names: ["tour.started", "tour.resumed"] }, () => {
+      this._actionVersion += 1;
+    }), "f");
+    __classPrivateFieldSet(this, _WorkflowTrackerLit_unsubTourEvents, this.runtimeRef.events.subscribe({ patterns: ["^tour\\."] }, (event) => {
+      this._handleTourEvent(event);
+    }), "f");
+    this._rescanWorkflows();
+  }
+  _teardownSubscriptions() {
+    var _a2, _b;
+    (_a2 = __classPrivateFieldGet(this, _WorkflowTrackerLit_unsubTourStarted, "f")) == null ? void 0 : _a2.call(this);
+    __classPrivateFieldSet(this, _WorkflowTrackerLit_unsubTourStarted, null, "f");
+    (_b = __classPrivateFieldGet(this, _WorkflowTrackerLit_unsubTourEvents, "f")) == null ? void 0 : _b.call(this);
+    __classPrivateFieldSet(this, _WorkflowTrackerLit_unsubTourEvents, null, "f");
+  }
+  // ── Event handler ─────────────────────────────────────────────────────────
+  _handleTourEvent(event) {
+    var _a2;
+    const tourId = (_a2 = event.props) == null ? void 0 : _a2.tourId;
+    if (!tourId)
+      return;
+    if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_tourWorkflows, "f").has(tourId) && event.name === "tour.started") {
+      this._actionVersion += 1;
+      return;
+    }
+    if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_tourWorkflows, "f").has(tourId))
+      return;
+    const stateNs = this._stateNs;
+    this._workflowEntries = this._workflowEntries.map((entry) => {
+      var _a3, _b, _c, _d, _e;
+      if (entry.tourId !== tourId)
+        return entry;
+      switch (event.name) {
+        case "tour.started": {
+          const startStepId = ((_a3 = event.props) == null ? void 0 : _a3.startStepId) || ((_b = entry.steps[0]) == null ? void 0 : _b.id) || null;
+          if (!__classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").has(tourId)) {
+            __classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f").add(tourId);
+            stateNs == null ? void 0 : stateNs.set("notified", [...__classPrivateFieldGet(this, _WorkflowTrackerLit_notified, "f")]);
+            const workflow = __classPrivateFieldGet(this, _WorkflowTrackerLit_tourWorkflows, "f").get(tourId);
+            if (workflow == null ? void 0 : workflow.meta.notification) {
+              const cleanup = showWorkflowToast2(workflow.meta.notification);
+              __classPrivateFieldGet(this, _WorkflowTrackerLit_toastCleanups, "f").push(cleanup);
+            }
+          }
+          const activeIds = this._workflowEntries.filter((e) => e.status === "active" || e.tourId === tourId).map((e) => e.tourId);
+          if (!activeIds.includes(tourId)) {
+            activeIds.push(tourId);
+          }
+          stateNs == null ? void 0 : stateNs.set("active", [...new Set(activeIds)]);
+          return {
+            ...entry,
+            status: "active",
+            currentStepId: startStepId,
+            completedSteps: entry.status === "active" ? entry.completedSteps : []
+          };
+        }
+        case "tour.step_started": {
+          const stepId = (_c = event.props) == null ? void 0 : _c.stepId;
+          return {
+            ...entry,
+            currentStepId: stepId || entry.currentStepId
+          };
+        }
+        case "tour.step_changed": {
+          const previousStepId = (_d = event.props) == null ? void 0 : _d.previousStepId;
+          const nextStepId = (_e = event.props) == null ? void 0 : _e.nextStepId;
+          const completedSteps = previousStepId && !entry.completedSteps.includes(previousStepId) ? [...entry.completedSteps, previousStepId] : entry.completedSteps;
+          return {
+            ...entry,
+            currentStepId: nextStepId || entry.currentStepId,
+            completedSteps
+          };
+        }
+        case "tour.completed": {
+          const completedAt = Date.now();
+          __classPrivateFieldGet(this, _WorkflowTrackerLit_completedMap, "f")[tourId] = completedAt;
+          stateNs == null ? void 0 : stateNs.set("completed", { ...__classPrivateFieldGet(this, _WorkflowTrackerLit_completedMap, "f") });
+          return {
+            ...entry,
+            status: "completed",
+            currentStepId: null,
+            completedSteps: entry.steps.map((s) => s.id),
+            completedAt
+          };
+        }
+        case "tour.paused":
+          return entry;
+        default:
+          return entry;
+      }
+    });
+  }
+  // ── User action handlers ──────────────────────────────────────────────────
+  _handleStepClick(tourId, stepId) {
+    var _a2, _b;
+    (_b = (_a2 = this.runtimeRef) == null ? void 0 : _a2.events) == null ? void 0 : _b.publish("workflow:jump_to_step", { tourId, stepId });
+    this.dispatchEvent(new CustomEvent("workflow-step-click", {
+      bubbles: true,
+      detail: { tourId, stepId }
+    }));
+  }
+  _handleDismiss(tourId) {
+    var _a2;
+    this._workflowEntries = this._workflowEntries.map((entry) => entry.tourId === tourId ? { ...entry, status: "dismissed" } : entry);
+    const dismissedIds = this._workflowEntries.filter((e) => e.status === "dismissed").map((e) => e.tourId);
+    (_a2 = this._stateNs) == null ? void 0 : _a2.set("dismissed", dismissedIds);
+    this.dispatchEvent(new CustomEvent("workflow-dismissed", {
+      bubbles: true,
+      detail: { tourId }
+    }));
+  }
+  // ── Render helpers ────────────────────────────────────────────────────────
+  _renderProgressBar(completed, total) {
+    const percent = total > 0 ? Math.round(completed / total * 100) : 0;
+    const trackStyles = {
+      width: "100%",
+      height: "6px",
+      borderRadius: "9999px",
+      background: "rgba(255,255,255,0.08)",
+      overflow: "hidden"
+    };
+    const fillStyles = {
+      height: "100%",
+      borderRadius: "9999px",
+      background: `var(--se-color-primary, ${TOKEN_BLUE_4})`,
+      transition: "width 0.3s ease",
+      width: `${percent}%`
+    };
+    return html`
+      <div style=${styleMap(trackStyles)}>
+        <div
+          role="progressbar"
+          aria-valuenow=${percent}
+          aria-valuemin="0"
+          aria-valuemax="100"
+          style=${styleMap(fillStyles)}
+        ></div>
+      </div>
+    `;
+  }
+  _renderStepItem(step, isCompleted, isCurrent, tourId) {
+    const btnStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      width: "100%",
+      padding: "6px 8px",
+      borderRadius: "4px",
+      border: "none",
+      background: "transparent",
+      cursor: "pointer",
+      textAlign: "left",
+      fontSize: "12px",
+      lineHeight: "1.4",
+      color: isCurrent ? `var(--se-color-text-primary, ${TOKEN_SLATE_12})` : `var(--se-color-text-secondary, ${TOKEN_SLATE_9})`,
+      fontWeight: isCurrent ? "600" : "400"
+    };
+    const indicatorWrapStyles = {
+      flexShrink: "0",
+      width: "16px",
+      textAlign: "center"
+    };
+    const dotStyles = {
+      display: "inline-block",
+      width: "6px",
+      height: "6px",
+      borderRadius: "50%",
+      background: isCurrent ? `var(--se-color-primary, ${TOKEN_BLUE_4})` : "rgba(255,255,255,0.12)"
+    };
+    const checkStyles = {
+      color: `var(--se-color-success, ${TOKEN_GREEN_4})`
+    };
+    const labelStyles = {
+      flex: "1",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    };
+    const indicator = isCompleted ? html`<span role="img" aria-label="completed" style=${styleMap(checkStyles)}>&#10003;</span>` : isCurrent ? html`<span style=${styleMap(dotStyles)}></span>` : html`<span style=${styleMap(dotStyles)}></span>`;
+    return html`
+      <button
+        type="button"
+        data-testid=${`step-${step.id}`}
+        data-current=${isCurrent ? "true" : nothing}
+        data-completed=${isCompleted ? "true" : nothing}
+        aria-current=${isCurrent ? "step" : nothing}
+        style=${styleMap(btnStyles)}
+        @click=${() => this._handleStepClick(tourId, step.id)}
+      >
+        <span style=${styleMap(indicatorWrapStyles)}>${indicator}</span>
+        <span style=${styleMap(labelStyles)}>${step.title}</span>
+      </button>
+    `;
+  }
+  _renderWorkflowCard(workflow) {
+    const completedCount = workflow.completedSteps.length;
+    const totalSteps = workflow.steps.length;
+    const cardStyles = {
+      padding: "12px",
+      borderRadius: "8px",
+      border: "1px solid rgba(255,255,255,0.08)",
+      background: "rgba(255,255,255,0.02)"
+    };
+    const headerStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      marginBottom: "8px"
+    };
+    const titleStyles = {
+      flex: "1",
+      fontSize: "13px",
+      fontWeight: "600",
+      color: `var(--se-color-text-primary, ${TOKEN_SLATE_12})`,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    };
+    const dismissBtnStyles = {
+      flexShrink: "0",
+      padding: "2px 6px",
+      border: "none",
+      borderRadius: "4px",
+      background: "transparent",
+      color: `var(--se-color-text-tertiary, ${TOKEN_SLATE_7})`,
+      fontSize: "12px",
+      cursor: "pointer",
+      lineHeight: "1"
+    };
+    const progressWrapStyles = {
+      marginBottom: "8px"
+    };
+    const progressLabelStyles = {
+      fontSize: "10px",
+      color: `var(--se-color-text-tertiary, ${TOKEN_SLATE_7})`,
+      marginTop: "4px"
+    };
+    const stepsColStyles = {
+      display: "flex",
+      flexDirection: "column"
+    };
+    return html`
+      <div style=${styleMap(cardStyles)}>
+        <!-- Header: icon + title + dismiss -->
+        <div style=${styleMap(headerStyles)}>
+          ${workflow.meta.icon ? html`<span data-testid="workflow-icon" style="flex-shrink:0;font-size:14px">${workflow.meta.icon}</span>` : nothing}
+          <span style=${styleMap(titleStyles)}>${workflow.meta.title}</span>
+          <button
+            type="button"
+            data-testid=${`dismiss-${workflow.tourId}`}
+            style=${styleMap(dismissBtnStyles)}
+            aria-label=${`Dismiss ${workflow.meta.title}`}
+            @click=${() => this._handleDismiss(workflow.tourId)}
+          >&#10005;</button>
+        </div>
+
+        <!-- Progress bar + label -->
+        <div style=${styleMap(progressWrapStyles)}>
+          ${this._renderProgressBar(completedCount, totalSteps)}
+          <div style=${styleMap(progressLabelStyles)}>
+            ${completedCount} of ${totalSteps} steps
+          </div>
+        </div>
+
+        <!-- Step list -->
+        <div style=${styleMap(stepsColStyles)}>
+          ${workflow.steps.map((step) => this._renderStepItem(step, workflow.completedSteps.includes(step.id), workflow.currentStepId === step.id, workflow.tourId))}
+        </div>
+      </div>
+    `;
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  render() {
+    const activeWorkflows = this._workflowEntries.filter((w) => w.status === "active");
+    if (activeWorkflows.length === 0) {
+      const emptyStyles = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "24px 0",
+        fontSize: "12px",
+        color: `var(--se-color-text-tertiary, ${TOKEN_SLATE_7})`
+      };
+      return html`<div style=${styleMap(emptyStyles)}>No active workflows</div>`;
+    }
+    const containerStyles = {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px"
+    };
+    return html`
+      <div style=${styleMap(containerStyles)}>
+        ${activeWorkflows.map((workflow) => this._renderWorkflowCard(workflow))}
+      </div>
+    `;
+  }
+};
+_WorkflowTrackerLit_unsubTourStarted = /* @__PURE__ */ new WeakMap(), _WorkflowTrackerLit_unsubTourEvents = /* @__PURE__ */ new WeakMap(), _WorkflowTrackerLit_toastCleanups = /* @__PURE__ */ new WeakMap(), _WorkflowTrackerLit_notified = /* @__PURE__ */ new WeakMap(), _WorkflowTrackerLit_completedMap = /* @__PURE__ */ new WeakMap(), _WorkflowTrackerLit_persistInitialized = /* @__PURE__ */ new WeakMap(), _WorkflowTrackerLit_tourWorkflows = /* @__PURE__ */ new WeakMap();
+WorkflowTrackerLit.properties = {
+  // Public input: runtime ref injected by MountableWidget
+  runtimeRef: { attribute: false },
+  // Internal reactive state
+  _workflowEntries: { state: true },
+  _actionVersion: { state: true }
+};
+if (typeof window !== "undefined" && !customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, WorkflowTrackerLit);
+}
+var WorkflowWidgetLitMountable = {
+  mount(container, config) {
+    var _a2;
+    const runtime3 = (_a2 = config == null ? void 0 : config.runtime) != null ? _a2 : null;
+    if (typeof window !== "undefined" && !customElements.get(TAG_NAME)) {
+      customElements.define(TAG_NAME, WorkflowTrackerLit);
+    }
+    const el = document.createElement(TAG_NAME);
+    el.runtimeRef = runtime3;
+    container.appendChild(el);
+    return () => {
+      el.remove();
+    };
+  },
+  update(container, config) {
+    var _a2;
+    const el = container.querySelector(TAG_NAME);
+    if (!el)
+      return;
+    const runtime3 = (_a2 = config == null ? void 0 : config.runtime) != null ? _a2 : null;
+    el.runtimeRef = runtime3;
+  }
+};
+
 // ../adaptives/adaptive-overlays/dist/runtime.js
 var executeHighlight = async (action, context) => {
   var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
@@ -2671,10 +2844,10 @@ var executeBadge = async (action, context) => {
     }
   } catch {
   }
-  const badge2 = document.createElement("div");
-  badge2.textContent = action.content;
-  badge2.setAttribute("data-syntro-badge", action.anchorId.selector);
-  Object.assign(badge2.style, {
+  const badge = document.createElement("div");
+  badge.textContent = action.content;
+  badge.setAttribute("data-syntro-badge", action.anchorId.selector);
+  Object.assign(badge.style, {
     position: "absolute",
     padding: "2px 6px",
     fontSize: "12px",
@@ -2692,19 +2865,19 @@ var executeBadge = async (action, context) => {
   if (getComputedStyle(anchorEl).position === "static") {
     anchorEl.style.position = "relative";
   }
-  anchorEl.appendChild(badge2);
+  anchorEl.appendChild(badge);
   switch (position) {
     case "top-left":
-      Object.assign(badge2.style, { top: "-8px", left: "-8px" });
+      Object.assign(badge.style, { top: "-8px", left: "-8px" });
       break;
     case "top-right":
-      Object.assign(badge2.style, { top: "-8px", right: "-8px" });
+      Object.assign(badge.style, { top: "-8px", right: "-8px" });
       break;
     case "bottom-left":
-      Object.assign(badge2.style, { bottom: "-8px", left: "-8px" });
+      Object.assign(badge.style, { bottom: "-8px", left: "-8px" });
       break;
     case "bottom-right":
-      Object.assign(badge2.style, { bottom: "-8px", right: "-8px" });
+      Object.assign(badge.style, { bottom: "-8px", right: "-8px" });
       break;
   }
   context.publishEvent("action.applied", {
@@ -2717,7 +2890,7 @@ var executeBadge = async (action, context) => {
   return {
     cleanup: () => {
       try {
-        badge2.remove();
+        badge.remove();
       } catch {
       }
       if (!anchorEl.isConnected)
@@ -2728,7 +2901,7 @@ var executeBadge = async (action, context) => {
     },
     updateFn: (changes) => {
       if ("content" in changes && typeof changes.content === "string") {
-        badge2.textContent = changes.content;
+        badge.textContent = changes.content;
       }
     }
   };
@@ -2745,16 +2918,16 @@ var executeTooltip = async (action, context) => {
     } };
   }
   const { content } = action;
-  let html = "";
+  let html2 = "";
   if (content.title) {
-    html += `<div class="syntro-tt-title">${sanitizeHtml2(content.title)}</div>`;
+    html2 += `<div class="syntro-tt-title">${sanitizeHtml2(content.title)}</div>`;
   }
-  html += `<div class="syntro-tt-body">${sanitizeHtml2(content.body)}</div>`;
+  html2 += `<div class="syntro-tt-body">${sanitizeHtml2(content.body)}</div>`;
   if (content.ctaButtons && content.ctaButtons.length > 0) {
-    html += `<div class="syntro-tt-actions">`;
+    html2 += `<div class="syntro-tt-actions">`;
     for (const btn of content.ctaButtons) {
       const isPrimary = (_a2 = btn.primary) != null ? _a2 : false;
-      html += `
+      html2 += `
         <button
           class="syntro-tt-btn ${isPrimary ? "syntro-tt-btn-primary" : ""}"
           data-syntro-action="${sanitizeHtml2(btn.actionId)}"
@@ -2763,16 +2936,16 @@ var executeTooltip = async (action, context) => {
         </button>
       `;
     }
-    html += `</div>`;
+    html2 += `</div>`;
   } else if (content.cta) {
-    html += `<div class="syntro-tt-actions">
+    html2 += `<div class="syntro-tt-actions">
       <button class="syntro-tt-btn syntro-tt-btn-primary" data-syntro-action="cta">
         ${sanitizeHtml2(content.cta.label)}
       </button>
     </div>`;
   }
   const handle = showTooltip(anchorEl, context.overlayRoot, {
-    html,
+    html: html2,
     placement: (_b = action.placement) != null ? _b : "top",
     trigger: (_c = action.trigger) != null ? _c : "immediate",
     onAction: (actionId) => {
@@ -2834,6 +3007,15 @@ var runtime2 = {
         icon: "\u{1F4CB}",
         description: "Tracks multi-step workflow progress across tours"
       }
+    },
+    {
+      id: "adaptive-overlays:workflow-tracker-lit",
+      component: WorkflowWidgetLitMountable,
+      metadata: {
+        name: "Workflow Tracker (Lit)",
+        icon: "\u{1F4CB}",
+        description: "Lit web component equivalent of the Workflow Tracker \u2014 decorator-free, light DOM"
+      }
     }
   ]
 };
@@ -2950,7 +3132,9 @@ var NAMESPACE_TO_APP_ID = {
   faq: "adaptive-faq",
   nav: "adaptive-nav",
   gamification: "adaptive-gamification",
-  chatbot: "adaptive-chatbot"
+  chatbot: "adaptive-chatbot",
+  overlays: "adaptive-overlays",
+  content: "adaptive-content"
 };
 function resolveAppId(namespace) {
   var _a2;
@@ -3456,7 +3640,7 @@ function getAntiFlickerSnippet(config = {}) {
 }
 
 // src/version.ts
-var SDK_VERSION = "2.14.0";
+var SDK_VERSION = "2.16.0";
 
 // src/types.ts
 var SDK_SCHEMA_VERSION = "2.0";
@@ -3981,6 +4165,7 @@ function parseElementsChain(chain) {
   if (!chain)
     return void 0;
   return chain.split(";").map((segment) => {
+    var _a2;
     const el = {};
     const colonIdx = segment.indexOf(":");
     const tagPart = colonIdx >= 0 ? segment.slice(0, colonIdx) : segment;
@@ -3992,6 +4177,8 @@ function parseElementsChain(chain) {
     } else {
       el.tag_name = tagPart;
     }
+    if (!/^[a-zA-Z][a-zA-Z0-9-]*$/.test(String((_a2 = el.tag_name) != null ? _a2 : "")))
+      return null;
     const attrRegex = /([\w$]+)="([^"]*)"/g;
     let match;
     while ((match = attrRegex.exec(attrPart)) !== null) {
@@ -4005,7 +4192,7 @@ function parseElementsChain(chain) {
       delete el.text;
     }
     return el;
-  });
+  }).filter((el) => el !== null);
 }
 function resolveInteractiveTag(elements, directTag) {
   if (directTag && INTERACTIVE_TAGS.has(directTag))
@@ -4013,9 +4200,9 @@ function resolveInteractiveTag(elements, directTag) {
   if (!elements)
     return directTag;
   for (const el of elements) {
-    const tag2 = el.tag_name;
-    if (tag2 && INTERACTIVE_TAGS.has(tag2))
-      return tag2;
+    const tag = el.tag_name;
+    if (tag && INTERACTIVE_TAGS.has(tag))
+      return tag;
   }
   return directTag;
 }
@@ -4957,6 +5144,7 @@ function collectEntries(tiles, appRegistry2) {
 function useNotifyWatcher(runtime3, tiles, appRegistry2) {
   const prevStateRef = useRef3(/* @__PURE__ */ new Map());
   useEffect3(() => {
+    var _a2;
     if (!(runtime3 == null ? void 0 : runtime3.events) || !appRegistry2) return;
     const entries = collectEntries(tiles, appRegistry2);
     if (entries.length === 0) return;
@@ -4971,11 +5159,11 @@ function useNotifyWatcher(runtime3, tiles, appRegistry2) {
         }
       }
     }
-    const unsub = runtime3.events.subscribe(() => {
-      var _a2;
+    const reeval = () => {
+      var _a3;
       for (const entry of entries) {
         const result = runtime3.evaluateSync(entry.strategy);
-        const wasVisible = (_a2 = prevStateRef.current.get(entry.id)) != null ? _a2 : false;
+        const wasVisible = (_a3 = prevStateRef.current.get(entry.id)) != null ? _a3 : false;
         prevStateRef.current.set(entry.id, result.value);
         if (!wasVisible && result.value) {
           notifiedStore.set(entry.id, true);
@@ -4984,8 +5172,13 @@ function useNotifyWatcher(runtime3, tiles, appRegistry2) {
           notifiedStore.remove(entry.id);
         }
       }
-    });
-    return unsub;
+    };
+    const unsubEvents = runtime3.events.subscribe(reeval);
+    const unsubMetrics = (_a2 = runtime3.sessionMetrics) == null ? void 0 : _a2.subscribe(reeval);
+    return () => {
+      unsubEvents();
+      unsubMetrics == null ? void 0 : unsubMetrics();
+    };
   }, [runtime3, tiles, appRegistry2]);
 }
 
@@ -5287,480 +5480,41 @@ function TileCard({
               }
             ),
             resolvedSubtitle && /* @__PURE__ */ jsx6(
-              "p",
-              {
-                style: {
-                  fontSize: "0.8rem",
-                  fontWeight: 400,
-                  color: "var(--sc-tile-text-color)",
-                  margin: "0.125rem 0 0",
-                  whiteSpace: "nowrap",
-                  overflow: "hidden",
-                  textOverflow: "ellipsis"
-                },
-                children: resolvedSubtitle
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ jsx6(
-          "div",
-          {
-            style: {
-              padding: "var(--sc-tile-body-padding, 0 0.75rem 0.5rem)",
-              borderTop: "1px solid rgba(255, 255, 255, 0.06)"
-            },
-            children: /* @__PURE__ */ jsx6("div", { style: { paddingTop: "var(--sc-tile-gap, 0.25rem)" }, children: /* @__PURE__ */ jsx6(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
-          }
-        )
-      ]
-    }
-  );
-}
-
-// src/components/ShadowCanvasOverlay.tsx
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
-import { createPortal } from "react-dom";
-
-// src/theme/defaultTheme.ts
-function withAlpha(hex, alpha) {
-  return `${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0")}`;
-}
-var darkTheme = {
-  // Brand colors
-  colorPrimary: brand[3],
-  colorPrimaryHover: brand[4],
-  colorPrimaryMuted: brand[0],
-  // Surface colors (with alpha for glass/vibrancy effects)
-  colorBackground: withAlpha(slateGrey[1], 0.95),
-  colorBackgroundElevated: withAlpha(slateGrey[3], 0.95),
-  colorBackgroundSubtle: withAlpha(slateGrey[0], 0.2),
-  colorSurface: withAlpha(slateGrey[4], 0.8),
-  colorSurfaceHover: withAlpha(slateGrey[5], 0.8),
-  // Text colors
-  colorText: text.primary,
-  colorTextSecondary: text.secondary,
-  colorTextMuted: text.tertiary,
-  colorTextInverse: slateGrey[1],
-  // Border colors
-  colorBorder: border.primary,
-  colorBorderSubtle: border.secondary,
-  // Semantic colors
-  colorSuccess: green[4],
-  colorSuccessMuted: green[0],
-  colorWarning: yellow[4],
-  colorWarningMuted: yellow[0],
-  colorError: red[4],
-  colorErrorMuted: red[0],
-  colorInfo: blue[4],
-  colorInfoMuted: blue[0],
-  // Notification badge
-  colorNotification: brand[4],
-  colorNotificationMuted: withAlpha(brand[4], 0.4),
-  // Glass morphism
-  glassBackground: withAlpha(slateGrey[1], 0.6),
-  glassBackgroundHover: withAlpha(slateGrey[1], 0.7),
-  glassBorder: "rgba(255, 255, 255, 0.08)",
-  glassBlur: "blur(24px)",
-  glassSaturate: "saturate(1.2)",
-  // Typography (SF Pro stack)
-  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
-  fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
-  fontSizeXs: "0.7rem",
-  fontSizeSm: "0.8rem",
-  fontSizeMd: "0.9rem",
-  fontSizeLg: "1rem",
-  fontSizeXl: "1.25rem",
-  fontSizeXxl: "1.5rem",
-  fontWeightNormal: "400",
-  fontWeightMedium: "500",
-  fontWeightSemibold: "600",
-  fontWeightBold: "700",
-  lineHeightTight: "1.25",
-  lineHeightNormal: "1.5",
-  lineHeightRelaxed: "1.75",
-  // Spacing
-  spacingXs: "0.25rem",
-  spacingSm: "0.5rem",
-  spacingMd: "0.75rem",
-  spacingLg: "1rem",
-  spacingXl: "1.5rem",
-  // Border radius
-  borderRadiusSm: "6px",
-  borderRadiusMd: "10px",
-  borderRadiusLg: "14px",
-  borderRadiusXl: "20px",
-  borderRadiusFull: "9999px",
-  // Shadows
-  shadowSm: "0 1px 2px rgba(0, 0, 0, 0.2)",
-  shadowMd: "0 2px 12px rgba(0, 0, 0, 0.3)",
-  shadowLg: "0 8px 24px rgba(0, 0, 0, 0.4)",
-  shadowXl: "0 16px 48px rgba(0, 0, 0, 0.5)",
-  // Backdrop effects
-  backdropBlur: "blur(20px)",
-  backdropSaturate: "saturate(180%)",
-  // Animation
-  transitionFast: "0.1s ease",
-  transitionNormal: "0.25s ease",
-  transitionSlow: "0.4s ease"
-};
-var lightTheme = {
-  // Brand colors
-  colorPrimary: brand[3],
-  colorPrimaryHover: brand[2],
-  colorPrimaryMuted: withAlpha(brand[5], 0.1),
-  // Surface colors
-  colorBackground: withAlpha(slateGrey[12], 0.95),
-  colorBackgroundElevated: withAlpha(slateGrey[11], 0.95),
-  colorBackgroundSubtle: withAlpha(slateGrey[0], 0.02),
-  colorSurface: withAlpha(slateGrey[11], 0.6),
-  colorSurfaceHover: withAlpha(slateGrey[10], 0.6),
-  // Text colors
-  colorText: slateGrey[1],
-  colorTextSecondary: slateGrey[6],
-  colorTextMuted: slateGrey[8],
-  colorTextInverse: slateGrey[12],
-  // Border colors
-  colorBorder: withAlpha(slateGrey[0], 0.12),
-  colorBorderSubtle: withAlpha(slateGrey[0], 0.06),
-  // Semantic colors
-  colorSuccess: green[4],
-  colorSuccessMuted: withAlpha(green[4], 0.12),
-  colorWarning: yellow[4],
-  colorWarningMuted: withAlpha(yellow[4], 0.12),
-  colorError: red[4],
-  colorErrorMuted: withAlpha(red[4], 0.12),
-  colorInfo: blue[4],
-  colorInfoMuted: withAlpha(blue[4], 0.12),
-  // Notification badge
-  colorNotification: brand[3],
-  colorNotificationMuted: withAlpha(brand[3], 0.4),
-  // Glass morphism
-  glassBackground: withAlpha(slateGrey[12], 0.7),
-  glassBackgroundHover: withAlpha(slateGrey[12], 0.8),
-  glassBorder: "rgba(0, 0, 0, 0.06)",
-  glassBlur: "blur(24px)",
-  glassSaturate: "saturate(1.2)",
-  // Typography (same as dark)
-  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
-  fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
-  fontSizeXs: "0.7rem",
-  fontSizeSm: "0.8rem",
-  fontSizeMd: "0.9rem",
-  fontSizeLg: "1rem",
-  fontSizeXl: "1.25rem",
-  fontSizeXxl: "1.5rem",
-  fontWeightNormal: "400",
-  fontWeightMedium: "500",
-  fontWeightSemibold: "600",
-  fontWeightBold: "700",
-  lineHeightTight: "1.25",
-  lineHeightNormal: "1.5",
-  lineHeightRelaxed: "1.75",
-  // Spacing (same as dark)
-  spacingXs: "0.25rem",
-  spacingSm: "0.5rem",
-  spacingMd: "0.75rem",
-  spacingLg: "1rem",
-  spacingXl: "1.5rem",
-  // Border radius (same as dark)
-  borderRadiusSm: "6px",
-  borderRadiusMd: "10px",
-  borderRadiusLg: "14px",
-  borderRadiusXl: "20px",
-  borderRadiusFull: "9999px",
-  // Shadows (lighter for light mode)
-  shadowSm: "0 1px 2px rgba(0, 0, 0, 0.08)",
-  shadowMd: "0 2px 12px rgba(0, 0, 0, 0.12)",
-  shadowLg: "0 8px 24px rgba(0, 0, 0, 0.16)",
-  shadowXl: "0 16px 48px rgba(0, 0, 0, 0.2)",
-  // Backdrop effects
-  backdropBlur: "blur(20px)",
-  backdropSaturate: "saturate(180%)",
-  // Animation
-  transitionFast: "0.1s ease",
-  transitionNormal: "0.25s ease",
-  transitionSlow: "0.4s ease"
-};
-function kebabCase(str) {
-  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
-}
-var darkDefaults = {
-  mode: "dark",
-  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
-  colorPrimary: brand[3],
-  colorPrimaryHover: brand[4],
-  borderRadius: "12px",
-  canvas: {
-    position: "right",
-    layout: "overlay",
-    background: withAlpha(slateGrey[1], 0.6),
-    blur: "blur(24px)",
-    border: "none",
-    width: "clamp(380px, 25vw, 520px)",
-    transitionDuration: "300ms",
-    transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
-    transitionFade: "6%"
-  },
-  launcher: {
-    background: button.primary.backgroundDefault,
-    backgroundHover: button.primary.backgroundHover,
-    color: button.primary.icon,
-    size: "56px",
-    shadow: `0 8px 32px ${withAlpha(slateGrey[0], 0.6)}`,
-    borderRadius: "9999px"
-  },
-  tile: {
-    background: withAlpha(slateGrey[1], 0.6),
-    backgroundHover: withAlpha(slateGrey[1], 0.7),
-    border: "1px solid rgba(255, 255, 255, 0.08)",
-    borderRadius: "14px",
-    shadow: "0 2px 12px rgba(0, 0, 0, 0.3)",
-    titleColor: text.primary,
-    textColor: text.secondary,
-    iconBackground: `linear-gradient(135deg, ${brand[3]} 0%, ${brand[3]}cc 100%)`,
-    iconShadow: `0 2px 8px ${brand[3]}40`,
-    headerPadding: "0.375rem 0.75rem",
-    bodyPadding: "0 0.75rem 0.5rem",
-    gap: "0.25rem"
-  },
-  overlay: {
-    background: withAlpha(slateGrey[1], 0.6),
-    textColor: text.primary,
-    titleColor: text.primary,
-    arrowColor: withAlpha(slateGrey[1], 0.6),
-    arrowSize: "8px",
-    border: "none",
-    borderRadius: "0",
-    scrimOpacity: "0",
-    highlightRing: `2px solid ${brand[3]}`
-  },
-  notification: {
-    background: withAlpha(slateGrey[0], 0.95),
-    textColor: text.primary,
-    textSecondaryColor: text.secondary,
-    border: `1px solid ${slateGrey[5]}`,
-    borderRadius: "12px",
-    successColor: green[4],
-    warningColor: yellow[4],
-    errorColor: red[4],
-    iconBackground: withAlpha(brand[3], 0.15),
-    progressGradient: `linear-gradient(90deg, ${brand[3]}, ${brand[4]})`
-  },
-  content: {
-    background: withAlpha(slateGrey[3], 0.8),
-    backgroundHover: withAlpha(slateGrey[5], 0.6),
-    border: `1px solid ${withAlpha(slateGrey[5], 0.5)}`,
-    borderRadius: "8px",
-    textColor: text.primary,
-    textSecondaryColor: text.secondary,
-    itemDivider: "none",
-    itemGap: "6px",
-    itemPadding: "12px 16px",
-    itemFontSize: "15px",
-    bodyPadding: "0 16px 12px 16px",
-    bodyFontSize: "14px",
-    categoryPadding: "8px 4px 4px 4px",
-    categoryGap: "4px",
-    categoryFontSize: "12px",
-    searchBackground: withAlpha(slateGrey[3], 0.8),
-    searchColor: text.primary,
-    chevronColor: "currentColor"
-  }
-};
-var lightDefaults = {
-  mode: "light",
-  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
-  colorPrimary: brand[3],
-  colorPrimaryHover: brand[2],
-  borderRadius: "12px",
-  canvas: {
-    position: "right",
-    layout: "overlay",
-    background: withAlpha(slateGrey[12], 0.7),
-    blur: "blur(24px)",
-    border: "none",
-    width: "clamp(380px, 25vw, 520px)",
-    transitionDuration: "300ms",
-    transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
-    transitionFade: "6%"
-  },
-  launcher: {
-    background: brand[3],
-    backgroundHover: brand[2],
-    color: "#ffffff",
-    size: "56px",
-    shadow: "0 8px 32px rgba(0, 0, 0, 0.15)",
-    borderRadius: "9999px"
-  },
-  tile: {
-    background: withAlpha(slateGrey[12], 0.7),
-    backgroundHover: withAlpha(slateGrey[12], 0.8),
-    border: "1px solid rgba(0, 0, 0, 0.06)",
-    borderRadius: "14px",
-    shadow: "0 2px 12px rgba(0, 0, 0, 0.12)",
-    titleColor: slateGrey[1],
-    textColor: slateGrey[6],
-    iconBackground: `linear-gradient(135deg, ${brand[3]} 0%, ${brand[3]}cc 100%)`,
-    iconShadow: `0 2px 8px ${brand[3]}40`,
-    headerPadding: "0.375rem 0.75rem",
-    bodyPadding: "0 0.75rem 0.5rem",
-    gap: "0.25rem"
-  },
-  overlay: {
-    background: withAlpha(slateGrey[12], 0.7),
-    textColor: slateGrey[1],
-    titleColor: slateGrey[1],
-    arrowColor: withAlpha(slateGrey[12], 0.7),
-    arrowSize: "8px",
-    border: "none",
-    borderRadius: "0",
-    scrimOpacity: "0",
-    highlightRing: `2px solid ${brand[3]}`
-  },
-  notification: {
-    background: withAlpha(slateGrey[12], 0.95),
-    textColor: slateGrey[1],
-    textSecondaryColor: slateGrey[6],
-    border: `1px solid ${withAlpha(slateGrey[0], 0.12)}`,
-    borderRadius: "12px",
-    successColor: green[4],
-    warningColor: yellow[4],
-    errorColor: red[4],
-    iconBackground: withAlpha(brand[3], 0.1),
-    progressGradient: `linear-gradient(90deg, ${brand[3]}, ${brand[2]})`
-  },
-  content: {
-    background: withAlpha(slateGrey[12], 0.8),
-    backgroundHover: withAlpha(slateGrey[11], 0.6),
-    border: `1px solid ${slateGrey[11]}`,
-    borderRadius: "8px",
-    textColor: slateGrey[1],
-    textSecondaryColor: slateGrey[6],
-    itemDivider: "none",
-    itemGap: "6px",
-    itemPadding: "12px 16px",
-    itemFontSize: "15px",
-    bodyPadding: "0 16px 12px 16px",
-    bodyFontSize: "14px",
-    categoryPadding: "8px 4px 4px 4px",
-    categoryGap: "4px",
-    categoryFontSize: "12px",
-    searchBackground: slateGrey[12],
-    searchColor: slateGrey[1],
-    chevronColor: "currentColor"
-  }
-};
-function mergeThemeConfig(customer) {
-  var _a2, _b, _c, _d, _e;
-  const base2 = customer.mode === "light" ? lightDefaults : darkDefaults;
-  return {
-    mode: (_a2 = customer.mode) != null ? _a2 : base2.mode,
-    fontFamily: (_b = customer.fontFamily) != null ? _b : base2.fontFamily,
-    colorPrimary: (_c = customer.colorPrimary) != null ? _c : base2.colorPrimary,
-    colorPrimaryHover: (_d = customer.colorPrimaryHover) != null ? _d : base2.colorPrimaryHover,
-    borderRadius: (_e = customer.borderRadius) != null ? _e : base2.borderRadius,
-    canvas: { ...base2.canvas, ...customer.canvas },
-    launcher: { ...base2.launcher, ...customer.launcher },
-    tile: { ...base2.tile, ...customer.tile },
-    overlay: { ...base2.overlay, ...customer.overlay },
-    notification: { ...base2.notification, ...customer.notification },
-    content: { ...base2.content, ...customer.content }
-  };
-}
-function mergeThemeWithWorkspace(workspaceTheme, configTheme) {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const mode = (_b = (_a2 = configTheme.mode) != null ? _a2 : workspaceTheme.mode) != null ? _b : "dark";
-  const base2 = mode === "light" ? lightDefaults : darkDefaults;
-  return {
-    mode,
-    fontFamily: (_d = (_c = configTheme.fontFamily) != null ? _c : workspaceTheme.fontFamily) != null ? _d : base2.fontFamily,
-    colorPrimary: (_f = (_e = configTheme.colorPrimary) != null ? _e : workspaceTheme.colorPrimary) != null ? _f : base2.colorPrimary,
-    colorPrimaryHover: (_h = (_g = configTheme.colorPrimaryHover) != null ? _g : workspaceTheme.colorPrimaryHover) != null ? _h : base2.colorPrimaryHover,
-    borderRadius: (_j = (_i = configTheme.borderRadius) != null ? _i : workspaceTheme.borderRadius) != null ? _j : base2.borderRadius,
-    canvas: { ...base2.canvas, ...workspaceTheme.canvas, ...configTheme.canvas },
-    launcher: { ...base2.launcher, ...workspaceTheme.launcher, ...configTheme.launcher },
-    tile: { ...base2.tile, ...workspaceTheme.tile, ...configTheme.tile },
-    overlay: { ...base2.overlay, ...workspaceTheme.overlay, ...configTheme.overlay },
-    notification: {
-      ...base2.notification,
-      ...workspaceTheme.notification,
-      ...configTheme.notification
-    },
-    content: { ...base2.content, ...workspaceTheme.content, ...configTheme.content }
-  };
-}
-var ELEMENT_SECTIONS = [
-  "canvas",
-  "launcher",
-  "tile",
-  "overlay",
-  "notification",
-  "content"
-];
-function flattenThemeConfig(config) {
-  const vars = {};
-  if (config.fontFamily) vars["--sc-font-family"] = config.fontFamily;
-  if (config.colorPrimary) vars["--sc-color-primary"] = config.colorPrimary;
-  if (config.colorPrimaryHover) vars["--sc-color-primary-hover"] = config.colorPrimaryHover;
-  if (config.borderRadius) vars["--sc-border-radius"] = config.borderRadius;
-  for (const section of ELEMENT_SECTIONS) {
-    const sectionConfig = config[section];
-    if (!sectionConfig) continue;
-    for (const [key, value] of Object.entries(sectionConfig)) {
-      if (value !== void 0) {
-        vars[`--sc-${section}-${kebabCase(key)}`] = value;
-      }
-    }
-  }
-  return vars;
-}
-
-// src/theme/ThemeProvider.tsx
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect6, useMemo as useMemo4 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var ThemeContext = createContext3(null);
-function ThemeProvider({
-  children,
-  themeConfig,
-  workspaceTheme,
-  shadowRoot
-}) {
-  const merged = useMemo4(
-    () => workspaceTheme ? mergeThemeWithWorkspace(workspaceTheme, themeConfig != null ? themeConfig : {}) : mergeThemeConfig(themeConfig != null ? themeConfig : {}),
-    [themeConfig, workspaceTheme]
+              "p",
+              {
+                style: {
+                  fontSize: "0.8rem",
+                  fontWeight: 400,
+                  color: "var(--sc-tile-text-color)",
+                  margin: "0.125rem 0 0",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: resolvedSubtitle
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            style: {
+              padding: "var(--sc-tile-body-padding, 0 0.75rem 0.5rem)",
+              borderTop: "1px solid rgba(255, 255, 255, 0.06)"
+            },
+            children: /* @__PURE__ */ jsx6("div", { style: { paddingTop: "var(--sc-tile-gap, 0.25rem)" }, children: /* @__PURE__ */ jsx6(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
+          }
+        )
+      ]
+    }
   );
-  const cssVariables = useMemo4(() => flattenThemeConfig(merged), [merged]);
-  useEffect6(() => {
-    if (!shadowRoot) return;
-    let styleEl = shadowRoot.querySelector("#sc-theme-vars");
-    if (!styleEl) {
-      styleEl = document.createElement("style");
-      styleEl.id = "sc-theme-vars";
-      shadowRoot.insertBefore(styleEl, shadowRoot.firstChild);
-    }
-    const cssRules = Object.entries(cssVariables).map(([key, value2]) => `  ${key}: ${value2};`).join("\n");
-    styleEl.textContent = `:host {
-${cssRules}
-}`;
-  }, [shadowRoot, cssVariables]);
-  const value = {
-    config: merged,
-    mode: merged.mode,
-    cssVariables
-  };
-  return /* @__PURE__ */ jsx7(ThemeContext.Provider, { value, children });
-}
-function useTheme() {
-  const context = useContext3(ThemeContext);
-  if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
 }
 
 // src/components/ShadowCanvasOverlay.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
+import { createPortal } from "react-dom";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var LAUNCHER_STYLES_ID = "syntro-launcher-styles";
 function ensureLauncherStyles(target, css) {
   if (target.querySelector(`#${LAUNCHER_STYLES_ID}`)) return;
@@ -5818,7 +5572,7 @@ function ShadowCanvasOverlay({
     },
     [runtime3, isOpen, onToggle, dismissNotification]
   );
-  const launcherCss = useMemo5(
+  const launcherCss = useMemo4(
     () => `
   @keyframes syntro-launcher-pulse {
     0%, 100% {
@@ -5855,7 +5609,7 @@ function ShadowCanvasOverlay({
 `,
     [config.colorPrimary, config.colorPrimaryHover]
   );
-  useEffect7(() => {
+  useEffect6(() => {
     if (!isOpen) return;
     tiles.forEach((tile) => {
       telemetry == null ? void 0 : telemetry.trackRectangleViewed(tile.id, "overlay");
@@ -5865,11 +5619,11 @@ function ShadowCanvasOverlay({
       }
     });
   }, [telemetry, runtime3, isOpen, tiles]);
-  useEffect7(() => {
+  useEffect6(() => {
     setMounted(true);
     ensureLauncherStyles(shadowRoot, launcherCss);
   }, [shadowRoot, launcherCss]);
-  const toggle2 = useCallback4(() => {
+  const toggle = useCallback4(() => {
     const next = !isOpen;
     if (next) {
       telemetry == null ? void 0 : telemetry.trackCanvasOpened("overlay");
@@ -5882,17 +5636,17 @@ function ShadowCanvasOverlay({
     }
     onToggle();
   }, [isOpen, telemetry, runtime3, onToggle]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!isOpen) return;
     const handleOutsideClick = (e) => {
       const path = e.composedPath();
       if (containerRef.current && !path.includes(containerRef.current) && launcherRef.current && !path.includes(launcherRef.current)) {
-        toggle2();
+        toggle();
       }
     };
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, [isOpen, toggle2]);
+  }, [isOpen, toggle]);
   const onLauncherPointerDown = useCallback4((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     dragRef.current = {
@@ -5921,10 +5675,10 @@ function ShadowCanvasOverlay({
       const drag = dragRef.current;
       dragRef.current = null;
       if (drag && !drag.dragged) {
-        toggle2();
+        toggle();
       }
     },
-    [toggle2]
+    [toggle]
   );
   const isFocused = displayMode === "focused";
   const isRight = config.canvas.position === "right";
@@ -5933,7 +5687,7 @@ function ShadowCanvasOverlay({
   const containerRef = useRef5(null);
   const launcherRef = useRef5(null);
   const zIndex = 2147483600;
-  useEffect7(() => {
+  useEffect6(() => {
     var _a3, _b2, _c2, _d2;
     if (!isPush) return;
     const root = document.documentElement;
@@ -5953,7 +5707,7 @@ function ShadowCanvasOverlay({
       root.style.transition = prevTransition;
     };
   }, [isPush, isOpen, isRight, config.canvas.transitionDuration, config.canvas.transitionEasing]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!isPush || !isOpen) return;
     const container = containerRef.current;
     if (!container) return;
@@ -6012,7 +5766,7 @@ function ShadowCanvasOverlay({
     pointerEvents: "none",
     padding: "0"
   };
-  const content = /* @__PURE__ */ jsx8(
+  const content = /* @__PURE__ */ jsx7(
     "div",
     {
       "data-shadow-canvas-id": "overlay-root",
@@ -6024,7 +5778,7 @@ function ShadowCanvasOverlay({
       },
       children: /* @__PURE__ */ jsxs3("div", { style: wrapperStyle, children: [
         /* @__PURE__ */ jsxs3("div", { ref: containerRef, "data-shadow-canvas-id": "overlay-container", style: containerStyle, children: [
-          isFocused && canvasTitle && /* @__PURE__ */ jsx8("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ jsx8(
+          isFocused && canvasTitle && /* @__PURE__ */ jsx7("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ jsx7(
             "p",
             {
               style: {
@@ -6037,7 +5791,7 @@ function ShadowCanvasOverlay({
               children: canvasTitle
             }
           ) }),
-          /* @__PURE__ */ jsx8("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ jsx8(
+          /* @__PURE__ */ jsx7("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ jsx7(
             "div",
             {
               style: { color: "var(--sc-overlay-text-color)", padding: isFocused ? "1rem" : "0" },
@@ -6057,7 +5811,7 @@ function ShadowCanvasOverlay({
             }
           ) : isFocused ? (
             /* Focused Mode: Render first tile full size */
-            tiles.length > 0 ? /* @__PURE__ */ jsx8(
+            tiles.length > 0 ? /* @__PURE__ */ jsx7(
               TileCard,
               {
                 config: tiles[0],
@@ -6068,7 +5822,7 @@ function ShadowCanvasOverlay({
             ) : null
           ) : (
             /* Standard Mode: Stacked cards — widgets always visible */
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx7(
               "div",
               {
                 style: {
@@ -6077,7 +5831,7 @@ function ShadowCanvasOverlay({
                   gap: "0.75rem",
                   width: "100%"
                 },
-                children: tiles.map((tile) => /* @__PURE__ */ jsx8(
+                children: tiles.map((tile) => /* @__PURE__ */ jsx7(
                   TileCard,
                   {
                     config: tile,
@@ -6092,7 +5846,7 @@ function ShadowCanvasOverlay({
           ) }),
           footerSlot
         ] }),
-        /* @__PURE__ */ jsx8("div", { style: { flex: "1 1 auto" } })
+        /* @__PURE__ */ jsx7("div", { style: { flex: "1 1 auto" } })
       ] })
     }
   );
@@ -6110,7 +5864,7 @@ function ShadowCanvasOverlay({
             zIndex: zIndex + 47
           },
           children: [
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx7(
               NotificationToastStack,
               {
                 notifications,
@@ -6181,11 +5935,11 @@ function ShadowCanvasOverlay({
                       focusable: "false",
                       style: { transition: "transform 200ms ease" },
                       children: [
-                        /* @__PURE__ */ jsx8("path", { d: "M18 6L6 18" }),
-                        /* @__PURE__ */ jsx8("path", { d: "M6 6l12 12" })
+                        /* @__PURE__ */ jsx7("path", { d: "M18 6L6 18" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M6 6l12 12" })
                       ]
                     }
-                  ) : ((_e = config.launcher) == null ? void 0 : _e.icon) ? /* @__PURE__ */ jsx8(
+                  ) : ((_e = config.launcher) == null ? void 0 : _e.icon) ? /* @__PURE__ */ jsx7(
                     "img",
                     {
                       src: config.launcher.icon,
@@ -6213,16 +5967,16 @@ function ShadowCanvasOverlay({
                       focusable: "false",
                       style: { transition: "transform 200ms ease" },
                       children: [
-                        /* @__PURE__ */ jsx8("path", { d: "M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3Z" }),
-                        /* @__PURE__ */ jsx8("path", { d: "M5 3v4" }),
-                        /* @__PURE__ */ jsx8("path", { d: "M3 5h4" }),
-                        /* @__PURE__ */ jsx8("path", { d: "M19 17v4" }),
-                        /* @__PURE__ */ jsx8("path", { d: "M17 19h4" })
+                        /* @__PURE__ */ jsx7("path", { d: "M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3Z" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M5 3v4" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M3 5h4" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M19 17v4" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M17 19h4" })
                       ]
                     }
                   ),
                   !isOpen && notifications.length > 0 && /* @__PURE__ */ jsxs3("div", { style: { position: "absolute", top: -2, right: -2, pointerEvents: "none" }, children: [
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: "syntro-badge-ping",
@@ -6234,7 +5988,7 @@ function ShadowCanvasOverlay({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: "syntro-badge-glow",
@@ -6245,7 +5999,7 @@ function ShadowCanvasOverlay({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: "syntro-badge-bounce",
@@ -6279,7 +6033,7 @@ function ShadowCanvasOverlay({
 }
 
 // src/hooks/useShadowCanvasConfig.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef6, useState as useState6 } from "react";
 var sortTiles = (tiles) => [...tiles].sort((a, b) => {
   var _a2, _b;
   return ((_a2 = b.priority) != null ? _a2 : 0) - ((_b = a.priority) != null ? _b : 0);
@@ -6360,37 +6114,37 @@ function useShadowCanvasConfig({
       }));
     }
   }, [experiments, fetcher, runtime3]);
-  useEffect8(() => {
+  useEffect7(() => {
     load();
     if (experiments == null ? void 0 : experiments.onFeaturesChanged) {
       return experiments.onFeaturesChanged(() => load());
     }
   }, [load, experiments, pageUrl]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!(runtime3 == null ? void 0 : runtime3.accumulator)) return;
     return runtime3.accumulator.subscribe(() => {
       refilter();
     });
   }, [runtime3, refilter]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!(runtime3 == null ? void 0 : runtime3.context)) return;
     return runtime3.context.subscribe(() => {
       refilter();
     });
   }, [runtime3, refilter]);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!pollIntervalMs) return;
     const id = setInterval(() => {
       load();
     }, pollIntervalMs);
     return () => clearInterval(id);
   }, [load, pollIntervalMs]);
-  return useMemo6(() => state, [state]);
+  return useMemo5(() => state, [state]);
 }
 
 // src/SmartCanvasApp.tsx
-import { useEffect as useEffect9, useMemo as useMemo7, useRef as useRef7, useState as useState7 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { useEffect as useEffect8, useMemo as useMemo6, useRef as useRef7, useState as useState7 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function SmartCanvasApp({
   controller,
   fetcher,
@@ -6410,10 +6164,11 @@ function SmartCanvasApp({
   launcherLabel,
   canvasHost,
   initialBatchHandle,
-  workspaceTheme
+  workspaceTheme,
+  platformAdapter
 }) {
   if (runtime3) {
-    return /* @__PURE__ */ jsx9(RuntimeProvider, { runtime: runtime3, children: /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx8(RuntimeProvider, { runtime: runtime3, children: /* @__PURE__ */ jsx8(
       SmartCanvasAppInner,
       {
         controller,
@@ -6434,11 +6189,12 @@ function SmartCanvasApp({
         launcherLabel,
         canvasHost,
         initialBatchHandle,
-        workspaceTheme
+        workspaceTheme,
+        platformAdapter
       }
     ) });
   }
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     SmartCanvasAppInner,
     {
       controller,
@@ -6458,7 +6214,8 @@ function SmartCanvasApp({
       launcherLabel,
       canvasHost,
       initialBatchHandle,
-      workspaceTheme
+      workspaceTheme,
+      platformAdapter
     }
   );
 }
@@ -6481,7 +6238,8 @@ function SmartCanvasAppInner({
   launcherLabel,
   canvasHost: _canvasHost,
   initialBatchHandle,
-  workspaceTheme
+  workspaceTheme,
+  platformAdapter
 }) {
   var _a2, _b, _c, _d, _e, _f;
   const [open, setOpen] = useState7(controller.getState().open);
@@ -6489,31 +6247,20 @@ function SmartCanvasAppInner({
   const [localUrl, setLocalUrl] = useState7(
     () => typeof window !== "undefined" ? window.location.href : "/"
   );
+  const [reapplyTick, setReapplyTick] = useState7(0);
   const pageUrl = (_a2 = pageContext == null ? void 0 : pageContext.url) != null ? _a2 : localUrl;
-  useEffect9(() => {
+  useEffect8(() => {
     if (runtime3) return;
     if (typeof window === "undefined") return;
     const updateUrl = () => setLocalUrl(window.location.href);
     window.addEventListener("popstate", updateUrl);
     window.addEventListener("hashchange", updateUrl);
-    const originalPushState = history.pushState;
-    const originalReplaceState = history.replaceState;
-    history.pushState = function(...args) {
-      originalPushState.apply(this, args);
-      queueMicrotask(updateUrl);
-    };
-    history.replaceState = function(...args) {
-      originalReplaceState.apply(this, args);
-      queueMicrotask(updateUrl);
-    };
     return () => {
       window.removeEventListener("popstate", updateUrl);
       window.removeEventListener("hashchange", updateUrl);
-      history.pushState = originalPushState;
-      history.replaceState = originalReplaceState;
     };
   }, [runtime3]);
-  const derivedFetcher = useMemo7(() => {
+  const derivedFetcher = useMemo6(() => {
     if (fetcher) return fetcher;
     return createCanvasConfigFetcher({
       configUri,
@@ -6530,8 +6277,8 @@ function SmartCanvasAppInner({
     pageUrl
   });
   const hasContent = configState.tiles.length > 0 && !configState.error;
-  useEffect9(() => controller.subscribe((state) => setOpen(state.open)), [controller]);
-  useEffect9(() => {
+  useEffect8(() => controller.subscribe((state) => setOpen(state.open)), [controller]);
+  useEffect8(() => {
     if (!configState.isLoading && !hasContent && controller.getState().open) {
       controller.setOpen(false);
     }
@@ -6540,7 +6287,7 @@ function SmartCanvasAppInner({
   const adoptedInitialRef = useRef7(!!initialBatchHandle);
   const runVersionRef = useRef7(0);
   const pendingRevertRef = useRef7(null);
-  useEffect9(() => {
+  useEffect8(() => {
     if (!(runtime3 == null ? void 0 : runtime3.actions)) return;
     if (adoptedInitialRef.current) {
       if (configState.actions.length > 0) {
@@ -6552,7 +6299,11 @@ function SmartCanvasAppInner({
     const stale = () => version !== runVersionRef.current;
     const run = async () => {
       if (pendingRevertRef.current) {
-        await pendingRevertRef.current;
+        try {
+          await pendingRevertRef.current;
+        } catch (err) {
+          console.error("[SmartCanvasApp] Pending revert failed:", err);
+        }
         pendingRevertRef.current = null;
       }
       if (batchHandleRef.current) {
@@ -6588,23 +6339,31 @@ function SmartCanvasAppInner({
         batchHandleRef.current = null;
       }
     };
-  }, [runtime3, configState.actions, pageUrl]);
-  useEffect9(() => {
+  }, [runtime3, configState.actions, pageUrl, reapplyTick]);
+  useEffect8(() => {
     if (!runtime3) return;
     return runtime3.events.subscribe(
       { names: ["canvas.requestOpen"] },
       () => controller.setOpen(true)
     );
   }, [runtime3, controller]);
+  useEffect8(() => {
+    if (!platformAdapter || !(runtime3 == null ? void 0 : runtime3.actions)) return;
+    const unsub = platformAdapter.onRegionDidLoad((regionId) => {
+      console.log(`[SmartCanvasApp] Platform region reloaded: ${regionId}, re-applying actions`);
+      setReapplyTick((t) => t + 1);
+    });
+    return unsub;
+  }, [platformAdapter, runtime3]);
   const { shadowRoot } = useShadowRoot();
   const themeConfig = configState.theme;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx8(
     ThemeProvider,
     {
       themeConfig,
       workspaceTheme,
       shadowRoot,
-      children: !configState.isLoading && !hasContent ? null : /* @__PURE__ */ jsx9(
+      children: !configState.isLoading && !hasContent ? null : /* @__PURE__ */ jsx8(
         ShadowCanvasOverlay,
         {
           tiles: configState.tiles,
@@ -6628,8 +6387,8 @@ function SmartCanvasAppInner({
 
 // src/SmartCanvasElement.tsx
 import { createRoot as createRoot2 } from "react-dom/client";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var TAG_NAME = "smart-canvas";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var TAG_NAME2 = "smart-canvas";
 var BASE_CSS = `
 :host {
   font: inherit;
@@ -6729,13 +6488,13 @@ var SmartCanvasElement = class extends HTMLElement {
       __privateSet(this, _root, createRoot2(__privateGet(this, _mount)));
     }
     __privateGet(this, _root).render(
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx9(
         ShadowRootProvider,
         {
           shadowRoot: __privateGet(this, _shadow),
           portalRoot: __privateGet(this, _portalRoot),
           overlayContainer: __privateGet(this, _overlayContainer),
-          children: /* @__PURE__ */ jsx10(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
+          children: /* @__PURE__ */ jsx9(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
         }
       )
     );
@@ -6761,8 +6520,8 @@ _root = new WeakMap();
 _lastAppProps = new WeakMap();
 var registerSmartCanvasElement = () => {
   if (typeof window === "undefined") return;
-  if (!customElements.get(TAG_NAME)) {
-    customElements.define(TAG_NAME, SmartCanvasElement);
+  if (!customElements.get(TAG_NAME2)) {
+    customElements.define(TAG_NAME2, SmartCanvasElement);
   }
 };
 
@@ -6789,6 +6548,23 @@ function decodeParam(paramName) {
     return null;
   }
 }
+var STORAGE_KEY_SOURCE = "__syntro_rt_editor_source";
+var STORAGE_KEY_CONF = "__syntro_rt_editor_conf";
+function persistToStorage(key, value) {
+  try {
+    sessionStorage.setItem(key, JSON.stringify(value));
+  } catch {
+  }
+}
+function readFromStorage(key) {
+  try {
+    const raw = sessionStorage.getItem(key);
+    if (!raw) return null;
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
 var _cachedSource;
 var _cachedConf;
 function getEditorSource() {
@@ -6797,6 +6573,7 @@ function getEditorSource() {
     const globalParams = typeof window !== "undefined" ? window.__SYNTRO_EDITOR_PARAMS__ : null;
     if (globalParams == null ? void 0 : globalParams.token) {
       _cachedSource = { token: globalParams.token, api_base: globalParams.apiBase || "" };
+      persistToStorage(STORAGE_KEY_SOURCE, _cachedSource);
       console.log(
         `[DIAG] getEditorSource: from __SYNTRO_EDITOR_PARAMS__ (token=${_cachedSource.token.slice(0, 15)}...)`
       );
@@ -6804,6 +6581,15 @@ function getEditorSource() {
       const decoded = decodeParam("editor_source");
       if (decoded) {
         _cachedSource = decoded;
+        persistToStorage(STORAGE_KEY_SOURCE, decoded);
+      } else {
+        const fromStorage = readFromStorage(STORAGE_KEY_SOURCE);
+        if (fromStorage == null ? void 0 : fromStorage.token) {
+          _cachedSource = fromStorage;
+          console.log(
+            `[DIAG] getEditorSource: restored from sessionStorage (token=${fromStorage.token.slice(0, 15)}...)`
+          );
+        }
       }
       console.log(
         `[DIAG] getEditorSource: from URL param \u2192 ${decoded ? `token=${(_a2 = decoded.token) == null ? void 0 : _a2.slice(0, 15)}...` : "NULL"}`
@@ -6825,11 +6611,21 @@ function getEditorConf() {
         syntro_token: globalParams.syntroToken,
         workspace_id: globalParams.workspaceId
       };
+      persistToStorage(STORAGE_KEY_CONF, _cachedConf);
       console.log(`[DIAG] getEditorConf: from __SYNTRO_EDITOR_PARAMS__ (mode=${_cachedConf.mode})`);
     } else {
       const decoded = decodeParam("editor_conf");
       if (decoded) {
         _cachedConf = decoded;
+        persistToStorage(STORAGE_KEY_CONF, decoded);
+      } else {
+        const fromStorage = readFromStorage(STORAGE_KEY_CONF);
+        if (fromStorage == null ? void 0 : fromStorage.mode) {
+          _cachedConf = fromStorage;
+          console.log(
+            `[DIAG] getEditorConf: restored from sessionStorage (mode=${fromStorage.mode})`
+          );
+        }
       }
       console.log(
         `[DIAG] getEditorConf: from URL param \u2192 ${decoded ? `mode=${decoded.mode}` : "NULL"}`
@@ -6912,18 +6708,13 @@ var loadEditorSdk = async (editorUrlOrOptions) => {
     return;
   }
   const token = getToken();
-  if (!token) {
-    warn("Syntro Runtime", "\u274C No token found in editor_source.");
-    debug("Syntro Runtime", "================================");
-    return;
-  }
-  const editorUrl = `${baseEditorUrl}?token=${encodeURIComponent(token)}`;
+  const editorUrl = token ? `${baseEditorUrl}?token=${encodeURIComponent(token)}` : baseEditorUrl;
   debug("Syntro Runtime", "Editor URL:", editorUrl);
   debug("Syntro Runtime", "Options:", {
     hasIntegrity: !!options.integrity,
     hasEditorUrl: !!baseEditorUrl,
     hasApiBase: !!apiBase,
-    tokenPrefix: `${token.slice(0, 10)}...`
+    tokenPrefix: token ? `${token.slice(0, 10)}...` : "none"
   });
   if (!validateEditorUrl(baseEditorUrl)) {
     console.error("[Syntro Runtime] \u274C BLOCKED: Editor from untrusted URL:", baseEditorUrl);
@@ -7372,7 +7163,8 @@ var createSmartCanvas = async (config = {}) => {
     configUriFeatureKey: config.configUriFeatureKey,
     fetchCredentials: config.fetchCredentials,
     initialBatchHandle: currentBatchHandle,
-    workspaceTheme: config.workspaceTheme
+    workspaceTheme: config.workspaceTheme,
+    platformAdapter: config.platformAdapter
   };
   host.mountReactApp(appProps);
   if (config.defaultOpen) {
@@ -7545,6 +7337,7 @@ var STORAGE_KEY = "syntro_session_metrics";
 var SessionMetricTracker = class {
   constructor(options = {}) {
     __publicField(this, "metrics", /* @__PURE__ */ new Map());
+    __publicField(this, "subscribers", /* @__PURE__ */ new Set());
     __publicField(this, "experiments");
     __publicField(this, "attributePrefix");
     __publicField(this, "onMetricChange");
@@ -7569,6 +7362,7 @@ var SessionMetricTracker = class {
     this.saveToStorage();
     this.updateExperimentAttributes(metricKey, newValue);
     (_b = this.onMetricChange) == null ? void 0 : _b.call(this, metricKey, newValue);
+    this.notifySubscribers();
     return newValue;
   }
   /**
@@ -7583,6 +7377,7 @@ var SessionMetricTracker = class {
     this.saveToStorage();
     this.updateExperimentAttributes(metricKey, value);
     (_a2 = this.onMetricChange) == null ? void 0 : _a2.call(this, metricKey, value);
+    this.notifySubscribers();
   }
   /**
    * Get the current value of a metric.
@@ -7623,6 +7418,7 @@ var SessionMetricTracker = class {
     this.saveToStorage();
     this.updateExperimentAttributes(metricKey, 0);
     (_a2 = this.onMetricChange) == null ? void 0 : _a2.call(this, metricKey, 0);
+    this.notifySubscribers();
   }
   /**
    * Reset all metrics (clear the session).
@@ -7638,6 +7434,16 @@ var SessionMetricTracker = class {
       (_a2 = this.onMetricChange) == null ? void 0 : _a2.call(this, key, 0);
     }
     (_c = (_b = this.experiments) == null ? void 0 : _b.setAttributes) == null ? void 0 : _c.call(_b, attrs);
+    this.notifySubscribers();
+  }
+  subscribe(callback) {
+    this.subscribers.add(callback);
+    return () => {
+      this.subscribers.delete(callback);
+    };
+  }
+  destroy() {
+    this.subscribers.clear();
   }
   /**
    * Update the experiment client (useful if experiments client changes).
@@ -7662,6 +7468,14 @@ var SessionMetricTracker = class {
     }
     this.experiments.setAttributes(attrs);
   }
+  notifySubscribers() {
+    for (const cb of this.subscribers) {
+      try {
+        cb();
+      } catch {
+      }
+    }
+  }
   loadFromStorage() {
     if (typeof window === "undefined" || typeof sessionStorage === "undefined") return;
     try {
@@ -7793,8 +7607,10 @@ var PostHogAdapter = class {
     if (!options.apiKey) return;
     const enableFeatureFlags = (_a2 = options.enableFeatureFlags) != null ? _a2 : true;
     const instanceName = `syntro_${options.apiKey.slice(-6) || "sdk"}`;
+    const baseHost = (_b = options.apiHost) != null ? _b : "https://telemetry.syntrologie.com";
+    const apiHost = `${baseHost.replace(/\/$/, "")}/t/${options.apiKey}`;
     const initOptions = {
-      api_host: (_b = options.apiHost) != null ? _b : "https://telemetry.syntrologie.com",
+      api_host: apiHost,
       // Feature flags for segment membership (in_segment_* flags)
       // When enabled, /decide is called to get segment flags
       advanced_disable_feature_flags: !enableFeatureFlags,
@@ -8996,39 +8812,41 @@ function createActionEngine(options) {
   function subscribeForReeval(id, action, triggerWhen, _handle) {
     if (!runtime3) return;
     const unsubs = [];
+    let reevalInFlight = false;
     const onReeval = async () => {
+      if (reevalInFlight) return;
       const entry = activeActions.get(id);
       if (!entry) return;
-      const result = runtime3.evaluateSync(triggerWhen);
-      const shouldApply = result.value;
-      if (entry.state === "applied" && !shouldApply) {
-        try {
-          await entry.cleanup();
-        } catch (error2) {
-          console.error(`[ActionEngine] Error reverting conditional action ${id}:`, error2);
-        }
-        entry.state = "deferred";
-        entry.cleanup = () => {
-        };
-        entry.updateFn = void 0;
-        publishEvent("action.deferred", { id, kind: action.kind });
-      } else if (entry.state === "deferred" && shouldApply) {
-        try {
-          const context = createExecutorContext();
-          const execResult = await executeAction(action, context);
-          entry.state = "applied";
-          entry.cleanup = execResult.cleanup;
-          entry.updateFn = execResult.updateFn;
-          entry.appliedTs = Date.now();
-          publishEvent("action.applied", {
-            id,
-            kind: action.kind,
-            anchorId: "anchorId" in action ? action.anchorId : void 0
-          });
-        } catch (error2) {
-          console.error(`[ActionEngine] Error applying deferred action ${id}:`, error2);
-          entry.state = "failed";
+      reevalInFlight = true;
+      try {
+        const result = runtime3.evaluateSync(triggerWhen);
+        const shouldApply = result.value;
+        if (entry.state === "applied" && !shouldApply) {
+          try {
+            await entry.cleanup();
+          } catch (error2) {
+            console.error(`[ActionEngine] Error reverting conditional action ${id}:`, error2);
+          }
+          entry.state = "deferred";
+          entry.cleanup = () => {
+          };
+          entry.updateFn = void 0;
+          publishEvent("action.deferred", { id, kind: action.kind });
+        } else if (entry.state === "deferred" && shouldApply) {
+          try {
+            const context = createExecutorContext();
+            const execResult = await executeAction(action, context);
+            entry.state = "applied";
+            entry.cleanup = execResult.cleanup;
+            entry.updateFn = execResult.updateFn;
+            entry.appliedTs = Date.now();
+          } catch (error2) {
+            console.error(`[ActionEngine] Error applying deferred action ${id}:`, error2);
+            entry.state = "failed";
+          }
         }
+      } finally {
+        reevalInFlight = false;
       }
     };
     if (runtime3.context) {
@@ -9037,6 +8855,12 @@ function createActionEngine(options) {
     if (runtime3.accumulator) {
       unsubs.push(runtime3.accumulator.subscribe(onReeval));
     }
+    if (runtime3.sessionMetrics) {
+      unsubs.push(runtime3.sessionMetrics.subscribe(onReeval));
+    }
+    if (runtime3.events) {
+      unsubs.push(runtime3.events.subscribe(onReeval));
+    }
     conditionalUnsubs.set(id, unsubs);
   }
   async function apply(action) {
@@ -9116,11 +8940,6 @@ function createActionEngine(options) {
       updateFn: result.updateFn
     };
     activeActions.set(id, entry);
-    publishEvent("action.applied", {
-      id,
-      kind: action.kind,
-      anchorId: "anchorId" in action ? action.anchorId : void 0
-    });
     const handle = {
       id,
       action,
@@ -9256,7 +9075,7 @@ function createActionEngine(options) {
       state: entry.state
     }));
   }
-  function destroy() {
+  async function destroy() {
     for (const unsubs of conditionalUnsubs.values()) {
       for (const unsub of unsubs) {
         try {
@@ -9266,16 +9085,27 @@ function createActionEngine(options) {
       }
     }
     conditionalUnsubs.clear();
+    const cleanupPromises = [];
     for (const entry of activeActions.values()) {
       if (entry.state === "applied") {
         try {
-          entry.cleanup();
+          const result = entry.cleanup();
+          if (result && typeof result.then === "function") {
+            cleanupPromises.push(
+              result.catch((error2) => {
+                console.error(`[ActionEngine] Error during async cleanup:`, error2);
+              })
+            );
+          }
         } catch (error2) {
           console.error(`[ActionEngine] Error during cleanup:`, error2);
         }
       }
     }
     activeActions.clear();
+    if (cleanupPromises.length > 0) {
+      await Promise.all(cleanupPromises);
+    }
   }
   return {
     apply,
@@ -9689,8 +9519,8 @@ function evaluateCondition(condition, evalContext) {
       return true;
     }
     case "session_metric": {
-      if (!state) return false;
-      const metricValue = state.getSessionMetric(condition.key);
+      const metricValue = evalContext.sessionMetrics ? evalContext.sessionMetrics.get(condition.key) : state == null ? void 0 : state.getSessionMetric(condition.key);
+      if (metricValue === void 0) return false;
       const { operator, threshold } = condition;
       switch (operator) {
         case "gte":
@@ -9825,6 +9655,10 @@ function createEvaluationContext(context, options) {
         return (_a2 = state.session.get(key)) != null ? _a2 : state.user.get(key);
       }
     } : void 0,
+    sessionMetrics: sessionMetrics ? { get: (key) => {
+      var _a2;
+      return (_a2 = sessionMetrics.get(key)) != null ? _a2 : 0;
+    } } : void 0,
     events: events ? {
       hasRecentEvent: (eventName, withinMs) => events.hasRecentEvent(eventName, withinMs)
     } : void 0,
@@ -10352,6 +10186,258 @@ var NavigationMonitor = class {
   }
 };
 
+// src/platform/ShopifyAntiFlicker.ts
+var ShopifyAntiFlicker = class {
+  constructor(adapter) {
+    __publicField(this, "adapter");
+    __publicField(this, "unsubUnload", null);
+    __publicField(this, "unsubLoad", null);
+    __publicField(this, "destroyed", false);
+    this.adapter = adapter;
+  }
+  activate() {
+    if (this.destroyed) return;
+    this.unsubUnload = this.adapter.onRegionWillUnload((sectionId) => {
+      this.hideContentInSection(sectionId);
+    });
+    this.unsubLoad = this.adapter.onRegionDidLoad((sectionId) => {
+      this.revealContentInSection(sectionId);
+    });
+  }
+  destroy() {
+    var _a2, _b;
+    this.destroyed = true;
+    (_a2 = this.unsubUnload) == null ? void 0 : _a2.call(this);
+    (_b = this.unsubLoad) == null ? void 0 : _b.call(this);
+    this.unsubUnload = null;
+    this.unsubLoad = null;
+  }
+  hideContentInSection(sectionId) {
+    const selector = this.sectionSelector(sectionId);
+    const elements = document.querySelectorAll(`${selector} [data-syntro-action-id]`);
+    for (const el of elements) {
+      el.style.opacity = "0";
+      el.style.transition = "none";
+    }
+  }
+  revealContentInSection(sectionId) {
+    const selector = this.sectionSelector(sectionId);
+    requestAnimationFrame(() => {
+      if (this.destroyed) return;
+      const elements = document.querySelectorAll(
+        `${selector} [data-syntro-action-id]`
+      );
+      for (const el of elements) {
+        el.style.transition = "opacity 120ms ease-in";
+        el.style.opacity = "1";
+      }
+    });
+  }
+  sectionSelector(sectionId) {
+    const escaped = typeof CSS !== "undefined" ? CSS.escape(sectionId) : sectionId;
+    const byId = document.getElementById(`shopify-section-${sectionId}`);
+    if (byId) return `#shopify-section-${escaped}`;
+    return `.shopify-section[id$="-${escaped}"]`;
+  }
+};
+
+// src/platform/ShopifyAdapter.ts
+var ShopifyAdapter = class {
+  constructor(options) {
+    __publicField(this, "name", "shopify");
+    __publicField(this, "loadCallbacks", /* @__PURE__ */ new Set());
+    __publicField(this, "unloadCallbacks", /* @__PURE__ */ new Set());
+    __publicField(this, "abortController", null);
+    __publicField(this, "antiFlicker", null);
+    __publicField(this, "initTimeoutMs");
+    var _a2;
+    this.initTimeoutMs = (_a2 = options == null ? void 0 : options.initTimeoutMs) != null ? _a2 : 3e3;
+  }
+  // --------------------------------------------------------------------------
+  // Detection
+  // --------------------------------------------------------------------------
+  detect() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return false;
+    }
+    if ("Shopify" in window && window.Shopify != null) {
+      return true;
+    }
+    if (document.querySelector('meta[name="shopify-checkout-api-token"]')) {
+      return true;
+    }
+    return false;
+  }
+  // --------------------------------------------------------------------------
+  // Initialization
+  // --------------------------------------------------------------------------
+  /**
+   * Wait for Shopify sections to be ready, then attach lifecycle listeners.
+   *
+   * Resolution order:
+   * 1. `.shopify-section` already in DOM -> resolve immediately
+   * 2. `shopify:section:load` fires -> resolve
+   * 3. Timeout (default 3000ms) -> resolve anyway (graceful degradation)
+   */
+  async onInit() {
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    this.attachSectionListeners(signal);
+    this.antiFlicker = new ShopifyAntiFlicker(this);
+    this.antiFlicker.activate();
+    await this.waitForInitialSections(this.initTimeoutMs, signal);
+  }
+  // --------------------------------------------------------------------------
+  // Region lifecycle subscriptions
+  // --------------------------------------------------------------------------
+  onRegionDidLoad(callback) {
+    this.loadCallbacks.add(callback);
+    return () => {
+      this.loadCallbacks.delete(callback);
+    };
+  }
+  onRegionWillUnload(callback) {
+    this.unloadCallbacks.add(callback);
+    return () => {
+      this.unloadCallbacks.delete(callback);
+    };
+  }
+  onRegionMutated(_regionId) {
+  }
+  // --------------------------------------------------------------------------
+  // Anchor scope
+  // --------------------------------------------------------------------------
+  getAnchorScope(anchor) {
+    const section = anchor.closest(".shopify-section");
+    if (section == null ? void 0 : section.id) {
+      const escaped = typeof CSS !== "undefined" ? CSS.escape(section.id) : section.id;
+      return `#${escaped} `;
+    }
+    return "";
+  }
+  // --------------------------------------------------------------------------
+  // Teardown
+  // --------------------------------------------------------------------------
+  destroy() {
+    var _a2;
+    (_a2 = this.antiFlicker) == null ? void 0 : _a2.destroy();
+    this.antiFlicker = null;
+    if (this.abortController) {
+      this.abortController.abort();
+      this.abortController = null;
+    }
+    this.loadCallbacks.clear();
+    this.unloadCallbacks.clear();
+  }
+  // --------------------------------------------------------------------------
+  // Private
+  // --------------------------------------------------------------------------
+  attachSectionListeners(signal) {
+    document.addEventListener(
+      "shopify:section:load",
+      (event) => {
+        var _a2;
+        const sectionId = (_a2 = event.detail) == null ? void 0 : _a2.sectionId;
+        if (sectionId) {
+          for (const cb of this.loadCallbacks) {
+            try {
+              cb(sectionId);
+            } catch {
+            }
+          }
+        }
+      },
+      { signal }
+    );
+    document.addEventListener(
+      "shopify:section:unload",
+      (event) => {
+        var _a2;
+        const sectionId = (_a2 = event.detail) == null ? void 0 : _a2.sectionId;
+        if (sectionId) {
+          for (const cb of this.unloadCallbacks) {
+            try {
+              cb(sectionId);
+            } catch {
+            }
+          }
+        }
+      },
+      { signal }
+    );
+  }
+  waitForInitialSections(timeoutMs, signal) {
+    return new Promise((resolve) => {
+      if (document.querySelector(".shopify-section")) {
+        resolve();
+        return;
+      }
+      let resolved = false;
+      const done = () => {
+        if (resolved) return;
+        resolved = true;
+        resolve();
+      };
+      document.addEventListener("shopify:section:load", () => done(), { once: true, signal });
+      const timer = setTimeout(done, timeoutMs);
+      signal.addEventListener(
+        "abort",
+        () => {
+          clearTimeout(timer);
+          done();
+        },
+        { once: true }
+      );
+    });
+  }
+};
+
+// src/platform/detect.ts
+var ADAPTERS = [() => new ShopifyAdapter()];
+function detectPlatform() {
+  for (const create of ADAPTERS) {
+    const adapter = create();
+    if (adapter.detect()) {
+      return adapter;
+    }
+  }
+  return null;
+}
+
+// src/platform/shopify-cookie-contract.ts
+var COOKIE_NAME = "syntro_experiments";
+var COOKIE_VERSION = 1;
+
+// src/platform/ShopifyPixelBridge.ts
+var MAX_AGE_SECONDS = 30 * 24 * 60 * 60;
+var ShopifyPixelBridge = class {
+  constructor(context) {
+    __publicField(this, "context");
+    this.context = { ...context, telemetryHost: context.telemetryHost.replace(/\/$/, "") };
+    this.writeCookie();
+  }
+  /** Update the telemetry context (e.g., after consent is granted and
+   *  PostHog finally initializes and a real distinct_id becomes available). */
+  updateContext(context) {
+    this.context = { ...context, telemetryHost: context.telemetryHost.replace(/\/$/, "") };
+    this.writeCookie();
+  }
+  destroy() {
+    document.cookie = `${COOKIE_NAME}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; SameSite=Lax`;
+  }
+  writeCookie() {
+    const payload = {
+      version: COOKIE_VERSION,
+      distinct_id: this.context.distinctId,
+      telemetry_host: this.context.telemetryHost,
+      telemetry_key: this.context.telemetryKey
+    };
+    const value = encodeURIComponent(JSON.stringify(payload));
+    const cookieString = `${COOKIE_NAME}=${value}; max-age=${MAX_AGE_SECONDS}; path=/; SameSite=Lax`;
+    document.cookie = cookieString;
+  }
+};
+
 // src/state/helpers/cooldowns.ts
 var COOLDOWN_PREFIX = "cooldown:";
 function createCooldownStore(storage) {
@@ -10795,13 +10881,13 @@ function getSlotZIndex(slot) {
 }
 
 // src/hostPatcher/core/sanitizer.ts
-function sanitizeWithFallback(html) {
+function sanitizeWithFallback(html2) {
   var _a2;
   const hasNative = typeof window.Sanitizer === "function";
   if (hasNative) {
     try {
       const s = new window.Sanitizer({});
-      const frag = s.sanitizeToFragment(html);
+      const frag = s.sanitizeToFragment(html2);
       const div = document.createElement("div");
       div.append(frag);
       return div.innerHTML;
@@ -10809,7 +10895,7 @@ function sanitizeWithFallback(html) {
     }
   }
   const tpl = document.createElement("template");
-  tpl.innerHTML = html;
+  tpl.innerHTML = html2;
   const root = tpl.content;
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
   const allowed = /* @__PURE__ */ new Set([
@@ -10836,8 +10922,8 @@ function sanitizeWithFallback(html) {
   const toRemove = [];
   while (walker.nextNode()) {
     const el = walker.currentNode;
-    const tag2 = el.tagName.toLowerCase();
-    if (!allowed.has(tag2)) {
+    const tag = el.tagName.toLowerCase();
+    if (!allowed.has(tag)) {
       toRemove.push(el);
       continue;
     }
@@ -11458,12 +11544,15 @@ function createSmartCanvasRuntime(options = {}) {
     runtime: {
       evaluateSync: (strategy) => decisionEngine.evaluateSync(strategy, context.get()),
       context,
-      accumulator
+      accumulator,
+      sessionMetrics,
+      events: events ? { subscribe: (cb) => events.subscribe(() => cb()) } : void 0
     }
   });
   let unsubPageViews;
   if (sessionMetrics) {
-    sessionMetrics.increment("page_views");
+    const sm = sessionMetrics;
+    sm.increment("page_views");
     let lastCountedPath = typeof window !== "undefined" ? window.location.pathname : "/";
     unsubPageViews = navigation.subscribe((url, method) => {
       if (method === "replaceState") return;
@@ -11471,12 +11560,38 @@ function createSmartCanvasRuntime(options = {}) {
         const newPath = new URL(url).pathname;
         if (newPath !== lastCountedPath) {
           lastCountedPath = newPath;
-          sessionMetrics.increment("page_views");
+          sm.increment("page_views");
+          timeOnPageSeconds = 0;
+          sm.set("time_on_page", 0);
+          sm.set("scroll_depth", 0);
         }
       } catch {
       }
     });
   }
+  let timeOnPageSeconds = 0;
+  let timeOnPageTickInterval;
+  let timeOnPageFlushInterval;
+  if (sessionMetrics) {
+    const sm = sessionMetrics;
+    timeOnPageTickInterval = setInterval(() => {
+      timeOnPageSeconds++;
+    }, 1e3);
+    timeOnPageFlushInterval = setInterval(() => {
+      sm.set("time_on_page", timeOnPageSeconds);
+    }, 5e3);
+  }
+  let unsubScroll;
+  if (sessionMetrics && events) {
+    const sm = sessionMetrics;
+    unsubScroll = events.subscribe({ names: ["ui.scroll"] }, (event) => {
+      var _a3;
+      const pct = (_a3 = event.props) == null ? void 0 : _a3.scrollPercentage;
+      if (typeof pct === "number" && pct > sm.get("scroll_depth")) {
+        sm.set("scroll_depth", pct);
+      }
+    });
+  }
   const runtime3 = {
     telemetry,
     context,
@@ -11537,6 +11652,9 @@ function createSmartCanvasRuntime(options = {}) {
         console.error("[Runtime] Error unbinding apps registry:", err);
       });
       unsubPageViews == null ? void 0 : unsubPageViews();
+      unsubScroll == null ? void 0 : unsubScroll();
+      if (timeOnPageTickInterval) clearInterval(timeOnPageTickInterval);
+      if (timeOnPageFlushInterval) clearInterval(timeOnPageFlushInterval);
       anchorResolverService.destroy();
       accumulator.destroy();
       navigation.destroy();
@@ -11572,16 +11690,13 @@ function encodeToken(payload) {
 }
 
 // src/bootstrap-init.ts
+var import_meta = {};
 function getEnvVar(name) {
   if (typeof process !== "undefined" && process.env) {
     return process.env[name];
   }
-  try {
-    const meta = (0, eval)("import.meta");
-    if (meta == null ? void 0 : meta.env) {
-      return meta.env[name];
-    }
-  } catch {
+  if (typeof import_meta.env !== "undefined" && import_meta.env) {
+    return import_meta.env[name];
   }
   return void 0;
 }
@@ -11620,7 +11735,7 @@ function extractSegmentFlags(allFlags) {
   return segmentFlags;
 }
 function collectBrowserMetadata() {
-  var _a2;
+  var _a2, _b;
   if (typeof window === "undefined") return {};
   const attrs = {};
   try {
@@ -11672,6 +11787,19 @@ function collectBrowserMetadata() {
     if (window.location.search) attrs.page_query = window.location.search;
   } catch {
   }
+  try {
+    const tg = (_b = window.Telegram) == null ? void 0 : _b.WebApp;
+    if (tg) {
+      attrs.surface_type = "telegram";
+      attrs.surface_host = tg.platform || "unknown";
+    } else {
+      attrs.surface_type = "web";
+      attrs.surface_host = "web";
+    }
+  } catch {
+    attrs.surface_type = "web";
+    attrs.surface_host = "web";
+  }
   return attrs;
 }
 var GEO_CACHE_KEY = "syntro_geo";
@@ -11767,9 +11895,9 @@ var CdnFetcher = class {
     if (!response.ok) {
       throw new Error(`[SmartCanvas] Failed to fetch config from CDN (${response.status})`);
     }
-    const text2 = await response.text();
+    const text = await response.text();
     if (this.integrity) {
-      const hash = await computeSha384(text2);
+      const hash = await computeSha384(text);
       const expected = this.integrity.replace("sha384-", "");
       if (hash !== expected) {
         throw new Error(
@@ -11777,7 +11905,7 @@ var CdnFetcher = class {
         );
       }
     }
-    const config = JSON.parse(text2);
+    const config = JSON.parse(text);
     const fetchTimeMs = performance.now() - start;
     const cacheControl = response.headers.get("cache-control");
     const age = response.headers.get("age");
@@ -11961,7 +12089,7 @@ function createTelemetryClient(provider, config) {
 
 // src/bootstrap-runtime.ts
 async function _initCore(options) {
-  var _a2, _b, _c, _d, _e, _f, _g;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
   initLogger();
   debug("Syntro Bootstrap", "====== INIT ======");
   debug("Syntro Bootstrap", "Options:", {
@@ -12029,10 +12157,46 @@ async function _initCore(options) {
   const geoHost = (payload == null ? void 0 : payload.g) || getEnvVar("NEXT_PUBLIC_SYNTRO_GEO_HOST") || getEnvVar("VITE_SYNTRO_GEO_HOST") || GEO_DEFAULT_HOST;
   const cachedSegmentAttrs = loadCachedSegmentAttributes();
   const browserMetadata = collectBrowserMetadata();
-  const phaseOneAttrs = { ...browserMetadata, ...cachedSegmentAttrs };
+  const appSignalsInit = (_c = options.appSignalsInit) != null ? _c : {};
+  const phaseOneAttrs = { ...browserMetadata, ...cachedSegmentAttrs, ...appSignalsInit };
   debug("Syntro Bootstrap", "Phase 1: Browser metadata:", browserMetadata);
   debug("Syntro Bootstrap", "Phase 1: Cached segment attributes:", cachedSegmentAttrs);
+  if (Object.keys(appSignalsInit).length > 0) {
+    debug("Syntro Bootstrap", "Phase 1: App signals:", appSignalsInit);
+  }
   const geoPromise = fetchGeo(geoHost);
+  const mcpPromise = (() => {
+    try {
+      if (typeof window === "undefined" || window.self === window.top) return Promise.resolve(null);
+    } catch {
+    }
+    return new Promise((resolve) => {
+      const timer = setTimeout(() => {
+        window.removeEventListener("message", handler);
+        resolve(null);
+      }, 500);
+      function handler(event) {
+        var _a3;
+        const data = event.data;
+        if ((data == null ? void 0 : data.jsonrpc) === "2.0" && (data == null ? void 0 : data.id) === 1 && ((_a3 = data == null ? void 0 : data.result) == null ? void 0 : _a3.hostInfo)) {
+          clearTimeout(timer);
+          window.removeEventListener("message", handler);
+          resolve(data.result.hostInfo);
+        }
+      }
+      window.addEventListener("message", handler);
+      try {
+        window.parent.postMessage(
+          { jsonrpc: "2.0", id: 1, method: "ui/initialize", params: { capabilities: {} } },
+          "*"
+        );
+      } catch {
+        clearTimeout(timer);
+        window.removeEventListener("message", handler);
+        resolve(null);
+      }
+    });
+  })();
   let experiments;
   const isDebugOrTest = options.debug || options.testMode;
   const events = createEventBus({
@@ -12079,6 +12243,8 @@ async function _initCore(options) {
       true
     );
   }
+  const platformAdapter = detectPlatform();
+  let shopifyPixelBridge;
   const onFeatureFlagsLoaded = (allFlags) => {
     var _a3, _b2, _c2;
     debug("Syntro Bootstrap", "Phase 2: PostHog feature flags loaded");
@@ -12087,10 +12253,25 @@ async function _initCore(options) {
     cacheSegmentAttributes(segmentFlags);
     if (experiments) {
       const sessionAttrs = (_b2 = (_a3 = sessionMetrics == null ? void 0 : sessionMetrics.getAll) == null ? void 0 : _a3.call(sessionMetrics)) != null ? _b2 : {};
-      const updatedAttrs = { ...browserMetadata, ...sessionAttrs, ...segmentFlags };
+      const updatedAttrs = {
+        ...browserMetadata,
+        ...sessionAttrs,
+        ...segmentFlags,
+        ...appSignalsInit
+      };
       debug("Syntro Bootstrap", "Updating GrowthBook with attributes:", updatedAttrs);
       (_c2 = experiments.setAttributes) == null ? void 0 : _c2.call(experiments, updatedAttrs);
     }
+    if (shopifyPixelBridge && (telemetry == null ? void 0 : telemetry.getDistinctId)) {
+      const distinctId = telemetry.getDistinctId();
+      if (distinctId && telemetryHost && (payload == null ? void 0 : payload.t)) {
+        shopifyPixelBridge.updateContext({
+          distinctId,
+          telemetryHost,
+          telemetryKey: payload.t
+        });
+      }
+    }
   };
   let telemetry;
   if (payload == null ? void 0 : payload.t) {
@@ -12101,9 +12282,7 @@ async function _initCore(options) {
       // undefined falls back to adapter default
       // Enable PostHog feature flags for segment membership
       enableFeatureFlags: true,
-      // Disable session recording in debug/dev mode (mock telemetry doesn't
-      // support the PostHog recorder extension, causing console errors)
-      sessionRecording: !payload.d,
+      sessionRecording: true,
       // Wire up callback for when flags are loaded (Phase 2)
       onFeatureFlagsLoaded,
       // Wire up event capture to feed into event processor
@@ -12116,11 +12295,27 @@ async function _initCore(options) {
       }
     });
     console.log(`[Syntro Bootstrap] Telemetry client created (${provider}) with EventBus wiring`);
+    if (Object.keys(appSignalsInit).length > 0) {
+      (_d = telemetry.track) == null ? void 0 : _d.call(telemetry, "app_signals_init", appSignalsInit);
+      debug("Syntro Bootstrap", "Tracked app signals event:", appSignalsInit);
+    }
     const telemetryForCapture = telemetry;
     events.setPosthogCapture((name, props) => {
       var _a3;
       (_a3 = telemetryForCapture.track) == null ? void 0 : _a3.call(telemetryForCapture, name, props);
     });
+    if ((platformAdapter == null ? void 0 : platformAdapter.name) === "shopify" && telemetryHost) {
+      try {
+        shopifyPixelBridge = new ShopifyPixelBridge({
+          distinctId: (_f = (_e = telemetry.getDistinctId) == null ? void 0 : _e.call(telemetry)) != null ? _f : "",
+          telemetryHost,
+          telemetryKey: payload.t
+        });
+        debug("Syntro Bootstrap", "ShopifyPixelBridge initialized for checkout attribution");
+      } catch (err) {
+        warn("Syntro Bootstrap", "ShopifyPixelBridge init failed", err);
+      }
+    }
   }
   let sessionMetrics;
   if (payload == null ? void 0 : payload.e) {
@@ -12130,7 +12325,11 @@ async function _initCore(options) {
       // undefined falls back to adapter default
       // Phase 1: Use browser metadata + cached segment attributes for instant evaluation
       attributes: phaseOneAttrs,
-      // Wire experiment tracking to telemetry provider
+      // Wire experiment tracking to telemetry provider. PostHog registers
+      // the assignment as a super-property + fires `$experiment_started`;
+      // every future event from this distinct_id (including checkout events
+      // posted by the Shopify Web Pixel) is then auto-attributed to the
+      // variant server-side, so the pixel doesn't need to re-transmit.
       onExperimentViewed: (telemetry == null ? void 0 : telemetry.trackExperiment) ? (key, variationId, variationName) => {
         telemetry.trackExperiment(key, variationId, variationName);
       } : void 0
@@ -12186,7 +12385,7 @@ async function _initCore(options) {
     };
     debug("Syntro Bootstrap", "Global SynOS object exposed");
   }
-  const registeredApps = (_e = (_d = (_c = runtime3.apps).list) == null ? void 0 : _d.call(_c)) != null ? _e : [];
+  const registeredApps = (_i = (_h = (_g = runtime3.apps).list) == null ? void 0 : _h.call(_g)) != null ? _i : [];
   console.log(
     `[DIAG] Activation loop: ${registeredApps.length} apps in registry:`,
     registeredApps.map((a) => `${a.manifest.id}(${a.state})`).join(", ")
@@ -12215,15 +12414,22 @@ async function _initCore(options) {
   }
   const geoData = await geoPromise;
   if (experiments && Object.keys(geoData).length > 0) {
-    const mergedAttrs = { ...browserMetadata, ...geoData };
+    const mergedAttrs = { ...browserMetadata, ...geoData, ...appSignalsInit };
     debug("Syntro Bootstrap", "Merging geo data into GrowthBook attributes:", geoData);
-    (_f = experiments.setAttributes) == null ? void 0 : _f.call(experiments, mergedAttrs);
+    (_j = experiments.setAttributes) == null ? void 0 : _j.call(experiments, mergedAttrs);
+  }
+  const mcpHost = await mcpPromise;
+  if (mcpHost && experiments) {
+    browserMetadata.surface_type = "mcp-app";
+    browserMetadata.surface_host = mcpHost.name;
+    (_k = experiments.setAttributes) == null ? void 0 : _k.call(experiments, { ...browserMetadata, ...geoData });
+    debug("Syntro Bootstrap", "MCP App detected:", mcpHost.name);
   }
   let baseFetcher;
   if (options.fetcher) {
     baseFetcher = options.fetcher;
   } else if (payload == null ? void 0 : payload.f) {
-    const configFetcher = createConfigFetcher(payload.f, (_g = payload.o) != null ? _g : {});
+    const configFetcher = createConfigFetcher(payload.f, (_l = payload.o) != null ? _l : {});
     baseFetcher = async () => {
       var _a3;
       const result = await configFetcher.fetch();
@@ -12237,7 +12443,7 @@ async function _initCore(options) {
   }
   const warnedAppFailures = /* @__PURE__ */ new Set();
   const appLoadingFetcher = baseFetcher ? async () => {
-    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h, _i, _j, _k, _l;
+    var _a3, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2;
     const config = await baseFetcher();
     const tileCount = (_b2 = (_a3 = config.tiles) == null ? void 0 : _a3.length) != null ? _b2 : 0;
     const actionCount = (_d2 = (_c2 = config.actions) == null ? void 0 : _c2.length) != null ? _d2 : 0;
@@ -12262,10 +12468,10 @@ async function _initCore(options) {
     console.log(
       "[Syntro Bootstrap] Config fetched:",
       `tiles=${(_g2 = (_f2 = config.tiles) == null ? void 0 : _f2.length) != null ? _g2 : 0},`,
-      `actions=${(_i = (_h = config.actions) == null ? void 0 : _h.length) != null ? _i : 0},`,
-      `theme=${(_k = (_j = config.theme) == null ? void 0 : _j.name) != null ? _k : "none"}`
+      `actions=${(_i2 = (_h2 = config.actions) == null ? void 0 : _h2.length) != null ? _i2 : 0},`,
+      `theme=${(_k2 = (_j2 = config.theme) == null ? void 0 : _j2.name) != null ? _k2 : "none"}`
     );
-    if (((_l = config.actions) == null ? void 0 : _l.length) > 0) {
+    if (((_l2 = config.actions) == null ? void 0 : _l2.length) > 0) {
       console.log(
         "[Syntro Bootstrap] Actions in config:",
         config.actions.map(
@@ -12318,13 +12524,23 @@ async function _initCore(options) {
     }
     return config;
   } : void 0;
+  if (platformAdapter) {
+    debug("Syntro Bootstrap", `Detected platform: ${platformAdapter.name}`);
+    try {
+      await platformAdapter.onInit();
+      debug("Syntro Bootstrap", `Platform adapter initialized: ${platformAdapter.name}`);
+    } catch (err) {
+      warn("Syntro Bootstrap", `Platform adapter init failed: ${platformAdapter.name}`, err);
+    }
+  }
   const canvas = await createSmartCanvas({
     ...options.canvas,
     fetcher: appLoadingFetcher,
     integrations: { experiments, telemetry },
     editorUrl,
-    runtime: runtime3
+    runtime: runtime3,
     // Pass runtime so actions can be applied
+    platformAdapter: platformAdapter != null ? platformAdapter : void 0
   });
   return { canvas, runtime: runtime3, experiments, telemetry, sessionMetrics, appLoader };
 }
@@ -12362,10 +12578,6 @@ if (typeof window !== "undefined") {
 
 export {
   runtime,
-  base,
-  slateGrey,
-  red,
-  purple,
   runtime2,
   createAppContext,
   cleanupAppContext,
@@ -12445,6 +12657,11 @@ export {
   createEventBus,
   EventHistory,
   NavigationMonitor,
+  ShopifyAntiFlicker,
+  ShopifyAdapter,
+  detectPlatform,
+  COOKIE_NAME,
+  ShopifyPixelBridge,
   StateStore,
   createStateStore,
   getSlotType,
@@ -12467,4 +12684,4 @@ export {
   encodeToken,
   Syntro
 };
-//# sourceMappingURL=chunk-JCDCANR7.js.map
+//# sourceMappingURL=chunk-NVV7IWJC.js.map