@syntrologie/adapt-faq 2.8.0-canary.13 → 2.8.0-canary.131

package/dist/FAQWidget.d.ts

@@ -7,54 +7,9 @@
  * Demonstrates the compositional action pattern where child actions
  * (faq:question) serve as configuration data for the parent widget.
  */
-import type { DecisionStrategy, FAQConfig } from './types';
-export interface FAQWidgetRuntime {
-    evaluateSync: <T>(strategy: DecisionStrategy<T>) => {
-        value: T;
-        isFallback: boolean;
-    };
-    context: {
-        subscribe: (callback: () => void) => () => void;
-    };
-    events: {
-        publish: (name: string, props?: Record<string, unknown>) => void;
-        subscribe?: (filterOrCallback: {
-            names?: string[];
-            patterns?: string[];
-            sources?: string[];
-        } | ((event: {
-            name: string;
-            props?: Record<string, unknown>;
-            ts: number;
-        }) => void), maybeCallback?: (event: {
-            name: string;
-            props?: Record<string, unknown>;
-            ts: number;
-        }) => void) => () => void;
-        getRecent?: (filter?: {
-            names?: string[];
-            patterns?: string[];
-        }, limit?: number) => Array<{
-            name: string;
-            props?: Record<string, unknown>;
-            ts: number;
-        }>;
-    };
-    state?: {
-        get: (key: string) => unknown;
-        set: (key: string, value: unknown) => void;
-    };
-    /** Event accumulator for reactive triggerWhen re-evaluation */
-    accumulator?: {
-        subscribe: (callback: () => void) => () => void;
-        register: (key: string, predicate: (event: any) => boolean) => void;
-    };
-}
-interface FAQWidgetProps {
-    config: FAQConfig;
-    runtime: FAQWidgetRuntime;
-    instanceId: string;
-}
+import type { FAQWidgetProps, FAQWidgetRuntime } from './faq-types';
+import type { FAQConfig } from './types';
+export type { FAQWidgetRuntime } from './faq-types';
 /**
  * FAQWidget - Renders a collapsible Q&A accordion with per-item activation.
  *
@@ -72,7 +27,7 @@ export declare const FAQMountableWidget: {
     mount(container: HTMLElement, config?: FAQConfig & {
         runtime?: FAQWidgetRuntime;
         instanceId?: string;
-    }): () => void;
+    }): (() => void) | undefined;
 };
 export default FAQWidget;
 //# sourceMappingURL=FAQWidget.d.ts.map

package/dist/FAQWidget.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FAQWidget.d.ts","sourceRoot":"","sources":["../src/FAQWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AASH,OAAO,KAAK,EACV,gBAAgB,EAEhB,SAAS,EAIV,MAAM,SAAS,CAAC;AA+CjB,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;AA+TD;;;;;;;;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"}
+{"version":3,"file":"FAQWidget.d.ts","sourceRoot":"","sources":["../src/FAQWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAUH,OAAO,KAAK,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,KAAK,EAEV,SAAS,EAIV,MAAM,SAAS,CAAC;AAEjB,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AA2KpD;;;;;;;;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;CA4B3E,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/FAQWidget.js

@@ -8,11 +8,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Demonstrates the compositional action pattern where child actions
  * (faq:question) serve as configuration data for the parent widget.
  */
-import { purple, slateGrey } from '@syntro/design-system/tokens';
+import { purple } from '@syntro/design-system/tokens';
 import { Marked } from 'marked';
 import React, { useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 const marked = new Marked({ async: false, gfm: true, breaks: true });
+import { baseStyles, themeStyles } from './faq-styles';
 // ============================================================================
 // Helpers
 // ============================================================================
@@ -27,7 +28,10 @@ function getAnswerText(answer) {
 /** Render an FAQAnswer based on its type */
 function renderAnswer(answer) {
     if (typeof answer === 'string') {
-        return _jsx("p", { style: { margin: 0 }, children: answer });
+        const html = marked.parse(answer);
+        return (
+        // biome-ignore lint/security/noDangerouslySetInnerHtml: content is CMS/config content, not user-controlled input
+        _jsx("div", { style: { margin: 0 }, "data-faq-markdown": "", dangerouslySetInnerHTML: { __html: html } }));
     }
     if (answer.type === 'rich') {
         // biome-ignore lint/security/noDangerouslySetInnerHtml: content is pre-sanitized by backend — FAQAnswer.html is CMS/config content, not user-controlled input
@@ -52,200 +56,6 @@ function resolveFeedbackConfig(feedback) {
 function getFeedbackPrompt(feedbackConfig) {
     return feedbackConfig.prompt || 'Was this helpful?';
 }
-// ============================================================================
-// Styles
-// ============================================================================
-const baseStyles = {
-    container: {
-        fontFamily: 'var(--sc-font-family, system-ui, -apple-system, sans-serif)',
-        maxWidth: '800px',
-        margin: '0 auto',
-    },
-    searchWrapper: {
-        marginBottom: '8px',
-    },
-    searchInput: {
-        width: '100%',
-        padding: '12px 16px',
-        borderRadius: '8px',
-        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: 'var(--sc-content-item-gap, 6px)',
-    },
-    item: {
-        borderRadius: 'var(--sc-content-border-radius, 8px)',
-        overflow: 'hidden',
-        transition: 'box-shadow 0.15s ease',
-    },
-    question: {
-        width: '100%',
-        padding: 'var(--sc-content-item-padding, 12px 16px)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        border: 'none',
-        cursor: 'pointer',
-        fontSize: 'var(--sc-content-item-font-size, 15px)',
-        fontWeight: 500,
-        textAlign: 'left',
-        transition: 'background-color 0.15s ease',
-    },
-    chevron: {
-        fontSize: '20px',
-        transition: 'transform 0.2s ease',
-        color: 'var(--sc-content-chevron-color, currentColor)',
-    },
-    answer: {
-        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',
-    },
-    category: {
-        display: 'inline-block',
-        fontSize: '11px',
-        fontWeight: 600,
-        textTransform: 'uppercase',
-        letterSpacing: '0.05em',
-        padding: '4px 8px',
-        borderRadius: '4px',
-        marginBottom: '8px',
-    },
-    categoryHeader: {
-        fontSize: 'var(--sc-content-category-font-size, 12px)',
-        fontWeight: 700,
-        textTransform: 'uppercase',
-        letterSpacing: '0.05em',
-        padding: 'var(--sc-content-category-padding, 8px 4px 4px 4px)',
-        marginTop: 'var(--sc-content-category-gap, 4px)',
-    },
-    feedback: {
-        display: 'flex',
-        alignItems: 'center',
-        gap: '8px',
-        marginTop: '12px',
-        paddingTop: '10px',
-        borderTop: '1px solid rgba(0, 0, 0, 0.08)',
-        fontSize: '13px',
-    },
-    feedbackButton: {
-        background: 'none',
-        border: '1px solid transparent',
-        cursor: 'pointer',
-        fontSize: '16px',
-        padding: '4px 8px',
-        borderRadius: '4px',
-        transition: 'background-color 0.15s ease, border-color 0.15s ease',
-    },
-    feedbackButtonSelected: {
-        borderColor: 'rgba(0, 0, 0, 0.2)',
-        backgroundColor: 'rgba(0, 0, 0, 0.04)',
-    },
-    emptyState: {
-        textAlign: 'center',
-        padding: '48px 24px',
-        fontSize: '14px',
-    },
-    noResults: {
-        textAlign: 'center',
-        padding: '32px 16px',
-        fontSize: '14px',
-    },
-};
-const themeStyles = {
-    light: {
-        container: {
-            backgroundColor: 'transparent',
-            color: 'inherit',
-        },
-        searchInput: {
-            border: `1px solid ${slateGrey[11]}`,
-        },
-        item: {
-            backgroundColor: 'var(--sc-content-background)',
-            borderTop: 'var(--sc-content-border)',
-            borderRight: 'var(--sc-content-border)',
-            borderBottom: 'var(--sc-content-border)',
-            borderLeft: 'var(--sc-content-border)',
-        },
-        itemExpanded: {
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
-        },
-        question: {
-            backgroundColor: 'transparent',
-            color: 'var(--sc-content-text-color)',
-        },
-        questionHover: {
-            backgroundColor: 'var(--sc-content-background-hover)',
-        },
-        answer: {
-            color: 'var(--sc-content-text-secondary-color)',
-        },
-        category: {
-            backgroundColor: purple[8],
-            color: purple[2],
-        },
-        categoryHeader: {
-            color: slateGrey[7],
-        },
-        emptyState: {
-            color: slateGrey[8],
-        },
-        feedbackPrompt: {
-            color: slateGrey[7],
-        },
-    },
-    dark: {
-        container: {
-            backgroundColor: 'transparent',
-            color: 'inherit',
-        },
-        searchInput: {
-            border: `1px solid ${slateGrey[5]}`,
-        },
-        item: {
-            backgroundColor: 'var(--sc-content-background)',
-            borderTop: 'var(--sc-content-border)',
-            borderRight: 'var(--sc-content-border)',
-            borderBottom: 'var(--sc-content-border)',
-            borderLeft: 'var(--sc-content-border)',
-        },
-        itemExpanded: {
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-        },
-        question: {
-            backgroundColor: 'transparent',
-            color: 'var(--sc-content-text-color)',
-        },
-        questionHover: {
-            backgroundColor: 'var(--sc-content-background-hover)',
-        },
-        answer: {
-            color: 'var(--sc-content-text-secondary-color)',
-        },
-        category: {
-            backgroundColor: purple[0],
-            color: purple[6],
-        },
-        categoryHeader: {
-            color: slateGrey[8],
-        },
-        emptyState: {
-            color: slateGrey[7],
-        },
-        feedbackPrompt: {
-            color: slateGrey[8],
-        },
-    },
-};
 function FAQItem({ item, isExpanded, isHighlighted, isLast, onToggle, theme, feedbackConfig, feedbackValue, onFeedback, }) {
     const [isHovered, setIsHovered] = useState(false);
     const colors = themeStyles[theme];
@@ -256,7 +66,8 @@ function FAQItem({ item, isExpanded, isHighlighted, isLast, onToggle, theme, fee
         ...(isExpanded ? colors.itemExpanded : {}),
         ...(isHighlighted
             ? {
-                boxShadow: '0 0 0 2px #6366f1, 0 0 12px rgba(99, 102, 241, 0.4)',
+                // purple[4] = #6a59ce — design system primary purple
+                boxShadow: `0 0 0 2px ${purple[4]}, 0 0 12px rgba(106, 89, 206, 0.4)`,
                 transition: 'box-shadow 0.3s ease',
             }
             : {}),
@@ -413,7 +224,7 @@ export function FAQWidget({ config, runtime, instanceId }) {
     }, [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) => {
+    const visibleQuestions = useMemo(() => (config.actions ?? []).filter((q) => {
         // No triggerWhen = always visible
         if (!q.triggerWhen)
             return true;
@@ -559,23 +370,6 @@ export const FAQMountableWidget = {
                 root.unmount();
             };
         }
-        // HTML fallback when React is not available
-        const questions = faqConfig.actions || [];
-        container.innerHTML = `
-      <div style="font-family: system-ui; max-width: 800px;">
-        ${questions
-            .map((q) => `
-          <div style="margin-bottom: 8px; padding: 16px; background: ${slateGrey[12]}; border-radius: 8px;">
-            <strong>${q.config.question}</strong>
-            <p style="margin-top: 8px; color: ${slateGrey[6]};">${getAnswerText(q.config.answer)}</p>
-          </div>
-        `)
-            .join('')}
-      </div>
-    `;
-        return () => {
-            container.innerHTML = '';
-        };
     },
 };
 export default FAQWidget;

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"}