@syntrologie/runtime-sdk 2.8.0-canary.9 → 2.9.0

package/dist/smart-canvas.js

@@ -12983,6 +12983,11 @@ var SyntrologieSDK = (() => {
           debounceTimer = setTimeout(() => {
             if (disconnected)
               return;
+            if (!anchor.isConnected) {
+              observer2.disconnect();
+              disconnected = true;
+              return;
+            }
             retries++;
             try {
               reinsertFn();
@@ -13024,7 +13029,16 @@ var SyntrologieSDK = (() => {
     "sup",
     "sub",
     "a",
-    "button"
+    "button",
+    // SVG elements (for inline Lucide icons in config HTML)
+    "svg",
+    "path",
+    "circle",
+    "line",
+    "polyline",
+    "polygon",
+    "rect",
+    "g"
   ]);
   function sanitizeHtml(html3) {
     const hasNative = typeof window.Sanitizer === "function";
@@ -13159,15 +13173,20 @@ var SyntrologieSDK = (() => {
           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) => {
@@ -13196,6 +13215,8 @@ var SyntrologieSDK = (() => {
     });
     return {
       cleanup: () => {
+        if (!anchorEl.isConnected)
+          return;
         anchorEl.textContent = originalText;
       },
       updateFn: (changes) => {
@@ -13237,6 +13258,8 @@ var SyntrologieSDK = (() => {
     });
     return {
       cleanup: () => {
+        if (!anchorEl.isConnected)
+          return;
         if (hadAttribute && originalValue !== null) {
           anchorEl.setAttribute(action.attr, originalValue);
         } else {
@@ -13270,6 +13293,8 @@ var SyntrologieSDK = (() => {
     });
     return {
       cleanup: () => {
+        if (!anchorEl.isConnected)
+          return;
         if (!hadClass) {
           anchorEl.classList.remove(action.className);
         }
@@ -13296,6 +13321,8 @@ var SyntrologieSDK = (() => {
     });
     return {
       cleanup: () => {
+        if (!anchorEl.isConnected)
+          return;
         if (hadClass) {
           anchorEl.classList.add(action.className);
         }
@@ -13328,6 +13355,8 @@ var SyntrologieSDK = (() => {
     });
     return {
       cleanup: () => {
+        if (!anchorEl.isConnected)
+          return;
         for (const [prop, originalValue] of originalStyles) {
           if (originalValue) {
             anchorEl.style.setProperty(prop, originalValue);
@@ -14578,8 +14607,14 @@ var SyntrologieSDK = (() => {
         scrim.style.pointerEvents = "none";
         scrim.style.opacity = "0";
         setTimeout(() => {
-          scrim.remove();
-          ring.remove();
+          try {
+            scrim.remove();
+          } catch {
+          }
+          try {
+            ring.remove();
+          } catch {
+          }
         }, 220);
       }
     };
@@ -14607,7 +14642,16 @@ var SyntrologieSDK = (() => {
     "sup",
     "sub",
     "a",
-    "button"
+    "button",
+    // SVG elements (for inline Lucide icons in config HTML)
+    "svg",
+    "path",
+    "circle",
+    "line",
+    "polyline",
+    "polygon",
+    "rect",
+    "g"
   ]);
   function sanitizeHtml2(html3) {
     const hasNative = typeof window.Sanitizer === "function";
@@ -14814,8 +14858,14 @@ var SyntrologieSDK = (() => {
         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
@@ -16327,10 +16377,12 @@ var SyntrologieSDK = (() => {
     };
   }
   function showTooltip(anchorEl, overlayRoot, opts) {
-    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";
@@ -16540,7 +16592,12 @@ var SyntrologieSDK = (() => {
         }
         div.style.pointerEvents = "none";
         div.style.opacity = "0";
-        setTimeout(() => div.remove(), 200);
+        setTimeout(() => {
+          try {
+            div.remove();
+          } catch {
+          }
+        }, 200);
       }
     };
     return handle;
@@ -16573,7 +16630,7 @@ var SyntrologieSDK = (() => {
   }
 
   // ../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";
@@ -16607,7 +16664,7 @@ var SyntrologieSDK = (() => {
       bodyEl.textContent = notification.body;
       toast.appendChild(bodyEl);
     }
-    container.appendChild(toast);
+    document.body.appendChild(toast);
     let removeTimer;
     const fadeTimer = setTimeout(() => {
       toast.style.opacity = "0";
@@ -16696,10 +16753,10 @@ var SyntrologieSDK = (() => {
         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);
           stateNs?.set?.("notified", [...notifiedRef.current]);
-          const cleanup = showWorkflowToast(containerRef.current, meta.notification);
+          const cleanup = showWorkflowToast(meta.notification);
           toastCleanupsRef.current.push(cleanup);
         }
       }
@@ -16729,8 +16786,8 @@ var SyntrologieSDK = (() => {
                   notifiedRef.current.add(tourId);
                   stateNs?.set?.("notified", [...notifiedRef.current]);
                   const workflow = currentWorkflows.get(tourId);
-                  if (workflow?.meta.notification && containerRef.current) {
-                    const cleanup = showWorkflowToast(containerRef.current, workflow.meta.notification);
+                  if (workflow?.meta.notification) {
+                    const cleanup = showWorkflowToast(workflow.meta.notification);
                     toastCleanupsRef.current.push(cleanup);
                   }
                 }
@@ -16871,6 +16928,7 @@ var SyntrologieSDK = (() => {
       cleanup: () => {
         handle.destroy();
         anchorEl.removeAttribute("data-syntro-highlight");
+        anchorEl.removeAttribute("data-syntro-highlight-dismissed");
       }
     };
   };
@@ -16959,6 +17017,8 @@ var SyntrologieSDK = (() => {
     return {
       cleanup: () => {
         clearTimeout(timeoutId);
+        if (!anchorEl.isConnected)
+          return;
         anchorEl.style.animation = originalAnimation;
         anchorEl.removeAttribute("data-syntro-pulse");
       }
@@ -17027,7 +17087,12 @@ var SyntrologieSDK = (() => {
     });
     return {
       cleanup: () => {
-        badge2.remove();
+        try {
+          badge2.remove();
+        } catch {
+        }
+        if (!anchorEl.isConnected)
+          return;
         if (originalPosition !== void 0) {
           anchorEl.style.position = originalPosition;
         }
@@ -20426,7 +20491,10 @@ ${text2}</tr>
       },
       item: {
         backgroundColor: "var(--sc-content-background)",
-        border: "var(--sc-content-border)"
+        borderTop: "var(--sc-content-border)",
+        borderRight: "var(--sc-content-border)",
+        borderBottom: "var(--sc-content-border)",
+        borderLeft: "var(--sc-content-border)"
       },
       itemExpanded: {
         boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)"
@@ -20465,7 +20533,10 @@ ${text2}</tr>
       },
       item: {
         backgroundColor: "var(--sc-content-background)",
-        border: "var(--sc-content-border)"
+        borderTop: "var(--sc-content-border)",
+        borderRight: "var(--sc-content-border)",
+        borderBottom: "var(--sc-content-border)",
+        borderLeft: "var(--sc-content-border)"
       },
       itemExpanded: {
         boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
@@ -20846,6 +20917,20 @@ ${text2}</tr>
   var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
   var import_react5 = __toESM(require_react(), 1);
   var import_client4 = __toESM(require_client(), 1);
+  var EMOJI_SVG_MAP = {
+    "\u{1F4B5}": '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg>',
+    "\u{1F3DB}\uFE0F": '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" x2="21" y1="22" y2="22"/><line x1="6" x2="6" y1="18" y2="11"/><line x1="10" x2="10" y1="18" y2="11"/><line x1="14" x2="14" y1="18" y2="11"/><line x1="18" x2="18" y1="18" y2="11"/><polygon points="12 2 20 7 4 7"/></svg>',
+    "\u23ED\uFE0F": '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 4 15 12 5 20 5 4"/><line x1="19" x2="19" y1="5" y2="19"/></svg>',
+    "\u27A1\uFE0F": '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>',
+    "\u{1F4A1}": '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>',
+    "\u{1F4B0}": '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="20" height="12" x="2" y="6" rx="2"/><circle cx="12" cy="12" r="2"/><path d="M6 12h.01M18 12h.01"/></svg>',
+    "\u{1F4CB}": '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="M12 11h4"/><path d="M12 16h4"/><path d="M8 11h.01"/><path d="M8 16h.01"/></svg>',
+    "\u2705": '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><path d="m9 11 3 3L22 4"/></svg>',
+    "\u26A0\uFE0F": '<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>'
+  };
+  function renderIcon(emoji) {
+    return EMOJI_SVG_MAP[emoji] ?? escapeHtml(emoji);
+  }
   function escapeHtml(str) {
     return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
   }
@@ -20995,10 +21080,29 @@ ${text2}</tr>
       }
     }
   };
-  function NavTipItem({ item, isExpanded, isLast, onToggle, onNavigate, theme }) {
+  function routeMatchesCurrent(routes) {
+    if (typeof window === "undefined")
+      return false;
+    const current = window.location.pathname;
+    return routes.some((route) => {
+      const routePath = route.split("?")[0].split("#")[0];
+      if (routePath.endsWith("/**")) {
+        return current.startsWith(routePath.slice(0, -3));
+      }
+      return current === routePath;
+    });
+  }
+  function pulseElement(el) {
+    const keyframes = [
+      { boxShadow: "0 0 0 0 rgba(13, 148, 136, 0.5)" },
+      { boxShadow: "0 0 0 8px rgba(13, 148, 136, 0)" }
+    ];
+    el.animate(keyframes, { duration: 600, iterations: 3, easing: "ease-out" });
+  }
+  function NavTipItem({ item, isExpanded, isLast, onToggle, onNavigate, onFocusAnchor, theme }) {
     const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
     const colors = themeStyles2[theme];
-    const { title, description, href, icon, external } = item.config;
+    const { title, description, href, icon, external, anchor } = item.config;
     const itemStyle = {
       ...baseStyles2.item,
       ...colors.item,
@@ -21020,14 +21124,22 @@ ${text2}</tr>
       maxHeight: isExpanded ? "500px" : "0",
       paddingBottom: isExpanded ? "16px" : "0"
     };
+    const effectiveHref = anchor ? Array.isArray(anchor.route) ? anchor.route[0] : anchor.route : href;
+    const isSamePage = anchor ? routeMatchesCurrent(Array.isArray(anchor.route) ? anchor.route : [anchor.route]) : effectiveHref ? routeMatchesCurrent([effectiveHref]) : false;
+    const hasSelector = anchor?.selector && anchor.selector !== "*";
+    const isFocusAction = isSamePage && hasSelector;
+    const hasAction = !!effectiveHref || isFocusAction;
     const handleLinkClick = (e2) => {
       e2.preventDefault();
       e2.stopPropagation();
-      if (href) {
-        onNavigate(href, external ?? false);
+      if (isFocusAction && anchor) {
+        onFocusAnchor(anchor);
+      } else if (effectiveHref) {
+        onNavigate(effectiveHref, external ?? false);
       }
     };
-    return (0, import_jsx_runtime5.jsxs)("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [(0, import_jsx_runtime5.jsxs)("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && (0, import_jsx_runtime5.jsx)("span", { style: baseStyles2.icon, children: icon }), (0, import_jsx_runtime5.jsx)("span", { children: title }), (0, import_jsx_runtime5.jsx)("span", { style: chevronStyle, children: "\u203A" })] }), (0, import_jsx_runtime5.jsxs)("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [(0, import_jsx_runtime5.jsx)("p", { style: baseStyles2.description, children: description }), href && (0, import_jsx_runtime5.jsxs)("a", { href, onClick: handleLinkClick, style: { ...baseStyles2.linkButton, ...colors.linkButton }, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, children: ["Go ", external ? "\u2197" : "\u2192"] })] })] });
+    const ctaLabel = isFocusAction ? `Focus \u2192` : external ? `Go \u2197` : `Go \u2192`;
+    return (0, import_jsx_runtime5.jsxs)("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [(0, import_jsx_runtime5.jsxs)("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && (0, import_jsx_runtime5.jsx)("span", { style: baseStyles2.icon, dangerouslySetInnerHTML: { __html: renderIcon(icon) } }), (0, import_jsx_runtime5.jsx)("span", { children: title }), (0, import_jsx_runtime5.jsx)("span", { style: chevronStyle, children: "\u203A" })] }), (0, import_jsx_runtime5.jsxs)("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [(0, import_jsx_runtime5.jsx)("p", { style: baseStyles2.description, children: description }), hasAction && (0, import_jsx_runtime5.jsx)("a", { href: effectiveHref || "#", onClick: handleLinkClick, style: { ...baseStyles2.linkButton, ...colors.linkButton }, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, children: ctaLabel })] })] });
   }
   function NavWidget({ config, runtime: runtime7, instanceId }) {
     const [renderTick, forceUpdate] = (0, import_react5.useReducer)((x2) => x2 + 1, 0);
@@ -21124,9 +21236,24 @@ ${text2}</tr>
       } else {
         const url = new URL(href, window.location.origin);
         url.search = window.location.search;
-        window.location.href = url.toString();
+        window.history.pushState(null, "", url.toString());
+        window.dispatchEvent(new PopStateEvent("popstate"));
       }
     }, [runtime7.events, instanceId]);
+    const handleFocusAnchor = (0, import_react5.useCallback)((anchor) => {
+      const el = document.querySelector(anchor.selector);
+      if (!(el instanceof HTMLElement))
+        return;
+      runtime7.events.publish("nav:tip_focused", {
+        instanceId,
+        selector: anchor.selector,
+        route: anchor.route,
+        timestamp: Date.now()
+      });
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+      pulseElement(el);
+      setTimeout(() => el.focus(), 400);
+    }, [runtime7.events, instanceId]);
     const containerStyle = {
       ...baseStyles2.container,
       ...themeStyles2[resolvedTheme].container
@@ -21139,7 +21266,7 @@ ${text2}</tr>
       ...baseStyles2.emptyState,
       ...themeStyles2[resolvedTheme].emptyState
     };
-    const renderItems = (items) => items.map((tip, index2) => (0, import_jsx_runtime5.jsx)(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), isLast: index2 === items.length - 1, onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, theme: resolvedTheme }, tip.config.id));
+    const renderItems = (items) => items.map((tip, index2) => (0, import_jsx_runtime5.jsx)(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), isLast: index2 === items.length - 1, onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, onFocusAnchor: handleFocusAnchor, theme: resolvedTheme }, tip.config.id));
     if (visibleTips.length === 0) {
       return (0, import_jsx_runtime5.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: (0, import_jsx_runtime5.jsx)("div", { style: emptyStateStyle, children: "You're all set for now! We'll share helpful tips here when they're relevant to what you're doing." }) });
     }
@@ -21168,7 +21295,7 @@ ${text2}</tr>
       <div style="font-family: system-ui; max-width: 100%;">
         ${tips.map((tip) => `
           <div style="margin-bottom: 4px; padding: 12px 16px; background: ${slateGrey[12]}; border-radius: 8px;">
-            ${tip.config.icon ? `<span>${escapeHtml(tip.config.icon)}</span> ` : ""}<strong>${escapeHtml(tip.config.title)}</strong>
+            ${tip.config.icon ? `<span>${renderIcon(tip.config.icon)}</span> ` : ""}<strong>${escapeHtml(tip.config.title)}</strong>
             <p style="margin-top: 8px; color: ${slateGrey[6]}; font-size: 13px;">${escapeHtml(tip.config.description)}</p>
             ${tip.config.href ? `<a href="${escapeHtml(tip.config.href)}" style="color: ${purple[2]}; font-size: 13px;">Go &rarr;</a>` : ""}
           </div>
@@ -21438,7 +21565,7 @@ ${text2}</tr>
   }
 
   // src/version.ts
-  var SDK_VERSION = "2.8.0-canary.9";
+  var SDK_VERSION = "2.9.0";
 
   // src/types.ts
   var SDK_SCHEMA_VERSION = "2.0";
@@ -21836,7 +21963,8 @@ ${text2}</tr>
         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);
         }
       }
     }
@@ -22356,8 +22484,390 @@ ${text2}</tr>
     custom: customCanvasEvent
   };
 
-  // src/notifications/NotificationToastStack.tsx
+  // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
+  var import_react8 = __toESM(require_react());
+
+  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
+  var mergeClasses = (...classes2) => classes2.filter((className, index2, array) => {
+    return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index2;
+  }).join(" ").trim();
+
+  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
+  var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+
+  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
+  var toCamelCase = (string) => string.replace(
+    /^([A-Z])|[\s-_]+(\w)/g,
+    (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
+  );
+
+  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
+  var toPascalCase = (string) => {
+    const camelCase = toCamelCase(string);
+    return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
+  };
+
+  // ../../node_modules/lucide-react/dist/esm/Icon.js
+  var import_react7 = __toESM(require_react());
+
+  // ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
+  var defaultAttributes = {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  };
+
+  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
+  var hasA11yProp = (props) => {
+    for (const prop in props) {
+      if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
+        return true;
+      }
+    }
+    return false;
+  };
+
+  // ../../node_modules/lucide-react/dist/esm/Icon.js
+  var Icon = (0, import_react7.forwardRef)(
+    ({
+      color = "currentColor",
+      size: size2 = 24,
+      strokeWidth = 2,
+      absoluteStrokeWidth,
+      className = "",
+      children,
+      iconNode,
+      ...rest
+    }, ref) => (0, import_react7.createElement)(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes,
+        width: size2,
+        height: size2,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size2) : strokeWidth,
+        className: mergeClasses("lucide", className),
+        ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag3, attrs]) => (0, import_react7.createElement)(tag3, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    )
+  );
+
+  // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
+  var createLucideIcon = (iconName, iconNode) => {
+    const Component = (0, import_react8.forwardRef)(
+      ({ className, ...props }, ref) => (0, import_react8.createElement)(Icon, {
+        ref,
+        iconNode,
+        className: mergeClasses(
+          `lucide-${toKebabCase(toPascalCase(iconName))}`,
+          `lucide-${iconName}`,
+          className
+        ),
+        ...props
+      })
+    );
+    Component.displayName = toPascalCase(iconName);
+    return Component;
+  };
+
+  // ../../node_modules/lucide-react/dist/esm/icons/arrow-right.js
+  var __iconNode = [
+    ["path", { d: "M5 12h14", key: "1ays0h" }],
+    ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
+  ];
+  var ArrowRight = createLucideIcon("arrow-right", __iconNode);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/banknote.js
+  var __iconNode2 = [
+    ["rect", { width: "20", height: "12", x: "2", y: "6", rx: "2", key: "9lu3g6" }],
+    ["circle", { cx: "12", cy: "12", r: "2", key: "1c9p78" }],
+    ["path", { d: "M6 12h.01M18 12h.01", key: "113zkx" }]
+  ];
+  var Banknote = createLucideIcon("banknote", __iconNode2);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/bell.js
+  var __iconNode3 = [
+    ["path", { d: "M10.268 21a2 2 0 0 0 3.464 0", key: "vwvbt9" }],
+    [
+      "path",
+      {
+        d: "M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326",
+        key: "11g9vi"
+      }
+    ]
+  ];
+  var Bell = createLucideIcon("bell", __iconNode3);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/book-open.js
+  var __iconNode4 = [
+    ["path", { d: "M12 7v14", key: "1akyts" }],
+    [
+      "path",
+      {
+        d: "M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z",
+        key: "ruj8y"
+      }
+    ]
+  ];
+  var BookOpen = createLucideIcon("book-open", __iconNode4);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/circle-check-big.js
+  var __iconNode5 = [
+    ["path", { d: "M21.801 10A10 10 0 1 1 17 3.335", key: "yps3ct" }],
+    ["path", { d: "m9 11 3 3L22 4", key: "1pflzl" }]
+  ];
+  var CircleCheckBig = createLucideIcon("circle-check-big", __iconNode5);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/circle-question-mark.js
+  var __iconNode6 = [
+    ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+    ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
+    ["path", { d: "M12 17h.01", key: "p32p05" }]
+  ];
+  var CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode6);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/clipboard-list.js
+  var __iconNode7 = [
+    ["rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1", key: "tgr4d6" }],
+    [
+      "path",
+      {
+        d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2",
+        key: "116196"
+      }
+    ],
+    ["path", { d: "M12 11h4", key: "1jrz19" }],
+    ["path", { d: "M12 16h4", key: "n85exb" }],
+    ["path", { d: "M8 11h.01", key: "1dfujw" }],
+    ["path", { d: "M8 16h.01", key: "18s6g9" }]
+  ];
+  var ClipboardList = createLucideIcon("clipboard-list", __iconNode7);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/compass.js
+  var __iconNode8 = [
+    ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+    [
+      "path",
+      {
+        d: "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z",
+        key: "9ktpf1"
+      }
+    ]
+  ];
+  var Compass = createLucideIcon("compass", __iconNode8);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/file-text.js
+  var __iconNode9 = [
+    [
+      "path",
+      {
+        d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+        key: "1oefj6"
+      }
+    ],
+    ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
+    ["path", { d: "M10 9H8", key: "b1mrlr" }],
+    ["path", { d: "M16 13H8", key: "t4e002" }],
+    ["path", { d: "M16 17H8", key: "z1uh3a" }]
+  ];
+  var FileText = createLucideIcon("file-text", __iconNode9);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/gamepad-2.js
+  var __iconNode10 = [
+    ["line", { x1: "6", x2: "10", y1: "11", y2: "11", key: "1gktln" }],
+    ["line", { x1: "8", x2: "8", y1: "9", y2: "13", key: "qnk9ow" }],
+    ["line", { x1: "15", x2: "15.01", y1: "12", y2: "12", key: "krot7o" }],
+    ["line", { x1: "18", x2: "18.01", y1: "10", y2: "10", key: "1lcuu1" }],
+    [
+      "path",
+      {
+        d: "M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z",
+        key: "mfqc10"
+      }
+    ]
+  ];
+  var Gamepad2 = createLucideIcon("gamepad-2", __iconNode10);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/landmark.js
+  var __iconNode11 = [
+    ["path", { d: "M10 18v-7", key: "wt116b" }],
+    [
+      "path",
+      {
+        d: "M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z",
+        key: "1m329m"
+      }
+    ],
+    ["path", { d: "M14 18v-7", key: "vav6t3" }],
+    ["path", { d: "M18 18v-7", key: "aexdmj" }],
+    ["path", { d: "M3 22h18", key: "8prr45" }],
+    ["path", { d: "M6 18v-7", key: "1ivflk" }]
+  ];
+  var Landmark = createLucideIcon("landmark", __iconNode11);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/layers.js
+  var __iconNode12 = [
+    [
+      "path",
+      {
+        d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
+        key: "zw3jo"
+      }
+    ],
+    [
+      "path",
+      {
+        d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
+        key: "1wduqc"
+      }
+    ],
+    [
+      "path",
+      {
+        d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
+        key: "kqbvx6"
+      }
+    ]
+  ];
+  var Layers = createLucideIcon("layers", __iconNode12);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/lightbulb.js
+  var __iconNode13 = [
+    [
+      "path",
+      {
+        d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",
+        key: "1gvzjb"
+      }
+    ],
+    ["path", { d: "M9 18h6", key: "x1upvd" }],
+    ["path", { d: "M10 22h4", key: "ceow96" }]
+  ];
+  var Lightbulb = createLucideIcon("lightbulb", __iconNode13);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/message-circle.js
+  var __iconNode14 = [
+    [
+      "path",
+      {
+        d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719",
+        key: "1sd12s"
+      }
+    ]
+  ];
+  var MessageCircle = createLucideIcon("message-circle", __iconNode14);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/skip-forward.js
+  var __iconNode15 = [
+    ["path", { d: "M21 4v16", key: "7j8fe9" }],
+    [
+      "path",
+      {
+        d: "M6.029 4.285A2 2 0 0 0 3 6v12a2 2 0 0 0 3.029 1.715l9.997-5.998a2 2 0 0 0 .003-3.432z",
+        key: "zs4d6"
+      }
+    ]
+  ];
+  var SkipForward = createLucideIcon("skip-forward", __iconNode15);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/sparkles.js
+  var __iconNode16 = [
+    [
+      "path",
+      {
+        d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z",
+        key: "1s2grr"
+      }
+    ],
+    ["path", { d: "M20 2v4", key: "1rf3ol" }],
+    ["path", { d: "M22 4h-4", key: "gwowj6" }],
+    ["circle", { cx: "4", cy: "20", r: "2", key: "6kqj1y" }]
+  ];
+  var Sparkles = createLucideIcon("sparkles", __iconNode16);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/timer.js
+  var __iconNode17 = [
+    ["line", { x1: "10", x2: "14", y1: "2", y2: "2", key: "14vaq8" }],
+    ["line", { x1: "12", x2: "15", y1: "14", y2: "11", key: "17fdiu" }],
+    ["circle", { cx: "12", cy: "14", r: "8", key: "1e1u0o" }]
+  ];
+  var Timer = createLucideIcon("timer", __iconNode17);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/triangle-alert.js
+  var __iconNode18 = [
+    [
+      "path",
+      {
+        d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+        key: "wmoenq"
+      }
+    ],
+    ["path", { d: "M12 9v4", key: "juzpu7" }],
+    ["path", { d: "M12 17h.01", key: "p32p05" }]
+  ];
+  var TriangleAlert = createLucideIcon("triangle-alert", __iconNode18);
+
+  // ../../node_modules/lucide-react/dist/esm/icons/trophy.js
+  var __iconNode19 = [
+    ["path", { d: "M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978", key: "1n3hpd" }],
+    ["path", { d: "M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978", key: "rfe1zi" }],
+    ["path", { d: "M18 9h1.5a1 1 0 0 0 0-5H18", key: "7xy6bh" }],
+    ["path", { d: "M4 22h16", key: "57wxv0" }],
+    ["path", { d: "M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z", key: "1mhfuq" }],
+    ["path", { d: "M6 9H4.5a1 1 0 0 1 0-5H6", key: "tex48p" }]
+  ];
+  var Trophy = createLucideIcon("trophy", __iconNode19);
+
+  // src/components/emojiToIcon.tsx
   var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
+  var EMOJI_ICON_MAP = {
+    "\u2753": CircleQuestionMark,
+    "\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": CircleCheckBig,
+    "\u26A0\uFE0F": TriangleAlert,
+    "\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: size2 = 14,
+    color = "currentColor"
+  }) {
+    const Icon2 = EMOJI_ICON_MAP[emoji];
+    if (!Icon2) {
+      return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { children: emoji });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon2, { size: size2, color });
+  }
+
+  // src/notifications/NotificationToastStack.tsx
+  var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
   var TOAST_STYLES_ID = "syntro-toast-styles";
   var TOAST_CSS = `
   @keyframes syntro-toast-slide-in {
@@ -22394,7 +22904,7 @@ ${text2}</tr>
     const { shadowRoot } = useShadowRoot();
     ensureToastStyles(shadowRoot);
     if (notifications.length === 0) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       "div",
       {
         "data-testid": "notification-toast-stack",
@@ -22411,7 +22921,7 @@ ${text2}</tr>
         },
         children: notifications.map((notif) => (
           // biome-ignore lint/a11y/noStaticElementInteractions: Hover effects for pause-on-hover UX; not interactive in the a11y sense
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
             "div",
             {
               className: "syntro-toast-enter",
@@ -22436,7 +22946,7 @@ ${text2}</tr>
                 if (bar) bar.classList.remove("paused");
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
                   "div",
                   {
                     onClick: () => onClickNotification(notif),
@@ -22447,7 +22957,7 @@ ${text2}</tr>
                       padding: "10px 12px"
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         "div",
                         {
                           style: {
@@ -22461,11 +22971,11 @@ ${text2}</tr>
                             flexShrink: 0,
                             fontSize: "14px"
                           },
-                          children: notif.icon ?? "\u{1F514}"
+                          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(EmojiIcon, { emoji: notif.icon ?? "\u{1F514}", size: 14 })
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           "div",
                           {
                             style: {
@@ -22480,7 +22990,7 @@ ${text2}</tr>
                             children: notif.title
                           }
                         ),
-                        notif.body && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                        notif.body && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                           "div",
                           {
                             style: {
@@ -22496,7 +23006,7 @@ ${text2}</tr>
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                         "button",
                         {
                           type: "button",
@@ -22521,7 +23031,7 @@ ${text2}</tr>
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: "2px", background: "rgba(0, 0, 0, 0.08)" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { style: { height: "2px", background: "rgba(0, 0, 0, 0.08)" }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "div",
                   {
                     className: "syntro-toast-progress",
@@ -22542,7 +23052,7 @@ ${text2}</tr>
   }
 
   // src/notifications/useNotifications.ts
-  var import_react7 = __toESM(require_react(), 1);
+  var import_react9 = __toESM(require_react(), 1);
 
   // src/notifications/types.ts
   var MAX_VISIBLE_TOASTS = 3;
@@ -22594,10 +23104,10 @@ ${text2}</tr>
 
   // src/notifications/useNotifications.ts
   function useNotifications(eventBus, tiles) {
-    const [notifications, setNotifications] = (0, import_react7.useState)([]);
-    const cooldownMap = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
-    const timerIds = (0, import_react7.useRef)(/* @__PURE__ */ new Map());
-    const publishDismissed = (0, import_react7.useCallback)(
+    const [notifications, setNotifications] = (0, import_react9.useState)([]);
+    const cooldownMap = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+    const timerIds = (0, import_react9.useRef)(/* @__PURE__ */ new Map());
+    const publishDismissed = (0, import_react9.useCallback)(
       (notif) => {
         eventBus?.publish(StandardEvents.NOTIFICATION_DISMISSED, {
           notificationId: notif.id,
@@ -22607,7 +23117,7 @@ ${text2}</tr>
       },
       [eventBus]
     );
-    const scheduleDismiss = (0, import_react7.useCallback)(
+    const scheduleDismiss = (0, import_react9.useCallback)(
       (notif) => {
         const timerId = setTimeout(() => {
           setNotifications((prev) => prev.filter((n2) => n2.id !== notif.id));
@@ -22618,7 +23128,7 @@ ${text2}</tr>
       },
       [publishDismissed]
     );
-    const dismiss = (0, import_react7.useCallback)(
+    const dismiss = (0, import_react9.useCallback)(
       (id) => {
         setNotifications((prev) => {
           const notif = prev.find((n2) => n2.id === id);
@@ -22633,7 +23143,7 @@ ${text2}</tr>
       },
       [publishDismissed]
     );
-    (0, import_react7.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (!eventBus) return;
       const unsubscribe2 = eventBus.subscribe((event) => {
         const match = matchEvent(event, tiles);
@@ -22683,7 +23193,7 @@ ${text2}</tr>
   }
 
   // src/notifications/useNotifyWatcher.ts
-  var import_react8 = __toESM(require_react(), 1);
+  var import_react10 = __toESM(require_react(), 1);
   function collectEntries(tiles, appRegistry2) {
     const entries = [];
     for (const tile of tiles) {
@@ -22697,8 +23207,8 @@ ${text2}</tr>
     return entries;
   }
   function useNotifyWatcher(runtime7, tiles, appRegistry2) {
-    const prevStateRef = (0, import_react8.useRef)(/* @__PURE__ */ new Map());
-    (0, import_react8.useEffect)(() => {
+    const prevStateRef = (0, import_react10.useRef)(/* @__PURE__ */ new Map());
+    (0, import_react10.useEffect)(() => {
       if (!runtime7?.events || !appRegistry2) return;
       const entries = collectEntries(tiles, appRegistry2);
       if (entries.length === 0) return;
@@ -22731,17 +23241,17 @@ ${text2}</tr>
   }
 
   // src/RuntimeProvider.tsx
-  var import_react9 = __toESM(require_react(), 1);
-  var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
-  var RuntimeReactContext = (0, import_react9.createContext)({
+  var import_react11 = __toESM(require_react(), 1);
+  var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
+  var RuntimeReactContext = (0, import_react11.createContext)({
     runtime: null,
     context: null
   });
   function RuntimeProvider({ runtime: runtime7, children }) {
-    const [context, setContext] = (0, import_react9.useState)(
+    const [context, setContext] = (0, import_react11.useState)(
       runtime7 ? runtime7.context.get() : null
     );
-    (0, import_react9.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       if (!runtime7) return;
       setContext(runtime7.context.get());
       const unsubscribe2 = runtime7.context.subscribe((ctx) => {
@@ -22749,15 +23259,15 @@ ${text2}</tr>
       });
       return unsubscribe2;
     }, [runtime7]);
-    const value = (0, import_react9.useMemo)(() => ({ runtime: runtime7, context }), [runtime7, context]);
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RuntimeReactContext.Provider, { value, children });
+    const value = (0, import_react11.useMemo)(() => ({ runtime: runtime7, context }), [runtime7, context]);
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(RuntimeReactContext.Provider, { value, children });
   }
   function useRuntime() {
-    const { runtime: runtime7 } = (0, import_react9.useContext)(RuntimeReactContext);
+    const { runtime: runtime7 } = (0, import_react11.useContext)(RuntimeReactContext);
     return runtime7;
   }
   function useRuntimeContext() {
-    const { context } = (0, import_react9.useContext)(RuntimeReactContext);
+    const { context } = (0, import_react11.useContext)(RuntimeReactContext);
     return context;
   }
   function usePageContext() {
@@ -22774,7 +23284,7 @@ ${text2}</tr>
   }
   function useRuntimeEvents(filter, callback, deps = []) {
     const runtime7 = useRuntime();
-    (0, import_react9.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       if (!runtime7) return;
       const unsubscribe2 = filter ? runtime7.events.subscribe(filter, callback) : runtime7.events.subscribe(callback);
       return unsubscribe2;
@@ -22786,12 +23296,12 @@ ${text2}</tr>
   }
   function useDecision(strategy, defaultValue) {
     const runtime7 = useRuntime();
-    const [result, setResult] = (0, import_react9.useState)({
+    const [result, setResult] = (0, import_react11.useState)({
       value: defaultValue,
       isFallback: true,
       isLoading: true
     });
-    (0, import_react9.useEffect)(() => {
+    (0, import_react11.useEffect)(() => {
       if (!runtime7 || !strategy) {
         setResult({ value: defaultValue, isFallback: true, isLoading: false });
         return;
@@ -23202,21 +23712,21 @@ ${text2}</tr>
   }
 
   // src/theme/ThemeProvider.tsx
-  var import_react10 = __toESM(require_react(), 1);
-  var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
-  var ThemeContext = (0, import_react10.createContext)(null);
+  var import_react12 = __toESM(require_react(), 1);
+  var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+  var ThemeContext = (0, import_react12.createContext)(null);
   function ThemeProvider({
     children,
     themeConfig,
     workspaceTheme,
     shadowRoot
   }) {
-    const merged = (0, import_react10.useMemo)(
+    const merged = (0, import_react12.useMemo)(
       () => workspaceTheme ? mergeThemeWithWorkspace(workspaceTheme, themeConfig ?? {}) : mergeThemeConfig(themeConfig ?? {}),
       [themeConfig, workspaceTheme]
     );
-    const cssVariables = (0, import_react10.useMemo)(() => flattenThemeConfig(merged), [merged]);
-    (0, import_react10.useEffect)(() => {
+    const cssVariables = (0, import_react12.useMemo)(() => flattenThemeConfig(merged), [merged]);
+    (0, import_react12.useEffect)(() => {
       if (!shadowRoot) return;
       let styleEl = shadowRoot.querySelector("#sc-theme-vars");
       if (!styleEl) {
@@ -23234,10 +23744,10 @@ ${cssRules}
       mode: merged.mode,
       cssVariables
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ThemeContext.Provider, { value, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ThemeContext.Provider, { value, children });
   }
   function useTheme() {
-    const context = (0, import_react10.useContext)(ThemeContext);
+    const context = (0, import_react12.useContext)(ThemeContext);
     if (!context) {
       throw new Error("useTheme must be used within a ThemeProvider");
     }
@@ -23247,247 +23757,18 @@ ${cssRules}
   // src/components/TileCard.tsx
   var import_react13 = __toESM(require_react(), 1);
 
-  // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-  var import_react12 = __toESM(require_react());
-
-  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/mergeClasses.js
-  var mergeClasses = (...classes2) => classes2.filter((className, index2, array) => {
-    return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index2;
-  }).join(" ").trim();
-
-  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/toKebabCase.js
-  var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
-
-  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/toCamelCase.js
-  var toCamelCase = (string) => string.replace(
-    /^([A-Z])|[\s-_]+(\w)/g,
-    (match, p1, p2) => p2 ? p2.toUpperCase() : p1.toLowerCase()
-  );
-
-  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/toPascalCase.js
-  var toPascalCase = (string) => {
-    const camelCase = toCamelCase(string);
-    return camelCase.charAt(0).toUpperCase() + camelCase.slice(1);
-  };
-
-  // ../../node_modules/lucide-react/dist/esm/Icon.js
-  var import_react11 = __toESM(require_react());
-
-  // ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
-  var defaultAttributes = {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    viewBox: "0 0 24 24",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  };
-
-  // ../../node_modules/lucide-react/dist/esm/shared/src/utils/hasA11yProp.js
-  var hasA11yProp = (props) => {
-    for (const prop in props) {
-      if (prop.startsWith("aria-") || prop === "role" || prop === "title") {
-        return true;
-      }
-    }
-    return false;
-  };
-
-  // ../../node_modules/lucide-react/dist/esm/Icon.js
-  var Icon = (0, import_react11.forwardRef)(
-    ({
-      color = "currentColor",
-      size: size2 = 24,
-      strokeWidth = 2,
-      absoluteStrokeWidth,
-      className = "",
-      children,
-      iconNode,
-      ...rest
-    }, ref) => (0, import_react11.createElement)(
-      "svg",
-      {
-        ref,
-        ...defaultAttributes,
-        width: size2,
-        height: size2,
-        stroke: color,
-        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size2) : strokeWidth,
-        className: mergeClasses("lucide", className),
-        ...!children && !hasA11yProp(rest) && { "aria-hidden": "true" },
-        ...rest
-      },
-      [
-        ...iconNode.map(([tag3, attrs]) => (0, import_react11.createElement)(tag3, attrs)),
-        ...Array.isArray(children) ? children : [children]
-      ]
-    )
-  );
-
-  // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-  var createLucideIcon = (iconName, iconNode) => {
-    const Component = (0, import_react12.forwardRef)(
-      ({ className, ...props }, ref) => (0, import_react12.createElement)(Icon, {
-        ref,
-        iconNode,
-        className: mergeClasses(
-          `lucide-${toKebabCase(toPascalCase(iconName))}`,
-          `lucide-${iconName}`,
-          className
-        ),
-        ...props
-      })
-    );
-    Component.displayName = toPascalCase(iconName);
-    return Component;
-  };
-
-  // ../../node_modules/lucide-react/dist/esm/icons/circle-question-mark.js
-  var __iconNode = [
-    ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-    ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3", key: "1u773s" }],
-    ["path", { d: "M12 17h.01", key: "p32p05" }]
-  ];
-  var CircleQuestionMark = createLucideIcon("circle-question-mark", __iconNode);
-
-  // ../../node_modules/lucide-react/dist/esm/icons/compass.js
-  var __iconNode2 = [
-    ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
-    [
-      "path",
-      {
-        d: "m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z",
-        key: "9ktpf1"
-      }
-    ]
-  ];
-  var Compass = createLucideIcon("compass", __iconNode2);
-
-  // ../../node_modules/lucide-react/dist/esm/icons/file-text.js
-  var __iconNode3 = [
-    [
-      "path",
-      {
-        d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
-        key: "1oefj6"
-      }
-    ],
-    ["path", { d: "M14 2v5a1 1 0 0 0 1 1h5", key: "wfsgrz" }],
-    ["path", { d: "M10 9H8", key: "b1mrlr" }],
-    ["path", { d: "M16 13H8", key: "t4e002" }],
-    ["path", { d: "M16 17H8", key: "z1uh3a" }]
-  ];
-  var FileText = createLucideIcon("file-text", __iconNode3);
-
-  // ../../node_modules/lucide-react/dist/esm/icons/gamepad-2.js
-  var __iconNode4 = [
-    ["line", { x1: "6", x2: "10", y1: "11", y2: "11", key: "1gktln" }],
-    ["line", { x1: "8", x2: "8", y1: "9", y2: "13", key: "qnk9ow" }],
-    ["line", { x1: "15", x2: "15.01", y1: "12", y2: "12", key: "krot7o" }],
-    ["line", { x1: "18", x2: "18.01", y1: "10", y2: "10", key: "1lcuu1" }],
-    [
-      "path",
-      {
-        d: "M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z",
-        key: "mfqc10"
-      }
-    ]
-  ];
-  var Gamepad2 = createLucideIcon("gamepad-2", __iconNode4);
-
-  // ../../node_modules/lucide-react/dist/esm/icons/layers.js
-  var __iconNode5 = [
-    [
-      "path",
-      {
-        d: "M12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83z",
-        key: "zw3jo"
-      }
-    ],
-    [
-      "path",
-      {
-        d: "M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12",
-        key: "1wduqc"
-      }
-    ],
-    [
-      "path",
-      {
-        d: "M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17",
-        key: "kqbvx6"
-      }
-    ]
-  ];
-  var Layers = createLucideIcon("layers", __iconNode5);
-
-  // ../../node_modules/lucide-react/dist/esm/icons/message-circle.js
-  var __iconNode6 = [
-    [
-      "path",
-      {
-        d: "M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719",
-        key: "1sd12s"
-      }
-    ]
-  ];
-  var MessageCircle = createLucideIcon("message-circle", __iconNode6);
-
-  // ../../node_modules/lucide-react/dist/esm/icons/sparkles.js
-  var __iconNode7 = [
-    [
-      "path",
-      {
-        d: "M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z",
-        key: "1s2grr"
-      }
-    ],
-    ["path", { d: "M20 2v4", key: "1rf3ol" }],
-    ["path", { d: "M22 4h-4", key: "gwowj6" }],
-    ["circle", { cx: "4", cy: "20", r: "2", key: "6kqj1y" }]
-  ];
-  var Sparkles = createLucideIcon("sparkles", __iconNode7);
-
-  // ../../node_modules/lucide-react/dist/esm/icons/trophy.js
-  var __iconNode8 = [
-    ["path", { d: "M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978", key: "1n3hpd" }],
-    ["path", { d: "M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978", key: "rfe1zi" }],
-    ["path", { d: "M18 9h1.5a1 1 0 0 0 0-5H18", key: "7xy6bh" }],
-    ["path", { d: "M4 22h16", key: "57wxv0" }],
-    ["path", { d: "M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z", key: "1mhfuq" }],
-    ["path", { d: "M6 9H4.5a1 1 0 0 1 0-5H6", key: "tex48p" }]
-  ];
-  var Trophy = createLucideIcon("trophy", __iconNode8);
-
   // src/components/TileIcon.tsx
-  var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
-  var ICON_MAP = {
-    "\u2753": CircleQuestionMark,
-    "\u{1F9ED}": Compass,
-    "\u{1F4DD}": FileText,
-    "\u{1F3AF}": Layers,
-    "\u{1F3C6}": Trophy,
-    "\u2728": Sparkles,
-    "\u{1F4AC}": MessageCircle,
-    "\u{1F3AE}": Gamepad2
-  };
+  var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
   function TileIcon({
     emoji,
     size: size2 = 18,
     color = "currentColor"
   }) {
-    const Icon2 = ICON_MAP[emoji];
-    if (!Icon2) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: emoji });
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { size: size2, color });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(EmojiIcon, { emoji, size: size2, color });
   }
 
   // src/components/TileCard.tsx
-  var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
   function WidgetMount({ widgetId, props }) {
     const runtime7 = useRuntime();
     const parentRef = (0, import_react13.useRef)(null);
@@ -23516,7 +23797,6 @@ ${cssRules}
       return () => {
         handle.unmount();
         handleRef.current = null;
-        container.remove();
       };
     }, [registry, widgetId, widgetAvailable]);
     const propsJson = JSON.stringify(props);
@@ -23527,7 +23807,7 @@ ${cssRules}
       handleRef.current?.update(propsRef.current);
     }, [propsJson]);
     if (!registry || !registry.has(widgetId)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
         "div",
         {
           style: {
@@ -23543,7 +23823,7 @@ ${cssRules}
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: parentRef });
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: parentRef });
   }
   function TileCard({
     config,
@@ -23602,7 +23882,7 @@ ${cssRules}
       justifyContent: "center",
       flexShrink: 0
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "article",
       {
         "data-shadow-canvas-id": `tile-${config.id}`,
@@ -23610,10 +23890,10 @@ ${cssRules}
         onMouseEnter,
         onMouseLeave,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: headerStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TileIcon, { emoji: resolvedIcon, size: resolvedSubtitle ? 36 : 24 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: headerStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(TileIcon, { emoji: resolvedIcon, size: resolvedSubtitle ? 36 : 24 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "h3",
                 {
                   style: {
@@ -23628,7 +23908,7 @@ ${cssRules}
                   children: title ?? widget
                 }
               ),
-              resolvedSubtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              resolvedSubtitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "p",
                 {
                   style: {
@@ -23645,14 +23925,14 @@ ${cssRules}
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "div",
             {
               style: {
                 padding: "var(--sc-tile-body-padding, 0 0.75rem 0.5rem)",
                 borderTop: "1px solid rgba(255, 255, 255, 0.06)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { paddingTop: "var(--sc-tile-gap, 0.25rem)" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { paddingTop: "var(--sc-tile-gap, 0.25rem)" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
             }
           )
         ]
@@ -23661,7 +23941,7 @@ ${cssRules}
   }
 
   // src/components/ShadowCanvasOverlay.tsx
-  var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
   var LAUNCHER_STYLES_ID = "syntro-launcher-styles";
   function ensureLauncherStyles(target, css) {
     if (target.querySelector(`#${LAUNCHER_STYLES_ID}`)) return;
@@ -23897,7 +24177,7 @@ ${cssRules}
       pointerEvents: "none",
       padding: "0"
     };
-    const content = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "div",
       {
         "data-shadow-canvas-id": "overlay-root",
@@ -23907,9 +24187,9 @@ ${cssRules}
           pointerEvents: isOpen ? "auto" : "none",
           zIndex
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: wrapperStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { ref: containerRef, "data-shadow-canvas-id": "overlay-container", style: containerStyle, children: [
-            isFocused && canvasTitle && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: wrapperStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref: containerRef, "data-shadow-canvas-id": "overlay-container", style: containerStyle, children: [
+            isFocused && canvasTitle && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "p",
               {
                 style: {
@@ -23922,13 +24202,13 @@ ${cssRules}
                 children: canvasTitle
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
               "div",
               {
                 style: { color: "var(--sc-overlay-text-color)", padding: isFocused ? "1rem" : "0" },
                 children: "Loading..."
               }
-            ) : error2 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            ) : error2 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
               "div",
               {
                 style: {
@@ -23942,7 +24222,7 @@ ${cssRules}
               }
             ) : isFocused ? (
               /* Focused Mode: Render first tile full size */
-              tiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              tiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 TileCard,
                 {
                   config: tiles[0],
@@ -23953,7 +24233,7 @@ ${cssRules}
               ) : null
             ) : (
               /* Standard Mode: Stacked cards — widgets always visible */
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 "div",
                 {
                   style: {
@@ -23962,7 +24242,7 @@ ${cssRules}
                     gap: "0.75rem",
                     width: "100%"
                   },
-                  children: tiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  children: tiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                     TileCard,
                     {
                       config: tile,
@@ -23977,7 +24257,7 @@ ${cssRules}
             ) }),
             footerSlot
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
             "div",
             {
               onClick: toggle2,
@@ -23992,9 +24272,9 @@ ${cssRules}
       }
     );
     if (!mounted) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
       (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
           "div",
           {
             "data-shadow-canvas-id": "overlay-launcher",
@@ -24005,7 +24285,7 @@ ${cssRules}
               zIndex: zIndex + 47
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                 NotificationToastStack,
                 {
                   notifications,
@@ -24014,7 +24294,7 @@ ${cssRules}
                   position: config.canvas.position ?? "right"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -24058,7 +24338,7 @@ ${cssRules}
                     }
                   },
                   children: [
-                    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                       "svg",
                       {
                         width: "24",
@@ -24073,11 +24353,11 @@ ${cssRules}
                         focusable: "false",
                         style: { transition: "transform 200ms ease" },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M18 6L6 18" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M6 6l12 12" })
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M18 6L6 18" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M6 6l12 12" })
                         ]
                       }
-                    ) : launcherIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    ) : launcherIcon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                       "img",
                       {
                         src: launcherIcon,
@@ -24090,7 +24370,7 @@ ${cssRules}
                           pointerEvents: "none"
                         }
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
                       "svg",
                       {
                         width: "24",
@@ -24105,16 +24385,16 @@ ${cssRules}
                         focusable: "false",
                         style: { transition: "transform 200ms ease" },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M5 3v4" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M3 5h4" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M19 17v4" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M17 19h4" })
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("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__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M5 3v4" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M3 5h4" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M19 17v4" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M17 19h4" })
                         ]
                       }
                     ),
-                    !isOpen && notifications.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { position: "absolute", top: -2, right: -2, pointerEvents: "none" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    !isOpen && notifications.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { position: "absolute", top: -2, right: -2, pointerEvents: "none" }, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "span",
                         {
                           className: "syntro-badge-ping",
@@ -24126,7 +24406,7 @@ ${cssRules}
                           }
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "span",
                         {
                           className: "syntro-badge-glow",
@@ -24137,7 +24417,7 @@ ${cssRules}
                           }
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
                         "span",
                         {
                           className: "syntro-badge-bounce",
@@ -24268,7 +24548,7 @@ ${cssRules}
   }
 
   // src/SmartCanvasApp.tsx
-  var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
   function SmartCanvasApp({
     controller,
     fetcher,
@@ -24291,7 +24571,7 @@ ${cssRules}
     workspaceTheme
   }) {
     if (runtime7) {
-      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RuntimeProvider, { runtime: runtime7, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(RuntimeProvider, { runtime: runtime7, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         SmartCanvasAppInner,
         {
           controller,
@@ -24316,7 +24596,7 @@ ${cssRules}
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       SmartCanvasAppInner,
       {
         controller,
@@ -24470,13 +24750,13 @@ ${cssRules}
     }, [runtime7, controller]);
     const { shadowRoot } = useShadowRoot();
     const themeConfig = configState.theme;
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       ThemeProvider,
       {
         themeConfig,
         workspaceTheme,
         shadowRoot,
-        children: !configState.isLoading && !hasContent ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        children: !configState.isLoading && !hasContent ? null : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           ShadowCanvasOverlay,
           {
             tiles: configState.tiles,
@@ -24500,7 +24780,7 @@ ${cssRules}
   }
 
   // src/SmartCanvasElement.tsx
-  var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
   var TAG_NAME = "smart-canvas";
   var BASE_CSS = `
 :host {
@@ -24600,13 +24880,13 @@ ${cssRules}
         __privateSet(this, _root, (0, import_client5.createRoot)(__privateGet(this, _mount)));
       }
       __privateGet(this, _root).render(
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           ShadowRootProvider,
           {
             shadowRoot: __privateGet(this, _shadow),
             portalRoot: __privateGet(this, _portalRoot),
             overlayContainer: __privateGet(this, _overlayContainer),
-            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
+            children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
           }
         )
       );
@@ -24833,7 +25113,7 @@ ${cssRules}
 
   // src/components/TileWheel.tsx
   var import_react17 = __toESM(require_react(), 1);
-  var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
   function TileWheel({ tiles, intervalMs = 7e3, telemetry }) {
     const [index2, setIndex] = (0, import_react17.useState)(0);
     const ordered = (0, import_react17.useMemo)(
@@ -24857,7 +25137,7 @@ ${cssRules}
       }
     }, [index2, ordered, telemetry]);
     if (!ordered.length) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "div",
       {
         style: {
@@ -24871,7 +25151,7 @@ ${cssRules}
         },
         "data-shadow-canvas-id": "wheel",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "div",
             {
               style: {
@@ -24880,10 +25160,10 @@ ${cssRules}
                 transform: `translateX(-${index2 * 100}%)`,
                 width: `${ordered.length * 100}%`
               },
-              children: ordered.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { width: "100%", flexShrink: 0, padding: "0 1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TileCard, { config: tile, surface: "wheel", telemetry }) }, tile.id))
+              children: ordered.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { width: "100%", flexShrink: 0, padding: "0 1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TileCard, { config: tile, surface: "wheel", telemetry }) }, tile.id))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { style: { marginTop: "1rem", display: "flex", justifyContent: "center", gap: "0.5rem" }, children: ordered.map((tile, idx) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: { marginTop: "1rem", display: "flex", justifyContent: "center", gap: "0.5rem" }, children: ordered.map((tile, idx) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             "button",
             {
               type: "button",
@@ -37938,13 +38218,9 @@ ${cssRules}
             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);
           }
@@ -38614,6 +38890,7 @@ ${cssRules}
     function resolve(selector) {
       if (!root) return null;
       try {
+        if (root.matches(selector)) return root;
         return root.querySelector(selector);
       } catch {
         return null;
@@ -39504,15 +39781,23 @@ ${cssRules}
     }
     return eventName.replace("$", "posthog.");
   }
+  var INTERACTIVE_TAGS = /* @__PURE__ */ new Set(["a", "button", "input", "select", "textarea"]);
+  function resolveInteractiveTag(elements2, directTag) {
+    if (directTag && INTERACTIVE_TAGS.has(directTag)) return directTag;
+    if (!elements2) return directTag;
+    for (const el of elements2) {
+      const tag3 = el.tag_name;
+      if (tag3 && INTERACTIVE_TAGS.has(tag3)) return tag3;
+    }
+    return directTag;
+  }
   function extractProps(phEvent) {
     const props = {};
     const phProps = phEvent.properties || {};
     const elements2 = phProps.$elements;
-    if (phProps.$tag_name) {
-      props.tagName = phProps.$tag_name;
-    } else if (elements2?.[0]?.tag_name) {
-      props.tagName = elements2[0].tag_name;
-    }
+    const directTag = phProps.$tag_name ?? elements2?.[0]?.tag_name;
+    const isClickEvent = phEvent.event === "$autocapture" || phEvent.event === "$click";
+    props.tagName = isClickEvent ? resolveInteractiveTag(elements2, directTag) : directTag;
     if (phProps.$el_text) props.elementText = phProps.$el_text;
     if (elements2) props.elements = elements2;
     if (phProps.$current_url) props.url = phProps.$current_url;
@@ -40395,9 +40680,18 @@ ${cssRules}
       return handle;
     }
     async function unmountEntry(entry) {
-      await playExitAnimation(entry.container, entry.options.animation);
-      entry.cleanup?.();
-      entry.container.remove();
+      if (entry.container.isConnected) {
+        await playExitAnimation(entry.container, entry.options.animation);
+      }
+      try {
+        entry.cleanup?.();
+      } 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,
@@ -40576,7 +40870,9 @@ ${cssRules}
         unmount: () => {
           const mounted = this.mountedWidgets.get(mountId);
           if (mounted) {
-            mounted.cleanup?.();
+            if (container.isConnected) {
+              mounted.cleanup?.();
+            }
             this.mountedWidgets.delete(mountId);
             container.removeAttribute("data-widget-mount-id");
             container.removeAttribute("data-widget-id");
@@ -41496,7 +41792,7 @@ ${cssRules}
   }
 
   // src/index.ts
-  var RUNTIME_SDK_BUILD = true ? `${"2026-03-11T22:47:04.977Z"} (${"7d29d30f3e"})` : "dev";
+  var RUNTIME_SDK_BUILD = true ? `${"2026-03-14T01:00:51.997Z"} (${"d9cb07c81d"})` : "dev";
   if (typeof window !== "undefined") {
     console.log(`[Syntro Runtime] Build: ${RUNTIME_SDK_BUILD}`);
     const existing = window.SynOS;
@@ -41577,13 +41873,24 @@ lucide-react/dist/esm/defaultAttributes.js:
 lucide-react/dist/esm/shared/src/utils/hasA11yProp.js:
 lucide-react/dist/esm/Icon.js:
 lucide-react/dist/esm/createLucideIcon.js:
+lucide-react/dist/esm/icons/arrow-right.js:
+lucide-react/dist/esm/icons/banknote.js:
+lucide-react/dist/esm/icons/bell.js:
+lucide-react/dist/esm/icons/book-open.js:
+lucide-react/dist/esm/icons/circle-check-big.js:
 lucide-react/dist/esm/icons/circle-question-mark.js:
+lucide-react/dist/esm/icons/clipboard-list.js:
 lucide-react/dist/esm/icons/compass.js:
 lucide-react/dist/esm/icons/file-text.js:
 lucide-react/dist/esm/icons/gamepad-2.js:
+lucide-react/dist/esm/icons/landmark.js:
 lucide-react/dist/esm/icons/layers.js:
+lucide-react/dist/esm/icons/lightbulb.js:
 lucide-react/dist/esm/icons/message-circle.js:
+lucide-react/dist/esm/icons/skip-forward.js:
 lucide-react/dist/esm/icons/sparkles.js:
+lucide-react/dist/esm/icons/timer.js:
+lucide-react/dist/esm/icons/triangle-alert.js:
 lucide-react/dist/esm/icons/trophy.js:
 lucide-react/dist/esm/lucide-react.js:
   (**