@syntrologie/adapt-faq 2.4.0 → 2.5.1

package/dist/FAQWidget.d.ts

@@ -2,7 +2,7 @@
  * Adaptive FAQ - FAQWidget Component
  *
  * React component that renders a collapsible Q&A accordion with per-item
- * conditional visibility based on showWhen decision strategies.
+ * conditional visibility based on triggerWhen decision strategies.
  *
  * Demonstrates the compositional action pattern where child actions
  * (faq:question) serve as configuration data for the parent widget.
@@ -44,7 +44,7 @@ export interface FAQWidgetRuntime {
         get: (key: string) => unknown;
         set: (key: string, value: unknown) => void;
     };
-    /** Event accumulator for reactive showWhen re-evaluation */
+    /** Event accumulator for reactive triggerWhen re-evaluation */
     accumulator?: {
         subscribe: (callback: () => void) => () => void;
         register: (key: string, predicate: (event: any) => boolean) => void;
@@ -60,8 +60,8 @@ interface FAQWidgetProps {
  *
  * This component demonstrates the compositional action pattern:
  * - Parent (FAQWidget) receives `config.actions` array
- * - Each action has optional `showWhen` for per-item visibility
- * - Parent evaluates showWhen and filters visible questions
+ * - Each action has optional `triggerWhen` for per-item visibility
+ * - Parent evaluates triggerWhen and filters visible questions
  * - Parent manages expand state and re-rendering on context changes
  */
 export declare function FAQWidget({ config, runtime, instanceId }: FAQWidgetProps): import("react/jsx-runtime").JSX.Element;

package/dist/FAQWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FAQWidget.d.ts","sourceRoot":"","sources":["../src/FAQWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,KAAK,EACV,gBAAgB,EAEhB,SAAS,EAIV,MAAM,SAAS,CAAC;AA2CjB,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC;IACtF,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;KAAE,CAAC;IAC7D,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QACjE,SAAS,CAAC,EAAE,CACV,gBAAgB,EACZ;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,GAC7D,CAAC,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC,EACpF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,KAC3F,MAAM,IAAI,CAAC;QAChB,SAAS,CAAC,EAAE,CACV,MAAM,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,EAClD,KAAK,CAAC,EAAE,MAAM,KACX,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAC3E,CAAC;IACF,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;QAAC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,CAAC;IACtF,4DAA4D;IAC5D,WAAW,CAAC,EAAE;QACZ,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;QAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,KAAK,IAAI,CAAC;KACrE,CAAC;CACH;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;CACpB;AA+SD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,2CA2UxE;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":"FAQWidget.d.ts","sourceRoot":"","sources":["../src/FAQWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH,OAAO,KAAK,EACV,gBAAgB,EAEhB,SAAS,EAIV,MAAM,SAAS,CAAC;AA2CjB,MAAM,WAAW,gBAAgB;IAC/B,YAAY,EAAE,CAAC,CAAC,EAAE,QAAQ,EAAE,gBAAgB,CAAC,CAAC,CAAC,KAAK;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,UAAU,EAAE,OAAO,CAAA;KAAE,CAAC;IACtF,OAAO,EAAE;QAAE,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAA;KAAE,CAAC;IAC7D,MAAM,EAAE;QACN,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;QACjE,SAAS,CAAC,EAAE,CACV,gBAAgB,EACZ;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,OAAO,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,GAC7D,CAAC,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAC,EACpF,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,KAC3F,MAAM,IAAI,CAAC;QAChB,SAAS,CAAC,EAAE,CACV,MAAM,CAAC,EAAE;YAAE,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;YAAC,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAA;SAAE,EAClD,KAAK,CAAC,EAAE,MAAM,KACX,KAAK,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;KAC3E,CAAC;IACF,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;QAAC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;KAAE,CAAC;IACtF,+DAA+D;IAC/D,WAAW,CAAC,EAAE;QACZ,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,IAAI,KAAK,MAAM,IAAI,CAAC;QAChD,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,OAAO,KAAK,IAAI,CAAC;KACrE,CAAC;CACH;AAED,UAAU,cAAc;IACtB,MAAM,EAAE,SAAS,CAAC;IAClB,OAAO,EAAE,gBAAgB,CAAC;IAC1B,UAAU,EAAE,MAAM,CAAC;CACpB;AAyTD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,2CA8VxE;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/FAQWidget.js

@@ -3,12 +3,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Adaptive FAQ - FAQWidget Component
  *
  * React component that renders a collapsible Q&A accordion with per-item
- * conditional visibility based on showWhen decision strategies.
+ * conditional visibility based on triggerWhen decision strategies.
  *
  * Demonstrates the compositional action pattern where child actions
  * (faq:question) 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';
 // ============================================================================
@@ -52,12 +52,12 @@ function getFeedbackPrompt(feedbackConfig) {
 // ============================================================================
 const 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%',
@@ -66,37 +66,40 @@ const baseStyles = {
         fontSize: '14px',
         outline: 'none',
         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',
+        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',
@@ -112,12 +115,12 @@ const 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',
@@ -155,30 +158,28 @@ const baseStyles = {
 const 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],
         },
         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],
@@ -196,30 +197,28 @@ const 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],
         },
         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],
@@ -236,7 +235,7 @@ const themeStyles = {
         },
     },
 };
-function FAQItem({ item, isExpanded, onToggle, theme, feedbackConfig, feedbackValue, onFeedback, }) {
+function FAQItem({ item, isExpanded, isHighlighted, isLast, onToggle, theme, feedbackConfig, feedbackValue, onFeedback, }) {
     const [isHovered, setIsHovered] = useState(false);
     const colors = themeStyles[theme];
     const { question, answer } = item.config;
@@ -244,6 +243,13 @@ function FAQItem({ item, isExpanded, onToggle, theme, feedbackConfig, feedbackVa
         ...baseStyles.item,
         ...colors.item,
         ...(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,
@@ -252,7 +258,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,
@@ -264,7 +270,7 @@ function FAQItem({ item, isExpanded, onToggle, theme, feedbackConfig, feedbackVa
         ...baseStyles.feedback,
         ...colors.feedbackPrompt,
     };
-    return (_jsxs("div", { style: itemStyle, "data-faq-item-id": item.config.id, children: [_jsxs("button", { type: "button", style: questionStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [_jsx("span", { children: question }), _jsx("span", { style: chevronStyle, children: '\u25BC' })] }), _jsxs("div", { style: answerStyle, "aria-hidden": !isExpanded, children: [renderAnswer(answer), isExpanded && feedbackConfig && (_jsxs("div", { style: feedbackStyle, children: [_jsx("span", { children: getFeedbackPrompt(feedbackConfig) }), _jsx("button", { type: "button", style: {
+    return (_jsxs("div", { style: itemStyle, "data-faq-item-id": item.config.id, children: [_jsxs("button", { type: "button", style: questionStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [_jsx("span", { children: question }), _jsx("span", { style: chevronStyle, children: '\u203A' })] }), _jsxs("div", { style: answerStyle, "aria-hidden": !isExpanded, children: [renderAnswer(answer), isExpanded && feedbackConfig && (_jsxs("div", { style: feedbackStyle, children: [_jsx("span", { children: getFeedbackPrompt(feedbackConfig) }), _jsx("button", { type: "button", style: {
                                     ...baseStyles.feedbackButton,
                                     ...(feedbackValue === 'up' ? baseStyles.feedbackButtonSelected : {}),
                                 }, "aria-label": "Thumbs up", onClick: () => onFeedback(item.config.id, question, 'up'), children: '\uD83D\uDC4D' }), _jsx("button", { type: "button", style: {
@@ -280,16 +286,18 @@ function FAQItem({ item, isExpanded, onToggle, theme, feedbackConfig, feedbackVa
  *
  * This component demonstrates the compositional action pattern:
  * - Parent (FAQWidget) receives `config.actions` array
- * - Each action has optional `showWhen` for per-item visibility
- * - Parent evaluates showWhen and filters visible questions
+ * - Each action has optional `triggerWhen` for per-item visibility
+ * - Parent evaluates triggerWhen and filters visible questions
  * - Parent manages expand state and re-rendering on context changes
  */
 export function FAQWidget({ config, runtime, instanceId }) {
     // Force re-render when context/accumulator changes.
-    // renderTick is used as a useMemo dependency to invalidate cached showWhen evaluations.
+    // renderTick is used as a useMemo dependency to invalidate cached triggerWhen evaluations.
     const [renderTick, forceUpdate] = useReducer((x) => x + 1, 0);
     // Track expanded question IDs
     const [expandedIds, setExpandedIds] = useState(new Set());
+    // Track which item is flash-highlighted from a deep-link
+    const [highlightId, setHighlightId] = useState(null);
     // Search query state
     const [searchQuery, setSearchQuery] = useState('');
     // Track feedback state per item
@@ -303,7 +311,7 @@ export function FAQWidget({ 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;
@@ -311,43 +319,6 @@ export function FAQWidget({ 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]);
     // Subscribe to faq:open:* events from overlay CTA clicks
     useEffect(() => {
         if (!runtime.events.subscribe)
@@ -391,14 +362,52 @@ export function FAQWidget({ config, runtime, instanceId }) {
         });
         return unsubscribe;
     }, [runtime]);
-    // Filter visible questions based on per-item showWhen
+    // Subscribe to notification.deep_link events (from insertHtml deepLink clicks + notification toasts)
+    useEffect(() => {
+        if (!runtime.events.subscribe)
+            return;
+        const handleDeepLink = (event) => {
+            const tileId = event.props?.tileId;
+            const itemId = event.props?.itemId;
+            // Only handle if this deep link targets our tile
+            if (tileId !== instanceId)
+                return;
+            if (!itemId)
+                return;
+            // Expand the target item
+            setExpandedIds(new Set([itemId]));
+            // Flash-highlight the item
+            setHighlightId(itemId);
+            setTimeout(() => setHighlightId(null), 1500);
+            // Scroll into view after render
+            requestAnimationFrame(() => {
+                const el = document.querySelector(`[data-faq-item-id="${itemId}"]`);
+                if (el)
+                    el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            });
+        };
+        // Check recent events (may have fired before widget mounted, e.g. canvas was closed)
+        if (runtime.events.getRecent) {
+            const recent = runtime.events.getRecent({ names: ['notification.deep_link'] }, 5);
+            const pending = recent
+                .filter((e) => e.props?.tileId === instanceId && e.props?.itemId)
+                .pop();
+            if (pending && Date.now() - pending.ts < 10000) {
+                handleDeepLink(pending);
+            }
+        }
+        // Subscribe to future events
+        const unsubscribe = runtime.events.subscribe({ names: ['notification.deep_link'] }, handleDeepLink);
+        return unsubscribe;
+    }, [runtime, instanceId]);
+    // Filter visible questions 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 visibleQuestions = useMemo(() => config.actions.filter((q) => {
-        // No showWhen = always visible
-        if (!q.showWhen)
+        // No triggerWhen = always visible
+        if (!q.triggerWhen)
             return true;
         // Evaluate the decision strategy
-        const result = runtime.evaluateSync(q.showWhen);
+        const result = runtime.evaluateSync(q.triggerWhen);
         return result.value;
     }), [config.actions, runtime, renderTick]);
     // NOTE: faq:question_revealed is now published by useNotifyWatcher in
@@ -504,12 +513,12 @@ export function FAQWidget({ config, runtime, instanceId }) {
         ...themeStyles[resolvedTheme].categoryHeader,
     };
     // Render a list of FAQ items
-    const renderItems = (items) => items.map((q) => (_jsx(FAQItem, { item: q, isExpanded: expandedIds.has(q.config.id), onToggle: () => handleToggle(q.config.id), theme: resolvedTheme, feedbackConfig: feedbackConfig, feedbackValue: feedbackState.get(q.config.id), onFeedback: handleFeedback }, q.config.id)));
+    const renderItems = (items) => items.map((q, index) => (_jsx(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: feedbackConfig, feedbackValue: feedbackState.get(q.config.id), onFeedback: handleFeedback }, q.config.id)));
     // Empty state (no visible questions at all)
     if (visibleQuestions.length === 0) {
-        return (_jsx("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: _jsx("div", { style: emptyStateStyle, children: "No FAQ questions available." }) }));
+        return (_jsx("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: _jsx("div", { style: emptyStateStyle, children: "You're all set for now! We'll surface answers here when they're relevant to what you're doing." }) }));
     }
-    return (_jsxs("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: [config.searchable && (_jsx("div", { style: baseStyles.searchWrapper, children: _jsx("input", { type: "text", placeholder: "Search questions...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: searchInputStyle }) })), _jsx("div", { style: baseStyles.accordion, children: hasCategories
+    return (_jsxs("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: [config.searchable && (_jsxs("div", { style: baseStyles.searchWrapper, children: [_jsx("style", { children: `[data-adaptive-id="${instanceId}"] input::placeholder { color: var(--sc-content-search-color, inherit); opacity: 0.7; }` }), _jsx("input", { type: "text", placeholder: "Search questions...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: searchInputStyle })] })), _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')))
                     : renderItems(filteredQuestions) }), config.searchable && filteredQuestions.length === 0 && searchQuery && (_jsxs("div", { style: { ...baseStyles.noResults, ...themeStyles[resolvedTheme].emptyState }, children: ["No questions found matching \"", searchQuery, "\""] }))] }));
 }

package/dist/cdn.d.ts

@@ -37,6 +37,7 @@ export declare const manifest: {
                 name: string;
                 description: string;
                 icon: string;
+                subtitle: string;
             };
         }[];
         notifyWatchers: (props: Record<string, unknown>) => {

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;;;;;;;;;;;;;;;;;;;;2BAoC23pB,CAAC;8BAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAtBr5pB,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;;;;;;;;;;;;;;;;;;;;2BAoCyjtB,CAAC;8BAA8B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;+BAtBnltB,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;AAsBH,OAAO,EACL,KAAK,gBAAgB,EAErB,KAAK,SAAS,EACd,KAAK,iBAAiB,EAGvB,MAAM,SAAS,CAAC;AAoEjB,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,EAAE,CAW1D;AAwFD,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAyVvE;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;AAsBH,OAAO,EACL,KAAK,gBAAgB,EAErB,KAAK,SAAS,EACd,KAAK,iBAAiB,EAGvB,MAAM,SAAS,CAAC;AA6EjB,MAAM,WAAW,QAAQ;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACjD,WAAW,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,wBAAgB,YAAY,CAAC,MAAM,EAAE,SAAS,GAAG,QAAQ,EAAE,CAW1D;AAwFD,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAgXvE;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 Q&A cards with trigger, rationale,
  * and inline editing. Includes detection badges and hover-to-highlight.
  */
-import { ConditionStatusLine, DetectionBadge, DismissedSection, EditorBody, EditorCard, EditorFooter, EditorHeader, EditorInput, EditorLayout, EditorTextarea, EmptyState, GroupHeader, TriggerJourney, useShowWhenStatus, } from '@syntrologie/shared-editor-ui';
+import { ConditionStatusLine, DetectionBadge, DismissedSection, EditorBody, EditorCard, EditorFooter, EditorHeader, EditorInput, EditorLayout, EditorTextarea, EmptyState, GroupHeader, TriggerJourney, useTriggerWhenStatus, } from '@syntrologie/shared-editor-ui';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { describeTrigger, summarizeFAQItem } 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,14 +40,23 @@ 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
+    }
+}
 // ============================================================================
 // Helpers
 // ============================================================================
@@ -64,9 +73,9 @@ export function flattenItems(config) {
         key: String(i),
         index: i,
         summary: summarizeFAQItem(q),
-        trigger: describeTrigger(q.showWhen),
+        trigger: describeTrigger(q.triggerWhen),
         rationale: q.rationale,
-        firstAnchor: extractFirstAnchor(q.showWhen),
+        firstAnchor: extractFirstAnchor(q.triggerWhen),
         question: q,
     }));
 }
@@ -86,7 +95,7 @@ function useDetection(items, getCurrentRoute) {
             const map = new Map();
             const currentPath = getCurrentRoute();
             for (const item of itemsRef.current) {
-                const targeting = extractTargetingInfo(item.question.showWhen);
+                const targeting = extractTargetingInfo(item.question.triggerWhen);
                 // Check page match
                 let pageMatch = true;
                 if (targeting.pagePatterns.length > 0) {
@@ -175,12 +184,12 @@ export function FAQEditor({ config, onChange, editor }) {
     const totalQuestions = activeItems.length;
     const detectionMap = useDetection(allItems, editor.getCurrentRoute);
     const foundCount = activeItems.filter((item) => detectionMap.get(item.key)?.found).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.question.showWhen,
+        triggerWhen: item.question.triggerWhen,
     })), [allItems]);
-    const showWhenStatuses = useShowWhenStatus(showWhenItems);
+    const triggerWhenStatuses = useTriggerWhenStatus(triggerWhenItems);
     const handleDismiss = useCallback((key) => {
         setDismissedKeys((prev) => {
             const next = new Set(prev);
@@ -200,10 +209,12 @@ export function FAQEditor({ config, onChange, editor }) {
     const handleCardBodyClick = useCallback((item) => {
         setEditingKey(item.key);
     }, []);
-    const handleTriggerClick = useCallback((item) => {
-        const pageUrl = extractFirstPage(item.question.showWhen);
+    const handleTriggerClick = useCallback(async (item) => {
+        const pageUrl = extractFirstPage(item.question.triggerWhen);
         if (pageUrl) {
-            editor.navigateTo(pageUrl);
+            if (item.firstAnchor)
+                savePendingHighlight(item.firstAnchor);
+            await editor.navigateTo(pageUrl);
         }
         if (item.firstAnchor) {
             editor.highlightElement(item.firstAnchor);
@@ -237,6 +248,25 @@ export function FAQEditor({ 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.question.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) {
@@ -254,7 +284,7 @@ export function FAQEditor({ config, onChange, editor }) {
         if (!q)
             return null;
         const item = allItems.find((it) => it.key === String(index));
-        return (_jsxs("div", { className: "se-py-1", children: [item && item.trigger !== 'All pages' && (_jsxs("button", { type: "button", "data-trigger": true, className: "se-flex se-items-center se-gap-1 se-text-[11px] se-text-slate-grey-8 se-cursor-pointer se-mb-1 se-border-none se-bg-transparent se-p-0 se-text-left", onClick: () => handleTriggerClick(item), children: [_jsx("span", { children: '\u{1f4cd}' }), _jsx("span", { children: item.trigger })] })), _jsx(EditorInput, { label: "Question", value: q.config.question, onChange: (e) => handleFieldChange(index, 'question', e.target.value) }), _jsx(EditorTextarea, { label: "Answer", value: getAnswerText(q.config.answer), onChange: (e) => handleFieldChange(index, 'answer', e.target.value) }), _jsx(EditorInput, { label: "Category", value: q.config.category || '', onChange: (e) => handleFieldChange(index, 'category', e.target.value || undefined), placeholder: "e.g., Billing, Account" }), _jsxs("div", { children: [_jsx("span", { className: "se-text-[11px] se-font-semibold se-text-slate-grey-7 se-mb-1 se-block", children: "AI Rationale" }), _jsx("div", { className: "se-p-2 se-rounded se-border se-border-dashed se-border-white/15 se-bg-white/[0.02] se-text-slate-grey-8 se-text-xs se-mb-2", children: q.rationale ? q.rationale.why : 'N/A' })] }), _jsx(TriggerJourney, { status: showWhenStatuses.get(String(index)) ?? null })] }));
+        return (_jsxs("div", { className: "se-py-1", children: [item && item.trigger !== 'All pages' && (_jsxs("button", { type: "button", "data-trigger": true, className: "se-flex se-items-center se-gap-1 se-text-[11px] se-text-slate-grey-8 se-cursor-pointer se-mb-1 se-border-none se-bg-transparent se-p-0 se-text-left", onClick: () => handleTriggerClick(item), children: [_jsx("span", { children: '\u{1f4cd}' }), _jsx("span", { children: item.trigger })] })), _jsx(EditorInput, { label: "Question", value: q.config.question, onChange: (e) => handleFieldChange(index, 'question', e.target.value) }), _jsx(EditorTextarea, { label: "Answer", value: getAnswerText(q.config.answer), onChange: (e) => handleFieldChange(index, 'answer', e.target.value) }), _jsx(EditorInput, { label: "Category", value: q.config.category || '', onChange: (e) => handleFieldChange(index, 'category', e.target.value || undefined), placeholder: "e.g., Billing, Account" }), _jsxs("div", { children: [_jsx("span", { className: "se-text-[11px] se-font-semibold se-text-slate-grey-7 se-mb-1 se-block", children: "AI Rationale" }), _jsx("div", { className: "se-p-2 se-rounded se-border se-border-dashed se-border-white/15 se-bg-white/[0.02] se-text-slate-grey-8 se-text-xs se-mb-2", children: q.rationale ? q.rationale.why : 'N/A' })] }), _jsx(TriggerJourney, { status: triggerWhenStatuses.get(String(index)) ?? null })] }));
     };
     return (_jsxs(EditorLayout, { children: [_jsx(EditorHeader, { title: "Review Questions", subtitle: `${totalQuestions} question${totalQuestions !== 1 ? 's' : ''}${totalQuestions > 0 ? ` (${foundCount} found on this page)` : ''}`, onBack: () => editor.navigateHome() }), _jsx(EditorBody, { children: editingKey !== null ? (
                 /* ---- Edit mode ---- */
@@ -272,10 +302,10 @@ export function FAQEditor({ 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 question", 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(ConditionStatusLine, { status: showWhenStatuses.get(item.key) ?? null })] }, item.key));
+                                                        }, title: "Dismiss this question", 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(ConditionStatusLine, { 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

@@ -44,12 +44,13 @@ export declare const runtime: {
             name: string;
             description: string;
             icon: string;
+            subtitle: string;
         };
     }[];
     /**
      * 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: 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;;;;;GAKG;AAUH;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;IAOlB;;OAEG;;;;;;;;;;;IAGH;;OAEG;;;;;uBAsCwtoB,CAAC;0BAA8B,CAAC;;;;;;;;;IAzB3voB;;;;OAIG;0BACmB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;;;;;;CAiB9C,CAAC;AAEF,eAAe,OAAO,CAAC"}
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAUH;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;IAOlB;;OAEG;;;;;;;;;;;IAGH;;OAEG;;;;;uBAuCk2rB,CAAC;0BAA8B,CAAC;;;;;;;;;;IAzBr4rB;;;;OAIG;0BACmB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;;;;;;CAiB9C,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/runtime.js

@@ -36,21 +36,22 @@ export const runtime = {
                 name: 'FAQ Accordion',
                 description: 'Collapsible Q&A accordion with search, categories, and feedback',
                 icon: '❓',
+                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) {
         const actions = (props.actions ?? []);
         return actions
-            .filter((a) => a.notify && a.showWhen)
+            .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,