@improba/page-builder 0.1.0

package/dist/index.js

@@ -0,0 +1,4477 @@
+var zn = Object.defineProperty;
+var jn = (t, r, n) => r in t ? zn(t, r, { enumerable: !0, configurable: !0, writable: !0, value: n }) : t[r] = n;
+var Dt = (t, r, n) => jn(t, typeof r != "symbol" ? r + "" : r, n);
+import { defineComponent as G, computed as N, openBlock as x, createElementBlock as C, normalizeStyle as J, renderSlot as Ze, createBlock as Se, resolveDynamicComponent as Mt, createCommentVNode as Y, createElementVNode as S, inject as je, ref as R, onErrorCaptured as Hn, toDisplayString as z, resolveComponent as Wn, withCtx as Pt, normalizeProps as Un, guardReactiveProps as Kn, createSlots as Fn, renderList as ve, Fragment as he, watch as de, createVNode as Re, reactive as $n, toRefs as Gn, toRaw as qn, nextTick as ue, normalizeClass as _e, withDirectives as Yn, vModelText as Xn, useAttrs as dt, mergeProps as He, onMounted as Ot, onBeforeUnmount as dn, withModifiers as Et, render as Zt, h as Zn, onUnmounted as Jn, provide as qe } from "vue";
+class cn extends Error {
+  constructor(n, e, o = {}) {
+    super(e);
+    Dt(this, "code");
+    Dt(this, "details");
+    this.name = "PageBuilderError", this.code = n, this.details = o.details ?? {}, this.cause = o.cause;
+  }
+}
+function Qn(t) {
+  return t instanceof cn;
+}
+function Z(t, r, n = {}) {
+  return new cn(t, r, n);
+}
+function Bt(t) {
+  return t instanceof Error ? t.message : String(t);
+}
+function Ue(t, r, n) {
+  const e = Qn(r) ? r : Z("UNKNOWN", Bt(r), {
+    cause: r,
+    details: n
+  }), o = n ? {
+    ...e.details,
+    ...n
+  } : e.details;
+  console.error(`[PageBuilder][${t}] ${e.message}`, {
+    code: e.code,
+    details: o,
+    cause: e.cause
+  });
+}
+const ie = /* @__PURE__ */ new Map();
+function er() {
+  const t = [...ie.keys()];
+  return t.length > 0 ? t.join(", ") : "(none)";
+}
+function Je(t) {
+  return t.trim();
+}
+function Rt(t, r) {
+  return Z(
+    "DUPLICATE_COMPONENT",
+    r,
+    {
+      details: {
+        componentName: t
+      }
+    }
+  );
+}
+function zt(t, r) {
+  const n = Je(t.name), e = n === t.name ? t : { ...t, name: n };
+  if (!n)
+    throw Z(
+      "INVALID_PAGE_DATA",
+      `[PageBuilder] Cannot ${r} a component without a name.`
+    );
+  if (!e.component)
+    throw Z(
+      "INVALID_PAGE_DATA",
+      `[PageBuilder] Component "${n}" is missing a Vue component instance.`
+    );
+  return e;
+}
+function ll(t) {
+  const r = zt(t, "register"), n = r.name;
+  if (ie.has(n))
+    throw Rt(
+      n,
+      `[PageBuilder] Component "${n}" is already registered. Use replaceComponent() to override.`
+    );
+  ie.set(n, r);
+}
+function tr(t) {
+  const r = t.map(
+    (e) => zt(e, "register")
+  ), n = /* @__PURE__ */ new Set();
+  for (const e of r) {
+    if (n.has(e.name))
+      throw Rt(
+        e.name,
+        `[PageBuilder] Component "${e.name}" appears multiple times in the registration batch.`
+      );
+    if (n.add(e.name), ie.has(e.name))
+      throw Rt(
+        e.name,
+        `[PageBuilder] Component "${e.name}" is already registered. Use replaceComponent() to override.`
+      );
+  }
+  for (const e of r)
+    ie.set(e.name, e);
+}
+function sl(t) {
+  const r = zt(t, "replace"), n = r.name;
+  ie.set(n, r);
+}
+function dl(t) {
+  return ie.delete(Je(t));
+}
+function Le(t) {
+  return ie.get(Je(t));
+}
+function nr(t) {
+  const r = Je(t), n = ie.get(r);
+  if (!n)
+    throw Z(
+      "MISSING_COMPONENT",
+      `[PageBuilder] Component "${r}" is not registered. Available: ${er()}`,
+      {
+        details: {
+          componentName: r,
+          availableComponents: [...ie.keys()]
+        }
+      }
+    );
+  return n.component;
+}
+function cl() {
+  return [...ie.values()];
+}
+function rr() {
+  const t = /* @__PURE__ */ new Map();
+  for (const r of ie.values()) {
+    if (r.hidden) continue;
+    const n = t.get(r.category) ?? [];
+    n.push(r), t.set(r.category, n);
+  }
+  return t;
+}
+function ul(t) {
+  return ie.has(Je(t));
+}
+function fl() {
+  ie.clear();
+}
+const un = {
+  name: "PbColumn",
+  label: "Column",
+  description: "Vertical flex container for stacking components.",
+  category: "layout",
+  icon: "⬜",
+  component: {},
+  // self-reference set at registration
+  slots: [{ name: "default", label: "Content" }],
+  editableProps: [
+    { key: "gap", label: "Gap", type: "text", defaultValue: "16px" },
+    { key: "padding", label: "Padding", type: "text", defaultValue: "0" },
+    { key: "align", label: "Align Items", type: "select", defaultValue: "stretch", options: [
+      { label: "Stretch", value: "stretch" },
+      { label: "Start", value: "flex-start" },
+      { label: "Center", value: "center" },
+      { label: "End", value: "flex-end" }
+    ] }
+  ],
+  defaultProps: { gap: "16px", padding: "0", align: "stretch" }
+}, or = /* @__PURE__ */ G({
+  __name: "PbColumn",
+  props: {
+    gap: { type: String, default: "16px" },
+    padding: { type: String, default: "0" },
+    align: { type: String, default: "stretch" }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = N(() => ({
+      display: "flex",
+      flexDirection: "column",
+      gap: n.gap,
+      padding: n.padding,
+      alignItems: n.align,
+      width: "100%"
+    })), o = { builderOptions: un, props: n, style: e };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+  }
+}), q = (t, r) => {
+  const n = t.__vccOpts || t;
+  for (const [e, o] of r)
+    n[e] = o;
+  return n;
+};
+function ar(t, r, n, e, o, i) {
+  return x(), C(
+    "div",
+    {
+      style: J(e.style)
+    },
+    [
+      Ze(t.$slots, "default")
+    ],
+    4
+    /* STYLE */
+  );
+}
+const ir = /* @__PURE__ */ q(or, [["render", ar], ["__file", "/app/src/built-in/PbColumn.vue"]]), fn = {
+  name: "PbRow",
+  label: "Row",
+  description: "Horizontal flex container for side-by-side components.",
+  category: "layout",
+  icon: "⬛",
+  component: {},
+  slots: [{ name: "default", label: "Content" }],
+  editableProps: [
+    { key: "gap", label: "Gap", type: "text", defaultValue: "16px" },
+    { key: "wrap", label: "Wrap", type: "boolean", defaultValue: !0 },
+    { key: "justify", label: "Justify", type: "select", defaultValue: "flex-start", options: [
+      { label: "Start", value: "flex-start" },
+      { label: "Center", value: "center" },
+      { label: "End", value: "flex-end" },
+      { label: "Space Between", value: "space-between" },
+      { label: "Space Around", value: "space-around" }
+    ] }
+  ],
+  defaultProps: { gap: "16px", wrap: !0, justify: "flex-start" }
+}, lr = /* @__PURE__ */ G({
+  __name: "PbRow",
+  props: {
+    gap: { type: String, default: "16px" },
+    wrap: { type: Boolean, default: !0 },
+    justify: { type: String, default: "flex-start" }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = N(() => ({
+      display: "flex",
+      flexDirection: "row",
+      gap: n.gap,
+      flexWrap: n.wrap ? "wrap" : "nowrap",
+      justifyContent: n.justify,
+      width: "100%"
+    })), o = { builderOptions: fn, props: n, style: e };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+  }
+});
+function sr(t, r, n, e, o, i) {
+  return x(), C(
+    "div",
+    {
+      style: J(e.style)
+    },
+    [
+      Ze(t.$slots, "default")
+    ],
+    4
+    /* STYLE */
+  );
+}
+const dr = /* @__PURE__ */ q(lr, [["render", sr], ["__file", "/app/src/built-in/PbRow.vue"]]), Jt = /* @__PURE__ */ new Set([
+  "div",
+  "p",
+  "span",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "section",
+  "article",
+  "blockquote"
+]), cr = /* @__PURE__ */ new Set([
+  "a",
+  "b",
+  "blockquote",
+  "br",
+  "code",
+  "div",
+  "em",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "i",
+  "li",
+  "ol",
+  "p",
+  "pre",
+  "s",
+  "span",
+  "strong",
+  "u",
+  "ul"
+]), ur = /* @__PURE__ */ new Set([
+  "base",
+  "embed",
+  "form",
+  "iframe",
+  "input",
+  "link",
+  "math",
+  "meta",
+  "noscript",
+  "object",
+  "script",
+  "style",
+  "svg",
+  "template",
+  "textarea"
+]), fr = /* @__PURE__ */ new Set(["_blank", "_parent", "_self", "_top"]), pr = /* @__PURE__ */ new Set(["nofollow", "noopener", "noreferrer", "sponsored", "ugc"]), mr = /^data:image\/(?:avif|bmp|gif|jpe?g|png|webp);base64,[a-z0-9+/=\s]+$/i;
+function jt(t) {
+  return t.replace(/[\u0000-\u001F\u007F]/g, "");
+}
+function gr(t) {
+  return jt(t).replace(/\s+/g, "");
+}
+function pn(t) {
+  const r = t.toLowerCase().split(/\s+/).filter(Boolean).filter((n) => pr.has(n));
+  return Array.from(new Set(r)).join(" ");
+}
+function br(t) {
+  const r = pn(t ?? ""), n = new Set(r.split(/\s+/).filter(Boolean));
+  return n.add("noopener"), n.add("noreferrer"), Array.from(n).join(" ");
+}
+function vr() {
+  var t;
+  if (typeof document < "u" && typeof ((t = document.implementation) == null ? void 0 : t.createHTMLDocument) == "function")
+    return document.implementation.createHTMLDocument("");
+  if (typeof DOMParser < "u") {
+    const r = new DOMParser().parseFromString("<!doctype html><html><body></body></html>", "text/html");
+    if (r != null && r.body) return r;
+  }
+  return null;
+}
+function hr(t) {
+  return t.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
+}
+function _r(t, r) {
+  const n = r.tagName.toLowerCase();
+  for (const e of Array.from(t.attributes)) {
+    const o = e.name.toLowerCase(), i = jt(e.value).trim();
+    if (!(i.length === 0 || o.startsWith("on"))) {
+      if (o === "title") {
+        r.setAttribute("title", i);
+        continue;
+      }
+      if (n === "a") {
+        if (o === "href") {
+          const a = se(i, "link");
+          a.length > 0 && r.setAttribute("href", a);
+          continue;
+        }
+        if (o === "target") {
+          const a = i.toLowerCase();
+          fr.has(a) && r.setAttribute("target", a);
+          continue;
+        }
+        if (o === "rel") {
+          const a = pn(i);
+          a.length > 0 && r.setAttribute("rel", a);
+        }
+      }
+    }
+  }
+  n === "a" && r.getAttribute("target") === "_blank" && r.setAttribute("rel", br(r.getAttribute("rel")));
+}
+function At(t, r, n) {
+  for (const e of Array.from(t.childNodes)) {
+    if (e.nodeType === 3) {
+      r.appendChild(n.createTextNode(e.textContent ?? ""));
+      continue;
+    }
+    if (e.nodeType !== 1) continue;
+    const o = e, i = o.tagName.toLowerCase();
+    if (ur.has(i)) continue;
+    if (!cr.has(i)) {
+      const l = n.createDocumentFragment();
+      At(o, l, n), r.appendChild(l);
+      continue;
+    }
+    const a = n.createElement(i);
+    if (_r(o, a), At(o, a, n), i === "a" && !a.getAttribute("href")) {
+      const l = n.createDocumentFragment();
+      for (; a.firstChild; )
+        l.appendChild(a.firstChild);
+      r.appendChild(l);
+      continue;
+    }
+    r.appendChild(a);
+  }
+}
+function mn(t) {
+  const r = typeof t == "string" ? t : "";
+  if (r.length === 0) return "";
+  const n = vr();
+  if (!n) return hr(r);
+  const e = n.createElement("div");
+  e.innerHTML = r;
+  const o = n.createElement("div");
+  return At(e, o, n), o.innerHTML;
+}
+function gn(t, r = "div") {
+  const n = typeof r == "string" ? r.trim().toLowerCase() : "div", e = Jt.has(n) ? n : "div";
+  if (typeof t != "string") return e;
+  const o = t.trim().toLowerCase();
+  return Jt.has(o) ? o : e;
+}
+function se(t, r) {
+  const n = jt(t).trim();
+  if (n.length === 0) return "";
+  const e = gr(n).toLowerCase(), o = e.match(/^([a-z][a-z0-9+.-]*):/i), i = o == null ? void 0 : o[1];
+  return !i || i === "http" || i === "https" || r === "link" && (i === "mailto" || i === "tel") || r === "media" && i === "blob" || (r === "media" || r === "background") && i === "data" && mr.test(e) ? n : "";
+}
+const bn = {
+  name: "PbText",
+  label: "Text",
+  description: "A text block with HTML support.",
+  category: "content",
+  icon: "T",
+  component: {},
+  slots: [],
+  editableProps: [
+    { key: "content", label: "Content", type: "richtext", defaultValue: "<p>Enter text here</p>" },
+    { key: "tag", label: "HTML Tag", type: "select", defaultValue: "div", options: [
+      { label: "div", value: "div" },
+      { label: "p", value: "p" },
+      { label: "span", value: "span" },
+      { label: "h1", value: "h1" },
+      { label: "h2", value: "h2" },
+      { label: "h3", value: "h3" }
+    ] }
+  ],
+  defaultProps: { content: "<p>Enter text here</p>", tag: "div" }
+}, yr = /* @__PURE__ */ G({
+  __name: "PbText",
+  props: {
+    content: { type: String, default: "" },
+    tag: { type: String, default: "div" }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = N(() => gn(n.tag)), o = N(() => mn(n.content)), i = { builderOptions: bn, props: n, safeTag: e, safeHtmlContent: o };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+  }
+});
+function wr(t, r, n, e, o, i) {
+  return x(), Se(Mt(e.safeTag), { innerHTML: e.safeHtmlContent }, null, 8, ["innerHTML"]);
+}
+const xr = /* @__PURE__ */ q(yr, [["render", wr], ["__file", "/app/src/built-in/PbText.vue"]]), vn = {
+  name: "PbImage",
+  label: "Image",
+  description: "Displays an image with optional alt text.",
+  category: "media",
+  icon: "🖼",
+  component: {},
+  slots: [],
+  editableProps: [
+    { key: "src", label: "Image URL", type: "image", required: !0 },
+    { key: "alt", label: "Alt Text", type: "text", defaultValue: "" },
+    { key: "width", label: "Width", type: "text", defaultValue: "100%" },
+    { key: "objectFit", label: "Object Fit", type: "select", defaultValue: "cover", options: [
+      { label: "Cover", value: "cover" },
+      { label: "Contain", value: "contain" },
+      { label: "Fill", value: "fill" },
+      { label: "None", value: "none" }
+    ] }
+  ],
+  defaultProps: { src: "", alt: "", width: "100%", objectFit: "cover" }
+}, Ir = /* @__PURE__ */ G({
+  __name: "PbImage",
+  props: {
+    src: { type: String, required: !0 },
+    alt: { type: String, default: "" },
+    width: { type: String, default: "100%" },
+    objectFit: { type: String, default: "cover" }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = N(() => ({
+      width: n.width,
+      objectFit: n.objectFit,
+      display: "block",
+      maxWidth: "100%"
+    })), o = N(() => se(n.src, "media")), i = { builderOptions: vn, props: n, style: e, safeSrc: o };
+    return Object.defineProperty(i, "__isScriptSetup", { enumerable: !1, value: !0 }), i;
+  }
+}), Dr = ["src", "alt"];
+function Nr(t, r, n, e, o, i) {
+  return e.safeSrc ? (x(), C("img", {
+    key: 0,
+    src: e.safeSrc,
+    alt: n.alt,
+    style: J(e.style),
+    loading: "lazy"
+  }, null, 12, Dr)) : Y("v-if", !0);
+}
+const Sr = /* @__PURE__ */ q(Ir, [["render", Nr], ["__file", "/app/src/built-in/PbImage.vue"]]), hn = {
+  name: "PbVideo",
+  label: "Vidéo",
+  description: "Affiche une vidéo avec URL, poster optionnel et options de lecture.",
+  category: "media",
+  icon: "🎬",
+  component: {},
+  slots: [],
+  editableProps: [
+    { key: "src", label: "URL de la vidéo", type: "url", required: !0 },
+    { key: "poster", label: "Image de couverture (poster)", type: "image" },
+    { key: "width", label: "Largeur", type: "text", defaultValue: "100%" },
+    { key: "controls", label: "Afficher les contrôles", type: "boolean", defaultValue: !0 },
+    { key: "autoplay", label: "Lecture automatique", type: "boolean", defaultValue: !1 },
+    { key: "muted", label: "Muet", type: "boolean", defaultValue: !1 },
+    { key: "loop", label: "Boucle", type: "boolean", defaultValue: !1 }
+  ],
+  defaultProps: {
+    src: "",
+    poster: "",
+    width: "100%",
+    controls: !0,
+    autoplay: !1,
+    muted: !1,
+    loop: !1
+  }
+}, Tr = /* @__PURE__ */ G({
+  __name: "PbVideo",
+  props: {
+    src: { type: String, required: !0 },
+    poster: { type: String, required: !1, default: "" },
+    width: { type: String, required: !1, default: "100%" },
+    controls: { type: Boolean, required: !1, default: !0 },
+    autoplay: { type: Boolean, required: !1, default: !1 },
+    muted: { type: Boolean, required: !1, default: !1 },
+    loop: { type: Boolean, required: !1, default: !1 }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = N(() => ({
+      width: n.width,
+      maxWidth: "100%",
+      display: "block"
+    })), o = N(() => se(n.src, "media")), i = N(
+      () => {
+        var l;
+        return (l = n.poster) != null && l.trim() ? se(n.poster, "media") : void 0;
+      }
+    ), a = { builderOptions: hn, props: n, style: e, safeSrc: o, safePoster: i };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+  }
+}), Cr = ["src", "poster", "controls", "autoplay", "muted", "loop"];
+function kr(t, r, n, e, o, i) {
+  return e.safeSrc ? (x(), C("video", {
+    key: 0,
+    src: e.safeSrc,
+    poster: e.safePoster,
+    controls: n.controls,
+    autoplay: n.autoplay,
+    muted: n.muted,
+    loop: n.loop,
+    style: J(e.style),
+    playsinline: ""
+  }, null, 12, Cr)) : Y("v-if", !0);
+}
+const Pr = /* @__PURE__ */ q(Tr, [["render", kr], ["__file", "/app/src/built-in/PbVideo.vue"]]), _n = {
+  name: "PbSection",
+  label: "Section",
+  description: "A full-width section with optional background.",
+  category: "layout",
+  icon: "▬",
+  component: {},
+  slots: [{ name: "default", label: "Content" }],
+  editableProps: [
+    { key: "backgroundColor", label: "Background Color", type: "color", defaultValue: "transparent" },
+    { key: "backgroundImage", label: "Background Image", type: "image" },
+    { key: "padding", label: "Padding", type: "text", defaultValue: "48px 24px" },
+    { key: "maxWidth", label: "Max Content Width", type: "text", defaultValue: "1200px" }
+  ],
+  defaultProps: { backgroundColor: "transparent", padding: "48px 24px", maxWidth: "1200px" }
+}, Er = /* @__PURE__ */ G({
+  __name: "PbSection",
+  props: {
+    backgroundColor: { type: String, default: "transparent" },
+    backgroundImage: { type: String, default: "" },
+    padding: { type: String, default: "48px 24px" },
+    maxWidth: { type: String, default: "1200px" }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = N(() => se(n.backgroundImage, "background")), o = N(() => e.value ? `url("${e.value.replace(/["\\]/g, "\\$&")}")` : void 0), i = N(() => ({
+      width: "100%",
+      backgroundColor: n.backgroundColor,
+      backgroundImage: o.value,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      padding: n.padding
+    })), a = N(() => ({
+      maxWidth: n.maxWidth,
+      margin: "0 auto",
+      width: "100%"
+    })), l = { builderOptions: _n, props: n, safeBackgroundImage: e, cssBackgroundImage: o, outerStyle: i, innerStyle: a };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+  }
+});
+function Rr(t, r, n, e, o, i) {
+  return x(), C(
+    "section",
+    {
+      style: J(e.outerStyle)
+    },
+    [
+      S(
+        "div",
+        {
+          style: J(e.innerStyle)
+        },
+        [
+          Ze(t.$slots, "default")
+        ],
+        4
+        /* STYLE */
+      )
+    ],
+    4
+    /* STYLE */
+  );
+}
+const Ar = /* @__PURE__ */ q(Er, [["render", Rr], ["__file", "/app/src/built-in/PbSection.vue"]]), yn = {
+  name: "PbContainer",
+  label: "Container",
+  description: "A centered container with max width.",
+  category: "layout",
+  icon: "☐",
+  component: {},
+  slots: [{ name: "default", label: "Content" }],
+  editableProps: [
+    { key: "maxWidth", label: "Max Width", type: "text", defaultValue: "100%" },
+    { key: "padding", label: "Padding", type: "text", defaultValue: "0 24px" }
+  ],
+  defaultProps: { maxWidth: "100%", padding: "0 24px" }
+}, Lr = /* @__PURE__ */ G({
+  __name: "PbContainer",
+  props: {
+    maxWidth: { type: String, default: "100%" },
+    padding: { type: String, default: "0 24px" }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = N(() => ({
+      maxWidth: n.maxWidth,
+      margin: "0 auto",
+      padding: n.padding,
+      width: "100%",
+      boxSizing: "border-box"
+    })), o = { builderOptions: yn, props: n, style: e };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+  }
+});
+function Vr(t, r, n, e, o, i) {
+  return x(), C(
+    "div",
+    {
+      style: J(e.style)
+    },
+    [
+      Ze(t.$slots, "default")
+    ],
+    4
+    /* STYLE */
+  );
+}
+const Mr = /* @__PURE__ */ q(Lr, [["render", Vr], ["__file", "/app/src/built-in/PbContainer.vue"]]);
+function Pe(t, r) {
+  return { ...t, component: r };
+}
+const Or = [
+  Pe(un, ir),
+  Pe(fn, dr),
+  Pe(bn, xr),
+  Pe(vn, Sr),
+  Pe(hn, Pr),
+  Pe(_n, Ar),
+  Pe(yn, Mr)
+], Br = /* @__PURE__ */ new Set(["draft", "published", "archived"]), Qt = 200, en = 5e3;
+function Ye(t) {
+  return typeof t == "object" && t !== null && !Array.isArray(t);
+}
+function j(t, r, n) {
+  t.errors.push({ path: r, message: n });
+}
+function zr(t, r, n) {
+  if (t.tag === void 0) return;
+  if (typeof t.tag != "string" || t.tag.trim() === "") {
+    j(n, `${r}.tag`, "PbText props.tag must be a non-empty string.");
+    return;
+  }
+  const e = t.tag.trim().toLowerCase();
+  gn(t.tag) !== e && j(
+    n,
+    `${r}.tag`,
+    "PbText props.tag must be one of: div, p, span, h1, h2, h3, h4, h5, h6, section, article, blockquote."
+  );
+}
+function jr(t, r, n) {
+  if (typeof t.src != "string" || t.src.trim() === "") {
+    j(n, `${r}.src`, "PbImage props.src must be a non-empty string.");
+    return;
+  }
+  se(t.src, "media") === "" && j(n, `${r}.src`, "PbImage props.src contains an unsafe URL.");
+}
+function Hr(t, r, n) {
+  if (typeof t.src != "string" || t.src.trim() === "") {
+    j(n, `${r}.src`, "PbVideo props.src must be a non-empty string.");
+    return;
+  }
+  se(t.src, "media") === "" && j(n, `${r}.src`, "PbVideo props.src contains an unsafe URL.");
+  const e = t.poster;
+  e != null && e !== "" && (typeof e != "string" ? j(n, `${r}.poster`, "PbVideo props.poster must be a string.") : e.trim() !== "" && se(e, "media") === "" && j(n, `${r}.poster`, "PbVideo props.poster contains an unsafe URL."));
+}
+function Wr(t, r, n) {
+  const e = t.backgroundImage;
+  if (!(e == null || e === "")) {
+    if (typeof e != "string") {
+      j(n, `${r}.backgroundImage`, "PbSection props.backgroundImage must be a string.");
+      return;
+    }
+    e.trim() !== "" && se(e, "background") === "" && j(n, `${r}.backgroundImage`, "PbSection props.backgroundImage contains an unsafe URL.");
+  }
+}
+function Ur(t, r, n, e) {
+  if (t === "PbText") {
+    zr(r, n, e);
+    return;
+  }
+  if (t === "PbImage") {
+    jr(r, n, e);
+    return;
+  }
+  if (t === "PbVideo") {
+    Hr(r, n, e);
+    return;
+  }
+  t === "PbSection" && Wr(r, n, e);
+}
+function it(t, r, n, e = 0) {
+  if (e > Qt) {
+    n.depthGuardTriggered || (j(
+      n,
+      r,
+      `Maximum node depth (${String(Qt)}) exceeded during validation.`
+    ), n.depthGuardTriggered = !0);
+    return;
+  }
+  if (n.visitedNodeCount >= en) {
+    n.sizeGuardTriggered || (j(
+      n,
+      r,
+      `Maximum node count (${String(en)}) exceeded during validation.`
+    ), n.sizeGuardTriggered = !0);
+    return;
+  }
+  if (!Ye(t)) {
+    j(n, r, "Node must be an object.");
+    return;
+  }
+  if (n.seenNodes.has(t)) {
+    j(n, r, "Cycle detected in node tree.");
+    return;
+  }
+  n.seenNodes.add(t), n.visitedNodeCount++;
+  const o = t.id, i = t.name, a = t.slot, l = t.props, u = t.children, b = t.readonly;
+  if (!(typeof o == "number" && Number.isInteger(o)) || o <= 0 ? j(n, `${r}.id`, "id must be a positive integer.") : (n.seenIds.has(o) && j(n, `${r}.id`, `Duplicate node id "${o}" found.`), n.seenIds.add(o), o > n.maxObservedId && (n.maxObservedId = o)), (typeof i != "string" || i.trim() === "") && j(n, `${r}.name`, "name must be a non-empty string."), a === null || typeof a == "string" || j(n, `${r}.slot`, "slot must be a string or null."), Ye(l) ? typeof i == "string" && Ur(i, l, `${r}.props`, n) : j(n, `${r}.props`, "props must be an object."), !Array.isArray(u)) {
+    j(n, `${r}.children`, "children must be an array.");
+    return;
+  }
+  b === void 0 || typeof b == "boolean" || j(n, `${r}.readonly`, "readonly must be a boolean when provided.");
+  for (let v = 0; v < u.length && !n.sizeGuardTriggered; v++)
+    it(u[v], `${r}.children[${v}]`, n, e + 1);
+}
+function lt(t, r = "node") {
+  const n = {
+    errors: [],
+    seenIds: /* @__PURE__ */ new Set(),
+    seenNodes: /* @__PURE__ */ new WeakSet(),
+    maxObservedId: 0,
+    visitedNodeCount: 0,
+    depthGuardTriggered: !1,
+    sizeGuardTriggered: !1
+  };
+  return it(t, r, n), {
+    isValid: n.errors.length === 0,
+    errors: n.errors
+  };
+}
+function wn(t) {
+  const r = {
+    errors: [],
+    seenIds: /* @__PURE__ */ new Set(),
+    seenNodes: /* @__PURE__ */ new WeakSet(),
+    maxObservedId: 0,
+    visitedNodeCount: 0,
+    depthGuardTriggered: !1,
+    sizeGuardTriggered: !1
+  };
+  if (!Ye(t))
+    return j(r, "pageData", "pageData must be an object."), {
+      isValid: !1,
+      errors: r.errors
+    };
+  const { meta: n, content: e, layout: o, maxId: i, variables: a } = t;
+  if (Ye(n) ? ((typeof n.id != "string" || n.id.trim() === "") && j(r, "meta.id", "meta.id must be a non-empty string."), (typeof n.name != "string" || n.name.trim() === "") && j(r, "meta.name", "meta.name must be a non-empty string."), typeof n.url != "string" || n.url.trim() === "" ? j(r, "meta.url", "meta.url must be a non-empty string.") : se(n.url, "link") === "" && j(r, "meta.url", "meta.url contains an unsafe URL."), (typeof n.status != "string" || !Br.has(n.status)) && j(
+    r,
+    "meta.status",
+    "meta.status must be one of: draft, published, archived."
+  ), n.updatedAt === void 0 || typeof n.updatedAt == "string" || j(r, "meta.updatedAt", "meta.updatedAt must be a string when provided."), n.createdAt === void 0 || typeof n.createdAt == "string" || j(r, "meta.createdAt", "meta.createdAt must be a string when provided.")) : j(r, "meta", "meta must be an object."), it(e, "content", r), it(o, "layout", r), !(typeof i == "number" && Number.isInteger(i)) || i < 0 ? j(r, "maxId", "maxId must be a non-negative integer.") : i < r.maxObservedId && j(
+    r,
+    "maxId",
+    `maxId (${String(i)}) must be greater than or equal to the maximum node id (${String(r.maxObservedId)}).`
+  ), !Ye(a))
+    j(r, "variables", "variables must be an object.");
+  else
+    for (const [l, u] of Object.entries(a))
+      typeof u != "string" && j(r, `variables.${l}`, "Variable values must be strings.");
+  return {
+    isValid: r.errors.length === 0,
+    errors: r.errors
+  };
+}
+const Lt = "en", xn = {
+  en: {
+    "toolbar.undo.title": "Undo (Ctrl/Cmd+Z)",
+    "toolbar.undo.ariaLabel": "Undo",
+    "toolbar.redo.title": "Redo (Ctrl/Cmd+Y or Shift+Ctrl/Cmd+Z)",
+    "toolbar.redo.ariaLabel": "Redo",
+    "toolbar.save": "Save",
+    "toolbar.save.title": "Save (Ctrl/Cmd+S)",
+    "toolbar.save.ariaLabel": "Save page",
+    "toolbar.aria.toolbar": "Editor toolbar",
+    "toolbar.aria.historyControls": "History controls",
+    "toolbar.aria.viewportControls": "Viewport controls",
+    "toolbar.aria.saveControls": "Save controls",
+    "toolbar.aria.unsavedChanges": "Unsaved changes",
+    "toolbar.viewport.desktop": "Desktop",
+    "toolbar.viewport.tablet": "Tablet",
+    "toolbar.viewport.mobile": "Mobile",
+    "toolbar.viewport.custom": "Custom",
+    "toolbar.viewport.switchAriaLabel": "Switch viewport to {viewport}",
+    "toolbar.viewport.width.short": "W",
+    "toolbar.viewport.height.short": "H",
+    "toolbar.viewport.width.ariaLabel": "Custom viewport width",
+    "toolbar.viewport.height.ariaLabel": "Custom viewport height",
+    "leftDrawer.title": "Components",
+    "leftDrawer.aria.componentPalette": "Component palette",
+    "leftDrawer.toggle.ariaLabel": "Toggle component drawer",
+    "leftDrawer.section.components": "Components",
+    "leftDrawer.search.placeholder": "Search components...",
+    "leftDrawer.search.ariaLabel": "Search components",
+    "leftDrawer.category.ariaLabel": "{category} components",
+    "leftDrawer.component.dragAriaLabel": "Add or drag {label}",
+    "leftDrawer.empty": "No matching components",
+    "leftDrawer.section.tree": "Tree",
+    "leftDrawer.tree.toggle.ariaLabel": "Toggle node tree",
+    "rightDrawer.title": "Properties",
+    "rightDrawer.aria.componentProperties": "Component properties",
+    "rightDrawer.toggle.ariaLabel": "Toggle properties drawer",
+    "rightDrawer.section.properties": "Properties",
+    "rightDrawer.actions.duplicate": "Duplicate",
+    "rightDrawer.actions.duplicate.ariaLabel": "Duplicate selected component",
+    "rightDrawer.actions.delete": "Delete",
+    "rightDrawer.actions.delete.ariaLabel": "Delete selected component",
+    "rightDrawer.empty": "Select a component to edit its properties.",
+    "treePanel.ariaLabel": "Node tree",
+    "treePanel.readonly": "readonly",
+    "contextMenu.ariaLabel": "Node context menu",
+    "contextMenu.duplicate": "Duplicate",
+    "contextMenu.moveUp": "Move up",
+    "contextMenu.moveDown": "Move down",
+    "contextMenu.delete": "Delete",
+    "iframeCanvas.title": "Editor canvas",
+    "propBoolean.enabled": "Enabled",
+    "propBoolean.disabled": "Disabled",
+    "propSelect.noOptions": "No options",
+    "mediaPicker.input.placeholder": "https://example.com/image.jpg",
+    "mediaPicker.clear": "Clear",
+    "mediaPicker.upload": "Upload",
+    "mediaPicker.preview.alt": "Media preview",
+    "mediaPicker.empty": "Paste an image URL to preview.",
+    "richText.action.link": "Link",
+    "richText.action.bold": "Bold",
+    "richText.action.italic": "Italic",
+    "richText.action.unorderedList": "Bulleted list",
+    "richText.action.orderedList": "Numbered list",
+    "richText.aria.toolbar": "Rich text formatting toolbar",
+    "richText.aria.editor": "Rich text editor",
+    "richText.prompt.enterUrl": "Enter URL",
+    "richText.prompt.defaultUrl": "https://",
+    "pageBuilder.warning.invalidEditMode": "Invalid `pageData` for edit mode. Rendering in read mode."
+  }
+};
+function Kr(t, r) {
+  return r ? t.replace(/\{(\w+)\}/g, (n, e) => {
+    const o = r[e];
+    return o === void 0 ? n : String(o);
+  }) : t;
+}
+function Fr(...t) {
+  const r = {};
+  for (const n of t)
+    if (n)
+      for (const [e, o] of Object.entries(n))
+        r[e] = {
+          ...r[e] ?? {},
+          ...o
+        };
+  return r;
+}
+function $r(t) {
+  const r = t.fallbackLocale ?? "en", n = t.dictionary[t.locale] ?? {}, e = t.dictionary[r] ?? {}, o = n[t.key] ?? e[t.key] ?? t.key;
+  return Kr(o, t.params);
+}
+function In(t, r, n = "en") {
+  const e = typeof t == "function" ? t : () => t, o = typeof r == "function" ? r : () => r;
+  return (i, a) => $r({
+    locale: e(),
+    dictionary: o(),
+    key: i,
+    params: a,
+    fallbackLocale: n
+  });
+}
+const Dn = Symbol("pageBuilderI18nOptions"), Nn = Symbol("pageBuilderI18n"), Gr = {
+  locale: N(() => Lt),
+  t: In(Lt, xn)
+};
+function pe() {
+  return je(Nn, Gr);
+}
+function ct(t) {
+  return Array.isArray(t.children) ? t.children : [];
+}
+function Sn(t, r) {
+  const n = Number.isFinite(t) ? Math.trunc(t) : 0;
+  return Math.max(0, Math.min(n, r));
+}
+function qr(t) {
+  try {
+    return structuredClone(t);
+  } catch (r) {
+    throw Z(
+      "INVALID_NODE",
+      "[PageBuilder] Failed to clone node tree. Ensure the tree is serializable and acyclic.",
+      {
+        cause: r
+      }
+    );
+  }
+}
+function U(t, r) {
+  if (t.id === r) return t;
+  for (const n of ct(t)) {
+    const e = U(n, r);
+    if (e) return e;
+  }
+}
+function ae(t, r) {
+  const n = ct(t);
+  for (let e = 0; e < n.length; e++) {
+    if (n[e].id === r)
+      return { parent: t, index: e };
+    const o = ae(n[e], r);
+    if (o) return o;
+  }
+}
+function Yr(t, r) {
+  const n = ae(t, r);
+  if (n)
+    return n.parent.children.splice(n.index, 1)[0];
+}
+function Tn(t, r, n, e, o = "default") {
+  const i = U(t, r);
+  if (!i) return !1;
+  Array.isArray(i.children) || (i.children = []);
+  const a = Sn(e, i.children.length), l = { ...n, slot: o };
+  return i.children.splice(a, 0, l), !0;
+}
+function Xr(t, r, n, e, o = "default") {
+  const i = ae(t, r);
+  if (!i) return !1;
+  const a = ct(i.parent), [l] = a.splice(i.index, 1);
+  if (!l) return !1;
+  if (Tn(t, n, l, e, o)) return !0;
+  const b = Sn(i.index, a.length);
+  return a.splice(b, 0, l), !1;
+}
+function Zr(t, r, n = {}) {
+  return {
+    id: t,
+    name: r,
+    slot: n.slot ?? "default",
+    props: n.props ?? {},
+    children: n.children ?? [],
+    readonly: n.readonly
+  };
+}
+function Cn(t, r, n = 0) {
+  const e = /* @__PURE__ */ new WeakSet();
+  function o(i, a) {
+    if (e.has(i)) return !0;
+    if (e.add(i), r(i, a) === !1) return !1;
+    for (const l of ct(i))
+      if (o(l, a + 1) === !1) return !1;
+    return !0;
+  }
+  return o(t, n);
+}
+function pl(t) {
+  let r = 0;
+  return Cn(t, () => {
+    r++;
+  }), r;
+}
+function We(t) {
+  let r = t.id;
+  return Cn(t, (n) => {
+    Number.isFinite(n.id) && n.id > r && (r = n.id);
+  }), r;
+}
+function Jr(t, r) {
+  if (!t || typeof t != "object" || Array.isArray(t))
+    return {};
+  const n = r && typeof r == "object" && !Array.isArray(r) ? r : {}, e = {};
+  for (const [o, i] of Object.entries(t))
+    typeof i == "string" ? e[o] = i.replace(/\{\{\s*(\w+)\s*\}\}/g, (a, l) => n[l] ?? `{{ ${l} }}`) : e[o] = i;
+  return e;
+}
+const Qr = /* @__PURE__ */ G({
+  __name: "ErrorBoundary",
+  props: {
+    fallbackMessage: { type: String, required: !1, default: "Something went wrong while rendering this section." },
+    showDetailsInDev: { type: Boolean, required: !1, default: !1 },
+    diagnosticContext: { type: String, required: !1, default: "ErrorBoundary" }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = R(!1), o = R(null), i = R(""), a = N(() => n.showDetailsInDev), l = N(() => o.value ? o.value instanceof Error ? o.value.message : String(o.value) : ""), u = N(
+      () => [l.value, i.value].filter((v) => !!v).join(`
+`)
+    );
+    Hn((v, I, d) => (e.value = !0, o.value = v, i.value = d, Ue(
+      n.diagnosticContext,
+      Z(
+        "RENDER_FAILURE",
+        `[PageBuilder] ${n.diagnosticContext} captured a render error: ${Bt(v)}`,
+        {
+          cause: v,
+          details: {
+            info: d
+          }
+        }
+      )
+    ), !1));
+    const b = { props: n, hasError: e, capturedError: o, errorInfo: i, shouldShowDetails: a, errorDetails: l, errorDebugText: u };
+    return Object.defineProperty(b, "__isScriptSetup", { enumerable: !1, value: !0 }), b;
+  }
+}), eo = {
+  key: 1,
+  class: "ipb-error-boundary",
+  role: "alert"
+}, to = { class: "ipb-error-boundary__message" }, no = {
+  key: 0,
+  class: "ipb-error-boundary__details"
+};
+function ro(t, r, n, e, o, i) {
+  return e.hasError ? (x(), C("div", eo, [
+    S(
+      "p",
+      to,
+      z(n.fallbackMessage),
+      1
+      /* TEXT */
+    ),
+    e.shouldShowDetails && e.errorDebugText ? (x(), C(
+      "pre",
+      no,
+      "      " + z(e.errorDebugText) + `
+    `,
+      1
+      /* TEXT */
+    )) : Y("v-if", !0)
+  ])) : Ze(t.$slots, "default", { key: 0 }, void 0, !0);
+}
+const kn = /* @__PURE__ */ q(Qr, [["render", ro], ["__scopeId", "data-v-c285f22f"], ["__file", "/app/src/components/shared/ErrorBoundary.vue"]]), oo = /* @__PURE__ */ G({
+  __name: "NodeRenderer",
+  props: {
+    node: {
+      type: Object,
+      required: !0
+    },
+    variables: {
+      type: Object,
+      default: () => ({})
+    },
+    markNodes: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = /* @__PURE__ */ new Set();
+    function o(c, m, p) {
+      e.has(c) || (e.add(c), Ue("NodeRenderer", Z("RENDER_FAILURE", m, { details: p })));
+    }
+    function i(c) {
+      if (typeof c != "object" || c === null || Array.isArray(c)) return !1;
+      const m = c;
+      return typeof m.id != "number" || !Number.isFinite(m.id) || typeof m.name != "string" || m.name.trim().length === 0 || !(m.slot === null || typeof m.slot == "string") || typeof m.props != "object" || m.props === null || Array.isArray(m.props) ? !1 : Array.isArray(m.children);
+    }
+    function a(c) {
+      return !c || typeof c != "object" || Array.isArray(c) ? {} : Object.fromEntries(
+        Object.entries(c).filter((m) => typeof m[1] == "string")
+      );
+    }
+    const l = N(() => i(n.node) ? n.node : (o("invalid-node", "[PageBuilder] NodeRenderer received an invalid node payload.", {
+      node: n.node
+    }), null)), u = N(() => a(n.variables)), b = G({
+      name: "NodeRenderCrash",
+      props: {
+        error: {
+          type: null,
+          required: !0
+        }
+      },
+      setup(c) {
+        return () => {
+          throw c.error instanceof Error ? c.error : new Error(String(c.error));
+        };
+      }
+    }), v = N(() => {
+      if (!l.value)
+        return {
+          component: b,
+          error: Z(
+            "INVALID_NODE",
+            "[PageBuilder] Cannot render node because its payload is invalid."
+          )
+        };
+      try {
+        return { component: nr(l.value.name), error: null };
+      } catch (c) {
+        return o(
+          `missing-component:${l.value.name}`,
+          `[PageBuilder] Component "${l.value.name}" could not be resolved.`,
+          { nodeId: l.value.id }
+        ), { component: b, error: c };
+      }
+    }), I = N(() => v.value.component), d = N(() => {
+      if (v.value.error !== null)
+        return { error: v.value.error };
+      if (!l.value)
+        return {
+          error: Z(
+            "INVALID_NODE",
+            "[PageBuilder] Cannot render props for an invalid node payload."
+          )
+        };
+      try {
+        return Jr(l.value.props, u.value);
+      } catch (c) {
+        return o(
+          `prop-interpolation:${l.value.id}`,
+          `[PageBuilder] Failed to interpolate props for node "${l.value.name}".`,
+          { nodeId: l.value.id }
+        ), { error: c };
+      }
+    }), A = N(() => !n.markNodes || !l.value ? {} : {
+      "data-ipb-node-id": String(l.value.id),
+      "data-ipb-component": l.value.name
+    }), k = N(() => ({
+      ...d.value,
+      ...A.value
+    })), y = N(() => {
+      const c = {};
+      if (!l.value) return c;
+      for (const m of l.value.children) {
+        if (!i(m)) {
+          o(
+            `invalid-child:${l.value.id}`,
+            `[PageBuilder] Ignoring invalid child node while rendering "${l.value.name}".`,
+            { parentNodeId: l.value.id }
+          );
+          continue;
+        }
+        const p = m.slot ?? "default";
+        c[p] || (c[p] = []), c[p].push(m);
+      }
+      return c;
+    }), D = { props: n, reportedDiagnostics: e, reportOnce: o, isNodeObject: i, sanitizeVariables: a, safeNode: l, safeVariables: u, NodeRenderCrash: b, resolutionResult: v, resolvedComponent: I, resolvedProps: d, markerAttrs: A, renderedAttrs: k, slotGroups: y, ErrorBoundary: kn };
+    return Object.defineProperty(D, "__isScriptSetup", { enumerable: !1, value: !0 }), D;
+  }
+}), ao = {
+  key: 0,
+  class: "ipb-node-renderer__invalid",
+  role: "alert"
+};
+function io(t, r, n, e, o, i) {
+  const a = Wn("NodeRenderer", !0);
+  return e.safeNode ? (x(), Se(e.ErrorBoundary, {
+    key: 1,
+    "fallback-message": "This block could not be rendered.",
+    "show-details-in-dev": !0,
+    "diagnostic-context": "NodeRenderer"
+  }, {
+    default: Pt(() => [
+      (x(), Se(
+        Mt(e.resolvedComponent),
+        Un(Kn(e.renderedAttrs)),
+        Fn({
+          _: 2
+          /* DYNAMIC */
+        }, [
+          ve(e.slotGroups, (l, u) => ({
+            name: u,
+            fn: Pt(() => [
+              (x(!0), C(
+                he,
+                null,
+                ve(l, (b) => (x(), Se(a, {
+                  key: b.id,
+                  node: b,
+                  variables: e.safeVariables,
+                  "mark-nodes": n.markNodes
+                }, null, 8, ["node", "variables", "mark-nodes"]))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])
+          }))
+        ]),
+        1040
+        /* FULL_PROPS, DYNAMIC_SLOTS */
+      ))
+    ]),
+    _: 1
+    /* STABLE */
+  })) : (x(), C("div", ao, " This block is invalid and could not be rendered. "));
+}
+const Pn = /* @__PURE__ */ q(oo, [["render", io], ["__scopeId", "data-v-ea251e83"], ["__file", "/app/src/components/reader/NodeRenderer.vue"]]), lo = /* @__PURE__ */ G({
+  __name: "PageReader",
+  props: {
+    pageData: {
+      type: Object,
+      required: !0
+    }
+  },
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = N(() => wn(n.pageData)), o = N(() => lt(n.pageData.content, "content")), i = N(() => lt(n.pageData.layout, "layout")), a = /* @__PURE__ */ new Set();
+    function l(d, A, k) {
+      a.has(d) || (a.add(d), Ue("PageReader", Z("INVALID_PAGE_DATA", A, { details: k })));
+    }
+    de(
+      e,
+      (d) => {
+        d.isValid || l(
+          "invalid-page-data",
+          "[PageReader] Invalid pageData payload detected. Rendering continues with degraded behavior.",
+          { errors: d.errors }
+        );
+      },
+      { immediate: !0 }
+    );
+    function u(d) {
+      return typeof d == "object" && d !== null && !Array.isArray(d);
+    }
+    const b = N(() => {
+      const d = n.pageData.variables;
+      return !d || typeof d != "object" || Array.isArray(d) ? (l(
+        "invalid-variables-shape",
+        "[PageReader] Invalid variables payload. Falling back to an empty variable map."
+      ), {}) : (Object.values(d).some((k) => typeof k != "string") && l(
+        "invalid-variables-values",
+        "[PageReader] Variables payload contains non-string values. Invalid entries were ignored."
+      ), Object.fromEntries(
+        Object.entries(d).filter((k) => typeof k[1] == "string")
+      ));
+    }), v = N(() => {
+      if (!u(n.pageData.content) || !o.value.isValid)
+        return l(
+          "invalid-content",
+          "[PageReader] Invalid content node. Nothing can be rendered.",
+          { errors: o.value.errors }
+        ), null;
+      if (!u(n.pageData.layout) || !i.value.isValid)
+        return l(
+          "invalid-layout",
+          "[PageReader] Invalid layout node. Falling back to content-only rendering.",
+          { errors: i.value.errors }
+        ), n.pageData.content;
+      const d = {
+        ...n.pageData.content,
+        slot: n.pageData.content.slot ?? "default"
+      }, A = Array.isArray(n.pageData.layout.children) ? n.pageData.layout.children : [];
+      return {
+        ...n.pageData.layout,
+        children: [...A, d]
+      };
+    }), I = { props: n, pageValidationResult: e, contentValidationResult: o, layoutValidationResult: i, reportedDiagnostics: a, reportOnce: l, isNodeObject: u, safeVariables: b, readerRoot: v, NodeRenderer: Pn, ErrorBoundary: kn };
+    return Object.defineProperty(I, "__isScriptSetup", { enumerable: !1, value: !0 }), I;
+  }
+}), so = { class: "ipb-page-reader" }, co = {
+  key: 1,
+  class: "ipb-page-reader__invalid",
+  role: "alert"
+};
+function uo(t, r, n, e, o, i) {
+  return x(), C("div", so, [
+    e.readerRoot ? (x(), Se(e.ErrorBoundary, {
+      key: 0,
+      "fallback-message": "This page could not be fully rendered.",
+      "show-details-in-dev": !0,
+      "diagnostic-context": "PageReader"
+    }, {
+      default: Pt(() => [
+        Re(e.NodeRenderer, {
+          node: e.readerRoot,
+          variables: e.safeVariables
+        }, null, 8, ["node", "variables"])
+      ]),
+      _: 1
+      /* STABLE */
+    })) : (x(), C("div", co, " This page data is invalid and cannot be rendered safely. "))
+  ]);
+}
+const fo = /* @__PURE__ */ q(lo, [["render", uo], ["__scopeId", "data-v-2928bf3c"], ["__file", "/app/src/components/reader/PageReader.vue"]]), Xe = {
+  desktop: { width: 1440, height: 900, label: "Desktop" },
+  tablet: { width: 768, height: 1024, label: "Tablet" },
+  mobile: { width: 375, height: 812, label: "Mobile" },
+  custom: { width: 0, height: 0, label: "Custom" }
+}, po = Symbol("pageBuilder"), mo = Symbol("editor"), Ht = Symbol("nodeTree"), Wt = Symbol("dragDrop");
+function ce(t) {
+  return typeof t == "object" && t !== null && !Array.isArray(t);
+}
+function go(t) {
+  return typeof t == "number" && Number.isInteger(t) && t > 0;
+}
+function Vt(t) {
+  return typeof t == "number" && Number.isInteger(t) && t >= 0;
+}
+function tn(t, r, n) {
+  return {
+    id: t,
+    name: r,
+    slot: n,
+    props: {},
+    children: []
+  };
+}
+function Ae(t, r = /* @__PURE__ */ new WeakSet()) {
+  return !ce(t) || r.has(t) || (r.add(t), !go(t.id)) || typeof t.name != "string" || t.name.trim().length === 0 || !(t.slot === null || typeof t.slot == "string") || !ce(t.props) || !Array.isArray(t.children) || typeof t.readonly < "u" && typeof t.readonly != "boolean" ? !1 : t.children.every((n) => Ae(n, r));
+}
+function bo(t) {
+  if (!ce(t)) return {};
+  const r = {};
+  for (const [n, e] of Object.entries(t))
+    typeof e == "string" && (r[n] = e);
+  return r;
+}
+function vo(t) {
+  const r = [], n = tn(1, "PbSection", null), e = tn(100, "PbContainer", null), o = ce(t) ? t : {};
+  let i = n;
+  Ae(o.content) ? i = structuredClone(o.content) : r.push("content node is invalid");
+  let a = e;
+  Ae(o.layout) ? a = structuredClone(o.layout) : r.push("layout node is invalid");
+  const l = o.maxId, u = Math.max(We(i), We(a)), b = Vt(l), v = b ? Math.max(Math.trunc(l), u) : u;
+  b || r.push("maxId is invalid");
+  const I = bo(o.variables);
+  ce(o.variables) || r.push("variables map is invalid");
+  const d = ce(o.meta) ? o.meta : {};
+  ce(o.meta) || r.push("meta object is invalid");
+  const A = {
+    meta: {
+      id: typeof d.id == "string" ? d.id : "unknown-page",
+      name: typeof d.name == "string" ? d.name : "Untitled page",
+      url: typeof d.url == "string" ? d.url : "/",
+      status: d.status === "draft" || d.status === "published" || d.status === "archived" ? d.status : "draft",
+      updatedAt: typeof d.updatedAt == "string" ? d.updatedAt : void 0,
+      createdAt: typeof d.createdAt == "string" ? d.createdAt : void 0
+    },
+    content: i,
+    layout: a,
+    maxId: v,
+    variables: I
+  };
+  return r.length > 0 && Ue(
+    "usePageBuilder.sanitizeInitialData",
+    Z(
+      "INVALID_PAGE_DATA",
+      `[PageBuilder] Invalid page data detected. Falling back to safe defaults for: ${r.join(", ")}.`
+    ),
+    { issues: r }
+  ), A;
+}
+function nn(t) {
+  let r;
+  try {
+    r = JSON.parse(t);
+  } catch (e) {
+    throw Z(
+      "INVALID_SNAPSHOT",
+      "[PageBuilder] Snapshot JSON is invalid.",
+      {
+        cause: e,
+        details: {
+          snapshotPreview: t.slice(0, 200)
+        }
+      }
+    );
+  }
+  if (!ce(r) || !Ae(r.content) || !Ae(r.layout) || !Vt(r.maxId))
+    throw Z(
+      "INVALID_SNAPSHOT",
+      "[PageBuilder] Snapshot payload shape is invalid.",
+      {
+        details: {
+          contentValid: ce(r) ? Ae(r.content) : !1,
+          layoutValid: ce(r) ? Ae(r.layout) : !1,
+          maxIdValid: ce(r) ? Vt(r.maxId) : !1
+        }
+      }
+    );
+  const n = Math.max(
+    Math.trunc(r.maxId),
+    We(r.content),
+    We(r.layout)
+  );
+  return {
+    content: r.content,
+    layout: r.layout,
+    maxId: n
+  };
+}
+function ho(t) {
+  const { initialData: r, mode: n = "read" } = t, e = vo(r), o = R(n), i = R(e.meta), a = R(e.content), l = R(e.layout), u = R(e.maxId), b = R(e.variables), v = R(!1), I = N(() => ({
+    meta: i.value,
+    content: a.value,
+    layout: l.value,
+    maxId: u.value,
+    variables: b.value
+  })), d = k({
+    content: e.content,
+    layout: e.layout
+  });
+  function A(L) {
+    return JSON.stringify(L);
+  }
+  function k(L) {
+    return JSON.stringify(L);
+  }
+  function y() {
+    v.value = k({
+      content: a.value,
+      layout: l.value
+    }) !== d;
+  }
+  function D(L) {
+    o.value = L;
+  }
+  function c(L) {
+    a.value = L, u.value = Math.max(u.value, We(L)), y();
+  }
+  function m(L) {
+    l.value = L, u.value = Math.max(u.value, We(L)), y();
+  }
+  function p() {
+    return u.value++, u.value;
+  }
+  function g() {
+    return A({
+      content: a.value,
+      layout: l.value,
+      maxId: u.value
+    });
+  }
+  function E(L) {
+    try {
+      const P = nn(L);
+      a.value = P.content, l.value = P.layout, u.value = P.maxId, y();
+    } catch (P) {
+      throw Z(
+        "INVALID_SNAPSHOT",
+        "[PageBuilder] Unable to restore snapshot.",
+        {
+          cause: P,
+          details: {
+            reason: Bt(P)
+          }
+        }
+      );
+    }
+  }
+  function O() {
+    const L = nn(
+      JSON.stringify({
+        content: e.content,
+        layout: e.layout,
+        maxId: e.maxId
+      })
+    );
+    a.value = structuredClone(L.content), l.value = structuredClone(L.layout), u.value = L.maxId, b.value = structuredClone(e.variables), v.value = !1;
+  }
+  return {
+    mode: o,
+    pageData: I,
+    content: a,
+    layout: l,
+    maxId: u,
+    variables: b,
+    isDirty: v,
+    setMode: D,
+    updateContent: c,
+    updateLayout: m,
+    nextId: p,
+    getSnapshot: g,
+    restoreSnapshot: E,
+    reset: O
+  };
+}
+function _o(t = {}) {
+  const { initialSnapshot: r, initialLabel: n = "Initial state" } = t, e = r ? [{ timestamp: Date.now(), label: n, snapshot: r }] : [];
+  let o = r ?? null;
+  const i = $n({
+    selectedNodeId: null,
+    hoveredNodeId: null,
+    leftDrawerOpen: !0,
+    rightDrawerOpen: !1,
+    history: e,
+    historyIndex: e.length > 0 ? 0 : -1,
+    isDirty: !1,
+    canvasScale: 1,
+    viewport: "desktop"
+  }), a = N(() => i.historyIndex > 0), l = N(() => i.historyIndex < i.history.length - 1);
+  function u(m) {
+    i.selectedNodeId = m, m !== null && (i.rightDrawerOpen = !0);
+  }
+  function b(m) {
+    i.hoveredNodeId = m;
+  }
+  function v() {
+    i.leftDrawerOpen = !i.leftDrawerOpen;
+  }
+  function I() {
+    i.rightDrawerOpen = !i.rightDrawerOpen;
+  }
+  function d(m) {
+    i.viewport = m;
+  }
+  function A() {
+    var p;
+    if (o === null || i.historyIndex < 0) {
+      i.isDirty = !1;
+      return;
+    }
+    const m = (p = i.history[i.historyIndex]) == null ? void 0 : p.snapshot;
+    i.isDirty = m !== o;
+  }
+  function k(m, p = n) {
+    o = m, i.history = [{ timestamp: Date.now(), label: p, snapshot: m }], i.historyIndex = 0, i.isDirty = !1;
+  }
+  function y(m, p) {
+    var E;
+    if (o === null) {
+      k(p);
+      return;
+    }
+    ((E = i.history[i.historyIndex]) == null ? void 0 : E.snapshot) !== p && (i.historyIndex < i.history.length - 1 && i.history.splice(i.historyIndex + 1), i.history.push({
+      timestamp: Date.now(),
+      label: m,
+      snapshot: p
+    }), i.historyIndex = i.history.length - 1, A());
+  }
+  function D() {
+    var m;
+    if (a.value)
+      return i.historyIndex--, A(), (m = i.history[i.historyIndex]) == null ? void 0 : m.snapshot;
+  }
+  function c() {
+    var m;
+    if (l.value)
+      return i.historyIndex++, A(), (m = i.history[i.historyIndex]) == null ? void 0 : m.snapshot;
+  }
+  return {
+    ...Gn(i),
+    canUndo: a,
+    canRedo: l,
+    selectNode: u,
+    hoverNode: b,
+    toggleLeftDrawer: v,
+    toggleRightDrawer: I,
+    setViewport: d,
+    setHistoryBaseline: k,
+    pushHistory: y,
+    undo: D,
+    redo: c
+  };
+}
+function yo({ content: t, nextId: r, onUpdate: n, onSnapshot: e }) {
+  function o(y, D) {
+    const c = qn(t.value), m = JSON.stringify(c), p = qr(c);
+    return D(p) === !1 || JSON.stringify(p) === m ? !1 : (n(p), e == null || e(y), !0);
+  }
+  function i(y, D, c, m = "default", p) {
+    let g = null;
+    return !o(`Add ${D}`, (O) => {
+      if (!U(O, y)) return !1;
+      g = r();
+      const P = Zr(g, D, { slot: m, props: p });
+      return Tn(O, y, P, c, m);
+    }) || g === null ? null : g;
+  }
+  function a(y) {
+    o("Delete node", (D) => {
+      Yr(D, y);
+    });
+  }
+  function l(y, D, c, m = "default") {
+    o("Move node", (p) => Xr(p, y, D, c, m));
+  }
+  function u(y, D) {
+    o("Update props", (c) => {
+      const m = U(c, y);
+      m && (m.props = { ...m.props, ...D });
+    });
+  }
+  function b(y) {
+    o("Duplicate node", (D) => {
+      const c = U(D, y);
+      if (!c) return;
+      const m = ae(D, y);
+      if (!m) return;
+      const p = k(c);
+      m.parent.children.splice(m.index + 1, 0, p);
+    });
+  }
+  function v(y) {
+    const D = U(t.value, y);
+    if (!D || D.readonly) return !1;
+    const c = ae(t.value, y);
+    return c ? c.index > 0 : !1;
+  }
+  function I(y) {
+    const D = U(t.value, y);
+    if (!D || D.readonly) return !1;
+    const c = ae(t.value, y);
+    return c ? c.index < c.parent.children.length - 1 : !1;
+  }
+  function d(y) {
+    v(y) && o("Move node up", (D) => {
+      const c = ae(D, y);
+      if (!c || c.index <= 0) return;
+      const [m] = c.parent.children.splice(c.index, 1);
+      c.parent.children.splice(c.index - 1, 0, m);
+    });
+  }
+  function A(y) {
+    I(y) && o("Move node down", (D) => {
+      const c = ae(D, y);
+      if (!c || c.index >= c.parent.children.length - 1) return;
+      const [m] = c.parent.children.splice(c.index, 1);
+      c.parent.children.splice(c.index + 1, 0, m);
+    });
+  }
+  function k(y) {
+    return {
+      ...y,
+      id: r(),
+      props: { ...y.props },
+      children: y.children.map((D) => k(D))
+    };
+  }
+  return {
+    addNode: i,
+    deleteNode: a,
+    moveNodeTo: l,
+    updateNodeProps: u,
+    duplicateNode: b,
+    canMoveNodeUp: v,
+    canMoveNodeDown: I,
+    moveNodeUp: d,
+    moveNodeDown: A
+  };
+}
+const En = "default";
+function nt() {
+  return {
+    isDragging: !1,
+    sourceNodeId: null,
+    sourceComponentName: null,
+    isNewComponent: !1,
+    dropTargetId: null,
+    dropIndex: 0,
+    dropSlot: En
+  };
+}
+function wo() {
+  const t = R(nt());
+  function r() {
+    t.value = nt();
+  }
+  function n(l) {
+    t.value = {
+      ...nt(),
+      isDragging: !0,
+      sourceNodeId: l
+    };
+  }
+  function e(l) {
+    t.value = {
+      ...nt(),
+      isDragging: !0,
+      sourceComponentName: l,
+      isNewComponent: !0
+    };
+  }
+  function o(l, u, b = En) {
+    t.value.isDragging && (t.value.dropTargetId = l, t.value.dropIndex = u, t.value.dropSlot = b);
+  }
+  function i() {
+    const l = { ...t.value };
+    return r(), l;
+  }
+  function a() {
+    r();
+  }
+  return {
+    dragState: t,
+    startDragExisting: n,
+    startDragNew: e,
+    updateDropTarget: o,
+    endDrag: i,
+    cancelDrag: a
+  };
+}
+const Nt = 240, St = 320, Tt = 3840, Ct = 4320, xo = /* @__PURE__ */ G({
+  __name: "EditorToolbar",
+  props: {
+    canUndo: { type: Boolean, default: !1 },
+    canRedo: { type: Boolean, default: !1 },
+    isDirty: { type: Boolean, default: !1 },
+    viewport: { type: String, default: "desktop" },
+    customViewportWidth: { type: Number, default: 1024 },
+    customViewportHeight: { type: Number, default: 768 },
+    activeViewportWidth: { type: Number, default: null },
+    activeViewportHeight: { type: Number, default: null }
+  },
+  emits: ["undo", "redo", "save", "viewport-change", "custom-viewport-change"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, { t: i } = pe(), a = {
+      desktop: "toolbar.viewport.desktop",
+      tablet: "toolbar.viewport.tablet",
+      mobile: "toolbar.viewport.mobile",
+      custom: "toolbar.viewport.custom"
+    }, l = ["desktop", "tablet", "mobile", "custom"], u = R(/* @__PURE__ */ new Map());
+    function b(p) {
+      return i(a[p]);
+    }
+    function v(p) {
+      return i("toolbar.viewport.switchAriaLabel", { viewport: b(p) });
+    }
+    function I(p, g) {
+      const E = g instanceof HTMLButtonElement ? g : g && "$el" in g && g.$el instanceof HTMLButtonElement ? g.$el : null;
+      if (E) {
+        u.value.set(p, E);
+        return;
+      }
+      u.value.delete(p);
+    }
+    function d(p) {
+      return l.indexOf(p);
+    }
+    function A(p) {
+      var g;
+      (g = u.value.get(p)) == null || g.focus();
+    }
+    function k(p, g) {
+      const E = d(g);
+      if (E < 0 || p.key !== "ArrowLeft" && p.key !== "ArrowRight" && p.key !== "ArrowUp" && p.key !== "ArrowDown" && p.key !== "Home" && p.key !== "End")
+        return;
+      p.preventDefault();
+      let O = E;
+      p.key === "ArrowLeft" || p.key === "ArrowUp" ? O = (E - 1 + l.length) % l.length : p.key === "ArrowRight" || p.key === "ArrowDown" ? O = (E + 1) % l.length : p.key === "Home" ? O = 0 : p.key === "End" && (O = l.length - 1);
+      const L = l[O];
+      o("viewport-change", L), ue(() => {
+        A(L);
+      });
+    }
+    function y(p, g, E) {
+      return Math.max(g, Math.min(E, p));
+    }
+    function D(p) {
+      if (!p.trim()) return null;
+      const g = Number(p);
+      return Number.isFinite(g) ? Math.round(g) : null;
+    }
+    function c(p, g) {
+      const E = D(g);
+      if (E === null) return;
+      const O = y(p === "width" ? E : e.customViewportWidth, Nt, Tt), L = y(p === "height" ? E : e.customViewportHeight, St, Ct);
+      o("custom-viewport-change", { width: O, height: L });
+    }
+    const m = { MIN_VIEWPORT_WIDTH: Nt, MIN_VIEWPORT_HEIGHT: St, MAX_VIEWPORT_WIDTH: Tt, MAX_VIEWPORT_HEIGHT: Ct, props: e, emit: o, t: i, VIEWPORT_LABEL_KEYS: a, VIEWPORT_ORDER: l, viewportButtonRefs: u, getViewportLabel: b, getViewportSwitchAriaLabel: v, setViewportButtonRef: I, getViewportIndex: d, focusViewportButton: A, handleViewportKeydown: k, clampViewportSize: y, parseViewportSize: D, updateCustomViewportSize: c, get VIEWPORT_PRESETS() {
+      return Xe;
+    } };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+}), Io = ["aria-label"], Do = ["aria-label"], No = ["disabled", "aria-label", "title"], So = ["disabled", "aria-label", "title"], To = ["aria-label"], Co = ["title", "aria-label", "aria-pressed", "data-viewport-preset", "onClick", "onKeydown"], ko = {
+  key: 0,
+  class: "ipb-toolbar__custom-size"
+}, Po = { class: "ipb-toolbar__size-control" }, Eo = ["aria-label", "value"], Ro = { class: "ipb-toolbar__size-control" }, Ao = ["aria-label", "value"], Lo = {
+  key: 1,
+  class: "ipb-toolbar__viewport-size",
+  "aria-live": "polite"
+}, Vo = ["aria-label"], Mo = ["aria-label"], Oo = ["aria-label", "title"];
+function Bo(t, r, n, e, o, i) {
+  return x(), C("header", {
+    class: "ipb-toolbar",
+    role: "toolbar",
+    "aria-label": e.t("toolbar.aria.toolbar")
+  }, [
+    S("div", {
+      class: "ipb-toolbar__left",
+      role: "group",
+      "aria-label": e.t("toolbar.aria.historyControls")
+    }, [
+      S("button", {
+        type: "button",
+        class: "ipb-toolbar__btn",
+        disabled: !n.canUndo,
+        "aria-label": e.t("toolbar.undo.ariaLabel"),
+        title: e.t("toolbar.undo.title"),
+        "aria-keyshortcuts": "Control+Z Meta+Z",
+        onClick: r[0] || (r[0] = (a) => t.$emit("undo"))
+      }, " ↩ ", 8, No),
+      S("button", {
+        type: "button",
+        class: "ipb-toolbar__btn",
+        disabled: !n.canRedo,
+        "aria-label": e.t("toolbar.redo.ariaLabel"),
+        title: e.t("toolbar.redo.title"),
+        "aria-keyshortcuts": "Control+Y Meta+Y Control+Shift+Z Meta+Shift+Z",
+        onClick: r[1] || (r[1] = (a) => t.$emit("redo"))
+      }, " ↪ ", 8, So)
+    ], 8, Do),
+    S("div", {
+      class: "ipb-toolbar__center",
+      role: "group",
+      "aria-label": e.t("toolbar.aria.viewportControls")
+    }, [
+      (x(!0), C(
+        he,
+        null,
+        ve(e.VIEWPORT_PRESETS, (a, l) => (x(), C("button", {
+          key: l,
+          ref_for: !0,
+          ref: (u) => e.setViewportButtonRef(l, u),
+          type: "button",
+          class: _e(["ipb-toolbar__btn", { "ipb-toolbar__btn--active": n.viewport === l }]),
+          title: e.getViewportLabel(l),
+          "aria-label": e.getViewportSwitchAriaLabel(l),
+          "aria-pressed": n.viewport === l ? "true" : "false",
+          "data-viewport-preset": l,
+          onClick: (u) => t.$emit("viewport-change", l),
+          onKeydown: (u) => e.handleViewportKeydown(u, l)
+        }, z(e.getViewportLabel(l)), 43, Co))),
+        128
+        /* KEYED_FRAGMENT */
+      )),
+      n.viewport === "custom" ? (x(), C("div", ko, [
+        S("label", Po, [
+          S(
+            "span",
+            null,
+            z(e.t("toolbar.viewport.width.short")),
+            1
+            /* TEXT */
+          ),
+          S("input", {
+            class: "ipb-toolbar__size-input",
+            type: "number",
+            inputmode: "numeric",
+            "aria-label": e.t("toolbar.viewport.width.ariaLabel"),
+            min: e.MIN_VIEWPORT_WIDTH,
+            max: e.MAX_VIEWPORT_WIDTH,
+            value: n.customViewportWidth,
+            onInput: r[2] || (r[2] = (a) => e.updateCustomViewportSize("width", a.target.value))
+          }, null, 40, Eo)
+        ]),
+        S("label", Ro, [
+          S(
+            "span",
+            null,
+            z(e.t("toolbar.viewport.height.short")),
+            1
+            /* TEXT */
+          ),
+          S("input", {
+            class: "ipb-toolbar__size-input",
+            type: "number",
+            inputmode: "numeric",
+            "aria-label": e.t("toolbar.viewport.height.ariaLabel"),
+            min: e.MIN_VIEWPORT_HEIGHT,
+            max: e.MAX_VIEWPORT_HEIGHT,
+            value: n.customViewportHeight,
+            onInput: r[3] || (r[3] = (a) => e.updateCustomViewportSize("height", a.target.value))
+          }, null, 40, Ao)
+        ])
+      ])) : Y("v-if", !0),
+      n.activeViewportWidth !== null && n.activeViewportHeight !== null ? (x(), C(
+        "span",
+        Lo,
+        z(n.activeViewportWidth) + "×" + z(n.activeViewportHeight),
+        1
+        /* TEXT */
+      )) : Y("v-if", !0)
+    ], 8, To),
+    S("div", {
+      class: "ipb-toolbar__right",
+      role: "group",
+      "aria-label": e.t("toolbar.aria.saveControls")
+    }, [
+      n.isDirty ? (x(), C("span", {
+        key: 0,
+        class: "ipb-toolbar__dirty-indicator",
+        role: "status",
+        "aria-label": e.t("toolbar.aria.unsavedChanges")
+      }, " ● ", 8, Mo)) : Y("v-if", !0),
+      S("button", {
+        type: "button",
+        class: "ipb-toolbar__btn ipb-toolbar__btn--primary",
+        "aria-label": e.t("toolbar.save.ariaLabel"),
+        title: e.t("toolbar.save.title"),
+        "aria-keyshortcuts": "Control+S Meta+S",
+        onClick: r[4] || (r[4] = (a) => t.$emit("save"))
+      }, z(e.t("toolbar.save")), 9, Oo)
+    ], 8, Vo)
+  ], 8, Io);
+}
+const zo = /* @__PURE__ */ q(xo, [["render", Bo], ["__scopeId", "data-v-fa6dcc09"], ["__file", "/app/src/components/editor/EditorToolbar.vue"]]);
+function jo(t, r) {
+  const n = Le(t.name);
+  return !n || n.slots.length === 0 ? [] : n.slots.filter((e) => {
+    const o = e.allowedComponents;
+    return !o || o.length === 0 || o.includes(r);
+  });
+}
+function Ne(t, r, n) {
+  const e = jo(t, n);
+  if (e.length === 0) return null;
+  if (r) {
+    const i = e.find((a) => a.name === r);
+    if (i) return i.name;
+  }
+  const o = e.find((i) => i.name === "default");
+  return (o == null ? void 0 : o.name) ?? e[0].name;
+}
+function rt(t) {
+  return Number.isFinite(t) ? Math.trunc(t) : 0;
+}
+function Ho(t) {
+  return `ipb-node-${t}`;
+}
+function Wo(t, r = {}) {
+  const n = r.createKey ?? ((i) => Ho(i.id)), e = [], o = [
+    { node: t, depth: 0, parentId: null }
+  ];
+  for (; o.length > 0; ) {
+    const i = o.pop();
+    if (!i) break;
+    const a = e.length;
+    e.push({
+      node: i.node,
+      id: i.node.id,
+      key: n(i.node),
+      depth: i.depth,
+      index: a,
+      parentId: i.parentId
+    });
+    for (let l = i.node.children.length - 1; l >= 0; l--)
+      o.push({
+        node: i.node.children[l],
+        depth: i.depth + 1,
+        parentId: i.node.id
+      });
+  }
+  return e;
+}
+function Uo(t, r, n, e = 0) {
+  const o = Math.max(0, rt(t)), i = Math.max(0, rt(n)), a = Math.max(0, rt(e));
+  if (o === 0 || i === 0)
+    return { start: 0, end: 0, size: 0, total: o };
+  const l = o - 1, u = Math.min(Math.max(rt(r), 0), l), b = Math.max(0, u - a), v = Math.min(o, u + i + a);
+  return {
+    start: b,
+    end: v,
+    size: Math.max(0, v - b),
+    total: o
+  };
+}
+function ml(t, r, n, e = 0) {
+  const o = Uo(t.length, r, n, e);
+  return {
+    rows: t.slice(o.start, o.end),
+    range: o
+  };
+}
+function gl(t) {
+  const r = [], n = /* @__PURE__ */ new Map(), e = /* @__PURE__ */ new Map();
+  for (let o = 0; o < t.length; o++) {
+    const i = t[o];
+    r[o] = i.key, n.has(i.key) || n.set(i.key, o), e.has(i.id) || e.set(i.id, o);
+  }
+  return {
+    keyByIndex: r,
+    indexByKey: n,
+    indexByNodeId: e
+  };
+}
+const Ko = /* @__PURE__ */ G({
+  __name: "TreePanel",
+  props: {
+    content: { type: Object, required: !0 },
+    selectedNodeId: { type: Number, default: null }
+  },
+  emits: ["select"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, { t: i } = pe(), a = je(Ht, null), l = je(Wt, null), u = R(!1), b = R(null), v = R(null), I = N(() => e.content.id);
+    function d(f, w, T = "on") {
+      var fe, ye;
+      const W = (ye = (fe = f.target) == null ? void 0 : fe.closest) == null ? void 0 : ye.call(fe, "[data-drop-zone]"), H = W == null ? void 0 : W.getAttribute("data-drop-zone");
+      if (H === "above") return "above";
+      if (H === "below") return "below";
+      if (!w) return T;
+      const K = w.getBoundingClientRect(), re = f.clientY - K.top, oe = K.height / 3;
+      return re < oe ? "above" : re > 2 * oe ? "below" : "on";
+    }
+    function A(f, w) {
+      const T = U(e.content, f);
+      if (!T) return null;
+      const W = T.slot ?? "default", H = ae(e.content, f);
+      if (!H) {
+        const re = e.content.id, oe = w === "above" ? 0 : e.content.children.length;
+        return { parentId: re, index: oe, slot: "default" };
+      }
+      const K = w === "above" ? H.index : H.index + 1;
+      return { parentId: H.parent.id, index: K, slot: W };
+    }
+    function k(f, w) {
+      return f.id === w ? !0 : f.children.some((T) => k(T, w));
+    }
+    function y(f) {
+      var w;
+      return f.sourceComponentName ? f.sourceComponentName : f.sourceNodeId === null ? null : ((w = U(e.content, f.sourceNodeId)) == null ? void 0 : w.name) ?? null;
+    }
+    function D(f, w) {
+      if (f.sourceNodeId === w) return !1;
+      const T = y(f);
+      if (!T) return !1;
+      const W = U(e.content, w);
+      if (!W || W.readonly) return !1;
+      if (!f.isNewComponent && f.sourceNodeId !== null) {
+        const H = U(e.content, f.sourceNodeId);
+        if (!H || H.readonly || k(H, w)) return !1;
+      }
+      return Ne(W, "default", T) !== null;
+    }
+    function c(f, w, T) {
+      const W = y(f);
+      if (!W) return !1;
+      const H = U(e.content, w);
+      if (!H || H.readonly || Ne(H, T, W) === null) return !1;
+      if (!f.isNewComponent && f.sourceNodeId !== null) {
+        const K = U(e.content, f.sourceNodeId);
+        if (!K || K.readonly || k(K, w)) return !1;
+      }
+      return !0;
+    }
+    const m = N(() => Wo(e.content).map((f) => ({
+      id: f.id,
+      key: f.key,
+      name: f.node.name,
+      depth: f.depth,
+      readonly: !!f.node.readonly
+    }))), p = R(/* @__PURE__ */ new Map());
+    function g(f, w) {
+      const T = w instanceof HTMLButtonElement ? w : w && "$el" in w && w.$el instanceof HTMLButtonElement ? w.$el : null;
+      if (T) {
+        p.value.set(f, T);
+        return;
+      }
+      p.value.delete(f);
+    }
+    function E(f) {
+      if (!(f instanceof HTMLElement)) return null;
+      const w = f.dataset.nodeId;
+      if (!w) return null;
+      const T = Number(w);
+      return Number.isInteger(T) ? T : null;
+    }
+    function O(f = !0) {
+      if (m.value.length === 0) return -1;
+      if (e.selectedNodeId !== null) {
+        const w = m.value.findIndex((T) => T.id === e.selectedNodeId);
+        if (w >= 0) return w;
+      }
+      return f ? 0 : -1;
+    }
+    function L(f) {
+      var w;
+      (w = p.value.get(f)) == null || w.focus();
+    }
+    function P(f) {
+      const w = m.value[f];
+      w && (o("select", w.id), ue(() => {
+        L(w.id);
+      }));
+    }
+    function F(f) {
+      var T;
+      const w = O();
+      return ((T = m.value[w]) == null ? void 0 : T.id) === f;
+    }
+    const ee = N(() => !!(a && l)), te = (f) => !!(l != null && l.dragState.value.isDragging && b.value === f && v.value === "on"), ne = (f) => !!(l != null && l.dragState.value.isDragging && b.value === f && v.value === "above"), le = (f) => !!(l != null && l.dragState.value.isDragging && b.value === f && v.value === "below");
+    function me(f) {
+      return !ee.value || f.readonly ? !1 : f.id !== I.value;
+    }
+    function Te(f, w) {
+      !l || !me(f) || (u.value = !1, l.startDragExisting(f.id), w.dataTransfer && (w.dataTransfer.effectAllowed = "move", w.dataTransfer.setData("application/x-ipb-node-id", String(f.id)), w.dataTransfer.setData("text/plain", String(f.id))));
+    }
+    function Ke(f, w) {
+      if (!l || !l.dragState.value.isDragging) return;
+      const T = l.dragState.value, W = d(w, p.value.get(f.id));
+      if (W === "on") {
+        if (!D(T, f.id)) return;
+        w.preventDefault(), w.dataTransfer && (w.dataTransfer.dropEffect = T.isNewComponent ? "copy" : "move"), b.value = f.id, v.value = "on", l.updateDropTarget(f.id, 0, "default");
+        return;
+      }
+      const H = A(f.id, W);
+      !H || !c(T, H.parentId, H.slot) || (w.preventDefault(), w.dataTransfer && (w.dataTransfer.dropEffect = T.isNewComponent ? "copy" : "move"), b.value = f.id, v.value = W, l.updateDropTarget(H.parentId, H.index, H.slot));
+    }
+    function Fe(f, w) {
+      var Ce, $e;
+      if (w.preventDefault(), !a || !l || !l.dragState.value.isDragging) return;
+      const T = l.dragState.value, H = (b.value === f.id && v.value ? v.value : null) ?? d(w, p.value.get(f.id), "on");
+      if (H === "on") {
+        const we = U(e.content, f.id);
+        if (!we || !D(T, f.id)) {
+          l.cancelDrag();
+          return;
+        }
+        const xe = y(T), Oe = xe ? Ne(we, "default", xe) ?? "default" : "default";
+        if (T.isNewComponent && T.sourceComponentName) {
+          const Ge = (Ce = Le(T.sourceComponentName)) == null ? void 0 : Ce.defaultProps, Be = a.addNode(f.id, T.sourceComponentName, 0, Oe, Ge);
+          u.value = !0, l.endDrag(), Be !== null && o("select", Be);
+          return;
+        }
+        if (T.sourceNodeId === null) return;
+        a.moveNodeTo(T.sourceNodeId, f.id, 0, Oe), u.value = !0, l.endDrag(), o("select", T.sourceNodeId);
+        return;
+      }
+      const K = A(f.id, H);
+      if (!K || !c(T, K.parentId, K.slot)) {
+        l.cancelDrag();
+        return;
+      }
+      const re = U(e.content, K.parentId), oe = y(T), fe = re && oe ? Ne(re, K.slot, oe) ?? K.slot : K.slot;
+      if (T.isNewComponent && T.sourceComponentName) {
+        const we = ($e = Le(T.sourceComponentName)) == null ? void 0 : $e.defaultProps, xe = a.addNode(
+          K.parentId,
+          T.sourceComponentName,
+          K.index,
+          fe,
+          we
+        );
+        u.value = !0, l.endDrag(), xe !== null && o("select", xe);
+        return;
+      }
+      if (T.sourceNodeId === null) return;
+      let ye = K.index;
+      const Me = ae(e.content, T.sourceNodeId);
+      Me && Me.parent.id === K.parentId && Me.index < K.index && (ye = K.index - 1), a.moveNodeTo(T.sourceNodeId, K.parentId, ye, fe), u.value = !0, l.endDrag(), o("select", T.sourceNodeId);
+    }
+    function Ve() {
+      b.value = null, v.value = null, !u.value && (l != null && l.dragState.value.isDragging) && l.cancelDrag();
+    }
+    function h(f) {
+      if (m.value.length === 0) return;
+      const w = E(f.target), T = w === null ? O() : m.value.findIndex((W) => W.id === w);
+      if (!(T < 0)) {
+        if (f.key === "ArrowDown") {
+          f.preventDefault();
+          const W = Math.min(m.value.length - 1, T + 1);
+          P(W);
+          return;
+        }
+        if (f.key === "ArrowUp") {
+          f.preventDefault();
+          const W = Math.max(0, T - 1);
+          P(W);
+          return;
+        }
+        if (f.key === "Home") {
+          f.preventDefault(), P(0);
+          return;
+        }
+        if (f.key === "End") {
+          f.preventDefault(), P(m.value.length - 1);
+          return;
+        }
+        (f.key === "Enter" || f.key === " ") && (f.preventDefault(), P(T));
+      }
+    }
+    de(
+      () => e.selectedNodeId,
+      (f) => {
+        f !== null && ue(() => {
+          L(f);
+        });
+      }
+    );
+    const B = { props: e, emit: o, t: i, nodeTree: a, dragDrop: l, dropHandled: u, dropTargetRowId: b, dropZone: v, rootId: I, getDropZoneFromEvent: d, getSiblingDropTarget: A, isNodeInSubtree: k, getDraggedComponentName: y, isValidDropTarget: D, isValidSiblingDropTarget: c, rows: m, rowButtonRefs: p, setRowButtonRef: g, getRowIdFromEventTarget: E, getActiveRowIndex: O, focusRowById: L, selectRowByIndex: P, isRowTabStop: F, canDragDrop: ee, isDropTargetOn: te, isDropTargetAbove: ne, isDropTargetBelow: le, isRowDraggable: me, handleTreeDragStart: Te, handleTreeDragOver: Ke, handleTreeDrop: Fe, handleTreeDragEnd: Ve, handleTreeKeydown: h };
+    return Object.defineProperty(B, "__isScriptSetup", { enumerable: !1, value: !0 }), B;
+  }
+}), Fo = { class: "ipb-tree-panel" }, $o = ["aria-label"], Go = ["onDragover", "onDrop"], qo = {
+  key: 0,
+  class: "ipb-tree-panel__drop-line",
+  "data-drop-zone": "above",
+  "aria-hidden": "true"
+}, Yo = ["data-node-id", "draggable", "aria-selected", "aria-level", "aria-readonly", "tabindex", "onClick", "onDragstart"], Xo = { class: "ipb-tree-panel__name" }, Zo = { class: "ipb-tree-panel__id" }, Jo = {
+  key: 0,
+  class: "ipb-tree-panel__readonly"
+}, Qo = {
+  key: 1,
+  class: "ipb-tree-panel__drop-line",
+  "data-drop-zone": "below",
+  "aria-hidden": "true"
+};
+function ea(t, r, n, e, o, i) {
+  return x(), C("div", Fo, [
+    S("div", {
+      class: "ipb-tree-panel__list",
+      role: "tree",
+      "aria-label": e.t("treePanel.ariaLabel"),
+      onKeydown: e.handleTreeKeydown
+    }, [
+      (x(!0), C(
+        he,
+        null,
+        ve(e.rows, (a) => (x(), C("div", {
+          key: a.key,
+          class: "ipb-tree-panel__row-wrapper",
+          onDragover: (l) => e.handleTreeDragOver(a, l),
+          onDrop: (l) => e.handleTreeDrop(a, l)
+        }, [
+          e.isDropTargetAbove(a.id) ? (x(), C("div", qo)) : Y("v-if", !0),
+          S("button", {
+            ref_for: !0,
+            ref: (l) => e.setRowButtonRef(a.id, l),
+            type: "button",
+            class: _e(["ipb-tree-panel__item", {
+              "ipb-tree-panel__item--selected": n.selectedNodeId === a.id,
+              "ipb-tree-panel__item--readonly": a.readonly,
+              "ipb-tree-panel__item--drop-target": e.isDropTargetOn(a.id),
+              "ipb-tree-panel__item--draggable": e.isRowDraggable(a)
+            }]),
+            style: J({ paddingInlineStart: `${a.depth * 16 + 8}px` }),
+            "data-node-id": a.id,
+            draggable: e.isRowDraggable(a),
+            role: "treeitem",
+            "aria-selected": n.selectedNodeId === a.id ? "true" : "false",
+            "aria-level": a.depth + 1,
+            "aria-readonly": a.readonly ? "true" : "false",
+            tabindex: e.isRowTabStop(a.id) ? 0 : -1,
+            onClick: (l) => e.emit("select", a.id),
+            onDragstart: (l) => e.handleTreeDragStart(a, l),
+            onDragend: e.handleTreeDragEnd
+          }, [
+            S(
+              "span",
+              Xo,
+              z(a.name),
+              1
+              /* TEXT */
+            ),
+            S(
+              "span",
+              Zo,
+              "#" + z(a.id),
+              1
+              /* TEXT */
+            ),
+            a.readonly ? (x(), C(
+              "span",
+              Jo,
+              z(e.t("treePanel.readonly")),
+              1
+              /* TEXT */
+            )) : Y("v-if", !0)
+          ], 46, Yo),
+          e.isDropTargetBelow(a.id) ? (x(), C("div", Qo)) : Y("v-if", !0)
+        ], 40, Go))),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ], 40, $o)
+  ]);
+}
+const ta = /* @__PURE__ */ q(Ko, [["render", ea], ["__scopeId", "data-v-3fdd09e6"], ["__file", "/app/src/components/editor/TreePanel.vue"]]), ze = "ipb-left-drawer-content", na = "ipb-left-drawer-tree-panel", ra = /* @__PURE__ */ G({
+  __name: "LeftDrawer",
+  props: {
+    open: { type: Boolean, default: !0 },
+    content: { type: Object, default: null },
+    selectedNodeId: { type: Number, default: null }
+  },
+  emits: ["toggle", "dragStart", "dragEnd", "add", "select"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, i = N(() => rr()), { t: a } = pe(), l = R(""), u = R(!0), b = R(null), v = R(null), I = R(null), d = R(!1), A = N(() => {
+      const P = l.value.trim().toLowerCase();
+      if (!P)
+        return i.value;
+      const F = /* @__PURE__ */ new Map();
+      for (const [ee, te] of i.value) {
+        const ne = te.filter((le) => [le.name, le.label, le.description ?? "", ee, le.category].some((Te) => Te.toLowerCase().includes(P)));
+        ne.length > 0 && F.set(ee, ne);
+      }
+      return F;
+    });
+    function k(P, F) {
+      F.dataTransfer && (F.dataTransfer.effectAllowed = "copy", F.dataTransfer.setData("application/x-ipb-component", P), F.dataTransfer.setData("text/plain", P)), o("dragStart", P);
+    }
+    function y() {
+      o("dragEnd");
+    }
+    function D(P) {
+      o("add", P);
+    }
+    function c() {
+      u.value = !u.value;
+    }
+    function m() {
+      const P = b.value;
+      return P ? P.querySelector(
+        `#${ze} button:not([disabled]), #${ze} input:not([disabled]), #${ze} select:not([disabled]), #${ze} textarea:not([disabled]), #${ze} [tabindex]:not([tabindex="-1"])`
+      ) : null;
+    }
+    function p() {
+      var P, F;
+      (P = I.value) == null || P.focus(), document.activeElement !== I.value && ((F = m()) == null || F.focus());
+    }
+    function g() {
+      d.value = !e.open, o("toggle");
+    }
+    function E(P) {
+      return a("leftDrawer.category.ariaLabel", { category: P });
+    }
+    function O(P) {
+      return a("leftDrawer.component.dragAriaLabel", { label: P });
+    }
+    de(
+      () => e.open,
+      (P, F) => {
+        var ee;
+        if (P && !F && d.value && ue(() => {
+          p();
+        }), !P && F) {
+          const te = document.activeElement;
+          te instanceof HTMLElement && ((ee = b.value) != null && ee.contains(te)) && ue(() => {
+            var ne;
+            (ne = v.value) == null || ne.focus();
+          });
+        }
+        P !== F && (d.value = !1);
+      }
+    );
+    const L = { props: e, emit: o, categorizedComponents: i, t: a, searchQuery: l, treeOpen: u, DRAWER_CONTENT_ID: ze, TREE_PANEL_REGION_ID: na, drawerRef: b, drawerToggleRef: v, searchInputRef: I, focusContentOnNextOpen: d, filteredCategorizedComponents: A, handleDragStart: k, handleDragEnd: y, handleComponentAdd: D, toggleTree: c, getFirstFocusableDrawerControl: m, focusDrawerContent: p, handleDrawerToggle: g, getCategoryAriaLabel: E, getDragAriaLabel: O, TreePanel: ta };
+    return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
+  }
+}), oa = ["aria-label"], aa = { class: "ipb-left-drawer__header" }, ia = {
+  class: "ipb-left-drawer__title",
+  id: "ipb-left-drawer-title"
+}, la = ["aria-label", "aria-expanded"], sa = { class: "ipb-left-drawer__section" }, da = {
+  class: "ipb-left-drawer__section-title",
+  id: "ipb-left-drawer-components-title"
+}, ca = {
+  class: "ipb-left-drawer__search",
+  role: "search"
+}, ua = ["placeholder", "aria-label"], fa = { class: "ipb-left-drawer__category-title" }, pa = ["aria-label"], ma = ["title", "aria-label", "onClick", "onDragstart"], ga = {
+  class: "ipb-left-drawer__component-icon",
+  "aria-hidden": "true"
+}, ba = { class: "ipb-left-drawer__component-label" }, va = {
+  key: 0,
+  class: "ipb-left-drawer__empty"
+}, ha = {
+  key: 0,
+  class: "ipb-left-drawer__section ipb-left-drawer__section--tree"
+}, _a = { class: "ipb-left-drawer__section-header" }, ya = { class: "ipb-left-drawer__section-title" }, wa = ["aria-expanded", "aria-label"], xa = ["aria-label"];
+function Ia(t, r, n, e, o, i) {
+  return x(), C("aside", {
+    ref: "drawerRef",
+    class: _e(["ipb-left-drawer", { "ipb-left-drawer--open": n.open }]),
+    "aria-label": e.t("leftDrawer.aria.componentPalette"),
+    role: "complementary"
+  }, [
+    S("div", aa, [
+      S(
+        "span",
+        ia,
+        z(e.t("leftDrawer.title")),
+        1
+        /* TEXT */
+      ),
+      S("button", {
+        ref: "drawerToggleRef",
+        type: "button",
+        class: "ipb-left-drawer__toggle",
+        "aria-label": e.t("leftDrawer.toggle.ariaLabel"),
+        "aria-expanded": n.open ? "true" : "false",
+        "aria-controls": e.DRAWER_CONTENT_ID,
+        onClick: e.handleDrawerToggle
+      }, z(n.open ? "◀" : "▶"), 9, la)
+    ]),
+    n.open ? (x(), C("div", {
+      key: 0,
+      id: e.DRAWER_CONTENT_ID,
+      class: "ipb-left-drawer__content",
+      role: "region",
+      "aria-labelledby": "ipb-left-drawer-title"
+    }, [
+      S("div", sa, [
+        S(
+          "h3",
+          da,
+          z(e.t("leftDrawer.section.components")),
+          1
+          /* TEXT */
+        ),
+        S("div", ca, [
+          Yn(S("input", {
+            ref: "searchInputRef",
+            "onUpdate:modelValue": r[0] || (r[0] = (a) => e.searchQuery = a),
+            type: "search",
+            class: "ipb-left-drawer__search-input",
+            placeholder: e.t("leftDrawer.search.placeholder"),
+            "aria-label": e.t("leftDrawer.search.ariaLabel")
+          }, null, 8, ua), [
+            [Xn, e.searchQuery]
+          ])
+        ]),
+        (x(!0), C(
+          he,
+          null,
+          ve(e.filteredCategorizedComponents, ([a, l]) => (x(), C("div", {
+            key: a,
+            class: "ipb-left-drawer__category"
+          }, [
+            S(
+              "h4",
+              fa,
+              z(a),
+              1
+              /* TEXT */
+            ),
+            S("div", {
+              class: "ipb-left-drawer__component-list",
+              role: "group",
+              "aria-label": e.getCategoryAriaLabel(a)
+            }, [
+              (x(!0), C(
+                he,
+                null,
+                ve(l, (u) => (x(), C("button", {
+                  key: u.name,
+                  type: "button",
+                  class: "ipb-left-drawer__component-item",
+                  draggable: "true",
+                  title: u.description,
+                  "aria-label": e.getDragAriaLabel(u.label),
+                  "aria-keyshortcuts": "Enter Space",
+                  onClick: (b) => e.handleComponentAdd(u.name),
+                  onDragstart: (b) => e.handleDragStart(u.name, b),
+                  onDragend: e.handleDragEnd
+                }, [
+                  S(
+                    "span",
+                    ga,
+                    z(u.icon ?? "◻"),
+                    1
+                    /* TEXT */
+                  ),
+                  S(
+                    "span",
+                    ba,
+                    z(u.label),
+                    1
+                    /* TEXT */
+                  )
+                ], 40, ma))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ], 8, pa)
+          ]))),
+          128
+          /* KEYED_FRAGMENT */
+        )),
+        e.filteredCategorizedComponents.size === 0 ? (x(), C(
+          "p",
+          va,
+          z(e.t("leftDrawer.empty")),
+          1
+          /* TEXT */
+        )) : Y("v-if", !0)
+      ]),
+      n.content ? (x(), C("div", ha, [
+        S("div", _a, [
+          S(
+            "h3",
+            ya,
+            z(e.t("leftDrawer.section.tree")),
+            1
+            /* TEXT */
+          ),
+          S("button", {
+            type: "button",
+            class: "ipb-left-drawer__section-toggle",
+            "aria-expanded": e.treeOpen ? "true" : "false",
+            "aria-controls": e.TREE_PANEL_REGION_ID,
+            "aria-label": e.t("leftDrawer.tree.toggle.ariaLabel"),
+            onClick: e.toggleTree
+          }, z(e.treeOpen ? "−" : "+"), 9, wa)
+        ]),
+        e.treeOpen ? (x(), C("div", {
+          key: 0,
+          id: e.TREE_PANEL_REGION_ID,
+          role: "region",
+          "aria-label": e.t("treePanel.ariaLabel")
+        }, [
+          Re(e.TreePanel, {
+            content: n.content,
+            "selected-node-id": n.selectedNodeId,
+            onSelect: r[1] || (r[1] = (a) => e.emit("select", a))
+          }, null, 8, ["content", "selected-node-id"])
+        ], 8, xa)) : Y("v-if", !0)
+      ])) : Y("v-if", !0)
+    ])) : Y("v-if", !0)
+  ], 10, oa);
+}
+const Da = /* @__PURE__ */ q(ra, [["render", Ia], ["__scopeId", "data-v-32b2016a"], ["__file", "/app/src/components/editor/LeftDrawer.vue"]]), Na = /* @__PURE__ */ G({
+  __name: "PropTextEditor",
+  props: {
+    modelValue: { type: [String, Number, Boolean], default: "" },
+    placeholder: { type: String, default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n;
+    function i(l) {
+      o("update:modelValue", l.target.value);
+    }
+    const a = { props: e, emit: o, handleInput: i };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+  }
+}), Sa = ["value", "placeholder"];
+function Ta(t, r, n, e, o, i) {
+  return x(), C("input", {
+    class: "ipb-prop-editor ipb-prop-editor--text",
+    type: "text",
+    value: String(e.props.modelValue ?? ""),
+    placeholder: n.placeholder,
+    onInput: e.handleInput
+  }, null, 40, Sa);
+}
+const at = /* @__PURE__ */ q(Na, [["render", Ta], ["__scopeId", "data-v-85eee1e0"], ["__file", "/app/src/components/editor/prop-editors/PropTextEditor.vue"]]), Ca = /* @__PURE__ */ G({
+  __name: "PropNumberEditor",
+  props: {
+    modelValue: { type: [String, Number], default: void 0 },
+    min: { type: Number, default: void 0 },
+    max: { type: Number, default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, i = N(() => typeof e.modelValue == "number" ? String(e.modelValue) : typeof e.modelValue == "string" ? e.modelValue : "");
+    function a(u) {
+      const b = u.target.value.trim();
+      if (b === "") {
+        o("update:modelValue", void 0);
+        return;
+      }
+      const v = Number(b);
+      o("update:modelValue", Number.isNaN(v) ? void 0 : v);
+    }
+    const l = { props: e, emit: o, inputValue: i, handleInput: a };
+    return Object.defineProperty(l, "__isScriptSetup", { enumerable: !1, value: !0 }), l;
+  }
+}), ka = ["value", "min", "max"];
+function Pa(t, r, n, e, o, i) {
+  return x(), C("input", {
+    class: "ipb-prop-editor ipb-prop-editor--number",
+    type: "number",
+    value: e.inputValue,
+    min: n.min,
+    max: n.max,
+    onInput: e.handleInput
+  }, null, 40, ka);
+}
+const Ea = /* @__PURE__ */ q(Ca, [["render", Pa], ["__scopeId", "data-v-5ad594ed"], ["__file", "/app/src/components/editor/prop-editors/PropNumberEditor.vue"]]), Ra = /* @__PURE__ */ G({
+  inheritAttrs: !1,
+  __name: "PropBooleanEditor",
+  props: {
+    modelValue: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = n;
+    function o(b) {
+      e("update:modelValue", b.target.checked);
+    }
+    const { t: i } = pe(), a = dt(), l = N(() => {
+      const { class: b, style: v, ...I } = a;
+      return I;
+    }), u = { emit: e, handleChange: o, t: i, attrs: a, checkboxAttrs: l };
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+  }
+}), Aa = ["checked"];
+function La(t, r, n, e, o, i) {
+  return x(), C(
+    "label",
+    {
+      class: _e(["ipb-prop-editor ipb-prop-editor--boolean", e.attrs.class]),
+      style: J(e.attrs.style)
+    },
+    [
+      S("input", He(e.checkboxAttrs, {
+        type: "checkbox",
+        checked: n.modelValue,
+        onChange: e.handleChange
+      }), null, 16, Aa),
+      S(
+        "span",
+        null,
+        z(n.modelValue ? e.t("propBoolean.enabled") : e.t("propBoolean.disabled")),
+        1
+        /* TEXT */
+      )
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const Va = /* @__PURE__ */ q(Ra, [["render", La], ["__scopeId", "data-v-264db8de"], ["__file", "/app/src/components/editor/prop-editors/PropBooleanEditor.vue"]]), Ma = /* @__PURE__ */ G({
+  __name: "PropSelectEditor",
+  props: {
+    modelValue: { type: [String, Number, Boolean], default: void 0 },
+    options: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, i = N(() => {
+      if (!e.options || e.options.length === 0) return "";
+      const b = e.options.findIndex((v) => v.value === e.modelValue);
+      return b >= 0 ? String(b) : "0";
+    });
+    function a(b) {
+      const v = b.target.value;
+      if (v === "" || !e.options) {
+        o("update:modelValue", void 0);
+        return;
+      }
+      const I = e.options[Number(v)];
+      o("update:modelValue", I == null ? void 0 : I.value);
+    }
+    const { t: l } = pe(), u = { props: e, emit: o, selectedIndex: i, handleChange: a, t: l };
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+  }
+}), Oa = ["value"], Ba = {
+  key: 0,
+  value: ""
+}, za = ["value"];
+function ja(t, r, n, e, o, i) {
+  return x(), C("select", {
+    class: "ipb-prop-editor ipb-prop-editor--select",
+    value: e.selectedIndex,
+    onChange: e.handleChange
+  }, [
+    !n.options || n.options.length === 0 ? (x(), C(
+      "option",
+      Ba,
+      z(e.t("propSelect.noOptions")),
+      1
+      /* TEXT */
+    )) : Y("v-if", !0),
+    (x(!0), C(
+      he,
+      null,
+      ve(n.options ?? [], (a, l) => (x(), C("option", {
+        key: `${a.label}-${l}`,
+        value: String(l)
+      }, z(a.label), 9, za))),
+      128
+      /* KEYED_FRAGMENT */
+    ))
+  ], 40, Oa);
+}
+const Ha = /* @__PURE__ */ q(Ma, [["render", ja], ["__scopeId", "data-v-565c4e19"], ["__file", "/app/src/components/editor/prop-editors/PropSelectEditor.vue"]]), Wa = /* @__PURE__ */ G({
+  inheritAttrs: !1,
+  __name: "PropColorEditor",
+  props: {
+    modelValue: { type: String, default: "" }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, i = N(() => {
+      const I = e.modelValue.trim();
+      return /^#[0-9a-fA-F]{6}$/.test(I) ? I : /^#[0-9a-fA-F]{3}$/.test(I) ? `#${I.slice(1).split("").map((A) => `${A}${A}`).join("")}` : "#000000";
+    });
+    function a(I) {
+      o("update:modelValue", I.target.value);
+    }
+    function l(I) {
+      o("update:modelValue", I.target.value);
+    }
+    const u = dt(), b = N(() => {
+      const { class: I, style: d, ...A } = u;
+      return A;
+    }), v = { props: e, emit: o, pickerValue: i, handlePickerInput: a, handleTextInput: l, attrs: u, inputAttrs: b };
+    return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
+  }
+}), Ua = ["value"], Ka = ["value"];
+function Fa(t, r, n, e, o, i) {
+  return x(), C(
+    "div",
+    {
+      class: _e(["ipb-prop-editor ipb-prop-editor--color", e.attrs.class]),
+      style: J(e.attrs.style)
+    },
+    [
+      S("input", He(e.inputAttrs, {
+        class: "ipb-prop-editor__picker",
+        type: "color",
+        value: e.pickerValue,
+        onInput: e.handlePickerInput
+      }), null, 16, Ua),
+      S("input", He(e.inputAttrs, {
+        class: "ipb-prop-editor__text",
+        type: "text",
+        value: n.modelValue,
+        placeholder: "#000000",
+        onInput: e.handleTextInput
+      }), null, 16, Ka)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const $a = /* @__PURE__ */ q(Wa, [["render", Fa], ["__scopeId", "data-v-57860a2c"], ["__file", "/app/src/components/editor/prop-editors/PropColorEditor.vue"]]), Ga = /* @__PURE__ */ G({
+  inheritAttrs: !1,
+  __name: "RichTextEditor",
+  props: {
+    modelValue: { type: String, default: "" },
+    placeholder: { type: String, default: "Type text..." }
+  },
+  emits: ["update:modelValue"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, i = R(null), a = R("");
+    function l(p) {
+      return typeof p != "string" ? "" : mn(p);
+    }
+    function u(p) {
+      const g = i.value;
+      if (!g) return;
+      const E = l(p);
+      g.innerHTML !== E && (g.innerHTML = E), a.value = E;
+    }
+    function b() {
+      const p = i.value;
+      if (!p) return;
+      const g = l(p.innerHTML);
+      p.innerHTML !== g && (p.innerHTML = g), g !== a.value && (a.value = g, o("update:modelValue", g));
+    }
+    function v() {
+      var p;
+      (p = i.value) == null || p.focus();
+    }
+    function I(p, g) {
+      typeof document.execCommand == "function" && document.execCommand(p, !1, g);
+    }
+    function d(p) {
+      v(), I(p), b();
+    }
+    function A() {
+      v();
+      const p = window.prompt(k("richText.prompt.enterUrl"), k("richText.prompt.defaultUrl"));
+      if (!p) return;
+      const g = se(p, "link");
+      g && (I("createLink", g), b());
+    }
+    Ot(() => {
+      u(l(e.modelValue));
+    }), de(
+      () => e.modelValue,
+      (p) => {
+        u(l(p));
+      }
+    );
+    const { t: k } = pe(), y = dt(), D = N(() => {
+      const { class: p, style: g, ...E } = y;
+      return E;
+    }), c = N(() => {
+      const p = y["aria-labelledby"], g = y["aria-label"];
+      if (!(p || g))
+        return k("richText.aria.editor");
+    }), m = { props: e, emit: o, editorRef: i, lastEmittedValue: a, getSanitizedHtml: l, syncEditorHtml: u, emitCurrentHtml: b, focusEditor: v, executeCommand: I, runCommand: d, insertLink: A, t: k, attrs: y, contentAttrs: D, editorAriaLabel: c };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+}), qa = ["aria-label"], Ya = ["aria-label", "title"], Xa = ["aria-label", "title"], Za = ["aria-label", "title"], Ja = ["aria-label", "title"], Qa = ["aria-label", "title"], ei = ["aria-label", "data-placeholder"];
+function ti(t, r, n, e, o, i) {
+  return x(), C(
+    "div",
+    {
+      class: _e(["ipb-richtext-editor", e.attrs.class]),
+      style: J(e.attrs.style)
+    },
+    [
+      S("div", {
+        class: "ipb-richtext-editor__toolbar",
+        role: "toolbar",
+        "aria-label": e.t("richText.aria.toolbar")
+      }, [
+        S("button", {
+          type: "button",
+          "data-command": "bold",
+          "aria-label": e.t("richText.action.bold"),
+          title: e.t("richText.action.bold"),
+          onClick: r[0] || (r[0] = (a) => e.runCommand("bold"))
+        }, [...r[4] || (r[4] = [
+          S(
+            "strong",
+            null,
+            "B",
+            -1
+            /* CACHED */
+          )
+        ])], 8, Ya),
+        S("button", {
+          type: "button",
+          "data-command": "italic",
+          "aria-label": e.t("richText.action.italic"),
+          title: e.t("richText.action.italic"),
+          onClick: r[1] || (r[1] = (a) => e.runCommand("italic"))
+        }, [...r[5] || (r[5] = [
+          S(
+            "em",
+            null,
+            "I",
+            -1
+            /* CACHED */
+          )
+        ])], 8, Xa),
+        S("button", {
+          type: "button",
+          "data-command": "ul",
+          "aria-label": e.t("richText.action.unorderedList"),
+          title: e.t("richText.action.unorderedList"),
+          onClick: r[2] || (r[2] = (a) => e.runCommand("insertUnorderedList"))
+        }, " UL ", 8, Za),
+        S("button", {
+          type: "button",
+          "data-command": "ol",
+          "aria-label": e.t("richText.action.orderedList"),
+          title: e.t("richText.action.orderedList"),
+          onClick: r[3] || (r[3] = (a) => e.runCommand("insertOrderedList"))
+        }, " OL ", 8, Ja),
+        S("button", {
+          type: "button",
+          "data-command": "link",
+          "aria-label": e.t("richText.action.link"),
+          title: e.t("richText.action.link"),
+          onClick: e.insertLink
+        }, z(e.t("richText.action.link")), 9, Qa)
+      ], 8, qa),
+      S("div", He(e.contentAttrs, {
+        ref: "editorRef",
+        class: "ipb-richtext-editor__content",
+        contenteditable: "true",
+        role: "textbox",
+        "aria-multiline": "true",
+        "aria-label": e.editorAriaLabel,
+        "data-placeholder": n.placeholder,
+        onInput: e.emitCurrentHtml,
+        onBlur: e.emitCurrentHtml
+      }), null, 16, ei)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const ni = /* @__PURE__ */ q(Ga, [["render", ti], ["__scopeId", "data-v-3bf126f9"], ["__file", "/app/src/components/editor/prop-editors/RichTextEditor.vue"]]), ri = /* @__PURE__ */ G({
+  inheritAttrs: !1,
+  __name: "MediaPicker",
+  props: {
+    modelValue: { type: String, default: "" }
+  },
+  emits: ["update:modelValue", "upload"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, i = N(() => e.modelValue.trim()), a = N(() => se(i.value, "media")), l = N(() => i.value.length > 0), u = N(() => a.value.length > 0);
+    function b(D) {
+      const c = D.target.value;
+      o("update:modelValue", se(c, "media"));
+    }
+    function v() {
+      o("update:modelValue", "");
+    }
+    function I() {
+      o("upload");
+    }
+    const { t: d } = pe(), A = dt(), k = N(() => {
+      const { class: D, style: c, ...m } = A;
+      return m;
+    }), y = { props: e, emit: o, rawValue: i, safePreviewUrl: a, hasValue: l, canPreview: u, handleInput: b, handleClear: v, handleUploadPlaceholder: I, t: d, attrs: A, inputAttrs: k };
+    return Object.defineProperty(y, "__isScriptSetup", { enumerable: !1, value: !0 }), y;
+  }
+}), oi = { class: "ipb-media-picker__controls" }, ai = ["value", "placeholder"], ii = ["disabled"], li = { class: "ipb-media-picker__preview" }, si = ["src", "alt"], di = {
+  key: 1,
+  class: "ipb-media-picker__empty"
+};
+function ci(t, r, n, e, o, i) {
+  return x(), C(
+    "div",
+    {
+      class: _e(["ipb-media-picker", e.attrs.class]),
+      style: J(e.attrs.style)
+    },
+    [
+      S("div", oi, [
+        S("input", He(e.inputAttrs, {
+          class: "ipb-media-picker__input",
+          type: "url",
+          value: n.modelValue,
+          placeholder: e.t("mediaPicker.input.placeholder"),
+          onInput: e.handleInput
+        }), null, 16, ai),
+        S("button", {
+          class: "ipb-media-picker__btn",
+          type: "button",
+          disabled: !e.hasValue,
+          onClick: e.handleClear
+        }, z(e.t("mediaPicker.clear")), 9, ii),
+        S(
+          "button",
+          {
+            class: "ipb-media-picker__btn",
+            type: "button",
+            onClick: e.handleUploadPlaceholder
+          },
+          z(e.t("mediaPicker.upload")),
+          1
+          /* TEXT */
+        )
+      ]),
+      S("div", li, [
+        e.hasValue && e.canPreview ? (x(), C("img", {
+          key: 0,
+          class: "ipb-media-picker__image",
+          src: e.safePreviewUrl,
+          alt: e.t("mediaPicker.preview.alt")
+        }, null, 8, si)) : (x(), C(
+          "p",
+          di,
+          z(e.t("mediaPicker.empty")),
+          1
+          /* TEXT */
+        ))
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const rn = /* @__PURE__ */ q(ri, [["render", ci], ["__scopeId", "data-v-68f678e9"], ["__file", "/app/src/components/editor/prop-editors/MediaPicker.vue"]]), ui = at, fi = {
+  text: at,
+  textarea: at,
+  richtext: ni,
+  number: Ea,
+  boolean: Va,
+  select: Ha,
+  color: $a,
+  image: rn,
+  url: rn,
+  json: at
+}, Ee = "ipb-right-drawer-content", pi = /* @__PURE__ */ G({
+  __name: "RightDrawer",
+  props: {
+    open: { type: Boolean, default: !1 },
+    selectedNodeId: { type: Number, default: null },
+    content: { type: Object, required: !0 }
+  },
+  emits: ["toggle", "update-props", "delete", "duplicate"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, { t: i } = pe(), a = R(null), l = R(null), u = R(!1), b = N(() => e.selectedNodeId === null ? null : U(e.content, e.selectedNodeId) ?? null), v = N(() => b.value ? Le(b.value.name) ?? null : null);
+    function I(g) {
+      return b.value ? b.value.props[g.key] ?? g.defaultValue ?? "" : g.defaultValue ?? "";
+    }
+    function d(g) {
+      return fi[g] ?? ui;
+    }
+    function A(g) {
+      var O, L;
+      const E = I(g);
+      return g.type === "number" ? {
+        modelValue: E,
+        min: (O = g.validation) == null ? void 0 : O.min,
+        max: (L = g.validation) == null ? void 0 : L.max
+      } : g.type === "select" ? {
+        modelValue: E,
+        options: g.options ?? []
+      } : g.type === "image" || g.type === "url" ? { modelValue: E } : g.type === "text" || g.type === "textarea" || g.type === "richtext" || g.type === "json" ? {
+        modelValue: E,
+        placeholder: g.label
+      } : { modelValue: E };
+    }
+    function k(g, E) {
+      b.value && o("update-props", b.value.id, { [g]: E });
+    }
+    function y(g) {
+      return `ipb-right-drawer-prop-label-${g}`;
+    }
+    function D() {
+      const g = a.value;
+      return g ? g.querySelector(
+        `#${Ee} input:not([disabled]), #${Ee} select:not([disabled]), #${Ee} textarea:not([disabled]), #${Ee} button:not([disabled]), #${Ee} [contenteditable]:not([contenteditable="false"]), #${Ee} [tabindex]:not([tabindex="-1"])`
+      ) : null;
+    }
+    function c() {
+      var g;
+      (g = D()) == null || g.focus();
+    }
+    function m() {
+      u.value = !e.open, o("toggle");
+    }
+    de(
+      () => e.open,
+      (g, E) => {
+        var O;
+        if (g && !E && u.value && ue(() => {
+          c();
+        }), !g && E) {
+          const L = document.activeElement;
+          L instanceof HTMLElement && ((O = a.value) != null && O.contains(L)) && ue(() => {
+            var P;
+            (P = l.value) == null || P.focus();
+          });
+        }
+        g !== E && (u.value = !1);
+      }
+    );
+    const p = { props: e, emit: o, t: i, drawerRef: a, drawerToggleRef: l, focusContentOnNextOpen: u, selectedNode: b, componentDef: v, getPropValue: I, getEditorComponent: d, getEditorBindings: A, handlePropUpdate: k, DRAWER_CONTENT_ID: Ee, getPropLabelId: y, getFirstFocusableContentControl: D, focusDrawerContent: c, handleDrawerToggle: m };
+    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+  }
+}), mi = ["aria-label"], gi = { class: "ipb-right-drawer__header" }, bi = {
+  class: "ipb-right-drawer__title",
+  id: "ipb-right-drawer-title"
+}, vi = ["aria-label", "aria-expanded"], hi = { class: "ipb-right-drawer__section" }, _i = { class: "ipb-right-drawer__section-title" }, yi = {
+  key: 0,
+  class: "ipb-right-drawer__description"
+}, wi = { class: "ipb-right-drawer__section" }, xi = { class: "ipb-right-drawer__section-subtitle" }, Ii = ["data-prop-key"], Di = ["id"], Ni = { class: "ipb-right-drawer__actions" }, Si = ["aria-label"], Ti = ["disabled", "aria-label"], Ci = {
+  key: 1,
+  class: "ipb-right-drawer__empty"
+};
+function ki(t, r, n, e, o, i) {
+  return x(), C("aside", {
+    ref: "drawerRef",
+    class: _e(["ipb-right-drawer", { "ipb-right-drawer--open": n.open }]),
+    role: "complementary",
+    "aria-label": e.t("rightDrawer.aria.componentProperties")
+  }, [
+    S("div", gi, [
+      S(
+        "span",
+        bi,
+        z(e.t("rightDrawer.title")),
+        1
+        /* TEXT */
+      ),
+      S("button", {
+        ref: "drawerToggleRef",
+        type: "button",
+        class: "ipb-right-drawer__toggle",
+        "aria-label": e.t("rightDrawer.toggle.ariaLabel"),
+        "aria-expanded": n.open ? "true" : "false",
+        "aria-controls": e.DRAWER_CONTENT_ID,
+        onClick: e.handleDrawerToggle
+      }, z(n.open ? "▶" : "◀"), 9, vi)
+    ]),
+    n.open && e.selectedNode && e.componentDef ? (x(), C("div", {
+      key: 0,
+      id: e.DRAWER_CONTENT_ID,
+      class: "ipb-right-drawer__content",
+      role: "region",
+      "aria-labelledby": "ipb-right-drawer-title"
+    }, [
+      S("div", hi, [
+        S(
+          "h3",
+          _i,
+          z(e.componentDef.label),
+          1
+          /* TEXT */
+        ),
+        e.componentDef.description ? (x(), C(
+          "p",
+          yi,
+          z(e.componentDef.description),
+          1
+          /* TEXT */
+        )) : Y("v-if", !0)
+      ]),
+      S("div", wi, [
+        S(
+          "h4",
+          xi,
+          z(e.t("rightDrawer.section.properties")),
+          1
+          /* TEXT */
+        ),
+        Y(" Property editors will be rendered here based on editableProps "),
+        (x(!0), C(
+          he,
+          null,
+          ve(e.componentDef.editableProps, (a) => (x(), C("div", {
+            key: a.key,
+            class: "ipb-right-drawer__prop",
+            "data-prop-key": a.key
+          }, [
+            S("label", {
+              id: e.getPropLabelId(a.key),
+              class: "ipb-right-drawer__prop-label"
+            }, z(a.label), 9, Di),
+            (x(), Se(Mt(e.getEditorComponent(a.type)), He({ class: "ipb-right-drawer__prop-editor" }, { ref_for: !0 }, e.getEditorBindings(a), {
+              "aria-labelledby": e.getPropLabelId(a.key),
+              "onUpdate:modelValue": (l) => e.handlePropUpdate(a.key, l)
+            }), null, 16, ["aria-labelledby", "onUpdate:modelValue"]))
+          ], 8, Ii))),
+          128
+          /* KEYED_FRAGMENT */
+        ))
+      ]),
+      S("div", Ni, [
+        S("button", {
+          type: "button",
+          class: "ipb-right-drawer__btn",
+          "aria-label": e.t("rightDrawer.actions.duplicate.ariaLabel"),
+          onClick: r[0] || (r[0] = (a) => e.emit("duplicate", e.selectedNode.id))
+        }, z(e.t("rightDrawer.actions.duplicate")), 9, Si),
+        S("button", {
+          type: "button",
+          class: "ipb-right-drawer__btn ipb-right-drawer__btn--danger",
+          disabled: e.selectedNode.readonly,
+          "aria-label": e.t("rightDrawer.actions.delete.ariaLabel"),
+          onClick: r[1] || (r[1] = (a) => e.emit("delete", e.selectedNode.id))
+        }, z(e.t("rightDrawer.actions.delete")), 9, Ti)
+      ])
+    ])) : n.open ? (x(), C("div", Ci, [
+      S(
+        "p",
+        null,
+        z(e.t("rightDrawer.empty")),
+        1
+        /* TEXT */
+      )
+    ])) : Y("v-if", !0)
+  ], 10, mi);
+}
+const Pi = /* @__PURE__ */ q(pi, [["render", ki], ["__scopeId", "data-v-77af2668"], ["__file", "/app/src/components/editor/RightDrawer.vue"]]), Rn = "@improba/page-builder/iframe-bridge", An = 1;
+function Ut(t, r, n) {
+  return {
+    namespace: Rn,
+    version: An,
+    sessionToken: n,
+    channel: t,
+    payload: r
+  };
+}
+function Ei() {
+  var t, r;
+  if (typeof ((t = globalThis.crypto) == null ? void 0 : t.randomUUID) == "function")
+    return globalThis.crypto.randomUUID();
+  if (typeof ((r = globalThis.crypto) == null ? void 0 : r.getRandomValues) == "function") {
+    const n = new Uint8Array(16);
+    return globalThis.crypto.getRandomValues(n), Array.from(n, (e) => e.toString(16).padStart(2, "0")).join("");
+  }
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 12)}`;
+}
+function Ln(t) {
+  return Ut("lifecycle", { state: "ready" }, t);
+}
+function Vn(t, r) {
+  return Ut("pointer", t, r);
+}
+function Mn(t, r) {
+  return Ut("keydown", t, r);
+}
+function st(t) {
+  return !!t && typeof t == "object";
+}
+function Ri(t) {
+  if (!st(t)) return null;
+  const r = t.interaction, n = t.nodeId;
+  if (r !== "hover" && r !== "select" && r !== "context" || n !== null && typeof n != "number" || typeof n == "number" && !Number.isInteger(n)) return null;
+  const e = n;
+  if (r === "context") {
+    const o = t.clientX, i = t.clientY;
+    return typeof o != "number" || typeof i != "number" ? null : { interaction: r, nodeId: e, clientX: o, clientY: i };
+  }
+  return { interaction: r, nodeId: e };
+}
+function Ai(t) {
+  return !st(t) || typeof t.key != "string" || typeof t.code != "string" || typeof t.ctrlKey != "boolean" || typeof t.metaKey != "boolean" || typeof t.shiftKey != "boolean" || typeof t.altKey != "boolean" || typeof t.defaultPrevented != "boolean" || typeof t.isEditable != "boolean" ? null : {
+    key: t.key,
+    code: t.code,
+    ctrlKey: t.ctrlKey,
+    metaKey: t.metaKey,
+    shiftKey: t.shiftKey,
+    altKey: t.altKey,
+    defaultPrevented: t.defaultPrevented,
+    isEditable: t.isEditable
+  };
+}
+function Li(t, r = {}) {
+  if (!st(t) || t.namespace !== Rn || t.version !== An || t.channel !== "keydown" && t.channel !== "pointer" && t.channel !== "lifecycle") return null;
+  const n = t.sessionToken, e = typeof n == "string" && n.length > 0;
+  if (r.expectedSessionToken) {
+    if (!e || n !== r.expectedSessionToken) return null;
+  } else if (!e && !r.allowLegacyNoSessionToken)
+    return null;
+  const o = e ? n : "";
+  if (t.channel === "lifecycle")
+    return !st(t.payload) || t.payload.state !== "ready" ? null : Ln(o);
+  if (t.channel === "pointer") {
+    const a = Ri(t.payload);
+    return a ? Vn(a, o) : null;
+  }
+  const i = Ai(t.payload);
+  return i ? Mn(i, o) : null;
+}
+function Vi(t) {
+  const r = (n) => {
+    var o, i, a;
+    if (n.source !== t.expectedSource || n.origin !== t.expectedOrigin) return;
+    const e = Li(n.data, {
+      expectedSessionToken: t.expectedSessionToken,
+      allowLegacyNoSessionToken: t.allowLegacyNoSessionToken ?? !t.expectedSessionToken
+    });
+    if (e) {
+      if (e.channel === "lifecycle") {
+        (o = t.onReady) == null || o.call(t);
+        return;
+      }
+      if (e.channel === "pointer") {
+        (i = t.onPointer) == null || i.call(t, e.payload);
+        return;
+      }
+      (a = t.onKeydown) == null || a.call(t, e.payload);
+    }
+  };
+  return t.hostWindow.addEventListener("message", r), {
+    dispose: () => {
+      t.hostWindow.removeEventListener("message", r);
+    }
+  };
+}
+function Mi(t) {
+  return {
+    postReady: () => {
+      t.targetWindow.postMessage(Ln(t.sessionToken), t.targetOrigin);
+    },
+    postPointer: (r) => {
+      t.targetWindow.postMessage(
+        Vn(r, t.sessionToken),
+        t.targetOrigin
+      );
+    },
+    postKeydown: (r) => {
+      t.targetWindow.postMessage(
+        Mn(r, t.sessionToken),
+        t.targetOrigin
+      );
+    }
+  };
+}
+function Oi(t) {
+  if (t.defaultPrevented || t.isEditable) return !1;
+  const r = t.ctrlKey || t.metaKey, n = t.key.toLowerCase(), e = t.code.toLowerCase();
+  return r && (n === "z" || n === "y" || n === "s") ? !0 : (n === "delete" || n === "backspace" || e === "delete" || e === "backspace") && !t.ctrlKey && !t.metaKey && !t.altKey;
+}
+function Bi(t) {
+  const r = (a) => {
+    t.bridge.postPointer({
+      interaction: "select",
+      nodeId: t.resolveNodeId(a.target)
+    });
+  }, n = (a) => {
+    t.bridge.postPointer({
+      interaction: "hover",
+      nodeId: t.resolveNodeId(a.target)
+    });
+  }, e = () => {
+    t.bridge.postPointer({
+      interaction: "hover",
+      nodeId: null
+    });
+  }, o = (a) => {
+    a.preventDefault(), t.bridge.postPointer({
+      interaction: "context",
+      nodeId: t.resolveNodeId(a.target),
+      clientX: a.clientX,
+      clientY: a.clientY
+    });
+  }, i = (a) => {
+    const l = {
+      key: a.key,
+      code: a.code,
+      ctrlKey: a.ctrlKey,
+      metaKey: a.metaKey,
+      shiftKey: a.shiftKey,
+      altKey: a.altKey,
+      defaultPrevented: a.defaultPrevented,
+      isEditable: t.isEditableTarget(a.target) || t.isEditableTarget(t.frameDocument.activeElement)
+    };
+    Oi(l) && a.preventDefault(), t.bridge.postKeydown(l);
+  };
+  return t.contentRoot.addEventListener("click", r), t.contentRoot.addEventListener("mousemove", n), t.contentRoot.addEventListener("mouseleave", e), t.contentRoot.addEventListener("contextmenu", o), t.frameDocument.addEventListener("keydown", i), t.bridge.postReady(), () => {
+    t.contentRoot.removeEventListener("click", r), t.contentRoot.removeEventListener("mousemove", n), t.contentRoot.removeEventListener("mouseleave", e), t.contentRoot.removeEventListener("contextmenu", o), t.frameDocument.removeEventListener("keydown", i);
+  };
+}
+const zi = /* @__PURE__ */ G({
+  __name: "NodeContextMenu",
+  props: {
+    open: { type: Boolean, default: !1 },
+    x: { type: Number, default: 0 },
+    y: { type: Number, default: 0 },
+    canDelete: { type: Boolean, default: !0 },
+    canMoveUp: { type: Boolean, default: !1 },
+    canMoveDown: { type: Boolean, default: !1 }
+  },
+  emits: ["action", "close"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, { t: i } = pe(), a = N(() => ({
+      top: `${e.y}px`,
+      left: `${e.x}px`
+    })), l = N(() => [
+      { key: "duplicate", label: i("contextMenu.duplicate") },
+      { key: "move-up", label: i("contextMenu.moveUp"), disabled: !e.canMoveUp },
+      { key: "move-down", label: i("contextMenu.moveDown"), disabled: !e.canMoveDown },
+      { key: "delete", label: i("contextMenu.delete"), danger: !0, disabled: !e.canDelete }
+    ]);
+    function u(c, m) {
+      m || o("action", c);
+    }
+    const b = R(null), v = R(null);
+    function I() {
+      return b.value ? Array.from(b.value.querySelectorAll(".ipb-node-context-menu__item")).filter(
+        (c) => !c.disabled
+      ) : [];
+    }
+    function d() {
+      const [c] = I();
+      c == null || c.focus();
+    }
+    function A() {
+      v.value instanceof HTMLElement && v.value.focus(), v.value = null;
+    }
+    function k(c) {
+      var E, O, L, P;
+      if (c.key === "Escape") {
+        c.preventDefault(), o("close");
+        return;
+      }
+      if (c.key === "Tab") {
+        c.preventDefault(), o("close");
+        return;
+      }
+      const m = I();
+      if (m.length === 0) return;
+      const p = document.activeElement instanceof HTMLButtonElement ? document.activeElement : null, g = p ? m.indexOf(p) : -1;
+      if (c.key === "ArrowDown") {
+        c.preventDefault();
+        const F = g < 0 ? 0 : (g + 1) % m.length;
+        (E = m[F]) == null || E.focus();
+        return;
+      }
+      if (c.key === "ArrowUp") {
+        c.preventDefault();
+        const F = g < 0 ? m.length - 1 : (g - 1 + m.length) % m.length;
+        (O = m[F]) == null || O.focus();
+        return;
+      }
+      if (c.key === "Home") {
+        c.preventDefault(), (L = m[0]) == null || L.focus();
+        return;
+      }
+      c.key === "End" && (c.preventDefault(), (P = m[m.length - 1]) == null || P.focus());
+    }
+    function y(c) {
+      var p;
+      const m = c.relatedTarget;
+      if (!(m instanceof Node)) {
+        o("close");
+        return;
+      }
+      (p = b.value) != null && p.contains(m) || o("close");
+    }
+    de(
+      () => e.open,
+      (c) => {
+        if (c) {
+          v.value = document.activeElement instanceof HTMLElement ? document.activeElement : null, ue(() => {
+            d();
+          });
+          return;
+        }
+        A();
+      },
+      { immediate: !0 }
+    ), dn(() => {
+      A();
+    });
+    const D = { props: e, emit: o, t: i, menuStyle: a, menuItems: l, handleAction: u, menuRootRef: b, previousFocusedElement: v, getFocusableItems: I, focusFirstMenuItem: d, restorePreviousFocus: A, handleMenuKeydown: k, handleMenuFocusOut: y };
+    return Object.defineProperty(D, "__isScriptSetup", { enumerable: !1, value: !0 }), D;
+  }
+}), ji = ["aria-label"], Hi = ["disabled", "data-action", "aria-disabled", "onClick"];
+function Wi(t, r, n, e, o, i) {
+  return n.open ? (x(), C("div", {
+    key: 0,
+    ref: "menuRootRef",
+    class: "ipb-node-context-menu",
+    style: J(e.menuStyle),
+    role: "menu",
+    "aria-label": e.t("contextMenu.ariaLabel"),
+    "aria-orientation": "vertical",
+    tabindex: "-1",
+    onClick: r[0] || (r[0] = Et(() => {
+    }, ["stop"])),
+    onContextmenu: r[1] || (r[1] = Et(() => {
+    }, ["prevent"])),
+    onKeydown: e.handleMenuKeydown,
+    onFocusout: e.handleMenuFocusOut
+  }, [
+    (x(!0), C(
+      he,
+      null,
+      ve(e.menuItems, (a) => (x(), C("button", {
+        key: a.key,
+        type: "button",
+        class: _e(["ipb-node-context-menu__item", { "ipb-node-context-menu__item--danger": a.danger }]),
+        disabled: a.disabled,
+        "data-action": a.key,
+        role: "menuitem",
+        "aria-disabled": a.disabled ? "true" : void 0,
+        onClick: (l) => e.handleAction(a.key, a.disabled)
+      }, z(a.label), 11, Hi))),
+      128
+      /* KEYED_FRAGMENT */
+    ))
+  ], 44, ji)) : Y("v-if", !0);
+}
+const Ui = /* @__PURE__ */ q(zi, [["render", Wi], ["__scopeId", "data-v-89c3623e"], ["__file", "/app/src/components/editor/NodeContextMenu.vue"]]), ot = "ipb-iframe-canvas-content", kt = "ipb-iframe-canvas-base-style", on = 240, an = 320, Ki = /* @__PURE__ */ G({
+  __name: "IframeCanvas",
+  props: {
+    content: { type: Object, required: !0 },
+    variables: { type: Object, default: () => ({}) },
+    selectedNodeId: { type: Number, default: null },
+    hoveredNodeId: { type: Number, default: null },
+    viewport: { type: String, default: "desktop" },
+    viewportWidth: { type: Number, default: null },
+    viewportHeight: { type: Number, default: null }
+  },
+  emits: ["select", "hover", "context-action", "iframe-keydown", "viewport-size-change"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, i = je(Ht, null), a = je(Wt, null), { t: l } = pe(), u = R(null), b = R(null), v = R(null), I = R(!1), d = R(null), A = R(null), k = R(null), y = R(null), D = R(null), c = R(null), m = R({ width: 0, height: 0 }), p = R(!1), g = R(null), E = R(null), O = R(null), L = R(!1), P = R(null), F = R(0), ee = R(0), te = R(!1), ne = R(!1), le = R(!1), me = N(() => {
+      if (e.viewport === "custom")
+        return {
+          width: Math.max(on, Math.round(e.viewportWidth ?? Xe.desktop.width)),
+          height: Math.max(an, Math.round(e.viewportHeight ?? Xe.desktop.height))
+        };
+      const s = Xe[e.viewport];
+      return { width: s.width, height: s.height };
+    }), Te = N(() => ({
+      width: `min(100%, ${me.value.width}px)`,
+      height: `${me.value.height}px`
+    })), Ke = N(
+      () => g.value ? {
+        top: `${g.value.top}px`,
+        left: `${g.value.left}px`,
+        width: `${g.value.width}px`,
+        height: `${g.value.height}px`
+      } : null
+    ), Fe = N(
+      () => E.value && e.hoveredNodeId !== e.selectedNodeId ? {
+        top: `${E.value.top}px`,
+        left: `${E.value.left}px`,
+        width: `${E.value.width}px`,
+        height: `${E.value.height}px`
+      } : null
+    ), Ve = N(
+      () => O.value ? {
+        top: `${O.value.top}px`,
+        left: `${O.value.left}px`,
+        width: `${O.value.width}px`,
+        height: `${O.value.height}px`
+      } : null
+    );
+    function h(s) {
+      return !s || typeof s != "object" ? !1 : s.nodeType === 1;
+    }
+    function B(s) {
+      if (s === null) return null;
+      const _ = Number(s);
+      return Number.isInteger(_) ? _ : null;
+    }
+    function f(s) {
+      if (!h(s)) return null;
+      const _ = s.closest("[data-ipb-node-id]");
+      return B((_ == null ? void 0 : _.getAttribute("data-ipb-node-id")) ?? null);
+    }
+    function w(s) {
+      return s === null || !d.value ? null : d.value.querySelector(`[data-ipb-node-id="${s}"]`);
+    }
+    function T(s) {
+      var $, Q;
+      if (!s || !d.value) return null;
+      const _ = s.getBoundingClientRect(), V = d.value.getBoundingClientRect(), M = (($ = k.value) == null ? void 0 : $.scrollY) ?? 0, X = ((Q = k.value) == null ? void 0 : Q.scrollX) ?? 0;
+      return {
+        top: _.top - V.top + M,
+        left: _.left - V.left + X,
+        width: _.width,
+        height: _.height
+      };
+    }
+    function W(s, _) {
+      return Math.max(0, Math.min(s, _));
+    }
+    function H(s, _) {
+      return s.id === _ ? !0 : s.children.some((V) => H(V, _));
+    }
+    function K(s) {
+      var _;
+      return s.sourceComponentName ? s.sourceComponentName : s.sourceNodeId === null ? null : ((_ = U(e.content, s.sourceNodeId)) == null ? void 0 : _.name) ?? null;
+    }
+    function re(s, _) {
+      const V = K(_);
+      if (!V) return null;
+      const M = s === null ? null : U(e.content, s);
+      if (M && !M.readonly) {
+        const $ = Ne(M, "default", V);
+        if ($)
+          return {
+            targetId: M.id,
+            index: M.children.length,
+            slot: $
+          };
+      }
+      if (s !== null) {
+        const $ = ae(e.content, s);
+        if ($ && !$.parent.readonly) {
+          const Q = $.parent.children[$.index], be = Ne($.parent, (Q == null ? void 0 : Q.slot) ?? "default", V);
+          if (be)
+            return {
+              targetId: $.parent.id,
+              index: $.index + 1,
+              slot: be
+            };
+        }
+      }
+      if (e.content.readonly) return null;
+      const X = Ne(e.content, "default", V);
+      return X ? {
+        targetId: e.content.id,
+        index: e.content.children.length,
+        slot: X
+      } : null;
+    }
+    function oe(s, _, V, M) {
+      const X = U(e.content, s), $ = ae(e.content, s), Q = U(e.content, _);
+      if (!X || !$ || X.readonly) return { valid: !1 };
+      if (!Q || Q.readonly) return { valid: !1 };
+      if (s === _) return { valid: !1 };
+      if (H(X, _)) return { valid: !1 };
+      const be = Ne(Q, V, X.name);
+      if (!be) return { valid: !1 };
+      const Xt = Q.children.length;
+      return $.parent.id === _ && $.index < M ? { valid: !0, index: W(M - 1, Xt), slot: be } : { valid: !0, index: W(M, Xt), slot: be };
+    }
+    function fe(s) {
+      if (s.getElementById(kt)) return;
+      const _ = s.createElement("style");
+      _.id = kt, _.textContent = `
+      html, body {
+        margin: 0;
+        padding: 0;
+        min-height: 100%;
+        overflow-x: hidden;
+      }
+
+      body {
+        background: #fff;
+      }
+
+      #${ot} {
+        position: relative;
+        width: 100%;
+        max-width: 100%;
+        min-height: 100%;
+        overflow-x: hidden;
+        box-sizing: border-box;
+      }
+
+      /* Minimum size for layout containers so empty columns/rows remain droppable in the editor */
+      [data-ipb-component="PbColumn"] {
+        min-width: 80px;
+        min-height: 80px;
+      }
+      [data-ipb-component="PbRow"] {
+        min-height: 80px;
+      }
+    `, s.head.appendChild(_);
+    }
+    function ye(s) {
+      if (!s.body) return null;
+      fe(s);
+      let _ = s.getElementById(ot);
+      return _ || (_ = s.createElement("div"), _.id = ot, s.body.innerHTML = "", s.body.appendChild(_)), _;
+    }
+    function Me() {
+      d.value && Zt(
+        Zn(Pn, {
+          node: e.content,
+          variables: e.variables,
+          markNodes: !0
+        }),
+        d.value
+      );
+    }
+    function Ce() {
+      d.value && Zt(null, d.value);
+    }
+    function $e() {
+      if (!d.value) return;
+      d.value.querySelectorAll("[data-ipb-node-id]").forEach((_) => {
+        const V = B(_.getAttribute("data-ipb-node-id")), M = V === null ? null : U(e.content, V);
+        _.draggable = !!(M && !M.readonly && M.id !== e.content.id);
+      });
+    }
+    function we() {
+      g.value = T(w(e.selectedNodeId)), E.value = T(w(e.hoveredNodeId));
+      const s = a ? a.dragState.value.dropTargetId : null;
+      O.value = s === null ? null : T(w(s));
+    }
+    function xe() {
+      return b.value ? {
+        width: Math.round(b.value.clientWidth),
+        height: Math.round(b.value.clientHeight)
+      } : {
+        width: 0,
+        height: 0
+      };
+    }
+    function Oe() {
+      const s = xe();
+      p.value && s.width === m.value.width && s.height === m.value.height || (m.value = s, p.value = !0, o("viewport-size-change", s));
+    }
+    function Ge() {
+      we(), Oe();
+    }
+    function Be() {
+      var s;
+      (s = c.value) == null || s.disconnect(), c.value = null;
+    }
+    function Kt() {
+      if (Be(), typeof ResizeObserver > "u" || !b.value || !d.value) return;
+      const s = new ResizeObserver(() => {
+        Ge();
+      });
+      s.observe(b.value), s.observe(d.value), c.value = s;
+    }
+    async function Ie() {
+      await ue(), Me(), await ue(), $e(), we(), Oe();
+    }
+    function De() {
+      O.value = null;
+    }
+    function ge() {
+      L.value = !1, P.value = null;
+    }
+    function On() {
+      ge(), o("select", null), o("hover", null);
+    }
+    function ut(s) {
+      s.stopPropagation(), ge();
+      const _ = f(s.target);
+      o("select", _);
+    }
+    function ft(s) {
+      const _ = f(s.target);
+      _ !== e.hoveredNodeId && o("hover", _);
+    }
+    function pt() {
+      o("hover", null);
+    }
+    function mt(s) {
+      if (!a) return;
+      const _ = f(s.target);
+      if (_ === null) return;
+      const V = U(e.content, _);
+      if (!V || V.readonly || V.id === e.content.id) {
+        s.preventDefault();
+        return;
+      }
+      a.startDragExisting(_), s.dataTransfer && (s.dataTransfer.effectAllowed = "move", s.dataTransfer.setData("text/plain", String(_)));
+    }
+    function gt(s) {
+      if (!a || !a.dragState.value.isDragging) return;
+      const _ = f(s.target), V = re(_, a.dragState.value);
+      if (!V) {
+        De();
+        return;
+      }
+      s.preventDefault(), a.updateDropTarget(V.targetId, V.index, V.slot), O.value = T(w(V.targetId)), s.dataTransfer && (s.dataTransfer.dropEffect = a.dragState.value.isNewComponent ? "copy" : "move");
+    }
+    function bt(s) {
+      if (!d.value) return;
+      const _ = s.relatedTarget;
+      _ && typeof _ == "object" && "nodeType" in _ && d.value.contains(_) || De();
+    }
+    function vt(s) {
+      var $;
+      if (s.preventDefault(), !a || !i || !a.dragState.value.isDragging) {
+        De();
+        return;
+      }
+      const _ = f(s.target), V = re(_, a.dragState.value);
+      if (!V) {
+        a.cancelDrag(), De();
+        return;
+      }
+      a.updateDropTarget(V.targetId, V.index, V.slot);
+      const M = a.endDrag();
+      if (De(), M.dropTargetId === null) return;
+      if (M.isNewComponent && M.sourceComponentName) {
+        const Q = ($ = Le(M.sourceComponentName)) == null ? void 0 : $.defaultProps, be = i.addNode(
+          M.dropTargetId,
+          M.sourceComponentName,
+          M.dropIndex,
+          M.dropSlot,
+          Q
+        );
+        be !== null && o("select", be);
+        return;
+      }
+      if (M.sourceNodeId === null) return;
+      const X = oe(
+        M.sourceNodeId,
+        M.dropTargetId,
+        M.dropSlot,
+        M.dropIndex
+      );
+      X.valid && (i.moveNodeTo(
+        M.sourceNodeId,
+        M.dropTargetId,
+        X.index,
+        X.slot
+      ), o("select", M.sourceNodeId));
+    }
+    function ht() {
+      a != null && a.dragState.value.isDragging && a.cancelDrag(), De();
+    }
+    function _t(s) {
+      const _ = U(e.content, s);
+      if (_ != null && _.readonly) {
+        te.value = !1, ne.value = !1, le.value = !1;
+        return;
+      }
+      const V = ae(e.content, s);
+      if (!V) {
+        te.value = !1, ne.value = !1, le.value = !1;
+        return;
+      }
+      te.value = !0, ne.value = V.index > 0, le.value = V.index < V.parent.children.length - 1;
+    }
+    function yt(s) {
+      var $, Q;
+      s.preventDefault(), s.stopPropagation();
+      const _ = f(s.target);
+      if (_ === null || !d.value) {
+        ge();
+        return;
+      }
+      const V = d.value.getBoundingClientRect(), M = (($ = k.value) == null ? void 0 : $.scrollY) ?? 0, X = ((Q = k.value) == null ? void 0 : Q.scrollX) ?? 0;
+      F.value = s.clientX - V.left + X, ee.value = s.clientY - V.top + M, P.value = _, _t(_), L.value = !0, o("select", _);
+    }
+    function Bn(s) {
+      P.value !== null && (o("context-action", { action: s, nodeId: P.value }), ge());
+    }
+    function Ft(s) {
+      if (!h(s)) return !1;
+      const _ = s.tagName.toLowerCase();
+      return _ === "input" || _ === "textarea" || _ === "select" ? !0 : !!s.closest('[contenteditable]:not([contenteditable="false"])');
+    }
+    function $t(s) {
+      var X, $;
+      if (s.interaction === "hover") {
+        s.nodeId !== e.hoveredNodeId && o("hover", s.nodeId);
+        return;
+      }
+      if (s.interaction === "select") {
+        ge(), o("select", s.nodeId);
+        return;
+      }
+      if (s.interaction !== "context") return;
+      if (s.nodeId === null || !d.value) {
+        ge();
+        return;
+      }
+      const _ = d.value.getBoundingClientRect(), V = ((X = k.value) == null ? void 0 : X.scrollY) ?? 0, M = (($ = k.value) == null ? void 0 : $.scrollX) ?? 0;
+      F.value = s.clientX - _.left + M, ee.value = s.clientY - _.top + V, P.value = s.nodeId, _t(s.nodeId), L.value = !0, o("select", s.nodeId);
+    }
+    function Gt(s) {
+      s.key === "Escape" && ge(), o("iframe-keydown", {
+        ...s,
+        // Preventing defaults from the parent is asynchronous in postMessage mode.
+        preventDefault: () => {
+        }
+      });
+    }
+    function wt(s) {
+      try {
+        return s.location.origin;
+      } catch {
+        return window.location.origin;
+      }
+    }
+    function xt() {
+      var s, _;
+      (s = y.value) == null || s.call(y), y.value = null, (_ = D.value) == null || _.call(D), D.value = null;
+    }
+    function qt() {
+      const s = k.value, _ = A.value, V = d.value;
+      if (!s || !_ || !V) return;
+      xt();
+      const M = Ei(), X = Vi({
+        hostWindow: window,
+        expectedSource: window,
+        expectedOrigin: wt(window),
+        expectedSessionToken: M,
+        onReady: () => {
+          Ie();
+        },
+        onPointer: $t,
+        onKeydown: Gt
+      }), $ = Mi({
+        targetWindow: window,
+        targetOrigin: wt(window),
+        sessionToken: M
+      });
+      y.value = () => X.dispose(), D.value = Bi({
+        frameDocument: _,
+        contentRoot: V,
+        bridge: $,
+        resolveNodeId: f,
+        isEditableTarget: Ft
+      });
+    }
+    function ke() {
+      Ge();
+    }
+    function Qe() {
+      Be(), xt(), d.value && (d.value.removeEventListener("click", ut), d.value.removeEventListener("contextmenu", yt), d.value.removeEventListener("mousemove", ft), d.value.removeEventListener("mouseleave", pt), d.value.removeEventListener("dragstart", mt), d.value.removeEventListener("dragover", gt), d.value.removeEventListener("dragleave", bt), d.value.removeEventListener("drop", vt), d.value.removeEventListener("dragend", ht)), !I.value && k.value && (k.value.removeEventListener("scroll", ke), k.value.removeEventListener("resize", ke));
+    }
+    function It() {
+      d.value && (I.value ? (d.value.addEventListener("click", ut), d.value.addEventListener("contextmenu", yt), d.value.addEventListener("mousemove", ft), d.value.addEventListener("mouseleave", pt)) : qt(), d.value.addEventListener("dragstart", mt), d.value.addEventListener("dragover", gt), d.value.addEventListener("dragleave", bt), d.value.addEventListener("drop", vt), d.value.addEventListener("dragend", ht), !I.value && k.value && (k.value.addEventListener("scroll", ke), k.value.addEventListener("resize", ke)), Kt());
+    }
+    function et() {
+      I.value = !0, ue().then(() => {
+        v.value && (Qe(), Ce(), A.value = null, k.value = null, d.value = v.value, It(), Ie());
+      });
+    }
+    function tt() {
+      const s = u.value;
+      if (!s) {
+        et();
+        return;
+      }
+      const _ = s.contentDocument, V = s.contentWindow;
+      if (!_ || !V) {
+        et();
+        return;
+      }
+      const M = ye(_);
+      if (!M) {
+        et();
+        return;
+      }
+      Qe(), Ce(), I.value = !1, A.value = _, k.value = V, d.value = M, It(), Ie();
+    }
+    de(
+      () => [e.selectedNodeId, e.hoveredNodeId],
+      () => {
+        Ie();
+      },
+      { immediate: !0 }
+    ), de(
+      () => [e.viewport, e.viewportWidth, e.viewportHeight],
+      () => {
+        Ie();
+      }
+    ), de(
+      () => e.content,
+      () => {
+        P.value !== null && !U(e.content, P.value) && ge(), Ie();
+      },
+      { deep: !0 }
+    ), de(
+      () => e.variables,
+      () => {
+        Ie();
+      },
+      { deep: !0 }
+    ), de(
+      () => (a == null ? void 0 : a.dragState.value.isDragging) ?? !1,
+      (s) => {
+        s || De();
+      }
+    ), Ot(() => {
+      var s;
+      window.addEventListener("resize", ke), (s = u.value) == null || s.addEventListener("load", tt), tt();
+    }), dn(() => {
+      var s;
+      window.removeEventListener("resize", ke), (s = u.value) == null || s.removeEventListener("load", tt), Qe(), Ce();
+    });
+    const Yt = { props: e, emit: o, IFRAME_CONTENT_ROOT_ID: ot, IFRAME_BASE_STYLE_ID: kt, MIN_VIEWPORT_WIDTH: on, MIN_VIEWPORT_HEIGHT: an, nodeTree: i, dragDrop: a, t: l, iframeRef: u, stageRef: b, fallbackContentRef: v, useFallbackDom: I, contentRef: d, iframeDocumentRef: A, iframeWindowRef: k, teardownBridgeParentRef: y, teardownBridgeDomRef: D, resizeObserverRef: c, currentViewportSize: m, hasViewportSizeReport: p, selectedRect: g, hoveredRect: E, dropRect: O, contextMenuOpen: L, contextMenuNodeId: P, contextMenuX: F, contextMenuY: ee, canDeleteFromMenu: te, canMoveUpFromMenu: ne, canMoveDownFromMenu: le, resolvedViewportDimensions: me, canvasStyle: Te, selectedOverlayStyle: Ke, hoveredOverlayStyle: Fe, dropOverlayStyle: Ve, isElementTarget: h, parseNodeId: B, getNodeIdFromEventTarget: f, findMarkedElement: w, getOverlayRect: T, clampIndex: W, isNodeInSubtree: H, getDraggedComponentName: K, resolveDropLocation: re, canMoveNode: oe, ensureIframeBaseStyle: fe, ensureIframeContentRoot: ye, renderIframeNodeTree: Me, unmountIframeNodeTree: Ce, syncDraggableMarkers: $e, syncOverlayRects: we, getStageViewportSize: xe, syncViewportSize: Oe, handleCanvasResize: Ge, disconnectResizeObserver: Be, setupResizeObserver: Kt, syncOverlayRectsAfterRender: Ie, clearDropTargetOverlay: De, hideContextMenu: ge, handleCanvasClick: On, handleContentClick: ut, handleContentMouseMove: ft, handleContentMouseLeave: pt, handleContentDragStart: mt, handleContentDragOver: gt, handleContentDragLeave: bt, handleContentDrop: vt, handleContentDragEnd: ht, updateContextMenuCapabilities: _t, handleContentContextMenu: yt, handleContextMenuAction: Bn, isEditableTarget: Ft, handleBridgePointer: $t, handleBridgeKeydown: Gt, getWindowOrigin: wt, teardownIframeBridge: xt, setupIframeBridge: qt, handleWindowResize: ke, teardownIframeListeners: Qe, setupIframeListeners: It, initializeFallbackContent: et, initializeIframeDocument: tt, NodeContextMenu: Ui };
+    return Object.defineProperty(Yt, "__isScriptSetup", { enumerable: !1, value: !0 }), Yt;
+  }
+}), Fi = {
+  ref: "stageRef",
+  class: "ipb-iframe-canvas__stage"
+}, $i = ["title"], Gi = {
+  key: 1,
+  ref: "fallbackContentRef",
+  id: "ipb-iframe-canvas-content",
+  class: "ipb-iframe-canvas__fallback"
+};
+function qi(t, r, n, e, o, i) {
+  return x(), C(
+    "main",
+    {
+      class: "ipb-canvas",
+      onClick: e.handleCanvasClick,
+      onContextmenu: Et(e.hideContextMenu, ["prevent"])
+    },
+    [
+      S(
+        "div",
+        {
+          class: "ipb-canvas__viewport",
+          style: J(e.canvasStyle)
+        },
+        [
+          S(
+            "div",
+            Fi,
+            [
+              e.useFallbackDom ? (x(), C(
+                "div",
+                Gi,
+                null,
+                512
+                /* NEED_PATCH */
+              )) : (x(), C("iframe", {
+                key: 0,
+                ref: "iframeRef",
+                class: "ipb-iframe-canvas__frame",
+                title: e.t("iframeCanvas.title"),
+                sandbox: "allow-same-origin"
+              }, null, 8, $i)),
+              e.dropOverlayStyle ? (x(), C(
+                "div",
+                {
+                  key: 2,
+                  class: "ipb-canvas__overlay ipb-canvas__overlay--drop",
+                  style: J(e.dropOverlayStyle)
+                },
+                null,
+                4
+                /* STYLE */
+              )) : Y("v-if", !0),
+              e.hoveredOverlayStyle ? (x(), C(
+                "div",
+                {
+                  key: 3,
+                  class: "ipb-canvas__overlay ipb-canvas__overlay--hovered",
+                  style: J(e.hoveredOverlayStyle)
+                },
+                null,
+                4
+                /* STYLE */
+              )) : Y("v-if", !0),
+              e.selectedOverlayStyle ? (x(), C(
+                "div",
+                {
+                  key: 4,
+                  class: "ipb-canvas__overlay ipb-canvas__overlay--selected",
+                  style: J(e.selectedOverlayStyle)
+                },
+                null,
+                4
+                /* STYLE */
+              )) : Y("v-if", !0),
+              Re(e.NodeContextMenu, {
+                open: e.contextMenuOpen,
+                x: e.contextMenuX,
+                y: e.contextMenuY,
+                "can-delete": e.canDeleteFromMenu,
+                "can-move-up": e.canMoveUpFromMenu,
+                "can-move-down": e.canMoveDownFromMenu,
+                onAction: e.handleContextMenuAction,
+                onClose: e.hideContextMenu
+              }, null, 8, ["open", "x", "y", "can-delete", "can-move-up", "can-move-down"])
+            ],
+            512
+            /* NEED_PATCH */
+          )
+        ],
+        4
+        /* STYLE */
+      )
+    ],
+    32
+    /* NEED_HYDRATION */
+  );
+}
+const Yi = /* @__PURE__ */ q(Ki, [["render", qi], ["__scopeId", "data-v-11905b62"], ["__file", "/app/src/components/editor/IframeCanvas.vue"]]), Xi = /* @__PURE__ */ G({
+  __name: "PageEditor",
+  props: {
+    pageData: {
+      type: Object,
+      required: !0
+    }
+  },
+  emits: ["save", "change"],
+  setup(t, { expose: r, emit: n }) {
+    r();
+    const e = t, o = n, i = ho({ initialData: e.pageData, mode: "edit" }), a = _o({ initialSnapshot: i.getSnapshot() }), l = wo(), u = yo({
+      content: i.content,
+      nextId: i.nextId,
+      onUpdate: (h) => {
+        i.updateContent(h), o("change", h);
+      },
+      onSnapshot: (h) => {
+        a.pushHistory(h, i.getSnapshot());
+      }
+    }), b = R(1024), v = R(768), I = R(null), d = R(null);
+    function A() {
+      o("save", {
+        content: i.content.value,
+        layout: i.layout.value,
+        maxId: i.maxId.value
+      });
+    }
+    function k(h) {
+      if (!h) return !1;
+      try {
+        i.restoreSnapshot(h);
+        const B = a.selectedNodeId.value;
+        return B !== null && !U(i.content.value, B) && a.selectNode(null), o("change", i.content.value), !0;
+      } catch (B) {
+        return Ue(
+          "PageEditor.restoreSnapshotAndEmit",
+          Z(
+            "INVALID_SNAPSHOT",
+            "[PageBuilder] Failed to apply history snapshot. Undo/redo step was skipped.",
+            {
+              cause: B,
+              details: {
+                snapshotPreview: h.slice(0, 200)
+              }
+            }
+          )
+        ), !1;
+      }
+    }
+    function y() {
+      k(a.undo());
+    }
+    function D() {
+      k(a.redo());
+    }
+    function c(h) {
+      const B = U(i.content.value, h);
+      !B || B.readonly || u.deleteNode(h);
+    }
+    function m(h) {
+      U(i.content.value, h) && u.duplicateNode(h);
+    }
+    function p(h) {
+      const B = U(i.content.value, h);
+      !B || B.readonly || u.canMoveNodeUp(h) && u.moveNodeUp(h);
+    }
+    function g(h) {
+      const B = U(i.content.value, h);
+      !B || B.readonly || u.canMoveNodeDown(h) && u.moveNodeDown(h);
+    }
+    function E(h) {
+      if (h.action === "duplicate") {
+        m(h.nodeId);
+        return;
+      }
+      if (h.action === "delete") {
+        c(h.nodeId);
+        return;
+      }
+      if (h.action === "move-up") {
+        p(h.nodeId);
+        return;
+      }
+      h.action === "move-down" && g(h.nodeId);
+    }
+    function O(h) {
+      if (!h || typeof h != "object" || !("nodeType" in h) || h.nodeType !== 1) return !1;
+      const B = h, f = B.tagName.toLowerCase();
+      return f === "input" || f === "textarea" || f === "select" ? !0 : !!B.closest('[contenteditable]:not([contenteditable="false"])');
+    }
+    function L() {
+      const h = a.selectedNodeId.value;
+      h !== null && c(h);
+    }
+    function P(h) {
+      if (h.defaultPrevented || h.isEditable) return;
+      const B = h.ctrlKey || h.metaKey, f = h.key.toLowerCase(), w = h.code.toLowerCase();
+      if (B && f === "z") {
+        h.preventDefault(), h.shiftKey ? D() : y();
+        return;
+      }
+      if (B && f === "y") {
+        h.preventDefault(), D();
+        return;
+      }
+      if (B && f === "s") {
+        h.preventDefault(), A();
+        return;
+      }
+      (f === "delete" || f === "backspace" || w === "delete" || w === "backspace") && !h.ctrlKey && !h.metaKey && !h.altKey && (h.preventDefault(), L());
+    }
+    function F(h) {
+      P({
+        key: h.key,
+        code: h.code,
+        ctrlKey: h.ctrlKey,
+        metaKey: h.metaKey,
+        shiftKey: h.shiftKey,
+        altKey: h.altKey,
+        defaultPrevented: h.defaultPrevented,
+        isEditable: O(h.target) || O(document.activeElement),
+        preventDefault: () => h.preventDefault()
+      });
+    }
+    function ee(h) {
+      P(h);
+    }
+    function te(h) {
+      const B = Xe[h];
+      return h === "custom" ? {
+        width: b.value,
+        height: v.value
+      } : {
+        width: B.width,
+        height: B.height
+      };
+    }
+    function ne(h) {
+      if (h === "custom" && a.viewport.value !== "custom")
+        if (I.value !== null && d.value !== null)
+          b.value = I.value, v.value = d.value;
+        else {
+          const B = te(a.viewport.value);
+          b.value = B.width, v.value = B.height;
+        }
+      a.setViewport(h);
+    }
+    function le(h) {
+      b.value = h.width, v.value = h.height, a.viewport.value !== "custom" && a.setViewport("custom");
+    }
+    function me(h) {
+      I.value = h.width, d.value = h.height;
+    }
+    function Te(h) {
+      l.startDragNew(h);
+    }
+    function Ke() {
+      l.cancelDrag();
+    }
+    function Fe(h) {
+      var re;
+      const B = a.selectedNodeId.value, f = B !== null ? U(i.content.value, B) : void 0;
+      let w = i.content.value.id, T = i.content.value.children.length, W = "default";
+      if (B !== null && f) {
+        const oe = ae(i.content.value, B);
+        oe ? (w = oe.parent.id, T = oe.index + 1, W = f.slot ?? "default") : (w = f.id, T = f.children.length);
+      }
+      const H = (re = Le(h)) == null ? void 0 : re.defaultProps, K = u.addNode(w, h, T, W, H);
+      K !== null && a.selectNode(K);
+    }
+    Ot(() => {
+      window.addEventListener("keydown", F);
+    }), Jn(() => {
+      window.removeEventListener("keydown", F);
+    }), qe(po, i), qe(mo, a), qe(Ht, u), qe(Wt, l);
+    const Ve = { props: e, emit: o, pb: i, editor: a, dragDrop: l, nodeTree: u, customViewportWidth: b, customViewportHeight: v, activeViewportWidth: I, activeViewportHeight: d, handleSave: A, restoreSnapshotAndEmit: k, handleUndo: y, handleRedo: D, handleDeleteNode: c, handleDuplicateNode: m, handleMoveNodeUp: p, handleMoveNodeDown: g, handleNodeContextAction: E, isEditableTarget: O, handleDeleteSelected: L, handleShortcut: P, handleEditorKeydown: F, handleIframeKeydown: ee, getViewportDimensions: te, handleViewportChange: ne, handleCustomViewportChange: le, handleViewportSizeChange: me, handlePaletteDragStart: Te, handlePaletteDragEnd: Ke, handlePaletteAdd: Fe, EditorToolbar: zo, LeftDrawer: Da, RightDrawer: Pi, IframeCanvas: Yi };
+    return Object.defineProperty(Ve, "__isScriptSetup", { enumerable: !1, value: !0 }), Ve;
+  }
+}), Zi = { class: "ipb-page-editor" }, Ji = { class: "ipb-page-editor__body" };
+function Qi(t, r, n, e, o, i) {
+  return x(), C("div", Zi, [
+    Re(e.EditorToolbar, {
+      "can-undo": e.editor.canUndo.value,
+      "can-redo": e.editor.canRedo.value,
+      "is-dirty": e.pb.isDirty.value,
+      viewport: e.editor.viewport.value,
+      "custom-viewport-width": e.customViewportWidth,
+      "custom-viewport-height": e.customViewportHeight,
+      "active-viewport-width": e.activeViewportWidth,
+      "active-viewport-height": e.activeViewportHeight,
+      onUndo: e.handleUndo,
+      onRedo: e.handleRedo,
+      onSave: e.handleSave,
+      onViewportChange: e.handleViewportChange,
+      onCustomViewportChange: e.handleCustomViewportChange
+    }, null, 8, ["can-undo", "can-redo", "is-dirty", "viewport", "custom-viewport-width", "custom-viewport-height", "active-viewport-width", "active-viewport-height"]),
+    S("div", Ji, [
+      Re(e.LeftDrawer, {
+        open: e.editor.leftDrawerOpen.value,
+        content: e.pb.content.value,
+        "selected-node-id": e.editor.selectedNodeId.value,
+        onToggle: e.editor.toggleLeftDrawer,
+        onSelect: e.editor.selectNode,
+        onAdd: e.handlePaletteAdd,
+        onDragStart: e.handlePaletteDragStart,
+        onDragEnd: e.handlePaletteDragEnd
+      }, null, 8, ["open", "content", "selected-node-id", "onToggle", "onSelect"]),
+      Re(e.IframeCanvas, {
+        content: e.pb.content.value,
+        variables: e.pb.variables.value,
+        "selected-node-id": e.editor.selectedNodeId.value,
+        "hovered-node-id": e.editor.hoveredNodeId.value,
+        viewport: e.editor.viewport.value,
+        "viewport-width": e.editor.viewport.value === "custom" ? e.customViewportWidth : null,
+        "viewport-height": e.editor.viewport.value === "custom" ? e.customViewportHeight : null,
+        onSelect: e.editor.selectNode,
+        onHover: e.editor.hoverNode,
+        onContextAction: e.handleNodeContextAction,
+        onIframeKeydown: e.handleIframeKeydown,
+        onViewportSizeChange: e.handleViewportSizeChange
+      }, null, 8, ["content", "variables", "selected-node-id", "hovered-node-id", "viewport", "viewport-width", "viewport-height", "onSelect", "onHover"]),
+      Re(e.RightDrawer, {
+        open: e.editor.rightDrawerOpen.value,
+        "selected-node-id": e.editor.selectedNodeId.value,
+        content: e.pb.content.value,
+        onToggle: e.editor.toggleRightDrawer,
+        onUpdateProps: e.nodeTree.updateNodeProps,
+        onDelete: e.handleDeleteNode,
+        onDuplicate: e.handleDuplicateNode
+      }, null, 8, ["open", "selected-node-id", "content", "onToggle", "onUpdateProps"])
+    ])
+  ]);
+}
+const el = /* @__PURE__ */ q(Xi, [["render", Qi], ["__scopeId", "data-v-0589f51d"], ["__file", "/app/src/components/editor/PageEditor.vue"]]), tl = /* @__PURE__ */ G({
+  __name: "PageBuilder",
+  props: {
+    pageData: {
+      type: Object,
+      required: !0
+    },
+    mode: {
+      type: String,
+      default: "read"
+    },
+    locale: {
+      type: String,
+      default: void 0
+    },
+    messages: {
+      type: Object,
+      default: void 0
+    }
+  },
+  emits: ["save", "change"],
+  setup(t, { expose: r }) {
+    r();
+    const n = t, e = /* @__PURE__ */ new Set();
+    function o(y, D, c) {
+      e.has(y) || (e.add(y), Ue("PageBuilder", Z("INVALID_PAGE_DATA", D, { details: c })));
+    }
+    const i = N(() => n.pageData), a = N(() => n.mode === "read" || n.mode === "edit" ? n.mode : (o(
+      "invalid-mode",
+      `[PageBuilder] Unknown mode "${String(n.mode)}". Falling back to "read".`,
+      { mode: n.mode }
+    ), "read")), l = N(() => wn(i.value)), u = N(() => {
+      const y = lt(i.value.content, "content"), D = lt(i.value.layout, "layout");
+      return y.isValid && D.isValid;
+    }), b = N(() => a.value === "edit" && !u.value), v = je(Dn, null), I = N(() => n.locale ?? (v == null ? void 0 : v.locale) ?? Lt), d = N(
+      () => Fr(xn, v == null ? void 0 : v.messages, n.messages)
+    ), A = In(() => I.value, () => d.value);
+    de(
+      l,
+      (y) => {
+        y.isValid || o(
+          "invalid-page-data",
+          "[PageBuilder] Invalid pageData payload detected. Rendering continues with degraded behavior.",
+          { errors: y.errors }
+        );
+      },
+      { immediate: !0 }
+    ), qe(Nn, {
+      locale: I,
+      t: A
+    });
+    const k = { props: n, reportedDiagnostics: e, reportOnce: o, pageData: i, mode: a, pageValidationResult: l, canRenderEditor: u, showEditModeFallback: b, pluginI18nOptions: v, resolvedLocale: I, mergedMessages: d, t: A, PageReader: fo, PageEditor: el };
+    return Object.defineProperty(k, "__isScriptSetup", { enumerable: !1, value: !0 }), k;
+  }
+}), nl = {
+  key: 0,
+  class: "ipb-page-builder__warning",
+  role: "alert"
+};
+function rl(t, r, n, e, o, i) {
+  return x(), C(
+    he,
+    null,
+    [
+      e.showEditModeFallback ? (x(), C(
+        "div",
+        nl,
+        z(e.t("pageBuilder.warning.invalidEditMode")),
+        1
+        /* TEXT */
+      )) : Y("v-if", !0),
+      e.mode === "read" || e.showEditModeFallback ? (x(), Se(e.PageReader, {
+        key: 1,
+        "page-data": e.pageData
+      }, null, 8, ["page-data"])) : (x(), Se(e.PageEditor, {
+        key: 2,
+        "page-data": e.pageData,
+        onSave: r[0] || (r[0] = (a) => t.$emit("save", a)),
+        onChange: r[1] || (r[1] = (a) => t.$emit("change", a))
+      }, null, 8, ["page-data"]))
+    ],
+    64
+    /* STABLE_FRAGMENT */
+  );
+}
+const ol = /* @__PURE__ */ q(tl, [["render", rl], ["__scopeId", "data-v-4b06ebe0"], ["__file", "/app/src/components/PageBuilder.vue"]]), ln = /* @__PURE__ */ new WeakSet();
+function sn(t) {
+  const r = [];
+  for (const n of t) {
+    const e = n.name.trim(), o = Le(e);
+    if (!o) {
+      r.push(n);
+      continue;
+    }
+    if (o.component !== n.component)
+      throw Z(
+        "DUPLICATE_COMPONENT",
+        `[PageBuilder] Component "${e}" is already registered with a different implementation.`,
+        {
+          details: {
+            componentName: e
+          }
+        }
+      );
+  }
+  r.length > 0 && tr(r);
+}
+const bl = {
+  install(t, r = {}) {
+    if (ln.has(t)) return;
+    ln.add(t);
+    const {
+      components: n = [],
+      registerBuiltIn: e = !0,
+      globalName: o = "PageBuilder",
+      locale: i,
+      messages: a
+    } = r;
+    t.provide(Dn, { locale: i, messages: a }), e && sn(Or), n.length > 0 && sn(n), o !== !1 && t.component(o, ol);
+  }
+}, vl = {
+  type: Object
+};
+export {
+  Lt as DEFAULT_LOCALE,
+  Wt as DRAG_DROP_KEY,
+  mo as EDITOR_KEY,
+  Ht as NODE_TREE_KEY,
+  Pn as NodeRenderer,
+  po as PAGE_BUILDER_KEY,
+  ol as PageBuilder,
+  cn as PageBuilderError,
+  bl as PageBuilderPlugin,
+  el as PageEditor,
+  fo as PageReader,
+  ir as PbColumn,
+  Mr as PbContainer,
+  Sr as PbImage,
+  dr as PbRow,
+  Ar as PbSection,
+  xr as PbText,
+  Pr as PbVideo,
+  Xe as VIEWPORT_PRESETS,
+  vl as builderOptionsPropType,
+  Or as builtInComponents,
+  fl as clearRegistry,
+  qr as cloneTree,
+  Uo as computeWindowRange,
+  pl as countNodes,
+  Zr as createNode,
+  Ho as createStableNodeKey,
+  In as createTranslator,
+  gl as createVirtualTreeIndexMaps,
+  xn as defaultTranslations,
+  U as findNodeById,
+  ae as findParent,
+  Wo as flattenTree,
+  Le as getComponent,
+  rr as getComponentsByCategory,
+  We as getMaxId,
+  cl as getRegisteredComponents,
+  ul as hasComponent,
+  Tn as insertNode,
+  Jr as interpolateProps,
+  Qn as isPageBuilderError,
+  Fr as mergeTranslations,
+  Xr as moveNode,
+  gn as normalizeSafeHtmlTag,
+  ll as registerComponent,
+  tr as registerComponents,
+  Yr as removeNode,
+  sl as replaceComponent,
+  nr as resolveComponent,
+  mn as sanitizeRichTextHtml,
+  se as sanitizeUrlByKind,
+  ml as sliceWindow,
+  $r as translate,
+  dl as unregisterComponent,
+  wo as useDragDrop,
+  _o as useEditor,
+  yo as useNodeTree,
+  ho as usePageBuilder,
+  pe as usePageBuilderI18n,
+  lt as validateNode,
+  wn as validatePageData,
+  Cn as walkTree
+};
+//# sourceMappingURL=index.js.map