@syntrologie/adapt-faq 2.8.0-canary.215 → 2.8.0-canary.216

package/dist/FAQWidgetLit.editable.d.ts

@@ -4,7 +4,7 @@
  * Editable variant of the FAQ accordion for the canvas editor surface.
  * Renders the same Q&A rows as <syntro-faq-accordion> but adds:
  *   - Pencil button per row (shows on hover, calls controller.editItem on click)
- *   - Double-click on row calls controller.editItem
+ *   - Click on question text expands/collapses to show the answer (normal FAQ behavior)
  *   - Drag handle per row when items.length >= 2
  *   - Drag-and-drop reorder via the sortable utility (injected via mount config)
  *   - Read-only fallback when controller is null
@@ -80,6 +80,9 @@ export declare class FAQAccordionEditableElement extends LitElement {
         _hoveredId: {
             state: boolean;
         };
+        _expandedId: {
+            state: boolean;
+        };
     };
     faqConfig: FAQConfig;
     /** Null when loaded without an editor context — renders read-only accordion. */
@@ -106,8 +109,10 @@ export declare class FAQAccordionEditableElement extends LitElement {
      */
     liveRegion: HTMLElement | null;
     _hoveredId: string | null;
+    _expandedId: string | null;
     private _sortableHandle;
     createRenderRoot(): this;
+    connectedCallback(): void;
     /**
      * 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
@@ -118,8 +123,8 @@ export declare class FAQAccordionEditableElement extends LitElement {
     disconnectedCallback(): void;
     private _attachSortable;
     private _handleEdit;
-    private _handleRowDblClick;
     private _handlePencilClick;
+    private _toggleExpand;
     private _renderRow;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/FAQWidgetLit.editable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FAQWidgetLit.editable.d.ts","sourceRoot":"","sources":["../src/FAQWidgetLit.editable.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAqB,MAAM,SAAS,CAAC;AAM5D;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClE,WAAW,IAAI,OAAO,CAAC;IACvB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3E;AAMD,sCAAsC;AACtC,MAAM,WAAW,cAAc;IAC7B,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,gFAAgF;AAChF,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,MAAM,EAAE,CAAC;IACzB,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,WAAW,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,KAAK,cAAc,CAAC;AAyFtF;;;;;;GAMG;AACH,qBAAa,2BAA4B,SAAQ,UAAU;IAKzD,OAAgB,UAAU;;;;;;;;;;;;;MAOxB;IAMF,SAAS,EAAE,SAAS,CAKlB;IAEF,gFAAgF;IAChF,UAAU,EAAE,cAAc,GAAG,IAAI,CAAQ;IAEzC;;;;OAIG;IACH,MAAM,SAAM;IAEZ;;;;;;OAMG;IACH,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAQ;IAEnC;;;;;OAKG;IACH,UAAU,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEtC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IAMjC,OAAO,CAAC,eAAe,CAA+B;IAM7C,gBAAgB;IAQzB;;;;;OAKG;cACgB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQtD,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,kBAAkB;IAU1B,OAAO,CAAC,UAAU;IAkDT,MAAM;CAqDhB;AAcD;;;;;;GAMG;AACH,eAAO,MAAM,6BAA6B;qBAE3B,WAAW,WACb,SAAS,GAAG;QACnB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;QACnC,mFAAmF;QACnF,QAAQ,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC7B,8EAA8E;QAC9E,UAAU,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;KACjC;CAkCJ,CAAC"}
+{"version":3,"file":"FAQWidgetLit.editable.d.ts","sourceRoot":"","sources":["../src/FAQWidgetLit.editable.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAEH,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAEhD,OAAO,KAAK,EAAE,SAAS,EAAqB,MAAM,SAAS,CAAC;AAM5D;;;;;;;GAOG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAClE,WAAW,IAAI,OAAO,CAAC;IACvB,YAAY,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC3E;AAMD,sCAAsC;AACtC,MAAM,WAAW,cAAc;IAC7B,OAAO,IAAI,IAAI,CAAC;CACjB;AAED,gFAAgF;AAChF,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,MAAM,CAAC;IACrB,cAAc,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,MAAM,MAAM,EAAE,CAAC;IACzB,SAAS,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACxC,UAAU,EAAE,WAAW,CAAC;CACzB;AAED;;;GAGG;AACH,MAAM,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,eAAe,KAAK,cAAc,CAAC;AA+HtF;;;;;;GAMG;AACH,qBAAa,2BAA4B,SAAQ,UAAU;IAKzD,OAAgB,UAAU;;;;;;;;;;;;;;;;MAQxB;IAMF,SAAS,EAAE,SAAS,CAKlB;IAEF,gFAAgF;IAChF,UAAU,EAAE,cAAc,GAAG,IAAI,CAAQ;IAEzC;;;;OAIG;IACH,MAAM,SAAM;IAEZ;;;;;;OAMG;IACH,QAAQ,EAAE,UAAU,GAAG,IAAI,CAAQ;IAEnC;;;;;OAKG;IACH,UAAU,EAAE,WAAW,GAAG,IAAI,CAAQ;IAEtC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;IACjC,WAAW,EAAE,MAAM,GAAG,IAAI,CAAQ;IAMlC,OAAO,CAAC,eAAe,CAA+B;IAM7C,gBAAgB;IAIhB,iBAAiB,IAAI,IAAI;IASlC;;;;;OAKG;cACgB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQtD,oBAAoB,IAAI,IAAI;IAMrC,OAAO,CAAC,eAAe;IAuBvB,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,kBAAkB;IAK1B,OAAO,CAAC,aAAa;IAQrB,OAAO,CAAC,UAAU;IA2DT,MAAM;CAqDhB;AAcD;;;;;;GAMG;AACH,eAAO,MAAM,6BAA6B;qBAE3B,WAAW,WACb,SAAS,GAAG;QACnB,UAAU,CAAC,EAAE,MAAM,CAAC;QACpB,UAAU,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;QACnC,mFAAmF;QACnF,QAAQ,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;QAC7B,8EAA8E;QAC9E,UAAU,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;KACjC;CAkCJ,CAAC"}

package/dist/editor.js

@@ -4446,7 +4446,7 @@ if (!customElements.get("se-group-header")) {
 }
 
 // src/faq-item-editor.ts
-import { html as html10, LitElement as LitElement9, nothing as nothing5 } from "lit";
+import { css, html as html10, LitElement as LitElement9, nothing as nothing5 } from "lit";
 var getAnswerText = (answer) => {
   if (typeof answer === "string") return answer;
   if (answer.type === "rich") return answer.html;
@@ -4465,10 +4465,6 @@ var FAQItemEditorLit = class extends LitElement9 {
     this.onChange = () => {
     };
   }
-  // Shadow DOM — so tests can query shadowRoot
-  createRenderRoot() {
-    return this.attachShadow({ mode: "open" });
-  }
   _findItem() {
     return this.appConfig.actions.find((a) => a.config.id === this.itemId);
   }
@@ -4537,6 +4533,56 @@ var FAQItemEditorLit = class extends LitElement9 {
     `;
   }
 };
+FAQItemEditorLit.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,
+    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 },
@@ -4581,12 +4627,35 @@ 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: "pointer",
+  cursor: "default",
   userSelect: "none",
   borderBottom: "1px solid rgba(0, 0, 0, 0.06)",
   transition: "background 0.15s ease"
@@ -4600,7 +4669,15 @@ var QUESTION_STYLE = {
   fontWeight: "500",
   fontSize: "14px",
   lineHeight: "1.4",
-  color: "inherit"
+  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",
@@ -4678,6 +4755,7 @@ var FAQAccordionEditableElement = class extends LitElement10 {
      */
     this.liveRegion = null;
     this._hoveredId = null;
+    this._expandedId = null;
     // -------------------------------------------------------------------------
     // Private sortable state
     // -------------------------------------------------------------------------
@@ -4689,6 +4767,10 @@ var FAQAccordionEditableElement = class extends LitElement10 {
   createRenderRoot() {
     return this;
   }
+  connectedCallback() {
+    super.connectedCallback();
+    ensureSortableStyles();
+  }
   // -------------------------------------------------------------------------
   // Lifecycle — sortable wiring
   // -------------------------------------------------------------------------
@@ -4731,18 +4813,19 @@ var FAQAccordionEditableElement = class extends LitElement10 {
     if (this.controller.isModalOpen()) return;
     this.controller.editItem(ADAPTIVE_ID, itemId, this.tileId || void 0);
   }
-  _handleRowDblClick(itemId) {
-    this._handleEdit(itemId);
-  }
   _handlePencilClick(e, itemId) {
     e.stopPropagation();
     this._handleEdit(itemId);
   }
+  _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 html11`
@@ -4750,7 +4833,6 @@ var FAQAccordionEditableElement = class extends LitElement10 {
         data-faq-editable-row
         data-item-id=${item.config.id}
         style=${styleMap4(sm(rowStyle))}
-        @dblclick=${() => this._handleRowDblClick(item.config.id)}
         @mouseenter=${() => {
       this._hoveredId = item.config.id;
     }}
@@ -4767,7 +4849,10 @@ var FAQAccordionEditableElement = class extends LitElement10 {
               >⠿</span>
             ` : nothing6}
 
-        <span style=${styleMap4(sm(QUESTION_STYLE))}>${item.config.question}</span>
+        <span
+          style=${styleMap4(sm(QUESTION_STYLE))}
+          @click=${() => this._toggleExpand(item.config.id)}
+        >${item.config.question}</span>
 
         <button
           type="button"
@@ -4778,6 +4863,8 @@ var FAQAccordionEditableElement = class extends LitElement10 {
           aria-label="Edit ${item.config.question}"
           @click=${(e) => this._handlePencilClick(e, item.config.id)}
         >✏️</button>
+
+        ${isExpanded && item.config.answer ? html11`<div data-faq-answer style=${styleMap4(sm(ANSWER_STYLE))}>${item.config.answer}</div>` : nothing6}
       </div>
     `;
   }
@@ -4840,7 +4927,8 @@ FAQAccordionEditableElement.properties = {
   controller: { attribute: false },
   tileId: { attribute: false },
   // Internal hover state per item id
-  _hoveredId: { state: true }
+  _hoveredId: { state: true },
+  _expandedId: { state: true }
 };
 if (!customElements.get("syntro-faq-accordion-editable")) {
   customElements.define("syntro-faq-accordion-editable", FAQAccordionEditableElement);