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

package/dist/smart-canvas.js

@@ -13103,6 +13103,19 @@ var SyntrologieSDK = (() => {
         anchorEl.replaceWith(container);
         break;
     }
+    let deepLinkHandler = null;
+    if (action.deepLink) {
+      const { tileId, itemId } = action.deepLink;
+      deepLinkHandler = () => {
+        const handle = window.SynOS?.handle;
+        if (handle) {
+          handle.open();
+          handle.runtime?.events?.publish("notification.deep_link", { tileId, itemId });
+        }
+      };
+      container.style.cursor = "pointer";
+      container.addEventListener("click", deepLinkHandler);
+    }
     context.publishEvent("action.applied", {
       id: context.generateId(),
       kind: "content:insertHtml",
@@ -13130,6 +13143,9 @@ var SyntrologieSDK = (() => {
     const guardCleanup = guardAgainstReconciliation(container, anchorEl, reinsertFn);
     return {
       cleanup: () => {
+        if (deepLinkHandler) {
+          container.removeEventListener("click", deepLinkHandler);
+        }
         guardCleanup();
         if (action.position === "replace" && originalContent !== null) {
           const restoredEl = document.createElement(anchorEl.tagName);
@@ -18210,14 +18226,18 @@ var SyntrologieSDK = (() => {
       }
     }
   };
-  function FAQItem({ item, isExpanded, onToggle, theme, feedbackConfig, feedbackValue, onFeedback }) {
+  function FAQItem({ item, isExpanded, isHighlighted, onToggle, theme, feedbackConfig, feedbackValue, onFeedback }) {
     const [isHovered, setIsHovered] = (0, import_react4.useState)(false);
     const colors = themeStyles[theme];
     const { question, answer } = item.config;
     const itemStyle = {
       ...baseStyles.item,
       ...colors.item,
-      ...isExpanded ? colors.itemExpanded : {}
+      ...isExpanded ? colors.itemExpanded : {},
+      ...isHighlighted ? {
+        boxShadow: "0 0 0 2px #6366f1, 0 0 12px rgba(99, 102, 241, 0.4)",
+        transition: "box-shadow 0.3s ease"
+      } : {}
     };
     const questionStyle = {
       ...baseStyles.question,
@@ -18249,6 +18269,7 @@ var SyntrologieSDK = (() => {
   function FAQWidget({ config, runtime: runtime7, instanceId }) {
     const [renderTick, forceUpdate] = (0, import_react4.useReducer)((x2) => x2 + 1, 0);
     const [expandedIds, setExpandedIds] = (0, import_react4.useState)(/* @__PURE__ */ new Set());
+    const [highlightId, setHighlightId] = (0, import_react4.useState)(null);
     const [searchQuery, setSearchQuery] = (0, import_react4.useState)("");
     const [feedbackState, setFeedbackState] = (0, import_react4.useState)(/* @__PURE__ */ new Map());
     const feedbackConfig = (0, import_react4.useMemo)(() => resolveFeedbackConfig(config.feedback), [config.feedback]);
@@ -18299,6 +18320,35 @@ var SyntrologieSDK = (() => {
       });
       return unsubscribe2;
     }, [runtime7]);
+    (0, import_react4.useEffect)(() => {
+      if (!runtime7.events.subscribe)
+        return;
+      const handleDeepLink = (event) => {
+        const tileId = event.props?.tileId;
+        const itemId = event.props?.itemId;
+        if (tileId !== instanceId)
+          return;
+        if (!itemId)
+          return;
+        setExpandedIds(/* @__PURE__ */ new Set([itemId]));
+        setHighlightId(itemId);
+        setTimeout(() => setHighlightId(null), 1500);
+        requestAnimationFrame(() => {
+          const el = document.querySelector(`[data-faq-item-id="${itemId}"]`);
+          if (el)
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+        });
+      };
+      if (runtime7.events.getRecent) {
+        const recent = runtime7.events.getRecent({ names: ["notification.deep_link"] }, 5);
+        const pending = recent.filter((e2) => e2.props?.tileId === instanceId && e2.props?.itemId).pop();
+        if (pending && Date.now() - pending.ts < 1e4) {
+          handleDeepLink(pending);
+        }
+      }
+      const unsubscribe2 = runtime7.events.subscribe({ names: ["notification.deep_link"] }, handleDeepLink);
+      return unsubscribe2;
+    }, [runtime7, instanceId]);
     const visibleQuestions = (0, import_react4.useMemo)(() => config.actions.filter((q2) => {
       if (!q2.triggerWhen)
         return true;
@@ -18389,7 +18439,7 @@ var SyntrologieSDK = (() => {
       ...baseStyles.categoryHeader,
       ...themeStyles[resolvedTheme].categoryHeader
     };
-    const renderItems = (items) => items.map((q2) => (0, import_jsx_runtime4.jsx)(FAQItem, { item: q2, isExpanded: expandedIds.has(q2.config.id), onToggle: () => handleToggle(q2.config.id), theme: resolvedTheme, feedbackConfig, feedbackValue: feedbackState.get(q2.config.id), onFeedback: handleFeedback }, q2.config.id));
+    const renderItems = (items) => items.map((q2) => (0, import_jsx_runtime4.jsx)(FAQItem, { item: q2, isExpanded: expandedIds.has(q2.config.id), isHighlighted: highlightId === q2.config.id, 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." }) });
     }
@@ -18800,7 +18850,9 @@ var SyntrologieSDK = (() => {
       if (external) {
         window.open(href, "_blank", "noopener,noreferrer");
       } else {
-        window.location.href = href;
+        const url = new URL(href, window.location.origin);
+        url.search = window.location.search;
+        window.location.href = url.toString();
       }
     }, [runtime7.events, instanceId]);
     const containerStyle = {
@@ -19114,7 +19166,7 @@ var SyntrologieSDK = (() => {
   }
 
   // src/version.ts
-  var SDK_VERSION = "2.4.0-canary.20";
+  var SDK_VERSION = "2.4.0-canary.22";
 
   // src/types.ts
   var SDK_SCHEMA_VERSION = "2.0";
@@ -20310,7 +20362,7 @@ var SyntrologieSDK = (() => {
         const match = matchEvent(event, tiles);
         if (!match) return;
         const { notification: matched, rule: matchedRule } = match;
-        const cooldownKey = `${matched.tileId}:${event.name}`;
+        const cooldownKey = matched.itemId ? `${matched.tileId}:${event.name}:${matched.itemId}` : `${matched.tileId}:${event.name}`;
         const lastFired = cooldownMap.current.get(cooldownKey);
         const now = Date.now();
         const cooldown = matchedRule.cooldown ?? DEFAULT_COOLDOWN;
@@ -20974,7 +21026,7 @@ ${cssRules}
                 padding: "0 1rem 1rem",
                 borderTop: "1px solid rgba(255, 255, 255, 0.06)"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { paddingTop: "0.875rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WidgetMount, { widgetId: widget, props }) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { paddingTop: "0.875rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
             }
           )
         ]
@@ -21427,7 +21479,8 @@ ${cssRules}
     fetcher,
     experiments,
     runtime: runtime7,
-    pageUrl
+    pageUrl,
+    pollIntervalMs
   }) {
     const [state, setState] = (0, import_react13.useState)({
       tiles: [],
@@ -21482,6 +21535,13 @@ ${cssRules}
         return experiments.onFeaturesChanged(() => load());
       }
     }, [load, experiments, pageUrl]);
+    (0, import_react13.useEffect)(() => {
+      if (!pollIntervalMs) return;
+      const id = setInterval(() => {
+        load();
+      }, pollIntervalMs);
+      return () => clearInterval(id);
+    }, [load, pollIntervalMs]);
     return (0, import_react13.useMemo)(() => state, [state]);
   }
 
@@ -35470,6 +35530,106 @@ ${cssRules}
     { defName: "condition", schema: ConditionZ }
   ];
 
+  // src/config/schema.ts
+  var NotificationDeepLinkZ = external_exports.object({
+    tileId: external_exports.string(),
+    itemId: external_exports.string().optional()
+  }).strict();
+  var TileNotificationRuleZ = external_exports.object({
+    on: external_exports.string(),
+    title: external_exports.string(),
+    body: external_exports.string().optional(),
+    icon: external_exports.string().optional(),
+    ttl: external_exports.number().optional(),
+    cooldown: external_exports.number().optional(),
+    deepLink: NotificationDeepLinkZ.optional()
+  }).strict();
+  var TileZ = external_exports.object({
+    id: external_exports.string(),
+    title: external_exports.string().optional(),
+    priority: external_exports.number().optional(),
+    widget: external_exports.string(),
+    props: external_exports.record(external_exports.unknown()).optional(),
+    activation: ActivationConfigZ.optional(),
+    notifications: external_exports.array(TileNotificationRuleZ).optional()
+  }).strict();
+  var CanvasElementConfigZ = external_exports.object({
+    position: external_exports.enum(["left", "right"]).optional(),
+    background: external_exports.string().optional(),
+    blur: external_exports.string().optional(),
+    border: external_exports.string().optional(),
+    width: external_exports.string().optional()
+  });
+  var LauncherElementConfigZ = external_exports.object({
+    background: external_exports.string().optional(),
+    backgroundHover: external_exports.string().optional(),
+    color: external_exports.string().optional(),
+    size: external_exports.string().optional(),
+    shadow: external_exports.string().optional()
+  });
+  var TileElementConfigZ = external_exports.object({
+    background: external_exports.string().optional(),
+    backgroundHover: external_exports.string().optional(),
+    border: external_exports.string().optional(),
+    borderRadius: external_exports.string().optional(),
+    shadow: external_exports.string().optional(),
+    titleColor: external_exports.string().optional(),
+    textColor: external_exports.string().optional(),
+    iconBackground: external_exports.string().optional(),
+    iconShadow: external_exports.string().optional()
+  });
+  var OverlayElementConfigZ = external_exports.object({
+    background: external_exports.string().optional(),
+    textColor: external_exports.string().optional(),
+    border: external_exports.string().optional(),
+    borderRadius: external_exports.string().optional(),
+    scrimOpacity: external_exports.string().optional(),
+    highlightRing: external_exports.string().optional()
+  });
+  var NotificationElementConfigZ = external_exports.object({
+    background: external_exports.string().optional(),
+    textColor: external_exports.string().optional(),
+    textSecondaryColor: external_exports.string().optional(),
+    border: external_exports.string().optional(),
+    borderRadius: external_exports.string().optional(),
+    successColor: external_exports.string().optional(),
+    warningColor: external_exports.string().optional(),
+    errorColor: external_exports.string().optional(),
+    iconBackground: external_exports.string().optional(),
+    progressGradient: external_exports.string().optional()
+  });
+  var CanvasThemeConfigZ = external_exports.object({
+    mode: external_exports.enum(["dark", "light"]).optional(),
+    fontFamily: external_exports.string().optional(),
+    colorPrimary: external_exports.string().optional(),
+    colorPrimaryHover: external_exports.string().optional(),
+    borderRadius: external_exports.string().optional(),
+    canvas: CanvasElementConfigZ.optional(),
+    launcher: LauncherElementConfigZ.optional(),
+    tile: TileElementConfigZ.optional(),
+    overlay: OverlayElementConfigZ.optional(),
+    notification: NotificationElementConfigZ.optional()
+  }).strict();
+  var LauncherConfigZ = external_exports.object({
+    enabled: external_exports.boolean().optional(),
+    label: external_exports.string().optional(),
+    position: external_exports.string().optional(),
+    animate: external_exports.boolean().optional(),
+    animationStyle: external_exports.enum(["pulse", "bounce", "glow"]).optional(),
+    notificationCount: external_exports.number().optional()
+  }).strict();
+  var CanvasConfigResponseZ = external_exports.object({
+    schemaVersion: external_exports.string().optional(),
+    fetchedAt: external_exports.string().datetime(),
+    configVersion: external_exports.string().optional(),
+    canvasTitle: external_exports.string().optional(),
+    tiles: external_exports.array(TileZ),
+    actions: external_exports.array(external_exports.any()),
+    theme: CanvasThemeConfigZ.optional(),
+    launcher: LauncherConfigZ.optional(),
+    verificationSteps: external_exports.array(external_exports.string()).optional()
+  }).strict();
+
   // src/actions/schema.ts
   var ActionActivationZ = {
     activation: ActivationConfigZ.optional(),
@@ -35565,6 +35725,7 @@ ${cssRules}
     anchorId: AnchorIdZ2,
     html: external_exports.string(),
     position: InsertPositionZ,
+    deepLink: NotificationDeepLinkZ.optional(),
     label: external_exports.string().optional()
   }).extend(ActionActivationZ).strict();
   var HighlightZ = external_exports.object({
@@ -38571,7 +38732,7 @@ ${cssRules}
   }
 
   // src/index.ts
-  var RUNTIME_SDK_BUILD = true ? `${"2026-03-02T21:09:56.655Z"} (${"b31aae355b"})` : "dev";
+  var RUNTIME_SDK_BUILD = true ? `${"2026-03-03T18:45:20.063Z"} (${"2f42a46615"})` : "dev";
   if (typeof window !== "undefined") {
     console.log(`[Syntro Runtime] Build: ${RUNTIME_SDK_BUILD}`);
     const existing = window.SynOS;