@mypixia/simplex-designer 2.0.0 โ 2.0.2
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 +2045 -1888
- 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"),Me=require("qrcode"),Le=require("react-barcode"),Kt=require("axios");var At={exports:{}},kt={};/**
|
|
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 Pe(){if(Zt)return kt;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 kt.Fragment=o,kt.jsx=a,kt.jsxs=a,kt}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 Ue(){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===$?null:m.displayName||m.name||null;if(typeof m=="string")return m;switch(m){case S:return"Fragment";case J:return"Profiler";case T:return"StrictMode";case at:return"Suspense";case W:return"SuspenseList";case dt: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 j:return(m._context.displayName||"Context")+".Consumer";case k: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,H=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.",H),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 d(){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,H,G,et,X,V){return L=et.ref,m={$$typeof:z,type:m,key:D,props:et,_owner:G},(L!==void 0?L:null)!==null?Object.defineProperty(m,"ref",{enumerable:!1,get:d}):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,H,G,et,X,V){var U=D.children;if(U!==void 0)if(H)if(st(U)){for(H=0;H<U.length;H++)R(U[H]);Object.freeze&&Object.freeze(U)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else R(U);if(M.call(D,"key")){U=f(m);var K=Object.keys(D).filter(function(ft){return ft!=="key"});H=0<K.length?"{key: someKey, "+K.join(": ..., ")+": ...}":"{key: someKey}",tt[U+H]||(K=0<K.length?"{"+K.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
18
18
|
let props = %s;
|
|
19
19
|
<%s {...props} />
|
|
20
20
|
React keys must be passed directly to JSX without using spread:
|
|
21
21
|
let props = %s;
|
|
22
|
-
<%s key={someKey} {...props} />`,H,L,et,L),K[L+H]=!0)}if(L=null,W!==void 0&&(a(W),L=""+W),g(I)&&(a(I.key),L=""+I.key),"key"in I){W={};for(var Ft in I)Ft!=="key"&&(W[Ft]=I[Ft])}else W=I;return L&&l(W,typeof u=="function"?u.displayName||u.name||"Unknown":u),C(u,L,Z,G,s(),W,q,Y)}function D(u){typeof u=="object"&&u!==null&&u.$$typeof===E&&u._store&&(u._store.validated=1)}var p=y,E=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),j=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),$=Symbol.for("react.context"),S=Symbol.for("react.forward_ref"),rt=Symbol.for("react.suspense"),M=Symbol.for("react.suspense_list"),ct=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),lt=Symbol.for("react.activity"),Q=Symbol.for("react.client.reference"),it=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,at=Array.isArray,X=console.createTask?console.createTask:function(){return null};p={"react-stack-bottom-frame":function(u){return u()}};var st,_={},U=p["react-stack-bottom-frame"].bind(p,h)(),m=X(d(h)),K={};vt.Fragment=F,vt.jsx=function(u,I,W,H,G){var Z=1e4>it.recentlyCreatedOwnerStacks++;return N(u,I,W,!1,H,G,Z?Error("react-stack-top-frame"):U,Z?X(d(u)):m)},vt.jsxs=function(u,I,W,H,G){var Z=1e4>it.recentlyCreatedOwnerStacks++;return N(u,I,W,!0,H,G,Z?Error("react-stack-top-frame"):U,Z?X(d(u)):m)}}()),vt}var ee;function $e(){return ee||(ee=1,process.env.NODE_ENV==="production"?Nt.exports=Oe():Nt.exports=Qe()),Nt.exports}var i=$e();const Et={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(Et).flatMap(f=>f.icons.map(o=>({...o,category:f.name}))),He=f=>oe().filter(a=>a.name.toLowerCase().includes(f.toLowerCase())||a.category.toLowerCase().includes(f.toLowerCase())),Ge=({onSelectIcon:f,disabled:o=!1})=>{const[a,d]=y.useState(!1),[s,h]=y.useState(""),[g,l]=y.useState("all"),n=y.useRef(null);y.useEffect(()=>{const p=E=>{n.current&&!n.current.contains(E.target)&&d(!1)};return document.addEventListener("mousedown",p),()=>document.removeEventListener("mousedown",p)},[]);const C=p=>{f(p),d(!1),h("")},D=(()=>{let p=oe();if(s.trim()&&(p=He(s)),g!=="all"){const E=Et[g];E&&(p=p.filter(B=>B.category===E.name))}return p})();return i.jsxs("div",{className:"icon-selector",ref:n,children:[i.jsxs("button",{className:"toolbar-btn dropdown-trigger",disabled:o,onClick:()=>d(!a),title:"Add Icon",children:[i.jsx("span",{className:"icon",children:"๐ฏ"}),i.jsx("span",{className:"label",children:"Icons"}),i.jsx("span",{className:"dropdown-arrow",children:"โผ"})]}),a&&i.jsxs("div",{className:"icon-dropdown",children:[i.jsxs("div",{className:"icon-dropdown-header",children:[i.jsx("input",{type:"text",placeholder:"Search icons...",value:s,onChange:p=>h(p.target.value),className:"icon-search"}),i.jsxs("select",{value:g,onChange:p=>l(p.target.value),className:"category-select",children:[i.jsx("option",{value:"all",children:"All Categories"}),Object.entries(Et).map(([p,E])=>i.jsx("option",{value:p,children:E.name},p))]})]}),i.jsx("div",{className:"icon-grid",children:D.length===0?i.jsx("div",{className:"no-icons",children:s?"No icons found":"No icons in this category"}):D.map((p,E)=>i.jsxs("button",{className:"icon-item",onClick:()=>C(p),title:`${p.name} (${p.category})`,children:[i.jsx("span",{className:"icon-symbol",children:p.symbol}),i.jsx("span",{className:"icon-name",children:p.name})]},`${p.name}-${E}`))}),i.jsx("div",{className:"icon-dropdown-footer",children:i.jsxs("span",{className:"icon-count",children:[D.length," icon",D.length!==1?"s":""]})})]})]})},_e=({isOpen:f,onClose:o,onAddQRCode:a,theme:d})=>{const[s,h]=y.useState(""),[g,l]=y.useState(""),[n,C]=y.useState(200),[N,D]=y.useState("M"),p=()=>{if(!s.trim())return;const F={width:n,errorCorrectionLevel:N,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};Pe.toDataURL(s,F,(j,J)=>{if(j){console.error("QR Code generation error:",j);return}l(J)})},E=()=>{if(!g)return;const F=new Image;F.onload=()=>{a({type:"qrcode",src:g,data:s,width:n,height:n,x:100,y:100,imageObject:F}),B()},F.src=g},B=()=>{h(""),l(""),o()};return f?i.jsx("div",{className:"qr-modal-overlay",onClick:B,children:i.jsxs("div",{className:"qr-modal-content",onClick:F=>F.stopPropagation(),children:[i.jsxs("div",{className:"qr-modal-header",children:[i.jsx("h3",{children:"Generate QR Code"}),i.jsx("button",{className:"qr-modal-close",onClick:B,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"qr-modal-body",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-data",children:"Enter Data (URL, Text, etc.)"}),i.jsx("textarea",{id:"qr-data",value:s,onChange:F=>h(F.target.value),placeholder:"https://example.com or any text...",rows:3})]}),i.jsxs("div",{className:"qr-options",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-size",children:"Size (px)"}),i.jsx("input",{type:"number",id:"qr-size",value:n,onChange:F=>C(Math.max(50,Math.min(500,parseInt(F.target.value)||200))),min:"50",max:"500"})]}),i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-error-level",children:"Error Correction"}),i.jsxs("select",{id:"qr-error-level",value:N,onChange:F=>D(F.target.value),children:[i.jsx("option",{value:"L",children:"Low (7%)"}),i.jsx("option",{value:"M",children:"Medium (15%)"}),i.jsx("option",{value:"Q",children:"Quartile (25%)"}),i.jsx("option",{value:"H",children:"High (30%)"})]})]})]}),i.jsx("div",{className:"qr-actions",children:i.jsx("button",{className:"qr-btn qr-btn-generate",onClick:p,disabled:!s.trim(),children:"Generate QR Code"})}),g&&i.jsxs("div",{className:"qr-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"qr-preview-container",children:i.jsx("img",{src:g,alt:"QR Code Preview"})}),i.jsx("button",{className:"qr-btn qr-btn-add",onClick:E,style:{backgroundColor:(d==null?void 0:d.primaryColor)||"#3b82f6",borderColor:(d==null?void 0:d.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Ye=({isOpen:f,onClose:o,onAddBarcode:a,theme:d})=>{const[s,h]=y.useState(""),[g,l]=y.useState("CODE128"),[n,C]=y.useState(null),[N,D]=y.useState(2),[p,E]=y.useState(100),[B,F]=y.useState(20),[j,J]=y.useState("center"),[T,$]=y.useState("bottom"),[S,rt]=y.useState(10),M=y.useRef(null),ct=[{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)"}],O=()=>{if(s.trim())try{C(i.jsx(Ue,{value:s,format:g,width:N,height:p,fontSize:B,textAlign:j,textPosition:T,margin:S,background:"#ffffff",lineColor:"#000000"}))}catch(P){console.error("Barcode generation error:",P),alert("Invalid data for selected barcode format. Please check your input.")}},lt=()=>{var P,at,X,st;if(!(!n||!M.current))try{const _=M.current.querySelector("svg");if(!_){console.error("No SVG element found in barcode");return}const U=document.createElement("canvas"),m=U.getContext("2d"),K=_.getBoundingClientRect(),u=((at=(P=_.width)==null?void 0:P.baseVal)==null?void 0:at.value)||K.width||200,I=((st=(X=_.height)==null?void 0:X.baseVal)==null?void 0:st.value)||K.height||100;U.width=u,U.height=I;const W=new XMLSerializer().serializeToString(_),H=new Blob([W],{type:"image/svg+xml;charset=utf-8"}),G=URL.createObjectURL(H),Z=new Image;Z.onload=()=>{m.drawImage(Z,0,0);const q=U.toDataURL("image/png"),Y=new Image;Y.onload=()=>{a({type:"barcode",src:q,data:s,format:g,width:u,height:I,x:100,y:100,imageObject:Y}),Q()},Y.src=q,URL.revokeObjectURL(G)},Z.src=G}catch(_){console.error("Error adding barcode to canvas:",_),alert("Failed to add barcode to canvas. Please try again.")}},Q=()=>{h(""),C(null),l("CODE128"),D(2),E(100),F(20),o()},it=P=>({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."})[P]||"";return f?i.jsx("div",{className:"barcode-modal-overlay",onClick:Q,children:i.jsxs("div",{className:"barcode-modal-content",onClick:P=>P.stopPropagation(),children:[i.jsxs("div",{className:"barcode-modal-header",children:[i.jsx("h3",{children:"Generate Barcode"}),i.jsx("button",{className:"barcode-modal-close",onClick:Q,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"barcode-modal-body",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-data",children:"Enter Data"}),i.jsx("input",{type:"text",id:"barcode-data",value:s,onChange:P=>h(P.target.value),placeholder:"Enter your data..."})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-format",children:"Barcode Format"}),i.jsx("select",{id:"barcode-format",value:g,onChange:P=>l(P.target.value),children:ct.map(P=>i.jsx("option",{value:P.value,children:P.label},P.value))}),i.jsx("small",{className:"format-description",children:it(g)})]}),i.jsxs("div",{className:"barcode-options",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-width",children:"Bar Width"}),i.jsx("input",{type:"range",id:"barcode-width",min:"1",max:"4",step:"0.5",value:N,onChange:P=>D(parseFloat(P.target.value))}),i.jsxs("span",{className:"range-value",children:[N,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-height",children:"Height"}),i.jsx("input",{type:"range",id:"barcode-height",min:"50",max:"200",value:p,onChange:P=>E(parseInt(P.target.value))}),i.jsxs("span",{className:"range-value",children:[p,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-fontsize",children:"Font Size"}),i.jsx("input",{type:"range",id:"barcode-fontsize",min:"10",max:"30",value:B,onChange:P=>F(parseInt(P.target.value))}),i.jsxs("span",{className:"range-value",children:[B,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"text-position",children:"Text Position"}),i.jsxs("select",{id:"text-position",value:T,onChange:P=>$(P.target.value),children:[i.jsx("option",{value:"bottom",children:"Bottom"}),i.jsx("option",{value:"top",children:"Top"})]})]})]}),i.jsx("div",{className:"barcode-actions",children:i.jsx("button",{className:"barcode-btn barcode-btn-generate",onClick:O,disabled:!s.trim(),children:"Generate Barcode"})}),n&&i.jsxs("div",{className:"barcode-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"barcode-preview-container",ref:M,children:n}),i.jsx("button",{className:"barcode-btn barcode-btn-add",onClick:lt,style:{backgroundColor:(d==null?void 0:d.primaryColor)||"#3b82f6",borderColor:(d==null?void 0:d.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},qe=({theme:f})=>i.jsxs("div",{className:"premium-feature-container",style:{padding:"20px",backgroundColor:"#f8f9fa",borderRadius:"8px",boxShadow:"0 2px 10px rgba(0,0,0,0.05)",textAlign:"center",maxWidth:"400px",margin:"0 auto"},children:[i.jsx("div",{style:{marginBottom:"16px"},children:i.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:"#ffc107"},children:[i.jsx("path",{d:"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"}),i.jsx("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]})}),i.jsx("h3",{style:{color:"#333",fontSize:"18px",fontWeight:"600",marginBottom:"12px"},children:"Premium Feature Access"}),i.jsx("p",{style:{color:"#555",fontSize:"15px",lineHeight:"1.5",marginBottom:"20px"},children:"Premium stickers feature requires a subscription to access."}),i.jsx("a",{href:"https://mypixia.com/developer",target:"_blank",rel:"noopener noreferrer",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:(f==null?void 0:f.primaryColor)||"#4c5bf2",color:"white",padding:"10px 20px",borderRadius:"4px",textDecoration:"none",fontWeight:"500",transition:"background-color 0.2s ease"},children:"Get API Key"})]}),ie=()=>i.jsxs("div",{style:{textAlign:"center",padding:"40px"},children:[i.jsx("div",{style:{border:"4px solid #f3f3f3",borderTop:"4px solid #3498db",borderRadius:"50%",width:"40px",height:"40px",animation:"spin 2s linear infinite",margin:"0 auto 20px"}}),i.jsx("p",{children:"Loading..."}),i.jsx("style",{children:`
|
|
22
|
+
<%s key={someKey} {...props} />`,H,U,K,U),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:`
|
|
23
23
|
@keyframes spin {
|
|
24
24
|
0% { transform: rotate(0deg); }
|
|
25
25
|
100% { transform: rotate(360deg); }
|
|
26
26
|
}
|
|
27
|
-
`})]}),
|
|
27
|
+
`})]}),Ye=({isOpen:f,onClose:o,onAddSticker: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(""),[T,J]=y.useState({});y.useRef(null);const[j,O]=y.useState(!1),[k,at]=y.useState(!1),[W,ht]=y.useState(!1),Q=`${h}/api/v1/designer`;y.useEffect(()=>{f&&s&&dt()},[f,s]);const dt=async()=>{const P=sessionStorage.getItem("apc_x_sub_status");P==="active"?(O(!0),at(!0),ot()):P==="inactive"?(O(!1),at(!0)):(ht(!0),await $())},$=async()=>{if(!s){O(!1),at(!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),at(!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),R(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),R("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,H)=>{D[L]||(D[L]=H===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=T[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:G=>{G.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,{}),!j&&!W&&k&&e.jsx(_e,{theme:l}),j&&k&&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"})})}),d&&e.jsx(ie,{}),C&&e.jsxs("div",{className:"sticker-error",children:[e.jsx("p",{children:C}),e.jsx("button",{onClick:ot,children:"Retry"})]}),!d&&!C&&x.length>0&&e.jsx("div",{className:"sticker-grid",children:lt(Z(q))})]})]})]})}):null},qe=[{id:1,name:"Rose Bouquet",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
|
|
28
28
|
<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
|
|
29
29
|
<rect width="120" height="120" fill="#ffe6f0" stroke="#ff69b4" stroke-width="2"/>
|
|
30
30
|
<circle cx="60" cy="45" r="15" fill="#ff1493" opacity="0.7"/>
|
|
@@ -986,6 +986,6 @@ React keys must be passed directly to JSX without using spread:
|
|
|
986
986
|
</g>
|
|
987
987
|
<text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b7355">Mandala Flower</text>
|
|
988
988
|
</svg>
|
|
989
|
-
`)}`,category:"Geometric",description:"Complex mandala flower pattern"}],Je=({isOpen:f,onClose:o,onAddEmbroidery:a,theme:d,apiKey:s,apiEndpoint:h})=>{const[g,l]=y.useState([]),[n,C]=y.useState(!1),[N,D]=y.useState(null),[p,E]=y.useState(""),[B,F]=y.useState("All"),j=y.useRef(null),J=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{f&&l(Xe)},[f]);const T=S=>{a({type:"embroidery",src:S.url,name:S.name,description:S.description,category:S.category,width:120,height:120,x:100,y:100}),o()},$=g.filter(S=>{const rt=!p||S.name.toLowerCase().includes(p.toLowerCase())||S.description.toLowerCase().includes(p.toLowerCase()),M=B==="All"||S.category===B;return rt&&M});return f?i.jsx("div",{className:"embroidery-modal-overlay",onClick:o,children:i.jsxs("div",{className:"embroidery-modal-content",onClick:S=>S.stopPropagation(),ref:j,children:[i.jsxs("div",{className:"embroidery-modal-header",children:[i.jsx("h3",{children:"Choose an Embroidery Design"}),i.jsx("button",{className:"embroidery-modal-close",onClick:o,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"embroidery-modal-controls",children:[i.jsx("div",{className:"search-container",children:i.jsx("input",{type:"text",placeholder:"Search embroidery designs...",value:p,onChange:S=>E(S.target.value),className:"embroidery-search"})}),i.jsxs("div",{className:"category-filter",children:[i.jsx("label",{children:"Category:"}),i.jsx("select",{value:B,onChange:S=>F(S.target.value),className:"category-select",children:J.map(S=>i.jsx("option",{value:S,children:S},S))})]})]}),i.jsxs("div",{className:"embroidery-modal-body",children:[n&&i.jsxs("div",{className:"embroidery-loading",children:[i.jsx("div",{className:"loading-spinner"}),i.jsx("p",{children:"Loading embroidery designs..."})]}),N&&i.jsx("div",{className:"embroidery-error",children:i.jsx("p",{children:N})}),!n&&!N&&i.jsx("div",{className:"embroidery-grid",children:$.map(S=>i.jsxs("div",{className:"embroidery-item",onClick:()=>T(S),title:S.description,children:[i.jsx("div",{className:"embroidery-preview",children:i.jsx("img",{src:S.url,alt:S.name,loading:"lazy",onError:rt=>{console.error("Failed to load embroidery image:",S.url),rt.target.style.display="none"}})}),i.jsxs("div",{className:"embroidery-info",children:[i.jsx("div",{className:"embroidery-name",children:S.name}),i.jsx("div",{className:"embroidery-category",children:S.category})]})]},S.id))}),!n&&!N&&$.length===0&&i.jsx("div",{className:"no-embroideries",children:i.jsx("p",{children:"No embroidery designs found matching your search."})})]}),i.jsx("div",{className:"embroidery-modal-footer",children:i.jsxs("div",{className:"embroidery-disclaimer",children:[i.jsx("span",{className:"disclaimer-icon",children:"โน๏ธ"}),i.jsx("span",{children:"Sample embroidery designs for preview. Actual embroidered results may vary based on fabric and thread."})]})})]})}):null},St=[{id:1,text:"DREAM BIG",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF6B35",hasBackground:!0,backgroundColor:"#1A1A1A",textAlign:"center",textTransform:"uppercase"},{id:2,text:"Never Give Up",category:"Motivational",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#2E8B57",fontStyle:"italic",textAlign:"center"},{id:3,text:"BE YOURSELF",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#FF1493",textTransform:"uppercase",letterSpacing:2},{id:4,text:"Stay Strong",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#4169E1",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:5,text:"RISE & SHINE",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000",textAlign:"center"},{id:6,text:"Believe in Magic",category:"Motivational",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB",textAlign:"center"},{id:7,text:"UNSTOPPABLE",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",textTransform:"uppercase",letterSpacing:1.5},{id:8,text:"Chase Your Dreams",category:"Motivational",fontSize:24,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:9,text:"FEARLESS",category:"Motivational",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:10,text:"Make It Happen",category:"Motivational",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:11,text:"BORN TO WIN",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#FFD700",hasBackground:!0,backgroundColor:"#800080",textAlign:"center"},{id:12,text:"Positive Vibes Only",category:"Motivational",fontSize:20,fontFamily:"Comic Sans MS",fill:"#FF69B4",fontWeight:"600"},{id:13,text:"LIMITLESS",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#1E90FF",textTransform:"uppercase",letterSpacing:3},{id:14,text:"Embrace The Journey",category:"Motivational",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B4513"},{id:15,text:"STRENGTH WITHIN",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#696969",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:16,text:"Create Your Own Sunshine",category:"Motivational",fontSize:18,fontFamily:"Palatino",fill:"#FF8C00",fontWeight:"600"},{id:17,text:"WARRIOR SPIRIT",category:"Motivational",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:18,text:"Keep Going",category:"Motivational",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:19,text:"FOCUS & WIN",category:"Motivational",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082",hasBackground:!0,backgroundColor:"#FFFF00"},{id:20,text:"Inspire Others",category:"Motivational",fontSize:26,fontFamily:"Georgia",fill:"#CD853F",fontStyle:"italic"},{id:21,text:"GAME CHANGER",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:22,text:"Live With Purpose",category:"Motivational",fontSize:22,fontFamily:"Palatino",fill:"#2F4F4F",fontWeight:"600"},{id:23,text:"BREAKTHROUGH",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",letterSpacing:2},{id:24,text:"Shine Bright",category:"Motivational",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FFD700",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:25,text:"NEVER SETTLE",category:"Motivational",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasBackground:!0,backgroundColor:"#000080"},{id:26,text:"CEO MINDSET",category:"Business",fontSize:28,fontFamily:"Arial",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:27,text:"Innovation Starts Here",category:"Business",fontSize:20,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"600"},{id:28,text:"PROFESSIONAL",category:"Business",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#000080",letterSpacing:1},{id:29,text:"Excellence Every Day",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#8B0000",fontWeight:"600"},{id:30,text:"LEADERSHIP",category:"Business",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",textAlign:"center"},{id:31,text:"Think Different",category:"Business",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#696969"},{id:32,text:"RESULTS DRIVEN",category:"Business",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:33,text:"Strategic Vision",category:"Business",fontSize:22,fontFamily:"Georgia",fill:"#2E8B57",fontWeight:"700"},{id:34,text:"PRODUCTIVITY",category:"Business",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:35,text:"Success Mindset",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#FF8C00",fontWeight:"600"},{id:36,text:"EXPERT LEVEL",category:"Business",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:37,text:"Quality First",category:"Business",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:38,text:"INTEGRITY",category:"Business",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center"},{id:39,text:"Growth Focused",category:"Business",fontSize:20,fontFamily:"Palatino",fill:"#20B2AA",fontWeight:"600"},{id:40,text:"COLLABORATION",category:"Business",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#9370DB"},{id:41,text:"Performance Matters",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#B22222",fontWeight:"700"},{id:42,text:"ACCOUNTABILITY",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#8B4513",letterSpacing:1.5},{id:43,text:"Vision to Reality",category:"Business",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:44,text:"TRANSFORMATION",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:45,text:"Excellence Standard",category:"Business",fontSize:22,fontFamily:"Palatino",fill:"#2E8B57",fontWeight:"600"},{id:46,text:"EFFICIENCY",category:"Business",fontSize:30,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#000080"},{id:47,text:"Forward Thinking",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#CD853F",fontWeight:"700"},{id:48,text:"ACHIEVEMENT",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"bold",fill:"#B8860B",hasBackground:!0,backgroundColor:"#F5F5DC"},{id:49,text:"Strategic Excellence",category:"Business",fontSize:20,fontFamily:"Georgia",fill:"#696969",fontWeight:"600"},{id:50,text:"IMPACT MAKER",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#DC143C",textAlign:"center"},{id:51,text:"COFFEE FIRST",category:"Funny",fontSize:28,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#8B4513",hasBackground:!0,backgroundColor:"#F5DEB3"},{id:52,text:"I'm Not Lazy, I'm Energy Efficient",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF69B4",fontWeight:"600"},{id:53,text:"SARCASM LOADING...",category:"Funny",fontSize:24,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32",textAlign:"center"},{id:54,text:"Powered By Pizza",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:55,text:"CTRL + ALT + DELETE MONDAY",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:56,text:"Brain 404 Error",category:"Funny",fontSize:22,fontFamily:"Arial",fill:"#FF1493",fontWeight:"600"},{id:57,text:"WEEKEND WARRIOR",category:"Funny",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:58,text:"Adulting is Hard",category:"Funny",fontSize:24,fontFamily:"Comic Sans MS",fill:"#9370DB",fontWeight:"600"},{id:59,text:"PROCRASTINATION EXPERT",category:"Funny",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#FF4500"},{id:60,text:"Netflix & Chill Champion",category:"Funny",fontSize:18,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"600"},{id:61,text:"CHAOS COORDINATOR",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",textAlign:"center"},{id:62,text:"I Speak Fluent Sarcasm",category:"Funny",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57"},{id:63,text:"SLEEP IS FOR THE WEAK",category:"Funny",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#B22222"},{id:64,text:"Professional Overthinker",category:"Funny",fontSize:20,fontFamily:"Verdana",fill:"#4B0082",fontWeight:"600"},{id:65,text:"WIFI PASSWORD PLEASE",category:"Funny",fontSize:20,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32"},{id:66,text:"Certified Couch Potato",category:"Funny",fontSize:22,fontFamily:"Comic Sans MS",fill:"#FF8C00",fontWeight:"700"},{id:67,text:"SOCIAL DISTANCING CHAMPION",category:"Funny",fontSize:16,fontFamily:"Arial",fontWeight:"bold",fill:"#20B2AA"},{id:68,text:"Powered By Caffeine",category:"Funny",fontSize:24,fontFamily:"Impact",fill:"#8B4513",fontWeight:"bold"},{id:69,text:"EMERGENCY CHOCOLATE NEEDED",category:"Funny",fontSize:18,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#D2691E"},{id:70,text:"I'm Not Short, I'm Fun Size",category:"Funny",fontSize:20,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"600"},{id:71,text:"CTRL + Z MY LIFE",category:"Funny",fontSize:26,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:72,text:"Error 404: Motivation Not Found",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF4500",fontWeight:"600"},{id:73,text:"PROFESSIONAL WEIRDO",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:74,text:"Snack Attack Mode",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:75,text:"BATTERY LOW, NEED COFFEE",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#8B4513"},{id:76,text:"Love You Forever",category:"Love",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493",textAlign:"center"},{id:77,text:"SOULMATES",category:"Love",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFE4E1"},{id:78,text:"Better Together",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:79,text:"ENDLESS LOVE",category:"Love",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:80,text:"You Complete Me",category:"Love",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000"},{id:81,text:"FOREVER & ALWAYS",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF1493",letterSpacing:1},{id:82,text:"My Heart Belongs To You",category:"Love",fontSize:20,fontFamily:"Palatino",fill:"#DC143C",fontWeight:"600"},{id:83,text:"PURE LOVE",category:"Love",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:84,text:"Together Forever",category:"Love",fontSize:26,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"700",textAlign:"center"},{id:85,text:"MATCH MADE IN HEAVEN",category:"Love",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FF1493"},{id:86,text:"Love Story",category:"Love",fontSize:32,fontFamily:"Palatino",fontStyle:"italic",fill:"#B22222"},{id:87,text:"HEARTBEAT",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFF0F5"},{id:88,text:"You Are My Sunshine",category:"Love",fontSize:22,fontFamily:"Georgia",fill:"#FF8C00",fontWeight:"600"},{id:89,text:"DESTINY",category:"Love",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#8B0000",textAlign:"center"},{id:90,text:"True Love Waits",category:"Love",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493"},{id:91,text:"BELOVED",category:"Love",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#B22222",letterSpacing:2},{id:92,text:"Love Conquers All",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"700"},{id:93,text:"PERFECT MATCH",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#000000"},{id:94,text:"Always & Forever",category:"Love",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"},{id:95,text:"ROMANCE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493"},{id:96,text:"Love Never Fails",category:"Love",fontSize:24,fontFamily:"Palatino",fill:"#B22222",fontWeight:"600"},{id:97,text:"ETERNAL LOVE",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",letterSpacing:1.5},{id:98,text:"Heart & Soul",category:"Love",fontSize:30,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"bold"},{id:99,text:"PASSIONATE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:100,text:"Love Is Everything",category:"Love",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"700"},{id:101,text:"NO PAIN NO GAIN",category:"Sports",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:102,text:"Train Hard",category:"Sports",fontSize:32,fontFamily:"Arial",fontWeight:"900",fill:"#B22222"},{id:103,text:"CHAMPION MINDSET",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:104,text:"Beast Mode ON",category:"Sports",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#32CD32"},{id:105,text:"STRONGER EVERY DAY",category:"Sports",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#2E8B57",letterSpacing:1},{id:106,text:"Victory Mindset",category:"Sports",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#B8860B"},{id:107,text:"GAME TIME",category:"Sports",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:108,text:"Push Your Limits",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:109,text:"ATHLETIC EXCELLENCE",category:"Sports",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#DC143C"},{id:110,text:"Fitness First",category:"Sports",fontSize:30,fontFamily:"Verdana",fontWeight:"bold",fill:"#228B22"},{id:111,text:"UNSTOPPABLE FORCE",category:"Sports",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:112,text:"Sweat Equity",category:"Sports",fontSize:28,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:113,text:"PERFORMANCE ZONE",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:114,text:"Train Like A Champion",category:"Sports",fontSize:20,fontFamily:"Arial",fill:"#B22222",fontWeight:"600"},{id:115,text:"POWER WITHIN",category:"Sports",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:116,text:"Maximum Effort",category:"Sports",fontSize:26,fontFamily:"Verdana",fill:"#2E8B57",fontWeight:"800"},{id:117,text:"ELITE ATHLETE",category:"Sports",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000"},{id:118,text:"Rise Above",category:"Sports",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#4169E1"},{id:119,text:"COMPETITIVE EDGE",category:"Sports",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#DC143C"},{id:120,text:"Strength & Honor",category:"Sports",fontSize:26,fontFamily:"Impact",fill:"#2F4F4F",fontWeight:"bold"},{id:121,text:"WINNING ATTITUDE",category:"Sports",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#32CD32",letterSpacing:1.5},{id:122,text:"Never Give Up",category:"Sports",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FF4500"},{id:123,text:"ENDURANCE",category:"Sports",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#228B22",textAlign:"center"},{id:124,text:"Peak Performance",category:"Sports",fontSize:24,fontFamily:"Georgia",fill:"#B8860B",fontWeight:"700"},{id:125,text:"DEDICATION PAYS OFF",category:"Sports",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:126,text:"STYLE ICON",category:"Lifestyle",fontSize:30,fontFamily:"Palatino",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:127,text:"Chic & Unique",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:128,text:"TRENDSETTER",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:129,text:"Fashion Forward",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:130,text:"BOUTIQUE VIBES",category:"Lifestyle",fontSize:22,fontFamily:"Arial",fontWeight:"bold",fill:"#4169E1"},{id:131,text:"Effortlessly Elegant",category:"Lifestyle",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2F4F4F"},{id:132,text:"LUXE LIFESTYLE",category:"Lifestyle",fontSize:28,fontFamily:"Palatino",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:133,text:"Vintage Soul",category:"Lifestyle",fontSize:32,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:134,text:"MODERN CLASSIC",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#000000"},{id:135,text:"Street Style",category:"Lifestyle",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:136,text:"SOPHISTICATED",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontWeight:"bold",fill:"#2E8B57",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:137,text:"Boho Chic",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#CD853F"},{id:138,text:"MINIMALIST",category:"Lifestyle",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:3},{id:139,text:"Glamorous Life",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FFD700",fontWeight:"700"},{id:140,text:"HAUTE COUTURE",category:"Lifestyle",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#4B0082"},{id:141,text:"Urban Explorer",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fill:"#32CD32",fontWeight:"bold"},{id:142,text:"AESTHETIC VIBES",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#FF69B4"},{id:143,text:"Lifestyle Goals",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:144,text:"PREMIUM QUALITY",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B22222"},{id:145,text:"Designer Dreams",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:146,text:"CURATED STYLE",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#2F4F4F",letterSpacing:1},{id:147,text:"Fashion Statement",category:"Lifestyle",fontSize:22,fontFamily:"Georgia",fill:"#FF1493",fontWeight:"600"},{id:148,text:"ARTISAN CRAFTED",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#8B4513"},{id:149,text:"Timeless Elegance",category:"Lifestyle",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#000080"},{id:150,text:"SIGNATURE STYLE",category:"Lifestyle",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:151,text:"HAPPY BIRTHDAY",category:"Holidays",fontSize:32,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#FFFF00",textAlign:"center"},{id:152,text:"Merry Christmas",category:"Holidays",fontSize:30,fontFamily:"Georgia",fill:"#B22222",fontWeight:"700",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#228B22"},{id:153,text:"CELEBRATION TIME",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700"},{id:154,text:"Happy New Year",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:155,text:"THANKFUL HEART",category:"Holidays",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:156,text:"Easter Blessings",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:157,text:"PARTY TIME",category:"Holidays",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",hasBackground:!0,backgroundColor:"#000000"},{id:158,text:"Halloween Spirit",category:"Holidays",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#FF4500"},{id:159,text:"FESTIVE MOOD",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#32CD32"},{id:160,text:"Valentine's Day",category:"Holidays",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#DC143C"},{id:161,text:"ANNIVERSARY JOY",category:"Holidays",fontSize:"22",fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B8860B"},{id:162,text:"Graduation Day",category:"Holidays",fontSize:28,fontFamily:"Arial",fill:"#000080",fontWeight:"700"},{id:163,text:"SUMMER VIBES",category:"Holidays",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:164,text:"Winter Wonderland",category:"Holidays",fontSize:20,fontFamily:"Georgia",fill:"#4169E1",fontWeight:"600"},{id:165,text:"MOTHER'S DAY LOVE",category:"Holidays",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#FF69B4"},{id:166,text:"Father's Day Hero",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#2F4F4F",fontWeight:"700"},{id:167,text:"SPRING AWAKENING",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:168,text:"Holiday Magic",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#9370DB"},{id:169,text:"FAMILY GATHERING",category:"Holidays",fontSize:20,fontFamily:"Arial",fontWeight:"600",fill:"#8B4513"},{id:170,text:"Wedding Bliss",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FFD700"},{id:171,text:"FIREWORKS NIGHT",category:"Holidays",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:172,text:"Autumn Leaves",category:"Holidays",fontSize:26,fontFamily:"Georgia",fill:"#D2691E",fontWeight:"600"},{id:173,text:"MILESTONE MOMENT",category:"Holidays",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:174,text:"Special Occasion",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#B22222",fontWeight:"700"},{id:175,text:"CHEERS TO LIFE",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#20B2AA",textAlign:"center"},{id:176,text:'"Life is Beautiful"',category:"Quotes",fontSize:26,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57",textAlign:"center"},{id:177,text:"CARPE DIEM",category:"Quotes",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:178,text:'"Choose Happiness"',category:"Quotes",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF69B4"},{id:179,text:"LIVE LAUGH LOVE",category:"Quotes",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#DC143C",textAlign:"center"},{id:180,text:'"Dream Without Fear"',category:"Quotes",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:181,text:"WISDOM WITHIN",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#2F4F4F"},{id:182,text:'"Create Your Story"',category:"Quotes",fontSize:20,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:183,text:"INNER PEACE",category:"Quotes",fontSize:30,fontFamily:"Arial",fontWeight:"300",fill:"#20B2AA",letterSpacing:3},{id:184,text:'"Follow Your Heart"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:185,text:"GRATITUDE DAILY",category:"Quotes",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00"},{id:186,text:'"Embrace Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#32CD32"},{id:187,text:"MINDFUL LIVING",category:"Quotes",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"600",fill:"#4B0082"},{id:188,text:'"Stay Curious"',category:"Quotes",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#B22222"},{id:189,text:"PURPOSE DRIVEN",category:"Quotes",fontSize:28,fontFamily:"Arial",fontWeight:"700",fill:"#8B4513"},{id:190,text:'"Find Your Why"',category:"Quotes",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#CD853F"},{id:191,text:"AUTHENTIC SELF",category:"Quotes",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:192,text:'"Less is More"',category:"Quotes",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:2},{id:193,text:"PRESENT MOMENT",category:"Quotes",fontSize:26,fontFamily:"Georgia",fontWeight:"600",fill:"#2E8B57"},{id:194,text:'"Trust The Process"',category:"Quotes",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#4169E1"},{id:195,text:"BALANCED LIFE",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#20B2AA"},{id:196,text:'"Spread Kindness"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF69B4"},{id:197,text:"GROWTH MINDSET",category:"Quotes",fontSize:26,fontFamily:"Arial",fontWeight:"700",fill:"#32CD32"},{id:198,text:'"Be The Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:199,text:"INFINITE POSSIBILITIES",category:"Quotes",fontSize:20,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B"},{id:200,text:'"Leave Your Mark"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"}],Ke=({isOpen:f,onClose:o,onAddText:a,theme:d})=>{const[s,h]=y.useState(""),[g,l]=y.useState("All"),n=y.useMemo(()=>{const p=St.reduce((E,B)=>(E[B.category]=(E[B.category]||0)+1,E),{});return[{name:"All",count:St.length},...Object.entries(p).map(([E,B])=>({name:E,count:B}))]},[St]),C=y.useMemo(()=>St.filter(p=>{const E=!s||p.text.toLowerCase().includes(s.toLowerCase())||p.category.toLowerCase().includes(s.toLowerCase()),B=g==="All"||p.category===g;return E&&B}),[St,s,g]),N=p=>{const E={...p,x:100,y:100};a("text",E),o()},D=()=>{a("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),o()};return f?i.jsx("div",{className:"text-templates-modal-overlay",onClick:o,children:i.jsxs("div",{className:"text-templates-modal",onClick:p=>p.stopPropagation(),children:[i.jsxs("div",{className:"modal-header",children:[i.jsx("h2",{children:"Text Templates"}),i.jsx("button",{className:"close-btn",onClick:o,"aria-label":"Close",children:"ร"})]}),i.jsxs("div",{className:"modal-controls",children:[i.jsx("div",{className:"search-section",children:i.jsx("input",{type:"text",placeholder:"Search templates...",value:s,onChange:p=>h(p.target.value),className:"search-input"})}),i.jsx("div",{className:"category-tabs",children:n.map(p=>i.jsxs("button",{className:`category-tab ${g===p.name?"active":""}`,onClick:()=>l(p.name),children:[p.name,i.jsxs("span",{className:"count",children:["(",p.count,")"]})]},p.name))})]}),i.jsxs("div",{className:"templates-grid",children:[i.jsx("div",{className:"custom-text-option",onClick:D,children:i.jsxs("div",{className:"custom-text-preview",children:[i.jsx("div",{className:"custom-icon",children:"โ๏ธ"}),i.jsx("div",{className:"custom-label",children:"Create Custom Text"})]})}),C.map(p=>i.jsxs("div",{className:"template-item",onClick:()=>N(p),children:[i.jsx("div",{className:"template-preview",style:{fontFamily:p.fontFamily,fontSize:`${Math.min(p.fontSize*.6,18)}px`,fontWeight:p.fontWeight,fontStyle:p.fontStyle,color:p.fill,backgroundColor:p.hasBackground?p.backgroundColor:"transparent",textAlign:p.textAlign||"left",textTransform:p.textTransform||"none",letterSpacing:p.letterSpacing?`${p.letterSpacing}px`:"normal",textShadow:p.hasTextShadow?`${p.textShadowX}px ${p.textShadowY}px ${p.textShadowBlur}px ${p.textShadowColor}`:"none"},children:p.text}),i.jsxs("div",{className:"template-info",children:[i.jsx("span",{className:"template-category",children:p.category}),i.jsx("span",{className:"template-font",children:p.fontFamily})]})]},p.id))]}),i.jsx("div",{className:"modal-footer",children:i.jsxs("div",{className:"results-count",children:[C.length," template",C.length!==1?"s":""," found"]})})]})}):null},Ze=({onAddElement:f,onDeleteElement:o,onDuplicateElement:a,onUndo:d,onRedo:s,onToggleGrid:h,onToggleRulers:g,onToggleSnap:l,onImageUpload:n,canUndo:C,canRedo:N,showGrid:D,showRulers:p,snapToGrid:E,selectedElement:B,theme:F,readOnly:j,apiKey:J,apiEndpoint:T})=>{const[$,S]=y.useState(!1),[rt,M]=y.useState(!1),[ct,O]=y.useState(!1),[lt,Q]=y.useState(!1),[it,P]=y.useState(!1),[at,X]=y.useState(!1),[st,_]=y.useState(!1),U=L=>{const et=L.target.files[0];et&&et.type.startsWith("image/")&&n(et),L.target.value=""},m=L=>{f("icon",{iconData:L,text:L.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},K=L=>{f("qrcode",L)},u=L=>{f("barcode",L)},I=L=>{f("sticker",L)},W=L=>{f("embroidery",L)},H=(L,et)=>{f(L,et)},G=()=>{X(!at),_(!1)},Z=()=>{_(!st),X(!1)},q=L=>{L==="custom"?f("text"):L==="templates"&&P(!0),X(!1)},Y=L=>{f(L),_(!1)};return i.jsxs("div",{className:"toolbar",children:[i.jsxs("div",{className:"toolbar-section",children:[i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact",onClick:d,disabled:!C||j,title:"Undo (Ctrl+Z)",children:[i.jsx("span",{className:"icon",children:"โถ"}),i.jsx("span",{className:"label",children:"Undo"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:s,disabled:!N||j,title:"Redo (Ctrl+Y)",children:[i.jsx("span",{className:"icon",children:"โท"}),i.jsx("span",{className:"label",children:"Redo"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:j,title:"Add Text",onClick:G,children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Text"}),i.jsx("span",{className:`dropdown-arrow ${at?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${at?"show":""}`,children:[i.jsxs("button",{onClick:()=>q("custom"),children:[i.jsx("span",{className:"icon",children:"๐"})," Custom Text"]}),i.jsxs("button",{onClick:()=>q("templates"),children:[i.jsx("span",{className:"icon",children:"๐"})," Text Templates"]})]})]}),i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:j,onClick:Z,children:[i.jsx("span",{className:"icon",children:"โฉ"}),i.jsx("span",{className:"label",children:"Shapes"}),i.jsx("span",{className:`dropdown-arrow ${st?"open":""}`,children:"โผ"})]}),i.jsxs("div",{className:`dropdown-menu ${st?"show":""}`,children:[i.jsxs("button",{onClick:()=>Y("rectangle"),children:[i.jsx("span",{className:"icon",children:"โญ"})," Rectangle"]}),i.jsxs("button",{onClick:()=>Y("circle"),children:[i.jsx("span",{className:"icon",children:"โ"})," Circle"]}),i.jsxs("button",{onClick:()=>Y("triangle"),children:[i.jsx("span",{className:"icon",children:"โฒ"})," Triangle"]}),i.jsxs("button",{onClick:()=>Y("star"),children:[i.jsx("span",{className:"icon",children:"โ
"})," Star"]}),i.jsxs("button",{onClick:()=>Y("heart"),children:[i.jsx("span",{className:"icon",children:"โฅ"})," Heart"]}),i.jsxs("button",{onClick:()=>Y("arrow"),children:[i.jsx("span",{className:"icon",children:"โค"})," Arrow"]}),i.jsxs("button",{onClick:()=>Y("diamond"),children:[i.jsx("span",{className:"icon",children:"โ"})," Diamond"]}),i.jsxs("button",{onClick:()=>Y("hexagon"),children:[i.jsx("span",{className:"icon",children:"โฌก"})," Hexagon"]}),i.jsxs("button",{onClick:()=>Y("pentagon"),children:[i.jsx("span",{className:"icon",children:"โฌ"})," Pentagon"]}),i.jsxs("button",{onClick:()=>Y("oval"),children:[i.jsx("span",{className:"icon",children:"โฌฏ"})," Oval"]}),i.jsxs("button",{onClick:()=>Y("roundedRectangle"),children:[i.jsx("span",{className:"icon",children:"โข"})," Rounded Rectangle"]}),i.jsxs("button",{onClick:()=>Y("horizontalLine"),children:[i.jsx("span",{className:"icon",children:"โ"})," Horizontal Line"]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("label",{className:"toolbar-btn compact file-upload",style:{cursor:j?"not-allowed":"pointer"},children:[i.jsx("span",{className:"icon",children:"โ๏ธ"}),i.jsx("span",{className:"label",children:"Upload"}),i.jsx("input",{type:"file",accept:"image/*",onChange:U,disabled:j})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx(Ge,{onSelectIcon:m,theme:F,disabled:j}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>O(!0),disabled:j,title:"Add Sticker",children:[i.jsx("span",{className:"icon",children:"๐จ"}),i.jsx("span",{className:"label",children:"Stickers"})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>S(!0),disabled:j,title:"Add QR Code",children:[i.jsx("span",{className:"icon",children:"โฆ"}),i.jsx("span",{className:"label",children:"QR Code"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>M(!0),disabled:j,title:"Add Barcode",children:[i.jsx("span",{className:"icon",children:"โค"}),i.jsx("span",{className:"label",children:"Barcode"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx("div",{className:"toolbar-group embroidery-group",children:i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>Q(!0),disabled:j,title:"Add Embroidery Design",children:[i.jsx("span",{className:"icon",children:"๐งต"}),i.jsx("span",{className:"label",children:"Embroidery"})]})}),B&&i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact success",onClick:a,disabled:j,title:"Duplicate Element (Ctrl+D)",children:[i.jsx("span",{className:"icon",children:"โง"}),i.jsx("span",{className:"label",children:"Copy"})]}),i.jsxs("button",{className:"toolbar-btn compact danger",onClick:o,disabled:j,title:"Delete Element (Delete)",children:[i.jsx("span",{className:"icon",children:"๐๏ธ"}),i.jsx("span",{className:"label",children:"Delete"})]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:`toolbar-btn compact ${D?"active":""}`,onClick:h,title:"Toggle Grid",children:[i.jsx("span",{className:"icon",children:"โ"}),i.jsx("span",{className:"label",children:"Grid"})]}),i.jsxs("button",{className:`toolbar-btn compact ${p?"active":""}`,onClick:g,title:"Toggle Rulers",children:[i.jsx("span",{className:"icon",children:"๐"}),i.jsx("span",{className:"label",children:"Rulers"})]}),i.jsxs("button",{className:`toolbar-btn compact ${E?"active":""}`,onClick:l,title:"Snap to Grid",children:[i.jsx("span",{className:"icon",children:"๐งฒ"}),i.jsx("span",{className:"label",children:"Snap"})]})]})]}),i.jsx(_e,{isOpen:$,onClose:()=>S(!1),onAddQRCode:K,theme:F}),i.jsx(Ye,{isOpen:rt,onClose:()=>M(!1),onAddBarcode:u,theme:F}),i.jsx(Ve,{isOpen:ct,onClose:()=>O(!1),onAddSticker:I,theme:F,apiKey:J,apiEndpoint:T}),i.jsx(Je,{isOpen:lt,onClose:()=>Q(!1),onAddEmbroidery:W,theme:F,apiKey:J,apiEndpoint:T}),i.jsx(Ke,{isOpen:it,onClose:()=>P(!1),onAddText:H,theme:F})]})},ti=({selectedElement:f,onUpdate:o,onMoveLayer:a,availableFonts:d,theme:s})=>{const[h,g]=y.useState(!1);if(!f)return i.jsxs("div",{className:"properties-panel",children:[i.jsx("h3",{children:"Properties"}),i.jsx("p",{className:"no-selection",children:"Select an element to edit its properties"})]});const l=(F,j)=>{o(f.id,{[F]:j})},n=()=>{var F,j,J;return i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Text Content"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Content"}),i.jsx("textarea",{value:f.text||"",onChange:T=>l("text",T.target.value),rows:3,placeholder:"Enter your text here..."})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Family"}),i.jsx("select",{value:f.fontFamily||"Arial",onChange:T=>l("fontFamily",T.target.value),children:d.map(T=>i.jsx("option",{value:T,children:T},T))})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Font Size"}),i.jsx("input",{type:"number",value:f.fontSize||20,onChange:T=>l("fontSize",parseInt(T.target.value)),min:"8",max:"200"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Height"}),i.jsx("input",{type:"number",step:"0.1",value:f.lineHeight||1.2,onChange:T=>l("lineHeight",parseFloat(T.target.value)),min:"0.5",max:"3"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Weight"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:f.fontWeight==="lighter"||f.fontWeight==="300"?"active":"",onClick:()=>l("fontWeight","300"),title:"Light",children:"Light"}),i.jsx("button",{className:!f.fontWeight||f.fontWeight==="normal"||f.fontWeight==="400"?"active":"",onClick:()=>l("fontWeight","normal"),title:"Normal",children:"Normal"}),i.jsx("button",{className:f.fontWeight==="bold"||f.fontWeight==="700"?"active":"",onClick:()=>l("fontWeight","bold"),title:"Bold",children:i.jsx("strong",{children:"Bold"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Style"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:f.fontStyle==="italic"?"active":"",onClick:()=>l("fontStyle",f.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:i.jsx("em",{children:"I"})}),i.jsx("button",{className:(F=f.textDecoration)!=null&&F.includes("underline")?"active":"",onClick:()=>{const T=f.textDecoration||"",$=T.split(" ").filter(S=>S&&S!=="underline");T.includes("underline")||$.push("underline"),l("textDecoration",$.join(" ").trim())},title:"Underline",children:i.jsx("u",{children:"U"})}),i.jsx("button",{className:(j=f.textDecoration)!=null&&j.includes("overline")?"active":"",onClick:()=>{const T=f.textDecoration||"",$=T.split(" ").filter(S=>S&&S!=="overline");T.includes("overline")||$.push("overline"),l("textDecoration",$.join(" ").trim())},title:"Overline",children:i.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),i.jsx("button",{className:(J=f.textDecoration)!=null&&J.includes("line-through")?"active":"",onClick:()=>{const T=f.textDecoration||"",$=T.split(" ").filter(S=>S&&S!=="line-through");T.includes("line-through")||$.push("line-through"),l("textDecoration",$.join(" ").trim())},title:"Strikethrough",children:i.jsx("s",{children:"S"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Transform"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!f.textTransform||f.textTransform==="none"?"active":"",onClick:()=>l("textTransform","none"),title:"Normal",children:"Aa"}),i.jsx("button",{className:f.textTransform==="uppercase"?"active":"",onClick:()=>l("textTransform","uppercase"),title:"Uppercase",children:"AA"}),i.jsx("button",{className:f.textTransform==="lowercase"?"active":"",onClick:()=>l("textTransform","lowercase"),title:"Lowercase",children:"aa"}),i.jsx("button",{className:f.textTransform==="capitalize"?"active":"",onClick:()=>l("textTransform","capitalize"),title:"Capitalize",children:"Aa"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Alignment"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!f.textAlign||f.textAlign==="left"?"active":"",onClick:()=>l("textAlign","left"),title:"Left Align",children:"โฌ
"}),i.jsx("button",{className:f.textAlign==="center"?"active":"",onClick:()=>l("textAlign","center"),title:"Center Align",children:"โ"}),i.jsx("button",{className:f.textAlign==="right"?"active":"",onClick:()=>l("textAlign","right"),title:"Right Align",children:"โก"}),i.jsx("button",{className:f.textAlign==="justify"?"active":"",onClick:()=>l("textAlign","justify"),title:"Justify",children:"โก"})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Text Color"}),i.jsx("input",{type:"color",value:f.fill||"#000000",onChange:T=>l("fill",T.target.value)})]}),i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Background Color"}),i.jsxs("div",{className:"color-with-toggle",children:[i.jsx("input",{type:"color",value:f.backgroundColor||"#ffffff",onChange:T=>l("backgroundColor",T.target.value),disabled:!f.hasBackground}),i.jsx("button",{className:`toggle-btn ${f.hasBackground?"active":""}`,onClick:()=>l("hasBackground",!f.hasBackground),title:f.hasBackground?"Remove background":"Add background",children:f.hasBackground?"๐":"๐โ๐จ"})]})]})]})}),h&&i.jsxs(i.Fragment,{children:[i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Letter Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:f.letterSpacing||0,onChange:T=>l("letterSpacing",parseFloat(T.target.value)),min:"-5",max:"10"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Word Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:f.wordSpacing||0,onChange:T=>l("wordSpacing",parseFloat(T.target.value)),min:"-10",max:"20"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Shadow"}),i.jsxs("div",{className:"text-shadow-controls",children:[i.jsx("div",{className:"shadow-toggle",children:i.jsx("button",{className:`toggle-btn ${f.hasTextShadow?"active":""}`,onClick:()=>l("hasTextShadow",!f.hasTextShadow),children:f.hasTextShadow?"Remove Shadow":"Add Shadow"})}),f.hasTextShadow&&i.jsxs("div",{className:"shadow-properties",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"H-Offset"}),i.jsx("input",{type:"number",value:f.textShadowX||2,onChange:T=>l("textShadowX",parseInt(T.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"V-Offset"}),i.jsx("input",{type:"number",value:f.textShadowY||2,onChange:T=>l("textShadowY",parseInt(T.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Blur"}),i.jsx("input",{type:"number",value:f.textShadowBlur||4,onChange:T=>l("textShadowBlur",parseInt(T.target.value)),min:"0",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Shadow Color"}),i.jsx("input",{type:"color",value:f.textShadowColor||"#000000",onChange:T=>l("textShadowColor",T.target.value)})]})]})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:T=>l("stroke",T.target.value)})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||0,onChange:T=>l("strokeWidth",parseInt(T.target.value)),min:"0",max:"20"})]})]})}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:f.opacity||1,onChange:T=>l("opacity",parseFloat(T.target.value))}),i.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Variant"}),i.jsxs("select",{value:f.fontVariant||"normal",onChange:T=>l("fontVariant",T.target.value),children:[i.jsx("option",{value:"normal",children:"Normal"}),i.jsx("option",{value:"small-caps",children:"Small Caps"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Writing Mode"}),i.jsxs("select",{value:f.writingMode||"horizontal-tb",onChange:T=>l("writingMode",T.target.value),children:[i.jsx("option",{value:"horizontal-tb",children:"Horizontal"}),i.jsx("option",{value:"vertical-rl",children:"Vertical Right-to-Left"}),i.jsx("option",{value:"vertical-lr",children:"Vertical Left-to-Right"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Direction"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!f.direction||f.direction==="ltr"?"active":"",onClick:()=>l("direction","ltr"),title:"Left to Right",children:"LTR"}),i.jsx("button",{className:f.direction==="rtl"?"active":"",onClick:()=>l("direction","rtl"),title:"Right to Left",children:"RTL"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Background Padding"}),i.jsx("input",{type:"number",value:f.backgroundPadding||5,onChange:T=>l("backgroundPadding",parseInt(T.target.value)),min:"0",max:"50",disabled:!f.hasBackground})]})]})]})},C=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Shape Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Fill Color"}),i.jsx("input",{type:"color",value:f.fill||"#000000",onChange:F=>l("fill",F.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:F=>l("stroke",F.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||2,onChange:F=>l("strokeWidth",parseInt(F.target.value)),min:"0",max:"20"})]}),f.type==="star"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Star Points"}),i.jsx("input",{type:"number",value:f.numPoints||5,onChange:F=>l("numPoints",parseInt(F.target.value)),min:"3",max:"20"})]}),f.type==="roundedRectangle"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Corner Radius"}),i.jsx("input",{type:"number",value:f.cornerRadius||10,onChange:F=>l("cornerRadius",parseInt(F.target.value)),min:"0",max:"50"})]})]}),N=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Image Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:f.opacity||1,onChange:F=>l("opacity",parseFloat(F.target.value))}),i.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),h&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Border Radius"}),i.jsx("input",{type:"number",value:f.borderRadius||0,onChange:F=>l("borderRadius",parseInt(F.target.value)),min:"0",max:"50"})]})]}),D=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Position & Size"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"X"}),i.jsx("input",{type:"number",value:Math.round(f.x)||0,onChange:F=>l("x",parseInt(F.target.value))})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Y"}),i.jsx("input",{type:"number",value:Math.round(f.y)||0,onChange:F=>l("y",parseInt(F.target.value))})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Width"}),i.jsx("input",{type:"number",value:Math.round(f.width)||0,onChange:F=>l("width",parseInt(F.target.value)),min:"1"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Height"}),i.jsx("input",{type:"number",value:Math.round(f.height)||0,onChange:F=>l("height",parseInt(F.target.value)),min:"1"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Rotation"}),i.jsx("input",{type:"range",min:"-180",max:"180",value:f.rotation||0,onChange:F=>l("rotation",parseInt(F.target.value))}),i.jsxs("span",{children:[f.rotation||0,"ยฐ"]})]})]}),p=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Line Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||f.height||2,onChange:F=>{const j=parseInt(F.target.value);l("strokeWidth",j),l("height",j)},min:"1",max:"50"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Length"}),i.jsx("input",{type:"number",value:f.width||200,onChange:F=>l("width",parseInt(F.target.value)),min:"10",max:"1000"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Line Color"}),i.jsxs("div",{className:"color-input-group",children:[i.jsx("input",{type:"color",value:f.stroke||f.fill||"#000000",onChange:F=>{l("stroke",F.target.value),l("fill",F.target.value)}}),i.jsx("input",{type:"text",value:f.stroke||f.fill||"#000000",onChange:F=>{l("stroke",F.target.value),l("fill",F.target.value)},placeholder:"#000000"})]})]})]}),E=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Layer Controls"}),i.jsxs("div",{className:"button-group vertical",children:[i.jsx("button",{onClick:()=>a(f.id,"top"),children:"Bring to Front"}),i.jsx("button",{onClick:()=>a(f.id,"up"),children:"Bring Forward"}),i.jsx("button",{onClick:()=>a(f.id,"down"),children:"Send Backward"}),i.jsx("button",{onClick:()=>a(f.id,"bottom"),children:"Send to Back"})]})]}),B=["rectangle","circle","triangle","star","arrow","diamond","hexagon","pentagon","heart","oval","roundedRectangle"];return i.jsxs("div",{className:"properties-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Properties"}),i.jsx("span",{className:"element-type",children:f.type})]}),i.jsxs("div",{className:"panel-content",children:[f.type==="text"&&n(),B.includes(f.type)&&C(),f.type==="image"&&N(),f.type==="horizontalLine"&&p(),D(),E(),i.jsx("div",{className:"property-group",children:i.jsxs("button",{className:"toggle-advanced",onClick:()=>g(!h),children:[h?"Hide":"Show"," Advanced Options"]})})]})]})},ei=({elements:f,selectedElement:o,onSelectElement:a,onMoveLayer:d,onDeleteElement:s,theme:h})=>{const g=(n,C)=>{switch(n){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"?"}},l=n=>{var C,N;if(n.type==="text")return n.isIcon&&n.iconData?`Icon: ${n.iconData.name}`:((C=n.text)==null?void 0:C.substring(0,20))+(((N=n.text)==null?void 0:N.length)>20?"...":"")||"Text";if(n.type==="qrcode")return`QR Code: ${(n.data||"").substring(0,15)+((n.data||"").length>15?"...":"")}`;if(n.type==="barcode"){const D=n.format||"CODE128",p=n.data||"";return`Barcode (${D}): ${p.substring(0,10)+(p.length>10?"...":"")}`}return n.type==="sticker"?`Sticker: ${(n.name||"Untitled").substring(0,15)}`:n.type==="embroidery"?`Embroidery: ${(n.name||"Design").substring(0,15)}`:n.type.charAt(0).toUpperCase()+n.type.slice(1)};return i.jsxs("div",{className:"layers-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Layers"}),i.jsx("span",{className:"layer-count",children:f.length})]}),i.jsx("div",{className:"layers-list",children:f.length===0?i.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...f].reverse().map((n,C)=>i.jsxs("div",{className:`layer-item ${(o==null?void 0:o.id)===n.id?"selected":""}`,onClick:()=>a(n),children:[i.jsxs("div",{className:"layer-info",children:[i.jsx("span",{className:"layer-icon",children:g(n.type)}),i.jsx("span",{className:"layer-name",children:l(n)})]}),i.jsxs("div",{className:"layer-controls",children:[i.jsx("button",{className:"layer-btn",onClick:N=>{N.stopPropagation(),d(n.id,"up")},disabled:C===0,title:"Move Up",children:"โ"}),i.jsx("button",{className:"layer-btn",onClick:N=>{N.stopPropagation(),d(n.id,"down")},disabled:C===f.length-1,title:"Move Down",children:"โ"}),i.jsx("button",{className:"layer-btn delete",onClick:N=>{N.stopPropagation(),s(n.id)},title:"Delete",children:"ร"})]})]},n.id))})]})};class ii{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}async exportAllSections(o,a,d,s,h="png",g=!0){const l={};for(const n of a){const C=n.id||n.sectionName,N=o[C];if(!N||!N.elements||N.elements.length===0){console.log(`Skipping section ${C} - no elements`);continue}if(this.canvas.width=d,this.canvas.height=s,this.ctx.clearRect(0,0,d,s),g){const p=n.image||n.sectionImage;if(p)try{const E=await this.loadImage(p);await this.processImageColor(E,N.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,d,s)}catch(E){console.warn("Failed to load background image:",E)}}else this.ctx.clearRect(0,0,d,s);for(const p of N.elements)await this.drawElement(p);const D=this.canvas.toDataURL(`image/${h}`,h==="jpeg"?.9:void 0);l[C]={dataUrl:D,blob:await this.dataUrlToBlob(D)}}return l}async downloadExports(o,a="design"){const d=Object.keys(o);if(d.length===0){alert("No designs to export");return}if(d.length===1){const s=d[0],{blob:h}=o[s],g=URL.createObjectURL(h),l=document.createElement("a");l.href=g,l.download=`${a}-${s}.png`,document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(g)}else for(const s of d){const{blob:h}=o[s],g=URL.createObjectURL(h),l=document.createElement("a");l.href=g,l.download=`${a}-${s}.png`,document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(g),await new Promise(n=>setTimeout(n,100))}}async loadImage(o){return new Promise((a,d)=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>a(s),s.onerror=d,s.src=o})}getLuma(o,a,d){return(.2126*o+.7152*a+.0722*d)/255}async processImageColor(o,a){const d=document.createElement("canvas"),s=d.getContext("2d");d.width=o.width,d.height=o.height,s.clearRect(0,0,d.width,d.height),s.drawImage(o,0,0);const h=s.getImageData(0,0,d.width,d.height),g=h.data,l=this.hexToRgb(a);if(!l){console.warn("Invalid target color:",a);return}const{r:n,g:C,b:N}=l;for(let D=0;D<g.length;D+=4){if(g[D+3]===0)continue;const E=this.getLuma(g[D],g[D+1],g[D+2]);g[D]=Math.round(n*E),g[D+1]=Math.round(C*E),g[D+2]=Math.round(N*E)}return s.putImageData(h,0,0),this.processedImage=new Image,new Promise(D=>{this.processedImage.onload=()=>{D()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),D()},this.processedImage.src=d.toDataURL("image/png")})}async drawElement(o){this.ctx.save();const a=o.x+o.width/2,d=o.y+o.height/2;switch(this.ctx.translate(a,d),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
|
-
`),d=(o.fontSize||20)*1.2;a.forEach((s,h)=>{const g=h*d;o.stroke&&o.strokeWidth>0&&this.ctx.strokeText(s,0,g),this.ctx.fillText(s,0,g)})}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,d=o.width/2,s=o.height/2;this.ctx.beginPath(),this.ctx.arc(d,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,d=o.height/2,s=Math.min(o.width,o.height)/2,h=s*.4,g=o.numPoints||5;this.ctx.beginPath();for(let l=0;l<g*2;l++){const n=l%2===0?s:h,C=l*Math.PI/g,N=a+Math.cos(C)*n,D=d+Math.sin(C)*n;l===0?this.ctx.moveTo(N,D):this.ctx.lineTo(N,D)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawArrow(o){const a=o.width,d=o.height,s=a*.3;this.ctx.beginPath(),this.ctx.moveTo(a/2,0),this.ctx.lineTo(a,d*.6),this.ctx.lineTo(a-s,d*.6),this.ctx.lineTo(a-s,d),this.ctx.lineTo(s,d),this.ctx.lineTo(s,d*.6),this.ctx.lineTo(0,d*.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 d=document.createElement("canvas"),s=d.getContext("2d"),h=new Image;h.onload=()=>{d.width=h.width,d.height=h.height,s.drawImage(h,0,0),d.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,d=o.height/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(o.width,d),this.ctx.lineTo(a,o.height),this.ctx.lineTo(0,d),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHexagon(o){const a=o.width/2,d=o.height/2,s=Math.min(o.width,o.height)/2,h=6;this.ctx.beginPath();for(let g=0;g<h;g++){const l=g*2*Math.PI/h-Math.PI/2,n=a+s*Math.cos(l),C=d+s*Math.sin(l);g===0?this.ctx.moveTo(n,C):this.ctx.lineTo(n,C)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawPentagon(o){const a=o.width/2,d=o.height/2,s=Math.min(o.width,o.height)/2,h=5;this.ctx.beginPath();for(let g=0;g<h;g++){const l=g*2*Math.PI/h-Math.PI/2,n=a+s*Math.cos(l),C=d+s*Math.sin(l);g===0?this.ctx.moveTo(n,C):this.ctx.lineTo(n,C)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHeart(o){const a=o.width,d=o.height,s=0,h=0;this.ctx.beginPath();const g=d*.3;this.ctx.moveTo(s+a/2,h+g),this.ctx.bezierCurveTo(s+a/2,h,s,h,s,h+g),this.ctx.bezierCurveTo(s,h+(d+g)/2,s+a/2,h+(d+g)/2,s+a/2,h+d),this.ctx.bezierCurveTo(s+a/2,h+(d+g)/2,s+a,h+(d+g)/2,s+a,h+g),this.ctx.bezierCurveTo(s+a,h,s+a/2,h,s+a/2,h+g),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawOval(o){const a=o.width/2,d=o.height/2,s=o.width/2,h=o.height/2;this.ctx.beginPath(),this.ctx.ellipse(a,d,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,d,s,h){this.ctx.beginPath(),this.ctx.moveTo(o+h,a),this.ctx.lineTo(o+d-h,a),this.ctx.quadraticCurveTo(o+d,a,o+d,a+h),this.ctx.lineTo(o+d,a+s-h),this.ctx.quadraticCurveTo(o+d,a+s,o+d-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 d=o.src||o.image;a=await this.loadImage(d)}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 d=o.src||o.image;a=await this.loadImage(d)}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,d="image/png"){return new File([o],a,{type:d,lastModified:Date.now()})}async exportAllSectionsAsJSON(o,a,d,s,h="png"){const g=[],l=[];for(const C of a){const N=C.id||C.sectionName,D=o[N];if(!D||!D.elements||D.elements.length===0){console.log(`Skipping section ${N} - no elements`);continue}const p=await this.exportSectionAsBlob(D,C,d,s,h,!0);if(p){const B=await this.blobToFile(p,`${N}-full.${h}`,`image/${h}`);g.push({sectionName:N,sectionImage:B})}const E=await this.exportSectionAsBlob(D,C,d,s,h,!1);if(E){const B=await this.blobToFile(E,`${N}-print.${h}`,`image/${h}`);l.push({sectionName:N,sectionImage:B})}}const n={sections:o,canvasWidth:d,canvasHeight:s,format:h,timestamp:new Date().toISOString(),version:"1.0"};return{fullDesign:g,printReady:l,designFile:JSON.stringify(n)}}async exportSectionAsBlob(o,a,d,s,h="png",g=!0){try{if(this.canvas.width=d,this.canvas.height=s,this.ctx.clearRect(0,0,d,s),g){const l=a.image||a.sectionImage;if(l)try{const n=await this.loadImage(l);await this.processImageColor(n,o.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,d,s)}catch(n){console.warn("Failed to load background image:",n)}}else this.ctx.clearRect(0,0,d,s);for(const l of o.elements)await this.drawElement(l);return new Promise(l=>{this.canvas.toBlob(l,`image/${h}`,h==="jpeg"?.9:void 0)})}catch(l){return console.error("Error exporting section as blob:",l),null}}async exportCurrentSectionAsJSON(o,a="png"){var h,g,l,n,C;const d={[((h=o.activeSection)==null?void 0:h.sectionName)||"main"]:o},s=[{id:((g=o.activeSection)==null?void 0:g.sectionName)||"main",sectionName:((l=o.activeSection)==null?void 0:l.sectionName)||"main",image:(n=o.activeSection)==null?void 0:n.sectionImage,sectionImage:(C=o.activeSection)==null?void 0:C.sectionImage}];return await this.exportAllSectionsAsJSON(d,s,o.canvasWidth,o.canvasHeight,a)}}class oi{constructor(o="localStorage"){this.storage=o==="sessionStorage"?sessionStorage:localStorage,this.STORAGE_PREFIX="mypixia_canvas_",this.DESIGNS_LIST_KEY="mypixia_saved_designs"}saveDesign(o,a){var d;try{const s=this.generateDesignId(o),h=new Date().toISOString(),g={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:((d=a.elements)==null?void 0:d.length)||0,lastModified:h,thumbnail:a.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+s,JSON.stringify(g)),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 g=this.getAllDesigns().find(l=>l.name===o);if(!g)return{success:!1,error:"Design not found"};a=g.id}const d=this.storage.getItem(this.STORAGE_PREFIX+a);return d?{success:!0,data:JSON.parse(d)}:{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 d=this.getAllDesigns().filter(s=>s.id!==o);return this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(d)),{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 d=a.data,s=JSON.stringify(d,null,2),h=new Blob([s],{type:"application/json"}),g=URL.createObjectURL(h),l=document.createElement("a");return l.href=g,l.download=`${d.name}_${d.id}.json`,document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(g),{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 d=new FileReader;d.onload=s=>{try{const h=JSON.parse(s.target.result);if(!this.validateDesignData(h)){a({success:!1,error:"Invalid design file format"});return}const g=this.generateDesignId(h.name+"_imported");h.id=g,h.name+="_imported",h.timestamp=new Date().toISOString(),h.metadata.lastModified=h.timestamp,this.storage.setItem(this.STORAGE_PREFIX+g,JSON.stringify(h)),this.updateDesignsList(g,h.name,h.timestamp),a({success:!0,data:h,message:"Design imported successfully"})}catch{a({success:!1,error:"Failed to parse design file"})}},d.readAsText(o)}catch(d){a({success:!1,error:d.message})}})}autoSave(o,a){const d=this.STORAGE_PREFIX+"autosave_"+o;try{const s={timestamp:new Date().toISOString(),canvasData:a};return this.storage.setItem(d,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 d=this.storage.getItem(a);return d?JSON.parse(d):null}catch(d){return console.error("Failed to load auto-save:",d),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(d=>{const s=this.storage.getItem(this.STORAGE_PREFIX+d.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(),d=Math.random().toString(36).substring(2,8);return`design_${a}_${d}`}updateDesignsList(o,a,d){const s=this.getAllDesigns(),h=s.findIndex(l=>l.id===o),g={id:o,name:a,timestamp:d,lastModified:d};h>=0?s[h]=g:s.push(g),s.sort((l,n)=>new Date(n.timestamp)-new Date(l.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,d=["Bytes","KB","MB","GB"],s=Math.floor(Math.log(o)/Math.log(a));return parseFloat((o/Math.pow(a,s)).toFixed(2))+" "+d[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"},canvasId:d=null,readOnly:s=!1,product:h={name:"Premium Crew Neck T-Shirt",category:"Tshirts",description:"Men's crew neck t-shirts",plainColor:"Y",mainImage:"https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.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"}]}}=f,[g,l]=y.useState([]),[n,C]=y.useState(null),[N,D]=y.useState(!1),[p,E]=y.useState(!1),[B,F]=y.useState(!1),[j,J]=y.useState({x:0,y:0}),[T,$]=y.useState(null),[S,rt]=y.useState(800),[M,ct]=y.useState(600),[O,lt]=y.useState(1),[Q,it]=y.useState(h.colorSettings[0]),[P,at]=y.useState(!1),[X,st]=y.useState(!0),[_,U]=y.useState(!0),[m,K]=y.useState(h.sections[0]),[u,I]=y.useState(!1),[W,H]=y.useState({}),[G,Z]=y.useState([]),[q,Y]=y.useState(-1),[L]=y.useState(new oi("localStorage")),[et,Ft]=y.useState(!0),[zt,Bt]=y.useState(null),ht=y.useRef(null),ae=y.useRef(null),ft=y.useRef(null),gt=y.useRef(null),Mt=y.useRef(null),At=y.useRef(new ii),mt=y.useRef(!1),wt=y.useRef(null),ot=y.useCallback(()=>{const e={elements:JSON.parse(JSON.stringify(g)),selectedElement:n?{...n}:null,timestamp:Date.now()},t=G.slice(0,q+1);t.push(e),t.length>50?t.shift():Y(q+1),Z(t)},[g,n,G,q]),ut=y.useCallback(()=>({elements:g,canvasWidth:S,canvasHeight:M,selectedColor:Q,activeSection:m,product:h,sectionDesigns:W,zoomLevel:O,showGrid:P,snapToGrid:_,selectedElement:n?{...n}:null,canvasRef:ht}),[g,S,M,Q,m,h,W,O,P,_,n]);y.useCallback((e,t)=>{Bt(new Date().toISOString()),t&&L.clearAutoSave(t),console.log("Design saved:",e,t)},[L]),y.useCallback((e,t)=>{var r;try{l(e.elements||[]),rt(e.canvasWidth||800),ct(e.canvasHeight||600),it(e.selectedColor||h.colorSettings[0]),lt(e.zoomLevel||1),at(e.showGrid||!1),U(e.snapToGrid||!0),C(null),e.sectionDesigns&&H(e.sectionDesigns),e.activeSection&&K(e.activeSection),Z([]),Y(-1),setTimeout(()=>{ot()},100),Bt(((r=t.metadata)==null?void 0:r.lastModified)||new Date().toISOString()),console.log("Design loaded successfully:",t.name)}catch(c){console.error("Error loading design:",c)}},[h.colorSettings,ot]);const Wt=y.useCallback(()=>{if(!et||g.length===0)return;const e=`autosave_${(m==null?void 0:m.sectionName)||"main"}_${Date.now()}`,t=ut();L.autoSave(e,t)&&console.log("Auto-saved at:",new Date().toLocaleTimeString())},[et,g.length,m==null?void 0:m.sectionName,ut,L]);y.useEffect(()=>(et&&g.length>0&&(wt.current&&clearTimeout(wt.current),wt.current=setTimeout(()=>{Wt()},3e4)),()=>{wt.current&&clearTimeout(wt.current)}),[g,Q,m,et,Wt]),y.useEffect(()=>{const t=setTimeout(()=>{if(g.length===0&&G.length<=1){const c="Arial",x="Change me",b=document.createElement("canvas").getContext("2d");b.font=`24px ${c}`;const k=b.measureText(x).width,A={id:nt(),type:"text",x:S/2-k/2,y:M/2-24/2,width:k,height:24,text:x,fontSize:24,fontFamily:c,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};l([A]),C(A),setTimeout(()=>{ot()},100)}},300);return()=>clearTimeout(t)},[]);const It=y.useCallback((e="png",t=!0)=>{const r=ut();return h.sections,At.current.exportAllSections({[(m==null?void 0:m.sectionName)||"main"]:r},[{id:(m==null?void 0:m.sectionName)||"main",sectionName:(m==null?void 0:m.sectionName)||"main",image:m==null?void 0:m.sectionImage,sectionImage:m==null?void 0:m.sectionImage}],S,M,e,t)},[ut,h.sections,m,S,M]),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 e=()=>I(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),y.useEffect(()=>{const e=document.createElement("canvas");e.width=S,e.height=M,Mt.current=e},[S,M]),y.useEffect(()=>{G.length===0&&ot()},[]);const Tt=(e,t,r,c,x,w)=>{e.beginPath(),e.moveTo(t+w,r),e.lineTo(t+c-w,r),e.quadraticCurveTo(t+c,r,t+c,r+w),e.lineTo(t+c,r+x-w),e.quadraticCurveTo(t+c,r+x,t+c-w,r+x),e.lineTo(t+w,r+x),e.quadraticCurveTo(t,r+x,t,r+x-w),e.lineTo(t,r+w),e.quadraticCurveTo(t,r,t+w,r),e.closePath()},Lt=(e,t)=>{if(!t.isIcon)return{x:t.x,y:t.y,width:t.width,height:t.height,cx:t.x+t.width/2,cy:t.y+t.height/2};e.save(),e.font=`${t.fontStyle||""} ${t.fontWeight||""} ${t.fontSize}px ${t.fontFamily}`,e.textBaseline="alphabetic",e.textAlign="left";const r=e.measureText(t.text),c=r.actualBoundingBoxAscent??t.fontSize*.8,x=r.actualBoundingBoxDescent??t.fontSize*.2,w=r.actualBoundingBoxLeft??0,b=r.actualBoundingBoxRight??r.width,v=w+b,k=c+x,A=t.x,R=t.y,z=A-v/2-w,tt=R-k/2-c;return e.restore(),{x:z,y:tt,width:v,height:k,cx:A,cy:R}},le=(e,t)=>{if(!t)return;const r=8,c=8,x=4,w=30,b=Lt(e,t),v=t.isIcon?Math.max(r,12):r,k={x:-b.width/2-v,y:-b.height/2-v,w:b.width+v*2,h:b.height+v*2};e.save(),e.translate(b.cx,b.cy),t.rotation&&e.rotate(t.rotation*Math.PI/180);const A=e.createLinearGradient(k.x,k.y,k.x+k.w,k.y+k.h);A.addColorStop(0,"#3b82f6"),A.addColorStop(.5,"#1d4ed8"),A.addColorStop(1,"#3b82f6"),e.strokeStyle="rgba(59,130,246,.3)",e.lineWidth=3,Tt(e,k.x-1,k.y-1,k.w+2,k.h+2,x+1),e.stroke(),e.strokeStyle=A,e.lineWidth=2,e.setLineDash([8,4]),Tt(e,k.x,k.y,k.w,k.h,x),e.stroke(),e.lineDashOffset=-(Date.now()/50)%12,e.strokeStyle="#ffffff",e.lineWidth=1,e.setLineDash([4,8]),Tt(e,k.x,k.y,k.w,k.h,x),e.stroke(),e.setLineDash([]),e.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(tt=>{e.fillStyle="rgba(0,0,0,.2)",e.fillRect(tt.x-c/2+1,tt.y-c/2+1,c,c),e.fillStyle="#ffffff",e.fillRect(tt.x-c/2,tt.y-c/2,c,c),e.strokeStyle="#3b82f6",e.lineWidth=1,e.strokeRect(tt.x-c/2,tt.y-c/2,c,c)});const R=0,z=k.y-w;e.strokeStyle="#3b82f6",e.lineWidth=1,e.setLineDash([2,2]),e.beginPath(),e.moveTo(R,z+12),e.lineTo(R,k.y),e.stroke(),e.setLineDash([]),e.beginPath(),e.arc(R,z,12,0,2*Math.PI),e.fillStyle="#f59e0b",e.fill(),e.strokeStyle="#ffffff",e.lineWidth=2,e.stroke(),e.strokeStyle="#ffffff",e.lineWidth=2,e.beginPath(),e.arc(R,z,6,-Math.PI/2,Math.PI,!1),e.stroke(),e.beginPath(),e.moveTo(R-6,z),e.lineTo(R-3,z-3),e.lineTo(R-3,z+3),e.closePath(),e.fillStyle="#ffffff",e.fill(),e.restore()},ne=(e,t)=>{if(!t)return[];const r=Lt(e,t),c=t.isIcon?Math.max(8,12):8,x=8,w=30,b=(t.rotation||0)*Math.PI/180,v={x:-r.width/2-c,y:-r.height/2-c,w:r.width+c*2,h:r.height+c*2},k=[{x:v.x,y:v.y,type:"nw-resize"},{x:v.x+v.w,y:v.y,type:"ne-resize"},{x:v.x+v.w,y:v.y+v.h,type:"se-resize"},{x:v.x,y:v.y+v.h,type:"sw-resize"},{x:0,y:v.y-w,type:"rotate"}],A=Math.cos(b),R=Math.sin(b);return k.map(z=>({x:r.cx+(z.x*A-z.y*R),y:r.cy+(z.x*R+z.y*A),type:z.type,size:z.type==="rotate"?24:x}))},Pt=(e,t,r)=>{if(!r)return null;const c=ht.current;if(!c)return null;const x=c.getContext("2d"),w=ne(x,r);for(const b of w){const v=e-b.x,k=t-b.y;if(Math.sqrt(v*v+k*k)<=b.size/2)return b.type}return null},bt=y.useCallback(()=>{if(q>0){const e=G[q-1];l(e.elements),C(e.selectedElement),Y(q-1)}},[G,q]),pt=y.useCallback(()=>{if(q<G.length-1){const e=G[q+1];l(e.elements),C(e.selectedElement),Y(q+1)}},[G,q]),xt=e=>_?Math.round(e/Ct)*Ct:e;y.useEffect(()=>{if(m!=null&&m.sectionImage){ft.current=null,gt.current=null;const e=ht.current;e&&(e.getContext("2d").clearRect(0,0,S,M),console.log("cleared canvas"));const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{ft.current=t,jt(t,Q)},t.onerror=()=>{console.error("Failed to load background image:",m.sectionImage),V()},t.src=m.sectionImage}else ft.current=null,gt.current=null,V()},[m==null?void 0:m.sectionImage]),y.useEffect(()=>{const e=t=>{const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))){if((t.key==="Delete"||t.key==="Backspace")&&n&&!s){t.preventDefault();const x=n;l(w=>w.filter(b=>b.id!==x.id)),C(null),ot()}if(t.ctrlKey||t.metaKey)switch(t.key){case"z":t.shiftKey?(t.preventDefault(),pt()):(t.preventDefault(),bt());break;case"y":t.preventDefault(),pt();break}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[n,s,bt,pt,ot]);const ce=e=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},nt=()=>`element_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,de=e=>{e.strokeStyle="#e0e0e0",e.lineWidth=1,e.setLineDash([1,1]);for(let t=0;t<=S;t+=Ct)e.beginPath(),e.moveTo(t,0),e.lineTo(t,M),e.stroke();for(let t=0;t<=M;t+=Ct)e.beginPath(),e.moveTo(0,t),e.lineTo(S,t),e.stroke();e.setLineDash([])},fe=(e,t)=>{e.save();const r=t.x+t.width/2,c=t.y+t.height/2;switch(e.translate(r,c),t.rotation&&e.rotate(t.rotation*Math.PI/180),e.translate(-t.width/2,-t.height/2),t.type){case"text":xe(e,t);break;case"rectangle":ye(e,t);break;case"circle":ue(e,t);break;case"triangle":me(e,t);break;case"star":pe(e,t);break;case"arrow":we(e,t);break;case"diamond":be(e,t);break;case"hexagon":ke(e,t);break;case"pentagon":ve(e,t);break;case"heart":Se(e,t);break;case"oval":Fe(e,t);break;case"roundedRectangle":Ce(e,t);break;case"image":je(e,t);break;case"qrcode":ge(e,t);break;case"barcode":he(e,t);break;case"sticker":Ne(e,t);break;case"horizontalLine":Te(e,t);break;case"embroidery":Ae(e,t);break}e.restore()},he=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{l(c=>c.map(x=>x.id===t.id?{...x,imageObject:r,imageLoading:!1}:x))},r.onerror=()=>{l(c=>c.map(x=>x.id===t.id?{...x,imageLoading:!1}:x))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading...",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading...",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No Barcode",t.width/2,t.height/2))},ge=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{l(c=>c.map(x=>x.id===t.id?{...x,imageObject:r,imageLoading:!1}:x))},r.onerror=()=>{l(c=>c.map(x=>x.id===t.id?{...x,imageLoading:!1}:x))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No QR Data",t.width/2,t.height/2))},xe=(e,t)=>{e.save();let r=t.text||"Text";if(t.textTransform)switch(t.textTransform){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase();break;case"capitalize":r=r.replace(/\b\w/g,v=>v.toUpperCase());break}e.font=`${t.fontStyle||"normal"} ${t.fontWeight||"normal"} ${t.fontSize||20}px ${t.fontFamily||"Arial"}`,e.fillStyle=t.fill||"#000000",e.textAlign=t.textAlign||"left",e.textBaseline="top",t.opacity!==void 0&&(e.globalAlpha=t.opacity),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth);const c=r.split(`
|
|
991
|
-
`),x=(t.fontSize||20)*(t.lineHeight||1.2),w=Math.max(...c.map(v=>e.measureText(v).width)),b=c.length*x;if(t.backgroundColor&&t.backgroundColor!=="transparent"){e.fillStyle=t.backgroundColor;const v=t.backgroundPadding||4;e.fillRect(-v,-v,w+v*2,b+v*2),e.fillStyle=t.fill||"#000000"}c.forEach((v,k)=>{const A=k*x,R=e.measureText(v).width;t.stroke&&t.strokeWidth>0&&e.strokeText(v,0,A),e.fillText(v,0,A);const z=t.fontSize||20,tt=t.decorationColor||t.fill||"#000000",dt=Math.max(1,z/20);if(e.strokeStyle=tt,e.lineWidth=dt,t.textDecoration==="underline"||t.underline){const yt=A+z+2;e.beginPath(),e.moveTo(0,yt),e.lineTo(R,yt),e.stroke()}if(t.textDecoration==="overline"||t.overline){const yt=A-2;e.beginPath(),e.moveTo(0,yt),e.lineTo(R,yt),e.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const yt=A+z/2;e.beginPath(),e.moveTo(0,yt),e.lineTo(R,yt),e.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(Le=>{switch(Le.trim()){case"underline":const Vt=A+z+2;e.beginPath(),e.moveTo(0,Vt),e.lineTo(R,Vt),e.stroke();break;case"overline":const Xt=A-2;e.beginPath(),e.moveTo(0,Xt),e.lineTo(R,Xt),e.stroke();break;case"line-through":const Jt=A+z/2;e.beginPath(),e.moveTo(0,Jt),e.lineTo(R,Jt),e.stroke();break}})}),e.restore()},ye=(e,t)=>{t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fillRect(0,0,t.width,t.height)),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.strokeRect(0,0,t.width,t.height))},ue=(e,t)=>{const r=Math.min(t.width,t.height)/2,c=t.width/2,x=t.height/2;e.beginPath(),e.arc(c,x,r,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},me=(e,t)=>{const r=t.width/2;t.height/2,e.beginPath(),e.moveTo(r,0),e.lineTo(0,t.height),e.lineTo(t.width,t.height),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},pe=(e,t)=>{const r=t.width/2,c=t.height/2,x=Math.min(t.width,t.height)/2,w=x*.4,b=t.numPoints||5;e.beginPath();for(let v=0;v<b*2;v++){const k=v%2===0?x:w,A=v*Math.PI/b,R=r+Math.cos(A)*k,z=c+Math.sin(A)*k;v===0?e.moveTo(R,z):e.lineTo(R,z)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},we=(e,t)=>{const r=t.width,c=t.height,x=r*.3;e.beginPath(),e.moveTo(r/2,0),e.lineTo(r,c*.6),e.lineTo(r-x,c*.6),e.lineTo(r-x,c),e.lineTo(x,c),e.lineTo(x,c*.6),e.lineTo(0,c*.6),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},be=(e,t)=>{const r=t.width/2,c=t.height/2;e.beginPath(),e.moveTo(r,0),e.lineTo(t.width,c),e.lineTo(r,t.height),e.lineTo(0,c),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ke=(e,t)=>{const r=t.width/2,c=t.height/2,x=Math.min(t.width,t.height)/2,w=6;e.beginPath();for(let b=0;b<w;b++){const v=b*2*Math.PI/w-Math.PI/2,k=r+x*Math.cos(v),A=c+x*Math.sin(v);b===0?e.moveTo(k,A):e.lineTo(k,A)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ve=(e,t)=>{const r=t.width/2,c=t.height/2,x=Math.min(t.width,t.height)/2,w=5;e.beginPath();for(let b=0;b<w;b++){const v=b*2*Math.PI/w-Math.PI/2,k=r+x*Math.cos(v),A=c+x*Math.sin(v);b===0?e.moveTo(k,A):e.lineTo(k,A)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Se=(e,t)=>{const r=t.width,c=t.height,x=0,w=0;e.beginPath();const b=c*.3;e.moveTo(x+r/2,w+b),e.bezierCurveTo(x+r/2,w,x,w,x,w+b),e.bezierCurveTo(x,w+(c+b)/2,x+r/2,w+(c+b)/2,x+r/2,w+c),e.bezierCurveTo(x+r/2,w+(c+b)/2,x+r,w+(c+b)/2,x+r,w+b),e.bezierCurveTo(x+r,w,x+r/2,w,x+r/2,w+b),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Fe=(e,t)=>{const r=t.width/2,c=t.height/2,x=t.width/2,w=t.height/2;e.beginPath(),e.ellipse(r,c,x,w,0,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ce=(e,t)=>{const r=Math.min(t.width,t.height)*.1;Tt(e,0,0,t.width,t.height,r),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Te=(e,t)=>{e.save(),t.opacity!==void 0&&(e.globalAlpha=t.opacity),e.strokeStyle=t.stroke||t.fill||"#000000",e.lineWidth=t.strokeWidth||t.height||2,e.lineCap="round",e.beginPath(),e.moveTo(0,t.height/2),e.lineTo(t.width,t.height/2),e.stroke(),e.restore()},je=(e,t)=>{if(t.imageData)try{t.imageData.complete&&t.imageData.naturalHeight!==0?e.drawImage(t.imageData,0,0,t.width,t.height):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.lineWidth=1,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading...",t.width/2,t.height/2))}catch(r){console.error("Error drawing image:",r),e.fillStyle="#ffebee",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#f44336",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#f44336",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Error loading image",t.width/2,t.height/2)}},Ne=(e,t)=>{if(t.src&&!t.imageLoading&&!t.loadedImage){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{t.loadedImage=r,t.imageLoading=!1,V()},r.onerror=()=>{console.error("Failed to load sticker:",t.src),t.imageLoading=!1,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.fillText("Failed to load",t.width/2,t.height/2)},r.src=t.src}else t.loadedImage?e.drawImage(t.loadedImage,0,0,t.width,t.height):t.imageLoading&&(e.fillStyle="#f8f9fa",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#dee2e6",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#6c757d",e.font="12px Arial",e.textAlign="center",e.fillText("Loading...",t.width/2,t.height/2))},Ae=(e,t)=>{if(t.imageObject)e.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,V()},r.onerror=()=>{t.imageLoading=!1,console.error("Failed to load embroidery image:",t.src),Rt(e,t)},r.src=t.src,Rt(e,t,"Loading...")}else Rt(e,t)},Rt=(e,t,r="Embroidery")=>{e.fillStyle="#f9f9f9",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ddd",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#999",e.font="24px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("๐งต",t.width/2,t.height/2-10),e.fillStyle="#666",e.font="12px Arial",e.fillText(r,t.width/2,t.height/2+15)},Ut=(e,t,r)=>{if(!r)return!1;const c=r.x+r.width/2,x=r.y+r.height/2,w=e-c,b=t-x,v=-(r.rotation||0)*Math.PI/180,k=Math.cos(v),A=Math.sin(v),R=w*k-b*A,z=w*A+b*k,tt=r.width/2,dt=r.height/2;return R>=-tt&&R<=tt&&z>=-dt&&z<=dt},Ie=y.useCallback(()=>{(N||p||B)&&ot(),D(!1),E(!1),F(!1),$(null);const e=ht.current;e&&(e.style.cursor="default")},[N,p,B,ot]);y.useEffect(()=>{const e=t=>{if(s)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(),bt()):(t.key==="z"&&t.shiftKey||t.key==="y")&&(t.preventDefault(),pt())),(t.key==="Delete"||t.key==="Backspace")&&n&&(Dt(n.id),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="d"&&n&&(Qt(n.id),t.preventDefault()),n&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))){t.preventDefault();const x=t.shiftKey?10:1;let w={};switch(t.key){case"ArrowUp":w.y=n.y-x;break;case"ArrowDown":w.y=n.y+x;break;case"ArrowLeft":w.x=n.x-x;break;case"ArrowRight":w.x=n.x+x;break}Ot(n.id,w),ot()}};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[n,bt,pt,s]);const Re=(e,t={})=>{const r={id:nt(),type:e,x:50,y:50,width:100,height:100,fill:"#000000",stroke:"#000000",strokeWidth:0,rotation:0,...t};switch(e){case"text":r.id=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)||S/2-((t==null?void 0:t.width)||100)/2,r.y=(t==null?void 0:t.y)||M/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)||S/2-((t==null?void 0:t.width)||200)/2,r.y=(t==null?void 0:t.y)||M/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=S/2-100,r.y=M/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: ${e}`);return}l(c=>[...c,r]),C(r),ot()},Ot=(e,t)=>{l(r=>r.map(c=>c.id===e?{...c,...t}:c)),n&&n.id===e&&C(r=>({...r,...t}))},Dt=y.useCallback(()=>{n&&(l(e=>e.filter(t=>t.id!==n.id)),C(null),ot())},[n,ot]),Qt=e=>{const t=g.find(r=>r.id===e);if(t){const r={...t,id:nt(),x:t.x+20,y:t.y+20};l(c=>[...c,r]),C(r),ot()}},$t=(e,t)=>{const r=g.findIndex(w=>w.id===e);if(r===-1)return;const c=[...g],x=c[r];t==="up"&&r<c.length-1?(c[r]=c[r+1],c[r+1]=x):t==="down"&&r>0?(c[r]=c[r-1],c[r-1]=x):t==="top"?(c.splice(r,1),c.push(x)):t==="bottom"&&(c.splice(r,1),c.unshift(x)),l(c),ot()};y.useCallback(()=>{m&&H(e=>({...e,[m.sectionName]:{elements:[...g],selectedColor:Q}}))},[m,g,Q]);const[,De]=y.useReducer(e=>e+1,0);setTimeout(()=>{De()},20),y.useImperativeHandle(o,()=>({handleSectionChange:Ht,exportPrintReady:async(e="png")=>await It(e,!1),exportFullDesign:async(e="png")=>await It(e,!0),exportDesign:It,getCanvasData:()=>ut(),exportAllDesignsAsJSON:async(e="png")=>{try{const t=ut();return await At.current.exportAllSectionsAsJSON(t.sectionDesigns||{[(m==null?void 0:m.sectionName)||"main"]:t},h.sections||[{id:(m==null?void 0:m.sectionName)||"main",sectionName:(m==null?void 0:m.sectionName)||"main",image:m==null?void 0:m.sectionImage,sectionImage:m==null?void 0:m.sectionImage}],S,M,e)}catch(t){throw console.error("Export as JSON failed:",t),t}},exportCurrentSectionAsJSON:async(e="png")=>{try{const t=ut();return await At.current.exportCurrentSectionAsJSON(t,e)}catch(t){throw console.error("Export current section as JSON failed:",t),t}}})),y.useEffect(()=>{ft.current=null,gt.current=null;const e=ht.current;if(e&&e.getContext("2d").clearRect(0,0,S,M),m!=null&&m.sectionImage){const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{t.src===m.sectionImage&&(ft.current=t,jt(t,Q))},t.onerror=()=>{console.error("Failed to load background image:",m.sectionImage),V()},t.src=m.sectionImage}else V()},[m==null?void 0:m.sectionImage]);const V=y.useCallback(()=>{const e=ht.current;if(!e)return;const t=e.getContext("2d");t.clearRect(0,0,S,M),gt.current&&t.drawImage(gt.current,0,0,S,M),P&&de(t),g.forEach(r=>{fe(t,r)}),n&&le(t,n),requestAnimationFrame(V)},[g,n,S,M,P,gt]),Ee=y.useCallback(e=>{if(s)return;const r=ht.current.getBoundingClientRect(),c=(e.clientX-r.left)/O,x=(e.clientY-r.top)/O;if(J({x:c,y:x}),n){const b=Pt(c,x,n);if(b){if(b==="rotate"){F(!0);const v=n.x+n.width/2,k=n.y+n.height/2,A=Math.atan2(x-k,c-v)*180/Math.PI;J({x:c,y:x,initialAngle:A,initialRotation:n.rotation||0})}else E(!0),$(b),J({x:c,y:x,initialWidth:n.width,initialHeight:n.height,initialX:n.x,initialY:n.y});return}}let w=null;for(let b=g.length-1;b>=0;b--)if(Ut(c,x,g[b])){w=g[b];break}w?(C(w),D(!0),J({x:c,y:x,offsetX:c-w.x,offsetY:x-w.y})):C(null),V()},[s,O,n,g,V]),ze=y.useCallback(e=>{if(s)return;const t=ht.current,r=t.getBoundingClientRect(),c=(e.clientX-r.left)/O,x=(e.clientY-r.top)/O;if(n&&!N&&!p&&!B){const w=Pt(c,x,n);w?w==="rotate"?t.style.cursor="grab":t.style.cursor=w:Ut(c,x,n)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=N?"grabbing":"default";if(B&&n){const w=n.x+n.width/2,b=n.y+n.height/2,k=Math.atan2(x-b,c-w)*180/Math.PI-j.initialAngle;let A=j.initialRotation+k;e.shiftKey&&(A=Math.round(A/15)*15),A=(A%360+360)%360,l(R=>R.map(z=>z.id===n.id?{...z,rotation:A}:z)),C(R=>({...R,rotation:A})),V();return}if(p&&n&&T){const w=c-j.x,b=x-j.y;let v=j.initialWidth,k=j.initialHeight,A=j.initialX,R=j.initialY;switch(T){case"se-resize":v=Math.max(20,j.initialWidth+w),k=Math.max(20,j.initialHeight+b);break;case"sw-resize":v=Math.max(20,j.initialWidth-w),k=Math.max(20,j.initialHeight+b),A=j.initialX+(j.initialWidth-v);break;case"ne-resize":v=Math.max(20,j.initialWidth+w),k=Math.max(20,j.initialHeight-b),R=j.initialY+(j.initialHeight-k);break;case"nw-resize":v=Math.max(20,j.initialWidth-w),k=Math.max(20,j.initialHeight-b),A=j.initialX+(j.initialWidth-v),R=j.initialY+(j.initialHeight-k);break}if(e.shiftKey&&n.type!=="text"){const tt=j.initialWidth/j.initialHeight;T.includes("e"),k=v/tt,T.includes("n")&&(R=j.initialY+(j.initialHeight-k))}_&&(A=xt(A),R=xt(R),v=xt(v),k=xt(k));const z={...n,x:A,y:R,width:v,height:k};l(tt=>tt.map(dt=>dt.id===n.id?z:dt)),C(z),V();return}if(N&&n){let w=c-j.offsetX,b=x-j.offsetY;_&&(w=xt(w),b=xt(b)),w=Math.max(0,Math.min(S-n.width,w)),b=Math.max(0,Math.min(M-n.height,b));const v={...n,x:w,y:b};l(k=>k.map(A=>A.id===n.id?v:A)),C(v),V()}},[s,O,n,N,p,B,T,j,_,S,M,g,V]),Ht=y.useCallback(e=>{m&&H(r=>({...r,[m.sectionName]:{elements:g.map(c=>c.type==="image"?{...c,imageData:c.imageData,src:c.src}:c),selectedColor:Q}}));const t=W[e.sectionName];if(t){const r=t.elements.map(c=>{if(c.type==="image"&&c.src&&!c.imageData){const x=new Image;return x.onload=()=>{l(w=>w.map(b=>b.id===c.id?{...b,imageData:x}:b)),V()},x.src=c.src,{...c,imageData:x}}return c});l(r),it(t.selectedColor||Q)}else l([]);K(e),C(null)},[m,g,Q,W,V]),Be=y.useCallback(e=>{if(e&&e.type.startsWith("image/")){const t=new FileReader;t.onload=r=>{const c=new Image;c.onload=()=>{const x={id:nt(),type:"image",x:xt(S/2-100),y:xt(M/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},w=c.width/c.height;x.width/x.height!==w&&(x.width/w<=200?x.height=x.width/w:x.width=x.height*w),l(b=>[...b,x]),C(x),ot()},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(e)}else alert("Please select a valid image file.")},[S,M,xt,nt,ot]);y.useEffect(()=>{if(m!=null&&m.sectionImage){console.log("Loading new section image:",m.sectionImage),mt.current=!0,ft.current=null,gt.current=null;const e=new Image;e.crossOrigin="anonymous",e.onload=()=>{console.log("Background image loaded successfully"),ft.current=e,jt(e,Q)},e.onerror=()=>{console.error("Failed to load background image:",m.sectionImage),mt.current=!1,V()},e.src=m.sectionImage}else ft.current=null,gt.current=null,mt.current=!1,V()},[m==null?void 0:m.sectionImage,Q]);const Gt=y.useCallback(Me(()=>{V()},16),[V]);y.useEffect(()=>{mt.current||Gt()},[g,n,P,Gt]);function Me(e,t){let r;return function(...x){const w=()=>{clearTimeout(r),e(...x)};clearTimeout(r),r=setTimeout(w,t)}}y.useEffect(()=>{ft.current&&jt(ft.current,Q)},[Q]),y.useEffect(()=>{V()},[V]);const We=(e,t,r)=>(.2126*e+.7152*t+.0722*r)/255,jt=y.useCallback((e,t)=>{const r=Mt.current,c=r.getContext("2d");r.width=S,r.height=M,c.clearRect(0,0,S,M),c.drawImage(e,0,0,S,M);const x=c.getImageData(0,0,S,M),w=x.data,b=ce(t);if(!b){mt.current=!1;return}const{r:v,g:k,b:A}=b;for(let z=0;z<w.length;z+=4){if(w[z+3]===0)continue;const dt=We(w[z],w[z+1],w[z+2]);w[z]=Math.round(v*dt),w[z+1]=Math.round(k*dt),w[z+2]=Math.round(A*dt)}c.putImageData(x,0,0);const R=new Image;R.onload=()=>{gt.current=R,mt.current=!1,V()},R.src=r.toDataURL("image/png")},[S,M,V]),_t=e=>{if(!X)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),r=document.querySelector(".ruler-vertical");if(!t||!r)return{horizontal:[],vertical:[]};const c=t.getBoundingClientRect(),x=r.getBoundingClientRect(),w=c.width,b=x.height,v=50,k=[],A=[];for(let R=v;R<=w;R+=v)R<=w-20&&k.push({position:R,value:Math.round(R/e)});for(let R=v;R<=b;R+=v)R<=b-15&&A.push({position:R,value:Math.round(R/e)});return{horizontal:k,vertical:A}},[Yt,qt]=y.useState({horizontal:[],vertical:[]});return y.useEffect(()=>{const e=()=>{setTimeout(()=>{const c=_t(O);qt(c)},50)};e();let t;const r=()=>{clearTimeout(t),t=setTimeout(e,150)};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),clearTimeout(t)}},[O,X]),y.useEffect(()=>{if(X&&!u){const e=setTimeout(()=>{const t=_t(O);qt(t)},100);return()=>clearTimeout(e)}},[X,u,O]),i.jsxs("div",{className:"pure-canvas-designer",children:[i.jsx("div",{className:"designer-header",children:i.jsx(Ze,{onAddElement:Re,onDeleteElement:()=>n&&Dt(n.id),onDuplicateElement:()=>n&&Qt(n.id),onUndo:bt,onRedo:pt,onToggleGrid:()=>at(!P),onToggleRulers:()=>st(!X),onToggleSnap:()=>U(!_),onImageUpload:Be,canUndo:q>0,canRedo:q<G.length-1,showGrid:P,showRulers:X,snapToGrid:_,selectedElement:n,theme:a,readOnly:s,apiKey:f.apiKey,apiEndpoint:f.apiEndpoint})}),i.jsxs("div",{className:"designer-content",children:[X&&!u&&i.jsxs("div",{className:"rulers",children:[i.jsx("div",{className:"ruler-horizontal",children:i.jsx("div",{className:"ruler-horizontal-numbers",children:Yt.horizontal.map((e,t)=>i.jsx("span",{className:"ruler-number horizontal",style:{left:`${e.position}px`},children:e.value},t))})}),i.jsx("div",{className:"ruler-vertical",children:i.jsx("div",{className:"ruler-vertical-numbers",children:Yt.vertical.map((e,t)=>i.jsx("span",{className:"ruler-number vertical",style:{top:`${e.position}px`},children:e.value},t))})})]}),i.jsx("div",{className:"canvas-container",ref:ae,children:i.jsx("canvas",{ref:ht,width:S,height:M,onMouseDown:Ee,onMouseMove:ze,onMouseUp:Ie,style:{border:"1px solid #e2e8f0",cursor:N?"grabbing":"default",transform:`scale(${O})`,transformOrigin:"top left"}})}),i.jsxs("div",{className:"side-panels",children:[i.jsx(ti,{selectedElement:n,onUpdate:Ot,onMoveLayer:$t,availableFonts:se,theme:a}),i.jsx(ei,{elements:g,selectedElement:n,onSelectElement:C,onMoveLayer:$t,onDeleteElement:Dt,theme:a})]})]}),i.jsxs("div",{className:"designer-footer",children:[i.jsxs("div",{className:"section-thumbnails",children:[i.jsxs("label",{className:"section-thumbnails-label",children:["Available sections for : ",i.jsx("u",{children:h.name})]}),i.jsx("div",{className:"thumbnails-container",children:h.sections.map(e=>{const t=W[e.sectionName]&&W[e.sectionName].elements&&W[e.sectionName].elements.length>0;return i.jsxs("div",{className:`section-thumbnail compact ${m.sectionName===e.sectionName?"active":""}`,onClick:r=>{r.stopPropagation();const c=h.sections.find(x=>x.sectionName===e.sectionName);Ht(c)},title:e.sectionName,children:[i.jsxs("div",{className:"thumbnail-image-container compact",children:[i.jsx("img",{src:e.sectionImage,alt:e.sectionName,className:"thumbnail-image compact",onError:r=>{r.target.style.display="none",r.target.nextSibling.style.display="flex"}}),i.jsx("div",{className:"thumbnail-placeholder compact",style:{display:"none"},children:i.jsx("span",{className:"placeholder-icon",children:"๐"})}),t&&i.jsx("div",{className:"content-indicator compact",children:i.jsx("svg",{className:"checkmark compact",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:i.jsx("path",{d:"M20 6L9 17l-5-5"})})})]}),i.jsx("span",{className:"thumbnail-label compact",children:e.sectionName})]},e.sectionName)})})]}),i.jsxs("div",{className:"color-palette-enhanced compact",children:[i.jsx("label",{className:"color-palette-label",children:"Supported colors:"}),i.jsxs("div",{className:"color-swatches-container",children:[h.colorSettings.slice(0,3).map((e,t)=>i.jsxs("div",{className:`color-swatch-enhanced compact ${Q===e?"active":""}`,onClick:r=>{r.stopPropagation(),it(e)},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner compact",style:{backgroundColor:e}}),Q===e&&i.jsx("div",{className:"color-selection-ring compact"})]},e)),h.colorSettings.length>3&&i.jsxs("div",{className:"color-dropdown-container",children:[i.jsx("button",{className:"color-more-button",onClick:e=>{e.stopPropagation();const t=e.currentTarget.nextElementSibling;t.style.display=t.style.display==="block"?"none":"block"},title:"More colors",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"12",cy:"12",r:"3"}),i.jsx("circle",{cx:"12",cy:"5",r:"3"}),i.jsx("circle",{cx:"12",cy:"19",r:"3"})]})}),i.jsx("div",{className:"color-dropdown-menu",style:{display:"none"},children:h.colorSettings.slice(3).map((e,t)=>i.jsxs("div",{className:`color-swatch-dropdown ${Q===e?"active":""}`,onClick:r=>{r.stopPropagation(),it(e),r.currentTarget.parentElement.style.display="none"},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner-dropdown",style:{backgroundColor:e}}),i.jsx("span",{className:"color-hex",children:e.toUpperCase()})]},e))})]})]})]}),i.jsxs("div",{className:"zoom-controls-enhanced compact",children:[i.jsx("label",{className:"zoom-label",children:"Zoom:"}),i.jsxs("div",{className:"zoom-buttons-container compact",children:[i.jsx("button",{className:"zoom-button compact zoom-out",onClick:()=>lt(Math.max(.25,O-.25)),disabled:O<=.25,title:"Zoom Out",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsxs("div",{className:"zoom-display compact",children:[i.jsxs("span",{className:"zoom-percentage compact",children:[Math.round(O*100),"%"]}),i.jsx("div",{className:"zoom-slider-container compact",children:i.jsx("input",{type:"range",min:"0.25",max:"4",step:"0.25",value:O,onChange:e=>lt(parseFloat(e.target.value)),className:"zoom-slider compact"})})]}),i.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>lt(Math.min(4,O+.25)),disabled:O>=4,title:"Zoom In",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"11",y1:"8",x2:"11",y2:"14"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsx("button",{className:"zoom-reset compact",onClick:()=>lt(1),title:"Reset Zoom (100%)",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("path",{d:"M3 3l18 18"}),i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"})]})})]})]})]})]})});re.displayName="Mypixia";module.exports=re;
|
|
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;
|