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

package/dist/smart-canvas.js

@@ -16808,24 +16808,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(${pr2}, ${pg}, ${pb}, 0.35);
+        }
+        25% {
+          box-shadow: 0 0 0 12px rgba(${pr2}, ${pg}, ${pb}, 0);
+        }
+        50% {
+          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(79, 70, 229, 0.4);
+          box-shadow: 0 0 0 0 rgba(${pr2}, ${pg}, ${pb}, 0.35);
         }
         50% {
-          box-shadow: 0 0 0 8px rgba(79, 70, 229, 0);
+          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 +16898,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 +16916,7 @@ var SyntrologieSDK = (() => {
       fontWeight: "600",
       lineHeight: "1",
       color: "white",
-      background: "var(--syntro-accent, #4f46e5)",
+      background: badgeColor,
       borderRadius: "9999px",
       pointerEvents: "none",
       zIndex: "2147483646",
@@ -18047,7 +18098,7 @@ var SyntrologieSDK = (() => {
       margin: "0 auto"
     },
     searchWrapper: {
-      marginBottom: "16px"
+      marginBottom: "8px"
     },
     searchInput: {
       width: "100%",
@@ -18060,22 +18111,22 @@ var SyntrologieSDK = (() => {
     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"
@@ -18085,8 +18136,8 @@ var SyntrologieSDK = (() => {
       transition: "transform 0.2s ease"
     },
     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 +18153,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,8 +18196,8 @@ var SyntrologieSDK = (() => {
   var themeStyles = {
     light: {
       container: {
-        backgroundColor: base.white,
-        color: slateGrey[1]
+        backgroundColor: "transparent",
+        color: "inherit"
       },
       searchInput: {
         backgroundColor: slateGrey[12],
@@ -18154,21 +18205,21 @@ var SyntrologieSDK = (() => {
         color: slateGrey[1]
       },
       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,8 +18237,8 @@ var SyntrologieSDK = (() => {
     },
     dark: {
       container: {
-        backgroundColor: slateGrey[1],
-        color: slateGrey[12]
+        backgroundColor: "transparent",
+        color: "inherit"
       },
       searchInput: {
         backgroundColor: slateGrey[3],
@@ -18195,21 +18246,21 @@ var SyntrologieSDK = (() => {
         color: slateGrey[12]
       },
       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],
@@ -18580,18 +18631,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 +18650,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 +18673,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 +18695,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 +18710,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 +18743,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 +18775,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 +18792,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 +18807,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 +18919,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 +19218,7 @@ var SyntrologieSDK = (() => {
   }
 
   // src/version.ts
-  var SDK_VERSION = "2.4.0-canary.22";
+  var SDK_VERSION = "2.4.0-canary.23";
 
   // src/types.ts
   var SDK_SCHEMA_VERSION = "2.0";
@@ -20244,7 +20296,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 +20755,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 +20778,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 +20805,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 +20835,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 +20858,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 +20885,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 +20919,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 +20940,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;
@@ -21049,6 +21166,7 @@ ${cssRules}
     onToggle,
     telemetry,
     launcherLabel: _launcherLabel = "Adaptives",
+    launcherIcon,
     launcherAnimate = false,
     launcherAnimationStyle: _launcherAnimationStyle = "pulse",
     notificationCount: _notificationCount,
@@ -21191,7 +21309,37 @@ ${cssRules}
     );
     const isFocused = displayMode === "focused";
     const isRight = config.canvas.position === "right";
+    const isPush = config.canvas.layout === "push";
+    const containerRef = (0, import_react12.useRef)(null);
     const zIndex = 2147483600;
+    (0, import_react12.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_react12.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",
@@ -21239,7 +21387,7 @@ ${cssRules}
           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: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: containerRef, "data-shadow-canvas-id": "overlay-container", style: containerStyle, children: [
             isFocused && canvasTitle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
               "p",
               {
@@ -21364,7 +21512,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 +21537,7 @@ ${cssRules}
                     }
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    isOpen ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                       "svg",
                       {
                         width: "24",
@@ -21403,16 +21551,45 @@ ${cssRules}
                         "aria-hidden": "true",
                         focusable: "false",
                         style: { transition: "transform 200ms ease" },
-                        children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                        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: [
+                        ]
+                      }
+                    ) : launcherIcon ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      "img",
+                      {
+                        src: launcherIcon,
+                        alt: "",
+                        "aria-hidden": "true",
+                        style: {
+                          width: "60%",
+                          height: "60%",
+                          objectFit: "contain",
+                          pointerEvents: "none"
+                        }
+                      }
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime11.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_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" })
-                        ] })
+                        ]
                       }
                     ),
                     !isOpen && notifications.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { style: { position: "absolute", top: -2, right: -2, pointerEvents: "none" }, children: [
@@ -35547,6 +35724,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 +35734,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 +35745,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 +35757,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 +35785,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 +35820,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,8 +35845,7 @@ ${cssRules}
   }).strict();
 
   // src/actions/schema.ts
-  var ActionActivationZ = {
-    activation: ActivationConfigZ.optional(),
+  var ActionTriggerZ = {
     triggerWhen: DecisionStrategyZ.nullable().optional()
   };
   var AnchorIdZ2 = external_exports.object({
@@ -35694,32 +35907,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 +35940,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 +35969,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 +35986,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 +35994,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 +36031,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 +36482,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);
       }
@@ -38732,7 +38945,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-03T23:31:20.312Z"} (${"19510df2c8"})` : "dev";
   if (typeof window !== "undefined") {
     console.log(`[Syntro Runtime] Build: ${RUNTIME_SDK_BUILD}`);
     const existing = window.SynOS;