@syntrologie/runtime-sdk 2.4.0-canary.23 → 2.4.0-canary.25

package/dist/smart-canvas.js

@@ -12860,6 +12860,7 @@ var SyntrologieSDK = (() => {
     TooltipZ: () => TooltipZ,
     TourStepForSchemaZ: () => TourStepForSchemaZ,
     TourZ: () => TourZ,
+    TriggerWhenZ: () => TriggerWhenZ,
     ViewportConditionZ: () => ViewportConditionZ,
     ViewportContextZ: () => ViewportContextZ,
     WaitZ: () => WaitZ,
@@ -12950,7 +12951,7 @@ var SyntrologieSDK = (() => {
     validateStrategy: () => validateStrategy,
     widgetRegistry: () => widgetRegistry
   });
-  var import_react17 = __toESM(require_react(), 1);
+  var import_react19 = __toESM(require_react(), 1);
   var import_react_dom3 = __toESM(require_react_dom(), 1);
   var ReactDOMClient = __toESM(require_client(), 1);
 
@@ -13726,7 +13727,7 @@ var SyntrologieSDK = (() => {
   };
 
   // ../adaptives/adaptive-overlays/dist/celebrations/index.js
-  var DEFAULT_COLORS2 = [
+  var FALLBACK_COLORS = [
     "#ff0000",
     "#00ff00",
     "#0000ff",
@@ -13736,6 +13737,21 @@ var SyntrologieSDK = (() => {
     "#ff8800",
     "#8800ff"
   ];
+  function buildThemePalette(primary, hover) {
+    return [primary, hover, `${primary}cc`, `${hover}cc`, "#ffffff", `${primary}80`];
+  }
+  function readThemeColors(overlayRoot) {
+    try {
+      const styles2 = getComputedStyle(overlayRoot);
+      const primary = styles2.getPropertyValue("--sc-color-primary")?.trim();
+      const hover = styles2.getPropertyValue("--sc-color-primary-hover")?.trim();
+      if (primary?.startsWith("#") && primary.length >= 7) {
+        return buildThemePalette(primary, hover || primary);
+      }
+    } catch {
+    }
+    return null;
+  }
   var effectRegistry = /* @__PURE__ */ new Map([
     ["confetti", confettiEffect],
     ["fireworks", fireworksEffect],
@@ -13749,10 +13765,11 @@ var SyntrologieSDK = (() => {
       return { cleanup: () => {
       } };
     }
+    const colors = action.colors ?? readThemeColors(context.overlayRoot) ?? FALLBACK_COLORS;
     const config = {
       duration: action.duration ?? 3e3,
       intensity: action.intensity ?? "medium",
-      colors: action.colors ?? DEFAULT_COLORS2,
+      colors,
       props: action.props
     };
     const engine = new CelebrationEngine();
@@ -14622,6 +14639,13 @@ var SyntrologieSDK = (() => {
   }
 
   // ../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) => {
     const { content, size: size2 = "md", blocking = false, scrim, dismiss, ctaButtons } = action;
     const scrimEl = document.createElement("div");
@@ -14647,8 +14671,8 @@ var SyntrologieSDK = (() => {
     transform: translate(-50%, -50%) scale(0.95);
     max-width: ${sizeMap[size2]};
     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;
@@ -14657,9 +14681,9 @@ var SyntrologieSDK = (() => {
   `;
     let html2 = "";
     if (content.title) {
-      html2 += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: #111827;">${sanitizeHtml2(content.title)}</h2>`;
+      html2 += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: ${V.title};">${sanitizeHtml2(content.title)}</h2>`;
     }
-    html2 += `<div class="syntro-modal-body" style="color: #4b5563; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
+    html2 += `<div class="syntro-modal-body" style="color: ${V.text}; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
     if (dismiss?.closeButton !== false) {
       html2 += `
       <button class="syntro-modal-close" data-syntro-action="dismiss" style="
@@ -14670,7 +14694,8 @@ var SyntrologieSDK = (() => {
         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"/>
@@ -14693,7 +14718,7 @@ var SyntrologieSDK = (() => {
             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)}
@@ -16778,11 +16803,26 @@ var SyntrologieSDK = (() => {
       return { cleanup: () => {
       } };
     }
+    const existing = anchorEl.getAttribute("data-syntro-highlight");
+    if (existing) {
+      const prev = context.overlayRoot.querySelectorAll(".syntro-spotlight-scrim, .syntro-spotlight-ring");
+      prev.forEach((el) => el.remove());
+    }
+    anchorEl.setAttribute("data-syntro-highlight", "true");
+    let ringColor = action.style?.color;
+    if (!ringColor) {
+      try {
+        const primary = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")?.trim();
+        if (primary)
+          ringColor = primary;
+      } catch {
+      }
+    }
     const handle = showHighlight(anchorEl, context.overlayRoot, {
       paddingPx: action.style?.paddingPx ?? 12,
       radiusPx: action.style?.radiusPx ?? 12,
       scrimOpacity: action.style?.scrimOpacity ?? 0.55,
-      ringColor: action.style?.color,
+      ringColor,
       blocking: action.blocking ?? false,
       onClickOutside: action.onClickOutside ?? true,
       onEsc: action.onEsc ?? true
@@ -16795,6 +16835,7 @@ var SyntrologieSDK = (() => {
     return {
       cleanup: () => {
         handle.destroy();
+        anchorEl.removeAttribute("data-syntro-highlight");
       }
     };
   };
@@ -17056,7 +17097,7 @@ var SyntrologieSDK = (() => {
     executors: executors2,
     widgets: [
       {
-        id: "workflow:tracker",
+        id: "adaptive-overlays:workflow-tracker",
         component: WorkflowMountableWidget,
         metadata: {
           name: "Workflow Tracker",
@@ -18093,7 +18134,7 @@ var SyntrologieSDK = (() => {
   }
   var baseStyles = {
     container: {
-      fontFamily: "system-ui, -apple-system, sans-serif",
+      fontFamily: "var(--sc-font-family, system-ui, -apple-system, sans-serif)",
       maxWidth: "800px",
       margin: "0 auto"
     },
@@ -18106,7 +18147,9 @@ var SyntrologieSDK = (() => {
       borderRadius: "8px",
       fontSize: "14px",
       outline: "none",
-      transition: "border-color 0.15s ease"
+      transition: "border-color 0.15s ease",
+      backgroundColor: "var(--sc-content-search-background)",
+      color: "var(--sc-content-search-color)"
     },
     accordion: {
       display: "flex",
@@ -18132,8 +18175,9 @@ var SyntrologieSDK = (() => {
       transition: "background-color 0.15s ease"
     },
     chevron: {
-      fontSize: "18px",
-      transition: "transform 0.2s ease"
+      fontSize: "20px",
+      transition: "transform 0.2s ease",
+      color: "var(--sc-content-chevron-color, currentColor)"
     },
     answer: {
       padding: "var(--sc-content-body-padding, 0 16px 12px 16px)",
@@ -18200,9 +18244,7 @@ var SyntrologieSDK = (() => {
         color: "inherit"
       },
       searchInput: {
-        backgroundColor: slateGrey[12],
-        border: `1px solid ${slateGrey[11]}`,
-        color: slateGrey[1]
+        border: `1px solid ${slateGrey[11]}`
       },
       item: {
         backgroundColor: "var(--sc-content-background)",
@@ -18241,9 +18283,7 @@ var SyntrologieSDK = (() => {
         color: "inherit"
       },
       searchInput: {
-        backgroundColor: slateGrey[3],
-        border: `1px solid ${slateGrey[5]}`,
-        color: slateGrey[12]
+        border: `1px solid ${slateGrey[5]}`
       },
       item: {
         backgroundColor: "var(--sc-content-background)",
@@ -18277,7 +18317,7 @@ var SyntrologieSDK = (() => {
       }
     }
   };
-  function FAQItem({ item, isExpanded, isHighlighted, onToggle, theme, feedbackConfig, feedbackValue, onFeedback }) {
+  function FAQItem({ item, isExpanded, isHighlighted, isLast, onToggle, theme, feedbackConfig, feedbackValue, onFeedback }) {
     const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
     const colors = themeStyles[theme];
     const { question, answer } = item.config;
@@ -18288,7 +18328,8 @@ var SyntrologieSDK = (() => {
       ...isHighlighted ? {
         boxShadow: "0 0 0 2px #6366f1, 0 0 12px rgba(99, 102, 241, 0.4)",
         transition: "box-shadow 0.3s ease"
-      } : {}
+      } : {},
+      ...!isLast ? { borderBottom: "var(--sc-content-item-divider, none)" } : {}
     };
     const questionStyle = {
       ...baseStyles.question,
@@ -18297,7 +18338,7 @@ var SyntrologieSDK = (() => {
     };
     const chevronStyle = {
       ...baseStyles.chevron,
-      transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)"
+      transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
     };
     const answerStyle = {
       ...baseStyles.answer,
@@ -18309,7 +18350,7 @@ var SyntrologieSDK = (() => {
       ...baseStyles.feedback,
       ...colors.feedbackPrompt
     };
-    return (0, import_jsx_runtime4.jsxs)("div", { style: itemStyle, "data-faq-item-id": item.config.id, children: [(0, import_jsx_runtime4.jsxs)("button", { type: "button", style: questionStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [(0, import_jsx_runtime4.jsx)("span", { children: question }), (0, import_jsx_runtime4.jsx)("span", { style: chevronStyle, children: "\u25BC" })] }), (0, import_jsx_runtime4.jsxs)("div", { style: answerStyle, "aria-hidden": !isExpanded, children: [renderAnswer(answer), isExpanded && feedbackConfig && (0, import_jsx_runtime4.jsxs)("div", { style: feedbackStyle, children: [(0, import_jsx_runtime4.jsx)("span", { children: getFeedbackPrompt(feedbackConfig) }), (0, import_jsx_runtime4.jsx)("button", { type: "button", style: {
+    return (0, import_jsx_runtime4.jsxs)("div", { style: itemStyle, "data-faq-item-id": item.config.id, children: [(0, import_jsx_runtime4.jsxs)("button", { type: "button", style: questionStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [(0, import_jsx_runtime4.jsx)("span", { children: question }), (0, import_jsx_runtime4.jsx)("span", { style: chevronStyle, children: "\u203A" })] }), (0, import_jsx_runtime4.jsxs)("div", { style: answerStyle, "aria-hidden": !isExpanded, children: [renderAnswer(answer), isExpanded && feedbackConfig && (0, import_jsx_runtime4.jsxs)("div", { style: feedbackStyle, children: [(0, import_jsx_runtime4.jsx)("span", { children: getFeedbackPrompt(feedbackConfig) }), (0, import_jsx_runtime4.jsx)("button", { type: "button", style: {
       ...baseStyles.feedbackButton,
       ...feedbackValue === "up" ? baseStyles.feedbackButtonSelected : {}
     }, "aria-label": "Thumbs up", onClick: () => onFeedback(item.config.id, question, "up"), children: "\u{1F44D}" }), (0, import_jsx_runtime4.jsx)("button", { type: "button", style: {
@@ -18490,11 +18531,11 @@ var SyntrologieSDK = (() => {
       ...baseStyles.categoryHeader,
       ...themeStyles[resolvedTheme].categoryHeader
     };
-    const renderItems = (items) => items.map((q2) => (0, import_jsx_runtime4.jsx)(FAQItem, { item: q2, isExpanded: expandedIds.has(q2.config.id), isHighlighted: highlightId === q2.config.id, onToggle: () => handleToggle(q2.config.id), theme: resolvedTheme, feedbackConfig, feedbackValue: feedbackState.get(q2.config.id), onFeedback: handleFeedback }, q2.config.id));
+    const renderItems = (items) => items.map((q2, index2) => (0, import_jsx_runtime4.jsx)(FAQItem, { item: q2, isExpanded: expandedIds.has(q2.config.id), isHighlighted: highlightId === q2.config.id, isLast: index2 === items.length - 1, onToggle: () => handleToggle(q2.config.id), theme: resolvedTheme, feedbackConfig, feedbackValue: feedbackState.get(q2.config.id), onFeedback: handleFeedback }, q2.config.id));
     if (visibleQuestions.length === 0) {
-      return (0, import_jsx_runtime4.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: (0, import_jsx_runtime4.jsx)("div", { style: emptyStateStyle, children: "No FAQ questions available." }) });
+      return (0, import_jsx_runtime4.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: (0, import_jsx_runtime4.jsx)("div", { style: emptyStateStyle, children: "You're all set for now! We'll surface answers here when they're relevant to what you're doing." }) });
     }
-    return (0, import_jsx_runtime4.jsxs)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: [config.searchable && (0, import_jsx_runtime4.jsx)("div", { style: baseStyles.searchWrapper, children: (0, import_jsx_runtime4.jsx)("input", { type: "text", placeholder: "Search questions...", value: searchQuery, onChange: (e2) => setSearchQuery(e2.target.value), style: searchInputStyle }) }), (0, import_jsx_runtime4.jsx)("div", { style: baseStyles.accordion, children: hasCategories ? Array.from(categoryGroups.entries()).map(([category, items]) => (0, import_jsx_runtime4.jsxs)(import_react4.default.Fragment, { children: [category && (0, import_jsx_runtime4.jsx)("div", { style: categoryHeaderStyle, "data-category-header": category, children: category }), renderItems(items)] }, category ?? "__ungrouped")) : renderItems(filteredQuestions) }), config.searchable && filteredQuestions.length === 0 && searchQuery && (0, import_jsx_runtime4.jsxs)("div", { style: { ...baseStyles.noResults, ...themeStyles[resolvedTheme].emptyState }, children: ['No questions found matching "', searchQuery, '"'] })] });
+    return (0, import_jsx_runtime4.jsxs)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: [config.searchable && (0, import_jsx_runtime4.jsxs)("div", { style: baseStyles.searchWrapper, children: [(0, import_jsx_runtime4.jsx)("style", { children: `[data-adaptive-id="${instanceId}"] input::placeholder { color: var(--sc-content-search-color, inherit); opacity: 0.7; }` }), (0, import_jsx_runtime4.jsx)("input", { type: "text", placeholder: "Search questions...", value: searchQuery, onChange: (e2) => setSearchQuery(e2.target.value), style: searchInputStyle })] }), (0, import_jsx_runtime4.jsx)("div", { style: baseStyles.accordion, children: hasCategories ? Array.from(categoryGroups.entries()).map(([category, items]) => (0, import_jsx_runtime4.jsxs)(import_react4.default.Fragment, { children: [category && (0, import_jsx_runtime4.jsx)("div", { style: categoryHeaderStyle, "data-category-header": category, children: category }), renderItems(items)] }, category ?? "__ungrouped")) : renderItems(filteredQuestions) }), config.searchable && filteredQuestions.length === 0 && searchQuery && (0, import_jsx_runtime4.jsxs)("div", { style: { ...baseStyles.noResults, ...themeStyles[resolvedTheme].emptyState }, children: ['No questions found matching "', searchQuery, '"'] })] });
   }
   var FAQMountableWidget = {
     mount(container, config) {
@@ -18552,7 +18593,8 @@ var SyntrologieSDK = (() => {
         metadata: {
           name: "FAQ Accordion",
           description: "Collapsible Q&A accordion with search, categories, and feedback",
-          icon: "\u2753"
+          icon: "\u2753",
+          subtitle: "Curated just for you."
         }
       }
     ],
@@ -18921,7 +18963,7 @@ var SyntrologieSDK = (() => {
     };
     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));
     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: "No navigation tips available." }) });
+      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." }) });
     }
     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: baseStyles2.accordion, children: hasCategories ? Array.from(categoryGroups.entries()).map(([category, items]) => (0, import_jsx_runtime5.jsxs)(import_react5.default.Fragment, { children: [category && (0, import_jsx_runtime5.jsx)("div", { style: categoryHeaderStyle, "data-category-header": category, children: category }), renderItems(items)] }, category ?? "__ungrouped")) : renderItems(visibleTips) }) });
   }
@@ -19218,7 +19260,7 @@ var SyntrologieSDK = (() => {
   }
 
   // src/version.ts
-  var SDK_VERSION = "2.4.0-canary.23";
+  var SDK_VERSION = "2.4.0-canary.25";
 
   // src/types.ts
   var SDK_SCHEMA_VERSION = "2.0";
@@ -19683,6 +19725,9 @@ var SyntrologieSDK = (() => {
   --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);
@@ -19709,14 +19754,13 @@ var SyntrologieSDK = (() => {
               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 */
@@ -19724,6 +19768,7 @@ var SyntrologieSDK = (() => {
   font-weight: 600;
   font-size: 15px;
   margin-bottom: 6px;
+  color: var(--syntro-tooltip-title-color);
 }
 
 .syntro-tt-body {
@@ -20006,10 +20051,10 @@ var SyntrologieSDK = (() => {
   }
 
   // src/SmartCanvasApp.tsx
-  var import_react14 = __toESM(require_react(), 1);
+  var import_react16 = __toESM(require_react(), 1);
 
   // src/components/ShadowCanvasOverlay.tsx
-  var import_react12 = __toESM(require_react(), 1);
+  var import_react14 = __toESM(require_react(), 1);
   var import_react_dom = __toESM(require_react_dom(), 1);
 
   // src/events/types.ts
@@ -20759,7 +20804,10 @@ var SyntrologieSDK = (() => {
       background: withAlpha(slateGrey[1], 0.6),
       blur: "blur(24px)",
       border: "none",
-      width: "clamp(380px, 25vw, 520px)"
+      width: "clamp(380px, 25vw, 520px)",
+      transitionDuration: "300ms",
+      transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+      transitionFade: "6%"
     },
     launcher: {
       background: button.primary.backgroundDefault,
@@ -20839,7 +20887,10 @@ var SyntrologieSDK = (() => {
       background: withAlpha(slateGrey[12], 0.7),
       blur: "blur(24px)",
       border: "none",
-      width: "clamp(380px, 25vw, 520px)"
+      width: "clamp(380px, 25vw, 520px)",
+      transitionDuration: "300ms",
+      transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+      transitionFade: "6%"
     },
     launcher: {
       background: brand[3],
@@ -21014,16 +21065,257 @@ ${cssRules}
   }
 
   // src/components/TileCard.tsx
-  var import_react11 = __toESM(require_react(), 1);
+  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(([tag2, attrs]) => (0, import_react11.createElement)(tag2, 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
+  };
+  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 });
+  }
+
+  // src/components/TileCard.tsx
+  var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
   function WidgetMount({ widgetId, props }) {
     const runtime7 = useRuntime();
-    const containerRef = (0, import_react11.useRef)(null);
-    const handleRef = (0, import_react11.useRef)(null);
+    const containerRef = (0, import_react13.useRef)(null);
+    const handleRef = (0, import_react13.useRef)(null);
     const registry = runtime7?.widgets;
     const widgetAvailable = registry?.has(widgetId) ?? false;
-    const [, forceUpdate] = (0, import_react11.useReducer)((x2) => x2 + 1, 0);
-    (0, import_react11.useEffect)(() => {
+    const [, forceUpdate] = (0, import_react13.useReducer)((x2) => x2 + 1, 0);
+    (0, import_react13.useEffect)(() => {
       if (!registry || widgetAvailable) return;
       return registry.subscribe((event) => {
         if (event.type === "registered" && event.widgetId === widgetId) {
@@ -21031,7 +21323,7 @@ ${cssRules}
         }
       });
     }, [registry, widgetId, widgetAvailable]);
-    (0, import_react11.useEffect)(() => {
+    (0, import_react13.useEffect)(() => {
       if (!containerRef.current || !registry || !widgetAvailable) return;
       const handle = registry.mount(widgetId, containerRef.current, props);
       handleRef.current = handle;
@@ -21041,7 +21333,7 @@ ${cssRules}
       };
     }, [registry, widgetId, props, widgetAvailable]);
     if (!registry || !registry.has(widgetId)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
         {
           style: {
@@ -21057,7 +21349,7 @@ ${cssRules}
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: containerRef, style: { width: "100%", minHeight: "40px" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: { width: "100%", minHeight: "40px" } });
   }
   function TileCard({
     config,
@@ -21065,15 +21357,27 @@ ${cssRules}
     telemetry: _telemetry,
     style
   }) {
-    const { title, widget, props } = config;
-    const [, setTick] = (0, import_react11.useState)(0);
+    const { title, subtitle, widget, props, icon } = config;
+    const [, setTick] = (0, import_react13.useState)(0);
     const runtime7 = useRuntime();
-    (0, import_react11.useEffect)(() => {
+    (0, import_react13.useEffect)(() => {
       if (runtime7) setTick((t2) => t2 + 1);
     }, [runtime7]);
-    const [hovered, setHovered] = (0, import_react11.useState)(false);
-    const onMouseEnter = (0, import_react11.useCallback)(() => setHovered(true), []);
-    const onMouseLeave = (0, import_react11.useCallback)(() => setHovered(false), []);
+    const registration = (0, import_react13.useMemo)(
+      () => runtime7?.widgets?.getRegistration?.(widget),
+      [runtime7?.widgets, widget]
+    );
+    const resolvedIcon = (0, import_react13.useMemo)(() => {
+      if (icon) return icon;
+      return registration?.metadata?.icon ?? "+";
+    }, [icon, registration]);
+    const resolvedSubtitle = (0, import_react13.useMemo)(() => {
+      if (subtitle) return subtitle;
+      return registration?.metadata?.subtitle;
+    }, [subtitle, registration]);
+    const [hovered, setHovered] = (0, import_react13.useState)(false);
+    const onMouseEnter = (0, import_react13.useCallback)(() => setHovered(true), []);
+    const onMouseLeave = (0, import_react13.useCallback)(() => setHovered(false), []);
     const cardStyle = {
       display: "flex",
       flexDirection: "column",
@@ -21094,23 +21398,17 @@ ${cssRules}
     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__ */ (0, import_jsx_runtime10.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "article",
       {
         "data-shadow-canvas-id": `tile-${config.id}`,
@@ -21118,32 +21416,49 @@ ${cssRules}
         onMouseEnter,
         onMouseLeave,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: headerStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: iconStyle, children: "+" }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "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 ?? widget
-              }
-            ) })
+          /* @__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)(
+                "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 ?? widget
+                }
+              ),
+              resolvedSubtitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "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__ */ (0, import_jsx_runtime10.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             "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__ */ (0, import_jsx_runtime10.jsx)("div", { style: { paddingTop: "0.875rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
+              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 } }) })
             }
           )
         ]
@@ -21152,7 +21467,7 @@ ${cssRules}
   }
 
   // src/components/ShadowCanvasOverlay.tsx
-  var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
   var LAUNCHER_STYLES_ID = "syntro-launcher-styles";
   function ensureLauncherStyles(target, css) {
     if (target.querySelector(`#${LAUNCHER_STYLES_ID}`)) return;
@@ -21177,9 +21492,9 @@ ${cssRules}
     canvasTitle,
     displayMode = "standard"
   }) {
-    const [mounted, setMounted] = (0, import_react12.useState)(false);
-    const [launcherPos, setLauncherPos] = (0, import_react12.useState)(null);
-    const dragRef = (0, import_react12.useRef)(null);
+    const [mounted, setMounted] = (0, import_react14.useState)(false);
+    const [launcherPos, setLauncherPos] = (0, import_react14.useState)(null);
+    const dragRef = (0, import_react14.useRef)(null);
     const runtime7 = useRuntime();
     const { shadowRoot, portalRoot } = useShadowRoot();
     const { config } = useTheme();
@@ -21188,7 +21503,7 @@ ${cssRules}
       tiles
     );
     useNotifyWatcher(runtime7, tiles, runtime7?.apps);
-    const handleNotificationClick = (0, import_react12.useCallback)(
+    const handleNotificationClick = (0, import_react14.useCallback)(
       (notif) => {
         if (runtime7) {
           runtime7.events.publish(StandardEvents.NOTIFICATION_CLICKED, {
@@ -21210,7 +21525,7 @@ ${cssRules}
       },
       [runtime7, isOpen, onToggle, dismissNotification]
     );
-    const launcherCss = (0, import_react12.useMemo)(
+    const launcherCss = (0, import_react14.useMemo)(
       () => `
   @keyframes syntro-launcher-pulse {
     0%, 100% {
@@ -21247,7 +21562,7 @@ ${cssRules}
 `,
       [config.colorPrimary, config.colorPrimaryHover]
     );
-    (0, import_react12.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       if (!isOpen) return;
       tiles.forEach((tile) => {
         telemetry?.trackRectangleViewed(tile.id, "overlay");
@@ -21257,11 +21572,11 @@ ${cssRules}
         }
       });
     }, [telemetry, runtime7, isOpen, tiles]);
-    (0, import_react12.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       setMounted(true);
       ensureLauncherStyles(shadowRoot, launcherCss);
     }, [shadowRoot, launcherCss]);
-    const toggle2 = (0, import_react12.useCallback)(() => {
+    const toggle2 = (0, import_react14.useCallback)(() => {
       const next = !isOpen;
       if (next) {
         telemetry?.trackCanvasOpened("overlay");
@@ -21274,7 +21589,7 @@ ${cssRules}
       }
       onToggle();
     }, [isOpen, telemetry, runtime7, onToggle]);
-    const onLauncherPointerDown = (0, import_react12.useCallback)((e2) => {
+    const onLauncherPointerDown = (0, import_react14.useCallback)((e2) => {
       const rect = e2.currentTarget.getBoundingClientRect();
       dragRef.current = {
         startX: e2.clientX,
@@ -21285,7 +21600,7 @@ ${cssRules}
       };
       e2.currentTarget.setPointerCapture(e2.pointerId);
     }, []);
-    const onLauncherPointerMove = (0, import_react12.useCallback)((e2) => {
+    const onLauncherPointerMove = (0, import_react14.useCallback)((e2) => {
       const drag = dragRef.current;
       if (!drag) return;
       const dx = e2.clientX - drag.startX;
@@ -21297,7 +21612,7 @@ ${cssRules}
         setLauncherPos({ x: drag.startElX + dx, y: drag.startElY + dy });
       }
     }, []);
-    const onLauncherPointerUp = (0, import_react12.useCallback)(
+    const onLauncherPointerUp = (0, import_react14.useCallback)(
       (_e2) => {
         const drag = dragRef.current;
         dragRef.current = null;
@@ -21310,14 +21625,17 @@ ${cssRules}
     const isFocused = displayMode === "focused";
     const isRight = config.canvas.position === "right";
     const isPush = config.canvas.layout === "push";
-    const containerRef = (0, import_react12.useRef)(null);
+    const canvasBorder = config.canvas.border ?? "none";
+    const containerRef = (0, import_react14.useRef)(null);
     const zIndex = 2147483600;
-    (0, import_react12.useEffect)(() => {
+    (0, import_react14.useEffect)(() => {
       if (!isPush) return;
       const root = document.documentElement;
       const prop = isRight ? "marginRight" : "marginLeft";
+      const duration = config.canvas.transitionDuration ?? "300ms";
+      const easing = config.canvas.transitionEasing ?? "cubic-bezier(0.16, 1, 0.3, 1)";
       const prevTransition = root.style.transition;
-      root.style.transition = `${prop} 340ms cubic-bezier(0.16, 1, 0.3, 1)`;
+      root.style.transition = `${prop} ${duration} ${easing}`;
       if (isOpen) {
         const width = containerRef.current?.offsetWidth ?? 380;
         root.style[prop] = `${width}px`;
@@ -21328,8 +21646,8 @@ ${cssRules}
         root.style[prop] = "";
         root.style.transition = prevTransition;
       };
-    }, [isPush, isOpen, isRight]);
-    (0, import_react12.useEffect)(() => {
+    }, [isPush, isOpen, isRight, config.canvas.transitionDuration, config.canvas.transitionEasing]);
+    (0, import_react14.useEffect)(() => {
       if (!isPush || !isOpen) return;
       const container = containerRef.current;
       if (!container) return;
@@ -21349,19 +21667,28 @@ ${cssRules}
       maxHeight: "100%",
       pointerEvents: "auto",
       opacity: isOpen ? 1 : 0,
-      transition: isOpen ? "transform 340ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease-out" : "transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-in",
+      transition: (() => {
+        const dur = config.canvas.transitionDuration ?? "300ms";
+        const ease = config.canvas.transitionEasing ?? "cubic-bezier(0.16, 1, 0.3, 1)";
+        return isOpen ? `transform ${dur} ${ease}, opacity ${dur} ease-out` : `transform ${dur} ${ease}, opacity ${dur} ease-in`;
+      })(),
       color: "var(--sc-overlay-text-color)",
-      // Standard mode: no tint, just blur with a tight fade mask at the leading edge
-      // Focused mode: full frosted glass
-      background: isFocused ? "var(--sc-canvas-background)" : "var(--sc-canvas-background, transparent)",
-      backdropFilter: isFocused ? `${config.canvas.blur ?? "blur(24px)"} saturate(1.2)` : "blur(6px)",
-      WebkitBackdropFilter: isFocused ? `${config.canvas.blur ?? "blur(24px)"} saturate(1.2)` : "blur(6px)",
-      // Tight fade mask so blur cuts off sharply at the leading edge
-      ...!isFocused ? {
-        maskImage: isRight ? "linear-gradient(to right, transparent, black 6%)" : "linear-gradient(to left, transparent, black 6%)",
-        WebkitMaskImage: isRight ? "linear-gradient(to right, transparent, black 6%)" : "linear-gradient(to left, transparent, black 6%)"
-      } : {},
-      border: "none",
+      background: "var(--sc-canvas-background)",
+      // Standard mode: config blur only. Focused mode: config blur + saturate boost.
+      ...(() => {
+        const blur = config.canvas.blur ?? "blur(24px)";
+        const filter = isFocused && blur !== "none" ? `${blur} saturate(1.2)` : blur;
+        return { backdropFilter: filter, WebkitBackdropFilter: filter };
+      })(),
+      // Tight fade mask so blur cuts off sharply at the leading edge.
+      // Disabled when a visible border is configured (mask would fade the border).
+      ...(() => {
+        if (isFocused || canvasBorder && canvasBorder !== "none") return {};
+        const fade = config.canvas.transitionFade ?? "6%";
+        const mask = isRight ? `linear-gradient(to right, transparent, black ${fade})` : `linear-gradient(to left, transparent, black ${fade})`;
+        return { maskImage: mask, WebkitMaskImage: mask };
+      })(),
+      border: canvasBorder,
       borderRadius: "var(--sc-overlay-border-radius, 0)",
       boxShadow: "none",
       // Transform logic
@@ -21376,7 +21703,7 @@ ${cssRules}
       pointerEvents: "none",
       padding: "0"
     };
-    const content = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    const content = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "div",
       {
         "data-shadow-canvas-id": "overlay-root",
@@ -21386,9 +21713,9 @@ ${cssRules}
           pointerEvents: isOpen ? "auto" : "none",
           zIndex
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: wrapperStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: containerRef, "data-shadow-canvas-id": "overlay-container", style: containerStyle, children: [
-            isFocused && canvasTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        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)(
               "p",
               {
                 style: {
@@ -21401,13 +21728,13 @@ ${cssRules}
                 children: canvasTitle
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "div",
               {
                 style: { color: "var(--sc-overlay-text-color)", padding: isFocused ? "1rem" : "0" },
                 children: "Loading..."
               }
-            ) : error2 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            ) : error2 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               "div",
               {
                 style: {
@@ -21421,7 +21748,7 @@ ${cssRules}
               }
             ) : isFocused ? (
               /* Focused Mode: Render first tile full size */
-              tiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              tiles.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 TileCard,
                 {
                   config: tiles[0],
@@ -21432,7 +21759,7 @@ ${cssRules}
               ) : null
             ) : (
               /* Standard Mode: Stacked cards — widgets always visible */
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   style: {
@@ -21441,7 +21768,7 @@ ${cssRules}
                     gap: "0.75rem",
                     width: "100%"
                   },
-                  children: tiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  children: tiles.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     TileCard,
                     {
                       config: tile,
@@ -21456,7 +21783,7 @@ ${cssRules}
             ) }),
             footerSlot
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "div",
             {
               onClick: toggle2,
@@ -21471,9 +21798,9 @@ ${cssRules}
       }
     );
     if (!mounted) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
       (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
           "div",
           {
             "data-shadow-canvas-id": "overlay-launcher",
@@ -21484,7 +21811,7 @@ ${cssRules}
               zIndex: zIndex + 47
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 NotificationToastStack,
                 {
                   notifications,
@@ -21493,7 +21820,7 @@ ${cssRules}
                   position: config.canvas.position ?? "right"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -21537,7 +21864,7 @@ ${cssRules}
                     }
                   },
                   children: [
-                    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                       "svg",
                       {
                         width: "24",
@@ -21552,11 +21879,11 @@ ${cssRules}
                         focusable: "false",
                         style: { transition: "transform 200ms ease" },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M18 6L6 18" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M6 6l12 12" })
+                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M18 6L6 18" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M6 6l12 12" })
                         ]
                       }
-                    ) : launcherIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    ) : launcherIcon ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                       "img",
                       {
                         src: launcherIcon,
@@ -21569,7 +21896,7 @@ ${cssRules}
                           pointerEvents: "none"
                         }
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                       "svg",
                       {
                         width: "24",
@@ -21584,16 +21911,16 @@ ${cssRules}
                         focusable: "false",
                         style: { transition: "transform 200ms ease" },
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime11.jsx)("path", { d: "M5 3v4" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M3 5h4" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M19 17v4" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("path", { d: "M17 19h4" })
+                          /* @__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" })
                         ]
                       }
                     ),
-                    !isOpen && notifications.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "absolute", top: -2, right: -2, pointerEvents: "none" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    !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)(
                         "span",
                         {
                           className: "syntro-badge-ping",
@@ -21605,7 +21932,7 @@ ${cssRules}
                           }
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         "span",
                         {
                           className: "syntro-badge-glow",
@@ -21616,7 +21943,7 @@ ${cssRules}
                           }
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         "span",
                         {
                           className: "syntro-badge-bounce",
@@ -21645,12 +21972,12 @@ ${cssRules}
         ),
         portalRoot
       ),
-      isOpen ? (0, import_react_dom.createPortal)(content, portalRoot) : null
+      (0, import_react_dom.createPortal)(content, portalRoot)
     ] });
   }
 
   // src/hooks/useShadowCanvasConfig.ts
-  var import_react13 = __toESM(require_react(), 1);
+  var import_react15 = __toESM(require_react(), 1);
   var sortTiles = (tiles) => [...tiles].sort((a2, b2) => (b2.priority ?? 0) - (a2.priority ?? 0));
   function useShadowCanvasConfig({
     fetcher,
@@ -21659,17 +21986,29 @@ ${cssRules}
     pageUrl,
     pollIntervalMs
   }) {
-    const [state, setState] = (0, import_react13.useState)({
+    const [state, setState] = (0, import_react15.useState)({
       tiles: [],
       actions: [],
       isLoading: true
     });
-    const prevActionsJsonRef = (0, import_react13.useRef)("[]");
-    const load = (0, import_react13.useCallback)(async () => {
+    const prevActionsJsonRef = (0, import_react15.useRef)("[]");
+    const rawConfigRef = (0, import_react15.useRef)(null);
+    const refilter = (0, import_react15.useCallback)(async () => {
+      const raw = rawConfigRef.current;
+      if (!raw || !runtime7) return;
+      let tiles = raw.tiles || [];
+      tiles = await runtime7.filterTiles(tiles);
+      if (experiments) {
+        tiles = tiles.filter((tile) => experiments.shouldRenderRectangle(tile));
+      }
+      setState((prev) => ({ ...prev, tiles: sortTiles(tiles) }));
+    }, [runtime7, experiments]);
+    const load = (0, import_react15.useCallback)(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 (runtime7) {
           tiles = await runtime7.filterTiles(tiles);
@@ -21706,24 +22045,36 @@ ${cssRules}
         }));
       }
     }, [experiments, fetcher, runtime7]);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
       load();
       if (experiments?.onFeaturesChanged) {
         return experiments.onFeaturesChanged(() => load());
       }
     }, [load, experiments, pageUrl]);
-    (0, import_react13.useEffect)(() => {
+    (0, import_react15.useEffect)(() => {
+      if (!runtime7?.accumulator) return;
+      return runtime7.accumulator.subscribe(() => {
+        refilter();
+      });
+    }, [runtime7, refilter]);
+    (0, import_react15.useEffect)(() => {
+      if (!runtime7?.context) return;
+      return runtime7.context.subscribe(() => {
+        refilter();
+      });
+    }, [runtime7, refilter]);
+    (0, import_react15.useEffect)(() => {
       if (!pollIntervalMs) return;
       const id = setInterval(() => {
         load();
       }, pollIntervalMs);
       return () => clearInterval(id);
     }, [load, pollIntervalMs]);
-    return (0, import_react13.useMemo)(() => state, [state]);
+    return (0, import_react15.useMemo)(() => state, [state]);
   }
 
   // src/SmartCanvasApp.tsx
-  var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
   function SmartCanvasApp({
     controller,
     fetcher,
@@ -21746,7 +22097,7 @@ ${cssRules}
     workspaceTheme
   }) {
     if (runtime7) {
-      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(RuntimeProvider, { runtime: runtime7, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(RuntimeProvider, { runtime: runtime7, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         SmartCanvasAppInner,
         {
           controller,
@@ -21771,7 +22122,7 @@ ${cssRules}
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       SmartCanvasAppInner,
       {
         controller,
@@ -21816,13 +22167,13 @@ ${cssRules}
     initialBatchHandle,
     workspaceTheme
   }) {
-    const [open, setOpen] = (0, import_react14.useState)(controller.getState().open);
+    const [open, setOpen] = (0, import_react16.useState)(controller.getState().open);
     const pageContext = usePageContext();
-    const [localUrl, setLocalUrl] = (0, import_react14.useState)(
+    const [localUrl, setLocalUrl] = (0, import_react16.useState)(
       () => typeof window !== "undefined" ? window.location.href : "/"
     );
     const pageUrl = pageContext?.url ?? localUrl;
-    (0, import_react14.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       if (runtime7) return;
       if (typeof window === "undefined") return;
       const updateUrl = () => setLocalUrl(window.location.href);
@@ -21845,7 +22196,7 @@ ${cssRules}
         history.replaceState = originalReplaceState;
       };
     }, [runtime7]);
-    const derivedFetcher = (0, import_react14.useMemo)(() => {
+    const derivedFetcher = (0, import_react16.useMemo)(() => {
       if (fetcher) return fetcher;
       return createCanvasConfigFetcher({
         configUri,
@@ -21862,15 +22213,16 @@ ${cssRules}
       pageUrl
     });
     const hasContent = configState.tiles.length > 0 && !configState.error;
-    (0, import_react14.useEffect)(() => controller.subscribe((state) => setOpen(state.open)), [controller]);
-    (0, import_react14.useEffect)(() => {
+    (0, import_react16.useEffect)(() => controller.subscribe((state) => setOpen(state.open)), [controller]);
+    (0, import_react16.useEffect)(() => {
       if (!configState.isLoading && !hasContent && controller.getState().open) {
         controller.setOpen(false);
       }
     }, [controller, hasContent, configState.isLoading]);
-    const batchHandleRef = (0, import_react14.useRef)(initialBatchHandle ?? null);
-    const adoptedInitialRef = (0, import_react14.useRef)(!!initialBatchHandle);
-    (0, import_react14.useEffect)(() => {
+    const batchHandleRef = (0, import_react16.useRef)(initialBatchHandle ?? null);
+    const adoptedInitialRef = (0, import_react16.useRef)(!!initialBatchHandle);
+    const runVersionRef = (0, import_react16.useRef)(0);
+    (0, import_react16.useEffect)(() => {
       if (!runtime7?.actions) return;
       if (adoptedInitialRef.current) {
         if (configState.actions.length > 0) {
@@ -21878,7 +22230,8 @@ ${cssRules}
         }
         return;
       }
-      let cancelled = false;
+      const version = ++runVersionRef.current;
+      const stale = () => version !== runVersionRef.current;
       const run = async () => {
         if (batchHandleRef.current) {
           try {
@@ -21888,17 +22241,17 @@ ${cssRules}
           }
           batchHandleRef.current = null;
         }
-        if (cancelled) return;
+        if (stale()) return;
         if (configState.actions.length > 0) {
           try {
             const handle = await runtime7.actions.applyBatch(configState.actions);
-            if (cancelled) {
+            if (stale()) {
               await handle.revertAll();
             } else {
               batchHandleRef.current = handle;
             }
           } catch (err) {
-            if (!cancelled) {
+            if (!stale()) {
               console.error("[SmartCanvasApp] Failed to apply actions:", err);
             }
           }
@@ -21906,7 +22259,6 @@ ${cssRules}
       };
       run();
       return () => {
-        cancelled = true;
         if (batchHandleRef.current) {
           batchHandleRef.current.revertAll().catch((err) => {
             console.error("[SmartCanvasApp] Failed to revert actions on cleanup:", err);
@@ -21915,7 +22267,7 @@ ${cssRules}
         }
       };
     }, [runtime7, configState.actions, pageUrl]);
-    (0, import_react14.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       if (!runtime7) return;
       return runtime7.events.subscribe(
         { names: ["canvas.requestOpen"] },
@@ -21927,13 +22279,13 @@ ${cssRules}
     if (!configState.isLoading && !hasContent) {
       return null;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       ThemeProvider,
       {
         themeConfig,
         workspaceTheme,
         shadowRoot,
-        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           ShadowCanvasOverlay,
           {
             tiles: configState.tiles,
@@ -21942,6 +22294,7 @@ ${cssRules}
             canvasTitle: configState.canvasTitle,
             telemetry,
             launcherLabel: launcherLabel ?? configState.launcher?.label,
+            launcherIcon: configState.launcher?.icon,
             launcherAnimate: configState.launcher?.animate,
             launcherAnimationStyle: configState.launcher?.animationStyle,
             notificationCount: configState.launcher?.notificationCount ?? configState.tiles.length,
@@ -21956,7 +22309,7 @@ ${cssRules}
   }
 
   // src/SmartCanvasElement.tsx
-  var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
   var TAG_NAME = "smart-canvas";
   var BASE_CSS = `
 :host {
@@ -22056,13 +22409,13 @@ ${cssRules}
         __privateSet(this, _root, (0, import_client5.createRoot)(__privateGet(this, _mount)));
       }
       __privateGet(this, _root).render(
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           ShadowRootProvider,
           {
             shadowRoot: __privateGet(this, _shadow),
             portalRoot: __privateGet(this, _portalRoot),
             overlayContainer: __privateGet(this, _overlayContainer),
-            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
           }
         )
       );
@@ -22288,32 +22641,32 @@ ${cssRules}
   }
 
   // src/components/TileWheel.tsx
-  var import_react15 = __toESM(require_react(), 1);
-  var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+  var import_react17 = __toESM(require_react(), 1);
+  var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
   function TileWheel({ tiles, intervalMs = 7e3, telemetry }) {
-    const [index2, setIndex] = (0, import_react15.useState)(0);
-    const ordered = (0, import_react15.useMemo)(
+    const [index2, setIndex] = (0, import_react17.useState)(0);
+    const ordered = (0, import_react17.useMemo)(
       () => [...tiles].sort((a2, b2) => (a2.priority ?? 0) - (b2.priority ?? 0)),
       [tiles]
     );
-    (0, import_react15.useEffect)(() => {
+    (0, import_react17.useEffect)(() => {
       telemetry?.trackCanvasOpened("wheel");
     }, [telemetry]);
-    (0, import_react15.useEffect)(() => {
+    (0, import_react17.useEffect)(() => {
       if (ordered.length <= 1) return;
       const id = setInterval(() => {
         setIndex((prev) => (prev + 1) % ordered.length);
       }, intervalMs);
       return () => clearInterval(id);
     }, [ordered, intervalMs]);
-    (0, import_react15.useEffect)(() => {
+    (0, import_react17.useEffect)(() => {
       const current = ordered[index2];
       if (current) {
         telemetry?.trackRectangleViewed(current.id, "wheel");
       }
     }, [index2, ordered, telemetry]);
     if (!ordered.length) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         style: {
@@ -22327,7 +22680,7 @@ ${cssRules}
         },
         "data-shadow-canvas-id": "wheel",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               style: {
@@ -22336,10 +22689,10 @@ ${cssRules}
                 transform: `translateX(-${index2 * 100}%)`,
                 width: `${ordered.length * 100}%`
               },
-              children: ordered.map((tile) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { width: "100%", flexShrink: 0, padding: "0 1rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(TileCard, { config: tile, surface: "wheel", telemetry }) }, tile.id))
+              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))
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: { marginTop: "1rem", display: "flex", justifyContent: "center", gap: "0.5rem" }, children: ordered.map((tile, idx) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__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)(
             "button",
             {
               type: "button",
@@ -22436,18 +22789,7 @@ ${cssRules}
     if (config.tiles && Array.isArray(config.tiles)) {
       migrated.tiles = config.tiles.map((tile) => {
         const migratedTile = { ...tile };
-        if (tile.experiment && !tile.activation) {
-          const exp = tile.experiment;
-          if (exp.featureKey) {
-            migratedTile.activation = {
-              strategy: {
-                type: "external",
-                provider: "growthbook",
-                featureKey: exp.featureKey,
-                fallback: false
-              }
-            };
-          }
+        if (tile.experiment) {
           delete migratedTile.experiment;
         }
         return migratedTile;
@@ -29543,11 +29885,11 @@ ${cssRules}
   };
 
   // src/SmartCanvasPortal.tsx
-  var import_react16 = __toESM(require_react(), 1);
+  var import_react18 = __toESM(require_react(), 1);
   var import_react_dom2 = __toESM(require_react_dom(), 1);
   function SmartCanvasPortal({ element, children }) {
-    const [mountNode, setMountNode] = (0, import_react16.useState)(null);
-    (0, import_react16.useLayoutEffect)(() => {
+    const [mountNode, setMountNode] = (0, import_react18.useState)(null);
+    (0, import_react18.useLayoutEffect)(() => {
       if (!element) {
         setMountNode(null);
         return;
@@ -29732,7 +30074,7 @@ ${cssRules}
   }
   var W = [true, "true", 1, "1", "yes"];
   var G = (t2) => w(W, t2);
-  var V = [false, "false", 0, "0", "no"];
+  var V2 = [false, "false", 0, "0", "no"];
   function J(t2, i2, e2, r2, s2) {
     return i2 > e2 && (r2.warn("min cannot be greater than max."), i2 = e2), L(t2) ? t2 > e2 ? (r2.warn(" cannot be  greater than max: " + e2 + ". Using max value instead."), e2) : t2 < i2 ? (r2.warn(" cannot be less than min: " + i2 + ". Using min value instead."), i2) : t2 : (r2.warn(" must be a number. using max or fallback. max: " + e2 + ", fallback: " + s2), J(s2 || e2, i2, e2, r2));
   }
@@ -30958,7 +31300,7 @@ ${cssRules}
     }
     get K() {
       var t2 = this.Y.q(this.X);
-      return G(t2) ? Ne.GRANTED : w(V, t2) ? Ne.DENIED : Ne.PENDING;
+      return G(t2) ? Ne.GRANTED : w(V2, t2) ? Ne.DENIED : Ne.PENDING;
     }
     get Y() {
       if (!this.Z) {
@@ -31800,8 +32142,8 @@ ${cssRules}
             }
             if (D2) {
               w2[P2++] = 268435456 | Os[A2] << 18 | As[D2];
-              var V2 = 31 & Os[A2], J2 = 31 & As[D2];
-              k2 += Ts[V2] + Rs[J2], ++x2[257 + V2], ++S2[J2], T2 = h2 + A2, ++E2;
+              var V3 = 31 & Os[A2], J2 = 31 & As[D2];
+              k2 += Ts[V3] + Rs[J2], ++x2[257 + V3], ++S2[J2], T2 = h2 + A2, ++E2;
             } else w2[P2++] = t3[h2], ++x2[t3[h2]];
           }
         }
@@ -35678,12 +36020,16 @@ ${cssRules}
 
   // src/decisions/schema.ts
   var RouteFilterZ = external_exports.object({
-    include: external_exports.array(external_exports.string()).optional(),
-    exclude: external_exports.array(external_exports.string()).optional()
+    include: external_exports.array(external_exports.string()).optional().describe(
+      "URL patterns where this tile appears. Supports *, **, :param wildcards. Use sparingly \u2014 mostly to isolate to specific webapp functionality. Omit to appear on all routes."
+    ),
+    exclude: external_exports.array(external_exports.string()).optional().describe("URL patterns where this tile should NOT appear. Evaluated before include.")
   });
   var ActivationConfigZ = external_exports.object({
     routes: RouteFilterZ,
-    strategy: DecisionStrategyZ.optional()
+    onlyIfPopulated: external_exports.boolean().optional().describe(
+      "When true, tile is hidden if none of its props.actions[] have an active triggerWhen. Useful for tiles with all-deferred FAQ questions or nav tips. Default: false."
+    )
   });
   function validateCondition(data) {
     return ConditionZ.safeParse(data);
@@ -35738,7 +36084,10 @@ ${cssRules}
     background: external_exports.string().optional(),
     blur: external_exports.string().optional(),
     border: external_exports.string().optional(),
-    width: external_exports.string().optional()
+    width: external_exports.string().optional(),
+    transitionDuration: external_exports.string().optional(),
+    transitionEasing: external_exports.string().optional(),
+    transitionFade: external_exports.string().optional()
   });
   var LauncherElementConfigZ = external_exports.object({
     background: external_exports.string().optional(),
@@ -35846,7 +36195,7 @@ ${cssRules}
 
   // src/actions/schema.ts
   var ActionTriggerZ = {
-    triggerWhen: DecisionStrategyZ.nullable().optional()
+    triggerWhen: TriggerWhenZ
   };
   var AnchorIdZ2 = external_exports.object({
     selector: external_exports.string(),
@@ -36481,7 +36830,7 @@ ${cssRules}
     switch (condition.type) {
       case "page_url": {
         const { url } = condition;
-        const currentUrl = context.page.url;
+        const currentUrl = context.page.url.split("?")[0].split("#")[0];
         const pattern = url.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*");
         const regex = new RegExp(`^${pattern}$`);
         return regex.test(currentUrl);
@@ -38158,7 +38507,7 @@ ${cssRules}
   function matchRoutePattern(pathname, pattern) {
     const normalizedPattern = pattern.replace(/\/$/, "") || "/";
     if (pathname === normalizedPattern) return true;
-    const regexPattern = normalizedPattern.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*\*/g, ".*").replace(/\*/g, "[^/]*").replace(/:[^/]+/g, "[^/]+");
+    const regexPattern = normalizedPattern.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*").replace(/:[^/]+/g, "[^/]+");
     const regex = new RegExp(`^${regexPattern}$`);
     return regex.test(pathname);
   }
@@ -38261,14 +38610,20 @@ ${cssRules}
           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 = tile.props?.actions ?? [];
+            if (actions2.length > 0) {
+              const hasVisible = actions2.some((a2) => {
+                if (!a2.triggerWhen) return true;
+                return decisionEngine.evaluateSync(
+                  a2.triggerWhen,
+                  context.get()
+                ).value;
+              });
+              if (!hasVisible) continue;
+            }
           }
+          results.push(tile);
         }
         return results;
       },
@@ -38945,7 +39300,7 @@ ${cssRules}
   }
 
   // src/index.ts
-  var RUNTIME_SDK_BUILD = true ? `${"2026-03-03T23:31:20.312Z"} (${"19510df2c8"})` : "dev";
+  var RUNTIME_SDK_BUILD = true ? `${"2026-03-04T05:03:35.535Z"} (${"485144000d"})` : "dev";
   if (typeof window !== "undefined") {
     console.log(`[Syntro Runtime] Build: ${RUNTIME_SDK_BUILD}`);
     const existing = window.SynOS;
@@ -38954,7 +39309,7 @@ ${cssRules}
       ...existing,
       appRegistry: registry,
       _runtimeBuild: RUNTIME_SDK_BUILD,
-      React: import_react17.default,
+      React: import_react19.default,
       ReactDOM: { ...ReactDOMClient, createPortal: import_react_dom3.createPortal, flushSync: import_react_dom3.flushSync }
     };
     registerBuiltinRuntimeModules(registry);
@@ -39017,6 +39372,30 @@ react/cjs/react-jsx-runtime.production.js:
    * This source code is licensed under the MIT license found in the
    * LICENSE file in the root directory of this source tree.
    *)
+
+lucide-react/dist/esm/shared/src/utils/mergeClasses.js:
+lucide-react/dist/esm/shared/src/utils/toKebabCase.js:
+lucide-react/dist/esm/shared/src/utils/toCamelCase.js:
+lucide-react/dist/esm/shared/src/utils/toPascalCase.js:
+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/circle-question-mark.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/layers.js:
+lucide-react/dist/esm/icons/message-circle.js:
+lucide-react/dist/esm/icons/sparkles.js:
+lucide-react/dist/esm/icons/trophy.js:
+lucide-react/dist/esm/lucide-react.js:
+  (**
+   * @license lucide-react v0.576.0 - ISC
+   *
+   * This source code is licensed under the ISC license.
+   * See the LICENSE file in the root directory of this source tree.
+   *)
 */
 window.Syntro=SyntrologieSDK.Syntro;
 //# sourceMappingURL=smart-canvas.js.map