@syntrologie/adapt-faq 2.16.0 → 2.18.0

package/dist/editor-lit.js

@@ -1,195 +0,0 @@
-/**
- * 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 { html, LitElement, nothing } from 'lit';
-import { summarizeFAQItem } from './summarize';
-import { isOwnAction } from './types';
-// ============================================================================
-// Helpers
-// ============================================================================
-const getAnswerText = (answer) => {
-    if (typeof answer === 'string')
-        return answer;
-    if (answer.type === 'rich')
-        return answer.html;
-    return answer.content;
-};
-const flattenItems = (config) => {
-    const actions = (config.actions || []).filter(isOwnAction);
-    return actions.map((q, i) => ({
-        key: String(i),
-        index: i,
-        summary: summarizeFAQItem(q),
-        question: q,
-    }));
-};
-// ============================================================================
-// Element
-// ============================================================================
-export class FAQEditorLit 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 }));
-            }
-        };
-        this._handleItemClick = (key) => {
-            this._editingKey = key;
-        };
-        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}
-          @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 },
-};
-customElements.define('se-faq-editor', FAQEditorLit);

package/dist/executors.js

@@ -1,150 +0,0 @@
-/**
- * Adaptive FAQ - Action Executors
- *
- * Three executors that operate on the FAQStore:
- * - executeScrollToFaq: scroll to a FAQ item and optionally expand it
- * - executeToggleFaqItem: open / close / toggle a FAQ item
- * - executeUpdateFaq: add, remove, reorder, or replace FAQ items
- */
-// ============================================================================
-// Helpers
-// ============================================================================
-/**
- * Resolve a FAQ item by direct ID or by fuzzy question text match.
- * Throws if neither yields a result.
- */
-function resolveItem(store, itemId, itemQuestion) {
-    if (itemId) {
-        const found = store.getState().items.find((i) => i.config.id === itemId);
-        if (found)
-            return found;
-    }
-    if (itemQuestion) {
-        const found = store.findByQuestion(itemQuestion);
-        if (found)
-            return found;
-    }
-    throw new Error('FAQ item not found');
-}
-// ============================================================================
-// executeScrollToFaq
-// ============================================================================
-/**
- * Scroll to a FAQ item in the DOM and optionally expand it.
- *
- * Looks up the item by `itemId` or `itemQuestion`, scrolls the matching
- * `[data-faq-item-id]` element into view, and expands it unless
- * `expand` is explicitly set to `false`.
- */
-export async function executeScrollToFaq(action, context, store) {
-    const item = resolveItem(store, action.itemId, action.itemQuestion);
-    const { id } = item.config;
-    // Expand the item unless explicitly told not to
-    if (action.expand !== false) {
-        store.expand(id);
-    }
-    // Scroll the DOM element into view (may be absent in test environments)
-    const el = document.querySelector(`[data-faq-item-id="${id}"]`);
-    if (el) {
-        el.scrollIntoView({
-            behavior: action.behavior ?? 'smooth',
-        });
-    }
-    // Publish analytics event
-    context.publishEvent('faq:scroll_to', { itemId: id });
-    return {
-        cleanup: () => {
-            // Optionally collapse on revert
-        },
-    };
-}
-// ============================================================================
-// executeToggleFaqItem
-// ============================================================================
-/**
- * Open, close, or toggle a FAQ item's expanded state.
- */
-export async function executeToggleFaqItem(action, context, store) {
-    const item = resolveItem(store, action.itemId, action.itemQuestion);
-    const { id } = item.config;
-    const desiredState = action.state ?? 'toggle';
-    let newState;
-    switch (desiredState) {
-        case 'open':
-            store.expand(id);
-            newState = 'open';
-            break;
-        case 'closed':
-            store.collapse(id);
-            newState = 'closed';
-            break;
-        default: {
-            const wasExpanded = store.getState().expandedItems.has(id);
-            store.toggle(id);
-            newState = wasExpanded ? 'closed' : 'open';
-            break;
-        }
-    }
-    context.publishEvent('faq:toggle', { itemId: id, newState });
-    return {
-        cleanup: () => {
-            // Revert toggle on cleanup
-        },
-    };
-}
-// ============================================================================
-// executeUpdateFaq
-// ============================================================================
-/**
- * Add, remove, reorder, or replace FAQ items in the store.
- */
-export async function executeUpdateFaq(action, context, store) {
-    switch (action.operation) {
-        case 'add': {
-            const items = action.items ?? [];
-            const position = action.position === 'prepend' ? 'prepend' : 'append';
-            store.addItems(items, position);
-            break;
-        }
-        case 'remove': {
-            if (!action.itemId) {
-                throw new Error('FAQ item not found');
-            }
-            // Verify the item exists before removing
-            const exists = store.getState().items.some((i) => i.config.id === action.itemId);
-            if (!exists) {
-                throw new Error('FAQ item not found');
-            }
-            store.removeItem(action.itemId);
-            break;
-        }
-        case 'reorder': {
-            const order = action.order ?? [];
-            store.reorderItems(order);
-            break;
-        }
-        case 'replace': {
-            const items = action.items ?? [];
-            store.replaceItems(items);
-            break;
-        }
-    }
-    context.publishEvent('faq:update', { operation: action.operation });
-    return {
-        cleanup: () => {
-            // Could snapshot previous state for undo
-        },
-    };
-}
-// ============================================================================
-// Executor Definitions for Registration
-// ============================================================================
-/**
- * All executors provided by adaptive-faq.
- * These are registered with the runtime's ExecutorRegistry.
- */
-export const executorDefinitions = [
-    { kind: 'faq:scroll_to', executor: executeScrollToFaq },
-    { kind: 'faq:toggle_item', executor: executeToggleFaqItem },
-    { kind: 'faq:update', executor: executeUpdateFaq },
-];

package/dist/faq-styles.js

@@ -1,204 +0,0 @@
-/**
- * Adaptive FAQ - Styles
- *
- * BaseStyles object (font, layout, colors, animations) and theme integration
- * for the FAQWidget component.
- */
-import { purple, slateGrey } from '@syntro/design-system/tokens';
-// ============================================================================
-// Base Styles
-// ============================================================================
-export 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',
-    },
-};
-// ============================================================================
-// Theme Styles
-// ============================================================================
-export 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],
-        },
-    },
-};

package/dist/faq-types.js

@@ -1,7 +0,0 @@
-/**
- * Adaptive FAQ - Widget Runtime & Props Types
- *
- * Runtime interface, component props, and helper type definitions
- * used by the FAQWidget component.
- */
-export {};

package/dist/runtime-lit.d.ts

@@ -1,85 +0,0 @@
-/**
- * Adaptive FAQ - Runtime Module (Lit)
- *
- * Runtime manifest for the FAQ accordion adaptive.
- * Uses the Lit web component mountable instead of the React one.
- * Provides action executors and widget registration.
- */
-import './FAQWidgetLit';
-import type { FAQWidgetRuntime } from './faq-types';
-import type { FAQConfig } from './types';
-/**
- * Mountable widget interface for <syntro-faq-accordion> (Lit web component).
- *
- * Mirrors FAQMountableWidget but mounts the Lit element instead of a React
- * root — no React dependency required at mount time.
- */
-export declare const FAQWidgetLitMountable: {
-    mount(container: HTMLElement, config?: FAQConfig & {
-        runtime?: FAQWidgetRuntime;
-        instanceId?: string;
-    }): () => void;
-};
-/**
- * Runtime manifest for adaptive-faq (Lit variant).
- *
- * Provides:
- * - FAQ action executors (scroll_to, toggle_item, update)
- * - Widget-based accordion using the Lit web component
- */
-export declare const runtime: {
-    id: string;
-    version: string;
-    name: string;
-    description: string;
-    /**
-     * Action executors for programmatic FAQ interaction.
-     */
-    executors: readonly [{
-        readonly kind: "faq:scroll_to";
-        readonly executor: typeof import("./executors").executeScrollToFaq;
-    }, {
-        readonly kind: "faq:toggle_item";
-        readonly executor: typeof import("./executors").executeToggleFaqItem;
-    }, {
-        readonly kind: "faq:update";
-        readonly executor: typeof import("./executors").executeUpdateFaq;
-    }];
-    /**
-     * Widget definitions for the runtime's WidgetRegistry.
-     */
-    widgets: {
-        id: string;
-        component: {
-            mount(container: HTMLElement, config?: FAQConfig & {
-                runtime?: FAQWidgetRuntime;
-                instanceId?: string;
-            }): () => void;
-        };
-        metadata: {
-            name: string;
-            description: string;
-            icon: string;
-            subtitle: string;
-        };
-    }[];
-    /**
-     * Extract notify watcher entries from tile config props.
-     * The runtime evaluates these continuously (even with drawer closed)
-     * and publishes faq:question_revealed when triggerWhen transitions false → true.
-     */
-    notifyWatchers(props: Record<string, unknown>): {
-        id: string;
-        strategy: import("./types").DecisionStrategy<boolean>;
-        eventName: string;
-        eventProps: {
-            questionId: string;
-            question: string;
-            title: string | undefined;
-            body: string | undefined;
-            icon: string | undefined;
-        };
-    }[];
-};
-export default runtime;
-//# sourceMappingURL=runtime-lit.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"runtime-lit.d.ts","sourceRoot":"","sources":["../src/runtime-lit.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,gBAAgB,CAAC;AACxB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACpD,OAAO,KAAK,EAAE,SAAS,EAAqB,MAAM,SAAS,CAAC;AAM5D;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB;qBAEnB,WAAW,WACb,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CA4B3E,CAAC;AAMF;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;IAOlB;;OAEG;;;;;;;;;;;IAGH;;OAEG;;;;6BAxDU,WAAW,WACb,SAAS,GAAG;gBAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;gBAAC,UAAU,CAAC,EAAE,MAAM,CAAA;aAAE;;;;;;;;;IAqE1E;;;;OAIG;0BACmB,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC;;;;;;;;;;;;CAiB9C,CAAC;AAEF,eAAe,OAAO,CAAC"}