@syntrologie/adapt-faq 0.0.0-semantically-released → 2.0.1

package/dist/editor.js

@@ -1,6 +1,147 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * Adaptive FAQ - Editor Component
+ *
+ * Review & tweak editor for AI-generated FAQ question decisions.
+ * Displays a scannable list of Q&A cards with trigger, rationale,
+ * and inline editing. Includes detection badges and hover-to-highlight.
+ */
+import { useState, useCallback, useEffect, useRef } from 'react';
+import { summarizeFAQItem, describeTrigger } from './summarize';
+import { isOwnAction, } from './types';
+function isRuleStrategy(s) {
+    return (typeof s === 'object' &&
+        s !== null &&
+        s.type === 'rules' &&
+        Array.isArray(s.rules));
+}
+function extractTargetingInfo(showWhen) {
+    if (!showWhen || !isRuleStrategy(showWhen)) {
+        return { pagePatterns: [], anchorSelectors: [], hasTargeting: false };
+    }
+    const pagePatterns = new Set();
+    const anchorSelectors = new Set();
+    for (const rule of showWhen.rules) {
+        for (const cond of rule.conditions) {
+            const c = cond;
+            if (c.type === 'page_url' && typeof c.url === 'string') {
+                pagePatterns.add(c.url);
+            }
+            else if (c.type === 'anchor_visible' && typeof c.anchorId === 'string') {
+                anchorSelectors.add(c.anchorId);
+            }
+        }
+    }
+    const hasTargeting = pagePatterns.size > 0 || anchorSelectors.size > 0;
+    return {
+        pagePatterns: [...pagePatterns],
+        anchorSelectors: [...anchorSelectors],
+        hasTargeting,
+    };
+}
+function extractFirstPage(showWhen) {
+    const info = extractTargetingInfo(showWhen);
+    return info.pagePatterns[0] || null;
+}
+function extractFirstAnchor(showWhen) {
+    const info = extractTargetingInfo(showWhen);
+    return info.anchorSelectors[0] || null;
+}
 // ============================================================================
-// Editor Styles
+// Helpers
+// ============================================================================
+function getAnswerText(answer) {
+    if (typeof answer === 'string')
+        return answer;
+    if (answer.type === 'rich')
+        return answer.html;
+    return answer.content;
+}
+function flattenItems(config) {
+    const actions = (config.actions || []).filter(isOwnAction);
+    return actions.map((q, i) => ({
+        key: String(i),
+        index: i,
+        summary: summarizeFAQItem(q),
+        trigger: describeTrigger(q.showWhen),
+        rationale: q.rationale,
+        firstAnchor: extractFirstAnchor(q.showWhen),
+        question: q,
+    }));
+}
+function filterConfig(config, dismissedKeys) {
+    const ownActions = (config.actions || []).filter(isOwnAction);
+    return {
+        ...config,
+        actions: ownActions.filter((_, i) => !dismissedKeys.has(String(i))),
+    };
+}
+function useDetection(items, getCurrentRoute) {
+    const [detectionMap, setDetectionMap] = useState(new Map());
+    const itemsRef = useRef(items);
+    itemsRef.current = items;
+    useEffect(() => {
+        const runDetection = () => {
+            const map = new Map();
+            const currentPath = getCurrentRoute();
+            for (const item of itemsRef.current) {
+                const targeting = extractTargetingInfo(item.question.showWhen);
+                // Check page match
+                let pageMatch = true;
+                if (targeting.pagePatterns.length > 0) {
+                    pageMatch = targeting.pagePatterns.some((pattern) => {
+                        const regex = new RegExp(`^${pattern.replace(/\*\*/g, '.*').replace(/(?<!\.)(\*)/g, '[^/]*')}$`);
+                        return regex.test(currentPath);
+                    });
+                }
+                // Check anchor presence
+                let anchorFound = false;
+                let element = null;
+                if (item.firstAnchor) {
+                    try {
+                        element = document.querySelector(item.firstAnchor);
+                        anchorFound = element !== null;
+                    }
+                    catch {
+                        // Invalid selector
+                    }
+                }
+                else {
+                    // No anchor to check — if page matches, consider found
+                    anchorFound = pageMatch;
+                }
+                map.set(item.key, {
+                    found: pageMatch && anchorFound,
+                    element,
+                });
+            }
+            setDetectionMap(map);
+        };
+        runDetection();
+        const interval = setInterval(runDetection, 2000);
+        window.addEventListener('popstate', runDetection);
+        return () => {
+            clearInterval(interval);
+            window.removeEventListener('popstate', runDetection);
+        };
+    }, [getCurrentRoute]);
+    return detectionMap;
+}
+// ============================================================================
+// Detection Badge
+// ============================================================================
+function DetectionBadge({ found }) {
+    return (_jsx("span", { style: {
+            width: '8px',
+            height: '8px',
+            borderRadius: '50%',
+            backgroundColor: found ? '#22c55e' : '#475569',
+            flexShrink: 0,
+            display: 'inline-block',
+        }, title: found ? 'Found on this page' : 'Not found on this page' }));
+}
+// ============================================================================
+// Styles
 // ============================================================================
 const styles = {
     container: {
@@ -36,121 +177,101 @@ const styles = {
         fontSize: '11px',
         color: '#64748b',
     },
-    content: {
+    body: {
         flex: 1,
         overflow: 'auto',
         padding: '16px',
     },
-    section: {
-        marginBottom: '24px',
-    },
-    sectionTitle: {
-        fontSize: '12px',
-        fontWeight: 600,
-        color: '#94a3b8',
+    groupHeader: {
+        fontSize: '11px',
+        fontWeight: 700,
+        color: '#64748b',
         textTransform: 'uppercase',
-        letterSpacing: '0.05em',
-        marginBottom: '12px',
+        letterSpacing: '0.06em',
+        padding: '4px 0 8px 0',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
     },
-    select: {
-        width: '100%',
-        padding: '10px 12px',
+    groupCount: {
+        fontSize: '10px',
+        color: '#475569',
+        backgroundColor: 'rgba(255,255,255,0.06)',
+        padding: '2px 6px',
+        borderRadius: '8px',
+    },
+    card: {
+        padding: '8px 10px',
         borderRadius: '6px',
-        border: '1px solid rgba(255,255,255,0.1)',
-        backgroundColor: 'rgba(255,255,255,0.05)',
-        color: '#f8fafc',
+        border: '1px solid rgba(255,255,255,0.06)',
+        background: 'rgba(255,255,255,0.02)',
+        marginBottom: '4px',
         fontSize: '13px',
-        cursor: 'pointer',
+        color: '#e2e8f0',
     },
-    checkbox: {
+    triggerLine: {
         display: 'flex',
         alignItems: 'center',
-        gap: '8px',
-        fontSize: '13px',
-        color: '#d1d5db',
-        marginTop: '8px',
-    },
-    addButton: {
-        width: '100%',
-        padding: '12px',
-        borderRadius: '8px',
-        border: '1px dashed rgba(139, 92, 246, 0.3)',
-        background: 'rgba(139, 92, 246, 0.05)',
-        color: '#8b5cf6',
-        fontSize: '13px',
-        fontWeight: 600,
+        gap: '4px',
+        fontSize: '11px',
+        color: '#94a3b8',
         cursor: 'pointer',
-        marginBottom: '16px',
-    },
-    questionCard: {
-        padding: '12px',
-        borderRadius: '8px',
-        border: '1px solid rgba(255,255,255,0.08)',
-        background: 'rgba(255,255,255,0.02)',
-        marginBottom: '8px',
+        marginBottom: '4px',
     },
-    questionHeader: {
+    cardBody: {
         display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'space-between',
-        marginBottom: '12px',
+        alignItems: 'center',
+        gap: '8px',
+        cursor: 'pointer',
     },
-    questionPreview: {
+    cardText: {
         flex: 1,
-    },
-    questionText: {
-        fontSize: '14px',
-        fontWeight: 500,
-        color: '#f8fafc',
-        marginBottom: '4px',
-    },
-    answerPreview: {
-        fontSize: '12px',
-        color: '#64748b',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
         whiteSpace: 'nowrap',
-        maxWidth: '200px',
     },
-    removeButton: {
-        padding: '4px 8px',
+    rationaleLine: {
+        fontSize: '10px',
+        color: '#64748b',
+        marginTop: '4px',
+    },
+    dismissButton: {
+        padding: '2px 6px',
         borderRadius: '4px',
         border: 'none',
-        background: 'rgba(239, 68, 68, 0.1)',
-        color: '#ef4444',
-        fontSize: '12px',
+        background: 'transparent',
+        color: '#64748b',
+        fontSize: '14px',
         cursor: 'pointer',
         flexShrink: 0,
+        lineHeight: 1,
     },
-    inputGroup: {
-        marginBottom: '8px',
+    dismissedSection: {
+        marginTop: '16px',
+        cursor: 'pointer',
+        userSelect: 'none',
     },
-    inputLabel: {
-        display: 'block',
+    dismissedHeader: {
         fontSize: '11px',
-        color: '#94a3b8',
-        marginBottom: '4px',
-    },
-    input: {
-        width: '100%',
-        padding: '8px 10px',
-        borderRadius: '4px',
-        border: '1px solid rgba(255,255,255,0.1)',
-        backgroundColor: 'rgba(255,255,255,0.05)',
-        color: '#f8fafc',
-        fontSize: '13px',
+        fontWeight: 600,
+        color: '#475569',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
     },
-    textarea: {
-        width: '100%',
-        padding: '8px 10px',
-        borderRadius: '4px',
-        border: '1px solid rgba(255,255,255,0.1)',
-        backgroundColor: 'rgba(255,255,255,0.05)',
-        color: '#f8fafc',
-        fontSize: '13px',
-        minHeight: '80px',
-        resize: 'vertical',
-        fontFamily: 'inherit',
+    dismissedCard: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '6px 10px',
+        borderRadius: '6px',
+        border: '1px solid rgba(255,255,255,0.03)',
+        background: 'transparent',
+        marginBottom: '3px',
+        cursor: 'pointer',
+        fontSize: '12px',
+        color: '#475569',
+        opacity: 0.6,
     },
     emptyState: {
         textAlign: 'center',
@@ -186,95 +307,239 @@ const styles = {
         fontWeight: 600,
         cursor: 'pointer',
     },
+    // Edit form styles
+    editForm: {
+        padding: '4px 0',
+    },
+    editHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        marginBottom: '12px',
+        fontSize: '13px',
+        fontWeight: 600,
+        color: '#e2e8f0',
+    },
+    editLabel: {
+        fontSize: '11px',
+        fontWeight: 600,
+        color: '#64748b',
+        marginBottom: '4px',
+        display: 'block',
+    },
+    editInput: {
+        width: '100%',
+        padding: '6px 8px',
+        borderRadius: '4px',
+        border: '1px solid rgba(255,255,255,0.1)',
+        background: 'rgba(255,255,255,0.04)',
+        color: '#e2e8f0',
+        fontSize: '12px',
+        fontFamily: 'inherit',
+        marginBottom: '8px',
+        boxSizing: 'border-box',
+    },
+    editTextarea: {
+        width: '100%',
+        padding: '6px 8px',
+        borderRadius: '4px',
+        border: '1px solid rgba(255,255,255,0.1)',
+        background: 'rgba(255,255,255,0.04)',
+        color: '#e2e8f0',
+        fontSize: '12px',
+        fontFamily: 'inherit',
+        marginBottom: '8px',
+        resize: 'vertical',
+        minHeight: '60px',
+        boxSizing: 'border-box',
+    },
+    editRationale: {
+        padding: '8px',
+        borderRadius: '4px',
+        border: '1px dashed rgba(255,255,255,0.15)',
+        background: 'rgba(255,255,255,0.02)',
+        color: '#94a3b8',
+        fontSize: '12px',
+        marginBottom: '8px',
+    },
+    editBackButton: {
+        padding: '6px 12px',
+        borderRadius: '6px',
+        border: '1px solid rgba(255,255,255,0.1)',
+        background: 'transparent',
+        color: '#94a3b8',
+        fontSize: '12px',
+        cursor: 'pointer',
+        marginTop: '8px',
+    },
 };
 // ============================================================================
 // FAQEditor Component
 // ============================================================================
 export function FAQEditor({ config, onChange, editor }) {
     const typedConfig = config;
-    const questions = typedConfig.actions || [];
-    // Generate unique ID
-    const generateId = () => `q-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    // Add a new question
-    const handleAddQuestion = () => {
-        const newQuestion = {
-            kind: 'faq:question',
-            config: {
-                id: generateId(),
-                question: 'New Question',
-                answer: 'Enter your answer here...',
-                category: undefined,
-            },
-            showWhen: null,
-        };
-        onChange({
-            ...config,
-            actions: [...questions, newQuestion],
-        });
-        editor.setDirty(true);
-    };
-    // Remove a question
-    const handleRemoveQuestion = (index) => {
-        const newQuestions = questions.filter((_, i) => i !== index);
-        onChange({
-            ...config,
-            actions: newQuestions,
-        });
-        editor.setDirty(true);
-    };
-    // Update a question
-    const handleUpdateQuestion = (index, updates) => {
-        const newQuestions = questions.map((q, i) => {
-            if (i !== index)
-                return q;
-            return {
-                ...q,
-                config: {
-                    ...q.config,
-                    ...updates,
-                },
-            };
+    const [dismissedKeys, setDismissedKeys] = useState(new Set());
+    const [dismissedOpen, setDismissedOpen] = useState(false);
+    const [editingKey, setEditingKey] = useState(null);
+    const [previewMode, setPreviewMode] = useState('after');
+    const [_hoveredKey, setHoveredKey] = useState(null);
+    // Consume initial navigation payload on mount (FAQ is a widget mount —
+    // initialEditKey points to the mount action, no sub-item to pre-select)
+    const initialConsumed = useRef(false);
+    useEffect(() => {
+        if (!initialConsumed.current && (editor.initialEditKey != null || editor.initialCreate)) {
+            initialConsumed.current = true;
+            editor.clearInitialState?.();
+        }
+    }, [editor]);
+    const allItems = flattenItems(typedConfig);
+    const activeItems = allItems.filter((item) => !dismissedKeys.has(item.key));
+    const dismissedItems = allItems.filter((item) => dismissedKeys.has(item.key));
+    const totalQuestions = activeItems.length;
+    const detectionMap = useDetection(allItems, editor.getCurrentRoute);
+    const foundCount = activeItems.filter((item) => detectionMap.get(item.key)?.found).length;
+    const handleDismiss = useCallback((key) => {
+        setDismissedKeys((prev) => {
+            const next = new Set(prev);
+            next.add(key);
+            return next;
         });
-        onChange({
-            ...config,
-            actions: newQuestions,
+        if (editingKey === key)
+            setEditingKey(null);
+    }, [editingKey]);
+    const handleRestore = useCallback((key) => {
+        setDismissedKeys((prev) => {
+            const next = new Set(prev);
+            next.delete(key);
+            return next;
         });
+    }, []);
+    const handleCardBodyClick = useCallback((item) => {
+        setEditingKey(item.key);
+    }, []);
+    const handleTriggerClick = useCallback((item) => {
+        const pageUrl = extractFirstPage(item.question.showWhen);
+        if (pageUrl) {
+            editor.navigateTo(pageUrl);
+        }
+        if (item.firstAnchor) {
+            editor.highlightElement(item.firstAnchor);
+        }
+    }, [editor]);
+    const handleBackToList = useCallback(() => {
+        setEditingKey(null);
+        setPreviewMode('after');
+        editor.previewConfig(config);
+        editor.clearHighlight();
+    }, [editor, config]);
+    const handleBeforeAfter = useCallback((mode) => {
+        setPreviewMode(mode);
+        if (mode === 'before') {
+            const filtered = filterConfig(typedConfig, new Set([editingKey]));
+            editor.previewConfig(filtered);
+        }
+        else {
+            editor.previewConfig(config);
+        }
+    }, [typedConfig, editingKey, editor, config]);
+    const handleFieldChange = useCallback((index, field, value) => {
+        const ownActions = (typedConfig.actions || []).filter(isOwnAction).slice();
+        const q = { ...ownActions[index], config: { ...ownActions[index].config } };
+        q.config[field] = value;
+        ownActions[index] = q;
+        const otherActions = (typedConfig.actions || []).filter((a) => !isOwnAction(a));
+        const updated = { ...typedConfig, actions: [...otherActions, ...ownActions] };
+        onChange(updated);
         editor.setDirty(true);
+    }, [typedConfig, onChange, editor]);
+    const handlePublish = useCallback(() => {
+        if (dismissedKeys.size > 0) {
+            const filtered = filterConfig(typedConfig, dismissedKeys);
+            onChange(filtered);
+        }
+        editor.publish();
+    }, [dismissedKeys, typedConfig, onChange, editor]);
+    const handleCardHover = useCallback((item) => {
+        setHoveredKey(item.key);
+        if (item.firstAnchor) {
+            editor.highlightElement(item.firstAnchor);
+        }
+    }, [editor]);
+    const handleCardLeave = useCallback(() => {
+        setHoveredKey(null);
+        editor.clearHighlight();
+    }, [editor]);
+    // ---- Edit form renderer ----
+    const renderEditFields = (index) => {
+        const actions = (typedConfig.actions || []).filter(isOwnAction);
+        const q = actions[index];
+        if (!q)
+            return null;
+        const item = allItems.find((it) => it.key === String(index));
+        return (_jsxs("div", { style: styles.editForm, children: [item && item.trigger !== 'All pages' && (_jsxs("div", { "data-trigger": true, style: styles.triggerLine, onClick: () => handleTriggerClick(item), children: [_jsx("span", { children: '\u{1f4cd}' }), _jsx("span", { children: item.trigger })] })), _jsx("label", { style: styles.editLabel, children: "Question" }), _jsx("input", { style: styles.editInput, value: q.config.question, onChange: (e) => handleFieldChange(index, 'question', e.target.value) }), _jsx("label", { style: styles.editLabel, children: "Answer" }), _jsx("textarea", { style: styles.editTextarea, value: getAnswerText(q.config.answer), onChange: (e) => handleFieldChange(index, 'answer', e.target.value) }), _jsx("label", { style: styles.editLabel, children: "Category" }), _jsx("input", { style: styles.editInput, value: q.config.category || '', onChange: (e) => handleFieldChange(index, 'category', e.target.value || undefined), placeholder: "e.g., Billing, Account" }), _jsx("label", { style: styles.editLabel, children: "AI Rationale" }), _jsx("div", { style: styles.editRationale, children: q.rationale ? q.rationale.why : 'N/A' })] }));
     };
-    // Update expand behavior
-    const handleExpandBehaviorChange = (e) => {
-        onChange({
-            ...config,
-            expandBehavior: e.target.value,
-        });
-        editor.setDirty(true);
-    };
-    // Update theme
-    const handleThemeChange = (e) => {
-        onChange({
-            ...config,
-            theme: e.target.value,
-        });
-        editor.setDirty(true);
-    };
-    // Update searchable
-    const handleSearchableChange = (e) => {
-        onChange({
-            ...config,
-            searchable: e.target.checked,
-        });
-        editor.setDirty(true);
-    };
-    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsx("button", { onClick: () => editor.navigateHome(), style: styles.backButton, children: "\u2190 Back" }), _jsxs("div", { children: [_jsx("h2", { style: styles.title, children: "FAQ Accordion" }), _jsx("p", { style: styles.subtitle, children: "Configure questions with per-item visibility" })] })] }), _jsxs("div", { style: styles.content, children: [_jsxs("div", { style: styles.section, children: [_jsx("div", { style: styles.sectionTitle, children: "Expand Behavior" }), _jsxs("select", { value: typedConfig.expandBehavior || 'single', onChange: handleExpandBehaviorChange, style: styles.select, children: [_jsx("option", { value: "single", children: "Single (one at a time)" }), _jsx("option", { value: "multiple", children: "Multiple (any number)" })] })] }), _jsxs("div", { style: styles.section, children: [_jsx("div", { style: styles.sectionTitle, children: "Theme" }), _jsxs("select", { value: typedConfig.theme || 'auto', onChange: handleThemeChange, style: styles.select, children: [_jsx("option", { value: "auto", children: "Auto (System)" }), _jsx("option", { value: "light", children: "Light" }), _jsx("option", { value: "dark", children: "Dark" })] }), _jsxs("label", { style: styles.checkbox, children: [_jsx("input", { type: "checkbox", checked: typedConfig.searchable || false, onChange: handleSearchableChange }), "Enable search/filter"] })] }), _jsxs("div", { style: styles.section, children: [_jsx("div", { style: styles.sectionTitle, children: "Questions" }), _jsx("button", { onClick: handleAddQuestion, style: styles.addButton, children: "+ Add Question" }), questions.map((q, index) => (_jsxs("div", { style: styles.questionCard, children: [_jsxs("div", { style: styles.questionHeader, children: [_jsxs("div", { style: styles.questionPreview, children: [_jsx("div", { style: styles.questionText, children: q.config.question }), _jsx("div", { style: styles.answerPreview, children: q.config.answer })] }), _jsx("button", { onClick: () => handleRemoveQuestion(index), style: styles.removeButton, children: "Remove" })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Question" }), _jsx("input", { type: "text", value: q.config.question, onChange: (e) => handleUpdateQuestion(index, { question: e.target.value }), style: styles.input })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Answer" }), _jsx("textarea", { value: q.config.answer, onChange: (e) => handleUpdateQuestion(index, { answer: e.target.value }), style: styles.textarea })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Category (optional)" }), _jsx("input", { type: "text", value: q.config.category || '', onChange: (e) => handleUpdateQuestion(index, {
-                                                    category: e.target.value || undefined,
-                                                }), style: styles.input, placeholder: "e.g., Billing, Account, Features" })] })] }, q.config.id || index))), questions.length === 0 && (_jsx("div", { style: styles.emptyState, children: "No questions configured. Click the button above to add one." }))] })] }), _jsxs("div", { style: styles.footer, children: [_jsx("button", { onClick: () => editor.save(), style: styles.saveButton, children: "Save Draft" }), _jsx("button", { onClick: () => editor.publish(), style: styles.publishButton, children: "Publish" })] })] }));
+    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsx("button", { onClick: () => editor.navigateHome(), style: styles.backButton, children: "\u2190 Back" }), _jsxs("div", { children: [_jsx("h2", { style: styles.title, children: "Review Questions" }), _jsxs("p", { style: styles.subtitle, children: [totalQuestions, " question", totalQuestions !== 1 ? 's' : '', totalQuestions > 0 && ` (${foundCount} found on this page)`] })] })] }), _jsx("div", { style: styles.body, children: editingKey !== null ? (
+                /* ---- Edit mode ---- */
+                (() => {
+                    const editIndex = Number(editingKey);
+                    const editItem = allItems.find((it) => it.key === editingKey);
+                    return (_jsxs(_Fragment, { children: [_jsxs("div", { style: styles.editHeader, children: [_jsx("span", { children: '\u2753' }), _jsx("span", { children: editItem?.summary })] }), _jsxs("div", { style: {
+                                    display: 'flex',
+                                    gap: '0',
+                                    marginBottom: '12px',
+                                    borderRadius: '6px',
+                                    overflow: 'hidden',
+                                    border: '1px solid rgba(255,255,255,0.1)',
+                                }, children: [_jsx("button", { onClick: () => handleBeforeAfter('before'), style: {
+                                            flex: 1,
+                                            padding: '6px 12px',
+                                            border: 'none',
+                                            fontSize: '12px',
+                                            fontWeight: 600,
+                                            cursor: 'pointer',
+                                            background: previewMode === 'before' ? 'rgba(59,130,246,0.2)' : 'transparent',
+                                            color: previewMode === 'before' ? '#3b82f6' : '#64748b',
+                                        }, children: "Before" }), _jsx("button", { onClick: () => handleBeforeAfter('after'), style: {
+                                            flex: 1,
+                                            padding: '6px 12px',
+                                            border: 'none',
+                                            borderLeft: '1px solid rgba(255,255,255,0.1)',
+                                            fontSize: '12px',
+                                            fontWeight: 600,
+                                            cursor: 'pointer',
+                                            background: previewMode === 'after' ? 'rgba(59,130,246,0.2)' : 'transparent',
+                                            color: previewMode === 'after' ? '#3b82f6' : '#64748b',
+                                        }, children: "After" })] }), renderEditFields(editIndex), _jsx("button", { style: styles.editBackButton, onClick: handleBackToList, children: "\u2190 List" })] }));
+                })()) : (
+                /* ---- List mode ---- */
+                _jsxs(_Fragment, { children: [allItems.length === 0 && (_jsx("div", { style: styles.emptyState, children: "No FAQ questions configured." })), activeItems.length > 0 && (_jsxs(_Fragment, { children: [_jsxs("div", { style: styles.groupHeader, children: [_jsx("span", { children: "FAQ" }), _jsx("span", { style: styles.groupCount, children: activeItems.length })] }), activeItems.map((item) => {
+                                    const detection = detectionMap.get(item.key);
+                                    return (_jsxs("div", { style: styles.card, "data-item-key": item.key, onMouseEnter: () => handleCardHover(item), onMouseLeave: handleCardLeave, children: [item.trigger !== 'All pages' && (_jsxs("div", { "data-trigger": true, style: styles.triggerLine, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    handleTriggerClick(item);
+                                                }, children: [_jsx("span", { children: '\u{1f4cd}' }), _jsx("span", { children: item.trigger })] })), _jsxs("div", { "data-card-body": true, style: styles.cardBody, onClick: () => handleCardBodyClick(item), children: [_jsx(DetectionBadge, { found: detection?.found ?? false }), _jsx("span", { style: styles.cardText, children: item.summary }), _jsx("button", { style: styles.dismissButton, onClick: (e) => {
+                                                            e.stopPropagation();
+                                                            handleDismiss(item.key);
+                                                        }, title: "Dismiss this question", children: "\u00D7" })] }), _jsxs("div", { style: styles.rationaleLine, children: ["WHY: ", item.rationale ? item.rationale.why : 'N/A'] })] }, item.key));
+                                })] })), dismissedItems.length > 0 && (_jsxs("div", { style: styles.dismissedSection, children: [_jsxs("div", { style: { ...styles.dismissedHeader, cursor: 'pointer' }, onClick: () => setDismissedOpen(!dismissedOpen), children: [_jsx("span", { children: dismissedOpen ? '\u25be' : '\u25b8' }), _jsxs("span", { children: ["Dismissed (", dismissedItems.length, ")"] })] }), dismissedOpen && (_jsx("div", { style: { marginTop: '6px' }, children: dismissedItems.map((item) => (_jsxs("div", { style: styles.dismissedCard, children: [_jsx("span", { style: { ...styles.cardText, textDecoration: 'line-through' }, children: item.summary }), _jsx("button", { style: {
+                                                    ...styles.dismissButton,
+                                                    color: '#3b82f6',
+                                                    fontSize: '11px',
+                                                }, onClick: (e) => {
+                                                    e.stopPropagation();
+                                                    handleRestore(item.key);
+                                                }, children: "Restore" })] }, item.key))) }))] }))] })) }), _jsxs("div", { style: styles.footer, children: [_jsx("button", { onClick: () => editor.save(), style: styles.saveButton, children: "Save Draft" }), _jsx("button", { onClick: handlePublish, style: styles.publishButton, children: "Publish" })] })] }));
 }
 /**
  * Editor panel configuration for the app registry.
  */
 export const editorPanel = {
     title: 'FAQ',
-    icon: '❓',
+    icon: '\u2753',
     description: 'FAQ accordion with per-item visibility',
 };
+export const editor = {
+    panel: editorPanel,
+    component: FAQEditor,
+};
 export default FAQEditor;