npm - @mypixia/simplex-designer - Versions diffs - 2.1.4 → 3.0.0 - Mend

@mypixia/simplex-designer 2.1.4 → 3.0.0

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.

Files changed (4) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";require('./index_external.css');const y=require("react"),$e=require("qrcode"),He=require("react-barcode"),ie=require("axios");var It={exports:{}},St={};/**
+"use strict";require('./index_external.css');const y=require("react"),Ga=require("qrcode"),_a=require("react-barcode"),bi=require("axios");var De={exports:{}},be={};/**
  * @license React
  * react-jsx-runtime.production.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var oe;function Ge(){if(oe)return St;oe=1;var d=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function a(l,s,f){var x=null;if(f!==void 0&&(x=""+f),s.key!==void 0&&(x=""+s.key),"key"in s){f={};for(var c in s)c!=="key"&&(f[c]=s[c])}else f=s;return s=f.ref,{$$typeof:d,type:l,key:x,ref:s!==void 0?s:null,props:f}}return St.Fragment=o,St.jsx=a,St.jsxs=a,St}var Ft={};/**
+ */var Yi;function Ua(){if(Yi)return be;Yi=1;var r=Symbol.for("react.transitional.element"),a=Symbol.for("react.fragment");function s(n,l,h){var f=null;if(h!==void 0&&(f=""+h),l.key!==void 0&&(f=""+l.key),"key"in l){h={};for(var k in l)k!=="key"&&(h[k]=l[k])}else h=l;return l=h.ref,{$$typeof:r,type:n,key:f,ref:l!==void 0?l:null,props:h}}return be.Fragment=a,be.jsx=s,be.jsxs=s,be}var Se={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,978 +14,42 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var re;function _e(){return re||(re=1,process.env.NODE_ENV!=="production"&&function(){function d(m){if(m==null)return null;if(typeof m=="function")return m.$$typeof===it?null:m.displayName||m.name||null;if(typeof m=="string")return m;switch(m){case b:return"Fragment";case D:return"Profiler";case B:return"StrictMode";case W:return"Suspense";case ot:return"SuspenseList";case q:return"Activity"}if(typeof m=="object")switch(typeof m.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),m.$$typeof){case j:return"Portal";case $:return(m.displayName||"Context")+".Provider";case F:return(m._context.displayName||"Context")+".Consumer";case z:var A=m.render;return m=m.displayName,m||(m=A.displayName||A.name||"",m=m!==""?"ForwardRef("+m+")":"ForwardRef"),m;case U:return A=m.displayName||null,A!==null?A:d(m.type)||"Memo";case nt:A=m._payload,m=m._init;try{return d(m(A))}catch{}}return null}function o(m){return""+m}function a(m){try{o(m);var A=!1}catch{A=!0}if(A){A=console;var Q=A.error,_=typeof Symbol=="function"&&Symbol.toStringTag&&m[Symbol.toStringTag]||m.constructor.name||"Object";return Q.call(A,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",_),o(m)}}function l(m){if(m===b)return"<>";if(typeof m=="object"&&m!==null&&m.$$typeof===nt)return"<...>";try{var A=d(m);return A?"<"+A+">":"<...>"}catch{return"<...>"}}function s(){var m=Y.A;return m===null?null:m.getOwner()}function f(){return Error("react-stack-top-frame")}function x(m){if(O.call(m,"key")){var A=Object.getOwnPropertyDescriptor(m,"key").get;if(A&&A.isReactWarning)return!1}return m.key!==void 0}function c(m,A){function Q(){K||(K=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",A))}Q.isReactWarning=!0,Object.defineProperty(m,"key",{get:Q,configurable:!0})}function u(){var m=d(this.type);return et[m]||(et[m]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),m=this.props.ref,m!==void 0?m:null}function g(m,A,Q,_,Z,V,ct,H){return Q=V.ref,m={$$typeof:I,type:m,key:A,props:V,_owner:Z},(Q!==void 0?Q:null)!==null?Object.defineProperty(m,"ref",{enumerable:!1,get:u}):Object.defineProperty(m,"ref",{enumerable:!1,value:null}),m._store={},Object.defineProperty(m._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(m,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(m,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:ct}),Object.defineProperty(m,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:H}),Object.freeze&&(Object.freeze(m.props),Object.freeze(m)),m}function C(m,A,Q,_,Z,V,ct,H){var P=A.children;if(P!==void 0)if(_)if(J(P)){for(_=0;_<P.length;_++)T(P[_]);Object.freeze&&Object.freeze(P)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else T(P);if(O.call(A,"key")){P=d(m);var st=Object.keys(A).filter(function(At){return At!=="key"});_=0<st.length?"{key: someKey, "+st.join(": ..., ")+": ...}":"{key: someKey}",N[P+_]||(st=0<st.length?"{"+st.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var qi;function Ya(){return qi||(qi=1,process.env.NODE_ENV!=="production"&&function(){function r(u){if(u==null)return null;if(typeof u=="function")return u.$$typeof===jt?null:u.displayName||u.name||null;if(typeof u=="string")return u;switch(u){case H:return"Fragment";case z:return"Profiler";case Q:return"StrictMode";case j:return"Suspense";case it:return"SuspenseList";case gt:return"Activity"}if(typeof u=="object")switch(typeof u.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),u.$$typeof){case I:return"Portal";case S:return(u.displayName||"Context")+".Provider";case T:return(u._context.displayName||"Context")+".Consumer";case L:var A=u.render;return u=u.displayName,u||(u=A.displayName||A.name||"",u=u!==""?"ForwardRef("+u+")":"ForwardRef"),u;case J:return A=u.displayName||null,A!==null?A:r(u.type)||"Memo";case yt:A=u._payload,u=u._init;try{return r(u(A))}catch{}}return null}function a(u){return""+u}function s(u){try{a(u);var A=!1}catch{A=!0}if(A){A=console;var U=A.error,at=typeof Symbol=="function"&&Symbol.toStringTag&&u[Symbol.toStringTag]||u.constructor.name||"Object";return U.call(A,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",at),a(u)}}function n(u){if(u===H)return"<>";if(typeof u=="object"&&u!==null&&u.$$typeof===yt)return"<...>";try{var A=r(u);return A?"<"+A+">":"<...>"}catch{return"<...>"}}function l(){var u=_.A;return u===null?null:u.getOwner()}function h(){return Error("react-stack-top-frame")}function f(u){if(O.call(u,"key")){var A=Object.getOwnPropertyDescriptor(u,"key").get;if(A&&A.isReactWarning)return!1}return u.key!==void 0}function k(u,A){function U(){rt||(rt=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",A))}U.isReactWarning=!0,Object.defineProperty(u,"key",{get:U,configurable:!0})}function C(){var u=r(this.type);return mt[u]||(mt[u]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),u=this.props.ref,u!==void 0?u:null}function E(u,A,U,at,xt,dt,It,kt){return U=dt.ref,u={$$typeof:B,type:u,key:A,props:dt,_owner:xt},(U!==void 0?U:null)!==null?Object.defineProperty(u,"ref",{enumerable:!1,get:C}):Object.defineProperty(u,"ref",{enumerable:!1,value:null}),u._store={},Object.defineProperty(u._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(u,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(u,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:It}),Object.defineProperty(u,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:kt}),Object.freeze&&(Object.freeze(u.props),Object.freeze(u)),u}function N(u,A,U,at,xt,dt,It,kt){var pt=A.children;if(pt!==void 0)if(at)if(R(pt)){for(at=0;at<pt.length;at++)M(pt[at]);Object.freeze&&Object.freeze(pt)}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 M(pt);if(O.call(A,"key")){pt=r(u);var Ct=Object.keys(A).filter(function(Kt){return Kt!=="key"});at=0<Ct.length?"{key: someKey, "+Ct.join(": ..., ")+": ...}":"{key: someKey}",P[pt+at]||(Ct=0<Ct.length?"{"+Ct.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,_,P,st,P),N[P+_]=!0)}if(P=null,Q!==void 0&&(a(Q),P=""+Q),x(A)&&(a(A.key),P=""+A.key),"key"in A){Q={};for(var dt in A)dt!=="key"&&(Q[dt]=A[dt])}else Q=A;return P&&c(Q,typeof m=="function"?m.displayName||m.name||"Unknown":m),g(m,P,V,Z,s(),Q,ct,H)}function T(m){typeof m=="object"&&m!==null&&m.$$typeof===I&&m._store&&(m._store.validated=1)}var w=y,I=Symbol.for("react.transitional.element"),j=Symbol.for("react.portal"),b=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),D=Symbol.for("react.profiler"),F=Symbol.for("react.consumer"),$=Symbol.for("react.context"),z=Symbol.for("react.forward_ref"),W=Symbol.for("react.suspense"),ot=Symbol.for("react.suspense_list"),U=Symbol.for("react.memo"),nt=Symbol.for("react.lazy"),q=Symbol.for("react.activity"),it=Symbol.for("react.client.reference"),Y=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,J=Array.isArray,rt=console.createTask?console.createTask:function(){return null};w={"react-stack-bottom-frame":function(m){return m()}};var K,et={},M=w["react-stack-bottom-frame"].bind(w,f)(),G=rt(l(f)),N={};Ft.Fragment=b,Ft.jsx=function(m,A,Q,_,Z){var V=1e4>Y.recentlyCreatedOwnerStacks++;return C(m,A,Q,!1,_,Z,V?Error("react-stack-top-frame"):M,V?rt(l(m)):G)},Ft.jsxs=function(m,A,Q,_,Z){var V=1e4>Y.recentlyCreatedOwnerStacks++;return C(m,A,Q,!0,_,Z,V?Error("react-stack-top-frame"):M,V?rt(l(m)):G)}}()),Ft}var ae;function Ye(){return ae||(ae=1,process.env.NODE_ENV==="production"?It.exports=Ge():It.exports=_e()),It.exports}var i=Ye();const Mt={business:{name:"Business & Office",icons:[{name:"briefcase",symbol:"💼",unicode:"💼"},{name:"chart-up",symbol:"📈",unicode:"📈"},{name:"chart-down",symbol:"📉",unicode:"📉"},{name:"graph",symbol:"📊",unicode:"📊"},{name:"clipboard",symbol:"📋",unicode:"📋"},{name:"calendar",symbol:"📅",unicode:"📅"},{name:"office",symbol:"🏢",unicode:"🏢"},{name:"bank",symbol:"🏦",unicode:"🏦"},{name:"money-bag",symbol:"💰",unicode:"💰"},{name:"credit-card",symbol:"💳",unicode:"💳"}]},technology:{name:"Technology",icons:[{name:"laptop",symbol:"💻",unicode:"💻"},{name:"phone",symbol:"📱",unicode:"📱"},{name:"desktop",symbol:"🖥️",unicode:"🖥️"},{name:"keyboard",symbol:"⌨️",unicode:"⌨️"},{name:"mouse",symbol:"🖱️",unicode:"🖱️"},{name:"printer",symbol:"🖨️",unicode:"🖨️"},{name:"wifi",symbol:"📶",unicode:"📶"},{name:"battery",symbol:"🔋",unicode:"🔋"},{name:"plug",symbol:"🔌",unicode:"🔌"},{name:"gear",symbol:"⚙️",unicode:"⚙️"}]},communication:{name:"Communication",icons:[{name:"email",symbol:"📧",unicode:"📧"},{name:"envelope",symbol:"✉️",unicode:"✉️"},{name:"phone-call",symbol:"📞",unicode:"📞"},{name:"message",symbol:"💬",unicode:"💬"},{name:"announcement",symbol:"📢",unicode:"📢"},{name:"megaphone",symbol:"📣",unicode:"📣"},{name:"satellite",symbol:"📡",unicode:"📡"},{name:"radio",symbol:"📻",unicode:"📻"},{name:"microphone",symbol:"🎤",unicode:"🎤"},{name:"speaker",symbol:"🔊",unicode:"🔊"}]},transport:{name:"Transportation",icons:[{name:"car",symbol:"🚗",unicode:"🚗"},{name:"truck",symbol:"🚛",unicode:"🚛"},{name:"bus",symbol:"🚌",unicode:"🚌"},{name:"airplane",symbol:"✈️",unicode:"✈️"},{name:"train",symbol:"🚆",unicode:"🚆"},{name:"ship",symbol:"🚢",unicode:"🚢"},{name:"bicycle",symbol:"🚴",unicode:"🚴"},{name:"motorcycle",symbol:"🏍️",unicode:"🏍️"},{name:"taxi",symbol:"🚕",unicode:"🚕"},{name:"rocket",symbol:"🚀",unicode:"🚀"}]},nature:{name:"Nature & Environment",icons:[{name:"tree",symbol:"🌳",unicode:"🌳"},{name:"leaf",symbol:"🍃",unicode:"🍃"},{name:"flower",symbol:"🌸",unicode:"🌸"},{name:"sun",symbol:"☀️",unicode:"☀️"},{name:"moon",symbol:"🌙",unicode:"🌙"},{name:"star",symbol:"⭐",unicode:"⭐"},{name:"cloud",symbol:"☁️",unicode:"☁️"},{name:"rainbow",symbol:"🌈",unicode:"🌈"},{name:"mountain",symbol:"⛰️",unicode:"⛰️"},{name:"globe",symbol:"🌍",unicode:"🌍"}]},symbols:{name:"Symbols & Signs",icons:[{name:"check",symbol:"✅",unicode:"✅"},{name:"cross",symbol:"❌",unicode:"❌"},{name:"warning",symbol:"⚠️",unicode:"⚠️"},{name:"info",symbol:"ℹ️",unicode:"ℹ️"},{name:"question",symbol:"❓",unicode:"❓"},{name:"exclamation",symbol:"❗",unicode:"❗"},{name:"lock",symbol:"🔒",unicode:"🔒"},{name:"unlock",symbol:"🔓",unicode:"🔓"},{name:"key",symbol:"🔑",unicode:"🔑"},{name:"shield",symbol:"🛡️",unicode:"🛡️"}]}},le=()=>Object.values(Mt).flatMap(d=>d.icons.map(o=>({...o,category:d.name}))),qe=d=>le().filter(a=>a.name.toLowerCase().includes(d.toLowerCase())||a.category.toLowerCase().includes(d.toLowerCase())),Ve=({onSelectIcon:d,disabled:o=!1})=>{const[a,l]=y.useState(!1),[s,f]=y.useState(""),[x,c]=y.useState("all"),u=y.useRef(null);y.useEffect(()=>{const w=I=>{u.current&&!u.current.contains(I.target)&&l(!1)};return document.addEventListener("mousedown",w),()=>document.removeEventListener("mousedown",w)},[]);const g=w=>{d(w),l(!1),f("")},T=(()=>{let w=le();if(s.trim()&&(w=qe(s)),x!=="all"){const I=Mt[x];I&&(w=w.filter(j=>j.category===I.name))}return w})();return i.jsxs("div",{className:"icon-selector",ref:u,children:[i.jsxs("button",{className:"toolbar-btn dropdown-trigger",disabled:o,onClick:()=>l(!a),title:"Add Icon",children:[i.jsx("span",{className:"icon",children:"🎯"}),i.jsx("span",{className:"label",children:"Icons"}),i.jsx("span",{className:"dropdown-arrow",children:"▼"})]}),a&&i.jsxs("div",{className:"icon-dropdown",children:[i.jsxs("div",{className:"icon-dropdown-header",children:[i.jsx("input",{type:"text",placeholder:"Search icons...",value:s,onChange:w=>f(w.target.value),className:"icon-search"}),i.jsxs("select",{value:x,onChange:w=>c(w.target.value),className:"category-select",children:[i.jsx("option",{value:"all",children:"All Categories"}),Object.entries(Mt).map(([w,I])=>i.jsx("option",{value:w,children:I.name},w))]})]}),i.jsx("div",{className:"icon-grid",children:T.length===0?i.jsx("div",{className:"no-icons",children:s?"No icons found":"No icons in this category"}):T.map((w,I)=>i.jsxs("button",{className:"icon-item",onClick:()=>g(w),title:`${w.name} (${w.category})`,children:[i.jsx("span",{className:"icon-symbol",children:w.symbol}),i.jsx("span",{className:"icon-name",children:w.name})]},`${w.name}-${I}`))}),i.jsx("div",{className:"icon-dropdown-footer",children:i.jsxs("span",{className:"icon-count",children:[T.length," icon",T.length!==1?"s":""]})})]})]})},Xe=({isOpen:d,onClose:o,onAddQRCode:a,theme:l})=>{const[s,f]=y.useState(""),[x,c]=y.useState(""),[u,g]=y.useState(200),[C,T]=y.useState("M"),w=()=>{if(!s.trim())return;const b={width:u,errorCorrectionLevel:C,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};$e.toDataURL(s,b,(B,D)=>{if(B){console.error("QR Code generation error:",B);return}c(D)})},I=()=>{if(!x)return;const b=new Image;b.onload=()=>{a({type:"qrcode",src:x,data:s,width:u,height:u,x:100,y:100,imageObject:b}),j()},b.src=x},j=()=>{f(""),c(""),o()};return d?i.jsx("div",{className:"qr-modal-overlay",onClick:j,children:i.jsxs("div",{className:"qr-modal-content",onClick:b=>b.stopPropagation(),children:[i.jsxs("div",{className:"qr-modal-header",children:[i.jsx("h3",{children:"Generate QR Code"}),i.jsx("button",{className:"qr-modal-close",onClick:j,"aria-label":"Close",children:"×"})]}),i.jsxs("div",{className:"qr-modal-body",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-data",children:"Enter Data (URL, Text, etc.)"}),i.jsx("textarea",{id:"qr-data",value:s,onChange:b=>f(b.target.value),placeholder:"https://example.com or any text...",rows:3})]}),i.jsxs("div",{className:"qr-options",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-size",children:"Size (px)"}),i.jsx("input",{type:"number",id:"qr-size",value:u,onChange:b=>g(Math.max(50,Math.min(500,parseInt(b.target.value)||200))),min:"50",max:"500"})]}),i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-error-level",children:"Error Correction"}),i.jsxs("select",{id:"qr-error-level",value:C,onChange:b=>T(b.target.value),children:[i.jsx("option",{value:"L",children:"Low (7%)"}),i.jsx("option",{value:"M",children:"Medium (15%)"}),i.jsx("option",{value:"Q",children:"Quartile (25%)"}),i.jsx("option",{value:"H",children:"High (30%)"})]})]})]}),i.jsx("div",{className:"qr-actions",children:i.jsx("button",{className:"qr-btn qr-btn-generate",onClick:w,disabled:!s.trim(),children:"Generate QR Code"})}),x&&i.jsxs("div",{className:"qr-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"qr-preview-container",children:i.jsx("img",{src:x,alt:"QR Code Preview"})}),i.jsx("button",{className:"qr-btn qr-btn-add",onClick:I,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Je=({isOpen:d,onClose:o,onAddBarcode:a,theme:l})=>{const[s,f]=y.useState(""),[x,c]=y.useState("CODE128"),[u,g]=y.useState(null),[C,T]=y.useState(2),[w,I]=y.useState(100),[j,b]=y.useState(20),[B,D]=y.useState("center"),[F,$]=y.useState("bottom"),[z,W]=y.useState(10),ot=y.useRef(null),U=[{value:"CODE128",label:"CODE128 (Most Common)"},{value:"EAN13",label:"EAN-13 (European Article Number)"},{value:"EAN8",label:"EAN-8 (Short EAN)"},{value:"UPC",label:"UPC (Universal Product Code)"},{value:"CODE39",label:"CODE39 (Alpha-numeric)"},{value:"ITF14",label:"ITF-14 (Shipping/Logistics)"},{value:"MSI",label:"MSI (Retail)"},{value:"pharmacode",label:"Pharmacode (Pharmaceutical)"},{value:"codabar",label:"Codabar (Libraries/Blood banks)"}],nt=()=>{if(s.trim())try{g(i.jsx(He,{value:s,format:x,width:C,height:w,fontSize:j,textAlign:B,textPosition:F,margin:z,background:"#ffffff",lineColor:"#000000"}))}catch(O){console.error("Barcode generation error:",O),alert("Invalid data for selected barcode format. Please check your input.")}},q=()=>{var O,J,rt,K;if(!(!u||!ot.current))try{const et=ot.current.querySelector("svg");if(!et){console.error("No SVG element found in barcode");return}const M=document.createElement("canvas"),G=M.getContext("2d"),N=et.getBoundingClientRect(),m=((J=(O=et.width)==null?void 0:O.baseVal)==null?void 0:J.value)||N.width||200,A=((K=(rt=et.height)==null?void 0:rt.baseVal)==null?void 0:K.value)||N.height||100;M.width=m,M.height=A;const Q=new XMLSerializer().serializeToString(et),_=new Blob([Q],{type:"image/svg+xml;charset=utf-8"}),Z=URL.createObjectURL(_),V=new Image;V.onload=()=>{G.drawImage(V,0,0);const ct=M.toDataURL("image/png"),H=new Image;H.onload=()=>{a({type:"barcode",src:ct,data:s,format:x,width:m,height:A,x:100,y:100,imageObject:H}),it()},H.src=ct,URL.revokeObjectURL(Z)},V.src=Z}catch(et){console.error("Error adding barcode to canvas:",et),alert("Failed to add barcode to canvas. Please try again.")}},it=()=>{f(""),g(null),c("CODE128"),T(2),I(100),b(20),o()},Y=O=>({CODE128:"Supports all ASCII characters. Most versatile format.",EAN13:"Requires exactly 12 digits (13th is checksum). Used for retail products.",EAN8:"Requires exactly 7 digits (8th is checksum). Compact version of EAN-13.",UPC:"Requires exactly 11 digits (12th is checksum). Used in North America.",CODE39:"Supports letters, numbers, and some symbols. Widely used.",ITF14:"Requires exactly 13 digits (14th is checksum). Used for shipping containers.",MSI:"Numeric only. Used in retail inventory.",pharmacode:"Numbers 3-131070. Used in pharmaceutical industry.",codabar:"Supports 0-9, A-D, and symbols. Used in libraries."})[O]||"";return d?i.jsx("div",{className:"barcode-modal-overlay",onClick:it,children:i.jsxs("div",{className:"barcode-modal-content",onClick:O=>O.stopPropagation(),children:[i.jsxs("div",{className:"barcode-modal-header",children:[i.jsx("h3",{children:"Generate Barcode"}),i.jsx("button",{className:"barcode-modal-close",onClick:it,"aria-label":"Close",children:"×"})]}),i.jsxs("div",{className:"barcode-modal-body",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-data",children:"Enter Data"}),i.jsx("input",{type:"text",id:"barcode-data",value:s,onChange:O=>f(O.target.value),placeholder:"Enter your data..."})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-format",children:"Barcode Format"}),i.jsx("select",{id:"barcode-format",value:x,onChange:O=>c(O.target.value),children:U.map(O=>i.jsx("option",{value:O.value,children:O.label},O.value))}),i.jsx("small",{className:"format-description",children:Y(x)})]}),i.jsxs("div",{className:"barcode-options",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-width",children:"Bar Width"}),i.jsx("input",{type:"range",id:"barcode-width",min:"1",max:"4",step:"0.5",value:C,onChange:O=>T(parseFloat(O.target.value))}),i.jsxs("span",{className:"range-value",children:[C,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-height",children:"Height"}),i.jsx("input",{type:"range",id:"barcode-height",min:"50",max:"200",value:w,onChange:O=>I(parseInt(O.target.value))}),i.jsxs("span",{className:"range-value",children:[w,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-fontsize",children:"Font Size"}),i.jsx("input",{type:"range",id:"barcode-fontsize",min:"10",max:"30",value:j,onChange:O=>b(parseInt(O.target.value))}),i.jsxs("span",{className:"range-value",children:[j,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"text-position",children:"Text Position"}),i.jsxs("select",{id:"text-position",value:F,onChange:O=>$(O.target.value),children:[i.jsx("option",{value:"bottom",children:"Bottom"}),i.jsx("option",{value:"top",children:"Top"})]})]})]}),i.jsx("div",{className:"barcode-actions",children:i.jsx("button",{className:"barcode-btn barcode-btn-generate",onClick:nt,disabled:!s.trim(),children:"Generate Barcode"})}),u&&i.jsxs("div",{className:"barcode-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"barcode-preview-container",ref:ot,children:u}),i.jsx("button",{className:"barcode-btn barcode-btn-add",onClick:q,style:{backgroundColor:(l==null?void 0:l.primaryColor)||"#3b82f6",borderColor:(l==null?void 0:l.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Ke=({theme:d})=>i.jsxs("div",{className:"premium-feature-container",style:{padding:"20px",backgroundColor:"#f8f9fa",borderRadius:"8px",boxShadow:"0 2px 10px rgba(0,0,0,0.05)",textAlign:"center",maxWidth:"400px",margin:"0 auto"},children:[i.jsx("div",{style:{marginBottom:"16px"},children:i.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:"#ffc107"},children:[i.jsx("path",{d:"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"}),i.jsx("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]})}),i.jsx("h3",{style:{color:"#333",fontSize:"18px",fontWeight:"600",marginBottom:"12px"},children:"Premium Feature Access"}),i.jsx("p",{style:{color:"#555",fontSize:"15px",lineHeight:"1.5",marginBottom:"20px"},children:"Premium stickers feature requires a subscription to access."}),i.jsx("a",{href:"https://mypixia.com/developer",target:"_blank",rel:"noopener noreferrer",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:(d==null?void 0:d.primaryColor)||"#4c5bf2",color:"white",padding:"10px 20px",borderRadius:"4px",textDecoration:"none",fontWeight:"500",transition:"background-color 0.2s ease"},children:"Get API Key"})]}),se=()=>i.jsxs("div",{style:{textAlign:"center",padding:"40px"},children:[i.jsx("div",{style:{border:"4px solid #f3f3f3",borderTop:"4px solid #3498db",borderRadius:"50%",width:"40px",height:"40px",animation:"spin 2s linear infinite",margin:"0 auto 20px"}}),i.jsx("p",{children:"Loading..."}),i.jsx("style",{children:`
+  <%s key={someKey} {...props} />`,at,pt,Ct,pt),P[pt+at]=!0)}if(pt=null,U!==void 0&&(s(U),pt=""+U),f(A)&&(s(A.key),pt=""+A.key),"key"in A){U={};for(var Ht in A)Ht!=="key"&&(U[Ht]=A[Ht])}else U=A;return pt&&k(U,typeof u=="function"?u.displayName||u.name||"Unknown":u),E(u,pt,dt,xt,l(),U,It,kt)}function M(u){typeof u=="object"&&u!==null&&u.$$typeof===B&&u._store&&(u._store.validated=1)}var v=y,B=Symbol.for("react.transitional.element"),I=Symbol.for("react.portal"),H=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),S=Symbol.for("react.context"),L=Symbol.for("react.forward_ref"),j=Symbol.for("react.suspense"),it=Symbol.for("react.suspense_list"),J=Symbol.for("react.memo"),yt=Symbol.for("react.lazy"),gt=Symbol.for("react.activity"),jt=Symbol.for("react.client.reference"),_=v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,O=Object.prototype.hasOwnProperty,R=Array.isArray,nt=console.createTask?console.createTask:function(){return null};v={"react-stack-bottom-frame":function(u){return u()}};var rt,mt={},w=v["react-stack-bottom-frame"].bind(v,h)(),q=nt(n(h)),P={};Se.Fragment=H,Se.jsx=function(u,A,U,at,xt){var dt=1e4>_.recentlyCreatedOwnerStacks++;return N(u,A,U,!1,at,xt,dt?Error("react-stack-top-frame"):w,dt?nt(n(u)):q)},Se.jsxs=function(u,A,U,at,xt){var dt=1e4>_.recentlyCreatedOwnerStacks++;return N(u,A,U,!0,at,xt,dt?Error("react-stack-top-frame"):w,dt?nt(n(u)):q)}}()),Se}var Xi;function qa(){return Xi||(Xi=1,process.env.NODE_ENV==="production"?De.exports=Ua():De.exports=Ya()),De.exports}var e=qa();const K=({name:r,size:a=24,color:s="#000000",...n})=>{const l={briefcase:"M20.25 6.375c0 2.278-3.694 4.125-8.25 4.125S3.75 8.653 3.75 6.375 7.444 2.25 12 2.25s8.25 1.847 8.25 4.125zM12 12.75c4.556 0 8.25-1.847 8.25-4.125v-2.35c-1.64 1.263-4.54 2.1-8.25 2.1s-6.61-.837-8.25-2.1v2.35c0 2.278 3.694 4.125 8.25 4.125z",money:"M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2zm0 2c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zm1 8V9.5c0-.828.672-1.5 1.5-1.5S16 8.672 16 9.5V10h-1v-.5c0-.276-.224-.5-.5-.5s-.5.224-.5.5V12c0 .828-.672 1.5-1.5 1.5S11 12.828 11 12v-.5h1v.5c0 .276.224.5.5.5s.5-.224.5-.5z",chart:"M3 3v18h18v-2H5V3H3zm4 12V9h2v6H7zm4 0V7h2v8h-2zm4 0v-4h2v4h-2z",target:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z",laptop:"M20 18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2H0v2h24v-2h-4zM4 6h16v10H4V6z",phone:"M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z",wifi:"M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.07 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z",camera:"M9 2l1.17 1H15v1H9.83L8.66 2H9zm-4 7h14l-1 9H6l-1-9zm7 8c1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3 1.34 3 3 3z",email:"M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z",message:"M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v3c0 .6.4 1 1 1h.5c.2 0 .4-.1.6-.2L15.5 18H20c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z",notification:"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z",like:"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z",share:"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z",user:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",users:"M16 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zM4 4c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zm5 0c0-1.11.89-2 2-2s2 .89 2 2-.89 2-2 2-2-.89-2-2zM12 14v8H4v-8c0-2.66 5.33-4 8-4s8 1.34 8 4v8h-8z",cart:"M7 18c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12L8.1 13h7.45c.75 0 1.41-.41 1.75-1.03L21.7 4H5.21l-.94-2H1zm16 16c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z",bag:"M19 7h-3V6c0-2.76-2.24-5-5-5S6 3.24 6 6v1H3c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM8 6c0-1.66 1.34-3 3-3s3 1.34 3 3v1H8V6zm11 15H5V9h2v1c0 .55.45 1 1 1s1-.45 1-1V9h6v1c0 .55.45 1 1 1s1-.45 1-1V9h2v12z",gift:"M20 6h-2.18c.11-.31.18-.65.18-1a2.996 2.996 0 0 0-5.5-1.65l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.1 0-2 .9-2 2v4c0 1.1.9 2 2 2h1v6c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2v-6h1c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z",plane:"M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z",car:"M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z",location:"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",home:"M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z",coffee:"M2 21h18v-2H2v2zM20 8H3v10h17V8zM5 10h12v6H5v-6zM21 5V3h-2v2H3v2h16v-2z",pizza:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z",sun:"M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z",cloud:"M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z",tree:"M16.5 12c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5.67-1.5 1.5-1.5zM9 13c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm3-6c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1z",soccer:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z",basketball:"M17.09 11h4.86c-.16-1.61-.71-3.11-1.54-4.4-1.69.83-2.81 2.54-3.32 4.4zM6.91 11c-.51-1.86-1.63-3.57-3.32-4.4-.83 1.29-1.38 2.79-1.54 4.4h4.86z",music:"M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z",video:"M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z",gamepad:"M15 7.5V2H9v5.5l3 3 3-3zM7.5 9H2v6h5.5l3-3-3-3zM9 16.5V22h6v-5.5l-3-3-3 3zM16.5 9l3 3 3-3H22V2h-5.5z",health:"M9.8 17.3l4.2-4.2L18.2 17c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L15.4 11.4l4.2-4.2c.39-.39.39-1.02 0-1.41-.39-.39-1.02-.39-1.41 0L14 9.8l-4.2-4.2c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41l4.2 4.2-4.2 4.2c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0z",medical:"M19 8h-2v3h-3v2h3v3h2v-3h3v-2h-3V8zM4 6h9v2H4zm0 5h9v2H4zm0 5h6v2H4z",lock:"M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z",shield:"M12,1L3,5V11C3,16.55 6.84,21.74 12,23C17.16,21.74 21,16.55 21,11V5L12,1M12,7C13.4,7 14.8,8.6 14.8,10V11H15.7V16H8.3V11H9.2V10C9.2,8.6 10.6,7 12,7M12,8.2C11.2,8.2 10.5,8.7 10.5,10V11H13.5V10C13.5,8.7 12.8,8.2 12,8.2Z",wrench:"M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z",gear:"M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z",book:"M18 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 4h5v8l-2.5-1.5L6 12V4z",graduation:"M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z",arrowUp:"M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6z",arrowDown:"M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z",arrowLeft:"M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6z",arrowRight:"M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z",close:"M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z",check:"M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z",plus:"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z",minus:"M19 13H5v-2h14v2z",sparkle:"M19 9l1.25-2.75L23 5l-2.75-1.25L19 1l-1.25 2.75L15 5l2.75 1.25L19 9zm-7.5.5L9 4 6.5 9.5 1 12l5.5 2.5L9 20l2.5-5.5L17 12l-5.5-2.5zM19 15l-1.25 2.75L15 19l2.75 1.25L19 23l1.25-2.75L23 19l-2.75-1.25L19 15z",undo:"M12.5 8c-2.65 0-5.05 1.04-6.83 2.73L3 8v8h8l-2.81-2.81C9.62 11.85 10.97 11.2 12.5 11.2c2.96 0 5.48 1.87 6.44 4.5L21 14.9C19.72 11.04 16.42 8 12.5 8z",redo:"M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-3.92 0-7.22 3.04-8.5 6.9l2.06.77C5.98 13.07 8.47 11.2 11.5 11.2c1.53 0 2.88.65 3.81 1.69L13 15h7V8l-1.6 2.6z",rotateRight:"M15.55 5.55L11 1v3.07C7.06 4.56 4 7.92 4 12s3.05 7.44 7 7.93v-2.02c-2.84-.48-5-2.94-5-5.91s2.16-5.43 5-5.91V10l4.55-4.45zM19.93 11c-.17-1.39-.72-2.73-1.62-3.89l-1.42 1.42c.54.75.88 1.6 1.02 2.47h2.02zM13 17.9v2.02c1.39-.17 2.74-.71 3.9-1.61l-1.44-1.44c-.75.54-1.59.89-2.46 1.03zm3.89-2.42l1.42 1.41c.9-1.16 1.45-2.5 1.62-3.89h-2.02c-.14.87-.48 1.72-1.02 2.48z",rotateLeft:"M7.11 8.53L5.7 7.11C4.8 8.27 4.24 9.61 4.07 11h2.02c.14-.87.49-1.72 1.02-2.47zM6.09 13H4.07c.17 1.39.72 2.73 1.62 3.89l1.41-1.42c-.52-.75-.87-1.59-1.01-2.47zm1.01 5.32c1.16.9 2.51 1.44 3.9 1.61V17.9c-.87-.14-1.71-.48-2.46-1.03L7.1 18.32zM13 4.07V1L8.45 5.55 13 10V6.09c2.84.48 5 2.94 5 5.91s-2.16 5.43-5 5.91v2.02c3.95-.49 7-3.85 7-7.93s-3.05-7.44-7-7.93z",text:"M5 4v3h5.5v12h3V7H19V4H5z",shapes:"M11 13.5v8h2v-8h8v-2h-8v-8h-2v8h-8v2h8z",upload:"M9 16h6v-6h4l-7-7-7 7h4v6zm-4 2h14v2H5v-2z",image:"M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z",sticker:"M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18zM18 14H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z",qrcode:"M3 11h2v2H3v-2zm8-6h2v4h-2V5zM3 3v6h6V3H3zm4 4H5V5h2v2zm-4 14h6v-6H3v6zm2-4h2v2H5v-2zM15 3v6h6V3h-6zm4 4h-2V5h2v2zm-4 8h2v2h2v2h-2v-2h-2v-2zm-2-2h2v2h-2v-2zm4 0h2v2h-2v-2zm2 4h2v2h-2v-2zm0-4h2v2h-2v-2zM11 13h2v4h-2v-4z",barcode:"M2 4h2v16H2V4zm4 0h1v16H6V4zm3 0h2v16H9V4zm4 0h1v16h-1V4zm3 0h2v16h-2V4zm4 0h2v16h-2V4z",thread:"M19.38 3.9L18.2 2.72a1.5 1.5 0 00-2.12 0l-1.41 1.41L3 15.79V21h5.21l11.66-11.66 1.41-1.41a1.5 1.5 0 000-2.12L19.38 3.9zM7.79 19H5v-2.79l9.95-9.95 2.79 2.79L7.79 19z",duplicate:"M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z",trash:"M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z",grid:"M20 2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM8 20H4v-4h4v4zm0-6H4v-4h4v4zm0-6H4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4V4h4v4z",ruler:"M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4z",magnet:"M3 7v6c0 5.52 4.48 10 10 10h1V13h-2v8.95C7.83 21.45 5 18.05 5 14V7H3zm18 0h-2v7c0 4.05-2.83 7.45-7 7.95V13h-2v10h1c5.52 0 10-4.48 10-10V7z",rectangle:"M19 5H5c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 12H5V7h14v10z",circle:"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z",triangle:"M12 2L1 21h22L12 2zm0 4l7.53 13H4.47L12 6z",star:"M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z",heart:"M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z",diamond:"M12 2L2 12l10 10 10-10L12 2zm0 2.83L19.17 12 12 19.17 4.83 12 12 4.83z",hexagon:"M12 2l-8.66 5v10L12 22l8.66-5V7L12 2zm6.66 13.87L12 19.87l-6.66-4V8.13L12 4.13l6.66 4v7.74z",pentagon:"M12 2L2 9l4 12h12l4-12L12 2z",oval:"M12 6c-4.42 0-8 2.69-8 6s3.58 6 8 6 8-2.69 8-6-3.58-6-8-6z",roundedRect:"M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z",horizontalLine:"M2 12h20",arrowShape:"M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z",rain:"M6 14c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97C6.22 4.56 8.51 3 11.2 3c2.31 0 4.36 1.25 5.46 3.1C17.43 6.04 18 6.96 18 8c0 1.1-.9 2-2 2H6zm2 6h2v2H8v-2zm4 0h2v2h-2v-2zm-2-3h2v2h-2v-2z",snow:"M22 11h-4.17l3.24-3.24-1.41-1.42L15.83 10H13V7.17l3.24-3.24-1.42-1.41L12 5.83 9.17 2.52 7.76 3.93 11 7.17V10H8.17l-3.24-3.24L3.52 8.17 6.76 11.41H2v2h4.17l-3.24 3.24 1.41 1.42L8.17 14H11v2.83l-3.24 3.24 1.42 1.41L12 18.17l2.83 3.31 1.41-1.41L13 16.83V14h2.83l3.24 3.24 1.42-1.41L17.24 12.59H22v-1z"},h=new Set(["horizontalLine","ruler"]),f=l[r];if(!f)return console.warn(`Icon "${r}" not found`),null;const k=h.has(r);return e.jsx("svg",{width:a,height:a,viewBox:"0 0 24 24",fill:k?"none":s,stroke:k?s:void 0,strokeWidth:k?2:void 0,...n,children:e.jsx("path",{d:f})})},Jt=[{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"},{id:201,text:"OPEN",category:"Signage",fontSize:44,fontFamily:"Bebas Neue",fill:"#111827",textAlign:"center",letterSpacing:6},{id:202,text:"EST. 2024",category:"Signage",fontSize:34,fontFamily:"Staatliches",fill:"#374151",textAlign:"center",letterSpacing:3},{id:203,text:"VINTAGE",category:"Signage",fontSize:36,fontFamily:"Alfa Slab One",fill:"#6d4c41",textAlign:"center"},{id:204,text:"MARKET",category:"Signage",fontSize:38,fontFamily:"Anton",fill:"#1f2937",textAlign:"center",letterSpacing:8},{id:205,text:"WELCOME",category:"Signage",fontSize:40,fontFamily:"Bebas Neue",fill:"#0f766e",textAlign:"center",letterSpacing:5},{id:206,text:"OFF DUTY",category:"Streetwear",fontSize:38,fontFamily:"Archivo Black",fill:"#111827",textAlign:"center"},{id:207,text:"STAY HUMBLE",category:"Streetwear",fontSize:30,fontFamily:"Bebas Neue",fill:"#e11d48",textAlign:"center",letterSpacing:4},{id:208,text:"NO RULES",category:"Streetwear",fontSize:34,fontFamily:"Bungee",fill:"#7c3aed",textAlign:"center"},{id:209,text:"HYPE",category:"Streetwear",fontSize:44,fontFamily:"Titan One",fill:"#f59e0b",textAlign:"center"},{id:210,text:"BORN TO STAND OUT",category:"Streetwear",fontSize:24,fontFamily:"Anton",fill:"#111827",textAlign:"center",letterSpacing:2},{id:211,text:"Forever & Always",category:"Wedding",fontSize:38,fontFamily:"Great Vibes",fill:"#9d174d",textAlign:"center"},{id:212,text:"Mr & Mrs",category:"Wedding",fontSize:44,fontFamily:"Great Vibes",fill:"#3f3f46",textAlign:"center"},{id:213,text:"Just Married",category:"Wedding",fontSize:36,fontFamily:"Pacifico",fill:"#be123c",textAlign:"center"},{id:214,text:"Save the Date",category:"Wedding",fontSize:34,fontFamily:"Dancing Script",fontWeight:"700",fill:"#1f2937",textAlign:"center"},{id:215,text:"A",category:"Monogram",fontSize:72,fontFamily:"Playfair Display",fontWeight:"700",fill:"#1f2937",textAlign:"center"},{id:216,text:"M & J",category:"Monogram",fontSize:44,fontFamily:"Great Vibes",fill:"#7c2d12",textAlign:"center"},{id:217,text:"EST. YOU",category:"Monogram",fontSize:30,fontFamily:"Staatliches",fill:"#111827",textAlign:"center",letterSpacing:4},{id:218,text:"RETRO",category:"Retro",fontSize:40,fontFamily:"Bungee Inline",fill:"#0ea5e9",textAlign:"center"},{id:219,text:"Sunset Vibes",category:"Retro",fontSize:36,fontFamily:"Lobster",fill:"#ea580c",textAlign:"center"},{id:220,text:"Good Times",category:"Retro",fontSize:36,fontFamily:"Pacifico",fill:"#b45309",textAlign:"center"},{id:221,text:"CLASSIC",category:"Retro",fontSize:34,fontFamily:"Playfair Display",fontStyle:"italic",fontWeight:"700",fill:"#3f3f46",textAlign:"center",letterSpacing:3},{id:222,text:"ADVENTURE AWAITS",category:"Outdoors",fontSize:24,fontFamily:"Oswald",fontWeight:"700",fill:"#166534",textAlign:"center",letterSpacing:3},{id:223,text:"Wander",category:"Outdoors",fontSize:44,fontFamily:"Sacramento",fill:"#065f46",textAlign:"center"},{id:224,text:"MOUNTAIN TIME",category:"Outdoors",fontSize:28,fontFamily:"Bebas Neue",fill:"#0c4a6e",textAlign:"center",letterSpacing:3},{id:225,text:"Explore More",category:"Outdoors",fontSize:34,fontFamily:"Caveat",fontWeight:"700",fill:"#7c2d12",textAlign:"center"},{id:226,text:"Blessed",category:"Faith",fontSize:44,fontFamily:"Great Vibes",fill:"#6d28d9",textAlign:"center"},{id:227,text:"FAITH",category:"Faith",fontSize:40,fontFamily:"Staatliches",fill:"#1e3a8a",textAlign:"center",letterSpacing:4},{id:228,text:"Grateful",category:"Faith",fontSize:38,fontFamily:"Dancing Script",fontWeight:"700",fill:"#9a3412",textAlign:"center"},{id:229,text:"But First, Coffee",category:"Foodie",fontSize:30,fontFamily:"Pacifico",fill:"#5b3a29",textAlign:"center"},{id:230,text:"Taco Tuesday",category:"Foodie",fontSize:34,fontFamily:"Lobster",fill:"#ca8a04",textAlign:"center"},{id:231,text:"FRESH",category:"Foodie",fontSize:42,fontFamily:"Anton",fill:"#15803d",textAlign:"center",letterSpacing:2},{id:232,text:"Birthday Squad",category:"Kids",fontSize:32,fontFamily:"Caveat",fontWeight:"700",fill:"#db2777",textAlign:"center"},{id:233,text:"Party Time",category:"Kids",fontSize:36,fontFamily:"Pacifico",fill:"#7c3aed",textAlign:"center"},{id:234,text:"Little Legend",category:"Kids",fontSize:34,fontFamily:"Dancing Script",fontWeight:"700",fill:"#2563eb",textAlign:"center"},{id:235,text:"The Family",category:"Family",fontSize:40,fontFamily:"Great Vibes",fill:"#3f3f46",textAlign:"center"},{id:236,text:"Family",category:"Family",fontSize:46,fontFamily:"Sacramento",fill:"#9a3412",textAlign:"center"},{id:237,text:"HOME",category:"Family",fontSize:40,fontFamily:"Alfa Slab One",fill:"#374151",textAlign:"center",letterSpacing:6},{id:238,text:"Gather",category:"Family",fontSize:40,fontFamily:"Playfair Display",fontStyle:"italic",fontWeight:"700",fill:"#1f2937",textAlign:"center"},{id:239,text:"GOOD VIBES",category:"Music",fontSize:34,fontFamily:"Bebas Neue",fill:"#0891b2",textAlign:"center",letterSpacing:4},{id:240,text:"On Repeat",category:"Music",fontSize:36,fontFamily:"Lobster",fill:"#7c3aed",textAlign:"center"},{id:241,text:"GAME OVER",category:"Gaming",fontSize:34,fontFamily:"Bungee",fill:"#dc2626",textAlign:"center"},{id:242,text:"PLAYER ONE",category:"Gaming",fontSize:32,fontFamily:"Squada One",fill:"#16a34a",textAlign:"center",letterSpacing:2},{id:243,text:"CHAMPIONS",category:"Sports",fontSize:30,fontFamily:"Anton",fill:"#b45309",textAlign:"center",letterSpacing:4},{id:244,text:"TEAM SPIRIT",category:"Sports",fontSize:30,fontFamily:"Bebas Neue",fill:"#1d4ed8",textAlign:"center",letterSpacing:3},{id:245,text:"Dream Big",category:"Motivational",fontSize:40,fontFamily:"Pacifico",fill:"#db2777",textAlign:"center"},{id:246,text:"Hustle",category:"Motivational",fontSize:44,fontFamily:"Alfa Slab One",fill:"#111827",textAlign:"center"},{id:247,text:"Good Vibes Only",category:"Motivational",fontSize:34,fontFamily:"Dancing Script",fontWeight:"700",fill:"#0d9488",textAlign:"center"},{id:248,text:"BOLD",category:"Motivational",fontSize:46,fontFamily:"Bungee",fill:"#ea580c",textAlign:"center"},{id:249,text:"Love You More",category:"Love",fontSize:38,fontFamily:"Great Vibes",fill:"#be123c",textAlign:"center"},{id:250,text:"xoxo",category:"Love",fontSize:48,fontFamily:"Sacramento",fill:"#db2777",textAlign:"center"},{id:251,text:"Bonjour",category:"Calligraphy",fontSize:46,fontFamily:"Great Vibes",fill:"#1f2937",textAlign:"center"},{id:252,text:"Forever & Always",category:"Calligraphy",fontSize:40,fontFamily:"Allura",fill:"#be123c",textAlign:"center"},{id:253,text:"Cheers",category:"Calligraphy",fontSize:48,fontFamily:"Parisienne",fill:"#0f766e",textAlign:"center"},{id:254,text:"Sweet Dreams",category:"Calligraphy",fontSize:42,fontFamily:"Tangerine",fontWeight:"700",fill:"#7c3aed",textAlign:"center"},{id:255,text:"Hello Gorgeous",category:"Calligraphy",fontSize:38,fontFamily:"Dancing Script",fontWeight:"700",fill:"#db2777",textAlign:"center"},{id:256,text:"Stay Wild",category:"Calligraphy",fontSize:42,fontFamily:"Sacramento",fill:"#16a34a",textAlign:"center"},{id:257,text:"Adventure Awaits",category:"Calligraphy",fontSize:34,fontFamily:"Satisfy",fill:"#1d4ed8",textAlign:"center"},{id:258,text:"Handcrafted",category:"Calligraphy",fontSize:36,fontFamily:"Kaushan Script",fill:"#b45309",textAlign:"center"},{id:259,text:"Just Married",category:"Calligraphy",fontSize:42,fontFamily:"Great Vibes",fill:"#9d174d",textAlign:"center"},{id:260,text:"Celebrate",category:"Calligraphy",fontSize:40,fontFamily:"Yellowtail",fill:"#c026d3",textAlign:"center"},{id:261,text:"With Love",category:"Calligraphy",fontSize:44,fontFamily:"Cookie",fill:"#e11d48",textAlign:"center"},{id:262,text:"Wanderlust",category:"Calligraphy",fontSize:38,fontFamily:"Marck Script",fill:"#0891b2",textAlign:"center"},{id:263,text:"Grateful",category:"Calligraphy",fontSize:44,fontFamily:"Pacifico",fill:"#ea580c",textAlign:"center"},{id:264,text:"Magnifique",category:"Calligraphy",fontSize:40,fontFamily:"Allura",fill:"#4338ca",textAlign:"center"},{id:265,text:"Bloom",category:"Calligraphy",fontSize:52,fontFamily:"Parisienne",fill:"#db2777",textAlign:"center"},{id:266,text:"Bella Vita",category:"Calligraphy",fontSize:42,fontFamily:"Satisfy",fill:"#0d9488",textAlign:"center"}],Ci=["Arial","Helvetica","Times New Roman","Georgia","Verdana","Courier New","Tahoma","Trebuchet MS","Impact","Comic Sans MS"],Xa=new Set(Ci),Si=[{name:"System",fonts:Ci},{name:"Signage & Display",fonts:["Bebas Neue","Anton","Oswald","Archivo Black","Teko","Fjalla One","Saira Condensed","Squada One","Staatliches","Passion One","Alfa Slab One","Titan One","Bowlby One SC","Bungee","Bungee Inline"]},{name:"Sans Serif",fonts:["Roboto","Open Sans","Montserrat","Lato","Poppins","Inter","Raleway","Work Sans","Nunito","Rubik","Barlow","Kanit","Mukta"]},{name:"Serif",fonts:["Merriweather","Playfair Display","Lora","PT Serif","Cormorant Garamond","Libre Baskerville","EB Garamond","Crimson Text","Bitter"]},{name:"Slab Serif",fonts:["Roboto Slab","Arvo","Zilla Slab","Josefin Slab"]},{name:"Script & Handwriting",fonts:["Dancing Script","Pacifico","Great Vibes","Satisfy","Sacramento","Caveat","Kaushan Script","Lobster","Cookie","Allura","Parisienne","Yellowtail","Tangerine","Marck Script","Shadows Into Light","Permanent Marker","Homemade Apple"]},{name:"Decorative & Stencil",fonts:["Black Ops One","Stardos Stencil","Special Elite","Monoton","Faster One","Press Start 2P","Creepster","Righteous","Audiowide","Orbitron","Russo One","Wallpoet"]},{name:"Monospace",fonts:["Roboto Mono","Source Code Pro","JetBrains Mono","Space Mono","IBM Plex Mono"]}],ia=Si.reduce((r,a)=>r.concat(a.fonts),[]),Qa=r=>Xa.has(r),Za="https://fonts.googleapis.com/css2",Qi=new Set(Ci),Ka=r=>`family=${r.trim().replace(/\s+/g,"+")}:wght@400;700`,Pe=r=>{if(typeof document>"u")return;const a=(r||[]).filter(n=>n&&!Qi.has(n));if(a.length===0)return;const s=10;for(let n=0;n<a.length;n+=s){const l=a.slice(n,n+s),h=document.createElement("link");h.rel="stylesheet",h.href=`${Za}?${l.map(Ka).join("&")}&display=swap`,h.setAttribute("data-simplex-font","1"),document.head.appendChild(h),l.forEach(f=>Qi.add(f))}},aa=async r=>{if(!(!r||Qa(r))&&(Pe([r]),!(typeof document>"u"||!document.fonts||!document.fonts.load)))try{await Promise.all([document.fonts.load(`400 24px "${r}"`),document.fonts.load(`700 24px "${r}"`)])}catch{}},ji=async r=>{const a=Array.from(new Set((r||[]).filter(Boolean)));await Promise.all(a.map(aa))},vi={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:"🛡️"}]}},oa=()=>Object.values(vi).flatMap(r=>r.icons.map(a=>({...a,category:r.name}))),Ja=r=>oa().filter(s=>s.name.toLowerCase().includes(r.toLowerCase())||s.category.toLowerCase().includes(r.toLowerCase())),to=({onSelectIcon:r,disabled:a=!1})=>{const[s,n]=y.useState(!1),[l,h]=y.useState(""),[f,k]=y.useState("all"),C=y.useRef(null);y.useEffect(()=>{const v=B=>{C.current&&!C.current.contains(B.target)&&n(!1)};return document.addEventListener("mousedown",v),()=>document.removeEventListener("mousedown",v)},[]);const E=v=>{r(v),n(!1),h("")},M=(()=>{let v=oa();if(l.trim()&&(v=Ja(l)),f!=="all"){const B=vi[f];B&&(v=v.filter(I=>I.category===B.name))}return v})();return e.jsxs("div",{className:"icon-selector",ref:C,children:[e.jsxs("button",{className:"toolbar-btn dropdown-trigger",disabled:a,onClick:()=>n(!s),title:"Add Icon",children:[e.jsx("span",{className:"icon",children:"🎯"}),e.jsx("span",{className:"label",children:"Icons"}),e.jsx("span",{className:"dropdown-arrow",children:"▼"})]}),s&&e.jsxs("div",{className:"icon-dropdown",children:[e.jsxs("div",{className:"icon-dropdown-header",children:[e.jsx("input",{type:"text",placeholder:"Search icons...",value:l,onChange:v=>h(v.target.value),className:"icon-search"}),e.jsxs("select",{value:f,onChange:v=>k(v.target.value),className:"category-select",children:[e.jsx("option",{value:"all",children:"All Categories"}),Object.entries(vi).map(([v,B])=>e.jsx("option",{value:v,children:B.name},v))]})]}),e.jsx("div",{className:"icon-grid",children:M.length===0?e.jsx("div",{className:"no-icons",children:l?"No icons found":"No icons in this category"}):M.map((v,B)=>e.jsxs("button",{className:"icon-item",onClick:()=>E(v),title:`${v.name} (${v.category})`,children:[e.jsx("span",{className:"icon-symbol",children:v.symbol}),e.jsx("span",{className:"icon-name",children:v.name})]},`${v.name}-${B}`))}),e.jsx("div",{className:"icon-dropdown-footer",children:e.jsxs("span",{className:"icon-count",children:[M.length," icon",M.length!==1?"s":""]})})]})]})},eo=({isOpen:r,onClose:a,onAddQRCode:s,theme:n})=>{const[l,h]=y.useState(""),[f,k]=y.useState(""),[C,E]=y.useState(200),[N,M]=y.useState("M"),v=()=>{if(!l.trim())return;const H={width:C,errorCorrectionLevel:N,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};Ga.toDataURL(l,H,(Q,z)=>{if(Q){console.error("QR Code generation error:",Q);return}k(z)})},B=()=>{if(!f)return;const H=new Image;H.onload=()=>{s({type:"qrcode",src:f,data:l,width:C,height:C,x:100,y:100,imageObject:H}),I()},H.src=f},I=()=>{h(""),k(""),a()};return r?e.jsx("div",{className:"qr-modal-overlay",onClick:I,children:e.jsxs("div",{className:"qr-modal-content",onClick:H=>H.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:I,"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:l,onChange:H=>h(H.target.value),placeholder:"https://example.com or any text...",rows:3})]}),e.jsxs("div",{className:"qr-options",children:[e.jsxs("div",{className:"qr-form-group",children:[e.jsx("label",{htmlFor:"qr-size",children:"Size (px)"}),e.jsx("input",{type:"number",id:"qr-size",value:C,onChange:H=>E(Math.max(50,Math.min(500,parseInt(H.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:N,onChange:H=>M(H.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:v,disabled:!l.trim(),children:"Generate QR Code"})}),f&&e.jsxs("div",{className:"qr-preview",children:[e.jsx("h4",{children:"Preview"}),e.jsx("div",{className:"qr-preview-container",children:e.jsx("img",{src:f,alt:"QR Code Preview"})}),e.jsx("button",{className:"qr-btn qr-btn-add",onClick:B,style:{backgroundColor:(n==null?void 0:n.primaryColor)||"#3b82f6",borderColor:(n==null?void 0:n.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},io=({isOpen:r,onClose:a,onAddBarcode:s,theme:n})=>{const[l,h]=y.useState(""),[f,k]=y.useState("CODE128"),[C,E]=y.useState(null),[N,M]=y.useState(2),[v,B]=y.useState(100),[I,H]=y.useState(20),[Q,z]=y.useState("center"),[T,S]=y.useState("bottom"),[L,j]=y.useState(10),it=y.useRef(null),J=[{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)"}],yt=()=>{if(l.trim())try{E(e.jsx(_a,{value:l,format:f,width:N,height:v,fontSize:I,textAlign:Q,textPosition:T,margin:L,background:"#ffffff",lineColor:"#000000"}))}catch(O){console.error("Barcode generation error:",O),alert("Invalid data for selected barcode format. Please check your input.")}},gt=()=>{var O,R,nt,rt;if(!(!C||!it.current))try{const mt=it.current.querySelector("svg");if(!mt){console.error("No SVG element found in barcode");return}const w=document.createElement("canvas"),q=w.getContext("2d"),P=mt.getBoundingClientRect(),u=((R=(O=mt.width)==null?void 0:O.baseVal)==null?void 0:R.value)||P.width||200,A=((rt=(nt=mt.height)==null?void 0:nt.baseVal)==null?void 0:rt.value)||P.height||100;w.width=u,w.height=A;const U=new XMLSerializer().serializeToString(mt),at=new Blob([U],{type:"image/svg+xml;charset=utf-8"}),xt=URL.createObjectURL(at),dt=new Image;dt.onload=()=>{q.drawImage(dt,0,0);const It=w.toDataURL("image/png"),kt=new Image;kt.onload=()=>{s({type:"barcode",src:It,data:l,format:f,width:u,height:A,x:100,y:100,imageObject:kt}),jt()},kt.src=It,URL.revokeObjectURL(xt)},dt.src=xt}catch(mt){console.error("Error adding barcode to canvas:",mt),alert("Failed to add barcode to canvas. Please try again.")}},jt=()=>{h(""),E(null),k("CODE128"),M(2),B(100),H(20),a()},_=O=>({CODE128:"Supports all ASCII characters. Most versatile format.",EAN13:"Requires exactly 12 digits (13th is checksum). Used for retail products.",EAN8:"Requires exactly 7 digits (8th is checksum). Compact version of EAN-13.",UPC:"Requires exactly 11 digits (12th is checksum). Used in North America.",CODE39:"Supports letters, numbers, and some symbols. Widely used.",ITF14:"Requires exactly 13 digits (14th is checksum). Used for shipping containers.",MSI:"Numeric only. Used in retail inventory.",pharmacode:"Numbers 3-131070. Used in pharmaceutical industry.",codabar:"Supports 0-9, A-D, and symbols. Used in libraries."})[O]||"";return r?e.jsx("div",{className:"barcode-modal-overlay",onClick:jt,children:e.jsxs("div",{className:"barcode-modal-content",onClick:O=>O.stopPropagation(),children:[e.jsxs("div",{className:"barcode-modal-header",children:[e.jsx("h3",{children:"Generate Barcode"}),e.jsx("button",{className:"barcode-modal-close",onClick:jt,"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:l,onChange:O=>h(O.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:f,onChange:O=>k(O.target.value),children:J.map(O=>e.jsx("option",{value:O.value,children:O.label},O.value))}),e.jsx("small",{className:"format-description",children:_(f)})]}),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:N,onChange:O=>M(parseFloat(O.target.value))}),e.jsxs("span",{className:"range-value",children:[N,"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:v,onChange:O=>B(parseInt(O.target.value))}),e.jsxs("span",{className:"range-value",children:[v,"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:I,onChange:O=>H(parseInt(O.target.value))}),e.jsxs("span",{className:"range-value",children:[I,"px"]})]}),e.jsxs("div",{className:"barcode-form-group",children:[e.jsx("label",{htmlFor:"text-position",children:"Text Position"}),e.jsxs("select",{id:"text-position",value:T,onChange:O=>S(O.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:yt,disabled:!l.trim(),children:"Generate Barcode"})}),C&&e.jsxs("div",{className:"barcode-preview",children:[e.jsx("h4",{children:"Preview"}),e.jsx("div",{className:"barcode-preview-container",ref:it,children:C}),e.jsx("button",{className:"barcode-btn barcode-btn-add",onClick:gt,style:{backgroundColor:(n==null?void 0:n.primaryColor)||"#3b82f6",borderColor:(n==null?void 0:n.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},ao=({theme:r})=>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:(r==null?void 0:r.primaryColor)||"#4c5bf2",color:"white",padding:"10px 20px",borderRadius:"4px",textDecoration:"none",fontWeight:"500",transition:"background-color 0.2s ease"},children:"Get API Key"})]}),Zi=()=>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:`
             @keyframes spin {
                 0% { transform: rotate(0deg); }
                 100% { transform: rotate(360deg); }
             }
-        `})]}),Ze=({isOpen:d,onClose:o,onAddSticker:a,theme:l,apiKey:s,apiEndpoint:f})=>{const[x,c]=y.useState([]),[u,g]=y.useState(!1),[C,T]=y.useState(null),[w,I]=y.useState(""),[j,b]=y.useState(""),[B,D]=y.useState({});y.useRef(null);const[F,$]=y.useState(!1),[z,W]=y.useState(!1),[ot,U]=y.useState(!1),nt=`${f}/api/v1/designer`;y.useEffect(()=>{d&&s&&q()},[d,s]);const q=async()=>{const M=sessionStorage.getItem("apc_x_sub_status");M==="active"?($(!0),W(!0),Y()):M==="inactive"?($(!1),W(!0)):(U(!0),await it())},it=async()=>{if(!s){$(!1),W(!0),U(!1);return}const M=`${nt}/get-subscription-status/${s}`;try{(await ie.get(M)).data.object==="active"?(sessionStorage.setItem("apc_x_sub_status","active"),$(!0),Y()):(sessionStorage.setItem("apc_x_sub_status","inactive"),$(!1))}catch(G){console.error("Subscription check failed:",G),sessionStorage.setItem("apc_x_sub_status","inactive"),$(!1)}finally{U(!1),W(!0)}},Y=async()=>{const M=sessionStorage.getItem("apc_stickers");if(M)try{const G=JSON.parse(M);c(G);return}catch{console.warn("Failed to parse cached stickers, fetching fresh data")}g(!0),T(null);try{const G=await ie.get(`${nt}/get-stickers`);if(G.data&&G.data.object&&G.data.object.contents){const N=G.data.object.contents;c(N),sessionStorage.setItem("apc_stickers",JSON.stringify(N))}else throw new Error("Invalid response format")}catch(G){console.error("Error fetching stickers:",G),T("Failed to load stickers. Please try again.")}finally{g(!1)}},O=(M,G)=>{a({type:"sticker",src:M,name:G,width:100,height:100,x:100,y:100}),o()},J=M=>{D(G=>({...G,[M]:!G[M]}))},rt=M=>{const G={};return M.forEach(N=>{const m=N.name.split("/");let A=G;m.forEach((Q,_)=>{A[Q]||(A[Q]=_===m.length-1?N:{}),A=A[Q]})}),G},K=(M,G="",N=0)=>i.jsx("div",{className:"sticker-tree-level",style:{paddingLeft:`${N*15}px`},children:Object.keys(M).map(m=>{const A=`${G}/${m}`,Q=B[A];return M[m].type==="image"?!j||m.toLowerCase().includes(j.toLowerCase())?i.jsx("div",{className:"sticker-item",onClick:()=>O(M[m].url,m),children:i.jsx("div",{className:"sticker-preview",children:i.jsx("img",{src:M[m].url,alt:m,loading:"lazy",onError:Z=>{Z.target.style.display="none"}})})},A):null:i.jsxs("div",{className:"sticker-category",children:[i.jsxs("div",{className:"category-header",onClick:()=>J(A),children:[i.jsx("span",{className:`expand-icon ${Q?"expanded":""}`,children:"▶"}),i.jsx("span",{className:"category-name",children:m})]}),Q&&K(M[m],A,N+1)]},A)})}),et=x.filter(M=>!j||M.name.toLowerCase().includes(j.toLowerCase()));return d?i.jsx("div",{className:"sticker-modal-overlay",onClick:o,children:i.jsxs("div",{className:"sticker-modal-content",onClick:M=>M.stopPropagation(),children:[i.jsxs("div",{className:"sticker-modal-header",children:[i.jsx("h3",{children:"Stickers"}),i.jsx("button",{className:"sticker-modal-close",onClick:o,"aria-label":"Close",children:"×"})]}),i.jsxs("div",{className:"sticker-modal-body",children:[ot&&i.jsx(se,{}),!F&&!ot&&z&&i.jsx(Ke,{theme:l}),F&&z&&i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"sticker-modal-controls",children:i.jsx("div",{className:"search-container",children:i.jsx("input",{type:"text",placeholder:"Search stickers...",value:j,onChange:M=>b(M.target.value),className:"sticker-search"})})}),u&&i.jsx(se,{}),C&&i.jsxs("div",{className:"sticker-error",children:[i.jsx("p",{children:C}),i.jsx("button",{onClick:Y,children:"Retry"})]}),!u&&!C&&x.length>0&&i.jsx("div",{className:"sticker-grid",children:K(rt(et))})]})]})]})}):null},ti=[{id:1,name:"Rose Bouquet",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#ffe6f0" stroke="#ff69b4" stroke-width="2"/>
-                <circle cx="60" cy="45" r="15" fill="#ff1493" opacity="0.7"/>
-                <circle cx="45" cy="60" r="12" fill="#ff69b4" opacity="0.8"/>
-                <circle cx="75" cy="60" r="12" fill="#ff69b4" opacity="0.8"/>
-                <circle cx="60" cy="75" r="10" fill="#ffb6c1" opacity="0.9"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b0000">Rose Bouquet</text>
-            </svg>
-        `)}`,category:"Floral",description:"Elegant rose bouquet design"},{id:2,name:"Sunflower",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff8dc" stroke="#ffd700" stroke-width="2"/>
-                <circle cx="60" cy="60" r="25" fill="#ffd700"/>
-                <circle cx="60" cy="60" r="15" fill="#8b4513"/>
-                <circle cx="40" cy="40" r="8" fill="#ff8c00" opacity="0.8"/>
-                <circle cx="80" cy="40" r="8" fill="#ff8c00" opacity="0.8"/>
-                <circle cx="40" cy="80" r="8" fill="#ff8c00" opacity="0.8"/>
-                <circle cx="80" cy="80" r="8" fill="#ff8c00" opacity="0.8"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Sunflower</text>
-            </svg>
-        `)}`,category:"Floral",description:"Bright sunflower pattern"},{id:3,name:"Cherry Blossom",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fdf5f8" stroke="#ffb7c5" stroke-width="2"/>
-                <line x1="20" y1="80" x2="100" y2="40" stroke="#8b4513" stroke-width="3"/>
-                <circle cx="35" cy="70" r="6" fill="#ffb7c5"/>
-                <circle cx="50" cy="62" r="6" fill="#ffc0cb"/>
-                <circle cx="65" cy="54" r="6" fill="#ffb7c5"/>
-                <circle cx="80" cy="46" r="6" fill="#ffc0cb"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b0000">Cherry Blossom</text>
-            </svg>
-        `)}`,category:"Floral",description:"Delicate cherry blossom branch"},{id:4,name:"Lavender Sprig",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f0ff" stroke="#9370db" stroke-width="2"/>
-                <line x1="60" y1="20" x2="60" y2="90" stroke="#228b22" stroke-width="4"/>
-                <circle cx="58" cy="30" r="3" fill="#9370db"/>
-                <circle cx="62" cy="32" r="3" fill="#8a2be2"/>
-                <circle cx="58" cy="38" r="3" fill="#9370db"/>
-                <circle cx="62" cy="40" r="3" fill="#8a2be2"/>
-                <circle cx="58" cy="46" r="3" fill="#9370db"/>
-                <circle cx="62" cy="48" r="3" fill="#8a2be2"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#4b0082">Lavender</text>
-            </svg>
-        `)}`,category:"Floral",description:"Peaceful lavender sprig"},{id:5,name:"Tulip Garden",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0fff0" stroke="#32cd32" stroke-width="2"/>
-                <ellipse cx="40" cy="40" rx="8" ry="12" fill="#ff6347"/>
-                <ellipse cx="60" cy="35" rx="8" ry="12" fill="#ff1493"/>
-                <ellipse cx="80" cy="42" rx="8" ry="12" fill="#ffd700"/>
-                <line x1="40" y1="52" x2="40" y2="75" stroke="#228b22" stroke-width="3"/>
-                <line x1="60" y1="47" x2="60" y2="75" stroke="#228b22" stroke-width="3"/>
-                <line x1="80" y1="54" x2="80" y2="75" stroke="#228b22" stroke-width="3"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Tulips</text>
-            </svg>
-        `)}`,category:"Floral",description:"Colorful tulip garden"},{id:6,name:"Iris Bloom",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f8f8ff" stroke="#4169e1" stroke-width="2"/>
-                <path d="M60 30 Q45 45 50 60 Q60 45 70 60 Q75 45 60 30" fill="#4169e1" opacity="0.8"/>
-                <path d="M50 60 Q35 75 45 85 Q55 70 60 85 Q65 70 75 85 Q85 75 70 60" fill="#9370db" opacity="0.7"/>
-                <line x1="60" y1="85" x2="60" y2="95" stroke="#228b22" stroke-width="3"/>
-                <text x="60" y="110" text-anchor="middle" font-family="Arial" font-size="10" fill="#4169e1">Iris</text>
-            </svg>
-        `)}`,category:"Floral",description:"Elegant iris flower"},{id:7,name:"Daisy Chain",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffaf0" stroke="#fff8dc" stroke-width="2"/>
-                <g fill="#ffffff" stroke="#ffd700" stroke-width="1">
-                    <circle cx="35" cy="50" r="12"/>
-                    <circle cx="60" cy="40" r="12"/>
-                    <circle cx="85" cy="50" r="12"/>
-                    <circle cx="50" cy="70" r="12"/>
-                    <circle cx="70" cy="70" r="12"/>
-                </g>
-                <g fill="#ffd700">
-                    <circle cx="35" cy="50" r="4"/>
-                    <circle cx="60" cy="40" r="4"/>
-                    <circle cx="85" cy="50" r="4"/>
-                    <circle cx="50" cy="70" r="4"/>
-                    <circle cx="70" cy="70" r="4"/>
-                </g>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#b8860b">Daisies</text>
-            </svg>
-        `)}`,category:"Floral",description:"Sweet daisy chain"},{id:8,name:"Lotus Flower",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#ff69b4" stroke-width="2"/>
-                <g transform="translate(60,60)">
-                    <ellipse rx="8" ry="20" fill="#ff69b4" opacity="0.8" transform="rotate(0)"/>
-                    <ellipse rx="8" ry="20" fill="#ff1493" opacity="0.8" transform="rotate(60)"/>
-                    <ellipse rx="8" ry="20" fill="#ff69b4" opacity="0.8" transform="rotate(120)"/>
-                    <ellipse rx="8" ry="20" fill="#ff1493" opacity="0.8" transform="rotate(180)"/>
-                    <ellipse rx="8" ry="20" fill="#ff69b4" opacity="0.8" transform="rotate(240)"/>
-                    <ellipse rx="8" ry="20" fill="#ff1493" opacity="0.8" transform="rotate(300)"/>
-                    <circle r="8" fill="#ffd700"/>
-                </g>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b0000">Lotus</text>
-            </svg>
-        `)}`,category:"Floral",description:"Sacred lotus bloom"},{id:9,name:"Hibiscus",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff5ee" stroke="#ff4500" stroke-width="2"/>
-                <g transform="translate(60,55)">
-                    <path d="M0,-20 Q15,-10 20,0 Q15,10 0,20 Q-15,10 -20,0 Q-15,-10 0,-20" fill="#ff4500" opacity="0.8"/>
-                    <path d="M-20,0 Q-10,-15 0,-20 Q10,-15 20,0 Q10,15 0,20 Q-10,15 -20,0" fill="#ff6347" opacity="0.7"/>
-                    <circle r="5" fill="#8b0000"/>
-                    <line x1="0" y1="0" x2="0" y2="15" stroke="#8b0000" stroke-width="2"/>
-                </g>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b0000">Hibiscus</text>
-            </svg>
-        `)}`,category:"Floral",description:"Tropical hibiscus flower"},{id:10,name:"Lily of Valley",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5fffa" stroke="#98fb98" stroke-width="2"/>
-                <line x1="50" y1="20" x2="50" y2="80" stroke="#228b22" stroke-width="3"/>
-                <path d="M50 30 Q45 25 40 30 Q45 35 50 30" fill="#ffffff" stroke="#98fb98"/>
-                <path d="M50 40 Q55 35 60 40 Q55 45 50 40" fill="#ffffff" stroke="#98fb98"/>
-                <path d="M50 50 Q45 45 40 50 Q45 55 50 50" fill="#ffffff" stroke="#98fb98"/>
-                <path d="M50 60 Q55 55 60 60 Q55 65 50 60" fill="#ffffff" stroke="#98fb98"/>
-                <path d="M70 25 Q80 20 85 35 Q75 40 70 25" fill="#32cd32" opacity="0.7"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Lily Valley</text>
-            </svg>
-        `)}`,category:"Floral",description:"Delicate lily of the valley"},{id:11,name:"Wildflower Meadow",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0fff0" stroke="#adff2f" stroke-width="2"/>
-                <circle cx="30" cy="40" r="5" fill="#ff69b4"/>
-                <circle cx="45" cy="35" r="4" fill="#ffd700"/>
-                <circle cx="65" cy="38" r="6" fill="#9370db"/>
-                <circle cx="80" cy="42" r="5" fill="#ff4500"/>
-                <circle cx="90" cy="35" r="4" fill="#32cd32"/>
-                <circle cx="25" cy="60" r="4" fill="#ff1493"/>
-                <circle cx="40" cy="65" r="5" fill="#00ced1"/>
-                <circle cx="55" cy="58" r="4" fill="#ffa500"/>
-                <circle cx="75" cy="62" r="6" fill="#ba55d3"/>
-                <circle cx="95" cy="60" r="4" fill="#dc143c"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Wildflowers</text>
-            </svg>
-        `)}`,category:"Floral",description:"Colorful wildflower meadow"},{id:12,name:"Peony Bloom",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff0f5" stroke="#ff69b4" stroke-width="2"/>
-                <g transform="translate(60,55)">
-                    <circle r="20" fill="#ffb6c1" opacity="0.6"/>
-                    <circle r="15" fill="#ff69b4" opacity="0.7"/>
-                    <circle r="10" fill="#ff1493" opacity="0.8"/>
-                    <circle r="5" fill="#dc143c" opacity="0.9"/>
-                </g>
-                <ellipse cx="45" cy="70" rx="8" ry="4" fill="#228b22" opacity="0.7"/>
-                <ellipse cx="75" cy="72" rx="8" ry="4" fill="#228b22" opacity="0.7"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b0000">Peony</text>
-            </svg>
-        `)}`,category:"Floral",description:"Full peony bloom"},{id:13,name:"Poppy Field",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff8dc" stroke="#ff4500" stroke-width="2"/>
-                <circle cx="35" cy="45" r="10" fill="#ff4500" opacity="0.8"/>
-                <circle cx="60" cy="40" r="12" fill="#ff6347" opacity="0.8"/>
-                <circle cx="85" cy="48" r="10" fill="#ff4500" opacity="0.8"/>
-                <circle cx="50" cy="65" r="11" fill="#ff6347" opacity="0.8"/>
-                <circle cx="75" cy="70" r="9" fill="#ff4500" opacity="0.8"/>
-                <g fill="#000000" opacity="0.6">
-                    <circle cx="35" cy="45" r="3"/>
-                    <circle cx="60" cy="40" r="3"/>
-                    <circle cx="85" cy="48" r="3"/>
-                    <circle cx="50" cy="65" r="3"/>
-                    <circle cx="75" cy="70" r="3"/>
-                </g>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b0000">Poppies</text>
-            </svg>
-        `)}`,category:"Floral",description:"Vibrant poppy field"},{id:14,name:"Orchid Spray",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#faf0e6" stroke="#dda0dd" stroke-width="2"/>
-                <path d="M40 30 Q50 25 60 30 Q50 35 40 30" fill="#dda0dd" opacity="0.8"/>
-                <path d="M40 45 Q50 40 60 45 Q50 50 40 45" fill="#da70d6" opacity="0.8"/>
-                <path d="M40 60 Q50 55 60 60 Q50 65 40 60" fill="#dda0dd" opacity="0.8"/>
-                <circle cx="45" cy="30" r="3" fill="#8b008b"/>
-                <circle cx="45" cy="45" r="3" fill="#8b008b"/>
-                <circle cx="45" cy="60" r="3" fill="#8b008b"/>
-                <line x1="70" y1="25" x2="75" y2="70" stroke="#228b22" stroke-width="2"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b008b">Orchid</text>
-            </svg>
-        `)}`,category:"Floral",description:"Exotic orchid spray"},{id:15,name:"Magnolia Blossom",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffaf0" stroke="#f5deb3" stroke-width="2"/>
-                <g transform="translate(60,55)">
-                    <ellipse rx="12" ry="25" fill="#f5deb3" opacity="0.8" transform="rotate(0)"/>
-                    <ellipse rx="12" ry="25" fill="#fff8dc" opacity="0.9" transform="rotate(45)"/>
-                    <ellipse rx="12" ry="25" fill="#f5deb3" opacity="0.8" transform="rotate(90)"/>
-                    <ellipse rx="12" ry="25" fill="#fff8dc" opacity="0.9" transform="rotate(135)"/>
-                    <ellipse rx="12" ry="25" fill="#f5deb3" opacity="0.8" transform="rotate(180)"/>
-                    <ellipse rx="12" ry="25" fill="#fff8dc" opacity="0.9" transform="rotate(225)"/>
-                    <ellipse rx="12" ry="25" fill="#f5deb3" opacity="0.8" transform="rotate(270)"/>
-                    <ellipse rx="12" ry="25" fill="#fff8dc" opacity="0.9" transform="rotate(315)"/>
-                    <circle r="8" fill="#daa520"/>
-                </g>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b7355">Magnolia</text>
-            </svg>
-        `)}`,category:"Floral",description:"Southern magnolia blossom"},{id:16,name:"Morning Glory Vine",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#4169e1" stroke-width="2"/>
-                <path d="M20 80 Q40 60 60 70 Q80 50 100 60" stroke="#228b22" stroke-width="3" fill="none"/>
-                <g transform="translate(35,65)">
-                    <circle r="8" fill="#4169e1" opacity="0.8"/>
-                    <circle r="4" fill="#ffffff"/>
-                </g>
-                <g transform="translate(65,60)">
-                    <circle r="8" fill="#6495ed" opacity="0.8"/>
-                    <circle r="4" fill="#ffffff"/>
-                </g>
-                <g transform="translate(85,55)">
-                    <circle r="8" fill="#4169e1" opacity="0.8"/>
-                    <circle r="4" fill="#ffffff"/>
-                </g>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#4169e1">Morning Glory</text>
-            </svg>
-        `)}`,category:"Floral",description:"Climbing morning glory vine"},{id:17,name:"Jasmine Flowers",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffef7" stroke="#ffffff" stroke-width="2"/>
-                <g fill="#ffffff" stroke="#f5f5dc" stroke-width="1">
-                    <g transform="translate(40,40)">
-                        <circle r="4"/>
-                        <circle cx="6" cy="0" r="3"/>
-                        <circle cx="-6" cy="0" r="3"/>
-                        <circle cx="0" cy="6" r="3"/>
-                        <circle cx="0" cy="-6" r="3"/>
-                    </g>
-                    <g transform="translate(75,35)">
-                        <circle r="4"/>
-                        <circle cx="6" cy="0" r="3"/>
-                        <circle cx="-6" cy="0" r="3"/>
-                        <circle cx="0" cy="6" r="3"/>
-                        <circle cx="0" cy="-6" r="3"/>
-                    </g>
-                    <g transform="translate(55,65)">
-                        <circle r="4"/>
-                        <circle cx="6" cy="0" r="3"/>
-                        <circle cx="-6" cy="0" r="3"/>
-                        <circle cx="0" cy="6" r="3"/>
-                        <circle cx="0" cy="-6" r="3"/>
-                    </g>
-                </g>
-                <path d="M30 50 Q50 30 70 45 Q90 25 100 40" stroke="#228b22" stroke-width="2" fill="none"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b7355">Jasmine</text>
-            </svg>
-        `)}`,category:"Floral",description:"Fragrant jasmine flowers"},{id:18,name:"Daffodil Cluster",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffacd" stroke="#ffd700" stroke-width="2"/>
-                <g transform="translate(45,45)">
-                    <circle r="12" fill="#ffd700" opacity="0.8"/>
-                    <circle r="6" fill="#ff8c00"/>
-                </g>
-                <g transform="translate(75,50)">
-                    <circle r="12" fill="#ffd700" opacity="0.8"/>
-                    <circle r="6" fill="#ff8c00"/>
-                </g>
-                <g transform="translate(60,70)">
-                    <circle r="12" fill="#ffd700" opacity="0.8"/>
-                    <circle r="6" fill="#ff8c00"/>
-                </g>
-                <line x1="45" y1="57" x2="45" y2="85" stroke="#228b22" stroke-width="3"/>
-                <line x1="75" y1="62" x2="75" y2="85" stroke="#228b22" stroke-width="3"/>
-                <line x1="60" y1="82" x2="60" y2="85" stroke="#228b22" stroke-width="3"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b7355">Daffodils</text>
-            </svg>
-        `)}`,category:"Floral",description:"Spring daffodil cluster"},{id:19,name:"Carnation Bouquet",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff5ee" stroke="#ff69b4" stroke-width="2"/>
-                <g transform="translate(50,45)">
-                    <circle r="10" fill="#ff69b4" opacity="0.8"/>
-                    <circle r="8" fill="#ffb6c1" opacity="0.6"/>
-                    <circle r="6" fill="#ffc0cb" opacity="0.4"/>
-                </g>
-                <g transform="translate(70,50)">
-                    <circle r="10" fill="#dc143c" opacity="0.8"/>
-                    <circle r="8" fill="#ff1493" opacity="0.6"/>
-                    <circle r="6" fill="#ff69b4" opacity="0.4"/>
-                </g>
-                <g transform="translate(60,70)">
-                    <circle r="10" fill="#ffffff" stroke="#ff69b4"/>
-                    <circle r="8" fill="#fff0f5" opacity="0.6"/>
-                    <circle r="6" fill="#ffb6c1" opacity="0.4"/>
-                </g>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b0000">Carnations</text>
-            </svg>
-        `)}`,category:"Floral",description:"Ruffled carnation bouquet"},{id:20,name:"Violet Patch",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f8f8ff" stroke="#9370db" stroke-width="2"/>
-                <g fill="#9370db" opacity="0.8">
-                    <circle cx="35" cy="40" r="5"/>
-                    <circle cx="55" cy="35" r="5"/>
-                    <circle cx="75" cy="42" r="5"/>
-                    <circle cx="85" cy="38" r="5"/>
-                    <circle cx="45" cy="55" r="5"/>
-                    <circle cx="65" cy="52" r="5"/>
-                    <circle cx="25" cy="60" r="5"/>
-                    <circle cx="80" cy="65" r="5"/>
-                </g>
-                <g fill="#32cd32" opacity="0.6">
-                    <ellipse cx="30" cy="70" rx="6" ry="3"/>
-                    <ellipse cx="50" cy="75" rx="6" ry="3"/>
-                    <ellipse cx="70" cy="72" rx="6" ry="3"/>
-                    <ellipse cx="90" cy="75" rx="6" ry="3"/>
-                </g>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#4b0082">Violets</text>
-            </svg>
-        `)}`,category:"Floral",description:"Tiny violet patch"},{id:21,name:"Butterfly",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#87ceeb" stroke-width="2"/>
-                <ellipse cx="45" cy="45" rx="15" ry="20" fill="#9370db" opacity="0.7"/>
-                <ellipse cx="75" cy="45" rx="15" ry="20" fill="#9370db" opacity="0.7"/>
-                <ellipse cx="45" cy="75" rx="12" ry="15" fill="#ba55d3" opacity="0.8"/>
-                <ellipse cx="75" cy="75" rx="12" ry="15" fill="#ba55d3" opacity="0.8"/>
-                <line x1="60" y1="30" x2="60" y2="90" stroke="#4b0082" stroke-width="3"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#4b0082">Butterfly</text>
-            </svg>
-        `)}`,category:"Nature",description:"Colorful butterfly design"},{id:22,name:"Mountain Range",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#4682b4" stroke-width="2"/>
-                <polygon points="20,80 40,40 60,60 80,30 100,50 120,80" fill="#708090" opacity="0.8"/>
-                <polygon points="30,80 50,50 70,65 90,45 110,60 120,80" fill="#2f4f4f" opacity="0.6"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#2f4f4f">Mountains</text>
-            </svg>
-        `)}`,category:"Nature",description:"Mountain silhouette design"},{id:23,name:"Eagle Soaring",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f5dc" stroke="#8b4513" stroke-width="2"/>
-                <path d="M20 60 Q40 40 60 60 Q80 40 100 60" stroke="#8b4513" stroke-width="3" fill="none"/>
-                <ellipse cx="60" cy="60" rx="8" ry="4" fill="#8b4513"/>
-                <circle cx="57" cy="58" r="2" fill="#000000"/>
-                <path d="M60 64 L62 68 L58 68 Z" fill="#ff8c00"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Eagle</text>
-            </svg>
-        `)}`,category:"Nature",description:"Majestic soaring eagle"},{id:24,name:"Forest Trees",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0fff0" stroke="#228b22" stroke-width="2"/>
-                <rect x="25" y="65" width="4" height="15" fill="#8b4513"/>
-                <rect x="45" y="60" width="4" height="20" fill="#8b4513"/>
-                <rect x="65" y="62" width="4" height="18" fill="#8b4513"/>
-                <rect x="85" y="58" width="4" height="22" fill="#8b4513"/>
-                <circle cx="27" cy="58" r="10" fill="#228b22" opacity="0.8"/>
-                <circle cx="47" cy="52" r="12" fill="#32cd32" opacity="0.8"/>
-                <circle cx="67" cy="54" r="11" fill="#228b22" opacity="0.8"/>
-                <circle cx="87" cy="50" r="13" fill="#32cd32" opacity="0.8"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Forest</text>
-            </svg>
-        `)}`,category:"Nature",description:"Dense forest scene"},{id:25,name:"Hummingbird",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#e6f3ff" stroke="#00ced1" stroke-width="2"/>
-                <ellipse cx="60" cy="55" rx="12" ry="6" fill="#32cd32"/>
-                <ellipse cx="45" cy="52" rx="8" ry="3" fill="#00ced1" opacity="0.7"/>
-                <ellipse cx="75" cy="52" rx="8" ry="3" fill="#00ced1" opacity="0.7"/>
-                <line x1="48" y1="55" x2="35" y2="55" stroke="#000000" stroke-width="2"/>
-                <circle cx="65" cy="53" r="1" fill="#000000"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#00ced1">Hummingbird</text>
-            </svg>
-        `)}`,category:"Nature",description:"Tiny hummingbird"},{id:26,name:"Ocean Waves",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#4682b4" stroke-width="2"/>
-                <path d="M0 60 Q30 40 60 60 Q90 80 120 60" stroke="#4682b4" stroke-width="4" fill="none"/>
-                <path d="M0 70 Q30 50 60 70 Q90 90 120 70" stroke="#87ceeb" stroke-width="3" fill="none"/>
-                <path d="M0 80 Q30 60 60 80 Q90 100 120 80" stroke="#b0e0e6" stroke-width="2" fill="none"/>
-                <text x="60" y="110" text-anchor="middle" font-family="Arial" font-size="10" fill="#4682b4">Ocean Waves</text>
-            </svg>
-        `)}`,category:"Nature",description:"Rolling ocean waves"},{id:27,name:"Deer Silhouette",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f5dc" stroke="#8b4513" stroke-width="2"/>
-                <ellipse cx="60" cy="65" rx="15" ry="8" fill="#8b4513"/>
-                <ellipse cx="55" cy="50" rx="6" ry="8" fill="#8b4513"/>
-                <line x1="55" y1="42" x2="50" y2="35" stroke="#8b4513" stroke-width="2"/>
-                <line x1="55" y1="42" x2="60" y2="35" stroke="#8b4513" stroke-width="2"/>
-                <line x1="50" y1="35" x2="47" y2="30" stroke="#8b4513" stroke-width="2"/>
-                <line x1="60" y1="35" x2="63" y2="30" stroke="#8b4513" stroke-width="2"/>
-                <rect x="50" y="73" width="3" height="12" fill="#8b4513"/>
-                <rect x="57" y="73" width="3" height="12" fill="#8b4513"/>
-                <rect x="63" y="73" width="3" height="12" fill="#8b4513"/>
-                <rect x="70" y="73" width="3" height="12" fill="#8b4513"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Deer</text>
-            </svg>
-        `)}`,category:"Nature",description:"Graceful deer silhouette"},{id:28,name:"Pine Tree",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0fff0" stroke="#228b22" stroke-width="2"/>
-                <polygon points="60,25 45,45 75,45" fill="#228b22"/>
-                <polygon points="60,35 40,55 80,55" fill="#32cd32"/>
-                <polygon points="60,45 35,65 85,65" fill="#228b22"/>
-                <rect x="57" y="65" width="6" height="15" fill="#8b4513"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Pine Tree</text>
-            </svg>
-        `)}`,category:"Nature",description:"Evergreen pine tree"},{id:29,name:"Dragonfly",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#e6f7ff" stroke="#00bfff" stroke-width="2"/>
-                <line x1="60" y1="35" x2="60" y2="85" stroke="#4b0082" stroke-width="4"/>
-                <ellipse cx="45" cy="45" rx="12" ry="5" fill="#87ceeb" opacity="0.7"/>
-                <ellipse cx="75" cy="45" rx="12" ry="5" fill="#87ceeb" opacity="0.7"/>
-                <ellipse cx="45" cy="60" rx="10" ry="4" fill="#4682b4" opacity="0.7"/>
-                <ellipse cx="75" cy="60" rx="10" ry="4" fill="#4682b4" opacity="0.7"/>
-                <circle cx="60" cy="35" r="4" fill="#4b0082"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#4b0082">Dragonfly</text>
-            </svg>
-        `)}`,category:"Nature",description:"Delicate dragonfly"},{id:30,name:"Leaf Pattern",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5fffa" stroke="#228b22" stroke-width="2"/>
-                <path d="M30 40 Q20 55 30 70 Q40 55 30 40" fill="#228b22" opacity="0.8"/>
-                <path d="M60 35 Q50 50 60 65 Q70 50 60 35" fill="#32cd32" opacity="0.8"/>
-                <path d="M90 40 Q80 55 90 70 Q100 55 90 40" fill="#228b22" opacity="0.8"/>
-                <path d="M45 65 Q35 80 45 95 Q55 80 45 65" fill="#32cd32" opacity="0.8"/>
-                <path d="M75 65 Q65 80 75 95 Q85 80 75 65" fill="#228b22" opacity="0.8"/>
-                <line x1="30" y1="55" x2="40" y2="55" stroke="#8b4513"/>
-                <line x1="60" y1="50" x2="70" y2="50" stroke="#8b4513"/>
-                <line x1="90" y1="55" x2="100" y2="55" stroke="#8b4513"/>
-                <text x="60" y="110" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Leaves</text>
-            </svg>
-        `)}`,category:"Nature",description:"Autumn leaf pattern"},{id:31,name:"Wolf Howling",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#2f2f2f" stroke="#696969" stroke-width="2"/>
-                <circle cx="80" cy="30" r="15" fill="#f5f5dc" opacity="0.9"/>
-                <ellipse cx="60" cy="50" rx="8" ry="6" fill="#696969"/>
-                <ellipse cx="55" cy="60" rx="12" ry="8" fill="#696969"/>
-                <triangle points="55,52 50,45 60,45" fill="#696969"/>
-                <circle cx="57" cy="47" r="2" fill="#ffffff"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#f5f5dc">Wolf</text>
-            </svg>
-        `)}`,category:"Nature",description:"Wolf howling at moon"},{id:32,name:"Bee Busy",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffacd" stroke="#ffd700" stroke-width="2"/>
-                <ellipse cx="60" cy="55" rx="12" ry="8" fill="#ffd700"/>
-                <line x1="48" y1="55" x2="72" y2="55" stroke="#000000" stroke-width="2"/>
-                <line x1="48" y1="60" x2="72" y2="60" stroke="#000000" stroke-width="2"/>
-                <ellipse cx="45" cy="50" rx="8" ry="4" fill="#ffffff" opacity="0.8"/>
-                <ellipse cx="75" cy="50" rx="8" ry="4" fill="#ffffff" opacity="0.8"/>
-                <line x1="72" y1="50" x2="78" y2="45" stroke="#000000" stroke-width="1"/>
-                <line x1="72" y1="55" x2="78" y2="60" stroke="#000000" stroke-width="1"/>
-                <text x="60" y="90" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b7500">Busy Bee</text>
-            </svg>
-        `)}`,category:"Nature",description:"Busy little bee"},{id:33,name:"Mushroom House",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#8fbc8f" stroke-width="2"/>
-                <ellipse cx="60" cy="45" rx="20" ry="15" fill="#dc143c"/>
-                <circle cx="50" cy="40" r="3" fill="#ffffff"/>
-                <circle cx="70" cy="38" r="3" fill="#ffffff"/>
-                <circle cx="55" cy="50" r="2" fill="#ffffff"/>
-                <circle cx="75" cy="48" r="2" fill="#ffffff"/>
-                <rect x="50" y="55" width="20" height="25" fill="#daa520"/>
-                <rect x="57" y="62" width="6" height="10" fill="#8b4513"/>
-                <circle cx="60" cy="67" r="1" fill="#000000"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Mushroom</text>
-            </svg>
-        `)}`,category:"Nature",description:"Whimsical mushroom house"},{id:34,name:"Seahorse",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#e0f6ff" stroke="#20b2aa" stroke-width="2"/>
-                <path d="M50 30 Q45 25 45 35 Q45 50 50 65 Q55 80 60 85 Q65 75 60 60 Q55 45 55 35 Q55 25 50 30" fill="#20b2aa"/>
-                <circle cx="48" cy="32" r="2" fill="#000000"/>
-                <path d="M45 35 Q40 35 38 38" stroke="#20b2aa" stroke-width="2" fill="none"/>
-                <line x1="52" y1="40" x2="57" y2="38" stroke="#20b2aa" stroke-width="1"/>
-                <line x1="52" y1="50" x2="57" y2="48" stroke="#20b2aa" stroke-width="1"/>
-                <line x1="52" y1="60" x2="57" y2="58" stroke="#20b2aa" stroke-width="1"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#20b2aa">Seahorse</text>
-            </svg>
-        `)}`,category:"Nature",description:"Graceful seahorse"},{id:35,name:"Starfish",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#ff7f50" stroke-width="2"/>
-                <g transform="translate(60,55)">
-                    <path d="M0,-20 L5,-5 L20,-5 L8,5 L12,20 L0,10 L-12,20 L-8,5 L-20,-5 L-5,-5 Z" fill="#ff7f50" opacity="0.8"/>
-                    <circle r="8" fill="#ff6347"/>
-                </g>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#ff4500">Starfish</text>
-            </svg>
-        `)}`,category:"Nature",description:"Five-pointed starfish"},{id:36,name:"Mandala Circle",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff5ee" stroke="#daa520" stroke-width="2"/>
-                <circle cx="60" cy="60" r="30" fill="none" stroke="#daa520" stroke-width="2"/>
-                <circle cx="60" cy="60" r="20" fill="none" stroke="#b8860b" stroke-width="1"/>
-                <circle cx="60" cy="60" r="10" fill="none" stroke="#8b7355" stroke-width="1"/>
-                <circle cx="60" cy="30" r="5" fill="#daa520"/>
-                <circle cx="60" cy="90" r="5" fill="#daa520"/>
-                <circle cx="30" cy="60" r="5" fill="#daa520"/>
-                <circle cx="90" cy="60" r="5" fill="#daa520"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b7355">Mandala</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Intricate mandala pattern"},{id:37,name:"Sacred Geometry",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f8f8ff" stroke="#4169e1" stroke-width="2"/>
-                <polygon points="60,30 80,50 80,70 60,90 40,70 40,50" fill="none" stroke="#4169e1" stroke-width="2"/>
-                <polygon points="60,40 70,50 70,60 60,70 50,60 50,50" fill="none" stroke="#6495ed" stroke-width="1"/>
-                <circle cx="60" cy="60" r="25" fill="none" stroke="#87ceeb" stroke-width="1"/>
-                <circle cx="60" cy="60" r="15" fill="none" stroke="#b0c4de" stroke-width="1"/>
-                <circle cx="60" cy="60" r="5" fill="#4169e1"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#4169e1">Sacred Geo</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Sacred geometry pattern"},{id:38,name:"Triangle Pattern",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff8dc" stroke="#ff8c00" stroke-width="2"/>
-                <polygon points="60,25 35,65 85,65" fill="#ff8c00" opacity="0.6"/>
-                <polygon points="60,35 45,55 75,55" fill="#ffd700" opacity="0.7"/>
-                <polygon points="60,45 50,60 70,60" fill="#ffff00" opacity="0.8"/>
-                <polygon points="35,65 20,85 50,85" fill="#ff8c00" opacity="0.6"/>
-                <polygon points="85,65 70,85 100,85" fill="#ff8c00" opacity="0.6"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#ff8c00">Triangles</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Layered triangle pattern"},{id:39,name:"Hexagon Grid",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0fff0" stroke="#32cd32" stroke-width="2"/>
-                <polygon points="60,30 75,38 75,54 60,62 45,54 45,38" fill="none" stroke="#32cd32" stroke-width="2"/>
-                <polygon points="35,46 50,54 50,70 35,78 20,70 20,54" fill="none" stroke="#228b22" stroke-width="2"/>
-                <polygon points="85,46 100,54 100,70 85,78 70,70 70,54" fill="none" stroke="#228b22" stroke-width="2"/>
-                <polygon points="60,70 75,78 75,94 60,102 45,94 45,78" fill="none" stroke="#32cd32" stroke-width="2"/>
-                <text x="60" y="115" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Hexagons</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Honeycomb hexagon grid"},{id:40,name:"Spiral Galaxy",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#191970" stroke="#4169e1" stroke-width="2"/>
-                <path d="M60 60 Q70 50 80 60 Q70 70 60 60 Q50 50 40 60 Q50 70 60 60" fill="none" stroke="#4169e1" stroke-width="2"/>
-                <path d="M60 60 Q65 55 70 60 Q65 65 60 60 Q55 55 50 60 Q55 65 60 60" fill="none" stroke="#6495ed" stroke-width="1"/>
-                <circle cx="60" cy="60" r="3" fill="#ffffff"/>
-                <circle cx="45" cy="45" r="1" fill="#ffffff"/>
-                <circle cx="75" cy="45" r="1" fill="#ffffff"/>
-                <circle cx="45" cy="75" r="1" fill="#ffffff"/>
-                <circle cx="75" cy="75" r="1" fill="#ffffff"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#4169e1">Spiral</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Cosmic spiral pattern"},{id:41,name:"Celtic Knot",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f5dc" stroke="#8b4513" stroke-width="2"/>
-                <path d="M40 40 Q60 20 80 40 Q100 60 80 80 Q60 100 40 80 Q20 60 40 40" fill="none" stroke="#8b4513" stroke-width="4"/>
-                <path d="M40 80 Q60 60 80 80" fill="none" stroke="#8b4513" stroke-width="4"/>
-                <path d="M80 40 Q60 60 40 40" fill="none" stroke="#8b4513" stroke-width="4"/>
-                <circle cx="60" cy="60" r="8" fill="none" stroke="#cd853f" stroke-width="2"/>
-                <text x="60" y="110" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Celtic Knot</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Traditional Celtic knot"},{id:42,name:"Diamond Lattice",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f8f8ff" stroke="#9370db" stroke-width="2"/>
-                <polygon points="60,30 75,45 60,60 45,45" fill="none" stroke="#9370db" stroke-width="2"/>
-                <polygon points="30,60 45,75 30,90 15,75" fill="none" stroke="#ba55d3" stroke-width="2"/>
-                <polygon points="90,60 105,75 90,90 75,75" fill="none" stroke="#ba55d3" stroke-width="2"/>
-                <polygon points="60,70 75,85 60,100 45,85" fill="none" stroke="#9370db" stroke-width="2"/>
-                <polygon points="45,45 60,60 45,75 30,60" fill="#dda0dd" opacity="0.3"/>
-                <polygon points="75,45 90,60 75,75 60,60" fill="#dda0dd" opacity="0.3"/>
-                <text x="60" y="115" text-anchor="middle" font-family="Arial" font-size="10" fill="#9370db">Diamonds</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Diamond lattice pattern"},{id:43,name:"Flower of Life",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff5ee" stroke="#daa520" stroke-width="2"/>
-                <circle cx="60" cy="60" r="15" fill="none" stroke="#daa520" stroke-width="1"/>
-                <circle cx="60" cy="45" r="15" fill="none" stroke="#b8860b" stroke-width="1"/>
-                <circle cx="60" cy="75" r="15" fill="none" stroke="#b8860b" stroke-width="1"/>
-                <circle cx="47" cy="52.5" r="15" fill="none" stroke="#b8860b" stroke-width="1"/>
-                <circle cx="73" cy="52.5" r="15" fill="none" stroke="#b8860b" stroke-width="1"/>
-                <circle cx="47" cy="67.5" r="15" fill="none" stroke="#b8860b" stroke-width="1"/>
-                <circle cx="73" cy="67.5" r="15" fill="none" stroke="#b8860b" stroke-width="1"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b7355">Flower Life</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Sacred flower of life"},{id:44,name:"Aztec Pattern",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#deb887" stroke="#8b4513" stroke-width="2"/>
-                <polygon points="60,25 75,40 60,55 45,40" fill="#8b4513"/>
-                <polygon points="30,60 45,75 30,90 15,75" fill="#cd853f"/>
-                <polygon points="90,60 105,75 90,90 75,75" fill="#cd853f"/>
-                <polygon points="60,85 75,100 60,115 45,100" fill="#8b4513"/>
-                <rect x="52" y="52" width="16" height="16" fill="#d2691e"/>
-                <rect x="56" y="56" width="8" height="8" fill="#a0522d"/>
-                <text x="60" y="130" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Aztec</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Ancient Aztec pattern"},{id:45,name:"Art Deco Lines",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f5f5" stroke="#2f4f4f" stroke-width="2"/>
-                <path d="M20 60 L40 40 L60 60 L80 40 L100 60" stroke="#2f4f4f" stroke-width="3" fill="none"/>
-                <path d="M20 70 L40 50 L60 70 L80 50 L100 70" stroke="#696969" stroke-width="2" fill="none"/>
-                <path d="M20 80 L40 60 L60 80 L80 60 L100 80" stroke="#a9a9a9" stroke-width="1" fill="none"/>
-                <circle cx="40" cy="40" r="3" fill="#2f4f4f"/>
-                <circle cx="80" cy="40" r="3" fill="#2f4f4f"/>
-                <circle cx="60" cy="60" r="3" fill="#2f4f4f"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#2f4f4f">Art Deco</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Art Deco line pattern"},{id:46,name:"Paisley Design",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fdf5e6" stroke="#cd853f" stroke-width="2"/>
-                <path d="M40 30 Q70 30 70 60 Q70 80 50 80 Q30 80 30 60 Q30 40 40 30" fill="#cd853f" opacity="0.7"/>
-                <path d="M50 40 Q60 40 60 55 Q60 65 52 65 Q44 65 44 55 Q44 45 50 40" fill="#daa520" opacity="0.8"/>
-                <circle cx="52" cy="50" r="3" fill="#8b4513"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Paisley</text>
-            </svg>
-        `)}`,category:"Traditional",description:"Classic paisley pattern"},{id:47,name:"Chinese Dragon",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffacd" stroke="#dc143c" stroke-width="2"/>
-                <path d="M20 60 Q40 40 60 60 Q80 80 100 60" stroke="#dc143c" stroke-width="4" fill="none"/>
-                <ellipse cx="60" cy="60" rx="8" ry="6" fill="#dc143c"/>
-                <circle cx="57" cy="58" r="2" fill="#ffffff"/>
-                <path d="M60 54 L65 50 L68 54 L65 58 Z" fill="#ffd700"/>
-                <line x1="52" y1="55" x2="48" y2="52" stroke="#dc143c" stroke-width="2"/>
-                <line x1="52" y1="65" x2="48" y2="68" stroke="#dc143c" stroke-width="2"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#dc143c">Dragon</text>
-            </svg>
-        `)}`,category:"Traditional",description:"Chinese dragon motif"},{id:48,name:"Japanese Wave",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#4682b4" stroke-width="2"/>
-                <path d="M0 70 Q30 50 60 70 Q90 90 120 70" stroke="#4682b4" stroke-width="3" fill="none"/>
-                <path d="M10 65 Q25 60 40 65" stroke="#87ceeb" stroke-width="2" fill="none"/>
-                <path d="M50 75 Q65 70 80 75" stroke="#87ceeb" stroke-width="2" fill="none"/>
-                <path d="M90 65 Q105 60 120 65" stroke="#87ceeb" stroke-width="2" fill="none"/>
-                <circle cx="30" cy="65" r="2" fill="#ffffff"/>
-                <circle cx="60" cy="75" r="2" fill="#ffffff"/>
-                <circle cx="90" cy="65" r="2" fill="#ffffff"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#4682b4">Japanese Wave</text>
-            </svg>
-        `)}`,category:"Traditional",description:"Traditional Japanese wave"},{id:49,name:"Native American",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#deb887" stroke="#8b4513" stroke-width="2"/>
-                <polygon points="60,25 50,45 70,45" fill="#8b4513"/>
-                <polygon points="60,45 45,65 75,65" fill="#cd853f"/>
-                <polygon points="60,65 40,85 80,85" fill="#8b4513"/>
-                <circle cx="60" cy="55" r="8" fill="none" stroke="#a0522d" stroke-width="2"/>
-                <line x1="52" y1="55" x2="68" y2="55" stroke="#a0522d" stroke-width="1"/>
-                <line x1="60" y1="47" x2="60" y2="63" stroke="#a0522d" stroke-width="1"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Native</text>
-            </svg>
-        `)}`,category:"Traditional",description:"Native American pattern"},{id:50,name:"Indian Elephant",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff8dc" stroke="#ff8c00" stroke-width="2"/>
-                <ellipse cx="60" cy="65" rx="20" ry="15" fill="#ff8c00"/>
-                <ellipse cx="55" cy="55" rx="8" ry="10" fill="#ff8c00"/>
-                <path d="M47 55 Q35 55 30 65" stroke="#ff8c00" stroke-width="3" fill="none"/>
-                <circle cx="58" cy="52" r="2" fill="#000000"/>
-                <rect x="55" y="80" width="4" height="10" fill="#ff8c00"/>
-                <rect x="61" y="80" width="4" height="10" fill="#ff8c00"/>
-                <rect x="67" y="80" width="4" height="10" fill="#ff8c00"/>
-                <rect x="73" y="80" width="4" height="10" fill="#ff8c00"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#ff8c00">Elephant</text>
-            </svg>
-        `)}`,category:"Traditional",description:"Indian elephant design"},{id:51,name:"Soccer Ball",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#90ee90" stroke="#228b22" stroke-width="2"/>
-                <circle cx="60" cy="60" r="25" fill="#ffffff" stroke="#000000" stroke-width="2"/>
-                <polygon points="60,45 65,55 55,55" fill="#000000"/>
-                <polygon points="60,75 65,65 55,65" fill="#000000"/>
-                <polygon points="45,60 55,65 55,55" fill="#000000"/>
-                <polygon points="75,60 65,55 65,65" fill="#000000"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Soccer</text>
-            </svg>
-        `)}`,category:"Sports",description:"Soccer ball design"},{id:52,name:"Basketball",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#ffa500" stroke="#ff8c00" stroke-width="2"/>
-                <circle cx="60" cy="60" r="25" fill="#ff8c00" stroke="#000000" stroke-width="2"/>
-                <path d="M35 60 Q60 40 85 60" stroke="#000000" stroke-width="2" fill="none"/>
-                <path d="M35 60 Q60 80 85 60" stroke="#000000" stroke-width="2" fill="none"/>
-                <line x1="60" y1="35" x2="60" y2="85" stroke="#000000" stroke-width="2"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#ff8c00">Basketball</text>
-            </svg>
-        `)}`,category:"Sports",description:"Basketball design"},{id:53,name:"Tennis Racket",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#e6ffe6" stroke="#228b22" stroke-width="2"/>
-                <ellipse cx="60" cy="45" rx="15" ry="20" fill="none" stroke="#8b4513" stroke-width="3"/>
-                <line x1="60" y1="65" x2="60" y2="90" stroke="#8b4513" stroke-width="4"/>
-                <line x1="50" y1="40" x2="70" y2="40" stroke="#ffffff" stroke-width="1"/>
-                <line x1="50" y1="45" x2="70" y2="45" stroke="#ffffff" stroke-width="1"/>
-                <line x1="50" y1="50" x2="70" y2="50" stroke="#ffffff" stroke-width="1"/>
-                <line x1="55" y1="35" x2="55" y2="55" stroke="#ffffff" stroke-width="1"/>
-                <line x1="60" y1="35" x2="60" y2="55" stroke="#ffffff" stroke-width="1"/>
-                <line x1="65" y1="35" x2="65" y2="55" stroke="#ffffff" stroke-width="1"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Tennis</text>
-            </svg>
-        `)}`,category:"Sports",description:"Tennis racket and net"},{id:54,name:"Golf Club",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#4169e1" stroke-width="2"/>
-                <line x1="70" y1="30" x2="50" y2="85" stroke="#c0c0c0" stroke-width="3"/>
-                <path d="M70 30 Q75 28 80 32 Q75 36 70 34" fill="#c0c0c0"/>
-                <circle cx="45" cy="90" r="3" fill="#ffffff" stroke="#000000"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#4169e1">Golf</text>
-            </svg>
-        `)}`,category:"Sports",description:"Golf club and ball"},{id:55,name:"Baseball",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffacd" stroke="#8b4513" stroke-width="2"/>
-                <circle cx="60" cy="60" r="20" fill="#ffffff" stroke="#000000" stroke-width="1"/>
-                <path d="M45 50 Q50 45 55 50 Q60 45 65 50 Q70 45 75 50" stroke="#dc143c" stroke-width="2" fill="none"/>
-                <path d="M45 70 Q50 75 55 70 Q60 75 65 70 Q70 75 75 70" stroke="#dc143c" stroke-width="2" fill="none"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Baseball</text>
-            </svg>
-        `)}`,category:"Sports",description:"Baseball with stitching"},{id:56,name:"Camera",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f5f5" stroke="#696969" stroke-width="2"/>
-                <rect x="35" y="45" width="50" height="30" fill="#2f2f2f" stroke="#000000"/>
-                <circle cx="60" cy="60" r="12" fill="#000000"/>
-                <circle cx="60" cy="60" r="8" fill="#4169e1"/>
-                <rect x="40" y="40" width="8" height="5" fill="#c0c0c0"/>
-                <circle cx="75" cy="50" r="2" fill="#ff0000"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#2f2f2f">Camera</text>
-            </svg>
-        `)}`,category:"Hobbies",description:"Photography camera"},{id:57,name:"Paint Palette",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffacd" stroke="#daa520" stroke-width="2"/>
-                <ellipse cx="60" cy="60" rx="25" ry="20" fill="#f5f5f5" stroke="#000000"/>
-                <ellipse cx="80" cy="55" rx="8" ry="6" fill="#f5f5f5" stroke="#000000"/>
-                <circle cx="50" cy="50" r="3" fill="#ff0000"/>
-                <circle cx="65" cy="48" r="3" fill="#0000ff"/>
-                <circle cx="70" cy="60" r="3" fill="#ffff00"/>
-                <circle cx="55" cy="70" r="3" fill="#00ff00"/>
-                <circle cx="45" cy="60" r="3" fill="#ff8c00"/>
-                <line x1="85" y1="50" x2="95" y2="40" stroke="#8b4513" stroke-width="3"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Paint</text>
-            </svg>
-        `)}`,category:"Hobbies",description:"Artist paint palette"},{id:58,name:"Musical Note",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f8f8ff" stroke="#4b0082" stroke-width="2"/>
-                <ellipse cx="45" cy="70" rx="8" ry="6" fill="#000000"/>
-                <line x1="53" y1="70" x2="53" y2="40" stroke="#000000" stroke-width="3"/>
-                <path d="M53 40 Q65 35 75 40 Q65 45 53 45" fill="#000000"/>
-                <ellipse cx="75" cy="60" rx="8" ry="6" fill="#000000"/>
-                <line x1="83" y1="60" x2="83" y2="40" stroke="#000000" stroke-width="3"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#4b0082">Music</text>
-            </svg>
-        `)}`,category:"Hobbies",description:"Musical notes"},{id:59,name:"Book Stack",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#faf0e6" stroke="#8b4513" stroke-width="2"/>
-                <rect x="40" y="70" width="40" height="6" fill="#8b0000"/>
-                <rect x="42" y="62" width="36" height="6" fill="#228b22"/>
-                <rect x="38" y="54" width="44" height="6" fill="#4169e1"/>
-                <rect x="44" y="46" width="32" height="6" fill="#ff8c00"/>
-                <line x1="60" y1="46" x2="60" y2="76" stroke="#000000" stroke-width="1"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Books</text>
-            </svg>
-        `)}`,category:"Hobbies",description:"Stack of books"},{id:60,name:"Chess Piece",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f5dc" stroke="#2f2f2f" stroke-width="2"/>
-                <rect x="50" y="75" width="20" height="5" fill="#000000"/>
-                <rect x="52" y="65" width="16" height="10" fill="#000000"/>
-                <rect x="54" y="55" width="12" height="10" fill="#000000"/>
-                <circle cx="60" cy="50" r="6" fill="#000000"/>
-                <polygon points="60,40 56,46 64,46" fill="#000000"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#2f2f2f">Chess</text>
-            </svg>
-        `)}`,category:"Hobbies",description:"Chess king piece"},{id:61,name:"Coffee Cup",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#faf0e6" stroke="#8b4513" stroke-width="2"/>
-                <rect x="40" y="40" width="30" height="35" fill="#daa520" stroke="#8b4513" stroke-width="2"/>
-                <rect x="35" y="75" width="40" height="5" fill="#8b4513"/>
-                <path d="M70 45 Q80 45 80 55 Q80 65 70 65" fill="none" stroke="#8b4513" stroke-width="2"/>
-                <line x1="45" y1="30" x2="47" y2="25" stroke="#8b4513" stroke-width="1"/>
-                <line x1="55" y1="30" x2="57" y2="25" stroke="#8b4513" stroke-width="1"/>
-                <line x1="65" y1="30" x2="67" y2="25" stroke="#8b4513" stroke-width="1"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Coffee Cup</text>
-            </svg>
-        `)}`,category:"Food",description:"Steaming coffee cup"},{id:62,name:"Pizza Slice",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffacd" stroke="#ff8c00" stroke-width="2"/>
-                <path d="M30 80 L60 30 L90 80 Z" fill="#ffd700"/>
-                <path d="M35 75 L85 75 Q90 80 85 85 Q60 90 35 85 Q30 80 35 75" fill="#8b4513"/>
-                <circle cx="50" cy="60" r="3" fill="#ff6347"/>
-                <circle cx="70" cy="55" r="3" fill="#ff6347"/>
-                <circle cx="60" cy="65" r="3" fill="#228b22"/>
-                <circle cx="45" cy="70" r="2" fill="#ffffff"/>
-                <circle cx="75" cy="68" r="2" fill="#ffffff"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#ff8c00">Pizza</text>
-            </svg>
-        `)}`,category:"Food",description:"Delicious pizza slice"},{id:63,name:"Cupcake",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff0f5" stroke="#ff69b4" stroke-width="2"/>
-                <rect x="45" y="60" width="30" height="20" fill="#8b4513"/>
-                <path d="M45 60 Q60 45 75 60" fill="#ffb6c1"/>
-                <path d="M50 60 Q60 50 70 60" fill="#ff69b4"/>
-                <circle cx="60" cy="55" r="2" fill="#dc143c"/>
-                <line x1="60" y1="53" x2="60" y2="48" stroke="#228b22" stroke-width="1"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#ff69b4">Cupcake</text>
-            </svg>
-        `)}`,category:"Food",description:"Sweet cupcake with cherry"},{id:64,name:"Wine Glass",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f8f8ff" stroke="#4b0082" stroke-width="2"/>
-                <path d="M45 40 Q45 50 55 55 L55 70 L65 70 L65 55 Q75 50 75 40 Z" fill="none" stroke="#4b0082" stroke-width="2"/>
-                <path d="M45 40 Q60 50 75 40" fill="#8b0000" opacity="0.6"/>
-                <line x1="50" y1="70" x2="70" y2="70" stroke="#4b0082" stroke-width="2"/>
-                <line x1="45" y1="40" x2="75" y2="40" stroke="#4b0082" stroke-width="2"/>
-                <text x="60" y="90" text-anchor="middle" font-family="Arial" font-size="10" fill="#4b0082">Wine</text>
-            </svg>
-        `)}`,category:"Food",description:"Elegant wine glass"},{id:65,name:"Hamburger",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#ffefd5" stroke="#8b4513" stroke-width="2"/>
-                <ellipse cx="60" cy="45" rx="25" ry="8" fill="#daa520"/>
-                <rect x="35" y="50" width="50" height="4" fill="#32cd32"/>
-                <rect x="35" y="54" width="50" height="6" fill="#8b4513"/>
-                <rect x="35" y="60" width="50" height="4" fill="#ff6347"/>
-                <rect x="35" y="64" width="50" height="4" fill="#ffff00"/>
-                <ellipse cx="60" cy="72" rx="25" ry="8" fill="#daa520"/>
-                <circle cx="50" cy="42" r="1" fill="#8b4513"/>
-                <circle cx="60" cy="41" r="1" fill="#8b4513"/>
-                <circle cx="70" cy="43" r="1" fill="#8b4513"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Burger</text>
-            </svg>
-        `)}`,category:"Food",description:"Tasty hamburger"},{id:66,name:"Heart",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#ffe4e1" stroke="#ff1493" stroke-width="2"/>
-                <path d="M60 75 Q45 55 30 45 Q20 35 20 25 Q20 15 30 15 Q40 15 50 25 Q60 35 60 45 Q60 35 70 25 Q80 15 90 15 Q100 15 100 25 Q100 35 90 45 Q75 55 60 75" fill="#ff1493" opacity="0.8"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b0000">Heart</text>
-            </svg>
-        `)}`,category:"Symbols",description:"Classic heart design"},{id:67,name:"Peace Sign",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#4169e1" stroke-width="2"/>
-                <circle cx="60" cy="60" r="25" fill="none" stroke="#4169e1" stroke-width="3"/>
-                <line x1="60" y1="35" x2="60" y2="85" stroke="#4169e1" stroke-width="3"/>
-                <line x1="60" y1="60" x2="42" y2="78" stroke="#4169e1" stroke-width="3"/>
-                <line x1="60" y1="60" x2="78" y2="78" stroke="#4169e1" stroke-width="3"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#4169e1">Peace</text>
-            </svg>
-        `)}`,category:"Symbols",description:"Peace symbol"},{id:68,name:"Star",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffacd" stroke="#ffd700" stroke-width="2"/>
-                <path d="M60,30 L65,50 L85,50 L70,62 L75,82 L60,70 L45,82 L50,62 L35,50 L55,50 Z" fill="#ffd700" opacity="0.8"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#b8860b">Star</text>
-            </svg>
-        `)}`,category:"Symbols",description:"Five-pointed star"},{id:69,name:"Infinity",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f5f5" stroke="#8b008b" stroke-width="2"/>
-                <path d="M30 60 Q40 40 50 60 Q60 80 70 60 Q80 40 90 60 Q80 80 70 60 Q60 40 50 60 Q40 80 30 60" fill="none" stroke="#8b008b" stroke-width="3"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b008b">Infinity</text>
-            </svg>
-        `)}`,category:"Symbols",description:"Infinity symbol"},{id:70,name:"Sun",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff8dc" stroke="#ffd700" stroke-width="2"/>
-                <circle cx="60" cy="60" r="15" fill="#ffd700"/>
-                <line x1="60" y1="25" x2="60" y2="35" stroke="#ffd700" stroke-width="3"/>
-                <line x1="60" y1="85" x2="60" y2="95" stroke="#ffd700" stroke-width="3"/>
-                <line x1="25" y1="60" x2="35" y2="60" stroke="#ffd700" stroke-width="3"/>
-                <line x1="85" y1="60" x2="95" y2="60" stroke="#ffd700" stroke-width="3"/>
-                <line x1="35" y1="35" x2="42" y2="42" stroke="#ffd700" stroke-width="3"/>
-                <line x1="78" y1="78" x2="85" y2="85" stroke="#ffd700" stroke-width="3"/>
-                <line x1="85" y1="35" x2="78" y2="42" stroke="#ffd700" stroke-width="3"/>
-                <line x1="42" y1="78" x2="35" y2="85" stroke="#ffd700" stroke-width="3"/>
-                <text x="60" y="115" text-anchor="middle" font-family="Arial" font-size="10" fill="#b8860b">Sun</text>
-            </svg>
-        `)}`,category:"Symbols",description:"Bright sun symbol"},{id:71,name:"Christmas Tree",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0fff0" stroke="#228b22" stroke-width="2"/>
-                <polygon points="60,25 45,45 75,45" fill="#228b22"/>
-                <polygon points="60,35 40,55 80,55" fill="#32cd32"/>
-                <polygon points="60,45 35,65 85,65" fill="#228b22"/>
-                <rect x="57" y="65" width="6" height="15" fill="#8b4513"/>
-                <circle cx="60" cy="25" r="3" fill="#ffd700"/>
-                <circle cx="50" cy="50" r="2" fill="#ff0000"/>
-                <circle cx="70" cy="52" r="2" fill="#0000ff"/>
-                <circle cx="55" cy="60" r="2" fill="#ff0000"/>
-                <circle cx="65" cy="58" r="2" fill="#ffd700"/>
-                <text x="60" y="95" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Christmas</text>
-            </svg>
-        `)}`,category:"Holiday",description:"Decorated Christmas tree"},{id:72,name:"Pumpkin",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffacd" stroke="#ff8c00" stroke-width="2"/>
-                <ellipse cx="60" cy="65" rx="25" ry="20" fill="#ff8c00"/>
-                <path d="M45 55 Q60 45 75 55" stroke="#ff4500" stroke-width="2" fill="none"/>
-                <path d="M45 75 Q60 85 75 75" stroke="#ff4500" stroke-width="2" fill="none"/>
-                <line x1="60" y1="45" x2="60" y2="85" stroke="#ff4500" stroke-width="2"/>
-                <rect x="58" y="40" width="4" height="8" fill="#228b22"/>
-                <triangle cx="55" cy="55" r="2" fill="#000000"/>
-                <triangle cx="65" cy="55" r="2" fill="#000000"/>
-                <path d="M55 70 Q60 75 65 70" stroke="#000000" stroke-width="2" fill="none"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#ff8c00">Pumpkin</text>
-            </svg>
-        `)}`,category:"Holiday",description:"Halloween pumpkin"},{id:73,name:"Snowflake",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0f8ff" stroke="#4682b4" stroke-width="2"/>
-                <line x1="60" y1="30" x2="60" y2="90" stroke="#87ceeb" stroke-width="2"/>
-                <line x1="30" y1="60" x2="90" y2="60" stroke="#87ceeb" stroke-width="2"/>
-                <line x1="42" y1="42" x2="78" y2="78" stroke="#87ceeb" stroke-width="2"/>
-                <line x1="78" y1="42" x2="42" y2="78" stroke="#87ceeb" stroke-width="2"/>
-                <line x1="55" y1="35" x2="65" y2="35" stroke="#87ceeb" stroke-width="1"/>
-                <line x1="55" y1="85" x2="65" y2="85" stroke="#87ceeb" stroke-width="1"/>
-                <line x1="35" y1="55" x2="35" y2="65" stroke="#87ceeb" stroke-width="1"/>
-                <line x1="85" y1="55" x2="85" y2="65" stroke="#87ceeb" stroke-width="1"/>
-                <text x="60" y="110" text-anchor="middle" font-family="Arial" font-size="10" fill="#4682b4">Snowflake</text>
-            </svg>
-        `)}`,category:"Holiday",description:"Delicate snowflake"},{id:74,name:"Easter Egg",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f5dc" stroke="#9370db" stroke-width="2"/>
-                <ellipse cx="60" cy="60" rx="18" ry="25" fill="#ffb6c1"/>
-                <path d="M45 50 Q60 45 75 50" stroke="#9370db" stroke-width="2" fill="none"/>
-                <path d="M45 60 Q60 55 75 60" stroke="#32cd32" stroke-width="2" fill="none"/>
-                <path d="M45 70 Q60 65 75 70" stroke="#ffd700" stroke-width="2" fill="none"/>
-                <circle cx="50" cy="55" r="2" fill="#ff1493"/>
-                <circle cx="70" cy="55" r="2" fill="#ff1493"/>
-                <circle cx="55" cy="65" r="2" fill="#32cd32"/>
-                <circle cx="65" cy="65" r="2" fill="#32cd32"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#9370db">Easter Egg</text>
-            </svg>
-        `)}`,category:"Holiday",description:"Decorated Easter egg"},{id:75,name:"Fireworks",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#191970" stroke="#4169e1" stroke-width="2"/>
-                <g transform="translate(45,45)">
-                    <line x1="0" y1="0" x2="0" y2="-15" stroke="#ffd700" stroke-width="2"/>
-                    <line x1="0" y1="0" x2="10" y2="-10" stroke="#ff4500" stroke-width="2"/>
-                    <line x1="0" y1="0" x2="15" y2="0" stroke="#ffd700" stroke-width="2"/>
-                    <line x1="0" y1="0" x2="10" y2="10" stroke="#ff4500" stroke-width="2"/>
-                    <line x1="0" y1="0" x2="0" y2="15" stroke="#ffd700" stroke-width="2"/>
-                    <line x1="0" y1="0" x2="-10" y2="10" stroke="#ff4500" stroke-width="2"/>
-                    <line x1="0" y1="0" x2="-15" y2="0" stroke="#ffd700" stroke-width="2"/>
-                    <line x1="0" y1="0" x2="-10" y2="-10" stroke="#ff4500" stroke-width="2"/>
-                </g>
-                <g transform="translate(75,65)">
-                    <line x1="0" y1="0" x2="0" y2="-10" stroke="#ff1493" stroke-width="1"/>
-                    <line x1="0" y1="0" x2="7" y2="-7" stroke="#00ff00" stroke-width="1"/>
-                    <line x1="0" y1="0" x2="10" y2="0" stroke="#ff1493" stroke-width="1"/>
-                    <line x1="0" y1="0" x2="7" y2="7" stroke="#00ff00" stroke-width="1"/>
-                </g>
-                <text x="60" y="110" text-anchor="middle" font-family="Arial" font-size="10" fill="#ffd700">Fireworks</text>
-            </svg>
-        `)}`,category:"Holiday",description:"Celebratory fireworks"},{id:76,name:"Love Script",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff0f5" stroke="#dc143c" stroke-width="2"/>
-                <text x="60" y="50" text-anchor="middle" font-family="serif" font-size="18" font-style="italic" fill="#dc143c">Love</text>
-                <line x1="25" y1="55" x2="95" y2="55" stroke="#dc143c" stroke-width="1"/>
-                <text x="60" y="100" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b0000">Love Script</text>
-            </svg>
-        `)}`,category:"Text",description:'Cursive "Love" lettering'},{id:77,name:"Hope Banner",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#e6f3ff" stroke="#4169e1" stroke-width="2"/>
-                <path d="M20 40 L100 40 L95 50 L100 60 L20 60 Z" fill="#4169e1" opacity="0.8"/>
-                <text x="60" y="55" text-anchor="middle" font-family="Arial" font-size="14" font-weight="bold" fill="#ffffff">HOPE</text>
-                <text x="60" y="90" text-anchor="middle" font-family="Arial" font-size="10" fill="#4169e1">Hope Banner</text>
-            </svg>
-        `)}`,category:"Text",description:"Inspirational hope banner"},{id:78,name:"Dream Text",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f8f8ff" stroke="#9370db" stroke-width="2"/>
-                <text x="60" y="55" text-anchor="middle" font-family="serif" font-size="16" font-style="italic" fill="#9370db">Dream</text>
-                <circle cx="30" cy="40" r="2" fill="#ffd700" opacity="0.8"/>
-                <circle cx="90" cy="35" r="2" fill="#ffd700" opacity="0.8"/>
-                <circle cx="35" cy="70" r="1.5" fill="#ffd700" opacity="0.8"/>
-                <circle cx="85" cy="65" r="1.5" fill="#ffd700" opacity="0.8"/>
-                <text x="60" y="90" text-anchor="middle" font-family="Arial" font-size="10" fill="#9370db">Dream Text</text>
-            </svg>
-        `)}`,category:"Text",description:"Dreamy text with stars"},{id:79,name:"Faith Word",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f5f5dc" stroke="#8b4513" stroke-width="2"/>
-                <text x="60" y="55" text-anchor="middle" font-family="serif" font-size="16" font-weight="bold" fill="#8b4513">FAITH</text>
-                <path d="M20 60 Q60 65 100 60" stroke="#8b4513" stroke-width="1" fill="none"/>
-                <text x="60" y="90" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b4513">Faith Word</text>
-            </svg>
-        `)}`,category:"Text",description:"Faith lettering"},{id:80,name:"Smile Quote",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fffacd" stroke="#ffd700" stroke-width="2"/>
-                <text x="60" y="50" text-anchor="middle" font-family="Arial" font-size="14" fill="#ff8c00">Smile</text>
-                <circle cx="60" cy="60" r="12" fill="none" stroke="#ffd700" stroke-width="2"/>
-                <circle cx="55" cy="57" r="1" fill="#ffd700"/>
-                <circle cx="65" cy="57" r="1" fill="#ffd700"/>
-                <path d="M53 63 Q60 67 67 63" stroke="#ffd700" stroke-width="2" fill="none"/>
-                <text x="60" y="90" text-anchor="middle" font-family="Arial" font-size="10" fill="#ff8c00">Smile Quote</text>
-            </svg>
-        `)}`,category:"Text",description:"Smile with smiley face"},{id:81,name:"Tree of Life",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#f0fff0" stroke="#228b22" stroke-width="2"/>
-                <line x1="60" y1="85" x2="60" y2="60" stroke="#8b4513" stroke-width="4"/>
-                <circle cx="60" cy="50" r="20" fill="none" stroke="#228b22" stroke-width="3"/>
-                <circle cx="60" cy="50" r="15" fill="none" stroke="#32cd32" stroke-width="2"/>
-                <circle cx="60" cy="50" r="10" fill="none" stroke="#90ee90" stroke-width="1"/>
-                <path d="M45 85 Q60 80 75 85" stroke="#8b4513" stroke-width="2" fill="none"/>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#228b22">Tree of Life</text>
-            </svg>
-        `)}`,category:"Nature",description:"Sacred tree of life"},{id:200,name:"Mandala Flower",url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`
-            <svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
-                <rect width="120" height="120" fill="#fff5ee" stroke="#daa520" stroke-width="2"/>
-                <g transform="translate(60,60)">
-                    <circle r="25" fill="none" stroke="#daa520" stroke-width="2"/>
-                    <circle r="20" fill="none" stroke="#b8860b" stroke-width="1"/>
-                    <circle r="15" fill="none" stroke="#cd853f" stroke-width="1"/>
-                    <circle r="10" fill="none" stroke="#8b7355" stroke-width="1"/>
-                    <circle r="5" fill="#daa520"/>
-                    <g transform="rotate(0)"><circle cx="0" cy="-20" r="3" fill="#ffd700"/></g>
-                    <g transform="rotate(45)"><circle cx="0" cy="-20" r="3" fill="#ffd700"/></g>
-                    <g transform="rotate(90)"><circle cx="0" cy="-20" r="3" fill="#ffd700"/></g>
-                    <g transform="rotate(135)"><circle cx="0" cy="-20" r="3" fill="#ffd700"/></g>
-                    <g transform="rotate(180)"><circle cx="0" cy="-20" r="3" fill="#ffd700"/></g>
-                    <g transform="rotate(225)"><circle cx="0" cy="-20" r="3" fill="#ffd700"/></g>
-                    <g transform="rotate(270)"><circle cx="0" cy="-20" r="3" fill="#ffd700"/></g>
-                    <g transform="rotate(315)"><circle cx="0" cy="-20" r="3" fill="#ffd700"/></g>
-                </g>
-                <text x="60" y="105" text-anchor="middle" font-family="Arial" font-size="10" fill="#8b7355">Mandala Flower</text>
-            </svg>
-        `)}`,category:"Geometric",description:"Complex mandala flower pattern"}],ei=({isOpen:d,onClose:o,onAddEmbroidery:a,theme:l,apiKey:s,apiEndpoint:f})=>{const[x,c]=y.useState([]),[u,g]=y.useState(!1),[C,T]=y.useState(null),[w,I]=y.useState(""),[j,b]=y.useState("All"),B=y.useRef(null),D=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{d&&c(ti)},[d]);const F=z=>{a({type:"embroidery",src:z.url,name:z.name,description:z.description,category:z.category,width:120,height:120,x:100,y:100}),o()},$=x.filter(z=>{const W=!w||z.name.toLowerCase().includes(w.toLowerCase())||z.description.toLowerCase().includes(w.toLowerCase()),ot=j==="All"||z.category===j;return W&&ot});return d?i.jsx("div",{className:"embroidery-modal-overlay",onClick:o,children:i.jsxs("div",{className:"embroidery-modal-content",onClick:z=>z.stopPropagation(),ref:B,children:[i.jsxs("div",{className:"embroidery-modal-header",children:[i.jsx("h3",{children:"Choose an Embroidery Design"}),i.jsx("button",{className:"embroidery-modal-close",onClick:o,"aria-label":"Close",children:"×"})]}),i.jsxs("div",{className:"embroidery-modal-controls",children:[i.jsx("div",{className:"search-container",children:i.jsx("input",{type:"text",placeholder:"Search embroidery designs...",value:w,onChange:z=>I(z.target.value),className:"embroidery-search"})}),i.jsxs("div",{className:"category-filter",children:[i.jsx("label",{children:"Category:"}),i.jsx("select",{value:j,onChange:z=>b(z.target.value),className:"category-select",children:D.map(z=>i.jsx("option",{value:z,children:z},z))})]})]}),i.jsxs("div",{className:"embroidery-modal-body",children:[u&&i.jsxs("div",{className:"embroidery-loading",children:[i.jsx("div",{className:"loading-spinner"}),i.jsx("p",{children:"Loading embroidery designs..."})]}),C&&i.jsx("div",{className:"embroidery-error",children:i.jsx("p",{children:C})}),!u&&!C&&i.jsx("div",{className:"embroidery-grid",children:$.map(z=>i.jsxs("div",{className:"embroidery-item",onClick:()=>F(z),title:z.description,children:[i.jsx("div",{className:"embroidery-preview",children:i.jsx("img",{src:z.url,alt:z.name,loading:"lazy",onError:W=>{console.error("Failed to load embroidery image:",z.url),W.target.style.display="none"}})}),i.jsxs("div",{className:"embroidery-info",children:[i.jsx("div",{className:"embroidery-name",children:z.name}),i.jsx("div",{className:"embroidery-category",children:z.category})]})]},z.id))}),!u&&!C&&$.length===0&&i.jsx("div",{className:"no-embroideries",children:i.jsx("p",{children:"No embroidery designs found matching your search."})})]}),i.jsx("div",{className:"embroidery-modal-footer",children:i.jsxs("div",{className:"embroidery-disclaimer",children:[i.jsx("span",{className:"disclaimer-icon",children:"ℹ️"}),i.jsx("span",{children:"Sample embroidery designs for preview. Actual embroidered results may vary based on fabric and thread."})]})})]})}):null},Ct=[{id:1,text:"DREAM BIG",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF6B35",hasBackground:!0,backgroundColor:"#1A1A1A",textAlign:"center",textTransform:"uppercase"},{id:2,text:"Never Give Up",category:"Motivational",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#2E8B57",fontStyle:"italic",textAlign:"center"},{id:3,text:"BE YOURSELF",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#FF1493",textTransform:"uppercase",letterSpacing:2},{id:4,text:"Stay Strong",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#4169E1",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:5,text:"RISE & SHINE",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000",textAlign:"center"},{id:6,text:"Believe in Magic",category:"Motivational",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB",textAlign:"center"},{id:7,text:"UNSTOPPABLE",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",textTransform:"uppercase",letterSpacing:1.5},{id:8,text:"Chase Your Dreams",category:"Motivational",fontSize:24,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:9,text:"FEARLESS",category:"Motivational",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:10,text:"Make It Happen",category:"Motivational",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:11,text:"BORN TO WIN",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#FFD700",hasBackground:!0,backgroundColor:"#800080",textAlign:"center"},{id:12,text:"Positive Vibes Only",category:"Motivational",fontSize:20,fontFamily:"Comic Sans MS",fill:"#FF69B4",fontWeight:"600"},{id:13,text:"LIMITLESS",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#1E90FF",textTransform:"uppercase",letterSpacing:3},{id:14,text:"Embrace The Journey",category:"Motivational",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B4513"},{id:15,text:"STRENGTH WITHIN",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#696969",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:16,text:"Create Your Own Sunshine",category:"Motivational",fontSize:18,fontFamily:"Palatino",fill:"#FF8C00",fontWeight:"600"},{id:17,text:"WARRIOR SPIRIT",category:"Motivational",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:18,text:"Keep Going",category:"Motivational",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:19,text:"FOCUS & WIN",category:"Motivational",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082",hasBackground:!0,backgroundColor:"#FFFF00"},{id:20,text:"Inspire Others",category:"Motivational",fontSize:26,fontFamily:"Georgia",fill:"#CD853F",fontStyle:"italic"},{id:21,text:"GAME CHANGER",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:22,text:"Live With Purpose",category:"Motivational",fontSize:22,fontFamily:"Palatino",fill:"#2F4F4F",fontWeight:"600"},{id:23,text:"BREAKTHROUGH",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",letterSpacing:2},{id:24,text:"Shine Bright",category:"Motivational",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FFD700",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:25,text:"NEVER SETTLE",category:"Motivational",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasBackground:!0,backgroundColor:"#000080"},{id:26,text:"CEO MINDSET",category:"Business",fontSize:28,fontFamily:"Arial",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:27,text:"Innovation Starts Here",category:"Business",fontSize:20,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"600"},{id:28,text:"PROFESSIONAL",category:"Business",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#000080",letterSpacing:1},{id:29,text:"Excellence Every Day",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#8B0000",fontWeight:"600"},{id:30,text:"LEADERSHIP",category:"Business",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",textAlign:"center"},{id:31,text:"Think Different",category:"Business",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#696969"},{id:32,text:"RESULTS DRIVEN",category:"Business",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:33,text:"Strategic Vision",category:"Business",fontSize:22,fontFamily:"Georgia",fill:"#2E8B57",fontWeight:"700"},{id:34,text:"PRODUCTIVITY",category:"Business",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:35,text:"Success Mindset",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#FF8C00",fontWeight:"600"},{id:36,text:"EXPERT LEVEL",category:"Business",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:37,text:"Quality First",category:"Business",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:38,text:"INTEGRITY",category:"Business",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center"},{id:39,text:"Growth Focused",category:"Business",fontSize:20,fontFamily:"Palatino",fill:"#20B2AA",fontWeight:"600"},{id:40,text:"COLLABORATION",category:"Business",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#9370DB"},{id:41,text:"Performance Matters",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#B22222",fontWeight:"700"},{id:42,text:"ACCOUNTABILITY",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#8B4513",letterSpacing:1.5},{id:43,text:"Vision to Reality",category:"Business",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:44,text:"TRANSFORMATION",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:45,text:"Excellence Standard",category:"Business",fontSize:22,fontFamily:"Palatino",fill:"#2E8B57",fontWeight:"600"},{id:46,text:"EFFICIENCY",category:"Business",fontSize:30,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#000080"},{id:47,text:"Forward Thinking",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#CD853F",fontWeight:"700"},{id:48,text:"ACHIEVEMENT",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"bold",fill:"#B8860B",hasBackground:!0,backgroundColor:"#F5F5DC"},{id:49,text:"Strategic Excellence",category:"Business",fontSize:20,fontFamily:"Georgia",fill:"#696969",fontWeight:"600"},{id:50,text:"IMPACT MAKER",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#DC143C",textAlign:"center"},{id:51,text:"COFFEE FIRST",category:"Funny",fontSize:28,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#8B4513",hasBackground:!0,backgroundColor:"#F5DEB3"},{id:52,text:"I'm Not Lazy, I'm Energy Efficient",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF69B4",fontWeight:"600"},{id:53,text:"SARCASM LOADING...",category:"Funny",fontSize:24,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32",textAlign:"center"},{id:54,text:"Powered By Pizza",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:55,text:"CTRL + ALT + DELETE MONDAY",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:56,text:"Brain 404 Error",category:"Funny",fontSize:22,fontFamily:"Arial",fill:"#FF1493",fontWeight:"600"},{id:57,text:"WEEKEND WARRIOR",category:"Funny",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:58,text:"Adulting is Hard",category:"Funny",fontSize:24,fontFamily:"Comic Sans MS",fill:"#9370DB",fontWeight:"600"},{id:59,text:"PROCRASTINATION EXPERT",category:"Funny",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#FF4500"},{id:60,text:"Netflix & Chill Champion",category:"Funny",fontSize:18,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"600"},{id:61,text:"CHAOS COORDINATOR",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",textAlign:"center"},{id:62,text:"I Speak Fluent Sarcasm",category:"Funny",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57"},{id:63,text:"SLEEP IS FOR THE WEAK",category:"Funny",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#B22222"},{id:64,text:"Professional Overthinker",category:"Funny",fontSize:20,fontFamily:"Verdana",fill:"#4B0082",fontWeight:"600"},{id:65,text:"WIFI PASSWORD PLEASE",category:"Funny",fontSize:20,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32"},{id:66,text:"Certified Couch Potato",category:"Funny",fontSize:22,fontFamily:"Comic Sans MS",fill:"#FF8C00",fontWeight:"700"},{id:67,text:"SOCIAL DISTANCING CHAMPION",category:"Funny",fontSize:16,fontFamily:"Arial",fontWeight:"bold",fill:"#20B2AA"},{id:68,text:"Powered By Caffeine",category:"Funny",fontSize:24,fontFamily:"Impact",fill:"#8B4513",fontWeight:"bold"},{id:69,text:"EMERGENCY CHOCOLATE NEEDED",category:"Funny",fontSize:18,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#D2691E"},{id:70,text:"I'm Not Short, I'm Fun Size",category:"Funny",fontSize:20,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"600"},{id:71,text:"CTRL + Z MY LIFE",category:"Funny",fontSize:26,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:72,text:"Error 404: Motivation Not Found",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF4500",fontWeight:"600"},{id:73,text:"PROFESSIONAL WEIRDO",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:74,text:"Snack Attack Mode",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:75,text:"BATTERY LOW, NEED COFFEE",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#8B4513"},{id:76,text:"Love You Forever",category:"Love",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493",textAlign:"center"},{id:77,text:"SOULMATES",category:"Love",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFE4E1"},{id:78,text:"Better Together",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:79,text:"ENDLESS LOVE",category:"Love",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:80,text:"You Complete Me",category:"Love",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000"},{id:81,text:"FOREVER & ALWAYS",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF1493",letterSpacing:1},{id:82,text:"My Heart Belongs To You",category:"Love",fontSize:20,fontFamily:"Palatino",fill:"#DC143C",fontWeight:"600"},{id:83,text:"PURE LOVE",category:"Love",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:84,text:"Together Forever",category:"Love",fontSize:26,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"700",textAlign:"center"},{id:85,text:"MATCH MADE IN HEAVEN",category:"Love",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FF1493"},{id:86,text:"Love Story",category:"Love",fontSize:32,fontFamily:"Palatino",fontStyle:"italic",fill:"#B22222"},{id:87,text:"HEARTBEAT",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFF0F5"},{id:88,text:"You Are My Sunshine",category:"Love",fontSize:22,fontFamily:"Georgia",fill:"#FF8C00",fontWeight:"600"},{id:89,text:"DESTINY",category:"Love",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#8B0000",textAlign:"center"},{id:90,text:"True Love Waits",category:"Love",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493"},{id:91,text:"BELOVED",category:"Love",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#B22222",letterSpacing:2},{id:92,text:"Love Conquers All",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"700"},{id:93,text:"PERFECT MATCH",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#000000"},{id:94,text:"Always & Forever",category:"Love",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"},{id:95,text:"ROMANCE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493"},{id:96,text:"Love Never Fails",category:"Love",fontSize:24,fontFamily:"Palatino",fill:"#B22222",fontWeight:"600"},{id:97,text:"ETERNAL LOVE",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",letterSpacing:1.5},{id:98,text:"Heart & Soul",category:"Love",fontSize:30,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"bold"},{id:99,text:"PASSIONATE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:100,text:"Love Is Everything",category:"Love",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"700"},{id:101,text:"NO PAIN NO GAIN",category:"Sports",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:102,text:"Train Hard",category:"Sports",fontSize:32,fontFamily:"Arial",fontWeight:"900",fill:"#B22222"},{id:103,text:"CHAMPION MINDSET",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:104,text:"Beast Mode ON",category:"Sports",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#32CD32"},{id:105,text:"STRONGER EVERY DAY",category:"Sports",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#2E8B57",letterSpacing:1},{id:106,text:"Victory Mindset",category:"Sports",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#B8860B"},{id:107,text:"GAME TIME",category:"Sports",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:108,text:"Push Your Limits",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:109,text:"ATHLETIC EXCELLENCE",category:"Sports",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#DC143C"},{id:110,text:"Fitness First",category:"Sports",fontSize:30,fontFamily:"Verdana",fontWeight:"bold",fill:"#228B22"},{id:111,text:"UNSTOPPABLE FORCE",category:"Sports",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:112,text:"Sweat Equity",category:"Sports",fontSize:28,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:113,text:"PERFORMANCE ZONE",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:114,text:"Train Like A Champion",category:"Sports",fontSize:20,fontFamily:"Arial",fill:"#B22222",fontWeight:"600"},{id:115,text:"POWER WITHIN",category:"Sports",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:116,text:"Maximum Effort",category:"Sports",fontSize:26,fontFamily:"Verdana",fill:"#2E8B57",fontWeight:"800"},{id:117,text:"ELITE ATHLETE",category:"Sports",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000"},{id:118,text:"Rise Above",category:"Sports",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#4169E1"},{id:119,text:"COMPETITIVE EDGE",category:"Sports",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#DC143C"},{id:120,text:"Strength & Honor",category:"Sports",fontSize:26,fontFamily:"Impact",fill:"#2F4F4F",fontWeight:"bold"},{id:121,text:"WINNING ATTITUDE",category:"Sports",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#32CD32",letterSpacing:1.5},{id:122,text:"Never Give Up",category:"Sports",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FF4500"},{id:123,text:"ENDURANCE",category:"Sports",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#228B22",textAlign:"center"},{id:124,text:"Peak Performance",category:"Sports",fontSize:24,fontFamily:"Georgia",fill:"#B8860B",fontWeight:"700"},{id:125,text:"DEDICATION PAYS OFF",category:"Sports",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:126,text:"STYLE ICON",category:"Lifestyle",fontSize:30,fontFamily:"Palatino",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:127,text:"Chic & Unique",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:128,text:"TRENDSETTER",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:129,text:"Fashion Forward",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:130,text:"BOUTIQUE VIBES",category:"Lifestyle",fontSize:22,fontFamily:"Arial",fontWeight:"bold",fill:"#4169E1"},{id:131,text:"Effortlessly Elegant",category:"Lifestyle",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2F4F4F"},{id:132,text:"LUXE LIFESTYLE",category:"Lifestyle",fontSize:28,fontFamily:"Palatino",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:133,text:"Vintage Soul",category:"Lifestyle",fontSize:32,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:134,text:"MODERN CLASSIC",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#000000"},{id:135,text:"Street Style",category:"Lifestyle",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:136,text:"SOPHISTICATED",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontWeight:"bold",fill:"#2E8B57",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:137,text:"Boho Chic",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#CD853F"},{id:138,text:"MINIMALIST",category:"Lifestyle",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:3},{id:139,text:"Glamorous Life",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FFD700",fontWeight:"700"},{id:140,text:"HAUTE COUTURE",category:"Lifestyle",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#4B0082"},{id:141,text:"Urban Explorer",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fill:"#32CD32",fontWeight:"bold"},{id:142,text:"AESTHETIC VIBES",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#FF69B4"},{id:143,text:"Lifestyle Goals",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:144,text:"PREMIUM QUALITY",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B22222"},{id:145,text:"Designer Dreams",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:146,text:"CURATED STYLE",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#2F4F4F",letterSpacing:1},{id:147,text:"Fashion Statement",category:"Lifestyle",fontSize:22,fontFamily:"Georgia",fill:"#FF1493",fontWeight:"600"},{id:148,text:"ARTISAN CRAFTED",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#8B4513"},{id:149,text:"Timeless Elegance",category:"Lifestyle",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#000080"},{id:150,text:"SIGNATURE STYLE",category:"Lifestyle",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:151,text:"HAPPY BIRTHDAY",category:"Holidays",fontSize:32,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#FFFF00",textAlign:"center"},{id:152,text:"Merry Christmas",category:"Holidays",fontSize:30,fontFamily:"Georgia",fill:"#B22222",fontWeight:"700",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#228B22"},{id:153,text:"CELEBRATION TIME",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700"},{id:154,text:"Happy New Year",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:155,text:"THANKFUL HEART",category:"Holidays",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:156,text:"Easter Blessings",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:157,text:"PARTY TIME",category:"Holidays",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",hasBackground:!0,backgroundColor:"#000000"},{id:158,text:"Halloween Spirit",category:"Holidays",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#FF4500"},{id:159,text:"FESTIVE MOOD",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#32CD32"},{id:160,text:"Valentine's Day",category:"Holidays",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#DC143C"},{id:161,text:"ANNIVERSARY JOY",category:"Holidays",fontSize:"22",fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B8860B"},{id:162,text:"Graduation Day",category:"Holidays",fontSize:28,fontFamily:"Arial",fill:"#000080",fontWeight:"700"},{id:163,text:"SUMMER VIBES",category:"Holidays",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:164,text:"Winter Wonderland",category:"Holidays",fontSize:20,fontFamily:"Georgia",fill:"#4169E1",fontWeight:"600"},{id:165,text:"MOTHER'S DAY LOVE",category:"Holidays",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#FF69B4"},{id:166,text:"Father's Day Hero",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#2F4F4F",fontWeight:"700"},{id:167,text:"SPRING AWAKENING",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:168,text:"Holiday Magic",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#9370DB"},{id:169,text:"FAMILY GATHERING",category:"Holidays",fontSize:20,fontFamily:"Arial",fontWeight:"600",fill:"#8B4513"},{id:170,text:"Wedding Bliss",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FFD700"},{id:171,text:"FIREWORKS NIGHT",category:"Holidays",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:172,text:"Autumn Leaves",category:"Holidays",fontSize:26,fontFamily:"Georgia",fill:"#D2691E",fontWeight:"600"},{id:173,text:"MILESTONE MOMENT",category:"Holidays",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:174,text:"Special Occasion",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#B22222",fontWeight:"700"},{id:175,text:"CHEERS TO LIFE",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#20B2AA",textAlign:"center"},{id:176,text:'"Life is Beautiful"',category:"Quotes",fontSize:26,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57",textAlign:"center"},{id:177,text:"CARPE DIEM",category:"Quotes",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:178,text:'"Choose Happiness"',category:"Quotes",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF69B4"},{id:179,text:"LIVE LAUGH LOVE",category:"Quotes",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#DC143C",textAlign:"center"},{id:180,text:'"Dream Without Fear"',category:"Quotes",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:181,text:"WISDOM WITHIN",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#2F4F4F"},{id:182,text:'"Create Your Story"',category:"Quotes",fontSize:20,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:183,text:"INNER PEACE",category:"Quotes",fontSize:30,fontFamily:"Arial",fontWeight:"300",fill:"#20B2AA",letterSpacing:3},{id:184,text:'"Follow Your Heart"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:185,text:"GRATITUDE DAILY",category:"Quotes",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00"},{id:186,text:'"Embrace Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#32CD32"},{id:187,text:"MINDFUL LIVING",category:"Quotes",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"600",fill:"#4B0082"},{id:188,text:'"Stay Curious"',category:"Quotes",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#B22222"},{id:189,text:"PURPOSE DRIVEN",category:"Quotes",fontSize:28,fontFamily:"Arial",fontWeight:"700",fill:"#8B4513"},{id:190,text:'"Find Your Why"',category:"Quotes",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#CD853F"},{id:191,text:"AUTHENTIC SELF",category:"Quotes",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:192,text:'"Less is More"',category:"Quotes",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:2},{id:193,text:"PRESENT MOMENT",category:"Quotes",fontSize:26,fontFamily:"Georgia",fontWeight:"600",fill:"#2E8B57"},{id:194,text:'"Trust The Process"',category:"Quotes",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#4169E1"},{id:195,text:"BALANCED LIFE",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#20B2AA"},{id:196,text:'"Spread Kindness"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF69B4"},{id:197,text:"GROWTH MINDSET",category:"Quotes",fontSize:26,fontFamily:"Arial",fontWeight:"700",fill:"#32CD32"},{id:198,text:'"Be The Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:199,text:"INFINITE POSSIBILITIES",category:"Quotes",fontSize:20,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B"},{id:200,text:'"Leave Your Mark"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"}],ii=({isOpen:d,onClose:o,onAddText:a,theme:l})=>{const[s,f]=y.useState(""),[x,c]=y.useState("All"),u=y.useMemo(()=>{const w=Ct.reduce((I,j)=>(I[j.category]=(I[j.category]||0)+1,I),{});return[{name:"All",count:Ct.length},...Object.entries(w).map(([I,j])=>({name:I,count:j}))]},[Ct]),g=y.useMemo(()=>Ct.filter(w=>{const I=!s||w.text.toLowerCase().includes(s.toLowerCase())||w.category.toLowerCase().includes(s.toLowerCase()),j=x==="All"||w.category===x;return I&&j}),[Ct,s,x]),C=w=>{const I={...w,x:100,y:100};a("text",I),o()},T=()=>{a("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),o()};return d?i.jsx("div",{className:"text-templates-modal-overlay",onClick:o,children:i.jsxs("div",{className:"text-templates-modal",onClick:w=>w.stopPropagation(),children:[i.jsxs("div",{className:"modal-header",children:[i.jsx("h2",{children:"Text Templates"}),i.jsx("button",{className:"close-btn",onClick:o,"aria-label":"Close",children:"×"})]}),i.jsxs("div",{className:"modal-controls",children:[i.jsx("div",{className:"search-section",children:i.jsx("input",{type:"text",placeholder:"Search templates...",value:s,onChange:w=>f(w.target.value),className:"search-input"})}),i.jsx("div",{className:"category-tabs",children:u.map(w=>i.jsxs("button",{className:`category-tab ${x===w.name?"active":""}`,onClick:()=>c(w.name),children:[w.name,i.jsxs("span",{className:"count",children:["(",w.count,")"]})]},w.name))})]}),i.jsxs("div",{className:"templates-grid",children:[i.jsx("div",{className:"custom-text-option",onClick:T,children:i.jsxs("div",{className:"custom-text-preview",children:[i.jsx("div",{className:"custom-icon",children:"✏️"}),i.jsx("div",{className:"custom-label",children:"Create Custom Text"})]})}),g.map(w=>i.jsxs("div",{className:"template-item",onClick:()=>C(w),children:[i.jsx("div",{className:"template-preview",style:{fontFamily:w.fontFamily,fontSize:`${Math.min(w.fontSize*.6,18)}px`,fontWeight:w.fontWeight,fontStyle:w.fontStyle,color:w.fill,backgroundColor:w.hasBackground?w.backgroundColor:"transparent",textAlign:w.textAlign||"left",textTransform:w.textTransform||"none",letterSpacing:w.letterSpacing?`${w.letterSpacing}px`:"normal",textShadow:w.hasTextShadow?`${w.textShadowX}px ${w.textShadowY}px ${w.textShadowBlur}px ${w.textShadowColor}`:"none"},children:w.text}),i.jsxs("div",{className:"template-info",children:[i.jsx("span",{className:"template-category",children:w.category}),i.jsx("span",{className:"template-font",children:w.fontFamily})]})]},w.id))]}),i.jsx("div",{className:"modal-footer",children:i.jsxs("div",{className:"results-count",children:[g.length," template",g.length!==1?"s":""," found"]})})]})}):null},oi=({onAddElement:d,onDeleteElement:o,onDuplicateElement:a,onUndo:l,onRedo:s,onToggleGrid:f,onToggleRulers:x,onToggleSnap:c,onImageUpload:u,canUndo:g,canRedo:C,showGrid:T,showRulers:w,snapToGrid:I,selectedElement:j,theme:b,readOnly:B,apiKey:D,apiEndpoint:F})=>{const[$,z]=y.useState(!1),[W,ot]=y.useState(!1),[U,nt]=y.useState(!1),[q,it]=y.useState(!1),[Y,O]=y.useState(!1),[J,rt]=y.useState(!1),[K,et]=y.useState(!1),M=P=>{const st=P.target.files[0];st&&st.type.startsWith("image/")&&u(st),P.target.value=""},G=P=>{d("icon",{iconData:P,text:P.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},N=P=>{d("qrcode",P)},m=P=>{d("barcode",P)},A=P=>{d("sticker",P)},Q=P=>{d("embroidery",P)},_=(P,st)=>{d(P,st)},Z=()=>{rt(!J),et(!1)},V=()=>{et(!K),rt(!1)},ct=P=>{P==="custom"?d("text"):P==="templates"&&O(!0),rt(!1)},H=P=>{d(P),et(!1)};return i.jsxs("div",{className:"toolbar",children:[i.jsxs("div",{className:"toolbar-section",children:[i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact",onClick:l,disabled:!g||B,title:"Undo (Ctrl+Z)",children:[i.jsx("span",{className:"icon",children:"↶"}),i.jsx("span",{className:"label",children:"Undo"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:s,disabled:!C||B,title:"Redo (Ctrl+Y)",children:[i.jsx("span",{className:"icon",children:"↷"}),i.jsx("span",{className:"label",children:"Redo"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:B,title:"Add Text",onClick:Z,children:[i.jsx("span",{className:"icon",children:"𝐓"}),i.jsx("span",{className:"label",children:"Text"}),i.jsx("span",{className:`dropdown-arrow ${J?"open":""}`,children:"▼"})]}),i.jsxs("div",{className:`dropdown-menu ${J?"show":""}`,children:[i.jsxs("button",{onClick:()=>ct("custom"),children:[i.jsx("span",{className:"icon",children:"𝐓"})," Custom Text"]}),i.jsxs("button",{onClick:()=>ct("templates"),children:[i.jsx("span",{className:"icon",children:"📝"})," Text Templates"]})]})]}),i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:B,onClick:V,children:[i.jsx("span",{className:"icon",children:"◩"}),i.jsx("span",{className:"label",children:"Shapes"}),i.jsx("span",{className:`dropdown-arrow ${K?"open":""}`,children:"▼"})]}),i.jsxs("div",{className:`dropdown-menu ${K?"show":""}`,children:[i.jsxs("button",{onClick:()=>H("rectangle"),children:[i.jsx("span",{className:"icon",children:"▭"})," Rectangle"]}),i.jsxs("button",{onClick:()=>H("circle"),children:[i.jsx("span",{className:"icon",children:"●"})," Circle"]}),i.jsxs("button",{onClick:()=>H("triangle"),children:[i.jsx("span",{className:"icon",children:"▲"})," Triangle"]}),i.jsxs("button",{onClick:()=>H("star"),children:[i.jsx("span",{className:"icon",children:"★"})," Star"]}),i.jsxs("button",{onClick:()=>H("heart"),children:[i.jsx("span",{className:"icon",children:"♥"})," Heart"]}),i.jsxs("button",{onClick:()=>H("arrow"),children:[i.jsx("span",{className:"icon",children:"➤"})," Arrow"]}),i.jsxs("button",{onClick:()=>H("diamond"),children:[i.jsx("span",{className:"icon",children:"◆"})," Diamond"]}),i.jsxs("button",{onClick:()=>H("hexagon"),children:[i.jsx("span",{className:"icon",children:"⬡"})," Hexagon"]}),i.jsxs("button",{onClick:()=>H("pentagon"),children:[i.jsx("span",{className:"icon",children:"⬟"})," Pentagon"]}),i.jsxs("button",{onClick:()=>H("oval"),children:[i.jsx("span",{className:"icon",children:"⬯"})," Oval"]}),i.jsxs("button",{onClick:()=>H("roundedRectangle"),children:[i.jsx("span",{className:"icon",children:"▢"})," Rounded Rectangle"]}),i.jsxs("button",{onClick:()=>H("horizontalLine"),children:[i.jsx("span",{className:"icon",children:"―"})," Horizontal Line"]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("label",{className:"toolbar-btn compact file-upload",style:{cursor:B?"not-allowed":"pointer"},children:[i.jsx("span",{className:"icon",children:"☁️"}),i.jsx("span",{className:"label",children:"Upload"}),i.jsx("input",{type:"file",accept:"image/*",onChange:M,disabled:B})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx(Ve,{onSelectIcon:G,theme:b,disabled:B}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>nt(!0),disabled:B,title:"Add Sticker",children:[i.jsx("span",{className:"icon",children:"🎨"}),i.jsx("span",{className:"label",children:"Stickers"})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>z(!0),disabled:B,title:"Add QR Code",children:[i.jsx("span",{className:"icon",children:"▦"}),i.jsx("span",{className:"label",children:"QR Code"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>ot(!0),disabled:B,title:"Add Barcode",children:[i.jsx("span",{className:"icon",children:"▤"}),i.jsx("span",{className:"label",children:"Barcode"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx("div",{className:"toolbar-group embroidery-group",children:i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>it(!0),disabled:B,title:"Add Embroidery Design",children:[i.jsx("span",{className:"icon",children:"🧵"}),i.jsx("span",{className:"label",children:"Embroidery"})]})}),j&&i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact success",onClick:a,disabled:B,title:"Duplicate Element (Ctrl+D)",children:[i.jsx("span",{className:"icon",children:"⧉"}),i.jsx("span",{className:"label",children:"Copy"})]}),i.jsxs("button",{className:"toolbar-btn compact danger",onClick:o,disabled:B,title:"Delete Element (Delete)",children:[i.jsx("span",{className:"icon",children:"🗑️"}),i.jsx("span",{className:"label",children:"Delete"})]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:`toolbar-btn compact ${T?"active":""}`,onClick:f,title:"Toggle Grid",children:[i.jsx("span",{className:"icon",children:"⚏"}),i.jsx("span",{className:"label",children:"Grid"})]}),i.jsxs("button",{className:`toolbar-btn compact ${w?"active":""}`,onClick:x,title:"Toggle Rulers",children:[i.jsx("span",{className:"icon",children:"📐"}),i.jsx("span",{className:"label",children:"Rulers"})]}),i.jsxs("button",{className:`toolbar-btn compact ${I?"active":""}`,onClick:c,title:"Snap to Grid",children:[i.jsx("span",{className:"icon",children:"🧲"}),i.jsx("span",{className:"label",children:"Snap"})]})]})]}),i.jsx(Xe,{isOpen:$,onClose:()=>z(!1),onAddQRCode:N,theme:b}),i.jsx(Je,{isOpen:W,onClose:()=>ot(!1),onAddBarcode:m,theme:b}),i.jsx(Ze,{isOpen:U,onClose:()=>nt(!1),onAddSticker:A,theme:b,apiKey:D,apiEndpoint:F}),i.jsx(ei,{isOpen:q,onClose:()=>it(!1),onAddEmbroidery:Q,theme:b,apiKey:D,apiEndpoint:F}),i.jsx(ii,{isOpen:Y,onClose:()=>O(!1),onAddText:_,theme:b})]})},ri=({selectedElement:d,onUpdate:o,onMoveLayer:a,availableFonts:l,theme:s})=>{const[f,x]=y.useState(!1);if(!d)return i.jsxs("div",{className:"properties-panel",children:[i.jsx("h3",{children:"Properties"}),i.jsx("p",{className:"no-selection",children:"Select an element to edit its properties"})]});const c=(b,B)=>{o(d.id,{[b]:B})},u=()=>{var b,B,D;return i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Text Content"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Content"}),i.jsx("textarea",{value:d.text||"",onChange:F=>c("text",F.target.value),rows:3,placeholder:"Enter your text here..."})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Family"}),i.jsx("select",{value:d.fontFamily||"Arial",onChange:F=>c("fontFamily",F.target.value),children:l.map(F=>i.jsx("option",{value:F,children:F},F))})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Font Size"}),i.jsx("input",{type:"number",value:d.fontSize||20,onChange:F=>c("fontSize",parseInt(F.target.value)),min:"8",max:"200"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Height"}),i.jsx("input",{type:"number",step:"0.1",value:d.lineHeight||1.2,onChange:F=>c("lineHeight",parseFloat(F.target.value)),min:"0.5",max:"3"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Weight"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:d.fontWeight==="lighter"||d.fontWeight==="300"?"active":"",onClick:()=>c("fontWeight","300"),title:"Light",children:"Light"}),i.jsx("button",{className:!d.fontWeight||d.fontWeight==="normal"||d.fontWeight==="400"?"active":"",onClick:()=>c("fontWeight","normal"),title:"Normal",children:"Normal"}),i.jsx("button",{className:d.fontWeight==="bold"||d.fontWeight==="700"?"active":"",onClick:()=>c("fontWeight","bold"),title:"Bold",children:i.jsx("strong",{children:"Bold"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Style"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:d.fontStyle==="italic"?"active":"",onClick:()=>c("fontStyle",d.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:i.jsx("em",{children:"I"})}),i.jsx("button",{className:(b=d.textDecoration)!=null&&b.includes("underline")?"active":"",onClick:()=>{const F=d.textDecoration||"",$=F.split(" ").filter(z=>z&&z!=="underline");F.includes("underline")||$.push("underline"),c("textDecoration",$.join(" ").trim())},title:"Underline",children:i.jsx("u",{children:"U"})}),i.jsx("button",{className:(B=d.textDecoration)!=null&&B.includes("overline")?"active":"",onClick:()=>{const F=d.textDecoration||"",$=F.split(" ").filter(z=>z&&z!=="overline");F.includes("overline")||$.push("overline"),c("textDecoration",$.join(" ").trim())},title:"Overline",children:i.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),i.jsx("button",{className:(D=d.textDecoration)!=null&&D.includes("line-through")?"active":"",onClick:()=>{const F=d.textDecoration||"",$=F.split(" ").filter(z=>z&&z!=="line-through");F.includes("line-through")||$.push("line-through"),c("textDecoration",$.join(" ").trim())},title:"Strikethrough",children:i.jsx("s",{children:"S"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Transform"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!d.textTransform||d.textTransform==="none"?"active":"",onClick:()=>c("textTransform","none"),title:"Normal",children:"Aa"}),i.jsx("button",{className:d.textTransform==="uppercase"?"active":"",onClick:()=>c("textTransform","uppercase"),title:"Uppercase",children:"AA"}),i.jsx("button",{className:d.textTransform==="lowercase"?"active":"",onClick:()=>c("textTransform","lowercase"),title:"Lowercase",children:"aa"}),i.jsx("button",{className:d.textTransform==="capitalize"?"active":"",onClick:()=>c("textTransform","capitalize"),title:"Capitalize",children:"Aa"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Alignment"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!d.textAlign||d.textAlign==="left"?"active":"",onClick:()=>c("textAlign","left"),title:"Left Align",children:"⬅"}),i.jsx("button",{className:d.textAlign==="center"?"active":"",onClick:()=>c("textAlign","center"),title:"Center Align",children:"↔"}),i.jsx("button",{className:d.textAlign==="right"?"active":"",onClick:()=>c("textAlign","right"),title:"Right Align",children:"➡"}),i.jsx("button",{className:d.textAlign==="justify"?"active":"",onClick:()=>c("textAlign","justify"),title:"Justify",children:"≡"})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Text Color"}),i.jsx("input",{type:"color",value:d.fill||"#000000",onChange:F=>c("fill",F.target.value)})]}),i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Background Color"}),i.jsxs("div",{className:"color-with-toggle",children:[i.jsx("input",{type:"color",value:d.backgroundColor||"#ffffff",onChange:F=>c("backgroundColor",F.target.value),disabled:!d.hasBackground}),i.jsx("button",{className:`toggle-btn ${d.hasBackground?"active":""}`,onClick:()=>c("hasBackground",!d.hasBackground),title:d.hasBackground?"Remove background":"Add background",children:d.hasBackground?"👁":"👁‍🗨"})]})]})]})}),f&&i.jsxs(i.Fragment,{children:[i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Letter Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:d.letterSpacing||0,onChange:F=>c("letterSpacing",parseFloat(F.target.value)),min:"-5",max:"10"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Word Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:d.wordSpacing||0,onChange:F=>c("wordSpacing",parseFloat(F.target.value)),min:"-10",max:"20"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Shadow"}),i.jsxs("div",{className:"text-shadow-controls",children:[i.jsx("div",{className:"shadow-toggle",children:i.jsx("button",{className:`toggle-btn ${d.hasTextShadow?"active":""}`,onClick:()=>c("hasTextShadow",!d.hasTextShadow),children:d.hasTextShadow?"Remove Shadow":"Add Shadow"})}),d.hasTextShadow&&i.jsxs("div",{className:"shadow-properties",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"H-Offset"}),i.jsx("input",{type:"number",value:d.textShadowX||2,onChange:F=>c("textShadowX",parseInt(F.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"V-Offset"}),i.jsx("input",{type:"number",value:d.textShadowY||2,onChange:F=>c("textShadowY",parseInt(F.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Blur"}),i.jsx("input",{type:"number",value:d.textShadowBlur||4,onChange:F=>c("textShadowBlur",parseInt(F.target.value)),min:"0",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Shadow Color"}),i.jsx("input",{type:"color",value:d.textShadowColor||"#000000",onChange:F=>c("textShadowColor",F.target.value)})]})]})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:d.stroke||"#000000",onChange:F=>c("stroke",F.target.value)})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:d.strokeWidth||0,onChange:F=>c("strokeWidth",parseInt(F.target.value)),min:"0",max:"20"})]})]})}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:d.opacity||1,onChange:F=>c("opacity",parseFloat(F.target.value))}),i.jsxs("span",{children:[Math.round((d.opacity||1)*100),"%"]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Variant"}),i.jsxs("select",{value:d.fontVariant||"normal",onChange:F=>c("fontVariant",F.target.value),children:[i.jsx("option",{value:"normal",children:"Normal"}),i.jsx("option",{value:"small-caps",children:"Small Caps"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Writing Mode"}),i.jsxs("select",{value:d.writingMode||"horizontal-tb",onChange:F=>c("writingMode",F.target.value),children:[i.jsx("option",{value:"horizontal-tb",children:"Horizontal"}),i.jsx("option",{value:"vertical-rl",children:"Vertical Right-to-Left"}),i.jsx("option",{value:"vertical-lr",children:"Vertical Left-to-Right"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Direction"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!d.direction||d.direction==="ltr"?"active":"",onClick:()=>c("direction","ltr"),title:"Left to Right",children:"LTR"}),i.jsx("button",{className:d.direction==="rtl"?"active":"",onClick:()=>c("direction","rtl"),title:"Right to Left",children:"RTL"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Background Padding"}),i.jsx("input",{type:"number",value:d.backgroundPadding||5,onChange:F=>c("backgroundPadding",parseInt(F.target.value)),min:"0",max:"50",disabled:!d.hasBackground})]})]})]})},g=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Shape Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Fill Color"}),i.jsx("input",{type:"color",value:d.fill||"#000000",onChange:b=>c("fill",b.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:d.stroke||"#000000",onChange:b=>c("stroke",b.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:d.strokeWidth||2,onChange:b=>c("strokeWidth",parseInt(b.target.value)),min:"0",max:"20"})]}),d.type==="star"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Star Points"}),i.jsx("input",{type:"number",value:d.numPoints||5,onChange:b=>c("numPoints",parseInt(b.target.value)),min:"3",max:"20"})]}),d.type==="roundedRectangle"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Corner Radius"}),i.jsx("input",{type:"number",value:d.cornerRadius||10,onChange:b=>c("cornerRadius",parseInt(b.target.value)),min:"0",max:"50"})]})]}),C=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Image Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:d.opacity||1,onChange:b=>c("opacity",parseFloat(b.target.value))}),i.jsxs("span",{children:[Math.round((d.opacity||1)*100),"%"]})]}),f&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Border Radius"}),i.jsx("input",{type:"number",value:d.borderRadius||0,onChange:b=>c("borderRadius",parseInt(b.target.value)),min:"0",max:"50"})]})]}),T=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Position & Size"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"X"}),i.jsx("input",{type:"number",value:Math.round(d.x)||0,onChange:b=>c("x",parseInt(b.target.value))})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Y"}),i.jsx("input",{type:"number",value:Math.round(d.y)||0,onChange:b=>c("y",parseInt(b.target.value))})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Width"}),i.jsx("input",{type:"number",value:Math.round(d.width)||0,onChange:b=>c("width",parseInt(b.target.value)),min:"1"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Height"}),i.jsx("input",{type:"number",value:Math.round(d.height)||0,onChange:b=>c("height",parseInt(b.target.value)),min:"1"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Rotation"}),i.jsx("input",{type:"range",min:"-180",max:"180",value:d.rotation||0,onChange:b=>c("rotation",parseInt(b.target.value))}),i.jsxs("span",{children:[d.rotation||0,"°"]})]})]}),w=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Line Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Width"}),i.jsx("input",{type:"number",value:d.strokeWidth||d.height||2,onChange:b=>{const B=parseInt(b.target.value);c("strokeWidth",B),c("height",B)},min:"1",max:"50"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Length"}),i.jsx("input",{type:"number",value:d.width||200,onChange:b=>c("width",parseInt(b.target.value)),min:"10",max:"1000"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Line Color"}),i.jsxs("div",{className:"color-input-group",children:[i.jsx("input",{type:"color",value:d.stroke||d.fill||"#000000",onChange:b=>{c("stroke",b.target.value),c("fill",b.target.value)}}),i.jsx("input",{type:"text",value:d.stroke||d.fill||"#000000",onChange:b=>{c("stroke",b.target.value),c("fill",b.target.value)},placeholder:"#000000"})]})]})]}),I=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Layer Controls"}),i.jsxs("div",{className:"button-group vertical",children:[i.jsx("button",{onClick:()=>a(d.id,"top"),children:"Bring to Front"}),i.jsx("button",{onClick:()=>a(d.id,"up"),children:"Bring Forward"}),i.jsx("button",{onClick:()=>a(d.id,"down"),children:"Send Backward"}),i.jsx("button",{onClick:()=>a(d.id,"bottom"),children:"Send to Back"})]})]}),j=["rectangle","circle","triangle","star","arrow","diamond","hexagon","pentagon","heart","oval","roundedRectangle"];return i.jsxs("div",{className:"properties-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Properties"}),i.jsx("span",{className:"element-type",children:d.type})]}),i.jsxs("div",{className:"panel-content",children:[d.type==="text"&&u(),j.includes(d.type)&&g(),d.type==="image"&&C(),d.type==="horizontalLine"&&w(),T(),I(),i.jsx("div",{className:"property-group",children:i.jsxs("button",{className:"toggle-advanced",onClick:()=>x(!f),children:[f?"Hide":"Show"," Advanced Options"]})})]})]})},ai=({elements:d,selectedElement:o,onSelectElement:a,onMoveLayer:l,onDeleteElement:s,theme:f})=>{const x=(u,g)=>{switch(u){case"text":return"T";case"rectangle":return"▭";case"circle":return"●";case"triangle":return"▲";case"star":return"★";case"arrow":return"➤";case"diamond":return"◆";case"hexagon":return"⬡";case"pentagon":return"⬟";case"heart":return"♥";case"oval":return"⬭";case"roundedRectangle":return"▢";case"horizontalLine":return"―";case"image":return"🖼";case"qrcode":return"⬚";case"barcode":return"|||";case"sticker":return"🎭";case"embroidery":return"🧵";default:return"?"}},c=u=>{var g,C;if(u.type==="text")return u.isIcon&&u.iconData?`Icon: ${u.iconData.name}`:((g=u.text)==null?void 0:g.substring(0,20))+(((C=u.text)==null?void 0:C.length)>20?"...":"")||"Text";if(u.type==="qrcode")return`QR Code: ${(u.data||"").substring(0,15)+((u.data||"").length>15?"...":"")}`;if(u.type==="barcode"){const T=u.format||"CODE128",w=u.data||"";return`Barcode (${T}): ${w.substring(0,10)+(w.length>10?"...":"")}`}return u.type==="sticker"?`Sticker: ${(u.name||"Untitled").substring(0,15)}`:u.type==="embroidery"?`Embroidery: ${(u.name||"Design").substring(0,15)}`:u.type.charAt(0).toUpperCase()+u.type.slice(1)};return i.jsxs("div",{className:"layers-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Layers"}),i.jsx("span",{className:"layer-count",children:d.length})]}),i.jsx("div",{className:"layers-list",children:d.length===0?i.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...d].reverse().map((u,g)=>i.jsxs("div",{className:`layer-item ${(o==null?void 0:o.id)===u.id?"selected":""}`,onClick:()=>a(u),children:[i.jsxs("div",{className:"layer-info",children:[i.jsx("span",{className:"layer-icon",children:x(u.type)}),i.jsx("span",{className:"layer-name",children:c(u)})]}),i.jsxs("div",{className:"layer-controls",children:[i.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(u.id,"up")},disabled:g===0,title:"Move Up",children:"↑"}),i.jsx("button",{className:"layer-btn",onClick:C=>{C.stopPropagation(),l(u.id,"down")},disabled:g===d.length-1,title:"Move Down",children:"↓"}),i.jsx("button",{className:"layer-btn delete",onClick:C=>{C.stopPropagation(),s(u.id)},title:"Delete",children:"×"})]})]},u.id))})]})};class si{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}async exportAllSections(o,a,l,s,f="png",x=!0,c=null){const u={};for(const g of a){const C=g.id||g.sectionName,T=o[C];if(!T||!T.elements||T.elements.length===0){console.log(`Skipping section ${C} - no elements`);continue}if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){let I=g.image||g.sectionImage;if(c&&c.sectionImage&&(g.sectionName==="Front"||c.sections&&Object.keys(c.sections).includes(g.sectionName))&&(I=c.sectionImage),I)try{const j=await this.loadImage(I);await this.processImageColor(j,T.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(j){console.warn("Failed to load background image:",j)}}else this.ctx.clearRect(0,0,l,s);for(const I of T.elements)await this.drawElement(I);const w=this.canvas.toDataURL(`image/${f}`,f==="jpeg"?.9:void 0);u[C]={dataUrl:w,blob:await this.dataUrlToBlob(w)}}return u}async downloadExports(o,a="design"){const l=Object.keys(o);if(l.length===0){alert("No designs to export");return}if(l.length===1){const s=l[0],{blob:f}=o[s],x=URL.createObjectURL(f),c=document.createElement("a");c.href=x,c.download=`${a}-${s}.png`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(x)}else for(const s of l){const{blob:f}=o[s],x=URL.createObjectURL(f),c=document.createElement("a");c.href=x,c.download=`${a}-${s}.png`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(x),await new Promise(u=>setTimeout(u,100))}}async loadImage(o){return new Promise((a,l)=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>a(s),s.onerror=l,s.src=o})}getLuma(o,a,l){return(.2126*o+.7152*a+.0722*l)/255}async processImageColor(o,a){const l=document.createElement("canvas"),s=l.getContext("2d");l.width=o.width,l.height=o.height,s.clearRect(0,0,l.width,l.height),s.drawImage(o,0,0);const f=s.getImageData(0,0,l.width,l.height),x=f.data,c=this.hexToRgb(a);if(!c){console.warn("Invalid target color:",a);return}const{r:u,g,b:C}=c;for(let T=0;T<x.length;T+=4){if(x[T+3]===0)continue;const I=this.getLuma(x[T],x[T+1],x[T+2]);x[T]=Math.round(u*I),x[T+1]=Math.round(g*I),x[T+2]=Math.round(C*I)}return s.putImageData(f,0,0),this.processedImage=new Image,new Promise(T=>{this.processedImage.onload=()=>{T()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),T()},this.processedImage.src=l.toDataURL("image/png")})}async drawElement(o){this.ctx.save();const a=o.x+o.width/2,l=o.y+o.height/2;switch(this.ctx.translate(a,l),o.rotation&&this.ctx.rotate(o.rotation*Math.PI/180),this.ctx.translate(-o.width/2,-o.height/2),o.type){case"text":this.drawText(o);break;case"rectangle":this.drawRectangle(o);break;case"circle":this.drawCircle(o);break;case"triangle":this.drawTriangle(o);break;case"star":this.drawStar(o);break;case"arrow":this.drawArrow(o);break;case"diamond":this.drawDiamond(o);break;case"hexagon":this.drawHexagon(o);break;case"pentagon":this.drawPentagon(o);break;case"heart":this.drawHeart(o);break;case"oval":this.drawOval(o);break;case"roundedRectangle":this.drawRoundedRectangle(o);break;case"qrcode":await this.drawQRCode(o);break;case"barcode":await this.drawBarcode(o);break;case"horizontalLine":this.drawHorizontalLine(o);break;case"sticker":await this.drawSticker(o);break;case"embroidery":await this.drawEmbroidery(o);break;case"image":await this.drawImage(o);break}this.ctx.restore()}drawText(o){this.ctx.font=`${o.fontStyle||"normal"} ${o.fontWeight||"normal"} ${o.fontSize||20}px ${o.fontFamily||"Arial"}`,this.ctx.fillStyle=o.fill||"#000000",this.ctx.textAlign=o.textAlign||"left",this.ctx.textBaseline="top",o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth);const a=(o.text||"Text").split(`
-`),l=(o.fontSize||20)*1.2;a.forEach((s,f)=>{const x=f*l;o.stroke&&o.strokeWidth>0&&this.ctx.strokeText(s,0,x),this.ctx.fillText(s,0,x)})}drawRectangle(o){o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fillRect(0,0,o.width,o.height)),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.strokeRect(0,0,o.width,o.height))}drawCircle(o){const a=Math.min(o.width,o.height)/2,l=o.width/2,s=o.height/2;this.ctx.beginPath(),this.ctx.arc(l,s,a,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawTriangle(o){const a=o.width/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(0,o.height),this.ctx.lineTo(o.width,o.height),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawStar(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,f=s*.4,x=o.numPoints||5;this.ctx.beginPath();for(let c=0;c<x*2;c++){const u=c%2===0?s:f,g=c*Math.PI/x,C=a+Math.cos(g)*u,T=l+Math.sin(g)*u;c===0?this.ctx.moveTo(C,T):this.ctx.lineTo(C,T)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawArrow(o){const a=o.width,l=o.height,s=a*.3;this.ctx.beginPath(),this.ctx.moveTo(a/2,0),this.ctx.lineTo(a,l*.6),this.ctx.lineTo(a-s,l*.6),this.ctx.lineTo(a-s,l),this.ctx.lineTo(s,l),this.ctx.lineTo(s,l*.6),this.ctx.lineTo(0,l*.6),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}async dataUrlToBlob(o){return new Promise(a=>{const l=document.createElement("canvas"),s=l.getContext("2d"),f=new Image;f.onload=()=>{l.width=f.width,l.height=f.height,s.drawImage(f,0,0),l.toBlob(a)},f.src=o})}hexToRgb(o){const a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);return a?{r:parseInt(a[1],16),g:parseInt(a[2],16),b:parseInt(a[3],16)}:null}drawDiamond(o){const a=o.width/2,l=o.height/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(o.width,l),this.ctx.lineTo(a,o.height),this.ctx.lineTo(0,l),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHexagon(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,f=6;this.ctx.beginPath();for(let x=0;x<f;x++){const c=x*2*Math.PI/f-Math.PI/2,u=a+s*Math.cos(c),g=l+s*Math.sin(c);x===0?this.ctx.moveTo(u,g):this.ctx.lineTo(u,g)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawPentagon(o){const a=o.width/2,l=o.height/2,s=Math.min(o.width,o.height)/2,f=5;this.ctx.beginPath();for(let x=0;x<f;x++){const c=x*2*Math.PI/f-Math.PI/2,u=a+s*Math.cos(c),g=l+s*Math.sin(c);x===0?this.ctx.moveTo(u,g):this.ctx.lineTo(u,g)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHeart(o){const a=o.width,l=o.height,s=0,f=0;this.ctx.beginPath();const x=l*.3;this.ctx.moveTo(s+a/2,f+x),this.ctx.bezierCurveTo(s+a/2,f,s,f,s,f+x),this.ctx.bezierCurveTo(s,f+(l+x)/2,s+a/2,f+(l+x)/2,s+a/2,f+l),this.ctx.bezierCurveTo(s+a/2,f+(l+x)/2,s+a,f+(l+x)/2,s+a,f+x),this.ctx.bezierCurveTo(s+a,f,s+a/2,f,s+a/2,f+x),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawOval(o){const a=o.width/2,l=o.height/2,s=o.width/2,f=o.height/2;this.ctx.beginPath(),this.ctx.ellipse(a,l,s,f,0,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawRoundedRectangle(o){const a=Math.min(o.width,o.height)*.1;this.drawRoundedRect(0,0,o.width,o.height,a),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawRoundedRect(o,a,l,s,f){this.ctx.beginPath(),this.ctx.moveTo(o+f,a),this.ctx.lineTo(o+l-f,a),this.ctx.quadraticCurveTo(o+l,a,o+l,a+f),this.ctx.lineTo(o+l,a+s-f),this.ctx.quadraticCurveTo(o+l,a+s,o+l-f,a+s),this.ctx.lineTo(o+f,a+s),this.ctx.quadraticCurveTo(o,a+s,o,a+s-f),this.ctx.lineTo(o,a+f),this.ctx.quadraticCurveTo(o,a,o+f,a),this.ctx.closePath()}async drawQRCode(o){if(o.imageObject)this.ctx.drawImage(o.imageObject,0,0,o.width,o.height);else if(o.src)try{const a=await this.loadImage(o.src);this.ctx.drawImage(a,0,0,o.width,o.height)}catch(a){console.warn("Failed to load QR code image for export:",a),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("QR Error",o.width/2,o.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No QR Data",o.width/2,o.height/2)}async drawBarcode(o){if(o.imageObject)this.ctx.drawImage(o.imageObject,0,0,o.width,o.height);else if(o.src)try{const a=await this.loadImage(o.src);this.ctx.drawImage(a,0,0,o.width,o.height)}catch(a){console.warn("Failed to load barcode image for export:",a),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Barcode Error",o.width/2,o.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No Barcode Data",o.width/2,o.height/2)}drawHorizontalLine(o){this.ctx.save(),o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.strokeStyle=o.stroke||o.fill||"#000000",this.ctx.lineWidth=o.strokeWidth||o.height||2,this.ctx.lineCap="round",this.ctx.beginPath(),this.ctx.moveTo(0,o.height/2),this.ctx.lineTo(o.width,o.height/2),this.ctx.stroke(),this.ctx.restore()}async drawSticker(o){try{let a=null;if(o.imageObject)a=o.imageObject;else if(o.imageData)a=o.imageData;else if(o.src||o.image){const l=o.src||o.image;a=await this.loadImage(l)}else o.data&&o.data.image&&(a=await this.loadImage(o.data.image));a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Sticker",o.width/2,o.height/2))}catch(a){console.warn("Failed to draw sticker:",a),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",o.width/2,o.height/2)}}async drawEmbroidery(o){try{let a=null;if(o.imageObject)a=o.imageObject;else if(o.imageData)a=o.imageData;else if(o.src||o.image){const l=o.src||o.image;a=await this.loadImage(l)}else o.data&&o.data.image&&(a=await this.loadImage(o.data.image));a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Embroidery",o.width/2,o.height/2))}catch(a){console.warn("Failed to draw embroidery:",a),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",o.width/2,o.height/2)}}async drawImage(o){try{let a=null;if(o.imageObject&&o.imageObject instanceof HTMLImageElement)a=o.imageObject;else if(o.imageData){if(o.imageData instanceof HTMLImageElement)a=o.imageData;else if(typeof o.imageData=="string")try{a=await this.loadImage(o.imageData)}catch(l){console.warn("Failed to load image from imageData URL:",o.imageData,l),a=await this.loadImageWithFallback(o.imageData)}}else if(o.src)try{a=await this.loadImage(o.src)}catch(l){console.warn("Failed to load image from src:",o.src,l),a=await this.loadImageWithFallback(o.src)}else if(o.image)try{a=await this.loadImage(o.image)}catch(l){console.warn("Failed to load image from image property:",o.image,l),a=await this.loadImageWithFallback(o.image)}a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):this.drawImagePlaceholder(o)}catch(a){console.error("Failed to draw image element:",a),this.drawImagePlaceholder(o)}}async loadImageWithFallback(o){return new Promise(a=>{const l=new Image;l.onload=()=>a(l),l.onerror=()=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>a(s),s.onerror=()=>{console.warn("All image loading attempts failed for:",o),a(null)},s.src=o},l.src=o})}drawImagePlaceholder(o){this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.lineWidth=2,this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Image",o.width/2,o.height/2-8),this.ctx.fillText("Not Found",o.width/2,o.height/2+8)}async blobToFile(o,a,l="image/png"){return new File([o],a,{type:l,lastModified:Date.now()})}async exportAllSectionsAsJSON(o,a,l,s,f="png",x=null){var w,I;const c=[],u=[],g={};for(const j of a){const b=j.sectionName,B=o[b];if(!B||!B.elements||B.elements.length===0){console.log(`Skipping section ${b} - no elements`);continue}let D=j.image||j.sectionImage;x&&x.sectionImage&&(j.sectionName==="Front"||x.sections&&Object.keys(x.sections).includes(j.sectionName))&&(D=x.sectionImage);const F={...B,backgroundImage:D,sectionImage:D,sectionName:b,selectedColor:B.selectedColor||"#FFFFFF",canvasWidth:l,canvasHeight:s};g[b]=F;const $=await this.exportSectionAsBlob(B,j,l,s,f,!0,x);if($){const W=await this.blobToFile($,`${b}-full.${f}`,`image/${f}`);c.push({sectionName:b,sectionImage:W})}const z=await this.exportSectionAsBlob(B,j,l,s,f,!1,x);if(z){const W=await this.blobToFile(z,`${b}-print.${f}`,`image/${f}`);u.push({sectionName:b,sectionImage:W})}}let C=((w=a[0])==null?void 0:w.image)||((I=a[0])==null?void 0:I.sectionImage);if(x&&x.sectionImage){const j=a[0];j&&(j.sectionName==="Front"||x.sections&&Object.keys(x.sections).includes(j.sectionName))&&(C=x.sectionImage)}const T={sections:g,canvasWidth:l,canvasHeight:s,sectionImage:C,format:f,timestamp:new Date().toISOString(),version:"1.0",...x&&{initData:{sectionImage:x.sectionImage,sections:x.sections?Object.keys(x.sections):[]}},product:{sections:a.map(j=>({sectionName:j.sectionName||j.id,sectionImage:j.image||j.sectionImage,id:j.id||j.sectionName}))}};return{fullDesign:c,printReady:u,designFile:JSON.stringify(T)}}async exportSectionAsBlob(o,a,l,s,f="png",x=!0,c=null){try{if(this.canvas.width=l,this.canvas.height=s,this.ctx.clearRect(0,0,l,s),x){let u=a.image||a.sectionImage;if(c&&c.sectionImage&&(a.sectionName==="Front"||c.sections&&Object.keys(c.sections).includes(a.sectionName))&&(u=c.sectionImage),u)try{const g=await this.loadImage(u);await this.processImageColor(g,o.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,l,s)}catch(g){console.warn("Failed to load background image:",g)}}else this.ctx.clearRect(0,0,l,s);for(const u of o.elements)await this.drawElement(u);return new Promise(u=>{this.canvas.toBlob(u,`image/${f}`,f==="jpeg"?.9:void 0)})}catch(u){return console.error("Error exporting section as blob:",u),null}}async exportCurrentSectionAsJSON(o,a="png",l=null){var I,j,b;const s=((I=o.activeSection)==null?void 0:I.sectionName)||"main";let f=((j=o.activeSection)==null?void 0:j.sectionImage)||((b=o.activeSection)==null?void 0:b.image);l&&l.sectionImage&&(s==="Front"||l.sections&&Object.keys(l.sections).includes(s))&&(f=l.sectionImage);const x={elements:o.elements,selectedColor:o.selectedColor,canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,backgroundImage:f,sectionImage:f,sectionName:s,zoomLevel:o.zoomLevel,showGrid:o.showGrid,snapToGrid:o.snapToGrid},c={id:s,sectionName:s,image:f,sectionImage:f},u=[],g=[],C=await this.exportSectionAsBlob(x,c,o.canvasWidth,o.canvasHeight,a,!0,l);if(C){const B=await this.blobToFile(C,`${s}-full.${a}`,`image/${a}`);u.push({sectionName:s,sectionImage:B})}const T=await this.exportSectionAsBlob(x,c,o.canvasWidth,o.canvasHeight,a,!1,l);if(T){const B=await this.blobToFile(T,`${s}-print.${a}`,`image/${a}`);g.push({sectionName:s,sectionImage:B})}const w={sections:{[s]:x},canvasWidth:o.canvasWidth,canvasHeight:o.canvasHeight,sectionImage:f,format:a,timestamp:new Date().toISOString(),version:"1.0",...l&&{initData:{sectionImage:l.sectionImage,sections:l.sections?Object.keys(l.sections):[]}},productInfo:{sections:[{sectionName:s,sectionImage:f,id:s}]}};return{fullDesign:u,printReady:g,designFile:JSON.stringify(w)}}}class li{constructor(o="localStorage"){this.storage=o==="sessionStorage"?sessionStorage:localStorage,this.STORAGE_PREFIX="mypixia_canvas_",this.DESIGNS_LIST_KEY="mypixia_saved_designs"}saveDesign(o,a){var l;try{const s=this.generateDesignId(o),f=new Date().toISOString(),x={id:s,name:o,timestamp:f,version:"1.0",canvasData:{elements:a.elements||[],canvasWidth:a.canvasWidth||800,canvasHeight:a.canvasHeight||600,selectedColor:a.selectedColor||"#FF0000",activeSection:a.activeSection||null,product:a.product||null,sectionDesigns:a.sectionDesigns||{},zoomLevel:a.zoomLevel||1,showGrid:a.showGrid||!1,snapToGrid:a.snapToGrid||!0},metadata:{elementCount:((l=a.elements)==null?void 0:l.length)||0,lastModified:f,thumbnail:a.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+s,JSON.stringify(x)),this.updateDesignsList(s,o,f),{success:!0,designId:s,message:"Design saved successfully"}}catch(s){return console.error("Error saving design:",s),{success:!1,error:s.message}}}loadDesign(o){try{let a=o;if(!o.startsWith("design_")){const x=this.getAllDesigns().find(c=>c.name===o);if(!x)return{success:!1,error:"Design not found"};a=x.id}const l=this.storage.getItem(this.STORAGE_PREFIX+a);return l?{success:!0,data:JSON.parse(l)}:{success:!1,error:"Design not found"}}catch(a){return console.error("Error loading design:",a),{success:!1,error:a.message}}}getAllDesigns(){try{const o=this.storage.getItem(this.DESIGNS_LIST_KEY);return o?JSON.parse(o):[]}catch(o){return console.error("Error getting designs list:",o),[]}}deleteDesign(o){try{this.storage.removeItem(this.STORAGE_PREFIX+o);const l=this.getAllDesigns().filter(s=>s.id!==o);return this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(l)),{success:!0,message:"Design deleted successfully"}}catch(a){return console.error("Error deleting design:",a),{success:!1,error:a.message}}}exportDesignAsFile(o){try{const a=this.loadDesign(o);if(!a.success)return a;const l=a.data,s=JSON.stringify(l,null,2),f=new Blob([s],{type:"application/json"}),x=URL.createObjectURL(f),c=document.createElement("a");return c.href=x,c.download=`${l.name}_${l.id}.json`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(x),{success:!0,message:"Design exported successfully"}}catch(a){return console.error("Error exporting design:",a),{success:!1,error:a.message}}}importDesignFromFile(o){return new Promise(a=>{try{const l=new FileReader;l.onload=s=>{try{const f=JSON.parse(s.target.result);if(!this.validateDesignData(f)){a({success:!1,error:"Invalid design file format"});return}const x=this.generateDesignId(f.name+"_imported");f.id=x,f.name+="_imported",f.timestamp=new Date().toISOString(),f.metadata.lastModified=f.timestamp,this.storage.setItem(this.STORAGE_PREFIX+x,JSON.stringify(f)),this.updateDesignsList(x,f.name,f.timestamp),a({success:!0,data:f,message:"Design imported successfully"})}catch{a({success:!1,error:"Failed to parse design file"})}},l.readAsText(o)}catch(l){a({success:!1,error:l.message})}})}autoSave(o,a){const l=this.STORAGE_PREFIX+"autosave_"+o;try{const s={timestamp:new Date().toISOString(),canvasData:a};return this.storage.setItem(l,JSON.stringify(s)),!0}catch(s){return console.error("Auto-save failed:",s),!1}}loadAutoSave(o){const a=this.STORAGE_PREFIX+"autosave_"+o;try{const l=this.storage.getItem(a);return l?JSON.parse(l):null}catch(l){return console.error("Failed to load auto-save:",l),null}}clearAutoSave(o){const a=this.STORAGE_PREFIX+"autosave_"+o;this.storage.removeItem(a)}getStorageInfo(){const o=this.getAllDesigns();let a=0;return o.forEach(l=>{const s=this.storage.getItem(this.STORAGE_PREFIX+l.id);s&&(a+=new Blob([s]).size)}),{designCount:o.length,totalSize:a,totalSizeFormatted:this.formatBytes(a),storageLimit:this.getStorageLimit()}}clearAllDesigns(){try{return this.getAllDesigns().forEach(a=>{this.storage.removeItem(this.STORAGE_PREFIX+a.id)}),this.storage.removeItem(this.DESIGNS_LIST_KEY),{success:!0,message:"All designs cleared"}}catch(o){return{success:!1,error:o.message}}}generateDesignId(o){const a=Date.now(),l=Math.random().toString(36).substring(2,8);return`design_${a}_${l}`}updateDesignsList(o,a,l){const s=this.getAllDesigns(),f=s.findIndex(c=>c.id===o),x={id:o,name:a,timestamp:l,lastModified:l};f>=0?s[f]=x:s.push(x),s.sort((c,u)=>new Date(u.timestamp)-new Date(c.timestamp)),this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(s))}validateDesignData(o){return o&&o.id&&o.name&&o.canvasData&&Array.isArray(o.canvasData.elements)}formatBytes(o){if(o===0)return"0 Bytes";const a=1024,l=["Bytes","KB","MB","GB"],s=Math.floor(Math.log(o)/Math.log(a));return parseFloat((o/Math.pow(a,s)).toFixed(2))+" "+l[s]}getStorageLimit(){try{if("storage"in navigator&&"estimate"in navigator.storage)return navigator.storage.estimate().then(o=>o.quota)}catch{console.warn("Unable to estimate storage quota")}return"Unknown"}}const ne=y.forwardRef((d,o)=>{const{theme:a={primaryColor:"#000000",secondaryColor:"#cf7e52",tertiaryColor:"#FFFFFF"},readOnly:l=!1,product:s={name:"Premium Crew Neck T-Shirt",category:"Tshirts",description:"Men's crew neck t-shirts",plainColor:"N",mainImage:"https://static.mypixia.com/dev/products/7/e011a73a-f20a-489b-bea8-91a23da56fc4.png",colorSettings:["#FF0000","#0000FF","#008000","#000000","#FFFFFF","#808080","#FFFF00"],sections:[{sectionName:"Front",sectionImage:"https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png"},{sectionName:"Sleeve-left",sectionImage:"https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"},{sectionName:"Back",sectionImage:"https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"}]},initFile:f,initDesignContent:x}=d,[c,u]=y.useState([]),[g,C]=y.useState(null),[T,w]=y.useState(!1),[I,j]=y.useState(!1),[b,B]=y.useState(!1),[D,F]=y.useState({x:0,y:0}),[$,z]=y.useState(null),[W,ot]=y.useState(600),[U,nt]=y.useState(600),[q,it]=y.useState(1),[Y,O]=y.useState(s.colorSettings[0]),[J,rt]=y.useState(!1),[K,et]=y.useState(!0),[M,G]=y.useState(!0),[N,m]=y.useState(s.sections[0]),[A,Q]=y.useState(!1),[_,Z]=y.useState({}),[V,ct]=y.useState([]),[H,P]=y.useState(-1),[st]=y.useState(new li("localStorage")),dt=y.useRef(null),At=y.useRef(null),wt=y.useRef(null),ut=y.useRef(null),Lt=y.useRef(null),Rt=y.useRef(new si),Et=y.useRef(!1),[ht,Pt]=y.useState(null),at=y.useCallback(()=>{const e={elements:JSON.parse(JSON.stringify(c)),selectedElement:g?{...g}:null,timestamp:Date.now()},t=V.slice(0,H+1);t.push(e),t.length>50?t.shift():P(H+1),ct(t)},[c,g,V,H]),bt=y.useCallback(()=>({elements:c,canvasWidth:W,canvasHeight:U,selectedColor:Y,activeSection:N,product:s,sectionDesigns:_,zoomLevel:q,showGrid:J,snapToGrid:M,selectedElement:g?{...g}:null,canvasRef:dt}),[c,W,U,Y,N,s,_,q,J,M,g]),Ut=e=>{if(e.sections&&typeof e.sections=="object"){const t=Object.keys(e.sections)[0],r=e.sections[t];if(r&&r.elements){u(r.elements||[]),ot(r.canvasWidth||800),nt(r.canvasHeight||600),O(r.selectedColor||s.colorSettings[0]),it(r.zoomLevel||1),rt(r.showGrid||!1),G(r.snapToGrid||!0),C(null),e.sections&&Z(e.sections);const n=s.sections.find(h=>h.sectionName===t);n&&m(n),ct([]),P(-1),setTimeout(()=>{at()},100);return}}};y.useEffect(()=>{const t=setTimeout(async()=>{if(c.length===0&&V.length<=1)if(x)try{const r=JSON.parse(x);Pt(r),Ut(r)}catch(r){console.error("Error loading design file:",r),console.warn("Using default text instead")}else if(f)try{const r=await fetch(f);if(r.ok){const n=await r.text();if(n.trim()){const h=JSON.parse(n.trim());Pt(h),Ut(h)}}else console.warn("Failed to load design file, using default text")}catch(r){console.error("Error loading design file:",r),console.warn("Using default text instead")}else{const n="Arial",h="Change me",k=document.createElement("canvas").getContext("2d");k.font=`24px ${n}`;const v=k.measureText(h).width,R={id:lt(),type:"text",x:W/2-v/2,y:U/2-24/2,width:v,height:24,text:h,fontSize:24,fontFamily:n,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};u([R]),C(R),setTimeout(()=>{at()},100)}},300);return()=>clearTimeout(t)},[f,x,s.colorSettings,s.sections]);const Dt=y.useCallback((e="png",t=!0)=>{const r=bt();return s.sections,Rt.current.exportAllSections({[(N==null?void 0:N.sectionName)||"main"]:r},[{id:(N==null?void 0:N.sectionName)||"main",sectionName:(N==null?void 0:N.sectionName)||"main",image:N==null?void 0:N.sectionImage,sectionImage:N==null?void 0:N.sectionImage}],W,U,e,t,ht)},[bt,s.sections,N,W,U]),ce=["Arial","Helvetica","Times New Roman","Georgia","Verdana","Courier New","Tahoma","Trebuchet MS","Impact","Comic Sans MS","Palatino","Garamond","Bookman","Avant Garde","Century Gothic"],Tt=20;y.useEffect(()=>{const e=()=>Q(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),y.useEffect(()=>{const e=document.createElement("canvas");e.width=W,e.height=U,Lt.current=e},[W,U]),y.useEffect(()=>{V.length===0&&at()},[]);const jt=(e,t,r,n,h,p)=>{e.beginPath(),e.moveTo(t+p,r),e.lineTo(t+n-p,r),e.quadraticCurveTo(t+n,r,t+n,r+p),e.lineTo(t+n,r+h-p),e.quadraticCurveTo(t+n,r+h,t+n-p,r+h),e.lineTo(t+p,r+h),e.quadraticCurveTo(t,r+h,t,r+h-p),e.lineTo(t,r+p),e.quadraticCurveTo(t,r,t+p,r),e.closePath()},Ot=(e,t)=>{if(!t.isIcon)return{x:t.x,y:t.y,width:t.width,height:t.height,cx:t.x+t.width/2,cy:t.y+t.height/2};e.save(),e.font=`${t.fontStyle||""} ${t.fontWeight||""} ${t.fontSize}px ${t.fontFamily}`,e.textBaseline="alphabetic",e.textAlign="left";const r=e.measureText(t.text),n=r.actualBoundingBoxAscent??t.fontSize*.8,h=r.actualBoundingBoxDescent??t.fontSize*.2,p=r.actualBoundingBoxLeft??0,k=r.actualBoundingBoxRight??r.width,S=p+k,v=n+h,R=t.x,E=t.y,L=R-S/2-p,tt=E-v/2-n;return e.restore(),{x:L,y:tt,width:S,height:v,cx:R,cy:E}},de=(e,t)=>{if(!t)return;const r=8,n=8,h=4,p=30,k=Ot(e,t),S=t.isIcon?Math.max(r,12):r,v={x:-k.width/2-S,y:-k.height/2-S,w:k.width+S*2,h:k.height+S*2};e.save(),e.translate(k.cx,k.cy),t.rotation&&e.rotate(t.rotation*Math.PI/180);const R=e.createLinearGradient(v.x,v.y,v.x+v.w,v.y+v.h);R.addColorStop(0,"#3b82f6"),R.addColorStop(.5,"#1d4ed8"),R.addColorStop(1,"#3b82f6"),e.strokeStyle="rgba(59,130,246,.3)",e.lineWidth=3,jt(e,v.x-1,v.y-1,v.w+2,v.h+2,h+1),e.stroke(),e.strokeStyle=R,e.lineWidth=2,e.setLineDash([8,4]),jt(e,v.x,v.y,v.w,v.h,h),e.stroke(),e.lineDashOffset=-(Date.now()/50)%12,e.strokeStyle="#ffffff",e.lineWidth=1,e.setLineDash([4,8]),jt(e,v.x,v.y,v.w,v.h,h),e.stroke(),e.setLineDash([]),e.lineDashOffset=0,[{x:v.x,y:v.y},{x:v.x+v.w,y:v.y},{x:v.x+v.w,y:v.y+v.h},{x:v.x,y:v.y+v.h}].forEach(tt=>{e.fillStyle="rgba(0,0,0,.2)",e.fillRect(tt.x-n/2+1,tt.y-n/2+1,n,n),e.fillStyle="#ffffff",e.fillRect(tt.x-n/2,tt.y-n/2,n,n),e.strokeStyle="#3b82f6",e.lineWidth=1,e.strokeRect(tt.x-n/2,tt.y-n/2,n,n)});const E=0,L=v.y-p;e.strokeStyle="#3b82f6",e.lineWidth=1,e.setLineDash([2,2]),e.beginPath(),e.moveTo(E,L+12),e.lineTo(E,v.y),e.stroke(),e.setLineDash([]),e.beginPath(),e.arc(E,L,12,0,2*Math.PI),e.fillStyle="#f59e0b",e.fill(),e.strokeStyle="#ffffff",e.lineWidth=2,e.stroke(),e.strokeStyle="#ffffff",e.lineWidth=2,e.beginPath(),e.arc(E,L,6,-Math.PI/2,Math.PI,!1),e.stroke(),e.beginPath(),e.moveTo(E-6,L),e.lineTo(E-3,L-3),e.lineTo(E-3,L+3),e.closePath(),e.fillStyle="#ffffff",e.fill(),e.restore()},fe=(e,t)=>{if(!t)return[];const r=Ot(e,t),n=t.isIcon?Math.max(8,12):8,h=8,p=30,k=(t.rotation||0)*Math.PI/180,S={x:-r.width/2-n,y:-r.height/2-n,w:r.width+n*2,h:r.height+n*2},v=[{x:S.x,y:S.y,type:"nw-resize"},{x:S.x+S.w,y:S.y,type:"ne-resize"},{x:S.x+S.w,y:S.y+S.h,type:"se-resize"},{x:S.x,y:S.y+S.h,type:"sw-resize"},{x:0,y:S.y-p,type:"rotate"}],R=Math.cos(k),E=Math.sin(k);return v.map(L=>({x:r.cx+(L.x*R-L.y*E),y:r.cy+(L.x*E+L.y*R),type:L.type,size:L.type==="rotate"?24:h}))},Qt=(e,t,r)=>{if(!r)return null;const n=dt.current;if(!n)return null;const h=n.getContext("2d"),p=fe(h,r);for(const k of p){const S=e-k.x,v=t-k.y;if(Math.sqrt(S*S+v*v)<=k.size/2)return k.type}return null},kt=y.useCallback(()=>{if(H>0){const e=V[H-1];u(e.elements),C(e.selectedElement),P(H-1)}},[V,H]),mt=y.useCallback(()=>{if(H<V.length-1){const e=V[H+1];u(e.elements),C(e.selectedElement),P(H+1)}},[V,H]),xt=e=>M?Math.round(e/Tt)*Tt:e;y.useEffect(()=>{if(N!=null&&N.sectionImage){wt.current=null,ut.current=null;const e=dt.current;if(e&&e.getContext("2d").clearRect(0,0,W,U),f&&!ht)return;const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{wt.current=t,Vt(t,Y)},t.onerror=()=>{console.error("Failed to load background image:",N.sectionImage),X()};let r=N.sectionImage;ht&&ht.sectionImage&&(N.sectionName==="Front"||ht.sections&&Object.keys(ht.sections).includes(N.sectionName))&&(r=ht.sectionImage),t.src=r}else wt.current=null,ut.current=null,X()},[N,Y,ht]),y.useEffect(()=>{const e=t=>{const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))){if((t.key==="Delete"||t.key==="Backspace")&&g&&!l){t.preventDefault();const h=g;u(p=>p.filter(k=>k.id!==h.id)),C(null),at()}if(t.ctrlKey||t.metaKey)switch(t.key){case"z":t.shiftKey?(t.preventDefault(),mt()):(t.preventDefault(),kt());break;case"y":t.preventDefault(),mt();break}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[g,l,kt,mt,at]);const he=e=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},lt=()=>`element_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,ge=e=>{e.strokeStyle="#e0e0e0",e.lineWidth=1,e.setLineDash([1,1]);for(let t=0;t<=W;t+=Tt)e.beginPath(),e.moveTo(t,0),e.lineTo(t,U),e.stroke();for(let t=0;t<=U;t+=Tt)e.beginPath(),e.moveTo(0,t),e.lineTo(W,t),e.stroke();e.setLineDash([])},xe=(e,t)=>{e.save();const r=t.x+t.width/2,n=t.y+t.height/2;switch(e.translate(r,n),t.rotation&&e.rotate(t.rotation*Math.PI/180),e.translate(-t.width/2,-t.height/2),t.type){case"text":me(e,t);break;case"rectangle":pe(e,t);break;case"circle":we(e,t);break;case"triangle":be(e,t);break;case"star":ke(e,t);break;case"arrow":ve(e,t);break;case"diamond":Se(e,t);break;case"hexagon":Fe(e,t);break;case"pentagon":Ce(e,t);break;case"heart":Te(e,t);break;case"oval":je(e,t);break;case"roundedRectangle":Ne(e,t);break;case"image":Ae(e,t);break;case"qrcode":ue(e,t);break;case"barcode":ye(e,t);break;case"sticker":Re(e,t);break;case"horizontalLine":Ie(e,t);break;case"embroidery":Ee(e,t);break}e.restore()},ye=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageObject:r,imageLoading:!1}:h))},r.onerror=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageLoading:!1}:h))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Your customization",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Your customization",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No Barcode",t.width/2,t.height/2))},ue=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageObject:r,imageLoading:!1}:h))},r.onerror=()=>{u(n=>n.map(h=>h.id===t.id?{...h,imageLoading:!1}:h))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No QR Data",t.width/2,t.height/2))},me=(e,t)=>{e.save();let r=t.text||"Text";if(t.textTransform)switch(t.textTransform){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase();break;case"capitalize":r=r.replace(/\b\w/g,S=>S.toUpperCase());break}e.font=`${t.fontStyle||"normal"} ${t.fontWeight||"normal"} ${t.fontSize||20}px ${t.fontFamily||"Arial"}`,e.fillStyle=t.fill||"#000000",e.textAlign=t.textAlign||"left",e.textBaseline="top",t.opacity!==void 0&&(e.globalAlpha=t.opacity),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth);const n=r.split(`
-`),h=(t.fontSize||20)*(t.lineHeight||1.2),p=Math.max(...n.map(S=>e.measureText(S).width)),k=n.length*h;if(t.backgroundColor&&t.backgroundColor!=="transparent"){e.fillStyle=t.backgroundColor;const S=t.backgroundPadding||4;e.fillRect(-S,-S,p+S*2,k+S*2),e.fillStyle=t.fill||"#000000"}n.forEach((S,v)=>{const R=v*h,E=e.measureText(S).width;t.stroke&&t.strokeWidth>0&&e.strokeText(S,0,R),e.fillText(S,0,R);const L=t.fontSize||20,tt=t.decorationColor||t.fill||"#000000",ft=Math.max(1,L/20);if(e.strokeStyle=tt,e.lineWidth=ft,t.textDecoration==="underline"||t.underline){const yt=R+L+2;e.beginPath(),e.moveTo(0,yt),e.lineTo(E,yt),e.stroke()}if(t.textDecoration==="overline"||t.overline){const yt=R-2;e.beginPath(),e.moveTo(0,yt),e.lineTo(E,yt),e.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const yt=R+L/2;e.beginPath(),e.moveTo(0,yt),e.lineTo(E,yt),e.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(Qe=>{switch(Qe.trim()){case"underline":const Zt=R+L+2;e.beginPath(),e.moveTo(0,Zt),e.lineTo(E,Zt),e.stroke();break;case"overline":const te=R-2;e.beginPath(),e.moveTo(0,te),e.lineTo(E,te),e.stroke();break;case"line-through":const ee=R+L/2;e.beginPath(),e.moveTo(0,ee),e.lineTo(E,ee),e.stroke();break}})}),e.restore()},pe=(e,t)=>{t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fillRect(0,0,t.width,t.height)),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.strokeRect(0,0,t.width,t.height))},we=(e,t)=>{const r=Math.min(t.width,t.height)/2,n=t.width/2,h=t.height/2;e.beginPath(),e.arc(n,h,r,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},be=(e,t)=>{const r=t.width/2;t.height/2,e.beginPath(),e.moveTo(r,0),e.lineTo(0,t.height),e.lineTo(t.width,t.height),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ke=(e,t)=>{const r=t.width/2,n=t.height/2,h=Math.min(t.width,t.height)/2,p=h*.4,k=t.numPoints||5;e.beginPath();for(let S=0;S<k*2;S++){const v=S%2===0?h:p,R=S*Math.PI/k,E=r+Math.cos(R)*v,L=n+Math.sin(R)*v;S===0?e.moveTo(E,L):e.lineTo(E,L)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ve=(e,t)=>{const r=t.width,n=t.height,h=r*.3;e.beginPath(),e.moveTo(r/2,0),e.lineTo(r,n*.6),e.lineTo(r-h,n*.6),e.lineTo(r-h,n),e.lineTo(h,n),e.lineTo(h,n*.6),e.lineTo(0,n*.6),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Se=(e,t)=>{const r=t.width/2,n=t.height/2;e.beginPath(),e.moveTo(r,0),e.lineTo(t.width,n),e.lineTo(r,t.height),e.lineTo(0,n),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Fe=(e,t)=>{const r=t.width/2,n=t.height/2,h=Math.min(t.width,t.height)/2,p=6;e.beginPath();for(let k=0;k<p;k++){const S=k*2*Math.PI/p-Math.PI/2,v=r+h*Math.cos(S),R=n+h*Math.sin(S);k===0?e.moveTo(v,R):e.lineTo(v,R)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ce=(e,t)=>{const r=t.width/2,n=t.height/2,h=Math.min(t.width,t.height)/2,p=5;e.beginPath();for(let k=0;k<p;k++){const S=k*2*Math.PI/p-Math.PI/2,v=r+h*Math.cos(S),R=n+h*Math.sin(S);k===0?e.moveTo(v,R):e.lineTo(v,R)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Te=(e,t)=>{const r=t.width,n=t.height,h=0,p=0;e.beginPath();const k=n*.3;e.moveTo(h+r/2,p+k),e.bezierCurveTo(h+r/2,p,h,p,h,p+k),e.bezierCurveTo(h,p+(n+k)/2,h+r/2,p+(n+k)/2,h+r/2,p+n),e.bezierCurveTo(h+r/2,p+(n+k)/2,h+r,p+(n+k)/2,h+r,p+k),e.bezierCurveTo(h+r,p,h+r/2,p,h+r/2,p+k),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},je=(e,t)=>{const r=t.width/2,n=t.height/2,h=t.width/2,p=t.height/2;e.beginPath(),e.ellipse(r,n,h,p,0,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ne=(e,t)=>{const r=Math.min(t.width,t.height)*.1;jt(e,0,0,t.width,t.height,r),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ie=(e,t)=>{e.save(),t.opacity!==void 0&&(e.globalAlpha=t.opacity),e.strokeStyle=t.stroke||t.fill||"#000000",e.lineWidth=t.strokeWidth||t.height||2,e.lineCap="round",e.beginPath(),e.moveTo(0,t.height/2),e.lineTo(t.width,t.height/2),e.stroke(),e.restore()},Ae=(e,t)=>{const r=t.src||t.imageData;if(r)try{if(r instanceof HTMLImageElement){if(r.complete&&r.naturalWidth>0&&r.naturalHeight>0){e.drawImage(r,0,0,t.width,t.height);return}}else if(typeof r=="string"&&r.length>0){if(t._imageElement||(t._imageElement=new Image,t._imageElement.crossOrigin="anonymous",t._imageElement.onload=()=>{X()},t._imageElement.onerror=()=>{console.error("Failed to load image:",r),t._imageLoadError=!0,X()},t._imageElement.src=r),t._imageElement.complete&&t._imageElement.naturalWidth>0&&t._imageElement.naturalHeight>0){e.drawImage(t._imageElement,0,0,t.width,t.height);return}if(t._imageLoadError){e.fillStyle="#ffebee",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#f44336",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#f44336",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Error loading image",t.width/2,t.height/2);return}}e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.lineWidth=1,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Your customization",t.width/2,t.height/2)}catch(n){console.error("Error drawing image:",n),e.fillStyle="#ffebee",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#f44336",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#f44336",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Error loading image",t.width/2,t.height/2)}else e.fillStyle="#f8f8f8",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ddd",e.lineWidth=1,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#999",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No Image",t.width/2,t.height/2)},Re=(e,t)=>{const r=t.src;if(r)try{if(r instanceof HTMLImageElement){if(r.complete&&r.naturalWidth>0&&r.naturalHeight>0){e.drawImage(r,0,0,t.width,t.height);return}}else if(typeof r=="string"&&r.length>0){if(t._stickerElement||(t._stickerElement=new Image,t._stickerElement.crossOrigin="anonymous",t._stickerElement.onload=()=>{X()},t._stickerElement.onerror=()=>{console.error("Failed to load sticker:",r),t._stickerLoadError=!0,X()},t._stickerElement.src=r),t._stickerElement.complete&&t._stickerElement.naturalWidth>0&&t._stickerElement.naturalHeight>0){e.drawImage(t._stickerElement,0,0,t.width,t.height);return}if(t._stickerLoadError){Nt(e,t,"Failed to load",!0);return}}Nt(e,t,"Your customization")}catch(n){console.error("Error drawing sticker:",n),Nt(e,t,"Error",!0)}else Nt(e,t,"No Sticker")},Nt=(e,t,r,n=!1)=>{e.fillStyle=n?"#ffebee":"#f8f9fa",e.fillRect(0,0,t.width,t.height),e.strokeStyle=n?"#f44336":"#dee2e6",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle=n?"#f44336":"#6c757d",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText(r,t.width/2,t.height/2)},Ee=(e,t)=>{if(t.imageObject&&t.imageObject.complete&&t.imageObject.naturalHeight!==0)try{e.drawImage(t.imageObject,0,0,t.width,t.height)}catch(r){console.error("Error drawing embroidery image:",r),vt(e,t,"Error loading image")}else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{r.complete&&r.naturalHeight!==0?(t.imageObject=r,t.imageLoading=!1,X()):(t.imageLoading=!1,console.error("Image loaded but is invalid:",t.src))},r.onerror=()=>{t.imageLoading=!1,console.error("Failed to load embroidery image:",t.src),vt(e,t,"Failed to load")},r.src=t.src,vt(e,t,"Your customization")}else t.imageLoading?vt(e,t,"Your customization"):vt(e,t)},vt=(e,t,r="Embroidery")=>{e.fillStyle="#f9f9f9",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ddd",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#999",e.font="24px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("🧵",t.width/2,t.height/2-10),e.fillStyle="#666",e.font="12px Arial",e.fillText(r,t.width/2,t.height/2+15)},$t=(e,t,r)=>{if(!r)return!1;const n=r.x+r.width/2,h=r.y+r.height/2,p=e-n,k=t-h,S=-(r.rotation||0)*Math.PI/180,v=Math.cos(S),R=Math.sin(S),E=p*v-k*R,L=p*R+k*v,tt=r.width/2,ft=r.height/2;return E>=-tt&&E<=tt&&L>=-ft&&L<=ft},De=y.useCallback(()=>{(T||I||b)&&at(),w(!1),j(!1),B(!1),z(null);const e=dt.current;e&&(e.style.cursor="default")},[T,I,b,at]);y.useEffect(()=>{const e=t=>{if(l)return;const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))&&((t.ctrlKey||t.metaKey)&&(t.key==="z"&&!t.shiftKey?(t.preventDefault(),kt()):(t.key==="z"&&t.shiftKey||t.key==="y")&&(t.preventDefault(),mt())),(t.key==="Delete"||t.key==="Backspace")&&g&&(zt(g.id),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="d"&&g&&(Gt(g.id),t.preventDefault()),g&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))){t.preventDefault();const h=t.shiftKey?10:1;let p={};switch(t.key){case"ArrowUp":p.y=g.y-h;break;case"ArrowDown":p.y=g.y+h;break;case"ArrowLeft":p.x=g.x-h;break;case"ArrowRight":p.x=g.x+h;break}Ht(g.id,p),at()}};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[g,kt,mt,l]);const ze=(e,t={})=>{const r={id:lt(),type:e,x:50,y:50,width:100,height:100,fill:"#000000",stroke:"#000000",strokeWidth:0,rotation:0,...t};switch(e){case"text":r.id=lt(),r.text=t.text||"New Text",r.fontSize=t.fontSize||20,r.fontFamily=t.fontFamily||"Arial",r.fontWeight=t.fontWeight||"normal",r.fontStyle=t.fontStyle||"normal",r.textAlign=t.textAlign||"left",r.width=150,r.height=50;break;case"icon":r.id=lt(),r.text=t.text||"🎯",r.fontSize=t.fontSize||48,r.fontFamily=t.fontFamily||"Arial",r.fontWeight=t.fontWeight||"normal",r.fontStyle=t.fontStyle||"normal",r.textAlign="center",r.width=80,r.height=80,r.iconData=t.iconData||null,r.type="text",r.isIcon=!0;break;case"image":r.id=lt(),r.imageData=t.imageData||null,r.width=t.width||200,r.height=t.height||200;break;case"qrcode":r.id=lt(),r.type="qrcode",r.x=(t==null?void 0:t.x)||W/2-((t==null?void 0:t.width)||100)/2,r.y=(t==null?void 0:t.y)||U/2-((t==null?void 0:t.height)||100)/2,r.width=(t==null?void 0:t.width)||100,r.height=(t==null?void 0:t.height)||100,r.src=(t==null?void 0:t.src)||"",r.data=(t==null?void 0:t.data)||"",r.rotation=0,r.opacity=1;break;case"barcode":r.id=lt(),r.type="barcode",r.x=(t==null?void 0:t.x)||W/2-((t==null?void 0:t.width)||200)/2,r.y=(t==null?void 0:t.y)||U/2-((t==null?void 0:t.height)||100)/2,r.width=(t==null?void 0:t.width)||200,r.height=(t==null?void 0:t.height)||100,r.src=(t==null?void 0:t.src)||"",r.data=(t==null?void 0:t.data)||"",r.format=(t==null?void 0:t.format)||"CODE128",r.rotation=0,r.opacity=1,r.imageObject=(t==null?void 0:t.imageObject)||null;break;case"sticker":r.id=lt(),r.type="sticker",r.imageData=(t==null?void 0:t.imageData)||null,r.width=t.width||200,r.height=t.height||200;break;case"horizontalLine":r.id=lt(),r.type="horizontalLine",r.x=W/2-100,r.y=U/2-1,r.width=200,r.height=2,r.fill="#000000",r.stroke="#000000",r.strokeWidth=2,r.rotation=0,r.opacity=1;break;case"embroidery":r.id=lt(),r.type="embroidery",r.imageData=(t==null?void 0:t.imageData)||null,r.width=t.width||200,r.height=t.height||200;break;case"rectangle":case"circle":case"triangle":case"star":case"arrow":case"diamond":case"hexagon":case"pentagon":case"heart":case"oval":case"roundedRectangle":break;default:console.warn(`Unknown element type: ${e}`);return}u(n=>[...n,r]),C(r),at()},Ht=(e,t)=>{u(r=>r.map(n=>n.id===e?{...n,...t}:n)),g&&g.id===e&&C(r=>({...r,...t}))},zt=y.useCallback(()=>{g&&(u(e=>e.filter(t=>t.id!==g.id)),C(null),at())},[g,at]),Gt=e=>{const t=c.find(r=>r.id===e);if(t){const r={...t,id:lt(),x:t.x+20,y:t.y+20};u(n=>[...n,r]),C(r),at()}},_t=(e,t)=>{const r=c.findIndex(p=>p.id===e);if(r===-1)return;const n=[...c],h=n[r];t==="up"&&r<n.length-1?(n[r]=n[r+1],n[r+1]=h):t==="down"&&r>0?(n[r]=n[r-1],n[r-1]=h):t==="top"?(n.splice(r,1),n.push(h)):t==="bottom"&&(n.splice(r,1),n.unshift(h)),u(n),at()};y.useCallback(()=>{N&&Z(e=>({...e,[N.sectionName]:{elements:[...c],selectedColor:Y}}))},[N,c,Y]);const[,Be]=y.useReducer(e=>e+1,0);setTimeout(()=>{Be()},20);const We=y.useCallback(()=>{N&&Z(e=>({...e,[N.sectionName]:{elements:[...c],selectedColor:Y}}))},[N,c,Y]);y.useImperativeHandle(o,()=>({handleSectionChange:Yt,flushCurrentSectionDesign:We,exportPrintReady:async(e="png")=>await Dt(e,!1),exportFullDesign:async(e="png")=>await Dt(e,!0),exportDesign:Dt,getCanvasData:()=>bt(),exportAllDesignsAsJSON:async(e="png")=>{try{const t=bt(),r=(N==null?void 0:N.sectionName)||"main",n={elements:t.elements,selectedColor:t.selectedColor,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight},h={...t.sectionDesigns||{},[r]:n},p=s.sections&&s.sections.length>0?s.sections:[{id:r,sectionName:r,image:N==null?void 0:N.sectionImage,sectionImage:N==null?void 0:N.sectionImage}];return await Rt.current.exportAllSectionsAsJSON(h,p,W,U,e,ht)}catch(t){throw console.error("Export as JSON failed:",t),t}},exportCurrentSectionAsJSON:async(e="png")=>{try{const t=bt();return await Rt.current.exportCurrentSectionAsJSON(t,e,ht)}catch(t){throw console.error("Export current section as JSON failed:",t),t}}}));const gt=y.useRef(null),Bt=y.useRef(!1),X=y.useCallback(()=>{const e=dt.current;if(!e||Bt.current)return;Bt.current=!0;const t=e.getContext("2d");t.clearRect(0,0,W,U),ut.current&&t.drawImage(ut.current,0,0,W,U),J&&ge(t),c.forEach(r=>{t.save(),t.globalAlpha=r.opacity||1,xe(t,r),t.restore()}),g&&de(t,g),Bt.current=!1},[c,g,W,U,J]),pt=y.useCallback(()=>{gt.current&&cancelAnimationFrame(gt.current),gt.current=requestAnimationFrame(()=>{X(),gt.current=null})},[X]);y.useEffect(()=>{pt()},[c,g,W,U,J,pt]),y.useEffect(()=>{ut.current&&pt()},[ut.current,pt]),y.useEffect(()=>()=>{gt.current&&cancelAnimationFrame(gt.current)},[]);const Wt=y.useCallback(()=>{X(),(T||I||b)&&(gt.current=requestAnimationFrame(Wt))},[X,T,I,b]);y.useEffect(()=>{T||I||b?Wt():(gt.current&&(cancelAnimationFrame(gt.current),gt.current=null),pt())},[T,I,b,Wt,pt]);const Me=y.useCallback(e=>{if(l)return;const r=dt.current.getBoundingClientRect(),n=(e.clientX-r.left)/q,h=(e.clientY-r.top)/q;if(F({x:n,y:h}),g){const k=Qt(n,h,g);if(k){if(k==="rotate"){B(!0);const S=g.x+g.width/2,v=g.y+g.height/2,R=Math.atan2(h-v,n-S)*180/Math.PI;F({x:n,y:h,initialAngle:R,initialRotation:g.rotation||0})}else j(!0),z(k),F({x:n,y:h,initialWidth:g.width,initialHeight:g.height,initialX:g.x,initialY:g.y});return}}let p=null;for(let k=c.length-1;k>=0;k--)if($t(n,h,c[k])){p=c[k];break}p?(C(p),w(!0),F({x:n,y:h,offsetX:n-p.x,offsetY:h-p.y})):C(null),X()},[l,q,g,c,X]),Le=y.useCallback(e=>{if(l)return;const t=dt.current,r=t.getBoundingClientRect(),n=(e.clientX-r.left)/q,h=(e.clientY-r.top)/q;if(g&&!T&&!I&&!b){const p=Qt(n,h,g);p?p==="rotate"?t.style.cursor="grab":t.style.cursor=p:$t(n,h,g)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=T?"grabbing":"default";if(b&&g){const p=g.x+g.width/2,k=g.y+g.height/2,v=Math.atan2(h-k,n-p)*180/Math.PI-D.initialAngle;let R=D.initialRotation+v;e.shiftKey&&(R=Math.round(R/15)*15),R=(R%360+360)%360,u(E=>E.map(L=>L.id===g.id?{...L,rotation:R}:L)),C(E=>({...E,rotation:R})),X();return}if(I&&g&&$){const p=n-D.x,k=h-D.y;let S=D.initialWidth,v=D.initialHeight,R=D.initialX,E=D.initialY;switch($){case"se-resize":S=Math.max(20,D.initialWidth+p),v=Math.max(20,D.initialHeight+k);break;case"sw-resize":S=Math.max(20,D.initialWidth-p),v=Math.max(20,D.initialHeight+k),R=D.initialX+(D.initialWidth-S);break;case"ne-resize":S=Math.max(20,D.initialWidth+p),v=Math.max(20,D.initialHeight-k),E=D.initialY+(D.initialHeight-v);break;case"nw-resize":S=Math.max(20,D.initialWidth-p),v=Math.max(20,D.initialHeight-k),R=D.initialX+(D.initialWidth-S),E=D.initialY+(D.initialHeight-v);break}if(e.shiftKey&&g.type!=="text"){const tt=D.initialWidth/D.initialHeight;$.includes("e"),v=S/tt,$.includes("n")&&(E=D.initialY+(D.initialHeight-v))}M&&(R=xt(R),E=xt(E),S=xt(S),v=xt(v));const L={...g,x:R,y:E,width:S,height:v};u(tt=>tt.map(ft=>ft.id===g.id?L:ft)),C(L),X();return}if(T&&g){let p=n-D.offsetX,k=h-D.offsetY;M&&(p=xt(p),k=xt(k)),p=Math.max(0,Math.min(W-g.width,p)),k=Math.max(0,Math.min(U-g.height,k));const S={...g,x:p,y:k};u(v=>v.map(R=>R.id===g.id?S:R)),C(S),X()}},[l,q,g,T,I,b,$,D,M,W,U,c,X]),Yt=y.useCallback(e=>{N&&Z(r=>({...r,[N.sectionName]:{elements:c.map(n=>n.type==="image"?{...n,imageData:n.imageData,src:n.src}:n),selectedColor:Y}}));const t=_[e.sectionName];if(t){const r=t.elements.map(n=>{if(n.type==="image"&&n.src&&!n.imageData){const h=new Image;return h.onload=()=>{u(p=>p.map(k=>k.id===n.id?{...k,imageData:h}:k)),X()},h.src=n.src,{...n,imageData:h}}return n});u(r),O(t.selectedColor||Y)}else u([]);m(e),C(null)},[N,c,Y,_,X]),Pe=y.useCallback(e=>{if(e&&e.type.startsWith("image/")){const t=new FileReader;t.onload=r=>{const n=new Image;n.onload=()=>{const h={id:lt(),type:"image",x:xt(W/2-100),y:xt(U/2-100),width:Math.min(n.width,200),height:Math.min(n.height,200),rotation:0,imageData:n,src:r.target.result,originalWidth:n.width,originalHeight:n.height},p=n.width/n.height;h.width/h.height!==p&&(h.width/p<=200?h.height=h.width/p:h.width=h.height*p),u(k=>[...k,h]),C(h),at()},n.onerror=()=>{console.error("Failed to load uploaded image"),alert("Failed to load the uploaded image. Please try again.")},n.src=r.target.result},t.onerror=()=>{console.error("Failed to read file"),alert("Failed to read the file. Please try again.")},t.readAsDataURL(e)}else alert("Please select a valid image file.")},[W,U,xt,lt,at]),qt=y.useCallback(Ue(()=>{X()},16),[X]);y.useEffect(()=>{Et.current||qt()},[c,g,J,qt]);function Ue(e,t){let r;return function(...h){const p=()=>{clearTimeout(r),e(...h)};clearTimeout(r),r=setTimeout(p,t)}}y.useEffect(()=>{wt.current&&Vt(wt.current,Y)},[Y]),y.useEffect(()=>{X()},[X]);const Oe=(e,t,r)=>(.2126*e+.7152*t+.0722*r)/255,Vt=y.useCallback((e,t)=>{const r=Lt.current,n=r.getContext("2d");r.width=W,r.height=U,n.clearRect(0,0,W,U),n.drawImage(e,0,0,W,U);const h=n.getImageData(0,0,W,U),p=h.data,k=he(t);if(!k){Et.current=!1;return}const{r:S,g:v,b:R}=k;for(let L=0;L<p.length;L+=4){if(p[L+3]===0)continue;const ft=Oe(p[L],p[L+1],p[L+2]);p[L]=Math.round(S*ft),p[L+1]=Math.round(v*ft),p[L+2]=Math.round(R*ft)}n.putImageData(h,0,0);const E=new Image;E.onload=()=>{ut.current=s.plainColor==="Y"?E:e,Et.current=!1,X()},E.src=r.toDataURL("image/png")},[W,U,X]),Xt=e=>{if(!K)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),r=document.querySelector(".ruler-vertical");if(!t||!r)return{horizontal:[],vertical:[]};const n=t.getBoundingClientRect(),h=r.getBoundingClientRect(),p=n.width,k=h.height,S=50,v=[],R=[];for(let E=S;E<=p;E+=S)E<=p-20&&v.push({position:E,value:Math.round(E/e)});for(let E=S;E<=k;E+=S)E<=k-15&&R.push({position:E,value:Math.round(E/e)});return{horizontal:v,vertical:R}},[Jt,Kt]=y.useState({horizontal:[],vertical:[]});return y.useEffect(()=>{const e=()=>{setTimeout(()=>{const n=Xt(q);Kt(n)},50)};e();let t;const r=()=>{clearTimeout(t),t=setTimeout(e,150)};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),clearTimeout(t)}},[q,K]),y.useEffect(()=>{if(K&&!A){const e=setTimeout(()=>{const t=Xt(q);Kt(t)},100);return()=>clearTimeout(e)}},[K,A,q]),i.jsxs("div",{className:"pure-canvas-designer",children:[i.jsx("div",{className:"designer-header",children:i.jsx(oi,{onAddElement:ze,onDeleteElement:()=>g&&zt(g.id),onDuplicateElement:()=>g&&Gt(g.id),onUndo:kt,onRedo:mt,onToggleGrid:()=>rt(!J),onToggleRulers:()=>et(!K),onToggleSnap:()=>G(!M),onImageUpload:Pe,canUndo:H>0,canRedo:H<V.length-1,showGrid:J,showRulers:K,snapToGrid:M,selectedElement:g,theme:a,readOnly:l,apiKey:d.apiKey,apiEndpoint:d.apiEndpoint})}),i.jsxs("div",{className:"designer-content",children:[K&&!A&&i.jsxs("div",{className:"rulers",children:[i.jsx("div",{className:"ruler-horizontal",children:i.jsx("div",{className:"ruler-horizontal-numbers",children:Jt.horizontal.map((e,t)=>i.jsx("span",{className:"ruler-number horizontal",style:{left:`${e.position}px`},children:e.value},t))})}),i.jsx("div",{className:"ruler-vertical",children:i.jsx("div",{className:"ruler-vertical-numbers",children:Jt.vertical.map((e,t)=>i.jsx("span",{className:"ruler-number vertical",style:{top:`${e.position}px`},children:e.value},t))})})]}),i.jsx("div",{className:"canvas-container",ref:At,children:i.jsx("canvas",{ref:dt,width:W,height:U,onMouseDown:Me,onMouseMove:Le,onMouseUp:De,style:{border:"1px solid #e2e8f0",cursor:T?"grabbing":"default",transform:`scale(${q})`,transformOrigin:"top left"}})}),i.jsxs("div",{className:"side-panels",children:[i.jsx(ri,{selectedElement:g,onUpdate:Ht,onMoveLayer:_t,availableFonts:ce,theme:a}),i.jsx(ai,{elements:c,selectedElement:g,onSelectElement:C,onMoveLayer:_t,onDeleteElement:zt,theme:a})]})]}),i.jsxs("div",{className:"designer-footer",children:[i.jsxs("div",{className:"section-thumbnails",children:[i.jsxs("label",{className:"section-thumbnails-label",children:["Available sections for : ",i.jsx("u",{children:s.name})]}),i.jsx("div",{className:"thumbnails-container",children:s.sections.map(e=>{const t=_[e.sectionName]&&_[e.sectionName].elements&&_[e.sectionName].elements.length>0;return i.jsxs("div",{className:`section-thumbnail compact ${N.sectionName===e.sectionName?"active":""}`,onClick:r=>{r.stopPropagation();const n=s.sections.find(h=>h.sectionName===e.sectionName);Yt(n)},title:e.sectionName,children:[i.jsxs("div",{className:"thumbnail-image-container compact",children:[i.jsx("img",{src:e.sectionImage,alt:e.sectionName,className:"thumbnail-image compact",onError:r=>{r.target.style.display="none",r.target.nextSibling.style.display="flex"}}),i.jsx("div",{className:"thumbnail-placeholder compact",style:{display:"none"},children:i.jsx("span",{className:"placeholder-icon",children:"📐"})}),t&&i.jsx("div",{className:"content-indicator compact",children:i.jsx("svg",{className:"checkmark compact",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:i.jsx("path",{d:"M20 6L9 17l-5-5"})})})]}),i.jsx("span",{className:"thumbnail-label compact",children:e.sectionName})]},e.sectionName)})})]}),i.jsxs("div",{className:"color-palette-enhanced compact",children:[i.jsx("label",{className:"color-palette-label",children:"Supported colors:"}),i.jsxs("div",{className:"color-swatches-container",children:[s.colorSettings.slice(0,3).map((e,t)=>i.jsxs("div",{className:`color-swatch-enhanced compact ${Y===e?"active":""}`,onClick:r=>{r.stopPropagation(),O(e)},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner compact",style:{backgroundColor:e}}),Y===e&&i.jsx("div",{className:"color-selection-ring compact"})]},e)),s.colorSettings.length>3&&i.jsxs("div",{className:"color-dropdown-container",children:[i.jsx("button",{className:"color-more-button",onClick:e=>{e.stopPropagation();const t=e.currentTarget.nextElementSibling;t.style.display=t.style.display==="block"?"none":"block"},title:"More colors",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"12",cy:"12",r:"3"}),i.jsx("circle",{cx:"12",cy:"5",r:"3"}),i.jsx("circle",{cx:"12",cy:"19",r:"3"})]})}),i.jsx("div",{className:"color-dropdown-menu",style:{display:"none"},children:s.colorSettings.slice(3).map((e,t)=>i.jsxs("div",{className:`color-swatch-dropdown ${Y===e?"active":""}`,onClick:r=>{r.stopPropagation(),O(e),r.currentTarget.parentElement.style.display="none"},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner-dropdown",style:{backgroundColor:e}}),i.jsx("span",{className:"color-hex",children:e.toUpperCase()})]},e))})]})]})]}),i.jsxs("div",{className:"zoom-controls-enhanced compact",children:[i.jsx("label",{className:"zoom-label",children:"Zoom:"}),i.jsxs("div",{className:"zoom-buttons-container compact",children:[i.jsx("button",{className:"zoom-button compact zoom-out",onClick:()=>it(Math.max(.25,q-.25)),disabled:q<=.25,title:"Zoom Out",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsxs("div",{className:"zoom-display compact",children:[i.jsxs("span",{className:"zoom-percentage compact",children:[Math.round(q*100),"%"]}),i.jsx("div",{className:"zoom-slider-container compact",children:i.jsx("input",{type:"range",min:"0.25",max:"4",step:"0.25",value:q,onChange:e=>it(parseFloat(e.target.value)),className:"zoom-slider compact"})})]}),i.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>it(Math.min(4,q+.25)),disabled:q>=4,title:"Zoom In",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"11",y1:"8",x2:"11",y2:"14"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsx("button",{className:"zoom-reset compact",onClick:()=>it(1),title:"Reset Zoom (100%)",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("path",{d:"M3 3l18 18"}),i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"})]})})]})]})]})]})});ne.displayName="Mypixia";module.exports=ne;
+        `})]}),oo=({isOpen:r,onClose:a,onAddSticker:s,theme:n,apiKey:l,apiEndpoint:h})=>{const[f,k]=y.useState([]),[C,E]=y.useState(!1),[N,M]=y.useState(null),[v,B]=y.useState(""),[I,H]=y.useState(""),[Q,z]=y.useState({});y.useRef(null);const[T,S]=y.useState(!1),[L,j]=y.useState(!1),[it,J]=y.useState(!1),yt=`${h}/api/v1/designer`;y.useEffect(()=>{r&&l&&gt()},[r,l]);const gt=async()=>{const w=sessionStorage.getItem("apc_x_sub_status");w==="active"?(S(!0),j(!0),_()):w==="inactive"?(S(!1),j(!0)):(J(!0),await jt())},jt=async()=>{if(!l){S(!1),j(!0),J(!1);return}const w=`${yt}/get-subscription-status/${l}`;try{(await bi.get(w)).data.object==="active"?(sessionStorage.setItem("apc_x_sub_status","active"),S(!0),_()):(sessionStorage.setItem("apc_x_sub_status","inactive"),S(!1))}catch(q){console.error("Subscription check failed:",q),sessionStorage.setItem("apc_x_sub_status","inactive"),S(!1)}finally{J(!1),j(!0)}},_=async()=>{const w=sessionStorage.getItem("apc_stickers");if(w)try{const q=JSON.parse(w);k(q);return}catch{console.warn("Failed to parse cached stickers, fetching fresh data")}E(!0),M(null);try{const q=await bi.get(`${yt}/get-stickers`);if(q.data&&q.data.object&&q.data.object.contents){const P=q.data.object.contents;k(P),sessionStorage.setItem("apc_stickers",JSON.stringify(P))}else throw new Error("Invalid response format")}catch(q){console.error("Error fetching stickers:",q),M("Failed to load stickers. Please try again.")}finally{E(!1)}},O=(w,q)=>{s({type:"sticker",src:w,name:q,width:100,height:100,x:100,y:100}),a()},R=w=>{z(q=>({...q,[w]:!q[w]}))},nt=w=>{const q={};return w.forEach(P=>{const u=P.name.split("/");let A=q;u.forEach((U,at)=>{A[U]||(A[U]=at===u.length-1?P:{}),A=A[U]})}),q},rt=(w,q="",P=0)=>e.jsx("div",{className:"sticker-tree-level",style:{paddingLeft:`${P*15}px`},children:Object.keys(w).map(u=>{const A=`${q}/${u}`,U=Q[A];return w[u].type==="image"?!I||u.toLowerCase().includes(I.toLowerCase())?e.jsx("div",{className:"sticker-item",onClick:()=>O(w[u].url,u),children:e.jsx("div",{className:"sticker-preview",children:e.jsx("img",{src:w[u].url,alt:u,loading:"lazy",onError:xt=>{xt.target.style.display="none"}})})},A):null:e.jsxs("div",{className:"sticker-category",children:[e.jsxs("div",{className:"category-header",onClick:()=>R(A),children:[e.jsx("span",{className:`expand-icon ${U?"expanded":""}`,children:"▶"}),e.jsx("span",{className:"category-name",children:u})]}),U&&rt(w[u],A,P+1)]},A)})}),mt=f.filter(w=>!I||w.name.toLowerCase().includes(I.toLowerCase()));return r?e.jsx("div",{className:"sticker-modal-overlay",onClick:a,children:e.jsxs("div",{className:"sticker-modal-content",onClick:w=>w.stopPropagation(),children:[e.jsxs("div",{className:"sticker-modal-header",children:[e.jsx("h3",{children:"Stickers"}),e.jsx("button",{className:"sticker-modal-close",onClick:a,"aria-label":"Close",children:"×"})]}),e.jsxs("div",{className:"sticker-modal-body",children:[it&&e.jsx(Zi,{}),!T&&!it&&L&&e.jsx(ao,{theme:n}),T&&L&&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:I,onChange:w=>H(w.target.value),className:"sticker-search"})})}),C&&e.jsx(Zi,{}),N&&e.jsxs("div",{className:"sticker-error",children:[e.jsx("p",{children:N}),e.jsx("button",{onClick:_,children:"Retry"})]}),!C&&!N&&f.length>0&&e.jsx("div",{className:"sticker-grid",children:rt(nt(mt))})]})]})]})}):null},ro=`
+<defs>
+  <linearGradient id="gloss" x1="0" y1="0" x2="1" y2="0">
+    <stop offset="0" stop-color="#000" stop-opacity="0.28"/>
+    <stop offset="0.5" stop-color="#fff" stop-opacity="0.34"/>
+    <stop offset="1" stop-color="#000" stop-opacity="0.28"/>
+  </linearGradient>
+  <pattern id="satin" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+    <rect width="2.7" height="5" fill="url(#gloss)"/>
+  </pattern>
+  <pattern id="satinV" width="5" height="5" patternUnits="userSpaceOnUse" patternTransform="rotate(-45)">
+    <rect width="2.7" height="5" fill="url(#gloss)"/>
+  </pattern>
+  <filter id="floss" x="-30%" y="-30%" width="160%" height="160%">
+    <feTurbulence type="turbulence" baseFrequency="0.85 0.16" numOctaves="2" seed="4" result="grain"/>
+    <feDisplacementMap in="SourceGraphic" in2="grain" scale="2" xChannelSelector="R" yChannelSelector="G" result="rough"/>
+    <feSpecularLighting in="grain" surfaceScale="1.4" specularConstant="0.75" specularExponent="11" lighting-color="#ffffff" result="sheen">
+      <feDistantLight azimuth="225" elevation="58"/>
+    </feSpecularLighting>
+    <feComposite in="sheen" in2="SourceAlpha" operator="in" result="sheenCut"/>
+    <feMerge><feMergeNode in="rough"/><feMergeNode in="sheenCut"/></feMerge>
+  </filter>
+  <filter id="lift" x="-30%" y="-30%" width="160%" height="160%">
+    <feDropShadow dx="0.5" dy="1.1" stdDeviation="0.9" flood-color="#1a1208" flood-opacity="0.4"/>
+  </filter>
+</defs>`,He='fill="none" stroke="rgba(20,12,6,0.5)" stroke-width="1.3" stroke-dasharray="2.6 2" stroke-linecap="round"',Y=(r,a,s,n,l="satin")=>`<circle cx="${r}" cy="${a}" r="${s}" fill="${n}"/><circle cx="${r}" cy="${a}" r="${s}" fill="url(#${l})"/><circle cx="${r}" cy="${a}" r="${s}" ${He}/>`,At=(r,a,s,n,l,h=0,f="satin")=>{const k=h?` transform="rotate(${h} ${r} ${a})"`:"";return`<ellipse cx="${r}" cy="${a}" rx="${s}" ry="${n}" fill="${l}"${k}/><ellipse cx="${r}" cy="${a}" rx="${s}" ry="${n}" fill="url(#${f})"${k}/><ellipse cx="${r}" cy="${a}" rx="${s}" ry="${n}" ${He}${k}/>`},Z=(r,a,s="satin")=>`<path d="${r}" fill="${a}"/><path d="${r}" fill="url(#${s})"/><path d="${r}" ${He}/>`,Rt=(r,a,s,n,l,h=2,f="satin")=>`<rect x="${r}" y="${a}" width="${s}" height="${n}" rx="${h}" fill="${l}"/><rect x="${r}" y="${a}" width="${s}" height="${n}" rx="${h}" fill="url(#${f})"/><rect x="${r}" y="${a}" width="${s}" height="${n}" rx="${h}" ${He}/>`,ct=(r,a,s=3)=>`<path d="${r}" fill="none" stroke="${a}" stroke-width="${s}" stroke-linecap="round"/><path d="${r}" fill="none" stroke="rgba(255,255,255,0.4)" stroke-width="${Math.max(.8,s*.35)}" stroke-linecap="round"/>`;let Ki=0;const tt=(r,a,s,n)=>{Ki+=1;const l=`<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">${ro}<g filter="url(#lift)"><g filter="url(#floss)" stroke-linejoin="round">${n}</g></g></svg>`;return{id:Ki,name:r,category:a,description:s,url:`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(l)}`}},fi=(r,a,s,n,l,h,f)=>[...Array(s)].map((k,C)=>{const E=360/s*C,N=E*Math.PI/180;return At(r+Math.cos(N)*n,a+Math.sin(N)*n,l,h,f,E)}).join(""),ui=(r,a,s,n,l,h,f=3)=>[...Array(s)].map((k,C)=>{const E=360/s*C*Math.PI/180;return ct(`M${r+Math.cos(E)*n} ${a+Math.sin(E)*n} L${r+Math.cos(E)*l} ${a+Math.sin(E)*l}`,h,f)}).join(""),so=[tt("Rose","Floral","Satin rose",At(60,58,26,26,"#e23b6d")+At(60,58,17,17,"#f06292",0,"satinV")+Y(60,58,8,"#ad1457")+Z("M60 84 q4 16 -6 26","#2e7d32")),tt("Sunflower","Floral","Sunflower",fi(60,58,12,30,9,5,"#f4b400")+Y(60,58,17,"#8d5524","satinV")),tt("Tulip","Floral","Tulip",Z("M60 28 q18 6 16 30 q-16 -10 -16 -10 q0 0 -16 10 q-2 -24 16 -30 Z","#e23b6d")+Z("M60 48 q8 4 7 20 q-7 -6 -7 -6 q0 0 -7 6 q-1 -16 7 -20 Z","#ad1457")+ct("M60 58 L60 96","#2e7d32",3)+Z("M60 78 q14 -6 20 4 q-14 8 -20 -4 Z","#43a047")),tt("Daisy","Floral","Daisy",fi(60,58,10,26,11,5,"#ffffff")+Y(60,58,12,"#ffca28")),tt("Cherry Blossom","Floral","Cherry blossom",fi(60,60,5,18,11,9,"#f8bbd0")+Y(60,60,7,"#fff176")+ui(60,60,5,6,16,"#fce4ec",1.4)),tt("Lavender","Floral","Lavender sprig",ct("M60 100 C58 70 62 50 60 26","#5e7d3a",3)+[...Array(7)].map((r,a)=>At(60+(a%2?6:-6),30+a*9,6,4,"#9575cd",a%2?25:-25)).join("")),tt("Pine Tree","Nature","Evergreen",Rt(56,86,8,16,"#795548")+Z("M60 20 L82 56 L38 56 Z","#2e7d32")+Z("M60 40 L88 82 L32 82 Z","#388e3c")),tt("Mountain","Nature","Mountain",Z("M16 92 L52 36 L72 66 L88 44 L104 92 Z","#6d8299")+Z("M52 36 L64 54 L40 54 Z","#ffffff")+Y(92,30,9,"#ffd54f")),tt("Sun","Nature","Sunburst",ui(60,60,12,26,40,"#f9a825",3)+Y(60,60,22,"#fbc02d")),tt("Leaf Sprig","Nature","Leaf sprig",ct("M60 96 C60 70 60 50 60 28","#2e7d32",3)+Z("M60 70 q-22 -6 -26 -22 q24 0 26 22 Z","#43a047")+Z("M60 52 q22 -6 26 -22 q-24 0 -26 22 Z","#66bb6a")+Z("M60 38 q-18 -6 -22 -20 q20 0 22 20 Z","#43a047")),tt("Cactus","Nature","Potted cactus",Z("M52 92 q-2 -34 8 -34 q10 0 8 34 Z","#2e7d32")+Z("M52 70 q-16 0 -16 -14 q0 -8 6 -8 q10 0 10 14 Z","#43a047")+Z("M68 64 q16 0 16 -14 q0 -8 -6 -8 q-10 0 -10 14 Z","#43a047")+Rt(46,92,28,16,"#c1502e",3)),tt("Mushroom","Nature","Toadstool",Z("M30 64 q0 -34 30 -34 q30 0 30 34 Z","#e53935")+Rt(50,64,20,34,"#fff8e1",6)+Y(46,50,4,"#fff")+Y(60,44,5,"#fff")+Y(74,52,4,"#fff")),tt("Acorn","Nature","Acorn",Z("M40 56 q20 30 40 0 q-20 8 -40 0 Z","#a1683a")+Z("M38 56 q22 -20 44 0 q-22 8 -44 0 Z","#6d4c2f")+ct("M60 30 L60 38","#6d4c2f",3)),tt("Butterfly","Animals","Butterfly",At(44,50,16,13,"#7e57c2",-18)+At(76,50,16,13,"#7e57c2",18,"satinV")+At(46,76,12,10,"#9575cd",-12)+At(74,76,12,10,"#9575cd",12,"satinV")+Rt(57,42,6,44,"#4527a0",3)+ct("M60 44 L52 30","#4527a0",2)+ct("M60 44 L68 30","#4527a0",2)),tt("Bee","Animals","Bumblebee",At(60,64,22,16,"#fbc02d")+Rt(50,48,8,32,"#3e2723",2)+Rt(64,48,8,32,"#3e2723",2)+At(40,54,12,7,"#e3f2fd",-25)+At(80,54,12,7,"#e3f2fd",25)),tt("Ladybug","Animals","Ladybug",Y(60,62,24,"#e53935")+ct("M60 38 L60 86","#3e2723",2)+Y(60,40,9,"#3e2723")+Y(50,56,4,"#3e2723")+Y(70,56,4,"#3e2723")+Y(50,72,4,"#3e2723")+Y(70,72,4,"#3e2723")),tt("Cat","Animals","Cat face",Y(60,64,26,"#9e9e9e")+Z("M40 46 L36 24 L54 40 Z","#9e9e9e")+Z("M80 46 L84 24 L66 40 Z","#9e9e9e")+Y(51,62,3.4,"#212121")+Y(69,62,3.4,"#212121")+Z("M56 72 q4 4 8 0","#212121")),tt("Bird","Animals","Little bird",At(58,62,22,17,"#42a5f5")+Y(74,50,10,"#42a5f5")+Z("M82 50 L96 54 L82 58 Z","#fb8c00")+Y(77,48,2.4,"#212121")+Z("M40 64 q-16 4 -18 16 q18 -2 22 -8 Z","#1e88e5")),tt("Fish","Animals","Tropical fish",At(56,62,26,16,"#26c6da")+Z("M82 62 L100 48 L100 76 Z","#0097a7")+Y(44,58,2.6,"#063")+Z("M56 46 q0 -10 -8 -12 q2 8 8 12 Z","#0097a7")),tt("Paw","Animals","Paw print",At(60,72,14,11,"#6d4c41")+Y(44,52,6,"#6d4c41")+Y(58,44,6,"#6d4c41")+Y(72,46,6,"#6d4c41")+Y(82,58,5,"#6d4c41")),tt("Diamond","Geometric","Diamond",Z("M60 20 L96 60 L60 100 L24 60 Z","#1e88e5")+Z("M60 38 L78 60 L60 82 L42 60 Z","#64b5f6","satinV")),tt("Chevron","Geometric","Chevrons",[0,18,36].map((r,a)=>ct(`M24 ${42+r} L60 ${62+r} L96 ${42+r}`,["#1e88e5","#26a69a","#ef6c00"][a],5)).join("")),tt("Mandala","Geometric","Mandala",Y(60,60,30,"#8e24aa")+Y(60,60,20,"#ab47bc","satinV")+[...Array(8)].map((r,a)=>{const s=a*45*Math.PI/180;return Y(60+Math.cos(s)*30,60+Math.sin(s)*30,5,"#f3e5f5")}).join("")+Y(60,60,8,"#f3e5f5")),tt("Heart","Symbols","Heart",Z("M60 92 C24 66 30 34 50 34 C58 34 60 42 60 46 C60 42 62 34 70 34 C90 34 96 66 60 92 Z","#e53935")),tt("Star","Symbols","Star",Z("M60 22 L71 50 L101 50 L77 68 L86 98 L60 80 L34 98 L43 68 L19 50 L49 50 Z","#fbc02d")),tt("Crown","Symbols","Crown",Z("M28 84 L34 46 L48 66 L60 40 L72 66 L86 46 L92 84 Z","#f9a825")+Rt(28,84,64,10,"#f57f17")+Y(34,46,5,"#fdd835")+Y(60,40,5,"#fdd835")+Y(86,46,5,"#fdd835")),tt("Anchor","Symbols","Anchor",Y(60,30,7,"#37474f")+ct("M60 36 L60 92","#455a64",5)+ct("M40 60 L80 60","#455a64",5)+Z("M30 76 q6 22 30 22 q24 0 30 -22 q-12 14 -30 14 q-18 0 -30 -14 Z","#37474f")),tt("Lightning","Symbols","Lightning bolt",Z("M64 18 L40 64 L56 64 L50 102 L84 50 L66 50 Z","#ffb300")),tt("Music Note","Symbols","Music note",Y(46,84,11,"#5e35b1")+Y(82,76,11,"#5e35b1")+Rt(54,30,6,54,"#5e35b1",3)+Rt(85,22,6,54,"#5e35b1",3)+Z("M57 30 L91 22 L91 34 L57 42 Z","#5e35b1")),tt("Peace","Symbols","Peace sign",Y(60,60,30,"#43a047")+ct("M60 30 L60 90","rgba(255,255,255,0.95)",4)+ct("M60 60 L38 82","rgba(255,255,255,0.95)",4)+ct("M60 60 L82 82","rgba(255,255,255,0.95)",4)),tt("Cupcake","Food","Cupcake",Z("M38 64 L82 64 L74 98 L46 98 Z","#d7a86e")+Z("M34 64 q6 -28 26 -28 q20 0 26 28 Z","#ec407a")+Y(48,50,3,"#fff")+Y(60,44,3,"#fff")+Y(72,50,3,"#fff")+Y(60,34,5,"#e53935")),tt("Cherries","Food","Cherries",Y(46,84,12,"#e53935")+Y(74,84,12,"#c62828")+ct("M46 72 C50 50 60 40 64 30","#2e7d32",2.5)+ct("M74 72 C70 52 66 42 64 30","#2e7d32",2.5)+Z("M64 30 q14 -8 22 -2 q-12 8 -22 2 Z","#43a047")),tt("Coffee","Food","Coffee cup",Z("M34 50 L84 50 L80 92 L38 92 Z","#6d4c41")+Z("M84 56 q16 0 16 14 q0 14 -18 12","#6d4c41")+ct("M48 38 q4 -8 0 -14","#bcaaa4",2.5)+ct("M60 38 q4 -8 0 -14","#bcaaa4",2.5)+ct("M72 38 q4 -8 0 -14","#bcaaa4",2.5)),tt("Soccer Ball","Sports","Soccer ball",Y(60,60,32,"#fafafa")+Z("M60 44 L74 54 L69 72 L51 72 L46 54 Z","#212121")+ui(60,60,5,12,30,"#212121",2)),tt("Basketball","Sports","Basketball",Y(60,60,32,"#ef6c00")+ct("M60 28 L60 92","#3e2723",2.5)+ct("M28 60 L92 60","#3e2723",2.5)+ct("M36 36 Q60 60 36 84","#3e2723",2.5)+ct("M84 36 Q60 60 84 84","#3e2723",2.5)),tt("Snowflake","Holiday","Snowflake",[...Array(6)].map((r,a)=>{const s=a*60*Math.PI/180,n=60+Math.cos(s)*38,l=60+Math.sin(s)*38,h=60+Math.cos(s)*22,f=60+Math.sin(s)*22;return ct(`M60 60 L${n} ${l}`,"#4fc3f7",3)+ct(`M${h} ${f} L${h+Math.cos(s+.5)*10} ${f+Math.sin(s+.5)*10}`,"#4fc3f7",2)+ct(`M${h} ${f} L${h+Math.cos(s-.5)*10} ${f+Math.sin(s-.5)*10}`,"#4fc3f7",2)}).join("")+Y(60,60,5,"#81d4fa")),tt("Gift","Holiday","Gift box",Rt(34,54,52,44,"#e53935",4)+Rt(54,54,12,44,"#fff",2)+Rt(34,50,52,12,"#c62828",3)+Z("M60 50 q-18 -22 -2 -22 q8 0 2 22 Z","#fbc02d")+Z("M60 50 q18 -22 2 -22 q-8 0 -2 22 Z","#fbc02d")),tt("Holly","Holiday","Holly & berries",Z("M40 60 q10 -22 22 -10 q-2 16 -22 10 Z","#2e7d32")+Z("M80 60 q-10 -22 -22 -10 q2 16 22 10 Z","#388e3c")+Z("M50 78 q10 -16 20 -6 q-4 14 -20 6 Z","#43a047")+Y(56,64,5,"#e53935")+Y(64,64,5,"#c62828")+Y(60,72,5,"#e53935")),tt("Monogram","Text","Initial monogram",Y(60,60,34,"#5e35b1")+Y(60,60,34,"#5e35b1","satinV")+'<text x="60" y="75" text-anchor="middle" font-family="Georgia, serif" font-size="46" font-weight="700" fill="#ede7f6">A</text>')],no=({isOpen:r,onClose:a,onAddEmbroidery:s,theme:n,apiKey:l,apiEndpoint:h})=>{const[f,k]=y.useState([]),[C,E]=y.useState(!1),[N,M]=y.useState(null),[v,B]=y.useState(""),[I,H]=y.useState("All"),Q=y.useRef(null),z=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{r&&k(so)},[r]);const T=L=>{s({type:"embroidery",src:L.url,name:L.name,description:L.description,category:L.category,width:120,height:120,x:100,y:100}),a()},S=f.filter(L=>{const j=!v||L.name.toLowerCase().includes(v.toLowerCase())||L.description.toLowerCase().includes(v.toLowerCase()),it=I==="All"||L.category===I;return j&&it});return r?e.jsx("div",{className:"embroidery-modal-overlay",onClick:a,children:e.jsxs("div",{className:"embroidery-modal-content",onClick:L=>L.stopPropagation(),ref:Q,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:a,"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:v,onChange:L=>B(L.target.value),className:"embroidery-search"})}),e.jsxs("div",{className:"category-filter",children:[e.jsx("label",{children:"Category:"}),e.jsx("select",{value:I,onChange:L=>H(L.target.value),className:"category-select",children:z.map(L=>e.jsx("option",{value:L,children:L},L))})]})]}),e.jsxs("div",{className:"embroidery-modal-body",children:[C&&e.jsxs("div",{className:"embroidery-loading",children:[e.jsx("div",{className:"loading-spinner"}),e.jsx("p",{children:"Loading embroidery designs..."})]}),N&&e.jsx("div",{className:"embroidery-error",children:e.jsx("p",{children:N})}),!C&&!N&&e.jsx("div",{className:"embroidery-grid",children:S.map(L=>e.jsxs("div",{className:"embroidery-item",onClick:()=>T(L),title:L.description,children:[e.jsx("div",{className:"embroidery-preview",children:e.jsx("img",{src:L.url,alt:L.name,loading:"lazy",onError:j=>{console.error("Failed to load embroidery image:",L.url),j.target.style.display="none"}})}),e.jsxs("div",{className:"embroidery-info",children:[e.jsx("div",{className:"embroidery-name",children:L.name}),e.jsx("div",{className:"embroidery-category",children:L.category})]})]},L.id))}),!C&&!N&&S.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},lo=(r,a,s,n)=>`<text x="90" y="${66+1.3}" text-anchor="middle" font-family="${s}" font-weight="700" font-size="${a}" fill="rgba(0,0,0,0.4)">${r}</text><text x="90" y="${66-.8}" text-anchor="middle" font-family="${s}" font-weight="700" font-size="${a}" fill="rgba(255,255,255,0.22)">${r}</text><text x="90" y="66" text-anchor="middle" font-family="${s}" font-weight="700" font-size="${a}" fill="${n}">${r}</text>`,co=(r,a,s,n,l)=>{const h=`<svg xmlns="http://www.w3.org/2000/svg" width="180" height="120" viewBox="0 0 180 120"><defs><linearGradient id="c" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="${l[0]}"/><stop offset="1" stop-color="${l[1]}"/></linearGradient></defs><rect x="6" y="6" width="168" height="108" rx="14" fill="url(#c)"/><rect x="14" y="14" width="152" height="92" rx="9" fill="none" stroke="rgba(0,0,0,0.25)" stroke-width="2"/><rect x="14.5" y="14.5" width="151" height="91" rx="9" fill="none" stroke="rgba(255,255,255,0.25)" stroke-width="1"/>`+lo(r,a,s,n)+"</svg>";return`data:image/svg+xml;charset=UTF-8,${encodeURIComponent(h)}`};let Ji=0;const Wt=(r,a,s,{text:n,font:l,sysFont:h,ink:f,card:k,size:C=40,weight:E=700,style:N="normal",previewSize:M=30})=>(Ji+=1,{id:Ji,name:r,category:a,description:s,url:co(n,M,h,f,k),add:{text:n,fontFamily:l,fontSize:C,fontWeight:E,fontStyle:N,fill:f,textAlign:"center",width:300,height:90}}),ta=["#b07e4f","#7d4f28"],Re=["#f3e6cf","#e3cda6"],gi=["#dfe4ea","#9aa4b1"],mi=["#3a4651","#222a31"],ho=[Wt("Welcome","Signage","Bold welcome sign",{text:"WELCOME",font:"Bebas Neue",sysFont:"Impact, sans-serif",ink:"#3a2a1a",card:Re,size:46,previewSize:34}),Wt("Open","Signage","Shop open sign",{text:"OPEN",font:"Anton",sysFont:"Impact, sans-serif",ink:"#7a3b12",card:ta,size:54,previewSize:40}),Wt("Café","Signage","Café script sign",{text:"Café",font:"Pacifico",sysFont:'"Brush Script MT", cursive',ink:"#f5f5f5",card:mi,size:50,previewSize:38}),Wt("Gather","Signage","Gather sign",{text:"gather",font:"Playfair Display",sysFont:"Georgia, serif",ink:"#2e2a26",card:Re,size:46,style:"italic",previewSize:36}),Wt("Family Name","Home","Family name plaque",{text:"The Smiths",font:"Great Vibes",sysFont:'"Brush Script MT", cursive',ink:"#3a2a1a",card:ta,size:48,previewSize:30}),Wt("Home Sweet Home","Home","Home sweet home",{text:"Home Sweet Home",font:"Dancing Script",sysFont:'"Brush Script MT", cursive',ink:"#3a2a1a",card:Re,size:40,previewSize:22}),Wt("House Number","Home","House number",{text:"123",font:"Alfa Slab One",sysFont:"Georgia, serif",ink:"#2b3036",card:gi,size:64,previewSize:48}),Wt("Address","Home","Street address",{text:"21 OAK STREET",font:"Oswald",sysFont:"Arial, sans-serif",ink:"#f5f5f5",card:mi,size:34,previewSize:18}),Wt("Mr & Mrs","Wedding","Wedding sign",{text:"Mr & Mrs",font:"Great Vibes",sysFont:'"Brush Script MT", cursive',ink:"#3a2a1a",card:Re,size:52,previewSize:34}),Wt("Joy","Celebrations","Holiday joy",{text:"Joy",font:"Sacramento",sysFont:'"Brush Script MT", cursive',ink:"#f5f5f5",card:mi,size:60,previewSize:46}),Wt("Established","Celebrations","Established year",{text:"EST. 2024",font:"Staatliches",sysFont:"Impact, sans-serif",ink:"#2b3036",card:gi,size:44,previewSize:30}),Wt("Office","Business","Office name plate",{text:"OFFICE",font:"Oswald",sysFont:"Arial, sans-serif",ink:"#2b3036",card:gi,size:40,previewSize:30})],fo=({isOpen:r,onClose:a,onAddHandcraft:s,theme:n})=>{const[l,h]=y.useState([]),[f,k]=y.useState(""),[C,E]=y.useState("All"),N=y.useRef(null),M=["All","Signage","Business","Home","Wedding","Celebrations"];y.useEffect(()=>{r&&h(ho)},[r]);const v=I=>{s({...I.add}),a()},B=l.filter(I=>{const H=!f||I.name.toLowerCase().includes(f.toLowerCase())||I.description.toLowerCase().includes(f.toLowerCase()),Q=C==="All"||I.category===C;return H&&Q});return r?e.jsx("div",{className:"embroidery-modal-overlay",onClick:a,children:e.jsxs("div",{className:"embroidery-modal-content",onClick:I=>I.stopPropagation(),ref:N,children:[e.jsxs("div",{className:"embroidery-modal-header",children:[e.jsx("h3",{children:"Choose a Signage Template"}),e.jsx("button",{className:"embroidery-modal-close",onClick:a,"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 signage & handcraft templates...",value:f,onChange:I=>k(I.target.value),className:"embroidery-search"})}),e.jsxs("div",{className:"category-filter",children:[e.jsx("label",{children:"Category:"}),e.jsx("select",{value:C,onChange:I=>E(I.target.value),className:"category-select",children:M.map(I=>e.jsx("option",{value:I,children:I},I))})]})]}),e.jsxs("div",{className:"embroidery-modal-body",children:[e.jsx("div",{className:"embroidery-grid",children:B.map(I=>e.jsxs("div",{className:"embroidery-item",onClick:()=>v(I),title:I.description,children:[e.jsx("div",{className:"embroidery-preview",children:e.jsx("img",{src:I.url,alt:I.name,loading:"lazy"})}),e.jsxs("div",{className:"embroidery-info",children:[e.jsx("div",{className:"embroidery-name",children:I.name}),e.jsx("div",{className:"embroidery-category",children:I.category})]})]},I.id))}),B.length===0&&e.jsx("div",{className:"no-embroideries",children:e.jsx("p",{children:"No templates 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 signage templates — add one, then edit the text and resize it. Final engraving/finish may vary by material."})]})})]})}):null},uo=({isOpen:r,onClose:a,onAddText:s,theme:n})=>{const[l,h]=y.useState(""),[f,k]=y.useState("All");y.useEffect(()=>{if(!r)return;const v=Array.from(new Set(Jt.map(B=>B.fontFamily).filter(Boolean)));Pe(v)},[r]);const C=y.useMemo(()=>{const v=Jt.reduce((B,I)=>(B[I.category]=(B[I.category]||0)+1,B),{});return[{name:"All",count:Jt.length},...Object.entries(v).map(([B,I])=>({name:B,count:I}))]},[Jt]),E=y.useMemo(()=>Jt.filter(v=>{const B=!l||v.text.toLowerCase().includes(l.toLowerCase())||v.category.toLowerCase().includes(l.toLowerCase()),I=f==="All"||v.category===f;return B&&I}),[Jt,l,f]),N=v=>{const B={...v,x:100,y:100};s("text",B),a()},M=()=>{s("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),a()};return r?e.jsx("div",{className:"text-templates-modal-overlay",onClick:a,children:e.jsxs("div",{className:"text-templates-modal",onClick:v=>v.stopPropagation(),children:[e.jsxs("div",{className:"modal-header",children:[e.jsx("h2",{children:"Text Templates"}),e.jsx("button",{className:"close-btn",onClick:a,"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:l,onChange:v=>h(v.target.value),className:"search-input"})}),e.jsx("div",{className:"category-tabs",children:C.map(v=>e.jsxs("button",{className:`category-tab ${f===v.name?"active":""}`,onClick:()=>k(v.name),children:[v.name,e.jsxs("span",{className:"count",children:["(",v.count,")"]})]},v.name))})]}),e.jsxs("div",{className:"templates-grid",children:[e.jsx("div",{className:"custom-text-option",onClick:M,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"})]})}),E.map(v=>e.jsxs("div",{className:"template-item",onClick:()=>N(v),children:[e.jsx("div",{className:"template-preview",style:{fontFamily:v.fontFamily,fontSize:`${Math.min(v.fontSize*.6,18)}px`,fontWeight:v.fontWeight,fontStyle:v.fontStyle,color:v.fill,backgroundColor:v.hasBackground?v.backgroundColor:"transparent",textAlign:v.textAlign||"left",textTransform:v.textTransform||"none",letterSpacing:v.letterSpacing?`${v.letterSpacing}px`:"normal",textShadow:v.hasTextShadow?`${v.textShadowX}px ${v.textShadowY}px ${v.textShadowBlur}px ${v.textShadowColor}`:"none"},children:v.text}),e.jsxs("div",{className:"template-info",children:[e.jsx("span",{className:"template-category",children:v.category}),e.jsx("span",{className:"template-font",children:v.fontFamily})]})]},v.id))]}),e.jsx("div",{className:"modal-footer",children:e.jsxs("div",{className:"results-count",children:[E.length," template",E.length!==1?"s":""," found"]})})]})}):null},go=({isOpen:r,onClose:a,onAddImage:s,theme:n,apiKey:l,apiEndpoint:h,aiEndpoint:f,onAIImageGenerate:k})=>{const[C,E]=y.useState(""),[N,M]=y.useState(null),[v,B]=y.useState(!1),[I,H]=y.useState(null),[Q,z]=y.useState(null),T=y.useRef(null);if(y.useEffect(()=>{r&&(z(null),B(!1))},[r]),!r)return null;const S=(n==null?void 0:n.primaryColor)||"#4c5bf2",L=!v&&(C.trim().length>0||!!N),j=_=>{var nt;const O=(nt=_.target.files)==null?void 0:nt[0];if(!O||!O.type.startsWith("image/"))return;const R=new FileReader;R.onload=rt=>M({dataUrl:rt.target.result,name:O.name}),R.onerror=()=>z("Could not read that image. Please try another file."),R.readAsDataURL(O),_.target.value=""},it=()=>M(null),J=_=>{const O=_&&typeof _=="object"&&"object"in _?_.object:_;return O?typeof O=="string"?O:O.imageUrl||O.url||O.image||(O.imageBase64?`data:image/png;base64,${O.imageBase64}`:null):null},yt=async()=>{var _,O;z(null),B(!0),H(null);try{const R={prompt:C.trim(),imageDataUrl:(N==null?void 0:N.dataUrl)||null};let nt=null;if(typeof k=="function"){const rt=await k(R);nt=typeof rt=="string"?rt:J(rt)}else{const rt=f||(h?`${h}/api/v1/designer`:"");if(!rt)throw new Error("AI image generation is not configured.");const mt=await bi.post(`${rt}/generate-image`,{prompt:R.prompt,image:R.imageDataUrl,apiKey:l});nt=J(mt.data)}if(!nt)throw new Error("No image was returned. Please try a different prompt.");H(nt)}catch(R){console.error("AI image generation failed:",R),z(((O=(_=R==null?void 0:R.response)==null?void 0:_.data)==null?void 0:O.message)||(R==null?void 0:R.message)||"Image generation failed. Please try again.")}finally{B(!1)}},gt=()=>{if(!I)return;const _=new Image;_.crossOrigin="anonymous",_.onload=()=>{const R=_.naturalWidth||512,nt=_.naturalHeight||512,rt=Math.min(1,250/Math.max(R,nt));s({imageData:_,src:I,width:Math.round(R*rt),height:Math.round(nt*rt),originalWidth:R,originalHeight:nt}),a()},_.onerror=()=>z("The generated image could not be loaded onto the canvas."),_.src=I},jt=()=>{H(null),z(null)};return e.jsx("div",{className:"ai-modal-overlay",onClick:a,children:e.jsxs("div",{className:"ai-modal-content",onClick:_=>_.stopPropagation(),children:[e.jsxs("div",{className:"ai-modal-header",children:[e.jsx("h3",{children:"✨ AI Image Generator"}),e.jsx("button",{className:"ai-modal-close",onClick:a,"aria-label":"Close",children:"×"})]}),e.jsxs("div",{className:"ai-modal-body",children:[!I&&e.jsxs(e.Fragment,{children:[e.jsxs("p",{className:"ai-intro",children:["Generate ",e.jsx("strong",{children:"artwork, images, logos, icons, patterns"})," and much more — from a description, your own image, or both."]}),e.jsx("label",{className:"ai-field-label",htmlFor:"ai-prompt",children:"Describe what you want to create"}),e.jsx("textarea",{id:"ai-prompt",className:"ai-prompt",rows:4,placeholder:"e.g. a minimalist mountain logo · a bold retro sunset · a cute cartoon cat mascot · a seamless floral pattern",value:C,onChange:_=>E(_.target.value)}),e.jsxs("div",{className:"ai-ref-section",children:[e.jsx("span",{className:"ai-field-label",children:"Reference image (optional)"}),N?e.jsxs("div",{className:"ai-ref-preview",children:[e.jsx("img",{src:N.dataUrl,alt:N.name}),e.jsxs("div",{className:"ai-ref-meta",children:[e.jsx("span",{className:"ai-ref-name",children:N.name}),e.jsx("button",{type:"button",className:"ai-ref-remove",onClick:it,children:"Remove"})]})]}):e.jsx("button",{type:"button",className:"ai-upload-btn",onClick:()=>{var _;return(_=T.current)==null?void 0:_.click()},children:"+ Upload an image to transform"}),e.jsx("input",{ref:T,type:"file",accept:"image/*",style:{display:"none"},onChange:j})]}),e.jsx("p",{className:"ai-hint",children:N?C.trim()?"Your image will be transformed using your description.":"Add a description to guide how your image is transformed.":"Describe an image to create one from scratch, or upload a reference to transform."}),Q&&e.jsx("div",{className:"ai-error",children:Q}),e.jsx("button",{type:"button",className:"ai-generate-btn",style:{backgroundColor:S,opacity:L?1:.6},disabled:!L,onClick:yt,children:v?e.jsxs("span",{className:"ai-generating",children:[e.jsx("span",{className:"ai-spinner"})," Generating…"]}):"Generate image"})]}),I&&e.jsxs("div",{className:"ai-result",children:[e.jsx("div",{className:"ai-result-preview",children:e.jsx("img",{src:I,alt:"AI generated result"})}),Q&&e.jsx("div",{className:"ai-error",children:Q}),e.jsxs("div",{className:"ai-result-actions",children:[e.jsx("button",{type:"button",className:"ai-secondary-btn",onClick:jt,children:"Start over"}),e.jsx("button",{type:"button",className:"ai-secondary-btn",onClick:yt,disabled:v,children:v?"Regenerating…":"Regenerate"}),e.jsx("button",{type:"button",className:"ai-generate-btn",style:{backgroundColor:S},onClick:gt,children:"Add to design"})]})]})]})]})})},mo=[246,245,248,239,247,251],ea=mo.map(r=>Jt.find(a=>a.id===r)).filter(Boolean),po=({onAddElement:r,onDeleteElement:a,onDuplicateElement:s,onUndo:n,onRedo:l,onToggleGrid:h,onToggleRulers:f,onToggleSnap:k,onTogglePrintGuides:C,onImageUpload:E,canUndo:N,canRedo:M,showGrid:v,showRulers:B,snapToGrid:I,showPrintGuides:H,selectedElement:Q,theme:z,readOnly:T,mode:S="design",productionMethods:L,supportsEmbroidery:j,apiKey:it,apiEndpoint:J,aiEnabled:yt=!0,aiEndpoint:gt,onAIImageGenerate:jt,isAuthenticated:_=!0,onRequireAuth:O})=>{const R=S==="customize",rt=(L||[]).some(V=>String(V).toUpperCase()==="EMBROIDERY")||j==="Y",mt=(L||[]).some(V=>String(V).toUpperCase()==="HANDCRAFTED"),[w,q]=y.useState(!1),[P,u]=y.useState(!1),[A,U]=y.useState(!1),[at,xt]=y.useState(!1),[dt,It]=y.useState(!1),[kt,pt]=y.useState(!1),[Ct,Ht]=y.useState(!1),[Kt,te]=y.useState(!1),[ee,ne]=y.useState(!1),[bt,ie]=y.useState(!1),X=!R||bt,ve=V=>{const Vt=V.target.files[0];Vt&&Vt.type.startsWith("image/")&&E(Vt),V.target.value=""},Yt=V=>{r("icon",{iconData:V,text:V.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},Ve=V=>{r("qrcode",V)},Ge=V=>{r("barcode",V)},le=V=>{r("sticker",V)},$t=V=>{r("embroidery",V)},ae=V=>{r("text",V)},Lt=(V,Vt)=>{r(V,Vt)},we=V=>{r("image",V)},zt=()=>{te(!Kt),ne(!1)},oe=()=>{ne(!ee),te(!1)},_e=V=>{V==="custom"?r("text"):V==="templates"&&pt(!0),te(!1)};y.useEffect(()=>{ji(ea.map(V=>V.fontFamily).filter(Boolean))},[]);const Dt=V=>{r("text",{...V}),te(!1)},Tt=V=>{r(V),ne(!1)},ot="#475569";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:n,disabled:!N||T,title:"Undo (Ctrl+Z)",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"undo",size:18,color:!N||T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"Undo"})]}),e.jsxs("button",{className:"toolbar-btn compact",onClick:l,disabled:!M||T,title:"Redo (Ctrl+Y)",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"redo",size:18,color:!M||T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"Redo"})]})]}),e.jsx("div",{className:"toolbar-separator"}),yt&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"toolbar-group",children:e.jsxs("button",{className:"toolbar-btn compact ai-btn",onClick:()=>{if(!_){O&&O();return}Ht(!0)},disabled:T,title:"AI: generate artwork, images, logos, icons and much more",style:{color:T?"#94a3b8":"#6d28d9",background:T?void 0:"linear-gradient(135deg, #ede9fe, #f5f3ff)"},children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"sparkle",size:18,color:T?"#94a3b8":"#7c3aed"})}),e.jsx("span",{className:"label",children:"AI Image"})]})}),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:zt,children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"text",size:18,color:T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"Text"}),e.jsx("span",{className:`dropdown-arrow ${Kt?"open":""}`,children:"▾"})]}),e.jsxs("div",{className:`dropdown-menu text-design-menu ${Kt?"show":""}`,style:{minWidth:240},children:[e.jsxs("button",{onClick:()=>_e("custom"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"text",size:16,color:ot})})," Custom text"]}),e.jsx("div",{style:{padding:"6px 10px 2px",fontSize:11,fontWeight:700,color:"#94a3b8",textTransform:"uppercase",letterSpacing:.5},children:"Design ideas"}),ea.map(V=>e.jsx("button",{onClick:()=>Dt(V),title:`Add "${V.text}"`,style:{justifyContent:"flex-start"},children:e.jsx("span",{style:{fontFamily:`'${V.fontFamily}', cursive`,fontWeight:V.fontWeight||"normal",fontStyle:V.fontStyle||"normal",color:V.fill||"#111827",fontSize:18,lineHeight:1.2,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",textTransform:V.textTransform||"none"},children:V.text})},V.id)),e.jsxs("button",{onClick:()=>_e("templates"),style:{borderTop:"1px solid #e2e8f0",marginTop:4,color:"#2563eb",fontWeight:600},children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"book",size:16,color:"#2563eb"})})," More designs…"]})]})]}),R&&e.jsxs("button",{type:"button",className:`toolbar-btn compact ${bt?"active":""}`,onClick:()=>ie(V=>!V),title:"More tools (shapes, QR code, barcode, grid)",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"gear",size:18,color:bt?"#ffffff":ot})}),e.jsx("span",{className:"label",children:"More"}),e.jsx("span",{className:`dropdown-arrow ${bt?"open":""}`,children:"▾"})]}),X&&e.jsxs("div",{className:"toolbar-dropdown",children:[e.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:T,onClick:oe,children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"shapes",size:18,color:T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"Shapes"}),e.jsx("span",{className:`dropdown-arrow ${ee?"open":""}`,children:"▾"})]}),e.jsxs("div",{className:`dropdown-menu ${ee?"show":""}`,children:[e.jsxs("button",{onClick:()=>Tt("rectangle"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"rectangle",size:16,color:ot})})," Rectangle"]}),e.jsxs("button",{onClick:()=>Tt("circle"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"circle",size:16,color:ot})})," Circle"]}),e.jsxs("button",{onClick:()=>Tt("triangle"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"triangle",size:16,color:ot})})," Triangle"]}),e.jsxs("button",{onClick:()=>Tt("star"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"star",size:16,color:ot})})," Star"]}),e.jsxs("button",{onClick:()=>Tt("heart"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"heart",size:16,color:ot})})," Heart"]}),e.jsxs("button",{onClick:()=>Tt("arrow"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"arrowShape",size:16,color:ot})})," Arrow"]}),e.jsxs("button",{onClick:()=>Tt("diamond"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"diamond",size:16,color:ot})})," Diamond"]}),e.jsxs("button",{onClick:()=>Tt("hexagon"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"hexagon",size:16,color:ot})})," Hexagon"]}),e.jsxs("button",{onClick:()=>Tt("pentagon"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"pentagon",size:16,color:ot})})," Pentagon"]}),e.jsxs("button",{onClick:()=>Tt("oval"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"oval",size:16,color:ot})})," Oval"]}),e.jsxs("button",{onClick:()=>Tt("roundedRectangle"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"roundedRect",size:16,color:ot})})," Rounded Rectangle"]}),e.jsxs("button",{onClick:()=>Tt("horizontalLine"),children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"horizontalLine",size:16,color:ot})})," 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(K,{name:"upload",size:18,color:T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"Upload"}),e.jsx("input",{type:"file",accept:"image/*",onChange:ve,disabled:T})]}),e.jsx("div",{className:"toolbar-separator"}),e.jsx(to,{onSelectIcon:Yt,theme:z,disabled:T}),e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>U(!0),disabled:T,title:"Add Sticker",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"sticker",size:18,color:T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"Stickers"})]}),X&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"toolbar-separator"}),e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>q(!0),disabled:T,title:"Add QR Code",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"qrcode",size:18,color:T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"QR Code"})]}),e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>u(!0),disabled:T,title:"Add Barcode",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"barcode",size:18,color:T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"Barcode"})]})]})]}),rt&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"toolbar-separator"}),e.jsx("div",{className:"toolbar-group embroidery-group",children:e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>xt(!0),disabled:T,title:"Add Embroidery Design",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"thread",size:18,color:T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"Embroidery"})]})})]}),mt&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"toolbar-separator"}),e.jsx("div",{className:"toolbar-group handcraft-group",children:e.jsxs("button",{className:"toolbar-btn compact",onClick:()=>It(!0),disabled:T,title:"Add a signage / handcraft template",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"briefcase",size:18,color:T?"#94a3b8":ot})}),e.jsx("span",{className:"label",children:"Signage"})]})})]}),Q&&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:s,disabled:T,title:"Duplicate Element (Ctrl+D)",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"duplicate",size:18,color:T?"#94a3b8":"#059669"})}),e.jsx("span",{className:"label",children:"Duplicate"})]}),e.jsxs("button",{className:"toolbar-btn compact danger",onClick:a,disabled:T,title:"Delete Element (Delete)",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"trash",size:18,color:T?"#94a3b8":"#dc2626"})}),e.jsx("span",{className:"label",children:"Delete"})]})]})]}),X&&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 ${v?"active":""}`,onClick:h,title:"Toggle Grid",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"grid",size:18,color:v?"#ffffff":ot})}),e.jsx("span",{className:"label",children:"Grid"})]}),e.jsxs("button",{className:`toolbar-btn compact ${B?"active":""}`,onClick:f,title:"Toggle Rulers",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"ruler",size:18,color:B?"#ffffff":ot})}),e.jsx("span",{className:"label",children:"Rulers"})]}),e.jsxs("button",{className:`toolbar-btn compact ${I?"active":""}`,onClick:k,title:"Snap to Grid",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"magnet",size:18,color:I?"#ffffff":ot})}),e.jsx("span",{className:"label",children:"Snap"})]}),e.jsxs("button",{className:`toolbar-btn compact ${H?"active":""}`,onClick:C,title:"Toggle print area & safe-zone guides",children:[e.jsx("span",{className:"icon",children:e.jsx(K,{name:"rectangle",size:18,color:H?"#ffffff":ot})}),e.jsx("span",{className:"label",children:"Print area"})]})]})]})]}),e.jsx(eo,{isOpen:w,onClose:()=>q(!1),onAddQRCode:Ve,theme:z}),e.jsx(io,{isOpen:P,onClose:()=>u(!1),onAddBarcode:Ge,theme:z}),e.jsx(oo,{isOpen:A,onClose:()=>U(!1),onAddSticker:le,theme:z,apiKey:it,apiEndpoint:J}),e.jsx(no,{isOpen:at,onClose:()=>xt(!1),onAddEmbroidery:$t,theme:z,apiKey:it,apiEndpoint:J}),e.jsx(fo,{isOpen:dt,onClose:()=>It(!1),onAddHandcraft:ae,theme:z}),e.jsx(uo,{isOpen:kt,onClose:()=>pt(!1),onAddText:Lt,theme:z}),yt&&e.jsx(go,{isOpen:Ct,onClose:()=>Ht(!1),onAddImage:we,theme:z,apiKey:it,apiEndpoint:J,aiEndpoint:gt,onAIImageGenerate:jt})]})},yo=({value:r="Arial",onChange:a=()=>{},onFontLoaded:s=()=>{}})=>{const[n,l]=y.useState(!1),[h,f]=y.useState(""),k=y.useRef(null);y.useEffect(()=>{n&&Pe(ia)},[n]),y.useEffect(()=>{if(!n)return;const N=v=>{k.current&&!k.current.contains(v.target)&&l(!1)},M=v=>{v.key==="Escape"&&l(!1)};return document.addEventListener("mousedown",N),document.addEventListener("keydown",M),()=>{document.removeEventListener("mousedown",N),document.removeEventListener("keydown",M)}},[n]);const C=y.useMemo(()=>{const N=h.trim().toLowerCase();return N?Si.map(M=>({...M,fonts:M.fonts.filter(v=>v.toLowerCase().includes(N))})).filter(M=>M.fonts.length>0):Si},[h]),E=async N=>{a(N),l(!1),f(""),await aa(N),s()};return e.jsxs("div",{ref:k,style:{position:"relative",width:"100%"},children:[e.jsxs("button",{type:"button",onClick:()=>l(N=>!N),style:{width:"100%",display:"flex",alignItems:"center",justifyContent:"space-between",gap:8,padding:"8px 10px",border:"1px solid #cbd5e1",borderRadius:6,background:"#fff",cursor:"pointer",fontSize:14},title:"Choose a font",children:[e.jsx("span",{style:{fontFamily:`"${r}"`,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r}),e.jsx("span",{style:{color:"#64748b",fontSize:12},children:"▾"})]}),n&&e.jsxs("div",{style:{position:"absolute",top:"calc(100% + 4px)",left:0,right:0,zIndex:1e3,background:"#fff",border:"1px solid #cbd5e1",borderRadius:8,boxShadow:"0 8px 24px rgba(0,0,0,0.15)",maxHeight:320,display:"flex",flexDirection:"column",overflow:"hidden"},children:[e.jsx("input",{autoFocus:!0,value:h,onChange:N=>f(N.target.value),placeholder:"Search fonts…",style:{margin:8,padding:"6px 8px",border:"1px solid #e2e8f0",borderRadius:6,fontSize:13,outline:"none"}}),e.jsxs("div",{style:{overflowY:"auto",padding:"0 4px 6px"},children:[C.map(N=>e.jsxs("div",{children:[e.jsx("div",{style:{position:"sticky",top:0,background:"#f8fafc",color:"#64748b",fontSize:11,fontWeight:600,textTransform:"uppercase",letterSpacing:"0.04em",padding:"6px 8px"},children:N.name}),N.fonts.map(M=>e.jsx("button",{type:"button",onMouseEnter:()=>Pe([M]),onClick:()=>E(M),style:{width:"100%",textAlign:"left",padding:"8px 10px",border:"none",borderRadius:6,cursor:"pointer",fontSize:16,fontFamily:`"${M}"`,background:M===r?"#eff6ff":"transparent",color:M===r?"#1d4ed8":"#0f172a"},children:M},M))]},N.name)),C.length===0&&e.jsxs("div",{style:{padding:12,color:"#94a3b8",fontSize:13},children:["No fonts match “",h,"”."]})]})]})]})},Be=[{name:"White",hex:"#FFFFFF"},{name:"Ecru",hex:"#F3EAD3"},{name:"Cream",hex:"#F7E9C3"},{name:"Silver",hex:"#C8CDD2"},{name:"Light Grey",hex:"#9AA0A6"},{name:"Steel Grey",hex:"#5F676E"},{name:"Charcoal",hex:"#33373B"},{name:"Black",hex:"#101113"},{name:"Pale Pink",hex:"#F6C5D3"},{name:"Rose",hex:"#E8638C"},{name:"Fuchsia",hex:"#D81B7A"},{name:"Red",hex:"#D11F2D"},{name:"Crimson",hex:"#9E1B2F"},{name:"Burgundy",hex:"#6E1F2C"},{name:"Peach",hex:"#F6A98C"},{name:"Orange",hex:"#F26A21"},{name:"Pumpkin",hex:"#D2541E"},{name:"Gold",hex:"#E8A317"},{name:"Yellow",hex:"#F4C500"},{name:"Lemon",hex:"#F2E54B"},{name:"Lime",hex:"#9BCB3C"},{name:"Kelly Green",hex:"#2E9E45"},{name:"Green",hex:"#1F7A3D"},{name:"Forest",hex:"#14532D"},{name:"Teal",hex:"#0E8C8C"},{name:"Mint",hex:"#9FE0C4"},{name:"Sky Blue",hex:"#5BB6E8"},{name:"Blue",hex:"#1C76C5"},{name:"Royal Blue",hex:"#1E40AF"},{name:"Navy",hex:"#16244C"},{name:"Turquoise",hex:"#22B5C9"},{name:"Lavender",hex:"#B9A6E0"},{name:"Purple",hex:"#7A3CB0"},{name:"Plum",hex:"#5B2A6B"},{name:"Tan",hex:"#C8A06A"},{name:"Brown",hex:"#7A4A26"},{name:"Coffee",hex:"#4A2F1C"},{name:"Gold Metallic",hex:"#C8A53B"},{name:"Silver Metallic",hex:"#B6BCC4"}];function wi(r){if(!r)return null;let a=String(r).trim().replace("#","");if(a.length===3&&(a=a.split("").map(n=>n+n).join("")),a.length!==6)return null;const s=parseInt(a,16);return Number.isNaN(s)?null:{r:s>>16&255,g:s>>8&255,b:s&255}}function xo(r,a){const s=(r.r+a.r)/2,n=r.r-a.r,l=r.g-a.g,h=r.b-a.b;return(2+s/256)*n*n+4*l*l+(2+(255-s)/256)*h*h}function bo(r){const a=wi(r);if(!a)return Be[0];let s=Be[0],n=1/0;for(const l of Be){const h=wi(l.hex),f=xo(a,h);f<n&&(n=f,s=l)}return s}function So(r){return wi(r)?bo(r).hex:r}const pi={widthIn:12,dpi:300,safeAreaPct:5},vo=6e3;function $e(r){const a=r||{};return{widthIn:Number(a.widthIn)>0?Number(a.widthIn):pi.widthIn,dpi:Number(a.dpi)>0?Number(a.dpi):pi.dpi,safeAreaPct:Number.isFinite(Number(a.safeAreaPct))?Math.min(40,Math.max(0,Number(a.safeAreaPct))):pi.safeAreaPct}}function wo(r,a,s){const{widthIn:n,dpi:l}=$e(s);if(!(r>0))return 1;let f=n*l/r;f=Math.max(1,f);const k=Math.max(r,a||r),C=vo/k;return Math.min(f,Math.max(1,C))}function ki(r,a){const{widthIn:s}=$e(a);return r>0?s/r:0}function ra(r,a,s){var k,C,E,N;if(!r||!["image","sticker","embroidery"].includes(r.type))return null;const l=r.originalWidth||r.naturalWidth||((k=r.imageObject)==null?void 0:k.naturalWidth)||((C=r._imageElement)==null?void 0:C.naturalWidth)||((E=r._stickerElement)==null?void 0:E.naturalWidth)||((N=r.imageData)==null?void 0:N.naturalWidth)||0;if(!(l>0))return null;const h=r.width||0;if(!(h>0))return null;const f=h*ki(a,s);return f>0?l/f:null}function sa(r,a){const{dpi:s}=$e(a);return r==null?null:r>=s?{level:"good",color:"#16a34a",label:"Print quality: Excellent"}:r>=s/2?{level:"warn",color:"#d97706",label:"Print quality: Acceptable — may look soft"}:{level:"bad",color:"#dc2626",label:"Print quality: Too low — will look blurry"}}const ko=({selectedElement:r,selectedCount:a=0,onUpdate:s,onMoveLayer:n,onAlignSelection:l,onDistributeSelection:h,onDeleteSelection:f,availableFonts:k,theme:C,isEmbroidery:E=!1,onFontLoaded:N=()=>{},canvasWidth:M,canvasHeight:v,printConfig:B,onRemoveBackground:I})=>{const[H,Q]=y.useState(!1),[z,T]=y.useState(!1),[S,L]=y.useState("");if(a>1)return e.jsxs("div",{className:"properties-panel",children:[e.jsx("h3",{children:"Properties"}),e.jsxs("div",{className:"property-group",children:[e.jsxs("h4",{children:[a," elements selected"]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Align"}),e.jsxs("div",{className:"align-buttons",children:[e.jsx("button",{type:"button",title:"Align left",onClick:()=>l==null?void 0:l("left"),children:"⬅"}),e.jsx("button",{type:"button",title:"Center horizontally",onClick:()=>l==null?void 0:l("hcenter"),children:"⬌"}),e.jsx("button",{type:"button",title:"Align right",onClick:()=>l==null?void 0:l("right"),children:"➡"}),e.jsx("button",{type:"button",title:"Align top",onClick:()=>l==null?void 0:l("top"),children:"⬆"}),e.jsx("button",{type:"button",title:"Center vertically",onClick:()=>l==null?void 0:l("vcenter"),children:"⬍"}),e.jsx("button",{type:"button",title:"Align bottom",onClick:()=>l==null?void 0:l("bottom"),children:"⬇"})]})]}),a>2&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Distribute"}),e.jsxs("div",{className:"align-buttons",children:[e.jsx("button",{type:"button",title:"Distribute horizontally",onClick:()=>h==null?void 0:h("h"),children:"↔"}),e.jsx("button",{type:"button",title:"Distribute vertically",onClick:()=>h==null?void 0:h("v"),children:"↕"})]})]}),e.jsx("div",{className:"property-row",children:e.jsxs("button",{type:"button",className:"multi-delete-btn",onClick:()=>f==null?void 0:f(),children:["Delete ",a," elements"]})})]})]});if(!r)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 j=(w,q)=>{s(r.id,{[w]:q})},it=()=>{var w,q,P;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:r.text||"",onChange:u=>j("text",u.target.value),rows:3,placeholder:"Enter your text here..."})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Font Family"}),e.jsx(yo,{value:r.fontFamily||"Arial",onChange:u=>j("fontFamily",u),onFontLoaded:N})]}),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:r.fontSize||20,onChange:u=>j("fontSize",parseInt(u.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:r.lineHeight||1.2,onChange:u=>j("lineHeight",parseFloat(u.target.value)),min:"0.5",max:"3"})]})]}),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.5",value:r.letterSpacing||0,onChange:u=>j("letterSpacing",parseFloat(u.target.value)||0),min:"-5",max:"50"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Outline Width"}),e.jsx("input",{type:"number",step:"0.5",value:r.strokeWidth||0,onChange:u=>j("strokeWidth",parseFloat(u.target.value)||0),min:"0",max:"20"})]})]}),(r.strokeWidth||0)>0&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Outline Color"}),e.jsx("input",{type:"color",value:r.stroke||"#000000",onChange:u=>j("stroke",u.target.value)})]}),e.jsxs("div",{className:"property-row",children:[e.jsxs("label",{children:["Curve ",r.curve?`(${r.curve}°)`:""]}),e.jsxs("div",{className:"input-group",style:{display:"flex",alignItems:"center",gap:8,width:"100%"},children:[e.jsx("input",{type:"range",min:"-180",max:"180",step:"1",value:r.curve||0,onChange:u=>j("curve",parseInt(u.target.value,10)),style:{flex:1}}),e.jsx("button",{type:"button",onClick:()=>j("curve",0),title:"Reset to straight",style:{padding:"2px 8px"},children:"Reset"})]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Font Weight"}),e.jsxs("div",{className:"button-group",children:[e.jsx("button",{className:r.fontWeight==="lighter"||r.fontWeight==="300"?"active":"",onClick:()=>j("fontWeight","300"),title:"Light",children:"Light"}),e.jsx("button",{className:!r.fontWeight||r.fontWeight==="normal"||r.fontWeight==="400"?"active":"",onClick:()=>j("fontWeight","normal"),title:"Normal",children:"Normal"}),e.jsx("button",{className:r.fontWeight==="bold"||r.fontWeight==="700"?"active":"",onClick:()=>j("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:r.fontStyle==="italic"?"active":"",onClick:()=>j("fontStyle",r.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:e.jsx("em",{children:"I"})}),e.jsx("button",{className:(w=r.textDecoration)!=null&&w.includes("underline")?"active":"",onClick:()=>{const u=r.textDecoration||"",A=u.split(" ").filter(U=>U&&U!=="underline");u.includes("underline")||A.push("underline"),j("textDecoration",A.join(" ").trim())},title:"Underline",children:e.jsx("u",{children:"U"})}),e.jsx("button",{className:(q=r.textDecoration)!=null&&q.includes("overline")?"active":"",onClick:()=>{const u=r.textDecoration||"",A=u.split(" ").filter(U=>U&&U!=="overline");u.includes("overline")||A.push("overline"),j("textDecoration",A.join(" ").trim())},title:"Overline",children:e.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),e.jsx("button",{className:(P=r.textDecoration)!=null&&P.includes("line-through")?"active":"",onClick:()=>{const u=r.textDecoration||"",A=u.split(" ").filter(U=>U&&U!=="line-through");u.includes("line-through")||A.push("line-through"),j("textDecoration",A.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:!r.textTransform||r.textTransform==="none"?"active":"",onClick:()=>j("textTransform","none"),title:"Normal",children:"Aa"}),e.jsx("button",{className:r.textTransform==="uppercase"?"active":"",onClick:()=>j("textTransform","uppercase"),title:"Uppercase",children:"AA"}),e.jsx("button",{className:r.textTransform==="lowercase"?"active":"",onClick:()=>j("textTransform","lowercase"),title:"Lowercase",children:"aa"}),e.jsx("button",{className:r.textTransform==="capitalize"?"active":"",onClick:()=>j("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:!r.textAlign||r.textAlign==="left"?"active":"",onClick:()=>j("textAlign","left"),title:"Left Align",children:"⬅"}),e.jsx("button",{className:r.textAlign==="center"?"active":"",onClick:()=>j("textAlign","center"),title:"Center Align",children:"↔"}),e.jsx("button",{className:r.textAlign==="right"?"active":"",onClick:()=>j("textAlign","right"),title:"Right Align",children:"➡"}),e.jsx("button",{className:r.textAlign==="justify"?"active":"",onClick:()=>j("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:E?"Thread Color":"Text Color"}),e.jsx("input",{type:"color",value:r.fill||"#000000",onChange:u=>j("fill",u.target.value)}),E&&e.jsx("div",{title:"Real thread colours",style:{display:"flex",flexWrap:"wrap",gap:4,marginTop:6,maxWidth:200},children:Be.map(u=>e.jsx("button",{type:"button",title:u.name,onClick:()=>j("fill",u.hex),style:{width:16,height:16,padding:0,borderRadius:"50%",background:u.hex,border:(r.fill||"").toLowerCase()===u.hex.toLowerCase()?"2px solid #2563eb":"1px solid #cbd5e1",cursor:"pointer"}},u.hex))})]}),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:r.backgroundColor||"#ffffff",onChange:u=>j("backgroundColor",u.target.value),disabled:!r.hasBackground}),e.jsx("button",{className:`toggle-btn ${r.hasBackground?"active":""}`,onClick:()=>j("hasBackground",!r.hasBackground),title:r.hasBackground?"Remove background":"Add background",children:r.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:r.letterSpacing||0,onChange:u=>j("letterSpacing",parseFloat(u.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:r.wordSpacing||0,onChange:u=>j("wordSpacing",parseFloat(u.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 ${r.hasTextShadow?"active":""}`,onClick:()=>j("hasTextShadow",!r.hasTextShadow),children:r.hasTextShadow?"Remove Shadow":"Add Shadow"})}),r.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:r.textShadowX||2,onChange:u=>j("textShadowX",parseInt(u.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:r.textShadowY||2,onChange:u=>j("textShadowY",parseInt(u.target.value)),min:"-20",max:"20"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Blur"}),e.jsx("input",{type:"number",value:r.textShadowBlur||4,onChange:u=>j("textShadowBlur",parseInt(u.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:r.textShadowColor||"#000000",onChange:u=>j("textShadowColor",u.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:r.stroke||"#000000",onChange:u=>j("stroke",u.target.value)})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Stroke Width"}),e.jsx("input",{type:"number",value:r.strokeWidth||0,onChange:u=>j("strokeWidth",parseInt(u.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:r.opacity||1,onChange:u=>j("opacity",parseFloat(u.target.value))}),e.jsxs("span",{children:[Math.round((r.opacity||1)*100),"%"]})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Font Variant"}),e.jsxs("select",{value:r.fontVariant||"normal",onChange:u=>j("fontVariant",u.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:r.writingMode||"horizontal-tb",onChange:u=>j("writingMode",u.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:!r.direction||r.direction==="ltr"?"active":"",onClick:()=>j("direction","ltr"),title:"Left to Right",children:"LTR"}),e.jsx("button",{className:r.direction==="rtl"?"active":"",onClick:()=>j("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:r.backgroundPadding||5,onChange:u=>j("backgroundPadding",parseInt(u.target.value)),min:"0",max:"50",disabled:!r.hasBackground})]})]})]})},J=()=>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:r.fill||"#000000",onChange:w=>j("fill",w.target.value)})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Stroke Color"}),e.jsx("input",{type:"color",value:r.stroke||"#000000",onChange:w=>j("stroke",w.target.value)})]}),e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Stroke Width"}),e.jsx("input",{type:"number",value:r.strokeWidth||2,onChange:w=>j("strokeWidth",parseInt(w.target.value)),min:"0",max:"20"})]}),r.type==="star"&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Star Points"}),e.jsx("input",{type:"number",value:r.numPoints||5,onChange:w=>j("numPoints",parseInt(w.target.value)),min:"3",max:"20"})]}),r.type==="roundedRectangle"&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Corner Radius"}),e.jsx("input",{type:"number",value:r.cornerRadius||10,onChange:w=>j("cornerRadius",parseInt(w.target.value)),min:"0",max:"50"})]})]}),yt=async()=>{if(!(!I||z)){T(!0),L("");try{await I(r)}catch{L("Could not remove the background. Please try again.")}finally{T(!1)}}},gt=["image","sticker","embroidery"],jt=()=>!I||!gt.includes(r.type)?null:e.jsxs("div",{className:"property-group",children:[e.jsx("button",{type:"button",className:"remove-bg-btn",onClick:yt,disabled:z,style:{width:"100%",padding:"9px 12px",borderRadius:8,border:"1px solid #cbd5e1",background:z?"#f1f5f9":"#fff",color:"#334155",fontSize:13,fontWeight:600,cursor:z?"wait":"pointer",display:"flex",alignItems:"center",justifyContent:"center",gap:8},children:z?"Removing background…":"✂️ Remove background"}),S&&e.jsx("div",{style:{marginTop:6,fontSize:12,color:"#dc2626"},children:S})]}),_=()=>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:r.opacity||1,onChange:w=>j("opacity",parseFloat(w.target.value))}),e.jsxs("span",{children:[Math.round((r.opacity||1)*100),"%"]})]}),H&&e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Border Radius"}),e.jsx("input",{type:"number",value:r.borderRadius||0,onChange:w=>j("borderRadius",parseInt(w.target.value)),min:"0",max:"50"})]})]}),O=()=>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(r.x)||0,onChange:w=>j("x",parseInt(w.target.value))})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Y"}),e.jsx("input",{type:"number",value:Math.round(r.y)||0,onChange:w=>j("y",parseInt(w.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(r.width)||0,onChange:w=>j("width",parseInt(w.target.value)),min:"1"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Height"}),e.jsx("input",{type:"number",value:Math.round(r.height)||0,onChange:w=>j("height",parseInt(w.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:r.rotation||0,onChange:w=>j("rotation",parseInt(w.target.value))}),e.jsxs("span",{children:[r.rotation||0,"°"]})]}),M?e.jsxs("div",{className:"property-row",children:[e.jsx("label",{children:"Align"}),e.jsxs("div",{className:"align-buttons",children:[e.jsx("button",{type:"button",title:"Align left",onClick:()=>j("x",0),children:"⬅"}),e.jsx("button",{type:"button",title:"Center horizontally",onClick:()=>j("x",Math.round((M-(r.width||0))/2)),children:"⬌"}),e.jsx("button",{type:"button",title:"Align right",onClick:()=>j("x",Math.round(M-(r.width||0))),children:"➡"}),v?e.jsxs(e.Fragment,{children:[e.jsx("button",{type:"button",title:"Align top",onClick:()=>j("y",0),children:"⬆"}),e.jsx("button",{type:"button",title:"Center vertically",onClick:()=>j("y",Math.round((v-(r.height||0))/2)),children:"⬍"}),e.jsx("button",{type:"button",title:"Align bottom",onClick:()=>j("y",Math.round(v-(r.height||0))),children:"⬇"})]}):null]})]}):null,e.jsxs("div",{className:"property-row lock-toggles",children:[r.type!=="text"&&e.jsxs("label",{className:"lock-toggle",children:[e.jsx("input",{type:"checkbox",checked:!!r.lockAspect,onChange:w=>j("lockAspect",w.target.checked)}),"Lock aspect ratio"]}),e.jsxs("label",{className:"lock-toggle",children:[e.jsx("input",{type:"checkbox",checked:!!r.locked,onChange:w=>j("locked",w.target.checked)}),"Lock position"]})]})]}),R=()=>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:r.strokeWidth||r.height||2,onChange:w=>{const q=parseInt(w.target.value);j("strokeWidth",q),j("height",q)},min:"1",max:"50"})]}),e.jsxs("div",{className:"input-group",children:[e.jsx("label",{children:"Length"}),e.jsx("input",{type:"number",value:r.width||200,onChange:w=>j("width",parseInt(w.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:r.stroke||r.fill||"#000000",onChange:w=>{j("stroke",w.target.value),j("fill",w.target.value)}}),e.jsx("input",{type:"text",value:r.stroke||r.fill||"#000000",onChange:w=>{j("stroke",w.target.value),j("fill",w.target.value)},placeholder:"#000000"})]})]})]}),nt=()=>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:()=>n(r.id,"top"),children:"Bring to Front"}),e.jsx("button",{onClick:()=>n(r.id,"up"),children:"Bring Forward"}),e.jsx("button",{onClick:()=>n(r.id,"down"),children:"Send Backward"}),e.jsx("button",{onClick:()=>n(r.id,"bottom"),children:"Send to Back"})]})]}),rt=["rectangle","circle","triangle","star","arrow","diamond","hexagon","pentagon","heart","oval","roundedRectangle"],mt=()=>{const w=ra(r,M,B);if(w==null)return null;const q=sa(w,B);return q?e.jsxs("div",{className:"property-group dpi-meter",style:{borderLeft:`4px solid ${q.color}`,paddingLeft:10},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx("span",{style:{width:9,height:9,borderRadius:"50%",background:q.color,flex:"0 0 auto"}}),e.jsxs("strong",{style:{color:q.color,fontSize:13},children:[Math.round(w)," DPI"]})]}),e.jsx("div",{style:{fontSize:12,color:"#475569",marginTop:2},children:q.label}),q.level!=="good"&&e.jsx("div",{style:{fontSize:11,color:"#64748b",marginTop:4},children:"Make it smaller on the canvas or upload a higher-resolution image."})]}):null};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:r.type})]}),e.jsxs("div",{className:"panel-content",children:[mt(),jt(),r.type==="text"&&it(),rt.includes(r.type)&&J(),r.type==="image"&&_(),r.type==="horizontalLine"&&R(),O(),nt(),e.jsx("div",{className:"property-group",children:e.jsxs("button",{className:"toggle-advanced",onClick:()=>Q(!H),children:[H?"Hide":"Show"," Advanced Options"]})})]})]})},Co=({elements:r,selectedElement:a,onSelectElement:s,onMoveLayer:n,onDeleteElement:l,theme:h})=>{const f=(C,E)=>{switch(C){case"text":return"T";case"rectangle":return"▭";case"circle":return"●";case"triangle":return"▲";case"star":return"★";case"arrow":return"➤";case"diamond":return"◆";case"hexagon":return"⬡";case"pentagon":return"⬟";case"heart":return"♥";case"oval":return"⬭";case"roundedRectangle":return"▢";case"horizontalLine":return"―";case"image":return"🖼";case"qrcode":return"⬚";case"barcode":return"|||";case"sticker":return"🎭";case"embroidery":return"🧵";default:return"?"}},k=C=>{var E,N;if(C.type==="text")return C.isIcon&&C.iconData?`Icon: ${C.iconData.name}`:((E=C.text)==null?void 0:E.substring(0,20))+(((N=C.text)==null?void 0:N.length)>20?"...":"")||"Text";if(C.type==="qrcode")return`QR Code: ${(C.data||"").substring(0,15)+((C.data||"").length>15?"...":"")}`;if(C.type==="barcode"){const M=C.format||"CODE128",v=C.data||"";return`Barcode (${M}): ${v.substring(0,10)+(v.length>10?"...":"")}`}return C.type==="sticker"?`Sticker: ${(C.name||"Untitled").substring(0,15)}`:C.type==="embroidery"?`Embroidery: ${(C.name||"Design").substring(0,15)}`:C.type.charAt(0).toUpperCase()+C.type.slice(1)};return e.jsxs("div",{className:"layers-panel",children:[e.jsxs("div",{className:"panel-header",children:[e.jsx("h3",{children:"Layers"}),e.jsx("span",{className:"layer-count",children:r.length})]}),e.jsx("div",{className:"layers-list",children:r.length===0?e.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...r].reverse().map((C,E)=>e.jsxs("div",{className:`layer-item ${(a==null?void 0:a.id)===C.id?"selected":""}`,onClick:()=>s(C),children:[e.jsxs("div",{className:"layer-info",children:[e.jsx("span",{className:"layer-icon",children:f(C.type)}),e.jsx("span",{className:"layer-name",children:k(C)})]}),e.jsxs("div",{className:"layer-controls",children:[e.jsx("button",{className:"layer-btn",onClick:N=>{N.stopPropagation(),n(C.id,"up")},disabled:E===0,title:"Move Up",children:"↑"}),e.jsx("button",{className:"layer-btn",onClick:N=>{N.stopPropagation(),n(C.id,"down")},disabled:E===r.length-1,title:"Move Down",children:"↓"}),e.jsx("button",{className:"layer-btn delete",onClick:N=>{N.stopPropagation(),l(C.id)},title:"Delete",children:"×"})]})]},C.id))})]})};let yi=null;function jo(){if(yi)return yi;if(typeof document>"u")return null;const r=document.createElement("canvas");r.width=6,r.height=6;const a=r.getContext("2d");return a.strokeStyle="rgba(255,255,255,0.34)",a.lineWidth=1.7,a.lineCap="round",a.beginPath(),a.moveTo(-2,8),a.lineTo(8,-2),a.stroke(),a.strokeStyle="rgba(0,0,0,0.16)",a.lineWidth=1.1,a.beginPath(),a.moveTo(1.5,8),a.lineTo(8,1.5),a.stroke(),yi=r,r}function xi(r){return r?(r.productionMethods||[]).map(s=>String(s).toUpperCase()).includes("EMBROIDERY")||r.supportsEmbroidery==="Y":!1}function Oe(r,a,s,{fontSize:n=20,color:l="#1f6feb"}={}){const h=So(l||"#1f6feb"),f=r.globalAlpha===void 0?1:r.globalAlpha,k=(()=>{const C=jo();try{return C?r.createPattern(C,"repeat"):null}catch{return null}})();r.save(),r.shadowColor="rgba(0,0,0,0.40)",r.shadowBlur=Math.max(1,n*.05),r.shadowOffsetX=.4,r.shadowOffsetY=Math.max(.8,n*.06),r.fillStyle=h,r.fillText(a,0,s),r.restore(),r.save(),r.fillStyle=h,r.fillText(a,0,s),k&&(r.globalAlpha=f*.85,r.fillStyle=k,r.fillText(a,0,s),r.globalAlpha=f),r.lineJoin="round",r.lineWidth=Math.max(1,n*.05),r.strokeStyle="rgba(28,16,8,0.55)",r.setLineDash&&r.setLineDash([Math.max(2,n*.13),Math.max(1.5,n*.1)]),r.strokeText(a,0,s),r.setLineDash&&r.setLineDash([]),r.restore()}class Fo{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}_prepareCanvas(a,s,n=1){const l=n>0?n:1;this.canvas.width=Math.round(a*l),this.canvas.height=Math.round(s*l),this.ctx.setTransform(1,0,0,1,0,0),this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height),this.ctx.setTransform(l,0,0,l,0,0),this.ctx.imageSmoothingEnabled=!0,this.ctx.imageSmoothingQuality="high"}async exportAllSections(a,s,n,l,h="png",f=!0,k=null,C=1){const E={};try{const N=[];for(const M of s){const v=a[M.id||M.sectionName];((v==null?void 0:v.elements)||[]).forEach(B=>{B&&B.type==="text"&&B.fontFamily&&N.push(B.fontFamily)})}await ji(N),typeof document<"u"&&document.fonts&&document.fonts.ready&&await document.fonts.ready}catch{}for(const N of s){const M=N.id||N.sectionName,v=a[M];if(!v||!v.elements||v.elements.length===0){console.log(`Skipping section ${M} - no elements`);continue}if(this._prepareCanvas(n,l,C),f){const I=N.image||N.sectionImage;if(I)try{const H=await this.loadImage(I);this.ctx.drawImage(H,0,0,n,l)}catch(H){console.warn("Failed to load background image:",H)}}for(const I of v.elements)await this.drawElement(I);const B=this.canvas.toDataURL(`image/${h}`,h==="jpeg"?.9:void 0);E[M]={dataUrl:B,blob:await this.dataUrlToBlob(B)}}return E}async downloadExports(a,s="design"){const n=Object.keys(a);if(n.length===0){alert("No designs to export");return}if(n.length===1){const l=n[0],{blob:h}=a[l],f=URL.createObjectURL(h),k=document.createElement("a");k.href=f,k.download=`${s}-${l}.png`,document.body.appendChild(k),k.click(),document.body.removeChild(k),URL.revokeObjectURL(f)}else for(const l of n){const{blob:h}=a[l],f=URL.createObjectURL(h),k=document.createElement("a");k.href=f,k.download=`${s}-${l}.png`,document.body.appendChild(k),k.click(),document.body.removeChild(k),URL.revokeObjectURL(f),await new Promise(C=>setTimeout(C,100))}}async loadImage(a){return new Promise((s,n)=>{const l=new Image;l.crossOrigin="anonymous",l.onload=()=>s(l),l.onerror=n,l.src=a})}getLuma(a,s,n){return(.2126*a+.7152*s+.0722*n)/255}async processImageColor(a,s){const n=document.createElement("canvas"),l=n.getContext("2d");n.width=a.width,n.height=a.height,l.clearRect(0,0,n.width,n.height),l.drawImage(a,0,0);const h=l.getImageData(0,0,n.width,n.height),f=h.data,k=this.hexToRgb(s);if(!k){console.warn("Invalid target color:",s);return}const{r:C,g:E,b:N}=k;for(let M=0;M<f.length;M+=4){if(f[M+3]===0)continue;const B=this.getLuma(f[M],f[M+1],f[M+2]);f[M]=Math.round(C*B),f[M+1]=Math.round(E*B),f[M+2]=Math.round(N*B)}return l.putImageData(h,0,0),this.processedImage=new Image,new Promise(M=>{this.processedImage.onload=()=>{M()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),M()},this.processedImage.src=n.toDataURL("image/png")})}async drawElement(a){this.ctx.save();const s=a.x+a.width/2,n=a.y+a.height/2;switch(this.ctx.translate(s,n),a.rotation&&this.ctx.rotate(a.rotation*Math.PI/180),this.ctx.translate(-a.width/2,-a.height/2),a.type){case"text":this.drawText(a);break;case"rectangle":this.drawRectangle(a);break;case"circle":this.drawCircle(a);break;case"triangle":this.drawTriangle(a);break;case"star":this.drawStar(a);break;case"arrow":this.drawArrow(a);break;case"diamond":this.drawDiamond(a);break;case"hexagon":this.drawHexagon(a);break;case"pentagon":this.drawPentagon(a);break;case"heart":this.drawHeart(a);break;case"oval":this.drawOval(a);break;case"roundedRectangle":this.drawRoundedRectangle(a);break;case"qrcode":await this.drawQRCode(a);break;case"barcode":await this.drawBarcode(a);break;case"horizontalLine":this.drawHorizontalLine(a);break;case"sticker":await this.drawSticker(a);break;case"embroidery":await this.drawEmbroidery(a);break;case"image":await this.drawImage(a);break}this.ctx.restore()}drawText(a){let s=a.text||"Text";switch(a.textTransform){case"uppercase":s=s.toUpperCase();break;case"lowercase":s=s.toLowerCase();break;case"capitalize":s=s.replace(/\b\w/g,f=>f.toUpperCase());break}this.ctx.font=`${a.fontStyle||"normal"} ${a.fontWeight||"normal"} ${a.fontSize||20}px ${a.fontFamily||"Arial"}`,this.ctx.letterSpacing=`${a.letterSpacing||0}px`,this.ctx.fillStyle=a.fill||"#000000",this.ctx.textAlign=a.textAlign||"left",this.ctx.textBaseline="top",a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth);const n=s.split(`
+`),l=(a.fontSize||20)*(a.lineHeight||1.2),h=this.embroidery&&a.type==="text"&&!a.isIcon;if(a.curve&&Math.abs(a.curve)>=1){const f=Math.max(...n.map(k=>this.ctx.measureText(k).width));this.drawCurvedText(a,n.join(" "),f,h);return}n.forEach((f,k)=>{const C=k*l;h?Oe(this.ctx,f,C,{fontSize:a.fontSize||20,color:a.fill||"#000000"}):(a.stroke&&a.strokeWidth>0&&this.ctx.strokeText(f,0,C),this.ctx.fillText(f,0,C))})}drawCurvedText(a,s,n,l=!1){const h=this.ctx,f=Array.from(s);if(f.length===0)return;const k=a.fontSize||20,C=f.map(j=>h.measureText(j).width),E=C.reduce((j,it)=>j+it,0)||1,N=Math.max(1e-4,Math.abs(a.curve)*Math.PI/180),M=E/N,v=a.curve>=0?1:-1,B=(n||E)/2,I=v*M+k/2,H=a.stroke&&a.strokeWidth>0,Q=typeof a.textDecoration=="string"?a.textDecoration:"",z={underline:Q.includes("underline")||!!a.underline,overline:Q.includes("overline")||!!a.overline,strike:Q.includes("line-through")||!!a.strikethrough},T=z.underline||z.overline||z.strike,S=a.decorationColor||a.fill||"#000000",L=Math.max(1,k/20);h.textAlign="center",h.textBaseline="middle",h.save(),h.translate(B,I),h.rotate(-v*N/2);for(let j=0;j<f.length;j++){const it=C[j]/M;if(h.rotate(v*it/2),h.save(),h.translate(0,-v*M),l?Oe(h,f[j],0,{fontSize:k,color:a.fill||"#000000"}):(H&&h.strokeText(f[j],0,0),h.fillText(f[j],0,0)),T){const J=C[j];h.strokeStyle=S,h.lineWidth=L,h.setLineDash&&h.setLineDash([]),z.underline&&(h.beginPath(),h.moveTo(-J/2,k/2+2),h.lineTo(J/2,k/2+2),h.stroke()),z.overline&&(h.beginPath(),h.moveTo(-J/2,-(k/2+2)),h.lineTo(J/2,-(k/2+2)),h.stroke()),z.strike&&(h.beginPath(),h.moveTo(-J/2,0),h.lineTo(J/2,0),h.stroke())}h.restore(),h.rotate(v*it/2)}h.restore()}drawRectangle(a){a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fillRect(0,0,a.width,a.height)),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.strokeRect(0,0,a.width,a.height))}drawCircle(a){const s=Math.min(a.width,a.height)/2,n=a.width/2,l=a.height/2;this.ctx.beginPath(),this.ctx.arc(n,l,s,0,2*Math.PI),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}drawTriangle(a){const s=a.width/2;this.ctx.beginPath(),this.ctx.moveTo(s,0),this.ctx.lineTo(0,a.height),this.ctx.lineTo(a.width,a.height),this.ctx.closePath(),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}drawStar(a){const s=a.width/2,n=a.height/2,l=Math.min(a.width,a.height)/2,h=l*.4,f=a.numPoints||5;this.ctx.beginPath();for(let k=0;k<f*2;k++){const C=k%2===0?l:h,E=k*Math.PI/f,N=s+Math.cos(E)*C,M=n+Math.sin(E)*C;k===0?this.ctx.moveTo(N,M):this.ctx.lineTo(N,M)}this.ctx.closePath(),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}drawArrow(a){const s=a.width,n=a.height,l=s*.3;this.ctx.beginPath(),this.ctx.moveTo(s/2,0),this.ctx.lineTo(s,n*.6),this.ctx.lineTo(s-l,n*.6),this.ctx.lineTo(s-l,n),this.ctx.lineTo(l,n),this.ctx.lineTo(l,n*.6),this.ctx.lineTo(0,n*.6),this.ctx.closePath(),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}async dataUrlToBlob(a){return new Promise(s=>{const n=document.createElement("canvas"),l=n.getContext("2d"),h=new Image;h.onload=()=>{n.width=h.width,n.height=h.height,l.drawImage(h,0,0),n.toBlob(s)},h.src=a})}hexToRgb(a){const s=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);return s?{r:parseInt(s[1],16),g:parseInt(s[2],16),b:parseInt(s[3],16)}:null}drawDiamond(a){const s=a.width/2,n=a.height/2;this.ctx.beginPath(),this.ctx.moveTo(s,0),this.ctx.lineTo(a.width,n),this.ctx.lineTo(s,a.height),this.ctx.lineTo(0,n),this.ctx.closePath(),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}drawHexagon(a){const s=a.width/2,n=a.height/2,l=Math.min(a.width,a.height)/2,h=6;this.ctx.beginPath();for(let f=0;f<h;f++){const k=f*2*Math.PI/h-Math.PI/2,C=s+l*Math.cos(k),E=n+l*Math.sin(k);f===0?this.ctx.moveTo(C,E):this.ctx.lineTo(C,E)}this.ctx.closePath(),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}drawPentagon(a){const s=a.width/2,n=a.height/2,l=Math.min(a.width,a.height)/2,h=5;this.ctx.beginPath();for(let f=0;f<h;f++){const k=f*2*Math.PI/h-Math.PI/2,C=s+l*Math.cos(k),E=n+l*Math.sin(k);f===0?this.ctx.moveTo(C,E):this.ctx.lineTo(C,E)}this.ctx.closePath(),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}drawHeart(a){const s=a.width,n=a.height,l=0,h=0;this.ctx.beginPath();const f=n*.3;this.ctx.moveTo(l+s/2,h+f),this.ctx.bezierCurveTo(l+s/2,h,l,h,l,h+f),this.ctx.bezierCurveTo(l,h+(n+f)/2,l+s/2,h+(n+f)/2,l+s/2,h+n),this.ctx.bezierCurveTo(l+s/2,h+(n+f)/2,l+s,h+(n+f)/2,l+s,h+f),this.ctx.bezierCurveTo(l+s,h,l+s/2,h,l+s/2,h+f),this.ctx.closePath(),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}drawOval(a){const s=a.width/2,n=a.height/2,l=a.width/2,h=a.height/2;this.ctx.beginPath(),this.ctx.ellipse(s,n,l,h,0,0,2*Math.PI),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}drawRoundedRectangle(a){const s=Math.min(a.width,a.height)*.1;this.drawRoundedRect(0,0,a.width,a.height,s),a.fill&&a.fill!=="transparent"&&(this.ctx.fillStyle=a.fill,this.ctx.fill()),a.stroke&&a.strokeWidth>0&&(this.ctx.strokeStyle=a.stroke,this.ctx.lineWidth=a.strokeWidth,this.ctx.stroke())}drawRoundedRect(a,s,n,l,h){this.ctx.beginPath(),this.ctx.moveTo(a+h,s),this.ctx.lineTo(a+n-h,s),this.ctx.quadraticCurveTo(a+n,s,a+n,s+h),this.ctx.lineTo(a+n,s+l-h),this.ctx.quadraticCurveTo(a+n,s+l,a+n-h,s+l),this.ctx.lineTo(a+h,s+l),this.ctx.quadraticCurveTo(a,s+l,a,s+l-h),this.ctx.lineTo(a,s+h),this.ctx.quadraticCurveTo(a,s,a+h,s),this.ctx.closePath()}async drawQRCode(a){if(a.imageObject)this.ctx.drawImage(a.imageObject,0,0,a.width,a.height);else if(a.src)try{const s=await this.loadImage(a.src);this.ctx.drawImage(s,0,0,a.width,a.height)}catch(s){console.warn("Failed to load QR code image for export:",s),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,a.width,a.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,a.width,a.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("QR Error",a.width/2,a.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,a.width,a.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,a.width,a.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No QR Data",a.width/2,a.height/2)}async drawBarcode(a){if(a.imageObject)this.ctx.drawImage(a.imageObject,0,0,a.width,a.height);else if(a.src)try{const s=await this.loadImage(a.src);this.ctx.drawImage(s,0,0,a.width,a.height)}catch(s){console.warn("Failed to load barcode image for export:",s),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,a.width,a.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,a.width,a.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Barcode Error",a.width/2,a.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,a.width,a.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,a.width,a.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No Barcode Data",a.width/2,a.height/2)}drawHorizontalLine(a){this.ctx.save(),a.opacity!==void 0&&(this.ctx.globalAlpha=a.opacity),this.ctx.strokeStyle=a.stroke||a.fill||"#000000",this.ctx.lineWidth=a.strokeWidth||a.height||2,this.ctx.lineCap="round",this.ctx.beginPath(),this.ctx.moveTo(0,a.height/2),this.ctx.lineTo(a.width,a.height/2),this.ctx.stroke(),this.ctx.restore()}async drawSticker(a){try{let s=null;if(a.imageObject)s=a.imageObject;else if(a.imageData)s=a.imageData;else if(a.src||a.image){const n=a.src||a.image;s=await this.loadImage(n)}else a.data&&a.data.image&&(s=await this.loadImage(a.data.image));s?(a.opacity!==void 0&&(this.ctx.globalAlpha=a.opacity),this.ctx.drawImage(s,0,0,a.width,a.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,a.width,a.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,a.width,a.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Sticker",a.width/2,a.height/2))}catch(s){console.warn("Failed to draw sticker:",s),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,a.width,a.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,a.width,a.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",a.width/2,a.height/2)}}async drawEmbroidery(a){try{let s=null;if(a.imageObject)s=a.imageObject;else if(a.imageData)s=a.imageData;else if(a.src||a.image){const n=a.src||a.image;s=await this.loadImage(n)}else a.data&&a.data.image&&(s=await this.loadImage(a.data.image));s?(a.opacity!==void 0&&(this.ctx.globalAlpha=a.opacity),this.ctx.drawImage(s,0,0,a.width,a.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,a.width,a.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,a.width,a.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Embroidery",a.width/2,a.height/2))}catch(s){console.warn("Failed to draw embroidery:",s),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,a.width,a.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,a.width,a.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",a.width/2,a.height/2)}}async drawImage(a){try{let s=null;if(a.imageObject&&a.imageObject instanceof HTMLImageElement)s=a.imageObject;else if(a.imageData){if(a.imageData instanceof HTMLImageElement)s=a.imageData;else if(typeof a.imageData=="string")try{s=await this.loadImage(a.imageData)}catch(n){console.warn("Failed to load image from imageData URL:",a.imageData,n),s=await this.loadImageWithFallback(a.imageData)}}else if(a.src)try{s=await this.loadImage(a.src)}catch(n){console.warn("Failed to load image from src:",a.src,n),s=await this.loadImageWithFallback(a.src)}else if(a.image)try{s=await this.loadImage(a.image)}catch(n){console.warn("Failed to load image from image property:",a.image,n),s=await this.loadImageWithFallback(a.image)}s?(a.opacity!==void 0&&(this.ctx.globalAlpha=a.opacity),this.ctx.drawImage(s,0,0,a.width,a.height)):this.drawImagePlaceholder(a)}catch(s){console.error("Failed to draw image element:",s),this.drawImagePlaceholder(a)}}async loadImageWithFallback(a){return new Promise(s=>{const n=new Image;n.onload=()=>s(n),n.onerror=()=>{const l=new Image;l.crossOrigin="anonymous",l.onload=()=>s(l),l.onerror=()=>{console.warn("All image loading attempts failed for:",a),s(null)},l.src=a},n.src=a})}drawImagePlaceholder(a){this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,a.width,a.height),this.ctx.strokeStyle="#ccc",this.ctx.lineWidth=2,this.ctx.strokeRect(0,0,a.width,a.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Image",a.width/2,a.height/2-8),this.ctx.fillText("Not Found",a.width/2,a.height/2+8)}async blobToFile(a,s,n="image/png"){return new File([a],s,{type:n,lastModified:Date.now()})}async exportAllSectionsAsJSON(a,s,n,l,h="png",f=null,k=1){var I,H;const C=[],E=[],N=Math.min(k,2),M={};for(const Q of s){const z=Q.sectionName,T=a[z];if(!T||!T.elements||T.elements.length===0){console.log(`Skipping section ${z} - no elements`);continue}const S=Q.image||Q.sectionImage,L={...T,backgroundImage:S,sectionImage:S,sectionName:z,selectedColor:T.selectedColor||"#FFFFFF",canvasWidth:n,canvasHeight:l};M[z]=L;const j=await this.exportSectionAsBlob(T,Q,n,l,h,!0,f,N);if(j){const J=await this.blobToFile(j,`${z}-full.${h}`,`image/${h}`);C.push({sectionName:z,sectionImage:J})}const it=await this.exportSectionAsBlob(T,Q,n,l,h,!1,f,k);if(it){const J=await this.blobToFile(it,`${z}-print.${h}`,`image/${h}`);E.push({sectionName:z,sectionImage:J})}}const v=((I=s[0])==null?void 0:I.image)||((H=s[0])==null?void 0:H.sectionImage),B={sections:M,canvasWidth:n,canvasHeight:l,sectionImage:v,format:h,timestamp:new Date().toISOString(),version:"1.0",...f&&{initData:{sectionImage:f.sectionImage,sections:f.sections?Object.keys(f.sections):[]}},product:{sections:s.map(Q=>({sectionName:Q.sectionName||Q.id,sectionImage:Q.image||Q.sectionImage,id:Q.id||Q.sectionName}))}};return{fullDesign:C,printReady:E,designFile:JSON.stringify(B)}}async exportSectionAsBlob(a,s,n,l,h="png",f=!0,k=null,C=1){try{if(this._prepareCanvas(n,l,C),f){const E=s.image||s.sectionImage;if(E)try{const N=await this.loadImage(E);this.ctx.drawImage(N,0,0,n,l)}catch(N){console.warn("Failed to load background image:",N)}}for(const E of a.elements)await this.drawElement(E);return new Promise(E=>{this.canvas.toBlob(E,`image/${h}`,h==="jpeg"?.9:void 0)})}catch(E){return console.error("Error exporting section as blob:",E),null}}async exportCurrentSectionAsJSON(a,s="png",n=null,l=1){var H,Q,z;const h=Math.min(l,2),f=((H=a.activeSection)==null?void 0:H.sectionName)||"main",k=((Q=a.activeSection)==null?void 0:Q.sectionImage)||((z=a.activeSection)==null?void 0:z.image),C={elements:a.elements,selectedColor:a.selectedColor,canvasWidth:a.canvasWidth,canvasHeight:a.canvasHeight,backgroundImage:k,sectionImage:k,sectionName:f,zoomLevel:a.zoomLevel,showGrid:a.showGrid,snapToGrid:a.snapToGrid},E={id:f,sectionName:f,image:k,sectionImage:k},N=[],M=[],v=await this.exportSectionAsBlob(C,E,a.canvasWidth,a.canvasHeight,s,!0,n,h);if(v){const T=await this.blobToFile(v,`${f}-full.${s}`,`image/${s}`);N.push({sectionName:f,sectionImage:T})}const B=await this.exportSectionAsBlob(C,E,a.canvasWidth,a.canvasHeight,s,!1,n,l);if(B){const T=await this.blobToFile(B,`${f}-print.${s}`,`image/${s}`);M.push({sectionName:f,sectionImage:T})}const I={sections:{[f]:C},canvasWidth:a.canvasWidth,canvasHeight:a.canvasHeight,sectionImage:k,format:s,timestamp:new Date().toISOString(),version:"1.0",...n&&{initData:{sectionImage:n.sectionImage,sections:n.sections?Object.keys(n.sections):[]}},productInfo:{sections:[{sectionName:f,sectionImage:k,id:f}]}};return{fullDesign:N,printReady:M,designFile:JSON.stringify(I)}}}const No=["rectangle","circle","triangle","star","heart","diamond","hexagon","pentagon","oval","roundedRectangle"];function zo(r){const a=Array.isArray(r)?r:[],s=[];a.some(l=>l&&l.type==="text"&&!l.isIcon&&(l.fontSize||20)<14)&&s.push("Small text may not stitch cleanly — keep letters bold and reasonably large."),a.some(l=>l&&(l.type==="image"||l.type==="sticker"))&&s.push("Photos & gradients can’t be embroidered — they’ll be simplified to solid thread colours.");const n=new Set;return a.forEach(l=>{l&&(l.type==="text"||No.includes(l.type))&&l.fill&&n.add(String(l.fill).toLowerCase())}),n.size>8&&s.push(`Your design uses ${n.size} colours — more thread colours can increase the price.`),s}class To{constructor(a="localStorage"){this.storage=a==="sessionStorage"?sessionStorage:localStorage,this.STORAGE_PREFIX="mypixia_canvas_",this.DESIGNS_LIST_KEY="mypixia_saved_designs"}saveDesign(a,s){var n;try{const l=this.generateDesignId(a),h=new Date().toISOString(),f={id:l,name:a,timestamp:h,version:"1.0",canvasData:{elements:s.elements||[],canvasWidth:s.canvasWidth||800,canvasHeight:s.canvasHeight||600,selectedColor:s.selectedColor||"#FF0000",activeSection:s.activeSection||null,product:s.product||null,sectionDesigns:s.sectionDesigns||{},zoomLevel:s.zoomLevel||1,showGrid:s.showGrid||!1,snapToGrid:s.snapToGrid||!0},metadata:{elementCount:((n=s.elements)==null?void 0:n.length)||0,lastModified:h,thumbnail:s.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+l,JSON.stringify(f)),this.updateDesignsList(l,a,h),{success:!0,designId:l,message:"Design saved successfully"}}catch(l){return console.error("Error saving design:",l),{success:!1,error:l.message}}}loadDesign(a){try{let s=a;if(!a.startsWith("design_")){const f=this.getAllDesigns().find(k=>k.name===a);if(!f)return{success:!1,error:"Design not found"};s=f.id}const n=this.storage.getItem(this.STORAGE_PREFIX+s);return n?{success:!0,data:JSON.parse(n)}:{success:!1,error:"Design not found"}}catch(s){return console.error("Error loading design:",s),{success:!1,error:s.message}}}getAllDesigns(){try{const a=this.storage.getItem(this.DESIGNS_LIST_KEY);return a?JSON.parse(a):[]}catch(a){return console.error("Error getting designs list:",a),[]}}deleteDesign(a){try{this.storage.removeItem(this.STORAGE_PREFIX+a);const n=this.getAllDesigns().filter(l=>l.id!==a);return this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(n)),{success:!0,message:"Design deleted successfully"}}catch(s){return console.error("Error deleting design:",s),{success:!1,error:s.message}}}exportDesignAsFile(a){try{const s=this.loadDesign(a);if(!s.success)return s;const n=s.data,l=JSON.stringify(n,null,2),h=new Blob([l],{type:"application/json"}),f=URL.createObjectURL(h),k=document.createElement("a");return k.href=f,k.download=`${n.name}_${n.id}.json`,document.body.appendChild(k),k.click(),document.body.removeChild(k),URL.revokeObjectURL(f),{success:!0,message:"Design exported successfully"}}catch(s){return console.error("Error exporting design:",s),{success:!1,error:s.message}}}importDesignFromFile(a){return new Promise(s=>{try{const n=new FileReader;n.onload=l=>{try{const h=JSON.parse(l.target.result);if(!this.validateDesignData(h)){s({success:!1,error:"Invalid design file format"});return}const f=this.generateDesignId(h.name+"_imported");h.id=f,h.name+="_imported",h.timestamp=new Date().toISOString(),h.metadata.lastModified=h.timestamp,this.storage.setItem(this.STORAGE_PREFIX+f,JSON.stringify(h)),this.updateDesignsList(f,h.name,h.timestamp),s({success:!0,data:h,message:"Design imported successfully"})}catch{s({success:!1,error:"Failed to parse design file"})}},n.readAsText(a)}catch(n){s({success:!1,error:n.message})}})}autoSave(a,s){const n=this.STORAGE_PREFIX+"autosave_"+a;try{const l={timestamp:new Date().toISOString(),canvasData:s};return this.storage.setItem(n,JSON.stringify(l)),!0}catch(l){return console.error("Auto-save failed:",l),!1}}loadAutoSave(a){const s=this.STORAGE_PREFIX+"autosave_"+a;try{const n=this.storage.getItem(s);return n?JSON.parse(n):null}catch(n){return console.error("Failed to load auto-save:",n),null}}clearAutoSave(a){const s=this.STORAGE_PREFIX+"autosave_"+a;this.storage.removeItem(s)}getStorageInfo(){const a=this.getAllDesigns();let s=0;return a.forEach(n=>{const l=this.storage.getItem(this.STORAGE_PREFIX+n.id);l&&(s+=new Blob([l]).size)}),{designCount:a.length,totalSize:s,totalSizeFormatted:this.formatBytes(s),storageLimit:this.getStorageLimit()}}clearAllDesigns(){try{return this.getAllDesigns().forEach(s=>{this.storage.removeItem(this.STORAGE_PREFIX+s.id)}),this.storage.removeItem(this.DESIGNS_LIST_KEY),{success:!0,message:"All designs cleared"}}catch(a){return{success:!1,error:a.message}}}generateDesignId(a){const s=Date.now(),n=Math.random().toString(36).substring(2,8);return`design_${s}_${n}`}updateDesignsList(a,s,n){const l=this.getAllDesigns(),h=l.findIndex(k=>k.id===a),f={id:a,name:s,timestamp:n,lastModified:n};h>=0?l[h]=f:l.push(f),l.sort((k,C)=>new Date(C.timestamp)-new Date(k.timestamp)),this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(l))}validateDesignData(a){return a&&a.id&&a.name&&a.canvasData&&Array.isArray(a.canvasData.elements)}formatBytes(a){if(a===0)return"0 Bytes";const s=1024,n=["Bytes","KB","MB","GB"],l=Math.floor(Math.log(a)/Math.log(s));return parseFloat((a/Math.pow(s,l)).toFixed(2))+" "+n[l]}getStorageLimit(){try{if("storage"in navigator&&"estimate"in navigator.storage)return navigator.storage.estimate().then(a=>a.quota)}catch{console.warn("Unable to estimate storage quota")}return"Unknown"}}const Mo=(r,a)=>{let s;return function(...l){const h=()=>{clearTimeout(s),r(...l)};clearTimeout(s),s=setTimeout(h,a)}},We=[{key:"make-it-yours",title:"Make it yours",body:"Add your text, upload a logo, or drag artwork straight onto the product to bring your design to life."},{key:"start-creating",title:"Start creating",body:"Drop in your logo, type a slogan, or add artwork — your custom product takes shape as you go."},{key:"design-in-seconds",title:"Design yours in seconds",body:"Add text or upload an image to get started — no design skills needed."}],na=y.forwardRef((r,a)=>{var _i;const{theme:s={primaryColor:"#000000",secondaryColor:"#cf7e52",tertiaryColor:"#FFFFFF"},readOnly:n=!1,mode:l="design",initialColor:h,product:f={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:k,initDesignContent:C,printConfig:E,aiEnabled:N=!0,aiEndpoint:M,onAIImageGenerate:v,isAuthenticated:B=!0,onRequireAuth:I,onRemoveBackground:H,emptyStateVariant:Q=0}=r,[z,T]=y.useState([]),[S,L]=y.useState(null),[j,it]=y.useState([]),[J,yt]=y.useState(!1),[gt,jt]=y.useState(!1),[_,O]=y.useState(!1),[R,nt]=y.useState({x:0,y:0}),[rt,mt]=y.useState(null),[w,q]=y.useState(600),[P,u]=y.useState(600),[A,U]=y.useState(1),[at,xt]=y.useState(h||((_i=f.colorSettings)==null?void 0:_i[0])),[dt,It]=y.useState(!1),[kt,pt]=y.useState(l!=="customize"),[Ct,Ht]=y.useState(!0),[Kt,te]=y.useState(!1),[ee,ne]=y.useState(l!=="customize"),bt=$e(E),ie=wo(w,P,bt);y.useEffect(()=>{if(!S){it(i=>i.length?[]:i);return}it(i=>i.length>1&&i.includes(S.id)?i:[S.id])},[S]);const[X,ve]=y.useState(f.sections[0]),[Yt,Ve]=y.useState(!1),[Ge,le]=y.useState(!1),[$t,ae]=y.useState({}),[Lt,we]=y.useState([]),[zt,oe]=y.useState(-1),[_e]=y.useState(new To("localStorage")),Dt=y.useRef(null),Tt=y.useRef(null),ot=y.useRef(null),V=y.useRef(null),Vt=y.useRef({v:[],h:[]}),Ue=y.useRef([]),Ye=y.useRef([]),qe=y.useRef(null),ce=y.useRef(null),de=y.useRef(null),Fi=y.useRef(null),he=y.useRef(null),Gt=y.useRef(null),la=y.useRef(null),fe=y.useRef(new Fo),ca=y.useRef(!1),[ue,Ni]=y.useState(null),ut=y.useCallback(()=>{const i={elements:JSON.parse(JSON.stringify(z)),selectedElement:S?{...S}:null,timestamp:Date.now()},t=Lt.slice(0,zt+1);t.push(i),t.length>50?t.shift():oe(zt+1),we(t)},[z,S,Lt,zt]),ge=y.useCallback(()=>({elements:z,canvasWidth:w,canvasHeight:P,selectedColor:at,activeSection:X,product:f,sectionDesigns:$t,zoomLevel:A,showGrid:dt,snapToGrid:Ct,selectedElement:S?{...S}:null,canvasRef:Dt}),[z,w,P,at,X,f,$t,A,dt,Ct,S]),zi=i=>{if(i.sections&&typeof i.sections=="object"){const t=Object.keys(i.sections)[0],o=i.sections[t];if(o&&o.elements){T(o.elements||[]),q(o.canvasWidth||800),u(o.canvasHeight||600),xt(o.selectedColor||f.colorSettings[0]),U(o.zoomLevel||1),It(o.showGrid||!1),Ht(o.snapToGrid||!0),L(null),i.sections&&ae(i.sections);const c=f.sections.find(m=>m.sectionName===t);c&&ve(c),we([]),oe(-1),setTimeout(()=>{ut()},100);return}}};y.useEffect(()=>{const t=setTimeout(async()=>{if(z.length===0&&Lt.length<=1){if(C)try{const o=JSON.parse(C);Ni(o),zi(o)}catch(o){console.error("Error loading design file:",o),console.warn("Using default text instead")}else if(k)try{const o=await fetch(k);if(o.ok){const c=await o.text();if(c.trim()){const m=JSON.parse(c.trim());Ni(m),zi(m)}}else console.warn("Failed to load design file, using default text")}catch(o){console.error("Error loading design file:",o),console.warn("Using default text instead")}}},300);return()=>clearTimeout(t)},[k,C,f.colorSettings,f.sections]);const Xe=y.useCallback((i="png",t=!0)=>{const o=ge();return f.sections,fe.current.exportAllSections({[(X==null?void 0:X.sectionName)||"main"]:o},[{id:(X==null?void 0:X.sectionName)||"main",sectionName:(X==null?void 0:X.sectionName)||"main",image:X==null?void 0:X.sectionImage,sectionImage:X==null?void 0:X.sectionImage}],w,P,i,t,ue,ie)},[ge,f.sections,X,w,P,ie]),da=ia,ke=20;y.useEffect(()=>{const i=()=>Ve(window.innerWidth<768);return i(),window.addEventListener("resize",i),()=>window.removeEventListener("resize",i)},[]),y.useEffect(()=>{const i=document.createElement("canvas");i.width=w,i.height=P,la.current=i},[w,P]),y.useEffect(()=>{Lt.length===0&&ut()},[]);const qt=(i,t,o,c,m,g)=>{i.beginPath(),i.moveTo(t+g,o),i.lineTo(t+c-g,o),i.quadraticCurveTo(t+c,o,t+c,o+g),i.lineTo(t+c,o+m-g),i.quadraticCurveTo(t+c,o+m,t+c-g,o+m),i.lineTo(t+g,o+m),i.quadraticCurveTo(t,o+m,t,o+m-g),i.lineTo(t,o+g),i.quadraticCurveTo(t,o,t+g,o),i.closePath()},Ce=(i,t)=>{if(t.type==="text"&&!t.isIcon){i.save(),i.font=`${t.fontStyle||"normal"} ${t.fontWeight||"normal"} ${t.fontSize||20}px ${t.fontFamily||"Arial"}`;try{i.letterSpacing=`${t.letterSpacing||0}px`}catch{}let et=t.text||"Text";switch(t.textTransform){case"uppercase":et=et.toUpperCase();break;case"lowercase":et=et.toLowerCase();break;case"capitalize":et=et.replace(/\b\w/g,wt=>wt.toUpperCase());break}const ht=et.split(`
+`),W=Math.max(1,...ht.map(wt=>i.measureText(wt||" ").width)),lt=(t.fontSize||20)*(t.lineHeight||1.2),Mt=Math.max(t.fontSize||20,ht.length*lt);i.restore();const St=t.textAlign||"left",vt=St==="center"?t.x-W/2:St==="right"?t.x-W:t.x,Ft=t.y;return{x:vt,y:Ft,width:W,height:Mt,cx:vt+W/2,cy:Ft+Mt/2}}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 o=i.measureText(t.text),c=o.actualBoundingBoxAscent??t.fontSize*.8,m=o.actualBoundingBoxDescent??t.fontSize*.2,g=o.actualBoundingBoxLeft??0,x=o.actualBoundingBoxRight??o.width,d=g+x,p=c+m,b=t.x,F=t.y,D=b-d/2-g,G=F-p/2-c;return i.restore(),{x:D,y:G,width:d,height:p,cx:b,cy:F}},ha=(i,t)=>{if(!t)return;const o=8,c=8,m=4,g=30,x=Ce(i,t),d=t.isIcon?Math.max(o,12):o,p={x:-x.width/2-d,y:-x.height/2-d,w:x.width+d*2,h:x.height+d*2};i.save(),i.translate(x.cx,x.cy),t.rotation&&i.rotate(t.rotation*Math.PI/180);const b=i.createLinearGradient(p.x,p.y,p.x+p.w,p.y+p.h);if(b.addColorStop(0,"#3b82f6"),b.addColorStop(.5,"#1d4ed8"),b.addColorStop(1,"#3b82f6"),i.strokeStyle="rgba(59,130,246,.3)",i.lineWidth=3,qt(i,p.x-1,p.y-1,p.w+2,p.h+2,m+1),i.stroke(),i.strokeStyle=b,i.lineWidth=2,i.setLineDash([8,4]),qt(i,p.x,p.y,p.w,p.h,m),i.stroke(),i.lineDashOffset=-(Date.now()/50)%12,i.strokeStyle="#ffffff",i.lineWidth=1,i.setLineDash([4,8]),qt(i,p.x,p.y,p.w,p.h,m),i.stroke(),i.setLineDash([]),i.lineDashOffset=0,t.locked){i.restore();return}[{x:p.x,y:p.y},{x:p.x+p.w,y:p.y},{x:p.x+p.w,y:p.y+p.h},{x:p.x,y:p.y+p.h}].forEach(G=>{i.fillStyle="rgba(0,0,0,.2)",i.fillRect(G.x-c/2+1,G.y-c/2+1,c,c),i.fillStyle="#ffffff",i.fillRect(G.x-c/2,G.y-c/2,c,c),i.strokeStyle="#3b82f6",i.lineWidth=1,i.strokeRect(G.x-c/2,G.y-c/2,c,c)});const F=0,D=p.y-g;i.strokeStyle="#3b82f6",i.lineWidth=1,i.setLineDash([2,2]),i.beginPath(),i.moveTo(F,D+12),i.lineTo(F,p.y),i.stroke(),i.setLineDash([]),i.beginPath(),i.arc(F,D,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(F,D,6,-Math.PI/2,Math.PI,!1),i.stroke(),i.beginPath(),i.moveTo(F-6,D),i.lineTo(F-3,D-3),i.lineTo(F-3,D+3),i.closePath(),i.fillStyle="#ffffff",i.fill(),i.restore()},fa=(i,t)=>{if(!t)return[];const o=Ce(i,t),c=t.isIcon?Math.max(8,12):8,m=8,g=30,x=(t.rotation||0)*Math.PI/180,d={x:-o.width/2-c,y:-o.height/2-c,w:o.width+c*2,h:o.height+c*2},p=[{x:d.x,y:d.y,type:"nw-resize"},{x:d.x+d.w,y:d.y,type:"ne-resize"},{x:d.x+d.w,y:d.y+d.h,type:"se-resize"},{x:d.x,y:d.y+d.h,type:"sw-resize"},{x:0,y:d.y-g,type:"rotate"}],b=Math.cos(x),F=Math.sin(x);return p.map(D=>({x:o.cx+(D.x*b-D.y*F),y:o.cy+(D.x*F+D.y*b),type:D.type,size:D.type==="rotate"?24:m}))},Ti=(i,t,o)=>{if(!o)return null;const c=Dt.current;if(!c)return null;const m=c.getContext("2d"),g=fa(m,o);for(const x of g){const d=i-x.x,p=t-x.y;if(Math.sqrt(d*d+p*p)<=x.size/2)return x.type}return null},me=y.useCallback(()=>{if(zt>0){const i=Lt[zt-1];T(i.elements),L(i.selectedElement),oe(zt-1)}},[Lt,zt]),re=y.useCallback(()=>{if(zt<Lt.length-1){const i=Lt[zt+1];T(i.elements),L(i.selectedElement),oe(zt+1)}},[Lt,zt]),_t=i=>Ct?Math.round(i/ke)*ke:i;y.useEffect(()=>{if(X!=null&&X.sectionImage){ot.current=null,V.current=null;const i=Dt.current;if(i&&i.getContext("2d").clearRect(0,0,w,P),k&&!ue)return;const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{ot.current=t,V.current=t,st()},t.onerror=()=>{console.error("Failed to load background image:",X.sectionImage),st()},t.src=X.sectionImage}else ot.current=null,V.current=null,st()},[X,ue]),y.useEffect(()=>{const i=t=>{const o=document.activeElement;if(!(o&&(o.tagName==="INPUT"||o.tagName==="TEXTAREA"||o.tagName==="SELECT"||o.isContentEditable))){if((t.key==="Delete"||t.key==="Backspace")&&S&&!n){t.preventDefault();const m=S;T(g=>g.filter(x=>x.id!==m.id)),L(null),ut()}if(t.ctrlKey||t.metaKey)switch(t.key){case"z":t.shiftKey?(t.preventDefault(),re()):(t.preventDefault(),me());break;case"y":t.preventDefault(),re();break}}};return document.addEventListener("keydown",i),()=>{document.removeEventListener("keydown",i)}},[S,n,me,re,ut]);const Et=()=>`element_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,ua=i=>{i.strokeStyle="#e0e0e0",i.lineWidth=1,i.setLineDash([1,1]);for(let t=0;t<=w;t+=ke)i.beginPath(),i.moveTo(t,0),i.lineTo(t,P),i.stroke();for(let t=0;t<=P;t+=ke)i.beginPath(),i.moveTo(0,t),i.lineTo(w,t),i.stroke();i.setLineDash([])},ga=(i,t)=>{i.save();const o=t.x+t.width/2,c=t.y+t.height/2;switch(i.translate(o,c),t.rotation&&i.rotate(t.rotation*Math.PI/180),i.translate(-t.width/2,-t.height/2),t.type){case"text":xa(i,t);break;case"rectangle":ba(i,t);break;case"circle":Sa(i,t);break;case"triangle":va(i,t);break;case"star":wa(i,t);break;case"arrow":ka(i,t);break;case"diamond":Ca(i,t);break;case"hexagon":ja(i,t);break;case"pentagon":Fa(i,t);break;case"heart":Na(i,t);break;case"oval":za(i,t);break;case"roundedRectangle":Ta(i,t);break;case"image":Aa(i,t);break;case"qrcode":pa(i,t);break;case"barcode":ma(i,t);break;case"sticker":Ea(i,t);break;case"horizontalLine":Ma(i,t);break;case"embroidery":Ia(i,t);break}i.restore()},ma=(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 o=new Image;o.onload=()=>{T(c=>c.map(m=>m.id===t.id?{...m,imageObject:o,imageLoading:!1}:m))},o.onerror=()=>{T(c=>c.map(m=>m.id===t.id?{...m,imageLoading:!1}:m))},o.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("Your customization",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("Your customization",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))},pa=(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 o=new Image;o.onload=()=>{T(c=>c.map(m=>m.id===t.id?{...m,imageObject:o,imageLoading:!1}:m))},o.onerror=()=>{T(c=>c.map(m=>m.id===t.id?{...m,imageLoading:!1}:m))},o.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))},ya=(i,t,o,c,m=!1)=>{const g=Array.from(t);if(g.length===0)return;const x=o.fontSize||20,d=g.map(Nt=>i.measureText(Nt).width),p=d.reduce((Nt,Ut)=>Nt+Ut,0)||1,b=Math.max(1e-4,Math.abs(o.curve)*Math.PI/180),F=p/b,D=o.curve>=0?1:-1,G=(c||p)/2,et=D*F+x/2,ht=o.stroke&&o.strokeWidth>0,W=typeof o.textDecoration=="string"?o.textDecoration:"",lt={underline:W.includes("underline")||!!o.underline,overline:W.includes("overline")||!!o.overline,strike:W.includes("line-through")||!!o.strikethrough},Mt=lt.underline||lt.overline||lt.strike,St=o.decorationColor||o.fill||"#000000",vt=Math.max(1,x/20),Ft=i.textAlign,wt=i.textBaseline;i.textAlign="center",i.textBaseline="middle",i.save(),i.translate(G,et),i.rotate(-D*b/2);for(let Nt=0;Nt<g.length;Nt++){const Ut=d[Nt]/F;if(i.rotate(D*Ut/2),i.save(),i.translate(0,-D*F),m?Oe(i,g[Nt],0,{fontSize:x,color:o.fill||"#000000"}):(ht&&i.strokeText(g[Nt],0,0),i.fillText(g[Nt],0,0)),Mt){const Bt=d[Nt];i.strokeStyle=St,i.lineWidth=vt,i.setLineDash&&i.setLineDash([]),lt.underline&&(i.beginPath(),i.moveTo(-Bt/2,x/2+2),i.lineTo(Bt/2,x/2+2),i.stroke()),lt.overline&&(i.beginPath(),i.moveTo(-Bt/2,-(x/2+2)),i.lineTo(Bt/2,-(x/2+2)),i.stroke()),lt.strike&&(i.beginPath(),i.moveTo(-Bt/2,0),i.lineTo(Bt/2,0),i.stroke())}i.restore(),i.rotate(D*Ut/2)}i.restore(),i.textAlign=Ft,i.textBaseline=wt},xa=(i,t)=>{i.save();let o=t.text||"Text";if(t.textTransform)switch(t.textTransform){case"uppercase":o=o.toUpperCase();break;case"lowercase":o=o.toLowerCase();break;case"capitalize":o=o.replace(/\b\w/g,p=>p.toUpperCase());break}i.font=`${t.fontStyle||"normal"} ${t.fontWeight||"normal"} ${t.fontSize||20}px ${t.fontFamily||"Arial"}`,i.letterSpacing=`${t.letterSpacing||0}px`,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=o.split(`
+`),m=(t.fontSize||20)*(t.lineHeight||1.2),g=Math.max(...c.map(p=>i.measureText(p).width)),x=c.length*m;if(t.backgroundColor&&t.backgroundColor!=="transparent"){i.fillStyle=t.backgroundColor;const p=t.backgroundPadding||4;i.fillRect(-p,-p,g+p*2,x+p*2),i.fillStyle=t.fill||"#000000"}(t.hasTextShadow||t.textShadowColor)&&(i.shadowColor=t.textShadowColor||"rgba(0,0,0,0.5)",i.shadowBlur=t.textShadowBlur!=null?t.textShadowBlur:4,i.shadowOffsetX=t.textShadowX!=null?t.textShadowX:2,i.shadowOffsetY=t.textShadowY!=null?t.textShadowY:2);const d=xi(f)&&t.type==="text"&&!t.isIcon;if(t.curve&&Math.abs(t.curve)>=1){ya(i,c.join(" "),t,g,d),i.restore();return}c.forEach((p,b)=>{const F=b*m,D=i.measureText(p).width;d?Oe(i,p,F,{fontSize:t.fontSize||20,color:t.fill||"#000000"}):(t.stroke&&t.strokeWidth>0&&i.strokeText(p,0,F),i.fillText(p,0,F));const G=t.fontSize||20,et=t.decorationColor||t.fill||"#000000",ht=Math.max(1,G/20);if(i.strokeStyle=et,i.lineWidth=ht,t.textDecoration==="underline"||t.underline){const W=F+G+2;i.beginPath(),i.moveTo(0,W),i.lineTo(D,W),i.stroke()}if(t.textDecoration==="overline"||t.overline){const W=F-2;i.beginPath(),i.moveTo(0,W),i.lineTo(D,W),i.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const W=F+G/2;i.beginPath(),i.moveTo(0,W),i.lineTo(D,W),i.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(lt=>{switch(lt.trim()){case"underline":const Mt=F+G+2;i.beginPath(),i.moveTo(0,Mt),i.lineTo(D,Mt),i.stroke();break;case"overline":const St=F-2;i.beginPath(),i.moveTo(0,St),i.lineTo(D,St),i.stroke();break;case"line-through":const vt=F+G/2;i.beginPath(),i.moveTo(0,vt),i.lineTo(D,vt),i.stroke();break}})}),i.restore()},ba=(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))},Sa=(i,t)=>{const o=Math.min(t.width,t.height)/2,c=t.width/2,m=t.height/2;i.beginPath(),i.arc(c,m,o,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())},va=(i,t)=>{const o=t.width/2;t.height/2,i.beginPath(),i.moveTo(o,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())},wa=(i,t)=>{const o=t.width/2,c=t.height/2,m=Math.min(t.width,t.height)/2,g=m*.4,x=t.numPoints||5;i.beginPath();for(let d=0;d<x*2;d++){const p=d%2===0?m:g,b=d*Math.PI/x,F=o+Math.cos(b)*p,D=c+Math.sin(b)*p;d===0?i.moveTo(F,D):i.lineTo(F,D)}i.closePath(),t.fill&&t.fill!=="transparent"&&(i.fillStyle=t.fill,i.fill()),t.stroke&&t.strokeWidth>0&&(i.strokeStyle=t.stroke,i.lineWidth=t.strokeWidth,i.stroke())},ka=(i,t)=>{const o=t.width,c=t.height,m=o*.3;i.beginPath(),i.moveTo(o/2,0),i.lineTo(o,c*.6),i.lineTo(o-m,c*.6),i.lineTo(o-m,c),i.lineTo(m,c),i.lineTo(m,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())},Ca=(i,t)=>{const o=t.width/2,c=t.height/2;i.beginPath(),i.moveTo(o,0),i.lineTo(t.width,c),i.lineTo(o,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())},ja=(i,t)=>{const o=t.width/2,c=t.height/2,m=Math.min(t.width,t.height)/2,g=6;i.beginPath();for(let x=0;x<g;x++){const d=x*2*Math.PI/g-Math.PI/2,p=o+m*Math.cos(d),b=c+m*Math.sin(d);x===0?i.moveTo(p,b):i.lineTo(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())},Fa=(i,t)=>{const o=t.width/2,c=t.height/2,m=Math.min(t.width,t.height)/2,g=5;i.beginPath();for(let x=0;x<g;x++){const d=x*2*Math.PI/g-Math.PI/2,p=o+m*Math.cos(d),b=c+m*Math.sin(d);x===0?i.moveTo(p,b):i.lineTo(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())},Na=(i,t)=>{const o=t.width,c=t.height,m=0,g=0;i.beginPath();const x=c*.3;i.moveTo(m+o/2,g+x),i.bezierCurveTo(m+o/2,g,m,g,m,g+x),i.bezierCurveTo(m,g+(c+x)/2,m+o/2,g+(c+x)/2,m+o/2,g+c),i.bezierCurveTo(m+o/2,g+(c+x)/2,m+o,g+(c+x)/2,m+o,g+x),i.bezierCurveTo(m+o,g,m+o/2,g,m+o/2,g+x),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())},za=(i,t)=>{const o=t.width/2,c=t.height/2,m=t.width/2,g=t.height/2;i.beginPath(),i.ellipse(o,c,m,g,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())},Ta=(i,t)=>{const o=Math.min(t.width,t.height)*.1;qt(i,0,0,t.width,t.height,o),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())},Ma=(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()},Aa=(i,t)=>{const o=t.src||t.imageData;if(o)try{if(o instanceof HTMLImageElement){if(o.complete&&o.naturalWidth>0&&o.naturalHeight>0){i.drawImage(o,0,0,t.width,t.height);return}}else if(typeof o=="string"&&o.length>0){if(t._imageElement||(t._imageElement=new Image,t._imageElement.crossOrigin="anonymous",t._imageElement.onload=()=>{st()},t._imageElement.onerror=()=>{console.error("Failed to load image:",o),t._imageLoadError=!0,st()},t._imageElement.src=o),t._imageElement.complete&&t._imageElement.naturalWidth>0&&t._imageElement.naturalHeight>0){i.drawImage(t._imageElement,0,0,t.width,t.height);return}if(t._imageLoadError){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);return}}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("Your customization",t.width/2,t.height/2)}catch(c){console.error("Error drawing image:",c),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)}else i.fillStyle="#f8f8f8",i.fillRect(0,0,t.width,t.height),i.strokeStyle="#ddd",i.lineWidth=1,i.strokeRect(0,0,t.width,t.height),i.fillStyle="#999",i.font="14px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText("No Image",t.width/2,t.height/2)},Ea=(i,t)=>{const o=t.src;if(o)try{if(o instanceof HTMLImageElement){if(o.complete&&o.naturalWidth>0&&o.naturalHeight>0){i.drawImage(o,0,0,t.width,t.height);return}}else if(typeof o=="string"&&o.length>0){if(t._stickerElement||(t._stickerElement=new Image,t._stickerElement.crossOrigin="anonymous",t._stickerElement.onload=()=>{st()},t._stickerElement.onerror=()=>{console.error("Failed to load sticker:",o),t._stickerLoadError=!0,st()},t._stickerElement.src=o),t._stickerElement.complete&&t._stickerElement.naturalWidth>0&&t._stickerElement.naturalHeight>0){i.drawImage(t._stickerElement,0,0,t.width,t.height);return}if(t._stickerLoadError){je(i,t,"Failed to load",!0);return}}je(i,t,"Your customization")}catch(c){console.error("Error drawing sticker:",c),je(i,t,"Error",!0)}else je(i,t,"No Sticker")},je=(i,t,o,c=!1)=>{i.fillStyle=c?"#ffebee":"#f8f9fa",i.fillRect(0,0,t.width,t.height),i.strokeStyle=c?"#f44336":"#dee2e6",i.lineWidth=2,i.strokeRect(0,0,t.width,t.height),i.fillStyle=c?"#f44336":"#6c757d",i.font="12px Arial",i.textAlign="center",i.textBaseline="middle",i.fillText(o,t.width/2,t.height/2)},Ia=(i,t)=>{if(t.imageObject&&t.imageObject.complete&&t.imageObject.naturalHeight!==0)try{i.drawImage(t.imageObject,0,0,t.width,t.height)}catch(o){console.error("Error drawing embroidery image:",o),pe(i,t,"Error loading image")}else if(t.src&&!t.imageLoading){t.imageLoading=!0;const o=new Image;o.crossOrigin="anonymous",o.onload=()=>{o.complete&&o.naturalHeight!==0?(t.imageObject=o,t.imageLoading=!1,st()):(t.imageLoading=!1,console.error("Image loaded but is invalid:",t.src))},o.onerror=()=>{t.imageLoading=!1,console.error("Failed to load embroidery image:",t.src),pe(i,t,"Failed to load")},o.src=t.src,pe(i,t,"Your customization")}else t.imageLoading?pe(i,t,"Your customization"):pe(i,t)},pe=(i,t,o="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(o,t.width/2,t.height/2+15)},Mi=(i,t,o)=>{if(!o)return!1;const c=o.x+o.width/2,m=o.y+o.height/2,g=i-c,x=t-m,d=-(o.rotation||0)*Math.PI/180,p=Math.cos(d),b=Math.sin(d),F=g*p-x*b,D=g*b+x*p,G=o.width/2,et=o.height/2;return F>=-G&&F<=G&&D>=-et&&D<=et},Ai=y.useCallback(()=>{if(Gt.current){const t=Gt.current;Gt.current=null;const o=Math.min(t.x0,t.x1),c=Math.min(t.y0,t.y1),m=Math.abs(t.x1-t.x0),g=Math.abs(t.y1-t.y0);if(m>3&&g>3){const x=z.filter(p=>{const b=p.width||0,F=p.height||0;return p.x<o+m&&p.x+b>o&&p.y<c+g&&p.y+F>c}),d=x.map(p=>p.id);it(d),L(d.length?x[x.length-1]:null)}Ot()}(J||gt||_)&&ut(),he.current=null,Vt.current={v:[],h:[]},Ue.current=[],Ye.current=[],qe.current=null,yt(!1),jt(!1),O(!1),mt(null);const i=Dt.current;i&&(i.style.cursor="default")},[J,gt,_,ut,z]);y.useEffect(()=>{const i=t=>{if(n)return;const o=document.activeElement;if(o&&(o.tagName==="INPUT"||o.tagName==="TEXTAREA"||o.tagName==="SELECT"||o.isContentEditable))return;const m=j.length>1?j:S?[S.id]:[];if((t.ctrlKey||t.metaKey)&&(t.key==="z"&&!t.shiftKey?(t.preventDefault(),me()):(t.key==="z"&&t.shiftKey||t.key==="y")&&(t.preventDefault(),re())),t.key==="Delete"||t.key==="Backspace"){const g=m.filter(x=>{const d=z.find(p=>p.id===x);return d&&!d.locked});g.length&&(T(x=>x.filter(d=>!g.includes(d.id))),L(null),it([]),ut(),t.preventDefault())}if((t.ctrlKey||t.metaKey)&&t.key==="d"&&S&&(Ke(S.id),t.preventDefault()),t.key==="Escape"&&(S||m.length)&&(L(null),it([]),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="c"&&m.length&&(Fi.current=m.map(g=>z.find(x=>x.id===g)).filter(Boolean).map(g=>({...g})),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="v"){const g=Fi.current;if(g&&g.length){const x=g.map(d=>({...d,id:Et(),x:(d.x||0)+20,y:(d.y||0)+20}));T(d=>[...d,...x]),it(x.length>1?x.map(d=>d.id):[]),L(x[x.length-1]),ut(),t.preventDefault()}}if(m.length&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key)){t.preventDefault();const g=t.shiftKey?10:1;let x=0,d=0;switch(t.key){case"ArrowUp":d=-g;break;case"ArrowDown":d=g;break;case"ArrowLeft":x=-g;break;case"ArrowRight":x=g;break}const p=m.filter(b=>{const F=z.find(D=>D.id===b);return F&&!F.locked});if(p.length)if(T(b=>b.map(F=>p.includes(F.id)?{...F,x:F.x+x,y:F.y+d}:F)),L(b=>b&&p.includes(b.id)?{...b,x:b.x+x,y:b.y+d}:b),ut(),p.length===1&&S){const b=S.x+x,F=S.y+d,D=ki(w,bt),G=et=>et>=10?Math.round(et).toString():et>=1?et.toFixed(1):et.toFixed(2);ce.current={cx:b+(S.width||0)/2,y:F+(S.height||0)+8,label:D>0?`x ${G(b*D)}"  y ${G(F*D)}"`:`x ${Math.round(b)}  y ${Math.round(F)}`},Ot(),de.current&&clearTimeout(de.current),de.current=setTimeout(()=>{ce.current=null,Ot()},1e3)}else Ot()}};return window.addEventListener("keydown",i),()=>window.removeEventListener("keydown",i)},[S,j,z,me,re,n,w,bt]);const Qe=(i,t={})=>{const o={id:Et(),type:i,x:50,y:50,width:100,height:100,fill:"#000000",stroke:"#000000",strokeWidth:0,rotation:0,...t};switch(i){case"text":o.id=Et(),o.text=t.text||"New Text",o.fontSize=t.fontSize||20,o.fontFamily=t.fontFamily||"Arial",o.fontWeight=t.fontWeight||"normal",o.fontStyle=t.fontStyle||"normal",o.textAlign=t.textAlign||"left",o.width=t.width||150,o.height=t.height||50;break;case"icon":o.id=Et(),o.text=t.text||"🎯",o.fontSize=t.fontSize||48,o.fontFamily=t.fontFamily||"Arial",o.fontWeight=t.fontWeight||"normal",o.fontStyle=t.fontStyle||"normal",o.textAlign="center",o.width=80,o.height=80,o.iconData=t.iconData||null,o.type="text",o.isIcon=!0;break;case"image":o.id=Et(),o.imageData=t.imageData||null,o.width=t.width||200,o.height=t.height||200;break;case"qrcode":o.id=Et(),o.type="qrcode",o.x=(t==null?void 0:t.x)||w/2-((t==null?void 0:t.width)||100)/2,o.y=(t==null?void 0:t.y)||P/2-((t==null?void 0:t.height)||100)/2,o.width=(t==null?void 0:t.width)||100,o.height=(t==null?void 0:t.height)||100,o.src=(t==null?void 0:t.src)||"",o.data=(t==null?void 0:t.data)||"",o.rotation=0,o.opacity=1;break;case"barcode":o.id=Et(),o.type="barcode",o.x=(t==null?void 0:t.x)||w/2-((t==null?void 0:t.width)||200)/2,o.y=(t==null?void 0:t.y)||P/2-((t==null?void 0:t.height)||100)/2,o.width=(t==null?void 0:t.width)||200,o.height=(t==null?void 0:t.height)||100,o.src=(t==null?void 0:t.src)||"",o.data=(t==null?void 0:t.data)||"",o.format=(t==null?void 0:t.format)||"CODE128",o.rotation=0,o.opacity=1,o.imageObject=(t==null?void 0:t.imageObject)||null;break;case"sticker":o.id=Et(),o.type="sticker",o.imageData=(t==null?void 0:t.imageData)||null,o.width=t.width||200,o.height=t.height||200;break;case"horizontalLine":o.id=Et(),o.type="horizontalLine",o.x=w/2-100,o.y=P/2-1,o.width=200,o.height=2,o.fill="#000000",o.stroke="#000000",o.strokeWidth=2,o.rotation=0,o.opacity=1;break;case"embroidery":o.id=Et(),o.type="embroidery",o.imageData=(t==null?void 0:t.imageData)||null,o.width=t.width||200,o.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}T(c=>[...c,o]),L(o),ut()},La=()=>{Qe("text",{text:"Your text",fontSize:32,width:220,height:48,x:w/2-220/2,y:P/2-48/2})},Da=()=>{const i=document.createElement("input");i.type="file",i.accept="image/*",i.onchange=t=>{const o=t.target.files&&t.target.files[0];o&&o.type.startsWith("image/")&&ii(o)},i.click()},Fe=(i,t)=>{T(o=>o.map(c=>c.id===i?{...c,...t}:c)),S&&S.id===i&&L(o=>({...o,...t}))},Ei=async i=>{var g,x,d;if(!i||typeof H!="function")return;const t=i.src||i.image||(i.imageData instanceof HTMLImageElement?i.imageData.src:i.imageData)||((g=i._imageElement)==null?void 0:g.src)||((x=i._stickerElement)==null?void 0:x.src)||((d=i._embroideryElement)==null?void 0:d.src);if(!t)throw new Error("No image to process");const o=await H(t),c=typeof o=="string"?o:URL.createObjectURL(o),m=new Image;m.crossOrigin="anonymous",await new Promise((p,b)=>{m.onload=p,m.onerror=()=>b(new Error("Processed image failed to load")),m.src=c}),Fe(i.id,{src:c,image:c,imageData:c,_imageElement:null,_stickerElement:null,_embroideryElement:null,_imageLoadError:!1,originalWidth:m.naturalWidth,originalHeight:m.naturalHeight,bgRemoved:!0}),ut(),st()},Ze=y.useCallback(()=>{S&&(T(i=>i.filter(t=>t.id!==S.id)),L(null),ut())},[S,ut]),Ke=i=>{const t=z.find(o=>o.id===i);if(t){const o={...t,id:Et(),x:t.x+20,y:t.y+20};T(c=>[...c,o]),L(o),ut()}},Ra=i=>{const t=i||(S==null?void 0:S.id);t&&(T(o=>o.map(c=>c.id===t?{...c,locked:!c.locked}:c)),L(o=>o&&o.id===t?{...o,locked:!o.locked}:o),ut())},Ii=i=>{if(!S||S.locked)return;const t={width:Math.max(10,(S.width||0)*i),height:Math.max(10,(S.height||0)*i)};(S.type==="text"||S.isIcon)&&(t.fontSize=Math.max(6,Math.round((S.fontSize||20)*i))),Fe(S.id,t),ut()},Li=i=>{if(!S||S.locked)return;const t=(((S.rotation||0)+i)%360+360)%360;Fe(S.id,{rotation:t}),ut()},Di=i=>{const t=z.filter(c=>j.includes(c.id));if(t.length<2)return;const o={};i(t,o),T(c=>c.map(m=>o[m.id]?{...m,...o[m.id]}:m)),L(c=>c&&o[c.id]?{...c,...o[c.id]}:c),ut()},Wa=i=>Di((t,o)=>{const c=Math.min(...t.map(b=>b.x)),m=Math.max(...t.map(b=>b.x+(b.width||0))),g=Math.min(...t.map(b=>b.y)),x=Math.max(...t.map(b=>b.y+(b.height||0))),d=(c+m)/2,p=(g+x)/2;t.forEach(b=>{b.locked||(i==="left"?o[b.id]={x:c}:i==="right"?o[b.id]={x:m-(b.width||0)}:i==="hcenter"?o[b.id]={x:d-(b.width||0)/2}:i==="top"?o[b.id]={y:g}:i==="bottom"?o[b.id]={y:x-(b.height||0)}:i==="vcenter"&&(o[b.id]={y:p-(b.height||0)/2}))})}),Ba=i=>Di((t,o)=>{if(t.length<3)return;const c=G=>i==="h"?G.width||0:G.height||0,m=G=>i==="h"?G.x:G.y,g=[...t].sort((G,et)=>m(G)-m(et)),x=g[0],d=g[g.length-1],p=m(d)+c(d)-m(x),b=g.reduce((G,et)=>G+c(et),0),F=(p-b)/(g.length-1);let D=m(x)+c(x)+F;g.forEach((G,et)=>{et===0||et===g.length-1||(G.locked||(o[G.id]=i==="h"?{x:D}:{y:D}),D+=c(G)+F)})}),Pa=()=>{j.length&&(T(i=>i.filter(t=>!j.includes(t.id))),L(null),it([]),ut())},Ri=(i,t)=>{const o=z.findIndex(g=>g.id===i);if(o===-1)return;const c=[...z],m=c[o];t==="up"&&o<c.length-1?(c[o]=c[o+1],c[o+1]=m):t==="down"&&o>0?(c[o]=c[o-1],c[o-1]=m):t==="top"?(c.splice(o,1),c.push(m)):t==="bottom"&&(c.splice(o,1),c.unshift(m)),T(c),ut()};y.useCallback(()=>{X&&ae(i=>({...i,[X.sectionName]:{elements:[...z],selectedColor:at}}))},[X,z,at]);const[,Oa]=y.useReducer(i=>i+1,0);setTimeout(()=>{Oa()},20);const Ha=y.useCallback(()=>{X&&ae(i=>({...i,[X.sectionName]:{elements:[...z],selectedColor:at}}))},[X,z,at]);y.useImperativeHandle(a,()=>({handleSectionChange:Bi,flushCurrentSectionDesign:Ha,addImageFromUrl:(i,t={})=>{if(!i)return;const o=t.width||220,c=t.height||220;Qe("image",{imageData:i,src:i,width:o,height:c,x:Math.max(0,(w-o)/2),y:Math.max(0,(P-c)/2)})},exportPrintReady:async(i="png")=>await Xe(i,!1),exportFullDesign:async(i="png")=>await Xe(i,!0),exportDesign:Xe,getCanvasData:()=>ge(),exportAllDesignsAsJSON:async(i="png")=>{try{const t=ge(),o=(X==null?void 0:X.sectionName)||"main",c={elements:t.elements,selectedColor:t.selectedColor,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight},m={...t.sectionDesigns||{},[o]:c},g=f.sections&&f.sections.length>0?f.sections:[{id:o,sectionName:o,image:X==null?void 0:X.sectionImage,sectionImage:X==null?void 0:X.sectionImage}];return await fe.current.exportAllSectionsAsJSON(m,g,w,P,i,ue,ie)}catch(t){throw console.error("Export as JSON failed:",t),t}},exportCurrentSectionAsJSON:async(i="png")=>{try{const t=ge();return await fe.current.exportCurrentSectionAsJSON(t,i,ue,ie)}catch(t){throw console.error("Export current section as JSON failed:",t),t}}}));const Pt=y.useRef(null),Je=y.useRef(!1),st=y.useCallback(()=>{const i=Dt.current;if(!i||Je.current)return;Je.current=!0;const t=i.getContext("2d");if(t.clearRect(0,0,w,P),V.current&&t.drawImage(V.current,0,0,w,P),dt&&ua(t),z.forEach(d=>{t.save(),t.globalAlpha=d.opacity||1,ga(t,d),t.restore()}),j.length>1?(t.save(),t.strokeStyle="#3b82f6",t.lineWidth=1.5,t.setLineDash([4,3]),j.forEach(d=>{const p=z.find(D=>D.id===d);if(!p)return;const b=Ce(t,p),F=4;t.save(),t.translate(b.cx,b.cy),p.rotation&&t.rotate(p.rotation*Math.PI/180),t.strokeRect(-b.width/2-F,-b.height/2-F,b.width+F*2,b.height+F*2),t.restore()}),t.restore()):S&&ha(t,S),Gt.current){const d=Gt.current,p=Math.min(d.x0,d.x1),b=Math.min(d.y0,d.y1),F=Math.abs(d.x1-d.x0),D=Math.abs(d.y1-d.y0);t.save(),t.fillStyle="rgba(59,130,246,0.12)",t.strokeStyle="#3b82f6",t.lineWidth=1,t.setLineDash([4,3]),t.fillRect(p,b,F,D),t.strokeRect(p,b,F,D),t.restore()}const o=Vt.current;o&&(o.v&&o.v.length||o.h&&o.h.length)&&(t.save(),t.strokeStyle="#ec4899",t.lineWidth=1,t.setLineDash([5,4]),(o.v||[]).forEach(d=>{t.beginPath(),t.moveTo(d,0),t.lineTo(d,P),t.stroke()}),(o.h||[]).forEach(d=>{t.beginPath(),t.moveTo(0,d),t.lineTo(w,d),t.stroke()}),t.restore());const c=Ue.current;c&&c.length&&(t.save(),t.strokeStyle="#ef4444",t.fillStyle="#ef4444",t.lineWidth=1,t.font="11px sans-serif",t.textAlign="center",t.textBaseline="middle",c.forEach(d=>{t.beginPath(),t.moveTo(d.x1,d.y1),t.lineTo(d.x2,d.y2),t.stroke();const p=d.y1===d.y2,b=4;t.beginPath(),p?(t.moveTo(d.x1,d.y1-b),t.lineTo(d.x1,d.y1+b),t.moveTo(d.x2,d.y2-b),t.lineTo(d.x2,d.y2+b)):(t.moveTo(d.x1-b,d.y1),t.lineTo(d.x1+b,d.y1),t.moveTo(d.x2-b,d.y2),t.lineTo(d.x2+b,d.y2)),t.stroke();const F=(d.x1+d.x2)/2,D=(d.y1+d.y2)/2,G=`${d.label}`,ht=t.measureText(G).width+8,W=15;t.fillStyle="#ef4444",qt(t,F-ht/2,D-W/2,ht,W,3),t.fill(),t.fillStyle="#ffffff",t.fillText(G,F,D+.5),t.fillStyle="#ef4444"}),t.restore());const m=Ye.current;m&&m.length&&(t.save(),t.strokeStyle="#a855f7",t.fillStyle="#a855f7",t.lineWidth=1,t.font="11px sans-serif",t.textAlign="center",t.textBaseline="middle",m.forEach(d=>{t.beginPath(),t.moveTo(d.x1,d.y1),t.lineTo(d.x2,d.y2),t.stroke();const p=d.y1===d.y2,b=4;t.beginPath(),p?(t.moveTo(d.x1,d.y1-b),t.lineTo(d.x1,d.y1+b),t.moveTo(d.x2,d.y2-b),t.lineTo(d.x2,d.y2+b)):(t.moveTo(d.x1-b,d.y1),t.lineTo(d.x1+b,d.y1),t.moveTo(d.x2-b,d.y2),t.lineTo(d.x2+b,d.y2)),t.stroke();const F=(d.x1+d.x2)/2,D=(d.y1+d.y2)/2,G=`${d.label}`,ht=t.measureText(G).width+8,W=15;t.fillStyle="#a855f7",qt(t,F-ht/2,D-W/2,ht,W,3),t.fill(),t.fillStyle="#ffffff",t.fillText(G,F,D+.5),t.fillStyle="#a855f7"}),t.restore());const g=qe.current;if(g){t.save(),t.font="11px sans-serif",t.textAlign="center",t.textBaseline="middle";const p=t.measureText(g.label).width+10,b=16,F=Math.max(p/2,Math.min(w-p/2,g.cx)),D=Math.min(P-b/2,g.y+b/2);t.fillStyle="#1d4ed8",qt(t,F-p/2,D-b/2,p,b,3),t.fill(),t.fillStyle="#ffffff",t.fillText(g.label,F,D+.5),t.restore()}const x=ce.current;if(x){t.save(),t.font="11px sans-serif",t.textAlign="center",t.textBaseline="middle";const p=t.measureText(x.label).width+10,b=16,F=Math.max(p/2,Math.min(w-p/2,x.cx)),D=Math.min(P-b/2,x.y+b/2);t.fillStyle="#1d4ed8",qt(t,F-p/2,D-b/2,p,b,3),t.fill(),t.fillStyle="#ffffff",t.fillText(x.label,F,D+.5),t.restore()}Je.current=!1},[z,S,j,w,P,dt]),ti=y.useRef(st);y.useEffect(()=>{ti.current=st},[st]);const Wi=y.useRef(!1);y.useEffect(()=>{Wi.current=J||gt||_},[J,gt,_]);const Ot=y.useCallback(()=>{Pt.current&&cancelAnimationFrame(Pt.current),Pt.current=requestAnimationFrame(()=>{ti.current(),Pt.current=null})},[]);y.useEffect(()=>{fe.current&&(fe.current.embroidery=xi(f))},[f]),y.useEffect(()=>{const i=(z||[]).filter(o=>o&&o.type==="text"&&o.fontFamily).map(o=>o.fontFamily);if(i.length===0)return;let t=!1;return ji(i).then(()=>{t||st()}),()=>{t=!0}},[z,st]),y.useEffect(()=>{Ot()},[z,S,j,w,P,dt,Ot]),y.useEffect(()=>{V.current&&Ot()},[V.current,Ot]),y.useEffect(()=>()=>{Pt.current&&cancelAnimationFrame(Pt.current)},[]);const ei=y.useCallback(()=>{ti.current(),Wi.current&&(Pt.current=requestAnimationFrame(ei))},[]);y.useEffect(()=>{J||gt||_?ei():(Pt.current&&(cancelAnimationFrame(Pt.current),Pt.current=null),Ot())},[J,gt,_,ei,Ot]);const $a=y.useCallback(i=>{if(n)return;const t=Dt.current,o=t.getBoundingClientRect(),c=(i.clientX-o.left)/A,m=(i.clientY-o.top)/A;if(i.pointerId!=null&&t.setPointerCapture)try{t.setPointerCapture(i.pointerId)}catch{}if(ce.current&&(ce.current=null,de.current&&clearTimeout(de.current)),nt({x:c,y:m}),S&&!S.locked&&j.length<=1){const d=Ti(c,m,S);if(d){if(d==="rotate"){O(!0);const p=S.x+S.width/2,b=S.y+S.height/2,F=Math.atan2(m-b,c-p)*180/Math.PI;nt({x:c,y:m,initialAngle:F,initialRotation:S.rotation||0})}else jt(!0),mt(d),nt({x:c,y:m,initialWidth:S.width,initialHeight:S.height,initialX:S.x,initialY:S.y});return}}let g=null;for(let d=z.length-1;d>=0;d--)if(Mi(c,m,z[d])){g=z[d];break}const x=j.length>1?j:S?[S.id]:[];if(i.shiftKey&&g){const d=x.includes(g.id),p=d?x.filter(F=>F!==g.id):[...x,g.id];it(p);const b=d?p[p.length-1]:g.id;L(b&&z.find(F=>F.id===b)||null),st();return}if(g&&x.length>1&&x.includes(g.id)){const d=z.filter(p=>x.includes(p.id)&&!p.locked);d.length&&(yt(!0),he.current={startX:c,startY:m,items:d.map(p=>({id:p.id,x:p.x,y:p.y}))},nt({x:c,y:m}));return}if(g){he.current=null,L(g),g.locked||(yt(!0),nt({x:c,y:m,offsetX:c-g.x,offsetY:m-g.y})),st();return}L(null),Gt.current={x0:c,y0:m,x1:c,y1:m},st()},[n,A,S,j,z,st]),Va=y.useCallback(i=>{if(n)return;const t=Dt.current,o=t.getBoundingClientRect(),c=(i.clientX-o.left)/A,m=(i.clientY-o.top)/A;if(Gt.current){Gt.current={...Gt.current,x1:c,y1:m},t.style.cursor="crosshair",st();return}if(J&&he.current){const g=he.current;let x=c-g.startX,d=m-g.startY;const p=W=>{const lt=z.find(Mt=>Mt.id===W);return lt&&lt.width||0},b=W=>{const lt=z.find(Mt=>Mt.id===W);return lt&&lt.height||0},F=Math.min(...g.items.map(W=>W.x)),D=Math.max(...g.items.map(W=>W.x+p(W.id))),G=Math.min(...g.items.map(W=>W.y)),et=Math.max(...g.items.map(W=>W.y+b(W.id)));x=Math.max(-F,Math.min(w-D,x)),d=Math.max(-G,Math.min(P-et,d));const ht={};g.items.forEach(W=>{ht[W.id]={x:W.x+x,y:W.y+d}}),T(W=>W.map(lt=>ht[lt.id]?{...lt,...ht[lt.id]}:lt)),L(W=>W&&ht[W.id]?{...W,...ht[W.id]}:W),t.style.cursor="grabbing",st();return}if(S&&!J&&!gt&&!_){const g=Ti(c,m,S);g?g==="rotate"?t.style.cursor="grab":t.style.cursor=g:Mi(c,m,S)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=J?"grabbing":"default";if(_&&S){const g=S.x+S.width/2,x=S.y+S.height/2,p=Math.atan2(m-x,c-g)*180/Math.PI-R.initialAngle;let b=R.initialRotation+p;i.shiftKey&&(b=Math.round(b/15)*15),b=(b%360+360)%360,T(F=>F.map(D=>D.id===S.id?{...D,rotation:b}:D)),L(F=>({...F,rotation:b})),st();return}if(gt&&S&&rt){const g=c-R.x,x=m-R.y;let d=R.initialWidth,p=R.initialHeight,b=R.initialX,F=R.initialY;switch(rt){case"se-resize":d=Math.max(20,R.initialWidth+g),p=Math.max(20,R.initialHeight+x);break;case"sw-resize":d=Math.max(20,R.initialWidth-g),p=Math.max(20,R.initialHeight+x),b=R.initialX+(R.initialWidth-d);break;case"ne-resize":d=Math.max(20,R.initialWidth+g),p=Math.max(20,R.initialHeight-x),F=R.initialY+(R.initialHeight-p);break;case"nw-resize":d=Math.max(20,R.initialWidth-g),p=Math.max(20,R.initialHeight-x),b=R.initialX+(R.initialWidth-d),F=R.initialY+(R.initialHeight-p);break}if((i.shiftKey||S.lockAspect)&&S.type!=="text"){const W=R.initialWidth/R.initialHeight;rt.includes("e"),p=d/W,rt.includes("n")&&(F=R.initialY+(R.initialHeight-p))}Ct&&(b=_t(b),F=_t(F),d=_t(d),p=_t(p));const D={...S,x:b,y:F,width:d,height:p},G=ki(w,bt),et=W=>W>=10?Math.round(W).toString():W>=1?W.toFixed(1):W.toFixed(2),ht=G>0?`${et(d*G)}" × ${et(p*G)}"`:`${Math.round(d)} × ${Math.round(p)} px`;qe.current={cx:b+d/2,y:F+p+8,label:ht},T(W=>W.map(lt=>lt.id===S.id?D:lt)),L(D),st();return}if(J&&S){let g=c-R.offsetX,x=m-R.offsetY;Ct&&(g=_t(g),x=_t(x));const d=6/(A||1),p=S.width,b=S.height,F=z.filter($=>$.id!==S.id),D=[0,w/2,w],G=[0,P/2,P];F.forEach($=>{D.push($.x,$.x+($.width||0)/2,$.x+($.width||0)),G.push($.y,$.y+($.height||0)/2,$.y+($.height||0))});const et=($,Xt,Me)=>{const Ae=[0,Xt/2,Xt];let se=null;return Ae.forEach(Ee=>{Me.forEach(Qt=>{const Zt=Math.abs($+Ee-Qt);Zt<=d&&(!se||Zt<se.d)&&(se={d:Zt,snapped:Qt-Ee,line:Qt})})}),se},ht={v:[],h:[]},W=et(g,p,D);W&&(g=W.snapped,ht.v.push(W.line));const lt=et(x,b,G);lt&&(x=lt.snapped,ht.h.push(lt.line)),Vt.current=ht,g=Math.max(0,Math.min(w-S.width,g)),x=Math.max(0,Math.min(P-S.height,x));const Mt=()=>{const $=g,Xt=g+p,Me=x,Ae=x+b,se=ft=>Math.min(Ae,ft.y+(ft.height||0))-Math.max(Me,ft.y),Ee=ft=>Math.min(Xt,ft.x+(ft.width||0))-Math.max($,ft.x);let Qt=null,Zt=null,Ie=null,Le=null;return F.forEach(ft=>{const di=ft.x+(ft.width||0),hi=ft.y+(ft.height||0);se(ft)>0&&(di<=$&&(!Qt||di>Qt.edge)&&(Qt={edge:di,el:ft}),ft.x>=Xt&&(!Zt||ft.x<Zt.edge)&&(Zt={edge:ft.x,el:ft})),Ee(ft)>0&&(hi<=Me&&(!Ie||hi>Ie.edge)&&(Ie={edge:hi,el:ft}),ft.y>=Ae&&(!Le||ft.y<Le.edge)&&(Le={edge:ft.y,el:ft}))}),{L:Qt,R:Zt,T:Ie,B:Le}};let{L:St,R:vt,T:Ft,B:wt}=Mt();if(!W&&St&&vt){const $=(St.edge+vt.edge-p)/2;Math.abs(g-$)<=d&&(g=$)}if(!lt&&Ft&&wt){const $=(Ft.edge+wt.edge-b)/2;Math.abs(x-$)<=d&&(x=$)}g=Math.max(0,Math.min(w-S.width,g)),x=Math.max(0,Math.min(P-S.height,x)),{L:St,R:vt,T:Ft,B:wt}=Mt();const Nt=g,Ut=g+p,Bt=x,Ne=x+b,ze=$=>(Math.max(Bt,$.y)+Math.min(Ne,$.y+($.height||0)))/2,Te=$=>(Math.max(Nt,$.x)+Math.min(Ut,$.x+($.width||0)))/2,oi=St?Math.round(Nt-St.edge):null,ri=vt?Math.round(vt.edge-Ut):null,si=Ft?Math.round(Bt-Ft.edge):null,ni=wt?Math.round(wt.edge-Ne):null,li=St&&vt&&oi===ri,ci=Ft&&wt&&si===ni,ye=[];if(St&&!li){const $=ze(St.el);ye.push({x1:St.edge,y1:$,x2:Nt,y2:$,label:oi})}if(vt&&!li){const $=ze(vt.el);ye.push({x1:Ut,y1:$,x2:vt.edge,y2:$,label:ri})}if(Ft&&!ci){const $=Te(Ft.el);ye.push({x1:$,y1:Ft.edge,x2:$,y2:Bt,label:si})}if(wt&&!ci){const $=Te(wt.el);ye.push({x1:$,y1:Ne,x2:$,y2:wt.edge,label:ni})}Ue.current=ye;const xe=[];if(li){const $=(ze(St.el)+ze(vt.el))/2;xe.push({x1:St.edge,y1:$,x2:Nt,y2:$,label:oi}),xe.push({x1:Ut,y1:$,x2:vt.edge,y2:$,label:ri})}if(ci){const $=(Te(Ft.el)+Te(wt.el))/2;xe.push({x1:$,y1:Ft.edge,x2:$,y2:Bt,label:si}),xe.push({x1:$,y1:Ne,x2:$,y2:wt.edge,label:ni})}Ye.current=xe;const Ui={...S,x:g,y:x};T($=>$.map(Xt=>Xt.id===S.id?Ui:Xt)),L(Ui),st()}},[n,A,S,J,gt,_,rt,R,Ct,w,P,z,st]),Bi=y.useCallback(i=>{X&&ae(o=>({...o,[X.sectionName]:{elements:z.map(c=>c.type==="image"?{...c,imageData:c.imageData,src:c.src}:c),selectedColor:at}}));const t=$t[i.sectionName];if(t){const o=t.elements.map(c=>{if(c.type==="image"&&c.src&&!c.imageData){const m=new Image;return m.onload=()=>{T(g=>g.map(x=>x.id===c.id?{...x,imageData:m}:x)),st()},m.src=c.src,{...c,imageData:m}}return c});T(o),xt(t.selectedColor||at)}else T([]);ve(i),L(null)},[X,z,at,$t,st]),ii=y.useCallback(i=>{if(i&&i.type.startsWith("image/")){const t=new FileReader;t.onload=o=>{const c=new Image;c.onload=()=>{const m={id:Et(),type:"image",x:_t(w/2-100),y:_t(P/2-100),width:Math.min(c.width,200),height:Math.min(c.height,200),rotation:0,imageData:c,src:o.target.result,originalWidth:c.width,originalHeight:c.height},g=c.width/c.height;m.width/m.height!==g&&(m.width/g<=200?m.height=m.width/g:m.width=m.height*g),T(x=>[...x,m]),L(m),ut()},c.onerror=()=>{console.error("Failed to load uploaded image"),alert("Failed to load the uploaded image. Please try again.")},c.src=o.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.")},[w,P,_t,Et,ut]),Pi=y.useCallback(Mo(()=>{st()},16),[st]);y.useEffect(()=>{ca.current||Pi()},[z,S,dt,Pi]),y.useEffect(()=>{st()},[st]);const Oi=i=>{if(!kt)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),o=document.querySelector(".ruler-vertical");if(!t||!o)return{horizontal:[],vertical:[]};const c=t.getBoundingClientRect(),m=o.getBoundingClientRect(),g=c.width,x=m.height,d=50,p=[],b=[];for(let F=d;F<=g;F+=d)F<=g-20&&p.push({position:F,value:Math.round(F/i)});for(let F=d;F<=x;F+=d)F<=x-15&&b.push({position:F,value:Math.round(F/i)});return{horizontal:p,vertical:b}},[Hi,$i]=y.useState({horizontal:[],vertical:[]});y.useEffect(()=>{const i=()=>{setTimeout(()=>{const c=Oi(A);$i(c)},50)};i();let t;const o=()=>{clearTimeout(t),t=setTimeout(i,150)};return window.addEventListener("resize",o),()=>{window.removeEventListener("resize",o),clearTimeout(t)}},[A,kt]),y.useEffect(()=>{if(kt&&!Yt){const i=setTimeout(()=>{const t=Oi(A);$i(t)},100);return()=>clearTimeout(i)}},[kt,Yt,A]);const ai=xi(f),Vi=ai?zo(z):[],Gi=e.jsxs(e.Fragment,{children:[e.jsx(ko,{selectedElement:S,selectedCount:j.length,onUpdate:Fe,onMoveLayer:Ri,onAlignSelection:Wa,onDistributeSelection:Ba,onDeleteSelection:Pa,availableFonts:da,theme:s,isEmbroidery:ai,onFontLoaded:st,canvasWidth:w,canvasHeight:P,printConfig:bt,onRemoveBackground:H?Ei:null}),l!=="customize"&&e.jsx(Co,{elements:z,selectedElement:S,onSelectElement:i=>{it(i?[i.id]:[]),L(i)},onMoveLayer:Ri,onDeleteElement:Ze,theme:s})]});return e.jsxs("div",{className:"pure-canvas-designer",children:[e.jsx("div",{className:"designer-header",children:e.jsx(po,{onAddElement:Qe,onDeleteElement:()=>S&&Ze(S.id),onDuplicateElement:()=>S&&Ke(S.id),onUndo:me,onRedo:re,onToggleGrid:()=>It(!dt),onToggleRulers:()=>pt(!kt),onToggleSnap:()=>Ht(!Ct),onTogglePrintGuides:()=>ne(i=>!i),onImageUpload:ii,canUndo:zt>0,canRedo:zt<Lt.length-1,showGrid:dt,showRulers:kt,snapToGrid:Ct,showPrintGuides:ee,selectedElement:S,theme:s,readOnly:n,mode:l,productionMethods:f==null?void 0:f.productionMethods,supportsEmbroidery:f==null?void 0:f.supportsEmbroidery,apiKey:r.apiKey,apiEndpoint:r.apiEndpoint,aiEnabled:N,aiEndpoint:M,onAIImageGenerate:v,isAuthenticated:B,onRequireAuth:I})}),ai&&!Kt&&e.jsxs("div",{role:"note",style:{display:"flex",gap:10,alignItems:"flex-start",margin:"8px 12px",padding:"10px 12px",background:"#fff7ed",border:"1px solid #fed7aa",borderRadius:8,color:"#7c2d12",fontSize:13,lineHeight:1.4},children:[e.jsx("span",{style:{fontSize:16,lineHeight:1},children:"🧵"}),e.jsxs("div",{style:{flex:1,minWidth:0},children:[e.jsx("strong",{children:"Embroidery preview"})," — this is how your design will be stitched. Colours are matched to real thread.",Vi.length>0&&e.jsx("ul",{style:{margin:"6px 0 0",paddingLeft:18},children:Vi.map((i,t)=>e.jsx("li",{children:i},t))})]}),e.jsx("button",{type:"button",onClick:()=>te(!0),"aria-label":"Dismiss",style:{background:"none",border:"none",cursor:"pointer",fontSize:18,color:"#9a3412",lineHeight:1},children:"×"})]}),e.jsxs("div",{className:"designer-content",children:[kt&&!Yt&&e.jsxs("div",{className:"rulers",children:[e.jsx("div",{className:"ruler-horizontal",children:e.jsx("div",{className:"ruler-horizontal-numbers",children:Hi.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:Hi.vertical.map((i,t)=>e.jsx("span",{className:"ruler-number vertical",style:{top:`${i.position}px`},children:i.value},t))})})]}),e.jsxs("div",{className:"canvas-container",ref:Tt,onDragOver:i=>{n||i.preventDefault()},onDrop:i=>{var o;if(n)return;i.preventDefault();const t=[...((o=i.dataTransfer)==null?void 0:o.files)||[]].find(c=>c.type.startsWith("image/"));t&&ii(t)},children:[Yt&&e.jsx("button",{type:"button",className:"mobile-panel-toggle","aria-label":"Open tools & properties",title:"Tools & properties",onClick:()=>le(i=>!i),style:{position:"absolute",top:8,right:8,zIndex:40,width:42,height:42,borderRadius:10,border:"1px solid #e2e8f0",background:"#ffffff",boxShadow:"0 2px 10px rgba(0,0,0,0.18)",fontSize:20,lineHeight:1,color:"#334155",cursor:"pointer"},children:"☰"}),!n&&z.length>0&&(()=>{const i=[],t=((bt==null?void 0:bt.safeAreaPct)||0)/100;if(t){const c=w*t,m=P*t,g=w*(1-t),x=P*(1-t);z.some(p=>p.x<c-.5||p.y<m-.5||p.x+(p.width||0)>g+.5||p.y+(p.height||0)>x+.5)&&i.push({key:"safe",text:"Some artwork is outside the safe print area and may be cut off."})}return z.some(c=>{var g;const m=ra(c,w,bt);return m!=null&&((g=sa(m,bt))==null?void 0:g.level)==="bad"})&&i.push({key:"dpi",text:"An image is low-resolution and may print blurry — try a larger file or smaller size."}),i.length?e.jsx("div",{style:{position:"absolute",top:8,left:"50%",transform:"translateX(-50%)",zIndex:35,maxWidth:"92%",display:"flex",flexDirection:"column",gap:6},children:i.map(c=>e.jsxs("div",{role:"status",style:{display:"flex",alignItems:"center",gap:6,padding:"6px 12px",borderRadius:8,background:"#fffbeb",border:"1px solid #fcd34d",color:"#92400e",fontSize:12,lineHeight:1.3,boxShadow:"0 2px 10px rgba(0,0,0,0.12)"},children:[e.jsx("span",{"aria-hidden":"true",children:"⚠️"}),c.text]},c.key))}):null})(),e.jsxs("div",{className:"canvas-stage",style:{position:"relative",width:w,height:P,transform:`scale(${A})`,transformOrigin:"top left"},children:[e.jsx("canvas",{ref:Dt,width:w,height:P,onPointerDown:$a,onPointerMove:Va,onPointerUp:Ai,onPointerCancel:Ai,style:{display:"block",border:"1px solid #e2e8f0",cursor:J?"grabbing":"default",touchAction:"none"}}),!n&&z.length===0&&(()=>{const i=We[(typeof Q=="number"?Q:We.findIndex(o=>o.key===Q))%We.length]||We[0],t={display:"inline-flex",alignItems:"center",gap:6,padding:"8px 14px",borderRadius:8,cursor:"pointer",fontSize:13,fontWeight:600,lineHeight:1};return e.jsxs("div",{style:{position:"absolute",inset:0,zIndex:20,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:12,pointerEvents:"none",textAlign:"center",padding:24,color:"#0f172a"},children:[e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",width:56,height:56,borderRadius:"50%",background:"rgba(255,255,255,0.92)",border:"1px dashed #94a3b8"},children:e.jsx(K,{name:"image",size:26,color:"#475569"})}),e.jsx("div",{style:{fontSize:17,fontWeight:800,color:"#0f172a"},children:i.title}),e.jsx("div",{style:{fontSize:13,fontWeight:600,maxWidth:260,lineHeight:1.45,color:"#334155"},children:i.body}),e.jsxs("div",{style:{display:"flex",gap:8,pointerEvents:"auto",marginTop:2},children:[e.jsxs("button",{type:"button",style:{...t,background:(s==null?void 0:s.primaryColor)||"#0f172a",color:"#ffffff",border:"none"},onClick:La,children:[e.jsx(K,{name:"text",size:16,color:"#ffffff"})," Add text"]}),e.jsxs("button",{type:"button",style:{...t,background:"#ffffff",color:"#0f172a",border:"1px solid #cbd5e1"},onClick:Da,children:[e.jsx(K,{name:"upload",size:16,color:"#0f172a"})," Upload image"]})]})]})})(),ee&&e.jsxs("div",{className:"print-guides-overlay","aria-hidden":"true",style:{position:"absolute",top:0,left:0,width:w,height:P,pointerEvents:"none"},children:[e.jsx("div",{style:{position:"absolute",inset:0,border:"1px solid rgba(37, 99, 235, 0.55)"}}),e.jsx("div",{style:{position:"absolute",top:`${bt.safeAreaPct}%`,left:`${bt.safeAreaPct}%`,right:`${bt.safeAreaPct}%`,bottom:`${bt.safeAreaPct}%`,border:"1px dashed rgba(37, 99, 235, 0.9)"},children:e.jsx("span",{style:{position:"absolute",top:2,left:4,fontSize:10,lineHeight:1.4,color:"rgba(37, 99, 235, 0.9)",background:"rgba(255,255,255,0.6)",padding:"0 3px",borderRadius:2,userSelect:"none"},children:"Safe area"})})]}),S&&!n&&j.length<=1&&(()=>{const i=Dt.current&&Dt.current.getContext("2d"),t=i?Ce(i,S):{cx:S.x+(S.width||0)/2,y:S.y},o=t.cx,c=t.y,m=["image","sticker","embroidery"].includes(S.type),g=!!S.locked,x={width:30,height:30,border:"none",background:"transparent",borderRadius:6,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:0};return e.jsx("div",{style:{position:"absolute",left:o,top:c,pointerEvents:"none",zIndex:30},children:e.jsxs("div",{className:"element-action-toolbar",onMouseDown:d=>d.stopPropagation(),style:{transform:`translate(-50%, calc(-100% - 12px)) scale(${1/(A||1)})`,transformOrigin:"bottom center",pointerEvents:"auto",display:"flex",alignItems:"center",gap:2,padding:"3px 4px",background:"#ffffff",border:"1px solid #e2e8f0",borderRadius:8,boxShadow:"0 4px 14px rgba(0,0,0,0.18)",whiteSpace:"nowrap"},children:[!g&&e.jsxs(e.Fragment,{children:[e.jsx("button",{style:x,title:"Shrink",onClick:d=>{d.stopPropagation(),Ii(.9)},children:e.jsx(K,{name:"minus",size:18,color:"#334155"})}),e.jsx("button",{style:x,title:"Enlarge",onClick:d=>{d.stopPropagation(),Ii(1.1)},children:e.jsx(K,{name:"plus",size:18,color:"#334155"})}),e.jsx("button",{style:x,title:"Duplicate",onClick:d=>{d.stopPropagation(),Ke(S.id)},children:e.jsx(K,{name:"duplicate",size:18,color:"#334155"})}),e.jsx("button",{style:x,title:"Rotate left 15°",onClick:d=>{d.stopPropagation(),Li(-15)},children:e.jsx(K,{name:"rotateLeft",size:18,color:"#334155"})}),e.jsx("button",{style:x,title:"Rotate right 15°",onClick:d=>{d.stopPropagation(),Li(15)},children:e.jsx(K,{name:"rotateRight",size:18,color:"#334155"})}),m&&H&&e.jsx("button",{style:x,title:"Remove background",onClick:d=>{d.stopPropagation(),Ei(S).catch(()=>{})},children:e.jsx("span",{style:{fontSize:16,lineHeight:1},children:"✂️"})})]}),e.jsx("button",{style:{...x,background:g?"#eef2ff":"transparent"},title:g?"Unlock":"Lock position",onClick:d=>{d.stopPropagation(),Ra(S.id)},children:e.jsx(K,{name:"lock",size:18,color:g?"#4f46e5":"#334155"})}),!g&&e.jsxs(e.Fragment,{children:[e.jsx("span",{style:{width:1,height:20,background:"#e2e8f0",margin:"0 2px"}}),e.jsx("button",{style:x,title:"Delete",onClick:d=>{d.stopPropagation(),Ze()},children:e.jsx(K,{name:"trash",size:18,color:"#dc2626"})})]})]})})})()]})]}),!Yt&&e.jsx("div",{className:"side-panels",children:Gi})]}),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:f.name})]}),e.jsx("div",{className:"thumbnails-container",children:f.sections.map(i=>{const t=$t[i.sectionName]&&$t[i.sectionName].elements&&$t[i.sectionName].elements.length>0;return e.jsxs("div",{className:`section-thumbnail compact ${X.sectionName===i.sectionName?"active":""}`,onClick:o=>{o.stopPropagation();const c=f.sections.find(m=>m.sectionName===i.sectionName);Bi(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:o=>{o.target.style.display="none",o.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:"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:()=>U(Math.max(.25,A-.25)),disabled:A<=.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(A*100),"%"]}),e.jsx("div",{className:"zoom-slider-container compact",children:e.jsx("input",{type:"range",min:"0.25",max:"4",step:"0.25",value:A,onChange:i=>U(parseFloat(i.target.value)),className:"zoom-slider compact"})})]}),e.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>U(Math.min(4,A+.25)),disabled:A>=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:()=>U(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"})]})})]})]})]}),Yt&&Ge&&e.jsx("div",{className:"mobile-panel-modal-overlay",onClick:()=>le(!1),style:{position:"fixed",inset:0,zIndex:1e4,background:"rgba(15,23,42,0.5)",display:"flex",alignItems:"flex-end",justifyContent:"center"},children:e.jsxs("div",{className:"mobile-panel-modal",role:"dialog","aria-modal":"true","aria-label":"Edit design",onClick:i=>i.stopPropagation(),style:{background:"#ffffff",width:"100%",maxWidth:560,maxHeight:"85vh",borderTopLeftRadius:16,borderTopRightRadius:16,display:"flex",flexDirection:"column",boxShadow:"0 -8px 30px rgba(0,0,0,0.25)"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"12px 16px",borderBottom:"1px solid #e2e8f0",borderTopLeftRadius:16,borderTopRightRadius:16,flex:"0 0 auto"},children:[e.jsx("span",{style:{fontSize:15,fontWeight:700,color:"#0f172a"},children:"Edit design"}),e.jsx("button",{type:"button","aria-label":"Close",onClick:()=>le(!1),style:{width:32,height:32,borderRadius:8,border:"1px solid #e2e8f0",background:"#fff",fontSize:18,lineHeight:1,cursor:"pointer",color:"#334155"},children:"×"})]}),e.jsx("div",{style:{overflowY:"auto",WebkitOverflowScrolling:"touch",padding:12},children:Gi})]})})]})});na.displayName="Mypixia";module.exports=na;