@syntrologie/adapt-faq 2.16.0 → 2.17.0

package/dist/editor.d.ts

@@ -1,40 +1,36 @@
 /**
  * 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.
+ * Lit web component that displays FAQ question cards with inline editing,
+ * detection, dismiss/restore, and rationale display.
+ *
+ * Custom events:
+ *   navigate-home — user clicked back
+ *   dirty-change  — { dirty: boolean }
  */
-import { type EditorPanelProps, type FAQConfig, type FAQQuestionAction } from './types';
-export interface FlatItem {
-    key: string;
-    index: number;
-    summary: string;
-    trigger: string;
-    rationale?: {
-        why: string;
-        confidence?: number;
+import { LitElement } from 'lit';
+import { type FAQConfig } from './types';
+export declare class FAQEditorLit extends LitElement {
+    static properties: {
+        config: {
+            attribute: boolean;
+        };
+        onChange: {
+            attribute: boolean;
+        };
+        _editingKey: {
+            state: boolean;
+        };
     };
-    firstAnchor: string | null;
-    question: FAQQuestionAction;
+    config: FAQConfig | null;
+    onChange: ((updated: Record<string, unknown>) => void) | null;
+    private _editingKey;
+    createRenderRoot(): this;
+    private _handleBack;
+    private _handleItemClick;
+    private _handleFieldChange;
+    private _renderEditMode;
+    private _renderListMode;
+    render(): import("lit-html").TemplateResult<1>;
 }
-export declare function flattenItems(config: FAQConfig): FlatItem[];
-export declare function FAQEditor({ config, onChange, editor }: EditorPanelProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Editor panel configuration for the app registry.
- */
-export declare const editorPanel: {
-    title: string;
-    icon: string;
-    description: string;
-};
-export declare const editor: {
-    panel: {
-        title: string;
-        icon: string;
-        description: string;
-    };
-    component: typeof FAQEditor;
-};
-export default FAQEditor;
 //# sourceMappingURL=editor.d.ts.map

package/dist/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAqBH,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,2CA6WvE;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.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAGhD,OAAO,EAAkB,KAAK,SAAS,EAAuC,MAAM,SAAS,CAAC;AAqC9F,qBAAa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,UAAU;;;;;;;;;;MAIxB;IAEF,MAAM,EAAE,SAAS,GAAG,IAAI,CAAQ;IAChC,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC,GAAG,IAAI,CAAQ;IAErE,OAAO,CAAC,WAAW,CAAuB;IAEjC,gBAAgB;IAQzB,OAAO,CAAC,WAAW,CAMjB;IAEF,OAAO,CAAC,gBAAgB,CAEtB;IAEF,OAAO,CAAC,kBAAkB,CAaxB;IAIF,OAAO,CAAC,eAAe,CAsDrB;IAEF,OAAO,CAAC,eAAe,CAqCrB;IAEO,MAAM;CAoChB"}

package/dist/editor.js

@@ -1,326 +1,203 @@
-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 { ConditionStatusLine, DetectionBadge, DismissedSection, EditorBody, EditorCard, 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';
-function isRuleStrategy(s) {
-    return (typeof s === 'object' &&
-        s !== null &&
-        s.type === 'rules' &&
-        Array.isArray(s.rules));
+// src/editor.ts
+import { html, LitElement, nothing } from "lit";
+
+// src/summarize.ts
+var MAX_Q_LEN = 50;
+var MAX_A_LEN = 40;
+function truncate(text, max) {
+  if (text.length <= max) return text;
+  return `${text.slice(0, max).trimEnd()}...`;
 }
-function extractTargetingInfo(triggerWhen) {
-    if (!triggerWhen || !isRuleStrategy(triggerWhen)) {
-        return { pagePatterns: [], anchorSelectors: [], hasTargeting: false };
-    }
-    const pagePatterns = new Set();
-    const anchorSelectors = new Set();
-    for (const rule of triggerWhen.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 stripHtml(html2) {
+  return html2.replace(/<[^>]*>/g, "").trim();
 }
-function extractFirstPage(triggerWhen) {
-    const info = extractTargetingInfo(triggerWhen);
-    return info.pagePatterns[0] || null;
+function getAnswerPreview(answer) {
+  if (typeof answer === "string") return answer;
+  if (answer.type === "rich") return stripHtml(answer.html);
+  return answer.content.replace(/[*_#`]/g, "").trim();
 }
-function extractFirstAnchor(triggerWhen) {
-    const info = extractTargetingInfo(triggerWhen);
-    return info.anchorSelectors[0] || null;
+function summarizeFAQItem(item) {
+  const q = truncate(item.config.question, MAX_Q_LEN);
+  const a = truncate(getAnswerPreview(item.config.answer), MAX_A_LEN);
+  return `Q: "${q}" \u2014 ${a}`;
 }
-/** 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
-    }
+
+// src/types.ts
+var ACTION_NAMESPACE = "faq";
+function isOwnAction(action) {
+  return action.kind.startsWith(`${ACTION_NAMESPACE}:`);
 }
-// ============================================================================
-// Helpers
-// ============================================================================
-function getAnswerText(answer) {
-    if (typeof answer === 'string')
-        return answer;
-    if (answer.type === 'rich')
-        return answer.html;
-    return answer.content;
-}
-export 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.triggerWhen),
-        rationale: q.rationale,
-        firstAnchor: extractFirstAnchor(q.triggerWhen),
-        question: q,
-    }));
-}
-function filterConfig(config, dismissedKeys) {
-    const ownActions = (config.actions || []).filter(isOwnAction);
-    return {
-        ...config,
-        actions: ownActions.filter((_, i) => !dismissedKeys.has(String(i))),
+
+// src/editor.ts
+var getAnswerText = (answer) => {
+  if (typeof answer === "string") return answer;
+  if (answer.type === "rich") return answer.html;
+  return answer.content;
+};
+var flattenItems = (config) => {
+  const actions = (config.actions || []).filter(isOwnAction);
+  return actions.map((q, i) => ({
+    key: String(i),
+    index: i,
+    summary: summarizeFAQItem(q),
+    question: q
+  }));
+};
+var FAQEditorLit = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.config = null;
+    this.onChange = null;
+    this._editingKey = null;
+    // No auto-dirty on load — only dirty when user makes changes (matching React behavior).
+    // ---- Actions ----
+    this._handleBack = () => {
+      if (this._editingKey !== null) {
+        this._editingKey = null;
+      } else {
+        this.dispatchEvent(new CustomEvent("navigate-home", { bubbles: true }));
+      }
     };
-}
-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.triggerWhen);
-                // 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;
-}
-// ============================================================================
-// FAQEditor Component
-// ============================================================================
-export function FAQEditor({ config, onChange, editor }) {
-    const typedConfig = config;
-    const [dismissedKeys, setDismissedKeys] = useState(() => editor.getDismissedKeys?.() ?? new Set());
-    const [editingKey, setEditingKey] = useState(null);
-    const [_previewMode, setPreviewMode] = useState('after');
-    const [_hoveredKey, setHoveredKey] = useState(null);
-    // Sync dismissed keys back to navigation context on every change
-    useEffect(() => {
-        editor.setDismissedKeys?.(dismissedKeys);
-    }, [dismissedKeys, editor]);
-    // React to global before/after toggle from the panel
-    // biome-ignore lint/correctness/useExhaustiveDependencies: intentionally omitted — adding config/typedConfig/previewConfig would cause infinite re-renders since previewConfig triggers state updates
-    useEffect(() => {
-        const mode = editor.previewMode;
-        if (!mode)
-            return;
-        if (mode === 'before') {
-            // Remove all FAQ items — push a config with every item filtered out
-            const allKeys = new Set(flattenItems(typedConfig).map((item) => item.key));
-            const empty = filterConfig(typedConfig, allKeys);
-            editor.previewConfig(empty);
-        }
-        else {
-            // Restore the full config
-            editor.previewConfig(config);
-        }
-    }, [editor.previewMode]);
-    // If navigated here with an editKey, jump directly to that item's edit view
-    const initialConsumed = useRef(false);
-    useEffect(() => {
-        if (!initialConsumed.current) {
-            initialConsumed.current = true;
-            if (editor.initialEditKey != null) {
-                setEditingKey(String(editor.initialEditKey));
-            }
-            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;
-    // Live triggerWhen status for condition diagnostics
-    const triggerWhenItems = useMemo(() => allItems.map((item) => ({
-        id: item.key,
-        triggerWhen: item.question.triggerWhen,
-    })), [allItems]);
-    const triggerWhenStatuses = useTriggerWhenStatus(triggerWhenItems);
-    const handleDismiss = useCallback((key) => {
-        setDismissedKeys((prev) => {
-            const next = new Set(prev);
-            next.add(key);
-            return next;
-        });
-        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(async (item) => {
-        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);
-        }
-    }, [editor]);
-    const handleBackToList = useCallback(() => {
-        setEditingKey(null);
-        setPreviewMode('after');
-        editor.previewConfig(config);
-        editor.clearHighlight();
-    }, [editor, config]);
-    // Register back handler in panel header when editing
-    useEffect(() => {
-        editor.setBackHandler?.(editingKey !== null ? handleBackToList : null);
-        return () => editor.setBackHandler?.(null);
-    }, [editingKey, handleBackToList, editor]);
-    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 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) {
-            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", { 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 })] }));
+    this._handleItemClick = (key) => {
+      this._editingKey = key;
     };
-    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 ---- */
-                (() => {
-                    const editIndex = Number(editingKey);
-                    const editItem = allItems.find((it) => it.key === editingKey);
-                    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-mb-3 se-text-[13px] se-font-semibold se-text-slate-grey-10", children: [_jsx("span", { children: '\u2753' }), _jsx("span", { children: editItem?.summary })] }), renderEditFields(editIndex)] }));
-                })()) : (
-                /* ---- List mode ---- */
-                _jsxs(_Fragment, { children: [allItems.length === 0 && _jsx(EmptyState, { message: "No FAQ questions configured." }), activeItems.length > 0 && (_jsxs(_Fragment, { children: [_jsx(GroupHeader, { label: "FAQ", count: activeItems.length }), activeItems.map((item) => {
-                                    const detection = detectionMap.get(item.key);
-                                    return (_jsxs(EditorCard, { itemKey: item.key, onClick: () => handleCardBodyClick(item), onMouseEnter: () => handleCardHover(item), onMouseLeave: handleCardLeave, children: [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: (e) => {
-                                                    e.stopPropagation();
-                                                    handleTriggerClick(item);
-                                                }, 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, 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: 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);
-                                        }, children: "Restore" })] }, item.key))) }))] })) })] }));
-}
-/**
- * Editor panel configuration for the app registry.
- */
-export const editorPanel = {
-    title: 'FAQ',
-    icon: '\u2753',
-    description: 'FAQ accordion with per-item visibility',
+    this._handleFieldChange = (index, field, value) => {
+      if (!this.config || !this.onChange) return;
+      const ownActions = (this.config.actions || []).filter(isOwnAction).slice();
+      const q = { ...ownActions[index], config: { ...ownActions[index].config } };
+      q.config[field] = value;
+      ownActions[index] = q;
+      const otherActions = (this.config.actions || []).filter((a) => !isOwnAction(a));
+      const updated = { ...this.config, actions: [...otherActions, ...ownActions] };
+      this.onChange(updated);
+      this.dispatchEvent(new CustomEvent("dirty-change", { detail: { dirty: true }, bubbles: true }));
+    };
+    // ---- Render ----
+    this._renderEditMode = (item) => {
+      const q = item.question;
+      return html`
+      <div class="se-py-1">
+        <div class="se-flex se-items-center se-gap-2 se-mb-3 se-text-[13px] se-font-semibold se-text-text-primary">
+          <span>❓</span>
+          <span>${item.summary}</span>
+        </div>
+
+        <div class="se-mb-3">
+          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Question</label>
+          <input
+            type="text"
+            .value=${q.config.question}
+            @input=${(e) => this._handleFieldChange(item.index, "question", e.target.value)}
+            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm"
+          />
+        </div>
+
+        <div class="se-mb-3">
+          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Answer</label>
+          <textarea
+            .value=${getAnswerText(q.config.answer)}
+            @input=${(e) => this._handleFieldChange(item.index, "answer", e.target.value)}
+            rows="4"
+            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm se-resize-none"
+          ></textarea>
+        </div>
+
+        <div class="se-mb-3">
+          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Category</label>
+          <input
+            type="text"
+            .value=${q.config.category || ""}
+            placeholder="e.g., Billing, Account"
+            @input=${(e) => this._handleFieldChange(item.index, "category", e.target.value)}
+            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm"
+          />
+        </div>
+
+        ${q.rationale ? html`
+          <div>
+            <span class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">AI Rationale</span>
+            <div class="se-p-2 se-rounded se-border se-border-dashed se-border-border-primary se-bg-card-bg se-text-text-secondary se-text-xs se-mb-2">
+              ${q.rationale.why}
+            </div>
+          </div>
+        ` : nothing}
+      </div>
+    `;
+    };
+    this._renderListMode = (items) => {
+      if (items.length === 0) {
+        return html`<div class="se-text-center se-py-8 se-px-4 se-text-text-secondary se-text-sm">
+        No FAQ questions configured.
+      </div>`;
+      }
+      return html`
+      <div class="se-text-[11px] se-font-semibold se-uppercase se-tracking-wider se-text-text-secondary se-mb-2 se-px-1">
+        FAQ <span class="se-text-text-tertiary se-font-normal">${items.length}</span>
+      </div>
+      ${items.map(
+        (item) => html`
+        <div
+          data-item-key=${item.key}
+          data-card-body
+          @click=${() => this._handleItemClick(item.key)}
+          class="se-p-3 se-rounded-lg se-border se-border-border-primary se-bg-card-bg se-cursor-pointer se-mb-2 se-transition-all hover:se-border-pink-4/40 hover:se-bg-pink-4/5"
+        >
+          <div class="se-flex se-items-center se-gap-2">
+            <span class="se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap se-text-sm se-text-text-primary">
+              ${item.summary}
+            </span>
+          </div>
+          ${item.question.rationale ? html`
+            <div class="se-text-[10px] se-text-text-tertiary se-mt-1">
+              WHY: ${item.question.rationale.why}
+            </div>
+          ` : nothing}
+        </div>
+      `
+      )}
+    `;
+    };
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    if (!this.config) {
+      return html`<div class="se-p-8 se-text-center se-text-text-secondary se-text-sm">Loading...</div>`;
+    }
+    const items = flattenItems(this.config);
+    const editItem = this._editingKey !== null ? items.find((it) => it.key === this._editingKey) : null;
+    return html`
+      <div class="se-flex se-flex-col se-h-full">
+        <!-- Header (no Back button — panel provides that) -->
+        <div class="se-px-4 se-pt-3 se-pb-1">
+          <h2 class="se-m-0 se-text-base se-font-semibold se-text-text-primary">Review Questions</h2>
+          <p class="se-m-0 se-mt-0.5 se-text-xs se-text-text-secondary">
+            ${items.length} question${items.length !== 1 ? "s" : ""}
+          </p>
+        </div>
+
+        <div class="se-flex-1 se-overflow-auto se-p-4">
+          ${editItem ? html`
+            <button type="button" @click=${() => {
+      this._editingKey = null;
+    }}
+              class="se-mb-3 se-py-1 se-px-2 se-rounded se-border-none se-bg-card-bg se-text-text-secondary se-text-xs se-cursor-pointer"
+            >← Back to list</button>
+            ${this._renderEditMode(editItem)}
+          ` : this._renderListMode(items)}
+        </div>
+      </div>
+    `;
+  }
+};
+FAQEditorLit.properties = {
+  config: { attribute: false },
+  onChange: { attribute: false },
+  _editingKey: { state: true }
 };
-export const editor = {
-    panel: editorPanel,
-    component: FAQEditor,
+customElements.define("se-faq-editor", FAQEditorLit);
+export {
+  FAQEditorLit
 };
-export default FAQEditor;
+//# sourceMappingURL=editor.js.map