@veztraa/report-designer 0.4.1 → 0.4.2

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(){"use strict";try{if(typeof document<"u"){var t=document.createElement("style");t.appendChild(document.createTextNode('@import"https://cdn.jsdelivr.net/npm/@fontsource/inter/300.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/inter/400.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/inter/500.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/inter/600.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/inter/700.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/roboto/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/open-sans/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/lato/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/montserrat/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/poppins/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/nunito/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/raleway/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/ubuntu/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/playfair-display/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/merriweather/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/source-code-pro/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/great-vibes/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/dancing-script/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/pacifico/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/sacramento/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/noto-sans/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-sc/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-jp/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-kr/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-arabic/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-hebrew/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-devanagari/index.css";@import"https://cdn.jsdelivr.net/npm/@fontsource/noto-sans-thai/index.css";*,:before,:after{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-translate-x: 0;--tw-translate-y: 0;--tw-rotate: 0;--tw-skew-x: 0;--tw-skew-y: 0;--tw-scale-x: 1;--tw-scale-y: 1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness: proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-color: rgb(59 130 246 / .5);--tw-ring-offset-shadow: 0 0 #0000;--tw-ring-shadow: 0 0 #0000;--tw-shadow: 0 0 #0000;--tw-shadow-colored: 0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }*,:before,:after{box-sizing:border-box;border-width:0;border-style:solid;border-color:#e5e7eb}:before,:after{--tw-content: ""}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol,"Noto Color Emoji";font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}button,[role=button]{cursor:pointer}:disabled{cursor:default}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media(min-width:640px){.container{max-width:640px}}@media(min-width:768px){.container{max-width:768px}}@media(min-width:1024px){.container{max-width:1024px}}@media(min-width:1280px){.container{max-width:1280px}}@media(min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.collapse{visibility:collapse}.static{position:static}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{top:0;right:0;bottom:0;left:0}.z-10{z-index:10}.z-50{z-index:50}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}.ml-3{margin-left:.75rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.hidden{display:none}.h-full{height:100%}.min-h-0{min-height:0px}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize-none{resize:none}.resize{resize:both}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0\\.5{gap:.125rem}.gap-1\\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-0{border-width:0px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.border-amber-800\\/60{border-color:#92400e99}.border-amber-900\\/50{border-color:#78350f80}.border-gray-700{--tw-border-opacity: 1;border-color:rgb(55 65 81 / var(--tw-border-opacity, 1))}.border-gray-800{--tw-border-opacity: 1;border-color:rgb(31 41 55 / var(--tw-border-opacity, 1))}.bg-amber-900\\/60{background-color:#78350f99}.bg-amber-950\\/40{background-color:#451a0366}.bg-blue-600{--tw-bg-opacity: 1;background-color:rgb(37 99 235 / var(--tw-bg-opacity, 1))}.bg-blue-900{--tw-bg-opacity: 1;background-color:rgb(30 58 138 / var(--tw-bg-opacity, 1))}.bg-gray-800{--tw-bg-opacity: 1;background-color:rgb(31 41 55 / var(--tw-bg-opacity, 1))}.bg-gray-900{--tw-bg-opacity: 1;background-color:rgb(17 24 39 / var(--tw-bg-opacity, 1))}.bg-gray-950{--tw-bg-opacity: 1;background-color:rgb(3 7 18 / var(--tw-bg-opacity, 1))}.bg-green-900{--tw-bg-opacity: 1;background-color:rgb(20 83 45 / var(--tw-bg-opacity, 1))}.bg-orange-900{--tw-bg-opacity: 1;background-color:rgb(124 45 18 / var(--tw-bg-opacity, 1))}.bg-purple-900{--tw-bg-opacity: 1;background-color:rgb(88 28 135 / var(--tw-bg-opacity, 1))}.bg-yellow-900{--tw-bg-opacity: 1;background-color:rgb(113 63 18 / var(--tw-bg-opacity, 1))}.p-0\\.5{padding:.125rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.text-center{text-align:center}.font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.ordinal{--tw-ordinal: ordinal;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.tabular-nums{--tw-numeric-spacing: tabular-nums;font-variant-numeric:var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)}.leading-none{line-height:1}.tracking-wider{letter-spacing:.05em}.text-amber-200{--tw-text-opacity: 1;color:rgb(253 230 138 / var(--tw-text-opacity, 1))}.text-amber-400{--tw-text-opacity: 1;color:rgb(251 191 36 / var(--tw-text-opacity, 1))}.text-amber-500{--tw-text-opacity: 1;color:rgb(245 158 11 / var(--tw-text-opacity, 1))}.text-blue-300{--tw-text-opacity: 1;color:rgb(147 197 253 / var(--tw-text-opacity, 1))}.text-gray-100{--tw-text-opacity: 1;color:rgb(243 244 246 / var(--tw-text-opacity, 1))}.text-gray-400{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.text-gray-500{--tw-text-opacity: 1;color:rgb(107 114 128 / var(--tw-text-opacity, 1))}.text-gray-600{--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.text-green-300{--tw-text-opacity: 1;color:rgb(134 239 172 / var(--tw-text-opacity, 1))}.text-green-400{--tw-text-opacity: 1;color:rgb(74 222 128 / var(--tw-text-opacity, 1))}.text-orange-300{--tw-text-opacity: 1;color:rgb(253 186 116 / var(--tw-text-opacity, 1))}.text-purple-300{--tw-text-opacity: 1;color:rgb(216 180 254 / var(--tw-text-opacity, 1))}.text-red-400{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.text-white{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.text-yellow-300{--tw-text-opacity: 1;color:rgb(253 224 71 / var(--tw-text-opacity, 1))}.underline{text-decoration-line:underline}.line-through{text-decoration-line:line-through}.shadow-2xl{--tw-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);--tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000)}.blur{--tw-blur: blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}:root{--bg: #eeeef4;--panel: #ffffff;--card: #f4f4f9;--input: #eaeaf2;--hover: #e2e2ec;--active: #d8d8e8;--border: rgba(0,0,0,.1);--border-h: rgba(0,0,0,.18);--border-s: rgba(0,0,0,.28);--text-1: #111118;--text-2: #3c3c52;--text-3: #6c6c84;--accent: #6c63ff;--accent-h: #7b73ff;--accent-dim: rgba(108,99,255,.1);--accent-ring: rgba(108,99,255,.22);--danger: #dc2626;--success: #16a34a;--warn: #d97706}[data-theme=dark]{--bg: #0c0c10;--panel: #111115;--card: #17171c;--input: #1e1e25;--hover: #242430;--active: #2c2c3a;--border: rgba(255,255,255,.07);--border-h: rgba(255,255,255,.13);--border-s: rgba(255,255,255,.2);--text-1: #e4e4ef;--text-2: #8080a0;--text-3: #404055;--accent: #7c6af7;--accent-h: #9585f9;--accent-dim: rgba(124,106,247,.14);--accent-ring: rgba(124,106,247,.4);--danger: #f87171;--success: #4ade80;--warn: #fbbf24}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:var(--bg);color:var(--text-1);height:100vh;overflow:hidden;font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{height:100vh;display:flex;flex-direction:column}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border-h);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--border-s)}input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:1.5px solid var(--accent);outline-offset:1px}.resize-handle{position:absolute;width:8px;height:8px;background:var(--accent);border:1.5px solid rgba(255,255,255,.85);border-radius:2.5px;z-index:10;transition:transform .12s ease}.resize-handle:hover{transform:scale(1.4)}.canvas-grid{background-image:radial-gradient(circle,rgba(0,0,0,.09) 1px,transparent 1px);background-size:20px 20px}[data-theme=dark] .canvas-grid{background-image:radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1px)}.font-mono{font-family:JetBrains Mono,Fira Code,Cascadia Code,ui-monospace,monospace}.section-label{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;position:absolute;top:4px;left:8px;pointer-events:none;opacity:.75}.hover\\:bg-amber-700\\/70:hover{background-color:#b45309b3}.hover\\:bg-blue-700:hover{--tw-bg-opacity: 1;background-color:rgb(29 78 216 / var(--tw-bg-opacity, 1))}.hover\\:bg-gray-800\\/50:hover{background-color:#1f293780}.hover\\:text-gray-200:hover{--tw-text-opacity: 1;color:rgb(229 231 235 / var(--tw-text-opacity, 1))}.hover\\:text-red-400:hover{--tw-text-opacity: 1;color:rgb(248 113 113 / var(--tw-text-opacity, 1))}.hover\\:text-white:hover{--tw-text-opacity: 1;color:rgb(255 255 255 / var(--tw-text-opacity, 1))}.focus\\:border-blue-500:focus{--tw-border-opacity: 1;border-color:rgb(59 130 246 / var(--tw-border-opacity, 1))}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}')),document.head.appendChild(t)}}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})();
 import { jsxs as m, jsx as e, Fragment as X } from "react/jsx-runtime";
-import { useState as Z, useEffect as an, useRef as nn, useMemo as Ae, useCallback as lo, useLayoutEffect as uo } from "react";
+import { useState as Z, useEffect as an, useRef as $, useMemo as Ae, useCallback as lo, useLayoutEffect as uo } from "react";
 import { create as hi } from "zustand";
 import { SUPPORTED_FONTS as dr } from "@veztraa/report-core";
 import { createPortal as fr } from "react-dom";
@@ -1045,7 +1045,7 @@ function Ui(n, r = "") {
   return i;
 }
 function Lo({ previewDataJson: n, onSelect: r }) {
-  const [i, a] = Z(!1), [o, u] = Z(""), A = nn(null), f = Ae(() => {
+  const [i, a] = Z(!1), [o, u] = Z(""), A = $(null), f = Ae(() => {
     try {
       return Ui(JSON.parse(n));
     } catch {
@@ -1173,7 +1173,7 @@ function Br(n, r) {
   return n.replace(/dddd/g, o[t]).replace(/ddd/g, u[t]).replace(/MMMM/g, i[f]).replace(/MMM/g, a[f]).replace(/MM/g, c(f + 1)).replace(/M/g, String(f + 1)).replace(/YYYY/g, String(d)).replace(/YY/g, String(d).slice(-2)).replace(/Do/g, s(A)).replace(/DD/g, c(A)).replace(/D/g, String(A));
 }
 function Go({ value: n, onChange: r }) {
-  const [i, a] = Z(!1), [o, u] = Z(""), A = nn(null), f = Ae(() => /* @__PURE__ */ new Date(), []);
+  const [i, a] = Z(!1), [o, u] = Z(""), A = $(null), f = Ae(() => /* @__PURE__ */ new Date(), []);
   an(() => {
     if (!i) return;
     const c = (l) => {
@@ -1314,7 +1314,7 @@ function Wo(n) {
   );
 }
 function Ho({ value: n, onChange: r, error: i }) {
-  const a = nn(null), o = nn(null), u = nn(null), [A, f] = Z(!1), d = () => {
+  const a = $(null), o = $(null), u = $(null), [A, f] = Z(!1), d = () => {
     const p = a.current;
     p && (o.current && (o.current.scrollTop = p.scrollTop, o.current.scrollLeft = p.scrollLeft), u.current && (u.current.scrollTop = p.scrollTop));
   }, t = Ae(() => Wo(n), [n]), s = Ae(() => n.split(`
@@ -1566,7 +1566,7 @@ function Di({ field: n, depth: r = 0, onUpdate: i, onRemove: a }) {
   ] });
 }
 function qo() {
-  const { previewData: n, setPreviewData: r, setFieldTypes: i } = en(), [a, o] = Z([]), [u, A] = Z(n), [f, d] = Z(""), [t, s] = Z(!1), c = nn(null);
+  const { previewData: n, setPreviewData: r, setFieldTypes: i } = en(), [a, o] = Z([]), [u, A] = Z(n), [f, d] = Z(""), [t, s] = Z(!1), c = $(null);
   an(() => {
     if (n !== c.current) {
       c.current = n;
@@ -2031,13 +2031,13 @@ function _o({ margin: n, onUpdate: r }) {
   ] });
 }
 function $o() {
-  var M, T, D, z, H, q;
-  const { template: n, updatePage: r, updateMargin: i, updateHeaderHeight: a, updateFooterHeight: o, updateHeaderEnabled: u, updateFooterEnabled: A, updateHeaderDisplay: f, updateFooterDisplay: d } = en(), t = n.page ?? { size: "A4", orientation: "portrait", margin: { top: 20, right: 20, bottom: 20, left: 20 } }, s = t.margin ?? { top: 20, right: 20, bottom: 20, left: 20 }, c = ((M = n.header) == null ? void 0 : M.height) ?? 60, l = ((T = n.footer) == null ? void 0 : T.height) ?? 40, h = ((D = n.header) == null ? void 0 : D.enabled) !== !1, p = ((z = n.footer) == null ? void 0 : z.enabled) !== !1, g = ((H = n.header) == null ? void 0 : H.display) ?? "always", b = ((q = n.footer) == null ? void 0 : q.display) ?? "always", y = t.watermark ?? {}, w = y.enabled ?? !1, k = y.type ?? "text", B = (N) => r({ watermark: { ...y, ...N } }), I = (N) => {
+  var M, R, D, H, z, q;
+  const { template: n, updatePage: r, updateMargin: i, updateHeaderHeight: a, updateFooterHeight: o, updateHeaderEnabled: u, updateFooterEnabled: A, updateHeaderDisplay: f, updateFooterDisplay: d } = en(), t = n.page ?? { size: "A4", orientation: "portrait", margin: { top: 20, right: 20, bottom: 20, left: 20 } }, s = t.margin ?? { top: 20, right: 20, bottom: 20, left: 20 }, c = ((M = n.header) == null ? void 0 : M.height) ?? 60, l = ((R = n.footer) == null ? void 0 : R.height) ?? 40, h = ((D = n.header) == null ? void 0 : D.enabled) !== !1, p = ((H = n.footer) == null ? void 0 : H.enabled) !== !1, g = ((z = n.header) == null ? void 0 : z.display) ?? "always", b = ((q = n.footer) == null ? void 0 : q.display) ?? "always", y = t.watermark ?? {}, w = y.enabled ?? !1, k = y.type ?? "text", B = (N) => r({ watermark: { ...y, ...N } }), I = (N) => {
     var Y;
-    const L = (Y = N.target.files) == null ? void 0 : Y[0];
-    if (N.target.value = "", !L || !(L.type === "image/png" || /\.png$/i.test(L.name))) return;
-    const $ = new FileReader();
-    $.onload = () => B({ type: "logo", imageSrc: String($.result) }), $.readAsDataURL(L);
+    const G = (Y = N.target.files) == null ? void 0 : Y[0];
+    if (N.target.value = "", !G || !(G.type === "image/png" || /\.png$/i.test(G.name))) return;
+    const nn = new FileReader();
+    nn.onload = () => B({ type: "logo", imageSrc: String(nn.result) }), nn.readAsDataURL(G);
   }, v = t.size ?? "A4", E = t.orientation === "landscape", [P, C] = Xo[v] ?? [794, 1123], S = E ? C : P, x = E ? P : C, Q = t.customHeight ?? x;
   return /* @__PURE__ */ m("div", { className: "flex-1 overflow-y-auto", style: { paddingBottom: 24 }, children: [
     /* @__PURE__ */ e(ge, { children: "Page Format" }),
@@ -2092,11 +2092,11 @@ function $o() {
                 color: t.orientation === N ? "#fff" : "var(--text-2)",
                 transition: "color 0.18s"
               },
-              onMouseEnter: (L) => {
-                t.orientation !== N && (L.currentTarget.style.color = "var(--text-1)");
+              onMouseEnter: (G) => {
+                t.orientation !== N && (G.currentTarget.style.color = "var(--text-1)");
               },
-              onMouseLeave: (L) => {
-                t.orientation !== N && (L.currentTarget.style.color = "var(--text-2)");
+              onMouseLeave: (G) => {
+                t.orientation !== N && (G.currentTarget.style.color = "var(--text-2)");
               },
               children: N === "portrait" ? /* @__PURE__ */ m(X, { children: [
                 /* @__PURE__ */ m("svg", { width: "10", height: "13", viewBox: "0 0 10 13", fill: "currentColor", children: [
@@ -2280,11 +2280,11 @@ function $o() {
                   color: k === N ? "#fff" : "var(--text-2)",
                   transition: "color 0.18s"
                 },
-                onMouseEnter: (L) => {
-                  k !== N && (L.currentTarget.style.color = "var(--text-1)");
+                onMouseEnter: (G) => {
+                  k !== N && (G.currentTarget.style.color = "var(--text-1)");
                 },
-                onMouseLeave: (L) => {
-                  k !== N && (L.currentTarget.style.color = "var(--text-2)");
+                onMouseLeave: (G) => {
+                  k !== N && (G.currentTarget.style.color = "var(--text-2)");
                 },
                 children: N === "text" ? /* @__PURE__ */ m(X, { children: [
                   /* @__PURE__ */ m("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "currentColor", children: [
@@ -2640,7 +2640,7 @@ function es() {
   ] });
 }
 function ts({ section: n, elements: r, selectedId: i, onSelect: a, onToggleVisible: o, onToggleLock: u, onDelete: A, onReorder: f }) {
-  const d = nn(null), [t, s] = Z(null), c = (g) => {
+  const d = $(null), [t, s] = Z(null), c = (g) => {
     d.current = g;
   }, l = (g, b) => {
     g.preventDefault(), g.dataTransfer.dropEffect = "move";
@@ -2894,7 +2894,7 @@ function as() {
   return `${n.getFullYear()}${r(n.getMonth() + 1)}${r(n.getDate())}${r(n.getHours())}${r(n.getMinutes())}`;
 }
 function is({ config: n, elements: r } = {}) {
-  var M, T;
+  var M, R;
   const {
     template: i,
     undo: a,
@@ -2919,7 +2919,7 @@ function is({ config: n, elements: r } = {}) {
   } = en(), v = n ?? {}, E = (D) => v[D] !== !1, P = v.actions ?? [], C = E("duplicate") || E("delete"), S = {
     header: ((M = i.header) == null ? void 0 : M.enabled) !== !1,
     body: !0,
-    footer: ((T = i.footer) == null ? void 0 : T.enabled) !== !1
+    footer: ((R = i.footer) == null ? void 0 : R.enabled) !== !1
   };
   an(() => {
     S[c] || l("body");
@@ -2929,8 +2929,8 @@ function is({ config: n, elements: r } = {}) {
       v.onSave(b());
       return;
     }
-    const D = JSON.stringify(b(), null, 2), z = URL.createObjectURL(new Blob([D], { type: "application/json" }));
-    Object.assign(document.createElement("a"), { href: z, download: `${as()}.json` }).click(), URL.revokeObjectURL(z);
+    const D = JSON.stringify(b(), null, 2), H = URL.createObjectURL(new Blob([D], { type: "application/json" }));
+    Object.assign(document.createElement("a"), { href: H, download: `${as()}.json` }).click(), URL.revokeObjectURL(H);
   }, Q = () => {
     if (v.onLoad) {
       v.onLoad();
@@ -2938,16 +2938,16 @@ function is({ config: n, elements: r } = {}) {
     }
     const D = Object.assign(document.createElement("input"), { type: "file", accept: ".json" });
     D.onchange = async () => {
-      var H, q;
-      const z = (H = D.files) == null ? void 0 : H[0];
-      if (z)
+      var z, q;
+      const H = (z = D.files) == null ? void 0 : z[0];
+      if (H)
         try {
-          const N = JSON.parse(await z.text()), L = N && typeof N == "object" && "template" in N ? N.template : N;
-          if (!L || typeof L != "object" || !Array.isArray((q = L.body) == null ? void 0 : q.elements)) {
+          const N = JSON.parse(await H.text()), G = N && typeof N == "object" && "template" in N ? N.template : N;
+          if (!G || typeof G != "object" || !Array.isArray((q = G.body) == null ? void 0 : q.elements)) {
             alert("Invalid template: missing required structure (body.elements).");
             return;
           }
-          g(L), N && "data" in N && N.data && I(typeof N.data == "string" ? N.data : JSON.stringify(N.data, null, 2));
+          g(G), N && "data" in N && N.data && I(typeof N.data == "string" ? N.data : JSON.stringify(N.data, null, 2));
         } catch {
           alert("Invalid template JSON — could not parse file.");
         }
@@ -2960,7 +2960,7 @@ function is({ config: n, elements: r } = {}) {
       style: { height: 46, padding: "0 12px", background: "var(--panel)", borderBottom: "1px solid var(--border)", gap: 0 },
       children: [
         (() => {
-          const D = r != null && r.hidden ? Ct.filter((q) => q.id !== "components") : Ct, z = D.find((q) => q.id === h) ? h : D[0].id, H = D.findIndex((q) => q.id === z);
+          const D = r != null && r.hidden ? Ct.filter((q) => q.id !== "components") : Ct, H = D.find((q) => q.id === h) ? h : D[0].id, z = D.findIndex((q) => q.id === H);
           return /* @__PURE__ */ m("div", { style: { display: "flex", padding: 3, borderRadius: 9, background: "var(--card)", border: "1px solid var(--border)", position: "relative", gap: 0, width: 333, flexShrink: 0 }, children: [
             /* @__PURE__ */ e("div", { "aria-hidden": !0, style: {
               position: "absolute",
@@ -2971,7 +2971,7 @@ function is({ config: n, elements: r } = {}) {
               borderRadius: 6,
               background: "var(--accent)",
               pointerEvents: "none",
-              transform: `translateX(calc(${H} * 100%))`,
+              transform: `translateX(calc(${z} * 100%))`,
               transition: "transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1)"
             } }),
             D.map((q) => /* @__PURE__ */ m(
@@ -2991,18 +2991,18 @@ function is({ config: n, elements: r } = {}) {
                   border: "none",
                   cursor: "pointer",
                   fontSize: 10,
-                  fontWeight: z === q.id ? 600 : 500,
+                  fontWeight: H === q.id ? 600 : 500,
                   fontFamily: "inherit",
                   whiteSpace: "nowrap",
                   background: "transparent",
-                  color: z === q.id ? "#fff" : "var(--text-3)",
+                  color: H === q.id ? "#fff" : "var(--text-3)",
                   transition: "color 0.18s"
                 },
                 onMouseEnter: (N) => {
-                  z !== q.id && (N.currentTarget.style.color = "var(--text-1)");
+                  H !== q.id && (N.currentTarget.style.color = "var(--text-1)");
                 },
                 onMouseLeave: (N) => {
-                  z !== q.id && (N.currentTarget.style.color = "var(--text-3)");
+                  H !== q.id && (N.currentTarget.style.color = "var(--text-3)");
                 },
                 children: [
                   q.icon,
@@ -3029,7 +3029,7 @@ function is({ config: n, elements: r } = {}) {
         E("duplicate") && /* @__PURE__ */ e(Dn, { onClick: s, title: "Duplicate (Ctrl+D)", children: /* @__PURE__ */ e(fo, { size: 13 }) }),
         E("delete") && /* @__PURE__ */ e(Dn, { onClick: t, title: "Delete (Del)", danger: !0, children: /* @__PURE__ */ e(Et, { size: 13 }) }),
         E("sections") && (() => {
-          const D = ["header", "body", "footer"], z = D.indexOf(c);
+          const D = ["header", "body", "footer"], H = D.indexOf(c);
           return /* @__PURE__ */ m("div", { style: { display: "flex", padding: 3, borderRadius: 9, background: "var(--card)", border: "1px solid var(--border)", position: "relative", gap: 0, marginLeft: 6 }, children: [
             /* @__PURE__ */ e("div", { "aria-hidden": !0, style: {
               position: "absolute",
@@ -3040,19 +3040,19 @@ function is({ config: n, elements: r } = {}) {
               borderRadius: 6,
               background: "var(--accent)",
               pointerEvents: "none",
-              transform: `translateX(calc(${z} * 100%))`,
+              transform: `translateX(calc(${H} * 100%))`,
               transition: "transform 0.22s cubic-bezier(0.34, 1.4, 0.64, 1)"
             } }),
-            D.map((H) => {
-              const q = S[H];
+            D.map((z) => {
+              const q = S[z];
               return /* @__PURE__ */ e(
                 "button",
                 {
                   onClick: () => {
-                    q && l(H);
+                    q && l(z);
                   },
                   disabled: !q,
-                  title: q ? void 0 : `${H.charAt(0).toUpperCase() + H.slice(1)} is disabled — enable it in the Page panel`,
+                  title: q ? void 0 : `${z.charAt(0).toUpperCase() + z.slice(1)} is disabled — enable it in the Page panel`,
                   style: {
                     flex: 1,
                     position: "relative",
@@ -3062,24 +3062,24 @@ function is({ config: n, elements: r } = {}) {
                     border: "none",
                     cursor: q ? "pointer" : "not-allowed",
                     fontSize: 11,
-                    fontWeight: c === H ? 600 : 500,
+                    fontWeight: c === z ? 600 : 500,
                     fontFamily: "inherit",
                     textTransform: "capitalize",
                     background: "transparent",
                     whiteSpace: "nowrap",
                     opacity: q ? 1 : 0.4,
-                    color: c === H ? "#fff" : "var(--text-2)",
+                    color: c === z ? "#fff" : "var(--text-2)",
                     transition: "color 0.18s"
                   },
                   onMouseEnter: (N) => {
-                    q && c !== H && (N.currentTarget.style.color = "var(--text-1)");
+                    q && c !== z && (N.currentTarget.style.color = "var(--text-1)");
                   },
                   onMouseLeave: (N) => {
-                    q && c !== H && (N.currentTarget.style.color = "var(--text-2)");
+                    q && c !== z && (N.currentTarget.style.color = "var(--text-2)");
                   },
-                  children: H.charAt(0).toUpperCase() + H.slice(1)
+                  children: z.charAt(0).toUpperCase() + z.slice(1)
                 },
-                H
+                z
               );
             })
           ] });
@@ -3194,7 +3194,7 @@ function fe(n, r, i) {
     ];
 }
 function Cn({ onPick: n, filterType: r = "all", paths: i, wrapInExpr: a = !0, showBuiltIns: o = !1, groups: u }) {
-  const [A, f] = Z(!1), [d, t] = Z({ top: 0, left: 0 }), { previewData: s, fieldTypes: c } = en(), l = nn(null), h = lo(() => {
+  const [A, f] = Z(!1), [d, t] = Z({ top: 0, left: 0 }), { previewData: s, fieldTypes: c } = en(), l = $(null), h = lo(() => {
     if (!l.current) return;
     const B = l.current.getBoundingClientRect();
     t({ top: B.bottom + 4, left: B.right - 220 });
@@ -3354,7 +3354,7 @@ function Pn({ children: n }) {
     /* @__PURE__ */ e("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
-function G({ label: n, children: r, span2: i = !1 }) {
+function L({ label: n, children: r, span2: i = !1 }) {
   return /* @__PURE__ */ m("div", { style: { gridColumn: i ? "1 / -1" : void 0 }, children: [
     /* @__PURE__ */ e("label", { style: { display: "block", fontSize: 10, color: "var(--text-3)", marginBottom: 4, fontWeight: 500 }, children: n }),
     r
@@ -3580,19 +3580,19 @@ const As = {
 };
 function ds({ el: n }) {
   var S, x, Q, M;
-  const { updateElement: r, template: i } = en(), a = i.page ?? {}, o = a.orientation === "landscape", [u, A] = As[a.size ?? "A4"] ?? [794, 1123], f = o ? A : u, d = a.customHeight ?? (o ? u : A), t = a.margin ?? { top: 0, right: 0, bottom: 0, left: 0 }, s = t.left ?? 0, c = t.right ?? 0, l = t.top ?? 0, h = t.bottom ?? 0, p = Math.max(100, f - s - c), g = Math.max(200, d - l - h), b = ((S = i.header) == null ? void 0 : S.enabled) !== !1 ? ((x = i.header) == null ? void 0 : x.height) ?? 60 : 0, y = ((Q = i.footer) == null ? void 0 : Q.enabled) !== !1 ? ((M = i.footer) == null ? void 0 : M.height) ?? 40 : 0, w = Ln(i, n.id), k = (w == null ? void 0 : w.section) === "header", B = (w == null ? void 0 : w.section) === "footer", I = w == null ? void 0 : w.parent, v = I ? I.width : p, E = I ? I.height : k ? b : B ? y : Math.max(100, g - b - y), P = (T, D) => {
-    const z = Math.round(Number(D));
-    let H = z;
-    T === "x" && (H = Math.max(0, Math.min(z, v - 10))), T === "y" && (H = Math.max(0, Math.min(z, E - 5))), T === "width" && (H = Math.max(10, Math.min(z, v - n.x))), T === "height" && (H = Math.max(5, Math.min(z, E - n.y))), r(n.id, { [T]: H });
+  const { updateElement: r, template: i } = en(), a = i.page ?? {}, o = a.orientation === "landscape", [u, A] = As[a.size ?? "A4"] ?? [794, 1123], f = o ? A : u, d = a.customHeight ?? (o ? u : A), t = a.margin ?? { top: 0, right: 0, bottom: 0, left: 0 }, s = t.left ?? 0, c = t.right ?? 0, l = t.top ?? 0, h = t.bottom ?? 0, p = Math.max(100, f - s - c), g = Math.max(200, d - l - h), b = ((S = i.header) == null ? void 0 : S.enabled) !== !1 ? ((x = i.header) == null ? void 0 : x.height) ?? 60 : 0, y = ((Q = i.footer) == null ? void 0 : Q.enabled) !== !1 ? ((M = i.footer) == null ? void 0 : M.height) ?? 40 : 0, w = Ln(i, n.id), k = (w == null ? void 0 : w.section) === "header", B = (w == null ? void 0 : w.section) === "footer", I = w == null ? void 0 : w.parent, v = I ? I.width : p, E = I ? I.height : k ? b : B ? y : Math.max(100, g - b - y), P = (R, D) => {
+    const H = Math.round(Number(D));
+    let z = H;
+    R === "x" && (z = Math.max(0, Math.min(H, v - 10))), R === "y" && (z = Math.max(0, Math.min(H, E - 5))), R === "width" && (z = Math.max(10, Math.min(H, v - n.x))), R === "height" && (z = Math.max(5, Math.min(H, E - n.y))), r(n.id, { [R]: z });
   }, C = n.type === "table";
   return /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "Position & Size" }),
     /* @__PURE__ */ e("div", { style: { padding: "0 14px" }, children: /* @__PURE__ */ m(Xn, { children: [
-      /* @__PURE__ */ e(G, { label: "X", children: /* @__PURE__ */ e(_, { type: "number", value: n.x, onChange: (T) => P("x", T) }) }),
-      /* @__PURE__ */ e(G, { label: "Y", children: /* @__PURE__ */ e(_, { type: "number", value: n.y, onChange: (T) => P("y", T) }) }),
-      /* @__PURE__ */ e(G, { label: `Width  (max ${v - n.x})`, children: /* @__PURE__ */ e(_, { type: "number", value: n.width, onChange: (T) => P("width", T) }) }),
-      !C && /* @__PURE__ */ e(G, { label: `Height  (max ${E - n.y})`, children: /* @__PURE__ */ e(_, { type: "number", value: n.height, onChange: (T) => P("height", T) }) }),
-      C && /* @__PURE__ */ e(G, { label: "Height", children: /* @__PURE__ */ m("div", { style: {
+      /* @__PURE__ */ e(L, { label: "X", children: /* @__PURE__ */ e(_, { type: "number", value: n.x, onChange: (R) => P("x", R) }) }),
+      /* @__PURE__ */ e(L, { label: "Y", children: /* @__PURE__ */ e(_, { type: "number", value: n.y, onChange: (R) => P("y", R) }) }),
+      /* @__PURE__ */ e(L, { label: `Width  (max ${v - n.x})`, children: /* @__PURE__ */ e(_, { type: "number", value: n.width, onChange: (R) => P("width", R) }) }),
+      !C && /* @__PURE__ */ e(L, { label: `Height  (max ${E - n.y})`, children: /* @__PURE__ */ e(_, { type: "number", value: n.height, onChange: (R) => P("height", R) }) }),
+      C && /* @__PURE__ */ e(L, { label: "Height", children: /* @__PURE__ */ m("div", { style: {
         padding: "5px 9px",
         borderRadius: 7,
         fontSize: 12,
@@ -3643,7 +3643,7 @@ function hs(n) {
 }
 function gs({ el: n, onClose: r }) {
   if (n.type !== "richtext") return null;
-  const { updateElementDebounced: i } = en(), { itemPaths: a, globalPaths: o, scopeLabel: u } = de(n.id), A = nn(null), f = nn(null), d = nn(null), [t, s] = Z({
+  const { updateElementDebounced: i } = en(), { itemPaths: a, globalPaths: o, scopeLabel: u } = de(n.id), A = $(null), f = $(null), d = $(null), [t, s] = Z({
     b: !1,
     i: !1,
     u: !1,
@@ -4031,7 +4031,7 @@ function ps({ el: n }) {
       ] }),
       u && /* @__PURE__ */ e(gs, { el: n, onClose: () => A(!1) }),
       /* @__PURE__ */ m("div", { style: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8, marginTop: 4 }, children: [
-        /* @__PURE__ */ e(G, { label: "Lines to show", children: /* @__PURE__ */ e(
+        /* @__PURE__ */ e(L, { label: "Lines to show", children: /* @__PURE__ */ e(
           he,
           {
             value: n.maxLines && n.maxLines > 0 ? "fixed" : "all",
@@ -4042,7 +4042,7 @@ function ps({ el: n }) {
             ]
           }
         ) }),
-        n.maxLines && n.maxLines > 0 ? /* @__PURE__ */ e(G, { label: "Max lines", children: /* @__PURE__ */ e(
+        n.maxLines && n.maxLines > 0 ? /* @__PURE__ */ e(L, { label: "Max lines", children: /* @__PURE__ */ e(
           _,
           {
             type: "number",
@@ -4111,7 +4111,7 @@ function ys({ el: n }) {
   return /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "Table" }),
     /* @__PURE__ */ m("div", { style: { padding: "0 14px", display: "flex", flexDirection: "column", gap: 10 }, children: [
-      /* @__PURE__ */ e(G, { label: "Data Source", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ e(L, { label: "Data Source", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
         /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.dataSource, onChange: (I) => r(n.id, { dataSource: I }), placeholder: "items" }) }),
         /* @__PURE__ */ e(Cn, { paths: k, wrapInExpr: !1, onPick: (I) => r(n.id, { dataSource: I }) })
       ] }) }),
@@ -4140,7 +4140,7 @@ function ys({ el: n }) {
           ] })
         ] }),
         /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: n.columns.map((I, v) => {
-          var P, C, S, x, Q, M, T, D, z, H, q, N, L, j, $, Y;
+          var P, C, S, x, Q, M, R, D, H, z, q, N, G, j, nn, Y;
           const E = A.has(v);
           return /* @__PURE__ */ m("div", { style: {
             borderRadius: 8,
@@ -4214,46 +4214,46 @@ function ys({ el: n }) {
               }
             ),
             /* @__PURE__ */ e(ue, { open: E, children: /* @__PURE__ */ m("div", { style: { padding: "10px", borderTop: "1px solid var(--border)", display: "flex", flexDirection: "column", gap: 8, background: "var(--bg)" }, children: [
-              /* @__PURE__ */ e(G, { label: "Field Key", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+              /* @__PURE__ */ e(L, { label: "Field Key", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
                 /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(
                   _,
                   {
                     value: I.key,
                     placeholder: "{{field}} or literal text",
                     onChange: (F) => {
-                      const R = [...n.columns];
-                      R[v] = { ...R[v], key: F }, r(n.id, { columns: R });
+                      const T = [...n.columns];
+                      T[v] = { ...T[v], key: F }, r(n.id, { columns: T });
                     }
                   }
                 ) }),
                 /* @__PURE__ */ e(Cn, { paths: B, wrapInExpr: !0, onPick: (F) => {
-                  const R = [...n.columns];
-                  R[v] = { ...R[v], key: F }, r(n.id, { columns: R });
+                  const T = [...n.columns];
+                  T[v] = { ...T[v], key: F }, r(n.id, { columns: T });
                 } })
               ] }) }),
-              /* @__PURE__ */ e(G, { label: "Header Label", children: /* @__PURE__ */ e(
+              /* @__PURE__ */ e(L, { label: "Header Label", children: /* @__PURE__ */ e(
                 _,
                 {
                   value: I.label,
                   placeholder: "Column header text",
                   onChange: (F) => {
-                    const R = [...n.columns];
-                    R[v] = { ...R[v], label: F }, r(n.id, { columns: R });
+                    const T = [...n.columns];
+                    T[v] = { ...T[v], label: F }, r(n.id, { columns: T });
                   }
                 }
               ) }),
               /* @__PURE__ */ m(Xn, { children: [
-                /* @__PURE__ */ e(G, { label: "Width", children: /* @__PURE__ */ e(_, { type: "number", value: I.width, suffix: "px", onChange: (F) => {
-                  const R = [...n.columns];
-                  R[v] = { ...R[v], width: Math.max(20, Number(F)) }, r(n.id, { columns: R });
+                /* @__PURE__ */ e(L, { label: "Width", children: /* @__PURE__ */ e(_, { type: "number", value: I.width, suffix: "px", onChange: (F) => {
+                  const T = [...n.columns];
+                  T[v] = { ...T[v], width: Math.max(20, Number(F)) }, r(n.id, { columns: T });
                 } }) }),
-                /* @__PURE__ */ e(G, { label: "Alignment", children: /* @__PURE__ */ e(
+                /* @__PURE__ */ e(L, { label: "Alignment", children: /* @__PURE__ */ e(
                   ce,
                   {
                     value: I.align ?? "left",
                     onChange: (F) => {
-                      const R = [...n.columns];
-                      R[v] = { ...R[v], align: F }, r(n.id, { columns: R });
+                      const T = [...n.columns];
+                      T[v] = { ...T[v], align: F }, r(n.id, { columns: T });
                     },
                     options: [
                       { value: "left", icon: /* @__PURE__ */ e(Tn, { size: 12, strokeWidth: 2 }), title: "Left" },
@@ -4266,47 +4266,47 @@ function ys({ el: n }) {
               /* @__PURE__ */ m("div", { style: { paddingTop: 8, borderTop: "1px dashed var(--border)" }, children: [
                 /* @__PURE__ */ e("span", { style: { fontSize: 9, fontWeight: 700, color: "var(--text-3)", letterSpacing: "0.07em", textTransform: "uppercase", display: "block", marginBottom: 6 }, children: "Header Cell Style" }),
                 /* @__PURE__ */ m(Xn, { children: [
-                  /* @__PURE__ */ e(G, { label: "Background", children: /* @__PURE__ */ e(hn, { value: ((P = I.headerStyle) == null ? void 0 : P.backgroundColor) ?? l.backgroundColor ?? "", onChange: (F) => {
-                    const R = [...n.columns];
-                    R[v] = { ...R[v], headerStyle: { ...I.headerStyle, backgroundColor: F } }, i(n.id, { columns: R });
+                  /* @__PURE__ */ e(L, { label: "Background", children: /* @__PURE__ */ e(hn, { value: ((P = I.headerStyle) == null ? void 0 : P.backgroundColor) ?? l.backgroundColor ?? "", onChange: (F) => {
+                    const T = [...n.columns];
+                    T[v] = { ...T[v], headerStyle: { ...I.headerStyle, backgroundColor: F } }, i(n.id, { columns: T });
                   } }) }),
-                  /* @__PURE__ */ e(G, { label: "Text Color", children: /* @__PURE__ */ e(hn, { value: ((C = I.headerStyle) == null ? void 0 : C.color) ?? l.color ?? "", onChange: (F) => {
-                    const R = [...n.columns];
-                    R[v] = { ...R[v], headerStyle: { ...I.headerStyle, color: F } }, i(n.id, { columns: R });
+                  /* @__PURE__ */ e(L, { label: "Text Color", children: /* @__PURE__ */ e(hn, { value: ((C = I.headerStyle) == null ? void 0 : C.color) ?? l.color ?? "", onChange: (F) => {
+                    const T = [...n.columns];
+                    T[v] = { ...T[v], headerStyle: { ...I.headerStyle, color: F } }, i(n.id, { columns: T });
                   } }) }),
-                  /* @__PURE__ */ e(G, { label: "Font Size", children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(L, { label: "Font Size", children: /* @__PURE__ */ e(
                     _,
                     {
                       type: "number",
                       suffix: "px",
                       value: ((S = I.headerStyle) == null ? void 0 : S.fontSize) ?? l.fontSize ?? s.fontSize ?? 10,
                       onChange: (F) => {
-                        const R = [...n.columns];
-                        R[v] = { ...R[v], headerStyle: { ...I.headerStyle, fontSize: Number(F) } }, r(n.id, { columns: R });
+                        const T = [...n.columns];
+                        T[v] = { ...T[v], headerStyle: { ...I.headerStyle, fontSize: Number(F) } }, r(n.id, { columns: T });
                       }
                     }
                   ) }),
-                  /* @__PURE__ */ e(G, { label: "Padding", children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(L, { label: "Padding", children: /* @__PURE__ */ e(
                     _,
                     {
                       type: "number",
                       suffix: "px",
                       value: ((x = I.headerStyle) == null ? void 0 : x.padding) ?? l.padding ?? s.padding ?? 4,
                       onChange: (F) => {
-                        const R = [...n.columns];
-                        R[v] = { ...R[v], headerStyle: { ...I.headerStyle, padding: Number(F) } }, r(n.id, { columns: R });
+                        const T = [...n.columns];
+                        T[v] = { ...T[v], headerStyle: { ...I.headerStyle, padding: Number(F) } }, r(n.id, { columns: T });
                       }
                     }
                   ) }),
-                  /* @__PURE__ */ e(G, { label: "Letter Spacing", children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(L, { label: "Letter Spacing", children: /* @__PURE__ */ e(
                     _,
                     {
                       type: "number",
                       suffix: "px",
                       value: ((Q = I.headerStyle) == null ? void 0 : Q.letterSpacing) ?? l.letterSpacing ?? s.letterSpacing ?? 0,
                       onChange: (F) => {
-                        const R = [...n.columns];
-                        R[v] = { ...R[v], headerStyle: { ...I.headerStyle, letterSpacing: Number(F) } }, r(n.id, { columns: R });
+                        const T = [...n.columns];
+                        T[v] = { ...T[v], headerStyle: { ...I.headerStyle, letterSpacing: Number(F) } }, r(n.id, { columns: T });
                       }
                     }
                   ) })
@@ -4321,8 +4321,8 @@ function ys({ el: n }) {
                         title: "Bold",
                         onClick: () => {
                           var U;
-                          const F = (((U = I.headerStyle) == null ? void 0 : U.fontWeight) ?? l.fontWeight) === "bold" ? "normal" : "bold", R = [...n.columns];
-                          R[v] = { ...R[v], headerStyle: { ...I.headerStyle, fontWeight: F } }, r(n.id, { columns: R });
+                          const F = (((U = I.headerStyle) == null ? void 0 : U.fontWeight) ?? l.fontWeight) === "bold" ? "normal" : "bold", T = [...n.columns];
+                          T[v] = { ...T[v], headerStyle: { ...I.headerStyle, fontWeight: F } }, r(n.id, { columns: T });
                         },
                         children: /* @__PURE__ */ e(xe, { size: 12, strokeWidth: 2.5 })
                       }
@@ -4330,12 +4330,12 @@ function ys({ el: n }) {
                     /* @__PURE__ */ e(
                       Sn,
                       {
-                        active: (((T = I.headerStyle) == null ? void 0 : T.fontStyle) ?? l.fontStyle) === "italic",
+                        active: (((R = I.headerStyle) == null ? void 0 : R.fontStyle) ?? l.fontStyle) === "italic",
                         title: "Italic",
                         onClick: () => {
                           var U;
-                          const F = (((U = I.headerStyle) == null ? void 0 : U.fontStyle) ?? l.fontStyle) === "italic" ? "normal" : "italic", R = [...n.columns];
-                          R[v] = { ...R[v], headerStyle: { ...I.headerStyle, fontStyle: F } }, r(n.id, { columns: R });
+                          const F = (((U = I.headerStyle) == null ? void 0 : U.fontStyle) ?? l.fontStyle) === "italic" ? "normal" : "italic", T = [...n.columns];
+                          T[v] = { ...T[v], headerStyle: { ...I.headerStyle, fontStyle: F } }, r(n.id, { columns: T });
                         },
                         children: /* @__PURE__ */ e(Be, { size: 12, strokeWidth: 2.5 })
                       }
@@ -4349,8 +4349,8 @@ function ys({ el: n }) {
                     {
                       value: ((D = I.headerStyle) == null ? void 0 : D.textAlign) ?? l.textAlign ?? "left",
                       onChange: (F) => {
-                        const R = [...n.columns];
-                        R[v] = { ...R[v], headerStyle: { ...I.headerStyle, textAlign: F } }, r(n.id, { columns: R });
+                        const T = [...n.columns];
+                        T[v] = { ...T[v], headerStyle: { ...I.headerStyle, textAlign: F } }, r(n.id, { columns: T });
                       },
                       options: [
                         { value: "left", icon: /* @__PURE__ */ e(Tn, { size: 12, strokeWidth: 2 }), title: "Left" },
@@ -4364,47 +4364,47 @@ function ys({ el: n }) {
               /* @__PURE__ */ m("div", { style: { paddingTop: 8, borderTop: "1px dashed var(--border)" }, children: [
                 /* @__PURE__ */ e("span", { style: { fontSize: 9, fontWeight: 700, color: "var(--text-3)", letterSpacing: "0.07em", textTransform: "uppercase", display: "block", marginBottom: 6 }, children: "Data Cell Style" }),
                 /* @__PURE__ */ m(Xn, { children: [
-                  /* @__PURE__ */ e(G, { label: "Text Color", children: /* @__PURE__ */ e(hn, { value: ((z = I.style) == null ? void 0 : z.color) ?? s.color ?? "", onChange: (F) => {
-                    const R = [...n.columns];
-                    R[v] = { ...R[v], style: { ...I.style, color: F } }, i(n.id, { columns: R });
+                  /* @__PURE__ */ e(L, { label: "Text Color", children: /* @__PURE__ */ e(hn, { value: ((H = I.style) == null ? void 0 : H.color) ?? s.color ?? "", onChange: (F) => {
+                    const T = [...n.columns];
+                    T[v] = { ...T[v], style: { ...I.style, color: F } }, i(n.id, { columns: T });
                   } }) }),
-                  /* @__PURE__ */ e(G, { label: "Background", children: /* @__PURE__ */ e(hn, { value: ((H = I.style) == null ? void 0 : H.backgroundColor) ?? s.backgroundColor ?? "", onChange: (F) => {
-                    const R = [...n.columns];
-                    R[v] = { ...R[v], style: { ...I.style, backgroundColor: F } }, i(n.id, { columns: R });
+                  /* @__PURE__ */ e(L, { label: "Background", children: /* @__PURE__ */ e(hn, { value: ((z = I.style) == null ? void 0 : z.backgroundColor) ?? s.backgroundColor ?? "", onChange: (F) => {
+                    const T = [...n.columns];
+                    T[v] = { ...T[v], style: { ...I.style, backgroundColor: F } }, i(n.id, { columns: T });
                   } }) }),
-                  /* @__PURE__ */ e(G, { label: "Font Size", children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(L, { label: "Font Size", children: /* @__PURE__ */ e(
                     _,
                     {
                       type: "number",
                       suffix: "px",
                       value: ((q = I.style) == null ? void 0 : q.fontSize) ?? s.fontSize ?? 10,
                       onChange: (F) => {
-                        const R = [...n.columns];
-                        R[v] = { ...R[v], style: { ...I.style, fontSize: Number(F) } }, r(n.id, { columns: R });
+                        const T = [...n.columns];
+                        T[v] = { ...T[v], style: { ...I.style, fontSize: Number(F) } }, r(n.id, { columns: T });
                       }
                     }
                   ) }),
-                  /* @__PURE__ */ e(G, { label: "Padding", children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(L, { label: "Padding", children: /* @__PURE__ */ e(
                     _,
                     {
                       type: "number",
                       suffix: "px",
                       value: ((N = I.style) == null ? void 0 : N.padding) ?? s.padding ?? 4,
                       onChange: (F) => {
-                        const R = [...n.columns];
-                        R[v] = { ...R[v], style: { ...I.style, padding: Number(F) } }, r(n.id, { columns: R });
+                        const T = [...n.columns];
+                        T[v] = { ...T[v], style: { ...I.style, padding: Number(F) } }, r(n.id, { columns: T });
                       }
                     }
                   ) }),
-                  /* @__PURE__ */ e(G, { label: "Letter Spacing", children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(L, { label: "Letter Spacing", children: /* @__PURE__ */ e(
                     _,
                     {
                       type: "number",
                       suffix: "px",
-                      value: ((L = I.style) == null ? void 0 : L.letterSpacing) ?? s.letterSpacing ?? 0,
+                      value: ((G = I.style) == null ? void 0 : G.letterSpacing) ?? s.letterSpacing ?? 0,
                       onChange: (F) => {
-                        const R = [...n.columns];
-                        R[v] = { ...R[v], style: { ...I.style, letterSpacing: Number(F) } }, r(n.id, { columns: R });
+                        const T = [...n.columns];
+                        T[v] = { ...T[v], style: { ...I.style, letterSpacing: Number(F) } }, r(n.id, { columns: T });
                       }
                     }
                   ) })
@@ -4419,8 +4419,8 @@ function ys({ el: n }) {
                         title: "Bold",
                         onClick: () => {
                           var U;
-                          const F = ((U = I.style) == null ? void 0 : U.fontWeight) === "bold" ? "normal" : "bold", R = [...n.columns];
-                          R[v] = { ...R[v], style: { ...I.style, fontWeight: F } }, r(n.id, { columns: R });
+                          const F = ((U = I.style) == null ? void 0 : U.fontWeight) === "bold" ? "normal" : "bold", T = [...n.columns];
+                          T[v] = { ...T[v], style: { ...I.style, fontWeight: F } }, r(n.id, { columns: T });
                         },
                         children: /* @__PURE__ */ e(xe, { size: 12, strokeWidth: 2.5 })
                       }
@@ -4428,12 +4428,12 @@ function ys({ el: n }) {
                     /* @__PURE__ */ e(
                       Sn,
                       {
-                        active: (($ = I.style) == null ? void 0 : $.fontStyle) === "italic",
+                        active: ((nn = I.style) == null ? void 0 : nn.fontStyle) === "italic",
                         title: "Italic",
                         onClick: () => {
                           var U;
-                          const F = ((U = I.style) == null ? void 0 : U.fontStyle) === "italic" ? "normal" : "italic", R = [...n.columns];
-                          R[v] = { ...R[v], style: { ...I.style, fontStyle: F } }, r(n.id, { columns: R });
+                          const F = ((U = I.style) == null ? void 0 : U.fontStyle) === "italic" ? "normal" : "italic", T = [...n.columns];
+                          T[v] = { ...T[v], style: { ...I.style, fontStyle: F } }, r(n.id, { columns: T });
                         },
                         children: /* @__PURE__ */ e(Be, { size: 12, strokeWidth: 2.5 })
                       }
@@ -4447,8 +4447,8 @@ function ys({ el: n }) {
                     {
                       value: ((Y = I.style) == null ? void 0 : Y.textAlign) ?? I.align ?? "left",
                       onChange: (F) => {
-                        const R = [...n.columns];
-                        R[v] = { ...R[v], style: { ...I.style, textAlign: F } }, r(n.id, { columns: R });
+                        const T = [...n.columns];
+                        T[v] = { ...T[v], style: { ...I.style, textAlign: F } }, r(n.id, { columns: T });
                       },
                       options: [
                         { value: "left", icon: /* @__PURE__ */ e(Tn, { size: 12, strokeWidth: 2 }), title: "Left" },
@@ -4494,7 +4494,7 @@ function ys({ el: n }) {
                   /* @__PURE__ */ e("code", { style: { fontFamily: "monospace", color: "var(--accent)" }, children: "{{value}}" }),
                   " for the cell value."
                 ] }),
-                /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: (I.conditionalStyles ?? []).map((F, R) => /* @__PURE__ */ m("div", { style: { borderRadius: 7, border: "1px solid var(--border)", padding: "8px", background: "var(--card)", display: "flex", flexDirection: "column", gap: 6 }, children: [
+                /* @__PURE__ */ e("div", { style: { display: "flex", flexDirection: "column", gap: 6 }, children: (I.conditionalStyles ?? []).map((F, T) => /* @__PURE__ */ m("div", { style: { borderRadius: 7, border: "1px solid var(--border)", padding: "8px", background: "var(--card)", display: "flex", flexDirection: "column", gap: 6 }, children: [
                   /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
                     /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-3)", fontWeight: 600, flexShrink: 0 }, children: "if" }),
                     /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(
@@ -4504,7 +4504,7 @@ function ys({ el: n }) {
                         placeholder: "{{value}} > 100",
                         onChange: (U) => {
                           const O = [...n.columns], W = [...I.conditionalStyles ?? []];
-                          W[R] = { ...W[R], condition: U }, O[v] = { ...O[v], conditionalStyles: W }, r(n.id, { columns: O });
+                          W[T] = { ...W[T], condition: U }, O[v] = { ...O[v], conditionalStyles: W }, r(n.id, { columns: O });
                         }
                       }
                     ) }),
@@ -4513,7 +4513,7 @@ function ys({ el: n }) {
                       {
                         onClick: () => {
                           const U = [...n.columns];
-                          U[v] = { ...U[v], conditionalStyles: (I.conditionalStyles ?? []).filter((O, W) => W !== R) }, r(n.id, { columns: U });
+                          U[v] = { ...U[v], conditionalStyles: (I.conditionalStyles ?? []).filter((O, W) => W !== T) }, r(n.id, { columns: U });
                         },
                         style: {
                           width: 22,
@@ -4533,15 +4533,15 @@ function ys({ el: n }) {
                     )
                   ] }),
                   /* @__PURE__ */ m(Xn, { children: [
-                    /* @__PURE__ */ e(G, { label: "Text Color", children: /* @__PURE__ */ e(hn, { value: F.style.color ?? "", onChange: (U) => {
+                    /* @__PURE__ */ e(L, { label: "Text Color", children: /* @__PURE__ */ e(hn, { value: F.style.color ?? "", onChange: (U) => {
                       const O = [...n.columns], W = [...I.conditionalStyles ?? []];
-                      W[R] = { ...W[R], style: { ...W[R].style, color: U } }, O[v] = { ...O[v], conditionalStyles: W }, i(n.id, { columns: O });
+                      W[T] = { ...W[T], style: { ...W[T].style, color: U } }, O[v] = { ...O[v], conditionalStyles: W }, i(n.id, { columns: O });
                     } }) }),
-                    /* @__PURE__ */ e(G, { label: "Background", children: /* @__PURE__ */ e(hn, { value: F.style.backgroundColor ?? "", onChange: (U) => {
+                    /* @__PURE__ */ e(L, { label: "Background", children: /* @__PURE__ */ e(hn, { value: F.style.backgroundColor ?? "", onChange: (U) => {
                       const O = [...n.columns], W = [...I.conditionalStyles ?? []];
-                      W[R] = { ...W[R], style: { ...W[R].style, backgroundColor: U } }, O[v] = { ...O[v], conditionalStyles: W }, i(n.id, { columns: O });
+                      W[T] = { ...W[T], style: { ...W[T].style, backgroundColor: U } }, O[v] = { ...O[v], conditionalStyles: W }, i(n.id, { columns: O });
                     } }) }),
-                    /* @__PURE__ */ e(G, { label: "Font Size", children: /* @__PURE__ */ e(
+                    /* @__PURE__ */ e(L, { label: "Font Size", children: /* @__PURE__ */ e(
                       _,
                       {
                         type: "number",
@@ -4549,11 +4549,11 @@ function ys({ el: n }) {
                         value: F.style.fontSize ?? "",
                         onChange: (U) => {
                           const O = [...n.columns], W = [...I.conditionalStyles ?? []];
-                          W[R] = { ...W[R], style: { ...W[R].style, fontSize: Number(U) || void 0 } }, O[v] = { ...O[v], conditionalStyles: W }, r(n.id, { columns: O });
+                          W[T] = { ...W[T], style: { ...W[T].style, fontSize: Number(U) || void 0 } }, O[v] = { ...O[v], conditionalStyles: W }, r(n.id, { columns: O });
                         }
                       }
                     ) }),
-                    /* @__PURE__ */ e(G, { label: "Letter Spacing", children: /* @__PURE__ */ e(
+                    /* @__PURE__ */ e(L, { label: "Letter Spacing", children: /* @__PURE__ */ e(
                       _,
                       {
                         type: "number",
@@ -4561,7 +4561,7 @@ function ys({ el: n }) {
                         value: F.style.letterSpacing ?? "",
                         onChange: (U) => {
                           const O = [...n.columns], W = [...I.conditionalStyles ?? []];
-                          W[R] = { ...W[R], style: { ...W[R].style, letterSpacing: Number(U) || void 0 } }, O[v] = { ...O[v], conditionalStyles: W }, r(n.id, { columns: O });
+                          W[T] = { ...W[T], style: { ...W[T].style, letterSpacing: Number(U) || void 0 } }, O[v] = { ...O[v], conditionalStyles: W }, r(n.id, { columns: O });
                         }
                       }
                     ) })
@@ -4576,7 +4576,7 @@ function ys({ el: n }) {
                           title: "Bold",
                           onClick: () => {
                             const U = [...n.columns], O = [...I.conditionalStyles ?? []];
-                            O[R] = { ...O[R], style: { ...O[R].style, fontWeight: F.style.fontWeight === "bold" ? "normal" : "bold" } }, U[v] = { ...U[v], conditionalStyles: O }, r(n.id, { columns: U });
+                            O[T] = { ...O[T], style: { ...O[T].style, fontWeight: F.style.fontWeight === "bold" ? "normal" : "bold" } }, U[v] = { ...U[v], conditionalStyles: O }, r(n.id, { columns: U });
                           },
                           children: /* @__PURE__ */ e(xe, { size: 12, strokeWidth: 2.5 })
                         }
@@ -4588,22 +4588,22 @@ function ys({ el: n }) {
                           title: "Italic",
                           onClick: () => {
                             const U = [...n.columns], O = [...I.conditionalStyles ?? []];
-                            O[R] = { ...O[R], style: { ...O[R].style, fontStyle: F.style.fontStyle === "italic" ? "normal" : "italic" } }, U[v] = { ...U[v], conditionalStyles: O }, r(n.id, { columns: U });
+                            O[T] = { ...O[T], style: { ...O[T].style, fontStyle: F.style.fontStyle === "italic" ? "normal" : "italic" } }, U[v] = { ...U[v], conditionalStyles: O }, r(n.id, { columns: U });
                           },
                           children: /* @__PURE__ */ e(Be, { size: 12, strokeWidth: 2.5 })
                         }
                       )
                     ] })
                   ] })
-                ] }, R)) })
+                ] }, T)) })
               ] })
             ] }) })
           ] }, v);
         }) })
       ] }),
       /* @__PURE__ */ e(ms, { title: "Row Colors", open: d, onToggle: () => t((I) => !I), children: /* @__PURE__ */ m(Xn, { children: [
-        /* @__PURE__ */ e(G, { label: "Odd rows", children: /* @__PURE__ */ e(hn, { value: s.backgroundColor ?? "", onChange: (I) => y("backgroundColor", I) }) }),
-        /* @__PURE__ */ e(G, { label: "Even rows", children: /* @__PURE__ */ e(hn, { value: c.backgroundColor ?? "", onChange: (I) => w("backgroundColor", I) }) })
+        /* @__PURE__ */ e(L, { label: "Odd rows", children: /* @__PURE__ */ e(hn, { value: s.backgroundColor ?? "", onChange: (I) => y("backgroundColor", I) }) }),
+        /* @__PURE__ */ e(L, { label: "Even rows", children: /* @__PURE__ */ e(hn, { value: c.backgroundColor ?? "", onChange: (I) => w("backgroundColor", I) }) })
       ] }) })
     ] })
   ] });
@@ -4641,7 +4641,7 @@ function bs({ el: n }) {
   return /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "Chart" }),
     /* @__PURE__ */ m("div", { style: { padding: "0 14px", display: "flex", flexDirection: "column", gap: 8 }, children: [
-      /* @__PURE__ */ e(G, { label: "Chart Type", children: (() => {
+      /* @__PURE__ */ e(L, { label: "Chart Type", children: (() => {
         const c = ["bar", "line", "pie"], l = c.indexOf(n.chartType);
         return /* @__PURE__ */ m("div", { style: { display: "flex", padding: 3, borderRadius: 9, background: "var(--card)", border: "1px solid var(--border)", position: "relative", gap: 0 }, children: [
           /* @__PURE__ */ e("div", { "aria-hidden": !0, style: {
@@ -4689,11 +4689,11 @@ function bs({ el: n }) {
           ))
         ] });
       })() }),
-      /* @__PURE__ */ e(G, { label: "Data Source", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ e(L, { label: "Data Source", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
         /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.dataSource, onChange: (c) => r(n.id, { dataSource: c }), placeholder: "chartData" }) }),
         /* @__PURE__ */ e(Cn, { paths: u, wrapInExpr: !1, onPick: (c) => r(n.id, { dataSource: c }) })
       ] }) }),
-      n.chartType !== "pie" && /* @__PURE__ */ e(G, { label: "X Axis Key", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+      n.chartType !== "pie" && /* @__PURE__ */ e(L, { label: "X Axis Key", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
         /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.xAxisKey ?? "", onChange: (c) => r(n.id, { xAxisKey: c }), placeholder: "label" }) }),
         /* @__PURE__ */ e(Cn, { paths: A, wrapInExpr: !1, onPick: (c) => r(n.id, { xAxisKey: c }) })
       ] }) }),
@@ -4742,12 +4742,12 @@ function bs({ el: n }) {
               }
             )
           ] }),
-          /* @__PURE__ */ e(G, { label: "Color", children: /* @__PURE__ */ e(hn, { value: c.color ?? "#6c63ff", onChange: (h) => d(l, { color: h || "#6c63ff" }) }) }),
-          /* @__PURE__ */ e(G, { label: "Data Key", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+          /* @__PURE__ */ e(L, { label: "Color", children: /* @__PURE__ */ e(hn, { value: c.color ?? "#6c63ff", onChange: (h) => d(l, { color: h || "#6c63ff" }) }) }),
+          /* @__PURE__ */ e(L, { label: "Data Key", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
             /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: c.dataKey, onChange: (h) => f(l, { dataKey: h }), placeholder: "value" }) }),
             /* @__PURE__ */ e(Cn, { paths: A, wrapInExpr: !1, onPick: (h) => f(l, { dataKey: h }) })
           ] }) }),
-          /* @__PURE__ */ e(G, { label: "Label", children: /* @__PURE__ */ e(_, { value: c.label, onChange: (h) => f(l, { label: h }), placeholder: "Series name" }) })
+          /* @__PURE__ */ e(L, { label: "Label", children: /* @__PURE__ */ e(_, { value: c.label, onChange: (h) => f(l, { label: h }), placeholder: "Series name" }) })
         ] }, l))
       ] }),
       /* @__PURE__ */ m("div", { style: {
@@ -4805,7 +4805,7 @@ function vs({ el: n }) {
   return /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "Image" }),
     /* @__PURE__ */ m("div", { style: { padding: "0 14px", display: "flex", flexDirection: "column", gap: 8 }, children: [
-      /* @__PURE__ */ e(G, { label: "Source URL", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ e(L, { label: "Source URL", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
         /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.src, onChange: (f) => r(n.id, { src: f }), placeholder: "https://… or {{imageUrl}}" }) }),
         /* @__PURE__ */ e(
           Cn,
@@ -4835,7 +4835,7 @@ function vs({ el: n }) {
           children: "↑ Upload image file"
         }
       ),
-      /* @__PURE__ */ e(G, { label: "Object Fit", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(L, { label: "Object Fit", children: /* @__PURE__ */ e(
         he,
         {
           value: n.objectFit ?? "contain",
@@ -4843,9 +4843,9 @@ function vs({ el: n }) {
           options: [{ value: "contain", label: "Contain" }, { value: "cover", label: "Cover" }, { value: "fill", label: "Fill" }]
         }
       ) }),
-      /* @__PURE__ */ e(G, { label: "Horizontal", children: /* @__PURE__ */ e(Wn, { children: ["left", "center", "right"].map((f) => /* @__PURE__ */ e(Sn, { active: (n.horizontalAlign ?? "center") === f, onClick: () => r(n.id, { horizontalAlign: f }), title: f.charAt(0).toUpperCase() + f.slice(1), children: f === "left" ? /* @__PURE__ */ e(Tn, { size: 13 }) : f === "center" ? /* @__PURE__ */ e(Gn, { size: 13 }) : /* @__PURE__ */ e(jn, { size: 13 }) }, f)) }) }),
-      /* @__PURE__ */ e(G, { label: "Vertical", children: /* @__PURE__ */ e(Wn, { children: ["top", "middle", "bottom"].map((f) => /* @__PURE__ */ e(Sn, { active: (n.verticalAlign ?? "middle") === f, onClick: () => r(n.id, { verticalAlign: f }), title: f.charAt(0).toUpperCase() + f.slice(1), children: f === "top" ? /* @__PURE__ */ e(St, { size: 13 }) : f === "middle" ? /* @__PURE__ */ e(kt, { size: 13 }) : /* @__PURE__ */ e(Qt, { size: 13 }) }, f)) }) }),
-      /* @__PURE__ */ e(G, { label: "Background", children: /* @__PURE__ */ e(hn, { value: n.backgroundColor ?? "", onChange: (f) => i(n.id, { backgroundColor: f || void 0 }) }) })
+      /* @__PURE__ */ e(L, { label: "Horizontal", children: /* @__PURE__ */ e(Wn, { children: ["left", "center", "right"].map((f) => /* @__PURE__ */ e(Sn, { active: (n.horizontalAlign ?? "center") === f, onClick: () => r(n.id, { horizontalAlign: f }), title: f.charAt(0).toUpperCase() + f.slice(1), children: f === "left" ? /* @__PURE__ */ e(Tn, { size: 13 }) : f === "center" ? /* @__PURE__ */ e(Gn, { size: 13 }) : /* @__PURE__ */ e(jn, { size: 13 }) }, f)) }) }),
+      /* @__PURE__ */ e(L, { label: "Vertical", children: /* @__PURE__ */ e(Wn, { children: ["top", "middle", "bottom"].map((f) => /* @__PURE__ */ e(Sn, { active: (n.verticalAlign ?? "middle") === f, onClick: () => r(n.id, { verticalAlign: f }), title: f.charAt(0).toUpperCase() + f.slice(1), children: f === "top" ? /* @__PURE__ */ e(St, { size: 13 }) : f === "middle" ? /* @__PURE__ */ e(kt, { size: 13 }) : /* @__PURE__ */ e(Qt, { size: 13 }) }, f)) }) }),
+      /* @__PURE__ */ e(L, { label: "Background", children: /* @__PURE__ */ e(hn, { value: n.backgroundColor ?? "", onChange: (f) => i(n.id, { backgroundColor: f || void 0 }) }) })
     ] })
   ] });
 }
@@ -4854,7 +4854,7 @@ function Es({ el: n }) {
   return n.type !== "barcode" ? null : /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "Barcode" }),
     /* @__PURE__ */ m("div", { style: { padding: "0 14px", display: "flex", flexDirection: "column", gap: 8 }, children: [
-      /* @__PURE__ */ e(G, { label: "Value", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ e(L, { label: "Value", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
         /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.value, onChange: (A) => r(n.id, { value: A }), placeholder: "12345 or {{barcodeField}}" }) }),
         /* @__PURE__ */ e(
           Cn,
@@ -4865,7 +4865,7 @@ function Es({ el: n }) {
           }
         )
       ] }) }),
-      /* @__PURE__ */ e(G, { label: "Format", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(L, { label: "Format", children: /* @__PURE__ */ e(
         he,
         {
           value: n.format ?? "CODE128",
@@ -4878,10 +4878,10 @@ function Es({ el: n }) {
           ]
         }
       ) }),
-      /* @__PURE__ */ e(G, { label: "Horizontal", children: /* @__PURE__ */ e(Wn, { children: ["left", "center", "right"].map((A) => /* @__PURE__ */ e(Sn, { active: (n.horizontalAlign ?? "center") === A, onClick: () => r(n.id, { horizontalAlign: A }), title: A.charAt(0).toUpperCase() + A.slice(1), children: A === "left" ? /* @__PURE__ */ e(Tn, { size: 13 }) : A === "center" ? /* @__PURE__ */ e(Gn, { size: 13 }) : /* @__PURE__ */ e(jn, { size: 13 }) }, A)) }) }),
-      /* @__PURE__ */ e(G, { label: "Vertical", children: /* @__PURE__ */ e(Wn, { children: ["top", "middle", "bottom"].map((A) => /* @__PURE__ */ e(Sn, { active: (n.verticalAlign ?? "middle") === A, onClick: () => r(n.id, { verticalAlign: A }), title: A.charAt(0).toUpperCase() + A.slice(1), children: A === "top" ? /* @__PURE__ */ e(St, { size: 13 }) : A === "middle" ? /* @__PURE__ */ e(kt, { size: 13 }) : /* @__PURE__ */ e(Qt, { size: 13 }) }, A)) }) }),
-      /* @__PURE__ */ e(G, { label: "Background", children: /* @__PURE__ */ e(hn, { value: n.backgroundColor ?? "", onChange: (A) => i(n.id, { backgroundColor: A || void 0 }) }) }),
-      /* @__PURE__ */ e(G, { label: "Bar Color", children: /* @__PURE__ */ e(hn, { value: n.lineColor ?? "#000000", onChange: (A) => i(n.id, { lineColor: A || "#000000" }) }) })
+      /* @__PURE__ */ e(L, { label: "Horizontal", children: /* @__PURE__ */ e(Wn, { children: ["left", "center", "right"].map((A) => /* @__PURE__ */ e(Sn, { active: (n.horizontalAlign ?? "center") === A, onClick: () => r(n.id, { horizontalAlign: A }), title: A.charAt(0).toUpperCase() + A.slice(1), children: A === "left" ? /* @__PURE__ */ e(Tn, { size: 13 }) : A === "center" ? /* @__PURE__ */ e(Gn, { size: 13 }) : /* @__PURE__ */ e(jn, { size: 13 }) }, A)) }) }),
+      /* @__PURE__ */ e(L, { label: "Vertical", children: /* @__PURE__ */ e(Wn, { children: ["top", "middle", "bottom"].map((A) => /* @__PURE__ */ e(Sn, { active: (n.verticalAlign ?? "middle") === A, onClick: () => r(n.id, { verticalAlign: A }), title: A.charAt(0).toUpperCase() + A.slice(1), children: A === "top" ? /* @__PURE__ */ e(St, { size: 13 }) : A === "middle" ? /* @__PURE__ */ e(kt, { size: 13 }) : /* @__PURE__ */ e(Qt, { size: 13 }) }, A)) }) }),
+      /* @__PURE__ */ e(L, { label: "Background", children: /* @__PURE__ */ e(hn, { value: n.backgroundColor ?? "", onChange: (A) => i(n.id, { backgroundColor: A || void 0 }) }) }),
+      /* @__PURE__ */ e(L, { label: "Bar Color", children: /* @__PURE__ */ e(hn, { value: n.lineColor ?? "#000000", onChange: (A) => i(n.id, { lineColor: A || "#000000" }) }) })
     ] })
   ] });
 }
@@ -4890,7 +4890,7 @@ function Is({ el: n }) {
   return n.type !== "qrcode" ? null : /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "QR Code" }),
     /* @__PURE__ */ m("div", { style: { padding: "0 14px", display: "flex", flexDirection: "column", gap: 8 }, children: [
-      /* @__PURE__ */ e(G, { label: "Value / URL", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ e(L, { label: "Value / URL", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
         /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.value, onChange: (A) => r(n.id, { value: A }), placeholder: "https://… or {{qrField}}" }) }),
         /* @__PURE__ */ e(
           Cn,
@@ -4901,10 +4901,10 @@ function Is({ el: n }) {
           }
         )
       ] }) }),
-      /* @__PURE__ */ e(G, { label: "Horizontal", children: /* @__PURE__ */ e(Wn, { children: ["left", "center", "right"].map((A) => /* @__PURE__ */ e(Sn, { active: (n.horizontalAlign ?? "center") === A, onClick: () => r(n.id, { horizontalAlign: A }), title: A.charAt(0).toUpperCase() + A.slice(1), children: A === "left" ? /* @__PURE__ */ e(Tn, { size: 13 }) : A === "center" ? /* @__PURE__ */ e(Gn, { size: 13 }) : /* @__PURE__ */ e(jn, { size: 13 }) }, A)) }) }),
-      /* @__PURE__ */ e(G, { label: "Vertical", children: /* @__PURE__ */ e(Wn, { children: ["top", "middle", "bottom"].map((A) => /* @__PURE__ */ e(Sn, { active: (n.verticalAlign ?? "middle") === A, onClick: () => r(n.id, { verticalAlign: A }), title: A.charAt(0).toUpperCase() + A.slice(1), children: A === "top" ? /* @__PURE__ */ e(St, { size: 13 }) : A === "middle" ? /* @__PURE__ */ e(kt, { size: 13 }) : /* @__PURE__ */ e(Qt, { size: 13 }) }, A)) }) }),
-      /* @__PURE__ */ e(G, { label: "Background", children: /* @__PURE__ */ e(hn, { value: n.backgroundColor ?? "", onChange: (A) => i(n.id, { backgroundColor: A || void 0 }) }) }),
-      /* @__PURE__ */ e(G, { label: "Foreground", children: /* @__PURE__ */ e(hn, { value: n.foregroundColor ?? "#000000", onChange: (A) => i(n.id, { foregroundColor: A || "#000000" }) }) })
+      /* @__PURE__ */ e(L, { label: "Horizontal", children: /* @__PURE__ */ e(Wn, { children: ["left", "center", "right"].map((A) => /* @__PURE__ */ e(Sn, { active: (n.horizontalAlign ?? "center") === A, onClick: () => r(n.id, { horizontalAlign: A }), title: A.charAt(0).toUpperCase() + A.slice(1), children: A === "left" ? /* @__PURE__ */ e(Tn, { size: 13 }) : A === "center" ? /* @__PURE__ */ e(Gn, { size: 13 }) : /* @__PURE__ */ e(jn, { size: 13 }) }, A)) }) }),
+      /* @__PURE__ */ e(L, { label: "Vertical", children: /* @__PURE__ */ e(Wn, { children: ["top", "middle", "bottom"].map((A) => /* @__PURE__ */ e(Sn, { active: (n.verticalAlign ?? "middle") === A, onClick: () => r(n.id, { verticalAlign: A }), title: A.charAt(0).toUpperCase() + A.slice(1), children: A === "top" ? /* @__PURE__ */ e(St, { size: 13 }) : A === "middle" ? /* @__PURE__ */ e(kt, { size: 13 }) : /* @__PURE__ */ e(Qt, { size: 13 }) }, A)) }) }),
+      /* @__PURE__ */ e(L, { label: "Background", children: /* @__PURE__ */ e(hn, { value: n.backgroundColor ?? "", onChange: (A) => i(n.id, { backgroundColor: A || void 0 }) }) }),
+      /* @__PURE__ */ e(L, { label: "Foreground", children: /* @__PURE__ */ e(hn, { value: n.foregroundColor ?? "#000000", onChange: (A) => i(n.id, { foregroundColor: A || "#000000" }) }) })
     ] })
   ] });
 }
@@ -4928,7 +4928,7 @@ function ws({ el: n }) {
   return /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "Container" }),
     /* @__PURE__ */ m("div", { style: { padding: "0 14px", display: "flex", flexDirection: "column", gap: 10 }, children: [
-      /* @__PURE__ */ e(G, { label: "Repeat over (data array)", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ e(L, { label: "Repeat over (data array)", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
         /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.dataSource ?? "", onChange: (o) => r(n.id, { dataSource: o || void 0 }), placeholder: "items  (blank = static group)" }) }),
         /* @__PURE__ */ e(Cn, { paths: a, wrapInExpr: !1, onPick: (o) => r(n.id, { dataSource: o }) })
       ] }) }),
@@ -4939,7 +4939,7 @@ function ws({ el: n }) {
         /* @__PURE__ */ e("code", { style: { fontFamily: "monospace", color: "var(--accent)" }, children: "{{name}}" }),
         "."
       ] }) : "No data array — renders once as a static group. Set a data array to make it repeat." }),
-      /* @__PURE__ */ e(Xn, { children: /* @__PURE__ */ e(G, { label: "Gap between items", children: /* @__PURE__ */ e(_, { type: "number", suffix: "px", value: n.gap ?? 0, onChange: (o) => r(n.id, { gap: Math.max(0, Math.round(Number(o) || 0)) }) }) }) }),
+      /* @__PURE__ */ e(Xn, { children: /* @__PURE__ */ e(L, { label: "Gap between items", children: /* @__PURE__ */ e(_, { type: "number", suffix: "px", value: n.gap ?? 0, onChange: (o) => r(n.id, { gap: Math.max(0, Math.round(Number(o) || 0)) }) }) }) }),
       /* @__PURE__ */ e("span", { style: { fontSize: 10, color: "var(--text-3)", lineHeight: 1.5 }, children: "The band is transparent. Its canvas height is a baseline — in the PDF each item grows beyond it to fit children like rich text. Style individual children for borders or backgrounds." })
     ] })
   ] });
@@ -4951,10 +4951,10 @@ function Cs({ el: n }) {
   return /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "Style" }),
     /* @__PURE__ */ m("div", { style: { padding: "0 14px", display: "flex", flexDirection: "column", gap: 8 }, children: [
-      A && /* @__PURE__ */ e(G, { label: "Font Family", children: /* @__PURE__ */ e(he, { value: a.fontFamily ?? "Helvetica", onChange: (f) => o("fontFamily", f), options: cs }) }),
+      A && /* @__PURE__ */ e(L, { label: "Font Family", children: /* @__PURE__ */ e(he, { value: a.fontFamily ?? "Helvetica", onChange: (f) => o("fontFamily", f), options: cs }) }),
       /* @__PURE__ */ m("div", { style: { display: "flex", gap: 8 }, children: [
-        /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(G, { label: "Font Size", children: /* @__PURE__ */ e(_, { type: "number", value: a.fontSize ?? 12, onChange: (f) => o("fontSize", Number(f)), suffix: "px" }) }) }),
-        /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(G, { label: "Letter Spacing", children: /* @__PURE__ */ e(_, { type: "number", value: a.letterSpacing ?? 0, onChange: (f) => o("letterSpacing", Number(f)), suffix: "px" }) }) })
+        /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(L, { label: "Font Size", children: /* @__PURE__ */ e(_, { type: "number", value: a.fontSize ?? 12, onChange: (f) => o("fontSize", Number(f)), suffix: "px" }) }) }),
+        /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(L, { label: "Letter Spacing", children: /* @__PURE__ */ e(_, { type: "number", value: a.letterSpacing ?? 0, onChange: (f) => o("letterSpacing", Number(f)), suffix: "px" }) }) })
       ] }),
       A && /* @__PURE__ */ m("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
         /* @__PURE__ */ e("span", { style: { fontSize: 11, color: "var(--text-3)", fontWeight: 500, flexShrink: 0, width: 68 }, children: "Text style" }),
@@ -4996,12 +4996,12 @@ function Cs({ el: n }) {
           }
         ) })
       ] }),
-      A && /* @__PURE__ */ e(G, { label: "Line Height", children: /* @__PURE__ */ e(_, { type: "number", value: a.lineHeight ?? 1.2, onChange: (f) => o("lineHeight", Number(f)), suffix: "px" }) }),
-      /* @__PURE__ */ e(G, { label: "Color", children: /* @__PURE__ */ e(hn, { value: a.color ?? "#000000", onChange: (f) => u("color", f) }) }),
-      /* @__PURE__ */ e(G, { label: "Background", children: /* @__PURE__ */ e(hn, { value: a.backgroundColor ?? "", onChange: (f) => u("backgroundColor", f) }) }),
+      A && /* @__PURE__ */ e(L, { label: "Line Height", children: /* @__PURE__ */ e(_, { type: "number", value: a.lineHeight ?? 1.2, onChange: (f) => o("lineHeight", Number(f)), suffix: "px" }) }),
+      /* @__PURE__ */ e(L, { label: "Color", children: /* @__PURE__ */ e(hn, { value: a.color ?? "#000000", onChange: (f) => u("color", f) }) }),
+      /* @__PURE__ */ e(L, { label: "Background", children: /* @__PURE__ */ e(hn, { value: a.backgroundColor ?? "", onChange: (f) => u("backgroundColor", f) }) }),
       (n.type === "rectangle" || n.type === "table") && /* @__PURE__ */ m(X, { children: [
-        /* @__PURE__ */ e(G, { label: "Border Color", children: /* @__PURE__ */ e(hn, { value: a.borderColor ?? "#cccccc", onChange: (f) => u("borderColor", f) }) }),
-        /* @__PURE__ */ e(G, { label: "Border Width", children: /* @__PURE__ */ e(_, { type: "number", value: a.borderWidth ?? 1, onChange: (f) => o("borderWidth", Number(f)) }) })
+        /* @__PURE__ */ e(L, { label: "Border Color", children: /* @__PURE__ */ e(hn, { value: a.borderColor ?? "#cccccc", onChange: (f) => u("borderColor", f) }) }),
+        /* @__PURE__ */ e(L, { label: "Border Width", children: /* @__PURE__ */ e(_, { type: "number", value: a.borderWidth ?? 1, onChange: (f) => o("borderWidth", Number(f)) }) })
       ] })
     ] })
   ] });
@@ -5011,7 +5011,7 @@ function xs({ el: n }) {
   return n.type !== "line" ? null : /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "Line" }),
     /* @__PURE__ */ m("div", { style: { padding: "0 14px", display: "flex", flexDirection: "column", gap: 8 }, children: [
-      /* @__PURE__ */ e(G, { label: "Direction", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(L, { label: "Direction", children: /* @__PURE__ */ e(
         he,
         {
           value: n.direction ?? "horizontal",
@@ -5019,14 +5019,14 @@ function xs({ el: n }) {
           options: [{ value: "horizontal", label: "Horizontal" }, { value: "vertical", label: "Vertical" }]
         }
       ) }),
-      /* @__PURE__ */ e(G, { label: "Color", children: /* @__PURE__ */ e(hn, { value: n.color ?? "#000000", onChange: (a) => i(n.id, { color: a }) }) }),
-      /* @__PURE__ */ e(G, { label: "Thickness", children: /* @__PURE__ */ e(_, { type: "number", value: n.thickness ?? 1, onChange: (a) => r(n.id, { thickness: Number(a) }) }) })
+      /* @__PURE__ */ e(L, { label: "Color", children: /* @__PURE__ */ e(hn, { value: n.color ?? "#000000", onChange: (a) => i(n.id, { color: a }) }) }),
+      /* @__PURE__ */ e(L, { label: "Thickness", children: /* @__PURE__ */ e(_, { type: "number", value: n.thickness ?? 1, onChange: (a) => r(n.id, { thickness: Number(a) }) }) })
     ] })
   ] });
 }
 const Bs = dr.filter((n) => n.category === "handwriting");
 function Ss({ font: n, initial: r, onSave: i, onCancel: a }) {
-  const o = nn(null), u = nn(!1), [A, f] = Z(!1), d = () => o.current.getContext("2d");
+  const o = $(null), u = $(!1), [A, f] = Z(!1), d = () => o.current.getContext("2d");
   an(() => {
     const g = o.current;
     if (!g) return;
@@ -5139,7 +5139,7 @@ function ks({ el: n }) {
           onCancel: () => f(!1)
         }
       ),
-      !h && /* @__PURE__ */ e(G, { label: "Signature Font (typed name)", children: /* @__PURE__ */ e(
+      !h && /* @__PURE__ */ e(L, { label: "Signature Font (typed name)", children: /* @__PURE__ */ e(
         he,
         {
           value: n.scriptFont ?? "Great Vibes",
@@ -5148,23 +5148,23 @@ function ks({ el: n }) {
         }
       ) }),
       g("Signer details"),
-      /* @__PURE__ */ e(G, { label: "Signer Name", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ e(L, { label: "Signer Name", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
         /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.name ?? "", onChange: (b) => r(n.id, { name: b }), placeholder: "Jane Doe or {{signer.name}}" }) }),
         /* @__PURE__ */ e(Cn, { groups: d, onPick: (b) => r(n.id, { name: (n.name ?? "") + b }) })
       ] }) }),
-      /* @__PURE__ */ e(G, { label: "Title / Subtext", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+      /* @__PURE__ */ e(L, { label: "Title / Subtext", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
         /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.title ?? "", onChange: (b) => r(n.id, { title: b }), placeholder: "CEO, Acme Inc." }) }),
         /* @__PURE__ */ e(Cn, { groups: d, onPick: (b) => r(n.id, { title: (n.title ?? "") + b }) })
       ] }) }),
       /* @__PURE__ */ m(Xn, { children: [
-        /* @__PURE__ */ e(G, { label: "Label", children: /* @__PURE__ */ e(_, { value: n.label ?? "", onChange: (b) => r(n.id, { label: b || void 0 }), placeholder: "SIGNED BY" }) }),
-        /* @__PURE__ */ e(G, { label: "Date", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
+        /* @__PURE__ */ e(L, { label: "Label", children: /* @__PURE__ */ e(_, { value: n.label ?? "", onChange: (b) => r(n.id, { label: b || void 0 }), placeholder: "SIGNED BY" }) }),
+        /* @__PURE__ */ e(L, { label: "Date", children: /* @__PURE__ */ m("div", { style: { display: "flex", gap: 6 }, children: [
           /* @__PURE__ */ e("div", { style: { flex: 1 }, children: /* @__PURE__ */ e(_, { value: n.date ?? "", onChange: (b) => r(n.id, { date: b || void 0 }), placeholder: "{{date}}" }) }),
           /* @__PURE__ */ e(Cn, { groups: d, onPick: (b) => r(n.id, { date: (n.date ?? "") + b }) })
         ] }) })
       ] }),
       g("Appearance"),
-      /* @__PURE__ */ e(G, { label: "Alignment", children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(L, { label: "Alignment", children: /* @__PURE__ */ e(
         ce,
         {
           value: n.align ?? "left",
@@ -5177,8 +5177,8 @@ function ks({ el: n }) {
         }
       ) }),
       /* @__PURE__ */ m(Xn, { children: [
-        /* @__PURE__ */ e(G, { label: "Line Color", children: /* @__PURE__ */ e(hn, { value: n.lineColor ?? "#94a3b8", onChange: (b) => i(n.id, { lineColor: b }) }) }),
-        !h && /* @__PURE__ */ e(G, { label: "Ink Color", children: /* @__PURE__ */ e(hn, { value: n.scriptColor ?? "#1e293b", onChange: (b) => i(n.id, { scriptColor: b }) }) })
+        /* @__PURE__ */ e(L, { label: "Line Color", children: /* @__PURE__ */ e(hn, { value: n.lineColor ?? "#94a3b8", onChange: (b) => i(n.id, { lineColor: b }) }) }),
+        !h && /* @__PURE__ */ e(L, { label: "Ink Color", children: /* @__PURE__ */ e(hn, { value: n.scriptColor ?? "#1e293b", onChange: (b) => i(n.id, { scriptColor: b }) }) })
       ] }),
       /* @__PURE__ */ m("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer", marginTop: 2 }, children: [
         /* @__PURE__ */ e(
@@ -5199,7 +5199,7 @@ function Qs({ el: n }) {
   return /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ e(Pn, { children: "Visibility" }),
     /* @__PURE__ */ m("div", { style: { padding: "0 14px", display: "flex", flexDirection: "column", gap: 8 }, children: [
-      /* @__PURE__ */ e(G, { label: "Condition (optional)", children: /* @__PURE__ */ e(_, { value: n.condition ?? "", onChange: (i) => r(n.id, { condition: i || void 0 }), placeholder: "{{status}} === 'active'" }) }),
+      /* @__PURE__ */ e(L, { label: "Condition (optional)", children: /* @__PURE__ */ e(_, { value: n.condition ?? "", onChange: (i) => r(n.id, { condition: i || void 0 }), placeholder: "{{status}} === 'active'" }) }),
       /* @__PURE__ */ m("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
         /* @__PURE__ */ e(
           "div",
@@ -6603,8 +6603,8 @@ function Xs() {
       const x = C[S][0], Q = C[S][1];
       for (let M = -1; M <= 7; M++)
         if (!(x + M <= -1 || P <= x + M))
-          for (let T = -1; T <= 7; T++)
-            Q + T <= -1 || P <= Q + T || (M >= 0 && M <= 6 && (T === 0 || T === 6) || T >= 0 && T <= 6 && (M === 0 || M === 6) || M >= 2 && M <= 4 && T >= 2 && T <= 4 ? v.set(x + M, Q + T, !0, !0) : v.set(x + M, Q + T, !1, !0));
+          for (let R = -1; R <= 7; R++)
+            Q + R <= -1 || P <= Q + R || (M >= 0 && M <= 6 && (R === 0 || R === 6) || R >= 0 && R <= 6 && (M === 0 || M === 6) || M >= 2 && M <= 4 && R >= 2 && R <= 4 ? v.set(x + M, Q + R, !0, !0) : v.set(x + M, Q + R, !1, !0));
     }
   }
   function p(v) {
@@ -6641,10 +6641,10 @@ function Xs() {
     let C = -1, S = P - 1, x = 7, Q = 0;
     for (let M = P - 1; M > 0; M -= 2)
       for (M === 6 && M--; ; ) {
-        for (let T = 0; T < 2; T++)
-          if (!v.isReserved(S, M - T)) {
+        for (let R = 0; R < 2; R++)
+          if (!v.isReserved(S, M - R)) {
             let D = !1;
-            Q < E.length && (D = (E[Q] >>> x & 1) === 1), v.set(S, M - T, D), x--, x === -1 && (Q++, x = 7);
+            Q < E.length && (D = (E[Q] >>> x & 1) === 1), v.set(S, M - R, D), x--, x === -1 && (Q++, x = 7);
           }
         if (S += C, S < 0 || P <= S) {
           S -= C, C = -C;
@@ -6654,36 +6654,36 @@ function Xs() {
   }
   function k(v, E, P) {
     const C = new i();
-    P.forEach(function(T) {
-      C.put(T.mode.bit, 4), C.put(T.getLength(), c.getCharCountIndicator(T.mode, v)), T.write(C);
+    P.forEach(function(R) {
+      C.put(R.mode.bit, 4), C.put(R.getLength(), c.getCharCountIndicator(R.mode, v)), R.write(C);
     });
     const S = n.getSymbolTotalCodewords(v), x = f.getTotalCodewordsCount(v, E), Q = (S - x) * 8;
     for (C.getLengthInBits() + 4 <= Q && C.put(0, 4); C.getLengthInBits() % 8 !== 0; )
       C.putBit(0);
     const M = (Q - C.getLengthInBits()) / 8;
-    for (let T = 0; T < M; T++)
-      C.put(T % 2 ? 17 : 236, 8);
+    for (let R = 0; R < M; R++)
+      C.put(R % 2 ? 17 : 236, 8);
     return B(C, v, E);
   }
   function B(v, E, P) {
-    const C = n.getSymbolTotalCodewords(E), S = f.getTotalCodewordsCount(E, P), x = C - S, Q = f.getBlocksCount(E, P), M = C % Q, T = Q - M, D = Math.floor(C / Q), z = Math.floor(x / Q), H = z + 1, q = D - z, N = new d(q);
-    let L = 0;
-    const j = new Array(Q), $ = new Array(Q);
+    const C = n.getSymbolTotalCodewords(E), S = f.getTotalCodewordsCount(E, P), x = C - S, Q = f.getBlocksCount(E, P), M = C % Q, R = Q - M, D = Math.floor(C / Q), H = Math.floor(x / Q), z = H + 1, q = D - H, N = new d(q);
+    let G = 0;
+    const j = new Array(Q), nn = new Array(Q);
     let Y = 0;
     const F = new Uint8Array(v.buffer);
     for (let rn = 0; rn < Q; rn++) {
-      const An = rn < T ? z : H;
-      j[rn] = F.slice(L, L + An), $[rn] = N.encode(j[rn]), L += An, Y = Math.max(Y, An);
+      const An = rn < R ? H : z;
+      j[rn] = F.slice(G, G + An), nn[rn] = N.encode(j[rn]), G += An, Y = Math.max(Y, An);
     }
-    const R = new Uint8Array(C);
+    const T = new Uint8Array(C);
     let U = 0, O, W;
     for (O = 0; O < Y; O++)
       for (W = 0; W < Q; W++)
-        O < j[W].length && (R[U++] = j[W][O]);
+        O < j[W].length && (T[U++] = j[W][O]);
     for (O = 0; O < q; O++)
       for (W = 0; W < Q; W++)
-        R[U++] = $[W][O];
-    return R;
+        T[U++] = nn[W][O];
+    return T;
   }
   function I(v, E, P, C) {
     let S;
@@ -6692,8 +6692,8 @@ function Xs() {
     else if (typeof v == "string") {
       let D = E;
       if (!D) {
-        const z = l.rawSplit(v);
-        D = t.getBestVersionForData(z, P);
+        const H = l.rawSplit(v);
+        D = t.getBestVersionForData(H, P);
       }
       S = l.fromString(v, D || 40);
     } else
@@ -6710,12 +6710,12 @@ The chosen QR Code version cannot contain this amount of data.
 Minimum version required to store current data is: ` + x + `.
 `
       );
-    const Q = k(E, P, S), M = n.getSymbolSize(E), T = new a(M);
-    return h(T, E), p(T), g(T, E), y(T, P, 0), E >= 7 && b(T, E), w(T, Q), isNaN(C) && (C = A.getBestMask(
-      T,
-      y.bind(null, T, P)
-    )), A.applyMask(C, T), y(T, P, C), {
-      modules: T,
+    const Q = k(E, P, S), M = n.getSymbolSize(E), R = new a(M);
+    return h(R, E), p(R), g(R, E), y(R, P, 0), E >= 7 && b(R, E), w(R, Q), isNaN(C) && (C = A.getBestMask(
+      R,
+      y.bind(null, R, P)
+    )), A.applyMask(C, R), y(R, P, C), {
+      modules: R,
       version: E,
       errorCorrectionLevel: P,
       maskPattern: C,
@@ -9552,10 +9552,10 @@ function Dl() {
       var M = this;
       return M._errorHandler.wrapBarcodeCall(function() {
         Q.text = typeof Q.text > "u" ? void 0 : "" + Q.text;
-        var T = (0, a.default)(M._options, Q);
-        T = (0, c.default)(T);
-        var D = C[S], z = v(x, D, T);
-        return M._encodings.push(z), M;
+        var R = (0, a.default)(M._options, Q);
+        R = (0, c.default)(R);
+        var D = C[S], H = v(x, D, R);
+        return M._encodings.push(H), M;
       });
     };
   }
@@ -9566,8 +9566,8 @@ function Dl() {
       throw new p.InvalidInputException(Q.constructor.name, C);
     var M = Q.encode();
     M = (0, u.default)(M);
-    for (var T = 0; T < M.length; T++)
-      M[T].options = (0, a.default)(x, M[T].options);
+    for (var R = 0; R < M.length; R++)
+      M[R].options = (0, a.default)(x, M[R].options);
     return M;
   }
   function E() {
@@ -9586,8 +9586,8 @@ function Dl() {
         C = this._renderProperties[S];
         var x = (0, a.default)(this._options, C.options);
         x.format == "auto" && (x.format = E()), this._errorHandler.wrapBarcodeCall(function() {
-          var Q = x.value, M = r.default[x.format.toUpperCase()], T = v(Q, M, x);
-          P(C, T, x);
+          var Q = x.value, M = r.default[x.format.toUpperCase()], R = v(Q, M, x);
+          P(C, R, x);
         });
       }
     }
@@ -9606,8 +9606,8 @@ function Dl() {
     for (var Q = 0; Q < S.length; Q++)
       S[Q].options = (0, a.default)(x, S[Q].options), (0, f.default)(S[Q].options);
     (0, f.default)(x);
-    var M = C.renderer, T = new M(C.element, S, x);
-    T.render(), C.afterRender && C.afterRender();
+    var M = C.renderer, R = new M(C.element, S, x);
+    R.render(), C.afterRender && C.afterRender();
   }
   return typeof window < "u" && (window.JsBarcode = k), typeof jQuery < "u" && (jQuery.fn.JsBarcode = function(C, S) {
     var x = [];
@@ -9769,44 +9769,44 @@ function Yl({ el: n }) {
 }
 function Xl({ el: n }) {
   if (n.type !== "table") return null;
-  const { updateElement: r, selectedId: i, zoom: a } = en(), o = i === n.id, u = n.style ?? {}, A = n.headerStyle ?? {}, f = n.altRowStyle ?? {}, d = n.previewRows ?? (n.dataSource ? [{}] : Array.from({ length: n.rowCount ?? 1 }, () => ({}))), t = n.columns.reduce((L, j) => L + j.width, 0) || 1, [s, c] = Z(null), [l, h] = Z(null), [p, g] = Z(null), [b, y] = Z(null), [w, k] = Z(null), [B, I] = Z(null), v = nn(null), E = (L) => {
+  const { updateElement: r, selectedId: i, zoom: a } = en(), o = i === n.id, u = n.style ?? {}, A = n.headerStyle ?? {}, f = n.altRowStyle ?? {}, d = n.previewRows ?? (n.dataSource ? [{}] : Array.from({ length: n.rowCount ?? 1 }, () => ({}))), t = n.columns.reduce((G, j) => G + j.width, 0) || 1, [s, c] = Z(null), [l, h] = Z(null), [p, g] = Z(null), [b, y] = Z(null), [w, k] = Z(null), [B, I] = Z(null), v = $(null), E = (G) => {
     if (d.length <= 1) return;
-    const j = d.filter(($, Y) => Y !== L);
+    const j = d.filter((nn, Y) => Y !== G);
     r(n.id, { previewRows: j, rowCount: j.length });
   }, P = () => {
-    const L = [...d, {}];
-    r(n.id, { previewRows: L, rowCount: L.length });
-  }, C = (L, j) => {
-    L.stopPropagation(), L.preventDefault();
-    const $ = n.columns[j].width / t * n.width;
-    v.current = { colIdx: j, startX: L.clientX, startDocWidth: $ };
-    const Y = (R) => {
+    const G = [...d, {}];
+    r(n.id, { previewRows: G, rowCount: G.length });
+  }, C = (G, j) => {
+    G.stopPropagation(), G.preventDefault();
+    const nn = n.columns[j].width / t * n.width;
+    v.current = { colIdx: j, startX: G.clientX, startDocWidth: nn };
+    const Y = (T) => {
       if (!v.current) return;
-      const U = Math.max(24, v.current.startDocWidth + (R.clientX - v.current.startX) / (a || 1)), O = [...n.columns];
+      const U = Math.max(24, v.current.startDocWidth + (T.clientX - v.current.startX) / (a || 1)), O = [...n.columns];
       O[v.current.colIdx] = { ...O[v.current.colIdx], width: Math.max(20, U / n.width * t) }, r(n.id, { columns: O });
     }, F = () => {
       v.current = null, window.removeEventListener("mousemove", Y), window.removeEventListener("mouseup", F);
     };
     window.addEventListener("mousemove", Y), window.addEventListener("mouseup", F);
-  }, S = (L) => {
-    if (p === null || p === L) {
+  }, S = (G) => {
+    if (p === null || p === G) {
       g(null), y(null);
       return;
     }
-    const j = [...n.columns], [$] = j.splice(p, 1);
-    j.splice(L, 0, $), r(n.id, { columns: j }), g(null), y(null);
-  }, x = (L) => {
-    if (w === null || w === L) {
+    const j = [...n.columns], [nn] = j.splice(p, 1);
+    j.splice(G, 0, nn), r(n.id, { columns: j }), g(null), y(null);
+  }, x = (G) => {
+    if (w === null || w === G) {
       k(null), I(null);
       return;
     }
-    const j = [...d], [$] = j.splice(w, 1);
-    j.splice(L, 0, $), r(n.id, { previewRows: j }), k(null), I(null);
-  }, Q = u.borderWidth ?? 0.5, M = u.borderColor ?? "#e2e8f0", T = `${Q}px solid ${M}`, D = `${Math.max(Q, 1)}px solid ${M}`, z = u.padding ?? 6, H = u.fontSize ?? 10, q = A.backgroundColor ?? u.backgroundColor ?? "#f8fafc", N = 18;
-  return /* @__PURE__ */ e("div", { style: { width: "100%", fontSize: H, fontFamily: "inherit", overflow: "visible" }, children: /* @__PURE__ */ m("table", { style: { borderCollapse: "collapse", tableLayout: "fixed", width: "100%", lineHeight: 1.4 }, children: [
-    /* @__PURE__ */ e("colgroup", { children: n.columns.map((L, j) => /* @__PURE__ */ e("col", { style: { width: `${L.width / t * 100}%` } }, j)) }),
-    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: n.columns.map((L, j) => {
-      const $ = L.headerStyle ?? {}, Y = o && b === j, F = o && l === j, R = $.padding ?? A.padding ?? z, U = j === n.columns.length - 1;
+    const j = [...d], [nn] = j.splice(w, 1);
+    j.splice(G, 0, nn), r(n.id, { previewRows: j }), k(null), I(null);
+  }, Q = u.borderWidth ?? 0.5, M = u.borderColor ?? "#e2e8f0", R = `${Q}px solid ${M}`, D = `${Math.max(Q, 1)}px solid ${M}`, H = u.padding ?? 6, z = u.fontSize ?? 10, q = A.backgroundColor ?? u.backgroundColor ?? "#f8fafc", N = 18;
+  return /* @__PURE__ */ e("div", { style: { width: "100%", fontSize: z, fontFamily: "inherit", overflow: "visible" }, children: /* @__PURE__ */ m("table", { style: { borderCollapse: "collapse", tableLayout: "fixed", width: "100%", lineHeight: 1.4 }, children: [
+    /* @__PURE__ */ e("colgroup", { children: n.columns.map((G, j) => /* @__PURE__ */ e("col", { style: { width: `${G.width / t * 100}%` } }, j)) }),
+    /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { children: n.columns.map((G, j) => {
+      const nn = G.headerStyle ?? {}, Y = o && b === j, F = o && l === j, T = nn.padding ?? A.padding ?? H, U = j === n.columns.length - 1;
       return /* @__PURE__ */ m(
         "th",
         {
@@ -9828,17 +9828,17 @@ function Xl({ el: n }) {
           onClick: o ? (O) => O.stopPropagation() : void 0,
           style: {
             position: "relative",
-            border: Y ? "2px solid var(--accent, #6c63ff)" : T,
+            border: Y ? "2px solid var(--accent, #6c63ff)" : R,
             borderBottom: Y ? "2px solid var(--accent, #6c63ff)" : D,
             // Last header: overflow visible so resize handle doesn't clip
             overflow: U ? "visible" : "hidden",
-            padding: `${R}px`,
-            textAlign: $.textAlign ?? A.textAlign ?? L.align ?? "left",
-            fontWeight: $.fontWeight ?? A.fontWeight ?? "bold",
-            fontStyle: $.fontStyle ?? A.fontStyle ?? "normal",
-            fontSize: `${$.fontSize ?? A.fontSize ?? H}px`,
-            color: Y ? "var(--accent, #6c63ff)" : $.color ?? A.color ?? u.color ?? "#1e293b",
-            backgroundColor: Y ? "var(--accent-dim, rgba(108,99,255,0.07))" : $.backgroundColor ?? q,
+            padding: `${T}px`,
+            textAlign: nn.textAlign ?? A.textAlign ?? G.align ?? "left",
+            fontWeight: nn.fontWeight ?? A.fontWeight ?? "bold",
+            fontStyle: nn.fontStyle ?? A.fontStyle ?? "normal",
+            fontSize: `${nn.fontSize ?? A.fontSize ?? z}px`,
+            color: Y ? "var(--accent, #6c63ff)" : nn.color ?? A.color ?? u.color ?? "#1e293b",
+            backgroundColor: Y ? "var(--accent-dim, rgba(108,99,255,0.07))" : nn.backgroundColor ?? q,
             cursor: o ? "grab" : "default",
             userSelect: "none",
             whiteSpace: "nowrap",
@@ -9846,7 +9846,7 @@ function Xl({ el: n }) {
             transition: "background-color 0.12s, color 0.12s, opacity 0.12s"
           },
           children: [
-            L.label || /* @__PURE__ */ m("span", { style: { color: "rgba(100,116,139,0.4)", fontStyle: "italic", fontWeight: 400, letterSpacing: 0 }, children: [
+            G.label || /* @__PURE__ */ m("span", { style: { color: "rgba(100,116,139,0.4)", fontStyle: "italic", fontWeight: 400, letterSpacing: 0 }, children: [
               "Column ",
               j + 1
             ] }),
@@ -9881,14 +9881,14 @@ function Xl({ el: n }) {
         j
       );
     }) }) }),
-    /* @__PURE__ */ e("tbody", { children: d.map((L, j) => {
-      const Y = j % 2 === 1 ? f.backgroundColor ?? "rgba(0,0,0,0.022)" : u.backgroundColor ?? "transparent", F = o && s === j, R = o && B === j;
+    /* @__PURE__ */ e("tbody", { children: d.map((G, j) => {
+      const Y = j % 2 === 1 ? f.backgroundColor ?? "rgba(0,0,0,0.022)" : u.backgroundColor ?? "transparent", F = o && s === j, T = o && B === j;
       return /* @__PURE__ */ e(
         "tr",
         {
           style: {
-            background: R ? "var(--accent-dim, rgba(108,99,255,0.07))" : F ? "rgba(0,0,0,0.025)" : Y,
-            outline: R ? "1.5px solid var(--accent, #6c63ff)" : "none",
+            background: T ? "var(--accent-dim, rgba(108,99,255,0.07))" : F ? "rgba(0,0,0,0.025)" : Y,
+            outline: T ? "1.5px solid var(--accent, #6c63ff)" : "none",
             outlineOffset: -1,
             opacity: o && w === j ? 0.35 : 1,
             transition: "background 0.08s, opacity 0.1s"
@@ -9902,7 +9902,7 @@ function Xl({ el: n }) {
             O.stopPropagation(), x(j);
           } : void 0,
           children: n.columns.map((O, W) => {
-            const rn = O.style ?? {}, An = W === 0, pn = W === n.columns.length - 1, mn = O.key, Mn = rn.padding ?? z, On = o && (An || pn);
+            const rn = O.style ?? {}, An = W === 0, pn = W === n.columns.length - 1, mn = O.key, Mn = rn.padding ?? H, On = o && (An || pn);
             return /* @__PURE__ */ m(
               "td",
               {
@@ -9910,9 +9910,9 @@ function Xl({ el: n }) {
                 style: {
                   position: "relative",
                   overflow: On ? "visible" : "hidden",
-                  border: T,
+                  border: R,
                   padding: `${Mn}px`,
-                  fontSize: `${rn.fontSize ?? H}px`,
+                  fontSize: `${rn.fontSize ?? z}px`,
                   fontWeight: rn.fontWeight ?? "normal",
                   fontStyle: rn.fontStyle === "italic" ? "italic" : "normal",
                   textAlign: rn.textAlign ?? O.align ?? "left",
@@ -10026,17 +10026,17 @@ function Xl({ el: n }) {
       "td",
       {
         colSpan: n.columns.length,
-        onClick: (L) => {
-          L.stopPropagation(), P();
+        onClick: (G) => {
+          G.stopPropagation(), P();
         },
-        onMouseDown: (L) => L.stopPropagation(),
+        onMouseDown: (G) => G.stopPropagation(),
         style: {
           border: "1.5px dashed var(--accent, #6c63ff)",
           borderTop: "none",
           padding: "5px 10px",
           textAlign: "center",
           cursor: "pointer",
-          fontSize: `${H * 0.95}px`,
+          fontSize: `${z * 0.95}px`,
           color: "var(--accent, #6c63ff)",
           fontWeight: 600,
           letterSpacing: "0.02em",
@@ -10044,11 +10044,11 @@ function Xl({ el: n }) {
           background: "transparent",
           transition: "background 0.1s"
         },
-        onMouseEnter: (L) => {
-          L.currentTarget.style.background = "var(--accent-dim, rgba(108,99,255,0.06))";
+        onMouseEnter: (G) => {
+          G.currentTarget.style.background = "var(--accent-dim, rgba(108,99,255,0.06))";
         },
-        onMouseLeave: (L) => {
-          L.currentTarget.style.background = "transparent";
+        onMouseLeave: (G) => {
+          G.currentTarget.style.background = "transparent";
         },
         children: "+ Add Row"
       }
@@ -10188,7 +10188,7 @@ function n0({ el: n }) {
 }
 function e0({ el: n }) {
   if (n.type !== "qrcode") return null;
-  const r = nn(null), i = n.value || "https://example.com", a = n.horizontalAlign ?? "center", o = n.verticalAlign ?? "middle", u = a === "left" ? "flex-start" : a === "right" ? "flex-end" : "center", A = o === "top" ? "flex-start" : o === "bottom" ? "flex-end" : "center";
+  const r = $(null), i = n.value || "https://example.com", a = n.horizontalAlign ?? "center", o = n.verticalAlign ?? "middle", u = a === "left" ? "flex-start" : a === "right" ? "flex-end" : "center", A = o === "top" ? "flex-start" : o === "bottom" ? "flex-end" : "center";
   return an(() => {
     r.current && nl.toCanvas(r.current, i, {
       width: Math.min(n.width, n.height),
@@ -10200,7 +10200,7 @@ function e0({ el: n }) {
 }
 function t0({ el: n }) {
   if (n.type !== "barcode") return null;
-  const r = nn(null), i = n.value || "12345", a = n.format || "CODE128", o = n.horizontalAlign ?? "center", u = n.verticalAlign ?? "middle", A = o === "left" ? "flex-start" : o === "right" ? "flex-end" : "center", f = u === "top" ? "flex-start" : u === "bottom" ? "flex-end" : "center";
+  const r = $(null), i = n.value || "12345", a = n.format || "CODE128", o = n.horizontalAlign ?? "center", u = n.verticalAlign ?? "middle", A = o === "left" ? "flex-start" : o === "right" ? "flex-end" : "center", f = u === "top" ? "flex-start" : u === "bottom" ? "flex-end" : "center";
   return an(() => {
     if (r.current)
       try {
@@ -10354,12 +10354,12 @@ function ui(n, r, i, a, o, u, A) {
   for (const C of o) {
     const S = [C.x, C.x + C.width / 2, C.x + C.width], x = [C.y, C.y + C.height / 2, C.y + C.height];
     for (const Q of f) for (const M of S) {
-      const T = M - Q;
-      Math.abs(T) < Math.abs(c) && (c = T, h = T);
+      const R = M - Q;
+      Math.abs(R) < Math.abs(c) && (c = R, h = R);
     }
     for (const Q of d) for (const M of x) {
-      const T = M - Q;
-      Math.abs(T) < Math.abs(l) && (l = T, p = T);
+      const R = M - Q;
+      Math.abs(R) < Math.abs(l) && (l = R, p = R);
     }
   }
   Math.abs(c) > si && (h = 0), Math.abs(l) > si && (p = 0);
@@ -10378,8 +10378,8 @@ function ui(n, r, i, a, o, u, A) {
     const C = [I, I + i / 2, I + i], S = [v, v + a / 2, v + a];
     for (const x of o) {
       const Q = [x.x, x.x + x.width / 2, x.x + x.width], M = [x.y, x.y + x.height / 2, x.y + x.height];
-      for (const T of C) for (const D of Q) Math.abs(T - D) < 2 && E.add(Math.round(D));
-      for (const T of S) for (const D of M) Math.abs(T - D) < 2 && P.add(Math.round(D));
+      for (const R of C) for (const D of Q) Math.abs(R - D) < 2 && E.add(Math.round(D));
+      for (const R of S) for (const D of M) Math.abs(R - D) < 2 && P.add(Math.round(D));
     }
     for (const x of C) for (const Q of t) Math.abs(x - Q) < 2 && E.add(Math.round(Q));
     for (const x of S) for (const Q of s) Math.abs(x - Q) < 2 && P.add(Math.round(Q));
@@ -10445,7 +10445,7 @@ function bt({ el: n, zoom: r, sectionWidth: i, sectionHeight: a, parentId: o })
     bringForward: g,
     sendBack: b,
     template: y
-  } = en(), { set: w, clear: k } = Gi(), B = A.includes(n.id), I = u === n.id, v = A.length > 1, E = n.type === "pagebreak", P = n.type === "table", C = n.type === "container", S = !!o, x = nn(null), Q = nn(null), M = nn(null), [T, D] = Z(null), { canBringForward: z, canSendBack: H } = (() => {
+  } = en(), { set: w, clear: k } = Gi(), B = A.includes(n.id), I = u === n.id, v = A.length > 1, E = n.type === "pagebreak", P = n.type === "table", C = n.type === "container", S = !!o, x = $(null), Q = $(null), M = $(null), [R, D] = Z(null), { canBringForward: H, canSendBack: z } = (() => {
     var rn, An;
     const U = Ln(y, n.id);
     if (!U) return { canBringForward: !1, canSendBack: !1 };
@@ -10453,14 +10453,14 @@ function bt({ el: n, zoom: r, sectionWidth: i, sectionHeight: a, parentId: o })
     return { canBringForward: W >= 0 && W < O.length - 1, canSendBack: W > 0 };
   })();
   an(() => {
-    if (!T) return;
+    if (!R) return;
     const U = () => D(null), O = (W) => {
       W.key === "Escape" && U();
     };
     return window.addEventListener("mousedown", U), window.addEventListener("keydown", O), () => {
       window.removeEventListener("mousedown", U), window.removeEventListener("keydown", O);
     };
-  }, [T]);
+  }, [R]);
   const q = (U) => {
     U.preventDefault(), U.stopPropagation(), f(n.id), D({ x: U.clientX, y: U.clientY });
   };
@@ -10524,7 +10524,7 @@ function bt({ el: n, zoom: r, sectionWidth: i, sectionHeight: a, parentId: o })
       x.current = null, k(), window.removeEventListener("mousemove", Mn), window.removeEventListener("mouseup", On);
     };
     window.addEventListener("mousemove", Mn), window.addEventListener("mouseup", On);
-  }, L = (U, O) => {
+  }, G = (U, O) => {
     U.stopPropagation(), U.preventDefault(), Q.current = { handle: O, mx: U.clientX, my: U.clientY, x: n.x, y: n.y, w: n.width, h: n.height };
     let W = !1;
     const rn = (pn) => {
@@ -10551,7 +10551,7 @@ function bt({ el: n, zoom: r, sectionWidth: i, sectionHeight: a, parentId: o })
     if (W.type === "pagebreak") return;
     const rn = U.currentTarget.getBoundingClientRect(), An = W.width ?? 120, pn = W.height ?? 24, mn = wn(Math.round((U.clientX - rn.left) / r), 0, Math.max(0, n.width - An)), Mn = wn(Math.round((U.clientY - rn.top) / r), 0, Math.max(0, n.height - pn));
     l(n.id, { ...W, x: mn, y: Mn, width: An, height: pn });
-  }, $ = E ? s0 : P ? l0 : yr, Y = C && n.type === "container" && n.dataSource ? n.dataSource : null, F = T ? Math.min(T.x, window.innerWidth - 184) : 0, R = T ? Math.min(T.y, window.innerHeight - 134) : 0;
+  }, nn = E ? s0 : P ? l0 : yr, Y = C && n.type === "container" && n.dataSource ? n.dataSource : null, F = R ? Math.min(R.x, window.innerWidth - 184) : 0, T = R ? Math.min(R.y, window.innerHeight - 134) : 0;
   return /* @__PURE__ */ m(X, { children: [
     /* @__PURE__ */ m(
       "div",
@@ -10610,19 +10610,19 @@ function bt({ el: n, zoom: r, sectionWidth: i, sectionHeight: a, parentId: o })
             Y,
             "[ ]"
           ] }),
-          I && !n.locked && !v && $.map((U) => /* @__PURE__ */ e(
+          I && !n.locked && !v && nn.map((U) => /* @__PURE__ */ e(
             "div",
             {
               className: "resize-handle",
               style: { ...U },
-              onMouseDown: (O) => L(O, U.id)
+              onMouseDown: (O) => G(O, U.id)
             },
             U.id
           ))
         ]
       }
     ),
-    T && fr(
+    R && fr(
       /* @__PURE__ */ e(
         "div",
         {
@@ -10630,7 +10630,7 @@ function bt({ el: n, zoom: r, sectionWidth: i, sectionHeight: a, parentId: o })
           style: {
             position: "fixed",
             left: F,
-            top: R,
+            top: T,
             zIndex: 99999,
             background: "var(--panel)",
             border: "1px solid var(--border-h)",
@@ -10657,10 +10657,10 @@ function bt({ el: n, zoom: r, sectionWidth: i, sectionHeight: a, parentId: o })
               p(), D(null);
             } }),
             /* @__PURE__ */ e("div", { style: { height: 1, background: "var(--border)", margin: "4px 0" } }),
-            /* @__PURE__ */ e(Ce, { label: "Bring Forward", hint: "Ctrl+]", disabled: !z, onClick: () => {
+            /* @__PURE__ */ e(Ce, { label: "Bring Forward", hint: "Ctrl+]", disabled: !H, onClick: () => {
               g(), D(null);
             } }),
-            /* @__PURE__ */ e(Ce, { label: "Send Back", hint: "Ctrl+[", disabled: !H, onClick: () => {
+            /* @__PURE__ */ e(Ce, { label: "Send Back", hint: "Ctrl+[", disabled: !z, onClick: () => {
               b(), D(null);
             } })
           ] })
@@ -10706,22 +10706,22 @@ const A0 = {
   { id: "se", cursor: "se-resize", bottom: -5, right: -5 }
 ];
 function g0({ wm: n, pageWidth: r, pageHeight: i, zoom: a, updateWm: o, editable: u }) {
-  const A = nn(null), f = nn(null), d = nn(null), [t, s] = Z([]), c = (v, E, P) => Math.max(E, Math.min(P, v)), l = n.imageSrc ?? "", h = n.logoWidth ?? 200, p = n.logoHeight ?? 200, g = n.logoX ?? Math.round((r - h) / 2), b = n.logoY ?? Math.round((i - p) / 2), y = 6, w = (v, E) => {
+  const A = $(null), f = $(null), d = $(null), [t, s] = Z([]), c = (v, E, P) => Math.max(E, Math.min(P, v)), l = n.imageSrc ?? "", h = n.logoWidth ?? 200, p = n.logoHeight ?? 200, g = n.logoX ?? Math.round((r - h) / 2), b = n.logoY ?? Math.round((i - p) / 2), y = 6, w = (v, E) => {
     const P = [0, r / 2, r], C = [0, i / 2, i], S = [v, v + h / 2, v + h], x = [E, E + p / 2, E + p];
     let Q = v, M = E;
-    const T = [];
-    let D = 1 / 0, z = null;
-    for (const N of S) for (const L of P) {
-      const j = L - N;
-      Math.abs(j) < Math.abs(D) && (D = j, z = L);
-    }
-    Math.abs(D) <= y && z !== null && (Q = v + D, T.push({ axis: "v", pos: z }));
-    let H = 1 / 0, q = null;
-    for (const N of x) for (const L of C) {
-      const j = L - N;
-      Math.abs(j) < Math.abs(H) && (H = j, q = L);
-    }
-    return Math.abs(H) <= y && q !== null && (M = E + H, T.push({ axis: "h", pos: q })), { x: Q, y: M, guides: T };
+    const R = [];
+    let D = 1 / 0, H = null;
+    for (const N of S) for (const G of P) {
+      const j = G - N;
+      Math.abs(j) < Math.abs(D) && (D = j, H = G);
+    }
+    Math.abs(D) <= y && H !== null && (Q = v + D, R.push({ axis: "v", pos: H }));
+    let z = 1 / 0, q = null;
+    for (const N of x) for (const G of C) {
+      const j = G - N;
+      Math.abs(j) < Math.abs(z) && (z = j, q = G);
+    }
+    return Math.abs(z) <= y && q !== null && (M = E + z, R.push({ axis: "h", pos: q })), { x: Q, y: M, guides: R };
   };
   if (!l)
     return u ? /* @__PURE__ */ e("div", { style: {
@@ -10763,8 +10763,8 @@ function g0({ wm: n, pageWidth: r, pageHeight: i, zoom: a, updateWm: o, editable
       const x = d.current;
       if (!x) return;
       const Q = (S.clientX - x.mx) / a, M = (S.clientY - x.my) / a;
-      let T = x.x, D = x.y, z = x.w, H = x.h;
-      E.includes("e") && (z = Math.max(20, x.w + Q)), E.includes("w") && (z = Math.max(20, x.w - Q), T = x.x + (x.w - z)), E.includes("s") && (H = Math.max(20, x.h + M)), E.includes("n") && (H = Math.max(20, x.h - M), D = x.y + (x.h - H)), T = c(Math.round(T), 0, r - 20), D = c(Math.round(D), 0, i - 20), z = c(Math.round(z), 20, r - T), H = c(Math.round(H), 20, i - D), o({ logoX: T, logoY: D, logoWidth: z, logoHeight: H });
+      let R = x.x, D = x.y, H = x.w, z = x.h;
+      E.includes("e") && (H = Math.max(20, x.w + Q)), E.includes("w") && (H = Math.max(20, x.w - Q), R = x.x + (x.w - H)), E.includes("s") && (z = Math.max(20, x.h + M)), E.includes("n") && (z = Math.max(20, x.h - M), D = x.y + (x.h - z)), R = c(Math.round(R), 0, r - 20), D = c(Math.round(D), 0, i - 20), H = c(Math.round(H), 20, r - R), z = c(Math.round(z), 20, i - D), o({ logoX: R, logoY: D, logoWidth: H, logoHeight: z });
     }, C = () => {
       d.current = null, window.removeEventListener("mousemove", P), window.removeEventListener("mouseup", C);
     };
@@ -10920,8 +10920,8 @@ function cr({
   ] });
 }
 function m0() {
-  var R, U, O, W, rn, An, pn, mn, Mn, On, K;
-  const { template: n, zoom: r, selectElement: i, setSelectedIds: a, addElement: o, activeSection: u, updatePage: A } = en(), f = nn(null), d = nn(null), t = nn(null), { guides: s, elBounds: c } = Gi(), [l, h] = Z(null), p = nn(null), g = (J, dn, bn) => {
+  var T, U, O, W, rn, An, pn, mn, Mn, On, K;
+  const { template: n, zoom: r, selectElement: i, setSelectedIds: a, addElement: o, activeSection: u, updatePage: A } = en(), f = $(null), d = $(null), t = $(null), { guides: s, elBounds: c } = Gi(), [l, h] = Z(null), p = $(null), g = (J, dn, bn) => {
     const vn = J.getBoundingClientRect();
     return { x: (dn - vn.left) / r, y: (bn - vn.top) / r };
   }, b = (J) => (dn) => {
@@ -10946,21 +10946,21 @@ function m0() {
       br.length > 0 ? a(br) : i(null);
     };
     window.addEventListener("mousemove", gn), window.addEventListener("mouseup", on);
-  }, y = n.page ?? {}, w = y.size ?? "A4", k = y.orientation === "landscape", B = y.margin ?? { top: 0, right: 0, bottom: 0, left: 0 }, [I, v] = A0[w] ?? [794, 1123], E = k ? v : I, P = k ? I : v, C = y.customHeight ?? P, S = B.left ?? 0, x = B.right ?? 0, Q = B.top ?? 0, M = B.bottom ?? 0, T = Math.max(100, E - S - x), D = Math.max(200, C - Q - M), z = ((R = n.header) == null ? void 0 : R.enabled) !== !1, H = ((U = n.footer) == null ? void 0 : U.enabled) !== !1, q = z ? ((O = n.header) == null ? void 0 : O.height) ?? 60 : 0, N = H ? ((W = n.footer) == null ? void 0 : W.height) ?? 40 : 0, L = Math.max(100, D - q - N), j = (J, dn, bn) => (vn) => {
+  }, y = n.page ?? {}, w = y.size ?? "A4", k = y.orientation === "landscape", B = y.margin ?? { top: 0, right: 0, bottom: 0, left: 0 }, [I, v] = A0[w] ?? [794, 1123], E = k ? v : I, P = k ? I : v, C = y.customHeight ?? P, S = B.left ?? 0, x = B.right ?? 0, Q = B.top ?? 0, M = B.bottom ?? 0, R = Math.max(100, E - S - x), D = Math.max(200, C - Q - M), H = ((T = n.header) == null ? void 0 : T.enabled) !== !1, z = ((U = n.footer) == null ? void 0 : U.enabled) !== !1, q = H ? ((O = n.header) == null ? void 0 : O.height) ?? 60 : 0, N = z ? ((W = n.footer) == null ? void 0 : W.height) ?? 40 : 0, G = Math.max(100, D - q - N), j = (J, dn, bn) => (vn) => {
     vn.preventDefault();
     const Qn = vn.dataTransfer.getData("application/reportforge");
     if (!Qn) return;
-    const gn = JSON.parse(Qn), on = J.current.getBoundingClientRect(), sn = gn.width ?? 200, tn = gn.height ?? 30, ln = gn.type === "pagebreak", fn = ln ? 0 : Math.max(0, Math.min(Math.round((vn.clientX - on.left) / r), T - sn));
+    const gn = JSON.parse(Qn), on = J.current.getBoundingClientRect(), sn = gn.width ?? 200, tn = gn.height ?? 30, ln = gn.type === "pagebreak", fn = ln ? 0 : Math.max(0, Math.min(Math.round((vn.clientX - on.left) / r), R - sn));
     let In = Math.max(0, Math.min(Math.round((vn.clientY - on.top) / r), bn - tn));
-    const Rn = $[dn];
+    const Rn = nn[dn];
     if (ln)
       for (const un of Rn)
         un.type !== "pagebreak" && In < un.y + un.height && In + tn > un.y && (In = un.y + un.height);
     else
       for (const un of Rn)
         un.type === "pagebreak" && In < un.y + un.height && In + tn > un.y && (In = un.y + un.height);
-    In = Math.max(0, Math.min(In, bn - tn)), o({ ...gn, x: fn, y: In, width: ln ? T : sn });
-  }, $ = {
+    In = Math.max(0, Math.min(In, bn - tn)), o({ ...gn, x: fn, y: In, width: ln ? R : sn });
+  }, nn = {
     header: ((rn = n.header) == null ? void 0 : rn.elements) ?? [],
     body: n.body.elements,
     footer: ((An = n.footer) == null ? void 0 : An.elements) ?? []
@@ -10993,15 +10993,15 @@ function m0() {
       position: "absolute",
       top: Q,
       left: S,
-      width: T,
+      width: R,
       background: "white"
     }, children: [
-      z ? /* @__PURE__ */ m(
+      H ? /* @__PURE__ */ m(
         "div",
         {
           ref: f,
           style: {
-            width: T,
+            width: R,
             height: q,
             position: "relative",
             background: "#ffffff",
@@ -11012,7 +11012,7 @@ function m0() {
           onMouseDown: Y("header") ? b("header") : void 0,
           children: [
             ((Mn = n.page) == null ? void 0 : Mn.showGrid) !== !1 && /* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0, backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px)", backgroundSize: "20px 20px" } }),
-            $.header.map((J) => /* @__PURE__ */ e(bt, { el: J, zoom: r, sectionWidth: T, sectionHeight: q }, J.id)),
+            nn.header.map((J) => /* @__PURE__ */ e(bt, { el: J, zoom: r, sectionWidth: R, sectionHeight: q }, J.id)),
             Y("header") && /* @__PURE__ */ e(cr, { guides: s, elBounds: c }),
             (l == null ? void 0 : l.section) === "header" && /* @__PURE__ */ e(ur, { x1: l.x1, y1: l.y1, x2: l.x2, y2: l.y2 }),
             !Y("header") && /* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.07)", zIndex: 10, cursor: "default" } })
@@ -11024,14 +11024,14 @@ function m0() {
         {
           ref: d,
           style: {
-            width: T,
-            height: L,
+            width: R,
+            height: G,
             position: "relative",
             background: "#ffffff",
             outline: "none",
             outlineOffset: -1
           },
-          onDrop: Y("body") ? j(d, "body", L) : void 0,
+          onDrop: Y("body") ? j(d, "body", G) : void 0,
           onDragOver: Y("body") ? (J) => J.preventDefault() : void 0,
           onMouseDown: Y("body") ? b("body") : void 0,
           children: [
@@ -11043,19 +11043,19 @@ function m0() {
               backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px)",
               backgroundSize: "20px 20px"
             } }),
-            $.body.map((J) => /* @__PURE__ */ e(bt, { el: J, zoom: r, sectionWidth: T, sectionHeight: L }, J.id)),
+            nn.body.map((J) => /* @__PURE__ */ e(bt, { el: J, zoom: r, sectionWidth: R, sectionHeight: G }, J.id)),
             Y("body") && /* @__PURE__ */ e(cr, { guides: s, elBounds: c }),
             (l == null ? void 0 : l.section) === "body" && /* @__PURE__ */ e(ur, { x1: l.x1, y1: l.y1, x2: l.x2, y2: l.y2 }),
             !Y("body") && /* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.07)", zIndex: 10, cursor: "default" } })
           ]
         }
       ),
-      H ? /* @__PURE__ */ m(
+      z ? /* @__PURE__ */ m(
         "div",
         {
           ref: t,
           style: {
-            width: T,
+            width: R,
             height: N,
             position: "relative",
             background: "#ffffff",
@@ -11066,7 +11066,7 @@ function m0() {
           onMouseDown: Y("footer") ? b("footer") : void 0,
           children: [
             ((K = n.page) == null ? void 0 : K.showGrid) !== !1 && /* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0, backgroundImage: "radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px)", backgroundSize: "20px 20px" } }),
-            $.footer.map((J) => /* @__PURE__ */ e(bt, { el: J, zoom: r, sectionWidth: T, sectionHeight: N }, J.id)),
+            nn.footer.map((J) => /* @__PURE__ */ e(bt, { el: J, zoom: r, sectionWidth: R, sectionHeight: N }, J.id)),
             Y("footer") && /* @__PURE__ */ e(cr, { guides: s, elBounds: c }),
             (l == null ? void 0 : l.section) === "footer" && /* @__PURE__ */ e(ur, { x1: l.x1, y1: l.y1, x2: l.x2, y2: l.y2 }),
             !Y("footer") && /* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0, background: "rgba(0,0,0,0.07)", zIndex: 10, cursor: "default" } })
@@ -114693,7 +114693,7 @@ function di(n) {
   }), r;
 }
 function E0(n, r) {
-  const [i, a] = Z(""), [o, u] = Z(!0), [A, f] = Z(""), d = nn(null), t = nn(!1), s = nn("");
+  const [i, a] = Z(""), [o, u] = Z(!0), [A, f] = Z(""), d = $(null), t = $(!1), s = $("");
   return an(() => {
     if (typeof Worker > "u") {
       u(!1), f("PDF preview requires a browser environment.");
@@ -114842,7 +114842,7 @@ function x0({ onClose: n } = {}) {
   const { template: r, previewData: i, setPreviewData: a } = en(), [o, u] = Z(() => ({
     template: di(r),
     data: Ai(i)
-  })), [A, f] = Z(!1), [d, t] = Z(""), s = nn(null), c = nn({ template: r, previewData: i });
+  })), [A, f] = Z(!1), [d, t] = Z(""), s = $(null), c = $({ template: r, previewData: i });
   an(() => {
     if (!(c.current.template === r && c.current.previewData === i))
       return c.current = { template: r, previewData: i }, s.current && clearTimeout(s.current), s.current = setTimeout(() => {
@@ -114938,9 +114938,9 @@ function B0(n) {
   };
 }
 function fi(n, r) {
-  const i = nn(r);
+  const i = $(r);
   i.current = r;
-  const a = nn(!0);
+  const a = $(!0);
   an(() => {
     var o;
     if (a.current) {
@@ -114980,39 +114980,39 @@ function M0({
     setPreviewData: C,
     setTheme: S,
     setZoom: x
-  } = c, Q = nn(P);
+  } = c, Q = $(P);
   Q.current = P;
-  const M = nn(void 0);
+  const M = $(void 0);
   an(() => {
     !n || n === M.current || (M.current = n, Q.current(n));
   }, [n]), uo(() => {
     d !== void 0 && x(d);
   }, []);
-  const T = r === void 0 ? void 0 : typeof r == "string" ? r : JSON.stringify(r, null, 2);
+  const R = r === void 0 ? void 0 : typeof r == "string" ? r : JSON.stringify(r, null, 2), D = $(void 0);
   return an(() => {
-    T !== void 0 && T !== E && C(T);
-  }, [T, E, C]), an(() => {
+    R === void 0 || R === D.current || (D.current = R, C(R));
+  }, [R, C]), an(() => {
     a && a !== v && S(a);
   }, [a, v, S]), fi(E, i), fi(v, o), an(() => {
     document.documentElement.setAttribute("data-theme", v);
   }, [v]), an(() => {
-    const D = (z) => {
-      var q, N;
+    const H = (z) => {
+      var N, G;
       if (z.key === "Escape") {
         B && I();
         return;
       }
-      const H = z.target.tagName;
-      if (!(H === "INPUT" || H === "TEXTAREA" || H === "SELECT") && !z.target.isContentEditable && ((z.metaKey || z.ctrlKey) && z.key === "z" && (z.preventDefault(), l()), (z.metaKey || z.ctrlKey) && (z.key === "y" || z.shiftKey && z.key === "z") && (z.preventDefault(), h()), (z.metaKey || z.ctrlKey) && z.key === "c" && (z.preventDefault(), b()), (z.metaKey || z.ctrlKey) && z.key === "v" && (z.preventDefault(), y()), (z.metaKey || z.ctrlKey) && z.key === "d" && (z.preventDefault(), g()), (z.metaKey || z.ctrlKey) && z.key === "]" && (z.preventDefault(), w()), (z.metaKey || z.ctrlKey) && z.key === "[" && (z.preventDefault(), k()), (z.key === "Delete" || z.key === "Backspace") && p(), z.key === "ArrowUp" || z.key === "ArrowDown" || z.key === "ArrowLeft" || z.key === "ArrowRight")) {
-        const { selectedId: L, updateElement: j } = c;
-        if (!L) return;
+      const q = z.target.tagName;
+      if (!(q === "INPUT" || q === "TEXTAREA" || q === "SELECT") && !z.target.isContentEditable && ((z.metaKey || z.ctrlKey) && z.key === "z" && (z.preventDefault(), l()), (z.metaKey || z.ctrlKey) && (z.key === "y" || z.shiftKey && z.key === "z") && (z.preventDefault(), h()), (z.metaKey || z.ctrlKey) && z.key === "c" && (z.preventDefault(), b()), (z.metaKey || z.ctrlKey) && z.key === "v" && (z.preventDefault(), y()), (z.metaKey || z.ctrlKey) && z.key === "d" && (z.preventDefault(), g()), (z.metaKey || z.ctrlKey) && z.key === "]" && (z.preventDefault(), w()), (z.metaKey || z.ctrlKey) && z.key === "[" && (z.preventDefault(), k()), (z.key === "Delete" || z.key === "Backspace") && p(), z.key === "ArrowUp" || z.key === "ArrowDown" || z.key === "ArrowLeft" || z.key === "ArrowRight")) {
+        const { selectedId: j, updateElement: nn } = c;
+        if (!j) return;
         z.preventDefault();
-        const $ = z.shiftKey ? 10 : 1, Y = z.key === "ArrowLeft" ? -$ : z.key === "ArrowRight" ? $ : 0, F = z.key === "ArrowUp" ? -$ : z.key === "ArrowDown" ? $ : 0, R = [...((q = c.template.header) == null ? void 0 : q.elements) ?? [], ...c.template.body.elements, ...((N = c.template.footer) == null ? void 0 : N.elements) ?? []].find((U) => U.id === L);
-        if (!R) return;
-        j(L, { x: R.x + Y, y: R.y + F });
+        const Y = z.shiftKey ? 10 : 1, F = z.key === "ArrowLeft" ? -Y : z.key === "ArrowRight" ? Y : 0, T = z.key === "ArrowUp" ? -Y : z.key === "ArrowDown" ? Y : 0, U = [...((N = c.template.header) == null ? void 0 : N.elements) ?? [], ...c.template.body.elements, ...((G = c.template.footer) == null ? void 0 : G.elements) ?? []].find((O) => O.id === j);
+        if (!U) return;
+        nn(j, { x: U.x + F, y: U.y + T });
       }
     };
-    return window.addEventListener("keydown", D), () => window.removeEventListener("keydown", D);
+    return window.addEventListener("keydown", H), () => window.removeEventListener("keydown", H);
   }, [l, h, p, g, b, y, w, k, B, I, c]), /* @__PURE__ */ m(
     "div",
     {
@@ -115031,8 +115031,8 @@ function M0({
           {
             className: "fixed inset-0 flex items-center justify-center",
             style: { background: "rgba(0,0,0,0.82)", backdropFilter: "blur(12px)", zIndex: 9999 },
-            onMouseDown: (D) => {
-              D.target === D.currentTarget && I();
+            onMouseDown: (H) => {
+              H.target === H.currentTarget && I();
             },
             children: /* @__PURE__ */ e(
               "div",