@syntrologie/adapt-faq 2.25.2 → 2.26.0

package/dist/editor.js

@@ -3242,7 +3242,7 @@ 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 html14, LitElement as LitElement13, nothing as nothing9 } from "lit";
+import { html as html15, LitElement as LitElement14, nothing as nothing10 } from "lit";
 
 // ../../shared-editor-ui/src/components/AnchorPickerLit.ts
 import { html as html3, LitElement as LitElement2, render as litRender, nothing as nothing3 } from "lit";
@@ -4676,8 +4676,85 @@ if (!customElements.get("se-group-header")) {
   customElements.define("se-group-header", GroupHeaderLit);
 }
 
+// ../../shared-editor-ui/src/components/InspectToggleLit.ts
+import { html as html11, LitElement as LitElement10, nothing as nothing6 } from "lit";
+var InspectToggleLit = class extends LitElement10 {
+  constructor() {
+    super(...arguments);
+    this.inspecting = false;
+    this.accent = "purple";
+    this.inspectLabel = "Inspect";
+  }
+  createRenderRoot() {
+    return this;
+  }
+  _emit(next) {
+    this.inspecting = next;
+    this.dispatchEvent(
+      new CustomEvent("se-inspect-toggle", {
+        detail: { inspecting: next },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  _accentClasses() {
+    if (this.accent === "blue") {
+      return {
+        track: "se-bg-blue-4",
+        activeText: "se-text-blue-4",
+        kbd: "se-border-blue-4/40 se-bg-blue-4/15 se-text-blue-4"
+      };
+    }
+    return {
+      track: "se-bg-purple-4",
+      activeText: "se-text-purple-4",
+      kbd: "se-border-purple-4/40 se-bg-purple-4/15 se-text-purple-4"
+    };
+  }
+  render() {
+    const c = this._accentClasses();
+    const inspecting = this.inspecting;
+    return html11`
+      <div class="se-flex se-items-center se-gap-3 se-text-xs se-text-text-secondary">
+        <button
+          type="button"
+          role="switch"
+          aria-checked=${inspecting ? "true" : "false"}
+          aria-label="Toggle inspect mode"
+          @click=${() => this._emit(!inspecting)}
+          class=${`se-relative se-inline-flex se-h-5 se-w-9 se-shrink-0 se-cursor-pointer se-rounded-full se-border-none se-transition-colors se-duration-150 ${inspecting ? c.track : "se-bg-border-primary"}`}
+        >
+          <span
+            aria-hidden="true"
+            class=${`se-pointer-events-none se-inline-block se-h-4 se-w-4 se-rounded-full se-bg-white se-shadow-sm se-transition-transform se-duration-150 ${inspecting ? "se-translate-x-4" : "se-translate-x-0.5"}`}
+            style="margin-top:2px"
+          ></span>
+        </button>
+        <span class=${inspecting ? c.activeText : ""}>
+          ${inspecting ? this.inspectLabel : "Navigate"}
+        </span>
+        ${inspecting ? nothing6 : html11`<span class="se-ml-auto se-flex se-items-center se-gap-1">
+                or press
+                <kbd
+                  class=${`se-px-1.5 se-py-0.5 se-rounded se-border se-text-[10px] se-font-semibold ${c.kbd}`}
+                >Ctrl</kbd>
+              </span>`}
+      </div>
+    `;
+  }
+};
+InspectToggleLit.properties = {
+  inspecting: { type: Boolean },
+  accent: { type: String },
+  inspectLabel: { type: String }
+};
+if (!customElements.get("se-inspect-toggle")) {
+  customElements.define("se-inspect-toggle", InspectToggleLit);
+}
+
 // ../../shared-editor-ui/src/components/TileChromeEditorLit.ts
-import { css as css2, html as html11, LitElement as LitElement10, nothing as nothing6 } from "lit";
+import { css as css2, html as html12, LitElement as LitElement11, nothing as nothing7 } from "lit";
 var EMOJI_LIST2 = [
   "\u{1F4B5}",
   "\u{1F4B0}",
@@ -4727,7 +4804,7 @@ var EMOJI_LIST2 = [
   "\u{1F4B9}",
   "\u{1F321}\uFE0F"
 ];
-var TileChromeEditorLit2 = class extends LitElement10 {
+var TileChromeEditorLit2 = class extends LitElement11 {
   constructor() {
     super(...arguments);
     this.tileMeta = { title: "", subtitle: "", icon: "" };
@@ -4745,7 +4822,7 @@ var TileChromeEditorLit2 = class extends LitElement10 {
     this._patch("icon", value);
   }
   render() {
-    return html11`
+    return html12`
       <form @submit=${(e) => e.preventDefault()}>
         <label>
           <span>Title</span>
@@ -4778,13 +4855,13 @@ var TileChromeEditorLit2 = class extends LitElement10 {
       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>`}
+            ${this.tileMeta.icon ? html12`<span style="font-size: 20px">${this.tileMeta.icon}</span>` : html12`<span style="color: var(--syntro-text-tertiary, #87919f)">Choose icon…</span>`}
           </button>
 
-          ${this._pickerOpen ? html11`
+          ${this._pickerOpen ? html12`
               <div data-emoji-grid class="emoji-grid">
                 ${EMOJI_LIST2.map(
-      (emoji) => html11`
+      (emoji) => html12`
                     <button
                       type="button"
                       data-emoji=${emoji}
@@ -4795,7 +4872,7 @@ var TileChromeEditorLit2 = class extends LitElement10 {
                   `
     )}
               </div>
-            ` : nothing6}
+            ` : nothing7}
         </div>
       </form>
     `;
@@ -4909,13 +4986,13 @@ if (!customElements.get("syntro-tile-chrome-editor")) {
 }
 
 // src/faq-item-editor.ts
-import { css as css3, html as html12, LitElement as LitElement11, nothing as nothing7 } from "lit";
+import { css as css3, html as html13, LitElement as LitElement12, nothing as nothing8 } 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 {
+var FAQItemEditorLit = class extends LitElement12 {
   constructor() {
     super(...arguments);
     this.itemId = "";
@@ -4943,11 +5020,11 @@ var FAQItemEditorLit = class extends LitElement11 {
   render() {
     const item = this._findItem();
     if (!item) {
-      return html12`<p>Item not found</p>`;
+      return html13`<p>Item not found</p>`;
     }
     const q = item;
     const answerText = getAnswerText(q.config.answer);
-    return html12`
+    return html13`
       <form @submit=${(e) => e.preventDefault()}>
         <div>
           <label>
@@ -4986,12 +5063,12 @@ var FAQItemEditorLit = class extends LitElement11 {
           </label>
         </div>
 
-        ${q.rationale ? html12`
+        ${q.rationale ? html13`
             <div>
               <span>AI Rationale</span>
               <div data-rationale>${q.rationale.why}</div>
             </div>
-          ` : nothing7}
+          ` : nothing8}
       </form>
     `;
   }
@@ -5060,8 +5137,8 @@ function truncate(text, max) {
   if (text.length <= max) return text;
   return `${text.slice(0, max).trimEnd()}...`;
 }
-function stripHtml(html15) {
-  return html15.replace(/<[^>]*>/g, "").trim();
+function stripHtml(html16) {
+  return html16.replace(/<[^>]*>/g, "").trim();
 }
 function getAnswerPreview(answer) {
   if (typeof answer === "string") return answer;
@@ -5084,7 +5161,7 @@ function isOwnAction(action) {
 }
 
 // src/FAQWidgetLit.editable.ts
-import { html as html13, LitElement as LitElement12, nothing as nothing8 } from "lit";
+import { html as html14, LitElement as LitElement13, nothing as nothing9 } from "lit";
 import { styleMap as styleMap4 } from "lit/directives/style-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 function sm(styles) {
@@ -5205,7 +5282,7 @@ var TILE_EDIT_BTN_VISIBLE_STYLE = {
   ...TILE_EDIT_BTN_STYLE,
   opacity: "1"
 };
-var FAQAccordionEditableElement = class extends LitElement12 {
+var FAQAccordionEditableElement = class extends LitElement13 {
   constructor() {
     super(...arguments);
     // -------------------------------------------------------------------------
@@ -5320,7 +5397,7 @@ var FAQAccordionEditableElement = class extends LitElement12 {
     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`
+    return html14`
       <div
         data-faq-editable-row
         data-item-id=${item.config.id}
@@ -5332,14 +5409,14 @@ var FAQAccordionEditableElement = class extends LitElement12 {
       this._hoveredId = null;
     }}
       >
-        ${showHandles ? html13`
+        ${showHandles ? html14`
               <span
                 data-drag-handle
                 style=${styleMap4(sm(DRAG_HANDLE_STYLE))}
                 title="Drag to reorder"
                 aria-hidden="true"
               >⠿</span>
-            ` : nothing8}
+            ` : nothing9}
 
         <span
           style=${styleMap4(sm(QUESTION_STYLE))}
@@ -5356,7 +5433,7 @@ var FAQAccordionEditableElement = class extends LitElement12 {
           @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}
+        ${isExpanded && item.config.answer ? html14`<div data-faq-answer style=${styleMap4(sm(ANSWER_STYLE))}>${unsafeHTML(renderAnswerHtml(item.config.answer))}</div>` : nothing9}
       </div>
     `;
   }
@@ -5368,7 +5445,7 @@ var FAQAccordionEditableElement = class extends LitElement12 {
     const hasController = this.controller !== null;
     const showHandles = hasController && items.length >= 2;
     if (items.length === 0) {
-      return html13`
+      return html14`
         <div
           style=${styleMap4(sm(CONTAINER_STYLE))}
           data-adaptive-id="faq-editable"
@@ -5382,7 +5459,7 @@ var FAQAccordionEditableElement = class extends LitElement12 {
     }
     if (hasController) {
       const editBtnStyle = this._containerHovered ? TILE_EDIT_BTN_VISIBLE_STYLE : TILE_EDIT_BTN_STYLE;
-      return html13`
+      return html14`
         <div
           style=${styleMap4(sm({ ...CONTAINER_STYLE, position: "relative" }))}
           data-adaptive-id="faq-editable"
@@ -5406,14 +5483,14 @@ var FAQAccordionEditableElement = class extends LitElement12 {
         </div>
       `;
     }
-    return html13`
+    return html14`
       <div
         style=${styleMap4(sm(CONTAINER_STYLE))}
         data-adaptive-id="faq-editable"
         data-adaptive-type="adaptive-faq"
       >
         ${items.map(
-      (item) => html13`
+      (item) => html14`
             <div
               style=${styleMap4(sm(ROW_STYLE))}
               data-faq-item-id=${item.config.id}
@@ -5521,7 +5598,7 @@ function buildFlatItem(key, groupIdx, itemIdx, q) {
     question: q
   };
 }
-var FAQEditorLit = class extends LitElement13 {
+var FAQEditorLit = class extends LitElement14 {
   constructor() {
     super(...arguments);
     this.config = null;
@@ -5559,7 +5636,7 @@ var FAQEditorLit = class extends LitElement13 {
     };
     this._renderEditMode = (item) => {
       const { appConfig, onChange } = this._buildInnerProps(item);
-      return html14`
+      return html15`
       <syntro-faq-item-editor
         .itemId=${item.question.config.id}
         .appConfig=${appConfig}
@@ -5567,7 +5644,7 @@ var FAQEditorLit = class extends LitElement13 {
       ></syntro-faq-item-editor>
     `;
     };
-    this._renderItemCard = (item) => html14`
+    this._renderItemCard = (item) => html15`
     <div
       data-item-key=${item.key}
       data-card-body
@@ -5580,32 +5657,32 @@ var FAQEditorLit = class extends LitElement13 {
       deleteTestid: `delete-faq-${item.key}`,
       deleteLabel: "Delete question"
     })}
-      ${item.description ? html14`<div
+      ${item.description ? html15`<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>` : nothing9}
-      ${item.triggerSummary ? html14`<div
+            >${item.description}</div>` : nothing10}
+      ${item.triggerSummary ? html15`<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>` : nothing9}
-      ${item.validation && item.validation.length > 0 ? html14`<div
+            </div>` : nothing10}
+      ${item.validation && item.validation.length > 0 ? html15`<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) => html14`<div
+      (line) => html15`<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>` : nothing9}
-      ${item.question.rationale ? html14`
+            </div>` : nothing10}
+      ${item.question.rationale ? html15`
         <div class="se-text-[10px] se-text-text-tertiary se-mt-1">
           WHY: ${item.question.rationale.why}
         </div>
-      ` : nothing9}
+      ` : nothing10}
     </div>
   `;
     this._handleNavigateFromPill = (e) => {
@@ -5621,7 +5698,7 @@ var FAQEditorLit = class extends LitElement13 {
     this._renderGroupHeader = (section, count) => {
       const navRoute = section.routes[0];
       const testidSuffix = section.tileId ?? String(section.groupIdx);
-      return html14`
+      return html15`
       <div
         data-faq-group-header
         data-faq-group-tile-id=${section.tileId ?? ""}
@@ -5633,13 +5710,13 @@ var FAQEditorLit = class extends LitElement13 {
           >
             ${section.title}
           </span>
-          ${navRoute ? html14`<se-anchor-pill
+          ${navRoute ? html15`<se-anchor-pill
                   .state=${"navigate"}
                   .route=${navRoute}
                   testid-prefix="goto-faq-group"
                   testid-key=${testidSuffix}
                   @se-anchor-navigate=${this._handleNavigateFromPill}
-                ></se-anchor-pill>` : nothing9}
+                ></se-anchor-pill>` : nothing10}
         </div>
         <span class="se-text-text-tertiary se-text-[11px] se-font-normal">${count}</span>
       </div>
@@ -5647,21 +5724,21 @@ var FAQEditorLit = class extends LitElement13 {
     };
     this._renderListMode = (sections, items) => {
       if (items.length === 0) {
-        return html14`<div class="se-text-center se-py-8 se-px-4 se-text-text-secondary se-text-sm">
+        return html15`<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 html14`
+        return html15`
         <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 html14`${sections.map((section) => {
+      return html15`${sections.map((section) => {
         const sectionItems = items.filter((it) => it.groupIdx === section.groupIdx);
-        return html14`
+        return html15`
         ${this._renderGroupHeader(section, sectionItems.length)}
         ${sectionItems.map(this._renderItemCard)}
       `;
@@ -5726,11 +5803,11 @@ var FAQEditorLit = class extends LitElement13 {
   }
   render() {
     if (!this.config) {
-      return html14`<div class="se-p-8 se-text-center se-text-text-secondary se-text-sm">Loading...</div>`;
+      return html15`<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 html14`
+    return html15`
       <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">
@@ -5741,7 +5818,7 @@ var FAQEditorLit = class extends LitElement13 {
         </div>
 
         <div class="se-flex-1 se-overflow-auto se-p-4">
-          ${editItem ? html14`
+          ${editItem ? html15`
             <button type="button" @click=${() => {
       this._editingKey = null;
     }}