@erpsquad/common 1.8.75 → 1.8.77

package/dist/views/template-editor/company-selection-modal/company-selection-modal/index.js

@@ -1,10 +1,10 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),a=,/* empty css                                        */t=,/* empty css                                                  */i=,/* empty css                                          */n=,/* empty css                                          */o=;/* empty css                                                        */;/* empty css                                     */var r=,/* empty css                                                      */s=require("react-router-dom"),u=,/* empty css                                                                    */d=,/* empty css                                                                  */c=,/* empty css                                                                        */m=,/* empty css                                                              */p=,/* empty css                                                                        */x=;/* empty css                                                    */function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=/* @__PURE__ */j(l);exports.default=({isOpen:l,setIsOpen:j,modalProps:y,companies:f,email:g,templateRoutes:q})=>{const v=s.useNavigate(),[C,_]=h.default.useState(0),b=()=>{j(null)};/* @__PURE__ */
-return e.jsxs(a.default,{open:l,onClose:b,maxWidth:"xs",fullWidth:!0,...y,children:[
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),l=require("react"),o=,/* empty css                                        */t=,/* empty css                                                  */a=,/* empty css                                          */n=,/* empty css                                          */i=;/* empty css                                                        */;/* empty css                                     */var r=,/* empty css                                                      */s=require("react-router-dom"),u=,/* empty css                                                                    */d=,/* empty css                                                                  */c=,/* empty css                                                                        */m=,/* empty css                                                              */p=,/* empty css                                                                        */x=;/* empty css                                                    */function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=/* @__PURE__ */j(l);exports.default=({isOpen:l,setIsOpen:j,modalProps:y,companies:g,email:f,templateRoutes:q})=>{const v=s.useNavigate(),[C,S]=h.default.useState(0),_=()=>{j(null)};/* @__PURE__ */
+return e.jsxs(o.Modal,{open:l,onClose:_,maxWidth:"xs",fullWidth:!0,...y,children:[
 /* @__PURE__ */e.jsxs(u.default,{className:"companySelectionModal--DialogTitle",children:[
 /* @__PURE__ */e.jsx(t.Typography,{type:"s3",color:"inherit",weight:"medium",children:"Select Company"}),
-/* @__PURE__ */e.jsx(d.default,{onClick:b,children:/* @__PURE__ */e.jsx(o.default,{fontSize:"small"})})]}),
-/* @__PURE__ */e.jsx(c.default,{className:"companySelectionModal--DialogContents",children:/* @__PURE__ */e.jsx(n.default,{displayEmpty:!0,value:C,size:"small",renderValue:e=>{var l;return e?null==(l=f.find(l=>l.value===e))?void 0:l.label:"Select Company"},fullWidth:!0,sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:e=>{e.target.value&&_(e.target.value)},children:f.map(l=>/* @__PURE__ */e.jsx(m.default,{value:l.value,children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"theme.secondary.1000",children:l.label})},l.value))})}),
+/* @__PURE__ */e.jsx(d.default,{onClick:_,children:/* @__PURE__ */e.jsx(i.default,{fontSize:"small"})})]}),
+/* @__PURE__ */e.jsx(c.default,{className:"companySelectionModal--DialogContents",children:/* @__PURE__ */e.jsx(n.Select,{displayEmpty:!0,value:C,size:"small",renderValue:e=>{var l;return e?null==(l=g.find(l=>l.value===e))?void 0:l.label:"Select Company"},fullWidth:!0,sx:{bgcolor:"white",borderRadius:1,"& .MuiSelect-select":{py:.75}},onChange:e=>{e.target.value&&S(e.target.value)},children:g.map(l=>/* @__PURE__ */e.jsx(m.default,{value:l.value,children:/* @__PURE__ */e.jsx(t.Typography,{type:"s4",color:"theme.secondary.1000",children:l.label})},l.value))})}),
 /* @__PURE__ */e.jsx(p.default,{className:"companySelectionModal--DialogAction",children:/* @__PURE__ */e.jsxs(x.default,{display:"flex",gap:1.5,children:[
-/* @__PURE__ */e.jsx(i.default,{className:"companySelectionModal--DialogAction--WhiteBtn",onClick:b,children:"Cancel"}),
-/* @__PURE__ */e.jsx(i.default,{onClick:()=>{C?g?v(q.ADD_TEMPLATE(g._id),{state:{company_id:C}}):r.enqueueSnackbar("Something went wrong for a subject",{variant:"error"}):r.enqueueSnackbar("Please select a company",{variant:"error"})},disabled:!C,children:"Continue"})]})})]})};
+/* @__PURE__ */e.jsx(a.Button,{className:"companySelectionModal--DialogAction--WhiteBtn",onClick:_,children:"Cancel"}),
+/* @__PURE__ */e.jsx(a.Button,{onClick:()=>{C?f?v(q.ADD_TEMPLATE(f._id),{state:{company_id:C}}):r.enqueueSnackbar("Something went wrong for a subject",{variant:"error"}):r.enqueueSnackbar("Please select a company",{variant:"error"})},disabled:!C,children:"Continue"})]})})]})};
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/company-selection-modal/company-selection-modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/company-selection-modal/company-selection-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\n\nimport Modal from '../../../components/modal/modal';\nimport Typography from '../../../components/typography/typography';\nimport Button from '../../../components/button/button';\nimport Select from '../../../components/select/select';\n\nimport {\n\tBox,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tIconButton,\n\tMenuItem\n} from '@mui/material';\nimport Close from '@mui/icons-material/Close';\n\nimport './company-selection-modal.scss';\nimport { IEmail } from '../utils/types';\nimport { enqueueSnackbar } from 'notistack';\nimport { useNavigate } from 'react-router-dom';\n\ninterface CompanySelectionModalProps {\n\tisOpen: boolean;\n\tsetIsOpen: (value: IEmail | null) => void;\n\tmodalProps?: DialogProps;\n\temail: IEmail;\n\tcompanies: Record<string, any>[];\n\ttemplateRoutes: Record<string, any>\n}\n\nconst CompanySelectionModal: React.FC<CompanySelectionModalProps> = ({\n\tisOpen,\n\tsetIsOpen,\n\tmodalProps,\n\tcompanies,\n\temail,\n\ttemplateRoutes\n}) => {\n\n\tconst navigate = useNavigate();\n\tconst [selectedCompany, setSelectedCompany] = React.useState<number>(0);\n\n\tconst handleModalClose = () => {\n\t\tsetIsOpen(null);\n\t};\n\n\tconst handleContinue = () => {\n\t\tif(!selectedCompany) {\n\t\t\tenqueueSnackbar('Please select a company', { variant: 'error' });\n\t\t\treturn;\n\t\t} else if(!email) {\n\t\t\tenqueueSnackbar('Something went wrong for a subject', { variant: 'error' });\n\t\t\treturn;\n\t\t}\n\n\t\tnavigate(templateRoutes.ADD_TEMPLATE(email._id), { state: { company_id: selectedCompany }})\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\topen={isOpen}\n\t\t\tonClose={handleModalClose}\n\t\t\tmaxWidth='xs'\n\t\t\tfullWidth\n\t\t\t{...modalProps}>\n\t\t\t<DialogTitle className='companySelectionModal--DialogTitle'>\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\n\t\t\t\t\tSelect Company\n\t\t\t\t</Typography>\n\t\t\t\t<IconButton onClick={handleModalClose}>\n\t\t\t\t\t<Close fontSize='small' />\n\t\t\t\t</IconButton>\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent className='companySelectionModal--DialogContents'>\n\t\t\t\t<Select\n\t\t\t\t\tdisplayEmpty\n\t\t\t\t\tvalue={selectedCompany}\n\t\t\t\t\tsize='small'\n\t\t\t\t\trenderValue={(value) => value ? companies.find((option) => option.value === value)?.label : 'Select Company'}\n\t\t\t\t\tfullWidth\n\t\t\t\t\tsx={{\n\t\t\t\t\t\tbgcolor: 'white',\n\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tif (e.target.value) {\n\t\t\t\t\t\t\tsetSelectedCompany(e.target.value as number);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}>\n\t\t\t\t\t{companies.map((option) => (\n\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\n\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</Select>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions className='companySelectionModal--DialogAction'>\n\t\t\t\t<Box display='flex' gap={1.5}>\n\t\t\t\t\t<Button className='companySelectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\n\t\t\t\t\t<Button onClick={() => handleContinue()} disabled={!selectedCompany}>Continue</Button>\n\t\t\t\t</Box>\n\t\t\t</DialogActions>\n\t\t</Modal>\n\t);\n};\n\nexport default CompanySelectionModal;\n"],"names":["isOpen","setIsOpen","modalProps","companies","email","templateRoutes","navigate","useNavigate","selectedCompany","setSelectedCompany","React","useState","handleModalClose","jsxs","Modal","open","onClose","maxWidth","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","IconButton","onClick","Close","fontSize","DialogContent","Select","displayEmpty","value","size","renderValue","_a","find","option","label","sx","bgcolor","borderRadius","py","onChange","e","target","map","MenuItem","DialogActions","Box","display","gap","Button","ADD_TEMPLATE","_id","state","company_id","enqueueSnackbar","variant","disabled"],"mappings":"krCAkCoE,EACnEA,SACAC,YACAC,aACAC,YACAC,QACAC,qBAGA,MAAMC,EAAWC,EAAAA,eACVC,EAAiBC,GAAsBC,EAAAA,QAAMC,SAAiB,GAE/DC,EAAmB,KACxBX,EAAU;AAeX,OACCY,EAAAA,KAACC,EAAAA,QAAA,CACAC,KAAMf,EACNgB,QAASJ,EACTK,SAAS,KACTC,WAAS,KACLhB,EACJiB,SAAA;iBAAAN,KAACO,EAAAA,QAAA,CAAYC,UAAU,qCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDG,IAACK,EAAAA,SAAWC,QAAShB,EACpBO,8BAACU,UAAA,CAAMC,SAAS;eAGlBR,EAAAA,IAACS,EAAAA,QAAA,CAAcV,UAAU,wCACxBF,wBAAAG,EAAAA,IAACU,EAAAA,QAAA,CACAC,cAAY,EACZC,MAAO1B,EACP2B,KAAK,QACLC,YAAcF,UAAU,OAAAA,EAAQ,OAAAG,EAAAlC,EAAUmC,KAAMC,GAAWA,EAAOL,QAAUA,SAA5C,EAAAG,EAAoDG,MAAQ,kBAC5FtB,WAAS,EACTuB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOb,OACZzB,EAAmBqC,EAAEC,OAAOb,QAG7Bf,SAAAhB,EAAU6C,IAAKT,wBACdU,EAAAA,QAAA,CAA4Bf,MAAOK,EAAOL,MAC1Cf,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAAoB,EAAOC,SAD7CD,EAAOL;iBAMzBZ,IAAC4B,EAAAA,SAAc7B,UAAU,sCACxBF,+BAACgC,EAAAA,QAAA,CAAIC,QAAQ,OAAOC,IAAK,IACxBlC,SAAA;eAAAG,MAACgC,EAAAA,QAAA,CAAOjC,UAAU,gDAAgDO,QAAShB,EAAkBO,SAAA;eAC7FG,MAACgC,EAAAA,SAAO1B,QAAS,KArDhBpB,EAGOJ,EAKXE,EAASD,EAAekD,aAAanD,EAAMoD,KAAM,CAAEC,MAAO,CAAEC,WAAYlD,KAJvEmD,EAAAA,gBAAgB,qCAAsC,CAAEC,QAAS,UAHjED,EAAAA,gBAAgB,0BAA2B,CAAEC,QAAS,WAoDXC,UAAWrD,EAAiBW,SAAA"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/company-selection-modal/company-selection-modal.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\n\nimport Modal from '../../../components/modal/modal';\nimport Typography from '../../../components/typography/typography';\nimport Button from '../../../components/button/button';\nimport Select from '../../../components/select/select';\n\nimport {\n\tBox,\n\tDialogActions,\n\tDialogContent,\n\tDialogProps,\n\tDialogTitle,\n\tIconButton,\n\tMenuItem\n} from '@mui/material';\nimport Close from '@mui/icons-material/Close';\n\nimport './company-selection-modal.scss';\nimport { IEmail } from '../utils/types';\nimport { enqueueSnackbar } from 'notistack';\nimport { useNavigate } from 'react-router-dom';\n\ninterface CompanySelectionModalProps {\n\tisOpen: boolean;\n\tsetIsOpen: (value: IEmail | null) => void;\n\tmodalProps?: DialogProps;\n\temail: IEmail;\n\tcompanies: Record<string, any>[];\n\ttemplateRoutes: Record<string, any>\n}\n\nconst CompanySelectionModal: React.FC<CompanySelectionModalProps> = ({\n\tisOpen,\n\tsetIsOpen,\n\tmodalProps,\n\tcompanies,\n\temail,\n\ttemplateRoutes\n}) => {\n\n\tconst navigate = useNavigate();\n\tconst [selectedCompany, setSelectedCompany] = React.useState<number>(0);\n\n\tconst handleModalClose = () => {\n\t\tsetIsOpen(null);\n\t};\n\n\tconst handleContinue = () => {\n\t\tif(!selectedCompany) {\n\t\t\tenqueueSnackbar('Please select a company', { variant: 'error' });\n\t\t\treturn;\n\t\t} else if(!email) {\n\t\t\tenqueueSnackbar('Something went wrong for a subject', { variant: 'error' });\n\t\t\treturn;\n\t\t}\n\n\t\tnavigate(templateRoutes.ADD_TEMPLATE(email._id), { state: { company_id: selectedCompany }})\n\t}\n\n\treturn (\n\t\t<Modal\n\t\t\topen={isOpen}\n\t\t\tonClose={handleModalClose}\n\t\t\tmaxWidth='xs'\n\t\t\tfullWidth\n\t\t\t{...modalProps}>\n\t\t\t<DialogTitle className='companySelectionModal--DialogTitle'>\n\t\t\t\t<Typography type='s3' color='inherit' weight='medium'>\n\t\t\t\t\tSelect Company\n\t\t\t\t</Typography>\n\t\t\t\t<IconButton onClick={handleModalClose}>\n\t\t\t\t\t<Close fontSize='small' />\n\t\t\t\t</IconButton>\n\t\t\t</DialogTitle>\n\t\t\t<DialogContent className='companySelectionModal--DialogContents'>\n\t\t\t\t<Select\n\t\t\t\t\tdisplayEmpty\n\t\t\t\t\tvalue={selectedCompany}\n\t\t\t\t\tsize='small'\n\t\t\t\t\trenderValue={(value) => value ? companies.find((option) => option.value === value)?.label : 'Select Company'}\n\t\t\t\t\tfullWidth\n\t\t\t\t\tsx={{\n\t\t\t\t\t\tbgcolor: 'white',\n\t\t\t\t\t\tborderRadius: 1,\n\t\t\t\t\t\t'& .MuiSelect-select': { py: 0.75 }\n\t\t\t\t\t}}\n\t\t\t\t\tonChange={(e) => {\n\t\t\t\t\t\tif (e.target.value) {\n\t\t\t\t\t\t\tsetSelectedCompany(e.target.value as number);\n\t\t\t\t\t\t}\n\t\t\t\t\t}}>\n\t\t\t\t\t{companies.map((option) => (\n\t\t\t\t\t\t<MenuItem key={option.value} value={option.value}>\n\t\t\t\t\t\t\t<Typography type='s4' color='theme.secondary.1000'>{option.label}</Typography>\n\t\t\t\t\t\t</MenuItem>\n\t\t\t\t\t))}\n\t\t\t\t</Select>\n\t\t\t</DialogContent>\n\t\t\t<DialogActions className='companySelectionModal--DialogAction'>\n\t\t\t\t<Box display='flex' gap={1.5}>\n\t\t\t\t\t<Button className='companySelectionModal--DialogAction--WhiteBtn' onClick={handleModalClose}>Cancel</Button>\n\t\t\t\t\t<Button onClick={() => handleContinue()} disabled={!selectedCompany}>Continue</Button>\n\t\t\t\t</Box>\n\t\t\t</DialogActions>\n\t\t</Modal>\n\t);\n};\n\nexport default CompanySelectionModal;\n"],"names":["isOpen","setIsOpen","modalProps","companies","email","templateRoutes","navigate","useNavigate","selectedCompany","setSelectedCompany","React","useState","handleModalClose","jsxs","Modal","open","onClose","maxWidth","fullWidth","children","DialogTitle","className","jsx","Typography","type","color","weight","IconButton","onClick","Close","fontSize","DialogContent","Select","displayEmpty","value","size","renderValue","_a","find","option","label","sx","bgcolor","borderRadius","py","onChange","e","target","map","MenuItem","DialogActions","Box","display","gap","Button","ADD_TEMPLATE","_id","state","company_id","enqueueSnackbar","variant","disabled"],"mappings":"krCAkCoE,EACnEA,SACAC,YACAC,aACAC,YACAC,QACAC,qBAGA,MAAMC,EAAWC,EAAAA,eACVC,EAAiBC,GAAsBC,EAAAA,QAAMC,SAAiB,GAE/DC,EAAmB,KACxBX,EAAU;AAeX,OACCY,EAAAA,KAACC,EAAAA,MAAA,CACAC,KAAMf,EACNgB,QAASJ,EACTK,SAAS,KACTC,WAAS,KACLhB,EACJiB,SAAA;iBAAAN,KAACO,EAAAA,QAAA,CAAYC,UAAU,qCACtBF,SAAA;eAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,UAAUC,OAAO,SAASP,SAAA;iBAGtDG,IAACK,EAAAA,SAAWC,QAAShB,EACpBO,8BAACU,UAAA,CAAMC,SAAS;eAGlBR,EAAAA,IAACS,EAAAA,QAAA,CAAcV,UAAU,wCACxBF,wBAAAG,EAAAA,IAACU,EAAAA,OAAA,CACAC,cAAY,EACZC,MAAO1B,EACP2B,KAAK,QACLC,YAAcF,UAAU,OAAAA,EAAQ,OAAAG,EAAAlC,EAAUmC,KAAMC,GAAWA,EAAOL,QAAUA,SAA5C,EAAAG,EAAoDG,MAAQ,kBAC5FtB,WAAS,EACTuB,GAAI,CACHC,QAAS,QACTC,aAAc,EACd,sBAAuB,CAAEC,GAAI,MAE9BC,SAAWC,IACNA,EAAEC,OAAOb,OACZzB,EAAmBqC,EAAEC,OAAOb,QAG7Bf,SAAAhB,EAAU6C,IAAKT,wBACdU,EAAAA,QAAA,CAA4Bf,MAAOK,EAAOL,MAC1Cf,wBAAAG,EAAAA,IAACC,EAAAA,YAAWC,KAAK,KAAKC,MAAM,uBAAwBN,SAAAoB,EAAOC,SAD7CD,EAAOL;iBAMzBZ,IAAC4B,EAAAA,SAAc7B,UAAU,sCACxBF,+BAACgC,EAAAA,QAAA,CAAIC,QAAQ,OAAOC,IAAK,IACxBlC,SAAA;eAAAG,MAACgC,EAAAA,OAAA,CAAOjC,UAAU,gDAAgDO,QAAShB,EAAkBO,SAAA;eAC7FG,MAACgC,EAAAA,QAAO1B,QAAS,KArDhBpB,EAGOJ,EAKXE,EAASD,EAAekD,aAAanD,EAAMoD,KAAM,CAAEC,MAAO,CAAEC,WAAYlD,KAJvEmD,EAAAA,gBAAgB,qCAAsC,CAAEC,QAAS,UAHjED,EAAAA,gBAAgB,0BAA2B,CAAEC,QAAS,WAoDXC,UAAWrD,EAAiBW,SAAA"}

package/dist/views/template-editor/company-selection-modal/company-selection-modal.d.ts

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+import { DialogProps } from '@mui/material';
+import { IEmail } from '../utils/types';
+
+interface CompanySelectionModalProps {
+    isOpen: boolean;
+    setIsOpen: (value: IEmail | null) => void;
+    modalProps?: DialogProps;
+    email: IEmail;
+    companies: Record<string, any>[];
+    templateRoutes: Record<string, any>;
+}
+declare const CompanySelectionModal: React.FC<CompanySelectionModalProps>;
+export default CompanySelectionModal;

package/dist/views/template-editor/company-selection-modal/index.d.ts

@@ -0,0 +1,2 @@
+export { default as CompanySelectionModal } from './company-selection-modal';
+export * from './company-selection-modal';

package/dist/views/template-editor/components/EditorCanvas/index.esm.js

@@ -4,7 +4,7 @@ import { useDroppable } from "../../../../node_modules/@dnd-kit/core/dist/core.e
 import EditorSection from "../EditorSection/index.esm.js";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
 import SectionFormatPanel from "../SectionFormatPanel/index.esm.js";
-import EditorSidebar from "../EditorSidebar/index.esm.js";
+import { EditorSidebar } from "../EditorSidebar/index.esm.js";
 import { generateEmailPreview, generateHeaderFooterPreview } from "../../utils/common/index.esm.js";
 import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import Container from "../../../../node_modules/@mui/material/Container/Container/index.esm.js";

package/dist/views/template-editor/components/EditorCanvas/index.js

@@ -1,13 +1,13 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../../../node_modules/@dnd-kit/core/dist/core.esm/index.js"),n=require("../EditorSection/index.js"),r=require("../../../../components/typography/typography/index.js"),o=require("../SectionFormatPanel/index.js"),a=require("../EditorSidebar/index.js"),d=require("../../utils/common/index.js"),s=require("../../../../node_modules/@mui/material/Box/Box/index.js"),l=require("../../../../node_modules/@mui/material/Container/Container/index.js"),c=require("../../../../node_modules/@mui/material/Paper/Paper/index.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=/* @__PURE__ */u(t);const h="header",f="main",x="footer";exports.default=({sections:u,headerSections:y,footerSections:g,activeId:m,selectedSection:v,onSelectSection:b,onUpdateSection:j,onSplitSection:S,onDeleteSection:w,preview:T,placeholders:_,isEditingHeaderFooter:R,handleSave:M,relation_table:$})=>{const q=t.useMemo(()=>_.map(e=>({value:e.value||e.key||"",label:e.label||e.name||String(e.value||e.key||"")})),[_]),{setNodeRef:D}=i.useDroppable({id:"main-canvas"}),{setNodeRef:F}=i.useDroppable({id:"header-canvas"}),{setNodeRef:I}=i.useDroppable({id:"footer-canvas"}),k=t.useMemo(()=>[...u,...y,...g].find(e=>e.id===v),[u,v]),[C,H]=t.useState({id:null,type:"inside",canvasType:f}),[P,E]=t.useState(!1),[Y,X]=t.useState(!1),A=t.useRef(0),L=t.useRef({x:0,y:0}),U=t.useRef(null),W=t.useRef(null),B=t.useRef(null),N=t.useRef(null),O=e=>{switch(e){case h:return y;case x:return g;default:return u}};t.useEffect(()=>{U.current=m,m&&String(m).includes("sidebar-")?(E(!0),(null==u?void 0:u.length)>0?G(u[0].id,"before",f):(null==y?void 0:y.length)>0&&R?G(y[0].id,"before",h):(null==g?void 0:g.length)>0&&R?G(g[0].id,"before",x):G(null,"inside",f)):m||(E(!1),H({id:null,type:"inside",canvasType:f}))},[m,u,y,g,R]);const G=(e,t,i)=>{const n=Date.now();n-A.current<200||C.id===e&&C.type===t&&C.canvasType===i||(A.current=n,H({id:e,type:t,canvasType:i}))},z=(t,i)=>{const o=[],a=/* @__PURE__ */new Set;let d=0;const l=(t,i=!1)=>/* @__PURE__ */e.jsx(s.default,{sx:{[i?"width":"height"]:"50px",border:"2px dashed",borderColor:"primary.main",borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",bgcolor:"rgba(25, 118, 210, 0.04)",[i?"mx":"mb"]:2,opacity:0,animation:"fadeIn 0.3s ease-in-out forwards","@keyframes fadeIn":{"0%":{opacity:0,transform:i?"translateX(-10px)":"translateY(-10px)"},"100%":{opacity:1,transform:"translate(0)"}}},children:/* @__PURE__ */e.jsx(r.Typography,{type:"s2",color:"primary",weight:"medium",children:"Drop here"})},t);for(P&&(null==t?void 0:t.length)>0&&"before"===C.type&&C.id===t[0].id&&C.canvasType===i&&o.push(l(`drop-before-first-${i}`));d<(null==t?void 0:t.length);){const r=t[d],c=r.id;if(C.id!==c||"before"!==C.type||C.canvasType!==i||P&&0===d||o.push(l(`drop-before-${c}-${i}`)),r.isSplitPair){const c=r.splitGroupId;if(c&&a.has(c)){d++;continue}const u=t.filter(e=>e.splitGroupId===c);if(u.length>0){c&&a.add(c);const t=/* @__PURE__ */e.jsx(s.default,{sx:{display:"flex",gap:2,mb:2,bgcolor:"rgba(0, 0, 0, 0.02)",p:1,borderRadius:1},"data-section-id":`split-group-${c}`,"data-canvas-type":i,children:u.map((t,r)=>/* @__PURE__ */e.jsxs(p.default.Fragment,{children:[C.id===t.id&&"left"===C.type&&C.canvasType===i&&l(`drop-left-${t.id}-${i}`,!0),
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("../../../../node_modules/@dnd-kit/core/dist/core.esm/index.js"),n=require("../EditorSection/index.js"),r=require("../../../../components/typography/typography/index.js"),o=require("../SectionFormatPanel/index.js"),a=require("../EditorSidebar/index.js"),d=require("../../utils/common/index.js"),s=require("../../../../node_modules/@mui/material/Box/Box/index.js"),l=require("../../../../node_modules/@mui/material/Container/Container/index.js"),c=require("../../../../node_modules/@mui/material/Paper/Paper/index.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=/* @__PURE__ */u(t);const h="header",f="main",x="footer";exports.default=({sections:u,headerSections:y,footerSections:g,activeId:m,selectedSection:v,onSelectSection:b,onUpdateSection:j,onSplitSection:S,onDeleteSection:w,preview:T,placeholders:_,isEditingHeaderFooter:R,handleSave:M,relation_table:$})=>{const q=t.useMemo(()=>_.map(e=>({value:e.value||e.key||"",label:e.label||e.name||String(e.value||e.key||"")})),[_]),{setNodeRef:D}=i.useDroppable({id:"main-canvas"}),{setNodeRef:F}=i.useDroppable({id:"header-canvas"}),{setNodeRef:I}=i.useDroppable({id:"footer-canvas"}),k=t.useMemo(()=>[...u,...y,...g].find(e=>e.id===v),[u,v]),[C,E]=t.useState({id:null,type:"inside",canvasType:f}),[H,P]=t.useState(!1),[Y,X]=t.useState(!1),A=t.useRef(0),L=t.useRef({x:0,y:0}),U=t.useRef(null),W=t.useRef(null),B=t.useRef(null),N=t.useRef(null),O=e=>{switch(e){case h:return y;case x:return g;default:return u}};t.useEffect(()=>{U.current=m,m&&String(m).includes("sidebar-")?(P(!0),(null==u?void 0:u.length)>0?G(u[0].id,"before",f):(null==y?void 0:y.length)>0&&R?G(y[0].id,"before",h):(null==g?void 0:g.length)>0&&R?G(g[0].id,"before",x):G(null,"inside",f)):m||(P(!1),E({id:null,type:"inside",canvasType:f}))},[m,u,y,g,R]);const G=(e,t,i)=>{const n=Date.now();n-A.current<200||C.id===e&&C.type===t&&C.canvasType===i||(A.current=n,E({id:e,type:t,canvasType:i}))},z=(t,i)=>{const o=[],a=/* @__PURE__ */new Set;let d=0;const l=(t,i=!1)=>/* @__PURE__ */e.jsx(s.default,{sx:{[i?"width":"height"]:"50px",border:"2px dashed",borderColor:"primary.main",borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",bgcolor:"rgba(25, 118, 210, 0.04)",[i?"mx":"mb"]:2,opacity:0,animation:"fadeIn 0.3s ease-in-out forwards","@keyframes fadeIn":{"0%":{opacity:0,transform:i?"translateX(-10px)":"translateY(-10px)"},"100%":{opacity:1,transform:"translate(0)"}}},children:/* @__PURE__ */e.jsx(r.Typography,{type:"s2",color:"primary",weight:"medium",children:"Drop here"})},t);for(H&&(null==t?void 0:t.length)>0&&"before"===C.type&&C.id===t[0].id&&C.canvasType===i&&o.push(l(`drop-before-first-${i}`));d<(null==t?void 0:t.length);){const r=t[d],c=r.id;if(C.id!==c||"before"!==C.type||C.canvasType!==i||H&&0===d||o.push(l(`drop-before-${c}-${i}`)),r.isSplitPair){const c=r.splitGroupId;if(c&&a.has(c)){d++;continue}const u=t.filter(e=>e.splitGroupId===c);if(u.length>0){c&&a.add(c);const t=/* @__PURE__ */e.jsx(s.default,{sx:{display:"flex",gap:2,mb:2,bgcolor:"rgba(0, 0, 0, 0.02)",p:1,borderRadius:1},"data-section-id":`split-group-${c}`,"data-canvas-type":i,children:u.map((t,r)=>/* @__PURE__ */e.jsxs(p.default.Fragment,{children:[C.id===t.id&&"left"===C.type&&C.canvasType===i&&l(`drop-left-${t.id}-${i}`,!0),
 /* @__PURE__ */e.jsx(s.default,{sx:{width:t.splitWidth?`${t.splitWidth}%`:100/u.length+"%",transition:"width 0.3s ease-in-out"},"data-section-id":t.id,"data-canvas-type":i,children:/* @__PURE__ */e.jsx(n.default,{section:t,isSelected:v===t.id,isDragging:m===t.id,isOver:C.id===t.id&&"inside"===C.type&&C.canvasType===i,onSelect:()=>b(t.id),onUpdate:(e,n)=>{j(t.id,{content:e,...n},i),b(null)},onSplit:(e,n)=>S(t.id,e,n,i),onDelete:()=>w(t.id,i),placeholders:q,setIsSectionEditing:X})}),C.id===t.id&&"right"===C.type&&C.canvasType===i&&l(`drop-right-${t.id}-${i}`,!0)]},t.id))},`split-row-${c}`);o.push(t),d+=u.length}else d++}else o.push(
-/* @__PURE__ */e.jsx(s.default,{"data-section-id":r.id,"data-canvas-type":i,children:/* @__PURE__ */e.jsx(n.default,{section:r,isSelected:v===r.id,isDragging:m===r.id,isOver:C.id===r.id&&"inside"===C.type&&C.canvasType===i,onSelect:()=>b(r.id),onUpdate:(e,t)=>{j(r.id,{content:e,...t},i),b(null)},onSplit:(e,t)=>S(r.id,e,t,i),onDelete:()=>w(r.id,i),placeholders:q,setIsSectionEditing:X})},r.id)),d++;C.id===c&&"after"===C.type&&C.canvasType===i&&o.push(l(`drop-after-${c}-${i}`))}return(0===(null==t?void 0:t.length)&&m&&C.canvasType===i||0===(null==t?void 0:t.length)&&P&&C.canvasType===i)&&o.push(l(`drop-empty-canvas-${i}`)),o},J=t.useMemo(()=>z(u,f),[u,C,m,P,v]),K=t.useMemo(()=>z(y,h),[y,C,m,P,v,R]),Q=t.useMemo(()=>z(g,x),[g,C,m,P,v,R]),V=(t,i,n,o,a,l=!0)=>{var u;return l?/* @__PURE__ */e.jsxs(s.default,{sx:{mb:3},children:[f===i&&l&&y.length>0&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(s.default,{"data-section-id":r.id,"data-canvas-type":i,children:/* @__PURE__ */e.jsx(n.default,{section:r,isSelected:v===r.id,isDragging:m===r.id,isOver:C.id===r.id&&"inside"===C.type&&C.canvasType===i,onSelect:()=>b(r.id),onUpdate:(e,t)=>{j(r.id,{content:e,...t},i),b(null)},onSplit:(e,t)=>S(r.id,e,t,i),onDelete:()=>w(r.id,i),placeholders:q,setIsSectionEditing:X})},r.id)),d++;C.id===c&&"after"===C.type&&C.canvasType===i&&o.push(l(`drop-after-${c}-${i}`))}return(0===(null==t?void 0:t.length)&&m&&C.canvasType===i||0===(null==t?void 0:t.length)&&H&&C.canvasType===i)&&o.push(l(`drop-empty-canvas-${i}`)),o},J=t.useMemo(()=>z(u,f),[u,C,m,H,v]),K=t.useMemo(()=>z(y,h),[y,C,m,H,v,R]),Q=t.useMemo(()=>z(g,x),[g,C,m,H,v,R]),V=(t,i,n,o,a,l=!0)=>{var u;return l?/* @__PURE__ */e.jsxs(s.default,{sx:{mb:3},children:[f===i&&l&&y.length>0&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
 /* @__PURE__ */e.jsx(r.Typography,{type:"h4",weight:"bold",color:"theme.secondary.800",children:"Header"}),
 /* @__PURE__ */e.jsx(c.default,{sx:{mb:1,boxShadow:"none",opacity:.5},dangerouslySetInnerHTML:{__html:d.generateHeaderFooterPreview(y)}})]}),
 /* @__PURE__ */e.jsx(r.Typography,{type:"h4",weight:"bold",color:"theme.secondary.800",sx:{mb:1},children:t}),
-/* @__PURE__ */e.jsx(c.default,{ref:e=>{o(e),a.current=e},elevation:0,sx:{p:4,border:"1px dashed",borderColor:P&&C.canvasType===i?"primary.main":"primary.light",borderRadius:1,bgcolor:"background.paper",position:"relative",minHeight:"Header"===t||"Footer"===t?"100px":"200px",transition:"border-color 0.3s ease, background-color 0.3s ease","&:hover":{bgcolor:P&&C.canvasType===i?"rgba(25, 118, 210, 0.04)":"background.paper"},pointerEvents:i!==h&&i!==x||R?"auto":"none",opacity:i!==h&&i!==x||R?1:.5},onClick:()=>{(i!==h&&i!==x||R)&&b(null)},onMouseMove:e=>((e,t)=>{if(!U.current)return;if(t!==f&&!R)return;const i=e.clientX-L.current.x,n=e.clientY-L.current.y;if(Math.sqrt(i*i+n*n)<15)return;L.current={x:e.clientX,y:e.clientY};const r=document.elementsFromPoint(e.clientX,e.clientY).find(e=>e.hasAttribute("data-section-id")),o=O(t);if(!r)return void(0===o.length?G(null,"inside",t):P&&G(o[o.length-1].id,"after",t));const a=r.getAttribute("data-section-id");if(!a)return;const d=r.hasAttribute("data-canvas-type")?r.getAttribute("data-canvas-type"):t,s=r.getBoundingClientRect(),l=e.clientY-s.top,c=e.clientX-s.left,u=s.height,p=s.width,h=O(d).find(e=>e.id===a);if(a.startsWith("split-group-")||h&&h.isSplitPair)G(a,c<.4*p?"left":c>.6*p?"right":"inside",d);else{let e=C.type;e=l<.19999999999999998*u?"before":l>.7999999999999999*u?"after":"inside",G(a,e,d)}})(e,i),onMouseEnter:e=>((e,t)=>{if(!U.current||!P)return;if(t!==f&&!R)return;const i=O(t);i.length>0?G(i[0].id,"before",t):G(null,"inside",t),L.current={x:e.clientX,y:e.clientY}})(e,i),children:/* @__PURE__ */e.jsxs(s.default,{sx:{display:"flex",flexDirection:"column",gap:2},children:[n,0===(null==(u=O(i))?void 0:u.length)&&!m&&!P&&/* @__PURE__ */e.jsx(s.default,{sx:{borderRadius:1,p:2,textAlign:"center",color:"text.secondary"},children:/* @__PURE__ */e.jsxs(r.Typography,{type:"s2",color:"theme.secondary.600",weight:"medium",children:["Drag Sections from side panel to start building the ",t.toLowerCase()]})})]})}),f===i&&l&&g.length>0&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(c.default,{ref:e=>{o(e),a.current=e},elevation:0,sx:{p:4,border:"1px dashed",borderColor:H&&C.canvasType===i?"primary.main":"primary.light",borderRadius:1,bgcolor:"background.paper",position:"relative",minHeight:"Header"===t||"Footer"===t?"100px":"200px",transition:"border-color 0.3s ease, background-color 0.3s ease","&:hover":{bgcolor:H&&C.canvasType===i?"rgba(25, 118, 210, 0.04)":"background.paper"},pointerEvents:i!==h&&i!==x||R?"auto":"none",opacity:i!==h&&i!==x||R?1:.5},onClick:()=>{(i!==h&&i!==x||R)&&b(null)},onMouseMove:e=>((e,t)=>{if(!U.current)return;if(t!==f&&!R)return;const i=e.clientX-L.current.x,n=e.clientY-L.current.y;if(Math.sqrt(i*i+n*n)<15)return;L.current={x:e.clientX,y:e.clientY};const r=document.elementsFromPoint(e.clientX,e.clientY).find(e=>e.hasAttribute("data-section-id")),o=O(t);if(!r)return void(0===o.length?G(null,"inside",t):H&&G(o[o.length-1].id,"after",t));const a=r.getAttribute("data-section-id");if(!a)return;const d=r.hasAttribute("data-canvas-type")?r.getAttribute("data-canvas-type"):t,s=r.getBoundingClientRect(),l=e.clientY-s.top,c=e.clientX-s.left,u=s.height,p=s.width,h=O(d).find(e=>e.id===a);if(a.startsWith("split-group-")||h&&h.isSplitPair)G(a,c<.4*p?"left":c>.6*p?"right":"inside",d);else{let e=C.type;e=l<.19999999999999998*u?"before":l>.7999999999999999*u?"after":"inside",G(a,e,d)}})(e,i),onMouseEnter:e=>((e,t)=>{if(!U.current||!H)return;if(t!==f&&!R)return;const i=O(t);i.length>0?G(i[0].id,"before",t):G(null,"inside",t),L.current={x:e.clientX,y:e.clientY}})(e,i),children:/* @__PURE__ */e.jsxs(s.default,{sx:{display:"flex",flexDirection:"column",gap:2},children:[n,0===(null==(u=O(i))?void 0:u.length)&&!m&&!H&&/* @__PURE__ */e.jsx(s.default,{sx:{borderRadius:1,p:2,textAlign:"center",color:"text.secondary"},children:/* @__PURE__ */e.jsxs(r.Typography,{type:"s2",color:"theme.secondary.600",weight:"medium",children:["Drag Sections from side panel to start building the ",t.toLowerCase()]})})]})}),f===i&&l&&g.length>0&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
 /* @__PURE__ */e.jsx(r.Typography,{type:"h4",weight:"bold",color:"theme.secondary.800",sx:{mt:1},children:"Footer"}),
 /* @__PURE__ */e.jsx(c.default,{sx:{mb:1,boxShadow:"none",opacity:.5},dangerouslySetInnerHTML:{__html:d.generateHeaderFooterPreview(g)}})]})]}):null};/* @__PURE__ */
 return e.jsxs(s.default,{sx:{display:"flex",flex:1,overflow:"hidden"},children:[
 /* @__PURE__ */e.jsx(s.default,{sx:{flex:1,overflow:"auto",height:"calc(100vh - 104px)"},children:/* @__PURE__ */e.jsx(l.default,{maxWidth:"lg",sx:{py:4},children:T?/* @__PURE__ */e.jsx(s.default,{dangerouslySetInnerHTML:{__html:d.generateEmailPreview(u,y,g)}}):/* @__PURE__ */e.jsxs(e.Fragment,{children:[V("Header",h,K,F,B,R),V("Content",f,J,D,W,!R),V("Footer",x,Q,I,N,R)]})})}),
-/* @__PURE__ */e.jsx(s.default,{sx:{width:400,flexShrink:0,position:"sticky",top:0,alignSelf:"flex-start",height:"calc(100vh - 104px)",overflowY:"auto",borderLeft:"1px solid",borderColor:"divider",bgcolor:"background.paper",zIndex:1},children:!v||(null==k?void 0:k.is_edited_from_source)||Y?/* @__PURE__ */e.jsx(a.default,{}):/* @__PURE__ */e.jsx(o.default,{section:k,onClose:()=>b(null),onUpdate:e=>{if(v){const t=y.some(e=>e.id===v)?h:g.some(e=>e.id===v)?x:f;j(v,e,t)}},placeholders:_,handleSave:M,relation_table:$})})]})};
+/* @__PURE__ */e.jsx(s.default,{sx:{width:400,flexShrink:0,position:"sticky",top:0,alignSelf:"flex-start",height:"calc(100vh - 104px)",overflowY:"auto",borderLeft:"1px solid",borderColor:"divider",bgcolor:"background.paper",zIndex:1},children:!v||(null==k?void 0:k.is_edited_from_source)||Y?/* @__PURE__ */e.jsx(a.EditorSidebar,{}):/* @__PURE__ */e.jsx(o.default,{section:k,onClose:()=>b(null),onUpdate:e=>{if(v){const t=y.some(e=>e.id===v)?h:g.some(e=>e.id===v)?x:f;j(v,e,t)}},placeholders:_,handleSave:M,relation_table:$})})]})};
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/components/EditorCanvas/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorCanvas.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useState, useEffect, useRef, useMemo } from 'react';\nimport { useDroppable } from '@dnd-kit/core';\nimport EditorSection from './EditorSection';\nimport { Box, Container, Paper } from '@mui/material';\nimport Typography from '../../../components/typography/typography';\nimport SectionFormatPanel from './SectionFormatPanel';\nimport EditorSidebar from './EditorSidebar';\nimport { generateEmailPreview, generateHeaderFooterPreview } from '../utils/common';\nimport { EnhancedSectionData } from '../types/editor';\n\nconst CANVAS_TYPES = {\n  HEADER: 'header',\n  MAIN: 'main',\n  FOOTER: 'footer'\n};\n\ninterface DropPosition {\n  id: string | null;\n  type: 'before' | 'after' | 'inside' | 'left' | 'right';\n  canvasType: string;\n}\n\ninterface EditorCanvasProps {\n  sections: EnhancedSectionData[];\n  headerSections: EnhancedSectionData[];\n  footerSections: EnhancedSectionData[];\n  activeId: string | null;\n  overSection: string | null;\n  selectedSection: string | null;\n  onSelectSection: (id: string | null) => void;\n  onUpdateSection: (id: string, data: any, canvasType?: string) => void;\n  onSplitSection: (id: string, content1: string, content2: string, canvasType?: string) => void;\n  onDeleteSection: (id: string, canvasType?: string) => void;\n  preview: boolean;\n  placeholders: Record<string, any>[];\n  isEditingHeaderFooter: boolean;\n  relation_table:any[];\n  handleSave?: () => Promise<void>;\n}\n\nconst EditorCanvas: React.FC<EditorCanvasProps> = ({\n  sections,\n  headerSections,\n  footerSections,\n  activeId,\n  selectedSection,\n  onSelectSection,\n  onUpdateSection,\n  onSplitSection,\n  onDeleteSection,\n  preview,\n  placeholders,\n  isEditingHeaderFooter,\n  handleSave,\n  relation_table\n}) => {\n  // Convert placeholders to the expected format\n  const formattedPlaceholders = useMemo(() => {\n    return placeholders.map((p: Record<string, any>) => ({\n      value: p.value || p.key || '',\n      label: p.label || p.name || String(p.value || p.key || '')\n    }));\n  }, [placeholders]);\n\n  const { setNodeRef: setMainCanvasRef } = useDroppable({ id: 'main-canvas' });\n  const { setNodeRef: setHeaderCanvasRef } = useDroppable({ id: 'header-canvas' });\n  const { setNodeRef: setFooterCanvasRef } = useDroppable({ id: 'footer-canvas' });\n\n  const selectedSectionData = useMemo(() => {\n    return [...sections, ...headerSections, ...footerSections].find((section) => section.id === selectedSection);\n  }, [sections, selectedSection]);\n\n  const [dropTarget, setDropTarget] = useState<DropPosition>({ \n    id: null, \n    type: 'inside',\n    canvasType: CANVAS_TYPES.MAIN\n  });\n  const [isDraggingFromSidebar, setIsDraggingFromSidebar] = useState(false);\n  const [isSectionEditing, setIsSectionEditing] = useState(false);\n  \n  const lastUpdateTimeRef = useRef(0);\n  const lastPositionRef = useRef({ x: 0, y: 0 });\n  const activeIdRef = useRef<string | null>(null);\n  const mainCanvasRef = useRef<HTMLDivElement | null>(null);\n  const headerCanvasRef = useRef<HTMLDivElement | null>(null);\n  const footerCanvasRef = useRef<HTMLDivElement | null>(null);\n  \n  const DEBOUNCE_MS = 200;\n  const MIN_MOUSE_MOVE = 15;\n  const POSITION_HYSTERESIS = 0.1;\n\n  const getTargetSections = (canvasType: string) => {\n    switch (canvasType) {\n      case CANVAS_TYPES.HEADER:\n        return headerSections;\n      case CANVAS_TYPES.FOOTER:\n        return footerSections;\n      default:\n        return sections;\n    }\n  };\n\n  useEffect(() => {\n    activeIdRef.current = activeId;\n    \n    if (activeId && String(activeId).includes('sidebar-')) {\n      setIsDraggingFromSidebar(true);\n      \n      if (sections?.length > 0) {\n        updateDropTarget(sections[0].id, 'before', CANVAS_TYPES.MAIN);\n      } else if (headerSections?.length > 0 && isEditingHeaderFooter) {\n        updateDropTarget(headerSections[0].id, 'before', CANVAS_TYPES.HEADER);\n      } else if (footerSections?.length > 0 && isEditingHeaderFooter) {\n        updateDropTarget(footerSections[0].id, 'before', CANVAS_TYPES.FOOTER);\n      } else {\n        updateDropTarget(null, 'inside', CANVAS_TYPES.MAIN);\n      }\n    } else if (!activeId) {\n      setIsDraggingFromSidebar(false);\n      setDropTarget({ id: null, type: 'inside', canvasType: CANVAS_TYPES.MAIN });\n    }\n  }, [activeId, sections, headerSections, footerSections, isEditingHeaderFooter]);\n\n  const updateDropTarget = (id: string | null, type: DropPosition['type'], canvasType: string) => {\n    const now = Date.now();\n    if (now - lastUpdateTimeRef.current < DEBOUNCE_MS) return;\n    \n    if (dropTarget.id !== id || dropTarget.type !== type || dropTarget.canvasType !== canvasType) {\n      lastUpdateTimeRef.current = now;\n      setDropTarget({ id, type, canvasType });\n    }\n  };\n\n  const handleMouseMove = (e: React.MouseEvent, canvasType: string) => {\n    if (!activeIdRef.current) return;\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\n    \n    const dx = e.clientX - lastPositionRef.current.x;\n    const dy = e.clientY - lastPositionRef.current.y;\n    const distance = Math.sqrt(dx * dx + dy * dy);\n    \n    if (distance < MIN_MOUSE_MOVE) return;\n    \n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\n    \n    const elementsUnderCursor = document.elementsFromPoint(e.clientX, e.clientY);\n    const sectionElement = elementsUnderCursor.find(el => \n      el.hasAttribute('data-section-id')\n    );\n    \n    const targetSections = getTargetSections(canvasType);\n    \n    if (!sectionElement) {\n      if (targetSections.length === 0) {\n        updateDropTarget(null, 'inside', canvasType);\n      } else if (isDraggingFromSidebar) {\n        updateDropTarget(targetSections[targetSections.length - 1].id, 'after', canvasType);\n      }\n      return;\n    }\n    \n    const sectionId = sectionElement.getAttribute('data-section-id');\n    if (!sectionId) return;\n    \n    const sectionCanvasType = sectionElement.hasAttribute('data-canvas-type') \n      ? sectionElement.getAttribute('data-canvas-type') as string\n      : canvasType;\n    \n    const rect = sectionElement.getBoundingClientRect();\n    const relativeY = e.clientY - rect.top;\n    const relativeX = e.clientX - rect.left;\n    const sectionHeight = rect.height;\n    const sectionWidth = rect.width;\n    \n    const canvasSections = getTargetSections(sectionCanvasType);\n    const section = canvasSections.find(s => s.id === sectionId);\n    \n    const isSplitGroup = sectionId.startsWith('split-group-');\n    \n    if (isSplitGroup || (section && section.isSplitPair)) {\n      if (relativeX < sectionWidth * (0.5 - POSITION_HYSTERESIS)) {\n        updateDropTarget(sectionId, 'left', sectionCanvasType);\n      } else if (relativeX > sectionWidth * (0.5 + POSITION_HYSTERESIS)) {\n        updateDropTarget(sectionId, 'right', sectionCanvasType);\n      } else {\n        updateDropTarget(sectionId, 'inside', sectionCanvasType);\n      }\n    } else {\n      let position: DropPosition['type'] = dropTarget.type;\n      if (relativeY < sectionHeight * (0.3 - POSITION_HYSTERESIS)) {\n        position = 'before';\n      } else if (relativeY > sectionHeight * (0.7 + POSITION_HYSTERESIS)) {\n        position = 'after';\n      } else {\n        position = 'inside';\n      }\n      updateDropTarget(sectionId, position, sectionCanvasType);\n    }\n  };\n\n  const handleMouseEnter = (e: React.MouseEvent, canvasType: string) => {\n    if (!activeIdRef.current || !isDraggingFromSidebar) return;\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\n    \n    const targetSections = getTargetSections(canvasType);\n    \n    if (targetSections.length > 0) {\n      updateDropTarget(targetSections[0].id, 'before', canvasType);\n    } else {\n      updateDropTarget(null, 'inside', canvasType);\n    }\n    \n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\n  };\n\n  const renderSectionsForCanvas = (canvasSections: EnhancedSectionData[], canvasType: string) => {\n    const result: React.ReactNode[] = [];\n    const processedGroups = new Set<string>();\n    let i = 0;\n    \n    const renderDropIndicator = (key: string, isHorizontal = false) => (\n      <Box\n        key={key}\n        sx={{\n          [isHorizontal ? 'width' : 'height']: '50px',\n          border: '2px dashed',\n          borderColor: 'primary.main',\n          borderRadius: 1,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          bgcolor: 'rgba(25, 118, 210, 0.04)',\n          [isHorizontal ? 'mx' : 'mb']: 2,\n          opacity: 0,\n          animation: 'fadeIn 0.3s ease-in-out forwards',\n          '@keyframes fadeIn': {\n            '0%': { opacity: 0, transform: isHorizontal ? 'translateX(-10px)' : 'translateY(-10px)' },\n            '100%': { opacity: 1, transform: 'translate(0)' },\n          },\n        }}\n      >\n        <Typography type='s2' color='primary' weight='medium'>\n          Drop here\n        </Typography>\n      </Box>\n    );\n\n    if (isDraggingFromSidebar && \n        canvasSections?.length > 0 && \n        dropTarget.type === 'before' && \n        dropTarget.id === canvasSections[0].id &&\n        dropTarget.canvasType === canvasType) {\n      result.push(renderDropIndicator(`drop-before-first-${canvasType}`));\n    }\n    \n    while (i < canvasSections?.length) {\n      const section = canvasSections[i];\n      const sectionId = section.id;\n      \n      if (dropTarget.id === sectionId && \n          dropTarget.type === 'before' && \n          dropTarget.canvasType === canvasType && \n          !(isDraggingFromSidebar && i === 0)) {\n        result.push(renderDropIndicator(`drop-before-${sectionId}-${canvasType}`));\n      }\n      \n      if (!section.isSplitPair) {\n        result.push(\n          <Box \n            key={section.id} \n            data-section-id={section.id} \n            data-canvas-type={canvasType}\n          >\n            <EditorSection\n              section={section}\n              isSelected={selectedSection === section.id}\n              isDragging={activeId === section.id}\n              isOver={dropTarget.id === section.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\n              onSelect={() => onSelectSection(section.id)}\n              onUpdate={(content, extra) => {\n                onUpdateSection(section.id, { content, ...extra }, canvasType); \n                onSelectSection(null);\n              }}\n              onSplit={(content1, content2) => onSplitSection(section.id, content1, content2, canvasType)}\n              onDelete={() => onDeleteSection(section.id, canvasType)}\n              placeholders={formattedPlaceholders}\n              setIsSectionEditing={setIsSectionEditing}\n            />\n          </Box>\n        );\n        i++;\n      } else {\n        const splitGroupId = section.splitGroupId;\n        if (splitGroupId && processedGroups.has(splitGroupId)) {\n          i++;\n          continue;\n        }\n        \n        const splitSections = canvasSections.filter(s => s.splitGroupId === splitGroupId);\n        if (splitSections.length > 0) {\n          if (splitGroupId) processedGroups.add(splitGroupId);\n          \n          const splitRow = (\n            <Box \n              key={`split-row-${splitGroupId}`} \n              sx={{ \n                display: 'flex', \n                gap: 2, \n                mb: 2, \n                bgcolor: 'rgba(0, 0, 0, 0.02)', \n                p: 1, \n                borderRadius: 1 \n              }} \n              data-section-id={`split-group-${splitGroupId}`}\n              data-canvas-type={canvasType}\n            >\n              {splitSections.map((splitSection, index) => (\n                <React.Fragment key={splitSection.id}>\n                  {dropTarget.id === splitSection.id && \n                   dropTarget.type === 'left' && \n                   dropTarget.canvasType === canvasType && (\n                    renderDropIndicator(`drop-left-${splitSection.id}-${canvasType}`, true)\n                  )}\n                  <Box\n                    sx={{\n                      width: splitSection.splitWidth ? `${splitSection.splitWidth}%` : `${100 / splitSections.length}%`,\n                      transition: 'width 0.3s ease-in-out',\n                    }}\n                    data-section-id={splitSection.id}\n                    data-canvas-type={canvasType}\n                  >\n                    <EditorSection\n                      section={splitSection}\n                      isSelected={selectedSection === splitSection.id}\n                      isDragging={activeId === splitSection.id}\n                      isOver={dropTarget.id === splitSection.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\n                      onSelect={() => onSelectSection(splitSection.id)}\n                      onUpdate={(content, extra) => {\n                        onUpdateSection(splitSection.id, { content, ...extra }, canvasType); \n                        onSelectSection(null);\n                      }}\n                      onSplit={(content1, content2) => onSplitSection(splitSection.id, content1, content2, canvasType)}\n                      onDelete={() => onDeleteSection(splitSection.id, canvasType)}\n                      placeholders={formattedPlaceholders}\n                      setIsSectionEditing={setIsSectionEditing}\n                    />\n                  </Box>\n                  {dropTarget.id === splitSection.id && \n                   dropTarget.type === 'right' && \n                   dropTarget.canvasType === canvasType && (\n                    renderDropIndicator(`drop-right-${splitSection.id}-${canvasType}`, true)\n                  )}\n                </React.Fragment>\n              ))}\n            </Box>\n          );\n          result.push(splitRow);\n          i += splitSections.length;\n        } else {\n          i++;\n        }\n      }\n      \n      if (dropTarget.id === sectionId && \n          dropTarget.type === 'after' && \n          dropTarget.canvasType === canvasType) {\n        result.push(renderDropIndicator(`drop-after-${sectionId}-${canvasType}`));\n      }\n    }\n    \n    if ((canvasSections?.length === 0 && activeId && dropTarget.canvasType === canvasType) || \n        (canvasSections?.length === 0 && isDraggingFromSidebar && dropTarget.canvasType === canvasType)) {\n      result.push(renderDropIndicator(`drop-empty-canvas-${canvasType}`));\n    }\n    \n    return result;\n  };\n\n  const renderedMainSections = useMemo(() => \n    renderSectionsForCanvas(sections, CANVAS_TYPES.MAIN), \n    [sections, dropTarget, activeId, isDraggingFromSidebar, selectedSection]\n  );\n  \n  const renderedHeaderSections = useMemo(() => \n    renderSectionsForCanvas(headerSections, CANVAS_TYPES.HEADER),\n    [headerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\n  );\n  \n  const renderedFooterSections = useMemo(() => \n    renderSectionsForCanvas(footerSections, CANVAS_TYPES.FOOTER),\n    [footerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\n  );\n\n  const renderPreview = () => {\n    // const allSections = [...headerSections, ...sections, ...footerSections];\n    return <Box dangerouslySetInnerHTML={{ __html: generateEmailPreview(sections, headerSections, footerSections) }} />;\n  };\n\n  const renderCanvas = (\n    title: string, \n    canvasType: string, \n    renderedSections: React.ReactNode[], \n    setCanvasRef: (node: HTMLElement | null) => void,\n    ref: React.MutableRefObject<HTMLDivElement | null>,\n    visible: boolean = true\n  ) => {\n    if (!visible) return null;\n    \n    return (\n      <Box sx={{ mb: 3 }}>\n        {CANVAS_TYPES.MAIN === canvasType && visible && headerSections.length > 0 && (\n          <>\n            {/* <Accordion\n              sx= {{\n                    boxShadow: 'none !important',\n                    \".MuiAccordionSummary-root\": {\n                      backgroundColor: '#fafafa !important',\n                      border: `0 !important`,\n                      p: 0,\n                      pb: 1,\n                      // mb: 1,\n                      m:0,\n                      minHeight: 'unset'\n                    }\n                }}\n            >\n              <AccordionSummary\n                expandIcon={<ExpandMoreIcon />}\n                aria-controls=\"panel1-content\"\n                id=\"panel1-header\"\n              > */}\n                <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'}>Header</Typography>\n              {/* </AccordionSummary> */}\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(headerSections) }} />\n            {/* </Accordion> */}\n          </>\n        )}\n        <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mb: 1 }}>{title}</Typography>\n        <Paper\n          ref={(node) => {\n            setCanvasRef(node);\n            ref.current = node;\n          }}\n          elevation={0}\n          sx={{\n            p: 4,\n            border: '1px dashed',\n            borderColor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \n              ? 'primary.main' \n              : 'primary.light',\n            borderRadius: 1,\n            bgcolor: 'background.paper',\n            position: 'relative',\n            minHeight: title === 'Header' || title === 'Footer' ? '100px' : '200px',\n            transition: 'border-color 0.3s ease, background-color 0.3s ease',\n            '&:hover': {\n              bgcolor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \n                ? 'rgba(25, 118, 210, 0.04)' \n                : 'background.paper',\n            },\n            pointerEvents: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \n              ? 'none' \n              : 'auto',\n            opacity: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \n              ? 0.5 \n              : 1,\n          }}\n          onClick={() => {\n            if ((canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter) return;\n            onSelectSection(null);\n          }}\n          onMouseMove={(e) => handleMouseMove(e, canvasType)}\n          onMouseEnter={(e) => handleMouseEnter(e, canvasType)}\n        >\n          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n            {renderedSections}\n            {getTargetSections(canvasType)?.length === 0 && \n             !activeId && \n             !isDraggingFromSidebar && (\n              <Box sx={{ borderRadius: 1, p: 2, textAlign: 'center', color: 'text.secondary' }}>\n                <Typography type='s2' color='theme.secondary.600' weight='medium'>\n                  Drag Sections from side panel to start building the {title.toLowerCase()}\n                </Typography>\n              </Box>\n            )}\n          </Box>\n        </Paper>\n        {CANVAS_TYPES.MAIN === canvasType && visible && footerSections.length > 0 && (\n          <>\n            {/* <Accordion\n            sx= {{\n                  boxShadow: 'none !important',\n                  \".MuiAccordionSummary-root\": {\n                    backgroundColor: '#fafafa !important',\n                    border: `0 !important`,\n                    p: 0,\n                    pb: 1,\n                    // mb: 1,\n                    m:0,\n                    minHeight: 'unset'\n                  }\n              }}\n          >\n            <AccordionSummary\n              expandIcon={<ExpandMoreIcon />}\n              aria-controls=\"panel1-content\"\n              id=\"panel1-header\"\n            > */}\n              <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mt: 1 }}>Footer</Typography>\n            {/* </AccordionSummary> */}\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(footerSections) }} />\n            {/* </Accordion> */}\n          </>\n          )}\n      </Box>\n    );\n  };\n\n  return (\n    <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\n      <Box sx={{ flex: 1, overflow: 'auto', height: 'calc(100vh - 104px)' }}>\n        <Container maxWidth=\"lg\" sx={{ py: 4 }}>\n          {preview ? (\n            renderPreview()\n          ) : (\n            <>\n              {renderCanvas(\n                'Header', \n                CANVAS_TYPES.HEADER, \n                renderedHeaderSections, \n                setHeaderCanvasRef, \n                headerCanvasRef,\n                isEditingHeaderFooter\n              )}\n              {renderCanvas(\n                'Content', \n                CANVAS_TYPES.MAIN, \n                renderedMainSections, \n                setMainCanvasRef, \n                mainCanvasRef,\n                !isEditingHeaderFooter\n              )}\n              {renderCanvas(\n                'Footer', \n                CANVAS_TYPES.FOOTER, \n                renderedFooterSections, \n                setFooterCanvasRef, \n                footerCanvasRef,\n                isEditingHeaderFooter\n              )}\n            </>\n          )}\n        </Container>\n      </Box>\n      <Box\n        sx={{\n          width: 400,\n          flexShrink: 0,\n          position: 'sticky',\n          top: 0,\n          alignSelf: 'flex-start',\n          height: 'calc(100vh - 104px)',\n          overflowY: 'auto',\n          borderLeft: '1px solid',\n          borderColor: 'divider',\n          bgcolor: 'background.paper',\n          zIndex: 1,\n        }}\n      >\n        {(selectedSection && !selectedSectionData?.is_edited_from_source && !isSectionEditing) ? (\n          <SectionFormatPanel\n            section={selectedSectionData}\n            onClose={() => onSelectSection(null)}\n            onUpdate={(data) => {\n              if (selectedSection) {\n                const canvasType = headerSections.some(s => s.id === selectedSection)\n                  ? CANVAS_TYPES.HEADER\n                  : footerSections.some(s => s.id === selectedSection)\n                    ? CANVAS_TYPES.FOOTER\n                    : CANVAS_TYPES.MAIN;\n                onUpdateSection(selectedSection, data, canvasType);\n              }\n            }}\n            placeholders={placeholders}\n            handleSave={handleSave}\n            relation_table={relation_table}\n          />\n        ) : (\n          <EditorSidebar />\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nexport default EditorCanvas;"],"names":["CANVAS_TYPES","sections","headerSections","footerSections","activeId","selectedSection","onSelectSection","onUpdateSection","onSplitSection","onDeleteSection","preview","placeholders","isEditingHeaderFooter","handleSave","relation_table","formattedPlaceholders","useMemo","map","p","value","key","label","name","String","setNodeRef","setMainCanvasRef","useDroppable","id","setHeaderCanvasRef","setFooterCanvasRef","selectedSectionData","find","section","dropTarget","setDropTarget","useState","type","canvasType","isDraggingFromSidebar","setIsDraggingFromSidebar","isSectionEditing","setIsSectionEditing","lastUpdateTimeRef","useRef","lastPositionRef","x","y","activeIdRef","mainCanvasRef","headerCanvasRef","footerCanvasRef","getTargetSections","useEffect","current","includes","length","updateDropTarget","now","Date","renderSectionsForCanvas","canvasSections","result","processedGroups","Set","i","renderDropIndicator","isHorizontal","jsx","Box","sx","border","borderColor","borderRadius","display","alignItems","justifyContent","bgcolor","opacity","animation","transform","children","Typography","color","weight","push","sectionId","isSplitPair","splitGroupId","has","splitSections","filter","s","add","splitRow","gap","mb","splitSection","index","jsxs","React","Fragment","width","splitWidth","transition","EditorSection","isSelected","isDragging","isOver","onSelect","onUpdate","content","extra","onSplit","content1","content2","onDelete","renderedMainSections","renderedHeaderSections","renderedFooterSections","renderCanvas","title","renderedSections","setCanvasRef","ref","visible","Paper","boxShadow","dangerouslySetInnerHTML","__html","generateHeaderFooterPreview","node","elevation","position","minHeight","pointerEvents","onClick","onMouseMove","e","dx","clientX","dy","clientY","Math","sqrt","sectionElement","document","elementsFromPoint","el","hasAttribute","targetSections","getAttribute","sectionCanvasType","rect","getBoundingClientRect","relativeY","top","relativeX","left","sectionHeight","height","sectionWidth","startsWith","handleMouseMove","onMouseEnter","handleMouseEnter","flexDirection","_a","textAlign","toLowerCase","mt","flex","overflow","Container","maxWidth","py","generateEmailPreview","flexShrink","alignSelf","overflowY","borderLeft","zIndex","is_edited_from_source","EditorSidebar","SectionFormatPanel","onClose","data","some"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorCanvas.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unused-vars */\n/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React, { useState, useEffect, useRef, useMemo } from 'react';\nimport { useDroppable } from '@dnd-kit/core';\nimport EditorSection from './EditorSection';\nimport { Box, Container, Paper } from '@mui/material';\nimport Typography from '../../../components/typography/typography';\nimport SectionFormatPanel from './SectionFormatPanel';\nimport EditorSidebar from './EditorSidebar';\nimport { generateEmailPreview, generateHeaderFooterPreview } from '../utils/common';\nimport { EnhancedSectionData } from '../types/editor';\n\nconst CANVAS_TYPES = {\n  HEADER: 'header',\n  MAIN: 'main',\n  FOOTER: 'footer'\n};\n\ninterface DropPosition {\n  id: string | null;\n  type: 'before' | 'after' | 'inside' | 'left' | 'right';\n  canvasType: string;\n}\n\ninterface EditorCanvasProps {\n  sections: EnhancedSectionData[];\n  headerSections: EnhancedSectionData[];\n  footerSections: EnhancedSectionData[];\n  activeId: string | null;\n  overSection: string | null;\n  selectedSection: string | null;\n  onSelectSection: (id: string | null) => void;\n  onUpdateSection: (id: string, data: any, canvasType?: string) => void;\n  onSplitSection: (id: string, content1: string, content2: string, canvasType?: string) => void;\n  onDeleteSection: (id: string, canvasType?: string) => void;\n  preview: boolean;\n  placeholders: Record<string, any>[];\n  isEditingHeaderFooter: boolean;\n  relation_table:any[];\n  handleSave?: () => Promise<void>;\n}\n\nconst EditorCanvas: React.FC<EditorCanvasProps> = ({\n  sections,\n  headerSections,\n  footerSections,\n  activeId,\n  selectedSection,\n  onSelectSection,\n  onUpdateSection,\n  onSplitSection,\n  onDeleteSection,\n  preview,\n  placeholders,\n  isEditingHeaderFooter,\n  handleSave,\n  relation_table\n}) => {\n  // Convert placeholders to the expected format\n  const formattedPlaceholders = useMemo(() => {\n    return placeholders.map((p: Record<string, any>) => ({\n      value: p.value || p.key || '',\n      label: p.label || p.name || String(p.value || p.key || '')\n    }));\n  }, [placeholders]);\n\n  const { setNodeRef: setMainCanvasRef } = useDroppable({ id: 'main-canvas' });\n  const { setNodeRef: setHeaderCanvasRef } = useDroppable({ id: 'header-canvas' });\n  const { setNodeRef: setFooterCanvasRef } = useDroppable({ id: 'footer-canvas' });\n\n  const selectedSectionData = useMemo(() => {\n    return [...sections, ...headerSections, ...footerSections].find((section) => section.id === selectedSection);\n  }, [sections, selectedSection]);\n\n  const [dropTarget, setDropTarget] = useState<DropPosition>({ \n    id: null, \n    type: 'inside',\n    canvasType: CANVAS_TYPES.MAIN\n  });\n  const [isDraggingFromSidebar, setIsDraggingFromSidebar] = useState(false);\n  const [isSectionEditing, setIsSectionEditing] = useState(false);\n  \n  const lastUpdateTimeRef = useRef(0);\n  const lastPositionRef = useRef({ x: 0, y: 0 });\n  const activeIdRef = useRef<string | null>(null);\n  const mainCanvasRef = useRef<HTMLDivElement | null>(null);\n  const headerCanvasRef = useRef<HTMLDivElement | null>(null);\n  const footerCanvasRef = useRef<HTMLDivElement | null>(null);\n  \n  const DEBOUNCE_MS = 200;\n  const MIN_MOUSE_MOVE = 15;\n  const POSITION_HYSTERESIS = 0.1;\n\n  const getTargetSections = (canvasType: string) => {\n    switch (canvasType) {\n      case CANVAS_TYPES.HEADER:\n        return headerSections;\n      case CANVAS_TYPES.FOOTER:\n        return footerSections;\n      default:\n        return sections;\n    }\n  };\n\n  useEffect(() => {\n    activeIdRef.current = activeId;\n    \n    if (activeId && String(activeId).includes('sidebar-')) {\n      setIsDraggingFromSidebar(true);\n      \n      if (sections?.length > 0) {\n        updateDropTarget(sections[0].id, 'before', CANVAS_TYPES.MAIN);\n      } else if (headerSections?.length > 0 && isEditingHeaderFooter) {\n        updateDropTarget(headerSections[0].id, 'before', CANVAS_TYPES.HEADER);\n      } else if (footerSections?.length > 0 && isEditingHeaderFooter) {\n        updateDropTarget(footerSections[0].id, 'before', CANVAS_TYPES.FOOTER);\n      } else {\n        updateDropTarget(null, 'inside', CANVAS_TYPES.MAIN);\n      }\n    } else if (!activeId) {\n      setIsDraggingFromSidebar(false);\n      setDropTarget({ id: null, type: 'inside', canvasType: CANVAS_TYPES.MAIN });\n    }\n  }, [activeId, sections, headerSections, footerSections, isEditingHeaderFooter]);\n\n  const updateDropTarget = (id: string | null, type: DropPosition['type'], canvasType: string) => {\n    const now = Date.now();\n    if (now - lastUpdateTimeRef.current < DEBOUNCE_MS) return;\n    \n    if (dropTarget.id !== id || dropTarget.type !== type || dropTarget.canvasType !== canvasType) {\n      lastUpdateTimeRef.current = now;\n      setDropTarget({ id, type, canvasType });\n    }\n  };\n\n  const handleMouseMove = (e: React.MouseEvent, canvasType: string) => {\n    if (!activeIdRef.current) return;\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\n    \n    const dx = e.clientX - lastPositionRef.current.x;\n    const dy = e.clientY - lastPositionRef.current.y;\n    const distance = Math.sqrt(dx * dx + dy * dy);\n    \n    if (distance < MIN_MOUSE_MOVE) return;\n    \n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\n    \n    const elementsUnderCursor = document.elementsFromPoint(e.clientX, e.clientY);\n    const sectionElement = elementsUnderCursor.find(el => \n      el.hasAttribute('data-section-id')\n    );\n    \n    const targetSections = getTargetSections(canvasType);\n    \n    if (!sectionElement) {\n      if (targetSections.length === 0) {\n        updateDropTarget(null, 'inside', canvasType);\n      } else if (isDraggingFromSidebar) {\n        updateDropTarget(targetSections[targetSections.length - 1].id, 'after', canvasType);\n      }\n      return;\n    }\n    \n    const sectionId = sectionElement.getAttribute('data-section-id');\n    if (!sectionId) return;\n    \n    const sectionCanvasType = sectionElement.hasAttribute('data-canvas-type') \n      ? sectionElement.getAttribute('data-canvas-type') as string\n      : canvasType;\n    \n    const rect = sectionElement.getBoundingClientRect();\n    const relativeY = e.clientY - rect.top;\n    const relativeX = e.clientX - rect.left;\n    const sectionHeight = rect.height;\n    const sectionWidth = rect.width;\n    \n    const canvasSections = getTargetSections(sectionCanvasType);\n    const section = canvasSections.find(s => s.id === sectionId);\n    \n    const isSplitGroup = sectionId.startsWith('split-group-');\n    \n    if (isSplitGroup || (section && section.isSplitPair)) {\n      if (relativeX < sectionWidth * (0.5 - POSITION_HYSTERESIS)) {\n        updateDropTarget(sectionId, 'left', sectionCanvasType);\n      } else if (relativeX > sectionWidth * (0.5 + POSITION_HYSTERESIS)) {\n        updateDropTarget(sectionId, 'right', sectionCanvasType);\n      } else {\n        updateDropTarget(sectionId, 'inside', sectionCanvasType);\n      }\n    } else {\n      let position: DropPosition['type'] = dropTarget.type;\n      if (relativeY < sectionHeight * (0.3 - POSITION_HYSTERESIS)) {\n        position = 'before';\n      } else if (relativeY > sectionHeight * (0.7 + POSITION_HYSTERESIS)) {\n        position = 'after';\n      } else {\n        position = 'inside';\n      }\n      updateDropTarget(sectionId, position, sectionCanvasType);\n    }\n  };\n\n  const handleMouseEnter = (e: React.MouseEvent, canvasType: string) => {\n    if (!activeIdRef.current || !isDraggingFromSidebar) return;\n    if (canvasType !== CANVAS_TYPES.MAIN && !isEditingHeaderFooter) return;\n    \n    const targetSections = getTargetSections(canvasType);\n    \n    if (targetSections.length > 0) {\n      updateDropTarget(targetSections[0].id, 'before', canvasType);\n    } else {\n      updateDropTarget(null, 'inside', canvasType);\n    }\n    \n    lastPositionRef.current = { x: e.clientX, y: e.clientY };\n  };\n\n  const renderSectionsForCanvas = (canvasSections: EnhancedSectionData[], canvasType: string) => {\n    const result: React.ReactNode[] = [];\n    const processedGroups = new Set<string>();\n    let i = 0;\n    \n    const renderDropIndicator = (key: string, isHorizontal = false) => (\n      <Box\n        key={key}\n        sx={{\n          [isHorizontal ? 'width' : 'height']: '50px',\n          border: '2px dashed',\n          borderColor: 'primary.main',\n          borderRadius: 1,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          bgcolor: 'rgba(25, 118, 210, 0.04)',\n          [isHorizontal ? 'mx' : 'mb']: 2,\n          opacity: 0,\n          animation: 'fadeIn 0.3s ease-in-out forwards',\n          '@keyframes fadeIn': {\n            '0%': { opacity: 0, transform: isHorizontal ? 'translateX(-10px)' : 'translateY(-10px)' },\n            '100%': { opacity: 1, transform: 'translate(0)' },\n          },\n        }}\n      >\n        <Typography type='s2' color='primary' weight='medium'>\n          Drop here\n        </Typography>\n      </Box>\n    );\n\n    if (isDraggingFromSidebar && \n        canvasSections?.length > 0 && \n        dropTarget.type === 'before' && \n        dropTarget.id === canvasSections[0].id &&\n        dropTarget.canvasType === canvasType) {\n      result.push(renderDropIndicator(`drop-before-first-${canvasType}`));\n    }\n    \n    while (i < canvasSections?.length) {\n      const section = canvasSections[i];\n      const sectionId = section.id;\n      \n      if (dropTarget.id === sectionId && \n          dropTarget.type === 'before' && \n          dropTarget.canvasType === canvasType && \n          !(isDraggingFromSidebar && i === 0)) {\n        result.push(renderDropIndicator(`drop-before-${sectionId}-${canvasType}`));\n      }\n      \n      if (!section.isSplitPair) {\n        result.push(\n          <Box \n            key={section.id} \n            data-section-id={section.id} \n            data-canvas-type={canvasType}\n          >\n            <EditorSection\n              section={section}\n              isSelected={selectedSection === section.id}\n              isDragging={activeId === section.id}\n              isOver={dropTarget.id === section.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\n              onSelect={() => onSelectSection(section.id)}\n              onUpdate={(content, extra) => {\n                onUpdateSection(section.id, { content, ...extra }, canvasType); \n                onSelectSection(null);\n              }}\n              onSplit={(content1, content2) => onSplitSection(section.id, content1, content2, canvasType)}\n              onDelete={() => onDeleteSection(section.id, canvasType)}\n              placeholders={formattedPlaceholders}\n              setIsSectionEditing={setIsSectionEditing}\n            />\n          </Box>\n        );\n        i++;\n      } else {\n        const splitGroupId = section.splitGroupId;\n        if (splitGroupId && processedGroups.has(splitGroupId)) {\n          i++;\n          continue;\n        }\n        \n        const splitSections = canvasSections.filter(s => s.splitGroupId === splitGroupId);\n        if (splitSections.length > 0) {\n          if (splitGroupId) processedGroups.add(splitGroupId);\n          \n          const splitRow = (\n            <Box \n              key={`split-row-${splitGroupId}`} \n              sx={{ \n                display: 'flex', \n                gap: 2, \n                mb: 2, \n                bgcolor: 'rgba(0, 0, 0, 0.02)', \n                p: 1, \n                borderRadius: 1 \n              }} \n              data-section-id={`split-group-${splitGroupId}`}\n              data-canvas-type={canvasType}\n            >\n              {splitSections.map((splitSection, index) => (\n                <React.Fragment key={splitSection.id}>\n                  {dropTarget.id === splitSection.id && \n                   dropTarget.type === 'left' && \n                   dropTarget.canvasType === canvasType && (\n                    renderDropIndicator(`drop-left-${splitSection.id}-${canvasType}`, true)\n                  )}\n                  <Box\n                    sx={{\n                      width: splitSection.splitWidth ? `${splitSection.splitWidth}%` : `${100 / splitSections.length}%`,\n                      transition: 'width 0.3s ease-in-out',\n                    }}\n                    data-section-id={splitSection.id}\n                    data-canvas-type={canvasType}\n                  >\n                    <EditorSection\n                      section={splitSection}\n                      isSelected={selectedSection === splitSection.id}\n                      isDragging={activeId === splitSection.id}\n                      isOver={dropTarget.id === splitSection.id && dropTarget.type === 'inside' && dropTarget.canvasType === canvasType}\n                      onSelect={() => onSelectSection(splitSection.id)}\n                      onUpdate={(content, extra) => {\n                        onUpdateSection(splitSection.id, { content, ...extra }, canvasType); \n                        onSelectSection(null);\n                      }}\n                      onSplit={(content1, content2) => onSplitSection(splitSection.id, content1, content2, canvasType)}\n                      onDelete={() => onDeleteSection(splitSection.id, canvasType)}\n                      placeholders={formattedPlaceholders}\n                      setIsSectionEditing={setIsSectionEditing}\n                    />\n                  </Box>\n                  {dropTarget.id === splitSection.id && \n                   dropTarget.type === 'right' && \n                   dropTarget.canvasType === canvasType && (\n                    renderDropIndicator(`drop-right-${splitSection.id}-${canvasType}`, true)\n                  )}\n                </React.Fragment>\n              ))}\n            </Box>\n          );\n          result.push(splitRow);\n          i += splitSections.length;\n        } else {\n          i++;\n        }\n      }\n      \n      if (dropTarget.id === sectionId && \n          dropTarget.type === 'after' && \n          dropTarget.canvasType === canvasType) {\n        result.push(renderDropIndicator(`drop-after-${sectionId}-${canvasType}`));\n      }\n    }\n    \n    if ((canvasSections?.length === 0 && activeId && dropTarget.canvasType === canvasType) || \n        (canvasSections?.length === 0 && isDraggingFromSidebar && dropTarget.canvasType === canvasType)) {\n      result.push(renderDropIndicator(`drop-empty-canvas-${canvasType}`));\n    }\n    \n    return result;\n  };\n\n  const renderedMainSections = useMemo(() => \n    renderSectionsForCanvas(sections, CANVAS_TYPES.MAIN), \n    [sections, dropTarget, activeId, isDraggingFromSidebar, selectedSection]\n  );\n  \n  const renderedHeaderSections = useMemo(() => \n    renderSectionsForCanvas(headerSections, CANVAS_TYPES.HEADER),\n    [headerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\n  );\n  \n  const renderedFooterSections = useMemo(() => \n    renderSectionsForCanvas(footerSections, CANVAS_TYPES.FOOTER),\n    [footerSections, dropTarget, activeId, isDraggingFromSidebar, selectedSection, isEditingHeaderFooter]\n  );\n\n  const renderPreview = () => {\n    // const allSections = [...headerSections, ...sections, ...footerSections];\n    return <Box dangerouslySetInnerHTML={{ __html: generateEmailPreview(sections, headerSections, footerSections) }} />;\n  };\n\n  const renderCanvas = (\n    title: string, \n    canvasType: string, \n    renderedSections: React.ReactNode[], \n    setCanvasRef: (node: HTMLElement | null) => void,\n    ref: React.MutableRefObject<HTMLDivElement | null>,\n    visible: boolean = true\n  ) => {\n    if (!visible) return null;\n    \n    return (\n      <Box sx={{ mb: 3 }}>\n        {CANVAS_TYPES.MAIN === canvasType && visible && headerSections.length > 0 && (\n          <>\n            {/* <Accordion\n              sx= {{\n                    boxShadow: 'none !important',\n                    \".MuiAccordionSummary-root\": {\n                      backgroundColor: '#fafafa !important',\n                      border: `0 !important`,\n                      p: 0,\n                      pb: 1,\n                      // mb: 1,\n                      m:0,\n                      minHeight: 'unset'\n                    }\n                }}\n            >\n              <AccordionSummary\n                expandIcon={<ExpandMoreIcon />}\n                aria-controls=\"panel1-content\"\n                id=\"panel1-header\"\n              > */}\n                <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'}>Header</Typography>\n              {/* </AccordionSummary> */}\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(headerSections) }} />\n            {/* </Accordion> */}\n          </>\n        )}\n        <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mb: 1 }}>{title}</Typography>\n        <Paper\n          ref={(node) => {\n            setCanvasRef(node);\n            ref.current = node;\n          }}\n          elevation={0}\n          sx={{\n            p: 4,\n            border: '1px dashed',\n            borderColor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \n              ? 'primary.main' \n              : 'primary.light',\n            borderRadius: 1,\n            bgcolor: 'background.paper',\n            position: 'relative',\n            minHeight: title === 'Header' || title === 'Footer' ? '100px' : '200px',\n            transition: 'border-color 0.3s ease, background-color 0.3s ease',\n            '&:hover': {\n              bgcolor: isDraggingFromSidebar && dropTarget.canvasType === canvasType \n                ? 'rgba(25, 118, 210, 0.04)' \n                : 'background.paper',\n            },\n            pointerEvents: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \n              ? 'none' \n              : 'auto',\n            opacity: (canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter \n              ? 0.5 \n              : 1,\n          }}\n          onClick={() => {\n            if ((canvasType === CANVAS_TYPES.HEADER || canvasType === CANVAS_TYPES.FOOTER) && !isEditingHeaderFooter) return;\n            onSelectSection(null);\n          }}\n          onMouseMove={(e) => handleMouseMove(e, canvasType)}\n          onMouseEnter={(e) => handleMouseEnter(e, canvasType)}\n        >\n          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>\n            {renderedSections}\n            {getTargetSections(canvasType)?.length === 0 && \n             !activeId && \n             !isDraggingFromSidebar && (\n              <Box sx={{ borderRadius: 1, p: 2, textAlign: 'center', color: 'text.secondary' }}>\n                <Typography type='s2' color='theme.secondary.600' weight='medium'>\n                  Drag Sections from side panel to start building the {title.toLowerCase()}\n                </Typography>\n              </Box>\n            )}\n          </Box>\n        </Paper>\n        {CANVAS_TYPES.MAIN === canvasType && visible && footerSections.length > 0 && (\n          <>\n            {/* <Accordion\n            sx= {{\n                  boxShadow: 'none !important',\n                  \".MuiAccordionSummary-root\": {\n                    backgroundColor: '#fafafa !important',\n                    border: `0 !important`,\n                    p: 0,\n                    pb: 1,\n                    // mb: 1,\n                    m:0,\n                    minHeight: 'unset'\n                  }\n              }}\n          >\n            <AccordionSummary\n              expandIcon={<ExpandMoreIcon />}\n              aria-controls=\"panel1-content\"\n              id=\"panel1-header\"\n            > */}\n              <Typography type=\"h4\" weight='bold' color={'theme.secondary.800'} sx={{ mt: 1 }}>Footer</Typography>\n            {/* </AccordionSummary> */}\n              <Paper sx={{ mb: 1, boxShadow: 'none', opacity: 0.5 }} dangerouslySetInnerHTML={{ __html: generateHeaderFooterPreview(footerSections) }} />\n            {/* </Accordion> */}\n          </>\n          )}\n      </Box>\n    );\n  };\n\n  return (\n    <Box sx={{ display: 'flex', flex: 1, overflow: 'hidden' }}>\n      <Box sx={{ flex: 1, overflow: 'auto', height: 'calc(100vh - 104px)' }}>\n        <Container maxWidth=\"lg\" sx={{ py: 4 }}>\n          {preview ? (\n            renderPreview()\n          ) : (\n            <>\n              {renderCanvas(\n                'Header', \n                CANVAS_TYPES.HEADER, \n                renderedHeaderSections, \n                setHeaderCanvasRef, \n                headerCanvasRef,\n                isEditingHeaderFooter\n              )}\n              {renderCanvas(\n                'Content', \n                CANVAS_TYPES.MAIN, \n                renderedMainSections, \n                setMainCanvasRef, \n                mainCanvasRef,\n                !isEditingHeaderFooter\n              )}\n              {renderCanvas(\n                'Footer', \n                CANVAS_TYPES.FOOTER, \n                renderedFooterSections, \n                setFooterCanvasRef, \n                footerCanvasRef,\n                isEditingHeaderFooter\n              )}\n            </>\n          )}\n        </Container>\n      </Box>\n      <Box\n        sx={{\n          width: 400,\n          flexShrink: 0,\n          position: 'sticky',\n          top: 0,\n          alignSelf: 'flex-start',\n          height: 'calc(100vh - 104px)',\n          overflowY: 'auto',\n          borderLeft: '1px solid',\n          borderColor: 'divider',\n          bgcolor: 'background.paper',\n          zIndex: 1,\n        }}\n      >\n        {(selectedSection && !selectedSectionData?.is_edited_from_source && !isSectionEditing) ? (\n          <SectionFormatPanel\n            section={selectedSectionData}\n            onClose={() => onSelectSection(null)}\n            onUpdate={(data) => {\n              if (selectedSection) {\n                const canvasType = headerSections.some(s => s.id === selectedSection)\n                  ? CANVAS_TYPES.HEADER\n                  : footerSections.some(s => s.id === selectedSection)\n                    ? CANVAS_TYPES.FOOTER\n                    : CANVAS_TYPES.MAIN;\n                onUpdateSection(selectedSection, data, canvasType);\n              }\n            }}\n            placeholders={placeholders}\n            handleSave={handleSave}\n            relation_table={relation_table}\n          />\n        ) : (\n          <EditorSidebar />\n        )}\n      </Box>\n    </Box>\n  );\n};\n\nexport default EditorCanvas;"],"names":["CANVAS_TYPES","sections","headerSections","footerSections","activeId","selectedSection","onSelectSection","onUpdateSection","onSplitSection","onDeleteSection","preview","placeholders","isEditingHeaderFooter","handleSave","relation_table","formattedPlaceholders","useMemo","map","p","value","key","label","name","String","setNodeRef","setMainCanvasRef","useDroppable","id","setHeaderCanvasRef","setFooterCanvasRef","selectedSectionData","find","section","dropTarget","setDropTarget","useState","type","canvasType","isDraggingFromSidebar","setIsDraggingFromSidebar","isSectionEditing","setIsSectionEditing","lastUpdateTimeRef","useRef","lastPositionRef","x","y","activeIdRef","mainCanvasRef","headerCanvasRef","footerCanvasRef","getTargetSections","useEffect","current","includes","length","updateDropTarget","now","Date","renderSectionsForCanvas","canvasSections","result","processedGroups","Set","i","renderDropIndicator","isHorizontal","jsx","Box","sx","border","borderColor","borderRadius","display","alignItems","justifyContent","bgcolor","opacity","animation","transform","children","Typography","color","weight","push","sectionId","isSplitPair","splitGroupId","has","splitSections","filter","s","add","splitRow","gap","mb","splitSection","index","jsxs","React","Fragment","width","splitWidth","transition","EditorSection","isSelected","isDragging","isOver","onSelect","onUpdate","content","extra","onSplit","content1","content2","onDelete","renderedMainSections","renderedHeaderSections","renderedFooterSections","renderCanvas","title","renderedSections","setCanvasRef","ref","visible","Paper","boxShadow","dangerouslySetInnerHTML","__html","generateHeaderFooterPreview","node","elevation","position","minHeight","pointerEvents","onClick","onMouseMove","e","dx","clientX","dy","clientY","Math","sqrt","sectionElement","document","elementsFromPoint","el","hasAttribute","targetSections","getAttribute","sectionCanvasType","rect","getBoundingClientRect","relativeY","top","relativeX","left","sectionHeight","height","sectionWidth","startsWith","handleMouseMove","onMouseEnter","handleMouseEnter","flexDirection","_a","textAlign","toLowerCase","mt","flex","overflow","Container","maxWidth","py","generateEmailPreview","flexShrink","alignSelf","overflowY","borderLeft","zIndex","is_edited_from_source","EditorSidebar","SectionFormatPanel","onClose","data","some"],"mappings":"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"}

package/dist/views/template-editor/components/EditorCanvas.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { EnhancedSectionData } from '../types/editor';
+
+interface EditorCanvasProps {
+    sections: EnhancedSectionData[];
+    headerSections: EnhancedSectionData[];
+    footerSections: EnhancedSectionData[];
+    activeId: string | null;
+    overSection: string | null;
+    selectedSection: string | null;
+    onSelectSection: (id: string | null) => void;
+    onUpdateSection: (id: string, data: any, canvasType?: string) => void;
+    onSplitSection: (id: string, content1: string, content2: string, canvasType?: string) => void;
+    onDeleteSection: (id: string, canvasType?: string) => void;
+    preview: boolean;
+    placeholders: Record<string, any>[];
+    isEditingHeaderFooter: boolean;
+    relation_table: any[];
+    handleSave?: () => Promise<void>;
+}
+declare const EditorCanvas: React.FC<EditorCanvasProps>;
+export default EditorCanvas;

package/dist/views/template-editor/components/EditorHeader/index.esm.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import Button from "../../../../components/button/button/index.esm.js";
+import { Button } from "../../../../components/button/button/index.esm.js";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
 import { Link as Link$1 } from "react-router-dom";
 import { templateRoutes } from "../../utils/common/index.esm.js";
@@ -8,9 +8,9 @@ import Toolbar from "../../../../node_modules/@mui/material/Toolbar/Toolbar/inde
 import Box from "../../../../node_modules/@mui/material/Box/Box/index.esm.js";
 import Link from "../../../../node_modules/@mui/material/Link/Link/index.esm.js";
 import Stack from "../../../../node_modules/@mui/material/Stack/Stack/index.esm.js";
+import { Edit } from "../../../../components/icons/edit/index.esm.js";
 import { EyeOff } from "../../../../components/icons/eye-off/index.esm.js";
 import { Eye } from "../../../../components/icons/eye/index.esm.js";
-import { Edit } from "../../../../components/icons/edit/index.esm.js";
 const EditorHeader = ({
   onSave,
   onPreview,

package/dist/views/template-editor/components/EditorHeader/index.js

@@ -1,15 +1,15 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../../../components/button/button/index.js"),i=require("../../../../components/typography/typography/index.js"),t=require("react-router-dom"),n=require("../../utils/common/index.js"),r=require("../../../../node_modules/@mui/material/AppBar/AppBar/index.js"),a=require("../../../../node_modules/@mui/material/Toolbar/Toolbar/index.js"),s=require("../../../../node_modules/@mui/material/Box/Box/index.js"),d=require("../../../../node_modules/@mui/material/Link/Link/index.js"),l=require("../../../../node_modules/@mui/material/Stack/Stack/index.js"),c=require("../../../../components/icons/eye-off/index.js"),m=require("../../../../components/icons/eye/index.js"),u=require("../../../../components/icons/edit/index.js");exports.default=({onSave:p,onPreview:x,preview:h,sections:y,isEditingHeaderFooter:j,setIsEditingHeaderFooter:g,onSaveHeaderFooter:f,modulePath:v,type:b,mode:q="add",templateData:S})=>{const w=n.templateRoutes(v,b);/* @__PURE__ */
-return e.jsx(r.default,{position:"static",color:"default",elevation:0,sx:{borderColor:"divider",bgcolor:"background.paper"},children:/* @__PURE__ */e.jsxs(a.default,{variant:"dense",sx:{justifyContent:"space-between",p:3},children:[
-/* @__PURE__ */e.jsxs(s.default,{sx:{display:"flex",alignItems:"center",gap:1},children:[
-/* @__PURE__ */e.jsx(d.default,{component:t.Link,to:w.LIST,underline:"hover",color:"text.secondary",sx:{fontSize:"0.875rem"},children:/* @__PURE__ */e.jsx(i.Typography,{type:"s5",color:"theme.secondary.800",children:"email"===b?"Emails":"PDF"})}),
-/* @__PURE__ */e.jsx(i.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:"/"}),
-/* @__PURE__ */e.jsxs(i.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:["add"==q?"Add New":"Edit"," Template"]}),S&&(null==S?void 0:S.name)&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(i.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:"/"}),
-/* @__PURE__ */e.jsx(i.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:null==S?void 0:S.name})]})]}),
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),o=require("../../../../components/button/button/index.js"),t=require("../../../../components/typography/typography/index.js"),n=require("react-router-dom"),i=require("../../utils/common/index.js"),r=require("../../../../node_modules/@mui/material/AppBar/AppBar/index.js"),s=require("../../../../node_modules/@mui/material/Toolbar/Toolbar/index.js"),a=require("../../../../node_modules/@mui/material/Box/Box/index.js"),d=require("../../../../node_modules/@mui/material/Link/Link/index.js"),l=require("../../../../node_modules/@mui/material/Stack/Stack/index.js"),c=require("../../../../components/icons/edit/index.js"),m=require("../../../../components/icons/eye-off/index.js"),u=require("../../../../components/icons/eye/index.js");exports.default=({onSave:p,onPreview:x,preview:h,sections:y,isEditingHeaderFooter:j,setIsEditingHeaderFooter:g,onSaveHeaderFooter:v,modulePath:f,type:b,mode:q="add",templateData:S})=>{const w=i.templateRoutes(f,b);/* @__PURE__ */
+return e.jsx(r.default,{position:"static",color:"default",elevation:0,sx:{borderColor:"divider",bgcolor:"background.paper"},children:/* @__PURE__ */e.jsxs(s.default,{variant:"dense",sx:{justifyContent:"space-between",p:3},children:[
+/* @__PURE__ */e.jsxs(a.default,{sx:{display:"flex",alignItems:"center",gap:1},children:[
+/* @__PURE__ */e.jsx(d.default,{component:n.Link,to:w.LIST,underline:"hover",color:"text.secondary",sx:{fontSize:"0.875rem"},children:/* @__PURE__ */e.jsx(t.Typography,{type:"s5",color:"theme.secondary.800",children:"email"===b?"Emails":"PDF"})}),
+/* @__PURE__ */e.jsx(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:"/"}),
+/* @__PURE__ */e.jsxs(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:["add"==q?"Add New":"Edit"," Template"]}),S&&(null==S?void 0:S.name)&&/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:"/"}),
+/* @__PURE__ */e.jsx(t.Typography,{type:"s5",weight:"medium",color:"theme.secondary.1000",children:null==S?void 0:S.name})]})]}),
 /* @__PURE__ */e.jsx(l.default,{direction:"row",spacing:1,children:j?/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(o.default,{onClick:()=>g(!1),size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),children:"Cancel Editing"}),
-/* @__PURE__ */e.jsx(o.default,{variant:"contained",onClick:()=>f(!0),size:"small",sx:{boxShadow:"none"},children:"Save Changes"})]}):/* @__PURE__ */e.jsxs(e.Fragment,{children:[
-/* @__PURE__ */e.jsx(o.default,{onClick:()=>g(!0),size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),startIcon:/* @__PURE__ */e.jsx(u.Edit,{fontSize:"small"}),disabled:h,children:"Edit Header/Footer"}),
-/* @__PURE__ */e.jsx(o.default,{onClick:x,size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),startIcon:h?/* @__PURE__ */e.jsx(c.EyeOff,{fontSize:"small"}):/* @__PURE__ */e.jsx(m.Eye,{fontSize:"small"}),disabled:!(null==y?void 0:y.length),children:"Preview"}),
-/* @__PURE__ */e.jsx(o.default,{variant:"contained",onClick:p,size:"small",sx:{boxShadow:"none"},disabled:!(null==y?void 0:y.length),children:"Save"})]})})]})})};
+/* @__PURE__ */e.jsx(o.Button,{onClick:()=>g(!1),size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),children:"Cancel Editing"}),
+/* @__PURE__ */e.jsx(o.Button,{variant:"contained",onClick:()=>v(!0),size:"small",sx:{boxShadow:"none"},children:"Save Changes"})]}):/* @__PURE__ */e.jsxs(e.Fragment,{children:[
+/* @__PURE__ */e.jsx(o.Button,{onClick:()=>g(!0),size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),startIcon:/* @__PURE__ */e.jsx(c.Edit,{fontSize:"small"}),disabled:h,children:"Edit Header/Footer"}),
+/* @__PURE__ */e.jsx(o.Button,{onClick:x,size:"small",variant:"outlined",sx:e=>({color:`${e.palette.theme.secondary[1e3]} !important`}),startIcon:h?/* @__PURE__ */e.jsx(m.EyeOff,{fontSize:"small"}):/* @__PURE__ */e.jsx(u.Eye,{fontSize:"small"}),disabled:!(null==y?void 0:y.length),children:"Preview"}),
+/* @__PURE__ */e.jsx(o.Button,{variant:"contained",onClick:p,size:"small",sx:{boxShadow:"none"},disabled:!(null==y?void 0:y.length),children:"Save"})]})})]})})};
 //# sourceMappingURL=index.js.map

package/dist/views/template-editor/components/EditorHeader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorHeader.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport { \n  AppBar,\n  Toolbar,\n  Box,\n  Link,\n  Stack,\n} from '@mui/material';\nimport Button from '../../../components/button/button';\nimport Typography from '../../../components/typography/typography';\nimport { Edit, Eye, EyeOff } from '../../../components/icons';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { templateRoutes } from '../utils/common';\nimport { EnhancedSectionData } from '../types/editor';\n\ninterface EditorHeaderProps {\n  onSave: () => void;\n  onPreview: () => void;\n  preview: boolean;\n  sections: EnhancedSectionData[];\n  isEditingHeaderFooter: boolean;\n  setIsEditingHeaderFooter: (value: boolean) => void;\n  onSaveHeaderFooter: (value: boolean) => void;\n  modulePath: string;\n  type: string;\n  mode: 'add' | 'edit';\n  templateData: Record<string, any> | null;\n}\n\nconst EditorHeader: React.FC<EditorHeaderProps> = ({ \n  onSave, \n  onPreview, \n  preview, \n  sections, \n  isEditingHeaderFooter, \n  setIsEditingHeaderFooter, \n  onSaveHeaderFooter, \n  modulePath, \n  type,\n  mode = 'add',\n  templateData\n}) => {\n  const ROUTES = templateRoutes(modulePath, type);\n  return (\n    <AppBar \n      position=\"static\" \n      color=\"default\" \n      elevation={0} \n      sx={{ \n        borderColor: 'divider',\n        bgcolor: 'background.paper'\n      }}\n    >\n      <Toolbar variant=\"dense\" sx={{ justifyContent: 'space-between' ,p:3 }}>\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1}}>\n          <Link\n            component={RouterLink}\n            to={ROUTES.LIST}\n            underline=\"hover\" \n            color=\"text.secondary\" \n            sx={{ fontSize: '0.875rem' }}\n          >\n            <Typography type=\"s5\" color='theme.secondary.800'>{type === 'email' ? 'Emails' : 'PDF'}</Typography>\n          </Link>\n          <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>/</Typography>\n          <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>\n            { mode == 'add' ? 'Add New' : 'Edit' } Template\n          </Typography>\n          {templateData && templateData?.name &&\n            <>\n              <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>/</Typography>\n              <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>\n                {templateData?.name}\n              </Typography>\n            </>\n          }\n        </Box>\n        \n        <Stack direction=\"row\" spacing={1}>\n          {isEditingHeaderFooter ?\n            (\n              <>\n                <Button\n                  onClick={() => setIsEditingHeaderFooter(false)}\n                  size=\"small\"\n                  variant='outlined'\n                  sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\n                >\n                  Cancel Editing\n                </Button>\n                <Button \n                  variant=\"contained\" \n                  onClick={() => onSaveHeaderFooter(true)}\n                  size=\"small\"\n                  sx={{ boxShadow: 'none' }}\n                >\n                  Save Changes\n                </Button>\n              </>\n            )\n          : (\n            <>\n              <Button\n                onClick={() => setIsEditingHeaderFooter(true)}\n                size=\"small\"\n                variant='outlined'\n                sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\n                startIcon={<Edit fontSize='small'/>}\n                disabled={preview}\n              >\n                Edit Header/Footer\n              </Button>\n              <Button\n                onClick={onPreview}\n                size=\"small\"\n                variant='outlined'\n                sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\n                startIcon={preview ? <EyeOff fontSize='small'/> : <Eye fontSize='small'/>}\n                disabled={!sections?.length}\n              >\n                Preview\n              </Button>\n              <Button \n                variant=\"contained\" \n                onClick={onSave}\n                size=\"small\"\n                sx={{ boxShadow: 'none' }}\n                disabled={!sections?.length}\n              >\n                Save\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Toolbar>\n    </AppBar>\n  );\n};\n\nexport default EditorHeader;"],"names":["onSave","onPreview","preview","sections","isEditingHeaderFooter","setIsEditingHeaderFooter","onSaveHeaderFooter","modulePath","type","mode","templateData","ROUTES","templateRoutes","jsx","AppBar","position","color","elevation","sx","borderColor","bgcolor","children","jsxs","Toolbar","variant","justifyContent","p","Box","display","alignItems","gap","Link","component","RouterLink","to","LIST","underline","fontSize","Typography","weight","name","Fragment","Stack","direction","spacing","Button","onClick","size","theme","palette","secondary","boxShadow","startIcon","Edit","disabled","EyeOff","Eye","length"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../../src/views/template-editor/components/EditorHeader.tsx"],"sourcesContent":["/* eslint-disable react-hooks/exhaustive-deps */\n/* eslint-disable unused-imports/no-unused-vars */\nimport React from 'react';\nimport { \n  AppBar,\n  Toolbar,\n  Box,\n  Link,\n  Stack,\n} from '@mui/material';\nimport Button from '../../../components/button/button';\nimport Typography from '../../../components/typography/typography';\nimport { Edit, Eye, EyeOff } from '../../../components/icons';\nimport { Link as RouterLink } from 'react-router-dom';\nimport { templateRoutes } from '../utils/common';\nimport { EnhancedSectionData } from '../types/editor';\n\ninterface EditorHeaderProps {\n  onSave: () => void;\n  onPreview: () => void;\n  preview: boolean;\n  sections: EnhancedSectionData[];\n  isEditingHeaderFooter: boolean;\n  setIsEditingHeaderFooter: (value: boolean) => void;\n  onSaveHeaderFooter: (value: boolean) => void;\n  modulePath: string;\n  type: string;\n  mode: 'add' | 'edit';\n  templateData: Record<string, any> | null;\n}\n\nconst EditorHeader: React.FC<EditorHeaderProps> = ({ \n  onSave, \n  onPreview, \n  preview, \n  sections, \n  isEditingHeaderFooter, \n  setIsEditingHeaderFooter, \n  onSaveHeaderFooter, \n  modulePath, \n  type,\n  mode = 'add',\n  templateData\n}) => {\n  const ROUTES = templateRoutes(modulePath, type);\n  return (\n    <AppBar \n      position=\"static\" \n      color=\"default\" \n      elevation={0} \n      sx={{ \n        borderColor: 'divider',\n        bgcolor: 'background.paper'\n      }}\n    >\n      <Toolbar variant=\"dense\" sx={{ justifyContent: 'space-between' ,p:3 }}>\n        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1}}>\n          <Link\n            component={RouterLink}\n            to={ROUTES.LIST}\n            underline=\"hover\" \n            color=\"text.secondary\" \n            sx={{ fontSize: '0.875rem' }}\n          >\n            <Typography type=\"s5\" color='theme.secondary.800'>{type === 'email' ? 'Emails' : 'PDF'}</Typography>\n          </Link>\n          <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>/</Typography>\n          <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>\n            { mode == 'add' ? 'Add New' : 'Edit' } Template\n          </Typography>\n          {templateData && templateData?.name &&\n            <>\n              <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>/</Typography>\n              <Typography type=\"s5\" weight='medium' color='theme.secondary.1000'>\n                {templateData?.name}\n              </Typography>\n            </>\n          }\n        </Box>\n        \n        <Stack direction=\"row\" spacing={1}>\n          {isEditingHeaderFooter ?\n            (\n              <>\n                <Button\n                  onClick={() => setIsEditingHeaderFooter(false)}\n                  size=\"small\"\n                  variant='outlined'\n                  sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\n                >\n                  Cancel Editing\n                </Button>\n                <Button \n                  variant=\"contained\" \n                  onClick={() => onSaveHeaderFooter(true)}\n                  size=\"small\"\n                  sx={{ boxShadow: 'none' }}\n                >\n                  Save Changes\n                </Button>\n              </>\n            )\n          : (\n            <>\n              <Button\n                onClick={() => setIsEditingHeaderFooter(true)}\n                size=\"small\"\n                variant='outlined'\n                sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\n                startIcon={<Edit fontSize='small'/>}\n                disabled={preview}\n              >\n                Edit Header/Footer\n              </Button>\n              <Button\n                onClick={onPreview}\n                size=\"small\"\n                variant='outlined'\n                sx={(theme) => ({ color: `${theme.palette.theme.secondary[1000]} !important` })}\n                startIcon={preview ? <EyeOff fontSize='small'/> : <Eye fontSize='small'/>}\n                disabled={!sections?.length}\n              >\n                Preview\n              </Button>\n              <Button \n                variant=\"contained\" \n                onClick={onSave}\n                size=\"small\"\n                sx={{ boxShadow: 'none' }}\n                disabled={!sections?.length}\n              >\n                Save\n              </Button>\n            </>\n          )}\n        </Stack>\n      </Toolbar>\n    </AppBar>\n  );\n};\n\nexport default EditorHeader;"],"names":["onSave","onPreview","preview","sections","isEditingHeaderFooter","setIsEditingHeaderFooter","onSaveHeaderFooter","modulePath","type","mode","templateData","ROUTES","templateRoutes","jsx","AppBar","position","color","elevation","sx","borderColor","bgcolor","children","jsxs","Toolbar","variant","justifyContent","p","Box","display","alignItems","gap","Link","component","RouterLink","to","LIST","underline","fontSize","Typography","weight","name","Fragment","Stack","direction","spacing","Button","onClick","size","theme","palette","secondary","boxShadow","startIcon","Edit","disabled","EyeOff","Eye","length"],"mappings":"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"}

package/dist/views/template-editor/components/EditorHeader.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { EnhancedSectionData } from '../types/editor';
+
+interface EditorHeaderProps {
+    onSave: () => void;
+    onPreview: () => void;
+    preview: boolean;
+    sections: EnhancedSectionData[];
+    isEditingHeaderFooter: boolean;
+    setIsEditingHeaderFooter: (value: boolean) => void;
+    onSaveHeaderFooter: (value: boolean) => void;
+    modulePath: string;
+    type: string;
+    mode: 'add' | 'edit';
+    templateData: Record<string, any> | null;
+}
+declare const EditorHeader: React.FC<EditorHeaderProps>;
+export default EditorHeader;

package/dist/views/template-editor/components/EditorSection/index.esm.js

@@ -3,11 +3,11 @@ import React__default, { useState, useRef, useMemo, useCallback, Suspense, lazy
 import { useDraggable, useDroppable } from "../../../../node_modules/@dnd-kit/core/dist/core.esm/index.esm.js";
 import default_1 from "../../../../node_modules/@mui/icons-material/DragIndicator/index.esm.js";
 import default_1$2 from "../../../../node_modules/@mui/icons-material/CallSplit/index.esm.js";
-import Select from "../../../../components/select/select/index.esm.js";
+import { Select } from "../../../../components/select/select/index.esm.js";
 import { Typography } from "../../../../components/typography/typography/index.esm.js";
 import EditSectionModal from "../../edit-section-modal/edit-section-modal/index.esm.js";
-import Checkbox from "../../../../components/checkbox/checkbox/index.esm.js";
-import Chip from "../../../../components/chip/chip/index.esm.js";
+import { Checkbox } from "../../../../components/checkbox/checkbox/index.esm.js";
+import { Chip } from "../../../../components/chip/chip/index.esm.js";
 import default_1$1 from "../../../../node_modules/@mui/icons-material/Close/index.esm.js";
 import { useCKEditorStyleExtractor } from "../../utils/style-extractor/index.esm.js";
 import Skeleton from "../../../../node_modules/@mui/material/Skeleton/Skeleton/index.esm.js";
@@ -17,8 +17,8 @@ import Paper from "../../../../node_modules/@mui/material/Paper/Paper/index.esm.
 import FormControlLabel from "../../../../node_modules/@mui/material/FormControlLabel/FormControlLabel/index.esm.js";
 import FormControl from "../../../../node_modules/@mui/material/FormControl/FormControl/index.esm.js";
 import IconButton from "../../../../node_modules/@mui/material/IconButton/IconButton/index.esm.js";
-import Fade from "../../../../node_modules/@mui/material/Fade/Fade/index.esm.js";
 import { Save } from "../../../../components/icons/save/index.esm.js";
+import Fade from "../../../../node_modules/@mui/material/Fade/Fade/index.esm.js";
 import { Edit } from "../../../../components/icons/edit/index.esm.js";
 import { Trash } from "../../../../components/icons/trash/index.esm.js";
 const CustomEditor = lazy(() => import("../../../../components/editor/custom-editor/index.esm.js"));