@syntrologie/adapt-faq 2.16.0 → 2.17.0

package/dist/runtime.js

@@ -1,94 +1,1249 @@
-/**
- * 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';
-import './FAQWidgetLit'; // registers <syntro-faq-accordion> custom element
-// ============================================================================
-// Lit Mountable Widget
-// ============================================================================
-/**
- * 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 const FAQWidgetLitMountable = {
-    mount(container, config) {
-        const { runtime, instanceId = 'faq-widget', ...faqConfig } = config ?? {
-            expandBehavior: 'single',
-            searchable: false,
-            theme: 'auto',
-            actions: [],
-        };
-        const el = document.createElement('syntro-faq-accordion');
-        Object.assign(el, {
-            faqConfig: faqConfig,
-            runtime: runtime ?? null,
-            instanceId,
+// 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 }
+];
+
+// ../../design-system/dist/tokens/colors.js
+var base = {
+  white: "#ffffff",
+  black: "#000000"
+};
+var brand = {
+  0: "#2c0b0a",
+  1: "#5b1715",
+  2: "#89221f",
+  3: "#b72e2a",
+  4: "#d44844",
+  5: "#dd6d69",
+  6: "#e5918f",
+  7: "#eeb6b4",
+  8: "#f6dada",
+  9: "#faebea"
+};
+var slateGrey = {
+  0: "#07080a",
+  1: "#0f1318",
+  2: "#0e1114",
+  3: "#1c222a",
+  4: "#2b333f",
+  5: "#394454",
+  6: "#475569",
+  7: "#677384",
+  8: "#87919f",
+  9: "#a8afba",
+  10: "#cbd0d7",
+  11: "#e8eaee",
+  12: "#f6f7f9"
+};
+var green = {
+  0: "#07230a",
+  1: "#0e4514",
+  2: "#16681e",
+  3: "#1d8a28",
+  4: "#24ad32",
+  5: "#4fbd5a",
+  6: "#7acd82",
+  7: "#a5deab",
+  8: "#d0eed3",
+  9: "#e5f6e7"
+};
+var yellow = {
+  0: "#301f09",
+  1: "#5f3e12",
+  2: "#8f5e1b",
+  3: "#be7d24",
+  4: "#ee9c2d",
+  5: "#f1b057",
+  6: "#f5c481",
+  7: "#f8d7ab",
+  8: "#fcebd5",
+  9: "#fdf5ea"
+};
+var red = {
+  0: "#330707",
+  1: "#660f0e",
+  2: "#991616",
+  3: "#cc1e1d",
+  4: "#ff2524",
+  5: "#ff5150",
+  6: "#ff7c7c",
+  7: "#ffa8a7",
+  8: "#ffd3d3",
+  9: "#ffe9e9"
+};
+var blue = {
+  0: "#051533",
+  1: "#0a2a66",
+  2: "#0f3f98",
+  3: "#1454cb",
+  4: "#1969fe",
+  5: "#4787fe",
+  6: "#75a5fe",
+  7: "#a3c3ff",
+  8: "#d1e1ff",
+  9: "#e8f0ff"
+};
+var orange = {
+  0: "#662500",
+  1: "#993d00",
+  2: "#cc5800",
+  3: "#ff7700",
+  4: "#fea85d",
+  5: "#fec58f",
+  6: "#ffd6ae",
+  7: "#fee6cd",
+  8: "#fff1e1",
+  9: "#fff8f0"
+};
+var purple = {
+  0: "#151229",
+  1: "#2a2452",
+  2: "#40357c",
+  3: "#5547a5",
+  4: "#6a59ce",
+  5: "#887ad8",
+  6: "#a69be2",
+  7: "#c3bdeb",
+  8: "#e1def5",
+  9: "#f0eefa"
+};
+var pink = {
+  0: "#37091f",
+  1: "#69123c",
+  2: "#9b1c58",
+  3: "#cd2575",
+  4: "#ff2e92",
+  5: "#ff58a8",
+  6: "#ff82be",
+  7: "#ffabd3",
+  8: "#ffd5e9",
+  9: "#ffeaf4"
+};
+var text = {
+  primary: slateGrey[10],
+  secondary: slateGrey[9],
+  tertiary: slateGrey[8]
+};
+var background = {
+  primary: slateGrey[2],
+  secondary: slateGrey[0]
+};
+var border = {
+  primary: slateGrey[4],
+  secondary: slateGrey[3]
+};
+var button = {
+  primary: {
+    text: base.white,
+    icon: base.white,
+    border: brand[3],
+    backgroundDefault: brand[3],
+    backgroundHover: brand[2]
+  },
+  neutral: {
+    text: slateGrey[10],
+    textHover: base.white,
+    icon: slateGrey[10],
+    iconHover: base.white,
+    border: slateGrey[4],
+    background: slateGrey[2]
+  },
+  link: {
+    text: base.white,
+    icon: base.white,
+    hover: brand[5]
+  },
+  error: {
+    text: red[5],
+    hover: red[6]
+  },
+  success: {
+    text: green[5],
+    hover: green[6]
+  }
+};
+var badge = {
+  slateGrey: {
+    content: slateGrey[10],
+    pillOutline: slateGrey[10],
+    borderPrimary: slateGrey[5],
+    borderSecondary: slateGrey[5],
+    background: slateGrey[3]
+  },
+  brand: {
+    content: brand[9],
+    pillOutline: brand[9],
+    borderPrimary: brand[6],
+    borderSecondary: brand[6],
+    background: brand[0]
+  },
+  red: {
+    content: red[8],
+    pillOutline: red[4],
+    borderPrimary: red[2],
+    borderSecondary: red[2],
+    background: red[0]
+  },
+  yellow: {
+    content: yellow[8],
+    pillOutline: yellow[4],
+    borderPrimary: yellow[2],
+    borderSecondary: yellow[2],
+    background: yellow[0]
+  },
+  green: {
+    content: green[8],
+    pillOutline: green[4],
+    borderPrimary: green[2],
+    borderSecondary: green[2],
+    background: green[0]
+  },
+  purple: {
+    content: purple[8],
+    pillOutline: purple[4],
+    borderPrimary: purple[2],
+    borderSecondary: purple[2],
+    background: purple[0]
+  },
+  blue: {
+    content: blue[8],
+    pillOutline: blue[4],
+    borderPrimary: blue[2],
+    borderSecondary: blue[2],
+    background: blue[0]
+  },
+  orange: {
+    content: orange[8],
+    pillOutline: orange[4],
+    borderPrimary: orange[2],
+    borderSecondary: orange[2],
+    background: orange[0]
+  },
+  pink: {
+    content: pink[8],
+    pillOutline: pink[4],
+    borderPrimary: pink[2],
+    borderSecondary: pink[2],
+    background: pink[0]
+  }
+};
+var badgeBanner = {
+  green: {
+    content: green[8],
+    border: green[2],
+    background: green[0]
+  },
+  yellow: {
+    content: yellow[8],
+    border: yellow[2],
+    background: yellow[0]
+  },
+  red: {
+    content: red[8],
+    border: red[2],
+    background: red[0]
+  }
+};
+var alert = {
+  green: {
+    content: green[1],
+    background: green[9]
+  },
+  yellow: {
+    content: yellow[1],
+    background: yellow[9]
+  },
+  red: {
+    content: red[1],
+    background: red[9]
+  }
+};
+var tag = {
+  content: slateGrey[10],
+  border: slateGrey[4],
+  background: slateGrey[3]
+};
+var menu = {
+  backgroundDefault: slateGrey[2],
+  backgroundHover: slateGrey[1],
+  selected: slateGrey[3]
+};
+var inputDropdown = {
+  background: slateGrey[2],
+  icon: slateGrey[10],
+  borderDefault: slateGrey[4],
+  borderSelected: brand[3],
+  textLabel: slateGrey[9],
+  textPlaceholder: slateGrey[8],
+  textHint: slateGrey[8]
+};
+var inputField = {
+  backgroundDefault: slateGrey[2],
+  backgroundDisabled: slateGrey[0],
+  textLabel: slateGrey[9],
+  textPlaceholder: slateGrey[8],
+  textHint: slateGrey[8],
+  textError: red[5],
+  iconDefault: slateGrey[9],
+  iconPlaceholder: slateGrey[10],
+  iconError: red[5],
+  borderDefault: slateGrey[4],
+  borderSelected: brand[3],
+  borderError: red[5]
+};
+var toggle = {
+  handleDefault: base.white,
+  handleDisabled: slateGrey[10],
+  off: {
+    backgroundDefault: slateGrey[4],
+    backgroundHover: slateGrey[5],
+    backgroundDisabled: slateGrey[4]
+  },
+  on: {
+    backgroundDefault: green[3],
+    backgroundHover: green[2],
+    backgroundDisabled: slateGrey[4]
+  }
+};
+var checkbox = {
+  off: {
+    backgroundDefault: "#00000000",
+    backgroundHover: slateGrey[5],
+    backgroundDisabled: slateGrey[2],
+    border: slateGrey[6]
+  },
+  on: {
+    backgroundDefault: green[0],
+    backgroundHover: green[1],
+    backgroundDisabled: slateGrey[2],
+    border: green[3]
+  }
+};
+var avatar = {
+  content: slateGrey[10],
+  background: slateGrey[4]
+};
+var progressBarSlider = {
+  background: slateGrey[4],
+  active: green[3]
+};
+var card = {
+  background: slateGrey[1],
+  content: slateGrey[9],
+  border: slateGrey[4]
+};
+var sidebar = {
+  backgroundDefault: slateGrey[1],
+  backgroundHover: slateGrey[3],
+  backgroundActive: slateGrey[4],
+  border: slateGrey[4],
+  contentPrimary: slateGrey[10],
+  contentSecondary: slateGrey[9],
+  contentTertiary: slateGrey[8]
+};
+var modal = {
+  background: slateGrey[1],
+  content: slateGrey[9],
+  border: slateGrey[4]
+};
+var tab = {
+  activeBackground: slateGrey[3],
+  activeContent: brand[5],
+  inactiveContent: slateGrey[9],
+  border: slateGrey[4]
+};
+var table = {
+  header: {
+    textDefault: slateGrey[9],
+    textHover: slateGrey[8],
+    backgroundDefault: slateGrey[1]
+  },
+  border: slateGrey[4],
+  cell: {
+    textPrimary: slateGrey[10],
+    textSecondary: slateGrey[9],
+    backgroundDefault: slateGrey[2],
+    backgroundHover: slateGrey[1]
+  }
+};
+var breadcrumbs = {
+  textPrimaryDefault: slateGrey[10],
+  textPrimaryHover: slateGrey[10],
+  textSecondaryDefault: slateGrey[8],
+  textSecondaryHover: slateGrey[9],
+  iconPrimary: slateGrey[10],
+  iconSecondary: slateGrey[8]
+};
+var loadingIndicator = {
+  background: green[1],
+  active: green[5]
+};
+var datePicker = {
+  textDefault: slateGrey[10],
+  textSelected: base.white,
+  textDisabled: slateGrey[7],
+  backgroundDefault: slateGrey[2],
+  backgroundMiddle: slateGrey[3],
+  backgroundSelected: brand[3],
+  border: slateGrey[4]
+};
+var scroll = slateGrey[9];
+
+// ../../design-system/dist/tokens/panel-shell.js
+var fab = {
+  /** Diameter in pixels. */
+  size: 56,
+  /** Inset from the panel's top-left corner in pixels. */
+  inset: 12,
+  /** Background color (always the brand black). */
+  background: base.black,
+  /** Icon / logo color. */
+  color: base.white,
+  /** Border — 2px brand red ring. */
+  border: `2px solid ${brand[3]}`,
+  /** Shadow when the panel is open (inner ring for "active" state). */
+  shadowOpen: "0 4px 24px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08)",
+  /** Shadow when the panel is closed. */
+  shadowClosed: "0 4px 24px rgba(0,0,0,0.6)"
+};
+
+// 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";
+import { Marked } from "marked";
+
+// 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-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"
+  }
+};
+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;
+}
+var marked = new Marked({ async: false, gfm: true, breaks: true });
+function getAnswerText(answer) {
+  if (typeof answer === "string") return answer;
+  if (answer.type === "rich") return answer.html;
+  return answer.content;
+}
+function renderAnswerHtml(answer) {
+  if (typeof answer === "string") {
+    return marked.parse(answer);
+  }
+  if (answer.type === "rich") {
+    return answer.html;
+  }
+  return marked.parse(answer.content);
+}
+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" });
         });
-        container.appendChild(el);
-        return () => el.remove();
-    },
-};
-// ============================================================================
-// 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,
-            },
-        }));
-    },
-};
-export default runtime;
+      };
+      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 FAQWidgetLitMountable = {
+  mount(container, config) {
+    const {
+      runtime: runtime2,
+      instanceId = "faq-widget",
+      ...faqConfig
+    } = config ?? {
+      expandBehavior: "single",
+      searchable: false,
+      theme: "auto",
+      actions: []
+    };
+    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
+};
+//# sourceMappingURL=runtime.js.map