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

package/dist/actions/schema.js

@@ -31,8 +31,8 @@ import {
   WaitZ,
   WidgetConfigZ,
   coreActionStepSchemas
-} from "../chunk-NM5Y27GX.js";
-import "../chunk-WILWIL6L.js";
+} from "../chunk-R5DNAIRI.js";
+import "../chunk-XDYJ64IN.js";
 import "../chunk-BU4Z6PD7.js";
 export {
   AddClassZ,

package/dist/{chunk-LD22WJ44.js → chunk-E26VPJAS.js}

@@ -124,6 +124,7 @@ function sanitizeHtml(html) {
 
 // ../adaptives/adaptive-content/dist/runtime.js
 var executeInsertHtml = async (action, context) => {
+  var _a2;
   let anchorEl = context.resolveAnchor(action.anchorId);
   if (!anchorEl && context.waitForAnchor) {
     anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
@@ -134,8 +135,19 @@ var executeInsertHtml = async (action, context) => {
     } };
   }
   const sanitizedHtml = sanitizeHtml(action.html);
+  const dedupAttr = "data-syntro-insert-label";
+  const label = action.label;
+  if (label) {
+    const escapedLabel = CSS.escape(label);
+    const searchRoot = (_a2 = anchorEl.parentElement) != null ? _a2 : 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) {
@@ -160,8 +172,8 @@ var executeInsertHtml = async (action, context) => {
   if (action.deepLink) {
     const { tileId, itemId } = action.deepLink;
     deepLinkHandler = () => {
-      var _a2, _b, _c;
-      const handle = (_a2 = window.SynOS) == null ? void 0 : _a2.handle;
+      var _a3, _b, _c;
+      const handle = (_a3 = window.SynOS) == null ? void 0 : _a3.handle;
       if (handle) {
         handle.open();
         (_c = (_b = handle.runtime) == null ? void 0 : _b.events) == null ? void 0 : _c.publish("notification.deep_link", { tileId, itemId });
@@ -2047,26 +2059,40 @@ function showTooltip(anchorEl, overlayRoot, opts) {
   }
   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") {
@@ -2407,7 +2433,7 @@ var WorkflowMountableWidget = {
 
 // ../adaptives/adaptive-overlays/dist/runtime.js
 var executeHighlight = async (action, context) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   let anchorEl = context.resolveAnchor(action.anchorId);
   if (!anchorEl && context.waitForAnchor) {
     anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
@@ -2417,14 +2443,29 @@ var executeHighlight = async (action, context) => {
     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 = (_a2 = action.style) == null ? void 0 : _a2.color;
+  if (!ringColor) {
+    try {
+      const primary = (_b = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")) == null ? void 0 : _b.trim();
+      if (primary)
+        ringColor = primary;
+    } catch {
+    }
+  }
   const handle = showHighlight(anchorEl, context.overlayRoot, {
-    paddingPx: (_b = (_a2 = action.style) == null ? void 0 : _a2.paddingPx) != null ? _b : 12,
-    radiusPx: (_d = (_c = action.style) == null ? void 0 : _c.radiusPx) != null ? _d : 12,
-    scrimOpacity: (_f = (_e = action.style) == null ? void 0 : _e.scrimOpacity) != null ? _f : 0.55,
-    ringColor: (_g = action.style) == null ? void 0 : _g.color,
-    blocking: (_h = action.blocking) != null ? _h : false,
-    onClickOutside: (_i = action.onClickOutside) != null ? _i : true,
-    onEsc: (_j = action.onEsc) != null ? _j : true
+    paddingPx: (_d = (_c = action.style) == null ? void 0 : _c.paddingPx) != null ? _d : 12,
+    radiusPx: (_f = (_e = action.style) == null ? void 0 : _e.radiusPx) != null ? _f : 12,
+    scrimOpacity: (_h = (_g = action.style) == null ? void 0 : _g.scrimOpacity) != null ? _h : 0.55,
+    ringColor,
+    blocking: (_i = action.blocking) != null ? _i : false,
+    onClickOutside: (_j = action.onClickOutside) != null ? _j : true,
+    onEsc: (_k = action.onEsc) != null ? _k : true
   });
   context.publishEvent("action.applied", {
     id: context.generateId(),
@@ -2434,6 +2475,7 @@ var executeHighlight = async (action, context) => {
   return {
     cleanup: () => {
       handle.destroy();
+      anchorEl.removeAttribute("data-syntro-highlight");
     }
   };
 };
@@ -3316,7 +3358,7 @@ function getAntiFlickerSnippet(config = {}) {
 }
 
 // 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";
@@ -4319,10 +4361,12 @@ import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function WidgetMount({ widgetId, props }) {
   var _a2;
   const runtime3 = useRuntime();
-  const containerRef = useRef4(null);
+  const parentRef = useRef4(null);
   const handleRef = useRef4(null);
   const registry = runtime3 == null ? void 0 : runtime3.widgets;
   const widgetAvailable = (_a2 = registry == null ? void 0 : registry.has(widgetId)) != null ? _a2 : false;
+  const propsRef = useRef4(props);
+  propsRef.current = props;
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
   useEffect5(() => {
     if (!registry || widgetAvailable) return;
@@ -4333,14 +4377,27 @@ function WidgetMount({ widgetId, props }) {
     });
   }, [registry, widgetId, widgetAvailable]);
   useEffect5(() => {
-    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 = useRef4(propsJson);
+  useEffect5(() => {
+    var _a3;
+    if (prevPropsJsonRef.current === propsJson) return;
+    prevPropsJsonRef.current = propsJson;
+    (_a3 = handleRef.current) == null ? void 0 : _a3.update(propsRef.current);
+  }, [propsJson]);
   if (!registry || !registry.has(widgetId)) {
     return /* @__PURE__ */ jsxs2(
       "div",
@@ -4358,7 +4415,7 @@ function WidgetMount({ widgetId, props }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx5("div", { ref: containerRef, style: { width: "100%", minHeight: "40px" } });
+  return /* @__PURE__ */ jsx5("div", { ref: parentRef });
 }
 function TileCard({
   config,
@@ -4659,7 +4716,10 @@ var darkDefaults = {
     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,
@@ -4739,7 +4799,10 @@ var lightDefaults = {
     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],
@@ -4941,7 +5004,7 @@ function ShadowCanvasOverlay({
   canvasTitle,
   displayMode = "standard"
 }) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b, _c, _d;
   const [mounted, setMounted] = useState5(false);
   const [launcherPos, setLauncherPos] = useState5(null);
   const dragRef = useRef5(null);
@@ -5063,7 +5126,7 @@ function ShadowCanvasOverlay({
     }
   }, []);
   const onLauncherPointerUp = useCallback4(
-    (_e2) => {
+    (_e) => {
       const drag = dragRef.current;
       dragRef.current = null;
       if (drag && !drag.dragged) {
@@ -5075,17 +5138,20 @@ function ShadowCanvasOverlay({
   const isFocused = displayMode === "focused";
   const isRight = config.canvas.position === "right";
   const isPush = config.canvas.layout === "push";
+  const canvasBorder = (_b = config.canvas.border) != null ? _b : "none";
   const containerRef = useRef5(null);
   const zIndex = 2147483600;
   useEffect7(() => {
-    var _a3, _b2;
+    var _a3, _b2, _c2, _d2;
     if (!isPush) return;
     const root = document.documentElement;
     const prop = isRight ? "marginRight" : "marginLeft";
+    const duration = (_a3 = config.canvas.transitionDuration) != null ? _a3 : "300ms";
+    const easing = (_b2 = config.canvas.transitionEasing) != null ? _b2 : "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 = (_b2 = (_a3 = containerRef.current) == null ? void 0 : _a3.offsetWidth) != null ? _b2 : 380;
+      const width = (_d2 = (_c2 = containerRef.current) == null ? void 0 : _c2.offsetWidth) != null ? _d2 : 380;
       root.style[prop] = `${width}px`;
     } else {
       root.style[prop] = "0px";
@@ -5094,7 +5160,7 @@ function ShadowCanvasOverlay({
       root.style[prop] = "";
       root.style.transition = prevTransition;
     };
-  }, [isPush, isOpen, isRight]);
+  }, [isPush, isOpen, isRight, config.canvas.transitionDuration, config.canvas.transitionEasing]);
   useEffect7(() => {
     if (!isPush || !isOpen) return;
     const container = containerRef.current;
@@ -5115,19 +5181,31 @@ function ShadowCanvasOverlay({
     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: (() => {
+      var _a3, _b2;
+      const dur = (_a3 = config.canvas.transitionDuration) != null ? _a3 : "300ms";
+      const ease = (_b2 = config.canvas.transitionEasing) != null ? _b2 : "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 ? `${(_b = config.canvas.blur) != null ? _b : "blur(24px)"} saturate(1.2)` : "blur(6px)",
-    WebkitBackdropFilter: isFocused ? `${(_c = config.canvas.blur) != null ? _c : "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.
+    ...(() => {
+      var _a3;
+      const blur = (_a3 = config.canvas.blur) != null ? _a3 : "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).
+    ...(() => {
+      var _a3;
+      if (isFocused || canvasBorder && canvasBorder !== "none") return {};
+      const fade = (_a3 = config.canvas.transitionFade) != null ? _a3 : "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
@@ -5256,7 +5334,7 @@ function ShadowCanvasOverlay({
                 notifications,
                 onDismiss: dismissNotification,
                 onClickNotification: handleNotificationClick,
-                position: (_d = config.canvas.position) != null ? _d : "right"
+                position: (_c = config.canvas.position) != null ? _c : "right"
               }
             ),
             /* @__PURE__ */ jsxs3(
@@ -5286,7 +5364,7 @@ function ShadowCanvasOverlay({
                   padding: 0,
                   border: "none",
                   backgroundColor: "var(--sc-launcher-background)",
-                  cursor: ((_e = dragRef.current) == null ? void 0 : _e.dragged) ? "grabbing" : "pointer",
+                  cursor: ((_d = dragRef.current) == null ? void 0 : _d.dragged) ? "grabbing" : "pointer",
                   touchAction: "none"
                 },
                 onPointerDown: onLauncherPointerDown,
@@ -5413,7 +5491,7 @@ function ShadowCanvasOverlay({
       ),
       portalRoot
     ),
-    isOpen ? createPortal(content, portalRoot) : null
+    createPortal(content, portalRoot)
   ] });
 }
 
@@ -5667,6 +5745,7 @@ function SmartCanvasAppInner({
   }, [controller, hasContent, configState.isLoading]);
   const batchHandleRef = useRef7(initialBatchHandle != null ? initialBatchHandle : null);
   const adoptedInitialRef = useRef7(!!initialBatchHandle);
+  const runVersionRef = useRef7(0);
   useEffect9(() => {
     if (!(runtime3 == null ? void 0 : runtime3.actions)) return;
     if (adoptedInitialRef.current) {
@@ -5675,7 +5754,8 @@ function SmartCanvasAppInner({
       }
       return;
     }
-    let cancelled = false;
+    const version = ++runVersionRef.current;
+    const stale = () => version !== runVersionRef.current;
     const run = async () => {
       if (batchHandleRef.current) {
         try {
@@ -5685,17 +5765,17 @@ function SmartCanvasAppInner({
         }
         batchHandleRef.current = null;
       }
-      if (cancelled) return;
+      if (stale()) return;
       if (configState.actions.length > 0) {
         try {
           const handle = await runtime3.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);
           }
         }
@@ -5703,7 +5783,6 @@ function SmartCanvasAppInner({
     };
     run();
     return () => {
-      cancelled = true;
       if (batchHandleRef.current) {
         batchHandleRef.current.revertAll().catch((err) => {
           console.error("[SmartCanvasApp] Failed to revert actions on cleanup:", err);
@@ -8682,7 +8761,7 @@ function evaluateCondition(condition, evalContext) {
   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);
@@ -10358,7 +10437,7 @@ function matchesRouteFilter(url, filter) {
 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);
 }
@@ -11249,4 +11328,4 @@ export {
   encodeToken,
   Syntro
 };
-//# sourceMappingURL=chunk-LD22WJ44.js.map
+//# sourceMappingURL=chunk-E26VPJAS.js.map