@syntrologie/adapt-faq 2.13.0 → 2.15.0

package/dist/FAQWidgetLit.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Adaptive FAQ - FAQWidgetLit
+ *
+ * Lit web component equivalent of FAQWidget.tsx.
+ * Renders a collapsible Q&A accordion with search, category grouping,
+ * feedback, and markdown rendering — all as a custom element with no
+ * Shadow DOM (light DOM via createRenderRoot).
+ *
+ * Tag name: <syntro-faq-accordion>
+ *
+ * Decorator-free: uses `static override properties` (tsconfig has no
+ * experimentalDecorators).
+ */
+import { LitElement } from 'lit';
+import type { FAQWidgetRuntime } from './faq-types';
+import type { FAQConfig, FeedbackValue } from './types';
+/**
+ * <syntro-faq-accordion> — light-DOM Lit web component.
+ *
+ * Set properties imperatively (no attribute serialisation for objects):
+ *   el.faqConfig = { expandBehavior: 'single', ... };
+ *   el.runtime   = runtimeInstance;
+ *   el.instanceId = 'my-faq';
+ */
+export declare class FAQAccordionElement extends LitElement {
+    static properties: {
+        faqConfig: {
+            attribute: boolean;
+        };
+        runtime: {
+            attribute: boolean;
+        };
+        instanceId: {
+            type: StringConstructor;
+        };
+        _expandedIds: {
+            state: boolean;
+        };
+        _highlightId: {
+            state: boolean;
+        };
+        _searchQuery: {
+            state: boolean;
+        };
+        _feedbackState: {
+            state: boolean;
+        };
+        _hoveredId: {
+            state: boolean;
+        };
+    };
+    faqConfig: FAQConfig;
+    runtime: FAQWidgetRuntime | null;
+    instanceId: string;
+    _expandedIds: Set<string>;
+    _highlightId: string | null;
+    _searchQuery: string;
+    _feedbackState: Map<string, FeedbackValue>;
+    _hoveredId: string | null;
+    private _unsubContext;
+    private _unsubAccumulator;
+    private _unsubCta;
+    private _unsubDeepLink;
+    private _unsubSessionMetrics;
+    private _highlightTimer;
+    createRenderRoot(): this;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changedProps: Map<string, unknown>): void;
+    private _subscribeAll;
+    private _unsubscribeAll;
+    private _handleToggle;
+    private _handleFeedback;
+    private _visibleQuestions;
+    private _orderedQuestions;
+    private _filteredQuestions;
+    private _categoryGroups;
+    private _renderAnswer;
+    private _renderFeedback;
+    private _renderItem;
+    private _renderItems;
+    render(): import("lit-html").TemplateResult<1>;
+}
+export default FAQAccordionElement;
+//# sourceMappingURL=FAQWidgetLit.d.ts.map

package/dist/FAQWidgetLit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FAQWidgetLit.d.ts","sourceRoot":"","sources":["../src/FAQWidgetLit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAGH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAKhD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAEV,SAAS,EAGT,aAAa,EACd,MAAM,SAAS,CAAC;AA2DjB;;;;;;;GAOG;AACH,qBAAa,mBAAoB,SAAQ,UAAU;IAKjD,OAAgB,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;MAYxB;IAMF,SAAS,EAAE,SAAS,CAKlB;IAEF,OAAO,EAAE,gBAAgB,GAAG,IAAI,CAAQ;IAExC,UAAU,EAAE,MAAM,CAAgB;IAGlC,YAAY,EAAE,GAAG,CAAC,MAAM,CAAC,CAAa;IACtC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAQ;IACnC,YAAY,EAAE,MAAM,CAAM;IAC1B,cAAc,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAa;IACvD,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAGjC,OAAO,CAAC,aAAa,CAA6B;IAClD,OAAO,CAAC,iBAAiB,CAA6B;IACtD,OAAO,CAAC,SAAS,CAA6B;IAC9C,OAAO,CAAC,cAAc,CAA6B;IACnD,OAAO,CAAC,oBAAoB,CAA6B;IACzD,OAAO,CAAC,eAAe,CAA8C;IAM5D,gBAAgB;IAQhB,iBAAiB;IAKjB,oBAAoB;IAUpB,OAAO,CAAC,YAAY,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAWnD,OAAO,CAAC,aAAa;IAwGrB,OAAO,CAAC,eAAe;IAiBvB,OAAO,CAAC,aAAa;IA0BrB,OAAO,CAAC,eAAe;IAYvB,OAAO,CAAC,iBAAiB;IASzB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,eAAe;IAgBvB,OAAO,CAAC,aAAa;IAKrB,OAAO,CAAC,eAAe;IAsCvB,OAAO,CAAC,WAAW;IAmFnB,OAAO,CAAC,YAAY;IAcX,MAAM;CAmHhB;AAUD,eAAe,mBAAmB,CAAC"}

package/dist/FAQWidgetLit.js

@@ -0,0 +1,534 @@
+/**
+ * Adaptive FAQ - FAQWidgetLit
+ *
+ * Lit web component equivalent of FAQWidget.tsx.
+ * Renders a collapsible Q&A accordion with search, category grouping,
+ * feedback, and markdown rendering — all as a custom element with no
+ * Shadow DOM (light DOM via createRenderRoot).
+ *
+ * Tag name: <syntro-faq-accordion>
+ *
+ * Decorator-free: uses `static override properties` (tsconfig has no
+ * experimentalDecorators).
+ */
+import { purple } from '@syntro/design-system/tokens';
+import { html, LitElement, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { Marked } from 'marked';
+import { baseStyles, themeStyles } from './faq-styles';
+// ============================================================================
+// Utility — styleMap accepts Record<string, string | number | undefined>
+// but its TypeScript signature is overly narrow in some Lit versions.
+// Cast through unknown to avoid false positives when style values include
+// numeric CSS properties (fontWeight, lineHeight, etc.).
+// ============================================================================
+function sm(styles) {
+    return styles;
+}
+const marked = new Marked({ async: false, gfm: true, breaks: true });
+// ============================================================================
+// Helpers (mirrored from FAQWidget.tsx)
+// ============================================================================
+function getAnswerText(answer) {
+    if (typeof answer === 'string')
+        return answer;
+    if (answer.type === 'rich')
+        return answer.html;
+    return answer.content;
+}
+function renderAnswerHtml(answer) {
+    if (typeof answer === 'string') {
+        return marked.parse(answer);
+    }
+    if (answer.type === 'rich') {
+        return answer.html;
+    }
+    return marked.parse(answer.content);
+}
+function resolveFeedbackConfig(feedback) {
+    if (!feedback)
+        return null;
+    if (feedback === true)
+        return { style: 'thumbs' };
+    return feedback;
+}
+function getFeedbackPrompt(feedbackConfig) {
+    return feedbackConfig.prompt ?? 'Was this helpful?';
+}
+function resolveTheme(theme) {
+    if (theme && theme !== 'auto')
+        return theme;
+    if (typeof window !== 'undefined') {
+        return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+    return 'light';
+}
+// ============================================================================
+// FAQAccordionElement — Lit element
+// ============================================================================
+/**
+ * <syntro-faq-accordion> — light-DOM Lit web component.
+ *
+ * Set properties imperatively (no attribute serialisation for objects):
+ *   el.faqConfig = { expandBehavior: 'single', ... };
+ *   el.runtime   = runtimeInstance;
+ *   el.instanceId = 'my-faq';
+ */
+export class FAQAccordionElement extends LitElement {
+    constructor() {
+        // -----------------------------------------------------------------------
+        // Reactive properties (no decorators — tsconfig forbids experimentalDecorators)
+        // -----------------------------------------------------------------------
+        super(...arguments);
+        // -----------------------------------------------------------------------
+        // Property declarations
+        // -----------------------------------------------------------------------
+        this.faqConfig = {
+            expandBehavior: 'single',
+            searchable: false,
+            theme: 'auto',
+            actions: [],
+        };
+        this.runtime = null;
+        this.instanceId = 'faq-widget';
+        // Internal state
+        this._expandedIds = new Set();
+        this._highlightId = null;
+        this._searchQuery = '';
+        this._feedbackState = new Map();
+        this._hoveredId = null;
+        // Subscription cleanup handles
+        this._unsubContext = null;
+        this._unsubAccumulator = null;
+        this._unsubCta = null;
+        this._unsubDeepLink = null;
+        this._unsubSessionMetrics = null;
+        this._highlightTimer = null;
+    }
+    // -----------------------------------------------------------------------
+    // Light DOM — no Shadow DOM so CSS variables from the host page apply
+    // -----------------------------------------------------------------------
+    createRenderRoot() {
+        return this;
+    }
+    // -----------------------------------------------------------------------
+    // Lifecycle
+    // -----------------------------------------------------------------------
+    connectedCallback() {
+        super.connectedCallback();
+        this._subscribeAll();
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this._unsubscribeAll();
+        if (this._highlightTimer !== null) {
+            clearTimeout(this._highlightTimer);
+            this._highlightTimer = null;
+        }
+    }
+    // Re-subscribe when runtime changes (property may be set after connectedCallback)
+    updated(changedProps) {
+        if (changedProps.has('runtime')) {
+            this._unsubscribeAll();
+            this._subscribeAll();
+        }
+    }
+    // -----------------------------------------------------------------------
+    // Subscription management
+    // -----------------------------------------------------------------------
+    _subscribeAll() {
+        if (!this.runtime)
+            return;
+        // Context changes → force re-render
+        this._unsubContext = this.runtime.context.subscribe(() => {
+            this.requestUpdate();
+        });
+        // Accumulator changes → force re-render (for event_count triggerWhen)
+        if (this.runtime.accumulator?.subscribe) {
+            this._unsubAccumulator = this.runtime.accumulator.subscribe(() => {
+                this.requestUpdate();
+            });
+        }
+        // Session metric changes → force re-render (for session_metric triggerWhen)
+        if (this.runtime.sessionMetrics?.subscribe) {
+            this._unsubSessionMetrics = this.runtime.sessionMetrics.subscribe(() => {
+                this.requestUpdate();
+            });
+        }
+        // faq:open:* events from overlay CTA clicks
+        if (this.runtime.events.subscribe) {
+            // Check EventBus history for pending faq:open events
+            if (this.runtime.events.getRecent) {
+                const recentEvents = this.runtime.events.getRecent({ patterns: ['^action\\.tooltip_cta_clicked$', '^action\\.modal_cta_clicked$'] }, 10);
+                const pendingEvent = recentEvents
+                    .filter((e) => {
+                    const actionId = e.props?.actionId;
+                    return typeof actionId === 'string' && actionId.startsWith('faq:open:');
+                })
+                    .pop();
+                if (pendingEvent && Date.now() - pendingEvent.ts < 10000) {
+                    const questionId = pendingEvent.props.actionId.replace('faq:open:', '');
+                    this._expandedIds = new Set([questionId]);
+                    requestAnimationFrame(() => {
+                        const el = document.querySelector(`[data-faq-item-id="${questionId}"]`);
+                        if (el)
+                            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                    });
+                }
+            }
+            this._unsubCta = this.runtime.events.subscribe({ patterns: ['^action\\.tooltip_cta_clicked$', '^action\\.modal_cta_clicked$'] }, (event) => {
+                const actionId = event.props?.actionId;
+                if (typeof actionId !== 'string' || !actionId.startsWith('faq:open:'))
+                    return;
+                const questionId = actionId.replace('faq:open:', '');
+                this._expandedIds = new Set([questionId]);
+                requestAnimationFrame(() => {
+                    const el = document.querySelector(`[data-faq-item-id="${questionId}"]`);
+                    if (el)
+                        el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+                });
+                this.runtime?.events.publish('canvas.requestOpen');
+            });
+        }
+        // notification.deep_link events
+        if (this.runtime.events.subscribe) {
+            const handleDeepLink = (event) => {
+                const tileId = event.props?.tileId;
+                const itemId = event.props?.itemId;
+                if (tileId !== this.instanceId)
+                    return;
+                if (!itemId)
+                    return;
+                this._expandedIds = new Set([itemId]);
+                this._highlightId = itemId;
+                if (this._highlightTimer !== null)
+                    clearTimeout(this._highlightTimer);
+                this._highlightTimer = setTimeout(() => {
+                    this._highlightId = null;
+                    this._highlightTimer = null;
+                }, 1500);
+                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)
+            if (this.runtime.events.getRecent) {
+                const recent = this.runtime.events.getRecent({ names: ['notification.deep_link'] }, 5);
+                const pending = recent
+                    .filter((e) => e.props?.tileId === this.instanceId && e.props?.itemId)
+                    .pop();
+                if (pending && Date.now() - pending.ts < 10000) {
+                    handleDeepLink(pending);
+                }
+            }
+            this._unsubDeepLink = this.runtime.events.subscribe({ names: ['notification.deep_link'] }, handleDeepLink);
+        }
+    }
+    _unsubscribeAll() {
+        this._unsubContext?.();
+        this._unsubAccumulator?.();
+        this._unsubSessionMetrics?.();
+        this._unsubCta?.();
+        this._unsubDeepLink?.();
+        this._unsubContext = null;
+        this._unsubAccumulator = null;
+        this._unsubSessionMetrics = null;
+        this._unsubCta = null;
+        this._unsubDeepLink = null;
+    }
+    // -----------------------------------------------------------------------
+    // Handlers
+    // -----------------------------------------------------------------------
+    _handleToggle(id) {
+        const prev = this._expandedIds;
+        let next;
+        if (this.faqConfig.expandBehavior === 'single') {
+            next = prev.has(id) ? new Set() : new Set([id]);
+        }
+        else {
+            next = new Set(prev);
+            if (prev.has(id)) {
+                next.delete(id);
+            }
+            else {
+                next.add(id);
+            }
+        }
+        const willBeExpanded = !prev.has(id);
+        this._expandedIds = next;
+        this.runtime?.events.publish('faq:toggled', {
+            instanceId: this.instanceId,
+            questionId: id,
+            expanded: willBeExpanded,
+            timestamp: Date.now(),
+        });
+    }
+    _handleFeedback(itemId, question, value) {
+        const next = new Map(this._feedbackState);
+        next.set(itemId, value);
+        this._feedbackState = next;
+        this.runtime?.events.publish('faq:feedback', { itemId, question, value });
+    }
+    // -----------------------------------------------------------------------
+    // Computed helpers
+    // -----------------------------------------------------------------------
+    _visibleQuestions() {
+        return (this.faqConfig.actions ?? []).filter((q) => {
+            if (!q.triggerWhen)
+                return true;
+            if (!this.runtime)
+                return true;
+            const result = this.runtime.evaluateSync(q.triggerWhen);
+            return result.value;
+        });
+    }
+    _orderedQuestions(visible) {
+        if (this.faqConfig.ordering === 'priority') {
+            return [...visible].sort((a, b) => (b.config.priority ?? 0) - (a.config.priority ?? 0));
+        }
+        return visible;
+    }
+    _filteredQuestions(ordered) {
+        const q = this._searchQuery.trim().toLowerCase();
+        if (!this.faqConfig.searchable || !q)
+            return ordered;
+        return ordered.filter((item) => item.config.question.toLowerCase().includes(q) ||
+            getAnswerText(item.config.answer).toLowerCase().includes(q) ||
+            item.config.category?.toLowerCase().includes(q));
+    }
+    _categoryGroups(filtered) {
+        const groups = new Map();
+        for (const item of filtered) {
+            const cat = item.config.category;
+            if (!groups.has(cat))
+                groups.set(cat, []);
+            groups.get(cat).push(item);
+        }
+        return groups;
+    }
+    // -----------------------------------------------------------------------
+    // Render helpers
+    // -----------------------------------------------------------------------
+    _renderAnswer(answer) {
+        const html_str = renderAnswerHtml(answer);
+        return html `<div style="margin:0" data-faq-markdown="">${unsafeHTML(html_str)}</div>`;
+    }
+    _renderFeedback(item, feedbackConfig, feedbackValue, theme) {
+        const colors = themeStyles[theme];
+        const feedbackStyle = { ...baseStyles.feedback, ...colors.feedbackPrompt };
+        return html `
+      <div style=${styleMap(sm(feedbackStyle))}>
+        <span>${getFeedbackPrompt(feedbackConfig)}</span>
+        <button
+          type="button"
+          style=${styleMap(sm({
+            ...baseStyles.feedbackButton,
+            ...(feedbackValue === 'up' ? baseStyles.feedbackButtonSelected : {}),
+        }))}
+          aria-label="Thumbs up"
+          @click=${() => this._handleFeedback(item.config.id, item.config.question, 'up')}
+        >\uD83D\uDC4D</button>
+        <button
+          type="button"
+          style=${styleMap(sm({
+            ...baseStyles.feedbackButton,
+            ...(feedbackValue === 'down' ? baseStyles.feedbackButtonSelected : {}),
+        }))}
+          aria-label="Thumbs down"
+          @click=${() => this._handleFeedback(item.config.id, item.config.question, 'down')}
+        >\uD83D\uDC4E</button>
+      </div>
+    `;
+    }
+    _renderItem(item, isLast, theme, feedbackConfig) {
+        const colors = themeStyles[theme];
+        const isExpanded = this._expandedIds.has(item.config.id);
+        const isHighlighted = this._highlightId === item.config.id;
+        const isHovered = this._hoveredId === item.config.id;
+        const itemStyle = {
+            ...baseStyles.item,
+            ...colors.item,
+            ...(isExpanded ? colors.itemExpanded : {}),
+            ...(isHighlighted
+                ? {
+                    boxShadow: `0 0 0 2px ${purple[4]}, 0 0 12px rgba(106, 89, 206, 0.4)`,
+                    transition: 'box-shadow 0.3s ease',
+                }
+                : {}),
+            ...(!isLast ? { borderBottom: 'var(--sc-content-item-divider, none)' } : {}),
+        };
+        const questionStyle = {
+            ...baseStyles.question,
+            ...colors.question,
+            ...(isHovered ? colors.questionHover : {}),
+        };
+        const chevronStyle = {
+            ...baseStyles.chevron,
+            transform: isExpanded ? 'rotate(90deg)' : 'rotate(0deg)',
+        };
+        const answerStyle = {
+            ...baseStyles.answer,
+            ...colors.answer,
+            maxHeight: isExpanded ? '500px' : '0',
+            paddingBottom: isExpanded ? '16px' : '0',
+        };
+        return html `
+      <div
+        style=${styleMap(sm(itemStyle))}
+        data-faq-item-id=${item.config.id}
+      >
+        <button
+          type="button"
+          style=${styleMap(sm(questionStyle))}
+          aria-expanded=${isExpanded}
+          @click=${() => this._handleToggle(item.config.id)}
+          @mouseenter=${() => {
+            this._hoveredId = item.config.id;
+        }}
+          @mouseleave=${() => {
+            this._hoveredId = null;
+        }}
+        >
+          <span>${item.config.question}</span>
+          <span style=${styleMap(sm(chevronStyle))}>\u203A</span>
+        </button>
+
+        <div
+          style=${styleMap(sm(answerStyle))}
+          aria-hidden=${!isExpanded}
+        >
+          ${this._renderAnswer(item.config.answer)}
+          ${isExpanded && feedbackConfig
+            ? this._renderFeedback(item, feedbackConfig, this._feedbackState.get(item.config.id), theme)
+            : nothing}
+        </div>
+      </div>
+    `;
+    }
+    _renderItems(items, theme, feedbackConfig) {
+        return items.map((item, index) => this._renderItem(item, index === items.length - 1, theme, feedbackConfig));
+    }
+    // -----------------------------------------------------------------------
+    // Render
+    // -----------------------------------------------------------------------
+    render() {
+        const theme = resolveTheme(this.faqConfig.theme);
+        const colors = themeStyles[theme];
+        const feedbackConfig = resolveFeedbackConfig(this.faqConfig.feedback);
+        const visible = this._visibleQuestions();
+        const ordered = this._orderedQuestions(visible);
+        const filtered = this._filteredQuestions(ordered);
+        const hasCategories = filtered.some((q) => q.config.category);
+        const groups = hasCategories ? this._categoryGroups(filtered) : null;
+        const containerStyle = {
+            ...baseStyles.container,
+            ...colors.container,
+        };
+        const emptyStateStyle = {
+            ...baseStyles.emptyState,
+            ...colors.emptyState,
+        };
+        const categoryHeaderStyle = {
+            ...baseStyles.categoryHeader,
+            ...colors.categoryHeader,
+        };
+        const searchInputStyle = {
+            ...baseStyles.searchInput,
+            ...colors.searchInput,
+        };
+        // Empty state — no visible questions at all
+        if (visible.length === 0) {
+            return html `
+        <div
+          style=${styleMap(sm(containerStyle))}
+          data-adaptive-id=${this.instanceId}
+          data-adaptive-type="adaptive-faq"
+        >
+          <div style=${styleMap(sm(emptyStateStyle))}>
+            You're all set for now! We'll surface answers here when they're relevant to what
+            you're doing.
+          </div>
+        </div>
+      `;
+        }
+        return html `
+      <div
+        style=${styleMap(sm(containerStyle))}
+        data-adaptive-id=${this.instanceId}
+        data-adaptive-type="adaptive-faq"
+      >
+        ${this.faqConfig.searchable
+            ? html `
+              <div style=${styleMap(sm(baseStyles.searchWrapper))}>
+                <style>
+                  [data-adaptive-id="${this.instanceId}"] input::placeholder {
+                    color: var(--sc-content-search-color, inherit);
+                    opacity: 0.7;
+                  }
+                </style>
+                <input
+                  type="text"
+                  placeholder="Search questions..."
+                  .value=${this._searchQuery}
+                  style=${styleMap(sm(searchInputStyle))}
+                  @input=${(e) => {
+                this._searchQuery = e.target.value;
+            }}
+                />
+              </div>
+            `
+            : nothing}
+
+        <div style=${styleMap(sm(baseStyles.accordion))}>
+          ${groups
+            ? Array.from(groups.entries()).map(([category, items]) => html `
+                  ${category
+                ? html `
+                        <div
+                          style=${styleMap(sm(categoryHeaderStyle))}
+                          data-category-header=${category}
+                        >
+                          ${category}
+                        </div>
+                      `
+                : nothing}
+                  ${this._renderItems(items, theme, feedbackConfig)}
+                `)
+            : this._renderItems(filtered, theme, feedbackConfig)}
+        </div>
+
+        ${this.faqConfig.searchable && filtered.length === 0 && this._searchQuery
+            ? html `
+              <div
+                style=${styleMap(sm({ ...baseStyles.noResults, ...colors.emptyState }))}
+              >
+                No questions found matching &quot;${this._searchQuery}&quot;
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+}
+FAQAccordionElement.properties = {
+    // Public API — set from the outside
+    faqConfig: { attribute: false },
+    runtime: { attribute: false },
+    instanceId: { type: String },
+    // Internal reactive state (prefixed with _ to signal "private")
+    _expandedIds: { state: true },
+    _highlightId: { state: true },
+    _searchQuery: { state: true },
+    _feedbackState: { state: true },
+    _hoveredId: { state: true },
+};
+// ============================================================================
+// Custom element registration
+// ============================================================================
+if (!customElements.get('syntro-faq-accordion')) {
+    customElements.define('syntro-faq-accordion', FAQAccordionElement);
+}
+export default FAQAccordionElement;

package/dist/editor-lit.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Adaptive FAQ - Lit Editor Component
+ *
+ * Lit web component port of the React FAQ editor (editor.tsx).
+ * 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 { 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;
+        };
+    };
+    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>;
+}
+//# sourceMappingURL=editor-lit.d.ts.map

package/dist/editor-lit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor-lit.d.ts","sourceRoot":"","sources":["../src/editor-lit.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;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,CAoCrB;IAEO,MAAM;CAoChB"}