@lit-pigeon/editor 0.3.1 → 0.3.3

package/dist/index.js

@@ -1,11 +1,12 @@
 import { css as b, LitElement as g, html as l, nothing as te } from "lit";
 import { property as p, state as d, customElement as u } from "lit/decorators.js";
 import { t as s, c as Bt, r as po } from "./templates.js";
-import { P as Ur } from "./templates.js";
-import { getAllBlockDefinitions as co, getBlockDefinition as yt, updateBlock as ct, createBlock as Ye, insertBlock as ce, createColumn as Ie, insertRow as oe, createRow as Pe, cloneRowWithNewIds as jt, createBodySelection as Rt, deleteBlock as ho, deleteRow as Lt, duplicateBlock as go, duplicateRow as zt, generateId as Mt, EditorState as Ht, createHistoryPlugin as Ft, undo as uo, redo as bo, InMemoryTemplateStorage as vo, InMemoryRowLibraryStorage as fo, SYSTEM_LINK_TYPES as mo, createDocStep as dt, createDefaultDocument as _o, HISTORY_PLUGIN_NAME as Nt, canUndo as yo, canRedo as xo, createBlockSelection as ht, createRowSelection as Ut, createColumnSelection as $o, moveRow as wo, moveBlock as ko, updateRowAttributes as Co, addColumn as Io, removeColumn as Po, resizeColumns as To } from "@lit-pigeon/core";
+import { P as Kr } from "./templates.js";
+import { getAllBlockDefinitions as co, getBlockDefinition as yt, updateBlock as ct, createBlock as Ve, insertBlock as ce, createColumn as Ie, insertRow as oe, createRow as Te, cloneRowWithNewIds as jt, createBodySelection as Mt, deleteBlock as ho, deleteRow as Rt, duplicateBlock as go, duplicateRow as Lt, generateId as zt, EditorState as Ht, createHistoryPlugin as Ft, undo as uo, redo as bo, InMemoryTemplateStorage as vo, InMemoryRowLibraryStorage as fo, SYSTEM_LINK_TYPES as mo, createDocStep as dt, createDefaultDocument as _o, HISTORY_PLUGIN_NAME as Nt, canUndo as yo, canRedo as xo, createBlockSelection as ht, createRowSelection as Ut, createColumnSelection as $o, moveRow as wo, moveBlock as ko, updateRowAttributes as Co, addColumn as Io, removeColumn as To, resizeColumns as Po } from "@lit-pigeon/core";
 import { unsafeHTML as eo } from "lit/directives/unsafe-html.js";
-import { l as xt, r as So } from "./rich-text.js";
+import { l as xt, r as So } from "./rich-text-bridge.js";
 import { styleMap as Oo } from "lit/directives/style-map.js";
+import "./rich-text.js";
 const Kt = b`
   /* base palette */
   --pigeon-bg: #0f172a; /* slate-900 */
@@ -42,7 +43,7 @@ const Kt = b`
     0 2px 4px -2px rgb(0 0 0 / 0.4);
   --pigeon-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.5),
     0 4px 6px -4px rgb(0 0 0 / 0.5);
-`, Do = b`
+`, Eo = b`
   :host {
     /* base palette */
     --pigeon-bg: #ffffff;
@@ -112,12 +113,12 @@ const Kt = b`
     }
   }
 `;
-var Eo = Object.defineProperty, Ao = Object.getOwnPropertyDescriptor, xe = (e, t, o, r) => {
+var Do = Object.defineProperty, Ao = Object.getOwnPropertyDescriptor, xe = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Ao(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
-  return r && i && Eo(t, o, i), i;
+  return r && i && Do(t, o, i), i;
 };
-let K = class extends g {
+let V = class extends g {
   constructor() {
     super(...arguments), this.canUndo = !1, this.canRedo = !1, this.device = "desktop", this.fullscreen = !1, this._exportMenuOpen = !1;
   }
@@ -318,7 +319,10 @@ let K = class extends g {
     }));
   }
   _toggleExportMenu() {
-    this._exportMenuOpen = !this._exportMenuOpen;
+    this._exportMenuOpen = !this._exportMenuOpen, this._exportMenuOpen && this.dispatchEvent(new CustomEvent("toolbar-export", {
+      bubbles: !0,
+      composed: !0
+    }));
   }
   _onExportHtml() {
     this._exportMenuOpen = !1, this.dispatchEvent(new CustomEvent("pigeon:export-html", {
@@ -339,7 +343,7 @@ let K = class extends g {
     }));
   }
 };
-K.styles = b`
+V.styles = b`
     :host {
       display: flex;
       align-items: center;
@@ -471,27 +475,27 @@ K.styles = b`
   `;
 xe([
   p({ type: Boolean, attribute: "can-undo" })
-], K.prototype, "canUndo", 2);
+], V.prototype, "canUndo", 2);
 xe([
   p({ type: Boolean, attribute: "can-redo" })
-], K.prototype, "canRedo", 2);
+], V.prototype, "canRedo", 2);
 xe([
   p({ type: String })
-], K.prototype, "device", 2);
+], V.prototype, "device", 2);
 xe([
   p({ type: Boolean })
-], K.prototype, "fullscreen", 2);
+], V.prototype, "fullscreen", 2);
 xe([
   d()
-], K.prototype, "_exportMenuOpen", 2);
-K = xe([
+], V.prototype, "_exportMenuOpen", 2);
+V = xe([
   u("pigeon-toolbar")
-], K);
+], V);
 let $t = null;
 function Bo(e) {
   $t = e;
 }
-function De() {
+function Ee() {
   return $t;
 }
 function Xe() {
@@ -500,21 +504,21 @@ function Xe() {
 function wt(e, t) {
   e.dataTransfer && (e.dataTransfer.setData("application/json", JSON.stringify(t)), e.dataTransfer.effectAllowed = "move"), Bo(t);
 }
-function Hr(e) {
+function Fr(e) {
   if (e.dataTransfer)
     try {
       const t = e.dataTransfer.getData("application/json");
       if (t) return JSON.parse(t);
     } catch {
     }
-  return De();
+  return Ee();
 }
-var jo = Object.defineProperty, Ro = Object.getOwnPropertyDescriptor, $e = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ro(t, o) : t, n = e.length - 1, a; n >= 0; n--)
+var jo = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, $e = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Mo(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && jo(t, o, i), i;
 };
-const Lo = {
+const Ro = {
   text: "T",
   image: "[]",
   button: "[B]",
@@ -523,12 +527,12 @@ const Lo = {
   social: "@",
   html: "</>"
 };
-let W = class extends g {
+let Y = class extends g {
   constructor() {
-    super(...arguments), this.label = "", this.icon = "", this.dragType = "palette-block", this.blockType = "", this.columnCount = 1;
+    super(...arguments), this.label = "", this.icon = "", this.dragType = "palette-block", this.blockType = "", this.columnCount = 1, this._didDrag = !1;
   }
   render() {
-    const e = Lo[this.icon] ?? this.icon ?? "?", t = this.dragType === "palette-row" ? "Add layout" : "Add block";
+    const e = Ro[this.icon] ?? this.icon ?? "?", t = this.dragType === "palette-row" ? "Add layout" : "Add block";
     return l`
       <div
         class="item"
@@ -536,7 +540,8 @@ let W = class extends g {
         role="button"
         tabindex="0"
         aria-label="${t}: ${this.label}"
-        title="Drag onto the canvas, or press Enter to add"
+        title="Click to add, or drag onto the canvas"
+        @click=${this._onClick}
         @dragstart=${this._onDragStart}
         @dragend=${this._onDragEnd}
         @keydown=${this._onKeyDown}
@@ -546,8 +551,18 @@ let W = class extends g {
       </div>
     `;
   }
+  _onClick() {
+    this._didDrag || this._activate();
+  }
   _onKeyDown(e) {
-    e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.dispatchEvent(
+    e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this._activate());
+  }
+  /**
+   * Click/keyboard equivalent of dragging this item onto the canvas: ask the
+   * editor to append the block/layout to the document.
+   */
+  _activate() {
+    this.dispatchEvent(
       new CustomEvent("palette-item-activate", {
         detail: {
           type: this.dragType,
@@ -557,10 +572,10 @@ let W = class extends g {
         bubbles: !0,
         composed: !0
       })
-    ));
+    );
   }
   _onDragStart(e) {
-    wt(e, {
+    this._didDrag = !0, wt(e, {
       type: this.dragType,
       blockType: this.blockType || void 0,
       columnCount: this.columnCount
@@ -577,13 +592,15 @@ let W = class extends g {
     });
   }
   _onDragEnd() {
-    this.dispatchEvent(new CustomEvent("palette-drag-end", {
+    setTimeout(() => {
+      this._didDrag = !1;
+    }, 0), this.dispatchEvent(new CustomEvent("palette-drag-end", {
       bubbles: !0,
       composed: !0
     }));
   }
 };
-W.styles = b`
+Y.styles = b`
     :host {
       display: block;
     }
@@ -643,26 +660,26 @@ W.styles = b`
   `;
 $e([
   p({ type: String })
-], W.prototype, "label", 2);
+], Y.prototype, "label", 2);
 $e([
   p({ type: String })
-], W.prototype, "icon", 2);
+], Y.prototype, "icon", 2);
 $e([
   p({ type: String, attribute: "drag-type" })
-], W.prototype, "dragType", 2);
+], Y.prototype, "dragType", 2);
 $e([
   p({ type: String, attribute: "block-type" })
-], W.prototype, "blockType", 2);
+], Y.prototype, "blockType", 2);
 $e([
   p({ type: Number, attribute: "column-count" })
-], W.prototype, "columnCount", 2);
-W = $e([
+], Y.prototype, "columnCount", 2);
+Y = $e([
   u("pigeon-palette-item")
-], W);
-var zo = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, kt = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Mo(t, o) : t, n = e.length - 1, a; n >= 0; n--)
+], Y);
+var Lo = Object.defineProperty, zo = Object.getOwnPropertyDescriptor, kt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? zo(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
-  return r && i && zo(t, o, i), i;
+  return r && i && Lo(t, o, i), i;
 };
 const Ho = {
   text: "T",
@@ -675,7 +692,7 @@ const Ho = {
   hero: "H",
   navbar: "Nav"
 };
-let Ee = class extends g {
+let De = class extends g {
   constructor() {
     super(...arguments), this.selection = null;
   }
@@ -734,7 +751,7 @@ let Ee = class extends g {
     }));
   }
 };
-Ee.styles = b`
+De.styles = b`
     :host {
       display: block;
       font-family: var(--pigeon-font);
@@ -800,14 +817,14 @@ Ee.styles = b`
   `;
 kt([
   p({ type: Object })
-], Ee.prototype, "doc", 2);
+], De.prototype, "doc", 2);
 kt([
   p({ type: Object })
-], Ee.prototype, "selection", 2);
-Ee = kt([
+], De.prototype, "selection", 2);
+De = kt([
   u("pigeon-layers")
-], Ee);
-var Fo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, M = (e, t, o, r) => {
+], De);
+var Fo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, H = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? No(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && Fo(t, o, i), i;
@@ -826,7 +843,7 @@ const Wo = [
   { labelKey: "palette.layout.3-col", columns: 3, icon: "[|||]" },
   { labelKey: "palette.layout.4-col", columns: 4, icon: "[||||]" }
 ];
-let I = class extends g {
+let T = class extends g {
   constructor() {
     super(...arguments), this.selection = null, this.brandKit = null, this.rowLibrary = null, this._blockDefs = [], this._activeTab = "content", this._brandTabLoaded = !1, this._savedTabLoaded = !1, this._handleBrandTabClick = async () => {
       this._activeTab = "brand", this._brandTabLoaded || (await Uo(), this._brandTabLoaded = !0);
@@ -936,7 +953,7 @@ let I = class extends g {
     return this._savedTabLoaded ? l`<pigeon-saved-tab .storage=${this.rowLibrary}></pigeon-saved-tab>` : l``;
   }
 };
-I.styles = b`
+T.styles = b`
     :host {
       display: block;
       width: var(--pigeon-palette-width, 240px);
@@ -1015,34 +1032,34 @@ I.styles = b`
       gap: 6px;
     }
   `;
-M([
+H([
   p({ type: Object })
-], I.prototype, "doc", 2);
-M([
+], T.prototype, "doc", 2);
+H([
   p({ type: Object })
-], I.prototype, "selection", 2);
-M([
+], T.prototype, "selection", 2);
+H([
   p({ attribute: !1 })
-], I.prototype, "brandKit", 2);
-M([
+], T.prototype, "brandKit", 2);
+H([
   p({ attribute: !1 })
-], I.prototype, "rowLibrary", 2);
-M([
+], T.prototype, "rowLibrary", 2);
+H([
   d()
-], I.prototype, "_blockDefs", 2);
-M([
+], T.prototype, "_blockDefs", 2);
+H([
   d()
-], I.prototype, "_activeTab", 2);
-M([
+], T.prototype, "_activeTab", 2);
+H([
   d()
-], I.prototype, "_brandTabLoaded", 2);
-M([
+], T.prototype, "_brandTabLoaded", 2);
+H([
   d()
-], I.prototype, "_savedTabLoaded", 2);
-I = M([
+], T.prototype, "_savedTabLoaded", 2);
+T = H([
   u("pigeon-palette")
-], I);
-function Vo(e, t) {
+], T);
+function qo(e, t) {
   if (t.length === 0) return 0;
   for (let o = 0; o < t.length; o++) {
     const r = t[o].getBoundingClientRect(), i = r.top + r.height / 2;
@@ -1051,7 +1068,7 @@ function Vo(e, t) {
   }
   return t.length;
 }
-function Yo(e, t) {
+function Vo(e, t) {
   if (t.length === 0) return 0;
   for (let o = 0; o < t.length; o++) {
     const r = t[o].getBoundingClientRect(), i = r.top + r.height / 2;
@@ -1063,10 +1080,10 @@ function Yo(e, t) {
 function to(e, t) {
   return e < 0 || t === e || t === e + 1 ? null : t > e ? t - 1 : t;
 }
-var qo = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, oo = (e, t, o, r) => {
+var Yo = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, oo = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Xo(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
-  return r && i && qo(t, o, i), i;
+  return r && i && Yo(t, o, i), i;
 };
 let Ge = class extends g {
   constructor() {
@@ -1169,7 +1186,7 @@ let de = class extends g {
       element: this._editorHost,
       initialHTML: this.block.values.content,
       onBlur: (o) => this._commit(o),
-      onEscape: () => this._exit()
+      onEscape: (o) => this._commit(o)
     }));
   }
   _teardownEditor() {
@@ -1189,10 +1206,6 @@ let de = class extends g {
       composed: !0
     }));
   }
-  _exit() {
-    const e = this._editor ? this._editor.getHTML() : this.block.values.content;
-    this._commit(e);
-  }
   _handleClick(e) {
     e.stopPropagation(), !this.editing && this.dispatchEvent(new CustomEvent("block-select", {
       detail: { blockId: this.block.id },
@@ -1584,7 +1597,7 @@ It([
 Be = It([
   u("pigeon-divider-block")
 ], Be);
-var ri = Object.defineProperty, ni = Object.getOwnPropertyDescriptor, Pt = (e, t, o, r) => {
+var ri = Object.defineProperty, ni = Object.getOwnPropertyDescriptor, Tt = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? ni(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && ri(t, o, i), i;
@@ -1656,16 +1669,16 @@ je.styles = b`
       opacity: 1;
     }
   `;
-Pt([
+Tt([
   p({ type: Object })
 ], je.prototype, "block", 2);
-Pt([
+Tt([
   p({ type: Boolean, reflect: !0 })
 ], je.prototype, "selected", 2);
-je = Pt([
+je = Tt([
   u("pigeon-spacer-block")
 ], je);
-var ai = Object.defineProperty, si = Object.getOwnPropertyDescriptor, Tt = (e, t, o, r) => {
+var ai = Object.defineProperty, si = Object.getOwnPropertyDescriptor, Pt = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? si(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && ai(t, o, i), i;
@@ -1687,7 +1700,7 @@ const li = {
   tiktok: "#000000",
   custom: "#6b7280"
 };
-let Re = class extends g {
+let Me = class extends g {
   constructor() {
     super(...arguments), this.selected = !1;
   }
@@ -1734,7 +1747,7 @@ let Re = class extends g {
     }));
   }
 };
-Re.styles = b`
+Me.styles = b`
     :host {
       display: block;
       cursor: pointer;
@@ -1782,21 +1795,21 @@ Re.styles = b`
       font-size: 13px;
     }
   `;
-Tt([
+Pt([
   p({ type: Object })
-], Re.prototype, "block", 2);
-Tt([
+], Me.prototype, "block", 2);
+Pt([
   p({ type: Boolean, reflect: !0 })
-], Re.prototype, "selected", 2);
-Re = Tt([
+], Me.prototype, "selected", 2);
+Me = Pt([
   u("pigeon-social-block")
-], Re);
+], Me);
 var ci = Object.defineProperty, di = Object.getOwnPropertyDescriptor, St = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? di(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && ci(t, o, i), i;
 };
-let Le = class extends g {
+let Re = class extends g {
   constructor() {
     super(...arguments), this.selected = !1;
   }
@@ -1809,10 +1822,24 @@ let Le = class extends g {
         style="${t}"
         @click=${this._handleClick}
       >
-        ${e.content ? l`<div class="content" .innerHTML=${e.content}></div>` : l`<div class="empty-state">&lt;/&gt; Custom HTML</div>`}
+        ${e.content ? l`<iframe
+              class="content"
+              title="Custom HTML"
+              sandbox="allow-same-origin"
+              .srcdoc=${`<style>body{margin:0;display:flow-root}</style>${e.content}`}
+              @load=${this._fit}
+            ></iframe>` : l`<div class="empty-state">&lt;/&gt; Custom HTML</div>`}
       </div>
     `;
   }
+  /** No scripts run inside the sandbox, so the parent sizes the frame to its content. */
+  _fit(e) {
+    var o;
+    const t = e.target;
+    (o = this._resizer) == null || o.disconnect(), this._resizer = new ResizeObserver(() => {
+      t.style.height = `${t.contentDocument.body.scrollHeight}px`;
+    }), this._resizer.observe(t);
+  }
   _handleClick(e) {
     e.stopPropagation(), this.dispatchEvent(new CustomEvent("block-select", {
       detail: { blockId: this.block.id },
@@ -1821,7 +1848,7 @@ let Le = class extends g {
     }));
   }
 };
-Le.styles = b`
+Re.styles = b`
     :host {
       display: block;
       cursor: pointer;
@@ -1844,8 +1871,10 @@ Le.styles = b`
     }
 
     .content {
-      word-wrap: break-word;
-      overflow-wrap: break-word;
+      display: block;
+      width: 100%;
+      border: 0;
+      pointer-events: none;
     }
 
     .empty-state {
@@ -1863,13 +1892,13 @@ Le.styles = b`
   `;
 St([
   p({ type: Object })
-], Le.prototype, "block", 2);
+], Re.prototype, "block", 2);
 St([
   p({ type: Boolean, reflect: !0 })
-], Le.prototype, "selected", 2);
-Le = St([
+], Re.prototype, "selected", 2);
+Re = St([
   u("pigeon-html-block")
-], Le);
+], Re);
 var hi = Object.defineProperty, gi = Object.getOwnPropertyDescriptor, it = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? gi(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
@@ -2037,7 +2066,7 @@ var ui = Object.defineProperty, bi = Object.getOwnPropertyDescriptor, Ot = (e, t
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && ui(t, o, i), i;
 };
-let ze = class extends g {
+let Le = class extends g {
   constructor() {
     super(...arguments), this.selected = !1;
   }
@@ -2080,7 +2109,7 @@ let ze = class extends g {
     }));
   }
 };
-ze.styles = b`
+Le.styles = b`
     :host {
       display: block;
       cursor: pointer;
@@ -2130,19 +2159,19 @@ ze.styles = b`
   `;
 Ot([
   p({ type: Object })
-], ze.prototype, "block", 2);
+], Le.prototype, "block", 2);
 Ot([
   p({ type: Boolean, reflect: !0 })
-], ze.prototype, "selected", 2);
-ze = Ot([
+], Le.prototype, "selected", 2);
+Le = Ot([
   u("pigeon-navbar-block")
-], ze);
-var vi = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, X = (e, t, o, r) => {
+], Le);
+var vi = Object.defineProperty, fi = Object.getOwnPropertyDescriptor, Z = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? fi(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && vi(t, o, i), i;
 };
-let O = class extends g {
+let A = class extends g {
   constructor() {
     super(...arguments), this.rowId = "", this.selection = null, this.editingBlockId = null, this._dropIndex = -1, this._isDragOver = !1, this._draggingBlockId = null;
   }
@@ -2251,7 +2280,7 @@ let O = class extends g {
     );
   }
   _onDragOver(e) {
-    const t = De();
+    const t = Ee();
     if (!t || t.type !== "palette-block" && t.type !== "existing-block") return;
     e.preventDefault(), e.stopPropagation(), e.dataTransfer && (e.dataTransfer.dropEffect = t.type === "existing-block" ? "move" : "copy"), this._isDragOver = !0;
     const o = Array.from(
@@ -2259,14 +2288,14 @@ let O = class extends g {
         "pigeon-text-block, pigeon-image-block, pigeon-button-block, pigeon-divider-block, pigeon-spacer-block, pigeon-social-block, pigeon-html-block, pigeon-hero-block, pigeon-navbar-block, .custom-block"
       )
     );
-    this._dropIndex = Yo(e.clientY, o);
+    this._dropIndex = Vo(e.clientY, o);
   }
   _onDragLeave(e) {
     const t = this.getBoundingClientRect();
     e.clientX >= t.left && e.clientX <= t.right && e.clientY >= t.top && e.clientY <= t.bottom || (this._isDragOver = !1, this._dropIndex = -1);
   }
   _onDrop(e) {
-    const t = De();
+    const t = Ee();
     if (!t || t.type !== "palette-block" && t.type !== "existing-block") return;
     e.preventDefault(), e.stopPropagation();
     let o = this._dropIndex >= 0 ? this._dropIndex : this.column.blocks.length;
@@ -2308,7 +2337,7 @@ let O = class extends g {
     this._draggingBlockId = null, Xe();
   }
 };
-O.styles = b`
+A.styles = b`
     :host {
       display: block;
       min-height: 40px;
@@ -2424,36 +2453,36 @@ O.styles = b`
       text-align: center;
     }
   `;
-X([
+Z([
   p({ type: Object })
-], O.prototype, "column", 2);
-X([
+], A.prototype, "column", 2);
+Z([
   p({ type: String, attribute: "row-id" })
-], O.prototype, "rowId", 2);
-X([
+], A.prototype, "rowId", 2);
+Z([
   p({ type: Object })
-], O.prototype, "selection", 2);
-X([
+], A.prototype, "selection", 2);
+Z([
   p({ type: String, attribute: "editing-block-id" })
-], O.prototype, "editingBlockId", 2);
-X([
+], A.prototype, "editingBlockId", 2);
+Z([
   d()
-], O.prototype, "_dropIndex", 2);
-X([
+], A.prototype, "_dropIndex", 2);
+Z([
   d()
-], O.prototype, "_isDragOver", 2);
-X([
+], A.prototype, "_isDragOver", 2);
+Z([
   d()
-], O.prototype, "_draggingBlockId", 2);
-O = X([
+], A.prototype, "_draggingBlockId", 2);
+A = Z([
   u("pigeon-column")
-], O);
-var mi = Object.defineProperty, _i = Object.getOwnPropertyDescriptor, G = (e, t, o, r) => {
+], A);
+var mi = Object.defineProperty, _i = Object.getOwnPropertyDescriptor, Q = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? _i(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && mi(t, o, i), i;
 };
-let D = class extends g {
+let B = class extends g {
   constructor() {
     super(...arguments), this.index = 0, this.totalRows = 0, this.selection = null, this.editingBlockId = null, this.showActions = !1, this._dragging = !1;
   }
@@ -2613,7 +2642,7 @@ let D = class extends g {
     this._dragging = !1, Xe();
   }
 };
-D.styles = b`
+B.styles = b`
     :host {
       display: block;
       position: relative;
@@ -2744,31 +2773,31 @@ D.styles = b`
       opacity: 1;
     }
   `;
-G([
+Q([
   p({ type: Object })
-], D.prototype, "row", 2);
-G([
+], B.prototype, "row", 2);
+Q([
   p({ type: Number })
-], D.prototype, "index", 2);
-G([
+], B.prototype, "index", 2);
+Q([
   p({ type: Number, attribute: "total-rows" })
-], D.prototype, "totalRows", 2);
-G([
+], B.prototype, "totalRows", 2);
+Q([
   p({ type: Object })
-], D.prototype, "selection", 2);
-G([
+], B.prototype, "selection", 2);
+Q([
   p({ type: String, attribute: "editing-block-id" })
-], D.prototype, "editingBlockId", 2);
-G([
+], B.prototype, "editingBlockId", 2);
+Q([
   p({ type: Boolean, attribute: "show-actions", reflect: !0 })
-], D.prototype, "showActions", 2);
-G([
+], B.prototype, "showActions", 2);
+Q([
   d()
-], D.prototype, "_dragging", 2);
-D = G([
+], B.prototype, "_dragging", 2);
+B = Q([
   u("pigeon-row")
-], D);
-var yi = Object.defineProperty, xi = Object.getOwnPropertyDescriptor, H = (e, t, o, r) => {
+], B);
+var yi = Object.defineProperty, xi = Object.getOwnPropertyDescriptor, F = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? xi(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && yi(t, o, i), i;
@@ -2872,12 +2901,12 @@ let P = class extends g {
     }));
   }
   _onDragOver(e) {
-    const t = De();
+    const t = Ee();
     if (t && (e.preventDefault(), e.dataTransfer && (e.dataTransfer.dropEffect = t.type === "existing-row" ? "move" : "copy"), this._isDragOver = !0, t.type === "palette-row" || t.type === "existing-row" || t.type === "library-row" || this.doc.body.rows.length === 0)) {
       const o = Array.from(
         this.renderRoot.querySelectorAll("pigeon-row")
       );
-      this._rowDropIndex = Vo(e.clientY, o);
+      this._rowDropIndex = qo(e.clientY, o);
     }
   }
   _onDragLeave(e) {
@@ -2887,7 +2916,7 @@ let P = class extends g {
   }
   _onDrop(e) {
     e.preventDefault();
-    const t = De();
+    const t = Ee();
     if (!t) {
       this._resetDragState();
       return;
@@ -3059,31 +3088,31 @@ P.styles = b`
       border-radius: var(--pigeon-radius, 6px);
     }
   `;
-H([
+F([
   p({ type: Object })
 ], P.prototype, "doc", 2);
-H([
+F([
   p({ type: Object })
 ], P.prototype, "selection", 2);
-H([
+F([
   p({ type: String, attribute: "editing-block-id" })
 ], P.prototype, "editingBlockId", 2);
-H([
+F([
   p({ type: Number, attribute: "preview-width" })
 ], P.prototype, "previewWidth", 2);
-H([
+F([
   p({ type: String })
 ], P.prototype, "device", 2);
-H([
+F([
   d()
 ], P.prototype, "_rowDropIndex", 2);
-H([
+F([
   d()
 ], P.prototype, "_isDragOver", 2);
-H([
+F([
   d()
 ], P.prototype, "_hoveredRowId", 2);
-P = H([
+P = F([
   u("pigeon-canvas")
 ], P);
 /**
@@ -3091,22 +3120,22 @@ P = H([
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Se = globalThis, Wt = (e) => e, Je = Se.trustedTypes, Vt = Je ? Je.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, io = "$lit$", U = `lit$${Math.random().toFixed(9).slice(2)}$`, ro = "?" + U, $i = `<${ro}>`, ne = document, Ze = () => ne.createComment(""), Me = (e) => e === null || typeof e != "object" && typeof e != "function", Dt = Array.isArray, wi = (e) => Dt(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", bt = `[ 	
-\f\r]`, Te = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Yt = /-->/g, qt = />/g, ie = RegExp(`>|${bt}(?:([^\\s"'>=/]+)(${bt}*=${bt}*(?:[^ 	
+const Se = globalThis, Wt = (e) => e, Je = Se.trustedTypes, qt = Je ? Je.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, io = "$lit$", q = `lit$${Math.random().toFixed(9).slice(2)}$`, ro = "?" + q, $i = `<${ro}>`, ne = document, Ze = () => ne.createComment(""), ze = (e) => e === null || typeof e != "object" && typeof e != "function", Et = Array.isArray, wi = (e) => Et(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", bt = `[ 	
+\f\r]`, Pe = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Vt = /-->/g, Yt = />/g, ie = RegExp(`>|${bt}(?:([^\\s"'>=/]+)(${bt}*=${bt}*(?:[^ 	
 \f\r"'\`<>=]|("|')|))|$)`, "g"), Xt = /'/g, Gt = /"/g, no = /^(?:script|style|textarea|title)$/i, He = Symbol.for("lit-noChange"), y = Symbol.for("lit-nothing"), Jt = /* @__PURE__ */ new WeakMap(), re = ne.createTreeWalker(ne, 129);
 function ao(e, t) {
-  if (!Dt(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return Vt !== void 0 ? Vt.createHTML(t) : t;
+  if (!Et(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return qt !== void 0 ? qt.createHTML(t) : t;
 }
 const ki = (e, t) => {
   const o = e.length - 1, r = [];
-  let i, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", a = Te;
+  let i, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", a = Pe;
   for (let h = 0; h < o; h++) {
     const c = e[h];
     let v, m, f = -1, R = 0;
-    for (; R < c.length && (a.lastIndex = R, m = a.exec(c), m !== null); ) R = a.lastIndex, a === Te ? m[1] === "!--" ? a = Yt : m[1] !== void 0 ? a = qt : m[2] !== void 0 ? (no.test(m[2]) && (i = RegExp("</" + m[2], "g")), a = ie) : m[3] !== void 0 && (a = ie) : a === ie ? m[0] === ">" ? (a = i ?? Te, f = -1) : m[1] === void 0 ? f = -2 : (f = a.lastIndex - m[2].length, v = m[1], a = m[3] === void 0 ? ie : m[3] === '"' ? Gt : Xt) : a === Gt || a === Xt ? a = ie : a === Yt || a === qt ? a = Te : (a = ie, i = void 0);
-    const N = a === ie && e[h + 1].startsWith("/>") ? " " : "";
-    n += a === Te ? c + $i : f >= 0 ? (r.push(v), c.slice(0, f) + io + c.slice(f) + U + N) : c + U + (f === -2 ? h : N);
+    for (; R < c.length && (a.lastIndex = R, m = a.exec(c), m !== null); ) R = a.lastIndex, a === Pe ? m[1] === "!--" ? a = Vt : m[1] !== void 0 ? a = Yt : m[2] !== void 0 ? (no.test(m[2]) && (i = RegExp("</" + m[2], "g")), a = ie) : m[3] !== void 0 && (a = ie) : a === ie ? m[0] === ">" ? (a = i ?? Pe, f = -1) : m[1] === void 0 ? f = -2 : (f = a.lastIndex - m[2].length, v = m[1], a = m[3] === void 0 ? ie : m[3] === '"' ? Gt : Xt) : a === Gt || a === Xt ? a = ie : a === Vt || a === Yt ? a = Pe : (a = ie, i = void 0);
+    const W = a === ie && e[h + 1].startsWith("/>") ? " " : "";
+    n += a === Pe ? c + $i : f >= 0 ? (r.push(v), c.slice(0, f) + io + c.slice(f) + q + W) : c + q + (f === -2 ? h : W);
   }
   return [ao(e, n + (e[o] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
 };
@@ -3123,21 +3152,21 @@ class Fe {
     for (; (i = re.nextNode()) !== null && c.length < h; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const f of i.getAttributeNames()) if (f.endsWith(io)) {
-          const R = m[a++], N = i.getAttribute(f).split(U), Ve = /([.?@])?(.*)/.exec(R);
-          c.push({ type: 1, index: n, name: Ve[2], strings: N, ctor: Ve[1] === "." ? Ii : Ve[1] === "?" ? Pi : Ve[1] === "@" ? Ti : nt }), i.removeAttribute(f);
-        } else f.startsWith(U) && (c.push({ type: 6, index: n }), i.removeAttribute(f));
+          const R = m[a++], W = i.getAttribute(f).split(q), qe = /([.?@])?(.*)/.exec(R);
+          c.push({ type: 1, index: n, name: qe[2], strings: W, ctor: qe[1] === "." ? Ii : qe[1] === "?" ? Ti : qe[1] === "@" ? Pi : nt }), i.removeAttribute(f);
+        } else f.startsWith(q) && (c.push({ type: 6, index: n }), i.removeAttribute(f));
         if (no.test(i.tagName)) {
-          const f = i.textContent.split(U), R = f.length - 1;
+          const f = i.textContent.split(q), R = f.length - 1;
           if (R > 0) {
             i.textContent = Je ? Je.emptyScript : "";
-            for (let N = 0; N < R; N++) i.append(f[N], Ze()), re.nextNode(), c.push({ type: 2, index: ++n });
+            for (let W = 0; W < R; W++) i.append(f[W], Ze()), re.nextNode(), c.push({ type: 2, index: ++n });
             i.append(f[R], Ze());
           }
         }
       } else if (i.nodeType === 8) if (i.data === ro) c.push({ type: 2, index: n });
       else {
         let f = -1;
-        for (; (f = i.data.indexOf(U, f + 1)) !== -1; ) c.push({ type: 7, index: n }), f += U.length - 1;
+        for (; (f = i.data.indexOf(q, f + 1)) !== -1; ) c.push({ type: 7, index: n }), f += q.length - 1;
       }
       n++;
     }
@@ -3151,7 +3180,7 @@ function ue(e, t, o = e, r) {
   var a, h;
   if (t === He) return t;
   let i = r !== void 0 ? (a = o._$Co) == null ? void 0 : a[r] : o._$Cl;
-  const n = Me(t) ? void 0 : t._$litDirective$;
+  const n = ze(t) ? void 0 : t._$litDirective$;
   return (i == null ? void 0 : i.constructor) !== n && ((h = i == null ? void 0 : i._$AO) == null || h.call(i, !1), n === void 0 ? i = void 0 : (i = new n(e), i._$AT(e, o, r)), r !== void 0 ? (o._$Co ?? (o._$Co = []))[r] = i : o._$Cl = i), i !== void 0 && (t = ue(e, i._$AS(e, t.values), i, r)), t;
 }
 class Ci {
@@ -3202,7 +3231,7 @@ class rt {
     return this._$AB;
   }
   _$AI(t, o = this) {
-    t = ue(this, t, o), Me(t) ? t === y || t == null || t === "" ? (this._$AH !== y && this._$AR(), this._$AH = y) : t !== this._$AH && t !== He && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : wi(t) ? this.k(t) : this._(t);
+    t = ue(this, t, o), ze(t) ? t === y || t == null || t === "" ? (this._$AH !== y && this._$AR(), this._$AH = y) : t !== this._$AH && t !== He && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : wi(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -3211,7 +3240,7 @@ class rt {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== y && Me(this._$AH) ? this._$AA.nextSibling.data = t : this.T(ne.createTextNode(t)), this._$AH = t;
+    this._$AH !== y && ze(this._$AH) ? this._$AA.nextSibling.data = t : this.T(ne.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     var n;
@@ -3227,7 +3256,7 @@ class rt {
     return o === void 0 && Jt.set(t.strings, o = new Fe(t)), o;
   }
   k(t) {
-    Dt(this._$AH) || (this._$AH = [], this._$AR());
+    Et(this._$AH) || (this._$AH = [], this._$AR());
     const o = this._$AH;
     let r, i = 0;
     for (const n of t) i === o.length ? o.push(r = new rt(this.O(Ze()), this.O(Ze()), this, this.options)) : r = o[i], r._$AI(n), i++;
@@ -3258,11 +3287,11 @@ class nt {
   _$AI(t, o = this, r, i) {
     const n = this.strings;
     let a = !1;
-    if (n === void 0) t = ue(this, t, o, 0), a = !Me(t) || t !== this._$AH && t !== He, a && (this._$AH = t);
+    if (n === void 0) t = ue(this, t, o, 0), a = !ze(t) || t !== this._$AH && t !== He, a && (this._$AH = t);
     else {
       const h = t;
       let c, v;
-      for (t = n[0], c = 0; c < n.length - 1; c++) v = ue(this, h[r + c], o, c), v === He && (v = this._$AH[c]), a || (a = !Me(v) || v !== this._$AH[c]), v === y ? t = y : t !== y && (t += (v ?? "") + n[c + 1]), this._$AH[c] = v;
+      for (t = n[0], c = 0; c < n.length - 1; c++) v = ue(this, h[r + c], o, c), v === He && (v = this._$AH[c]), a || (a = !ze(v) || v !== this._$AH[c]), v === y ? t = y : t !== y && (t += (v ?? "") + n[c + 1]), this._$AH[c] = v;
     }
     a && !i && this.j(t);
   }
@@ -3278,7 +3307,7 @@ class Ii extends nt {
     this.element[this.name] = t === y ? void 0 : t;
   }
 }
-class Pi extends nt {
+class Ti extends nt {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -3286,7 +3315,7 @@ class Pi extends nt {
     this.element.toggleAttribute(this.name, !!t && t !== y);
   }
 }
-class Ti extends nt {
+class Pi extends nt {
   constructor(t, o, r, i, n) {
     super(t, o, r, i, n), this.type = 5;
   }
@@ -3312,7 +3341,7 @@ class Si {
   }
 }
 const vt = Se.litHtmlPolyfillSupport;
-vt == null || vt(Fe, rt), (Se.litHtmlVersions ?? (Se.litHtmlVersions = [])).push("3.3.2");
+vt == null || vt(Fe, rt), (Se.litHtmlVersions ?? (Se.litHtmlVersions = [])).push("3.3.3");
 /**
  * @license
  * Copyright 2020 Google LLC
@@ -3324,7 +3353,7 @@ const Oi = (e) => e.strings === void 0;
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const Di = { CHILD: 2 }, Ei = (e) => (...t) => ({ _$litDirective$: e, values: t });
+const Ei = { CHILD: 2 }, Di = (e) => (...t) => ({ _$litDirective$: e, values: t });
 class Ai {
   constructor(t) {
   }
@@ -3363,7 +3392,7 @@ const Oe = (e, t) => {
     let o = t._$AN;
     if (o === void 0) t._$AN = o = /* @__PURE__ */ new Set();
     else if (o.has(e)) break;
-    o.add(e), Ri(t);
+    o.add(e), Mi(t);
   }
 };
 function Bi(e) {
@@ -3375,10 +3404,10 @@ function ji(e, t = !1, o = 0) {
   else r != null && (Oe(r, !1), Qe(r));
   else Oe(this, e);
 }
-const Ri = (e) => {
-  e.type == Di.CHILD && (e._$AP ?? (e._$AP = ji), e._$AQ ?? (e._$AQ = Bi));
+const Mi = (e) => {
+  e.type == Ei.CHILD && (e._$AP ?? (e._$AP = ji), e._$AQ ?? (e._$AQ = Bi));
 };
-class Li extends Ai {
+class Ri extends Ai {
   constructor() {
     super(...arguments), this._$AN = void 0;
   }
@@ -3406,20 +3435,20 @@ class Li extends Ai {
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const be = () => new zi();
-class zi {
+const be = () => new Li();
+class Li {
 }
-const ft = /* @__PURE__ */ new WeakMap(), ve = Ei(class extends Li {
+const ft = /* @__PURE__ */ new WeakMap(), ve = Di(class extends Ri {
   render(e) {
     return y;
   }
   update(e, [t]) {
     var r;
     const o = t !== this.G;
-    return o && this.G !== void 0 && this.rt(void 0), (o || this.lt !== this.ct) && (this.G = t, this.ht = (r = e.options) == null ? void 0 : r.host, this.rt(this.ct = e.element)), y;
+    return o && this.rt(void 0), (o || this.lt !== this.ct) && (this.G = t, this.ht = (r = e.options) == null ? void 0 : r.host, this.rt(this.ct = e.element)), y;
   }
   rt(e) {
-    if (this.isConnected || (e = void 0), typeof this.G == "function") {
+    if (this.G !== void 0) if (this.isConnected || (e = void 0), typeof this.G == "function") {
       const t = this.ht ?? globalThis;
       let o = ft.get(t);
       o === void 0 && (o = /* @__PURE__ */ new WeakMap(), ft.set(t, o)), o.get(this.G) !== void 0 && this.G.call(this.ht, void 0), o.set(this.G, e), e !== void 0 && this.G.call(this.ht, e);
@@ -3435,7 +3464,7 @@ const ft = /* @__PURE__ */ new WeakMap(), ve = Ei(class extends Li {
   reconnected() {
     this.rt(this.ct);
   }
-}), C = b`
+}), I = b`
   :host {
     display: block;
   }
@@ -3651,10 +3680,10 @@ const ft = /* @__PURE__ */ new WeakMap(), ve = Ei(class extends Li {
     box-shadow: var(--pigeon-ring-shadow);
   }
 `;
-var Mi = Object.defineProperty, Hi = Object.getOwnPropertyDescriptor, Et = (e, t, o, r) => {
+var zi = Object.defineProperty, Hi = Object.getOwnPropertyDescriptor, Dt = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Hi(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
-  return r && i && Mi(t, o, i), i;
+  return r && i && zi(t, o, i), i;
 };
 let Ne = class extends g {
   constructor() {
@@ -3777,13 +3806,13 @@ Ne.styles = b`
       height: 16px;
     }
   `;
-Et([
+Dt([
   p({ type: String })
 ], Ne.prototype, "label", 2);
-Et([
+Dt([
   p({ type: String })
 ], Ne.prototype, "value", 2);
-Ne = Et([
+Ne = Dt([
   u("pigeon-alignment-picker")
 ], Ne);
 var Fi = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, At = (e, t, o, r) => {
@@ -4116,19 +4145,19 @@ le([
 L = le([
   u("pigeon-slider-input")
 ], L);
-var Wi = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, we = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Vi(t, o) : t, n = e.length - 1, a; n >= 0; n--)
+var Wi = Object.defineProperty, qi = Object.getOwnPropertyDescriptor, we = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? qi(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && Wi(t, o, i), i;
 };
-let V = class extends g {
+let X = class extends g {
   constructor() {
     super(...arguments), this.tags = [], this.open = !1, this.x = 0, this.y = 0, this._search = "";
   }
   render() {
     const e = this._getFilteredTags(), t = this._groupByCategory(e);
     return l`
-      <div class="picker" style="position: absolute; left: ${this.x}px; top: ${this.y}px;">
+      <div class="picker" style="position: fixed; left: ${this.x}px; top: ${this.y}px;">
         <div class="search-box">
           <input
             type="text"
@@ -4177,7 +4206,7 @@ let V = class extends g {
     })), this.open = !1, this._search = "";
   }
 };
-V.styles = b`
+X.styles = b`
     :host {
       display: none;
     }
@@ -4270,30 +4299,30 @@ V.styles = b`
   `;
 we([
   p({ type: Array })
-], V.prototype, "tags", 2);
+], X.prototype, "tags", 2);
 we([
   p({ type: Boolean, reflect: !0 })
-], V.prototype, "open", 2);
+], X.prototype, "open", 2);
 we([
   p({ type: Number })
-], V.prototype, "x", 2);
+], X.prototype, "x", 2);
 we([
   p({ type: Number })
-], V.prototype, "y", 2);
+], X.prototype, "y", 2);
 we([
   d()
-], V.prototype, "_search", 2);
-V = we([
+], X.prototype, "_search", 2);
+X = we([
   u("pigeon-merge-tag-picker")
-], V);
-var Yi = Object.defineProperty, qi = Object.getOwnPropertyDescriptor, J = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? qi(t, o) : t, n = e.length - 1, a; n >= 0; n--)
+], X);
+var Vi = Object.defineProperty, Yi = Object.getOwnPropertyDescriptor, N = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Yi(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
-  return r && i && Yi(t, o, i), i;
+  return r && i && Vi(t, o, i), i;
 };
-let E = class extends g {
+let S = class extends g {
   constructor() {
-    super(...arguments), this.rowId = "", this.columnId = "", this.mergeTags = [], this._pickerOpen = !1, this._pickerX = 0, this._pickerY = 0, this._textareaRef = be(), this._triggerRef = be();
+    super(...arguments), this.rowId = "", this.columnId = "", this.mergeTags = [], this.requestMergeTags = !1, this._pickerOpen = !1, this._pickerX = 0, this._pickerY = 0, this._textareaRef = be(), this._triggerRef = be();
   }
   render() {
     if (!this.block) return l``;
@@ -4304,7 +4333,7 @@ let E = class extends g {
       <div class="field">
         <div class="label-row">
           <label>${s("panel.common.contentHtml")}</label>
-          ${t ? l`
+          ${t || this.requestMergeTags ? l`
             <button class="tag-btn" ${ve(this._triggerRef)} @click=${this._togglePicker} title=${s("panel.common.insertMergeTag")}>
               ${s("panel.common.tagBtn")}
             </button>
@@ -4354,6 +4383,10 @@ let E = class extends g {
     `;
   }
   _togglePicker() {
+    if (!this.mergeTags.length) {
+      this.dispatchEvent(new CustomEvent("pigeon:merge-tag-request", { bubbles: !0, composed: !0 }));
+      return;
+    }
     const e = this._triggerRef.value;
     if (e) {
       if (!this._pickerOpen) {
@@ -4409,8 +4442,8 @@ let E = class extends g {
     this._emit({ padding: e.detail.value });
   }
 };
-E.styles = [
-  C,
+S.styles = [
+  I,
   b`
       /* Content textarea uses the monospace face so the HTML payload is
          readable to authors editing the raw markup. */
@@ -4454,30 +4487,33 @@ E.styles = [
       }
     `
 ];
-J([
+N([
   p({ type: Object })
-], E.prototype, "block", 2);
-J([
+], S.prototype, "block", 2);
+N([
   p({ type: String })
-], E.prototype, "rowId", 2);
-J([
+], S.prototype, "rowId", 2);
+N([
   p({ type: String })
-], E.prototype, "columnId", 2);
-J([
+], S.prototype, "columnId", 2);
+N([
   p({ type: Array })
-], E.prototype, "mergeTags", 2);
-J([
+], S.prototype, "mergeTags", 2);
+N([
+  p({ attribute: !1 })
+], S.prototype, "requestMergeTags", 2);
+N([
   d()
-], E.prototype, "_pickerOpen", 2);
-J([
+], S.prototype, "_pickerOpen", 2);
+N([
   d()
-], E.prototype, "_pickerX", 2);
-J([
+], S.prototype, "_pickerX", 2);
+N([
   d()
-], E.prototype, "_pickerY", 2);
-E = J([
+], S.prototype, "_pickerY", 2);
+S = N([
   u("pigeon-text-panel")
-], E);
+], S);
 var Xi = Object.defineProperty, Gi = Object.getOwnPropertyDescriptor, w = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Gi(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
@@ -4487,10 +4523,10 @@ let mt = null;
 function Ji() {
   return mt || (mt = import("./pigeon-stock-tab.js")), mt;
 }
-const Zi = 250, qe = "__all__";
+const Zi = 250, Ye = "__all__";
 let x = class extends g {
   constructor() {
-    super(...arguments), this.config = {}, this.open = !1, this._tab = null, this._stockTabLoaded = !1, this._dragOver = !1, this._uploading = !1, this._progress = 0, this._error = "", this._urlInput = "", this._folder = qe, this._search = "", this._selectedTags = [], this._folders = [], this._assets = [], this._libraryLoading = !1, this._libraryError = "", this._searchTimer = null, this._libraryToken = 0, this._handleStockTabClick = async () => {
+    super(...arguments), this.config = {}, this.open = !1, this._tab = null, this._stockTabLoaded = !1, this._dragOver = !1, this._uploading = !1, this._progress = 0, this._error = "", this._urlInput = "", this._folder = Ye, this._search = "", this._selectedTags = [], this._folders = [], this._assets = [], this._libraryLoading = !1, this._libraryError = "", this._searchTimer = null, this._libraryToken = 0, this._handleStockTabClick = async () => {
       this._tab = "stock", this._stockTabLoaded || (await Ji(), this._stockTabLoaded = !0);
     };
   }
@@ -4569,7 +4605,7 @@ let x = class extends g {
           .value=${this._folder}
           @change=${this._onFolderChange}
         >
-          <option value=${qe}>${s("asset.folder.all")}</option>
+          <option value=${Ye}>${s("asset.folder.all")}</option>
           ${this._folders.map(
       (e) => l`<option value=${e} ?selected=${this._folder === e}>${e}</option>`
     )}
@@ -4593,7 +4629,7 @@ let x = class extends g {
           </div>` : te}
       ${this._libraryError ? l`<div class="error">${this._libraryError}</div>` : te}
       ${this._libraryLoading ? l`<div class="library-spinner">${s("asset.loading")}</div>` : this._assets.length === 0 ? l`<div class="empty-library">
-              ${this._search || this._selectedTags.length > 0 || this._folder !== qe ? s("asset.empty.filtered") : s("asset.empty.no-assets")}
+              ${this._search || this._selectedTags.length > 0 || this._folder !== Ye ? s("asset.empty.filtered") : s("asset.empty.no-assets")}
             </div>` : l`<div class="asset-grid">
               ${this._assets.map((e) => this._renderAssetCard(e))}
             </div>`}
@@ -4671,7 +4707,7 @@ let x = class extends g {
     this._libraryLoading = !0, this._libraryError = "";
     try {
       const t = await this.storage.list({
-        folder: this._folder === qe ? void 0 : this._folder,
+        folder: this._folder === Ye ? void 0 : this._folder,
         search: this._search.trim() || void 0,
         tags: this._selectedTags.length > 0 ? this._selectedTags : void 0
       });
@@ -5340,7 +5376,7 @@ let z = class extends g {
   }
 };
 z.styles = [
-  C,
+  I,
   b`
     .upload-btn {
       margin-top: 6px;
@@ -5530,7 +5566,7 @@ var ir = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, ke = (e, t
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && ir(t, o, i), i;
 };
-let Y = class extends g {
+let G = class extends g {
   constructor() {
     super(...arguments), this.rowId = "", this.columnId = "", this.swatches = [], this.linkTypes = [];
   }
@@ -5692,25 +5728,25 @@ let Y = class extends g {
     this._emit({ innerPadding: e.detail.value });
   }
 };
-Y.styles = C;
+G.styles = I;
 ke([
   p({ type: Object })
-], Y.prototype, "block", 2);
+], G.prototype, "block", 2);
 ke([
   p({ type: String })
-], Y.prototype, "rowId", 2);
+], G.prototype, "rowId", 2);
 ke([
   p({ type: String })
-], Y.prototype, "columnId", 2);
+], G.prototype, "columnId", 2);
 ke([
   p({ attribute: !1 })
-], Y.prototype, "swatches", 2);
+], G.prototype, "swatches", 2);
 ke([
   p({ attribute: !1 })
-], Y.prototype, "linkTypes", 2);
-Y = ke([
+], G.prototype, "linkTypes", 2);
+G = ke([
   u("pigeon-button-panel")
-], Y);
+], G);
 var nr = Object.defineProperty, ar = Object.getOwnPropertyDescriptor, lo = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? ar(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
@@ -5836,7 +5872,7 @@ let et = class extends g {
   }
 };
 et.styles = [
-  C,
+  I,
   b`
       .hint {
         margin: 4px 0 0;
@@ -5992,14 +6028,14 @@ st([
 me = st([
   u("pigeon-font-picker")
 ], me);
-var pr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, Z = (e, t, o, r) => {
+var pr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, U = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? cr(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && pr(t, o, i), i;
 };
-let A = class extends g {
+let O = class extends g {
   constructor() {
-    super(...arguments), this.mergeTags = [], this.swatches = [], this.brandFonts = [], this._pickerOpen = !1, this._pickerX = 0, this._pickerY = 0, this._previewInputRef = be(), this._triggerRef = be();
+    super(...arguments), this.mergeTags = [], this.requestMergeTags = !1, this.swatches = [], this.brandFonts = [], this._pickerOpen = !1, this._pickerX = 0, this._pickerY = 0, this._previewInputRef = be(), this._triggerRef = be();
   }
   render() {
     if (!this.doc) return l``;
@@ -6056,7 +6092,7 @@ let A = class extends g {
       <div class="field">
         <div class="label-row">
           <label>${s("panel.body.previewText")}</label>
-          ${this.mergeTags.length > 0 ? l`
+          ${this.mergeTags.length > 0 || this.requestMergeTags ? l`
             <button class="tag-btn" ${ve(this._triggerRef)} @click=${this._togglePicker} title=${s("panel.common.insertMergeTag")}>
               ${s("panel.common.tagBtn")}
             </button>
@@ -6083,6 +6119,10 @@ let A = class extends g {
     `;
   }
   _togglePicker() {
+    if (!this.mergeTags.length) {
+      this.dispatchEvent(new CustomEvent("pigeon:merge-tag-request", { bubbles: !0, composed: !0 }));
+      return;
+    }
     const e = this._triggerRef.value;
     if (e) {
       if (!this._pickerOpen) {
@@ -6126,8 +6166,8 @@ let A = class extends g {
     this._emit({ metaField: "previewText", value: e.target.value });
   }
 };
-A.styles = [
-  C,
+O.styles = [
+  I,
   b`
       .alignment-buttons {
         display: flex;
@@ -6200,36 +6240,39 @@ A.styles = [
       }
     `
 ];
-Z([
+U([
   p({ type: Object })
-], A.prototype, "doc", 2);
-Z([
+], O.prototype, "doc", 2);
+U([
   p({ type: Array })
-], A.prototype, "mergeTags", 2);
-Z([
+], O.prototype, "mergeTags", 2);
+U([
   p({ attribute: !1 })
-], A.prototype, "swatches", 2);
-Z([
+], O.prototype, "requestMergeTags", 2);
+U([
   p({ attribute: !1 })
-], A.prototype, "brandFonts", 2);
-Z([
+], O.prototype, "swatches", 2);
+U([
+  p({ attribute: !1 })
+], O.prototype, "brandFonts", 2);
+U([
   d()
-], A.prototype, "_pickerOpen", 2);
-Z([
+], O.prototype, "_pickerOpen", 2);
+U([
   d()
-], A.prototype, "_pickerX", 2);
-Z([
+], O.prototype, "_pickerX", 2);
+U([
   d()
-], A.prototype, "_pickerY", 2);
-A = Z([
+], O.prototype, "_pickerY", 2);
+O = U([
   u("pigeon-body-panel")
-], A);
-var dr = Object.defineProperty, hr = Object.getOwnPropertyDescriptor, Q = (e, t, o, r) => {
+], O);
+var dr = Object.defineProperty, hr = Object.getOwnPropertyDescriptor, ee = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? hr(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && dr(t, o, i), i;
 };
-let B = class extends g {
+let j = class extends g {
   constructor() {
     super(...arguments), this.rowId = "", this.columnId = "", this.swatches = [], this._assetManagerOpen = !1;
   }
@@ -6382,31 +6425,31 @@ let B = class extends g {
     this._emit({ backgroundUrl: e.detail.url }), this._assetManagerOpen = !1;
   }
 };
-B.styles = [C];
-Q([
+j.styles = [I];
+ee([
   p({ type: Object })
-], B.prototype, "block", 2);
-Q([
+], j.prototype, "block", 2);
+ee([
   p({ type: String })
-], B.prototype, "rowId", 2);
-Q([
+], j.prototype, "rowId", 2);
+ee([
   p({ type: String })
-], B.prototype, "columnId", 2);
-Q([
+], j.prototype, "columnId", 2);
+ee([
   p({ type: Object })
-], B.prototype, "assetManagerConfig", 2);
-Q([
+], j.prototype, "assetManagerConfig", 2);
+ee([
   p({ attribute: !1 })
-], B.prototype, "assetStorage", 2);
-Q([
+], j.prototype, "assetStorage", 2);
+ee([
   p({ attribute: !1 })
-], B.prototype, "swatches", 2);
-Q([
+], j.prototype, "swatches", 2);
+ee([
   d()
-], B.prototype, "_assetManagerOpen", 2);
-B = Q([
+], j.prototype, "_assetManagerOpen", 2);
+j = ee([
   u("pigeon-hero-panel")
-], B);
+], j);
 var gr = Object.defineProperty, ur = Object.getOwnPropertyDescriptor, Ke = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? ur(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
@@ -6550,7 +6593,7 @@ let ae = class extends g {
   }
 };
 ae.styles = [
-  C,
+  I,
   b`
       h4 {
         margin: 0 0 8px;
@@ -6710,7 +6753,7 @@ let se = class extends g {
     this._emit({ padding: e.detail.value });
   }
 };
-se.styles = C;
+se.styles = I;
 We([
   p({ type: Object })
 ], se.prototype, "block", 2);
@@ -6768,7 +6811,7 @@ let _e = class extends g {
     this._emit({ height: e.detail.value });
   }
 };
-_e.styles = C;
+_e.styles = I;
 lt([
   p({ type: Object })
 ], _e.prototype, "block", 2);
@@ -6940,7 +6983,7 @@ let ye = class extends g {
   }
 };
 ye.styles = [
-  C,
+  I,
   b`
       h4 {
         margin: 0 0 8px;
@@ -7011,14 +7054,14 @@ pt([
 ye = pt([
   u("pigeon-social-panel")
 ], ye);
-var $r = Object.defineProperty, wr = Object.getOwnPropertyDescriptor, ee = (e, t, o, r) => {
+var $r = Object.defineProperty, wr = Object.getOwnPropertyDescriptor, K = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? wr(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && $r(t, o, i), i;
 };
-let j = class extends g {
+let E = class extends g {
   constructor() {
-    super(...arguments), this.rowId = "", this.columnId = "", this.mergeTags = [], this._pickerOpen = !1, this._pickerX = 0, this._pickerY = 0, this._textareaRef = be(), this._triggerRef = be();
+    super(...arguments), this.rowId = "", this.columnId = "", this.mergeTags = [], this.requestMergeTags = !1, this._pickerOpen = !1, this._pickerX = 0, this._pickerY = 0, this._textareaRef = be(), this._triggerRef = be();
   }
   render() {
     if (!this.block) return l``;
@@ -7029,7 +7072,7 @@ let j = class extends g {
       <div class="field">
         <div class="label-row">
           <label>${s("panel.html.rawHtml")}</label>
-          ${t ? l`
+          ${t || this.requestMergeTags ? l`
             <button class="tag-btn" ${ve(this._triggerRef)} @click=${this._togglePicker} title=${s("panel.common.insertMergeTag")}>
               ${s("panel.common.tagBtn")}
             </button>
@@ -7078,6 +7121,10 @@ let j = class extends g {
     this._emit({ padding: e.detail.value });
   }
   _togglePicker() {
+    if (!this.mergeTags.length) {
+      this.dispatchEvent(new CustomEvent("pigeon:merge-tag-request", { bubbles: !0, composed: !0 }));
+      return;
+    }
     const e = this._triggerRef.value;
     if (e) {
       if (!this._pickerOpen) {
@@ -7096,8 +7143,8 @@ let j = class extends g {
     t.setSelectionRange(h, h), t.focus(), this._emit({ content: a }), this._pickerOpen = !1;
   }
 };
-j.styles = [
-  C,
+E.styles = [
+  I,
   b`
       /* HTML payload is raw markup — show in monospace and taller than the
          default textarea so authors have room to work. */
@@ -7141,36 +7188,39 @@ j.styles = [
       }
     `
 ];
-ee([
+K([
   p({ type: Object })
-], j.prototype, "block", 2);
-ee([
+], E.prototype, "block", 2);
+K([
   p({ type: String })
-], j.prototype, "rowId", 2);
-ee([
+], E.prototype, "rowId", 2);
+K([
   p({ type: String })
-], j.prototype, "columnId", 2);
-ee([
+], E.prototype, "columnId", 2);
+K([
   p({ type: Array })
-], j.prototype, "mergeTags", 2);
-ee([
+], E.prototype, "mergeTags", 2);
+K([
+  p({ attribute: !1 })
+], E.prototype, "requestMergeTags", 2);
+K([
   d()
-], j.prototype, "_pickerOpen", 2);
-ee([
+], E.prototype, "_pickerOpen", 2);
+K([
   d()
-], j.prototype, "_pickerX", 2);
-ee([
+], E.prototype, "_pickerX", 2);
+K([
   d()
-], j.prototype, "_pickerY", 2);
-j = ee([
+], E.prototype, "_pickerY", 2);
+E = K([
   u("pigeon-html-panel")
-], j);
+], E);
 var kr = Object.defineProperty, Cr = Object.getOwnPropertyDescriptor, Ce = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Cr(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && kr(t, o, i), i;
 };
-let q = class extends g {
+let J = class extends g {
   constructor() {
     super(...arguments), this.rowId = "", this.columnId = "", this.label = "Block", this.schema = [];
   }
@@ -7280,33 +7330,33 @@ let q = class extends g {
     );
   }
 };
-q.styles = C;
+J.styles = I;
 Ce([
   p({ type: Object })
-], q.prototype, "block", 2);
+], J.prototype, "block", 2);
 Ce([
   p({ type: String })
-], q.prototype, "rowId", 2);
+], J.prototype, "rowId", 2);
 Ce([
   p({ type: String })
-], q.prototype, "columnId", 2);
+], J.prototype, "columnId", 2);
 Ce([
   p({ type: String })
-], q.prototype, "label", 2);
+], J.prototype, "label", 2);
 Ce([
   p({ type: Array })
-], q.prototype, "schema", 2);
-q = Ce([
+], J.prototype, "schema", 2);
+J = Ce([
   u("pigeon-custom-panel")
-], q);
-var Ir = Object.defineProperty, Pr = Object.getOwnPropertyDescriptor, F = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Pr(t, o) : t, n = e.length - 1, a; n >= 0; n--)
+], J);
+var Ir = Object.defineProperty, Tr = Object.getOwnPropertyDescriptor, M = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Tr(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && Ir(t, o, i), i;
 };
-let T = class extends g {
+let C = class extends g {
   constructor() {
-    super(...arguments), this.selection = null, this.mergeTags = [], this.brandKit = null, this.fontConfig = [], this.linkTypes = [];
+    super(...arguments), this.selection = null, this.mergeTags = [], this.requestMergeTags = !1, this.brandKit = null, this.fontConfig = [], this.linkTypes = [];
   }
   get _swatches() {
     var e;
@@ -7325,6 +7375,7 @@ let T = class extends g {
           <pigeon-body-panel
             .doc=${this.doc}
             .mergeTags=${this.mergeTags}
+            .requestMergeTags=${this.requestMergeTags}
             .swatches=${this._swatches}
             .brandFonts=${this._brandFonts}
           ></pigeon-body-panel>
@@ -7415,7 +7466,7 @@ let T = class extends g {
   _renderBlockPanel(e, t, o) {
     switch (e.type) {
       case "text":
-        return l`<pigeon-text-panel .block=${e} .rowId=${t} .columnId=${o} .mergeTags=${this.mergeTags}></pigeon-text-panel>`;
+        return l`<pigeon-text-panel .block=${e} .rowId=${t} .columnId=${o} .mergeTags=${this.mergeTags} .requestMergeTags=${this.requestMergeTags}></pigeon-text-panel>`;
       case "image":
         return l`<pigeon-image-panel
           .block=${e}
@@ -7444,7 +7495,7 @@ let T = class extends g {
       case "social":
         return l`<pigeon-social-panel .block=${e} .rowId=${t} .columnId=${o}></pigeon-social-panel>`;
       case "html":
-        return l`<pigeon-html-panel .block=${e} .rowId=${t} .columnId=${o} .mergeTags=${this.mergeTags}></pigeon-html-panel>`;
+        return l`<pigeon-html-panel .block=${e} .rowId=${t} .columnId=${o} .mergeTags=${this.mergeTags} .requestMergeTags=${this.requestMergeTags}></pigeon-html-panel>`;
       default: {
         const r = e.type ?? "unknown", i = yt(r);
         return i != null && i.propertySchema && i.propertySchema.length > 0 ? l`<pigeon-custom-panel
@@ -7475,7 +7526,7 @@ let T = class extends g {
       return i.blocks.find((n) => n.id === o);
   }
 };
-T.styles = b`
+C.styles = b`
     :host {
       display: block;
       width: var(--pigeon-properties-width, 300px);
@@ -7558,37 +7609,40 @@ T.styles = b`
       line-height: 1.5;
     }
   `;
-F([
+M([
   p({ type: Object })
-], T.prototype, "doc", 2);
-F([
+], C.prototype, "doc", 2);
+M([
   p({ type: Object })
-], T.prototype, "selection", 2);
-F([
+], C.prototype, "selection", 2);
+M([
   p({ type: Array })
-], T.prototype, "mergeTags", 2);
-F([
+], C.prototype, "mergeTags", 2);
+M([
   p({ attribute: !1 })
-], T.prototype, "assetManagerConfig", 2);
-F([
+], C.prototype, "requestMergeTags", 2);
+M([
   p({ attribute: !1 })
-], T.prototype, "assetStorage", 2);
-F([
+], C.prototype, "assetManagerConfig", 2);
+M([
   p({ attribute: !1 })
-], T.prototype, "brandKit", 2);
-F([
+], C.prototype, "assetStorage", 2);
+M([
   p({ attribute: !1 })
-], T.prototype, "fontConfig", 2);
-F([
+], C.prototype, "brandKit", 2);
+M([
   p({ attribute: !1 })
-], T.prototype, "linkTypes", 2);
-T = F([
+], C.prototype, "fontConfig", 2);
+M([
+  p({ attribute: !1 })
+], C.prototype, "linkTypes", 2);
+C = M([
   u("pigeon-properties")
-], T);
-var Tr = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, S = (e, t, o, r) => {
+], C);
+var Pr = Object.defineProperty, Sr = Object.getOwnPropertyDescriptor, D = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Sr(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
-  return r && i && Tr(t, o, i), i;
+  return r && i && Pr(t, o, i), i;
 };
 let k = class extends g {
   constructor() {
@@ -7677,6 +7731,7 @@ let k = class extends g {
         return l`
           <iframe
             style="width: ${this._device === "mobile" ? "375px" : "100%"}; height: 100%;"
+            sandbox="allow-popups allow-popups-to-escape-sandbox"
             srcdoc=${this._htmlContent}
           ></iframe>
         `;
@@ -7884,46 +7939,46 @@ k.styles = b`
       font-size: 14px;
     }
   `;
-S([
+D([
   p({ type: Object })
 ], k.prototype, "renderer", 2);
-S([
+D([
   p({ type: Object })
 ], k.prototype, "doc", 2);
-S([
+D([
   p({ attribute: !1 })
 ], k.prototype, "documentToMjml", 2);
-S([
+D([
   p({ attribute: !1 })
 ], k.prototype, "fonts", 2);
-S([
+D([
   p({ type: Boolean, reflect: !0 })
 ], k.prototype, "open", 2);
-S([
+D([
   d()
 ], k.prototype, "_viewMode", 2);
-S([
+D([
   d()
 ], k.prototype, "_device", 2);
-S([
+D([
   d()
 ], k.prototype, "_htmlContent", 2);
-S([
+D([
   d()
 ], k.prototype, "_mjmlContent", 2);
-S([
+D([
   d()
 ], k.prototype, "_loading", 2);
-k = S([
+k = D([
   u("pigeon-preview")
 ], k);
-var Or = Object.defineProperty, Dr = Object.getOwnPropertyDescriptor, $ = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Dr(t, o) : t, n = e.length - 1, a; n >= 0; n--)
+var Or = Object.defineProperty, Er = Object.getOwnPropertyDescriptor, $ = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Er(t, o) : t, n = e.length - 1, a; n >= 0; n--)
     (a = e[n]) && (i = (r ? a(t, o, i) : a(i)) || i);
   return r && i && Or(t, o, i), i;
 };
 let _t = null;
-function Er() {
+function Dr() {
   return _t || (_t = import("./templates.js").then((e) => e.p)), _t;
 }
 function Qt(e) {
@@ -7959,7 +8014,7 @@ let _ = class extends g {
       e.stopPropagation(), this._applyBodyAttribute("fontFamily", e.detail.family);
     }, this._handleBrandLogoInsert = (e) => {
       e.stopPropagation();
-      const { logo: t } = e.detail, o = Ye("image");
+      const { logo: t } = e.detail, o = Ve("image");
       o.values.src = t.src, o.values.alt = t.name, t.width && (o.values.width = t.width);
       const r = this._state.selection;
       if (r != null && r.rowId && (r != null && r.columnId)) {
@@ -7972,7 +8027,7 @@ let _ = class extends g {
         ce(n.id, a.id, o, a.blocks.length)(this._state, this._dispatch);
       } else {
         const n = Ie([o]);
-        oe(Pe([n]), 0)(this._state, this._dispatch);
+        oe(Te([n]), 0)(this._state, this._dispatch);
       }
     }, this._dispatch = (e) => {
       this._state = this._state.apply(e), this._syncHistoryFlags(), this.requestUpdate(), this._fireChange(), this._fireSelect();
@@ -8007,7 +8062,7 @@ let _ = class extends g {
         this._emitRowLibraryError(t, "delete");
       }
     }, this._handleKeyDown = (e) => {
-      if (!this._state || this._isInTextInput(e) || this._editingBlockId !== null) return;
+      if (!this._state || !this._isForEditor(e) || this._isInTextInput(e) || this._editingBlockId !== null) return;
       const t = e.metaKey || e.ctrlKey, o = this._state.selection;
       if (t && !e.shiftKey && e.key.toLowerCase() === "z") {
         e.preventDefault(), this.undo();
@@ -8019,16 +8074,16 @@ let _ = class extends g {
       }
       if (e.key === "Escape") {
         const r = this._state.createTransaction();
-        r.setSelection(Rt()), this._dispatch(r);
+        r.setSelection(Mt()), this._dispatch(r);
         return;
       }
       if (o) {
         if (e.key === "Delete" || e.key === "Backspace") {
-          o.type === "block" && o.rowId && o.columnId && o.blockId ? (e.preventDefault(), ho(o.rowId, o.columnId, o.blockId)(this._state, this._dispatch)) : o.type === "row" && o.rowId && (e.preventDefault(), Lt(o.rowId)(this._state, this._dispatch));
+          o.type === "block" && o.rowId && o.columnId && o.blockId ? (e.preventDefault(), ho(o.rowId, o.columnId, o.blockId)(this._state, this._dispatch)) : o.type === "row" && o.rowId && (e.preventDefault(), Rt(o.rowId)(this._state, this._dispatch));
           return;
         }
         if (t && e.key.toLowerCase() === "d") {
-          o.type === "block" && o.rowId && o.columnId && o.blockId ? (e.preventDefault(), go(o.rowId, o.columnId, o.blockId)(this._state, this._dispatch)) : o.type === "row" && o.rowId && (e.preventDefault(), zt(o.rowId)(this._state, this._dispatch));
+          o.type === "block" && o.rowId && o.columnId && o.blockId ? (e.preventDefault(), go(o.rowId, o.columnId, o.blockId)(this._state, this._dispatch)) : o.type === "row" && o.rowId && (e.preventDefault(), Lt(o.rowId)(this._state, this._dispatch));
           return;
         }
         if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -8048,13 +8103,13 @@ let _ = class extends g {
           if (o.type === "block" && o.rowId && o.columnId && o.blockId) {
             e.preventDefault();
             const r = structuredClone(this._clipboard);
-            r.id = Mt();
+            r.id = zt();
             const i = this._findBlockIndex(o.rowId, o.columnId, o.blockId), n = i >= 0 ? i + 1 : void 0;
             ce(o.rowId, o.columnId, r, n)(this._state, this._dispatch);
           } else if (o.type === "column" && o.rowId && o.columnId) {
             e.preventDefault();
             const r = structuredClone(this._clipboard);
-            r.id = Mt(), ce(o.rowId, o.columnId, r)(this._state, this._dispatch);
+            r.id = zt(), ce(o.rowId, o.columnId, r)(this._state, this._dispatch);
           }
           return;
         }
@@ -8065,7 +8120,7 @@ let _ = class extends g {
   /*  Lifecycle                                                          */
   /* ------------------------------------------------------------------ */
   connectedCallback() {
-    super.connectedCallback(), Bt(this.config.locale, this.config.messages), this._initState(), this._applyDir(), this._resolveBrandKit(), this._applyTheme(), document.addEventListener("keydown", this._handleKeyDown), this.addEventListener("brand-kit-edit", this._handleBrandKitEdit), this.addEventListener("brand-color-apply", this._handleBrandColorApply), this.addEventListener("brand-font-apply", this._handleBrandFontApply), this.addEventListener("brand-logo-insert", this._handleBrandLogoInsert);
+    super.connectedCallback(), Bt(this.config.locale, this.config.messages), this._state || this._initState(), this._applyDir(), this._resolveBrandKit(), this._applyTheme(), document.addEventListener("keydown", this._handleKeyDown), this.addEventListener("brand-kit-edit", this._handleBrandKitEdit), this.addEventListener("brand-color-apply", this._handleBrandColorApply), this.addEventListener("brand-font-apply", this._handleBrandFontApply), this.addEventListener("brand-logo-insert", this._handleBrandLogoInsert);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeyDown), this.removeEventListener("brand-kit-edit", this._handleBrandKitEdit), this.removeEventListener("brand-color-apply", this._handleBrandColorApply), this.removeEventListener("brand-font-apply", this._handleBrandFontApply), this.removeEventListener("brand-logo-insert", this._handleBrandLogoInsert);
@@ -8140,7 +8195,7 @@ let _ = class extends g {
   /*  Render                                                             */
   /* ------------------------------------------------------------------ */
   render() {
-    var r;
+    var r, i;
     if (!this._state) return l``;
     const e = this._state.doc, t = this._state.selection, o = this._device === "mobile" ? 375 : this._device === "tablet" ? 768 : 0;
     return l`
@@ -8156,6 +8211,7 @@ let _ = class extends g {
         @toolbar-device=${this._handleDevice}
         @toolbar-fullscreen=${this._handleFullscreen}
         @toolbar-templates=${this._handleTemplatesOpen}
+        @toolbar-export=${this._handleExport}
         @pigeon:preview=${this._handlePreview}
         @pigeon:export-html=${this._handleExportHtml}
         @pigeon:export-mjml=${this._handleExportMjml}
@@ -8212,6 +8268,7 @@ let _ = class extends g {
           .doc=${e}
           .selection=${t}
           .mergeTags=${((r = this.config.mergeTags) == null ? void 0 : r.tags) ?? []}
+          .requestMergeTags=${!!this.config.mergeTags && !((i = this.config.mergeTags.tags) != null && i.length)}
           .assetManagerConfig=${this.config.assetManager ?? {}}
           .assetStorage=${this.assetStorage ?? this.config.assetStorage}
           .brandKit=${this._activeBrandKit}
@@ -8232,9 +8289,9 @@ let _ = class extends g {
         .renderer=${this.renderer}
         .documentToMjml=${this.documentToMjml}
         .fonts=${this._renderFonts()}
-        @click=${(i) => {
-      var n;
-      (n = i.target.classList) != null && n.contains("overlay") && (this._previewOpen = !1);
+        @click=${(n) => {
+      var a;
+      (a = n.target.classList) != null && a.contains("overlay") && (this._previewOpen = !1);
     }}
       ></pigeon-preview>
 
@@ -8312,7 +8369,7 @@ let _ = class extends g {
     o.addStep(n), this._dispatch(o);
   }
   async _handleTemplatesOpen() {
-    this._templatePickerLoaded || (await Er(), this._templatePickerLoaded = !0), this._templatePickerOpen = !0;
+    this._templatePickerLoaded || (await Dr(), this._templatePickerLoaded = !0), this._templatePickerOpen = !0;
   }
   _handleTemplateLoad(e) {
     var o;
@@ -8386,23 +8443,32 @@ let _ = class extends g {
       composed: !0
     }));
   }
-  _handleExportHtml() {
+  _handleExport() {
+    this.dispatchEvent(new CustomEvent("pigeon:export", {
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+  async _handleExportHtml(e) {
+    e.stopPropagation();
+    const t = this._state.doc, o = await this.exportHtml();
     this.dispatchEvent(new CustomEvent("pigeon:export-html", {
-      detail: { document: this._state.doc },
+      detail: { document: t, html: o },
       bubbles: !0,
       composed: !0
     }));
   }
-  _handleExportMjml() {
-    const e = this.documentToMjml ? this.documentToMjml(this._state.doc, { fonts: this._renderFonts() }) : null;
+  _handleExportMjml(e) {
+    e.stopPropagation();
+    const t = this.documentToMjml ? this.documentToMjml(this._state.doc, { fonts: this._renderFonts() }) : null;
     this.dispatchEvent(new CustomEvent("pigeon:export-mjml", {
-      detail: { document: this._state.doc, mjml: e },
+      detail: { document: this._state.doc, mjml: t },
       bubbles: !0,
       composed: !0
     }));
   }
-  _handleExportJson() {
-    this.dispatchEvent(new CustomEvent("pigeon:export-json", {
+  _handleExportJson(e) {
+    e.stopPropagation(), this.dispatchEvent(new CustomEvent("pigeon:export-json", {
       detail: { document: this._state.doc },
       bubbles: !0,
       composed: !0
@@ -8459,7 +8525,7 @@ let _ = class extends g {
   _handleBodySelect() {
     this._editingBlockId = null;
     const e = this._state.createTransaction();
-    e.setSelection(Rt()), this._dispatch(e);
+    e.setSelection(Mt()), this._dispatch(e);
   }
   /* ------------------------------------------------------------------ */
   /*  Row action handlers                                                */
@@ -8468,10 +8534,10 @@ let _ = class extends g {
     wo(e.detail.rowId, e.detail.toIndex)(this._state, this._dispatch);
   }
   _handleRowDuplicate(e) {
-    zt(e.detail.rowId)(this._state, this._dispatch);
+    Lt(e.detail.rowId)(this._state, this._dispatch);
   }
   _handleRowDelete(e) {
-    Lt(e.detail.rowId)(this._state, this._dispatch);
+    Rt(e.detail.rowId)(this._state, this._dispatch);
   }
   async _refreshSavedTab() {
     var o;
@@ -8502,6 +8568,11 @@ let _ = class extends g {
     }
     return !1;
   }
+  /** True when the key press is aimed at the editor, or at nothing else on the page. */
+  _isForEditor(e) {
+    const t = e.composedPath()[0];
+    return t === document || t === document.body || t === document.documentElement ? !0 : e.composedPath().includes(this);
+  }
   _flattenBlockLocations() {
     const e = [];
     for (const t of this._state.doc.body.rows)
@@ -8547,13 +8618,13 @@ let _ = class extends g {
   /*  DnD handlers                                                       */
   /* ------------------------------------------------------------------ */
   _handleRowDrop(e) {
-    const { index: t, columnCount: o } = e.detail, r = Array.from({ length: o }, () => Ie()), i = Pe(r);
+    const { index: t, columnCount: o } = e.detail, r = Array.from({ length: o }, () => Ie()), i = Te(r);
     oe(i, t)(this._state, this._dispatch);
   }
   _handleBlockDrop(e) {
     const { rowId: t, columnId: o, index: r, dragData: i } = e.detail;
     if (i.type === "palette-block" && i.blockType) {
-      const n = Ye(i.blockType);
+      const n = Ve(i.blockType);
       ce(t, o, n, r)(this._state, this._dispatch);
     } else i.type === "existing-block" && i.blockId && i.rowId && i.columnId && ko(
       i.rowId,
@@ -8565,7 +8636,7 @@ let _ = class extends g {
     )(this._state, this._dispatch);
   }
   _handleBlockDropNewRow(e) {
-    const { blockType: t, rowIndex: o } = e.detail, r = Ye(t), i = Ie([r]), n = Pe([i]);
+    const { blockType: t, rowIndex: o } = e.detail, r = Ve(t), i = Ie([r]), n = Te([i]);
     oe(n, o)(this._state, this._dispatch);
   }
   /**
@@ -8577,11 +8648,11 @@ let _ = class extends g {
     const { type: t, blockType: o, columnCount: r } = e.detail, i = this._state.doc.body.rows;
     if (t === "palette-row") {
       const a = Array.from({ length: r }, () => Ie());
-      oe(Pe(a), i.length)(this._state, this._dispatch);
+      oe(Te(a), i.length)(this._state, this._dispatch);
       return;
     }
     if (!o) return;
-    const n = Ye(o);
+    const n = Ve(o);
     if (i.length > 0) {
       const a = i[i.length - 1], h = a.columns[0];
       ce(a.id, h.id, n, h.blocks.length)(
@@ -8590,7 +8661,7 @@ let _ = class extends g {
       );
     } else {
       const a = Ie([n]);
-      oe(Pe([a]), 0)(this._state, this._dispatch);
+      oe(Te([a]), 0)(this._state, this._dispatch);
     }
   }
   /* ------------------------------------------------------------------ */
@@ -8616,11 +8687,11 @@ let _ = class extends g {
         const v = this._state.doc.body.rows.find((m) => m.id === t);
         if (v && v.columns.length > 1) {
           const m = v.columns[v.columns.length - 1];
-          Po(t, m.id)(this._state, this._dispatch);
+          To(t, m.id)(this._state, this._dispatch);
         }
       }
     const h = this._state.doc.body.rows.find((c) => c.id === t);
-    h && h.columns.length === o.length && To(t, o)(this._state, this._dispatch);
+    h && h.columns.length === o.length && Po(t, o)(this._state, this._dispatch);
   }
   _handleBodyPropertyChange(e) {
     const { attribute: t, metaField: o, value: r } = e.detail, i = this._state.createTransaction();
@@ -8654,7 +8725,7 @@ let _ = class extends g {
   }
 };
 _.styles = [
-  Do,
+  Eo,
   b`
       :host {
         display: flex;
@@ -8741,43 +8812,43 @@ _ = $([
 export {
   Ne as PigeonAlignmentPicker,
   x as PigeonAssetManager,
-  A as PigeonBodyPanel,
+  O as PigeonBodyPanel,
   he as PigeonButtonBlock,
-  Y as PigeonButtonPanel,
+  G as PigeonButtonPanel,
   P as PigeonCanvas,
   fe as PigeonColorPicker,
-  O as PigeonColumn,
+  A as PigeonColumn,
   Be as PigeonDividerBlock,
   Ge as PigeonDropIndicator,
   _ as PigeonEditor,
   ge as PigeonHeroBlock,
-  B as PigeonHeroPanel,
-  Le as PigeonHtmlBlock,
+  j as PigeonHeroPanel,
+  Re as PigeonHtmlBlock,
   Ae as PigeonImageBlock,
   z as PigeonImagePanel,
-  Ee as PigeonLayers,
-  V as PigeonMergeTagPicker,
-  ze as PigeonNavBarBlock,
+  De as PigeonLayers,
+  X as PigeonMergeTagPicker,
+  Le as PigeonNavBarBlock,
   ae as PigeonNavBarPanel,
-  I as PigeonPalette,
-  W as PigeonPaletteItem,
+  T as PigeonPalette,
+  Y as PigeonPaletteItem,
   k as PigeonPreview,
-  T as PigeonProperties,
-  D as PigeonRow,
+  C as PigeonProperties,
+  B as PigeonRow,
   et as PigeonRowPanel,
   L as PigeonSliderInput,
-  Re as PigeonSocialBlock,
+  Me as PigeonSocialBlock,
   je as PigeonSpacerBlock,
   Ue as PigeonSpacingInput,
-  Ur as PigeonTemplatePicker,
+  Kr as PigeonTemplatePicker,
   de as PigeonTextBlock,
-  E as PigeonTextPanel,
-  K as PigeonToolbar,
-  Yo as calculateBlockDropIndex,
-  Vo as calculateRowDropIndex,
+  S as PigeonTextPanel,
+  V as PigeonToolbar,
+  Vo as calculateBlockDropIndex,
+  qo as calculateRowDropIndex,
   Xe as clearDragData,
-  De as getDragData,
-  Hr as readDragTransfer,
+  Ee as getDragData,
+  Fr as readDragTransfer,
   Bo as setDragData,
   wt as writeDragTransfer
 };