@syntrologie/adapt-faq 2.27.0 → 2.29.0

package/dist/chunk-AJELMQH5.js

@@ -0,0 +1,1671 @@
+import {
+  dispatchDiveDeeper,
+  stripMountPlumbing
+} from "./chunk-YNDAVOD7.js";
+import {
+  getAnswerText,
+  purple,
+  renderAnswerHtml,
+  slateGrey
+} from "./chunk-KRKRB4OL.js";
+import {
+  __privateAdd,
+  __privateGet,
+  __privateMethod,
+  __privateSet
+} from "./chunk-7DTOSQNC.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 }
+];
+
+// ../../canvas-sdk/dist/flip.js
+var FLIP_TRANSITION_MS = 360;
+var FLIP_CLEAR_BUFFER_MS = 120;
+function prefersReducedMotion() {
+  if (typeof window === "undefined")
+    return false;
+  return window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+}
+function flipStyles(scope, opts) {
+  const f = opts.ns;
+  const kf = opts.keyframePrefix;
+  return `
+      ${scope} [data-${f}-flip] {
+        position: relative;
+      }
+      /* --- 3D machinery: ONLY while the flip is animating --- */
+      /* Perspective (the composited GPU context) lives on the parent viewport,
+         gated to the animating window so the RESTING open face never sits on a
+         perspective layer (GPU/compositing hazard: rotateY+perspective at rest
+         blanks text on some Android GPUs, rasterizes soft everywhere). */
+      ${scope} [data-${f}-flip-viewport][data-${f}-flip-animating] {
+        perspective: 1000px;
+      }
+      ${scope} [data-${f}-flip][data-${f}-flip-animating] {
+        transform-style: preserve-3d;
+      }
+      ${scope} [data-${f}-flip][data-${f}-flip-animating] > [data-face] {
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+      }
+      ${scope} [data-${f}-flip][data-${f}-flip-animating] > [data-face="front"] {
+        position: relative;
+      }
+      ${scope} [data-${f}-flip][data-${f}-flip-animating] > [data-face="back"] {
+        position: absolute;
+        inset: 0;
+        transform: rotateY(180deg);
+      }
+      ${scope} [data-${f}-flip][data-${f}-flip-animating][data-${f}-flip-dir="in"] {
+        animation: ${kf}-in var(--vc-transition-duration, 240ms)
+          var(--vc-transition-easing, ease-out) forwards;
+      }
+      ${scope} [data-${f}-flip][data-${f}-flip-animating][data-${f}-flip-dir="out"] {
+        animation: ${kf}-out var(--vc-transition-duration, 240ms)
+          var(--vc-transition-easing, ease-out) forwards;
+      }
+      @keyframes ${kf}-in {
+        from { transform: perspective(1000px) rotateY(0deg); }
+        to { transform: perspective(1000px) rotateY(180deg); }
+      }
+      @keyframes ${kf}-out {
+        from { transform: perspective(1000px) rotateY(180deg); }
+        to { transform: perspective(1000px) rotateY(0deg); }
+      }
+      /* --- RESTING state: the active face is FLAT, the inactive face is gone --- */
+      ${scope} [data-${f}-flip]:not([data-${f}-flip-animating]) {
+        transform: none;
+      }
+      ${scope} [data-${f}-flip]:not([data-${f}-flip-animating]) > [data-face] {
+        position: relative;
+        transform: none;
+      }
+      ${scope} [data-${f}-flip]:not([data-${f}-flip-animating])[data-${f}-active-face="front"] > [data-face="back"] {
+        display: none;
+      }
+      ${scope} [data-${f}-flip]:not([data-${f}-flip-animating])[data-${f}-active-face="back"] > [data-face="front"] {
+        display: none;
+      }
+      @media (prefers-reduced-motion: reduce) {
+        ${scope} [data-${f}-flip] { animation: none; }
+      }
+    `;
+}
+var FlipController = class {
+  constructor(host, opts) {
+    this.openId = null;
+    this.activeFace = "front";
+    this.animating = false;
+    this.dir = "in";
+    this.settleTimer = null;
+    this.onAnimationEnd = (e) => {
+      if (e.animationName === `${this.keyframePrefix}-in` || e.animationName === `${this.keyframePrefix}-out`) {
+        this.settle();
+      }
+    };
+    this.settle = () => {
+      this.clearTimer();
+      this.animating = false;
+      if (this.activeFace === "front") {
+        this.openId = null;
+      }
+      this.host.requestUpdate();
+    };
+    this.host = host;
+    this.keyframePrefix = opts.keyframePrefix;
+    this.fallbackMs = opts.fallbackMs ?? FLIP_TRANSITION_MS;
+    this.clearBufferMs = opts.clearBufferMs ?? FLIP_CLEAR_BUFFER_MS;
+    host.addController(this);
+  }
+  hostDisconnected() {
+    this.clearTimer();
+  }
+  /**
+   * Open `id` to the DETAIL (back) face and flip to it. A re-open before a
+   * previous flip settled clears the pending settle and restarts cleanly. Under
+   * reduced motion, settles straight to the flat back face (no animation).
+   */
+  openTo(id) {
+    this.clearTimer();
+    this.openId = id;
+    this.activeFace = "back";
+    if (prefersReducedMotion()) {
+      this.animating = false;
+      this.host.requestUpdate();
+      return;
+    }
+    this.dir = "in";
+    this.animating = true;
+    this.settleTimer = setTimeout(this.settle, this.durationMs());
+    this.host.requestUpdate();
+  }
+  /**
+   * Flip from the DETAIL (back) face back to the LIST (front) face. With motion,
+   * `openId` is kept through the rotation (back face stays populated, never
+   * blank mid-flip) and cleared on settle; under reduced motion it clears
+   * synchronously.
+   */
+  back() {
+    this.activeFace = "front";
+    this.clearTimer();
+    if (prefersReducedMotion()) {
+      this.animating = false;
+      this.openId = null;
+    } else {
+      this.dir = "out";
+      this.animating = true;
+      this.settleTimer = setTimeout(this.settle, this.durationMs());
+    }
+    this.host.requestUpdate();
+  }
+  /**
+   * Hard reset to the front face — the open item is gone (removed / gated out),
+   * so there's nothing to keep mounted through a flip-out. Clears the timer and
+   * settles synchronously.
+   */
+  reset() {
+    this.clearTimer();
+    this.animating = false;
+    this.openId = null;
+    this.activeFace = "front";
+    this.host.requestUpdate();
+  }
+  clearTimer() {
+    if (this.settleTimer !== null) {
+      clearTimeout(this.settleTimer);
+      this.settleTimer = null;
+    }
+  }
+  /**
+   * The flip transition duration in ms, coupled to the CSS. Reads the computed
+   * `--vc-transition-duration` token off the host so the JS tear-down timer is
+   * ALWAYS `>=` the CSS transition — a host that sets the token slower than our
+   * fallback no longer blanks the back face before the flip finishes. Falls
+   * back to `fallbackMs` when the token is absent/unreadable/malformed.
+   */
+  durationMs() {
+    let tokenMs = 0;
+    if (typeof window !== "undefined" && typeof window.getComputedStyle === "function") {
+      try {
+        const raw = window.getComputedStyle(this.host).getPropertyValue("--vc-transition-duration").trim();
+        if (raw.endsWith("ms"))
+          tokenMs = Number.parseFloat(raw);
+        else if (raw.endsWith("s"))
+          tokenMs = Number.parseFloat(raw) * 1e3;
+      } catch {
+      }
+    }
+    if (!Number.isFinite(tokenMs))
+      tokenMs = 0;
+    return Math.max(tokenMs, this.fallbackMs) + (tokenMs > 0 ? this.clearBufferMs : 0);
+  }
+};
+
+// 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)"
+  },
+  // ── Master→detail takeover ──────────────────────────────────────────────
+  // Item 5: the detail view is a tight stack — back, then the QUESTION with the
+  // ANSWER hugging right below it (the old 12px flex gap between Q and A wasted
+  // vertical space and pushed the answer down). Row spacing is now set by
+  // explicit per-element margins, so gap:0 here.
+  detail: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "0",
+    minHeight: "0",
+    // Inset the master→detail takeover to match the list questions' padding so
+    // a single Q&A taking over the tile doesn't render flush to the edges.
+    // Vertical inset is tightened (12px→10px default) because the takeover lives
+    // in the fixed-height velvet deck band, where every px of chrome pushes the
+    // "Dive deeper" footer toward the card's overflow:hidden clip edge
+    // (BUG-1783496844). Horizontal stays 16px to keep alignment with the list.
+    padding: "var(--sc-content-item-padding, 10px 16px)"
+  },
+  detailBack: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "4px",
+    alignSelf: "flex-start",
+    background: "none",
+    border: "none",
+    padding: "4px 0",
+    // Clear space below the back control (was the container gap). Tightened
+    // 10px→6px to reclaim vertical room in the bounded deck band so the
+    // "Dive deeper" footer stays clear of the card clip edge (BUG-1783496844).
+    marginBottom: "6px",
+    cursor: "pointer",
+    fontSize: "13px",
+    fontWeight: 600,
+    opacity: 0.85
+  },
+  detailQuestion: {
+    fontSize: "var(--sc-content-item-font-size, 16px)",
+    fontWeight: 600,
+    lineHeight: 1.4,
+    // Tight to the answer — kill the wasted Q↔A gap.
+    marginBottom: "4px"
+  },
+  detailAnswer: {
+    fontSize: "var(--sc-content-body-font-size, 14px)",
+    lineHeight: 1.6,
+    // No longer a long scroll region — the answer render is line-clamped
+    // (detailAnswerClamp) and "Dive deeper" carries the user to the full answer
+    // in chat. flex:1 keeps the footer (dive-deeper + feedback) pinned below.
+    display: "flex",
+    flexDirection: "column",
+    flex: "1 1 auto",
+    minHeight: "0"
+  },
+  // The answer TEXT render, capped to a few readable lines with a visible
+  // ellipsis cap (a declared -webkit-line-clamp box — the clip battery treats
+  // this as an intentional ellipsis, not a hidden-content bug). The cap is
+  // token-tunable so a roomy surface can raise it.
+  detailAnswerClamp: {
+    margin: "0",
+    display: "-webkit-box",
+    // Default cap lowered 4→3 lines: the takeover renders inside the
+    // fixed-height velvet deck card (overflow:hidden), so a 4-line preview
+    // plus chrome pushed the "Dive deeper" footer past the clip edge on
+    // smaller decks / two-line questions (BUG-1783496844). 3 lines is a
+    // compact preview; "Dive deeper" carries the full answer to chat. Roomy
+    // surfaces can raise it via the token.
+    // Capital-W vendor prefix: lowercase `webkitLineClamp` emits
+    // `webkit-line-clamp` (no leading dash), which the CSS parser drops —
+    // this clamp silently never applied until 2026-07-23.
+    WebkitLineClamp: "var(--sc-faq-answer-clamp, 3)",
+    WebkitBoxOrient: "vertical",
+    overflow: "hidden",
+    // Shrink-ready: as a flex child of detailAnswer, yield space first so that
+    // WHEN a host bounds the tile height (definite deck-card height) the answer
+    // gives up lines before the pinned footer is ever clipped.
+    flex: "1 1 auto",
+    minHeight: "0"
+  },
+  // Footer row under the answer: the "Dive deeper" chip sits bottom-right.
+  detailFooter: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "8px",
+    // Tightened 8px→6px to reclaim deck-band vertical room (BUG-1783496844).
+    marginTop: "6px",
+    // Never shrink or clip the footer — the answer above yields space first.
+    flexShrink: 0
+  },
+  detailDiveDeeper: {
+    flex: "0 0 auto",
+    padding: "4px 10px",
+    borderRadius: "9999px",
+    border: "1px solid var(--sc-color-border, rgba(0,0,0,0.14))",
+    background: "transparent",
+    cursor: "pointer",
+    font: "600 12px/1.2 var(--sc-font-family, inherit)",
+    color: "var(--sc-color-primary, #3d8a5e)",
+    whiteSpace: "nowrap"
+  },
+  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/renderHealth.ts
+var BLANK_MIN_AREA = 60 * 60;
+function elementPath(el, stopAt) {
+  const seg = (e) => {
+    const tag = e.tagName.toLowerCase();
+    const cls = typeof e.className === "string" && e.className.trim() ? `.${e.className.trim().split(/\s+/)[0]}` : "";
+    return `${tag}${cls}`;
+  };
+  const parts = [seg(el)];
+  let cur = el.parentElement;
+  let hops = 0;
+  while (cur && cur !== stopAt && hops < 3) {
+    parts.unshift(seg(cur));
+    cur = cur.parentElement;
+    hops++;
+  }
+  return parts.join(">");
+}
+function hasClipOkAncestor(el, root) {
+  let cur = el;
+  while (cur && cur !== root.parentElement) {
+    if (cur.hasAttribute?.("data-clip-ok")) return true;
+    cur = cur.parentElement;
+  }
+  return false;
+}
+function measureRenderHealth(root) {
+  const clips = [];
+  const seen = /* @__PURE__ */ new Set();
+  const push = (f) => {
+    const k = `${f.path}|${f.over_px}`;
+    if (seen.has(k)) return;
+    seen.add(k);
+    clips.push(f);
+  };
+  let hasText = false;
+  let hasCompleteImage = false;
+  for (const el of root.querySelectorAll("*")) {
+    const cs = getComputedStyle(el);
+    if (cs.display === "none" || cs.visibility === "hidden") continue;
+    const r = el.getBoundingClientRect();
+    if (r.width === 0 || r.height === 0) continue;
+    const ownText = Array.from(el.childNodes).some(
+      (n) => n.nodeType === 3 && (n.textContent ?? "").trim().length > 0
+    );
+    if (ownText) hasText = true;
+    if (el.tagName === "IMG") {
+      const img = el;
+      if (img.complete && img.naturalWidth > 0 && img.dataset.imageError !== "true") {
+        hasCompleteImage = true;
+      }
+    }
+    if (ownText && el.scrollWidth > el.clientWidth + 1 && cs.textOverflow !== "ellipsis" && !hasClipOkAncestor(el, root)) {
+      push({ path: elementPath(el, root), over_px: el.scrollWidth - el.clientWidth });
+    }
+  }
+  const rect = root.getBoundingClientRect();
+  const area = rect.width * rect.height;
+  const blank = area >= BLANK_MIN_AREA && !hasText && !hasCompleteImage;
+  return { clips, blank };
+}
+function synEmit(name, props) {
+  if (typeof window === "undefined") return;
+  try {
+    const emit = window.SynOS?.runtime?.events?.emit;
+    if (typeof emit === "function") emit(name, props);
+  } catch {
+  }
+}
+var CLEAN = { clips: [], blank: false };
+function reportRenderHealth(root, opts) {
+  try {
+    const health = measureRenderHealth(root);
+    if (health.clips.length === 0 && !health.blank) return health;
+    const base = { ...opts.context ?? {}, widget_kind: opts.widgetKind };
+    if (health.blank) {
+      synEmit(`app:${opts.category}:blank`, base);
+      return health;
+    }
+    const paths = health.clips.map((c) => c.path).sort();
+    const over_px = health.clips.reduce((m, c) => Math.max(m, c.over_px), 0);
+    synEmit(`app:${opts.category}:clipped`, {
+      paths: paths.join(","),
+      over_px,
+      clip_count: health.clips.length,
+      ...base
+    });
+    return health;
+  } catch {
+    return CLEAN;
+  }
+}
+var _probe, _reported, _raf, _RenderHealthController_instances, schedule_fn, run_fn, cancel_fn;
+var RenderHealthController = class {
+  constructor(host, probe) {
+    __privateAdd(this, _RenderHealthController_instances);
+    __privateAdd(this, _probe);
+    __privateAdd(this, _reported, /* @__PURE__ */ new Set());
+    __privateAdd(this, _raf);
+    __privateSet(this, _probe, probe);
+    host.addController(this);
+  }
+  hostUpdated() {
+    __privateMethod(this, _RenderHealthController_instances, schedule_fn).call(this);
+  }
+  hostDisconnected() {
+    __privateMethod(this, _RenderHealthController_instances, cancel_fn).call(this);
+  }
+};
+_probe = new WeakMap();
+_reported = new WeakMap();
+_raf = new WeakMap();
+_RenderHealthController_instances = new WeakSet();
+schedule_fn = function() {
+  if (typeof window === "undefined") return;
+  if (__privateGet(this, _raf) !== void 0) return;
+  const raf = typeof window.requestAnimationFrame === "function" ? window.requestAnimationFrame.bind(window) : (cb) => window.setTimeout(() => cb(0), 0);
+  __privateSet(this, _raf, raf(() => {
+    window.setTimeout(() => {
+      __privateSet(this, _raf, void 0);
+      __privateMethod(this, _RenderHealthController_instances, run_fn).call(this);
+    }, 0);
+  }));
+};
+run_fn = function() {
+  try {
+    const probe = __privateGet(this, _probe).call(this);
+    if (!probe || !probe.root) return;
+    if (__privateGet(this, _reported).has(probe.stateKey)) return;
+    __privateGet(this, _reported).add(probe.stateKey);
+    reportRenderHealth(probe.root, probe);
+  } catch {
+  }
+};
+cancel_fn = function() {
+  if (__privateGet(this, _raf) !== void 0 && typeof window !== "undefined" && typeof window.cancelAnimationFrame === "function") {
+    window.cancelAnimationFrame(__privateGet(this, _raf));
+  }
+  __privateSet(this, _raf, void 0);
+};
+
+// 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 hashFaqId(text) {
+  let h = 5381;
+  for (let i = 0; i < text.length; i++) {
+    h = (Math.imul(h, 33) ^ text.charCodeAt(i)) >>> 0;
+  }
+  return h.toString(36);
+}
+function cssAttrEscape(value) {
+  return value.replace(/["\\]/g, "\\$&");
+}
+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 DEFAULT_INSTANCE_ID = "faq-widget";
+var _faqUidCounter = 0;
+var _FAQAccordionElement_instances, healthProbe_fn;
+var FAQAccordionElement = class extends LitElement {
+  constructor() {
+    super();
+    __privateAdd(this, _FAQAccordionElement_instances);
+    // -----------------------------------------------------------------------
+    // Property declarations
+    // -----------------------------------------------------------------------
+    this.faqConfig = {
+      expandBehavior: "single",
+      searchable: false,
+      theme: "auto",
+      actions: []
+    };
+    this.runtime = null;
+    this.instanceId = DEFAULT_INSTANCE_ID;
+    // Per-element generated scope uid, used ONLY when `instanceId` is left at the
+    // shared default so two default-id tiles don't cross-scope their injected
+    // <style> (both would otherwise target `[data-adaptive-id="faq-widget"]`).
+    // Generated lazily and once per element (see {@link _scopeId}).
+    this._generatedUid = null;
+    // Internal state.
+    // The master→detail takeover swaps the whole widget to a single Q&A (so a long
+    // answer never overflows the bounded velvet tile) via a FLIP: front = the
+    // question list, back = the open question's detail. The flip's state machine —
+    // open id, active face, animating flag, direction, and the token-coupled
+    // settle timer with its GPU-teardown/reduced-motion contract — lives in the
+    // shared canvas FlipController; the FAQ keeps only its own concerns (focus,
+    // ids, content) here. `sc-faq-flip` keyframes + the `faq` attribute namespace
+    // match what {@link _renderFlipStyles} emits.
+    this._flip = new FlipController(this, { keyframePrefix: "sc-faq-flip" });
+    this._highlightId = null;
+    this._searchQuery = "";
+    this._feedbackState = /* @__PURE__ */ new Map();
+    this._hoveredId = null;
+    // Focus management (a11y): after a flip renders, move focus to the face that
+    // just became active — the ‹ Back button on flip-to-back, and the originating
+    // question row on flip-to-front — so keyboard/AT users follow the takeover.
+    // Consumed (and cleared) in `updated()`. `_focusReturnId` remembers WHICH row
+    // opened the detail so focus returns to that exact row, not just the first.
+    this._pendingFocus = null;
+    this._focusReturnId = null;
+    // Subscription cleanup handles
+    this._unsubContext = null;
+    this._unsubAccumulator = null;
+    this._unsubStateChanged = null;
+    this._unsubCta = null;
+    this._unsubDeepLink = null;
+    this._unsubSessionMetrics = null;
+    this._highlightTimer = null;
+    // Compositional-child wiring — faq:question items the LLM mounts into this
+    // accordion's tile arrive as `element.compositional_append` events (see
+    // adaptive-chatbot's ItemHandler). Without this subscription the questions
+    // are published into the void and the accordion renders empty.
+    this._unsubCompositional = null;
+    this._tileId = null;
+    /** Instance ids already appended via the compositional bus — dedups
+     *  the subscribe-then-replay path (and re-subscribes on runtime change). */
+    this._llmAppendedIds = /* @__PURE__ */ new Set();
+    new RenderHealthController(this, () => __privateMethod(this, _FAQAccordionElement_instances, healthProbe_fn).call(this));
+  }
+  // Read-through accessors so the render + the flip test-suite see the flip
+  // state without duplicating it. `_openId` null = LIST view; a value = the open
+  // question. `_activeFace` drives the CSS rotateY.
+  get _openId() {
+    return this._flip.openId;
+  }
+  get _activeFace() {
+    return this._flip.activeFace;
+  }
+  get _flipAnimating() {
+    return this._flip.animating;
+  }
+  // -----------------------------------------------------------------------
+  // 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();
+    }
+    this._applyPendingFocus();
+  }
+  /**
+   * Move focus to the face that just became active after a flip (a11y). On
+   * flip-to-back, focus the ‹ Back button; on flip-to-front, focus the question
+   * row that originally opened the detail (so keyboard/AT users land back where
+   * they were). No-op when nothing is pending or the target isn't in the DOM
+   * yet (the flip-to-front row may not exist if the list changed).
+   */
+  _applyPendingFocus() {
+    if (this._pendingFocus === null) return;
+    const target = this._pendingFocus;
+    this._pendingFocus = null;
+    if (target === "back") {
+      const back = this.querySelector("[data-faq-back]");
+      back?.focus();
+      return;
+    }
+    const id = this._focusReturnId;
+    this._focusReturnId = null;
+    if (!id) return;
+    const row = this.querySelector(`[data-faq-item-id="${cssAttrEscape(id)}"] button`);
+    row?.focus();
+  }
+  // -----------------------------------------------------------------------
+  // Subscription management
+  // -----------------------------------------------------------------------
+  _subscribeAll() {
+    if (!this.runtime) return;
+    this._unsubContext = this.runtime.context.subscribe(() => {
+      this._reevaluateOpenAndUpdate();
+    });
+    if (this.runtime.accumulator?.subscribe) {
+      this._unsubAccumulator = this.runtime.accumulator.subscribe(() => {
+        this._reevaluateOpenAndUpdate();
+      });
+    }
+    if (this.runtime.sessionMetrics?.subscribe) {
+      this._unsubSessionMetrics = this.runtime.sessionMetrics.subscribe(() => {
+        this._reevaluateOpenAndUpdate();
+      });
+    }
+    if (this.runtime.events.subscribe) {
+      this._unsubStateChanged = this.runtime.events.subscribe({ names: ["state.changed"] }, () => {
+        this._reevaluateOpenAndUpdate();
+      });
+      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._openToDetail(questionId);
+        }
+      }
+      this._unsubCta = this.runtime.events.subscribe(
+        { patterns: ["^action\\.tooltip_cta_clicked$", "^action\\.modal_cta_clicked$"] },
+        (event) => {
+          const ts = event.ts;
+          if (typeof ts === "number" && Date.now() - ts >= 1e4) return;
+          const actionId = event.props?.actionId;
+          if (typeof actionId !== "string" || !actionId.startsWith("faq:open:")) return;
+          const questionId = actionId.replace("faq:open:", "");
+          this._openToDetail(questionId);
+          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._openToDetail(itemId);
+        this._highlightId = itemId;
+        if (this._highlightTimer !== null) clearTimeout(this._highlightTimer);
+        this._highlightTimer = setTimeout(() => {
+          this._highlightId = null;
+          this._highlightTimer = null;
+        }, 1500);
+      };
+      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"] },
+        (event) => {
+          const ts = event.ts;
+          if (typeof ts === "number" && Date.now() - ts >= 1e4) return;
+          handleDeepLink(event);
+        }
+      );
+    }
+    this._subscribeCompositional();
+  }
+  /**
+   * Subscribe to `element.compositional_*` events targeting this accordion's
+   * tile, and ask the element store to replay any items it already holds for
+   * us (covers the case where the accordion mounts AFTER the item did — the
+   * inline-slot hydration race that otherwise silently drops the question).
+   */
+  _subscribeCompositional() {
+    const bus = this.runtime?.events;
+    if (!bus?.subscribe) return;
+    this._tileId = this._resolveTileId();
+    if (!this._tileId) return;
+    const tileId = this._tileId;
+    this._unsubCompositional = bus.subscribe((event) => {
+      const props = event.props ?? {};
+      if (props.tile_id !== tileId) return;
+      const instanceId = String(props.instance_id ?? "");
+      if (event.name === "element.compositional_append") {
+        this._insertItem(
+          instanceId,
+          props.item,
+          props.position ?? "append"
+        );
+      } else if (event.name === "element.compositional_patch") {
+        this._patchItem(instanceId, props.item);
+      } else if (event.name === "element.compositional_remove") {
+        this._removeItem(instanceId);
+      }
+    });
+    bus.publish("element.compositional_replay_request", { tile_id: tileId });
+  }
+  /** Tile id for compositional filtering: the enclosing tile card's
+   *  `data-tile-id` (set by SyntroTileCard), falling back to `instanceId`
+   *  when the accordion is mounted outside a tile card. */
+  _resolveTileId() {
+    const anchor = this.closest("[data-tile-id]");
+    const fromDom = anchor?.getAttribute("data-tile-id");
+    if (fromDom) return fromDom;
+    return this.instanceId && this.instanceId !== DEFAULT_INSTANCE_ID ? this.instanceId : null;
+  }
+  /** Append (or prepend) a faq:question the LLM mounted. The wire shape is a
+   *  fully-formed `{kind, config}` envelope, so we store it verbatim. */
+  _insertItem(instanceId, item, position) {
+    if (!instanceId || !item?.config?.id) return;
+    if (this._llmAppendedIds.has(instanceId)) return;
+    this._llmAppendedIds.add(instanceId);
+    const actions = this.faqConfig.actions ?? [];
+    const next = position === "prepend" ? [item, ...actions] : [...actions, item];
+    this.faqConfig = { ...this.faqConfig, actions: next };
+  }
+  /** Replace an existing question's content (full replacement). */
+  _patchItem(instanceId, item) {
+    if (!instanceId || !item?.config) return;
+    const actions = this.faqConfig.actions ?? [];
+    const idx = actions.findIndex((a) => a.config.id === instanceId);
+    if (idx < 0) return;
+    const next = [...actions];
+    next[idx] = item;
+    if (this._flip.openId === instanceId && item.config.id !== instanceId) {
+      this._flip.openId = item.config.id;
+    }
+    this.faqConfig = { ...this.faqConfig, actions: next };
+    this._resetFaceIfOpenStale();
+  }
+  /** Remove a question by instance id. */
+  _removeItem(instanceId) {
+    if (!instanceId) return;
+    const actions = this.faqConfig.actions ?? [];
+    const next = actions.filter((a) => a.config.id !== instanceId);
+    if (next.length === actions.length) return;
+    this._llmAppendedIds.delete(instanceId);
+    if (this._flip.openId === instanceId) {
+      this._flip.reset();
+      this._pendingFocus = null;
+      this._focusReturnId = null;
+    }
+    this.faqConfig = { ...this.faqConfig, actions: next };
+  }
+  /**
+   * Re-evaluate whether the open question is still visible, then re-render.
+   * Called from the subscription-driven re-render paths (context / accumulator /
+   * sessionMetric changes). Those subscriptions can flip an open question's
+   * `triggerWhen` to false WITHOUT a compositional patch/remove — so without
+   * this hook the stale-open reset (`_resetFaceIfOpenStale`, otherwise only
+   * invoked on patch/remove) would never fire on the triggerWhen path, and an
+   * open question gated out this way would snap straight to the back face on
+   * re-appearance. `_resetFaceIfOpenStale` mutates reactive state (which itself
+   * schedules an update), and we still `requestUpdate()` for the no-op case.
+   */
+  _reevaluateOpenAndUpdate() {
+    this._resetFaceIfOpenStale();
+    this.requestUpdate();
+  }
+  /**
+   * If `_openId` no longer resolves against the visible/ordered list (gated out
+   * by triggerWhen, removed, or patched away), reset BOTH `_openId` and
+   * `_activeFace` to the front (and clear the pending a11y focus intent).
+   * Resolves against the SAME `ordered` list render() uses (visible + ordered,
+   * NOT search-filtered). Also cancels any pending back-clear timer. Invoked on
+   * compositional patch/remove AND on the subscription-driven re-render paths
+   * (via {@link _reevaluateOpenAndUpdate}) so the triggerWhen-gated-out case is
+   * genuinely covered. Keeping `_activeFace` on 'back' after the open id went
+   * stale is the bug this guards: render() would force the front face locally
+   * but leave state on 'back', so a later re-appearance snaps to the back face
+   * with no animation.
+   */
+  _resetFaceIfOpenStale() {
+    if (this._flip.openId === null) return;
+    const ordered = this._orderedQuestions(this._visibleQuestions());
+    const stillPresent = ordered.some((q) => q.config.id === this._flip.openId);
+    if (stillPresent) return;
+    this._flip.reset();
+    this._pendingFocus = null;
+    this._focusReturnId = null;
+  }
+  _unsubscribeAll() {
+    this._unsubContext?.();
+    this._unsubAccumulator?.();
+    this._unsubSessionMetrics?.();
+    this._unsubStateChanged?.();
+    this._unsubCta?.();
+    this._unsubDeepLink?.();
+    this._unsubCompositional?.();
+    this._unsubContext = null;
+    this._unsubAccumulator = null;
+    this._unsubSessionMetrics = null;
+    this._unsubStateChanged = null;
+    this._unsubCta = null;
+    this._unsubDeepLink = null;
+    this._unsubCompositional = null;
+  }
+  // -----------------------------------------------------------------------
+  // Handlers
+  // -----------------------------------------------------------------------
+  /**
+   * Master→detail takeover: tapping a list row opens its single-Q&A detail
+   * view (the whole widget swaps), so a long answer fills — and never
+   * overflows — the bounded velvet tile. There is no simultaneous multi-expand;
+   * one question owns the tile at a time.
+   */
+  _handleOpen(id) {
+    this._openToDetail(id);
+    this.runtime?.events.publish("faq:toggled", {
+      instanceId: this.instanceId,
+      questionId: id,
+      expanded: true,
+      timestamp: Date.now()
+    });
+  }
+  /**
+   * Put the widget into the DETAIL (back) face for `id` and flip to it. Shared
+   * by the tap handler and the event-driven entry points (faq:open CTA,
+   * notification.deep_link) so every "open this question" path flips the same
+   * way. Cancels any pending back-clear timer (a re-open before the flip-out
+   * finishes must keep the detail mounted). Remembers the originating question
+   * id so focus can return to that exact row on flip-to-front (a11y), and moves
+   * focus to the ‹ Back button once the back face renders.
+   */
+  _openToDetail(id) {
+    this._pendingFocus = "back";
+    this._focusReturnId = id;
+    this._flip.openTo(id);
+  }
+  /** Back affordance: FLIP from the detail (back) face to the list (front) face.
+   *  The FlipController keeps `openId` populated through the rotation (never
+   *  blank mid-flip) and clears it on settle — with reduced motion it clears
+   *  synchronously. Focus returns to the originating question row. */
+  _handleBack() {
+    const id = this._flip.openId;
+    this._pendingFocus = "front";
+    this._flip.back();
+    if (id !== null) {
+      this.runtime?.events.publish("faq:toggled", {
+        instanceId: this.instanceId,
+        questionId: id,
+        expanded: false,
+        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
+  // -----------------------------------------------------------------------
+  /**
+   * Unified render list. Merges compositionally-appended rows
+   * (`faqConfig.actions`, the container-then-stream path) with atomically
+   * authored rows (`faqConfig.questions`, the struct_list path) normalized
+   * into the same `FAQQuestionAction` shape. The atomic path is how the LLM
+   * mounts a complete FAQ in one call — so it renders whole, never empty.
+   */
+  _allQuestions() {
+    const compositional = this.faqConfig.actions ?? [];
+    const seen = /* @__PURE__ */ new Map();
+    const atomic = (this.faqConfig.questions ?? []).map((q) => {
+      let id = `atomic-${hashFaqId(q.question)}`;
+      const dup = seen.get(id) ?? 0;
+      seen.set(id, dup + 1);
+      if (dup > 0) id = `${id}-${dup}`;
+      return {
+        kind: "faq:question",
+        config: {
+          id,
+          question: q.question,
+          answer: q.answer,
+          category: q.category
+        }
+      };
+    });
+    return [...atomic, ...compositional];
+  }
+  _visibleQuestions() {
+    return this._allQuestions().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
+  // -----------------------------------------------------------------------
+  /**
+   * The `data-adaptive-id` scope for this element's injected <style>. When
+   * `instanceId` is left at the shared default (`'faq-widget'`), two tiles would
+   * both scope to `[data-adaptive-id="faq-widget"]` and cross-style each other.
+   * In that case we fall back to a per-element generated uid so each default tile
+   * gets its own scope. A caller-provided instanceId is used verbatim.
+   */
+  get _scopeId() {
+    if (this.instanceId && this.instanceId !== DEFAULT_INSTANCE_ID) return this.instanceId;
+    if (this._generatedUid === null) {
+      _faqUidCounter += 1;
+      this._generatedUid = `faq-${Date.now().toString(36)}-${_faqUidCounter}`;
+    }
+    return this._generatedUid;
+  }
+  /**
+   * Self-injected flip CSS, scoped to THIS instance (`[data-adaptive-id="…"]`)
+   * so it can't leak onto a sibling widget. The FAQ tile is a light-DOM widget
+   * mounted across several canvases (velvet, default, onflow) and standalone;
+   * velvet ships a GENERIC `[data-active-face]` flip rule (for the product card),
+   * but the other hosts don't — so the FAQ carries the SAME 3D-flip technique,
+   * now from the shared canvas primitive ({@link flipStyles}) rather than a local
+   * copy. The `faq` namespace keeps it on `data-faq-*` / `sc-faq-flip-*` so
+   * velvet's generic rule can't double-apply (the GPU/perspective + resting-flat
+   * contract lives in the primitive). MUST match the FlipController's
+   * `keyframePrefix: 'sc-faq-flip'`.
+   */
+  _renderFlipStyles() {
+    const scope = `[data-adaptive-id="${this._scopeId}"]`;
+    const css = flipStyles(scope, { ns: "faq", keyframePrefix: "sc-faq-flip" });
+    return html`<style>${css}</style>`;
+  }
+  _renderAnswer(answer) {
+    const html_str = renderAnswerHtml(answer);
+    return html`<div style=${styleMap(sm(baseStyles.detailAnswerClamp))} 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>
+    `;
+  }
+  /**
+   * LIST-view row. A tappable question with its chevron \u2014 but NO inline answer
+   * body. Tapping it takes over the tile with the question's detail view (see
+   * {@link _renderDetail}). Keeps the per-row look/markers/highlight from the
+   * old accordion minus the inline-expanded answer that overflowed the tile.
+   */
+  _renderItem(item, isLast, theme) {
+    const colors = themeStyles[theme];
+    const isHighlighted = this._highlightId === item.config.id;
+    const isHovered = this._hoveredId === item.config.id;
+    const itemStyle = {
+      ...baseStyles.item,
+      ...colors.item,
+      ...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: "rotate(0deg)"
+    };
+    return html`
+      <div
+        style=${styleMap(sm(itemStyle))}
+        data-faq-item-id=${item.config.id}
+      >
+        <button
+          type="button"
+          style=${styleMap(sm(questionStyle))}
+          aria-expanded=${false}
+          @click=${() => this._handleOpen(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>
+    `;
+  }
+  _renderItems(items, theme) {
+    return items.map((item, index) => this._renderItem(item, index === items.length - 1, theme));
+  }
+  /**
+   * DETAIL view \u2014 the master\u2192detail takeover. Renders ONLY the open question:
+   * a back affordance, the question prominently, and its full answer via the
+   * SAME {@link _renderAnswer}/`renderAnswerHtml` path (all answer formats still
+   * work). The answer area scrolls if extremely long, so a single answer fills
+   * the bounded velvet tile and never pushes content past the `overflow:hidden`
+   * clip.
+   */
+  _renderDetail(item, theme, feedbackConfig) {
+    const colors = themeStyles[theme];
+    const backStyle = {
+      ...baseStyles.detailBack,
+      ...colors.question
+    };
+    const detailQuestionStyle = {
+      ...baseStyles.detailQuestion,
+      ...colors.question
+    };
+    const detailAnswerStyle = {
+      ...baseStyles.detailAnswer,
+      ...colors.answer
+    };
+    return html`
+      <div style=${styleMap(sm(baseStyles.detail))} data-faq-detail=${item.config.id}>
+        <button
+          type="button"
+          style=${styleMap(sm(backStyle))}
+          data-faq-back=""
+          aria-label="Back to questions"
+          @click=${() => this._handleBack()}
+        >
+          \u2039 Back to questions
+        </button>
+
+        <div style=${styleMap(sm(detailQuestionStyle))} data-faq-detail-question>${item.config.question}</div>
+
+        <div style=${styleMap(sm(detailAnswerStyle))} aria-hidden=${false}>
+          ${this._renderAnswer(item.config.answer)}
+          <div style=${styleMap(sm(baseStyles.detailFooter))}>
+            <button
+              type="button"
+              style=${styleMap(sm(baseStyles.detailDiveDeeper))}
+              data-faq-dive-deeper
+              @click=${() => this._handleDiveDeeper(item)}
+            >Dive deeper ›</button>
+          </div>
+          ${feedbackConfig ? this._renderFeedback(
+      item,
+      feedbackConfig,
+      this._feedbackState.get(item.config.id),
+      theme
+    ) : nothing}
+        </div>
+      </div>
+    `;
+  }
+  /**
+   * "Dive deeper" (items 4/5) — hand the open question's context back to the
+   * CHAT as a deep-dive turn, so a clamped answer never leaves the visitor
+   * stuck. Canvas-agnostic: dispatches the neutral DIVE_DEEPER_EVENT; the
+   * chat-bar mountable turns it into a user-visible turn. The answer text rides
+   * along as (trimmed) context so the agent grounds its fuller reply.
+   */
+  _handleDiveDeeper(item) {
+    const question = item.config.question;
+    const answerText = getAnswerText(item.config.answer);
+    dispatchDiveDeeper({
+      // State an UNMET NEED — never re-ask the question (BUG-1784153527).
+      // `Tell me more about: ${question}` re-asked the very question whose
+      // answer was already on screen, so the agent just answered it again
+      // instead of asking what was missing. The question rides in `title` +
+      // the turn-origin envelope.
+      prompt: "I'd like to dive deeper on this answer, I didn't see what I needed.",
+      title: question,
+      context: answerText ? answerText.slice(0, 500) : void 0
+    });
+  }
+  // -----------------------------------------------------------------------
+  // 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) {
+      if (this.runtime) return nothing;
+      return html`
+        <div
+          style=${styleMap(sm(containerStyle))}
+          data-adaptive-id=${this._scopeId}
+          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>
+      `;
+    }
+    const openItem = this._openId !== null ? ordered.find((q) => q.config.id === this._openId) : void 0;
+    const activeFace = openItem ? this._activeFace : "front";
+    const backActive = activeFace === "back";
+    const flipAnimating = this._flipAnimating;
+    return html`
+      <div
+        style=${styleMap(sm(containerStyle))}
+        data-adaptive-id=${this._scopeId}
+        data-adaptive-type="adaptive-faq"
+      >
+        ${this._renderFlipStyles()}
+        <div data-faq-flip-viewport ?data-faq-flip-animating=${flipAnimating}>
+          <div
+            data-faq-flip
+            data-faq-active-face=${activeFace}
+            ?data-faq-flip-animating=${flipAnimating}
+            data-faq-flip-dir=${flipAnimating ? this._flip.dir : nothing}
+            @animationend=${this._flip.onAnimationEnd}
+          >
+            <div data-face="front" ?inert=${backActive} aria-hidden=${backActive}>
+              ${this._renderListFace(
+      groups,
+      filtered,
+      theme,
+      searchInputStyle,
+      categoryHeaderStyle,
+      {
+        ...baseStyles.noResults,
+        ...colors.emptyState
+      }
+    )}
+            </div>
+            <div data-face="back" ?inert=${!backActive} aria-hidden=${!backActive}>
+              ${openItem ? this._renderDetail(openItem, theme, feedbackConfig) : nothing}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  /** The FRONT face — search box, the question list (optionally grouped by
+   *  category), and the no-results message. Extracted so both faces can live in
+   *  the DOM at once for the flip. */
+  _renderListFace(groups, filtered, theme, searchInputStyle, categoryHeaderStyle, noResultsStyle) {
+    return html`
+      ${this.faqConfig.searchable ? html`
+            <div style=${styleMap(sm(baseStyles.searchWrapper))}>
+              <style>
+                [data-adaptive-id="${this._scopeId}"] 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)}
+              `
+    ) : this._renderItems(filtered, theme)}
+      </div>
+
+      ${this.faqConfig.searchable && filtered.length === 0 && this._searchQuery ? html`
+            <div style=${styleMap(sm(noResultsStyle))}>
+              No questions found matching &quot;${this._searchQuery}&quot;
+            </div>
+          ` : nothing}
+    `;
+  }
+};
+_FAQAccordionElement_instances = new WeakSet();
+/** Measure only the SETTLED accordion (at least one visible question). An
+ *  empty accordion renders `nothing` (runtime) or a reassurance box (no
+ *  runtime) and is never "blank". NON-PII stateKey. */
+healthProbe_fn = function() {
+  const visible = this._visibleQuestions();
+  if (visible.length === 0) return null;
+  const root = this.querySelector('[data-adaptive-type="adaptive-faq"]');
+  if (!root) return null;
+  return {
+    root,
+    stateKey: `faq|${visible.length}|${this._activeFace}`,
+    category: "faq_accordion",
+    widgetKind: "adaptive-faq:accordion"
+  };
+};
+// -----------------------------------------------------------------------
+// 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").
+  // The flip state machine — open item, active face, animating flag, direction,
+  // and the token-coupled settle timer — lives in a shared FlipController (see
+  // {@link _flip}); the controller drives re-renders via host.requestUpdate().
+  // `_openId` / `_activeFace` / `_flipAnimating` / `_flipDir` are exposed as
+  // getters over that controller (below) so the render + tests read the same
+  // state without duplicating the machinery.
+  _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,
+  runtime_default
+};
+//# sourceMappingURL=chunk-AJELMQH5.js.map