@lit-pigeon/editor 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,10 +1,10 @@
-import { css as g, LitElement as h, html as a, nothing as me } from "lit";
-import { property as l, state as d, customElement as u } from "lit/decorators.js";
-import { getAllBlockDefinitions as Zt, getBlockDefinition as Nt, createBodySelection as kt, deleteBlock as Qt, deleteRow as Ct, duplicateBlock as eo, duplicateRow as It, generateId as Pt, insertBlock as ze, EditorState as Ot, createHistoryPlugin as Tt, undo as to, redo as oo, InMemoryTemplateStorage as io, createDefaultDocument as ro, HISTORY_PLUGIN_NAME as St, canUndo as no, canRedo as so, createBlockSelection as rt, updateBlock as Dt, createRowSelection as At, moveRow as ao, createColumn as Le, createRow as He, insertRow as Ue, createBlock as nt, moveBlock as lo, updateRowAttributes as po, addColumn as co, removeColumn as go, resizeColumns as ho, createDocStep as Et } from "@lit-pigeon/core";
+import { css as u, LitElement as h, html as a, nothing as me } from "lit";
+import { property as l, state as d, customElement as g } from "lit/decorators.js";
+import { getAllBlockDefinitions as Zt, getBlockDefinition as ct, createBodySelection as Ct, deleteBlock as Qt, deleteRow as It, duplicateBlock as eo, duplicateRow as Pt, generateId as Ot, insertBlock as ze, EditorState as Tt, createHistoryPlugin as St, undo as to, redo as oo, InMemoryTemplateStorage as io, createDefaultDocument as ro, HISTORY_PLUGIN_NAME as Dt, canUndo as no, canRedo as so, createBlockSelection as rt, updateBlock as At, createRowSelection as Et, createColumnSelection as ao, moveRow as lo, createColumn as Le, createRow as He, insertRow as Ne, createBlock as nt, moveBlock as po, updateRowAttributes as co, addColumn as ho, removeColumn as go, resizeColumns as uo, createDocStep as jt } from "@lit-pigeon/core";
 import { unsafeHTML as Ft } from "lit/directives/unsafe-html.js";
-import { l as ct, r as uo } from "./rich-text.js";
-import { PigeonTemplatePicker as wr } from "./templates.js";
-const jt = g`
+import { l as dt, r as bo } from "./rich-text.js";
+import { PigeonTemplatePicker as $r } from "./templates.js";
+const Bt = u`
   /* base palette */
   --pigeon-bg: #0f172a; /* slate-900 */
   --pigeon-surface: #1e293b; /* slate-800 */
@@ -40,7 +40,7 @@ const jt = g`
     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);
-`, bo = g`
+`, vo = u`
   :host {
     /* base palette */
     --pigeon-bg: #ffffff;
@@ -101,21 +101,21 @@ const jt = g`
   }
 
   :host(.pigeon-dark) {
-    ${jt}
+    ${Bt}
   }
 
   @media (prefers-color-scheme: dark) {
     :host(.pigeon-auto) {
-      ${jt}
+      ${Bt}
     }
   }
 `;
-var vo = Object.defineProperty, fo = Object.getOwnPropertyDescriptor, ge = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? fo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var fo = Object.defineProperty, mo = Object.getOwnPropertyDescriptor, he = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? mo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && vo(t, o, i), i;
+  return r && i && fo(t, o, i), i;
 };
-let R = class extends h {
+let z = class extends h {
   constructor() {
     super(...arguments), this.canUndo = !1, this.canRedo = !1, this.device = "desktop", this.fullscreen = !1, this._exportMenuOpen = !1;
   }
@@ -337,7 +337,7 @@ let R = class extends h {
     }));
   }
 };
-R.styles = g`
+z.styles = u`
     :host {
       display: flex;
       align-items: center;
@@ -467,38 +467,38 @@ R.styles = g`
       font-weight: 400;
     }
   `;
-ge([
+he([
   l({ type: Boolean, attribute: "can-undo" })
-], R.prototype, "canUndo", 2);
-ge([
+], z.prototype, "canUndo", 2);
+he([
   l({ type: Boolean, attribute: "can-redo" })
-], R.prototype, "canRedo", 2);
-ge([
+], z.prototype, "canRedo", 2);
+he([
   l({ type: String })
-], R.prototype, "device", 2);
-ge([
+], z.prototype, "device", 2);
+he([
   l({ type: Boolean })
-], R.prototype, "fullscreen", 2);
-ge([
+], z.prototype, "fullscreen", 2);
+he([
   d()
-], R.prototype, "_exportMenuOpen", 2);
-R = ge([
-  u("pigeon-toolbar")
-], R);
-let dt = null;
-function mo(e) {
-  dt = e;
+], z.prototype, "_exportMenuOpen", 2);
+z = he([
+  g("pigeon-toolbar")
+], z);
+let ht = null;
+function _o(e) {
+  ht = e;
 }
 function we() {
-  return dt;
+  return ht;
 }
 function gt() {
-  dt = null;
+  ht = null;
 }
 function Wt(e, t) {
-  e.dataTransfer && (e.dataTransfer.setData("application/json", JSON.stringify(t)), e.dataTransfer.effectAllowed = "move"), mo(t);
+  e.dataTransfer && (e.dataTransfer.setData("application/json", JSON.stringify(t)), e.dataTransfer.effectAllowed = "move"), _o(t);
 }
-function _r(e) {
+function xr(e) {
   if (e.dataTransfer)
     try {
       const t = e.dataTransfer.getData("application/json");
@@ -507,12 +507,12 @@ function _r(e) {
     }
   return we();
 }
-var _o = Object.defineProperty, xo = Object.getOwnPropertyDescriptor, he = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? xo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var xo = Object.defineProperty, yo = Object.getOwnPropertyDescriptor, ge = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? yo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && _o(t, o, i), i;
+  return r && i && xo(t, o, i), i;
 };
-const yo = {
+const wo = {
   text: "T",
   image: "[]",
   button: "[B]",
@@ -521,12 +521,12 @@ const yo = {
   social: "@",
   html: "</>"
 };
-let z = class extends h {
+let L = class extends h {
   constructor() {
     super(...arguments), this.label = "", this.icon = "", this.dragType = "palette-block", this.blockType = "", this.columnCount = 1;
   }
   render() {
-    const e = yo[this.icon] ?? this.icon ?? "?", t = this.dragType === "palette-row" ? "Add layout" : "Add block";
+    const e = wo[this.icon] ?? this.icon ?? "?", t = this.dragType === "palette-row" ? "Add layout" : "Add block";
     return a`
       <div
         class="item"
@@ -581,7 +581,7 @@ let z = class extends h {
     }));
   }
 };
-z.styles = g`
+L.styles = u`
     :host {
       display: block;
     }
@@ -639,30 +639,30 @@ z.styles = g`
       color: var(--pigeon-text, #1e293b);
     }
   `;
-he([
+ge([
   l({ type: String })
-], z.prototype, "label", 2);
-he([
+], L.prototype, "label", 2);
+ge([
   l({ type: String })
-], z.prototype, "icon", 2);
-he([
+], L.prototype, "icon", 2);
+ge([
   l({ type: String, attribute: "drag-type" })
-], z.prototype, "dragType", 2);
-he([
+], L.prototype, "dragType", 2);
+ge([
   l({ type: String, attribute: "block-type" })
-], z.prototype, "blockType", 2);
-he([
+], L.prototype, "blockType", 2);
+ge([
   l({ type: Number, attribute: "column-count" })
-], z.prototype, "columnCount", 2);
-z = he([
-  u("pigeon-palette-item")
-], z);
-var wo = Object.defineProperty, $o = Object.getOwnPropertyDescriptor, ht = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? $o(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+], L.prototype, "columnCount", 2);
+L = ge([
+  g("pigeon-palette-item")
+], L);
+var $o = Object.defineProperty, ko = Object.getOwnPropertyDescriptor, ut = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? ko(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && wo(t, o, i), i;
+  return r && i && $o(t, o, i), i;
 };
-const ko = {
+const Co = {
   text: "T",
   image: "Img",
   button: "Btn",
@@ -706,7 +706,7 @@ let $e = class extends h {
   }
   _renderBlock(e, t, o) {
     var s;
-    const r = ((s = this.selection) == null ? void 0 : s.type) === "block" && this.selection.blockId === e.id, i = ko[e.type] ?? "?", n = e.type.charAt(0).toUpperCase() + e.type.slice(1);
+    const r = ((s = this.selection) == null ? void 0 : s.type) === "block" && this.selection.blockId === e.id, i = Co[e.type] ?? "?", n = e.type.charAt(0).toUpperCase() + e.type.slice(1);
     return a`
       <div
         class="tree-item indent-3 ${r ? "selected" : ""}"
@@ -732,7 +732,7 @@ let $e = class extends h {
     }));
   }
 };
-$e.styles = g`
+$e.styles = u`
     :host {
       display: block;
       font-family: var(--pigeon-font);
@@ -796,27 +796,27 @@ $e.styles = g`
       padding: 8px 8px 4px;
     }
   `;
-ht([
+ut([
   l({ type: Object })
 ], $e.prototype, "doc", 2);
-ht([
+ut([
   l({ type: Object })
 ], $e.prototype, "selection", 2);
-$e = ht([
-  u("pigeon-layers")
+$e = ut([
+  g("pigeon-layers")
 ], $e);
-var Co = Object.defineProperty, Io = Object.getOwnPropertyDescriptor, Me = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Io(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Io = Object.defineProperty, Po = Object.getOwnPropertyDescriptor, Re = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Po(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Co(t, o, i), i;
+  return r && i && Io(t, o, i), i;
 };
-const Po = [
+const Oo = [
   { label: "1 Column", columns: 1, icon: "[=]" },
   { label: "2 Columns", columns: 2, icon: "[||]" },
   { label: "3 Columns", columns: 3, icon: "[|||]" },
   { label: "4 Columns", columns: 4, icon: "[||||]" }
 ];
-let X = class extends h {
+let G = class extends h {
   constructor() {
     super(...arguments), this.selection = null, this._blockDefs = [], this._activeTab = "content";
   }
@@ -874,7 +874,7 @@ let X = class extends h {
       <div class="section">
         <div class="section-header">Layout</div>
         <div class="items">
-          ${Po.map((e) => a`
+          ${Oo.map((e) => a`
             <pigeon-palette-item part="palette-item"
               label="${e.label}"
               icon="${e.icon}"
@@ -895,7 +895,7 @@ let X = class extends h {
     `;
   }
 };
-X.styles = g`
+G.styles = u`
     :host {
       display: block;
       width: var(--pigeon-palette-width, 240px);
@@ -974,22 +974,22 @@ X.styles = g`
       gap: 6px;
     }
   `;
-Me([
+Re([
   l({ type: Object })
-], X.prototype, "doc", 2);
-Me([
+], G.prototype, "doc", 2);
+Re([
   l({ type: Object })
-], X.prototype, "selection", 2);
-Me([
+], G.prototype, "selection", 2);
+Re([
   d()
-], X.prototype, "_blockDefs", 2);
-Me([
+], G.prototype, "_blockDefs", 2);
+Re([
   d()
-], X.prototype, "_activeTab", 2);
-X = Me([
-  u("pigeon-palette")
-], X);
-function Oo(e, t) {
+], G.prototype, "_activeTab", 2);
+G = Re([
+  g("pigeon-palette")
+], G);
+function To(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;
@@ -998,7 +998,7 @@ function Oo(e, t) {
   }
   return t.length;
 }
-function To(e, t) {
+function So(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;
@@ -1007,13 +1007,13 @@ function To(e, t) {
   }
   return t.length;
 }
-function So(e, t) {
+function Do(e, t) {
   return e < 0 || t === e || t === e + 1 ? null : t > e ? t - 1 : t;
 }
-var Do = Object.defineProperty, Ao = Object.getOwnPropertyDescriptor, Vt = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ao(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Ao = Object.defineProperty, Eo = Object.getOwnPropertyDescriptor, Vt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Eo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Do(t, o, i), i;
+  return r && i && Ao(t, o, i), i;
 };
 let Fe = class extends h {
   constructor() {
@@ -1028,7 +1028,7 @@ let Fe = class extends h {
     `;
   }
 };
-Fe.styles = g`
+Fe.styles = u`
     :host {
       display: block;
       height: 4px;
@@ -1076,12 +1076,12 @@ Vt([
   l({ type: Boolean, reflect: !0 })
 ], Fe.prototype, "visible", 2);
 Fe = Vt([
-  u("pigeon-drop-indicator")
+  g("pigeon-drop-indicator")
 ], Fe);
-var Eo = Object.defineProperty, jo = Object.getOwnPropertyDescriptor, Xe = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? jo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var jo = Object.defineProperty, Bo = Object.getOwnPropertyDescriptor, Xe = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Bo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Eo(t, o, i), i;
+  return r && i && jo(t, o, i), i;
 };
 let te = class extends h {
   constructor() {
@@ -1111,7 +1111,7 @@ let te = class extends h {
     const e = this.renderRoot.querySelector(".content");
     if (!e) return;
     this._editorHost = e;
-    const t = await ct();
+    const t = await dt();
     !this.editing || !this._editorHost || (this._editor = t.createEditor({
       element: this._editorHost,
       initialHTML: this.block.values.content,
@@ -1155,7 +1155,7 @@ let te = class extends h {
     }));
   }
 };
-te.styles = g`
+te.styles = u`
     :host {
       display: block;
       cursor: pointer;
@@ -1205,12 +1205,12 @@ Xe([
   l({ type: Boolean, reflect: !0 })
 ], te.prototype, "editing", 2);
 te = Xe([
-  u("pigeon-text-block")
+  g("pigeon-text-block")
 ], te);
-var Bo = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, ut = (e, t, o, r) => {
+var Ro = Object.defineProperty, Mo = Object.getOwnPropertyDescriptor, bt = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Mo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Bo(t, o, i), i;
+  return r && i && Ro(t, o, i), i;
 };
 let ke = class extends h {
   constructor() {
@@ -1250,7 +1250,7 @@ let ke = class extends h {
     }));
   }
 };
-ke.styles = g`
+ke.styles = u`
     :host {
       display: block;
       cursor: pointer;
@@ -1298,19 +1298,19 @@ ke.styles = g`
       opacity: 0.5;
     }
   `;
-ut([
+bt([
   l({ type: Object })
 ], ke.prototype, "block", 2);
-ut([
+bt([
   l({ type: Boolean, reflect: !0 })
 ], ke.prototype, "selected", 2);
-ke = ut([
-  u("pigeon-image-block")
+ke = bt([
+  g("pigeon-image-block")
 ], ke);
-var Ro = Object.defineProperty, zo = Object.getOwnPropertyDescriptor, Ge = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? zo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var zo = Object.defineProperty, Lo = Object.getOwnPropertyDescriptor, Ge = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Lo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Ro(t, o, i), i;
+  return r && i && zo(t, o, i), i;
 };
 let oe = class extends h {
   constructor() {
@@ -1352,7 +1352,7 @@ let oe = class extends h {
     const e = this.renderRoot.querySelector(".button");
     if (!e) return;
     this._editorHost = e;
-    const t = await ct();
+    const t = await dt();
     !this.editing || !this._editorHost || (this._editor = t.createEditor({
       element: this._editorHost,
       initialHTML: this.block.values.content,
@@ -1399,7 +1399,7 @@ let oe = class extends h {
     }));
   }
 };
-oe.styles = g`
+oe.styles = u`
     :host {
       display: block;
       cursor: pointer;
@@ -1460,12 +1460,12 @@ Ge([
   l({ type: Boolean, reflect: !0 })
 ], oe.prototype, "editing", 2);
 oe = Ge([
-  u("pigeon-button-block")
+  g("pigeon-button-block")
 ], oe);
-var Lo = Object.defineProperty, Ho = Object.getOwnPropertyDescriptor, bt = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ho(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Ho = Object.defineProperty, No = Object.getOwnPropertyDescriptor, vt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? No(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Lo(t, o, i), i;
+  return r && i && Ho(t, o, i), i;
 };
 let Ce = class extends h {
   constructor() {
@@ -1495,7 +1495,7 @@ let Ce = class extends h {
     }));
   }
 };
-Ce.styles = g`
+Ce.styles = u`
     :host {
       display: block;
       cursor: pointer;
@@ -1522,17 +1522,17 @@ Ce.styles = g`
       margin: 0;
     }
   `;
-bt([
+vt([
   l({ type: Object })
 ], Ce.prototype, "block", 2);
-bt([
+vt([
   l({ type: Boolean, reflect: !0 })
 ], Ce.prototype, "selected", 2);
-Ce = bt([
-  u("pigeon-divider-block")
+Ce = vt([
+  g("pigeon-divider-block")
 ], Ce);
-var Uo = Object.defineProperty, No = Object.getOwnPropertyDescriptor, vt = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? No(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Uo = Object.defineProperty, Fo = Object.getOwnPropertyDescriptor, ft = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Fo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
   return r && i && Uo(t, o, i), i;
 };
@@ -1561,7 +1561,7 @@ let Ie = class extends h {
     }));
   }
 };
-Ie.styles = g`
+Ie.styles = u`
     :host {
       display: block;
       cursor: pointer;
@@ -1603,21 +1603,21 @@ Ie.styles = g`
       opacity: 1;
     }
   `;
-vt([
+ft([
   l({ type: Object })
 ], Ie.prototype, "block", 2);
-vt([
+ft([
   l({ type: Boolean, reflect: !0 })
 ], Ie.prototype, "selected", 2);
-Ie = vt([
-  u("pigeon-spacer-block")
+Ie = ft([
+  g("pigeon-spacer-block")
 ], Ie);
-var Fo = Object.defineProperty, Wo = Object.getOwnPropertyDescriptor, ft = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Wo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Wo = Object.defineProperty, Vo = Object.getOwnPropertyDescriptor, mt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Vo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Fo(t, o, i), i;
+  return r && i && Wo(t, o, i), i;
 };
-const Vo = {
+const Yo = {
   facebook: "f",
   twitter: "𝕏",
   instagram: "ig",
@@ -1625,7 +1625,7 @@ const Vo = {
   youtube: "▶",
   tiktok: "♪",
   custom: "★"
-}, Yo = {
+}, qo = {
   facebook: "#1877F2",
   twitter: "#000000",
   instagram: "#E4405F",
@@ -1654,7 +1654,7 @@ let Pe = class extends h {
         ${e.icons.length === 0 ? a`<div class="empty-state">Add social icons in properties</div>` : a`
             <div class="icons-container" style="justify-content: ${o[e.alignment]}; gap: ${e.spacing}px;">
               ${e.icons.map((r) => {
-      const i = Yo[r.type] ?? "#6b7280", n = Vo[r.type] ?? "?";
+      const i = qo[r.type] ?? "#6b7280", n = Yo[r.type] ?? "?";
       return a`
                   <a
                     class="social-icon"
@@ -1681,7 +1681,7 @@ let Pe = class extends h {
     }));
   }
 };
-Pe.styles = g`
+Pe.styles = u`
     :host {
       display: block;
       cursor: pointer;
@@ -1729,19 +1729,19 @@ Pe.styles = g`
       font-size: 13px;
     }
   `;
-ft([
+mt([
   l({ type: Object })
 ], Pe.prototype, "block", 2);
-ft([
+mt([
   l({ type: Boolean, reflect: !0 })
 ], Pe.prototype, "selected", 2);
-Pe = ft([
-  u("pigeon-social-block")
+Pe = mt([
+  g("pigeon-social-block")
 ], Pe);
-var qo = Object.defineProperty, Xo = Object.getOwnPropertyDescriptor, mt = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Xo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Xo = Object.defineProperty, Go = Object.getOwnPropertyDescriptor, _t = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Go(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && qo(t, o, i), i;
+  return r && i && Xo(t, o, i), i;
 };
 let Oe = class extends h {
   constructor() {
@@ -1768,7 +1768,7 @@ let Oe = class extends h {
     }));
   }
 };
-Oe.styles = g`
+Oe.styles = u`
     :host {
       display: block;
       cursor: pointer;
@@ -1808,19 +1808,19 @@ Oe.styles = g`
       font-size: 13px;
     }
   `;
-mt([
+_t([
   l({ type: Object })
 ], Oe.prototype, "block", 2);
-mt([
+_t([
   l({ type: Boolean, reflect: !0 })
 ], Oe.prototype, "selected", 2);
-Oe = mt([
-  u("pigeon-html-block")
+Oe = _t([
+  g("pigeon-html-block")
 ], Oe);
-var Go = Object.defineProperty, Ko = Object.getOwnPropertyDescriptor, Ke = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ko(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Ko = Object.defineProperty, Jo = Object.getOwnPropertyDescriptor, Ke = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Jo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Go(t, o, i), i;
+  return r && i && Ko(t, o, i), i;
 };
 let ie = class extends h {
   constructor() {
@@ -1863,7 +1863,7 @@ let ie = class extends h {
     const e = this.renderRoot.querySelector(".content");
     if (!e) return;
     this._editorHost = e;
-    const t = await ct();
+    const t = await dt();
     !this.editing || !this._editorHost || (this._editor = t.createEditor({
       element: this._editorHost,
       initialHTML: this.block.values.content || "<p></p>",
@@ -1907,7 +1907,7 @@ let ie = class extends h {
     }));
   }
 };
-ie.styles = g`
+ie.styles = u`
     :host {
       display: block;
       cursor: pointer;
@@ -1977,12 +1977,12 @@ Ke([
   l({ type: Boolean, reflect: !0 })
 ], ie.prototype, "editing", 2);
 ie = Ke([
-  u("pigeon-hero-block")
+  g("pigeon-hero-block")
 ], ie);
-var Jo = Object.defineProperty, Zo = Object.getOwnPropertyDescriptor, _t = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Zo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Zo = Object.defineProperty, Qo = Object.getOwnPropertyDescriptor, xt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Qo(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Jo(t, o, i), i;
+  return r && i && Zo(t, o, i), i;
 };
 let Te = class extends h {
   constructor() {
@@ -2027,7 +2027,7 @@ let Te = class extends h {
     }));
   }
 };
-Te.styles = g`
+Te.styles = u`
     :host {
       display: block;
       cursor: pointer;
@@ -2075,21 +2075,21 @@ Te.styles = g`
       font-size: 13px;
     }
   `;
-_t([
+xt([
   l({ type: Object })
 ], Te.prototype, "block", 2);
-_t([
+xt([
   l({ type: Boolean, reflect: !0 })
 ], Te.prototype, "selected", 2);
-Te = _t([
-  u("pigeon-navbar-block")
+Te = xt([
+  g("pigeon-navbar-block")
 ], Te);
-var Qo = Object.defineProperty, ei = Object.getOwnPropertyDescriptor, K = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? ei(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var ei = Object.defineProperty, ti = Object.getOwnPropertyDescriptor, J = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? ti(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Qo(t, o, i), i;
+  return r && i && ei(t, o, i), i;
 };
-let S = class extends h {
+let D = class extends h {
   constructor() {
     super(...arguments), this.rowId = "", this.selection = null, this.editingBlockId = null, this._dropIndex = -1, this._isDragOver = !1;
   }
@@ -2161,7 +2161,7 @@ let S = class extends h {
    * failing with "Unknown block type".
    */
   _renderCustomBlock(e, t) {
-    const o = Nt(e.type), r = e, i = o != null && o.renderCanvas ? Ft(o.renderCanvas(r)) : a`<span class="custom-block__label"
+    const o = ct(e.type), r = e, i = o != null && o.renderCanvas ? Ft(o.renderCanvas(r)) : a`<span class="custom-block__label"
           >${(o == null ? void 0 : o.label) ?? e.type}</span
         >`;
     return a`<div
@@ -2185,23 +2185,23 @@ let S = class extends h {
   }
   _onDragOver(e) {
     const t = we();
-    if (!t || t.type === "palette-row") return;
+    if (!t || t.type !== "palette-block" && t.type !== "existing-block") return;
     e.preventDefault(), e.stopPropagation(), e.dataTransfer && (e.dataTransfer.dropEffect = "copy"), this._isDragOver = !0;
     const o = Array.from(
       this.renderRoot.querySelectorAll(
         "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 = To(e.clientY, o);
+    this._dropIndex = So(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) {
-    e.preventDefault(), e.stopPropagation();
     const t = we();
-    if (!t || t.type === "palette-row") return;
+    if (!t || t.type !== "palette-block" && t.type !== "existing-block") return;
+    e.preventDefault(), e.stopPropagation();
     const o = this._dropIndex >= 0 ? this._dropIndex : this.column.blocks.length;
     this.dispatchEvent(new CustomEvent("block-drop", {
       detail: {
@@ -2215,7 +2215,7 @@ let S = class extends h {
     })), this._isDragOver = !1, this._dropIndex = -1, gt();
   }
 };
-S.styles = g`
+D.styles = u`
     :host {
       display: block;
       min-height: 40px;
@@ -2282,35 +2282,35 @@ S.styles = g`
       text-align: center;
     }
   `;
-K([
+J([
   l({ type: Object })
-], S.prototype, "column", 2);
-K([
+], D.prototype, "column", 2);
+J([
   l({ type: String, attribute: "row-id" })
-], S.prototype, "rowId", 2);
-K([
+], D.prototype, "rowId", 2);
+J([
   l({ type: Object })
-], S.prototype, "selection", 2);
-K([
+], D.prototype, "selection", 2);
+J([
   l({ type: String, attribute: "editing-block-id" })
-], S.prototype, "editingBlockId", 2);
-K([
+], D.prototype, "editingBlockId", 2);
+J([
   d()
-], S.prototype, "_dropIndex", 2);
-K([
+], D.prototype, "_dropIndex", 2);
+J([
   d()
-], S.prototype, "_isDragOver", 2);
-S = K([
-  u("pigeon-column")
-], S);
-var ti = Object.defineProperty, oi = Object.getOwnPropertyDescriptor, J = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? oi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+], D.prototype, "_isDragOver", 2);
+D = J([
+  g("pigeon-column")
+], D);
+var oi = Object.defineProperty, ii = Object.getOwnPropertyDescriptor, W = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? ii(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && ti(t, o, i), i;
+  return r && i && oi(t, o, i), i;
 };
-let D = class extends h {
+let I = class extends h {
   constructor() {
-    super(...arguments), this.index = 0, this.totalRows = 0, this.selection = null, this.editingBlockId = null, this._dragging = !1;
+    super(...arguments), this.index = 0, this.totalRows = 0, this.selection = null, this.editingBlockId = null, this.showActions = !1, this._dragging = !1;
   }
   render() {
     var n;
@@ -2452,7 +2452,7 @@ let D = class extends h {
     this._dragging = !1, gt();
   }
 };
-D.styles = g`
+I.styles = u`
     :host {
       display: block;
       position: relative;
@@ -2504,6 +2504,11 @@ D.styles = g`
       position: absolute;
       top: -1px;
       right: -40px;
+      /* Transparent left padding bridges the gap between the row's right edge
+         and the buttons so the hover region stays contiguous — otherwise the
+         cursor crosses dead space, :host(:hover) drops, and the bar fades out
+         before it can be reached. The buttons stay put (anchored by right). */
+      padding-left: 16px;
       display: flex;
       flex-direction: column;
       gap: 2px;
@@ -2513,8 +2518,7 @@ D.styles = g`
       z-index: 10;
     }
 
-    :host(:hover) .actions,
-    .row-wrapper.selected .actions {
+    :host([show-actions]) .actions {
       opacity: 1;
       pointer-events: auto;
     }
@@ -2574,40 +2578,49 @@ D.styles = g`
       white-space: nowrap;
     }
 
-    :host(:hover) .row-label,
+    :host([show-actions]) .row-label,
     .row-wrapper.selected .row-label {
       opacity: 1;
     }
   `;
-J([
+W([
   l({ type: Object })
-], D.prototype, "row", 2);
-J([
+], I.prototype, "row", 2);
+W([
   l({ type: Number })
-], D.prototype, "index", 2);
-J([
+], I.prototype, "index", 2);
+W([
   l({ type: Number, attribute: "total-rows" })
-], D.prototype, "totalRows", 2);
-J([
+], I.prototype, "totalRows", 2);
+W([
   l({ type: Object })
-], D.prototype, "selection", 2);
-J([
+], I.prototype, "selection", 2);
+W([
   l({ type: String, attribute: "editing-block-id" })
-], D.prototype, "editingBlockId", 2);
-J([
+], I.prototype, "editingBlockId", 2);
+W([
+  l({ type: Boolean, attribute: "show-actions", reflect: !0 })
+], I.prototype, "showActions", 2);
+W([
   d()
-], D.prototype, "_dragging", 2);
-D = J([
-  u("pigeon-row")
-], D);
-var ii = Object.defineProperty, ri = Object.getOwnPropertyDescriptor, F = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? ri(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+], I.prototype, "_dragging", 2);
+I = W([
+  g("pigeon-row")
+], I);
+var ri = Object.defineProperty, ni = Object.getOwnPropertyDescriptor, B = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? ni(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && ii(t, o, i), i;
+  return r && i && ri(t, o, i), i;
 };
 let C = class extends h {
   constructor() {
-    super(...arguments), this.selection = null, this.editingBlockId = null, this.previewWidth = 0, this.device = "desktop", this._rowDropIndex = -1, this._isDragOver = !1;
+    super(...arguments), this.selection = null, this.editingBlockId = null, this.previewWidth = 0, this.device = "desktop", this._rowDropIndex = -1, this._isDragOver = !1, this._hoveredRowId = null, this._onPointerOverRow = (e) => {
+      var r;
+      const t = e.composedPath().find(
+        (i) => i instanceof HTMLElement && i.tagName.toLowerCase() === "pigeon-row"
+      ), o = ((r = t == null ? void 0 : t.row) == null ? void 0 : r.id) ?? null;
+      o !== this._hoveredRowId && (this._hoveredRowId = o);
+    };
   }
   render() {
     if (!this.doc) return a``;
@@ -2617,6 +2630,7 @@ let C = class extends h {
         class="canvas-scroll"
         style=${o ? "" : `background: ${t};`}
         @click=${this._onCanvasClick}
+        @mouseover=${this._onPointerOverRow}
       >
         ${o ? a`
               <div class="device-bar">
@@ -2642,7 +2656,8 @@ let C = class extends h {
    * the frame stays neutral).
    */
   _renderCanvasArea(e, t) {
-    const o = this.doc.body.rows, r = t ? `background: ${t};` : "";
+    var n;
+    const o = this.doc.body.rows, r = t ? `background: ${t};` : "", i = ((n = this.selection) == null ? void 0 : n.type) === "row" ? this.selection.rowId : null;
     return a`
       <div
         class="canvas-area"
@@ -2665,16 +2680,17 @@ let C = class extends h {
             ` : a`
               <div class="rows-container">
                 ${o.map(
-      (i, n) => a`
+      (s, c) => a`
                     <pigeon-drop-indicator
-                      ?visible=${this._isDragOver && this._rowDropIndex === n}
+                      ?visible=${this._isDragOver && this._rowDropIndex === c}
                     ></pigeon-drop-indicator>
                     <pigeon-row
-                      .row=${i}
-                      .index=${n}
+                      .row=${s}
+                      .index=${c}
                       .totalRows=${o.length}
                       .selection=${this.selection}
                       .editingBlockId=${this.editingBlockId}
+                      ?show-actions=${this._hoveredRowId === s.id || this._hoveredRowId === null && i === s.id}
                     ></pigeon-row>
                   `
     )}
@@ -2700,7 +2716,7 @@ let C = class extends h {
       const o = Array.from(
         this.renderRoot.querySelectorAll("pigeon-row")
       );
-      this._rowDropIndex = Oo(e.clientY, o);
+      this._rowDropIndex = To(e.clientY, o);
     }
   }
   _onDragLeave(e) {
@@ -2726,7 +2742,7 @@ let C = class extends h {
         composed: !0
       }));
     } else if (t.type === "existing-row" && t.rowId) {
-      const o = this.doc.body.rows.findIndex((n) => n.id === t.rowId), r = this._rowDropIndex >= 0 ? this._rowDropIndex : this.doc.body.rows.length, i = So(o, r);
+      const o = this.doc.body.rows.findIndex((n) => n.id === t.rowId), r = this._rowDropIndex >= 0 ? this._rowDropIndex : this.doc.body.rows.length, i = Do(o, r);
       i !== null && this.dispatchEvent(new CustomEvent("row-move", {
         detail: { rowId: t.rowId, toIndex: i },
         bubbles: !0,
@@ -2746,7 +2762,7 @@ let C = class extends h {
     this._isDragOver = !1, this._rowDropIndex = -1, gt();
   }
 };
-C.styles = g`
+C.styles = u`
     :host {
       display: block;
       flex: 1;
@@ -2875,51 +2891,54 @@ C.styles = g`
       border-radius: var(--pigeon-radius, 6px);
     }
   `;
-F([
+B([
   l({ type: Object })
 ], C.prototype, "doc", 2);
-F([
+B([
   l({ type: Object })
 ], C.prototype, "selection", 2);
-F([
+B([
   l({ type: String, attribute: "editing-block-id" })
 ], C.prototype, "editingBlockId", 2);
-F([
+B([
   l({ type: Number, attribute: "preview-width" })
 ], C.prototype, "previewWidth", 2);
-F([
+B([
   l({ type: String })
 ], C.prototype, "device", 2);
-F([
+B([
   d()
 ], C.prototype, "_rowDropIndex", 2);
-F([
+B([
   d()
 ], C.prototype, "_isDragOver", 2);
-C = F([
-  u("pigeon-canvas")
+B([
+  d()
+], C.prototype, "_hoveredRowId", 2);
+C = B([
+  g("pigeon-canvas")
 ], C);
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const xe = globalThis, Bt = (e) => e, We = xe.trustedTypes, Mt = We ? We.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, Yt = "$lit$", M = `lit$${Math.random().toFixed(9).slice(2)}$`, qt = "?" + M, ni = `<${qt}>`, G = document, Ve = () => G.createComment(""), Se = (e) => e === null || typeof e != "object" && typeof e != "function", xt = Array.isArray, si = (e) => xt(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", st = `[ 	
-\f\r]`, _e = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Rt = /-->/g, zt = />/g, Y = RegExp(`>|${st}(?:([^\\s"'>=/]+)(${st}*=${st}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Lt = /'/g, Ht = /"/g, Xt = /^(?:script|style|textarea|title)$/i, De = Symbol.for("lit-noChange"), m = Symbol.for("lit-nothing"), Ut = /* @__PURE__ */ new WeakMap(), q = G.createTreeWalker(G, 129);
+const xe = globalThis, Rt = (e) => e, We = xe.trustedTypes, Mt = We ? We.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, Yt = "$lit$", M = `lit$${Math.random().toFixed(9).slice(2)}$`, qt = "?" + M, si = `<${qt}>`, K = document, Ve = () => K.createComment(""), Se = (e) => e === null || typeof e != "object" && typeof e != "function", yt = Array.isArray, ai = (e) => yt(e) || typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", st = `[ 	
+\f\r]`, _e = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, zt = /-->/g, Lt = />/g, q = RegExp(`>|${st}(?:([^\\s"'>=/]+)(${st}*=${st}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), Ht = /'/g, Nt = /"/g, Xt = /^(?:script|style|textarea|title)$/i, De = Symbol.for("lit-noChange"), m = Symbol.for("lit-nothing"), Ut = /* @__PURE__ */ new WeakMap(), X = K.createTreeWalker(K, 129);
 function Gt(e, t) {
-  if (!xt(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  if (!yt(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return Mt !== void 0 ? Mt.createHTML(t) : t;
 }
-const ai = (e, t) => {
+const li = (e, t) => {
   const o = e.length - 1, r = [];
   let i, n = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", s = _e;
   for (let c = 0; c < o; c++) {
     const p = e[c];
-    let b, f, v = -1, T = 0;
-    for (; T < p.length && (s.lastIndex = T, f = s.exec(p), f !== null); ) T = s.lastIndex, s === _e ? f[1] === "!--" ? s = Rt : f[1] !== void 0 ? s = zt : f[2] !== void 0 ? (Xt.test(f[2]) && (i = RegExp("</" + f[2], "g")), s = Y) : f[3] !== void 0 && (s = Y) : s === Y ? f[0] === ">" ? (s = i ?? _e, v = -1) : f[1] === void 0 ? v = -2 : (v = s.lastIndex - f[2].length, b = f[1], s = f[3] === void 0 ? Y : f[3] === '"' ? Ht : Lt) : s === Ht || s === Lt ? s = Y : s === Rt || s === zt ? s = _e : (s = Y, i = void 0);
-    const B = s === Y && e[c + 1].startsWith("/>") ? " " : "";
-    n += s === _e ? p + ni : v >= 0 ? (r.push(b), p.slice(0, v) + Yt + p.slice(v) + M + B) : p + M + (v === -2 ? c : B);
+    let b, f, v = -1, S = 0;
+    for (; S < p.length && (s.lastIndex = S, f = s.exec(p), f !== null); ) S = s.lastIndex, s === _e ? f[1] === "!--" ? s = zt : f[1] !== void 0 ? s = Lt : f[2] !== void 0 ? (Xt.test(f[2]) && (i = RegExp("</" + f[2], "g")), s = q) : f[3] !== void 0 && (s = q) : s === q ? f[0] === ">" ? (s = i ?? _e, v = -1) : f[1] === void 0 ? v = -2 : (v = s.lastIndex - f[2].length, b = f[1], s = f[3] === void 0 ? q : f[3] === '"' ? Nt : Ht) : s === Nt || s === Ht ? s = q : s === zt || s === Lt ? s = _e : (s = q, i = void 0);
+    const R = s === q && e[c + 1].startsWith("/>") ? " " : "";
+    n += s === _e ? p + si : v >= 0 ? (r.push(b), p.slice(0, v) + Yt + p.slice(v) + M + R) : p + M + (v === -2 ? c : R);
   }
   return [Gt(e, n + (e[o] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
 };
@@ -2928,23 +2947,23 @@ class Ae {
     let i;
     this.parts = [];
     let n = 0, s = 0;
-    const c = t.length - 1, p = this.parts, [b, f] = ai(t, o);
-    if (this.el = Ae.createElement(b, r), q.currentNode = this.el.content, o === 2 || o === 3) {
+    const c = t.length - 1, p = this.parts, [b, f] = li(t, o);
+    if (this.el = Ae.createElement(b, r), X.currentNode = this.el.content, o === 2 || o === 3) {
       const v = this.el.content.firstChild;
       v.replaceWith(...v.childNodes);
     }
-    for (; (i = q.nextNode()) !== null && p.length < c; ) {
+    for (; (i = X.nextNode()) !== null && p.length < c; ) {
       if (i.nodeType === 1) {
         if (i.hasAttributes()) for (const v of i.getAttributeNames()) if (v.endsWith(Yt)) {
-          const T = f[s++], B = i.getAttribute(v).split(M), Re = /([.?@])?(.*)/.exec(T);
-          p.push({ type: 1, index: n, name: Re[2], strings: B, ctor: Re[1] === "." ? pi : Re[1] === "?" ? ci : Re[1] === "@" ? di : Ze }), i.removeAttribute(v);
+          const S = f[s++], R = i.getAttribute(v).split(M), Me = /([.?@])?(.*)/.exec(S);
+          p.push({ type: 1, index: n, name: Me[2], strings: R, ctor: Me[1] === "." ? ci : Me[1] === "?" ? di : Me[1] === "@" ? hi : Ze }), i.removeAttribute(v);
         } else v.startsWith(M) && (p.push({ type: 6, index: n }), i.removeAttribute(v));
         if (Xt.test(i.tagName)) {
-          const v = i.textContent.split(M), T = v.length - 1;
-          if (T > 0) {
+          const v = i.textContent.split(M), S = v.length - 1;
+          if (S > 0) {
             i.textContent = We ? We.emptyScript : "";
-            for (let B = 0; B < T; B++) i.append(v[B], Ve()), q.nextNode(), p.push({ type: 2, index: ++n });
-            i.append(v[T], Ve());
+            for (let R = 0; R < S; R++) i.append(v[R], Ve()), X.nextNode(), p.push({ type: 2, index: ++n });
+            i.append(v[S], Ve());
           }
         }
       } else if (i.nodeType === 8) if (i.data === qt) p.push({ type: 2, index: n });
@@ -2956,7 +2975,7 @@ class Ae {
     }
   }
   static createElement(t, o) {
-    const r = G.createElement("template");
+    const r = K.createElement("template");
     return r.innerHTML = t, r;
   }
 }
@@ -2967,7 +2986,7 @@ function re(e, t, o = e, r) {
   const n = Se(t) ? void 0 : t._$litDirective$;
   return (i == null ? void 0 : i.constructor) !== n && ((c = i == null ? void 0 : i._$AO) == null || c.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 = re(e, i._$AS(e, t.values), i, r)), t;
 }
-class li {
+class pi {
   constructor(t, o) {
     this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = o;
   }
@@ -2978,17 +2997,17 @@ class li {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: o }, parts: r } = this._$AD, i = ((t == null ? void 0 : t.creationScope) ?? G).importNode(o, !0);
-    q.currentNode = i;
-    let n = q.nextNode(), s = 0, c = 0, p = r[0];
+    const { el: { content: o }, parts: r } = this._$AD, i = ((t == null ? void 0 : t.creationScope) ?? K).importNode(o, !0);
+    X.currentNode = i;
+    let n = X.nextNode(), s = 0, c = 0, p = r[0];
     for (; p !== void 0; ) {
       if (s === p.index) {
         let b;
         p.type === 2 ? b = new Je(n, n.nextSibling, this, t) : p.type === 1 ? b = new p.ctor(n, p.name, p.strings, this, t) : p.type === 6 && (b = new gi(n, this, t)), this._$AV.push(b), p = r[++c];
       }
-      s !== (p == null ? void 0 : p.index) && (n = q.nextNode(), s++);
+      s !== (p == null ? void 0 : p.index) && (n = X.nextNode(), s++);
     }
-    return q.currentNode = G, i;
+    return X.currentNode = K, i;
   }
   p(t) {
     let o = 0;
@@ -3015,7 +3034,7 @@ class Je {
     return this._$AB;
   }
   _$AI(t, o = this) {
-    t = re(this, t, o), Se(t) ? t === m || t == null || t === "" ? (this._$AH !== m && this._$AR(), this._$AH = m) : t !== this._$AH && t !== De && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : si(t) ? this.k(t) : this._(t);
+    t = re(this, t, o), Se(t) ? t === m || t == null || t === "" ? (this._$AH !== m && this._$AR(), this._$AH = m) : t !== this._$AH && t !== De && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : ai(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -3024,14 +3043,14 @@ class Je {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== m && Se(this._$AH) ? this._$AA.nextSibling.data = t : this.T(G.createTextNode(t)), this._$AH = t;
+    this._$AH !== m && Se(this._$AH) ? this._$AA.nextSibling.data = t : this.T(K.createTextNode(t)), this._$AH = t;
   }
   $(t) {
     var n;
     const { values: o, _$litType$: r } = t, i = typeof r == "number" ? this._$AC(t) : (r.el === void 0 && (r.el = Ae.createElement(Gt(r.h, r.h[0]), this.options)), r);
     if (((n = this._$AH) == null ? void 0 : n._$AD) === i) this._$AH.p(o);
     else {
-      const s = new li(i, this), c = s.u(this.options);
+      const s = new pi(i, this), c = s.u(this.options);
       s.p(o), this.T(c), this._$AH = s;
     }
   }
@@ -3040,7 +3059,7 @@ class Je {
     return o === void 0 && Ut.set(t.strings, o = new Ae(t)), o;
   }
   k(t) {
-    xt(this._$AH) || (this._$AH = [], this._$AR());
+    yt(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 Je(this.O(Ve()), this.O(Ve()), this, this.options)) : r = o[i], r._$AI(n), i++;
@@ -3049,8 +3068,8 @@ class Je {
   _$AR(t = this._$AA.nextSibling, o) {
     var r;
     for ((r = this._$AP) == null ? void 0 : r.call(this, !1, !0, o); t !== this._$AB; ) {
-      const i = Bt(t).nextSibling;
-      Bt(t).remove(), t = i;
+      const i = Rt(t).nextSibling;
+      Rt(t).remove(), t = i;
     }
   }
   setConnected(t) {
@@ -3083,7 +3102,7 @@ class Ze {
     t === m ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class pi extends Ze {
+class ci extends Ze {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -3091,7 +3110,7 @@ class pi extends Ze {
     this.element[this.name] = t === m ? void 0 : t;
   }
 }
-class ci extends Ze {
+class di extends Ze {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -3099,7 +3118,7 @@ class ci extends Ze {
     this.element.toggleAttribute(this.name, !!t && t !== m);
   }
 }
-class di extends Ze {
+class hi extends Ze {
   constructor(t, o, r, i, n) {
     super(t, o, r, i, n), this.type = 5;
   }
@@ -3131,14 +3150,14 @@ at == null || at(Ae, Je), (xe.litHtmlVersions ?? (xe.litHtmlVersions = [])).push
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const hi = (e) => e.strings === void 0;
+const ui = (e) => e.strings === void 0;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ui = { CHILD: 2 }, bi = (e) => (...t) => ({ _$litDirective$: e, values: t });
-class vi {
+const bi = { CHILD: 2 }, vi = (e) => (...t) => ({ _$litDirective$: e, values: t });
+class fi {
   constructor(t) {
   }
   get _$AU() {
@@ -3176,22 +3195,22 @@ const ye = (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), _i(t);
+    o.add(e), xi(t);
   }
 };
-function fi(e) {
+function mi(e) {
   this._$AN !== void 0 ? (Ye(this), this._$AM = e, Kt(this)) : this._$AM = e;
 }
-function mi(e, t = !1, o = 0) {
+function _i(e, t = !1, o = 0) {
   const r = this._$AH, i = this._$AN;
   if (i !== void 0 && i.size !== 0) if (t) if (Array.isArray(r)) for (let n = o; n < r.length; n++) ye(r[n], !1), Ye(r[n]);
   else r != null && (ye(r, !1), Ye(r));
   else ye(this, e);
 }
-const _i = (e) => {
-  e.type == ui.CHILD && (e._$AP ?? (e._$AP = mi), e._$AQ ?? (e._$AQ = fi));
+const xi = (e) => {
+  e.type == bi.CHILD && (e._$AP ?? (e._$AP = _i), e._$AQ ?? (e._$AQ = mi));
 };
-class xi extends vi {
+class yi extends fi {
   constructor() {
     super(...arguments), this._$AN = void 0;
   }
@@ -3203,7 +3222,7 @@ class xi extends vi {
     t !== this.isConnected && (this.isConnected = t, t ? (r = this.reconnected) == null || r.call(this) : (i = this.disconnected) == null || i.call(this)), o && (ye(this, t), Ye(this));
   }
   setValue(t) {
-    if (hi(this._$Ct)) this._$Ct._$AI(t, this);
+    if (ui(this._$Ct)) this._$Ct._$AI(t, this);
     else {
       const o = [...this._$Ct._$AH];
       o[this._$Ci] = t, this._$Ct._$AI(o, this, 0);
@@ -3219,10 +3238,10 @@ class xi extends vi {
  * Copyright 2020 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const ne = () => new yi();
-class yi {
+const ne = () => new wi();
+class wi {
 }
-const lt = /* @__PURE__ */ new WeakMap(), se = bi(class extends xi {
+const lt = /* @__PURE__ */ new WeakMap(), se = vi(class extends yi {
   render(e) {
     return m;
   }
@@ -3248,7 +3267,7 @@ const lt = /* @__PURE__ */ new WeakMap(), se = bi(class extends xi {
   reconnected() {
     this.rt(this.ct);
   }
-}), k = g`
+}), k = u`
   :host {
     display: block;
   }
@@ -3363,11 +3382,111 @@ const lt = /* @__PURE__ */ new WeakMap(), se = bi(class extends xi {
     -webkit-appearance: none;
     margin: 0;
   }
+
+  /* Toggle switch — label left, switch right. Shared by the Full Width rows
+     (button/row panels) and the schema-driven checkbox field, so boolean
+     options look the same everywhere instead of falling back to the native
+     checkbox. */
+  .toggle-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 14px;
+  }
+
+  .toggle-label {
+    font-size: 12px;
+    font-weight: 500;
+    color: var(--pigeon-text-secondary, #64748b);
+    font-family: var(--pigeon-font);
+  }
+
+  .toggle {
+    position: relative;
+    width: 40px;
+    height: 22px;
+    flex-shrink: 0;
+  }
+
+  .toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .toggle-track {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: var(--pigeon-border, #e2e8f0);
+    border-radius: 11px;
+    transition: background 0.2s ease;
+  }
+
+  .toggle-track::after {
+    content: '';
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    left: 2px;
+    top: 2px;
+    background: white;
+    border-radius: 50%;
+    transition: transform 0.2s ease;
+    box-shadow: var(--pigeon-shadow-sm);
+  }
+
+  .toggle input:checked + .toggle-track {
+    background: var(--pigeon-primary, #4f46e5);
+  }
+
+  .toggle input:checked + .toggle-track::after {
+    transform: translateX(18px);
+  }
+
+  .toggle input:focus-visible + .toggle-track {
+    box-shadow: var(--pigeon-ring-shadow);
+  }
+
+  /* Secondary action button (e.g. "Upload Image") — matches the input
+     chrome so panel actions don't read as unstyled native buttons. */
+  .btn-secondary {
+    height: 32px;
+    padding: 0 12px;
+    border: 1px solid var(--pigeon-input, #cbd5e1);
+    border-radius: var(--pigeon-radius-sm, 6px);
+    background: var(--pigeon-bg, #ffffff);
+    color: var(--pigeon-text, #1e293b);
+    cursor: pointer;
+    font-family: var(--pigeon-font);
+    font-size: 12px;
+    font-weight: 500;
+    transition: background 0.15s ease, border-color 0.15s ease,
+      box-shadow 0.15s ease;
+  }
+
+  .btn-secondary:hover {
+    background: var(--pigeon-surface-hover, #f1f5f9);
+    border-color: color-mix(
+      in srgb,
+      var(--pigeon-input, #cbd5e1) 60%,
+      var(--pigeon-text, #0f172a)
+    );
+  }
+
+  .btn-secondary:focus-visible {
+    outline: none;
+    border-color: var(--pigeon-ring);
+    box-shadow: var(--pigeon-ring-shadow);
+  }
 `;
-var wi = Object.defineProperty, $i = Object.getOwnPropertyDescriptor, yt = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? $i(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var $i = Object.defineProperty, ki = Object.getOwnPropertyDescriptor, wt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? ki(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && wi(t, o, i), i;
+  return r && i && $i(t, o, i), i;
 };
 let Ee = class extends h {
   constructor() {
@@ -3427,7 +3546,7 @@ let Ee = class extends h {
     }));
   }
 };
-Ee.styles = g`
+Ee.styles = u`
     :host {
       display: block;
       margin-bottom: 12px;
@@ -3490,19 +3609,19 @@ Ee.styles = g`
       height: 16px;
     }
   `;
-yt([
+wt([
   l({ type: String })
 ], Ee.prototype, "label", 2);
-yt([
+wt([
   l({ type: String })
 ], Ee.prototype, "value", 2);
-Ee = yt([
-  u("pigeon-alignment-picker")
+Ee = wt([
+  g("pigeon-alignment-picker")
 ], Ee);
-var ki = Object.defineProperty, Ci = Object.getOwnPropertyDescriptor, wt = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ci(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Ci = Object.defineProperty, Ii = Object.getOwnPropertyDescriptor, $t = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Ii(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && ki(t, o, i), i;
+  return r && i && Ci(t, o, i), i;
 };
 let je = class extends h {
   constructor() {
@@ -3510,42 +3629,47 @@ let je = class extends h {
   }
   render() {
     return a`
-      <span class="label">${this.label}</span>
-      <div class="box-model">
+      <span class="label" id="spacing-label">${this.label}</span>
+      <div class="group" role="group" aria-labelledby="spacing-label">
         <input
-          class="top"
           type="number"
           .value=${String(this.value.top)}
           min="0"
           @change=${(e) => this._onChange("top", e)}
-          title="Top"
+          title="Top (px)"
+          aria-label="Top"
         />
         <input
-          class="left"
-          type="number"
-          .value=${String(this.value.left)}
-          min="0"
-          @change=${(e) => this._onChange("left", e)}
-          title="Left"
-        />
-        <span class="center-label">px</span>
-        <input
-          class="right"
           type="number"
           .value=${String(this.value.right)}
           min="0"
           @change=${(e) => this._onChange("right", e)}
-          title="Right"
+          title="Right (px)"
+          aria-label="Right"
         />
         <input
-          class="bottom"
           type="number"
           .value=${String(this.value.bottom)}
           min="0"
           @change=${(e) => this._onChange("bottom", e)}
-          title="Bottom"
+          title="Bottom (px)"
+          aria-label="Bottom"
+        />
+        <input
+          type="number"
+          .value=${String(this.value.left)}
+          min="0"
+          @change=${(e) => this._onChange("left", e)}
+          title="Left (px)"
+          aria-label="Left"
         />
       </div>
+      <div class="sides" aria-hidden="true">
+        <span class="side">Top</span>
+        <span class="side">Right</span>
+        <span class="side">Bottom</span>
+        <span class="side">Left</span>
+      </div>
     `;
   }
   _onChange(e, t) {
@@ -3557,10 +3681,10 @@ let je = class extends h {
     }));
   }
 };
-je.styles = g`
+je.styles = u`
     :host {
       display: block;
-      margin-bottom: 12px;
+      margin-bottom: 14px;
     }
 
     .label {
@@ -3572,65 +3696,64 @@ je.styles = g`
       font-family: var(--pigeon-font);
     }
 
-    .box-model {
+    /* Four joined cells in one bordered group (Figma-style) instead of the
+       old box-model diamond — half the height, and the group reads as a
+       single control. The ring sits on the group via :focus-within. */
+    .group {
       display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
-      grid-template-rows: auto auto auto;
-      gap: 4px;
-      align-items: center;
-      justify-items: center;
-      max-width: 200px;
-    }
-
-    .top {
-      grid-column: 2;
-      grid-row: 1;
-    }
-
-    .left {
-      grid-column: 1;
-      grid-row: 2;
-    }
-
-    .center-label {
-      grid-column: 2;
-      grid-row: 2;
-      font-size: 10px;
-      color: var(--pigeon-text-secondary, #64748b);
-      font-family: var(--pigeon-font);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
+      grid-template-columns: repeat(4, 1fr);
+      border: 1px solid var(--pigeon-input, #cbd5e1);
+      border-radius: var(--pigeon-radius-sm, 6px);
+      background: var(--pigeon-bg, #ffffff);
+      overflow: hidden;
+      transition: border-color 0.15s ease, box-shadow 0.15s ease;
     }
 
-    .right {
-      grid-column: 3;
-      grid-row: 2;
+    .group:focus-within {
+      border-color: var(--pigeon-ring);
+      box-shadow: var(--pigeon-ring-shadow);
     }
 
-    .bottom {
-      grid-column: 2;
-      grid-row: 3;
+    .group:hover:not(:focus-within) {
+      border-color: color-mix(
+        in srgb,
+        var(--pigeon-input, #cbd5e1) 60%,
+        var(--pigeon-text, #0f172a)
+      );
     }
 
     input[type='number'] {
-      width: 52px;
-      height: 28px;
-      border: 1px solid var(--pigeon-input, #cbd5e1);
-      border-radius: var(--pigeon-radius-sm, 4px);
-      padding: 0 4px;
+      width: 100%;
+      height: 32px;
+      border: none;
+      outline: none;
+      padding: 0 2px;
       font-family: var(--pigeon-font-mono);
       font-size: 12px;
       color: var(--pigeon-text, #1e293b);
-      background: var(--pigeon-bg, #ffffff);
+      background: transparent;
       text-align: center;
-      outline: none;
       box-sizing: border-box;
-      transition: border-color 0.15s ease, box-shadow 0.15s ease;
     }
 
-    input[type='number']:focus-visible {
-      border-color: var(--pigeon-ring);
-      box-shadow: var(--pigeon-ring-shadow);
+    input[type='number']:not(:first-child) {
+      border-left: 1px solid var(--pigeon-border, #e2e8f0);
+    }
+
+    .sides {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      margin-top: 3px;
+    }
+
+    .side {
+      text-align: center;
+      font-size: 9px;
+      font-weight: 500;
+      letter-spacing: 0.5px;
+      text-transform: uppercase;
+      color: var(--pigeon-text-muted, #94a3b8);
+      font-family: var(--pigeon-font);
     }
 
     /* Hide spinner arrows */
@@ -3643,19 +3766,19 @@ je.styles = g`
       -moz-appearance: textfield;
     }
   `;
-wt([
+$t([
   l({ type: String })
 ], je.prototype, "label", 2);
-wt([
+$t([
   l({ type: Object })
 ], je.prototype, "value", 2);
-je = wt([
-  u("pigeon-spacing-input")
+je = $t([
+  g("pigeon-spacing-input")
 ], je);
-var Ii = Object.defineProperty, Pi = Object.getOwnPropertyDescriptor, Z = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Pi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Pi = Object.defineProperty, Oi = Object.getOwnPropertyDescriptor, Z = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Oi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Ii(t, o, i), i;
+  return r && i && Pi(t, o, i), i;
 };
 let A = class extends h {
   constructor() {
@@ -3704,7 +3827,7 @@ let A = class extends h {
     }));
   }
 };
-A.styles = g`
+A.styles = u`
     :host {
       display: block;
       margin-bottom: 12px;
@@ -3823,14 +3946,14 @@ Z([
   l({ type: String })
 ], A.prototype, "unit", 2);
 A = Z([
-  u("pigeon-slider-input")
+  g("pigeon-slider-input")
 ], A);
-var Oi = Object.defineProperty, Ti = Object.getOwnPropertyDescriptor, ue = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ti(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Ti = Object.defineProperty, Si = Object.getOwnPropertyDescriptor, ue = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Si(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Oi(t, o, i), i;
+  return r && i && Ti(t, o, i), i;
 };
-let L = class extends h {
+let H = class extends h {
   constructor() {
     super(...arguments), this.tags = [], this.open = !1, this.x = 0, this.y = 0, this._search = "";
   }
@@ -3886,7 +4009,7 @@ let L = class extends h {
     })), this.open = !1, this._search = "";
   }
 };
-L.styles = g`
+H.styles = u`
     :host {
       display: none;
     }
@@ -3979,28 +4102,28 @@ L.styles = g`
   `;
 ue([
   l({ type: Array })
-], L.prototype, "tags", 2);
+], H.prototype, "tags", 2);
 ue([
   l({ type: Boolean, reflect: !0 })
-], L.prototype, "open", 2);
+], H.prototype, "open", 2);
 ue([
   l({ type: Number })
-], L.prototype, "x", 2);
+], H.prototype, "x", 2);
 ue([
   l({ type: Number })
-], L.prototype, "y", 2);
+], H.prototype, "y", 2);
 ue([
   d()
-], L.prototype, "_search", 2);
-L = ue([
-  u("pigeon-merge-tag-picker")
-], L);
-var Si = Object.defineProperty, Di = Object.getOwnPropertyDescriptor, W = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Di(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+], H.prototype, "_search", 2);
+H = ue([
+  g("pigeon-merge-tag-picker")
+], H);
+var Di = Object.defineProperty, Ai = Object.getOwnPropertyDescriptor, V = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Ai(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Si(t, o, i), i;
+  return r && i && Di(t, o, i), i;
 };
-let I = class extends h {
+let P = class extends h {
   constructor() {
     super(...arguments), this.rowId = "", this.columnId = "", this.mergeTags = [], this._pickerOpen = !1, this._pickerX = 0, this._pickerY = 0, this._textareaRef = ne(), this._triggerRef = ne();
   }
@@ -4073,7 +4196,7 @@ let I = class extends h {
     }
   }
   _onMergeTagInsert(e) {
-    const t = uo.getActive();
+    const t = bo.getActive();
     if (t && !t.isDestroyed) {
       const b = this._extractTagName(e.detail.tag.name);
       t.chain().focus().insertContent({ type: "mergeTag", attrs: { name: b } }).run(), this._pickerOpen = !1;
@@ -4118,9 +4241,9 @@ let I = class extends h {
     this._emit({ padding: e.detail.value });
   }
 };
-I.styles = [
+P.styles = [
   k,
-  g`
+  u`
       /* Content textarea uses the monospace face so the HTML payload is
          readable to authors editing the raw markup. */
       textarea {
@@ -4163,39 +4286,39 @@ I.styles = [
       }
     `
 ];
-W([
+V([
   l({ type: Object })
-], I.prototype, "block", 2);
-W([
+], P.prototype, "block", 2);
+V([
   l({ type: String })
-], I.prototype, "rowId", 2);
-W([
+], P.prototype, "rowId", 2);
+V([
   l({ type: String })
-], I.prototype, "columnId", 2);
-W([
+], P.prototype, "columnId", 2);
+V([
   l({ type: Array })
-], I.prototype, "mergeTags", 2);
-W([
+], P.prototype, "mergeTags", 2);
+V([
   d()
-], I.prototype, "_pickerOpen", 2);
-W([
+], P.prototype, "_pickerOpen", 2);
+V([
   d()
-], I.prototype, "_pickerX", 2);
-W([
+], P.prototype, "_pickerX", 2);
+V([
   d()
-], I.prototype, "_pickerY", 2);
-I = W([
-  u("pigeon-text-panel")
-], I);
-var Ai = Object.defineProperty, Ei = Object.getOwnPropertyDescriptor, w = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ei(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+], P.prototype, "_pickerY", 2);
+P = V([
+  g("pigeon-text-panel")
+], P);
+var Ei = Object.defineProperty, ji = Object.getOwnPropertyDescriptor, w = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? ji(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Ai(t, o, i), i;
+  return r && i && Ei(t, o, i), i;
 };
-const ji = 250, Ne = "__all__";
+const Bi = 250, Ue = "__all__";
 let x = class extends h {
   constructor() {
-    super(...arguments), this.config = {}, this.open = !1, this._tab = null, this._dragOver = !1, this._uploading = !1, this._progress = 0, this._error = "", this._urlInput = "", this._folder = Ne, this._search = "", this._selectedTags = [], this._folders = [], this._assets = [], this._libraryLoading = !1, this._libraryError = "", this._searchTimer = null, this._libraryToken = 0;
+    super(...arguments), this.config = {}, this.open = !1, this._tab = null, this._dragOver = !1, this._uploading = !1, this._progress = 0, this._error = "", this._urlInput = "", this._folder = Ue, this._search = "", this._selectedTags = [], this._folders = [], this._assets = [], this._libraryLoading = !1, this._libraryError = "", this._searchTimer = null, this._libraryToken = 0;
   }
   /* ----------------------------------------------------------------- */
   /*  Lifecycle                                                        */
@@ -4257,7 +4380,7 @@ let x = class extends h {
           .value=${this._folder}
           @change=${this._onFolderChange}
         >
-          <option value=${Ne}>All folders</option>
+          <option value=${Ue}>All folders</option>
           ${this._folders.map(
       (e) => a`<option value=${e} ?selected=${this._folder === e}>${e}</option>`
     )}
@@ -4281,7 +4404,7 @@ let x = class extends h {
           </div>` : me}
       ${this._libraryError ? a`<div class="error">${this._libraryError}</div>` : me}
       ${this._libraryLoading ? a`<div class="library-spinner">Loading…</div>` : this._assets.length === 0 ? a`<div class="empty-library">
-              ${this._search || this._selectedTags.length > 0 || this._folder !== Ne ? "No assets match your filters." : "No saved assets yet. Upload one to get started."}
+              ${this._search || this._selectedTags.length > 0 || this._folder !== Ue ? "No assets match your filters." : "No saved assets yet. Upload one to get started."}
             </div>` : a`<div class="asset-grid">
               ${this._assets.map((e) => this._renderAssetCard(e))}
             </div>`}
@@ -4359,7 +4482,7 @@ let x = class extends h {
     this._libraryLoading = !0, this._libraryError = "";
     try {
       const t = await this.storage.list({
-        folder: this._folder === Ne ? void 0 : this._folder,
+        folder: this._folder === Ue ? void 0 : this._folder,
         search: this._search.trim() || void 0,
         tags: this._selectedTags.length > 0 ? this._selectedTags : void 0
       });
@@ -4384,7 +4507,7 @@ let x = class extends h {
     this._folder = e.target.value, this._loadAssets();
   }
   _onSearchInput(e) {
-    this._search = e.target.value, this._searchTimer && clearTimeout(this._searchTimer), this._searchTimer = setTimeout(() => this._loadAssets(), ji);
+    this._search = e.target.value, this._searchTimer && clearTimeout(this._searchTimer), this._searchTimer = setTimeout(() => this._loadAssets(), Bi);
   }
   _toggleTag(e) {
     this._selectedTags = this._selectedTags.includes(e) ? this._selectedTags.filter((t) => t !== e) : [...this._selectedTags, e], this._loadAssets();
@@ -4516,7 +4639,7 @@ let x = class extends h {
     ), this._close();
   }
 };
-x.styles = g`
+x.styles = u`
     :host {
       display: none;
     }
@@ -4896,12 +5019,12 @@ w([
   d()
 ], x.prototype, "_libraryError", 2);
 x = w([
-  u("pigeon-asset-manager")
+  g("pigeon-asset-manager")
 ], x);
-var Bi = Object.defineProperty, Mi = Object.getOwnPropertyDescriptor, Q = (e, t, o, r) => {
+var Ri = Object.defineProperty, Mi = Object.getOwnPropertyDescriptor, Q = (e, t, o, r) => {
   for (var i = r > 1 ? void 0 : r ? Mi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Bi(t, o, i), i;
+  return r && i && Ri(t, o, i), i;
 };
 let E = class extends h {
   constructor() {
@@ -4922,7 +5045,7 @@ let E = class extends h {
           placeholder="https://example.com/image.jpg"
           @change=${this._onSrcChange}
         />
-        ${o ? a`<button class="upload-btn" @click=${this._openAssetManager}>Upload Image</button>` : ""}
+        ${o ? a`<button class="btn-secondary upload-btn" @click=${this._openAssetManager}>Upload Image</button>` : ""}
       </div>
 
       ${o ? a`<pigeon-asset-manager
@@ -4943,12 +5066,12 @@ let E = class extends h {
       </div>
 
       <pigeon-slider-input
-        label="Width"
+        label="Width (0 = auto)"
         .value=${t}
         min=${0}
         max=${800}
         step=${1}
-        unit="px (0 = auto)"
+        unit="px"
         @slider-change=${this._onWidthChange}
       ></pigeon-slider-input>
 
@@ -5026,24 +5149,9 @@ let E = class extends h {
 };
 E.styles = [
   k,
-  g`
+  u`
     .upload-btn {
-      height: 28px;
-      padding: 0 12px;
-      border: 1px solid var(--pigeon-border, #e2e8f0);
-      border-radius: var(--pigeon-radius-sm, 4px);
-      background: var(--pigeon-surface, #f8fafc);
-      color: var(--pigeon-text, #1e293b);
-      cursor: pointer;
-      font-family: var(--pigeon-font);
-      font-size: 12px;
-      font-weight: 500;
-      margin-top: 4px;
-    }
-
-    .upload-btn:hover {
-      background: var(--pigeon-surface-hover, #f1f5f9);
-      border-color: var(--pigeon-primary, #3b82f6);
+      margin-top: 6px;
     }
   `
 ];
@@ -5066,12 +5174,12 @@ Q([
   d()
 ], E.prototype, "_assetManagerOpen", 2);
 E = Q([
-  u("pigeon-image-panel")
+  g("pigeon-image-panel")
 ], E);
-var Ri = Object.defineProperty, zi = Object.getOwnPropertyDescriptor, $t = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? zi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var zi = Object.defineProperty, Li = Object.getOwnPropertyDescriptor, kt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Li(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Ri(t, o, i), i;
+  return r && i && zi(t, o, i), i;
 };
 let Be = class extends h {
   constructor() {
@@ -5111,7 +5219,7 @@ let Be = class extends h {
     }));
   }
 };
-Be.styles = g`
+Be.styles = u`
     :host {
       display: block;
       margin-bottom: 12px;
@@ -5180,19 +5288,19 @@ Be.styles = g`
       box-shadow: var(--pigeon-ring-shadow);
     }
   `;
-$t([
+kt([
   l({ type: String })
 ], Be.prototype, "label", 2);
-$t([
+kt([
   l({ type: String })
 ], Be.prototype, "value", 2);
-Be = $t([
-  u("pigeon-color-picker")
+Be = kt([
+  g("pigeon-color-picker")
 ], Be);
-var Li = Object.defineProperty, Hi = Object.getOwnPropertyDescriptor, Qe = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Hi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Hi = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, Qe = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Ni(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Li(t, o, i), i;
+  return r && i && Hi(t, o, i), i;
 };
 let ae = class extends h {
   constructor() {
@@ -5346,69 +5454,7 @@ let ae = class extends h {
     this._emit({ innerPadding: e.detail.value });
   }
 };
-ae.styles = [
-  k,
-  g`
-    .toggle-row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: 12px;
-    }
-
-    .toggle-label {
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--pigeon-text-secondary, #64748b);
-      font-family: var(--pigeon-font);
-    }
-
-    .toggle {
-      position: relative;
-      width: 40px;
-      height: 22px;
-    }
-
-    .toggle input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-
-    .toggle-track {
-      position: absolute;
-      cursor: pointer;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: var(--pigeon-border, #e2e8f0);
-      border-radius: 11px;
-      transition: background 0.2s ease;
-    }
-
-    .toggle-track::after {
-      content: '';
-      position: absolute;
-      width: 18px;
-      height: 18px;
-      left: 2px;
-      top: 2px;
-      background: white;
-      border-radius: 50%;
-      transition: transform 0.2s ease;
-      box-shadow: var(--pigeon-shadow-sm);
-    }
-
-    .toggle input:checked + .toggle-track {
-      background: var(--pigeon-primary, #3b82f6);
-    }
-
-    .toggle input:checked + .toggle-track::after {
-      transform: translateX(18px);
-    }
-  `
-];
+ae.styles = k;
 Qe([
   l({ type: Object })
 ], ae.prototype, "block", 2);
@@ -5419,10 +5465,10 @@ Qe([
   l({ type: String })
 ], ae.prototype, "columnId", 2);
 ae = Qe([
-  u("pigeon-button-panel")
+  g("pigeon-button-panel")
 ], ae);
-var Ui = Object.defineProperty, Ni = Object.getOwnPropertyDescriptor, Jt = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ni(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Ui = Object.defineProperty, Fi = Object.getOwnPropertyDescriptor, Jt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Fi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
   return r && i && Ui(t, o, i), i;
 };
@@ -5547,7 +5593,7 @@ let qe = class extends h {
 };
 qe.styles = [
   k,
-  g`
+  u`
       .hint {
         margin: 4px 0 0;
         font-size: 11px;
@@ -5564,65 +5610,6 @@ qe.styles = [
         border-radius: 3px;
       }
 
-        .toggle-row {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        margin-bottom: 14px;
-      }
-
-      .toggle-label {
-        font-size: 12px;
-        font-weight: 500;
-        color: var(--pigeon-text-secondary, #64748b);
-        font-family: var(--pigeon-font);
-      }
-
-      .toggle {
-        position: relative;
-        width: 40px;
-        height: 22px;
-      }
-
-      .toggle input {
-        opacity: 0;
-        width: 0;
-        height: 0;
-      }
-
-      .toggle-track {
-        position: absolute;
-        cursor: pointer;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        background: var(--pigeon-border, #e2e8f0);
-        border-radius: 11px;
-        transition: background 0.2s ease;
-      }
-
-      .toggle-track::after {
-        content: '';
-        position: absolute;
-        width: 18px;
-        height: 18px;
-        left: 2px;
-        top: 2px;
-        background: white;
-        border-radius: 50%;
-        transition: transform 0.2s ease;
-        box-shadow: var(--pigeon-shadow-sm);
-      }
-
-      .toggle input:checked + .toggle-track {
-        background: var(--pigeon-primary, #4f46e5);
-      }
-
-      .toggle input:checked + .toggle-track::after {
-        transform: translateX(18px);
-      }
-
       .section-label {
         display: block;
         font-size: 12px;
@@ -5679,14 +5666,14 @@ Jt([
   l({ type: Object })
 ], qe.prototype, "row", 2);
 qe = Jt([
-  u("pigeon-row-panel")
+  g("pigeon-row-panel")
 ], qe);
-var Fi = Object.defineProperty, Wi = Object.getOwnPropertyDescriptor, be = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Wi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Wi = Object.defineProperty, Vi = Object.getOwnPropertyDescriptor, be = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Vi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Fi(t, o, i), i;
+  return r && i && Wi(t, o, i), i;
 };
-let H = class extends h {
+let N = class extends h {
   constructor() {
     super(...arguments), this.mergeTags = [], this._pickerOpen = !1, this._pickerX = 0, this._pickerY = 0, this._previewInputRef = ne(), this._triggerRef = ne(), this._fontFamilies = [
       "Arial, Helvetica, sans-serif",
@@ -5824,9 +5811,9 @@ let H = class extends h {
     this._emit({ metaField: "previewText", value: e.target.value });
   }
 };
-H.styles = [
+N.styles = [
   k,
-  g`
+  u`
       .alignment-buttons {
         display: flex;
         gap: 0;
@@ -5900,26 +5887,26 @@ H.styles = [
 ];
 be([
   l({ type: Object })
-], H.prototype, "doc", 2);
+], N.prototype, "doc", 2);
 be([
   l({ type: Array })
-], H.prototype, "mergeTags", 2);
+], N.prototype, "mergeTags", 2);
 be([
   d()
-], H.prototype, "_pickerOpen", 2);
+], N.prototype, "_pickerOpen", 2);
 be([
   d()
-], H.prototype, "_pickerX", 2);
+], N.prototype, "_pickerX", 2);
 be([
   d()
-], H.prototype, "_pickerY", 2);
-H = be([
-  u("pigeon-body-panel")
-], H);
-var Vi = Object.defineProperty, Yi = Object.getOwnPropertyDescriptor, ee = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Yi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+], N.prototype, "_pickerY", 2);
+N = be([
+  g("pigeon-body-panel")
+], N);
+var Yi = Object.defineProperty, qi = Object.getOwnPropertyDescriptor, ee = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? qi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Vi(t, o, i), i;
+  return r && i && Yi(t, o, i), i;
 };
 let j = class extends h {
   constructor() {
@@ -6093,12 +6080,12 @@ ee([
   d()
 ], j.prototype, "_assetManagerOpen", 2);
 j = ee([
-  u("pigeon-hero-panel")
+  g("pigeon-hero-panel")
 ], j);
-var qi = Object.defineProperty, Xi = Object.getOwnPropertyDescriptor, et = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Xi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Xi = Object.defineProperty, Gi = Object.getOwnPropertyDescriptor, et = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Gi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && qi(t, o, i), i;
+  return r && i && Xi(t, o, i), i;
 };
 let le = class extends h {
   constructor() {
@@ -6238,7 +6225,7 @@ let le = class extends h {
 };
 le.styles = [
   k,
-  g`
+  u`
       h4 {
         margin: 0 0 8px;
         font-size: 12px;
@@ -6306,12 +6293,12 @@ et([
   l({ type: String })
 ], le.prototype, "columnId", 2);
 le = et([
-  u("pigeon-navbar-panel")
+  g("pigeon-navbar-panel")
 ], le);
-var Gi = Object.defineProperty, Ki = Object.getOwnPropertyDescriptor, tt = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Ki(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Ki = Object.defineProperty, Ji = Object.getOwnPropertyDescriptor, tt = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Ji(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Gi(t, o, i), i;
+  return r && i && Ki(t, o, i), i;
 };
 let pe = class extends h {
   constructor() {
@@ -6404,12 +6391,12 @@ tt([
   l({ type: String })
 ], pe.prototype, "columnId", 2);
 pe = tt([
-  u("pigeon-divider-panel")
+  g("pigeon-divider-panel")
 ], pe);
-var Ji = Object.defineProperty, Zi = Object.getOwnPropertyDescriptor, ot = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? Zi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var Zi = Object.defineProperty, Qi = Object.getOwnPropertyDescriptor, ot = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? Qi(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Ji(t, o, i), i;
+  return r && i && Zi(t, o, i), i;
 };
 let ce = class extends h {
   constructor() {
@@ -6459,14 +6446,14 @@ ot([
   l({ type: String })
 ], ce.prototype, "columnId", 2);
 ce = ot([
-  u("pigeon-spacer-panel")
+  g("pigeon-spacer-panel")
 ], ce);
-var Qi = Object.defineProperty, er = Object.getOwnPropertyDescriptor, it = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? er(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var er = Object.defineProperty, tr = Object.getOwnPropertyDescriptor, it = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? tr(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && Qi(t, o, i), i;
+  return r && i && er(t, o, i), i;
 };
-const tr = [
+const or = [
   "facebook",
   "twitter",
   "instagram",
@@ -6495,7 +6482,7 @@ let de = class extends h {
           <div class="field">
             <label>Network</label>
             <select @change=${(r) => this._onIconTypeChange(o, r)}>
-              ${tr.map((r) => a`
+              ${or.map((r) => a`
                 <option value=${r} ?selected=${t.type === r}>${r}</option>
               `)}
             </select>
@@ -6621,7 +6608,7 @@ let de = class extends h {
 };
 de.styles = [
   k,
-  g`
+  u`
       h4 {
         margin: 0 0 8px;
         font-size: 12px;
@@ -6689,14 +6676,14 @@ it([
   l({ type: String })
 ], de.prototype, "columnId", 2);
 de = it([
-  u("pigeon-social-panel")
+  g("pigeon-social-panel")
 ], de);
-var or = Object.defineProperty, ir = Object.getOwnPropertyDescriptor, V = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? ir(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var ir = Object.defineProperty, rr = Object.getOwnPropertyDescriptor, Y = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? rr(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && or(t, o, i), i;
+  return r && i && ir(t, o, i), i;
 };
-let P = class extends h {
+let O = class extends h {
   constructor() {
     super(...arguments), this.rowId = "", this.columnId = "", this.mergeTags = [], this._pickerOpen = !1, this._pickerX = 0, this._pickerY = 0, this._textareaRef = ne(), this._triggerRef = ne();
   }
@@ -6776,9 +6763,9 @@ let P = class extends h {
     t.setSelectionRange(c, c), t.focus(), this._emit({ content: s }), this._pickerOpen = !1;
   }
 };
-P.styles = [
+O.styles = [
   k,
-  g`
+  u`
       /* HTML payload is raw markup — show in monospace and taller than the
          default textarea so authors have room to work. */
       textarea {
@@ -6821,34 +6808,34 @@ P.styles = [
       }
     `
 ];
-V([
+Y([
   l({ type: Object })
-], P.prototype, "block", 2);
-V([
+], O.prototype, "block", 2);
+Y([
   l({ type: String })
-], P.prototype, "rowId", 2);
-V([
+], O.prototype, "rowId", 2);
+Y([
   l({ type: String })
-], P.prototype, "columnId", 2);
-V([
+], O.prototype, "columnId", 2);
+Y([
   l({ type: Array })
-], P.prototype, "mergeTags", 2);
-V([
+], O.prototype, "mergeTags", 2);
+Y([
   d()
-], P.prototype, "_pickerOpen", 2);
-V([
+], O.prototype, "_pickerOpen", 2);
+Y([
   d()
-], P.prototype, "_pickerX", 2);
-V([
+], O.prototype, "_pickerX", 2);
+Y([
   d()
-], P.prototype, "_pickerY", 2);
-P = V([
-  u("pigeon-html-panel")
-], P);
-var rr = Object.defineProperty, nr = Object.getOwnPropertyDescriptor, ve = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? nr(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+], O.prototype, "_pickerY", 2);
+O = Y([
+  g("pigeon-html-panel")
+], O);
+var nr = Object.defineProperty, sr = Object.getOwnPropertyDescriptor, ve = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? sr(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && rr(t, o, i), i;
+  return r && i && nr(t, o, i), i;
 };
 let U = class extends h {
   constructor() {
@@ -6901,14 +6888,17 @@ let U = class extends h {
         `;
       case "checkbox":
         return a`
-          <div class="field checkbox-row">
-            <input
-              id=${e.key}
-              type="checkbox"
-              .checked=${!!t}
-              @change=${(o) => this._emit(e.key, o.target.checked)}
-            />
-            <label for=${e.key}>${e.label}</label>
+          <div class="toggle-row">
+            <label class="toggle-label" for=${e.key}>${e.label}</label>
+            <label class="toggle">
+              <input
+                id=${e.key}
+                type="checkbox"
+                .checked=${!!t}
+                @change=${(o) => this._emit(e.key, o.target.checked)}
+              />
+              <span class="toggle-track"></span>
+            </label>
           </div>
         `;
       case "select":
@@ -6957,24 +6947,7 @@ let U = class extends h {
     );
   }
 };
-U.styles = [
-  k,
-  g`
-      :host {
-        display: block;
-      }
-
-      .checkbox-row {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-      }
-
-      .checkbox-row label {
-        margin-bottom: 0;
-      }
-    `
-];
+U.styles = k;
 ve([
   l({ type: Object })
 ], U.prototype, "block", 2);
@@ -6991,14 +6964,14 @@ ve([
   l({ type: Array })
 ], U.prototype, "schema", 2);
 U = ve([
-  u("pigeon-custom-panel")
+  g("pigeon-custom-panel")
 ], U);
-var sr = Object.defineProperty, ar = Object.getOwnPropertyDescriptor, fe = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? ar(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var ar = Object.defineProperty, lr = Object.getOwnPropertyDescriptor, fe = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? lr(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && sr(t, o, i), i;
+  return r && i && ar(t, o, i), i;
 };
-let N = class extends h {
+let F = class extends h {
   constructor() {
     super(...arguments), this.selection = null, this.mergeTags = [];
   }
@@ -7024,12 +6997,14 @@ let N = class extends h {
       if (e)
         return a`
           <div class="panel-wrapper" part="panel">
+            ${this._renderBreadcrumb(this.selection.rowId, this.selection.columnId, this._blockLabel(e))}
             ${this._renderBlockPanel(e, this.selection.rowId, this.selection.columnId)}
           </div>
         `;
     }
     return this.selection.type === "column" ? a`
         <div class="panel-wrapper" part="panel">
+          ${this.selection.rowId && this.selection.columnId ? this._renderBreadcrumb(this.selection.rowId, this.selection.columnId) : ""}
           <div class="empty-state">
             <p>Column selected. Select a block within the column to edit its properties.</p>
           </div>
@@ -7045,6 +7020,51 @@ let N = class extends h {
       </div>
     `;
   }
+  /**
+   * Renders the parent-selection trail. `Row` is always a clickable jump to
+   * the parent row. When a block is selected (`current` set), `Column` is also
+   * clickable and the block label is the trailing, non-interactive crumb. For
+   * a column selection (`current` omitted) `Column` is the trailing crumb.
+   */
+  _renderBreadcrumb(e, t, o) {
+    return a`
+      <nav class="breadcrumb" aria-label="Selection path">
+        <button class="crumb" title="Select row" @click=${() => this._select("row-select", { rowId: e })}>
+          Row
+        </button>
+        ${t ? a`
+              <span class="sep" aria-hidden="true">▸</span>
+              ${o ? a`<button
+                    class="crumb"
+                    title="Select column"
+                    @click=${() => this._select("column-select", { rowId: e, columnId: t })}
+                  >
+                    Column
+                  </button>` : a`<span class="crumb current">Column</span>`}
+            ` : ""}
+        ${o ? a`<span class="sep" aria-hidden="true">▸</span>
+              <span class="crumb current">${o}</span>` : ""}
+      </nav>
+    `;
+  }
+  _select(e, t) {
+    this.dispatchEvent(new CustomEvent(e, { detail: t, bubbles: !0, composed: !0 }));
+  }
+  _blockLabel(e) {
+    var r;
+    const t = {
+      text: "Text",
+      image: "Image",
+      button: "Button",
+      divider: "Divider",
+      spacer: "Spacer",
+      social: "Social",
+      html: "HTML",
+      hero: "Hero",
+      navbar: "Navbar"
+    }, o = e.type;
+    return t[o] ?? ((r = ct(o)) == null ? void 0 : r.label) ?? o;
+  }
   _renderBlockPanel(e, t, o) {
     switch (e.type) {
       case "text":
@@ -7078,7 +7098,7 @@ let N = class extends h {
       case "html":
         return a`<pigeon-html-panel .block=${e} .rowId=${t} .columnId=${o} .mergeTags=${this.mergeTags}></pigeon-html-panel>`;
       default: {
-        const r = e.type ?? "unknown", i = Nt(r);
+        const r = e.type ?? "unknown", i = ct(r);
         return i != null && i.propertySchema && i.propertySchema.length > 0 ? a`<pigeon-custom-panel
             .block=${e}
             .rowId=${t}
@@ -7107,7 +7127,7 @@ let N = class extends h {
       return i.blocks.find((n) => n.id === o);
   }
 };
-N.styles = g`
+F.styles = u`
     :host {
       display: block;
       width: var(--pigeon-properties-width, 300px);
@@ -7122,6 +7142,49 @@ N.styles = g`
       padding: 16px;
     }
 
+    /* Parent-selection breadcrumb shown above block/column panels so the
+       row (and column) that contain the selected block are always reachable
+       in one click — clicking a block on the canvas selects the block, and
+       this trail is how you step back out to its parent. */
+    .breadcrumb {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      gap: 2px;
+      margin-bottom: 12px;
+      font-family: var(--pigeon-font);
+      font-size: 11px;
+    }
+
+    .breadcrumb .crumb {
+      background: none;
+      border: none;
+      padding: 2px 6px;
+      border-radius: var(--pigeon-radius-sm, 4px);
+      color: var(--pigeon-primary, #4f46e5);
+      cursor: pointer;
+      font: inherit;
+      font-weight: 500;
+    }
+
+    .breadcrumb .crumb:hover {
+      background: var(--pigeon-surface-hover, #f1f5f9);
+    }
+
+    .breadcrumb .crumb.current {
+      color: var(--pigeon-text-secondary, #64748b);
+      cursor: default;
+    }
+
+    .breadcrumb .crumb.current:hover {
+      background: none;
+    }
+
+    .breadcrumb .sep {
+      color: var(--pigeon-text-muted, #94a3b8);
+      font-size: 10px;
+    }
+
     .empty-state {
       display: flex;
       flex-direction: column;
@@ -7149,26 +7212,26 @@ N.styles = g`
   `;
 fe([
   l({ type: Object })
-], N.prototype, "doc", 2);
+], F.prototype, "doc", 2);
 fe([
   l({ type: Object })
-], N.prototype, "selection", 2);
+], F.prototype, "selection", 2);
 fe([
   l({ type: Array })
-], N.prototype, "mergeTags", 2);
+], F.prototype, "mergeTags", 2);
 fe([
   l({ attribute: !1 })
-], N.prototype, "assetManagerConfig", 2);
+], F.prototype, "assetManagerConfig", 2);
 fe([
   l({ attribute: !1 })
-], N.prototype, "assetStorage", 2);
-N = fe([
-  u("pigeon-properties")
-], N);
-var lr = Object.defineProperty, pr = Object.getOwnPropertyDescriptor, O = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? pr(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+], F.prototype, "assetStorage", 2);
+F = fe([
+  g("pigeon-properties")
+], F);
+var pr = Object.defineProperty, cr = Object.getOwnPropertyDescriptor, T = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? cr(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && lr(t, o, i), i;
+  return r && i && pr(t, o, i), i;
 };
 let $ = class extends h {
   constructor() {
@@ -7287,7 +7350,7 @@ let $ = class extends h {
     this.open = !1;
   }
 };
-$.styles = g`
+$.styles = u`
     :host {
       display: none;
     }
@@ -7464,46 +7527,46 @@ $.styles = g`
       font-size: 14px;
     }
   `;
-O([
+T([
   l({ type: Object })
 ], $.prototype, "renderer", 2);
-O([
+T([
   l({ type: Object })
 ], $.prototype, "doc", 2);
-O([
+T([
   l({ type: Object })
 ], $.prototype, "documentToMjml", 2);
-O([
+T([
   l({ type: Boolean, reflect: !0 })
 ], $.prototype, "open", 2);
-O([
+T([
   d()
 ], $.prototype, "_viewMode", 2);
-O([
+T([
   d()
 ], $.prototype, "_device", 2);
-O([
+T([
   d()
 ], $.prototype, "_htmlContent", 2);
-O([
+T([
   d()
 ], $.prototype, "_mjmlContent", 2);
-O([
+T([
   d()
 ], $.prototype, "_loading", 2);
-$ = O([
-  u("pigeon-preview")
+$ = T([
+  g("pigeon-preview")
 ], $);
-var cr = Object.defineProperty, dr = Object.getOwnPropertyDescriptor, y = (e, t, o, r) => {
-  for (var i = r > 1 ? void 0 : r ? dr(t, o) : t, n = e.length - 1, s; n >= 0; n--)
+var dr = Object.defineProperty, hr = Object.getOwnPropertyDescriptor, y = (e, t, o, r) => {
+  for (var i = r > 1 ? void 0 : r ? hr(t, o) : t, n = e.length - 1, s; n >= 0; n--)
     (s = e[n]) && (i = (r ? s(t, o, i) : s(i)) || i);
-  return r && i && cr(t, o, i), i;
+  return r && i && dr(t, o, i), i;
 };
 let pt = null;
 function gr() {
   return pt || (pt = import("./templates.js")), pt;
 }
-function hr(e) {
+function ur(e) {
   return e.toLowerCase().normalize("NFKD").replace(/[̀-ͯ]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "") || `template-${Date.now()}`;
 }
 let _ = class extends h {
@@ -7523,16 +7586,16 @@ let _ = class extends h {
       }
       if (e.key === "Escape") {
         const r = this._state.createTransaction();
-        r.setSelection(kt()), this._dispatch(r);
+        r.setSelection(Ct()), this._dispatch(r);
         return;
       }
       if (o) {
         if (e.key === "Delete" || e.key === "Backspace") {
-          o.type === "block" && o.rowId && o.columnId && o.blockId ? (e.preventDefault(), Qt(o.rowId, o.columnId, o.blockId)(this._state, this._dispatch)) : o.type === "row" && o.rowId && (e.preventDefault(), Ct(o.rowId)(this._state, this._dispatch));
+          o.type === "block" && o.rowId && o.columnId && o.blockId ? (e.preventDefault(), Qt(o.rowId, o.columnId, o.blockId)(this._state, this._dispatch)) : o.type === "row" && o.rowId && (e.preventDefault(), It(o.rowId)(this._state, this._dispatch));
           return;
         }
         if (t && e.key.toLowerCase() === "d") {
-          o.type === "block" && o.rowId && o.columnId && o.blockId ? (e.preventDefault(), eo(o.rowId, o.columnId, o.blockId)(this._state, this._dispatch)) : o.type === "row" && o.rowId && (e.preventDefault(), It(o.rowId)(this._state, this._dispatch));
+          o.type === "block" && o.rowId && o.columnId && o.blockId ? (e.preventDefault(), eo(o.rowId, o.columnId, o.blockId)(this._state, this._dispatch)) : o.type === "row" && o.rowId && (e.preventDefault(), Pt(o.rowId)(this._state, this._dispatch));
           return;
         }
         if (e.key === "ArrowDown" || e.key === "ArrowUp") {
@@ -7552,13 +7615,13 @@ let _ = class extends h {
           if (o.type === "block" && o.rowId && o.columnId && o.blockId) {
             e.preventDefault();
             const r = structuredClone(this._clipboard);
-            r.id = Pt();
+            r.id = Ot();
             const i = this._findBlockIndex(o.rowId, o.columnId, o.blockId), n = i >= 0 ? i + 1 : void 0;
             ze(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 = Pt(), ze(o.rowId, o.columnId, r)(this._state, this._dispatch);
+            r.id = Ot(), ze(o.rowId, o.columnId, r)(this._state, this._dispatch);
           }
           return;
         }
@@ -7601,9 +7664,9 @@ let _ = class extends h {
   }
   /** Replaces the document entirely (resets history). */
   loadDocument(e) {
-    this._state = Ot.create({
+    this._state = Tt.create({
       doc: e,
-      plugins: [Tt()],
+      plugins: [St()],
       ...this.config
     }), this._syncHistoryFlags(), this.requestUpdate(), this._fireChange();
   }
@@ -7707,6 +7770,8 @@ let _ = class extends h {
           @row-property-change=${this._handleRowPropertyChange}
           @row-layout-change=${this._handleRowLayoutChange}
           @body-property-change=${this._handleBodyPropertyChange}
+          @row-select=${this._handleRowSelect}
+          @column-select=${this._handleColumnSelect}
         ></pigeon-properties>
       </div>
 
@@ -7749,7 +7814,7 @@ let _ = class extends h {
   async _handleTemplateSave(e) {
     e.stopPropagation();
     const { name: t, description: o, category: r } = e.detail, i = this._resolveTemplateStorage(), n = (/* @__PURE__ */ new Date()).toISOString(), s = {
-      id: hr(t),
+      id: ur(t),
       name: t,
       description: o,
       category: r,
@@ -7768,10 +7833,10 @@ let _ = class extends h {
   /* ------------------------------------------------------------------ */
   _initState() {
     const e = this.document ?? ro(), t = this.config.plugins ?? [];
-    t.some((r) => r.name === St) || t.unshift(Tt()), this._state = Ot.create({ doc: e, plugins: t }), this._syncHistoryFlags();
+    t.some((r) => r.name === Dt) || t.unshift(St()), this._state = Tt.create({ doc: e, plugins: t }), this._syncHistoryFlags();
   }
   _syncHistoryFlags() {
-    const e = this._state.getPluginState(St);
+    const e = this._state.getPluginState(Dt);
     this._canUndo = e ? no(e) : !1, this._canRedo = e ? so(e) : !1;
   }
   /* ------------------------------------------------------------------ */
@@ -7855,7 +7920,7 @@ let _ = class extends h {
           const r = o.blocks.find((n) => n.id === e.detail.blockId);
           if (!r) continue;
           const i = r.values.content;
-          typeof i == "string" && i !== e.detail.content && Dt(t.id, o.id, r.id, { content: e.detail.content })(this._state, this._dispatch), this._editingBlockId = null;
+          typeof i == "string" && i !== e.detail.content && At(t.id, o.id, r.id, { content: e.detail.content })(this._state, this._dispatch), this._editingBlockId = null;
           return;
         }
       this._editingBlockId = null;
@@ -7873,25 +7938,31 @@ let _ = class extends h {
         }
   }
   _handleRowSelect(e) {
+    this._editingBlockId = null;
+    const t = this._state.createTransaction();
+    t.setSelection(Et(e.detail.rowId)), this._dispatch(t);
+  }
+  _handleColumnSelect(e) {
+    this._editingBlockId = null;
     const t = this._state.createTransaction();
-    t.setSelection(At(e.detail.rowId)), this._dispatch(t);
+    t.setSelection(ao(e.detail.rowId, e.detail.columnId)), this._dispatch(t);
   }
   _handleBodySelect() {
     this._editingBlockId = null;
     const e = this._state.createTransaction();
-    e.setSelection(kt()), this._dispatch(e);
+    e.setSelection(Ct()), this._dispatch(e);
   }
   /* ------------------------------------------------------------------ */
   /*  Row action handlers                                                */
   /* ------------------------------------------------------------------ */
   _handleRowMove(e) {
-    ao(e.detail.rowId, e.detail.toIndex)(this._state, this._dispatch);
+    lo(e.detail.rowId, e.detail.toIndex)(this._state, this._dispatch);
   }
   _handleRowDuplicate(e) {
-    It(e.detail.rowId)(this._state, this._dispatch);
+    Pt(e.detail.rowId)(this._state, this._dispatch);
   }
   _handleRowDelete(e) {
-    Ct(e.detail.rowId)(this._state, this._dispatch);
+    It(e.detail.rowId)(this._state, this._dispatch);
   }
   /* ------------------------------------------------------------------ */
   /*  Keyboard shortcuts                                                 */
@@ -7936,7 +8007,7 @@ let _ = class extends h {
     const i = r + e;
     if (i < 0 || i >= o.length) return;
     const n = this._state.createTransaction();
-    n.setSelection(At(o[i].id)), this._dispatch(n);
+    n.setSelection(Et(o[i].id)), this._dispatch(n);
   }
   _findBlock(e, t, o) {
     const r = this._state.doc.body.rows.find((n) => n.id === e);
@@ -7956,14 +8027,14 @@ let _ = class extends h {
   /* ------------------------------------------------------------------ */
   _handleRowDrop(e) {
     const { index: t, columnCount: o } = e.detail, r = Array.from({ length: o }, () => Le()), i = He(r);
-    Ue(i, t)(this._state, this._dispatch);
+    Ne(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 = nt(i.blockType);
       ze(t, o, n, r)(this._state, this._dispatch);
-    } else i.type === "existing-block" && i.blockId && i.rowId && i.columnId && lo(
+    } else i.type === "existing-block" && i.blockId && i.rowId && i.columnId && po(
       i.rowId,
       i.columnId,
       i.blockId,
@@ -7974,7 +8045,7 @@ let _ = class extends h {
   }
   _handleBlockDropNewRow(e) {
     const { blockType: t, rowIndex: o } = e.detail, r = nt(t), i = Le([r]), n = He([i]);
-    Ue(n, o)(this._state, this._dispatch);
+    Ne(n, o)(this._state, this._dispatch);
   }
   /**
    * Keyboard equivalent of dragging a palette item onto the canvas: append the
@@ -7985,7 +8056,7 @@ let _ = class extends h {
     const { type: t, blockType: o, columnCount: r } = e.detail, i = this._state.doc.body.rows;
     if (t === "palette-row") {
       const s = Array.from({ length: r }, () => Le());
-      Ue(He(s), i.length)(this._state, this._dispatch);
+      Ne(He(s), i.length)(this._state, this._dispatch);
       return;
     }
     if (!o) return;
@@ -7998,7 +8069,7 @@ let _ = class extends h {
       );
     } else {
       const s = Le([n]);
-      Ue(He([s]), 0)(this._state, this._dispatch);
+      Ne(He([s]), 0)(this._state, this._dispatch);
     }
   }
   /* ------------------------------------------------------------------ */
@@ -8006,11 +8077,11 @@ let _ = class extends h {
   /* ------------------------------------------------------------------ */
   _handlePropertyChange(e) {
     const { rowId: t, columnId: o, blockId: r, values: i } = e.detail;
-    Dt(t, o, r, i)(this._state, this._dispatch);
+    At(t, o, r, i)(this._state, this._dispatch);
   }
   _handleRowPropertyChange(e) {
     const { rowId: t, attributes: o } = e.detail;
-    po(t, o)(this._state, this._dispatch);
+    co(t, o)(this._state, this._dispatch);
   }
   _handleRowLayoutChange(e) {
     const { rowId: t, ratios: o, columnCount: r } = e.detail, i = this._state.doc.body.rows.find((p) => p.id === t);
@@ -8018,7 +8089,7 @@ let _ = class extends h {
     const n = i.columns.length, s = r;
     if (s > n)
       for (let p = 0; p < s - n; p++)
-        co(t)(this._state, this._dispatch);
+        ho(t)(this._state, this._dispatch);
     else if (s < n)
       for (let p = 0; p < n - s; p++) {
         const b = this._state.doc.body.rows.find((f) => f.id === t);
@@ -8028,12 +8099,12 @@ let _ = class extends h {
         }
       }
     const c = this._state.doc.body.rows.find((p) => p.id === t);
-    c && c.columns.length === o.length && ho(t, o)(this._state, this._dispatch);
+    c && c.columns.length === o.length && uo(t, o)(this._state, this._dispatch);
   }
   _handleBodyPropertyChange(e) {
     const { attribute: t, metaField: o, value: r } = e.detail, i = this._state.createTransaction();
     if (t) {
-      const s = this._state.doc.body.attributes[t], c = Et(
+      const s = this._state.doc.body.attributes[t], c = jt(
         "updateBodyAttribute",
         `body.attributes.${t}`,
         (p) => {
@@ -8046,7 +8117,7 @@ let _ = class extends h {
       i.addStep(c);
     }
     if (o) {
-      const s = this._state.doc.metadata[o], c = Et(
+      const s = this._state.doc.metadata[o], c = jt(
         "updateMetadata",
         `metadata.${o}`,
         (p) => {
@@ -8062,8 +8133,8 @@ let _ = class extends h {
   }
 };
 _.styles = [
-  bo,
-  g`
+  vo,
+  u`
       :host {
         display: flex;
         flex-direction: column;
@@ -8141,17 +8212,17 @@ y([
   d()
 ], _.prototype, "_editingBlockId", 2);
 _ = y([
-  u("pigeon-editor")
+  g("pigeon-editor")
 ], _);
 export {
   Ee as PigeonAlignmentPicker,
   x as PigeonAssetManager,
-  H as PigeonBodyPanel,
+  N as PigeonBodyPanel,
   oe as PigeonButtonBlock,
   ae as PigeonButtonPanel,
   C as PigeonCanvas,
   Be as PigeonColorPicker,
-  S as PigeonColumn,
+  D as PigeonColumn,
   Ce as PigeonDividerBlock,
   Fe as PigeonDropIndicator,
   _ as PigeonEditor,
@@ -8161,28 +8232,28 @@ export {
   ke as PigeonImageBlock,
   E as PigeonImagePanel,
   $e as PigeonLayers,
-  L as PigeonMergeTagPicker,
+  H as PigeonMergeTagPicker,
   Te as PigeonNavBarBlock,
   le as PigeonNavBarPanel,
-  X as PigeonPalette,
-  z as PigeonPaletteItem,
+  G as PigeonPalette,
+  L as PigeonPaletteItem,
   $ as PigeonPreview,
-  N as PigeonProperties,
-  D as PigeonRow,
+  F as PigeonProperties,
+  I as PigeonRow,
   qe as PigeonRowPanel,
   A as PigeonSliderInput,
   Pe as PigeonSocialBlock,
   Ie as PigeonSpacerBlock,
   je as PigeonSpacingInput,
-  wr as PigeonTemplatePicker,
+  $r as PigeonTemplatePicker,
   te as PigeonTextBlock,
-  I as PigeonTextPanel,
-  R as PigeonToolbar,
-  To as calculateBlockDropIndex,
-  Oo as calculateRowDropIndex,
+  P as PigeonTextPanel,
+  z as PigeonToolbar,
+  So as calculateBlockDropIndex,
+  To as calculateRowDropIndex,
   gt as clearDragData,
   we as getDragData,
-  _r as readDragTransfer,
-  mo as setDragData,
+  xr as readDragTransfer,
+  _o as setDragData,
   Wt as writeDragTransfer
 };