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

package/dist/smart-canvas.js

@@ -13082,8 +13082,19 @@ var SyntrologieSDK = (() => {
       } };
     }
     const sanitizedHtml = sanitizeHtml(action.html);
+    const dedupAttr = "data-syntro-insert-label";
+    const label = action.label;
+    if (label) {
+      const escapedLabel = CSS.escape(label);
+      const searchRoot = anchorEl.parentElement ?? anchorEl;
+      const existing = searchRoot.querySelector(`[${dedupAttr}="${escapedLabel}"]`);
+      if (existing)
+        existing.remove();
+    }
     const container = document.createElement("div");
     container.setAttribute("data-syntro-action-id", context.generateId());
+    if (label)
+      container.setAttribute(dedupAttr, label);
     container.innerHTML = sanitizedHtml;
     let originalContent = null;
     switch (action.position) {
@@ -16449,26 +16460,40 @@ var SyntrologieSDK = (() => {
     }
     const attachTrigger = () => {
       if (opts.trigger === "hover") {
-        const enter = () => {
+        let hideTimeout = null;
+        const show = () => {
+          if (hideTimeout) {
+            clearTimeout(hideTimeout);
+            hideTimeout = null;
+          }
           div.style.visibility = "visible";
           div.style.opacity = "1";
         };
-        const leave = () => {
-          div.style.visibility = "hidden";
-          div.style.opacity = "0";
+        const scheduleHide = () => {
+          hideTimeout = setTimeout(() => {
+            div.style.visibility = "hidden";
+            div.style.opacity = "0";
+            hideTimeout = null;
+          }, 100);
         };
         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);
+        anchorEl.addEventListener("mouseenter", show);
+        anchorEl.addEventListener("mouseleave", scheduleHide);
+        div.addEventListener("mouseenter", show);
+        div.addEventListener("mouseleave", scheduleHide);
+        anchorEl.addEventListener("focus", show);
+        anchorEl.addEventListener("blur", scheduleHide);
         return () => {
-          anchorEl.removeEventListener("mouseenter", enter);
-          anchorEl.removeEventListener("mouseleave", leave);
-          anchorEl.removeEventListener("focus", enter);
-          anchorEl.removeEventListener("blur", leave);
+          if (hideTimeout)
+            clearTimeout(hideTimeout);
+          anchorEl.removeEventListener("mouseenter", show);
+          anchorEl.removeEventListener("mouseleave", scheduleHide);
+          div.removeEventListener("mouseenter", show);
+          div.removeEventListener("mouseleave", scheduleHide);
+          anchorEl.removeEventListener("focus", show);
+          anchorEl.removeEventListener("blur", scheduleHide);
         };
       }
       if (opts.trigger === "click") {
@@ -16803,11 +16828,26 @@ var SyntrologieSDK = (() => {
       return { cleanup: () => {
       } };
     }
+    const existing = anchorEl.getAttribute("data-syntro-highlight");
+    if (existing) {
+      const prev = context.overlayRoot.querySelectorAll(".syntro-spotlight-scrim, .syntro-spotlight-ring");
+      prev.forEach((el) => el.remove());
+    }
+    anchorEl.setAttribute("data-syntro-highlight", "true");
+    let ringColor = action.style?.color;
+    if (!ringColor) {
+      try {
+        const primary = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")?.trim();
+        if (primary)
+          ringColor = primary;
+      } catch {
+      }
+    }
     const handle = showHighlight(anchorEl, context.overlayRoot, {
       paddingPx: action.style?.paddingPx ?? 12,
       radiusPx: action.style?.radiusPx ?? 12,
       scrimOpacity: action.style?.scrimOpacity ?? 0.55,
-      ringColor: action.style?.color,
+      ringColor,
       blocking: action.blocking ?? false,
       onClickOutside: action.onClickOutside ?? true,
       onEsc: action.onEsc ?? true
@@ -16820,6 +16860,7 @@ var SyntrologieSDK = (() => {
     return {
       cleanup: () => {
         handle.destroy();
+        anchorEl.removeAttribute("data-syntro-highlight");
       }
     };
   };
@@ -18517,7 +18558,7 @@ var SyntrologieSDK = (() => {
     };
     const renderItems = (items) => items.map((q2, index2) => (0, import_jsx_runtime4.jsx)(FAQItem, { item: q2, isExpanded: expandedIds.has(q2.config.id), isHighlighted: highlightId === q2.config.id, isLast: index2 === items.length - 1, onToggle: () => handleToggle(q2.config.id), theme: resolvedTheme, feedbackConfig, feedbackValue: feedbackState.get(q2.config.id), onFeedback: handleFeedback }, q2.config.id));
     if (visibleQuestions.length === 0) {
-      return (0, import_jsx_runtime4.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: (0, import_jsx_runtime4.jsx)("div", { style: emptyStateStyle, children: "No FAQ questions available." }) });
+      return (0, import_jsx_runtime4.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: (0, import_jsx_runtime4.jsx)("div", { style: emptyStateStyle, children: "You're all set for now! We'll surface answers here when they're relevant to what you're doing." }) });
     }
     return (0, import_jsx_runtime4.jsxs)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: [config.searchable && (0, import_jsx_runtime4.jsxs)("div", { style: baseStyles.searchWrapper, children: [(0, import_jsx_runtime4.jsx)("style", { children: `[data-adaptive-id="${instanceId}"] input::placeholder { color: var(--sc-content-search-color, inherit); opacity: 0.7; }` }), (0, import_jsx_runtime4.jsx)("input", { type: "text", placeholder: "Search questions...", value: searchQuery, onChange: (e2) => setSearchQuery(e2.target.value), style: searchInputStyle })] }), (0, import_jsx_runtime4.jsx)("div", { style: baseStyles.accordion, children: hasCategories ? Array.from(categoryGroups.entries()).map(([category, items]) => (0, import_jsx_runtime4.jsxs)(import_react4.default.Fragment, { children: [category && (0, import_jsx_runtime4.jsx)("div", { style: categoryHeaderStyle, "data-category-header": category, children: category }), renderItems(items)] }, category ?? "__ungrouped")) : renderItems(filteredQuestions) }), config.searchable && filteredQuestions.length === 0 && searchQuery && (0, import_jsx_runtime4.jsxs)("div", { style: { ...baseStyles.noResults, ...themeStyles[resolvedTheme].emptyState }, children: ['No questions found matching "', searchQuery, '"'] })] });
   }
@@ -18947,7 +18988,7 @@ var SyntrologieSDK = (() => {
     };
     const renderItems = (items) => items.map((tip, index2) => (0, import_jsx_runtime5.jsx)(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), isLast: index2 === items.length - 1, onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, theme: resolvedTheme }, tip.config.id));
     if (visibleTips.length === 0) {
-      return (0, import_jsx_runtime5.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: (0, import_jsx_runtime5.jsx)("div", { style: emptyStateStyle, children: "No navigation tips available." }) });
+      return (0, import_jsx_runtime5.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: (0, import_jsx_runtime5.jsx)("div", { style: emptyStateStyle, children: "You're all set for now! We'll share helpful tips here when they're relevant to what you're doing." }) });
     }
     return (0, import_jsx_runtime5.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: (0, import_jsx_runtime5.jsx)("div", { style: baseStyles2.accordion, children: hasCategories ? Array.from(categoryGroups.entries()).map(([category, items]) => (0, import_jsx_runtime5.jsxs)(import_react5.default.Fragment, { children: [category && (0, import_jsx_runtime5.jsx)("div", { style: categoryHeaderStyle, "data-category-header": category, children: category }), renderItems(items)] }, category ?? "__ungrouped")) : renderItems(visibleTips) }) });
   }
@@ -19244,7 +19285,7 @@ var SyntrologieSDK = (() => {
   }
 
   // src/version.ts
-  var SDK_VERSION = "2.4.0-canary.24";
+  var SDK_VERSION = "2.4.0-canary.26";
 
   // src/types.ts
   var SDK_SCHEMA_VERSION = "2.0";
@@ -20788,7 +20829,10 @@ var SyntrologieSDK = (() => {
       background: withAlpha(slateGrey[1], 0.6),
       blur: "blur(24px)",
       border: "none",
-      width: "clamp(380px, 25vw, 520px)"
+      width: "clamp(380px, 25vw, 520px)",
+      transitionDuration: "300ms",
+      transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+      transitionFade: "6%"
     },
     launcher: {
       background: button.primary.backgroundDefault,
@@ -20868,7 +20912,10 @@ var SyntrologieSDK = (() => {
       background: withAlpha(slateGrey[12], 0.7),
       blur: "blur(24px)",
       border: "none",
-      width: "clamp(380px, 25vw, 520px)"
+      width: "clamp(380px, 25vw, 520px)",
+      transitionDuration: "300ms",
+      transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+      transitionFade: "6%"
     },
     launcher: {
       background: brand[3],
@@ -21288,10 +21335,12 @@ ${cssRules}
   var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
   function WidgetMount({ widgetId, props }) {
     const runtime7 = useRuntime();
-    const containerRef = (0, import_react13.useRef)(null);
+    const parentRef = (0, import_react13.useRef)(null);
     const handleRef = (0, import_react13.useRef)(null);
     const registry = runtime7?.widgets;
     const widgetAvailable = registry?.has(widgetId) ?? false;
+    const propsRef = (0, import_react13.useRef)(props);
+    propsRef.current = props;
     const [, forceUpdate] = (0, import_react13.useReducer)((x2) => x2 + 1, 0);
     (0, import_react13.useEffect)(() => {
       if (!registry || widgetAvailable) return;
@@ -21302,14 +21351,26 @@ ${cssRules}
       });
     }, [registry, widgetId, widgetAvailable]);
     (0, import_react13.useEffect)(() => {
-      if (!containerRef.current || !registry || !widgetAvailable) return;
-      const handle = registry.mount(widgetId, containerRef.current, props);
+      if (!parentRef.current || !registry || !widgetAvailable) return;
+      const container = document.createElement("div");
+      container.style.width = "100%";
+      container.style.minHeight = "40px";
+      parentRef.current.appendChild(container);
+      const handle = registry.mount(widgetId, container, propsRef.current);
       handleRef.current = handle;
       return () => {
         handle.unmount();
         handleRef.current = null;
+        container.remove();
       };
-    }, [registry, widgetId, props, widgetAvailable]);
+    }, [registry, widgetId, widgetAvailable]);
+    const propsJson = JSON.stringify(props);
+    const prevPropsJsonRef = (0, import_react13.useRef)(propsJson);
+    (0, import_react13.useEffect)(() => {
+      if (prevPropsJsonRef.current === propsJson) return;
+      prevPropsJsonRef.current = propsJson;
+      handleRef.current?.update(propsRef.current);
+    }, [propsJson]);
     if (!registry || !registry.has(widgetId)) {
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "div",
@@ -21327,7 +21388,7 @@ ${cssRules}
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: containerRef, style: { width: "100%", minHeight: "40px" } });
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: parentRef });
   }
   function TileCard({
     config,
@@ -21603,14 +21664,17 @@ ${cssRules}
     const isFocused = displayMode === "focused";
     const isRight = config.canvas.position === "right";
     const isPush = config.canvas.layout === "push";
+    const canvasBorder = config.canvas.border ?? "none";
     const containerRef = (0, import_react14.useRef)(null);
     const zIndex = 2147483600;
     (0, import_react14.useEffect)(() => {
       if (!isPush) return;
       const root = document.documentElement;
       const prop = isRight ? "marginRight" : "marginLeft";
+      const duration = config.canvas.transitionDuration ?? "300ms";
+      const easing = config.canvas.transitionEasing ?? "cubic-bezier(0.16, 1, 0.3, 1)";
       const prevTransition = root.style.transition;
-      root.style.transition = `${prop} 340ms cubic-bezier(0.16, 1, 0.3, 1)`;
+      root.style.transition = `${prop} ${duration} ${easing}`;
       if (isOpen) {
         const width = containerRef.current?.offsetWidth ?? 380;
         root.style[prop] = `${width}px`;
@@ -21621,7 +21685,7 @@ ${cssRules}
         root.style[prop] = "";
         root.style.transition = prevTransition;
       };
-    }, [isPush, isOpen, isRight]);
+    }, [isPush, isOpen, isRight, config.canvas.transitionDuration, config.canvas.transitionEasing]);
     (0, import_react14.useEffect)(() => {
       if (!isPush || !isOpen) return;
       const container = containerRef.current;
@@ -21642,19 +21706,28 @@ ${cssRules}
       maxHeight: "100%",
       pointerEvents: "auto",
       opacity: isOpen ? 1 : 0,
-      transition: isOpen ? "transform 340ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease-out" : "transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-in",
+      transition: (() => {
+        const dur = config.canvas.transitionDuration ?? "300ms";
+        const ease = config.canvas.transitionEasing ?? "cubic-bezier(0.16, 1, 0.3, 1)";
+        return isOpen ? `transform ${dur} ${ease}, opacity ${dur} ease-out` : `transform ${dur} ${ease}, opacity ${dur} ease-in`;
+      })(),
       color: "var(--sc-overlay-text-color)",
-      // Standard mode: no tint, just blur with a tight fade mask at the leading edge
-      // Focused mode: full frosted glass
-      background: isFocused ? "var(--sc-canvas-background)" : "var(--sc-canvas-background, transparent)",
-      backdropFilter: isFocused ? `${config.canvas.blur ?? "blur(24px)"} saturate(1.2)` : "blur(6px)",
-      WebkitBackdropFilter: isFocused ? `${config.canvas.blur ?? "blur(24px)"} saturate(1.2)` : "blur(6px)",
-      // Tight fade mask so blur cuts off sharply at the leading edge
-      ...!isFocused ? {
-        maskImage: isRight ? "linear-gradient(to right, transparent, black 6%)" : "linear-gradient(to left, transparent, black 6%)",
-        WebkitMaskImage: isRight ? "linear-gradient(to right, transparent, black 6%)" : "linear-gradient(to left, transparent, black 6%)"
-      } : {},
-      border: "none",
+      background: "var(--sc-canvas-background)",
+      // Standard mode: config blur only. Focused mode: config blur + saturate boost.
+      ...(() => {
+        const blur = config.canvas.blur ?? "blur(24px)";
+        const filter = isFocused && blur !== "none" ? `${blur} saturate(1.2)` : blur;
+        return { backdropFilter: filter, WebkitBackdropFilter: filter };
+      })(),
+      // Tight fade mask so blur cuts off sharply at the leading edge.
+      // Disabled when a visible border is configured (mask would fade the border).
+      ...(() => {
+        if (isFocused || canvasBorder && canvasBorder !== "none") return {};
+        const fade = config.canvas.transitionFade ?? "6%";
+        const mask = isRight ? `linear-gradient(to right, transparent, black ${fade})` : `linear-gradient(to left, transparent, black ${fade})`;
+        return { maskImage: mask, WebkitMaskImage: mask };
+      })(),
+      border: canvasBorder,
       borderRadius: "var(--sc-overlay-border-radius, 0)",
       boxShadow: "none",
       // Transform logic
@@ -21938,7 +22011,7 @@ ${cssRules}
         ),
         portalRoot
       ),
-      isOpen ? (0, import_react_dom.createPortal)(content, portalRoot) : null
+      (0, import_react_dom.createPortal)(content, portalRoot)
     ] });
   }
 
@@ -22187,6 +22260,7 @@ ${cssRules}
     }, [controller, hasContent, configState.isLoading]);
     const batchHandleRef = (0, import_react16.useRef)(initialBatchHandle ?? null);
     const adoptedInitialRef = (0, import_react16.useRef)(!!initialBatchHandle);
+    const runVersionRef = (0, import_react16.useRef)(0);
     (0, import_react16.useEffect)(() => {
       if (!runtime7?.actions) return;
       if (adoptedInitialRef.current) {
@@ -22195,7 +22269,8 @@ ${cssRules}
         }
         return;
       }
-      let cancelled = false;
+      const version = ++runVersionRef.current;
+      const stale = () => version !== runVersionRef.current;
       const run = async () => {
         if (batchHandleRef.current) {
           try {
@@ -22205,17 +22280,17 @@ ${cssRules}
           }
           batchHandleRef.current = null;
         }
-        if (cancelled) return;
+        if (stale()) return;
         if (configState.actions.length > 0) {
           try {
             const handle = await runtime7.actions.applyBatch(configState.actions);
-            if (cancelled) {
+            if (stale()) {
               await handle.revertAll();
             } else {
               batchHandleRef.current = handle;
             }
           } catch (err) {
-            if (!cancelled) {
+            if (!stale()) {
               console.error("[SmartCanvasApp] Failed to apply actions:", err);
             }
           }
@@ -22223,7 +22298,6 @@ ${cssRules}
       };
       run();
       return () => {
-        cancelled = true;
         if (batchHandleRef.current) {
           batchHandleRef.current.revertAll().catch((err) => {
             console.error("[SmartCanvasApp] Failed to revert actions on cleanup:", err);
@@ -36049,7 +36123,10 @@ ${cssRules}
     background: external_exports.string().optional(),
     blur: external_exports.string().optional(),
     border: external_exports.string().optional(),
-    width: external_exports.string().optional()
+    width: external_exports.string().optional(),
+    transitionDuration: external_exports.string().optional(),
+    transitionEasing: external_exports.string().optional(),
+    transitionFade: external_exports.string().optional()
   });
   var LauncherElementConfigZ = external_exports.object({
     background: external_exports.string().optional(),
@@ -36152,7 +36229,17 @@ ${cssRules}
     actions: external_exports.array(external_exports.any()),
     theme: CanvasThemeConfigZ.optional(),
     launcher: LauncherConfigZ.optional(),
-    verificationSteps: external_exports.array(external_exports.string()).optional()
+    meta: external_exports.object({
+      verificationSteps: external_exports.array(
+        external_exports.union([
+          external_exports.string(),
+          external_exports.object({
+            text: external_exports.string(),
+            check: ConditionZ.optional()
+          })
+        ])
+      ).optional()
+    }).passthrough().optional()
   }).strict();
 
   // src/actions/schema.ts
@@ -36792,7 +36879,7 @@ ${cssRules}
     switch (condition.type) {
       case "page_url": {
         const { url } = condition;
-        const currentUrl = context.page.url;
+        const currentUrl = context.page.url.split("?")[0].split("#")[0];
         const pattern = url.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*");
         const regex = new RegExp(`^${pattern}$`);
         return regex.test(currentUrl);
@@ -38469,7 +38556,7 @@ ${cssRules}
   function matchRoutePattern(pathname, pattern) {
     const normalizedPattern = pattern.replace(/\/$/, "") || "/";
     if (pathname === normalizedPattern) return true;
-    const regexPattern = normalizedPattern.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*\*/g, ".*").replace(/\*/g, "[^/]*").replace(/:[^/]+/g, "[^/]+");
+    const regexPattern = normalizedPattern.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*").replace(/:[^/]+/g, "[^/]+");
     const regex = new RegExp(`^${regexPattern}$`);
     return regex.test(pathname);
   }
@@ -39262,7 +39349,7 @@ ${cssRules}
   }
 
   // src/index.ts
-  var RUNTIME_SDK_BUILD = true ? `${"2026-03-04T00:05:33.583Z"} (${"00e3189890"})` : "dev";
+  var RUNTIME_SDK_BUILD = true ? `${"2026-03-04T23:23:37.890Z"} (${"a49ba3d7ef"})` : "dev";
   if (typeof window !== "undefined") {
     console.log(`[Syntro Runtime] Build: ${RUNTIME_SDK_BUILD}`);
     const existing = window.SynOS;