@syntrologie/runtime-sdk 2.8.0-canary.8 → 2.8.0

package/dist/{chunk-OB5AKUQT.js → chunk-4J6BCKWS.js}

@@ -34,6 +34,11 @@ function guardAgainstReconciliation(container, anchor, reinsertFn, opts) {
         debounceTimer = setTimeout(() => {
           if (disconnected)
             return;
+          if (!anchor.isConnected) {
+            observer.disconnect();
+            disconnected = true;
+            return;
+          }
           retries++;
           try {
             reinsertFn();
@@ -75,7 +80,16 @@ var ALLOWED_TAGS = /* @__PURE__ */ new Set([
   "sup",
   "sub",
   "a",
-  "button"
+  "button",
+  // SVG elements (for inline Lucide icons in config HTML)
+  "svg",
+  "path",
+  "circle",
+  "line",
+  "polyline",
+  "polygon",
+  "rect",
+  "g"
 ]);
 function sanitizeHtml(html) {
   var _a2;
@@ -213,15 +227,20 @@ var executeInsertHtml = async (action, context) => {
         container.removeEventListener("click", deepLinkHandler);
       }
       guardCleanup();
-      if (action.position === "replace" && originalContent !== null) {
-        const restoredEl = document.createElement(anchorEl.tagName);
-        restoredEl.innerHTML = originalContent;
-        Array.from(anchorEl.attributes).forEach((attr) => {
-          restoredEl.setAttribute(attr.name, attr.value);
-        });
-        container.replaceWith(restoredEl);
-      } else {
-        container.remove();
+      if (!container.isConnected)
+        return;
+      try {
+        if (action.position === "replace" && originalContent !== null) {
+          const restoredEl = document.createElement(anchorEl.tagName);
+          restoredEl.innerHTML = originalContent;
+          Array.from(anchorEl.attributes).forEach((attr) => {
+            restoredEl.setAttribute(attr.name, attr.value);
+          });
+          container.replaceWith(restoredEl);
+        } else {
+          container.remove();
+        }
+      } catch {
       }
     },
     updateFn: (changes) => {
@@ -251,6 +270,8 @@ var executeSetText = async (action, context) => {
   });
   return {
     cleanup: () => {
+      if (!anchorEl.isConnected)
+        return;
       anchorEl.textContent = originalText;
     },
     updateFn: (changes) => {
@@ -292,6 +313,8 @@ var executeSetAttr = async (action, context) => {
   });
   return {
     cleanup: () => {
+      if (!anchorEl.isConnected)
+        return;
       if (hadAttribute && originalValue !== null) {
         anchorEl.setAttribute(action.attr, originalValue);
       } else {
@@ -325,6 +348,8 @@ var executeAddClass = async (action, context) => {
   });
   return {
     cleanup: () => {
+      if (!anchorEl.isConnected)
+        return;
       if (!hadClass) {
         anchorEl.classList.remove(action.className);
       }
@@ -351,6 +376,8 @@ var executeRemoveClass = async (action, context) => {
   });
   return {
     cleanup: () => {
+      if (!anchorEl.isConnected)
+        return;
       if (hadClass) {
         anchorEl.classList.add(action.className);
       }
@@ -383,6 +410,8 @@ var executeSetStyle = async (action, context) => {
   });
   return {
     cleanup: () => {
+      if (!anchorEl.isConnected)
+        return;
       for (const [prop, originalValue] of originalStyles) {
         if (originalValue) {
           anchorEl.style.setProperty(prop, originalValue);
@@ -1558,10 +1587,10 @@ function showHighlight(anchorEl, overlayRoot, opts) {
       return;
     }
     const rect = anchorEl.getBoundingClientRect();
-    const x = Math.max(0, rect.left - padding);
-    const y = Math.max(0, rect.top - padding);
-    const w = Math.min(window.innerWidth, rect.width + padding * 2);
-    const h = Math.min(window.innerHeight, rect.height + padding * 2);
+    const x = rect.left - padding;
+    const y = rect.top - padding;
+    const w = rect.width + padding * 2;
+    const h = rect.height + padding * 2;
     Object.assign(ring.style, {
       left: `${x}px`,
       top: `${y}px`,
@@ -1610,17 +1639,22 @@ function showHighlight(anchorEl, overlayRoot, opts) {
   window.addEventListener("scroll", onScroll, true);
   window.addEventListener("resize", onResize);
   const onKey = (e) => {
-    if (e.key === "Escape" && onEsc)
+    var _a3;
+    if (e.key === "Escape" && onEsc) {
+      (_a3 = opts == null ? void 0 : opts.onDismiss) == null ? void 0 : _a3.call(opts);
       handle.destroy();
+    }
   };
   if (onEsc) {
     window.addEventListener("keydown", onKey);
   }
   const onClick = (event) => {
+    var _a3;
     if (blocking) {
       event.preventDefault();
       event.stopPropagation();
     } else if (onClickOutside) {
+      (_a3 = opts == null ? void 0 : opts.onDismiss) == null ? void 0 : _a3.call(opts);
       handle.destroy();
     }
   };
@@ -1637,8 +1671,14 @@ function showHighlight(anchorEl, overlayRoot, opts) {
       scrim.style.pointerEvents = "none";
       scrim.style.opacity = "0";
       setTimeout(() => {
-        scrim.remove();
-        ring.remove();
+        try {
+          scrim.remove();
+        } catch {
+        }
+        try {
+          ring.remove();
+        } catch {
+        }
       }, 220);
     }
   };
@@ -1666,7 +1706,16 @@ var ALLOWED_TAGS2 = /* @__PURE__ */ new Set([
   "sup",
   "sub",
   "a",
-  "button"
+  "button",
+  // SVG elements (for inline Lucide icons in config HTML)
+  "svg",
+  "path",
+  "circle",
+  "line",
+  "polyline",
+  "polygon",
+  "rect",
+  "g"
 ]);
 function sanitizeHtml2(html) {
   var _a2;
@@ -1875,8 +1924,14 @@ var executeModal = async (action, context) => {
       modal2.style.transform = "translate(-50%, -50%) scale(0.95)";
       scrimEl.style.opacity = "0";
       setTimeout(() => {
-        modal2.remove();
-        scrimEl.remove();
+        try {
+          modal2.remove();
+        } catch {
+        }
+        try {
+          scrimEl.remove();
+        } catch {
+        }
       }, 200);
       context.publishEvent("action.modal_dismissed", {
         actionClicked
@@ -1923,10 +1978,12 @@ function getAnchorReference(anchorEl) {
 }
 function showTooltip(anchorEl, overlayRoot, opts) {
   var _a2;
-  const rect = anchorEl.getBoundingClientRect();
-  const isLargeElement = rect.width > window.innerWidth * 0.8 || rect.height > window.innerHeight * 0.8;
-  if (!isLargeElement) {
-    anchorEl.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+  if (!opts.trigger || opts.trigger === "immediate") {
+    const rect = anchorEl.getBoundingClientRect();
+    const isLargeElement = rect.width > window.innerWidth * 0.8 || rect.height > window.innerHeight * 0.8;
+    if (!isLargeElement) {
+      anchorEl.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+    }
   }
   const div = document.createElement("div");
   div.className = "syntro-tooltip";
@@ -2136,7 +2193,12 @@ function showTooltip(anchorEl, overlayRoot, opts) {
       }
       div.style.pointerEvents = "none";
       div.style.opacity = "0";
-      setTimeout(() => div.remove(), 200);
+      setTimeout(() => {
+        try {
+          div.remove();
+        } catch {
+        }
+      }, 200);
     }
   };
   return handle;
@@ -2169,7 +2231,7 @@ function WorkflowTracker({ workflows, expanded, onStepClick, onDismiss }) {
 }
 
 // ../adaptives/adaptive-overlays/dist/WorkflowWidget.js
-function showWorkflowToast(container, notification) {
+function showWorkflowToast(notification) {
   const toast = document.createElement("div");
   toast.setAttribute("data-testid", "workflow-toast");
   toast.className = "se-fixed se-bottom-4 se-right-4 se-z-50";
@@ -2203,7 +2265,7 @@ function showWorkflowToast(container, notification) {
     bodyEl.textContent = notification.body;
     toast.appendChild(bodyEl);
   }
-  container.appendChild(toast);
+  document.body.appendChild(toast);
   let removeTimer;
   const fadeTimer = setTimeout(() => {
     toast.style.opacity = "0";
@@ -2302,10 +2364,10 @@ function WorkflowWidgetInner({ runtime: runtime3 }) {
       return newEntries.length > 0 ? [...prev, ...newEntries] : prev;
     });
     for (const [tourId, { meta }] of tourWorkflows) {
-      if (!notifiedRef.current.has(tourId) && meta.notification && containerRef.current && !dismissed.includes(tourId) && !completed[tourId]) {
+      if (!notifiedRef.current.has(tourId) && meta.notification && !dismissed.includes(tourId) && !completed[tourId]) {
         notifiedRef.current.add(tourId);
         (_c = stateNs == null ? void 0 : stateNs.set) == null ? void 0 : _c.call(stateNs, "notified", [...notifiedRef.current]);
-        const cleanup = showWorkflowToast(containerRef.current, meta.notification);
+        const cleanup = showWorkflowToast(meta.notification);
         toastCleanupsRef.current.push(cleanup);
       }
     }
@@ -2338,8 +2400,8 @@ function WorkflowWidgetInner({ runtime: runtime3 }) {
                 notifiedRef.current.add(tourId);
                 (_c = stateNs == null ? void 0 : stateNs.set) == null ? void 0 : _c.call(stateNs, "notified", [...notifiedRef.current]);
                 const workflow = currentWorkflows.get(tourId);
-                if ((workflow == null ? void 0 : workflow.meta.notification) && containerRef.current) {
-                  const cleanup = showWorkflowToast(containerRef.current, workflow.meta.notification);
+                if (workflow == null ? void 0 : workflow.meta.notification) {
+                  const cleanup = showWorkflowToast(workflow.meta.notification);
                   toastCleanupsRef.current.push(cleanup);
                 }
               }
@@ -2443,6 +2505,10 @@ var executeHighlight = async (action, context) => {
     return { cleanup: () => {
     } };
   }
+  if (anchorEl.getAttribute("data-syntro-highlight-dismissed")) {
+    return { cleanup: () => {
+    } };
+  }
   const existing = anchorEl.getAttribute("data-syntro-highlight");
   if (existing) {
     const prev = context.overlayRoot.querySelectorAll(".syntro-spotlight-scrim, .syntro-spotlight-ring");
@@ -2465,7 +2531,10 @@ var executeHighlight = async (action, context) => {
     ringColor,
     blocking: (_i = action.blocking) != null ? _i : false,
     onClickOutside: (_j = action.onClickOutside) != null ? _j : true,
-    onEsc: (_k = action.onEsc) != null ? _k : true
+    onEsc: (_k = action.onEsc) != null ? _k : true,
+    onDismiss: () => {
+      anchorEl.setAttribute("data-syntro-highlight-dismissed", "true");
+    }
   });
   context.publishEvent("action.applied", {
     id: context.generateId(),
@@ -2476,6 +2545,7 @@ var executeHighlight = async (action, context) => {
     cleanup: () => {
       handle.destroy();
       anchorEl.removeAttribute("data-syntro-highlight");
+      anchorEl.removeAttribute("data-syntro-highlight-dismissed");
     }
   };
 };
@@ -2565,6 +2635,8 @@ var executePulse = async (action, context) => {
   return {
     cleanup: () => {
       clearTimeout(timeoutId);
+      if (!anchorEl.isConnected)
+        return;
       anchorEl.style.animation = originalAnimation;
       anchorEl.removeAttribute("data-syntro-pulse");
     }
@@ -2634,7 +2706,12 @@ var executeBadge = async (action, context) => {
   });
   return {
     cleanup: () => {
-      badge2.remove();
+      try {
+        badge2.remove();
+      } catch {
+      }
+      if (!anchorEl.isConnected)
+        return;
       if (originalPosition !== void 0) {
         anchorEl.style.position = originalPosition;
       }
@@ -3358,7 +3435,7 @@ function getAntiFlickerSnippet(config = {}) {
 }
 
 // src/version.ts
-var SDK_VERSION = "2.8.0-canary.8";
+var SDK_VERSION = "2.8.0";
 
 // src/types.ts
 var SDK_SCHEMA_VERSION = "2.0";
@@ -3641,7 +3718,8 @@ function registerFromTriggerWhen(triggerWhen, accumulator) {
       if (cond.type === "event_count" && cond.key) {
         const counter = cond.counter;
         const predicate = counter ? buildPredicate(counter) : () => true;
-        accumulator.register(cond.key, predicate);
+        const needsTimestamps = typeof cond.withinMs === "number";
+        accumulator.register(cond.key, predicate, needsTimestamps);
       }
     }
   }
@@ -3853,8 +3931,65 @@ var CanvasEvents = {
   custom: customCanvasEvent
 };
 
+// src/components/emojiToIcon.tsx
+import {
+  AlertTriangle,
+  ArrowRight,
+  Banknote,
+  Bell,
+  BookOpen,
+  CheckCircle,
+  ClipboardList,
+  Compass,
+  FileText,
+  Gamepad2,
+  HelpCircle,
+  Landmark,
+  Layers,
+  Lightbulb,
+  MessageCircle,
+  SkipForward,
+  Sparkles,
+  Timer,
+  Trophy
+} from "lucide-react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var EMOJI_ICON_MAP = {
+  "\u2753": HelpCircle,
+  "\u{1F9ED}": Compass,
+  "\u{1F4DD}": FileText,
+  "\u{1F3AF}": Layers,
+  "\u{1F3C6}": Trophy,
+  "\u2728": Sparkles,
+  "\u{1F4AC}": MessageCircle,
+  "\u{1F3AE}": Gamepad2,
+  "\u{1F4A1}": Lightbulb,
+  "\u{1F4B0}": Banknote,
+  "\u{1F4CB}": ClipboardList,
+  "\u2705": CheckCircle,
+  "\u26A0\uFE0F": AlertTriangle,
+  "\u{1F4B5}": Banknote,
+  "\u{1F3DB}\uFE0F": Landmark,
+  "\u23ED\uFE0F": SkipForward,
+  "\u27A1\uFE0F": ArrowRight,
+  "\u23F1\uFE0F": Timer,
+  "\u{1F4D6}": BookOpen,
+  "\u{1F514}": Bell
+};
+function EmojiIcon({
+  emoji,
+  size = 14,
+  color = "currentColor"
+}) {
+  const Icon = EMOJI_ICON_MAP[emoji];
+  if (!Icon) {
+    return /* @__PURE__ */ jsx2("span", { children: emoji });
+  }
+  return /* @__PURE__ */ jsx2(Icon, { size, color });
+}
+
 // src/notifications/NotificationToastStack.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var TOAST_STYLES_ID = "syntro-toast-styles";
 var TOAST_CSS = `
   @keyframes syntro-toast-slide-in {
@@ -3891,7 +4026,7 @@ function NotificationToastStack({
   const { shadowRoot } = useShadowRoot();
   ensureToastStyles(shadowRoot);
   if (notifications.length === 0) return null;
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
       "data-testid": "notification-toast-stack",
@@ -3946,7 +4081,7 @@ function NotificationToastStack({
                       padding: "10px 12px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx2(
+                      /* @__PURE__ */ jsx3(
                         "div",
                         {
                           style: {
@@ -3960,11 +4095,11 @@ function NotificationToastStack({
                             flexShrink: 0,
                             fontSize: "14px"
                           },
-                          children: (_a2 = notif.icon) != null ? _a2 : "\u{1F514}"
+                          children: /* @__PURE__ */ jsx3(EmojiIcon, { emoji: (_a2 = notif.icon) != null ? _a2 : "\u{1F514}", size: 14 })
                         }
                       ),
                       /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                        /* @__PURE__ */ jsx2(
+                        /* @__PURE__ */ jsx3(
                           "div",
                           {
                             style: {
@@ -3979,7 +4114,7 @@ function NotificationToastStack({
                             children: notif.title
                           }
                         ),
-                        notif.body && /* @__PURE__ */ jsx2(
+                        notif.body && /* @__PURE__ */ jsx3(
                           "div",
                           {
                             style: {
@@ -3995,7 +4130,7 @@ function NotificationToastStack({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx2(
+                      /* @__PURE__ */ jsx3(
                         "button",
                         {
                           type: "button",
@@ -4020,7 +4155,7 @@ function NotificationToastStack({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx2("div", { style: { height: "2px", background: "rgba(0, 0, 0, 0.08)" }, children: /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx3("div", { style: { height: "2px", background: "rgba(0, 0, 0, 0.08)" }, children: /* @__PURE__ */ jsx3(
                   "div",
                   {
                     className: "syntro-toast-progress",
@@ -4234,7 +4369,7 @@ function useNotifyWatcher(runtime3, tiles, appRegistry2) {
 
 // src/RuntimeProvider.tsx
 import { createContext as createContext2, useContext as useContext2, useEffect as useEffect4, useMemo as useMemo2, useState as useState3 } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var RuntimeReactContext = createContext2({
   runtime: null,
   context: null
@@ -4252,7 +4387,7 @@ function RuntimeProvider({ runtime: runtime3, children }) {
     return unsubscribe;
   }, [runtime3]);
   const value = useMemo2(() => ({ runtime: runtime3, context }), [runtime3, context]);
-  return /* @__PURE__ */ jsx3(RuntimeReactContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx4(RuntimeReactContext.Provider, { value, children });
 }
 function useRuntime() {
   const { runtime: runtime3 } = useContext2(RuntimeReactContext);
@@ -4326,41 +4461,17 @@ import {
 } from "react";
 
 // src/components/TileIcon.tsx
-import {
-  Compass,
-  FileText,
-  Gamepad2,
-  HelpCircle,
-  Layers,
-  MessageCircle,
-  Sparkles,
-  Trophy
-} from "lucide-react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ICON_MAP = {
-  "\u2753": HelpCircle,
-  "\u{1F9ED}": Compass,
-  "\u{1F4DD}": FileText,
-  "\u{1F3AF}": Layers,
-  "\u{1F3C6}": Trophy,
-  "\u2728": Sparkles,
-  "\u{1F4AC}": MessageCircle,
-  "\u{1F3AE}": Gamepad2
-};
+import { jsx as jsx5 } from "react/jsx-runtime";
 function TileIcon({
   emoji,
   size = 18,
   color = "currentColor"
 }) {
-  const Icon = ICON_MAP[emoji];
-  if (!Icon) {
-    return /* @__PURE__ */ jsx4("span", { children: emoji });
-  }
-  return /* @__PURE__ */ jsx4(Icon, { size, color });
+  return /* @__PURE__ */ jsx5(EmojiIcon, { emoji, size, color });
 }
 
 // src/components/TileCard.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 function WidgetMount({ widgetId, props }) {
   var _a2;
   const runtime3 = useRuntime();
@@ -4390,7 +4501,6 @@ function WidgetMount({ widgetId, props }) {
     return () => {
       handle.unmount();
       handleRef.current = null;
-      container.remove();
     };
   }, [registry, widgetId, widgetAvailable]);
   const propsJson = JSON.stringify(props);
@@ -4418,7 +4528,7 @@ function WidgetMount({ widgetId, props }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx5("div", { ref: parentRef });
+  return /* @__PURE__ */ jsx6("div", { ref: parentRef });
 }
 function TileCard({
   config,
@@ -4491,9 +4601,9 @@ function TileCard({
       onMouseLeave,
       children: [
         /* @__PURE__ */ jsxs2("div", { style: headerStyle, children: [
-          /* @__PURE__ */ jsx5("div", { style: iconStyle, children: /* @__PURE__ */ jsx5(TileIcon, { emoji: resolvedIcon, size: resolvedSubtitle ? 36 : 24 }) }),
+          /* @__PURE__ */ jsx6("div", { style: iconStyle, children: /* @__PURE__ */ jsx6(TileIcon, { emoji: resolvedIcon, size: resolvedSubtitle ? 36 : 24 }) }),
           /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx5(
+            /* @__PURE__ */ jsx6(
               "h3",
               {
                 style: {
@@ -4508,7 +4618,7 @@ function TileCard({
                 children: title != null ? title : widget
               }
             ),
-            resolvedSubtitle && /* @__PURE__ */ jsx5(
+            resolvedSubtitle && /* @__PURE__ */ jsx6(
               "p",
               {
                 style: {
@@ -4525,14 +4635,14 @@ function TileCard({
             )
           ] })
         ] }),
-        /* @__PURE__ */ jsx5(
+        /* @__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__ */ jsx5("div", { style: { paddingTop: "var(--sc-tile-gap, 0.25rem)" }, children: /* @__PURE__ */ jsx5(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
+            children: /* @__PURE__ */ jsx6("div", { style: { paddingTop: "var(--sc-tile-gap, 0.25rem)" }, children: /* @__PURE__ */ jsx6(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
           }
         )
       ]
@@ -4940,7 +5050,7 @@ function flattenThemeConfig(config) {
 
 // src/theme/ThemeProvider.tsx
 import { createContext as createContext3, useContext as useContext3, useEffect as useEffect6, useMemo as useMemo4 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var ThemeContext = createContext3(null);
 function ThemeProvider({
   children,
@@ -4971,7 +5081,7 @@ ${cssRules}
     mode: merged.mode,
     cssVariables
   };
-  return /* @__PURE__ */ jsx6(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx7(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
   const context = useContext3(ThemeContext);
@@ -4982,7 +5092,7 @@ function useTheme() {
 }
 
 // src/components/ShadowCanvasOverlay.tsx
-import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx8, 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;
@@ -5223,7 +5333,7 @@ function ShadowCanvasOverlay({
     pointerEvents: "none",
     padding: "0"
   };
-  const content = /* @__PURE__ */ jsx7(
+  const content = /* @__PURE__ */ jsx8(
     "div",
     {
       "data-shadow-canvas-id": "overlay-root",
@@ -5235,7 +5345,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__ */ jsx7("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ jsx7(
+          isFocused && canvasTitle && /* @__PURE__ */ jsx8("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ jsx8(
             "p",
             {
               style: {
@@ -5248,7 +5358,7 @@ function ShadowCanvasOverlay({
               children: canvasTitle
             }
           ) }),
-          /* @__PURE__ */ jsx7("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ jsx8(
             "div",
             {
               style: { color: "var(--sc-overlay-text-color)", padding: isFocused ? "1rem" : "0" },
@@ -5268,7 +5378,7 @@ function ShadowCanvasOverlay({
             }
           ) : isFocused ? (
             /* Focused Mode: Render first tile full size */
-            tiles.length > 0 ? /* @__PURE__ */ jsx7(
+            tiles.length > 0 ? /* @__PURE__ */ jsx8(
               TileCard,
               {
                 config: tiles[0],
@@ -5279,7 +5389,7 @@ function ShadowCanvasOverlay({
             ) : null
           ) : (
             /* Standard Mode: Stacked cards — widgets always visible */
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "div",
               {
                 style: {
@@ -5288,7 +5398,7 @@ function ShadowCanvasOverlay({
                   gap: "0.75rem",
                   width: "100%"
                 },
-                children: tiles.map((tile) => /* @__PURE__ */ jsx7(
+                children: tiles.map((tile) => /* @__PURE__ */ jsx8(
                   TileCard,
                   {
                     config: tile,
@@ -5303,7 +5413,7 @@ function ShadowCanvasOverlay({
           ) }),
           footerSlot
         ] }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "div",
           {
             onClick: toggle2,
@@ -5331,7 +5441,7 @@ function ShadowCanvasOverlay({
             zIndex: zIndex + 47
           },
           children: [
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               NotificationToastStack,
               {
                 notifications,
@@ -5401,11 +5511,11 @@ function ShadowCanvasOverlay({
                       focusable: "false",
                       style: { transition: "transform 200ms ease" },
                       children: [
-                        /* @__PURE__ */ jsx7("path", { d: "M18 6L6 18" }),
-                        /* @__PURE__ */ jsx7("path", { d: "M6 6l12 12" })
+                        /* @__PURE__ */ jsx8("path", { d: "M18 6L6 18" }),
+                        /* @__PURE__ */ jsx8("path", { d: "M6 6l12 12" })
                       ]
                     }
-                  ) : launcherIcon ? /* @__PURE__ */ jsx7(
+                  ) : launcherIcon ? /* @__PURE__ */ jsx8(
                     "img",
                     {
                       src: launcherIcon,
@@ -5433,16 +5543,16 @@ function ShadowCanvasOverlay({
                       focusable: "false",
                       style: { transition: "transform 200ms ease" },
                       children: [
-                        /* @__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" })
+                        /* @__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" })
                       ]
                     }
                   ),
                   !isOpen && notifications.length > 0 && /* @__PURE__ */ jsxs3("div", { style: { position: "absolute", top: -2, right: -2, pointerEvents: "none" }, children: [
-                    /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsx8(
                       "span",
                       {
                         className: "syntro-badge-ping",
@@ -5454,7 +5564,7 @@ function ShadowCanvasOverlay({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsx8(
                       "span",
                       {
                         className: "syntro-badge-glow",
@@ -5465,7 +5575,7 @@ function ShadowCanvasOverlay({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx7(
+                    /* @__PURE__ */ jsx8(
                       "span",
                       {
                         className: "syntro-badge-bounce",
@@ -5600,7 +5710,7 @@ function useShadowCanvasConfig({
 
 // src/SmartCanvasApp.tsx
 import { useEffect as useEffect9, useMemo as useMemo7, useRef as useRef7, useState as useState7 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function SmartCanvasApp({
   controller,
   fetcher,
@@ -5623,7 +5733,7 @@ function SmartCanvasApp({
   workspaceTheme
 }) {
   if (runtime3) {
-    return /* @__PURE__ */ jsx8(RuntimeProvider, { runtime: runtime3, children: /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(RuntimeProvider, { runtime: runtime3, children: /* @__PURE__ */ jsx9(
       SmartCanvasAppInner,
       {
         controller,
@@ -5648,7 +5758,7 @@ function SmartCanvasApp({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     SmartCanvasAppInner,
     {
       controller,
@@ -5803,16 +5913,13 @@ function SmartCanvasAppInner({
   }, [runtime3, controller]);
   const { shadowRoot } = useShadowRoot();
   const themeConfig = configState.theme;
-  if (!configState.isLoading && !hasContent) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     ThemeProvider,
     {
       themeConfig,
       workspaceTheme,
       shadowRoot,
-      children: /* @__PURE__ */ jsx8(
+      children: !configState.isLoading && !hasContent ? null : /* @__PURE__ */ jsx9(
         ShadowCanvasOverlay,
         {
           tiles: configState.tiles,
@@ -5837,7 +5944,7 @@ function SmartCanvasAppInner({
 
 // src/SmartCanvasElement.tsx
 import { createRoot as createRoot2 } from "react-dom/client";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var TAG_NAME = "smart-canvas";
 var BASE_CSS = `
 :host {
@@ -5938,13 +6045,13 @@ var SmartCanvasElement = class extends HTMLElement {
       __privateSet(this, _root, createRoot2(__privateGet(this, _mount)));
     }
     __privateGet(this, _root).render(
-      /* @__PURE__ */ jsx9(
+      /* @__PURE__ */ jsx10(
         ShadowRootProvider,
         {
           shadowRoot: __privateGet(this, _shadow),
           portalRoot: __privateGet(this, _portalRoot),
           overlayContainer: __privateGet(this, _overlayContainer),
-          children: /* @__PURE__ */ jsx9(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
+          children: /* @__PURE__ */ jsx10(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
         }
       )
     );
@@ -6513,7 +6620,7 @@ var createSmartCanvas = async (config = {}) => {
         console.log(
           "[SmartCanvas] Actions to apply:",
           canvasConfig.actions.map(
-            (a, i) => `[${i}] ${a.kind}${a.anchorId ? ` anchor="${typeof a.anchorId === "string" ? a.anchorId : a.anchorId.selector}"` : ""}${a.label ? ` "${a.label}"` : ""}`
+            (a, i) => `[${i}] ${a.kind}${a.anchorId ? ` anchor="${a.anchorId.selector}"` : ""}${a.label ? ` "${a.label}"` : ""}`
           ).join(", ")
         );
       }
@@ -8241,13 +8348,9 @@ function createActionEngine(options) {
           entry2.state = "reverted";
           publishEvent("action.reverted", { id, kind: action.kind });
         } catch (error2) {
-          entry2.state = "failed";
-          publishEvent("action.failed", {
-            id,
-            kind: action.kind,
-            error: String(error2)
-          });
-          throw error2;
+          console.warn(`[ActionEngine] Cleanup error for ${action.kind} (${id}), ignoring:`, error2);
+          entry2.state = "reverted";
+          publishEvent("action.reverted", { id, kind: action.kind });
         } finally {
           activeActions.delete(id);
         }
@@ -8291,7 +8394,7 @@ function createActionEngine(options) {
         errorMessages,
         "\nActions:",
         actions.map(
-          (a, i) => `  [${i}] ${a.kind} ${a.anchorId ? `anchor="${typeof a.anchorId === "string" ? a.anchorId : a.anchorId.selector}"` : ""} ${a.label ? `label="${a.label}"` : ""}`
+          (a, i) => `  [${i}] ${a.kind} ${a.anchorId ? `anchor="${a.anchorId.selector}"` : ""} ${a.label ? `label="${a.label}"` : ""}`
         ).join("\n")
       );
       throw new Error(`Batch validation failed: ${errorMessages}`);
@@ -8391,6 +8494,7 @@ function createAnchorResolver(opts) {
   function resolve(selector) {
     if (!root) return null;
     try {
+      if (root.matches(selector)) return root;
       return root.querySelector(selector);
     } catch {
       return null;
@@ -8736,7 +8840,7 @@ function createContextManager(options) {
 
 // src/decisions/strategies/rules.ts
 function evaluateCondition(condition, evalContext) {
-  var _a2, _b, _c, _d, _e, _f, _g;
+  var _a2, _b, _c, _d, _e;
   const { context, state, events } = evalContext;
   switch (condition.type) {
     case "page_url": {
@@ -8750,8 +8854,7 @@ function evaluateCondition(condition, evalContext) {
       return context.page.routeId === condition.routeId;
     }
     case "anchor_visible": {
-      const condSelector = typeof condition.anchorId === "string" ? condition.anchorId : (_b = (_a2 = condition.anchorId) == null ? void 0 : _a2.selector) != null ? _b : "";
-      const anchor = (_c = context.anchors) == null ? void 0 : _c.find((a) => a.anchorId === condSelector);
+      const anchor = (_a2 = context.anchors) == null ? void 0 : _a2.find((a) => a.anchorId === condition.anchorId);
       switch (condition.state) {
         case "visible":
           return (anchor == null ? void 0 : anchor.visible) === true;
@@ -8765,7 +8868,7 @@ function evaluateCondition(condition, evalContext) {
     }
     case "event_occurred": {
       if (!events) return false;
-      const withinMs = (_d = condition.withinMs) != null ? _d : 6e4;
+      const withinMs = (_b = condition.withinMs) != null ? _b : 6e4;
       return events.hasRecentEvent(condition.eventName, withinMs);
     }
     case "state_equals": {
@@ -8801,17 +8904,17 @@ function evaluateCondition(condition, evalContext) {
       }
     }
     case "dismissed": {
-      if (!state) return (_e = condition.inverted) != null ? _e : false;
+      if (!state) return (_c = condition.inverted) != null ? _c : false;
       const isDismissed = state.isDismissed(condition.key);
       return condition.inverted ? !isDismissed : isDismissed;
     }
     case "cooldown_active": {
-      if (!state) return (_f = condition.inverted) != null ? _f : false;
+      if (!state) return (_d = condition.inverted) != null ? _d : false;
       const isActive = state.isCooldownActive(condition.key);
       return condition.inverted ? !isActive : isActive;
     }
     case "frequency_limit": {
-      if (!state) return (_g = condition.inverted) != null ? _g : false;
+      if (!state) return (_e = condition.inverted) != null ? _e : false;
       const count = state.getFrequencyCount(condition.key);
       const limitReached = count >= condition.limit;
       return condition.inverted ? !limitReached : limitReached;
@@ -9246,16 +9349,24 @@ function getEventName(phEvent) {
   }
   return eventName.replace("$", "posthog.");
 }
+var INTERACTIVE_TAGS = /* @__PURE__ */ new Set(["a", "button", "input", "select", "textarea"]);
+function resolveInteractiveTag(elements, directTag) {
+  if (directTag && INTERACTIVE_TAGS.has(directTag)) return directTag;
+  if (!elements) return directTag;
+  for (const el of elements) {
+    const tag2 = el.tag_name;
+    if (tag2 && INTERACTIVE_TAGS.has(tag2)) return tag2;
+  }
+  return directTag;
+}
 function extractProps(phEvent) {
-  var _a2;
+  var _a2, _b;
   const props = {};
   const phProps = phEvent.properties || {};
   const elements = phProps.$elements;
-  if (phProps.$tag_name) {
-    props.tagName = phProps.$tag_name;
-  } else if ((_a2 = elements == null ? void 0 : elements[0]) == null ? void 0 : _a2.tag_name) {
-    props.tagName = elements[0].tag_name;
-  }
+  const directTag = (_b = phProps.$tag_name) != null ? _b : (_a2 = elements == null ? void 0 : elements[0]) == null ? void 0 : _a2.tag_name;
+  const isClickEvent = phEvent.event === "$autocapture" || phEvent.event === "$click";
+  props.tagName = isClickEvent ? resolveInteractiveTag(elements, directTag) : directTag;
   if (phProps.$el_text) props.elementText = phProps.$el_text;
   if (elements) props.elements = elements;
   if (phProps.$current_url) props.url = phProps.$current_url;
@@ -10124,9 +10235,18 @@ function createSurfaces(options) {
   }
   async function unmountEntry(entry) {
     var _a2;
-    await playExitAnimation(entry.container, entry.options.animation);
-    (_a2 = entry.cleanup) == null ? void 0 : _a2.call(entry);
-    entry.container.remove();
+    if (entry.container.isConnected) {
+      await playExitAnimation(entry.container, entry.options.animation);
+    }
+    try {
+      (_a2 = entry.cleanup) == null ? void 0 : _a2.call(entry);
+    } catch (error2) {
+      console.warn("[Surfaces] Cleanup error during unmount, ignoring:", error2);
+    }
+    try {
+      entry.container.remove();
+    } catch {
+    }
     mounts.delete(entry.slot);
     publishEvent("surface.unmounted", {
       slot: entry.slot,
@@ -10309,7 +10429,9 @@ var WidgetRegistry = class {
         var _a2;
         const mounted = this.mountedWidgets.get(mountId);
         if (mounted) {
-          (_a2 = mounted.cleanup) == null ? void 0 : _a2.call(mounted);
+          if (container.isConnected) {
+            (_a2 = mounted.cleanup) == null ? void 0 : _a2.call(mounted);
+          }
           this.mountedWidgets.delete(mountId);
           container.removeAttribute("data-widget-mount-id");
           container.removeAttribute("data-widget-id");
@@ -11159,7 +11281,7 @@ async function init(options) {
       console.log(
         "[Syntro Bootstrap] Actions in config:",
         config.actions.map(
-          (a, i) => `[${i}] ${a.kind}${a.anchorId ? ` anchor="${typeof a.anchorId === "string" ? a.anchorId : a.anchorId.selector}"` : ""}${a.label ? ` "${a.label}"` : ""}`
+          (a, i) => `[${i}] ${a.kind}${a.anchorId ? ` anchor="${a.anchorId.selector}"` : ""}${a.label ? ` "${a.label}"` : ""}`
         ).join(", ")
       );
     }
@@ -11330,4 +11452,4 @@ export {
   encodeToken,
   Syntro
 };
-//# sourceMappingURL=chunk-OB5AKUQT.js.map
+//# sourceMappingURL=chunk-4J6BCKWS.js.map