react-edit-to-html 1.2.4 → 1.2.6

package/dist/index.cjs

@@ -55,7 +55,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
     <rect width="100%" height="100%" fill="white" />
     <g>${o}</g>
     <text x="${a/2}" y="67" font-family="monospace" font-size="10" text-anchor="middle" fill="black">${n}</text>
-  </svg>`},vb=(e,t)=>{let n=`11px`,r=`400`;return e===`h1`?(n=`24px`,r=`700`):e===`h2`?(n=`20px`,r=`700`):e===`h3`?(n=`16px`,r=`600`):e===`h4`?(n=`14px`,r=`600`):e===`h5`?(n=`12px`,r=`600`):e===`h6`?(n=`10px`,r=`600`):e===`title`?(n=`28px`,r=`800`):e===`subtitle`?(n=`14px`,r=`300`):e===`caption`&&(n=`9px`,r=`400`),{id:`block-${Math.random().toString(36).substr(2,9)}`,type:e,content:t,style:{fontSize:n,fontWeight:r,color:`#1e293b`,backgroundColor:`transparent`,textAlign:`left`,bold:[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`,`title`].includes(e),italic:!1,underline:!1,strikethrough:!1,width:`100%`,marginBottom:`8px`,padding:`8px`,minHeight:`auto`}}},yb=e=>{let t=new DOMParser().parseFromString(e,`text/html`),n=[],r=Array.from(t.body.children);if(r.length===0){let e=t.body.innerText||t.body.textContent||``;e.trim()&&n.push(vb(`p`,e.trim()))}else{let e=t.querySelectorAll(`style`),i=[];e.forEach(e=>{let t=e.textContent||``,n=/([^{]+)\{([^}]+)\}/g,r;for(;(r=n.exec(t))!==null;){let e=r[1].trim(),t=r[2].trim(),n={};t.split(`;`).forEach(e=>{let t=e.split(`:`);t.length===2&&(n[t[0].trim().toLowerCase()]=t[1].trim())}),i.push({selector:e,styles:n})}});let a=e=>{let t={fontSize:`11px`,fontWeight:`400`,color:`#1e293b`,backgroundColor:`transparent`,textAlign:`left`,bold:!1,italic:!1,underline:!1,strikethrough:!1,width:`100%`,marginBottom:`8px`,padding:`8px`},n=e.style;return n.fontSize&&(t.fontSize=n.fontSize),n.fontWeight&&(t.fontWeight=n.fontWeight),n.color&&(t.color=n.color),n.backgroundColor&&(t.backgroundColor=n.backgroundColor),n.textAlign&&(t.textAlign=n.textAlign),n.padding&&(t.padding=n.padding),n.marginBottom&&(t.marginBottom=n.marginBottom),n.width&&(t.width=n.width),i.forEach(n=>{try{e.matches(n.selector)&&(n.styles[`font-size`]&&(t.fontSize=n.styles[`font-size`]),n.styles[`font-weight`]&&(t.fontWeight=n.styles[`font-weight`]),n.styles.color&&(t.color=n.styles.color),n.styles[`background-color`]&&(t.backgroundColor=n.styles[`background-color`]),n.styles[`text-align`]&&(t.textAlign=n.styles[`text-align`]),n.styles.padding&&(t.padding=n.styles.padding),n.styles[`margin-bottom`]&&(t.marginBottom=n.styles[`margin-bottom`]),n.styles.width&&(t.width=n.styles.width))}catch(e){}}),(t.fontWeight===`bold`||parseInt(t.fontWeight)>=600)&&(t.bold=!0),t};r.forEach(e=>{let t=e;if(t.tagName===`STYLE`)return;let r=t.querySelector(`table, img, h1, h2, h3, h4, h5, h6, p, span, div`)||t,i=r.tagName.toLowerCase(),o=a(r);if(i===`table`){let e=Array.from(r.querySelectorAll(`thead th`));e.length===0&&(e=Array.from(r.querySelectorAll(`tr:first-child th, tr:first-child td`)));let t=e.map(e=>{var t,n;return{columnName:((t=e.textContent)==null?void 0:t.trim())||`Header`,placeholder:`{{item.${((n=e.textContent)==null?void 0:n.trim().toLowerCase().replace(/\s+/g,`_`))||`field`}}}`,enabled:!0}});n.push({id:`block-${Math.random().toString(36).substr(2,9)}`,type:`table`,content:``,style:o,tableInfo:{tableName:`imported_table`,columns:t,loop:!0,isNestable:!1,parentPath:`items`,maxNestingDepth:5,nestingPrefix:` `,showNestingLevel:!1}})}else if(i===`img`)n.push({id:`block-${Math.random().toString(36).substr(2,9)}`,type:`image`,content:``,style:o,imageInfo:{imageType:`logo`,url:r.getAttribute(`src`)||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`}});else if(i===`svg`)n.push({id:`block-${Math.random().toString(36).substr(2,9)}`,type:`image`,content:``,style:o,imageInfo:{imageType:`barcode`,barcodeValue:`SHIP-99201`,barcodePlaceholder:`{{barcode}}`}});else{let e=`p`;[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`].includes(i)?e=i:i===`span`&&(e=`caption`),n.push({id:`block-${Math.random().toString(36).substr(2,9)}`,type:e,content:r.innerHTML||r.textContent||``,style:o})}})}return n},bb=function(){var e=_(function*(e,t){let n=yield t.getDocument({data:new Uint8Array(e)}).promise,r=[],i=Math.min(n.numPages,3);for(let e=1;e<=i;e++){let t=(yield(yield n.getPage(e)).getTextContent()).items.map(e=>({text:e.str,x:e.transform[4],y:e.transform[5],fontSize:e.transform[3]})).filter(e=>e.text.trim()!==``);if(t.length===0)continue;t.sort((e,t)=>Math.abs(e.y-t.y)<6?e.x-t.x:t.y-e.y);let i=[],a=[];if(t.forEach(e=>{if(a.length===0)a.push(e);else{let t=a[a.length-1];if(Math.abs(e.y-t.y)<6)a.push(e);else{let t=a.map(e=>e.text).join(` `),n=a.reduce((e,t)=>e+t.y,0)/a.length,r=Math.max(...a.map(e=>e.fontSize));i.push({y:n,fontSize:r,text:t}),a=[e]}}}),a.length>0){let e=a.map(e=>e.text).join(` `),t=a.reduce((e,t)=>e+t.y,0)/a.length,n=Math.max(...a.map(e=>e.fontSize));i.push({y:t,fontSize:n,text:e})}i.forEach(e=>{let t=`p`,n=e.fontSize>16;n?t=e.fontSize>26?`h1`:e.fontSize>20?`h2`:`h3`:e.fontSize<10&&(t=`caption`);let i=Math.round(e.fontSize*1.15)+`px`;r.push({id:`pdf-block-${Math.random().toString(36).substr(2,9)}`,type:t,content:e.text,style:{fontSize:i,fontWeight:n?`700`:`400`,color:`#1e293b`,backgroundColor:`transparent`,textAlign:`left`,bold:n,italic:!1,underline:!1,strikethrough:!1}})})}return r});return function(t,n){return e.apply(this,arguments)}}();function xb({initialBlocks:e,defaultStyles:t,defaultLogo:n,defaultBanner:r,onChange:i}={}){let[a,o]=(0,l.useState)(e||[]),[s,c]=(0,l.useState)(null);(0,l.useEffect)(()=>{i&&i(a)},[a,i]);let u=()=>a.find(e=>e.id===s)||null,d=(e,t,n)=>{let r={};return e===`title`?r={fontSize:`24px`,fontWeight:`800`}:e===`subtitle`?r={fontSize:`14px`,fontWeight:`700`,color:`#64748b`}:e===`h1`?r={fontSize:`20px`,fontWeight:`800`}:e===`h2`?r={fontSize:`18px`,fontWeight:`700`}:e===`h3`?r={fontSize:`16px`,fontWeight:`600`}:e===`caption`&&(r={fontSize:`10px`,color:`#94a3b8`}),{id:Math.random().toString(36).substring(2,11),type:e,content:t,style:w(w({fontSize:`12px`,fontWeight:`normal`,textAlign:`left`,color:`#1e293b`,backgroundColor:`transparent`,marginBottom:`0px`,padding:`0px`,bold:!1,italic:!1,underline:!1,strikethrough:!1},r),n)}},f=e=>w(w({},e),{},{columns:e.columns?e.columns.map(f):void 0});return{blocks:a,setBlocks:o,selectedBlockId:s,setSelectedBlockId:c,getSelectedBlock:u,createTextBlock:d,createTableBlock:e=>({id:Math.random().toString(36).substring(2,11),type:`table`,content:``,style:w({fontSize:`11px`,fontWeight:`normal`,textAlign:`left`,color:`#334155`,backgroundColor:`transparent`,marginBottom:`0px`,padding:`0px`,bold:!1,italic:!1,underline:!1,strikethrough:!1},(t==null?void 0:t.table)||{}),tableInfo:w(w({},e),{},{columns:e.columns.map(f),mockRows:[]})}),createImageBlock:e=>{let i=`100%`,a=`120px`;return e===`logo`?(i=`120px`,a=`60px`):e===`banner`?(i=`100%`,a=`150px`):e===`barcode`?(i=`200px`,a=`80px`):e===`watermark`&&(i=`300px`,a=`300px`),{id:Math.random().toString(36).substring(2,11),type:`image`,content:``,style:w(w({fontSize:`12px`,fontWeight:`normal`,color:`#000055`,backgroundColor:`transparent`,textAlign:`center`,marginBottom:`0px`,padding:`0px`,width:i,height:a,minHeight:a,bold:!1,italic:!1,underline:!1,strikethrough:!1},(t==null?void 0:t.image)||{}),e===`watermark`?{opacity:`0.2`,position:`absolute`,top:`0`,left:`0`,zIndex:10,height:`100%`}:{}),imageInfo:{imageType:e,url:e===`logo`?n||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`:e===`banner`?r||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`:fb,barcodeValue:e===`barcode`?`SHIP-99201`:void 0,barcodePlaceholder:e===`barcode`?`{{barcode}}`:void 0}}},handleDeleteBlock:e=>{o(t=>t.filter(t=>t.id!==e)),s===e&&c(null)},handleDuplicateBlock:e=>{let t=a.find(t=>t.id===e);if(!t)return;let n=w(w({},t),{},{id:Math.random().toString(36).substring(2,11),style:w({},t.style),tableInfo:t.tableInfo?w(w({},t.tableInfo),{},{columns:t.tableInfo.columns.map(f),mockRows:t.tableInfo.mockRows?[...t.tableInfo.mockRows]:void 0}):void 0,imageInfo:t.imageInfo?w({},t.imageInfo):void 0}),r=a.findIndex(t=>t.id===e);o(e=>{let t=[...e];return t.splice(r+1,0,n),t}),c(n.id)},handleMoveBlockUp:e=>{e!==0&&o(t=>{let n=[...t],r=n[e];return n[e]=n[e-1],n[e-1]=r,n})},handleMoveBlockDown:e=>{e!==a.length-1&&o(t=>{let n=[...t],r=n[e];return n[e]=n[e+1],n[e+1]=r,n})},updateSelectedStyle:(e,t)=>{s&&o(n=>n.map(n=>n.id===s?w(w({},n),{},{style:w(w({},n.style),{},{[e]:t})}):n))},updateSelectedImageInfo:(e,t)=>{s&&o(i=>i.map(i=>{if(i.id===s&&i.type===`image`){let a={};return e===`imageType`&&(a=t===`logo`?{url:n||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`}:t===`banner`?{url:r||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`}:t===`barcode`?{barcodeValue:`SHIP-99201`,barcodePlaceholder:`{{barcode}}`}:{url:fb}),w(w({},i),{},{imageInfo:w(w({},i.imageInfo),{},{[e]:t},a)})}return i}))},handleRemoveTableColumn:(e,t)=>{s&&o(n=>n.map(n=>{if(n.id===s&&n.type===`table`&&n.tableInfo){var r;let i=[...n.tableInfo.columns];if(t!==void 0&&(r=i[e])!=null&&r.columns){let n=i[e].columns.filter((e,n)=>n!==t);i[e]=w(w({},i[e]),{},{columns:n})}else i.splice(e,1);return w(w({},n),{},{tableInfo:w(w({},n.tableInfo),{},{columns:i})})}return n}))},handleAddTableColumn:(e,t,n,r)=>{!s||!e.trim()||o(i=>i.map(i=>{if(i.id===s&&i.type===`table`&&i.tableInfo){let a=[...i.tableInfo.columns];if(r!==void 0&&a[r]){let n=a[r].columns||[];a[r]=w(w({},a[r]),{},{loop:!0,columns:[...n,{columnName:e.trim(),placeholder:t.trim(),enabled:!0}]})}else n?a.push({columnName:e.trim(),placeholder:t.trim(),enabled:!0,loop:!0,columns:[]}):a.push({columnName:e.trim(),placeholder:t.trim(),enabled:!0});return w(w({},i),{},{tableInfo:w(w({},i.tableInfo),{},{columns:a})})}return i}))},handleUpdateTableColumn:(e,t,n,r)=>{s&&o(i=>i.map(i=>{if(i.id===s&&i.type===`table`&&i.tableInfo){var a;let o=[...i.tableInfo.columns];if(r!==void 0&&(a=o[e])!=null&&a.columns){let i=[...o[e].columns];i[r]=w(w({},i[r]),{},{columnName:t.trim(),placeholder:n.trim()}),o[e]=w(w({},o[e]),{},{columns:i})}else o[e]&&(o[e]=w(w({},o[e]),{},{columnName:t.trim(),placeholder:n.trim()}));return w(w({},i),{},{tableInfo:w(w({},i.tableInfo),{},{columns:o})})}return i}))},handleReorderTableColumn:(e,t,n)=>{s&&o(r=>r.map(r=>{if(r.id===s&&r.type===`table`&&r.tableInfo){var i;let a=[...r.tableInfo.columns];if(n!==void 0&&(i=a[e])!=null&&i.columns){let r=[...a[e].columns],i=t===`up`?n-1:n+1;if(i>=0&&i<r.length){let t=r[n];r[n]=r[i],r[i]=t,a[e]=w(w({},a[e]),{},{columns:r})}}else{let n=t===`up`?e-1:e+1;if(n>=0&&n<a.length){let t=a[e];a[e]=a[n],a[n]=t}}return w(w({},r),{},{tableInfo:w(w({},r.tableInfo),{},{columns:a})})}return r}))},handleAddTableRow:e=>{let t=e||s;t&&o(e=>e.map(e=>{if(e.id===t&&e.type===`table`&&e.tableInfo){let t=e.tableInfo.columns||[],n=e.tableInfo.mockRows&&e.tableInfo.mockRows.length>0?e.tableInfo.mockRows:[{}],r={};return t.forEach(e=>{e.columnName&&(r[e.columnName]=e.placeholder||``)}),w(w({},e),{},{tableInfo:w(w({},e.tableInfo),{},{mockRows:[...n,r]})})}return e}))},handleRemoveTableRow:(e,t)=>{let n=t||s;n&&o(t=>t.map(t=>{if(t.id===n&&t.type===`table`&&t.tableInfo){let n=t.tableInfo.mockRows&&t.tableInfo.mockRows.length>0?t.tableInfo.mockRows:[{}];if(n.length<=1)return w(w({},t),{},{tableInfo:w(w({},t.tableInfo),{},{mockRows:[{}]})});let r=n.filter((t,n)=>n!==e);return w(w({},t),{},{tableInfo:w(w({},t.tableInfo),{},{mockRows:r})})}return t}))}}}function Sb(){let[e,t]=(0,l.useState)(.7),[n,r]=(0,l.useState)({x:0,y:0}),[i,a]=(0,l.useState)(!1),[o,s]=(0,l.useState)(!1),[c,u]=(0,l.useState)(1123),d=(0,l.useRef)({x:0,y:0}),f=(0,l.useRef)(null),p=(0,l.useRef)(null);return(0,l.useEffect)(()=>{let e=e=>{let t=document.activeElement,n=t&&(t.tagName===`INPUT`||t.tagName===`TEXTAREA`||t.getAttribute(`contenteditable`)===`true`);e.code===`Space`&&!n&&(s(!0),e.preventDefault())},t=e=>{e.code===`Space`&&s(!1)};return window.addEventListener(`keydown`,e),window.addEventListener(`keyup`,t),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`keyup`,t)}},[]),(0,l.useEffect)(()=>{if(!p.current)return;let e=new ResizeObserver(e=>{for(let t of e)u(t.target.scrollHeight)});return e.observe(p.current),()=>e.disconnect()},[]),{zoom:e,setZoom:t,panOffset:n,setPanOffset:r,isPanning:i,setIsPanning:a,spacePressed:o,setSpacePressed:s,canvasHeight:c,setCanvasHeight:u,viewportRef:f,canvasContainerRef:p,handleMouseDown:e=>{o&&(a(!0),d.current={x:e.clientX-n.x,y:e.clientY-n.y})},handleMouseMove:e=>{i&&o&&r({x:e.clientX-d.current.x,y:e.clientY-d.current.y})},handleMouseUp:()=>{a(!1)},handleZoomIn:()=>t(e=>Math.min(e+.1,2)),handleZoomOut:()=>t(e=>Math.max(e-.1,.5)),handleZoomReset:()=>{t(1),r({x:0,y:0})}}}function Cb({tableSchemas:e}={}){let[t,n]=(0,l.useState)(`invoice_items`),[r,i]=(0,l.useState)(`{% for item in invoice.items %}`),[a,o]=(0,l.useState)(`{% endfor %}`),[s,c]=(0,l.useState)(``),[u,d]=(0,l.useState)(``),[f,p]=(0,l.useState)(null),[m,h]=(0,l.useState)([]),[g,_]=(0,l.useState)(!1),[v,y]=(0,l.useState)(``),[b,x]=(0,l.useState)(null),[S,C]=(0,l.useState)(``),[T,E]=(0,l.useState)(null),[D,ee]=(0,l.useState)(null),[O,k]=(0,l.useState)(``),[te,A]=(0,l.useState)([]),ne=e=>({columnName:e.columnName||e.columnNameEn||e.columnNameDe||``,placeholder:e.placeholder||``,enabled:e.enabled!==!1,loop:!!e.loop,columns:Array.isArray(e.columns)?e.columns.map(ne):void 0});(0,l.useEffect)(()=>{e&&e.length>0?h(e.map(e=>w(w({},e),{},{columns:e.columns.map(ne)}))):h([])},[e]);let re=()=>{if(!t.trim())return;let e={tableName:t.trim().replace(/\s+/g,`_`).toLowerCase(),columns:[{columnName:`Description`,placeholder:`{{description}}`,enabled:!0},{columnName:`Qty`,placeholder:`{{quantity}}`,enabled:!0},{columnName:`Total Price`,placeholder:`{{total_price}}`,enabled:!0}],loop:!0,isNestable:!1,parentPath:`items`,maxNestingDepth:5,nestingPrefix:` `,showNestingLevel:!1,loopStartTag:r,loopEndTag:a};h(t=>[...t,e]),n(``)},j=()=>{if(!O.trim())return;let e=O.trim().toLowerCase().replace(/\s+/g,`_`);if(te.some(t=>t.imageType===e)){k(``);return}A(t=>[...t,{label:O.trim(),imageType:e,description:`Placeholder container for ${O.trim()}`}]),k(``)},ie=(e,t,n)=>{h(r=>r.map((r,i)=>{if(i===e){var a;let e=[...r.columns];if(n!==void 0&&(a=e[t])!=null&&a.columns){let r=[...e[t].columns];r[n]=w(w({},r[n]),{},{enabled:r[n].enabled===!1}),e[t]=w(w({},e[t]),{},{columns:r})}else e[t]=w(w({},e[t]),{},{enabled:e[t].enabled===!1});return w(w({},r),{},{columns:e})}return r}))},[ae,oe]=(0,l.useState)(null);return{customTableName:t,setCustomTableName:n,customLoopStart:r,setCustomLoopStart:i,customLoopEnd:a,setCustomLoopEnd:o,newColName:s,setNewColName:c,newColPlaceholder:u,setNewColPlaceholder:d,bubbleCoords:f,setBubbleCoords:p,schemas:m,setSchemas:h,isParsing:g,setIsParsing:_,parseStatusText:v,setParseStatusText:y,parseError:b,setParseError:x,draggedSidebarItem:T,setDraggedSidebarItem:E,dragOverIndex:D,setDragOverIndex:ee,newImgTypeName:O,setNewImgTypeName:k,customImageTypes:te,setCustomImageTypes:A,searchPlaceholder:S,setSearchPlaceholder:C,handleAddCustomTable:re,handleAddCustomImageType:j,toggleSchemaColumn:ie,applySelectionFormat:(e,t=``)=>{if(ae){let e=window.getSelection();e==null||e.removeAllRanges(),e==null||e.addRange(ae)}document.execCommand(e,!1,t),p(null)},setSavedRange:oe}}var wb=(...e)=>e.filter((e,t,n)=>!!e&&e.trim()!==``&&n.indexOf(e)===t).join(` `).trim(),Tb=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase(),Eb=e=>e.replace(/^([A-Z])|[\s-_]+(\w)/g,(e,t,n)=>n?n.toUpperCase():t.toLowerCase()),Db=e=>{let t=Eb(e);return t.charAt(0).toUpperCase()+t.slice(1)},Ob={xmlns:`http://www.w3.org/2000/svg`,width:24,height:24,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`},kb=e=>{for(let t in e)if(t.startsWith(`aria-`)||t===`role`||t===`title`)return!0;return!1},Ab=(0,l.createContext)({}),jb=()=>(0,l.useContext)(Ab);function Mb(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function Nb(e,t){if(e==null)return{};var n,r,i=Mb(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var Pb=[`color`,`size`,`strokeWidth`,`absoluteStrokeWidth`,`className`,`children`,`iconNode`],Fb=(0,l.forwardRef)((e,t)=>{var n,r,i;let{color:a,size:o,strokeWidth:s,absoluteStrokeWidth:c,className:u=``,children:d,iconNode:f}=e,p=Nb(e,Pb),{size:m=24,strokeWidth:h=2,absoluteStrokeWidth:g=!1,color:_=`currentColor`,className:v=``}=(n=jb())==null?{}:n,y=(c==null?g:c)?Number(s==null?h:s)*24/Number(o==null?m:o):s==null?h:s;return(0,l.createElement)(`svg`,w(w(w({ref:t},Ob),{},{width:(r=o==null?m:o)==null?Ob.width:r,height:(i=o==null?m:o)==null?Ob.height:i,stroke:a==null?_:a,strokeWidth:y,className:wb(`lucide`,v,u)},!d&&!kb(p)&&{"aria-hidden":`true`}),p),[...f.map(([e,t])=>(0,l.createElement)(e,t)),...Array.isArray(d)?d:[d]])}),Ib=[`className`],Lb=(e,t)=>{let n=(0,l.forwardRef)((n,r)=>{let{className:i}=n,a=Nb(n,Ib);return(0,l.createElement)(Fb,w({ref:r,iconNode:t,className:wb(`lucide-${Tb(Db(e))}`,`lucide-${e}`,i)},a))});return n.displayName=Db(e),n},Rb=Lb(`arrow-down`,[[`path`,{d:`M12 5v14`,key:`s699le`}],[`path`,{d:`m19 12-7 7-7-7`,key:`1idqje`}]]),zb=Lb(`arrow-up`,[[`path`,{d:`m5 12 7-7 7 7`,key:`hav0vg`}],[`path`,{d:`M12 19V5`,key:`x0mq9r`}]]),Bb=Lb(`barcode`,[[`path`,{d:`M3 5v14`,key:`1nt18q`}],[`path`,{d:`M8 5v14`,key:`1ybrkv`}],[`path`,{d:`M12 5v14`,key:`s699le`}],[`path`,{d:`M17 5v14`,key:`ycjyhj`}],[`path`,{d:`M21 5v14`,key:`nzette`}]]),Vb=Lb(`check`,[[`path`,{d:`M20 6 9 17l-5-5`,key:`1gmf2c`}]]),Hb=Lb(`copy`,[[`rect`,{width:`14`,height:`14`,x:`8`,y:`8`,rx:`2`,ry:`2`,key:`17jyea`}],[`path`,{d:`M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2`,key:`zix9uf`}]]),Ub=Lb(`download`,[[`path`,{d:`M12 15V3`,key:`m9g1x1`}],[`path`,{d:`M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4`,key:`ih7n3h`}],[`path`,{d:`m7 10 5 5 5-5`,key:`brsn70`}]]),Wb=Lb(`eye`,[[`path`,{d:`M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0`,key:`1nclc0`}],[`circle`,{cx:`12`,cy:`12`,r:`3`,key:`1v7zrd`}]]),Gb=Lb(`file-text`,[[`path`,{d:`M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z`,key:`1oefj6`}],[`path`,{d:`M14 2v5a1 1 0 0 0 1 1h5`,key:`wfsgrz`}],[`path`,{d:`M10 9H8`,key:`b1mrlr`}],[`path`,{d:`M16 13H8`,key:`t4e002`}],[`path`,{d:`M16 17H8`,key:`z1uh3a`}]]),Kb=Lb(`image`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,ry:`2`,key:`1m3agn`}],[`circle`,{cx:`9`,cy:`9`,r:`2`,key:`af1f0g`}],[`path`,{d:`m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21`,key:`1xmnt7`}]]),qb=Lb(`pencil`,[[`path`,{d:`M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z`,key:`1a8usu`}],[`path`,{d:`m15 5 4 4`,key:`1mk7zo`}]]),Jb=Lb(`plus`,[[`path`,{d:`M5 12h14`,key:`1ays0h`}],[`path`,{d:`M12 5v14`,key:`s699le`}]]),Yb=Lb(`printer`,[[`path`,{d:`M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2`,key:`143wyd`}],[`path`,{d:`M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6`,key:`1itne7`}],[`rect`,{x:`6`,y:`14`,width:`12`,height:`8`,rx:`1`,key:`1ue0tg`}]]),Xb=Lb(`search`,[[`path`,{d:`m21 21-4.34-4.34`,key:`14j7rj`}],[`circle`,{cx:`11`,cy:`11`,r:`8`,key:`4ej97u`}]]),Zb=Lb(`sliders-vertical`,[[`path`,{d:`M10 8h4`,key:`1sr2af`}],[`path`,{d:`M12 21v-9`,key:`17s77i`}],[`path`,{d:`M12 8V3`,key:`13r4qs`}],[`path`,{d:`M17 16h4`,key:`h1uq16`}],[`path`,{d:`M19 12V3`,key:`o1uvq1`}],[`path`,{d:`M19 21v-5`,key:`qua636`}],[`path`,{d:`M3 14h4`,key:`bcjad9`}],[`path`,{d:`M5 10V3`,key:`cb8scm`}],[`path`,{d:`M5 21v-7`,key:`1w1uti`}]]),Qb=Lb(`sparkles`,[[`path`,{d:`M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z`,key:`1s2grr`}],[`path`,{d:`M20 2v4`,key:`1rf3ol`}],[`path`,{d:`M22 4h-4`,key:`gwowj6`}],[`circle`,{cx:`4`,cy:`20`,r:`2`,key:`6kqj1y`}]]),$b=Lb(`square-check-big`,[[`path`,{d:`M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344`,key:`2acyp4`}],[`path`,{d:`m9 11 3 3L22 4`,key:`1pflzl`}]]),ex=Lb(`square`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}]]),tx=Lb(`table`,[[`path`,{d:`M12 3v18`,key:`108xh3`}],[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}],[`path`,{d:`M3 9h18`,key:`1pudct`}],[`path`,{d:`M3 15h18`,key:`5xshup`}]]),nx=Lb(`text-align-center`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M17 12H7`,key:`16if0g`}],[`path`,{d:`M19 19H5`,key:`vjpgq2`}]]),rx=Lb(`text-align-end`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M21 12H9`,key:`dn1m92`}],[`path`,{d:`M21 19H7`,key:`4cu937`}]]),ix=Lb(`text-align-justify`,[[`path`,{d:`M3 5h18`,key:`1u36vt`}],[`path`,{d:`M3 12h18`,key:`1i2n21`}],[`path`,{d:`M3 19h18`,key:`awlh7x`}]]),ax=Lb(`text-align-start`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M15 12H3`,key:`6jk70r`}],[`path`,{d:`M17 19H3`,key:`z6ezky`}]]),ox=Lb(`trash-2`,[[`path`,{d:`M10 11v6`,key:`nco0om`}],[`path`,{d:`M14 11v6`,key:`outv1u`}],[`path`,{d:`M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6`,key:`miytrc`}],[`path`,{d:`M3 6h18`,key:`d0wm0j`}],[`path`,{d:`M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2`,key:`e791ji`}]]),sx=Lb(`type`,[[`path`,{d:`M12 4v16`,key:`1654pz`}],[`path`,{d:`M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2`,key:`e0r10z`}],[`path`,{d:`M9 20h6`,key:`s66wpe`}]]),cx=Lb(`upload`,[[`path`,{d:`M12 3v12`,key:`1x0j5s`}],[`path`,{d:`m17 8-5-5-5 5`,key:`7q97r8`}],[`path`,{d:`M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4`,key:`ih7n3h`}]]),lx=Lb(`x`,[[`path`,{d:`M18 6 6 18`,key:`1bl5f8`}],[`path`,{d:`m6 6 12 12`,key:`d8bk6v`}]]);function ux({headerLogo:e,headerTitle:t,headerSubtitle:n,parseError:r,isParsing:i,parseStatusText:a}){return(0,u.jsxs)(`header`,{className:`bg-white border-b border-gray-200 px-6 py-3.5 flex items-center justify-between sticky top-0 z-10 shadow-xs gap-4`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-3`,children:[e||(0,u.jsx)(`div`,{className:`h-9 w-9 bg-orange-600 rounded-xl flex items-center justify-center text-white shadow-md shadow-orange-600/20`,children:(0,u.jsx)(Qb,{className:`h-5 w-5`})}),(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h1`,{className:`text-lg font-bold tracking-tight text-slate-800`,children:t}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:n})]})]}),(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[r&&(0,u.jsxs)(`span`,{className:`text-[10px] text-red-500 font-bold bg-red-50 px-2 py-0.5 rounded inline-block border border-red-100`,children:[`Error: `,r]}),i&&(0,u.jsx)(`span`,{className:`text-[10px] text-orange-600 font-bold bg-orange-50 px-2 py-0.5 rounded inline-block border border-orange-100 animate-pulse`,children:a||`Parsing...`})]})]})}function dx({handleSidebarDragStart:e,createTextBlock:t,setBlocks:n,setSelectedBlockId:r,setActiveTab:i,defaultStyles:a}){return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Typography Elements`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Select standard headings or paragraphs to structure your page layout.`})]}),(0,u.jsx)(`div`,{className:`grid grid-cols-1 gap-3 select-none`,children:[{label:`Document Title`,type:`title`,style:`text-2xl font-extrabold text-slate-900 tracking-tight`},{label:`Document Subtitle`,type:`subtitle`,style:`text-sm font-bold text-slate-500`},{label:`Heading 1`,type:`h1`,style:`text-xl font-extrabold text-slate-850`},{label:`Heading 2`,type:`h2`,style:`text-lg font-bold text-slate-800`},{label:`Heading 3`,type:`h3`,style:`text-md font-semibold text-slate-750`},{label:`Normal Paragraph`,type:`p`,style:`text-xs text-slate-600 leading-relaxed`},{label:`Caption Note`,type:`caption`,style:`text-[10px] text-slate-400 font-mono italic`}].map(o=>(0,u.jsxs)(`div`,{draggable:!0,onDragStart:t=>e(t,o.type),className:`border border-gray-200 rounded-xl p-3 bg-white hover:border-slate-350 transition-all flex flex-col space-y-2 cursor-grab shadow-xs group`,children:[(0,u.jsx)(`span`,{className:`text-[9px] font-bold text-slate-400 uppercase tracking-wide`,children:o.type}),(0,u.jsx)(`div`,{className:`${o.style} truncate pr-4`,children:o.label}),(0,u.jsx)(`button`,{onClick:()=>{let e=t(o.type,o.label,a==null?void 0:a[o.type]);n(t=>[...t,e]),r(e.id),i(`styles`)},className:`w-full py-1 bg-slate-50 hover:bg-slate-200 text-slate-600 rounded-lg text-[9px] font-semibold transition-all text-center border border-gray-150`,children:`Insert at End`})]},o.type))})]})}function fx({schemas:e,toggleSchemaColumn:t,customTableName:n,setCustomTableName:r,customLoopStart:i,setCustomLoopStart:a,customLoopEnd:o,setCustomLoopEnd:s,handleAddCustomTable:c,handleSidebarDragStart:l,setBlocks:d,setSelectedBlockId:f,setActiveTab:p,defaultStyles:m,isTablesLoading:h,tablesLoading:g}){return h||g?(0,u.jsxs)(`div`,{className:`space-y-6`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Dynamic Tables`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Configure loop table templates and drag onto the canvas.`})]}),(0,u.jsx)(`div`,{className:`space-y-4 animate-pulse`,children:[1,2].map(e=>(0,u.jsxs)(`div`,{className:`border border-gray-200 rounded-2xl p-4 bg-white space-y-3 shadow-xs`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`div`,{className:`h-4 bg-slate-200 rounded w-1/3`}),(0,u.jsx)(`div`,{className:`h-3 bg-slate-100 rounded w-16`})]}),(0,u.jsx)(`div`,{className:`h-9 bg-slate-100 rounded-lg w-full`}),(0,u.jsxs)(`div`,{className:`space-y-2`,children:[(0,u.jsx)(`div`,{className:`h-3 bg-slate-100 rounded w-1/4`}),(0,u.jsxs)(`div`,{className:`h-20 bg-slate-50 border border-gray-100 rounded-lg w-full p-2 space-y-2`,children:[(0,u.jsx)(`div`,{className:`h-3.5 bg-slate-200/70 rounded w-3/4`}),(0,u.jsx)(`div`,{className:`h-3.5 bg-slate-200/70 rounded w-2/3`})]})]})]},e))})]}):(0,u.jsxs)(`div`,{className:`space-y-6`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Dynamic Tables`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Configure loop table templates and drag onto the canvas.`})]}),(0,u.jsx)(`div`,{className:`space-y-4`,children:e.map((e,n)=>(0,u.jsxs)(`div`,{className:`border border-gray-200 rounded-2xl p-4 bg-white space-y-3 shadow-xs`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(tx,{className:`h-4 w-4 text-slate-650`}),(0,u.jsx)(`h4`,{className:`font-bold text-xs uppercase text-slate-700 tracking-wider`,children:e.tableName})]}),(0,u.jsx)(`span`,{className:`px-1.5 py-0.5 bg-slate-100 text-[8px] font-bold text-slate-600 rounded`,children:`loop = true`})]}),(0,u.jsxs)(`div`,{draggable:!0,onDragStart:t=>l(t,`table`,e),className:`bg-slate-50 border border-slate-200 hover:border-slate-400 rounded-lg p-2.5 flex items-center justify-between cursor-grab`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(`div`,{className:`h-5 w-5 bg-slate-200 rounded flex items-center justify-center`,children:(0,u.jsx)(Jb,{className:`h-3 w-3 text-slate-600`})}),(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700`,children:`Drag to Canvas`})]}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400 italic`,children:`Drag & Drop`})]}),(0,u.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400 font-bold uppercase tracking-wider block`,children:`Columns:`}),(0,u.jsx)(`div`,{className:`max-h-[180px] overflow-y-auto border border-gray-150 rounded-lg p-2 space-y-1.5 bg-slate-50/50`,children:e.columns.map((e,r)=>{let i=e.loop&&e.columns&&e.columns.length>0;return(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsxs)(`button`,{onClick:()=>t(n,r),className:`flex items-center space-x-2 w-full text-left py-0.5 text-xs text-slate-600 hover:text-slate-800 transition-colors font-medium`,children:[e.enabled===!1?(0,u.jsx)(ex,{className:`h-3.5 w-3.5 text-slate-300 flex-shrink-0`}):(0,u.jsx)($b,{className:`h-3.5 w-3.5 text-slate-700 flex-shrink-0`}),(0,u.jsxs)(`span`,{className:`truncate flex items-center gap-1`,children:[(0,u.jsx)(`span`,{children:e.columnName}),i&&(0,u.jsx)(`span`,{className:`px-1 bg-slate-200 text-slate-600 rounded text-[8px] font-mono`,children:`(sub-table)`})]})]}),i&&e.enabled!==!1&&(0,u.jsxs)(`div`,{className:`ml-4 pl-2.5 border-l-2 border-slate-200 space-y-1 my-1`,children:[(0,u.jsx)(`span`,{className:`text-[8px] text-slate-400 font-bold uppercase tracking-wider block`,children:`Sub Columns:`}),e.columns.map((e,i)=>(0,u.jsxs)(`button`,{onClick:()=>t(n,r,i),className:`flex items-center space-x-2 w-full text-left py-0.5 text-[11px] text-slate-500 hover:text-slate-800 transition-colors`,children:[e.enabled===!1?(0,u.jsx)(ex,{className:`h-3 w-3 text-slate-300 flex-shrink-0`}):(0,u.jsx)($b,{className:`h-3 w-3 text-slate-600 flex-shrink-0`}),(0,u.jsxs)(`span`,{className:`truncate`,children:[e.columnName,` `,(0,u.jsxs)(`span`,{className:`text-[8px] text-slate-400`,children:[`(`,e.placeholder,`)`]})]})]},i))]})]},r)})})]}),(0,u.jsx)(`button`,{onClick:()=>{let t={id:Math.random().toString(36).substring(2,11),type:`table`,content:``,style:w({fontSize:`10px`,fontWeight:`400`,color:`#334155`,backgroundColor:`transparent`,textAlign:`left`,bold:!1,italic:!1,underline:!1,strikethrough:!1,width:`100%`,marginBottom:`12px`,padding:`8px`},m==null?void 0:m.table),tableInfo:w(w({},e),{},{columns:e.columns.map(e=>w({},e))})};d(e=>[...e,t]),f(t.id),p(`styles`)},className:`w-full py-1 bg-slate-50 hover:bg-slate-200 text-slate-600 rounded-lg text-[9px] font-semibold transition-all text-center border border-gray-150`,children:`Insert at End`})]},e.tableName))}),(0,u.jsxs)(`div`,{className:`border border-gray-200 rounded-2xl p-4 bg-slate-50/20 border-dashed space-y-4 mt-6`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2 pb-2 border-b border-gray-150`,children:[(0,u.jsx)(Qb,{className:`h-4 w-4 text-slate-655`}),(0,u.jsx)(`h4`,{className:`font-bold text-xs uppercase text-slate-800 tracking-wider`,children:`Custom Table Builder`})]}),(0,u.jsxs)(`div`,{className:`space-y-3`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1`,children:`Table Name`}),(0,u.jsx)(`input`,{type:`text`,value:n,onChange:e=>r(e.target.value),placeholder:`invoice_items`,className:`w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white`})]}),(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1`,children:`Loop Start tag`}),(0,u.jsx)(`input`,{type:`text`,value:i,onChange:e=>a(e.target.value),placeholder:`{% for item in invoice.items %}`,className:`w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:border-slate-500 bg-white text-slate-600 font-bold`})]}),(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1`,children:`Loop End tag`}),(0,u.jsx)(`input`,{type:`text`,value:o,onChange:e=>s(e.target.value),placeholder:`{% endfor %}`,className:`w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:border-slate-500 bg-white text-slate-600 font-bold`})]}),(0,u.jsxs)(`button`,{onClick:c,className:`w-full py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-xl text-xs font-bold transition-all shadow-sm flex items-center justify-center space-x-1.5 shadow-orange-600/10`,children:[(0,u.jsx)(Jb,{className:`h-4 w-4`}),(0,u.jsx)(`span`,{children:`Add Custom Loop Table`})]})]})]})]})}function px({customImageTypes:e,newImgTypeName:t,setNewImgTypeName:n,handleAddCustomImageType:r,handleSidebarDragStart:i,createImageBlock:a,setBlocks:o,setSelectedBlockId:s,setActiveTab:c}){let l=[{label:`Brand Logo`,imageType:`logo`,description:`Standard document vector logo`,icon:(0,u.jsx)(Kb,{className:`h-4 w-4 text-slate-550`})},{label:`Campaign Banner`,imageType:`banner`,description:`Wide horizontal graphics banner`,icon:(0,u.jsx)(Kb,{className:`h-4 w-4 text-slate-550`})},{label:`Dynamic Barcode`,imageType:`barcode`,description:`Barcode replaced dynamically`,icon:(0,u.jsx)(Bb,{className:`h-4 w-4 text-slate-550`})},{label:`Watermark`,imageType:`watermark`,description:`Background graphic with low opacity`,icon:(0,u.jsx)(Kb,{className:`h-4 w-4 text-slate-550`})},...e.map(e=>({label:e.label,imageType:e.imageType,description:e.description,icon:(0,u.jsx)(Kb,{className:`h-4 w-4 text-slate-550`})}))];return(0,u.jsxs)(`div`,{className:`space-y-4`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Image & Barcode Elements`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Drag elements onto the canvas, or insert below.`})]}),(0,u.jsx)(`div`,{className:`space-y-3`,children:l.map(e=>(0,u.jsxs)(`div`,{className:`border border-gray-200 rounded-xl p-3 bg-white space-y-3 shadow-xs`,children:[(0,u.jsx)(`div`,{className:`flex items-center justify-between`,children:(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[e.icon,(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h4`,{className:`font-bold text-xs text-slate-700`,children:e.label}),(0,u.jsx)(`p`,{className:`text-[9px] text-slate-400`,children:e.description})]})]})}),(0,u.jsxs)(`div`,{draggable:!0,onDragStart:t=>i(t,`image`,void 0,e.imageType),className:`bg-slate-50 border border-slate-200 hover:border-slate-450 rounded-lg p-2 flex items-center justify-between cursor-grab transition-all`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(`div`,{className:`h-5 w-5 bg-slate-200 rounded flex items-center justify-center`,children:(0,u.jsx)(Jb,{className:`h-3 w-3 text-slate-750`})}),(0,u.jsx)(`span`,{className:`text-[11px] font-bold text-slate-700`,children:`Drag to Canvas`})]}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400 italic`,children:`Drag`})]}),(0,u.jsx)(`button`,{onClick:()=>{let t=a(e.imageType);o(e=>[...e,t]),s(t.id),c(`styles`)},className:`w-full py-1 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-lg text-[10px] font-semibold transition-all text-center border border-gray-150`,children:`Insert at End`})]},e.imageType))}),(0,u.jsxs)(`div`,{className:`border border-dashed border-gray-200 rounded-xl p-3 space-y-2 bg-slate-50/50 mt-4`,children:[(0,u.jsx)(`span`,{className:`text-[10px] font-bold text-slate-500 uppercase tracking-wider block`,children:`Add Custom Image Type`}),(0,u.jsx)(`input`,{type:`text`,value:t,onChange:e=>n(e.target.value),placeholder:`e.g. Signature`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs focus:outline-none focus:border-slate-500 bg-white`}),(0,u.jsxs)(`button`,{onClick:r,className:`w-full py-1.5 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-xs font-bold transition-all flex items-center justify-center space-x-1`,children:[(0,u.jsx)(Jb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Add Custom Category`})]})]})]})}function mx({placeholders:e,schemas:t,searchPlaceholder:n,setSearchPlaceholder:r,selectedBlockId:i,setBlocks:a,isPlaceholdersLoading:o,placeholdersLoading:s}){if(o||s)return(0,u.jsxs)(`div`,{className:`space-y-4 flex-1 flex flex-col min-h-0`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Variables Palette`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Click to copy, or drag variables into text areas or table cells.`})]}),(0,u.jsx)(`div`,{className:`h-9 bg-slate-100 rounded-xl w-full animate-pulse`}),(0,u.jsx)(`div`,{className:`flex-1 overflow-y-auto space-y-2 pr-1 animate-pulse`,children:[1,2,3,4].map(e=>(0,u.jsxs)(`div`,{className:`w-full border border-gray-200 p-2.5 rounded-xl bg-white shadow-xs space-y-2`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`div`,{className:`h-3.5 bg-slate-200 rounded w-1/2`}),(0,u.jsx)(`div`,{className:`h-3.5 bg-slate-100 rounded w-1/4`})]}),(0,u.jsx)(`div`,{className:`h-6 bg-slate-50 rounded border border-gray-100 w-full`})]},e))})]});let c=()=>{let t=[];return(e||[]).forEach(e=>{t.push({label:e.label,placeholder:e.placeholder,category:e.category||`General`})}),t.filter(e=>e.label.toLowerCase().includes(n.toLowerCase())||e.placeholder.toLowerCase().includes(n.toLowerCase()))},l=e=>{if(i){let t=`{{${e.replace(/[{}]/g,``)}}}`;a(e=>e.map(e=>e.id===i&&e.type!==`table`?w(w({},e),{},{content:e.content+t}):e))}},d=c();return(0,u.jsxs)(`div`,{className:`space-y-4 flex-1 flex flex-col min-h-0`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Variables Palette`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Click to copy, or drag variables into text areas or table cells.`})]}),(0,u.jsxs)(`div`,{className:`relative`,children:[(0,u.jsx)(Xb,{className:`absolute left-3 top-2.5 h-4 w-4 text-slate-400`}),(0,u.jsx)(`input`,{type:`text`,value:n,onChange:e=>r(e.target.value),placeholder:`Search variables...`,className:`w-full pl-9 pr-4 py-2 border border-gray-200 rounded-xl text-xs focus:outline-none focus:border-slate-500 transition-colors`})]}),(0,u.jsx)(`div`,{className:`flex-1 overflow-y-auto space-y-2 pr-1`,children:d.length===0?(0,u.jsx)(`div`,{className:`text-xs text-slate-400 italic text-center py-4`,children:`No variables available.`}):d.map((e,t)=>{let n=e.placeholder.replace(/[{}]/g,``);return(0,u.jsx)(`div`,{className:`w-full border border-gray-200 p-2.5 rounded-xl bg-white shadow-xs cursor-grab active:cursor-grabbing hover:bg-slate-50 transition-colors`,draggable:!0,onDragStart:e=>{e.dataTransfer.setData(`placeholder`,n),e.dataTransfer.effectAllowed=`copy`},onClick:()=>l(e.placeholder),title:`Drag into text or cells, or click to insert`,children:(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`span`,{className:`text-xs font-semibold text-slate-700 truncate mr-2`,children:e.label}),(0,u.jsx)(`code`,{className:`text-[9px] bg-slate-100 px-1.5 py-0.5 rounded text-slate-800 font-bold shrink-0 border border-slate-200/50`,children:e.placeholder})]})},t)})})]})}function hx({selectedBlockId:e,getSelectedBlock:t,updateSelectedStyle:n,updateSelectedImageInfo:r,fontSizesState:i,fontFamiliesState:a,fontWeightsState:o,handleDeleteBlock:s,newColName:c,setNewColName:d,newColPlaceholder:f,setNewColPlaceholder:p,handleAddTableColumn:m,handleRemoveTableColumn:h,handleUpdateTableColumn:g,handleReorderTableColumn:_,handleAddTableRow:v,handleRemoveTableRow:y,setBlocks:b}){var x;let[S,C]=(0,l.useState)(null),[T,E]=(0,l.useState)(``),[D,ee]=(0,l.useState)(``),[O,k]=(0,l.useState)(null),[te,A]=(0,l.useState)(``),[ne,re]=(0,l.useState)(``),j=t();if(!e||!j)return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Formatting Panel`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Customize the styles of the selected block.`})]}),(0,u.jsxs)(`div`,{className:`border border-dashed border-gray-200 rounded-xl p-6 text-center bg-slate-50/50`,children:[(0,u.jsx)(Zb,{className:`h-8 w-8 text-slate-350 mx-auto mb-2`}),(0,u.jsx)(`span`,{className:`text-xs font-semibold text-slate-500 block`,children:`No block selected`}),(0,u.jsx)(`p`,{className:`text-[10px] text-slate-400 mt-1`,children:`Select any element inside the canvas to configure typography, sizing, colors, or templating loop engines.`})]})]});let ie=j.type===`table`,ae=()=>{c.trim()&&(m(c,f),d(``),p(``))};if(j.type===`image`){let e=j.imageInfo||{imageType:`logo`};return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Formatting Panel`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Customize the styles of the selected block.`})]}),(0,u.jsxs)(`div`,{className:`space-y-4`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2 pb-3 border-b border-gray-100`,children:[(0,u.jsx)(`div`,{className:`h-6 w-6 bg-slate-100 rounded flex items-center justify-center text-slate-700`,children:(0,u.jsx)(Kb,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700 capitalize`,children:`Editing Image Element`})]}),(0,u.jsxs)(`div`,{className:`flex items-center justify-between p-3 bg-slate-50 border border-gray-200 rounded-xl select-none`,children:[(0,u.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700 block`,children:`Row Alignment`}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400`,children:`Display side-by-side`})]}),(0,u.jsx)(`button`,{onClick:()=>{let e=!j.style.sameRow;n(`sameRow`,e),e?(n(`width`,`48%`),b(e=>{let t=e.findIndex(e=>e.id===j.id);return t>0?e.map((e,n)=>n===t-1&&(!e.style.width||e.style.width===`100%`)?w(w({},e),{},{style:w(w({},e.style),{},{width:`48%`})}):e):e})):n(`width`,`100%`)},className:`w-10 h-6 flex items-center rounded-full p-1 transition-colors duration-150 ${j.style.sameRow?`bg-orange-600 justify-end`:`bg-slate-300 justify-start`}`,children:(0,u.jsx)(`span`,{className:`bg-white w-4 h-4 rounded-full shadow-md`})})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Image Category`}),(0,u.jsx)(`div`,{className:`grid grid-cols-4 gap-1 bg-slate-50 p-1 border border-gray-200 rounded-lg`,children:[`logo`,`banner`,`barcode`,`watermark`].map(t=>(0,u.jsx)(`button`,{onClick:()=>r(`imageType`,t),className:`py-1 text-[9px] font-bold rounded capitalize transition-all ${e.imageType===t?`bg-white text-slate-800 shadow-xs border border-gray-200`:`text-slate-500 hover:text-slate-800`}`,children:t},t))})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Alignment (Position)`}),(0,u.jsx)(`div`,{className:`flex items-center space-x-1 border border-gray-200 rounded-lg p-1 bg-slate-50 w-fit`,children:[{value:`left`,icon:(0,u.jsx)(ax,{className:`h-3.5 w-3.5`})},{value:`center`,icon:(0,u.jsx)(nx,{className:`h-3.5 w-3.5`})},{value:`right`,icon:(0,u.jsx)(rx,{className:`h-3.5 w-3.5`})}].map(e=>(0,u.jsx)(`button`,{onClick:()=>n(`textAlign`,e.value),type:`button`,className:`p-1.5 rounded transition-all ${j.style.textAlign===e.value?`bg-white text-slate-800 shadow-xs border border-gray-200`:`text-slate-500 hover:text-slate-800`}`,children:e.icon},e.value))})]}),(0,u.jsxs)(`div`,{className:`space-y-1 pt-1`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Block Width (%)`}),(0,u.jsx)(`span`,{className:`text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded`,children:j.style.width&&j.style.width.endsWith(`%`)?j.style.width:`100%`})]}),(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(`input`,{type:`range`,min:`10`,max:`100`,step:`5`,value:parseInt(j.style.width||`100`),onChange:e=>n(`width`,`${e.target.value}%`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`}),(0,u.jsxs)(`span`,{className:`text-[10px] font-mono text-slate-500 w-10 text-right`,children:[parseInt(j.style.width||`100`),`%`]})]})]}),(0,u.jsxs)(`div`,{className:`space-y-1 pt-1 mt-2`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Image Element Width (px)`}),(0,u.jsx)(`span`,{className:`text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded`,children:j.style.imageWidth||(j.style.width&&j.style.width.endsWith(`px`)?j.style.width:`100%`)})]}),(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(`input`,{type:`range`,min:`10`,max:`1000`,step:`5`,value:parseInt(j.style.imageWidth||(j.style.width&&j.style.width.endsWith(`px`)?j.style.width:`100`))||100,onChange:e=>n(`imageWidth`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`}),(0,u.jsxs)(`span`,{className:`text-[10px] font-mono text-slate-500 w-10 text-right`,children:[parseInt(j.style.imageWidth||(j.style.width&&j.style.width.endsWith(`px`)?j.style.width:`100`))||100,`px`]})]})]}),(0,u.jsxs)(`div`,{className:`space-y-1 pt-1 mt-3`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1`,children:`Object Fit`}),(0,u.jsxs)(`select`,{value:j.style.objectFit||`contain`,onChange:e=>n(`objectFit`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white font-medium`,children:[(0,u.jsx)(`option`,{value:`contain`,children:`Contain`}),(0,u.jsx)(`option`,{value:`cover`,children:`Cover`}),(0,u.jsx)(`option`,{value:`fill`,children:`Fill`}),(0,u.jsx)(`option`,{value:`none`,children:`None`})]})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Image Height`}),(0,u.jsx)(`span`,{className:`text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded`,children:j.style.height||j.style.minHeight||`auto`})]}),(0,u.jsx)(`div`,{className:`flex items-center space-x-2`,children:(0,u.jsx)(`input`,{type:`range`,min:`20`,max:`400`,step:`10`,value:parseInt(j.style.height||j.style.minHeight||`100`)||100,onChange:e=>{n(`height`,`${e.target.value}px`),n(`minHeight`,`${e.target.value}px`)},className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`})})]}),e.imageType===`barcode`?(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-150`,children:[(0,u.jsx)(`span`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Barcode Configuration`}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500`,children:`Mock Barcode Value`}),(0,u.jsx)(`input`,{type:`text`,value:e.barcodeValue||``,onChange:e=>r(`barcodeValue`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:border-slate-500`})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500`,children:`Backend Variable`}),(0,u.jsx)(`input`,{type:`text`,value:e.barcodePlaceholder||``,onChange:e=>r(`barcodePlaceholder`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:border-slate-500 text-slate-700 font-bold`})]})]}):(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-150`,children:[(0,u.jsx)(`span`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Image Asset Upload`}),(0,u.jsxs)(`div`,{className:`flex flex-col items-center p-3 border border-dashed border-gray-200 rounded-lg bg-slate-50/50 hover:bg-slate-50 transition-all cursor-pointer relative`,children:[(0,u.jsx)(cx,{className:`h-5 w-5 text-slate-400 mb-1`}),(0,u.jsx)(`span`,{className:`text-[10px] font-bold text-slate-650`,children:`Choose local image file`}),(0,u.jsx)(`input`,{type:`file`,accept:`image/*`,onChange:e=>{var t;let n=(t=e.target.files)==null?void 0:t[0];if(!n)return;let i=new FileReader;i.onload=e=>{var t;r(`url`,(t=e.target)==null?void 0:t.result)},i.readAsDataURL(n)},className:`absolute inset-0 opacity-0 cursor-pointer`})]})]}),(0,u.jsx)(`div`,{className:`space-y-3 pt-3 border-t border-gray-100`,children:(0,u.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase block`,children:`Bottom Margin`}),(0,u.jsx)(`input`,{type:`range`,min:`0`,max:`40`,step:`2`,value:parseInt(j.style.marginBottom||`0px`),onChange:e=>n(`marginBottom`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200`})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase block`,children:`Padding`}),(0,u.jsx)(`input`,{type:`range`,min:`0`,max:`40`,step:`2`,value:parseInt(j.style.padding||`0px`),onChange:e=>n(`padding`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200`})]})]})}),(0,u.jsx)(`div`,{className:`pt-4 border-t border-red-100 flex items-center justify-between`,children:(0,u.jsxs)(`button`,{onClick:()=>s(j.id),className:`w-full py-2 bg-red-50 hover:bg-red-100 border border-red-200 text-red-650 rounded-xl text-xs font-bold transition-all flex items-center justify-center space-x-1 shadow-xs cursor-pointer`,children:[(0,u.jsx)(ox,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Delete Element`})]})})]})]})}return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Formatting Panel`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Customize the styles of the selected block.`})]}),(0,u.jsxs)(`div`,{className:`space-y-4`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2 pb-3 border-b border-gray-100`,children:[(0,u.jsx)(`div`,{className:`h-6 px-3 bg-slate-100 rounded flex items-center justify-center text-slate-700 font-bold text-[10px] uppercase`,children:j.type}),(0,u.jsxs)(`span`,{className:`text-xs font-bold text-slate-700 capitalize`,children:[`Editing `,j.type===`table`?`Table Block`:`Typography Element`]})]}),(0,u.jsxs)(`div`,{className:`flex items-center justify-between p-3 bg-slate-50 border border-gray-200 rounded-xl select-none`,children:[(0,u.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700 block`,children:`Row Alignment`}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400`,children:`Display side-by-side`})]}),(0,u.jsx)(`button`,{onClick:()=>{let e=!j.style.sameRow;n(`sameRow`,e),e?(n(`width`,`48%`),b(e=>{let t=e.findIndex(e=>e.id===j.id);return t>0?e.map((e,n)=>n===t-1&&(!e.style.width||e.style.width===`100%`)?w(w({},e),{},{style:w(w({},e.style),{},{width:`48%`})}):e):e})):n(`width`,`100%`)},className:`w-10 h-6 flex items-center rounded-full p-1 transition-colors duration-150 ${j.style.sameRow?`bg-orange-600 justify-end`:`bg-slate-300 justify-start`}`,children:(0,u.jsx)(`span`,{className:`bg-white w-4 h-4 rounded-full shadow-md`})})]}),j.style.sameRow&&(0,u.jsxs)(`div`,{className:`flex items-center justify-between p-3 bg-slate-50 border border-gray-200 rounded-xl select-none`,children:[(0,u.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700 block`,children:`Row Direction`}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400`,children:`Layout stacked or side-by-side`})]}),(0,u.jsx)(`div`,{className:`grid grid-cols-2 gap-1 bg-slate-100 p-0.5 border border-gray-200 rounded-lg w-[180px]`,children:[`row`,`column`].map(e=>(0,u.jsx)(`button`,{type:`button`,onClick:()=>{n(`flexDirection`,e),b(t=>{let n=t.findIndex(e=>e.id===j.id);if(n===-1)return t;let r=n;for(;r>0&&t[r].style.sameRow;)r--;let i=[r],a=r+1;for(;a<t.length&&t[a].style.sameRow;)i.push(a),a++;return t.map((t,n)=>i.includes(n)?w(w({},t),{},{style:w(w({},t.style),{},{flexDirection:e})}):t)})},className:`px-2 py-1 text-[9px] font-bold rounded capitalize transition-all text-center ${j.style.flexDirection===e||e===`row`&&!j.style.flexDirection?`bg-white text-slate-800 shadow-xs border border-gray-200`:`text-slate-500 hover:text-slate-800`}`,children:e===`row`?`Side-by-side`:`Stacked`},e))})]}),(0,u.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Font Size`}),(0,u.jsx)(`select`,{value:j.style.fontSize,onChange:e=>n(`fontSize`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white font-medium`,children:i.map(e=>(0,u.jsx)(`option`,{value:e.value,children:e.label},e.value))})]}),!ie&&(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Weight`}),(0,u.jsx)(`select`,{value:j.style.fontWeight,onChange:e=>n(`fontWeight`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white font-medium`,children:o.map(e=>(0,u.jsx)(`option`,{value:e.value,children:e.label},e.value))})]})]}),!ie&&(0,u.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Font Family`}),(0,u.jsxs)(`select`,{value:j.style.fontFamily||``,onChange:e=>n(`fontFamily`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white font-medium`,children:[(0,u.jsx)(`option`,{value:``,children:`Default Font (Global)`}),a.map(e=>(0,u.jsx)(`option`,{value:e.value,children:e.label},e.value))]})]}),!ie&&(0,u.jsxs)(`div`,{className:`space-y-2`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Alignment & Formatting`}),(0,u.jsxs)(`div`,{className:`flex items-center justify-between gap-1 border border-gray-200 rounded-lg p-1 bg-slate-50`,children:[(0,u.jsx)(`div`,{className:`flex items-center space-x-0.5`,children:[{value:`left`,icon:(0,u.jsx)(ax,{className:`h-3.5 w-3.5`})},{value:`center`,icon:(0,u.jsx)(nx,{className:`h-3.5 w-3.5`})},{value:`right`,icon:(0,u.jsx)(rx,{className:`h-3.5 w-3.5`})},{value:`justify`,icon:(0,u.jsx)(ix,{className:`h-3.5 w-3.5`})}].map(e=>(0,u.jsx)(`button`,{onClick:()=>n(`textAlign`,e.value),className:`p-1.5 rounded transition-all ${j.style.textAlign===e.value?`bg-white text-slate-800 shadow-xs border border-gray-200`:`text-slate-500 hover:text-slate-800`}`,children:e.icon},e.value))}),(0,u.jsx)(`div`,{className:`h-5 w-[1px] bg-slate-200 mx-1`}),(0,u.jsx)(`div`,{className:`flex items-center space-x-0.5`,children:[{key:`bold`,label:`B`,className:`font-bold`},{key:`italic`,label:`I`,className:`italic`},{key:`underline`,label:`U`,className:`underline`},{key:`strikethrough`,label:`S`,className:`line-through`}].map(e=>{let t=j.style[e.key]===!0;return(0,u.jsx)(`button`,{onClick:()=>n(e.key,!t),className:`h-7 w-7 rounded text-xs transition-all ${t?`bg-white text-slate-800 shadow-xs border border-gray-200 font-bold`:`text-slate-500 hover:text-slate-800`}`,children:(0,u.jsx)(`span`,{className:e.className,children:e.label})},e.key)})})]})]}),(0,u.jsxs)(`div`,{className:`space-y-3`,children:[(0,u.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Text Color`}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-1.5`,children:[pb.map(e=>(0,u.jsx)(`button`,{onClick:()=>n(`color`,e),className:`h-5 w-5 rounded-full border border-gray-200 shadow-xs transition-transform ${j.style.color===e?`scale-120 ring-2 ring-slate-800`:`hover:scale-110`}`,style:{backgroundColor:e}},e)),(0,u.jsx)(`input`,{type:`color`,value:j.style.color,onChange:e=>n(`color`,e.target.value),className:`h-5 w-5 rounded-full border border-gray-200 cursor-pointer overflow-hidden p-0`})]})]}),(0,u.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Background Color`}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-1.5`,children:[mb.map(e=>(0,u.jsx)(`button`,{onClick:()=>n(`backgroundColor`,e),className:`h-5 w-5 rounded-full border border-gray-200 shadow-xs transition-transform ${j.style.backgroundColor===e?`scale-120 ring-2 ring-slate-800`:`hover:scale-110`}`,style:{backgroundColor:e===`transparent`?`#ffffff`:e},children:e===`transparent`&&(0,u.jsx)(`span`,{className:`text-[8px] text-slate-400 font-bold block leading-5 text-center`,children:`T`})},e)),(0,u.jsx)(`input`,{type:`color`,value:j.style.backgroundColor===`transparent`?`#ffffff`:j.style.backgroundColor,onChange:e=>n(`backgroundColor`,e.target.value),className:`h-5 w-5 rounded-full border border-gray-200 cursor-pointer overflow-hidden p-0`})]})]})]}),(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-100`,children:[(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Block Width`}),(0,u.jsx)(`span`,{className:`text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded`,children:j.style.width||`100%`})]}),(0,u.jsx)(`div`,{className:`flex items-center space-x-2`,children:(0,u.jsx)(`input`,{type:`range`,min:`10`,max:`100`,step:`5`,value:parseInt(j.style.width||`100%`),onChange:e=>n(`width`,`${e.target.value}%`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`})})]}),(0,u.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase block`,children:`Bottom Margin`}),(0,u.jsx)(`input`,{type:`range`,min:`0`,max:`40`,step:`2`,value:parseInt(j.style.marginBottom||`0px`),onChange:e=>n(`marginBottom`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg`})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase block`,children:`Padding`}),(0,u.jsx)(`input`,{type:`range`,min:`0`,max:`40`,step:`2`,value:parseInt(j.style.padding||`0px`),onChange:e=>n(`padding`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg`})]})]})]}),ie&&j.tableInfo&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-100`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Table Rows`}),(0,u.jsxs)(`span`,{className:`text-[10px] text-slate-400 font-medium`,children:[((x=j.tableInfo.mockRows)==null?void 0:x.length)||1,` row(s) configured`]})]}),(0,u.jsxs)(`button`,{type:`button`,onClick:()=>v&&v(j.id),className:`px-3 py-1.5 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-xs font-bold transition-all flex items-center space-x-1 shadow-xs`,title:`Add a new row to table`,children:[(0,u.jsx)(Jb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Add Row`})]})]}),(0,u.jsx)(`div`,{className:`space-y-1.5 max-h-[140px] overflow-y-auto pr-1`,children:(j.tableInfo.mockRows&&j.tableInfo.mockRows.length>0?j.tableInfo.mockRows:[{}]).map((e,t)=>{var n;return(0,u.jsxs)(`div`,{className:`flex items-center justify-between bg-slate-50 border border-gray-200 rounded-lg p-2 text-xs`,children:[(0,u.jsxs)(`span`,{className:`font-semibold text-slate-700`,children:[`Row #`,t+1]}),(0,u.jsx)(`button`,{type:`button`,onClick:()=>y&&y(t,j.id),disabled:(((n=j.tableInfo)==null||(n=n.mockRows)==null?void 0:n.length)||1)<=1,className:`p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 disabled:opacity-30 disabled:hover:bg-transparent rounded transition-colors`,title:`Remove row`,children:(0,u.jsx)(ox,{className:`h-3.5 w-3.5`})})]},t)})})]}),(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-100`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Table Columns`}),(0,u.jsx)(`div`,{className:`space-y-2 max-h-[300px] overflow-y-auto pr-1`,children:j.tableInfo.columns.map((e,t)=>{var n,r;let i=e.loop&&e.columns&&e.columns.length>0;return(0,u.jsxs)(`div`,{className:`bg-slate-50 border border-gray-200 rounded-lg p-2 space-y-1.5 text-xs`,children:[S===String(t)?(0,u.jsxs)(`div`,{className:`space-y-1.5 p-1 bg-white border border-orange-300 rounded`,children:[(0,u.jsx)(`div`,{className:`text-[9px] font-bold text-orange-600 uppercase`,children:`Edit Column`}),(0,u.jsx)(`input`,{type:`text`,value:T,onChange:e=>E(e.target.value),placeholder:`Header Name`,className:`w-full px-2 py-0.5 border border-gray-200 rounded text-xs bg-white`}),(0,u.jsx)(`input`,{type:`text`,value:D,onChange:e=>ee(e.target.value),placeholder:`Value (e.g. {{item.sku}})`,className:`w-full px-2 py-0.5 border border-gray-200 rounded text-xs font-mono bg-white`}),(0,u.jsxs)(`div`,{className:`flex justify-end gap-1`,children:[(0,u.jsxs)(`button`,{onClick:()=>{g&&g(t,T,D),C(null)},className:`p-1 px-2 bg-orange-600 text-white hover:bg-orange-700 rounded text-[10px] flex items-center gap-1 font-bold`,children:[(0,u.jsx)(Vb,{className:`h-3 w-3`}),(0,u.jsx)(`span`,{children:`Save`})]}),(0,u.jsxs)(`button`,{onClick:()=>C(null),className:`p-1 px-2 bg-gray-200 text-slate-700 hover:bg-gray-300 rounded text-[10px] flex items-center gap-1`,children:[(0,u.jsx)(lx,{className:`h-3 w-3`}),(0,u.jsx)(`span`,{children:`Cancel`})]})]})]}):(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsxs)(`div`,{className:`truncate mr-2`,children:[(0,u.jsxs)(`span`,{className:`font-bold text-slate-700 block truncate flex items-center gap-1`,children:[(0,u.jsx)(`span`,{children:e.columnName}),i&&(0,u.jsx)(`span`,{className:`px-1 bg-blue-100 text-blue-700 rounded text-[8px] font-mono`,children:`loop (sub-table)`})]}),(0,u.jsx)(`code`,{className:`text-[9px] font-mono text-slate-500 truncate block`,children:e.placeholder})]}),(0,u.jsxs)(`div`,{className:`flex items-center gap-0.5 shrink-0`,children:[(0,u.jsx)(`button`,{onClick:()=>_&&_(t,`up`),disabled:t===0,className:`p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent rounded transition-colors`,title:`Move Up`,children:(0,u.jsx)(zb,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`button`,{onClick:()=>_&&_(t,`down`),disabled:t===(((n=j.tableInfo)==null?void 0:n.columns.length)||0)-1,className:`p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent rounded transition-colors`,title:`Move Down`,children:(0,u.jsx)(Rb,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`button`,{onClick:()=>{C(String(t)),E(e.columnName),ee(e.placeholder)},className:`p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200 rounded transition-colors`,title:`Edit column`,children:(0,u.jsx)(qb,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`button`,{onClick:()=>h(t),className:`p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors border border-transparent`,disabled:!j.tableInfo||j.tableInfo.columns.length<=1,title:`Delete column`,children:(0,u.jsx)(ox,{className:`h-3.5 w-3.5`})})]})]}),i&&(0,u.jsxs)(`div`,{className:`ml-2 pl-2 border-l-2 border-blue-200 space-y-1.5 pt-1 mt-1`,children:[(0,u.jsx)(`div`,{className:`flex items-center justify-between`,children:(0,u.jsxs)(`span`,{className:`text-[8px] font-bold text-blue-600 uppercase tracking-wider block`,children:[`Sub-Table Columns (`,((r=e.columns)==null?void 0:r.length)||0,`):`]})}),e.columns.map((n,r)=>{let i=`${t}-${r}`;return S===i?(0,u.jsxs)(`div`,{className:`space-y-1 p-1.5 bg-white border border-blue-300 rounded`,children:[(0,u.jsx)(`div`,{className:`text-[8px] font-bold text-blue-600 uppercase`,children:`Edit Sub-Column`}),(0,u.jsx)(`input`,{type:`text`,value:T,onChange:e=>E(e.target.value),placeholder:`Header Name`,className:`w-full px-2 py-0.5 border border-gray-200 rounded text-[11px] bg-white`}),(0,u.jsx)(`input`,{type:`text`,value:D,onChange:e=>ee(e.target.value),placeholder:`Value`,className:`w-full px-2 py-0.5 border border-gray-200 rounded text-[11px] font-mono bg-white`}),(0,u.jsxs)(`div`,{className:`flex justify-end gap-1 pt-0.5`,children:[(0,u.jsxs)(`button`,{onClick:()=>{g&&g(t,T,D,r),C(null)},className:`p-0.5 px-1.5 bg-blue-600 text-white hover:bg-blue-700 rounded text-[9px] flex items-center gap-1 font-bold`,children:[(0,u.jsx)(Vb,{className:`h-2.5 w-2.5`}),(0,u.jsx)(`span`,{children:`Save`})]}),(0,u.jsxs)(`button`,{onClick:()=>C(null),className:`p-0.5 px-1.5 bg-gray-200 text-slate-700 hover:bg-gray-300 rounded text-[9px] flex items-center gap-1`,children:[(0,u.jsx)(lx,{className:`h-2.5 w-2.5`}),(0,u.jsx)(`span`,{children:`Cancel`})]})]})]},r):(0,u.jsxs)(`div`,{className:`flex items-center justify-between bg-white border border-gray-150 rounded px-2 py-1 text-[11px]`,children:[(0,u.jsxs)(`div`,{className:`truncate mr-1`,children:[(0,u.jsx)(`span`,{className:`font-semibold text-slate-700 block truncate`,children:n.columnName}),(0,u.jsx)(`code`,{className:`text-[8px] font-mono text-slate-400 truncate block`,children:n.placeholder})]}),(0,u.jsxs)(`div`,{className:`flex items-center gap-0.5 shrink-0`,children:[(0,u.jsx)(`button`,{onClick:()=>_&&_(t,`up`,r),disabled:r===0,className:`p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 disabled:opacity-30 disabled:hover:bg-transparent rounded`,title:`Move Sub-Column Up`,children:(0,u.jsx)(zb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:()=>_&&_(t,`down`,r),disabled:r===e.columns.length-1,className:`p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 disabled:opacity-30 disabled:hover:bg-transparent rounded`,title:`Move Sub-Column Down`,children:(0,u.jsx)(Rb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:()=>{C(i),E(n.columnName),ee(n.placeholder)},className:`p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded`,title:`Edit sub-column`,children:(0,u.jsx)(qb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:()=>h(t,r),className:`p-0.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded`,title:`Delete sub-column`,children:(0,u.jsx)(ox,{className:`h-3 w-3`})})]})]},r)}),O===t?(0,u.jsxs)(`div`,{className:`bg-white border border-blue-200 rounded p-2 space-y-1.5 mt-1`,children:[(0,u.jsx)(`span`,{className:`text-[9px] font-bold text-blue-600 block`,children:`Add Sub-Column`}),(0,u.jsx)(`input`,{type:`text`,value:te,onChange:e=>A(e.target.value),placeholder:`Header Name (e.g. Price)`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs bg-white`}),(0,u.jsx)(`input`,{type:`text`,value:ne,onChange:e=>re(e.target.value),placeholder:`Value (e.g. {{item.price}})`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs font-mono bg-white`}),(0,u.jsxs)(`div`,{className:`flex gap-1 pt-1`,children:[(0,u.jsx)(`button`,{onClick:()=>{te.trim()&&(m(te,ne||`{{item.value}}`,!1,t),A(``),re(``),k(null))},className:`flex-1 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-[10px] font-bold`,children:`Add`}),(0,u.jsx)(`button`,{onClick:()=>{k(null),A(``),re(``)},className:`py-1 px-2 bg-gray-100 hover:bg-gray-200 text-slate-600 rounded text-[10px]`,children:`Cancel`})]})]}):(0,u.jsxs)(`button`,{onClick:()=>k(t),className:`w-full py-1 text-[10px] font-bold text-blue-600 hover:bg-blue-50 border border-dashed border-blue-200 rounded flex items-center justify-center space-x-1 transition-colors mt-1`,children:[(0,u.jsx)(Jb,{className:`h-3 w-3`}),(0,u.jsx)(`span`,{children:`Add Sub-Column`})]})]})]},t)})}),(0,u.jsxs)(`div`,{className:`bg-slate-50 border border-gray-200 border-dashed rounded-xl p-3 space-y-3`,children:[(0,u.jsx)(`span`,{className:`text-[9px] font-bold text-slate-500 uppercase tracking-wider block`,children:`Add New Column`}),(0,u.jsx)(`div`,{children:(0,u.jsx)(`input`,{type:`text`,value:c,onChange:e=>d(e.target.value),placeholder:`Header Name`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs focus:outline-none focus:border-slate-500 bg-white`})}),(0,u.jsx)(`div`,{children:(0,u.jsx)(`input`,{type:`text`,value:f,onChange:e=>p(e.target.value),placeholder:`Value (e.g. {{item.sku}})`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs font-mono focus:outline-none focus:border-orange-655 bg-white`})}),(0,u.jsxs)(`div`,{className:`flex gap-2`,children:[(0,u.jsxs)(`button`,{onClick:ae,className:`flex-1 py-1.5 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-xs font-bold transition-all flex items-center justify-center space-x-1`,children:[(0,u.jsx)(Jb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Column`})]}),(0,u.jsxs)(`button`,{onClick:()=>{c.trim()&&(m(c,f||`{{item.price}}`,!0),d(``),p(``))},className:`flex-1 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-xs font-bold transition-all flex items-center justify-center space-x-1`,title:`Add column as nested sub-table`,children:[(0,u.jsx)(Jb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Sub-Table`})]})]})]})]})]}),(0,u.jsx)(`div`,{className:`pt-4 border-t border-red-100 flex items-center justify-between`,children:(0,u.jsxs)(`button`,{onClick:()=>s(j.id),className:`w-full py-2 bg-red-50 hover:bg-red-100 border border-red-200 text-red-650 rounded-xl text-xs font-bold transition-all flex items-center justify-center space-x-1 shadow-xs cursor-pointer`,children:[(0,u.jsx)(ox,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Delete Element`})]})})]})]})}function gx({activeTab:e,setActiveTab:t,setBlocks:n,selectedBlockId:r,setSelectedBlockId:i,getSelectedBlock:a,defaultStyles:o,createTextBlock:s,createImageBlock:c,updateSelectedStyle:l,updateSelectedImageInfo:d,handleDeleteBlock:f,handleRemoveTableColumn:p,handleAddTableColumn:m,handleUpdateTableColumn:h,handleReorderTableColumn:g,handleAddTableRow:_,handleRemoveTableRow:v,schemas:y,toggleSchemaColumn:b,customTableName:x,setCustomTableName:S,customLoopStart:C,setCustomLoopStart:w,customLoopEnd:T,setCustomLoopEnd:E,handleAddCustomTable:D,newColName:ee,setNewColName:O,newColPlaceholder:k,setNewColPlaceholder:te,customImageTypes:A,newImgTypeName:ne,setNewImgTypeName:re,handleAddCustomImageType:j,placeholders:ie,searchPlaceholder:ae,setSearchPlaceholder:oe,handleSidebarDragStart:se,isTablesLoading:ce,tablesLoading:le,isPlaceholdersLoading:ue,placeholdersLoading:de,fontSizesState:fe,fontFamiliesState:pe,fontWeightsState:me}){return(0,u.jsxs)(`aside`,{className:`w-full lg:w-[30%] flex flex-col bg-white border-t lg:border-t-0 lg:border-l border-gray-200 overflow-y-auto shrink-0`,children:[(0,u.jsx)(`div`,{className:`grid grid-cols-5 gap-1 border-b border-gray-250 p-2 bg-slate-50`,children:[{value:`text`,icon:(0,u.jsx)(sx,{className:`h-4 w-4`})},{value:`tables`,icon:(0,u.jsx)(tx,{className:`h-4 w-4`})},{value:`images`,icon:(0,u.jsx)(Kb,{className:`h-4 w-4`})},{value:`placeholders`,icon:(0,u.jsx)(Qb,{className:`h-4 w-4`})},{value:`styles`,icon:(0,u.jsx)(Zb,{className:`h-4 w-4`})}].map(n=>(0,u.jsxs)(`button`,{onClick:()=>t(n.value),className:`py-2 px-0.5 flex flex-col items-center justify-center gap-1 font-bold text-[9px] rounded-lg uppercase tracking-wider transition-all duration-150 ${e===n.value?`bg-orange-600 text-white shadow-sm shadow-orange-600/10`:`text-slate-500 hover:text-orange-600 hover:bg-orange-50/50`}`,children:[n.icon,(0,u.jsx)(`span`,{children:n.value})]},n.value))}),(0,u.jsxs)(`div`,{className:`p-4 flex-1 flex flex-col min-h-0 overflow-y-auto`,children:[e===`text`&&(0,u.jsx)(dx,{handleSidebarDragStart:se,createTextBlock:s,setBlocks:n,setSelectedBlockId:i,setActiveTab:t,defaultStyles:o}),e===`tables`&&(0,u.jsx)(fx,{schemas:y,toggleSchemaColumn:b,customTableName:x,setCustomTableName:S,customLoopStart:C,setCustomLoopStart:w,customLoopEnd:T,setCustomLoopEnd:E,handleAddCustomTable:D,handleSidebarDragStart:se,setBlocks:n,setSelectedBlockId:i,setActiveTab:t,defaultStyles:o,isTablesLoading:ce,tablesLoading:le}),e===`images`&&(0,u.jsx)(px,{customImageTypes:A,newImgTypeName:ne,setNewImgTypeName:re,handleAddCustomImageType:j,handleSidebarDragStart:se,createImageBlock:c,setBlocks:n,setSelectedBlockId:i,setActiveTab:t}),e===`placeholders`&&(0,u.jsx)(mx,{placeholders:ie,schemas:y,searchPlaceholder:ae,setSearchPlaceholder:oe,selectedBlockId:r,setBlocks:n,isPlaceholdersLoading:ue,placeholdersLoading:de}),e===`styles`&&(0,u.jsx)(hx,{selectedBlockId:r,getSelectedBlock:a,updateSelectedStyle:l,updateSelectedImageInfo:d,fontSizesState:fe,fontFamiliesState:pe,fontWeightsState:me,handleDeleteBlock:f,newColName:ee,setNewColName:O,newColPlaceholder:k,setNewColPlaceholder:te,handleAddTableColumn:m,handleRemoveTableColumn:p,handleUpdateTableColumn:h,handleReorderTableColumn:g,handleAddTableRow:_,handleRemoveTableRow:v,setBlocks:n})]})]})}var _x=[`bold`,`italic`,`underline`,`strikethrough`,`width`],vx=({block:e,onUpdate:t,onSelect:n,onDrop:r})=>{let i=(0,l.useRef)(null);(0,l.useEffect)(()=>{i.current&&i.current.innerHTML!==e.content&&document.activeElement!==i.current&&(i.current.innerHTML=e.content||`<br/>`)},[e.id,e.content]);let a=e.style,{bold:o,italic:s,underline:c,strikethrough:d,width:f}=a,p=w({},Nb(a,_x));o&&(p.fontWeight=`bold`),s&&(p.fontStyle=`italic`);let m=[];return c&&m.push(`underline`),d&&m.push(`line-through`),m.length>0&&(p.textDecoration=m.join(` `)),(0,u.jsx)(`div`,{ref:i,contentEditable:!0,suppressContentEditableWarning:!0,onFocus:n,onInput:e=>t(e.currentTarget.innerHTML),onBlur:e=>t(e.currentTarget.innerHTML),style:p,className:`h-fit w-full break-words outline-none`,onDrop:r,onDragOver:e=>e.preventDefault()})},yx=({blockId:e,colIdx:t,placeholder:n,onUpdate:r,onDrop:i})=>{let a=(0,l.useRef)(null);return(0,l.useEffect)(()=>{a.current&&a.current.innerHTML!==n&&document.activeElement!==a.current&&(a.current.innerHTML=n)},[e,t,n]),(0,u.jsx)(`td`,{ref:a,contentEditable:!0,suppressContentEditableWarning:!0,onInput:e=>r(e.currentTarget.innerText||e.currentTarget.innerHTML),onBlur:e=>r(e.currentTarget.innerText||e.currentTarget.innerHTML),onDrop:i,onDragOver:e=>e.preventDefault(),className:`border border-slate-200 px-2.5 py-2.5 text-slate-500 bg-slate-50/20 font-sans outline-none focus:bg-slate-100/50 transition-colors`})},bx=e=>{let t=[];return e.forEach(e=>{e.style.sameRow&&t.length>0?t[t.length-1].blocks.push(e):t.push({id:e.id,blocks:[e]})}),t};function xx({blocks:e,setBlocks:t,selectedBlockId:n,setSelectedBlockId:r,setActiveTab:i,showMockData:a,placeholderMockData:o,dragOverIndex:s,setDragOverIndex:c,draggedSidebarItem:l,defaultStyles:d,zoom:f,panOffset:p,spacePressed:m,canvasHeight:h,viewportRef:g,canvasContainerRef:_,handleMouseDown:v,handleMouseMove:y,handleMouseUp:b,createTextBlock:x,duplicateBlock:S,reorderBlock:C,handleDeleteBlock:T,handleSidebarDrop:E,handleTableCellDrop:D,updateTableCell:ee,handleTextDrop:O}){let k=(e,t)=>{e.dataTransfer.setData(`blockIndex`,t.toString()),e.dataTransfer.setData(`source`,`canvas`),e.dataTransfer.effectAllowed=`move`},te=(n,r)=>{n.preventDefault(),n.stopPropagation();let i=n.dataTransfer.getData(`source`);if(i===`sidebar`)E(r);else if(i===`canvas`){let i=parseInt(n.dataTransfer.getData(`blockIndex`));if(isNaN(i)||i===r)return;let a=[...e],o=a.splice(i,1)[0],s=i<r?r-1:r;a.splice(s,0,o),t(a)}c(null)};return(0,u.jsx)(`div`,{ref:g,className:`flex-1 overflow-auto p-8 flex justify-center items-start outline-none transition-all ${m?`cursor-grab active:cursor-grabbing`:`cursor-default`}`,onMouseDown:v,onMouseMove:y,onMouseUp:b,onMouseLeave:b,children:(0,u.jsx)(`div`,{style:{transform:`translate(${p.x}px, ${p.y}px) scale(${f})`,transformOrigin:`top center`},className:`transition-transform duration-75 ease-out select-none`,children:(0,u.jsxs)(`div`,{ref:_,style:{height:`${h}px`},className:`w-[794px] min-h-[1123px] bg-white shadow-lg border border-gray-300/80 px-[60px] py-[60px] flex flex-col relative canvas-editor-area`,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),n.stopPropagation(),l)E(e.length);else{let e=n.dataTransfer.getData(`placeholder`);if(e){n.preventDefault();let a=x(`p`,`{{${e}}}`,d==null?void 0:d.p);t(e=>[...e,a]),r(a.id),i(`styles`)}}},children:[e.length===0?(0,u.jsxs)(`div`,{className:`flex-1 border-2 border-dashed border-gray-200 rounded-2xl flex flex-col items-center justify-center p-8 text-center text-slate-400`,children:[(0,u.jsx)(Zb,{className:`h-10 w-10 mb-3 animate-bounce text-slate-350`}),(0,u.jsx)(`span`,{className:`font-bold text-sm text-slate-600 block`,children:`Drag & Drop Editor Canvas`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-400 mt-1 max-w-sm`,children:`Select elements from the sidebar tabs (Text, Tables, Images) and drag them here to assemble your template structure.`})]}):bx(e).map(a=>{var o;let s=a.blocks.length>1;return(0,u.jsx)(`div`,{className:`group/row ${a.blocks.some(e=>e.style.position===`absolute`)?``:`relative`} border border-transparent rounded-lg hover:border-slate-200/60 p-1 mb-2 ${s?((o=a.blocks[0])==null||(o=o.style)==null?void 0:o.flexDirection)===`column`?`flex flex-col gap-2`:`flex flex-row gap-4`:``}`,children:a.blocks.map(a=>{var o,l,d,f;let p=n===a.id,m=w(w({},a.style),gb(a.style.customCss||``));return(0,u.jsxs)(`div`,{draggable:!0,onDragStart:t=>{let n=e.findIndex(e=>e.id===a.id);k(t,n)},onDragOver:t=>{t.preventDefault(),c(e.findIndex(e=>e.id===a.id))},onDrop:t=>{let n=e.findIndex(e=>e.id===a.id);te(t,n)},onClick:e=>{e.stopPropagation(),r(a.id),i(`styles`)},style:{width:s?a.style.width||`48%`:(a.style.position,`100%`),height:a.style.position===`absolute`?a.style.height||`100%`:void 0,position:a.style.position,top:a.style.top,left:a.style.left,zIndex:a.style.zIndex?parseInt(a.style.zIndex):void 0},className:`group/block relative p-0.5 rounded-xl border border-transparent transition-all duration-150 cursor-pointer ${p?`bg-orange-50/20 border-orange-500 shadow-sm ring-2 ring-orange-500/10`:`hover:bg-slate-50/30 hover:border-gray-200`} ${a.style.position===`absolute`?`!absolute !inset-0 !m-auto`:``}`,children:[p&&(0,u.jsxs)(`div`,{className:`absolute -top-3.5 right-3 bg-orange-600 text-white rounded-lg px-2 py-0.5 text-[10px] font-bold flex items-center space-x-1.5 shadow-md z-30 select-none`,children:[(0,u.jsx)(`button`,{onClick:()=>{C(e.findIndex(e=>e.id===a.id),`up`)},className:`hover:text-slate-350`,title:`Move Up`,children:(0,u.jsx)(zb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:()=>{C(e.findIndex(e=>e.id===a.id),`down`)},className:`hover:text-slate-350`,title:`Move Down`,children:(0,u.jsx)(Rb,{className:`h-3 w-3`})}),(0,u.jsx)(`div`,{className:`h-3 w-[1px] bg-slate-700`}),(0,u.jsx)(`button`,{onClick:e=>S(a.id,e),className:`hover:text-slate-350`,title:`Duplicate block`,children:(0,u.jsx)(Hb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:e=>T(a.id,e),className:`hover:text-red-400 text-red-300`,title:`Delete block`,children:(0,u.jsx)(ox,{className:`h-3 w-3`})})]}),a.type===`table`?(0,u.jsx)(`div`,{className:`overflow-x-auto w-full select-none`,children:(0,u.jsxs)(`table`,{style:m,className:`w-full border-collapse`,children:[(0,u.jsx)(`thead`,{children:(0,u.jsx)(`tr`,{children:(o=a.tableInfo)==null?void 0:o.columns.filter(e=>e.enabled!==!1).map((e,t)=>(0,u.jsx)(`th`,{className:`border border-slate-200 px-2.5 py-1 text-slate-700 text-left bg-slate-50 font-sans`,children:e.columnName||``},t))})}),(0,u.jsx)(`tbody`,{children:((l=a.tableInfo)!=null&&l.mockRows&&a.tableInfo.mockRows.length>0?a.tableInfo.mockRows:[{}]).map((e,t)=>{var n;return(0,u.jsx)(`tr`,{className:`bg-slate-50/10 border-b border-slate-100 hover:bg-slate-50/20`,children:(n=a.tableInfo)==null?void 0:n.columns.filter(e=>e.enabled!==!1).map((t,n)=>{let r=e&&typeof e==`object`&&e[t.columnName]||t.placeholder;if(t.loop&&t.columns&&t.columns.length>0){let e=t.columns.filter(e=>e.enabled!==!1);return(0,u.jsx)(`td`,{className:`border border-slate-200 p-2 align-top bg-slate-50/20`,children:(0,u.jsxs)(`div`,{className:`w-full overflow-x-auto space-y-1`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between text-[9px] font-semibold text-slate-500`,children:[(0,u.jsxs)(`span`,{children:[`Sub-table: `,t.columnName]}),(0,u.jsx)(`span`,{className:`px-1.5 py-0.5 bg-slate-200 text-slate-600 rounded text-[8px]`,children:`loop = true`})]}),(0,u.jsxs)(`table`,{className:`w-full border-collapse border border-slate-200 rounded text-xs bg-white`,children:[(0,u.jsx)(`thead`,{children:(0,u.jsx)(`tr`,{children:e.map((e,t)=>(0,u.jsx)(`th`,{className:`border border-slate-200 px-2 py-1 text-slate-700 text-left bg-slate-100/80 font-sans font-semibold text-[10px]`,children:e.columnName},t))})}),(0,u.jsx)(`tbody`,{children:(0,u.jsx)(`tr`,{className:`bg-slate-50/30`,children:e.map((e,t)=>(0,u.jsx)(yx,{blockId:a.id,colIdx:t,placeholder:e.placeholder,onUpdate:e=>ee(a.id,n,e,t),onDrop:e=>D(e,a.id,n,t)},t))})})]})]})},n)}return(0,u.jsx)(yx,{blockId:a.id,colIdx:n,placeholder:r,onUpdate:e=>ee(a.id,n,e),onDrop:e=>D(e,a.id,n)},n)})},t)})})]})}):a.type===`image`?(0,u.jsx)(`div`,{style:{textAlign:m.textAlign||`left`,width:`100%`,marginBottom:m.marginBottom,padding:m.padding,backgroundColor:m.backgroundColor},className:`w-full select-none`,children:(0,u.jsx)(`div`,{style:{width:s?`100%`:a.style.width&&a.style.width.endsWith(`%`)?a.style.width:`100%`,display:`inline-block`},children:((d=a.imageInfo)==null?void 0:d.imageType)===`barcode`?(0,u.jsx)(`div`,{style:{width:a.style.imageWidth||(a.style.width&&a.style.width.endsWith(`px`)?a.style.width:`100%`),height:a.style.height||a.style.minHeight||`70px`},className:`border border-dashed border-slate-200 p-2 bg-slate-50/5 rounded-lg flex items-center justify-center overflow-hidden`,dangerouslySetInnerHTML:{__html:_b(a.imageInfo.barcodeValue||`SHIP-99201`)}}):(0,u.jsx)(`img`,{src:((f=a.imageInfo)==null?void 0:f.url)||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`,style:{width:a.style.imageWidth||(a.style.width&&a.style.width.endsWith(`px`)?a.style.width:`100%`),height:`auto`,maxHeight:a.style.height||`300px`,objectFit:a.style.objectFit||`contain`,opacity:a.style.opacity||`1`,display:`block`},alt:`graphic content`})})}):(0,u.jsx)(vx,{block:a,onUpdate:e=>{t(t=>t.map(t=>t.id===a.id?w(w({},t),{},{content:e}):t))},onSelect:()=>r(a.id),onDrop:e=>O(e,a.id)})]},a.id)})},a.id)}),s!==null&&(0,u.jsx)(`div`,{className:`h-[2px] bg-orange-500 rounded my-1 shadow-md animate-pulse`})]})})})}function Sx({showImportHtml:e=!0,showImportPdf:t=!0,showPreview:n=!0,showExport:r=!0,showExportPdf:i=!0,showClearCanvas:a,customButtonStyles:o,customButtonClassNames:s,customActionComponents:c,handleHtmlImport:d,handlePdfImport:f,setPreviewOpen:p,handleExport:m,handleExportPdf:h,handleClearCanvas:g,zoom:_,setZoom:v,setPanOffset:y}){let b=(0,l.useRef)(null),x=(0,l.useRef)(null);return(0,u.jsxs)(`div`,{className:`bg-white border-b border-gray-200 px-4 py-2 flex flex-wrap items-center justify-between shadow-xs sticky top-0 z-20 gap-2`,children:[(0,u.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[e&&(0,u.jsxs)(u.Fragment,{children:[c!=null&&c.importHtml?c.importHtml({onClick:()=>{var e;return(e=b.current)==null?void 0:e.click()}}):(0,u.jsxs)(`button`,{onClick:()=>{var e;return(e=b.current)==null?void 0:e.click()},style:o==null?void 0:o.importHtml,className:(s==null?void 0:s.importHtml)||`inline-flex items-center space-x-1 px-2.5 py-1 border border-gray-200 rounded-lg text-xs font-semibold bg-white hover:bg-slate-50 text-slate-700 transition-colors shadow-2xs cursor-pointer`,title:`Import local HTML file`,children:[(0,u.jsx)(cx,{className:`h-3.5 w-3.5 text-slate-500`}),(0,u.jsx)(`span`,{children:`Import HTML`})]}),(0,u.jsx)(`input`,{type:`file`,ref:b,onChange:d,accept:`.html`,className:`hidden`})]}),t&&(0,u.jsxs)(u.Fragment,{children:[c!=null&&c.importPdf?c.importPdf({onClick:()=>{var e;return(e=x.current)==null?void 0:e.click()}}):(0,u.jsxs)(`button`,{onClick:()=>{var e;return(e=x.current)==null?void 0:e.click()},style:o==null?void 0:o.importPdf,className:(s==null?void 0:s.importPdf)||`inline-flex items-center space-x-1 px-2.5 py-1 border border-gray-200 rounded-lg text-xs font-semibold bg-white hover:bg-slate-50 text-slate-700 transition-colors shadow-2xs cursor-pointer`,title:`Import PDF layout structure`,children:[(0,u.jsx)(Gb,{className:`h-3.5 w-3.5 text-slate-500`}),(0,u.jsx)(`span`,{children:`Import PDF`})]}),(0,u.jsx)(`input`,{type:`file`,ref:x,onChange:f,accept:`.pdf`,className:`hidden`})]}),n&&(c!=null&&c.preview?c.preview({onClick:()=>p(!0)}):(0,u.jsxs)(`button`,{onClick:()=>p(!0),style:o==null?void 0:o.preview,className:(s==null?void 0:s.preview)||`inline-flex items-center space-x-1 px-2.5 py-1 border border-slate-200 rounded-lg text-xs font-semibold bg-slate-50 text-slate-700 hover:bg-slate-100 transition-colors shadow-2xs cursor-pointer`,children:[(0,u.jsx)(Wb,{className:`h-3.5 w-3.5 text-slate-500`}),(0,u.jsx)(`span`,{children:`Live Preview`})]})),i&&(c!=null&&c.exportPdf?c.exportPdf({onClick:h}):(0,u.jsxs)(`button`,{onClick:h,style:o==null?void 0:o.exportPdf,className:(s==null?void 0:s.exportPdf)||`inline-flex items-center space-x-1 px-2.5 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-xs font-semibold transition-colors shadow-2xs shadow-indigo-600/10 cursor-pointer`,children:[(0,u.jsx)(Yb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Download PDF`})]})),r&&(c!=null&&c.export?c.export({onClick:m}):(0,u.jsxs)(`button`,{onClick:m,style:o==null?void 0:o.export,className:(s==null?void 0:s.export)||`inline-flex items-center space-x-1 px-2.5 py-1 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-xs font-semibold transition-colors shadow-2xs shadow-orange-600/10 cursor-pointer`,children:[(0,u.jsx)(Ub,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Export Template`})]})),a&&(0,u.jsxs)(`button`,{onClick:g,style:o==null?void 0:o.clearCanvas,className:(s==null?void 0:s.clearCanvas)||`inline-flex items-center space-x-1 px-2.5 py-1 text-xs font-semibold border border-red-200 text-red-650 bg-red-50 hover:bg-red-100 rounded-lg transition-colors cursor-pointer`,title:`Clear all canvas elements`,children:[(0,u.jsx)(ox,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Clear Canvas`})]})]}),(0,u.jsxs)(`div`,{className:`flex items-center space-x-2 bg-slate-50 border border-gray-200 px-2.5 py-0.5 rounded-xl shadow-xs select-none shrink-0`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-1`,children:[(0,u.jsx)(`button`,{onClick:()=>v(e=>Math.max(e-.1,.5)),className:`h-5 w-5 rounded border border-gray-200 bg-white hover:bg-slate-50 flex items-center justify-center font-bold text-slate-650 hover:text-slate-900 transition-colors text-[10px] select-none cursor-pointer`,title:`Zoom Out`,children:`−`}),(0,u.jsxs)(`div`,{className:`w-10 text-center text-[11px] font-bold text-slate-700`,children:[Math.round(_*100),`%`]}),(0,u.jsx)(`button`,{onClick:()=>v(e=>Math.min(e+.1,2)),className:`h-5 w-5 rounded border border-gray-200 bg-white hover:bg-slate-50 flex items-center justify-center font-bold text-slate-650 hover:text-slate-900 transition-colors text-[10px] select-none cursor-pointer`,title:`Zoom In`,children:`+`})]}),(0,u.jsx)(`div`,{className:`h-3.5 w-[1px] bg-gray-200`}),(0,u.jsx)(`input`,{type:`range`,min:`0.5`,max:`2.0`,step:`0.05`,value:_,onChange:e=>v(parseFloat(e.target.value)),className:`w-16 accent-orange-600 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`}),(0,u.jsx)(`button`,{onClick:()=>{v(1),y({x:0,y:0})},className:`text-[9px] font-bold text-slate-500 hover:text-slate-800 hover:underline cursor-pointer`,children:`Reset`})]})]})}function Cx({previewOpen:e,setPreviewOpen:t,generateExportHtml:n}){return e?(0,u.jsx)(`div`,{className:`fixed inset-0 bg-slate-950/65 backdrop-blur-xs flex items-center justify-center z-50 p-6`,children:(0,u.jsxs)(`div`,{className:`bg-white rounded-2xl w-full max-w-[900px] h-[90%] flex flex-col shadow-2xl overflow-hidden border border-gray-200`,children:[(0,u.jsxs)(`div`,{className:`bg-slate-50 border-b border-gray-200 px-6 py-4 flex items-center justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsxs)(`h3`,{className:`text-sm font-bold text-slate-800 flex items-center space-x-2`,children:[(0,u.jsx)(Wb,{className:`h-4 w-4 text-slate-655`}),(0,u.jsx)(`span`,{children:`HTML Document Render Output`})]}),(0,u.jsx)(`p`,{className:`text-[10px] text-slate-400 mt-0.5`,children:`Sandboxed iframe preview of final template markup`})]}),(0,u.jsx)(`button`,{onClick:()=>t(!1),className:`p-1.5 bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-800 rounded-lg transition-colors`,children:(0,u.jsx)(lx,{className:`h-4 w-4`})})]}),(0,u.jsx)(`div`,{className:`flex-1 bg-slate-100 p-6 overflow-hidden`,children:(0,u.jsx)(`iframe`,{title:`HTML Preview Sandbox`,srcDoc:n(!0),className:`w-full h-full bg-white border border-gray-200 rounded-xl shadow-xs`,sandbox:`allow-same-origin`})}),(0,u.jsxs)(`details`,{className:`bg-slate-50 border-t border-gray-200`,children:[(0,u.jsxs)(`summary`,{className:`px-6 py-3 text-xs font-bold text-slate-600 cursor-pointer select-none hover:text-slate-800 flex items-center justify-between`,children:[(0,u.jsx)(`span`,{children:`View Raw Output Markup (HTML)`}),(0,u.jsx)(`span`,{className:`text-[10px] text-slate-400 font-medium font-sans`,children:`Click to expand`})]}),(0,u.jsx)(`div`,{className:`px-6 pb-6 overflow-x-auto max-h-[250px]`,children:(0,u.jsx)(`pre`,{className:`bg-slate-900 text-slate-200 p-4 rounded-lg text-[10px] font-mono whitespace-pre-wrap select-all`,children:n(!1)})})]})]})}):null}function wx({bubbleCoords:e,applySelectionFormat:t}){return e?(0,u.jsxs)(`div`,{className:`fixed bg-slate-900 border border-slate-800 text-white rounded-xl shadow-xl py-1 px-1.5 flex items-center space-x-1.5 z-50 select-none -translate-x-1/2`,style:{left:`${e.x}px`,top:`${e.y}px`},children:[(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`bold`)},className:`h-6 w-6 rounded hover:bg-slate-800 flex items-center justify-center font-bold text-xs text-slate-200 hover:text-white transition-colors`,title:`Bold Selection`,children:`B`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`italic`)},className:`h-6 w-6 rounded hover:bg-slate-800 flex items-center justify-center italic text-xs text-slate-200 hover:text-white transition-colors`,title:`Italic Selection`,children:`I`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`underline`)},className:`h-6 w-6 rounded hover:bg-slate-800 flex items-center justify-center underline text-xs text-slate-200 hover:text-white transition-colors`,title:`Underline Selection`,children:`U`}),(0,u.jsx)(`div`,{className:`h-4 w-[1px] bg-slate-800 mx-1`}),(0,u.jsxs)(`select`,{value:e.format||``,onChange:e=>{e.preventDefault(),e.target.value&&(t(`formatBlock`,e.target.value),e.target.value===`P`&&t(`fontSize`,`3`))},className:`bg-slate-800 text-white text-[10px] rounded px-1 py-0.5 outline-none cursor-pointer border border-slate-700`,children:[(0,u.jsx)(`option`,{value:``,disabled:!0,children:`Format...`}),(0,u.jsx)(`option`,{value:`H1`,children:`Heading 1`}),(0,u.jsx)(`option`,{value:`H2`,children:`Heading 2`}),(0,u.jsx)(`option`,{value:`H3`,children:`Heading 3`}),(0,u.jsx)(`option`,{value:`P`,children:`Paragraph`}),(0,u.jsx)(`option`,{value:`BLOCKQUOTE`,children:`Quote`})]}),(0,u.jsx)(`div`,{className:`h-4 w-[1px] bg-slate-800 mx-1`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`foreColor`,`#3b82f6`)},className:`h-4 w-4 rounded-full bg-blue-500 hover:scale-110 transition-transform cursor-pointer`,title:`Color Blue`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`foreColor`,`#ef4444`)},className:`h-4 w-4 rounded-full bg-red-500 hover:scale-110 transition-transform cursor-pointer`,title:`Color Red`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`foreColor`,`#1e293b`)},className:`h-4 w-4 rounded-full bg-slate-700 hover:scale-110 transition-transform cursor-pointer border border-slate-850`,title:`Color Slate`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`foreColor`,`#22c55e`)},className:`h-4 w-4 rounded-full bg-green-500 hover:scale-110 transition-transform cursor-pointer`,title:`Color Green`}),(0,u.jsx)(`div`,{className:`h-4 w-[1px] bg-slate-800`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`removeFormat`)},className:`hover:bg-slate-800 rounded text-[10px] px-1.5 h-6 flex items-center justify-center text-slate-400 hover:text-white font-semibold transition-colors`,title:`Clear Formatting`,children:`Clear`})]}):null}zu.workerSrc=`https://cdn.jsdelivr.net/npm/pdfjs-dist@6.1.200/build/pdf.worker.min.mjs`;var Tx=e=>{let t=[];return e.forEach(e=>{e.style.sameRow&&t.length>0?t[t.length-1].blocks.push(e):t.push({id:e.id,blocks:[e]})}),t},Ex=e=>e?e.replace(/contenteditable="[^"]*"/g,``).replace(/class="[^"]*"/g,``).replace(/data-placeholder="[^"]*"/g,``).replace(/&nbsp;/g,` `).trim():``;function Dx({tableSchemas:e,placeholders:t,defaultLogo:n,defaultBanner:r,headerTitle:i=`HTML Template Builder`,headerSubtitle:a=`Design and export templates dynamically`,headerLogo:o,typographySizes:s,typographyWeights:c,typographyFonts:d,templatingLanguage:f=`csharp`,loopSyntax:p=`foreach`,onChange:m,onExport:h,onExportPdf:g,initialBlocks:v,defaultStyles:y,showImportHtml:b=!0,showImportPdf:x=!0,showClearCanvas:S=!0,showPreview:C=!0,showExport:T=!0,showExportPdf:E=!0,showHeader:D=!0,isTablesLoading:O,tablesLoading:k,isPlaceholdersLoading:te,placeholdersLoading:A,customButtonStyles:ne,customButtonClassNames:re,customActionComponents:j}={}){let{zoom:ie,setZoom:ae,panOffset:oe,setPanOffset:se,spacePressed:ce,canvasHeight:le,viewportRef:ue,canvasContainerRef:de,handleMouseDown:fe,handleMouseMove:pe,handleMouseUp:me}=Sb(),{customTableName:he,setCustomTableName:ge,customLoopStart:_e,setCustomLoopStart:ve,customLoopEnd:ye,setCustomLoopEnd:be,newColName:xe,setNewColName:Se,newColPlaceholder:Ce,setNewColPlaceholder:we,bubbleCoords:Te,setBubbleCoords:M,schemas:N,isParsing:Ee,setIsParsing:De,parseStatusText:Oe,setParseStatusText:ke,parseError:Ae,setParseError:je,draggedSidebarItem:P,setDraggedSidebarItem:Me,dragOverIndex:Ne,setDragOverIndex:Pe,newImgTypeName:Fe,setNewImgTypeName:Ie,customImageTypes:Le,searchPlaceholder:F,setSearchPlaceholder:I,handleAddCustomTable:Re,handleAddCustomImageType:ze,toggleSchemaColumn:Be,applySelectionFormat:Ve,setSavedRange:He}=Cb({tableSchemas:e}),{blocks:L,setBlocks:Ue,selectedBlockId:We,setSelectedBlockId:Ge,getSelectedBlock:Ke,createTextBlock:qe,createTableBlock:Je,createImageBlock:Ye,handleDeleteBlock:Xe,handleDuplicateBlock:Ze,handleMoveBlockUp:R,handleMoveBlockDown:z,updateSelectedStyle:Qe,updateSelectedImageInfo:$e,handleRemoveTableColumn:et,handleAddTableColumn:tt,handleUpdateTableColumn:nt,handleReorderTableColumn:rt,handleAddTableRow:it,handleRemoveTableRow:at}=xb({initialBlocks:v,defaultStyles:y,defaultLogo:n,defaultBanner:r,onChange:m}),[ot,st]=(0,l.useState)(`text`),[ct,B]=(0,l.useState)(!1),[lt]=(0,l.useState)(!0),[ut]=(0,l.useState)(s||[{label:`8px`,value:`8px`},{label:`9px`,value:`9px`},{label:`10px`,value:`10px`},{label:`11px`,value:`11px`},{label:`12px`,value:`12px`},{label:`14px`,value:`14px`},{label:`16px`,value:`16px`},{label:`18px`,value:`18px`},{label:`20px`,value:`20px`},{label:`24px`,value:`24px`},{label:`28px`,value:`28px`},{label:`32px`,value:`32px`},{label:`36px`,value:`36px`}]),[dt]=(0,l.useState)(d||[{label:`Outfit (Default)`,value:`'Outfit', 'Inter', sans-serif`},{label:`Inter`,value:`'Inter', sans-serif`},{label:`Roboto`,value:`'Roboto', sans-serif`},{label:`System Sans`,value:`system-ui, -apple-system, sans-serif`},{label:`Georgia (Serif)`,value:`Georgia, serif`},{label:`Courier New (Mono)`,value:`'Courier New', monospace`}]),[ft]=(0,l.useState)(c||[{label:`Light`,value:`300`},{label:`Regular`,value:`400`},{label:`Medium`,value:`500`},{label:`Semibold`,value:`600`},{label:`Bold`,value:`700`},{label:`Extra Bold`,value:`800`}]),[pt]=(0,l.useState)(f),[mt]=(0,l.useState)(p),[ht]=(0,l.useState)(!0),gt={};(0,l.useEffect)(()=>{let e=()=>{let e=window.getSelection();if(!e||e.isCollapsed||e.toString().trim()===``){M(null),He(null);return}let t=document.activeElement;if(!(t&&t.getAttribute(`contenteditable`)===`true`&&(t.closest(`.canvas-editor-area`)||t.closest(`td`)))){M(null),He(null);return}try{let t=e.getRangeAt(0),n=t.getBoundingClientRect(),r=document.queryCommandValue(`formatBlock`)||``;r=r.toUpperCase(),M({x:n.left+n.width/2,y:n.top-38,format:r}),He(t)}catch(e){M(null),He(null)}};return document.addEventListener(`selectionchange`,e),()=>document.removeEventListener(`selectionchange`,e)},[M,He]),(0,l.useEffect)(()=>{let e=ue.current;if(!e)return;let t=e=>{if(e.ctrlKey){e.preventDefault();let t=e.deltaY<0?1:-1;ae(e=>Math.min(2,Math.max(.5,e+t*.05)))}};return e.addEventListener(`wheel`,t,{passive:!1}),()=>e.removeEventListener(`wheel`,t)},[ue,ae]),(0,l.useEffect)(()=>{window.updateContentFromRawDelete=(e,t)=>{Ue(n=>n.map(n=>n.id===e?w(w({},n),{},{content:t}):n))}},[Ue]);let _t=e=>{var t;let n=(t=e.target.files)==null?void 0:t[0];if(!n)return;De(!0),ke(`Parsing HTML...`),je(null);let r=new FileReader;r.onload=t=>{try{var n;let e=yb((n=t.target)==null?void 0:n.result);e.length>0&&Ue(e)}catch(e){console.error(e),je(e.message||`Failed to parse HTML`)}finally{De(!1),e.target&&(e.target.value=``)}},r.readAsText(n)},vt=e=>{var t;let n=(t=e.target.files)==null?void 0:t[0];if(!n)return;De(!0),ke(`Reading PDF text layers...`),je(null);let r=new FileReader;r.onload=_(function*(){try{let e=r.result,t=yield bb(e,ee);t.length>0&&Ue(e=>[...e,...t])}catch(e){console.error(e),je(e.message||`Failed to read PDF`)}finally{De(!1),e.target&&(e.target.value=``)}}),r.readAsArrayBuffer(n)},yt=e=>{let t=e||`items`;if(pt===`handlebars`||pt===`mustache`){let e=mt===`foreach`?`foreach`:`each`;return{start:`{{#${e} ${t}}}`,end:`{{/${e}}}`}}return pt===`liquid`||pt===`scriban`||pt===`dotnet`?{start:`{% for ${t.endsWith(`s`)?t.slice(0,-1):`item`} in ${t} %}`,end:`{% endfor %}`}:pt===`js`||pt===`ts`?{start:`\${${t}.map(${t.endsWith(`s`)?t.slice(0,-1):`item`} => \``,end:"`).join('')}"}:pt===`csharp`||pt===`razor`?{start:`@foreach (var ${t.endsWith(`s`)?t.slice(0,-1):`item`} in ${t}) {`,end:`}`}:{start:_e.replace(`items`,t),end:ye}},bt=(e=!1)=>{let t=`<!DOCTYPE html>
+  </svg>`},vb=(e,t)=>{let n=`11px`,r=`400`;return e===`h1`?(n=`24px`,r=`700`):e===`h2`?(n=`20px`,r=`700`):e===`h3`?(n=`16px`,r=`600`):e===`h4`?(n=`14px`,r=`600`):e===`h5`?(n=`12px`,r=`600`):e===`h6`?(n=`10px`,r=`600`):e===`title`?(n=`28px`,r=`800`):e===`subtitle`?(n=`14px`,r=`300`):e===`caption`&&(n=`9px`,r=`400`),{id:`block-${Math.random().toString(36).substr(2,9)}`,type:e,content:t,style:{fontSize:n,fontWeight:r,color:`#1e293b`,backgroundColor:`transparent`,textAlign:`left`,bold:[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`,`title`].includes(e),italic:!1,underline:!1,strikethrough:!1,width:`100%`,marginBottom:`8px`,padding:`8px`,minHeight:`auto`}}},yb=e=>{let t=new DOMParser().parseFromString(e,`text/html`),n=[],r=Array.from(t.body.children);if(r.length===0){let e=t.body.innerText||t.body.textContent||``;e.trim()&&n.push(vb(`p`,e.trim()))}else{let e=t.querySelectorAll(`style`),i=[];e.forEach(e=>{let t=e.textContent||``,n=/([^{]+)\{([^}]+)\}/g,r;for(;(r=n.exec(t))!==null;){let e=r[1].trim(),t=r[2].trim(),n={};t.split(`;`).forEach(e=>{let t=e.split(`:`);t.length===2&&(n[t[0].trim().toLowerCase()]=t[1].trim())}),i.push({selector:e,styles:n})}});let a=e=>{let t={fontSize:`11px`,fontWeight:`400`,color:`#1e293b`,backgroundColor:`transparent`,textAlign:`left`,bold:!1,italic:!1,underline:!1,strikethrough:!1,width:`100%`,marginBottom:`8px`,padding:`8px`},n=e.style;return n.fontSize&&(t.fontSize=n.fontSize),n.fontWeight&&(t.fontWeight=n.fontWeight),n.color&&(t.color=n.color),n.backgroundColor&&(t.backgroundColor=n.backgroundColor),n.textAlign&&(t.textAlign=n.textAlign),n.padding&&(t.padding=n.padding),n.marginBottom&&(t.marginBottom=n.marginBottom),n.width&&(t.width=n.width),i.forEach(n=>{try{e.matches(n.selector)&&(n.styles[`font-size`]&&(t.fontSize=n.styles[`font-size`]),n.styles[`font-weight`]&&(t.fontWeight=n.styles[`font-weight`]),n.styles.color&&(t.color=n.styles.color),n.styles[`background-color`]&&(t.backgroundColor=n.styles[`background-color`]),n.styles[`text-align`]&&(t.textAlign=n.styles[`text-align`]),n.styles.padding&&(t.padding=n.styles.padding),n.styles[`margin-bottom`]&&(t.marginBottom=n.styles[`margin-bottom`]),n.styles.width&&(t.width=n.styles.width))}catch(e){}}),(t.fontWeight===`bold`||parseInt(t.fontWeight)>=600)&&(t.bold=!0),t};r.forEach(e=>{let t=e;if(t.tagName===`STYLE`)return;let r=t.querySelector(`table, img, h1, h2, h3, h4, h5, h6, p, span, div`)||t,i=r.tagName.toLowerCase(),o=a(r);if(i===`table`){let e=Array.from(r.querySelectorAll(`thead th`));e.length===0&&(e=Array.from(r.querySelectorAll(`tr:first-child th, tr:first-child td`)));let t=e.map(e=>{var t,n;return{columnName:((t=e.textContent)==null?void 0:t.trim())||`Header`,placeholder:`{{item.${((n=e.textContent)==null?void 0:n.trim().toLowerCase().replace(/\s+/g,`_`))||`field`}}}`,enabled:!0}});n.push({id:`block-${Math.random().toString(36).substr(2,9)}`,type:`table`,content:``,style:o,tableInfo:{tableName:`imported_table`,columns:t,loop:!0,isNestable:!1,parentPath:`items`,maxNestingDepth:5,nestingPrefix:` `,showNestingLevel:!1}})}else if(i===`img`)n.push({id:`block-${Math.random().toString(36).substr(2,9)}`,type:`image`,content:``,style:o,imageInfo:{imageType:`logo`,url:r.getAttribute(`src`)||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`}});else if(i===`svg`)n.push({id:`block-${Math.random().toString(36).substr(2,9)}`,type:`image`,content:``,style:o,imageInfo:{imageType:`barcode`,barcodeValue:`SHIP-99201`,barcodePlaceholder:`{{barcode}}`}});else{let e=`p`;[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`].includes(i)?e=i:i===`span`&&(e=`caption`),n.push({id:`block-${Math.random().toString(36).substr(2,9)}`,type:e,content:r.innerHTML||r.textContent||``,style:o})}})}return n},bb=function(){var e=_(function*(e,t){let n=yield t.getDocument({data:new Uint8Array(e)}).promise,r=[],i=Math.min(n.numPages,3);for(let e=1;e<=i;e++){let t=(yield(yield n.getPage(e)).getTextContent()).items.map(e=>({text:e.str,x:e.transform[4],y:e.transform[5],fontSize:e.transform[3]})).filter(e=>e.text.trim()!==``);if(t.length===0)continue;t.sort((e,t)=>Math.abs(e.y-t.y)<6?e.x-t.x:t.y-e.y);let i=[],a=[];if(t.forEach(e=>{if(a.length===0)a.push(e);else{let t=a[a.length-1];if(Math.abs(e.y-t.y)<6)a.push(e);else{let t=a.map(e=>e.text).join(` `),n=a.reduce((e,t)=>e+t.y,0)/a.length,r=Math.max(...a.map(e=>e.fontSize));i.push({y:n,fontSize:r,text:t}),a=[e]}}}),a.length>0){let e=a.map(e=>e.text).join(` `),t=a.reduce((e,t)=>e+t.y,0)/a.length,n=Math.max(...a.map(e=>e.fontSize));i.push({y:t,fontSize:n,text:e})}i.forEach(e=>{let t=`p`,n=e.fontSize>16;n?t=e.fontSize>26?`h1`:e.fontSize>20?`h2`:`h3`:e.fontSize<10&&(t=`caption`);let i=Math.round(e.fontSize*1.15)+`px`;r.push({id:`pdf-block-${Math.random().toString(36).substr(2,9)}`,type:t,content:e.text,style:{fontSize:i,fontWeight:n?`700`:`400`,color:`#1e293b`,backgroundColor:`transparent`,textAlign:`left`,bold:n,italic:!1,underline:!1,strikethrough:!1}})})}return r});return function(t,n){return e.apply(this,arguments)}}();function xb({initialBlocks:e,defaultStyles:t,defaultLogo:n,defaultBanner:r,onChange:i}={}){let[a,o]=(0,l.useState)(e||[]),[s,c]=(0,l.useState)(null);(0,l.useEffect)(()=>{i&&i(a)},[a,i]);let u=()=>a.find(e=>e.id===s)||null,d=(e,t,n)=>{let r={};return e===`title`?r={fontSize:`24px`,fontWeight:`800`}:e===`subtitle`?r={fontSize:`14px`,fontWeight:`700`,color:`#64748b`}:e===`h1`?r={fontSize:`20px`,fontWeight:`800`}:e===`h2`?r={fontSize:`18px`,fontWeight:`700`}:e===`h3`?r={fontSize:`16px`,fontWeight:`600`}:e===`caption`&&(r={fontSize:`10px`,color:`#94a3b8`}),{id:Math.random().toString(36).substring(2,11),type:e,content:t,style:w(w({fontSize:`12px`,fontWeight:`normal`,textAlign:`left`,color:`#1e293b`,backgroundColor:`transparent`,marginBottom:`0px`,padding:`0px`,bold:!1,italic:!1,underline:!1,strikethrough:!1},r),n)}},f=e=>w(w({},e),{},{columns:e.columns?e.columns.map(f):void 0});return{blocks:a,setBlocks:o,selectedBlockId:s,setSelectedBlockId:c,getSelectedBlock:u,createTextBlock:d,createTableBlock:e=>({id:Math.random().toString(36).substring(2,11),type:`table`,content:``,style:w({fontSize:`11px`,fontWeight:`normal`,textAlign:`left`,color:`#334155`,backgroundColor:`transparent`,marginBottom:`0px`,padding:`0px`,bold:!1,italic:!1,underline:!1,strikethrough:!1},(t==null?void 0:t.table)||{}),tableInfo:w(w({},e),{},{columns:e.columns.map(f),mockRows:[]})}),createImageBlock:e=>{let i=`100%`,a=`120px`;return e===`logo`?(i=`120px`,a=`60px`):e===`banner`?(i=`100%`,a=`150px`):e===`barcode`?(i=`200px`,a=`80px`):e===`watermark`&&(i=`300px`,a=`300px`),{id:Math.random().toString(36).substring(2,11),type:`image`,content:``,style:w(w({fontSize:`12px`,fontWeight:`normal`,color:`#000055`,backgroundColor:`transparent`,textAlign:`center`,marginBottom:`0px`,padding:`0px`,width:`100%`,imageWidth:i,height:a,minHeight:a,bold:!1,italic:!1,underline:!1,strikethrough:!1},(t==null?void 0:t.image)||{}),e===`watermark`?{opacity:`0.2`,position:`absolute`,top:`0`,left:`0`,zIndex:10,height:`100%`}:{}),imageInfo:{imageType:e,url:e===`logo`?n||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`:e===`banner`?r||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`:fb,barcodeValue:e===`barcode`?`SHIP-99201`:void 0,barcodePlaceholder:e===`barcode`?`{{barcode}}`:void 0}}},handleDeleteBlock:e=>{o(t=>t.filter(t=>t.id!==e)),s===e&&c(null)},handleDuplicateBlock:e=>{let t=a.find(t=>t.id===e);if(!t)return;let n=w(w({},t),{},{id:Math.random().toString(36).substring(2,11),style:w({},t.style),tableInfo:t.tableInfo?w(w({},t.tableInfo),{},{columns:t.tableInfo.columns.map(f),mockRows:t.tableInfo.mockRows?[...t.tableInfo.mockRows]:void 0}):void 0,imageInfo:t.imageInfo?w({},t.imageInfo):void 0}),r=a.findIndex(t=>t.id===e);o(e=>{let t=[...e];return t.splice(r+1,0,n),t}),c(n.id)},handleMoveBlockUp:e=>{e!==0&&o(t=>{let n=[...t],r=n[e];return n[e]=n[e-1],n[e-1]=r,n})},handleMoveBlockDown:e=>{e!==a.length-1&&o(t=>{let n=[...t],r=n[e];return n[e]=n[e+1],n[e+1]=r,n})},updateSelectedStyle:(e,t)=>{s&&o(n=>n.map(n=>n.id===s?w(w({},n),{},{style:w(w({},n.style),{},{[e]:t})}):n))},updateSelectedImageInfo:(e,t)=>{s&&o(i=>i.map(i=>{if(i.id===s&&i.type===`image`){let a={};return e===`imageType`&&(a=t===`logo`?{url:n||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`}:t===`banner`?{url:r||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`}:t===`barcode`?{barcodeValue:`SHIP-99201`,barcodePlaceholder:`{{barcode}}`}:{url:fb}),w(w({},i),{},{imageInfo:w(w({},i.imageInfo),{},{[e]:t},a)})}return i}))},handleRemoveTableColumn:(e,t)=>{s&&o(n=>n.map(n=>{if(n.id===s&&n.type===`table`&&n.tableInfo){var r;let i=[...n.tableInfo.columns];if(t!==void 0&&(r=i[e])!=null&&r.columns){let n=i[e].columns.filter((e,n)=>n!==t);i[e]=w(w({},i[e]),{},{columns:n})}else i.splice(e,1);return w(w({},n),{},{tableInfo:w(w({},n.tableInfo),{},{columns:i})})}return n}))},handleAddTableColumn:(e,t,n,r)=>{!s||!e.trim()||o(i=>i.map(i=>{if(i.id===s&&i.type===`table`&&i.tableInfo){let a=[...i.tableInfo.columns];if(r!==void 0&&a[r]){let n=a[r].columns||[];a[r]=w(w({},a[r]),{},{loop:!0,columns:[...n,{columnName:e.trim(),placeholder:t.trim(),enabled:!0}]})}else n?a.push({columnName:e.trim(),placeholder:t.trim(),enabled:!0,loop:!0,columns:[]}):a.push({columnName:e.trim(),placeholder:t.trim(),enabled:!0});return w(w({},i),{},{tableInfo:w(w({},i.tableInfo),{},{columns:a})})}return i}))},handleUpdateTableColumn:(e,t,n,r)=>{s&&o(i=>i.map(i=>{if(i.id===s&&i.type===`table`&&i.tableInfo){var a;let o=[...i.tableInfo.columns];if(r!==void 0&&(a=o[e])!=null&&a.columns){let i=[...o[e].columns];i[r]=w(w({},i[r]),{},{columnName:t.trim(),placeholder:n.trim()}),o[e]=w(w({},o[e]),{},{columns:i})}else o[e]&&(o[e]=w(w({},o[e]),{},{columnName:t.trim(),placeholder:n.trim()}));return w(w({},i),{},{tableInfo:w(w({},i.tableInfo),{},{columns:o})})}return i}))},handleReorderTableColumn:(e,t,n)=>{s&&o(r=>r.map(r=>{if(r.id===s&&r.type===`table`&&r.tableInfo){var i;let a=[...r.tableInfo.columns];if(n!==void 0&&(i=a[e])!=null&&i.columns){let r=[...a[e].columns],i=t===`up`?n-1:n+1;if(i>=0&&i<r.length){let t=r[n];r[n]=r[i],r[i]=t,a[e]=w(w({},a[e]),{},{columns:r})}}else{let n=t===`up`?e-1:e+1;if(n>=0&&n<a.length){let t=a[e];a[e]=a[n],a[n]=t}}return w(w({},r),{},{tableInfo:w(w({},r.tableInfo),{},{columns:a})})}return r}))},handleAddTableRow:e=>{let t=e||s;t&&o(e=>e.map(e=>{if(e.id===t&&e.type===`table`&&e.tableInfo){let t=e.tableInfo.columns||[],n=e.tableInfo.mockRows&&e.tableInfo.mockRows.length>0?e.tableInfo.mockRows:[{}],r={};return t.forEach(e=>{e.columnName&&(r[e.columnName]=e.placeholder||``)}),w(w({},e),{},{tableInfo:w(w({},e.tableInfo),{},{mockRows:[...n,r]})})}return e}))},handleRemoveTableRow:(e,t)=>{let n=t||s;n&&o(t=>t.map(t=>{if(t.id===n&&t.type===`table`&&t.tableInfo){let n=t.tableInfo.mockRows&&t.tableInfo.mockRows.length>0?t.tableInfo.mockRows:[{}];if(n.length<=1)return w(w({},t),{},{tableInfo:w(w({},t.tableInfo),{},{mockRows:[{}]})});let r=n.filter((t,n)=>n!==e);return w(w({},t),{},{tableInfo:w(w({},t.tableInfo),{},{mockRows:r})})}return t}))}}}function Sb(){let[e,t]=(0,l.useState)(.7),[n,r]=(0,l.useState)({x:0,y:0}),[i,a]=(0,l.useState)(!1),[o,s]=(0,l.useState)(!1),[c,u]=(0,l.useState)(1123),d=(0,l.useRef)({x:0,y:0}),f=(0,l.useRef)(null),p=(0,l.useRef)(null);return(0,l.useEffect)(()=>{let e=e=>{let t=document.activeElement,n=t&&(t.tagName===`INPUT`||t.tagName===`TEXTAREA`||t.getAttribute(`contenteditable`)===`true`);e.code===`Space`&&!n&&(s(!0),e.preventDefault())},t=e=>{e.code===`Space`&&s(!1)};return window.addEventListener(`keydown`,e),window.addEventListener(`keyup`,t),()=>{window.removeEventListener(`keydown`,e),window.removeEventListener(`keyup`,t)}},[]),(0,l.useEffect)(()=>{if(!p.current)return;let e=new ResizeObserver(e=>{for(let t of e)u(t.target.scrollHeight)});return e.observe(p.current),()=>e.disconnect()},[]),{zoom:e,setZoom:t,panOffset:n,setPanOffset:r,isPanning:i,setIsPanning:a,spacePressed:o,setSpacePressed:s,canvasHeight:c,setCanvasHeight:u,viewportRef:f,canvasContainerRef:p,handleMouseDown:e=>{o&&(a(!0),d.current={x:e.clientX-n.x,y:e.clientY-n.y})},handleMouseMove:e=>{i&&o&&r({x:e.clientX-d.current.x,y:e.clientY-d.current.y})},handleMouseUp:()=>{a(!1)},handleZoomIn:()=>t(e=>Math.min(e+.1,2)),handleZoomOut:()=>t(e=>Math.max(e-.1,.5)),handleZoomReset:()=>{t(1),r({x:0,y:0})}}}function Cb({tableSchemas:e}={}){let[t,n]=(0,l.useState)(`invoice_items`),[r,i]=(0,l.useState)(`{% for item in invoice.items %}`),[a,o]=(0,l.useState)(`{% endfor %}`),[s,c]=(0,l.useState)(``),[u,d]=(0,l.useState)(``),[f,p]=(0,l.useState)(null),[m,h]=(0,l.useState)([]),[g,_]=(0,l.useState)(!1),[v,y]=(0,l.useState)(``),[b,x]=(0,l.useState)(null),[S,C]=(0,l.useState)(``),[T,E]=(0,l.useState)(null),[D,ee]=(0,l.useState)(null),[O,k]=(0,l.useState)(``),[te,A]=(0,l.useState)([]),ne=e=>({columnName:e.columnName||e.columnNameEn||e.columnNameDe||``,placeholder:e.placeholder||``,enabled:e.enabled!==!1,loop:!!e.loop,columns:Array.isArray(e.columns)?e.columns.map(ne):void 0});(0,l.useEffect)(()=>{e&&e.length>0?h(e.map(e=>w(w({},e),{},{columns:e.columns.map(ne)}))):h([])},[e]);let re=()=>{if(!t.trim())return;let e={tableName:t.trim().replace(/\s+/g,`_`).toLowerCase(),columns:[{columnName:`Description`,placeholder:`{{description}}`,enabled:!0},{columnName:`Qty`,placeholder:`{{quantity}}`,enabled:!0},{columnName:`Total Price`,placeholder:`{{total_price}}`,enabled:!0}],loop:!0,isNestable:!1,parentPath:`items`,maxNestingDepth:5,nestingPrefix:` `,showNestingLevel:!1,loopStartTag:r,loopEndTag:a};h(t=>[...t,e]),n(``)},j=()=>{if(!O.trim())return;let e=O.trim().toLowerCase().replace(/\s+/g,`_`);if(te.some(t=>t.imageType===e)){k(``);return}A(t=>[...t,{label:O.trim(),imageType:e,description:`Placeholder container for ${O.trim()}`}]),k(``)},ie=(e,t,n)=>{h(r=>r.map((r,i)=>{if(i===e){var a;let e=[...r.columns];if(n!==void 0&&(a=e[t])!=null&&a.columns){let r=[...e[t].columns];r[n]=w(w({},r[n]),{},{enabled:r[n].enabled===!1}),e[t]=w(w({},e[t]),{},{columns:r})}else e[t]=w(w({},e[t]),{},{enabled:e[t].enabled===!1});return w(w({},r),{},{columns:e})}return r}))},[ae,oe]=(0,l.useState)(null);return{customTableName:t,setCustomTableName:n,customLoopStart:r,setCustomLoopStart:i,customLoopEnd:a,setCustomLoopEnd:o,newColName:s,setNewColName:c,newColPlaceholder:u,setNewColPlaceholder:d,bubbleCoords:f,setBubbleCoords:p,schemas:m,setSchemas:h,isParsing:g,setIsParsing:_,parseStatusText:v,setParseStatusText:y,parseError:b,setParseError:x,draggedSidebarItem:T,setDraggedSidebarItem:E,dragOverIndex:D,setDragOverIndex:ee,newImgTypeName:O,setNewImgTypeName:k,customImageTypes:te,setCustomImageTypes:A,searchPlaceholder:S,setSearchPlaceholder:C,handleAddCustomTable:re,handleAddCustomImageType:j,toggleSchemaColumn:ie,applySelectionFormat:(e,t=``)=>{if(ae){let e=window.getSelection();e==null||e.removeAllRanges(),e==null||e.addRange(ae)}document.execCommand(e,!1,t),p(null)},setSavedRange:oe}}var wb=(...e)=>e.filter((e,t,n)=>!!e&&e.trim()!==``&&n.indexOf(e)===t).join(` `).trim(),Tb=e=>e.replace(/([a-z0-9])([A-Z])/g,`$1-$2`).toLowerCase(),Eb=e=>e.replace(/^([A-Z])|[\s-_]+(\w)/g,(e,t,n)=>n?n.toUpperCase():t.toLowerCase()),Db=e=>{let t=Eb(e);return t.charAt(0).toUpperCase()+t.slice(1)},Ob={xmlns:`http://www.w3.org/2000/svg`,width:24,height:24,viewBox:`0 0 24 24`,fill:`none`,stroke:`currentColor`,strokeWidth:2,strokeLinecap:`round`,strokeLinejoin:`round`},kb=e=>{for(let t in e)if(t.startsWith(`aria-`)||t===`role`||t===`title`)return!0;return!1},Ab=(0,l.createContext)({}),jb=()=>(0,l.useContext)(Ab);function Mb(e,t){if(e==null)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(t.includes(r))continue;n[r]=e[r]}return n}function Nb(e,t){if(e==null)return{};var n,r,i=Mb(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.includes(n)||{}.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}var Pb=[`color`,`size`,`strokeWidth`,`absoluteStrokeWidth`,`className`,`children`,`iconNode`],Fb=(0,l.forwardRef)((e,t)=>{var n,r,i;let{color:a,size:o,strokeWidth:s,absoluteStrokeWidth:c,className:u=``,children:d,iconNode:f}=e,p=Nb(e,Pb),{size:m=24,strokeWidth:h=2,absoluteStrokeWidth:g=!1,color:_=`currentColor`,className:v=``}=(n=jb())==null?{}:n,y=(c==null?g:c)?Number(s==null?h:s)*24/Number(o==null?m:o):s==null?h:s;return(0,l.createElement)(`svg`,w(w(w({ref:t},Ob),{},{width:(r=o==null?m:o)==null?Ob.width:r,height:(i=o==null?m:o)==null?Ob.height:i,stroke:a==null?_:a,strokeWidth:y,className:wb(`lucide`,v,u)},!d&&!kb(p)&&{"aria-hidden":`true`}),p),[...f.map(([e,t])=>(0,l.createElement)(e,t)),...Array.isArray(d)?d:[d]])}),Ib=[`className`],Lb=(e,t)=>{let n=(0,l.forwardRef)((n,r)=>{let{className:i}=n,a=Nb(n,Ib);return(0,l.createElement)(Fb,w({ref:r,iconNode:t,className:wb(`lucide-${Tb(Db(e))}`,`lucide-${e}`,i)},a))});return n.displayName=Db(e),n},Rb=Lb(`arrow-down`,[[`path`,{d:`M12 5v14`,key:`s699le`}],[`path`,{d:`m19 12-7 7-7-7`,key:`1idqje`}]]),zb=Lb(`arrow-up`,[[`path`,{d:`m5 12 7-7 7 7`,key:`hav0vg`}],[`path`,{d:`M12 19V5`,key:`x0mq9r`}]]),Bb=Lb(`barcode`,[[`path`,{d:`M3 5v14`,key:`1nt18q`}],[`path`,{d:`M8 5v14`,key:`1ybrkv`}],[`path`,{d:`M12 5v14`,key:`s699le`}],[`path`,{d:`M17 5v14`,key:`ycjyhj`}],[`path`,{d:`M21 5v14`,key:`nzette`}]]),Vb=Lb(`check`,[[`path`,{d:`M20 6 9 17l-5-5`,key:`1gmf2c`}]]),Hb=Lb(`copy`,[[`rect`,{width:`14`,height:`14`,x:`8`,y:`8`,rx:`2`,ry:`2`,key:`17jyea`}],[`path`,{d:`M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2`,key:`zix9uf`}]]),Ub=Lb(`download`,[[`path`,{d:`M12 15V3`,key:`m9g1x1`}],[`path`,{d:`M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4`,key:`ih7n3h`}],[`path`,{d:`m7 10 5 5 5-5`,key:`brsn70`}]]),Wb=Lb(`eye`,[[`path`,{d:`M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0`,key:`1nclc0`}],[`circle`,{cx:`12`,cy:`12`,r:`3`,key:`1v7zrd`}]]),Gb=Lb(`file-text`,[[`path`,{d:`M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z`,key:`1oefj6`}],[`path`,{d:`M14 2v5a1 1 0 0 0 1 1h5`,key:`wfsgrz`}],[`path`,{d:`M10 9H8`,key:`b1mrlr`}],[`path`,{d:`M16 13H8`,key:`t4e002`}],[`path`,{d:`M16 17H8`,key:`z1uh3a`}]]),Kb=Lb(`image`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,ry:`2`,key:`1m3agn`}],[`circle`,{cx:`9`,cy:`9`,r:`2`,key:`af1f0g`}],[`path`,{d:`m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21`,key:`1xmnt7`}]]),qb=Lb(`pencil`,[[`path`,{d:`M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z`,key:`1a8usu`}],[`path`,{d:`m15 5 4 4`,key:`1mk7zo`}]]),Jb=Lb(`plus`,[[`path`,{d:`M5 12h14`,key:`1ays0h`}],[`path`,{d:`M12 5v14`,key:`s699le`}]]),Yb=Lb(`printer`,[[`path`,{d:`M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2`,key:`143wyd`}],[`path`,{d:`M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6`,key:`1itne7`}],[`rect`,{x:`6`,y:`14`,width:`12`,height:`8`,rx:`1`,key:`1ue0tg`}]]),Xb=Lb(`search`,[[`path`,{d:`m21 21-4.34-4.34`,key:`14j7rj`}],[`circle`,{cx:`11`,cy:`11`,r:`8`,key:`4ej97u`}]]),Zb=Lb(`sliders-vertical`,[[`path`,{d:`M10 8h4`,key:`1sr2af`}],[`path`,{d:`M12 21v-9`,key:`17s77i`}],[`path`,{d:`M12 8V3`,key:`13r4qs`}],[`path`,{d:`M17 16h4`,key:`h1uq16`}],[`path`,{d:`M19 12V3`,key:`o1uvq1`}],[`path`,{d:`M19 21v-5`,key:`qua636`}],[`path`,{d:`M3 14h4`,key:`bcjad9`}],[`path`,{d:`M5 10V3`,key:`cb8scm`}],[`path`,{d:`M5 21v-7`,key:`1w1uti`}]]),Qb=Lb(`sparkles`,[[`path`,{d:`M11.017 2.814a1 1 0 0 1 1.966 0l1.051 5.558a2 2 0 0 0 1.594 1.594l5.558 1.051a1 1 0 0 1 0 1.966l-5.558 1.051a2 2 0 0 0-1.594 1.594l-1.051 5.558a1 1 0 0 1-1.966 0l-1.051-5.558a2 2 0 0 0-1.594-1.594l-5.558-1.051a1 1 0 0 1 0-1.966l5.558-1.051a2 2 0 0 0 1.594-1.594z`,key:`1s2grr`}],[`path`,{d:`M20 2v4`,key:`1rf3ol`}],[`path`,{d:`M22 4h-4`,key:`gwowj6`}],[`circle`,{cx:`4`,cy:`20`,r:`2`,key:`6kqj1y`}]]),$b=Lb(`square-check-big`,[[`path`,{d:`M21 10.656V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h12.344`,key:`2acyp4`}],[`path`,{d:`m9 11 3 3L22 4`,key:`1pflzl`}]]),ex=Lb(`square`,[[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}]]),tx=Lb(`table`,[[`path`,{d:`M12 3v18`,key:`108xh3`}],[`rect`,{width:`18`,height:`18`,x:`3`,y:`3`,rx:`2`,key:`afitv7`}],[`path`,{d:`M3 9h18`,key:`1pudct`}],[`path`,{d:`M3 15h18`,key:`5xshup`}]]),nx=Lb(`text-align-center`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M17 12H7`,key:`16if0g`}],[`path`,{d:`M19 19H5`,key:`vjpgq2`}]]),rx=Lb(`text-align-end`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M21 12H9`,key:`dn1m92`}],[`path`,{d:`M21 19H7`,key:`4cu937`}]]),ix=Lb(`text-align-justify`,[[`path`,{d:`M3 5h18`,key:`1u36vt`}],[`path`,{d:`M3 12h18`,key:`1i2n21`}],[`path`,{d:`M3 19h18`,key:`awlh7x`}]]),ax=Lb(`text-align-start`,[[`path`,{d:`M21 5H3`,key:`1fi0y6`}],[`path`,{d:`M15 12H3`,key:`6jk70r`}],[`path`,{d:`M17 19H3`,key:`z6ezky`}]]),ox=Lb(`trash-2`,[[`path`,{d:`M10 11v6`,key:`nco0om`}],[`path`,{d:`M14 11v6`,key:`outv1u`}],[`path`,{d:`M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6`,key:`miytrc`}],[`path`,{d:`M3 6h18`,key:`d0wm0j`}],[`path`,{d:`M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2`,key:`e791ji`}]]),sx=Lb(`type`,[[`path`,{d:`M12 4v16`,key:`1654pz`}],[`path`,{d:`M4 7V5a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2`,key:`e0r10z`}],[`path`,{d:`M9 20h6`,key:`s66wpe`}]]),cx=Lb(`upload`,[[`path`,{d:`M12 3v12`,key:`1x0j5s`}],[`path`,{d:`m17 8-5-5-5 5`,key:`7q97r8`}],[`path`,{d:`M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4`,key:`ih7n3h`}]]),lx=Lb(`x`,[[`path`,{d:`M18 6 6 18`,key:`1bl5f8`}],[`path`,{d:`m6 6 12 12`,key:`d8bk6v`}]]);function ux({headerLogo:e,headerTitle:t,headerSubtitle:n,parseError:r,isParsing:i,parseStatusText:a}){return(0,u.jsxs)(`header`,{className:`bg-white border-b border-gray-200 px-6 py-3.5 flex items-center justify-between sticky top-0 z-10 shadow-xs gap-4`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-3`,children:[e||(0,u.jsx)(`div`,{className:`h-9 w-9 bg-orange-600 rounded-xl flex items-center justify-center text-white shadow-md shadow-orange-600/20`,children:(0,u.jsx)(Qb,{className:`h-5 w-5`})}),(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h1`,{className:`text-lg font-bold tracking-tight text-slate-800`,children:t}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:n})]})]}),(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[r&&(0,u.jsxs)(`span`,{className:`text-[10px] text-red-500 font-bold bg-red-50 px-2 py-0.5 rounded inline-block border border-red-100`,children:[`Error: `,r]}),i&&(0,u.jsx)(`span`,{className:`text-[10px] text-orange-600 font-bold bg-orange-50 px-2 py-0.5 rounded inline-block border border-orange-100 animate-pulse`,children:a||`Parsing...`})]})]})}function dx({handleSidebarDragStart:e,createTextBlock:t,setBlocks:n,setSelectedBlockId:r,setActiveTab:i,defaultStyles:a}){return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Typography Elements`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Select standard headings or paragraphs to structure your page layout.`})]}),(0,u.jsx)(`div`,{className:`grid grid-cols-1 gap-3 select-none`,children:[{label:`Document Title`,type:`title`,style:`text-2xl font-extrabold text-slate-900 tracking-tight`},{label:`Document Subtitle`,type:`subtitle`,style:`text-sm font-bold text-slate-500`},{label:`Heading 1`,type:`h1`,style:`text-xl font-extrabold text-slate-850`},{label:`Heading 2`,type:`h2`,style:`text-lg font-bold text-slate-800`},{label:`Heading 3`,type:`h3`,style:`text-md font-semibold text-slate-750`},{label:`Normal Paragraph`,type:`p`,style:`text-xs text-slate-600 leading-relaxed`},{label:`Caption Note`,type:`caption`,style:`text-[10px] text-slate-400 font-mono italic`}].map(o=>(0,u.jsxs)(`div`,{draggable:!0,onDragStart:t=>e(t,o.type),className:`border border-gray-200 rounded-xl p-3 bg-white hover:border-slate-350 transition-all flex flex-col space-y-2 cursor-grab shadow-xs group`,children:[(0,u.jsx)(`span`,{className:`text-[9px] font-bold text-slate-400 uppercase tracking-wide`,children:o.type}),(0,u.jsx)(`div`,{className:`${o.style} truncate pr-4`,children:o.label}),(0,u.jsx)(`button`,{onClick:()=>{let e=t(o.type,o.label,a==null?void 0:a[o.type]);n(t=>[...t,e]),r(e.id),i(`styles`)},className:`w-full py-1 bg-slate-50 hover:bg-slate-200 text-slate-600 rounded-lg text-[9px] font-semibold transition-all text-center border border-gray-150`,children:`Insert at End`})]},o.type))})]})}function fx({schemas:e,toggleSchemaColumn:t,customTableName:n,setCustomTableName:r,customLoopStart:i,setCustomLoopStart:a,customLoopEnd:o,setCustomLoopEnd:s,handleAddCustomTable:c,handleSidebarDragStart:l,setBlocks:d,setSelectedBlockId:f,setActiveTab:p,defaultStyles:m,isTablesLoading:h,tablesLoading:g}){return h||g?(0,u.jsxs)(`div`,{className:`space-y-6`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Dynamic Tables`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Configure loop table templates and drag onto the canvas.`})]}),(0,u.jsx)(`div`,{className:`space-y-4 animate-pulse`,children:[1,2].map(e=>(0,u.jsxs)(`div`,{className:`border border-gray-200 rounded-2xl p-4 bg-white space-y-3 shadow-xs`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`div`,{className:`h-4 bg-slate-200 rounded w-1/3`}),(0,u.jsx)(`div`,{className:`h-3 bg-slate-100 rounded w-16`})]}),(0,u.jsx)(`div`,{className:`h-9 bg-slate-100 rounded-lg w-full`}),(0,u.jsxs)(`div`,{className:`space-y-2`,children:[(0,u.jsx)(`div`,{className:`h-3 bg-slate-100 rounded w-1/4`}),(0,u.jsxs)(`div`,{className:`h-20 bg-slate-50 border border-gray-100 rounded-lg w-full p-2 space-y-2`,children:[(0,u.jsx)(`div`,{className:`h-3.5 bg-slate-200/70 rounded w-3/4`}),(0,u.jsx)(`div`,{className:`h-3.5 bg-slate-200/70 rounded w-2/3`})]})]})]},e))})]}):(0,u.jsxs)(`div`,{className:`space-y-6`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Dynamic Tables`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Configure loop table templates and drag onto the canvas.`})]}),(0,u.jsx)(`div`,{className:`space-y-4`,children:e.map((e,n)=>(0,u.jsxs)(`div`,{className:`border border-gray-200 rounded-2xl p-4 bg-white space-y-3 shadow-xs`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(tx,{className:`h-4 w-4 text-slate-650`}),(0,u.jsx)(`h4`,{className:`font-bold text-xs uppercase text-slate-700 tracking-wider`,children:e.tableName})]}),(0,u.jsx)(`span`,{className:`px-1.5 py-0.5 bg-slate-100 text-[8px] font-bold text-slate-600 rounded`,children:`loop = true`})]}),(0,u.jsxs)(`div`,{draggable:!0,onDragStart:t=>l(t,`table`,e),className:`bg-slate-50 border border-slate-200 hover:border-slate-400 rounded-lg p-2.5 flex items-center justify-between cursor-grab`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(`div`,{className:`h-5 w-5 bg-slate-200 rounded flex items-center justify-center`,children:(0,u.jsx)(Jb,{className:`h-3 w-3 text-slate-600`})}),(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700`,children:`Drag to Canvas`})]}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400 italic`,children:`Drag & Drop`})]}),(0,u.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400 font-bold uppercase tracking-wider block`,children:`Columns:`}),(0,u.jsx)(`div`,{className:`max-h-[180px] overflow-y-auto border border-gray-150 rounded-lg p-2 space-y-1.5 bg-slate-50/50`,children:e.columns.map((e,r)=>{let i=e.loop&&e.columns&&e.columns.length>0;return(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsxs)(`button`,{onClick:()=>t(n,r),className:`flex items-center space-x-2 w-full text-left py-0.5 text-xs text-slate-600 hover:text-slate-800 transition-colors font-medium`,children:[e.enabled===!1?(0,u.jsx)(ex,{className:`h-3.5 w-3.5 text-slate-300 flex-shrink-0`}):(0,u.jsx)($b,{className:`h-3.5 w-3.5 text-slate-700 flex-shrink-0`}),(0,u.jsxs)(`span`,{className:`truncate flex items-center gap-1`,children:[(0,u.jsx)(`span`,{children:e.columnName}),i&&(0,u.jsx)(`span`,{className:`px-1 bg-slate-200 text-slate-600 rounded text-[8px] font-mono`,children:`(sub-table)`})]})]}),i&&e.enabled!==!1&&(0,u.jsxs)(`div`,{className:`ml-4 pl-2.5 border-l-2 border-slate-200 space-y-1 my-1`,children:[(0,u.jsx)(`span`,{className:`text-[8px] text-slate-400 font-bold uppercase tracking-wider block`,children:`Sub Columns:`}),e.columns.map((e,i)=>(0,u.jsxs)(`button`,{onClick:()=>t(n,r,i),className:`flex items-center space-x-2 w-full text-left py-0.5 text-[11px] text-slate-500 hover:text-slate-800 transition-colors`,children:[e.enabled===!1?(0,u.jsx)(ex,{className:`h-3 w-3 text-slate-300 flex-shrink-0`}):(0,u.jsx)($b,{className:`h-3 w-3 text-slate-600 flex-shrink-0`}),(0,u.jsxs)(`span`,{className:`truncate`,children:[e.columnName,` `,(0,u.jsxs)(`span`,{className:`text-[8px] text-slate-400`,children:[`(`,e.placeholder,`)`]})]})]},i))]})]},r)})})]}),(0,u.jsx)(`button`,{onClick:()=>{let t={id:Math.random().toString(36).substring(2,11),type:`table`,content:``,style:w({fontSize:`10px`,fontWeight:`400`,color:`#334155`,backgroundColor:`transparent`,textAlign:`left`,bold:!1,italic:!1,underline:!1,strikethrough:!1,width:`100%`,marginBottom:`12px`,padding:`8px`},m==null?void 0:m.table),tableInfo:w(w({},e),{},{columns:e.columns.map(e=>w({},e))})};d(e=>[...e,t]),f(t.id),p(`styles`)},className:`w-full py-1 bg-slate-50 hover:bg-slate-200 text-slate-600 rounded-lg text-[9px] font-semibold transition-all text-center border border-gray-150`,children:`Insert at End`})]},e.tableName))}),(0,u.jsxs)(`div`,{className:`border border-gray-200 rounded-2xl p-4 bg-slate-50/20 border-dashed space-y-4 mt-6`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2 pb-2 border-b border-gray-150`,children:[(0,u.jsx)(Qb,{className:`h-4 w-4 text-slate-655`}),(0,u.jsx)(`h4`,{className:`font-bold text-xs uppercase text-slate-800 tracking-wider`,children:`Custom Table Builder`})]}),(0,u.jsxs)(`div`,{className:`space-y-3`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1`,children:`Table Name`}),(0,u.jsx)(`input`,{type:`text`,value:n,onChange:e=>r(e.target.value),placeholder:`invoice_items`,className:`w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white`})]}),(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1`,children:`Loop Start tag`}),(0,u.jsx)(`input`,{type:`text`,value:i,onChange:e=>a(e.target.value),placeholder:`{% for item in invoice.items %}`,className:`w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:border-slate-500 bg-white text-slate-600 font-bold`})]}),(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500 uppercase tracking-wider block mb-1`,children:`Loop End tag`}),(0,u.jsx)(`input`,{type:`text`,value:o,onChange:e=>s(e.target.value),placeholder:`{% endfor %}`,className:`w-full px-3 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:border-slate-500 bg-white text-slate-600 font-bold`})]}),(0,u.jsxs)(`button`,{onClick:c,className:`w-full py-2 bg-orange-600 hover:bg-orange-700 text-white rounded-xl text-xs font-bold transition-all shadow-sm flex items-center justify-center space-x-1.5 shadow-orange-600/10`,children:[(0,u.jsx)(Jb,{className:`h-4 w-4`}),(0,u.jsx)(`span`,{children:`Add Custom Loop Table`})]})]})]})]})}function px({customImageTypes:e,newImgTypeName:t,setNewImgTypeName:n,handleAddCustomImageType:r,handleSidebarDragStart:i,createImageBlock:a,setBlocks:o,setSelectedBlockId:s,setActiveTab:c}){let l=[{label:`Brand Logo`,imageType:`logo`,description:`Standard document vector logo`,icon:(0,u.jsx)(Kb,{className:`h-4 w-4 text-slate-550`})},{label:`Campaign Banner`,imageType:`banner`,description:`Wide horizontal graphics banner`,icon:(0,u.jsx)(Kb,{className:`h-4 w-4 text-slate-550`})},{label:`Dynamic Barcode`,imageType:`barcode`,description:`Barcode replaced dynamically`,icon:(0,u.jsx)(Bb,{className:`h-4 w-4 text-slate-550`})},{label:`Watermark`,imageType:`watermark`,description:`Background graphic with low opacity`,icon:(0,u.jsx)(Kb,{className:`h-4 w-4 text-slate-550`})},...e.map(e=>({label:e.label,imageType:e.imageType,description:e.description,icon:(0,u.jsx)(Kb,{className:`h-4 w-4 text-slate-550`})}))];return(0,u.jsxs)(`div`,{className:`space-y-4`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Image & Barcode Elements`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Drag elements onto the canvas, or insert below.`})]}),(0,u.jsx)(`div`,{className:`space-y-3`,children:l.map(e=>(0,u.jsxs)(`div`,{className:`border border-gray-200 rounded-xl p-3 bg-white space-y-3 shadow-xs`,children:[(0,u.jsx)(`div`,{className:`flex items-center justify-between`,children:(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[e.icon,(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h4`,{className:`font-bold text-xs text-slate-700`,children:e.label}),(0,u.jsx)(`p`,{className:`text-[9px] text-slate-400`,children:e.description})]})]})}),(0,u.jsxs)(`div`,{draggable:!0,onDragStart:t=>i(t,`image`,void 0,e.imageType),className:`bg-slate-50 border border-slate-200 hover:border-slate-450 rounded-lg p-2 flex items-center justify-between cursor-grab transition-all`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(`div`,{className:`h-5 w-5 bg-slate-200 rounded flex items-center justify-center`,children:(0,u.jsx)(Jb,{className:`h-3 w-3 text-slate-750`})}),(0,u.jsx)(`span`,{className:`text-[11px] font-bold text-slate-700`,children:`Drag to Canvas`})]}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400 italic`,children:`Drag`})]}),(0,u.jsx)(`button`,{onClick:()=>{let t=a(e.imageType);o(e=>[...e,t]),s(t.id),c(`styles`)},className:`w-full py-1 bg-slate-100 hover:bg-slate-200 text-slate-600 rounded-lg text-[10px] font-semibold transition-all text-center border border-gray-150`,children:`Insert at End`})]},e.imageType))}),(0,u.jsxs)(`div`,{className:`border border-dashed border-gray-200 rounded-xl p-3 space-y-2 bg-slate-50/50 mt-4`,children:[(0,u.jsx)(`span`,{className:`text-[10px] font-bold text-slate-500 uppercase tracking-wider block`,children:`Add Custom Image Type`}),(0,u.jsx)(`input`,{type:`text`,value:t,onChange:e=>n(e.target.value),placeholder:`e.g. Signature`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs focus:outline-none focus:border-slate-500 bg-white`}),(0,u.jsxs)(`button`,{onClick:r,className:`w-full py-1.5 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-xs font-bold transition-all flex items-center justify-center space-x-1`,children:[(0,u.jsx)(Jb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Add Custom Category`})]})]})]})}function mx({placeholders:e,schemas:t,searchPlaceholder:n,setSearchPlaceholder:r,selectedBlockId:i,setBlocks:a,isPlaceholdersLoading:o,placeholdersLoading:s}){if(o||s)return(0,u.jsxs)(`div`,{className:`space-y-4 flex-1 flex flex-col min-h-0`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Variables Palette`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Click to copy, or drag variables into text areas or table cells.`})]}),(0,u.jsx)(`div`,{className:`h-9 bg-slate-100 rounded-xl w-full animate-pulse`}),(0,u.jsx)(`div`,{className:`flex-1 overflow-y-auto space-y-2 pr-1 animate-pulse`,children:[1,2,3,4].map(e=>(0,u.jsxs)(`div`,{className:`w-full border border-gray-200 p-2.5 rounded-xl bg-white shadow-xs space-y-2`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`div`,{className:`h-3.5 bg-slate-200 rounded w-1/2`}),(0,u.jsx)(`div`,{className:`h-3.5 bg-slate-100 rounded w-1/4`})]}),(0,u.jsx)(`div`,{className:`h-6 bg-slate-50 rounded border border-gray-100 w-full`})]},e))})]});let c=()=>{let t=[];return(e||[]).forEach(e=>{t.push({label:e.label,placeholder:e.placeholder,category:e.category||`General`})}),t.filter(e=>e.label.toLowerCase().includes(n.toLowerCase())||e.placeholder.toLowerCase().includes(n.toLowerCase()))},l=e=>{if(i){let t=`{{${e.replace(/[{}]/g,``)}}}`;a(e=>e.map(e=>e.id===i&&e.type!==`table`?w(w({},e),{},{content:e.content+t}):e))}},d=c();return(0,u.jsxs)(`div`,{className:`space-y-4 flex-1 flex flex-col min-h-0`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Variables Palette`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Click to copy, or drag variables into text areas or table cells.`})]}),(0,u.jsxs)(`div`,{className:`relative`,children:[(0,u.jsx)(Xb,{className:`absolute left-3 top-2.5 h-4 w-4 text-slate-400`}),(0,u.jsx)(`input`,{type:`text`,value:n,onChange:e=>r(e.target.value),placeholder:`Search variables...`,className:`w-full pl-9 pr-4 py-2 border border-gray-200 rounded-xl text-xs focus:outline-none focus:border-slate-500 transition-colors`})]}),(0,u.jsx)(`div`,{className:`flex-1 overflow-y-auto space-y-2 pr-1`,children:d.length===0?(0,u.jsx)(`div`,{className:`text-xs text-slate-400 italic text-center py-4`,children:`No variables available.`}):d.map((e,t)=>{let n=e.placeholder.replace(/[{}]/g,``);return(0,u.jsx)(`div`,{className:`w-full border border-gray-200 p-2.5 rounded-xl bg-white shadow-xs cursor-grab active:cursor-grabbing hover:bg-slate-50 transition-colors`,draggable:!0,onDragStart:e=>{e.dataTransfer.setData(`placeholder`,n),e.dataTransfer.effectAllowed=`copy`},onClick:()=>l(e.placeholder),title:`Drag into text or cells, or click to insert`,children:(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`span`,{className:`text-xs font-semibold text-slate-700 truncate mr-2`,children:e.label}),(0,u.jsx)(`code`,{className:`text-[9px] bg-slate-100 px-1.5 py-0.5 rounded text-slate-800 font-bold shrink-0 border border-slate-200/50`,children:e.placeholder})]})},t)})})]})}var hx=e=>{if(!e)return 100;if(e.endsWith(`%`)){let t=parseInt(e,10);return isNaN(t)?100:Math.min(100,Math.max(10,t))}return 100};function gx({selectedBlockId:e,getSelectedBlock:t,updateSelectedStyle:n,updateSelectedImageInfo:r,fontSizesState:i,fontFamiliesState:a,fontWeightsState:o,handleDeleteBlock:s,newColName:c,setNewColName:d,newColPlaceholder:f,setNewColPlaceholder:p,handleAddTableColumn:m,handleRemoveTableColumn:h,handleUpdateTableColumn:g,handleReorderTableColumn:_,handleAddTableRow:v,handleRemoveTableRow:y,setBlocks:b}){var x;let[S,C]=(0,l.useState)(null),[T,E]=(0,l.useState)(``),[D,ee]=(0,l.useState)(``),[O,k]=(0,l.useState)(null),[te,A]=(0,l.useState)(``),[ne,re]=(0,l.useState)(``),j=t();if(!e||!j)return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Formatting Panel`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Customize the styles of the selected block.`})]}),(0,u.jsxs)(`div`,{className:`border border-dashed border-gray-200 rounded-xl p-6 text-center bg-slate-50/50`,children:[(0,u.jsx)(Zb,{className:`h-8 w-8 text-slate-350 mx-auto mb-2`}),(0,u.jsx)(`span`,{className:`text-xs font-semibold text-slate-500 block`,children:`No block selected`}),(0,u.jsx)(`p`,{className:`text-[10px] text-slate-400 mt-1`,children:`Select any element inside the canvas to configure typography, sizing, colors, or templating loop engines.`})]})]});let ie=j.type===`table`,ae=()=>{c.trim()&&(m(c,f),d(``),p(``))};if(j.type===`image`){let e=j.imageInfo||{imageType:`logo`};return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Formatting Panel`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Customize the styles of the selected block.`})]}),(0,u.jsxs)(`div`,{className:`space-y-4`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2 pb-3 border-b border-gray-100`,children:[(0,u.jsx)(`div`,{className:`h-6 w-6 bg-slate-100 rounded flex items-center justify-center text-slate-700`,children:(0,u.jsx)(Kb,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700 capitalize`,children:`Editing Image Element`})]}),(0,u.jsxs)(`div`,{className:`flex items-center justify-between p-3 bg-slate-50 border border-gray-200 rounded-xl select-none`,children:[(0,u.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700 block`,children:`Row Alignment`}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400`,children:`Display side-by-side`})]}),(0,u.jsx)(`button`,{onClick:()=>{let e=!j.style.sameRow;n(`sameRow`,e),e?(n(`width`,`48%`),b(e=>{let t=e.findIndex(e=>e.id===j.id);return t>0?e.map((e,n)=>n===t-1&&(!e.style.width||e.style.width===`100%`)?w(w({},e),{},{style:w(w({},e.style),{},{width:`48%`})}):e):e})):n(`width`,`100%`)},className:`w-10 h-6 flex items-center rounded-full p-1 transition-colors duration-150 ${j.style.sameRow?`bg-orange-600 justify-end`:`bg-slate-300 justify-start`}`,children:(0,u.jsx)(`span`,{className:`bg-white w-4 h-4 rounded-full shadow-md`})})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Image Category`}),(0,u.jsx)(`div`,{className:`grid grid-cols-4 gap-1 bg-slate-50 p-1 border border-gray-200 rounded-lg`,children:[`logo`,`banner`,`barcode`,`watermark`].map(t=>(0,u.jsx)(`button`,{onClick:()=>r(`imageType`,t),className:`py-1 text-[9px] font-bold rounded capitalize transition-all ${e.imageType===t?`bg-white text-slate-800 shadow-xs border border-gray-200`:`text-slate-500 hover:text-slate-800`}`,children:t},t))})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Alignment (Position)`}),(0,u.jsx)(`div`,{className:`flex items-center space-x-1 border border-gray-200 rounded-lg p-1 bg-slate-50 w-fit`,children:[{value:`left`,icon:(0,u.jsx)(ax,{className:`h-3.5 w-3.5`})},{value:`center`,icon:(0,u.jsx)(nx,{className:`h-3.5 w-3.5`})},{value:`right`,icon:(0,u.jsx)(rx,{className:`h-3.5 w-3.5`})}].map(e=>(0,u.jsx)(`button`,{onClick:()=>n(`textAlign`,e.value),type:`button`,className:`p-1.5 rounded transition-all ${j.style.textAlign===e.value?`bg-white text-slate-800 shadow-xs border border-gray-200`:`text-slate-500 hover:text-slate-800`}`,children:e.icon},e.value))})]}),(0,u.jsxs)(`div`,{className:`space-y-1 pt-1`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Block Width (%)`}),(0,u.jsxs)(`span`,{className:`text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded`,children:[hx(j.style.width),`%`]})]}),(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(`input`,{type:`range`,min:`10`,max:`100`,step:`5`,value:hx(j.style.width),onChange:e=>n(`width`,`${Math.min(100,Math.max(10,parseInt(e.target.value,10)))}%`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`}),(0,u.jsxs)(`span`,{className:`text-[10px] font-mono text-slate-500 w-10 text-right`,children:[hx(j.style.width),`%`]})]})]}),(0,u.jsxs)(`div`,{className:`space-y-1 pt-1 mt-2`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Image Element Width (px)`}),(0,u.jsx)(`span`,{className:`text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded`,children:j.style.imageWidth||(j.style.width&&j.style.width.endsWith(`px`)?j.style.width:`100%`)})]}),(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(`input`,{type:`range`,min:`10`,max:`1000`,step:`5`,value:parseInt(j.style.imageWidth||(j.style.width&&j.style.width.endsWith(`px`)?j.style.width:`100`))||100,onChange:e=>n(`imageWidth`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`}),(0,u.jsxs)(`span`,{className:`text-[10px] font-mono text-slate-500 w-10 text-right`,children:[parseInt(j.style.imageWidth||(j.style.width&&j.style.width.endsWith(`px`)?j.style.width:`100`))||100,`px`]})]})]}),(0,u.jsxs)(`div`,{className:`space-y-1 pt-1 mt-3`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block mb-1`,children:`Object Fit`}),(0,u.jsxs)(`select`,{value:j.style.objectFit||`contain`,onChange:e=>n(`objectFit`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white font-medium`,children:[(0,u.jsx)(`option`,{value:`contain`,children:`Contain`}),(0,u.jsx)(`option`,{value:`cover`,children:`Cover`}),(0,u.jsx)(`option`,{value:`fill`,children:`Fill`}),(0,u.jsx)(`option`,{value:`none`,children:`None`})]})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Image Height`}),(0,u.jsx)(`span`,{className:`text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded`,children:j.style.height||j.style.minHeight||`auto`})]}),(0,u.jsx)(`div`,{className:`flex items-center space-x-2`,children:(0,u.jsx)(`input`,{type:`range`,min:`20`,max:`400`,step:`10`,value:parseInt(j.style.height||j.style.minHeight||`100`)||100,onChange:e=>{n(`height`,`${e.target.value}px`),n(`minHeight`,`${e.target.value}px`)},className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`})})]}),e.imageType===`barcode`?(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-150`,children:[(0,u.jsx)(`span`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Barcode Configuration`}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500`,children:`Mock Barcode Value`}),(0,u.jsx)(`input`,{type:`text`,value:e.barcodeValue||``,onChange:e=>r(`barcodeValue`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:border-slate-500`})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-500`,children:`Backend Variable`}),(0,u.jsx)(`input`,{type:`text`,value:e.barcodePlaceholder||``,onChange:e=>r(`barcodePlaceholder`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs font-mono focus:outline-none focus:border-slate-500 text-slate-700 font-bold`})]})]}):(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-150`,children:[(0,u.jsx)(`span`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Image Asset Upload`}),(0,u.jsxs)(`div`,{className:`flex flex-col items-center p-3 border border-dashed border-gray-200 rounded-lg bg-slate-50/50 hover:bg-slate-50 transition-all cursor-pointer relative`,children:[(0,u.jsx)(cx,{className:`h-5 w-5 text-slate-400 mb-1`}),(0,u.jsx)(`span`,{className:`text-[10px] font-bold text-slate-650`,children:`Choose local image file`}),(0,u.jsx)(`input`,{type:`file`,accept:`image/*`,onChange:e=>{var t;let n=(t=e.target.files)==null?void 0:t[0];if(!n)return;let i=new FileReader;i.onload=e=>{var t;r(`url`,(t=e.target)==null?void 0:t.result)},i.readAsDataURL(n)},className:`absolute inset-0 opacity-0 cursor-pointer`})]})]}),(0,u.jsx)(`div`,{className:`space-y-3 pt-3 border-t border-gray-100`,children:(0,u.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase block`,children:`Bottom Margin`}),(0,u.jsx)(`input`,{type:`range`,min:`0`,max:`40`,step:`2`,value:parseInt(j.style.marginBottom||`0px`),onChange:e=>n(`marginBottom`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200`})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase block`,children:`Padding`}),(0,u.jsx)(`input`,{type:`range`,min:`0`,max:`40`,step:`2`,value:parseInt(j.style.padding||`0px`),onChange:e=>n(`padding`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200`})]})]})}),(0,u.jsx)(`div`,{className:`pt-4 border-t border-red-100 flex items-center justify-between`,children:(0,u.jsxs)(`button`,{onClick:()=>s(j.id),className:`w-full py-2 bg-red-50 hover:bg-red-100 border border-red-200 text-red-650 rounded-xl text-xs font-bold transition-all flex items-center justify-center space-x-1 shadow-xs cursor-pointer`,children:[(0,u.jsx)(ox,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Delete Element`})]})})]})]})}return(0,u.jsxs)(`div`,{className:`space-y-5`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`h3`,{className:`text-sm font-bold text-slate-800`,children:`Formatting Panel`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-500`,children:`Customize the styles of the selected block.`})]}),(0,u.jsxs)(`div`,{className:`space-y-4`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-2 pb-3 border-b border-gray-100`,children:[(0,u.jsx)(`div`,{className:`h-6 px-3 bg-slate-100 rounded flex items-center justify-center text-slate-700 font-bold text-[10px] uppercase`,children:j.type}),(0,u.jsxs)(`span`,{className:`text-xs font-bold text-slate-700 capitalize`,children:[`Editing `,j.type===`table`?`Table Block`:`Typography Element`]})]}),(0,u.jsxs)(`div`,{className:`flex items-center justify-between p-3 bg-slate-50 border border-gray-200 rounded-xl select-none`,children:[(0,u.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700 block`,children:`Row Alignment`}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400`,children:`Display side-by-side`})]}),(0,u.jsx)(`button`,{onClick:()=>{let e=!j.style.sameRow;n(`sameRow`,e),e?(n(`width`,`48%`),b(e=>{let t=e.findIndex(e=>e.id===j.id);return t>0?e.map((e,n)=>n===t-1&&(!e.style.width||e.style.width===`100%`)?w(w({},e),{},{style:w(w({},e.style),{},{width:`48%`})}):e):e})):n(`width`,`100%`)},className:`w-10 h-6 flex items-center rounded-full p-1 transition-colors duration-150 ${j.style.sameRow?`bg-orange-600 justify-end`:`bg-slate-300 justify-start`}`,children:(0,u.jsx)(`span`,{className:`bg-white w-4 h-4 rounded-full shadow-md`})})]}),j.style.sameRow&&(0,u.jsxs)(`div`,{className:`flex items-center justify-between p-3 bg-slate-50 border border-gray-200 rounded-xl select-none`,children:[(0,u.jsxs)(`div`,{className:`space-y-0.5`,children:[(0,u.jsx)(`span`,{className:`text-xs font-bold text-slate-700 block`,children:`Row Direction`}),(0,u.jsx)(`span`,{className:`text-[9px] text-slate-400`,children:`Layout stacked or side-by-side`})]}),(0,u.jsx)(`div`,{className:`grid grid-cols-2 gap-1 bg-slate-100 p-0.5 border border-gray-200 rounded-lg w-[180px]`,children:[`row`,`column`].map(e=>(0,u.jsx)(`button`,{type:`button`,onClick:()=>{n(`flexDirection`,e),b(t=>{let n=t.findIndex(e=>e.id===j.id);if(n===-1)return t;let r=n;for(;r>0&&t[r].style.sameRow;)r--;let i=[r],a=r+1;for(;a<t.length&&t[a].style.sameRow;)i.push(a),a++;return t.map((t,n)=>i.includes(n)?w(w({},t),{},{style:w(w({},t.style),{},{flexDirection:e})}):t)})},className:`px-2 py-1 text-[9px] font-bold rounded capitalize transition-all text-center ${j.style.flexDirection===e||e===`row`&&!j.style.flexDirection?`bg-white text-slate-800 shadow-xs border border-gray-200`:`text-slate-500 hover:text-slate-800`}`,children:e===`row`?`Side-by-side`:`Stacked`},e))})]}),(0,u.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Font Size`}),(0,u.jsx)(`select`,{value:j.style.fontSize,onChange:e=>n(`fontSize`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white font-medium`,children:i.map(e=>(0,u.jsx)(`option`,{value:e.value,children:e.label},e.value))})]}),!ie&&(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Weight`}),(0,u.jsx)(`select`,{value:j.style.fontWeight,onChange:e=>n(`fontWeight`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white font-medium`,children:o.map(e=>(0,u.jsx)(`option`,{value:e.value,children:e.label},e.value))})]})]}),!ie&&(0,u.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Font Family`}),(0,u.jsxs)(`select`,{value:j.style.fontFamily||``,onChange:e=>n(`fontFamily`,e.target.value),className:`w-full px-2 py-1.5 border border-gray-200 rounded-lg text-xs focus:outline-none focus:border-slate-500 bg-white font-medium`,children:[(0,u.jsx)(`option`,{value:``,children:`Default Font (Global)`}),a.map(e=>(0,u.jsx)(`option`,{value:e.value,children:e.label},e.value))]})]}),!ie&&(0,u.jsxs)(`div`,{className:`space-y-2`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Alignment & Formatting`}),(0,u.jsxs)(`div`,{className:`flex items-center justify-between gap-1 border border-gray-200 rounded-lg p-1 bg-slate-50`,children:[(0,u.jsx)(`div`,{className:`flex items-center space-x-0.5`,children:[{value:`left`,icon:(0,u.jsx)(ax,{className:`h-3.5 w-3.5`})},{value:`center`,icon:(0,u.jsx)(nx,{className:`h-3.5 w-3.5`})},{value:`right`,icon:(0,u.jsx)(rx,{className:`h-3.5 w-3.5`})},{value:`justify`,icon:(0,u.jsx)(ix,{className:`h-3.5 w-3.5`})}].map(e=>(0,u.jsx)(`button`,{onClick:()=>n(`textAlign`,e.value),className:`p-1.5 rounded transition-all ${j.style.textAlign===e.value?`bg-white text-slate-800 shadow-xs border border-gray-200`:`text-slate-500 hover:text-slate-800`}`,children:e.icon},e.value))}),(0,u.jsx)(`div`,{className:`h-5 w-[1px] bg-slate-200 mx-1`}),(0,u.jsx)(`div`,{className:`flex items-center space-x-0.5`,children:[{key:`bold`,label:`B`,className:`font-bold`},{key:`italic`,label:`I`,className:`italic`},{key:`underline`,label:`U`,className:`underline`},{key:`strikethrough`,label:`S`,className:`line-through`}].map(e=>{let t=j.style[e.key]===!0;return(0,u.jsx)(`button`,{onClick:()=>n(e.key,!t),className:`h-7 w-7 rounded text-xs transition-all ${t?`bg-white text-slate-800 shadow-xs border border-gray-200 font-bold`:`text-slate-500 hover:text-slate-800`}`,children:(0,u.jsx)(`span`,{className:e.className,children:e.label})},e.key)})})]})]}),(0,u.jsxs)(`div`,{className:`space-y-3`,children:[(0,u.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Text Color`}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-1.5`,children:[pb.map(e=>(0,u.jsx)(`button`,{onClick:()=>n(`color`,e),className:`h-5 w-5 rounded-full border border-gray-200 shadow-xs transition-transform ${j.style.color===e?`scale-120 ring-2 ring-slate-800`:`hover:scale-110`}`,style:{backgroundColor:e}},e)),(0,u.jsx)(`input`,{type:`color`,value:j.style.color,onChange:e=>n(`color`,e.target.value),className:`h-5 w-5 rounded-full border border-gray-200 cursor-pointer overflow-hidden p-0`})]})]}),(0,u.jsxs)(`div`,{className:`space-y-1.5`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Background Color`}),(0,u.jsxs)(`div`,{className:`flex flex-wrap gap-1.5`,children:[mb.map(e=>(0,u.jsx)(`button`,{onClick:()=>n(`backgroundColor`,e),className:`h-5 w-5 rounded-full border border-gray-200 shadow-xs transition-transform ${j.style.backgroundColor===e?`scale-120 ring-2 ring-slate-800`:`hover:scale-110`}`,style:{backgroundColor:e===`transparent`?`#ffffff`:e},children:e===`transparent`&&(0,u.jsx)(`span`,{className:`text-[8px] text-slate-400 font-bold block leading-5 text-center`,children:`T`})},e)),(0,u.jsx)(`input`,{type:`color`,value:j.style.backgroundColor===`transparent`?`#ffffff`:j.style.backgroundColor,onChange:e=>n(`backgroundColor`,e.target.value),className:`h-5 w-5 rounded-full border border-gray-200 cursor-pointer overflow-hidden p-0`})]})]})]}),(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-100`,children:[(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider`,children:`Block Width (%)`}),(0,u.jsxs)(`span`,{className:`text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded`,children:[hx(j.style.width),`%`]})]}),(0,u.jsxs)(`div`,{className:`flex items-center space-x-2`,children:[(0,u.jsx)(`input`,{type:`range`,min:`10`,max:`100`,step:`5`,value:hx(j.style.width),onChange:e=>n(`width`,`${Math.min(100,Math.max(10,parseInt(e.target.value,10)))}%`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`}),(0,u.jsxs)(`span`,{className:`text-[10px] font-mono text-slate-500 w-10 text-right`,children:[hx(j.style.width),`%`]})]})]}),(0,u.jsxs)(`div`,{className:`grid grid-cols-2 gap-3`,children:[(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase block`,children:`Bottom Margin`}),(0,u.jsx)(`input`,{type:`range`,min:`0`,max:`40`,step:`2`,value:parseInt(j.style.marginBottom||`0px`),onChange:e=>n(`marginBottom`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg`})]}),(0,u.jsxs)(`div`,{className:`space-y-1`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase block`,children:`Padding`}),(0,u.jsx)(`input`,{type:`range`,min:`0`,max:`40`,step:`2`,value:parseInt(j.style.padding||`0px`),onChange:e=>n(`padding`,`${e.target.value}px`),className:`w-full accent-slate-800 h-1 bg-gray-200 rounded-lg`})]})]})]}),ie&&j.tableInfo&&(0,u.jsxs)(u.Fragment,{children:[(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-100`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Table Rows`}),(0,u.jsxs)(`span`,{className:`text-[10px] text-slate-400 font-medium`,children:[((x=j.tableInfo.mockRows)==null?void 0:x.length)||1,` row(s) configured`]})]}),(0,u.jsxs)(`button`,{type:`button`,onClick:()=>v&&v(j.id),className:`px-3 py-1.5 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-xs font-bold transition-all flex items-center space-x-1 shadow-xs`,title:`Add a new row to table`,children:[(0,u.jsx)(Jb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Add Row`})]})]}),(0,u.jsx)(`div`,{className:`space-y-1.5 max-h-[140px] overflow-y-auto pr-1`,children:(j.tableInfo.mockRows&&j.tableInfo.mockRows.length>0?j.tableInfo.mockRows:[{}]).map((e,t)=>{var n;return(0,u.jsxs)(`div`,{className:`flex items-center justify-between bg-slate-50 border border-gray-200 rounded-lg p-2 text-xs`,children:[(0,u.jsxs)(`span`,{className:`font-semibold text-slate-700`,children:[`Row #`,t+1]}),(0,u.jsx)(`button`,{type:`button`,onClick:()=>y&&y(t,j.id),disabled:(((n=j.tableInfo)==null||(n=n.mockRows)==null?void 0:n.length)||1)<=1,className:`p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 disabled:opacity-30 disabled:hover:bg-transparent rounded transition-colors`,title:`Remove row`,children:(0,u.jsx)(ox,{className:`h-3.5 w-3.5`})})]},t)})})]}),(0,u.jsxs)(`div`,{className:`space-y-3 pt-3 border-t border-gray-100`,children:[(0,u.jsx)(`label`,{className:`text-[10px] font-bold text-slate-400 uppercase tracking-wider block`,children:`Table Columns`}),(0,u.jsx)(`div`,{className:`space-y-2 max-h-[300px] overflow-y-auto pr-1`,children:j.tableInfo.columns.map((e,t)=>{var n,r;let i=e.loop&&e.columns&&e.columns.length>0;return(0,u.jsxs)(`div`,{className:`bg-slate-50 border border-gray-200 rounded-lg p-2 space-y-1.5 text-xs`,children:[S===String(t)?(0,u.jsxs)(`div`,{className:`space-y-1.5 p-1 bg-white border border-orange-300 rounded`,children:[(0,u.jsx)(`div`,{className:`text-[9px] font-bold text-orange-600 uppercase`,children:`Edit Column`}),(0,u.jsx)(`input`,{type:`text`,value:T,onChange:e=>E(e.target.value),placeholder:`Header Name`,className:`w-full px-2 py-0.5 border border-gray-200 rounded text-xs bg-white`}),(0,u.jsx)(`input`,{type:`text`,value:D,onChange:e=>ee(e.target.value),placeholder:`Value (e.g. {{item.sku}})`,className:`w-full px-2 py-0.5 border border-gray-200 rounded text-xs font-mono bg-white`}),(0,u.jsxs)(`div`,{className:`flex justify-end gap-1`,children:[(0,u.jsxs)(`button`,{onClick:()=>{g&&g(t,T,D),C(null)},className:`p-1 px-2 bg-orange-600 text-white hover:bg-orange-700 rounded text-[10px] flex items-center gap-1 font-bold`,children:[(0,u.jsx)(Vb,{className:`h-3 w-3`}),(0,u.jsx)(`span`,{children:`Save`})]}),(0,u.jsxs)(`button`,{onClick:()=>C(null),className:`p-1 px-2 bg-gray-200 text-slate-700 hover:bg-gray-300 rounded text-[10px] flex items-center gap-1`,children:[(0,u.jsx)(lx,{className:`h-3 w-3`}),(0,u.jsx)(`span`,{children:`Cancel`})]})]})]}):(0,u.jsxs)(`div`,{className:`flex items-center justify-between`,children:[(0,u.jsxs)(`div`,{className:`truncate mr-2`,children:[(0,u.jsxs)(`span`,{className:`font-bold text-slate-700 block truncate flex items-center gap-1`,children:[(0,u.jsx)(`span`,{children:e.columnName}),i&&(0,u.jsx)(`span`,{className:`px-1 bg-blue-100 text-blue-700 rounded text-[8px] font-mono`,children:`loop (sub-table)`})]}),(0,u.jsx)(`code`,{className:`text-[9px] font-mono text-slate-500 truncate block`,children:e.placeholder})]}),(0,u.jsxs)(`div`,{className:`flex items-center gap-0.5 shrink-0`,children:[(0,u.jsx)(`button`,{onClick:()=>_&&_(t,`up`),disabled:t===0,className:`p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent rounded transition-colors`,title:`Move Up`,children:(0,u.jsx)(zb,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`button`,{onClick:()=>_&&_(t,`down`),disabled:t===(((n=j.tableInfo)==null?void 0:n.columns.length)||0)-1,className:`p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200 disabled:opacity-30 disabled:hover:bg-transparent rounded transition-colors`,title:`Move Down`,children:(0,u.jsx)(Rb,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`button`,{onClick:()=>{C(String(t)),E(e.columnName),ee(e.placeholder)},className:`p-1 text-slate-400 hover:text-slate-700 hover:bg-slate-200 rounded transition-colors`,title:`Edit column`,children:(0,u.jsx)(qb,{className:`h-3.5 w-3.5`})}),(0,u.jsx)(`button`,{onClick:()=>h(t),className:`p-1 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors border border-transparent`,disabled:!j.tableInfo||j.tableInfo.columns.length<=1,title:`Delete column`,children:(0,u.jsx)(ox,{className:`h-3.5 w-3.5`})})]})]}),i&&(0,u.jsxs)(`div`,{className:`ml-2 pl-2 border-l-2 border-blue-200 space-y-1.5 pt-1 mt-1`,children:[(0,u.jsx)(`div`,{className:`flex items-center justify-between`,children:(0,u.jsxs)(`span`,{className:`text-[8px] font-bold text-blue-600 uppercase tracking-wider block`,children:[`Sub-Table Columns (`,((r=e.columns)==null?void 0:r.length)||0,`):`]})}),e.columns.map((n,r)=>{let i=`${t}-${r}`;return S===i?(0,u.jsxs)(`div`,{className:`space-y-1 p-1.5 bg-white border border-blue-300 rounded`,children:[(0,u.jsx)(`div`,{className:`text-[8px] font-bold text-blue-600 uppercase`,children:`Edit Sub-Column`}),(0,u.jsx)(`input`,{type:`text`,value:T,onChange:e=>E(e.target.value),placeholder:`Header Name`,className:`w-full px-2 py-0.5 border border-gray-200 rounded text-[11px] bg-white`}),(0,u.jsx)(`input`,{type:`text`,value:D,onChange:e=>ee(e.target.value),placeholder:`Value`,className:`w-full px-2 py-0.5 border border-gray-200 rounded text-[11px] font-mono bg-white`}),(0,u.jsxs)(`div`,{className:`flex justify-end gap-1 pt-0.5`,children:[(0,u.jsxs)(`button`,{onClick:()=>{g&&g(t,T,D,r),C(null)},className:`p-0.5 px-1.5 bg-blue-600 text-white hover:bg-blue-700 rounded text-[9px] flex items-center gap-1 font-bold`,children:[(0,u.jsx)(Vb,{className:`h-2.5 w-2.5`}),(0,u.jsx)(`span`,{children:`Save`})]}),(0,u.jsxs)(`button`,{onClick:()=>C(null),className:`p-0.5 px-1.5 bg-gray-200 text-slate-700 hover:bg-gray-300 rounded text-[9px] flex items-center gap-1`,children:[(0,u.jsx)(lx,{className:`h-2.5 w-2.5`}),(0,u.jsx)(`span`,{children:`Cancel`})]})]})]},r):(0,u.jsxs)(`div`,{className:`flex items-center justify-between bg-white border border-gray-150 rounded px-2 py-1 text-[11px]`,children:[(0,u.jsxs)(`div`,{className:`truncate mr-1`,children:[(0,u.jsx)(`span`,{className:`font-semibold text-slate-700 block truncate`,children:n.columnName}),(0,u.jsx)(`code`,{className:`text-[8px] font-mono text-slate-400 truncate block`,children:n.placeholder})]}),(0,u.jsxs)(`div`,{className:`flex items-center gap-0.5 shrink-0`,children:[(0,u.jsx)(`button`,{onClick:()=>_&&_(t,`up`,r),disabled:r===0,className:`p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 disabled:opacity-30 disabled:hover:bg-transparent rounded`,title:`Move Sub-Column Up`,children:(0,u.jsx)(zb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:()=>_&&_(t,`down`,r),disabled:r===e.columns.length-1,className:`p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 disabled:opacity-30 disabled:hover:bg-transparent rounded`,title:`Move Sub-Column Down`,children:(0,u.jsx)(Rb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:()=>{C(i),E(n.columnName),ee(n.placeholder)},className:`p-0.5 text-slate-400 hover:text-slate-700 hover:bg-slate-100 rounded`,title:`Edit sub-column`,children:(0,u.jsx)(qb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:()=>h(t,r),className:`p-0.5 text-slate-400 hover:text-red-600 hover:bg-red-50 rounded`,title:`Delete sub-column`,children:(0,u.jsx)(ox,{className:`h-3 w-3`})})]})]},r)}),O===t?(0,u.jsxs)(`div`,{className:`bg-white border border-blue-200 rounded p-2 space-y-1.5 mt-1`,children:[(0,u.jsx)(`span`,{className:`text-[9px] font-bold text-blue-600 block`,children:`Add Sub-Column`}),(0,u.jsx)(`input`,{type:`text`,value:te,onChange:e=>A(e.target.value),placeholder:`Header Name (e.g. Price)`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs bg-white`}),(0,u.jsx)(`input`,{type:`text`,value:ne,onChange:e=>re(e.target.value),placeholder:`Value (e.g. {{item.price}})`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs font-mono bg-white`}),(0,u.jsxs)(`div`,{className:`flex gap-1 pt-1`,children:[(0,u.jsx)(`button`,{onClick:()=>{te.trim()&&(m(te,ne||`{{item.value}}`,!1,t),A(``),re(``),k(null))},className:`flex-1 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-[10px] font-bold`,children:`Add`}),(0,u.jsx)(`button`,{onClick:()=>{k(null),A(``),re(``)},className:`py-1 px-2 bg-gray-100 hover:bg-gray-200 text-slate-600 rounded text-[10px]`,children:`Cancel`})]})]}):(0,u.jsxs)(`button`,{onClick:()=>k(t),className:`w-full py-1 text-[10px] font-bold text-blue-600 hover:bg-blue-50 border border-dashed border-blue-200 rounded flex items-center justify-center space-x-1 transition-colors mt-1`,children:[(0,u.jsx)(Jb,{className:`h-3 w-3`}),(0,u.jsx)(`span`,{children:`Add Sub-Column`})]})]})]},t)})}),(0,u.jsxs)(`div`,{className:`bg-slate-50 border border-gray-200 border-dashed rounded-xl p-3 space-y-3`,children:[(0,u.jsx)(`span`,{className:`text-[9px] font-bold text-slate-500 uppercase tracking-wider block`,children:`Add New Column`}),(0,u.jsx)(`div`,{children:(0,u.jsx)(`input`,{type:`text`,value:c,onChange:e=>d(e.target.value),placeholder:`Header Name`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs focus:outline-none focus:border-slate-500 bg-white`})}),(0,u.jsx)(`div`,{children:(0,u.jsx)(`input`,{type:`text`,value:f,onChange:e=>p(e.target.value),placeholder:`Value (e.g. {{item.sku}})`,className:`w-full px-2 py-1 border border-gray-200 rounded text-xs font-mono focus:outline-none focus:border-orange-655 bg-white`})}),(0,u.jsxs)(`div`,{className:`flex gap-2`,children:[(0,u.jsxs)(`button`,{onClick:ae,className:`flex-1 py-1.5 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-xs font-bold transition-all flex items-center justify-center space-x-1`,children:[(0,u.jsx)(Jb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Column`})]}),(0,u.jsxs)(`button`,{onClick:()=>{c.trim()&&(m(c,f||`{{item.price}}`,!0),d(``),p(``))},className:`flex-1 py-1.5 bg-blue-600 hover:bg-blue-700 text-white rounded-lg text-xs font-bold transition-all flex items-center justify-center space-x-1`,title:`Add column as nested sub-table`,children:[(0,u.jsx)(Jb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Sub-Table`})]})]})]})]})]}),(0,u.jsx)(`div`,{className:`pt-4 border-t border-red-100 flex items-center justify-between`,children:(0,u.jsxs)(`button`,{onClick:()=>s(j.id),className:`w-full py-2 bg-red-50 hover:bg-red-100 border border-red-200 text-red-650 rounded-xl text-xs font-bold transition-all flex items-center justify-center space-x-1 shadow-xs cursor-pointer`,children:[(0,u.jsx)(ox,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Delete Element`})]})})]})]})}function _x({activeTab:e,setActiveTab:t,setBlocks:n,selectedBlockId:r,setSelectedBlockId:i,getSelectedBlock:a,defaultStyles:o,createTextBlock:s,createImageBlock:c,updateSelectedStyle:l,updateSelectedImageInfo:d,handleDeleteBlock:f,handleRemoveTableColumn:p,handleAddTableColumn:m,handleUpdateTableColumn:h,handleReorderTableColumn:g,handleAddTableRow:_,handleRemoveTableRow:v,schemas:y,toggleSchemaColumn:b,customTableName:x,setCustomTableName:S,customLoopStart:C,setCustomLoopStart:w,customLoopEnd:T,setCustomLoopEnd:E,handleAddCustomTable:D,newColName:ee,setNewColName:O,newColPlaceholder:k,setNewColPlaceholder:te,customImageTypes:A,newImgTypeName:ne,setNewImgTypeName:re,handleAddCustomImageType:j,placeholders:ie,searchPlaceholder:ae,setSearchPlaceholder:oe,handleSidebarDragStart:se,isTablesLoading:ce,tablesLoading:le,isPlaceholdersLoading:ue,placeholdersLoading:de,fontSizesState:fe,fontFamiliesState:pe,fontWeightsState:me}){return(0,u.jsxs)(`aside`,{className:`w-full lg:w-[30%] flex flex-col bg-white border-t lg:border-t-0 lg:border-l border-gray-200 overflow-y-auto shrink-0`,children:[(0,u.jsx)(`div`,{className:`grid grid-cols-5 gap-1 border-b border-gray-250 p-2 bg-slate-50`,children:[{value:`text`,icon:(0,u.jsx)(sx,{className:`h-4 w-4`})},{value:`tables`,icon:(0,u.jsx)(tx,{className:`h-4 w-4`})},{value:`images`,icon:(0,u.jsx)(Kb,{className:`h-4 w-4`})},{value:`placeholders`,icon:(0,u.jsx)(Qb,{className:`h-4 w-4`})},{value:`styles`,icon:(0,u.jsx)(Zb,{className:`h-4 w-4`})}].map(n=>(0,u.jsxs)(`button`,{onClick:()=>t(n.value),className:`py-2 px-0.5 flex flex-col items-center justify-center gap-1 font-bold text-[9px] rounded-lg uppercase tracking-wider transition-all duration-150 ${e===n.value?`bg-orange-600 text-white shadow-sm shadow-orange-600/10`:`text-slate-500 hover:text-orange-600 hover:bg-orange-50/50`}`,children:[n.icon,(0,u.jsx)(`span`,{children:n.value})]},n.value))}),(0,u.jsxs)(`div`,{className:`p-4 flex-1 flex flex-col min-h-0 overflow-y-auto`,children:[e===`text`&&(0,u.jsx)(dx,{handleSidebarDragStart:se,createTextBlock:s,setBlocks:n,setSelectedBlockId:i,setActiveTab:t,defaultStyles:o}),e===`tables`&&(0,u.jsx)(fx,{schemas:y,toggleSchemaColumn:b,customTableName:x,setCustomTableName:S,customLoopStart:C,setCustomLoopStart:w,customLoopEnd:T,setCustomLoopEnd:E,handleAddCustomTable:D,handleSidebarDragStart:se,setBlocks:n,setSelectedBlockId:i,setActiveTab:t,defaultStyles:o,isTablesLoading:ce,tablesLoading:le}),e===`images`&&(0,u.jsx)(px,{customImageTypes:A,newImgTypeName:ne,setNewImgTypeName:re,handleAddCustomImageType:j,handleSidebarDragStart:se,createImageBlock:c,setBlocks:n,setSelectedBlockId:i,setActiveTab:t}),e===`placeholders`&&(0,u.jsx)(mx,{placeholders:ie,schemas:y,searchPlaceholder:ae,setSearchPlaceholder:oe,selectedBlockId:r,setBlocks:n,isPlaceholdersLoading:ue,placeholdersLoading:de}),e===`styles`&&(0,u.jsx)(gx,{selectedBlockId:r,getSelectedBlock:a,updateSelectedStyle:l,updateSelectedImageInfo:d,fontSizesState:fe,fontFamiliesState:pe,fontWeightsState:me,handleDeleteBlock:f,newColName:ee,setNewColName:O,newColPlaceholder:k,setNewColPlaceholder:te,handleAddTableColumn:m,handleRemoveTableColumn:p,handleUpdateTableColumn:h,handleReorderTableColumn:g,handleAddTableRow:_,handleRemoveTableRow:v,setBlocks:n})]})]})}var vx=[`bold`,`italic`,`underline`,`strikethrough`,`width`],yx=({block:e,onUpdate:t,onSelect:n,onDrop:r})=>{let i=(0,l.useRef)(null);(0,l.useEffect)(()=>{i.current&&i.current.innerHTML!==e.content&&document.activeElement!==i.current&&(i.current.innerHTML=e.content||`<br/>`)},[e.id,e.content]);let a=e.style,{bold:o,italic:s,underline:c,strikethrough:d,width:f}=a,p=w({},Nb(a,vx));o&&(p.fontWeight=`bold`),s&&(p.fontStyle=`italic`);let m=[];return c&&m.push(`underline`),d&&m.push(`line-through`),m.length>0&&(p.textDecoration=m.join(` `)),(0,u.jsx)(`div`,{ref:i,contentEditable:!0,suppressContentEditableWarning:!0,onFocus:n,onInput:e=>t(e.currentTarget.innerHTML),onBlur:e=>t(e.currentTarget.innerHTML),style:p,className:`h-fit w-full break-words outline-none`,onDrop:r,onDragOver:e=>e.preventDefault()})},bx=({blockId:e,colIdx:t,placeholder:n,onUpdate:r,onDrop:i})=>{let a=(0,l.useRef)(null);return(0,l.useEffect)(()=>{a.current&&a.current.innerHTML!==n&&document.activeElement!==a.current&&(a.current.innerHTML=n)},[e,t,n]),(0,u.jsx)(`td`,{ref:a,contentEditable:!0,suppressContentEditableWarning:!0,onInput:e=>r(e.currentTarget.innerText||e.currentTarget.innerHTML),onBlur:e=>r(e.currentTarget.innerText||e.currentTarget.innerHTML),onDrop:i,onDragOver:e=>e.preventDefault(),className:`border border-slate-200 px-2.5 py-2.5 text-slate-500 bg-slate-50/20 font-sans outline-none focus:bg-slate-100/50 transition-colors`})},xx=e=>{let t=[];return e.forEach(e=>{e.style.sameRow&&t.length>0?t[t.length-1].blocks.push(e):t.push({id:e.id,blocks:[e]})}),t};function Sx({blocks:e,setBlocks:t,selectedBlockId:n,setSelectedBlockId:r,setActiveTab:i,showMockData:a,placeholderMockData:o,dragOverIndex:s,setDragOverIndex:c,draggedSidebarItem:l,defaultStyles:d,zoom:f,panOffset:p,spacePressed:m,canvasHeight:h,viewportRef:g,canvasContainerRef:_,handleMouseDown:v,handleMouseMove:y,handleMouseUp:b,createTextBlock:x,duplicateBlock:S,reorderBlock:C,handleDeleteBlock:T,handleSidebarDrop:E,handleTableCellDrop:D,updateTableCell:ee,handleTextDrop:O}){let k=(e,t)=>{e.dataTransfer.setData(`blockIndex`,t.toString()),e.dataTransfer.setData(`source`,`canvas`),e.dataTransfer.effectAllowed=`move`},te=(n,r)=>{n.preventDefault(),n.stopPropagation();let i=n.dataTransfer.getData(`source`);if(i===`sidebar`)E(r);else if(i===`canvas`){let i=parseInt(n.dataTransfer.getData(`blockIndex`));if(isNaN(i)||i===r)return;let a=[...e],o=a.splice(i,1)[0],s=i<r?r-1:r;a.splice(s,0,o),t(a)}c(null)};return(0,u.jsx)(`div`,{ref:g,className:`flex-1 overflow-auto p-8 flex justify-center items-start outline-none transition-all ${m?`cursor-grab active:cursor-grabbing`:`cursor-default`}`,onMouseDown:v,onMouseMove:y,onMouseUp:b,onMouseLeave:b,children:(0,u.jsx)(`div`,{style:{transform:`translate(${p.x}px, ${p.y}px) scale(${f})`,transformOrigin:`top center`},className:`transition-transform duration-75 ease-out select-none`,children:(0,u.jsxs)(`div`,{ref:_,style:{height:`${h}px`},className:`w-[794px] min-h-[1123px] bg-white shadow-lg border border-gray-300/80 px-[60px] py-[60px] flex flex-col relative canvas-editor-area`,onDragOver:e=>e.preventDefault(),onDrop:n=>{if(n.preventDefault(),n.stopPropagation(),l)E(e.length);else{let e=n.dataTransfer.getData(`placeholder`);if(e){n.preventDefault();let a=x(`p`,`{{${e}}}`,d==null?void 0:d.p);t(e=>[...e,a]),r(a.id),i(`styles`)}}},children:[e.length===0?(0,u.jsxs)(`div`,{className:`flex-1 border-2 border-dashed border-gray-200 rounded-2xl flex flex-col items-center justify-center p-8 text-center text-slate-400`,children:[(0,u.jsx)(Zb,{className:`h-10 w-10 mb-3 animate-bounce text-slate-350`}),(0,u.jsx)(`span`,{className:`font-bold text-sm text-slate-600 block`,children:`Drag & Drop Editor Canvas`}),(0,u.jsx)(`p`,{className:`text-xs text-slate-400 mt-1 max-w-sm`,children:`Select elements from the sidebar tabs (Text, Tables, Images) and drag them here to assemble your template structure.`})]}):xx(e).map(a=>{var o;let s=a.blocks.length>1;return(0,u.jsx)(`div`,{className:`group/row ${a.blocks.some(e=>e.style.position===`absolute`)?``:`relative`} border border-transparent rounded-lg hover:border-slate-200/60 p-1 mb-2 ${s?((o=a.blocks[0])==null||(o=o.style)==null?void 0:o.flexDirection)===`column`?`flex flex-col gap-2`:`flex flex-row gap-4`:``}`,children:a.blocks.map(a=>{var o,l,d,f;let p=n===a.id,m=w(w({},a.style),gb(a.style.customCss||``));return(0,u.jsxs)(`div`,{draggable:!0,onDragStart:t=>{let n=e.findIndex(e=>e.id===a.id);k(t,n)},onDragOver:t=>{t.preventDefault(),c(e.findIndex(e=>e.id===a.id))},onDrop:t=>{let n=e.findIndex(e=>e.id===a.id);te(t,n)},onClick:e=>{e.stopPropagation(),r(a.id),i(`styles`)},style:{width:a.style.position===`absolute`?`100%`:a.style.width||(s?`48%`:`100%`),height:a.style.position===`absolute`?a.style.height||`100%`:void 0,position:a.style.position,top:a.style.top,left:a.style.left,zIndex:a.style.zIndex?parseInt(a.style.zIndex):void 0},className:`group/block relative p-0.5 rounded-xl border border-transparent transition-all duration-150 cursor-pointer ${p?`bg-orange-50/20 border-orange-500 shadow-sm ring-2 ring-orange-500/10`:`hover:bg-slate-50/30 hover:border-gray-200`} ${a.style.position===`absolute`?`!absolute !inset-0 !m-auto`:``}`,children:[p&&(0,u.jsxs)(`div`,{className:`absolute -top-3.5 right-3 bg-orange-600 text-white rounded-lg px-2 py-0.5 text-[10px] font-bold flex items-center space-x-1.5 shadow-md z-30 select-none`,children:[(0,u.jsx)(`button`,{onClick:()=>{C(e.findIndex(e=>e.id===a.id),`up`)},className:`hover:text-slate-350`,title:`Move Up`,children:(0,u.jsx)(zb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:()=>{C(e.findIndex(e=>e.id===a.id),`down`)},className:`hover:text-slate-350`,title:`Move Down`,children:(0,u.jsx)(Rb,{className:`h-3 w-3`})}),(0,u.jsx)(`div`,{className:`h-3 w-[1px] bg-slate-700`}),(0,u.jsx)(`button`,{onClick:e=>S(a.id,e),className:`hover:text-slate-350`,title:`Duplicate block`,children:(0,u.jsx)(Hb,{className:`h-3 w-3`})}),(0,u.jsx)(`button`,{onClick:e=>T(a.id,e),className:`hover:text-red-400 text-red-300`,title:`Delete block`,children:(0,u.jsx)(ox,{className:`h-3 w-3`})})]}),a.type===`table`?(0,u.jsx)(`div`,{className:`overflow-x-auto w-full select-none`,children:(0,u.jsxs)(`table`,{style:m,className:`w-full border-collapse`,children:[(0,u.jsx)(`thead`,{children:(0,u.jsx)(`tr`,{children:(o=a.tableInfo)==null?void 0:o.columns.filter(e=>e.enabled!==!1).map((e,t)=>(0,u.jsx)(`th`,{className:`border border-slate-200 px-2.5 py-1 text-slate-700 text-left bg-slate-50 font-sans`,children:e.columnName||``},t))})}),(0,u.jsx)(`tbody`,{children:((l=a.tableInfo)!=null&&l.mockRows&&a.tableInfo.mockRows.length>0?a.tableInfo.mockRows:[{}]).map((e,t)=>{var n;return(0,u.jsx)(`tr`,{className:`bg-slate-50/10 border-b border-slate-100 hover:bg-slate-50/20`,children:(n=a.tableInfo)==null?void 0:n.columns.filter(e=>e.enabled!==!1).map((t,n)=>{let r=e&&typeof e==`object`&&e[t.columnName]||t.placeholder;if(t.loop&&t.columns&&t.columns.length>0){let e=t.columns.filter(e=>e.enabled!==!1);return(0,u.jsx)(`td`,{className:`border border-slate-200 p-2 align-top bg-slate-50/20`,children:(0,u.jsxs)(`div`,{className:`w-full overflow-x-auto space-y-1`,children:[(0,u.jsxs)(`div`,{className:`flex items-center justify-between text-[9px] font-semibold text-slate-500`,children:[(0,u.jsxs)(`span`,{children:[`Sub-table: `,t.columnName]}),(0,u.jsx)(`span`,{className:`px-1.5 py-0.5 bg-slate-200 text-slate-600 rounded text-[8px]`,children:`loop = true`})]}),(0,u.jsxs)(`table`,{className:`w-full border-collapse border border-slate-200 rounded text-xs bg-white`,children:[(0,u.jsx)(`thead`,{children:(0,u.jsx)(`tr`,{children:e.map((e,t)=>(0,u.jsx)(`th`,{className:`border border-slate-200 px-2 py-1 text-slate-700 text-left bg-slate-100/80 font-sans font-semibold text-[10px]`,children:e.columnName},t))})}),(0,u.jsx)(`tbody`,{children:(0,u.jsx)(`tr`,{className:`bg-slate-50/30`,children:e.map((e,t)=>(0,u.jsx)(bx,{blockId:a.id,colIdx:t,placeholder:e.placeholder,onUpdate:e=>ee(a.id,n,e,t),onDrop:e=>D(e,a.id,n,t)},t))})})]})]})},n)}return(0,u.jsx)(bx,{blockId:a.id,colIdx:n,placeholder:r,onUpdate:e=>ee(a.id,n,e),onDrop:e=>D(e,a.id,n)},n)})},t)})})]})}):a.type===`image`?(0,u.jsx)(`div`,{style:{textAlign:m.textAlign||`left`,width:`100%`,marginBottom:m.marginBottom,padding:m.padding,backgroundColor:m.backgroundColor},className:`w-full select-none`,children:(0,u.jsx)(`div`,{style:{width:s?`100%`:a.style.width&&a.style.width.endsWith(`%`)?a.style.width:`100%`,display:`inline-block`},children:((d=a.imageInfo)==null?void 0:d.imageType)===`barcode`?(0,u.jsx)(`div`,{style:{width:a.style.imageWidth||(a.style.width&&a.style.width.endsWith(`px`)?a.style.width:`100%`),height:a.style.height||a.style.minHeight||`70px`},className:`border border-dashed border-slate-200 p-2 bg-slate-50/5 rounded-lg flex items-center justify-center overflow-hidden`,dangerouslySetInnerHTML:{__html:_b(a.imageInfo.barcodeValue||`SHIP-99201`)}}):(0,u.jsx)(`img`,{src:((f=a.imageInfo)==null?void 0:f.url)||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`,style:{width:a.style.imageWidth||(a.style.width&&a.style.width.endsWith(`px`)?a.style.width:`100%`),height:`auto`,maxHeight:a.style.height||`300px`,objectFit:a.style.objectFit||`contain`,opacity:a.style.opacity||`1`,display:`block`},alt:`graphic content`})})}):(0,u.jsx)(yx,{block:a,onUpdate:e=>{t(t=>t.map(t=>t.id===a.id?w(w({},t),{},{content:e}):t))},onSelect:()=>r(a.id),onDrop:e=>O(e,a.id)})]},a.id)})},a.id)}),s!==null&&(0,u.jsx)(`div`,{className:`h-[2px] bg-orange-500 rounded my-1 shadow-md animate-pulse`})]})})})}function Cx({showImportHtml:e=!0,showImportPdf:t=!0,showPreview:n=!0,showExport:r=!0,showExportPdf:i=!0,showClearCanvas:a,customButtonStyles:o,customButtonClassNames:s,customActionComponents:c,handleHtmlImport:d,handlePdfImport:f,setPreviewOpen:p,handleExport:m,handleExportPdf:h,handleClearCanvas:g,zoom:_,setZoom:v,setPanOffset:y}){let b=(0,l.useRef)(null),x=(0,l.useRef)(null);return(0,u.jsxs)(`div`,{className:`bg-white border-b border-gray-200 px-4 py-2 flex flex-wrap items-center justify-between shadow-xs sticky top-0 z-20 gap-2`,children:[(0,u.jsxs)(`div`,{className:`flex flex-wrap items-center gap-1.5`,children:[e&&(0,u.jsxs)(u.Fragment,{children:[c!=null&&c.importHtml?c.importHtml({onClick:()=>{var e;return(e=b.current)==null?void 0:e.click()}}):(0,u.jsxs)(`button`,{onClick:()=>{var e;return(e=b.current)==null?void 0:e.click()},style:o==null?void 0:o.importHtml,className:(s==null?void 0:s.importHtml)||`inline-flex items-center space-x-1 px-2.5 py-1 border border-gray-200 rounded-lg text-xs font-semibold bg-white hover:bg-slate-50 text-slate-700 transition-colors shadow-2xs cursor-pointer`,title:`Import local HTML file`,children:[(0,u.jsx)(cx,{className:`h-3.5 w-3.5 text-slate-500`}),(0,u.jsx)(`span`,{children:`Import HTML`})]}),(0,u.jsx)(`input`,{type:`file`,ref:b,onChange:d,accept:`.html`,className:`hidden`})]}),t&&(0,u.jsxs)(u.Fragment,{children:[c!=null&&c.importPdf?c.importPdf({onClick:()=>{var e;return(e=x.current)==null?void 0:e.click()}}):(0,u.jsxs)(`button`,{onClick:()=>{var e;return(e=x.current)==null?void 0:e.click()},style:o==null?void 0:o.importPdf,className:(s==null?void 0:s.importPdf)||`inline-flex items-center space-x-1 px-2.5 py-1 border border-gray-200 rounded-lg text-xs font-semibold bg-white hover:bg-slate-50 text-slate-700 transition-colors shadow-2xs cursor-pointer`,title:`Import PDF layout structure`,children:[(0,u.jsx)(Gb,{className:`h-3.5 w-3.5 text-slate-500`}),(0,u.jsx)(`span`,{children:`Import PDF`})]}),(0,u.jsx)(`input`,{type:`file`,ref:x,onChange:f,accept:`.pdf`,className:`hidden`})]}),n&&(c!=null&&c.preview?c.preview({onClick:()=>p(!0)}):(0,u.jsxs)(`button`,{onClick:()=>p(!0),style:o==null?void 0:o.preview,className:(s==null?void 0:s.preview)||`inline-flex items-center space-x-1 px-2.5 py-1 border border-slate-200 rounded-lg text-xs font-semibold bg-slate-50 text-slate-700 hover:bg-slate-100 transition-colors shadow-2xs cursor-pointer`,children:[(0,u.jsx)(Wb,{className:`h-3.5 w-3.5 text-slate-500`}),(0,u.jsx)(`span`,{children:`Live Preview`})]})),i&&(c!=null&&c.exportPdf?c.exportPdf({onClick:h}):(0,u.jsxs)(`button`,{onClick:h,style:o==null?void 0:o.exportPdf,className:(s==null?void 0:s.exportPdf)||`inline-flex items-center space-x-1 px-2.5 py-1 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-xs font-semibold transition-colors shadow-2xs shadow-indigo-600/10 cursor-pointer`,children:[(0,u.jsx)(Yb,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Download PDF`})]})),r&&(c!=null&&c.export?c.export({onClick:m}):(0,u.jsxs)(`button`,{onClick:m,style:o==null?void 0:o.export,className:(s==null?void 0:s.export)||`inline-flex items-center space-x-1 px-2.5 py-1 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-xs font-semibold transition-colors shadow-2xs shadow-orange-600/10 cursor-pointer`,children:[(0,u.jsx)(Ub,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Export Template`})]})),a&&(0,u.jsxs)(`button`,{onClick:g,style:o==null?void 0:o.clearCanvas,className:(s==null?void 0:s.clearCanvas)||`inline-flex items-center space-x-1 px-2.5 py-1 text-xs font-semibold border border-red-200 text-red-650 bg-red-50 hover:bg-red-100 rounded-lg transition-colors cursor-pointer`,title:`Clear all canvas elements`,children:[(0,u.jsx)(ox,{className:`h-3.5 w-3.5`}),(0,u.jsx)(`span`,{children:`Clear Canvas`})]})]}),(0,u.jsxs)(`div`,{className:`flex items-center space-x-2 bg-slate-50 border border-gray-200 px-2.5 py-0.5 rounded-xl shadow-xs select-none shrink-0`,children:[(0,u.jsxs)(`div`,{className:`flex items-center space-x-1`,children:[(0,u.jsx)(`button`,{onClick:()=>v(e=>Math.max(e-.1,.5)),className:`h-5 w-5 rounded border border-gray-200 bg-white hover:bg-slate-50 flex items-center justify-center font-bold text-slate-650 hover:text-slate-900 transition-colors text-[10px] select-none cursor-pointer`,title:`Zoom Out`,children:`−`}),(0,u.jsxs)(`div`,{className:`w-10 text-center text-[11px] font-bold text-slate-700`,children:[Math.round(_*100),`%`]}),(0,u.jsx)(`button`,{onClick:()=>v(e=>Math.min(e+.1,2)),className:`h-5 w-5 rounded border border-gray-200 bg-white hover:bg-slate-50 flex items-center justify-center font-bold text-slate-650 hover:text-slate-900 transition-colors text-[10px] select-none cursor-pointer`,title:`Zoom In`,children:`+`})]}),(0,u.jsx)(`div`,{className:`h-3.5 w-[1px] bg-gray-200`}),(0,u.jsx)(`input`,{type:`range`,min:`0.5`,max:`2.0`,step:`0.05`,value:_,onChange:e=>v(parseFloat(e.target.value)),className:`w-16 accent-orange-600 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer`}),(0,u.jsx)(`button`,{onClick:()=>{v(1),y({x:0,y:0})},className:`text-[9px] font-bold text-slate-500 hover:text-slate-800 hover:underline cursor-pointer`,children:`Reset`})]})]})}function wx({previewOpen:e,setPreviewOpen:t,generateExportHtml:n}){return e?(0,u.jsx)(`div`,{className:`fixed inset-0 bg-slate-950/65 backdrop-blur-xs flex items-center justify-center z-50 p-6`,children:(0,u.jsxs)(`div`,{className:`bg-white rounded-2xl w-full max-w-[900px] h-[90%] flex flex-col shadow-2xl overflow-hidden border border-gray-200`,children:[(0,u.jsxs)(`div`,{className:`bg-slate-50 border-b border-gray-200 px-6 py-4 flex items-center justify-between`,children:[(0,u.jsxs)(`div`,{children:[(0,u.jsxs)(`h3`,{className:`text-sm font-bold text-slate-800 flex items-center space-x-2`,children:[(0,u.jsx)(Wb,{className:`h-4 w-4 text-slate-655`}),(0,u.jsx)(`span`,{children:`HTML Document Render Output`})]}),(0,u.jsx)(`p`,{className:`text-[10px] text-slate-400 mt-0.5`,children:`Sandboxed iframe preview of final template markup`})]}),(0,u.jsx)(`button`,{onClick:()=>t(!1),className:`p-1.5 bg-slate-100 hover:bg-slate-200 text-slate-500 hover:text-slate-800 rounded-lg transition-colors`,children:(0,u.jsx)(lx,{className:`h-4 w-4`})})]}),(0,u.jsx)(`div`,{className:`flex-1 bg-slate-100 p-6 overflow-hidden`,children:(0,u.jsx)(`iframe`,{title:`HTML Preview Sandbox`,srcDoc:n(!0),className:`w-full h-full bg-white border border-gray-200 rounded-xl shadow-xs`,sandbox:`allow-same-origin`})}),(0,u.jsxs)(`details`,{className:`bg-slate-50 border-t border-gray-200`,children:[(0,u.jsxs)(`summary`,{className:`px-6 py-3 text-xs font-bold text-slate-600 cursor-pointer select-none hover:text-slate-800 flex items-center justify-between`,children:[(0,u.jsx)(`span`,{children:`View Raw Output Markup (HTML)`}),(0,u.jsx)(`span`,{className:`text-[10px] text-slate-400 font-medium font-sans`,children:`Click to expand`})]}),(0,u.jsx)(`div`,{className:`px-6 pb-6 overflow-x-auto max-h-[250px]`,children:(0,u.jsx)(`pre`,{className:`bg-slate-900 text-slate-200 p-4 rounded-lg text-[10px] font-mono whitespace-pre-wrap select-all`,children:n(!1)})})]})]})}):null}function Tx({bubbleCoords:e,applySelectionFormat:t}){return e?(0,u.jsxs)(`div`,{className:`fixed bg-slate-900 border border-slate-800 text-white rounded-xl shadow-xl py-1 px-1.5 flex items-center space-x-1.5 z-50 select-none -translate-x-1/2`,style:{left:`${e.x}px`,top:`${e.y}px`},children:[(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`bold`)},className:`h-6 w-6 rounded hover:bg-slate-800 flex items-center justify-center font-bold text-xs text-slate-200 hover:text-white transition-colors`,title:`Bold Selection`,children:`B`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`italic`)},className:`h-6 w-6 rounded hover:bg-slate-800 flex items-center justify-center italic text-xs text-slate-200 hover:text-white transition-colors`,title:`Italic Selection`,children:`I`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`underline`)},className:`h-6 w-6 rounded hover:bg-slate-800 flex items-center justify-center underline text-xs text-slate-200 hover:text-white transition-colors`,title:`Underline Selection`,children:`U`}),(0,u.jsx)(`div`,{className:`h-4 w-[1px] bg-slate-800 mx-1`}),(0,u.jsxs)(`select`,{value:e.format||``,onChange:e=>{e.preventDefault(),e.target.value&&(t(`formatBlock`,e.target.value),e.target.value===`P`&&t(`fontSize`,`3`))},className:`bg-slate-800 text-white text-[10px] rounded px-1 py-0.5 outline-none cursor-pointer border border-slate-700`,children:[(0,u.jsx)(`option`,{value:``,disabled:!0,children:`Format...`}),(0,u.jsx)(`option`,{value:`H1`,children:`Heading 1`}),(0,u.jsx)(`option`,{value:`H2`,children:`Heading 2`}),(0,u.jsx)(`option`,{value:`H3`,children:`Heading 3`}),(0,u.jsx)(`option`,{value:`P`,children:`Paragraph`}),(0,u.jsx)(`option`,{value:`BLOCKQUOTE`,children:`Quote`})]}),(0,u.jsx)(`div`,{className:`h-4 w-[1px] bg-slate-800 mx-1`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`foreColor`,`#3b82f6`)},className:`h-4 w-4 rounded-full bg-blue-500 hover:scale-110 transition-transform cursor-pointer`,title:`Color Blue`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`foreColor`,`#ef4444`)},className:`h-4 w-4 rounded-full bg-red-500 hover:scale-110 transition-transform cursor-pointer`,title:`Color Red`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`foreColor`,`#1e293b`)},className:`h-4 w-4 rounded-full bg-slate-700 hover:scale-110 transition-transform cursor-pointer border border-slate-850`,title:`Color Slate`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`foreColor`,`#22c55e`)},className:`h-4 w-4 rounded-full bg-green-500 hover:scale-110 transition-transform cursor-pointer`,title:`Color Green`}),(0,u.jsx)(`div`,{className:`h-4 w-[1px] bg-slate-800`}),(0,u.jsx)(`button`,{onMouseDown:e=>{e.preventDefault(),t(`removeFormat`)},className:`hover:bg-slate-800 rounded text-[10px] px-1.5 h-6 flex items-center justify-center text-slate-400 hover:text-white font-semibold transition-colors`,title:`Clear Formatting`,children:`Clear`})]}):null}zu.workerSrc=`https://cdn.jsdelivr.net/npm/pdfjs-dist@6.1.200/build/pdf.worker.min.mjs`;var Ex=e=>{let t=[];return e.forEach(e=>{e.style.sameRow&&t.length>0?t[t.length-1].blocks.push(e):t.push({id:e.id,blocks:[e]})}),t},Dx=e=>e?e.replace(/contenteditable="[^"]*"/g,``).replace(/class="[^"]*"/g,``).replace(/data-placeholder="[^"]*"/g,``).replace(/&nbsp;/g,` `).trim():``;function Ox({tableSchemas:e,placeholders:t,defaultLogo:n,defaultBanner:r,headerTitle:i=`HTML Template Builder`,headerSubtitle:a=`Design and export templates dynamically`,headerLogo:o,typographySizes:s,typographyWeights:c,typographyFonts:d,templatingLanguage:f=`csharp`,loopSyntax:p=`foreach`,onChange:m,onExport:h,onExportPdf:g,initialBlocks:v,defaultStyles:y,showImportHtml:b=!0,showImportPdf:x=!0,showClearCanvas:S=!0,showPreview:C=!0,showExport:T=!0,showExportPdf:E=!0,showHeader:D=!0,isTablesLoading:O,tablesLoading:k,isPlaceholdersLoading:te,placeholdersLoading:A,customButtonStyles:ne,customButtonClassNames:re,customActionComponents:j}={}){let{zoom:ie,setZoom:ae,panOffset:oe,setPanOffset:se,spacePressed:ce,canvasHeight:le,viewportRef:ue,canvasContainerRef:de,handleMouseDown:fe,handleMouseMove:pe,handleMouseUp:me}=Sb(),{customTableName:he,setCustomTableName:ge,customLoopStart:_e,setCustomLoopStart:ve,customLoopEnd:ye,setCustomLoopEnd:be,newColName:xe,setNewColName:Se,newColPlaceholder:Ce,setNewColPlaceholder:we,bubbleCoords:Te,setBubbleCoords:M,schemas:N,isParsing:Ee,setIsParsing:De,parseStatusText:Oe,setParseStatusText:ke,parseError:Ae,setParseError:je,draggedSidebarItem:P,setDraggedSidebarItem:Me,dragOverIndex:Ne,setDragOverIndex:Pe,newImgTypeName:Fe,setNewImgTypeName:Ie,customImageTypes:Le,searchPlaceholder:F,setSearchPlaceholder:I,handleAddCustomTable:Re,handleAddCustomImageType:ze,toggleSchemaColumn:Be,applySelectionFormat:Ve,setSavedRange:He}=Cb({tableSchemas:e}),{blocks:L,setBlocks:Ue,selectedBlockId:We,setSelectedBlockId:Ge,getSelectedBlock:Ke,createTextBlock:qe,createTableBlock:Je,createImageBlock:Ye,handleDeleteBlock:Xe,handleDuplicateBlock:Ze,handleMoveBlockUp:R,handleMoveBlockDown:z,updateSelectedStyle:Qe,updateSelectedImageInfo:$e,handleRemoveTableColumn:et,handleAddTableColumn:tt,handleUpdateTableColumn:nt,handleReorderTableColumn:rt,handleAddTableRow:it,handleRemoveTableRow:at}=xb({initialBlocks:v,defaultStyles:y,defaultLogo:n,defaultBanner:r,onChange:m}),[ot,st]=(0,l.useState)(`text`),[ct,B]=(0,l.useState)(!1),[lt]=(0,l.useState)(!0),[ut]=(0,l.useState)(s||[{label:`8px`,value:`8px`},{label:`9px`,value:`9px`},{label:`10px`,value:`10px`},{label:`11px`,value:`11px`},{label:`12px`,value:`12px`},{label:`14px`,value:`14px`},{label:`16px`,value:`16px`},{label:`18px`,value:`18px`},{label:`20px`,value:`20px`},{label:`24px`,value:`24px`},{label:`28px`,value:`28px`},{label:`32px`,value:`32px`},{label:`36px`,value:`36px`}]),[dt]=(0,l.useState)(d||[{label:`Outfit (Default)`,value:`'Outfit', 'Inter', sans-serif`},{label:`Inter`,value:`'Inter', sans-serif`},{label:`Roboto`,value:`'Roboto', sans-serif`},{label:`System Sans`,value:`system-ui, -apple-system, sans-serif`},{label:`Georgia (Serif)`,value:`Georgia, serif`},{label:`Courier New (Mono)`,value:`'Courier New', monospace`}]),[ft]=(0,l.useState)(c||[{label:`Light`,value:`300`},{label:`Regular`,value:`400`},{label:`Medium`,value:`500`},{label:`Semibold`,value:`600`},{label:`Bold`,value:`700`},{label:`Extra Bold`,value:`800`}]),[pt]=(0,l.useState)(f),[mt]=(0,l.useState)(p),[ht]=(0,l.useState)(!0),gt={};(0,l.useEffect)(()=>{let e=()=>{let e=window.getSelection();if(!e||e.isCollapsed||e.toString().trim()===``){M(null),He(null);return}let t=document.activeElement;if(!(t&&t.getAttribute(`contenteditable`)===`true`&&(t.closest(`.canvas-editor-area`)||t.closest(`td`)))){M(null),He(null);return}try{let t=e.getRangeAt(0),n=t.getBoundingClientRect(),r=document.queryCommandValue(`formatBlock`)||``;r=r.toUpperCase(),M({x:n.left+n.width/2,y:n.top-38,format:r}),He(t)}catch(e){M(null),He(null)}};return document.addEventListener(`selectionchange`,e),()=>document.removeEventListener(`selectionchange`,e)},[M,He]),(0,l.useEffect)(()=>{let e=ue.current;if(!e)return;let t=e=>{if(e.ctrlKey){e.preventDefault();let t=e.deltaY<0?1:-1;ae(e=>Math.min(2,Math.max(.5,e+t*.05)))}};return e.addEventListener(`wheel`,t,{passive:!1}),()=>e.removeEventListener(`wheel`,t)},[ue,ae]),(0,l.useEffect)(()=>{window.updateContentFromRawDelete=(e,t)=>{Ue(n=>n.map(n=>n.id===e?w(w({},n),{},{content:t}):n))}},[Ue]);let _t=e=>{var t;let n=(t=e.target.files)==null?void 0:t[0];if(!n)return;De(!0),ke(`Parsing HTML...`),je(null);let r=new FileReader;r.onload=t=>{try{var n;let e=yb((n=t.target)==null?void 0:n.result);e.length>0&&Ue(e)}catch(e){console.error(e),je(e.message||`Failed to parse HTML`)}finally{De(!1),e.target&&(e.target.value=``)}},r.readAsText(n)},vt=e=>{var t;let n=(t=e.target.files)==null?void 0:t[0];if(!n)return;De(!0),ke(`Reading PDF text layers...`),je(null);let r=new FileReader;r.onload=_(function*(){try{let e=r.result,t=yield bb(e,ee);t.length>0&&Ue(e=>[...e,...t])}catch(e){console.error(e),je(e.message||`Failed to read PDF`)}finally{De(!1),e.target&&(e.target.value=``)}}),r.readAsArrayBuffer(n)},yt=e=>{let t=e||`items`;if(pt===`handlebars`||pt===`mustache`){let e=mt===`foreach`?`foreach`:`each`;return{start:`{{#${e} ${t}}}`,end:`{{/${e}}}`}}return pt===`liquid`||pt===`scriban`||pt===`dotnet`?{start:`{% for ${t.endsWith(`s`)?t.slice(0,-1):`item`} in ${t} %}`,end:`{% endfor %}`}:pt===`js`||pt===`ts`?{start:`\${${t}.map(${t.endsWith(`s`)?t.slice(0,-1):`item`} => \``,end:"`).join('')}"}:pt===`csharp`||pt===`razor`?{start:`@foreach (var ${t.endsWith(`s`)?t.slice(0,-1):`item`} in ${t}) {`,end:`}`}:{start:_e.replace(`items`,t),end:ye}},bt=(e=!1)=>{let t=`<!DOCTYPE html>
 <html>
 <head>
   <meta charset="utf-8">
@@ -72,7 +72,7 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
   </style>
 </head>
 <body>
-`;return Tx(L).forEach(n=>{let r=n.blocks.length>1;if(r){var i;let e=((i=n.blocks[0])==null||(i=i.style)==null?void 0:i.flexDirection)||`row`;t+=`  <div class="row-container" style="display: flex; flex-direction: ${e}; flex-wrap: wrap; gap: 16px; width: 100%; align-items: stretch; margin-bottom: 8px;">\n`}n.blocks.forEach(n=>{let i=hb(n.style),a=n.style.textAlign===`center`?`margin-left: auto; margin-right: auto;`:n.style.textAlign===`right`?`margin-left: auto; margin-right: 0;`:`margin-left: 0; margin-right: auto;`,o=n.style.width||(r?`48%`:`100%`),s=r?`0px`:n.style.marginBottom||`8px`,c=n.style.height?`height: ${n.style.height};`:``,l=`margin-bottom: ${s}; padding: ${n.style.padding||`8px`}; width: ${o}; min-height: ${n.style.minHeight||`auto`}; ${c} ${a} background-color: ${n.style.backgroundColor||`transparent`};`;if(n.type===`table`){let r=n.tableInfo;if(!r)return;let a=r.columns.filter(e=>e.enabled!==!1);t+=`  <div class="block-container" style="${l}">\n`;let o=i;i.includes(`font-size`)||(o+=` font-size: 10px;`),i.includes(`color`)||(o+=` color: #334155;`),i.includes(`text-align`)||(o+=` text-align: left;`),i.includes(`font-weight`)||(o+=` font-weight: 400;`),t+=`    <table style="${o}">\n`,t+=`      <thead>
+`;return Ex(L).forEach(n=>{let r=n.blocks.length>1;if(r){var i;let e=((i=n.blocks[0])==null||(i=i.style)==null?void 0:i.flexDirection)||`row`;t+=`  <div class="row-container" style="display: flex; flex-direction: ${e}; flex-wrap: wrap; gap: 16px; width: 100%; align-items: stretch; margin-bottom: 8px;">\n`}n.blocks.forEach(n=>{let i=hb(n.style),a=n.style.textAlign===`center`?`margin-left: auto; margin-right: auto;`:n.style.textAlign===`right`?`margin-left: auto; margin-right: 0;`:`margin-left: 0; margin-right: auto;`,o=n.style.width||(r?`48%`:`100%`),s=r?`0px`:n.style.marginBottom||`8px`,c=n.style.height?`height: ${n.style.height};`:``,l=`margin-bottom: ${s}; padding: ${n.style.padding||`8px`}; width: ${o}; min-height: ${n.style.minHeight||`auto`}; ${c} ${a} background-color: ${n.style.backgroundColor||`transparent`};`;if(n.type===`table`){let r=n.tableInfo;if(!r)return;let a=r.columns.filter(e=>e.enabled!==!1);t+=`  <div class="block-container" style="${l}">\n`;let o=i;i.includes(`font-size`)||(o+=` font-size: 10px;`),i.includes(`color`)||(o+=` color: #334155;`),i.includes(`text-align`)||(o+=` text-align: left;`),i.includes(`font-weight`)||(o+=` font-weight: 400;`),t+=`    <table style="${o}">\n`,t+=`      <thead>
 `,t+=`        <tr>
 `,a.forEach(e=>{let n=e.columnName||``;t+=`          <th>${n}</th>\n`}),t+=`        </tr>
 `,t+=`      </thead>
@@ -84,16 +84,16 @@ fn fs_main(in : VertexOutput) -> @location(0) vec4<f32> {
 `,i+=`        </thead>
 `,i+=`        <tbody>
 `,e&&lt){let e=t.columnName;(n&&Array.isArray(n[e])?n[e]:[{}]).forEach(e=>{i+=`          <tr>
-`,r.forEach(t=>{let n=Ex(t.placeholder);typeof e==`object`&&e&&Object.keys(e).forEach(t=>{let r=RegExp(`\\{\\{(item\\.|package\\.)?${t}\\}\\}`,`g`);n=n.replace(r,e[t])}),Object.keys(gt).forEach(e=>{let t=gt[e];n.includes(`{{${e}}}`)&&(n=n.replace(RegExp(`\\{\\{${e}\\}\\}`,`g`),t))}),n=n.replace(/\{\{[^}]+\}\}/g,``),i+=`            <td>${n}</td>\n`}),i+=`          </tr>
+`,r.forEach(t=>{let n=Dx(t.placeholder);typeof e==`object`&&e&&Object.keys(e).forEach(t=>{let r=RegExp(`\\{\\{(item\\.|package\\.)?${t}\\}\\}`,`g`);n=n.replace(r,e[t])}),Object.keys(gt).forEach(e=>{let t=gt[e];n.includes(`{{${e}}}`)&&(n=n.replace(RegExp(`\\{\\{${e}\\}\\}`,`g`),t))}),n=n.replace(/\{\{[^}]+\}\}/g,``),i+=`            <td>${n}</td>\n`}),i+=`          </tr>
 `})}else{let e=t.columnName||`items`,n=yt(e);ht?i+=`          <!-- ${n.start} --><tr>\n`:i+=`          ${n.start}<tr>\n`,r.forEach(e=>{i+=`            <td>${e.placeholder}</td>\n`}),ht?i+=`          </tr><!-- ${n.end} -->\n`:i+=`          </tr>${n.end}\n`}return i+=`        </tbody>
 `,i+=`      </table>`,i},c=t=>{let n=`        <tr>
-`;return a.forEach(r=>{if(r.loop&&r.columns&&r.columns.length>0)n+=`          <td>\n${s(r,t)}\n          </td>\n`;else{let i=Ex(r.placeholder);e&&lt&&(Object.keys(t).forEach(e=>{i.includes(`{{${e}}}`)&&(i=i.replace(RegExp(`\\{\\{${e}\\}\\}`,`g`),t[e])),i.includes(`{{item.${e}}}`)&&(i=i.replace(RegExp(`\\{\\{item\\.${e}\\}\\}`,`g`),t[e])),i.includes(`{{package.${e}}}`)&&(i=i.replace(RegExp(`\\{\\{package\\.${e}\\}\\}`,`g`),t[e]))}),Object.keys(gt).forEach(e=>{let t=gt[e];i.includes(`{{${e}}}`)&&(i=i.replace(RegExp(`\\{\\{${e}\\}\\}`,`g`),t))}),i=i.replace(/\{\{[^}]+\}\}/g,``)),n+=`          <td>${i}</td>\n`}}),n+=`        </tr>
+`;return a.forEach(r=>{if(r.loop&&r.columns&&r.columns.length>0)n+=`          <td>\n${s(r,t)}\n          </td>\n`;else{let i=Dx(r.placeholder);e&&lt&&(Object.keys(t).forEach(e=>{i.includes(`{{${e}}}`)&&(i=i.replace(RegExp(`\\{\\{${e}\\}\\}`,`g`),t[e])),i.includes(`{{item.${e}}}`)&&(i=i.replace(RegExp(`\\{\\{item\\.${e}\\}\\}`,`g`),t[e])),i.includes(`{{package.${e}}}`)&&(i=i.replace(RegExp(`\\{\\{package\\.${e}\\}\\}`,`g`),t[e]))}),Object.keys(gt).forEach(e=>{let t=gt[e];i.includes(`{{${e}}}`)&&(i=i.replace(RegExp(`\\{\\{${e}\\}\\}`,`g`),t))}),i=i.replace(/\{\{[^}]+\}\}/g,``)),n+=`          <td>${i}</td>\n`}}),n+=`        </tr>
 `,n};if(e&&lt){let e=[];e=r.mockRows&&r.mockRows.length>0?r.mockRows:[{}],e.forEach(e=>{t+=c(e)})}else{let e=r.tableName===`package`?`shipment.packages`:r.tableName===`article`?`package.articles`:r.tableName,n=yt(e);ht?t+=`        <!-- ${n.start} --><tr>\n`:t+=`        ${n.start}<tr>\n`,a.forEach(e=>{e.loop&&e.columns&&e.columns.length>0?t+=`          <td>\n${s(e)}\n          </td>\n`:t+=`          <td>${e.placeholder}</td>\n`}),ht?t+=`        </tr><!-- ${n.end} -->\n`:t+=`        </tr>${n.end}\n`}t+=`      </tbody>
 `,t+=`    </table>
 `,t+=`  </div>
 `}else if(n.type===`image`){let i=n.imageInfo||{imageType:`logo`},a=``,s=n.style.height||n.style.minHeight||`auto`,c=n.style.imageWidth||(n.style.width&&n.style.width.endsWith(`px`)?n.style.width:`100%`);a=i.imageType===`barcode`?e&&lt?_b(i.barcodeValue||`SHIP-99201`):`<img src="${i.barcodePlaceholder||`{{barcode}}`}" style="width: ${c}; height: ${s}; display: block;" alt="Barcode" />`:`<img src="${i.url||`data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4MDAiIGhlaWdodD0iNDAwIiB2aWV3Qm94PSIwIDAgODAwIDQwMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0iI2YxZjVmOSIvPjxyZWN0IHg9IjEwIiB5PSIxMCIgd2lkdGg9Ijc4MCIgaGVpZ2h0PSIzODAiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2RiZTJmNiIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtZGFzaGFycmF5PSI2Ii8+PHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSInT3V0Zml0JywgJ0ludGVyJywgc2Fucy1zZXJpZiIgZm9udC1zaXplPSIyNCIgZm9udC13ZWlnaHQ9IjYwMCIgZmlsbD0iIzk0YTNiOCIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSI+U2VsZWN0IEltYWdlPC90ZXh0Pjwvc3ZnPg==`}" style="width: ${c}; height: auto; max-height: ${s===`auto`?`300px`:s}; object-fit: ${n.style.objectFit||`contain`}; ${n.style.opacity?`opacity: ${n.style.opacity};`:``} display: block;" alt="${i.imageType}" />`;let l=r?`100%`:n.style.width&&n.style.width.endsWith(`%`)?n.style.width:`100%`;t+=`  <div class="block-container" style="display: block; width: ${o}; text-align: ${n.style.textAlign||`left`}; border: none; background-color: transparent; ${n.style.marginBottom?`margin-bottom: ${n.style.marginBottom};`:``}">\n`,t+=`    <div style="width: ${l}; display: inline-block;">\n`,t+=`      ${a}\n`,t+=`    </div>
 `,t+=`  </div>
-`}else{let r=`p`;[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`].includes(n.type)?r=n.type:n.type===`title`?r=`h1`:n.type===`subtitle`?r=`h2`:n.type===`caption`&&(r=`span`);let a=Ex(n.content);e&&lt&&(Object.keys(gt).forEach(e=>{let t=gt[e];a=a.replace(RegExp(`\\{\\{${e}\\}\\}`,`g`),t)}),a=a.replace(/\{\{[^}]+\}\}/g,``)),t+=`  <div class="block-container" style="${l} text-align: ${n.style.textAlign};">\n`,t+=`    <${r} style="${i}">${a}</${r}>\n`,t+=`  </div>
+`}else{let r=`p`;[`h1`,`h2`,`h3`,`h4`,`h5`,`h6`].includes(n.type)?r=n.type:n.type===`title`?r=`h1`:n.type===`subtitle`?r=`h2`:n.type===`caption`&&(r=`span`);let a=Dx(n.content);e&&lt&&(Object.keys(gt).forEach(e=>{let t=gt[e];a=a.replace(RegExp(`\\{\\{${e}\\}\\}`,`g`),t)}),a=a.replace(/\{\{[^}]+\}\}/g,``)),t+=`  <div class="block-container" style="${l} text-align: ${n.style.textAlign};">\n`,t+=`    <${r} style="${i}">${a}</${r}>\n`,t+=`  </div>
 `}}),r&&(t+=`  </div>
 `)}),t+=`</body>
-</html>`,t},xt=()=>{let e=bt(!1);if(h)h(e);else{let t=new Blob([e],{type:`text/html;charset=utf-8;`}),n=document.createElement(`a`);n.href=URL.createObjectURL(t),n.download=`exported_template.html`,n.click()}},St=()=>{let e=bt(!0);if(g)g(e);else{let t=window.open(``,`_blank`);t&&(t.document.write(e),t.document.close(),t.focus(),setTimeout(()=>{t.print(),t.close()},500))}},Ct=()=>{Ue([]),Ge(null)},wt=(e,t)=>{let n=e.dataTransfer.getData(`placeholder`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=`{{${n.replace(/[{}]/g,``)}}}`;Ue(e=>e.map(e=>e.id===t?w(w({},e),{},{content:e.content+r}):e))},Tt=(e,t,n,r)=>{let i=e.dataTransfer.getData(`placeholder`);if(!i)return;e.preventDefault(),e.stopPropagation();let a=i.startsWith(`{{`)?i:`{{${i}}}`;Et(t,n,a,r)},Et=(e,t,n,r)=>{Ue(i=>i.map(i=>{if(i.id===e&&i.type===`table`&&i.tableInfo){var a;let e=[...i.tableInfo.columns];if(r!==void 0&&(a=e[t])!=null&&a.columns){let i=[...e[t].columns];i[r]=w(w({},i[r]),{},{placeholder:n}),e[t]=w(w({},e[t]),{},{columns:i})}else e[t]=w(w({},e[t]),{},{placeholder:n});return w(w({},i),{},{tableInfo:w(w({},i.tableInfo),{},{columns:e})})}return i}))};return(0,u.jsxs)(`div`,{className:`min-h-screen bg-slate-50 flex flex-col font-sans`,children:[D&&(0,u.jsx)(ux,{headerLogo:o,headerTitle:i,headerSubtitle:a,parseError:Ae,isParsing:Ee,parseStatusText:Oe}),(0,u.jsxs)(`div`,{className:`flex-1 flex flex-col lg:flex-row overflow-hidden`,children:[(0,u.jsxs)(`main`,{className:`w-full lg:w-[70%] flex flex-col bg-slate-100 border-b lg:border-b-0 lg:border-r border-gray-200 overflow-hidden relative`,children:[(0,u.jsx)(Sx,{showImportHtml:b,showImportPdf:x,showPreview:C,showExport:T,showExportPdf:E,showClearCanvas:S,customButtonStyles:ne,customButtonClassNames:re,customActionComponents:j,handleHtmlImport:_t,handlePdfImport:vt,setPreviewOpen:B,handleExport:xt,handleExportPdf:St,handleClearCanvas:Ct,zoom:ie,setZoom:ae,setPanOffset:se}),(0,u.jsx)(xx,{blocks:L,setBlocks:Ue,selectedBlockId:We,setSelectedBlockId:Ge,setActiveTab:st,showMockData:lt,placeholderMockData:gt,dragOverIndex:Ne,setDragOverIndex:Pe,draggedSidebarItem:P,defaultStyles:y,zoom:ie,panOffset:oe,spacePressed:ce,canvasHeight:le,viewportRef:ue,canvasContainerRef:de,handleMouseDown:fe,handleMouseMove:pe,handleMouseUp:me,createTextBlock:qe,duplicateBlock:Ze,reorderBlock:(e,t)=>{t===`up`?R(e):z(e)},handleDeleteBlock:Xe,handleSidebarDrop:e=>{if(!P)return;let t;if(P.type===`table`&&P.tableSchema)t=Je(P.tableSchema);else if(P.type===`image`&&P.imageType)t=Ye(P.imageType);else{let e=`Enter text here...`;P.type===`h1`?e=`Heading 1`:P.type===`h2`?e=`Heading 2`:P.type===`h3`?e=`Heading 3`:P.type===`title`?e=`Document Title`:P.type===`subtitle`?e=`Document Subtitle`:P.type===`caption`&&(e=`Caption text...`),t=qe(P.type,e,y==null?void 0:y[P.type])}Ue(n=>{let r=[...n];return r.splice(e,0,t),r}),Ge(t.id),st(`styles`)},handleTableCellDrop:Tt,updateTableCell:Et,handleTextDrop:wt})]}),(0,u.jsx)(gx,{activeTab:ot,setActiveTab:st,setBlocks:Ue,selectedBlockId:We,setSelectedBlockId:Ge,getSelectedBlock:Ke,defaultStyles:y,createTextBlock:qe,createImageBlock:Ye,updateSelectedStyle:Qe,updateSelectedImageInfo:$e,handleDeleteBlock:Xe,handleRemoveTableColumn:et,handleAddTableColumn:tt,handleUpdateTableColumn:nt,handleReorderTableColumn:rt,handleAddTableRow:it,handleRemoveTableRow:at,schemas:N,toggleSchemaColumn:Be,customTableName:he,setCustomTableName:ge,customLoopStart:_e,setCustomLoopStart:ve,customLoopEnd:ye,setCustomLoopEnd:be,handleAddCustomTable:Re,newColName:xe,setNewColName:Se,newColPlaceholder:Ce,setNewColPlaceholder:we,customImageTypes:Le,newImgTypeName:Fe,setNewImgTypeName:Ie,handleAddCustomImageType:ze,placeholders:t,searchPlaceholder:F,setSearchPlaceholder:I,handleSidebarDragStart:(e,t,n,r)=>{Me({type:t,tableSchema:n,imageType:r}),e.dataTransfer.setData(`source`,`sidebar`),e.dataTransfer.effectAllowed=`copy`},isTablesLoading:O,tablesLoading:k,isPlaceholdersLoading:te,placeholdersLoading:A,fontSizesState:ut,fontFamiliesState:dt,fontWeightsState:ft})]}),(0,u.jsx)(wx,{bubbleCoords:Te,applySelectionFormat:Ve}),(0,u.jsx)(Cx,{previewOpen:ct,setPreviewOpen:B,generateExportHtml:bt})]})}var Ox=Dx;exports.HtmlEditor=Dx,exports.default=Ox;
+</html>`,t},xt=()=>{let e=bt(!1);if(h)h(e);else{let t=new Blob([e],{type:`text/html;charset=utf-8;`}),n=document.createElement(`a`);n.href=URL.createObjectURL(t),n.download=`exported_template.html`,n.click()}},St=()=>{let e=bt(!0);if(g)g(e);else{let t=window.open(``,`_blank`);t&&(t.document.write(e),t.document.close(),t.focus(),setTimeout(()=>{t.print(),t.close()},500))}},Ct=()=>{Ue([]),Ge(null)},wt=(e,t)=>{let n=e.dataTransfer.getData(`placeholder`);if(!n)return;e.preventDefault(),e.stopPropagation();let r=`{{${n.replace(/[{}]/g,``)}}}`;Ue(e=>e.map(e=>e.id===t?w(w({},e),{},{content:e.content+r}):e))},Tt=(e,t,n,r)=>{let i=e.dataTransfer.getData(`placeholder`);if(!i)return;e.preventDefault(),e.stopPropagation();let a=i.startsWith(`{{`)?i:`{{${i}}}`;Et(t,n,a,r)},Et=(e,t,n,r)=>{Ue(i=>i.map(i=>{if(i.id===e&&i.type===`table`&&i.tableInfo){var a;let e=[...i.tableInfo.columns];if(r!==void 0&&(a=e[t])!=null&&a.columns){let i=[...e[t].columns];i[r]=w(w({},i[r]),{},{placeholder:n}),e[t]=w(w({},e[t]),{},{columns:i})}else e[t]=w(w({},e[t]),{},{placeholder:n});return w(w({},i),{},{tableInfo:w(w({},i.tableInfo),{},{columns:e})})}return i}))};return(0,u.jsxs)(`div`,{className:`min-h-screen bg-slate-50 flex flex-col font-sans`,children:[D&&(0,u.jsx)(ux,{headerLogo:o,headerTitle:i,headerSubtitle:a,parseError:Ae,isParsing:Ee,parseStatusText:Oe}),(0,u.jsxs)(`div`,{className:`flex-1 flex flex-col lg:flex-row overflow-hidden`,children:[(0,u.jsxs)(`main`,{className:`w-full lg:w-[70%] flex flex-col bg-slate-100 border-b lg:border-b-0 lg:border-r border-gray-200 overflow-hidden relative`,children:[(0,u.jsx)(Cx,{showImportHtml:b,showImportPdf:x,showPreview:C,showExport:T,showExportPdf:E,showClearCanvas:S,customButtonStyles:ne,customButtonClassNames:re,customActionComponents:j,handleHtmlImport:_t,handlePdfImport:vt,setPreviewOpen:B,handleExport:xt,handleExportPdf:St,handleClearCanvas:Ct,zoom:ie,setZoom:ae,setPanOffset:se}),(0,u.jsx)(Sx,{blocks:L,setBlocks:Ue,selectedBlockId:We,setSelectedBlockId:Ge,setActiveTab:st,showMockData:lt,placeholderMockData:gt,dragOverIndex:Ne,setDragOverIndex:Pe,draggedSidebarItem:P,defaultStyles:y,zoom:ie,panOffset:oe,spacePressed:ce,canvasHeight:le,viewportRef:ue,canvasContainerRef:de,handleMouseDown:fe,handleMouseMove:pe,handleMouseUp:me,createTextBlock:qe,duplicateBlock:Ze,reorderBlock:(e,t)=>{t===`up`?R(e):z(e)},handleDeleteBlock:Xe,handleSidebarDrop:e=>{if(!P)return;let t;if(P.type===`table`&&P.tableSchema)t=Je(P.tableSchema);else if(P.type===`image`&&P.imageType)t=Ye(P.imageType);else{let e=`Enter text here...`;P.type===`h1`?e=`Heading 1`:P.type===`h2`?e=`Heading 2`:P.type===`h3`?e=`Heading 3`:P.type===`title`?e=`Document Title`:P.type===`subtitle`?e=`Document Subtitle`:P.type===`caption`&&(e=`Caption text...`),t=qe(P.type,e,y==null?void 0:y[P.type])}Ue(n=>{let r=[...n];return r.splice(e,0,t),r}),Ge(t.id),st(`styles`)},handleTableCellDrop:Tt,updateTableCell:Et,handleTextDrop:wt})]}),(0,u.jsx)(_x,{activeTab:ot,setActiveTab:st,setBlocks:Ue,selectedBlockId:We,setSelectedBlockId:Ge,getSelectedBlock:Ke,defaultStyles:y,createTextBlock:qe,createImageBlock:Ye,updateSelectedStyle:Qe,updateSelectedImageInfo:$e,handleDeleteBlock:Xe,handleRemoveTableColumn:et,handleAddTableColumn:tt,handleUpdateTableColumn:nt,handleReorderTableColumn:rt,handleAddTableRow:it,handleRemoveTableRow:at,schemas:N,toggleSchemaColumn:Be,customTableName:he,setCustomTableName:ge,customLoopStart:_e,setCustomLoopStart:ve,customLoopEnd:ye,setCustomLoopEnd:be,handleAddCustomTable:Re,newColName:xe,setNewColName:Se,newColPlaceholder:Ce,setNewColPlaceholder:we,customImageTypes:Le,newImgTypeName:Fe,setNewImgTypeName:Ie,handleAddCustomImageType:ze,placeholders:t,searchPlaceholder:F,setSearchPlaceholder:I,handleSidebarDragStart:(e,t,n,r)=>{Me({type:t,tableSchema:n,imageType:r}),e.dataTransfer.setData(`source`,`sidebar`),e.dataTransfer.effectAllowed=`copy`},isTablesLoading:O,tablesLoading:k,isPlaceholdersLoading:te,placeholdersLoading:A,fontSizesState:ut,fontFamiliesState:dt,fontWeightsState:ft})]}),(0,u.jsx)(Tx,{bubbleCoords:Te,applySelectionFormat:Ve}),(0,u.jsx)(wx,{previewOpen:ct,setPreviewOpen:B,generateExportHtml:bt})]})}var kx=Ox;exports.HtmlEditor=Ox,exports.default=kx;

package/dist/index.js

@@ -17210,7 +17210,8 @@ function Sb({ initialBlocks: e, defaultStyles: t, defaultLogo: n, defaultBanner:
 					textAlign: "center",
 					marginBottom: "0px",
 					padding: "0px",
-					width: i,
+					width: "100%",
+					imageWidth: i,
 					height: a,
 					minHeight: a,
 					bold: !1,
@@ -18512,7 +18513,15 @@ function hx({ placeholders: e, schemas: t, searchPlaceholder: n, setSearchPlaceh
 }
 //#endregion
 //#region src/components/sidebar/StylesTab.tsx
-function gx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, updateSelectedImageInfo: r, fontSizesState: i, fontFamiliesState: a, fontWeightsState: u, handleDeleteBlock: d, newColName: f, setNewColName: p, newColPlaceholder: m, setNewColPlaceholder: h, handleAddTableColumn: g, handleRemoveTableColumn: _, handleUpdateTableColumn: v, handleReorderTableColumn: y, handleAddTableRow: b, handleRemoveTableRow: x, setBlocks: S }) {
+var gx = (e) => {
+	if (!e) return 100;
+	if (e.endsWith("%")) {
+		let t = parseInt(e, 10);
+		return isNaN(t) ? 100 : Math.min(100, Math.max(10, t));
+	}
+	return 100;
+};
+function _x({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, updateSelectedImageInfo: r, fontSizesState: i, fontFamiliesState: a, fontWeightsState: u, handleDeleteBlock: d, newColName: f, setNewColName: p, newColPlaceholder: m, setNewColPlaceholder: h, handleAddTableColumn: g, handleRemoveTableColumn: _, handleUpdateTableColumn: v, handleReorderTableColumn: y, handleAddTableRow: b, handleRemoveTableRow: x, setBlocks: S }) {
 	var C;
 	let [w, E] = o(null), [D, O] = o(""), [k, A] = o(""), [ee, j] = o(null), [te, ne] = o(""), [re, ie] = o(""), M = t();
 	if (!e || !M) return /* @__PURE__ */ l("div", {
@@ -18641,9 +18650,9 @@ function gx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 							children: [/* @__PURE__ */ c("label", {
 								className: "text-[10px] font-bold text-slate-400 uppercase tracking-wider",
 								children: "Block Width (%)"
-							}), /* @__PURE__ */ c("span", {
+							}), /* @__PURE__ */ l("span", {
 								className: "text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded",
-								children: M.style.width && M.style.width.endsWith("%") ? M.style.width : "100%"
+								children: [gx(M.style.width), "%"]
 							})]
 						}), /* @__PURE__ */ l("div", {
 							className: "flex items-center space-x-2",
@@ -18652,12 +18661,12 @@ function gx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 								min: "10",
 								max: "100",
 								step: "5",
-								value: parseInt(M.style.width || "100"),
-								onChange: (e) => n("width", `${e.target.value}%`),
+								value: gx(M.style.width),
+								onChange: (e) => n("width", `${Math.min(100, Math.max(10, parseInt(e.target.value, 10)))}%`),
 								className: "w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
 							}), /* @__PURE__ */ l("span", {
 								className: "text-[10px] font-mono text-slate-500 w-10 text-right",
-								children: [parseInt(M.style.width || "100"), "%"]
+								children: [gx(M.style.width), "%"]
 							})]
 						})]
 					}),
@@ -19102,22 +19111,25 @@ function gx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 							className: "flex items-center justify-between",
 							children: [/* @__PURE__ */ c("label", {
 								className: "text-[10px] font-bold text-slate-400 uppercase tracking-wider",
-								children: "Block Width"
-							}), /* @__PURE__ */ c("span", {
+								children: "Block Width (%)"
+							}), /* @__PURE__ */ l("span", {
 								className: "text-[10px] font-mono text-slate-500 font-bold bg-slate-100 px-1.5 py-0.5 rounded",
-								children: M.style.width || "100%"
+								children: [gx(M.style.width), "%"]
 							})]
-						}), /* @__PURE__ */ c("div", {
+						}), /* @__PURE__ */ l("div", {
 							className: "flex items-center space-x-2",
-							children: /* @__PURE__ */ c("input", {
+							children: [/* @__PURE__ */ c("input", {
 								type: "range",
 								min: "10",
 								max: "100",
 								step: "5",
-								value: parseInt(M.style.width || "100%"),
-								onChange: (e) => n("width", `${e.target.value}%`),
+								value: gx(M.style.width),
+								onChange: (e) => n("width", `${Math.min(100, Math.max(10, parseInt(e.target.value, 10)))}%`),
 								className: "w-full accent-slate-800 h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer"
-							})
+							}), /* @__PURE__ */ l("span", {
+								className: "text-[10px] font-mono text-slate-500 w-10 text-right",
+								children: [gx(M.style.width), "%"]
+							})]
 						})]
 					}), /* @__PURE__ */ l("div", {
 						className: "grid grid-cols-2 gap-3",
@@ -19487,7 +19499,7 @@ function gx({ selectedBlockId: e, getSelectedBlock: t, updateSelectedStyle: n, u
 }
 //#endregion
 //#region src/components/SidebarPanel.tsx
-function _x({ activeTab: e, setActiveTab: t, setBlocks: n, selectedBlockId: r, setSelectedBlockId: i, getSelectedBlock: a, defaultStyles: o, createTextBlock: s, createImageBlock: u, updateSelectedStyle: d, updateSelectedImageInfo: f, handleDeleteBlock: p, handleRemoveTableColumn: m, handleAddTableColumn: h, handleUpdateTableColumn: g, handleReorderTableColumn: _, handleAddTableRow: v, handleRemoveTableRow: y, schemas: b, toggleSchemaColumn: x, customTableName: S, setCustomTableName: C, customLoopStart: w, setCustomLoopStart: T, customLoopEnd: E, setCustomLoopEnd: D, handleAddCustomTable: O, newColName: k, setNewColName: A, newColPlaceholder: ee, setNewColPlaceholder: j, customImageTypes: te, newImgTypeName: ne, setNewImgTypeName: re, handleAddCustomImageType: ie, placeholders: M, searchPlaceholder: ae, setSearchPlaceholder: oe, handleSidebarDragStart: se, isTablesLoading: ce, tablesLoading: le, isPlaceholdersLoading: ue, placeholdersLoading: de, fontSizesState: fe, fontFamiliesState: pe, fontWeightsState: me }) {
+function vx({ activeTab: e, setActiveTab: t, setBlocks: n, selectedBlockId: r, setSelectedBlockId: i, getSelectedBlock: a, defaultStyles: o, createTextBlock: s, createImageBlock: u, updateSelectedStyle: d, updateSelectedImageInfo: f, handleDeleteBlock: p, handleRemoveTableColumn: m, handleAddTableColumn: h, handleUpdateTableColumn: g, handleReorderTableColumn: _, handleAddTableRow: v, handleRemoveTableRow: y, schemas: b, toggleSchemaColumn: x, customTableName: S, setCustomTableName: C, customLoopStart: w, setCustomLoopStart: T, customLoopEnd: E, setCustomLoopEnd: D, handleAddCustomTable: O, newColName: k, setNewColName: A, newColPlaceholder: ee, setNewColPlaceholder: j, customImageTypes: te, newImgTypeName: ne, setNewImgTypeName: re, handleAddCustomImageType: ie, placeholders: M, searchPlaceholder: ae, setSearchPlaceholder: oe, handleSidebarDragStart: se, isTablesLoading: ce, tablesLoading: le, isPlaceholdersLoading: ue, placeholdersLoading: de, fontSizesState: fe, fontFamiliesState: pe, fontWeightsState: me }) {
 	return /* @__PURE__ */ l("aside", {
 		className: "w-full lg:w-[30%] flex flex-col bg-white border-t lg:border-t-0 lg:border-l border-gray-200 overflow-y-auto shrink-0",
 		children: [/* @__PURE__ */ c("div", {
@@ -19568,7 +19580,7 @@ function _x({ activeTab: e, setActiveTab: t, setBlocks: n, selectedBlockId: r, s
 					isPlaceholdersLoading: ue,
 					placeholdersLoading: de
 				}),
-				e === "styles" && /* @__PURE__ */ c(gx, {
+				e === "styles" && /* @__PURE__ */ c(_x, {
 					selectedBlockId: r,
 					getSelectedBlock: a,
 					updateSelectedStyle: d,
@@ -19595,18 +19607,18 @@ function _x({ activeTab: e, setActiveTab: t, setBlocks: n, selectedBlockId: r, s
 }
 //#endregion
 //#region src/components/EditableBlock.tsx
-var vx = [
+var yx = [
 	"bold",
 	"italic",
 	"underline",
 	"strikethrough",
 	"width"
-], yx = ({ block: e, onUpdate: t, onSelect: n, onDrop: r }) => {
+], bx = ({ block: e, onUpdate: t, onSelect: n, onDrop: r }) => {
 	let o = a(null);
 	i(() => {
 		o.current && o.current.innerHTML !== e.content && document.activeElement !== o.current && (o.current.innerHTML = e.content || "<br/>");
 	}, [e.id, e.content]);
-	let s = e.style, { bold: l, italic: u, underline: d, strikethrough: f, width: p } = s, m = T({}, Pb(s, vx));
+	let s = e.style, { bold: l, italic: u, underline: d, strikethrough: f, width: p } = s, m = T({}, Pb(s, yx));
 	l && (m.fontWeight = "bold"), u && (m.fontStyle = "italic");
 	let h = [];
 	return d && h.push("underline"), f && h.push("line-through"), h.length > 0 && (m.textDecoration = h.join(" ")), /* @__PURE__ */ c("div", {
@@ -19621,7 +19633,7 @@ var vx = [
 		onDrop: r,
 		onDragOver: (e) => e.preventDefault()
 	});
-}, bx = ({ blockId: e, colIdx: t, placeholder: n, onUpdate: r, onDrop: o }) => {
+}, xx = ({ blockId: e, colIdx: t, placeholder: n, onUpdate: r, onDrop: o }) => {
 	let s = a(null);
 	return i(() => {
 		s.current && s.current.innerHTML !== n && document.activeElement !== s.current && (s.current.innerHTML = n);
@@ -19639,7 +19651,7 @@ var vx = [
 		onDragOver: (e) => e.preventDefault(),
 		className: "border border-slate-200 px-2.5 py-2.5 text-slate-500 bg-slate-50/20 font-sans outline-none focus:bg-slate-100/50 transition-colors"
 	});
-}, xx = (e) => {
+}, Sx = (e) => {
 	let t = [];
 	return e.forEach((e) => {
 		e.style.sameRow && t.length > 0 ? t[t.length - 1].blocks.push(e) : t.push({
@@ -19648,7 +19660,7 @@ var vx = [
 		});
 	}), t;
 };
-function Sx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r, setActiveTab: i, showMockData: a, placeholderMockData: o, dragOverIndex: s, setDragOverIndex: u, draggedSidebarItem: d, defaultStyles: f, zoom: p, panOffset: m, spacePressed: h, canvasHeight: g, viewportRef: _, canvasContainerRef: v, handleMouseDown: y, handleMouseMove: b, handleMouseUp: x, createTextBlock: S, duplicateBlock: C, reorderBlock: w, handleDeleteBlock: E, handleSidebarDrop: D, handleTableCellDrop: O, updateTableCell: k, handleTextDrop: A }) {
+function Cx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r, setActiveTab: i, showMockData: a, placeholderMockData: o, dragOverIndex: s, setDragOverIndex: u, draggedSidebarItem: d, defaultStyles: f, zoom: p, panOffset: m, spacePressed: h, canvasHeight: g, viewportRef: _, canvasContainerRef: v, handleMouseDown: y, handleMouseMove: b, handleMouseUp: x, createTextBlock: S, duplicateBlock: C, reorderBlock: w, handleDeleteBlock: E, handleSidebarDrop: D, handleTableCellDrop: O, updateTableCell: k, handleTextDrop: A }) {
 	let ee = (e, t) => {
 		e.dataTransfer.setData("blockIndex", t.toString()), e.dataTransfer.setData("source", "canvas"), e.dataTransfer.effectAllowed = "move";
 	}, j = (n, r) => {
@@ -19705,7 +19717,7 @@ function Sx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 							children: "Select elements from the sidebar tabs (Text, Tables, Images) and drag them here to assemble your template structure."
 						})
 					]
-				}) : xx(e).map((a) => {
+				}) : Sx(e).map((a) => {
 					var o;
 					let s = a.blocks.length > 1;
 					return /* @__PURE__ */ c("div", {
@@ -19730,7 +19742,7 @@ function Sx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 									e.stopPropagation(), r(a.id), i("styles");
 								},
 								style: {
-									width: s ? a.style.width || "48%" : (a.style.position, "100%"),
+									width: a.style.position === "absolute" ? "100%" : a.style.width || (s ? "48%" : "100%"),
 									height: a.style.position === "absolute" ? a.style.height || "100%" : void 0,
 									position: a.style.position,
 									top: a.style.top,
@@ -19804,7 +19816,7 @@ function Sx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 																		children: e.columnName
 																	}, t)) }) }), /* @__PURE__ */ c("tbody", { children: /* @__PURE__ */ c("tr", {
 																		className: "bg-slate-50/30",
-																		children: e.map((e, t) => /* @__PURE__ */ c(bx, {
+																		children: e.map((e, t) => /* @__PURE__ */ c(xx, {
 																			blockId: a.id,
 																			colIdx: t,
 																			placeholder: e.placeholder,
@@ -19816,7 +19828,7 @@ function Sx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 															})
 														}, n);
 													}
-													return /* @__PURE__ */ c(bx, {
+													return /* @__PURE__ */ c(xx, {
 														blockId: a.id,
 														colIdx: n,
 														placeholder: r,
@@ -19861,7 +19873,7 @@ function Sx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 											alt: "graphic content"
 										})
 									})
-								}) : /* @__PURE__ */ c(yx, {
+								}) : /* @__PURE__ */ c(bx, {
 									block: a,
 									onUpdate: (e) => {
 										t((t) => t.map((t) => t.id === a.id ? T(T({}, t), {}, { content: e }) : t));
@@ -19879,7 +19891,7 @@ function Sx({ blocks: e, setBlocks: t, selectedBlockId: n, setSelectedBlockId: r
 }
 //#endregion
 //#region src/components/CanvasToolbar.tsx
-function Cx({ showImportHtml: e = !0, showImportPdf: t = !0, showPreview: n = !0, showExport: r = !0, showExportPdf: i = !0, showClearCanvas: o, customButtonStyles: u, customButtonClassNames: d, customActionComponents: f, handleHtmlImport: p, handlePdfImport: m, setPreviewOpen: h, handleExport: g, handleExportPdf: _, handleClearCanvas: v, zoom: y, setZoom: b, setPanOffset: x }) {
+function wx({ showImportHtml: e = !0, showImportPdf: t = !0, showPreview: n = !0, showExport: r = !0, showExportPdf: i = !0, showClearCanvas: o, customButtonStyles: u, customButtonClassNames: d, customActionComponents: f, handleHtmlImport: p, handlePdfImport: m, setPreviewOpen: h, handleExport: g, handleExportPdf: _, handleClearCanvas: v, zoom: y, setZoom: b, setPanOffset: x }) {
 	let S = a(null), C = a(null);
 	return /* @__PURE__ */ l("div", {
 		className: "bg-white border-b border-gray-200 px-4 py-2 flex flex-wrap items-center justify-between shadow-xs sticky top-0 z-20 gap-2",
@@ -20000,7 +20012,7 @@ function Cx({ showImportHtml: e = !0, showImportPdf: t = !0, showPreview: n = !0
 }
 //#endregion
 //#region src/components/PreviewModal.tsx
-function wx({ previewOpen: e, setPreviewOpen: t, generateExportHtml: n }) {
+function Tx({ previewOpen: e, setPreviewOpen: t, generateExportHtml: n }) {
 	return e ? /* @__PURE__ */ c("div", {
 		className: "fixed inset-0 bg-slate-950/65 backdrop-blur-xs flex items-center justify-center z-50 p-6",
 		children: /* @__PURE__ */ l("div", {
@@ -20051,7 +20063,7 @@ function wx({ previewOpen: e, setPreviewOpen: t, generateExportHtml: n }) {
 }
 //#endregion
 //#region src/components/SelectionBubble.tsx
-function Tx({ bubbleCoords: e, applySelectionFormat: t }) {
+function Ex({ bubbleCoords: e, applySelectionFormat: t }) {
 	return e ? /* @__PURE__ */ l("div", {
 		className: "fixed bg-slate-900 border border-slate-800 text-white rounded-xl shadow-xl py-1 px-1.5 flex items-center space-x-1.5 z-50 select-none -translate-x-1/2",
 		style: {
@@ -20162,7 +20174,7 @@ function Tx({ bubbleCoords: e, applySelectionFormat: t }) {
 //#endregion
 //#region src/App.tsx
 Bu.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@6.1.200/build/pdf.worker.min.mjs";
-var Ex = (e) => {
+var Dx = (e) => {
 	let t = [];
 	return e.forEach((e) => {
 		e.style.sameRow && t.length > 0 ? t[t.length - 1].blocks.push(e) : t.push({
@@ -20170,8 +20182,8 @@ var Ex = (e) => {
 			blocks: [e]
 		});
 	}), t;
-}, Dx = (e) => e ? e.replace(/contenteditable="[^"]*"/g, "").replace(/class="[^"]*"/g, "").replace(/data-placeholder="[^"]*"/g, "").replace(/&nbsp;/g, " ").trim() : "";
-function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r, headerTitle: a = "HTML Template Builder", headerSubtitle: s = "Design and export templates dynamically", headerLogo: u, typographySizes: d, typographyWeights: f, typographyFonts: p, templatingLanguage: m = "csharp", loopSyntax: h = "foreach", onChange: g, onExport: _, onExportPdf: y, initialBlocks: b, defaultStyles: x, showImportHtml: S = !0, showImportPdf: C = !0, showClearCanvas: w = !0, showPreview: E = !0, showExport: D = !0, showExportPdf: O = !0, showHeader: A = !0, isTablesLoading: ee, tablesLoading: j, isPlaceholdersLoading: te, placeholdersLoading: ne, customButtonStyles: re, customButtonClassNames: ie, customActionComponents: M } = {}) {
+}, Ox = (e) => e ? e.replace(/contenteditable="[^"]*"/g, "").replace(/class="[^"]*"/g, "").replace(/data-placeholder="[^"]*"/g, "").replace(/&nbsp;/g, " ").trim() : "";
+function kx({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r, headerTitle: a = "HTML Template Builder", headerSubtitle: s = "Design and export templates dynamically", headerLogo: u, typographySizes: d, typographyWeights: f, typographyFonts: p, templatingLanguage: m = "csharp", loopSyntax: h = "foreach", onChange: g, onExport: _, onExportPdf: y, initialBlocks: b, defaultStyles: x, showImportHtml: S = !0, showImportPdf: C = !0, showClearCanvas: w = !0, showPreview: E = !0, showExport: D = !0, showExportPdf: O = !0, showHeader: A = !0, isTablesLoading: ee, tablesLoading: j, isPlaceholdersLoading: te, placeholdersLoading: ne, customButtonStyles: re, customButtonClassNames: ie, customActionComponents: M } = {}) {
 	let { zoom: ae, setZoom: oe, panOffset: se, setPanOffset: ce, spacePressed: le, canvasHeight: ue, viewportRef: de, canvasContainerRef: fe, handleMouseDown: pe, handleMouseMove: me, handleMouseUp: he } = Cb(), { customTableName: ge, setCustomTableName: _e, customLoopStart: ve, setCustomLoopStart: ye, customLoopEnd: be, setCustomLoopEnd: xe, newColName: Se, setNewColName: Ce, newColPlaceholder: we, setNewColPlaceholder: Te, bubbleCoords: N, setBubbleCoords: P, schemas: Ee, isParsing: De, setIsParsing: Oe, parseStatusText: ke, setParseStatusText: Ae, parseError: je, setParseError: Me, draggedSidebarItem: Ne, setDraggedSidebarItem: Pe, dragOverIndex: Fe, setDragOverIndex: Ie, newImgTypeName: Le, setNewImgTypeName: Re, customImageTypes: F, searchPlaceholder: I, setSearchPlaceholder: ze, handleAddCustomTable: Be, handleAddCustomImageType: Ve, toggleSchemaColumn: He, applySelectionFormat: Ue, setSavedRange: L } = wb({ tableSchemas: e }), { blocks: We, setBlocks: Ge, selectedBlockId: Ke, setSelectedBlockId: qe, getSelectedBlock: Je, createTextBlock: Ye, createTableBlock: Xe, createImageBlock: Ze, handleDeleteBlock: Qe, handleDuplicateBlock: R, handleMoveBlockUp: z, handleMoveBlockDown: $e, updateSelectedStyle: et, updateSelectedImageInfo: tt, handleRemoveTableColumn: nt, handleAddTableColumn: rt, handleUpdateTableColumn: it, handleReorderTableColumn: at, handleAddTableRow: ot, handleRemoveTableRow: st } = Sb({
 		initialBlocks: b,
 		defaultStyles: x,
@@ -20379,7 +20391,7 @@ function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 		};
 	}, St = (e = !1) => {
 		let t = "<!DOCTYPE html>\n<html>\n<head>\n  <meta charset=\"utf-8\">\n  <title>Exported HTML Template</title>\n  <style>\n    body { font-family: 'Outfit', 'Inter', sans-serif; padding: 30px; background-color: #f8fafc; color: #1e293b; max-width: 800px; margin: 0 auto; line-height: 1.5; }\n    .block-container {  box-sizing: border-box; page-break-inside: avoid; break-inside: avoid; }\n    table { width: 100%; border-collapse: collapse; margin: 10px 0; }\n    th { background-color: #f1f5f9; color: #334155; border: 1px solid #e2e8f0; padding: 6px 8px; font-weight: 600; text-align: left; }\n    td { border: 1px solid #e2e8f0; padding: 6px 8px; color: #475569; }\n    tr:nth-child(even) { background-color: #f8fafc; }\n    span[data-placeholder] { background-color: #f1f5f9; color: #1e293b; border: 1px solid #e2e8f0; padding: 1px 4px; border-radius: 3px; font-weight: 600; display: inline-flex; font-size: inherit; }\n    h1, h2, h3, h4, h5, h6, p { margin:5px; }\n  </style>\n</head>\n<body>\n";
-		return Ex(We).forEach((n) => {
+		return Dx(We).forEach((n) => {
 			let r = n.blocks.length > 1;
 			if (r) {
 				var i;
@@ -20406,7 +20418,7 @@ function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 							let e = t.columnName;
 							(n && Array.isArray(n[e]) ? n[e] : [{}]).forEach((e) => {
 								i += "          <tr>\n", r.forEach((t) => {
-									let n = Dx(t.placeholder);
+									let n = Ox(t.placeholder);
 									typeof e == "object" && e && Object.keys(e).forEach((t) => {
 										let r = RegExp(`\\{\\{(item\\.|package\\.)?${t}\\}\\}`, "g");
 										n = n.replace(r, e[t]);
@@ -20428,7 +20440,7 @@ function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 						return a.forEach((r) => {
 							if (r.loop && r.columns && r.columns.length > 0) n += `          <td>\n${s(r, t)}\n          </td>\n`;
 							else {
-								let i = Dx(r.placeholder);
+								let i = Ox(r.placeholder);
 								e && dt && (Object.keys(t).forEach((e) => {
 									i.includes(`{{${e}}}`) && (i = i.replace(RegExp(`\\{\\{${e}\\}\\}`, "g"), t[e])), i.includes(`{{item.${e}}}`) && (i = i.replace(RegExp(`\\{\\{item\\.${e}\\}\\}`, "g"), t[e])), i.includes(`{{package.${e}}}`) && (i = i.replace(RegExp(`\\{\\{package\\.${e}\\}\\}`, "g"), t[e]));
 								}), Object.keys(vt).forEach((e) => {
@@ -20465,7 +20477,7 @@ function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 						"h5",
 						"h6"
 					].includes(n.type) ? r = n.type : n.type === "title" ? r = "h1" : n.type === "subtitle" ? r = "h2" : n.type === "caption" && (r = "span");
-					let a = Dx(n.content);
+					let a = Ox(n.content);
 					e && dt && (Object.keys(vt).forEach((e) => {
 						let t = vt[e];
 						a = a.replace(RegExp(`\\{\\{${e}\\}\\}`, "g"), t);
@@ -20532,7 +20544,7 @@ function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 				className: "flex-1 flex flex-col lg:flex-row overflow-hidden",
 				children: [/* @__PURE__ */ l("main", {
 					className: "w-full lg:w-[70%] flex flex-col bg-slate-100 border-b lg:border-b-0 lg:border-r border-gray-200 overflow-hidden relative",
-					children: [/* @__PURE__ */ c(Cx, {
+					children: [/* @__PURE__ */ c(wx, {
 						showImportHtml: S,
 						showImportPdf: C,
 						showPreview: E,
@@ -20551,7 +20563,7 @@ function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 						zoom: ae,
 						setZoom: oe,
 						setPanOffset: ce
-					}), /* @__PURE__ */ c(Sx, {
+					}), /* @__PURE__ */ c(Cx, {
 						blocks: We,
 						setBlocks: Ge,
 						selectedBlockId: Ke,
@@ -20596,7 +20608,7 @@ function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 						updateTableCell: Ot,
 						handleTextDrop: Et
 					})]
-				}), /* @__PURE__ */ c(_x, {
+				}), /* @__PURE__ */ c(vx, {
 					activeTab: ct,
 					setActiveTab: lt,
 					setBlocks: Ge,
@@ -20651,11 +20663,11 @@ function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 					fontWeightsState: mt
 				})]
 			}),
-			/* @__PURE__ */ c(Tx, {
+			/* @__PURE__ */ c(Ex, {
 				bubbleCoords: N,
 				applySelectionFormat: Ue
 			}),
-			/* @__PURE__ */ c(wx, {
+			/* @__PURE__ */ c(Tx, {
 				previewOpen: B,
 				setPreviewOpen: ut,
 				generateExportHtml: St
@@ -20665,6 +20677,6 @@ function Ox({ tableSchemas: e, placeholders: t, defaultLogo: n, defaultBanner: r
 }
 //#endregion
 //#region src/index.ts
-var kx = Ox;
+var Ax = kx;
 //#endregion
-export { Ox as HtmlEditor, kx as default };
+export { kx as HtmlEditor, Ax as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-edit-to-html",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "author": "BEO Software (https://beo-software.in/)",
   "homepage": "https://beo-software.in/",
   "license": "SEE LICENSE IN LICENSE",