@syntrologie/adapt-faq 2.19.0 → 2.21.0

package/dist/editor.js

@@ -7,8 +7,9 @@ import {
   glowShadows,
   overlay,
   panel_shell_default,
+  renderAnswerHtml,
   shadows
-} from "./chunk-S6WIENQP.js";
+} from "./chunk-KRKRB4OL.js";
 import {
   __commonJS,
   __toESM
@@ -2779,6 +2780,236 @@ function itemCardHeader(opts) {
   `;
 }
 
+// ../../shared-editor-ui/dist/components/TileChromeEditorLit.js
+import { css, html as html2, LitElement, nothing as nothing2 } from "lit";
+var EMOJI_LIST = [
+  "\u{1F4B5}",
+  "\u{1F4B0}",
+  "\u{1F3DB}\uFE0F",
+  "\u23ED\uFE0F",
+  "\u27A1\uFE0F",
+  "\u{1F4A1}",
+  "\u{1F4CB}",
+  "\u2705",
+  "\u26A0\uFE0F",
+  "\u{1F6E1}\uFE0F",
+  "\u{1F4C8}",
+  "\u{1F52C}",
+  "\u{1F48A}",
+  "\u{1F4C4}",
+  "\u{1F9EA}",
+  "\u{1F501}",
+  "\u{1F9E0}",
+  "\u{1F319}",
+  "\u{1F4E6}",
+  "\u{1F69A}",
+  "\u{1F331}",
+  "\u26A1",
+  "\u{1F525}",
+  "\u{1F333}",
+  "\u{1F33F}",
+  "\u2753",
+  "\u{1F9ED}",
+  "\u{1F4DD}",
+  "\u{1F3AF}",
+  "\u{1F3C6}",
+  "\u2728",
+  "\u{1F4AC}",
+  "\u{1F3AE}",
+  "\u23F1\uFE0F",
+  "\u{1F4D6}",
+  "\u{1F514}",
+  "\u{1F393}",
+  "\u23F0",
+  "\u{1F504}",
+  "\u{1F464}",
+  "\u{1F3E0}",
+  "\u{1F6D2}",
+  "\u{1F4CA}",
+  "\u{1F4C9}",
+  "\u{1F967}",
+  "\u{1F4B9}",
+  "\u{1F321}\uFE0F"
+];
+var TileChromeEditorLit = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.tileMeta = { title: "", subtitle: "", icon: "" };
+    this.onChange = () => {
+    };
+    this._pickerOpen = false;
+  }
+  _patch(field, value) {
+    const updated = { ...this.tileMeta, [field]: value };
+    this.tileMeta = updated;
+    this.onChange(updated);
+  }
+  _selectEmoji(emoji) {
+    const value = this.tileMeta.icon === emoji ? "" : emoji;
+    this._patch("icon", value);
+  }
+  render() {
+    return html2`
+      <form @submit=${(e) => e.preventDefault()}>
+        <label>
+          <span>Title</span>
+          <input
+            name="title"
+            type="text"
+            .value=${this.tileMeta.title}
+            @input=${(e) => this._patch("title", e.target.value)}
+          />
+        </label>
+
+        <label>
+          <span>Subtitle</span>
+          <input
+            name="subtitle"
+            type="text"
+            .value=${this.tileMeta.subtitle}
+            placeholder="Optional"
+            @input=${(e) => this._patch("subtitle", e.target.value)}
+          />
+        </label>
+
+        <div class="icon-section">
+          <span>Icon</span>
+          <button
+            type="button"
+            class="icon-toggle"
+            data-emoji-toggle
+            @click=${() => {
+      this._pickerOpen = !this._pickerOpen;
+    }}
+          >
+            ${this.tileMeta.icon ? html2`<span style="font-size: 20px">${this.tileMeta.icon}</span>` : html2`<span style="color: var(--syntro-text-tertiary, #87919f)">Choose icon…</span>`}
+          </button>
+
+          ${this._pickerOpen ? html2`
+              <div data-emoji-grid class="emoji-grid">
+                ${EMOJI_LIST.map((emoji) => html2`
+                    <button
+                      type="button"
+                      data-emoji=${emoji}
+                      class=${this.tileMeta.icon === emoji ? "selected" : ""}
+                      @click=${() => this._selectEmoji(emoji)}
+                      title=${emoji}
+                    >${emoji}</button>
+                  `)}
+              </div>
+            ` : nothing2}
+        </div>
+      </form>
+    `;
+  }
+};
+TileChromeEditorLit.styles = css`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    label > span {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--syntro-text-secondary, #a8afba);
+    }
+    input[type='text'] {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 8px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--syntro-input-field-border-default, #2b333f);
+      background: var(--syntro-input-field-bg-default, #0e1114);
+      color: var(--syntro-text-primary, #cbd0d7);
+      font-size: 14px;
+      font-family: inherit;
+      outline: none;
+    }
+    input[type='text']:focus {
+      border-color: var(--syntro-input-field-border-selected, #b72e2a);
+      box-shadow: var(--syntro-focus-ring-primary, 0 0 0 4px rgba(221, 109, 105, 0.25));
+    }
+    .icon-section {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .icon-section > span {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--syntro-text-secondary, #a8afba);
+    }
+    .icon-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--syntro-input-field-border-default, #2b333f);
+      background: var(--syntro-input-field-bg-default, #0e1114);
+      color: var(--syntro-text-primary, #cbd0d7);
+      font-size: 14px;
+      cursor: pointer;
+      font-family: inherit;
+    }
+    .icon-toggle:hover {
+      border-color: var(--syntro-input-field-border-selected, #b72e2a);
+    }
+    .emoji-grid {
+      display: grid;
+      grid-template-columns: repeat(8, 1fr);
+      gap: 4px;
+      padding: 8px;
+      margin-top: 4px;
+      background: var(--syntro-background-secondary, #07080a);
+      border: 1px solid var(--syntro-input-field-border-default, #2b333f);
+      border-radius: 8px;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    .emoji-grid button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border: 1px solid transparent;
+      border-radius: 6px;
+      background: transparent;
+      font-size: 18px;
+      cursor: pointer;
+      padding: 0;
+      transition: background 100ms ease, border-color 100ms ease;
+    }
+    .emoji-grid button:hover {
+      background: rgba(183, 46, 42, 0.1);
+      border-color: rgba(183, 46, 42, 0.3);
+    }
+    .emoji-grid button.selected {
+      background: rgba(183, 46, 42, 0.2);
+      border-color: var(--syntro-button-primary-bg-default, #b72e2a);
+    }
+  `;
+TileChromeEditorLit.properties = {
+  tileMeta: { attribute: false },
+  onChange: { attribute: false },
+  _pickerOpen: { state: true }
+};
+if (!customElements.get("syntro-tile-chrome-editor")) {
+  customElements.define("syntro-tile-chrome-editor", TileChromeEditorLit);
+}
+
 // ../../shared-editor-ui/dist/components/TriggerJourney.js
 var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
 
@@ -3011,10 +3242,10 @@ var INTERACTIVE_TAGS = new Set(action_step_field_mapping_default.interactive_tag
 var INTERACTIVE_ROLES = new Set(action_step_field_mapping_default.interactive_roles);
 
 // src/editor.ts
-import { html as html10, LitElement as LitElement9, nothing as nothing5 } from "lit";
+import { html as html14, LitElement as LitElement13, nothing as nothing9 } from "lit";
 
 // ../../shared-editor-ui/src/components/AnchorPickerLit.ts
-import { html as html2, LitElement, render as litRender, nothing as nothing2 } from "lit";
+import { html as html3, LitElement as LitElement2, render as litRender, nothing as nothing3 } from "lit";
 import { styleMap } from "lit/directives/style-map.js";
 
 // ../../shared-editor-ui/src/utils/selectorGenerator.ts
@@ -3133,7 +3364,7 @@ function isDynamicClass(className) {
 var HIGHLIGHT_COLOR = colors_default.blue[4];
 var HIGHLIGHT_BG = "rgba(25, 105, 254, 0.1)";
 var DEFAULT_EXCLUDE_SELECTOR = "[data-syntro-editor-panel], [data-shadow-canvas-id], .syntro-tooltip, .syntro-modal, .syntro-highlight, [data-syntro-anchor-picker]";
-var AnchorPickerLit = class extends LitElement {
+var AnchorPickerLit = class extends LitElement2 {
   constructor() {
     super(...arguments);
     this.isActive = false;
@@ -3259,7 +3490,7 @@ var AnchorPickerLit = class extends LitElement {
   }
   _destroyPortal() {
     if (this._portalDiv) {
-      litRender(nothing2, this._portalDiv);
+      litRender(nothing3, this._portalDiv);
       this._portalDiv.remove();
       this._portalDiv = null;
       this._overlayEl = null;
@@ -3295,13 +3526,13 @@ var AnchorPickerLit = class extends LitElement {
   // The component itself renders nothing — all overlay HTML lives in _portalDiv
   // (a div appended to document.body), managed by _syncPortal().
   render() {
-    return nothing2;
+    return nothing3;
   }
   _overlayTemplate() {
-    if (!this.isActive) return nothing2;
+    if (!this.isActive) return nothing3;
     const hovered = this._hoveredElement;
     const rect = hovered?.getBoundingClientRect() ?? null;
-    return html2`
+    return html3`
       <div
         data-syntro-anchor-picker
         style=${styleMap({
@@ -3323,7 +3554,7 @@ var AnchorPickerLit = class extends LitElement {
         ></div>
 
         <!-- Element highlight -->
-        ${hovered && rect ? html2`<div
+        ${hovered && rect ? html3`<div
               style=${styleMap({
       position: "fixed",
       left: `${rect.left - 2}px`,
@@ -3337,10 +3568,10 @@ var AnchorPickerLit = class extends LitElement {
       pointerEvents: "none",
       transition: "all 0.1s ease-out"
     })}
-            ></div>` : nothing2}
+            ></div>` : nothing3}
 
         <!-- Element info tooltip near hovered element -->
-        ${hovered && rect ? html2`<div
+        ${hovered && rect ? html3`<div
               class="se-text-xs"
               style=${styleMap({
       position: "fixed",
@@ -3389,7 +3620,7 @@ var AnchorPickerLit = class extends LitElement {
               >
                 ${getElementDescription2(hovered)}
               </div>
-            </div>` : nothing2}
+            </div>` : nothing3}
       </div>
     `;
   }
@@ -3407,8 +3638,8 @@ if (!customElements.get("se-anchor-picker")) {
 }
 
 // ../../shared-editor-ui/src/components/AnchorPillLit.ts
-import { html as html3, LitElement as LitElement2 } from "lit";
-var AnchorPillLit = class extends LitElement2 {
+import { html as html4, LitElement as LitElement3 } from "lit";
+var AnchorPillLit = class extends LitElement3 {
   constructor() {
     super(...arguments);
     this.state = "missing";
@@ -3447,7 +3678,7 @@ var AnchorPillLit = class extends LitElement2 {
     const redCls = "se-border-red-4/60 se-bg-red-4/10 se-text-red-5 se-cursor-not-allowed";
     const testid = `${this.testidPrefix}-${this.testidKey}`;
     if (this.state === "locate") {
-      return html3`<button
+      return html4`<button
         type="button"
         data-testid=${testid}
         data-state="locate"
@@ -3459,7 +3690,7 @@ var AnchorPillLit = class extends LitElement2 {
       </button>`;
     }
     if (this.state === "navigate" && this.route) {
-      return html3`<button
+      return html4`<button
         type="button"
         data-testid=${testid}
         data-state="navigate"
@@ -3470,7 +3701,7 @@ var AnchorPillLit = class extends LitElement2 {
         Go to ${this.route}
       </button>`;
     }
-    return html3`<span
+    return html4`<span
       data-testid=${testid}
       data-state="missing"
       title="Anchor not available on this page"
@@ -3494,8 +3725,8 @@ if (!customElements.get("se-anchor-pill")) {
 }
 
 // ../../shared-editor-ui/src/components/EditorCardLit.ts
-import { html as html4, LitElement as LitElement3 } from "lit";
-var EditorCardLit = class extends LitElement3 {
+import { html as html5, LitElement as LitElement4 } from "lit";
+var EditorCardLit = class extends LitElement4 {
   constructor() {
     super(...arguments);
     this.itemKey = "";
@@ -3543,7 +3774,7 @@ var EditorCardLit = class extends LitElement3 {
     const bgCls = "bg-white/[0.02]";
     const colorCls = "text-slate-200";
     const interactiveCls = this.clickable ? "cursor-pointer hover:border-white/20 hover:bg-white/[0.04] transition-colors" : "";
-    return html4`
+    return html5`
       <style>
         :host { display: block; }
         .card {
@@ -3595,7 +3826,7 @@ if (!customElements.get("se-editor-card")) {
 }
 
 // ../../shared-editor-ui/src/components/EditorPanelShellLit.ts
-import { html as html5, LitElement as LitElement4, nothing as nothing3 } from "lit";
+import { html as html6, LitElement as LitElement5, nothing as nothing4 } from "lit";
 import { styleMap as styleMap2 } from "lit/directives/style-map.js";
 var STORAGE_KEY = "syntro:editor-panel";
 var MIN_WIDTH2 = panel_shell_default.behavior.minWidth;
@@ -3755,7 +3986,7 @@ var RESIZE_HANDLES2 = [
     cursor: "nesw-resize"
   }
 ];
-var syntroLogoSvg = html5`<svg
+var syntroLogoSvg = html6`<svg
   aria-hidden="true"
   width="28"
   height="18"
@@ -3775,7 +4006,7 @@ var syntroLogoSvg = html5`<svg
     </clipPath>
   </defs>
 </svg>`;
-var EditorPanelShellLit = class extends LitElement4 {
+var EditorPanelShellLit = class extends LitElement5 {
   constructor() {
     super(...arguments);
     this.isOpen = false;
@@ -4017,17 +4248,17 @@ var EditorPanelShellLit = class extends LitElement4 {
   }
   // ---- RENDER ----
   render() {
-    return html5`
-      ${this.isOpen ? html5`<div
+    return html6`
+      ${this.isOpen ? html6`<div
             data-syntro-editor-panel
             data-syntro-editor-ui="panel"
             class=${this._getPanelClasses()}
             style=${styleMap2(this._getPanelStyles())}
-            ${this.panelId ? html5`` : nothing3}
-            id=${this.panelId ?? nothing3}
+            ${this.panelId ? html6`` : nothing4}
+            id=${this.panelId ?? nothing4}
           >
             ${RESIZE_HANDLES2.map(
-      (h) => html5`<div
+      (h) => html6`<div
                   data-syntro-editor-ui="resize-${h.dir}"
                   data-resize-dir=${h.dir}
                   @pointerdown=${this._handleResizePointerDown}
@@ -4043,7 +4274,7 @@ var EditorPanelShellLit = class extends LitElement4 {
                 ></div>`
     )}
             <slot></slot>
-          </div>` : nothing3}
+          </div>` : nothing4}
 
       <div
         class="syntro-editor-scope"
@@ -4076,9 +4307,9 @@ if (!customElements.get("se-editor-panel-shell")) {
 }
 
 // ../../shared-editor-ui/src/components/EditorTextareaLit.ts
-import { html as html6, LitElement as LitElement5 } from "lit";
+import { html as html7, LitElement as LitElement6 } from "lit";
 var _textareaIdCounter = 0;
-var EditorTextareaLit = class extends LitElement5 {
+var EditorTextareaLit = class extends LitElement6 {
   constructor() {
     super();
     this.disabled = false;
@@ -4131,9 +4362,9 @@ var EditorTextareaLit = class extends LitElement5 {
       "disabled:se-bg-input-field-bg-disabled disabled:se-cursor-not-allowed disabled:se-opacity-50",
       this.textareaClass || ""
     ].filter(Boolean).join(" ");
-    return html6`
+    return html7`
       <div>
-        ${this.label ? html6`<label
+        ${this.label ? html7`<label
               for=${id}
               class="se-text-sm se-font-medium se-text-input-field-text-label se-mb-1 se-block"
             >${this.label}</label>` : ""}
@@ -4170,9 +4401,9 @@ if (!customElements.get("se-editor-textarea")) {
 }
 
 // ../../shared-editor-ui/src/components/ElementHighlightLit.ts
-import { html as html7, LitElement as LitElement6, nothing as nothing4 } from "lit";
+import { html as html8, LitElement as LitElement7, nothing as nothing5 } from "lit";
 import { styleMap as styleMap3 } from "lit/directives/style-map.js";
-var ElementHighlightLit = class extends LitElement6 {
+var ElementHighlightLit = class extends LitElement7 {
   constructor() {
     super(...arguments);
     this.element = null;
@@ -4279,7 +4510,7 @@ var ElementHighlightLit = class extends LitElement6 {
   // ---- RENDER ----
   render() {
     const rect = this._rect;
-    if (!rect) return nothing4;
+    if (!rect) return nothing5;
     const el = this.element;
     const hasInteraction = this.interactive || this.showRemove;
     let dimensionsLabel = null;
@@ -4291,14 +4522,14 @@ var ElementHighlightLit = class extends LitElement6 {
     }
     const displayLabel = this.label || dimensionsLabel;
     const labelBg = this.showDimensions ? `${this.color.replace(")", ",0.85)").replace("rgb(", "rgba(")}` : this.color;
-    return html7`
+    return html8`
       <div
         data-syntro-highlight
         data-syntro-editor-ui="highlight"
-        role=${this.interactive ? "button" : nothing4}
-        tabindex=${this.interactive ? "0" : nothing4}
-        @click=${this.interactive ? this._handleClick : nothing4}
-        @keydown=${this.interactive ? this._handleKeyDown : nothing4}
+        role=${this.interactive ? "button" : nothing5}
+        tabindex=${this.interactive ? "0" : nothing5}
+        @click=${this.interactive ? this._handleClick : nothing5}
+        @keydown=${this.interactive ? this._handleKeyDown : nothing5}
         style=${styleMap3({
       position: "fixed",
       top: `${rect.top - this.padding}px`,
@@ -4315,7 +4546,7 @@ var ElementHighlightLit = class extends LitElement6 {
       boxSizing: "border-box"
     })}
       >
-        ${displayLabel ? html7`<div
+        ${displayLabel ? html8`<div
               data-syntro-highlight-label
               data-syntro-editor-ui="highlight-label"
               class="se-text-xs"
@@ -4338,7 +4569,7 @@ var ElementHighlightLit = class extends LitElement6 {
             >
               <slot name="label-icon"></slot>
               ${displayLabel}
-              ${this.showRemove ? html7`<button
+              ${this.showRemove ? html8`<button
                     type="button"
                     class="se-text-xs"
                     data-syntro-highlight-remove
@@ -4360,8 +4591,8 @@ var ElementHighlightLit = class extends LitElement6 {
     })}
                   >
                     \u00d7
-                  </button>` : nothing4}
-            </div>` : nothing4}
+                  </button>` : nothing5}
+            </div>` : nothing5}
       </div>
     `;
   }
@@ -4386,8 +4617,8 @@ if (!customElements.get("se-element-highlight")) {
 }
 
 // ../../shared-editor-ui/src/components/EmptyStateLit.ts
-import { html as html8, LitElement as LitElement7 } from "lit";
-var EmptyStateLit = class extends LitElement7 {
+import { html as html9, LitElement as LitElement8 } from "lit";
+var EmptyStateLit = class extends LitElement8 {
   constructor() {
     super(...arguments);
     this.message = "";
@@ -4396,7 +4627,7 @@ var EmptyStateLit = class extends LitElement7 {
     return this;
   }
   render() {
-    return html8`
+    return html9`
       <div class="se-text-center se-py-8 se-px-4 se-text-text-secondary se-text-sm">
         ${this.message}
       </div>
@@ -4411,8 +4642,8 @@ if (!customElements.get("se-empty-state")) {
 }
 
 // ../../shared-editor-ui/src/components/GroupHeaderLit.ts
-import { html as html9, LitElement as LitElement8 } from "lit";
-var GroupHeaderLit = class extends LitElement8 {
+import { html as html10, LitElement as LitElement9 } from "lit";
+var GroupHeaderLit = class extends LitElement9 {
   constructor() {
     super(...arguments);
     this.label = "";
@@ -4426,7 +4657,7 @@ var GroupHeaderLit = class extends LitElement8 {
       "se-text-xs se-font-bold se-text-text-primary se-uppercase se-tracking-wide se-py-1 se-pb-2 se-flex se-items-center se-justify-between",
       this.headerClass || ""
     ].filter(Boolean).join(" ");
-    return html9`
+    return html10`
       <div class=${classes}>
         <span>${this.label}</span>
         <span class="se-text-xs se-text-text-secondary se-bg-badge-slate-bg se-px-1.5 se-py-0.5 se-rounded-lg">
@@ -4445,6 +4676,383 @@ if (!customElements.get("se-group-header")) {
   customElements.define("se-group-header", GroupHeaderLit);
 }
 
+// ../../shared-editor-ui/src/components/TileChromeEditorLit.ts
+import { css as css2, html as html11, LitElement as LitElement10, nothing as nothing6 } from "lit";
+var EMOJI_LIST2 = [
+  "\u{1F4B5}",
+  "\u{1F4B0}",
+  "\u{1F3DB}\uFE0F",
+  "\u23ED\uFE0F",
+  "\u27A1\uFE0F",
+  "\u{1F4A1}",
+  "\u{1F4CB}",
+  "\u2705",
+  "\u26A0\uFE0F",
+  "\u{1F6E1}\uFE0F",
+  "\u{1F4C8}",
+  "\u{1F52C}",
+  "\u{1F48A}",
+  "\u{1F4C4}",
+  "\u{1F9EA}",
+  "\u{1F501}",
+  "\u{1F9E0}",
+  "\u{1F319}",
+  "\u{1F4E6}",
+  "\u{1F69A}",
+  "\u{1F331}",
+  "\u26A1",
+  "\u{1F525}",
+  "\u{1F333}",
+  "\u{1F33F}",
+  "\u2753",
+  "\u{1F9ED}",
+  "\u{1F4DD}",
+  "\u{1F3AF}",
+  "\u{1F3C6}",
+  "\u2728",
+  "\u{1F4AC}",
+  "\u{1F3AE}",
+  "\u23F1\uFE0F",
+  "\u{1F4D6}",
+  "\u{1F514}",
+  "\u{1F393}",
+  "\u23F0",
+  "\u{1F504}",
+  "\u{1F464}",
+  "\u{1F3E0}",
+  "\u{1F6D2}",
+  "\u{1F4CA}",
+  "\u{1F4C9}",
+  "\u{1F967}",
+  "\u{1F4B9}",
+  "\u{1F321}\uFE0F"
+];
+var TileChromeEditorLit2 = class extends LitElement10 {
+  constructor() {
+    super(...arguments);
+    this.tileMeta = { title: "", subtitle: "", icon: "" };
+    this.onChange = () => {
+    };
+    this._pickerOpen = false;
+  }
+  _patch(field, value) {
+    const updated = { ...this.tileMeta, [field]: value };
+    this.tileMeta = updated;
+    this.onChange(updated);
+  }
+  _selectEmoji(emoji) {
+    const value = this.tileMeta.icon === emoji ? "" : emoji;
+    this._patch("icon", value);
+  }
+  render() {
+    return html11`
+      <form @submit=${(e) => e.preventDefault()}>
+        <label>
+          <span>Title</span>
+          <input
+            name="title"
+            type="text"
+            .value=${this.tileMeta.title}
+            @input=${(e) => this._patch("title", e.target.value)}
+          />
+        </label>
+
+        <label>
+          <span>Subtitle</span>
+          <input
+            name="subtitle"
+            type="text"
+            .value=${this.tileMeta.subtitle}
+            placeholder="Optional"
+            @input=${(e) => this._patch("subtitle", e.target.value)}
+          />
+        </label>
+
+        <div class="icon-section">
+          <span>Icon</span>
+          <button
+            type="button"
+            class="icon-toggle"
+            data-emoji-toggle
+            @click=${() => {
+      this._pickerOpen = !this._pickerOpen;
+    }}
+          >
+            ${this.tileMeta.icon ? html11`<span style="font-size: 20px">${this.tileMeta.icon}</span>` : html11`<span style="color: var(--syntro-text-tertiary, #87919f)">Choose icon…</span>`}
+          </button>
+
+          ${this._pickerOpen ? html11`
+              <div data-emoji-grid class="emoji-grid">
+                ${EMOJI_LIST2.map(
+      (emoji) => html11`
+                    <button
+                      type="button"
+                      data-emoji=${emoji}
+                      class=${this.tileMeta.icon === emoji ? "selected" : ""}
+                      @click=${() => this._selectEmoji(emoji)}
+                      title=${emoji}
+                    >${emoji}</button>
+                  `
+    )}
+              </div>
+            ` : nothing6}
+        </div>
+      </form>
+    `;
+  }
+};
+TileChromeEditorLit2.styles = css2`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    label > span {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--syntro-text-secondary, #a8afba);
+    }
+    input[type='text'] {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 8px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--syntro-input-field-border-default, #2b333f);
+      background: var(--syntro-input-field-bg-default, #0e1114);
+      color: var(--syntro-text-primary, #cbd0d7);
+      font-size: 14px;
+      font-family: inherit;
+      outline: none;
+    }
+    input[type='text']:focus {
+      border-color: var(--syntro-input-field-border-selected, #b72e2a);
+      box-shadow: var(--syntro-focus-ring-primary, 0 0 0 4px rgba(221, 109, 105, 0.25));
+    }
+    .icon-section {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .icon-section > span {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--syntro-text-secondary, #a8afba);
+    }
+    .icon-toggle {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--syntro-input-field-border-default, #2b333f);
+      background: var(--syntro-input-field-bg-default, #0e1114);
+      color: var(--syntro-text-primary, #cbd0d7);
+      font-size: 14px;
+      cursor: pointer;
+      font-family: inherit;
+    }
+    .icon-toggle:hover {
+      border-color: var(--syntro-input-field-border-selected, #b72e2a);
+    }
+    .emoji-grid {
+      display: grid;
+      grid-template-columns: repeat(8, 1fr);
+      gap: 4px;
+      padding: 8px;
+      margin-top: 4px;
+      background: var(--syntro-background-secondary, #07080a);
+      border: 1px solid var(--syntro-input-field-border-default, #2b333f);
+      border-radius: 8px;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    .emoji-grid button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 36px;
+      border: 1px solid transparent;
+      border-radius: 6px;
+      background: transparent;
+      font-size: 18px;
+      cursor: pointer;
+      padding: 0;
+      transition: background 100ms ease, border-color 100ms ease;
+    }
+    .emoji-grid button:hover {
+      background: rgba(183, 46, 42, 0.1);
+      border-color: rgba(183, 46, 42, 0.3);
+    }
+    .emoji-grid button.selected {
+      background: rgba(183, 46, 42, 0.2);
+      border-color: var(--syntro-button-primary-bg-default, #b72e2a);
+    }
+  `;
+TileChromeEditorLit2.properties = {
+  tileMeta: { attribute: false },
+  onChange: { attribute: false },
+  _pickerOpen: { state: true }
+};
+if (!customElements.get("syntro-tile-chrome-editor")) {
+  customElements.define("syntro-tile-chrome-editor", TileChromeEditorLit2);
+}
+
+// src/faq-item-editor.ts
+import { css as css3, html as html12, LitElement as LitElement11, nothing as nothing7 } from "lit";
+var getAnswerText = (answer) => {
+  if (typeof answer === "string") return answer;
+  if (answer.type === "rich") return answer.html;
+  return answer.content;
+};
+var FAQItemEditorLit = class extends LitElement11 {
+  constructor() {
+    super(...arguments);
+    this.itemId = "";
+    this.appConfig = {
+      expandBehavior: "single",
+      searchable: false,
+      theme: "auto",
+      actions: []
+    };
+    this.onChange = () => {
+    };
+  }
+  _findItem() {
+    return this.appConfig.actions.find((a) => a.config.id === this.itemId);
+  }
+  _patchField(field, value) {
+    const next = {
+      ...this.appConfig,
+      actions: this.appConfig.actions.map(
+        (a) => a.config.id === this.itemId ? { ...a, config: { ...a.config, [field]: value } } : a
+      )
+    };
+    this.onChange(next);
+  }
+  render() {
+    const item = this._findItem();
+    if (!item) {
+      return html12`<p>Item not found</p>`;
+    }
+    const q = item;
+    const answerText = getAnswerText(q.config.answer);
+    return html12`
+      <form @submit=${(e) => e.preventDefault()}>
+        <div>
+          <label>
+            <span>Question</span>
+            <input
+              name="question"
+              type="text"
+              .value=${q.config.question ?? ""}
+              @input=${(e) => this._patchField("question", e.target.value)}
+            />
+          </label>
+        </div>
+
+        <div>
+          <label>
+            <span>Answer</span>
+            <textarea
+              name="answer"
+              rows="4"
+              .value=${answerText}
+              @input=${(e) => this._patchField("answer", e.target.value)}
+            ></textarea>
+          </label>
+        </div>
+
+        <div>
+          <label>
+            <span>Category</span>
+            <input
+              name="category"
+              type="text"
+              .value=${q.config.category ?? ""}
+              placeholder="e.g., Billing, Account"
+              @input=${(e) => this._patchField("category", e.target.value)}
+            />
+          </label>
+        </div>
+
+        ${q.rationale ? html12`
+            <div>
+              <span>AI Rationale</span>
+              <div data-rationale>${q.rationale.why}</div>
+            </div>
+          ` : nothing7}
+      </form>
+    `;
+  }
+};
+FAQItemEditorLit.styles = css3`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+    form {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+    label {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    label > span {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--syntro-text-secondary, #a8afba);
+    }
+    input,
+    textarea {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 8px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--syntro-input-field-border-default, #2b333f);
+      background: var(--syntro-input-field-bg-default, #0e1114);
+      color: var(--syntro-text-primary, #cbd0d7);
+      font-size: 14px;
+      font-family: inherit;
+      outline: none;
+    }
+    input:focus,
+    textarea:focus {
+      border-color: var(--syntro-input-field-border-selected, #b72e2a);
+      box-shadow: var(--syntro-focus-ring-primary, 0 0 0 4px rgba(221, 109, 105, 0.25));
+    }
+    textarea {
+      resize: vertical;
+    }
+    [data-rationale] {
+      font-size: 13px;
+      color: var(--syntro-text-tertiary, #87919f);
+      padding: 8px 12px;
+      background: var(--syntro-background-secondary, #07080a);
+      border-radius: 6px;
+    }
+  `;
+FAQItemEditorLit.properties = {
+  itemId: { type: String, attribute: "item-id" },
+  appConfig: { attribute: false },
+  onChange: { attribute: false }
+};
+customElements.define("syntro-faq-item-editor", FAQItemEditorLit);
+
 // src/summarize.ts
 var MAX_Q_LEN = 50;
 var MAX_A_LEN = 40;
@@ -4452,8 +5060,8 @@ function truncate(text, max) {
   if (text.length <= max) return text;
   return `${text.slice(0, max).trimEnd()}...`;
 }
-function stripHtml(html11) {
-  return html11.replace(/<[^>]*>/g, "").trim();
+function stripHtml(html15) {
+  return html15.replace(/<[^>]*>/g, "").trim();
 }
 function getAnswerPreview(answer) {
   if (typeof answer === "string") return answer;
@@ -4475,12 +5083,392 @@ function isOwnAction(action) {
   return action.kind.startsWith(`${ACTION_NAMESPACE}:`);
 }
 
-// src/editor.ts
-var getAnswerText = (answer) => {
-  if (typeof answer === "string") return answer;
-  if (answer.type === "rich") return answer.html;
-  return answer.content;
+// src/FAQWidgetLit.editable.ts
+import { html as html13, LitElement as LitElement12, nothing as nothing8 } from "lit";
+import { styleMap as styleMap4 } from "lit/directives/style-map.js";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+function sm(styles) {
+  return styles;
+}
+var ADAPTIVE_ID = "adaptive-faq:accordion";
+var SORTABLE_STYLE_ID = "syntro-sortable-drag-styles";
+function ensureSortableStyles() {
+  if (document.getElementById(SORTABLE_STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = SORTABLE_STYLE_ID;
+  style.textContent = `
+    .syntro-sortable-dragging {
+      opacity: 0.4;
+      background: rgba(106, 89, 206, 0.08) !important;
+      box-shadow: inset 0 0 0 1px rgba(106, 89, 206, 0.2);
+      transition: opacity 150ms ease, background 150ms ease;
+    }
+    .syntro-sortable-drag-over {
+      background: rgba(106, 89, 206, 0.04) !important;
+      transition: background 150ms ease;
+    }
+    .syntro-sortable-active [data-drag-handle] {
+      cursor: grabbing;
+    }
+  `;
+  document.head.appendChild(style);
+}
+var ROW_STYLE = {
+  position: "relative",
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  padding: "12px 16px",
+  cursor: "default",
+  userSelect: "none",
+  borderBottom: "1px solid rgba(0, 0, 0, 0.06)",
+  transition: "background 0.15s ease"
+};
+var ROW_HOVER_STYLE = {
+  ...ROW_STYLE,
+  background: "rgba(106, 89, 206, 0.06)"
+};
+var QUESTION_STYLE = {
+  flex: "1",
+  fontWeight: "500",
+  fontSize: "14px",
+  lineHeight: "1.4",
+  color: "inherit",
+  cursor: "pointer"
+};
+var ANSWER_STYLE = {
+  width: "100%",
+  padding: "4px 16px 8px",
+  fontSize: "13px",
+  lineHeight: "1.5",
+  color: "rgba(0, 0, 0, 0.6)"
+};
+var PENCIL_STYLE = {
+  flexShrink: "0",
+  marginLeft: "8px",
+  padding: "4px 6px",
+  background: "transparent",
+  border: "1px solid rgba(106, 89, 206, 0.3)",
+  borderRadius: "4px",
+  cursor: "pointer",
+  fontSize: "12px",
+  opacity: "0",
+  transition: "opacity 0.15s ease",
+  color: "rgb(106, 89, 206)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+};
+var PENCIL_VISIBLE_STYLE = {
+  ...PENCIL_STYLE,
+  opacity: "1"
 };
+var DRAG_HANDLE_STYLE = {
+  flexShrink: "0",
+  marginRight: "8px",
+  cursor: "grab",
+  fontSize: "14px",
+  color: "rgba(0, 0, 0, 0.3)",
+  lineHeight: "1"
+};
+var CONTAINER_STYLE = {
+  borderRadius: "8px",
+  overflow: "hidden",
+  border: "1px solid rgba(0, 0, 0, 0.08)",
+  background: "#fff"
+};
+var EMPTY_STYLE = {
+  padding: "16px",
+  color: "rgba(0, 0, 0, 0.4)",
+  fontSize: "13px",
+  textAlign: "center"
+};
+var TILE_EDIT_BTN_STYLE = {
+  position: "absolute",
+  top: "8px",
+  right: "8px",
+  padding: "4px 6px",
+  background: "transparent",
+  border: "1px solid rgba(106, 89, 206, 0.3)",
+  borderRadius: "4px",
+  cursor: "pointer",
+  fontSize: "12px",
+  opacity: "0",
+  transition: "opacity 0.15s ease",
+  color: "rgb(106, 89, 206)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: "1"
+};
+var TILE_EDIT_BTN_VISIBLE_STYLE = {
+  ...TILE_EDIT_BTN_STYLE,
+  opacity: "1"
+};
+var FAQAccordionEditableElement = class extends LitElement12 {
+  constructor() {
+    super(...arguments);
+    // -------------------------------------------------------------------------
+    // Property declarations
+    // -------------------------------------------------------------------------
+    this.faqConfig = {
+      expandBehavior: "single",
+      searchable: false,
+      theme: "auto",
+      actions: []
+    };
+    /** Null when loaded without an editor context — renders read-only accordion. */
+    this.controller = null;
+    /**
+     * Host tile id, threaded in via the mountable's `instanceId`. Scopes every
+     * controller call so the right tile is targeted when the canvas has more
+     * than one FAQ tile (per-route FAQs). Empty string when unknown.
+     */
+    this.tileId = "";
+    /**
+     * The `makeSortable` factory to use. Injected by FAQWidgetLitEditableMountable
+     * from the editor-sdk bootstrap so there is no direct import from editor-sdk
+     * into this package (which would create a circular dependency).
+     *
+     * Null when running without the editor context (read-only mode).
+     */
+    this.sortable = null;
+    /**
+     * Shared aria-live region from the modal host, threaded in via mount config.
+     * Falls back to a detached element when running outside the editor context.
+     *
+     * TODO(phase-2-a11y): wire shared live region from modal host for real a11y.
+     */
+    this.liveRegion = null;
+    this._hoveredId = null;
+    this._expandedId = null;
+    this._containerHovered = false;
+    // -------------------------------------------------------------------------
+    // Private sortable state
+    // -------------------------------------------------------------------------
+    this._sortableHandle = null;
+  }
+  // -------------------------------------------------------------------------
+  // Light DOM — inherits host-page CSS variables
+  // -------------------------------------------------------------------------
+  createRenderRoot() {
+    return this;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    ensureSortableStyles();
+  }
+  // -------------------------------------------------------------------------
+  // Lifecycle — sortable wiring
+  // -------------------------------------------------------------------------
+  /**
+   * Wire (or re-wire) the sortable whenever the properties it depends on change.
+   * `updated()` fires after every render, including the first, so we don't need
+   * a separate `firstUpdated()` call — using `updated()` alone avoids a double
+   * attach on mount (firstUpdated + updated both fire on first render).
+   */
+  updated(changed) {
+    if (changed.has("controller") || changed.has("faqConfig") || changed.has("sortable")) {
+      this._sortableHandle?.destroy();
+      this._sortableHandle = null;
+      this._attachSortable();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._sortableHandle?.destroy();
+    this._sortableHandle = null;
+  }
+  _attachSortable() {
+    if (!this.controller) return;
+    if (!this.sortable) return;
+    if ((this.faqConfig.actions ?? []).length < 2) return;
+    const liveRegion = this.liveRegion ?? document.createElement("div");
+    this._sortableHandle = this.sortable(this, {
+      itemSelector: "[data-faq-editable-row]",
+      handleSelector: "[data-drag-handle]",
+      getItems: () => (this.faqConfig.actions ?? []).map((a) => a.config.id),
+      onReorder: (newOrder) => this.controller.reorderItems(ADAPTIVE_ID, newOrder, this.tileId || void 0),
+      liveRegion
+    });
+  }
+  // -------------------------------------------------------------------------
+  // Handlers
+  // -------------------------------------------------------------------------
+  _handleEdit(itemId) {
+    if (!this.controller) return;
+    if (this.controller.isModalOpen()) return;
+    this.controller.editItem(ADAPTIVE_ID, itemId, this.tileId || void 0);
+  }
+  _handlePencilClick(e, itemId) {
+    e.stopPropagation();
+    this._handleEdit(itemId);
+  }
+  _handleContainerEdit() {
+    if (!this.controller) return;
+    if (this.controller.isModalOpen()) return;
+    this.controller.editContainer(ADAPTIVE_ID, this.tileId || void 0);
+  }
+  _toggleExpand(itemId) {
+    this._expandedId = this._expandedId === itemId ? null : itemId;
+  }
+  // -------------------------------------------------------------------------
+  // Render helpers
+  // -------------------------------------------------------------------------
+  _renderRow(item, showHandles) {
+    const isHovered = this._hoveredId === item.config.id;
+    const isExpanded = this._expandedId === item.config.id;
+    const rowStyle = isHovered ? ROW_HOVER_STYLE : ROW_STYLE;
+    const pencilStyle = isHovered ? PENCIL_VISIBLE_STYLE : PENCIL_STYLE;
+    return html13`
+      <div
+        data-faq-editable-row
+        data-item-id=${item.config.id}
+        style=${styleMap4(sm(rowStyle))}
+        @mouseenter=${() => {
+      this._hoveredId = item.config.id;
+    }}
+        @mouseleave=${() => {
+      this._hoveredId = null;
+    }}
+      >
+        ${showHandles ? html13`
+              <span
+                data-drag-handle
+                style=${styleMap4(sm(DRAG_HANDLE_STYLE))}
+                title="Drag to reorder"
+                aria-hidden="true"
+              >⠿</span>
+            ` : nothing8}
+
+        <span
+          style=${styleMap4(sm(QUESTION_STYLE))}
+          @click=${() => this._toggleExpand(item.config.id)}
+        >${item.config.question}</span>
+
+        <button
+          type="button"
+          data-edit-pencil
+          data-item-id=${item.config.id}
+          style=${styleMap4(sm(pencilStyle))}
+          title="Edit this item"
+          aria-label="Edit ${item.config.question}"
+          @click=${(e) => this._handlePencilClick(e, item.config.id)}
+        >✏️</button>
+
+        ${isExpanded && item.config.answer ? html13`<div data-faq-answer style=${styleMap4(sm(ANSWER_STYLE))}>${unsafeHTML(renderAnswerHtml(item.config.answer))}</div>` : nothing8}
+      </div>
+    `;
+  }
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+  render() {
+    const items = this.faqConfig.actions ?? [];
+    const hasController = this.controller !== null;
+    const showHandles = hasController && items.length >= 2;
+    if (items.length === 0) {
+      return html13`
+        <div
+          style=${styleMap4(sm(CONTAINER_STYLE))}
+          data-adaptive-id="faq-editable"
+          data-adaptive-type="adaptive-faq"
+        >
+          <div style=${styleMap4(sm(EMPTY_STYLE))}>
+            No FAQ items yet. Add items in the editor panel.
+          </div>
+        </div>
+      `;
+    }
+    if (hasController) {
+      const editBtnStyle = this._containerHovered ? TILE_EDIT_BTN_VISIBLE_STYLE : TILE_EDIT_BTN_STYLE;
+      return html13`
+        <div
+          style=${styleMap4(sm({ ...CONTAINER_STYLE, position: "relative" }))}
+          data-adaptive-id="faq-editable"
+          data-adaptive-type="adaptive-faq"
+          @mouseenter=${() => {
+        this._containerHovered = true;
+      }}
+          @mouseleave=${() => {
+        this._containerHovered = false;
+      }}
+        >
+          <button
+            type="button"
+            data-settings-btn
+            style=${styleMap4(sm(editBtnStyle))}
+            title="Edit tile settings"
+            aria-label="Edit tile settings"
+            @click=${() => this._handleContainerEdit()}
+          >✏️</button>
+          ${items.map((item) => this._renderRow(item, showHandles))}
+        </div>
+      `;
+    }
+    return html13`
+      <div
+        style=${styleMap4(sm(CONTAINER_STYLE))}
+        data-adaptive-id="faq-editable"
+        data-adaptive-type="adaptive-faq"
+      >
+        ${items.map(
+      (item) => html13`
+            <div
+              style=${styleMap4(sm(ROW_STYLE))}
+              data-faq-item-id=${item.config.id}
+            >
+              <span style=${styleMap4(sm(QUESTION_STYLE))}>${item.config.question}</span>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+// -------------------------------------------------------------------------
+// Reactive properties
+// -------------------------------------------------------------------------
+FAQAccordionEditableElement.properties = {
+  faqConfig: { attribute: false },
+  controller: { attribute: false },
+  tileId: { attribute: false },
+  // Internal hover state per item id
+  _hoveredId: { state: true },
+  _expandedId: { state: true },
+  _containerHovered: { state: true }
+};
+if (!customElements.get("syntro-faq-accordion-editable")) {
+  customElements.define("syntro-faq-accordion-editable", FAQAccordionEditableElement);
+}
+var FAQWidgetLitEditableMountable = {
+  mount(container, config) {
+    const {
+      instanceId = "",
+      controller = null,
+      sortable = null,
+      liveRegion = null,
+      ...faqConfig
+    } = config ?? {
+      expandBehavior: "single",
+      searchable: false,
+      theme: "auto",
+      actions: []
+    };
+    const el = document.createElement("syntro-faq-accordion-editable");
+    Object.assign(el, {
+      faqConfig,
+      controller,
+      sortable,
+      liveRegion,
+      tileId: instanceId
+    });
+    container.appendChild(el);
+    return () => el.remove();
+  }
+};
+
+// src/editor.ts
 var summarizeTriggerWhen = (triggerWhen) => {
   if (!triggerWhen || typeof triggerWhen !== "object") return "";
   const t = triggerWhen;
@@ -4533,26 +5521,16 @@ function buildFlatItem(key, groupIdx, itemIdx, q) {
     question: q
   };
 }
-var FAQEditorLit = class extends LitElement9 {
+var FAQEditorLit = class extends LitElement13 {
   constructor() {
     super(...arguments);
     this.config = null;
     this.onChange = null;
     this._editingKey = null;
     // ---- Actions ----
-    this._handleBack = () => {
-      if (this._editingKey !== null) {
-        this._editingKey = null;
-      } else {
-        this.dispatchEvent(new CustomEvent("navigate-home", { bubbles: true }));
-      }
-    };
     this._handleItemClick = (key) => {
       this._editingKey = key;
     };
-    this._handleFieldChange = (item, field, value) => {
-      this._emitFieldChange(item, field, value);
-    };
     this._handleDelete = (item, e) => {
       e.stopPropagation();
       if (!this.config || !this.onChange) return;
@@ -4579,59 +5557,17 @@ var FAQEditorLit = class extends LitElement9 {
       if (this._editingKey === item.key) this._editingKey = null;
       this.dispatchEvent(new CustomEvent("dirty-change", { detail: { dirty: true }, bubbles: true }));
     };
-    // ---- Render ----
     this._renderEditMode = (item) => {
-      const q = item.question;
-      return html10`
-      <div class="se-py-1">
-        <div class="se-flex se-items-center se-gap-2 se-mb-3 se-text-[13px] se-font-semibold se-text-text-primary">
-          <span>❓</span>
-          <span>${item.summary}</span>
-        </div>
-
-        <div class="se-mb-3">
-          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Question</label>
-          <input
-            type="text"
-            .value=${q.config.question}
-            @input=${(e) => this._handleFieldChange(item, "question", e.target.value)}
-            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm"
-          />
-        </div>
-
-        <div class="se-mb-3">
-          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Answer</label>
-          <textarea
-            .value=${getAnswerText(q.config.answer)}
-            @input=${(e) => this._handleFieldChange(item, "answer", e.target.value)}
-            rows="4"
-            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm se-resize-none"
-          ></textarea>
-        </div>
-
-        <div class="se-mb-3">
-          <label class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">Category</label>
-          <input
-            type="text"
-            .value=${q.config.category || ""}
-            placeholder="e.g., Billing, Account"
-            @input=${(e) => this._handleFieldChange(item, "category", e.target.value)}
-            class="se-w-full se-p-2 se-rounded se-border se-border-border-primary se-bg-input-field-bg se-text-text-primary se-text-sm"
-          />
-        </div>
-
-        ${q.rationale ? html10`
-          <div>
-            <span class="se-text-[11px] se-font-semibold se-text-text-secondary se-mb-1 se-block">AI Rationale</span>
-            <div class="se-p-2 se-rounded se-border se-border-dashed se-border-border-primary se-bg-card-bg se-text-text-secondary se-text-xs se-mb-2">
-              ${q.rationale.why}
-            </div>
-          </div>
-        ` : nothing5}
-      </div>
+      const { appConfig, onChange } = this._buildInnerProps(item);
+      return html14`
+      <syntro-faq-item-editor
+        .itemId=${item.question.config.id}
+        .appConfig=${appConfig}
+        .onChange=${onChange}
+      ></syntro-faq-item-editor>
     `;
     };
-    this._renderItemCard = (item) => html10`
+    this._renderItemCard = (item) => html14`
     <div
       data-item-key=${item.key}
       data-card-body
@@ -4644,32 +5580,32 @@ var FAQEditorLit = class extends LitElement9 {
       deleteTestid: `delete-faq-${item.key}`,
       deleteLabel: "Delete question"
     })}
-      ${item.description ? html10`<div
+      ${item.description ? html14`<div
               data-testid=${`faq-description-${item.key}`}
               class="se-text-[11px] se-text-text-secondary se-mt-1.5 se-line-clamp-2"
-            >${item.description}</div>` : nothing5}
-      ${item.triggerSummary ? html10`<div
+            >${item.description}</div>` : nothing9}
+      ${item.triggerSummary ? html14`<div
               data-testid=${`faq-trigger-${item.key}`}
               class="se-mt-1 se-inline-flex se-items-center se-gap-1 se-px-1.5 se-py-0.5 se-rounded se-bg-pink-4/10 se-text-pink-5 se-text-[10px] se-font-medium"
             >
               <span>📍</span>
               <span>When: ${item.triggerSummary}</span>
-            </div>` : nothing5}
-      ${item.validation && item.validation.length > 0 ? html10`<div
+            </div>` : nothing9}
+      ${item.validation && item.validation.length > 0 ? html14`<div
               data-testid=${`faq-validation-${item.key}`}
               class="se-mt-1.5 se-flex se-flex-col se-gap-0.5"
             >
               ${item.validation.map(
-      (line) => html10`<div
+      (line) => html14`<div
                   class="se-text-[10px] se-text-text-tertiary se-flex se-items-start se-gap-1"
                 ><span class="se-text-text-tertiary">✓</span><span>${line}</span></div>`
     )}
-            </div>` : nothing5}
-      ${item.question.rationale ? html10`
+            </div>` : nothing9}
+      ${item.question.rationale ? html14`
         <div class="se-text-[10px] se-text-text-tertiary se-mt-1">
           WHY: ${item.question.rationale.why}
         </div>
-      ` : nothing5}
+      ` : nothing9}
     </div>
   `;
     this._handleNavigateFromPill = (e) => {
@@ -4685,7 +5621,7 @@ var FAQEditorLit = class extends LitElement9 {
     this._renderGroupHeader = (section, count) => {
       const navRoute = section.routes[0];
       const testidSuffix = section.tileId ?? String(section.groupIdx);
-      return html10`
+      return html14`
       <div
         data-faq-group-header
         data-faq-group-tile-id=${section.tileId ?? ""}
@@ -4697,13 +5633,13 @@ var FAQEditorLit = class extends LitElement9 {
           >
             ${section.title}
           </span>
-          ${navRoute ? html10`<se-anchor-pill
+          ${navRoute ? html14`<se-anchor-pill
                   .state=${"navigate"}
                   .route=${navRoute}
                   testid-prefix="goto-faq-group"
                   testid-key=${testidSuffix}
                   @se-anchor-navigate=${this._handleNavigateFromPill}
-                ></se-anchor-pill>` : nothing5}
+                ></se-anchor-pill>` : nothing9}
         </div>
         <span class="se-text-text-tertiary se-text-[11px] se-font-normal">${count}</span>
       </div>
@@ -4711,21 +5647,21 @@ var FAQEditorLit = class extends LitElement9 {
     };
     this._renderListMode = (sections, items) => {
       if (items.length === 0) {
-        return html10`<div class="se-text-center se-py-8 se-px-4 se-text-text-secondary se-text-sm">
+        return html14`<div class="se-text-center se-py-8 se-px-4 se-text-text-secondary se-text-sm">
         No FAQ questions configured.
       </div>`;
       }
       if (sections.length === 1 && sections[0].groupIdx === -1) {
-        return html10`
+        return html14`
         <div class="se-text-[11px] se-font-semibold se-uppercase se-tracking-wider se-text-text-secondary se-mb-2 se-px-1">
           FAQ <span class="se-text-text-tertiary se-font-normal">${items.length}</span>
         </div>
         ${items.map(this._renderItemCard)}
       `;
       }
-      return html10`${sections.map((section) => {
+      return html14`${sections.map((section) => {
         const sectionItems = items.filter((it) => it.groupIdx === section.groupIdx);
-        return html10`
+        return html14`
         ${this._renderGroupHeader(section, sectionItems.length)}
         ${sectionItems.map(this._renderItemCard)}
       `;
@@ -4735,40 +5671,66 @@ var FAQEditorLit = class extends LitElement9 {
   createRenderRoot() {
     return this;
   }
-  _emitFieldChange(item, field, value) {
-    if (!this.config || !this.onChange) return;
-    const mutateQuestion = (q) => {
-      const next = { ...q, config: { ...q.config } };
-      next.config[field] = value;
-      return next;
-    };
+  // ---- Render ----
+  /**
+   * Build the FAQConfig slice and onChange handler to pass to <syntro-faq-item-editor>.
+   *
+   * For flat configs the full config is passed directly.
+   * For grouped configs a synthetic FAQConfig is built from the item's group actions so the
+   * inner element can find the item by ID. When onChange fires the patched flat actions are
+   * spliced back into the correct group of the grouped config before bubbling to the panel's
+   * own onChange.
+   */
+  _buildInnerProps(item) {
+    if (!this.config) {
+      const noop = () => {
+      };
+      return {
+        appConfig: { expandBehavior: "single", searchable: false, theme: "auto", actions: [] },
+        onChange: noop
+      };
+    }
     if (isGroupedFAQConfig(this.config)) {
-      const groups = this.config.groups.map((group, gIdx) => {
-        if (gIdx !== item.groupIdx) return group;
-        const own = group.actions.filter(isOwnAction).slice();
-        const others = group.actions.filter((a) => !isOwnAction(a));
-        own[item.itemIdx] = mutateQuestion(own[item.itemIdx]);
-        return { ...group, actions: [...others, ...own] };
-      });
-      const updated = { ...this.config, groups };
-      this.onChange(updated);
-    } else {
-      const flat = this.config;
-      const ownActions = (flat.actions || []).filter(isOwnAction).slice();
-      ownActions[item.itemIdx] = mutateQuestion(ownActions[item.itemIdx]);
-      const otherActions = (flat.actions || []).filter((a) => !isOwnAction(a));
-      const updated = { ...flat, actions: [...otherActions, ...ownActions] };
-      this.onChange(updated);
+      const group = this.config.groups[item.groupIdx];
+      const appConfig = {
+        expandBehavior: "single",
+        searchable: false,
+        theme: "auto",
+        actions: group ? group.actions.filter(isOwnAction) : []
+      };
+      const onChange2 = (patchedFlat) => {
+        if (!this.config || !isGroupedFAQConfig(this.config)) return;
+        const groups = this.config.groups.map((g, gIdx) => {
+          if (gIdx !== item.groupIdx) return g;
+          const nonOwn = g.actions.filter((a) => !isOwnAction(a));
+          return { ...g, actions: [...nonOwn, ...patchedFlat.actions] };
+        });
+        const updated = { ...this.config, groups };
+        this.config = updated;
+        this.onChange?.(updated);
+        this.dispatchEvent(
+          new CustomEvent("dirty-change", { detail: { dirty: true }, bubbles: true })
+        );
+      };
+      return { appConfig, onChange: onChange2 };
     }
-    this.dispatchEvent(new CustomEvent("dirty-change", { detail: { dirty: true }, bubbles: true }));
+    const flat = this.config;
+    const onChange = (next) => {
+      this.config = next;
+      this.onChange?.(next);
+      this.dispatchEvent(
+        new CustomEvent("dirty-change", { detail: { dirty: true }, bubbles: true })
+      );
+    };
+    return { appConfig: flat, onChange };
   }
   render() {
     if (!this.config) {
-      return html10`<div class="se-p-8 se-text-center se-text-text-secondary se-text-sm">Loading...</div>`;
+      return html14`<div class="se-p-8 se-text-center se-text-text-secondary se-text-sm">Loading...</div>`;
     }
     const { sections, items } = flattenConfig(this.config);
     const editItem = this._editingKey !== null ? items.find((it) => it.key === this._editingKey) : null;
-    return html10`
+    return html14`
       <div class="se-flex se-flex-col se-h-full">
         <!-- Header (no Back button — panel provides that) -->
         <div class="se-px-4 se-pt-3 se-pb-1">
@@ -4779,7 +5741,7 @@ var FAQEditorLit = class extends LitElement9 {
         </div>
 
         <div class="se-flex-1 se-overflow-auto se-p-4">
-          ${editItem ? html10`
+          ${editItem ? html14`
             <button type="button" @click=${() => {
       this._editingKey = null;
     }}
@@ -4798,8 +5760,37 @@ FAQEditorLit.properties = {
   _editingKey: { state: true }
 };
 customElements.define("se-faq-editor", FAQEditorLit);
+function registerFaqEditorFactories(modalHost) {
+  modalHost.registerEditorFactory("adaptive-faq:accordion", {
+    item: ({ itemId, appConfig, onChange }) => {
+      const el = document.createElement("syntro-faq-item-editor");
+      el.itemId = itemId;
+      el.appConfig = appConfig;
+      el.onChange = onChange;
+      return el;
+    },
+    container: ({ appConfig, onChange }) => {
+      const meta = appConfig._tileMeta;
+      const tileMeta = {
+        title: meta?.title ?? "",
+        subtitle: meta?.subtitle ?? "",
+        icon: meta?.icon ?? ""
+      };
+      const el = document.createElement("syntro-tile-chrome-editor");
+      el.tileMeta = tileMeta;
+      el.onChange = (next) => {
+        onChange({ ...appConfig, _tileMeta: next });
+      };
+      return el;
+    }
+  });
+}
 export {
-  FAQEditorLit
+  FAQAccordionEditableElement,
+  FAQEditorLit,
+  FAQItemEditorLit,
+  FAQWidgetLitEditableMountable,
+  registerFaqEditorFactories
 };
 /*! Bundled license information: