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

package/dist/smart-canvas.js

@@ -16803,11 +16803,26 @@ var SyntrologieSDK = (() => {
       return { cleanup: () => {
       } };
     }
+    const existing = anchorEl.getAttribute("data-syntro-highlight");
+    if (existing) {
+      const prev = context.overlayRoot.querySelectorAll(".syntro-spotlight-scrim, .syntro-spotlight-ring");
+      prev.forEach((el) => el.remove());
+    }
+    anchorEl.setAttribute("data-syntro-highlight", "true");
+    let ringColor = action.style?.color;
+    if (!ringColor) {
+      try {
+        const primary = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")?.trim();
+        if (primary)
+          ringColor = primary;
+      } catch {
+      }
+    }
     const handle = showHighlight(anchorEl, context.overlayRoot, {
       paddingPx: action.style?.paddingPx ?? 12,
       radiusPx: action.style?.radiusPx ?? 12,
       scrimOpacity: action.style?.scrimOpacity ?? 0.55,
-      ringColor: action.style?.color,
+      ringColor,
       blocking: action.blocking ?? false,
       onClickOutside: action.onClickOutside ?? true,
       onEsc: action.onEsc ?? true
@@ -16820,6 +16835,7 @@ var SyntrologieSDK = (() => {
     return {
       cleanup: () => {
         handle.destroy();
+        anchorEl.removeAttribute("data-syntro-highlight");
       }
     };
   };
@@ -18517,7 +18533,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 +18963,7 @@ var SyntrologieSDK = (() => {
     };
     const renderItems = (items) => items.map((tip, index2) => (0, import_jsx_runtime5.jsx)(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), isLast: index2 === items.length - 1, onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, theme: resolvedTheme }, tip.config.id));
     if (visibleTips.length === 0) {
-      return (0, import_jsx_runtime5.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: (0, import_jsx_runtime5.jsx)("div", { style: emptyStateStyle, children: "No navigation tips available." }) });
+      return (0, import_jsx_runtime5.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: (0, import_jsx_runtime5.jsx)("div", { style: emptyStateStyle, children: "You're all set for now! We'll share helpful tips here when they're relevant to what you're doing." }) });
     }
     return (0, import_jsx_runtime5.jsx)("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: (0, import_jsx_runtime5.jsx)("div", { style: baseStyles2.accordion, children: hasCategories ? Array.from(categoryGroups.entries()).map(([category, items]) => (0, import_jsx_runtime5.jsxs)(import_react5.default.Fragment, { children: [category && (0, import_jsx_runtime5.jsx)("div", { style: categoryHeaderStyle, "data-category-header": category, children: category }), renderItems(items)] }, category ?? "__ungrouped")) : renderItems(visibleTips) }) });
   }
@@ -19244,7 +19260,7 @@ var SyntrologieSDK = (() => {
   }
 
   // src/version.ts
-  var SDK_VERSION = "2.4.0-canary.24";
+  var SDK_VERSION = "2.4.0-canary.25";
 
   // src/types.ts
   var SDK_SCHEMA_VERSION = "2.0";
@@ -20788,7 +20804,10 @@ var SyntrologieSDK = (() => {
       background: withAlpha(slateGrey[1], 0.6),
       blur: "blur(24px)",
       border: "none",
-      width: "clamp(380px, 25vw, 520px)"
+      width: "clamp(380px, 25vw, 520px)",
+      transitionDuration: "300ms",
+      transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+      transitionFade: "6%"
     },
     launcher: {
       background: button.primary.backgroundDefault,
@@ -20868,7 +20887,10 @@ var SyntrologieSDK = (() => {
       background: withAlpha(slateGrey[12], 0.7),
       blur: "blur(24px)",
       border: "none",
-      width: "clamp(380px, 25vw, 520px)"
+      width: "clamp(380px, 25vw, 520px)",
+      transitionDuration: "300ms",
+      transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+      transitionFade: "6%"
     },
     launcher: {
       background: brand[3],
@@ -21603,14 +21625,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 +21646,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 +21667,28 @@ ${cssRules}
       maxHeight: "100%",
       pointerEvents: "auto",
       opacity: isOpen ? 1 : 0,
-      transition: isOpen ? "transform 340ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease-out" : "transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-in",
+      transition: (() => {
+        const dur = config.canvas.transitionDuration ?? "300ms";
+        const ease = config.canvas.transitionEasing ?? "cubic-bezier(0.16, 1, 0.3, 1)";
+        return isOpen ? `transform ${dur} ${ease}, opacity ${dur} ease-out` : `transform ${dur} ${ease}, opacity ${dur} ease-in`;
+      })(),
       color: "var(--sc-overlay-text-color)",
-      // Standard mode: no tint, just blur with a tight fade mask at the leading edge
-      // Focused mode: full frosted glass
-      background: isFocused ? "var(--sc-canvas-background)" : "var(--sc-canvas-background, transparent)",
-      backdropFilter: isFocused ? `${config.canvas.blur ?? "blur(24px)"} saturate(1.2)` : "blur(6px)",
-      WebkitBackdropFilter: isFocused ? `${config.canvas.blur ?? "blur(24px)"} saturate(1.2)` : "blur(6px)",
-      // Tight fade mask so blur cuts off sharply at the leading edge
-      ...!isFocused ? {
-        maskImage: isRight ? "linear-gradient(to right, transparent, black 6%)" : "linear-gradient(to left, transparent, black 6%)",
-        WebkitMaskImage: isRight ? "linear-gradient(to right, transparent, black 6%)" : "linear-gradient(to left, transparent, black 6%)"
-      } : {},
-      border: "none",
+      background: "var(--sc-canvas-background)",
+      // Standard mode: config blur only. Focused mode: config blur + saturate boost.
+      ...(() => {
+        const blur = config.canvas.blur ?? "blur(24px)";
+        const filter = isFocused && blur !== "none" ? `${blur} saturate(1.2)` : blur;
+        return { backdropFilter: filter, WebkitBackdropFilter: filter };
+      })(),
+      // Tight fade mask so blur cuts off sharply at the leading edge.
+      // Disabled when a visible border is configured (mask would fade the border).
+      ...(() => {
+        if (isFocused || canvasBorder && canvasBorder !== "none") return {};
+        const fade = config.canvas.transitionFade ?? "6%";
+        const mask = isRight ? `linear-gradient(to right, transparent, black ${fade})` : `linear-gradient(to left, transparent, black ${fade})`;
+        return { maskImage: mask, WebkitMaskImage: mask };
+      })(),
+      border: canvasBorder,
       borderRadius: "var(--sc-overlay-border-radius, 0)",
       boxShadow: "none",
       // Transform logic
@@ -21938,7 +21972,7 @@ ${cssRules}
         ),
         portalRoot
       ),
-      isOpen ? (0, import_react_dom.createPortal)(content, portalRoot) : null
+      (0, import_react_dom.createPortal)(content, portalRoot)
     ] });
   }
 
@@ -22187,6 +22221,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 +22230,8 @@ ${cssRules}
         }
         return;
       }
-      let cancelled = false;
+      const version = ++runVersionRef.current;
+      const stale = () => version !== runVersionRef.current;
       const run = async () => {
         if (batchHandleRef.current) {
           try {
@@ -22205,17 +22241,17 @@ ${cssRules}
           }
           batchHandleRef.current = null;
         }
-        if (cancelled) return;
+        if (stale()) return;
         if (configState.actions.length > 0) {
           try {
             const handle = await runtime7.actions.applyBatch(configState.actions);
-            if (cancelled) {
+            if (stale()) {
               await handle.revertAll();
             } else {
               batchHandleRef.current = handle;
             }
           } catch (err) {
-            if (!cancelled) {
+            if (!stale()) {
               console.error("[SmartCanvasApp] Failed to apply actions:", err);
             }
           }
@@ -22223,7 +22259,6 @@ ${cssRules}
       };
       run();
       return () => {
-        cancelled = true;
         if (batchHandleRef.current) {
           batchHandleRef.current.revertAll().catch((err) => {
             console.error("[SmartCanvasApp] Failed to revert actions on cleanup:", err);
@@ -36049,7 +36084,10 @@ ${cssRules}
     background: external_exports.string().optional(),
     blur: external_exports.string().optional(),
     border: external_exports.string().optional(),
-    width: external_exports.string().optional()
+    width: external_exports.string().optional(),
+    transitionDuration: external_exports.string().optional(),
+    transitionEasing: external_exports.string().optional(),
+    transitionFade: external_exports.string().optional()
   });
   var LauncherElementConfigZ = external_exports.object({
     background: external_exports.string().optional(),
@@ -36792,7 +36830,7 @@ ${cssRules}
     switch (condition.type) {
       case "page_url": {
         const { url } = condition;
-        const currentUrl = context.page.url;
+        const currentUrl = context.page.url.split("?")[0].split("#")[0];
         const pattern = url.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*");
         const regex = new RegExp(`^${pattern}$`);
         return regex.test(currentUrl);
@@ -38469,7 +38507,7 @@ ${cssRules}
   function matchRoutePattern(pathname, pattern) {
     const normalizedPattern = pattern.replace(/\/$/, "") || "/";
     if (pathname === normalizedPattern) return true;
-    const regexPattern = normalizedPattern.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*\*/g, ".*").replace(/\*/g, "[^/]*").replace(/:[^/]+/g, "[^/]+");
+    const regexPattern = normalizedPattern.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*").replace(/:[^/]+/g, "[^/]+");
     const regex = new RegExp(`^${regexPattern}$`);
     return regex.test(pathname);
   }
@@ -39262,7 +39300,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-04T05:03:35.535Z"} (${"485144000d"})` : "dev";
   if (typeof window !== "undefined") {
     console.log(`[Syntro Runtime] Build: ${RUNTIME_SDK_BUILD}`);
     const existing = window.SynOS;