@mypixia/simplex-designer 2.0.7 โ 2.0.8
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/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 ee;function Qe(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function f(u){if(u==null)return null;if(typeof u=="function")return u.$$typeof===_?null:u.displayName||u.name||null;if(typeof u=="string")return u;switch(u){case w:return"Fragment";case X:return"Profiler";case k:return"StrictMode";case Z:return"Suspense";case W:return"SuspenseList";case ct:return"Activity"}if(typeof u=="object")switch(typeof u.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),u.$$typeof){case
|
|
17
|
+
*/var ee;function Qe(){return ee||(ee=1,process.env.NODE_ENV!=="production"&&function(){function f(u){if(u==null)return null;if(typeof u=="function")return u.$$typeof===_?null:u.displayName||u.name||null;if(typeof u=="string")return u;switch(u){case w:return"Fragment";case X:return"Profiler";case k:return"StrictMode";case Z:return"Suspense";case W:return"SuspenseList";case ct:return"Activity"}if(typeof u=="object")switch(typeof u.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),u.$$typeof){case N:return"Portal";case O:return(u.displayName||"Context")+".Provider";case T:return(u._context.displayName||"Context")+".Consumer";case S:var E=u.render;return u=u.displayName,u||(u=E.displayName||E.name||"",u=u!==""?"ForwardRef("+u+")":"ForwardRef"),u;case ft:return E=u.displayName||null,E!==null?E:f(u.type)||"Memo";case Q:E=u._payload,u=u._init;try{return f(u(E))}catch{}}return null}function o(u){return""+u}function a(u){try{o(u);var E=!1}catch{E=!0}if(E){E=console;var L=E.error,H=typeof Symbol=="function"&&Symbol.toStringTag&&u[Symbol.toStringTag]||u.constructor.name||"Object";return L.call(E,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",H),o(u)}}function l(u){if(u===w)return"<>";if(typeof u=="object"&&u!==null&&u.$$typeof===Q)return"<...>";try{var E=f(u);return E?"<"+E+">":"<...>"}catch{return"<...>"}}function s(){var u=rt.A;return u===null?null:u.getOwner()}function g(){return Error("react-stack-top-frame")}function h(u){if(M.call(u,"key")){var E=Object.getOwnPropertyDescriptor(u,"key").get;if(E&&E.isReactWarning)return!1}return u.key!==void 0}function n(u,E){function L(){lt||(lt=!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)",E))}L.isReactWarning=!0,Object.defineProperty(u,"key",{get:L,configurable:!0})}function c(){var u=f(this.type);return Y[u]||(Y[u]=!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.")),u=this.props.ref,u!==void 0?u:null}function C(u,E,L,H,G,it,J,q){return L=it.ref,u={$$typeof:B,type:u,key:E,props:it,_owner:G},(L!==void 0?L:null)!==null?Object.defineProperty(u,"ref",{enumerable:!1,get:c}):Object.defineProperty(u,"ref",{enumerable:!1,value:null}),u._store={},Object.defineProperty(u._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(u,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(u,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(u,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:q}),Object.freeze&&(Object.freeze(u.props),Object.freeze(u)),u}function I(u,E,L,H,G,it,J,q){var U=E.children;if(U!==void 0)if(H)if(st(U)){for(H=0;H<U.length;H++)D(U[H]);Object.freeze&&Object.freeze(U)}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 D(U);if(M.call(E,"key")){U=f(u);var K=Object.keys(E).filter(function(yt){return yt!=="key"});H=0<K.length?"{key: someKey, "+K.join(": ..., ")+": ...}":"{key: someKey}",et[U+H]||(K=0<K.length?"{"+K.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} />`,H,U,K,U),et[U+H]=!0)}if(U=null,L!==void 0&&(a(L),U=""+L),h(E)&&(a(E.key),U=""+E.key),"key"in E){L={};for(var wt in E)wt!=="key"&&(L[wt]=E[wt])}else L=E;return U&&n(L,typeof u=="function"?u.displayName||u.name||"Unknown":u),C(u,U,it,G,s(),L,J,q)}function D(u){typeof u=="object"&&u!==null&&u.$$typeof===B&&u._store&&(u._store.validated=1)}var m=y,B=Symbol.for("react.transitional.element"),T=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),k=Symbol.for("react.strict_mode"),X=Symbol.for("react.profiler"),N=Symbol.for("react.consumer"),O=Symbol.for("react.context"),S=Symbol.for("react.forward_ref"),Z=Symbol.for("react.suspense"),W=Symbol.for("react.suspense_list"),ft=Symbol.for("react.memo"),Q=Symbol.for("react.lazy"),ct=Symbol.for("react.activity"),_=Symbol.for("react.client.reference"),rt=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,st=Array.isArray,tt=console.createTask?console.createTask:function(){return null};m={"react-stack-bottom-frame":function(u){return u()}};var lt,Y={},P=m["react-stack-bottom-frame"].bind(m,g)(),j=tt(l(g)),et={};Ft.Fragment=w,Ft.jsx=function(u,E,L,H,G){var it=1e4>rt.recentlyCreatedOwnerStacks++;return I(u,E,L,!1,H,G,it?Error("react-stack-top-frame"):P,it?tt(l(u)):j)},Ft.jsxs=function(u,E,L,H,G){var it=1e4>rt.recentlyCreatedOwnerStacks++;return I(u,E,L,!0,H,G,it?Error("react-stack-top-frame"):P,it?tt(l(u)):j)}}()),Ft}var ie;function $e(){return ie||(ie=1,process.env.NODE_ENV==="production"?At.exports=Oe():At.exports=Qe()),At.exports}var i=$e();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:"๐ก๏ธ"}]}},re=()=>Object.values(Mt).flatMap(f=>f.icons.map(o=>({...o,category:f.name}))),He=f=>re().filter(a=>a.name.toLowerCase().includes(f.toLowerCase())||a.category.toLowerCase().includes(f.toLowerCase())),Ge=({onSelectIcon:f,disabled:o=!1})=>{const[a,l]=y.useState(!1),[s,g]=y.useState(""),[h,n]=y.useState("all"),c=y.useRef(null);y.useEffect(()=>{const m=B=>{c.current&&!c.current.contains(B.target)&&l(!1)};return document.addEventListener("mousedown",m),()=>document.removeEventListener("mousedown",m)},[]);const C=m=>{f(m),l(!1),g("")},D=(()=>{let m=re();if(s.trim()&&(m=He(s)),h!=="all"){const B=Mt[h];B&&(m=m.filter(T=>T.category===B.name))}return m})();return i.jsxs("div",{className:"icon-selector",ref:c,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:m=>g(m.target.value),className:"icon-search"}),i.jsxs("select",{value:h,onChange:m=>n(m.target.value),className:"category-select",children:[i.jsx("option",{value:"all",children:"All Categories"}),Object.entries(Mt).map(([m,B])=>i.jsx("option",{value:m,children:B.name},m))]})]}),i.jsx("div",{className:"icon-grid",children:D.length===0?i.jsx("div",{className:"no-icons",children:s?"No icons found":"No icons in this category"}):D.map((m,B)=>i.jsxs("button",{className:"icon-item",onClick:()=>C(m),title:`${m.name} (${m.category})`,children:[i.jsx("span",{className:"icon-symbol",children:m.symbol}),i.jsx("span",{className:"icon-name",children:m.name})]},`${m.name}-${B}`))}),i.jsx("div",{className:"icon-dropdown-footer",children:i.jsxs("span",{className:"icon-count",children:[D.length," icon",D.length!==1?"s":""]})})]})]})},_e=({isOpen:f,onClose:o,onAddQRCode:a,theme:l})=>{const[s,g]=y.useState(""),[h,n]=y.useState(""),[c,C]=y.useState(200),[I,D]=y.useState("M"),m=()=>{if(!s.trim())return;const w={width:c,errorCorrectionLevel:I,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};Pe.toDataURL(s,w,(k,X)=>{if(k){console.error("QR Code generation error:",k);return}n(X)})},B=()=>{if(!h)return;const w=new Image;w.onload=()=>{a({type:"qrcode",src:h,data:s,width:c,height:c,x:100,y:100,imageObject:w}),T()},w.src=h},T=()=>{g(""),n(""),o()};return f?i.jsx("div",{className:"qr-modal-overlay",onClick:T,children:i.jsxs("div",{className:"qr-modal-content",onClick:w=>w.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:T,"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:w=>g(w.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:c,onChange:w=>C(Math.max(50,Math.min(500,parseInt(w.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:I,onChange:w=>D(w.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:m,disabled:!s.trim(),children:"Generate QR Code"})}),h&&i.jsxs("div",{className:"qr-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"qr-preview-container",children:i.jsx("img",{src:h,alt:"QR Code Preview"})}),i.jsx("button",{className:"qr-btn qr-btn-add",onClick:B,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Ye=({isOpen:f,onClose:o,onAddBarcode:a,theme:l})=>{const[s,g]=y.useState(""),[h,n]=y.useState("CODE128"),[c,C]=y.useState(null),[I,D]=y.useState(2),[m,B]=y.useState(100),[T,w]=y.useState(20),[k,X]=y.useState("center"),[N,O]=y.useState("bottom"),[S,Z]=y.useState(10),W=y.useRef(null),ft=[{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)"}],Q=()=>{if(s.trim())try{C(i.jsx(Ue,{value:s,format:h,width:I,height:m,fontSize:T,textAlign:k,textPosition:N,margin:S,background:"#ffffff",lineColor:"#000000"}))}catch(M){console.error("Barcode generation error:",M),alert("Invalid data for selected barcode format. Please check your input.")}},ct=()=>{var M,st,tt,lt;if(!(!c||!W.current))try{const Y=W.current.querySelector("svg");if(!Y){console.error("No SVG element found in barcode");return}const P=document.createElement("canvas"),j=P.getContext("2d"),et=Y.getBoundingClientRect(),u=((st=(M=Y.width)==null?void 0:M.baseVal)==null?void 0:st.value)||et.width||200,E=((lt=(tt=Y.height)==null?void 0:tt.baseVal)==null?void 0:lt.value)||et.height||100;P.width=u,P.height=E;const L=new XMLSerializer().serializeToString(Y),H=new Blob([L],{type:"image/svg+xml;charset=utf-8"}),G=URL.createObjectURL(H),it=new Image;it.onload=()=>{j.drawImage(it,0,0);const J=P.toDataURL("image/png"),q=new Image;q.onload=()=>{a({type:"barcode",src:J,data:s,format:h,width:u,height:E,x:100,y:100,imageObject:q}),_()},q.src=J,URL.revokeObjectURL(G)},it.src=G}catch(Y){console.error("Error adding barcode to canvas:",Y),alert("Failed to add barcode to canvas. Please try again.")}},_=()=>{g(""),C(null),n("CODE128"),D(2),B(100),w(20),o()},rt=M=>({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."})[M]||"";return f?i.jsx("div",{className:"barcode-modal-overlay",onClick:_,children:i.jsxs("div",{className:"barcode-modal-content",onClick:M=>M.stopPropagation(),children:[i.jsxs("div",{className:"barcode-modal-header",children:[i.jsx("h3",{children:"Generate Barcode"}),i.jsx("button",{className:"barcode-modal-close",onClick:_,"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:M=>g(M.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:h,onChange:M=>n(M.target.value),children:ft.map(M=>i.jsx("option",{value:M.value,children:M.label},M.value))}),i.jsx("small",{className:"format-description",children:rt(h)})]}),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:I,onChange:M=>D(parseFloat(M.target.value))}),i.jsxs("span",{className:"range-value",children:[I,"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:m,onChange:M=>B(parseInt(M.target.value))}),i.jsxs("span",{className:"range-value",children:[m,"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:T,onChange:M=>w(parseInt(M.target.value))}),i.jsxs("span",{className:"range-value",children:[T,"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:N,onChange:M=>O(M.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:Q,disabled:!s.trim(),children:"Generate Barcode"})}),c&&i.jsxs("div",{className:"barcode-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"barcode-preview-container",ref:W,children:c}),i.jsx("button",{className:"barcode-btn barcode-btn-add",onClick:ct,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},qe=({theme:f})=>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:(f==null?void 0:f.primaryColor)||"#4c5bf2",color:"white",padding:"10px 20px",borderRadius:"4px",textDecoration:"none",fontWeight:"500",transition:"background-color 0.2s ease"},children:"Get API Key"})]}),oe=()=>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} />`,H,U,K,U),et[U+H]=!0)}if(U=null,L!==void 0&&(a(L),U=""+L),h(E)&&(a(E.key),U=""+E.key),"key"in E){L={};for(var wt in E)wt!=="key"&&(L[wt]=E[wt])}else L=E;return U&&n(L,typeof u=="function"?u.displayName||u.name||"Unknown":u),C(u,U,it,G,s(),L,J,q)}function D(u){typeof u=="object"&&u!==null&&u.$$typeof===B&&u._store&&(u._store.validated=1)}var m=y,B=Symbol.for("react.transitional.element"),N=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),k=Symbol.for("react.strict_mode"),X=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),O=Symbol.for("react.context"),S=Symbol.for("react.forward_ref"),Z=Symbol.for("react.suspense"),W=Symbol.for("react.suspense_list"),ft=Symbol.for("react.memo"),Q=Symbol.for("react.lazy"),ct=Symbol.for("react.activity"),_=Symbol.for("react.client.reference"),rt=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,st=Array.isArray,tt=console.createTask?console.createTask:function(){return null};m={"react-stack-bottom-frame":function(u){return u()}};var lt,Y={},P=m["react-stack-bottom-frame"].bind(m,g)(),j=tt(l(g)),et={};Ft.Fragment=w,Ft.jsx=function(u,E,L,H,G){var it=1e4>rt.recentlyCreatedOwnerStacks++;return I(u,E,L,!1,H,G,it?Error("react-stack-top-frame"):P,it?tt(l(u)):j)},Ft.jsxs=function(u,E,L,H,G){var it=1e4>rt.recentlyCreatedOwnerStacks++;return I(u,E,L,!0,H,G,it?Error("react-stack-top-frame"):P,it?tt(l(u)):j)}}()),Ft}var ie;function $e(){return ie||(ie=1,process.env.NODE_ENV==="production"?At.exports=Oe():At.exports=Qe()),At.exports}var i=$e();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:"๐ก๏ธ"}]}},re=()=>Object.values(Mt).flatMap(f=>f.icons.map(o=>({...o,category:f.name}))),He=f=>re().filter(a=>a.name.toLowerCase().includes(f.toLowerCase())||a.category.toLowerCase().includes(f.toLowerCase())),Ge=({onSelectIcon:f,disabled:o=!1})=>{const[a,l]=y.useState(!1),[s,g]=y.useState(""),[h,n]=y.useState("all"),c=y.useRef(null);y.useEffect(()=>{const m=B=>{c.current&&!c.current.contains(B.target)&&l(!1)};return document.addEventListener("mousedown",m),()=>document.removeEventListener("mousedown",m)},[]);const C=m=>{f(m),l(!1),g("")},D=(()=>{let m=re();if(s.trim()&&(m=He(s)),h!=="all"){const B=Mt[h];B&&(m=m.filter(N=>N.category===B.name))}return m})();return i.jsxs("div",{className:"icon-selector",ref:c,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:m=>g(m.target.value),className:"icon-search"}),i.jsxs("select",{value:h,onChange:m=>n(m.target.value),className:"category-select",children:[i.jsx("option",{value:"all",children:"All Categories"}),Object.entries(Mt).map(([m,B])=>i.jsx("option",{value:m,children:B.name},m))]})]}),i.jsx("div",{className:"icon-grid",children:D.length===0?i.jsx("div",{className:"no-icons",children:s?"No icons found":"No icons in this category"}):D.map((m,B)=>i.jsxs("button",{className:"icon-item",onClick:()=>C(m),title:`${m.name} (${m.category})`,children:[i.jsx("span",{className:"icon-symbol",children:m.symbol}),i.jsx("span",{className:"icon-name",children:m.name})]},`${m.name}-${B}`))}),i.jsx("div",{className:"icon-dropdown-footer",children:i.jsxs("span",{className:"icon-count",children:[D.length," icon",D.length!==1?"s":""]})})]})]})},_e=({isOpen:f,onClose:o,onAddQRCode:a,theme:l})=>{const[s,g]=y.useState(""),[h,n]=y.useState(""),[c,C]=y.useState(200),[I,D]=y.useState("M"),m=()=>{if(!s.trim())return;const w={width:c,errorCorrectionLevel:I,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};Pe.toDataURL(s,w,(k,X)=>{if(k){console.error("QR Code generation error:",k);return}n(X)})},B=()=>{if(!h)return;const w=new Image;w.onload=()=>{a({type:"qrcode",src:h,data:s,width:c,height:c,x:100,y:100,imageObject:w}),N()},w.src=h},N=()=>{g(""),n(""),o()};return f?i.jsx("div",{className:"qr-modal-overlay",onClick:N,children:i.jsxs("div",{className:"qr-modal-content",onClick:w=>w.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:N,"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:w=>g(w.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:c,onChange:w=>C(Math.max(50,Math.min(500,parseInt(w.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:I,onChange:w=>D(w.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:m,disabled:!s.trim(),children:"Generate QR Code"})}),h&&i.jsxs("div",{className:"qr-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"qr-preview-container",children:i.jsx("img",{src:h,alt:"QR Code Preview"})}),i.jsx("button",{className:"qr-btn qr-btn-add",onClick:B,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Ye=({isOpen:f,onClose:o,onAddBarcode:a,theme:l})=>{const[s,g]=y.useState(""),[h,n]=y.useState("CODE128"),[c,C]=y.useState(null),[I,D]=y.useState(2),[m,B]=y.useState(100),[N,w]=y.useState(20),[k,X]=y.useState("center"),[T,O]=y.useState("bottom"),[S,Z]=y.useState(10),W=y.useRef(null),ft=[{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)"}],Q=()=>{if(s.trim())try{C(i.jsx(Ue,{value:s,format:h,width:I,height:m,fontSize:N,textAlign:k,textPosition:T,margin:S,background:"#ffffff",lineColor:"#000000"}))}catch(M){console.error("Barcode generation error:",M),alert("Invalid data for selected barcode format. Please check your input.")}},ct=()=>{var M,st,tt,lt;if(!(!c||!W.current))try{const Y=W.current.querySelector("svg");if(!Y){console.error("No SVG element found in barcode");return}const P=document.createElement("canvas"),j=P.getContext("2d"),et=Y.getBoundingClientRect(),u=((st=(M=Y.width)==null?void 0:M.baseVal)==null?void 0:st.value)||et.width||200,E=((lt=(tt=Y.height)==null?void 0:tt.baseVal)==null?void 0:lt.value)||et.height||100;P.width=u,P.height=E;const L=new XMLSerializer().serializeToString(Y),H=new Blob([L],{type:"image/svg+xml;charset=utf-8"}),G=URL.createObjectURL(H),it=new Image;it.onload=()=>{j.drawImage(it,0,0);const J=P.toDataURL("image/png"),q=new Image;q.onload=()=>{a({type:"barcode",src:J,data:s,format:h,width:u,height:E,x:100,y:100,imageObject:q}),_()},q.src=J,URL.revokeObjectURL(G)},it.src=G}catch(Y){console.error("Error adding barcode to canvas:",Y),alert("Failed to add barcode to canvas. Please try again.")}},_=()=>{g(""),C(null),n("CODE128"),D(2),B(100),w(20),o()},rt=M=>({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."})[M]||"";return f?i.jsx("div",{className:"barcode-modal-overlay",onClick:_,children:i.jsxs("div",{className:"barcode-modal-content",onClick:M=>M.stopPropagation(),children:[i.jsxs("div",{className:"barcode-modal-header",children:[i.jsx("h3",{children:"Generate Barcode"}),i.jsx("button",{className:"barcode-modal-close",onClick:_,"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:M=>g(M.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:h,onChange:M=>n(M.target.value),children:ft.map(M=>i.jsx("option",{value:M.value,children:M.label},M.value))}),i.jsx("small",{className:"format-description",children:rt(h)})]}),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:I,onChange:M=>D(parseFloat(M.target.value))}),i.jsxs("span",{className:"range-value",children:[I,"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:m,onChange:M=>B(parseInt(M.target.value))}),i.jsxs("span",{className:"range-value",children:[m,"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:N,onChange:M=>w(parseInt(M.target.value))}),i.jsxs("span",{className:"range-value",children:[N,"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:T,onChange:M=>O(M.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:Q,disabled:!s.trim(),children:"Generate Barcode"})}),c&&i.jsxs("div",{className:"barcode-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"barcode-preview-container",ref:W,children:c}),i.jsx("button",{className:"barcode-btn barcode-btn-add",onClick:ct,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},qe=({theme:f})=>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:(f==null?void 0:f.primaryColor)||"#4c5bf2",color:"white",padding:"10px 20px",borderRadius:"4px",textDecoration:"none",fontWeight:"500",transition:"background-color 0.2s ease"},children:"Get API Key"})]}),oe=()=>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
|
-
`})]}),Ve=({isOpen:f,onClose:o,onAddSticker:a,theme:l,apiKey:s,apiEndpoint:g})=>{const[h,n]=y.useState([]),[c,C]=y.useState(!1),[I,D]=y.useState(null),[m,B]=y.useState(""),[
|
|
27
|
+
`})]}),Ve=({isOpen:f,onClose:o,onAddSticker:a,theme:l,apiKey:s,apiEndpoint:g})=>{const[h,n]=y.useState([]),[c,C]=y.useState(!1),[I,D]=y.useState(null),[m,B]=y.useState(""),[N,w]=y.useState(""),[k,X]=y.useState({});y.useRef(null);const[T,O]=y.useState(!1),[S,Z]=y.useState(!1),[W,ft]=y.useState(!1),Q=`${g}/api/v1/designer`;y.useEffect(()=>{f&&s&&ct()},[f,s]);const ct=async()=>{const P=sessionStorage.getItem("apc_x_sub_status");P==="active"?(O(!0),Z(!0),rt()):P==="inactive"?(O(!1),Z(!0)):(ft(!0),await _())},_=async()=>{if(!s){O(!1),Z(!0),ft(!1);return}const P=`${Q}/get-subscription-status/${s}`;try{(await Zt.get(P)).data.object==="active"?(sessionStorage.setItem("apc_x_sub_status","active"),O(!0),rt()):(sessionStorage.setItem("apc_x_sub_status","inactive"),O(!1))}catch(j){console.error("Subscription check failed:",j),sessionStorage.setItem("apc_x_sub_status","inactive"),O(!1)}finally{ft(!1),Z(!0)}},rt=async()=>{const P=sessionStorage.getItem("apc_stickers");if(P)try{const j=JSON.parse(P);n(j);return}catch{console.warn("Failed to parse cached stickers, fetching fresh data")}C(!0),D(null);try{const j=await Zt.get(`${Q}/get-stickers`);if(j.data&&j.data.object&&j.data.object.contents){const et=j.data.object.contents;n(et),sessionStorage.setItem("apc_stickers",JSON.stringify(et))}else throw new Error("Invalid response format")}catch(j){console.error("Error fetching stickers:",j),D("Failed to load stickers. Please try again.")}finally{C(!1)}},M=(P,j)=>{a({type:"sticker",src:P,name:j,width:100,height:100,x:100,y:100}),o()},st=P=>{X(j=>({...j,[P]:!j[P]}))},tt=P=>{const j={};return P.forEach(et=>{const u=et.name.split("/");let E=j;u.forEach((L,H)=>{E[L]||(E[L]=H===u.length-1?et:{}),E=E[L]})}),j},lt=(P,j="",et=0)=>i.jsx("div",{className:"sticker-tree-level",style:{paddingLeft:`${et*15}px`},children:Object.keys(P).map(u=>{const E=`${j}/${u}`,L=k[E];return P[u].type==="image"?!N||u.toLowerCase().includes(N.toLowerCase())?i.jsx("div",{className:"sticker-item",onClick:()=>M(P[u].url,u),children:i.jsx("div",{className:"sticker-preview",children:i.jsx("img",{src:P[u].url,alt:u,loading:"lazy",onError:G=>{G.target.style.display="none"}})})},E):null:i.jsxs("div",{className:"sticker-category",children:[i.jsxs("div",{className:"category-header",onClick:()=>st(E),children:[i.jsx("span",{className:`expand-icon ${L?"expanded":""}`,children:"โถ"}),i.jsx("span",{className:"category-name",children:u})]}),L&<(P[u],E,et+1)]},E)})}),Y=h.filter(P=>!N||P.name.toLowerCase().includes(N.toLowerCase()));return f?i.jsx("div",{className:"sticker-modal-overlay",onClick:o,children:i.jsxs("div",{className:"sticker-modal-content",onClick:P=>P.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:[W&&i.jsx(oe,{}),!T&&!W&&S&&i.jsx(qe,{theme:l}),T&&S&&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:N,onChange:P=>w(P.target.value),className:"sticker-search"})})}),c&&i.jsx(oe,{}),I&&i.jsxs("div",{className:"sticker-error",children:[i.jsx("p",{children:I}),i.jsx("button",{onClick:rt,children:"Retry"})]}),!c&&!I&&h.length>0&&i.jsx("div",{className:"sticker-grid",children:lt(tt(Y))})]})]})]})}):null},Xe=[{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"}],Je=({isOpen:f,onClose:o,onAddEmbroidery:a,theme:l,apiKey:s,apiEndpoint:g})=>{const[h,n]=y.useState([]),[c,C]=y.useState(!1),[I,D]=y.useState(null),[m,B]=y.useState(""),[T,w]=y.useState("All"),k=y.useRef(null),X=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{f&&n(Xe)},[f]);const N=S=>{a({type:"embroidery",src:S.url,name:S.name,description:S.description,category:S.category,width:120,height:120,x:100,y:100}),o()},O=h.filter(S=>{const Z=!m||S.name.toLowerCase().includes(m.toLowerCase())||S.description.toLowerCase().includes(m.toLowerCase()),W=T==="All"||S.category===T;return Z&&W});return f?i.jsx("div",{className:"embroidery-modal-overlay",onClick:o,children:i.jsxs("div",{className:"embroidery-modal-content",onClick:S=>S.stopPropagation(),ref:k,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:m,onChange:S=>B(S.target.value),className:"embroidery-search"})}),i.jsxs("div",{className:"category-filter",children:[i.jsx("label",{children:"Category:"}),i.jsx("select",{value:T,onChange:S=>w(S.target.value),className:"category-select",children:X.map(S=>i.jsx("option",{value:S,children:S},S))})]})]}),i.jsxs("div",{className:"embroidery-modal-body",children:[c&&i.jsxs("div",{className:"embroidery-loading",children:[i.jsx("div",{className:"loading-spinner"}),i.jsx("p",{children:"Loading embroidery designs..."})]}),I&&i.jsx("div",{className:"embroidery-error",children:i.jsx("p",{children:I})}),!c&&!I&&i.jsx("div",{className:"embroidery-grid",children:O.map(S=>i.jsxs("div",{className:"embroidery-item",onClick:()=>N(S),title:S.description,children:[i.jsx("div",{className:"embroidery-preview",children:i.jsx("img",{src:S.url,alt:S.name,loading:"lazy",onError:Z=>{console.error("Failed to load embroidery image:",S.url),Z.target.style.display="none"}})}),i.jsxs("div",{className:"embroidery-info",children:[i.jsx("div",{className:"embroidery-name",children:S.name}),i.jsx("div",{className:"embroidery-category",children:S.category})]})]},S.id))}),!c&&!I&&O.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"}],Ke=({isOpen:f,onClose:o,onAddText:a,theme:l})=>{const[s,g]=y.useState(""),[h,n]=y.useState("All"),c=y.useMemo(()=>{const m=Ct.reduce((B,T)=>(B[T.category]=(B[T.category]||0)+1,B),{});return[{name:"All",count:Ct.length},...Object.entries(m).map(([B,T])=>({name:B,count:T}))]},[Ct]),C=y.useMemo(()=>Ct.filter(m=>{const B=!s||m.text.toLowerCase().includes(s.toLowerCase())||m.category.toLowerCase().includes(s.toLowerCase()),T=h==="All"||m.category===h;return B&&T}),[Ct,s,h]),I=m=>{const B={...m,x:100,y:100};a("text",B),o()},D=()=>{a("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),o()};return f?i.jsx("div",{className:"text-templates-modal-overlay",onClick:o,children:i.jsxs("div",{className:"text-templates-modal",onClick:m=>m.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:m=>g(m.target.value),className:"search-input"})}),i.jsx("div",{className:"category-tabs",children:c.map(m=>i.jsxs("button",{className:`category-tab ${h===m.name?"active":""}`,onClick:()=>n(m.name),children:[m.name,i.jsxs("span",{className:"count",children:["(",m.count,")"]})]},m.name))})]}),i.jsxs("div",{className:"templates-grid",children:[i.jsx("div",{className:"custom-text-option",onClick:D,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"})]})}),C.map(m=>i.jsxs("div",{className:"template-item",onClick:()=>I(m),children:[i.jsx("div",{className:"template-preview",style:{fontFamily:m.fontFamily,fontSize:`${Math.min(m.fontSize*.6,18)}px`,fontWeight:m.fontWeight,fontStyle:m.fontStyle,color:m.fill,backgroundColor:m.hasBackground?m.backgroundColor:"transparent",textAlign:m.textAlign||"left",textTransform:m.textTransform||"none",letterSpacing:m.letterSpacing?`${m.letterSpacing}px`:"normal",textShadow:m.hasTextShadow?`${m.textShadowX}px ${m.textShadowY}px ${m.textShadowBlur}px ${m.textShadowColor}`:"none"},children:m.text}),i.jsxs("div",{className:"template-info",children:[i.jsx("span",{className:"template-category",children:m.category}),i.jsx("span",{className:"template-font",children:m.fontFamily})]})]},m.id))]}),i.jsx("div",{className:"modal-footer",children:i.jsxs("div",{className:"results-count",children:[C.length," template",C.length!==1?"s":""," found"]})})]})}):null},Ze=({onAddElement:f,onDeleteElement:o,onDuplicateElement:a,onUndo:l,onRedo:s,onToggleGrid:g,onToggleRulers:h,onToggleSnap:n,onImageUpload:c,canUndo:C,canRedo:I,showGrid:D,showRulers:m,snapToGrid:B,selectedElement:T,theme:w,readOnly:k,apiKey:X,apiEndpoint:N})=>{const[O,S]=y.useState(!1),[Z,W]=y.useState(!1),[ft,Q]=y.useState(!1),[ct,_]=y.useState(!1),[rt,M]=y.useState(!1),[st,tt]=y.useState(!1),[lt,Y]=y.useState(!1),P=U=>{const K=U.target.files[0];K&&K.type.startsWith("image/")&&c(K),U.target.value=""},j=U=>{f("icon",{iconData:U,text:U.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},et=U=>{f("qrcode",U)},u=U=>{f("barcode",U)},E=U=>{f("sticker",U)},L=U=>{f("embroidery",U)},H=(U,K)=>{f(U,K)},G=()=>{tt(!st),Y(!1)},it=()=>{Y(!lt),tt(!1)},J=U=>{U==="custom"?f("text"):U==="templates"&&M(!0),tt(!1)},q=U=>{f(U),Y(!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:!C||k,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:!I||k,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:k,title:"Add Text",onClick:G,children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Text"}),i.jsx("span",{className:`dropdown-arrow ${st?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${st?"show":""}`,children:[i.jsxs("button",{onClick:()=>J("custom"),children:[i.jsx("span",{className:"icon",children:"๐"})," Custom Text"]}),i.jsxs("button",{onClick:()=>J("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:k,onClick:it,children:[i.jsx("span",{className:"icon",children:"โฉ"}),i.jsx("span",{className:"label",children:"Shapes"}),i.jsx("span",{className:`dropdown-arrow ${lt?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${lt?"show":""}`,children:[i.jsxs("button",{onClick:()=>q("rectangle"),children:[i.jsx("span",{className:"icon",children:"โญ"})," Rectangle"]}),i.jsxs("button",{onClick:()=>q("circle"),children:[i.jsx("span",{className:"icon",children:"โ"})," Circle"]}),i.jsxs("button",{onClick:()=>q("triangle"),children:[i.jsx("span",{className:"icon",children:"โฒ"})," Triangle"]}),i.jsxs("button",{onClick:()=>q("star"),children:[i.jsx("span",{className:"icon",children:"โ
"})," Star"]}),i.jsxs("button",{onClick:()=>q("heart"),children:[i.jsx("span",{className:"icon",children:"โฅ"})," Heart"]}),i.jsxs("button",{onClick:()=>q("arrow"),children:[i.jsx("span",{className:"icon",children:"โค"})," Arrow"]}),i.jsxs("button",{onClick:()=>q("diamond"),children:[i.jsx("span",{className:"icon",children:"โ"})," Diamond"]}),i.jsxs("button",{onClick:()=>q("hexagon"),children:[i.jsx("span",{className:"icon",children:"โฌก"})," Hexagon"]}),i.jsxs("button",{onClick:()=>q("pentagon"),children:[i.jsx("span",{className:"icon",children:"โฌ"})," Pentagon"]}),i.jsxs("button",{onClick:()=>q("oval"),children:[i.jsx("span",{className:"icon",children:"โฌฏ"})," Oval"]}),i.jsxs("button",{onClick:()=>q("roundedRectangle"),children:[i.jsx("span",{className:"icon",children:"โข"})," Rounded Rectangle"]}),i.jsxs("button",{onClick:()=>q("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:k?"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:P,disabled:k})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx(Ge,{onSelectIcon:j,theme:w,disabled:k}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>Q(!0),disabled:k,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:()=>S(!0),disabled:k,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:()=>W(!0),disabled:k,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:()=>_(!0),disabled:k,title:"Add Embroidery Design",children:[i.jsx("span",{className:"icon",children:"๐งต"}),i.jsx("span",{className:"label",children:"Embroidery"})]})}),T&&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:k,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:k,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 ${D?"active":""}`,onClick:g,title:"Toggle Grid",children:[i.jsx("span",{className:"icon",children:"โ"}),i.jsx("span",{className:"label",children:"Grid"})]}),i.jsxs("button",{className:`toolbar-btn compact ${m?"active":""}`,onClick:h,title:"Toggle Rulers",children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Rulers"})]}),i.jsxs("button",{className:`toolbar-btn compact ${B?"active":""}`,onClick:n,title:"Snap to Grid",children:[i.jsx("span",{className:"icon",children:"๐งฒ"}),i.jsx("span",{className:"label",children:"Snap"})]})]})]}),i.jsx(_e,{isOpen:O,onClose:()=>S(!1),onAddQRCode:et,theme:w}),i.jsx(Ye,{isOpen:Z,onClose:()=>W(!1),onAddBarcode:u,theme:w}),i.jsx(Ve,{isOpen:ft,onClose:()=>Q(!1),onAddSticker:E,theme:w,apiKey:X,apiEndpoint:N}),i.jsx(Je,{isOpen:ct,onClose:()=>_(!1),onAddEmbroidery:L,theme:w,apiKey:X,apiEndpoint:N}),i.jsx(Ke,{isOpen:rt,onClose:()=>M(!1),onAddText:H,theme:w})]})},ti=({selectedElement:f,onUpdate:o,onMoveLayer:a,availableFonts:l,theme:s})=>{const[g,h]=y.useState(!1);if(!f)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 n=(w,k)=>{o(f.id,{[w]:k})},c=()=>{var w,k,X;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:f.text||"",onChange:N=>n("text",N.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:f.fontFamily||"Arial",onChange:N=>n("fontFamily",N.target.value),children:l.map(N=>i.jsx("option",{value:N,children:N},N))})]}),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:f.fontSize||20,onChange:N=>n("fontSize",parseInt(N.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:f.lineHeight||1.2,onChange:N=>n("lineHeight",parseFloat(N.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:f.fontWeight==="lighter"||f.fontWeight==="300"?"active":"",onClick:()=>n("fontWeight","300"),title:"Light",children:"Light"}),i.jsx("button",{className:!f.fontWeight||f.fontWeight==="normal"||f.fontWeight==="400"?"active":"",onClick:()=>n("fontWeight","normal"),title:"Normal",children:"Normal"}),i.jsx("button",{className:f.fontWeight==="bold"||f.fontWeight==="700"?"active":"",onClick:()=>n("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:f.fontStyle==="italic"?"active":"",onClick:()=>n("fontStyle",f.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:i.jsx("em",{children:"I"})}),i.jsx("button",{className:(w=f.textDecoration)!=null&&w.includes("underline")?"active":"",onClick:()=>{const N=f.textDecoration||"",O=N.split(" ").filter(S=>S&&S!=="underline");N.includes("underline")||O.push("underline"),n("textDecoration",O.join(" ").trim())},title:"Underline",children:i.jsx("u",{children:"U"})}),i.jsx("button",{className:(k=f.textDecoration)!=null&&k.includes("overline")?"active":"",onClick:()=>{const N=f.textDecoration||"",O=N.split(" ").filter(S=>S&&S!=="overline");N.includes("overline")||O.push("overline"),n("textDecoration",O.join(" ").trim())},title:"Overline",children:i.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),i.jsx("button",{className:(X=f.textDecoration)!=null&&X.includes("line-through")?"active":"",onClick:()=>{const N=f.textDecoration||"",O=N.split(" ").filter(S=>S&&S!=="line-through");N.includes("line-through")||O.push("line-through"),n("textDecoration",O.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:!f.textTransform||f.textTransform==="none"?"active":"",onClick:()=>n("textTransform","none"),title:"Normal",children:"Aa"}),i.jsx("button",{className:f.textTransform==="uppercase"?"active":"",onClick:()=>n("textTransform","uppercase"),title:"Uppercase",children:"AA"}),i.jsx("button",{className:f.textTransform==="lowercase"?"active":"",onClick:()=>n("textTransform","lowercase"),title:"Lowercase",children:"aa"}),i.jsx("button",{className:f.textTransform==="capitalize"?"active":"",onClick:()=>n("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:!f.textAlign||f.textAlign==="left"?"active":"",onClick:()=>n("textAlign","left"),title:"Left Align",children:"โฌ
"}),i.jsx("button",{className:f.textAlign==="center"?"active":"",onClick:()=>n("textAlign","center"),title:"Center Align",children:"โ"}),i.jsx("button",{className:f.textAlign==="right"?"active":"",onClick:()=>n("textAlign","right"),title:"Right Align",children:"โก"}),i.jsx("button",{className:f.textAlign==="justify"?"active":"",onClick:()=>n("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:f.fill||"#000000",onChange:N=>n("fill",N.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:f.backgroundColor||"#ffffff",onChange:N=>n("backgroundColor",N.target.value),disabled:!f.hasBackground}),i.jsx("button",{className:`toggle-btn ${f.hasBackground?"active":""}`,onClick:()=>n("hasBackground",!f.hasBackground),title:f.hasBackground?"Remove background":"Add background",children:f.hasBackground?"๐":"๐โ๐จ"})]})]})]})}),g&&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:f.letterSpacing||0,onChange:N=>n("letterSpacing",parseFloat(N.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:f.wordSpacing||0,onChange:N=>n("wordSpacing",parseFloat(N.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 ${f.hasTextShadow?"active":""}`,onClick:()=>n("hasTextShadow",!f.hasTextShadow),children:f.hasTextShadow?"Remove Shadow":"Add Shadow"})}),f.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:f.textShadowX||2,onChange:N=>n("textShadowX",parseInt(N.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:f.textShadowY||2,onChange:N=>n("textShadowY",parseInt(N.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Blur"}),i.jsx("input",{type:"number",value:f.textShadowBlur||4,onChange:N=>n("textShadowBlur",parseInt(N.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:f.textShadowColor||"#000000",onChange:N=>n("textShadowColor",N.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:f.stroke||"#000000",onChange:N=>n("stroke",N.target.value)})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||0,onChange:N=>n("strokeWidth",parseInt(N.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:f.opacity||1,onChange:N=>n("opacity",parseFloat(N.target.value))}),i.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Variant"}),i.jsxs("select",{value:f.fontVariant||"normal",onChange:N=>n("fontVariant",N.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:f.writingMode||"horizontal-tb",onChange:N=>n("writingMode",N.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:!f.direction||f.direction==="ltr"?"active":"",onClick:()=>n("direction","ltr"),title:"Left to Right",children:"LTR"}),i.jsx("button",{className:f.direction==="rtl"?"active":"",onClick:()=>n("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:f.backgroundPadding||5,onChange:N=>n("backgroundPadding",parseInt(N.target.value)),min:"0",max:"50",disabled:!f.hasBackground})]})]})]})},C=()=>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:f.fill||"#000000",onChange:w=>n("fill",w.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:w=>n("stroke",w.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||2,onChange:w=>n("strokeWidth",parseInt(w.target.value)),min:"0",max:"20"})]}),f.type==="star"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Star Points"}),i.jsx("input",{type:"number",value:f.numPoints||5,onChange:w=>n("numPoints",parseInt(w.target.value)),min:"3",max:"20"})]}),f.type==="roundedRectangle"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Corner Radius"}),i.jsx("input",{type:"number",value:f.cornerRadius||10,onChange:w=>n("cornerRadius",parseInt(w.target.value)),min:"0",max:"50"})]})]}),I=()=>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:f.opacity||1,onChange:w=>n("opacity",parseFloat(w.target.value))}),i.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),g&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Border Radius"}),i.jsx("input",{type:"number",value:f.borderRadius||0,onChange:w=>n("borderRadius",parseInt(w.target.value)),min:"0",max:"50"})]})]}),D=()=>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(f.x)||0,onChange:w=>n("x",parseInt(w.target.value))})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Y"}),i.jsx("input",{type:"number",value:Math.round(f.y)||0,onChange:w=>n("y",parseInt(w.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(f.width)||0,onChange:w=>n("width",parseInt(w.target.value)),min:"1"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Height"}),i.jsx("input",{type:"number",value:Math.round(f.height)||0,onChange:w=>n("height",parseInt(w.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:f.rotation||0,onChange:w=>n("rotation",parseInt(w.target.value))}),i.jsxs("span",{children:[f.rotation||0,"ยฐ"]})]})]}),m=()=>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:f.strokeWidth||f.height||2,onChange:w=>{const k=parseInt(w.target.value);n("strokeWidth",k),n("height",k)},min:"1",max:"50"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Length"}),i.jsx("input",{type:"number",value:f.width||200,onChange:w=>n("width",parseInt(w.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:f.stroke||f.fill||"#000000",onChange:w=>{n("stroke",w.target.value),n("fill",w.target.value)}}),i.jsx("input",{type:"text",value:f.stroke||f.fill||"#000000",onChange:w=>{n("stroke",w.target.value),n("fill",w.target.value)},placeholder:"#000000"})]})]})]}),B=()=>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(f.id,"top"),children:"Bring to Front"}),i.jsx("button",{onClick:()=>a(f.id,"up"),children:"Bring Forward"}),i.jsx("button",{onClick:()=>a(f.id,"down"),children:"Send Backward"}),i.jsx("button",{onClick:()=>a(f.id,"bottom"),children:"Send to Back"})]})]}),T=["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:f.type})]}),i.jsxs("div",{className:"panel-content",children:[f.type==="text"&&c(),T.includes(f.type)&&C(),f.type==="image"&&I(),f.type==="horizontalLine"&&m(),D(),B(),i.jsx("div",{className:"property-group",children:i.jsxs("button",{className:"toggle-advanced",onClick:()=>h(!g),children:[g?"Hide":"Show"," Advanced Options"]})})]})]})},ei=({elements:f,selectedElement:o,onSelectElement:a,onMoveLayer:l,onDeleteElement:s,theme:g})=>{const h=(c,C)=>{switch(c){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"?"}},n=c=>{var C,I;if(c.type==="text")return c.isIcon&&c.iconData?`Icon: ${c.iconData.name}`:((C=c.text)==null?void 0:C.substring(0,20))+(((I=c.text)==null?void 0:I.length)>20?"...":"")||"Text";if(c.type==="qrcode")return`QR Code: ${(c.data||"").substring(0,15)+((c.data||"").length>15?"...":"")}`;if(c.type==="barcode"){const D=c.format||"CODE128",m=c.data||"";return`Barcode (${D}): ${m.substring(0,10)+(m.length>10?"...":"")}`}return c.type==="sticker"?`Sticker: ${(c.name||"Untitled").substring(0,15)}`:c.type==="embroidery"?`Embroidery: ${(c.name||"Design").substring(0,15)}`:c.type.charAt(0).toUpperCase()+c.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:f.length})]}),i.jsx("div",{className:"layers-list",children:f.length===0?i.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...f].reverse().map((c,C)=>i.jsxs("div",{className:`layer-item ${(o==null?void 0:o.id)===c.id?"selected":""}`,onClick:()=>a(c),children:[i.jsxs("div",{className:"layer-info",children:[i.jsx("span",{className:"layer-icon",children:h(c.type)}),i.jsx("span",{className:"layer-name",children:n(c)})]}),i.jsxs("div",{className:"layer-controls",children:[i.jsx("button",{className:"layer-btn",onClick:I=>{I.stopPropagation(),l(c.id,"up")},disabled:C===0,title:"Move Up",children:"โ"}),i.jsx("button",{className:"layer-btn",onClick:I=>{I.stopPropagation(),l(c.id,"down")},disabled:C===f.length-1,title:"Move Down",children:"โ"}),i.jsx("button",{className:"layer-btn delete",onClick:I=>{I.stopPropagation(),s(c.id)},title:"Delete",children:"ร"})]})]},c.id))})]})};class ii{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}async exportAllSections(o,a,l,s,g="png",h=!0,n=null){const c={};for(const C of a){const I=C.id||C.sectionName,D=o[I];if(!D||!D.elements||D.elements.length===0){console.log(`Skipping section ${I} - no elements`);continue}if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),h){let B=C.image||C.sectionImage;if(n&&n.sectionImage&&(C.sectionName==="Front"||n.sections&&Object.keys(n.sections).includes(C.sectionName))&&(B=n.sectionImage),B)try{const T=await this.loadImage(B);await this.processImageColor(T,D.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(T){console.warn("Failed to load background image:",T)}}else this.ctx.clearRect(0,0,l,s);for(const B of D.elements)await this.drawElement(B);const m=this.canvas.toDataURL(`image/${g}`,g==="jpeg"?.9:void 0);c[I]={dataUrl:m,blob:await this.dataUrlToBlob(m)}}return c}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:g}=o[s],h=URL.createObjectURL(g),n=document.createElement("a");n.href=h,n.download=`${a}-${s}.png`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(h)}else for(const s of l){const{blob:g}=o[s],h=URL.createObjectURL(g),n=document.createElement("a");n.href=h,n.download=`${a}-${s}.png`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(h),await new Promise(c=>setTimeout(c,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 g=s.getImageData(0,0,l.width,l.height),h=g.data,n=this.hexToRgb(a);if(!n){console.warn("Invalid target color:",a);return}const{r:c,g:C,b:I}=n;for(let D=0;D<h.length;D+=4){if(h[D+3]===0)continue;const B=this.getLuma(h[D],h[D+1],h[D+2]);h[D]=Math.round(c*B),h[D+1]=Math.round(C*B),h[D+2]=Math.round(I*B)}return s.putImageData(g,0,0),this.processedImage=new Image,new Promise(D=>{this.processedImage.onload=()=>{D()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),D()},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,g)=>{const h=g*l;o.stroke&&o.strokeWidth>0&&this.ctx.strokeText(s,0,h),this.ctx.fillText(s,0,h)})}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,g=s*.4,h=o.numPoints||5;this.ctx.beginPath();for(let n=0;n<h*2;n++){const c=n%2===0?s:g,C=n*Math.PI/h,I=a+Math.cos(C)*c,D=l+Math.sin(C)*c;n===0?this.ctx.moveTo(I,D):this.ctx.lineTo(I,D)}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"),g=new Image;g.onload=()=>{l.width=g.width,l.height=g.height,s.drawImage(g,0,0),l.toBlob(a)},g.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,g=6;this.ctx.beginPath();for(let h=0;h<g;h++){const n=h*2*Math.PI/g-Math.PI/2,c=a+s*Math.cos(n),C=l+s*Math.sin(n);h===0?this.ctx.moveTo(c,C):this.ctx.lineTo(c,C)}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,g=5;this.ctx.beginPath();for(let h=0;h<g;h++){const n=h*2*Math.PI/g-Math.PI/2,c=a+s*Math.cos(n),C=l+s*Math.sin(n);h===0?this.ctx.moveTo(c,C):this.ctx.lineTo(c,C)}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,g=0;this.ctx.beginPath();const h=l*.3;this.ctx.moveTo(s+a/2,g+h),this.ctx.bezierCurveTo(s+a/2,g,s,g,s,g+h),this.ctx.bezierCurveTo(s,g+(l+h)/2,s+a/2,g+(l+h)/2,s+a/2,g+l),this.ctx.bezierCurveTo(s+a/2,g+(l+h)/2,s+a,g+(l+h)/2,s+a,g+h),this.ctx.bezierCurveTo(s+a,g,s+a/2,g,s+a/2,g+h),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,g=o.height/2;this.ctx.beginPath(),this.ctx.ellipse(a,l,s,g,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,g){this.ctx.beginPath(),this.ctx.moveTo(o+g,a),this.ctx.lineTo(o+l-g,a),this.ctx.quadraticCurveTo(o+l,a,o+l,a+g),this.ctx.lineTo(o+l,a+s-g),this.ctx.quadraticCurveTo(o+l,a+s,o+l-g,a+s),this.ctx.lineTo(o+g,a+s),this.ctx.quadraticCurveTo(o,a+s,o,a+s-g),this.ctx.lineTo(o,a+g),this.ctx.quadraticCurveTo(o,a,o+g,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,g="png",h=null){var m,B;const n=[],c=[],C={};for(const T of a){const w=T.id||T.sectionName,k=o[w];if(!k||!k.elements||k.elements.length===0){console.log(`Skipping section ${w} - no elements`);continue}let X=T.image||T.sectionImage;h&&h.sectionImage&&(T.sectionName==="Front"||h.sections&&Object.keys(h.sections).includes(T.sectionName))&&(X=h.sectionImage);const N={...k,backgroundImage:X,sectionImage:X,sectionName:w,selectedColor:k.selectedColor||"#FFFFFF",canvasWidth:l,canvasHeight:s};C[w]=N;const O=await this.exportSectionAsBlob(k,T,l,s,g,!0,h);if(O){const Z=await this.blobToFile(O,`${w}-full.${g}`,`image/${g}`);n.push({sectionName:w,sectionImage:Z})}const S=await this.exportSectionAsBlob(k,T,l,s,g,!1,h);if(S){const Z=await this.blobToFile(S,`${w}-print.${g}`,`image/${g}`);c.push({sectionName:w,sectionImage:Z})}}let I=((m=a[0])==null?void 0:m.image)||((B=a[0])==null?void 0:B.sectionImage);if(h&&h.sectionImage){const T=a[0];T&&(T.sectionName==="Front"||h.sections&&Object.keys(h.sections).includes(T.sectionName))&&(I=h.sectionImage)}const D={sections:C,canvasWidth:l,canvasHeight:s,sectionImage:I,format:g,timestamp:new Date().toISOString(),version:"1.0",...h&&{initData:{sectionImage:h.sectionImage,sections:h.sections?Object.keys(h.sections):[]}},product:{sections:a.map(T=>({sectionName:T.sectionName||T.id,sectionImage:T.image||T.sectionImage,id:T.id||T.sectionName}))}};return{fullDesign:n,printReady:c,designFile:JSON.stringify(D)}}async exportSectionAsBlob(o,a,l,s,g="png",h=!0,n=null){try{if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),h){let c=a.image||a.sectionImage;if(n&&n.sectionImage&&(a.sectionName==="Front"||n.sections&&Object.keys(n.sections).includes(a.sectionName))&&(c=n.sectionImage),c)try{const C=await this.loadImage(c);await this.processImageColor(C,o.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(C){console.warn("Failed to load background image:",C)}}else this.ctx.clearRect(0,0,l,s);for(const c of o.elements)await this.drawElement(c);return new Promise(c=>{this.canvas.toBlob(c,`image/${g}`,g==="jpeg"?.9:void 0)})}catch(c){return console.error("Error exporting section as blob:",c),null}}async exportCurrentSectionAsJSON(o,a="png",l=null){var B,T,w;const s=((B=o.activeSection)==null?void 0:B.sectionName)||"main";let g=((T=o.activeSection)==null?void 0:T.sectionImage)||((w=o.activeSection)==null?void 0:w.image);l&&l.sectionImage&&(s==="Front"||l.sections&&Object.keys(l.sections).includes(s))&&(g=l.sectionImage);const h={elements:o.elements,selectedColor:o.selectedColor,canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,backgroundImage:g,sectionImage:g,sectionName:s,zoomLevel:o.zoomLevel,showGrid:o.showGrid,snapToGrid:o.snapToGrid},n={id:s,sectionName:s,image:g,sectionImage:g},c=[],C=[],I=await this.exportSectionAsBlob(h,n,o.canvasWidth,o.canvasHeight,a,!0,l);if(I){const k=await this.blobToFile(I,`${s}-full.${a}`,`image/${a}`);c.push({sectionName:s,sectionImage:k})}const D=await this.exportSectionAsBlob(h,n,o.canvasWidth,o.canvasHeight,a,!1,l);if(D){const k=await this.blobToFile(D,`${s}-print.${a}`,`image/${a}`);C.push({sectionName:s,sectionImage:k})}const m={sections:{[s]:h},canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,sectionImage:g,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:g,id:s}]}};return{fullDesign:c,printReady:C,designFile:JSON.stringify(m)}}}class oi{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),g=new Date().toISOString(),h={id:s,name:o,timestamp:g,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:g,thumbnail:a.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+s,JSON.stringify(h)),this.updateDesignsList(s,o,g),{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 h=this.getAllDesigns().find(n=>n.name===o);if(!h)return{success:!1,error:"Design not found"};a=h.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),g=new Blob([s],{type:"application/json"}),h=URL.createObjectURL(g),n=document.createElement("a");return n.href=h,n.download=`${l.name}_${l.id}.json`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(h),{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 g=JSON.parse(s.target.result);if(!this.validateDesignData(g)){a({success:!1,error:"Invalid design file format"});return}const h=this.generateDesignId(g.name+"_imported");g.id=h,g.name+="_imported",g.timestamp=new Date().toISOString(),g.metadata.lastModified=g.timestamp,this.storage.setItem(this.STORAGE_PREFIX+h,JSON.stringify(g)),this.updateDesignsList(h,g.name,g.timestamp),a({success:!0,data:g,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(),g=s.findIndex(n=>n.id===o),h={id:o,name:a,timestamp:l,lastModified:l};g>=0?s[g]=h:s.push(h),s.sort((n,c)=>new Date(c.timestamp)-new Date(n.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 ae=y.forwardRef((f,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:g}=f,[h,n]=y.useState([]),[c,C]=y.useState(null),[I,D]=y.useState(!1),[m,B]=y.useState(!1),[T,w]=y.useState(!1),[k,X]=y.useState({x:0,y:0}),[N,O]=y.useState(null),[S,Z]=y.useState(800),[W,ft]=y.useState(600),[Q,ct]=y.useState(1),[_,rt]=y.useState(s.colorSettings[0]),[M,st]=y.useState(!1),[tt,lt]=y.useState(!0),[Y,P]=y.useState(!0),[j,et]=y.useState(s.sections[0]),[u,E]=y.useState(!1),[L,H]=y.useState({}),[G,it]=y.useState([]),[J,q]=y.useState(-1),[U]=y.useState(new oi("localStorage")),K=y.useRef(null),wt=y.useRef(null),yt=y.useRef(null),ut=y.useRef(null),Lt=y.useRef(null),Rt=y.useRef(new ii),Et=y.useRef(!1),[ht,se]=y.useState(null),at=y.useCallback(()=>{const e={elements:JSON.parse(JSON.stringify(h)),selectedElement:c?{...c}:null,timestamp:Date.now()},t=G.slice(0,J+1);t.push(e),t.length>50?t.shift():q(J+1),it(t)},[h,c,G,J]),bt=y.useCallback(()=>({elements:h,canvasWidth:S,canvasHeight:W,selectedColor:_,activeSection:j,product:s,sectionDesigns:L,zoomLevel:Q,showGrid:M,snapToGrid:Y,selectedElement:c?{...c}:null,canvasRef:K}),[h,S,W,_,j,s,L,Q,M,Y,c]);y.useEffect(()=>{const t=setTimeout(async()=>{if(h.length===0&&G.length<=1){if(g)try{const A=await fetch(g);if(A.ok){const z=await A.text();if(z.trim()){const $=JSON.parse(z.trim());if(console.log("Loading design from file:",$),se($),$.sections&&typeof $.sections=="object"){const nt=Object.keys($.sections)[0],ot=$.sections[nt];if(ot&&ot.elements){n(ot.elements||[]),Z(ot.canvasWidth||800),ft(ot.canvasHeight||600),rt(ot.selectedColor||s.colorSettings[0]),ct(ot.zoomLevel||1),st(ot.showGrid||!1),P(ot.snapToGrid||!0),C(null),$.sections&&H($.sections);const Nt=s.sections.find(It=>It.sectionName===nt);Nt&&et(Nt),it([]),q(-1),setTimeout(()=>{at()},100);return}}}}else console.warn("Failed to load design file, using default text")}catch(A){console.error("Error loading design file:",A),console.warn("Using default text instead")}const r=24,d="Arial",x="Change me",b=document.createElement("canvas").getContext("2d");b.font=`${r}px ${d}`;const v=b.measureText(x).width,R={id:dt(),type:"text",x:S/2-v/2,y:W/2-r/2,width:v,height:r,text:x,fontSize:r,fontFamily:d,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};n([R]),C(R),setTimeout(()=>{at()},100)}},300);return()=>clearTimeout(t)},[g,s.colorSettings,s.sections]);const Dt=y.useCallback((e="png",t=!0)=>{const r=bt();return s.sections,Rt.current.exportAllSections({[(j==null?void 0:j.sectionName)||"main"]:r},[{id:(j==null?void 0:j.sectionName)||"main",sectionName:(j==null?void 0:j.sectionName)||"main",image:j==null?void 0:j.sectionImage,sectionImage:j==null?void 0:j.sectionImage}],S,W,e,t,ht)},[bt,s.sections,j,S,W]),le=["Arial","Helvetica","Times New Roman","Georgia","Verdana","Courier New","Tahoma","Trebuchet MS","Impact","Comic Sans MS","Palatino","Garamond","Bookman","Avant Garde","Century Gothic"],jt=20;y.useEffect(()=>{const e=()=>E(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),y.useEffect(()=>{const e=document.createElement("canvas");e.width=S,e.height=W,Lt.current=e},[S,W]),y.useEffect(()=>{G.length===0&&at()},[]);const Tt=(e,t,r,d,x,p)=>{e.beginPath(),e.moveTo(t+p,r),e.lineTo(t+d-p,r),e.quadraticCurveTo(t+d,r,t+d,r+p),e.lineTo(t+d,r+x-p),e.quadraticCurveTo(t+d,r+x,t+d-p,r+x),e.lineTo(t+p,r+x),e.quadraticCurveTo(t,r+x,t,r+x-p),e.lineTo(t,r+p),e.quadraticCurveTo(t,r,t+p,r),e.closePath()},Pt=(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),d=r.actualBoundingBoxAscent??t.fontSize*.8,x=r.actualBoundingBoxDescent??t.fontSize*.2,p=r.actualBoundingBoxLeft??0,b=r.actualBoundingBoxRight??r.width,F=p+b,v=d+x,R=t.x,A=t.y,z=R-F/2-p,$=A-v/2-d;return e.restore(),{x:z,y:$,width:F,height:v,cx:R,cy:A}},ne=(e,t)=>{if(!t)return;const r=8,d=8,x=4,p=30,b=Pt(e,t),F=t.isIcon?Math.max(r,12):r,v={x:-b.width/2-F,y:-b.height/2-F,w:b.width+F*2,h:b.height+F*2};e.save(),e.translate(b.cx,b.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,Tt(e,v.x-1,v.y-1,v.w+2,v.h+2,x+1),e.stroke(),e.strokeStyle=R,e.lineWidth=2,e.setLineDash([8,4]),Tt(e,v.x,v.y,v.w,v.h,x),e.stroke(),e.lineDashOffset=-(Date.now()/50)%12,e.strokeStyle="#ffffff",e.lineWidth=1,e.setLineDash([4,8]),Tt(e,v.x,v.y,v.w,v.h,x),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($=>{e.fillStyle="rgba(0,0,0,.2)",e.fillRect($.x-d/2+1,$.y-d/2+1,d,d),e.fillStyle="#ffffff",e.fillRect($.x-d/2,$.y-d/2,d,d),e.strokeStyle="#3b82f6",e.lineWidth=1,e.strokeRect($.x-d/2,$.y-d/2,d,d)});const A=0,z=v.y-p;e.strokeStyle="#3b82f6",e.lineWidth=1,e.setLineDash([2,2]),e.beginPath(),e.moveTo(A,z+12),e.lineTo(A,v.y),e.stroke(),e.setLineDash([]),e.beginPath(),e.arc(A,z,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(A,z,6,-Math.PI/2,Math.PI,!1),e.stroke(),e.beginPath(),e.moveTo(A-6,z),e.lineTo(A-3,z-3),e.lineTo(A-3,z+3),e.closePath(),e.fillStyle="#ffffff",e.fill(),e.restore()},ce=(e,t)=>{if(!t)return[];const r=Pt(e,t),d=t.isIcon?Math.max(8,12):8,x=8,p=30,b=(t.rotation||0)*Math.PI/180,F={x:-r.width/2-d,y:-r.height/2-d,w:r.width+d*2,h:r.height+d*2},v=[{x:F.x,y:F.y,type:"nw-resize"},{x:F.x+F.w,y:F.y,type:"ne-resize"},{x:F.x+F.w,y:F.y+F.h,type:"se-resize"},{x:F.x,y:F.y+F.h,type:"sw-resize"},{x:0,y:F.y-p,type:"rotate"}],R=Math.cos(b),A=Math.sin(b);return v.map(z=>({x:r.cx+(z.x*R-z.y*A),y:r.cy+(z.x*A+z.y*R),type:z.type,size:z.type==="rotate"?24:x}))},Ut=(e,t,r)=>{if(!r)return null;const d=K.current;if(!d)return null;const x=d.getContext("2d"),p=ce(x,r);for(const b of p){const F=e-b.x,v=t-b.y;if(Math.sqrt(F*F+v*v)<=b.size/2)return b.type}return null},vt=y.useCallback(()=>{if(J>0){const e=G[J-1];n(e.elements),C(e.selectedElement),q(J-1)}},[G,J]),mt=y.useCallback(()=>{if(J<G.length-1){const e=G[J+1];n(e.elements),C(e.selectedElement),q(J+1)}},[G,J]),xt=e=>Y?Math.round(e/jt)*jt:e;y.useEffect(()=>{if(j!=null&&j.sectionImage){yt.current=null,ut.current=null;const e=K.current;if(e&&e.getContext("2d").clearRect(0,0,S,W),g&&!ht)return;const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{yt.current=t,Yt(t,_)},t.onerror=()=>{console.error("Failed to load background image:",j.sectionImage),V()};let r=j.sectionImage;ht&&ht.sectionImage&&(j.sectionName==="Front"||ht.sections&&Object.keys(ht.sections).includes(j.sectionName))&&(r=ht.sectionImage),t.src=r}else yt.current=null,ut.current=null,V()},[j,_,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")&&c&&!l){t.preventDefault();const x=c;n(p=>p.filter(b=>b.id!==x.id)),C(null),at()}if(t.ctrlKey||t.metaKey)switch(t.key){case"z":t.shiftKey?(t.preventDefault(),mt()):(t.preventDefault(),vt());break;case"y":t.preventDefault(),mt();break}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[c,l,vt,mt,at]);const de=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},dt=()=>`element_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,fe=e=>{e.strokeStyle="#e0e0e0",e.lineWidth=1,e.setLineDash([1,1]);for(let t=0;t<=S;t+=jt)e.beginPath(),e.moveTo(t,0),e.lineTo(t,W),e.stroke();for(let t=0;t<=W;t+=jt)e.beginPath(),e.moveTo(0,t),e.lineTo(S,t),e.stroke();e.setLineDash([])},he=(e,t)=>{e.save();const r=t.x+t.width/2,d=t.y+t.height/2;switch(e.translate(r,d),t.rotation&&e.rotate(t.rotation*Math.PI/180),e.translate(-t.width/2,-t.height/2),t.type){case"text":ye(e,t);break;case"rectangle":ue(e,t);break;case"circle":me(e,t);break;case"triangle":pe(e,t);break;case"star":we(e,t);break;case"arrow":be(e,t);break;case"diamond":ve(e,t);break;case"hexagon":ke(e,t);break;case"pentagon":Se(e,t);break;case"heart":Fe(e,t);break;case"oval":Ce(e,t);break;case"roundedRectangle":je(e,t);break;case"image":Ne(e,t);break;case"qrcode":xe(e,t);break;case"barcode":ge(e,t);break;case"sticker":Ie(e,t);break;case"horizontalLine":Te(e,t);break;case"embroidery":Ae(e,t);break}e.restore()},ge=(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=()=>{n(d=>d.map(x=>x.id===t.id?{...x,imageObject:r,imageLoading:!1}:x))},r.onerror=()=>{n(d=>d.map(x=>x.id===t.id?{...x,imageLoading:!1}:x))},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))},xe=(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=()=>{n(d=>d.map(x=>x.id===t.id?{...x,imageObject:r,imageLoading:!1}:x))},r.onerror=()=>{n(d=>d.map(x=>x.id===t.id?{...x,imageLoading:!1}:x))},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))},ye=(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,F=>F.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 d=r.split(`
|
|
991
|
-
`),x=(t.fontSize||20)*(t.lineHeight||1.2),p=Math.max(...d.map(F=>e.measureText(F).width)),b=d.length*x;if(t.backgroundColor&&t.backgroundColor!=="transparent"){e.fillStyle=t.backgroundColor;const F=t.backgroundPadding||4;e.fillRect(-F,-F,p+F*2,b+F*2),e.fillStyle=t.fill||"#000000"}d.forEach((F,v)=>{const R=v*x,A=e.measureText(F).width;t.stroke&&t.strokeWidth>0&&e.strokeText(F,0,R),e.fillText(F,0,R);const z=t.fontSize||20,$=t.decorationColor||t.fill||"#000000",nt=Math.max(1,z/20);if(e.strokeStyle=$,e.lineWidth=nt,t.textDecoration==="underline"||t.underline){const ot=R+z+2;e.beginPath(),e.moveTo(0,ot),e.lineTo(A,ot),e.stroke()}if(t.textDecoration==="overline"||t.overline){const ot=R-2;e.beginPath(),e.moveTo(0,ot),e.lineTo(A,ot),e.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const ot=R+z/2;e.beginPath(),e.moveTo(0,ot),e.lineTo(A,ot),e.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(Nt=>{switch(Nt.trim()){case"underline":const It=R+z+2;e.beginPath(),e.moveTo(0,It),e.lineTo(A,It),e.stroke();break;case"overline":const Jt=R-2;e.beginPath(),e.moveTo(0,Jt),e.lineTo(A,Jt),e.stroke();break;case"line-through":const Kt=R+z/2;e.beginPath(),e.moveTo(0,Kt),e.lineTo(A,Kt),e.stroke();break}})}),e.restore()},ue=(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))},me=(e,t)=>{const r=Math.min(t.width,t.height)/2,d=t.width/2,x=t.height/2;e.beginPath(),e.arc(d,x,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())},pe=(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())},we=(e,t)=>{const r=t.width/2,d=t.height/2,x=Math.min(t.width,t.height)/2,p=x*.4,b=t.numPoints||5;e.beginPath();for(let F=0;F<b*2;F++){const v=F%2===0?x:p,R=F*Math.PI/b,A=r+Math.cos(R)*v,z=d+Math.sin(R)*v;F===0?e.moveTo(A,z):e.lineTo(A,z)}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())},be=(e,t)=>{const r=t.width,d=t.height,x=r*.3;e.beginPath(),e.moveTo(r/2,0),e.lineTo(r,d*.6),e.lineTo(r-x,d*.6),e.lineTo(r-x,d),e.lineTo(x,d),e.lineTo(x,d*.6),e.lineTo(0,d*.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())},ve=(e,t)=>{const r=t.width/2,d=t.height/2;e.beginPath(),e.moveTo(r,0),e.lineTo(t.width,d),e.lineTo(r,t.height),e.lineTo(0,d),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,d=t.height/2,x=Math.min(t.width,t.height)/2,p=6;e.beginPath();for(let b=0;b<p;b++){const F=b*2*Math.PI/p-Math.PI/2,v=r+x*Math.cos(F),R=d+x*Math.sin(F);b===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())},Se=(e,t)=>{const r=t.width/2,d=t.height/2,x=Math.min(t.width,t.height)/2,p=5;e.beginPath();for(let b=0;b<p;b++){const F=b*2*Math.PI/p-Math.PI/2,v=r+x*Math.cos(F),R=d+x*Math.sin(F);b===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())},Fe=(e,t)=>{const r=t.width,d=t.height,x=0,p=0;e.beginPath();const b=d*.3;e.moveTo(x+r/2,p+b),e.bezierCurveTo(x+r/2,p,x,p,x,p+b),e.bezierCurveTo(x,p+(d+b)/2,x+r/2,p+(d+b)/2,x+r/2,p+d),e.bezierCurveTo(x+r/2,p+(d+b)/2,x+r,p+(d+b)/2,x+r,p+b),e.bezierCurveTo(x+r,p,x+r/2,p,x+r/2,p+b),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,d=t.height/2,x=t.width/2,p=t.height/2;e.beginPath(),e.ellipse(r,d,x,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())},je=(e,t)=>{const r=Math.min(t.width,t.height)*.1;Tt(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())},Te=(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()},Ne=(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=()=>{V()},t._imageElement.onerror=()=>{console.error("Failed to load image:",r),t._imageLoadError=!0,V()},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(d){console.error("Error drawing image:",d),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)},Ie=(e,t)=>{if(t.src&&!t.imageLoading&&!t.loadedImage){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{t.loadedImage=r,t.imageLoading=!1,V()},r.onerror=()=>{console.error("Failed to load sticker:",t.src),t.imageLoading=!1,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.fillText("Failed to load",t.width/2,t.height/2)},r.src=t.src}else t.loadedImage?e.drawImage(t.loadedImage,0,0,t.width,t.height):t.imageLoading&&(e.fillStyle="#f8f9fa",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#dee2e6",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#6c757d",e.font="12px Arial",e.textAlign="center",e.fillText("Loading...",t.width/2,t.height/2))},Ae=(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),kt(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,V()):(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),kt(e,t,"Failed to load")},r.src=t.src,kt(e,t,"Loading...")}else t.imageLoading?kt(e,t,"Loading..."):kt(e,t)},kt=(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)},Ot=(e,t,r)=>{if(!r)return!1;const d=r.x+r.width/2,x=r.y+r.height/2,p=e-d,b=t-x,F=-(r.rotation||0)*Math.PI/180,v=Math.cos(F),R=Math.sin(F),A=p*v-b*R,z=p*R+b*v,$=r.width/2,nt=r.height/2;return A>=-$&&A<=$&&z>=-nt&&z<=nt},Re=y.useCallback(()=>{(I||m||T)&&at(),D(!1),B(!1),w(!1),O(null);const e=K.current;e&&(e.style.cursor="default")},[I,m,T,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(),vt()):(t.key==="z"&&t.shiftKey||t.key==="y")&&(t.preventDefault(),mt())),(t.key==="Delete"||t.key==="Backspace")&&c&&(Bt(c.id),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="d"&&c&&($t(c.id),t.preventDefault()),c&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))){t.preventDefault();const x=t.shiftKey?10:1;let p={};switch(t.key){case"ArrowUp":p.y=c.y-x;break;case"ArrowDown":p.y=c.y+x;break;case"ArrowLeft":p.x=c.x-x;break;case"ArrowRight":p.x=c.x+x;break}Qt(c.id,p),at()}};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[c,vt,mt,l]);const Ee=(e,t={})=>{const r={id:dt(),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=dt(),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=dt(),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=dt(),r.imageData=t.imageData||null,r.width=t.width||200,r.height=t.height||200;break;case"qrcode":r.id=dt(),r.type="qrcode",r.x=(t==null?void 0:t.x)||S/2-((t==null?void 0:t.width)||100)/2,r.y=(t==null?void 0:t.y)||W/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=dt(),r.type="barcode",r.x=(t==null?void 0:t.x)||S/2-((t==null?void 0:t.width)||200)/2,r.y=(t==null?void 0:t.y)||W/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=dt(),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=dt(),r.type="horizontalLine",r.x=S/2-100,r.y=W/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=dt(),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}n(d=>[...d,r]),C(r),at()},Qt=(e,t)=>{n(r=>r.map(d=>d.id===e?{...d,...t}:d)),c&&c.id===e&&C(r=>({...r,...t}))},Bt=y.useCallback(()=>{c&&(n(e=>e.filter(t=>t.id!==c.id)),C(null),at())},[c,at]),$t=e=>{const t=h.find(r=>r.id===e);if(t){const r={...t,id:dt(),x:t.x+20,y:t.y+20};n(d=>[...d,r]),C(r),at()}},Ht=(e,t)=>{const r=h.findIndex(p=>p.id===e);if(r===-1)return;const d=[...h],x=d[r];t==="up"&&r<d.length-1?(d[r]=d[r+1],d[r+1]=x):t==="down"&&r>0?(d[r]=d[r-1],d[r-1]=x):t==="top"?(d.splice(r,1),d.push(x)):t==="bottom"&&(d.splice(r,1),d.unshift(x)),n(d),at()};y.useCallback(()=>{j&&H(e=>({...e,[j.sectionName]:{elements:[...h],selectedColor:_}}))},[j,h,_]);const[,De]=y.useReducer(e=>e+1,0);setTimeout(()=>{De()},20),y.useImperativeHandle(o,()=>({handleSectionChange:Gt,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();console.log("canvas data to export: ",t);const r={},d=(j==null?void 0:j.sectionName)||"main";r[d]={elements:t.elements,selectedColor:t.selectedColor,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight},t.sectionDesigns&&typeof t.sectionDesigns=="object"&&Object.assign(r,t.sectionDesigns);const x=s.sections&&s.sections.length>0?s.sections:[{id:d,sectionName:d,image:j==null?void 0:j.sectionImage,sectionImage:j==null?void 0:j.sectionImage}];return await Rt.current.exportAllSectionsAsJSON(r,x,S,W,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),V=y.useCallback(()=>{const e=K.current;if(!e||zt.current)return;zt.current=!0;const t=e.getContext("2d");t.clearRect(0,0,S,W),ut.current&&t.drawImage(ut.current,0,0,S,W),M&&fe(t),h.forEach(r=>{t.save(),t.globalAlpha=r.opacity||1,he(t,r),t.restore()}),c&&ne(t,c),zt.current=!1},[h,c,S,W,M]),pt=y.useCallback(()=>{gt.current&&cancelAnimationFrame(gt.current),gt.current=requestAnimationFrame(()=>{V(),gt.current=null})},[V]);y.useEffect(()=>{pt()},[h,c,S,W,M,pt]),y.useEffect(()=>{ut.current&&pt()},[ut.current,pt]),y.useEffect(()=>()=>{gt.current&&cancelAnimationFrame(gt.current)},[]);const Wt=y.useCallback(()=>{V(),(I||m||T)&&(gt.current=requestAnimationFrame(Wt))},[V,I,m,T]);y.useEffect(()=>{I||m||T?Wt():(gt.current&&(cancelAnimationFrame(gt.current),gt.current=null),pt())},[I,m,T,Wt,pt]);const Be=y.useCallback(e=>{if(l)return;const r=K.current.getBoundingClientRect(),d=(e.clientX-r.left)/Q,x=(e.clientY-r.top)/Q;if(X({x:d,y:x}),c){const b=Ut(d,x,c);if(b){if(b==="rotate"){w(!0);const F=c.x+c.width/2,v=c.y+c.height/2,R=Math.atan2(x-v,d-F)*180/Math.PI;X({x:d,y:x,initialAngle:R,initialRotation:c.rotation||0})}else B(!0),O(b),X({x:d,y:x,initialWidth:c.width,initialHeight:c.height,initialX:c.x,initialY:c.y});return}}let p=null;for(let b=h.length-1;b>=0;b--)if(Ot(d,x,h[b])){p=h[b];break}p?(C(p),D(!0),X({x:d,y:x,offsetX:d-p.x,offsetY:x-p.y})):C(null),V()},[l,Q,c,h,V]),ze=y.useCallback(e=>{if(l)return;const t=K.current,r=t.getBoundingClientRect(),d=(e.clientX-r.left)/Q,x=(e.clientY-r.top)/Q;if(c&&!I&&!m&&!T){const p=Ut(d,x,c);p?p==="rotate"?t.style.cursor="grab":t.style.cursor=p:Ot(d,x,c)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=I?"grabbing":"default";if(T&&c){const p=c.x+c.width/2,b=c.y+c.height/2,v=Math.atan2(x-b,d-p)*180/Math.PI-k.initialAngle;let R=k.initialRotation+v;e.shiftKey&&(R=Math.round(R/15)*15),R=(R%360+360)%360,n(A=>A.map(z=>z.id===c.id?{...z,rotation:R}:z)),C(A=>({...A,rotation:R})),V();return}if(m&&c&&N){const p=d-k.x,b=x-k.y;let F=k.initialWidth,v=k.initialHeight,R=k.initialX,A=k.initialY;switch(N){case"se-resize":F=Math.max(20,k.initialWidth+p),v=Math.max(20,k.initialHeight+b);break;case"sw-resize":F=Math.max(20,k.initialWidth-p),v=Math.max(20,k.initialHeight+b),R=k.initialX+(k.initialWidth-F);break;case"ne-resize":F=Math.max(20,k.initialWidth+p),v=Math.max(20,k.initialHeight-b),A=k.initialY+(k.initialHeight-v);break;case"nw-resize":F=Math.max(20,k.initialWidth-p),v=Math.max(20,k.initialHeight-b),R=k.initialX+(k.initialWidth-F),A=k.initialY+(k.initialHeight-v);break}if(e.shiftKey&&c.type!=="text"){const $=k.initialWidth/k.initialHeight;N.includes("e"),v=F/$,N.includes("n")&&(A=k.initialY+(k.initialHeight-v))}Y&&(R=xt(R),A=xt(A),F=xt(F),v=xt(v));const z={...c,x:R,y:A,width:F,height:v};n($=>$.map(nt=>nt.id===c.id?z:nt)),C(z),V();return}if(I&&c){let p=d-k.offsetX,b=x-k.offsetY;Y&&(p=xt(p),b=xt(b)),p=Math.max(0,Math.min(S-c.width,p)),b=Math.max(0,Math.min(W-c.height,b));const F={...c,x:p,y:b};n(v=>v.map(R=>R.id===c.id?F:R)),C(F),V()}},[l,Q,c,I,m,T,N,k,Y,S,W,h,V]),Gt=y.useCallback(e=>{j&&H(r=>({...r,[j.sectionName]:{elements:h.map(d=>d.type==="image"?{...d,imageData:d.imageData,src:d.src}:d),selectedColor:_}}));const t=L[e.sectionName];if(t){const r=t.elements.map(d=>{if(d.type==="image"&&d.src&&!d.imageData){const x=new Image;return x.onload=()=>{n(p=>p.map(b=>b.id===d.id?{...b,imageData:x}:b)),V()},x.src=d.src,{...d,imageData:x}}return d});n(r),rt(t.selectedColor||_)}else n([]);et(e),C(null)},[j,h,_,L,V]),We=y.useCallback(e=>{if(e&&e.type.startsWith("image/")){const t=new FileReader;t.onload=r=>{const d=new Image;d.onload=()=>{const x={id:dt(),type:"image",x:xt(S/2-100),y:xt(W/2-100),width:Math.min(d.width,200),height:Math.min(d.height,200),rotation:0,imageData:d,src:r.target.result,originalWidth:d.width,originalHeight:d.height},p=d.width/d.height;x.width/x.height!==p&&(x.width/p<=200?x.height=x.width/p:x.width=x.height*p),n(b=>[...b,x]),C(x),at()},d.onerror=()=>{console.error("Failed to load uploaded image"),alert("Failed to load the uploaded image. Please try again.")},d.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.")},[S,W,xt,dt,at]),_t=y.useCallback(Me(()=>{V()},16),[V]);y.useEffect(()=>{Et.current||_t()},[h,c,M,_t]);function Me(e,t){let r;return function(...x){const p=()=>{clearTimeout(r),e(...x)};clearTimeout(r),r=setTimeout(p,t)}}y.useEffect(()=>{yt.current&&Yt(yt.current,_)},[_]),y.useEffect(()=>{V()},[V]);const Le=(e,t,r)=>(.2126*e+.7152*t+.0722*r)/255,Yt=y.useCallback((e,t)=>{const r=Lt.current,d=r.getContext("2d");r.width=S,r.height=W,d.clearRect(0,0,S,W),d.drawImage(e,0,0,S,W);const x=d.getImageData(0,0,S,W),p=x.data,b=de(t);if(!b){Et.current=!1;return}const{r:F,g:v,b:R}=b;for(let z=0;z<p.length;z+=4){if(p[z+3]===0)continue;const nt=Le(p[z],p[z+1],p[z+2]);p[z]=Math.round(F*nt),p[z+1]=Math.round(v*nt),p[z+2]=Math.round(R*nt)}d.putImageData(x,0,0);const A=new Image;A.onload=()=>{ut.current=s.plainColor==="Y"?A:e,Et.current=!1,V()},A.src=r.toDataURL("image/png")},[S,W,V]),qt=e=>{if(!tt)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),r=document.querySelector(".ruler-vertical");if(!t||!r)return{horizontal:[],vertical:[]};const d=t.getBoundingClientRect(),x=r.getBoundingClientRect(),p=d.width,b=x.height,F=50,v=[],R=[];for(let A=F;A<=p;A+=F)A<=p-20&&v.push({position:A,value:Math.round(A/e)});for(let A=F;A<=b;A+=F)A<=b-15&&R.push({position:A,value:Math.round(A/e)});return{horizontal:v,vertical:R}},[Vt,Xt]=y.useState({horizontal:[],vertical:[]});return y.useEffect(()=>{const e=()=>{setTimeout(()=>{const d=qt(Q);Xt(d)},50)};e();let t;const r=()=>{clearTimeout(t),t=setTimeout(e,150)};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),clearTimeout(t)}},[Q,tt]),y.useEffect(()=>{if(tt&&!u){const e=setTimeout(()=>{const t=qt(Q);Xt(t)},100);return()=>clearTimeout(e)}},[tt,u,Q]),i.jsxs("div",{className:"pure-canvas-designer",children:[i.jsx("div",{className:"designer-header",children:i.jsx(Ze,{onAddElement:Ee,onDeleteElement:()=>c&&Bt(c.id),onDuplicateElement:()=>c&&$t(c.id),onUndo:vt,onRedo:mt,onToggleGrid:()=>st(!M),onToggleRulers:()=>lt(!tt),onToggleSnap:()=>P(!Y),onImageUpload:We,canUndo:J>0,canRedo:J<G.length-1,showGrid:M,showRulers:tt,snapToGrid:Y,selectedElement:c,theme:a,readOnly:l,apiKey:f.apiKey,apiEndpoint:f.apiEndpoint})}),i.jsxs("div",{className:"designer-content",children:[tt&&!u&&i.jsxs("div",{className:"rulers",children:[i.jsx("div",{className:"ruler-horizontal",children:i.jsx("div",{className:"ruler-horizontal-numbers",children:Vt.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:Vt.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:wt,children:i.jsx("canvas",{ref:K,width:S,height:W,onMouseDown:Be,onMouseMove:ze,onMouseUp:Re,style:{border:"1px solid #e2e8f0",cursor:I?"grabbing":"default",transform:`scale(${Q})`,transformOrigin:"top left"}})}),i.jsxs("div",{className:"side-panels",children:[i.jsx(ti,{selectedElement:c,onUpdate:Qt,onMoveLayer:Ht,availableFonts:le,theme:a}),i.jsx(ei,{elements:h,selectedElement:c,onSelectElement:C,onMoveLayer:Ht,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=L[e.sectionName]&&L[e.sectionName].elements&&L[e.sectionName].elements.length>0;return i.jsxs("div",{className:`section-thumbnail compact ${j.sectionName===e.sectionName?"active":""}`,onClick:r=>{r.stopPropagation();const d=s.sections.find(x=>x.sectionName===e.sectionName);Gt(d)},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 ${_===e?"active":""}`,onClick:r=>{r.stopPropagation(),rt(e)},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner compact",style:{backgroundColor:e}}),_===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 ${_===e?"active":""}`,onClick:r=>{r.stopPropagation(),rt(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:()=>ct(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=>ct(parseFloat(e.target.value)),className:"zoom-slider compact"})})]}),i.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>ct(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:()=>ct(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"})]})})]})]})]})]})});ae.displayName="Mypixia";module.exports=ae;
|
|
989
|
+
`)}`,category:"Geometric",description:"Complex mandala flower pattern"}],Je=({isOpen:f,onClose:o,onAddEmbroidery:a,theme:l,apiKey:s,apiEndpoint:g})=>{const[h,n]=y.useState([]),[c,C]=y.useState(!1),[I,D]=y.useState(null),[m,B]=y.useState(""),[N,w]=y.useState("All"),k=y.useRef(null),X=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{f&&n(Xe)},[f]);const T=S=>{a({type:"embroidery",src:S.url,name:S.name,description:S.description,category:S.category,width:120,height:120,x:100,y:100}),o()},O=h.filter(S=>{const Z=!m||S.name.toLowerCase().includes(m.toLowerCase())||S.description.toLowerCase().includes(m.toLowerCase()),W=N==="All"||S.category===N;return Z&&W});return f?i.jsx("div",{className:"embroidery-modal-overlay",onClick:o,children:i.jsxs("div",{className:"embroidery-modal-content",onClick:S=>S.stopPropagation(),ref:k,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:m,onChange:S=>B(S.target.value),className:"embroidery-search"})}),i.jsxs("div",{className:"category-filter",children:[i.jsx("label",{children:"Category:"}),i.jsx("select",{value:N,onChange:S=>w(S.target.value),className:"category-select",children:X.map(S=>i.jsx("option",{value:S,children:S},S))})]})]}),i.jsxs("div",{className:"embroidery-modal-body",children:[c&&i.jsxs("div",{className:"embroidery-loading",children:[i.jsx("div",{className:"loading-spinner"}),i.jsx("p",{children:"Loading embroidery designs..."})]}),I&&i.jsx("div",{className:"embroidery-error",children:i.jsx("p",{children:I})}),!c&&!I&&i.jsx("div",{className:"embroidery-grid",children:O.map(S=>i.jsxs("div",{className:"embroidery-item",onClick:()=>T(S),title:S.description,children:[i.jsx("div",{className:"embroidery-preview",children:i.jsx("img",{src:S.url,alt:S.name,loading:"lazy",onError:Z=>{console.error("Failed to load embroidery image:",S.url),Z.target.style.display="none"}})}),i.jsxs("div",{className:"embroidery-info",children:[i.jsx("div",{className:"embroidery-name",children:S.name}),i.jsx("div",{className:"embroidery-category",children:S.category})]})]},S.id))}),!c&&!I&&O.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"}],Ke=({isOpen:f,onClose:o,onAddText:a,theme:l})=>{const[s,g]=y.useState(""),[h,n]=y.useState("All"),c=y.useMemo(()=>{const m=Ct.reduce((B,N)=>(B[N.category]=(B[N.category]||0)+1,B),{});return[{name:"All",count:Ct.length},...Object.entries(m).map(([B,N])=>({name:B,count:N}))]},[Ct]),C=y.useMemo(()=>Ct.filter(m=>{const B=!s||m.text.toLowerCase().includes(s.toLowerCase())||m.category.toLowerCase().includes(s.toLowerCase()),N=h==="All"||m.category===h;return B&&N}),[Ct,s,h]),I=m=>{const B={...m,x:100,y:100};a("text",B),o()},D=()=>{a("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),o()};return f?i.jsx("div",{className:"text-templates-modal-overlay",onClick:o,children:i.jsxs("div",{className:"text-templates-modal",onClick:m=>m.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:m=>g(m.target.value),className:"search-input"})}),i.jsx("div",{className:"category-tabs",children:c.map(m=>i.jsxs("button",{className:`category-tab ${h===m.name?"active":""}`,onClick:()=>n(m.name),children:[m.name,i.jsxs("span",{className:"count",children:["(",m.count,")"]})]},m.name))})]}),i.jsxs("div",{className:"templates-grid",children:[i.jsx("div",{className:"custom-text-option",onClick:D,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"})]})}),C.map(m=>i.jsxs("div",{className:"template-item",onClick:()=>I(m),children:[i.jsx("div",{className:"template-preview",style:{fontFamily:m.fontFamily,fontSize:`${Math.min(m.fontSize*.6,18)}px`,fontWeight:m.fontWeight,fontStyle:m.fontStyle,color:m.fill,backgroundColor:m.hasBackground?m.backgroundColor:"transparent",textAlign:m.textAlign||"left",textTransform:m.textTransform||"none",letterSpacing:m.letterSpacing?`${m.letterSpacing}px`:"normal",textShadow:m.hasTextShadow?`${m.textShadowX}px ${m.textShadowY}px ${m.textShadowBlur}px ${m.textShadowColor}`:"none"},children:m.text}),i.jsxs("div",{className:"template-info",children:[i.jsx("span",{className:"template-category",children:m.category}),i.jsx("span",{className:"template-font",children:m.fontFamily})]})]},m.id))]}),i.jsx("div",{className:"modal-footer",children:i.jsxs("div",{className:"results-count",children:[C.length," template",C.length!==1?"s":""," found"]})})]})}):null},Ze=({onAddElement:f,onDeleteElement:o,onDuplicateElement:a,onUndo:l,onRedo:s,onToggleGrid:g,onToggleRulers:h,onToggleSnap:n,onImageUpload:c,canUndo:C,canRedo:I,showGrid:D,showRulers:m,snapToGrid:B,selectedElement:N,theme:w,readOnly:k,apiKey:X,apiEndpoint:T})=>{const[O,S]=y.useState(!1),[Z,W]=y.useState(!1),[ft,Q]=y.useState(!1),[ct,_]=y.useState(!1),[rt,M]=y.useState(!1),[st,tt]=y.useState(!1),[lt,Y]=y.useState(!1),P=U=>{const K=U.target.files[0];K&&K.type.startsWith("image/")&&c(K),U.target.value=""},j=U=>{f("icon",{iconData:U,text:U.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},et=U=>{f("qrcode",U)},u=U=>{f("barcode",U)},E=U=>{f("sticker",U)},L=U=>{f("embroidery",U)},H=(U,K)=>{f(U,K)},G=()=>{tt(!st),Y(!1)},it=()=>{Y(!lt),tt(!1)},J=U=>{U==="custom"?f("text"):U==="templates"&&M(!0),tt(!1)},q=U=>{f(U),Y(!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:!C||k,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:!I||k,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:k,title:"Add Text",onClick:G,children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Text"}),i.jsx("span",{className:`dropdown-arrow ${st?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${st?"show":""}`,children:[i.jsxs("button",{onClick:()=>J("custom"),children:[i.jsx("span",{className:"icon",children:"๐"})," Custom Text"]}),i.jsxs("button",{onClick:()=>J("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:k,onClick:it,children:[i.jsx("span",{className:"icon",children:"โฉ"}),i.jsx("span",{className:"label",children:"Shapes"}),i.jsx("span",{className:`dropdown-arrow ${lt?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${lt?"show":""}`,children:[i.jsxs("button",{onClick:()=>q("rectangle"),children:[i.jsx("span",{className:"icon",children:"โญ"})," Rectangle"]}),i.jsxs("button",{onClick:()=>q("circle"),children:[i.jsx("span",{className:"icon",children:"โ"})," Circle"]}),i.jsxs("button",{onClick:()=>q("triangle"),children:[i.jsx("span",{className:"icon",children:"โฒ"})," Triangle"]}),i.jsxs("button",{onClick:()=>q("star"),children:[i.jsx("span",{className:"icon",children:"โ
"})," Star"]}),i.jsxs("button",{onClick:()=>q("heart"),children:[i.jsx("span",{className:"icon",children:"โฅ"})," Heart"]}),i.jsxs("button",{onClick:()=>q("arrow"),children:[i.jsx("span",{className:"icon",children:"โค"})," Arrow"]}),i.jsxs("button",{onClick:()=>q("diamond"),children:[i.jsx("span",{className:"icon",children:"โ"})," Diamond"]}),i.jsxs("button",{onClick:()=>q("hexagon"),children:[i.jsx("span",{className:"icon",children:"โฌก"})," Hexagon"]}),i.jsxs("button",{onClick:()=>q("pentagon"),children:[i.jsx("span",{className:"icon",children:"โฌ"})," Pentagon"]}),i.jsxs("button",{onClick:()=>q("oval"),children:[i.jsx("span",{className:"icon",children:"โฌฏ"})," Oval"]}),i.jsxs("button",{onClick:()=>q("roundedRectangle"),children:[i.jsx("span",{className:"icon",children:"โข"})," Rounded Rectangle"]}),i.jsxs("button",{onClick:()=>q("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:k?"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:P,disabled:k})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx(Ge,{onSelectIcon:j,theme:w,disabled:k}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>Q(!0),disabled:k,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:()=>S(!0),disabled:k,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:()=>W(!0),disabled:k,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:()=>_(!0),disabled:k,title:"Add Embroidery Design",children:[i.jsx("span",{className:"icon",children:"๐งต"}),i.jsx("span",{className:"label",children:"Embroidery"})]})}),N&&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:k,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:k,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 ${D?"active":""}`,onClick:g,title:"Toggle Grid",children:[i.jsx("span",{className:"icon",children:"โ"}),i.jsx("span",{className:"label",children:"Grid"})]}),i.jsxs("button",{className:`toolbar-btn compact ${m?"active":""}`,onClick:h,title:"Toggle Rulers",children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Rulers"})]}),i.jsxs("button",{className:`toolbar-btn compact ${B?"active":""}`,onClick:n,title:"Snap to Grid",children:[i.jsx("span",{className:"icon",children:"๐งฒ"}),i.jsx("span",{className:"label",children:"Snap"})]})]})]}),i.jsx(_e,{isOpen:O,onClose:()=>S(!1),onAddQRCode:et,theme:w}),i.jsx(Ye,{isOpen:Z,onClose:()=>W(!1),onAddBarcode:u,theme:w}),i.jsx(Ve,{isOpen:ft,onClose:()=>Q(!1),onAddSticker:E,theme:w,apiKey:X,apiEndpoint:T}),i.jsx(Je,{isOpen:ct,onClose:()=>_(!1),onAddEmbroidery:L,theme:w,apiKey:X,apiEndpoint:T}),i.jsx(Ke,{isOpen:rt,onClose:()=>M(!1),onAddText:H,theme:w})]})},ti=({selectedElement:f,onUpdate:o,onMoveLayer:a,availableFonts:l,theme:s})=>{const[g,h]=y.useState(!1);if(!f)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 n=(w,k)=>{o(f.id,{[w]:k})},c=()=>{var w,k,X;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:f.text||"",onChange:T=>n("text",T.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:f.fontFamily||"Arial",onChange:T=>n("fontFamily",T.target.value),children:l.map(T=>i.jsx("option",{value:T,children:T},T))})]}),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:f.fontSize||20,onChange:T=>n("fontSize",parseInt(T.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:f.lineHeight||1.2,onChange:T=>n("lineHeight",parseFloat(T.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:f.fontWeight==="lighter"||f.fontWeight==="300"?"active":"",onClick:()=>n("fontWeight","300"),title:"Light",children:"Light"}),i.jsx("button",{className:!f.fontWeight||f.fontWeight==="normal"||f.fontWeight==="400"?"active":"",onClick:()=>n("fontWeight","normal"),title:"Normal",children:"Normal"}),i.jsx("button",{className:f.fontWeight==="bold"||f.fontWeight==="700"?"active":"",onClick:()=>n("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:f.fontStyle==="italic"?"active":"",onClick:()=>n("fontStyle",f.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:i.jsx("em",{children:"I"})}),i.jsx("button",{className:(w=f.textDecoration)!=null&&w.includes("underline")?"active":"",onClick:()=>{const T=f.textDecoration||"",O=T.split(" ").filter(S=>S&&S!=="underline");T.includes("underline")||O.push("underline"),n("textDecoration",O.join(" ").trim())},title:"Underline",children:i.jsx("u",{children:"U"})}),i.jsx("button",{className:(k=f.textDecoration)!=null&&k.includes("overline")?"active":"",onClick:()=>{const T=f.textDecoration||"",O=T.split(" ").filter(S=>S&&S!=="overline");T.includes("overline")||O.push("overline"),n("textDecoration",O.join(" ").trim())},title:"Overline",children:i.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),i.jsx("button",{className:(X=f.textDecoration)!=null&&X.includes("line-through")?"active":"",onClick:()=>{const T=f.textDecoration||"",O=T.split(" ").filter(S=>S&&S!=="line-through");T.includes("line-through")||O.push("line-through"),n("textDecoration",O.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:!f.textTransform||f.textTransform==="none"?"active":"",onClick:()=>n("textTransform","none"),title:"Normal",children:"Aa"}),i.jsx("button",{className:f.textTransform==="uppercase"?"active":"",onClick:()=>n("textTransform","uppercase"),title:"Uppercase",children:"AA"}),i.jsx("button",{className:f.textTransform==="lowercase"?"active":"",onClick:()=>n("textTransform","lowercase"),title:"Lowercase",children:"aa"}),i.jsx("button",{className:f.textTransform==="capitalize"?"active":"",onClick:()=>n("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:!f.textAlign||f.textAlign==="left"?"active":"",onClick:()=>n("textAlign","left"),title:"Left Align",children:"โฌ
"}),i.jsx("button",{className:f.textAlign==="center"?"active":"",onClick:()=>n("textAlign","center"),title:"Center Align",children:"โ"}),i.jsx("button",{className:f.textAlign==="right"?"active":"",onClick:()=>n("textAlign","right"),title:"Right Align",children:"โก"}),i.jsx("button",{className:f.textAlign==="justify"?"active":"",onClick:()=>n("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:f.fill||"#000000",onChange:T=>n("fill",T.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:f.backgroundColor||"#ffffff",onChange:T=>n("backgroundColor",T.target.value),disabled:!f.hasBackground}),i.jsx("button",{className:`toggle-btn ${f.hasBackground?"active":""}`,onClick:()=>n("hasBackground",!f.hasBackground),title:f.hasBackground?"Remove background":"Add background",children:f.hasBackground?"๐":"๐โ๐จ"})]})]})]})}),g&&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:f.letterSpacing||0,onChange:T=>n("letterSpacing",parseFloat(T.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:f.wordSpacing||0,onChange:T=>n("wordSpacing",parseFloat(T.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 ${f.hasTextShadow?"active":""}`,onClick:()=>n("hasTextShadow",!f.hasTextShadow),children:f.hasTextShadow?"Remove Shadow":"Add Shadow"})}),f.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:f.textShadowX||2,onChange:T=>n("textShadowX",parseInt(T.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:f.textShadowY||2,onChange:T=>n("textShadowY",parseInt(T.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Blur"}),i.jsx("input",{type:"number",value:f.textShadowBlur||4,onChange:T=>n("textShadowBlur",parseInt(T.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:f.textShadowColor||"#000000",onChange:T=>n("textShadowColor",T.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:f.stroke||"#000000",onChange:T=>n("stroke",T.target.value)})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||0,onChange:T=>n("strokeWidth",parseInt(T.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:f.opacity||1,onChange:T=>n("opacity",parseFloat(T.target.value))}),i.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Variant"}),i.jsxs("select",{value:f.fontVariant||"normal",onChange:T=>n("fontVariant",T.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:f.writingMode||"horizontal-tb",onChange:T=>n("writingMode",T.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:!f.direction||f.direction==="ltr"?"active":"",onClick:()=>n("direction","ltr"),title:"Left to Right",children:"LTR"}),i.jsx("button",{className:f.direction==="rtl"?"active":"",onClick:()=>n("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:f.backgroundPadding||5,onChange:T=>n("backgroundPadding",parseInt(T.target.value)),min:"0",max:"50",disabled:!f.hasBackground})]})]})]})},C=()=>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:f.fill||"#000000",onChange:w=>n("fill",w.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:w=>n("stroke",w.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||2,onChange:w=>n("strokeWidth",parseInt(w.target.value)),min:"0",max:"20"})]}),f.type==="star"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Star Points"}),i.jsx("input",{type:"number",value:f.numPoints||5,onChange:w=>n("numPoints",parseInt(w.target.value)),min:"3",max:"20"})]}),f.type==="roundedRectangle"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Corner Radius"}),i.jsx("input",{type:"number",value:f.cornerRadius||10,onChange:w=>n("cornerRadius",parseInt(w.target.value)),min:"0",max:"50"})]})]}),I=()=>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:f.opacity||1,onChange:w=>n("opacity",parseFloat(w.target.value))}),i.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),g&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Border Radius"}),i.jsx("input",{type:"number",value:f.borderRadius||0,onChange:w=>n("borderRadius",parseInt(w.target.value)),min:"0",max:"50"})]})]}),D=()=>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(f.x)||0,onChange:w=>n("x",parseInt(w.target.value))})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Y"}),i.jsx("input",{type:"number",value:Math.round(f.y)||0,onChange:w=>n("y",parseInt(w.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(f.width)||0,onChange:w=>n("width",parseInt(w.target.value)),min:"1"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Height"}),i.jsx("input",{type:"number",value:Math.round(f.height)||0,onChange:w=>n("height",parseInt(w.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:f.rotation||0,onChange:w=>n("rotation",parseInt(w.target.value))}),i.jsxs("span",{children:[f.rotation||0,"ยฐ"]})]})]}),m=()=>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:f.strokeWidth||f.height||2,onChange:w=>{const k=parseInt(w.target.value);n("strokeWidth",k),n("height",k)},min:"1",max:"50"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Length"}),i.jsx("input",{type:"number",value:f.width||200,onChange:w=>n("width",parseInt(w.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:f.stroke||f.fill||"#000000",onChange:w=>{n("stroke",w.target.value),n("fill",w.target.value)}}),i.jsx("input",{type:"text",value:f.stroke||f.fill||"#000000",onChange:w=>{n("stroke",w.target.value),n("fill",w.target.value)},placeholder:"#000000"})]})]})]}),B=()=>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(f.id,"top"),children:"Bring to Front"}),i.jsx("button",{onClick:()=>a(f.id,"up"),children:"Bring Forward"}),i.jsx("button",{onClick:()=>a(f.id,"down"),children:"Send Backward"}),i.jsx("button",{onClick:()=>a(f.id,"bottom"),children:"Send to Back"})]})]}),N=["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:f.type})]}),i.jsxs("div",{className:"panel-content",children:[f.type==="text"&&c(),N.includes(f.type)&&C(),f.type==="image"&&I(),f.type==="horizontalLine"&&m(),D(),B(),i.jsx("div",{className:"property-group",children:i.jsxs("button",{className:"toggle-advanced",onClick:()=>h(!g),children:[g?"Hide":"Show"," Advanced Options"]})})]})]})},ei=({elements:f,selectedElement:o,onSelectElement:a,onMoveLayer:l,onDeleteElement:s,theme:g})=>{const h=(c,C)=>{switch(c){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"?"}},n=c=>{var C,I;if(c.type==="text")return c.isIcon&&c.iconData?`Icon: ${c.iconData.name}`:((C=c.text)==null?void 0:C.substring(0,20))+(((I=c.text)==null?void 0:I.length)>20?"...":"")||"Text";if(c.type==="qrcode")return`QR Code: ${(c.data||"").substring(0,15)+((c.data||"").length>15?"...":"")}`;if(c.type==="barcode"){const D=c.format||"CODE128",m=c.data||"";return`Barcode (${D}): ${m.substring(0,10)+(m.length>10?"...":"")}`}return c.type==="sticker"?`Sticker: ${(c.name||"Untitled").substring(0,15)}`:c.type==="embroidery"?`Embroidery: ${(c.name||"Design").substring(0,15)}`:c.type.charAt(0).toUpperCase()+c.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:f.length})]}),i.jsx("div",{className:"layers-list",children:f.length===0?i.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...f].reverse().map((c,C)=>i.jsxs("div",{className:`layer-item ${(o==null?void 0:o.id)===c.id?"selected":""}`,onClick:()=>a(c),children:[i.jsxs("div",{className:"layer-info",children:[i.jsx("span",{className:"layer-icon",children:h(c.type)}),i.jsx("span",{className:"layer-name",children:n(c)})]}),i.jsxs("div",{className:"layer-controls",children:[i.jsx("button",{className:"layer-btn",onClick:I=>{I.stopPropagation(),l(c.id,"up")},disabled:C===0,title:"Move Up",children:"โ"}),i.jsx("button",{className:"layer-btn",onClick:I=>{I.stopPropagation(),l(c.id,"down")},disabled:C===f.length-1,title:"Move Down",children:"โ"}),i.jsx("button",{className:"layer-btn delete",onClick:I=>{I.stopPropagation(),s(c.id)},title:"Delete",children:"ร"})]})]},c.id))})]})};class ii{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}async exportAllSections(o,a,l,s,g="png",h=!0,n=null){const c={};for(const C of a){const I=C.id||C.sectionName,D=o[I];if(!D||!D.elements||D.elements.length===0){console.log(`Skipping section ${I} - no elements`);continue}if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),h){let B=C.image||C.sectionImage;if(n&&n.sectionImage&&(C.sectionName==="Front"||n.sections&&Object.keys(n.sections).includes(C.sectionName))&&(B=n.sectionImage),B)try{const N=await this.loadImage(B);await this.processImageColor(N,D.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(N){console.warn("Failed to load background image:",N)}}else this.ctx.clearRect(0,0,l,s);for(const B of D.elements)await this.drawElement(B);const m=this.canvas.toDataURL(`image/${g}`,g==="jpeg"?.9:void 0);c[I]={dataUrl:m,blob:await this.dataUrlToBlob(m)}}return c}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:g}=o[s],h=URL.createObjectURL(g),n=document.createElement("a");n.href=h,n.download=`${a}-${s}.png`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(h)}else for(const s of l){const{blob:g}=o[s],h=URL.createObjectURL(g),n=document.createElement("a");n.href=h,n.download=`${a}-${s}.png`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(h),await new Promise(c=>setTimeout(c,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 g=s.getImageData(0,0,l.width,l.height),h=g.data,n=this.hexToRgb(a);if(!n){console.warn("Invalid target color:",a);return}const{r:c,g:C,b:I}=n;for(let D=0;D<h.length;D+=4){if(h[D+3]===0)continue;const B=this.getLuma(h[D],h[D+1],h[D+2]);h[D]=Math.round(c*B),h[D+1]=Math.round(C*B),h[D+2]=Math.round(I*B)}return s.putImageData(g,0,0),this.processedImage=new Image,new Promise(D=>{this.processedImage.onload=()=>{D()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),D()},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,g)=>{const h=g*l;o.stroke&&o.strokeWidth>0&&this.ctx.strokeText(s,0,h),this.ctx.fillText(s,0,h)})}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,g=s*.4,h=o.numPoints||5;this.ctx.beginPath();for(let n=0;n<h*2;n++){const c=n%2===0?s:g,C=n*Math.PI/h,I=a+Math.cos(C)*c,D=l+Math.sin(C)*c;n===0?this.ctx.moveTo(I,D):this.ctx.lineTo(I,D)}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"),g=new Image;g.onload=()=>{l.width=g.width,l.height=g.height,s.drawImage(g,0,0),l.toBlob(a)},g.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,g=6;this.ctx.beginPath();for(let h=0;h<g;h++){const n=h*2*Math.PI/g-Math.PI/2,c=a+s*Math.cos(n),C=l+s*Math.sin(n);h===0?this.ctx.moveTo(c,C):this.ctx.lineTo(c,C)}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,g=5;this.ctx.beginPath();for(let h=0;h<g;h++){const n=h*2*Math.PI/g-Math.PI/2,c=a+s*Math.cos(n),C=l+s*Math.sin(n);h===0?this.ctx.moveTo(c,C):this.ctx.lineTo(c,C)}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,g=0;this.ctx.beginPath();const h=l*.3;this.ctx.moveTo(s+a/2,g+h),this.ctx.bezierCurveTo(s+a/2,g,s,g,s,g+h),this.ctx.bezierCurveTo(s,g+(l+h)/2,s+a/2,g+(l+h)/2,s+a/2,g+l),this.ctx.bezierCurveTo(s+a/2,g+(l+h)/2,s+a,g+(l+h)/2,s+a,g+h),this.ctx.bezierCurveTo(s+a,g,s+a/2,g,s+a/2,g+h),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,g=o.height/2;this.ctx.beginPath(),this.ctx.ellipse(a,l,s,g,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,g){this.ctx.beginPath(),this.ctx.moveTo(o+g,a),this.ctx.lineTo(o+l-g,a),this.ctx.quadraticCurveTo(o+l,a,o+l,a+g),this.ctx.lineTo(o+l,a+s-g),this.ctx.quadraticCurveTo(o+l,a+s,o+l-g,a+s),this.ctx.lineTo(o+g,a+s),this.ctx.quadraticCurveTo(o,a+s,o,a+s-g),this.ctx.lineTo(o,a+g),this.ctx.quadraticCurveTo(o,a,o+g,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,g="png",h=null){var m,B;const n=[],c=[],C={};for(const N of a){const w=N.sectionName,k=o[w];if(!k||!k.elements||k.elements.length===0){console.log(`Skipping section ${w} - no elements`);continue}let X=N.image||N.sectionImage;h&&h.sectionImage&&(N.sectionName==="Front"||h.sections&&Object.keys(h.sections).includes(N.sectionName))&&(X=h.sectionImage);const T={...k,backgroundImage:X,sectionImage:X,sectionName:w,selectedColor:k.selectedColor||"#FFFFFF",canvasWidth:l,canvasHeight:s};C[w]=T;const O=await this.exportSectionAsBlob(k,N,l,s,g,!0,h);if(O){const Z=await this.blobToFile(O,`${w}-full.${g}`,`image/${g}`);n.push({sectionName:w,sectionImage:Z})}const S=await this.exportSectionAsBlob(k,N,l,s,g,!1,h);if(S){const Z=await this.blobToFile(S,`${w}-print.${g}`,`image/${g}`);c.push({sectionName:w,sectionImage:Z})}}let I=((m=a[0])==null?void 0:m.image)||((B=a[0])==null?void 0:B.sectionImage);if(h&&h.sectionImage){const N=a[0];N&&(N.sectionName==="Front"||h.sections&&Object.keys(h.sections).includes(N.sectionName))&&(I=h.sectionImage)}const D={sections:C,canvasWidth:l,canvasHeight:s,sectionImage:I,format:g,timestamp:new Date().toISOString(),version:"1.0",...h&&{initData:{sectionImage:h.sectionImage,sections:h.sections?Object.keys(h.sections):[]}},product:{sections:a.map(N=>({sectionName:N.sectionName||N.id,sectionImage:N.image||N.sectionImage,id:N.id||N.sectionName}))}};return{fullDesign:n,printReady:c,designFile:JSON.stringify(D)}}async exportSectionAsBlob(o,a,l,s,g="png",h=!0,n=null){try{if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),h){let c=a.image||a.sectionImage;if(n&&n.sectionImage&&(a.sectionName==="Front"||n.sections&&Object.keys(n.sections).includes(a.sectionName))&&(c=n.sectionImage),c)try{const C=await this.loadImage(c);await this.processImageColor(C,o.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(C){console.warn("Failed to load background image:",C)}}else this.ctx.clearRect(0,0,l,s);for(const c of o.elements)await this.drawElement(c);return new Promise(c=>{this.canvas.toBlob(c,`image/${g}`,g==="jpeg"?.9:void 0)})}catch(c){return console.error("Error exporting section as blob:",c),null}}async exportCurrentSectionAsJSON(o,a="png",l=null){var B,N,w;const s=((B=o.activeSection)==null?void 0:B.sectionName)||"main";let g=((N=o.activeSection)==null?void 0:N.sectionImage)||((w=o.activeSection)==null?void 0:w.image);l&&l.sectionImage&&(s==="Front"||l.sections&&Object.keys(l.sections).includes(s))&&(g=l.sectionImage);const h={elements:o.elements,selectedColor:o.selectedColor,canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,backgroundImage:g,sectionImage:g,sectionName:s,zoomLevel:o.zoomLevel,showGrid:o.showGrid,snapToGrid:o.snapToGrid},n={id:s,sectionName:s,image:g,sectionImage:g},c=[],C=[],I=await this.exportSectionAsBlob(h,n,o.canvasWidth,o.canvasHeight,a,!0,l);if(I){const k=await this.blobToFile(I,`${s}-full.${a}`,`image/${a}`);c.push({sectionName:s,sectionImage:k})}const D=await this.exportSectionAsBlob(h,n,o.canvasWidth,o.canvasHeight,a,!1,l);if(D){const k=await this.blobToFile(D,`${s}-print.${a}`,`image/${a}`);C.push({sectionName:s,sectionImage:k})}const m={sections:{[s]:h},canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,sectionImage:g,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:g,id:s}]}};return{fullDesign:c,printReady:C,designFile:JSON.stringify(m)}}}class oi{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),g=new Date().toISOString(),h={id:s,name:o,timestamp:g,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:g,thumbnail:a.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+s,JSON.stringify(h)),this.updateDesignsList(s,o,g),{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 h=this.getAllDesigns().find(n=>n.name===o);if(!h)return{success:!1,error:"Design not found"};a=h.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),g=new Blob([s],{type:"application/json"}),h=URL.createObjectURL(g),n=document.createElement("a");return n.href=h,n.download=`${l.name}_${l.id}.json`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(h),{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 g=JSON.parse(s.target.result);if(!this.validateDesignData(g)){a({success:!1,error:"Invalid design file format"});return}const h=this.generateDesignId(g.name+"_imported");g.id=h,g.name+="_imported",g.timestamp=new Date().toISOString(),g.metadata.lastModified=g.timestamp,this.storage.setItem(this.STORAGE_PREFIX+h,JSON.stringify(g)),this.updateDesignsList(h,g.name,g.timestamp),a({success:!0,data:g,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(),g=s.findIndex(n=>n.id===o),h={id:o,name:a,timestamp:l,lastModified:l};g>=0?s[g]=h:s.push(h),s.sort((n,c)=>new Date(c.timestamp)-new Date(n.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 ae=y.forwardRef((f,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:g}=f,[h,n]=y.useState([]),[c,C]=y.useState(null),[I,D]=y.useState(!1),[m,B]=y.useState(!1),[N,w]=y.useState(!1),[k,X]=y.useState({x:0,y:0}),[T,O]=y.useState(null),[S,Z]=y.useState(800),[W,ft]=y.useState(600),[Q,ct]=y.useState(1),[_,rt]=y.useState(s.colorSettings[0]),[M,st]=y.useState(!1),[tt,lt]=y.useState(!0),[Y,P]=y.useState(!0),[j,et]=y.useState(s.sections[0]),[u,E]=y.useState(!1),[L,H]=y.useState({}),[G,it]=y.useState([]),[J,q]=y.useState(-1),[U]=y.useState(new oi("localStorage")),K=y.useRef(null),wt=y.useRef(null),yt=y.useRef(null),ut=y.useRef(null),Lt=y.useRef(null),Rt=y.useRef(new ii),Et=y.useRef(!1),[ht,se]=y.useState(null),at=y.useCallback(()=>{const e={elements:JSON.parse(JSON.stringify(h)),selectedElement:c?{...c}:null,timestamp:Date.now()},t=G.slice(0,J+1);t.push(e),t.length>50?t.shift():q(J+1),it(t)},[h,c,G,J]),bt=y.useCallback(()=>({elements:h,canvasWidth:S,canvasHeight:W,selectedColor:_,activeSection:j,product:s,sectionDesigns:L,zoomLevel:Q,showGrid:M,snapToGrid:Y,selectedElement:c?{...c}:null,canvasRef:K}),[h,S,W,_,j,s,L,Q,M,Y,c]);y.useEffect(()=>{const t=setTimeout(async()=>{if(h.length===0&&G.length<=1){if(g)try{const A=await fetch(g);if(A.ok){const z=await A.text();if(z.trim()){const $=JSON.parse(z.trim());if(console.log("Loading design from file:",$),se($),$.sections&&typeof $.sections=="object"){const nt=Object.keys($.sections)[0],ot=$.sections[nt];if(ot&&ot.elements){n(ot.elements||[]),Z(ot.canvasWidth||800),ft(ot.canvasHeight||600),rt(ot.selectedColor||s.colorSettings[0]),ct(ot.zoomLevel||1),st(ot.showGrid||!1),P(ot.snapToGrid||!0),C(null),$.sections&&H($.sections);const Nt=s.sections.find(It=>It.sectionName===nt);Nt&&et(Nt),it([]),q(-1),setTimeout(()=>{at()},100);return}}}}else console.warn("Failed to load design file, using default text")}catch(A){console.error("Error loading design file:",A),console.warn("Using default text instead")}const r=24,d="Arial",x="Change me",b=document.createElement("canvas").getContext("2d");b.font=`${r}px ${d}`;const v=b.measureText(x).width,R={id:dt(),type:"text",x:S/2-v/2,y:W/2-r/2,width:v,height:r,text:x,fontSize:r,fontFamily:d,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};n([R]),C(R),setTimeout(()=>{at()},100)}},300);return()=>clearTimeout(t)},[g,s.colorSettings,s.sections]);const Dt=y.useCallback((e="png",t=!0)=>{const r=bt();return s.sections,Rt.current.exportAllSections({[(j==null?void 0:j.sectionName)||"main"]:r},[{id:(j==null?void 0:j.sectionName)||"main",sectionName:(j==null?void 0:j.sectionName)||"main",image:j==null?void 0:j.sectionImage,sectionImage:j==null?void 0:j.sectionImage}],S,W,e,t,ht)},[bt,s.sections,j,S,W]),le=["Arial","Helvetica","Times New Roman","Georgia","Verdana","Courier New","Tahoma","Trebuchet MS","Impact","Comic Sans MS","Palatino","Garamond","Bookman","Avant Garde","Century Gothic"],jt=20;y.useEffect(()=>{const e=()=>E(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),y.useEffect(()=>{const e=document.createElement("canvas");e.width=S,e.height=W,Lt.current=e},[S,W]),y.useEffect(()=>{G.length===0&&at()},[]);const Tt=(e,t,r,d,x,p)=>{e.beginPath(),e.moveTo(t+p,r),e.lineTo(t+d-p,r),e.quadraticCurveTo(t+d,r,t+d,r+p),e.lineTo(t+d,r+x-p),e.quadraticCurveTo(t+d,r+x,t+d-p,r+x),e.lineTo(t+p,r+x),e.quadraticCurveTo(t,r+x,t,r+x-p),e.lineTo(t,r+p),e.quadraticCurveTo(t,r,t+p,r),e.closePath()},Pt=(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),d=r.actualBoundingBoxAscent??t.fontSize*.8,x=r.actualBoundingBoxDescent??t.fontSize*.2,p=r.actualBoundingBoxLeft??0,b=r.actualBoundingBoxRight??r.width,F=p+b,v=d+x,R=t.x,A=t.y,z=R-F/2-p,$=A-v/2-d;return e.restore(),{x:z,y:$,width:F,height:v,cx:R,cy:A}},ne=(e,t)=>{if(!t)return;const r=8,d=8,x=4,p=30,b=Pt(e,t),F=t.isIcon?Math.max(r,12):r,v={x:-b.width/2-F,y:-b.height/2-F,w:b.width+F*2,h:b.height+F*2};e.save(),e.translate(b.cx,b.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,Tt(e,v.x-1,v.y-1,v.w+2,v.h+2,x+1),e.stroke(),e.strokeStyle=R,e.lineWidth=2,e.setLineDash([8,4]),Tt(e,v.x,v.y,v.w,v.h,x),e.stroke(),e.lineDashOffset=-(Date.now()/50)%12,e.strokeStyle="#ffffff",e.lineWidth=1,e.setLineDash([4,8]),Tt(e,v.x,v.y,v.w,v.h,x),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($=>{e.fillStyle="rgba(0,0,0,.2)",e.fillRect($.x-d/2+1,$.y-d/2+1,d,d),e.fillStyle="#ffffff",e.fillRect($.x-d/2,$.y-d/2,d,d),e.strokeStyle="#3b82f6",e.lineWidth=1,e.strokeRect($.x-d/2,$.y-d/2,d,d)});const A=0,z=v.y-p;e.strokeStyle="#3b82f6",e.lineWidth=1,e.setLineDash([2,2]),e.beginPath(),e.moveTo(A,z+12),e.lineTo(A,v.y),e.stroke(),e.setLineDash([]),e.beginPath(),e.arc(A,z,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(A,z,6,-Math.PI/2,Math.PI,!1),e.stroke(),e.beginPath(),e.moveTo(A-6,z),e.lineTo(A-3,z-3),e.lineTo(A-3,z+3),e.closePath(),e.fillStyle="#ffffff",e.fill(),e.restore()},ce=(e,t)=>{if(!t)return[];const r=Pt(e,t),d=t.isIcon?Math.max(8,12):8,x=8,p=30,b=(t.rotation||0)*Math.PI/180,F={x:-r.width/2-d,y:-r.height/2-d,w:r.width+d*2,h:r.height+d*2},v=[{x:F.x,y:F.y,type:"nw-resize"},{x:F.x+F.w,y:F.y,type:"ne-resize"},{x:F.x+F.w,y:F.y+F.h,type:"se-resize"},{x:F.x,y:F.y+F.h,type:"sw-resize"},{x:0,y:F.y-p,type:"rotate"}],R=Math.cos(b),A=Math.sin(b);return v.map(z=>({x:r.cx+(z.x*R-z.y*A),y:r.cy+(z.x*A+z.y*R),type:z.type,size:z.type==="rotate"?24:x}))},Ut=(e,t,r)=>{if(!r)return null;const d=K.current;if(!d)return null;const x=d.getContext("2d"),p=ce(x,r);for(const b of p){const F=e-b.x,v=t-b.y;if(Math.sqrt(F*F+v*v)<=b.size/2)return b.type}return null},vt=y.useCallback(()=>{if(J>0){const e=G[J-1];n(e.elements),C(e.selectedElement),q(J-1)}},[G,J]),mt=y.useCallback(()=>{if(J<G.length-1){const e=G[J+1];n(e.elements),C(e.selectedElement),q(J+1)}},[G,J]),xt=e=>Y?Math.round(e/jt)*jt:e;y.useEffect(()=>{if(j!=null&&j.sectionImage){yt.current=null,ut.current=null;const e=K.current;if(e&&e.getContext("2d").clearRect(0,0,S,W),g&&!ht)return;const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{yt.current=t,Yt(t,_)},t.onerror=()=>{console.error("Failed to load background image:",j.sectionImage),V()};let r=j.sectionImage;ht&&ht.sectionImage&&(j.sectionName==="Front"||ht.sections&&Object.keys(ht.sections).includes(j.sectionName))&&(r=ht.sectionImage),t.src=r}else yt.current=null,ut.current=null,V()},[j,_,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")&&c&&!l){t.preventDefault();const x=c;n(p=>p.filter(b=>b.id!==x.id)),C(null),at()}if(t.ctrlKey||t.metaKey)switch(t.key){case"z":t.shiftKey?(t.preventDefault(),mt()):(t.preventDefault(),vt());break;case"y":t.preventDefault(),mt();break}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[c,l,vt,mt,at]);const de=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},dt=()=>`element_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,fe=e=>{e.strokeStyle="#e0e0e0",e.lineWidth=1,e.setLineDash([1,1]);for(let t=0;t<=S;t+=jt)e.beginPath(),e.moveTo(t,0),e.lineTo(t,W),e.stroke();for(let t=0;t<=W;t+=jt)e.beginPath(),e.moveTo(0,t),e.lineTo(S,t),e.stroke();e.setLineDash([])},he=(e,t)=>{e.save();const r=t.x+t.width/2,d=t.y+t.height/2;switch(e.translate(r,d),t.rotation&&e.rotate(t.rotation*Math.PI/180),e.translate(-t.width/2,-t.height/2),t.type){case"text":ye(e,t);break;case"rectangle":ue(e,t);break;case"circle":me(e,t);break;case"triangle":pe(e,t);break;case"star":we(e,t);break;case"arrow":be(e,t);break;case"diamond":ve(e,t);break;case"hexagon":ke(e,t);break;case"pentagon":Se(e,t);break;case"heart":Fe(e,t);break;case"oval":Ce(e,t);break;case"roundedRectangle":je(e,t);break;case"image":Ne(e,t);break;case"qrcode":xe(e,t);break;case"barcode":ge(e,t);break;case"sticker":Ie(e,t);break;case"horizontalLine":Te(e,t);break;case"embroidery":Ae(e,t);break}e.restore()},ge=(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=()=>{n(d=>d.map(x=>x.id===t.id?{...x,imageObject:r,imageLoading:!1}:x))},r.onerror=()=>{n(d=>d.map(x=>x.id===t.id?{...x,imageLoading:!1}:x))},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))},xe=(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=()=>{n(d=>d.map(x=>x.id===t.id?{...x,imageObject:r,imageLoading:!1}:x))},r.onerror=()=>{n(d=>d.map(x=>x.id===t.id?{...x,imageLoading:!1}:x))},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))},ye=(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,F=>F.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 d=r.split(`
|
|
991
|
+
`),x=(t.fontSize||20)*(t.lineHeight||1.2),p=Math.max(...d.map(F=>e.measureText(F).width)),b=d.length*x;if(t.backgroundColor&&t.backgroundColor!=="transparent"){e.fillStyle=t.backgroundColor;const F=t.backgroundPadding||4;e.fillRect(-F,-F,p+F*2,b+F*2),e.fillStyle=t.fill||"#000000"}d.forEach((F,v)=>{const R=v*x,A=e.measureText(F).width;t.stroke&&t.strokeWidth>0&&e.strokeText(F,0,R),e.fillText(F,0,R);const z=t.fontSize||20,$=t.decorationColor||t.fill||"#000000",nt=Math.max(1,z/20);if(e.strokeStyle=$,e.lineWidth=nt,t.textDecoration==="underline"||t.underline){const ot=R+z+2;e.beginPath(),e.moveTo(0,ot),e.lineTo(A,ot),e.stroke()}if(t.textDecoration==="overline"||t.overline){const ot=R-2;e.beginPath(),e.moveTo(0,ot),e.lineTo(A,ot),e.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const ot=R+z/2;e.beginPath(),e.moveTo(0,ot),e.lineTo(A,ot),e.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(Nt=>{switch(Nt.trim()){case"underline":const It=R+z+2;e.beginPath(),e.moveTo(0,It),e.lineTo(A,It),e.stroke();break;case"overline":const Jt=R-2;e.beginPath(),e.moveTo(0,Jt),e.lineTo(A,Jt),e.stroke();break;case"line-through":const Kt=R+z/2;e.beginPath(),e.moveTo(0,Kt),e.lineTo(A,Kt),e.stroke();break}})}),e.restore()},ue=(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))},me=(e,t)=>{const r=Math.min(t.width,t.height)/2,d=t.width/2,x=t.height/2;e.beginPath(),e.arc(d,x,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())},pe=(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())},we=(e,t)=>{const r=t.width/2,d=t.height/2,x=Math.min(t.width,t.height)/2,p=x*.4,b=t.numPoints||5;e.beginPath();for(let F=0;F<b*2;F++){const v=F%2===0?x:p,R=F*Math.PI/b,A=r+Math.cos(R)*v,z=d+Math.sin(R)*v;F===0?e.moveTo(A,z):e.lineTo(A,z)}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())},be=(e,t)=>{const r=t.width,d=t.height,x=r*.3;e.beginPath(),e.moveTo(r/2,0),e.lineTo(r,d*.6),e.lineTo(r-x,d*.6),e.lineTo(r-x,d),e.lineTo(x,d),e.lineTo(x,d*.6),e.lineTo(0,d*.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())},ve=(e,t)=>{const r=t.width/2,d=t.height/2;e.beginPath(),e.moveTo(r,0),e.lineTo(t.width,d),e.lineTo(r,t.height),e.lineTo(0,d),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,d=t.height/2,x=Math.min(t.width,t.height)/2,p=6;e.beginPath();for(let b=0;b<p;b++){const F=b*2*Math.PI/p-Math.PI/2,v=r+x*Math.cos(F),R=d+x*Math.sin(F);b===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())},Se=(e,t)=>{const r=t.width/2,d=t.height/2,x=Math.min(t.width,t.height)/2,p=5;e.beginPath();for(let b=0;b<p;b++){const F=b*2*Math.PI/p-Math.PI/2,v=r+x*Math.cos(F),R=d+x*Math.sin(F);b===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())},Fe=(e,t)=>{const r=t.width,d=t.height,x=0,p=0;e.beginPath();const b=d*.3;e.moveTo(x+r/2,p+b),e.bezierCurveTo(x+r/2,p,x,p,x,p+b),e.bezierCurveTo(x,p+(d+b)/2,x+r/2,p+(d+b)/2,x+r/2,p+d),e.bezierCurveTo(x+r/2,p+(d+b)/2,x+r,p+(d+b)/2,x+r,p+b),e.bezierCurveTo(x+r,p,x+r/2,p,x+r/2,p+b),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,d=t.height/2,x=t.width/2,p=t.height/2;e.beginPath(),e.ellipse(r,d,x,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())},je=(e,t)=>{const r=Math.min(t.width,t.height)*.1;Tt(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())},Te=(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()},Ne=(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=()=>{V()},t._imageElement.onerror=()=>{console.error("Failed to load image:",r),t._imageLoadError=!0,V()},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(d){console.error("Error drawing image:",d),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)},Ie=(e,t)=>{if(t.src&&!t.imageLoading&&!t.loadedImage){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{t.loadedImage=r,t.imageLoading=!1,V()},r.onerror=()=>{console.error("Failed to load sticker:",t.src),t.imageLoading=!1,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.fillText("Failed to load",t.width/2,t.height/2)},r.src=t.src}else t.loadedImage?e.drawImage(t.loadedImage,0,0,t.width,t.height):t.imageLoading&&(e.fillStyle="#f8f9fa",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#dee2e6",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#6c757d",e.font="12px Arial",e.textAlign="center",e.fillText("Loading...",t.width/2,t.height/2))},Ae=(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),kt(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,V()):(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),kt(e,t,"Failed to load")},r.src=t.src,kt(e,t,"Loading...")}else t.imageLoading?kt(e,t,"Loading..."):kt(e,t)},kt=(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)},Ot=(e,t,r)=>{if(!r)return!1;const d=r.x+r.width/2,x=r.y+r.height/2,p=e-d,b=t-x,F=-(r.rotation||0)*Math.PI/180,v=Math.cos(F),R=Math.sin(F),A=p*v-b*R,z=p*R+b*v,$=r.width/2,nt=r.height/2;return A>=-$&&A<=$&&z>=-nt&&z<=nt},Re=y.useCallback(()=>{(I||m||N)&&at(),D(!1),B(!1),w(!1),O(null);const e=K.current;e&&(e.style.cursor="default")},[I,m,N,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(),vt()):(t.key==="z"&&t.shiftKey||t.key==="y")&&(t.preventDefault(),mt())),(t.key==="Delete"||t.key==="Backspace")&&c&&(Bt(c.id),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="d"&&c&&($t(c.id),t.preventDefault()),c&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))){t.preventDefault();const x=t.shiftKey?10:1;let p={};switch(t.key){case"ArrowUp":p.y=c.y-x;break;case"ArrowDown":p.y=c.y+x;break;case"ArrowLeft":p.x=c.x-x;break;case"ArrowRight":p.x=c.x+x;break}Qt(c.id,p),at()}};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[c,vt,mt,l]);const Ee=(e,t={})=>{const r={id:dt(),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=dt(),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=dt(),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=dt(),r.imageData=t.imageData||null,r.width=t.width||200,r.height=t.height||200;break;case"qrcode":r.id=dt(),r.type="qrcode",r.x=(t==null?void 0:t.x)||S/2-((t==null?void 0:t.width)||100)/2,r.y=(t==null?void 0:t.y)||W/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=dt(),r.type="barcode",r.x=(t==null?void 0:t.x)||S/2-((t==null?void 0:t.width)||200)/2,r.y=(t==null?void 0:t.y)||W/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=dt(),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=dt(),r.type="horizontalLine",r.x=S/2-100,r.y=W/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=dt(),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}n(d=>[...d,r]),C(r),at()},Qt=(e,t)=>{n(r=>r.map(d=>d.id===e?{...d,...t}:d)),c&&c.id===e&&C(r=>({...r,...t}))},Bt=y.useCallback(()=>{c&&(n(e=>e.filter(t=>t.id!==c.id)),C(null),at())},[c,at]),$t=e=>{const t=h.find(r=>r.id===e);if(t){const r={...t,id:dt(),x:t.x+20,y:t.y+20};n(d=>[...d,r]),C(r),at()}},Ht=(e,t)=>{const r=h.findIndex(p=>p.id===e);if(r===-1)return;const d=[...h],x=d[r];t==="up"&&r<d.length-1?(d[r]=d[r+1],d[r+1]=x):t==="down"&&r>0?(d[r]=d[r-1],d[r-1]=x):t==="top"?(d.splice(r,1),d.push(x)):t==="bottom"&&(d.splice(r,1),d.unshift(x)),n(d),at()};y.useCallback(()=>{j&&H(e=>({...e,[j.sectionName]:{elements:[...h],selectedColor:_}}))},[j,h,_]);const[,De]=y.useReducer(e=>e+1,0);setTimeout(()=>{De()},20),y.useImperativeHandle(o,()=>({handleSectionChange:Gt,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();console.log("canvas data to export: ",t);const r={},d=(j==null?void 0:j.sectionName)||"main";r[d]={elements:t.elements,selectedColor:t.selectedColor,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight},t.sectionDesigns&&typeof t.sectionDesigns=="object"&&Object.assign(r,t.sectionDesigns);const x=s.sections&&s.sections.length>0?s.sections:[{id:d,sectionName:d,image:j==null?void 0:j.sectionImage,sectionImage:j==null?void 0:j.sectionImage}];return await Rt.current.exportAllSectionsAsJSON(r,x,S,W,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),V=y.useCallback(()=>{const e=K.current;if(!e||zt.current)return;zt.current=!0;const t=e.getContext("2d");t.clearRect(0,0,S,W),ut.current&&t.drawImage(ut.current,0,0,S,W),M&&fe(t),h.forEach(r=>{t.save(),t.globalAlpha=r.opacity||1,he(t,r),t.restore()}),c&&ne(t,c),zt.current=!1},[h,c,S,W,M]),pt=y.useCallback(()=>{gt.current&&cancelAnimationFrame(gt.current),gt.current=requestAnimationFrame(()=>{V(),gt.current=null})},[V]);y.useEffect(()=>{pt()},[h,c,S,W,M,pt]),y.useEffect(()=>{ut.current&&pt()},[ut.current,pt]),y.useEffect(()=>()=>{gt.current&&cancelAnimationFrame(gt.current)},[]);const Wt=y.useCallback(()=>{V(),(I||m||N)&&(gt.current=requestAnimationFrame(Wt))},[V,I,m,N]);y.useEffect(()=>{I||m||N?Wt():(gt.current&&(cancelAnimationFrame(gt.current),gt.current=null),pt())},[I,m,N,Wt,pt]);const Be=y.useCallback(e=>{if(l)return;const r=K.current.getBoundingClientRect(),d=(e.clientX-r.left)/Q,x=(e.clientY-r.top)/Q;if(X({x:d,y:x}),c){const b=Ut(d,x,c);if(b){if(b==="rotate"){w(!0);const F=c.x+c.width/2,v=c.y+c.height/2,R=Math.atan2(x-v,d-F)*180/Math.PI;X({x:d,y:x,initialAngle:R,initialRotation:c.rotation||0})}else B(!0),O(b),X({x:d,y:x,initialWidth:c.width,initialHeight:c.height,initialX:c.x,initialY:c.y});return}}let p=null;for(let b=h.length-1;b>=0;b--)if(Ot(d,x,h[b])){p=h[b];break}p?(C(p),D(!0),X({x:d,y:x,offsetX:d-p.x,offsetY:x-p.y})):C(null),V()},[l,Q,c,h,V]),ze=y.useCallback(e=>{if(l)return;const t=K.current,r=t.getBoundingClientRect(),d=(e.clientX-r.left)/Q,x=(e.clientY-r.top)/Q;if(c&&!I&&!m&&!N){const p=Ut(d,x,c);p?p==="rotate"?t.style.cursor="grab":t.style.cursor=p:Ot(d,x,c)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=I?"grabbing":"default";if(N&&c){const p=c.x+c.width/2,b=c.y+c.height/2,v=Math.atan2(x-b,d-p)*180/Math.PI-k.initialAngle;let R=k.initialRotation+v;e.shiftKey&&(R=Math.round(R/15)*15),R=(R%360+360)%360,n(A=>A.map(z=>z.id===c.id?{...z,rotation:R}:z)),C(A=>({...A,rotation:R})),V();return}if(m&&c&&T){const p=d-k.x,b=x-k.y;let F=k.initialWidth,v=k.initialHeight,R=k.initialX,A=k.initialY;switch(T){case"se-resize":F=Math.max(20,k.initialWidth+p),v=Math.max(20,k.initialHeight+b);break;case"sw-resize":F=Math.max(20,k.initialWidth-p),v=Math.max(20,k.initialHeight+b),R=k.initialX+(k.initialWidth-F);break;case"ne-resize":F=Math.max(20,k.initialWidth+p),v=Math.max(20,k.initialHeight-b),A=k.initialY+(k.initialHeight-v);break;case"nw-resize":F=Math.max(20,k.initialWidth-p),v=Math.max(20,k.initialHeight-b),R=k.initialX+(k.initialWidth-F),A=k.initialY+(k.initialHeight-v);break}if(e.shiftKey&&c.type!=="text"){const $=k.initialWidth/k.initialHeight;T.includes("e"),v=F/$,T.includes("n")&&(A=k.initialY+(k.initialHeight-v))}Y&&(R=xt(R),A=xt(A),F=xt(F),v=xt(v));const z={...c,x:R,y:A,width:F,height:v};n($=>$.map(nt=>nt.id===c.id?z:nt)),C(z),V();return}if(I&&c){let p=d-k.offsetX,b=x-k.offsetY;Y&&(p=xt(p),b=xt(b)),p=Math.max(0,Math.min(S-c.width,p)),b=Math.max(0,Math.min(W-c.height,b));const F={...c,x:p,y:b};n(v=>v.map(R=>R.id===c.id?F:R)),C(F),V()}},[l,Q,c,I,m,N,T,k,Y,S,W,h,V]),Gt=y.useCallback(e=>{j&&H(r=>({...r,[j.sectionName]:{elements:h.map(d=>d.type==="image"?{...d,imageData:d.imageData,src:d.src}:d),selectedColor:_}}));const t=L[e.sectionName];if(t){const r=t.elements.map(d=>{if(d.type==="image"&&d.src&&!d.imageData){const x=new Image;return x.onload=()=>{n(p=>p.map(b=>b.id===d.id?{...b,imageData:x}:b)),V()},x.src=d.src,{...d,imageData:x}}return d});n(r),rt(t.selectedColor||_)}else n([]);et(e),C(null)},[j,h,_,L,V]),We=y.useCallback(e=>{if(e&&e.type.startsWith("image/")){const t=new FileReader;t.onload=r=>{const d=new Image;d.onload=()=>{const x={id:dt(),type:"image",x:xt(S/2-100),y:xt(W/2-100),width:Math.min(d.width,200),height:Math.min(d.height,200),rotation:0,imageData:d,src:r.target.result,originalWidth:d.width,originalHeight:d.height},p=d.width/d.height;x.width/x.height!==p&&(x.width/p<=200?x.height=x.width/p:x.width=x.height*p),n(b=>[...b,x]),C(x),at()},d.onerror=()=>{console.error("Failed to load uploaded image"),alert("Failed to load the uploaded image. Please try again.")},d.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.")},[S,W,xt,dt,at]),_t=y.useCallback(Me(()=>{V()},16),[V]);y.useEffect(()=>{Et.current||_t()},[h,c,M,_t]);function Me(e,t){let r;return function(...x){const p=()=>{clearTimeout(r),e(...x)};clearTimeout(r),r=setTimeout(p,t)}}y.useEffect(()=>{yt.current&&Yt(yt.current,_)},[_]),y.useEffect(()=>{V()},[V]);const Le=(e,t,r)=>(.2126*e+.7152*t+.0722*r)/255,Yt=y.useCallback((e,t)=>{const r=Lt.current,d=r.getContext("2d");r.width=S,r.height=W,d.clearRect(0,0,S,W),d.drawImage(e,0,0,S,W);const x=d.getImageData(0,0,S,W),p=x.data,b=de(t);if(!b){Et.current=!1;return}const{r:F,g:v,b:R}=b;for(let z=0;z<p.length;z+=4){if(p[z+3]===0)continue;const nt=Le(p[z],p[z+1],p[z+2]);p[z]=Math.round(F*nt),p[z+1]=Math.round(v*nt),p[z+2]=Math.round(R*nt)}d.putImageData(x,0,0);const A=new Image;A.onload=()=>{ut.current=s.plainColor==="Y"?A:e,Et.current=!1,V()},A.src=r.toDataURL("image/png")},[S,W,V]),qt=e=>{if(!tt)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),r=document.querySelector(".ruler-vertical");if(!t||!r)return{horizontal:[],vertical:[]};const d=t.getBoundingClientRect(),x=r.getBoundingClientRect(),p=d.width,b=x.height,F=50,v=[],R=[];for(let A=F;A<=p;A+=F)A<=p-20&&v.push({position:A,value:Math.round(A/e)});for(let A=F;A<=b;A+=F)A<=b-15&&R.push({position:A,value:Math.round(A/e)});return{horizontal:v,vertical:R}},[Vt,Xt]=y.useState({horizontal:[],vertical:[]});return y.useEffect(()=>{const e=()=>{setTimeout(()=>{const d=qt(Q);Xt(d)},50)};e();let t;const r=()=>{clearTimeout(t),t=setTimeout(e,150)};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),clearTimeout(t)}},[Q,tt]),y.useEffect(()=>{if(tt&&!u){const e=setTimeout(()=>{const t=qt(Q);Xt(t)},100);return()=>clearTimeout(e)}},[tt,u,Q]),i.jsxs("div",{className:"pure-canvas-designer",children:[i.jsx("div",{className:"designer-header",children:i.jsx(Ze,{onAddElement:Ee,onDeleteElement:()=>c&&Bt(c.id),onDuplicateElement:()=>c&&$t(c.id),onUndo:vt,onRedo:mt,onToggleGrid:()=>st(!M),onToggleRulers:()=>lt(!tt),onToggleSnap:()=>P(!Y),onImageUpload:We,canUndo:J>0,canRedo:J<G.length-1,showGrid:M,showRulers:tt,snapToGrid:Y,selectedElement:c,theme:a,readOnly:l,apiKey:f.apiKey,apiEndpoint:f.apiEndpoint})}),i.jsxs("div",{className:"designer-content",children:[tt&&!u&&i.jsxs("div",{className:"rulers",children:[i.jsx("div",{className:"ruler-horizontal",children:i.jsx("div",{className:"ruler-horizontal-numbers",children:Vt.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:Vt.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:wt,children:i.jsx("canvas",{ref:K,width:S,height:W,onMouseDown:Be,onMouseMove:ze,onMouseUp:Re,style:{border:"1px solid #e2e8f0",cursor:I?"grabbing":"default",transform:`scale(${Q})`,transformOrigin:"top left"}})}),i.jsxs("div",{className:"side-panels",children:[i.jsx(ti,{selectedElement:c,onUpdate:Qt,onMoveLayer:Ht,availableFonts:le,theme:a}),i.jsx(ei,{elements:h,selectedElement:c,onSelectElement:C,onMoveLayer:Ht,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=L[e.sectionName]&&L[e.sectionName].elements&&L[e.sectionName].elements.length>0;return i.jsxs("div",{className:`section-thumbnail compact ${j.sectionName===e.sectionName?"active":""}`,onClick:r=>{r.stopPropagation();const d=s.sections.find(x=>x.sectionName===e.sectionName);Gt(d)},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 ${_===e?"active":""}`,onClick:r=>{r.stopPropagation(),rt(e)},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner compact",style:{backgroundColor:e}}),_===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 ${_===e?"active":""}`,onClick:r=>{r.stopPropagation(),rt(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:()=>ct(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=>ct(parseFloat(e.target.value)),className:"zoom-slider compact"})})]}),i.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>ct(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:()=>ct(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"})]})})]})]})]})]})});ae.displayName="Mypixia";module.exports=ae;
|