npm - @mypixia/simplex-designer - Versions diffs - 1.2.2 → 2.0.0 - Mend

@mypixia/simplex-designer 1.2.2 → 2.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 (5) hide show

package/dist/index.cjs.js CHANGED Viewed

@@ -1,94 +1,991 @@
-"use strict";require('./index_external.css');var Kt=Object.create;var bt=Object.defineProperty;var Xt=Object.getOwnPropertyDescriptor;var qt=Object.getOwnPropertyNames;var Qt=Object.getPrototypeOf,Zt=Object.prototype.hasOwnProperty;var er=(m,r,n,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let l of qt(r))!Zt.call(m,l)&&l!==n&&bt(m,l,{get:()=>r[l],enumerable:!(a=Xt(r,l))||a.enumerable});return m};var tr=(m,r,n)=>(n=m!=null?Kt(Qt(m)):{},er(r||!m||!m.__esModule?bt(n,"default",{value:m,enumerable:!0}):n,m));const h=require("react"),B=require("fabric"),Ce=require("axios"),rr=require("qrcode"),nr=require("react-barcode"),ce=require("react-share"),sr=require("react-dom");var dt={exports:{}},ct={};/**
+"use strict";require('./index_external.css');const y=require("react"),Pe=require("qrcode"),Ue=require("react-barcode"),Kt=require("axios");var Nt={exports:{}},kt={};/**
  * @license React
- * react-jsx-runtime.production.min.js
+ * react-jsx-runtime.production.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var yt;function ir(){if(yt)return ct;yt=1;var m=h,r=Symbol.for("react.element"),n=Symbol.for("react.fragment"),a=Object.prototype.hasOwnProperty,l=m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,d={key:!0,ref:!0,__self:!0,__source:!0};function x(p,j,c){var v,u={},w=null,i=null;c!==void 0&&(w=""+c),j.key!==void 0&&(w=""+j.key),j.ref!==void 0&&(i=j.ref);for(v in j)a.call(j,v)&&!d.hasOwnProperty(v)&&(u[v]=j[v]);if(p&&p.defaultProps)for(v in j=p.defaultProps,j)u[v]===void 0&&(u[v]=j[v]);return{$$typeof:r,type:p,key:w,ref:i,props:u,_owner:l.current}}return ct.Fragment=n,ct.jsx=x,ct.jsxs=x,ct}var at={};/**
+ */var Zt;function Oe(){if(Zt)return kt;Zt=1;var f=Symbol.for("react.transitional.element"),o=Symbol.for("react.fragment");function a(d,s,h){var g=null;if(h!==void 0&&(g=""+h),s.key!==void 0&&(g=""+s.key),"key"in s){h={};for(var l in s)l!=="key"&&(h[l]=s[l])}else h=s;return s=h.ref,{$$typeof:f,type:d,key:g,ref:s!==void 0?s:null,props:h}}return kt.Fragment=o,kt.jsx=a,kt.jsxs=a,kt}var vt={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
- * Copyright (c) Facebook, Inc. and its affiliates.
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var wt;function or(){return wt||(wt=1,process.env.NODE_ENV!=="production"&&function(){var m=h,r=Symbol.for("react.element"),n=Symbol.for("react.portal"),a=Symbol.for("react.fragment"),l=Symbol.for("react.strict_mode"),d=Symbol.for("react.profiler"),x=Symbol.for("react.provider"),p=Symbol.for("react.context"),j=Symbol.for("react.forward_ref"),c=Symbol.for("react.suspense"),v=Symbol.for("react.suspense_list"),u=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),i=Symbol.for("react.offscreen"),y=Symbol.iterator,f="@@iterator";function b(t){if(t===null||typeof t!="object")return null;var g=y&&t[y]||t[f];return typeof g=="function"?g:null}var s=m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function k(t){{for(var g=arguments.length,S=new Array(g>1?g-1:0),M=1;M<g;M++)S[M-1]=arguments[M];_("error",t,S)}}function _(t,g,S){{var M=s.ReactDebugCurrentFrame,$=M.getStackAddendum();$!==""&&(g+="%s",S=S.concat([$]));var Y=S.map(function(U){return String(U)});Y.unshift("Warning: "+g),Function.prototype.apply.call(console[t],console,Y)}}var z=!1,L=!1,F=!1,R=!1,E=!1,P;P=Symbol.for("react.module.reference");function X(t){return!!(typeof t=="string"||typeof t=="function"||t===a||t===d||E||t===l||t===c||t===v||R||t===i||z||L||F||typeof t=="object"&&t!==null&&(t.$$typeof===w||t.$$typeof===u||t.$$typeof===x||t.$$typeof===p||t.$$typeof===j||t.$$typeof===P||t.getModuleId!==void 0))}function Q(t,g,S){var M=t.displayName;if(M)return M;var $=g.displayName||g.name||"";return $!==""?S+"("+$+")":S}function oe(t){return t.displayName||"Context"}function te(t){if(t==null)return null;if(typeof t.tag=="number"&&k("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof t=="function")return t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case a:return"Fragment";case n:return"Portal";case d:return"Profiler";case l:return"StrictMode";case c:return"Suspense";case v:return"SuspenseList"}if(typeof t=="object")switch(t.$$typeof){case p:var g=t;return oe(g)+".Consumer";case x:var S=t;return oe(S._context)+".Provider";case j:return Q(t,t.render,"ForwardRef");case u:var M=t.displayName||null;return M!==null?M:te(t.type)||"Memo";case w:{var $=t,Y=$._payload,U=$._init;try{return te(U(Y))}catch{return null}}}return null}var de=Object.assign,xe=0,Se,Ie,_e,Be,Je,re,rt;function De(){}De.__reactDisabledLog=!0;function Ge(){{if(xe===0){Se=console.log,Ie=console.info,_e=console.warn,Be=console.error,Je=console.group,re=console.groupCollapsed,rt=console.groupEnd;var t={configurable:!0,enumerable:!0,value:De,writable:!0};Object.defineProperties(console,{info:t,log:t,warn:t,error:t,group:t,groupCollapsed:t,groupEnd:t})}xe++}}function Fe(){{if(xe--,xe===0){var t={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:de({},t,{value:Se}),info:de({},t,{value:Ie}),warn:de({},t,{value:_e}),error:de({},t,{value:Be}),group:de({},t,{value:Je}),groupCollapsed:de({},t,{value:re}),groupEnd:de({},t,{value:rt})})}xe<0&&k("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var He=s.ReactCurrentDispatcher,ke;function J(t,g,S){{if(ke===void 0)try{throw Error()}catch($){var M=$.stack.trim().match(/\n( *(at )?)/);ke=M&&M[1]||""}return`
-`+ke+t}}var Ee=!1,Te;{var ne=typeof WeakMap=="function"?WeakMap:Map;Te=new ne}function ze(t,g){if(!t||Ee)return"";{var S=Te.get(t);if(S!==void 0)return S}var M;Ee=!0;var $=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var Y;Y=He.current,He.current=null,Ge();try{if(g){var U=function(){throw Error()};if(Object.defineProperty(U.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(U,[])}catch(he){M=he}Reflect.construct(t,[],U)}else{try{U.call()}catch(he){M=he}t.call(U.prototype)}}else{try{throw Error()}catch(he){M=he}t()}}catch(he){if(he&&M&&typeof he.stack=="string"){for(var V=he.stack.split(`
-`),le=M.stack.split(`
-`),q=V.length-1,Z=le.length-1;q>=1&&Z>=0&&V[q]!==le[Z];)Z--;for(;q>=1&&Z>=0;q--,Z--)if(V[q]!==le[Z]){if(q!==1||Z!==1)do if(q--,Z--,Z<0||V[q]!==le[Z]){var fe=`
-`+V[q].replace(" at new "," at ");return t.displayName&&fe.includes("<anonymous>")&&(fe=fe.replace("<anonymous>",t.displayName)),typeof t=="function"&&Te.set(t,fe),fe}while(q>=1&&Z>=0);break}}}finally{Ee=!1,He.current=Y,Fe(),Error.prepareStackTrace=$}var Qe=t?t.displayName||t.name:"",We=Qe?J(Qe):"";return typeof t=="function"&&Te.set(t,We),We}function nt(t,g,S){return ze(t,!1)}function ue(t){var g=t.prototype;return!!(g&&g.isReactComponent)}function pe(t,g,S){if(t==null)return"";if(typeof t=="function")return ze(t,ue(t));if(typeof t=="string")return J(t);switch(t){case c:return J("Suspense");case v:return J("SuspenseList")}if(typeof t=="object")switch(t.$$typeof){case j:return nt(t.render);case u:return pe(t.type,g,S);case w:{var M=t,$=M._payload,Y=M._init;try{return pe(Y($),g,S)}catch{}}}return""}var be=Object.prototype.hasOwnProperty,Pe={},Ye=s.ReactDebugCurrentFrame;function ge(t){if(t){var g=t._owner,S=pe(t.type,t._source,g?g.type:null);Ye.setExtraStackFrame(S)}else Ye.setExtraStackFrame(null)}function st(t,g,S,M,$){{var Y=Function.call.bind(be);for(var U in t)if(Y(t,U)){var V=void 0;try{if(typeof t[U]!="function"){var le=Error((M||"React class")+": "+S+" type `"+U+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof t[U]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw le.name="Invariant Violation",le}V=t[U](g,U,M,S,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(q){V=q}V&&!(V instanceof Error)&&(ge($),k("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",M||"React class",S,U,typeof V),ge(null)),V instanceof Error&&!(V.message in Pe)&&(Pe[V.message]=!0,ge($),k("Failed %s type: %s",S,V.message),ge(null))}}}var Ke=Array.isArray;function Ve(t){return Ke(t)}function it(t){{var g=typeof Symbol=="function"&&Symbol.toStringTag,S=g&&t[Symbol.toStringTag]||t.constructor.name||"Object";return S}}function ot(t){try{return Xe(t),!1}catch{return!0}}function Xe(t){return""+t}function Me(t){if(ot(t))return k("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",it(t)),Xe(t)}var N=s.ReactCurrentOwner,A={key:!0,ref:!0,__self:!0,__source:!0},G,D;function ee(t){if(be.call(t,"ref")){var g=Object.getOwnPropertyDescriptor(t,"ref").get;if(g&&g.isReactWarning)return!1}return t.ref!==void 0}function me(t){if(be.call(t,"key")){var g=Object.getOwnPropertyDescriptor(t,"key").get;if(g&&g.isReactWarning)return!1}return t.key!==void 0}function ye(t,g){typeof t.ref=="string"&&N.current}function se(t,g){{var S=function(){G||(G=!0,k("%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://reactjs.org/link/special-props)",g))};S.isReactWarning=!0,Object.defineProperty(t,"key",{get:S,configurable:!0})}}function qe(t,g){{var S=function(){D||(D=!0,k("%s: `ref` 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://reactjs.org/link/special-props)",g))};S.isReactWarning=!0,Object.defineProperty(t,"ref",{get:S,configurable:!0})}}var Ue=function(t,g,S,M,$,Y,U){var V={$$typeof:r,type:t,key:g,ref:S,props:U,_owner:Y};return V._store={},Object.defineProperty(V._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(V,"_self",{configurable:!1,enumerable:!1,writable:!1,value:M}),Object.defineProperty(V,"_source",{configurable:!1,enumerable:!1,writable:!1,value:$}),Object.freeze&&(Object.freeze(V.props),Object.freeze(V)),V};function we(t,g,S,M,$){{var Y,U={},V=null,le=null;S!==void 0&&(Me(S),V=""+S),me(g)&&(Me(g.key),V=""+g.key),ee(g)&&(le=g.ref,ye(g,$));for(Y in g)be.call(g,Y)&&!A.hasOwnProperty(Y)&&(U[Y]=g[Y]);if(t&&t.defaultProps){var q=t.defaultProps;for(Y in q)U[Y]===void 0&&(U[Y]=q[Y])}if(V||le){var Z=typeof t=="function"?t.displayName||t.name||"Unknown":t;V&&se(U,Z),le&&qe(U,Z)}return Ue(t,V,le,$,M,N.current,U)}}var o=s.ReactCurrentOwner,I=s.ReactDebugCurrentFrame;function O(t){if(t){var g=t._owner,S=pe(t.type,t._source,g?g.type:null);I.setExtraStackFrame(S)}else I.setExtraStackFrame(null)}var C;C=!1;function W(t){return typeof t=="object"&&t!==null&&t.$$typeof===r}function K(){{if(o.current){var t=te(o.current.type);if(t)return`
-Check the render method of \``+t+"`."}return""}}function H(t){return""}var T={};function ae(t){{var g=K();if(!g){var S=typeof t=="string"?t:t.displayName||t.name;S&&(g=`
-Check the top-level render call using <`+S+">.")}return g}}function ie(t,g){{if(!t._store||t._store.validated||t.key!=null)return;t._store.validated=!0;var S=ae(g);if(T[S])return;T[S]=!0;var M="";t&&t._owner&&t._owner!==o.current&&(M=" It was passed a child from "+te(t._owner.type)+"."),O(t),k('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',S,M),O(null)}}function Re(t,g){{if(typeof t!="object")return;if(Ve(t))for(var S=0;S<t.length;S++){var M=t[S];W(M)&&ie(M,g)}else if(W(t))t._store&&(t._store.validated=!0);else if(t){var $=b(t);if(typeof $=="function"&&$!==t.entries)for(var Y=$.call(t),U;!(U=Y.next()).done;)W(U.value)&&ie(U.value,g)}}}function Ne(t){{var g=t.type;if(g==null||typeof g=="string")return;var S;if(typeof g=="function")S=g.propTypes;else if(typeof g=="object"&&(g.$$typeof===j||g.$$typeof===u))S=g.propTypes;else return;if(S){var M=te(g);st(S,t.props,"prop",M,t)}else if(g.PropTypes!==void 0&&!C){C=!0;var $=te(g);k("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",$||"Unknown")}typeof g.getDefaultProps=="function"&&!g.getDefaultProps.isReactClassApproved&&k("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function Oe(t){{for(var g=Object.keys(t.props),S=0;S<g.length;S++){var M=g[S];if(M!=="children"&&M!=="key"){O(t),k("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",M),O(null);break}}t.ref!==null&&(O(t),k("Invalid attribute `ref` supplied to `React.Fragment`."),O(null))}}var vt={};function jt(t,g,S,M,$,Y){{var U=X(t);if(!U){var V="";(t===void 0||typeof t=="object"&&t!==null&&Object.keys(t).length===0)&&(V+=" You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");var le=H();le?V+=le:V+=K();var q;t===null?q="null":Ve(t)?q="array":t!==void 0&&t.$$typeof===r?(q="<"+(te(t.type)||"Unknown")+" />",V=" Did you accidentally export a JSX literal instead of a component?"):q=typeof t,k("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",q,V)}var Z=we(t,g,S,$,Y);if(Z==null)return Z;if(U){var fe=g.children;if(fe!==void 0)if(M)if(Ve(fe)){for(var Qe=0;Qe<fe.length;Qe++)Re(fe[Qe],t);Object.freeze&&Object.freeze(fe)}else k("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 Re(fe,t)}if(be.call(g,"key")){var We=te(t),he=Object.keys(g).filter(function(Yt){return Yt!=="key"}),gt=he.length>0?"{key: someKey, "+he.join(": ..., ")+": ...}":"{key: someKey}";if(!vt[We+gt]){var Gt=he.length>0?"{"+he.join(": ..., ")+": ...}":"{}";k(`A props object containing a "key" prop is being spread into JSX:
+ */var te;function Qe(){return te||(te=1,process.env.NODE_ENV!=="production"&&function(){function f(u){if(u==null)return null;if(typeof u=="function")return u.$$typeof===Q?null:u.displayName||u.name||null;if(typeof u=="string")return u;switch(u){case F:return"Fragment";case J:return"Profiler";case j:return"StrictMode";case rt:return"Suspense";case M:return"SuspenseList";case lt: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 B:return"Portal";case $:return(u.displayName||"Context")+".Provider";case T:return(u._context.displayName||"Context")+".Consumer";case S:var I=u.render;return u=u.displayName,u||(u=I.displayName||I.name||"",u=u!==""?"ForwardRef("+u+")":"ForwardRef"),u;case ct:return I=u.displayName||null,I!==null?I:f(u.type)||"Memo";case O:I=u._payload,u=u._init;try{return f(u(I))}catch{}}return null}function o(u){return""+u}function a(u){try{o(u);var I=!1}catch{I=!0}if(I){I=console;var W=I.error,H=typeof Symbol=="function"&&Symbol.toStringTag&&u[Symbol.toStringTag]||u.constructor.name||"Object";return W.call(I,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",H),o(u)}}function d(u){if(u===F)return"<>";if(typeof u=="object"&&u!==null&&u.$$typeof===O)return"<...>";try{var I=f(u);return I?"<"+I+">":"<...>"}catch{return"<...>"}}function s(){var u=it.A;return u===null?null:u.getOwner()}function h(){return Error("react-stack-top-frame")}function g(u){if(P.call(u,"key")){var I=Object.getOwnPropertyDescriptor(u,"key").get;if(I&&I.isReactWarning)return!1}return u.key!==void 0}function l(u,I){function W(){st||(st=!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)",I))}W.isReactWarning=!0,Object.defineProperty(u,"key",{get:W,configurable:!0})}function n(){var u=f(this.type);return _[u]||(_[u]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),u=this.props.ref,u!==void 0?u:null}function C(u,I,W,H,G,Z,q,Y){return W=Z.ref,u={$$typeof:E,type:u,key:I,props:Z,_owner:G},(W!==void 0?W:null)!==null?Object.defineProperty(u,"ref",{enumerable:!1,get:n}):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:q}),Object.defineProperty(u,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:Y}),Object.freeze&&(Object.freeze(u.props),Object.freeze(u)),u}function N(u,I,W,H,G,Z,q,Y){var L=I.children;if(L!==void 0)if(H)if(at(L)){for(H=0;H<L.length;H++)D(L[H]);Object.freeze&&Object.freeze(L)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else D(L);if(P.call(I,"key")){L=f(u);var et=Object.keys(I).filter(function(zt){return zt!=="key"});H=0<et.length?"{key: someKey, "+et.join(": ..., ")+": ...}":"{key: someKey}",K[L+H]||(et=0<et.length?"{"+et.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} />`,gt,We,Gt,We),vt[We+gt]=!0}}return t===a?Oe(Z):Ne(Z),Z}}function Ut(t,g,S){return jt(t,g,S,!0)}function Wt(t,g,S){return jt(t,g,S,!1)}var $t=Wt,Jt=Ut;at.Fragment=a,at.jsx=$t,at.jsxs=Jt}()),at}var Ct;function cr(){return Ct||(Ct=1,process.env.NODE_ENV==="production"?dt.exports=ir():dt.exports=or()),dt.exports}var e=cr();const ar={primaryColor:"#f88300",primaryColorLight:"#6858c1",secondaryColor:"#005a53",tertiaryColor:"#FFFFFF"},lr="M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z",dr="M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z",pr="M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z",hr="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z",ur="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z",fr="M160 64c0-8.8 7.2-16 16-16s16 7.2 16 16V200c0 10.3 6.6 19.5 16.4 22.8s20.6-.1 26.8-8.3c3-3.9 7.6-6.4 12.8-6.4c8.8 0 16 7.2 16 16c0 10.3 6.6 19.5 16.4 22.8s20.6-.1 26.8-8.3c3-3.9 7.6-6.4 12.8-6.4c7.8 0 14.3 5.6 15.7 13c1.6 8.2 7.3 15.1 15.1 18s16.7 1.6 23.3-3.6c2.7-2.1 6.1-3.4 9.9-3.4c8.8 0 16 7.2 16 16l0 16V392c0 39.8-32.2 72-72 72H272 212.3h-.9c-37.4 0-72.4-18.7-93.2-49.9L50.7 312.9c-4.9-7.4-2.9-17.3 4.4-22.2s17.3-2.9 22.2 4.4L116 353.2c5.9 8.8 16.8 12.7 26.9 9.7s17-12.4 17-23V320 64zM176 0c-35.3 0-64 28.7-64 64V261.7C91.2 238 55.5 232.8 28.5 250.7C-.9 270.4-8.9 310.1 10.8 339.5L78.3 440.8c29.7 44.5 79.6 71.2 133.1 71.2h.9H272h56c66.3 0 120-53.7 120-120V288l0-16c0-35.3-28.7-64-64-64c-4.5 0-8.8 .5-13 1.3c-11.7-15.4-30.2-25.3-51-25.3c-6.9 0-13.5 1.1-19.7 3.1C288.7 170.7 269.6 160 248 160c-2.7 0-5.4 .2-8 .5V64c0-35.3-28.7-64-64-64zm48 304c0-8.8-7.2-16-16-16s-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304zm48-16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304c0-8.8-7.2-16-16-16zm80 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304z",xr="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z",gr="M160 0c17.7 0 32 14.3 32 32V67.7c1.6 .2 3.1 .4 4.7 .7c.4 .1 .7 .1 1.1 .2l48 8.8c17.4 3.2 28.9 19.9 25.7 37.2s-19.9 28.9-37.2 25.7l-47.5-8.7c-31.3-4.6-58.9-1.5-78.3 6.2s-27.2 18.3-29 28.1c-2 10.7-.5 16.7 1.2 20.4c1.8 3.9 5.5 8.3 12.8 13.2c16.3 10.7 41.3 17.7 73.7 26.3l2.9 .8c28.6 7.6 63.6 16.8 89.6 33.8c14.2 9.3 27.6 21.9 35.9 39.5c8.5 17.9 10.3 37.9 6.4 59.2c-6.9 38-33.1 63.4-65.6 76.7c-13.7 5.6-28.6 9.2-44.4 11V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V445.1c-.4-.1-.9-.1-1.3-.2l-.2 0 0 0c-24.4-3.8-64.5-14.3-91.5-26.3c-16.1-7.2-23.4-26.1-16.2-42.2s26.1-23.4 42.2-16.2c20.9 9.3 55.3 18.5 75.2 21.6c31.9 4.7 58.2 2 76-5.3c16.9-6.9 24.6-16.9 26.8-28.9c1.9-10.6 .4-16.7-1.3-20.4c-1.9-4-5.6-8.4-13-13.3c-16.4-10.7-41.5-17.7-74-26.3l-2.8-.7 0 0C119.4 279.3 84.4 270 58.4 253c-14.2-9.3-27.5-22-35.8-39.6c-8.4-17.9-10.1-37.9-6.1-59.2C23.7 116 52.3 91.2 84.8 78.3c13.3-5.3 27.9-8.9 43.2-11V32c0-17.7 14.3-32 32-32z",St="M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z",kt="M234.5 5.7c13.9-5 29.1-5 43.1 0l192 68.6C495 83.4 512 107.5 512 134.6V377.4c0 27-17 51.2-42.5 60.3l-192 68.6c-13.9 5-29.1 5-43.1 0l-192-68.6C17 428.6 0 404.5 0 377.4V134.6c0-27 17-51.2 42.5-60.3l192-68.6zM256 66L82.3 128 256 190l173.7-62L256 66zm32 368.6l160-57.1v-188L288 246.6v188z",mt="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z",Nt="M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z",mr="M184 48H328c4.4 0 8 3.6 8 8V96H176V56c0-4.4 3.6-8 8-8zm-56 8V96H64C28.7 96 0 124.7 0 160v96H192 352h8.2c32.3-39.1 81.1-64 135.8-64c5.4 0 10.7 .2 16 .7V160c0-35.3-28.7-64-64-64H384V56c0-30.9-25.1-56-56-56H184c-30.9 0-56 25.1-56 56zM320 352H224c-17.7 0-32-14.3-32-32V288H0V416c0 35.3 28.7 64 64 64H360.2C335.1 449.6 320 410.5 320 368c0-5.4 .2-10.7 .7-16l-.7 0zm320 16a144 144 0 1 0 -288 0 144 144 0 1 0 288 0zM496 288c8.8 0 16 7.2 16 16v48h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H496c-8.8 0-16-7.2-16-16V304c0-8.8 7.2-16 16-16z",vr="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.7 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z",jr="M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z",br="M54.2 202.9C123.2 136.7 216.8 96 320 96s196.8 40.7 265.8 106.9c12.8 12.2 33 11.8 45.2-.9s11.8-33-.9-45.2C549.7 79.5 440.4 32 320 32S90.3 79.5 9.8 156.7C-2.9 169-3.3 189.2 8.9 202s32.5 13.2 45.2 .9zM320 256c56.8 0 108.6 21.1 148.2 56c13.3 11.7 33.5 10.4 45.2-2.8s10.4-33.5-2.8-45.2C459.8 219.2 393 192 320 192s-139.8 27.2-190.5 72c-13.3 11.7-14.5 31.9-2.8 45.2s31.9 14.5 45.2 2.8c39.5-34.9 91.3-56 148.2-56zm64 160a64 64 0 1 0 -128 0 64 64 0 1 0 128 0z",Ot="M123.6 391.3c12.9-9.4 29.6-11.8 44.6-6.4c26.5 9.6 56.2 15.1 87.8 15.1c124.7 0 208-80.5 208-160s-83.3-160-208-160S48 160.5 48 240c0 32 12.4 62.8 35.7 89.2c8.6 9.7 12.8 22.5 11.8 35.5c-1.4 18.1-5.7 34.7-11.3 49.4c17-7.9 31.1-16.7 39.4-22.7zM21.2 431.9c1.8-2.7 3.5-5.4 5.1-8.1c10-16.6 19.5-38.4 21.4-62.9C17.7 326.8 0 285.1 0 240C0 125.1 114.6 32 256 32s256 93.1 256 208s-114.6 208-256 208c-37.1 0-72.3-6.4-104.1-17.9c-11.9 8.7-31.3 20.6-54.3 30.6c-15.1 6.6-32.3 12.6-50.1 16.1c-.8 .2-1.6 .3-2.4 .5c-4.4 .8-8.7 1.5-13.2 1.9c-.2 0-.5 .1-.7 .1c-5.1 .5-10.2 .8-15.3 .8c-6.5 0-12.3-3.9-14.8-9.9c-2.5-6-1.1-12.8 3.4-17.4c4.1-4.2 7.8-8.7 11.3-13.5c1.7-2.3 3.3-4.6 4.8-6.9c.1-.2 .2-.3 .3-.5z",At="M0 24C0 10.7 10.7 0 24 0H69.5c22 0 41.5 12.8 50.6 32h411c26.3 0 45.5 25 38.6 50.4l-41 152.3c-8.5 31.4-37 53.3-69.5 53.3H170.7l5.4 28.5c2.2 11.3 12.1 19.5 23.6 19.5H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H199.7c-34.6 0-64.3-24.6-70.7-58.5L77.4 54.5c-.7-3.8-4-6.5-7.9-6.5H24C10.7 48 0 37.3 0 24zM128 464a48 48 0 1 1 96 0 48 48 0 1 1 -96 0zm336-48a48 48 0 1 1 0 96 48 48 0 1 1 0-96z",It="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z",Et="M215.7 499.2C267 435 384 279.4 384 192C384 86 298 0 192 0S0 86 0 192c0 87.4 117 243 168.3 307.2c12.3 15.3 35.1 15.3 47.4 0zM192 128a64 64 0 1 1 0 128 64 64 0 1 1 0-128z",Tt="M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z",yr="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z",zt="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z",Mt="M0 336c0 79.5 64.5 144 144 144H512c70.7 0 128-57.3 128-128c0-61.9-44-113.6-102.4-125.4c4.1-10.7 6.4-22.4 6.4-34.6c0-53-43-96-96-96c-19.7 0-38.1 6-53.3 16.2C367 64.2 315.3 32 256 32C167.6 32 96 103.6 96 192c0 2.7 .1 5.4 .2 8.1C40.2 219.8 0 273.2 0 336z",Rt="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM164.1 325.5C182 346.2 212.6 368 256 368s74-21.8 91.9-42.5c5.8-6.7 15.9-7.4 22.6-1.6s7.4 15.9 1.6 22.6C349.8 372.1 311.1 400 256 400s-93.8-27.9-116.1-53.5c-5.8-6.7-5.1-16.8 1.6-22.6s16.8-5.1 22.6 1.6zM144.4 208a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm192-32a32 32 0 1 1 0 64 32 32 0 1 1 0-64z",Lt="M48 256C48 141.1 141.1 48 256 48c63.1 0 119.6 28.1 157.8 72.5c8.6 10.1 23.8 11.2 33.8 2.6s11.2-23.8 2.6-33.8C403.3 34.6 333.7 0 256 0C114.6 0 0 114.6 0 256v40c0 13.3 10.7 24 24 24s24-10.7 24-24V256zm458.5-52.9c-2.7-13-15.5-21.3-28.4-18.5s-21.3 15.5-18.5 28.4c2.9 13.9 4.5 28.3 4.5 43.1v40c0 13.3 10.7 24 24 24s24-10.7 24-24V256c0-18.1-1.9-35.8-5.5-52.9zM256 80c-19 0-37.4 3-54.5 8.6c-15.2 5-18.7 23.7-8.3 35.9c7.1 8.3 18.8 10.8 29.4 7.9c10.6-2.9 21.8-4.4 33.4-4.4c70.7 0 128 57.3 128 128v24.9c0 25.2-1.5 50.3-4.4 75.3c-1.7 14.6 9.4 27.8 24.2 27.8c11.8 0 21.9-8.6 23.3-20.3c3.3-27.4 5-55 5-82.7V256c0-97.2-78.8-176-176-176zM150.7 148.7c-9.1-10.6-25.3-11.4-33.9-.4C93.7 178 80 215.4 80 256v24.9c0 24.2-2.6 48.4-7.8 71.9C68.8 368.4 80.1 384 96.1 384c10.5 0 19.9-7 22.2-17.3c6.4-28.1 9.7-56.8 9.7-85.8V256c0-27.2 8.5-52.4 22.9-73.1c7.2-10.4 8-24.6-.2-34.2zM256 160c-53 0-96 43-96 96v24.9c0 35.9-4.6 71.5-13.8 106.1c-3.8 14.3 6.7 29 21.5 29c9.5 0 17.9-6.2 20.4-15.4c10.5-39 15.9-79.2 15.9-119.7V256c0-28.7 23.3-52 52-52s52 23.3 52 52v24.9c0 36.3-3.5 72.4-10.4 107.9c-2.7 13.9 7.7 27.2 21.8 27.2c10.2 0 19-7 21-17c7.7-38.8 11.6-78.3 11.6-118.1V256c0-53-43-96-96-96zm24 96c0-13.3-10.7-24-24-24s-24 10.7-24 24v24.9c0 59.9-11 119.3-32.5 175.2l-5.9 15.3c-4.8 12.4 1.4 26.3 13.8 31s26.3-1.4 31-13.8l5.9-15.3C267.9 411.9 280 346.7 280 280.9V256z",wr="M315.4 15.5C309.7 5.9 299.2 0 288 0s-21.7 5.9-27.4 15.5l-96 160c-5.9 9.9-6.1 22.2-.4 32.2s16.3 16.2 27.8 16.2H384c11.5 0 22.2-6.2 27.8-16.2s5.5-22.3-.4-32.2l-96-160zM288 312V456c0 22.1 17.9 40 40 40H472c22.1 0 40-17.9 40-40V312c0-22.1-17.9-40-40-40H328c-22.1 0-40 17.9-40 40zM128 512a128 128 0 1 0 0-256 128 128 0 1 0 0 256z",Cr="M116.7 219.4a15.7 15.7 0 0 0 22.7 0l96.8-99.8c28.2-29 26.5-77.1-4.9-103.9C203.8-7.7 163-3.5 137.9 22.4L128 32.6l-9.9-10.1C93.1-3.5 52.3-7.7 24.9 15.6c-31.4 26.8-33 74.9-5 103.9zm143.9 100.5h-48l-7.1-14.2a27.4 27.4 0 0 0 -25.7-17.8h-71.7a27.4 27.4 0 0 0 -25.7 17.8l-7 14.2h-48A27.5 27.5 0 0 0 0 347.3v137.3A27.4 27.4 0 0 0 27.4 512h233.1A27.5 27.5 0 0 0 288 484.6V347.3a27.5 27.5 0 0 0 -27.4-27.5zM144 468a52 52 0 1 1 52-52 52 52 0 0 1 -52 52zm355.4-115.9h-60.6l22.4-50.8c2.1-6.7-3.9-13.2-12.2-13.2h-75.6c-6.3 0-11.7 3.9-12.5 9.1l-16.8 106.9c-1 6.3 4.9 11.9 12.5 11.9h62.3l-24.2 83c-1.9 6.7 4.2 12.9 12.2 12.9a13.3 13.3 0 0 0 10.9-5.3l92.4-138.9c4.9-6.9-1.2-15.7-10.9-15.7zM478.1 .3L329.5 23.2C314.9 25.4 304 38.9 304 54.8V161.6a83.3 83.3 0 0 0 -16-1.7c-35.4 0-64 21.5-64 48s28.7 48 64 48c35.2 0 63.7-21.3 64-47.7V99.7l112-17.2v47.2a83.3 83.3 0 0 0 -16-1.7c-35.4 0-64 21.5-64 48s28.7 48 64 48c35.2 0 63.7-21.3 64-47.7V32c0-19.5-16-34.4-33.9-31.7z",Sr="M432 416h-23.4L277.9 53.7A32 32 0 0 0 247.6 32h-47.2a32 32 0 0 0 -30.3 21.7L39.4 416H16a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16h-19.6l23.3-64h152.6l23.3 64H304a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16zM176.9 272L224 142.5 271.2 272z",kr="M464 32H336c-26.5 0-48 21.5-48 48v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48zm-288 0H48C21.5 32 0 53.5 0 80v128c0 26.5 21.5 48 48 48h80v64c0 35.3-28.7 64-64 64h-8c-13.3 0-24 10.7-24 24v48c0 13.3 10.7 24 24 24h8c88.4 0 160-71.6 160-160V80c0-26.5-21.5-48-48-48z",Nr="M608 0H160a32 32 0 0 0 -32 32v96h160V64h192v320h128a32 32 0 0 0 32-32V32a32 32 0 0 0 -32-32zM232 103a9 9 0 0 1 -9 9h-30a9 9 0 0 1 -9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm352 208a9 9 0 0 1 -9 9h-30a9 9 0 0 1 -9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1 -9 9h-30a9 9 0 0 1 -9-9v-30a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm0-104a9 9 0 0 1 -9 9h-30a9 9 0 0 1 -9-9V73a9 9 0 0 1 9-9h30a9 9 0 0 1 9 9zm-168 57H32a32 32 0 0 0 -32 32v288a32 32 0 0 0 32 32h384a32 32 0 0 0 32-32V192a32 32 0 0 0 -32-32zM96 224a32 32 0 1 1 -32 32 32 32 0 0 1 32-32zm288 224H64v-32l64-64 32 32 128-128 96 96z",Or="M0 224h192V32H0v192zM64 96h64v64H64V96zm192-64v192h192V32H256zm128 128h-64V96h64v64zM0 480h192V288H0v192zm64-128h64v64H64v-64zm352-64h32v128h-96v-32h-32v96h-64V288h96v32h64v-32zm0 160h32v32h-32v-32zm-64 0h32v32h-32v-32z",Ar="M0 448V64h18v384H0zm26.9-.3V64H36v383.7h-9.1zm27.1 0V64h8.9v383.7H54zm44.9 0V64h8.9v383.7h-8.9zm36 0V64h17.7v383.7h-17.7zm44.9 0V64h8.9v383.7h-8.9zm18 0V64h8.9v383.7h-8.9zm18 0V64h8.9v383.7h-8.9zm35.7 0V64h18v383.7h-18zm44.9 0V64h18v383.7h-18zm36 0V64h18v383.7h-18zm36 0V64h18v383.7h-18zm26.9 0V64h18v383.7h-18zm45.1 0V64h26.9v383.7h-26.9zm35.7 0V64h9.1v383.7H476zm18 .3V64h18v384h-18z",Ir="M0 180V56c0-13.3 10.7-24 24-24h124c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H64v84c0 6.6-5.4 12-12 12H12c-6.6 0-12-5.4-12-12zM288 44v40c0 6.6 5.4 12 12 12h84v84c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12V56c0-13.3-10.7-24-24-24H300c-6.6 0-12 5.4-12 12zm148 276h-40c-6.6 0-12 5.4-12 12v84h-84c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h124c13.3 0 24-10.7 24-24V332c0-6.6-5.4-12-12-12zM160 468v-40c0-6.6-5.4-12-12-12H64v-84c0-6.6-5.4-12-12-12H12c-6.6 0-12 5.4-12 12v124c0 13.3 10.7 24 24 24h124c6.6 0 12-5.4 12-12z",Dt="M32 464a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128H32zm272-256a16 16 0 0 1 32 0v224a16 16 0 0 1 -32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1 -32 0zm-96 0a16 16 0 0 1 32 0v224a16 16 0 0 1 -32 0zM432 32H312l-9.4-18.7A24 24 0 0 0 281.1 0H166.8a23.7 23.7 0 0 0 -21.4 13.3L136 32H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0 -16-16z",Er="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z",Tr="M576 128c0-35.3-28.7-64-64-64H205.3c-17 0-33.3 6.7-45.3 18.7L9.4 233.4c-6 6-9.4 14.1-9.4 22.6s3.4 16.6 9.4 22.6L160 429.3c12 12 28.3 18.7 45.3 18.7H512c35.3 0 64-28.7 64-64V128zM271 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z",zr="M 6 3.6 V 0 L 0 6 l 6 6 V 8 c 6 -0.27 7.53 3.76 7.88 5.77 a 0.27 0.27 0 0 0 0.53 0 C 17.08 2.86 6 3.6 6 3.6 Z",Mr="M352 224c53 0 96-43 96-96s-43-96-96-96s-96 43-96 96c0 4 .2 8 .7 11.9l-94.1 47C145.4 170.2 121.9 160 96 160c-53 0-96 43-96 96s43 96 96 96c25.9 0 49.4-10.2 66.6-26.9l94.1 47c-.5 3.9-.7 7.8-.7 11.9c0 53 43 96 96 96s96-43 96-96s-43-96-96-96c-25.9 0-49.4 10.2-66.6 26.9l-94.1-47c.5-3.9 .7-7.8 .7-11.9s-.2-8-.7-11.9l94.1-47C302.6 213.8 326.1 224 352 224z",Rr="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z",Lr="M254 52.8C249.3 40.3 237.3 32 224 32s-25.3 8.3-30 20.8L57.8 416 32 416c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-1.8 0 18-48 159.6 0 18 48-1.8 0c-17.7 0-32 14.3-32 32s14.3 32 32 32l96 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-25.8 0L254 52.8zM279.8 304l-111.6 0L224 155.1 279.8 304z",_r="M448 256c0-106-86-192-192-192l0 384c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z",Br="M256 0L576 0c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64l-320 0c-35.3 0-64-28.7-64-64l0-224c0-35.3 28.7-64 64-64zM476 106.7C471.5 100 464 96 456 96s-15.5 4-20 10.7l-56 84L362.7 169c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6l80 0 48 0 144 0c8.9 0 17-4.9 21.2-12.7s3.7-17.3-1.2-24.6l-96-144zM336 96a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM64 128l96 0 0 256 0 32c0 17.7 14.3 32 32 32l128 0c17.7 0 32-14.3 32-32l0-32 160 0 0 64c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 192c0-35.3 28.7-64 64-64zm8 64c-8.8 0-16 7.2-16 16l0 16c0 8.8 7.2 16 16 16l16 0c8.8 0 16-7.2 16-16l0-16c0-8.8-7.2-16-16-16l-16 0zm0 104c-8.8 0-16 7.2-16 16l0 16c0 8.8 7.2 16 16 16l16 0c8.8 0 16-7.2 16-16l0-16c0-8.8-7.2-16-16-16l-16 0zm0 104c-8.8 0-16 7.2-16 16l0 16c0 8.8 7.2 16 16 16l16 0c8.8 0 16-7.2 16-16l0-16c0-8.8-7.2-16-16-16l-16 0zm336 16l0 16c0 8.8 7.2 16 16 16l16 0c8.8 0 16-7.2 16-16l0-16c0-8.8-7.2-16-16-16l-16 0c-8.8 0-16 7.2-16 16z",Dr="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM184 232l144 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-144 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z",Fr="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z",Ft="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z",Hr="M134.1 296H436c6.6 0 12-5.4 12-12v-56c0-6.6-5.4-12-12-12H134.1v-46.1c0-21.4-25.9-32.1-41-17L7 239c-9.4 9.4-9.4 24.6 0 33.9l86.1 86.1c15.1 15.1 41 4.4 41-17V296z",Pr="apcDB",Ae="APCObjectStore",Vr=1;function ht(){return new Promise((m,r)=>{const n=indexedDB.open(Pr,Vr);n.onupgradeneeded=function(a){let l=a.target.result,d;l.objectStoreNames.contains(Ae)?d=n.transaction.objectStore(Ae):d=l.createObjectStore(Ae,{keyPath:"id"}),d.indexNames.contains("nameIndex")||d.createIndex("nameIndex","name",{unique:!1})},n.onsuccess=function(a){m(a.target.result)},n.onerror=function(a){r("Database error: "+a.target.errorCode)}})}function $e(m,r,n,a){return ht().then(l=>new Promise((d,x)=>{const p=l.transaction(["APCObjectStore"],"readwrite"),j=p.objectStore("APCObjectStore"),c={id:m,classification:r,content:n,misc:a},v=j.put(c);v.onsuccess=()=>d(v.result),v.onerror=()=>x(v.error),p.oncomplete=()=>l.close()}))}function et(m){return ht().then(r=>new Promise((n,a)=>{const l=r.transaction([Ae],"readonly"),x=l.objectStore(Ae).get(m);x.onsuccess=()=>n(x.result),x.onerror=()=>a(x.error),l.oncomplete=()=>r.close()}))}function Ur(m){return ht().then(r=>new Promise((n,a)=>{const l=r.transaction([Ae],"readwrite"),x=l.objectStore(Ae).delete(m);x.onsuccess=()=>n(),x.onerror=()=>a(x.error),l.oncomplete=()=>r.close()}))}function Le(m=null){return ht().then(r=>new Promise((n,a)=>{const l=r.transaction([Ae],"readonly"),x=l.objectStore(Ae).openCursor(),p=[];x.onsuccess=j=>{const c=j.target.result;c?((!m||m(c.value))&&p.push(c.value),c.continue()):n(p)},x.onerror=j=>{a("Failed to retrieve items: "+j.target.errorCode)},l.oncomplete=()=>{r.close()}}))}function Wr(m){const{currentTabNo:r,theme:n,apcCanvasInstance:a,apiEndpoint:l,reloadTabs:d,updateActiveSection:x,initCategory:p,initInstance:j,apiKey:c,setActiveTab:v}=m,[u,w]=h.useState(),[i,y]=h.useState(p||"Hats"),[f,b]=h.useState(!1),[s,k]=h.useState(),_=`${l}/api/v1/designer`;h.useEffect(()=>{z()},[]),h.useEffect(()=>{a&&j&&j.fabricID&&L(j.fabricID)},[j]);const z=()=>{b(!0);const R=`${_}/search-designs-images/${i}`;Ce.get(R).then(E=>{b(!1),E.data.object.length>0?w(E.data):k("No matching results found")}).catch(E=>{b(!1),console.error("Error fetching data:",E)})},L=R=>{const E=_+"/find-public-design/"+R;Ce.get(E).then(P=>{const{object:X}=P==null?void 0:P.data;X&&(window.location.href=`/design-center/${X.pdid}`)}).catch(P=>{console.error("Error fetching data:",P)})},F=()=>u?u.object.map((R,E)=>e.jsx(h.Fragment,{children:e.jsxs("div",{style:{position:"relative",backgroundColor:"#ffffff",boxShadow:"0 4px 8px rgba(0, 0, 0, 0.1)",borderRadius:"2px",overflow:"hidden",marginBottom:"9px"},tabIndex:0,className:"apc-mpx-widget-responsive-image-container",onClick:()=>L(R.fabricID),children:[e.jsxs("div",{style:{position:"absolute",top:0,right:0,backgroundColor:n.secondaryColor,padding:"5px",zIndex:1,color:"#ffffff"},children:["$",R.product.price]}),e.jsx("img",{src:R.imageURL,alt:R.description,className:"apc-mpx-widget-responsive-image"}),e.jsx("div",{children:R.product.name})]})},E)):null;return e.jsxs(h.Fragment,{children:[e.jsx("br",{}),e.jsxs("div",{style:{display:"flex",flexDirection:"row"},children:[e.jsx("div",{children:e.jsx("input",{placeholder:"Search templates",type:"text",onChange:R=>y(R.target.value),className:"apc-mpc-widget-input",style:{border:`solid 3px ${n.primaryColor}`,height:"40px"}})}),e.jsx("div",{children:e.jsx("button",{className:"apc-mpc-widget-btn",onClick:()=>z(),style:{backgroundColor:n.primaryColor,color:"#ffffff",height:"35px"},children:f?"...Processing":"Search"})})]}),s?e.jsxs("div",{style:{color:"orangered",fontWeight:"bold"},children:[e.jsx("br",{}),s]}):null,e.jsx("br",{})," ",e.jsx("br",{})," ",e.jsx("br",{}),F()]})}const $r={fontFamily:"Arial",fontSize:"40px",color:"transparent",background:"linear-gradient(to bottom, red 0%, yellow 100%)",WebkitBackgroundClip:"text",backgroundClip:"text",cursor:"pointer"},Jr={fontFamily:"comic sans ms",fontSize:"40px",color:"#000",width:"300px",textShadow:`
-      -1px -1px 0 #ff0000,
-      1px -1px 0 #ff0000,
-      -1px 1px 0 #ff0000,
-      1px 1px 0 #ff0000`,cursor:"pointer"},Gr={fontFamily:"Arial",fontSize:"40px",color:"#000",width:"300px",transform:"skewX(20deg) skewY(10deg)",textAlign:"center",cursor:"pointer"},Yr={fontFamily:"Arial",fontSize:"40px",color:"#000",textShadow:"0 0 10px green",textAlign:"center",cursor:"pointer"},Kr={fontFamily:"Arial",fontSize:"40px",color:"#000",backgroundColor:"orange",borderRadius:"5px",cursor:"pointer"},Xr={color:"black",fontSize:"40px",opacity:"0.5",fontFamily:"Arial, sans-serif",cursor:"pointer"};function qr(m){const{apcCanvasInstance:r,isMobile:n,closeMobileModalSecondaryPanel:a}=m,l=(i,y)=>{const f=new B.fabric.Textbox("Stay Humble!",{width:300,left:200,top:200,fontFamily:i,fill:y,hasControls:!0});r.add(f),r.setActiveObject(f),n&&a(!0)},d=({primaryTextLabel:i,primaryTextFontFamily:y,primaryTextColor:f,secondaryTextLabel:b,SecondaryTextFontFamily:s,secondaryTextColor:k})=>{const _=new B.fabric.Textbox(i,{fontFamily:y,width:300,left:200,top:200,fill:f}),z=new B.fabric.Textbox(b,{fontFamily:s,fill:k,fontSize:12,width:150});z.top=_.top+_.height+10,z.left=_.left,r.add(_),r.add(z),r.setActiveObject(_),n&&a(!0)},x=(i,y)=>{const f=new B.fabric.Textbox("Adventure Awaits!",{width:300,left:200,top:200,fontFamily:i,fill:y}),b={color:"rgba(0,0,0,0.5)",blur:10,offsetX:5,offsetY:5};f.shadow=b,r.add(f),r.setActiveObject(f),n&&a(!0)},p=()=>{const i=new B.fabric.Textbox("Love More",{left:100,top:100,width:300,fontFamily:"Arial",fill:new B.fabric.Gradient({type:"linear",gradientUnits:"pixels",coords:{x1:0,y1:0,x2:0,y2:50},colorStops:[{offset:0,color:"red"},{offset:1,color:"yellow"}]})});r.add(i),r.setActiveObject(i),n&&a(!0)},j=()=>{const i=new B.fabric.Textbox("Good Vibes Only",{left:150,top:150,fontFamily:"comic sans ms",fontSize:40,width:300,fill:"#000",stroke:"#ff0000",strokeWidth:2});r.add(i),r.setActiveObject(i),n&&a(!0)},c=()=>{const i=new B.fabric.Textbox("Dream Big",{left:300,top:300,width:300,fontFamily:"Arial",fill:"#000",skewX:20,skewY:10});r.add(i),r.setActiveObject(i),n&&a(!0)},v=()=>{const i=new B.fabric.Textbox("Choose Joy",{left:350,top:350,fontFamily:"Arial",fill:"#000",opacity:.5});r.add(i),r.setActiveObject(i),n&&a(!0)},u=()=>{const i=new B.fabric.Textbox("Find Your Fire",{left:550,top:550,fontFamily:"Arial",fill:"#000",shadow:"yellow 0 0 10px"});r.add(i),r.setActiveObject(i),n&&a(!0)},w=()=>{const i=new B.fabric.Textbox("Be Kind",{left:650,top:650,fontFamily:"Arial",fill:"#000",backgroundColor:"orange"});r.add(i),r.setActiveObject(i),n&&a(!0)};return e.jsx(h.Fragment,{children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:8},children:[e.jsx("div",{style:{fontSize:"20px",cursor:"pointer"},onClick:()=>l("Arial, sans-serif","#6a45d2"),children:e.jsx("span",{style:{color:"#6a45d2",fontFamily:"Arial, sans-serif",fontSize:"30px"},children:"Stay Humble "})}),e.jsx("div",{style:{fontSize:"20px",cursor:"pointer"},onClick:()=>d({primaryTextLabel:"Life is full of",primaryTextFontFamily:"Rock Salt, cursive",primaryTextColor:"black",secondaryTextLabel:"surprises",SecondaryTextFontFamily:"Arial, sans-serif",secondaryTextColor:"black"}),children:e.jsxs("span",{style:{color:"black",fontFamily:"Rock Salt, cursive",fontSize:"30px"},children:["Life is full of ",e.jsx("div",{style:{fontFamily:"Arial, sans-serif",fontSize:"14px"},children:"surprises"})," "]})}),e.jsx("div",{style:{fontSize:"20px",cursor:"pointer",paddingLeft:"20px"},onClick:()=>d({primaryTextLabel:"You are invited!",primaryTextFontFamily:"Bilbao Swash Caps",primaryTextColor:"green",secondaryTextLabel:"Taste the best wines from the best makers",SecondaryTextFontFamily:"Arial, sans-serif",secondaryTextColor:"green"}),children:e.jsxs("span",{style:{color:"green",fontFamily:"Bilbao Swash Caps",fontSize:"30px"},children:["You are invited! ",e.jsx("div",{style:{color:"green",fontFamily:"Arial, sans-serif",fontSize:"14px",textAlign:"right"},children:"Taste the best wines from the best makers"})," "]})}),e.jsx("div",{style:{fontSize:"20px",cursor:"pointer",paddingLeft:"20px"},onClick:()=>x("aclonica","#6a45d2"),children:e.jsx("span",{style:{color:"#6a45d2",fontFamily:"aclonica",fontSize:"30px",textShadow:"2px 2px 4px rgba(0, 0, 0, 2)"},children:"Adventure Awaits "})}),e.jsx("div",{onClick:()=>p(),style:$r,children:"Love More"}),e.jsx("div",{onClick:()=>j(),style:Jr,children:"Good Vibes Only"}),e.jsx("div",{onClick:()=>c(),style:Gr,children:"Dream Big"}),e.jsx("div",{onClick:()=>u(),style:Yr,children:"Find Your Fire"}),e.jsx("div",{onClick:()=>w(),style:Kr,children:"Be Kind"}),e.jsx("div",{onClick:()=>v(),style:Xr,children:"Choose Joy"})]})})}const Ht=async m=>{try{const n=await(await fetch(m)).blob();return new Promise((a,l)=>{const d=new FileReader;d.onloadend=()=>a(d.result),d.onerror=l,d.readAsDataURL(n)})}catch(r){throw console.error("Error converting image to base64:",r),r}};function Qr({apcCanvasInstance:m,theme:r}){const[n,a]=h.useState(!1),l=c=>{const v=c.target.files[0];if(v){const u=new FileReader;u.onload=w=>x(w.target.result),u.readAsDataURL(v)}},d=c=>{c.preventDefault(),a(!1);const v=c.dataTransfer.files[0];if(v){const u=new FileReader;u.onload=w=>x(w.target.result),u.readAsDataURL(v)}},x=c=>{B.fabric.Image.fromURL(c,v=>{v.set({left:100,top:100,scaleX:.5,scaleY:.5}),m.add(v)})},p=c=>{c.preventDefault(),a(!0)},j=()=>{a(!1)};return e.jsxs("div",{style:{border:n?"2px dashed #4CAF50":"2px dashed #ccc",padding:"40px",margin:"20px",borderRadius:"10px",textAlign:"center",backgroundColor:n?"#f0fff4":"#f9f9f9",transition:"background-color 0.3s",cursor:"pointer",position:"relative"},onDragOver:p,onDragLeave:j,onDrop:d,onClick:()=>document.getElementById("file-input").click(),children:[e.jsx("input",{type:"file",accept:"image/*",style:{display:"none"},id:"file-input",onChange:l}),e.jsxs("div",{style:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:n?"#4CAF50":"#ccc",fontSize:"48px"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"18",viewBox:"0 0 512 512",style:{fill:r.primaryColor},children:e.jsx("path",{d:Ft})}),e.jsx("br",{})," ",e.jsx("br",{})]}),e.jsx("label",{htmlFor:"file-input",style:{display:"block",marginTop:"80px",fontSize:"16px",color:"#333"},children:"Click or drag & drop to upload an image"}),e.jsx("div",{style:{fontSize:"12px",color:"#888"},children:"Supports PNG, JPG, WEBP formats"})]})}function ut(m){const{featureText:r,theme:n,featureName:a}=m;return 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:a??"Premium Feature Access"}),e.jsx("p",{style:{color:"#555",fontSize:"15px",lineHeight:"1.5",marginBottom:"20px"},children:r??"This advanced feature requires a premium subscription to access."}),e.jsxs("a",{href:"https://mypixia.com/developer",target:"_blank",rel:"noopener noreferrer",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:n.primaryColor,color:"white",padding:"10px 20px",borderRadius:"4px",textDecoration:"none",fontWeight:"500",transition:"background-color 0.2s ease"},onMouseOver:l=>l.currentTarget.style.backgroundColor="#3a45bf",onMouseOut:l=>l.currentTarget.style.backgroundColor="#4c5bf2",children:[e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{marginRight:"8px"},children:[e.jsx("path",{d:"M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z"}),e.jsx("path",{d:"M12 8v8"}),e.jsx("path",{d:"M8 12h8"})]}),"Get API Key"]}),e.jsx("p",{style:{fontSize:"13px",color:"#777",marginTop:"16px"},children:"Unlock premium design features to create your perfect custom product"})]})}function ft(){return e.jsxs("div",{className:"loading-container",children:[e.jsxs("div",{className:"spinner",children:[e.jsx("div",{className:"spinner-circle"}),e.jsx("div",{className:"spinner-circle-inner"})]}),e.jsx("p",{className:"loading-text",children:"Loading..."})]})}function Zr(m){const{apcCanvasInstance:r,theme:n,apiKey:a,apiEndpoint:l,isMobile:d,closeMobileModalSecondaryPanel:x}=m,[p,j]=h.useState("flowers"),[c,v]=h.useState(!1),[u,w]=h.useState(),[i,y]=h.useState(!1),[f,b]=h.useState(!1),s=sessionStorage.getItem("apc_x_sub_status"),k=`${l}/api/v1/designer`;h.useEffect(()=>{z()},[]),h.useEffect(()=>{(async()=>{s==="active"?(y(!0),b(!0)):(v(!0),await _())})()},[]);const _=()=>{v(!0);const E=`${k}/get-subscription-status/${a}`;Ce.get(E).then(P=>{P.data.object&&P.data.object==="active"&&(sessionStorage.setItem("apc_x_sub_status","active"),y(!0))}).catch(P=>{sessionStorage.setItem("apc_x_sub_status","")}).finally(()=>{v(!1),b(!0)})},z=()=>{v(!0);const E={"X-Api-Key":a},P=`${k}/get-images/${p}`;Ce.get(P,{headers:E}).then(X=>{var Q;v(!1),w((Q=X.data)==null?void 0:Q.object)}).catch(X=>{console.error("Error fetching data:",X),v(!1)})},L=async E=>{const P=await Ht(E);P&&B.fabric.Image.fromURL(P,X=>{X.set({left:0,top:0,scaleX:.3,scaleY:.3}),r.add(X)}),d&&x(!0)},F=()=>u?e.jsx("div",{children:u.map(E=>e.jsx("div",{onClick:()=>L(E.urls.regular),style:{cursor:"pointer"},children:e.jsx("img",{height:300,width:300,src:E.urls.regular,alt:E.description||"No description"})},E.id))}):null,R=()=>!i&&!c&&f?e.jsx(ut,{theme:n,isPartial:!0,featureName:"AI image generation or search"}):i&&!c&&f?e.jsxs("div",{children:[e.jsx("strong",{children:"- OR -"}),e.jsxs("div",{children:[e.jsx("input",{type:"text",onChange:E=>j(E.target.value),className:"apc-mpc-widget-input",style:{border:`solid 3px ${n.primaryColor}`}}),e.jsx("br",{})," ",e.jsx("br",{}),e.jsx("button",{className:"apc-mpc-widget-btn",onClick:()=>z(),style:{backgroundColor:n.primaryColor,color:"#ffffff"},children:c?"...Processing":"Search"})]}),e.jsx("br",{}),e.jsx("br",{}),F()]}):e.jsx(ft,{});return e.jsxs(h.Fragment,{children:[e.jsx("br",{}),e.jsx("br",{}),e.jsx(Qr,{apcCanvasInstance:r,theme:n}),e.jsx("br",{}),e.jsx("br",{}),R()]})}function _t(m){const{apcCanvasInstance:r,theme:n,isMobile:a,closeMobileModalSecondaryPanel:l}=m,d=b=>{const s=new B.fabric.Rect({width:100,height:60,left:200,top:200,fill:"",stroke:n.primaryColor});r.add(s),r.setActiveObject(s),a&&l(!0)},x=b=>{const s=new B.fabric.Circle({radius:30,fill:"",stroke:n.primaryColor,left:200,top:200});r.add(s),r.setActiveObject(s),a&&l(!0)},p=b=>{const s=new B.fabric.Triangle({width:40,height:50,fill:"",stroke:n.primaryColor,left:200,top:200});r.add(s),r.setActiveObject(s),a&&l(!0)},j=b=>{const s=new B.fabric.Line([50,10,250,10],{fill:"",stroke:n.primaryColor,left:200,top:200});r.add(s),r.setActiveObject(s),a&&l(!0)},c=(b,s,k)=>{const _=s,z=s,L=Math.PI/b;let F=[],R=0;for(let E=0;E<b;E++){let P=_+Math.cos(R)*s,X=z+Math.sin(R)*s;F.push({x:P,y:X}),R+=L,P=_+Math.cos(R)*k,X=z+Math.sin(R)*k,F.push({x:P,y:X}),R+=L}return F},v=(b,s)=>{const k=Math.PI*2/b,_=s,z=s,L=[];for(let F=0;F<b;F++){const R=_+s*Math.cos(F*k),E=z+s*Math.sin(F*k);L.push({x:R,y:E})}return L},u=b=>{const s=c(5,60,30),k=new B.fabric.Polygon(s,{left:200,top:200,fill:"",stroke:n.primaryColor,strokeWidth:2,strokeLineJoin:"bevil"},!1);r.add(k),r.setActiveObject(k),a&&l(!0)},w=b=>{const s=v(6,30),k=new B.fabric.Polygon(s,{left:200,top:200,fill:"",stroke:n.primaryColor,strokeWidth:2,strokeLineJoin:"bevil"},!1);r.add(k),r.setActiveObject(k),a&&l(!0)},i=b=>{const s=new B.fabric.Path(St,{fill:"",stroke:n.primaryColor,left:200,top:200});r.add(s),r.setActiveObject(s),a&&l(!0)},y=b=>{const s=new B.fabric.Path(kt,{fill:"",stroke:n.primaryColor,left:200,top:200});r.add(s),r.setActiveObject(s),a&&l(!0)},f=b=>{const s=new B.fabric.Path(mt,{fill:"",stroke:n.primaryColor,left:200,top:200});r.add(s),r.setActiveObject(s),a&&l(!0)};return r?e.jsxs(h.Fragment,{children:[e.jsx("br",{}),e.jsx("div",{onClick:b=>d(),style:{fontSize:"50px",cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"76",width:"76",viewBox:"0 0 712 712",fill:"none",strokeWidth:"4",stroke:n.primaryColor,children:e.jsx("path",{d:"M512 512H0V0h512v512z"})})}),e.jsx("div",{onClick:b=>x(),style:{fontSize:"50px",cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"66",width:"66",viewBox:"0 0 512 512",fill:"none",strokeWidth:"4",stroke:n.primaryColor,children:e.jsx("path",{d:"M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"})})}),e.jsx("div",{onClick:b=>p(),draggable:!0,style:{fontSize:"50px",cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"106",width:"106",viewBox:"0 0 320 512",fill:"none",strokeWidth:"4",stroke:n.primaryColor,children:e.jsx("path",{d:"M288.7 352H31.3c-17.8 0-26.7-21.5-14.1-34.1l128.7-128.7c7.8-7.8 20.5-7.8 28.3 0l128.7 128.7c12.6 12.6 3.7 34.1-14.1 34.1z"})})}),e.jsx("div",{onClick:b=>u(),style:{fontSize:"50px",cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"86",width:"86",viewBox:"0 0 576 512",fill:"none",strokeWidth:"4",stroke:n.primaryColor,children:e.jsx("path",{d:"M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z"})})}),e.jsx("div",{onClick:b=>w(),style:{fontSize:"50px",cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",strokeWidth:"4",stroke:n.primaryColor,height:"80px",width:"80px",version:"1.1",id:"Capa_1",viewBox:"0 0 184.751 184.751",children:e.jsx("path",{d:"M0,92.375l46.188-80h92.378l46.185,80l-46.185,80H46.188L0,92.375z"})})}),e.jsx("div",{onClick:b=>j(),style:{fontSize:"50px",cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",strokeWidth:"4",stroke:n.primaryColor,id:"Capa_1",width:"86px",height:"86px",viewBox:"0 0 290.658 290.658",children:e.jsx("g",{children:e.jsx("g",{children:e.jsx("rect",{y:"139.474",style:{fill:n.primaryColor},width:"290.658",height:"1.711"})})})})}),e.jsx("div",{onClick:b=>i(),style:{fontSize:"50px",cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"86",width:"86",viewBox:"0 0 512 512",fill:"none",strokeWidth:"4",stroke:n.primaryColor,children:e.jsx("path",{d:St})})}),e.jsx("div",{onClick:b=>y(),style:{fontSize:"50px",cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"86",width:"86",viewBox:"0 0 512 512",fill:"none",strokeWidth:"4",stroke:n.primaryColor,children:e.jsx("path",{d:kt})})}),e.jsx("div",{onClick:b=>f(),style:{fontSize:"50px",cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"86",width:"86",viewBox:"0 0 448 512",fill:"none",strokeWidth:"4",stroke:n.primaryColor,children:e.jsx("path",{d:mt})})})]}):null}function en(m){const{apcCanvasInstance:r,theme:n,isMobile:a,closeMobileModalSecondaryPanel:l}=m,d=p=>{const j=new B.fabric.Path(p,{left:200,top:200,fill:n.primaryColor,scaleX:.1,scaleY:.1});r.add(j),r.setActiveObject(j),a&&l(!0)},x=p=>{switch(p){case"icon-phone":d(dr);break;case"icon-question":d(lr);break;case"icon-clock":d(pr);break;case"icon-twitter":d(hr);break;case"icon-check":d(ur);break;case"icon-pointer":d(fr);break;case"icon-mail":d(xr);break;case"icon-dollar":d(gr);break;case"icon-graduation":d(Nt);break;case"icon-business-suit":d(mr);break;case"icon-chat":d(vr);break;case"icon-thumbs-up":d(jr);break;case"icon-wifi":d(br);break;case"icon-info":d(It);break;case"icon-cart":d(At);break;case"icon-comment":d(Ot);break;case"icon-location-map":d(Et);break;case"icon-heart-1":d(Tt);break;case"icon-arrow-right-1":d(mt);break;case"icon-xmark":d(zt);break;case"icon-cloud":d(Mt);break;case"icon-smile":d(Rt);break;case"icon-like":d(Lt);break;default:console.log("no matching type")}};return e.jsx(h.Fragment,{children:e.jsxs("div",{style:{padding:"5px"},className:a?"apc-mpx-widget-secondary-icons-mobile":"apc-mpx-widget-secondary-icons",children:[e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-phone"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:"M164.9 24.6c-7.7-18.6-28-28.5-47.4-23.2l-88 24C12.1 30.2 0 46 0 64C0 311.4 200.6 512 448 512c18 0 33.8-12.1 38.6-29.5l24-88c5.3-19.4-4.6-39.7-23.2-47.4l-96-40c-16.3-6.8-35.2-2.1-46.3 11.6L304.7 368C234.3 334.7 177.3 277.7 144 207.3L193.3 167c13.7-11.2 18.4-30 11.6-46.3l-40-96z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-question"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 320 512",children:e.jsx("path",{fill:n.primaryColor,d:"M80 160c0-35.3 28.7-64 64-64h32c35.3 0 64 28.7 64 64v3.6c0 21.8-11.1 42.1-29.4 53.8l-42.2 27.1c-25.2 16.2-40.4 44.1-40.4 74V320c0 17.7 14.3 32 32 32s32-14.3 32-32v-1.4c0-8.2 4.2-15.8 11-20.2l42.2-27.1c36.6-23.6 58.8-64.1 58.8-107.7V160c0-70.7-57.3-128-128-128H144C73.3 32 16 89.3 16 160c0 17.7 14.3 32 32 32s32-14.3 32-32zm80 320a40 40 0 1 0 0-80 40 40 0 1 0 0 80z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-clock"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:"M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-twitter"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:"M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-check"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 448 512",children:e.jsx("path",{fill:n.primaryColor,d:"M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-pointer"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 448 512",children:e.jsx("path",{fill:n.primaryColor,d:"M160 64c0-8.8 7.2-16 16-16s16 7.2 16 16V200c0 10.3 6.6 19.5 16.4 22.8s20.6-.1 26.8-8.3c3-3.9 7.6-6.4 12.8-6.4c8.8 0 16 7.2 16 16c0 10.3 6.6 19.5 16.4 22.8s20.6-.1 26.8-8.3c3-3.9 7.6-6.4 12.8-6.4c7.8 0 14.3 5.6 15.7 13c1.6 8.2 7.3 15.1 15.1 18s16.7 1.6 23.3-3.6c2.7-2.1 6.1-3.4 9.9-3.4c8.8 0 16 7.2 16 16l0 16V392c0 39.8-32.2 72-72 72H272 212.3h-.9c-37.4 0-72.4-18.7-93.2-49.9L50.7 312.9c-4.9-7.4-2.9-17.3 4.4-22.2s17.3-2.9 22.2 4.4L116 353.2c5.9 8.8 16.8 12.7 26.9 9.7s17-12.4 17-23V320 64zM176 0c-35.3 0-64 28.7-64 64V261.7C91.2 238 55.5 232.8 28.5 250.7C-.9 270.4-8.9 310.1 10.8 339.5L78.3 440.8c29.7 44.5 79.6 71.2 133.1 71.2h.9H272h56c66.3 0 120-53.7 120-120V288l0-16c0-35.3-28.7-64-64-64c-4.5 0-8.8 .5-13 1.3c-11.7-15.4-30.2-25.3-51-25.3c-6.9 0-13.5 1.1-19.7 3.1C288.7 170.7 269.6 160 248 160c-2.7 0-5.4 .2-8 .5V64c0-35.3-28.7-64-64-64zm48 304c0-8.8-7.2-16-16-16s-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304zm48-16c-8.8 0-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304c0-8.8-7.2-16-16-16zm80 16c0-8.8-7.2-16-16-16s-16 7.2-16 16v96c0 8.8 7.2 16 16 16s16-7.2 16-16V304z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-mail"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:"M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-dollar"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 320 512",children:e.jsx("path",{fill:n.primaryColor,d:"M160 0c17.7 0 32 14.3 32 32V67.7c1.6 .2 3.1 .4 4.7 .7c.4 .1 .7 .1 1.1 .2l48 8.8c17.4 3.2 28.9 19.9 25.7 37.2s-19.9 28.9-37.2 25.7l-47.5-8.7c-31.3-4.6-58.9-1.5-78.3 6.2s-27.2 18.3-29 28.1c-2 10.7-.5 16.7 1.2 20.4c1.8 3.9 5.5 8.3 12.8 13.2c16.3 10.7 41.3 17.7 73.7 26.3l2.9 .8c28.6 7.6 63.6 16.8 89.6 33.8c14.2 9.3 27.6 21.9 35.9 39.5c8.5 17.9 10.3 37.9 6.4 59.2c-6.9 38-33.1 63.4-65.6 76.7c-13.7 5.6-28.6 9.2-44.4 11V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V445.1c-.4-.1-.9-.1-1.3-.2l-.2 0 0 0c-24.4-3.8-64.5-14.3-91.5-26.3c-16.1-7.2-23.4-26.1-16.2-42.2s26.1-23.4 42.2-16.2c20.9 9.3 55.3 18.5 75.2 21.6c31.9 4.7 58.2 2 76-5.3c16.9-6.9 24.6-16.9 26.8-28.9c1.9-10.6 .4-16.7-1.3-20.4c-1.9-4-5.6-8.4-13-13.3c-16.4-10.7-41.5-17.7-74-26.3l-2.8-.7 0 0C119.4 279.3 84.4 270 58.4 253c-14.2-9.3-27.5-22-35.8-39.6c-8.4-17.9-10.1-37.9-6.1-59.2C23.7 116 52.3 91.2 84.8 78.3c13.3-5.3 27.9-8.9 43.2-11V32c0-17.7 14.3-32 32-32z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-graduation"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 640 512",children:e.jsx("path",{fill:n.primaryColor,d:Nt})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-business-suit"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 640 512",children:e.jsx("path",{fill:n.primaryColor,d:"M184 48H328c4.4 0 8 3.6 8 8V96H176V56c0-4.4 3.6-8 8-8zm-56 8V96H64C28.7 96 0 124.7 0 160v96H192 352h8.2c32.3-39.1 81.1-64 135.8-64c5.4 0 10.7 .2 16 .7V160c0-35.3-28.7-64-64-64H384V56c0-30.9-25.1-56-56-56H184c-30.9 0-56 25.1-56 56zM320 352H224c-17.7 0-32-14.3-32-32V288H0V416c0 35.3 28.7 64 64 64H360.2C335.1 449.6 320 410.5 320 368c0-5.4 .2-10.7 .7-16l-.7 0zm320 16a144 144 0 1 0 -288 0 144 144 0 1 0 288 0zM496 288c8.8 0 16 7.2 16 16v48h32c8.8 0 16 7.2 16 16s-7.2 16-16 16H496c-8.8 0-16-7.2-16-16V304c0-8.8 7.2-16 16-16z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-chat"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 640 512",children:e.jsx("path",{fill:n.primaryColor,d:"M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.7 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-thumbs-up"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:"M323.8 34.8c-38.2-10.9-78.1 11.2-89 49.4l-5.7 20c-3.7 13-10.4 25-19.5 35l-51.3 56.4c-8.9 9.8-8.2 25 1.6 33.9s25 8.2 33.9-1.6l51.3-56.4c14.1-15.5 24.4-34 30.1-54.1l5.7-20c3.6-12.7 16.9-20.1 29.7-16.5s20.1 16.9 16.5 29.7l-5.7 20c-5.7 19.9-14.7 38.7-26.6 55.5c-5.2 7.3-5.8 16.9-1.7 24.9s12.3 13 21.3 13L448 224c8.8 0 16 7.2 16 16c0 6.8-4.3 12.7-10.4 15c-7.4 2.8-13 9-14.9 16.7s.1 15.8 5.3 21.7c2.5 2.8 4 6.5 4 10.6c0 7.8-5.6 14.3-13 15.7c-8.2 1.6-15.1 7.3-18 15.1s-1.6 16.7 3.6 23.3c2.1 2.7 3.4 6.1 3.4 9.9c0 6.7-4.2 12.6-10.2 14.9c-11.5 4.5-17.7 16.9-14.4 28.8c.4 1.3 .6 2.8 .6 4.3c0 8.8-7.2 16-16 16H286.5c-12.6 0-25-3.7-35.5-10.7l-61.7-41.1c-11-7.4-25.9-4.4-33.3 6.7s-4.4 25.9 6.7 33.3l61.7 41.1c18.4 12.3 40 18.8 62.1 18.8H384c34.7 0 62.9-27.6 64-62c14.6-11.7 24-29.7 24-50c0-4.5-.5-8.8-1.3-13c15.4-11.7 25.3-30.2 25.3-51c0-6.5-1-12.8-2.8-18.7C504.8 273.7 512 257.7 512 240c0-35.3-28.6-64-64-64l-92.3 0c4.7-10.4 8.7-21.2 11.8-32.2l5.7-20c10.9-38.2-11.2-78.1-49.4-89zM32 192c-17.7 0-32 14.3-32 32V448c0 17.7 14.3 32 32 32H96c17.7 0 32-14.3 32-32V224c0-17.7-14.3-32-32-32H32z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-wifi"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 640 512",children:e.jsx("path",{fill:n.primaryColor,d:"M54.2 202.9C123.2 136.7 216.8 96 320 96s196.8 40.7 265.8 106.9c12.8 12.2 33 11.8 45.2-.9s11.8-33-.9-45.2C549.7 79.5 440.4 32 320 32S90.3 79.5 9.8 156.7C-2.9 169-3.3 189.2 8.9 202s32.5 13.2 45.2 .9zM320 256c56.8 0 108.6 21.1 148.2 56c13.3 11.7 33.5 10.4 45.2-2.8s10.4-33.5-2.8-45.2C459.8 219.2 393 192 320 192s-139.8 27.2-190.5 72c-13.3 11.7-14.5 31.9-2.8 45.2s31.9 14.5 45.2 2.8c39.5-34.9 91.3-56 148.2-56zm64 160a64 64 0 1 0 -128 0 64 64 0 1 0 128 0z"})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-info"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:It})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-cart"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 576 512",children:e.jsx("path",{fill:n.primaryColor,d:At})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-comment"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:Ot})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-location-map"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 384 512",children:e.jsx("path",{fill:n.primaryColor,d:Et})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-heart-1"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:Tt})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-arrow-right-1"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 448 512",children:e.jsx("path",{fill:n.primaryColor,d:yr})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-xmark"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 384 512",children:e.jsx("path",{fill:n.primaryColor,d:zt})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-cloud"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 640 512",children:e.jsx("path",{fill:n.primaryColor,d:Mt})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-smile"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:Rt})})}),e.jsx("div",{className:"apc-mpx-widget-secondary-icon",onClick:p=>x("icon-like"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:n.primaryColor,d:Lt})})})]})})}const tt=({defaultValue:m,size:r,ariaLabel:n,onChange:a})=>{const[l,d]=h.useState(m),x=p=>{const j=p.target.value;d(j),a(j)};return e.jsx("input",{type:"range",value:l,min:"0",max:"100",step:"1",className:`slider ${r}`,"aria-label":n,onChange:x})};function Bt(m){const{apcCanvasInstance:r,theme:n}=m,[a,l]=h.useState(!1),d=h.useRef(null),x=()=>{l(i=>!i)},p=i=>{d.current&&d.current.contains(i.target)||l(!1)};h.useEffect(()=>(document.addEventListener("mousedown",p),()=>{document.removeEventListener("mousedown",p)}),[]);const j=(i,y)=>{if(r.getActiveObject()){if(y==="family"&&r.getActiveObject().set({fontFamily:i}),y==="bold"&&r.getActiveObject().set({fontWeight:i}),y==="italic"&&r.getActiveObject().set({fontStyle:i}),y==="underline"&&r.getActiveObject().set({underline:i}),y==="line-through"&&r.getActiveObject().set({linethrough:i}),y==="overline"&&r.getActiveObject().set({overline:i}),y==="color"&&r.getActiveObject().set({fill:i}),y==="shadow"){const f=document.getElementById("apc-text-shadow-color").value;let b=document.getElementById("apc-text-shadow-horiz").value,s=document.getElementById("apc-text-shadow-vert").value,k=document.getElementById("apc-text-shadow-blur").value;b||(b=5),s||(s=5),k||(k=5),r.getActiveObject().set({shadow:f+" "+b+" "+s+" "+k})}if(y==="stroke"){const f=document.getElementById("apc-text-stroke-color").value;let b=document.getElementById("apc-text-stroke-width").value;b||(b=1),r.getActiveObject().set({stroke:f,strokeWidth:b})}y==="bg-color"&&r.getActiveObject().set({textBackgroundColor:i}),y==="font-size"&&r.getActiveObject().set({fontSize:i}),r&&r.renderAll()}},c=i=>{if(r.getActiveObject()){const y=parseFloat(i/100);r.getActiveObject().set({opacity:y.toFixed(1)}),r&&r.renderAll()}},v=({color:i,x:y,y:f,blur:b})=>{if(r.getActiveObject()){const s=r.getActiveObject().shadow;i||(i=s?s.color:"#6a45d2"),y||(y=s?s.offsetX:5),f||(f=s?s.offsetY:5),b||(b=s?s.blur:5),r.getActiveObject().set({shadow:i+" "+y+" "+f+" "+b}),r&&r.renderAll()}},u=()=>e.jsxs("div",{className:"apc-mpx-widget-button-group-container",children:[" ",e.jsx("button",{className:"apc-mpx-widget-effects-button",onClick:x,style:{color:n.primaryColor,cursor:"pointer"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 448 512",height:"15px",width:"15px",children:e.jsx("path",{fill:n.primaryColor,d:Lr})})}),a&&e.jsxs("div",{className:"apc-mpx-widget-popper-container",ref:d,children:[e.jsx("div",{className:"apc-mpx-widget-popper-arrow-up"}),e.jsxs("ul",{id:"split-button-menu",autoFocus:!0,children:[e.jsx("li",{className:"apc-mpx-widget-popper-li",children:e.jsxs("div",{style:{textAlign:"left"},children:[e.jsx("div",{style:{fontWeight:"bold",color:"purple"},children:"Background"}),e.jsxs("div",{style:{marginLeft:"10px"},children:[" Color",e.jsx("input",{style:{height:"25px",width:"25px",border:"none"},type:"color",onChange:i=>j(i.target.value,"bg-color")})]}),e.jsxs("div",{style:{marginLeft:"10px"},children:[" Opacity",e.jsx("div",{children:e.jsx(tt,{defaultValue:100,size:"small","aria-label":"Opacity",onChange:i=>c(i)})})]})]})}),e.jsx("li",{className:"apc-mpx-widget-popper-li",children:e.jsxs("div",{style:{textAlign:"left"},children:[e.jsx("div",{style:{fontWeight:"bold",color:"purple"},children:"Shadow"}),e.jsxs("div",{style:{marginLeft:"10px"},children:["Blur ",e.jsx("input",{type:"text",style:{height:"22px",width:"20px"},onChange:i=>v({blur:i.target.value})})]}),e.jsxs("div",{style:{marginLeft:"10px"},children:[" Color",e.jsx("input",{style:{height:"25px",width:"25px",border:"none"},type:"color",onChange:i=>v({color:i.target.value})})]}),e.jsxs("div",{style:{marginLeft:"10px"},children:[" Offset X",e.jsx("div",{children:e.jsx(tt,{defaultValue:0,size:"small","aria-label":"Opacity",onChange:i=>v({x:i})})})]}),e.jsxs("div",{style:{marginLeft:"10px"},children:[" Offset Y",e.jsx("div",{children:e.jsx(tt,{defaultValue:0,size:"small","aria-label":"Opacity",onChange:i=>v({y:i})})})]})]})})]})]})]});return e.jsx(h.Fragment,{children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",color:"#ffffff"},children:[e.jsx("div",{style:{marginTop:"4px",marginLeft:"2px"},children:e.jsx("input",{style:{height:"20px",width:"30px",border:"solid 0px #ffffff"},type:"color",onChange:i=>j(i.target.value,"color")})})," ",e.jsx("div",{style:{marginTop:"4px"},children:e.jsxs("select",{style:{height:"20px",border:"solid 0px #ffffff"},id:"ffamily",onChange:i=>j(i.target.value,"family"),children:[e.jsx("option",{value:"comic sans ms",children:"Comic Sans MS"}),e.jsx("option",{value:"frankruehl",children:"FrankRuehl"}),e.jsx("option",{value:"lucida Bright",children:"Lucida Bright"}),e.jsx("option",{value:"bradley Hand",children:"Bradley Hand"}),e.jsx("option",{value:"Times New Roman",children:"Times New Roman"}),e.jsx("option",{value:"Georgia",children:"Georgia"}),e.jsx("option",{value:"Garamond",children:"Garamond"}),e.jsx("option",{value:"Baskerville",children:"Baskerville"}),e.jsx("option",{value:"Palatino",children:"Palatino"}),e.jsx("option",{value:"Book Antiqua",children:"Book Antiqua"}),e.jsx("option",{value:"Arial",children:"Arial"}),e.jsx("option",{value:"Helvetica",children:"Helvetica"}),e.jsx("option",{value:"Verdana",children:"Verdana"}),e.jsx("option",{value:"Tahoma",children:"Tahoma"}),e.jsx("option",{value:"Futura",children:"Futura"}),e.jsx("option",{value:"Calibri",children:"Calibri"}),e.jsx("option",{value:"Courier New",children:"Courier New"}),e.jsx("option",{value:"Consolas",children:"Consolas"}),e.jsx("option",{value:"Monaco",children:"Monaco"}),e.jsx("option",{value:"Brush Script",children:"Brush Script"}),e.jsx("option",{value:"Lucida Handwriting",children:"Lucida Handwriting"}),e.jsx("option",{value:"Zapfino",children:"Zapfino"}),e.jsx("option",{value:"Impact",children:"Impact"}),e.jsx("option",{value:"Cooper Black",children:"Cooper Black"}),e.jsx("option",{value:"Papyrus",children:"Papyrus"}),e.jsx("option",{value:"Comic Sans MS",children:"Comic Sans MS"}),e.jsx("option",{value:"Gotham",children:"Gotham"}),e.jsx("option",{value:"Franklin Gothic",children:"Franklin Gothic"}),e.jsx("option",{value:"DIN",children:"DIN"}),e.jsx("option",{value:"Rockwell",children:"Rockwell"}),e.jsx("option",{value:"Century Gothic",children:"Century Gothic"}),e.jsx("option",{value:"Trebuchet MS",children:"Trebuchet MS"}),e.jsx("option",{value:"Lobster",children:"Lobster"}),e.jsx("option",{value:"Roboto",children:"Roboto"}),e.jsx("option",{value:"Myriad Pro",children:"Myriad Pro"}),e.jsx("option",{value:"Gill Sans",children:"Gill Sans"}),e.jsx("option",{value:"Bodoni",children:"Bodoni"}),e.jsx("option",{value:"Perpetua",children:"Perpetua"}),e.jsx("option",{value:"Akzidenz-Grotesk",children:"Akzidenz-Grotesk"}),e.jsx("option",{value:"Source Sans Pro",children:"Source Sans Pro"}),e.jsx("option",{value:"Lato",children:"Lato"}),e.jsx("option",{value:"Noto Sans",children:"Noto Sans"}),e.jsx("option",{value:"Open Sans",children:"Open Sans"}),e.jsx("option",{value:"Montserrat",children:"Montserrat"})]})})," ",e.jsx("div",{style:{marginTop:"4px"},children:e.jsx("input",{defaultValue:40,style:{width:"50px",height:"20px",border:"solid 0px #ffffff"},type:"number",onChange:i=>j(i.target.value,"font-size")})}),e.jsx("div",{style:{marginTop:"4px",marginLeft:"2px",cursor:"pointer"},role:"button",onClick:i=>r.getActiveObject().fontWeight==="normal"?j("bold","bold"):j("normal","bold"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16px",width:"16px",viewBox:"0 0 384 512",children:e.jsx("path",{fill:"#ffffff",d:"M333.5 238a122 122 0 0 0 27-65.2C367.9 96.5 308 32 233.4 32H34a16 16 0 0 0 -16 16v48a16 16 0 0 0 16 16h31.9v288H34a16 16 0 0 0 -16 16v48a16 16 0 0 0 16 16h209.3c70.8 0 134.1-51.8 141-122.4 4.7-48.5-16.4-92.1-50.8-119.6zM145.7 112h87.8a48 48 0 0 1 0 96h-87.8zm87.8 288h-87.8V288h87.8a56 56 0 0 1 0 112z"})})}),e.jsx("div",{style:{marginTop:"4px",marginLeft:"2px",cursor:"pointer"},role:"button",onClick:i=>r.getActiveObject().fontStyle==="normal"?j("italic","italic"):j("normal","italic"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16px",width:"16px",viewBox:"0 0 320 512",children:e.jsx("path",{fill:"#ffffff",d:"M320 48v32a16 16 0 0 1 -16 16h-62.8l-80 320H208a16 16 0 0 1 16 16v32a16 16 0 0 1 -16 16H16a16 16 0 0 1 -16-16v-32a16 16 0 0 1 16-16h62.8l80-320H112a16 16 0 0 1 -16-16V48a16 16 0 0 1 16-16h192a16 16 0 0 1 16 16z"})})}),e.jsx("div",{style:{marginTop:"4px",marginLeft:"2px",cursor:"pointer"},role:"button",onClick:i=>r.getActiveObject().underline?j(!1,"underline"):j(!0,"underline"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16px",width:"16px",viewBox:"0 0 448 512",children:e.jsx("path",{fill:"#ffffff",d:"M32 64h32v160c0 88.2 71.8 160 160 160s160-71.8 160-160V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0 -16-16H272a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h32v160a80 80 0 0 1 -160 0V64h32a16 16 0 0 0 16-16V16a16 16 0 0 0 -16-16H32a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16zm400 384H16a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16z"})})}),e.jsx("div",{style:{marginTop:"4px",marginLeft:"2px",cursor:"pointer"},role:"button","aria-label":"Italics",onClick:i=>r.getActiveObject().linethrough?j(!1,"line-through"):j(!0,"line-through"),children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16px",width:"16px",viewBox:"0 0 512 512",children:e.jsx("path",{fill:"#ffffff",d:"M496 224H293.9l-87.2-26.8A43.6 43.6 0 0 1 219.6 112h66.8A49.9 49.9 0 0 1 331 139.6a16 16 0 0 0 21.5 7.2l42.9-21.5a16 16 0 0 0 7.2-21.5l-.5-1A128 128 0 0 0 287.5 32h-68a123.7 123.7 0 0 0 -123 135.6c2 20.9 10.1 39.8 21.8 56.4H16a16 16 0 0 0 -16 16v32a16 16 0 0 0 16 16h480a16 16 0 0 0 16-16v-32a16 16 0 0 0 -16-16zm-180.2 96A43 43 0 0 1 336 356.5 43.6 43.6 0 0 1 292.5 400h-66.8A49.9 49.9 0 0 1 181 372.4a16 16 0 0 0 -21.5-7.2l-42.9 21.5a16 16 0 0 0 -7.2 21.5l.5 1A128 128 0 0 0 224.5 480h68a123.7 123.7 0 0 0 123-135.6 114.3 114.3 0 0 0 -5.3-24.4z"})})}),e.jsx("div",{children:u()})]})})}function Ze(m){const{apcCanvasInstance:r,theme:n}=m,a=h.useRef(null),[l,d]=h.useState(!1),x=()=>{d(u=>!u)},p=(u,w)=>{if(r&&r.getActiveObject()){if(u==="bg-color"&&r.getActiveObject().set({fill:w}),u==="border-color"&&r.getActiveObject().set({stroke:w}),u==="gradient-bg-color1"||u==="gradient-bg-color2"){let i=document.getElementById("apc-object-bg-gradient-color1").value,y=document.getElementById("apc-object-bg-gradient-color2").value;const f=new B.fabric.Gradient({type:"linear",gradientUnits:"pixels",coords:{x1:0,y1:0,x2:0,y2:r.getActiveObject().height},colorStops:[{offset:0,color:i||"#000"},{offset:1,color:y||"#fff"}]});r.getActiveObject().set({fill:f})}r&&r.renderAll()}},j=u=>{if(r.getActiveObject()){const w=parseFloat(u/100);r.getActiveObject().set({opacity:w.toFixed(1)}),r&&r.renderAll()}},c=({color:u,x:w,y:i,blur:y})=>{if(r.getActiveObject()){const f=r.getActiveObject().shadow;u||(u=f?f.color:"#6a45d2"),w||(w=f?f.offsetX:5),i||(i=f?f.offsetY:5),y||(y=f?f.blur:5),r.getActiveObject().set({shadow:u+" "+w+" "+i+" "+y}),r&&r.renderAll()}};return e.jsx(h.Fragment,{children:e.jsxs("div",{className:"apc-mpx-widget-button-group-container",children:[e.jsx("button",{className:"apc-mpx-widget-effects-button",onClick:x,style:{color:n.primaryColor,fontWeight:"bold",cursor:"pointer",borderRadius:"25px"},children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",height:"22px",width:"22px",children:e.jsx("path",{fill:n.primaryColor,d:_r})})}),l&&e.jsxs("div",{className:"apc-mpx-widget-popper-container",ref:a,style:{marginLeft:"20%"},children:[e.jsx("div",{className:"apc-mpx-widget-popper-arrow-up"}),e.jsxs("ul",{id:"split-button-menu",autoFocus:!0,children:[e.jsx("li",{className:"apc-mpx-widget-popper-li",children:e.jsxs("div",{style:{textAlign:"left"},children:[e.jsx("div",{style:{fontWeight:"bold",color:"purple"},children:"Background"}),e.jsxs("div",{style:{marginLeft:"10px"},children:[" Color",e.jsx("input",{style:{height:"25px",width:"25px",border:"none"},type:"color",onChange:u=>p("bg-color",u.target.value)})]}),e.jsxs("div",{style:{marginLeft:"10px"},children:["Gradient:",e.jsx("input",{style:{height:"25px",width:"25px",border:"none"},className:"editor-color-input-selector",id:"apc-object-bg-gradient-color1",type:"color",onChange:u=>p("gradient-bg-color1",u.target.value)}),e.jsx("input",{style:{height:"25px",width:"25px",border:"none"},className:"editor-color-input-selector",id:"apc-object-bg-gradient-color2",type:"color",onChange:u=>p("gradient-bg-color2",u.target.value)})]}),e.jsx("div",{style:{marginLeft:"10px"},children:e.jsxs("div",{children:["Opacity:  ",e.jsx(tt,{defaultValue:100,size:"small","aria-label":"Opacity",onChange:u=>j(u)})]})}),e.jsxs("div",{style:{marginLeft:"10px"},children:[" Border color",e.jsx("input",{style:{height:"25px",width:"25px",border:"none"},type:"color",onChange:u=>p("border-color",u.target.value)})]})]})}),e.jsx("li",{className:"apc-mpx-widget-popper-li",children:e.jsxs("div",{style:{textAlign:"left"},children:[e.jsx("div",{style:{fontWeight:"bold",color:"purple"},children:"Shadow"}),e.jsxs("div",{style:{marginLeft:"10px"},children:["Blur width ",e.jsx("input",{type:"text",style:{height:"22px",width:"25px"},onChange:u=>c({blur:u.target.value})})]}),e.jsxs("div",{style:{marginLeft:"10px"},children:[" Color",e.jsx("input",{style:{height:"25px",width:"25px",border:"none"},type:"color",onChange:u=>c({color:u.target.value})})]}),e.jsx("div",{style:{marginLeft:"10px"},children:e.jsxs("div",{children:["Offset X: ",e.jsx(tt,{defaultValue:0,size:"small","aria-label":"Opacity",onChange:u=>c({x:u})})]})}),e.jsx("div",{style:{marginLeft:"10px"},children:e.jsxs("div",{children:["Offset Y: ",e.jsx(tt,{defaultValue:0,size:"small","aria-label":"Opacity",onChange:u=>c({y:u})})]})})]})})]})]})]})})}function tn(m){const{apcCanvasInstance:r,apiEndpoint:n,apiKey:a}=m,[l,d]=h.useState("art"),[x,p]=h.useState(),[j,c]=h.useState(!1),v=n+"/api/v1/designer";h.useEffect(()=>{u()},[]);const u=()=>{c(!0);const f={"X-Api-Key":a},b=`${v}/get-quote/${l}`;Ce.get(b,{headers:f}).then(s=>{var k;c(!1),p((k=s.data)==null?void 0:k.object)}).catch(s=>{console.error("Error fetching data:",s),c(!1)})},w=(f,b,s)=>{const k=new B.fabric.Textbox(b,{width:500,left:100,top:200,fontSize:16}),_=new B.fabric.Textbox(s,{fontSize:14,width:200,fontWeight:"bold"});_.top=k.top+k.height+10,_.left=k.left,r.add(k),r.add(_),r.setActiveObject(k)},i=f=>{c(!0),d(f),u()},y=()=>x?e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:5},children:x.map((f,b)=>e.jsxs("div",{onClick:s=>w(s,f.quote,f.author),style:{cursor:"pointer",padding:"3px",textAlign:"left",color:"#210080",fontFamily:"ui-monospace",border:"1px solid #dedcdc",borderRadius:"8px"},children:[e.jsx("div",{children:f.quote}),e.jsx("div",{children:e.jsx("strong",{children:e.jsx("i",{children:f.author})})}),e.jsx("br",{})]},b))}):null;return e.jsxs(h.Fragment,{children:[e.jsx("h3",{children:"Quotes"}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("div",{children:y()}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("br",{}),e.jsxs("div",{style:{padding:"3px"},children:[e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("best"),children:[l==="best"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Best"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("business"),children:[l==="business"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Business"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("car"),children:[l==="car"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Car"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("change"),children:[l==="change"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Change"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("computers"),children:[l==="computers"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Computers"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("cool"),children:[l==="cool"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Cool"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("courage"),children:[l==="courage"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Courage"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("dad"),children:[l==="dad"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Dad"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("dating"),children:[l==="dating"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Date"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("death"),children:[l==="death"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Death"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("design"),children:[l==="design"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Design"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("dreams"),children:[l==="dreams"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Dreams"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("education"),children:[l==="education"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Education"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("inspirational"),children:[l==="inspirational"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Inspirational"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("happiness"),children:[l==="happiness"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Happiness"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("health"),children:[l==="health"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Health"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("humor"),children:[l==="humor"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Humor"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("marriage"),children:[l==="marriage"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Marriage"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("money"),children:[l==="money"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Money"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("graduation"),children:[l==="graduation"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Graduation"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("hope"),children:[l==="hope"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Hope"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("love"),children:[l==="love"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Love"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("god"),children:[l==="god"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"God"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("equality"),children:[l==="equality"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Equality"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("failure"),children:[l==="failure"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Failure"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("fear"),children:[l==="fear"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Fear"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("legal"),children:[l==="legal"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Legal"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("attitude"),children:[l==="attitude"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Attitude"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("beauty"),children:[l==="beauty"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Beauty"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("age"),children:[l==="age"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Age"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("art"),children:[l==="art"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Art"]}),e.jsx("br",{}),e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>i("birthday"),children:[l==="birthday"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Birthday"]}),e.jsx("br",{})]})]})}function rn(m){const{apcCanvasInstance:r,theme:n,apiKey:a,apiEndpoint:l,updateActiveSection:d,reloadTabs:x,currentTabNo:p,isMobile:j,closeMobileModalSecondaryPanel:c}=m,[v,u]=h.useState("background"),[w,i]=h.useState(!1),[y,f]=h.useState(),b=l+"/api/v1/designer";h.useEffect(()=>{k()},[]);const s=L=>{const F=document.getElementById("img-default-id"),R=new B.fabric.Image(F,E=>{E.set({left:100,top:200,scaleX:.5,scaleY:.5,imageSmoothing:!0})});r.add(R),j&&c(!0)},k=()=>{i(!0);const L={"X-Api-Key":a},F=`${b}/get-images/${v}`;Ce.get(F,{headers:L}).then(R=>{var E;i(!1),f((E=R.data)==null?void 0:E.object)}).catch(R=>{console.error("Error fetching data:",R),i(!1)})},_=L=>{B.fabric.Image.fromURL(L,function(F){F.width=r.width,F.height=r.height,F.scaleToWidth(r.width),F.scaleToHeight(r.height),r.setBackgroundImage(F);const R=sessionStorage.getItem("apc_x_activeTab"),E=JSON.stringify(r);$e(R,"general",E,null).then(P=>{x(p+1),r&&r.renderAll()})},{crossOrigin:"anonymous"})},z=()=>y?e.jsx("div",{children:y.map(L=>e.jsx("div",{onClick:()=>_(L.urls.regular),style:{cursor:"pointer"},children:e.jsx("img",{height:300,width:300,src:L.urls.regular,alt:L.description||"No description"})},L.id))}):null;return e.jsxs(h.Fragment,{children:[e.jsx("br",{}),e.jsx("br",{}),e.jsxs("div",{style:{cursor:"pointer"},onClick:()=>s(),children:[e.jsx("img",{alt:"sample-image",id:"img-default-id",src:"https://mypixia.com/images/img-default.png",height:"200",width:"300"})," ",e.jsx("br",{}),"From my device"]}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("strong",{children:"- OR -"}),e.jsxs("div",{children:[e.jsx("input",{type:"text",onChange:L=>u(L.target.value),className:"apc-mpc-widget-input",style:{border:`solid 3px ${n.primaryColor}`}}),e.jsx("br",{})," ",e.jsx("br",{}),e.jsx("button",{className:"apc-mpc-widget-btn",onClick:()=>k(),style:{backgroundColor:n.primaryColor,color:"#ffffff"},children:w?"...Processing":"Search"})]}),e.jsx("br",{}),e.jsx("br",{}),z()]})}function nn(m){const[r,n]=h.useState(""),[a,l]=h.useState(""),[d,x]=h.useState(!1),[p,j]=h.useState(!1),[c,v]=h.useState(!1),{apcCanvasInstance:u,theme:w,isMobile:i,closeMobileModalSecondaryPanel:y,apiKey:f,apiEndpoint:b}=m,s=`${b}/api/v1/designer`,k=sessionStorage.getItem("apc_x_sub_status");h.useEffect(()=>{(async()=>{k==="active"?(j(!0),v(!0)):(x(!0),await _())})()},[]);const _=()=>{x(!0);const F=`${s}/get-subscription-status/${f}`;Ce.get(F).then(R=>{R.data.object&&R.data.object==="active"&&(sessionStorage.setItem("apc_x_sub_status","active"),j(!0))}).catch(R=>{sessionStorage.setItem("apc_x_sub_status","")}).finally(()=>{x(!1),v(!0)})},z=()=>{rr.toDataURL(r,{width:300},(F,R)=>{F&&console.error(F),l(R)})},L=F=>{const R=document.getElementById("apc-qr-code-img"),E=new B.fabric.Image(R,P=>{P.set({left:200,top:200,scaleX:.5,scaleY:.5,imageSmoothing:!0})});u.add(E),u.setActiveObject(E),i&&y(!0)};return!p&&!d&&c?e.jsx(ut,{theme:w}):p&&!d&&c?e.jsxs(h.Fragment,{children:[e.jsx("br",{}),e.jsx("br",{}),"Enter data such as url",e.jsx("br",{}),e.jsx("input",{className:"apc-mpc-widget-input",style:{border:`solid 3px ${w.primaryColor}`},type:"text",onChange:F=>n(F.target.value)}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("button",{className:"apc-mpc-widget-btn",style:{backgroundColor:w.primaryColor,color:"#ffffff"},disabled:!r,onClick:z,children:"Generate QR code"}),e.jsx("br",{}),e.jsx("br",{}),a&&e.jsxs("div",{className:"generated-view",onClick:()=>L(),style:{cursor:"pointer"},children:[e.jsx("img",{src:a,alt:"qr code",id:"apc-qr-code-img"}),e.jsx("a",{href:a})]})]}):e.jsx("div",{children:e.jsx(ft,{})})}function sn(m){const{apcCanvasInstance:r,theme:n,isMobile:a,closeMobileModalSecondaryPanel:l,apiKey:d,apiEndpoint:x}=m,[p,j]=h.useState(""),[c,v]=h.useState(null),[u,w]=h.useState("CODE128"),i=h.useRef(null),[y,f]=h.useState(""),[b,s]=h.useState(!1),[k,_]=h.useState(!1),[z,L]=h.useState(!1),F=sessionStorage.getItem("apc_x_sub_status"),R=`${x}/api/v1/designer`;h.useEffect(()=>{(async()=>{F==="active"?(_(!0),L(!0)):(s(!0),await E())})()},[]);const E=()=>{s(!0);const Q=`${R}/get-subscription-status/${d}`;Ce.get(Q).then(oe=>{oe.data.object&&oe.data.object==="active"&&(sessionStorage.setItem("apc_x_sub_status","active"),_(!0))}).catch(oe=>{sessionStorage.setItem("apc_x_sub_status","")}).finally(()=>{s(!1),L(!0)})},P=()=>{v(e.jsx(nr,{value:p,format:u,id:"barcode-element"}));const Q=document.getElementById("barcode-element");Q&&f(Q.innerHTML)},X=Q=>{if(i.current.innerHTML){const oe=i.current.innerHTML;let te=new Image;te.src="data:image/svg+xml,"+encodeURIComponent(oe),te.onload=function(){const de=new B.fabric.Image(te,{left:200,top:200});r.add(de),r.setActiveObject(de)}}a&&l(!0)};return!k&&!b&&z?e.jsx(ut,{theme:n}):k&&!b&&z?e.jsxs(h.Fragment,{children:[e.jsx("br",{}),e.jsx("br",{}),"Enter number",e.jsx("input",{type:"text",onChange:Q=>j(Q.target.value),className:"apc-mpc-widget-input",style:{border:`solid 3px ${n.primaryColor}`}}),e.jsx("br",{}),e.jsx("br",{}),"Code type",e.jsxs("select",{value:u,onChange:Q=>w(Q.target.value),className:"apc-mpc-widget-input",style:{border:`solid 3px ${n.primaryColor}`},children:[e.jsx("option",{value:"CODE128",children:"CODE128"}),e.jsx("option",{value:"EAN13",children:"EAN / UPC"}),e.jsx("option",{value:"CODE39",children:"CODE39"}),e.jsx("option",{value:"ITF14",children:"ITF-14"}),e.jsx("option",{value:"MSI10",children:"MSI10"}),e.jsx("option",{value:"pharmacode",children:"Pharmacode"}),e.jsx("option",{value:"codabar",children:"Codabar"})]}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("button",{className:"apc-mpc-widget-btn",disabled:!p,onClick:()=>P(),style:{backgroundColor:n.primaryColor,color:"#ffffff"},children:"Generate Barcode"}),e.jsx("br",{}),e.jsx("br",{})," ",e.jsx("br",{}),e.jsx("br",{}),e.jsx("div",{children:c&&e.jsx("div",{ref:i,onClick:Q=>X(),style:{cursor:"pointer"},children:c})})]}):e.jsxs("div",{children:[" ",e.jsx(ft,{})]})}function on(m){const{apcCanvasInstance:r,theme:n}=m,[a,l]=h.useState(),[d,x]=h.useState(),[p,j]=h.useState(""),c=(w,i)=>{if(r){if(w==="bg-color"&&i.target.value&&r.set({backgroundColor:i.target.value}),w==="image"&&i.target.value){const y=i.target.files[0],f=new FileReader;f.onload=function(b){const s=b.target.result;B.fabric.Image.fromURL(s,function(k){r.setBackgroundImage(k,r.renderAll.bind(r),{})})},f.readAsDataURL(y)}w==="height"&&i.target.value&&(l(i.target.value),r.setHeight(i.target.value)),w==="width"&&i.target.value&&(x(i.target.value),r.setWidth(i.target.value)),r&&r.renderAll()}},v=(w,i,y)=>{x(i),l(w),r.setWidth(i),r.setHeight(w),j(y)},u=()=>e.jsxs("div",{children:[e.jsx("br",{}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row"},children:e.jsxs("div",{children:["Height(px)",e.jsx("input",{type:"number",value:r.height,onChange:w=>c("height",w),className:"apc-mpc-widget-input",style:{border:`solid 3px ${n.primaryColor}`}})]})})," ",e.jsx("div",{style:{display:"flex",flexDirection:"row"},children:e.jsxs("div",{children:["Width(px)",e.jsx("input",{color:"info",type:"number",value:r.width,onChange:w=>c("width",w),className:"apc-mpc-widget-input",style:{border:`solid 3px ${n.primaryColor}`}})]})}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("div",{style:{textAlign:"left"},children:e.jsx("h3",{children:"Standard dimensions"})}),e.jsx("br",{})," ",e.jsx("br",{}),e.jsxs("div",{children:[e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(1440,2560,"YOUC"),children:[p==="YOUC"?e.jsx("span",{style:{color:"green"},children:"✓"}):null," Youtube Channel : 2560 x 1440 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(1080,1920,"FULLHD"),children:[p==="FULLHD"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Full HD : 1920 x 1080 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(1080,1080,"INSTAP"),children:[p==="INSTAP"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Instagram Post:1080 x 1080 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(1920,1080,"INSTAS"),children:[p==="INSTAS"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Instagram Story: 1080 x 1920 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(1080,1080,"INSTAA"),children:[p==="INSTAA"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Instagram Ad: 1080 x 1080 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(788,940,"FACEP"),children:[p==="FACEP"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Facebook Post: 940 x 788 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(315,851,"FACEC"),children:[p==="FACEC"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Facebook Cover: 851 x 315 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(628,1200,"FACEA"),children:[p==="FACEA"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Facebook Ad: 1200 x 628 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(720,1280,"YOUT"),children:[p==="YOUT"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Youtube Thumbnail: 1280 x 720 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(534,534,"INVITE"),children:[p==="INVITE"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Invitation : 14 x 14 cm"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(1112,788,"A4"),children:[p==="A4"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"A4 : 788 x 1112 px"]})}),e.jsx("br",{}),e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:20},children:e.jsxs("div",{style:{backgroundColor:"#e0e0e0"},className:"apc-mpx-widget-custom-chip",onClick:()=>v(192,336,"BUSINESSCARD"),children:[p==="BUSINESSCARD"?e.jsx("span",{style:{color:"green"},children:"✓"}):null,"Business card 3.5 x 2 in"]})})]})]});return e.jsx("div",{children:u()})}const ve=(m,r,n,a="png",l)=>new Promise((d,x)=>{const p=document.createElement("canvas"),j=JSON.parse(m),c=crypto.randomUUID();p.width=n,p.height=r;const v=new B.fabric.StaticCanvas(p,{selection:!1,height:j.height,width:j.width});v.loadFromJSON(j,function(){if(v.renderAll(),a.toLowerCase()==="svg"){const u=v.toSVG(),w=new Blob([u],{type:"image/svg+xml"});l&&pt(w,"mypixia.svg"),d(new File([w],`${c}.svg`,{type:"image/svg+xml"}))}else if(a.toLowerCase()==="pdf"){const u=v.toDataURL("image/jpeg",1);import("jspdf").then(w=>{const i=new w.jsPDF({orientation:"landscape",unit:"px",format:[p.width,p.height]});i.addImage(u,"JPEG",0,0,p.width,p.height);const f=i.output("datauristring").split(",")[1],b=cn(f,"application/pdf"),s=new File([b],`${c}.pdf`,{type:"application/pdf"}),k=`${c}.pdf`;l&&pt(s,k),d(s)}).catch(w=>{console.error("Error loading jsPDF: ",w),x(w)})}else{let u,w="image/png",i="png";switch(a.toLowerCase()){case"jpeg":u=v.toDataURL("image/jpeg",1),w="image/jpeg",i="jpg";break;case"webp":u=v.toDataURL("image/webp",1),w="image/webp",i="webp";break;default:u=v.toDataURL("image/png",1);break}const y=atob(u.split(",")[1]),f=new Array(y.length);for(let _=0;_<y.length;_++)f[_]=y.charCodeAt(_);const b=new Uint8Array(f),s=new File([b],`${c}.${i}`,{type:w}),k=`${c}.${i}`;l&&pt(s,k),d(s)}})}),lt=async({fabricString:m,height:r,width:n,download:a})=>{const l=JSON.parse(m),d=crypto.randomUUID();return new Promise((x,p)=>{const j=document.createElement("canvas"),c=new B.fabric.Canvas(j,{height:r,width:n});c.loadFromJSON(l,()=>{c.setBackgroundImage(null,c.renderAll.bind(c));const v=c.toDataURL({format:"png"});fetch(v).then(u=>u.blob()).then(u=>{const w=new File([u],`${d}.png`,{type:"image/png"}),i=`${d}.png`;a&&pt(w,i),x(w)}).catch(u=>p(u))})})},pt=(m,r)=>{const n=URL.createObjectURL(m),a=document.createElement("a");a.href=n,a.download=r,document.body.appendChild(a),a.click(),document.body.removeChild(a),URL.revokeObjectURL(n)};function cn(m,r){const n=atob(m),a=new Array(n.length);for(let d=0;d<n.length;d++)a[d]=n.charCodeAt(d);const l=new Uint8Array(a);return new Blob([l],{type:r})}const an=({children:m})=>sr.createPortal(m,document.getElementById("apc-mpx-editor-modal-root"));function xt(m){const{isOpen:r,onClose:n,children:a}=m;return r?e.jsx(an,{children:e.jsx("div",{className:"apc-mpx-widget-modal-overlay",children:e.jsxs("div",{className:"apc-mpx-widget-modal",children:[e.jsx("button",{style:{color:"red"},className:"apc-mpx-widget-modal-close-btn",onClick:n,children:"Close"}),e.jsx("div",{className:"apc-mpx-widget-modal-content",children:a})]})})}):null}const je=(m,r)=>{m=m.startsWith("#")?m:`#${m}`;let n=parseInt(m.slice(1,3),16),a=parseInt(m.slice(3,5),16),l=parseInt(m.slice(5,7),16);return n=parseInt(n*(100-r)/100),a=parseInt(a*(100-r)/100),l=parseInt(l*(100-r)/100),n=n.toString(16).padStart(2,"0"),a=a.toString(16).padStart(2,"0"),l=l.toString(16).padStart(2,"0"),`#${n}${a}${l}`};function Pt(m){const[r,n]=h.useState(""),{apcCanvasJSON:a,height:l,width:d}=m;return h.useEffect(()=>{const x=document.createElement("canvas"),p=JSON.parse(a);x.width=d,x.height=l;const j=new B.fabric.StaticCanvas(x,{selection:!1,height:p.height,width:p.width});j.loadFromJSON(p,function(){j.renderAll();const c=j.toDataURL("image/png",1);n(c)})},[]),r?e.jsx("div",{children:e.jsx("div",{className:"apc-mpx-widget-responsive-image-container",style:{cursor:"pointer",maxHeight:"500px",maxWidth:"500px"},children:e.jsx("img",{src:r,alt:"mypixia cool design",className:"apc-mpx-widget-responsive-image"})})}):"...processing"}function ln(m){const{theme:r,apcCanvasInstance:n}=m,[a,l]=h.useState(!1),[d,x]=h.useState(),p=()=>{l(!0)},j=()=>{l(!1)},c=()=>{if(!n)return null;const v=JSON.stringify(n);return e.jsxs(xt,{isOpen:a,onClose:j,children:[e.jsx(Pt,{apcCanvasJSON:v,height:n.height,width:n.width}),e.jsx("div",{children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:5},children:[e.jsx("div",{children:e.jsx(ce.FacebookShareButton,{url:d,children:e.jsx(ce.FacebookIcon,{size:32,round:!0})})}),e.jsx("div",{children:e.jsx(ce.TwitterShareButton,{url:d,title:"Hello",children:e.jsx(ce.XIcon,{size:32,round:!0})})}),e.jsx("div",{children:e.jsx(ce.TelegramShareButton,{url:d,title:"Hello",children:e.jsx(ce.TelegramIcon,{size:32,round:!0})})}),e.jsx("div",{children:e.jsx(ce.WhatsappShareButton,{url:d,title:"Hello",separator:":: ",children:e.jsx(ce.WhatsappIcon,{size:32,round:!0})})}),e.jsx("div",{children:e.jsx(ce.LinkedinShareButton,{url:d,children:e.jsx(ce.LinkedinIcon,{size:32,round:!0})})}),e.jsx("div",{children:e.jsx(ce.PinterestShareButton,{url:"https://static.mypixia.com",media:d,children:e.jsx(ce.PinterestIcon,{size:32,round:!0})})}),e.jsx("div",{children:e.jsx(ce.RedditShareButton,{url:d,title:"Hello",windowWidth:660,windowHeight:460,children:e.jsx(ce.RedditIcon,{size:32,round:!0})})}),e.jsx("div",{children:e.jsx(ce.InstapaperShareButton,{url:d,title:"Hello",children:e.jsx(ce.InstapaperIcon,{size:32,round:!0})})})]})}),e.jsx("hr",{}),e.jsx("br",{}),e.jsx("button",{autoFocus:!0,type:"button",className:"apc-mpc-widget-btn",onClick:()=>j(),style:{backgroundColor:"red",color:"#ffffff",float:"right"},children:"Close"})]})};return e.jsxs(h.Fragment,{children:[e.jsxs("button",{className:"apc-mpc-widget-btn",onClick:()=>p(),role:"dialog",style:{backgroundColor:je(r.primaryColor,40),color:"#ffffff",float:"right"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:"#ffffff",d:Mr})}),"  Share"]}),c()]})}function dn(m){const{theme:r,apiKey:n,apcCanvasInstance:a,updateSelectedSections:l,updateActiveSection:d,accesories:x,getDesignFormats:p}=m,[j,c]=h.useState(!1),[v,u]=h.useState(),w=()=>{c(!0)},i=()=>{c(!1)},y=()=>({getPDF:()=>{const b=JSON.stringify(a);return ve(b,a.height,a.width,"pdf",!0).then(s=>s)},getPNG:()=>{const b=JSON.stringify(a);return ve(b,a.height,a.width,"png",!0).then(s=>s)},getSVG:()=>{const b=JSON.stringify(a);return ve(b,a.height,a.width,"svg",!0).then(s=>s)},getJPEG:()=>{const b=JSON.stringify(a);return ve(b,a.height,a.width,"jpeg",!0).then(s=>s)},getWEBP:()=>{const b=JSON.stringify(a);return ve(b,a.height,a.width,"webp",!0).then(s=>s)}}),f=()=>{if(!a)return null;const b=JSON.stringify(a);return e.jsxs(xt,{isOpen:j,onClose:i,children:[e.jsxs("div",{style:{display:"flex",flexDirection:"column"},children:[e.jsx("h3",{style:{float:"left"},children:"Download"}),e.jsx("div",{children:e.jsx(Pt,{apcCanvasJSON:b,height:a.height,width:a.width})}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:5},children:[e.jsx("div",{style:{color:je(r.primaryColor,50),fontWeight:"bold",textDecoration:"underline",cursor:"pointer"},onClick:()=>y().getPDF(),children:"PDF"}),e.jsx("div",{style:{color:je(r.primaryColor,50),fontWeight:"bold",textDecoration:"underline",cursor:"pointer"},onClick:()=>y().getSVG(),children:"SVG"}),e.jsx("div",{style:{color:je(r.primaryColor,50),fontWeight:"bold",textDecoration:"underline",cursor:"pointer"},onClick:()=>y().getPNG(),children:"PNG"}),e.jsx("div",{style:{color:je(r.primaryColor,50),fontWeight:"bold",textDecoration:"underline",cursor:"pointer"},onClick:()=>y().getJPEG(),children:"JPEG"}),e.jsx("div",{style:{color:je(r.primaryColor,50),fontWeight:"bold",textDecoration:"underline",cursor:"pointer"},onClick:()=>y().getWEBP(),children:"WEBP"})]})]}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("hr",{}),e.jsx("br",{}),e.jsx("button",{autoFocus:!0,type:"button",className:"apc-mpc-widget-btn",onClick:()=>i(),style:{backgroundColor:"red",color:"#ffffff",float:"right"},children:"Close"})]})};return e.jsxs(h.Fragment,{children:[e.jsxs("button",{className:"apc-mpc-widget-btn",onClick:()=>w(),role:"dialog",style:{backgroundColor:je(r.primaryColor,40),color:"#ffffff",float:"right"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 512 512",children:e.jsx("path",{fill:"#ffffff",d:Rr})}),"  Download"]}),f()]})}function pn(m){var Me;const{theme:r,activeSection:n,selectedObjectType:a,renderQuickActions:l,renderActionItems:d,canvasEl:x,zoomIn:p,zoomOut:j,apcCanvasInstance:c,setActiveSection:v,saveActiveDesign:u,reloadTabs:w,initProductName:i,historyRef:y,currentState:f,setCurrentState:b,setHistory:s,activeTabName:k,isPlainColor:_,selectedProduct:z,isMobile:L,supportedProductColors:F,canvasId:R}=m,[E,P]=h.useState(),[X,Q]=h.useState([]),[oe,te]=h.useState(0),[de,xe]=h.useState(!1),Se=h.useRef(null),[Ie,_e]=h.useState(!1),[Be,Je]=h.useState(null),[re,rt]=h.useState(),[De,Ge]=h.useState(),[Fe,He]=h.useState(),[ke,J]=h.useState(!0),[Ee,Te]=h.useState(),ne=()=>{_e(!0),xe(!1)},ze=()=>{_e(!1)},nt=()=>{xe(N=>!N)};h.useEffect(()=>{const N=A=>{Se.current&&Se.current.contains(A.target)||xe(!1)};return document.addEventListener("mousedown",N),()=>{document.removeEventListener("mousedown",N)}},[]),h.useEffect(()=>{(async()=>{var A,G;if(E)try{const D=await et(E);He(D),(A=D==null?void 0:D.misc)!=null&&A.colorSettings&&rt(D.misc.colorSettings),((G=D==null?void 0:D.misc)==null?void 0:G.type)!=="subsection"&&Te(D)}catch(D){console.error("Error fetching tab data: ",D)}})()},[E,w]),h.useEffect(()=>{(async()=>{const A=await Le();let G=A?A.filter(D=>{var ee;return D.classification!=="cart"&&((ee=D.misc)==null?void 0:ee.type)!=="subsection"}).map(D=>D.id):[];G.length===0&&G.push("design"),oe===0&&P(G[0]),Q(G)})()},[oe,w]);const ue=()=>{c&&(c.clear(),c.renderAll())},pe=N=>{if(!c)return;c.backgroundColor="transparent",c&&c.requestRenderAll();let A=c.backgroundImage;A&&(A.filters=[],A.filters.push(new B.fabric.Image.filters.BlendColor({color:N})),A.applyFilters(),c&&c.requestRenderAll(),Ge(N),u(c,Fe))},be=()=>{if(!(!re||(re==null?void 0:re.length)<=1))return re.map((N,A)=>e.jsxs(h.Fragment,{children:[e.jsx("div",{role:"button",className:"apc-mpx-widget-circle",style:{backgroundColor:N,cursor:"pointer",border:"solid 1px #ffffff"},onClick:()=>pe(N)})," "]},A))},Pe=async(N,A)=>{var me,ye;const G=(ye=(me=c==null?void 0:c.backgroundImage)==null?void 0:me.filters[0])==null?void 0:ye.color,D=await et(N);if(!D)return;const ee=D!=null&&D.content?JSON.parse(D.content):null;ee&&c?(c.clear(),c.setBackgroundImage(null),c.loadFromJSON(ee,()=>{var se;c.renderAll(),v(D),((se=D==null?void 0:D.misc)==null?void 0:se.type)!=="subsection"?(sessionStorage.setItem("apc_x_activeTab",N),J(!0)):(J(!1),G&&pe(G)),P(N)})):console.error("Failed to load JSON content for section:",N)},Ye=()=>X.map(N=>e.jsx("button",{className:`tablinks ${E===N?"active":null}`,onClick:()=>Pe(N),children:N},N)),ge=()=>{Le().then(N=>{if(N&&N.length>0){const A=N[0],G=JSON.parse(A.content);c.loadFromJSON(G,function(){c.off("object:modified"),c.on({"object:modified":D=>{u(c,A)}}),P(A.id),sessionStorage.setItem("apc_x_activeTab",A.id),v(A),te(oe+1),c&&c.renderAll()})}else{let A="design";const G=JSON.stringify(c);$e(A,"general",G,null).then(D=>{et(A).then(ee=>{const me=JSON.parse(ee.content);c.loadFromJSON(me,function(){c.off("object:modified"),c.on({"object:modified":ye=>{u(c,ee)}}),P(A),sessionStorage.setItem("apc_x_activeTab",A),v(ee),te(oe+1),c&&c.renderAll()})})})}})},st=()=>{Ur(E).then(N=>{ze(),ge()})},Ke=()=>c?e.jsxs(xt,{isOpen:Ie,onClose:ze,children:[e.jsx("div",{children:e.jsxs("h3",{style:{marginLeft:"30%",color:"green"},children:["Are you sure you want to delete ",e.jsx("u",{children:E})," ?"]})}),e.jsx("br",{}),e.jsx("br",{}),e.jsx("hr",{}),e.jsx("br",{}),e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:10},children:[e.jsx("div",{children:e.jsx("button",{autoFocus:!0,type:"button",className:"apc-mpc-widget-btn",onClick:()=>st(),style:{backgroundColor:"green",color:"#ffffff"},children:"Yes"})}),e.jsx("div",{children:e.jsx("button",{autoFocus:!0,type:"button",className:"apc-mpc-widget-btn",onClick:()=>ze(),style:{backgroundColor:"red",color:"#ffffff",float:"right"},children:"Close"})})]})]}):null,Ve=()=>e.jsxs("div",{className:"apc-mpx-widget-button-group-container",children:[e.jsx("div",{className:"apc-mpx-widget-generic-icon",onClick:nt,children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 448 512",children:e.jsx("path",{fill:"#ffffff",d:Er})})}),de&&e.jsxs("div",{className:"apc-mpx-widget-popper-container",ref:Se,children:[e.jsx("div",{className:"apc-mpx-widget-popper-arrow-up"}),e.jsxs("ul",{autoFocus:!0,style:{paddingInlineStart:"2px",marginBlockStart:"6px",marginBlockEnd:"2px",fontSize:"13px",padding:"3px",color:je(r.primaryColor,80),width:"max-content"},children:[e.jsxs("li",{className:"apc-mpx-widget-popper-li",style:{height:"25px",cursor:"pointer",borderBottom:"1px solid #d7d7d7"},onClick:()=>ne(),role:"dialog",children:[e.jsx("svg",{className:"apc-mpx-hover-div",xmlns:"http://www.w3.org/2000/svg",height:"16",width:"14",viewBox:"0 0 448 512",children:e.jsx("path",{d:Dt,fill:je(r.primaryColor,80)})}),"  Delete"]}),e.jsxs("li",{className:"apc-mpx-widget-popper-li",style:{height:"25px",cursor:"pointer",marginBlockStart:"5px"},onClick:()=>ue(),role:"dialog",children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",className:"apc-mpx-hover-div",width:"14",viewBox:"0 0 576 512",children:e.jsx("path",{d:Tr,fill:je(r.primaryColor,80)})}),"  Clear"]})]})]})]}),it=N=>{var ye,se,qe,Ue;const A=c.width*5,G=c.height*5,D=JSON.parse(Ee.content),ee=(se=(ye=D==null?void 0:D.backgroundImage)==null?void 0:ye.filters[0])==null?void 0:se.color,me=(Ue=(qe=c==null?void 0:c.backgroundImage)==null?void 0:qe.filters[0])==null?void 0:Ue.color;et(N.sectionName).then(async we=>{if(we){const o=we!=null&&we.content?JSON.parse(we.content):null;o&&c?(await c.loadFromJSON(o,()=>{c.renderAll(),v(we),P(N.sectionName);const I=JSON.stringify(c),O={};O.id=N.sectionName,O.classification=z==null?void 0:z.name,O.json=I,O.misc={sectionName:N.sectionName,sectionImage:N.sectionImage,type:N.type},c.off("object:modified"),c.on({"object:modified":C=>{u(c,O)}})}),pe(me),ke||J(!0)):console.error("Failed to load JSON content for section:",N.sectionName)}else c&&c.clear(),N.type="subsection",B.fabric.Image.fromURL(N.sectionImage,function(o){o.width=A,o.height=G,o.scaleToWidth(A),o.scaleToHeight(G),c.setBackgroundImage(o),(De||ee)&&(o.filters=[],o.filters.push(new B.fabric.Image.filters.BlendColor({color:De||ee})),o.applyFilters());const I=JSON.stringify(c),O={};O.id=N.sectionName,O.classification=Ee.id,O.json=I,O.misc={sectionName:N.sectionName,sectionImage:N.sectionImage,type:N.type},c.off("object:modified"),c.on({"object:modified":C=>{u(c,O)}}),$e(N.sectionName,E,I,{...N}).then(C=>{c&&(c.renderAll(),ke&&J(!1),P(N.sectionName),te(oe+1))})},{crossOrigin:"anonymous"})})},ot=()=>{if(!Fe)return null;let N=[];if(z){const A=z.sections.map(G=>({...G,type:"subsection"}));N.push(...A),N.push({sectionName:z==null?void 0:z.name,sectionImage:z==null?void 0:z.mainImage,type:"main"})}return N=N==null?void 0:N.map(A=>({...A,active:A.sectionName===E})),(N==null?void 0:N.length)<1?null:N==null?void 0:N.map((A,G)=>{var D,ee;return e.jsxs("div",{onClick:()=>it(A),style:{position:"relative",backgroundColor:"#ff000026",border:"solid 1px #ffffff",padding:"2px",borderRadius:"6px",cursor:"pointer",textAlign:"center"},children:[A.active&&e.jsx("div",{style:{position:"absolute",top:"5px",right:"5px",width:"12px",height:"12px",backgroundColor:"green",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx("span",{style:{color:"white",fontSize:"8px",fontWeight:"bold"},children:"✓"})}),!L&&e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",marginBottom:"5px"},children:e.jsx("img",{src:A==null?void 0:A.sectionImage,width:50,height:50,alt:(A==null?void 0:A.sectionName)||"section image",style:{borderRadius:"6px"}})}),e.jsx("div",{style:{fontSize:"12px",color:"#333"},children:((D=A==null?void 0:A.sectionName)==null?void 0:D.length)>5?`${(ee=A==null?void 0:A.sectionName)==null?void 0:ee.substring(0,5)}...`:(A==null?void 0:A.sectionName)||"view"})]},G)})},Xe=()=>{if(y.current.length>0){const N=y.current.pop();c.loadFromJSON(N,()=>{c.renderAll(),b(N)})}};return e.jsxs(h.Fragment,{children:[e.jsx("div",{className:"tab",children:Ye()}),e.jsxs("div",{style:{display:"flex",backgroundColor:r.primaryColor,flexDirection:"row",padding:"3px",color:"#ffffff",minHeight:"30px"},children:[e.jsx("div",{style:{flexBasis:"40%",marginTop:"8px"},children:e.jsx("div",{style:{display:"flex",flexDirection:"row"},children:e.jsxs("div",{children:[e.jsx("button",{style:{border:"none",backgroundColor:"transparent",color:"#ffffff",fontWeight:"bold",cursor:"pointer",height:"12px"},onClick:()=>Xe(),title:"UNDO",children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"25",className:"apc-mpx-hover-div",width:"25",viewBox:"0 0 16 16",children:e.jsx("path",{d:zr,fill:"#ffffff"})})})," "]})})}),e.jsx("div",{style:{flexBasis:"20%"},children:a?l():null}),e.jsx("div",{style:{flexBasis:"40%",marginTop:"8px"},children:a?d():null}),Ve()]}),e.jsxs("div",{id:"apc-mpx-editor-canvas-container",style:{minHeight:"90vh",padding:"3px",overflowX:"hidden",position:"relative"},children:[e.jsxs("div",{style:{display:"flex",flexDirection:"row"},children:[e.jsx("div",{children:e.jsx("div",{style:{zIndex:1e3,overflow:"hidden",position:"absolute",marginLeft:"1%",display:"flex",flexDirection:"row",marginTop:"1.3rem"},children:((Me=z==null?void 0:z.sections)==null?void 0:Me.length)>0?ot():null})}),e.jsx("div",{children:e.jsx("canvas",{id:R??"apc-mpx-editor-canvas",ref:x,height:1e3})}),re&&(_||(n==null?void 0:n.plainColor)==="Y")&&ke&&(re==null?void 0:re.length)>1?e.jsxs("div",{style:{zIndex:1e3,overflow:"hidden",position:"absolute",marginLeft:"90%"},children:[e.jsx("br",{}),e.jsx("div",{style:{backgroundColor:"#ff000026",border:"solid 1px #ccc",padding:"3px",borderRadius:"6px"},children:re&&(re==null?void 0:re.length)>1?be():null})]}):null]}),e.jsxs("div",{style:{marginLeft:"45%"},children:[e.jsx("br",{}),e.jsx("button",{style:{height:"35px",width:"65px",cursor:"pointer"},"aria-label":"zoom in",onClick:()=>p(),children:"+"}),e.jsx("button",{style:{height:"35px",width:"65px",cursor:"pointer"},"aria-label":"zoom out",onClick:()=>j(),children:"-"})]})]}),Ke()]})}function hn({data:m,theme:r,apcCanvasInstance:n,closeMobileModalSecondaryPanel:a,isMobile:l}){const[d,x]=h.useState({}),p=u=>{x(w=>({...w,[u]:!w[u]}))},j=async u=>{const w=await Ht(u);w&&B.fabric.Image.fromURL(w,i=>{i.set({left:100,top:100,scaleX:.3,scaleY:.3}),n.add(i),n.renderAll(),l&&a(!0)})},c=(u,w="",i=0)=>e.jsx("ul",{style:{listStyleType:"none",paddingLeft:`${i*20}px`,margin:"0"},children:Object.keys(u).map(y=>{const f=`${w}/${y}`,b=d[f];return u[y].type==="image"?e.jsx("li",{children:e.jsx("div",{onClick:()=>j(u[y].url),style:{cursor:"pointer"},children:e.jsx("img",{src:u[y].url,alt:y,style:{width:"100px",height:"auto"}})})},f):e.jsxs("li",{children:[e.jsxs("div",{onClick:()=>p(f),style:{cursor:"pointer",display:"flex",alignItems:"center",fontWeight:"bold",color:r.primaryColorLight},children:[e.jsx("div",{style:{marginRight:"5px"},children:b?e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",height:15,width:15,children:e.jsx("path",{d:Dr,fill:r.primaryColorLight})}):e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512",height:15,width:15,children:e.jsx("path",{d:Fr,fill:r.primaryColorLight})})}),y]}),b&&c(u[y],f,i+1)]},f)})}),v=un(m);return e.jsx("div",{children:c(v)})}function un(m){const r={};return m.forEach(n=>{const a=n.name.split("/");let l=r;a.forEach((d,x)=>{l[d]||(l[d]=x===a.length-1?n:{}),l=l[d]})}),r}function fn(m){const{apcCanvasInstance:r,theme:n,apiEndpoint:a,isMobile:l,closeMobileModalSecondaryPanel:d,apiKey:x}=m,p=`${a}/api/v1/designer`,[j,c]=h.useState([]),[v,u]=h.useState(!1),[w,i]=h.useState(!1),[y,f]=h.useState(!1),b=sessionStorage.getItem("apc_x_sub_status"),s=sessionStorage.getItem("apc_x_stickers");h.useEffect(()=>{u(!0),(async()=>{b==="active"?i(!0):await _(),s?(c(JSON.parse(s)),u(!1)):await k()})()},[]);const k=()=>{u(!0);const z=`${p}/get-stickers`;Ce.get(z).then(L=>{L.data.object&&(c(L.data.object.contents),sessionStorage.setItem("apc_x_stickers",JSON.stringify(L.data.object.contents)))}).catch(L=>{console.error("Error fetching data:",L)}).finally(()=>{u(!1)})},_=()=>{u(!0);const z=`${p}/get-subscription-status/${x}`;Ce.get(z).then(L=>{L.data.object&&L.data.object==="active"&&(sessionStorage.setItem("apc_x_sub_status","active"),i(!0))}).catch(L=>{sessionStorage.setItem("apc_x_sub_status","")}).finally(()=>{u(!1),f(!0)})};return!w&&!v&&y?e.jsx(ut,{theme:n}):w&&j.length>0&&!v?e.jsx(h.Fragment,{children:e.jsx("div",{style:{padding:"10px"},children:e.jsx(hn,{data:j,theme:n,apcCanvasInstance:r,isMobile:l,closeMobileModalSecondaryPanel:d})})}):e.jsx("div",{children:e.jsx(ft,{})})}const Vt=h.forwardRef((m,r)=>{const{theme:n=ar,canvasId:a=null,readOnly:l=!1,apiKey:d=null,apiEndpoint:x,enabledModules:p=["TXT","STICKERS","SHAPES","ICONS","IMAGE","QUOTE","BACKGROUND","QRCODE","BARCODE"],actionButtons:j={share:!1,download:!0},initInstance:c=null,initCategory:v=null,additionalActionButton:u=null,initProductName:w,isPlainColor:i,product:y={name:"Premium Crew Neck T-Shirt",category:"Tshirts",description:"Men's crew neck t-shirts",plainColor:"Y",mainImage:"https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",colorSettings:["#FF0000","#0000FF","#008000","#000000","#FFFFFF","#808080","#FFFF00"],sections:[{sectionName:"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"}]}}=m,[f,b]=h.useState(p[0]),[s,k]=h.useState(),_=h.useRef(null),[z,L]=h.useState(),[F,R]=h.useState(!1),[E,P]=h.useState(1),X=.1,[Q,oe]=h.useState(1),[te,de]=h.useState([]),[xe,Se]=h.useState(null),[Ie,_e]=h.useState(null),[Be,Je]=h.useState(0),[re,rt]=h.useState(),[De,Ge]=h.useState(null),Fe=h.useRef([]),[He,ke]=h.useState(null),[J,Ee]=h.useState(!1),[Te,ne]=h.useState(!1);h.useEffect(()=>{const o=()=>Ee(window.innerWidth<600);return o(),window.addEventListener("resize",o),()=>window.removeEventListener("resize",o)},[]),h.useEffect(()=>{var K;const o=document.getElementById("apc-mpx-editor-canvas-container"),I=document.getElementById("apc-mpx-editor-canvas-container");if(!_.current||!o||!I){console.error("Canvas element is not mounted yet!");return}o.style.position="relative";const O={isDrawingMode:!1,selection:!0,selectionBorderColor:"#008000",height:I.offsetHeight,width:o.offsetWidth,enableRetinaScaling:!0};let C,W;if(l)C=new B.fabric.StaticCanvas(_.current,O);else if(C=new B.fabric.Canvas(_.current,O),ze(o).updateRulers(C.getWidth(),C.getHeight()),Ie)W=JSON.parse(Ie),C.loadFromJSON(W,function(){});else if(c){let T;try{T=JSON.parse(c)}catch(ae){console.error("Failed to parse initInstance",ae)}C&&T?C.loadFromJSON(T,function(){}):console.error("Canvas or InitInstance is not properly initialized")}else{const T=new B.fabric.Textbox("Something cool!",{width:300,left:250,top:300,fontFamily:"aclonica",fill:"#6a45d2",rotate:20});T.shadow={color:"rgba(0,0,0,0.5)",blur:10,offsetX:5,offsetY:5},C.add(T),y!=null&&y.mainImage&&((K=B.fabric.Image)==null||K.fromURL(y.mainImage,function(ae){ae.height=I.offsetHeight,ae.width=o.offsetWidth,ae.scaleToWidth(I.offsetHeight),ae.scaleToHeight(o.offsetWidth),C.setBackgroundImage(ae),C.setActiveObject(T),pe(T),C&&(C.renderAll(),N(C))},{crossOrigin:"anonymous"}))}return C.on({"selection:updated":H=>{const T=C.getActiveObject();pe(T)},"selection:created":H=>{const T=C.getActiveObject();pe(T)},"selection:cleared":H=>{be()},"object:modified":H=>{N(C),ue(C)},"object:added":H=>{ue(C)},"object:removed":H=>{ue(C)},"object:created":H=>{ue(C)}}),k(C),oe(o.offsetWidth),()=>{k(null),C.off({"selection:updated":H=>{const T=C.getActiveObject();pe(T)},"selection:created":H=>{const T=C.getActiveObject();pe(T)},"selection:cleared":H=>{be()},"object:modified":H=>{N(C),ue(C)},"object:added":H=>{ue(C)},"object:removed":H=>{ue(C)},"object:created":H=>{ue(C)}}),C.dispose()}},[Ie]),h.useEffect(()=>(nt(),document.addEventListener("keydown",o=>Me(o)),()=>{document.removeEventListener("keydown",o=>Me(o))}),[s]),h.useEffect(()=>{if(s){const o=document.getElementById("apc-mpx-editor-canvas-container"),I=()=>{const O=o.offsetWidth/Q;s.setZoom(O)};return window.addEventListener("resize",I),()=>{window.removeEventListener("resize",I)}}},[s,E]),h.useEffect(()=>{const o=()=>{if(s&&_.current){const I=s.getWidth(),O=s.getHeight(),C=window.innerWidth,W=window.innerHeight,K=C/I,H=W/O,T=Math.min(K,H);s.setZoom(T/1.4),s.renderAll()}};return J&&(o(),window.addEventListener("resize",o)),()=>window.removeEventListener("resize",o)},[s,J]),h.useImperativeHandle(r,()=>({getDesign:()=>G()}),[s]),h.useEffect(()=>{if(a&&s){const o=document.getElementById(a);o&&(o.instance={getDesignFormats:G})}},[a,s]);const ze=o=>{const O=document.createElement("div");O.id="horizontal-ruler",O.style.cssText=`
-        position: absolute;
-        top: 0;
-        left: 20px;
-        right: 0;
-        height: 20px;
-        background: #f0f0f0;
-        border-bottom: 1px solid #ccc;
-        z-index: 1000;
-        overflow: hidden;
-    `;const C=document.createElement("div");C.id="vertical-ruler",C.style.cssText=`
-        position: absolute;
-        top: 20px;
-        left: 0;
-        bottom: 0;
-        width: 20px;
-        background: #f0f0f0;
-        border-right: 1px solid #ccc;
-        z-index: 1000;
-        overflow: hidden;
-    `;const W=document.createElement("div");W.style.cssText=`
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 20px;
-        height: 20px;
-        background: #e0e0e0;
-        border-right: 1px solid #ccc;
-        border-bottom: 1px solid #ccc;
-        z-index: 1001;
-    `;const K=(T,ae)=>{T.innerHTML="";for(let ie=0;ie<=ae;ie+=10){const Re=document.createElement("div"),Ne=ie%50===0;if(Re.style.cssText=`
-                position: absolute;
-                left: ${ie}px;
-                top: ${Ne?"8px":"12px"};
-                width: 1px;
-                height: ${Ne?"12px":"8px"};
-                background: #666;
-            `,T.appendChild(Re),Ne&&ie>0){const Oe=document.createElement("span");Oe.textContent=ie,Oe.style.cssText=`
-                    position: absolute;
-                    left: ${ie-8}px;
-                    top: 2px;
-                    font-size: 10px;
-                    color: #333;
-                    font-family: Arial, sans-serif;
-                `,T.appendChild(Oe)}}},H=(T,ae)=>{T.innerHTML="";for(let ie=0;ie<=ae;ie+=10){const Re=document.createElement("div"),Ne=ie%50===0;if(Re.style.cssText=`
-                position: absolute;
-                top: ${ie}px;
-                left: ${Ne?"8px":"12px"};
-                height: 1px;
-                width: ${Ne?"12px":"8px"};
-                background: #666;
-            `,T.appendChild(Re),Ne&&ie>0){const Oe=document.createElement("span");Oe.textContent=ie,Oe.style.cssText=`
-                    position: absolute;
-                    top: ${ie-6}px;
-                    left: 2px;
-                    font-size: 10px;
-                    color: #333;
-                    font-family: Arial, sans-serif;
-                    transform: rotate(-90deg);
-                    transform-origin: center;
-                `,T.appendChild(Oe)}}};return o.appendChild(O),o.appendChild(C),o.appendChild(W),{horizontalRuler:O,verticalRuler:C,corner:W,updateRulers:(T,ae)=>{K(O,T),H(C,ae)}}},nt=()=>{Le().then(o=>{if(o&&o.length>0){const I=o[0].content;w===o[0].id&&_e(I)}})},ue=o=>{if(o){const I=o.toJSON();Ge(O=>(Fe.current.push(O),I))}},pe=o=>{L(o.type)},be=()=>{L(null)},Pe=()=>{s.getActiveObject()&&s.remove(s.getActiveObject())},Ye=()=>{const o=s.getActiveObject(),I=B.fabric.util.object.clone(o);I.set({left:o.left+20,top:o.top+20}),s.add(I)},ge=o=>{Se(o)},st=o=>{let I=te;I.push(o),de(I)},Ke=o=>{o==="lock"?s.getActiveObject().set({lockMovementX:!0,lockMovementY:!0}):s.getActiveObject().set({lockMovementX:!1,lockMovementY:!1})},Ve=()=>{s&&(s.getActiveObject().bringForward(),s.renderAll())},it=()=>{s&&(s.getActiveObject().sendBackwards(),s.renderAll())},ot=()=>{const o=E+X;P(o),s.setZoom(o)},Xe=()=>{const o=Math.max(E-X,X);P(o),s.setZoom(o)},Me=o=>{s&&s.getActiveObject()&&s.getActiveObject().type!=="textbox"&&o.keyCode===8&&Pe()},N=o=>{const I=sessionStorage.getItem("apc_x_activeTab");if(I)et(I).then(O=>{if(O){const C=JSON.stringify(o);$e(O.id,O.classification,C,O.misc).then(W=>{})}else{const C=JSON.stringify(o);$e(y.name??"design","general",C,y).then(W=>{})}});else{const O=JSON.stringify(o);$e(y.name??"design","general",O,y).then(C=>{})}},A=(o,I)=>{const O=JSON.stringify(o);$e(I.id,I.classification,O,I.misc).then(C=>{})},G=()=>({getPDF:()=>{const{height:o,width:I}=s;return Le().then(async O=>{let C=[];for(let W in O){let K,H;await ve(O[W].content,o,I,"pdf").then(T=>{K=T}),await lt({fabricString:O[W].content,height:o,width:I}).then(T=>{H=T}),C.push({fullDesign:K,printReady:H})}return C})},getPNG:()=>{const{height:o,width:I}=s;return Le().then(async O=>{let C=[];for(let W in O){let K,H;await ve(O[W].content,o,I,"png").then(T=>{K=T}),await lt({fabricString:O[W].content,height:o,width:I}).then(T=>{H=T}),C.push({fullDesign:K,printReady:H})}return C})},getSVG:()=>{const{height:o,width:I}=s;return Le().then(async O=>{let C=[];for(let W in O){let K,H;await ve(O[W].content,o,I,"svg").then(T=>{K=T}),await lt({fabricString:O[W].content,height:o,width:I}).then(T=>{H=T}),C.push({fullDesign:K,printReady:H})}return C})},getJPEG:()=>{const{height:o,width:I}=s;return Le().then(async O=>{let C=[];for(let W in O){let K,H;await ve(O[W].content,o,I,"jpeg").then(T=>{K=T}),await lt({fabricString:O[W].content,height:o,width:I}).then(T=>{H=T}),C.push({fullDesign:K,printReady:H})}return C})},getWEBP:()=>{const{height:o,width:I}=s;return Le().then(async O=>{let C=[];for(let W in O){let K,H;await ve(O[W].content,o,I,"webp").then(T=>{K=T}),await lt({fabricString:O[W].content,height:o,width:I}).then(T=>{H=T}),C.push({fullDesign:K,printReady:H})}return C})},getImageActiveTab:()=>{const o=sessionStorage.getItem("apc_x_activeTab");return et(o).then(I=>ve(I.content,s.height,s.width,"png").then(O=>{let C={};return C.file=O,C.height=s.height,C.width=s.width,C}))}}),D=()=>e.jsxs("div",{style:{marginTop:"6px",fontWeight:"bold"},children:["Replace Image: ",e.jsx("input",{type:"file",accept:"image/*",onChange:o=>ee(o)}),e.jsx("br",{})]}),ee=(o,I)=>{{const O=s.getActiveObject(),C=o.target.files[0],W=new FileReader;W.onload=function(K){const H=K.target.result;O.setSrc(H,function(T){T.set({angle:30}),s&&s.renderAll()})},W.readAsDataURL(C)}s&&s.renderAll()},me=()=>{switch(f){case"ICONS":return e.jsx(en,{apcCanvasInstance:s,theme:n,apiKey:d,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});case"TEMPLATES":return e.jsx(Wr,{apcCanvasInstance:s,theme:n,apiKey:d,apiEndpoint:x,reloadTabs:o=>Je(o),updateActiveSection:o=>ge(o),initCategory:v,currentTabNo:Be,initInstance:c,setActiveTab:o=>ke(o),isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});case"TXT":return e.jsx(qr,{apcCanvasInstance:s,theme:n,apiKey:d,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});case"IMAGE":return e.jsx(Zr,{apcCanvasInstance:s,theme:n,apiKey:d,apiEndpoint:x,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});case"STICKERS":return e.jsx(fn,{apcCanvasInstance:s,theme:n,apiEndpoint:x,isMobile:J,apiKey:d,closeMobileModalSecondaryPanel:o=>ne(!o)});case"SHAPES":return e.jsx(_t,{apcCanvasInstance:s,theme:n,apiKey:d,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});case"QUOTE":return e.jsx(tn,{apcCanvasInstance:s,theme:n,apiKey:d,apiEndpoint:x,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});case"BACKGROUND":return e.jsx(rn,{apcCanvasInstance:s,theme:n,apiKey:d,apiEndpoint:x,updateActiveSection:o=>ge(o),reloadTabs:o=>Je(o),currentTabNo:Be,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});case"QRCODE":return e.jsx(nn,{apcCanvasInstance:s,theme:n,apiKey:d,apiEndpoint:x,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});case"BARCODE":return e.jsx(sn,{apcCanvasInstance:s,theme:n,apiKey:d,apiEndpoint:x,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});case"SIZE":return e.jsx(on,{apcCanvasInstance:s,theme:n,apiKey:d,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)});default:return e.jsx(_t,{apcCanvasInstance:s,theme:n,apiKey:d,isMobile:J,closeMobileModalSecondaryPanel:o=>ne(!o)})}},ye=()=>{if(!z)return null;switch(z){case"text":return e.jsx(Bt,{apcCanvasInstance:s,theme:n,apiKey:d});case"textbox":return e.jsx(Bt,{apcCanvasInstance:s,theme:n,apiKey:d});case"rect":return e.jsx(Ze,{apcCanvasInstance:s,theme:n,apiKey:d});case"circle":return e.jsx(Ze,{apcCanvasInstance:s,theme:n,apiKey:d});case"triangle":return e.jsx(Ze,{apcCanvasInstance:s,theme:n,apiKey:d});case"line":return e.jsx(Ze,{apcCanvasInstance:s,theme:n,apiKey:d});case"path":return e.jsx(Ze,{apcCanvasInstance:s,theme:n,apiKey:d});case"polygon":return e.jsx(Ze,{apcCanvasInstance:s,theme:n,apiKey:d});case"image":return D();default:return null}},se=o=>{b(o),J&&ne(!0)},qe=()=>e.jsx("div",{id:"selectionRectangle",style:{marginLeft:"auto",position:"relative"},children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:10,marginTop:"8px"},children:[e.jsxs("div",{className:"apc-mpx-tooltip-container",role:"button",onClick:()=>Pe(),style:{cursor:"pointer"},children:[e.jsx("svg",{className:"apc-mpx-hover-div",xmlns:"http://www.w3.org/2000/svg",height:"16",width:"14",viewBox:"0 0 448 512",children:e.jsx("path",{d:Dt,fill:"#d8d4d4"})}),e.jsx("div",{className:"apc-mpx-tooltip-text",children:"Delete"})]}),e.jsxs("div",{className:"apc-mpx-tooltip-container",role:"button",onClick:()=>it(),style:{cursor:"pointer"},children:[e.jsxs("svg",{className:"apc-mpx-hover-div",xmlns:"http://www.w3.org/2000/svg",fill:"#d8d4d4",width:"20px",height:"20px",viewBox:"0 0 32 32",children:[e.jsx("path",{d:"M28,10H22V4a2,2,0,0,0-2-2H4A2,2,0,0,0,2,4V20a2,2,0,0,0,2,2h6v6a2.0023,2.0023,0,0,0,2,2H28a2.0023,2.0023,0,0,0,2-2V12A2.0023,2.0023,0,0,0,28,10ZM12,28V12H28l.0015,16Z"}),e.jsx("rect",{style:{fill:"none"},width:"32",height:"32"})]}),e.jsx("div",{className:"apc-mpx-tooltip-text",children:"Send to back"})]}),e.jsxs("div",{className:"apc-mpx-tooltip-container",role:"button",onClick:()=>Ve(),style:{cursor:"pointer"},children:[e.jsxs("svg",{className:"apc-mpx-hover-div",xmlns:"http://www.w3.org/2000/svg",fill:"#d8d4d4",width:"20px",height:"20px",viewBox:"0 0 32 32",children:[e.jsx("path",{d:"M28,10H22V4a2.0023,2.0023,0,0,0-2-2H4A2.0023,2.0023,0,0,0,2,4V20a2.0023,2.0023,0,0,0,2,2h6v6a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V12A2,2,0,0,0,28,10ZM4,20,3.9985,4H20v6H12a2,2,0,0,0-2,2v8Z"}),e.jsx("rect",{style:{fill:"none"},height:"32",width:"32"})]}),e.jsx("div",{className:"apc-mpx-tooltip-text",children:"Bring to front"})]}),e.jsxs("div",{className:"apc-mpx-tooltip-container",onClick:()=>Ke("lock"),style:{cursor:"pointer"},children:[e.jsx("svg",{className:"apc-mpx-hover-div",xmlns:"http://www.w3.org/2000/svg",height:"16",width:"14",viewBox:"0 0 448 512",children:e.jsx("path",{fill:"#d8d4d4",d:"M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"})}),e.jsx("div",{className:"apc-mpx-tooltip-text",children:"Lock"})]}),e.jsxs("div",{className:"apc-mpx-tooltip-container",onClick:()=>Ke("unlock"),style:{cursor:"pointer"},children:[e.jsx("svg",{className:"apc-mpx-hover-div",xmlns:"http://www.w3.org/2000/svg",height:"16",width:"18",viewBox:"0 0 576 512",children:e.jsx("path",{fill:"#d8d4d4",d:"M423.5 0C339.5 .3 272 69.5 272 153.5V224H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48h-48v-71.1c0-39.6 31.7-72.5 71.3-72.9 40-.4 72.7 32.1 72.7 72v80c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24v-80C576 68 507.5-.3 423.5 0z"})}),e.jsx("div",{className:"apc-mpx-tooltip-text",children:"Unlock"})]}),e.jsxs("div",{className:"apc-mpx-tooltip-container",onClick:()=>Ye(),style:{cursor:"pointer"},children:[e.jsx("svg",{className:"apc-mpx-hover-div",xmlns:"http://www.w3.org/2000/svg",height:"16",width:"16",viewBox:"0 0 512 512",children:e.jsx("path",{fill:"#d8d4d4",d:"M464 0c26.5 0 48 21.5 48 48v288c0 26.5-21.5 48-48 48H176c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48h288M176 416c-44.1 0-80-35.9-80-80V128H48c-26.5 0-48 21.5-48 48v288c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48v-48H176z"})}),e.jsx("div",{className:"apc-mpx-tooltip-text",children:"Duplicate"})]})]})}),Ue=()=>s?e.jsx("div",{style:{height:"10vh",overflow:"auto"},children:e.jsx(xt,{isOpen:Te,onClose:()=>ne(!1),children:me()})}):null,we=()=>s?J?Ue():me():null;return e.jsxs("div",{className:"apc-mpc-widget-wrapper",children:[e.jsxs("div",{style:{display:"flex",backgroundColor:je(n.primaryColor,70),flexDirection:"row",padding:"3px",color:"#ffffff",minHeight:"30px"},children:[e.jsx("div",{style:{flexBasis:"40%"},children:e.jsx("div",{style:{float:"left"},children:e.jsxs("button",{onClick:()=>window.history.back(),style:{backgroundColor:"transparent",color:"#ffffff",border:"solid #ffffff 1px",padding:"4px",width:"auto",borderRadius:"4px",fontWeight:"bold"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"1em",viewBox:"0 0 448 512",children:e.jsx("path",{fill:"#ffffff",d:Hr})})," Back"]})})}),e.jsx("div",{style:{flexBasis:"20%"}}),e.jsx("div",{style:{flexBasis:"40%"},children:e.jsx("div",{style:{display:"flex",flexDirection:"row",gap:10},children:e.jsx("div",{children:e.jsxs("div",{style:{display:"flex",flexDirection:"row",gap:5},children:[e.jsx("div",{children:s&&j.share?e.jsx("div",{children:e.jsx(ln,{apcCanvasInstance:s,theme:n})}):null}),e.jsx("div",{children:s&&j.download?e.jsx("div",{children:e.jsx(dn,{apcCanvasInstance:s,theme:n,apiKey:d,updateSelectedSections:o=>st(o),updateActiveSection:o=>ge(o),accesories,getDesignFormats:G()})}):null}),e.jsx("div",{children:s&&u?e.jsx("div",{children:e.jsx("button",{className:"apc-mpc-widget-btn",onClick:()=>u.btnAction(),style:{backgroundColor:u.btnColor??n.primaryColorLight,color:"#ffffff",border:"solid #ffffff 1px"},children:u.btnLabel})}):null})]})})})})]}),e.jsxs("div",{className:"apc-mpc-widget-colums",children:[e.jsx("div",{className:"apc-mpc-widget-colum-modules-container",children:e.jsxs("div",{className:"apc-mypixia-widget-primary-nav-container",children:[p.indexOf("TXT")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("TXT"),style:{padding:"10px",backgroundColor:f==="TXT"?n.primaryColorLight:"inherit",color:f==="TXT"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"14",viewBox:"0 0 448 512",style:{fill:f==="TXT"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:Sr})}),e.jsx("div",{children:"Text"})]}):null,p.indexOf("STICKERS")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("STICKERS"),style:{padding:"10px",backgroundColor:f==="STICKERS"?n.primaryColorLight:"inherit",color:f==="STICKERS"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"20",viewBox:"0 0 640 512",style:{fill:f==="STICKERS"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:Br})}),e.jsx("div",{children:"Stickers"})]}):null,p.indexOf("SHAPES")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("SHAPES"),style:{padding:"10px",backgroundColor:f==="SHAPES"?n.primaryColorLight:"inherit",color:f==="SHAPES"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"16",viewBox:"0 0 512 512",style:{fill:f==="SHAPES"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:wr})}),e.jsx("div",{children:"Shapes"})]}):null,p.indexOf("ICONS")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("ICONS"),style:{padding:"10px",backgroundColor:f==="ICONS"?n.primaryColorLight:"inherit",color:f==="ICONS"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"16",viewBox:"0 0 512 512",style:{fill:f==="ICONS"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:Cr})}),e.jsx("div",{children:"Icons"})]}):null,p.indexOf("IMAGE")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("IMAGE"),style:{padding:"10px",backgroundColor:f==="IMAGE"?n.primaryColorLight:"inherit",color:f==="IMAGE"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"18",viewBox:"0 0 512 512",style:{fill:f==="IMAGE"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:Ft})}),e.jsx("div",{children:"Upload"})]}):null,p.indexOf("QUOTE")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("QUOTE"),style:{padding:"10px",backgroundColor:f==="QUOTE"?n.primaryColorLight:"inherit",color:f==="QUOTE"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"16",viewBox:"0 0 512 512",style:{fill:f==="QUOTE"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:kr})}),e.jsx("div",{children:"Quote"})]}):null,p.indexOf("BACKGROUND")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("BACKGROUND"),style:{padding:"10px",backgroundColor:f==="BACKGROUND"?n.primaryColorLight:"inherit",color:f==="BACKGROUND"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"20",viewBox:"0 0 640 512",style:{fill:f==="BACKGROUND"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:Nr})}),e.jsx("div",{children:"Background"})]}):null,p.indexOf("QRCODE")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("QRCODE"),style:{padding:"10px",backgroundColor:f==="QRCODE"?n.primaryColorLight:"inherit",color:f==="QRCODE"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"20",viewBox:"0 0 640 512",style:{fill:f==="QRCODE"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:Or})}),e.jsx("div",{children:"QR Code"})]}):null,p.indexOf("BARCODE")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("BARCODE"),style:{padding:"10px",backgroundColor:f==="BARCODE"?n.primaryColorLight:"inherit",color:f==="BARCODE"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"16",viewBox:"0 0 512 512",style:{fill:f==="BARCODE"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:Ar})}),e.jsx("div",{children:"Barcode"})]}):null,p.indexOf("SIZE")>-1?e.jsxs("div",{tabIndex:"0",role:"button",onClick:()=>se("SIZE"),style:{padding:"10px",backgroundColor:f==="SIZE"?n.primaryColorLight:"inherit",color:f==="SIZE"?"#ffffff":"inherit"},children:[e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"16",width:"14",viewBox:"0 0 448 512",style:{fill:f==="SIZE"?"#ffffff":n.primaryColor},className:"apc-mypixia-widget-primary-nav-svg",children:e.jsx("path",{d:Ir})}),e.jsx("div",{children:"Size"})]}):null]})}),e.jsx("div",{className:"apc-mpc-widget-colum-features-container",children:we()}),e.jsx("div",{className:"apc-mpc-widget-colum-editor-container",children:e.jsx(pn,{theme:n,activeSection:xe,selectedObjectType:z,renderQuickActions:qe,renderActionItems:ye,canvasEl:_,zoomIn:()=>ot(),zoomOut:()=>Xe(),apcCanvasInstance:s,setActiveSection:o=>Se(o),updateActiveDesignSection:o=>ge(o),saveActiveDesign:(o,I)=>A(o,I),reloadTabs:Be,activeTabName:He,supportedColors:re,initProductName:w,historyRef:Fe,currentState:De,setCurrentState:o=>Ge(o),isPlainColor:i,selectedProduct:y,isMobile:J,canvasId:a})})]}),e.jsx("div",{id:"apc-mpx-editor-modal-root"}),J?Ue():null]})});Vt.displayName="Mypixia";module.exports=Vt;
+  <%s key={someKey} {...props} />`,H,L,et,L),K[L+H]=!0)}if(L=null,W!==void 0&&(a(W),L=""+W),g(I)&&(a(I.key),L=""+I.key),"key"in I){W={};for(var Ft in I)Ft!=="key"&&(W[Ft]=I[Ft])}else W=I;return L&&l(W,typeof u=="function"?u.displayName||u.name||"Unknown":u),C(u,L,Z,G,s(),W,q,Y)}function D(u){typeof u=="object"&&u!==null&&u.$$typeof===E&&u._store&&(u._store.validated=1)}var p=y,E=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),F=Symbol.for("react.fragment"),j=Symbol.for("react.strict_mode"),J=Symbol.for("react.profiler"),T=Symbol.for("react.consumer"),$=Symbol.for("react.context"),S=Symbol.for("react.forward_ref"),rt=Symbol.for("react.suspense"),M=Symbol.for("react.suspense_list"),ct=Symbol.for("react.memo"),O=Symbol.for("react.lazy"),lt=Symbol.for("react.activity"),Q=Symbol.for("react.client.reference"),it=p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,P=Object.prototype.hasOwnProperty,at=Array.isArray,X=console.createTask?console.createTask:function(){return null};p={"react-stack-bottom-frame":function(u){return u()}};var st,_={},U=p["react-stack-bottom-frame"].bind(p,h)(),m=X(d(h)),K={};vt.Fragment=F,vt.jsx=function(u,I,W,H,G){var Z=1e4>it.recentlyCreatedOwnerStacks++;return N(u,I,W,!1,H,G,Z?Error("react-stack-top-frame"):U,Z?X(d(u)):m)},vt.jsxs=function(u,I,W,H,G){var Z=1e4>it.recentlyCreatedOwnerStacks++;return N(u,I,W,!0,H,G,Z?Error("react-stack-top-frame"):U,Z?X(d(u)):m)}}()),vt}var ee;function $e(){return ee||(ee=1,process.env.NODE_ENV==="production"?Nt.exports=Oe():Nt.exports=Qe()),Nt.exports}var i=$e();const Et={business:{name:"Business & Office",icons:[{name:"briefcase",symbol:"💼",unicode:"💼"},{name:"chart-up",symbol:"📈",unicode:"📈"},{name:"chart-down",symbol:"📉",unicode:"📉"},{name:"graph",symbol:"📊",unicode:"📊"},{name:"clipboard",symbol:"📋",unicode:"📋"},{name:"calendar",symbol:"📅",unicode:"📅"},{name:"office",symbol:"🏢",unicode:"🏢"},{name:"bank",symbol:"🏦",unicode:"🏦"},{name:"money-bag",symbol:"💰",unicode:"💰"},{name:"credit-card",symbol:"💳",unicode:"💳"}]},technology:{name:"Technology",icons:[{name:"laptop",symbol:"💻",unicode:"💻"},{name:"phone",symbol:"📱",unicode:"📱"},{name:"desktop",symbol:"🖥️",unicode:"🖥️"},{name:"keyboard",symbol:"⌨️",unicode:"⌨️"},{name:"mouse",symbol:"🖱️",unicode:"🖱️"},{name:"printer",symbol:"🖨️",unicode:"🖨️"},{name:"wifi",symbol:"📶",unicode:"📶"},{name:"battery",symbol:"🔋",unicode:"🔋"},{name:"plug",symbol:"🔌",unicode:"🔌"},{name:"gear",symbol:"⚙️",unicode:"⚙️"}]},communication:{name:"Communication",icons:[{name:"email",symbol:"📧",unicode:"📧"},{name:"envelope",symbol:"✉️",unicode:"✉️"},{name:"phone-call",symbol:"📞",unicode:"📞"},{name:"message",symbol:"💬",unicode:"💬"},{name:"announcement",symbol:"📢",unicode:"📢"},{name:"megaphone",symbol:"📣",unicode:"📣"},{name:"satellite",symbol:"📡",unicode:"📡"},{name:"radio",symbol:"📻",unicode:"📻"},{name:"microphone",symbol:"🎤",unicode:"🎤"},{name:"speaker",symbol:"🔊",unicode:"🔊"}]},transport:{name:"Transportation",icons:[{name:"car",symbol:"🚗",unicode:"🚗"},{name:"truck",symbol:"🚛",unicode:"🚛"},{name:"bus",symbol:"🚌",unicode:"🚌"},{name:"airplane",symbol:"✈️",unicode:"✈️"},{name:"train",symbol:"🚆",unicode:"🚆"},{name:"ship",symbol:"🚢",unicode:"🚢"},{name:"bicycle",symbol:"🚴",unicode:"🚴"},{name:"motorcycle",symbol:"🏍️",unicode:"🏍️"},{name:"taxi",symbol:"🚕",unicode:"🚕"},{name:"rocket",symbol:"🚀",unicode:"🚀"}]},nature:{name:"Nature & Environment",icons:[{name:"tree",symbol:"🌳",unicode:"🌳"},{name:"leaf",symbol:"🍃",unicode:"🍃"},{name:"flower",symbol:"🌸",unicode:"🌸"},{name:"sun",symbol:"☀️",unicode:"☀️"},{name:"moon",symbol:"🌙",unicode:"🌙"},{name:"star",symbol:"⭐",unicode:"⭐"},{name:"cloud",symbol:"☁️",unicode:"☁️"},{name:"rainbow",symbol:"🌈",unicode:"🌈"},{name:"mountain",symbol:"⛰️",unicode:"⛰️"},{name:"globe",symbol:"🌍",unicode:"🌍"}]},symbols:{name:"Symbols & Signs",icons:[{name:"check",symbol:"✅",unicode:"✅"},{name:"cross",symbol:"❌",unicode:"❌"},{name:"warning",symbol:"⚠️",unicode:"⚠️"},{name:"info",symbol:"ℹ️",unicode:"ℹ️"},{name:"question",symbol:"❓",unicode:"❓"},{name:"exclamation",symbol:"❗",unicode:"❗"},{name:"lock",symbol:"🔒",unicode:"🔒"},{name:"unlock",symbol:"🔓",unicode:"🔓"},{name:"key",symbol:"🔑",unicode:"🔑"},{name:"shield",symbol:"🛡️",unicode:"🛡️"}]}},oe=()=>Object.values(Et).flatMap(f=>f.icons.map(o=>({...o,category:f.name}))),He=f=>oe().filter(a=>a.name.toLowerCase().includes(f.toLowerCase())||a.category.toLowerCase().includes(f.toLowerCase())),Ge=({onSelectIcon:f,disabled:o=!1})=>{const[a,d]=y.useState(!1),[s,h]=y.useState(""),[g,l]=y.useState("all"),n=y.useRef(null);y.useEffect(()=>{const p=E=>{n.current&&!n.current.contains(E.target)&&d(!1)};return document.addEventListener("mousedown",p),()=>document.removeEventListener("mousedown",p)},[]);const C=p=>{f(p),d(!1),h("")},D=(()=>{let p=oe();if(s.trim()&&(p=He(s)),g!=="all"){const E=Et[g];E&&(p=p.filter(B=>B.category===E.name))}return p})();return i.jsxs("div",{className:"icon-selector",ref:n,children:[i.jsxs("button",{className:"toolbar-btn dropdown-trigger",disabled:o,onClick:()=>d(!a),title:"Add Icon",children:[i.jsx("span",{className:"icon",children:"🎯"}),i.jsx("span",{className:"label",children:"Icons"}),i.jsx("span",{className:"dropdown-arrow",children:"▼"})]}),a&&i.jsxs("div",{className:"icon-dropdown",children:[i.jsxs("div",{className:"icon-dropdown-header",children:[i.jsx("input",{type:"text",placeholder:"Search icons...",value:s,onChange:p=>h(p.target.value),className:"icon-search"}),i.jsxs("select",{value:g,onChange:p=>l(p.target.value),className:"category-select",children:[i.jsx("option",{value:"all",children:"All Categories"}),Object.entries(Et).map(([p,E])=>i.jsx("option",{value:p,children:E.name},p))]})]}),i.jsx("div",{className:"icon-grid",children:D.length===0?i.jsx("div",{className:"no-icons",children:s?"No icons found":"No icons in this category"}):D.map((p,E)=>i.jsxs("button",{className:"icon-item",onClick:()=>C(p),title:`${p.name} (${p.category})`,children:[i.jsx("span",{className:"icon-symbol",children:p.symbol}),i.jsx("span",{className:"icon-name",children:p.name})]},`${p.name}-${E}`))}),i.jsx("div",{className:"icon-dropdown-footer",children:i.jsxs("span",{className:"icon-count",children:[D.length," icon",D.length!==1?"s":""]})})]})]})},_e=({isOpen:f,onClose:o,onAddQRCode:a,theme:d})=>{const[s,h]=y.useState(""),[g,l]=y.useState(""),[n,C]=y.useState(200),[N,D]=y.useState("M"),p=()=>{if(!s.trim())return;const F={width:n,errorCorrectionLevel:N,type:"image/png",quality:.92,margin:1,color:{dark:"#000000",light:"#FFFFFF"}};Pe.toDataURL(s,F,(j,J)=>{if(j){console.error("QR Code generation error:",j);return}l(J)})},E=()=>{if(!g)return;const F=new Image;F.onload=()=>{a({type:"qrcode",src:g,data:s,width:n,height:n,x:100,y:100,imageObject:F}),B()},F.src=g},B=()=>{h(""),l(""),o()};return f?i.jsx("div",{className:"qr-modal-overlay",onClick:B,children:i.jsxs("div",{className:"qr-modal-content",onClick:F=>F.stopPropagation(),children:[i.jsxs("div",{className:"qr-modal-header",children:[i.jsx("h3",{children:"Generate QR Code"}),i.jsx("button",{className:"qr-modal-close",onClick:B,"aria-label":"Close",children:"×"})]}),i.jsxs("div",{className:"qr-modal-body",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-data",children:"Enter Data (URL, Text, etc.)"}),i.jsx("textarea",{id:"qr-data",value:s,onChange:F=>h(F.target.value),placeholder:"https://example.com or any text...",rows:3})]}),i.jsxs("div",{className:"qr-options",children:[i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-size",children:"Size (px)"}),i.jsx("input",{type:"number",id:"qr-size",value:n,onChange:F=>C(Math.max(50,Math.min(500,parseInt(F.target.value)||200))),min:"50",max:"500"})]}),i.jsxs("div",{className:"qr-form-group",children:[i.jsx("label",{htmlFor:"qr-error-level",children:"Error Correction"}),i.jsxs("select",{id:"qr-error-level",value:N,onChange:F=>D(F.target.value),children:[i.jsx("option",{value:"L",children:"Low (7%)"}),i.jsx("option",{value:"M",children:"Medium (15%)"}),i.jsx("option",{value:"Q",children:"Quartile (25%)"}),i.jsx("option",{value:"H",children:"High (30%)"})]})]})]}),i.jsx("div",{className:"qr-actions",children:i.jsx("button",{className:"qr-btn qr-btn-generate",onClick:p,disabled:!s.trim(),children:"Generate QR Code"})}),g&&i.jsxs("div",{className:"qr-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"qr-preview-container",children:i.jsx("img",{src:g,alt:"QR Code Preview"})}),i.jsx("button",{className:"qr-btn qr-btn-add",onClick:E,style:{backgroundColor:(d==null?void 0:d.primaryColor)||"#3b82f6",borderColor:(d==null?void 0:d.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},Ye=({isOpen:f,onClose:o,onAddBarcode:a,theme:d})=>{const[s,h]=y.useState(""),[g,l]=y.useState("CODE128"),[n,C]=y.useState(null),[N,D]=y.useState(2),[p,E]=y.useState(100),[B,F]=y.useState(20),[j,J]=y.useState("center"),[T,$]=y.useState("bottom"),[S,rt]=y.useState(10),M=y.useRef(null),ct=[{value:"CODE128",label:"CODE128 (Most Common)"},{value:"EAN13",label:"EAN-13 (European Article Number)"},{value:"EAN8",label:"EAN-8 (Short EAN)"},{value:"UPC",label:"UPC (Universal Product Code)"},{value:"CODE39",label:"CODE39 (Alpha-numeric)"},{value:"ITF14",label:"ITF-14 (Shipping/Logistics)"},{value:"MSI",label:"MSI (Retail)"},{value:"pharmacode",label:"Pharmacode (Pharmaceutical)"},{value:"codabar",label:"Codabar (Libraries/Blood banks)"}],O=()=>{if(s.trim())try{C(i.jsx(Ue,{value:s,format:g,width:N,height:p,fontSize:B,textAlign:j,textPosition:T,margin:S,background:"#ffffff",lineColor:"#000000"}))}catch(P){console.error("Barcode generation error:",P),alert("Invalid data for selected barcode format. Please check your input.")}},lt=()=>{var P,at,X,st;if(!(!n||!M.current))try{const _=M.current.querySelector("svg");if(!_){console.error("No SVG element found in barcode");return}const U=document.createElement("canvas"),m=U.getContext("2d"),K=_.getBoundingClientRect(),u=((at=(P=_.width)==null?void 0:P.baseVal)==null?void 0:at.value)||K.width||200,I=((st=(X=_.height)==null?void 0:X.baseVal)==null?void 0:st.value)||K.height||100;U.width=u,U.height=I;const W=new XMLSerializer().serializeToString(_),H=new Blob([W],{type:"image/svg+xml;charset=utf-8"}),G=URL.createObjectURL(H),Z=new Image;Z.onload=()=>{m.drawImage(Z,0,0);const q=U.toDataURL("image/png"),Y=new Image;Y.onload=()=>{a({type:"barcode",src:q,data:s,format:g,width:u,height:I,x:100,y:100,imageObject:Y}),Q()},Y.src=q,URL.revokeObjectURL(G)},Z.src=G}catch(_){console.error("Error adding barcode to canvas:",_),alert("Failed to add barcode to canvas. Please try again.")}},Q=()=>{h(""),C(null),l("CODE128"),D(2),E(100),F(20),o()},it=P=>({CODE128:"Supports all ASCII characters. Most versatile format.",EAN13:"Requires exactly 12 digits (13th is checksum). Used for retail products.",EAN8:"Requires exactly 7 digits (8th is checksum). Compact version of EAN-13.",UPC:"Requires exactly 11 digits (12th is checksum). Used in North America.",CODE39:"Supports letters, numbers, and some symbols. Widely used.",ITF14:"Requires exactly 13 digits (14th is checksum). Used for shipping containers.",MSI:"Numeric only. Used in retail inventory.",pharmacode:"Numbers 3-131070. Used in pharmaceutical industry.",codabar:"Supports 0-9, A-D, and symbols. Used in libraries."})[P]||"";return f?i.jsx("div",{className:"barcode-modal-overlay",onClick:Q,children:i.jsxs("div",{className:"barcode-modal-content",onClick:P=>P.stopPropagation(),children:[i.jsxs("div",{className:"barcode-modal-header",children:[i.jsx("h3",{children:"Generate Barcode"}),i.jsx("button",{className:"barcode-modal-close",onClick:Q,"aria-label":"Close",children:"×"})]}),i.jsxs("div",{className:"barcode-modal-body",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-data",children:"Enter Data"}),i.jsx("input",{type:"text",id:"barcode-data",value:s,onChange:P=>h(P.target.value),placeholder:"Enter your data..."})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-format",children:"Barcode Format"}),i.jsx("select",{id:"barcode-format",value:g,onChange:P=>l(P.target.value),children:ct.map(P=>i.jsx("option",{value:P.value,children:P.label},P.value))}),i.jsx("small",{className:"format-description",children:it(g)})]}),i.jsxs("div",{className:"barcode-options",children:[i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-width",children:"Bar Width"}),i.jsx("input",{type:"range",id:"barcode-width",min:"1",max:"4",step:"0.5",value:N,onChange:P=>D(parseFloat(P.target.value))}),i.jsxs("span",{className:"range-value",children:[N,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-height",children:"Height"}),i.jsx("input",{type:"range",id:"barcode-height",min:"50",max:"200",value:p,onChange:P=>E(parseInt(P.target.value))}),i.jsxs("span",{className:"range-value",children:[p,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"barcode-fontsize",children:"Font Size"}),i.jsx("input",{type:"range",id:"barcode-fontsize",min:"10",max:"30",value:B,onChange:P=>F(parseInt(P.target.value))}),i.jsxs("span",{className:"range-value",children:[B,"px"]})]}),i.jsxs("div",{className:"barcode-form-group",children:[i.jsx("label",{htmlFor:"text-position",children:"Text Position"}),i.jsxs("select",{id:"text-position",value:T,onChange:P=>$(P.target.value),children:[i.jsx("option",{value:"bottom",children:"Bottom"}),i.jsx("option",{value:"top",children:"Top"})]})]})]}),i.jsx("div",{className:"barcode-actions",children:i.jsx("button",{className:"barcode-btn barcode-btn-generate",onClick:O,disabled:!s.trim(),children:"Generate Barcode"})}),n&&i.jsxs("div",{className:"barcode-preview",children:[i.jsx("h4",{children:"Preview"}),i.jsx("div",{className:"barcode-preview-container",ref:M,children:n}),i.jsx("button",{className:"barcode-btn barcode-btn-add",onClick:lt,style:{backgroundColor:(d==null?void 0:d.primaryColor)||"#3b82f6",borderColor:(d==null?void 0:d.primaryColor)||"#3b82f6"},children:"Add to Canvas"})]})]})]})}):null},qe=({theme:f})=>i.jsxs("div",{className:"premium-feature-container",style:{padding:"20px",backgroundColor:"#f8f9fa",borderRadius:"8px",boxShadow:"0 2px 10px rgba(0,0,0,0.05)",textAlign:"center",maxWidth:"400px",margin:"0 auto"},children:[i.jsx("div",{style:{marginBottom:"16px"},children:i.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"48",height:"48",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",style:{color:"#ffc107"},children:[i.jsx("path",{d:"M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"}),i.jsx("line",{x1:"7",y1:"7",x2:"7.01",y2:"7"})]})}),i.jsx("h3",{style:{color:"#333",fontSize:"18px",fontWeight:"600",marginBottom:"12px"},children:"Premium Feature Access"}),i.jsx("p",{style:{color:"#555",fontSize:"15px",lineHeight:"1.5",marginBottom:"20px"},children:"Premium stickers feature requires a subscription to access."}),i.jsx("a",{href:"https://mypixia.com/developer",target:"_blank",rel:"noopener noreferrer",style:{display:"inline-flex",alignItems:"center",justifyContent:"center",backgroundColor:(f==null?void 0:f.primaryColor)||"#4c5bf2",color:"white",padding:"10px 20px",borderRadius:"4px",textDecoration:"none",fontWeight:"500",transition:"background-color 0.2s ease"},children:"Get API Key"})]}),ie=()=>i.jsxs("div",{style:{textAlign:"center",padding:"40px"},children:[i.jsx("div",{style:{border:"4px solid #f3f3f3",borderTop:"4px solid #3498db",borderRadius:"50%",width:"40px",height:"40px",animation:"spin 2s linear infinite",margin:"0 auto 20px"}}),i.jsx("p",{children:"Loading..."}),i.jsx("style",{children:`
+            @keyframes spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
+        `})]}),Ve=({isOpen:f,onClose:o,onAddSticker:a,theme:d,apiKey:s,apiEndpoint:h})=>{const[g,l]=y.useState([]),[n,C]=y.useState(!1),[N,D]=y.useState(null),[p,E]=y.useState(""),[B,F]=y.useState(""),[j,J]=y.useState({});y.useRef(null);const[T,$]=y.useState(!1),[S,rt]=y.useState(!1),[M,ct]=y.useState(!1),O=`${h}/api/v1/designer`;y.useEffect(()=>{f&&s&&lt()},[f,s]);const lt=async()=>{const U=sessionStorage.getItem("apc_x_sub_status");U==="active"?($(!0),rt(!0),it()):U==="inactive"?($(!1),rt(!0)):(ct(!0),await Q())},Q=async()=>{if(!s){$(!1),rt(!0),ct(!1);return}const U=`${O}/get-subscription-status/${s}`;try{(await Kt.get(U)).data.object==="active"?(sessionStorage.setItem("apc_x_sub_status","active"),$(!0),it()):(sessionStorage.setItem("apc_x_sub_status","inactive"),$(!1))}catch(m){console.error("Subscription check failed:",m),sessionStorage.setItem("apc_x_sub_status","inactive"),$(!1)}finally{ct(!1),rt(!0)}},it=async()=>{const U=sessionStorage.getItem("apc_stickers");if(U)try{const m=JSON.parse(U);l(m);return}catch{console.warn("Failed to parse cached stickers, fetching fresh data")}C(!0),D(null);try{const m=await Kt.get(`${O}/get-stickers`);if(m.data&&m.data.object&&m.data.object.contents){const K=m.data.object.contents;l(K),sessionStorage.setItem("apc_stickers",JSON.stringify(K))}else throw new Error("Invalid response format")}catch(m){console.error("Error fetching stickers:",m),D("Failed to load stickers. Please try again.")}finally{C(!1)}},P=(U,m)=>{a({type:"sticker",src:U,name:m,width:100,height:100,x:100,y:100}),o()},at=U=>{J(m=>({...m,[U]:!m[U]}))},X=U=>{const m={};return U.forEach(K=>{const u=K.name.split("/");let I=m;u.forEach((W,H)=>{I[W]||(I[W]=H===u.length-1?K:{}),I=I[W]})}),m},st=(U,m="",K=0)=>i.jsx("div",{className:"sticker-tree-level",style:{paddingLeft:`${K*15}px`},children:Object.keys(U).map(u=>{const I=`${m}/${u}`,W=j[I];return U[u].type==="image"?!B||u.toLowerCase().includes(B.toLowerCase())?i.jsx("div",{className:"sticker-item",onClick:()=>P(U[u].url,u),children:i.jsx("div",{className:"sticker-preview",children:i.jsx("img",{src:U[u].url,alt:u,loading:"lazy",onError:G=>{G.target.style.display="none"}})})},I):null:i.jsxs("div",{className:"sticker-category",children:[i.jsxs("div",{className:"category-header",onClick:()=>at(I),children:[i.jsx("span",{className:`expand-icon ${W?"expanded":""}`,children:"▶"}),i.jsx("span",{className:"category-name",children:u})]}),W&&st(U[u],I,K+1)]},I)})}),_=g.filter(U=>!B||U.name.toLowerCase().includes(B.toLowerCase()));return f?i.jsx("div",{className:"sticker-modal-overlay",onClick:o,children:i.jsxs("div",{className:"sticker-modal-content",onClick:U=>U.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:[M&&i.jsx(ie,{}),!T&&!M&&S&&i.jsx(qe,{theme:d}),T&&S&&i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"sticker-modal-controls",children:i.jsx("div",{className:"search-container",children:i.jsx("input",{type:"text",placeholder:"Search stickers...",value:B,onChange:U=>F(U.target.value),className:"sticker-search"})})}),n&&i.jsx(ie,{}),N&&i.jsxs("div",{className:"sticker-error",children:[i.jsx("p",{children:N}),i.jsx("button",{onClick:it,children:"Retry"})]}),!n&&!N&&g.length>0&&i.jsx("div",{className:"sticker-grid",children:st(X(_))})]})]})]})}):null},Xe=[{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"}],Je=({isOpen:f,onClose:o,onAddEmbroidery:a,theme:d,apiKey:s,apiEndpoint:h})=>{const[g,l]=y.useState([]),[n,C]=y.useState(!1),[N,D]=y.useState(null),[p,E]=y.useState(""),[B,F]=y.useState("All"),j=y.useRef(null),J=["All","Floral","Nature","Geometric","Traditional","Sports","Hobbies","Food","Symbols","Holiday","Text"];y.useEffect(()=>{f&&l(Xe)},[f]);const T=S=>{a({type:"embroidery",src:S.url,name:S.name,description:S.description,category:S.category,width:120,height:120,x:100,y:100}),o()},$=g.filter(S=>{const rt=!p||S.name.toLowerCase().includes(p.toLowerCase())||S.description.toLowerCase().includes(p.toLowerCase()),M=B==="All"||S.category===B;return rt&&M});return f?i.jsx("div",{className:"embroidery-modal-overlay",onClick:o,children:i.jsxs("div",{className:"embroidery-modal-content",onClick:S=>S.stopPropagation(),ref:j,children:[i.jsxs("div",{className:"embroidery-modal-header",children:[i.jsx("h3",{children:"Choose an Embroidery Design"}),i.jsx("button",{className:"embroidery-modal-close",onClick:o,"aria-label":"Close",children:"×"})]}),i.jsxs("div",{className:"embroidery-modal-controls",children:[i.jsx("div",{className:"search-container",children:i.jsx("input",{type:"text",placeholder:"Search embroidery designs...",value:p,onChange:S=>E(S.target.value),className:"embroidery-search"})}),i.jsxs("div",{className:"category-filter",children:[i.jsx("label",{children:"Category:"}),i.jsx("select",{value:B,onChange:S=>F(S.target.value),className:"category-select",children:J.map(S=>i.jsx("option",{value:S,children:S},S))})]})]}),i.jsxs("div",{className:"embroidery-modal-body",children:[n&&i.jsxs("div",{className:"embroidery-loading",children:[i.jsx("div",{className:"loading-spinner"}),i.jsx("p",{children:"Loading embroidery designs..."})]}),N&&i.jsx("div",{className:"embroidery-error",children:i.jsx("p",{children:N})}),!n&&!N&&i.jsx("div",{className:"embroidery-grid",children:$.map(S=>i.jsxs("div",{className:"embroidery-item",onClick:()=>T(S),title:S.description,children:[i.jsx("div",{className:"embroidery-preview",children:i.jsx("img",{src:S.url,alt:S.name,loading:"lazy",onError:rt=>{console.error("Failed to load embroidery image:",S.url),rt.target.style.display="none"}})}),i.jsxs("div",{className:"embroidery-info",children:[i.jsx("div",{className:"embroidery-name",children:S.name}),i.jsx("div",{className:"embroidery-category",children:S.category})]})]},S.id))}),!n&&!N&&$.length===0&&i.jsx("div",{className:"no-embroideries",children:i.jsx("p",{children:"No embroidery designs found matching your search."})})]}),i.jsx("div",{className:"embroidery-modal-footer",children:i.jsxs("div",{className:"embroidery-disclaimer",children:[i.jsx("span",{className:"disclaimer-icon",children:"ℹ️"}),i.jsx("span",{children:"Sample embroidery designs for preview. Actual embroidered results may vary based on fabric and thread."})]})})]})}):null},St=[{id:1,text:"DREAM BIG",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF6B35",hasBackground:!0,backgroundColor:"#1A1A1A",textAlign:"center",textTransform:"uppercase"},{id:2,text:"Never Give Up",category:"Motivational",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#2E8B57",fontStyle:"italic",textAlign:"center"},{id:3,text:"BE YOURSELF",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#FF1493",textTransform:"uppercase",letterSpacing:2},{id:4,text:"Stay Strong",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#4169E1",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:5,text:"RISE & SHINE",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000",textAlign:"center"},{id:6,text:"Believe in Magic",category:"Motivational",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB",textAlign:"center"},{id:7,text:"UNSTOPPABLE",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",textTransform:"uppercase",letterSpacing:1.5},{id:8,text:"Chase Your Dreams",category:"Motivational",fontSize:24,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:9,text:"FEARLESS",category:"Motivational",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:10,text:"Make It Happen",category:"Motivational",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:11,text:"BORN TO WIN",category:"Motivational",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#FFD700",hasBackground:!0,backgroundColor:"#800080",textAlign:"center"},{id:12,text:"Positive Vibes Only",category:"Motivational",fontSize:20,fontFamily:"Comic Sans MS",fill:"#FF69B4",fontWeight:"600"},{id:13,text:"LIMITLESS",category:"Motivational",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#1E90FF",textTransform:"uppercase",letterSpacing:3},{id:14,text:"Embrace The Journey",category:"Motivational",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B4513"},{id:15,text:"STRENGTH WITHIN",category:"Motivational",fontSize:26,fontFamily:"Verdana",fontWeight:"bold",fill:"#696969",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:16,text:"Create Your Own Sunshine",category:"Motivational",fontSize:18,fontFamily:"Palatino",fill:"#FF8C00",fontWeight:"600"},{id:17,text:"WARRIOR SPIRIT",category:"Motivational",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:18,text:"Keep Going",category:"Motivational",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:19,text:"FOCUS & WIN",category:"Motivational",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082",hasBackground:!0,backgroundColor:"#FFFF00"},{id:20,text:"Inspire Others",category:"Motivational",fontSize:26,fontFamily:"Georgia",fill:"#CD853F",fontStyle:"italic"},{id:21,text:"GAME CHANGER",category:"Motivational",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:22,text:"Live With Purpose",category:"Motivational",fontSize:22,fontFamily:"Palatino",fill:"#2F4F4F",fontWeight:"600"},{id:23,text:"BREAKTHROUGH",category:"Motivational",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#DC143C",letterSpacing:2},{id:24,text:"Shine Bright",category:"Motivational",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FFD700",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:25,text:"NEVER SETTLE",category:"Motivational",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasBackground:!0,backgroundColor:"#000080"},{id:26,text:"CEO MINDSET",category:"Business",fontSize:28,fontFamily:"Arial",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:27,text:"Innovation Starts Here",category:"Business",fontSize:20,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"600"},{id:28,text:"PROFESSIONAL",category:"Business",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#000080",letterSpacing:1},{id:29,text:"Excellence Every Day",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#8B0000",fontWeight:"600"},{id:30,text:"LEADERSHIP",category:"Business",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",textAlign:"center"},{id:31,text:"Think Different",category:"Business",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#696969"},{id:32,text:"RESULTS DRIVEN",category:"Business",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#F0F8FF"},{id:33,text:"Strategic Vision",category:"Business",fontSize:22,fontFamily:"Georgia",fill:"#2E8B57",fontWeight:"700"},{id:34,text:"PRODUCTIVITY",category:"Business",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:35,text:"Success Mindset",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#FF8C00",fontWeight:"600"},{id:36,text:"EXPERT LEVEL",category:"Business",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:37,text:"Quality First",category:"Business",fontSize:30,fontFamily:"Arial",fontWeight:"700",fill:"#228B22"},{id:38,text:"INTEGRITY",category:"Business",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#2F4F4F",textAlign:"center"},{id:39,text:"Growth Focused",category:"Business",fontSize:20,fontFamily:"Palatino",fill:"#20B2AA",fontWeight:"600"},{id:40,text:"COLLABORATION",category:"Business",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#9370DB"},{id:41,text:"Performance Matters",category:"Business",fontSize:22,fontFamily:"Verdana",fill:"#B22222",fontWeight:"700"},{id:42,text:"ACCOUNTABILITY",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#8B4513",letterSpacing:1.5},{id:43,text:"Vision to Reality",category:"Business",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:44,text:"TRANSFORMATION",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:45,text:"Excellence Standard",category:"Business",fontSize:22,fontFamily:"Palatino",fill:"#2E8B57",fontWeight:"600"},{id:46,text:"EFFICIENCY",category:"Business",fontSize:30,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#000080"},{id:47,text:"Forward Thinking",category:"Business",fontSize:24,fontFamily:"Verdana",fill:"#CD853F",fontWeight:"700"},{id:48,text:"ACHIEVEMENT",category:"Business",fontSize:26,fontFamily:"Arial",fontWeight:"bold",fill:"#B8860B",hasBackground:!0,backgroundColor:"#F5F5DC"},{id:49,text:"Strategic Excellence",category:"Business",fontSize:20,fontFamily:"Georgia",fill:"#696969",fontWeight:"600"},{id:50,text:"IMPACT MAKER",category:"Business",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#DC143C",textAlign:"center"},{id:51,text:"COFFEE FIRST",category:"Funny",fontSize:28,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#8B4513",hasBackground:!0,backgroundColor:"#F5DEB3"},{id:52,text:"I'm Not Lazy, I'm Energy Efficient",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF69B4",fontWeight:"600"},{id:53,text:"SARCASM LOADING...",category:"Funny",fontSize:24,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32",textAlign:"center"},{id:54,text:"Powered By Pizza",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:55,text:"CTRL + ALT + DELETE MONDAY",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:56,text:"Brain 404 Error",category:"Funny",fontSize:22,fontFamily:"Arial",fill:"#FF1493",fontWeight:"600"},{id:57,text:"WEEKEND WARRIOR",category:"Funny",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:58,text:"Adulting is Hard",category:"Funny",fontSize:24,fontFamily:"Comic Sans MS",fill:"#9370DB",fontWeight:"600"},{id:59,text:"PROCRASTINATION EXPERT",category:"Funny",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#FF4500"},{id:60,text:"Netflix & Chill Champion",category:"Funny",fontSize:18,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"600"},{id:61,text:"CHAOS COORDINATOR",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",textAlign:"center"},{id:62,text:"I Speak Fluent Sarcasm",category:"Funny",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57"},{id:63,text:"SLEEP IS FOR THE WEAK",category:"Funny",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#B22222"},{id:64,text:"Professional Overthinker",category:"Funny",fontSize:20,fontFamily:"Verdana",fill:"#4B0082",fontWeight:"600"},{id:65,text:"WIFI PASSWORD PLEASE",category:"Funny",fontSize:20,fontFamily:"Courier New",fontWeight:"bold",fill:"#32CD32"},{id:66,text:"Certified Couch Potato",category:"Funny",fontSize:22,fontFamily:"Comic Sans MS",fill:"#FF8C00",fontWeight:"700"},{id:67,text:"SOCIAL DISTANCING CHAMPION",category:"Funny",fontSize:16,fontFamily:"Arial",fontWeight:"bold",fill:"#20B2AA"},{id:68,text:"Powered By Caffeine",category:"Funny",fontSize:24,fontFamily:"Impact",fill:"#8B4513",fontWeight:"bold"},{id:69,text:"EMERGENCY CHOCOLATE NEEDED",category:"Funny",fontSize:18,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#D2691E"},{id:70,text:"I'm Not Short, I'm Fun Size",category:"Funny",fontSize:20,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"600"},{id:71,text:"CTRL + Z MY LIFE",category:"Funny",fontSize:26,fontFamily:"Courier New",fontWeight:"bold",fill:"#4169E1"},{id:72,text:"Error 404: Motivation Not Found",category:"Funny",fontSize:16,fontFamily:"Arial",fill:"#FF4500",fontWeight:"600"},{id:73,text:"PROFESSIONAL WEIRDO",category:"Funny",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:74,text:"Snack Attack Mode",category:"Funny",fontSize:26,fontFamily:"Comic Sans MS",fill:"#FF6347",fontWeight:"700"},{id:75,text:"BATTERY LOW, NEED COFFEE",category:"Funny",fontSize:18,fontFamily:"Courier New",fontWeight:"bold",fill:"#8B4513"},{id:76,text:"Love You Forever",category:"Love",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493",textAlign:"center"},{id:77,text:"SOULMATES",category:"Love",fontSize:32,fontFamily:"Georgia",fontWeight:"bold",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFE4E1"},{id:78,text:"Better Together",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:79,text:"ENDLESS LOVE",category:"Love",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#B22222",textAlign:"center"},{id:80,text:"You Complete Me",category:"Love",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000"},{id:81,text:"FOREVER & ALWAYS",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF1493",letterSpacing:1},{id:82,text:"My Heart Belongs To You",category:"Love",fontSize:20,fontFamily:"Palatino",fill:"#DC143C",fontWeight:"600"},{id:83,text:"PURE LOVE",category:"Love",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF69B4",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#000000"},{id:84,text:"Together Forever",category:"Love",fontSize:26,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"700",textAlign:"center"},{id:85,text:"MATCH MADE IN HEAVEN",category:"Love",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FF1493"},{id:86,text:"Love Story",category:"Love",fontSize:32,fontFamily:"Palatino",fontStyle:"italic",fill:"#B22222"},{id:87,text:"HEARTBEAT",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",hasBackground:!0,backgroundColor:"#FFF0F5"},{id:88,text:"You Are My Sunshine",category:"Love",fontSize:22,fontFamily:"Georgia",fill:"#FF8C00",fontWeight:"600"},{id:89,text:"DESTINY",category:"Love",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#8B0000",textAlign:"center"},{id:90,text:"True Love Waits",category:"Love",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF1493"},{id:91,text:"BELOVED",category:"Love",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#B22222",letterSpacing:2},{id:92,text:"Love Conquers All",category:"Love",fontSize:26,fontFamily:"Trebuchet MS",fill:"#DC143C",fontWeight:"700"},{id:93,text:"PERFECT MATCH",category:"Love",fontSize:24,fontFamily:"Arial",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#000000"},{id:94,text:"Always & Forever",category:"Love",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"},{id:95,text:"ROMANCE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493"},{id:96,text:"Love Never Fails",category:"Love",fontSize:24,fontFamily:"Palatino",fill:"#B22222",fontWeight:"600"},{id:97,text:"ETERNAL LOVE",category:"Love",fontSize:28,fontFamily:"Arial",fontWeight:"800",fill:"#DC143C",letterSpacing:1.5},{id:98,text:"Heart & Soul",category:"Love",fontSize:30,fontFamily:"Georgia",fill:"#8B0000",fontWeight:"bold"},{id:99,text:"PASSIONATE",category:"Love",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center"},{id:100,text:"Love Is Everything",category:"Love",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF1493",fontWeight:"700"},{id:101,text:"NO PAIN NO GAIN",category:"Sports",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",textAlign:"center",hasBackground:!0,backgroundColor:"#000000"},{id:102,text:"Train Hard",category:"Sports",fontSize:32,fontFamily:"Arial",fontWeight:"900",fill:"#B22222"},{id:103,text:"CHAMPION MINDSET",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#FFD700",hasBackground:!0,backgroundColor:"#000080"},{id:104,text:"Beast Mode ON",category:"Sports",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#32CD32"},{id:105,text:"STRONGER EVERY DAY",category:"Sports",fontSize:22,fontFamily:"Arial",fontWeight:"800",fill:"#2E8B57",letterSpacing:1},{id:106,text:"Victory Mindset",category:"Sports",fontSize:28,fontFamily:"Georgia",fontWeight:"bold",fill:"#B8860B"},{id:107,text:"GAME TIME",category:"Sports",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",textAlign:"center"},{id:108,text:"Push Your Limits",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:109,text:"ATHLETIC EXCELLENCE",category:"Sports",fontSize:20,fontFamily:"Arial",fontWeight:"bold",fill:"#DC143C"},{id:110,text:"Fitness First",category:"Sports",fontSize:30,fontFamily:"Verdana",fontWeight:"bold",fill:"#228B22"},{id:111,text:"UNSTOPPABLE FORCE",category:"Sports",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500",hasTextShadow:!0,textShadowX:3,textShadowY:3,textShadowBlur:6,textShadowColor:"#000000"},{id:112,text:"Sweat Equity",category:"Sports",fontSize:28,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:113,text:"PERFORMANCE ZONE",category:"Sports",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:114,text:"Train Like A Champion",category:"Sports",fontSize:20,fontFamily:"Arial",fill:"#B22222",fontWeight:"600"},{id:115,text:"POWER WITHIN",category:"Sports",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:116,text:"Maximum Effort",category:"Sports",fontSize:26,fontFamily:"Verdana",fill:"#2E8B57",fontWeight:"800"},{id:117,text:"ELITE ATHLETE",category:"Sports",fontSize:28,fontFamily:"Arial",fontWeight:"900",fill:"#FFD700",hasBackground:!0,backgroundColor:"#8B0000"},{id:118,text:"Rise Above",category:"Sports",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#4169E1"},{id:119,text:"COMPETITIVE EDGE",category:"Sports",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#DC143C"},{id:120,text:"Strength & Honor",category:"Sports",fontSize:26,fontFamily:"Impact",fill:"#2F4F4F",fontWeight:"bold"},{id:121,text:"WINNING ATTITUDE",category:"Sports",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#32CD32",letterSpacing:1.5},{id:122,text:"Never Give Up",category:"Sports",fontSize:32,fontFamily:"Verdana",fontWeight:"bold",fill:"#FF4500"},{id:123,text:"ENDURANCE",category:"Sports",fontSize:36,fontFamily:"Impact",fontWeight:"bold",fill:"#228B22",textAlign:"center"},{id:124,text:"Peak Performance",category:"Sports",fontSize:24,fontFamily:"Georgia",fill:"#B8860B",fontWeight:"700"},{id:125,text:"DEDICATION PAYS OFF",category:"Sports",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:126,text:"STYLE ICON",category:"Lifestyle",fontSize:30,fontFamily:"Palatino",fontWeight:"bold",fill:"#000000",hasBackground:!0,backgroundColor:"#FFD700"},{id:127,text:"Chic & Unique",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:128,text:"TRENDSETTER",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#9370DB",textAlign:"center"},{id:129,text:"Fashion Forward",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FF69B4",fontWeight:"600"},{id:130,text:"BOUTIQUE VIBES",category:"Lifestyle",fontSize:22,fontFamily:"Arial",fontWeight:"bold",fill:"#4169E1"},{id:131,text:"Effortlessly Elegant",category:"Lifestyle",fontSize:20,fontFamily:"Georgia",fontStyle:"italic",fill:"#2F4F4F"},{id:132,text:"LUXE LIFESTYLE",category:"Lifestyle",fontSize:28,fontFamily:"Palatino",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:133,text:"Vintage Soul",category:"Lifestyle",fontSize:32,fontFamily:"Georgia",fill:"#8B4513",fontWeight:"700"},{id:134,text:"MODERN CLASSIC",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"800",fill:"#000000"},{id:135,text:"Street Style",category:"Lifestyle",fontSize:30,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:136,text:"SOPHISTICATED",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontWeight:"bold",fill:"#2E8B57",hasBackground:!0,backgroundColor:"#F5F5F5"},{id:137,text:"Boho Chic",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fontStyle:"italic",fill:"#CD853F"},{id:138,text:"MINIMALIST",category:"Lifestyle",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:3},{id:139,text:"Glamorous Life",category:"Lifestyle",fontSize:24,fontFamily:"Trebuchet MS",fill:"#FFD700",fontWeight:"700"},{id:140,text:"HAUTE COUTURE",category:"Lifestyle",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#4B0082"},{id:141,text:"Urban Explorer",category:"Lifestyle",fontSize:26,fontFamily:"Impact",fill:"#32CD32",fontWeight:"bold"},{id:142,text:"AESTHETIC VIBES",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#FF69B4"},{id:143,text:"Lifestyle Goals",category:"Lifestyle",fontSize:28,fontFamily:"Georgia",fill:"#20B2AA",fontWeight:"600"},{id:144,text:"PREMIUM QUALITY",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B22222"},{id:145,text:"Designer Dreams",category:"Lifestyle",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:146,text:"CURATED STYLE",category:"Lifestyle",fontSize:24,fontFamily:"Arial",fontWeight:"700",fill:"#2F4F4F",letterSpacing:1},{id:147,text:"Fashion Statement",category:"Lifestyle",fontSize:22,fontFamily:"Georgia",fill:"#FF1493",fontWeight:"600"},{id:148,text:"ARTISAN CRAFTED",category:"Lifestyle",fontSize:20,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#8B4513"},{id:149,text:"Timeless Elegance",category:"Lifestyle",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#000080"},{id:150,text:"SIGNATURE STYLE",category:"Lifestyle",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:151,text:"HAPPY BIRTHDAY",category:"Holidays",fontSize:32,fontFamily:"Comic Sans MS",fontWeight:"bold",fill:"#FF69B4",hasBackground:!0,backgroundColor:"#FFFF00",textAlign:"center"},{id:152,text:"Merry Christmas",category:"Holidays",fontSize:30,fontFamily:"Georgia",fill:"#B22222",fontWeight:"700",hasTextShadow:!0,textShadowX:2,textShadowY:2,textShadowBlur:4,textShadowColor:"#228B22"},{id:153,text:"CELEBRATION TIME",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700"},{id:154,text:"Happy New Year",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fill:"#4169E1",fontWeight:"700"},{id:155,text:"THANKFUL HEART",category:"Holidays",fontSize:24,fontFamily:"Georgia",fontWeight:"bold",fill:"#FF8C00",textAlign:"center"},{id:156,text:"Easter Blessings",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:157,text:"PARTY TIME",category:"Holidays",fontSize:34,fontFamily:"Impact",fontWeight:"bold",fill:"#FF1493",hasBackground:!0,backgroundColor:"#000000"},{id:158,text:"Halloween Spirit",category:"Holidays",fontSize:26,fontFamily:"Arial",fontWeight:"800",fill:"#FF4500"},{id:159,text:"FESTIVE MOOD",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontWeight:"bold",fill:"#32CD32"},{id:160,text:"Valentine's Day",category:"Holidays",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#DC143C"},{id:161,text:"ANNIVERSARY JOY",category:"Holidays",fontSize:"22",fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#B8860B"},{id:162,text:"Graduation Day",category:"Holidays",fontSize:28,fontFamily:"Arial",fill:"#000080",fontWeight:"700"},{id:163,text:"SUMMER VIBES",category:"Holidays",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#FFD700",textAlign:"center"},{id:164,text:"Winter Wonderland",category:"Holidays",fontSize:20,fontFamily:"Georgia",fill:"#4169E1",fontWeight:"600"},{id:165,text:"MOTHER'S DAY LOVE",category:"Holidays",fontSize:22,fontFamily:"Palatino",fontWeight:"bold",fill:"#FF69B4"},{id:166,text:"Father's Day Hero",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#2F4F4F",fontWeight:"700"},{id:167,text:"SPRING AWAKENING",category:"Holidays",fontSize:26,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#32CD32"},{id:168,text:"Holiday Magic",category:"Holidays",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#9370DB"},{id:169,text:"FAMILY GATHERING",category:"Holidays",fontSize:20,fontFamily:"Arial",fontWeight:"600",fill:"#8B4513"},{id:170,text:"Wedding Bliss",category:"Holidays",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#FFD700"},{id:171,text:"FIREWORKS NIGHT",category:"Holidays",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:172,text:"Autumn Leaves",category:"Holidays",fontSize:26,fontFamily:"Georgia",fill:"#D2691E",fontWeight:"600"},{id:173,text:"MILESTONE MOMENT",category:"Holidays",fontSize:22,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#4B0082"},{id:174,text:"Special Occasion",category:"Holidays",fontSize:24,fontFamily:"Arial",fill:"#B22222",fontWeight:"700"},{id:175,text:"CHEERS TO LIFE",category:"Holidays",fontSize:28,fontFamily:"Impact",fontWeight:"bold",fill:"#20B2AA",textAlign:"center"},{id:176,text:'"Life is Beautiful"',category:"Quotes",fontSize:26,fontFamily:"Georgia",fontStyle:"italic",fill:"#2E8B57",textAlign:"center"},{id:177,text:"CARPE DIEM",category:"Quotes",fontSize:32,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B",letterSpacing:2},{id:178,text:'"Choose Happiness"',category:"Quotes",fontSize:24,fontFamily:"Palatino",fontStyle:"italic",fill:"#FF69B4"},{id:179,text:"LIVE LAUGH LOVE",category:"Quotes",fontSize:24,fontFamily:"Arial",fontWeight:"600",fill:"#DC143C",textAlign:"center"},{id:180,text:'"Dream Without Fear"',category:"Quotes",fontSize:22,fontFamily:"Georgia",fontStyle:"italic",fill:"#4169E1"},{id:181,text:"WISDOM WITHIN",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#2F4F4F"},{id:182,text:'"Create Your Story"',category:"Quotes",fontSize:20,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:183,text:"INNER PEACE",category:"Quotes",fontSize:30,fontFamily:"Arial",fontWeight:"300",fill:"#20B2AA",letterSpacing:3},{id:184,text:'"Follow Your Heart"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF1493"},{id:185,text:"GRATITUDE DAILY",category:"Quotes",fontSize:26,fontFamily:"Impact",fontWeight:"bold",fill:"#FF8C00"},{id:186,text:'"Embrace Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#32CD32"},{id:187,text:"MINDFUL LIVING",category:"Quotes",fontSize:24,fontFamily:"Trebuchet MS",fontWeight:"600",fill:"#4B0082"},{id:188,text:'"Stay Curious"',category:"Quotes",fontSize:30,fontFamily:"Georgia",fontStyle:"italic",fill:"#B22222"},{id:189,text:"PURPOSE DRIVEN",category:"Quotes",fontSize:28,fontFamily:"Arial",fontWeight:"700",fill:"#8B4513"},{id:190,text:'"Find Your Why"',category:"Quotes",fontSize:26,fontFamily:"Palatino",fontStyle:"italic",fill:"#CD853F"},{id:191,text:"AUTHENTIC SELF",category:"Quotes",fontSize:24,fontFamily:"Impact",fontWeight:"bold",fill:"#FF4500"},{id:192,text:'"Less is More"',category:"Quotes",fontSize:32,fontFamily:"Arial",fontWeight:"300",fill:"#696969",letterSpacing:2},{id:193,text:"PRESENT MOMENT",category:"Quotes",fontSize:26,fontFamily:"Georgia",fontWeight:"600",fill:"#2E8B57"},{id:194,text:'"Trust The Process"',category:"Quotes",fontSize:22,fontFamily:"Palatino",fontStyle:"italic",fill:"#4169E1"},{id:195,text:"BALANCED LIFE",category:"Quotes",fontSize:28,fontFamily:"Trebuchet MS",fontWeight:"bold",fill:"#20B2AA"},{id:196,text:'"Spread Kindness"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#FF69B4"},{id:197,text:"GROWTH MINDSET",category:"Quotes",fontSize:26,fontFamily:"Arial",fontWeight:"700",fill:"#32CD32"},{id:198,text:'"Be The Change"',category:"Quotes",fontSize:28,fontFamily:"Palatino",fontStyle:"italic",fill:"#9370DB"},{id:199,text:"INFINITE POSSIBILITIES",category:"Quotes",fontSize:20,fontFamily:"Impact",fontWeight:"bold",fill:"#B8860B"},{id:200,text:'"Leave Your Mark"',category:"Quotes",fontSize:24,fontFamily:"Georgia",fontStyle:"italic",fill:"#8B0000",textAlign:"center"}],Ke=({isOpen:f,onClose:o,onAddText:a,theme:d})=>{const[s,h]=y.useState(""),[g,l]=y.useState("All"),n=y.useMemo(()=>{const p=St.reduce((E,B)=>(E[B.category]=(E[B.category]||0)+1,E),{});return[{name:"All",count:St.length},...Object.entries(p).map(([E,B])=>({name:E,count:B}))]},[St]),C=y.useMemo(()=>St.filter(p=>{const E=!s||p.text.toLowerCase().includes(s.toLowerCase())||p.category.toLowerCase().includes(s.toLowerCase()),B=g==="All"||p.category===g;return E&&B}),[St,s,g]),N=p=>{const E={...p,x:100,y:100};a("text",E),o()},D=()=>{a("text",{text:"Your Text Here",fontSize:24,fontFamily:"Arial",fill:"#000000",x:100,y:100}),o()};return f?i.jsx("div",{className:"text-templates-modal-overlay",onClick:o,children:i.jsxs("div",{className:"text-templates-modal",onClick:p=>p.stopPropagation(),children:[i.jsxs("div",{className:"modal-header",children:[i.jsx("h2",{children:"Text Templates"}),i.jsx("button",{className:"close-btn",onClick:o,"aria-label":"Close",children:"×"})]}),i.jsxs("div",{className:"modal-controls",children:[i.jsx("div",{className:"search-section",children:i.jsx("input",{type:"text",placeholder:"Search templates...",value:s,onChange:p=>h(p.target.value),className:"search-input"})}),i.jsx("div",{className:"category-tabs",children:n.map(p=>i.jsxs("button",{className:`category-tab ${g===p.name?"active":""}`,onClick:()=>l(p.name),children:[p.name,i.jsxs("span",{className:"count",children:["(",p.count,")"]})]},p.name))})]}),i.jsxs("div",{className:"templates-grid",children:[i.jsx("div",{className:"custom-text-option",onClick:D,children:i.jsxs("div",{className:"custom-text-preview",children:[i.jsx("div",{className:"custom-icon",children:"✏️"}),i.jsx("div",{className:"custom-label",children:"Create Custom Text"})]})}),C.map(p=>i.jsxs("div",{className:"template-item",onClick:()=>N(p),children:[i.jsx("div",{className:"template-preview",style:{fontFamily:p.fontFamily,fontSize:`${Math.min(p.fontSize*.6,18)}px`,fontWeight:p.fontWeight,fontStyle:p.fontStyle,color:p.fill,backgroundColor:p.hasBackground?p.backgroundColor:"transparent",textAlign:p.textAlign||"left",textTransform:p.textTransform||"none",letterSpacing:p.letterSpacing?`${p.letterSpacing}px`:"normal",textShadow:p.hasTextShadow?`${p.textShadowX}px ${p.textShadowY}px ${p.textShadowBlur}px ${p.textShadowColor}`:"none"},children:p.text}),i.jsxs("div",{className:"template-info",children:[i.jsx("span",{className:"template-category",children:p.category}),i.jsx("span",{className:"template-font",children:p.fontFamily})]})]},p.id))]}),i.jsx("div",{className:"modal-footer",children:i.jsxs("div",{className:"results-count",children:[C.length," template",C.length!==1?"s":""," found"]})})]})}):null},Ze=({onAddElement:f,onDeleteElement:o,onDuplicateElement:a,onUndo:d,onRedo:s,onToggleGrid:h,onToggleRulers:g,onToggleSnap:l,onImageUpload:n,canUndo:C,canRedo:N,showGrid:D,showRulers:p,snapToGrid:E,selectedElement:B,theme:F,readOnly:j,apiKey:J,apiEndpoint:T})=>{const[$,S]=y.useState(!1),[rt,M]=y.useState(!1),[ct,O]=y.useState(!1),[lt,Q]=y.useState(!1),[it,P]=y.useState(!1),[at,X]=y.useState(!1),[st,_]=y.useState(!1),U=L=>{const et=L.target.files[0];et&&et.type.startsWith("image/")&&n(et),L.target.value=""},m=L=>{f("icon",{iconData:L,text:L.symbol,fontSize:48,fontFamily:"Arial",fill:"#000000"})},K=L=>{f("qrcode",L)},u=L=>{f("barcode",L)},I=L=>{f("sticker",L)},W=L=>{f("embroidery",L)},H=(L,et)=>{f(L,et)},G=()=>{X(!at),_(!1)},Z=()=>{_(!st),X(!1)},q=L=>{L==="custom"?f("text"):L==="templates"&&P(!0),X(!1)},Y=L=>{f(L),_(!1)};return i.jsxs("div",{className:"toolbar",children:[i.jsxs("div",{className:"toolbar-section",children:[i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact",onClick:d,disabled:!C||j,title:"Undo (Ctrl+Z)",children:[i.jsx("span",{className:"icon",children:"↶"}),i.jsx("span",{className:"label",children:"Undo"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:s,disabled:!N||j,title:"Redo (Ctrl+Y)",children:[i.jsx("span",{className:"icon",children:"↷"}),i.jsx("span",{className:"label",children:"Redo"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:j,title:"Add Text",onClick:G,children:[i.jsx("span",{className:"icon",children:"𝐓"}),i.jsx("span",{className:"label",children:"Text"}),i.jsx("span",{className:`dropdown-arrow ${at?"open":""}`,children:"▼"})]}),i.jsxs("div",{className:`dropdown-menu ${at?"show":""}`,children:[i.jsxs("button",{onClick:()=>q("custom"),children:[i.jsx("span",{className:"icon",children:"𝐓"})," Custom Text"]}),i.jsxs("button",{onClick:()=>q("templates"),children:[i.jsx("span",{className:"icon",children:"📝"})," Text Templates"]})]})]}),i.jsxs("div",{className:"toolbar-dropdown",children:[i.jsxs("button",{className:"toolbar-btn compact dropdown-trigger",disabled:j,onClick:Z,children:[i.jsx("span",{className:"icon",children:"◩"}),i.jsx("span",{className:"label",children:"Shapes"}),i.jsx("span",{className:`dropdown-arrow ${st?"open":""}`,children:"▼"})]}),i.jsxs("div",{className:`dropdown-menu ${st?"show":""}`,children:[i.jsxs("button",{onClick:()=>Y("rectangle"),children:[i.jsx("span",{className:"icon",children:"▭"})," Rectangle"]}),i.jsxs("button",{onClick:()=>Y("circle"),children:[i.jsx("span",{className:"icon",children:"●"})," Circle"]}),i.jsxs("button",{onClick:()=>Y("triangle"),children:[i.jsx("span",{className:"icon",children:"▲"})," Triangle"]}),i.jsxs("button",{onClick:()=>Y("star"),children:[i.jsx("span",{className:"icon",children:"★"})," Star"]}),i.jsxs("button",{onClick:()=>Y("heart"),children:[i.jsx("span",{className:"icon",children:"♥"})," Heart"]}),i.jsxs("button",{onClick:()=>Y("arrow"),children:[i.jsx("span",{className:"icon",children:"➤"})," Arrow"]}),i.jsxs("button",{onClick:()=>Y("diamond"),children:[i.jsx("span",{className:"icon",children:"◆"})," Diamond"]}),i.jsxs("button",{onClick:()=>Y("hexagon"),children:[i.jsx("span",{className:"icon",children:"⬡"})," Hexagon"]}),i.jsxs("button",{onClick:()=>Y("pentagon"),children:[i.jsx("span",{className:"icon",children:"⬟"})," Pentagon"]}),i.jsxs("button",{onClick:()=>Y("oval"),children:[i.jsx("span",{className:"icon",children:"⬯"})," Oval"]}),i.jsxs("button",{onClick:()=>Y("roundedRectangle"),children:[i.jsx("span",{className:"icon",children:"▢"})," Rounded Rectangle"]}),i.jsxs("button",{onClick:()=>Y("horizontalLine"),children:[i.jsx("span",{className:"icon",children:"―"})," Horizontal Line"]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("label",{className:"toolbar-btn compact file-upload",style:{cursor:j?"not-allowed":"pointer"},children:[i.jsx("span",{className:"icon",children:"☁️"}),i.jsx("span",{className:"label",children:"Upload"}),i.jsx("input",{type:"file",accept:"image/*",onChange:U,disabled:j})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx(Ge,{onSelectIcon:m,theme:F,disabled:j}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>O(!0),disabled:j,title:"Add Sticker",children:[i.jsx("span",{className:"icon",children:"🎨"}),i.jsx("span",{className:"label",children:"Stickers"})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>S(!0),disabled:j,title:"Add QR Code",children:[i.jsx("span",{className:"icon",children:"▦"}),i.jsx("span",{className:"label",children:"QR Code"})]}),i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>M(!0),disabled:j,title:"Add Barcode",children:[i.jsx("span",{className:"icon",children:"▤"}),i.jsx("span",{className:"label",children:"Barcode"})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsx("div",{className:"toolbar-group embroidery-group",children:i.jsxs("button",{className:"toolbar-btn compact",onClick:()=>Q(!0),disabled:j,title:"Add Embroidery Design",children:[i.jsx("span",{className:"icon",children:"🧵"}),i.jsx("span",{className:"label",children:"Embroidery"})]})}),B&&i.jsxs(i.Fragment,{children:[i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:"toolbar-btn compact success",onClick:a,disabled:j,title:"Duplicate Element (Ctrl+D)",children:[i.jsx("span",{className:"icon",children:"⧉"}),i.jsx("span",{className:"label",children:"Copy"})]}),i.jsxs("button",{className:"toolbar-btn compact danger",onClick:o,disabled:j,title:"Delete Element (Delete)",children:[i.jsx("span",{className:"icon",children:"🗑️"}),i.jsx("span",{className:"label",children:"Delete"})]})]})]}),i.jsx("div",{className:"toolbar-separator"}),i.jsxs("div",{className:"toolbar-group",children:[i.jsxs("button",{className:`toolbar-btn compact ${D?"active":""}`,onClick:h,title:"Toggle Grid",children:[i.jsx("span",{className:"icon",children:"⚏"}),i.jsx("span",{className:"label",children:"Grid"})]}),i.jsxs("button",{className:`toolbar-btn compact ${p?"active":""}`,onClick:g,title:"Toggle Rulers",children:[i.jsx("span",{className:"icon",children:"📐"}),i.jsx("span",{className:"label",children:"Rulers"})]}),i.jsxs("button",{className:`toolbar-btn compact ${E?"active":""}`,onClick:l,title:"Snap to Grid",children:[i.jsx("span",{className:"icon",children:"🧲"}),i.jsx("span",{className:"label",children:"Snap"})]})]})]}),i.jsx(_e,{isOpen:$,onClose:()=>S(!1),onAddQRCode:K,theme:F}),i.jsx(Ye,{isOpen:rt,onClose:()=>M(!1),onAddBarcode:u,theme:F}),i.jsx(Ve,{isOpen:ct,onClose:()=>O(!1),onAddSticker:I,theme:F,apiKey:J,apiEndpoint:T}),i.jsx(Je,{isOpen:lt,onClose:()=>Q(!1),onAddEmbroidery:W,theme:F,apiKey:J,apiEndpoint:T}),i.jsx(Ke,{isOpen:it,onClose:()=>P(!1),onAddText:H,theme:F})]})},ti=({selectedElement:f,onUpdate:o,onMoveLayer:a,availableFonts:d,theme:s})=>{const[h,g]=y.useState(!1);if(!f)return i.jsxs("div",{className:"properties-panel",children:[i.jsx("h3",{children:"Properties"}),i.jsx("p",{className:"no-selection",children:"Select an element to edit its properties"})]});const l=(F,j)=>{o(f.id,{[F]:j})},n=()=>{var F,j,J;return i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Text Content"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Content"}),i.jsx("textarea",{value:f.text||"",onChange:T=>l("text",T.target.value),rows:3,placeholder:"Enter your text here..."})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Family"}),i.jsx("select",{value:f.fontFamily||"Arial",onChange:T=>l("fontFamily",T.target.value),children:d.map(T=>i.jsx("option",{value:T,children:T},T))})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Font Size"}),i.jsx("input",{type:"number",value:f.fontSize||20,onChange:T=>l("fontSize",parseInt(T.target.value)),min:"8",max:"200"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Height"}),i.jsx("input",{type:"number",step:"0.1",value:f.lineHeight||1.2,onChange:T=>l("lineHeight",parseFloat(T.target.value)),min:"0.5",max:"3"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Weight"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:f.fontWeight==="lighter"||f.fontWeight==="300"?"active":"",onClick:()=>l("fontWeight","300"),title:"Light",children:"Light"}),i.jsx("button",{className:!f.fontWeight||f.fontWeight==="normal"||f.fontWeight==="400"?"active":"",onClick:()=>l("fontWeight","normal"),title:"Normal",children:"Normal"}),i.jsx("button",{className:f.fontWeight==="bold"||f.fontWeight==="700"?"active":"",onClick:()=>l("fontWeight","bold"),title:"Bold",children:i.jsx("strong",{children:"Bold"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Style"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:f.fontStyle==="italic"?"active":"",onClick:()=>l("fontStyle",f.fontStyle==="italic"?"normal":"italic"),title:"Italic",children:i.jsx("em",{children:"I"})}),i.jsx("button",{className:(F=f.textDecoration)!=null&&F.includes("underline")?"active":"",onClick:()=>{const T=f.textDecoration||"",$=T.split(" ").filter(S=>S&&S!=="underline");T.includes("underline")||$.push("underline"),l("textDecoration",$.join(" ").trim())},title:"Underline",children:i.jsx("u",{children:"U"})}),i.jsx("button",{className:(j=f.textDecoration)!=null&&j.includes("overline")?"active":"",onClick:()=>{const T=f.textDecoration||"",$=T.split(" ").filter(S=>S&&S!=="overline");T.includes("overline")||$.push("overline"),l("textDecoration",$.join(" ").trim())},title:"Overline",children:i.jsx("span",{style:{textDecoration:"overline"},children:"O"})}),i.jsx("button",{className:(J=f.textDecoration)!=null&&J.includes("line-through")?"active":"",onClick:()=>{const T=f.textDecoration||"",$=T.split(" ").filter(S=>S&&S!=="line-through");T.includes("line-through")||$.push("line-through"),l("textDecoration",$.join(" ").trim())},title:"Strikethrough",children:i.jsx("s",{children:"S"})})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Transform"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!f.textTransform||f.textTransform==="none"?"active":"",onClick:()=>l("textTransform","none"),title:"Normal",children:"Aa"}),i.jsx("button",{className:f.textTransform==="uppercase"?"active":"",onClick:()=>l("textTransform","uppercase"),title:"Uppercase",children:"AA"}),i.jsx("button",{className:f.textTransform==="lowercase"?"active":"",onClick:()=>l("textTransform","lowercase"),title:"Lowercase",children:"aa"}),i.jsx("button",{className:f.textTransform==="capitalize"?"active":"",onClick:()=>l("textTransform","capitalize"),title:"Capitalize",children:"Aa"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Alignment"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!f.textAlign||f.textAlign==="left"?"active":"",onClick:()=>l("textAlign","left"),title:"Left Align",children:"⬅"}),i.jsx("button",{className:f.textAlign==="center"?"active":"",onClick:()=>l("textAlign","center"),title:"Center Align",children:"↔"}),i.jsx("button",{className:f.textAlign==="right"?"active":"",onClick:()=>l("textAlign","right"),title:"Right Align",children:"➡"}),i.jsx("button",{className:f.textAlign==="justify"?"active":"",onClick:()=>l("textAlign","justify"),title:"Justify",children:"≡"})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Text Color"}),i.jsx("input",{type:"color",value:f.fill||"#000000",onChange:T=>l("fill",T.target.value)})]}),i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Background Color"}),i.jsxs("div",{className:"color-with-toggle",children:[i.jsx("input",{type:"color",value:f.backgroundColor||"#ffffff",onChange:T=>l("backgroundColor",T.target.value),disabled:!f.hasBackground}),i.jsx("button",{className:`toggle-btn ${f.hasBackground?"active":""}`,onClick:()=>l("hasBackground",!f.hasBackground),title:f.hasBackground?"Remove background":"Add background",children:f.hasBackground?"👁":"👁‍🗨"})]})]})]})}),h&&i.jsxs(i.Fragment,{children:[i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Letter Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:f.letterSpacing||0,onChange:T=>l("letterSpacing",parseFloat(T.target.value)),min:"-5",max:"10"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Word Spacing"}),i.jsx("input",{type:"number",step:"0.1",value:f.wordSpacing||0,onChange:T=>l("wordSpacing",parseFloat(T.target.value)),min:"-10",max:"20"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Shadow"}),i.jsxs("div",{className:"text-shadow-controls",children:[i.jsx("div",{className:"shadow-toggle",children:i.jsx("button",{className:`toggle-btn ${f.hasTextShadow?"active":""}`,onClick:()=>l("hasTextShadow",!f.hasTextShadow),children:f.hasTextShadow?"Remove Shadow":"Add Shadow"})}),f.hasTextShadow&&i.jsxs("div",{className:"shadow-properties",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"H-Offset"}),i.jsx("input",{type:"number",value:f.textShadowX||2,onChange:T=>l("textShadowX",parseInt(T.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"V-Offset"}),i.jsx("input",{type:"number",value:f.textShadowY||2,onChange:T=>l("textShadowY",parseInt(T.target.value)),min:"-20",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Blur"}),i.jsx("input",{type:"number",value:f.textShadowBlur||4,onChange:T=>l("textShadowBlur",parseInt(T.target.value)),min:"0",max:"20"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Shadow Color"}),i.jsx("input",{type:"color",value:f.textShadowColor||"#000000",onChange:T=>l("textShadowColor",T.target.value)})]})]})]})]}),i.jsx("div",{className:"property-row",children:i.jsxs("div",{className:"color-input-group",children:[i.jsxs("div",{className:"color-input-item",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:T=>l("stroke",T.target.value)})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||0,onChange:T=>l("strokeWidth",parseInt(T.target.value)),min:"0",max:"20"})]})]})}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:f.opacity||1,onChange:T=>l("opacity",parseFloat(T.target.value))}),i.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Font Variant"}),i.jsxs("select",{value:f.fontVariant||"normal",onChange:T=>l("fontVariant",T.target.value),children:[i.jsx("option",{value:"normal",children:"Normal"}),i.jsx("option",{value:"small-caps",children:"Small Caps"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Writing Mode"}),i.jsxs("select",{value:f.writingMode||"horizontal-tb",onChange:T=>l("writingMode",T.target.value),children:[i.jsx("option",{value:"horizontal-tb",children:"Horizontal"}),i.jsx("option",{value:"vertical-rl",children:"Vertical Right-to-Left"}),i.jsx("option",{value:"vertical-lr",children:"Vertical Left-to-Right"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Text Direction"}),i.jsxs("div",{className:"button-group",children:[i.jsx("button",{className:!f.direction||f.direction==="ltr"?"active":"",onClick:()=>l("direction","ltr"),title:"Left to Right",children:"LTR"}),i.jsx("button",{className:f.direction==="rtl"?"active":"",onClick:()=>l("direction","rtl"),title:"Right to Left",children:"RTL"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Background Padding"}),i.jsx("input",{type:"number",value:f.backgroundPadding||5,onChange:T=>l("backgroundPadding",parseInt(T.target.value)),min:"0",max:"50",disabled:!f.hasBackground})]})]})]})},C=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Shape Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Fill Color"}),i.jsx("input",{type:"color",value:f.fill||"#000000",onChange:F=>l("fill",F.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Color"}),i.jsx("input",{type:"color",value:f.stroke||"#000000",onChange:F=>l("stroke",F.target.value)})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Stroke Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||2,onChange:F=>l("strokeWidth",parseInt(F.target.value)),min:"0",max:"20"})]}),f.type==="star"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Star Points"}),i.jsx("input",{type:"number",value:f.numPoints||5,onChange:F=>l("numPoints",parseInt(F.target.value)),min:"3",max:"20"})]}),f.type==="roundedRectangle"&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Corner Radius"}),i.jsx("input",{type:"number",value:f.cornerRadius||10,onChange:F=>l("cornerRadius",parseInt(F.target.value)),min:"0",max:"50"})]})]}),N=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Image Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Opacity"}),i.jsx("input",{type:"range",min:"0",max:"1",step:"0.1",value:f.opacity||1,onChange:F=>l("opacity",parseFloat(F.target.value))}),i.jsxs("span",{children:[Math.round((f.opacity||1)*100),"%"]})]}),h&&i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Border Radius"}),i.jsx("input",{type:"number",value:f.borderRadius||0,onChange:F=>l("borderRadius",parseInt(F.target.value)),min:"0",max:"50"})]})]}),D=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Position & Size"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"X"}),i.jsx("input",{type:"number",value:Math.round(f.x)||0,onChange:F=>l("x",parseInt(F.target.value))})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Y"}),i.jsx("input",{type:"number",value:Math.round(f.y)||0,onChange:F=>l("y",parseInt(F.target.value))})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Width"}),i.jsx("input",{type:"number",value:Math.round(f.width)||0,onChange:F=>l("width",parseInt(F.target.value)),min:"1"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Height"}),i.jsx("input",{type:"number",value:Math.round(f.height)||0,onChange:F=>l("height",parseInt(F.target.value)),min:"1"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Rotation"}),i.jsx("input",{type:"range",min:"-180",max:"180",value:f.rotation||0,onChange:F=>l("rotation",parseInt(F.target.value))}),i.jsxs("span",{children:[f.rotation||0,"°"]})]})]}),p=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Line Properties"}),i.jsxs("div",{className:"property-row",children:[i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Line Width"}),i.jsx("input",{type:"number",value:f.strokeWidth||f.height||2,onChange:F=>{const j=parseInt(F.target.value);l("strokeWidth",j),l("height",j)},min:"1",max:"50"})]}),i.jsxs("div",{className:"input-group",children:[i.jsx("label",{children:"Length"}),i.jsx("input",{type:"number",value:f.width||200,onChange:F=>l("width",parseInt(F.target.value)),min:"10",max:"1000"})]})]}),i.jsxs("div",{className:"property-row",children:[i.jsx("label",{children:"Line Color"}),i.jsxs("div",{className:"color-input-group",children:[i.jsx("input",{type:"color",value:f.stroke||f.fill||"#000000",onChange:F=>{l("stroke",F.target.value),l("fill",F.target.value)}}),i.jsx("input",{type:"text",value:f.stroke||f.fill||"#000000",onChange:F=>{l("stroke",F.target.value),l("fill",F.target.value)},placeholder:"#000000"})]})]})]}),E=()=>i.jsxs("div",{className:"property-group",children:[i.jsx("h4",{children:"Layer Controls"}),i.jsxs("div",{className:"button-group vertical",children:[i.jsx("button",{onClick:()=>a(f.id,"top"),children:"Bring to Front"}),i.jsx("button",{onClick:()=>a(f.id,"up"),children:"Bring Forward"}),i.jsx("button",{onClick:()=>a(f.id,"down"),children:"Send Backward"}),i.jsx("button",{onClick:()=>a(f.id,"bottom"),children:"Send to Back"})]})]}),B=["rectangle","circle","triangle","star","arrow","diamond","hexagon","pentagon","heart","oval","roundedRectangle"];return i.jsxs("div",{className:"properties-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Properties"}),i.jsx("span",{className:"element-type",children:f.type})]}),i.jsxs("div",{className:"panel-content",children:[f.type==="text"&&n(),B.includes(f.type)&&C(),f.type==="image"&&N(),f.type==="horizontalLine"&&p(),D(),E(),i.jsx("div",{className:"property-group",children:i.jsxs("button",{className:"toggle-advanced",onClick:()=>g(!h),children:[h?"Hide":"Show"," Advanced Options"]})})]})]})},ei=({elements:f,selectedElement:o,onSelectElement:a,onMoveLayer:d,onDeleteElement:s,theme:h})=>{const g=(n,C)=>{switch(n){case"text":return"T";case"rectangle":return"▭";case"circle":return"●";case"triangle":return"▲";case"star":return"★";case"arrow":return"➤";case"diamond":return"◆";case"hexagon":return"⬡";case"pentagon":return"⬟";case"heart":return"♥";case"oval":return"⬭";case"roundedRectangle":return"▢";case"horizontalLine":return"―";case"image":return"🖼";case"qrcode":return"⬚";case"barcode":return"|||";case"sticker":return"🎭";case"embroidery":return"🧵";default:return"?"}},l=n=>{var C,N;if(n.type==="text")return n.isIcon&&n.iconData?`Icon: ${n.iconData.name}`:((C=n.text)==null?void 0:C.substring(0,20))+(((N=n.text)==null?void 0:N.length)>20?"...":"")||"Text";if(n.type==="qrcode")return`QR Code: ${(n.data||"").substring(0,15)+((n.data||"").length>15?"...":"")}`;if(n.type==="barcode"){const D=n.format||"CODE128",p=n.data||"";return`Barcode (${D}): ${p.substring(0,10)+(p.length>10?"...":"")}`}return n.type==="sticker"?`Sticker: ${(n.name||"Untitled").substring(0,15)}`:n.type==="embroidery"?`Embroidery: ${(n.name||"Design").substring(0,15)}`:n.type.charAt(0).toUpperCase()+n.type.slice(1)};return i.jsxs("div",{className:"layers-panel",children:[i.jsxs("div",{className:"panel-header",children:[i.jsx("h3",{children:"Layers"}),i.jsx("span",{className:"layer-count",children:f.length})]}),i.jsx("div",{className:"layers-list",children:f.length===0?i.jsx("div",{className:"no-layers",children:"No elements added yet"}):[...f].reverse().map((n,C)=>i.jsxs("div",{className:`layer-item ${(o==null?void 0:o.id)===n.id?"selected":""}`,onClick:()=>a(n),children:[i.jsxs("div",{className:"layer-info",children:[i.jsx("span",{className:"layer-icon",children:g(n.type)}),i.jsx("span",{className:"layer-name",children:l(n)})]}),i.jsxs("div",{className:"layer-controls",children:[i.jsx("button",{className:"layer-btn",onClick:N=>{N.stopPropagation(),d(n.id,"up")},disabled:C===0,title:"Move Up",children:"↑"}),i.jsx("button",{className:"layer-btn",onClick:N=>{N.stopPropagation(),d(n.id,"down")},disabled:C===f.length-1,title:"Move Down",children:"↓"}),i.jsx("button",{className:"layer-btn delete",onClick:N=>{N.stopPropagation(),s(n.id)},title:"Delete",children:"×"})]})]},n.id))})]})};class ii{constructor(){this.canvas=document.createElement("canvas"),this.ctx=this.canvas.getContext("2d")}async exportAllSections(o,a,d,s,h="png",g=!0){const l={};for(const n of a){const C=n.id||n.sectionName,N=o[C];if(!N||!N.elements||N.elements.length===0){console.log(`Skipping section ${C} - no elements`);continue}if(this.canvas.width=d,this.canvas.height=s,this.ctx.clearRect(0,0,d,s),g){const p=n.image||n.sectionImage;if(p)try{const E=await this.loadImage(p);await this.processImageColor(E,N.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,d,s)}catch(E){console.warn("Failed to load background image:",E)}}else this.ctx.clearRect(0,0,d,s);for(const p of N.elements)await this.drawElement(p);const D=this.canvas.toDataURL(`image/${h}`,h==="jpeg"?.9:void 0);l[C]={dataUrl:D,blob:await this.dataUrlToBlob(D)}}return l}async downloadExports(o,a="design"){const d=Object.keys(o);if(d.length===0){alert("No designs to export");return}if(d.length===1){const s=d[0],{blob:h}=o[s],g=URL.createObjectURL(h),l=document.createElement("a");l.href=g,l.download=`${a}-${s}.png`,document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(g)}else for(const s of d){const{blob:h}=o[s],g=URL.createObjectURL(h),l=document.createElement("a");l.href=g,l.download=`${a}-${s}.png`,document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(g),await new Promise(n=>setTimeout(n,100))}}async loadImage(o){return new Promise((a,d)=>{const s=new Image;s.crossOrigin="anonymous",s.onload=()=>a(s),s.onerror=d,s.src=o})}getLuma(o,a,d){return(.2126*o+.7152*a+.0722*d)/255}async processImageColor(o,a){const d=document.createElement("canvas"),s=d.getContext("2d");d.width=o.width,d.height=o.height,s.clearRect(0,0,d.width,d.height),s.drawImage(o,0,0);const h=s.getImageData(0,0,d.width,d.height),g=h.data,l=this.hexToRgb(a);if(!l){console.warn("Invalid target color:",a);return}const{r:n,g:C,b:N}=l;for(let D=0;D<g.length;D+=4){if(g[D+3]===0)continue;const E=this.getLuma(g[D],g[D+1],g[D+2]);g[D]=Math.round(n*E),g[D+1]=Math.round(C*E),g[D+2]=Math.round(N*E)}return s.putImageData(h,0,0),this.processedImage=new Image,new Promise(D=>{this.processedImage.onload=()=>{D()},this.processedImage.onerror=()=>{console.error("Failed to create processed image"),D()},this.processedImage.src=d.toDataURL("image/png")})}async drawElement(o){this.ctx.save();const a=o.x+o.width/2,d=o.y+o.height/2;switch(this.ctx.translate(a,d),o.rotation&&this.ctx.rotate(o.rotation*Math.PI/180),this.ctx.translate(-o.width/2,-o.height/2),o.type){case"text":this.drawText(o);break;case"rectangle":this.drawRectangle(o);break;case"circle":this.drawCircle(o);break;case"triangle":this.drawTriangle(o);break;case"star":this.drawStar(o);break;case"arrow":this.drawArrow(o);break;case"diamond":this.drawDiamond(o);break;case"hexagon":this.drawHexagon(o);break;case"pentagon":this.drawPentagon(o);break;case"heart":this.drawHeart(o);break;case"oval":this.drawOval(o);break;case"roundedRectangle":this.drawRoundedRectangle(o);break;case"qrcode":await this.drawQRCode(o);break;case"barcode":await this.drawBarcode(o);break;case"horizontalLine":this.drawHorizontalLine(o);break;case"sticker":await this.drawSticker(o);break;case"embroidery":await this.drawEmbroidery(o);break;case"image":o.imageData&&this.ctx.drawImage(o.imageData,0,0,o.width,o.height);break}this.ctx.restore()}drawText(o){this.ctx.font=`${o.fontStyle||"normal"} ${o.fontWeight||"normal"} ${o.fontSize||20}px ${o.fontFamily||"Arial"}`,this.ctx.fillStyle=o.fill||"#000000",this.ctx.textAlign=o.textAlign||"left",this.ctx.textBaseline="top",o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth);const a=(o.text||"Text").split(`
+`),d=(o.fontSize||20)*1.2;a.forEach((s,h)=>{const g=h*d;o.stroke&&o.strokeWidth>0&&this.ctx.strokeText(s,0,g),this.ctx.fillText(s,0,g)})}drawRectangle(o){o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fillRect(0,0,o.width,o.height)),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.strokeRect(0,0,o.width,o.height))}drawCircle(o){const a=Math.min(o.width,o.height)/2,d=o.width/2,s=o.height/2;this.ctx.beginPath(),this.ctx.arc(d,s,a,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawTriangle(o){const a=o.width/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(0,o.height),this.ctx.lineTo(o.width,o.height),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawStar(o){const a=o.width/2,d=o.height/2,s=Math.min(o.width,o.height)/2,h=s*.4,g=o.numPoints||5;this.ctx.beginPath();for(let l=0;l<g*2;l++){const n=l%2===0?s:h,C=l*Math.PI/g,N=a+Math.cos(C)*n,D=d+Math.sin(C)*n;l===0?this.ctx.moveTo(N,D):this.ctx.lineTo(N,D)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawArrow(o){const a=o.width,d=o.height,s=a*.3;this.ctx.beginPath(),this.ctx.moveTo(a/2,0),this.ctx.lineTo(a,d*.6),this.ctx.lineTo(a-s,d*.6),this.ctx.lineTo(a-s,d),this.ctx.lineTo(s,d),this.ctx.lineTo(s,d*.6),this.ctx.lineTo(0,d*.6),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}async dataUrlToBlob(o){return new Promise(a=>{const d=document.createElement("canvas"),s=d.getContext("2d"),h=new Image;h.onload=()=>{d.width=h.width,d.height=h.height,s.drawImage(h,0,0),d.toBlob(a)},h.src=o})}hexToRgb(o){const a=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(o);return a?{r:parseInt(a[1],16),g:parseInt(a[2],16),b:parseInt(a[3],16)}:null}drawDiamond(o){const a=o.width/2,d=o.height/2;this.ctx.beginPath(),this.ctx.moveTo(a,0),this.ctx.lineTo(o.width,d),this.ctx.lineTo(a,o.height),this.ctx.lineTo(0,d),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHexagon(o){const a=o.width/2,d=o.height/2,s=Math.min(o.width,o.height)/2,h=6;this.ctx.beginPath();for(let g=0;g<h;g++){const l=g*2*Math.PI/h-Math.PI/2,n=a+s*Math.cos(l),C=d+s*Math.sin(l);g===0?this.ctx.moveTo(n,C):this.ctx.lineTo(n,C)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawPentagon(o){const a=o.width/2,d=o.height/2,s=Math.min(o.width,o.height)/2,h=5;this.ctx.beginPath();for(let g=0;g<h;g++){const l=g*2*Math.PI/h-Math.PI/2,n=a+s*Math.cos(l),C=d+s*Math.sin(l);g===0?this.ctx.moveTo(n,C):this.ctx.lineTo(n,C)}this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawHeart(o){const a=o.width,d=o.height,s=0,h=0;this.ctx.beginPath();const g=d*.3;this.ctx.moveTo(s+a/2,h+g),this.ctx.bezierCurveTo(s+a/2,h,s,h,s,h+g),this.ctx.bezierCurveTo(s,h+(d+g)/2,s+a/2,h+(d+g)/2,s+a/2,h+d),this.ctx.bezierCurveTo(s+a/2,h+(d+g)/2,s+a,h+(d+g)/2,s+a,h+g),this.ctx.bezierCurveTo(s+a,h,s+a/2,h,s+a/2,h+g),this.ctx.closePath(),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawOval(o){const a=o.width/2,d=o.height/2,s=o.width/2,h=o.height/2;this.ctx.beginPath(),this.ctx.ellipse(a,d,s,h,0,0,2*Math.PI),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawRoundedRectangle(o){const a=Math.min(o.width,o.height)*.1;this.drawRoundedRect(0,0,o.width,o.height,a),o.fill&&o.fill!=="transparent"&&(this.ctx.fillStyle=o.fill,this.ctx.fill()),o.stroke&&o.strokeWidth>0&&(this.ctx.strokeStyle=o.stroke,this.ctx.lineWidth=o.strokeWidth,this.ctx.stroke())}drawRoundedRect(o,a,d,s,h){this.ctx.beginPath(),this.ctx.moveTo(o+h,a),this.ctx.lineTo(o+d-h,a),this.ctx.quadraticCurveTo(o+d,a,o+d,a+h),this.ctx.lineTo(o+d,a+s-h),this.ctx.quadraticCurveTo(o+d,a+s,o+d-h,a+s),this.ctx.lineTo(o+h,a+s),this.ctx.quadraticCurveTo(o,a+s,o,a+s-h),this.ctx.lineTo(o,a+h),this.ctx.quadraticCurveTo(o,a,o+h,a),this.ctx.closePath()}async drawQRCode(o){if(o.imageObject)this.ctx.drawImage(o.imageObject,0,0,o.width,o.height);else if(o.src)try{const a=await this.loadImage(o.src);this.ctx.drawImage(a,0,0,o.width,o.height)}catch(a){console.warn("Failed to load QR code image for export:",a),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("QR Error",o.width/2,o.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No QR Data",o.width/2,o.height/2)}async drawBarcode(o){if(o.imageObject)this.ctx.drawImage(o.imageObject,0,0,o.width,o.height);else if(o.src)try{const a=await this.loadImage(o.src);this.ctx.drawImage(a,0,0,o.width,o.height)}catch(a){console.warn("Failed to load barcode image for export:",a),this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Barcode Error",o.width/2,o.height/2)}else this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("No Barcode Data",o.width/2,o.height/2)}drawHorizontalLine(o){this.ctx.save(),o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.strokeStyle=o.stroke||o.fill||"#000000",this.ctx.lineWidth=o.strokeWidth||o.height||2,this.ctx.lineCap="round",this.ctx.beginPath(),this.ctx.moveTo(0,o.height/2),this.ctx.lineTo(o.width,o.height/2),this.ctx.stroke(),this.ctx.restore()}async drawSticker(o){try{let a=null;if(o.imageObject)a=o.imageObject;else if(o.imageData)a=o.imageData;else if(o.src||o.image){const d=o.src||o.image;a=await this.loadImage(d)}else o.data&&o.data.image&&(a=await this.loadImage(o.data.image));a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Sticker",o.width/2,o.height/2))}catch(a){console.warn("Failed to draw sticker:",a),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",o.width/2,o.height/2)}}async drawEmbroidery(o){try{let a=null;if(o.imageObject)a=o.imageObject;else if(o.imageData)a=o.imageData;else if(o.src||o.image){const d=o.src||o.image;a=await this.loadImage(d)}else o.data&&o.data.image&&(a=await this.loadImage(o.data.image));a?(o.opacity!==void 0&&(this.ctx.globalAlpha=o.opacity),this.ctx.drawImage(a,0,0,o.width,o.height)):(this.ctx.fillStyle="#f0f0f0",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#ccc",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#666",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Embroidery",o.width/2,o.height/2))}catch(a){console.warn("Failed to draw embroidery:",a),this.ctx.fillStyle="#ffebee",this.ctx.fillRect(0,0,o.width,o.height),this.ctx.strokeStyle="#f44336",this.ctx.strokeRect(0,0,o.width,o.height),this.ctx.fillStyle="#f44336",this.ctx.font="12px Arial",this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.fillText("Error",o.width/2,o.height/2)}}async blobToFile(o,a,d="image/png"){return new File([o],a,{type:d,lastModified:Date.now()})}async exportAllSectionsAsJSON(o,a,d,s,h="png"){const g=[],l=[];for(const C of a){const N=C.id||C.sectionName,D=o[N];if(!D||!D.elements||D.elements.length===0){console.log(`Skipping section ${N} - no elements`);continue}const p=await this.exportSectionAsBlob(D,C,d,s,h,!0);if(p){const B=await this.blobToFile(p,`${N}-full.${h}`,`image/${h}`);g.push({sectionName:N,sectionImage:B})}const E=await this.exportSectionAsBlob(D,C,d,s,h,!1);if(E){const B=await this.blobToFile(E,`${N}-print.${h}`,`image/${h}`);l.push({sectionName:N,sectionImage:B})}}const n={sections:o,canvasWidth:d,canvasHeight:s,format:h,timestamp:new Date().toISOString(),version:"1.0"};return{fullDesign:g,printReady:l,designFile:JSON.stringify(n)}}async exportSectionAsBlob(o,a,d,s,h="png",g=!0){try{if(this.canvas.width=d,this.canvas.height=s,this.ctx.clearRect(0,0,d,s),g){const l=a.image||a.sectionImage;if(l)try{const n=await this.loadImage(l);await this.processImageColor(n,o.selectedColor||"#FFFFFF"),this.ctx.drawImage(this.processedImage,0,0,d,s)}catch(n){console.warn("Failed to load background image:",n)}}else this.ctx.clearRect(0,0,d,s);for(const l of o.elements)await this.drawElement(l);return new Promise(l=>{this.canvas.toBlob(l,`image/${h}`,h==="jpeg"?.9:void 0)})}catch(l){return console.error("Error exporting section as blob:",l),null}}async exportCurrentSectionAsJSON(o,a="png"){var h,g,l,n,C;const d={[((h=o.activeSection)==null?void 0:h.sectionName)||"main"]:o},s=[{id:((g=o.activeSection)==null?void 0:g.sectionName)||"main",sectionName:((l=o.activeSection)==null?void 0:l.sectionName)||"main",image:(n=o.activeSection)==null?void 0:n.sectionImage,sectionImage:(C=o.activeSection)==null?void 0:C.sectionImage}];return await this.exportAllSectionsAsJSON(d,s,o.canvasWidth,o.canvasHeight,a)}}class oi{constructor(o="localStorage"){this.storage=o==="sessionStorage"?sessionStorage:localStorage,this.STORAGE_PREFIX="mypixia_canvas_",this.DESIGNS_LIST_KEY="mypixia_saved_designs"}saveDesign(o,a){var d;try{const s=this.generateDesignId(o),h=new Date().toISOString(),g={id:s,name:o,timestamp:h,version:"1.0",canvasData:{elements:a.elements||[],canvasWidth:a.canvasWidth||800,canvasHeight:a.canvasHeight||600,selectedColor:a.selectedColor||"#FF0000",activeSection:a.activeSection||null,product:a.product||null,sectionDesigns:a.sectionDesigns||{},zoomLevel:a.zoomLevel||1,showGrid:a.showGrid||!1,snapToGrid:a.snapToGrid||!0},metadata:{elementCount:((d=a.elements)==null?void 0:d.length)||0,lastModified:h,thumbnail:a.thumbnail||null}};return this.storage.setItem(this.STORAGE_PREFIX+s,JSON.stringify(g)),this.updateDesignsList(s,o,h),{success:!0,designId:s,message:"Design saved successfully"}}catch(s){return console.error("Error saving design:",s),{success:!1,error:s.message}}}loadDesign(o){try{let a=o;if(!o.startsWith("design_")){const g=this.getAllDesigns().find(l=>l.name===o);if(!g)return{success:!1,error:"Design not found"};a=g.id}const d=this.storage.getItem(this.STORAGE_PREFIX+a);return d?{success:!0,data:JSON.parse(d)}:{success:!1,error:"Design not found"}}catch(a){return console.error("Error loading design:",a),{success:!1,error:a.message}}}getAllDesigns(){try{const o=this.storage.getItem(this.DESIGNS_LIST_KEY);return o?JSON.parse(o):[]}catch(o){return console.error("Error getting designs list:",o),[]}}deleteDesign(o){try{this.storage.removeItem(this.STORAGE_PREFIX+o);const d=this.getAllDesigns().filter(s=>s.id!==o);return this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(d)),{success:!0,message:"Design deleted successfully"}}catch(a){return console.error("Error deleting design:",a),{success:!1,error:a.message}}}exportDesignAsFile(o){try{const a=this.loadDesign(o);if(!a.success)return a;const d=a.data,s=JSON.stringify(d,null,2),h=new Blob([s],{type:"application/json"}),g=URL.createObjectURL(h),l=document.createElement("a");return l.href=g,l.download=`${d.name}_${d.id}.json`,document.body.appendChild(l),l.click(),document.body.removeChild(l),URL.revokeObjectURL(g),{success:!0,message:"Design exported successfully"}}catch(a){return console.error("Error exporting design:",a),{success:!1,error:a.message}}}importDesignFromFile(o){return new Promise(a=>{try{const d=new FileReader;d.onload=s=>{try{const h=JSON.parse(s.target.result);if(!this.validateDesignData(h)){a({success:!1,error:"Invalid design file format"});return}const g=this.generateDesignId(h.name+"_imported");h.id=g,h.name+="_imported",h.timestamp=new Date().toISOString(),h.metadata.lastModified=h.timestamp,this.storage.setItem(this.STORAGE_PREFIX+g,JSON.stringify(h)),this.updateDesignsList(g,h.name,h.timestamp),a({success:!0,data:h,message:"Design imported successfully"})}catch{a({success:!1,error:"Failed to parse design file"})}},d.readAsText(o)}catch(d){a({success:!1,error:d.message})}})}autoSave(o,a){const d=this.STORAGE_PREFIX+"autosave_"+o;try{const s={timestamp:new Date().toISOString(),canvasData:a};return this.storage.setItem(d,JSON.stringify(s)),!0}catch(s){return console.error("Auto-save failed:",s),!1}}loadAutoSave(o){const a=this.STORAGE_PREFIX+"autosave_"+o;try{const d=this.storage.getItem(a);return d?JSON.parse(d):null}catch(d){return console.error("Failed to load auto-save:",d),null}}clearAutoSave(o){const a=this.STORAGE_PREFIX+"autosave_"+o;this.storage.removeItem(a)}getStorageInfo(){const o=this.getAllDesigns();let a=0;return o.forEach(d=>{const s=this.storage.getItem(this.STORAGE_PREFIX+d.id);s&&(a+=new Blob([s]).size)}),{designCount:o.length,totalSize:a,totalSizeFormatted:this.formatBytes(a),storageLimit:this.getStorageLimit()}}clearAllDesigns(){try{return this.getAllDesigns().forEach(a=>{this.storage.removeItem(this.STORAGE_PREFIX+a.id)}),this.storage.removeItem(this.DESIGNS_LIST_KEY),{success:!0,message:"All designs cleared"}}catch(o){return{success:!1,error:o.message}}}generateDesignId(o){const a=Date.now(),d=Math.random().toString(36).substring(2,8);return`design_${a}_${d}`}updateDesignsList(o,a,d){const s=this.getAllDesigns(),h=s.findIndex(l=>l.id===o),g={id:o,name:a,timestamp:d,lastModified:d};h>=0?s[h]=g:s.push(g),s.sort((l,n)=>new Date(n.timestamp)-new Date(l.timestamp)),this.storage.setItem(this.DESIGNS_LIST_KEY,JSON.stringify(s))}validateDesignData(o){return o&&o.id&&o.name&&o.canvasData&&Array.isArray(o.canvasData.elements)}formatBytes(o){if(o===0)return"0 Bytes";const a=1024,d=["Bytes","KB","MB","GB"],s=Math.floor(Math.log(o)/Math.log(a));return parseFloat((o/Math.pow(a,s)).toFixed(2))+" "+d[s]}getStorageLimit(){try{if("storage"in navigator&&"estimate"in navigator.storage)return navigator.storage.estimate().then(o=>o.quota)}catch{console.warn("Unable to estimate storage quota")}return"Unknown"}}const re=y.forwardRef((f,o)=>{const{theme:a={primaryColor:"#000000",secondaryColor:"#cf7e52",tertiaryColor:"#FFFFFF"},canvasId:d=null,readOnly:s=!1,product:h={name:"Premium Crew Neck T-Shirt",category:"Tshirts",description:"Men's crew neck t-shirts",plainColor:"Y",mainImage:"https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png",colorSettings:["#FF0000","#0000FF","#008000","#000000","#FFFFFF","#808080","#FFFF00"],sections:[{sectionName:"Front",sectionImage:"https://static.mypixia.com/prod/products/96ca4acb-c426-4619-a2c4-7acd95b78451.png"},{sectionName:"Sleeve-left",sectionImage:"https://static.mypixia.com/prod/products/27b8c138-af4e-4ea0-833d-88b10fbd3cf7.png"},{sectionName:"Back",sectionImage:"https://static.mypixia.com/prod/products/d4c53776-7b7d-41c5-a6b5-2bf5876cd26e.png"}]}}=f,[g,l]=y.useState([]),[n,C]=y.useState(null),[N,D]=y.useState(!1),[p,E]=y.useState(!1),[B,F]=y.useState(!1),[j,J]=y.useState({x:0,y:0}),[T,$]=y.useState(null),[S,rt]=y.useState(800),[M,ct]=y.useState(600),[O,lt]=y.useState(1),[Q,it]=y.useState(h.colorSettings[0]),[P,at]=y.useState(!1),[X,st]=y.useState(!0),[_,U]=y.useState(!0),[m,K]=y.useState(h.sections[0]),[u,I]=y.useState(!1),[W,H]=y.useState({}),[G,Z]=y.useState([]),[q,Y]=y.useState(-1),[L]=y.useState(new oi("localStorage")),[et,Ft]=y.useState(!0),[zt,Bt]=y.useState(null),ht=y.useRef(null),ae=y.useRef(null),ft=y.useRef(null),gt=y.useRef(null),Mt=y.useRef(null),At=y.useRef(new ii),mt=y.useRef(!1),wt=y.useRef(null),ot=y.useCallback(()=>{const e={elements:JSON.parse(JSON.stringify(g)),selectedElement:n?{...n}:null,timestamp:Date.now()},t=G.slice(0,q+1);t.push(e),t.length>50?t.shift():Y(q+1),Z(t)},[g,n,G,q]),ut=y.useCallback(()=>({elements:g,canvasWidth:S,canvasHeight:M,selectedColor:Q,activeSection:m,product:h,sectionDesigns:W,zoomLevel:O,showGrid:P,snapToGrid:_,selectedElement:n?{...n}:null,canvasRef:ht}),[g,S,M,Q,m,h,W,O,P,_,n]);y.useCallback((e,t)=>{Bt(new Date().toISOString()),t&&L.clearAutoSave(t),console.log("Design saved:",e,t)},[L]),y.useCallback((e,t)=>{var r;try{l(e.elements||[]),rt(e.canvasWidth||800),ct(e.canvasHeight||600),it(e.selectedColor||h.colorSettings[0]),lt(e.zoomLevel||1),at(e.showGrid||!1),U(e.snapToGrid||!0),C(null),e.sectionDesigns&&H(e.sectionDesigns),e.activeSection&&K(e.activeSection),Z([]),Y(-1),setTimeout(()=>{ot()},100),Bt(((r=t.metadata)==null?void 0:r.lastModified)||new Date().toISOString()),console.log("Design loaded successfully:",t.name)}catch(c){console.error("Error loading design:",c)}},[h.colorSettings,ot]);const Wt=y.useCallback(()=>{if(!et||g.length===0)return;const e=`autosave_${(m==null?void 0:m.sectionName)||"main"}_${Date.now()}`,t=ut();L.autoSave(e,t)&&console.log("Auto-saved at:",new Date().toLocaleTimeString())},[et,g.length,m==null?void 0:m.sectionName,ut,L]);y.useEffect(()=>(et&&g.length>0&&(wt.current&&clearTimeout(wt.current),wt.current=setTimeout(()=>{Wt()},3e4)),()=>{wt.current&&clearTimeout(wt.current)}),[g,Q,m,et,Wt]),y.useEffect(()=>{const t=setTimeout(()=>{if(g.length===0&&G.length<=1){const c="Arial",x="Change me",b=document.createElement("canvas").getContext("2d");b.font=`24px ${c}`;const k=b.measureText(x).width,A={id:nt(),type:"text",x:S/2-k/2,y:M/2-24/2,width:k,height:24,text:x,fontSize:24,fontFamily:c,fontWeight:"normal",fontStyle:"normal",textAlign:"left",fill:"#000000",stroke:"",strokeWidth:0,rotation:0,opacity:1};l([A]),C(A),setTimeout(()=>{ot()},100)}},300);return()=>clearTimeout(t)},[]);const It=y.useCallback((e="png",t=!0)=>{const r=ut();return h.sections,At.current.exportAllSections({[(m==null?void 0:m.sectionName)||"main"]:r},[{id:(m==null?void 0:m.sectionName)||"main",sectionName:(m==null?void 0:m.sectionName)||"main",image:m==null?void 0:m.sectionImage,sectionImage:m==null?void 0:m.sectionImage}],S,M,e,t)},[ut,h.sections,m,S,M]),se=["Arial","Helvetica","Times New Roman","Georgia","Verdana","Courier New","Tahoma","Trebuchet MS","Impact","Comic Sans MS","Palatino","Garamond","Bookman","Avant Garde","Century Gothic"],Ct=20;y.useEffect(()=>{const e=()=>I(window.innerWidth<768);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),y.useEffect(()=>{const e=document.createElement("canvas");e.width=S,e.height=M,Mt.current=e},[S,M]),y.useEffect(()=>{G.length===0&&ot()},[]);const Tt=(e,t,r,c,x,w)=>{e.beginPath(),e.moveTo(t+w,r),e.lineTo(t+c-w,r),e.quadraticCurveTo(t+c,r,t+c,r+w),e.lineTo(t+c,r+x-w),e.quadraticCurveTo(t+c,r+x,t+c-w,r+x),e.lineTo(t+w,r+x),e.quadraticCurveTo(t,r+x,t,r+x-w),e.lineTo(t,r+w),e.quadraticCurveTo(t,r,t+w,r),e.closePath()},Lt=(e,t)=>{if(!t.isIcon)return{x:t.x,y:t.y,width:t.width,height:t.height,cx:t.x+t.width/2,cy:t.y+t.height/2};e.save(),e.font=`${t.fontStyle||""} ${t.fontWeight||""} ${t.fontSize}px ${t.fontFamily}`,e.textBaseline="alphabetic",e.textAlign="left";const r=e.measureText(t.text),c=r.actualBoundingBoxAscent??t.fontSize*.8,x=r.actualBoundingBoxDescent??t.fontSize*.2,w=r.actualBoundingBoxLeft??0,b=r.actualBoundingBoxRight??r.width,v=w+b,k=c+x,A=t.x,R=t.y,z=A-v/2-w,tt=R-k/2-c;return e.restore(),{x:z,y:tt,width:v,height:k,cx:A,cy:R}},le=(e,t)=>{if(!t)return;const r=8,c=8,x=4,w=30,b=Lt(e,t),v=t.isIcon?Math.max(r,12):r,k={x:-b.width/2-v,y:-b.height/2-v,w:b.width+v*2,h:b.height+v*2};e.save(),e.translate(b.cx,b.cy),t.rotation&&e.rotate(t.rotation*Math.PI/180);const A=e.createLinearGradient(k.x,k.y,k.x+k.w,k.y+k.h);A.addColorStop(0,"#3b82f6"),A.addColorStop(.5,"#1d4ed8"),A.addColorStop(1,"#3b82f6"),e.strokeStyle="rgba(59,130,246,.3)",e.lineWidth=3,Tt(e,k.x-1,k.y-1,k.w+2,k.h+2,x+1),e.stroke(),e.strokeStyle=A,e.lineWidth=2,e.setLineDash([8,4]),Tt(e,k.x,k.y,k.w,k.h,x),e.stroke(),e.lineDashOffset=-(Date.now()/50)%12,e.strokeStyle="#ffffff",e.lineWidth=1,e.setLineDash([4,8]),Tt(e,k.x,k.y,k.w,k.h,x),e.stroke(),e.setLineDash([]),e.lineDashOffset=0,[{x:k.x,y:k.y},{x:k.x+k.w,y:k.y},{x:k.x+k.w,y:k.y+k.h},{x:k.x,y:k.y+k.h}].forEach(tt=>{e.fillStyle="rgba(0,0,0,.2)",e.fillRect(tt.x-c/2+1,tt.y-c/2+1,c,c),e.fillStyle="#ffffff",e.fillRect(tt.x-c/2,tt.y-c/2,c,c),e.strokeStyle="#3b82f6",e.lineWidth=1,e.strokeRect(tt.x-c/2,tt.y-c/2,c,c)});const R=0,z=k.y-w;e.strokeStyle="#3b82f6",e.lineWidth=1,e.setLineDash([2,2]),e.beginPath(),e.moveTo(R,z+12),e.lineTo(R,k.y),e.stroke(),e.setLineDash([]),e.beginPath(),e.arc(R,z,12,0,2*Math.PI),e.fillStyle="#f59e0b",e.fill(),e.strokeStyle="#ffffff",e.lineWidth=2,e.stroke(),e.strokeStyle="#ffffff",e.lineWidth=2,e.beginPath(),e.arc(R,z,6,-Math.PI/2,Math.PI,!1),e.stroke(),e.beginPath(),e.moveTo(R-6,z),e.lineTo(R-3,z-3),e.lineTo(R-3,z+3),e.closePath(),e.fillStyle="#ffffff",e.fill(),e.restore()},ne=(e,t)=>{if(!t)return[];const r=Lt(e,t),c=t.isIcon?Math.max(8,12):8,x=8,w=30,b=(t.rotation||0)*Math.PI/180,v={x:-r.width/2-c,y:-r.height/2-c,w:r.width+c*2,h:r.height+c*2},k=[{x:v.x,y:v.y,type:"nw-resize"},{x:v.x+v.w,y:v.y,type:"ne-resize"},{x:v.x+v.w,y:v.y+v.h,type:"se-resize"},{x:v.x,y:v.y+v.h,type:"sw-resize"},{x:0,y:v.y-w,type:"rotate"}],A=Math.cos(b),R=Math.sin(b);return k.map(z=>({x:r.cx+(z.x*A-z.y*R),y:r.cy+(z.x*R+z.y*A),type:z.type,size:z.type==="rotate"?24:x}))},Pt=(e,t,r)=>{if(!r)return null;const c=ht.current;if(!c)return null;const x=c.getContext("2d"),w=ne(x,r);for(const b of w){const v=e-b.x,k=t-b.y;if(Math.sqrt(v*v+k*k)<=b.size/2)return b.type}return null},bt=y.useCallback(()=>{if(q>0){const e=G[q-1];l(e.elements),C(e.selectedElement),Y(q-1)}},[G,q]),pt=y.useCallback(()=>{if(q<G.length-1){const e=G[q+1];l(e.elements),C(e.selectedElement),Y(q+1)}},[G,q]),xt=e=>_?Math.round(e/Ct)*Ct:e;y.useEffect(()=>{if(m!=null&&m.sectionImage){ft.current=null,gt.current=null;const e=ht.current;e&&(e.getContext("2d").clearRect(0,0,S,M),console.log("cleared canvas"));const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{ft.current=t,jt(t,Q)},t.onerror=()=>{console.error("Failed to load background image:",m.sectionImage),V()},t.src=m.sectionImage}else ft.current=null,gt.current=null,V()},[m==null?void 0:m.sectionImage]),y.useEffect(()=>{const e=t=>{const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))){if((t.key==="Delete"||t.key==="Backspace")&&n&&!s){t.preventDefault();const x=n;l(w=>w.filter(b=>b.id!==x.id)),C(null),ot()}if(t.ctrlKey||t.metaKey)switch(t.key){case"z":t.shiftKey?(t.preventDefault(),pt()):(t.preventDefault(),bt());break;case"y":t.preventDefault(),pt();break}}};return document.addEventListener("keydown",e),()=>{document.removeEventListener("keydown",e)}},[n,s,bt,pt,ot]);const ce=e=>{const t=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return t?{r:parseInt(t[1],16),g:parseInt(t[2],16),b:parseInt(t[3],16)}:null},nt=()=>`element_${Date.now()}_${Math.random().toString(36).substr(2,9)}`,de=e=>{e.strokeStyle="#e0e0e0",e.lineWidth=1,e.setLineDash([1,1]);for(let t=0;t<=S;t+=Ct)e.beginPath(),e.moveTo(t,0),e.lineTo(t,M),e.stroke();for(let t=0;t<=M;t+=Ct)e.beginPath(),e.moveTo(0,t),e.lineTo(S,t),e.stroke();e.setLineDash([])},fe=(e,t)=>{e.save();const r=t.x+t.width/2,c=t.y+t.height/2;switch(e.translate(r,c),t.rotation&&e.rotate(t.rotation*Math.PI/180),e.translate(-t.width/2,-t.height/2),t.type){case"text":xe(e,t);break;case"rectangle":ye(e,t);break;case"circle":ue(e,t);break;case"triangle":me(e,t);break;case"star":pe(e,t);break;case"arrow":we(e,t);break;case"diamond":be(e,t);break;case"hexagon":ke(e,t);break;case"pentagon":ve(e,t);break;case"heart":Se(e,t);break;case"oval":Fe(e,t);break;case"roundedRectangle":Ce(e,t);break;case"image":je(e,t);break;case"qrcode":ge(e,t);break;case"barcode":he(e,t);break;case"sticker":Ne(e,t);break;case"horizontalLine":Te(e,t);break;case"embroidery":Ae(e,t);break}e.restore()},he=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{l(c=>c.map(x=>x.id===t.id?{...x,imageObject:r,imageLoading:!1}:x))},r.onerror=()=>{l(c=>c.map(x=>x.id===t.id?{...x,imageLoading:!1}:x))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading...",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading...",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No Barcode",t.width/2,t.height/2))},ge=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.onload=()=>{l(c=>c.map(x=>x.id===t.id?{...x,imageObject:r,imageLoading:!1}:x))},r.onerror=()=>{l(c=>c.map(x=>x.id===t.id?{...x,imageLoading:!1}:x))},r.src=t.src,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)}else t.imageLoading?(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading QR...",t.width/2,t.height/2)):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("No QR Data",t.width/2,t.height/2))},xe=(e,t)=>{e.save();let r=t.text||"Text";if(t.textTransform)switch(t.textTransform){case"uppercase":r=r.toUpperCase();break;case"lowercase":r=r.toLowerCase();break;case"capitalize":r=r.replace(/\b\w/g,v=>v.toUpperCase());break}e.font=`${t.fontStyle||"normal"} ${t.fontWeight||"normal"} ${t.fontSize||20}px ${t.fontFamily||"Arial"}`,e.fillStyle=t.fill||"#000000",e.textAlign=t.textAlign||"left",e.textBaseline="top",t.opacity!==void 0&&(e.globalAlpha=t.opacity),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth);const c=r.split(`
+`),x=(t.fontSize||20)*(t.lineHeight||1.2),w=Math.max(...c.map(v=>e.measureText(v).width)),b=c.length*x;if(t.backgroundColor&&t.backgroundColor!=="transparent"){e.fillStyle=t.backgroundColor;const v=t.backgroundPadding||4;e.fillRect(-v,-v,w+v*2,b+v*2),e.fillStyle=t.fill||"#000000"}c.forEach((v,k)=>{const A=k*x,R=e.measureText(v).width;t.stroke&&t.strokeWidth>0&&e.strokeText(v,0,A),e.fillText(v,0,A);const z=t.fontSize||20,tt=t.decorationColor||t.fill||"#000000",dt=Math.max(1,z/20);if(e.strokeStyle=tt,e.lineWidth=dt,t.textDecoration==="underline"||t.underline){const yt=A+z+2;e.beginPath(),e.moveTo(0,yt),e.lineTo(R,yt),e.stroke()}if(t.textDecoration==="overline"||t.overline){const yt=A-2;e.beginPath(),e.moveTo(0,yt),e.lineTo(R,yt),e.stroke()}if(t.textDecoration==="line-through"||t.strikethrough){const yt=A+z/2;e.beginPath(),e.moveTo(0,yt),e.lineTo(R,yt),e.stroke()}typeof t.textDecoration=="string"&&t.textDecoration.includes(" ")&&t.textDecoration.split(" ").forEach(Le=>{switch(Le.trim()){case"underline":const Vt=A+z+2;e.beginPath(),e.moveTo(0,Vt),e.lineTo(R,Vt),e.stroke();break;case"overline":const Xt=A-2;e.beginPath(),e.moveTo(0,Xt),e.lineTo(R,Xt),e.stroke();break;case"line-through":const Jt=A+z/2;e.beginPath(),e.moveTo(0,Jt),e.lineTo(R,Jt),e.stroke();break}})}),e.restore()},ye=(e,t)=>{t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fillRect(0,0,t.width,t.height)),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.strokeRect(0,0,t.width,t.height))},ue=(e,t)=>{const r=Math.min(t.width,t.height)/2,c=t.width/2,x=t.height/2;e.beginPath(),e.arc(c,x,r,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},me=(e,t)=>{const r=t.width/2;t.height/2,e.beginPath(),e.moveTo(r,0),e.lineTo(0,t.height),e.lineTo(t.width,t.height),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},pe=(e,t)=>{const r=t.width/2,c=t.height/2,x=Math.min(t.width,t.height)/2,w=x*.4,b=t.numPoints||5;e.beginPath();for(let v=0;v<b*2;v++){const k=v%2===0?x:w,A=v*Math.PI/b,R=r+Math.cos(A)*k,z=c+Math.sin(A)*k;v===0?e.moveTo(R,z):e.lineTo(R,z)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},we=(e,t)=>{const r=t.width,c=t.height,x=r*.3;e.beginPath(),e.moveTo(r/2,0),e.lineTo(r,c*.6),e.lineTo(r-x,c*.6),e.lineTo(r-x,c),e.lineTo(x,c),e.lineTo(x,c*.6),e.lineTo(0,c*.6),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},be=(e,t)=>{const r=t.width/2,c=t.height/2;e.beginPath(),e.moveTo(r,0),e.lineTo(t.width,c),e.lineTo(r,t.height),e.lineTo(0,c),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ke=(e,t)=>{const r=t.width/2,c=t.height/2,x=Math.min(t.width,t.height)/2,w=6;e.beginPath();for(let b=0;b<w;b++){const v=b*2*Math.PI/w-Math.PI/2,k=r+x*Math.cos(v),A=c+x*Math.sin(v);b===0?e.moveTo(k,A):e.lineTo(k,A)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},ve=(e,t)=>{const r=t.width/2,c=t.height/2,x=Math.min(t.width,t.height)/2,w=5;e.beginPath();for(let b=0;b<w;b++){const v=b*2*Math.PI/w-Math.PI/2,k=r+x*Math.cos(v),A=c+x*Math.sin(v);b===0?e.moveTo(k,A):e.lineTo(k,A)}e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Se=(e,t)=>{const r=t.width,c=t.height,x=0,w=0;e.beginPath();const b=c*.3;e.moveTo(x+r/2,w+b),e.bezierCurveTo(x+r/2,w,x,w,x,w+b),e.bezierCurveTo(x,w+(c+b)/2,x+r/2,w+(c+b)/2,x+r/2,w+c),e.bezierCurveTo(x+r/2,w+(c+b)/2,x+r,w+(c+b)/2,x+r,w+b),e.bezierCurveTo(x+r,w,x+r/2,w,x+r/2,w+b),e.closePath(),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Fe=(e,t)=>{const r=t.width/2,c=t.height/2,x=t.width/2,w=t.height/2;e.beginPath(),e.ellipse(r,c,x,w,0,0,2*Math.PI),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Ce=(e,t)=>{const r=Math.min(t.width,t.height)*.1;Tt(e,0,0,t.width,t.height,r),t.fill&&t.fill!=="transparent"&&(e.fillStyle=t.fill,e.fill()),t.stroke&&t.strokeWidth>0&&(e.strokeStyle=t.stroke,e.lineWidth=t.strokeWidth,e.stroke())},Te=(e,t)=>{e.save(),t.opacity!==void 0&&(e.globalAlpha=t.opacity),e.strokeStyle=t.stroke||t.fill||"#000000",e.lineWidth=t.strokeWidth||t.height||2,e.lineCap="round",e.beginPath(),e.moveTo(0,t.height/2),e.lineTo(t.width,t.height/2),e.stroke(),e.restore()},je=(e,t)=>{if(t.imageData)try{t.imageData.complete&&t.imageData.naturalHeight!==0?e.drawImage(t.imageData,0,0,t.width,t.height):(e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.lineWidth=1,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Loading...",t.width/2,t.height/2))}catch(r){console.error("Error drawing image:",r),e.fillStyle="#ffebee",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#f44336",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#f44336",e.font="14px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("Error loading image",t.width/2,t.height/2)}},Ne=(e,t)=>{if(t.src&&!t.imageLoading&&!t.loadedImage){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{t.loadedImage=r,t.imageLoading=!1,V()},r.onerror=()=>{console.error("Failed to load sticker:",t.src),t.imageLoading=!1,e.fillStyle="#f0f0f0",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ccc",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#666",e.font="12px Arial",e.textAlign="center",e.fillText("Failed to load",t.width/2,t.height/2)},r.src=t.src}else t.loadedImage?e.drawImage(t.loadedImage,0,0,t.width,t.height):t.imageLoading&&(e.fillStyle="#f8f9fa",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#dee2e6",e.strokeRect(0,0,t.width,t.height),e.fillStyle="#6c757d",e.font="12px Arial",e.textAlign="center",e.fillText("Loading...",t.width/2,t.height/2))},Ae=(e,t)=>{if(t.imageObject)e.drawImage(t.imageObject,0,0,t.width,t.height);else if(t.src&&!t.imageLoading){t.imageLoading=!0;const r=new Image;r.crossOrigin="anonymous",r.onload=()=>{t.imageObject=r,t.imageLoading=!1,V()},r.onerror=()=>{t.imageLoading=!1,console.error("Failed to load embroidery image:",t.src),Rt(e,t)},r.src=t.src,Rt(e,t,"Loading...")}else Rt(e,t)},Rt=(e,t,r="Embroidery")=>{e.fillStyle="#f9f9f9",e.fillRect(0,0,t.width,t.height),e.strokeStyle="#ddd",e.lineWidth=2,e.strokeRect(0,0,t.width,t.height),e.fillStyle="#999",e.font="24px Arial",e.textAlign="center",e.textBaseline="middle",e.fillText("🧵",t.width/2,t.height/2-10),e.fillStyle="#666",e.font="12px Arial",e.fillText(r,t.width/2,t.height/2+15)},Ut=(e,t,r)=>{if(!r)return!1;const c=r.x+r.width/2,x=r.y+r.height/2,w=e-c,b=t-x,v=-(r.rotation||0)*Math.PI/180,k=Math.cos(v),A=Math.sin(v),R=w*k-b*A,z=w*A+b*k,tt=r.width/2,dt=r.height/2;return R>=-tt&&R<=tt&&z>=-dt&&z<=dt},Ie=y.useCallback(()=>{(N||p||B)&&ot(),D(!1),E(!1),F(!1),$(null);const e=ht.current;e&&(e.style.cursor="default")},[N,p,B,ot]);y.useEffect(()=>{const e=t=>{if(s)return;const r=document.activeElement;if(!(r&&(r.tagName==="INPUT"||r.tagName==="TEXTAREA"||r.tagName==="SELECT"||r.isContentEditable))&&((t.ctrlKey||t.metaKey)&&(t.key==="z"&&!t.shiftKey?(t.preventDefault(),bt()):(t.key==="z"&&t.shiftKey||t.key==="y")&&(t.preventDefault(),pt())),(t.key==="Delete"||t.key==="Backspace")&&n&&(Dt(n.id),t.preventDefault()),(t.ctrlKey||t.metaKey)&&t.key==="d"&&n&&(Qt(n.id),t.preventDefault()),n&&["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t.key))){t.preventDefault();const x=t.shiftKey?10:1;let w={};switch(t.key){case"ArrowUp":w.y=n.y-x;break;case"ArrowDown":w.y=n.y+x;break;case"ArrowLeft":w.x=n.x-x;break;case"ArrowRight":w.x=n.x+x;break}Ot(n.id,w),ot()}};return window.addEventListener("keydown",e),()=>window.removeEventListener("keydown",e)},[n,bt,pt,s]);const Re=(e,t={})=>{const r={id:nt(),type:e,x:50,y:50,width:100,height:100,fill:"#000000",stroke:"#000000",strokeWidth:0,rotation:0,...t};switch(e){case"text":r.id=nt(),r.text=t.text||"New Text",r.fontSize=t.fontSize||20,r.fontFamily=t.fontFamily||"Arial",r.fontWeight=t.fontWeight||"normal",r.fontStyle=t.fontStyle||"normal",r.textAlign=t.textAlign||"left",r.width=150,r.height=50;break;case"icon":r.id=nt(),r.text=t.text||"🎯",r.fontSize=t.fontSize||48,r.fontFamily=t.fontFamily||"Arial",r.fontWeight=t.fontWeight||"normal",r.fontStyle=t.fontStyle||"normal",r.textAlign="center",r.width=80,r.height=80,r.iconData=t.iconData||null,r.type="text",r.isIcon=!0;break;case"image":r.id=nt(),r.imageData=t.imageData||null,r.width=t.width||200,r.height=t.height||200;break;case"qrcode":r.id=nt(),r.type="qrcode",r.x=(t==null?void 0:t.x)||S/2-((t==null?void 0:t.width)||100)/2,r.y=(t==null?void 0:t.y)||M/2-((t==null?void 0:t.height)||100)/2,r.width=(t==null?void 0:t.width)||100,r.height=(t==null?void 0:t.height)||100,r.src=(t==null?void 0:t.src)||"",r.data=(t==null?void 0:t.data)||"",r.rotation=0,r.opacity=1;break;case"barcode":r.id=nt(),r.type="barcode",r.x=(t==null?void 0:t.x)||S/2-((t==null?void 0:t.width)||200)/2,r.y=(t==null?void 0:t.y)||M/2-((t==null?void 0:t.height)||100)/2,r.width=(t==null?void 0:t.width)||200,r.height=(t==null?void 0:t.height)||100,r.src=(t==null?void 0:t.src)||"",r.data=(t==null?void 0:t.data)||"",r.format=(t==null?void 0:t.format)||"CODE128",r.rotation=0,r.opacity=1,r.imageObject=(t==null?void 0:t.imageObject)||null;break;case"sticker":r.id=nt(),r.type="sticker",r.imageData=(t==null?void 0:t.imageData)||null,r.width=t.width||200,r.height=t.height||200;break;case"horizontalLine":r.id=nt(),r.type="horizontalLine",r.x=S/2-100,r.y=M/2-1,r.width=200,r.height=2,r.fill="#000000",r.stroke="#000000",r.strokeWidth=2,r.rotation=0,r.opacity=1;break;case"embroidery":r.id=nt(),r.type="embroidery",r.imageData=(t==null?void 0:t.imageData)||null,r.width=t.width||200,r.height=t.height||200;break;case"rectangle":case"circle":case"triangle":case"star":case"arrow":case"diamond":case"hexagon":case"pentagon":case"heart":case"oval":case"roundedRectangle":break;default:console.warn(`Unknown element type: ${e}`);return}l(c=>[...c,r]),C(r),ot()},Ot=(e,t)=>{l(r=>r.map(c=>c.id===e?{...c,...t}:c)),n&&n.id===e&&C(r=>({...r,...t}))},Dt=y.useCallback(()=>{n&&(l(e=>e.filter(t=>t.id!==n.id)),C(null),ot())},[n,ot]),Qt=e=>{const t=g.find(r=>r.id===e);if(t){const r={...t,id:nt(),x:t.x+20,y:t.y+20};l(c=>[...c,r]),C(r),ot()}},$t=(e,t)=>{const r=g.findIndex(w=>w.id===e);if(r===-1)return;const c=[...g],x=c[r];t==="up"&&r<c.length-1?(c[r]=c[r+1],c[r+1]=x):t==="down"&&r>0?(c[r]=c[r-1],c[r-1]=x):t==="top"?(c.splice(r,1),c.push(x)):t==="bottom"&&(c.splice(r,1),c.unshift(x)),l(c),ot()};y.useCallback(()=>{m&&H(e=>({...e,[m.sectionName]:{elements:[...g],selectedColor:Q}}))},[m,g,Q]);const[,De]=y.useReducer(e=>e+1,0);setTimeout(()=>{De()},20),y.useImperativeHandle(o,()=>({handleSectionChange:Ht,exportPrintReady:async(e="png")=>await It(e,!1),exportFullDesign:async(e="png")=>await It(e,!0),exportDesign:It,getCanvasData:()=>ut(),exportAllDesignsAsJSON:async(e="png")=>{try{const t=ut();return await At.current.exportAllSectionsAsJSON(t.sectionDesigns||{[(m==null?void 0:m.sectionName)||"main"]:t},h.sections||[{id:(m==null?void 0:m.sectionName)||"main",sectionName:(m==null?void 0:m.sectionName)||"main",image:m==null?void 0:m.sectionImage,sectionImage:m==null?void 0:m.sectionImage}],S,M,e)}catch(t){throw console.error("Export as JSON failed:",t),t}},exportCurrentSectionAsJSON:async(e="png")=>{try{const t=ut();return await At.current.exportCurrentSectionAsJSON(t,e)}catch(t){throw console.error("Export current section as JSON failed:",t),t}}})),y.useEffect(()=>{ft.current=null,gt.current=null;const e=ht.current;if(e&&e.getContext("2d").clearRect(0,0,S,M),m!=null&&m.sectionImage){const t=new Image;t.crossOrigin="anonymous",t.onload=()=>{t.src===m.sectionImage&&(ft.current=t,jt(t,Q))},t.onerror=()=>{console.error("Failed to load background image:",m.sectionImage),V()},t.src=m.sectionImage}else V()},[m==null?void 0:m.sectionImage]);const V=y.useCallback(()=>{const e=ht.current;if(!e)return;const t=e.getContext("2d");t.clearRect(0,0,S,M),gt.current&&t.drawImage(gt.current,0,0,S,M),P&&de(t),g.forEach(r=>{fe(t,r)}),n&&le(t,n),requestAnimationFrame(V)},[g,n,S,M,P,gt]),Ee=y.useCallback(e=>{if(s)return;const r=ht.current.getBoundingClientRect(),c=(e.clientX-r.left)/O,x=(e.clientY-r.top)/O;if(J({x:c,y:x}),n){const b=Pt(c,x,n);if(b){if(b==="rotate"){F(!0);const v=n.x+n.width/2,k=n.y+n.height/2,A=Math.atan2(x-k,c-v)*180/Math.PI;J({x:c,y:x,initialAngle:A,initialRotation:n.rotation||0})}else E(!0),$(b),J({x:c,y:x,initialWidth:n.width,initialHeight:n.height,initialX:n.x,initialY:n.y});return}}let w=null;for(let b=g.length-1;b>=0;b--)if(Ut(c,x,g[b])){w=g[b];break}w?(C(w),D(!0),J({x:c,y:x,offsetX:c-w.x,offsetY:x-w.y})):C(null),V()},[s,O,n,g,V]),ze=y.useCallback(e=>{if(s)return;const t=ht.current,r=t.getBoundingClientRect(),c=(e.clientX-r.left)/O,x=(e.clientY-r.top)/O;if(n&&!N&&!p&&!B){const w=Pt(c,x,n);w?w==="rotate"?t.style.cursor="grab":t.style.cursor=w:Ut(c,x,n)?t.style.cursor="move":t.style.cursor="default"}else t.style.cursor=N?"grabbing":"default";if(B&&n){const w=n.x+n.width/2,b=n.y+n.height/2,k=Math.atan2(x-b,c-w)*180/Math.PI-j.initialAngle;let A=j.initialRotation+k;e.shiftKey&&(A=Math.round(A/15)*15),A=(A%360+360)%360,l(R=>R.map(z=>z.id===n.id?{...z,rotation:A}:z)),C(R=>({...R,rotation:A})),V();return}if(p&&n&&T){const w=c-j.x,b=x-j.y;let v=j.initialWidth,k=j.initialHeight,A=j.initialX,R=j.initialY;switch(T){case"se-resize":v=Math.max(20,j.initialWidth+w),k=Math.max(20,j.initialHeight+b);break;case"sw-resize":v=Math.max(20,j.initialWidth-w),k=Math.max(20,j.initialHeight+b),A=j.initialX+(j.initialWidth-v);break;case"ne-resize":v=Math.max(20,j.initialWidth+w),k=Math.max(20,j.initialHeight-b),R=j.initialY+(j.initialHeight-k);break;case"nw-resize":v=Math.max(20,j.initialWidth-w),k=Math.max(20,j.initialHeight-b),A=j.initialX+(j.initialWidth-v),R=j.initialY+(j.initialHeight-k);break}if(e.shiftKey&&n.type!=="text"){const tt=j.initialWidth/j.initialHeight;T.includes("e"),k=v/tt,T.includes("n")&&(R=j.initialY+(j.initialHeight-k))}_&&(A=xt(A),R=xt(R),v=xt(v),k=xt(k));const z={...n,x:A,y:R,width:v,height:k};l(tt=>tt.map(dt=>dt.id===n.id?z:dt)),C(z),V();return}if(N&&n){let w=c-j.offsetX,b=x-j.offsetY;_&&(w=xt(w),b=xt(b)),w=Math.max(0,Math.min(S-n.width,w)),b=Math.max(0,Math.min(M-n.height,b));const v={...n,x:w,y:b};l(k=>k.map(A=>A.id===n.id?v:A)),C(v),V()}},[s,O,n,N,p,B,T,j,_,S,M,g,V]),Ht=y.useCallback(e=>{m&&H(r=>({...r,[m.sectionName]:{elements:g.map(c=>c.type==="image"?{...c,imageData:c.imageData,src:c.src}:c),selectedColor:Q}}));const t=W[e.sectionName];if(t){const r=t.elements.map(c=>{if(c.type==="image"&&c.src&&!c.imageData){const x=new Image;return x.onload=()=>{l(w=>w.map(b=>b.id===c.id?{...b,imageData:x}:b)),V()},x.src=c.src,{...c,imageData:x}}return c});l(r),it(t.selectedColor||Q)}else l([]);K(e),C(null)},[m,g,Q,W,V]),Be=y.useCallback(e=>{if(e&&e.type.startsWith("image/")){const t=new FileReader;t.onload=r=>{const c=new Image;c.onload=()=>{const x={id:nt(),type:"image",x:xt(S/2-100),y:xt(M/2-100),width:Math.min(c.width,200),height:Math.min(c.height,200),rotation:0,imageData:c,src:r.target.result,originalWidth:c.width,originalHeight:c.height},w=c.width/c.height;x.width/x.height!==w&&(x.width/w<=200?x.height=x.width/w:x.width=x.height*w),l(b=>[...b,x]),C(x),ot()},c.onerror=()=>{console.error("Failed to load uploaded image"),alert("Failed to load the uploaded image. Please try again.")},c.src=r.target.result},t.onerror=()=>{console.error("Failed to read file"),alert("Failed to read the file. Please try again.")},t.readAsDataURL(e)}else alert("Please select a valid image file.")},[S,M,xt,nt,ot]);y.useEffect(()=>{if(m!=null&&m.sectionImage){console.log("Loading new section image:",m.sectionImage),mt.current=!0,ft.current=null,gt.current=null;const e=new Image;e.crossOrigin="anonymous",e.onload=()=>{console.log("Background image loaded successfully"),ft.current=e,jt(e,Q)},e.onerror=()=>{console.error("Failed to load background image:",m.sectionImage),mt.current=!1,V()},e.src=m.sectionImage}else ft.current=null,gt.current=null,mt.current=!1,V()},[m==null?void 0:m.sectionImage,Q]);const Gt=y.useCallback(Me(()=>{V()},16),[V]);y.useEffect(()=>{mt.current||Gt()},[g,n,P,Gt]);function Me(e,t){let r;return function(...x){const w=()=>{clearTimeout(r),e(...x)};clearTimeout(r),r=setTimeout(w,t)}}y.useEffect(()=>{ft.current&&jt(ft.current,Q)},[Q]),y.useEffect(()=>{V()},[V]);const We=(e,t,r)=>(.2126*e+.7152*t+.0722*r)/255,jt=y.useCallback((e,t)=>{const r=Mt.current,c=r.getContext("2d");r.width=S,r.height=M,c.clearRect(0,0,S,M),c.drawImage(e,0,0,S,M);const x=c.getImageData(0,0,S,M),w=x.data,b=ce(t);if(!b){mt.current=!1;return}const{r:v,g:k,b:A}=b;for(let z=0;z<w.length;z+=4){if(w[z+3]===0)continue;const dt=We(w[z],w[z+1],w[z+2]);w[z]=Math.round(v*dt),w[z+1]=Math.round(k*dt),w[z+2]=Math.round(A*dt)}c.putImageData(x,0,0);const R=new Image;R.onload=()=>{gt.current=R,mt.current=!1,V()},R.src=r.toDataURL("image/png")},[S,M,V]),_t=e=>{if(!X)return{horizontal:[],vertical:[]};const t=document.querySelector(".ruler-horizontal"),r=document.querySelector(".ruler-vertical");if(!t||!r)return{horizontal:[],vertical:[]};const c=t.getBoundingClientRect(),x=r.getBoundingClientRect(),w=c.width,b=x.height,v=50,k=[],A=[];for(let R=v;R<=w;R+=v)R<=w-20&&k.push({position:R,value:Math.round(R/e)});for(let R=v;R<=b;R+=v)R<=b-15&&A.push({position:R,value:Math.round(R/e)});return{horizontal:k,vertical:A}},[Yt,qt]=y.useState({horizontal:[],vertical:[]});return y.useEffect(()=>{const e=()=>{setTimeout(()=>{const c=_t(O);qt(c)},50)};e();let t;const r=()=>{clearTimeout(t),t=setTimeout(e,150)};return window.addEventListener("resize",r),()=>{window.removeEventListener("resize",r),clearTimeout(t)}},[O,X]),y.useEffect(()=>{if(X&&!u){const e=setTimeout(()=>{const t=_t(O);qt(t)},100);return()=>clearTimeout(e)}},[X,u,O]),i.jsxs("div",{className:"pure-canvas-designer",children:[i.jsx("div",{className:"designer-header",children:i.jsx(Ze,{onAddElement:Re,onDeleteElement:()=>n&&Dt(n.id),onDuplicateElement:()=>n&&Qt(n.id),onUndo:bt,onRedo:pt,onToggleGrid:()=>at(!P),onToggleRulers:()=>st(!X),onToggleSnap:()=>U(!_),onImageUpload:Be,canUndo:q>0,canRedo:q<G.length-1,showGrid:P,showRulers:X,snapToGrid:_,selectedElement:n,theme:a,readOnly:s,apiKey:f.apiKey,apiEndpoint:f.apiEndpoint})}),i.jsxs("div",{className:"designer-content",children:[X&&!u&&i.jsxs("div",{className:"rulers",children:[i.jsx("div",{className:"ruler-horizontal",children:i.jsx("div",{className:"ruler-horizontal-numbers",children:Yt.horizontal.map((e,t)=>i.jsx("span",{className:"ruler-number horizontal",style:{left:`${e.position}px`},children:e.value},t))})}),i.jsx("div",{className:"ruler-vertical",children:i.jsx("div",{className:"ruler-vertical-numbers",children:Yt.vertical.map((e,t)=>i.jsx("span",{className:"ruler-number vertical",style:{top:`${e.position}px`},children:e.value},t))})})]}),i.jsx("div",{className:"canvas-container",ref:ae,children:i.jsx("canvas",{ref:ht,width:S,height:M,onMouseDown:Ee,onMouseMove:ze,onMouseUp:Ie,style:{border:"1px solid #e2e8f0",cursor:N?"grabbing":"default",transform:`scale(${O})`,transformOrigin:"top left"}})}),i.jsxs("div",{className:"side-panels",children:[i.jsx(ti,{selectedElement:n,onUpdate:Ot,onMoveLayer:$t,availableFonts:se,theme:a}),i.jsx(ei,{elements:g,selectedElement:n,onSelectElement:C,onMoveLayer:$t,onDeleteElement:Dt,theme:a})]})]}),i.jsxs("div",{className:"designer-footer",children:[i.jsxs("div",{className:"section-thumbnails",children:[i.jsxs("label",{className:"section-thumbnails-label",children:["Available sections for : ",i.jsx("u",{children:h.name})]}),i.jsx("div",{className:"thumbnails-container",children:h.sections.map(e=>{const t=W[e.sectionName]&&W[e.sectionName].elements&&W[e.sectionName].elements.length>0;return i.jsxs("div",{className:`section-thumbnail compact ${m.sectionName===e.sectionName?"active":""}`,onClick:r=>{r.stopPropagation();const c=h.sections.find(x=>x.sectionName===e.sectionName);Ht(c)},title:e.sectionName,children:[i.jsxs("div",{className:"thumbnail-image-container compact",children:[i.jsx("img",{src:e.sectionImage,alt:e.sectionName,className:"thumbnail-image compact",onError:r=>{r.target.style.display="none",r.target.nextSibling.style.display="flex"}}),i.jsx("div",{className:"thumbnail-placeholder compact",style:{display:"none"},children:i.jsx("span",{className:"placeholder-icon",children:"📐"})}),t&&i.jsx("div",{className:"content-indicator compact",children:i.jsx("svg",{className:"checkmark compact",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",children:i.jsx("path",{d:"M20 6L9 17l-5-5"})})})]}),i.jsx("span",{className:"thumbnail-label compact",children:e.sectionName})]},e.sectionName)})})]}),i.jsxs("div",{className:"color-palette-enhanced compact",children:[i.jsx("label",{className:"color-palette-label",children:"Supported colors:"}),i.jsxs("div",{className:"color-swatches-container",children:[h.colorSettings.slice(0,3).map((e,t)=>i.jsxs("div",{className:`color-swatch-enhanced compact ${Q===e?"active":""}`,onClick:r=>{r.stopPropagation(),it(e)},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner compact",style:{backgroundColor:e}}),Q===e&&i.jsx("div",{className:"color-selection-ring compact"})]},e)),h.colorSettings.length>3&&i.jsxs("div",{className:"color-dropdown-container",children:[i.jsx("button",{className:"color-more-button",onClick:e=>{e.stopPropagation();const t=e.currentTarget.nextElementSibling;t.style.display=t.style.display==="block"?"none":"block"},title:"More colors",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"12",cy:"12",r:"3"}),i.jsx("circle",{cx:"12",cy:"5",r:"3"}),i.jsx("circle",{cx:"12",cy:"19",r:"3"})]})}),i.jsx("div",{className:"color-dropdown-menu",style:{display:"none"},children:h.colorSettings.slice(3).map((e,t)=>i.jsxs("div",{className:`color-swatch-dropdown ${Q===e?"active":""}`,onClick:r=>{r.stopPropagation(),it(e),r.currentTarget.parentElement.style.display="none"},title:`Change product to ${e}`,children:[i.jsx("div",{className:"color-swatch-inner-dropdown",style:{backgroundColor:e}}),i.jsx("span",{className:"color-hex",children:e.toUpperCase()})]},e))})]})]})]}),i.jsxs("div",{className:"zoom-controls-enhanced compact",children:[i.jsx("label",{className:"zoom-label",children:"Zoom:"}),i.jsxs("div",{className:"zoom-buttons-container compact",children:[i.jsx("button",{className:"zoom-button compact zoom-out",onClick:()=>lt(Math.max(.25,O-.25)),disabled:O<=.25,title:"Zoom Out",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsxs("div",{className:"zoom-display compact",children:[i.jsxs("span",{className:"zoom-percentage compact",children:[Math.round(O*100),"%"]}),i.jsx("div",{className:"zoom-slider-container compact",children:i.jsx("input",{type:"range",min:"0.25",max:"4",step:"0.25",value:O,onChange:e=>lt(parseFloat(e.target.value)),className:"zoom-slider compact"})})]}),i.jsx("button",{className:"zoom-button compact zoom-in",onClick:()=>lt(Math.min(4,O+.25)),disabled:O>=4,title:"Zoom In",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"}),i.jsx("line",{x1:"11",y1:"8",x2:"11",y2:"14"}),i.jsx("line",{x1:"8",y1:"11",x2:"14",y2:"11"})]})}),i.jsx("button",{className:"zoom-reset compact",onClick:()=>lt(1),title:"Reset Zoom (100%)",children:i.jsxs("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:[i.jsx("path",{d:"M3 3l18 18"}),i.jsx("circle",{cx:"11",cy:"11",r:"8"}),i.jsx("path",{d:"M21 21l-4.35-4.35"})]})})]})]})]})]})});re.displayName="Mypixia";module.exports=re;