brick-pdf 0.1.1

package/dist/brick-pdf.js

@@ -0,0 +1,1685 @@
+import { defineComponent as _, openBlock as s, createElementBlock as a, normalizeStyle as R, toDisplayString as w, renderSlot as X, normalizeClass as K, createElementVNode as f, Fragment as C, renderList as P, reactive as Pe, provide as L, inject as M, toRaw as H, ref as E, computed as $, createTextVNode as ne, createCommentVNode as I, createBlock as B, resolveDynamicComponent as Q, withCtx as W, onMounted as se, onBeforeUnmount as ae, resolveComponent as Ee, withDirectives as G, unref as k, vModelSelect as oe, createVNode as O, vModelText as $e, watch as Ie } from "vue";
+import { useMagicKeys as Re, whenever as re } from "@vueuse/core";
+import le from "sortablejs";
+function ce() {
+  return {
+    pageSize: "A4",
+    pageOrientation: "portrait",
+    pageMargins: [40, 60, 40, 60],
+    defaultStyle: {
+      fontSize: 12
+    },
+    styles: {},
+    content: []
+  };
+}
+const J = /* @__PURE__ */ new Map();
+function z(e) {
+  J.set(e.type, e);
+}
+function F(e) {
+  return J.get(e);
+}
+function De() {
+  return Array.from(J.values());
+}
+function or(e) {
+  return J.delete(e);
+}
+function ze() {
+  return { text: "New Text" };
+}
+function Te() {
+  return { fontSize: 12 };
+}
+function Ne(e) {
+  const t = { text: e.props.text }, n = e.style;
+  return n.fontSize && (t.fontSize = n.fontSize), n.bold && (t.bold = n.bold), n.italics && (t.italics = n.italics), n.color && (t.color = n.color), n.alignment && (t.alignment = n.alignment), n.margin && (t.margin = n.margin), n.font && (t.font = n.font), n.lineHeight && (t.lineHeight = n.lineHeight), n.characterSpacing && (t.characterSpacing = n.characterSpacing), n.decoration && (t.decoration = n.decoration), n.decorationStyle && (t.decorationStyle = n.decorationStyle), n.decorationColor && (t.decorationColor = n.decorationColor), n.background && (t.background = n.background), n.link && (t.link = n.link), n.opacity !== void 0 && (t.opacity = n.opacity), t;
+}
+const Le = /* @__PURE__ */ _({
+  __name: "TextRenderer",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", {
+      class: "brick-el-text",
+      style: R({
+        fontSize: (e.node.style.fontSize ?? 12) + "px",
+        fontWeight: e.node.style.bold ? "bold" : "normal",
+        fontStyle: e.node.style.italics ? "italic" : "normal",
+        color: e.node.style.color,
+        textAlign: e.node.style.alignment,
+        lineHeight: e.node.style.lineHeight,
+        textDecoration: e.node.style.decoration === "lineThrough" ? "line-through" : e.node.style.decoration,
+        backgroundColor: e.node.style.background,
+        opacity: e.node.style.opacity
+      })
+    }, w(e.node.props.text), 5));
+  }
+}), S = (e, t) => {
+  const n = e.__vccOpts || e;
+  for (const [i, c] of t)
+    n[i] = c;
+  return n;
+}, Me = /* @__PURE__ */ S(Le, [["__scopeId", "data-v-a7cd1565"]]), Be = { class: "brick-text-editor" }, Oe = /* @__PURE__ */ _({
+  __name: "TextPropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", Be));
+  }
+}), Ve = {
+  type: "text",
+  label: "Text",
+  icon: "T",
+  isContainer: !1,
+  defaultProps: ze,
+  defaultStyle: Te,
+  rendererComponent: Me,
+  propertyEditorComponent: Oe,
+  propertyFields: [
+    { key: "props.text", label: "Text Content", section: "content", type: "textarea", defaultValue: "New Text" },
+    { key: "style.fontSize", label: "Font Size", section: "style", type: "number", min: 6, max: 72, step: 1, defaultValue: 12 },
+    { key: "style.bold", label: "Bold", section: "style", type: "toggle", defaultValue: !1 },
+    { key: "style.italics", label: "Italic", section: "style", type: "toggle", defaultValue: !1 },
+    { key: "style.color", label: "Color", section: "style", type: "color", defaultValue: "#000000" },
+    { key: "style.alignment", label: "Alignment", section: "style", type: "select", options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" },
+      { label: "Justify", value: "justify" }
+    ], defaultValue: "left" },
+    { key: "style.lineHeight", label: "Line Height", section: "style", type: "number", min: 0.5, max: 3, step: 0.1 },
+    { key: "style.background", label: "Background", section: "style", type: "color" },
+    { key: "style.margin", label: "Margin", section: "layout", type: "margin", defaultValue: [0, 0, 0, 0] },
+    { key: "style.decoration", label: "Decoration", section: "advanced", type: "select", options: [
+      { label: "None", value: void 0 },
+      { label: "Underline", value: "underline" },
+      { label: "Overline", value: "overline" },
+      { label: "Line Through", value: "lineThrough" }
+    ] },
+    { key: "style.link", label: "Link URL", section: "advanced", type: "text" },
+    { key: "style.opacity", label: "Opacity", section: "advanced", type: "slider", min: 0, max: 1, step: 0.1, defaultValue: 1 }
+  ],
+  toPdfmake: Ne
+};
+function Ae() {
+  return {};
+}
+function He() {
+  return {};
+}
+function Fe(e, t) {
+  const n = {
+    stack: t(e.children)
+  };
+  return e.style.margin && (n.margin = e.style.margin), e.style.fillColor && (n.fillColor = e.style.fillColor), n;
+}
+const Ue = /* @__PURE__ */ _({
+  __name: "StackRenderer",
+  props: {
+    node: {},
+    path: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", {
+      class: "brick-el-stack",
+      style: R({ backgroundColor: e.node.style.fillColor })
+    }, [
+      X(t.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+}), We = /* @__PURE__ */ S(Ue, [["__scopeId", "data-v-c59e7405"]]), Je = { class: "brick-stack-editor" }, Ye = /* @__PURE__ */ _({
+  __name: "StackPropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", Je));
+  }
+}), qe = {
+  type: "stack",
+  label: "Stack",
+  icon: "☰",
+  isContainer: !0,
+  acceptsChildTypes: null,
+  defaultProps: Ae,
+  defaultStyle: He,
+  rendererComponent: We,
+  propertyEditorComponent: Ye,
+  propertyFields: [
+    { key: "style.fillColor", label: "Fill Color", section: "style", type: "color" },
+    { key: "style.margin", label: "Margin", section: "layout", type: "margin", defaultValue: [0, 0, 0, 0] }
+  ],
+  toPdfmake: Fe
+};
+function je() {
+  return { columnGap: 10 };
+}
+function Ge() {
+  return {};
+}
+function Xe(e, t) {
+  const n = {
+    columns: t(e.children),
+    columnGap: e.props.columnGap ?? 10
+  };
+  return e.style.margin && (n.margin = e.style.margin), n;
+}
+const Ke = /* @__PURE__ */ _({
+  __name: "ColumnsRenderer",
+  props: {
+    node: {},
+    path: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", {
+      class: "brick-el-columns",
+      style: R({ "--column-gap": (e.node.props.columnGap ?? 10) + "px" })
+    }, [
+      X(t.$slots, "default", {}, void 0, !0)
+    ], 4));
+  }
+}), Qe = /* @__PURE__ */ S(Ke, [["__scopeId", "data-v-217dd721"]]), Ze = { class: "brick-columns-editor" }, et = /* @__PURE__ */ _({
+  __name: "ColumnsPropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", Ze));
+  }
+}), tt = {
+  type: "columns",
+  label: "Columns",
+  icon: "▥",
+  isContainer: !0,
+  acceptsChildTypes: null,
+  defaultProps: je,
+  defaultStyle: Ge,
+  rendererComponent: Qe,
+  propertyEditorComponent: et,
+  propertyFields: [
+    { key: "props.columnGap", label: "Column Gap", section: "layout", type: "number", min: 0, max: 50, step: 1, defaultValue: 10 },
+    { key: "style.margin", label: "Margin", section: "layout", type: "margin", defaultValue: [0, 0, 0, 0] }
+  ],
+  toPdfmake: Xe
+};
+function nt() {
+  return {
+    headerRows: 1,
+    widths: ["*", "*"],
+    body: [
+      ["Header 1", "Header 2"],
+      ["Cell 1", "Cell 2"]
+    ],
+    layout: "lightHorizontalLines"
+  };
+}
+function ot() {
+  return { fontSize: 12 };
+}
+function rt(e) {
+  const t = e.props.body, n = {
+    table: {
+      headerRows: e.props.headerRows,
+      widths: e.props.widths,
+      body: t.map(
+        (c) => c.map((o) => ({ text: o }))
+      )
+    }
+  }, i = e.props.layout;
+  return i && i !== "none" && (n.layout = i), e.style.fontSize && (n.fontSize = e.style.fontSize), e.style.color && (n.color = e.style.color), e.style.margin && (n.margin = e.style.margin), n;
+}
+const lt = /* @__PURE__ */ _({
+  __name: "TableRenderer",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", {
+      class: K(["brick-el-table", "brick-el-table--" + (e.node.props.layout ?? "lightHorizontalLines")]),
+      style: R({ fontSize: (e.node.style.fontSize ?? 12) + "px", color: e.node.style.color })
+    }, [
+      f("table", null, [
+        f("thead", null, [
+          (s(!0), a(C, null, P(e.node.props.body.slice(0, e.node.props.headerRows), (i, c) => (s(), a("tr", {
+            key: "h" + c
+          }, [
+            (s(!0), a(C, null, P(i, (o, d) => (s(), a("th", { key: d }, w(o), 1))), 128))
+          ]))), 128))
+        ]),
+        f("tbody", null, [
+          (s(!0), a(C, null, P(e.node.props.body.slice(e.node.props.headerRows), (i, c) => (s(), a("tr", {
+            key: "b" + c
+          }, [
+            (s(!0), a(C, null, P(i, (o, d) => (s(), a("td", { key: d }, w(o), 1))), 128))
+          ]))), 128))
+        ])
+      ])
+    ], 6));
+  }
+}), it = /* @__PURE__ */ S(lt, [["__scopeId", "data-v-b863b05d"]]), de = /* @__PURE__ */ Symbol("brick-pdf-document-store");
+function st(e) {
+  const t = Pe(e ?? ce());
+  function n(u, p) {
+    const r = p ?? t.content;
+    for (let l = 0; l < r.length; l++) {
+      const y = r[l];
+      if (y) {
+        if (y.id === u)
+          return { node: y, parent: r, index: l };
+        if (y.children.length > 0) {
+          const b = n(u, y.children);
+          if (b) return b;
+        }
+      }
+    }
+    return null;
+  }
+  function i(u) {
+    t.content.splice(0, t.content.length, ...u);
+  }
+  function c() {
+    return JSON.parse(JSON.stringify(H(t.content)));
+  }
+  function o(u) {
+    t.pageSize = u.pageSize, t.pageOrientation = u.pageOrientation, t.pageMargins = u.pageMargins, t.defaultStyle = u.defaultStyle ?? { fontSize: 12 }, t.styles = u.styles ?? {}, t.content.splice(0, t.content.length, ...u.content);
+  }
+  function d() {
+    return JSON.parse(JSON.stringify(H(t)));
+  }
+  return { document: t, findNodeById: n, replaceContent: i, snapshotContent: c, loadDocument: o, exportDocument: d };
+}
+function at(e) {
+  L(de, e);
+}
+function Z() {
+  const e = M(de);
+  if (!e)
+    throw new Error("useDocumentStore() requires a BrickPdf ancestor component");
+  return e;
+}
+const ue = /* @__PURE__ */ Symbol("brick-pdf-selection");
+function ct(e) {
+  const t = E(null), n = $(() => t.value ? e.findNodeById(t.value)?.node ?? null : null);
+  function i(o) {
+    t.value = o;
+  }
+  function c() {
+    t.value = null;
+  }
+  return { selectedId: t, selectedNode: n, select: i, deselect: c };
+}
+function dt(e) {
+  L(ue, e);
+}
+function U() {
+  const e = M(ue);
+  if (!e)
+    throw new Error("useSelection() requires a BrickPdf ancestor component");
+  return e;
+}
+const pe = /* @__PURE__ */ Symbol("brick-pdf-element-actions");
+let ut = 0;
+function fe() {
+  return `el-${Date.now()}-${++ut}`;
+}
+function me(e) {
+  return {
+    ...e,
+    id: fe(),
+    props: structuredClone(e.props),
+    style: structuredClone(e.style),
+    children: e.children.map(me)
+  };
+}
+function pt(e, t) {
+  function n(p, r, l) {
+    const y = F(p);
+    if (!y) return null;
+    t.record();
+    const b = {
+      id: fe(),
+      type: p,
+      props: y.defaultProps(),
+      style: y.defaultStyle(),
+      children: []
+    }, m = r ? e.findNodeById(r)?.node.children : e.document.content;
+    if (!m) return null;
+    const g = l ?? m.length;
+    return m.splice(g, 0, b), b;
+  }
+  function i(p) {
+    const r = e.findNodeById(p);
+    r && (t.record(), r.parent.splice(r.index, 1));
+  }
+  function c(p, r, l) {
+    const y = e.findNodeById(p);
+    if (!y) return;
+    t.record();
+    const b = y.parent.splice(y.index, 1)[0];
+    if (!b) return;
+    const m = r ? e.findNodeById(r)?.node.children : e.document.content;
+    m && m.splice(l, 0, b);
+  }
+  function o(p) {
+    const r = e.findNodeById(p);
+    if (!r) return null;
+    t.record();
+    const l = me(r.node);
+    return r.parent.splice(r.index + 1, 0, l), l;
+  }
+  function d(p, r) {
+    const l = e.findNodeById(p);
+    l && (t.record(), Object.assign(l.node.props, r));
+  }
+  function u(p, r) {
+    const l = e.findNodeById(p);
+    l && (t.record(), Object.assign(l.node.style, r));
+  }
+  return { addElement: n, removeElement: i, moveElement: c, duplicateElement: o, updateProps: d, updateStyle: u };
+}
+function ft(e) {
+  L(pe, e);
+}
+function Y() {
+  const e = M(pe);
+  if (!e)
+    throw new Error("useElementActions() requires a BrickPdf ancestor component");
+  return e;
+}
+const ye = /* @__PURE__ */ Symbol("brick-pdf-history"), mt = 50;
+function yt(e) {
+  const t = E([]), n = E([]);
+  let i = 0;
+  const c = $(() => t.value.length > 0), o = $(() => n.value.length > 0);
+  function d() {
+    const r = Date.now();
+    if (r - i < 100) return;
+    i = r;
+    const l = e.snapshotContent();
+    t.value.push(l), t.value.length > mt && t.value.shift(), n.value = [];
+  }
+  function u() {
+    const r = t.value.pop();
+    r && (n.value.push(e.snapshotContent()), e.replaceContent(r));
+  }
+  function p() {
+    const r = n.value.pop();
+    r && (t.value.push(e.snapshotContent()), e.replaceContent(r));
+  }
+  return { canUndo: c, canRedo: o, record: d, undo: u, redo: p };
+}
+function gt(e) {
+  L(ye, e);
+}
+function bt() {
+  const e = M(ye);
+  if (!e)
+    throw new Error("useHistory() requires a BrickPdf ancestor component");
+  return e;
+}
+const ge = /* @__PURE__ */ Symbol("brick-pdf-drag-drop");
+function vt(e, t) {
+  function n(c) {
+    return le.create(c, {
+      group: { name: "brick-elements", pull: "clone", put: !1 },
+      sort: !1,
+      animation: 150
+    });
+  }
+  function i(c, o) {
+    return le.create(c, {
+      group: { name: "brick-elements", put: !0 },
+      animation: 150,
+      fallbackOnBody: !0,
+      swapThreshold: 0.65,
+      emptyInsertThreshold: 80,
+      onAdd(d) {
+        const u = d.item, p = u.dataset.elementType;
+        if (p) {
+          if (u.parentNode?.removeChild(u), o) {
+            const r = e.findNodeById(o);
+            if (r) {
+              const l = F(r.node.type);
+              if (l?.acceptsChildTypes && !l.acceptsChildTypes.includes(p))
+                return;
+            }
+          }
+          t.addElement(p, o, d.newIndex);
+        }
+      },
+      onEnd(d) {
+        if (d.from === d.to && d.oldIndex !== void 0 && d.newIndex !== void 0) {
+          const u = o ? e.findNodeById(o)?.node.children : e.document.content;
+          if (!u || d.oldIndex === d.newIndex) return;
+          const p = u.splice(d.oldIndex, 1)[0];
+          p && u.splice(d.newIndex, 0, p);
+        }
+      }
+    });
+  }
+  return { initToolbar: n, initContainer: i };
+}
+function ht(e) {
+  L(ge, e);
+}
+function be() {
+  const e = M(ge);
+  if (!e)
+    throw new Error("useDragDrop() requires a BrickPdf ancestor component");
+  return e;
+}
+const ve = /* @__PURE__ */ Symbol("brick-pdf-export");
+function _t(e) {
+  return e.map(he);
+}
+function he(e) {
+  const t = F(e.type);
+  return t ? t.toPdfmake(e, _t) : { text: `[Unknown: ${e.type}]` };
+}
+function kt(e) {
+  function t() {
+    const o = e.document;
+    return {
+      pageSize: o.pageSize,
+      pageOrientation: o.pageOrientation,
+      pageMargins: o.pageMargins,
+      defaultStyle: JSON.parse(JSON.stringify(H(o.defaultStyle))),
+      styles: JSON.parse(JSON.stringify(H(o.styles))),
+      content: o.content.map(he)
+    };
+  }
+  async function n() {
+    const o = await import("pdfmake/build/pdfmake"), d = await import("pdfmake/build/vfs_fonts"), u = o.default || o, p = d.pdfMake;
+    return p && p.vfs ? u.vfs = p.vfs : d.default && (u.vfs = d.default), u;
+  }
+  function i(o) {
+    const d = t();
+    n().then((u) => {
+      u.createPdf(d).download(o ?? "document.pdf");
+    });
+  }
+  function c() {
+    const o = t();
+    n().then((d) => {
+      d.createPdf(o).open();
+    });
+  }
+  return { toDocumentDefinition: t, exportPdf: i, openPdf: c };
+}
+function xt(e) {
+  L(ve, e);
+}
+function St() {
+  const e = M(ve);
+  if (!e)
+    throw new Error("usePdfExport() requires a BrickPdf ancestor component");
+  return e;
+}
+const _e = /* @__PURE__ */ Symbol("brick-pdf-clipboard");
+let Ct = 0;
+function wt() {
+  return `el-${Date.now()}-${++Ct}`;
+}
+function ke(e) {
+  return {
+    ...e,
+    id: wt(),
+    props: structuredClone(e.props),
+    style: structuredClone(e.style),
+    children: e.children.map(ke)
+  };
+}
+function Pt(e, t) {
+  const n = E(null), i = E(!1), c = E(null), o = E(!1);
+  function d(r) {
+    const l = e.findNodeById(r);
+    l && (n.value = structuredClone(l.node), i.value = !1, c.value = null, o.value = !0);
+  }
+  function u(r) {
+    const l = e.findNodeById(r);
+    l && (n.value = structuredClone(l.node), i.value = !0, c.value = r, o.value = !0);
+  }
+  function p(r) {
+    if (!n.value) return;
+    i.value && c.value && (t.removeElement(c.value), i.value = !1, c.value = null);
+    const l = ke(n.value), y = r ? e.findNodeById(r)?.node.children : e.document.content;
+    y && (y.push(l), i.value && (n.value = null, o.value = !1));
+  }
+  return { hasClipboard: o, copy: d, cut: u, paste: p };
+}
+function Et(e) {
+  L(_e, e);
+}
+function rr() {
+  const e = M(_e);
+  if (!e)
+    throw new Error("useClipboard() requires a BrickPdf ancestor component");
+  return e;
+}
+const xe = /* @__PURE__ */ Symbol("brick-pdf-resize");
+function $t(e) {
+  const t = E(!1);
+  function n(i, c, o, d) {
+    t.value = !0;
+    const u = d.clientX, p = d.clientY, r = o.width, l = o.height;
+    function y(m) {
+      const g = m.clientX - u, v = m.clientY - p;
+      let h = r, x = l;
+      c.includes("e") && (h = r + g), c.includes("w") && (h = r - g), c.includes("s") && (x = l + v), c.includes("n") && (x = l - v), h = Math.max(20, h), x = Math.max(20, x), e.updateStyle(i, {
+        width: Math.round(h),
+        height: Math.round(x)
+      });
+    }
+    function b() {
+      t.value = !1, document.removeEventListener("pointermove", y), document.removeEventListener("pointerup", b);
+    }
+    document.addEventListener("pointermove", y), document.addEventListener("pointerup", b);
+  }
+  return { isResizing: t, startResize: n };
+}
+function It(e) {
+  L(xe, e);
+}
+function lr() {
+  const e = M(xe);
+  if (!e)
+    throw new Error("useResize() requires a BrickPdf ancestor component");
+  return e;
+}
+const Rt = { class: "brick-table-editor" }, Dt = { class: "brick-table-editor__grid" }, zt = ["onClick"], Tt = { class: "brick-table-editor__row-header" }, Nt = ["onClick"], Lt = ["value", "onInput"], Mt = /* @__PURE__ */ _({
+  __name: "TablePropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    const t = e, n = Y();
+    function i() {
+      return t.node.props.body ?? [];
+    }
+    function c() {
+      return t.node.props.widths ?? [];
+    }
+    function o(l, y, b) {
+      const m = i().map((g) => [...g]);
+      m[l][y] = b, n.updateProps(t.node.id, { body: m });
+    }
+    function d() {
+      const l = i().map((b) => [...b]), y = l[0]?.length ?? 2;
+      l.push(Array(y).fill("")), n.updateProps(t.node.id, { body: l });
+    }
+    function u(l) {
+      const y = i().map((m) => [...m]);
+      if (y.length <= 1) return;
+      y.splice(l, 1), t.node.props.headerRows > y.length ? n.updateProps(t.node.id, { body: y, headerRows: y.length }) : n.updateProps(t.node.id, { body: y });
+    }
+    function p() {
+      const l = i().map((b) => [...b, ""]), y = [...c(), "*"];
+      n.updateProps(t.node.id, { body: l, widths: y });
+    }
+    function r(l) {
+      const y = i().map((m) => {
+        const g = [...m];
+        return g.splice(l, 1), g;
+      });
+      if ((y[0]?.length ?? 0) < 1) return;
+      const b = [...c()];
+      b.splice(l, 1), n.updateProps(t.node.id, { body: y, widths: b });
+    }
+    return (l, y) => (s(), a("div", Rt, [
+      f("div", { class: "brick-table-editor__actions" }, [
+        f("button", {
+          class: "brick-table-editor__btn",
+          onClick: d
+        }, "+ Row"),
+        f("button", {
+          class: "brick-table-editor__btn",
+          onClick: p
+        }, "+ Column")
+      ]),
+      f("div", Dt, [
+        f("table", null, [
+          f("thead", null, [
+            f("tr", null, [
+              y[0] || (y[0] = f("th", { class: "brick-table-editor__corner" }, null, -1)),
+              (s(!0), a(C, null, P(i()[0] ?? [], (b, m) => (s(), a("th", {
+                key: m,
+                class: "brick-table-editor__col-header"
+              }, [
+                ne(" Col " + w(m + 1) + " ", 1),
+                (i()[0]?.length ?? 0) > 1 ? (s(), a("button", {
+                  key: 0,
+                  class: "brick-table-editor__remove-btn",
+                  title: "Remove column",
+                  onClick: (g) => r(m)
+                }, "x", 8, zt)) : I("", !0)
+              ]))), 128))
+            ])
+          ]),
+          f("tbody", null, [
+            (s(!0), a(C, null, P(i(), (b, m) => (s(), a("tr", { key: m }, [
+              f("td", Tt, [
+                ne(w(m + 1) + " ", 1),
+                i().length > 1 ? (s(), a("button", {
+                  key: 0,
+                  class: "brick-table-editor__remove-btn",
+                  title: "Remove row",
+                  onClick: (g) => u(m)
+                }, "x", 8, Nt)) : I("", !0)
+              ]),
+              (s(!0), a(C, null, P(b, (g, v) => (s(), a("td", { key: v }, [
+                f("input", {
+                  class: "brick-table-editor__cell",
+                  type: "text",
+                  value: g,
+                  onInput: (h) => o(m, v, h.target.value)
+                }, null, 40, Lt)
+              ]))), 128))
+            ]))), 128))
+          ])
+        ])
+      ])
+    ]));
+  }
+}), Bt = /* @__PURE__ */ S(Mt, [["__scopeId", "data-v-4895020c"]]), Ot = {
+  type: "table",
+  label: "Table",
+  icon: "▦",
+  isContainer: !1,
+  defaultProps: nt,
+  defaultStyle: ot,
+  rendererComponent: it,
+  propertyEditorComponent: Bt,
+  propertyFields: [
+    { key: "props.headerRows", label: "Header Rows", section: "content", type: "number", min: 0, max: 10, step: 1, defaultValue: 1 },
+    { key: "props.layout", label: "Border Style", section: "style", type: "select", options: [
+      { label: "Light Lines", value: "lightHorizontalLines" },
+      { label: "Grid", value: "grid" },
+      { label: "Header Only", value: "headerLineOnly" },
+      { label: "No Borders", value: "noBorders" },
+      { label: "None", value: "none" }
+    ], defaultValue: "lightHorizontalLines" },
+    { key: "style.fontSize", label: "Font Size", section: "style", type: "number", min: 6, max: 72, step: 1, defaultValue: 12 },
+    { key: "style.color", label: "Text Color", section: "style", type: "color", defaultValue: "#000000" },
+    { key: "style.margin", label: "Margin", section: "layout", type: "margin", defaultValue: [0, 0, 0, 0] }
+  ],
+  toPdfmake: rt
+};
+function Vt() {
+  return { src: "", width: 200, height: 150, fit: null };
+}
+function At() {
+  return {};
+}
+function Ht(e) {
+  const t = {
+    image: e.props.src
+  };
+  return e.props.width && (t.width = e.props.width), e.props.height && (t.height = e.props.height), e.props.fit && (t.fit = e.props.fit), e.style.margin && (t.margin = e.style.margin), e.style.alignment && (t.alignment = e.style.alignment), e.style.opacity !== void 0 && (t.opacity = e.style.opacity), t;
+}
+const Ft = { class: "brick-el-image" }, Ut = ["src"], Wt = {
+  key: 1,
+  class: "brick-el-image__placeholder"
+}, Jt = /* @__PURE__ */ _({
+  __name: "ImageRenderer",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", Ft, [
+      e.node.props.src ? (s(), a("img", {
+        key: 0,
+        src: e.node.props.src,
+        style: R({
+          width: e.node.props.width + "px",
+          height: e.node.props.height + "px",
+          objectFit: "contain",
+          opacity: e.node.style.opacity
+        })
+      }, null, 12, Ut)) : (s(), a("div", Wt, " No image selected "))
+    ]));
+  }
+}), Yt = /* @__PURE__ */ S(Jt, [["__scopeId", "data-v-38184258"]]), qt = { class: "brick-image-editor" }, jt = /* @__PURE__ */ _({
+  __name: "ImagePropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", qt));
+  }
+}), Gt = {
+  type: "image",
+  label: "Image",
+  icon: "🖼",
+  isContainer: !1,
+  defaultProps: Vt,
+  defaultStyle: At,
+  rendererComponent: Yt,
+  propertyEditorComponent: jt,
+  propertyFields: [
+    { key: "props.src", label: "Image (Base64)", section: "content", type: "file" },
+    { key: "props.width", label: "Width", section: "layout", type: "number", min: 10, max: 1e3, step: 10, defaultValue: 200 },
+    { key: "props.height", label: "Height", section: "layout", type: "number", min: 10, max: 1e3, step: 10, defaultValue: 150 },
+    { key: "style.alignment", label: "Alignment", section: "style", type: "select", options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" }
+    ] },
+    { key: "style.margin", label: "Margin", section: "layout", type: "margin", defaultValue: [0, 0, 0, 0] },
+    { key: "style.opacity", label: "Opacity", section: "advanced", type: "slider", min: 0, max: 1, step: 0.1, defaultValue: 1 }
+  ],
+  toPdfmake: Ht
+};
+function Xt() {
+  return { ordered: !1, items: ["Item 1", "Item 2", "Item 3"] };
+}
+function Kt() {
+  return { fontSize: 12 };
+}
+function Qt(e) {
+  const t = e.props.items, i = e.props.ordered ? { ol: t } : { ul: t };
+  return e.style.fontSize && (i.fontSize = e.style.fontSize), e.style.color && (i.color = e.style.color), e.style.margin && (i.margin = e.style.margin), i;
+}
+const Zt = /* @__PURE__ */ _({
+  __name: "ListRenderer",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", {
+      class: "brick-el-list",
+      style: R({ fontSize: (e.node.style.fontSize ?? 12) + "px", color: e.node.style.color })
+    }, [
+      (s(), B(Q(e.node.props.ordered ? "ol" : "ul"), null, {
+        default: W(() => [
+          (s(!0), a(C, null, P(e.node.props.items, (i, c) => (s(), a("li", { key: c }, w(i), 1))), 128))
+        ]),
+        _: 1
+      }))
+    ], 4));
+  }
+}), en = /* @__PURE__ */ S(Zt, [["__scopeId", "data-v-8107f859"]]), tn = { class: "brick-list-editor" }, nn = /* @__PURE__ */ _({
+  __name: "ListPropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", tn));
+  }
+}), on = {
+  type: "list",
+  label: "List",
+  icon: "☰",
+  isContainer: !1,
+  defaultProps: Xt,
+  defaultStyle: Kt,
+  rendererComponent: en,
+  propertyEditorComponent: nn,
+  propertyFields: [
+    { key: "props.ordered", label: "Ordered", section: "content", type: "toggle", defaultValue: !1 },
+    { key: "props.items", label: "Items", section: "content", type: "textarea", defaultValue: `Item 1
+Item 2
+Item 3` },
+    { key: "style.fontSize", label: "Font Size", section: "style", type: "number", min: 6, max: 72, step: 1, defaultValue: 12 },
+    { key: "style.color", label: "Color", section: "style", type: "color", defaultValue: "#000000" },
+    { key: "style.margin", label: "Margin", section: "layout", type: "margin", defaultValue: [0, 0, 0, 0] }
+  ],
+  toPdfmake: Qt
+};
+function rn() {
+  return { data: "https://example.com", fit: 100 };
+}
+function ln() {
+  return {};
+}
+function sn(e) {
+  const t = {
+    qr: e.props.data,
+    fit: e.props.fit ?? 100
+  };
+  return e.style.alignment && (t.alignment = e.style.alignment), e.style.margin && (t.margin = e.style.margin), t;
+}
+const an = { class: "brick-el-qr__preview" }, cn = /* @__PURE__ */ _({
+  __name: "QrRenderer",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", {
+      class: "brick-el-qr",
+      style: R({
+        width: (e.node.props.fit ?? 100) + "px",
+        height: (e.node.props.fit ?? 100) + "px"
+      })
+    }, [
+      f("div", an, "QR: " + w(e.node.props.data), 1)
+    ], 4));
+  }
+}), dn = /* @__PURE__ */ S(cn, [["__scopeId", "data-v-f106ba48"]]), un = { class: "brick-qr-editor" }, pn = /* @__PURE__ */ _({
+  __name: "QrPropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", un));
+  }
+}), fn = {
+  type: "qr",
+  label: "QR Code",
+  icon: "⊞",
+  isContainer: !1,
+  defaultProps: rn,
+  defaultStyle: ln,
+  rendererComponent: dn,
+  propertyEditorComponent: pn,
+  propertyFields: [
+    { key: "props.data", label: "QR Data", section: "content", type: "text", defaultValue: "https://example.com" },
+    { key: "props.fit", label: "Size (px)", section: "layout", type: "number", min: 50, max: 500, step: 10, defaultValue: 100 },
+    { key: "style.alignment", label: "Alignment", section: "style", type: "select", options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" }
+    ] },
+    { key: "style.margin", label: "Margin", section: "layout", type: "margin", defaultValue: [0, 0, 0, 0] }
+  ],
+  toPdfmake: sn
+};
+function mn() {
+  return {
+    svg: '<svg viewBox="0 0 100 100"><rect width="100" height="100" fill="#eee" /><text x="50" y="55" text-anchor="middle" font-size="12">SVG</text></svg>',
+    width: 200,
+    height: 200
+  };
+}
+function yn() {
+  return {};
+}
+function gn(e) {
+  const t = {
+    svg: e.props.svg
+  };
+  return e.props.width && (t.width = e.props.width), e.props.height && (t.height = e.props.height), e.style.margin && (t.margin = e.style.margin), e.style.alignment && (t.alignment = e.style.alignment), t;
+}
+const bn = ["innerHTML"], vn = /* @__PURE__ */ _({
+  __name: "SvgRenderer",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", {
+      class: "brick-el-svg",
+      style: R({
+        width: e.node.props.width + "px",
+        height: e.node.props.height + "px"
+      }),
+      innerHTML: e.node.props.svg
+    }, null, 12, bn));
+  }
+}), hn = /* @__PURE__ */ S(vn, [["__scopeId", "data-v-5e9f3319"]]), _n = { class: "brick-svg-editor" }, kn = /* @__PURE__ */ _({
+  __name: "SvgPropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", _n));
+  }
+}), xn = {
+  type: "svg",
+  label: "SVG",
+  icon: "◇",
+  isContainer: !1,
+  defaultProps: mn,
+  defaultStyle: yn,
+  rendererComponent: hn,
+  propertyEditorComponent: kn,
+  propertyFields: [
+    { key: "props.svg", label: "SVG Markup", section: "content", type: "textarea" },
+    { key: "props.width", label: "Width", section: "layout", type: "number", min: 10, max: 1e3, step: 10, defaultValue: 200 },
+    { key: "props.height", label: "Height", section: "layout", type: "number", min: 10, max: 1e3, step: 10, defaultValue: 200 },
+    { key: "style.alignment", label: "Alignment", section: "style", type: "select", options: [
+      { label: "Left", value: "left" },
+      { label: "Center", value: "center" },
+      { label: "Right", value: "right" }
+    ] },
+    { key: "style.margin", label: "Margin", section: "layout", type: "margin", defaultValue: [0, 0, 0, 0] }
+  ],
+  toPdfmake: gn
+};
+function Sn() {
+  return {
+    commands: [
+      { type: "rect", x: 0, y: 0, w: 200, h: 100, color: "#eeeeee" }
+    ],
+    width: 200,
+    height: 100
+  };
+}
+function Cn() {
+  return {};
+}
+function wn(e) {
+  const t = {
+    canvas: e.props.commands
+  };
+  return e.style.margin && (t.margin = e.style.margin), t;
+}
+const Pn = /* @__PURE__ */ _({
+  __name: "CanvasDrawRenderer",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", {
+      class: "brick-el-canvas",
+      style: R({
+        width: (e.node.props.width ?? 200) + "px",
+        height: (e.node.props.height ?? 100) + "px"
+      })
+    }, [...n[0] || (n[0] = [
+      f("div", { class: "brick-el-canvas__label" }, "Canvas Drawing", -1)
+    ])], 4));
+  }
+}), En = /* @__PURE__ */ S(Pn, [["__scopeId", "data-v-1b986707"]]), $n = { class: "brick-canvas-editor" }, In = /* @__PURE__ */ _({
+  __name: "CanvasDrawPropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", $n));
+  }
+}), Rn = {
+  type: "canvas",
+  label: "Canvas",
+  icon: "△",
+  isContainer: !1,
+  defaultProps: Sn,
+  defaultStyle: Cn,
+  rendererComponent: En,
+  propertyEditorComponent: In,
+  propertyFields: [
+    { key: "props.width", label: "Width", section: "layout", type: "number", min: 10, max: 1e3, step: 10, defaultValue: 200 },
+    { key: "props.height", label: "Height", section: "layout", type: "number", min: 10, max: 1e3, step: 10, defaultValue: 100 },
+    { key: "style.margin", label: "Margin", section: "layout", type: "margin", defaultValue: [0, 0, 0, 0] }
+  ],
+  toPdfmake: wn
+};
+function Dn() {
+  return {};
+}
+function zn() {
+  return {};
+}
+function Tn(e) {
+  return { text: "", pageBreak: "after" };
+}
+const Nn = { class: "brick-el-pagebreak" }, Ln = /* @__PURE__ */ _({
+  __name: "PageBreakRenderer",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", Nn, [...n[0] || (n[0] = [
+      f("hr", null, null, -1),
+      f("span", null, "Page Break", -1),
+      f("hr", null, null, -1)
+    ])]));
+  }
+}), Mn = /* @__PURE__ */ S(Ln, [["__scopeId", "data-v-60c05148"]]), Bn = { class: "brick-pagebreak-editor" }, On = /* @__PURE__ */ _({
+  __name: "PageBreakPropertyEditor",
+  props: {
+    node: {}
+  },
+  setup(e) {
+    return (t, n) => (s(), a("div", Bn, [...n[0] || (n[0] = [
+      f("p", { style: { color: "#999", "font-size": "12px" } }, "No configurable properties.", -1)
+    ])]));
+  }
+}), Vn = {
+  type: "pageBreak",
+  label: "Page Break",
+  icon: "⏎",
+  isContainer: !1,
+  defaultProps: Dn,
+  defaultStyle: zn,
+  rendererComponent: Mn,
+  propertyEditorComponent: On,
+  propertyFields: [],
+  toPdfmake: Tn
+};
+let ie = !1;
+function An() {
+  ie || (ie = !0, z(Ve), z(qe), z(tt), z(Ot), z(Gt), z(on), z(fn), z(xn), z(Rn), z(Vn));
+}
+const Hn = {
+  key: 0,
+  class: "brick-dropzone__empty"
+}, Fn = /* @__PURE__ */ _({
+  __name: "DropZone",
+  props: {
+    parentId: {},
+    layout: {}
+  },
+  setup(e) {
+    const t = e, n = E(null);
+    let i = null;
+    const c = be();
+    return se(() => {
+      n.value && (i = c.initContainer(n.value, t.parentId));
+    }), ae(() => {
+      i?.destroy();
+    }), (o, d) => (s(), a("div", {
+      ref_key: "el",
+      ref: n,
+      class: K(["brick-dropzone", { "brick-dropzone--horizontal": e.layout === "horizontal" }])
+    }, [
+      X(o.$slots, "default", {}, void 0, !0),
+      o.$slots.default ? I("", !0) : (s(), a("div", Hn, " Drop elements here "))
+    ], 2));
+  }
+}), Se = /* @__PURE__ */ S(Fn, [["__scopeId", "data-v-c33d3667"]]), Un = ["data-element-id", "data-element-type"], Wn = {
+  key: 1,
+  class: "brick-canvas-element__unknown"
+}, Jn = /* @__PURE__ */ _({
+  __name: "CanvasElement",
+  props: {
+    node: {},
+    path: {}
+  },
+  setup(e) {
+    const t = e, n = U(), i = Y(), c = E(null), o = $(() => F(t.node.type)), d = $(() => n.selectedId.value === t.node.id), u = $(() => o.value ? o.value.propertyFields.some((m) => m.key === "props.width" || m.key === "style.width") : !1), p = $(() => o.value ? o.value.propertyFields.some((m) => m.key === "props.height" || m.key === "style.height") : !1);
+    function r(m) {
+      m.stopPropagation(), n.select(t.node.id);
+    }
+    function l(m) {
+      m.stopPropagation(), m.preventDefault();
+      const g = m.clientX, v = c.value?.offsetWidth ?? 200;
+      function h(D) {
+        const V = D.clientX - g, T = Math.max(20, v + V);
+        o.value?.propertyFields.some((A) => A.key === "props.width") ? i.updateProps(t.node.id, { width: Math.round(T) }) : i.updateStyle(t.node.id, { width: Math.round(T) });
+      }
+      function x() {
+        document.removeEventListener("pointermove", h), document.removeEventListener("pointerup", x), document.body.style.cursor = "", document.body.style.userSelect = "";
+      }
+      document.body.style.cursor = "ew-resize", document.body.style.userSelect = "none", document.addEventListener("pointermove", h), document.addEventListener("pointerup", x);
+    }
+    function y(m) {
+      m.stopPropagation(), m.preventDefault();
+      const g = m.clientY, v = c.value?.offsetHeight ?? 100;
+      function h(D) {
+        const V = D.clientY - g, T = Math.max(20, v + V);
+        o.value?.propertyFields.some((A) => A.key === "props.height") ? i.updateProps(t.node.id, { height: Math.round(T) }) : i.updateStyle(t.node.id, { height: Math.round(T) });
+      }
+      function x() {
+        document.removeEventListener("pointermove", h), document.removeEventListener("pointerup", x), document.body.style.cursor = "", document.body.style.userSelect = "";
+      }
+      document.body.style.cursor = "ns-resize", document.body.style.userSelect = "none", document.addEventListener("pointermove", h), document.addEventListener("pointerup", x);
+    }
+    function b(m) {
+      m.stopPropagation(), m.preventDefault();
+      const g = m.clientX, v = m.clientY, h = c.value?.offsetWidth ?? 200, x = c.value?.offsetHeight ?? 100;
+      function D(T) {
+        const q = T.clientX - g, A = T.clientY - v, ee = Math.max(20, h + q), te = Math.max(20, x + A), Ce = o.value?.propertyFields.some((j) => j.key === "props.width"), we = o.value?.propertyFields.some((j) => j.key === "props.height");
+        Ce ? i.updateProps(t.node.id, { width: Math.round(ee) }) : i.updateStyle(t.node.id, { width: Math.round(ee) }), we ? i.updateProps(t.node.id, { height: Math.round(te) }) : i.updateStyle(t.node.id, { height: Math.round(te) });
+      }
+      function V() {
+        document.removeEventListener("pointermove", D), document.removeEventListener("pointerup", V), document.body.style.cursor = "", document.body.style.userSelect = "";
+      }
+      document.body.style.cursor = "nwse-resize", document.body.style.userSelect = "none", document.addEventListener("pointermove", D), document.addEventListener("pointerup", V);
+    }
+    return (m, g) => {
+      const v = Ee("CanvasElement", !0);
+      return s(), a("div", {
+        ref_key: "elRef",
+        ref: c,
+        class: K(["brick-canvas-element", { "brick-canvas-element--selected": d.value }]),
+        "data-element-id": e.node.id,
+        "data-element-type": e.node.type,
+        style: R({
+          width: typeof e.node.style.width == "number" ? e.node.style.width + "px" : e.node.props.width ? e.node.props.width + "px" : e.node.style.width,
+          height: e.node.style.height ? e.node.style.height + "px" : e.node.props.height ? e.node.props.height + "px" : void 0,
+          marginTop: e.node.style.margin?.[1] + "px",
+          marginRight: e.node.style.margin?.[2] + "px",
+          marginBottom: e.node.style.margin?.[3] + "px",
+          marginLeft: e.node.style.margin?.[0] + "px",
+          textAlign: e.node.style.alignment
+        }),
+        onClick: r
+      }, [
+        o.value ? (s(), B(Q(o.value.rendererComponent), {
+          key: 0,
+          node: e.node,
+          path: e.path
+        }, {
+          default: W(() => [
+            o.value.isContainer ? (s(), B(Se, {
+              key: 0,
+              "parent-id": e.node.id,
+              layout: e.node.type === "columns" ? "horizontal" : "vertical"
+            }, {
+              default: W(() => [
+                (s(!0), a(C, null, P(e.node.children, (h, x) => (s(), B(v, {
+                  key: h.id,
+                  node: h,
+                  path: [...e.path, x]
+                }, null, 8, ["node", "path"]))), 128))
+              ]),
+              _: 1
+            }, 8, ["parent-id", "layout"])) : I("", !0)
+          ]),
+          _: 1
+        }, 8, ["node", "path"])) : (s(), a("div", Wn, " Unknown element: " + w(e.node.type), 1)),
+        d.value ? (s(), a(C, { key: 2 }, [
+          u.value ? (s(), a("div", {
+            key: 0,
+            class: "brick-resize-handle brick-resize-handle--e",
+            onPointerdown: l
+          }, null, 32)) : I("", !0),
+          p.value ? (s(), a("div", {
+            key: 1,
+            class: "brick-resize-handle brick-resize-handle--s",
+            onPointerdown: y
+          }, null, 32)) : I("", !0),
+          u.value && p.value ? (s(), a("div", {
+            key: 2,
+            class: "brick-resize-handle brick-resize-handle--se",
+            onPointerdown: b
+          }, null, 32)) : I("", !0)
+        ], 64)) : I("", !0)
+      ], 14, Un);
+    };
+  }
+}), Yn = /* @__PURE__ */ S(Jn, [["__scopeId", "data-v-6b9cadc1"]]), qn = { class: "brick-doc-bar" }, jn = { class: "brick-doc-bar__field" }, Gn = ["value"], Xn = { class: "brick-doc-bar__field" }, Kn = { class: "brick-doc-bar__field brick-doc-bar__field--margins" }, Qn = { class: "brick-doc-bar__margins" }, Zn = ["placeholder", "title", "value", "onInput"], eo = { class: "brick-doc-bar__field" }, to = ["value"], no = /* @__PURE__ */ _({
+  __name: "DocumentSettings",
+  setup(e) {
+    const t = Z(), n = [
+      { label: "A3", value: "A3" },
+      { label: "A4", value: "A4" },
+      { label: "A5", value: "A5" },
+      { label: "Letter", value: "LETTER" },
+      { label: "Legal", value: "LEGAL" }
+    ];
+    function i(c, o) {
+      const d = [...t.document.pageMargins];
+      d[c] = o, t.document.pageMargins = d;
+    }
+    return (c, o) => (s(), a("div", qn, [
+      f("div", jn, [
+        o[3] || (o[3] = f("label", null, "Size", -1)),
+        G(f("select", {
+          "onUpdate:modelValue": o[0] || (o[0] = (d) => k(t).document.pageSize = d)
+        }, [
+          (s(), a(C, null, P(n, (d) => f("option", {
+            key: d.value,
+            value: d.value
+          }, w(d.label), 9, Gn)), 64))
+        ], 512), [
+          [oe, k(t).document.pageSize]
+        ])
+      ]),
+      f("div", Xn, [
+        o[5] || (o[5] = f("label", null, "Orientation", -1)),
+        G(f("select", {
+          "onUpdate:modelValue": o[1] || (o[1] = (d) => k(t).document.pageOrientation = d)
+        }, [...o[4] || (o[4] = [
+          f("option", { value: "portrait" }, "Portrait", -1),
+          f("option", { value: "landscape" }, "Landscape", -1)
+        ])], 512), [
+          [oe, k(t).document.pageOrientation]
+        ])
+      ]),
+      f("div", Kn, [
+        o[6] || (o[6] = f("label", null, "Margins", -1)),
+        f("div", Qn, [
+          (s(), a(C, null, P(["L", "T", "R", "B"], (d, u) => f("input", {
+            key: u,
+            type: "number",
+            placeholder: d,
+            title: d,
+            value: k(t).document.pageMargins[u],
+            onInput: (p) => i(u, Number(p.target.value))
+          }, null, 40, Zn)), 64))
+        ])
+      ]),
+      f("div", eo, [
+        o[7] || (o[7] = f("label", null, "Font Size", -1)),
+        f("input", {
+          type: "number",
+          value: k(t).document.defaultStyle.fontSize ?? 12,
+          min: "6",
+          max: "72",
+          onInput: o[2] || (o[2] = (d) => k(t).document.defaultStyle.fontSize = Number(d.target.value))
+        }, null, 40, to)
+      ])
+    ]));
+  }
+}), oo = /* @__PURE__ */ S(no, [["__scopeId", "data-v-f05c1083"]]), ro = { class: "brick-canvas" }, N = 0.75, lo = /* @__PURE__ */ _({
+  __name: "DesignCanvas",
+  setup(e) {
+    const t = Z(), n = U(), i = {
+      A3: [841.89, 1190.55],
+      A4: [595.28, 841.89],
+      A5: [419.53, 595.28],
+      LETTER: [612, 792],
+      LEGAL: [612, 1008]
+    }, c = $(() => {
+      const [u, p] = i[t.document.pageSize] ?? i.A4, r = t.document.pageOrientation === "landscape" ? p : u;
+      return Math.round(r * N);
+    }), o = $(() => {
+      const [u, p] = i[t.document.pageSize] ?? i.A4, r = t.document.pageOrientation === "landscape" ? u : p;
+      return Math.round(r * N);
+    });
+    function d(u) {
+      (u.target === u.currentTarget || u.target.classList.contains("brick-canvas__page")) && n.deselect();
+    }
+    return (u, p) => (s(), a("div", ro, [
+      O(oo),
+      f("div", {
+        class: "brick-canvas__scroll",
+        onClick: d
+      }, [
+        f("div", {
+          class: "brick-canvas__page",
+          style: R({
+            width: c.value + "px",
+            minHeight: o.value + "px",
+            "--page-height": o.value + "px",
+            "--margin-top": k(t).document.pageMargins[1] * N + "px",
+            "--margin-bottom": k(t).document.pageMargins[3] * N + "px",
+            paddingTop: k(t).document.pageMargins[1] * N + "px",
+            paddingRight: k(t).document.pageMargins[2] * N + "px",
+            paddingBottom: k(t).document.pageMargins[3] * N + "px",
+            paddingLeft: k(t).document.pageMargins[0] * N + "px"
+          })
+        }, [
+          O(Se, { "parent-id": null }, {
+            default: W(() => [
+              (s(!0), a(C, null, P(k(t).document.content, (r, l) => (s(), B(Yn, {
+                key: r.id,
+                node: r,
+                path: [l]
+              }, null, 8, ["node", "path"]))), 128))
+            ]),
+            _: 1
+          })
+        ], 4)
+      ])
+    ]));
+  }
+}), io = /* @__PURE__ */ S(lo, [["__scopeId", "data-v-f40597a5"]]), so = ["data-element-type"], ao = { class: "brick-element-list__icon" }, co = { class: "brick-element-list__label" }, uo = /* @__PURE__ */ _({
+  __name: "ToolbarElementList",
+  setup(e) {
+    const t = E(null);
+    let n = null;
+    const i = be(), c = De();
+    return se(() => {
+      t.value && (n = i.initToolbar(t.value));
+    }), ae(() => {
+      n?.destroy();
+    }), (o, d) => (s(), a("div", {
+      ref_key: "el",
+      ref: t,
+      class: "brick-element-list"
+    }, [
+      (s(!0), a(C, null, P(k(c), (u) => (s(), a("div", {
+        key: u.type,
+        class: "brick-element-list__item",
+        "data-element-type": u.type
+      }, [
+        f("span", ao, w(u.icon), 1),
+        f("span", co, w(u.label), 1)
+      ], 8, so))), 128))
+    ], 512));
+  }
+}), po = /* @__PURE__ */ S(uo, [["__scopeId", "data-v-d86ebba4"]]), fo = { class: "brick-field" }, mo = { class: "brick-field__label" }, yo = ["value"], go = ["value"], bo = ["value", "min", "max", "step"], vo = ["value"], ho = ["value"], _o = ["value"], ko = {
+  key: 5,
+  class: "brick-field__toggle"
+}, xo = ["checked"], So = {
+  key: 6,
+  class: "brick-field__margin"
+}, Co = ["placeholder", "value", "onInput"], wo = {
+  key: 7,
+  class: "brick-field__slider"
+}, Po = ["value", "min", "max", "step"], Eo = { class: "brick-field__slider-value" }, $o = /* @__PURE__ */ _({
+  __name: "PropertyField",
+  props: {
+    descriptor: {},
+    node: {}
+  },
+  setup(e) {
+    const t = e, n = Y(), i = $(() => {
+      const p = t.descriptor.key.split("."), r = p[0], l = p[1];
+      if (r === "props")
+        return t.node.props[l];
+      if (r === "style")
+        return t.node.style[l];
+    }), c = $(() => {
+      const p = i.value;
+      return t.descriptor.type === "textarea" && Array.isArray(p) ? p.join(`
+`) : p;
+    });
+    function o(p) {
+      const r = t.descriptor.key.split("."), l = r[0], y = r[1];
+      let b = p;
+      t.descriptor.type === "textarea" && Array.isArray(i.value) && (b = p.split(`
+`)), l === "props" ? n.updateProps(t.node.id, { [y]: b }) : l === "style" && n.updateStyle(t.node.id, { [y]: b });
+    }
+    function d(p, r) {
+      const y = [...c.value ?? [0, 0, 0, 0]];
+      y[p] = r, o(y);
+    }
+    function u(p) {
+      const l = p.target.files?.[0];
+      if (!l) return;
+      const y = new FileReader();
+      y.onload = () => {
+        o(y.result);
+      }, y.readAsDataURL(l);
+    }
+    return (p, r) => (s(), a("div", fo, [
+      f("label", mo, w(e.descriptor.label), 1),
+      e.descriptor.type === "text" ? (s(), a("input", {
+        key: 0,
+        type: "text",
+        class: "brick-field__input",
+        value: c.value,
+        onInput: r[0] || (r[0] = (l) => o(l.target.value))
+      }, null, 40, yo)) : e.descriptor.type === "textarea" ? (s(), a("textarea", {
+        key: 1,
+        class: "brick-field__textarea",
+        value: c.value,
+        rows: "3",
+        onInput: r[1] || (r[1] = (l) => o(l.target.value))
+      }, null, 40, go)) : e.descriptor.type === "number" ? (s(), a("input", {
+        key: 2,
+        type: "number",
+        class: "brick-field__input",
+        value: c.value,
+        min: e.descriptor.min,
+        max: e.descriptor.max,
+        step: e.descriptor.step,
+        onInput: r[2] || (r[2] = (l) => o(Number(l.target.value)))
+      }, null, 40, bo)) : e.descriptor.type === "color" ? (s(), a("input", {
+        key: 3,
+        type: "color",
+        class: "brick-field__color",
+        value: c.value ?? "#000000",
+        onInput: r[3] || (r[3] = (l) => o(l.target.value))
+      }, null, 40, vo)) : e.descriptor.type === "select" ? (s(), a("select", {
+        key: 4,
+        class: "brick-field__select",
+        value: c.value,
+        onChange: r[4] || (r[4] = (l) => o(l.target.value || void 0))
+      }, [
+        (s(!0), a(C, null, P(e.descriptor.options, (l) => (s(), a("option", {
+          key: String(l.value),
+          value: l.value
+        }, w(l.label), 9, _o))), 128))
+      ], 40, ho)) : e.descriptor.type === "toggle" ? (s(), a("label", ko, [
+        f("input", {
+          type: "checkbox",
+          checked: c.value,
+          onChange: r[5] || (r[5] = (l) => o(l.target.checked))
+        }, null, 40, xo),
+        f("span", null, w(c.value ? "On" : "Off"), 1)
+      ])) : e.descriptor.type === "margin" ? (s(), a("div", So, [
+        (s(), a(C, null, P(["L", "T", "R", "B"], (l, y) => f("input", {
+          key: l,
+          type: "number",
+          class: "brick-field__margin-input",
+          placeholder: l,
+          value: (c.value ?? [0, 0, 0, 0])[y],
+          onInput: (b) => d(y, Number(b.target.value))
+        }, null, 40, Co)), 64))
+      ])) : e.descriptor.type === "slider" ? (s(), a("div", wo, [
+        f("input", {
+          type: "range",
+          value: c.value,
+          min: e.descriptor.min,
+          max: e.descriptor.max,
+          step: e.descriptor.step,
+          onInput: r[6] || (r[6] = (l) => o(Number(l.target.value)))
+        }, null, 40, Po),
+        f("span", Eo, w(c.value), 1)
+      ])) : e.descriptor.type === "file" ? (s(), a("input", {
+        key: 8,
+        type: "file",
+        accept: "image/*",
+        class: "brick-field__file",
+        onChange: u
+      }, null, 32)) : I("", !0)
+    ]));
+  }
+}), Io = /* @__PURE__ */ S($o, [["__scopeId", "data-v-e5d6e8b6"]]), Ro = {
+  key: 0,
+  class: "brick-property-editor"
+}, Do = { class: "brick-property-editor__type" }, zo = {
+  key: 0,
+  class: "brick-property-editor__group"
+}, To = { class: "brick-property-editor__group-title" }, No = /* @__PURE__ */ _({
+  __name: "PropertyEditor",
+  setup(e) {
+    const t = U(), n = $(() => {
+      const d = t.selectedNode.value;
+      return d ? F(d.type) : null;
+    }), i = $(() => {
+      if (!n.value) return {};
+      const d = {};
+      for (const u of n.value.propertyFields)
+        d[u.section] || (d[u.section] = []), d[u.section].push(u);
+      return d;
+    }), c = {
+      content: "Content",
+      style: "Style",
+      layout: "Layout",
+      advanced: "Advanced"
+    }, o = ["content", "style", "layout", "advanced"];
+    return (d, u) => k(t).selectedNode.value && n.value ? (s(), a("div", Ro, [
+      f("div", Do, w(n.value.icon) + " " + w(n.value.label), 1),
+      (s(), a(C, null, P(o, (p) => (s(), a(C, { key: p }, [
+        i.value[p] ? (s(), a("div", zo, [
+          f("div", To, w(c[p]), 1),
+          (s(!0), a(C, null, P(i.value[p], (r) => (s(), B(Io, {
+            key: r.key,
+            descriptor: r,
+            node: k(t).selectedNode.value
+          }, null, 8, ["descriptor", "node"]))), 128))
+        ])) : I("", !0)
+      ], 64))), 64)),
+      (s(), B(Q(n.value.propertyEditorComponent), {
+        node: k(t).selectedNode.value
+      }, null, 8, ["node"]))
+    ])) : I("", !0);
+  }
+}), Lo = /* @__PURE__ */ S(No, [["__scopeId", "data-v-4d129dac"]]), Mo = { class: "brick-toolbar" }, Bo = { class: "brick-toolbar__section" }, Oo = {
+  key: 0,
+  class: "brick-toolbar__section"
+}, Vo = /* @__PURE__ */ _({
+  __name: "Toolbar",
+  setup(e) {
+    const t = U();
+    return (n, i) => (s(), a("div", Mo, [
+      f("div", Bo, [
+        i[0] || (i[0] = f("h3", { class: "brick-toolbar__title" }, "Elements", -1)),
+        O(po)
+      ]),
+      k(t).selectedNode.value ? (s(), a("div", Oo, [
+        i[1] || (i[1] = f("h3", { class: "brick-toolbar__title" }, "Properties", -1)),
+        O(Lo)
+      ])) : I("", !0)
+    ]));
+  }
+}), Ao = /* @__PURE__ */ S(Vo, [["__scopeId", "data-v-5bf5f6ab"]]), Ho = { class: "brick-actionbar" }, Fo = { class: "brick-actionbar__group" }, Uo = { class: "brick-actionbar__group" }, Wo = ["disabled"], Jo = ["disabled"], Yo = ["disabled"], qo = { class: "brick-actionbar__group" }, jo = /* @__PURE__ */ _({
+  __name: "ActionBar",
+  setup(e) {
+    const t = bt(), n = St(), i = U(), c = Y(), o = Z(), d = E("document"), u = E(null);
+    function p() {
+      const m = i.selectedId.value;
+      m && (i.deselect(), c.removeElement(m));
+    }
+    function r() {
+      const m = d.value.trim() || "document", g = m.endsWith(".pdf") ? m : m + ".pdf";
+      n.exportPdf(g);
+    }
+    function l() {
+      const m = o.exportDocument(), g = JSON.stringify(m, null, 2), v = new Blob([g], { type: "application/json" }), h = URL.createObjectURL(v), x = document.createElement("a"), D = d.value.trim() || "document";
+      x.href = h, x.download = D.endsWith(".json") ? D : D + ".json", x.click(), URL.revokeObjectURL(h);
+    }
+    function y() {
+      u.value?.click();
+    }
+    function b(m) {
+      const g = m.target, v = g.files?.[0];
+      if (!v) return;
+      const h = new FileReader();
+      h.onload = () => {
+        try {
+          const x = JSON.parse(h.result);
+          if (!x.content || !x.pageSize) {
+            alert("Invalid brick-pdf JSON file.");
+            return;
+          }
+          i.deselect(), o.loadDocument(x);
+        } catch {
+          alert("Failed to parse JSON file.");
+        }
+      }, h.readAsText(v), g.value = "";
+    }
+    return (m, g) => (s(), a("div", Ho, [
+      f("div", Fo, [
+        G(f("input", {
+          "onUpdate:modelValue": g[0] || (g[0] = (v) => d.value = v),
+          class: "brick-actionbar__name",
+          type: "text",
+          placeholder: "Document name",
+          title: "Document name (used for export filename)"
+        }, null, 512), [
+          [$e, d.value]
+        ])
+      ]),
+      f("div", Uo, [
+        f("button", {
+          class: "brick-actionbar__btn",
+          disabled: !k(t).canUndo.value,
+          title: "Undo",
+          onClick: g[1] || (g[1] = (v) => k(t).undo())
+        }, " Undo ", 8, Wo),
+        f("button", {
+          class: "brick-actionbar__btn",
+          disabled: !k(t).canRedo.value,
+          title: "Redo",
+          onClick: g[2] || (g[2] = (v) => k(t).redo())
+        }, " Redo ", 8, Jo),
+        f("button", {
+          class: "brick-actionbar__btn brick-actionbar__btn--danger",
+          disabled: !k(i).selectedId.value,
+          title: "Delete selected element",
+          onClick: p
+        }, " Delete ", 8, Yo)
+      ]),
+      f("div", qo, [
+        f("button", {
+          class: "brick-actionbar__btn",
+          title: "Import JSON",
+          onClick: y
+        }, " Import JSON "),
+        f("button", {
+          class: "brick-actionbar__btn",
+          title: "Export JSON",
+          onClick: l
+        }, " Export JSON "),
+        f("button", {
+          class: "brick-actionbar__btn brick-actionbar__btn--primary",
+          onClick: r
+        }, " Export PDF "),
+        f("button", {
+          class: "brick-actionbar__btn",
+          onClick: g[3] || (g[3] = (v) => k(n).openPdf())
+        }, " Preview ")
+      ]),
+      f("input", {
+        ref_key: "fileInput",
+        ref: u,
+        type: "file",
+        accept: ".json",
+        style: { display: "none" },
+        onChange: b
+      }, null, 544)
+    ]));
+  }
+}), Go = /* @__PURE__ */ S(jo, [["__scopeId", "data-v-be915a0f"]]), Xo = { class: "brick-pdf" }, Ko = { class: "brick-pdf__workspace" }, Qo = /* @__PURE__ */ _({
+  __name: "BrickPdf",
+  props: {
+    modelValue: {}
+  },
+  emits: ["update:modelValue"],
+  setup(e, { emit: t }) {
+    const n = e, i = t;
+    An();
+    const c = st(n.modelValue ?? ce());
+    at(c);
+    const o = ct(c);
+    dt(o);
+    const d = yt(c);
+    gt(d);
+    const u = pt(c, d);
+    ft(u);
+    const p = vt(c, u);
+    ht(p);
+    const r = kt(c);
+    xt(r);
+    const l = Pt(c, u);
+    Et(l);
+    const y = $t(u);
+    It(y);
+    const b = Re(), m = b.Delete, g = b.Backspace;
+    return re(m, () => {
+      if (!o.selectedId.value) return;
+      const v = document.activeElement;
+      if (v && (v.tagName === "INPUT" || v.tagName === "TEXTAREA" || v.tagName === "SELECT")) return;
+      const h = o.selectedId.value;
+      o.deselect(), u.removeElement(h);
+    }), re(g, () => {
+      if (!o.selectedId.value) return;
+      const v = document.activeElement;
+      if (v && (v.tagName === "INPUT" || v.tagName === "TEXTAREA" || v.tagName === "SELECT")) return;
+      const h = o.selectedId.value;
+      o.deselect(), u.removeElement(h);
+    }), Ie(
+      () => c.document,
+      () => {
+        i("update:modelValue", JSON.parse(JSON.stringify(H(c.document))));
+      },
+      { deep: !0 }
+    ), (v, h) => (s(), a("div", Xo, [
+      O(Go),
+      f("div", Ko, [
+        O(io),
+        O(Ao)
+      ])
+    ]));
+  }
+}), Zo = /* @__PURE__ */ S(Qo, [["__scopeId", "data-v-f9b95ad8"]]), ir = {
+  install(e) {
+    e.component("BrickPdf", Zo);
+  }
+};
+export {
+  Zo as BrickPdf,
+  ce as createDefaultDocument,
+  ir as default,
+  De as getAllElementDefinitions,
+  F as getElementDefinition,
+  z as registerElement,
+  or as unregisterElement,
+  rr as useClipboard,
+  Z as useDocumentStore,
+  be as useDragDrop,
+  Y as useElementActions,
+  bt as useHistory,
+  St as usePdfExport,
+  lr as useResize,
+  U as useSelection
+};