@syntrologie/runtime-sdk 2.4.1 → 2.6.0-canary.1

package/dist/index.js

@@ -30,10 +30,9 @@ import {
   appRegistry,
   applyStaticSlotStyles,
   base,
-  border,
-  brand,
   cleanupAppContext,
   createActionEngine,
+  createAnchorResolver,
   createAppContext,
   createAppLoader,
   createCanvasConfigFetcher,
@@ -101,9 +100,10 @@ import {
   validateAction,
   validateActions,
   widgetRegistry
-} from "./chunk-QGWATS3Z.js";
+} from "./chunk-Q4WGXNKC.js";
 import {
   AddClassZ,
+  AnchorIdZ,
   BadgePositionZ,
   BadgeZ,
   CtaButtonZ,
@@ -134,18 +134,21 @@ import {
   WaitZ,
   WidgetConfigZ,
   coreActionStepSchemas
-} from "./chunk-OGTCFYR3.js";
+} from "./chunk-R5DNAIRI.js";
+import "./chunk-XDYJ64IN.js";
 import {
   ActivationConfigZ,
   AnchorVisibleConditionZ,
   ConditionZ,
   CooldownActiveConditionZ,
+  CounterDefZ,
   DecisionStrategyZ,
   DismissedConditionZ,
   EventCountConditionZ,
   EventOccurredConditionZ,
   ExternalStrategyZ,
   FrequencyLimitConditionZ,
+  MatchOpZ,
   ModelStrategyZ,
   PageUrlConditionZ,
   RouteConditionZ,
@@ -155,12 +158,13 @@ import {
   ScoreStrategyZ,
   SessionMetricConditionZ,
   StateEqualsConditionZ,
+  TriggerWhenZ,
   ViewportConditionZ,
   decisionSchemas,
   validateActivationConfig,
   validateCondition,
   validateStrategy
-} from "./chunk-4NYS7GAW.js";
+} from "./chunk-BU4Z6PD7.js";
 
 // src/index.ts
 import React4 from "react";
@@ -656,12 +660,12 @@ function getFeedbackPrompt(feedbackConfig) {
 }
 var baseStyles = {
   container: {
-    fontFamily: "system-ui, -apple-system, sans-serif",
+    fontFamily: "var(--sc-font-family, system-ui, -apple-system, sans-serif)",
     maxWidth: "800px",
     margin: "0 auto"
   },
   searchWrapper: {
-    marginBottom: "16px"
+    marginBottom: "8px"
   },
   searchInput: {
     width: "100%",
@@ -669,38 +673,41 @@ var baseStyles = {
     borderRadius: "8px",
     fontSize: "14px",
     outline: "none",
-    transition: "border-color 0.15s ease"
+    transition: "border-color 0.15s ease",
+    backgroundColor: "var(--sc-content-search-background)",
+    color: "var(--sc-content-search-color)"
   },
   accordion: {
     display: "flex",
     flexDirection: "column",
-    gap: "8px"
+    gap: "var(--sc-content-item-gap, 6px)"
   },
   item: {
-    borderRadius: "8px",
+    borderRadius: "var(--sc-content-border-radius, 8px)",
     overflow: "hidden",
     transition: "box-shadow 0.15s ease"
   },
   question: {
     width: "100%",
-    padding: "16px 20px",
+    padding: "var(--sc-content-item-padding, 12px 16px)",
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
     border: "none",
     cursor: "pointer",
-    fontSize: "15px",
+    fontSize: "var(--sc-content-item-font-size, 15px)",
     fontWeight: 500,
     textAlign: "left",
     transition: "background-color 0.15s ease"
   },
   chevron: {
-    fontSize: "18px",
-    transition: "transform 0.2s ease"
+    fontSize: "20px",
+    transition: "transform 0.2s ease",
+    color: "var(--sc-content-chevron-color, currentColor)"
   },
   answer: {
-    padding: "0 20px 16px 20px",
-    fontSize: "14px",
+    padding: "var(--sc-content-body-padding, 0 16px 12px 16px)",
+    fontSize: "var(--sc-content-body-font-size, 14px)",
     lineHeight: 1.6,
     overflow: "hidden",
     transition: "max-height 0.2s ease, padding 0.2s ease"
@@ -716,12 +723,12 @@ var baseStyles = {
     marginBottom: "8px"
   },
   categoryHeader: {
-    fontSize: "13px",
+    fontSize: "var(--sc-content-category-font-size, 12px)",
     fontWeight: 700,
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    padding: "12px 4px 6px 4px",
-    marginTop: "8px"
+    padding: "var(--sc-content-category-padding, 8px 4px 4px 4px)",
+    marginTop: "var(--sc-content-category-gap, 4px)"
   },
   feedback: {
     display: "flex",
@@ -759,30 +766,28 @@ var baseStyles = {
 var themeStyles = {
   light: {
     container: {
-      backgroundColor: base.white,
-      color: slateGrey[1]
+      backgroundColor: "transparent",
+      color: "inherit"
     },
     searchInput: {
-      backgroundColor: slateGrey[12],
-      border: `1px solid ${slateGrey[11]}`,
-      color: slateGrey[1]
+      border: `1px solid ${slateGrey[11]}`
     },
     item: {
-      backgroundColor: slateGrey[12],
-      border: `1px solid ${slateGrey[11]}`
+      backgroundColor: "var(--sc-content-background)",
+      border: "var(--sc-content-border)"
     },
     itemExpanded: {
       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)"
     },
     question: {
       backgroundColor: "transparent",
-      color: slateGrey[1]
+      color: "var(--sc-content-text-color)"
     },
     questionHover: {
-      backgroundColor: slateGrey[12]
+      backgroundColor: "var(--sc-content-background-hover)"
     },
     answer: {
-      color: slateGrey[6]
+      color: "var(--sc-content-text-secondary-color)"
     },
     category: {
       backgroundColor: purple[8],
@@ -800,30 +805,28 @@ var themeStyles = {
   },
   dark: {
     container: {
-      backgroundColor: slateGrey[1],
-      color: slateGrey[12]
+      backgroundColor: "transparent",
+      color: "inherit"
     },
     searchInput: {
-      backgroundColor: slateGrey[3],
-      border: `1px solid ${slateGrey[5]}`,
-      color: slateGrey[12]
+      border: `1px solid ${slateGrey[5]}`
     },
     item: {
-      backgroundColor: slateGrey[3],
-      border: `1px solid ${slateGrey[5]}`
+      backgroundColor: "var(--sc-content-background)",
+      border: "var(--sc-content-border)"
     },
     itemExpanded: {
-      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
     },
     question: {
       backgroundColor: "transparent",
-      color: slateGrey[12]
+      color: "var(--sc-content-text-color)"
     },
     questionHover: {
-      backgroundColor: slateGrey[5]
+      backgroundColor: "var(--sc-content-background-hover)"
     },
     answer: {
-      color: slateGrey[8]
+      color: "var(--sc-content-text-secondary-color)"
     },
     category: {
       backgroundColor: purple[0],
@@ -840,14 +843,19 @@ var themeStyles = {
     }
   }
 };
-function FAQItem({ item, isExpanded, onToggle, theme, feedbackConfig, feedbackValue, onFeedback }) {
+function FAQItem({ item, isExpanded, isHighlighted, isLast, onToggle, theme, feedbackConfig, feedbackValue, onFeedback }) {
   const [isHovered, setIsHovered] = useState2(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"
+    } : {},
+    ...!isLast ? { borderBottom: "var(--sc-content-item-divider, none)" } : {}
   };
   const questionStyle = {
     ...baseStyles.question,
@@ -856,7 +864,7 @@ function FAQItem({ item, isExpanded, onToggle, theme, feedbackConfig, feedbackVa
   };
   const chevronStyle = {
     ...baseStyles.chevron,
-    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)"
+    transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
   };
   const answerStyle = {
     ...baseStyles.answer,
@@ -868,7 +876,7 @@ function FAQItem({ item, isExpanded, onToggle, theme, feedbackConfig, feedbackVa
     ...baseStyles.feedback,
     ...colors.feedbackPrompt
   };
-  return _jsxs2("div", { style: itemStyle, "data-faq-item-id": item.config.id, children: [_jsxs2("button", { type: "button", style: questionStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [_jsx2("span", { children: question }), _jsx2("span", { style: chevronStyle, children: "\u25BC" })] }), _jsxs2("div", { style: answerStyle, "aria-hidden": !isExpanded, children: [renderAnswer(answer), isExpanded && feedbackConfig && _jsxs2("div", { style: feedbackStyle, children: [_jsx2("span", { children: getFeedbackPrompt(feedbackConfig) }), _jsx2("button", { type: "button", style: {
+  return _jsxs2("div", { style: itemStyle, "data-faq-item-id": item.config.id, children: [_jsxs2("button", { type: "button", style: questionStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [_jsx2("span", { children: question }), _jsx2("span", { style: chevronStyle, children: "\u203A" })] }), _jsxs2("div", { style: answerStyle, "aria-hidden": !isExpanded, children: [renderAnswer(answer), isExpanded && feedbackConfig && _jsxs2("div", { style: feedbackStyle, children: [_jsx2("span", { children: getFeedbackPrompt(feedbackConfig) }), _jsx2("button", { type: "button", style: {
     ...baseStyles.feedbackButton,
     ...feedbackValue === "up" ? baseStyles.feedbackButtonSelected : {}
   }, "aria-label": "Thumbs up", onClick: () => onFeedback(item.config.id, question, "up"), children: "\u{1F44D}" }), _jsx2("button", { type: "button", style: {
@@ -879,6 +887,7 @@ function FAQItem({ item, isExpanded, onToggle, theme, feedbackConfig, feedbackVa
 function FAQWidget({ config, runtime: runtime7, instanceId }) {
   const [renderTick, forceUpdate] = useReducer((x) => x + 1, 0);
   const [expandedIds, setExpandedIds] = useState2(/* @__PURE__ */ new Set());
+  const [highlightId, setHighlightId] = useState2(null);
   const [searchQuery, setSearchQuery] = useState2("");
   const [feedbackState, setFeedbackState] = useState2(/* @__PURE__ */ new Map());
   const feedbackConfig = useMemo(() => resolveFeedbackConfig(config.feedback), [config.feedback]);
@@ -896,43 +905,6 @@ function FAQWidget({ config, runtime: runtime7, instanceId }) {
       forceUpdate();
     });
   }, [runtime7.accumulator]);
-  useEffect2(() => {
-    var _a, _b;
-    if (!config.scope || !((_a = runtime7.accumulator) == null ? void 0 : _a.register))
-      return;
-    const { events: eventNames, urlContains, props: propFilters } = config.scope;
-    const keys = /* @__PURE__ */ new Set();
-    for (const action of config.actions) {
-      if (((_b = action.showWhen) == null ? void 0 : _b.type) === "rules") {
-        for (const rule of action.showWhen.rules) {
-          for (const cond of rule.conditions) {
-            if (cond.type === "event_count" && cond.key) {
-              keys.add(cond.key);
-            }
-          }
-        }
-      }
-    }
-    for (const key of keys) {
-      runtime7.accumulator.register(key, (event) => {
-        var _a2, _b2, _c;
-        if (!eventNames.includes(event.name))
-          return false;
-        if (urlContains) {
-          const pathname = String((_b2 = (_a2 = event.props) == null ? void 0 : _a2.pathname) != null ? _b2 : "");
-          if (!pathname.includes(urlContains))
-            return false;
-        }
-        if (propFilters) {
-          for (const [k, v] of Object.entries(propFilters)) {
-            if (((_c = event.props) == null ? void 0 : _c[k]) !== v)
-              return false;
-          }
-        }
-        return true;
-      });
-    }
-  }, [config.scope, config.actions, runtime7.accumulator]);
   useEffect2(() => {
     if (!runtime7.events.subscribe)
       return;
@@ -969,10 +941,43 @@ function FAQWidget({ config, runtime: runtime7, instanceId }) {
     });
     return unsubscribe;
   }, [runtime7]);
+  useEffect2(() => {
+    if (!runtime7.events.subscribe)
+      return;
+    const handleDeepLink = (event) => {
+      var _a, _b;
+      const tileId = (_a = event.props) == null ? void 0 : _a.tileId;
+      const itemId = (_b = event.props) == null ? void 0 : _b.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((e) => {
+        var _a, _b;
+        return ((_a = e.props) == null ? void 0 : _a.tileId) === instanceId && ((_b = e.props) == null ? void 0 : _b.itemId);
+      }).pop();
+      if (pending && Date.now() - pending.ts < 1e4) {
+        handleDeepLink(pending);
+      }
+    }
+    const unsubscribe = runtime7.events.subscribe({ names: ["notification.deep_link"] }, handleDeepLink);
+    return unsubscribe;
+  }, [runtime7, instanceId]);
   const visibleQuestions = useMemo(() => config.actions.filter((q) => {
-    if (!q.showWhen)
+    if (!q.triggerWhen)
       return true;
-    const result = runtime7.evaluateSync(q.showWhen);
+    const result = runtime7.evaluateSync(q.triggerWhen);
     return result.value;
   }), [config.actions, runtime7, renderTick]);
   const orderedQuestions = useMemo(() => {
@@ -1066,11 +1071,11 @@ function FAQWidget({ config, runtime: runtime7, instanceId }) {
     ...baseStyles.categoryHeader,
     ...themeStyles[resolvedTheme].categoryHeader
   };
-  const renderItems = (items) => items.map((q) => _jsx2(FAQItem, { item: q, isExpanded: expandedIds.has(q.config.id), onToggle: () => handleToggle(q.config.id), theme: resolvedTheme, feedbackConfig, feedbackValue: feedbackState.get(q.config.id), onFeedback: handleFeedback }, q.config.id));
+  const renderItems = (items) => items.map((q, index) => _jsx2(FAQItem, { item: q, isExpanded: expandedIds.has(q.config.id), isHighlighted: highlightId === q.config.id, isLast: index === items.length - 1, onToggle: () => handleToggle(q.config.id), theme: resolvedTheme, feedbackConfig, feedbackValue: feedbackState.get(q.config.id), onFeedback: handleFeedback }, q.config.id));
   if (visibleQuestions.length === 0) {
-    return _jsx2("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: _jsx2("div", { style: emptyStateStyle, children: "No FAQ questions available." }) });
+    return _jsx2("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: _jsx2("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 _jsxs2("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: [config.searchable && _jsx2("div", { style: baseStyles.searchWrapper, children: _jsx2("input", { type: "text", placeholder: "Search questions...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: searchInputStyle }) }), _jsx2("div", { style: baseStyles.accordion, children: hasCategories ? Array.from(categoryGroups.entries()).map(([category, items]) => _jsxs2(React2.Fragment, { children: [category && _jsx2("div", { style: categoryHeaderStyle, "data-category-header": category, children: category }), renderItems(items)] }, category != null ? category : "__ungrouped")) : renderItems(filteredQuestions) }), config.searchable && filteredQuestions.length === 0 && searchQuery && _jsxs2("div", { style: { ...baseStyles.noResults, ...themeStyles[resolvedTheme].emptyState }, children: ['No questions found matching "', searchQuery, '"'] })] });
+  return _jsxs2("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: [config.searchable && _jsxs2("div", { style: baseStyles.searchWrapper, children: [_jsx2("style", { children: `[data-adaptive-id="${instanceId}"] input::placeholder { color: var(--sc-content-search-color, inherit); opacity: 0.7; }` }), _jsx2("input", { type: "text", placeholder: "Search questions...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: searchInputStyle })] }), _jsx2("div", { style: baseStyles.accordion, children: hasCategories ? Array.from(categoryGroups.entries()).map(([category, items]) => _jsxs2(React2.Fragment, { children: [category && _jsx2("div", { style: categoryHeaderStyle, "data-category-header": category, children: category }), renderItems(items)] }, category != null ? category : "__ungrouped")) : renderItems(filteredQuestions) }), config.searchable && filteredQuestions.length === 0 && searchQuery && _jsxs2("div", { style: { ...baseStyles.noResults, ...themeStyles[resolvedTheme].emptyState }, children: ['No questions found matching "', searchQuery, '"'] })] });
 }
 var FAQMountableWidget = {
   mount(container, config) {
@@ -1128,21 +1133,22 @@ var runtime4 = {
       metadata: {
         name: "FAQ Accordion",
         description: "Collapsible Q&A accordion with search, categories, and feedback",
-        icon: "\u2753"
+        icon: "\u2753",
+        subtitle: "Curated just for you."
       }
     }
   ],
   /**
    * Extract notify watcher entries from tile config props.
    * The runtime evaluates these continuously (even with drawer closed)
-   * and publishes faq:question_revealed when showWhen transitions false → true.
+   * and publishes faq:question_revealed when triggerWhen transitions false → true.
    */
   notifyWatchers(props) {
     var _a;
     const actions = (_a = props.actions) != null ? _a : [];
-    return actions.filter((a) => a.notify && a.showWhen).map((a) => ({
+    return actions.filter((a) => a.notify && a.triggerWhen).map((a) => ({
       id: `faq:${a.config.id}`,
-      strategy: a.showWhen,
+      strategy: a.triggerWhen,
       eventName: "faq:question_revealed",
       eventProps: {
         questionId: a.config.id,
@@ -1208,18 +1214,17 @@ function escapeHtml(str) {
 }
 var baseStyles2 = {
   container: {
-    fontFamily: "system-ui, -apple-system, sans-serif",
-    padding: "8px",
+    fontFamily: "var(--sc-font-family, system-ui, -apple-system, sans-serif)",
     maxWidth: "100%",
     overflow: "hidden"
   },
   accordion: {
     display: "flex",
     flexDirection: "column",
-    gap: "4px"
+    gap: "var(--sc-content-item-gap, 6px)"
   },
   item: {
-    borderRadius: "8px",
+    borderRadius: "var(--sc-content-border-radius, 8px)",
     overflow: "hidden",
     transition: "box-shadow 0.2s ease"
   },
@@ -1228,20 +1233,21 @@ var baseStyles2 = {
     alignItems: "center",
     gap: "8px",
     width: "100%",
-    padding: "12px 16px",
+    padding: "var(--sc-content-item-padding, 12px 16px)",
     border: "none",
     cursor: "pointer",
-    fontSize: "14px",
+    fontSize: "var(--sc-content-item-font-size, 15px)",
     fontWeight: 500,
     fontFamily: "inherit",
     textAlign: "left",
     transition: "background-color 0.15s ease"
   },
   chevron: {
-    fontSize: "10px",
+    fontSize: "20px",
     transition: "transform 0.2s ease",
     marginLeft: "auto",
-    flexShrink: 0
+    flexShrink: 0,
+    color: "var(--sc-content-chevron-color, currentColor)"
   },
   icon: {
     fontSize: "16px",
@@ -1250,10 +1256,10 @@ var baseStyles2 = {
   body: {
     overflow: "hidden",
     transition: "max-height 0.25s ease, padding-bottom 0.25s ease",
-    padding: "0 16px"
+    padding: "var(--sc-content-body-padding, 0 16px 12px 16px)"
   },
   description: {
-    fontSize: "13px",
+    fontSize: "var(--sc-content-body-font-size, 14px)",
     lineHeight: "1.5",
     margin: 0
   },
@@ -1272,11 +1278,11 @@ var baseStyles2 = {
     transition: "background-color 0.15s ease"
   },
   categoryHeader: {
-    fontSize: "11px",
+    fontSize: "var(--sc-content-category-font-size, 12px)",
     fontWeight: 600,
     textTransform: "uppercase",
     letterSpacing: "0.05em",
-    padding: "12px 4px 4px"
+    padding: "var(--sc-content-category-padding, 8px 4px 4px 4px)"
   },
   emptyState: {
     fontSize: "13px",
@@ -1287,29 +1293,29 @@ var baseStyles2 = {
 var themeStyles2 = {
   light: {
     container: {
-      backgroundColor: base.white,
-      color: slateGrey[1]
+      backgroundColor: "transparent",
+      color: "inherit"
     },
     item: {
-      backgroundColor: slateGrey[12],
-      border: `1px solid ${slateGrey[11]}`
+      backgroundColor: "var(--sc-content-background)",
+      border: "var(--sc-content-border)"
     },
     itemExpanded: {
       boxShadow: "0 4px 12px rgba(0, 0, 0, 0.08)"
     },
     header: {
       backgroundColor: "transparent",
-      color: slateGrey[1]
+      color: "var(--sc-content-text-color)"
     },
     headerHover: {
-      backgroundColor: slateGrey[12]
+      backgroundColor: "var(--sc-content-background-hover)"
     },
     body: {
-      color: slateGrey[6]
+      color: "var(--sc-content-text-secondary-color)"
     },
     linkButton: {
-      backgroundColor: purple[8],
-      color: purple[2]
+      backgroundColor: "var(--sc-color-primary, #6366f1)",
+      color: "#ffffff"
     },
     categoryHeader: {
       color: slateGrey[7]
@@ -1320,29 +1326,29 @@ var themeStyles2 = {
   },
   dark: {
     container: {
-      backgroundColor: slateGrey[1],
-      color: slateGrey[12]
+      backgroundColor: "transparent",
+      color: "inherit"
     },
     item: {
-      backgroundColor: slateGrey[3],
-      border: `1px solid ${slateGrey[5]}`
+      backgroundColor: "var(--sc-content-background)",
+      border: "var(--sc-content-border)"
     },
     itemExpanded: {
-      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.3)"
+      boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)"
     },
     header: {
       backgroundColor: "transparent",
-      color: slateGrey[12]
+      color: "var(--sc-content-text-color)"
     },
     headerHover: {
-      backgroundColor: slateGrey[5]
+      backgroundColor: "var(--sc-content-background-hover)"
     },
     body: {
-      color: slateGrey[8]
+      color: "var(--sc-content-text-secondary-color)"
     },
     linkButton: {
-      backgroundColor: purple[0],
-      color: purple[6]
+      backgroundColor: "var(--sc-color-primary, #6366f1)",
+      color: "#ffffff"
     },
     categoryHeader: {
       color: slateGrey[8]
@@ -1352,14 +1358,15 @@ var themeStyles2 = {
     }
   }
 };
-function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
+function NavTipItem({ item, isExpanded, isLast, onToggle, onNavigate, theme }) {
   const [isHovered, setIsHovered] = useState3(false);
   const colors = themeStyles2[theme];
   const { title, description, href, icon, external } = item.config;
   const itemStyle = {
     ...baseStyles2.item,
     ...colors.item,
-    ...isExpanded ? colors.itemExpanded : {}
+    ...isExpanded ? colors.itemExpanded : {},
+    ...!isLast ? { borderBottom: "var(--sc-content-item-divider, none)" } : {}
   };
   const headerStyle = {
     ...baseStyles2.header,
@@ -1368,7 +1375,7 @@ function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
   };
   const chevronStyle = {
     ...baseStyles2.chevron,
-    transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)"
+    transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)"
   };
   const bodyStyle = {
     ...baseStyles2.body,
@@ -1383,7 +1390,7 @@ function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
       onNavigate(href, external != null ? external : false);
     }
   };
-  return _jsxs3("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [_jsxs3("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && _jsx3("span", { style: baseStyles2.icon, children: icon }), _jsx3("span", { children: title }), _jsx3("span", { style: chevronStyle, children: "\u25BC" })] }), _jsxs3("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [_jsx3("p", { style: baseStyles2.description, children: description }), href && _jsxs3("a", { href, onClick: handleLinkClick, style: { ...baseStyles2.linkButton, ...colors.linkButton }, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, children: ["Go ", external ? "\u2197" : "\u2192"] })] })] });
+  return _jsxs3("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [_jsxs3("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && _jsx3("span", { style: baseStyles2.icon, children: icon }), _jsx3("span", { children: title }), _jsx3("span", { style: chevronStyle, children: "\u203A" })] }), _jsxs3("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [_jsx3("p", { style: baseStyles2.description, children: description }), href && _jsxs3("a", { href, onClick: handleLinkClick, style: { ...baseStyles2.linkButton, ...colors.linkButton }, target: external ? "_blank" : void 0, rel: external ? "noopener noreferrer" : void 0, children: ["Go ", external ? "\u2197" : "\u2192"] })] })] });
 }
 function NavWidget({ config, runtime: runtime7, instanceId }) {
   const [renderTick, forceUpdate] = useReducer2((x) => x + 1, 0);
@@ -1402,48 +1409,11 @@ function NavWidget({ config, runtime: runtime7, instanceId }) {
       forceUpdate();
     });
   }, [runtime7.accumulator]);
-  useEffect3(() => {
-    var _a, _b;
-    if (!config.scope || !((_a = runtime7.accumulator) == null ? void 0 : _a.register))
-      return;
-    const { events: eventNames, urlContains, props: propFilters } = config.scope;
-    const keys = /* @__PURE__ */ new Set();
-    for (const action of config.actions) {
-      if (((_b = action.showWhen) == null ? void 0 : _b.type) === "rules") {
-        for (const rule of action.showWhen.rules) {
-          for (const cond of rule.conditions) {
-            if (cond.type === "event_count" && cond.key) {
-              keys.add(cond.key);
-            }
-          }
-        }
-      }
-    }
-    for (const key of keys) {
-      runtime7.accumulator.register(key, (event) => {
-        var _a2, _b2, _c;
-        if (!eventNames.includes(event.name))
-          return false;
-        if (urlContains) {
-          const pathname = String((_b2 = (_a2 = event.props) == null ? void 0 : _a2.pathname) != null ? _b2 : "");
-          if (!pathname.includes(urlContains))
-            return false;
-        }
-        if (propFilters) {
-          for (const [k, v] of Object.entries(propFilters)) {
-            if (((_c = event.props) == null ? void 0 : _c[k]) !== v)
-              return false;
-          }
-        }
-        return true;
-      });
-    }
-  }, [config.scope, config.actions, runtime7.accumulator]);
   const visibleTips = useMemo2(() => config.actions.filter((tip) => {
-    if (!tip.showWhen)
+    if (!tip.triggerWhen)
       return true;
     try {
-      const result = runtime7.evaluateSync(tip.showWhen);
+      const result = runtime7.evaluateSync(tip.triggerWhen);
       return result.value;
     } catch {
       return false;
@@ -1517,7 +1487,9 @@ function NavWidget({ config, runtime: runtime7, instanceId }) {
     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 = {
@@ -1532,9 +1504,9 @@ function NavWidget({ config, runtime: runtime7, instanceId }) {
     ...baseStyles2.emptyState,
     ...themeStyles2[resolvedTheme].emptyState
   };
-  const renderItems = (items) => items.map((tip) => _jsx3(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, theme: resolvedTheme }, tip.config.id));
+  const renderItems = (items) => items.map((tip, index) => _jsx3(NavTipItem, { item: tip, isExpanded: expandedIds.has(tip.config.id), isLast: index === items.length - 1, onToggle: () => handleToggle(tip.config.id), onNavigate: handleNavigate, theme: resolvedTheme }, tip.config.id));
   if (visibleTips.length === 0) {
-    return _jsx3("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: _jsx3("div", { style: emptyStateStyle, children: "No navigation tips available." }) });
+    return _jsx3("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: _jsx3("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 _jsx3("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: _jsx3("div", { style: baseStyles2.accordion, children: hasCategories ? Array.from(categoryGroups.entries()).map(([category, items]) => _jsxs3(React3.Fragment, { children: [category && _jsx3("div", { style: categoryHeaderStyle, "data-category-header": category, children: category }), renderItems(items)] }, category != null ? category : "__ungrouped")) : renderItems(visibleTips) }) });
 }
@@ -1579,7 +1551,9 @@ var executeScrollTo = async (action, context) => {
   var _a, _b, _c, _d;
   const anchorEl = context.resolveAnchor(action.anchorId);
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.error(`[adaptive-nav] Anchor not found for scrollTo, skipping: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
   }
   anchorEl.scrollIntoView({
     behavior: (_a = action.behavior) != null ? _a : "smooth",
@@ -1661,14 +1635,14 @@ var runtime6 = {
   /**
    * Extract notify watcher entries from tile config props.
    * The runtime evaluates these continuously (even with drawer closed)
-   * and publishes nav:tip_revealed when showWhen transitions false → true.
+   * and publishes nav:tip_revealed when triggerWhen transitions false → true.
    */
   notifyWatchers(props) {
     var _a;
     const actions = (_a = props.actions) != null ? _a : [];
-    return actions.filter((a) => a.notify && a.showWhen).map((a) => ({
+    return actions.filter((a) => a.notify && a.triggerWhen).map((a) => ({
       id: `nav:${a.config.id}`,
-      strategy: a.showWhen,
+      strategy: a.triggerWhen,
       eventName: "nav:tip_revealed",
       eventProps: {
         tipId: a.config.id,
@@ -1743,8 +1717,8 @@ function TileWheel({ tiles, intervalMs = 7e3, telemetry }) {
         position: "relative",
         overflow: "hidden",
         borderRadius: "1.5rem",
-        border: `1px solid ${border.primary}`,
-        background: slateGrey[1],
+        border: "var(--sc-tile-border)",
+        background: "var(--sc-tile-background)",
         padding: "1.5rem",
         boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)"
       },
@@ -1770,7 +1744,7 @@ function TileWheel({ tiles, intervalMs = 7e3, telemetry }) {
               height: "0.5rem",
               width: "1.5rem",
               borderRadius: "9999px",
-              background: idx === index ? brand[3] : slateGrey[6],
+              background: idx === index ? "var(--sc-color-primary)" : "var(--sc-tile-text-color)",
               border: "none",
               cursor: "pointer",
               padding: 0
@@ -1859,18 +1833,7 @@ function migrateV1ToV2(config) {
   if (config.tiles && Array.isArray(config.tiles)) {
     migrated.tiles = config.tiles.map((tile) => {
       const migratedTile = { ...tile };
-      if (tile.experiment && !tile.activation) {
-        const exp = tile.experiment;
-        if (exp.featureKey) {
-          migratedTile.activation = {
-            strategy: {
-              type: "external",
-              provider: "growthbook",
-              featureKey: exp.featureKey,
-              fallback: false
-            }
-          };
-        }
+      if (tile.experiment) {
         delete migratedTile.experiment;
       }
       return migratedTile;
@@ -2085,6 +2048,7 @@ export {
   ANIMATION_KEYFRAMES,
   ActivationConfigZ,
   AddClassZ,
+  AnchorIdZ,
   AnchorStateZ,
   AnchorVisibleConditionZ,
   AppRegistry,
@@ -2097,6 +2061,7 @@ export {
   ConditionZ,
   ContextManager,
   CooldownActiveConditionZ,
+  CounterDefZ,
   CtaButtonZ,
   DEFAULT_COOLDOWN,
   DEFAULT_TTL,
@@ -2118,6 +2083,7 @@ export {
   InsertHtmlZ,
   InsertPositionZ,
   MAX_VISIBLE_TOASTS,
+  MatchOpZ,
   ModalContentZ,
   ModalZ,
   ModelStrategyZ,
@@ -2175,6 +2141,7 @@ export {
   TooltipZ,
   TourStepForSchemaZ,
   TourZ,
+  TriggerWhenZ,
   ViewportConditionZ,
   ViewportContextZ,
   WaitZ,
@@ -2186,6 +2153,7 @@ export {
   runtime as contentRuntime,
   coreActionStepSchemas,
   createActionEngine,
+  createAnchorResolver,
   createAppContext,
   createAppLoader,
   createCanvasConfigFetcher,