@syntrologie/runtime-sdk 2.1.0-canary.6 → 2.1.0-canary.8

package/dist/smart-canvas.js

@@ -24640,7 +24640,7 @@ var SyntrologieSDK = (() => {
   });
 
   // src/version.ts
-  var SDK_VERSION = "2.1.0-canary.6";
+  var SDK_VERSION = "2.1.0-canary.8";
 
   // src/types.ts
   var SDK_SCHEMA_VERSION = "2.0";
@@ -29293,7 +29293,7 @@ var SyntrologieSDK = (() => {
       this.captureCallback = options.onCapture;
       if (!this.client && typeof window !== "undefined" && options.apiKey) {
         const enableFeatureFlags = options.enableFeatureFlags ?? true;
-        const instanceName = "syntro_" + (options.apiKey.slice(-6) || "sdk");
+        const instanceName = `syntro_${options.apiKey.slice(-6) || "sdk"}`;
         this.client = Uo.init(
           options.apiKey,
           {
@@ -32389,7 +32389,7 @@ var SyntrologieSDK = (() => {
       return this.gb.getFeatureValue(key, fallback);
     }
     shouldRenderRectangle(tile) {
-      const experiment = tile.experiment;
+      const { experiment } = tile;
       if (!experiment) return true;
       if (!experiment.featureKey) return true;
       const value = this.gb.getFeatureValue(experiment.featureKey, null);
@@ -32524,236 +32524,15 @@ var SyntrologieSDK = (() => {
   // src/components/TileCard.tsx
   var import_react6 = __toESM(require_react(), 1);
 
-  // src/blocks/notification/NotificationBlock.tsx
+  // src/blocks/data/StatsBlock.tsx
   var import_react2 = __toESM(require_react(), 1);
   var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
-  var Icons = {
-    success: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "path",
-        {
-          d: "M6 10l2.5 2.5L14 7",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinecap: "round",
-          strokeLinejoin: "round"
-        }
-      )
-    ] }),
-    warning: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "path",
-        {
-          d: "M10 2L18 17H2L10 2Z",
-          stroke: "currentColor",
-          strokeWidth: "1.5",
-          strokeLinejoin: "round"
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 8v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "14", r: "0.75", fill: "currentColor" })
-    ] }),
-    error: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M7 7l6 6M13 7l-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
-    ] }),
-    info: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 9v5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "6", r: "0.75", fill: "currentColor" })
-    ] }),
-    alert: () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10 5v6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "10", cy: "14", r: "0.75", fill: "currentColor" })
-    ] })
-  };
-  function DismissButton({ onClick, color }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "button",
-      {
-        onClick: (e2) => {
-          e2.stopPropagation();
-          onClick();
-        },
-        style: {
-          position: "absolute",
-          top: "8px",
-          right: "8px",
-          width: "20px",
-          height: "20px",
-          padding: 0,
-          border: "none",
-          background: "rgba(255, 255, 255, 0.1)",
-          borderRadius: "50%",
-          cursor: "pointer",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          color,
-          opacity: 0.6,
-          transition: "opacity 0.15s ease"
-        },
-        onMouseEnter: (e2) => {
-          e2.currentTarget.style.opacity = "1";
-        },
-        onMouseLeave: (e2) => {
-          e2.currentTarget.style.opacity = "0.6";
-        },
-        "aria-label": "Dismiss",
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
-      }
-    );
-  }
-  function getSemanticColors(type) {
-    const colors = {
-      success: {
-        bg: "var(--sc-color-success-muted, rgba(52, 199, 89, 0.15))",
-        border: "var(--sc-color-success, #34c759)",
-        icon: "var(--sc-color-success, #34c759)",
-        text: "var(--sc-color-text, #f5f5f7)"
-      },
-      warning: {
-        bg: "var(--sc-color-warning-muted, rgba(255, 159, 10, 0.15))",
-        border: "var(--sc-color-warning, #ff9f0a)",
-        icon: "var(--sc-color-warning, #ff9f0a)",
-        text: "var(--sc-color-text, #f5f5f7)"
-      },
-      error: {
-        bg: "var(--sc-color-error-muted, rgba(255, 69, 58, 0.15))",
-        border: "var(--sc-color-error, #ff453a)",
-        icon: "var(--sc-color-error, #ff453a)",
-        text: "var(--sc-color-text, #f5f5f7)"
-      },
-      info: {
-        bg: "var(--sc-color-info-muted, rgba(10, 132, 255, 0.15))",
-        border: "var(--sc-color-info, #0a84ff)",
-        icon: "var(--sc-color-info, #0a84ff)",
-        text: "var(--sc-color-text, #f5f5f7)"
-      },
-      alert: {
-        bg: "var(--sc-color-primary-muted, rgba(99, 102, 241, 0.15))",
-        border: "var(--sc-color-primary, #6366f1)",
-        icon: "var(--sc-color-primary, #6366f1)",
-        text: "var(--sc-color-text, #f5f5f7)"
-      }
-    };
-    return colors[type] || colors.info;
-  }
-  function NotificationBlock({
-    content,
-    onDismiss,
-    accentColor: _accentColor
-  }) {
-    const [isDismissed, setIsDismissed] = (0, import_react2.useState)(false);
-    const [countdown, setCountdown] = (0, import_react2.useState)(
-      content.type === "warning" ? content.countdown ?? null : null
-    );
-    (0, import_react2.useEffect)(() => {
-      if (countdown === null || countdown <= 0) return;
-      const timer = setInterval(() => {
-        setCountdown((prev) => prev !== null && prev > 0 ? prev - 1 : null);
-      }, 1e3);
-      return () => clearInterval(timer);
-    }, [countdown]);
-    const handleDismiss = () => {
-      setIsDismissed(true);
-      setTimeout(() => onDismiss?.(), 200);
-    };
-    const colors = getSemanticColors(content.type);
-    const Icon = Icons[content.type];
-    const containerStyle = {
-      position: "relative",
-      padding: "var(--sc-spacing-md, 0.75rem)",
-      borderRadius: "var(--sc-border-radius-md, 10px)",
-      background: colors.bg,
-      borderLeft: `3px solid ${colors.border}`,
-      opacity: isDismissed ? 0 : 1,
-      transform: isDismissed ? "translateX(10px)" : "translateX(0)",
-      transition: "opacity 0.2s ease, transform 0.2s ease"
-    };
-    const headerStyle = {
-      display: "flex",
-      alignItems: "flex-start",
-      gap: "var(--sc-spacing-sm, 0.5rem)"
-    };
-    const iconStyle = {
-      color: colors.icon,
-      flexShrink: 0,
-      marginTop: "1px"
-    };
-    const contentStyle = {
-      flex: 1,
-      minWidth: 0,
-      paddingRight: content.dismissible ? "24px" : 0
-    };
-    const titleStyle = {
-      fontSize: "var(--sc-font-size-md, 0.9rem)",
-      fontWeight: "var(--sc-font-weight-semibold, 600)",
-      color: colors.text,
-      margin: 0,
-      lineHeight: "var(--sc-line-height-tight, 1.25)"
-    };
-    const bodyStyle = {
-      fontSize: "var(--sc-font-size-sm, 0.8rem)",
-      color: "var(--sc-color-text-secondary, #a1a1a6)",
-      margin: "var(--sc-spacing-xs, 0.25rem) 0 0",
-      lineHeight: "var(--sc-line-height-normal, 1.5)"
-    };
-    const timestampStyle = {
-      fontSize: "var(--sc-font-size-xs, 0.7rem)",
-      color: "var(--sc-color-text-muted, #8e8e93)",
-      marginTop: "var(--sc-spacing-sm, 0.5rem)"
-    };
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: containerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: headerStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: contentStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h4", { style: titleStyle, children: content.title }),
-          content.body && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: bodyStyle, children: content.body }),
-          content.type === "error" && content.errorCode && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { ...bodyStyle, fontFamily: "var(--sc-font-family-mono, monospace)" }, children: [
-            "Code: ",
-            content.errorCode
-          ] }),
-          content.type === "info" && content.learnMoreUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "a",
-            {
-              href: content.learnMoreUrl,
-              target: "_blank",
-              rel: "noopener noreferrer",
-              style: {
-                display: "inline-block",
-                marginTop: "var(--sc-spacing-sm, 0.5rem)",
-                fontSize: "var(--sc-font-size-sm, 0.8rem)",
-                color: colors.icon,
-                textDecoration: "none"
-              },
-              onClick: (e2) => e2.stopPropagation(),
-              children: "Learn more \u2192"
-            }
-          ),
-          countdown !== null && countdown > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { ...bodyStyle, color: colors.icon }, children: [
-            "Action required in ",
-            countdown,
-            "s"
-          ] }),
-          content.timestamp && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: timestampStyle, children: content.timestamp })
-        ] })
-      ] }),
-      content.dismissible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DismissButton, { onClick: handleDismiss, color: colors.text })
-    ] });
-  }
-
-  // src/blocks/data/StatsBlock.tsx
-  var import_react3 = __toESM(require_react(), 1);
-  var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
   function TrendBadge({ trend }) {
     const isPositive = trend.direction === "up";
     const isNegative = trend.direction === "down";
     const color = isPositive ? "var(--sc-color-success, #34c759)" : isNegative ? "var(--sc-color-error, #ff453a)" : "var(--sc-color-text-muted, #8e8e93)";
     const bgColor = isPositive ? "var(--sc-color-success-muted, rgba(52, 199, 89, 0.15))" : isNegative ? "var(--sc-color-error-muted, rgba(255, 69, 58, 0.15))" : "rgba(142, 142, 147, 0.15)";
-    const ArrowIcon = () => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    const ArrowIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "svg",
       {
         width: "10",
@@ -32763,7 +32542,7 @@ var SyntrologieSDK = (() => {
         style: {
           transform: isPositive ? "rotate(0deg)" : isNegative ? "rotate(180deg)" : "rotate(90deg)"
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "path",
           {
             d: "M5 1v8M5 1L2 4M5 1l3 3",
@@ -32775,7 +32554,7 @@ var SyntrologieSDK = (() => {
         )
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "span",
       {
         style: {
@@ -32790,15 +32569,15 @@ var SyntrologieSDK = (() => {
           fontWeight: "var(--sc-font-weight-medium, 500)"
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrowIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowIcon, {}),
           trend.value,
-          trend.timeframe && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: { color: "var(--sc-color-text-muted, #8e8e93)" }, children: trend.timeframe })
+          trend.timeframe && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "var(--sc-color-text-muted, #8e8e93)" }, children: trend.timeframe })
         ]
       }
     );
   }
   function Sparkline({ data, color }) {
-    const { path, width, height } = (0, import_react3.useMemo)(() => {
+    const { path, width, height } = (0, import_react2.useMemo)(() => {
       const w2 = 60;
       const h2 = 24;
       const padding = 2;
@@ -32813,13 +32592,14 @@ var SyntrologieSDK = (() => {
         const y2 = h2 - padding - (value - min2) / range * (h2 - padding * 2);
         return { x: x2, y: y2 };
       });
-      const pathData = points.reduce((acc, point, i2) => {
-        return acc + (i2 === 0 ? `M ${point.x} ${point.y}` : ` L ${point.x} ${point.y}`);
-      }, "");
+      const pathData = points.reduce(
+        (acc, point, i2) => acc + (i2 === 0 ? `M ${point.x} ${point.y}` : ` L ${point.x} ${point.y}`),
+        ""
+      );
       return { path: pathData, width: w2, height: h2 };
     }, [data]);
     if (!path) return null;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "svg",
       {
         width,
@@ -32827,7 +32607,7 @@ var SyntrologieSDK = (() => {
         viewBox: `0 0 ${width} ${height}`,
         style: { overflow: "visible" },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "path",
             {
               d: path,
@@ -32838,11 +32618,11 @@ var SyntrologieSDK = (() => {
               fill: "none"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("linearGradient", { id: "sparkline-gradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: "0.3" }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", { id: "sparkline-gradient", x1: "0", x2: "0", y1: "0", y2: "1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "0%", stopColor: color, stopOpacity: "0.3" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", { offset: "100%", stopColor: color, stopOpacity: "0" })
           ] }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "path",
             {
               d: `${path} L ${width - 2} ${height} L 2 ${height} Z`,
@@ -32889,22 +32669,22 @@ var SyntrologieSDK = (() => {
       justifyContent: "space-between",
       marginTop: "var(--sc-spacing-xs, 0.25rem)"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: containerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: valueContainerStyle, children: [
-        content.prefix && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: unitStyle, children: content.prefix }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: valueStyle, children: content.value }),
-        content.suffix && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: unitStyle, children: content.suffix })
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: containerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: valueContainerStyle, children: [
+        content.prefix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: unitStyle, children: content.prefix }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: valueStyle, children: content.value }),
+        content.suffix && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: unitStyle, children: content.suffix })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: labelStyle, children: content.label }),
-      (content.trend || content.sparkline) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: bottomRowStyle, children: [
-        content.trend && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(TrendBadge, { trend: content.trend }),
-        content.sparkline && content.sparkline.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Sparkline, { data: content.sparkline, color: primaryColor })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: labelStyle, children: content.label }),
+      (content.trend || content.sparkline) && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: bottomRowStyle, children: [
+        content.trend && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrendBadge, { trend: content.trend }),
+        content.sparkline && content.sparkline.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Sparkline, { data: content.sparkline, color: primaryColor })
       ] })
     ] });
   }
 
   // src/blocks/data/ComparisonBlock.tsx
-  var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime2 = __toESM(require_jsx_runtime(), 1);
   function ComparisonItemCard({
     item,
     accentColor,
@@ -32936,10 +32716,10 @@ var SyntrologieSDK = (() => {
       fontWeight: "var(--sc-font-weight-semibold, 600)",
       color: isHighlighted ? accentColor : "var(--sc-color-text, #f5f5f7)"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: cardStyle, children: [
-      item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: iconStyle, children: item.icon }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: labelStyle, children: item.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: valueStyle, children: item.value })
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: cardStyle, children: [
+      item.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: iconStyle, children: item.icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: labelStyle, children: item.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { style: valueStyle, children: item.value })
     ] });
   }
   function ComparisonBlock({ content, accentColor }) {
@@ -32966,7 +32746,7 @@ var SyntrologieSDK = (() => {
       padding: "var(--sc-spacing-sm, 0.5rem) 0"
     };
     if (layout === "table") {
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         "table",
         {
           style: {
@@ -32974,14 +32754,14 @@ var SyntrologieSDK = (() => {
             borderCollapse: "collapse",
             fontSize: "var(--sc-font-size-sm, 0.8rem)"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("tbody", { children: processedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("tbody", { children: processedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
             "tr",
             {
               style: {
                 borderBottom: idx < processedItems.length - 1 ? "1px solid var(--sc-color-border-subtle, rgba(255, 255, 255, 0.06))" : void 0
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
                   "td",
                   {
                     style: {
@@ -32992,12 +32772,12 @@ var SyntrologieSDK = (() => {
                       gap: "var(--sc-spacing-sm, 0.5rem)"
                     },
                     children: [
-                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { children: item.icon }),
+                      item.icon && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: item.icon }),
                       item.label
                     ]
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                   "td",
                   {
                     style: {
@@ -33016,23 +32796,23 @@ var SyntrologieSDK = (() => {
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: containerStyle, children: processedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComparisonItemCard, { item, accentColor: primaryColor, layout }, idx)) });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: containerStyle, children: processedItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ComparisonItemCard, { item, accentColor: primaryColor, layout }, idx)) });
   }
 
   // src/blocks/interactive/RatingBlock.tsx
-  var import_react4 = __toESM(require_react(), 1);
-  var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
+  var import_react3 = __toESM(require_react(), 1);
+  var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
   function StarRating({
     value,
     maxValue,
     onChange,
     color
   }) {
-    const [hovered, setHovered] = (0, import_react4.useState)(null);
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: "4px" }, children: Array.from({ length: maxValue }, (_2, i2) => {
+    const [hovered, setHovered] = (0, import_react3.useState)(null);
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: "4px" }, children: Array.from({ length: maxValue }, (_2, i2) => {
       const starValue = i2 + 1;
       const isFilled = (hovered ?? value ?? 0) >= starValue;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
           onClick: () => onChange(starValue),
@@ -33050,14 +32830,14 @@ var SyntrologieSDK = (() => {
             transform: hovered === starValue ? "scale(1.15)" : "scale(1)"
           },
           "aria-label": `Rate ${starValue} out of ${maxValue}`,
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "svg",
             {
               width: "28",
               height: "28",
               viewBox: "0 0 24 24",
               fill: isFilled ? "currentColor" : "none",
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 "path",
                 {
                   d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z",
@@ -33089,8 +32869,8 @@ var SyntrologieSDK = (() => {
       color: isSelected ? "white" : "var(--sc-color-text-muted, #8e8e93)",
       transition: "all 0.15s ease"
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => onChange(1), style: buttonStyle(value === 1), "aria-label": "Thumbs up", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", gap: "12px" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => onChange(1), style: buttonStyle(value === 1), "aria-label": "Thumbs up", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "path",
         {
           d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3",
@@ -33101,7 +32881,7 @@ var SyntrologieSDK = (() => {
           fill: value === 1 ? "currentColor" : "none"
         }
       ) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { onClick: () => onChange(0), style: buttonStyle(value === 0), "aria-label": "Thumbs down", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { onClick: () => onChange(0), style: buttonStyle(value === 0), "aria-label": "Thumbs down", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "svg",
         {
           width: "32",
@@ -33109,7 +32889,7 @@ var SyntrologieSDK = (() => {
           viewBox: "0 0 24 24",
           fill: "none",
           style: { transform: "rotate(180deg)" },
-          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
             "path",
             {
               d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3H14zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3",
@@ -33130,10 +32910,10 @@ var SyntrologieSDK = (() => {
     onChange,
     color
   }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sc-spacing-sm, 0.5rem)" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: "4px", justifyContent: "center" }, children: Array.from({ length: maxValue + 1 }, (_2, i2) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sc-spacing-sm, 0.5rem)" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: "4px", justifyContent: "center" }, children: Array.from({ length: maxValue + 1 }, (_2, i2) => {
         const isSelected = value === i2;
-        return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "button",
           {
             onClick: () => onChange(i2),
@@ -33156,8 +32936,8 @@ var SyntrologieSDK = (() => {
           i2
         );
       }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", padding: "0 2px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { display: "flex", justifyContent: "space-between", padding: "0 2px" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "span",
           {
             style: {
@@ -33167,7 +32947,7 @@ var SyntrologieSDK = (() => {
             children: "Not likely"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           "span",
           {
             style: {
@@ -33186,9 +32966,9 @@ var SyntrologieSDK = (() => {
     color
   }) {
     const emojis = ["\u{1F622}", "\u{1F615}", "\u{1F610}", "\u{1F642}", "\u{1F604}"];
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: { display: "flex", gap: "8px", justifyContent: "center" }, children: emojis.map((emoji, i2) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "flex", gap: "8px", justifyContent: "center" }, children: emojis.map((emoji, i2) => {
       const isSelected = value === i2;
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
           onClick: () => onChange(i2),
@@ -33212,8 +32992,8 @@ var SyntrologieSDK = (() => {
     }) });
   }
   function RatingBlock({ content, onSubmit, accentColor }) {
-    const [value, setValue2] = (0, import_react4.useState)(null);
-    const [submitted, setSubmitted] = (0, import_react4.useState)(false);
+    const [value, setValue2] = (0, import_react3.useState)(null);
+    const [submitted, setSubmitted] = (0, import_react3.useState)(false);
     const primaryColor = accentColor || "var(--sc-color-primary, #6366f1)";
     const maxValue = content.maxValue ?? (content.variant === "nps" ? 10 : 5);
     const handleChange = (v2) => {
@@ -33239,14 +33019,14 @@ var SyntrologieSDK = (() => {
       margin: 0
     };
     if (submitted) {
-      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: { ...containerStyle, padding: "var(--sc-spacing-lg, 1rem)" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { fontSize: "2rem" }, children: "\u2713" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: { ...questionStyle, color: "var(--sc-color-success, #34c759)" }, children: "Thanks for your feedback!" })
+      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: { ...containerStyle, padding: "var(--sc-spacing-lg, 1rem)" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { fontSize: "2rem" }, children: "\u2713" }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: { ...questionStyle, color: "var(--sc-color-success, #34c759)" }, children: "Thanks for your feedback!" })
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: containerStyle, children: [
-      content.question && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: questionStyle, children: content.question }),
-      content.variant === "stars" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: containerStyle, children: [
+      content.question && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { style: questionStyle, children: content.question }),
+      content.variant === "stars" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         StarRating,
         {
           value,
@@ -33255,10 +33035,10 @@ var SyntrologieSDK = (() => {
           color: primaryColor
         }
       ),
-      content.variant === "thumbs" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ThumbsRating, { value, onChange: handleChange, color: primaryColor }),
-      content.variant === "nps" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NpsRating, { value, maxValue, onChange: handleChange, color: primaryColor }),
-      content.variant === "emoji" && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(EmojiRating, { value, onChange: handleChange, color: primaryColor }),
-      value !== null && content.submitActionId && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      content.variant === "thumbs" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ThumbsRating, { value, onChange: handleChange, color: primaryColor }),
+      content.variant === "nps" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(NpsRating, { value, maxValue, onChange: handleChange, color: primaryColor }),
+      content.variant === "emoji" && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EmojiRating, { value, onChange: handleChange, color: primaryColor }),
+      value !== null && content.submitActionId && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "button",
         {
           onClick: handleSubmit,
@@ -33281,7 +33061,7 @@ var SyntrologieSDK = (() => {
   }
 
   // src/blocks/interactive/ChecklistBlock.tsx
-  var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+  var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
   function ChecklistBlock({ content, accentColor }) {
     const primaryColor = accentColor || "var(--sc-color-primary, #6366f1)";
     const completedCount = content.items.filter((item) => item.completed).length;
@@ -33374,17 +33154,17 @@ var SyntrologieSDK = (() => {
         window.location.href = href;
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: containerStyle, children: [
-      content.showProgress !== false && totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: progressStyle, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: containerStyle, children: [
+      content.showProgress !== false && totalCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: progressStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { children: [
           completedCount,
           " of ",
           totalCount
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: progressBarContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: progressBarStyle }) })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: progressBarContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: progressBarStyle }) })
       ] }),
-      content.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: itemStyle(item.completed ?? false), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: checkboxStyle(item.completed ?? false), children: item.completed && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      content.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: itemStyle(item.completed ?? false), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { style: checkboxStyle(item.completed ?? false), children: item.completed && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           "path",
           {
             d: "M20 6L9 17l-5-5",
@@ -33394,11 +33174,11 @@ var SyntrologieSDK = (() => {
             strokeLinejoin: "round"
           }
         ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: textContainerStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: titleStyle(item.completed ?? false), children: item.title }),
-          item.description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: descriptionStyle, children: item.description })
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: textContainerStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: titleStyle(item.completed ?? false), children: item.title }),
+          item.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { style: descriptionStyle, children: item.description })
         ] }),
-        item.href && !item.completed && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        item.href && !item.completed && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           "button",
           {
             style: linkButtonStyle,
@@ -33414,7 +33194,7 @@ var SyntrologieSDK = (() => {
             },
             children: [
               item.linkLabel || "Go",
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "path",
                 {
                   d: "M5 12h14M12 5l7 7-7 7",
@@ -33431,46 +33211,267 @@ var SyntrologieSDK = (() => {
     ] });
   }
 
-  // src/blocks/index.tsx
-  var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
-  function isNotificationContent(content) {
-    return ["alert", "success", "warning", "info", "error"].includes(content.type);
-  }
-  function isStatsContent(content) {
-    return content.type === "stats";
-  }
-  function isComparisonContent(content) {
-    return content.type === "comparison";
-  }
-  function isRatingContent(content) {
-    return content.type === "rating";
-  }
-  function isChecklistContent(content) {
-    return content.type === "checklist";
-  }
-  function renderBlock(content, options = {}) {
-    if (isNotificationContent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        NotificationBlock,
+  // src/blocks/notification/NotificationBlock.tsx
+  var import_react4 = __toESM(require_react(), 1);
+  var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+  var Icons = {
+    success: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
         {
-          content,
-          accentColor: options.accentColor,
-          onDismiss: options.onDismiss
+          d: "M6 10l2.5 2.5L14 7",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
         }
-      );
-    }
-    if (isStatsContent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatsBlock, { content, accentColor: options.accentColor });
-    }
-    if (isComparisonContent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComparisonBlock, { content, accentColor: options.accentColor });
-    }
-    if (isRatingContent(content)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-        RatingBlock,
+      )
+    ] }),
+    warning: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
         {
-          content,
-          accentColor: options.accentColor,
+          d: "M10 2L18 17H2L10 2Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 8v4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "10", cy: "14", r: "0.75", fill: "currentColor" })
+    ] }),
+    error: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M7 7l6 6M13 7l-6 6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    ] }),
+    info: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 9v5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "10", cy: "6", r: "0.75", fill: "currentColor" })
+    ] }),
+    alert: () => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "10", cy: "10", r: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M10 5v6", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", { cx: "10", cy: "14", r: "0.75", fill: "currentColor" })
+    ] })
+  };
+  function DismissButton({ onClick, color }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        onClick: (e2) => {
+          e2.stopPropagation();
+          onClick();
+        },
+        style: {
+          position: "absolute",
+          top: "8px",
+          right: "8px",
+          width: "20px",
+          height: "20px",
+          padding: 0,
+          border: "none",
+          background: "rgba(255, 255, 255, 0.1)",
+          borderRadius: "50%",
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color,
+          opacity: 0.6,
+          transition: "opacity 0.15s ease"
+        },
+        onMouseEnter: (e2) => {
+          e2.currentTarget.style.opacity = "1";
+        },
+        onMouseLeave: (e2) => {
+          e2.currentTarget.style.opacity = "0.6";
+        },
+        "aria-label": "Dismiss",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M1 1l8 8M9 1l-8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+      }
+    );
+  }
+  function getSemanticColors(type) {
+    const colors = {
+      success: {
+        bg: "var(--sc-color-success-muted, rgba(52, 199, 89, 0.15))",
+        border: "var(--sc-color-success, #34c759)",
+        icon: "var(--sc-color-success, #34c759)",
+        text: "var(--sc-color-text, #f5f5f7)"
+      },
+      warning: {
+        bg: "var(--sc-color-warning-muted, rgba(255, 159, 10, 0.15))",
+        border: "var(--sc-color-warning, #ff9f0a)",
+        icon: "var(--sc-color-warning, #ff9f0a)",
+        text: "var(--sc-color-text, #f5f5f7)"
+      },
+      error: {
+        bg: "var(--sc-color-error-muted, rgba(255, 69, 58, 0.15))",
+        border: "var(--sc-color-error, #ff453a)",
+        icon: "var(--sc-color-error, #ff453a)",
+        text: "var(--sc-color-text, #f5f5f7)"
+      },
+      info: {
+        bg: "var(--sc-color-info-muted, rgba(10, 132, 255, 0.15))",
+        border: "var(--sc-color-info, #0a84ff)",
+        icon: "var(--sc-color-info, #0a84ff)",
+        text: "var(--sc-color-text, #f5f5f7)"
+      },
+      alert: {
+        bg: "var(--sc-color-primary-muted, rgba(99, 102, 241, 0.15))",
+        border: "var(--sc-color-primary, #6366f1)",
+        icon: "var(--sc-color-primary, #6366f1)",
+        text: "var(--sc-color-text, #f5f5f7)"
+      }
+    };
+    return colors[type] || colors.info;
+  }
+  function NotificationBlock({
+    content,
+    onDismiss,
+    accentColor: _accentColor
+  }) {
+    const [isDismissed, setIsDismissed] = (0, import_react4.useState)(false);
+    const [countdown, setCountdown] = (0, import_react4.useState)(
+      content.type === "warning" ? content.countdown ?? null : null
+    );
+    (0, import_react4.useEffect)(() => {
+      if (countdown === null || countdown <= 0) return;
+      const timer = setInterval(() => {
+        setCountdown((prev) => prev !== null && prev > 0 ? prev - 1 : null);
+      }, 1e3);
+      return () => clearInterval(timer);
+    }, [countdown]);
+    const handleDismiss = () => {
+      setIsDismissed(true);
+      setTimeout(() => onDismiss?.(), 200);
+    };
+    const colors = getSemanticColors(content.type);
+    const Icon = Icons[content.type];
+    const containerStyle = {
+      position: "relative",
+      padding: "var(--sc-spacing-md, 0.75rem)",
+      borderRadius: "var(--sc-border-radius-md, 10px)",
+      background: colors.bg,
+      borderLeft: `3px solid ${colors.border}`,
+      opacity: isDismissed ? 0 : 1,
+      transform: isDismissed ? "translateX(10px)" : "translateX(0)",
+      transition: "opacity 0.2s ease, transform 0.2s ease"
+    };
+    const headerStyle = {
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "var(--sc-spacing-sm, 0.5rem)"
+    };
+    const iconStyle = {
+      color: colors.icon,
+      flexShrink: 0,
+      marginTop: "1px"
+    };
+    const contentStyle = {
+      flex: 1,
+      minWidth: 0,
+      paddingRight: content.dismissible ? "24px" : 0
+    };
+    const titleStyle = {
+      fontSize: "var(--sc-font-size-md, 0.9rem)",
+      fontWeight: "var(--sc-font-weight-semibold, 600)",
+      color: colors.text,
+      margin: 0,
+      lineHeight: "var(--sc-line-height-tight, 1.25)"
+    };
+    const bodyStyle = {
+      fontSize: "var(--sc-font-size-sm, 0.8rem)",
+      color: "var(--sc-color-text-secondary, #a1a1a6)",
+      margin: "var(--sc-spacing-xs, 0.25rem) 0 0",
+      lineHeight: "var(--sc-line-height-normal, 1.5)"
+    };
+    const timestampStyle = {
+      fontSize: "var(--sc-font-size-xs, 0.7rem)",
+      color: "var(--sc-color-text-muted, #8e8e93)",
+      marginTop: "var(--sc-spacing-sm, 0.5rem)"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: containerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: headerStyle, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { style: iconStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: contentStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("h4", { style: titleStyle, children: content.title }),
+          content.body && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: bodyStyle, children: content.body }),
+          content.type === "error" && content.errorCode && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { style: { ...bodyStyle, fontFamily: "var(--sc-font-family-mono, monospace)" }, children: [
+            "Code: ",
+            content.errorCode
+          ] }),
+          content.type === "info" && content.learnMoreUrl && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "a",
+            {
+              href: content.learnMoreUrl,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: {
+                display: "inline-block",
+                marginTop: "var(--sc-spacing-sm, 0.5rem)",
+                fontSize: "var(--sc-font-size-sm, 0.8rem)",
+                color: colors.icon,
+                textDecoration: "none"
+              },
+              onClick: (e2) => e2.stopPropagation(),
+              children: "Learn more \u2192"
+            }
+          ),
+          countdown !== null && countdown > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { style: { ...bodyStyle, color: colors.icon }, children: [
+            "Action required in ",
+            countdown,
+            "s"
+          ] }),
+          content.timestamp && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { style: timestampStyle, children: content.timestamp })
+        ] })
+      ] }),
+      content.dismissible && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DismissButton, { onClick: handleDismiss, color: colors.text })
+    ] });
+  }
+
+  // src/blocks/index.tsx
+  var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
+  function isNotificationContent(content) {
+    return ["alert", "success", "warning", "info", "error"].includes(content.type);
+  }
+  function isStatsContent(content) {
+    return content.type === "stats";
+  }
+  function isComparisonContent(content) {
+    return content.type === "comparison";
+  }
+  function isRatingContent(content) {
+    return content.type === "rating";
+  }
+  function isChecklistContent(content) {
+    return content.type === "checklist";
+  }
+  function renderBlock(content, options = {}) {
+    if (isNotificationContent(content)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        NotificationBlock,
+        {
+          content,
+          accentColor: options.accentColor,
+          onDismiss: options.onDismiss
+        }
+      );
+    }
+    if (isStatsContent(content)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StatsBlock, { content, accentColor: options.accentColor });
+    }
+    if (isComparisonContent(content)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ComparisonBlock, { content, accentColor: options.accentColor });
+    }
+    if (isRatingContent(content)) {
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        RatingBlock,
+        {
+          content,
+          accentColor: options.accentColor,
           onSubmit: options.onRatingSubmit
         }
       );
@@ -33507,85 +33508,6 @@ var SyntrologieSDK = (() => {
     return newBlockTypes.includes(type);
   }
 
-  // src/RuntimeProvider.tsx
-  var import_react5 = __toESM(require_react(), 1);
-  var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
-  var RuntimeReactContext = (0, import_react5.createContext)({
-    runtime: null,
-    context: null
-  });
-  function RuntimeProvider({ runtime: runtime3, children }) {
-    const [context, setContext] = (0, import_react5.useState)(
-      runtime3 ? runtime3.context.get() : null
-    );
-    (0, import_react5.useEffect)(() => {
-      if (!runtime3) return;
-      setContext(runtime3.context.get());
-      const unsubscribe2 = runtime3.context.subscribe((ctx) => {
-        setContext(ctx);
-      });
-      return unsubscribe2;
-    }, [runtime3]);
-    const value = (0, import_react5.useMemo)(() => ({ runtime: runtime3, context }), [runtime3, context]);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RuntimeReactContext.Provider, { value, children });
-  }
-  function useRuntime() {
-    const { runtime: runtime3 } = (0, import_react5.useContext)(RuntimeReactContext);
-    return runtime3;
-  }
-  function useRuntimeContext() {
-    const { context } = (0, import_react5.useContext)(RuntimeReactContext);
-    return context;
-  }
-  function usePageContext() {
-    const context = useRuntimeContext();
-    return context?.page ?? null;
-  }
-  function useSessionContext() {
-    const context = useRuntimeContext();
-    return context?.session ?? null;
-  }
-  function useViewportContext() {
-    const context = useRuntimeContext();
-    return context?.viewport ?? null;
-  }
-  function useRuntimeEvents(filter, callback, deps = []) {
-    const runtime3 = useRuntime();
-    (0, import_react5.useEffect)(() => {
-      if (!runtime3) return;
-      const unsubscribe2 = filter ? runtime3.events.subscribe(filter, callback) : runtime3.events.subscribe(callback);
-      return unsubscribe2;
-    }, [runtime3, ...deps]);
-  }
-  function useRuntimeState() {
-    const runtime3 = useRuntime();
-    return runtime3?.state ?? null;
-  }
-  function useDecision(strategy, defaultValue) {
-    const runtime3 = useRuntime();
-    const [result, setResult] = (0, import_react5.useState)({
-      value: defaultValue,
-      isFallback: true,
-      isLoading: true
-    });
-    (0, import_react5.useEffect)(() => {
-      if (!runtime3 || !strategy) {
-        setResult({ value: defaultValue, isFallback: true, isLoading: false });
-        return;
-      }
-      let cancelled = false;
-      runtime3.evaluate(strategy).then((res) => {
-        if (!cancelled) {
-          setResult({ value: res.value, isFallback: res.isFallback, isLoading: false });
-        }
-      });
-      return () => {
-        cancelled = true;
-      };
-    }, [runtime3, strategy, defaultValue]);
-    return result;
-  }
-
   // src/events/types.ts
   var StandardEvents = {
     // UI events (from PostHog autocapture)
@@ -33700,6 +33622,85 @@ var SyntrologieSDK = (() => {
     custom: customCanvasEvent
   };
 
+  // src/RuntimeProvider.tsx
+  var import_react5 = __toESM(require_react(), 1);
+  var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
+  var RuntimeReactContext = (0, import_react5.createContext)({
+    runtime: null,
+    context: null
+  });
+  function RuntimeProvider({ runtime: runtime3, children }) {
+    const [context, setContext] = (0, import_react5.useState)(
+      runtime3 ? runtime3.context.get() : null
+    );
+    (0, import_react5.useEffect)(() => {
+      if (!runtime3) return;
+      setContext(runtime3.context.get());
+      const unsubscribe2 = runtime3.context.subscribe((ctx) => {
+        setContext(ctx);
+      });
+      return unsubscribe2;
+    }, [runtime3]);
+    const value = (0, import_react5.useMemo)(() => ({ runtime: runtime3, context }), [runtime3, context]);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RuntimeReactContext.Provider, { value, children });
+  }
+  function useRuntime() {
+    const { runtime: runtime3 } = (0, import_react5.useContext)(RuntimeReactContext);
+    return runtime3;
+  }
+  function useRuntimeContext() {
+    const { context } = (0, import_react5.useContext)(RuntimeReactContext);
+    return context;
+  }
+  function usePageContext() {
+    const context = useRuntimeContext();
+    return context?.page ?? null;
+  }
+  function useSessionContext() {
+    const context = useRuntimeContext();
+    return context?.session ?? null;
+  }
+  function useViewportContext() {
+    const context = useRuntimeContext();
+    return context?.viewport ?? null;
+  }
+  function useRuntimeEvents(filter, callback, deps = []) {
+    const runtime3 = useRuntime();
+    (0, import_react5.useEffect)(() => {
+      if (!runtime3) return;
+      const unsubscribe2 = filter ? runtime3.events.subscribe(filter, callback) : runtime3.events.subscribe(callback);
+      return unsubscribe2;
+    }, [runtime3, ...deps]);
+  }
+  function useRuntimeState() {
+    const runtime3 = useRuntime();
+    return runtime3?.state ?? null;
+  }
+  function useDecision(strategy, defaultValue) {
+    const runtime3 = useRuntime();
+    const [result, setResult] = (0, import_react5.useState)({
+      value: defaultValue,
+      isFallback: true,
+      isLoading: true
+    });
+    (0, import_react5.useEffect)(() => {
+      if (!runtime3 || !strategy) {
+        setResult({ value: defaultValue, isFallback: true, isLoading: false });
+        return;
+      }
+      let cancelled = false;
+      runtime3.evaluate(strategy).then((res) => {
+        if (!cancelled) {
+          setResult({ value: res.value, isFallback: res.isFallback, isLoading: false });
+        }
+      });
+      return () => {
+        cancelled = true;
+      };
+    }, [runtime3, strategy, defaultValue]);
+    return result;
+  }
+
   // src/components/TileCard.tsx
   var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
   function ChatbotBlock({ config, telemetry, surface }) {
@@ -34660,38 +34661,36 @@ var SyntrologieSDK = (() => {
     featureKey,
     credentials,
     configFeatureKey = "smart-canvas-config"
-  }) => {
-    return async () => {
-      if (experiments && configFeatureKey) {
-        const directConfig = experiments.getFeatureValue?.(configFeatureKey, null);
-        if (directConfig && typeof directConfig === "object") {
-          debug("SmartCanvas Config", "Resolved config directly from feature flag", directConfig);
-          return directConfig;
-        }
-      }
-      const uri = resolveConfigUri({ configUri, experiments, featureKey });
-      if (!uri) {
-        debug("SmartCanvas Config", "No config available \u2014 returning empty config");
-        return { tiles: [], overlays: [] };
+  }) => async () => {
+    if (experiments && configFeatureKey) {
+      const directConfig = experiments.getFeatureValue?.(configFeatureKey, null);
+      if (directConfig && typeof directConfig === "object") {
+        debug("SmartCanvas Config", "Resolved config directly from feature flag", directConfig);
+        return directConfig;
       }
-      if (!validateConfigUri(uri)) {
-        throw new Error(`SmartCanvas: config URI not allowed: ${uri}`);
-      }
-      const effectiveCredentials = credentials ?? (isSameOrigin(uri) ? "include" : "omit");
-      const response = await fetch(uri, {
-        credentials: effectiveCredentials,
-        headers: {
-          "X-SDK-Version": SDK_VERSION,
-          "X-SDK-Schema-Version": SDK_SCHEMA_VERSION
-        }
-      });
-      if (!response.ok) {
-        throw new Error(`SmartCanvas: failed to fetch config (${response.status})`);
+    }
+    const uri = resolveConfigUri({ configUri, experiments, featureKey });
+    if (!uri) {
+      debug("SmartCanvas Config", "No config available \u2014 returning empty config");
+      return { tiles: [], overlays: [] };
+    }
+    if (!validateConfigUri(uri)) {
+      throw new Error(`SmartCanvas: config URI not allowed: ${uri}`);
+    }
+    const effectiveCredentials = credentials ?? (isSameOrigin(uri) ? "include" : "omit");
+    const response = await fetch(uri, {
+      credentials: effectiveCredentials,
+      headers: {
+        "X-SDK-Version": SDK_VERSION,
+        "X-SDK-Schema-Version": SDK_SCHEMA_VERSION
       }
-      const config = await response.json();
-      debug("SmartCanvas Config", "Fetched config from URI", config);
-      return config;
-    };
+    });
+    if (!response.ok) {
+      throw new Error(`SmartCanvas: failed to fetch config (${response.status})`);
+    }
+    const config = await response.json();
+    debug("SmartCanvas Config", "Fetched config from URI", config);
+    return config;
   };
 
   // src/SmartCanvasApp.tsx
@@ -34709,7 +34708,7 @@ var SyntrologieSDK = (() => {
   function matchRoute(pattern, pathname) {
     if (pattern.endsWith("/*")) {
       const prefix = pattern.slice(0, -2);
-      return pathname === prefix || pathname.startsWith(prefix + "/");
+      return pathname === prefix || pathname.startsWith(`${prefix}/`);
     }
     return pathname === pattern;
   }
@@ -35138,7 +35137,7 @@ var SyntrologieSDK = (() => {
       debug("Syntro Runtime", "\u2713 Editor URL validated");
       return true;
     } catch (e2) {
-      warn("Syntro Runtime", "\u274C Invalid editor URL: " + url, e2);
+      warn("Syntro Runtime", `\u274C Invalid editor URL: ${url}`, e2);
       return false;
     }
   }
@@ -35241,7 +35240,7 @@ var SyntrologieSDK = (() => {
       hasIntegrity: !!options.integrity,
       isDefault: baseEditorUrl === DEFAULT_EDITOR_URL,
       hasApiBase: !!apiBase,
-      tokenPrefix: token.slice(0, 10) + "..."
+      tokenPrefix: `${token.slice(0, 10)}...`
     });
     if (!validateEditorUrl(baseEditorUrl)) {
       console.error("[Syntro Runtime] \u274C BLOCKED: Editor from untrusted URL:", baseEditorUrl);
@@ -35290,7 +35289,7 @@ var SyntrologieSDK = (() => {
     let currentFetcher = null;
     let currentBatchHandle = null;
     let isEnabled = true;
-    const runtime3 = config.runtime;
+    const { runtime: runtime3 } = config;
     async function applyActions(actions) {
       if (!runtime3?.actions || actions.length === 0) {
         return;
@@ -35423,9 +35422,7 @@ var SyntrologieSDK = (() => {
       registerTelemetryProperties: (properties) => {
         telemetry?.register?.(properties);
       },
-      getSessionId: () => {
-        return telemetry?.getSessionId?.();
-      },
+      getSessionId: () => telemetry?.getSessionId?.(),
       startSessionRecording: () => {
         telemetry?.startSessionRecording?.();
       },
@@ -39543,19 +39540,17 @@ var SyntrologieSDK = (() => {
     experiments,
     featureKey = "smart-canvas-overlay-uri",
     credentials = "include"
-  } = {}) => {
-    return async () => {
-      const uri = resolveConfigUri({ configUri, experiments, featureKey });
-      if (!uri) {
-        throw new Error("SmartCanvas overlays: recipe URI missing (env + feature unset).");
-      }
-      const response = await fetch(uri, { credentials });
-      if (!response.ok) {
-        throw new Error(`SmartCanvas overlays: failed to fetch recipe (${response.status})`);
-      }
-      const json = await response.json();
-      return CanvasRecipeZ.parse(json);
-    };
+  } = {}) => async () => {
+    const uri = resolveConfigUri({ configUri, experiments, featureKey });
+    if (!uri) {
+      throw new Error("SmartCanvas overlays: recipe URI missing (env + feature unset).");
+    }
+    const response = await fetch(uri, { credentials });
+    if (!response.ok) {
+      throw new Error(`SmartCanvas overlays: failed to fetch recipe (${response.status})`);
+    }
+    const json = await response.json();
+    return CanvasRecipeZ.parse(json);
   };
 
   // src/metrics/sessionMetrics.ts
@@ -39924,7 +39919,7 @@ var SyntrologieSDK = (() => {
     }
     updatePage() {
       const url = window.location.href;
-      const title = document.title;
+      const { title } = document;
       const routeId = matchRoute2(url, this.routes);
       const newPage = {
         url,
@@ -40254,39 +40249,6 @@ var SyntrologieSDK = (() => {
     return FrequencyEntryZ.safeParse(data);
   }
 
-  // src/state/helpers/dismissals.ts
-  var DISMISSAL_PREFIX = "dismissed:";
-  function createDismissalStore(sessionStorage2, userStorage) {
-    return {
-      mark(key, permanent = false) {
-        const storageKey = DISMISSAL_PREFIX + key;
-        const storage = permanent ? userStorage : sessionStorage2;
-        storage.set(storageKey, true);
-      },
-      isDismissed(key) {
-        const storageKey = DISMISSAL_PREFIX + key;
-        return sessionStorage2.has(storageKey) || userStorage.has(storageKey);
-      },
-      clear(key) {
-        const storageKey = DISMISSAL_PREFIX + key;
-        sessionStorage2.remove(storageKey);
-        userStorage.remove(storageKey);
-      },
-      clearAll() {
-        for (const key of sessionStorage2.keys()) {
-          if (key.startsWith(DISMISSAL_PREFIX)) {
-            sessionStorage2.remove(key);
-          }
-        }
-        for (const key of userStorage.keys()) {
-          if (key.startsWith(DISMISSAL_PREFIX)) {
-            userStorage.remove(key);
-          }
-        }
-      }
-    };
-  }
-
   // src/state/helpers/cooldowns.ts
   var COOLDOWN_PREFIX = "cooldown:";
   function createCooldownStore(storage) {
@@ -40311,8 +40273,41 @@ var SyntrologieSDK = (() => {
         return remaining;
       },
       clear(key) {
-        const storageKey = COOLDOWN_PREFIX + key;
-        storage.remove(storageKey);
+        const storageKey = COOLDOWN_PREFIX + key;
+        storage.remove(storageKey);
+      }
+    };
+  }
+
+  // src/state/helpers/dismissals.ts
+  var DISMISSAL_PREFIX = "dismissed:";
+  function createDismissalStore(sessionStorage2, userStorage) {
+    return {
+      mark(key, permanent = false) {
+        const storageKey = DISMISSAL_PREFIX + key;
+        const storage = permanent ? userStorage : sessionStorage2;
+        storage.set(storageKey, true);
+      },
+      isDismissed(key) {
+        const storageKey = DISMISSAL_PREFIX + key;
+        return sessionStorage2.has(storageKey) || userStorage.has(storageKey);
+      },
+      clear(key) {
+        const storageKey = DISMISSAL_PREFIX + key;
+        sessionStorage2.remove(storageKey);
+        userStorage.remove(storageKey);
+      },
+      clearAll() {
+        for (const key of sessionStorage2.keys()) {
+          if (key.startsWith(DISMISSAL_PREFIX)) {
+            sessionStorage2.remove(key);
+          }
+        }
+        for (const key of userStorage.keys()) {
+          if (key.startsWith(DISMISSAL_PREFIX)) {
+            userStorage.remove(key);
+          }
+        }
       }
     };
   }
@@ -41178,98 +41173,332 @@ var SyntrologieSDK = (() => {
         scrim.appendChild(slice);
       }
     }
-    const setClipPath = (path) => {
-      scrim.style.clipPath = path;
-      scrim.style.webkitClipPath = path;
-    };
-    const update = () => {
-      const rect = anchorEl.getBoundingClientRect();
-      const x2 = Math.max(0, rect.left - padding);
-      const y2 = Math.max(0, rect.top - padding);
-      const w2 = Math.min(window.innerWidth, rect.width + padding * 2);
-      const h2 = Math.min(window.innerHeight, rect.height + padding * 2);
-      Object.assign(ring.style, {
-        left: `${x2}px`,
-        top: `${y2}px`,
-        width: `${w2}px`,
-        height: `${h2}px`
-      });
-      if (supportsPathClip) {
-        const vw = window.innerWidth;
-        const vh = window.innerHeight;
-        const r2 = Math.min(radius, w2 / 2, h2 / 2);
-        const outer = `M 0 0 L ${vw} 0 L ${vw} ${vh} L 0 ${vh} Z`;
-        const inner = `M ${x2 + r2} ${y2} A ${r2} ${r2} 0 0 0 ${x2} ${y2 + r2} L ${x2} ${y2 + h2 - r2} A ${r2} ${r2} 0 0 0 ${x2 + r2} ${y2 + h2} L ${x2 + w2 - r2} ${y2 + h2} A ${r2} ${r2} 0 0 0 ${x2 + w2} ${y2 + h2 - r2} L ${x2 + w2} ${y2 + r2} A ${r2} ${r2} 0 0 0 ${x2 + w2 - r2} ${y2} L ${x2 + r2} ${y2} Z`;
-        setClipPath(`path('${outer} ${inner}')`);
-      } else {
-        const [top, right, bottom, left] = fallbackSlices;
-        Object.assign(top.style, {
-          left: "0px",
-          top: "0px",
-          width: "100vw",
-          height: `${y2}px`
-        });
-        Object.assign(bottom.style, {
-          left: "0px",
-          top: `${y2 + h2}px`,
-          width: "100vw",
-          height: `${Math.max(0, window.innerHeight - (y2 + h2))}px`
-        });
-        Object.assign(left.style, {
-          left: "0px",
-          top: `${y2}px`,
-          width: `${x2}px`,
-          height: `${h2}px`
-        });
-        Object.assign(right.style, {
-          left: `${x2 + w2}px`,
-          top: `${y2}px`,
-          width: `${Math.max(0, window.innerWidth - (x2 + w2))}px`,
-          height: `${h2}px`
+    const setClipPath = (path) => {
+      scrim.style.clipPath = path;
+      scrim.style.webkitClipPath = path;
+    };
+    const update = () => {
+      const rect = anchorEl.getBoundingClientRect();
+      const x2 = Math.max(0, rect.left - padding);
+      const y2 = Math.max(0, rect.top - padding);
+      const w2 = Math.min(window.innerWidth, rect.width + padding * 2);
+      const h2 = Math.min(window.innerHeight, rect.height + padding * 2);
+      Object.assign(ring.style, {
+        left: `${x2}px`,
+        top: `${y2}px`,
+        width: `${w2}px`,
+        height: `${h2}px`
+      });
+      if (supportsPathClip) {
+        const vw = window.innerWidth;
+        const vh = window.innerHeight;
+        const r2 = Math.min(radius, w2 / 2, h2 / 2);
+        const outer = `M 0 0 L ${vw} 0 L ${vw} ${vh} L 0 ${vh} Z`;
+        const inner = `M ${x2 + r2} ${y2} A ${r2} ${r2} 0 0 0 ${x2} ${y2 + r2} L ${x2} ${y2 + h2 - r2} A ${r2} ${r2} 0 0 0 ${x2 + r2} ${y2 + h2} L ${x2 + w2 - r2} ${y2 + h2} A ${r2} ${r2} 0 0 0 ${x2 + w2} ${y2 + h2 - r2} L ${x2 + w2} ${y2 + r2} A ${r2} ${r2} 0 0 0 ${x2 + w2 - r2} ${y2} L ${x2 + r2} ${y2} Z`;
+        setClipPath(`path('${outer} ${inner}')`);
+      } else {
+        const [top, right, bottom, left] = fallbackSlices;
+        Object.assign(top.style, {
+          left: "0px",
+          top: "0px",
+          width: "100vw",
+          height: `${y2}px`
+        });
+        Object.assign(bottom.style, {
+          left: "0px",
+          top: `${y2 + h2}px`,
+          width: "100vw",
+          height: `${Math.max(0, window.innerHeight - (y2 + h2))}px`
+        });
+        Object.assign(left.style, {
+          left: "0px",
+          top: `${y2}px`,
+          width: `${x2}px`,
+          height: `${h2}px`
+        });
+        Object.assign(right.style, {
+          left: `${x2 + w2}px`,
+          top: `${y2}px`,
+          width: `${Math.max(0, window.innerWidth - (x2 + w2))}px`,
+          height: `${h2}px`
+        });
+      }
+    };
+    const ro2 = new ResizeObserver(() => requestAnimationFrame(update));
+    ro2.observe(anchorEl);
+    const onScroll = () => requestAnimationFrame(update);
+    const onResize = () => requestAnimationFrame(update);
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    const onKey = (e2) => {
+      if (e2.key === "Escape" && onEsc)
+        handle.destroy();
+    };
+    if (onEsc) {
+      window.addEventListener("keydown", onKey);
+    }
+    const onClick = (event) => {
+      if (blocking) {
+        event.preventDefault();
+        event.stopPropagation();
+      } else if (onClickOutside) {
+        handle.destroy();
+      }
+    };
+    scrim.addEventListener("click", onClick);
+    const handle = {
+      destroy() {
+        ro2.disconnect();
+        window.removeEventListener("scroll", onScroll, true);
+        window.removeEventListener("resize", onResize);
+        if (onEsc) {
+          window.removeEventListener("keydown", onKey);
+        }
+        scrim.removeEventListener("click", onClick);
+        scrim.style.opacity = "0";
+        setTimeout(() => {
+          scrim.remove();
+          ring.remove();
+        }, 220);
+      }
+    };
+    update();
+    return handle;
+  }
+
+  // ../adaptives/adaptive-overlays/dist/sanitizer.js
+  var ALLOWED_TAGS2 = /* @__PURE__ */ new Set([
+    "b",
+    "strong",
+    "i",
+    "em",
+    "u",
+    "span",
+    "div",
+    "p",
+    "br",
+    "ul",
+    "ol",
+    "li",
+    "code",
+    "pre",
+    "small",
+    "sup",
+    "sub",
+    "a",
+    "button"
+  ]);
+  function sanitizeHtml2(html2) {
+    const hasNative = typeof window.Sanitizer === "function";
+    if (hasNative) {
+      try {
+        const s2 = new window.Sanitizer({});
+        const frag = s2.sanitizeToFragment(html2);
+        const div = document.createElement("div");
+        div.append(frag);
+        return div.innerHTML;
+      } catch {
+      }
+    }
+    const tpl = document.createElement("template");
+    tpl.innerHTML = html2;
+    const root = tpl.content;
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
+    const toRemove = [];
+    while (walker.nextNode()) {
+      const el = walker.currentNode;
+      const tag = el.tagName.toLowerCase();
+      if (!ALLOWED_TAGS2.has(tag)) {
+        toRemove.push(el);
+        continue;
+      }
+      for (const attr of Array.from(el.attributes)) {
+        const name = attr.name.toLowerCase();
+        const value = attr.value.trim().toLowerCase();
+        const isEvent = name.startsWith("on");
+        const isJsUrl = (name === "href" || name === "src") && value.startsWith("javascript:");
+        if (isEvent || isJsUrl) {
+          el.removeAttribute(attr.name);
+        }
+      }
+    }
+    for (const el of toRemove) {
+      while (el.firstChild) {
+        el.parentNode?.insertBefore(el.firstChild, el);
+      }
+      el.remove();
+    }
+    return tpl.innerHTML;
+  }
+
+  // ../adaptives/adaptive-overlays/dist/modal.js
+  var executeModal = async (action, context) => {
+    const { content, size: size2 = "md", blocking = false, scrim, dismiss, ctaButtons } = action;
+    const scrimEl = document.createElement("div");
+    scrimEl.className = "syntro-modal-scrim";
+    scrimEl.style.cssText = `
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, ${scrim?.opacity ?? 0.6});
+    z-index: 2147483645;
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+  `;
+    context.overlayRoot.appendChild(scrimEl);
+    const modal = document.createElement("div");
+    modal.className = `syntro-modal syntro-modal-${size2}`;
+    modal.setAttribute("role", "dialog");
+    modal.setAttribute("aria-modal", "true");
+    const sizeMap = { sm: "360px", md: "480px", lg: "640px" };
+    modal.style.cssText = `
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.95);
+    max-width: ${sizeMap[size2]};
+    width: 90%;
+    background: white;
+    border-radius: 12px;
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    z-index: 2147483646;
+    opacity: 0;
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    padding: 24px;
+  `;
+    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 += `<div class="syntro-modal-body" style="color: #4b5563; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
+    if (dismiss?.closeButton !== false) {
+      html2 += `
+      <button class="syntro-modal-close" data-syntro-action="dismiss" style="
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        color: #6b7280;
+      " 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"/>
+        </svg>
+      </button>
+    `;
+    }
+    if (ctaButtons && ctaButtons.length > 0) {
+      html2 += `<div class="syntro-modal-actions" style="display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end;">`;
+      for (const btn of ctaButtons) {
+        const isPrimary = btn.primary ?? false;
+        html2 += `
+        <button
+          class="syntro-modal-btn ${isPrimary ? "syntro-modal-btn-primary" : ""}"
+          data-syntro-action="${sanitizeHtml2(btn.actionId)}"
+          style="
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 150ms ease;
+            ${isPrimary ? "background: #4f46e5; color: white; border: none;" : "background: white; color: #374151; border: 1px solid #d1d5db;"}
+          "
+        >
+          ${sanitizeHtml2(btn.label)}
+        </button>
+      `;
+      }
+      html2 += `</div>`;
+    }
+    modal.innerHTML = html2;
+    context.overlayRoot.appendChild(modal);
+    let actionClicked = null;
+    const actionBtns = modal.querySelectorAll("[data-syntro-action]");
+    const actionHandler = (e2) => {
+      const btn = e2.currentTarget;
+      const actionId = btn.getAttribute("data-syntro-action");
+      if (actionId) {
+        actionClicked = actionId;
+        context.publishEvent("action.modal_cta_clicked", {
+          actionId
         });
+        if (actionId === "dismiss") {
+          handle.destroy();
+        }
       }
     };
-    const ro2 = new ResizeObserver(() => requestAnimationFrame(update));
-    ro2.observe(anchorEl);
-    const onScroll = () => requestAnimationFrame(update);
-    const onResize = () => requestAnimationFrame(update);
-    window.addEventListener("scroll", onScroll, true);
-    window.addEventListener("resize", onResize);
+    actionBtns.forEach((btn) => btn.addEventListener("click", actionHandler));
     const onKey = (e2) => {
-      if (e2.key === "Escape" && onEsc)
+      if (e2.key === "Escape" && dismiss?.onEsc !== false) {
         handle.destroy();
+      }
     };
-    if (onEsc) {
-      window.addEventListener("keydown", onKey);
-    }
-    const onClick = (event) => {
-      if (blocking) {
-        event.preventDefault();
-        event.stopPropagation();
-      } else if (onClickOutside) {
+    window.addEventListener("keydown", onKey);
+    const onScrimClick = () => {
+      if (!blocking) {
         handle.destroy();
       }
     };
-    scrim.addEventListener("click", onClick);
+    scrimEl.addEventListener("click", onScrimClick);
+    const originalInert = [];
+    if (blocking) {
+      Array.from(document.body.children).forEach((el) => {
+        if (el !== context.overlayRoot && el.getAttribute("inert") === null) {
+          el.setAttribute("inert", "");
+          originalInert.push(el);
+        }
+      });
+    }
+    let timeoutId;
+    if (dismiss?.timeoutMs) {
+      timeoutId = setTimeout(() => {
+        handle.destroy();
+      }, dismiss.timeoutMs);
+    }
+    const focusableEls = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
+    if (focusableEls.length > 0) {
+      requestAnimationFrame(() => focusableEls[0].focus());
+    }
+    requestAnimationFrame(() => {
+      scrimEl.style.opacity = "1";
+      modal.style.opacity = "1";
+      modal.style.transform = "translate(-50%, -50%) scale(1)";
+    });
+    context.publishEvent("action.applied", {
+      id: context.generateId(),
+      kind: "overlays:modal",
+      size: size2,
+      blocking
+    });
     const handle = {
       destroy() {
-        ro2.disconnect();
-        window.removeEventListener("scroll", onScroll, true);
-        window.removeEventListener("resize", onResize);
-        if (onEsc) {
-          window.removeEventListener("keydown", onKey);
+        if (timeoutId) {
+          clearTimeout(timeoutId);
         }
-        scrim.removeEventListener("click", onClick);
-        scrim.style.opacity = "0";
+        window.removeEventListener("keydown", onKey);
+        scrimEl.removeEventListener("click", onScrimClick);
+        actionBtns.forEach((btn) => btn.removeEventListener("click", actionHandler));
+        originalInert.forEach((el) => el.removeAttribute("inert"));
+        modal.style.opacity = "0";
+        modal.style.transform = "translate(-50%, -50%) scale(0.95)";
+        scrimEl.style.opacity = "0";
         setTimeout(() => {
-          scrim.remove();
-          ring.remove();
-        }, 220);
+          modal.remove();
+          scrimEl.remove();
+        }, 200);
+        context.publishEvent("action.modal_dismissed", {
+          actionClicked
+        });
       }
     };
-    update();
-    return handle;
-  }
+    return {
+      cleanup: () => {
+        handle.destroy();
+      }
+    };
+  };
 
   // ../../node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
   var sides = ["top", "right", "bottom", "left"];
@@ -42695,113 +42924,48 @@ var SyntrologieSDK = (() => {
       frameLoop();
     }
     function frameLoop() {
-      const nextRefRect = getBoundingClientRect(reference);
-      if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
-        update();
-      }
-      prevRefRect = nextRefRect;
-      frameId = requestAnimationFrame(frameLoop);
-    }
-    update();
-    return () => {
-      var _resizeObserver2;
-      ancestors.forEach((ancestor) => {
-        ancestorScroll && ancestor.removeEventListener("scroll", update);
-        ancestorResize && ancestor.removeEventListener("resize", update);
-      });
-      cleanupIo == null || cleanupIo();
-      (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
-      resizeObserver = null;
-      if (animationFrame) {
-        cancelAnimationFrame(frameId);
-      }
-    };
-  }
-  var offset2 = offset;
-  var shift2 = shift;
-  var flip2 = flip;
-  var hide2 = hide;
-  var arrow2 = arrow;
-  var computePosition2 = (reference, floating, options) => {
-    const cache2 = /* @__PURE__ */ new Map();
-    const mergedOptions = {
-      platform,
-      ...options
-    };
-    const platformWithCache = {
-      ...mergedOptions.platform,
-      _c: cache2
-    };
-    return computePosition(reference, floating, {
-      ...mergedOptions,
-      platform: platformWithCache
-    });
-  };
-
-  // ../adaptives/adaptive-overlays/dist/sanitizer.js
-  var ALLOWED_TAGS2 = /* @__PURE__ */ new Set([
-    "b",
-    "strong",
-    "i",
-    "em",
-    "u",
-    "span",
-    "div",
-    "p",
-    "br",
-    "ul",
-    "ol",
-    "li",
-    "code",
-    "pre",
-    "small",
-    "sup",
-    "sub",
-    "a",
-    "button"
-  ]);
-  function sanitizeHtml2(html2) {
-    const hasNative = typeof window.Sanitizer === "function";
-    if (hasNative) {
-      try {
-        const s2 = new window.Sanitizer({});
-        const frag = s2.sanitizeToFragment(html2);
-        const div = document.createElement("div");
-        div.append(frag);
-        return div.innerHTML;
-      } catch {
-      }
-    }
-    const tpl = document.createElement("template");
-    tpl.innerHTML = html2;
-    const root = tpl.content;
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
-    const toRemove = [];
-    while (walker.nextNode()) {
-      const el = walker.currentNode;
-      const tag = el.tagName.toLowerCase();
-      if (!ALLOWED_TAGS2.has(tag)) {
-        toRemove.push(el);
-        continue;
-      }
-      for (const attr of Array.from(el.attributes)) {
-        const name = attr.name.toLowerCase();
-        const value = attr.value.trim().toLowerCase();
-        const isEvent = name.startsWith("on");
-        const isJsUrl = (name === "href" || name === "src") && value.startsWith("javascript:");
-        if (isEvent || isJsUrl) {
-          el.removeAttribute(attr.name);
-        }
+      const nextRefRect = getBoundingClientRect(reference);
+      if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
+        update();
       }
+      prevRefRect = nextRefRect;
+      frameId = requestAnimationFrame(frameLoop);
     }
-    for (const el of toRemove) {
-      while (el.firstChild) {
-        el.parentNode?.insertBefore(el.firstChild, el);
+    update();
+    return () => {
+      var _resizeObserver2;
+      ancestors.forEach((ancestor) => {
+        ancestorScroll && ancestor.removeEventListener("scroll", update);
+        ancestorResize && ancestor.removeEventListener("resize", update);
+      });
+      cleanupIo == null || cleanupIo();
+      (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+      resizeObserver = null;
+      if (animationFrame) {
+        cancelAnimationFrame(frameId);
       }
-      el.remove();
-    }
-    return tpl.innerHTML;
+    };
   }
+  var offset2 = offset;
+  var shift2 = shift;
+  var flip2 = flip;
+  var hide2 = hide;
+  var arrow2 = arrow;
+  var computePosition2 = (reference, floating, options) => {
+    const cache2 = /* @__PURE__ */ new Map();
+    const mergedOptions = {
+      platform,
+      ...options
+    };
+    const platformWithCache = {
+      ...mergedOptions.platform,
+      _c: cache2
+    };
+    return computePosition(reference, floating, {
+      ...mergedOptions,
+      platform: platformWithCache
+    });
+  };
 
   // ../adaptives/adaptive-overlays/dist/tooltip.js
   function getAnchorReference(anchorEl) {
@@ -42885,296 +43049,125 @@ var SyntrologieSDK = (() => {
           bottom: "top",
           left: "right"
         };
-        Object.assign(arrowEl.style, {
-          left: arrowX != null ? `${arrowX}px` : "",
-          top: arrowY != null ? `${arrowY}px` : "",
-          right: "",
-          bottom: "",
-          [staticSide[side]]: "-4px"
-        });
-        const rotation = {
-          top: "0deg",
-          right: "90deg",
-          bottom: "180deg",
-          left: "270deg"
-        };
-        arrowEl.style.transform = `rotate(${rotation[side] || "0deg"})`;
-      }
-    });
-    const onKey = (e2) => {
-      if (e2.key === "Escape")
-        handle.destroy();
-    };
-    window.addEventListener("keydown", onKey);
-    const originalInert = [];
-    if (opts.blocking) {
-      Array.from(document.body.children).forEach((el) => {
-        if (el !== overlayRoot && el.getAttribute("inert") === null) {
-          el.setAttribute("inert", "");
-          originalInert.push(el.id || el.tagName);
-        }
-      });
-      const focusableEls = Array.from(div.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
-      if (focusableEls.length > 0) {
-        const firstFocusable = focusableEls[0];
-        const lastFocusable = focusableEls[focusableEls.length - 1];
-        const trapFocus = (e2) => {
-          if (e2.key !== "Tab")
-            return;
-          if (e2.shiftKey) {
-            if (document.activeElement === firstFocusable) {
-              lastFocusable.focus();
-              e2.preventDefault();
-            }
-          } else {
-            if (document.activeElement === lastFocusable) {
-              firstFocusable.focus();
-              e2.preventDefault();
-            }
-          }
-        };
-        div.addEventListener("keydown", trapFocus);
-        requestAnimationFrame(() => firstFocusable.focus());
-      }
-    }
-    const attachTrigger = () => {
-      if (opts.trigger === "hover") {
-        const enter = () => {
-          div.style.visibility = "visible";
-          div.style.opacity = "1";
-        };
-        const leave = () => {
-          div.style.visibility = "hidden";
-          div.style.opacity = "0";
-        };
-        div.style.visibility = "hidden";
-        div.style.opacity = "0";
-        div.style.transition = "opacity 200ms ease, visibility 200ms";
-        anchorEl.addEventListener("mouseenter", enter);
-        anchorEl.addEventListener("mouseleave", leave);
-        anchorEl.addEventListener("focus", enter);
-        anchorEl.addEventListener("blur", leave);
-        return () => {
-          anchorEl.removeEventListener("mouseenter", enter);
-          anchorEl.removeEventListener("mouseleave", leave);
-          anchorEl.removeEventListener("focus", enter);
-          anchorEl.removeEventListener("blur", leave);
-        };
-      }
-      if (opts.trigger === "click") {
-        const toggle = () => {
-          const isVisible = div.style.visibility === "visible";
-          if (isVisible) {
-            handle.destroy();
-          } else {
-            div.style.visibility = "visible";
-            div.style.opacity = "1";
-          }
-        };
-        div.style.visibility = "hidden";
-        div.style.opacity = "0";
-        div.style.transition = "opacity 200ms ease, visibility 200ms";
-        anchorEl.addEventListener("click", toggle);
-        return () => anchorEl.removeEventListener("click", toggle);
-      }
-      div.style.opacity = "0";
-      div.style.transition = "opacity 200ms ease";
-      requestAnimationFrame(() => {
-        div.style.opacity = "1";
-      });
-      return () => {
-      };
-    };
-    const removeTrigger = attachTrigger();
-    const handle = {
-      el: div,
-      destroy() {
-        cleanup();
-        removeTrigger();
-        window.removeEventListener("keydown", onKey);
-        actionBtns.forEach((btn) => btn.removeEventListener("click", actionHandler));
-        if (opts.blocking) {
-          Array.from(document.body.children).forEach((el) => {
-            if (el !== overlayRoot) {
-              el.removeAttribute("inert");
-            }
-          });
-        }
-        div.style.opacity = "0";
-        setTimeout(() => div.remove(), 200);
-      }
-    };
-    return handle;
-  }
-
-  // ../adaptives/adaptive-overlays/dist/modal.js
-  var executeModal = async (action, context) => {
-    const { content, size: size2 = "md", blocking = false, scrim, dismiss, ctaButtons } = action;
-    const scrimEl = document.createElement("div");
-    scrimEl.className = "syntro-modal-scrim";
-    scrimEl.style.cssText = `
-    position: fixed;
-    inset: 0;
-    background: rgba(0, 0, 0, ${scrim?.opacity ?? 0.6});
-    z-index: 2147483645;
-    opacity: 0;
-    transition: opacity 200ms ease-out;
-  `;
-    context.overlayRoot.appendChild(scrimEl);
-    const modal = document.createElement("div");
-    modal.className = `syntro-modal syntro-modal-${size2}`;
-    modal.setAttribute("role", "dialog");
-    modal.setAttribute("aria-modal", "true");
-    const sizeMap = { sm: "360px", md: "480px", lg: "640px" };
-    modal.style.cssText = `
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%) scale(0.95);
-    max-width: ${sizeMap[size2]};
-    width: 90%;
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    z-index: 2147483646;
-    opacity: 0;
-    transition: opacity 200ms ease-out, transform 200ms ease-out;
-    padding: 24px;
-  `;
-    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 += `<div class="syntro-modal-body" style="color: #4b5563; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
-    if (dismiss?.closeButton !== false) {
-      html2 += `
-      <button class="syntro-modal-close" data-syntro-action="dismiss" style="
-        position: absolute;
-        top: 16px;
-        right: 16px;
-        background: none;
-        border: none;
-        cursor: pointer;
-        padding: 4px;
-        color: #6b7280;
-      " 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"/>
-        </svg>
-      </button>
-    `;
-    }
-    if (ctaButtons && ctaButtons.length > 0) {
-      html2 += `<div class="syntro-modal-actions" style="display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end;">`;
-      for (const btn of ctaButtons) {
-        const isPrimary = btn.primary ?? false;
-        html2 += `
-        <button
-          class="syntro-modal-btn ${isPrimary ? "syntro-modal-btn-primary" : ""}"
-          data-syntro-action="${sanitizeHtml2(btn.actionId)}"
-          style="
-            padding: 10px 20px;
-            border-radius: 8px;
-            font-size: 14px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background 150ms ease;
-            ${isPrimary ? "background: #4f46e5; color: white; border: none;" : "background: white; color: #374151; border: 1px solid #d1d5db;"}
-          "
-        >
-          ${sanitizeHtml2(btn.label)}
-        </button>
-      `;
-      }
-      html2 += `</div>`;
-    }
-    modal.innerHTML = html2;
-    context.overlayRoot.appendChild(modal);
-    let actionClicked = null;
-    const actionBtns = modal.querySelectorAll("[data-syntro-action]");
-    const actionHandler = (e2) => {
-      const btn = e2.currentTarget;
-      const actionId = btn.getAttribute("data-syntro-action");
-      if (actionId) {
-        actionClicked = actionId;
-        context.publishEvent("action.modal_cta_clicked", {
-          actionId
+        Object.assign(arrowEl.style, {
+          left: arrowX != null ? `${arrowX}px` : "",
+          top: arrowY != null ? `${arrowY}px` : "",
+          right: "",
+          bottom: "",
+          [staticSide[side]]: "-4px"
         });
-        if (actionId === "dismiss") {
-          handle.destroy();
-        }
+        const rotation = {
+          top: "0deg",
+          right: "90deg",
+          bottom: "180deg",
+          left: "270deg"
+        };
+        arrowEl.style.transform = `rotate(${rotation[side] || "0deg"})`;
       }
-    };
-    actionBtns.forEach((btn) => btn.addEventListener("click", actionHandler));
+    });
     const onKey = (e2) => {
-      if (e2.key === "Escape" && dismiss?.onEsc !== false) {
+      if (e2.key === "Escape")
         handle.destroy();
-      }
     };
     window.addEventListener("keydown", onKey);
-    const onScrimClick = () => {
-      if (!blocking) {
-        handle.destroy();
-      }
-    };
-    scrimEl.addEventListener("click", onScrimClick);
     const originalInert = [];
-    if (blocking) {
+    if (opts.blocking) {
       Array.from(document.body.children).forEach((el) => {
-        if (el !== context.overlayRoot && el.getAttribute("inert") === null) {
+        if (el !== overlayRoot && el.getAttribute("inert") === null) {
           el.setAttribute("inert", "");
-          originalInert.push(el);
+          originalInert.push(el.id || el.tagName);
         }
       });
+      const focusableEls = Array.from(div.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'));
+      if (focusableEls.length > 0) {
+        const firstFocusable = focusableEls[0];
+        const lastFocusable = focusableEls[focusableEls.length - 1];
+        const trapFocus = (e2) => {
+          if (e2.key !== "Tab")
+            return;
+          if (e2.shiftKey) {
+            if (document.activeElement === firstFocusable) {
+              lastFocusable.focus();
+              e2.preventDefault();
+            }
+          } else if (document.activeElement === lastFocusable) {
+            firstFocusable.focus();
+            e2.preventDefault();
+          }
+        };
+        div.addEventListener("keydown", trapFocus);
+        requestAnimationFrame(() => firstFocusable.focus());
+      }
     }
-    let timeoutId;
-    if (dismiss?.timeoutMs) {
-      timeoutId = setTimeout(() => {
-        handle.destroy();
-      }, dismiss.timeoutMs);
-    }
-    const focusableEls = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    if (focusableEls.length > 0) {
-      requestAnimationFrame(() => focusableEls[0].focus());
-    }
-    requestAnimationFrame(() => {
-      scrimEl.style.opacity = "1";
-      modal.style.opacity = "1";
-      modal.style.transform = "translate(-50%, -50%) scale(1)";
-    });
-    context.publishEvent("action.applied", {
-      id: context.generateId(),
-      kind: "overlays:modal",
-      size: size2,
-      blocking
-    });
+    const attachTrigger = () => {
+      if (opts.trigger === "hover") {
+        const enter = () => {
+          div.style.visibility = "visible";
+          div.style.opacity = "1";
+        };
+        const leave = () => {
+          div.style.visibility = "hidden";
+          div.style.opacity = "0";
+        };
+        div.style.visibility = "hidden";
+        div.style.opacity = "0";
+        div.style.transition = "opacity 200ms ease, visibility 200ms";
+        anchorEl.addEventListener("mouseenter", enter);
+        anchorEl.addEventListener("mouseleave", leave);
+        anchorEl.addEventListener("focus", enter);
+        anchorEl.addEventListener("blur", leave);
+        return () => {
+          anchorEl.removeEventListener("mouseenter", enter);
+          anchorEl.removeEventListener("mouseleave", leave);
+          anchorEl.removeEventListener("focus", enter);
+          anchorEl.removeEventListener("blur", leave);
+        };
+      }
+      if (opts.trigger === "click") {
+        const toggle = () => {
+          const isVisible = div.style.visibility === "visible";
+          if (isVisible) {
+            handle.destroy();
+          } else {
+            div.style.visibility = "visible";
+            div.style.opacity = "1";
+          }
+        };
+        div.style.visibility = "hidden";
+        div.style.opacity = "0";
+        div.style.transition = "opacity 200ms ease, visibility 200ms";
+        anchorEl.addEventListener("click", toggle);
+        return () => anchorEl.removeEventListener("click", toggle);
+      }
+      div.style.opacity = "0";
+      div.style.transition = "opacity 200ms ease";
+      requestAnimationFrame(() => {
+        div.style.opacity = "1";
+      });
+      return () => {
+      };
+    };
+    const removeTrigger = attachTrigger();
     const handle = {
+      el: div,
       destroy() {
-        if (timeoutId) {
-          clearTimeout(timeoutId);
-        }
+        cleanup();
+        removeTrigger();
         window.removeEventListener("keydown", onKey);
-        scrimEl.removeEventListener("click", onScrimClick);
         actionBtns.forEach((btn) => btn.removeEventListener("click", actionHandler));
-        originalInert.forEach((el) => el.removeAttribute("inert"));
-        modal.style.opacity = "0";
-        modal.style.transform = "translate(-50%, -50%) scale(0.95)";
-        scrimEl.style.opacity = "0";
-        setTimeout(() => {
-          modal.remove();
-          scrimEl.remove();
-        }, 200);
-        context.publishEvent("action.modal_dismissed", {
-          actionClicked
-        });
-      }
-    };
-    return {
-      cleanup: () => {
-        handle.destroy();
+        if (opts.blocking) {
+          Array.from(document.body.children).forEach((el) => {
+            if (el !== overlayRoot) {
+              el.removeAttribute("inert");
+            }
+          });
+        }
+        div.style.opacity = "0";
+        setTimeout(() => div.remove(), 200);
       }
     };
-  };
+    return handle;
+  }
 
   // ../adaptives/adaptive-overlays/dist/runtime.js
   var executeHighlight = async (action, context) => {
@@ -43319,7 +43312,7 @@ var SyntrologieSDK = (() => {
     if (!anchorEl) {
       throw new Error(`Anchor not found: ${action.anchorId}`);
     }
-    const content = action.content;
+    const { content } = action;
     let html2 = "";
     if (content.title) {
       html2 += `<div class="syntro-tt-title">${sanitizeHtml2(content.title)}</div>`;
@@ -43428,7 +43421,7 @@ var SyntrologieSDK = (() => {
     if (!step.route) return true;
     const currentRoute = getCurrentRoute();
     if (step.route.includes("*")) {
-      const pattern = new RegExp("^" + step.route.replace(/\*/g, ".*") + "$");
+      const pattern = new RegExp(`^${step.route.replace(/\*/g, ".*")}$`);
       return pattern.test(currentRoute);
     }
     return currentRoute === step.route;
@@ -43760,7 +43753,7 @@ var SyntrologieSDK = (() => {
         });
         return { valid: false, errors, warnings: [] };
       }
-      const kind = action.kind;
+      const { kind } = action;
       if (!kind || typeof kind !== "string") {
         errors.push({
           code: "MISSING_KIND",
@@ -43871,7 +43864,7 @@ var SyntrologieSDK = (() => {
       });
       return { valid: false, errors, warnings };
     }
-    const kind = action.kind;
+    const { kind } = action;
     if (!kind || typeof kind !== "string") {
       errors.push({
         code: "MISSING_KIND",
@@ -44420,9 +44413,7 @@ var SyntrologieSDK = (() => {
         // Allow composite executors (like tours) to execute nested actions
         applyAction: apply,
         // Allow composite executors to subscribe to events
-        subscribeEvent: eventBus ? (name, callback) => {
-          return eventBus.subscribe({ names: [name] }, (event) => callback(event.props));
-        } : void 0
+        subscribeEvent: eventBus ? (name, callback) => eventBus.subscribe({ names: [name] }, (event) => callback(event.props)) : void 0
       };
     }
     async function executeMountWidget(action, context) {
@@ -44616,18 +44607,6 @@ var SyntrologieSDK = (() => {
     };
   }
 
-  // src/surfaces/types.ts
-  function getSlotType(slot) {
-    if (slot.startsWith("inline:")) return "inline";
-    if (slot.startsWith("adjacent:")) return "adjacent";
-    return "static";
-  }
-  function getSlotAnchorId(slot) {
-    if (slot.startsWith("inline:")) return slot.slice(7);
-    if (slot.startsWith("adjacent:")) return slot.slice(9);
-    return null;
-  }
-
   // src/hostPatcher/core/sanitizer.ts
   function sanitizeWithFallback(html2) {
     const hasNative = typeof window.Sanitizer === "function";
@@ -44689,6 +44668,18 @@ var SyntrologieSDK = (() => {
     return tpl.innerHTML = root.firstChild ? tpl.innerHTML : tpl.innerHTML;
   }
 
+  // src/surfaces/types.ts
+  function getSlotType(slot) {
+    if (slot.startsWith("inline:")) return "inline";
+    if (slot.startsWith("adjacent:")) return "adjacent";
+    return "static";
+  }
+  function getSlotAnchorId(slot) {
+    if (slot.startsWith("inline:")) return slot.slice(7);
+    if (slot.startsWith("adjacent:")) return slot.slice(9);
+    return null;
+  }
+
   // src/surfaces/positioning.ts
   var STATIC_SLOT_STYLES = {
     drawer_right: {
@@ -45348,11 +45339,9 @@ var SyntrologieSDK = (() => {
       },
       // Events access
       events: {
-        subscribe: (callback) => {
-          return runtime3.events.subscribe((event) => {
-            callback(event);
-          });
-        },
+        subscribe: (callback) => runtime3.events.subscribe((event) => {
+          callback(event);
+        }),
         publish: (name, props) => {
           runtime3.events.publish(name, {
             ...props,
@@ -46266,27 +46255,6 @@ var SyntrologieSDK = (() => {
     return runtime3;
   }
 
-  // src/token.ts
-  var TOKEN_PREFIX = "syn_";
-  function decodeToken(token) {
-    if (!token.startsWith(TOKEN_PREFIX)) {
-      throw new Error("Invalid Syntro token: must start with 'syn_'");
-    }
-    const base64 = token.slice(TOKEN_PREFIX.length);
-    const standardBase64 = base64.replace(/-/g, "+").replace(/_/g, "/");
-    const json = atob(standardBase64);
-    const payload = JSON.parse(json);
-    if (payload.v !== 1) {
-      throw new Error(`Unsupported token version: ${payload.v}`);
-    }
-    return payload;
-  }
-  function encodeToken(payload) {
-    const json = JSON.stringify(payload);
-    const base64 = btoa(json).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
-    return TOKEN_PREFIX + base64;
-  }
-
   // src/experiments/registry.ts
   var adapters = {
     growthbook: (config) => createGrowthBookClient({
@@ -46304,21 +46272,6 @@ var SyntrologieSDK = (() => {
     return factory(config);
   }
 
-  // src/telemetry/registry.ts
-  var adapters2 = {
-    posthog: (config) => createPostHogClient(config),
-    noop: () => createNoopClient()
-  };
-  function createTelemetryClient(provider, config) {
-    const factory = adapters2[provider];
-    if (!factory) {
-      throw new Error(
-        `Unknown telemetry provider: ${provider}. Supported: ${Object.keys(adapters2).join(", ")}`
-      );
-    }
-    return factory(config);
-  }
-
   // src/fetchers/cdnFetcher.ts
   var ALLOWED_CDN_HOSTS = ["cdn.syntrologie.com", "localhost", "127.0.0.1"];
   function validateCdnUrl(url) {
@@ -46483,6 +46436,42 @@ var SyntrologieSDK = (() => {
     return factory(options);
   }
 
+  // src/telemetry/registry.ts
+  var adapters2 = {
+    posthog: (config) => createPostHogClient(config),
+    noop: () => createNoopClient()
+  };
+  function createTelemetryClient(provider, config) {
+    const factory = adapters2[provider];
+    if (!factory) {
+      throw new Error(
+        `Unknown telemetry provider: ${provider}. Supported: ${Object.keys(adapters2).join(", ")}`
+      );
+    }
+    return factory(config);
+  }
+
+  // src/token.ts
+  var TOKEN_PREFIX = "syn_";
+  function decodeToken(token) {
+    if (!token.startsWith(TOKEN_PREFIX)) {
+      throw new Error("Invalid Syntro token: must start with 'syn_'");
+    }
+    const base64 = token.slice(TOKEN_PREFIX.length);
+    const standardBase64 = base64.replace(/-/g, "+").replace(/_/g, "/");
+    const json = atob(standardBase64);
+    const payload = JSON.parse(json);
+    if (payload.v !== 1) {
+      throw new Error(`Unsupported token version: ${payload.v}`);
+    }
+    return payload;
+  }
+  function encodeToken(payload) {
+    const json = JSON.stringify(payload);
+    const base64 = btoa(json).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
+    return TOKEN_PREFIX + base64;
+  }
+
   // src/bootstrap.ts
   function getEnvVar(name) {
     if (typeof process !== "undefined" && process.env) {
@@ -46565,7 +46554,7 @@ var SyntrologieSDK = (() => {
     debug("Syntro Bootstrap", "====== INIT ======");
     debug("Syntro Bootstrap", "Options:", {
       hasToken: !!options.token,
-      tokenPrefix: options.token?.slice(0, 15) + "...",
+      tokenPrefix: `${options.token?.slice(0, 15)}...`,
       hasCanvasOptions: !!options.canvas
     });
     const editorMode = isEditorMode();