@syntrologie/adapt-faq 2.8.0-canary.31 → 2.8.0-canary.310

package/dist/runtime.js

@@ -1,66 +1,843 @@
-/**
- * Adaptive FAQ - Runtime Module
- *
- * Runtime manifest for the FAQ accordion adaptive.
- * Provides action executors and widget registration.
- */
-import { executorDefinitions } from './executors';
-import { FAQMountableWidget } from './FAQWidget';
-// ============================================================================
-// App Runtime Manifest
-// ============================================================================
-/**
- * Runtime manifest for adaptive-faq.
- *
- * Provides:
- * - FAQ action executors (scroll_to, toggle_item, update)
- * - Widget-based accordion (compositional faq:question actions)
- */
-export const runtime = {
-    id: 'adaptive-faq',
-    version: '2.0.0',
-    name: 'FAQ Accordion',
-    description: 'Collapsible Q&A accordion with actions, rich content, feedback, and personalization',
-    /**
-     * Action executors for programmatic FAQ interaction.
-     */
-    executors: executorDefinitions,
-    /**
-     * 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, categories, and feedback',
-                icon: '❓',
-                subtitle: 'Curated just for you.',
-            },
-        },
-    ],
-    /**
-     * 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) {
-        const actions = (props.actions ?? []);
-        return actions
-            .filter((a) => a.notify && a.triggerWhen)
-            .map((a) => ({
-            id: `faq:${a.config.id}`,
-            strategy: a.triggerWhen,
-            eventName: 'faq:question_revealed',
-            eventProps: {
-                questionId: a.config.id,
-                question: a.config.question,
-                title: a.notify.title,
-                body: a.notify.body,
-                icon: a.notify.icon,
-            },
-        }));
+import {
+  stripMountPlumbing
+} from "./chunk-IGCYULL7.js";
+import {
+  getAnswerText,
+  purple,
+  renderAnswerHtml,
+  slateGrey
+} from "./chunk-KRKRB4OL.js";
+import "./chunk-5WRI5ZAA.js";
+
+// src/executors.ts
+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");
+}
+async function executeScrollToFaq(action, context, store) {
+  const item = resolveItem(store, action.itemId, action.itemQuestion);
+  const { id } = item.config;
+  if (action.expand !== false) {
+    store.expand(id);
+  }
+  const el = document.querySelector(`[data-faq-item-id="${id}"]`);
+  if (el) {
+    el.scrollIntoView({
+      behavior: action.behavior ?? "smooth"
+    });
+  }
+  context.publishEvent("faq:scroll_to", { itemId: id });
+  return {
+    cleanup: () => {
+    }
+  };
+}
+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: () => {
+    }
+  };
+}
+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");
+      }
+      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: () => {
+    }
+  };
+}
+var executorDefinitions = [
+  { kind: "faq:scroll_to", executor: executeScrollToFaq },
+  { kind: "faq:toggle_item", executor: executeToggleFaqItem },
+  { kind: "faq:update", executor: executeUpdateFaq }
+];
+
+// src/FAQWidgetLit.ts
+import { html, LitElement, nothing } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+
+// src/faq-styles.ts
+var 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-item-border-radius, 10px)",
+    border: "var(--sc-content-item-border, 1px solid rgba(0, 0, 0, 0.08))",
+    background: "var(--sc-content-item-background, rgba(255, 255, 255, 0.5))",
+    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"
+  }
+};
+var 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]
+    }
+  }
+};
+
+// src/FAQWidgetLit.ts
+function sm(styles) {
+  return styles;
+}
+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";
+}
+var FAQAccordionElement = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    // -----------------------------------------------------------------------
+    // Property declarations
+    // -----------------------------------------------------------------------
+    this.faqConfig = {
+      expandBehavior: "single",
+      searchable: false,
+      theme: "auto",
+      actions: []
+    };
+    this.runtime = null;
+    this.instanceId = "faq-widget";
+    // Internal state
+    this._expandedIds = /* @__PURE__ */ new Set();
+    this._highlightId = null;
+    this._searchQuery = "";
+    this._feedbackState = /* @__PURE__ */ 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;
+    this._unsubContext = this.runtime.context.subscribe(() => {
+      this.requestUpdate();
+    });
+    if (this.runtime.accumulator?.subscribe) {
+      this._unsubAccumulator = this.runtime.accumulator.subscribe(() => {
+        this.requestUpdate();
+      });
+    }
+    if (this.runtime.sessionMetrics?.subscribe) {
+      this._unsubSessionMetrics = this.runtime.sessionMetrics.subscribe(() => {
+        this.requestUpdate();
+      });
+    }
+    if (this.runtime.events.subscribe) {
+      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 < 1e4) {
+          const questionId = pendingEvent.props.actionId.replace("faq:open:", "");
+          this._expandedIds = /* @__PURE__ */ 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 = /* @__PURE__ */ 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");
+        }
+      );
+    }
+    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 = /* @__PURE__ */ 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" });
+        });
+      };
+      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 < 1e4) {
+          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) ? /* @__PURE__ */ new Set() : /* @__PURE__ */ 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 = /* @__PURE__ */ 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
+    };
+    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>
+    `;
+  }
+};
+// -----------------------------------------------------------------------
+// Reactive properties (no decorators — tsconfig forbids experimentalDecorators)
+// -----------------------------------------------------------------------
+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 }
+};
+if (!customElements.get("syntro-faq-accordion")) {
+  customElements.define("syntro-faq-accordion", FAQAccordionElement);
+}
+
+// src/runtime.ts
+var DEFAULT_FAQ_CONFIG = {
+  expandBehavior: "single",
+  searchable: false,
+  theme: "auto",
+  actions: []
+};
+var FAQWidgetLitMountable = {
+  mount(container, config) {
+    const incoming = config ?? null;
+    const stripped = stripMountPlumbing(incoming);
+    const runtime2 = incoming?.runtime;
+    const instanceId = incoming?.instanceId ?? "faq-widget";
+    const faqConfig = incoming ? stripped : { ...DEFAULT_FAQ_CONFIG };
+    const el = document.createElement("syntro-faq-accordion");
+    Object.assign(el, {
+      faqConfig,
+      runtime: runtime2 ?? null,
+      instanceId
+    });
+    container.appendChild(el);
+    return () => el.remove();
+  }
+};
+var runtime = {
+  id: "adaptive-faq",
+  version: "2.0.0",
+  name: "FAQ Accordion",
+  description: "Collapsible Q&A accordion with actions, rich content, feedback, and personalization",
+  /**
+   * Action executors for programmatic FAQ interaction.
+   */
+  executors: executorDefinitions,
+  /**
+   * Widget definitions for the runtime's WidgetRegistry.
+   */
+  widgets: [
+    {
+      id: "adaptive-faq:accordion",
+      component: FAQWidgetLitMountable,
+      metadata: {
+        name: "FAQ Accordion",
+        description: "Collapsible Q&A accordion with search, categories, and feedback",
+        icon: "\u2753",
+        subtitle: "Curated just for you."
+      }
+    }
+  ],
+  /**
+   * 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) {
+    const actions = props.actions ?? [];
+    return actions.filter((a) => a.notify && a.triggerWhen).map((a) => ({
+      id: `faq:${a.config.id}`,
+      strategy: a.triggerWhen,
+      eventName: "faq:question_revealed",
+      eventProps: {
+        questionId: a.config.id,
+        question: a.config.question,
+        title: a.notify.title,
+        body: a.notify.body,
+        icon: a.notify.icon
+      }
+    }));
+  }
+};
+var runtime_default = runtime;
+export {
+  FAQWidgetLitMountable,
+  runtime_default as default,
+  runtime
 };
-export default runtime;
+//# sourceMappingURL=runtime.js.map