@mypixia/simplex-designer 2.0.2 โ 2.0.3
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 +8 -8
- package/dist/index.es.js +666 -710
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";require('./index_external.css');const y=require("react"),
|
|
1
|
+
"use strict";require('./index_external.css');const y=require("react"),Le=require("qrcode"),Pe=require("react-barcode"),Kt=require("axios");var At={exports:{}},vt={};/**
|
|
2
2
|
* @license React
|
|
3
3
|
* react-jsx-runtime.production.js
|
|
4
4
|
*
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
* This source code is licensed under the MIT license found in the
|
|
8
8
|
* LICENSE file in the root directory of this source tree.
|
|
9
|
-
*/var Zt;function
|
|
9
|
+
*/var Zt;function Ue(){if(Zt)return vt;Zt=1;var f=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function a(l,s,h){var x=null;if(h!==void 0&&(x=""+h),s.key!==void 0&&(x=""+s.key),"key"in s){h={};for(var n in s)n!=="key"&&(h[n]=s[n])}else h=s;return s=h.ref,{$$typeof:f,type:l,key:x,ref:s!==void 0?s:null,props:h}}return vt.Fragment=o,vt.jsx=a,vt.jsxs=a,vt}var St={};/**
|
|
10
10
|
* @license React
|
|
11
11
|
* react-jsx-runtime.development.js
|
|
12
12
|
*
|
|
@@ -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 te;function
|
|
17
|
+
*/var te;function Oe(){return te||(te=1,process.env.NODE_ENV!=="production"&&function(){function f(m){if(m==null)return null;if(typeof m=="function")return m.$$typeof===H?null:m.displayName||m.name||null;if(typeof m=="string")return m;switch(m){case S:return"Fragment";case J:return"Profiler";case j:return"StrictMode";case rt:return"Suspense";case W:return"SuspenseList";case ct:return"Activity"}if(typeof m=="object")switch(typeof m.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),m.$$typeof){case B:return"Portal";case O:return(m.displayName||"Context")+".Provider";case T:return(m._context.displayName||"Context")+".Consumer";case v:var D=m.render;return m=m.displayName,m||(m=D.displayName||D.name||"",m=m!==""?"ForwardRef("+m+")":"ForwardRef"),m;case ht:return D=m.displayName||null,D!==null?D:f(m.type)||"Memo";case Q:D=m._payload,m=m._init;try{return f(m(D))}catch{}}return null}function o(m){return""+m}function a(m){try{o(m);var D=!1}catch{D=!0}if(D){D=console;var L=D.error,G=typeof Symbol=="function"&&Symbol.toStringTag&&m[Symbol.toStringTag]||m.constructor.name||"Object";return L.call(D,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",G),o(m)}}function l(m){if(m===S)return"<>";if(typeof m=="object"&&m!==null&&m.$$typeof===Q)return"<...>";try{var D=f(m);return D?"<"+D+">":"<...>"}catch{return"<...>"}}function s(){var m=ot.A;return m===null?null:m.getOwner()}function h(){return Error("react-stack-top-frame")}function x(m){if(M.call(m,"key")){var D=Object.getOwnPropertyDescriptor(m,"key").get;if(D&&D.isReactWarning)return!1}return m.key!==void 0}function n(m,D){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)",D))}L.isReactWarning=!0,Object.defineProperty(m,"key",{get:L,configurable:!0})}function c(){var m=f(this.type);return q[m]||(q[m]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),m=this.props.ref,m!==void 0?m:null}function N(m,D,L,G,_,et,X,V){return L=et.ref,m={$$typeof:E,type:m,key:D,props:et,_owner:_},(L!==void 0?L:null)!==null?Object.defineProperty(m,"ref",{enumerable:!1,get:c}):Object.defineProperty(m,"ref",{enumerable:!1,value:null}),m._store={},Object.defineProperty(m._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(m,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(m,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.defineProperty(m,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:V}),Object.freeze&&(Object.freeze(m.props),Object.freeze(m)),m}function C(m,D,L,G,_,et,X,V){var U=D.children;if(U!==void 0)if(G)if(st(U)){for(G=0;G<U.length;G++)A(U[G]);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 A(U);if(M.call(D,"key")){U=f(m);var K=Object.keys(D).filter(function(ft){return ft!=="key"});G=0<K.length?"{key: someKey, "+K.join(": ..., ")+": ...}":"{key: someKey}",tt[U+G]||(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),tt[U+H]=!0)}if(U=null,L!==void 0&&(a(L),U=""+L),x(D)&&(a(D.key),U=""+D.key),"key"in D){L={};for(var wt in D)wt!=="key"&&(L[wt]=D[wt])}else L=D;return U&&n(L,typeof m=="function"?m.displayName||m.name||"Unknown":m),N(m,U,et,G,s(),L,X,V)}function R(m){typeof m=="object"&&m!==null&&m.$$typeof===z&&m._store&&(m._store.validated=1)}var u=y,z=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),T=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),j=Symbol.for("react.consumer"),O=Symbol.for("react.context"),k=Symbol.for("react.forward_ref"),at=Symbol.for("react.suspense"),W=Symbol.for("react.suspense_list"),ht=Symbol.for("react.memo"),Q=Symbol.for("react.lazy"),dt=Symbol.for("react.activity"),$=Symbol.for("react.client.reference"),ot=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,st=Array.isArray,Z=console.createTask?console.createTask:function(){return null};u={"react-stack-bottom-frame":function(m){return m()}};var lt,q={},P=u["react-stack-bottom-frame"].bind(u,h)(),w=Z(l(h)),tt={};St.Fragment=S,St.jsx=function(m,D,L,H,G){var et=1e4>ot.recentlyCreatedOwnerStacks++;return C(m,D,L,!1,H,G,et?Error("react-stack-top-frame"):P,et?Z(l(m)):w)},St.jsxs=function(m,D,L,H,G){var et=1e4>ot.recentlyCreatedOwnerStacks++;return C(m,D,L,!0,H,G,et?Error("react-stack-top-frame"):P,et?Z(l(m)):w)}}()),St}var ee;function Oe(){return ee||(ee=1,process.env.NODE_ENV==="production"?At.exports=Pe():At.exports=Ue()),At.exports}var e=Oe();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:"๐ก๏ธ"}]}},oe=()=>Object.values(Mt).flatMap(f=>f.icons.map(o=>({...o,category:f.name}))),Qe=f=>oe().filter(a=>a.name.toLowerCase().includes(f.toLowerCase())||a.category.toLowerCase().includes(f.toLowerCase())),$e=({onSelectIcon:f,disabled:o=!1})=>{const[a,l]=y.useState(!1),[s,h]=y.useState(""),[x,n]=y.useState("all"),d=y.useRef(null);y.useEffect(()=>{const u=z=>{d.current&&!d.current.contains(z.target)&&l(!1)};return document.addEventListener("mousedown",u),()=>document.removeEventListener("mousedown",u)},[]);const N=u=>{f(u),l(!1),h("")},R=(()=>{let u=oe();if(s.trim()&&(u=Qe(s)),x!=="all"){const z=Mt[x];z&&(u=u.filter(B=>B.category===z.name))}return u})();return e.jsxs("div",{className:"icon-selector",ref:d,children:[e.jsxs("button",{className:"toolbar-btn dropdown-trigger",disabled:o,onClick:()=>l(!a),title:"Add Icon",children:[e.jsx("span",{className:"icon",children:"๐ฏ"}),e.jsx("span",{className:"label",children:"Icons"}),e.jsx("span",{className:"dropdown-arrow",children:"โผ"})]}),a&&e.jsxs("div",{className:"icon-dropdown",children:[e.jsxs("div",{className:"icon-dropdown-header",children:[e.jsx("input",{type:"text",placeholder:"Search icons...",value:s,onChange:u=>h(u.target.value),className:"icon-search"}),e.jsxs("select",{value:x,onChange:u=>n(u.target.value),className:"category-select",children:[e.jsx("option",{value:"all",children:"All Categories"}),Object.entries(Mt).map(([u,z])=>e.jsx("option",{value:u,children:z.name},u))]})]}),e.jsx("div",{className:"icon-grid",children:R.length===0?e.jsx("div",{className:"no-icons",children:s?"No icons found":"No icons in this category"}):R.map((u,z)=>e.jsxs("button",{className:"icon-item",onClick:()=>N(u),title:`${u.name} (${u.category})`,children:[e.jsx("span",{className:"icon-symbol",children:u.symbol}),e.jsx("span",{className:"icon-name",children:u.name})]},`${u.name}-${z}`))}),e.jsx("div",{className:"icon-dropdown-footer",children:e.jsxs("span",{className:"icon-count",children:[R.length," icon",R.length!==1?"s":""]})})]})]})},He=({isOpen:f,onClose:o,onAddQRCode:a,theme:l})=>{const[s,h]=y.useState(""),[x,n]=y.useState(""),[d,N]=y.useState(200),[C,R]=y.useState("M"),u=()=>{if(!s.trim())return;const S={width:d,errorCorrectionLevel:C,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};Me.toDataURL(s,S,(T,J)=>{if(T){console.error("QR Code generation error:",T);return}n(J)})},z=()=>{if(!x)return;const S=new Image;S.onload=()=>{a({type:"qrcode",src:x,data:s,width:d,height:d,x:100,y:100,imageObject:S}),B()},S.src=x},B=()=>{h(""),n(""),o()};return f?e.jsx("div",{className:"qr-modal-overlay",onClick:B,children:e.jsxs("div",{className:"qr-modal-content",onClick:S=>S.stopPropagation(),children:[e.jsxs("div",{className:"qr-modal-header",children:[e.jsx("h3",{children:"Generate QR Code"}),e.jsx("button",{className:"qr-modal-close",onClick:B,"aria-label":"Close",children:"ร"})]}),e.jsxs("div",{className:"qr-modal-body",children:[e.jsxs("div",{className:"qr-form-group",children:[e.jsx("label",{htmlFor:"qr-data",children:"Enter Data (URL, Text, etc.)"}),e.jsx("textarea",{id:"qr-data",value:s,onChange:S=>h(S.target.value),placeholder:"https://example.com or any text...",rows:3})]}),e.jsxs("div",{className:"qr-options",children:[e.jsxs("div",{className:"qr-form-group",children:[e.jsx("label",{htmlFor:"qr-size",children:"Size (px)"}),e.jsx("input",{type:"number",id:"qr-size",value:d,onChange:S=>N(Math.max(50,Math.min(500,parseInt(S.target.value)||200))),min:"50",max:"500"})]}),e.jsxs("div",{className:"qr-form-group",children:[e.jsx("label",{htmlFor:"qr-error-level",children:"Error Correction"}),e.jsxs("select",{id:"qr-error-level",value:C,onChange:S=>R(S.target.value),children:[e.jsx("option",{value:"L",children:"Low (7%)"}),e.jsx("option",{value:"M",children:"Medium (15%)"}),e.jsx("option",{value:"Q",children:"Quartile (25%)"}),e.jsx("option",{value:"H",children:"High (30%)"})]})]})]}),e.jsx("div",{className:"qr-actions",children:e.jsx("button",{className:"qr-btn qr-btn-generate",onClick:u,disabled:!s.trim(),children:"Generate QR Code"})}),x&&e.jsxs("div",{className:"qr-preview",children:[e.jsx("h4",{children:"Preview"}),e.jsx("div",{className:"qr-preview-container",children:e.jsx("img",{src:x,alt:"QR Code Preview"})}),e.jsx("button",{className:"qr-btn qr-btn-add",onClick:z,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Ge=({isOpen:f,onClose:o,onAddBarcode:a,theme:l})=>{const[s,h]=y.useState(""),[x,n]=y.useState("CODE128"),[d,N]=y.useState(null),[C,R]=y.useState(2),[u,z]=y.useState(100),[B,S]=y.useState(20),[T,J]=y.useState("center"),[j,O]=y.useState("bottom"),[k,at]=y.useState(10),W=y.useRef(null),ht=[{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{N(e.jsx(Le,{value:s,format:x,width:C,height:u,fontSize:B,textAlign:T,textPosition:j,margin:k,background:"#ffffff",lineColor:"#000000"}))}catch(M){console.error("Barcode generation error:",M),alert("Invalid data for selected barcode format. Please check your input.")}},dt=()=>{var M,st,Z,lt;if(!(!d||!W.current))try{const q=W.current.querySelector("svg");if(!q){console.error("No SVG element found in barcode");return}const P=document.createElement("canvas"),w=P.getContext("2d"),tt=q.getBoundingClientRect(),m=((st=(M=q.width)==null?void 0:M.baseVal)==null?void 0:st.value)||tt.width||200,D=((lt=(Z=q.height)==null?void 0:Z.baseVal)==null?void 0:lt.value)||tt.height||100;P.width=m,P.height=D;const L=new XMLSerializer().serializeToString(q),H=new Blob([L],{type:"image/svg+xml;charset=utf-8"}),G=URL.createObjectURL(H),et=new Image;et.onload=()=>{w.drawImage(et,0,0);const X=P.toDataURL("image/png"),V=new Image;V.onload=()=>{a({type:"barcode",src:X,data:s,format:x,width:m,height:D,x:100,y:100,imageObject:V}),$()},V.src=X,URL.revokeObjectURL(G)},et.src=G}catch(q){console.error("Error adding barcode to canvas:",q),alert("Failed to add barcode to canvas. Please try again.")}},$=()=>{h(""),N(null),n("CODE128"),R(2),z(100),S(20),o()},ot=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?e.jsx("div",{className:"barcode-modal-overlay",onClick:$,children:e.jsxs("div",{className:"barcode-modal-content",onClick:M=>M.stopPropagation(),children:[e.jsxs("div",{className:"barcode-modal-header",children:[e.jsx("h3",{children:"Generate Barcode"}),e.jsx("button",{className:"barcode-modal-close",onClick:$,"aria-label":"Close",children:"ร"})]}),e.jsxs("div",{className:"barcode-modal-body",children:[e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-data",children:"Enter Data"}),e.jsx("input",{type:"text",id:"barcode-data",value:s,onChange:M=>h(M.target.value),placeholder:"Enter your data..."})]}),e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-format",children:"Barcode Format"}),e.jsx("select",{id:"barcode-format",value:x,onChange:M=>n(M.target.value),children:ht.map(M=>e.jsx("option",{value:M.value,children:M.label},M.value))}),e.jsx("small",{className:"format-description",children:ot(x)})]}),e.jsxs("div",{className:"barcode-options",children:[e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-width",children:"Bar Width"}),e.jsx("input",{type:"range",id:"barcode-width",min:"1",max:"4",step:"0.5",value:C,onChange:M=>R(parseFloat(M.target.value))}),e.jsxs("span",{className:"range-value",children:[C,"px"]})]}),e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-height",children:"Height"}),e.jsx("input",{type:"range",id:"barcode-height",min:"50",max:"200",value:u,onChange:M=>z(parseInt(M.target.value))}),e.jsxs("span",{className:"range-value",children:[u,"px"]})]}),e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-fontsize",children:"Font Size"}),e.jsx("input",{type:"range",id:"barcode-fontsize",min:"10",max:"30",value:B,onChange:M=>S(parseInt(M.target.value))}),e.jsxs("span",{className:"range-value",children:[B,"px"]})]}),e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"text-position",children:"Text Position"}),e.jsxs("select",{id:"text-position",value:j,onChange:M=>O(M.target.value),children:[e.jsx("option",{value:"bottom",children:"Bottom"}),e.jsx("option",{value:"top",children:"Top"})]})]})]}),e.jsx("div",{className:"barcode-actions",children:e.jsx("button",{className:"barcode-btn barcode-btn-generate",onClick:Q,disabled:!s.trim(),children:"Generate Barcode"})}),d&&e.jsxs("div",{className:"barcode-preview",children:[e.jsx("h4",{children:"Preview"}),e.jsx("div",{className:"barcode-preview-container",ref:W,children:d}),e.jsx("button",{className:"barcode-btn barcode-btn-add",onClick:dt,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},_e=({theme:f})=>e.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:[e.jsx("div",{style:{marginBottom:"16px"},children:e.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:[e.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"}),e.jsx("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]})}),e.jsx("h3",{style:{color:"#333",fontSize:"18px",fontWeight:"600",marginBottom:"12px"},children:"Premium Feature Access"}),e.jsx("p",{style:{color:"#555",fontSize:"15px",lineHeight:"1.5",marginBottom:"20px"},children:"Premium stickers feature requires a subscription to access."}),e.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"})]}),ie=()=>e.jsxs("div",{style:{textAlign:"center",padding:"40px"},children:[e.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"}}),e.jsx("p",{children:"Loading..."}),e.jsx("style",{children:`
|
|
22
|
+
<%s key={someKey} {...props} />`,G,U,K,U),tt[U+G]=!0)}if(U=null,L!==void 0&&(a(L),U=""+L),x(D)&&(a(D.key),U=""+D.key),"key"in D){L={};for(var wt in D)wt!=="key"&&(L[wt]=D[wt])}else L=D;return U&&n(L,typeof m=="function"?m.displayName||m.name||"Unknown":m),N(m,U,et,_,s(),L,X,V)}function A(m){typeof m=="object"&&m!==null&&m.$$typeof===E&&m._store&&(m._store.validated=1)}var u=y,E=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),S=Symbol.for("react.fragment"),j=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),O=Symbol.for("react.context"),v=Symbol.for("react.forward_ref"),rt=Symbol.for("react.suspense"),W=Symbol.for("react.suspense_list"),ht=Symbol.for("react.memo"),Q=Symbol.for("react.lazy"),ct=Symbol.for("react.activity"),H=Symbol.for("react.client.reference"),ot=u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,M=Object.prototype.hasOwnProperty,st=Array.isArray,Z=console.createTask?console.createTask:function(){return null};u={"react-stack-bottom-frame":function(m){return m()}};var lt,q={},P=u["react-stack-bottom-frame"].bind(u,h)(),w=Z(l(h)),tt={};St.Fragment=S,St.jsx=function(m,D,L,G,_){var et=1e4>ot.recentlyCreatedOwnerStacks++;return C(m,D,L,!1,G,_,et?Error("react-stack-top-frame"):P,et?Z(l(m)):w)},St.jsxs=function(m,D,L,G,_){var et=1e4>ot.recentlyCreatedOwnerStacks++;return C(m,D,L,!0,G,_,et?Error("react-stack-top-frame"):P,et?Z(l(m)):w)}}()),St}var ee;function Qe(){return ee||(ee=1,process.env.NODE_ENV==="production"?At.exports=Ue():At.exports=Oe()),At.exports}var e=Qe();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:"๐ก๏ธ"}]}},oe=()=>Object.values(Mt).flatMap(f=>f.icons.map(o=>({...o,category:f.name}))),$e=f=>oe().filter(a=>a.name.toLowerCase().includes(f.toLowerCase())||a.category.toLowerCase().includes(f.toLowerCase())),He=({onSelectIcon:f,disabled:o=!1})=>{const[a,l]=y.useState(!1),[s,h]=y.useState(""),[x,n]=y.useState("all"),c=y.useRef(null);y.useEffect(()=>{const u=E=>{c.current&&!c.current.contains(E.target)&&l(!1)};return document.addEventListener("mousedown",u),()=>document.removeEventListener("mousedown",u)},[]);const N=u=>{f(u),l(!1),h("")},A=(()=>{let u=oe();if(s.trim()&&(u=$e(s)),x!=="all"){const E=Mt[x];E&&(u=u.filter(B=>B.category===E.name))}return u})();return e.jsxs("div",{className:"icon-selector",ref:c,children:[e.jsxs("button",{className:"toolbar-btn dropdown-trigger",disabled:o,onClick:()=>l(!a),title:"Add Icon",children:[e.jsx("span",{className:"icon",children:"๐ฏ"}),e.jsx("span",{className:"label",children:"Icons"}),e.jsx("span",{className:"dropdown-arrow",children:"โผ"})]}),a&&e.jsxs("div",{className:"icon-dropdown",children:[e.jsxs("div",{className:"icon-dropdown-header",children:[e.jsx("input",{type:"text",placeholder:"Search icons...",value:s,onChange:u=>h(u.target.value),className:"icon-search"}),e.jsxs("select",{value:x,onChange:u=>n(u.target.value),className:"category-select",children:[e.jsx("option",{value:"all",children:"All Categories"}),Object.entries(Mt).map(([u,E])=>e.jsx("option",{value:u,children:E.name},u))]})]}),e.jsx("div",{className:"icon-grid",children:A.length===0?e.jsx("div",{className:"no-icons",children:s?"No icons found":"No icons in this category"}):A.map((u,E)=>e.jsxs("button",{className:"icon-item",onClick:()=>N(u),title:`${u.name} (${u.category})`,children:[e.jsx("span",{className:"icon-symbol",children:u.symbol}),e.jsx("span",{className:"icon-name",children:u.name})]},`${u.name}-${E}`))}),e.jsx("div",{className:"icon-dropdown-footer",children:e.jsxs("span",{className:"icon-count",children:[A.length," icon",A.length!==1?"s":""]})})]})]})},Ge=({isOpen:f,onClose:o,onAddQRCode:a,theme:l})=>{const[s,h]=y.useState(""),[x,n]=y.useState(""),[c,N]=y.useState(200),[C,A]=y.useState("M"),u=()=>{if(!s.trim())return;const S={width:c,errorCorrectionLevel:C,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};Le.toDataURL(s,S,(j,J)=>{if(j){console.error("QR Code generation error:",j);return}n(J)})},E=()=>{if(!x)return;const S=new Image;S.onload=()=>{a({type:"qrcode",src:x,data:s,width:c,height:c,x:100,y:100,imageObject:S}),B()},S.src=x},B=()=>{h(""),n(""),o()};return f?e.jsx("div",{className:"qr-modal-overlay",onClick:B,children:e.jsxs("div",{className:"qr-modal-content",onClick:S=>S.stopPropagation(),children:[e.jsxs("div",{className:"qr-modal-header",children:[e.jsx("h3",{children:"Generate QR Code"}),e.jsx("button",{className:"qr-modal-close",onClick:B,"aria-label":"Close",children:"ร"})]}),e.jsxs("div",{className:"qr-modal-body",children:[e.jsxs("div",{className:"qr-form-group",children:[e.jsx("label",{htmlFor:"qr-data",children:"Enter Data (URL, Text, etc.)"}),e.jsx("textarea",{id:"qr-data",value:s,onChange:S=>h(S.target.value),placeholder:"https://example.com or any text...",rows:3})]}),e.jsxs("div",{className:"qr-options",children:[e.jsxs("div",{className:"qr-form-group",children:[e.jsx("label",{htmlFor:"qr-size",children:"Size (px)"}),e.jsx("input",{type:"number",id:"qr-size",value:c,onChange:S=>N(Math.max(50,Math.min(500,parseInt(S.target.value)||200))),min:"50",max:"500"})]}),e.jsxs("div",{className:"qr-form-group",children:[e.jsx("label",{htmlFor:"qr-error-level",children:"Error Correction"}),e.jsxs("select",{id:"qr-error-level",value:C,onChange:S=>A(S.target.value),children:[e.jsx("option",{value:"L",children:"Low (7%)"}),e.jsx("option",{value:"M",children:"Medium (15%)"}),e.jsx("option",{value:"Q",children:"Quartile (25%)"}),e.jsx("option",{value:"H",children:"High (30%)"})]})]})]}),e.jsx("div",{className:"qr-actions",children:e.jsx("button",{className:"qr-btn qr-btn-generate",onClick:u,disabled:!s.trim(),children:"Generate QR Code"})}),x&&e.jsxs("div",{className:"qr-preview",children:[e.jsx("h4",{children:"Preview"}),e.jsx("div",{className:"qr-preview-container",children:e.jsx("img",{src:x,alt:"QR Code Preview"})}),e.jsx("button",{className:"qr-btn qr-btn-add",onClick:E,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},_e=({isOpen:f,onClose:o,onAddBarcode:a,theme:l})=>{const[s,h]=y.useState(""),[x,n]=y.useState("CODE128"),[c,N]=y.useState(null),[C,A]=y.useState(2),[u,E]=y.useState(100),[B,S]=y.useState(20),[j,J]=y.useState("center"),[T,O]=y.useState("bottom"),[v,rt]=y.useState(10),W=y.useRef(null),ht=[{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{N(e.jsx(Pe,{value:s,format:x,width:C,height:u,fontSize:B,textAlign:j,textPosition:T,margin:v,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,Z,lt;if(!(!c||!W.current))try{const q=W.current.querySelector("svg");if(!q){console.error("No SVG element found in barcode");return}const P=document.createElement("canvas"),w=P.getContext("2d"),tt=q.getBoundingClientRect(),m=((st=(M=q.width)==null?void 0:M.baseVal)==null?void 0:st.value)||tt.width||200,D=((lt=(Z=q.height)==null?void 0:Z.baseVal)==null?void 0:lt.value)||tt.height||100;P.width=m,P.height=D;const L=new XMLSerializer().serializeToString(q),G=new Blob([L],{type:"image/svg+xml;charset=utf-8"}),_=URL.createObjectURL(G),et=new Image;et.onload=()=>{w.drawImage(et,0,0);const X=P.toDataURL("image/png"),V=new Image;V.onload=()=>{a({type:"barcode",src:X,data:s,format:x,width:m,height:D,x:100,y:100,imageObject:V}),H()},V.src=X,URL.revokeObjectURL(_)},et.src=_}catch(q){console.error("Error adding barcode to canvas:",q),alert("Failed to add barcode to canvas. Please try again.")}},H=()=>{h(""),N(null),n("CODE128"),A(2),E(100),S(20),o()},ot=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?e.jsx("div",{className:"barcode-modal-overlay",onClick:H,children:e.jsxs("div",{className:"barcode-modal-content",onClick:M=>M.stopPropagation(),children:[e.jsxs("div",{className:"barcode-modal-header",children:[e.jsx("h3",{children:"Generate Barcode"}),e.jsx("button",{className:"barcode-modal-close",onClick:H,"aria-label":"Close",children:"ร"})]}),e.jsxs("div",{className:"barcode-modal-body",children:[e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-data",children:"Enter Data"}),e.jsx("input",{type:"text",id:"barcode-data",value:s,onChange:M=>h(M.target.value),placeholder:"Enter your data..."})]}),e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-format",children:"Barcode Format"}),e.jsx("select",{id:"barcode-format",value:x,onChange:M=>n(M.target.value),children:ht.map(M=>e.jsx("option",{value:M.value,children:M.label},M.value))}),e.jsx("small",{className:"format-description",children:ot(x)})]}),e.jsxs("div",{className:"barcode-options",children:[e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-width",children:"Bar Width"}),e.jsx("input",{type:"range",id:"barcode-width",min:"1",max:"4",step:"0.5",value:C,onChange:M=>A(parseFloat(M.target.value))}),e.jsxs("span",{className:"range-value",children:[C,"px"]})]}),e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-height",children:"Height"}),e.jsx("input",{type:"range",id:"barcode-height",min:"50",max:"200",value:u,onChange:M=>E(parseInt(M.target.value))}),e.jsxs("span",{className:"range-value",children:[u,"px"]})]}),e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"barcode-fontsize",children:"Font Size"}),e.jsx("input",{type:"range",id:"barcode-fontsize",min:"10",max:"30",value:B,onChange:M=>S(parseInt(M.target.value))}),e.jsxs("span",{className:"range-value",children:[B,"px"]})]}),e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"text-position",children:"Text Position"}),e.jsxs("select",{id:"text-position",value:T,onChange:M=>O(M.target.value),children:[e.jsx("option",{value:"bottom",children:"Bottom"}),e.jsx("option",{value:"top",children:"Top"})]})]})]}),e.jsx("div",{className:"barcode-actions",children:e.jsx("button",{className:"barcode-btn barcode-btn-generate",onClick:Q,disabled:!s.trim(),children:"Generate Barcode"})}),c&&e.jsxs("div",{className:"barcode-preview",children:[e.jsx("h4",{children:"Preview"}),e.jsx("div",{className:"barcode-preview-container",ref:W,children:c}),e.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},Ye=({theme:f})=>e.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:[e.jsx("div",{style:{marginBottom:"16px"},children:e.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:[e.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"}),e.jsx("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]})}),e.jsx("h3",{style:{color:"#333",fontSize:"18px",fontWeight:"600",marginBottom:"12px"},children:"Premium Feature Access"}),e.jsx("p",{style:{color:"#555",fontSize:"15px",lineHeight:"1.5",marginBottom:"20px"},children:"Premium stickers feature requires a subscription to access."}),e.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"})]}),ie=()=>e.jsxs("div",{style:{textAlign:"center",padding:"40px"},children:[e.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"}}),e.jsx("p",{children:"Loading..."}),e.jsx("style",{children:`
|
|
23
23
|
@keyframes spin {
|
|
24
24
|
0% { transform: rotate(0deg); }
|
|
25
25
|
100% { transform: rotate(360deg); }
|
|
26
26
|
}
|
|
27
|
-
`})]}),
|
|
27
|
+
`})]}),qe=({isOpen:f,onClose:o,onAddSticker:a,theme:l,apiKey:s,apiEndpoint:h})=>{const[x,n]=y.useState([]),[c,N]=y.useState(!1),[C,A]=y.useState(null),[u,E]=y.useState(""),[B,S]=y.useState(""),[j,J]=y.useState({});y.useRef(null);const[T,O]=y.useState(!1),[v,rt]=y.useState(!1),[W,ht]=y.useState(!1),Q=`${h}/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),rt(!0),ot()):P==="inactive"?(O(!1),rt(!0)):(ht(!0),await H())},H=async()=>{if(!s){O(!1),rt(!0),ht(!1);return}const P=`${Q}/get-subscription-status/${s}`;try{(await Kt.get(P)).data.object==="active"?(sessionStorage.setItem("apc_x_sub_status","active"),O(!0),ot()):(sessionStorage.setItem("apc_x_sub_status","inactive"),O(!1))}catch(w){console.error("Subscription check failed:",w),sessionStorage.setItem("apc_x_sub_status","inactive"),O(!1)}finally{ht(!1),rt(!0)}},ot=async()=>{const P=sessionStorage.getItem("apc_stickers");if(P)try{const w=JSON.parse(P);n(w);return}catch{console.warn("Failed to parse cached stickers, fetching fresh data")}N(!0),A(null);try{const w=await Kt.get(`${Q}/get-stickers`);if(w.data&&w.data.object&&w.data.object.contents){const tt=w.data.object.contents;n(tt),sessionStorage.setItem("apc_stickers",JSON.stringify(tt))}else throw new Error("Invalid response format")}catch(w){console.error("Error fetching stickers:",w),A("Failed to load stickers. Please try again.")}finally{N(!1)}},M=(P,w)=>{a({type:"sticker",src:P,name:w,width:100,height:100,x:100,y:100}),o()},st=P=>{J(w=>({...w,[P]:!w[P]}))},Z=P=>{const w={};return P.forEach(tt=>{const m=tt.name.split("/");let D=w;m.forEach((L,G)=>{D[L]||(D[L]=G===m.length-1?tt:{}),D=D[L]})}),w},lt=(P,w="",tt=0)=>e.jsx("div",{className:"sticker-tree-level",style:{paddingLeft:`${tt*15}px`},children:Object.keys(P).map(m=>{const D=`${w}/${m}`,L=j[D];return P[m].type==="image"?!B||m.toLowerCase().includes(B.toLowerCase())?e.jsx("div",{className:"sticker-item",onClick:()=>M(P[m].url,m),children:e.jsx("div",{className:"sticker-preview",children:e.jsx("img",{src:P[m].url,alt:m,loading:"lazy",onError:_=>{_.target.style.display="none"}})})},D):null:e.jsxs("div",{className:"sticker-category",children:[e.jsxs("div",{className:"category-header",onClick:()=>st(D),children:[e.jsx("span",{className:`expand-icon ${L?"expanded":""}`,children:"โถ"}),e.jsx("span",{className:"category-name",children:m})]}),L&<(P[m],D,tt+1)]},D)})}),q=x.filter(P=>!B||P.name.toLowerCase().includes(B.toLowerCase()));return f?e.jsx("div",{className:"sticker-modal-overlay",onClick:o,children:e.jsxs("div",{className:"sticker-modal-content",onClick:P=>P.stopPropagation(),children:[e.jsxs("div",{className:"sticker-modal-header",children:[e.jsx("h3",{children:"Stickers"}),e.jsx("button",{className:"sticker-modal-close",onClick:o,"aria-label":"Close",children:"ร"})]}),e.jsxs("div",{className:"sticker-modal-body",children:[W&&e.jsx(ie,{}),!T&&!W&&v&&e.jsx(Ye,{theme:l}),T&&v&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"sticker-modal-controls",children:e.jsx("div",{className:"search-container",children:e.jsx("input",{type:"text",placeholder:"Search stickers...",value:B,onChange:P=>S(P.target.value),className:"sticker-search"})})}),c&&e.jsx(ie,{}),C&&e.jsxs("div",{className:"sticker-error",children:[e.jsx("p",{children:C}),e.jsx("button",{onClick:ot,children:"Retry"})]}),!c&&!C&&x.length>0&&e.jsx("div",{className:"sticker-grid",children:lt(Z(q))})]})]})]})}):null},Ve=[{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"}],Ve=({isOpen:f,onClose:o,onAddEmbroidery:a,theme:l,apiKey:s,apiEndpoint:h})=>{const[x,n]=y.useState([]),[d,N]=y.useState(!1),[C,R]=y.useState(null),[u,z]=y.useState(""),[B,S]=y.useState("All"),T=y.useRef(null),J=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{f&&n(qe)},[f]);const j=k=>{a({type:"embroidery",src:k.url,name:k.name,description:k.description,category:k.category,width:120,height:120,x:100,y:100}),o()},O=x.filter(k=>{const at=!u||k.name.toLowerCase().includes(u.toLowerCase())||k.description.toLowerCase().includes(u.toLowerCase()),W=B==="All"||k.category===B;return at&&W});return f?e.jsx("div",{className:"embroidery-modal-overlay",onClick:o,children:e.jsxs("div",{className:"embroidery-modal-content",onClick:k=>k.stopPropagation(),ref:T,children:[e.jsxs("div",{className:"embroidery-modal-header",children:[e.jsx("h3",{children:"Choose an Embroidery Design"}),e.jsx("button",{className:"embroidery-modal-close",onClick:o,"aria-label":"Close",children:"ร"})]}),e.jsxs("div",{className:"embroidery-modal-controls",children:[e.jsx("div",{className:"search-container",children:e.jsx("input",{type:"text",placeholder:"Search embroidery designs...",value:u,onChange:k=>z(k.target.value),className:"embroidery-search"})}),e.jsxs("div",{className:"category-filter",children:[e.jsx("label",{children:"Category:"}),e.jsx("select",{value:B,onChange:k=>S(k.target.value),className:"category-select",children:J.map(k=>e.jsx("option",{value:k,children:k},k))})]})]}),e.jsxs("div",{className:"embroidery-modal-body",children:[d&&e.jsxs("div",{className:"embroidery-loading",children:[e.jsx("div",{className:"loading-spinner"}),e.jsx("p",{children:"Loading embroidery designs..."})]}),C&&e.jsx("div",{className:"embroidery-error",children:e.jsx("p",{children:C})}),!d&&!C&&e.jsx("div",{className:"embroidery-grid",children:O.map(k=>e.jsxs("div",{className:"embroidery-item",onClick:()=>j(k),title:k.description,children:[e.jsx("div",{className:"embroidery-preview",children:e.jsx("img",{src:k.url,alt:k.name,loading:"lazy",onError:at=>{console.error("Failed to load embroidery image:",k.url),at.target.style.display="none"}})}),e.jsxs("div",{className:"embroidery-info",children:[e.jsx("div",{className:"embroidery-name",children:k.name}),e.jsx("div",{className:"embroidery-category",children:k.category})]})]},k.id))}),!d&&!C&&O.length===0&&e.jsx("div",{className:"no-embroideries",children:e.jsx("p",{children:"No embroidery designs found matching your search."})})]}),e.jsx("div",{className:"embroidery-modal-footer",children:e.jsxs("div",{className:"embroidery-disclaimer",children:[e.jsx("span",{className:"disclaimer-icon",children:"โน๏ธ"}),e.jsx("span",{children:"Sample embroidery designs for preview. Actual embroidered results may vary based on fabric and thread."})]})})]})}):null},Ft=[{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"}],Xe=({isOpen:f,onClose:o,onAddText:a,theme:l})=>{const[s,h]=y.useState(""),[x,n]=y.useState("All"),d=y.useMemo(()=>{const u=Ft.reduce((z,B)=>(z[B.category]=(z[B.category]||0)+1,z),{});return[{name:"All",count:Ft.length},...Object.entries(u).map(([z,B])=>({name:z,count:B}))]},[Ft]),N=y.useMemo(()=>Ft.filter(u=>{const z=!s||u.text.toLowerCase().includes(s.toLowerCase())||u.category.toLowerCase().includes(s.toLowerCase()),B=x==="All"||u.category===x;return z&&B}),[Ft,s,x]),C=u=>{const z={...u,x:100,y:100};a("text",z),o()},R=()=>{a("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),o()};return f?e.jsx("div",{className:"text-templates-modal-overlay",onClick:o,children:e.jsxs("div",{className:"text-templates-modal",onClick:u=>u.stopPropagation(),children:[e.jsxs("div",{className:"modal-header",children:[e.jsx("h2",{children:"Text Templates"}),e.jsx("button",{className:"close-btn",onClick:o,"aria-label":"Close",children:"ร"})]}),e.jsxs("div",{className:"modal-controls",children:[e.jsx("div",{className:"search-section",children:e.jsx("input",{type:"text",placeholder:"Search templates...",value:s,onChange:u=>h(u.target.value),className:"search-input"})}),e.jsx("div",{className:"category-tabs",children:d.map(u=>e.jsxs("button",{className:`category-tab ${x===u.name?"active":""}`,onClick:()=>n(u.name),children:[u.name,e.jsxs("span",{className:"count",children:["(",u.count,")"]})]},u.name))})]}),e.jsxs("div",{className:"templates-grid",children:[e.jsx("div",{className:"custom-text-option",onClick:R,children:e.jsxs("div",{className:"custom-text-preview",children:[e.jsx("div",{className:"custom-icon",children:"โ๏ธ"}),e.jsx("div",{className:"custom-label",children:"Create Custom Text"})]})}),N.map(u=>e.jsxs("div",{className:"template-item",onClick:()=>C(u),children:[e.jsx("div",{className:"template-preview",style:{fontFamily:u.fontFamily,fontSize:`${Math.min(u.fontSize*.6,18)}px`,fontWeight:u.fontWeight,fontStyle:u.fontStyle,color:u.fill,backgroundColor:u.hasBackground?u.backgroundColor:"transparent",textAlign:u.textAlign||"left",textTransform:u.textTransform||"none",letterSpacing:u.letterSpacing?`${u.letterSpacing}px`:"normal",textShadow:u.hasTextShadow?`${u.textShadowX}px ${u.textShadowY}px ${u.textShadowBlur}px ${u.textShadowColor}`:"none"},children:u.text}),e.jsxs("div",{className:"template-info",children:[e.jsx("span",{className:"template-category",children:u.category}),e.jsx("span",{className:"template-font",children:u.fontFamily})]})]},u.id))]}),e.jsx("div",{className:"modal-footer",children:e.jsxs("div",{className:"results-count",children:[N.length," template",N.length!==1?"s":""," found"]})})]})}):null},Je=({onAddElement:f,onDeleteElement:o,onDuplicateElement:a,onUndo:l,onRedo:s,onToggleGrid:h,onToggleRulers:x,onToggleSnap:n,onImageUpload:d,canUndo:N,canRedo:C,showGrid:R,showRulers:u,snapToGrid:z,selectedElement:B,theme:S,readOnly:T,apiKey:J,apiEndpoint:j})=>{const[O,k]=y.useState(!1),[at,W]=y.useState(!1),[ht,Q]=y.useState(!1),[dt,$]=y.useState(!1),[ot,M]=y.useState(!1),[st,Z]=y.useState(!1),[lt,q]=y.useState(!1),P=U=>{const K=U.target.files[0];K&&K.type.startsWith("image/")&&d(K),U.target.value=""},w=U=>{f("icon",{iconData:U,text:U.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},tt=U=>{f("qrcode",U)},m=U=>{f("barcode",U)},D=U=>{f("sticker",U)},L=U=>{f("embroidery",U)},H=(U,K)=>{f(U,K)},G=()=>{Z(!st),q(!1)},et=()=>{q(!lt),Z(!1)},X=U=>{U==="custom"?f("text"):U==="templates"&&M(!0),Z(!1)},V=U=>{f(U),q(!1)};return e.jsxs("div",{className:"toolbar",children:[e.jsxs("div",{className:"toolbar-section",children:[e.jsxs("div",{className:"toolbar-group",children:[e.jsxs("button",{className:"toolbar-btn compact",onClick:l,disabled:!N||T,title:"Undo (Ctrl+Z)",children:[e.jsx("span",{className:"icon",children:"โถ"}),e.jsx("span",{className:"label",children:"Undo"})]}),e.jsxs("button",{className:"toolbar-btn compact",onClick:s,disabled:!C||T,title:"Redo (Ctrl+Y)",children:[e.jsx("span",{className:"icon",children:"โท"}),e.jsx("span",{className:"label",children:"Redo"})]})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsxs("div",{className:"toolbar-group",children:[e.jsxs("div",{className:"toolbar-dropdown",children:[e.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:T,title:"Add Text",onClick:G,children:[e.jsx("span",{className:"icon",children:"๐"}),e.jsx("span",{className:"label",children:"Text"}),e.jsx("span",{className:`dropdown-arrow ${st?"open":""}`,children:"โผ"})]}),e.jsxs("div",{className:`dropdown-menu ${st?"show":""}`,children:[e.jsxs("button",{onClick:()=>X("custom"),children:[e.jsx("span",{className:"icon",children:"๐"})," Custom Text"]}),e.jsxs("button",{onClick:()=>X("templates"),children:[e.jsx("span",{className:"icon",children:"๐"})," Text Templates"]})]})]}),e.jsxs("div",{className:"toolbar-dropdown",children:[e.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:T,onClick:et,children:[e.jsx("span",{className:"icon",children:"โฉ"}),e.jsx("span",{className:"label",children:"Shapes"}),e.jsx("span",{className:`dropdown-arrow ${lt?"open":""}`,children:"โผ"})]}),e.jsxs("div",{className:`dropdown-menu ${lt?"show":""}`,children:[e.jsxs("button",{onClick:()=>V("rectangle"),children:[e.jsx("span",{className:"icon",children:"โญ"})," Rectangle"]}),e.jsxs("button",{onClick:()=>V("circle"),children:[e.jsx("span",{className:"icon",children:"โ"})," Circle"]}),e.jsxs("button",{onClick:()=>V("triangle"),children:[e.jsx("span",{className:"icon",children:"โฒ"})," Triangle"]}),e.jsxs("button",{onClick:()=>V("star"),children:[e.jsx("span",{className:"icon",children:"โ
"})," Star"]}),e.jsxs("button",{onClick:()=>V("heart"),children:[e.jsx("span",{className:"icon",children:"โฅ"})," Heart"]}),e.jsxs("button",{onClick:()=>V("arrow"),children:[e.jsx("span",{className:"icon",children:"โค"})," Arrow"]}),e.jsxs("button",{onClick:()=>V("diamond"),children:[e.jsx("span",{className:"icon",children:"โ"})," Diamond"]}),e.jsxs("button",{onClick:()=>V("hexagon"),children:[e.jsx("span",{className:"icon",children:"โฌก"})," Hexagon"]}),e.jsxs("button",{onClick:()=>V("pentagon"),children:[e.jsx("span",{className:"icon",children:"โฌ"})," Pentagon"]}),e.jsxs("button",{onClick:()=>V("oval"),children:[e.jsx("span",{className:"icon",children:"โฌฏ"})," Oval"]}),e.jsxs("button",{onClick:()=>V("roundedRectangle"),children:[e.jsx("span",{className:"icon",children:"โข"})," Rounded Rectangle"]}),e.jsxs("button",{onClick:()=>V("horizontalLine"),children:[e.jsx("span",{className:"icon",children:"โ"})," Horizontal Line"]})]})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsxs("label",{className:"toolbar-btn compact file-upload",style:{cursor:T?"not-allowed":"pointer"},children:[e.jsx("span",{className:"icon",children:"โ๏ธ"}),e.jsx("span",{className:"label",children:"Upload"}),e.jsx("input",{type:"file",accept:"image/*",onChange:P,disabled:T})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsx($e,{onSelectIcon:w,theme:S,disabled:T}),e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>Q(!0),disabled:T,title:"Add Sticker",children:[e.jsx("span",{className:"icon",children:"๐จ"}),e.jsx("span",{className:"label",children:"Stickers"})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>k(!0),disabled:T,title:"Add QR Code",children:[e.jsx("span",{className:"icon",children:"โฆ"}),e.jsx("span",{className:"label",children:"QR Code"})]}),e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>W(!0),disabled:T,title:"Add Barcode",children:[e.jsx("span",{className:"icon",children:"โค"}),e.jsx("span",{className:"label",children:"Barcode"})]})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsx("div",{className:"toolbar-group embroidery-group",children:e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>$(!0),disabled:T,title:"Add Embroidery Design",children:[e.jsx("span",{className:"icon",children:"๐งต"}),e.jsx("span",{className:"label",children:"Embroidery"})]})}),B&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"toolbar-separator"}),e.jsxs("div",{className:"toolbar-group",children:[e.jsxs("button",{className:"toolbar-btn compact success",onClick:a,disabled:T,title:"Duplicate Element (Ctrl+D)",children:[e.jsx("span",{className:"icon",children:"โง"}),e.jsx("span",{className:"label",children:"Copy"})]}),e.jsxs("button",{className:"toolbar-btn compact danger",onClick:o,disabled:T,title:"Delete Element (Delete)",children:[e.jsx("span",{className:"icon",children:"๐๏ธ"}),e.jsx("span",{className:"label",children:"Delete"})]})]})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsxs("div",{className:"toolbar-group",children:[e.jsxs("button",{className:`toolbar-btn compact ${R?"active":""}`,onClick:h,title:"Toggle Grid",children:[e.jsx("span",{className:"icon",children:"โ"}),e.jsx("span",{className:"label",children:"Grid"})]}),e.jsxs("button",{className:`toolbar-btn compact ${u?"active":""}`,onClick:x,title:"Toggle Rulers",children:[e.jsx("span",{className:"icon",children:"๐"}),e.jsx("span",{className:"label",children:"Rulers"})]}),e.jsxs("button",{className:`toolbar-btn compact ${z?"active":""}`,onClick:n,title:"Snap to Grid",children:[e.jsx("span",{className:"icon",children:"๐งฒ"}),e.jsx("span",{className:"label",children:"Snap"})]})]})]}),e.jsx(He,{isOpen:O,onClose:()=>k(!1),onAddQRCode:tt,theme:S}),e.jsx(Ge,{isOpen:at,onClose:()=>W(!1),onAddBarcode:m,theme:S}),e.jsx(Ye,{isOpen:ht,onClose:()=>Q(!1),onAddSticker:D,theme:S,apiKey:J,apiEndpoint:j}),e.jsx(Ve,{isOpen:dt,onClose:()=>$(!1),onAddEmbroidery:L,theme:S,apiKey:J,apiEndpoint:j}),e.jsx(Xe,{isOpen:ot,onClose:()=>M(!1),onAddText:H,theme:S})]})},Ke=({selectedElement:f,onUpdate:o,onMoveLayer:a,availableFonts:l,theme:s})=>{const[h,x]=y.useState(!1);if(!f)return e.jsxs("div",{className:"properties-panel",children:[e.jsx("h3",{children:"Properties"}),e.jsx("p",{className:"no-selection",children:"Select an element to edit its properties"})]});const n=(S,T)=>{o(f.id,{[S]:T})},d=()=>{var S,T,J;return e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Text Content"}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Content"}),e.jsx("textarea",{value:f.text||"",onChange:j=>n("text",j.target.value),rows:3,placeholder:"Enter your text here..."})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Font Family"}),e.jsx("select",{value:f.fontFamily||"Arial",onChange:j=>n("fontFamily",j.target.value),children:l.map(j=>e.jsx("option",{value:j,children:j},j))})]}),e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Font Size"}),e.jsx("input",{type:"number",value:f.fontSize||20,onChange:j=>n("fontSize",parseInt(j.target.value)),min:"8",max:"200"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Line Height"}),e.jsx("input",{type:"number",step:"0.1",value:f.lineHeight||1.2,onChange:j=>n("lineHeight",parseFloat(j.target.value)),min:"0.5",max:"3"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Font Weight"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:f.fontWeight==="lighter"||f.fontWeight==="300"?"active":"",onClick:()=>n("fontWeight","300"),title:"Light",children:"Light"}),e.jsx("button",{className:!f.fontWeight||f.fontWeight==="normal"||f.fontWeight==="400"?"active":"",onClick:()=>n("fontWeight","normal"),title:"Normal",children:"Normal"}),e.jsx("button",{className:f.fontWeight==="bold"||f.fontWeight==="700"?"active":"",onClick:()=>n("fontWeight","bold"),title:"Bold",children:e.jsx("strong",{children:"Bold"})})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Style"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:f.fontStyle==="italic"?"active":"",onClick:()=>n("fontStyle",f.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:e.jsx("em",{children:"I"})}),e.jsx("button",{className:(S=f.textDecoration)!=null&&S.includes("underline")?"active":"",onClick:()=>{const j=f.textDecoration||"",O=j.split(" ").filter(k=>k&&k!=="underline");j.includes("underline")||O.push("underline"),n("textDecoration",O.join(" ").trim())},title:"Underline",children:e.jsx("u",{children:"U"})}),e.jsx("button",{className:(T=f.textDecoration)!=null&&T.includes("overline")?"active":"",onClick:()=>{const j=f.textDecoration||"",O=j.split(" ").filter(k=>k&&k!=="overline");j.includes("overline")||O.push("overline"),n("textDecoration",O.join(" ").trim())},title:"Overline",children:e.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),e.jsx("button",{className:(J=f.textDecoration)!=null&&J.includes("line-through")?"active":"",onClick:()=>{const j=f.textDecoration||"",O=j.split(" ").filter(k=>k&&k!=="line-through");j.includes("line-through")||O.push("line-through"),n("textDecoration",O.join(" ").trim())},title:"Strikethrough",children:e.jsx("s",{children:"S"})})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Transform"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:!f.textTransform||f.textTransform==="none"?"active":"",onClick:()=>n("textTransform","none"),title:"Normal",children:"Aa"}),e.jsx("button",{className:f.textTransform==="uppercase"?"active":"",onClick:()=>n("textTransform","uppercase"),title:"Uppercase",children:"AA"}),e.jsx("button",{className:f.textTransform==="lowercase"?"active":"",onClick:()=>n("textTransform","lowercase"),title:"Lowercase",children:"aa"}),e.jsx("button",{className:f.textTransform==="capitalize"?"active":"",onClick:()=>n("textTransform","capitalize"),title:"Capitalize",children:"Aa"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Alignment"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:!f.textAlign||f.textAlign==="left"?"active":"",onClick:()=>n("textAlign","left"),title:"Left Align",children:"โฌ
"}),e.jsx("button",{className:f.textAlign==="center"?"active":"",onClick:()=>n("textAlign","center"),title:"Center Align",children:"โ"}),e.jsx("button",{className:f.textAlign==="right"?"active":"",onClick:()=>n("textAlign","right"),title:"Right Align",children:"โก"}),e.jsx("button",{className:f.textAlign==="justify"?"active":"",onClick:()=>n("textAlign","justify"),title:"Justify",children:"โก"})]})]}),e.jsx("div",{className:"property-row",children:e.jsxs("div",{className:"color-input-group",children:[e.jsxs("div",{className:"color-input-item",children:[e.jsx("label",{children:"Text Color"}),e.jsx("input",{type:"color",value:f.fill||"#000000",onChange:j=>n("fill",j.target.value)})]}),e.jsxs("div",{className:"color-input-item",children:[e.jsx("label",{children:"Background Color"}),e.jsxs("div",{className:"color-with-toggle",children:[e.jsx("input",{type:"color",value:f.backgroundColor||"#ffffff",onChange:j=>n("backgroundColor",j.target.value),disabled:!f.hasBackground}),e.jsx("button",{className:`toggle-btn ${f.hasBackground?"active":""}`,onClick:()=>n("hasBackground",!f.hasBackground),title:f.hasBackground?"Remove background":"Add background",children:f.hasBackground?"๐":"๐โ๐จ"})]})]})]})}),h&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Letter Spacing"}),e.jsx("input",{type:"number",step:"0.1",value:f.letterSpacing||0,onChange:j=>n("letterSpacing",parseFloat(j.target.value)),min:"-5",max:"10"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Word Spacing"}),e.jsx("input",{type:"number",step:"0.1",value:f.wordSpacing||0,onChange:j=>n("wordSpacing",parseFloat(j.target.value)),min:"-10",max:"20"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Shadow"}),e.jsxs("div",{className:"text-shadow-controls",children:[e.jsx("div",{className:"shadow-toggle",children:e.jsx("button",{className:`toggle-btn ${f.hasTextShadow?"active":""}`,onClick:()=>n("hasTextShadow",!f.hasTextShadow),children:f.hasTextShadow?"Remove Shadow":"Add Shadow"})}),f.hasTextShadow&&e.jsxs("div",{className:"shadow-properties",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"H-Offset"}),e.jsx("input",{type:"number",value:f.textShadowX||2,onChange:j=>n("textShadowX",parseInt(j.target.value)),min:"-20",max:"20"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"V-Offset"}),e.jsx("input",{type:"number",value:f.textShadowY||2,onChange:j=>n("textShadowY",parseInt(j.target.value)),min:"-20",max:"20"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Blur"}),e.jsx("input",{type:"number",value:f.textShadowBlur||4,onChange:j=>n("textShadowBlur",parseInt(j.target.value)),min:"0",max:"20"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Shadow Color"}),e.jsx("input",{type:"color",value:f.textShadowColor||"#000000",onChange:j=>n("textShadowColor",j.target.value)})]})]})]})]}),e.jsx("div",{className:"property-row",children:e.jsxs("div",{className:"color-input-group",children:[e.jsxs("div",{className:"color-input-item",children:[e.jsx("label",{children:"Stroke Color"}),e.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:j=>n("stroke",j.target.value)})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Stroke Width"}),e.jsx("input",{type:"number",value:f.strokeWidth||0,onChange:j=>n("strokeWidth",parseInt(j.target.value)),min:"0",max:"20"})]})]})}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Opacity"}),e.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:f.opacity||1,onChange:j=>n("opacity",parseFloat(j.target.value))}),e.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Font Variant"}),e.jsxs("select",{value:f.fontVariant||"normal",onChange:j=>n("fontVariant",j.target.value),children:[e.jsx("option",{value:"normal",children:"Normal"}),e.jsx("option",{value:"small-caps",children:"Small Caps"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Writing Mode"}),e.jsxs("select",{value:f.writingMode||"horizontal-tb",onChange:j=>n("writingMode",j.target.value),children:[e.jsx("option",{value:"horizontal-tb",children:"Horizontal"}),e.jsx("option",{value:"vertical-rl",children:"Vertical Right-to-Left"}),e.jsx("option",{value:"vertical-lr",children:"Vertical Left-to-Right"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Direction"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:!f.direction||f.direction==="ltr"?"active":"",onClick:()=>n("direction","ltr"),title:"Left to Right",children:"LTR"}),e.jsx("button",{className:f.direction==="rtl"?"active":"",onClick:()=>n("direction","rtl"),title:"Right to Left",children:"RTL"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Background Padding"}),e.jsx("input",{type:"number",value:f.backgroundPadding||5,onChange:j=>n("backgroundPadding",parseInt(j.target.value)),min:"0",max:"50",disabled:!f.hasBackground})]})]})]})},N=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Shape Properties"}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Fill Color"}),e.jsx("input",{type:"color",value:f.fill||"#000000",onChange:S=>n("fill",S.target.value)})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Stroke Color"}),e.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:S=>n("stroke",S.target.value)})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Stroke Width"}),e.jsx("input",{type:"number",value:f.strokeWidth||2,onChange:S=>n("strokeWidth",parseInt(S.target.value)),min:"0",max:"20"})]}),f.type==="star"&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Star Points"}),e.jsx("input",{type:"number",value:f.numPoints||5,onChange:S=>n("numPoints",parseInt(S.target.value)),min:"3",max:"20"})]}),f.type==="roundedRectangle"&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Corner Radius"}),e.jsx("input",{type:"number",value:f.cornerRadius||10,onChange:S=>n("cornerRadius",parseInt(S.target.value)),min:"0",max:"50"})]})]}),C=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Image Properties"}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Opacity"}),e.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:f.opacity||1,onChange:S=>n("opacity",parseFloat(S.target.value))}),e.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),h&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Border Radius"}),e.jsx("input",{type:"number",value:f.borderRadius||0,onChange:S=>n("borderRadius",parseInt(S.target.value)),min:"0",max:"50"})]})]}),R=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Position & Size"}),e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"X"}),e.jsx("input",{type:"number",value:Math.round(f.x)||0,onChange:S=>n("x",parseInt(S.target.value))})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Y"}),e.jsx("input",{type:"number",value:Math.round(f.y)||0,onChange:S=>n("y",parseInt(S.target.value))})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Width"}),e.jsx("input",{type:"number",value:Math.round(f.width)||0,onChange:S=>n("width",parseInt(S.target.value)),min:"1"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Height"}),e.jsx("input",{type:"number",value:Math.round(f.height)||0,onChange:S=>n("height",parseInt(S.target.value)),min:"1"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Rotation"}),e.jsx("input",{type:"range",min:"-180",max:"180",value:f.rotation||0,onChange:S=>n("rotation",parseInt(S.target.value))}),e.jsxs("span",{children:[f.rotation||0,"ยฐ"]})]})]}),u=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Line Properties"}),e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Line Width"}),e.jsx("input",{type:"number",value:f.strokeWidth||f.height||2,onChange:S=>{const T=parseInt(S.target.value);n("strokeWidth",T),n("height",T)},min:"1",max:"50"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Length"}),e.jsx("input",{type:"number",value:f.width||200,onChange:S=>n("width",parseInt(S.target.value)),min:"10",max:"1000"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Line Color"}),e.jsxs("div",{className:"color-input-group",children:[e.jsx("input",{type:"color",value:f.stroke||f.fill||"#000000",onChange:S=>{n("stroke",S.target.value),n("fill",S.target.value)}}),e.jsx("input",{type:"text",value:f.stroke||f.fill||"#000000",onChange:S=>{n("stroke",S.target.value),n("fill",S.target.value)},placeholder:"#000000"})]})]})]}),z=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Layer Controls"}),e.jsxs("div",{className:"button-group vertical",children:[e.jsx("button",{onClick:()=>a(f.id,"top"),children:"Bring to Front"}),e.jsx("button",{onClick:()=>a(f.id,"up"),children:"Bring Forward"}),e.jsx("button",{onClick:()=>a(f.id,"down"),children:"Send Backward"}),e.jsx("button",{onClick:()=>a(f.id,"bottom"),children:"Send to Back"})]})]}),B=["rectangle","circle","triangle","star","arrow","diamond","hexagon","pentagon","heart","oval","roundedRectangle"];return e.jsxs("div",{className:"properties-panel",children:[e.jsxs("div",{className:"panel-header",children:[e.jsx("h3",{children:"Properties"}),e.jsx("span",{className:"element-type",children:f.type})]}),e.jsxs("div",{className:"panel-content",children:[f.type==="text"&&d(),B.includes(f.type)&&N(),f.type==="image"&&C(),f.type==="horizontalLine"&&u(),R(),z(),e.jsx("div",{className:"property-group",children:e.jsxs("button",{className:"toggle-advanced",onClick:()=>x(!h),children:[h?"Hide":"Show"," Advanced Options"]})})]})]})},Ze=({elements:f,selectedElement:o,onSelectElement:a,onMoveLayer:l,onDeleteElement:s,theme:h})=>{const x=(d,N)=>{switch(d){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=d=>{var N,C;if(d.type==="text")return d.isIcon&&d.iconData?`Icon: ${d.iconData.name}`:((N=d.text)==null?void 0:N.substring(0,20))+(((C=d.text)==null?void 0:C.length)>20?"...":"")||"Text";if(d.type==="qrcode")return`QR Code: ${(d.data||"").substring(0,15)+((d.data||"").length>15?"...":"")}`;if(d.type==="barcode"){const R=d.format||"CODE128",u=d.data||"";return`Barcode (${R}): ${u.substring(0,10)+(u.length>10?"...":"")}`}return d.type==="sticker"?`Sticker: ${(d.name||"Untitled").substring(0,15)}`:d.type==="embroidery"?`Embroidery: ${(d.name||"Design").substring(0,15)}`:d.type.charAt(0).toUpperCase()+d.type.slice(1)};return e.jsxs("div",{className:"layers-panel",children:[e.jsxs("div",{className:"panel-header",children:[e.jsx("h3",{children:"Layers"}),e.jsx("span",{className:"layer-count",children:f.length})]}),e.jsx("div",{className:"layers-list",children:f.length===0?e.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...f].reverse().map((d,N)=>e.jsxs("div",{className:`layer-item ${(o==null?void 0:o.id)===d.id?"selected":""}`,onClick:()=>a(d),children:[e.jsxs("div",{className:"layer-info",children:[e.jsx("span",{className:"layer-icon",children:x(d.type)}),e.jsx("span",{className:"layer-name",children:n(d)})]}),e.jsxs("div",{className:"layer-controls",children:[e.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(d.id,"up")},disabled:N===0,title:"Move Up",children:"โ"}),e.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(d.id,"down")},disabled:N===f.length-1,title:"Move Down",children:"โ"}),e.jsx("button",{className:"layer-btn delete",onClick:C=>{C.stopPropagation(),s(d.id)},title:"Delete",children:"ร"})]})]},d.id))})]})};class ti{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}async exportAllSections(o,a,l,s,h="png",x=!0){const n={};for(const d of a){const N=d.id||d.sectionName,C=o[N];if(!C||!C.elements||C.elements.length===0){console.log(`Skipping section ${N} - no elements`);continue}if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){const u=d.image||d.sectionImage;if(u)try{const z=await this.loadImage(u);await this.processImageColor(z,C.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(z){console.warn("Failed to load background image:",z)}}else this.ctx.clearRect(0,0,l,s);for(const u of C.elements)await this.drawElement(u);const R=this.canvas.toDataURL(`image/${h}`,h==="jpeg"?.9:void 0);n[N]={dataUrl:R,blob:await this.dataUrlToBlob(R)}}return n}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:h}=o[s],x=URL.createObjectURL(h),n=document.createElement("a");n.href=x,n.download=`${a}-${s}.png`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(x)}else for(const s of l){const{blob:h}=o[s],x=URL.createObjectURL(h),n=document.createElement("a");n.href=x,n.download=`${a}-${s}.png`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(x),await new Promise(d=>setTimeout(d,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 h=s.getImageData(0,0,l.width,l.height),x=h.data,n=this.hexToRgb(a);if(!n){console.warn("Invalid target color:",a);return}const{r:d,g:N,b:C}=n;for(let R=0;R<x.length;R+=4){if(x[R+3]===0)continue;const z=this.getLuma(x[R],x[R+1],x[R+2]);x[R]=Math.round(d*z),x[R+1]=Math.round(N*z),x[R+2]=Math.round(C*z)}return s.putImageData(h,0,0),this.processedImage=new Image,new Promise(R=>{this.processedImage.onload=()=>{R()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),R()},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":o.imageData&&this.ctx.drawImage(o.imageData,0,0,o.width,o.height);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,h)=>{const x=h*l;o.stroke&&o.strokeWidth>0&&this.ctx.strokeText(s,0,x),this.ctx.fillText(s,0,x)})}drawRectangle(o){o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fillRect(0,0,o.width,o.height)),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.strokeRect(0,0,o.width,o.height))}drawCircle(o){const a=Math.min(o.width,o.height)/2,l=o.width/2,s=o.height/2;this.ctx.beginPath(),this.ctx.arc(l,s,a,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawTriangle(o){const a=o.width/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(0,o.height),this.ctx.lineTo(o.width,o.height),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawStar(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,h=s*.4,x=o.numPoints||5;this.ctx.beginPath();for(let n=0;n<x*2;n++){const d=n%2===0?s:h,N=n*Math.PI/x,C=a+Math.cos(N)*d,R=l+Math.sin(N)*d;n===0?this.ctx.moveTo(C,R):this.ctx.lineTo(C,R)}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"),h=new Image;h.onload=()=>{l.width=h.width,l.height=h.height,s.drawImage(h,0,0),l.toBlob(a)},h.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,h=6;this.ctx.beginPath();for(let x=0;x<h;x++){const n=x*2*Math.PI/h-Math.PI/2,d=a+s*Math.cos(n),N=l+s*Math.sin(n);x===0?this.ctx.moveTo(d,N):this.ctx.lineTo(d,N)}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,h=5;this.ctx.beginPath();for(let x=0;x<h;x++){const n=x*2*Math.PI/h-Math.PI/2,d=a+s*Math.cos(n),N=l+s*Math.sin(n);x===0?this.ctx.moveTo(d,N):this.ctx.lineTo(d,N)}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,h=0;this.ctx.beginPath();const x=l*.3;this.ctx.moveTo(s+a/2,h+x),this.ctx.bezierCurveTo(s+a/2,h,s,h,s,h+x),this.ctx.bezierCurveTo(s,h+(l+x)/2,s+a/2,h+(l+x)/2,s+a/2,h+l),this.ctx.bezierCurveTo(s+a/2,h+(l+x)/2,s+a,h+(l+x)/2,s+a,h+x),this.ctx.bezierCurveTo(s+a,h,s+a/2,h,s+a/2,h+x),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawOval(o){const a=o.width/2,l=o.height/2,s=o.width/2,h=o.height/2;this.ctx.beginPath(),this.ctx.ellipse(a,l,s,h,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,h){this.ctx.beginPath(),this.ctx.moveTo(o+h,a),this.ctx.lineTo(o+l-h,a),this.ctx.quadraticCurveTo(o+l,a,o+l,a+h),this.ctx.lineTo(o+l,a+s-h),this.ctx.quadraticCurveTo(o+l,a+s,o+l-h,a+s),this.ctx.lineTo(o+h,a+s),this.ctx.quadraticCurveTo(o,a+s,o,a+s-h),this.ctx.lineTo(o,a+h),this.ctx.quadraticCurveTo(o,a,o+h,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 blobToFile(o,a,l="image/png"){return new File([o],a,{type:l,lastModified:Date.now()})}async exportAllSectionsAsJSON(o,a,l,s,h="png"){const x=[],n=[],d={};for(const C of a){const R=C.id||C.sectionName,u=o[R];if(!u||!u.elements||u.elements.length===0){console.log(`Skipping section ${R} - no elements`);continue}const z={...u,backgroundImage:C.image||C.sectionImage,sectionImage:C.image||C.sectionImage,sectionName:R,selectedColor:u.selectedColor||"#FFFFFF",canvasWidth:l,canvasHeight:s};d[R]=z;const B=await this.exportSectionAsBlob(u,C,l,s,h,!0);if(B){const T=await this.blobToFile(B,`${R}-full.${h}`,`image/${h}`);x.push({sectionName:R,sectionImage:T})}const S=await this.exportSectionAsBlob(u,C,l,s,h,!1);if(S){const T=await this.blobToFile(S,`${R}-print.${h}`,`image/${h}`);n.push({sectionName:R,sectionImage:T})}}const N={sections:d,canvasWidth:l,canvasHeight:s,format:h,timestamp:new Date().toISOString(),version:"1.0",product:{sections:a.map(C=>({sectionName:C.sectionName||C.id,sectionImage:C.image||C.sectionImage,id:C.id||C.sectionName}))}};return{fullDesign:x,printReady:n,designFile:JSON.stringify(N)}}async exportSectionAsBlob(o,a,l,s,h="png",x=!0){try{if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){const n=a.image||a.sectionImage;if(n)try{const d=await this.loadImage(n);await this.processImageColor(d,o.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(d){console.warn("Failed to load background image:",d)}}else this.ctx.clearRect(0,0,l,s);for(const n of o.elements)await this.drawElement(n);return new Promise(n=>{this.canvas.toBlob(n,`image/${h}`,h==="jpeg"?.9:void 0)})}catch(n){return console.error("Error exporting section as blob:",n),null}}async exportCurrentSectionAsJSON(o,a="png"){var R,u,z,B,S,T,J,j,O;const l=((R=o.activeSection)==null?void 0:R.sectionName)||"main",s={elements:o.elements,selectedColor:o.selectedColor,canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,backgroundImage:((u=o.activeSection)==null?void 0:u.sectionImage)||((z=o.activeSection)==null?void 0:z.image),sectionImage:((B=o.activeSection)==null?void 0:B.sectionImage)||((S=o.activeSection)==null?void 0:S.image),sectionName:l,zoomLevel:o.zoomLevel,showGrid:o.showGrid,snapToGrid:o.snapToGrid},h={id:l,sectionName:l,image:(T=o.activeSection)==null?void 0:T.sectionImage,sectionImage:(J=o.activeSection)==null?void 0:J.sectionImage},x=[],n=[],d=await this.exportSectionAsBlob(s,h,o.canvasWidth,o.canvasHeight,a,!0);if(d){const k=await this.blobToFile(d,`${l}-full.${a}`,`image/${a}`);x.push({sectionName:l,sectionImage:k})}const N=await this.exportSectionAsBlob(s,h,o.canvasWidth,o.canvasHeight,a,!1);if(N){const k=await this.blobToFile(N,`${l}-print.${a}`,`image/${a}`);n.push({sectionName:l,sectionImage:k})}const C={sections:{[l]:s},canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,format:a,timestamp:new Date().toISOString(),version:"1.0",productInfo:{sections:[{sectionName:l,sectionImage:((j=o.activeSection)==null?void 0:j.sectionImage)||((O=o.activeSection)==null?void 0:O.image),id:l}]}};return{fullDesign:x,printReady:n,designFile:JSON.stringify(C)}}}class ei{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),h=new Date().toISOString(),x={id:s,name:o,timestamp:h,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:h,thumbnail:a.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+s,JSON.stringify(x)),this.updateDesignsList(s,o,h),{success:!0,designId:s,message:"Design saved successfully"}}catch(s){return console.error("Error saving design:",s),{success:!1,error:s.message}}}loadDesign(o){try{let a=o;if(!o.startsWith("design_")){const x=this.getAllDesigns().find(n=>n.name===o);if(!x)return{success:!1,error:"Design not found"};a=x.id}const l=this.storage.getItem(this.STORAGE_PREFIX+a);return l?{success:!0,data:JSON.parse(l)}:{success:!1,error:"Design not found"}}catch(a){return console.error("Error loading design:",a),{success:!1,error:a.message}}}getAllDesigns(){try{const o=this.storage.getItem(this.DESIGNS_LIST_KEY);return o?JSON.parse(o):[]}catch(o){return console.error("Error getting designs list:",o),[]}}deleteDesign(o){try{this.storage.removeItem(this.STORAGE_PREFIX+o);const l=this.getAllDesigns().filter(s=>s.id!==o);return this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(l)),{success:!0,message:"Design deleted successfully"}}catch(a){return console.error("Error deleting design:",a),{success:!1,error:a.message}}}exportDesignAsFile(o){try{const a=this.loadDesign(o);if(!a.success)return a;const l=a.data,s=JSON.stringify(l,null,2),h=new Blob([s],{type:"application/json"}),x=URL.createObjectURL(h),n=document.createElement("a");return n.href=x,n.download=`${l.name}_${l.id}.json`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(x),{success:!0,message:"Design exported successfully"}}catch(a){return console.error("Error exporting design:",a),{success:!1,error:a.message}}}importDesignFromFile(o){return new Promise(a=>{try{const l=new FileReader;l.onload=s=>{try{const h=JSON.parse(s.target.result);if(!this.validateDesignData(h)){a({success:!1,error:"Invalid design file format"});return}const x=this.generateDesignId(h.name+"_imported");h.id=x,h.name+="_imported",h.timestamp=new Date().toISOString(),h.metadata.lastModified=h.timestamp,this.storage.setItem(this.STORAGE_PREFIX+x,JSON.stringify(h)),this.updateDesignsList(x,h.name,h.timestamp),a({success:!0,data:h,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(),h=s.findIndex(n=>n.id===o),x={id:o,name:a,timestamp:l,lastModified:l};h>=0?s[h]=x:s.push(x),s.sort((n,d)=>new Date(d.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 re=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:h}=f,[x,n]=y.useState([]),[d,N]=y.useState(null),[C,R]=y.useState(!1),[u,z]=y.useState(!1),[B,S]=y.useState(!1),[T,J]=y.useState({x:0,y:0}),[j,O]=y.useState(null),[k,at]=y.useState(800),[W,ht]=y.useState(600),[Q,dt]=y.useState(1),[$,ot]=y.useState(s.colorSettings[0]),[M,st]=y.useState(!1),[Z,lt]=y.useState(!0),[q,P]=y.useState(!0),[w,tt]=y.useState(s.sections[0]),[m,D]=y.useState(!1),[L,H]=y.useState({}),[G,et]=y.useState([]),[X,V]=y.useState(-1),[U]=y.useState(new ei("localStorage")),K=y.useRef(null),wt=y.useRef(null),ft=y.useRef(null),gt=y.useRef(null),Lt=y.useRef(null),Rt=y.useRef(new ti),ut=y.useRef(!1),rt=y.useCallback(()=>{const i={elements:JSON.parse(JSON.stringify(x)),selectedElement:d?{...d}:null,timestamp:Date.now()},t=G.slice(0,X+1);t.push(i),t.length>50?t.shift():V(X+1),et(t)},[x,d,G,X]),bt=y.useCallback(()=>({elements:x,canvasWidth:k,canvasHeight:W,selectedColor:$,activeSection:w,product:s,sectionDesigns:L,zoomLevel:Q,showGrid:M,snapToGrid:q,selectedElement:d?{...d}:null,canvasRef:K}),[x,k,W,$,w,s,L,Q,M,q,d]);y.useEffect(()=>{const t=setTimeout(async()=>{if(x.length===0&&G.length<=1){if(h)try{const I=await fetch(h);if(I.ok){const E=await I.text();if(E.trim()){const Y=JSON.parse(E.trim());if(Y.sections&&typeof Y.sections=="object"){const ct=Object.keys(Y.sections)[0],it=Y.sections[ct];if(it&&it.elements){console.log("Loading design from file:",h),n(it.elements||[]),at(it.canvasWidth||800),ht(it.canvasHeight||600),ot(it.selectedColor||s.colorSettings[0]),dt(it.zoomLevel||1),st(it.showGrid||!1),P(it.snapToGrid||!0),N(null),Y.sections&&H(Y.sections);const Nt=s.sections.find(It=>It.sectionName===ct);Nt&&tt(Nt),et([]),V(-1),setTimeout(()=>{rt()},100);return}}}}else console.warn("Failed to load design file, using default text")}catch(I){console.error("Error loading design file:",I),console.warn("Using default text instead")}const r=24,c="Arial",g="Change me",b=document.createElement("canvas").getContext("2d");b.font=`${r}px ${c}`;const v=b.measureText(g).width,A={id:nt(),type:"text",x:k/2-v/2,y:W/2-r/2,width:v,height:r,text:g,fontSize:r,fontFamily:c,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};n([A]),N(A),setTimeout(()=>{rt()},100)}},300);return()=>clearTimeout(t)},[h,s.colorSettings,s.sections]),y.useEffect(()=>{const t=setTimeout(async()=>{if(x.length===0&&G.length<=1){let r="Change me";if(h&&f.initFile.length>0)try{const I=await fetch(h);if(I.ok){const E=await I.text();console.log("fileContent",E),E.trim()&&(r=E.trim())}else console.warn("Failed to load file content, using default text")}catch(I){console.error("Error loading file content:",I),console.warn("Using default text instead")}const c=24,g="Arial",b=document.createElement("canvas").getContext("2d");b.font=`${c}px ${g}`;const v=b.measureText(r).width,A={id:nt(),type:"text",x:k/2-v/2,y:W/2-c/2,width:v,height:c,text:r,fontSize:c,fontFamily:g,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};n([A]),N(A),setTimeout(()=>{rt()},100)}},300);return()=>clearTimeout(t)},[h]);const Dt=y.useCallback((i="png",t=!0)=>{const r=bt();return s.sections,Rt.current.exportAllSections({[(w==null?void 0:w.sectionName)||"main"]:r},[{id:(w==null?void 0:w.sectionName)||"main",sectionName:(w==null?void 0:w.sectionName)||"main",image:w==null?void 0:w.sectionImage,sectionImage:w==null?void 0:w.sectionImage}],k,W,i,t)},[bt,s.sections,w,k,W]),ae=["Arial","Helvetica","Times New Roman","Georgia","Verdana","Courier New","Tahoma","Trebuchet MS","Impact","Comic Sans MS","Palatino","Garamond","Bookman","Avant Garde","Century Gothic"],Ct=20;y.useEffect(()=>{const i=()=>D(window.innerWidth<768);return i(),window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]),y.useEffect(()=>{const i=document.createElement("canvas");i.width=k,i.height=W,Lt.current=i},[k,W]),y.useEffect(()=>{G.length===0&&rt()},[]);const Tt=(i,t,r,c,g,p)=>{i.beginPath(),i.moveTo(t+p,r),i.lineTo(t+c-p,r),i.quadraticCurveTo(t+c,r,t+c,r+p),i.lineTo(t+c,r+g-p),i.quadraticCurveTo(t+c,r+g,t+c-p,r+g),i.lineTo(t+p,r+g),i.quadraticCurveTo(t,r+g,t,r+g-p),i.lineTo(t,r+p),i.quadraticCurveTo(t,r,t+p,r),i.closePath()},Pt=(i,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};i.save(),i.font=`${t.fontStyle||""} ${t.fontWeight||""} ${t.fontSize}px ${t.fontFamily}`,i.textBaseline="alphabetic",i.textAlign="left";const r=i.measureText(t.text),c=r.actualBoundingBoxAscent??t.fontSize*.8,g=r.actualBoundingBoxDescent??t.fontSize*.2,p=r.actualBoundingBoxLeft??0,b=r.actualBoundingBoxRight??r.width,F=p+b,v=c+g,A=t.x,I=t.y,E=A-F/2-p,Y=I-v/2-c;return i.restore(),{x:E,y:Y,width:F,height:v,cx:A,cy:I}},se=(i,t)=>{if(!t)return;const r=8,c=8,g=4,p=30,b=Pt(i,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};i.save(),i.translate(b.cx,b.cy),t.rotation&&i.rotate(t.rotation*Math.PI/180);const A=i.createLinearGradient(v.x,v.y,v.x+v.w,v.y+v.h);A.addColorStop(0,"#3b82f6"),A.addColorStop(.5,"#1d4ed8"),A.addColorStop(1,"#3b82f6"),i.strokeStyle="rgba(59,130,246,.3)",i.lineWidth=3,Tt(i,v.x-1,v.y-1,v.w+2,v.h+2,g+1),i.stroke(),i.strokeStyle=A,i.lineWidth=2,i.setLineDash([8,4]),Tt(i,v.x,v.y,v.w,v.h,g),i.stroke(),i.lineDashOffset=-(Date.now()/50)%12,i.strokeStyle="#ffffff",i.lineWidth=1,i.setLineDash([4,8]),Tt(i,v.x,v.y,v.w,v.h,g),i.stroke(),i.setLineDash([]),i.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(Y=>{i.fillStyle="rgba(0,0,0,.2)",i.fillRect(Y.x-c/2+1,Y.y-c/2+1,c,c),i.fillStyle="#ffffff",i.fillRect(Y.x-c/2,Y.y-c/2,c,c),i.strokeStyle="#3b82f6",i.lineWidth=1,i.strokeRect(Y.x-c/2,Y.y-c/2,c,c)});const I=0,E=v.y-p;i.strokeStyle="#3b82f6",i.lineWidth=1,i.setLineDash([2,2]),i.beginPath(),i.moveTo(I,E+12),i.lineTo(I,v.y),i.stroke(),i.setLineDash([]),i.beginPath(),i.arc(I,E,12,0,2*Math.PI),i.fillStyle="#f59e0b",i.fill(),i.strokeStyle="#ffffff",i.lineWidth=2,i.stroke(),i.strokeStyle="#ffffff",i.lineWidth=2,i.beginPath(),i.arc(I,E,6,-Math.PI/2,Math.PI,!1),i.stroke(),i.beginPath(),i.moveTo(I-6,E),i.lineTo(I-3,E-3),i.lineTo(I-3,E+3),i.closePath(),i.fillStyle="#ffffff",i.fill(),i.restore()},le=(i,t)=>{if(!t)return[];const r=Pt(i,t),c=t.isIcon?Math.max(8,12):8,g=8,p=30,b=(t.rotation||0)*Math.PI/180,F={x:-r.width/2-c,y:-r.height/2-c,w:r.width+c*2,h:r.height+c*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"}],A=Math.cos(b),I=Math.sin(b);return v.map(E=>({x:r.cx+(E.x*A-E.y*I),y:r.cy+(E.x*I+E.y*A),type:E.type,size:E.type==="rotate"?24:g}))},Ut=(i,t,r)=>{if(!r)return null;const c=K.current;if(!c)return null;const g=c.getContext("2d"),p=le(g,r);for(const b of p){const F=i-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(X>0){const i=G[X-1];n(i.elements),N(i.selectedElement),V(X-1)}},[G,X]),mt=y.useCallback(()=>{if(X<G.length-1){const i=G[X+1];n(i.elements),N(i.selectedElement),V(X+1)}},[G,X]),yt=i=>q?Math.round(i/Ct)*Ct:i;y.useEffect(()=>{if(w!=null&&w.sectionImage){ft.current=null,gt.current=null;const i=K.current;i&&(i.getContext("2d").clearRect(0,0,k,W),console.log("cleared canvas"));const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{ft.current=t,jt(t,$)},t.onerror=()=>{console.error("Failed to load background image:",w.sectionImage),_()},t.src=w.sectionImage}else ft.current=null,gt.current=null,_()},[w==null?void 0:w.sectionImage]),y.useEffect(()=>{const i=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")&&d&&!l){t.preventDefault();const g=d;n(p=>p.filter(b=>b.id!==g.id)),N(null),rt()}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",i),()=>{document.removeEventListener("keydown",i)}},[d,l,vt,mt,rt]);const ne=i=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(i);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},nt=()=>`element_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,ce=i=>{i.strokeStyle="#e0e0e0",i.lineWidth=1,i.setLineDash([1,1]);for(let t=0;t<=k;t+=Ct)i.beginPath(),i.moveTo(t,0),i.lineTo(t,W),i.stroke();for(let t=0;t<=W;t+=Ct)i.beginPath(),i.moveTo(0,t),i.lineTo(k,t),i.stroke();i.setLineDash([])},de=(i,t)=>{i.save();const r=t.x+t.width/2,c=t.y+t.height/2;switch(i.translate(r,c),t.rotation&&i.rotate(t.rotation*Math.PI/180),i.translate(-t.width/2,-t.height/2),t.type){case"text":ge(i,t);break;case"rectangle":xe(i,t);break;case"circle":ye(i,t);break;case"triangle":ue(i,t);break;case"star":me(i,t);break;case"arrow":pe(i,t);break;case"diamond":we(i,t);break;case"hexagon":be(i,t);break;case"pentagon":ve(i,t);break;case"heart":ke(i,t);break;case"oval":Se(i,t);break;case"roundedRectangle":Fe(i,t);break;case"image":Te(i,t);break;case"qrcode":he(i,t);break;case"barcode":fe(i,t);break;case"sticker":je(i,t);break;case"horizontalLine":Ce(i,t);break;case"embroidery":Ne(i,t);break}i.restore()},fe=(i,t)=>{if(t.imageObject)i.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(c=>c.map(g=>g.id===t.id?{...g,imageObject:r,imageLoading:!1}:g))},r.onerror=()=>{n(c=>c.map(g=>g.id===t.id?{...g,imageLoading:!1}:g))},r.src=t.src,i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading...",t.width/2,t.height/2)}else t.imageLoading?(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading...",t.width/2,t.height/2)):(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("No Barcode",t.width/2,t.height/2))},he=(i,t)=>{if(t.imageObject)i.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(c=>c.map(g=>g.id===t.id?{...g,imageObject:r,imageLoading:!1}:g))},r.onerror=()=>{n(c=>c.map(g=>g.id===t.id?{...g,imageLoading:!1}:g))},r.src=t.src,i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading QR...",t.width/2,t.height/2)}else t.imageLoading?(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading QR...",t.width/2,t.height/2)):(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("No QR Data",t.width/2,t.height/2))},ge=(i,t)=>{i.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}i.font=`${t.fontStyle||"normal"} ${t.fontWeight||"normal"} ${t.fontSize||20}px ${t.fontFamily||"Arial"}`,i.fillStyle=t.fill||"#000000",i.textAlign=t.textAlign||"left",i.textBaseline="top",t.opacity!==void 0&&(i.globalAlpha=t.opacity),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth);const c=r.split(`
|
|
991
|
-
`),g=(t.fontSize||20)*(t.lineHeight||1.2),p=Math.max(...c.map(F=>i.measureText(F).width)),b=c.length*g;if(t.backgroundColor&&t.backgroundColor!=="transparent"){i.fillStyle=t.backgroundColor;const F=t.backgroundPadding||4;i.fillRect(-F,-F,p+F*2,b+F*2),i.fillStyle=t.fill||"#000000"}c.forEach((F,v)=>{const A=v*g,I=i.measureText(F).width;t.stroke&&t.strokeWidth>0&&i.strokeText(F,0,A),i.fillText(F,0,A);const E=t.fontSize||20,Y=t.decorationColor||t.fill||"#000000",ct=Math.max(1,E/20);if(i.strokeStyle=Y,i.lineWidth=ct,t.textDecoration==="underline"||t.underline){const it=A+E+2;i.beginPath(),i.moveTo(0,it),i.lineTo(I,it),i.stroke()}if(t.textDecoration==="overline"||t.overline){const it=A-2;i.beginPath(),i.moveTo(0,it),i.lineTo(I,it),i.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const it=A+E/2;i.beginPath(),i.moveTo(0,it),i.lineTo(I,it),i.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(Nt=>{switch(Nt.trim()){case"underline":const It=A+E+2;i.beginPath(),i.moveTo(0,It),i.lineTo(I,It),i.stroke();break;case"overline":const Xt=A-2;i.beginPath(),i.moveTo(0,Xt),i.lineTo(I,Xt),i.stroke();break;case"line-through":const Jt=A+E/2;i.beginPath(),i.moveTo(0,Jt),i.lineTo(I,Jt),i.stroke();break}})}),i.restore()},xe=(i,t)=>{t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fillRect(0,0,t.width,t.height)),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.strokeRect(0,0,t.width,t.height))},ye=(i,t)=>{const r=Math.min(t.width,t.height)/2,c=t.width/2,g=t.height/2;i.beginPath(),i.arc(c,g,r,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},ue=(i,t)=>{const r=t.width/2;t.height/2,i.beginPath(),i.moveTo(r,0),i.lineTo(0,t.height),i.lineTo(t.width,t.height),i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},me=(i,t)=>{const r=t.width/2,c=t.height/2,g=Math.min(t.width,t.height)/2,p=g*.4,b=t.numPoints||5;i.beginPath();for(let F=0;F<b*2;F++){const v=F%2===0?g:p,A=F*Math.PI/b,I=r+Math.cos(A)*v,E=c+Math.sin(A)*v;F===0?i.moveTo(I,E):i.lineTo(I,E)}i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},pe=(i,t)=>{const r=t.width,c=t.height,g=r*.3;i.beginPath(),i.moveTo(r/2,0),i.lineTo(r,c*.6),i.lineTo(r-g,c*.6),i.lineTo(r-g,c),i.lineTo(g,c),i.lineTo(g,c*.6),i.lineTo(0,c*.6),i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},we=(i,t)=>{const r=t.width/2,c=t.height/2;i.beginPath(),i.moveTo(r,0),i.lineTo(t.width,c),i.lineTo(r,t.height),i.lineTo(0,c),i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},be=(i,t)=>{const r=t.width/2,c=t.height/2,g=Math.min(t.width,t.height)/2,p=6;i.beginPath();for(let b=0;b<p;b++){const F=b*2*Math.PI/p-Math.PI/2,v=r+g*Math.cos(F),A=c+g*Math.sin(F);b===0?i.moveTo(v,A):i.lineTo(v,A)}i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},ve=(i,t)=>{const r=t.width/2,c=t.height/2,g=Math.min(t.width,t.height)/2,p=5;i.beginPath();for(let b=0;b<p;b++){const F=b*2*Math.PI/p-Math.PI/2,v=r+g*Math.cos(F),A=c+g*Math.sin(F);b===0?i.moveTo(v,A):i.lineTo(v,A)}i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},ke=(i,t)=>{const r=t.width,c=t.height,g=0,p=0;i.beginPath();const b=c*.3;i.moveTo(g+r/2,p+b),i.bezierCurveTo(g+r/2,p,g,p,g,p+b),i.bezierCurveTo(g,p+(c+b)/2,g+r/2,p+(c+b)/2,g+r/2,p+c),i.bezierCurveTo(g+r/2,p+(c+b)/2,g+r,p+(c+b)/2,g+r,p+b),i.bezierCurveTo(g+r,p,g+r/2,p,g+r/2,p+b),i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},Se=(i,t)=>{const r=t.width/2,c=t.height/2,g=t.width/2,p=t.height/2;i.beginPath(),i.ellipse(r,c,g,p,0,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},Fe=(i,t)=>{const r=Math.min(t.width,t.height)*.1;Tt(i,0,0,t.width,t.height,r),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},Ce=(i,t)=>{i.save(),t.opacity!==void 0&&(i.globalAlpha=t.opacity),i.strokeStyle=t.stroke||t.fill||"#000000",i.lineWidth=t.strokeWidth||t.height||2,i.lineCap="round",i.beginPath(),i.moveTo(0,t.height/2),i.lineTo(t.width,t.height/2),i.stroke(),i.restore()},Te=(i,t)=>{if(t.imageData)try{t.imageData.complete&&t.imageData.naturalHeight!==0?i.drawImage(t.imageData,0,0,t.width,t.height):(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.lineWidth=1,i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="14px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading...",t.width/2,t.height/2))}catch(r){console.error("Error drawing image:",r),i.fillStyle="#ffebee",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#f44336",i.lineWidth=2,i.strokeRect(0,0,t.width,t.height),i.fillStyle="#f44336",i.font="14px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Error loading image",t.width/2,t.height/2)}},je=(i,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,_()},r.onerror=()=>{console.error("Failed to load sticker:",t.src),t.imageLoading=!1,i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.fillText("Failed to load",t.width/2,t.height/2)},r.src=t.src}else t.loadedImage?i.drawImage(t.loadedImage,0,0,t.width,t.height):t.imageLoading&&(i.fillStyle="#f8f9fa",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#dee2e6",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#6c757d",i.font="12px Arial",i.textAlign="center",i.fillText("Loading...",t.width/2,t.height/2))},Ne=(i,t)=>{if(t.imageObject)i.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{t.imageObject=r,t.imageLoading=!1,_()},r.onerror=()=>{t.imageLoading=!1,console.error("Failed to load embroidery image:",t.src),Et(i,t)},r.src=t.src,Et(i,t,"Loading...")}else Et(i,t)},Et=(i,t,r="Embroidery")=>{i.fillStyle="#f9f9f9",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ddd",i.lineWidth=2,i.strokeRect(0,0,t.width,t.height),i.fillStyle="#999",i.font="24px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("๐งต",t.width/2,t.height/2-10),i.fillStyle="#666",i.font="12px Arial",i.fillText(r,t.width/2,t.height/2+15)},Ot=(i,t,r)=>{if(!r)return!1;const c=r.x+r.width/2,g=r.y+r.height/2,p=i-c,b=t-g,F=-(r.rotation||0)*Math.PI/180,v=Math.cos(F),A=Math.sin(F),I=p*v-b*A,E=p*A+b*v,Y=r.width/2,ct=r.height/2;return I>=-Y&&I<=Y&&E>=-ct&&E<=ct},Ie=y.useCallback(()=>{(C||u||B)&&rt(),R(!1),z(!1),S(!1),O(null);const i=K.current;i&&(i.style.cursor="default")},[C,u,B,rt]);y.useEffect(()=>{const i=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")&&d&&(zt(d.id),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="d"&&d&&($t(d.id),t.preventDefault()),d&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))){t.preventDefault();const g=t.shiftKey?10:1;let p={};switch(t.key){case"ArrowUp":p.y=d.y-g;break;case"ArrowDown":p.y=d.y+g;break;case"ArrowLeft":p.x=d.x-g;break;case"ArrowRight":p.x=d.x+g;break}Qt(d.id,p),rt()}};return window.addEventListener("keydown",i),()=>window.removeEventListener("keydown",i)},[d,vt,mt,l]);const Ae=(i,t={})=>{const r={id:nt(),type:i,x:50,y:50,width:100,height:100,fill:"#000000",stroke:"#000000",strokeWidth:0,rotation:0,...t};switch(i){case"text":r.id=nt(),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=nt(),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=nt(),r.imageData=t.imageData||null,r.width=t.width||200,r.height=t.height||200;break;case"qrcode":r.id=nt(),r.type="qrcode",r.x=(t==null?void 0:t.x)||k/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=nt(),r.type="barcode",r.x=(t==null?void 0:t.x)||k/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=nt(),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=nt(),r.type="horizontalLine",r.x=k/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=nt(),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: ${i}`);return}n(c=>[...c,r]),N(r),rt()},Qt=(i,t)=>{n(r=>r.map(c=>c.id===i?{...c,...t}:c)),d&&d.id===i&&N(r=>({...r,...t}))},zt=y.useCallback(()=>{d&&(n(i=>i.filter(t=>t.id!==d.id)),N(null),rt())},[d,rt]),$t=i=>{const t=x.find(r=>r.id===i);if(t){const r={...t,id:nt(),x:t.x+20,y:t.y+20};n(c=>[...c,r]),N(r),rt()}},Ht=(i,t)=>{const r=x.findIndex(p=>p.id===i);if(r===-1)return;const c=[...x],g=c[r];t==="up"&&r<c.length-1?(c[r]=c[r+1],c[r+1]=g):t==="down"&&r>0?(c[r]=c[r-1],c[r-1]=g):t==="top"?(c.splice(r,1),c.push(g)):t==="bottom"&&(c.splice(r,1),c.unshift(g)),n(c),rt()};y.useCallback(()=>{w&&H(i=>({...i,[w.sectionName]:{elements:[...x],selectedColor:$}}))},[w,x,$]);const[,Re]=y.useReducer(i=>i+1,0);setTimeout(()=>{Re()},20),y.useImperativeHandle(o,()=>({handleSectionChange:Gt,exportPrintReady:async(i="png")=>await Dt(i,!1),exportFullDesign:async(i="png")=>await Dt(i,!0),exportDesign:Dt,getCanvasData:()=>bt(),exportAllDesignsAsJSON:async(i="png")=>{try{const t=bt();console.log("canvas data to export: ",t);const r={},c=(w==null?void 0:w.sectionName)||"main";r[c]={elements:t.elements,selectedColor:t.selectedColor,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight},t.sectionDesigns&&typeof t.sectionDesigns=="object"&&Object.assign(r,t.sectionDesigns);const g=s.sections&&s.sections.length>0?s.sections:[{id:c,sectionName:c,image:w==null?void 0:w.sectionImage,sectionImage:w==null?void 0:w.sectionImage}];return await Rt.current.exportAllSectionsAsJSON(r,g,k,W,i)}catch(t){throw console.error("Export as JSON failed:",t),t}},exportCurrentSectionAsJSON:async(i="png")=>{try{const t=bt();return await Rt.current.exportCurrentSectionAsJSON(t,i)}catch(t){throw console.error("Export current section as JSON failed:",t),t}}})),y.useEffect(()=>{ft.current=null,gt.current=null;const i=K.current;if(i&&i.getContext("2d").clearRect(0,0,k,W),w!=null&&w.sectionImage){const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{t.src===w.sectionImage&&(ft.current=t,jt(t,$))},t.onerror=()=>{console.error("Failed to load background image:",w.sectionImage),_()},t.src=w.sectionImage}else _()},[w==null?void 0:w.sectionImage]);const xt=y.useRef(null),Bt=y.useRef(!1),_=y.useCallback(()=>{const i=K.current;if(!i||Bt.current)return;Bt.current=!0;const t=i.getContext("2d");t.clearRect(0,0,k,W),gt.current&&t.drawImage(gt.current,0,0,k,W),M&&ce(t),x.forEach(r=>{t.save(),t.globalAlpha=r.opacity||1,de(t,r),t.restore()}),d&&se(t,d),Bt.current=!1},[x,d,k,W,M]),pt=y.useCallback(()=>{xt.current&&cancelAnimationFrame(xt.current),xt.current=requestAnimationFrame(()=>{_(),xt.current=null})},[_]);y.useEffect(()=>{pt()},[x,d,k,W,M,pt]),y.useEffect(()=>{gt.current&&pt()},[gt.current,pt]),y.useEffect(()=>()=>{xt.current&&cancelAnimationFrame(xt.current)},[]);const Wt=y.useCallback(()=>{_(),(C||u||B)&&(xt.current=requestAnimationFrame(Wt))},[_,C,u,B]);y.useEffect(()=>{C||u||B?Wt():(xt.current&&(cancelAnimationFrame(xt.current),xt.current=null),pt())},[C,u,B,Wt,pt]);const De=y.useCallback(i=>{if(l)return;const r=K.current.getBoundingClientRect(),c=(i.clientX-r.left)/Q,g=(i.clientY-r.top)/Q;if(J({x:c,y:g}),d){const b=Ut(c,g,d);if(b){if(b==="rotate"){S(!0);const F=d.x+d.width/2,v=d.y+d.height/2,A=Math.atan2(g-v,c-F)*180/Math.PI;J({x:c,y:g,initialAngle:A,initialRotation:d.rotation||0})}else z(!0),O(b),J({x:c,y:g,initialWidth:d.width,initialHeight:d.height,initialX:d.x,initialY:d.y});return}}let p=null;for(let b=x.length-1;b>=0;b--)if(Ot(c,g,x[b])){p=x[b];break}p?(N(p),R(!0),J({x:c,y:g,offsetX:c-p.x,offsetY:g-p.y})):N(null),_()},[l,Q,d,x,_]),Ee=y.useCallback(i=>{if(l)return;const t=K.current,r=t.getBoundingClientRect(),c=(i.clientX-r.left)/Q,g=(i.clientY-r.top)/Q;if(d&&!C&&!u&&!B){const p=Ut(c,g,d);p?p==="rotate"?t.style.cursor="grab":t.style.cursor=p:Ot(c,g,d)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=C?"grabbing":"default";if(B&&d){const p=d.x+d.width/2,b=d.y+d.height/2,v=Math.atan2(g-b,c-p)*180/Math.PI-T.initialAngle;let A=T.initialRotation+v;i.shiftKey&&(A=Math.round(A/15)*15),A=(A%360+360)%360,n(I=>I.map(E=>E.id===d.id?{...E,rotation:A}:E)),N(I=>({...I,rotation:A})),_();return}if(u&&d&&j){const p=c-T.x,b=g-T.y;let F=T.initialWidth,v=T.initialHeight,A=T.initialX,I=T.initialY;switch(j){case"se-resize":F=Math.max(20,T.initialWidth+p),v=Math.max(20,T.initialHeight+b);break;case"sw-resize":F=Math.max(20,T.initialWidth-p),v=Math.max(20,T.initialHeight+b),A=T.initialX+(T.initialWidth-F);break;case"ne-resize":F=Math.max(20,T.initialWidth+p),v=Math.max(20,T.initialHeight-b),I=T.initialY+(T.initialHeight-v);break;case"nw-resize":F=Math.max(20,T.initialWidth-p),v=Math.max(20,T.initialHeight-b),A=T.initialX+(T.initialWidth-F),I=T.initialY+(T.initialHeight-v);break}if(i.shiftKey&&d.type!=="text"){const Y=T.initialWidth/T.initialHeight;j.includes("e"),v=F/Y,j.includes("n")&&(I=T.initialY+(T.initialHeight-v))}q&&(A=yt(A),I=yt(I),F=yt(F),v=yt(v));const E={...d,x:A,y:I,width:F,height:v};n(Y=>Y.map(ct=>ct.id===d.id?E:ct)),N(E),_();return}if(C&&d){let p=c-T.offsetX,b=g-T.offsetY;q&&(p=yt(p),b=yt(b)),p=Math.max(0,Math.min(k-d.width,p)),b=Math.max(0,Math.min(W-d.height,b));const F={...d,x:p,y:b};n(v=>v.map(A=>A.id===d.id?F:A)),N(F),_()}},[l,Q,d,C,u,B,j,T,q,k,W,x,_]),Gt=y.useCallback(i=>{w&&H(r=>({...r,[w.sectionName]:{elements:x.map(c=>c.type==="image"?{...c,imageData:c.imageData,src:c.src}:c),selectedColor:$}}));const t=L[i.sectionName];if(t){const r=t.elements.map(c=>{if(c.type==="image"&&c.src&&!c.imageData){const g=new Image;return g.onload=()=>{n(p=>p.map(b=>b.id===c.id?{...b,imageData:g}:b)),_()},g.src=c.src,{...c,imageData:g}}return c});n(r),ot(t.selectedColor||$)}else n([]);tt(i),N(null)},[w,x,$,L,_]),ze=y.useCallback(i=>{if(i&&i.type.startsWith("image/")){const t=new FileReader;t.onload=r=>{const c=new Image;c.onload=()=>{const g={id:nt(),type:"image",x:yt(k/2-100),y:yt(W/2-100),width:Math.min(c.width,200),height:Math.min(c.height,200),rotation:0,imageData:c,src:r.target.result,originalWidth:c.width,originalHeight:c.height},p=c.width/c.height;g.width/g.height!==p&&(g.width/p<=200?g.height=g.width/p:g.width=g.height*p),n(b=>[...b,g]),N(g),rt()},c.onerror=()=>{console.error("Failed to load uploaded image"),alert("Failed to load the uploaded image. Please try again.")},c.src=r.target.result},t.onerror=()=>{console.error("Failed to read file"),alert("Failed to read the file. Please try again.")},t.readAsDataURL(i)}else alert("Please select a valid image file.")},[k,W,yt,nt,rt]);y.useEffect(()=>{if(w!=null&&w.sectionImage){ut.current=!0,ft.current=null,gt.current=null;const i=new Image;i.crossOrigin="anonymous",i.onload=()=>{ft.current=i,jt(i,$)},i.onerror=()=>{console.error("Failed to load background image:",w.sectionImage),ut.current=!1,_()},i.src=w.sectionImage}else ft.current=null,gt.current=null,ut.current=!1,_()},[w==null?void 0:w.sectionImage,$]);const _t=y.useCallback(Be(()=>{_()},16),[_]);y.useEffect(()=>{ut.current||_t()},[x,d,M,_t]);function Be(i,t){let r;return function(...g){const p=()=>{clearTimeout(r),i(...g)};clearTimeout(r),r=setTimeout(p,t)}}y.useEffect(()=>{ft.current&&jt(ft.current,$)},[$]),y.useEffect(()=>{_()},[_]);const We=(i,t,r)=>(.2126*i+.7152*t+.0722*r)/255,jt=y.useCallback((i,t)=>{const r=Lt.current,c=r.getContext("2d");r.width=k,r.height=W,c.clearRect(0,0,k,W),c.drawImage(i,0,0,k,W);const g=c.getImageData(0,0,k,W),p=g.data,b=ne(t);if(!b){ut.current=!1;return}const{r:F,g:v,b:A}=b;for(let E=0;E<p.length;E+=4){if(p[E+3]===0)continue;const ct=We(p[E],p[E+1],p[E+2]);p[E]=Math.round(F*ct),p[E+1]=Math.round(v*ct),p[E+2]=Math.round(A*ct)}c.putImageData(g,0,0);const I=new Image;I.onload=()=>{console.log("plain color: ",s.plainColor),gt.current=s.plainColor==="Y"?I:i,ut.current=!1,_()},I.src=r.toDataURL("image/png")},[k,W,_]),Yt=i=>{if(!Z)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),r=document.querySelector(".ruler-vertical");if(!t||!r)return{horizontal:[],vertical:[]};const c=t.getBoundingClientRect(),g=r.getBoundingClientRect(),p=c.width,b=g.height,F=50,v=[],A=[];for(let I=F;I<=p;I+=F)I<=p-20&&v.push({position:I,value:Math.round(I/i)});for(let I=F;I<=b;I+=F)I<=b-15&&A.push({position:I,value:Math.round(I/i)});return{horizontal:v,vertical:A}},[qt,Vt]=y.useState({horizontal:[],vertical:[]});return y.useEffect(()=>{const i=()=>{setTimeout(()=>{const c=Yt(Q);Vt(c)},50)};i();let t;const r=()=>{clearTimeout(t),t=setTimeout(i,150)};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),clearTimeout(t)}},[Q,Z]),y.useEffect(()=>{if(Z&&!m){const i=setTimeout(()=>{const t=Yt(Q);Vt(t)},100);return()=>clearTimeout(i)}},[Z,m,Q]),e.jsxs("div",{className:"pure-canvas-designer",children:[e.jsx("div",{className:"designer-header",children:e.jsx(Je,{onAddElement:Ae,onDeleteElement:()=>d&&zt(d.id),onDuplicateElement:()=>d&&$t(d.id),onUndo:vt,onRedo:mt,onToggleGrid:()=>st(!M),onToggleRulers:()=>lt(!Z),onToggleSnap:()=>P(!q),onImageUpload:ze,canUndo:X>0,canRedo:X<G.length-1,showGrid:M,showRulers:Z,snapToGrid:q,selectedElement:d,theme:a,readOnly:l,apiKey:f.apiKey,apiEndpoint:f.apiEndpoint})}),e.jsxs("div",{className:"designer-content",children:[Z&&!m&&e.jsxs("div",{className:"rulers",children:[e.jsx("div",{className:"ruler-horizontal",children:e.jsx("div",{className:"ruler-horizontal-numbers",children:qt.horizontal.map((i,t)=>e.jsx("span",{className:"ruler-number horizontal",style:{left:`${i.position}px`},children:i.value},t))})}),e.jsx("div",{className:"ruler-vertical",children:e.jsx("div",{className:"ruler-vertical-numbers",children:qt.vertical.map((i,t)=>e.jsx("span",{className:"ruler-number vertical",style:{top:`${i.position}px`},children:i.value},t))})})]}),e.jsx("div",{className:"canvas-container",ref:wt,children:e.jsx("canvas",{ref:K,width:k,height:W,onMouseDown:De,onMouseMove:Ee,onMouseUp:Ie,style:{border:"1px solid #e2e8f0",cursor:C?"grabbing":"default",transform:`scale(${Q})`,transformOrigin:"top left"}})}),e.jsxs("div",{className:"side-panels",children:[e.jsx(Ke,{selectedElement:d,onUpdate:Qt,onMoveLayer:Ht,availableFonts:ae,theme:a}),e.jsx(Ze,{elements:x,selectedElement:d,onSelectElement:N,onMoveLayer:Ht,onDeleteElement:zt,theme:a})]})]}),e.jsxs("div",{className:"designer-footer",children:[e.jsxs("div",{className:"section-thumbnails",children:[e.jsxs("label",{className:"section-thumbnails-label",children:["Available sections for : ",e.jsx("u",{children:s.name})]}),e.jsx("div",{className:"thumbnails-container",children:s.sections.map(i=>{const t=L[i.sectionName]&&L[i.sectionName].elements&&L[i.sectionName].elements.length>0;return e.jsxs("div",{className:`section-thumbnail compact ${w.sectionName===i.sectionName?"active":""}`,onClick:r=>{r.stopPropagation();const c=s.sections.find(g=>g.sectionName===i.sectionName);Gt(c)},title:i.sectionName,children:[e.jsxs("div",{className:"thumbnail-image-container compact",children:[e.jsx("img",{src:i.sectionImage,alt:i.sectionName,className:"thumbnail-image compact",onError:r=>{r.target.style.display="none",r.target.nextSibling.style.display="flex"}}),e.jsx("div",{className:"thumbnail-placeholder compact",style:{display:"none"},children:e.jsx("span",{className:"placeholder-icon",children:"๐"})}),t&&e.jsx("div",{className:"content-indicator compact",children:e.jsx("svg",{className:"checkmark compact",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:e.jsx("path",{d:"M20 6L9 17l-5-5"})})})]}),e.jsx("span",{className:"thumbnail-label compact",children:i.sectionName})]},i.sectionName)})})]}),e.jsxs("div",{className:"color-palette-enhanced compact",children:[e.jsx("label",{className:"color-palette-label",children:"Supported colors:"}),e.jsxs("div",{className:"color-swatches-container",children:[s.colorSettings.slice(0,3).map((i,t)=>e.jsxs("div",{className:`color-swatch-enhanced compact ${$===i?"active":""}`,onClick:r=>{r.stopPropagation(),ot(i)},title:`Change product to ${i}`,children:[e.jsx("div",{className:"color-swatch-inner compact",style:{backgroundColor:i}}),$===i&&e.jsx("div",{className:"color-selection-ring compact"})]},i)),s.colorSettings.length>3&&e.jsxs("div",{className:"color-dropdown-container",children:[e.jsx("button",{className:"color-more-button",onClick:i=>{i.stopPropagation();const t=i.currentTarget.nextElementSibling;t.style.display=t.style.display==="block"?"none":"block"},title:"More colors",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"12",cy:"12",r:"3"}),e.jsx("circle",{cx:"12",cy:"5",r:"3"}),e.jsx("circle",{cx:"12",cy:"19",r:"3"})]})}),e.jsx("div",{className:"color-dropdown-menu",style:{display:"none"},children:s.colorSettings.slice(3).map((i,t)=>e.jsxs("div",{className:`color-swatch-dropdown ${$===i?"active":""}`,onClick:r=>{r.stopPropagation(),ot(i),r.currentTarget.parentElement.style.display="none"},title:`Change product to ${i}`,children:[e.jsx("div",{className:"color-swatch-inner-dropdown",style:{backgroundColor:i}}),e.jsx("span",{className:"color-hex",children:i.toUpperCase()})]},i))})]})]})]}),e.jsxs("div",{className:"zoom-controls-enhanced compact",children:[e.jsx("label",{className:"zoom-label",children:"Zoom:"}),e.jsxs("div",{className:"zoom-buttons-container compact",children:[e.jsx("button",{className:"zoom-button compact zoom-out",onClick:()=>dt(Math.max(.25,Q-.25)),disabled:Q<=.25,title:"Zoom Out",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"M21 21l-4.35-4.35"}),e.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),e.jsxs("div",{className:"zoom-display compact",children:[e.jsxs("span",{className:"zoom-percentage compact",children:[Math.round(Q*100),"%"]}),e.jsx("div",{className:"zoom-slider-container compact",children:e.jsx("input",{type:"range",min:"0.25",max:"4",step:"0.25",value:Q,onChange:i=>dt(parseFloat(i.target.value)),className:"zoom-slider compact"})})]}),e.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>dt(Math.min(4,Q+.25)),disabled:Q>=4,title:"Zoom In",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"M21 21l-4.35-4.35"}),e.jsx("line",{x1:"11",y1:"8",x2:"11",y2:"14"}),e.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),e.jsx("button",{className:"zoom-reset compact",onClick:()=>dt(1),title:"Reset Zoom (100%)",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("path",{d:"M3 3l18 18"}),e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"M21 21l-4.35-4.35"})]})})]})]})]})]})});re.displayName="Mypixia";module.exports=re;
|
|
989
|
+
`)}`,category:"Geometric",description:"Complex mandala flower pattern"}],Xe=({isOpen:f,onClose:o,onAddEmbroidery:a,theme:l,apiKey:s,apiEndpoint:h})=>{const[x,n]=y.useState([]),[c,N]=y.useState(!1),[C,A]=y.useState(null),[u,E]=y.useState(""),[B,S]=y.useState("All"),j=y.useRef(null),J=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{f&&n(Ve)},[f]);const T=v=>{a({type:"embroidery",src:v.url,name:v.name,description:v.description,category:v.category,width:120,height:120,x:100,y:100}),o()},O=x.filter(v=>{const rt=!u||v.name.toLowerCase().includes(u.toLowerCase())||v.description.toLowerCase().includes(u.toLowerCase()),W=B==="All"||v.category===B;return rt&&W});return f?e.jsx("div",{className:"embroidery-modal-overlay",onClick:o,children:e.jsxs("div",{className:"embroidery-modal-content",onClick:v=>v.stopPropagation(),ref:j,children:[e.jsxs("div",{className:"embroidery-modal-header",children:[e.jsx("h3",{children:"Choose an Embroidery Design"}),e.jsx("button",{className:"embroidery-modal-close",onClick:o,"aria-label":"Close",children:"ร"})]}),e.jsxs("div",{className:"embroidery-modal-controls",children:[e.jsx("div",{className:"search-container",children:e.jsx("input",{type:"text",placeholder:"Search embroidery designs...",value:u,onChange:v=>E(v.target.value),className:"embroidery-search"})}),e.jsxs("div",{className:"category-filter",children:[e.jsx("label",{children:"Category:"}),e.jsx("select",{value:B,onChange:v=>S(v.target.value),className:"category-select",children:J.map(v=>e.jsx("option",{value:v,children:v},v))})]})]}),e.jsxs("div",{className:"embroidery-modal-body",children:[c&&e.jsxs("div",{className:"embroidery-loading",children:[e.jsx("div",{className:"loading-spinner"}),e.jsx("p",{children:"Loading embroidery designs..."})]}),C&&e.jsx("div",{className:"embroidery-error",children:e.jsx("p",{children:C})}),!c&&!C&&e.jsx("div",{className:"embroidery-grid",children:O.map(v=>e.jsxs("div",{className:"embroidery-item",onClick:()=>T(v),title:v.description,children:[e.jsx("div",{className:"embroidery-preview",children:e.jsx("img",{src:v.url,alt:v.name,loading:"lazy",onError:rt=>{console.error("Failed to load embroidery image:",v.url),rt.target.style.display="none"}})}),e.jsxs("div",{className:"embroidery-info",children:[e.jsx("div",{className:"embroidery-name",children:v.name}),e.jsx("div",{className:"embroidery-category",children:v.category})]})]},v.id))}),!c&&!C&&O.length===0&&e.jsx("div",{className:"no-embroideries",children:e.jsx("p",{children:"No embroidery designs found matching your search."})})]}),e.jsx("div",{className:"embroidery-modal-footer",children:e.jsxs("div",{className:"embroidery-disclaimer",children:[e.jsx("span",{className:"disclaimer-icon",children:"โน๏ธ"}),e.jsx("span",{children:"Sample embroidery designs for preview. Actual embroidered results may vary based on fabric and thread."})]})})]})}):null},Ft=[{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"}],Je=({isOpen:f,onClose:o,onAddText:a,theme:l})=>{const[s,h]=y.useState(""),[x,n]=y.useState("All"),c=y.useMemo(()=>{const u=Ft.reduce((E,B)=>(E[B.category]=(E[B.category]||0)+1,E),{});return[{name:"All",count:Ft.length},...Object.entries(u).map(([E,B])=>({name:E,count:B}))]},[Ft]),N=y.useMemo(()=>Ft.filter(u=>{const E=!s||u.text.toLowerCase().includes(s.toLowerCase())||u.category.toLowerCase().includes(s.toLowerCase()),B=x==="All"||u.category===x;return E&&B}),[Ft,s,x]),C=u=>{const E={...u,x:100,y:100};a("text",E),o()},A=()=>{a("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),o()};return f?e.jsx("div",{className:"text-templates-modal-overlay",onClick:o,children:e.jsxs("div",{className:"text-templates-modal",onClick:u=>u.stopPropagation(),children:[e.jsxs("div",{className:"modal-header",children:[e.jsx("h2",{children:"Text Templates"}),e.jsx("button",{className:"close-btn",onClick:o,"aria-label":"Close",children:"ร"})]}),e.jsxs("div",{className:"modal-controls",children:[e.jsx("div",{className:"search-section",children:e.jsx("input",{type:"text",placeholder:"Search templates...",value:s,onChange:u=>h(u.target.value),className:"search-input"})}),e.jsx("div",{className:"category-tabs",children:c.map(u=>e.jsxs("button",{className:`category-tab ${x===u.name?"active":""}`,onClick:()=>n(u.name),children:[u.name,e.jsxs("span",{className:"count",children:["(",u.count,")"]})]},u.name))})]}),e.jsxs("div",{className:"templates-grid",children:[e.jsx("div",{className:"custom-text-option",onClick:A,children:e.jsxs("div",{className:"custom-text-preview",children:[e.jsx("div",{className:"custom-icon",children:"โ๏ธ"}),e.jsx("div",{className:"custom-label",children:"Create Custom Text"})]})}),N.map(u=>e.jsxs("div",{className:"template-item",onClick:()=>C(u),children:[e.jsx("div",{className:"template-preview",style:{fontFamily:u.fontFamily,fontSize:`${Math.min(u.fontSize*.6,18)}px`,fontWeight:u.fontWeight,fontStyle:u.fontStyle,color:u.fill,backgroundColor:u.hasBackground?u.backgroundColor:"transparent",textAlign:u.textAlign||"left",textTransform:u.textTransform||"none",letterSpacing:u.letterSpacing?`${u.letterSpacing}px`:"normal",textShadow:u.hasTextShadow?`${u.textShadowX}px ${u.textShadowY}px ${u.textShadowBlur}px ${u.textShadowColor}`:"none"},children:u.text}),e.jsxs("div",{className:"template-info",children:[e.jsx("span",{className:"template-category",children:u.category}),e.jsx("span",{className:"template-font",children:u.fontFamily})]})]},u.id))]}),e.jsx("div",{className:"modal-footer",children:e.jsxs("div",{className:"results-count",children:[N.length," template",N.length!==1?"s":""," found"]})})]})}):null},Ke=({onAddElement:f,onDeleteElement:o,onDuplicateElement:a,onUndo:l,onRedo:s,onToggleGrid:h,onToggleRulers:x,onToggleSnap:n,onImageUpload:c,canUndo:N,canRedo:C,showGrid:A,showRulers:u,snapToGrid:E,selectedElement:B,theme:S,readOnly:j,apiKey:J,apiEndpoint:T})=>{const[O,v]=y.useState(!1),[rt,W]=y.useState(!1),[ht,Q]=y.useState(!1),[ct,H]=y.useState(!1),[ot,M]=y.useState(!1),[st,Z]=y.useState(!1),[lt,q]=y.useState(!1),P=U=>{const K=U.target.files[0];K&&K.type.startsWith("image/")&&c(K),U.target.value=""},w=U=>{f("icon",{iconData:U,text:U.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},tt=U=>{f("qrcode",U)},m=U=>{f("barcode",U)},D=U=>{f("sticker",U)},L=U=>{f("embroidery",U)},G=(U,K)=>{f(U,K)},_=()=>{Z(!st),q(!1)},et=()=>{q(!lt),Z(!1)},X=U=>{U==="custom"?f("text"):U==="templates"&&M(!0),Z(!1)},V=U=>{f(U),q(!1)};return e.jsxs("div",{className:"toolbar",children:[e.jsxs("div",{className:"toolbar-section",children:[e.jsxs("div",{className:"toolbar-group",children:[e.jsxs("button",{className:"toolbar-btn compact",onClick:l,disabled:!N||j,title:"Undo (Ctrl+Z)",children:[e.jsx("span",{className:"icon",children:"โถ"}),e.jsx("span",{className:"label",children:"Undo"})]}),e.jsxs("button",{className:"toolbar-btn compact",onClick:s,disabled:!C||j,title:"Redo (Ctrl+Y)",children:[e.jsx("span",{className:"icon",children:"โท"}),e.jsx("span",{className:"label",children:"Redo"})]})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsxs("div",{className:"toolbar-group",children:[e.jsxs("div",{className:"toolbar-dropdown",children:[e.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:j,title:"Add Text",onClick:_,children:[e.jsx("span",{className:"icon",children:"๐"}),e.jsx("span",{className:"label",children:"Text"}),e.jsx("span",{className:`dropdown-arrow ${st?"open":""}`,children:"โผ"})]}),e.jsxs("div",{className:`dropdown-menu ${st?"show":""}`,children:[e.jsxs("button",{onClick:()=>X("custom"),children:[e.jsx("span",{className:"icon",children:"๐"})," Custom Text"]}),e.jsxs("button",{onClick:()=>X("templates"),children:[e.jsx("span",{className:"icon",children:"๐"})," Text Templates"]})]})]}),e.jsxs("div",{className:"toolbar-dropdown",children:[e.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:j,onClick:et,children:[e.jsx("span",{className:"icon",children:"โฉ"}),e.jsx("span",{className:"label",children:"Shapes"}),e.jsx("span",{className:`dropdown-arrow ${lt?"open":""}`,children:"โผ"})]}),e.jsxs("div",{className:`dropdown-menu ${lt?"show":""}`,children:[e.jsxs("button",{onClick:()=>V("rectangle"),children:[e.jsx("span",{className:"icon",children:"โญ"})," Rectangle"]}),e.jsxs("button",{onClick:()=>V("circle"),children:[e.jsx("span",{className:"icon",children:"โ"})," Circle"]}),e.jsxs("button",{onClick:()=>V("triangle"),children:[e.jsx("span",{className:"icon",children:"โฒ"})," Triangle"]}),e.jsxs("button",{onClick:()=>V("star"),children:[e.jsx("span",{className:"icon",children:"โ
"})," Star"]}),e.jsxs("button",{onClick:()=>V("heart"),children:[e.jsx("span",{className:"icon",children:"โฅ"})," Heart"]}),e.jsxs("button",{onClick:()=>V("arrow"),children:[e.jsx("span",{className:"icon",children:"โค"})," Arrow"]}),e.jsxs("button",{onClick:()=>V("diamond"),children:[e.jsx("span",{className:"icon",children:"โ"})," Diamond"]}),e.jsxs("button",{onClick:()=>V("hexagon"),children:[e.jsx("span",{className:"icon",children:"โฌก"})," Hexagon"]}),e.jsxs("button",{onClick:()=>V("pentagon"),children:[e.jsx("span",{className:"icon",children:"โฌ"})," Pentagon"]}),e.jsxs("button",{onClick:()=>V("oval"),children:[e.jsx("span",{className:"icon",children:"โฌฏ"})," Oval"]}),e.jsxs("button",{onClick:()=>V("roundedRectangle"),children:[e.jsx("span",{className:"icon",children:"โข"})," Rounded Rectangle"]}),e.jsxs("button",{onClick:()=>V("horizontalLine"),children:[e.jsx("span",{className:"icon",children:"โ"})," Horizontal Line"]})]})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsxs("label",{className:"toolbar-btn compact file-upload",style:{cursor:j?"not-allowed":"pointer"},children:[e.jsx("span",{className:"icon",children:"โ๏ธ"}),e.jsx("span",{className:"label",children:"Upload"}),e.jsx("input",{type:"file",accept:"image/*",onChange:P,disabled:j})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsx(He,{onSelectIcon:w,theme:S,disabled:j}),e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>Q(!0),disabled:j,title:"Add Sticker",children:[e.jsx("span",{className:"icon",children:"๐จ"}),e.jsx("span",{className:"label",children:"Stickers"})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>v(!0),disabled:j,title:"Add QR Code",children:[e.jsx("span",{className:"icon",children:"โฆ"}),e.jsx("span",{className:"label",children:"QR Code"})]}),e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>W(!0),disabled:j,title:"Add Barcode",children:[e.jsx("span",{className:"icon",children:"โค"}),e.jsx("span",{className:"label",children:"Barcode"})]})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsx("div",{className:"toolbar-group embroidery-group",children:e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>H(!0),disabled:j,title:"Add Embroidery Design",children:[e.jsx("span",{className:"icon",children:"๐งต"}),e.jsx("span",{className:"label",children:"Embroidery"})]})}),B&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"toolbar-separator"}),e.jsxs("div",{className:"toolbar-group",children:[e.jsxs("button",{className:"toolbar-btn compact success",onClick:a,disabled:j,title:"Duplicate Element (Ctrl+D)",children:[e.jsx("span",{className:"icon",children:"โง"}),e.jsx("span",{className:"label",children:"Copy"})]}),e.jsxs("button",{className:"toolbar-btn compact danger",onClick:o,disabled:j,title:"Delete Element (Delete)",children:[e.jsx("span",{className:"icon",children:"๐๏ธ"}),e.jsx("span",{className:"label",children:"Delete"})]})]})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsxs("div",{className:"toolbar-group",children:[e.jsxs("button",{className:`toolbar-btn compact ${A?"active":""}`,onClick:h,title:"Toggle Grid",children:[e.jsx("span",{className:"icon",children:"โ"}),e.jsx("span",{className:"label",children:"Grid"})]}),e.jsxs("button",{className:`toolbar-btn compact ${u?"active":""}`,onClick:x,title:"Toggle Rulers",children:[e.jsx("span",{className:"icon",children:"๐"}),e.jsx("span",{className:"label",children:"Rulers"})]}),e.jsxs("button",{className:`toolbar-btn compact ${E?"active":""}`,onClick:n,title:"Snap to Grid",children:[e.jsx("span",{className:"icon",children:"๐งฒ"}),e.jsx("span",{className:"label",children:"Snap"})]})]})]}),e.jsx(Ge,{isOpen:O,onClose:()=>v(!1),onAddQRCode:tt,theme:S}),e.jsx(_e,{isOpen:rt,onClose:()=>W(!1),onAddBarcode:m,theme:S}),e.jsx(qe,{isOpen:ht,onClose:()=>Q(!1),onAddSticker:D,theme:S,apiKey:J,apiEndpoint:T}),e.jsx(Xe,{isOpen:ct,onClose:()=>H(!1),onAddEmbroidery:L,theme:S,apiKey:J,apiEndpoint:T}),e.jsx(Je,{isOpen:ot,onClose:()=>M(!1),onAddText:G,theme:S})]})},Ze=({selectedElement:f,onUpdate:o,onMoveLayer:a,availableFonts:l,theme:s})=>{const[h,x]=y.useState(!1);if(!f)return e.jsxs("div",{className:"properties-panel",children:[e.jsx("h3",{children:"Properties"}),e.jsx("p",{className:"no-selection",children:"Select an element to edit its properties"})]});const n=(S,j)=>{o(f.id,{[S]:j})},c=()=>{var S,j,J;return e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Text Content"}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Content"}),e.jsx("textarea",{value:f.text||"",onChange:T=>n("text",T.target.value),rows:3,placeholder:"Enter your text here..."})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Font Family"}),e.jsx("select",{value:f.fontFamily||"Arial",onChange:T=>n("fontFamily",T.target.value),children:l.map(T=>e.jsx("option",{value:T,children:T},T))})]}),e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Font Size"}),e.jsx("input",{type:"number",value:f.fontSize||20,onChange:T=>n("fontSize",parseInt(T.target.value)),min:"8",max:"200"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Line Height"}),e.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"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Font Weight"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:f.fontWeight==="lighter"||f.fontWeight==="300"?"active":"",onClick:()=>n("fontWeight","300"),title:"Light",children:"Light"}),e.jsx("button",{className:!f.fontWeight||f.fontWeight==="normal"||f.fontWeight==="400"?"active":"",onClick:()=>n("fontWeight","normal"),title:"Normal",children:"Normal"}),e.jsx("button",{className:f.fontWeight==="bold"||f.fontWeight==="700"?"active":"",onClick:()=>n("fontWeight","bold"),title:"Bold",children:e.jsx("strong",{children:"Bold"})})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Style"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:f.fontStyle==="italic"?"active":"",onClick:()=>n("fontStyle",f.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:e.jsx("em",{children:"I"})}),e.jsx("button",{className:(S=f.textDecoration)!=null&&S.includes("underline")?"active":"",onClick:()=>{const T=f.textDecoration||"",O=T.split(" ").filter(v=>v&&v!=="underline");T.includes("underline")||O.push("underline"),n("textDecoration",O.join(" ").trim())},title:"Underline",children:e.jsx("u",{children:"U"})}),e.jsx("button",{className:(j=f.textDecoration)!=null&&j.includes("overline")?"active":"",onClick:()=>{const T=f.textDecoration||"",O=T.split(" ").filter(v=>v&&v!=="overline");T.includes("overline")||O.push("overline"),n("textDecoration",O.join(" ").trim())},title:"Overline",children:e.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),e.jsx("button",{className:(J=f.textDecoration)!=null&&J.includes("line-through")?"active":"",onClick:()=>{const T=f.textDecoration||"",O=T.split(" ").filter(v=>v&&v!=="line-through");T.includes("line-through")||O.push("line-through"),n("textDecoration",O.join(" ").trim())},title:"Strikethrough",children:e.jsx("s",{children:"S"})})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Transform"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:!f.textTransform||f.textTransform==="none"?"active":"",onClick:()=>n("textTransform","none"),title:"Normal",children:"Aa"}),e.jsx("button",{className:f.textTransform==="uppercase"?"active":"",onClick:()=>n("textTransform","uppercase"),title:"Uppercase",children:"AA"}),e.jsx("button",{className:f.textTransform==="lowercase"?"active":"",onClick:()=>n("textTransform","lowercase"),title:"Lowercase",children:"aa"}),e.jsx("button",{className:f.textTransform==="capitalize"?"active":"",onClick:()=>n("textTransform","capitalize"),title:"Capitalize",children:"Aa"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Alignment"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:!f.textAlign||f.textAlign==="left"?"active":"",onClick:()=>n("textAlign","left"),title:"Left Align",children:"โฌ
"}),e.jsx("button",{className:f.textAlign==="center"?"active":"",onClick:()=>n("textAlign","center"),title:"Center Align",children:"โ"}),e.jsx("button",{className:f.textAlign==="right"?"active":"",onClick:()=>n("textAlign","right"),title:"Right Align",children:"โก"}),e.jsx("button",{className:f.textAlign==="justify"?"active":"",onClick:()=>n("textAlign","justify"),title:"Justify",children:"โก"})]})]}),e.jsx("div",{className:"property-row",children:e.jsxs("div",{className:"color-input-group",children:[e.jsxs("div",{className:"color-input-item",children:[e.jsx("label",{children:"Text Color"}),e.jsx("input",{type:"color",value:f.fill||"#000000",onChange:T=>n("fill",T.target.value)})]}),e.jsxs("div",{className:"color-input-item",children:[e.jsx("label",{children:"Background Color"}),e.jsxs("div",{className:"color-with-toggle",children:[e.jsx("input",{type:"color",value:f.backgroundColor||"#ffffff",onChange:T=>n("backgroundColor",T.target.value),disabled:!f.hasBackground}),e.jsx("button",{className:`toggle-btn ${f.hasBackground?"active":""}`,onClick:()=>n("hasBackground",!f.hasBackground),title:f.hasBackground?"Remove background":"Add background",children:f.hasBackground?"๐":"๐โ๐จ"})]})]})]})}),h&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Letter Spacing"}),e.jsx("input",{type:"number",step:"0.1",value:f.letterSpacing||0,onChange:T=>n("letterSpacing",parseFloat(T.target.value)),min:"-5",max:"10"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Word Spacing"}),e.jsx("input",{type:"number",step:"0.1",value:f.wordSpacing||0,onChange:T=>n("wordSpacing",parseFloat(T.target.value)),min:"-10",max:"20"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Shadow"}),e.jsxs("div",{className:"text-shadow-controls",children:[e.jsx("div",{className:"shadow-toggle",children:e.jsx("button",{className:`toggle-btn ${f.hasTextShadow?"active":""}`,onClick:()=>n("hasTextShadow",!f.hasTextShadow),children:f.hasTextShadow?"Remove Shadow":"Add Shadow"})}),f.hasTextShadow&&e.jsxs("div",{className:"shadow-properties",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"H-Offset"}),e.jsx("input",{type:"number",value:f.textShadowX||2,onChange:T=>n("textShadowX",parseInt(T.target.value)),min:"-20",max:"20"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"V-Offset"}),e.jsx("input",{type:"number",value:f.textShadowY||2,onChange:T=>n("textShadowY",parseInt(T.target.value)),min:"-20",max:"20"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Blur"}),e.jsx("input",{type:"number",value:f.textShadowBlur||4,onChange:T=>n("textShadowBlur",parseInt(T.target.value)),min:"0",max:"20"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Shadow Color"}),e.jsx("input",{type:"color",value:f.textShadowColor||"#000000",onChange:T=>n("textShadowColor",T.target.value)})]})]})]})]}),e.jsx("div",{className:"property-row",children:e.jsxs("div",{className:"color-input-group",children:[e.jsxs("div",{className:"color-input-item",children:[e.jsx("label",{children:"Stroke Color"}),e.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:T=>n("stroke",T.target.value)})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Stroke Width"}),e.jsx("input",{type:"number",value:f.strokeWidth||0,onChange:T=>n("strokeWidth",parseInt(T.target.value)),min:"0",max:"20"})]})]})}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Opacity"}),e.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:f.opacity||1,onChange:T=>n("opacity",parseFloat(T.target.value))}),e.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Font Variant"}),e.jsxs("select",{value:f.fontVariant||"normal",onChange:T=>n("fontVariant",T.target.value),children:[e.jsx("option",{value:"normal",children:"Normal"}),e.jsx("option",{value:"small-caps",children:"Small Caps"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Writing Mode"}),e.jsxs("select",{value:f.writingMode||"horizontal-tb",onChange:T=>n("writingMode",T.target.value),children:[e.jsx("option",{value:"horizontal-tb",children:"Horizontal"}),e.jsx("option",{value:"vertical-rl",children:"Vertical Right-to-Left"}),e.jsx("option",{value:"vertical-lr",children:"Vertical Left-to-Right"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Text Direction"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:!f.direction||f.direction==="ltr"?"active":"",onClick:()=>n("direction","ltr"),title:"Left to Right",children:"LTR"}),e.jsx("button",{className:f.direction==="rtl"?"active":"",onClick:()=>n("direction","rtl"),title:"Right to Left",children:"RTL"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Background Padding"}),e.jsx("input",{type:"number",value:f.backgroundPadding||5,onChange:T=>n("backgroundPadding",parseInt(T.target.value)),min:"0",max:"50",disabled:!f.hasBackground})]})]})]})},N=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Shape Properties"}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Fill Color"}),e.jsx("input",{type:"color",value:f.fill||"#000000",onChange:S=>n("fill",S.target.value)})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Stroke Color"}),e.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:S=>n("stroke",S.target.value)})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Stroke Width"}),e.jsx("input",{type:"number",value:f.strokeWidth||2,onChange:S=>n("strokeWidth",parseInt(S.target.value)),min:"0",max:"20"})]}),f.type==="star"&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Star Points"}),e.jsx("input",{type:"number",value:f.numPoints||5,onChange:S=>n("numPoints",parseInt(S.target.value)),min:"3",max:"20"})]}),f.type==="roundedRectangle"&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Corner Radius"}),e.jsx("input",{type:"number",value:f.cornerRadius||10,onChange:S=>n("cornerRadius",parseInt(S.target.value)),min:"0",max:"50"})]})]}),C=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Image Properties"}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Opacity"}),e.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:f.opacity||1,onChange:S=>n("opacity",parseFloat(S.target.value))}),e.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),h&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Border Radius"}),e.jsx("input",{type:"number",value:f.borderRadius||0,onChange:S=>n("borderRadius",parseInt(S.target.value)),min:"0",max:"50"})]})]}),A=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Position & Size"}),e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"X"}),e.jsx("input",{type:"number",value:Math.round(f.x)||0,onChange:S=>n("x",parseInt(S.target.value))})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Y"}),e.jsx("input",{type:"number",value:Math.round(f.y)||0,onChange:S=>n("y",parseInt(S.target.value))})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Width"}),e.jsx("input",{type:"number",value:Math.round(f.width)||0,onChange:S=>n("width",parseInt(S.target.value)),min:"1"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Height"}),e.jsx("input",{type:"number",value:Math.round(f.height)||0,onChange:S=>n("height",parseInt(S.target.value)),min:"1"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Rotation"}),e.jsx("input",{type:"range",min:"-180",max:"180",value:f.rotation||0,onChange:S=>n("rotation",parseInt(S.target.value))}),e.jsxs("span",{children:[f.rotation||0,"ยฐ"]})]})]}),u=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Line Properties"}),e.jsxs("div",{className:"property-row",children:[e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Line Width"}),e.jsx("input",{type:"number",value:f.strokeWidth||f.height||2,onChange:S=>{const j=parseInt(S.target.value);n("strokeWidth",j),n("height",j)},min:"1",max:"50"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Length"}),e.jsx("input",{type:"number",value:f.width||200,onChange:S=>n("width",parseInt(S.target.value)),min:"10",max:"1000"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Line Color"}),e.jsxs("div",{className:"color-input-group",children:[e.jsx("input",{type:"color",value:f.stroke||f.fill||"#000000",onChange:S=>{n("stroke",S.target.value),n("fill",S.target.value)}}),e.jsx("input",{type:"text",value:f.stroke||f.fill||"#000000",onChange:S=>{n("stroke",S.target.value),n("fill",S.target.value)},placeholder:"#000000"})]})]})]}),E=()=>e.jsxs("div",{className:"property-group",children:[e.jsx("h4",{children:"Layer Controls"}),e.jsxs("div",{className:"button-group vertical",children:[e.jsx("button",{onClick:()=>a(f.id,"top"),children:"Bring to Front"}),e.jsx("button",{onClick:()=>a(f.id,"up"),children:"Bring Forward"}),e.jsx("button",{onClick:()=>a(f.id,"down"),children:"Send Backward"}),e.jsx("button",{onClick:()=>a(f.id,"bottom"),children:"Send to Back"})]})]}),B=["rectangle","circle","triangle","star","arrow","diamond","hexagon","pentagon","heart","oval","roundedRectangle"];return e.jsxs("div",{className:"properties-panel",children:[e.jsxs("div",{className:"panel-header",children:[e.jsx("h3",{children:"Properties"}),e.jsx("span",{className:"element-type",children:f.type})]}),e.jsxs("div",{className:"panel-content",children:[f.type==="text"&&c(),B.includes(f.type)&&N(),f.type==="image"&&C(),f.type==="horizontalLine"&&u(),A(),E(),e.jsx("div",{className:"property-group",children:e.jsxs("button",{className:"toggle-advanced",onClick:()=>x(!h),children:[h?"Hide":"Show"," Advanced Options"]})})]})]})},ti=({elements:f,selectedElement:o,onSelectElement:a,onMoveLayer:l,onDeleteElement:s,theme:h})=>{const x=(c,N)=>{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 N,C;if(c.type==="text")return c.isIcon&&c.iconData?`Icon: ${c.iconData.name}`:((N=c.text)==null?void 0:N.substring(0,20))+(((C=c.text)==null?void 0:C.length)>20?"...":"")||"Text";if(c.type==="qrcode")return`QR Code: ${(c.data||"").substring(0,15)+((c.data||"").length>15?"...":"")}`;if(c.type==="barcode"){const A=c.format||"CODE128",u=c.data||"";return`Barcode (${A}): ${u.substring(0,10)+(u.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 e.jsxs("div",{className:"layers-panel",children:[e.jsxs("div",{className:"panel-header",children:[e.jsx("h3",{children:"Layers"}),e.jsx("span",{className:"layer-count",children:f.length})]}),e.jsx("div",{className:"layers-list",children:f.length===0?e.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...f].reverse().map((c,N)=>e.jsxs("div",{className:`layer-item ${(o==null?void 0:o.id)===c.id?"selected":""}`,onClick:()=>a(c),children:[e.jsxs("div",{className:"layer-info",children:[e.jsx("span",{className:"layer-icon",children:x(c.type)}),e.jsx("span",{className:"layer-name",children:n(c)})]}),e.jsxs("div",{className:"layer-controls",children:[e.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(c.id,"up")},disabled:N===0,title:"Move Up",children:"โ"}),e.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(c.id,"down")},disabled:N===f.length-1,title:"Move Down",children:"โ"}),e.jsx("button",{className:"layer-btn delete",onClick:C=>{C.stopPropagation(),s(c.id)},title:"Delete",children:"ร"})]})]},c.id))})]})};class ei{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}async exportAllSections(o,a,l,s,h="png",x=!0){const n={};for(const c of a){const N=c.id||c.sectionName,C=o[N];if(!C||!C.elements||C.elements.length===0){console.log(`Skipping section ${N} - no elements`);continue}if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){const u=c.image||c.sectionImage;if(u)try{const E=await this.loadImage(u);await this.processImageColor(E,C.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(E){console.warn("Failed to load background image:",E)}}else this.ctx.clearRect(0,0,l,s);for(const u of C.elements)await this.drawElement(u);const A=this.canvas.toDataURL(`image/${h}`,h==="jpeg"?.9:void 0);n[N]={dataUrl:A,blob:await this.dataUrlToBlob(A)}}return n}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:h}=o[s],x=URL.createObjectURL(h),n=document.createElement("a");n.href=x,n.download=`${a}-${s}.png`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(x)}else for(const s of l){const{blob:h}=o[s],x=URL.createObjectURL(h),n=document.createElement("a");n.href=x,n.download=`${a}-${s}.png`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(x),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 h=s.getImageData(0,0,l.width,l.height),x=h.data,n=this.hexToRgb(a);if(!n){console.warn("Invalid target color:",a);return}const{r:c,g:N,b:C}=n;for(let A=0;A<x.length;A+=4){if(x[A+3]===0)continue;const E=this.getLuma(x[A],x[A+1],x[A+2]);x[A]=Math.round(c*E),x[A+1]=Math.round(N*E),x[A+2]=Math.round(C*E)}return s.putImageData(h,0,0),this.processedImage=new Image,new Promise(A=>{this.processedImage.onload=()=>{A()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),A()},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":o.imageData&&this.ctx.drawImage(o.imageData,0,0,o.width,o.height);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,h)=>{const x=h*l;o.stroke&&o.strokeWidth>0&&this.ctx.strokeText(s,0,x),this.ctx.fillText(s,0,x)})}drawRectangle(o){o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fillRect(0,0,o.width,o.height)),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.strokeRect(0,0,o.width,o.height))}drawCircle(o){const a=Math.min(o.width,o.height)/2,l=o.width/2,s=o.height/2;this.ctx.beginPath(),this.ctx.arc(l,s,a,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawTriangle(o){const a=o.width/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(0,o.height),this.ctx.lineTo(o.width,o.height),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawStar(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,h=s*.4,x=o.numPoints||5;this.ctx.beginPath();for(let n=0;n<x*2;n++){const c=n%2===0?s:h,N=n*Math.PI/x,C=a+Math.cos(N)*c,A=l+Math.sin(N)*c;n===0?this.ctx.moveTo(C,A):this.ctx.lineTo(C,A)}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"),h=new Image;h.onload=()=>{l.width=h.width,l.height=h.height,s.drawImage(h,0,0),l.toBlob(a)},h.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,h=6;this.ctx.beginPath();for(let x=0;x<h;x++){const n=x*2*Math.PI/h-Math.PI/2,c=a+s*Math.cos(n),N=l+s*Math.sin(n);x===0?this.ctx.moveTo(c,N):this.ctx.lineTo(c,N)}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,h=5;this.ctx.beginPath();for(let x=0;x<h;x++){const n=x*2*Math.PI/h-Math.PI/2,c=a+s*Math.cos(n),N=l+s*Math.sin(n);x===0?this.ctx.moveTo(c,N):this.ctx.lineTo(c,N)}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,h=0;this.ctx.beginPath();const x=l*.3;this.ctx.moveTo(s+a/2,h+x),this.ctx.bezierCurveTo(s+a/2,h,s,h,s,h+x),this.ctx.bezierCurveTo(s,h+(l+x)/2,s+a/2,h+(l+x)/2,s+a/2,h+l),this.ctx.bezierCurveTo(s+a/2,h+(l+x)/2,s+a,h+(l+x)/2,s+a,h+x),this.ctx.bezierCurveTo(s+a,h,s+a/2,h,s+a/2,h+x),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawOval(o){const a=o.width/2,l=o.height/2,s=o.width/2,h=o.height/2;this.ctx.beginPath(),this.ctx.ellipse(a,l,s,h,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,h){this.ctx.beginPath(),this.ctx.moveTo(o+h,a),this.ctx.lineTo(o+l-h,a),this.ctx.quadraticCurveTo(o+l,a,o+l,a+h),this.ctx.lineTo(o+l,a+s-h),this.ctx.quadraticCurveTo(o+l,a+s,o+l-h,a+s),this.ctx.lineTo(o+h,a+s),this.ctx.quadraticCurveTo(o,a+s,o,a+s-h),this.ctx.lineTo(o,a+h),this.ctx.quadraticCurveTo(o,a,o+h,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 blobToFile(o,a,l="image/png"){return new File([o],a,{type:l,lastModified:Date.now()})}async exportAllSectionsAsJSON(o,a,l,s,h="png"){const x=[],n=[],c={};for(const C of a){const A=C.id||C.sectionName,u=o[A];if(!u||!u.elements||u.elements.length===0){console.log(`Skipping section ${A} - no elements`);continue}const E={...u,backgroundImage:C.image||C.sectionImage,sectionImage:C.image||C.sectionImage,sectionName:A,selectedColor:u.selectedColor||"#FFFFFF",canvasWidth:l,canvasHeight:s};c[A]=E;const B=await this.exportSectionAsBlob(u,C,l,s,h,!0);if(B){const j=await this.blobToFile(B,`${A}-full.${h}`,`image/${h}`);x.push({sectionName:A,sectionImage:j})}const S=await this.exportSectionAsBlob(u,C,l,s,h,!1);if(S){const j=await this.blobToFile(S,`${A}-print.${h}`,`image/${h}`);n.push({sectionName:A,sectionImage:j})}}const N={sections:c,canvasWidth:l,canvasHeight:s,sectionImage:a[0].image||a[0].sectionImage,format:h,timestamp:new Date().toISOString(),version:"1.0",product:{sections:a.map(C=>({sectionName:C.sectionName||C.id,sectionImage:C.image||C.sectionImage,id:C.id||C.sectionName}))}};return{fullDesign:x,printReady:n,designFile:JSON.stringify(N)}}async exportSectionAsBlob(o,a,l,s,h="png",x=!0){try{if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){const n=a.image||a.sectionImage;if(n)try{const c=await this.loadImage(n);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 n of o.elements)await this.drawElement(n);return new Promise(n=>{this.canvas.toBlob(n,`image/${h}`,h==="jpeg"?.9:void 0)})}catch(n){return console.error("Error exporting section as blob:",n),null}}async exportCurrentSectionAsJSON(o,a="png"){var A,u,E,B,S,j,J,T,O;const l=((A=o.activeSection)==null?void 0:A.sectionName)||"main",s={elements:o.elements,selectedColor:o.selectedColor,canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,backgroundImage:((u=o.activeSection)==null?void 0:u.sectionImage)||((E=o.activeSection)==null?void 0:E.image),sectionImage:((B=o.activeSection)==null?void 0:B.sectionImage)||((S=o.activeSection)==null?void 0:S.image),sectionName:l,zoomLevel:o.zoomLevel,showGrid:o.showGrid,snapToGrid:o.snapToGrid},h={id:l,sectionName:l,image:(j=o.activeSection)==null?void 0:j.sectionImage,sectionImage:(J=o.activeSection)==null?void 0:J.sectionImage},x=[],n=[],c=await this.exportSectionAsBlob(s,h,o.canvasWidth,o.canvasHeight,a,!0);if(c){const v=await this.blobToFile(c,`${l}-full.${a}`,`image/${a}`);x.push({sectionName:l,sectionImage:v})}const N=await this.exportSectionAsBlob(s,h,o.canvasWidth,o.canvasHeight,a,!1);if(N){const v=await this.blobToFile(N,`${l}-print.${a}`,`image/${a}`);n.push({sectionName:l,sectionImage:v})}const C={sections:{[l]:s},canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,format:a,timestamp:new Date().toISOString(),version:"1.0",productInfo:{sections:[{sectionName:l,sectionImage:((T=o.activeSection)==null?void 0:T.sectionImage)||((O=o.activeSection)==null?void 0:O.image),id:l}]}};return{fullDesign:x,printReady:n,designFile:JSON.stringify(C)}}}class ii{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),h=new Date().toISOString(),x={id:s,name:o,timestamp:h,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:h,thumbnail:a.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+s,JSON.stringify(x)),this.updateDesignsList(s,o,h),{success:!0,designId:s,message:"Design saved successfully"}}catch(s){return console.error("Error saving design:",s),{success:!1,error:s.message}}}loadDesign(o){try{let a=o;if(!o.startsWith("design_")){const x=this.getAllDesigns().find(n=>n.name===o);if(!x)return{success:!1,error:"Design not found"};a=x.id}const l=this.storage.getItem(this.STORAGE_PREFIX+a);return l?{success:!0,data:JSON.parse(l)}:{success:!1,error:"Design not found"}}catch(a){return console.error("Error loading design:",a),{success:!1,error:a.message}}}getAllDesigns(){try{const o=this.storage.getItem(this.DESIGNS_LIST_KEY);return o?JSON.parse(o):[]}catch(o){return console.error("Error getting designs list:",o),[]}}deleteDesign(o){try{this.storage.removeItem(this.STORAGE_PREFIX+o);const l=this.getAllDesigns().filter(s=>s.id!==o);return this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(l)),{success:!0,message:"Design deleted successfully"}}catch(a){return console.error("Error deleting design:",a),{success:!1,error:a.message}}}exportDesignAsFile(o){try{const a=this.loadDesign(o);if(!a.success)return a;const l=a.data,s=JSON.stringify(l,null,2),h=new Blob([s],{type:"application/json"}),x=URL.createObjectURL(h),n=document.createElement("a");return n.href=x,n.download=`${l.name}_${l.id}.json`,document.body.appendChild(n),n.click(),document.body.removeChild(n),URL.revokeObjectURL(x),{success:!0,message:"Design exported successfully"}}catch(a){return console.error("Error exporting design:",a),{success:!1,error:a.message}}}importDesignFromFile(o){return new Promise(a=>{try{const l=new FileReader;l.onload=s=>{try{const h=JSON.parse(s.target.result);if(!this.validateDesignData(h)){a({success:!1,error:"Invalid design file format"});return}const x=this.generateDesignId(h.name+"_imported");h.id=x,h.name+="_imported",h.timestamp=new Date().toISOString(),h.metadata.lastModified=h.timestamp,this.storage.setItem(this.STORAGE_PREFIX+x,JSON.stringify(h)),this.updateDesignsList(x,h.name,h.timestamp),a({success:!0,data:h,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(),h=s.findIndex(n=>n.id===o),x={id:o,name:a,timestamp:l,lastModified:l};h>=0?s[h]=x:s.push(x),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 re=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:h}=f,[x,n]=y.useState([]),[c,N]=y.useState(null),[C,A]=y.useState(!1),[u,E]=y.useState(!1),[B,S]=y.useState(!1),[j,J]=y.useState({x:0,y:0}),[T,O]=y.useState(null),[v,rt]=y.useState(800),[W,ht]=y.useState(600),[Q,ct]=y.useState(1),[H,ot]=y.useState(s.colorSettings[0]),[M,st]=y.useState(!1),[Z,lt]=y.useState(!0),[q,P]=y.useState(!0),[w,tt]=y.useState(s.sections[0]),[m,D]=y.useState(!1),[L,G]=y.useState({}),[_,et]=y.useState([]),[X,V]=y.useState(-1),[U]=y.useState(new ii("localStorage")),K=y.useRef(null),wt=y.useRef(null),ft=y.useRef(null),gt=y.useRef(null),Lt=y.useRef(null),Rt=y.useRef(new ei),ut=y.useRef(!1),[oi,ae]=y.useState(null),at=y.useCallback(()=>{const i={elements:JSON.parse(JSON.stringify(x)),selectedElement:c?{...c}:null,timestamp:Date.now()},t=_.slice(0,X+1);t.push(i),t.length>50?t.shift():V(X+1),et(t)},[x,c,_,X]),bt=y.useCallback(()=>({elements:x,canvasWidth:v,canvasHeight:W,selectedColor:H,activeSection:w,product:s,sectionDesigns:L,zoomLevel:Q,showGrid:M,snapToGrid:q,selectedElement:c?{...c}:null,canvasRef:K}),[x,v,W,H,w,s,L,Q,M,q,c]);y.useEffect(()=>{const t=setTimeout(async()=>{if(x.length===0&&_.length<=1){if(h)try{const I=await fetch(h);if(I.ok){const z=await I.text();if(z.trim()){const $=JSON.parse(z.trim());if(console.log("design data is",$),ae($),$.sections&&typeof $.sections=="object"){const nt=Object.keys($.sections)[0],it=$.sections[nt];if(it&&it.elements){console.log("Loading design from file:",h),n(it.elements||[]),rt(it.canvasWidth||800),ht(it.canvasHeight||600),ot(it.selectedColor||s.colorSettings[0]),ct(it.zoomLevel||1),st(it.showGrid||!1),P(it.snapToGrid||!0),N(null),$.sections&&G($.sections);const Nt=s.sections.find(It=>It.sectionName===nt);Nt&&tt(Nt),et([]),V(-1),setTimeout(()=>{at()},100);return}}}}else console.warn("Failed to load design file, using default text")}catch(I){console.error("Error loading design file:",I),console.warn("Using default text instead")}const r=24,d="Arial",g="Change me",b=document.createElement("canvas").getContext("2d");b.font=`${r}px ${d}`;const k=b.measureText(g).width,R={id:dt(),type:"text",x:v/2-k/2,y:W/2-r/2,width:k,height:r,text:g,fontSize:r,fontFamily:d,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};n([R]),N(R),setTimeout(()=>{at()},100)}},300);return()=>clearTimeout(t)},[h,s.colorSettings,s.sections]);const Dt=y.useCallback((i="png",t=!0)=>{const r=bt();return s.sections,Rt.current.exportAllSections({[(w==null?void 0:w.sectionName)||"main"]:r},[{id:(w==null?void 0:w.sectionName)||"main",sectionName:(w==null?void 0:w.sectionName)||"main",image:w==null?void 0:w.sectionImage,sectionImage:w==null?void 0:w.sectionImage}],v,W,i,t)},[bt,s.sections,w,v,W]),se=["Arial","Helvetica","Times New Roman","Georgia","Verdana","Courier New","Tahoma","Trebuchet MS","Impact","Comic Sans MS","Palatino","Garamond","Bookman","Avant Garde","Century Gothic"],Ct=20;y.useEffect(()=>{const i=()=>D(window.innerWidth<768);return i(),window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]),y.useEffect(()=>{const i=document.createElement("canvas");i.width=v,i.height=W,Lt.current=i},[v,W]),y.useEffect(()=>{_.length===0&&at()},[]);const jt=(i,t,r,d,g,p)=>{i.beginPath(),i.moveTo(t+p,r),i.lineTo(t+d-p,r),i.quadraticCurveTo(t+d,r,t+d,r+p),i.lineTo(t+d,r+g-p),i.quadraticCurveTo(t+d,r+g,t+d-p,r+g),i.lineTo(t+p,r+g),i.quadraticCurveTo(t,r+g,t,r+g-p),i.lineTo(t,r+p),i.quadraticCurveTo(t,r,t+p,r),i.closePath()},Pt=(i,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};i.save(),i.font=`${t.fontStyle||""} ${t.fontWeight||""} ${t.fontSize}px ${t.fontFamily}`,i.textBaseline="alphabetic",i.textAlign="left";const r=i.measureText(t.text),d=r.actualBoundingBoxAscent??t.fontSize*.8,g=r.actualBoundingBoxDescent??t.fontSize*.2,p=r.actualBoundingBoxLeft??0,b=r.actualBoundingBoxRight??r.width,F=p+b,k=d+g,R=t.x,I=t.y,z=R-F/2-p,$=I-k/2-d;return i.restore(),{x:z,y:$,width:F,height:k,cx:R,cy:I}},le=(i,t)=>{if(!t)return;const r=8,d=8,g=4,p=30,b=Pt(i,t),F=t.isIcon?Math.max(r,12):r,k={x:-b.width/2-F,y:-b.height/2-F,w:b.width+F*2,h:b.height+F*2};i.save(),i.translate(b.cx,b.cy),t.rotation&&i.rotate(t.rotation*Math.PI/180);const R=i.createLinearGradient(k.x,k.y,k.x+k.w,k.y+k.h);R.addColorStop(0,"#3b82f6"),R.addColorStop(.5,"#1d4ed8"),R.addColorStop(1,"#3b82f6"),i.strokeStyle="rgba(59,130,246,.3)",i.lineWidth=3,jt(i,k.x-1,k.y-1,k.w+2,k.h+2,g+1),i.stroke(),i.strokeStyle=R,i.lineWidth=2,i.setLineDash([8,4]),jt(i,k.x,k.y,k.w,k.h,g),i.stroke(),i.lineDashOffset=-(Date.now()/50)%12,i.strokeStyle="#ffffff",i.lineWidth=1,i.setLineDash([4,8]),jt(i,k.x,k.y,k.w,k.h,g),i.stroke(),i.setLineDash([]),i.lineDashOffset=0,[{x:k.x,y:k.y},{x:k.x+k.w,y:k.y},{x:k.x+k.w,y:k.y+k.h},{x:k.x,y:k.y+k.h}].forEach($=>{i.fillStyle="rgba(0,0,0,.2)",i.fillRect($.x-d/2+1,$.y-d/2+1,d,d),i.fillStyle="#ffffff",i.fillRect($.x-d/2,$.y-d/2,d,d),i.strokeStyle="#3b82f6",i.lineWidth=1,i.strokeRect($.x-d/2,$.y-d/2,d,d)});const I=0,z=k.y-p;i.strokeStyle="#3b82f6",i.lineWidth=1,i.setLineDash([2,2]),i.beginPath(),i.moveTo(I,z+12),i.lineTo(I,k.y),i.stroke(),i.setLineDash([]),i.beginPath(),i.arc(I,z,12,0,2*Math.PI),i.fillStyle="#f59e0b",i.fill(),i.strokeStyle="#ffffff",i.lineWidth=2,i.stroke(),i.strokeStyle="#ffffff",i.lineWidth=2,i.beginPath(),i.arc(I,z,6,-Math.PI/2,Math.PI,!1),i.stroke(),i.beginPath(),i.moveTo(I-6,z),i.lineTo(I-3,z-3),i.lineTo(I-3,z+3),i.closePath(),i.fillStyle="#ffffff",i.fill(),i.restore()},ne=(i,t)=>{if(!t)return[];const r=Pt(i,t),d=t.isIcon?Math.max(8,12):8,g=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},k=[{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),I=Math.sin(b);return k.map(z=>({x:r.cx+(z.x*R-z.y*I),y:r.cy+(z.x*I+z.y*R),type:z.type,size:z.type==="rotate"?24:g}))},Ut=(i,t,r)=>{if(!r)return null;const d=K.current;if(!d)return null;const g=d.getContext("2d"),p=ne(g,r);for(const b of p){const F=i-b.x,k=t-b.y;if(Math.sqrt(F*F+k*k)<=b.size/2)return b.type}return null},kt=y.useCallback(()=>{if(X>0){const i=_[X-1];n(i.elements),N(i.selectedElement),V(X-1)}},[_,X]),mt=y.useCallback(()=>{if(X<_.length-1){const i=_[X+1];n(i.elements),N(i.selectedElement),V(X+1)}},[_,X]),yt=i=>q?Math.round(i/Ct)*Ct:i;y.useEffect(()=>{if(w!=null&&w.sectionImage){ft.current=null,gt.current=null;const i=K.current;i&&(i.getContext("2d").clearRect(0,0,v,W),console.log("cleared canvas"));const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{ft.current=t,Tt(t,H)},t.onerror=()=>{console.error("Failed to load background image:",w.sectionImage),Y()},t.src=w.sectionImage}else ft.current=null,gt.current=null,Y()},[w==null?void 0:w.sectionImage]),y.useEffect(()=>{const i=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 g=c;n(p=>p.filter(b=>b.id!==g.id)),N(null),at()}if(t.ctrlKey||t.metaKey)switch(t.key){case"z":t.shiftKey?(t.preventDefault(),mt()):(t.preventDefault(),kt());break;case"y":t.preventDefault(),mt();break}}};return document.addEventListener("keydown",i),()=>{document.removeEventListener("keydown",i)}},[c,l,kt,mt,at]);const ce=i=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(i);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)}`,de=i=>{i.strokeStyle="#e0e0e0",i.lineWidth=1,i.setLineDash([1,1]);for(let t=0;t<=v;t+=Ct)i.beginPath(),i.moveTo(t,0),i.lineTo(t,W),i.stroke();for(let t=0;t<=W;t+=Ct)i.beginPath(),i.moveTo(0,t),i.lineTo(v,t),i.stroke();i.setLineDash([])},fe=(i,t)=>{i.save();const r=t.x+t.width/2,d=t.y+t.height/2;switch(i.translate(r,d),t.rotation&&i.rotate(t.rotation*Math.PI/180),i.translate(-t.width/2,-t.height/2),t.type){case"text":xe(i,t);break;case"rectangle":ye(i,t);break;case"circle":ue(i,t);break;case"triangle":me(i,t);break;case"star":pe(i,t);break;case"arrow":we(i,t);break;case"diamond":be(i,t);break;case"hexagon":ke(i,t);break;case"pentagon":ve(i,t);break;case"heart":Se(i,t);break;case"oval":Fe(i,t);break;case"roundedRectangle":Ce(i,t);break;case"image":Te(i,t);break;case"qrcode":ge(i,t);break;case"barcode":he(i,t);break;case"sticker":Ne(i,t);break;case"horizontalLine":je(i,t);break;case"embroidery":Ie(i,t);break}i.restore()},he=(i,t)=>{if(t.imageObject)i.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(g=>g.id===t.id?{...g,imageObject:r,imageLoading:!1}:g))},r.onerror=()=>{n(d=>d.map(g=>g.id===t.id?{...g,imageLoading:!1}:g))},r.src=t.src,i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading...",t.width/2,t.height/2)}else t.imageLoading?(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading...",t.width/2,t.height/2)):(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("No Barcode",t.width/2,t.height/2))},ge=(i,t)=>{if(t.imageObject)i.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(g=>g.id===t.id?{...g,imageObject:r,imageLoading:!1}:g))},r.onerror=()=>{n(d=>d.map(g=>g.id===t.id?{...g,imageLoading:!1}:g))},r.src=t.src,i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading QR...",t.width/2,t.height/2)}else t.imageLoading?(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading QR...",t.width/2,t.height/2)):(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("No QR Data",t.width/2,t.height/2))},xe=(i,t)=>{i.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}i.font=`${t.fontStyle||"normal"} ${t.fontWeight||"normal"} ${t.fontSize||20}px ${t.fontFamily||"Arial"}`,i.fillStyle=t.fill||"#000000",i.textAlign=t.textAlign||"left",i.textBaseline="top",t.opacity!==void 0&&(i.globalAlpha=t.opacity),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth);const d=r.split(`
|
|
991
|
+
`),g=(t.fontSize||20)*(t.lineHeight||1.2),p=Math.max(...d.map(F=>i.measureText(F).width)),b=d.length*g;if(t.backgroundColor&&t.backgroundColor!=="transparent"){i.fillStyle=t.backgroundColor;const F=t.backgroundPadding||4;i.fillRect(-F,-F,p+F*2,b+F*2),i.fillStyle=t.fill||"#000000"}d.forEach((F,k)=>{const R=k*g,I=i.measureText(F).width;t.stroke&&t.strokeWidth>0&&i.strokeText(F,0,R),i.fillText(F,0,R);const z=t.fontSize||20,$=t.decorationColor||t.fill||"#000000",nt=Math.max(1,z/20);if(i.strokeStyle=$,i.lineWidth=nt,t.textDecoration==="underline"||t.underline){const it=R+z+2;i.beginPath(),i.moveTo(0,it),i.lineTo(I,it),i.stroke()}if(t.textDecoration==="overline"||t.overline){const it=R-2;i.beginPath(),i.moveTo(0,it),i.lineTo(I,it),i.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const it=R+z/2;i.beginPath(),i.moveTo(0,it),i.lineTo(I,it),i.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(Nt=>{switch(Nt.trim()){case"underline":const It=R+z+2;i.beginPath(),i.moveTo(0,It),i.lineTo(I,It),i.stroke();break;case"overline":const Xt=R-2;i.beginPath(),i.moveTo(0,Xt),i.lineTo(I,Xt),i.stroke();break;case"line-through":const Jt=R+z/2;i.beginPath(),i.moveTo(0,Jt),i.lineTo(I,Jt),i.stroke();break}})}),i.restore()},ye=(i,t)=>{t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fillRect(0,0,t.width,t.height)),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.strokeRect(0,0,t.width,t.height))},ue=(i,t)=>{const r=Math.min(t.width,t.height)/2,d=t.width/2,g=t.height/2;i.beginPath(),i.arc(d,g,r,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},me=(i,t)=>{const r=t.width/2;t.height/2,i.beginPath(),i.moveTo(r,0),i.lineTo(0,t.height),i.lineTo(t.width,t.height),i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},pe=(i,t)=>{const r=t.width/2,d=t.height/2,g=Math.min(t.width,t.height)/2,p=g*.4,b=t.numPoints||5;i.beginPath();for(let F=0;F<b*2;F++){const k=F%2===0?g:p,R=F*Math.PI/b,I=r+Math.cos(R)*k,z=d+Math.sin(R)*k;F===0?i.moveTo(I,z):i.lineTo(I,z)}i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},we=(i,t)=>{const r=t.width,d=t.height,g=r*.3;i.beginPath(),i.moveTo(r/2,0),i.lineTo(r,d*.6),i.lineTo(r-g,d*.6),i.lineTo(r-g,d),i.lineTo(g,d),i.lineTo(g,d*.6),i.lineTo(0,d*.6),i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},be=(i,t)=>{const r=t.width/2,d=t.height/2;i.beginPath(),i.moveTo(r,0),i.lineTo(t.width,d),i.lineTo(r,t.height),i.lineTo(0,d),i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},ke=(i,t)=>{const r=t.width/2,d=t.height/2,g=Math.min(t.width,t.height)/2,p=6;i.beginPath();for(let b=0;b<p;b++){const F=b*2*Math.PI/p-Math.PI/2,k=r+g*Math.cos(F),R=d+g*Math.sin(F);b===0?i.moveTo(k,R):i.lineTo(k,R)}i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},ve=(i,t)=>{const r=t.width/2,d=t.height/2,g=Math.min(t.width,t.height)/2,p=5;i.beginPath();for(let b=0;b<p;b++){const F=b*2*Math.PI/p-Math.PI/2,k=r+g*Math.cos(F),R=d+g*Math.sin(F);b===0?i.moveTo(k,R):i.lineTo(k,R)}i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},Se=(i,t)=>{const r=t.width,d=t.height,g=0,p=0;i.beginPath();const b=d*.3;i.moveTo(g+r/2,p+b),i.bezierCurveTo(g+r/2,p,g,p,g,p+b),i.bezierCurveTo(g,p+(d+b)/2,g+r/2,p+(d+b)/2,g+r/2,p+d),i.bezierCurveTo(g+r/2,p+(d+b)/2,g+r,p+(d+b)/2,g+r,p+b),i.bezierCurveTo(g+r,p,g+r/2,p,g+r/2,p+b),i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},Fe=(i,t)=>{const r=t.width/2,d=t.height/2,g=t.width/2,p=t.height/2;i.beginPath(),i.ellipse(r,d,g,p,0,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},Ce=(i,t)=>{const r=Math.min(t.width,t.height)*.1;jt(i,0,0,t.width,t.height,r),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},je=(i,t)=>{i.save(),t.opacity!==void 0&&(i.globalAlpha=t.opacity),i.strokeStyle=t.stroke||t.fill||"#000000",i.lineWidth=t.strokeWidth||t.height||2,i.lineCap="round",i.beginPath(),i.moveTo(0,t.height/2),i.lineTo(t.width,t.height/2),i.stroke(),i.restore()},Te=(i,t)=>{if(t.imageData)try{t.imageData.complete&&t.imageData.naturalHeight!==0?i.drawImage(t.imageData,0,0,t.width,t.height):(i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.lineWidth=1,i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="14px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Loading...",t.width/2,t.height/2))}catch(r){console.error("Error drawing image:",r),i.fillStyle="#ffebee",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#f44336",i.lineWidth=2,i.strokeRect(0,0,t.width,t.height),i.fillStyle="#f44336",i.font="14px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("Error loading image",t.width/2,t.height/2)}},Ne=(i,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,Y()},r.onerror=()=>{console.error("Failed to load sticker:",t.src),t.imageLoading=!1,i.fillStyle="#f0f0f0",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ccc",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#666",i.font="12px Arial",i.textAlign="center",i.fillText("Failed to load",t.width/2,t.height/2)},r.src=t.src}else t.loadedImage?i.drawImage(t.loadedImage,0,0,t.width,t.height):t.imageLoading&&(i.fillStyle="#f8f9fa",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#dee2e6",i.strokeRect(0,0,t.width,t.height),i.fillStyle="#6c757d",i.font="12px Arial",i.textAlign="center",i.fillText("Loading...",t.width/2,t.height/2))},Ie=(i,t)=>{if(t.imageObject)i.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{t.imageObject=r,t.imageLoading=!1,Y()},r.onerror=()=>{t.imageLoading=!1,console.error("Failed to load embroidery image:",t.src),Et(i,t)},r.src=t.src,Et(i,t,"Loading...")}else Et(i,t)},Et=(i,t,r="Embroidery")=>{i.fillStyle="#f9f9f9",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ddd",i.lineWidth=2,i.strokeRect(0,0,t.width,t.height),i.fillStyle="#999",i.font="24px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("๐งต",t.width/2,t.height/2-10),i.fillStyle="#666",i.font="12px Arial",i.fillText(r,t.width/2,t.height/2+15)},Ot=(i,t,r)=>{if(!r)return!1;const d=r.x+r.width/2,g=r.y+r.height/2,p=i-d,b=t-g,F=-(r.rotation||0)*Math.PI/180,k=Math.cos(F),R=Math.sin(F),I=p*k-b*R,z=p*R+b*k,$=r.width/2,nt=r.height/2;return I>=-$&&I<=$&&z>=-nt&&z<=nt},Ae=y.useCallback(()=>{(C||u||B)&&at(),A(!1),E(!1),S(!1),O(null);const i=K.current;i&&(i.style.cursor="default")},[C,u,B,at]);y.useEffect(()=>{const i=t=>{if(l)return;const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))&&((t.ctrlKey||t.metaKey)&&(t.key==="z"&&!t.shiftKey?(t.preventDefault(),kt()):(t.key==="z"&&t.shiftKey||t.key==="y")&&(t.preventDefault(),mt())),(t.key==="Delete"||t.key==="Backspace")&&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 g=t.shiftKey?10:1;let p={};switch(t.key){case"ArrowUp":p.y=c.y-g;break;case"ArrowDown":p.y=c.y+g;break;case"ArrowLeft":p.x=c.x-g;break;case"ArrowRight":p.x=c.x+g;break}Qt(c.id,p),at()}};return window.addEventListener("keydown",i),()=>window.removeEventListener("keydown",i)},[c,kt,mt,l]);const Re=(i,t={})=>{const r={id:dt(),type:i,x:50,y:50,width:100,height:100,fill:"#000000",stroke:"#000000",strokeWidth:0,rotation:0,...t};switch(i){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)||v/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)||v/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=v/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: ${i}`);return}n(d=>[...d,r]),N(r),at()},Qt=(i,t)=>{n(r=>r.map(d=>d.id===i?{...d,...t}:d)),c&&c.id===i&&N(r=>({...r,...t}))},Bt=y.useCallback(()=>{c&&(n(i=>i.filter(t=>t.id!==c.id)),N(null),at())},[c,at]),$t=i=>{const t=x.find(r=>r.id===i);if(t){const r={...t,id:dt(),x:t.x+20,y:t.y+20};n(d=>[...d,r]),N(r),at()}},Ht=(i,t)=>{const r=x.findIndex(p=>p.id===i);if(r===-1)return;const d=[...x],g=d[r];t==="up"&&r<d.length-1?(d[r]=d[r+1],d[r+1]=g):t==="down"&&r>0?(d[r]=d[r-1],d[r-1]=g):t==="top"?(d.splice(r,1),d.push(g)):t==="bottom"&&(d.splice(r,1),d.unshift(g)),n(d),at()};y.useCallback(()=>{w&&G(i=>({...i,[w.sectionName]:{elements:[...x],selectedColor:H}}))},[w,x,H]);const[,De]=y.useReducer(i=>i+1,0);setTimeout(()=>{De()},20),y.useImperativeHandle(o,()=>({handleSectionChange:Gt,exportPrintReady:async(i="png")=>await Dt(i,!1),exportFullDesign:async(i="png")=>await Dt(i,!0),exportDesign:Dt,getCanvasData:()=>bt(),exportAllDesignsAsJSON:async(i="png")=>{try{const t=bt();console.log("canvas data to export: ",t);const r={},d=(w==null?void 0:w.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 g=s.sections&&s.sections.length>0?s.sections:[{id:d,sectionName:d,image:w==null?void 0:w.sectionImage,sectionImage:w==null?void 0:w.sectionImage}];return await Rt.current.exportAllSectionsAsJSON(r,g,v,W,i)}catch(t){throw console.error("Export as JSON failed:",t),t}},exportCurrentSectionAsJSON:async(i="png")=>{try{const t=bt();return await Rt.current.exportCurrentSectionAsJSON(t,i)}catch(t){throw console.error("Export current section as JSON failed:",t),t}}})),y.useEffect(()=>{ft.current=null,gt.current=null;const i=K.current;if(i&&i.getContext("2d").clearRect(0,0,v,W),w!=null&&w.sectionImage){const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{t.src===w.sectionImage&&(ft.current=t,Tt(t,H))},t.onerror=()=>{console.error("Failed to load background image:",w.sectionImage),Y()},t.src=w.sectionImage}else Y()},[w==null?void 0:w.sectionImage]);const xt=y.useRef(null),zt=y.useRef(!1),Y=y.useCallback(()=>{const i=K.current;if(!i||zt.current)return;zt.current=!0;const t=i.getContext("2d");t.clearRect(0,0,v,W),gt.current&&t.drawImage(gt.current,0,0,v,W),M&&de(t),x.forEach(r=>{t.save(),t.globalAlpha=r.opacity||1,fe(t,r),t.restore()}),c&&le(t,c),zt.current=!1},[x,c,v,W,M]),pt=y.useCallback(()=>{xt.current&&cancelAnimationFrame(xt.current),xt.current=requestAnimationFrame(()=>{Y(),xt.current=null})},[Y]);y.useEffect(()=>{pt()},[x,c,v,W,M,pt]),y.useEffect(()=>{gt.current&&pt()},[gt.current,pt]),y.useEffect(()=>()=>{xt.current&&cancelAnimationFrame(xt.current)},[]);const Wt=y.useCallback(()=>{Y(),(C||u||B)&&(xt.current=requestAnimationFrame(Wt))},[Y,C,u,B]);y.useEffect(()=>{C||u||B?Wt():(xt.current&&(cancelAnimationFrame(xt.current),xt.current=null),pt())},[C,u,B,Wt,pt]);const Ee=y.useCallback(i=>{if(l)return;const r=K.current.getBoundingClientRect(),d=(i.clientX-r.left)/Q,g=(i.clientY-r.top)/Q;if(J({x:d,y:g}),c){const b=Ut(d,g,c);if(b){if(b==="rotate"){S(!0);const F=c.x+c.width/2,k=c.y+c.height/2,R=Math.atan2(g-k,d-F)*180/Math.PI;J({x:d,y:g,initialAngle:R,initialRotation:c.rotation||0})}else E(!0),O(b),J({x:d,y:g,initialWidth:c.width,initialHeight:c.height,initialX:c.x,initialY:c.y});return}}let p=null;for(let b=x.length-1;b>=0;b--)if(Ot(d,g,x[b])){p=x[b];break}p?(N(p),A(!0),J({x:d,y:g,offsetX:d-p.x,offsetY:g-p.y})):N(null),Y()},[l,Q,c,x,Y]),Be=y.useCallback(i=>{if(l)return;const t=K.current,r=t.getBoundingClientRect(),d=(i.clientX-r.left)/Q,g=(i.clientY-r.top)/Q;if(c&&!C&&!u&&!B){const p=Ut(d,g,c);p?p==="rotate"?t.style.cursor="grab":t.style.cursor=p:Ot(d,g,c)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=C?"grabbing":"default";if(B&&c){const p=c.x+c.width/2,b=c.y+c.height/2,k=Math.atan2(g-b,d-p)*180/Math.PI-j.initialAngle;let R=j.initialRotation+k;i.shiftKey&&(R=Math.round(R/15)*15),R=(R%360+360)%360,n(I=>I.map(z=>z.id===c.id?{...z,rotation:R}:z)),N(I=>({...I,rotation:R})),Y();return}if(u&&c&&T){const p=d-j.x,b=g-j.y;let F=j.initialWidth,k=j.initialHeight,R=j.initialX,I=j.initialY;switch(T){case"se-resize":F=Math.max(20,j.initialWidth+p),k=Math.max(20,j.initialHeight+b);break;case"sw-resize":F=Math.max(20,j.initialWidth-p),k=Math.max(20,j.initialHeight+b),R=j.initialX+(j.initialWidth-F);break;case"ne-resize":F=Math.max(20,j.initialWidth+p),k=Math.max(20,j.initialHeight-b),I=j.initialY+(j.initialHeight-k);break;case"nw-resize":F=Math.max(20,j.initialWidth-p),k=Math.max(20,j.initialHeight-b),R=j.initialX+(j.initialWidth-F),I=j.initialY+(j.initialHeight-k);break}if(i.shiftKey&&c.type!=="text"){const $=j.initialWidth/j.initialHeight;T.includes("e"),k=F/$,T.includes("n")&&(I=j.initialY+(j.initialHeight-k))}q&&(R=yt(R),I=yt(I),F=yt(F),k=yt(k));const z={...c,x:R,y:I,width:F,height:k};n($=>$.map(nt=>nt.id===c.id?z:nt)),N(z),Y();return}if(C&&c){let p=d-j.offsetX,b=g-j.offsetY;q&&(p=yt(p),b=yt(b)),p=Math.max(0,Math.min(v-c.width,p)),b=Math.max(0,Math.min(W-c.height,b));const F={...c,x:p,y:b};n(k=>k.map(R=>R.id===c.id?F:R)),N(F),Y()}},[l,Q,c,C,u,B,T,j,q,v,W,x,Y]),Gt=y.useCallback(i=>{w&&G(r=>({...r,[w.sectionName]:{elements:x.map(d=>d.type==="image"?{...d,imageData:d.imageData,src:d.src}:d),selectedColor:H}}));const t=L[i.sectionName];if(t){const r=t.elements.map(d=>{if(d.type==="image"&&d.src&&!d.imageData){const g=new Image;return g.onload=()=>{n(p=>p.map(b=>b.id===d.id?{...b,imageData:g}:b)),Y()},g.src=d.src,{...d,imageData:g}}return d});n(r),ot(t.selectedColor||H)}else n([]);tt(i),N(null)},[w,x,H,L,Y]),ze=y.useCallback(i=>{if(i&&i.type.startsWith("image/")){const t=new FileReader;t.onload=r=>{const d=new Image;d.onload=()=>{const g={id:dt(),type:"image",x:yt(v/2-100),y:yt(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;g.width/g.height!==p&&(g.width/p<=200?g.height=g.width/p:g.width=g.height*p),n(b=>[...b,g]),N(g),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(i)}else alert("Please select a valid image file.")},[v,W,yt,dt,at]);y.useEffect(()=>{if(w!=null&&w.sectionImage){ut.current=!0,ft.current=null,gt.current=null;const i=new Image;i.crossOrigin="anonymous",i.onload=()=>{ft.current=i,Tt(i,H)},i.onerror=()=>{console.error("Failed to load background image:",w.sectionImage),ut.current=!1,Y()},i.src=w.sectionImage}else ft.current=null,gt.current=null,ut.current=!1,Y()},[w==null?void 0:w.sectionImage,H]);const _t=y.useCallback(We(()=>{Y()},16),[Y]);y.useEffect(()=>{ut.current||_t()},[x,c,M,_t]);function We(i,t){let r;return function(...g){const p=()=>{clearTimeout(r),i(...g)};clearTimeout(r),r=setTimeout(p,t)}}y.useEffect(()=>{ft.current&&Tt(ft.current,H)},[H]),y.useEffect(()=>{Y()},[Y]);const Me=(i,t,r)=>(.2126*i+.7152*t+.0722*r)/255,Tt=y.useCallback((i,t)=>{const r=Lt.current,d=r.getContext("2d");r.width=v,r.height=W,d.clearRect(0,0,v,W),d.drawImage(i,0,0,v,W);const g=d.getImageData(0,0,v,W),p=g.data,b=ce(t);if(!b){ut.current=!1;return}const{r:F,g:k,b:R}=b;for(let z=0;z<p.length;z+=4){if(p[z+3]===0)continue;const nt=Me(p[z],p[z+1],p[z+2]);p[z]=Math.round(F*nt),p[z+1]=Math.round(k*nt),p[z+2]=Math.round(R*nt)}d.putImageData(g,0,0);const I=new Image;I.onload=()=>{console.log("plain color: ",s.plainColor),gt.current=s.plainColor==="Y"?I:i,ut.current=!1,Y()},I.src=r.toDataURL("image/png")},[v,W,Y]),Yt=i=>{if(!Z)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),r=document.querySelector(".ruler-vertical");if(!t||!r)return{horizontal:[],vertical:[]};const d=t.getBoundingClientRect(),g=r.getBoundingClientRect(),p=d.width,b=g.height,F=50,k=[],R=[];for(let I=F;I<=p;I+=F)I<=p-20&&k.push({position:I,value:Math.round(I/i)});for(let I=F;I<=b;I+=F)I<=b-15&&R.push({position:I,value:Math.round(I/i)});return{horizontal:k,vertical:R}},[qt,Vt]=y.useState({horizontal:[],vertical:[]});return y.useEffect(()=>{const i=()=>{setTimeout(()=>{const d=Yt(Q);Vt(d)},50)};i();let t;const r=()=>{clearTimeout(t),t=setTimeout(i,150)};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),clearTimeout(t)}},[Q,Z]),y.useEffect(()=>{if(Z&&!m){const i=setTimeout(()=>{const t=Yt(Q);Vt(t)},100);return()=>clearTimeout(i)}},[Z,m,Q]),e.jsxs("div",{className:"pure-canvas-designer",children:[e.jsx("div",{className:"designer-header",children:e.jsx(Ke,{onAddElement:Re,onDeleteElement:()=>c&&Bt(c.id),onDuplicateElement:()=>c&&$t(c.id),onUndo:kt,onRedo:mt,onToggleGrid:()=>st(!M),onToggleRulers:()=>lt(!Z),onToggleSnap:()=>P(!q),onImageUpload:ze,canUndo:X>0,canRedo:X<_.length-1,showGrid:M,showRulers:Z,snapToGrid:q,selectedElement:c,theme:a,readOnly:l,apiKey:f.apiKey,apiEndpoint:f.apiEndpoint})}),e.jsxs("div",{className:"designer-content",children:[Z&&!m&&e.jsxs("div",{className:"rulers",children:[e.jsx("div",{className:"ruler-horizontal",children:e.jsx("div",{className:"ruler-horizontal-numbers",children:qt.horizontal.map((i,t)=>e.jsx("span",{className:"ruler-number horizontal",style:{left:`${i.position}px`},children:i.value},t))})}),e.jsx("div",{className:"ruler-vertical",children:e.jsx("div",{className:"ruler-vertical-numbers",children:qt.vertical.map((i,t)=>e.jsx("span",{className:"ruler-number vertical",style:{top:`${i.position}px`},children:i.value},t))})})]}),e.jsx("div",{className:"canvas-container",ref:wt,children:e.jsx("canvas",{ref:K,width:v,height:W,onMouseDown:Ee,onMouseMove:Be,onMouseUp:Ae,style:{border:"1px solid #e2e8f0",cursor:C?"grabbing":"default",transform:`scale(${Q})`,transformOrigin:"top left"}})}),e.jsxs("div",{className:"side-panels",children:[e.jsx(Ze,{selectedElement:c,onUpdate:Qt,onMoveLayer:Ht,availableFonts:se,theme:a}),e.jsx(ti,{elements:x,selectedElement:c,onSelectElement:N,onMoveLayer:Ht,onDeleteElement:Bt,theme:a})]})]}),e.jsxs("div",{className:"designer-footer",children:[e.jsxs("div",{className:"section-thumbnails",children:[e.jsxs("label",{className:"section-thumbnails-label",children:["Available sections for : ",e.jsx("u",{children:s.name})]}),e.jsx("div",{className:"thumbnails-container",children:s.sections.map(i=>{const t=L[i.sectionName]&&L[i.sectionName].elements&&L[i.sectionName].elements.length>0;return e.jsxs("div",{className:`section-thumbnail compact ${w.sectionName===i.sectionName?"active":""}`,onClick:r=>{r.stopPropagation();const d=s.sections.find(g=>g.sectionName===i.sectionName);Gt(d)},title:i.sectionName,children:[e.jsxs("div",{className:"thumbnail-image-container compact",children:[e.jsx("img",{src:i.sectionImage,alt:i.sectionName,className:"thumbnail-image compact",onError:r=>{r.target.style.display="none",r.target.nextSibling.style.display="flex"}}),e.jsx("div",{className:"thumbnail-placeholder compact",style:{display:"none"},children:e.jsx("span",{className:"placeholder-icon",children:"๐"})}),t&&e.jsx("div",{className:"content-indicator compact",children:e.jsx("svg",{className:"checkmark compact",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:e.jsx("path",{d:"M20 6L9 17l-5-5"})})})]}),e.jsx("span",{className:"thumbnail-label compact",children:i.sectionName})]},i.sectionName)})})]}),e.jsxs("div",{className:"color-palette-enhanced compact",children:[e.jsx("label",{className:"color-palette-label",children:"Supported colors:"}),e.jsxs("div",{className:"color-swatches-container",children:[s.colorSettings.slice(0,3).map((i,t)=>e.jsxs("div",{className:`color-swatch-enhanced compact ${H===i?"active":""}`,onClick:r=>{r.stopPropagation(),ot(i)},title:`Change product to ${i}`,children:[e.jsx("div",{className:"color-swatch-inner compact",style:{backgroundColor:i}}),H===i&&e.jsx("div",{className:"color-selection-ring compact"})]},i)),s.colorSettings.length>3&&e.jsxs("div",{className:"color-dropdown-container",children:[e.jsx("button",{className:"color-more-button",onClick:i=>{i.stopPropagation();const t=i.currentTarget.nextElementSibling;t.style.display=t.style.display==="block"?"none":"block"},title:"More colors",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"12",cy:"12",r:"3"}),e.jsx("circle",{cx:"12",cy:"5",r:"3"}),e.jsx("circle",{cx:"12",cy:"19",r:"3"})]})}),e.jsx("div",{className:"color-dropdown-menu",style:{display:"none"},children:s.colorSettings.slice(3).map((i,t)=>e.jsxs("div",{className:`color-swatch-dropdown ${H===i?"active":""}`,onClick:r=>{r.stopPropagation(),ot(i),r.currentTarget.parentElement.style.display="none"},title:`Change product to ${i}`,children:[e.jsx("div",{className:"color-swatch-inner-dropdown",style:{backgroundColor:i}}),e.jsx("span",{className:"color-hex",children:i.toUpperCase()})]},i))})]})]})]}),e.jsxs("div",{className:"zoom-controls-enhanced compact",children:[e.jsx("label",{className:"zoom-label",children:"Zoom:"}),e.jsxs("div",{className:"zoom-buttons-container compact",children:[e.jsx("button",{className:"zoom-button compact zoom-out",onClick:()=>ct(Math.max(.25,Q-.25)),disabled:Q<=.25,title:"Zoom Out",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"M21 21l-4.35-4.35"}),e.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),e.jsxs("div",{className:"zoom-display compact",children:[e.jsxs("span",{className:"zoom-percentage compact",children:[Math.round(Q*100),"%"]}),e.jsx("div",{className:"zoom-slider-container compact",children:e.jsx("input",{type:"range",min:"0.25",max:"4",step:"0.25",value:Q,onChange:i=>ct(parseFloat(i.target.value)),className:"zoom-slider compact"})})]}),e.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>ct(Math.min(4,Q+.25)),disabled:Q>=4,title:"Zoom In",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"M21 21l-4.35-4.35"}),e.jsx("line",{x1:"11",y1:"8",x2:"11",y2:"14"}),e.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),e.jsx("button",{className:"zoom-reset compact",onClick:()=>ct(1),title:"Reset Zoom (100%)",children:e.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[e.jsx("path",{d:"M3 3l18 18"}),e.jsx("circle",{cx:"11",cy:"11",r:"8"}),e.jsx("path",{d:"M21 21l-4.35-4.35"})]})})]})]})]})]})});re.displayName="Mypixia";module.exports=re;
|