@syntrologie/adapt-faq 0.0.0-semantically-released

package/dist/editor.js

@@ -0,0 +1,280 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Editor Styles
+// ============================================================================
+const styles = {
+    container: {
+        display: 'flex',
+        flexDirection: 'column',
+        height: '100%',
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+    },
+    header: {
+        padding: '16px',
+        borderBottom: '1px solid #334155',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+    },
+    backButton: {
+        padding: '6px 12px',
+        borderRadius: '6px',
+        border: 'none',
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        color: '#94a3b8',
+        fontSize: '13px',
+        cursor: 'pointer',
+    },
+    title: {
+        margin: 0,
+        fontSize: '15px',
+        fontWeight: 600,
+        color: '#f8fafc',
+    },
+    subtitle: {
+        margin: '2px 0 0 0',
+        fontSize: '11px',
+        color: '#64748b',
+    },
+    content: {
+        flex: 1,
+        overflow: 'auto',
+        padding: '16px',
+    },
+    section: {
+        marginBottom: '24px',
+    },
+    sectionTitle: {
+        fontSize: '12px',
+        fontWeight: 600,
+        color: '#94a3b8',
+        textTransform: 'uppercase',
+        letterSpacing: '0.05em',
+        marginBottom: '12px',
+    },
+    select: {
+        width: '100%',
+        padding: '10px 12px',
+        borderRadius: '6px',
+        border: '1px solid rgba(255,255,255,0.1)',
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        color: '#f8fafc',
+        fontSize: '13px',
+        cursor: 'pointer',
+    },
+    checkbox: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px',
+        fontSize: '13px',
+        color: '#d1d5db',
+        marginTop: '8px',
+    },
+    addButton: {
+        width: '100%',
+        padding: '12px',
+        borderRadius: '8px',
+        border: '1px dashed rgba(139, 92, 246, 0.3)',
+        background: 'rgba(139, 92, 246, 0.05)',
+        color: '#8b5cf6',
+        fontSize: '13px',
+        fontWeight: 600,
+        cursor: 'pointer',
+        marginBottom: '16px',
+    },
+    questionCard: {
+        padding: '12px',
+        borderRadius: '8px',
+        border: '1px solid rgba(255,255,255,0.08)',
+        background: 'rgba(255,255,255,0.02)',
+        marginBottom: '8px',
+    },
+    questionHeader: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        justifyContent: 'space-between',
+        marginBottom: '12px',
+    },
+    questionPreview: {
+        flex: 1,
+    },
+    questionText: {
+        fontSize: '14px',
+        fontWeight: 500,
+        color: '#f8fafc',
+        marginBottom: '4px',
+    },
+    answerPreview: {
+        fontSize: '12px',
+        color: '#64748b',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        maxWidth: '200px',
+    },
+    removeButton: {
+        padding: '4px 8px',
+        borderRadius: '4px',
+        border: 'none',
+        background: 'rgba(239, 68, 68, 0.1)',
+        color: '#ef4444',
+        fontSize: '12px',
+        cursor: 'pointer',
+        flexShrink: 0,
+    },
+    inputGroup: {
+        marginBottom: '8px',
+    },
+    inputLabel: {
+        display: 'block',
+        fontSize: '11px',
+        color: '#94a3b8',
+        marginBottom: '4px',
+    },
+    input: {
+        width: '100%',
+        padding: '8px 10px',
+        borderRadius: '4px',
+        border: '1px solid rgba(255,255,255,0.1)',
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        color: '#f8fafc',
+        fontSize: '13px',
+    },
+    textarea: {
+        width: '100%',
+        padding: '8px 10px',
+        borderRadius: '4px',
+        border: '1px solid rgba(255,255,255,0.1)',
+        backgroundColor: 'rgba(255,255,255,0.05)',
+        color: '#f8fafc',
+        fontSize: '13px',
+        minHeight: '80px',
+        resize: 'vertical',
+        fontFamily: 'inherit',
+    },
+    emptyState: {
+        textAlign: 'center',
+        padding: '32px 16px',
+        color: '#64748b',
+        fontSize: '13px',
+    },
+    footer: {
+        padding: '12px 16px',
+        borderTop: '1px solid #334155',
+        display: 'flex',
+        gap: '8px',
+    },
+    saveButton: {
+        flex: 1,
+        padding: '10px',
+        borderRadius: '8px',
+        border: 'none',
+        background: 'rgba(59, 130, 246, 0.15)',
+        color: '#3b82f6',
+        fontSize: '13px',
+        fontWeight: 600,
+        cursor: 'pointer',
+    },
+    publishButton: {
+        flex: 1,
+        padding: '10px',
+        borderRadius: '8px',
+        border: 'none',
+        background: '#22c55e',
+        color: 'white',
+        fontSize: '13px',
+        fontWeight: 600,
+        cursor: 'pointer',
+    },
+};
+// ============================================================================
+// FAQEditor Component
+// ============================================================================
+export function FAQEditor({ config, onChange, editor }) {
+    const typedConfig = config;
+    const questions = typedConfig.actions || [];
+    // Generate unique ID
+    const generateId = () => `q-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+    // Add a new question
+    const handleAddQuestion = () => {
+        const newQuestion = {
+            kind: 'faq:question',
+            config: {
+                id: generateId(),
+                question: 'New Question',
+                answer: 'Enter your answer here...',
+                category: undefined,
+            },
+            showWhen: null,
+        };
+        onChange({
+            ...config,
+            actions: [...questions, newQuestion],
+        });
+        editor.setDirty(true);
+    };
+    // Remove a question
+    const handleRemoveQuestion = (index) => {
+        const newQuestions = questions.filter((_, i) => i !== index);
+        onChange({
+            ...config,
+            actions: newQuestions,
+        });
+        editor.setDirty(true);
+    };
+    // Update a question
+    const handleUpdateQuestion = (index, updates) => {
+        const newQuestions = questions.map((q, i) => {
+            if (i !== index)
+                return q;
+            return {
+                ...q,
+                config: {
+                    ...q.config,
+                    ...updates,
+                },
+            };
+        });
+        onChange({
+            ...config,
+            actions: newQuestions,
+        });
+        editor.setDirty(true);
+    };
+    // Update expand behavior
+    const handleExpandBehaviorChange = (e) => {
+        onChange({
+            ...config,
+            expandBehavior: e.target.value,
+        });
+        editor.setDirty(true);
+    };
+    // Update theme
+    const handleThemeChange = (e) => {
+        onChange({
+            ...config,
+            theme: e.target.value,
+        });
+        editor.setDirty(true);
+    };
+    // Update searchable
+    const handleSearchableChange = (e) => {
+        onChange({
+            ...config,
+            searchable: e.target.checked,
+        });
+        editor.setDirty(true);
+    };
+    return (_jsxs("div", { style: styles.container, children: [_jsxs("div", { style: styles.header, children: [_jsx("button", { onClick: () => editor.navigateHome(), style: styles.backButton, children: "\u2190 Back" }), _jsxs("div", { children: [_jsx("h2", { style: styles.title, children: "FAQ Accordion" }), _jsx("p", { style: styles.subtitle, children: "Configure questions with per-item visibility" })] })] }), _jsxs("div", { style: styles.content, children: [_jsxs("div", { style: styles.section, children: [_jsx("div", { style: styles.sectionTitle, children: "Expand Behavior" }), _jsxs("select", { value: typedConfig.expandBehavior || 'single', onChange: handleExpandBehaviorChange, style: styles.select, children: [_jsx("option", { value: "single", children: "Single (one at a time)" }), _jsx("option", { value: "multiple", children: "Multiple (any number)" })] })] }), _jsxs("div", { style: styles.section, children: [_jsx("div", { style: styles.sectionTitle, children: "Theme" }), _jsxs("select", { value: typedConfig.theme || 'auto', onChange: handleThemeChange, style: styles.select, children: [_jsx("option", { value: "auto", children: "Auto (System)" }), _jsx("option", { value: "light", children: "Light" }), _jsx("option", { value: "dark", children: "Dark" })] }), _jsxs("label", { style: styles.checkbox, children: [_jsx("input", { type: "checkbox", checked: typedConfig.searchable || false, onChange: handleSearchableChange }), "Enable search/filter"] })] }), _jsxs("div", { style: styles.section, children: [_jsx("div", { style: styles.sectionTitle, children: "Questions" }), _jsx("button", { onClick: handleAddQuestion, style: styles.addButton, children: "+ Add Question" }), questions.map((q, index) => (_jsxs("div", { style: styles.questionCard, children: [_jsxs("div", { style: styles.questionHeader, children: [_jsxs("div", { style: styles.questionPreview, children: [_jsx("div", { style: styles.questionText, children: q.config.question }), _jsx("div", { style: styles.answerPreview, children: q.config.answer })] }), _jsx("button", { onClick: () => handleRemoveQuestion(index), style: styles.removeButton, children: "Remove" })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Question" }), _jsx("input", { type: "text", value: q.config.question, onChange: (e) => handleUpdateQuestion(index, { question: e.target.value }), style: styles.input })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Answer" }), _jsx("textarea", { value: q.config.answer, onChange: (e) => handleUpdateQuestion(index, { answer: e.target.value }), style: styles.textarea })] }), _jsxs("div", { style: styles.inputGroup, children: [_jsx("label", { style: styles.inputLabel, children: "Category (optional)" }), _jsx("input", { type: "text", value: q.config.category || '', onChange: (e) => handleUpdateQuestion(index, {
+                                                    category: e.target.value || undefined,
+                                                }), style: styles.input, placeholder: "e.g., Billing, Account, Features" })] })] }, q.config.id || index))), questions.length === 0 && (_jsx("div", { style: styles.emptyState, children: "No questions configured. Click the button above to add one." }))] })] }), _jsxs("div", { style: styles.footer, children: [_jsx("button", { onClick: () => editor.save(), style: styles.saveButton, children: "Save Draft" }), _jsx("button", { onClick: () => editor.publish(), style: styles.publishButton, children: "Publish" })] })] }));
+}
+/**
+ * Editor panel configuration for the app registry.
+ */
+export const editorPanel = {
+    title: 'FAQ',
+    icon: '❓',
+    description: 'FAQ accordion with per-item visibility',
+};
+export default FAQEditor;

package/dist/runtime.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Adaptive FAQ - Runtime Module
+ *
+ * Runtime manifest for the FAQ accordion adaptive.
+ * This is a widget-based adaptive with no action executors.
+ */
+/**
+ * Runtime manifest for adaptive-faq.
+ *
+ * Note: This adaptive is widget-based, not action-based.
+ * The `faq:question` actions are compositional - they're rendered by
+ * the widget, not executed by the runtime.
+ */
+export declare const runtime: {
+    id: string;
+    version: string;
+    name: string;
+    description: string;
+    /**
+     * No action executors - faq:question actions are compositional,
+     * meaning they serve as configuration for the FAQWidget.
+     */
+    executors: never[];
+    /**
+     * Widget definitions for the runtime's WidgetRegistry.
+     */
+    widgets: {
+        id: string;
+        component: {
+            mount(container: HTMLElement, config?: import("./types").FAQConfig & {
+                runtime?: import("./types").FAQWidgetRuntime;
+                instanceId?: string;
+            }): () => void;
+        };
+        metadata: {
+            name: string;
+            description: string;
+            icon: string;
+        };
+    }[];
+};
+export default runtime;
+//# sourceMappingURL=runtime.d.ts.map

package/dist/runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"runtime.d.ts","sourceRoot":"","sources":["../src/runtime.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAQH;;;;;;GAMG;AACH,eAAO,MAAM,OAAO;;;;;IAMlB;;;OAGG;;IAGH;;OAEG;;;;;uBAey/S,CAAC;0BAA8B,CAAC;;;;;;;;;CAH7hT,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/runtime.js

@@ -0,0 +1,43 @@
+/**
+ * Adaptive FAQ - Runtime Module
+ *
+ * Runtime manifest for the FAQ accordion adaptive.
+ * This is a widget-based adaptive with no action executors.
+ */
+import { FAQMountableWidget } from './FAQWidget';
+// ============================================================================
+// App Runtime Manifest
+// ============================================================================
+/**
+ * Runtime manifest for adaptive-faq.
+ *
+ * Note: This adaptive is widget-based, not action-based.
+ * The `faq:question` actions are compositional - they're rendered by
+ * the widget, not executed by the runtime.
+ */
+export const runtime = {
+    id: 'adaptive-faq',
+    version: '1.0.0',
+    name: 'FAQ Accordion',
+    description: 'Collapsible Q&A accordion with per-item conditional visibility',
+    /**
+     * No action executors - faq:question actions are compositional,
+     * meaning they serve as configuration for the FAQWidget.
+     */
+    executors: [],
+    /**
+     * Widget definitions for the runtime's WidgetRegistry.
+     */
+    widgets: [
+        {
+            id: 'adaptive-faq:accordion',
+            component: FAQMountableWidget,
+            metadata: {
+                name: 'FAQ Accordion',
+                description: 'Collapsible Q&A accordion with search',
+                icon: '❓',
+            },
+        },
+    ],
+};
+export default runtime;