@syntrologie/adapt-nav 2.4.1 → 2.5.1

package/dist/NavWidget.d.ts

@@ -2,7 +2,7 @@
  * Adaptive Nav - NavWidget Component
  *
  * React component that renders a collapsible navigation tips accordion
- * with per-item conditional visibility based on showWhen decision strategies.
+ * with per-item conditional visibility based on triggerWhen decision strategies.
  *
  * Demonstrates the compositional action pattern where child actions
  * (nav:tip) serve as configuration data for the parent widget.
@@ -13,8 +13,8 @@ import type { NavConfig, NavWidgetProps, NavWidgetRuntime } from './types';
  *
  * This component demonstrates the compositional action pattern:
  * - Parent (NavWidget) receives `config.actions` array
- * - Each action has optional `showWhen` for per-item visibility
- * - Parent evaluates showWhen and filters visible tips
+ * - Each action has optional `triggerWhen` for per-item visibility
+ * - Parent evaluates triggerWhen and filters visible tips
  * - Parent manages expand state and re-rendering on context changes
  */
 export declare function NavWidget({ config, runtime, instanceId }: NavWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/NavWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NavWidget.d.ts","sourceRoot":"","sources":["../src/NavWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,KAAK,EAAE,SAAS,EAAgB,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA4PzF;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,2CAiOxE;AAMD;;GAEG;AACH,eAAO,MAAM,kBAAkB;qBAEhB,WAAW,WACb,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CAiD3E,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"NavWidget.d.ts","sourceRoot":"","sources":["../src/NavWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,KAAK,EAAE,SAAS,EAAgB,cAAc,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA8PzF;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,2CAmMxE;AAMD;;GAEG;AACH,eAAO,MAAM,kBAAkB;qBAEhB,WAAW,WACb,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CAiD3E,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/NavWidget.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Adaptive Nav - NavWidget Component
  *
  * React component that renders a collapsible navigation tips accordion
- * with per-item conditional visibility based on showWhen decision strategies.
+ * with per-item conditional visibility based on triggerWhen decision strategies.
  *
  * Demonstrates the compositional action pattern where child actions
  * (nav:tip) serve as configuration data for the parent widget.
  */
-import { base, purple, slateGrey } from '@syntro/design-system/tokens';
+import { purple, slateGrey } from '@syntro/design-system/tokens';
 import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 // ============================================================================
@@ -27,18 +27,17 @@ function escapeHtml(str) {
 // ============================================================================
 const baseStyles = {
     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',
     },
@@ -47,20 +46,21 @@ const baseStyles = {
         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,
+        color: 'var(--sc-content-chevron-color, currentColor)',
     },
     icon: {
         fontSize: '16px',
@@ -69,10 +69,10 @@ const baseStyles = {
     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,
     },
@@ -91,11 +91,11 @@ const baseStyles = {
         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',
@@ -106,29 +106,29 @@ const baseStyles = {
 const themeStyles = {
     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],
@@ -139,29 +139,29 @@ const themeStyles = {
     },
     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],
@@ -171,7 +171,7 @@ const themeStyles = {
         },
     },
 };
-function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
+function NavTipItem({ item, isExpanded, isLast, onToggle, onNavigate, theme }) {
     const [isHovered, setIsHovered] = useState(false);
     const colors = themeStyles[theme];
     const { title, description, href, icon, external } = item.config;
@@ -179,6 +179,7 @@ function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
         ...baseStyles.item,
         ...colors.item,
         ...(isExpanded ? colors.itemExpanded : {}),
+        ...(!isLast ? { borderBottom: 'var(--sc-content-item-divider, none)' } : {}),
     };
     const headerStyle = {
         ...baseStyles.header,
@@ -187,7 +188,7 @@ function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
     };
     const chevronStyle = {
         ...baseStyles.chevron,
-        transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+        transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
     };
     const bodyStyle = {
         ...baseStyles.body,
@@ -202,7 +203,7 @@ function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
             onNavigate(href, external ?? false);
         }
     };
-    return (_jsxs("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [_jsxs("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && _jsx("span", { style: baseStyles.icon, children: icon }), _jsx("span", { children: title }), _jsx("span", { style: chevronStyle, children: '\u25BC' })] }), _jsxs("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [_jsx("p", { style: baseStyles.description, children: description }), href && (_jsxs("a", { href: href, onClick: handleLinkClick, style: { ...baseStyles.linkButton, ...colors.linkButton }, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, children: ["Go ", external ? '\u2197' : '\u2192'] }))] })] }));
+    return (_jsxs("div", { style: itemStyle, "data-nav-tip-id": item.config.id, children: [_jsxs("button", { type: "button", style: headerStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [icon && _jsx("span", { style: baseStyles.icon, children: icon }), _jsx("span", { children: title }), _jsx("span", { style: chevronStyle, children: '\u203A' })] }), _jsxs("div", { style: bodyStyle, "aria-hidden": !isExpanded, children: [_jsx("p", { style: baseStyles.description, children: description }), href && (_jsxs("a", { href: href, onClick: handleLinkClick, style: { ...baseStyles.linkButton, ...colors.linkButton }, target: external ? '_blank' : undefined, rel: external ? 'noopener noreferrer' : undefined, children: ["Go ", external ? '\u2197' : '\u2192'] }))] })] }));
 }
 // ============================================================================
 // NavWidget Component
@@ -212,8 +213,8 @@ function NavTipItem({ item, isExpanded, onToggle, onNavigate, theme }) {
  *
  * This component demonstrates the compositional action pattern:
  * - Parent (NavWidget) receives `config.actions` array
- * - Each action has optional `showWhen` for per-item visibility
- * - Parent evaluates showWhen and filters visible tips
+ * - Each action has optional `triggerWhen` for per-item visibility
+ * - Parent evaluates triggerWhen and filters visible tips
  * - Parent manages expand state and re-rendering on context changes
  */
 export function NavWidget({ config, runtime, instanceId }) {
@@ -228,7 +229,7 @@ export function NavWidget({ config, runtime, instanceId }) {
         });
         return unsubscribe;
     }, [runtime.context]);
-    // Subscribe to accumulator changes for event_count-based showWhen
+    // Subscribe to accumulator changes for event_count-based triggerWhen
     useEffect(() => {
         if (!runtime.accumulator?.subscribe)
             return;
@@ -236,50 +237,13 @@ export function NavWidget({ config, runtime, instanceId }) {
             forceUpdate();
         });
     }, [runtime.accumulator]);
-    // Register accumulator predicates from scope config
-    useEffect(() => {
-        if (!config.scope || !runtime.accumulator?.register)
-            return;
-        const { events: eventNames, urlContains, props: propFilters } = config.scope;
-        // Scan showWhen conditions for event_count keys
-        const keys = new Set();
-        for (const action of config.actions) {
-            if (action.showWhen?.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) {
-            runtime.accumulator.register(key, (event) => {
-                if (!eventNames.includes(event.name))
-                    return false;
-                if (urlContains) {
-                    const pathname = String(event.props?.pathname ?? '');
-                    if (!pathname.includes(urlContains))
-                        return false;
-                }
-                if (propFilters) {
-                    for (const [k, v] of Object.entries(propFilters)) {
-                        if (event.props?.[k] !== v)
-                            return false;
-                    }
-                }
-                return true;
-            });
-        }
-    }, [config.scope, config.actions, runtime.accumulator]);
-    // Filter visible tips based on per-item showWhen
+    // Filter visible tips based on per-item triggerWhen
     // biome-ignore lint/correctness/useExhaustiveDependencies: renderTick is intentionally included to force re-evaluation when the runtime's mutable context changes (subscribed above via forceUpdate)
     const visibleTips = useMemo(() => config.actions.filter((tip) => {
-        if (!tip.showWhen)
+        if (!tip.triggerWhen)
             return true;
         try {
-            const result = runtime.evaluateSync(tip.showWhen);
+            const result = runtime.evaluateSync(tip.triggerWhen);
             return result.value;
         }
         catch {
@@ -365,7 +329,9 @@ export function NavWidget({ config, runtime, instanceId }) {
             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();
         }
     }, [runtime.events, instanceId]);
     // Compute container styles
@@ -382,10 +348,10 @@ export function NavWidget({ config, runtime, instanceId }) {
         ...themeStyles[resolvedTheme].emptyState,
     };
     // Render a list of nav tip items
-    const renderItems = (items) => items.map((tip) => (_jsx(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) => (_jsx(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)));
     // Empty state
     if (visibleTips.length === 0) {
-        return (_jsx("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: _jsx("div", { style: emptyStateStyle, children: "No navigation tips available." }) }));
+        return (_jsx("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: _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 (_jsx("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-nav", children: _jsx("div", { style: baseStyles.accordion, children: hasCategories
                 ? Array.from(categoryGroups.entries()).map(([category, items]) => (_jsxs(React.Fragment, { children: [category && (_jsx("div", { style: categoryHeaderStyle, "data-category-header": category, children: category })), renderItems(items)] }, category ?? '__ungrouped')))

package/dist/cdn.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,SAA0B,MAAM,UAAU,CAAC;AAGlD;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;2BAsC07Z,CAAC;8BAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAtBp9Z,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;CAQjD,CAAC;AAaF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,SAA0B,MAAM,UAAU,CAAC;AAGlD;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;2BAsCgpZ,CAAC;8BAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAtB1qZ,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;CAQjD,CAAC;AAaF,eAAe,QAAQ,CAAC"}

package/dist/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAoBH,OAAO,EACL,KAAK,gBAAgB,EAKtB,MAAM,SAAS,CAAC;AA0KjB,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CA6XvE;AAED;;GAEG;AACH,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;CAGlB,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAoBH,OAAO,EACL,KAAK,gBAAgB,EAKtB,MAAM,SAAS,CAAC;AAmLjB,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAoZvE;AAED;;GAEG;AACH,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;CAGlB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/editor.js

@@ -6,7 +6,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Displays a scannable list of tip cards with trigger, rationale,
  * and inline editing. Includes detection badges and hover-to-highlight.
  */
-import { DetectionBadge, DismissedSection, EditorBody, EditorCard, EditorFooter, EditorHeader, EditorInput, EditorLayout, EmptyState, GroupHeader, TriggerJourney, useShowWhenStatus, } from '@syntrologie/shared-editor-ui';
+import { DetectionBadge, DismissedSection, EditorBody, EditorCard, EditorFooter, EditorHeader, EditorInput, EditorLayout, EmptyState, GroupHeader, TriggerJourney, useTriggerWhenStatus, } from '@syntrologie/shared-editor-ui';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { describeTrigger, summarizeNavItem } from './summarize';
 import { isOwnAction, } from './types';
@@ -16,13 +16,13 @@ function isRuleStrategy(s) {
         s.type === 'rules' &&
         Array.isArray(s.rules));
 }
-function extractTargetingInfo(showWhen) {
-    if (!showWhen || !isRuleStrategy(showWhen)) {
+function extractTargetingInfo(triggerWhen) {
+    if (!triggerWhen || !isRuleStrategy(triggerWhen)) {
         return { pagePatterns: [], anchorSelectors: [], hasTargeting: false };
     }
     const pagePatterns = new Set();
     const anchorSelectors = new Set();
-    for (const rule of showWhen.rules) {
+    for (const rule of triggerWhen.rules) {
         for (const cond of rule.conditions) {
             const c = cond;
             if (c.type === 'page_url' && typeof c.url === 'string') {
@@ -40,23 +40,32 @@ function extractTargetingInfo(showWhen) {
         hasTargeting,
     };
 }
-function extractFirstPage(showWhen) {
-    const info = extractTargetingInfo(showWhen);
+function extractFirstPage(triggerWhen) {
+    const info = extractTargetingInfo(triggerWhen);
     return info.pagePatterns[0] || null;
 }
-function extractFirstAnchor(showWhen) {
-    const info = extractTargetingInfo(showWhen);
+function extractFirstAnchor(triggerWhen) {
+    const info = extractTargetingInfo(triggerWhen);
     return info.anchorSelectors[0] || null;
 }
+/** Save a pending highlight selector to sessionStorage (inlined to avoid cross-package import). */
+function savePendingHighlight(selector) {
+    try {
+        sessionStorage.setItem('syntro:editor:pending-highlight', selector);
+    }
+    catch {
+        // Silently ignore
+    }
+}
 function flattenItems(config) {
     const actions = (config.actions || []).filter(isOwnAction);
     return actions.map((tip, i) => ({
         key: String(i),
         index: i,
         summary: summarizeNavItem(tip),
-        trigger: describeTrigger(tip.showWhen),
+        trigger: describeTrigger(tip.triggerWhen),
         rationale: tip.rationale,
-        firstAnchor: extractFirstAnchor(tip.showWhen),
+        firstAnchor: extractFirstAnchor(tip.triggerWhen),
         tip,
     }));
 }
@@ -76,7 +85,7 @@ function useDetection(items, getCurrentRoute) {
             const map = new Map();
             const currentPath = getCurrentRoute();
             for (const item of itemsRef.current) {
-                const targeting = extractTargetingInfo(item.tip.showWhen);
+                const targeting = extractTargetingInfo(item.tip.triggerWhen);
                 // Check page match
                 let pageMatch = true;
                 if (targeting.pagePatterns.length > 0) {
@@ -162,12 +171,12 @@ export function NavEditor({ config, onChange, editor }) {
     const activeItems = allItems.filter((item) => !dismissedKeys.has(item.key));
     const dismissedItems = allItems.filter((item) => dismissedKeys.has(item.key));
     const totalLinks = activeItems.length;
-    // Live showWhen status for condition diagnostics
-    const showWhenItems = useMemo(() => allItems.map((item) => ({
+    // Live triggerWhen status for condition diagnostics
+    const triggerWhenItems = useMemo(() => allItems.map((item) => ({
         id: item.key,
-        showWhen: item.tip.showWhen,
+        triggerWhen: item.tip.triggerWhen,
     })), [allItems]);
-    const showWhenStatuses = useShowWhenStatus(showWhenItems);
+    const triggerWhenStatuses = useTriggerWhenStatus(triggerWhenItems);
     const detectionMap = useDetection(allItems, editor.getCurrentRoute);
     const foundCount = activeItems.filter((item) => detectionMap.get(item.key)?.found).length;
     const handleDismiss = useCallback((key) => {
@@ -189,10 +198,12 @@ export function NavEditor({ config, onChange, editor }) {
     const handleCardBodyClick = useCallback((item) => {
         setEditingKey(item.key);
     }, []);
-    const handleTriggerClick = useCallback((item) => {
-        const pageUrl = extractFirstPage(item.tip.showWhen);
+    const handleTriggerClick = useCallback(async (item) => {
+        const pageUrl = extractFirstPage(item.tip.triggerWhen);
         if (pageUrl) {
-            editor.navigateTo(pageUrl);
+            if (item.firstAnchor)
+                savePendingHighlight(item.firstAnchor);
+            await editor.navigateTo(pageUrl);
         }
         if (item.firstAnchor) {
             editor.highlightElement(item.firstAnchor);
@@ -236,6 +247,25 @@ export function NavEditor({ config, onChange, editor }) {
         }
         editor.publish();
     }, [dismissedKeys, typedConfig, onChange, editor]);
+    const handleBadgeClick = useCallback(async (item) => {
+        const detection = detectionMap.get(item.key);
+        if (detection?.found && item.firstAnchor) {
+            editor.highlightElement(item.firstAnchor);
+        }
+        else {
+            const pageUrl = extractFirstPage(item.tip.triggerWhen);
+            if (pageUrl) {
+                if (item.firstAnchor)
+                    savePendingHighlight(item.firstAnchor);
+                await editor.navigateTo(pageUrl);
+                if (item.firstAnchor)
+                    editor.highlightElement(item.firstAnchor);
+            }
+            else if (item.firstAnchor) {
+                editor.highlightElement(item.firstAnchor);
+            }
+        }
+    }, [editor, detectionMap]);
     const handleCardHover = useCallback((item) => {
         setHoveredKey(item.key);
         if (item.firstAnchor) {
@@ -272,10 +302,10 @@ export function NavEditor({ config, onChange, editor }) {
                                                 }, children: [_jsx("span", { children: '\u{1f4cd}' }), _jsx("span", { children: item.trigger })] })), _jsxs("div", { "data-card-body": true, role: "button", tabIndex: 0, className: "se-flex se-items-center se-gap-2 se-cursor-pointer", onClick: () => handleCardBodyClick(item), onKeyDown: (e) => {
                                                     if (e.key === 'Enter' || e.key === ' ')
                                                         handleCardBodyClick(item);
-                                                }, children: [_jsx(DetectionBadge, { found: detection?.found ?? false }), _jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", children: item.summary }), _jsx("button", { type: "button", className: "se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-slate-grey-7 se-text-sm se-cursor-pointer se-shrink-0 se-leading-none", onClick: (e) => {
+                                                }, children: [_jsx(DetectionBadge, { found: detection?.found ?? false, onClick: () => handleBadgeClick(item) }), _jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", children: item.summary }), _jsx("button", { type: "button", className: "se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-slate-grey-7 se-text-sm se-cursor-pointer se-shrink-0 se-leading-none", onClick: (e) => {
                                                             e.stopPropagation();
                                                             handleDismiss(item.key);
-                                                        }, title: "Dismiss this tip", children: "\u00D7" })] }), _jsxs("div", { className: "se-text-[10px] se-text-slate-grey-7 se-mt-1", children: ["WHY: ", item.rationale ? item.rationale.why : 'N/A'] }), _jsx(TriggerJourney, { status: showWhenStatuses.get(item.key) ?? null })] }, item.key));
+                                                        }, title: "Dismiss this tip", children: "\u00D7" })] }), _jsxs("div", { className: "se-text-[10px] se-text-slate-grey-7 se-mt-1", children: ["WHY: ", item.rationale ? item.rationale.why : 'N/A'] }), _jsx(TriggerJourney, { status: triggerWhenStatuses.get(item.key) ?? null })] }, item.key));
                                 })] })), dismissedItems.length > 0 && (_jsx(DismissedSection, { count: dismissedItems.length, children: dismissedItems.map((item) => (_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-py-1.5 se-px-2.5 se-rounded-md se-border se-border-white/[0.03] se-bg-transparent se-mb-0.5 se-cursor-pointer se-text-xs se-text-slate-grey-6 se-opacity-60", children: [_jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap se-line-through", children: item.summary }), _jsx("button", { type: "button", className: "se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-blue-5 se-text-[11px] se-cursor-pointer se-shrink-0 se-leading-none", onClick: (e) => {
                                             e.stopPropagation();
                                             handleRestore(item.key);

package/dist/runtime.d.ts

@@ -67,7 +67,7 @@ export declare const runtime: {
     /**
      * 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: Record<string, unknown>): {
         id: string;

package/dist/runtime.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EACV,cAAc,EAEd,cAAc,EAEd,cAAc,EACf,MAAM,SAAS,CAAC;AAMjB;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA4B1D,CAAC;AAgBF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CAoC1D,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;EAGZ,CAAC;AAMX;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;IAMlB;;OAEG;;;;;;;;IAGH;;OAEG;;;;;uBAqCu1S,CAAC;0BAA8B,CAAC;;;;;;;;;IAxB13S;;;;OAIG;0BACmB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;;;;;CAgB9C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,KAAK,EACV,cAAc,EAEd,cAAc,EAEd,cAAc,EACf,MAAM,SAAS,CAAC;AAMjB;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CA+B1D,CAAC;AAgBF;;GAEG;AACH,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,cAAc,CAoC1D,CAAC;AAMF;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;EAGZ,CAAC;AAMX;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;IAMlB;;OAEG;;;;;;;;IAGH;;OAEG;;;;;uBAqCy8R,CAAC;0BAA8B,CAAC;;;;;;;;;IAxB5+R;;;;OAIG;0BACmB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;;;;;CAgB9C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/runtime.js

@@ -15,7 +15,8 @@ import { NavMountableWidget } from './NavWidget';
 export const executeScrollTo = async (action, context) => {
     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: () => { } };
     }
     // Scroll to element
     anchorEl.scrollIntoView({
@@ -131,15 +132,15 @@ export const runtime = {
     /**
      * 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) {
         const actions = (props.actions ?? []);
         return actions
-            .filter((a) => a.notify && a.showWhen)
+            .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,