@syntrologie/adapt-nav 2.20.0 → 2.21.0

package/dist/editor.js

@@ -3332,6 +3332,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);
 
@@ -3564,7 +3794,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 html10, LitElement as LitElement9, nothing as nothing5 } from "lit";
+import { html as html14, LitElement as LitElement13, nothing as nothing9 } from "lit";
 
 // src/summarize.ts
 var MAX_TITLE_LEN = 30;
@@ -3608,7 +3838,7 @@ function isOwnAction(action) {
 }
 
 // ../../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
@@ -3727,7 +3957,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;
@@ -3853,7 +4083,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;
@@ -3889,13 +4119,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({
@@ -3917,7 +4147,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`,
@@ -3931,10 +4161,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",
@@ -3983,7 +4213,7 @@ var AnchorPickerLit = class extends LitElement {
               >
                 ${getElementDescription2(hovered)}
               </div>
-            </div>` : nothing2}
+            </div>` : nothing3}
       </div>
     `;
   }
@@ -4001,8 +4231,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";
@@ -4041,7 +4271,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"
@@ -4053,7 +4283,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"
@@ -4064,7 +4294,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"
@@ -4088,8 +4318,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 = "";
@@ -4137,7 +4367,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 {
@@ -4189,7 +4419,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;
@@ -4349,7 +4579,7 @@ var RESIZE_HANDLES2 = [
     cursor: "nesw-resize"
   }
 ];
-var syntroLogoSvg = html5`<svg
+var syntroLogoSvg = html6`<svg
   aria-hidden="true"
   width="28"
   height="18"
@@ -4369,7 +4599,7 @@ var syntroLogoSvg = html5`<svg
     </clipPath>
   </defs>
 </svg>`;
-var EditorPanelShellLit = class extends LitElement4 {
+var EditorPanelShellLit = class extends LitElement5 {
   constructor() {
     super(...arguments);
     this.isOpen = false;
@@ -4611,17 +4841,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}
@@ -4637,7 +4867,7 @@ var EditorPanelShellLit = class extends LitElement4 {
                 ></div>`
     )}
             <slot></slot>
-          </div>` : nothing3}
+          </div>` : nothing4}
 
       <div
         class="syntro-editor-scope"
@@ -4670,9 +4900,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;
@@ -4725,9 +4955,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>` : ""}
@@ -4764,9 +4994,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;
@@ -4873,7 +5103,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;
@@ -4885,14 +5115,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`,
@@ -4909,7 +5139,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"
@@ -4932,7 +5162,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
@@ -4954,8 +5184,8 @@ var ElementHighlightLit = class extends LitElement6 {
     })}
                   >
                     \u00d7
-                  </button>` : nothing4}
-            </div>` : nothing4}
+                  </button>` : nothing5}
+            </div>` : nothing5}
       </div>
     `;
   }
@@ -4980,8 +5210,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 = "";
@@ -4990,7 +5220,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>
@@ -5005,8 +5235,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 = "";
@@ -5020,7 +5250,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">
@@ -5039,6 +5269,811 @@ 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/nav-item-editor.ts
+import { css as css3, html as html12, LitElement as LitElement11, nothing as nothing7 } from "lit";
+var NavItemEditorLit = class extends LitElement11 {
+  constructor() {
+    super(...arguments);
+    this.itemId = "";
+    this.appConfig = {
+      expandBehavior: "single",
+      theme: "auto",
+      actions: []
+    };
+    this.onChange = () => {
+    };
+  }
+  _findItem() {
+    return this.appConfig.actions.find(
+      (a) => a.kind === "nav:tip" && a.config.id === this.itemId
+    );
+  }
+  _patchField(field, value) {
+    const next = {
+      ...this.appConfig,
+      actions: this.appConfig.actions.map(
+        (a) => a.kind === "nav:tip" && a.config.id === this.itemId ? { ...a, config: { ...a.config, [field]: value } } : a
+      )
+    };
+    this.onChange(next);
+  }
+  _patchExternal(value) {
+    const next = {
+      ...this.appConfig,
+      actions: this.appConfig.actions.map(
+        (a) => a.kind === "nav:tip" && a.config.id === this.itemId ? { ...a, config: { ...a.config, external: value } } : a
+      )
+    };
+    this.onChange(next);
+  }
+  render() {
+    const item = this._findItem();
+    if (!item) {
+      return html12`<p>Item not found</p>`;
+    }
+    const tip = item;
+    return html12`
+      <form @submit=${(e) => e.preventDefault()}>
+        <div>
+          <label>
+            <span>Title</span>
+            <input
+              name="title"
+              type="text"
+              .value=${tip.config.title ?? ""}
+              @input=${(e) => this._patchField("title", e.target.value)}
+            />
+          </label>
+        </div>
+
+        <div>
+          <label>
+            <span>Description</span>
+            <input
+              name="description"
+              type="text"
+              .value=${tip.config.description ?? ""}
+              @input=${(e) => this._patchField("description", e.target.value)}
+            />
+          </label>
+        </div>
+
+        <div>
+          <label>
+            <span>Link URL</span>
+            <input
+              name="href"
+              type="text"
+              .value=${tip.config.href ?? ""}
+              placeholder="Optional"
+              @input=${(e) => this._patchField("href", e.target.value)}
+            />
+          </label>
+        </div>
+
+        <div>
+          <label>
+            <span>Icon</span>
+            <input
+              name="icon"
+              type="text"
+              .value=${tip.config.icon ?? ""}
+              placeholder="e.g., 🧭"
+              @input=${(e) => this._patchField("icon", e.target.value)}
+            />
+          </label>
+        </div>
+
+        <div>
+          <label>
+            <span>Category</span>
+            <input
+              name="category"
+              type="text"
+              .value=${tip.config.category ?? ""}
+              placeholder="Optional"
+              @input=${(e) => this._patchField("category", e.target.value)}
+            />
+          </label>
+        </div>
+
+        <div>
+          <label class="checkbox-label">
+            <input
+              name="external"
+              type="checkbox"
+              .checked=${tip.config.external ?? false}
+              @change=${(e) => this._patchExternal(e.target.checked)}
+            />
+            <span>Open in new tab</span>
+          </label>
+        </div>
+
+        ${tip.rationale ? html12`
+            <div>
+              <span>AI Rationale</span>
+              <div data-rationale>${tip.rationale.why}</div>
+            </div>
+          ` : nothing7}
+      </form>
+    `;
+  }
+};
+NavItemEditorLit.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[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));
+    }
+    .checkbox-label {
+      flex-direction: row;
+      align-items: center;
+    }
+    .checkbox-label input[type='checkbox'] {
+      width: 16px;
+      height: 16px;
+      accent-color: var(--syntro-button-primary-bg-default, #b72e2a);
+    }
+    [data-rationale] {
+      font-size: 13px;
+      color: var(--syntro-text-tertiary, #87919f);
+      padding: 8px 12px;
+      background: var(--syntro-background-secondary, #07080a);
+      border-radius: 6px;
+    }
+  `;
+NavItemEditorLit.properties = {
+  itemId: { type: String, attribute: "item-id" },
+  appConfig: { attribute: false },
+  onChange: { attribute: false }
+};
+customElements.define("syntro-nav-item-editor", NavItemEditorLit);
+
+// src/NavWidgetLit.editable.ts
+import { html as html13, LitElement as LitElement12, nothing as nothing8 } from "lit";
+import { styleMap as styleMap4 } from "lit/directives/style-map.js";
+function sm(styles) {
+  return styles;
+}
+var ADAPTIVE_ID = "adaptive-nav:tips";
+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",
+  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 CONTENT_STYLE = {
+  flex: "1",
+  minWidth: "0"
+};
+var TITLE_STYLE = {
+  fontWeight: "500",
+  fontSize: "14px",
+  lineHeight: "1.4",
+  color: "inherit",
+  display: "block"
+};
+var DESCRIPTION_STYLE = {
+  fontSize: "12px",
+  lineHeight: "1.4",
+  color: "rgba(0, 0, 0, 0.5)",
+  display: "block",
+  marginTop: "2px",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+};
+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 NavTipsEditableElement = class extends LitElement12 {
+  constructor() {
+    super(...arguments);
+    // -------------------------------------------------------------------------
+    // Property declarations
+    // -------------------------------------------------------------------------
+    this.navConfig = {
+      expandBehavior: "single",
+      theme: "auto",
+      actions: []
+    };
+    /** Null when loaded without an editor context — renders read-only list. */
+    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 Nav tile (per-route navs). Empty string when unknown.
+     */
+    this.tileId = "";
+    /**
+     * The `makeSortable` factory to use. Injected by NavWidgetLitEditableMountable
+     * 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.
+     */
+    this.liveRegion = null;
+    this._hoveredId = null;
+    this._containerHovered = false;
+    // -------------------------------------------------------------------------
+    // Private sortable state (Phase 3.3 will wire this)
+    // -------------------------------------------------------------------------
+    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("navConfig") || 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.navConfig.actions ?? []).length < 2) return;
+    const liveRegion = this.liveRegion ?? document.createElement("div");
+    this._sortableHandle = this.sortable(this, {
+      itemSelector: "[data-nav-editable-row]",
+      handleSelector: "[data-drag-handle]",
+      getItems: () => (this.navConfig.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.preventDefault();
+    e.stopPropagation();
+    this._handleEdit(itemId);
+  }
+  _handleContainerEdit() {
+    if (!this.controller) return;
+    if (this.controller.isModalOpen()) return;
+    this.controller.editContainer(ADAPTIVE_ID, this.tileId || void 0);
+  }
+  // -------------------------------------------------------------------------
+  // Render helpers
+  // -------------------------------------------------------------------------
+  _renderRow(item, showHandles) {
+    const { id, title, description } = item.config;
+    const isHovered = this._hoveredId === id;
+    const rowStyle = isHovered ? ROW_HOVER_STYLE : ROW_STYLE;
+    const pencilStyle = isHovered ? PENCIL_VISIBLE_STYLE : PENCIL_STYLE;
+    return html13`
+      <div
+        data-nav-editable-row
+        data-item-id=${id}
+        style=${styleMap4(sm(rowStyle))}
+        @mouseenter=${() => {
+      this._hoveredId = 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(CONTENT_STYLE))}>
+          <span style=${styleMap4(sm(TITLE_STYLE))}>${title}</span>
+          ${description ? html13`<span style=${styleMap4(sm(DESCRIPTION_STYLE))}>${description}</span>` : nothing8}
+        </span>
+
+        <button
+          type="button"
+          data-edit-pencil
+          data-item-id=${id}
+          style=${styleMap4(sm(pencilStyle))}
+          title="Edit this item"
+          aria-label="Edit ${title}"
+          @click=${(e) => this._handlePencilClick(e, id)}
+        >✏️</button>
+      </div>
+    `;
+  }
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+  render() {
+    const items = this.navConfig.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="nav-editable"
+          data-adaptive-type="adaptive-nav"
+        >
+          <div style=${styleMap4(sm(EMPTY_STYLE))}>
+            No nav tips yet. Add tips 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="nav-editable"
+          data-adaptive-type="adaptive-nav"
+          @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="nav-editable"
+        data-adaptive-type="adaptive-nav"
+      >
+        ${items.map(
+      (item) => html13`
+            <div
+              style=${styleMap4(sm(ROW_STYLE))}
+              data-nav-tip-id=${item.config.id}
+            >
+              <span style=${styleMap4(sm(CONTENT_STYLE))}>
+                <span style=${styleMap4(sm(TITLE_STYLE))}>${item.config.title}</span>
+                ${item.config.description ? html13`<span style=${styleMap4(sm(DESCRIPTION_STYLE))}>${item.config.description}</span>` : nothing8}
+              </span>
+            </div>
+          `
+    )}
+      </div>
+    `;
+  }
+};
+// -------------------------------------------------------------------------
+// Reactive properties
+// -------------------------------------------------------------------------
+NavTipsEditableElement.properties = {
+  navConfig: { attribute: false },
+  controller: { attribute: false },
+  tileId: { attribute: false },
+  // Internal hover state per item id
+  _hoveredId: { state: true },
+  _containerHovered: { state: true }
+};
+if (!customElements.get("syntro-nav-tips-editable")) {
+  customElements.define("syntro-nav-tips-editable", NavTipsEditableElement);
+}
+var NavWidgetLitEditableMountable = {
+  mount(container, config) {
+    const {
+      instanceId = "",
+      controller = null,
+      sortable = null,
+      liveRegion = null,
+      ...navConfig
+    } = config ?? {
+      expandBehavior: "single",
+      theme: "auto",
+      actions: []
+    };
+    const el = document.createElement("syntro-nav-tips-editable");
+    Object.assign(el, {
+      navConfig,
+      controller,
+      sortable,
+      liveRegion,
+      tileId: instanceId
+    });
+    container.appendChild(el);
+    return () => el.remove();
+  }
+};
+
 // src/editor.ts
 var getCurrentPath = () => window.location.pathname;
 var routeMatchesCurrent = (route) => {
@@ -5098,7 +6133,7 @@ var runDetection = (items) => {
   for (const item of items) map.set(item.key, detectItem(item));
   return map;
 };
-var NavEditorLit = class extends LitElement9 {
+var NavEditorLit = class extends LitElement13 {
   constructor() {
     super(...arguments);
     this.config = null;
@@ -5114,15 +6149,6 @@ var NavEditorLit = class extends LitElement9 {
     this._handleItemClick = (key) => {
       this._editingKey = key;
     };
-    this._handleFieldChange = (index, field, value) => {
-      if (!this.config) return;
-      const ownActions = (this.config.actions || []).filter(isOwnAction).slice();
-      const tip = { ...ownActions[index], config: { ...ownActions[index].config } };
-      tip.config[field] = value;
-      ownActions[index] = tip;
-      const otherActions = (this.config.actions || []).filter((a) => !isOwnAction(a));
-      this._emitConfig({ ...this.config, actions: [...otherActions, ...ownActions] });
-    };
     this._handleDelete = (index, e) => {
       e.stopPropagation();
       if (!this.config) return;
@@ -5158,7 +6184,7 @@ var NavEditorLit = class extends LitElement9 {
     // ---- Render ----
     this._renderAnchorButton = (item) => {
       const state = this._detectionMap.get(item.key)?.state ?? "missing";
-      return html10`<se-anchor-pill
+      return html14`<se-anchor-pill
       .state=${state}
       .selector=${item.selector}
       .route=${item.route}
@@ -5169,61 +6195,24 @@ var NavEditorLit = class extends LitElement9 {
     ></se-anchor-pill>`;
     };
     this._renderEditMode = (item) => {
-      const tip = item.tip;
-      return html10`
+      if (!this.config) return nothing9;
+      return html14`
       <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">Title</label>
-          <input type="text" .value=${tip.config.title}
-            @input=${(e) => this._handleFieldChange(item.index, "title", 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">Description</label>
-          <input type="text" .value=${tip.config.description}
-            @input=${(e) => this._handleFieldChange(item.index, "description", 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">Link URL</label>
-          <input type="text" .value=${tip.config.href || ""} placeholder="Optional"
-            @input=${(e) => this._handleFieldChange(item.index, "href", 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">Icon</label>
-          <input type="text" .value=${tip.config.icon || ""} placeholder="e.g., 🧭"
-            @input=${(e) => this._handleFieldChange(item.index, "icon", 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">Category</label>
-          <input type="text" .value=${tip.config.category || ""} placeholder="Optional"
-            @input=${(e) => this._handleFieldChange(item.index, "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>
-
-        ${tip.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">
-              ${tip.rationale.why}
-            </div>
-          </div>
-        ` : nothing5}
+        <syntro-nav-item-editor
+          .itemId=${item.tip.config.id}
+          .appConfig=${this.config}
+          .onChange=${(next) => {
+        this._emitConfig(next);
+      }}
+        ></syntro-nav-item-editor>
       </div>
     `;
     };
-    this._renderItemCard = (item) => html10`
+    this._renderItemCard = (item) => html14`
     <div
       data-item-key=${item.key}
       data-card-body
@@ -5237,38 +6226,38 @@ var NavEditorLit = class extends LitElement9 {
       deleteTestid: `delete-nav-${item.key}`,
       deleteLabel: "Delete tip"
     })}
-      ${item.description ? html10`<div
+      ${item.description ? html14`<div
               data-testid=${`nav-description-${item.key}`}
               class="se-text-[11px] se-text-text-secondary se-mt-1.5 se-line-clamp-2"
-            >${item.description}</div>` : nothing5}
-      ${item.trigger !== "All pages" ? html10`
+            >${item.description}</div>` : nothing9}
+      ${item.trigger !== "All pages" ? html14`
         <div
           data-testid=${`nav-trigger-${item.key}`}
           class="se-text-[10px] se-text-text-tertiary se-mt-1"
         >📍 ${item.trigger}</div>
-      ` : nothing5}
-      ${item.validation && item.validation.length > 0 ? html10`<div
+      ` : nothing9}
+      ${item.validation && item.validation.length > 0 ? html14`<div
               data-testid=${`nav-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.rationale ? html10`
+            </div>` : nothing9}
+      ${item.rationale ? html14`
         <div class="se-text-[10px] se-text-text-tertiary se-mt-1">WHY: ${item.rationale}</div>
-      ` : nothing5}
+      ` : nothing9}
     </div>
   `;
     this._renderListMode = (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 tips configured.
       </div>`;
       }
-      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">
         TIPS <span class="se-text-text-tertiary se-font-normal">${items.length}</span>
       </div>
@@ -5301,11 +6290,11 @@ var NavEditorLit = class extends LitElement9 {
   }
   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 items = flattenItems(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">
@@ -5316,7 +6305,7 @@ var NavEditorLit = 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;
     }}
@@ -5336,8 +6325,37 @@ NavEditorLit.properties = {
   _detectionMap: { state: true }
 };
 customElements.define("se-nav-editor", NavEditorLit);
+function registerNavEditorFactories(modalHost) {
+  modalHost.registerEditorFactory("adaptive-nav:tips", {
+    item: ({ itemId, appConfig, onChange }) => {
+      const el = document.createElement("syntro-nav-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 {
-  NavEditorLit
+  NavEditorLit,
+  NavItemEditorLit,
+  NavTipsEditableElement,
+  NavWidgetLitEditableMountable,
+  registerNavEditorFactories
 };
 /*! Bundled license information: