@mypixia/simplex-designer 2.1.2 โ 2.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +6 -6
- package/dist/index.es.js +95 -95
- package/dist/index_external.css +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -14,17 +14,17 @@
|
|
|
14
14
|
*
|
|
15
15
|
* This source code is licensed under the MIT license found in the
|
|
16
16
|
* LICENSE file in the root directory of this source tree.
|
|
17
|
-
*/var re;function _e(){return re||(re=1,process.env.NODE_ENV!=="production"&&function(){function d(m){if(m==null)return null;if(typeof m=="function")return m.$$typeof===it?null:m.displayName||m.name||null;if(typeof m=="string")return m;switch(m){case b:return"Fragment";case D:return"Profiler";case
|
|
17
|
+
*/var re;function _e(){return re||(re=1,process.env.NODE_ENV!=="production"&&function(){function d(m){if(m==null)return null;if(typeof m=="function")return m.$$typeof===it?null:m.displayName||m.name||null;if(typeof m=="string")return m;switch(m){case b:return"Fragment";case D:return"Profiler";case B:return"StrictMode";case W:return"Suspense";case ot:return"SuspenseList";case q:return"Activity"}if(typeof m=="object")switch(typeof m.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),m.$$typeof){case j:return"Portal";case $:return(m.displayName||"Context")+".Provider";case F:return(m._context.displayName||"Context")+".Consumer";case z:var A=m.render;return m=m.displayName,m||(m=A.displayName||A.name||"",m=m!==""?"ForwardRef("+m+")":"ForwardRef"),m;case U:return A=m.displayName||null,A!==null?A:d(m.type)||"Memo";case nt:A=m._payload,m=m._init;try{return d(m(A))}catch{}}return null}function o(m){return""+m}function a(m){try{o(m);var A=!1}catch{A=!0}if(A){A=console;var Q=A.error,_=typeof Symbol=="function"&&Symbol.toStringTag&&m[Symbol.toStringTag]||m.constructor.name||"Object";return Q.call(A,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",_),o(m)}}function l(m){if(m===b)return"<>";if(typeof m=="object"&&m!==null&&m.$$typeof===nt)return"<...>";try{var A=d(m);return A?"<"+A+">":"<...>"}catch{return"<...>"}}function s(){var m=Y.A;return m===null?null:m.getOwner()}function f(){return Error("react-stack-top-frame")}function x(m){if(O.call(m,"key")){var A=Object.getOwnPropertyDescriptor(m,"key").get;if(A&&A.isReactWarning)return!1}return m.key!==void 0}function c(m,A){function Q(){K||(K=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",A))}Q.isReactWarning=!0,Object.defineProperty(m,"key",{get:Q,configurable:!0})}function u(){var m=d(this.type);return et[m]||(et[m]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),m=this.props.ref,m!==void 0?m:null}function g(m,A,Q,_,Z,V,ct,H){return Q=V.ref,m={$$typeof:I,type:m,key:A,props:V,_owner:Z},(Q!==void 0?Q:null)!==null?Object.defineProperty(m,"ref",{enumerable:!1,get:u}):Object.defineProperty(m,"ref",{enumerable:!1,value:null}),m._store={},Object.defineProperty(m._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(m,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(m,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:ct}),Object.defineProperty(m,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:H}),Object.freeze&&(Object.freeze(m.props),Object.freeze(m)),m}function C(m,A,Q,_,Z,V,ct,H){var P=A.children;if(P!==void 0)if(_)if(J(P)){for(_=0;_<P.length;_++)T(P[_]);Object.freeze&&Object.freeze(P)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else T(P);if(O.call(A,"key")){P=d(m);var st=Object.keys(A).filter(function(At){return At!=="key"});_=0<st.length?"{key: someKey, "+st.join(": ..., ")+": ...}":"{key: someKey}",N[P+_]||(st=0<st.length?"{"+st.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,_,P,st,P),N[P+_]=!0)}if(P=null,Q!==void 0&&(a(Q),P=""+Q),x(A)&&(a(A.key),P=""+A.key),"key"in A){Q={};for(var dt in A)dt!=="key"&&(Q[dt]=A[dt])}else Q=A;return P&&c(Q,typeof m=="function"?m.displayName||m.name||"Unknown":m),g(m,P,V,Z,s(),Q,ct,H)}function T(m){typeof m=="object"&&m!==null&&m.$$typeof===I&&m._store&&(m._store.validated=1)}var w=y,I=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),b=Symbol.for("react.fragment"),z=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),F=Symbol.for("react.consumer"),$=Symbol.for("react.context"),B=Symbol.for("react.forward_ref"),W=Symbol.for("react.suspense"),ot=Symbol.for("react.suspense_list"),U=Symbol.for("react.memo"),nt=Symbol.for("react.lazy"),q=Symbol.for("react.activity"),it=Symbol.for("react.client.reference"),Y=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,J=Array.isArray,rt=console.createTask?console.createTask:function(){return null};w={"react-stack-bottom-frame":function(m){return m()}};var K,et={},M=w["react-stack-bottom-frame"].bind(w,f)(),G=rt(l(f)),N={};Ft.Fragment=b,Ft.jsx=function(m,A,Q,_,Z){var V=1e4>Y.recentlyCreatedOwnerStacks++;return C(m,A,Q,!1,_,Z,V?Error("react-stack-top-frame"):M,V?rt(l(m)):G)},Ft.jsxs=function(m,A,Q,_,Z){var V=1e4>Y.recentlyCreatedOwnerStacks++;return C(m,A,Q,!0,_,Z,V?Error("react-stack-top-frame"):M,V?rt(l(m)):G)}}()),Ft}var ae;function Ye(){return ae||(ae=1,process.env.NODE_ENV==="production"?It.exports=Ge():It.exports=_e()),It.exports}var i=Ye();const Mt={business:{name:"Business & Office",icons:[{name:"briefcase",symbol:"๐ผ",unicode:"๐ผ"},{name:"chart-up",symbol:"๐",unicode:"๐"},{name:"chart-down",symbol:"๐",unicode:"๐"},{name:"graph",symbol:"๐",unicode:"๐"},{name:"clipboard",symbol:"๐",unicode:"๐"},{name:"calendar",symbol:"๐
",unicode:"๐
"},{name:"office",symbol:"๐ข",unicode:"๐ข"},{name:"bank",symbol:"๐ฆ",unicode:"๐ฆ"},{name:"money-bag",symbol:"๐ฐ",unicode:"๐ฐ"},{name:"credit-card",symbol:"๐ณ",unicode:"๐ณ"}]},technology:{name:"Technology",icons:[{name:"laptop",symbol:"๐ป",unicode:"๐ป"},{name:"phone",symbol:"๐ฑ",unicode:"๐ฑ"},{name:"desktop",symbol:"๐ฅ๏ธ",unicode:"๐ฅ๏ธ"},{name:"keyboard",symbol:"โจ๏ธ",unicode:"โจ๏ธ"},{name:"mouse",symbol:"๐ฑ๏ธ",unicode:"๐ฑ๏ธ"},{name:"printer",symbol:"๐จ๏ธ",unicode:"๐จ๏ธ"},{name:"wifi",symbol:"๐ถ",unicode:"๐ถ"},{name:"battery",symbol:"๐",unicode:"๐"},{name:"plug",symbol:"๐",unicode:"๐"},{name:"gear",symbol:"โ๏ธ",unicode:"โ๏ธ"}]},communication:{name:"Communication",icons:[{name:"email",symbol:"๐ง",unicode:"๐ง"},{name:"envelope",symbol:"โ๏ธ",unicode:"โ๏ธ"},{name:"phone-call",symbol:"๐",unicode:"๐"},{name:"message",symbol:"๐ฌ",unicode:"๐ฌ"},{name:"announcement",symbol:"๐ข",unicode:"๐ข"},{name:"megaphone",symbol:"๐ฃ",unicode:"๐ฃ"},{name:"satellite",symbol:"๐ก",unicode:"๐ก"},{name:"radio",symbol:"๐ป",unicode:"๐ป"},{name:"microphone",symbol:"๐ค",unicode:"๐ค"},{name:"speaker",symbol:"๐",unicode:"๐"}]},transport:{name:"Transportation",icons:[{name:"car",symbol:"๐",unicode:"๐"},{name:"truck",symbol:"๐",unicode:"๐"},{name:"bus",symbol:"๐",unicode:"๐"},{name:"airplane",symbol:"โ๏ธ",unicode:"โ๏ธ"},{name:"train",symbol:"๐",unicode:"๐"},{name:"ship",symbol:"๐ข",unicode:"๐ข"},{name:"bicycle",symbol:"๐ด",unicode:"๐ด"},{name:"motorcycle",symbol:"๐๏ธ",unicode:"๐๏ธ"},{name:"taxi",symbol:"๐",unicode:"๐"},{name:"rocket",symbol:"๐",unicode:"๐"}]},nature:{name:"Nature & Environment",icons:[{name:"tree",symbol:"๐ณ",unicode:"๐ณ"},{name:"leaf",symbol:"๐",unicode:"๐"},{name:"flower",symbol:"๐ธ",unicode:"๐ธ"},{name:"sun",symbol:"โ๏ธ",unicode:"โ๏ธ"},{name:"moon",symbol:"๐",unicode:"๐"},{name:"star",symbol:"โญ",unicode:"โญ"},{name:"cloud",symbol:"โ๏ธ",unicode:"โ๏ธ"},{name:"rainbow",symbol:"๐",unicode:"๐"},{name:"mountain",symbol:"โฐ๏ธ",unicode:"โฐ๏ธ"},{name:"globe",symbol:"๐",unicode:"๐"}]},symbols:{name:"Symbols & Signs",icons:[{name:"check",symbol:"โ
",unicode:"โ
"},{name:"cross",symbol:"โ",unicode:"โ"},{name:"warning",symbol:"โ ๏ธ",unicode:"โ ๏ธ"},{name:"info",symbol:"โน๏ธ",unicode:"โน๏ธ"},{name:"question",symbol:"โ",unicode:"โ"},{name:"exclamation",symbol:"โ",unicode:"โ"},{name:"lock",symbol:"๐",unicode:"๐"},{name:"unlock",symbol:"๐",unicode:"๐"},{name:"key",symbol:"๐",unicode:"๐"},{name:"shield",symbol:"๐ก๏ธ",unicode:"๐ก๏ธ"}]}},le=()=>Object.values(Mt).flatMap(d=>d.icons.map(o=>({...o,category:d.name}))),qe=d=>le().filter(a=>a.name.toLowerCase().includes(d.toLowerCase())||a.category.toLowerCase().includes(d.toLowerCase())),Ve=({onSelectIcon:d,disabled:o=!1})=>{const[a,l]=y.useState(!1),[s,f]=y.useState(""),[x,c]=y.useState("all"),u=y.useRef(null);y.useEffect(()=>{const w=I=>{u.current&&!u.current.contains(I.target)&&l(!1)};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[]);const g=w=>{d(w),l(!1),f("")},T=(()=>{let w=le();if(s.trim()&&(w=qe(s)),x!=="all"){const I=Mt[x];I&&(w=w.filter(j=>j.category===I.name))}return w})();return i.jsxs("div",{className:"icon-selector",ref:u,children:[i.jsxs("button",{className:"toolbar-btn dropdown-trigger",disabled:o,onClick:()=>l(!a),title:"Add Icon",children:[i.jsx("span",{className:"icon",children:"๐ฏ"}),i.jsx("span",{className:"label",children:"Icons"}),i.jsx("span",{className:"dropdown-arrow",children:"โผ"})]}),a&&i.jsxs("div",{className:"icon-dropdown",children:[i.jsxs("div",{className:"icon-dropdown-header",children:[i.jsx("input",{type:"text",placeholder:"Search icons...",value:s,onChange:w=>f(w.target.value),className:"icon-search"}),i.jsxs("select",{value:x,onChange:w=>c(w.target.value),className:"category-select",children:[i.jsx("option",{value:"all",children:"All Categories"}),Object.entries(Mt).map(([w,I])=>i.jsx("option",{value:w,children:I.name},w))]})]}),i.jsx("div",{className:"icon-grid",children:T.length===0?i.jsx("div",{className:"no-icons",children:s?"No icons found":"No icons in this category"}):T.map((w,I)=>i.jsxs("button",{className:"icon-item",onClick:()=>g(w),title:`${w.name} (${w.category})`,children:[i.jsx("span",{className:"icon-symbol",children:w.symbol}),i.jsx("span",{className:"icon-name",children:w.name})]},`${w.name}-${I}`))}),i.jsx("div",{className:"icon-dropdown-footer",children:i.jsxs("span",{className:"icon-count",children:[T.length," icon",T.length!==1?"s":""]})})]})]})},Xe=({isOpen:d,onClose:o,onAddQRCode:a,theme:l})=>{const[s,f]=y.useState(""),[x,c]=y.useState(""),[u,g]=y.useState(200),[C,T]=y.useState("M"),w=()=>{if(!s.trim())return;const b={width:u,errorCorrectionLevel:C,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};$e.toDataURL(s,b,(z,D)=>{if(z){console.error("QR Code generation error:",z);return}c(D)})},I=()=>{if(!x)return;const b=new Image;b.onload=()=>{a({type:"qrcode",src:x,data:s,width:u,height:u,x:100,y:100,imageObject:b}),j()},b.src=x},j=()=>{f(""),c(""),o()};return d?i.jsx("div",{className:"qr-modal-overlay",onClick:j,children:i.jsxs("div",{className:"qr-modal-content",onClick:b=>b.stopPropagation(),children:[i.jsxs("div",{className:"qr-modal-header",children:[i.jsx("h3",{children:"Generate QR Code"}),i.jsx("button",{className:"qr-modal-close",onClick:j,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"qr-modal-body",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-data",children:"Enter Data (URL, Text, etc.)"}),i.jsx("textarea",{id:"qr-data",value:s,onChange:b=>f(b.target.value),placeholder:"https://example.com or any text...",rows:3})]}),i.jsxs("div",{className:"qr-options",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-size",children:"Size (px)"}),i.jsx("input",{type:"number",id:"qr-size",value:u,onChange:b=>g(Math.max(50,Math.min(500,parseInt(b.target.value)||200))),min:"50",max:"500"})]}),i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-error-level",children:"Error Correction"}),i.jsxs("select",{id:"qr-error-level",value:C,onChange:b=>T(b.target.value),children:[i.jsx("option",{value:"L",children:"Low (7%)"}),i.jsx("option",{value:"M",children:"Medium (15%)"}),i.jsx("option",{value:"Q",children:"Quartile (25%)"}),i.jsx("option",{value:"H",children:"High (30%)"})]})]})]}),i.jsx("div",{className:"qr-actions",children:i.jsx("button",{className:"qr-btn qr-btn-generate",onClick:w,disabled:!s.trim(),children:"Generate QR Code"})}),x&&i.jsxs("div",{className:"qr-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"qr-preview-container",children:i.jsx("img",{src:x,alt:"QR Code Preview"})}),i.jsx("button",{className:"qr-btn qr-btn-add",onClick:I,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Je=({isOpen:d,onClose:o,onAddBarcode:a,theme:l})=>{const[s,f]=y.useState(""),[x,c]=y.useState("CODE128"),[u,g]=y.useState(null),[C,T]=y.useState(2),[w,I]=y.useState(100),[j,b]=y.useState(20),[z,D]=y.useState("center"),[F,$]=y.useState("bottom"),[B,W]=y.useState(10),ot=y.useRef(null),U=[{value:"CODE128",label:"CODE128 (Most Common)"},{value:"EAN13",label:"EAN-13 (European Article Number)"},{value:"EAN8",label:"EAN-8 (Short EAN)"},{value:"UPC",label:"UPC (Universal Product Code)"},{value:"CODE39",label:"CODE39 (Alpha-numeric)"},{value:"ITF14",label:"ITF-14 (Shipping/Logistics)"},{value:"MSI",label:"MSI (Retail)"},{value:"pharmacode",label:"Pharmacode (Pharmaceutical)"},{value:"codabar",label:"Codabar (Libraries/Blood banks)"}],nt=()=>{if(s.trim())try{g(i.jsx(He,{value:s,format:x,width:C,height:w,fontSize:j,textAlign:z,textPosition:F,margin:B,background:"#ffffff",lineColor:"#000000"}))}catch(O){console.error("Barcode generation error:",O),alert("Invalid data for selected barcode format. Please check your input.")}},q=()=>{var O,J,rt,K;if(!(!u||!ot.current))try{const et=ot.current.querySelector("svg");if(!et){console.error("No SVG element found in barcode");return}const M=document.createElement("canvas"),G=M.getContext("2d"),N=et.getBoundingClientRect(),m=((J=(O=et.width)==null?void 0:O.baseVal)==null?void 0:J.value)||N.width||200,A=((K=(rt=et.height)==null?void 0:rt.baseVal)==null?void 0:K.value)||N.height||100;M.width=m,M.height=A;const Q=new XMLSerializer().serializeToString(et),_=new Blob([Q],{type:"image/svg+xml;charset=utf-8"}),Z=URL.createObjectURL(_),V=new Image;V.onload=()=>{G.drawImage(V,0,0);const ct=M.toDataURL("image/png"),H=new Image;H.onload=()=>{a({type:"barcode",src:ct,data:s,format:x,width:m,height:A,x:100,y:100,imageObject:H}),it()},H.src=ct,URL.revokeObjectURL(Z)},V.src=Z}catch(et){console.error("Error adding barcode to canvas:",et),alert("Failed to add barcode to canvas. Please try again.")}},it=()=>{f(""),g(null),c("CODE128"),T(2),I(100),b(20),o()},Y=O=>({CODE128:"Supports all ASCII characters. Most versatile format.",EAN13:"Requires exactly 12 digits (13th is checksum). Used for retail products.",EAN8:"Requires exactly 7 digits (8th is checksum). Compact version of EAN-13.",UPC:"Requires exactly 11 digits (12th is checksum). Used in North America.",CODE39:"Supports letters, numbers, and some symbols. Widely used.",ITF14:"Requires exactly 13 digits (14th is checksum). Used for shipping containers.",MSI:"Numeric only. Used in retail inventory.",pharmacode:"Numbers 3-131070. Used in pharmaceutical industry.",codabar:"Supports 0-9, A-D, and symbols. Used in libraries."})[O]||"";return d?i.jsx("div",{className:"barcode-modal-overlay",onClick:it,children:i.jsxs("div",{className:"barcode-modal-content",onClick:O=>O.stopPropagation(),children:[i.jsxs("div",{className:"barcode-modal-header",children:[i.jsx("h3",{children:"Generate Barcode"}),i.jsx("button",{className:"barcode-modal-close",onClick:it,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"barcode-modal-body",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-data",children:"Enter Data"}),i.jsx("input",{type:"text",id:"barcode-data",value:s,onChange:O=>f(O.target.value),placeholder:"Enter your data..."})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-format",children:"Barcode Format"}),i.jsx("select",{id:"barcode-format",value:x,onChange:O=>c(O.target.value),children:U.map(O=>i.jsx("option",{value:O.value,children:O.label},O.value))}),i.jsx("small",{className:"format-description",children:Y(x)})]}),i.jsxs("div",{className:"barcode-options",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-width",children:"Bar Width"}),i.jsx("input",{type:"range",id:"barcode-width",min:"1",max:"4",step:"0.5",value:C,onChange:O=>T(parseFloat(O.target.value))}),i.jsxs("span",{className:"range-value",children:[C,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-height",children:"Height"}),i.jsx("input",{type:"range",id:"barcode-height",min:"50",max:"200",value:w,onChange:O=>I(parseInt(O.target.value))}),i.jsxs("span",{className:"range-value",children:[w,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-fontsize",children:"Font Size"}),i.jsx("input",{type:"range",id:"barcode-fontsize",min:"10",max:"30",value:j,onChange:O=>b(parseInt(O.target.value))}),i.jsxs("span",{className:"range-value",children:[j,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"text-position",children:"Text Position"}),i.jsxs("select",{id:"text-position",value:F,onChange:O=>$(O.target.value),children:[i.jsx("option",{value:"bottom",children:"Bottom"}),i.jsx("option",{value:"top",children:"Top"})]})]})]}),i.jsx("div",{className:"barcode-actions",children:i.jsx("button",{className:"barcode-btn barcode-btn-generate",onClick:nt,disabled:!s.trim(),children:"Generate Barcode"})}),u&&i.jsxs("div",{className:"barcode-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"barcode-preview-container",ref:ot,children:u}),i.jsx("button",{className:"barcode-btn barcode-btn-add",onClick:q,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Ke=({theme:d})=>i.jsxs("div",{className:"premium-feature-container",style:{padding:"20px",backgroundColor:"#f8f9fa",borderRadius:"8px",boxShadow:"0 2px 10px rgba(0,0,0,0.05)",textAlign:"center",maxWidth:"400px",margin:"0 auto"},children:[i.jsx("div",{style:{marginBottom:"16px"},children:i.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:"#ffc107"},children:[i.jsx("path",{d:"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"}),i.jsx("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]})}),i.jsx("h3",{style:{color:"#333",fontSize:"18px",fontWeight:"600",marginBottom:"12px"},children:"Premium Feature Access"}),i.jsx("p",{style:{color:"#555",fontSize:"15px",lineHeight:"1.5",marginBottom:"20px"},children:"Premium stickers feature requires a subscription to access."}),i.jsx("a",{href:"https://mypixia.com/developer",target:"_blank",rel:"noopener noreferrer",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:(d==null?void 0:d.primaryColor)||"#4c5bf2",color:"white",padding:"10px 20px",borderRadius:"4px",textDecoration:"none",fontWeight:"500",transition:"background-color 0.2s ease"},children:"Get API Key"})]}),se=()=>i.jsxs("div",{style:{textAlign:"center",padding:"40px"},children:[i.jsx("div",{style:{border:"4px solid #f3f3f3",borderTop:"4px solid #3498db",borderRadius:"50%",width:"40px",height:"40px",animation:"spin 2s linear infinite",margin:"0 auto 20px"}}),i.jsx("p",{children:"Loading..."}),i.jsx("style",{children:`
|
|
22
|
+
<%s key={someKey} {...props} />`,_,P,st,P),N[P+_]=!0)}if(P=null,Q!==void 0&&(a(Q),P=""+Q),x(A)&&(a(A.key),P=""+A.key),"key"in A){Q={};for(var dt in A)dt!=="key"&&(Q[dt]=A[dt])}else Q=A;return P&&c(Q,typeof m=="function"?m.displayName||m.name||"Unknown":m),g(m,P,V,Z,s(),Q,ct,H)}function T(m){typeof m=="object"&&m!==null&&m.$$typeof===I&&m._store&&(m._store.validated=1)}var w=y,I=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),b=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),F=Symbol.for("react.consumer"),$=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),W=Symbol.for("react.suspense"),ot=Symbol.for("react.suspense_list"),U=Symbol.for("react.memo"),nt=Symbol.for("react.lazy"),q=Symbol.for("react.activity"),it=Symbol.for("react.client.reference"),Y=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,J=Array.isArray,rt=console.createTask?console.createTask:function(){return null};w={"react-stack-bottom-frame":function(m){return m()}};var K,et={},M=w["react-stack-bottom-frame"].bind(w,f)(),G=rt(l(f)),N={};Ft.Fragment=b,Ft.jsx=function(m,A,Q,_,Z){var V=1e4>Y.recentlyCreatedOwnerStacks++;return C(m,A,Q,!1,_,Z,V?Error("react-stack-top-frame"):M,V?rt(l(m)):G)},Ft.jsxs=function(m,A,Q,_,Z){var V=1e4>Y.recentlyCreatedOwnerStacks++;return C(m,A,Q,!0,_,Z,V?Error("react-stack-top-frame"):M,V?rt(l(m)):G)}}()),Ft}var ae;function Ye(){return ae||(ae=1,process.env.NODE_ENV==="production"?It.exports=Ge():It.exports=_e()),It.exports}var i=Ye();const Mt={business:{name:"Business & Office",icons:[{name:"briefcase",symbol:"๐ผ",unicode:"๐ผ"},{name:"chart-up",symbol:"๐",unicode:"๐"},{name:"chart-down",symbol:"๐",unicode:"๐"},{name:"graph",symbol:"๐",unicode:"๐"},{name:"clipboard",symbol:"๐",unicode:"๐"},{name:"calendar",symbol:"๐
",unicode:"๐
"},{name:"office",symbol:"๐ข",unicode:"๐ข"},{name:"bank",symbol:"๐ฆ",unicode:"๐ฆ"},{name:"money-bag",symbol:"๐ฐ",unicode:"๐ฐ"},{name:"credit-card",symbol:"๐ณ",unicode:"๐ณ"}]},technology:{name:"Technology",icons:[{name:"laptop",symbol:"๐ป",unicode:"๐ป"},{name:"phone",symbol:"๐ฑ",unicode:"๐ฑ"},{name:"desktop",symbol:"๐ฅ๏ธ",unicode:"๐ฅ๏ธ"},{name:"keyboard",symbol:"โจ๏ธ",unicode:"โจ๏ธ"},{name:"mouse",symbol:"๐ฑ๏ธ",unicode:"๐ฑ๏ธ"},{name:"printer",symbol:"๐จ๏ธ",unicode:"๐จ๏ธ"},{name:"wifi",symbol:"๐ถ",unicode:"๐ถ"},{name:"battery",symbol:"๐",unicode:"๐"},{name:"plug",symbol:"๐",unicode:"๐"},{name:"gear",symbol:"โ๏ธ",unicode:"โ๏ธ"}]},communication:{name:"Communication",icons:[{name:"email",symbol:"๐ง",unicode:"๐ง"},{name:"envelope",symbol:"โ๏ธ",unicode:"โ๏ธ"},{name:"phone-call",symbol:"๐",unicode:"๐"},{name:"message",symbol:"๐ฌ",unicode:"๐ฌ"},{name:"announcement",symbol:"๐ข",unicode:"๐ข"},{name:"megaphone",symbol:"๐ฃ",unicode:"๐ฃ"},{name:"satellite",symbol:"๐ก",unicode:"๐ก"},{name:"radio",symbol:"๐ป",unicode:"๐ป"},{name:"microphone",symbol:"๐ค",unicode:"๐ค"},{name:"speaker",symbol:"๐",unicode:"๐"}]},transport:{name:"Transportation",icons:[{name:"car",symbol:"๐",unicode:"๐"},{name:"truck",symbol:"๐",unicode:"๐"},{name:"bus",symbol:"๐",unicode:"๐"},{name:"airplane",symbol:"โ๏ธ",unicode:"โ๏ธ"},{name:"train",symbol:"๐",unicode:"๐"},{name:"ship",symbol:"๐ข",unicode:"๐ข"},{name:"bicycle",symbol:"๐ด",unicode:"๐ด"},{name:"motorcycle",symbol:"๐๏ธ",unicode:"๐๏ธ"},{name:"taxi",symbol:"๐",unicode:"๐"},{name:"rocket",symbol:"๐",unicode:"๐"}]},nature:{name:"Nature & Environment",icons:[{name:"tree",symbol:"๐ณ",unicode:"๐ณ"},{name:"leaf",symbol:"๐",unicode:"๐"},{name:"flower",symbol:"๐ธ",unicode:"๐ธ"},{name:"sun",symbol:"โ๏ธ",unicode:"โ๏ธ"},{name:"moon",symbol:"๐",unicode:"๐"},{name:"star",symbol:"โญ",unicode:"โญ"},{name:"cloud",symbol:"โ๏ธ",unicode:"โ๏ธ"},{name:"rainbow",symbol:"๐",unicode:"๐"},{name:"mountain",symbol:"โฐ๏ธ",unicode:"โฐ๏ธ"},{name:"globe",symbol:"๐",unicode:"๐"}]},symbols:{name:"Symbols & Signs",icons:[{name:"check",symbol:"โ
",unicode:"โ
"},{name:"cross",symbol:"โ",unicode:"โ"},{name:"warning",symbol:"โ ๏ธ",unicode:"โ ๏ธ"},{name:"info",symbol:"โน๏ธ",unicode:"โน๏ธ"},{name:"question",symbol:"โ",unicode:"โ"},{name:"exclamation",symbol:"โ",unicode:"โ"},{name:"lock",symbol:"๐",unicode:"๐"},{name:"unlock",symbol:"๐",unicode:"๐"},{name:"key",symbol:"๐",unicode:"๐"},{name:"shield",symbol:"๐ก๏ธ",unicode:"๐ก๏ธ"}]}},le=()=>Object.values(Mt).flatMap(d=>d.icons.map(o=>({...o,category:d.name}))),qe=d=>le().filter(a=>a.name.toLowerCase().includes(d.toLowerCase())||a.category.toLowerCase().includes(d.toLowerCase())),Ve=({onSelectIcon:d,disabled:o=!1})=>{const[a,l]=y.useState(!1),[s,f]=y.useState(""),[x,c]=y.useState("all"),u=y.useRef(null);y.useEffect(()=>{const w=I=>{u.current&&!u.current.contains(I.target)&&l(!1)};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[]);const g=w=>{d(w),l(!1),f("")},T=(()=>{let w=le();if(s.trim()&&(w=qe(s)),x!=="all"){const I=Mt[x];I&&(w=w.filter(j=>j.category===I.name))}return w})();return i.jsxs("div",{className:"icon-selector",ref:u,children:[i.jsxs("button",{className:"toolbar-btn dropdown-trigger",disabled:o,onClick:()=>l(!a),title:"Add Icon",children:[i.jsx("span",{className:"icon",children:"๐ฏ"}),i.jsx("span",{className:"label",children:"Icons"}),i.jsx("span",{className:"dropdown-arrow",children:"โผ"})]}),a&&i.jsxs("div",{className:"icon-dropdown",children:[i.jsxs("div",{className:"icon-dropdown-header",children:[i.jsx("input",{type:"text",placeholder:"Search icons...",value:s,onChange:w=>f(w.target.value),className:"icon-search"}),i.jsxs("select",{value:x,onChange:w=>c(w.target.value),className:"category-select",children:[i.jsx("option",{value:"all",children:"All Categories"}),Object.entries(Mt).map(([w,I])=>i.jsx("option",{value:w,children:I.name},w))]})]}),i.jsx("div",{className:"icon-grid",children:T.length===0?i.jsx("div",{className:"no-icons",children:s?"No icons found":"No icons in this category"}):T.map((w,I)=>i.jsxs("button",{className:"icon-item",onClick:()=>g(w),title:`${w.name} (${w.category})`,children:[i.jsx("span",{className:"icon-symbol",children:w.symbol}),i.jsx("span",{className:"icon-name",children:w.name})]},`${w.name}-${I}`))}),i.jsx("div",{className:"icon-dropdown-footer",children:i.jsxs("span",{className:"icon-count",children:[T.length," icon",T.length!==1?"s":""]})})]})]})},Xe=({isOpen:d,onClose:o,onAddQRCode:a,theme:l})=>{const[s,f]=y.useState(""),[x,c]=y.useState(""),[u,g]=y.useState(200),[C,T]=y.useState("M"),w=()=>{if(!s.trim())return;const b={width:u,errorCorrectionLevel:C,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};$e.toDataURL(s,b,(B,D)=>{if(B){console.error("QR Code generation error:",B);return}c(D)})},I=()=>{if(!x)return;const b=new Image;b.onload=()=>{a({type:"qrcode",src:x,data:s,width:u,height:u,x:100,y:100,imageObject:b}),j()},b.src=x},j=()=>{f(""),c(""),o()};return d?i.jsx("div",{className:"qr-modal-overlay",onClick:j,children:i.jsxs("div",{className:"qr-modal-content",onClick:b=>b.stopPropagation(),children:[i.jsxs("div",{className:"qr-modal-header",children:[i.jsx("h3",{children:"Generate QR Code"}),i.jsx("button",{className:"qr-modal-close",onClick:j,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"qr-modal-body",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-data",children:"Enter Data (URL, Text, etc.)"}),i.jsx("textarea",{id:"qr-data",value:s,onChange:b=>f(b.target.value),placeholder:"https://example.com or any text...",rows:3})]}),i.jsxs("div",{className:"qr-options",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-size",children:"Size (px)"}),i.jsx("input",{type:"number",id:"qr-size",value:u,onChange:b=>g(Math.max(50,Math.min(500,parseInt(b.target.value)||200))),min:"50",max:"500"})]}),i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-error-level",children:"Error Correction"}),i.jsxs("select",{id:"qr-error-level",value:C,onChange:b=>T(b.target.value),children:[i.jsx("option",{value:"L",children:"Low (7%)"}),i.jsx("option",{value:"M",children:"Medium (15%)"}),i.jsx("option",{value:"Q",children:"Quartile (25%)"}),i.jsx("option",{value:"H",children:"High (30%)"})]})]})]}),i.jsx("div",{className:"qr-actions",children:i.jsx("button",{className:"qr-btn qr-btn-generate",onClick:w,disabled:!s.trim(),children:"Generate QR Code"})}),x&&i.jsxs("div",{className:"qr-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"qr-preview-container",children:i.jsx("img",{src:x,alt:"QR Code Preview"})}),i.jsx("button",{className:"qr-btn qr-btn-add",onClick:I,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Je=({isOpen:d,onClose:o,onAddBarcode:a,theme:l})=>{const[s,f]=y.useState(""),[x,c]=y.useState("CODE128"),[u,g]=y.useState(null),[C,T]=y.useState(2),[w,I]=y.useState(100),[j,b]=y.useState(20),[B,D]=y.useState("center"),[F,$]=y.useState("bottom"),[z,W]=y.useState(10),ot=y.useRef(null),U=[{value:"CODE128",label:"CODE128 (Most Common)"},{value:"EAN13",label:"EAN-13 (European Article Number)"},{value:"EAN8",label:"EAN-8 (Short EAN)"},{value:"UPC",label:"UPC (Universal Product Code)"},{value:"CODE39",label:"CODE39 (Alpha-numeric)"},{value:"ITF14",label:"ITF-14 (Shipping/Logistics)"},{value:"MSI",label:"MSI (Retail)"},{value:"pharmacode",label:"Pharmacode (Pharmaceutical)"},{value:"codabar",label:"Codabar (Libraries/Blood banks)"}],nt=()=>{if(s.trim())try{g(i.jsx(He,{value:s,format:x,width:C,height:w,fontSize:j,textAlign:B,textPosition:F,margin:z,background:"#ffffff",lineColor:"#000000"}))}catch(O){console.error("Barcode generation error:",O),alert("Invalid data for selected barcode format. Please check your input.")}},q=()=>{var O,J,rt,K;if(!(!u||!ot.current))try{const et=ot.current.querySelector("svg");if(!et){console.error("No SVG element found in barcode");return}const M=document.createElement("canvas"),G=M.getContext("2d"),N=et.getBoundingClientRect(),m=((J=(O=et.width)==null?void 0:O.baseVal)==null?void 0:J.value)||N.width||200,A=((K=(rt=et.height)==null?void 0:rt.baseVal)==null?void 0:K.value)||N.height||100;M.width=m,M.height=A;const Q=new XMLSerializer().serializeToString(et),_=new Blob([Q],{type:"image/svg+xml;charset=utf-8"}),Z=URL.createObjectURL(_),V=new Image;V.onload=()=>{G.drawImage(V,0,0);const ct=M.toDataURL("image/png"),H=new Image;H.onload=()=>{a({type:"barcode",src:ct,data:s,format:x,width:m,height:A,x:100,y:100,imageObject:H}),it()},H.src=ct,URL.revokeObjectURL(Z)},V.src=Z}catch(et){console.error("Error adding barcode to canvas:",et),alert("Failed to add barcode to canvas. Please try again.")}},it=()=>{f(""),g(null),c("CODE128"),T(2),I(100),b(20),o()},Y=O=>({CODE128:"Supports all ASCII characters. Most versatile format.",EAN13:"Requires exactly 12 digits (13th is checksum). Used for retail products.",EAN8:"Requires exactly 7 digits (8th is checksum). Compact version of EAN-13.",UPC:"Requires exactly 11 digits (12th is checksum). Used in North America.",CODE39:"Supports letters, numbers, and some symbols. Widely used.",ITF14:"Requires exactly 13 digits (14th is checksum). Used for shipping containers.",MSI:"Numeric only. Used in retail inventory.",pharmacode:"Numbers 3-131070. Used in pharmaceutical industry.",codabar:"Supports 0-9, A-D, and symbols. Used in libraries."})[O]||"";return d?i.jsx("div",{className:"barcode-modal-overlay",onClick:it,children:i.jsxs("div",{className:"barcode-modal-content",onClick:O=>O.stopPropagation(),children:[i.jsxs("div",{className:"barcode-modal-header",children:[i.jsx("h3",{children:"Generate Barcode"}),i.jsx("button",{className:"barcode-modal-close",onClick:it,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"barcode-modal-body",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-data",children:"Enter Data"}),i.jsx("input",{type:"text",id:"barcode-data",value:s,onChange:O=>f(O.target.value),placeholder:"Enter your data..."})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-format",children:"Barcode Format"}),i.jsx("select",{id:"barcode-format",value:x,onChange:O=>c(O.target.value),children:U.map(O=>i.jsx("option",{value:O.value,children:O.label},O.value))}),i.jsx("small",{className:"format-description",children:Y(x)})]}),i.jsxs("div",{className:"barcode-options",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-width",children:"Bar Width"}),i.jsx("input",{type:"range",id:"barcode-width",min:"1",max:"4",step:"0.5",value:C,onChange:O=>T(parseFloat(O.target.value))}),i.jsxs("span",{className:"range-value",children:[C,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-height",children:"Height"}),i.jsx("input",{type:"range",id:"barcode-height",min:"50",max:"200",value:w,onChange:O=>I(parseInt(O.target.value))}),i.jsxs("span",{className:"range-value",children:[w,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-fontsize",children:"Font Size"}),i.jsx("input",{type:"range",id:"barcode-fontsize",min:"10",max:"30",value:j,onChange:O=>b(parseInt(O.target.value))}),i.jsxs("span",{className:"range-value",children:[j,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"text-position",children:"Text Position"}),i.jsxs("select",{id:"text-position",value:F,onChange:O=>$(O.target.value),children:[i.jsx("option",{value:"bottom",children:"Bottom"}),i.jsx("option",{value:"top",children:"Top"})]})]})]}),i.jsx("div",{className:"barcode-actions",children:i.jsx("button",{className:"barcode-btn barcode-btn-generate",onClick:nt,disabled:!s.trim(),children:"Generate Barcode"})}),u&&i.jsxs("div",{className:"barcode-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"barcode-preview-container",ref:ot,children:u}),i.jsx("button",{className:"barcode-btn barcode-btn-add",onClick:q,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Ke=({theme:d})=>i.jsxs("div",{className:"premium-feature-container",style:{padding:"20px",backgroundColor:"#f8f9fa",borderRadius:"8px",boxShadow:"0 2px 10px rgba(0,0,0,0.05)",textAlign:"center",maxWidth:"400px",margin:"0 auto"},children:[i.jsx("div",{style:{marginBottom:"16px"},children:i.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:"#ffc107"},children:[i.jsx("path",{d:"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"}),i.jsx("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]})}),i.jsx("h3",{style:{color:"#333",fontSize:"18px",fontWeight:"600",marginBottom:"12px"},children:"Premium Feature Access"}),i.jsx("p",{style:{color:"#555",fontSize:"15px",lineHeight:"1.5",marginBottom:"20px"},children:"Premium stickers feature requires a subscription to access."}),i.jsx("a",{href:"https://mypixia.com/developer",target:"_blank",rel:"noopener noreferrer",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:(d==null?void 0:d.primaryColor)||"#4c5bf2",color:"white",padding:"10px 20px",borderRadius:"4px",textDecoration:"none",fontWeight:"500",transition:"background-color 0.2s ease"},children:"Get API Key"})]}),se=()=>i.jsxs("div",{style:{textAlign:"center",padding:"40px"},children:[i.jsx("div",{style:{border:"4px solid #f3f3f3",borderTop:"4px solid #3498db",borderRadius:"50%",width:"40px",height:"40px",animation:"spin 2s linear infinite",margin:"0 auto 20px"}}),i.jsx("p",{children:"Loading..."}),i.jsx("style",{children:`
|
|
23
23
|
@keyframes spin {
|
|
24
24
|
0% { transform: rotate(0deg); }
|
|
25
25
|
100% { transform: rotate(360deg); }
|
|
26
26
|
}
|
|
27
|
-
`})]}),Ze=({isOpen:d,onClose:o,onAddSticker:a,theme:l,apiKey:s,apiEndpoint:f})=>{const[x,c]=y.useState([]),[u,g]=y.useState(!1),[C,T]=y.useState(null),[w,I]=y.useState(""),[j,b]=y.useState(""),[
|
|
27
|
+
`})]}),Ze=({isOpen:d,onClose:o,onAddSticker:a,theme:l,apiKey:s,apiEndpoint:f})=>{const[x,c]=y.useState([]),[u,g]=y.useState(!1),[C,T]=y.useState(null),[w,I]=y.useState(""),[j,b]=y.useState(""),[B,D]=y.useState({});y.useRef(null);const[F,$]=y.useState(!1),[z,W]=y.useState(!1),[ot,U]=y.useState(!1),nt=`${f}/api/v1/designer`;y.useEffect(()=>{d&&s&&q()},[d,s]);const q=async()=>{const M=sessionStorage.getItem("apc_x_sub_status");M==="active"?($(!0),W(!0),Y()):M==="inactive"?($(!1),W(!0)):(U(!0),await it())},it=async()=>{if(!s){$(!1),W(!0),U(!1);return}const M=`${nt}/get-subscription-status/${s}`;try{(await ie.get(M)).data.object==="active"?(sessionStorage.setItem("apc_x_sub_status","active"),$(!0),Y()):(sessionStorage.setItem("apc_x_sub_status","inactive"),$(!1))}catch(G){console.error("Subscription check failed:",G),sessionStorage.setItem("apc_x_sub_status","inactive"),$(!1)}finally{U(!1),W(!0)}},Y=async()=>{const M=sessionStorage.getItem("apc_stickers");if(M)try{const G=JSON.parse(M);c(G);return}catch{console.warn("Failed to parse cached stickers, fetching fresh data")}g(!0),T(null);try{const G=await ie.get(`${nt}/get-stickers`);if(G.data&&G.data.object&&G.data.object.contents){const N=G.data.object.contents;c(N),sessionStorage.setItem("apc_stickers",JSON.stringify(N))}else throw new Error("Invalid response format")}catch(G){console.error("Error fetching stickers:",G),T("Failed to load stickers. Please try again.")}finally{g(!1)}},O=(M,G)=>{a({type:"sticker",src:M,name:G,width:100,height:100,x:100,y:100}),o()},J=M=>{D(G=>({...G,[M]:!G[M]}))},rt=M=>{const G={};return M.forEach(N=>{const m=N.name.split("/");let A=G;m.forEach((Q,_)=>{A[Q]||(A[Q]=_===m.length-1?N:{}),A=A[Q]})}),G},K=(M,G="",N=0)=>i.jsx("div",{className:"sticker-tree-level",style:{paddingLeft:`${N*15}px`},children:Object.keys(M).map(m=>{const A=`${G}/${m}`,Q=B[A];return M[m].type==="image"?!j||m.toLowerCase().includes(j.toLowerCase())?i.jsx("div",{className:"sticker-item",onClick:()=>O(M[m].url,m),children:i.jsx("div",{className:"sticker-preview",children:i.jsx("img",{src:M[m].url,alt:m,loading:"lazy",onError:Z=>{Z.target.style.display="none"}})})},A):null:i.jsxs("div",{className:"sticker-category",children:[i.jsxs("div",{className:"category-header",onClick:()=>J(A),children:[i.jsx("span",{className:`expand-icon ${Q?"expanded":""}`,children:"โถ"}),i.jsx("span",{className:"category-name",children:m})]}),Q&&K(M[m],A,N+1)]},A)})}),et=x.filter(M=>!j||M.name.toLowerCase().includes(j.toLowerCase()));return d?i.jsx("div",{className:"sticker-modal-overlay",onClick:o,children:i.jsxs("div",{className:"sticker-modal-content",onClick:M=>M.stopPropagation(),children:[i.jsxs("div",{className:"sticker-modal-header",children:[i.jsx("h3",{children:"Stickers"}),i.jsx("button",{className:"sticker-modal-close",onClick:o,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"sticker-modal-body",children:[ot&&i.jsx(se,{}),!F&&!ot&&z&&i.jsx(Ke,{theme:l}),F&&z&&i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"sticker-modal-controls",children:i.jsx("div",{className:"search-container",children:i.jsx("input",{type:"text",placeholder:"Search stickers...",value:j,onChange:M=>b(M.target.value),className:"sticker-search"})})}),u&&i.jsx(se,{}),C&&i.jsxs("div",{className:"sticker-error",children:[i.jsx("p",{children:C}),i.jsx("button",{onClick:Y,children:"Retry"})]}),!u&&!C&&x.length>0&&i.jsx("div",{className:"sticker-grid",children:K(rt(et))})]})]})]})}):null},ti=[{id:1,name:"Rose Bouquet",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
|
|
28
28
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
|
|
29
29
|
<rect width="120" height="120" fill="#ffe6f0" stroke="#ff69b4" stroke-width="2"/>
|
|
30
30
|
<circle cx="60" cy="45" r="15" fill="#ff1493" opacity="0.7"/>
|
|
@@ -986,6 +986,6 @@ React keys must be passed directly to JSX without using spread:
|
|
|
986
986
|
</g>
|
|
987
987
|
<text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b7355">Mandala Flower</text>
|
|
988
988
|
</svg>
|
|
989
|
-
`)}`,category:"Geometric",description:"Complex mandala flower pattern"}],ei=({isOpen:d,onClose:o,onAddEmbroidery:a,theme:l,apiKey:s,apiEndpoint:f})=>{const[x,c]=y.useState([]),[u,g]=y.useState(!1),[C,T]=y.useState(null),[w,I]=y.useState(""),[j,b]=y.useState("All"),z=y.useRef(null),D=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{d&&c(ti)},[d]);const F=B=>{a({type:"embroidery",src:B.url,name:B.name,description:B.description,category:B.category,width:120,height:120,x:100,y:100}),o()},$=x.filter(B=>{const W=!w||B.name.toLowerCase().includes(w.toLowerCase())||B.description.toLowerCase().includes(w.toLowerCase()),ot=j==="All"||B.category===j;return W&&ot});return d?i.jsx("div",{className:"embroidery-modal-overlay",onClick:o,children:i.jsxs("div",{className:"embroidery-modal-content",onClick:B=>B.stopPropagation(),ref:z,children:[i.jsxs("div",{className:"embroidery-modal-header",children:[i.jsx("h3",{children:"Choose an Embroidery Design"}),i.jsx("button",{className:"embroidery-modal-close",onClick:o,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"embroidery-modal-controls",children:[i.jsx("div",{className:"search-container",children:i.jsx("input",{type:"text",placeholder:"Search embroidery designs...",value:w,onChange:B=>I(B.target.value),className:"embroidery-search"})}),i.jsxs("div",{className:"category-filter",children:[i.jsx("label",{children:"Category:"}),i.jsx("select",{value:j,onChange:B=>b(B.target.value),className:"category-select",children:D.map(B=>i.jsx("option",{value:B,children:B},B))})]})]}),i.jsxs("div",{className:"embroidery-modal-body",children:[u&&i.jsxs("div",{className:"embroidery-loading",children:[i.jsx("div",{className:"loading-spinner"}),i.jsx("p",{children:"Loading embroidery designs..."})]}),C&&i.jsx("div",{className:"embroidery-error",children:i.jsx("p",{children:C})}),!u&&!C&&i.jsx("div",{className:"embroidery-grid",children:$.map(B=>i.jsxs("div",{className:"embroidery-item",onClick:()=>F(B),title:B.description,children:[i.jsx("div",{className:"embroidery-preview",children:i.jsx("img",{src:B.url,alt:B.name,loading:"lazy",onError:W=>{console.error("Failed to load embroidery image:",B.url),W.target.style.display="none"}})}),i.jsxs("div",{className:"embroidery-info",children:[i.jsx("div",{className:"embroidery-name",children:B.name}),i.jsx("div",{className:"embroidery-category",children:B.category})]})]},B.id))}),!u&&!C&&$.length===0&&i.jsx("div",{className:"no-embroideries",children:i.jsx("p",{children:"No embroidery designs found matching your search."})})]}),i.jsx("div",{className:"embroidery-modal-footer",children:i.jsxs("div",{className:"embroidery-disclaimer",children:[i.jsx("span",{className:"disclaimer-icon",children:"โน๏ธ"}),i.jsx("span",{children:"Sample embroidery designs for preview. Actual embroidered results may vary based on fabric and thread."})]})})]})}):null},Ct=[{id:1,text:"DREAM BIG",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF6B35",hasBackground:!0,backgroundColor:"#1A1A1A",textAlign:"center",textTransform:"uppercase"},{id:2,text:"Never Give Up",category:"Motivational",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#2E8B57",fontStyle:"italic",textAlign:"center"},{id:3,text:"BE YOURSELF",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#FF1493",textTransform:"uppercase",letterSpacing:2},{id:4,text:"Stay Strong",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#4169E1",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:5,text:"RISE & SHINE",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000",textAlign:"center"},{id:6,text:"Believe in Magic",category:"Motivational",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB",textAlign:"center"},{id:7,text:"UNSTOPPABLE",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",textTransform:"uppercase",letterSpacing:1.5},{id:8,text:"Chase Your Dreams",category:"Motivational",fontSize:24,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:9,text:"FEARLESS",category:"Motivational",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:10,text:"Make It Happen",category:"Motivational",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:11,text:"BORN TO WIN",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#FFD700",hasBackground:!0,backgroundColor:"#800080",textAlign:"center"},{id:12,text:"Positive Vibes Only",category:"Motivational",fontSize:20,fontFamily:"Comic Sans MS",fill:"#FF69B4",fontWeight:"600"},{id:13,text:"LIMITLESS",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#1E90FF",textTransform:"uppercase",letterSpacing:3},{id:14,text:"Embrace The Journey",category:"Motivational",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B4513"},{id:15,text:"STRENGTH WITHIN",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#696969",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:16,text:"Create Your Own Sunshine",category:"Motivational",fontSize:18,fontFamily:"Palatino",fill:"#FF8C00",fontWeight:"600"},{id:17,text:"WARRIOR SPIRIT",category:"Motivational",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:18,text:"Keep Going",category:"Motivational",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:19,text:"FOCUS & WIN",category:"Motivational",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082",hasBackground:!0,backgroundColor:"#FFFF00"},{id:20,text:"Inspire Others",category:"Motivational",fontSize:26,fontFamily:"Georgia",fill:"#CD853F",fontStyle:"italic"},{id:21,text:"GAME CHANGER",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:22,text:"Live With Purpose",category:"Motivational",fontSize:22,fontFamily:"Palatino",fill:"#2F4F4F",fontWeight:"600"},{id:23,text:"BREAKTHROUGH",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",letterSpacing:2},{id:24,text:"Shine Bright",category:"Motivational",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FFD700",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:25,text:"NEVER SETTLE",category:"Motivational",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasBackground:!0,backgroundColor:"#000080"},{id:26,text:"CEO MINDSET",category:"Business",fontSize:28,fontFamily:"Arial",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:27,text:"Innovation Starts Here",category:"Business",fontSize:20,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"600"},{id:28,text:"PROFESSIONAL",category:"Business",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#000080",letterSpacing:1},{id:29,text:"Excellence Every Day",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#8B0000",fontWeight:"600"},{id:30,text:"LEADERSHIP",category:"Business",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",textAlign:"center"},{id:31,text:"Think Different",category:"Business",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#696969"},{id:32,text:"RESULTS DRIVEN",category:"Business",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:33,text:"Strategic Vision",category:"Business",fontSize:22,fontFamily:"Georgia",fill:"#2E8B57",fontWeight:"700"},{id:34,text:"PRODUCTIVITY",category:"Business",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:35,text:"Success Mindset",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#FF8C00",fontWeight:"600"},{id:36,text:"EXPERT LEVEL",category:"Business",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:37,text:"Quality First",category:"Business",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:38,text:"INTEGRITY",category:"Business",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center"},{id:39,text:"Growth Focused",category:"Business",fontSize:20,fontFamily:"Palatino",fill:"#20B2AA",fontWeight:"600"},{id:40,text:"COLLABORATION",category:"Business",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#9370DB"},{id:41,text:"Performance Matters",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#B22222",fontWeight:"700"},{id:42,text:"ACCOUNTABILITY",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#8B4513",letterSpacing:1.5},{id:43,text:"Vision to Reality",category:"Business",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:44,text:"TRANSFORMATION",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:45,text:"Excellence Standard",category:"Business",fontSize:22,fontFamily:"Palatino",fill:"#2E8B57",fontWeight:"600"},{id:46,text:"EFFICIENCY",category:"Business",fontSize:30,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#000080"},{id:47,text:"Forward Thinking",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#CD853F",fontWeight:"700"},{id:48,text:"ACHIEVEMENT",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"bold",fill:"#B8860B",hasBackground:!0,backgroundColor:"#F5F5DC"},{id:49,text:"Strategic Excellence",category:"Business",fontSize:20,fontFamily:"Georgia",fill:"#696969",fontWeight:"600"},{id:50,text:"IMPACT MAKER",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#DC143C",textAlign:"center"},{id:51,text:"COFFEE FIRST",category:"Funny",fontSize:28,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#8B4513",hasBackground:!0,backgroundColor:"#F5DEB3"},{id:52,text:"I'm Not Lazy, I'm Energy Efficient",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF69B4",fontWeight:"600"},{id:53,text:"SARCASM LOADING...",category:"Funny",fontSize:24,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32",textAlign:"center"},{id:54,text:"Powered By Pizza",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:55,text:"CTRL + ALT + DELETE MONDAY",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:56,text:"Brain 404 Error",category:"Funny",fontSize:22,fontFamily:"Arial",fill:"#FF1493",fontWeight:"600"},{id:57,text:"WEEKEND WARRIOR",category:"Funny",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:58,text:"Adulting is Hard",category:"Funny",fontSize:24,fontFamily:"Comic Sans MS",fill:"#9370DB",fontWeight:"600"},{id:59,text:"PROCRASTINATION EXPERT",category:"Funny",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#FF4500"},{id:60,text:"Netflix & Chill Champion",category:"Funny",fontSize:18,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"600"},{id:61,text:"CHAOS COORDINATOR",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",textAlign:"center"},{id:62,text:"I Speak Fluent Sarcasm",category:"Funny",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57"},{id:63,text:"SLEEP IS FOR THE WEAK",category:"Funny",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#B22222"},{id:64,text:"Professional Overthinker",category:"Funny",fontSize:20,fontFamily:"Verdana",fill:"#4B0082",fontWeight:"600"},{id:65,text:"WIFI PASSWORD PLEASE",category:"Funny",fontSize:20,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32"},{id:66,text:"Certified Couch Potato",category:"Funny",fontSize:22,fontFamily:"Comic Sans MS",fill:"#FF8C00",fontWeight:"700"},{id:67,text:"SOCIAL DISTANCING CHAMPION",category:"Funny",fontSize:16,fontFamily:"Arial",fontWeight:"bold",fill:"#20B2AA"},{id:68,text:"Powered By Caffeine",category:"Funny",fontSize:24,fontFamily:"Impact",fill:"#8B4513",fontWeight:"bold"},{id:69,text:"EMERGENCY CHOCOLATE NEEDED",category:"Funny",fontSize:18,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#D2691E"},{id:70,text:"I'm Not Short, I'm Fun Size",category:"Funny",fontSize:20,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"600"},{id:71,text:"CTRL + Z MY LIFE",category:"Funny",fontSize:26,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:72,text:"Error 404: Motivation Not Found",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF4500",fontWeight:"600"},{id:73,text:"PROFESSIONAL WEIRDO",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:74,text:"Snack Attack Mode",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:75,text:"BATTERY LOW, NEED COFFEE",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#8B4513"},{id:76,text:"Love You Forever",category:"Love",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493",textAlign:"center"},{id:77,text:"SOULMATES",category:"Love",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFE4E1"},{id:78,text:"Better Together",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:79,text:"ENDLESS LOVE",category:"Love",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:80,text:"You Complete Me",category:"Love",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000"},{id:81,text:"FOREVER & ALWAYS",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF1493",letterSpacing:1},{id:82,text:"My Heart Belongs To You",category:"Love",fontSize:20,fontFamily:"Palatino",fill:"#DC143C",fontWeight:"600"},{id:83,text:"PURE LOVE",category:"Love",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:84,text:"Together Forever",category:"Love",fontSize:26,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"700",textAlign:"center"},{id:85,text:"MATCH MADE IN HEAVEN",category:"Love",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FF1493"},{id:86,text:"Love Story",category:"Love",fontSize:32,fontFamily:"Palatino",fontStyle:"italic",fill:"#B22222"},{id:87,text:"HEARTBEAT",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFF0F5"},{id:88,text:"You Are My Sunshine",category:"Love",fontSize:22,fontFamily:"Georgia",fill:"#FF8C00",fontWeight:"600"},{id:89,text:"DESTINY",category:"Love",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#8B0000",textAlign:"center"},{id:90,text:"True Love Waits",category:"Love",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493"},{id:91,text:"BELOVED",category:"Love",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#B22222",letterSpacing:2},{id:92,text:"Love Conquers All",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"700"},{id:93,text:"PERFECT MATCH",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#000000"},{id:94,text:"Always & Forever",category:"Love",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"},{id:95,text:"ROMANCE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493"},{id:96,text:"Love Never Fails",category:"Love",fontSize:24,fontFamily:"Palatino",fill:"#B22222",fontWeight:"600"},{id:97,text:"ETERNAL LOVE",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",letterSpacing:1.5},{id:98,text:"Heart & Soul",category:"Love",fontSize:30,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"bold"},{id:99,text:"PASSIONATE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:100,text:"Love Is Everything",category:"Love",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"700"},{id:101,text:"NO PAIN NO GAIN",category:"Sports",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:102,text:"Train Hard",category:"Sports",fontSize:32,fontFamily:"Arial",fontWeight:"900",fill:"#B22222"},{id:103,text:"CHAMPION MINDSET",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:104,text:"Beast Mode ON",category:"Sports",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#32CD32"},{id:105,text:"STRONGER EVERY DAY",category:"Sports",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#2E8B57",letterSpacing:1},{id:106,text:"Victory Mindset",category:"Sports",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#B8860B"},{id:107,text:"GAME TIME",category:"Sports",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:108,text:"Push Your Limits",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:109,text:"ATHLETIC EXCELLENCE",category:"Sports",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#DC143C"},{id:110,text:"Fitness First",category:"Sports",fontSize:30,fontFamily:"Verdana",fontWeight:"bold",fill:"#228B22"},{id:111,text:"UNSTOPPABLE FORCE",category:"Sports",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:112,text:"Sweat Equity",category:"Sports",fontSize:28,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:113,text:"PERFORMANCE ZONE",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:114,text:"Train Like A Champion",category:"Sports",fontSize:20,fontFamily:"Arial",fill:"#B22222",fontWeight:"600"},{id:115,text:"POWER WITHIN",category:"Sports",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:116,text:"Maximum Effort",category:"Sports",fontSize:26,fontFamily:"Verdana",fill:"#2E8B57",fontWeight:"800"},{id:117,text:"ELITE ATHLETE",category:"Sports",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000"},{id:118,text:"Rise Above",category:"Sports",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#4169E1"},{id:119,text:"COMPETITIVE EDGE",category:"Sports",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#DC143C"},{id:120,text:"Strength & Honor",category:"Sports",fontSize:26,fontFamily:"Impact",fill:"#2F4F4F",fontWeight:"bold"},{id:121,text:"WINNING ATTITUDE",category:"Sports",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#32CD32",letterSpacing:1.5},{id:122,text:"Never Give Up",category:"Sports",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FF4500"},{id:123,text:"ENDURANCE",category:"Sports",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#228B22",textAlign:"center"},{id:124,text:"Peak Performance",category:"Sports",fontSize:24,fontFamily:"Georgia",fill:"#B8860B",fontWeight:"700"},{id:125,text:"DEDICATION PAYS OFF",category:"Sports",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:126,text:"STYLE ICON",category:"Lifestyle",fontSize:30,fontFamily:"Palatino",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:127,text:"Chic & Unique",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:128,text:"TRENDSETTER",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:129,text:"Fashion Forward",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:130,text:"BOUTIQUE VIBES",category:"Lifestyle",fontSize:22,fontFamily:"Arial",fontWeight:"bold",fill:"#4169E1"},{id:131,text:"Effortlessly Elegant",category:"Lifestyle",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2F4F4F"},{id:132,text:"LUXE LIFESTYLE",category:"Lifestyle",fontSize:28,fontFamily:"Palatino",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:133,text:"Vintage Soul",category:"Lifestyle",fontSize:32,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:134,text:"MODERN CLASSIC",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#000000"},{id:135,text:"Street Style",category:"Lifestyle",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:136,text:"SOPHISTICATED",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontWeight:"bold",fill:"#2E8B57",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:137,text:"Boho Chic",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#CD853F"},{id:138,text:"MINIMALIST",category:"Lifestyle",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:3},{id:139,text:"Glamorous Life",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FFD700",fontWeight:"700"},{id:140,text:"HAUTE COUTURE",category:"Lifestyle",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#4B0082"},{id:141,text:"Urban Explorer",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fill:"#32CD32",fontWeight:"bold"},{id:142,text:"AESTHETIC VIBES",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#FF69B4"},{id:143,text:"Lifestyle Goals",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:144,text:"PREMIUM QUALITY",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B22222"},{id:145,text:"Designer Dreams",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:146,text:"CURATED STYLE",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#2F4F4F",letterSpacing:1},{id:147,text:"Fashion Statement",category:"Lifestyle",fontSize:22,fontFamily:"Georgia",fill:"#FF1493",fontWeight:"600"},{id:148,text:"ARTISAN CRAFTED",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#8B4513"},{id:149,text:"Timeless Elegance",category:"Lifestyle",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#000080"},{id:150,text:"SIGNATURE STYLE",category:"Lifestyle",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:151,text:"HAPPY BIRTHDAY",category:"Holidays",fontSize:32,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#FFFF00",textAlign:"center"},{id:152,text:"Merry Christmas",category:"Holidays",fontSize:30,fontFamily:"Georgia",fill:"#B22222",fontWeight:"700",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#228B22"},{id:153,text:"CELEBRATION TIME",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700"},{id:154,text:"Happy New Year",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:155,text:"THANKFUL HEART",category:"Holidays",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:156,text:"Easter Blessings",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:157,text:"PARTY TIME",category:"Holidays",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",hasBackground:!0,backgroundColor:"#000000"},{id:158,text:"Halloween Spirit",category:"Holidays",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#FF4500"},{id:159,text:"FESTIVE MOOD",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#32CD32"},{id:160,text:"Valentine's Day",category:"Holidays",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#DC143C"},{id:161,text:"ANNIVERSARY JOY",category:"Holidays",fontSize:"22",fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B8860B"},{id:162,text:"Graduation Day",category:"Holidays",fontSize:28,fontFamily:"Arial",fill:"#000080",fontWeight:"700"},{id:163,text:"SUMMER VIBES",category:"Holidays",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:164,text:"Winter Wonderland",category:"Holidays",fontSize:20,fontFamily:"Georgia",fill:"#4169E1",fontWeight:"600"},{id:165,text:"MOTHER'S DAY LOVE",category:"Holidays",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#FF69B4"},{id:166,text:"Father's Day Hero",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#2F4F4F",fontWeight:"700"},{id:167,text:"SPRING AWAKENING",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:168,text:"Holiday Magic",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#9370DB"},{id:169,text:"FAMILY GATHERING",category:"Holidays",fontSize:20,fontFamily:"Arial",fontWeight:"600",fill:"#8B4513"},{id:170,text:"Wedding Bliss",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FFD700"},{id:171,text:"FIREWORKS NIGHT",category:"Holidays",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:172,text:"Autumn Leaves",category:"Holidays",fontSize:26,fontFamily:"Georgia",fill:"#D2691E",fontWeight:"600"},{id:173,text:"MILESTONE MOMENT",category:"Holidays",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:174,text:"Special Occasion",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#B22222",fontWeight:"700"},{id:175,text:"CHEERS TO LIFE",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#20B2AA",textAlign:"center"},{id:176,text:'"Life is Beautiful"',category:"Quotes",fontSize:26,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57",textAlign:"center"},{id:177,text:"CARPE DIEM",category:"Quotes",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:178,text:'"Choose Happiness"',category:"Quotes",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF69B4"},{id:179,text:"LIVE LAUGH LOVE",category:"Quotes",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#DC143C",textAlign:"center"},{id:180,text:'"Dream Without Fear"',category:"Quotes",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:181,text:"WISDOM WITHIN",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#2F4F4F"},{id:182,text:'"Create Your Story"',category:"Quotes",fontSize:20,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:183,text:"INNER PEACE",category:"Quotes",fontSize:30,fontFamily:"Arial",fontWeight:"300",fill:"#20B2AA",letterSpacing:3},{id:184,text:'"Follow Your Heart"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:185,text:"GRATITUDE DAILY",category:"Quotes",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00"},{id:186,text:'"Embrace Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#32CD32"},{id:187,text:"MINDFUL LIVING",category:"Quotes",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"600",fill:"#4B0082"},{id:188,text:'"Stay Curious"',category:"Quotes",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#B22222"},{id:189,text:"PURPOSE DRIVEN",category:"Quotes",fontSize:28,fontFamily:"Arial",fontWeight:"700",fill:"#8B4513"},{id:190,text:'"Find Your Why"',category:"Quotes",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#CD853F"},{id:191,text:"AUTHENTIC SELF",category:"Quotes",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:192,text:'"Less is More"',category:"Quotes",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:2},{id:193,text:"PRESENT MOMENT",category:"Quotes",fontSize:26,fontFamily:"Georgia",fontWeight:"600",fill:"#2E8B57"},{id:194,text:'"Trust The Process"',category:"Quotes",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#4169E1"},{id:195,text:"BALANCED LIFE",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#20B2AA"},{id:196,text:'"Spread Kindness"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF69B4"},{id:197,text:"GROWTH MINDSET",category:"Quotes",fontSize:26,fontFamily:"Arial",fontWeight:"700",fill:"#32CD32"},{id:198,text:'"Be The Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:199,text:"INFINITE POSSIBILITIES",category:"Quotes",fontSize:20,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B"},{id:200,text:'"Leave Your Mark"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"}],ii=({isOpen:d,onClose:o,onAddText:a,theme:l})=>{const[s,f]=y.useState(""),[x,c]=y.useState("All"),u=y.useMemo(()=>{const w=Ct.reduce((I,j)=>(I[j.category]=(I[j.category]||0)+1,I),{});return[{name:"All",count:Ct.length},...Object.entries(w).map(([I,j])=>({name:I,count:j}))]},[Ct]),g=y.useMemo(()=>Ct.filter(w=>{const I=!s||w.text.toLowerCase().includes(s.toLowerCase())||w.category.toLowerCase().includes(s.toLowerCase()),j=x==="All"||w.category===x;return I&&j}),[Ct,s,x]),C=w=>{const I={...w,x:100,y:100};a("text",I),o()},T=()=>{a("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),o()};return d?i.jsx("div",{className:"text-templates-modal-overlay",onClick:o,children:i.jsxs("div",{className:"text-templates-modal",onClick:w=>w.stopPropagation(),children:[i.jsxs("div",{className:"modal-header",children:[i.jsx("h2",{children:"Text Templates"}),i.jsx("button",{className:"close-btn",onClick:o,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"modal-controls",children:[i.jsx("div",{className:"search-section",children:i.jsx("input",{type:"text",placeholder:"Search templates...",value:s,onChange:w=>f(w.target.value),className:"search-input"})}),i.jsx("div",{className:"category-tabs",children:u.map(w=>i.jsxs("button",{className:`category-tab ${x===w.name?"active":""}`,onClick:()=>c(w.name),children:[w.name,i.jsxs("span",{className:"count",children:["(",w.count,")"]})]},w.name))})]}),i.jsxs("div",{className:"templates-grid",children:[i.jsx("div",{className:"custom-text-option",onClick:T,children:i.jsxs("div",{className:"custom-text-preview",children:[i.jsx("div",{className:"custom-icon",children:"โ๏ธ"}),i.jsx("div",{className:"custom-label",children:"Create Custom Text"})]})}),g.map(w=>i.jsxs("div",{className:"template-item",onClick:()=>C(w),children:[i.jsx("div",{className:"template-preview",style:{fontFamily:w.fontFamily,fontSize:`${Math.min(w.fontSize*.6,18)}px`,fontWeight:w.fontWeight,fontStyle:w.fontStyle,color:w.fill,backgroundColor:w.hasBackground?w.backgroundColor:"transparent",textAlign:w.textAlign||"left",textTransform:w.textTransform||"none",letterSpacing:w.letterSpacing?`${w.letterSpacing}px`:"normal",textShadow:w.hasTextShadow?`${w.textShadowX}px ${w.textShadowY}px ${w.textShadowBlur}px ${w.textShadowColor}`:"none"},children:w.text}),i.jsxs("div",{className:"template-info",children:[i.jsx("span",{className:"template-category",children:w.category}),i.jsx("span",{className:"template-font",children:w.fontFamily})]})]},w.id))]}),i.jsx("div",{className:"modal-footer",children:i.jsxs("div",{className:"results-count",children:[g.length," template",g.length!==1?"s":""," found"]})})]})}):null},oi=({onAddElement:d,onDeleteElement:o,onDuplicateElement:a,onUndo:l,onRedo:s,onToggleGrid:f,onToggleRulers:x,onToggleSnap:c,onImageUpload:u,canUndo:g,canRedo:C,showGrid:T,showRulers:w,snapToGrid:I,selectedElement:j,theme:b,readOnly:z,apiKey:D,apiEndpoint:F})=>{const[$,B]=y.useState(!1),[W,ot]=y.useState(!1),[U,nt]=y.useState(!1),[q,it]=y.useState(!1),[Y,O]=y.useState(!1),[J,rt]=y.useState(!1),[K,et]=y.useState(!1),M=P=>{const st=P.target.files[0];st&&st.type.startsWith("image/")&&u(st),P.target.value=""},G=P=>{d("icon",{iconData:P,text:P.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},N=P=>{d("qrcode",P)},m=P=>{d("barcode",P)},A=P=>{d("sticker",P)},Q=P=>{d("embroidery",P)},_=(P,st)=>{d(P,st)},Z=()=>{rt(!J),et(!1)},V=()=>{et(!K),rt(!1)},ct=P=>{P==="custom"?d("text"):P==="templates"&&O(!0),rt(!1)},H=P=>{d(P),et(!1)};return i.jsxs("div",{className:"toolbar",children:[i.jsxs("div",{className:"toolbar-section",children:[i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact",onClick:l,disabled:!g||z,title:"Undo (Ctrl+Z)",children:[i.jsx("span",{className:"icon",children:"โถ"}),i.jsx("span",{className:"label",children:"Undo"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:s,disabled:!C||z,title:"Redo (Ctrl+Y)",children:[i.jsx("span",{className:"icon",children:"โท"}),i.jsx("span",{className:"label",children:"Redo"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:z,title:"Add Text",onClick:Z,children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Text"}),i.jsx("span",{className:`dropdown-arrow ${J?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${J?"show":""}`,children:[i.jsxs("button",{onClick:()=>ct("custom"),children:[i.jsx("span",{className:"icon",children:"๐"})," Custom Text"]}),i.jsxs("button",{onClick:()=>ct("templates"),children:[i.jsx("span",{className:"icon",children:"๐"})," Text Templates"]})]})]}),i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:z,onClick:V,children:[i.jsx("span",{className:"icon",children:"โฉ"}),i.jsx("span",{className:"label",children:"Shapes"}),i.jsx("span",{className:`dropdown-arrow ${K?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${K?"show":""}`,children:[i.jsxs("button",{onClick:()=>H("rectangle"),children:[i.jsx("span",{className:"icon",children:"โญ"})," Rectangle"]}),i.jsxs("button",{onClick:()=>H("circle"),children:[i.jsx("span",{className:"icon",children:"โ"})," Circle"]}),i.jsxs("button",{onClick:()=>H("triangle"),children:[i.jsx("span",{className:"icon",children:"โฒ"})," Triangle"]}),i.jsxs("button",{onClick:()=>H("star"),children:[i.jsx("span",{className:"icon",children:"โ
"})," Star"]}),i.jsxs("button",{onClick:()=>H("heart"),children:[i.jsx("span",{className:"icon",children:"โฅ"})," Heart"]}),i.jsxs("button",{onClick:()=>H("arrow"),children:[i.jsx("span",{className:"icon",children:"โค"})," Arrow"]}),i.jsxs("button",{onClick:()=>H("diamond"),children:[i.jsx("span",{className:"icon",children:"โ"})," Diamond"]}),i.jsxs("button",{onClick:()=>H("hexagon"),children:[i.jsx("span",{className:"icon",children:"โฌก"})," Hexagon"]}),i.jsxs("button",{onClick:()=>H("pentagon"),children:[i.jsx("span",{className:"icon",children:"โฌ"})," Pentagon"]}),i.jsxs("button",{onClick:()=>H("oval"),children:[i.jsx("span",{className:"icon",children:"โฌฏ"})," Oval"]}),i.jsxs("button",{onClick:()=>H("roundedRectangle"),children:[i.jsx("span",{className:"icon",children:"โข"})," Rounded Rectangle"]}),i.jsxs("button",{onClick:()=>H("horizontalLine"),children:[i.jsx("span",{className:"icon",children:"โ"})," Horizontal Line"]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("label",{className:"toolbar-btn compact file-upload",style:{cursor:z?"not-allowed":"pointer"},children:[i.jsx("span",{className:"icon",children:"โ๏ธ"}),i.jsx("span",{className:"label",children:"Upload"}),i.jsx("input",{type:"file",accept:"image/*",onChange:M,disabled:z})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx(Ve,{onSelectIcon:G,theme:b,disabled:z}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>nt(!0),disabled:z,title:"Add Sticker",children:[i.jsx("span",{className:"icon",children:"๐จ"}),i.jsx("span",{className:"label",children:"Stickers"})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>B(!0),disabled:z,title:"Add QR Code",children:[i.jsx("span",{className:"icon",children:"โฆ"}),i.jsx("span",{className:"label",children:"QR Code"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>ot(!0),disabled:z,title:"Add Barcode",children:[i.jsx("span",{className:"icon",children:"โค"}),i.jsx("span",{className:"label",children:"Barcode"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx("div",{className:"toolbar-group embroidery-group",children:i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>it(!0),disabled:z,title:"Add Embroidery Design",children:[i.jsx("span",{className:"icon",children:"๐งต"}),i.jsx("span",{className:"label",children:"Embroidery"})]})}),j&&i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact success",onClick:a,disabled:z,title:"Duplicate Element (Ctrl+D)",children:[i.jsx("span",{className:"icon",children:"โง"}),i.jsx("span",{className:"label",children:"Copy"})]}),i.jsxs("button",{className:"toolbar-btn compact danger",onClick:o,disabled:z,title:"Delete Element (Delete)",children:[i.jsx("span",{className:"icon",children:"๐๏ธ"}),i.jsx("span",{className:"label",children:"Delete"})]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:`toolbar-btn compact ${T?"active":""}`,onClick:f,title:"Toggle Grid",children:[i.jsx("span",{className:"icon",children:"โ"}),i.jsx("span",{className:"label",children:"Grid"})]}),i.jsxs("button",{className:`toolbar-btn compact ${w?"active":""}`,onClick:x,title:"Toggle Rulers",children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Rulers"})]}),i.jsxs("button",{className:`toolbar-btn compact ${I?"active":""}`,onClick:c,title:"Snap to Grid",children:[i.jsx("span",{className:"icon",children:"๐งฒ"}),i.jsx("span",{className:"label",children:"Snap"})]})]})]}),i.jsx(Xe,{isOpen:$,onClose:()=>B(!1),onAddQRCode:N,theme:b}),i.jsx(Je,{isOpen:W,onClose:()=>ot(!1),onAddBarcode:m,theme:b}),i.jsx(Ze,{isOpen:U,onClose:()=>nt(!1),onAddSticker:A,theme:b,apiKey:D,apiEndpoint:F}),i.jsx(ei,{isOpen:q,onClose:()=>it(!1),onAddEmbroidery:Q,theme:b,apiKey:D,apiEndpoint:F}),i.jsx(ii,{isOpen:Y,onClose:()=>O(!1),onAddText:_,theme:b})]})},ri=({selectedElement:d,onUpdate:o,onMoveLayer:a,availableFonts:l,theme:s})=>{const[f,x]=y.useState(!1);if(!d)return i.jsxs("div",{className:"properties-panel",children:[i.jsx("h3",{children:"Properties"}),i.jsx("p",{className:"no-selection",children:"Select an element to edit its properties"})]});const c=(b,z)=>{o(d.id,{[b]:z})},u=()=>{var b,z,D;return i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Text Content"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Content"}),i.jsx("textarea",{value:d.text||"",onChange:F=>c("text",F.target.value),rows:3,placeholder:"Enter your text here..."})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Family"}),i.jsx("select",{value:d.fontFamily||"Arial",onChange:F=>c("fontFamily",F.target.value),children:l.map(F=>i.jsx("option",{value:F,children:F},F))})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Font Size"}),i.jsx("input",{type:"number",value:d.fontSize||20,onChange:F=>c("fontSize",parseInt(F.target.value)),min:"8",max:"200"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Height"}),i.jsx("input",{type:"number",step:"0.1",value:d.lineHeight||1.2,onChange:F=>c("lineHeight",parseFloat(F.target.value)),min:"0.5",max:"3"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Weight"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:d.fontWeight==="lighter"||d.fontWeight==="300"?"active":"",onClick:()=>c("fontWeight","300"),title:"Light",children:"Light"}),i.jsx("button",{className:!d.fontWeight||d.fontWeight==="normal"||d.fontWeight==="400"?"active":"",onClick:()=>c("fontWeight","normal"),title:"Normal",children:"Normal"}),i.jsx("button",{className:d.fontWeight==="bold"||d.fontWeight==="700"?"active":"",onClick:()=>c("fontWeight","bold"),title:"Bold",children:i.jsx("strong",{children:"Bold"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Style"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:d.fontStyle==="italic"?"active":"",onClick:()=>c("fontStyle",d.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:i.jsx("em",{children:"I"})}),i.jsx("button",{className:(b=d.textDecoration)!=null&&b.includes("underline")?"active":"",onClick:()=>{const F=d.textDecoration||"",$=F.split(" ").filter(B=>B&&B!=="underline");F.includes("underline")||$.push("underline"),c("textDecoration",$.join(" ").trim())},title:"Underline",children:i.jsx("u",{children:"U"})}),i.jsx("button",{className:(z=d.textDecoration)!=null&&z.includes("overline")?"active":"",onClick:()=>{const F=d.textDecoration||"",$=F.split(" ").filter(B=>B&&B!=="overline");F.includes("overline")||$.push("overline"),c("textDecoration",$.join(" ").trim())},title:"Overline",children:i.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),i.jsx("button",{className:(D=d.textDecoration)!=null&&D.includes("line-through")?"active":"",onClick:()=>{const F=d.textDecoration||"",$=F.split(" ").filter(B=>B&&B!=="line-through");F.includes("line-through")||$.push("line-through"),c("textDecoration",$.join(" ").trim())},title:"Strikethrough",children:i.jsx("s",{children:"S"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Transform"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!d.textTransform||d.textTransform==="none"?"active":"",onClick:()=>c("textTransform","none"),title:"Normal",children:"Aa"}),i.jsx("button",{className:d.textTransform==="uppercase"?"active":"",onClick:()=>c("textTransform","uppercase"),title:"Uppercase",children:"AA"}),i.jsx("button",{className:d.textTransform==="lowercase"?"active":"",onClick:()=>c("textTransform","lowercase"),title:"Lowercase",children:"aa"}),i.jsx("button",{className:d.textTransform==="capitalize"?"active":"",onClick:()=>c("textTransform","capitalize"),title:"Capitalize",children:"Aa"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Alignment"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!d.textAlign||d.textAlign==="left"?"active":"",onClick:()=>c("textAlign","left"),title:"Left Align",children:"โฌ
"}),i.jsx("button",{className:d.textAlign==="center"?"active":"",onClick:()=>c("textAlign","center"),title:"Center Align",children:"โ"}),i.jsx("button",{className:d.textAlign==="right"?"active":"",onClick:()=>c("textAlign","right"),title:"Right Align",children:"โก"}),i.jsx("button",{className:d.textAlign==="justify"?"active":"",onClick:()=>c("textAlign","justify"),title:"Justify",children:"โก"})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Text Color"}),i.jsx("input",{type:"color",value:d.fill||"#000000",onChange:F=>c("fill",F.target.value)})]}),i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Background Color"}),i.jsxs("div",{className:"color-with-toggle",children:[i.jsx("input",{type:"color",value:d.backgroundColor||"#ffffff",onChange:F=>c("backgroundColor",F.target.value),disabled:!d.hasBackground}),i.jsx("button",{className:`toggle-btn ${d.hasBackground?"active":""}`,onClick:()=>c("hasBackground",!d.hasBackground),title:d.hasBackground?"Remove background":"Add background",children:d.hasBackground?"๐":"๐โ๐จ"})]})]})]})}),f&&i.jsxs(i.Fragment,{children:[i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Letter Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:d.letterSpacing||0,onChange:F=>c("letterSpacing",parseFloat(F.target.value)),min:"-5",max:"10"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Word Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:d.wordSpacing||0,onChange:F=>c("wordSpacing",parseFloat(F.target.value)),min:"-10",max:"20"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Shadow"}),i.jsxs("div",{className:"text-shadow-controls",children:[i.jsx("div",{className:"shadow-toggle",children:i.jsx("button",{className:`toggle-btn ${d.hasTextShadow?"active":""}`,onClick:()=>c("hasTextShadow",!d.hasTextShadow),children:d.hasTextShadow?"Remove Shadow":"Add Shadow"})}),d.hasTextShadow&&i.jsxs("div",{className:"shadow-properties",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"H-Offset"}),i.jsx("input",{type:"number",value:d.textShadowX||2,onChange:F=>c("textShadowX",parseInt(F.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"V-Offset"}),i.jsx("input",{type:"number",value:d.textShadowY||2,onChange:F=>c("textShadowY",parseInt(F.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Blur"}),i.jsx("input",{type:"number",value:d.textShadowBlur||4,onChange:F=>c("textShadowBlur",parseInt(F.target.value)),min:"0",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Shadow Color"}),i.jsx("input",{type:"color",value:d.textShadowColor||"#000000",onChange:F=>c("textShadowColor",F.target.value)})]})]})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:d.stroke||"#000000",onChange:F=>c("stroke",F.target.value)})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:d.strokeWidth||0,onChange:F=>c("strokeWidth",parseInt(F.target.value)),min:"0",max:"20"})]})]})}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:d.opacity||1,onChange:F=>c("opacity",parseFloat(F.target.value))}),i.jsxs("span",{children:[Math.round((d.opacity||1)*100),"%"]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Variant"}),i.jsxs("select",{value:d.fontVariant||"normal",onChange:F=>c("fontVariant",F.target.value),children:[i.jsx("option",{value:"normal",children:"Normal"}),i.jsx("option",{value:"small-caps",children:"Small Caps"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Writing Mode"}),i.jsxs("select",{value:d.writingMode||"horizontal-tb",onChange:F=>c("writingMode",F.target.value),children:[i.jsx("option",{value:"horizontal-tb",children:"Horizontal"}),i.jsx("option",{value:"vertical-rl",children:"Vertical Right-to-Left"}),i.jsx("option",{value:"vertical-lr",children:"Vertical Left-to-Right"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Direction"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!d.direction||d.direction==="ltr"?"active":"",onClick:()=>c("direction","ltr"),title:"Left to Right",children:"LTR"}),i.jsx("button",{className:d.direction==="rtl"?"active":"",onClick:()=>c("direction","rtl"),title:"Right to Left",children:"RTL"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Background Padding"}),i.jsx("input",{type:"number",value:d.backgroundPadding||5,onChange:F=>c("backgroundPadding",parseInt(F.target.value)),min:"0",max:"50",disabled:!d.hasBackground})]})]})]})},g=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Shape Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Fill Color"}),i.jsx("input",{type:"color",value:d.fill||"#000000",onChange:b=>c("fill",b.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:d.stroke||"#000000",onChange:b=>c("stroke",b.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:d.strokeWidth||2,onChange:b=>c("strokeWidth",parseInt(b.target.value)),min:"0",max:"20"})]}),d.type==="star"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Star Points"}),i.jsx("input",{type:"number",value:d.numPoints||5,onChange:b=>c("numPoints",parseInt(b.target.value)),min:"3",max:"20"})]}),d.type==="roundedRectangle"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Corner Radius"}),i.jsx("input",{type:"number",value:d.cornerRadius||10,onChange:b=>c("cornerRadius",parseInt(b.target.value)),min:"0",max:"50"})]})]}),C=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Image Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:d.opacity||1,onChange:b=>c("opacity",parseFloat(b.target.value))}),i.jsxs("span",{children:[Math.round((d.opacity||1)*100),"%"]})]}),f&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Border Radius"}),i.jsx("input",{type:"number",value:d.borderRadius||0,onChange:b=>c("borderRadius",parseInt(b.target.value)),min:"0",max:"50"})]})]}),T=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Position & Size"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"X"}),i.jsx("input",{type:"number",value:Math.round(d.x)||0,onChange:b=>c("x",parseInt(b.target.value))})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Y"}),i.jsx("input",{type:"number",value:Math.round(d.y)||0,onChange:b=>c("y",parseInt(b.target.value))})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Width"}),i.jsx("input",{type:"number",value:Math.round(d.width)||0,onChange:b=>c("width",parseInt(b.target.value)),min:"1"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Height"}),i.jsx("input",{type:"number",value:Math.round(d.height)||0,onChange:b=>c("height",parseInt(b.target.value)),min:"1"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Rotation"}),i.jsx("input",{type:"range",min:"-180",max:"180",value:d.rotation||0,onChange:b=>c("rotation",parseInt(b.target.value))}),i.jsxs("span",{children:[d.rotation||0,"ยฐ"]})]})]}),w=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Line Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Width"}),i.jsx("input",{type:"number",value:d.strokeWidth||d.height||2,onChange:b=>{const z=parseInt(b.target.value);c("strokeWidth",z),c("height",z)},min:"1",max:"50"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Length"}),i.jsx("input",{type:"number",value:d.width||200,onChange:b=>c("width",parseInt(b.target.value)),min:"10",max:"1000"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Line Color"}),i.jsxs("div",{className:"color-input-group",children:[i.jsx("input",{type:"color",value:d.stroke||d.fill||"#000000",onChange:b=>{c("stroke",b.target.value),c("fill",b.target.value)}}),i.jsx("input",{type:"text",value:d.stroke||d.fill||"#000000",onChange:b=>{c("stroke",b.target.value),c("fill",b.target.value)},placeholder:"#000000"})]})]})]}),I=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Layer Controls"}),i.jsxs("div",{className:"button-group vertical",children:[i.jsx("button",{onClick:()=>a(d.id,"top"),children:"Bring to Front"}),i.jsx("button",{onClick:()=>a(d.id,"up"),children:"Bring Forward"}),i.jsx("button",{onClick:()=>a(d.id,"down"),children:"Send Backward"}),i.jsx("button",{onClick:()=>a(d.id,"bottom"),children:"Send to Back"})]})]}),j=["rectangle","circle","triangle","star","arrow","diamond","hexagon","pentagon","heart","oval","roundedRectangle"];return i.jsxs("div",{className:"properties-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Properties"}),i.jsx("span",{className:"element-type",children:d.type})]}),i.jsxs("div",{className:"panel-content",children:[d.type==="text"&&u(),j.includes(d.type)&&g(),d.type==="image"&&C(),d.type==="horizontalLine"&&w(),T(),I(),i.jsx("div",{className:"property-group",children:i.jsxs("button",{className:"toggle-advanced",onClick:()=>x(!f),children:[f?"Hide":"Show"," Advanced Options"]})})]})]})},ai=({elements:d,selectedElement:o,onSelectElement:a,onMoveLayer:l,onDeleteElement:s,theme:f})=>{const x=(u,g)=>{switch(u){case"text":return"T";case"rectangle":return"โญ";case"circle":return"โ";case"triangle":return"โฒ";case"star":return"โ
";case"arrow":return"โค";case"diamond":return"โ";case"hexagon":return"โฌก";case"pentagon":return"โฌ";case"heart":return"โฅ";case"oval":return"โฌญ";case"roundedRectangle":return"โข";case"horizontalLine":return"โ";case"image":return"๐ผ";case"qrcode":return"โฌ";case"barcode":return"|||";case"sticker":return"๐ญ";case"embroidery":return"๐งต";default:return"?"}},c=u=>{var g,C;if(u.type==="text")return u.isIcon&&u.iconData?`Icon: ${u.iconData.name}`:((g=u.text)==null?void 0:g.substring(0,20))+(((C=u.text)==null?void 0:C.length)>20?"...":"")||"Text";if(u.type==="qrcode")return`QR Code: ${(u.data||"").substring(0,15)+((u.data||"").length>15?"...":"")}`;if(u.type==="barcode"){const T=u.format||"CODE128",w=u.data||"";return`Barcode (${T}): ${w.substring(0,10)+(w.length>10?"...":"")}`}return u.type==="sticker"?`Sticker: ${(u.name||"Untitled").substring(0,15)}`:u.type==="embroidery"?`Embroidery: ${(u.name||"Design").substring(0,15)}`:u.type.charAt(0).toUpperCase()+u.type.slice(1)};return i.jsxs("div",{className:"layers-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Layers"}),i.jsx("span",{className:"layer-count",children:d.length})]}),i.jsx("div",{className:"layers-list",children:d.length===0?i.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...d].reverse().map((u,g)=>i.jsxs("div",{className:`layer-item ${(o==null?void 0:o.id)===u.id?"selected":""}`,onClick:()=>a(u),children:[i.jsxs("div",{className:"layer-info",children:[i.jsx("span",{className:"layer-icon",children:x(u.type)}),i.jsx("span",{className:"layer-name",children:c(u)})]}),i.jsxs("div",{className:"layer-controls",children:[i.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(u.id,"up")},disabled:g===0,title:"Move Up",children:"โ"}),i.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(u.id,"down")},disabled:g===d.length-1,title:"Move Down",children:"โ"}),i.jsx("button",{className:"layer-btn delete",onClick:C=>{C.stopPropagation(),s(u.id)},title:"Delete",children:"ร"})]})]},u.id))})]})};class si{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}async exportAllSections(o,a,l,s,f="png",x=!0,c=null){const u={};for(const g of a){const C=g.id||g.sectionName,T=o[C];if(!T||!T.elements||T.elements.length===0){console.log(`Skipping section ${C} - no elements`);continue}if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){let I=g.image||g.sectionImage;if(c&&c.sectionImage&&(g.sectionName==="Front"||c.sections&&Object.keys(c.sections).includes(g.sectionName))&&(I=c.sectionImage),I)try{const j=await this.loadImage(I);await this.processImageColor(j,T.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(j){console.warn("Failed to load background image:",j)}}else this.ctx.clearRect(0,0,l,s);for(const I of T.elements)await this.drawElement(I);const w=this.canvas.toDataURL(`image/${f}`,f==="jpeg"?.9:void 0);u[C]={dataUrl:w,blob:await this.dataUrlToBlob(w)}}return u}async downloadExports(o,a="design"){const l=Object.keys(o);if(l.length===0){alert("No designs to export");return}if(l.length===1){const s=l[0],{blob:f}=o[s],x=URL.createObjectURL(f),c=document.createElement("a");c.href=x,c.download=`${a}-${s}.png`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(x)}else for(const s of l){const{blob:f}=o[s],x=URL.createObjectURL(f),c=document.createElement("a");c.href=x,c.download=`${a}-${s}.png`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(x),await new Promise(u=>setTimeout(u,100))}}async loadImage(o){return new Promise((a,l)=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>a(s),s.onerror=l,s.src=o})}getLuma(o,a,l){return(.2126*o+.7152*a+.0722*l)/255}async processImageColor(o,a){const l=document.createElement("canvas"),s=l.getContext("2d");l.width=o.width,l.height=o.height,s.clearRect(0,0,l.width,l.height),s.drawImage(o,0,0);const f=s.getImageData(0,0,l.width,l.height),x=f.data,c=this.hexToRgb(a);if(!c){console.warn("Invalid target color:",a);return}const{r:u,g,b:C}=c;for(let T=0;T<x.length;T+=4){if(x[T+3]===0)continue;const I=this.getLuma(x[T],x[T+1],x[T+2]);x[T]=Math.round(u*I),x[T+1]=Math.round(g*I),x[T+2]=Math.round(C*I)}return s.putImageData(f,0,0),this.processedImage=new Image,new Promise(T=>{this.processedImage.onload=()=>{T()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),T()},this.processedImage.src=l.toDataURL("image/png")})}async drawElement(o){this.ctx.save();const a=o.x+o.width/2,l=o.y+o.height/2;switch(this.ctx.translate(a,l),o.rotation&&this.ctx.rotate(o.rotation*Math.PI/180),this.ctx.translate(-o.width/2,-o.height/2),o.type){case"text":this.drawText(o);break;case"rectangle":this.drawRectangle(o);break;case"circle":this.drawCircle(o);break;case"triangle":this.drawTriangle(o);break;case"star":this.drawStar(o);break;case"arrow":this.drawArrow(o);break;case"diamond":this.drawDiamond(o);break;case"hexagon":this.drawHexagon(o);break;case"pentagon":this.drawPentagon(o);break;case"heart":this.drawHeart(o);break;case"oval":this.drawOval(o);break;case"roundedRectangle":this.drawRoundedRectangle(o);break;case"qrcode":await this.drawQRCode(o);break;case"barcode":await this.drawBarcode(o);break;case"horizontalLine":this.drawHorizontalLine(o);break;case"sticker":await this.drawSticker(o);break;case"embroidery":await this.drawEmbroidery(o);break;case"image":await this.drawImage(o);break}this.ctx.restore()}drawText(o){this.ctx.font=`${o.fontStyle||"normal"} ${o.fontWeight||"normal"} ${o.fontSize||20}px ${o.fontFamily||"Arial"}`,this.ctx.fillStyle=o.fill||"#000000",this.ctx.textAlign=o.textAlign||"left",this.ctx.textBaseline="top",o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth);const a=(o.text||"Text").split(`
|
|
990
|
-
`),l=(o.fontSize||20)*1.2;a.forEach((s,f)=>{const x=f*l;o.stroke&&o.strokeWidth>0&&this.ctx.strokeText(s,0,x),this.ctx.fillText(s,0,x)})}drawRectangle(o){o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fillRect(0,0,o.width,o.height)),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.strokeRect(0,0,o.width,o.height))}drawCircle(o){const a=Math.min(o.width,o.height)/2,l=o.width/2,s=o.height/2;this.ctx.beginPath(),this.ctx.arc(l,s,a,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawTriangle(o){const a=o.width/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(0,o.height),this.ctx.lineTo(o.width,o.height),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawStar(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,f=s*.4,x=o.numPoints||5;this.ctx.beginPath();for(let c=0;c<x*2;c++){const u=c%2===0?s:f,g=c*Math.PI/x,C=a+Math.cos(g)*u,T=l+Math.sin(g)*u;c===0?this.ctx.moveTo(C,T):this.ctx.lineTo(C,T)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawArrow(o){const a=o.width,l=o.height,s=a*.3;this.ctx.beginPath(),this.ctx.moveTo(a/2,0),this.ctx.lineTo(a,l*.6),this.ctx.lineTo(a-s,l*.6),this.ctx.lineTo(a-s,l),this.ctx.lineTo(s,l),this.ctx.lineTo(s,l*.6),this.ctx.lineTo(0,l*.6),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}async dataUrlToBlob(o){return new Promise(a=>{const l=document.createElement("canvas"),s=l.getContext("2d"),f=new Image;f.onload=()=>{l.width=f.width,l.height=f.height,s.drawImage(f,0,0),l.toBlob(a)},f.src=o})}hexToRgb(o){const a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);return a?{r:parseInt(a[1],16),g:parseInt(a[2],16),b:parseInt(a[3],16)}:null}drawDiamond(o){const a=o.width/2,l=o.height/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(o.width,l),this.ctx.lineTo(a,o.height),this.ctx.lineTo(0,l),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHexagon(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,f=6;this.ctx.beginPath();for(let x=0;x<f;x++){const c=x*2*Math.PI/f-Math.PI/2,u=a+s*Math.cos(c),g=l+s*Math.sin(c);x===0?this.ctx.moveTo(u,g):this.ctx.lineTo(u,g)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawPentagon(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,f=5;this.ctx.beginPath();for(let x=0;x<f;x++){const c=x*2*Math.PI/f-Math.PI/2,u=a+s*Math.cos(c),g=l+s*Math.sin(c);x===0?this.ctx.moveTo(u,g):this.ctx.lineTo(u,g)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHeart(o){const a=o.width,l=o.height,s=0,f=0;this.ctx.beginPath();const x=l*.3;this.ctx.moveTo(s+a/2,f+x),this.ctx.bezierCurveTo(s+a/2,f,s,f,s,f+x),this.ctx.bezierCurveTo(s,f+(l+x)/2,s+a/2,f+(l+x)/2,s+a/2,f+l),this.ctx.bezierCurveTo(s+a/2,f+(l+x)/2,s+a,f+(l+x)/2,s+a,f+x),this.ctx.bezierCurveTo(s+a,f,s+a/2,f,s+a/2,f+x),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawOval(o){const a=o.width/2,l=o.height/2,s=o.width/2,f=o.height/2;this.ctx.beginPath(),this.ctx.ellipse(a,l,s,f,0,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawRoundedRectangle(o){const a=Math.min(o.width,o.height)*.1;this.drawRoundedRect(0,0,o.width,o.height,a),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawRoundedRect(o,a,l,s,f){this.ctx.beginPath(),this.ctx.moveTo(o+f,a),this.ctx.lineTo(o+l-f,a),this.ctx.quadraticCurveTo(o+l,a,o+l,a+f),this.ctx.lineTo(o+l,a+s-f),this.ctx.quadraticCurveTo(o+l,a+s,o+l-f,a+s),this.ctx.lineTo(o+f,a+s),this.ctx.quadraticCurveTo(o,a+s,o,a+s-f),this.ctx.lineTo(o,a+f),this.ctx.quadraticCurveTo(o,a,o+f,a),this.ctx.closePath()}async drawQRCode(o){if(o.imageObject)this.ctx.drawImage(o.imageObject,0,0,o.width,o.height);else if(o.src)try{const a=await this.loadImage(o.src);this.ctx.drawImage(a,0,0,o.width,o.height)}catch(a){console.warn("Failed to load QR code image for export:",a),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("QR Error",o.width/2,o.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No QR Data",o.width/2,o.height/2)}async drawBarcode(o){if(o.imageObject)this.ctx.drawImage(o.imageObject,0,0,o.width,o.height);else if(o.src)try{const a=await this.loadImage(o.src);this.ctx.drawImage(a,0,0,o.width,o.height)}catch(a){console.warn("Failed to load barcode image for export:",a),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Barcode Error",o.width/2,o.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No Barcode Data",o.width/2,o.height/2)}drawHorizontalLine(o){this.ctx.save(),o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.strokeStyle=o.stroke||o.fill||"#000000",this.ctx.lineWidth=o.strokeWidth||o.height||2,this.ctx.lineCap="round",this.ctx.beginPath(),this.ctx.moveTo(0,o.height/2),this.ctx.lineTo(o.width,o.height/2),this.ctx.stroke(),this.ctx.restore()}async drawSticker(o){try{let a=null;if(o.imageObject)a=o.imageObject;else if(o.imageData)a=o.imageData;else if(o.src||o.image){const l=o.src||o.image;a=await this.loadImage(l)}else o.data&&o.data.image&&(a=await this.loadImage(o.data.image));a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Sticker",o.width/2,o.height/2))}catch(a){console.warn("Failed to draw sticker:",a),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",o.width/2,o.height/2)}}async drawEmbroidery(o){try{let a=null;if(o.imageObject)a=o.imageObject;else if(o.imageData)a=o.imageData;else if(o.src||o.image){const l=o.src||o.image;a=await this.loadImage(l)}else o.data&&o.data.image&&(a=await this.loadImage(o.data.image));a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Embroidery",o.width/2,o.height/2))}catch(a){console.warn("Failed to draw embroidery:",a),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",o.width/2,o.height/2)}}async drawImage(o){try{let a=null;if(o.imageObject&&o.imageObject instanceof HTMLImageElement)a=o.imageObject;else if(o.imageData){if(o.imageData instanceof HTMLImageElement)a=o.imageData;else if(typeof o.imageData=="string")try{a=await this.loadImage(o.imageData)}catch(l){console.warn("Failed to load image from imageData URL:",o.imageData,l),a=await this.loadImageWithFallback(o.imageData)}}else if(o.src)try{a=await this.loadImage(o.src)}catch(l){console.warn("Failed to load image from src:",o.src,l),a=await this.loadImageWithFallback(o.src)}else if(o.image)try{a=await this.loadImage(o.image)}catch(l){console.warn("Failed to load image from image property:",o.image,l),a=await this.loadImageWithFallback(o.image)}a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):this.drawImagePlaceholder(o)}catch(a){console.error("Failed to draw image element:",a),this.drawImagePlaceholder(o)}}async loadImageWithFallback(o){return new Promise(a=>{const l=new Image;l.onload=()=>a(l),l.onerror=()=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>a(s),s.onerror=()=>{console.warn("All image loading attempts failed for:",o),a(null)},s.src=o},l.src=o})}drawImagePlaceholder(o){this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.lineWidth=2,this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Image",o.width/2,o.height/2-8),this.ctx.fillText("Not Found",o.width/2,o.height/2+8)}async blobToFile(o,a,l="image/png"){return new File([o],a,{type:l,lastModified:Date.now()})}async exportAllSectionsAsJSON(o,a,l,s,f="png",x=null){var w,I;const c=[],u=[],g={};for(const j of a){const b=j.sectionName,z=o[b];if(!z||!z.elements||z.elements.length===0){console.log(`Skipping section ${b} - no elements`);continue}let D=j.image||j.sectionImage;x&&x.sectionImage&&(j.sectionName==="Front"||x.sections&&Object.keys(x.sections).includes(j.sectionName))&&(D=x.sectionImage);const F={...z,backgroundImage:D,sectionImage:D,sectionName:b,selectedColor:z.selectedColor||"#FFFFFF",canvasWidth:l,canvasHeight:s};g[b]=F;const $=await this.exportSectionAsBlob(z,j,l,s,f,!0,x);if($){const W=await this.blobToFile($,`${b}-full.${f}`,`image/${f}`);c.push({sectionName:b,sectionImage:W})}const B=await this.exportSectionAsBlob(z,j,l,s,f,!1,x);if(B){const W=await this.blobToFile(B,`${b}-print.${f}`,`image/${f}`);u.push({sectionName:b,sectionImage:W})}}let C=((w=a[0])==null?void 0:w.image)||((I=a[0])==null?void 0:I.sectionImage);if(x&&x.sectionImage){const j=a[0];j&&(j.sectionName==="Front"||x.sections&&Object.keys(x.sections).includes(j.sectionName))&&(C=x.sectionImage)}const T={sections:g,canvasWidth:l,canvasHeight:s,sectionImage:C,format:f,timestamp:new Date().toISOString(),version:"1.0",...x&&{initData:{sectionImage:x.sectionImage,sections:x.sections?Object.keys(x.sections):[]}},product:{sections:a.map(j=>({sectionName:j.sectionName||j.id,sectionImage:j.image||j.sectionImage,id:j.id||j.sectionName}))}};return{fullDesign:c,printReady:u,designFile:JSON.stringify(T)}}async exportSectionAsBlob(o,a,l,s,f="png",x=!0,c=null){try{if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){let u=a.image||a.sectionImage;if(c&&c.sectionImage&&(a.sectionName==="Front"||c.sections&&Object.keys(c.sections).includes(a.sectionName))&&(u=c.sectionImage),u)try{const g=await this.loadImage(u);await this.processImageColor(g,o.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(g){console.warn("Failed to load background image:",g)}}else this.ctx.clearRect(0,0,l,s);for(const u of o.elements)await this.drawElement(u);return new Promise(u=>{this.canvas.toBlob(u,`image/${f}`,f==="jpeg"?.9:void 0)})}catch(u){return console.error("Error exporting section as blob:",u),null}}async exportCurrentSectionAsJSON(o,a="png",l=null){var I,j,b;const s=((I=o.activeSection)==null?void 0:I.sectionName)||"main";let f=((j=o.activeSection)==null?void 0:j.sectionImage)||((b=o.activeSection)==null?void 0:b.image);l&&l.sectionImage&&(s==="Front"||l.sections&&Object.keys(l.sections).includes(s))&&(f=l.sectionImage);const x={elements:o.elements,selectedColor:o.selectedColor,canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,backgroundImage:f,sectionImage:f,sectionName:s,zoomLevel:o.zoomLevel,showGrid:o.showGrid,snapToGrid:o.snapToGrid},c={id:s,sectionName:s,image:f,sectionImage:f},u=[],g=[],C=await this.exportSectionAsBlob(x,c,o.canvasWidth,o.canvasHeight,a,!0,l);if(C){const z=await this.blobToFile(C,`${s}-full.${a}`,`image/${a}`);u.push({sectionName:s,sectionImage:z})}const T=await this.exportSectionAsBlob(x,c,o.canvasWidth,o.canvasHeight,a,!1,l);if(T){const z=await this.blobToFile(T,`${s}-print.${a}`,`image/${a}`);g.push({sectionName:s,sectionImage:z})}const w={sections:{[s]:x},canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,sectionImage:f,format:a,timestamp:new Date().toISOString(),version:"1.0",...l&&{initData:{sectionImage:l.sectionImage,sections:l.sections?Object.keys(l.sections):[]}},productInfo:{sections:[{sectionName:s,sectionImage:f,id:s}]}};return{fullDesign:u,printReady:g,designFile:JSON.stringify(w)}}}class li{constructor(o="localStorage"){this.storage=o==="sessionStorage"?sessionStorage:localStorage,this.STORAGE_PREFIX="mypixia_canvas_",this.DESIGNS_LIST_KEY="mypixia_saved_designs"}saveDesign(o,a){var l;try{const s=this.generateDesignId(o),f=new Date().toISOString(),x={id:s,name:o,timestamp:f,version:"1.0",canvasData:{elements:a.elements||[],canvasWidth:a.canvasWidth||800,canvasHeight:a.canvasHeight||600,selectedColor:a.selectedColor||"#FF0000",activeSection:a.activeSection||null,product:a.product||null,sectionDesigns:a.sectionDesigns||{},zoomLevel:a.zoomLevel||1,showGrid:a.showGrid||!1,snapToGrid:a.snapToGrid||!0},metadata:{elementCount:((l=a.elements)==null?void 0:l.length)||0,lastModified:f,thumbnail:a.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+s,JSON.stringify(x)),this.updateDesignsList(s,o,f),{success:!0,designId:s,message:"Design saved successfully"}}catch(s){return console.error("Error saving design:",s),{success:!1,error:s.message}}}loadDesign(o){try{let a=o;if(!o.startsWith("design_")){const x=this.getAllDesigns().find(c=>c.name===o);if(!x)return{success:!1,error:"Design not found"};a=x.id}const l=this.storage.getItem(this.STORAGE_PREFIX+a);return l?{success:!0,data:JSON.parse(l)}:{success:!1,error:"Design not found"}}catch(a){return console.error("Error loading design:",a),{success:!1,error:a.message}}}getAllDesigns(){try{const o=this.storage.getItem(this.DESIGNS_LIST_KEY);return o?JSON.parse(o):[]}catch(o){return console.error("Error getting designs list:",o),[]}}deleteDesign(o){try{this.storage.removeItem(this.STORAGE_PREFIX+o);const l=this.getAllDesigns().filter(s=>s.id!==o);return this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(l)),{success:!0,message:"Design deleted successfully"}}catch(a){return console.error("Error deleting design:",a),{success:!1,error:a.message}}}exportDesignAsFile(o){try{const a=this.loadDesign(o);if(!a.success)return a;const l=a.data,s=JSON.stringify(l,null,2),f=new Blob([s],{type:"application/json"}),x=URL.createObjectURL(f),c=document.createElement("a");return c.href=x,c.download=`${l.name}_${l.id}.json`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(x),{success:!0,message:"Design exported successfully"}}catch(a){return console.error("Error exporting design:",a),{success:!1,error:a.message}}}importDesignFromFile(o){return new Promise(a=>{try{const l=new FileReader;l.onload=s=>{try{const f=JSON.parse(s.target.result);if(!this.validateDesignData(f)){a({success:!1,error:"Invalid design file format"});return}const x=this.generateDesignId(f.name+"_imported");f.id=x,f.name+="_imported",f.timestamp=new Date().toISOString(),f.metadata.lastModified=f.timestamp,this.storage.setItem(this.STORAGE_PREFIX+x,JSON.stringify(f)),this.updateDesignsList(x,f.name,f.timestamp),a({success:!0,data:f,message:"Design imported successfully"})}catch{a({success:!1,error:"Failed to parse design file"})}},l.readAsText(o)}catch(l){a({success:!1,error:l.message})}})}autoSave(o,a){const l=this.STORAGE_PREFIX+"autosave_"+o;try{const s={timestamp:new Date().toISOString(),canvasData:a};return this.storage.setItem(l,JSON.stringify(s)),!0}catch(s){return console.error("Auto-save failed:",s),!1}}loadAutoSave(o){const a=this.STORAGE_PREFIX+"autosave_"+o;try{const l=this.storage.getItem(a);return l?JSON.parse(l):null}catch(l){return console.error("Failed to load auto-save:",l),null}}clearAutoSave(o){const a=this.STORAGE_PREFIX+"autosave_"+o;this.storage.removeItem(a)}getStorageInfo(){const o=this.getAllDesigns();let a=0;return o.forEach(l=>{const s=this.storage.getItem(this.STORAGE_PREFIX+l.id);s&&(a+=new Blob([s]).size)}),{designCount:o.length,totalSize:a,totalSizeFormatted:this.formatBytes(a),storageLimit:this.getStorageLimit()}}clearAllDesigns(){try{return this.getAllDesigns().forEach(a=>{this.storage.removeItem(this.STORAGE_PREFIX+a.id)}),this.storage.removeItem(this.DESIGNS_LIST_KEY),{success:!0,message:"All designs cleared"}}catch(o){return{success:!1,error:o.message}}}generateDesignId(o){const a=Date.now(),l=Math.random().toString(36).substring(2,8);return`design_${a}_${l}`}updateDesignsList(o,a,l){const s=this.getAllDesigns(),f=s.findIndex(c=>c.id===o),x={id:o,name:a,timestamp:l,lastModified:l};f>=0?s[f]=x:s.push(x),s.sort((c,u)=>new Date(u.timestamp)-new Date(c.timestamp)),this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(s))}validateDesignData(o){return o&&o.id&&o.name&&o.canvasData&&Array.isArray(o.canvasData.elements)}formatBytes(o){if(o===0)return"0 Bytes";const a=1024,l=["Bytes","KB","MB","GB"],s=Math.floor(Math.log(o)/Math.log(a));return parseFloat((o/Math.pow(a,s)).toFixed(2))+" "+l[s]}getStorageLimit(){try{if("storage"in navigator&&"estimate"in navigator.storage)return navigator.storage.estimate().then(o=>o.quota)}catch{console.warn("Unable to estimate storage quota")}return"Unknown"}}const ne=y.forwardRef((d,o)=>{const{theme:a={primaryColor:"#000000",secondaryColor:"#cf7e52",tertiaryColor:"#FFFFFF"},readOnly:l=!1,product:s={name:"Premium Crew Neck T-Shirt",category:"Tshirts",description:"Men's crew neck t-shirts",plainColor:"N",mainImage:"https://static.mypixia.com/dev/products/7/e011a73a-f20a-489b-bea8-91a23da56fc4.png",colorSettings:["#FF0000","#0000FF","#008000","#000000","#FFFFFF","#808080","#FFFF00"],sections:[{sectionName:"Front",sectionImage:"https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png"},{sectionName:"Sleeve-left",sectionImage:"https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"},{sectionName:"Back",sectionImage:"https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"}]},initFile:f,initDesignContent:x}=d,[c,u]=y.useState([]),[g,C]=y.useState(null),[T,w]=y.useState(!1),[I,j]=y.useState(!1),[b,z]=y.useState(!1),[D,F]=y.useState({x:0,y:0}),[$,B]=y.useState(null),[W,ot]=y.useState(800),[U,nt]=y.useState(600),[q,it]=y.useState(1),[Y,O]=y.useState(s.colorSettings[0]),[J,rt]=y.useState(!1),[K,et]=y.useState(!0),[M,G]=y.useState(!0),[N,m]=y.useState(s.sections[0]),[A,Q]=y.useState(!1),[_,Z]=y.useState({}),[V,ct]=y.useState([]),[H,P]=y.useState(-1),[st]=y.useState(new li("localStorage")),dt=y.useRef(null),At=y.useRef(null),wt=y.useRef(null),ut=y.useRef(null),Lt=y.useRef(null),Rt=y.useRef(new si),Et=y.useRef(!1),[ht,Pt]=y.useState(null),at=y.useCallback(()=>{const e={elements:JSON.parse(JSON.stringify(c)),selectedElement:g?{...g}:null,timestamp:Date.now()},t=V.slice(0,H+1);t.push(e),t.length>50?t.shift():P(H+1),ct(t)},[c,g,V,H]),bt=y.useCallback(()=>({elements:c,canvasWidth:W,canvasHeight:U,selectedColor:Y,activeSection:N,product:s,sectionDesigns:_,zoomLevel:q,showGrid:J,snapToGrid:M,selectedElement:g?{...g}:null,canvasRef:dt}),[c,W,U,Y,N,s,_,q,J,M,g]),Ut=e=>{if(e.sections&&typeof e.sections=="object"){const t=Object.keys(e.sections)[0],r=e.sections[t];if(r&&r.elements){u(r.elements||[]),ot(r.canvasWidth||800),nt(r.canvasHeight||600),O(r.selectedColor||s.colorSettings[0]),it(r.zoomLevel||1),rt(r.showGrid||!1),G(r.snapToGrid||!0),C(null),e.sections&&Z(e.sections);const n=s.sections.find(h=>h.sectionName===t);n&&m(n),ct([]),P(-1),setTimeout(()=>{at()},100);return}}};y.useEffect(()=>{const t=setTimeout(async()=>{if(c.length===0&&V.length<=1)if(x)try{const r=JSON.parse(x);Pt(r),Ut(r)}catch(r){console.error("Error loading design file:",r),console.warn("Using default text instead")}else if(f)try{const r=await fetch(f);if(r.ok){const n=await r.text();if(n.trim()){const h=JSON.parse(n.trim());Pt(h),Ut(h)}}else console.warn("Failed to load design file, using default text")}catch(r){console.error("Error loading design file:",r),console.warn("Using default text instead")}else{const n="Arial",h="Change me",k=document.createElement("canvas").getContext("2d");k.font=`24px ${n}`;const v=k.measureText(h).width,R={id:lt(),type:"text",x:W/2-v/2,y:U/2-24/2,width:v,height:24,text:h,fontSize:24,fontFamily:n,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};u([R]),C(R),setTimeout(()=>{at()},100)}},300);return()=>clearTimeout(t)},[f,x,s.colorSettings,s.sections]);const Dt=y.useCallback((e="png",t=!0)=>{const r=bt();return s.sections,Rt.current.exportAllSections({[(N==null?void 0:N.sectionName)||"main"]:r},[{id:(N==null?void 0:N.sectionName)||"main",sectionName:(N==null?void 0:N.sectionName)||"main",image:N==null?void 0:N.sectionImage,sectionImage:N==null?void 0:N.sectionImage}],W,U,e,t,ht)},[bt,s.sections,N,W,U]),ce=["Arial","Helvetica","Times New Roman","Georgia","Verdana","Courier New","Tahoma","Trebuchet MS","Impact","Comic Sans MS","Palatino","Garamond","Bookman","Avant Garde","Century Gothic"],Tt=20;y.useEffect(()=>{const e=()=>Q(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),y.useEffect(()=>{const e=document.createElement("canvas");e.width=W,e.height=U,Lt.current=e},[W,U]),y.useEffect(()=>{V.length===0&&at()},[]);const jt=(e,t,r,n,h,p)=>{e.beginPath(),e.moveTo(t+p,r),e.lineTo(t+n-p,r),e.quadraticCurveTo(t+n,r,t+n,r+p),e.lineTo(t+n,r+h-p),e.quadraticCurveTo(t+n,r+h,t+n-p,r+h),e.lineTo(t+p,r+h),e.quadraticCurveTo(t,r+h,t,r+h-p),e.lineTo(t,r+p),e.quadraticCurveTo(t,r,t+p,r),e.closePath()},Ot=(e,t)=>{if(!t.isIcon)return{x:t.x,y:t.y,width:t.width,height:t.height,cx:t.x+t.width/2,cy:t.y+t.height/2};e.save(),e.font=`${t.fontStyle||""} ${t.fontWeight||""} ${t.fontSize}px ${t.fontFamily}`,e.textBaseline="alphabetic",e.textAlign="left";const r=e.measureText(t.text),n=r.actualBoundingBoxAscent??t.fontSize*.8,h=r.actualBoundingBoxDescent??t.fontSize*.2,p=r.actualBoundingBoxLeft??0,k=r.actualBoundingBoxRight??r.width,S=p+k,v=n+h,R=t.x,E=t.y,L=R-S/2-p,tt=E-v/2-n;return e.restore(),{x:L,y:tt,width:S,height:v,cx:R,cy:E}},de=(e,t)=>{if(!t)return;const r=8,n=8,h=4,p=30,k=Ot(e,t),S=t.isIcon?Math.max(r,12):r,v={x:-k.width/2-S,y:-k.height/2-S,w:k.width+S*2,h:k.height+S*2};e.save(),e.translate(k.cx,k.cy),t.rotation&&e.rotate(t.rotation*Math.PI/180);const R=e.createLinearGradient(v.x,v.y,v.x+v.w,v.y+v.h);R.addColorStop(0,"#3b82f6"),R.addColorStop(.5,"#1d4ed8"),R.addColorStop(1,"#3b82f6"),e.strokeStyle="rgba(59,130,246,.3)",e.lineWidth=3,jt(e,v.x-1,v.y-1,v.w+2,v.h+2,h+1),e.stroke(),e.strokeStyle=R,e.lineWidth=2,e.setLineDash([8,4]),jt(e,v.x,v.y,v.w,v.h,h),e.stroke(),e.lineDashOffset=-(Date.now()/50)%12,e.strokeStyle="#ffffff",e.lineWidth=1,e.setLineDash([4,8]),jt(e,v.x,v.y,v.w,v.h,h),e.stroke(),e.setLineDash([]),e.lineDashOffset=0,[{x:v.x,y:v.y},{x:v.x+v.w,y:v.y},{x:v.x+v.w,y:v.y+v.h},{x:v.x,y:v.y+v.h}].forEach(tt=>{e.fillStyle="rgba(0,0,0,.2)",e.fillRect(tt.x-n/2+1,tt.y-n/2+1,n,n),e.fillStyle="#ffffff",e.fillRect(tt.x-n/2,tt.y-n/2,n,n),e.strokeStyle="#3b82f6",e.lineWidth=1,e.strokeRect(tt.x-n/2,tt.y-n/2,n,n)});const E=0,L=v.y-p;e.strokeStyle="#3b82f6",e.lineWidth=1,e.setLineDash([2,2]),e.beginPath(),e.moveTo(E,L+12),e.lineTo(E,v.y),e.stroke(),e.setLineDash([]),e.beginPath(),e.arc(E,L,12,0,2*Math.PI),e.fillStyle="#f59e0b",e.fill(),e.strokeStyle="#ffffff",e.lineWidth=2,e.stroke(),e.strokeStyle="#ffffff",e.lineWidth=2,e.beginPath(),e.arc(E,L,6,-Math.PI/2,Math.PI,!1),e.stroke(),e.beginPath(),e.moveTo(E-6,L),e.lineTo(E-3,L-3),e.lineTo(E-3,L+3),e.closePath(),e.fillStyle="#ffffff",e.fill(),e.restore()},fe=(e,t)=>{if(!t)return[];const r=Ot(e,t),n=t.isIcon?Math.max(8,12):8,h=8,p=30,k=(t.rotation||0)*Math.PI/180,S={x:-r.width/2-n,y:-r.height/2-n,w:r.width+n*2,h:r.height+n*2},v=[{x:S.x,y:S.y,type:"nw-resize"},{x:S.x+S.w,y:S.y,type:"ne-resize"},{x:S.x+S.w,y:S.y+S.h,type:"se-resize"},{x:S.x,y:S.y+S.h,type:"sw-resize"},{x:0,y:S.y-p,type:"rotate"}],R=Math.cos(k),E=Math.sin(k);return v.map(L=>({x:r.cx+(L.x*R-L.y*E),y:r.cy+(L.x*E+L.y*R),type:L.type,size:L.type==="rotate"?24:h}))},Qt=(e,t,r)=>{if(!r)return null;const n=dt.current;if(!n)return null;const h=n.getContext("2d"),p=fe(h,r);for(const k of p){const S=e-k.x,v=t-k.y;if(Math.sqrt(S*S+v*v)<=k.size/2)return k.type}return null},kt=y.useCallback(()=>{if(H>0){const e=V[H-1];u(e.elements),C(e.selectedElement),P(H-1)}},[V,H]),mt=y.useCallback(()=>{if(H<V.length-1){const e=V[H+1];u(e.elements),C(e.selectedElement),P(H+1)}},[V,H]),xt=e=>M?Math.round(e/Tt)*Tt:e;y.useEffect(()=>{if(N!=null&&N.sectionImage){wt.current=null,ut.current=null;const e=dt.current;if(e&&e.getContext("2d").clearRect(0,0,W,U),f&&!ht)return;const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{wt.current=t,Vt(t,Y)},t.onerror=()=>{console.error("Failed to load background image:",N.sectionImage),X()};let r=N.sectionImage;ht&&ht.sectionImage&&(N.sectionName==="Front"||ht.sections&&Object.keys(ht.sections).includes(N.sectionName))&&(r=ht.sectionImage),t.src=r}else wt.current=null,ut.current=null,X()},[N,Y,ht]),y.useEffect(()=>{const e=t=>{const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))){if((t.key==="Delete"||t.key==="Backspace")&&g&&!l){t.preventDefault();const h=g;u(p=>p.filter(k=>k.id!==h.id)),C(null),at()}if(t.ctrlKey||t.metaKey)switch(t.key){case"z":t.shiftKey?(t.preventDefault(),mt()):(t.preventDefault(),kt());break;case"y":t.preventDefault(),mt();break}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[g,l,kt,mt,at]);const he=e=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},lt=()=>`element_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,ge=e=>{e.strokeStyle="#e0e0e0",e.lineWidth=1,e.setLineDash([1,1]);for(let t=0;t<=W;t+=Tt)e.beginPath(),e.moveTo(t,0),e.lineTo(t,U),e.stroke();for(let t=0;t<=U;t+=Tt)e.beginPath(),e.moveTo(0,t),e.lineTo(W,t),e.stroke();e.setLineDash([])},xe=(e,t)=>{e.save();const r=t.x+t.width/2,n=t.y+t.height/2;switch(e.translate(r,n),t.rotation&&e.rotate(t.rotation*Math.PI/180),e.translate(-t.width/2,-t.height/2),t.type){case"text":me(e,t);break;case"rectangle":pe(e,t);break;case"circle":we(e,t);break;case"triangle":be(e,t);break;case"star":ke(e,t);break;case"arrow":ve(e,t);break;case"diamond":Se(e,t);break;case"hexagon":Fe(e,t);break;case"pentagon":Ce(e,t);break;case"heart":Te(e,t);break;case"oval":je(e,t);break;case"roundedRectangle":Ne(e,t);break;case"image":Ae(e,t);break;case"qrcode":ue(e,t);break;case"barcode":ye(e,t);break;case"sticker":Re(e,t);break;case"horizontalLine":Ie(e,t);break;case"embroidery":Ee(e,t);break}e.restore()},ye=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageObject:r,imageLoading:!1}:h))},r.onerror=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageLoading:!1}:h))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading...",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading...",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No Barcode",t.width/2,t.height/2))},ue=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageObject:r,imageLoading:!1}:h))},r.onerror=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageLoading:!1}:h))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No QR Data",t.width/2,t.height/2))},me=(e,t)=>{e.save();let r=t.text||"Text";if(t.textTransform)switch(t.textTransform){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase();break;case"capitalize":r=r.replace(/\b\w/g,S=>S.toUpperCase());break}e.font=`${t.fontStyle||"normal"} ${t.fontWeight||"normal"} ${t.fontSize||20}px ${t.fontFamily||"Arial"}`,e.fillStyle=t.fill||"#000000",e.textAlign=t.textAlign||"left",e.textBaseline="top",t.opacity!==void 0&&(e.globalAlpha=t.opacity),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth);const n=r.split(`
|
|
991
|
-
`),h=(t.fontSize||20)*(t.lineHeight||1.2),p=Math.max(...n.map(S=>e.measureText(S).width)),k=n.length*h;if(t.backgroundColor&&t.backgroundColor!=="transparent"){e.fillStyle=t.backgroundColor;const S=t.backgroundPadding||4;e.fillRect(-S,-S,p+S*2,k+S*2),e.fillStyle=t.fill||"#000000"}n.forEach((S,v)=>{const R=v*h,E=e.measureText(S).width;t.stroke&&t.strokeWidth>0&&e.strokeText(S,0,R),e.fillText(S,0,R);const L=t.fontSize||20,tt=t.decorationColor||t.fill||"#000000",ft=Math.max(1,L/20);if(e.strokeStyle=tt,e.lineWidth=ft,t.textDecoration==="underline"||t.underline){const yt=R+L+2;e.beginPath(),e.moveTo(0,yt),e.lineTo(E,yt),e.stroke()}if(t.textDecoration==="overline"||t.overline){const yt=R-2;e.beginPath(),e.moveTo(0,yt),e.lineTo(E,yt),e.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const yt=R+L/2;e.beginPath(),e.moveTo(0,yt),e.lineTo(E,yt),e.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(Qe=>{switch(Qe.trim()){case"underline":const Zt=R+L+2;e.beginPath(),e.moveTo(0,Zt),e.lineTo(E,Zt),e.stroke();break;case"overline":const te=R-2;e.beginPath(),e.moveTo(0,te),e.lineTo(E,te),e.stroke();break;case"line-through":const ee=R+L/2;e.beginPath(),e.moveTo(0,ee),e.lineTo(E,ee),e.stroke();break}})}),e.restore()},pe=(e,t)=>{t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fillRect(0,0,t.width,t.height)),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.strokeRect(0,0,t.width,t.height))},we=(e,t)=>{const r=Math.min(t.width,t.height)/2,n=t.width/2,h=t.height/2;e.beginPath(),e.arc(n,h,r,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},be=(e,t)=>{const r=t.width/2;t.height/2,e.beginPath(),e.moveTo(r,0),e.lineTo(0,t.height),e.lineTo(t.width,t.height),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ke=(e,t)=>{const r=t.width/2,n=t.height/2,h=Math.min(t.width,t.height)/2,p=h*.4,k=t.numPoints||5;e.beginPath();for(let S=0;S<k*2;S++){const v=S%2===0?h:p,R=S*Math.PI/k,E=r+Math.cos(R)*v,L=n+Math.sin(R)*v;S===0?e.moveTo(E,L):e.lineTo(E,L)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ve=(e,t)=>{const r=t.width,n=t.height,h=r*.3;e.beginPath(),e.moveTo(r/2,0),e.lineTo(r,n*.6),e.lineTo(r-h,n*.6),e.lineTo(r-h,n),e.lineTo(h,n),e.lineTo(h,n*.6),e.lineTo(0,n*.6),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Se=(e,t)=>{const r=t.width/2,n=t.height/2;e.beginPath(),e.moveTo(r,0),e.lineTo(t.width,n),e.lineTo(r,t.height),e.lineTo(0,n),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Fe=(e,t)=>{const r=t.width/2,n=t.height/2,h=Math.min(t.width,t.height)/2,p=6;e.beginPath();for(let k=0;k<p;k++){const S=k*2*Math.PI/p-Math.PI/2,v=r+h*Math.cos(S),R=n+h*Math.sin(S);k===0?e.moveTo(v,R):e.lineTo(v,R)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ce=(e,t)=>{const r=t.width/2,n=t.height/2,h=Math.min(t.width,t.height)/2,p=5;e.beginPath();for(let k=0;k<p;k++){const S=k*2*Math.PI/p-Math.PI/2,v=r+h*Math.cos(S),R=n+h*Math.sin(S);k===0?e.moveTo(v,R):e.lineTo(v,R)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Te=(e,t)=>{const r=t.width,n=t.height,h=0,p=0;e.beginPath();const k=n*.3;e.moveTo(h+r/2,p+k),e.bezierCurveTo(h+r/2,p,h,p,h,p+k),e.bezierCurveTo(h,p+(n+k)/2,h+r/2,p+(n+k)/2,h+r/2,p+n),e.bezierCurveTo(h+r/2,p+(n+k)/2,h+r,p+(n+k)/2,h+r,p+k),e.bezierCurveTo(h+r,p,h+r/2,p,h+r/2,p+k),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},je=(e,t)=>{const r=t.width/2,n=t.height/2,h=t.width/2,p=t.height/2;e.beginPath(),e.ellipse(r,n,h,p,0,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ne=(e,t)=>{const r=Math.min(t.width,t.height)*.1;jt(e,0,0,t.width,t.height,r),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ie=(e,t)=>{e.save(),t.opacity!==void 0&&(e.globalAlpha=t.opacity),e.strokeStyle=t.stroke||t.fill||"#000000",e.lineWidth=t.strokeWidth||t.height||2,e.lineCap="round",e.beginPath(),e.moveTo(0,t.height/2),e.lineTo(t.width,t.height/2),e.stroke(),e.restore()},Ae=(e,t)=>{const r=t.src||t.imageData;if(r)try{if(r instanceof HTMLImageElement){if(r.complete&&r.naturalWidth>0&&r.naturalHeight>0){e.drawImage(r,0,0,t.width,t.height);return}}else if(typeof r=="string"&&r.length>0){if(t._imageElement||(t._imageElement=new Image,t._imageElement.crossOrigin="anonymous",t._imageElement.onload=()=>{X()},t._imageElement.onerror=()=>{console.error("Failed to load image:",r),t._imageLoadError=!0,X()},t._imageElement.src=r),t._imageElement.complete&&t._imageElement.naturalWidth>0&&t._imageElement.naturalHeight>0){e.drawImage(t._imageElement,0,0,t.width,t.height);return}if(t._imageLoadError){e.fillStyle="#ffebee",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#f44336",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#f44336",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Error loading image",t.width/2,t.height/2);return}}e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.lineWidth=1,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading...",t.width/2,t.height/2)}catch(n){console.error("Error drawing image:",n),e.fillStyle="#ffebee",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#f44336",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#f44336",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Error loading image",t.width/2,t.height/2)}else e.fillStyle="#f8f8f8",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ddd",e.lineWidth=1,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#999",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No Image",t.width/2,t.height/2)},Re=(e,t)=>{const r=t.src;if(r)try{if(r instanceof HTMLImageElement){if(r.complete&&r.naturalWidth>0&&r.naturalHeight>0){e.drawImage(r,0,0,t.width,t.height);return}}else if(typeof r=="string"&&r.length>0){if(t._stickerElement||(t._stickerElement=new Image,t._stickerElement.crossOrigin="anonymous",t._stickerElement.onload=()=>{X()},t._stickerElement.onerror=()=>{console.error("Failed to load sticker:",r),t._stickerLoadError=!0,X()},t._stickerElement.src=r),t._stickerElement.complete&&t._stickerElement.naturalWidth>0&&t._stickerElement.naturalHeight>0){e.drawImage(t._stickerElement,0,0,t.width,t.height);return}if(t._stickerLoadError){Nt(e,t,"Failed to load",!0);return}}Nt(e,t,"Loading...")}catch(n){console.error("Error drawing sticker:",n),Nt(e,t,"Error",!0)}else Nt(e,t,"No Sticker")},Nt=(e,t,r,n=!1)=>{e.fillStyle=n?"#ffebee":"#f8f9fa",e.fillRect(0,0,t.width,t.height),e.strokeStyle=n?"#f44336":"#dee2e6",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle=n?"#f44336":"#6c757d",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText(r,t.width/2,t.height/2)},Ee=(e,t)=>{if(t.imageObject&&t.imageObject.complete&&t.imageObject.naturalHeight!==0)try{e.drawImage(t.imageObject,0,0,t.width,t.height)}catch(r){console.error("Error drawing embroidery image:",r),vt(e,t,"Error loading image")}else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{r.complete&&r.naturalHeight!==0?(t.imageObject=r,t.imageLoading=!1,X()):(t.imageLoading=!1,console.error("Image loaded but is invalid:",t.src))},r.onerror=()=>{t.imageLoading=!1,console.error("Failed to load embroidery image:",t.src),vt(e,t,"Failed to load")},r.src=t.src,vt(e,t,"Loading...")}else t.imageLoading?vt(e,t,"Loading..."):vt(e,t)},vt=(e,t,r="Embroidery")=>{e.fillStyle="#f9f9f9",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ddd",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#999",e.font="24px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("๐งต",t.width/2,t.height/2-10),e.fillStyle="#666",e.font="12px Arial",e.fillText(r,t.width/2,t.height/2+15)},$t=(e,t,r)=>{if(!r)return!1;const n=r.x+r.width/2,h=r.y+r.height/2,p=e-n,k=t-h,S=-(r.rotation||0)*Math.PI/180,v=Math.cos(S),R=Math.sin(S),E=p*v-k*R,L=p*R+k*v,tt=r.width/2,ft=r.height/2;return E>=-tt&&E<=tt&&L>=-ft&&L<=ft},De=y.useCallback(()=>{(T||I||b)&&at(),w(!1),j(!1),z(!1),B(null);const e=dt.current;e&&(e.style.cursor="default")},[T,I,b,at]);y.useEffect(()=>{const e=t=>{if(l)return;const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))&&((t.ctrlKey||t.metaKey)&&(t.key==="z"&&!t.shiftKey?(t.preventDefault(),kt()):(t.key==="z"&&t.shiftKey||t.key==="y")&&(t.preventDefault(),mt())),(t.key==="Delete"||t.key==="Backspace")&&g&&(Bt(g.id),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="d"&&g&&(Gt(g.id),t.preventDefault()),g&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))){t.preventDefault();const h=t.shiftKey?10:1;let p={};switch(t.key){case"ArrowUp":p.y=g.y-h;break;case"ArrowDown":p.y=g.y+h;break;case"ArrowLeft":p.x=g.x-h;break;case"ArrowRight":p.x=g.x+h;break}Ht(g.id,p),at()}};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[g,kt,mt,l]);const Be=(e,t={})=>{const r={id:lt(),type:e,x:50,y:50,width:100,height:100,fill:"#000000",stroke:"#000000",strokeWidth:0,rotation:0,...t};switch(e){case"text":r.id=lt(),r.text=t.text||"New Text",r.fontSize=t.fontSize||20,r.fontFamily=t.fontFamily||"Arial",r.fontWeight=t.fontWeight||"normal",r.fontStyle=t.fontStyle||"normal",r.textAlign=t.textAlign||"left",r.width=150,r.height=50;break;case"icon":r.id=lt(),r.text=t.text||"๐ฏ",r.fontSize=t.fontSize||48,r.fontFamily=t.fontFamily||"Arial",r.fontWeight=t.fontWeight||"normal",r.fontStyle=t.fontStyle||"normal",r.textAlign="center",r.width=80,r.height=80,r.iconData=t.iconData||null,r.type="text",r.isIcon=!0;break;case"image":r.id=lt(),r.imageData=t.imageData||null,r.width=t.width||200,r.height=t.height||200;break;case"qrcode":r.id=lt(),r.type="qrcode",r.x=(t==null?void 0:t.x)||W/2-((t==null?void 0:t.width)||100)/2,r.y=(t==null?void 0:t.y)||U/2-((t==null?void 0:t.height)||100)/2,r.width=(t==null?void 0:t.width)||100,r.height=(t==null?void 0:t.height)||100,r.src=(t==null?void 0:t.src)||"",r.data=(t==null?void 0:t.data)||"",r.rotation=0,r.opacity=1;break;case"barcode":r.id=lt(),r.type="barcode",r.x=(t==null?void 0:t.x)||W/2-((t==null?void 0:t.width)||200)/2,r.y=(t==null?void 0:t.y)||U/2-((t==null?void 0:t.height)||100)/2,r.width=(t==null?void 0:t.width)||200,r.height=(t==null?void 0:t.height)||100,r.src=(t==null?void 0:t.src)||"",r.data=(t==null?void 0:t.data)||"",r.format=(t==null?void 0:t.format)||"CODE128",r.rotation=0,r.opacity=1,r.imageObject=(t==null?void 0:t.imageObject)||null;break;case"sticker":r.id=lt(),r.type="sticker",r.imageData=(t==null?void 0:t.imageData)||null,r.width=t.width||200,r.height=t.height||200;break;case"horizontalLine":r.id=lt(),r.type="horizontalLine",r.x=W/2-100,r.y=U/2-1,r.width=200,r.height=2,r.fill="#000000",r.stroke="#000000",r.strokeWidth=2,r.rotation=0,r.opacity=1;break;case"embroidery":r.id=lt(),r.type="embroidery",r.imageData=(t==null?void 0:t.imageData)||null,r.width=t.width||200,r.height=t.height||200;break;case"rectangle":case"circle":case"triangle":case"star":case"arrow":case"diamond":case"hexagon":case"pentagon":case"heart":case"oval":case"roundedRectangle":break;default:console.warn(`Unknown element type: ${e}`);return}u(n=>[...n,r]),C(r),at()},Ht=(e,t)=>{u(r=>r.map(n=>n.id===e?{...n,...t}:n)),g&&g.id===e&&C(r=>({...r,...t}))},Bt=y.useCallback(()=>{g&&(u(e=>e.filter(t=>t.id!==g.id)),C(null),at())},[g,at]),Gt=e=>{const t=c.find(r=>r.id===e);if(t){const r={...t,id:lt(),x:t.x+20,y:t.y+20};u(n=>[...n,r]),C(r),at()}},_t=(e,t)=>{const r=c.findIndex(p=>p.id===e);if(r===-1)return;const n=[...c],h=n[r];t==="up"&&r<n.length-1?(n[r]=n[r+1],n[r+1]=h):t==="down"&&r>0?(n[r]=n[r-1],n[r-1]=h):t==="top"?(n.splice(r,1),n.push(h)):t==="bottom"&&(n.splice(r,1),n.unshift(h)),u(n),at()};y.useCallback(()=>{N&&Z(e=>({...e,[N.sectionName]:{elements:[...c],selectedColor:Y}}))},[N,c,Y]);const[,ze]=y.useReducer(e=>e+1,0);setTimeout(()=>{ze()},20);const We=y.useCallback(()=>{N&&Z(e=>({...e,[N.sectionName]:{elements:[...c],selectedColor:Y}}))},[N,c,Y]);y.useImperativeHandle(o,()=>({handleSectionChange:Yt,flushCurrentSectionDesign:We,exportPrintReady:async(e="png")=>await Dt(e,!1),exportFullDesign:async(e="png")=>await Dt(e,!0),exportDesign:Dt,getCanvasData:()=>bt(),exportAllDesignsAsJSON:async(e="png")=>{try{const t=bt(),r=(N==null?void 0:N.sectionName)||"main",n={elements:t.elements,selectedColor:t.selectedColor,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight},h={...t.sectionDesigns||{},[r]:n},p=s.sections&&s.sections.length>0?s.sections:[{id:r,sectionName:r,image:N==null?void 0:N.sectionImage,sectionImage:N==null?void 0:N.sectionImage}];return await Rt.current.exportAllSectionsAsJSON(h,p,W,U,e,ht)}catch(t){throw console.error("Export as JSON failed:",t),t}},exportCurrentSectionAsJSON:async(e="png")=>{try{const t=bt();return await Rt.current.exportCurrentSectionAsJSON(t,e,ht)}catch(t){throw console.error("Export current section as JSON failed:",t),t}}}));const gt=y.useRef(null),zt=y.useRef(!1),X=y.useCallback(()=>{const e=dt.current;if(!e||zt.current)return;zt.current=!0;const t=e.getContext("2d");t.clearRect(0,0,W,U),ut.current&&t.drawImage(ut.current,0,0,W,U),J&&ge(t),c.forEach(r=>{t.save(),t.globalAlpha=r.opacity||1,xe(t,r),t.restore()}),g&&de(t,g),zt.current=!1},[c,g,W,U,J]),pt=y.useCallback(()=>{gt.current&&cancelAnimationFrame(gt.current),gt.current=requestAnimationFrame(()=>{X(),gt.current=null})},[X]);y.useEffect(()=>{pt()},[c,g,W,U,J,pt]),y.useEffect(()=>{ut.current&&pt()},[ut.current,pt]),y.useEffect(()=>()=>{gt.current&&cancelAnimationFrame(gt.current)},[]);const Wt=y.useCallback(()=>{X(),(T||I||b)&&(gt.current=requestAnimationFrame(Wt))},[X,T,I,b]);y.useEffect(()=>{T||I||b?Wt():(gt.current&&(cancelAnimationFrame(gt.current),gt.current=null),pt())},[T,I,b,Wt,pt]);const Me=y.useCallback(e=>{if(l)return;const r=dt.current.getBoundingClientRect(),n=(e.clientX-r.left)/q,h=(e.clientY-r.top)/q;if(F({x:n,y:h}),g){const k=Qt(n,h,g);if(k){if(k==="rotate"){z(!0);const S=g.x+g.width/2,v=g.y+g.height/2,R=Math.atan2(h-v,n-S)*180/Math.PI;F({x:n,y:h,initialAngle:R,initialRotation:g.rotation||0})}else j(!0),B(k),F({x:n,y:h,initialWidth:g.width,initialHeight:g.height,initialX:g.x,initialY:g.y});return}}let p=null;for(let k=c.length-1;k>=0;k--)if($t(n,h,c[k])){p=c[k];break}p?(C(p),w(!0),F({x:n,y:h,offsetX:n-p.x,offsetY:h-p.y})):C(null),X()},[l,q,g,c,X]),Le=y.useCallback(e=>{if(l)return;const t=dt.current,r=t.getBoundingClientRect(),n=(e.clientX-r.left)/q,h=(e.clientY-r.top)/q;if(g&&!T&&!I&&!b){const p=Qt(n,h,g);p?p==="rotate"?t.style.cursor="grab":t.style.cursor=p:$t(n,h,g)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=T?"grabbing":"default";if(b&&g){const p=g.x+g.width/2,k=g.y+g.height/2,v=Math.atan2(h-k,n-p)*180/Math.PI-D.initialAngle;let R=D.initialRotation+v;e.shiftKey&&(R=Math.round(R/15)*15),R=(R%360+360)%360,u(E=>E.map(L=>L.id===g.id?{...L,rotation:R}:L)),C(E=>({...E,rotation:R})),X();return}if(I&&g&&$){const p=n-D.x,k=h-D.y;let S=D.initialWidth,v=D.initialHeight,R=D.initialX,E=D.initialY;switch($){case"se-resize":S=Math.max(20,D.initialWidth+p),v=Math.max(20,D.initialHeight+k);break;case"sw-resize":S=Math.max(20,D.initialWidth-p),v=Math.max(20,D.initialHeight+k),R=D.initialX+(D.initialWidth-S);break;case"ne-resize":S=Math.max(20,D.initialWidth+p),v=Math.max(20,D.initialHeight-k),E=D.initialY+(D.initialHeight-v);break;case"nw-resize":S=Math.max(20,D.initialWidth-p),v=Math.max(20,D.initialHeight-k),R=D.initialX+(D.initialWidth-S),E=D.initialY+(D.initialHeight-v);break}if(e.shiftKey&&g.type!=="text"){const tt=D.initialWidth/D.initialHeight;$.includes("e"),v=S/tt,$.includes("n")&&(E=D.initialY+(D.initialHeight-v))}M&&(R=xt(R),E=xt(E),S=xt(S),v=xt(v));const L={...g,x:R,y:E,width:S,height:v};u(tt=>tt.map(ft=>ft.id===g.id?L:ft)),C(L),X();return}if(T&&g){let p=n-D.offsetX,k=h-D.offsetY;M&&(p=xt(p),k=xt(k)),p=Math.max(0,Math.min(W-g.width,p)),k=Math.max(0,Math.min(U-g.height,k));const S={...g,x:p,y:k};u(v=>v.map(R=>R.id===g.id?S:R)),C(S),X()}},[l,q,g,T,I,b,$,D,M,W,U,c,X]),Yt=y.useCallback(e=>{N&&Z(r=>({...r,[N.sectionName]:{elements:c.map(n=>n.type==="image"?{...n,imageData:n.imageData,src:n.src}:n),selectedColor:Y}}));const t=_[e.sectionName];if(t){const r=t.elements.map(n=>{if(n.type==="image"&&n.src&&!n.imageData){const h=new Image;return h.onload=()=>{u(p=>p.map(k=>k.id===n.id?{...k,imageData:h}:k)),X()},h.src=n.src,{...n,imageData:h}}return n});u(r),O(t.selectedColor||Y)}else u([]);m(e),C(null)},[N,c,Y,_,X]),Pe=y.useCallback(e=>{if(e&&e.type.startsWith("image/")){const t=new FileReader;t.onload=r=>{const n=new Image;n.onload=()=>{const h={id:lt(),type:"image",x:xt(W/2-100),y:xt(U/2-100),width:Math.min(n.width,200),height:Math.min(n.height,200),rotation:0,imageData:n,src:r.target.result,originalWidth:n.width,originalHeight:n.height},p=n.width/n.height;h.width/h.height!==p&&(h.width/p<=200?h.height=h.width/p:h.width=h.height*p),u(k=>[...k,h]),C(h),at()},n.onerror=()=>{console.error("Failed to load uploaded image"),alert("Failed to load the uploaded image. Please try again.")},n.src=r.target.result},t.onerror=()=>{console.error("Failed to read file"),alert("Failed to read the file. Please try again.")},t.readAsDataURL(e)}else alert("Please select a valid image file.")},[W,U,xt,lt,at]),qt=y.useCallback(Ue(()=>{X()},16),[X]);y.useEffect(()=>{Et.current||qt()},[c,g,J,qt]);function Ue(e,t){let r;return function(...h){const p=()=>{clearTimeout(r),e(...h)};clearTimeout(r),r=setTimeout(p,t)}}y.useEffect(()=>{wt.current&&Vt(wt.current,Y)},[Y]),y.useEffect(()=>{X()},[X]);const Oe=(e,t,r)=>(.2126*e+.7152*t+.0722*r)/255,Vt=y.useCallback((e,t)=>{const r=Lt.current,n=r.getContext("2d");r.width=W,r.height=U,n.clearRect(0,0,W,U),n.drawImage(e,0,0,W,U);const h=n.getImageData(0,0,W,U),p=h.data,k=he(t);if(!k){Et.current=!1;return}const{r:S,g:v,b:R}=k;for(let L=0;L<p.length;L+=4){if(p[L+3]===0)continue;const ft=Oe(p[L],p[L+1],p[L+2]);p[L]=Math.round(S*ft),p[L+1]=Math.round(v*ft),p[L+2]=Math.round(R*ft)}n.putImageData(h,0,0);const E=new Image;E.onload=()=>{ut.current=s.plainColor==="Y"?E:e,Et.current=!1,X()},E.src=r.toDataURL("image/png")},[W,U,X]),Xt=e=>{if(!K)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),r=document.querySelector(".ruler-vertical");if(!t||!r)return{horizontal:[],vertical:[]};const n=t.getBoundingClientRect(),h=r.getBoundingClientRect(),p=n.width,k=h.height,S=50,v=[],R=[];for(let E=S;E<=p;E+=S)E<=p-20&&v.push({position:E,value:Math.round(E/e)});for(let E=S;E<=k;E+=S)E<=k-15&&R.push({position:E,value:Math.round(E/e)});return{horizontal:v,vertical:R}},[Jt,Kt]=y.useState({horizontal:[],vertical:[]});return y.useEffect(()=>{const e=()=>{setTimeout(()=>{const n=Xt(q);Kt(n)},50)};e();let t;const r=()=>{clearTimeout(t),t=setTimeout(e,150)};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),clearTimeout(t)}},[q,K]),y.useEffect(()=>{if(K&&!A){const e=setTimeout(()=>{const t=Xt(q);Kt(t)},100);return()=>clearTimeout(e)}},[K,A,q]),i.jsxs("div",{className:"pure-canvas-designer",children:[i.jsx("div",{className:"designer-header",children:i.jsx(oi,{onAddElement:Be,onDeleteElement:()=>g&&Bt(g.id),onDuplicateElement:()=>g&&Gt(g.id),onUndo:kt,onRedo:mt,onToggleGrid:()=>rt(!J),onToggleRulers:()=>et(!K),onToggleSnap:()=>G(!M),onImageUpload:Pe,canUndo:H>0,canRedo:H<V.length-1,showGrid:J,showRulers:K,snapToGrid:M,selectedElement:g,theme:a,readOnly:l,apiKey:d.apiKey,apiEndpoint:d.apiEndpoint})}),i.jsxs("div",{className:"designer-content",children:[K&&!A&&i.jsxs("div",{className:"rulers",children:[i.jsx("div",{className:"ruler-horizontal",children:i.jsx("div",{className:"ruler-horizontal-numbers",children:Jt.horizontal.map((e,t)=>i.jsx("span",{className:"ruler-number horizontal",style:{left:`${e.position}px`},children:e.value},t))})}),i.jsx("div",{className:"ruler-vertical",children:i.jsx("div",{className:"ruler-vertical-numbers",children:Jt.vertical.map((e,t)=>i.jsx("span",{className:"ruler-number vertical",style:{top:`${e.position}px`},children:e.value},t))})})]}),i.jsx("div",{className:"canvas-container",ref:At,children:i.jsx("canvas",{ref:dt,width:W,height:U,onMouseDown:Me,onMouseMove:Le,onMouseUp:De,style:{border:"1px solid #e2e8f0",cursor:T?"grabbing":"default",transform:`scale(${q})`,transformOrigin:"top left"}})}),i.jsxs("div",{className:"side-panels",children:[i.jsx(ri,{selectedElement:g,onUpdate:Ht,onMoveLayer:_t,availableFonts:ce,theme:a}),i.jsx(ai,{elements:c,selectedElement:g,onSelectElement:C,onMoveLayer:_t,onDeleteElement:Bt,theme:a})]})]}),i.jsxs("div",{className:"designer-footer",children:[i.jsxs("div",{className:"section-thumbnails",children:[i.jsxs("label",{className:"section-thumbnails-label",children:["Available sections for : ",i.jsx("u",{children:s.name})]}),i.jsx("div",{className:"thumbnails-container",children:s.sections.map(e=>{const t=_[e.sectionName]&&_[e.sectionName].elements&&_[e.sectionName].elements.length>0;return i.jsxs("div",{className:`section-thumbnail compact ${N.sectionName===e.sectionName?"active":""}`,onClick:r=>{r.stopPropagation();const n=s.sections.find(h=>h.sectionName===e.sectionName);Yt(n)},title:e.sectionName,children:[i.jsxs("div",{className:"thumbnail-image-container compact",children:[i.jsx("img",{src:e.sectionImage,alt:e.sectionName,className:"thumbnail-image compact",onError:r=>{r.target.style.display="none",r.target.nextSibling.style.display="flex"}}),i.jsx("div",{className:"thumbnail-placeholder compact",style:{display:"none"},children:i.jsx("span",{className:"placeholder-icon",children:"๐"})}),t&&i.jsx("div",{className:"content-indicator compact",children:i.jsx("svg",{className:"checkmark compact",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:i.jsx("path",{d:"M20 6L9 17l-5-5"})})})]}),i.jsx("span",{className:"thumbnail-label compact",children:e.sectionName})]},e.sectionName)})})]}),i.jsxs("div",{className:"color-palette-enhanced compact",children:[i.jsx("label",{className:"color-palette-label",children:"Supported colors:"}),i.jsxs("div",{className:"color-swatches-container",children:[s.colorSettings.slice(0,3).map((e,t)=>i.jsxs("div",{className:`color-swatch-enhanced compact ${Y===e?"active":""}`,onClick:r=>{r.stopPropagation(),O(e)},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner compact",style:{backgroundColor:e}}),Y===e&&i.jsx("div",{className:"color-selection-ring compact"})]},e)),s.colorSettings.length>3&&i.jsxs("div",{className:"color-dropdown-container",children:[i.jsx("button",{className:"color-more-button",onClick:e=>{e.stopPropagation();const t=e.currentTarget.nextElementSibling;t.style.display=t.style.display==="block"?"none":"block"},title:"More colors",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"12",cy:"12",r:"3"}),i.jsx("circle",{cx:"12",cy:"5",r:"3"}),i.jsx("circle",{cx:"12",cy:"19",r:"3"})]})}),i.jsx("div",{className:"color-dropdown-menu",style:{display:"none"},children:s.colorSettings.slice(3).map((e,t)=>i.jsxs("div",{className:`color-swatch-dropdown ${Y===e?"active":""}`,onClick:r=>{r.stopPropagation(),O(e),r.currentTarget.parentElement.style.display="none"},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner-dropdown",style:{backgroundColor:e}}),i.jsx("span",{className:"color-hex",children:e.toUpperCase()})]},e))})]})]})]}),i.jsxs("div",{className:"zoom-controls-enhanced compact",children:[i.jsx("label",{className:"zoom-label",children:"Zoom:"}),i.jsxs("div",{className:"zoom-buttons-container compact",children:[i.jsx("button",{className:"zoom-button compact zoom-out",onClick:()=>it(Math.max(.25,q-.25)),disabled:q<=.25,title:"Zoom Out",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsxs("div",{className:"zoom-display compact",children:[i.jsxs("span",{className:"zoom-percentage compact",children:[Math.round(q*100),"%"]}),i.jsx("div",{className:"zoom-slider-container compact",children:i.jsx("input",{type:"range",min:"0.25",max:"4",step:"0.25",value:q,onChange:e=>it(parseFloat(e.target.value)),className:"zoom-slider compact"})})]}),i.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>it(Math.min(4,q+.25)),disabled:q>=4,title:"Zoom In",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"11",y1:"8",x2:"11",y2:"14"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsx("button",{className:"zoom-reset compact",onClick:()=>it(1),title:"Reset Zoom (100%)",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("path",{d:"M3 3l18 18"}),i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"})]})})]})]})]})]})});ne.displayName="Mypixia";module.exports=ne;
|
|
989
|
+
`)}`,category:"Geometric",description:"Complex mandala flower pattern"}],ei=({isOpen:d,onClose:o,onAddEmbroidery:a,theme:l,apiKey:s,apiEndpoint:f})=>{const[x,c]=y.useState([]),[u,g]=y.useState(!1),[C,T]=y.useState(null),[w,I]=y.useState(""),[j,b]=y.useState("All"),B=y.useRef(null),D=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{d&&c(ti)},[d]);const F=z=>{a({type:"embroidery",src:z.url,name:z.name,description:z.description,category:z.category,width:120,height:120,x:100,y:100}),o()},$=x.filter(z=>{const W=!w||z.name.toLowerCase().includes(w.toLowerCase())||z.description.toLowerCase().includes(w.toLowerCase()),ot=j==="All"||z.category===j;return W&&ot});return d?i.jsx("div",{className:"embroidery-modal-overlay",onClick:o,children:i.jsxs("div",{className:"embroidery-modal-content",onClick:z=>z.stopPropagation(),ref:B,children:[i.jsxs("div",{className:"embroidery-modal-header",children:[i.jsx("h3",{children:"Choose an Embroidery Design"}),i.jsx("button",{className:"embroidery-modal-close",onClick:o,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"embroidery-modal-controls",children:[i.jsx("div",{className:"search-container",children:i.jsx("input",{type:"text",placeholder:"Search embroidery designs...",value:w,onChange:z=>I(z.target.value),className:"embroidery-search"})}),i.jsxs("div",{className:"category-filter",children:[i.jsx("label",{children:"Category:"}),i.jsx("select",{value:j,onChange:z=>b(z.target.value),className:"category-select",children:D.map(z=>i.jsx("option",{value:z,children:z},z))})]})]}),i.jsxs("div",{className:"embroidery-modal-body",children:[u&&i.jsxs("div",{className:"embroidery-loading",children:[i.jsx("div",{className:"loading-spinner"}),i.jsx("p",{children:"Loading embroidery designs..."})]}),C&&i.jsx("div",{className:"embroidery-error",children:i.jsx("p",{children:C})}),!u&&!C&&i.jsx("div",{className:"embroidery-grid",children:$.map(z=>i.jsxs("div",{className:"embroidery-item",onClick:()=>F(z),title:z.description,children:[i.jsx("div",{className:"embroidery-preview",children:i.jsx("img",{src:z.url,alt:z.name,loading:"lazy",onError:W=>{console.error("Failed to load embroidery image:",z.url),W.target.style.display="none"}})}),i.jsxs("div",{className:"embroidery-info",children:[i.jsx("div",{className:"embroidery-name",children:z.name}),i.jsx("div",{className:"embroidery-category",children:z.category})]})]},z.id))}),!u&&!C&&$.length===0&&i.jsx("div",{className:"no-embroideries",children:i.jsx("p",{children:"No embroidery designs found matching your search."})})]}),i.jsx("div",{className:"embroidery-modal-footer",children:i.jsxs("div",{className:"embroidery-disclaimer",children:[i.jsx("span",{className:"disclaimer-icon",children:"โน๏ธ"}),i.jsx("span",{children:"Sample embroidery designs for preview. Actual embroidered results may vary based on fabric and thread."})]})})]})}):null},Ct=[{id:1,text:"DREAM BIG",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF6B35",hasBackground:!0,backgroundColor:"#1A1A1A",textAlign:"center",textTransform:"uppercase"},{id:2,text:"Never Give Up",category:"Motivational",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#2E8B57",fontStyle:"italic",textAlign:"center"},{id:3,text:"BE YOURSELF",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#FF1493",textTransform:"uppercase",letterSpacing:2},{id:4,text:"Stay Strong",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#4169E1",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:5,text:"RISE & SHINE",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000",textAlign:"center"},{id:6,text:"Believe in Magic",category:"Motivational",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB",textAlign:"center"},{id:7,text:"UNSTOPPABLE",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",textTransform:"uppercase",letterSpacing:1.5},{id:8,text:"Chase Your Dreams",category:"Motivational",fontSize:24,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:9,text:"FEARLESS",category:"Motivational",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:10,text:"Make It Happen",category:"Motivational",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:11,text:"BORN TO WIN",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#FFD700",hasBackground:!0,backgroundColor:"#800080",textAlign:"center"},{id:12,text:"Positive Vibes Only",category:"Motivational",fontSize:20,fontFamily:"Comic Sans MS",fill:"#FF69B4",fontWeight:"600"},{id:13,text:"LIMITLESS",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#1E90FF",textTransform:"uppercase",letterSpacing:3},{id:14,text:"Embrace The Journey",category:"Motivational",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B4513"},{id:15,text:"STRENGTH WITHIN",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#696969",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:16,text:"Create Your Own Sunshine",category:"Motivational",fontSize:18,fontFamily:"Palatino",fill:"#FF8C00",fontWeight:"600"},{id:17,text:"WARRIOR SPIRIT",category:"Motivational",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:18,text:"Keep Going",category:"Motivational",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:19,text:"FOCUS & WIN",category:"Motivational",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082",hasBackground:!0,backgroundColor:"#FFFF00"},{id:20,text:"Inspire Others",category:"Motivational",fontSize:26,fontFamily:"Georgia",fill:"#CD853F",fontStyle:"italic"},{id:21,text:"GAME CHANGER",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:22,text:"Live With Purpose",category:"Motivational",fontSize:22,fontFamily:"Palatino",fill:"#2F4F4F",fontWeight:"600"},{id:23,text:"BREAKTHROUGH",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",letterSpacing:2},{id:24,text:"Shine Bright",category:"Motivational",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FFD700",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:25,text:"NEVER SETTLE",category:"Motivational",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasBackground:!0,backgroundColor:"#000080"},{id:26,text:"CEO MINDSET",category:"Business",fontSize:28,fontFamily:"Arial",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:27,text:"Innovation Starts Here",category:"Business",fontSize:20,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"600"},{id:28,text:"PROFESSIONAL",category:"Business",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#000080",letterSpacing:1},{id:29,text:"Excellence Every Day",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#8B0000",fontWeight:"600"},{id:30,text:"LEADERSHIP",category:"Business",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",textAlign:"center"},{id:31,text:"Think Different",category:"Business",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#696969"},{id:32,text:"RESULTS DRIVEN",category:"Business",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:33,text:"Strategic Vision",category:"Business",fontSize:22,fontFamily:"Georgia",fill:"#2E8B57",fontWeight:"700"},{id:34,text:"PRODUCTIVITY",category:"Business",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:35,text:"Success Mindset",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#FF8C00",fontWeight:"600"},{id:36,text:"EXPERT LEVEL",category:"Business",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:37,text:"Quality First",category:"Business",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:38,text:"INTEGRITY",category:"Business",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center"},{id:39,text:"Growth Focused",category:"Business",fontSize:20,fontFamily:"Palatino",fill:"#20B2AA",fontWeight:"600"},{id:40,text:"COLLABORATION",category:"Business",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#9370DB"},{id:41,text:"Performance Matters",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#B22222",fontWeight:"700"},{id:42,text:"ACCOUNTABILITY",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#8B4513",letterSpacing:1.5},{id:43,text:"Vision to Reality",category:"Business",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:44,text:"TRANSFORMATION",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:45,text:"Excellence Standard",category:"Business",fontSize:22,fontFamily:"Palatino",fill:"#2E8B57",fontWeight:"600"},{id:46,text:"EFFICIENCY",category:"Business",fontSize:30,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#000080"},{id:47,text:"Forward Thinking",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#CD853F",fontWeight:"700"},{id:48,text:"ACHIEVEMENT",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"bold",fill:"#B8860B",hasBackground:!0,backgroundColor:"#F5F5DC"},{id:49,text:"Strategic Excellence",category:"Business",fontSize:20,fontFamily:"Georgia",fill:"#696969",fontWeight:"600"},{id:50,text:"IMPACT MAKER",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#DC143C",textAlign:"center"},{id:51,text:"COFFEE FIRST",category:"Funny",fontSize:28,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#8B4513",hasBackground:!0,backgroundColor:"#F5DEB3"},{id:52,text:"I'm Not Lazy, I'm Energy Efficient",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF69B4",fontWeight:"600"},{id:53,text:"SARCASM LOADING...",category:"Funny",fontSize:24,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32",textAlign:"center"},{id:54,text:"Powered By Pizza",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:55,text:"CTRL + ALT + DELETE MONDAY",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:56,text:"Brain 404 Error",category:"Funny",fontSize:22,fontFamily:"Arial",fill:"#FF1493",fontWeight:"600"},{id:57,text:"WEEKEND WARRIOR",category:"Funny",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:58,text:"Adulting is Hard",category:"Funny",fontSize:24,fontFamily:"Comic Sans MS",fill:"#9370DB",fontWeight:"600"},{id:59,text:"PROCRASTINATION EXPERT",category:"Funny",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#FF4500"},{id:60,text:"Netflix & Chill Champion",category:"Funny",fontSize:18,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"600"},{id:61,text:"CHAOS COORDINATOR",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",textAlign:"center"},{id:62,text:"I Speak Fluent Sarcasm",category:"Funny",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57"},{id:63,text:"SLEEP IS FOR THE WEAK",category:"Funny",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#B22222"},{id:64,text:"Professional Overthinker",category:"Funny",fontSize:20,fontFamily:"Verdana",fill:"#4B0082",fontWeight:"600"},{id:65,text:"WIFI PASSWORD PLEASE",category:"Funny",fontSize:20,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32"},{id:66,text:"Certified Couch Potato",category:"Funny",fontSize:22,fontFamily:"Comic Sans MS",fill:"#FF8C00",fontWeight:"700"},{id:67,text:"SOCIAL DISTANCING CHAMPION",category:"Funny",fontSize:16,fontFamily:"Arial",fontWeight:"bold",fill:"#20B2AA"},{id:68,text:"Powered By Caffeine",category:"Funny",fontSize:24,fontFamily:"Impact",fill:"#8B4513",fontWeight:"bold"},{id:69,text:"EMERGENCY CHOCOLATE NEEDED",category:"Funny",fontSize:18,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#D2691E"},{id:70,text:"I'm Not Short, I'm Fun Size",category:"Funny",fontSize:20,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"600"},{id:71,text:"CTRL + Z MY LIFE",category:"Funny",fontSize:26,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:72,text:"Error 404: Motivation Not Found",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF4500",fontWeight:"600"},{id:73,text:"PROFESSIONAL WEIRDO",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:74,text:"Snack Attack Mode",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:75,text:"BATTERY LOW, NEED COFFEE",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#8B4513"},{id:76,text:"Love You Forever",category:"Love",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493",textAlign:"center"},{id:77,text:"SOULMATES",category:"Love",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFE4E1"},{id:78,text:"Better Together",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:79,text:"ENDLESS LOVE",category:"Love",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:80,text:"You Complete Me",category:"Love",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000"},{id:81,text:"FOREVER & ALWAYS",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF1493",letterSpacing:1},{id:82,text:"My Heart Belongs To You",category:"Love",fontSize:20,fontFamily:"Palatino",fill:"#DC143C",fontWeight:"600"},{id:83,text:"PURE LOVE",category:"Love",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:84,text:"Together Forever",category:"Love",fontSize:26,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"700",textAlign:"center"},{id:85,text:"MATCH MADE IN HEAVEN",category:"Love",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FF1493"},{id:86,text:"Love Story",category:"Love",fontSize:32,fontFamily:"Palatino",fontStyle:"italic",fill:"#B22222"},{id:87,text:"HEARTBEAT",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFF0F5"},{id:88,text:"You Are My Sunshine",category:"Love",fontSize:22,fontFamily:"Georgia",fill:"#FF8C00",fontWeight:"600"},{id:89,text:"DESTINY",category:"Love",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#8B0000",textAlign:"center"},{id:90,text:"True Love Waits",category:"Love",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493"},{id:91,text:"BELOVED",category:"Love",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#B22222",letterSpacing:2},{id:92,text:"Love Conquers All",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"700"},{id:93,text:"PERFECT MATCH",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#000000"},{id:94,text:"Always & Forever",category:"Love",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"},{id:95,text:"ROMANCE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493"},{id:96,text:"Love Never Fails",category:"Love",fontSize:24,fontFamily:"Palatino",fill:"#B22222",fontWeight:"600"},{id:97,text:"ETERNAL LOVE",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",letterSpacing:1.5},{id:98,text:"Heart & Soul",category:"Love",fontSize:30,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"bold"},{id:99,text:"PASSIONATE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:100,text:"Love Is Everything",category:"Love",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"700"},{id:101,text:"NO PAIN NO GAIN",category:"Sports",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:102,text:"Train Hard",category:"Sports",fontSize:32,fontFamily:"Arial",fontWeight:"900",fill:"#B22222"},{id:103,text:"CHAMPION MINDSET",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:104,text:"Beast Mode ON",category:"Sports",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#32CD32"},{id:105,text:"STRONGER EVERY DAY",category:"Sports",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#2E8B57",letterSpacing:1},{id:106,text:"Victory Mindset",category:"Sports",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#B8860B"},{id:107,text:"GAME TIME",category:"Sports",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:108,text:"Push Your Limits",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:109,text:"ATHLETIC EXCELLENCE",category:"Sports",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#DC143C"},{id:110,text:"Fitness First",category:"Sports",fontSize:30,fontFamily:"Verdana",fontWeight:"bold",fill:"#228B22"},{id:111,text:"UNSTOPPABLE FORCE",category:"Sports",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:112,text:"Sweat Equity",category:"Sports",fontSize:28,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:113,text:"PERFORMANCE ZONE",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:114,text:"Train Like A Champion",category:"Sports",fontSize:20,fontFamily:"Arial",fill:"#B22222",fontWeight:"600"},{id:115,text:"POWER WITHIN",category:"Sports",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:116,text:"Maximum Effort",category:"Sports",fontSize:26,fontFamily:"Verdana",fill:"#2E8B57",fontWeight:"800"},{id:117,text:"ELITE ATHLETE",category:"Sports",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000"},{id:118,text:"Rise Above",category:"Sports",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#4169E1"},{id:119,text:"COMPETITIVE EDGE",category:"Sports",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#DC143C"},{id:120,text:"Strength & Honor",category:"Sports",fontSize:26,fontFamily:"Impact",fill:"#2F4F4F",fontWeight:"bold"},{id:121,text:"WINNING ATTITUDE",category:"Sports",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#32CD32",letterSpacing:1.5},{id:122,text:"Never Give Up",category:"Sports",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FF4500"},{id:123,text:"ENDURANCE",category:"Sports",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#228B22",textAlign:"center"},{id:124,text:"Peak Performance",category:"Sports",fontSize:24,fontFamily:"Georgia",fill:"#B8860B",fontWeight:"700"},{id:125,text:"DEDICATION PAYS OFF",category:"Sports",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:126,text:"STYLE ICON",category:"Lifestyle",fontSize:30,fontFamily:"Palatino",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:127,text:"Chic & Unique",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:128,text:"TRENDSETTER",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:129,text:"Fashion Forward",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:130,text:"BOUTIQUE VIBES",category:"Lifestyle",fontSize:22,fontFamily:"Arial",fontWeight:"bold",fill:"#4169E1"},{id:131,text:"Effortlessly Elegant",category:"Lifestyle",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2F4F4F"},{id:132,text:"LUXE LIFESTYLE",category:"Lifestyle",fontSize:28,fontFamily:"Palatino",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:133,text:"Vintage Soul",category:"Lifestyle",fontSize:32,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:134,text:"MODERN CLASSIC",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#000000"},{id:135,text:"Street Style",category:"Lifestyle",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:136,text:"SOPHISTICATED",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontWeight:"bold",fill:"#2E8B57",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:137,text:"Boho Chic",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#CD853F"},{id:138,text:"MINIMALIST",category:"Lifestyle",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:3},{id:139,text:"Glamorous Life",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FFD700",fontWeight:"700"},{id:140,text:"HAUTE COUTURE",category:"Lifestyle",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#4B0082"},{id:141,text:"Urban Explorer",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fill:"#32CD32",fontWeight:"bold"},{id:142,text:"AESTHETIC VIBES",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#FF69B4"},{id:143,text:"Lifestyle Goals",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:144,text:"PREMIUM QUALITY",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B22222"},{id:145,text:"Designer Dreams",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:146,text:"CURATED STYLE",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#2F4F4F",letterSpacing:1},{id:147,text:"Fashion Statement",category:"Lifestyle",fontSize:22,fontFamily:"Georgia",fill:"#FF1493",fontWeight:"600"},{id:148,text:"ARTISAN CRAFTED",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#8B4513"},{id:149,text:"Timeless Elegance",category:"Lifestyle",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#000080"},{id:150,text:"SIGNATURE STYLE",category:"Lifestyle",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:151,text:"HAPPY BIRTHDAY",category:"Holidays",fontSize:32,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#FFFF00",textAlign:"center"},{id:152,text:"Merry Christmas",category:"Holidays",fontSize:30,fontFamily:"Georgia",fill:"#B22222",fontWeight:"700",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#228B22"},{id:153,text:"CELEBRATION TIME",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700"},{id:154,text:"Happy New Year",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:155,text:"THANKFUL HEART",category:"Holidays",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:156,text:"Easter Blessings",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:157,text:"PARTY TIME",category:"Holidays",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",hasBackground:!0,backgroundColor:"#000000"},{id:158,text:"Halloween Spirit",category:"Holidays",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#FF4500"},{id:159,text:"FESTIVE MOOD",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#32CD32"},{id:160,text:"Valentine's Day",category:"Holidays",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#DC143C"},{id:161,text:"ANNIVERSARY JOY",category:"Holidays",fontSize:"22",fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B8860B"},{id:162,text:"Graduation Day",category:"Holidays",fontSize:28,fontFamily:"Arial",fill:"#000080",fontWeight:"700"},{id:163,text:"SUMMER VIBES",category:"Holidays",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:164,text:"Winter Wonderland",category:"Holidays",fontSize:20,fontFamily:"Georgia",fill:"#4169E1",fontWeight:"600"},{id:165,text:"MOTHER'S DAY LOVE",category:"Holidays",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#FF69B4"},{id:166,text:"Father's Day Hero",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#2F4F4F",fontWeight:"700"},{id:167,text:"SPRING AWAKENING",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:168,text:"Holiday Magic",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#9370DB"},{id:169,text:"FAMILY GATHERING",category:"Holidays",fontSize:20,fontFamily:"Arial",fontWeight:"600",fill:"#8B4513"},{id:170,text:"Wedding Bliss",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FFD700"},{id:171,text:"FIREWORKS NIGHT",category:"Holidays",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:172,text:"Autumn Leaves",category:"Holidays",fontSize:26,fontFamily:"Georgia",fill:"#D2691E",fontWeight:"600"},{id:173,text:"MILESTONE MOMENT",category:"Holidays",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:174,text:"Special Occasion",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#B22222",fontWeight:"700"},{id:175,text:"CHEERS TO LIFE",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#20B2AA",textAlign:"center"},{id:176,text:'"Life is Beautiful"',category:"Quotes",fontSize:26,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57",textAlign:"center"},{id:177,text:"CARPE DIEM",category:"Quotes",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:178,text:'"Choose Happiness"',category:"Quotes",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF69B4"},{id:179,text:"LIVE LAUGH LOVE",category:"Quotes",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#DC143C",textAlign:"center"},{id:180,text:'"Dream Without Fear"',category:"Quotes",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:181,text:"WISDOM WITHIN",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#2F4F4F"},{id:182,text:'"Create Your Story"',category:"Quotes",fontSize:20,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:183,text:"INNER PEACE",category:"Quotes",fontSize:30,fontFamily:"Arial",fontWeight:"300",fill:"#20B2AA",letterSpacing:3},{id:184,text:'"Follow Your Heart"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:185,text:"GRATITUDE DAILY",category:"Quotes",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00"},{id:186,text:'"Embrace Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#32CD32"},{id:187,text:"MINDFUL LIVING",category:"Quotes",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"600",fill:"#4B0082"},{id:188,text:'"Stay Curious"',category:"Quotes",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#B22222"},{id:189,text:"PURPOSE DRIVEN",category:"Quotes",fontSize:28,fontFamily:"Arial",fontWeight:"700",fill:"#8B4513"},{id:190,text:'"Find Your Why"',category:"Quotes",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#CD853F"},{id:191,text:"AUTHENTIC SELF",category:"Quotes",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:192,text:'"Less is More"',category:"Quotes",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:2},{id:193,text:"PRESENT MOMENT",category:"Quotes",fontSize:26,fontFamily:"Georgia",fontWeight:"600",fill:"#2E8B57"},{id:194,text:'"Trust The Process"',category:"Quotes",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#4169E1"},{id:195,text:"BALANCED LIFE",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#20B2AA"},{id:196,text:'"Spread Kindness"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF69B4"},{id:197,text:"GROWTH MINDSET",category:"Quotes",fontSize:26,fontFamily:"Arial",fontWeight:"700",fill:"#32CD32"},{id:198,text:'"Be The Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:199,text:"INFINITE POSSIBILITIES",category:"Quotes",fontSize:20,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B"},{id:200,text:'"Leave Your Mark"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"}],ii=({isOpen:d,onClose:o,onAddText:a,theme:l})=>{const[s,f]=y.useState(""),[x,c]=y.useState("All"),u=y.useMemo(()=>{const w=Ct.reduce((I,j)=>(I[j.category]=(I[j.category]||0)+1,I),{});return[{name:"All",count:Ct.length},...Object.entries(w).map(([I,j])=>({name:I,count:j}))]},[Ct]),g=y.useMemo(()=>Ct.filter(w=>{const I=!s||w.text.toLowerCase().includes(s.toLowerCase())||w.category.toLowerCase().includes(s.toLowerCase()),j=x==="All"||w.category===x;return I&&j}),[Ct,s,x]),C=w=>{const I={...w,x:100,y:100};a("text",I),o()},T=()=>{a("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),o()};return d?i.jsx("div",{className:"text-templates-modal-overlay",onClick:o,children:i.jsxs("div",{className:"text-templates-modal",onClick:w=>w.stopPropagation(),children:[i.jsxs("div",{className:"modal-header",children:[i.jsx("h2",{children:"Text Templates"}),i.jsx("button",{className:"close-btn",onClick:o,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"modal-controls",children:[i.jsx("div",{className:"search-section",children:i.jsx("input",{type:"text",placeholder:"Search templates...",value:s,onChange:w=>f(w.target.value),className:"search-input"})}),i.jsx("div",{className:"category-tabs",children:u.map(w=>i.jsxs("button",{className:`category-tab ${x===w.name?"active":""}`,onClick:()=>c(w.name),children:[w.name,i.jsxs("span",{className:"count",children:["(",w.count,")"]})]},w.name))})]}),i.jsxs("div",{className:"templates-grid",children:[i.jsx("div",{className:"custom-text-option",onClick:T,children:i.jsxs("div",{className:"custom-text-preview",children:[i.jsx("div",{className:"custom-icon",children:"โ๏ธ"}),i.jsx("div",{className:"custom-label",children:"Create Custom Text"})]})}),g.map(w=>i.jsxs("div",{className:"template-item",onClick:()=>C(w),children:[i.jsx("div",{className:"template-preview",style:{fontFamily:w.fontFamily,fontSize:`${Math.min(w.fontSize*.6,18)}px`,fontWeight:w.fontWeight,fontStyle:w.fontStyle,color:w.fill,backgroundColor:w.hasBackground?w.backgroundColor:"transparent",textAlign:w.textAlign||"left",textTransform:w.textTransform||"none",letterSpacing:w.letterSpacing?`${w.letterSpacing}px`:"normal",textShadow:w.hasTextShadow?`${w.textShadowX}px ${w.textShadowY}px ${w.textShadowBlur}px ${w.textShadowColor}`:"none"},children:w.text}),i.jsxs("div",{className:"template-info",children:[i.jsx("span",{className:"template-category",children:w.category}),i.jsx("span",{className:"template-font",children:w.fontFamily})]})]},w.id))]}),i.jsx("div",{className:"modal-footer",children:i.jsxs("div",{className:"results-count",children:[g.length," template",g.length!==1?"s":""," found"]})})]})}):null},oi=({onAddElement:d,onDeleteElement:o,onDuplicateElement:a,onUndo:l,onRedo:s,onToggleGrid:f,onToggleRulers:x,onToggleSnap:c,onImageUpload:u,canUndo:g,canRedo:C,showGrid:T,showRulers:w,snapToGrid:I,selectedElement:j,theme:b,readOnly:B,apiKey:D,apiEndpoint:F})=>{const[$,z]=y.useState(!1),[W,ot]=y.useState(!1),[U,nt]=y.useState(!1),[q,it]=y.useState(!1),[Y,O]=y.useState(!1),[J,rt]=y.useState(!1),[K,et]=y.useState(!1),M=P=>{const st=P.target.files[0];st&&st.type.startsWith("image/")&&u(st),P.target.value=""},G=P=>{d("icon",{iconData:P,text:P.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},N=P=>{d("qrcode",P)},m=P=>{d("barcode",P)},A=P=>{d("sticker",P)},Q=P=>{d("embroidery",P)},_=(P,st)=>{d(P,st)},Z=()=>{rt(!J),et(!1)},V=()=>{et(!K),rt(!1)},ct=P=>{P==="custom"?d("text"):P==="templates"&&O(!0),rt(!1)},H=P=>{d(P),et(!1)};return i.jsxs("div",{className:"toolbar",children:[i.jsxs("div",{className:"toolbar-section",children:[i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact",onClick:l,disabled:!g||B,title:"Undo (Ctrl+Z)",children:[i.jsx("span",{className:"icon",children:"โถ"}),i.jsx("span",{className:"label",children:"Undo"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:s,disabled:!C||B,title:"Redo (Ctrl+Y)",children:[i.jsx("span",{className:"icon",children:"โท"}),i.jsx("span",{className:"label",children:"Redo"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:B,title:"Add Text",onClick:Z,children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Text"}),i.jsx("span",{className:`dropdown-arrow ${J?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${J?"show":""}`,children:[i.jsxs("button",{onClick:()=>ct("custom"),children:[i.jsx("span",{className:"icon",children:"๐"})," Custom Text"]}),i.jsxs("button",{onClick:()=>ct("templates"),children:[i.jsx("span",{className:"icon",children:"๐"})," Text Templates"]})]})]}),i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:B,onClick:V,children:[i.jsx("span",{className:"icon",children:"โฉ"}),i.jsx("span",{className:"label",children:"Shapes"}),i.jsx("span",{className:`dropdown-arrow ${K?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${K?"show":""}`,children:[i.jsxs("button",{onClick:()=>H("rectangle"),children:[i.jsx("span",{className:"icon",children:"โญ"})," Rectangle"]}),i.jsxs("button",{onClick:()=>H("circle"),children:[i.jsx("span",{className:"icon",children:"โ"})," Circle"]}),i.jsxs("button",{onClick:()=>H("triangle"),children:[i.jsx("span",{className:"icon",children:"โฒ"})," Triangle"]}),i.jsxs("button",{onClick:()=>H("star"),children:[i.jsx("span",{className:"icon",children:"โ
"})," Star"]}),i.jsxs("button",{onClick:()=>H("heart"),children:[i.jsx("span",{className:"icon",children:"โฅ"})," Heart"]}),i.jsxs("button",{onClick:()=>H("arrow"),children:[i.jsx("span",{className:"icon",children:"โค"})," Arrow"]}),i.jsxs("button",{onClick:()=>H("diamond"),children:[i.jsx("span",{className:"icon",children:"โ"})," Diamond"]}),i.jsxs("button",{onClick:()=>H("hexagon"),children:[i.jsx("span",{className:"icon",children:"โฌก"})," Hexagon"]}),i.jsxs("button",{onClick:()=>H("pentagon"),children:[i.jsx("span",{className:"icon",children:"โฌ"})," Pentagon"]}),i.jsxs("button",{onClick:()=>H("oval"),children:[i.jsx("span",{className:"icon",children:"โฌฏ"})," Oval"]}),i.jsxs("button",{onClick:()=>H("roundedRectangle"),children:[i.jsx("span",{className:"icon",children:"โข"})," Rounded Rectangle"]}),i.jsxs("button",{onClick:()=>H("horizontalLine"),children:[i.jsx("span",{className:"icon",children:"โ"})," Horizontal Line"]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("label",{className:"toolbar-btn compact file-upload",style:{cursor:B?"not-allowed":"pointer"},children:[i.jsx("span",{className:"icon",children:"โ๏ธ"}),i.jsx("span",{className:"label",children:"Upload"}),i.jsx("input",{type:"file",accept:"image/*",onChange:M,disabled:B})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx(Ve,{onSelectIcon:G,theme:b,disabled:B}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>nt(!0),disabled:B,title:"Add Sticker",children:[i.jsx("span",{className:"icon",children:"๐จ"}),i.jsx("span",{className:"label",children:"Stickers"})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>z(!0),disabled:B,title:"Add QR Code",children:[i.jsx("span",{className:"icon",children:"โฆ"}),i.jsx("span",{className:"label",children:"QR Code"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>ot(!0),disabled:B,title:"Add Barcode",children:[i.jsx("span",{className:"icon",children:"โค"}),i.jsx("span",{className:"label",children:"Barcode"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx("div",{className:"toolbar-group embroidery-group",children:i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>it(!0),disabled:B,title:"Add Embroidery Design",children:[i.jsx("span",{className:"icon",children:"๐งต"}),i.jsx("span",{className:"label",children:"Embroidery"})]})}),j&&i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact success",onClick:a,disabled:B,title:"Duplicate Element (Ctrl+D)",children:[i.jsx("span",{className:"icon",children:"โง"}),i.jsx("span",{className:"label",children:"Copy"})]}),i.jsxs("button",{className:"toolbar-btn compact danger",onClick:o,disabled:B,title:"Delete Element (Delete)",children:[i.jsx("span",{className:"icon",children:"๐๏ธ"}),i.jsx("span",{className:"label",children:"Delete"})]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:`toolbar-btn compact ${T?"active":""}`,onClick:f,title:"Toggle Grid",children:[i.jsx("span",{className:"icon",children:"โ"}),i.jsx("span",{className:"label",children:"Grid"})]}),i.jsxs("button",{className:`toolbar-btn compact ${w?"active":""}`,onClick:x,title:"Toggle Rulers",children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Rulers"})]}),i.jsxs("button",{className:`toolbar-btn compact ${I?"active":""}`,onClick:c,title:"Snap to Grid",children:[i.jsx("span",{className:"icon",children:"๐งฒ"}),i.jsx("span",{className:"label",children:"Snap"})]})]})]}),i.jsx(Xe,{isOpen:$,onClose:()=>z(!1),onAddQRCode:N,theme:b}),i.jsx(Je,{isOpen:W,onClose:()=>ot(!1),onAddBarcode:m,theme:b}),i.jsx(Ze,{isOpen:U,onClose:()=>nt(!1),onAddSticker:A,theme:b,apiKey:D,apiEndpoint:F}),i.jsx(ei,{isOpen:q,onClose:()=>it(!1),onAddEmbroidery:Q,theme:b,apiKey:D,apiEndpoint:F}),i.jsx(ii,{isOpen:Y,onClose:()=>O(!1),onAddText:_,theme:b})]})},ri=({selectedElement:d,onUpdate:o,onMoveLayer:a,availableFonts:l,theme:s})=>{const[f,x]=y.useState(!1);if(!d)return i.jsxs("div",{className:"properties-panel",children:[i.jsx("h3",{children:"Properties"}),i.jsx("p",{className:"no-selection",children:"Select an element to edit its properties"})]});const c=(b,B)=>{o(d.id,{[b]:B})},u=()=>{var b,B,D;return i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Text Content"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Content"}),i.jsx("textarea",{value:d.text||"",onChange:F=>c("text",F.target.value),rows:3,placeholder:"Enter your text here..."})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Family"}),i.jsx("select",{value:d.fontFamily||"Arial",onChange:F=>c("fontFamily",F.target.value),children:l.map(F=>i.jsx("option",{value:F,children:F},F))})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Font Size"}),i.jsx("input",{type:"number",value:d.fontSize||20,onChange:F=>c("fontSize",parseInt(F.target.value)),min:"8",max:"200"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Height"}),i.jsx("input",{type:"number",step:"0.1",value:d.lineHeight||1.2,onChange:F=>c("lineHeight",parseFloat(F.target.value)),min:"0.5",max:"3"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Weight"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:d.fontWeight==="lighter"||d.fontWeight==="300"?"active":"",onClick:()=>c("fontWeight","300"),title:"Light",children:"Light"}),i.jsx("button",{className:!d.fontWeight||d.fontWeight==="normal"||d.fontWeight==="400"?"active":"",onClick:()=>c("fontWeight","normal"),title:"Normal",children:"Normal"}),i.jsx("button",{className:d.fontWeight==="bold"||d.fontWeight==="700"?"active":"",onClick:()=>c("fontWeight","bold"),title:"Bold",children:i.jsx("strong",{children:"Bold"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Style"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:d.fontStyle==="italic"?"active":"",onClick:()=>c("fontStyle",d.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:i.jsx("em",{children:"I"})}),i.jsx("button",{className:(b=d.textDecoration)!=null&&b.includes("underline")?"active":"",onClick:()=>{const F=d.textDecoration||"",$=F.split(" ").filter(z=>z&&z!=="underline");F.includes("underline")||$.push("underline"),c("textDecoration",$.join(" ").trim())},title:"Underline",children:i.jsx("u",{children:"U"})}),i.jsx("button",{className:(B=d.textDecoration)!=null&&B.includes("overline")?"active":"",onClick:()=>{const F=d.textDecoration||"",$=F.split(" ").filter(z=>z&&z!=="overline");F.includes("overline")||$.push("overline"),c("textDecoration",$.join(" ").trim())},title:"Overline",children:i.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),i.jsx("button",{className:(D=d.textDecoration)!=null&&D.includes("line-through")?"active":"",onClick:()=>{const F=d.textDecoration||"",$=F.split(" ").filter(z=>z&&z!=="line-through");F.includes("line-through")||$.push("line-through"),c("textDecoration",$.join(" ").trim())},title:"Strikethrough",children:i.jsx("s",{children:"S"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Transform"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!d.textTransform||d.textTransform==="none"?"active":"",onClick:()=>c("textTransform","none"),title:"Normal",children:"Aa"}),i.jsx("button",{className:d.textTransform==="uppercase"?"active":"",onClick:()=>c("textTransform","uppercase"),title:"Uppercase",children:"AA"}),i.jsx("button",{className:d.textTransform==="lowercase"?"active":"",onClick:()=>c("textTransform","lowercase"),title:"Lowercase",children:"aa"}),i.jsx("button",{className:d.textTransform==="capitalize"?"active":"",onClick:()=>c("textTransform","capitalize"),title:"Capitalize",children:"Aa"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Alignment"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!d.textAlign||d.textAlign==="left"?"active":"",onClick:()=>c("textAlign","left"),title:"Left Align",children:"โฌ
"}),i.jsx("button",{className:d.textAlign==="center"?"active":"",onClick:()=>c("textAlign","center"),title:"Center Align",children:"โ"}),i.jsx("button",{className:d.textAlign==="right"?"active":"",onClick:()=>c("textAlign","right"),title:"Right Align",children:"โก"}),i.jsx("button",{className:d.textAlign==="justify"?"active":"",onClick:()=>c("textAlign","justify"),title:"Justify",children:"โก"})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Text Color"}),i.jsx("input",{type:"color",value:d.fill||"#000000",onChange:F=>c("fill",F.target.value)})]}),i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Background Color"}),i.jsxs("div",{className:"color-with-toggle",children:[i.jsx("input",{type:"color",value:d.backgroundColor||"#ffffff",onChange:F=>c("backgroundColor",F.target.value),disabled:!d.hasBackground}),i.jsx("button",{className:`toggle-btn ${d.hasBackground?"active":""}`,onClick:()=>c("hasBackground",!d.hasBackground),title:d.hasBackground?"Remove background":"Add background",children:d.hasBackground?"๐":"๐โ๐จ"})]})]})]})}),f&&i.jsxs(i.Fragment,{children:[i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Letter Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:d.letterSpacing||0,onChange:F=>c("letterSpacing",parseFloat(F.target.value)),min:"-5",max:"10"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Word Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:d.wordSpacing||0,onChange:F=>c("wordSpacing",parseFloat(F.target.value)),min:"-10",max:"20"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Shadow"}),i.jsxs("div",{className:"text-shadow-controls",children:[i.jsx("div",{className:"shadow-toggle",children:i.jsx("button",{className:`toggle-btn ${d.hasTextShadow?"active":""}`,onClick:()=>c("hasTextShadow",!d.hasTextShadow),children:d.hasTextShadow?"Remove Shadow":"Add Shadow"})}),d.hasTextShadow&&i.jsxs("div",{className:"shadow-properties",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"H-Offset"}),i.jsx("input",{type:"number",value:d.textShadowX||2,onChange:F=>c("textShadowX",parseInt(F.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"V-Offset"}),i.jsx("input",{type:"number",value:d.textShadowY||2,onChange:F=>c("textShadowY",parseInt(F.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Blur"}),i.jsx("input",{type:"number",value:d.textShadowBlur||4,onChange:F=>c("textShadowBlur",parseInt(F.target.value)),min:"0",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Shadow Color"}),i.jsx("input",{type:"color",value:d.textShadowColor||"#000000",onChange:F=>c("textShadowColor",F.target.value)})]})]})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:d.stroke||"#000000",onChange:F=>c("stroke",F.target.value)})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:d.strokeWidth||0,onChange:F=>c("strokeWidth",parseInt(F.target.value)),min:"0",max:"20"})]})]})}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:d.opacity||1,onChange:F=>c("opacity",parseFloat(F.target.value))}),i.jsxs("span",{children:[Math.round((d.opacity||1)*100),"%"]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Variant"}),i.jsxs("select",{value:d.fontVariant||"normal",onChange:F=>c("fontVariant",F.target.value),children:[i.jsx("option",{value:"normal",children:"Normal"}),i.jsx("option",{value:"small-caps",children:"Small Caps"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Writing Mode"}),i.jsxs("select",{value:d.writingMode||"horizontal-tb",onChange:F=>c("writingMode",F.target.value),children:[i.jsx("option",{value:"horizontal-tb",children:"Horizontal"}),i.jsx("option",{value:"vertical-rl",children:"Vertical Right-to-Left"}),i.jsx("option",{value:"vertical-lr",children:"Vertical Left-to-Right"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Direction"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!d.direction||d.direction==="ltr"?"active":"",onClick:()=>c("direction","ltr"),title:"Left to Right",children:"LTR"}),i.jsx("button",{className:d.direction==="rtl"?"active":"",onClick:()=>c("direction","rtl"),title:"Right to Left",children:"RTL"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Background Padding"}),i.jsx("input",{type:"number",value:d.backgroundPadding||5,onChange:F=>c("backgroundPadding",parseInt(F.target.value)),min:"0",max:"50",disabled:!d.hasBackground})]})]})]})},g=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Shape Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Fill Color"}),i.jsx("input",{type:"color",value:d.fill||"#000000",onChange:b=>c("fill",b.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:d.stroke||"#000000",onChange:b=>c("stroke",b.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:d.strokeWidth||2,onChange:b=>c("strokeWidth",parseInt(b.target.value)),min:"0",max:"20"})]}),d.type==="star"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Star Points"}),i.jsx("input",{type:"number",value:d.numPoints||5,onChange:b=>c("numPoints",parseInt(b.target.value)),min:"3",max:"20"})]}),d.type==="roundedRectangle"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Corner Radius"}),i.jsx("input",{type:"number",value:d.cornerRadius||10,onChange:b=>c("cornerRadius",parseInt(b.target.value)),min:"0",max:"50"})]})]}),C=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Image Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:d.opacity||1,onChange:b=>c("opacity",parseFloat(b.target.value))}),i.jsxs("span",{children:[Math.round((d.opacity||1)*100),"%"]})]}),f&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Border Radius"}),i.jsx("input",{type:"number",value:d.borderRadius||0,onChange:b=>c("borderRadius",parseInt(b.target.value)),min:"0",max:"50"})]})]}),T=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Position & Size"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"X"}),i.jsx("input",{type:"number",value:Math.round(d.x)||0,onChange:b=>c("x",parseInt(b.target.value))})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Y"}),i.jsx("input",{type:"number",value:Math.round(d.y)||0,onChange:b=>c("y",parseInt(b.target.value))})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Width"}),i.jsx("input",{type:"number",value:Math.round(d.width)||0,onChange:b=>c("width",parseInt(b.target.value)),min:"1"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Height"}),i.jsx("input",{type:"number",value:Math.round(d.height)||0,onChange:b=>c("height",parseInt(b.target.value)),min:"1"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Rotation"}),i.jsx("input",{type:"range",min:"-180",max:"180",value:d.rotation||0,onChange:b=>c("rotation",parseInt(b.target.value))}),i.jsxs("span",{children:[d.rotation||0,"ยฐ"]})]})]}),w=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Line Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Width"}),i.jsx("input",{type:"number",value:d.strokeWidth||d.height||2,onChange:b=>{const B=parseInt(b.target.value);c("strokeWidth",B),c("height",B)},min:"1",max:"50"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Length"}),i.jsx("input",{type:"number",value:d.width||200,onChange:b=>c("width",parseInt(b.target.value)),min:"10",max:"1000"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Line Color"}),i.jsxs("div",{className:"color-input-group",children:[i.jsx("input",{type:"color",value:d.stroke||d.fill||"#000000",onChange:b=>{c("stroke",b.target.value),c("fill",b.target.value)}}),i.jsx("input",{type:"text",value:d.stroke||d.fill||"#000000",onChange:b=>{c("stroke",b.target.value),c("fill",b.target.value)},placeholder:"#000000"})]})]})]}),I=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Layer Controls"}),i.jsxs("div",{className:"button-group vertical",children:[i.jsx("button",{onClick:()=>a(d.id,"top"),children:"Bring to Front"}),i.jsx("button",{onClick:()=>a(d.id,"up"),children:"Bring Forward"}),i.jsx("button",{onClick:()=>a(d.id,"down"),children:"Send Backward"}),i.jsx("button",{onClick:()=>a(d.id,"bottom"),children:"Send to Back"})]})]}),j=["rectangle","circle","triangle","star","arrow","diamond","hexagon","pentagon","heart","oval","roundedRectangle"];return i.jsxs("div",{className:"properties-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Properties"}),i.jsx("span",{className:"element-type",children:d.type})]}),i.jsxs("div",{className:"panel-content",children:[d.type==="text"&&u(),j.includes(d.type)&&g(),d.type==="image"&&C(),d.type==="horizontalLine"&&w(),T(),I(),i.jsx("div",{className:"property-group",children:i.jsxs("button",{className:"toggle-advanced",onClick:()=>x(!f),children:[f?"Hide":"Show"," Advanced Options"]})})]})]})},ai=({elements:d,selectedElement:o,onSelectElement:a,onMoveLayer:l,onDeleteElement:s,theme:f})=>{const x=(u,g)=>{switch(u){case"text":return"T";case"rectangle":return"โญ";case"circle":return"โ";case"triangle":return"โฒ";case"star":return"โ
";case"arrow":return"โค";case"diamond":return"โ";case"hexagon":return"โฌก";case"pentagon":return"โฌ";case"heart":return"โฅ";case"oval":return"โฌญ";case"roundedRectangle":return"โข";case"horizontalLine":return"โ";case"image":return"๐ผ";case"qrcode":return"โฌ";case"barcode":return"|||";case"sticker":return"๐ญ";case"embroidery":return"๐งต";default:return"?"}},c=u=>{var g,C;if(u.type==="text")return u.isIcon&&u.iconData?`Icon: ${u.iconData.name}`:((g=u.text)==null?void 0:g.substring(0,20))+(((C=u.text)==null?void 0:C.length)>20?"...":"")||"Text";if(u.type==="qrcode")return`QR Code: ${(u.data||"").substring(0,15)+((u.data||"").length>15?"...":"")}`;if(u.type==="barcode"){const T=u.format||"CODE128",w=u.data||"";return`Barcode (${T}): ${w.substring(0,10)+(w.length>10?"...":"")}`}return u.type==="sticker"?`Sticker: ${(u.name||"Untitled").substring(0,15)}`:u.type==="embroidery"?`Embroidery: ${(u.name||"Design").substring(0,15)}`:u.type.charAt(0).toUpperCase()+u.type.slice(1)};return i.jsxs("div",{className:"layers-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Layers"}),i.jsx("span",{className:"layer-count",children:d.length})]}),i.jsx("div",{className:"layers-list",children:d.length===0?i.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...d].reverse().map((u,g)=>i.jsxs("div",{className:`layer-item ${(o==null?void 0:o.id)===u.id?"selected":""}`,onClick:()=>a(u),children:[i.jsxs("div",{className:"layer-info",children:[i.jsx("span",{className:"layer-icon",children:x(u.type)}),i.jsx("span",{className:"layer-name",children:c(u)})]}),i.jsxs("div",{className:"layer-controls",children:[i.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(u.id,"up")},disabled:g===0,title:"Move Up",children:"โ"}),i.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(u.id,"down")},disabled:g===d.length-1,title:"Move Down",children:"โ"}),i.jsx("button",{className:"layer-btn delete",onClick:C=>{C.stopPropagation(),s(u.id)},title:"Delete",children:"ร"})]})]},u.id))})]})};class si{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}async exportAllSections(o,a,l,s,f="png",x=!0,c=null){const u={};for(const g of a){const C=g.id||g.sectionName,T=o[C];if(!T||!T.elements||T.elements.length===0){console.log(`Skipping section ${C} - no elements`);continue}if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){let I=g.image||g.sectionImage;if(c&&c.sectionImage&&(g.sectionName==="Front"||c.sections&&Object.keys(c.sections).includes(g.sectionName))&&(I=c.sectionImage),I)try{const j=await this.loadImage(I);await this.processImageColor(j,T.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(j){console.warn("Failed to load background image:",j)}}else this.ctx.clearRect(0,0,l,s);for(const I of T.elements)await this.drawElement(I);const w=this.canvas.toDataURL(`image/${f}`,f==="jpeg"?.9:void 0);u[C]={dataUrl:w,blob:await this.dataUrlToBlob(w)}}return u}async downloadExports(o,a="design"){const l=Object.keys(o);if(l.length===0){alert("No designs to export");return}if(l.length===1){const s=l[0],{blob:f}=o[s],x=URL.createObjectURL(f),c=document.createElement("a");c.href=x,c.download=`${a}-${s}.png`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(x)}else for(const s of l){const{blob:f}=o[s],x=URL.createObjectURL(f),c=document.createElement("a");c.href=x,c.download=`${a}-${s}.png`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(x),await new Promise(u=>setTimeout(u,100))}}async loadImage(o){return new Promise((a,l)=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>a(s),s.onerror=l,s.src=o})}getLuma(o,a,l){return(.2126*o+.7152*a+.0722*l)/255}async processImageColor(o,a){const l=document.createElement("canvas"),s=l.getContext("2d");l.width=o.width,l.height=o.height,s.clearRect(0,0,l.width,l.height),s.drawImage(o,0,0);const f=s.getImageData(0,0,l.width,l.height),x=f.data,c=this.hexToRgb(a);if(!c){console.warn("Invalid target color:",a);return}const{r:u,g,b:C}=c;for(let T=0;T<x.length;T+=4){if(x[T+3]===0)continue;const I=this.getLuma(x[T],x[T+1],x[T+2]);x[T]=Math.round(u*I),x[T+1]=Math.round(g*I),x[T+2]=Math.round(C*I)}return s.putImageData(f,0,0),this.processedImage=new Image,new Promise(T=>{this.processedImage.onload=()=>{T()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),T()},this.processedImage.src=l.toDataURL("image/png")})}async drawElement(o){this.ctx.save();const a=o.x+o.width/2,l=o.y+o.height/2;switch(this.ctx.translate(a,l),o.rotation&&this.ctx.rotate(o.rotation*Math.PI/180),this.ctx.translate(-o.width/2,-o.height/2),o.type){case"text":this.drawText(o);break;case"rectangle":this.drawRectangle(o);break;case"circle":this.drawCircle(o);break;case"triangle":this.drawTriangle(o);break;case"star":this.drawStar(o);break;case"arrow":this.drawArrow(o);break;case"diamond":this.drawDiamond(o);break;case"hexagon":this.drawHexagon(o);break;case"pentagon":this.drawPentagon(o);break;case"heart":this.drawHeart(o);break;case"oval":this.drawOval(o);break;case"roundedRectangle":this.drawRoundedRectangle(o);break;case"qrcode":await this.drawQRCode(o);break;case"barcode":await this.drawBarcode(o);break;case"horizontalLine":this.drawHorizontalLine(o);break;case"sticker":await this.drawSticker(o);break;case"embroidery":await this.drawEmbroidery(o);break;case"image":await this.drawImage(o);break}this.ctx.restore()}drawText(o){this.ctx.font=`${o.fontStyle||"normal"} ${o.fontWeight||"normal"} ${o.fontSize||20}px ${o.fontFamily||"Arial"}`,this.ctx.fillStyle=o.fill||"#000000",this.ctx.textAlign=o.textAlign||"left",this.ctx.textBaseline="top",o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth);const a=(o.text||"Text").split(`
|
|
990
|
+
`),l=(o.fontSize||20)*1.2;a.forEach((s,f)=>{const x=f*l;o.stroke&&o.strokeWidth>0&&this.ctx.strokeText(s,0,x),this.ctx.fillText(s,0,x)})}drawRectangle(o){o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fillRect(0,0,o.width,o.height)),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.strokeRect(0,0,o.width,o.height))}drawCircle(o){const a=Math.min(o.width,o.height)/2,l=o.width/2,s=o.height/2;this.ctx.beginPath(),this.ctx.arc(l,s,a,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawTriangle(o){const a=o.width/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(0,o.height),this.ctx.lineTo(o.width,o.height),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawStar(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,f=s*.4,x=o.numPoints||5;this.ctx.beginPath();for(let c=0;c<x*2;c++){const u=c%2===0?s:f,g=c*Math.PI/x,C=a+Math.cos(g)*u,T=l+Math.sin(g)*u;c===0?this.ctx.moveTo(C,T):this.ctx.lineTo(C,T)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawArrow(o){const a=o.width,l=o.height,s=a*.3;this.ctx.beginPath(),this.ctx.moveTo(a/2,0),this.ctx.lineTo(a,l*.6),this.ctx.lineTo(a-s,l*.6),this.ctx.lineTo(a-s,l),this.ctx.lineTo(s,l),this.ctx.lineTo(s,l*.6),this.ctx.lineTo(0,l*.6),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}async dataUrlToBlob(o){return new Promise(a=>{const l=document.createElement("canvas"),s=l.getContext("2d"),f=new Image;f.onload=()=>{l.width=f.width,l.height=f.height,s.drawImage(f,0,0),l.toBlob(a)},f.src=o})}hexToRgb(o){const a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);return a?{r:parseInt(a[1],16),g:parseInt(a[2],16),b:parseInt(a[3],16)}:null}drawDiamond(o){const a=o.width/2,l=o.height/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(o.width,l),this.ctx.lineTo(a,o.height),this.ctx.lineTo(0,l),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHexagon(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,f=6;this.ctx.beginPath();for(let x=0;x<f;x++){const c=x*2*Math.PI/f-Math.PI/2,u=a+s*Math.cos(c),g=l+s*Math.sin(c);x===0?this.ctx.moveTo(u,g):this.ctx.lineTo(u,g)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawPentagon(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,f=5;this.ctx.beginPath();for(let x=0;x<f;x++){const c=x*2*Math.PI/f-Math.PI/2,u=a+s*Math.cos(c),g=l+s*Math.sin(c);x===0?this.ctx.moveTo(u,g):this.ctx.lineTo(u,g)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHeart(o){const a=o.width,l=o.height,s=0,f=0;this.ctx.beginPath();const x=l*.3;this.ctx.moveTo(s+a/2,f+x),this.ctx.bezierCurveTo(s+a/2,f,s,f,s,f+x),this.ctx.bezierCurveTo(s,f+(l+x)/2,s+a/2,f+(l+x)/2,s+a/2,f+l),this.ctx.bezierCurveTo(s+a/2,f+(l+x)/2,s+a,f+(l+x)/2,s+a,f+x),this.ctx.bezierCurveTo(s+a,f,s+a/2,f,s+a/2,f+x),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawOval(o){const a=o.width/2,l=o.height/2,s=o.width/2,f=o.height/2;this.ctx.beginPath(),this.ctx.ellipse(a,l,s,f,0,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawRoundedRectangle(o){const a=Math.min(o.width,o.height)*.1;this.drawRoundedRect(0,0,o.width,o.height,a),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawRoundedRect(o,a,l,s,f){this.ctx.beginPath(),this.ctx.moveTo(o+f,a),this.ctx.lineTo(o+l-f,a),this.ctx.quadraticCurveTo(o+l,a,o+l,a+f),this.ctx.lineTo(o+l,a+s-f),this.ctx.quadraticCurveTo(o+l,a+s,o+l-f,a+s),this.ctx.lineTo(o+f,a+s),this.ctx.quadraticCurveTo(o,a+s,o,a+s-f),this.ctx.lineTo(o,a+f),this.ctx.quadraticCurveTo(o,a,o+f,a),this.ctx.closePath()}async drawQRCode(o){if(o.imageObject)this.ctx.drawImage(o.imageObject,0,0,o.width,o.height);else if(o.src)try{const a=await this.loadImage(o.src);this.ctx.drawImage(a,0,0,o.width,o.height)}catch(a){console.warn("Failed to load QR code image for export:",a),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("QR Error",o.width/2,o.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No QR Data",o.width/2,o.height/2)}async drawBarcode(o){if(o.imageObject)this.ctx.drawImage(o.imageObject,0,0,o.width,o.height);else if(o.src)try{const a=await this.loadImage(o.src);this.ctx.drawImage(a,0,0,o.width,o.height)}catch(a){console.warn("Failed to load barcode image for export:",a),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Barcode Error",o.width/2,o.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No Barcode Data",o.width/2,o.height/2)}drawHorizontalLine(o){this.ctx.save(),o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.strokeStyle=o.stroke||o.fill||"#000000",this.ctx.lineWidth=o.strokeWidth||o.height||2,this.ctx.lineCap="round",this.ctx.beginPath(),this.ctx.moveTo(0,o.height/2),this.ctx.lineTo(o.width,o.height/2),this.ctx.stroke(),this.ctx.restore()}async drawSticker(o){try{let a=null;if(o.imageObject)a=o.imageObject;else if(o.imageData)a=o.imageData;else if(o.src||o.image){const l=o.src||o.image;a=await this.loadImage(l)}else o.data&&o.data.image&&(a=await this.loadImage(o.data.image));a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Sticker",o.width/2,o.height/2))}catch(a){console.warn("Failed to draw sticker:",a),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",o.width/2,o.height/2)}}async drawEmbroidery(o){try{let a=null;if(o.imageObject)a=o.imageObject;else if(o.imageData)a=o.imageData;else if(o.src||o.image){const l=o.src||o.image;a=await this.loadImage(l)}else o.data&&o.data.image&&(a=await this.loadImage(o.data.image));a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Embroidery",o.width/2,o.height/2))}catch(a){console.warn("Failed to draw embroidery:",a),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",o.width/2,o.height/2)}}async drawImage(o){try{let a=null;if(o.imageObject&&o.imageObject instanceof HTMLImageElement)a=o.imageObject;else if(o.imageData){if(o.imageData instanceof HTMLImageElement)a=o.imageData;else if(typeof o.imageData=="string")try{a=await this.loadImage(o.imageData)}catch(l){console.warn("Failed to load image from imageData URL:",o.imageData,l),a=await this.loadImageWithFallback(o.imageData)}}else if(o.src)try{a=await this.loadImage(o.src)}catch(l){console.warn("Failed to load image from src:",o.src,l),a=await this.loadImageWithFallback(o.src)}else if(o.image)try{a=await this.loadImage(o.image)}catch(l){console.warn("Failed to load image from image property:",o.image,l),a=await this.loadImageWithFallback(o.image)}a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):this.drawImagePlaceholder(o)}catch(a){console.error("Failed to draw image element:",a),this.drawImagePlaceholder(o)}}async loadImageWithFallback(o){return new Promise(a=>{const l=new Image;l.onload=()=>a(l),l.onerror=()=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>a(s),s.onerror=()=>{console.warn("All image loading attempts failed for:",o),a(null)},s.src=o},l.src=o})}drawImagePlaceholder(o){this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.lineWidth=2,this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Image",o.width/2,o.height/2-8),this.ctx.fillText("Not Found",o.width/2,o.height/2+8)}async blobToFile(o,a,l="image/png"){return new File([o],a,{type:l,lastModified:Date.now()})}async exportAllSectionsAsJSON(o,a,l,s,f="png",x=null){var w,I;const c=[],u=[],g={};for(const j of a){const b=j.sectionName,B=o[b];if(!B||!B.elements||B.elements.length===0){console.log(`Skipping section ${b} - no elements`);continue}let D=j.image||j.sectionImage;x&&x.sectionImage&&(j.sectionName==="Front"||x.sections&&Object.keys(x.sections).includes(j.sectionName))&&(D=x.sectionImage);const F={...B,backgroundImage:D,sectionImage:D,sectionName:b,selectedColor:B.selectedColor||"#FFFFFF",canvasWidth:l,canvasHeight:s};g[b]=F;const $=await this.exportSectionAsBlob(B,j,l,s,f,!0,x);if($){const W=await this.blobToFile($,`${b}-full.${f}`,`image/${f}`);c.push({sectionName:b,sectionImage:W})}const z=await this.exportSectionAsBlob(B,j,l,s,f,!1,x);if(z){const W=await this.blobToFile(z,`${b}-print.${f}`,`image/${f}`);u.push({sectionName:b,sectionImage:W})}}let C=((w=a[0])==null?void 0:w.image)||((I=a[0])==null?void 0:I.sectionImage);if(x&&x.sectionImage){const j=a[0];j&&(j.sectionName==="Front"||x.sections&&Object.keys(x.sections).includes(j.sectionName))&&(C=x.sectionImage)}const T={sections:g,canvasWidth:l,canvasHeight:s,sectionImage:C,format:f,timestamp:new Date().toISOString(),version:"1.0",...x&&{initData:{sectionImage:x.sectionImage,sections:x.sections?Object.keys(x.sections):[]}},product:{sections:a.map(j=>({sectionName:j.sectionName||j.id,sectionImage:j.image||j.sectionImage,id:j.id||j.sectionName}))}};return{fullDesign:c,printReady:u,designFile:JSON.stringify(T)}}async exportSectionAsBlob(o,a,l,s,f="png",x=!0,c=null){try{if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){let u=a.image||a.sectionImage;if(c&&c.sectionImage&&(a.sectionName==="Front"||c.sections&&Object.keys(c.sections).includes(a.sectionName))&&(u=c.sectionImage),u)try{const g=await this.loadImage(u);await this.processImageColor(g,o.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(g){console.warn("Failed to load background image:",g)}}else this.ctx.clearRect(0,0,l,s);for(const u of o.elements)await this.drawElement(u);return new Promise(u=>{this.canvas.toBlob(u,`image/${f}`,f==="jpeg"?.9:void 0)})}catch(u){return console.error("Error exporting section as blob:",u),null}}async exportCurrentSectionAsJSON(o,a="png",l=null){var I,j,b;const s=((I=o.activeSection)==null?void 0:I.sectionName)||"main";let f=((j=o.activeSection)==null?void 0:j.sectionImage)||((b=o.activeSection)==null?void 0:b.image);l&&l.sectionImage&&(s==="Front"||l.sections&&Object.keys(l.sections).includes(s))&&(f=l.sectionImage);const x={elements:o.elements,selectedColor:o.selectedColor,canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,backgroundImage:f,sectionImage:f,sectionName:s,zoomLevel:o.zoomLevel,showGrid:o.showGrid,snapToGrid:o.snapToGrid},c={id:s,sectionName:s,image:f,sectionImage:f},u=[],g=[],C=await this.exportSectionAsBlob(x,c,o.canvasWidth,o.canvasHeight,a,!0,l);if(C){const B=await this.blobToFile(C,`${s}-full.${a}`,`image/${a}`);u.push({sectionName:s,sectionImage:B})}const T=await this.exportSectionAsBlob(x,c,o.canvasWidth,o.canvasHeight,a,!1,l);if(T){const B=await this.blobToFile(T,`${s}-print.${a}`,`image/${a}`);g.push({sectionName:s,sectionImage:B})}const w={sections:{[s]:x},canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,sectionImage:f,format:a,timestamp:new Date().toISOString(),version:"1.0",...l&&{initData:{sectionImage:l.sectionImage,sections:l.sections?Object.keys(l.sections):[]}},productInfo:{sections:[{sectionName:s,sectionImage:f,id:s}]}};return{fullDesign:u,printReady:g,designFile:JSON.stringify(w)}}}class li{constructor(o="localStorage"){this.storage=o==="sessionStorage"?sessionStorage:localStorage,this.STORAGE_PREFIX="mypixia_canvas_",this.DESIGNS_LIST_KEY="mypixia_saved_designs"}saveDesign(o,a){var l;try{const s=this.generateDesignId(o),f=new Date().toISOString(),x={id:s,name:o,timestamp:f,version:"1.0",canvasData:{elements:a.elements||[],canvasWidth:a.canvasWidth||800,canvasHeight:a.canvasHeight||600,selectedColor:a.selectedColor||"#FF0000",activeSection:a.activeSection||null,product:a.product||null,sectionDesigns:a.sectionDesigns||{},zoomLevel:a.zoomLevel||1,showGrid:a.showGrid||!1,snapToGrid:a.snapToGrid||!0},metadata:{elementCount:((l=a.elements)==null?void 0:l.length)||0,lastModified:f,thumbnail:a.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+s,JSON.stringify(x)),this.updateDesignsList(s,o,f),{success:!0,designId:s,message:"Design saved successfully"}}catch(s){return console.error("Error saving design:",s),{success:!1,error:s.message}}}loadDesign(o){try{let a=o;if(!o.startsWith("design_")){const x=this.getAllDesigns().find(c=>c.name===o);if(!x)return{success:!1,error:"Design not found"};a=x.id}const l=this.storage.getItem(this.STORAGE_PREFIX+a);return l?{success:!0,data:JSON.parse(l)}:{success:!1,error:"Design not found"}}catch(a){return console.error("Error loading design:",a),{success:!1,error:a.message}}}getAllDesigns(){try{const o=this.storage.getItem(this.DESIGNS_LIST_KEY);return o?JSON.parse(o):[]}catch(o){return console.error("Error getting designs list:",o),[]}}deleteDesign(o){try{this.storage.removeItem(this.STORAGE_PREFIX+o);const l=this.getAllDesigns().filter(s=>s.id!==o);return this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(l)),{success:!0,message:"Design deleted successfully"}}catch(a){return console.error("Error deleting design:",a),{success:!1,error:a.message}}}exportDesignAsFile(o){try{const a=this.loadDesign(o);if(!a.success)return a;const l=a.data,s=JSON.stringify(l,null,2),f=new Blob([s],{type:"application/json"}),x=URL.createObjectURL(f),c=document.createElement("a");return c.href=x,c.download=`${l.name}_${l.id}.json`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(x),{success:!0,message:"Design exported successfully"}}catch(a){return console.error("Error exporting design:",a),{success:!1,error:a.message}}}importDesignFromFile(o){return new Promise(a=>{try{const l=new FileReader;l.onload=s=>{try{const f=JSON.parse(s.target.result);if(!this.validateDesignData(f)){a({success:!1,error:"Invalid design file format"});return}const x=this.generateDesignId(f.name+"_imported");f.id=x,f.name+="_imported",f.timestamp=new Date().toISOString(),f.metadata.lastModified=f.timestamp,this.storage.setItem(this.STORAGE_PREFIX+x,JSON.stringify(f)),this.updateDesignsList(x,f.name,f.timestamp),a({success:!0,data:f,message:"Design imported successfully"})}catch{a({success:!1,error:"Failed to parse design file"})}},l.readAsText(o)}catch(l){a({success:!1,error:l.message})}})}autoSave(o,a){const l=this.STORAGE_PREFIX+"autosave_"+o;try{const s={timestamp:new Date().toISOString(),canvasData:a};return this.storage.setItem(l,JSON.stringify(s)),!0}catch(s){return console.error("Auto-save failed:",s),!1}}loadAutoSave(o){const a=this.STORAGE_PREFIX+"autosave_"+o;try{const l=this.storage.getItem(a);return l?JSON.parse(l):null}catch(l){return console.error("Failed to load auto-save:",l),null}}clearAutoSave(o){const a=this.STORAGE_PREFIX+"autosave_"+o;this.storage.removeItem(a)}getStorageInfo(){const o=this.getAllDesigns();let a=0;return o.forEach(l=>{const s=this.storage.getItem(this.STORAGE_PREFIX+l.id);s&&(a+=new Blob([s]).size)}),{designCount:o.length,totalSize:a,totalSizeFormatted:this.formatBytes(a),storageLimit:this.getStorageLimit()}}clearAllDesigns(){try{return this.getAllDesigns().forEach(a=>{this.storage.removeItem(this.STORAGE_PREFIX+a.id)}),this.storage.removeItem(this.DESIGNS_LIST_KEY),{success:!0,message:"All designs cleared"}}catch(o){return{success:!1,error:o.message}}}generateDesignId(o){const a=Date.now(),l=Math.random().toString(36).substring(2,8);return`design_${a}_${l}`}updateDesignsList(o,a,l){const s=this.getAllDesigns(),f=s.findIndex(c=>c.id===o),x={id:o,name:a,timestamp:l,lastModified:l};f>=0?s[f]=x:s.push(x),s.sort((c,u)=>new Date(u.timestamp)-new Date(c.timestamp)),this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(s))}validateDesignData(o){return o&&o.id&&o.name&&o.canvasData&&Array.isArray(o.canvasData.elements)}formatBytes(o){if(o===0)return"0 Bytes";const a=1024,l=["Bytes","KB","MB","GB"],s=Math.floor(Math.log(o)/Math.log(a));return parseFloat((o/Math.pow(a,s)).toFixed(2))+" "+l[s]}getStorageLimit(){try{if("storage"in navigator&&"estimate"in navigator.storage)return navigator.storage.estimate().then(o=>o.quota)}catch{console.warn("Unable to estimate storage quota")}return"Unknown"}}const ne=y.forwardRef((d,o)=>{const{theme:a={primaryColor:"#000000",secondaryColor:"#cf7e52",tertiaryColor:"#FFFFFF"},readOnly:l=!1,product:s={name:"Premium Crew Neck T-Shirt",category:"Tshirts",description:"Men's crew neck t-shirts",plainColor:"N",mainImage:"https://static.mypixia.com/dev/products/7/e011a73a-f20a-489b-bea8-91a23da56fc4.png",colorSettings:["#FF0000","#0000FF","#008000","#000000","#FFFFFF","#808080","#FFFF00"],sections:[{sectionName:"Front",sectionImage:"https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png"},{sectionName:"Sleeve-left",sectionImage:"https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"},{sectionName:"Back",sectionImage:"https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"}]},initFile:f,initDesignContent:x}=d,[c,u]=y.useState([]),[g,C]=y.useState(null),[T,w]=y.useState(!1),[I,j]=y.useState(!1),[b,B]=y.useState(!1),[D,F]=y.useState({x:0,y:0}),[$,z]=y.useState(null),[W,ot]=y.useState(600),[U,nt]=y.useState(600),[q,it]=y.useState(1),[Y,O]=y.useState(s.colorSettings[0]),[J,rt]=y.useState(!1),[K,et]=y.useState(!0),[M,G]=y.useState(!0),[N,m]=y.useState(s.sections[0]),[A,Q]=y.useState(!1),[_,Z]=y.useState({}),[V,ct]=y.useState([]),[H,P]=y.useState(-1),[st]=y.useState(new li("localStorage")),dt=y.useRef(null),At=y.useRef(null),wt=y.useRef(null),ut=y.useRef(null),Lt=y.useRef(null),Rt=y.useRef(new si),Et=y.useRef(!1),[ht,Pt]=y.useState(null),at=y.useCallback(()=>{const e={elements:JSON.parse(JSON.stringify(c)),selectedElement:g?{...g}:null,timestamp:Date.now()},t=V.slice(0,H+1);t.push(e),t.length>50?t.shift():P(H+1),ct(t)},[c,g,V,H]),bt=y.useCallback(()=>({elements:c,canvasWidth:W,canvasHeight:U,selectedColor:Y,activeSection:N,product:s,sectionDesigns:_,zoomLevel:q,showGrid:J,snapToGrid:M,selectedElement:g?{...g}:null,canvasRef:dt}),[c,W,U,Y,N,s,_,q,J,M,g]),Ut=e=>{if(e.sections&&typeof e.sections=="object"){const t=Object.keys(e.sections)[0],r=e.sections[t];if(r&&r.elements){u(r.elements||[]),ot(r.canvasWidth||800),nt(r.canvasHeight||600),O(r.selectedColor||s.colorSettings[0]),it(r.zoomLevel||1),rt(r.showGrid||!1),G(r.snapToGrid||!0),C(null),e.sections&&Z(e.sections);const n=s.sections.find(h=>h.sectionName===t);n&&m(n),ct([]),P(-1),setTimeout(()=>{at()},100);return}}};y.useEffect(()=>{const t=setTimeout(async()=>{if(c.length===0&&V.length<=1)if(x)try{const r=JSON.parse(x);Pt(r),Ut(r)}catch(r){console.error("Error loading design file:",r),console.warn("Using default text instead")}else if(f)try{const r=await fetch(f);if(r.ok){const n=await r.text();if(n.trim()){const h=JSON.parse(n.trim());Pt(h),Ut(h)}}else console.warn("Failed to load design file, using default text")}catch(r){console.error("Error loading design file:",r),console.warn("Using default text instead")}else{const n="Arial",h="Change me",k=document.createElement("canvas").getContext("2d");k.font=`24px ${n}`;const v=k.measureText(h).width,R={id:lt(),type:"text",x:W/2-v/2,y:U/2-24/2,width:v,height:24,text:h,fontSize:24,fontFamily:n,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};u([R]),C(R),setTimeout(()=>{at()},100)}},300);return()=>clearTimeout(t)},[f,x,s.colorSettings,s.sections]);const Dt=y.useCallback((e="png",t=!0)=>{const r=bt();return s.sections,Rt.current.exportAllSections({[(N==null?void 0:N.sectionName)||"main"]:r},[{id:(N==null?void 0:N.sectionName)||"main",sectionName:(N==null?void 0:N.sectionName)||"main",image:N==null?void 0:N.sectionImage,sectionImage:N==null?void 0:N.sectionImage}],W,U,e,t,ht)},[bt,s.sections,N,W,U]),ce=["Arial","Helvetica","Times New Roman","Georgia","Verdana","Courier New","Tahoma","Trebuchet MS","Impact","Comic Sans MS","Palatino","Garamond","Bookman","Avant Garde","Century Gothic"],Tt=20;y.useEffect(()=>{const e=()=>Q(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),y.useEffect(()=>{const e=document.createElement("canvas");e.width=W,e.height=U,Lt.current=e},[W,U]),y.useEffect(()=>{V.length===0&&at()},[]);const jt=(e,t,r,n,h,p)=>{e.beginPath(),e.moveTo(t+p,r),e.lineTo(t+n-p,r),e.quadraticCurveTo(t+n,r,t+n,r+p),e.lineTo(t+n,r+h-p),e.quadraticCurveTo(t+n,r+h,t+n-p,r+h),e.lineTo(t+p,r+h),e.quadraticCurveTo(t,r+h,t,r+h-p),e.lineTo(t,r+p),e.quadraticCurveTo(t,r,t+p,r),e.closePath()},Ot=(e,t)=>{if(!t.isIcon)return{x:t.x,y:t.y,width:t.width,height:t.height,cx:t.x+t.width/2,cy:t.y+t.height/2};e.save(),e.font=`${t.fontStyle||""} ${t.fontWeight||""} ${t.fontSize}px ${t.fontFamily}`,e.textBaseline="alphabetic",e.textAlign="left";const r=e.measureText(t.text),n=r.actualBoundingBoxAscent??t.fontSize*.8,h=r.actualBoundingBoxDescent??t.fontSize*.2,p=r.actualBoundingBoxLeft??0,k=r.actualBoundingBoxRight??r.width,S=p+k,v=n+h,R=t.x,E=t.y,L=R-S/2-p,tt=E-v/2-n;return e.restore(),{x:L,y:tt,width:S,height:v,cx:R,cy:E}},de=(e,t)=>{if(!t)return;const r=8,n=8,h=4,p=30,k=Ot(e,t),S=t.isIcon?Math.max(r,12):r,v={x:-k.width/2-S,y:-k.height/2-S,w:k.width+S*2,h:k.height+S*2};e.save(),e.translate(k.cx,k.cy),t.rotation&&e.rotate(t.rotation*Math.PI/180);const R=e.createLinearGradient(v.x,v.y,v.x+v.w,v.y+v.h);R.addColorStop(0,"#3b82f6"),R.addColorStop(.5,"#1d4ed8"),R.addColorStop(1,"#3b82f6"),e.strokeStyle="rgba(59,130,246,.3)",e.lineWidth=3,jt(e,v.x-1,v.y-1,v.w+2,v.h+2,h+1),e.stroke(),e.strokeStyle=R,e.lineWidth=2,e.setLineDash([8,4]),jt(e,v.x,v.y,v.w,v.h,h),e.stroke(),e.lineDashOffset=-(Date.now()/50)%12,e.strokeStyle="#ffffff",e.lineWidth=1,e.setLineDash([4,8]),jt(e,v.x,v.y,v.w,v.h,h),e.stroke(),e.setLineDash([]),e.lineDashOffset=0,[{x:v.x,y:v.y},{x:v.x+v.w,y:v.y},{x:v.x+v.w,y:v.y+v.h},{x:v.x,y:v.y+v.h}].forEach(tt=>{e.fillStyle="rgba(0,0,0,.2)",e.fillRect(tt.x-n/2+1,tt.y-n/2+1,n,n),e.fillStyle="#ffffff",e.fillRect(tt.x-n/2,tt.y-n/2,n,n),e.strokeStyle="#3b82f6",e.lineWidth=1,e.strokeRect(tt.x-n/2,tt.y-n/2,n,n)});const E=0,L=v.y-p;e.strokeStyle="#3b82f6",e.lineWidth=1,e.setLineDash([2,2]),e.beginPath(),e.moveTo(E,L+12),e.lineTo(E,v.y),e.stroke(),e.setLineDash([]),e.beginPath(),e.arc(E,L,12,0,2*Math.PI),e.fillStyle="#f59e0b",e.fill(),e.strokeStyle="#ffffff",e.lineWidth=2,e.stroke(),e.strokeStyle="#ffffff",e.lineWidth=2,e.beginPath(),e.arc(E,L,6,-Math.PI/2,Math.PI,!1),e.stroke(),e.beginPath(),e.moveTo(E-6,L),e.lineTo(E-3,L-3),e.lineTo(E-3,L+3),e.closePath(),e.fillStyle="#ffffff",e.fill(),e.restore()},fe=(e,t)=>{if(!t)return[];const r=Ot(e,t),n=t.isIcon?Math.max(8,12):8,h=8,p=30,k=(t.rotation||0)*Math.PI/180,S={x:-r.width/2-n,y:-r.height/2-n,w:r.width+n*2,h:r.height+n*2},v=[{x:S.x,y:S.y,type:"nw-resize"},{x:S.x+S.w,y:S.y,type:"ne-resize"},{x:S.x+S.w,y:S.y+S.h,type:"se-resize"},{x:S.x,y:S.y+S.h,type:"sw-resize"},{x:0,y:S.y-p,type:"rotate"}],R=Math.cos(k),E=Math.sin(k);return v.map(L=>({x:r.cx+(L.x*R-L.y*E),y:r.cy+(L.x*E+L.y*R),type:L.type,size:L.type==="rotate"?24:h}))},Qt=(e,t,r)=>{if(!r)return null;const n=dt.current;if(!n)return null;const h=n.getContext("2d"),p=fe(h,r);for(const k of p){const S=e-k.x,v=t-k.y;if(Math.sqrt(S*S+v*v)<=k.size/2)return k.type}return null},kt=y.useCallback(()=>{if(H>0){const e=V[H-1];u(e.elements),C(e.selectedElement),P(H-1)}},[V,H]),mt=y.useCallback(()=>{if(H<V.length-1){const e=V[H+1];u(e.elements),C(e.selectedElement),P(H+1)}},[V,H]),xt=e=>M?Math.round(e/Tt)*Tt:e;y.useEffect(()=>{if(N!=null&&N.sectionImage){wt.current=null,ut.current=null;const e=dt.current;if(e&&e.getContext("2d").clearRect(0,0,W,U),f&&!ht)return;const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{wt.current=t,Vt(t,Y)},t.onerror=()=>{console.error("Failed to load background image:",N.sectionImage),X()};let r=N.sectionImage;ht&&ht.sectionImage&&(N.sectionName==="Front"||ht.sections&&Object.keys(ht.sections).includes(N.sectionName))&&(r=ht.sectionImage),t.src=r}else wt.current=null,ut.current=null,X()},[N,Y,ht]),y.useEffect(()=>{const e=t=>{const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))){if((t.key==="Delete"||t.key==="Backspace")&&g&&!l){t.preventDefault();const h=g;u(p=>p.filter(k=>k.id!==h.id)),C(null),at()}if(t.ctrlKey||t.metaKey)switch(t.key){case"z":t.shiftKey?(t.preventDefault(),mt()):(t.preventDefault(),kt());break;case"y":t.preventDefault(),mt();break}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[g,l,kt,mt,at]);const he=e=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},lt=()=>`element_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,ge=e=>{e.strokeStyle="#e0e0e0",e.lineWidth=1,e.setLineDash([1,1]);for(let t=0;t<=W;t+=Tt)e.beginPath(),e.moveTo(t,0),e.lineTo(t,U),e.stroke();for(let t=0;t<=U;t+=Tt)e.beginPath(),e.moveTo(0,t),e.lineTo(W,t),e.stroke();e.setLineDash([])},xe=(e,t)=>{e.save();const r=t.x+t.width/2,n=t.y+t.height/2;switch(e.translate(r,n),t.rotation&&e.rotate(t.rotation*Math.PI/180),e.translate(-t.width/2,-t.height/2),t.type){case"text":me(e,t);break;case"rectangle":pe(e,t);break;case"circle":we(e,t);break;case"triangle":be(e,t);break;case"star":ke(e,t);break;case"arrow":ve(e,t);break;case"diamond":Se(e,t);break;case"hexagon":Fe(e,t);break;case"pentagon":Ce(e,t);break;case"heart":Te(e,t);break;case"oval":je(e,t);break;case"roundedRectangle":Ne(e,t);break;case"image":Ae(e,t);break;case"qrcode":ue(e,t);break;case"barcode":ye(e,t);break;case"sticker":Re(e,t);break;case"horizontalLine":Ie(e,t);break;case"embroidery":Ee(e,t);break}e.restore()},ye=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageObject:r,imageLoading:!1}:h))},r.onerror=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageLoading:!1}:h))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Your customization",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Your customization",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No Barcode",t.width/2,t.height/2))},ue=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageObject:r,imageLoading:!1}:h))},r.onerror=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageLoading:!1}:h))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No QR Data",t.width/2,t.height/2))},me=(e,t)=>{e.save();let r=t.text||"Text";if(t.textTransform)switch(t.textTransform){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase();break;case"capitalize":r=r.replace(/\b\w/g,S=>S.toUpperCase());break}e.font=`${t.fontStyle||"normal"} ${t.fontWeight||"normal"} ${t.fontSize||20}px ${t.fontFamily||"Arial"}`,e.fillStyle=t.fill||"#000000",e.textAlign=t.textAlign||"left",e.textBaseline="top",t.opacity!==void 0&&(e.globalAlpha=t.opacity),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth);const n=r.split(`
|
|
991
|
+
`),h=(t.fontSize||20)*(t.lineHeight||1.2),p=Math.max(...n.map(S=>e.measureText(S).width)),k=n.length*h;if(t.backgroundColor&&t.backgroundColor!=="transparent"){e.fillStyle=t.backgroundColor;const S=t.backgroundPadding||4;e.fillRect(-S,-S,p+S*2,k+S*2),e.fillStyle=t.fill||"#000000"}n.forEach((S,v)=>{const R=v*h,E=e.measureText(S).width;t.stroke&&t.strokeWidth>0&&e.strokeText(S,0,R),e.fillText(S,0,R);const L=t.fontSize||20,tt=t.decorationColor||t.fill||"#000000",ft=Math.max(1,L/20);if(e.strokeStyle=tt,e.lineWidth=ft,t.textDecoration==="underline"||t.underline){const yt=R+L+2;e.beginPath(),e.moveTo(0,yt),e.lineTo(E,yt),e.stroke()}if(t.textDecoration==="overline"||t.overline){const yt=R-2;e.beginPath(),e.moveTo(0,yt),e.lineTo(E,yt),e.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const yt=R+L/2;e.beginPath(),e.moveTo(0,yt),e.lineTo(E,yt),e.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(Qe=>{switch(Qe.trim()){case"underline":const Zt=R+L+2;e.beginPath(),e.moveTo(0,Zt),e.lineTo(E,Zt),e.stroke();break;case"overline":const te=R-2;e.beginPath(),e.moveTo(0,te),e.lineTo(E,te),e.stroke();break;case"line-through":const ee=R+L/2;e.beginPath(),e.moveTo(0,ee),e.lineTo(E,ee),e.stroke();break}})}),e.restore()},pe=(e,t)=>{t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fillRect(0,0,t.width,t.height)),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.strokeRect(0,0,t.width,t.height))},we=(e,t)=>{const r=Math.min(t.width,t.height)/2,n=t.width/2,h=t.height/2;e.beginPath(),e.arc(n,h,r,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},be=(e,t)=>{const r=t.width/2;t.height/2,e.beginPath(),e.moveTo(r,0),e.lineTo(0,t.height),e.lineTo(t.width,t.height),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ke=(e,t)=>{const r=t.width/2,n=t.height/2,h=Math.min(t.width,t.height)/2,p=h*.4,k=t.numPoints||5;e.beginPath();for(let S=0;S<k*2;S++){const v=S%2===0?h:p,R=S*Math.PI/k,E=r+Math.cos(R)*v,L=n+Math.sin(R)*v;S===0?e.moveTo(E,L):e.lineTo(E,L)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ve=(e,t)=>{const r=t.width,n=t.height,h=r*.3;e.beginPath(),e.moveTo(r/2,0),e.lineTo(r,n*.6),e.lineTo(r-h,n*.6),e.lineTo(r-h,n),e.lineTo(h,n),e.lineTo(h,n*.6),e.lineTo(0,n*.6),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Se=(e,t)=>{const r=t.width/2,n=t.height/2;e.beginPath(),e.moveTo(r,0),e.lineTo(t.width,n),e.lineTo(r,t.height),e.lineTo(0,n),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Fe=(e,t)=>{const r=t.width/2,n=t.height/2,h=Math.min(t.width,t.height)/2,p=6;e.beginPath();for(let k=0;k<p;k++){const S=k*2*Math.PI/p-Math.PI/2,v=r+h*Math.cos(S),R=n+h*Math.sin(S);k===0?e.moveTo(v,R):e.lineTo(v,R)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ce=(e,t)=>{const r=t.width/2,n=t.height/2,h=Math.min(t.width,t.height)/2,p=5;e.beginPath();for(let k=0;k<p;k++){const S=k*2*Math.PI/p-Math.PI/2,v=r+h*Math.cos(S),R=n+h*Math.sin(S);k===0?e.moveTo(v,R):e.lineTo(v,R)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Te=(e,t)=>{const r=t.width,n=t.height,h=0,p=0;e.beginPath();const k=n*.3;e.moveTo(h+r/2,p+k),e.bezierCurveTo(h+r/2,p,h,p,h,p+k),e.bezierCurveTo(h,p+(n+k)/2,h+r/2,p+(n+k)/2,h+r/2,p+n),e.bezierCurveTo(h+r/2,p+(n+k)/2,h+r,p+(n+k)/2,h+r,p+k),e.bezierCurveTo(h+r,p,h+r/2,p,h+r/2,p+k),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},je=(e,t)=>{const r=t.width/2,n=t.height/2,h=t.width/2,p=t.height/2;e.beginPath(),e.ellipse(r,n,h,p,0,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ne=(e,t)=>{const r=Math.min(t.width,t.height)*.1;jt(e,0,0,t.width,t.height,r),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ie=(e,t)=>{e.save(),t.opacity!==void 0&&(e.globalAlpha=t.opacity),e.strokeStyle=t.stroke||t.fill||"#000000",e.lineWidth=t.strokeWidth||t.height||2,e.lineCap="round",e.beginPath(),e.moveTo(0,t.height/2),e.lineTo(t.width,t.height/2),e.stroke(),e.restore()},Ae=(e,t)=>{const r=t.src||t.imageData;if(r)try{if(r instanceof HTMLImageElement){if(r.complete&&r.naturalWidth>0&&r.naturalHeight>0){e.drawImage(r,0,0,t.width,t.height);return}}else if(typeof r=="string"&&r.length>0){if(t._imageElement||(t._imageElement=new Image,t._imageElement.crossOrigin="anonymous",t._imageElement.onload=()=>{X()},t._imageElement.onerror=()=>{console.error("Failed to load image:",r),t._imageLoadError=!0,X()},t._imageElement.src=r),t._imageElement.complete&&t._imageElement.naturalWidth>0&&t._imageElement.naturalHeight>0){e.drawImage(t._imageElement,0,0,t.width,t.height);return}if(t._imageLoadError){e.fillStyle="#ffebee",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#f44336",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#f44336",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Error loading image",t.width/2,t.height/2);return}}e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.lineWidth=1,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Your customization",t.width/2,t.height/2)}catch(n){console.error("Error drawing image:",n),e.fillStyle="#ffebee",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#f44336",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#f44336",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Error loading image",t.width/2,t.height/2)}else e.fillStyle="#f8f8f8",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ddd",e.lineWidth=1,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#999",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No Image",t.width/2,t.height/2)},Re=(e,t)=>{const r=t.src;if(r)try{if(r instanceof HTMLImageElement){if(r.complete&&r.naturalWidth>0&&r.naturalHeight>0){e.drawImage(r,0,0,t.width,t.height);return}}else if(typeof r=="string"&&r.length>0){if(t._stickerElement||(t._stickerElement=new Image,t._stickerElement.crossOrigin="anonymous",t._stickerElement.onload=()=>{X()},t._stickerElement.onerror=()=>{console.error("Failed to load sticker:",r),t._stickerLoadError=!0,X()},t._stickerElement.src=r),t._stickerElement.complete&&t._stickerElement.naturalWidth>0&&t._stickerElement.naturalHeight>0){e.drawImage(t._stickerElement,0,0,t.width,t.height);return}if(t._stickerLoadError){Nt(e,t,"Failed to load",!0);return}}Nt(e,t,"Your customization")}catch(n){console.error("Error drawing sticker:",n),Nt(e,t,"Error",!0)}else Nt(e,t,"No Sticker")},Nt=(e,t,r,n=!1)=>{e.fillStyle=n?"#ffebee":"#f8f9fa",e.fillRect(0,0,t.width,t.height),e.strokeStyle=n?"#f44336":"#dee2e6",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle=n?"#f44336":"#6c757d",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText(r,t.width/2,t.height/2)},Ee=(e,t)=>{if(t.imageObject&&t.imageObject.complete&&t.imageObject.naturalHeight!==0)try{e.drawImage(t.imageObject,0,0,t.width,t.height)}catch(r){console.error("Error drawing embroidery image:",r),vt(e,t,"Error loading image")}else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{r.complete&&r.naturalHeight!==0?(t.imageObject=r,t.imageLoading=!1,X()):(t.imageLoading=!1,console.error("Image loaded but is invalid:",t.src))},r.onerror=()=>{t.imageLoading=!1,console.error("Failed to load embroidery image:",t.src),vt(e,t,"Failed to load")},r.src=t.src,vt(e,t,"Your customization")}else t.imageLoading?vt(e,t,"Your customization"):vt(e,t)},vt=(e,t,r="Embroidery")=>{e.fillStyle="#f9f9f9",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ddd",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#999",e.font="24px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("๐งต",t.width/2,t.height/2-10),e.fillStyle="#666",e.font="12px Arial",e.fillText(r,t.width/2,t.height/2+15)},$t=(e,t,r)=>{if(!r)return!1;const n=r.x+r.width/2,h=r.y+r.height/2,p=e-n,k=t-h,S=-(r.rotation||0)*Math.PI/180,v=Math.cos(S),R=Math.sin(S),E=p*v-k*R,L=p*R+k*v,tt=r.width/2,ft=r.height/2;return E>=-tt&&E<=tt&&L>=-ft&&L<=ft},De=y.useCallback(()=>{(T||I||b)&&at(),w(!1),j(!1),B(!1),z(null);const e=dt.current;e&&(e.style.cursor="default")},[T,I,b,at]);y.useEffect(()=>{const e=t=>{if(l)return;const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))&&((t.ctrlKey||t.metaKey)&&(t.key==="z"&&!t.shiftKey?(t.preventDefault(),kt()):(t.key==="z"&&t.shiftKey||t.key==="y")&&(t.preventDefault(),mt())),(t.key==="Delete"||t.key==="Backspace")&&g&&(zt(g.id),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="d"&&g&&(Gt(g.id),t.preventDefault()),g&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))){t.preventDefault();const h=t.shiftKey?10:1;let p={};switch(t.key){case"ArrowUp":p.y=g.y-h;break;case"ArrowDown":p.y=g.y+h;break;case"ArrowLeft":p.x=g.x-h;break;case"ArrowRight":p.x=g.x+h;break}Ht(g.id,p),at()}};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[g,kt,mt,l]);const ze=(e,t={})=>{const r={id:lt(),type:e,x:50,y:50,width:100,height:100,fill:"#000000",stroke:"#000000",strokeWidth:0,rotation:0,...t};switch(e){case"text":r.id=lt(),r.text=t.text||"New Text",r.fontSize=t.fontSize||20,r.fontFamily=t.fontFamily||"Arial",r.fontWeight=t.fontWeight||"normal",r.fontStyle=t.fontStyle||"normal",r.textAlign=t.textAlign||"left",r.width=150,r.height=50;break;case"icon":r.id=lt(),r.text=t.text||"๐ฏ",r.fontSize=t.fontSize||48,r.fontFamily=t.fontFamily||"Arial",r.fontWeight=t.fontWeight||"normal",r.fontStyle=t.fontStyle||"normal",r.textAlign="center",r.width=80,r.height=80,r.iconData=t.iconData||null,r.type="text",r.isIcon=!0;break;case"image":r.id=lt(),r.imageData=t.imageData||null,r.width=t.width||200,r.height=t.height||200;break;case"qrcode":r.id=lt(),r.type="qrcode",r.x=(t==null?void 0:t.x)||W/2-((t==null?void 0:t.width)||100)/2,r.y=(t==null?void 0:t.y)||U/2-((t==null?void 0:t.height)||100)/2,r.width=(t==null?void 0:t.width)||100,r.height=(t==null?void 0:t.height)||100,r.src=(t==null?void 0:t.src)||"",r.data=(t==null?void 0:t.data)||"",r.rotation=0,r.opacity=1;break;case"barcode":r.id=lt(),r.type="barcode",r.x=(t==null?void 0:t.x)||W/2-((t==null?void 0:t.width)||200)/2,r.y=(t==null?void 0:t.y)||U/2-((t==null?void 0:t.height)||100)/2,r.width=(t==null?void 0:t.width)||200,r.height=(t==null?void 0:t.height)||100,r.src=(t==null?void 0:t.src)||"",r.data=(t==null?void 0:t.data)||"",r.format=(t==null?void 0:t.format)||"CODE128",r.rotation=0,r.opacity=1,r.imageObject=(t==null?void 0:t.imageObject)||null;break;case"sticker":r.id=lt(),r.type="sticker",r.imageData=(t==null?void 0:t.imageData)||null,r.width=t.width||200,r.height=t.height||200;break;case"horizontalLine":r.id=lt(),r.type="horizontalLine",r.x=W/2-100,r.y=U/2-1,r.width=200,r.height=2,r.fill="#000000",r.stroke="#000000",r.strokeWidth=2,r.rotation=0,r.opacity=1;break;case"embroidery":r.id=lt(),r.type="embroidery",r.imageData=(t==null?void 0:t.imageData)||null,r.width=t.width||200,r.height=t.height||200;break;case"rectangle":case"circle":case"triangle":case"star":case"arrow":case"diamond":case"hexagon":case"pentagon":case"heart":case"oval":case"roundedRectangle":break;default:console.warn(`Unknown element type: ${e}`);return}u(n=>[...n,r]),C(r),at()},Ht=(e,t)=>{u(r=>r.map(n=>n.id===e?{...n,...t}:n)),g&&g.id===e&&C(r=>({...r,...t}))},zt=y.useCallback(()=>{g&&(u(e=>e.filter(t=>t.id!==g.id)),C(null),at())},[g,at]),Gt=e=>{const t=c.find(r=>r.id===e);if(t){const r={...t,id:lt(),x:t.x+20,y:t.y+20};u(n=>[...n,r]),C(r),at()}},_t=(e,t)=>{const r=c.findIndex(p=>p.id===e);if(r===-1)return;const n=[...c],h=n[r];t==="up"&&r<n.length-1?(n[r]=n[r+1],n[r+1]=h):t==="down"&&r>0?(n[r]=n[r-1],n[r-1]=h):t==="top"?(n.splice(r,1),n.push(h)):t==="bottom"&&(n.splice(r,1),n.unshift(h)),u(n),at()};y.useCallback(()=>{N&&Z(e=>({...e,[N.sectionName]:{elements:[...c],selectedColor:Y}}))},[N,c,Y]);const[,Be]=y.useReducer(e=>e+1,0);setTimeout(()=>{Be()},20);const We=y.useCallback(()=>{N&&Z(e=>({...e,[N.sectionName]:{elements:[...c],selectedColor:Y}}))},[N,c,Y]);y.useImperativeHandle(o,()=>({handleSectionChange:Yt,flushCurrentSectionDesign:We,exportPrintReady:async(e="png")=>await Dt(e,!1),exportFullDesign:async(e="png")=>await Dt(e,!0),exportDesign:Dt,getCanvasData:()=>bt(),exportAllDesignsAsJSON:async(e="png")=>{try{const t=bt(),r=(N==null?void 0:N.sectionName)||"main",n={elements:t.elements,selectedColor:t.selectedColor,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight},h={...t.sectionDesigns||{},[r]:n},p=s.sections&&s.sections.length>0?s.sections:[{id:r,sectionName:r,image:N==null?void 0:N.sectionImage,sectionImage:N==null?void 0:N.sectionImage}];return await Rt.current.exportAllSectionsAsJSON(h,p,W,U,e,ht)}catch(t){throw console.error("Export as JSON failed:",t),t}},exportCurrentSectionAsJSON:async(e="png")=>{try{const t=bt();return await Rt.current.exportCurrentSectionAsJSON(t,e,ht)}catch(t){throw console.error("Export current section as JSON failed:",t),t}}}));const gt=y.useRef(null),Bt=y.useRef(!1),X=y.useCallback(()=>{const e=dt.current;if(!e||Bt.current)return;Bt.current=!0;const t=e.getContext("2d");t.clearRect(0,0,W,U),ut.current&&t.drawImage(ut.current,0,0,W,U),J&&ge(t),c.forEach(r=>{t.save(),t.globalAlpha=r.opacity||1,xe(t,r),t.restore()}),g&&de(t,g),Bt.current=!1},[c,g,W,U,J]),pt=y.useCallback(()=>{gt.current&&cancelAnimationFrame(gt.current),gt.current=requestAnimationFrame(()=>{X(),gt.current=null})},[X]);y.useEffect(()=>{pt()},[c,g,W,U,J,pt]),y.useEffect(()=>{ut.current&&pt()},[ut.current,pt]),y.useEffect(()=>()=>{gt.current&&cancelAnimationFrame(gt.current)},[]);const Wt=y.useCallback(()=>{X(),(T||I||b)&&(gt.current=requestAnimationFrame(Wt))},[X,T,I,b]);y.useEffect(()=>{T||I||b?Wt():(gt.current&&(cancelAnimationFrame(gt.current),gt.current=null),pt())},[T,I,b,Wt,pt]);const Me=y.useCallback(e=>{if(l)return;const r=dt.current.getBoundingClientRect(),n=(e.clientX-r.left)/q,h=(e.clientY-r.top)/q;if(F({x:n,y:h}),g){const k=Qt(n,h,g);if(k){if(k==="rotate"){B(!0);const S=g.x+g.width/2,v=g.y+g.height/2,R=Math.atan2(h-v,n-S)*180/Math.PI;F({x:n,y:h,initialAngle:R,initialRotation:g.rotation||0})}else j(!0),z(k),F({x:n,y:h,initialWidth:g.width,initialHeight:g.height,initialX:g.x,initialY:g.y});return}}let p=null;for(let k=c.length-1;k>=0;k--)if($t(n,h,c[k])){p=c[k];break}p?(C(p),w(!0),F({x:n,y:h,offsetX:n-p.x,offsetY:h-p.y})):C(null),X()},[l,q,g,c,X]),Le=y.useCallback(e=>{if(l)return;const t=dt.current,r=t.getBoundingClientRect(),n=(e.clientX-r.left)/q,h=(e.clientY-r.top)/q;if(g&&!T&&!I&&!b){const p=Qt(n,h,g);p?p==="rotate"?t.style.cursor="grab":t.style.cursor=p:$t(n,h,g)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=T?"grabbing":"default";if(b&&g){const p=g.x+g.width/2,k=g.y+g.height/2,v=Math.atan2(h-k,n-p)*180/Math.PI-D.initialAngle;let R=D.initialRotation+v;e.shiftKey&&(R=Math.round(R/15)*15),R=(R%360+360)%360,u(E=>E.map(L=>L.id===g.id?{...L,rotation:R}:L)),C(E=>({...E,rotation:R})),X();return}if(I&&g&&$){const p=n-D.x,k=h-D.y;let S=D.initialWidth,v=D.initialHeight,R=D.initialX,E=D.initialY;switch($){case"se-resize":S=Math.max(20,D.initialWidth+p),v=Math.max(20,D.initialHeight+k);break;case"sw-resize":S=Math.max(20,D.initialWidth-p),v=Math.max(20,D.initialHeight+k),R=D.initialX+(D.initialWidth-S);break;case"ne-resize":S=Math.max(20,D.initialWidth+p),v=Math.max(20,D.initialHeight-k),E=D.initialY+(D.initialHeight-v);break;case"nw-resize":S=Math.max(20,D.initialWidth-p),v=Math.max(20,D.initialHeight-k),R=D.initialX+(D.initialWidth-S),E=D.initialY+(D.initialHeight-v);break}if(e.shiftKey&&g.type!=="text"){const tt=D.initialWidth/D.initialHeight;$.includes("e"),v=S/tt,$.includes("n")&&(E=D.initialY+(D.initialHeight-v))}M&&(R=xt(R),E=xt(E),S=xt(S),v=xt(v));const L={...g,x:R,y:E,width:S,height:v};u(tt=>tt.map(ft=>ft.id===g.id?L:ft)),C(L),X();return}if(T&&g){let p=n-D.offsetX,k=h-D.offsetY;M&&(p=xt(p),k=xt(k)),p=Math.max(0,Math.min(W-g.width,p)),k=Math.max(0,Math.min(U-g.height,k));const S={...g,x:p,y:k};u(v=>v.map(R=>R.id===g.id?S:R)),C(S),X()}},[l,q,g,T,I,b,$,D,M,W,U,c,X]),Yt=y.useCallback(e=>{N&&Z(r=>({...r,[N.sectionName]:{elements:c.map(n=>n.type==="image"?{...n,imageData:n.imageData,src:n.src}:n),selectedColor:Y}}));const t=_[e.sectionName];if(t){const r=t.elements.map(n=>{if(n.type==="image"&&n.src&&!n.imageData){const h=new Image;return h.onload=()=>{u(p=>p.map(k=>k.id===n.id?{...k,imageData:h}:k)),X()},h.src=n.src,{...n,imageData:h}}return n});u(r),O(t.selectedColor||Y)}else u([]);m(e),C(null)},[N,c,Y,_,X]),Pe=y.useCallback(e=>{if(e&&e.type.startsWith("image/")){const t=new FileReader;t.onload=r=>{const n=new Image;n.onload=()=>{const h={id:lt(),type:"image",x:xt(W/2-100),y:xt(U/2-100),width:Math.min(n.width,200),height:Math.min(n.height,200),rotation:0,imageData:n,src:r.target.result,originalWidth:n.width,originalHeight:n.height},p=n.width/n.height;h.width/h.height!==p&&(h.width/p<=200?h.height=h.width/p:h.width=h.height*p),u(k=>[...k,h]),C(h),at()},n.onerror=()=>{console.error("Failed to load uploaded image"),alert("Failed to load the uploaded image. Please try again.")},n.src=r.target.result},t.onerror=()=>{console.error("Failed to read file"),alert("Failed to read the file. Please try again.")},t.readAsDataURL(e)}else alert("Please select a valid image file.")},[W,U,xt,lt,at]),qt=y.useCallback(Ue(()=>{X()},16),[X]);y.useEffect(()=>{Et.current||qt()},[c,g,J,qt]);function Ue(e,t){let r;return function(...h){const p=()=>{clearTimeout(r),e(...h)};clearTimeout(r),r=setTimeout(p,t)}}y.useEffect(()=>{wt.current&&Vt(wt.current,Y)},[Y]),y.useEffect(()=>{X()},[X]);const Oe=(e,t,r)=>(.2126*e+.7152*t+.0722*r)/255,Vt=y.useCallback((e,t)=>{const r=Lt.current,n=r.getContext("2d");r.width=W,r.height=U,n.clearRect(0,0,W,U),n.drawImage(e,0,0,W,U);const h=n.getImageData(0,0,W,U),p=h.data,k=he(t);if(!k){Et.current=!1;return}const{r:S,g:v,b:R}=k;for(let L=0;L<p.length;L+=4){if(p[L+3]===0)continue;const ft=Oe(p[L],p[L+1],p[L+2]);p[L]=Math.round(S*ft),p[L+1]=Math.round(v*ft),p[L+2]=Math.round(R*ft)}n.putImageData(h,0,0);const E=new Image;E.onload=()=>{ut.current=s.plainColor==="Y"?E:e,Et.current=!1,X()},E.src=r.toDataURL("image/png")},[W,U,X]),Xt=e=>{if(!K)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),r=document.querySelector(".ruler-vertical");if(!t||!r)return{horizontal:[],vertical:[]};const n=t.getBoundingClientRect(),h=r.getBoundingClientRect(),p=n.width,k=h.height,S=50,v=[],R=[];for(let E=S;E<=p;E+=S)E<=p-20&&v.push({position:E,value:Math.round(E/e)});for(let E=S;E<=k;E+=S)E<=k-15&&R.push({position:E,value:Math.round(E/e)});return{horizontal:v,vertical:R}},[Jt,Kt]=y.useState({horizontal:[],vertical:[]});return y.useEffect(()=>{const e=()=>{setTimeout(()=>{const n=Xt(q);Kt(n)},50)};e();let t;const r=()=>{clearTimeout(t),t=setTimeout(e,150)};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),clearTimeout(t)}},[q,K]),y.useEffect(()=>{if(K&&!A){const e=setTimeout(()=>{const t=Xt(q);Kt(t)},100);return()=>clearTimeout(e)}},[K,A,q]),i.jsxs("div",{className:"pure-canvas-designer",children:[i.jsx("div",{className:"designer-header",children:i.jsx(oi,{onAddElement:ze,onDeleteElement:()=>g&&zt(g.id),onDuplicateElement:()=>g&&Gt(g.id),onUndo:kt,onRedo:mt,onToggleGrid:()=>rt(!J),onToggleRulers:()=>et(!K),onToggleSnap:()=>G(!M),onImageUpload:Pe,canUndo:H>0,canRedo:H<V.length-1,showGrid:J,showRulers:K,snapToGrid:M,selectedElement:g,theme:a,readOnly:l,apiKey:d.apiKey,apiEndpoint:d.apiEndpoint})}),i.jsxs("div",{className:"designer-content",children:[K&&!A&&i.jsxs("div",{className:"rulers",children:[i.jsx("div",{className:"ruler-horizontal",children:i.jsx("div",{className:"ruler-horizontal-numbers",children:Jt.horizontal.map((e,t)=>i.jsx("span",{className:"ruler-number horizontal",style:{left:`${e.position}px`},children:e.value},t))})}),i.jsx("div",{className:"ruler-vertical",children:i.jsx("div",{className:"ruler-vertical-numbers",children:Jt.vertical.map((e,t)=>i.jsx("span",{className:"ruler-number vertical",style:{top:`${e.position}px`},children:e.value},t))})})]}),i.jsx("div",{className:"canvas-container",ref:At,children:i.jsx("canvas",{ref:dt,width:W,height:U,onMouseDown:Me,onMouseMove:Le,onMouseUp:De,style:{border:"1px solid #e2e8f0",cursor:T?"grabbing":"default",transform:`scale(${q})`,transformOrigin:"top left"}})}),i.jsxs("div",{className:"side-panels",children:[i.jsx(ri,{selectedElement:g,onUpdate:Ht,onMoveLayer:_t,availableFonts:ce,theme:a}),i.jsx(ai,{elements:c,selectedElement:g,onSelectElement:C,onMoveLayer:_t,onDeleteElement:zt,theme:a})]})]}),i.jsxs("div",{className:"designer-footer",children:[i.jsxs("div",{className:"section-thumbnails",children:[i.jsxs("label",{className:"section-thumbnails-label",children:["Available sections for : ",i.jsx("u",{children:s.name})]}),i.jsx("div",{className:"thumbnails-container",children:s.sections.map(e=>{const t=_[e.sectionName]&&_[e.sectionName].elements&&_[e.sectionName].elements.length>0;return i.jsxs("div",{className:`section-thumbnail compact ${N.sectionName===e.sectionName?"active":""}`,onClick:r=>{r.stopPropagation();const n=s.sections.find(h=>h.sectionName===e.sectionName);Yt(n)},title:e.sectionName,children:[i.jsxs("div",{className:"thumbnail-image-container compact",children:[i.jsx("img",{src:e.sectionImage,alt:e.sectionName,className:"thumbnail-image compact",onError:r=>{r.target.style.display="none",r.target.nextSibling.style.display="flex"}}),i.jsx("div",{className:"thumbnail-placeholder compact",style:{display:"none"},children:i.jsx("span",{className:"placeholder-icon",children:"๐"})}),t&&i.jsx("div",{className:"content-indicator compact",children:i.jsx("svg",{className:"checkmark compact",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:i.jsx("path",{d:"M20 6L9 17l-5-5"})})})]}),i.jsx("span",{className:"thumbnail-label compact",children:e.sectionName})]},e.sectionName)})})]}),i.jsxs("div",{className:"color-palette-enhanced compact",children:[i.jsx("label",{className:"color-palette-label",children:"Supported colors:"}),i.jsxs("div",{className:"color-swatches-container",children:[s.colorSettings.slice(0,3).map((e,t)=>i.jsxs("div",{className:`color-swatch-enhanced compact ${Y===e?"active":""}`,onClick:r=>{r.stopPropagation(),O(e)},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner compact",style:{backgroundColor:e}}),Y===e&&i.jsx("div",{className:"color-selection-ring compact"})]},e)),s.colorSettings.length>3&&i.jsxs("div",{className:"color-dropdown-container",children:[i.jsx("button",{className:"color-more-button",onClick:e=>{e.stopPropagation();const t=e.currentTarget.nextElementSibling;t.style.display=t.style.display==="block"?"none":"block"},title:"More colors",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"12",cy:"12",r:"3"}),i.jsx("circle",{cx:"12",cy:"5",r:"3"}),i.jsx("circle",{cx:"12",cy:"19",r:"3"})]})}),i.jsx("div",{className:"color-dropdown-menu",style:{display:"none"},children:s.colorSettings.slice(3).map((e,t)=>i.jsxs("div",{className:`color-swatch-dropdown ${Y===e?"active":""}`,onClick:r=>{r.stopPropagation(),O(e),r.currentTarget.parentElement.style.display="none"},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner-dropdown",style:{backgroundColor:e}}),i.jsx("span",{className:"color-hex",children:e.toUpperCase()})]},e))})]})]})]}),i.jsxs("div",{className:"zoom-controls-enhanced compact",children:[i.jsx("label",{className:"zoom-label",children:"Zoom:"}),i.jsxs("div",{className:"zoom-buttons-container compact",children:[i.jsx("button",{className:"zoom-button compact zoom-out",onClick:()=>it(Math.max(.25,q-.25)),disabled:q<=.25,title:"Zoom Out",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsxs("div",{className:"zoom-display compact",children:[i.jsxs("span",{className:"zoom-percentage compact",children:[Math.round(q*100),"%"]}),i.jsx("div",{className:"zoom-slider-container compact",children:i.jsx("input",{type:"range",min:"0.25",max:"4",step:"0.25",value:q,onChange:e=>it(parseFloat(e.target.value)),className:"zoom-slider compact"})})]}),i.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>it(Math.min(4,q+.25)),disabled:q>=4,title:"Zoom In",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"11",y1:"8",x2:"11",y2:"14"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsx("button",{className:"zoom-reset compact",onClick:()=>it(1),title:"Reset Zoom (100%)",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("path",{d:"M3 3l18 18"}),i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"})]})})]})]})]})]})});ne.displayName="Mypixia";module.exports=ne;
|