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

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)}
@@ -16808,24 +16833,67 @@ var SyntrologieSDK = (() => {
       return { cleanup: () => {
       } };
     }
-    const duration = action.duration ?? 2e3;
-    if (!document.querySelector("[data-syntro-pulse-styles]")) {
-      const style = document.createElement("style");
-      style.setAttribute("data-syntro-pulse-styles", "");
+    const duration = action.duration ?? 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 styles2 = getComputedStyle(context.overlayRoot);
+      const pHex = styles2.getPropertyValue("--sc-color-primary")?.trim();
+      const sHex = styles2.getPropertyValue("--sc-color-primary-hover")?.trim();
+      if (pHex?.startsWith("#") && pHex.length >= 7) {
+        primary = parseHex(pHex);
+      }
+      if (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: pr2, g: pg, b: pb } = primary;
+    if (secondary) {
+      const { r: sr2, g: sg, b: sb } = secondary;
       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(${pr2}, ${pg}, ${pb}, 0.35);
+        }
+        25% {
+          box-shadow: 0 0 0 12px rgba(${pr2}, ${pg}, ${pb}, 0);
         }
         50% {
-          box-shadow: 0 0 0 8px rgba(79, 70, 229, 0);
+          box-shadow: 0 0 0 0 rgba(${sr2}, ${sg}, ${sb}, 0.35);
+        }
+        75% {
+          box-shadow: 0 0 0 12px rgba(${sr2}, ${sg}, ${sb}, 0);
+        }
+      }
+    `;
+    } else {
+      style.textContent = `
+      @keyframes syntro-pulse-anim {
+        0%, 100% {
+          box-shadow: 0 0 0 0 rgba(${pr2}, ${pg}, ${pb}, 0.35);
+        }
+        50% {
+          box-shadow: 0 0 0 12px rgba(${pr2}, ${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;
@@ -16855,6 +16923,14 @@ var SyntrologieSDK = (() => {
       return { cleanup: () => {
       } };
     }
+    let badgeColor = "#4f46e5";
+    try {
+      const primary = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")?.trim();
+      if (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);
@@ -16865,7 +16941,7 @@ var SyntrologieSDK = (() => {
       fontWeight: "600",
       lineHeight: "1",
       color: "white",
-      background: "var(--syntro-accent, #4f46e5)",
+      background: badgeColor,
       borderRadius: "9999px",
       pointerEvents: "none",
       zIndex: "2147483646",
@@ -17005,7 +17081,7 @@ var SyntrologieSDK = (() => {
     executors: executors2,
     widgets: [
       {
-        id: "workflow:tracker",
+        id: "adaptive-overlays:workflow-tracker",
         component: WorkflowMountableWidget,
         metadata: {
           name: "Workflow Tracker",
@@ -18042,12 +18118,12 @@ 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"
     },
     searchWrapper: {
-      marginBottom: "16px"
+      marginBottom: "8px"
     },
     searchInput: {
       width: "100%",
@@ -18055,38 +18131,41 @@ 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",
       flexDirection: "column",
-      gap: "8px"
+      gap: "var(--sc-content-item-gap, 6px)"
     },
     item: {
-      borderRadius: "8px",
+      borderRadius: "var(--sc-content-border-radius, 8px)",
       overflow: "hidden",
       transition: "box-shadow 0.15s ease"
     },
     question: {
       width: "100%",
-      padding: "16px 20px",
+      padding: "var(--sc-content-item-padding, 12px 16px)",
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       border: "none",
       cursor: "pointer",
-      fontSize: "15px",
+      fontSize: "var(--sc-content-item-font-size, 15px)",
       fontWeight: 500,
       textAlign: "left",
       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: "0 20px 16px 20px",
-      fontSize: "14px",
+      padding: "var(--sc-content-body-padding, 0 16px 12px 16px)",
+      fontSize: "var(--sc-content-body-font-size, 14px)",
       lineHeight: 1.6,
       overflow: "hidden",
       transition: "max-height 0.2s ease, padding 0.2s ease"
@@ -18102,12 +18181,12 @@ var SyntrologieSDK = (() => {
       marginBottom: "8px"
     },
     categoryHeader: {
-      fontSize: "13px",
+      fontSize: "var(--sc-content-category-font-size, 12px)",
       fontWeight: 700,
       textTransform: "uppercase",
       letterSpacing: "0.05em",
-      padding: "12px 4px 6px 4px",
-      marginTop: "8px"
+      padding: "var(--sc-content-category-padding, 8px 4px 4px 4px)",
+      marginTop: "var(--sc-content-category-gap, 4px)"
     },
     feedback: {
       display: "flex",
@@ -18145,30 +18224,28 @@ var SyntrologieSDK = (() => {
   var themeStyles = {
     light: {
       container: {
-        backgroundColor: base.white,
-        color: slateGrey[1]
+        backgroundColor: "transparent",
+        color: "inherit"
       },
       searchInput: {
-        backgroundColor: slateGrey[12],
-        border: `1px solid ${slateGrey[11]}`,
-        color: slateGrey[1]
+        border: `1px solid ${slateGrey[11]}`
       },
       item: {
-        backgroundColor: slateGrey[12],
-        border: `1px solid ${slateGrey[11]}`
+        backgroundColor: "var(--sc-content-background)",
+        border: "var(--sc-content-border)"
       },
       itemExpanded: {
         boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)"
       },
       question: {
         backgroundColor: "transparent",
-        color: slateGrey[1]
+        color: "var(--sc-content-text-color)"
       },
       questionHover: {
-        backgroundColor: slateGrey[12]
+        backgroundColor: "var(--sc-content-background-hover)"
       },
       answer: {
-        color: slateGrey[6]
+        color: "var(--sc-content-text-secondary-color)"
       },
       category: {
         backgroundColor: purple[8],
@@ -18186,30 +18263,28 @@ var SyntrologieSDK = (() => {
     },
     dark: {
       container: {
-        backgroundColor: slateGrey[1],
-        color: slateGrey[12]
+        backgroundColor: "transparent",
+        color: "inherit"
       },
       searchInput: {
-        backgroundColor: slateGrey[3],
-        border: `1px solid ${slateGrey[5]}`,
-        color: slateGrey[12]
+        border: `1px solid ${slateGrey[5]}`
       },
       item: {
-        backgroundColor: slateGrey[3],
-        border: `1px solid ${slateGrey[5]}`
+        backgroundColor: "var(--sc-content-background)",
+        border: "var(--sc-content-border)"
       },
       itemExpanded: {
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
       },
       question: {
         backgroundColor: "transparent",
-        color: slateGrey[12]
+        color: "var(--sc-content-text-color)"
       },
       questionHover: {
-        backgroundColor: slateGrey[5]
+        backgroundColor: "var(--sc-content-background-hover)"
       },
       answer: {
-        color: slateGrey[8]
+        color: "var(--sc-content-text-secondary-color)"
       },
       category: {
         backgroundColor: purple[0],
@@ -18226,7 +18301,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;
@@ -18237,7 +18312,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,
@@ -18246,7 +18322,7 @@ var SyntrologieSDK = (() => {
     };
     const chevronStyle = {
       ...baseStyles.chevron,
-      transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)"
+      transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
     };
     const answerStyle = {
       ...baseStyles.answer,
@@ -18258,7 +18334,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: {
@@ -18439,11 +18515,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.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) {
@@ -18501,7 +18577,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."
         }
       }
     ],
@@ -18580,18 +18657,17 @@ var SyntrologieSDK = (() => {
   }
   var baseStyles2 = {
     container: {
-      fontFamily: "system-ui, -apple-system, sans-serif",
-      padding: "8px",
+      fontFamily: "var(--sc-font-family, system-ui, -apple-system, sans-serif)",
       maxWidth: "100%",
       overflow: "hidden"
     },
     accordion: {
       display: "flex",
       flexDirection: "column",
-      gap: "4px"
+      gap: "var(--sc-content-item-gap, 6px)"
     },
     item: {
-      borderRadius: "8px",
+      borderRadius: "var(--sc-content-border-radius, 8px)",
       overflow: "hidden",
       transition: "box-shadow 0.2s ease"
     },
@@ -18600,20 +18676,21 @@ var SyntrologieSDK = (() => {
       alignItems: "center",
       gap: "8px",
       width: "100%",
-      padding: "12px 16px",
+      padding: "var(--sc-content-item-padding, 12px 16px)",
       border: "none",
       cursor: "pointer",
-      fontSize: "14px",
+      fontSize: "var(--sc-content-item-font-size, 15px)",
       fontWeight: 500,
       fontFamily: "inherit",
       textAlign: "left",
       transition: "background-color 0.15s ease"
     },
     chevron: {
-      fontSize: "10px",
+      fontSize: "20px",
       transition: "transform 0.2s ease",
       marginLeft: "auto",
-      flexShrink: 0
+      flexShrink: 0,
+      color: "var(--sc-content-chevron-color, currentColor)"
     },
     icon: {
       fontSize: "16px",
@@ -18622,10 +18699,10 @@ var SyntrologieSDK = (() => {
     body: {
       overflow: "hidden",
       transition: "max-height 0.25s ease, padding-bottom 0.25s ease",
-      padding: "0 16px"
+      padding: "var(--sc-content-body-padding, 0 16px 12px 16px)"
     },
     description: {
-      fontSize: "13px",
+      fontSize: "var(--sc-content-body-font-size, 14px)",
       lineHeight: "1.5",
       margin: 0
     },
@@ -18644,11 +18721,11 @@ var SyntrologieSDK = (() => {
       transition: "background-color 0.15s ease"
     },
     categoryHeader: {
-      fontSize: "11px",
+      fontSize: "var(--sc-content-category-font-size, 12px)",
       fontWeight: 600,
       textTransform: "uppercase",
       letterSpacing: "0.05em",
-      padding: "12px 4px 4px"
+      padding: "var(--sc-content-category-padding, 8px 4px 4px 4px)"
     },
     emptyState: {
       fontSize: "13px",
@@ -18659,29 +18736,29 @@ var SyntrologieSDK = (() => {
   var themeStyles2 = {
     light: {
       container: {
-        backgroundColor: base.white,
-        color: slateGrey[1]
+        backgroundColor: "transparent",
+        color: "inherit"
       },
       item: {
-        backgroundColor: slateGrey[12],
-        border: `1px solid ${slateGrey[11]}`
+        backgroundColor: "var(--sc-content-background)",
+        border: "var(--sc-content-border)"
       },
       itemExpanded: {
         boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)"
       },
       header: {
         backgroundColor: "transparent",
-        color: slateGrey[1]
+        color: "var(--sc-content-text-color)"
       },
       headerHover: {
-        backgroundColor: slateGrey[12]
+        backgroundColor: "var(--sc-content-background-hover)"
       },
       body: {
-        color: slateGrey[6]
+        color: "var(--sc-content-text-secondary-color)"
       },
       linkButton: {
-        backgroundColor: purple[8],
-        color: purple[2]
+        backgroundColor: "var(--sc-color-primary, #6366f1)",
+        color: "#ffffff"
       },
       categoryHeader: {
         color: slateGrey[7]
@@ -18692,29 +18769,29 @@ var SyntrologieSDK = (() => {
     },
     dark: {
       container: {
-        backgroundColor: slateGrey[1],
-        color: slateGrey[12]
+        backgroundColor: "transparent",
+        color: "inherit"
       },
       item: {
-        backgroundColor: slateGrey[3],
-        border: `1px solid ${slateGrey[5]}`
+        backgroundColor: "var(--sc-content-background)",
+        border: "var(--sc-content-border)"
       },
       itemExpanded: {
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
       },
       header: {
         backgroundColor: "transparent",
-        color: slateGrey[12]
+        color: "var(--sc-content-text-color)"
       },
       headerHover: {
-        backgroundColor: slateGrey[5]
+        backgroundColor: "var(--sc-content-background-hover)"
       },
       body: {
-        color: slateGrey[8]
+        color: "var(--sc-content-text-secondary-color)"
       },
       linkButton: {
-        backgroundColor: purple[0],
-        color: purple[6]
+        backgroundColor: "var(--sc-color-primary, #6366f1)",
+        color: "#ffffff"
       },
       categoryHeader: {
         color: slateGrey[8]
@@ -18724,14 +18801,15 @@ var SyntrologieSDK = (() => {
       }
     }
   };
-  function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
+  function NavTipItem({ item, isExpanded, isLast, onToggle, onNavigate, theme }) {
     const [isHovered, setIsHovered] = (0, import_react5.useState)(false);
     const colors = themeStyles2[theme];
     const { title, description, href, icon, external } = item.config;
     const itemStyle = {
       ...baseStyles2.item,
       ...colors.item,
-      ...isExpanded ? colors.itemExpanded : {}
+      ...isExpanded ? colors.itemExpanded : {},
+      ...!isLast ? { borderBottom: "var(--sc-content-item-divider, none)" } : {}
     };
     const headerStyle = {
       ...baseStyles2.header,
@@ -18740,7 +18818,7 @@ var SyntrologieSDK = (() => {
     };
     const chevronStyle = {
       ...baseStyles2.chevron,
-      transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)"
+      transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
     };
     const bodyStyle = {
       ...baseStyles2.body,
@@ -18755,7 +18833,7 @@ var SyntrologieSDK = (() => {
         onNavigate(href, external ?? false);
       }
     };
-    return (0, import_jsx_runtime5.jsxs)("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [(0, import_jsx_runtime5.jsxs)("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && (0, import_jsx_runtime5.jsx)("span", { style: baseStyles2.icon, children: icon }), (0, import_jsx_runtime5.jsx)("span", { children: title }), (0, import_jsx_runtime5.jsx)("span", { style: chevronStyle, children: "\u25BC" })] }), (0, import_jsx_runtime5.jsxs)("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [(0, import_jsx_runtime5.jsx)("p", { style: baseStyles2.description, children: description }), href && (0, import_jsx_runtime5.jsxs)("a", { href, onClick: handleLinkClick, style: { ...baseStyles2.linkButton, ...colors.linkButton }, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, children: ["Go ", external ? "\u2197" : "\u2192"] })] })] });
+    return (0, import_jsx_runtime5.jsxs)("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [(0, import_jsx_runtime5.jsxs)("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && (0, import_jsx_runtime5.jsx)("span", { style: baseStyles2.icon, children: icon }), (0, import_jsx_runtime5.jsx)("span", { children: title }), (0, import_jsx_runtime5.jsx)("span", { style: chevronStyle, children: "\u203A" })] }), (0, import_jsx_runtime5.jsxs)("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [(0, import_jsx_runtime5.jsx)("p", { style: baseStyles2.description, children: description }), href && (0, import_jsx_runtime5.jsxs)("a", { href, onClick: handleLinkClick, style: { ...baseStyles2.linkButton, ...colors.linkButton }, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, children: ["Go ", external ? "\u2197" : "\u2192"] })] })] });
   }
   function NavWidget({ config, runtime: runtime7, instanceId }) {
     const [renderTick, forceUpdate] = (0, import_react5.useReducer)((x2) => x2 + 1, 0);
@@ -18867,7 +18945,7 @@ var SyntrologieSDK = (() => {
       ...baseStyles2.emptyState,
       ...themeStyles2[resolvedTheme].emptyState
     };
-    const renderItems = (items) => items.map((tip) => (0, import_jsx_runtime5.jsx)(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, theme: resolvedTheme }, tip.config.id));
+    const renderItems = (items) => items.map((tip, index2) => (0, import_jsx_runtime5.jsx)(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), isLast: index2 === items.length - 1, onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, 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." }) });
     }
@@ -19166,7 +19244,7 @@ var SyntrologieSDK = (() => {
   }
 
   // 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";
@@ -19631,6 +19709,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);
@@ -19657,14 +19738,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 */
@@ -19672,6 +19752,7 @@ var SyntrologieSDK = (() => {
   font-weight: 600;
   font-size: 15px;
   margin-bottom: 6px;
+  color: var(--syntro-tooltip-title-color);
 }
 
 .syntro-tt-body {
@@ -19954,10 +20035,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
@@ -20244,7 +20325,7 @@ var SyntrologieSDK = (() => {
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: "2px", background: "rgba(255, 255, 255, 0.06)" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { style: { height: "2px", background: "rgba(0, 0, 0, 0.08)" }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                   "div",
                   {
                     className: "syntro-toast-progress",
@@ -20703,17 +20784,19 @@ var SyntrologieSDK = (() => {
     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),
@@ -20724,11 +20807,17 @@ var SyntrologieSDK = (() => {
       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",
@@ -20745,6 +20834,26 @@ var SyntrologieSDK = (() => {
       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 = {
@@ -20755,17 +20864,19 @@ var SyntrologieSDK = (() => {
     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),
@@ -20776,11 +20887,17 @@ var SyntrologieSDK = (() => {
       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",
@@ -20797,6 +20914,26 @@ var SyntrologieSDK = (() => {
       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) {
@@ -20811,7 +20948,8 @@ var SyntrologieSDK = (() => {
       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) {
@@ -20831,10 +20969,18 @@ var SyntrologieSDK = (() => {
         ...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;
@@ -20897,16 +21043,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) {
@@ -20914,7 +21301,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;
@@ -20924,7 +21311,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: {
@@ -20940,7 +21327,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,
@@ -20948,15 +21335,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",
@@ -20977,23 +21376,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}`,
@@ -21001,32 +21394,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 } }) })
             }
           )
         ]
@@ -21035,7 +21445,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;
@@ -21049,6 +21459,7 @@ ${cssRules}
     onToggle,
     telemetry,
     launcherLabel: _launcherLabel = "Adaptives",
+    launcherIcon,
     launcherAnimate = false,
     launcherAnimationStyle: _launcherAnimationStyle = "pulse",
     notificationCount: _notificationCount,
@@ -21059,9 +21470,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();
@@ -21070,7 +21481,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, {
@@ -21092,7 +21503,7 @@ ${cssRules}
       },
       [runtime7, isOpen, onToggle, dismissNotification]
     );
-    const launcherCss = (0, import_react12.useMemo)(
+    const launcherCss = (0, import_react14.useMemo)(
       () => `
   @keyframes syntro-launcher-pulse {
     0%, 100% {
@@ -21129,7 +21540,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");
@@ -21139,11 +21550,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");
@@ -21156,7 +21567,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,
@@ -21167,7 +21578,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;
@@ -21179,7 +21590,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;
@@ -21191,7 +21602,37 @@ ${cssRules}
     );
     const isFocused = displayMode === "focused";
     const isRight = config.canvas.position === "right";
+    const isPush = config.canvas.layout === "push";
+    const containerRef = (0, import_react14.useRef)(null);
     const zIndex = 2147483600;
+    (0, import_react14.useEffect)(() => {
+      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 = containerRef.current?.offsetWidth ?? 380;
+        root.style[prop] = `${width}px`;
+      } else {
+        root.style[prop] = "0px";
+      }
+      return () => {
+        root.style[prop] = "";
+        root.style.transition = prevTransition;
+      };
+    }, [isPush, isOpen, isRight]);
+    (0, import_react14.useEffect)(() => {
+      if (!isPush || !isOpen) return;
+      const container = containerRef.current;
+      if (!container) return;
+      const prop = isRight ? "marginRight" : "marginLeft";
+      const observer2 = new ResizeObserver(([entry]) => {
+        document.documentElement.style[prop] = `${entry.contentRect.width}px`;
+      });
+      observer2.observe(container);
+      return () => observer2.disconnect();
+    }, [isPush, isOpen, isRight]);
     const containerStyle = {
       display: "flex",
       flexDirection: "column",
@@ -21228,7 +21669,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",
@@ -21238,9 +21679,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", { "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: {
@@ -21253,13 +21694,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: {
@@ -21273,7 +21714,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],
@@ -21284,7 +21725,7 @@ ${cssRules}
               ) : null
             ) : (
               /* Standard Mode: Stacked cards — widgets always visible */
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "div",
                 {
                   style: {
@@ -21293,7 +21734,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,
@@ -21308,7 +21749,7 @@ ${cssRules}
             ) }),
             footerSlot
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "div",
             {
               onClick: toggle2,
@@ -21323,9 +21764,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",
@@ -21336,7 +21777,7 @@ ${cssRules}
               zIndex: zIndex + 47
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 NotificationToastStack,
                 {
                   notifications,
@@ -21345,7 +21786,7 @@ ${cssRules}
                   position: config.canvas.position ?? "right"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -21364,7 +21805,7 @@ ${cssRules}
                     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",
@@ -21389,7 +21830,7 @@ ${cssRules}
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
                       "svg",
                       {
                         width: "24",
@@ -21403,20 +21844,49 @@ ${cssRules}
                         "aria-hidden": "true",
                         focusable: "false",
                         style: { transition: "transform 200ms ease" },
-                        children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { 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_runtime11.jsxs)(import_jsx_runtime11.Fragment, { 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" })
-                        ] })
+                        children: [
+                          /* @__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_runtime12.jsx)(
+                      "img",
+                      {
+                        src: launcherIcon,
+                        alt: "",
+                        "aria-hidden": "true",
+                        style: {
+                          width: "60%",
+                          height: "60%",
+                          objectFit: "contain",
+                          pointerEvents: "none"
+                        }
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+                      "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__ */ (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",
@@ -21428,7 +21898,7 @@ ${cssRules}
                           }
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         "span",
                         {
                           className: "syntro-badge-glow",
@@ -21439,7 +21909,7 @@ ${cssRules}
                           }
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                         "span",
                         {
                           className: "syntro-badge-bounce",
@@ -21473,7 +21943,7 @@ ${cssRules}
   }
 
   // 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,
@@ -21482,17 +21952,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);
@@ -21529,24 +22011,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,
@@ -21569,7 +22063,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,
@@ -21594,7 +22088,7 @@ ${cssRules}
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       SmartCanvasAppInner,
       {
         controller,
@@ -21639,13 +22133,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);
@@ -21668,7 +22162,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,
@@ -21685,15 +22179,15 @@ ${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);
+    (0, import_react16.useEffect)(() => {
       if (!runtime7?.actions) return;
       if (adoptedInitialRef.current) {
         if (configState.actions.length > 0) {
@@ -21738,7 +22232,7 @@ ${cssRules}
         }
       };
     }, [runtime7, configState.actions, pageUrl]);
-    (0, import_react14.useEffect)(() => {
+    (0, import_react16.useEffect)(() => {
       if (!runtime7) return;
       return runtime7.events.subscribe(
         { names: ["canvas.requestOpen"] },
@@ -21750,13 +22244,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,
@@ -21765,6 +22259,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,
@@ -21779,7 +22274,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 {
@@ -21879,13 +22374,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 })
           }
         )
       );
@@ -22111,32 +22606,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: {
@@ -22150,7 +22645,7 @@ ${cssRules}
         },
         "data-shadow-canvas-id": "wheel",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               style: {
@@ -22159,10 +22654,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",
@@ -22259,18 +22754,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;
@@ -29366,11 +29850,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;
@@ -29555,7 +30039,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));
   }
@@ -30781,7 +31265,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) {
@@ -31623,8 +32107,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]];
           }
         }
@@ -35501,12 +35985,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);
@@ -35547,6 +36035,8 @@ ${cssRules}
   var TileZ = external_exports.object({
     id: external_exports.string(),
     title: external_exports.string().optional(),
+    subtitle: external_exports.string().optional(),
+    icon: external_exports.string().optional(),
     priority: external_exports.number().optional(),
     widget: external_exports.string(),
     props: external_exports.record(external_exports.unknown()).optional(),
@@ -35555,6 +36045,7 @@ ${cssRules}
   }).strict();
   var CanvasElementConfigZ = external_exports.object({
     position: external_exports.enum(["left", "right"]).optional(),
+    layout: external_exports.enum(["overlay", "push"]).optional(),
     background: external_exports.string().optional(),
     blur: external_exports.string().optional(),
     border: external_exports.string().optional(),
@@ -35565,7 +36056,8 @@ ${cssRules}
     backgroundHover: external_exports.string().optional(),
     color: external_exports.string().optional(),
     size: external_exports.string().optional(),
-    shadow: external_exports.string().optional()
+    shadow: external_exports.string().optional(),
+    borderRadius: external_exports.string().optional()
   });
   var TileElementConfigZ = external_exports.object({
     background: external_exports.string().optional(),
@@ -35576,11 +36068,17 @@ ${cssRules}
     titleColor: external_exports.string().optional(),
     textColor: external_exports.string().optional(),
     iconBackground: external_exports.string().optional(),
-    iconShadow: external_exports.string().optional()
+    iconShadow: external_exports.string().optional(),
+    headerPadding: external_exports.string().optional(),
+    bodyPadding: external_exports.string().optional(),
+    gap: external_exports.string().optional()
   });
   var OverlayElementConfigZ = external_exports.object({
     background: external_exports.string().optional(),
     textColor: external_exports.string().optional(),
+    titleColor: external_exports.string().optional(),
+    arrowColor: external_exports.string().optional(),
+    arrowSize: external_exports.string().optional(),
     border: external_exports.string().optional(),
     borderRadius: external_exports.string().optional(),
     scrimOpacity: external_exports.string().optional(),
@@ -35598,6 +36096,31 @@ ${cssRules}
     iconBackground: external_exports.string().optional(),
     progressGradient: external_exports.string().optional()
   });
+  var ContentElementConfigZ = external_exports.object({
+    background: external_exports.string().optional(),
+    backgroundHover: external_exports.string().optional(),
+    border: external_exports.string().optional(),
+    borderRadius: external_exports.string().optional(),
+    textColor: external_exports.string().optional(),
+    textSecondaryColor: external_exports.string().optional(),
+    // Accordion layout
+    itemDivider: external_exports.string().optional(),
+    itemGap: external_exports.string().optional(),
+    itemPadding: external_exports.string().optional(),
+    itemFontSize: external_exports.string().optional(),
+    // Expanded content
+    bodyPadding: external_exports.string().optional(),
+    bodyFontSize: external_exports.string().optional(),
+    // Category headers
+    categoryPadding: external_exports.string().optional(),
+    categoryGap: external_exports.string().optional(),
+    categoryFontSize: external_exports.string().optional(),
+    // Search
+    searchBackground: external_exports.string().optional(),
+    searchColor: external_exports.string().optional(),
+    // Chevron
+    chevronColor: external_exports.string().optional()
+  });
   var CanvasThemeConfigZ = external_exports.object({
     mode: external_exports.enum(["dark", "light"]).optional(),
     fontFamily: external_exports.string().optional(),
@@ -35608,11 +36131,13 @@ ${cssRules}
     launcher: LauncherElementConfigZ.optional(),
     tile: TileElementConfigZ.optional(),
     overlay: OverlayElementConfigZ.optional(),
-    notification: NotificationElementConfigZ.optional()
+    notification: NotificationElementConfigZ.optional(),
+    content: ContentElementConfigZ.optional()
   }).strict();
   var LauncherConfigZ = external_exports.object({
     enabled: external_exports.boolean().optional(),
     label: external_exports.string().optional(),
+    icon: external_exports.string().optional(),
     position: external_exports.string().optional(),
     animate: external_exports.boolean().optional(),
     animationStyle: external_exports.enum(["pulse", "bounce", "glow"]).optional(),
@@ -35631,9 +36156,8 @@ ${cssRules}
   }).strict();
 
   // src/actions/schema.ts
-  var ActionActivationZ = {
-    activation: ActivationConfigZ.optional(),
-    triggerWhen: DecisionStrategyZ.nullable().optional()
+  var ActionTriggerZ = {
+    triggerWhen: TriggerWhenZ
   };
   var AnchorIdZ2 = external_exports.object({
     selector: external_exports.string(),
@@ -35694,32 +36218,32 @@ ${cssRules}
     anchorId: AnchorIdZ2,
     text: external_exports.string(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var SetAttrZ = external_exports.object({
     kind: external_exports.literal("content:setAttr"),
     anchorId: AnchorIdZ2,
     attr: external_exports.string(),
     value: external_exports.string(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var AddClassZ = external_exports.object({
     kind: external_exports.literal("content:addClass"),
     anchorId: AnchorIdZ2,
     className: external_exports.string(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var RemoveClassZ = external_exports.object({
     kind: external_exports.literal("content:removeClass"),
     anchorId: AnchorIdZ2,
     className: external_exports.string(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var SetStyleZ = external_exports.object({
     kind: external_exports.literal("content:setStyle"),
     anchorId: AnchorIdZ2,
     styles: external_exports.record(external_exports.string()),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var InsertHtmlZ = external_exports.object({
     kind: external_exports.literal("content:insertHtml"),
     anchorId: AnchorIdZ2,
@@ -35727,27 +36251,27 @@ ${cssRules}
     position: InsertPositionZ,
     deepLink: NotificationDeepLinkZ.optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var HighlightZ = external_exports.object({
     kind: external_exports.literal("overlays:highlight"),
     anchorId: AnchorIdZ2,
     style: HighlightStyleZ.optional(),
     duration: external_exports.number().optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var PulseZ = external_exports.object({
     kind: external_exports.literal("overlays:pulse"),
     anchorId: AnchorIdZ2,
     duration: external_exports.number().optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var BadgeZ = external_exports.object({
     kind: external_exports.literal("overlays:badge"),
     anchorId: AnchorIdZ2,
     content: external_exports.string(),
     position: BadgePositionZ.optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var TooltipZ = external_exports.object({
     kind: external_exports.literal("overlays:tooltip"),
     anchorId: AnchorIdZ2,
@@ -35756,7 +36280,7 @@ ${cssRules}
     placement: PlacementZ.optional(),
     waitFor: external_exports.string().optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var ModalZ = external_exports.object({
     kind: external_exports.literal("overlays:modal"),
     content: ModalContentZ,
@@ -35773,7 +36297,7 @@ ${cssRules}
     ctaButtons: external_exports.array(CtaButtonZ).optional(),
     waitFor: external_exports.string().optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var ScrollToZ = external_exports.object({
     kind: external_exports.literal("navigation:scrollTo"),
     anchorId: AnchorIdZ2,
@@ -35781,36 +36305,36 @@ ${cssRules}
     block: ScrollLogicalPositionZ.optional(),
     inline: ScrollLogicalPositionZ.optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var NavigateZ = external_exports.object({
     kind: external_exports.literal("navigation:navigate"),
     url: external_exports.string(),
     target: external_exports.enum(["_self", "_blank"]).optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var MountWidgetZ = external_exports.object({
     kind: external_exports.literal("core:mountWidget"),
     slot: external_exports.string(),
     widget: WidgetConfigZ,
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var WaitZ = external_exports.object({
     kind: external_exports.literal("core:wait"),
     durationMs: external_exports.number().min(0).optional(),
     event: external_exports.string().optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var SequenceZ = external_exports.object({
     kind: external_exports.literal("core:sequence"),
     actions: external_exports.array(external_exports.any()),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var ParallelZ = external_exports.object({
     kind: external_exports.literal("core:parallel"),
     actions: external_exports.array(external_exports.any()),
     waitFor: external_exports.enum(["all", "any"]).optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).strict();
+  }).extend(ActionTriggerZ).strict();
   var TourZ = external_exports.object({
     kind: external_exports.literal("core:tour"),
     tourId: external_exports.string(),
@@ -35818,7 +36342,7 @@ ${cssRules}
     startStep: external_exports.string().optional(),
     autoStart: external_exports.boolean().optional(),
     label: external_exports.string().optional()
-  }).extend(ActionActivationZ).passthrough();
+  }).extend(ActionTriggerZ).passthrough();
   var coreActionStepSchemas = [
     { defName: "setText", schema: SetTextZ },
     { defName: "setAttr", schema: SetAttrZ },
@@ -36269,7 +36793,7 @@ ${cssRules}
       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);
       }
@@ -38048,14 +38572,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;
       },
@@ -38732,7 +39262,7 @@ ${cssRules}
   }
 
   // src/index.ts
-  var RUNTIME_SDK_BUILD = true ? `${"2026-03-03T18:45:20.063Z"} (${"2f42a46615"})` : "dev";
+  var RUNTIME_SDK_BUILD = true ? `${"2026-03-04T00:05:33.583Z"} (${"00e3189890"})` : "dev";
   if (typeof window !== "undefined") {
     console.log(`[Syntro Runtime] Build: ${RUNTIME_SDK_BUILD}`);
     const existing = window.SynOS;
@@ -38741,7 +39271,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);
@@ -38804,6 +39334,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