@syntrologie/adapt-faq 0.0.0-semantically-released

package/dist/FAQWidget.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Adaptive FAQ - FAQWidget Component
+ *
+ * React component that renders a collapsible Q&A accordion with per-item
+ * conditional visibility based on showWhen decision strategies.
+ *
+ * Demonstrates the compositional action pattern where child actions
+ * (faq:question) serve as configuration data for the parent widget.
+ */
+import type { FAQWidgetProps, FAQConfig, FAQWidgetRuntime } from './types';
+/**
+ * FAQWidget - Renders a collapsible Q&A accordion with per-item activation.
+ *
+ * This component demonstrates the compositional action pattern:
+ * - Parent (FAQWidget) receives `config.actions` array
+ * - Each action has optional `showWhen` for per-item visibility
+ * - Parent evaluates showWhen and filters visible questions
+ * - Parent manages expand state and re-rendering on context changes
+ */
+export declare function FAQWidget({ config, runtime, instanceId }: FAQWidgetProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Mountable widget interface for the runtime's WidgetRegistry.
+ */
+export declare const FAQMountableWidget: {
+    mount(container: HTMLElement, config?: FAQConfig & {
+        runtime?: FAQWidgetRuntime;
+        instanceId?: string;
+    }): () => void;
+};
+export default FAQWidget;
+//# sourceMappingURL=FAQWidget.d.ts.map

package/dist/FAQWidget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FAQWidget.d.ts","sourceRoot":"","sources":["../src/FAQWidget.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAGH,OAAO,KAAK,EAAE,cAAc,EAAqB,SAAS,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AA6N9F;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,cAAc,2CAuJxE;AAMD;;GAEG;AACH,eAAO,MAAM,kBAAkB;qBAEhB,WAAW,WACb,SAAS,GAAG;QAAE,OAAO,CAAC,EAAE,gBAAgB,CAAC;QAAC,UAAU,CAAC,EAAE,MAAM,CAAA;KAAE;CAuC3E,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/FAQWidget.js

@@ -0,0 +1,332 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Adaptive FAQ - FAQWidget Component
+ *
+ * React component that renders a collapsible Q&A accordion with per-item
+ * conditional visibility based on showWhen decision strategies.
+ *
+ * Demonstrates the compositional action pattern where child actions
+ * (faq:question) serve as configuration data for the parent widget.
+ */
+import { useEffect, useReducer, useMemo, useCallback, useState } from 'react';
+// ============================================================================
+// Styles
+// ============================================================================
+const baseStyles = {
+    container: {
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        maxWidth: '800px',
+        margin: '0 auto',
+    },
+    searchWrapper: {
+        marginBottom: '16px',
+    },
+    searchInput: {
+        width: '100%',
+        padding: '12px 16px',
+        borderRadius: '8px',
+        fontSize: '14px',
+        outline: 'none',
+        transition: 'border-color 0.15s ease',
+    },
+    accordion: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+    },
+    item: {
+        borderRadius: '8px',
+        overflow: 'hidden',
+        transition: 'box-shadow 0.15s ease',
+    },
+    question: {
+        width: '100%',
+        padding: '16px 20px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: '15px',
+        fontWeight: 500,
+        textAlign: 'left',
+        transition: 'background-color 0.15s ease',
+    },
+    chevron: {
+        fontSize: '18px',
+        transition: 'transform 0.2s ease',
+    },
+    answer: {
+        padding: '0 20px 16px 20px',
+        fontSize: '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',
+    },
+    emptyState: {
+        textAlign: 'center',
+        padding: '48px 24px',
+        fontSize: '14px',
+    },
+    noResults: {
+        textAlign: 'center',
+        padding: '32px 16px',
+        fontSize: '14px',
+    },
+};
+const themeStyles = {
+    light: {
+        container: {
+            backgroundColor: '#ffffff',
+            color: '#111827',
+        },
+        searchInput: {
+            backgroundColor: '#f9fafb',
+            border: '1px solid #e5e7eb',
+            color: '#111827',
+        },
+        item: {
+            backgroundColor: '#f9fafb',
+            border: '1px solid #e5e7eb',
+        },
+        itemExpanded: {
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.08)',
+        },
+        question: {
+            backgroundColor: 'transparent',
+            color: '#111827',
+        },
+        questionHover: {
+            backgroundColor: '#f3f4f6',
+        },
+        answer: {
+            color: '#4b5563',
+        },
+        category: {
+            backgroundColor: '#e0e7ff',
+            color: '#4338ca',
+        },
+        emptyState: {
+            color: '#9ca3af',
+        },
+    },
+    dark: {
+        container: {
+            backgroundColor: '#111827',
+            color: '#f9fafb',
+        },
+        searchInput: {
+            backgroundColor: '#1f2937',
+            border: '1px solid #374151',
+            color: '#f9fafb',
+        },
+        item: {
+            backgroundColor: '#1f2937',
+            border: '1px solid #374151',
+        },
+        itemExpanded: {
+            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+        },
+        question: {
+            backgroundColor: 'transparent',
+            color: '#f9fafb',
+        },
+        questionHover: {
+            backgroundColor: '#374151',
+        },
+        answer: {
+            color: '#9ca3af',
+        },
+        category: {
+            backgroundColor: '#312e81',
+            color: '#a5b4fc',
+        },
+        emptyState: {
+            color: '#6b7280',
+        },
+    },
+};
+function FAQItem({ item, isExpanded, onToggle, theme }) {
+    const [isHovered, setIsHovered] = useState(false);
+    const colors = themeStyles[theme];
+    const { question, answer, category } = item.config;
+    const itemStyle = {
+        ...baseStyles.item,
+        ...colors.item,
+        ...(isExpanded ? colors.itemExpanded : {}),
+    };
+    const questionStyle = {
+        ...baseStyles.question,
+        ...colors.question,
+        ...(isHovered ? colors.questionHover : {}),
+    };
+    const chevronStyle = {
+        ...baseStyles.chevron,
+        transform: isExpanded ? 'rotate(180deg)' : 'rotate(0deg)',
+    };
+    const answerStyle = {
+        ...baseStyles.answer,
+        ...colors.answer,
+        maxHeight: isExpanded ? '500px' : '0',
+        paddingBottom: isExpanded ? '16px' : '0',
+    };
+    const categoryStyle = {
+        ...baseStyles.category,
+        ...colors.category,
+    };
+    return (_jsxs("div", { style: itemStyle, children: [_jsxs("button", { style: questionStyle, onClick: onToggle, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), "aria-expanded": isExpanded, children: [_jsx("span", { children: question }), _jsx("span", { style: chevronStyle, children: "\u25BC" })] }), _jsxs("div", { style: answerStyle, "aria-hidden": !isExpanded, children: [category && _jsx("span", { style: categoryStyle, children: category }), _jsx("p", { style: { margin: 0 }, children: answer })] })] }));
+}
+// ============================================================================
+// FAQWidget Component
+// ============================================================================
+/**
+ * FAQWidget - Renders a collapsible Q&A accordion with per-item activation.
+ *
+ * This component demonstrates the compositional action pattern:
+ * - Parent (FAQWidget) receives `config.actions` array
+ * - Each action has optional `showWhen` for per-item visibility
+ * - Parent evaluates showWhen and filters visible questions
+ * - Parent manages expand state and re-rendering on context changes
+ */
+export function FAQWidget({ config, runtime, instanceId }) {
+    // Force re-render when context changes
+    const [, forceUpdate] = useReducer((x) => x + 1, 0);
+    // Track expanded question IDs
+    const [expandedIds, setExpandedIds] = useState(new Set());
+    // Search query state
+    const [searchQuery, setSearchQuery] = useState('');
+    // Subscribe to context changes for reactive updates
+    useEffect(() => {
+        const unsubscribe = runtime.context.subscribe(() => {
+            forceUpdate();
+        });
+        return unsubscribe;
+    }, [runtime.context]);
+    // Filter visible questions based on per-item showWhen
+    const visibleQuestions = useMemo(() => {
+        return config.actions.filter((q) => {
+            // No showWhen = always visible
+            if (!q.showWhen)
+                return true;
+            // Evaluate the decision strategy
+            const result = runtime.evaluateSync(q.showWhen);
+            return result.value;
+        });
+    }, [config.actions, runtime]);
+    // Apply search filter
+    const filteredQuestions = useMemo(() => {
+        if (!config.searchable || !searchQuery.trim()) {
+            return visibleQuestions;
+        }
+        const query = searchQuery.toLowerCase();
+        return visibleQuestions.filter((q) => q.config.question.toLowerCase().includes(query) ||
+            q.config.answer.toLowerCase().includes(query) ||
+            q.config.category?.toLowerCase().includes(query));
+    }, [visibleQuestions, searchQuery, config.searchable]);
+    // Resolve theme (auto → detect system preference)
+    const resolvedTheme = useMemo(() => {
+        if (config.theme !== 'auto')
+            return config.theme;
+        // Check system preference (SSR-safe)
+        if (typeof window !== 'undefined') {
+            return window.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        return 'light';
+    }, [config.theme]);
+    // Handle question toggle
+    const handleToggle = useCallback((id) => {
+        setExpandedIds((prev) => {
+            const next = new Set(prev);
+            if (config.expandBehavior === 'single') {
+                // Single mode: collapse all others
+                if (prev.has(id)) {
+                    return new Set();
+                }
+                return new Set([id]);
+            }
+            else {
+                // Multiple mode: toggle this one
+                if (prev.has(id)) {
+                    next.delete(id);
+                }
+                else {
+                    next.add(id);
+                }
+                return next;
+            }
+        });
+        // Publish toggle event for analytics
+        runtime.events.publish('faq:toggled', {
+            instanceId,
+            questionId: id,
+            expanded: !expandedIds.has(id),
+            timestamp: Date.now(),
+        });
+    }, [config.expandBehavior, runtime.events, instanceId, expandedIds]);
+    // Compute styles
+    const containerStyle = {
+        ...baseStyles.container,
+        ...themeStyles[resolvedTheme].container,
+    };
+    const searchInputStyle = {
+        ...baseStyles.searchInput,
+        ...themeStyles[resolvedTheme].searchInput,
+    };
+    const emptyStateStyle = {
+        ...baseStyles.emptyState,
+        ...themeStyles[resolvedTheme].emptyState,
+    };
+    // Empty state (no visible questions at all)
+    if (visibleQuestions.length === 0) {
+        return (_jsx("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: _jsx("div", { style: emptyStateStyle, children: "No FAQ questions available." }) }));
+    }
+    return (_jsxs("div", { style: containerStyle, "data-adaptive-id": instanceId, "data-adaptive-type": "adaptive-faq", children: [config.searchable && (_jsx("div", { style: baseStyles.searchWrapper, children: _jsx("input", { type: "text", placeholder: "Search questions...", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), style: searchInputStyle }) })), _jsx("div", { style: baseStyles.accordion, children: filteredQuestions.map((q) => (_jsx(FAQItem, { item: q, isExpanded: expandedIds.has(q.config.id), onToggle: () => handleToggle(q.config.id), theme: resolvedTheme }, q.config.id))) }), config.searchable && filteredQuestions.length === 0 && searchQuery && (_jsxs("div", { style: { ...baseStyles.noResults, ...themeStyles[resolvedTheme].emptyState }, children: ["No questions found matching \"", searchQuery, "\""] }))] }));
+}
+// ============================================================================
+// Mountable Widget Interface
+// ============================================================================
+/**
+ * Mountable widget interface for the runtime's WidgetRegistry.
+ */
+export const FAQMountableWidget = {
+    mount(container, config) {
+        // This is a simplified mount for non-React environments
+        // In practice, the runtime handles React rendering
+        const { runtime, instanceId: _instanceId = 'faq-widget', ...faqConfig } = config || {
+            expandBehavior: 'single',
+            searchable: false,
+            theme: 'auto',
+            actions: [],
+        };
+        // Create simple HTML fallback if no runtime
+        if (!runtime) {
+            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: #f9fafb; border-radius: 8px;">
+              <strong>${q.config.question}</strong>
+              <p style="margin-top: 8px; color: #4b5563;">${q.config.answer}</p>
+            </div>
+          `)
+                .join('')}
+        </div>
+      `;
+        }
+        return () => {
+            container.innerHTML = '';
+        };
+    },
+};
+export default FAQWidget;

package/dist/cdn.d.ts

@@ -0,0 +1,38 @@
+/**
+ * CDN Entry Point for Adaptive FAQ
+ *
+ * This module is bundled for CDN delivery and self-registers with the global
+ * SynOS app registry when loaded dynamically via the AppLoader.
+ */
+/**
+ * App manifest for registry registration.
+ * Follows the AppManifest interface expected by AppLoader/AppRegistry.
+ */
+export declare const manifest: {
+    id: string;
+    version: string;
+    name: string;
+    description: string;
+    runtime: {
+        actions: never[];
+        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;
+            };
+        }[];
+    };
+    metadata: {
+        isBuiltIn: boolean;
+    };
+};
+export default manifest;
+//# sourceMappingURL=cdn.d.ts.map

package/dist/cdn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cdn.d.ts","sourceRoot":"","sources":["../src/cdn.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH;;;GAGG;AACH,eAAO,MAAM,QAAQ;;;;;;;;;;;2BA2BixT,CAAC;8BAA8B,CAAC;;;;;;;;;;;;;CAdr0T,CAAC;AAaF,eAAe,QAAQ,CAAC"}

package/dist/cdn.js

@@ -0,0 +1,36 @@
+/**
+ * CDN Entry Point for Adaptive FAQ
+ *
+ * This module is bundled for CDN delivery and self-registers with the global
+ * SynOS app registry when loaded dynamically via the AppLoader.
+ */
+import { runtime } from './runtime';
+/**
+ * App manifest for registry registration.
+ * Follows the AppManifest interface expected by AppLoader/AppRegistry.
+ */
+export const manifest = {
+    id: 'faq',
+    version: runtime.version,
+    name: runtime.name,
+    description: runtime.description,
+    runtime: {
+        // FAQ is widget-based, no action executors
+        actions: [],
+        widgets: runtime.widgets,
+    },
+    metadata: {
+        isBuiltIn: false,
+    },
+};
+/**
+ * Self-register with global registry if available.
+ * This happens when loaded via script tag (UMD).
+ */
+if (typeof window !== 'undefined') {
+    const globalRegistry = window.__SYNOS_APP_REGISTRY__;
+    if (globalRegistry && typeof globalRegistry.register === 'function') {
+        globalRegistry.register(manifest);
+    }
+}
+export default manifest;

package/dist/editor.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Adaptive FAQ - Editor Component
+ *
+ * Visual editor panel for configuring FAQ questions.
+ */
+import type { EditorPanelProps } from './types';
+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 default FAQEditor;
+//# sourceMappingURL=editor.d.ts.map

package/dist/editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../src/editor.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAqMhD,wBAAgB,SAAS,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,2CAgNvE;AAED;;GAEG;AACH,eAAO,MAAM,WAAW;;;;CAIvB,CAAC;AAEF,eAAe,SAAS,CAAC"}