@syntrologie/runtime-sdk 2.4.0-canary.22 → 2.4.0-canary.24

package/dist/{chunk-WCQCVPJ7.js → chunk-LD22WJ44.js}

@@ -3,7 +3,7 @@ import {
   __privateGet,
   __privateSet,
   __publicField
-} from "./chunk-P5G4KT2U.js";
+} from "./chunk-BU4Z6PD7.js";
 
 // ../adaptives/adaptive-content/dist/reconciliation-guard.js
 function guardAgainstReconciliation(container, anchor, reinsertFn, opts) {
@@ -784,7 +784,7 @@ var CelebrationEngine = class {
 };
 
 // ../adaptives/adaptive-overlays/dist/celebrations/index.js
-var DEFAULT_COLORS2 = [
+var FALLBACK_COLORS = [
   "#ff0000",
   "#00ff00",
   "#0000ff",
@@ -794,6 +794,22 @@ var DEFAULT_COLORS2 = [
   "#ff8800",
   "#8800ff"
 ];
+function buildThemePalette(primary, hover) {
+  return [primary, hover, `${primary}cc`, `${hover}cc`, "#ffffff", `${primary}80`];
+}
+function readThemeColors(overlayRoot) {
+  var _a2, _b;
+  try {
+    const styles = getComputedStyle(overlayRoot);
+    const primary = (_a2 = styles.getPropertyValue("--sc-color-primary")) == null ? void 0 : _a2.trim();
+    const hover = (_b = styles.getPropertyValue("--sc-color-primary-hover")) == null ? void 0 : _b.trim();
+    if ((primary == null ? void 0 : primary.startsWith("#")) && primary.length >= 7) {
+      return buildThemePalette(primary, hover || primary);
+    }
+  } catch {
+  }
+  return null;
+}
 var effectRegistry = /* @__PURE__ */ new Map([
   ["confetti", confettiEffect],
   ["fireworks", fireworksEffect],
@@ -801,17 +817,18 @@ var effectRegistry = /* @__PURE__ */ new Map([
   ["emoji-rain", emojiRainEffect]
 ]);
 var executeCelebrate = async (action, context) => {
-  var _a2, _b, _c;
+  var _a2, _b, _c, _d;
   const effect = effectRegistry.get(action.effect);
   if (!effect) {
     console.warn(`[adaptive-overlays] Unknown celebration effect: "${action.effect}". Available: ${[...effectRegistry.keys()].join(", ")}`);
     return { cleanup: () => {
     } };
   }
+  const colors = (_b = (_a2 = action.colors) != null ? _a2 : readThemeColors(context.overlayRoot)) != null ? _b : FALLBACK_COLORS;
   const config = {
-    duration: (_a2 = action.duration) != null ? _a2 : 3e3,
-    intensity: (_b = action.intensity) != null ? _b : "medium",
-    colors: (_c = action.colors) != null ? _c : DEFAULT_COLORS2,
+    duration: (_c = action.duration) != null ? _c : 3e3,
+    intensity: (_d = action.intensity) != null ? _d : "medium",
+    colors,
     props: action.props
   };
   const engine = new CelebrationEngine();
@@ -1684,6 +1701,13 @@ function sanitizeHtml2(html) {
 }
 
 // ../adaptives/adaptive-overlays/dist/modal.js
+var V = {
+  bg: "var(--sc-overlay-background, #ffffff)",
+  title: "var(--sc-overlay-title-color, var(--sc-overlay-text-color, #111827))",
+  text: "var(--sc-overlay-text-color, #4b5563)",
+  accent: "var(--sc-color-primary, #4f46e5)",
+  radius: "var(--sc-border-radius, 12px)"
+};
 var executeModal = async (action, context) => {
   var _a2, _b;
   const { content, size = "md", blocking = false, scrim, dismiss, ctaButtons } = action;
@@ -1710,8 +1734,8 @@ var executeModal = async (action, context) => {
     transform: translate(-50%, -50%) scale(0.95);
     max-width: ${sizeMap[size]};
     width: 90%;
-    background: ${base.white};
-    border-radius: 12px;
+    background: ${V.bg};
+    border-radius: ${V.radius};
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     z-index: 2147483646;
     opacity: 0;
@@ -1720,9 +1744,9 @@ var executeModal = async (action, context) => {
   `;
   let html = "";
   if (content.title) {
-    html += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: #111827;">${sanitizeHtml2(content.title)}</h2>`;
+    html += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: ${V.title};">${sanitizeHtml2(content.title)}</h2>`;
   }
-  html += `<div class="syntro-modal-body" style="color: #4b5563; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
+  html += `<div class="syntro-modal-body" style="color: ${V.text}; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
   if ((dismiss == null ? void 0 : dismiss.closeButton) !== false) {
     html += `
       <button class="syntro-modal-close" data-syntro-action="dismiss" style="
@@ -1733,7 +1757,8 @@ var executeModal = async (action, context) => {
         border: none;
         cursor: pointer;
         padding: 4px;
-        color: #6b7280;
+        color: ${V.text};
+        opacity: 0.6;
       " aria-label="Close">
         <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
           <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
@@ -1756,7 +1781,7 @@ var executeModal = async (action, context) => {
             font-weight: 500;
             cursor: pointer;
             transition: background 150ms ease;
-            ${isPrimary ? "background: #4f46e5; color: white; border: none;" : "background: white; color: #374151; border: 1px solid #d1d5db;"}
+            ${isPrimary ? `background: ${V.accent}; color: white; border: none;` : `background: transparent; color: ${V.accent}; border: 1px solid currentColor; opacity: 0.7;`}
           "
         >
           ${sanitizeHtml2(btn.label)}
@@ -2413,7 +2438,7 @@ var executeHighlight = async (action, context) => {
   };
 };
 var executePulse = async (action, context) => {
-  var _a2;
+  var _a2, _b, _c;
   let anchorEl = context.resolveAnchor(action.anchorId);
   if (!anchorEl && context.waitForAnchor) {
     anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
@@ -2423,24 +2448,67 @@ var executePulse = async (action, context) => {
     return { cleanup: () => {
     } };
   }
-  const duration = (_a2 = action.duration) != null ? _a2 : 2e3;
-  if (!document.querySelector("[data-syntro-pulse-styles]")) {
-    const style = document.createElement("style");
-    style.setAttribute("data-syntro-pulse-styles", "");
+  const duration = (_a2 = action.duration) != null ? _a2 : 4e3;
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  const parseHex = (hex) => ({
+    r: parseInt(hex.slice(1, 3), 16),
+    g: parseInt(hex.slice(3, 5), 16),
+    b: parseInt(hex.slice(5, 7), 16)
+  });
+  const fallback = { r: 79, g: 70, b: 229 };
+  let primary = fallback;
+  let secondary = null;
+  try {
+    const styles = getComputedStyle(context.overlayRoot);
+    const pHex = (_b = styles.getPropertyValue("--sc-color-primary")) == null ? void 0 : _b.trim();
+    const sHex = (_c = styles.getPropertyValue("--sc-color-primary-hover")) == null ? void 0 : _c.trim();
+    if ((pHex == null ? void 0 : pHex.startsWith("#")) && pHex.length >= 7) {
+      primary = parseHex(pHex);
+    }
+    if ((sHex == null ? void 0 : sHex.startsWith("#")) && sHex.length >= 7) {
+      secondary = parseHex(sHex);
+    }
+  } catch {
+  }
+  const existing = document.querySelector("[data-syntro-pulse-styles]");
+  if (existing)
+    existing.remove();
+  const style = document.createElement("style");
+  style.setAttribute("data-syntro-pulse-styles", "");
+  const { r: pr, g: pg, b: pb } = primary;
+  if (secondary) {
+    const { r: sr, g: sg, b: sb } = secondary;
+    style.textContent = `
+      @keyframes syntro-pulse-anim {
+        0%, 100% {
+          box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
+        }
+        25% {
+          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
+        }
+        50% {
+          box-shadow: 0 0 0 0 rgba(${sr}, ${sg}, ${sb}, 0.35);
+        }
+        75% {
+          box-shadow: 0 0 0 12px rgba(${sr}, ${sg}, ${sb}, 0);
+        }
+      }
+    `;
+  } else {
     style.textContent = `
       @keyframes syntro-pulse-anim {
         0%, 100% {
-          box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
+          box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
         }
         50% {
-          box-shadow: 0 0 0 8px rgba(79, 70, 229, 0);
+          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
         }
       }
     `;
-    document.head.appendChild(style);
   }
+  document.head.appendChild(style);
   const originalAnimation = anchorEl.style.animation;
-  anchorEl.style.animation = "syntro-pulse-anim 1s cubic-bezier(0.4, 0, 0.6, 1) infinite";
+  anchorEl.style.animation = "syntro-pulse-anim 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite";
   anchorEl.setAttribute("data-syntro-pulse", "true");
   const timeoutId = setTimeout(() => {
     anchorEl.style.animation = originalAnimation;
@@ -2461,7 +2529,7 @@ var executePulse = async (action, context) => {
   };
 };
 var executeBadge = async (action, context) => {
-  var _a2;
+  var _a2, _b;
   let anchorEl = context.resolveAnchor(action.anchorId);
   if (!anchorEl && context.waitForAnchor) {
     anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
@@ -2471,6 +2539,14 @@ var executeBadge = async (action, context) => {
     return { cleanup: () => {
     } };
   }
+  let badgeColor = "#4f46e5";
+  try {
+    const primary = (_a2 = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")) == null ? void 0 : _a2.trim();
+    if ((primary == null ? void 0 : primary.startsWith("#")) && primary.length >= 7) {
+      badgeColor = primary;
+    }
+  } catch {
+  }
   const badge2 = document.createElement("div");
   badge2.textContent = action.content;
   badge2.setAttribute("data-syntro-badge", action.anchorId.selector);
@@ -2481,13 +2557,13 @@ var executeBadge = async (action, context) => {
     fontWeight: "600",
     lineHeight: "1",
     color: "white",
-    background: "var(--syntro-accent, #4f46e5)",
+    background: badgeColor,
     borderRadius: "9999px",
     pointerEvents: "none",
     zIndex: "2147483646",
     whiteSpace: "nowrap"
   });
-  const position = (_a2 = action.position) != null ? _a2 : "top-right";
+  const position = (_b = action.position) != null ? _b : "top-right";
   const originalPosition = anchorEl.style.position;
   if (getComputedStyle(anchorEl).position === "static") {
     anchorEl.style.position = "relative";
@@ -2622,7 +2698,7 @@ var runtime2 = {
   executors: executors2,
   widgets: [
     {
-      id: "workflow:tracker",
+      id: "adaptive-overlays:workflow-tracker",
       component: WorkflowMountableWidget,
       metadata: {
         name: "Workflow Tracker",
@@ -3240,7 +3316,7 @@ function getAntiFlickerSnippet(config = {}) {
 }
 
 // src/version.ts
-var SDK_VERSION = "2.4.0-canary.22";
+var SDK_VERSION = "2.4.0-canary.24";
 
 // src/types.ts
 var SDK_SCHEMA_VERSION = "2.0";
@@ -3899,7 +3975,7 @@ function NotificationToastStack({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx2("div", { style: { height: "2px", background: "rgba(255, 255, 255, 0.06)" }, children: /* @__PURE__ */ jsx2(
+                /* @__PURE__ */ jsx2("div", { style: { height: "2px", background: "rgba(0, 0, 0, 0.08)" }, children: /* @__PURE__ */ jsx2(
                   "div",
                   {
                     className: "syntro-toast-progress",
@@ -4195,8 +4271,51 @@ function useDecision(strategy, defaultValue) {
 }
 
 // src/components/TileCard.tsx
-import { useCallback as useCallback3, useEffect as useEffect5, useReducer, useRef as useRef4, useState as useState4 } from "react";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect5,
+  useMemo as useMemo3,
+  useReducer,
+  useRef as useRef4,
+  useState as useState4
+} 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
+};
+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 });
+}
+
+// src/components/TileCard.tsx
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function WidgetMount({ widgetId, props }) {
   var _a2;
   const runtime3 = useRuntime();
@@ -4239,7 +4358,7 @@ function WidgetMount({ widgetId, props }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx4("div", { ref: containerRef, style: { width: "100%", minHeight: "40px" } });
+  return /* @__PURE__ */ jsx5("div", { ref: containerRef, style: { width: "100%", minHeight: "40px" } });
 }
 function TileCard({
   config,
@@ -4247,12 +4366,29 @@ function TileCard({
   telemetry: _telemetry,
   style
 }) {
-  const { title, widget, props } = config;
+  const { title, subtitle, widget, props, icon } = config;
   const [, setTick] = useState4(0);
   const runtime3 = useRuntime();
   useEffect5(() => {
     if (runtime3) setTick((t) => t + 1);
   }, [runtime3]);
+  const registration = useMemo3(
+    () => {
+      var _a2, _b;
+      return (_b = (_a2 = runtime3 == null ? void 0 : runtime3.widgets) == null ? void 0 : _a2.getRegistration) == null ? void 0 : _b.call(_a2, widget);
+    },
+    [runtime3 == null ? void 0 : runtime3.widgets, widget]
+  );
+  const resolvedIcon = useMemo3(() => {
+    var _a2, _b;
+    if (icon) return icon;
+    return (_b = (_a2 = registration == null ? void 0 : registration.metadata) == null ? void 0 : _a2.icon) != null ? _b : "+";
+  }, [icon, registration]);
+  const resolvedSubtitle = useMemo3(() => {
+    var _a2;
+    if (subtitle) return subtitle;
+    return (_a2 = registration == null ? void 0 : registration.metadata) == null ? void 0 : _a2.subtitle;
+  }, [subtitle, registration]);
   const [hovered, setHovered] = useState4(false);
   const onMouseEnter = useCallback3(() => setHovered(true), []);
   const onMouseLeave = useCallback3(() => setHovered(false), []);
@@ -4276,21 +4412,15 @@ function TileCard({
   const headerStyle = {
     display: "flex",
     alignItems: "center",
-    gap: "0.75rem",
-    padding: "0.875rem 1rem",
-    minHeight: "72px"
+    gap: "var(--sc-tile-gap, 0.25rem)",
+    padding: "var(--sc-tile-header-padding, 0.375rem 0.75rem)",
+    minHeight: "44px"
   };
   const iconStyle = {
-    width: "40px",
-    height: "40px",
-    borderRadius: "10px",
-    background: "var(--sc-tile-icon-background)",
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
-    fontSize: "1.25rem",
-    flexShrink: 0,
-    boxShadow: "var(--sc-tile-icon-shadow)"
+    flexShrink: 0
   };
   return /* @__PURE__ */ jsxs2(
     "article",
@@ -4301,31 +4431,48 @@ function TileCard({
       onMouseLeave,
       children: [
         /* @__PURE__ */ jsxs2("div", { style: headerStyle, children: [
-          /* @__PURE__ */ jsx4("div", { style: iconStyle, children: "+" }),
-          /* @__PURE__ */ jsx4("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx4(
-            "h3",
-            {
-              style: {
-                fontSize: "0.95rem",
-                fontWeight: 600,
-                color: "var(--sc-tile-title-color)",
-                margin: "0.125rem 0 0",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis"
-              },
-              children: title != null ? title : widget
-            }
-          ) })
+          /* @__PURE__ */ jsx5("div", { style: iconStyle, children: /* @__PURE__ */ jsx5(TileIcon, { emoji: resolvedIcon, size: resolvedSubtitle ? 36 : 24 }) }),
+          /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx5(
+              "h3",
+              {
+                style: {
+                  fontSize: "1.14rem",
+                  fontWeight: 600,
+                  color: "var(--sc-tile-title-color)",
+                  margin: "0.125rem 0 0",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: title != null ? title : widget
+              }
+            ),
+            resolvedSubtitle && /* @__PURE__ */ jsx5(
+              "p",
+              {
+                style: {
+                  fontSize: "0.8rem",
+                  fontWeight: 400,
+                  color: "var(--sc-tile-text-color)",
+                  margin: "0.125rem 0 0",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: resolvedSubtitle
+              }
+            )
+          ] })
         ] }),
-        /* @__PURE__ */ jsx4(
+        /* @__PURE__ */ jsx5(
           "div",
           {
             style: {
-              padding: "0 1rem 1rem",
+              padding: "var(--sc-tile-body-padding, 0 0.75rem 0.5rem)",
               borderTop: "1px solid rgba(255, 255, 255, 0.06)"
             },
-            children: /* @__PURE__ */ jsx4("div", { style: { paddingTop: "0.875rem" }, children: /* @__PURE__ */ jsx4(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
+            children: /* @__PURE__ */ jsx5("div", { style: { paddingTop: "var(--sc-tile-gap, 0.25rem)" }, children: /* @__PURE__ */ jsx5(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
           }
         )
       ]
@@ -4334,7 +4481,7 @@ function TileCard({
 }
 
 // src/components/ShadowCanvasOverlay.tsx
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo4, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
 import { createPortal } from "react-dom";
 
 // src/theme/defaultTheme.ts
@@ -4508,17 +4655,19 @@ var darkDefaults = {
   borderRadius: "12px",
   canvas: {
     position: "right",
+    layout: "overlay",
     background: withAlpha(slateGrey[1], 0.6),
     blur: "blur(24px)",
     border: "none",
-    width: "clamp(320px, 16.666vw, 420px)"
+    width: "clamp(380px, 25vw, 520px)"
   },
   launcher: {
     background: button.primary.backgroundDefault,
     backgroundHover: button.primary.backgroundHover,
     color: button.primary.icon,
     size: "56px",
-    shadow: `0 8px 32px ${withAlpha(slateGrey[0], 0.6)}`
+    shadow: `0 8px 32px ${withAlpha(slateGrey[0], 0.6)}`,
+    borderRadius: "9999px"
   },
   tile: {
     background: withAlpha(slateGrey[1], 0.6),
@@ -4529,11 +4678,17 @@ var darkDefaults = {
     titleColor: text.primary,
     textColor: text.secondary,
     iconBackground: `linear-gradient(135deg, ${brand[3]} 0%, ${brand[3]}cc 100%)`,
-    iconShadow: `0 2px 8px ${brand[3]}40`
+    iconShadow: `0 2px 8px ${brand[3]}40`,
+    headerPadding: "0.375rem 0.75rem",
+    bodyPadding: "0 0.75rem 0.5rem",
+    gap: "0.25rem"
   },
   overlay: {
     background: withAlpha(slateGrey[1], 0.6),
     textColor: text.primary,
+    titleColor: text.primary,
+    arrowColor: withAlpha(slateGrey[1], 0.6),
+    arrowSize: "8px",
     border: "none",
     borderRadius: "0",
     scrimOpacity: "0",
@@ -4550,6 +4705,26 @@ var darkDefaults = {
     errorColor: red[4],
     iconBackground: withAlpha(brand[3], 0.15),
     progressGradient: `linear-gradient(90deg, ${brand[3]}, ${brand[4]})`
+  },
+  content: {
+    background: withAlpha(slateGrey[3], 0.8),
+    backgroundHover: withAlpha(slateGrey[5], 0.6),
+    border: `1px solid ${withAlpha(slateGrey[5], 0.5)}`,
+    borderRadius: "8px",
+    textColor: text.primary,
+    textSecondaryColor: text.secondary,
+    itemDivider: "none",
+    itemGap: "6px",
+    itemPadding: "12px 16px",
+    itemFontSize: "15px",
+    bodyPadding: "0 16px 12px 16px",
+    bodyFontSize: "14px",
+    categoryPadding: "8px 4px 4px 4px",
+    categoryGap: "4px",
+    categoryFontSize: "12px",
+    searchBackground: withAlpha(slateGrey[3], 0.8),
+    searchColor: text.primary,
+    chevronColor: "currentColor"
   }
 };
 var lightDefaults = {
@@ -4560,17 +4735,19 @@ var lightDefaults = {
   borderRadius: "12px",
   canvas: {
     position: "right",
+    layout: "overlay",
     background: withAlpha(slateGrey[12], 0.7),
     blur: "blur(24px)",
     border: "none",
-    width: "clamp(320px, 16.666vw, 420px)"
+    width: "clamp(380px, 25vw, 520px)"
   },
   launcher: {
     background: brand[3],
     backgroundHover: brand[2],
     color: "#ffffff",
     size: "56px",
-    shadow: "0 8px 32px rgba(0, 0, 0, 0.15)"
+    shadow: "0 8px 32px rgba(0, 0, 0, 0.15)",
+    borderRadius: "9999px"
   },
   tile: {
     background: withAlpha(slateGrey[12], 0.7),
@@ -4581,11 +4758,17 @@ var lightDefaults = {
     titleColor: slateGrey[1],
     textColor: slateGrey[6],
     iconBackground: `linear-gradient(135deg, ${brand[3]} 0%, ${brand[3]}cc 100%)`,
-    iconShadow: `0 2px 8px ${brand[3]}40`
+    iconShadow: `0 2px 8px ${brand[3]}40`,
+    headerPadding: "0.375rem 0.75rem",
+    bodyPadding: "0 0.75rem 0.5rem",
+    gap: "0.25rem"
   },
   overlay: {
     background: withAlpha(slateGrey[12], 0.7),
     textColor: slateGrey[1],
+    titleColor: slateGrey[1],
+    arrowColor: withAlpha(slateGrey[12], 0.7),
+    arrowSize: "8px",
     border: "none",
     borderRadius: "0",
     scrimOpacity: "0",
@@ -4602,6 +4785,26 @@ var lightDefaults = {
     errorColor: red[4],
     iconBackground: withAlpha(brand[3], 0.1),
     progressGradient: `linear-gradient(90deg, ${brand[3]}, ${brand[2]})`
+  },
+  content: {
+    background: withAlpha(slateGrey[12], 0.8),
+    backgroundHover: withAlpha(slateGrey[11], 0.6),
+    border: `1px solid ${slateGrey[11]}`,
+    borderRadius: "8px",
+    textColor: slateGrey[1],
+    textSecondaryColor: slateGrey[6],
+    itemDivider: "none",
+    itemGap: "6px",
+    itemPadding: "12px 16px",
+    itemFontSize: "15px",
+    bodyPadding: "0 16px 12px 16px",
+    bodyFontSize: "14px",
+    categoryPadding: "8px 4px 4px 4px",
+    categoryGap: "4px",
+    categoryFontSize: "12px",
+    searchBackground: slateGrey[12],
+    searchColor: slateGrey[1],
+    chevronColor: "currentColor"
   }
 };
 function mergeThemeConfig(customer) {
@@ -4617,7 +4820,8 @@ function mergeThemeConfig(customer) {
     launcher: { ...base2.launcher, ...customer.launcher },
     tile: { ...base2.tile, ...customer.tile },
     overlay: { ...base2.overlay, ...customer.overlay },
-    notification: { ...base2.notification, ...customer.notification }
+    notification: { ...base2.notification, ...customer.notification },
+    content: { ...base2.content, ...customer.content }
   };
 }
 function mergeThemeWithWorkspace(workspaceTheme, configTheme) {
@@ -4638,10 +4842,18 @@ function mergeThemeWithWorkspace(workspaceTheme, configTheme) {
       ...base2.notification,
       ...workspaceTheme.notification,
       ...configTheme.notification
-    }
+    },
+    content: { ...base2.content, ...workspaceTheme.content, ...configTheme.content }
   };
 }
-var ELEMENT_SECTIONS = ["canvas", "launcher", "tile", "overlay", "notification"];
+var ELEMENT_SECTIONS = [
+  "canvas",
+  "launcher",
+  "tile",
+  "overlay",
+  "notification",
+  "content"
+];
 function flattenThemeConfig(config) {
   const vars = {};
   if (config.fontFamily) vars["--sc-font-family"] = config.fontFamily;
@@ -4661,8 +4873,8 @@ function flattenThemeConfig(config) {
 }
 
 // src/theme/ThemeProvider.tsx
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect6, useMemo as useMemo3 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect6, useMemo as useMemo4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var ThemeContext = createContext3(null);
 function ThemeProvider({
   children,
@@ -4670,11 +4882,11 @@ function ThemeProvider({
   workspaceTheme,
   shadowRoot
 }) {
-  const merged = useMemo3(
+  const merged = useMemo4(
     () => workspaceTheme ? mergeThemeWithWorkspace(workspaceTheme, themeConfig != null ? themeConfig : {}) : mergeThemeConfig(themeConfig != null ? themeConfig : {}),
     [themeConfig, workspaceTheme]
   );
-  const cssVariables = useMemo3(() => flattenThemeConfig(merged), [merged]);
+  const cssVariables = useMemo4(() => flattenThemeConfig(merged), [merged]);
   useEffect6(() => {
     if (!shadowRoot) return;
     let styleEl = shadowRoot.querySelector("#sc-theme-vars");
@@ -4693,7 +4905,7 @@ ${cssRules}
     mode: merged.mode,
     cssVariables
   };
-  return /* @__PURE__ */ jsx5(ThemeContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx6(ThemeContext.Provider, { value, children });
 }
 function useTheme() {
   const context = useContext3(ThemeContext);
@@ -4704,7 +4916,7 @@ function useTheme() {
 }
 
 // src/components/ShadowCanvasOverlay.tsx
-import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var LAUNCHER_STYLES_ID = "syntro-launcher-styles";
 function ensureLauncherStyles(target, css) {
   if (target.querySelector(`#${LAUNCHER_STYLES_ID}`)) return;
@@ -4718,6 +4930,7 @@ function ShadowCanvasOverlay({
   onToggle,
   telemetry,
   launcherLabel: _launcherLabel = "Adaptives",
+  launcherIcon,
   launcherAnimate = false,
   launcherAnimationStyle: _launcherAnimationStyle = "pulse",
   notificationCount: _notificationCount,
@@ -4762,7 +4975,7 @@ function ShadowCanvasOverlay({
     },
     [runtime3, isOpen, onToggle, dismissNotification]
   );
-  const launcherCss = useMemo4(
+  const launcherCss = useMemo5(
     () => `
   @keyframes syntro-launcher-pulse {
     0%, 100% {
@@ -4861,7 +5074,38 @@ function ShadowCanvasOverlay({
   );
   const isFocused = displayMode === "focused";
   const isRight = config.canvas.position === "right";
+  const isPush = config.canvas.layout === "push";
+  const containerRef = useRef5(null);
   const zIndex = 2147483600;
+  useEffect7(() => {
+    var _a3, _b2;
+    if (!isPush) return;
+    const root = document.documentElement;
+    const prop = isRight ? "marginRight" : "marginLeft";
+    const prevTransition = root.style.transition;
+    root.style.transition = `${prop} 340ms cubic-bezier(0.16, 1, 0.3, 1)`;
+    if (isOpen) {
+      const width = (_b2 = (_a3 = containerRef.current) == null ? void 0 : _a3.offsetWidth) != null ? _b2 : 380;
+      root.style[prop] = `${width}px`;
+    } else {
+      root.style[prop] = "0px";
+    }
+    return () => {
+      root.style[prop] = "";
+      root.style.transition = prevTransition;
+    };
+  }, [isPush, isOpen, isRight]);
+  useEffect7(() => {
+    if (!isPush || !isOpen) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const prop = isRight ? "marginRight" : "marginLeft";
+    const observer = new ResizeObserver(([entry]) => {
+      document.documentElement.style[prop] = `${entry.contentRect.width}px`;
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [isPush, isOpen, isRight]);
   const containerStyle = {
     display: "flex",
     flexDirection: "column",
@@ -4898,7 +5142,7 @@ function ShadowCanvasOverlay({
     pointerEvents: "none",
     padding: "0"
   };
-  const content = /* @__PURE__ */ jsx6(
+  const content = /* @__PURE__ */ jsx7(
     "div",
     {
       "data-shadow-canvas-id": "overlay-root",
@@ -4909,8 +5153,8 @@ function ShadowCanvasOverlay({
         zIndex
       },
       children: /* @__PURE__ */ jsxs3("div", { style: wrapperStyle, children: [
-        /* @__PURE__ */ jsxs3("div", { "data-shadow-canvas-id": "overlay-container", style: containerStyle, children: [
-          isFocused && canvasTitle && /* @__PURE__ */ jsx6("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ jsx6(
+        /* @__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(
             "p",
             {
               style: {
@@ -4923,7 +5167,7 @@ function ShadowCanvasOverlay({
               children: canvasTitle
             }
           ) }),
-          /* @__PURE__ */ jsx6("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ jsx7(
             "div",
             {
               style: { color: "var(--sc-overlay-text-color)", padding: isFocused ? "1rem" : "0" },
@@ -4943,7 +5187,7 @@ function ShadowCanvasOverlay({
             }
           ) : isFocused ? (
             /* Focused Mode: Render first tile full size */
-            tiles.length > 0 ? /* @__PURE__ */ jsx6(
+            tiles.length > 0 ? /* @__PURE__ */ jsx7(
               TileCard,
               {
                 config: tiles[0],
@@ -4954,7 +5198,7 @@ function ShadowCanvasOverlay({
             ) : null
           ) : (
             /* Standard Mode: Stacked cards — widgets always visible */
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "div",
               {
                 style: {
@@ -4963,7 +5207,7 @@ function ShadowCanvasOverlay({
                   gap: "0.75rem",
                   width: "100%"
                 },
-                children: tiles.map((tile) => /* @__PURE__ */ jsx6(
+                children: tiles.map((tile) => /* @__PURE__ */ jsx7(
                   TileCard,
                   {
                     config: tile,
@@ -4978,7 +5222,7 @@ function ShadowCanvasOverlay({
           ) }),
           footerSlot
         ] }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             onClick: toggle2,
@@ -5006,7 +5250,7 @@ function ShadowCanvasOverlay({
             zIndex: zIndex + 47
           },
           children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               NotificationToastStack,
               {
                 notifications,
@@ -5034,7 +5278,7 @@ function ShadowCanvasOverlay({
                   justifyContent: "center",
                   width: "var(--sc-launcher-size, 56px)",
                   height: "var(--sc-launcher-size, 56px)",
-                  borderRadius: "9999px",
+                  borderRadius: "var(--sc-launcher-border-radius, 9999px)",
                   color: "var(--sc-launcher-color)",
                   boxShadow: "var(--sc-launcher-shadow)",
                   transition: dragRef.current ? "none" : "transform 0.2s ease, opacity 0.3s ease, background-color 0.2s ease",
@@ -5061,7 +5305,39 @@ function ShadowCanvasOverlay({
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx6(
+                  isOpen ? /* @__PURE__ */ jsxs3(
+                    "svg",
+                    {
+                      width: "24",
+                      height: "24",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      "aria-hidden": "true",
+                      focusable: "false",
+                      style: { transition: "transform 200ms ease" },
+                      children: [
+                        /* @__PURE__ */ jsx7("path", { d: "M18 6L6 18" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M6 6l12 12" })
+                      ]
+                    }
+                  ) : launcherIcon ? /* @__PURE__ */ jsx7(
+                    "img",
+                    {
+                      src: launcherIcon,
+                      alt: "",
+                      "aria-hidden": "true",
+                      style: {
+                        width: "60%",
+                        height: "60%",
+                        objectFit: "contain",
+                        pointerEvents: "none"
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxs3(
                     "svg",
                     {
                       width: "24",
@@ -5075,20 +5351,17 @@ function ShadowCanvasOverlay({
                       "aria-hidden": "true",
                       focusable: "false",
                       style: { transition: "transform 200ms ease" },
-                      children: isOpen ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-                        /* @__PURE__ */ jsx6("path", { d: "M18 6L6 18" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M6 6l12 12" })
-                      ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-                        /* @__PURE__ */ jsx6("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__ */ jsx6("path", { d: "M5 3v4" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M3 5h4" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M19 17v4" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M17 19h4" })
-                      ] })
+                      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" })
+                      ]
                     }
                   ),
                   !isOpen && notifications.length > 0 && /* @__PURE__ */ jsxs3("div", { style: { position: "absolute", top: -2, right: -2, pointerEvents: "none" }, children: [
-                    /* @__PURE__ */ jsx6(
+                    /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: "syntro-badge-ping",
@@ -5100,7 +5373,7 @@ function ShadowCanvasOverlay({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx6(
+                    /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: "syntro-badge-glow",
@@ -5111,7 +5384,7 @@ function ShadowCanvasOverlay({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx6(
+                    /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: "syntro-badge-bounce",
@@ -5145,7 +5418,7 @@ function ShadowCanvasOverlay({
 }
 
 // src/hooks/useShadowCanvasConfig.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo5, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef6, useState as useState6 } from "react";
 var sortTiles = (tiles) => [...tiles].sort((a, b) => {
   var _a2, _b;
   return ((_a2 = b.priority) != null ? _a2 : 0) - ((_b = a.priority) != null ? _b : 0);
@@ -5163,11 +5436,23 @@ function useShadowCanvasConfig({
     isLoading: true
   });
   const prevActionsJsonRef = useRef6("[]");
+  const rawConfigRef = useRef6(null);
+  const refilter = useCallback5(async () => {
+    const raw = rawConfigRef.current;
+    if (!raw || !runtime3) return;
+    let tiles = raw.tiles || [];
+    tiles = await runtime3.filterTiles(tiles);
+    if (experiments) {
+      tiles = tiles.filter((tile) => experiments.shouldRenderRectangle(tile));
+    }
+    setState((prev) => ({ ...prev, tiles: sortTiles(tiles) }));
+  }, [runtime3, experiments]);
   const load = useCallback5(async () => {
     try {
       setState((prev) => ({ ...prev, isLoading: true, error: void 0 }));
       const response = await fetcher();
       debug("SmartCanvas Config", "Raw config response", response);
+      rawConfigRef.current = response;
       let tiles = response.tiles || [];
       if (runtime3) {
         tiles = await runtime3.filterTiles(tiles);
@@ -5210,6 +5495,18 @@ function useShadowCanvasConfig({
       return experiments.onFeaturesChanged(() => load());
     }
   }, [load, experiments, pageUrl]);
+  useEffect8(() => {
+    if (!(runtime3 == null ? void 0 : runtime3.accumulator)) return;
+    return runtime3.accumulator.subscribe(() => {
+      refilter();
+    });
+  }, [runtime3, refilter]);
+  useEffect8(() => {
+    if (!(runtime3 == null ? void 0 : runtime3.context)) return;
+    return runtime3.context.subscribe(() => {
+      refilter();
+    });
+  }, [runtime3, refilter]);
   useEffect8(() => {
     if (!pollIntervalMs) return;
     const id = setInterval(() => {
@@ -5217,12 +5514,12 @@ function useShadowCanvasConfig({
     }, pollIntervalMs);
     return () => clearInterval(id);
   }, [load, pollIntervalMs]);
-  return useMemo5(() => state, [state]);
+  return useMemo6(() => state, [state]);
 }
 
 // src/SmartCanvasApp.tsx
-import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef7, useState as useState7 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useMemo as useMemo7, useRef as useRef7, useState as useState7 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function SmartCanvasApp({
   controller,
   fetcher,
@@ -5245,7 +5542,7 @@ function SmartCanvasApp({
   workspaceTheme
 }) {
   if (runtime3) {
-    return /* @__PURE__ */ jsx7(RuntimeProvider, { runtime: runtime3, children: /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(RuntimeProvider, { runtime: runtime3, children: /* @__PURE__ */ jsx8(
       SmartCanvasAppInner,
       {
         controller,
@@ -5270,7 +5567,7 @@ function SmartCanvasApp({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     SmartCanvasAppInner,
     {
       controller,
@@ -5315,7 +5612,7 @@ function SmartCanvasAppInner({
   initialBatchHandle,
   workspaceTheme
 }) {
-  var _a2, _b, _c, _d, _e, _f;
+  var _a2, _b, _c, _d, _e, _f, _g;
   const [open, setOpen] = useState7(controller.getState().open);
   const pageContext = usePageContext();
   const [localUrl, setLocalUrl] = useState7(
@@ -5345,7 +5642,7 @@ function SmartCanvasAppInner({
       history.replaceState = originalReplaceState;
     };
   }, [runtime3]);
-  const derivedFetcher = useMemo6(() => {
+  const derivedFetcher = useMemo7(() => {
     if (fetcher) return fetcher;
     return createCanvasConfigFetcher({
       configUri,
@@ -5427,13 +5724,13 @@ function SmartCanvasAppInner({
   if (!configState.isLoading && !hasContent) {
     return null;
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     ThemeProvider,
     {
       themeConfig,
       workspaceTheme,
       shadowRoot,
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         ShadowCanvasOverlay,
         {
           tiles: configState.tiles,
@@ -5442,9 +5739,10 @@ function SmartCanvasAppInner({
           canvasTitle: configState.canvasTitle,
           telemetry,
           launcherLabel: launcherLabel != null ? launcherLabel : (_b = configState.launcher) == null ? void 0 : _b.label,
-          launcherAnimate: (_c = configState.launcher) == null ? void 0 : _c.animate,
-          launcherAnimationStyle: (_d = configState.launcher) == null ? void 0 : _d.animationStyle,
-          notificationCount: (_f = (_e = configState.launcher) == null ? void 0 : _e.notificationCount) != null ? _f : configState.tiles.length,
+          launcherIcon: (_c = configState.launcher) == null ? void 0 : _c.icon,
+          launcherAnimate: (_d = configState.launcher) == null ? void 0 : _d.animate,
+          launcherAnimationStyle: (_e = configState.launcher) == null ? void 0 : _e.animationStyle,
+          notificationCount: (_g = (_f = configState.launcher) == null ? void 0 : _f.notificationCount) != null ? _g : configState.tiles.length,
           footerSlot,
           isOpen: open,
           onToggle: () => controller.toggle(),
@@ -5457,7 +5755,7 @@ function SmartCanvasAppInner({
 
 // src/SmartCanvasElement.tsx
 import { createRoot as createRoot2 } from "react-dom/client";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var TAG_NAME = "smart-canvas";
 var BASE_CSS = `
 :host {
@@ -5558,13 +5856,13 @@ var SmartCanvasElement = class extends HTMLElement {
       __privateSet(this, _root, createRoot2(__privateGet(this, _mount)));
     }
     __privateGet(this, _root).render(
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         ShadowRootProvider,
         {
           shadowRoot: __privateGet(this, _shadow),
           portalRoot: __privateGet(this, _portalRoot),
           overlayContainer: __privateGet(this, _overlayContainer),
-          children: /* @__PURE__ */ jsx8(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
+          children: /* @__PURE__ */ jsx9(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
         }
       )
     );
@@ -5830,6 +6128,9 @@ function injectBaseStyles(target) {
   --syntro-border: var(--sc-overlay-border, #2b333f);
   --syntro-tooltip-bg: var(--syntro-surface);
   --syntro-tooltip-fg: var(--syntro-fg);
+  --syntro-tooltip-title-color: var(--sc-overlay-title-color, var(--syntro-fg));
+  --syntro-tooltip-arrow-bg: var(--sc-overlay-arrow-color, var(--syntro-tooltip-bg));
+  --syntro-tooltip-arrow-size: var(--sc-overlay-arrow-size, 8px);
   --syntro-tooltip-radius: var(--syntro-radius);
   --syntro-tooltip-padding: 12px 16px;
   --syntro-tooltip-shadow: var(--syntro-shadow);
@@ -5856,14 +6157,13 @@ function injectBaseStyles(target) {
               transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* Tooltip arrow */
+/* Tooltip arrow \u2014 triangle via clip-path (square box so rotation is symmetric) */
 .syntro-tooltip-arrow {
   position: absolute;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-  transform: rotate(45deg);
-  z-index: -1;
+  width: var(--syntro-tooltip-arrow-size);
+  height: var(--syntro-tooltip-arrow-size);
+  background: var(--syntro-tooltip-arrow-bg);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
 }
 
 /* Tooltip content */
@@ -5871,6 +6171,7 @@ function injectBaseStyles(target) {
   font-weight: 600;
   font-size: 15px;
   margin-bottom: 6px;
+  color: var(--syntro-tooltip-title-color);
 }
 
 .syntro-tt-body {
@@ -8382,7 +8683,7 @@ function evaluateCondition(condition, evalContext) {
     case "page_url": {
       const { url } = condition;
       const currentUrl = context.page.url;
-      const pattern = url.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*\*/g, ".*").replace(/\*/g, "[^/]*");
+      const pattern = url.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*");
       const regex = new RegExp(`^${pattern}$`);
       return regex.test(currentUrl);
     }
@@ -10150,6 +10451,7 @@ function createSmartCanvasRuntime(options = {}) {
       return decisionEngine.evaluateSync(strategy, context.get());
     },
     async filterTiles(tiles) {
+      var _a3, _b2;
       const currentUrl = context.get().page.url;
       const results = [];
       for (const tile of tiles) {
@@ -10161,14 +10463,20 @@ function createSmartCanvasRuntime(options = {}) {
         if (!matchesRouteFilter(currentUrl, activation.routes)) {
           continue;
         }
-        if (!activation.strategy) {
-          results.push(tile);
-          continue;
-        }
-        const result = await this.evaluate(activation.strategy);
-        if (result.value) {
-          results.push(tile);
+        if (activation.onlyIfPopulated) {
+          const actions2 = (_b2 = (_a3 = tile.props) == null ? void 0 : _a3.actions) != null ? _b2 : [];
+          if (actions2.length > 0) {
+            const hasVisible = actions2.some((a) => {
+              if (!a.triggerWhen) return true;
+              return decisionEngine.evaluateSync(
+                a.triggerWhen,
+                context.get()
+              ).value;
+            });
+            if (!hasVisible) continue;
+          }
         }
+        results.push(tile);
       }
       return results;
     },
@@ -10941,4 +11249,4 @@ export {
   encodeToken,
   Syntro
 };
-//# sourceMappingURL=chunk-WCQCVPJ7.js.map
+//# sourceMappingURL=chunk-LD22WJ44.js.map