styllar-react-plugin 1.0.0 → 1.0.2

package/dist/styllar-react-plugin.umd.cjs

@@ -1,4 +1,4 @@
-(function(A,b){typeof exports=="object"&&typeof module<"u"?b(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],b):(A=typeof globalThis<"u"?globalThis:A||self,b(A.StyllarReactPlugin={},A.React))})(this,function(A,b){"use strict";var ee={exports:{}},B={};/**
+(function(W,_){typeof exports=="object"&&typeof module<"u"?_(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],_):(W=typeof globalThis<"u"?globalThis:W||self,_(W.StyllarReactPlugin={},W.React))})(this,function(W,_){"use strict";var re={exports:{}},J={};/**
  * @license React
  * react-jsx-runtime.production.min.js
  *
@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var de;function Le(){if(de)return B;de=1;var L=b,P=Symbol.for("react.element"),k=Symbol.for("react.fragment"),x=Object.prototype.hasOwnProperty,Y=L.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,z={key:!0,ref:!0,__self:!0,__source:!0};function T(w,d,N){var p,R={},j=null,M=null;N!==void 0&&(j=""+N),d.key!==void 0&&(j=""+d.key),d.ref!==void 0&&(M=d.ref);for(p in d)x.call(d,p)&&!z.hasOwnProperty(p)&&(R[p]=d[p]);if(w&&w.defaultProps)for(p in d=w.defaultProps,d)R[p]===void 0&&(R[p]=d[p]);return{$$typeof:P,type:w,key:j,ref:M,props:R,_owner:Y.current}}return B.Fragment=k,B.jsx=T,B.jsxs=T,B}var J={};/**
+ */var me;function Me(){if(me)return J;me=1;var j=_,E=Symbol.for("react.element"),f=Symbol.for("react.fragment"),g=Object.prototype.hasOwnProperty,S=j.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,N={key:!0,ref:!0,__self:!0,__source:!0};function I(D,y,A){var h,C={},k=null,z=null;A!==void 0&&(k=""+A),y.key!==void 0&&(k=""+y.key),y.ref!==void 0&&(z=y.ref);for(h in y)g.call(y,h)&&!N.hasOwnProperty(h)&&(C[h]=y[h]);if(D&&D.defaultProps)for(h in y=D.defaultProps,y)C[h]===void 0&&(C[h]=y[h]);return{$$typeof:E,type:D,key:k,ref:z,props:C,_owner:S.current}}return J.Fragment=f,J.jsx=I,J.jsxs=I,J}var K={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,17 +14,17 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var pe;function Ye(){return pe||(pe=1,process.env.NODE_ENV!=="production"&&function(){var L=b,P=Symbol.for("react.element"),k=Symbol.for("react.portal"),x=Symbol.for("react.fragment"),Y=Symbol.for("react.strict_mode"),z=Symbol.for("react.profiler"),T=Symbol.for("react.provider"),w=Symbol.for("react.context"),d=Symbol.for("react.forward_ref"),N=Symbol.for("react.suspense"),p=Symbol.for("react.suspense_list"),R=Symbol.for("react.memo"),j=Symbol.for("react.lazy"),M=Symbol.for("react.offscreen"),K=Symbol.iterator,re="@@iterator";function te(e){if(e===null||typeof e!="object")return null;var r=K&&e[K]||e[re];return typeof r=="function"?r:null}var D=L.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function v(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];ne("error",e,t)}}function ne(e,r,t){{var n=D.ReactDebugCurrentFrame,i=n.getStackAddendum();i!==""&&(r+="%s",t=t.concat([i]));var c=t.map(function(o){return String(o)});c.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,c)}}var l=!1,_=!1,g=!1,C=!1,O=!1,S;S=Symbol.for("react.module.reference");function y(e){return!!(typeof e=="string"||typeof e=="function"||e===x||e===z||O||e===Y||e===N||e===p||C||e===M||l||_||g||typeof e=="object"&&e!==null&&(e.$$typeof===j||e.$$typeof===R||e.$$typeof===T||e.$$typeof===w||e.$$typeof===d||e.$$typeof===S||e.getModuleId!==void 0))}function H(e,r,t){var n=e.displayName;if(n)return n;var i=r.displayName||r.name||"";return i!==""?t+"("+i+")":t}function ve(e){return e.displayName||"Context"}function F(e){if(e==null)return null;if(typeof e.tag=="number"&&v("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case x:return"Fragment";case k:return"Portal";case z:return"Profiler";case Y:return"StrictMode";case N:return"Suspense";case p:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case w:var r=e;return ve(r)+".Consumer";case T:var t=e;return ve(t._context)+".Provider";case d:return H(e,e.render,"ForwardRef");case R:var n=e.displayName||null;return n!==null?n:F(e.type)||"Memo";case j:{var i=e,c=i._payload,o=i._init;try{return F(o(c))}catch{return null}}}return null}var I=Object.assign,X=0,ge,he,be,me,ye,xe,_e;function Ee(){}Ee.__reactDisabledLog=!0;function Me(){{if(X===0){ge=console.log,he=console.info,be=console.warn,me=console.error,ye=console.group,xe=console.groupCollapsed,_e=console.groupEnd;var e={configurable:!0,enumerable:!0,value:Ee,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}X++}}function Ue(){{if(X--,X===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:I({},e,{value:ge}),info:I({},e,{value:he}),warn:I({},e,{value:be}),error:I({},e,{value:me}),group:I({},e,{value:ye}),groupCollapsed:I({},e,{value:xe}),groupEnd:I({},e,{value:_e})})}X<0&&v("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var ae=D.ReactCurrentDispatcher,oe;function $(e,r,t){{if(oe===void 0)try{throw Error()}catch(i){var n=i.stack.trim().match(/\n( *(at )?)/);oe=n&&n[1]||""}return`
-`+oe+e}}var ie=!1,q;{var Ve=typeof WeakMap=="function"?WeakMap:Map;q=new Ve}function Re(e,r){if(!e||ie)return"";{var t=q.get(e);if(t!==void 0)return t}var n;ie=!0;var i=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var c;c=ae.current,ae.current=null,Me();try{if(r){var o=function(){throw Error()};if(Object.defineProperty(o.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(o,[])}catch(m){n=m}Reflect.construct(e,[],o)}else{try{o.call()}catch(m){n=m}e.call(o.prototype)}}else{try{throw Error()}catch(m){n=m}e()}}catch(m){if(m&&n&&typeof m.stack=="string"){for(var a=m.stack.split(`
-`),h=n.stack.split(`
-`),u=a.length-1,f=h.length-1;u>=1&&f>=0&&a[u]!==h[f];)f--;for(;u>=1&&f>=0;u--,f--)if(a[u]!==h[f]){if(u!==1||f!==1)do if(u--,f--,f<0||a[u]!==h[f]){var E=`
-`+a[u].replace(" at new "," at ");return e.displayName&&E.includes("<anonymous>")&&(E=E.replace("<anonymous>",e.displayName)),typeof e=="function"&&q.set(e,E),E}while(u>=1&&f>=0);break}}}finally{ie=!1,ae.current=c,Ue(),Error.prepareStackTrace=i}var V=e?e.displayName||e.name:"",W=V?$(V):"";return typeof e=="function"&&q.set(e,W),W}function Be(e,r,t){return Re(e,!1)}function Je(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function Z(e,r,t){if(e==null)return"";if(typeof e=="function")return Re(e,Je(e));if(typeof e=="string")return $(e);switch(e){case N:return $("Suspense");case p:return $("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case d:return Be(e.render);case R:return Z(e.type,r,t);case j:{var n=e,i=n._payload,c=n._init;try{return Z(c(i),r,t)}catch{}}}return""}var G=Object.prototype.hasOwnProperty,Se={},we=D.ReactDebugCurrentFrame;function Q(e){if(e){var r=e._owner,t=Z(e.type,e._source,r?r.type:null);we.setExtraStackFrame(t)}else we.setExtraStackFrame(null)}function Ke(e,r,t,n,i){{var c=Function.call.bind(G);for(var o in e)if(c(e,o)){var a=void 0;try{if(typeof e[o]!="function"){var h=Error((n||"React class")+": "+t+" type `"+o+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[o]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw h.name="Invariant Violation",h}a=e[o](r,o,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(u){a=u}a&&!(a instanceof Error)&&(Q(i),v("%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).",n||"React class",t,o,typeof a),Q(null)),a instanceof Error&&!(a.message in Se)&&(Se[a.message]=!0,Q(i),v("Failed %s type: %s",t,a.message),Q(null))}}}var Xe=Array.isArray;function se(e){return Xe(e)}function Ge(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function He(e){try{return je(e),!1}catch{return!0}}function je(e){return""+e}function Te(e){if(He(e))return v("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",Ge(e)),je(e)}var Ce=D.ReactCurrentOwner,$e={key:!0,ref:!0,__self:!0,__source:!0},Oe,Pe;function qe(e){if(G.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function Ze(e){if(G.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function Qe(e,r){typeof e.ref=="string"&&Ce.current}function er(e,r){{var t=function(){Oe||(Oe=!0,v("%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)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function rr(e,r){{var t=function(){Pe||(Pe=!0,v("%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)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var tr=function(e,r,t,n,i,c,o){var a={$$typeof:P,type:e,key:r,ref:t,props:o,_owner:c};return a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(a,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(a,"_source",{configurable:!1,enumerable:!1,writable:!1,value:i}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a};function nr(e,r,t,n,i){{var c,o={},a=null,h=null;t!==void 0&&(Te(t),a=""+t),Ze(r)&&(Te(r.key),a=""+r.key),qe(r)&&(h=r.ref,Qe(r,i));for(c in r)G.call(r,c)&&!$e.hasOwnProperty(c)&&(o[c]=r[c]);if(e&&e.defaultProps){var u=e.defaultProps;for(c in u)o[c]===void 0&&(o[c]=u[c])}if(a||h){var f=typeof e=="function"?e.displayName||e.name||"Unknown":e;a&&er(o,f),h&&rr(o,f)}return tr(e,a,h,i,n,Ce.current,o)}}var le=D.ReactCurrentOwner,ke=D.ReactDebugCurrentFrame;function U(e){if(e){var r=e._owner,t=Z(e.type,e._source,r?r.type:null);ke.setExtraStackFrame(t)}else ke.setExtraStackFrame(null)}var ce;ce=!1;function ue(e){return typeof e=="object"&&e!==null&&e.$$typeof===P}function Ne(){{if(le.current){var e=F(le.current.type);if(e)return`
+ */var ge;function Ue(){return ge||(ge=1,process.env.NODE_ENV!=="production"&&function(){var j=_,E=Symbol.for("react.element"),f=Symbol.for("react.portal"),g=Symbol.for("react.fragment"),S=Symbol.for("react.strict_mode"),N=Symbol.for("react.profiler"),I=Symbol.for("react.provider"),D=Symbol.for("react.context"),y=Symbol.for("react.forward_ref"),A=Symbol.for("react.suspense"),h=Symbol.for("react.suspense_list"),C=Symbol.for("react.memo"),k=Symbol.for("react.lazy"),z=Symbol.for("react.offscreen"),Y=Symbol.iterator,X="@@iterator";function G(e){if(e===null||typeof e!="object")return null;var r=Y&&e[Y]||e[X];return typeof r=="function"?r:null}var F=j.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;function x(e){{for(var r=arguments.length,t=new Array(r>1?r-1:0),n=1;n<r;n++)t[n-1]=arguments[n];ne("error",e,t)}}function ne(e,r,t){{var n=F.ReactDebugCurrentFrame,l=n.getStackAddendum();l!==""&&(r+="%s",t=t.concat([l]));var c=t.map(function(s){return String(s)});c.unshift("Warning: "+r),Function.prototype.apply.call(console[e],console,c)}}var ae=!1,oe=!1,q=!1,se=!1,i=!1,u;u=Symbol.for("react.module.reference");function p(e){return!!(typeof e=="string"||typeof e=="function"||e===g||e===N||i||e===S||e===A||e===h||se||e===z||ae||oe||q||typeof e=="object"&&e!==null&&(e.$$typeof===k||e.$$typeof===C||e.$$typeof===I||e.$$typeof===D||e.$$typeof===y||e.$$typeof===u||e.getModuleId!==void 0))}function T(e,r,t){var n=e.displayName;if(n)return n;var l=r.displayName||r.name||"";return l!==""?t+"("+l+")":t}function w(e){return e.displayName||"Context"}function v(e){if(e==null)return null;if(typeof e.tag=="number"&&x("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),typeof e=="function")return e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case g:return"Fragment";case f:return"Portal";case N:return"Profiler";case S:return"StrictMode";case A:return"Suspense";case h:return"SuspenseList"}if(typeof e=="object")switch(e.$$typeof){case D:var r=e;return w(r)+".Consumer";case I:var t=e;return w(t._context)+".Provider";case y:return T(e,e.render,"ForwardRef");case C:var n=e.displayName||null;return n!==null?n:v(e.type)||"Memo";case k:{var l=e,c=l._payload,s=l._init;try{return v(s(c))}catch{return null}}}return null}var b=Object.assign,L=0,he,be,ye,xe,_e,Ee,Se;function we(){}we.__reactDisabledLog=!0;function Xe(){{if(L===0){he=console.log,be=console.info,ye=console.warn,xe=console.error,_e=console.group,Ee=console.groupCollapsed,Se=console.groupEnd;var e={configurable:!0,enumerable:!0,value:we,writable:!0};Object.defineProperties(console,{info:e,log:e,warn:e,error:e,group:e,groupCollapsed:e,groupEnd:e})}L++}}function Ge(){{if(L--,L===0){var e={configurable:!0,enumerable:!0,writable:!0};Object.defineProperties(console,{log:b({},e,{value:he}),info:b({},e,{value:be}),warn:b({},e,{value:ye}),error:b({},e,{value:xe}),group:b({},e,{value:_e}),groupCollapsed:b({},e,{value:Ee}),groupEnd:b({},e,{value:Se})})}L<0&&x("disabledDepth fell below zero. This is a bug in React. Please file an issue.")}}var ie=F.ReactCurrentDispatcher,le;function $(e,r,t){{if(le===void 0)try{throw Error()}catch(l){var n=l.stack.trim().match(/\n( *(at )?)/);le=n&&n[1]||""}return`
+`+le+e}}var ce=!1,Z;{var He=typeof WeakMap=="function"?WeakMap:Map;Z=new He}function Re(e,r){if(!e||ce)return"";{var t=Z.get(e);if(t!==void 0)return t}var n;ce=!0;var l=Error.prepareStackTrace;Error.prepareStackTrace=void 0;var c;c=ie.current,ie.current=null,Xe();try{if(r){var s=function(){throw Error()};if(Object.defineProperty(s.prototype,"props",{set:function(){throw Error()}}),typeof Reflect=="object"&&Reflect.construct){try{Reflect.construct(s,[])}catch(P){n=P}Reflect.construct(e,[],s)}else{try{s.call()}catch(P){n=P}e.call(s.prototype)}}else{try{throw Error()}catch(P){n=P}e()}}catch(P){if(P&&n&&typeof P.stack=="string"){for(var o=P.stack.split(`
+`),R=n.stack.split(`
+`),d=o.length-1,m=R.length-1;d>=1&&m>=0&&o[d]!==R[m];)m--;for(;d>=1&&m>=0;d--,m--)if(o[d]!==R[m]){if(d!==1||m!==1)do if(d--,m--,m<0||o[d]!==R[m]){var O=`
+`+o[d].replace(" at new "," at ");return e.displayName&&O.includes("<anonymous>")&&(O=O.replace("<anonymous>",e.displayName)),typeof e=="function"&&Z.set(e,O),O}while(d>=1&&m>=0);break}}}finally{ce=!1,ie.current=c,Ge(),Error.prepareStackTrace=l}var V=e?e.displayName||e.name:"",U=V?$(V):"";return typeof e=="function"&&Z.set(e,U),U}function qe(e,r,t){return Re(e,!1)}function $e(e){var r=e.prototype;return!!(r&&r.isReactComponent)}function Q(e,r,t){if(e==null)return"";if(typeof e=="function")return Re(e,$e(e));if(typeof e=="string")return $(e);switch(e){case A:return $("Suspense");case h:return $("SuspenseList")}if(typeof e=="object")switch(e.$$typeof){case y:return qe(e.render);case C:return Q(e.type,r,t);case k:{var n=e,l=n._payload,c=n._init;try{return Q(c(l),r,t)}catch{}}}return""}var H=Object.prototype.hasOwnProperty,je={},Te=F.ReactDebugCurrentFrame;function ee(e){if(e){var r=e._owner,t=Q(e.type,e._source,r?r.type:null);Te.setExtraStackFrame(t)}else Te.setExtraStackFrame(null)}function Ze(e,r,t,n,l){{var c=Function.call.bind(H);for(var s in e)if(c(e,s)){var o=void 0;try{if(typeof e[s]!="function"){var R=Error((n||"React class")+": "+t+" type `"+s+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof e[s]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw R.name="Invariant Violation",R}o=e[s](r,s,n,t,null,"SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED")}catch(d){o=d}o&&!(o instanceof Error)&&(ee(l),x("%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).",n||"React class",t,s,typeof o),ee(null)),o instanceof Error&&!(o.message in je)&&(je[o.message]=!0,ee(l),x("Failed %s type: %s",t,o.message),ee(null))}}}var Qe=Array.isArray;function ue(e){return Qe(e)}function er(e){{var r=typeof Symbol=="function"&&Symbol.toStringTag,t=r&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t}}function rr(e){try{return Pe(e),!1}catch{return!0}}function Pe(e){return""+e}function Ce(e){if(rr(e))return x("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.",er(e)),Pe(e)}var ke=F.ReactCurrentOwner,tr={key:!0,ref:!0,__self:!0,__source:!0},Oe,De;function nr(e){if(H.call(e,"ref")){var r=Object.getOwnPropertyDescriptor(e,"ref").get;if(r&&r.isReactWarning)return!1}return e.ref!==void 0}function ar(e){if(H.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function or(e,r){typeof e.ref=="string"&&ke.current}function sr(e,r){{var t=function(){Oe||(Oe=!0,x("%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)",r))};t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}}function ir(e,r){{var t=function(){De||(De=!0,x("%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)",r))};t.isReactWarning=!0,Object.defineProperty(e,"ref",{get:t,configurable:!0})}}var lr=function(e,r,t,n,l,c,s){var o={$$typeof:E,type:e,key:r,ref:t,props:s,_owner:c};return o._store={},Object.defineProperty(o._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:!1}),Object.defineProperty(o,"_self",{configurable:!1,enumerable:!1,writable:!1,value:n}),Object.defineProperty(o,"_source",{configurable:!1,enumerable:!1,writable:!1,value:l}),Object.freeze&&(Object.freeze(o.props),Object.freeze(o)),o};function cr(e,r,t,n,l){{var c,s={},o=null,R=null;t!==void 0&&(Ce(t),o=""+t),ar(r)&&(Ce(r.key),o=""+r.key),nr(r)&&(R=r.ref,or(r,l));for(c in r)H.call(r,c)&&!tr.hasOwnProperty(c)&&(s[c]=r[c]);if(e&&e.defaultProps){var d=e.defaultProps;for(c in d)s[c]===void 0&&(s[c]=d[c])}if(o||R){var m=typeof e=="function"?e.displayName||e.name||"Unknown":e;o&&sr(s,m),R&&ir(s,m)}return lr(e,o,R,l,n,ke.current,s)}}var fe=F.ReactCurrentOwner,Ne=F.ReactDebugCurrentFrame;function B(e){if(e){var r=e._owner,t=Q(e.type,e._source,r?r.type:null);Ne.setExtraStackFrame(t)}else Ne.setExtraStackFrame(null)}var de;de=!1;function pe(e){return typeof e=="object"&&e!==null&&e.$$typeof===E}function Ae(){{if(fe.current){var e=v(fe.current.type);if(e)return`
 
-Check the render method of \``+e+"`."}return""}}function ar(e){return""}var De={};function or(e){{var r=Ne();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
+Check the render method of \``+e+"`."}return""}}function ur(e){return""}var Fe={};function fr(e){{var r=Ae();if(!r){var t=typeof e=="string"?e:e.displayName||e.name;t&&(r=`
 
-Check the top-level render call using <`+t+">.")}return r}}function Fe(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=or(r);if(De[t])return;De[t]=!0;var n="";e&&e._owner&&e._owner!==le.current&&(n=" It was passed a child from "+F(e._owner.type)+"."),U(e),v('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),U(null)}}function Ae(e,r){{if(typeof e!="object")return;if(se(e))for(var t=0;t<e.length;t++){var n=e[t];ue(n)&&Fe(n,r)}else if(ue(e))e._store&&(e._store.validated=!0);else if(e){var i=te(e);if(typeof i=="function"&&i!==e.entries)for(var c=i.call(e),o;!(o=c.next()).done;)ue(o.value)&&Fe(o.value,r)}}}function ir(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===d||r.$$typeof===R))t=r.propTypes;else return;if(t){var n=F(r);Ke(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!ce){ce=!0;var i=F(r);v("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",i||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&v("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function sr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){U(e),v("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),U(null);break}}e.ref!==null&&(U(e),v("Invalid attribute `ref` supplied to `React.Fragment`."),U(null))}}var Ie={};function We(e,r,t,n,i,c){{var o=y(e);if(!o){var a="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(a+=" 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 h=ar();h?a+=h:a+=Ne();var u;e===null?u="null":se(e)?u="array":e!==void 0&&e.$$typeof===P?(u="<"+(F(e.type)||"Unknown")+" />",a=" Did you accidentally export a JSX literal instead of a component?"):u=typeof e,v("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",u,a)}var f=nr(e,r,t,i,c);if(f==null)return f;if(o){var E=r.children;if(E!==void 0)if(n)if(se(E)){for(var V=0;V<E.length;V++)Ae(E[V],e);Object.freeze&&Object.freeze(E)}else v("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 Ae(E,e)}if(G.call(r,"key")){var W=F(e),m=Object.keys(r).filter(function(pr){return pr!=="key"}),fe=m.length>0?"{key: someKey, "+m.join(": ..., ")+": ...}":"{key: someKey}";if(!Ie[W+fe]){var dr=m.length>0?"{"+m.join(": ..., ")+": ...}":"{}";v(`A props object containing a "key" prop is being spread into JSX:
+Check the top-level render call using <`+t+">.")}return r}}function Ie(e,r){{if(!e._store||e._store.validated||e.key!=null)return;e._store.validated=!0;var t=fr(r);if(Fe[t])return;Fe[t]=!0;var n="";e&&e._owner&&e._owner!==fe.current&&(n=" It was passed a child from "+v(e._owner.type)+"."),B(e),x('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.',t,n),B(null)}}function ze(e,r){{if(typeof e!="object")return;if(ue(e))for(var t=0;t<e.length;t++){var n=e[t];pe(n)&&Ie(n,r)}else if(pe(e))e._store&&(e._store.validated=!0);else if(e){var l=G(e);if(typeof l=="function"&&l!==e.entries)for(var c=l.call(e),s;!(s=c.next()).done;)pe(s.value)&&Ie(s.value,r)}}}function dr(e){{var r=e.type;if(r==null||typeof r=="string")return;var t;if(typeof r=="function")t=r.propTypes;else if(typeof r=="object"&&(r.$$typeof===y||r.$$typeof===C))t=r.propTypes;else return;if(t){var n=v(r);Ze(t,e.props,"prop",n,e)}else if(r.PropTypes!==void 0&&!de){de=!0;var l=v(r);x("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?",l||"Unknown")}typeof r.getDefaultProps=="function"&&!r.getDefaultProps.isReactClassApproved&&x("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.")}}function pr(e){{for(var r=Object.keys(e.props),t=0;t<r.length;t++){var n=r[t];if(n!=="children"&&n!=="key"){B(e),x("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.",n),B(null);break}}e.ref!==null&&(B(e),x("Invalid attribute `ref` supplied to `React.Fragment`."),B(null))}}var Le={};function We(e,r,t,n,l,c){{var s=p(e);if(!s){var o="";(e===void 0||typeof e=="object"&&e!==null&&Object.keys(e).length===0)&&(o+=" 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 R=ur();R?o+=R:o+=Ae();var d;e===null?d="null":ue(e)?d="array":e!==void 0&&e.$$typeof===E?(d="<"+(v(e.type)||"Unknown")+" />",o=" Did you accidentally export a JSX literal instead of a component?"):d=typeof e,x("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",d,o)}var m=cr(e,r,t,l,c);if(m==null)return m;if(s){var O=r.children;if(O!==void 0)if(n)if(ue(O)){for(var V=0;V<O.length;V++)ze(O[V],e);Object.freeze&&Object.freeze(O)}else x("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 ze(O,e)}if(H.call(r,"key")){var U=v(e),P=Object.keys(r).filter(function(yr){return yr!=="key"}),ve=P.length>0?"{key: someKey, "+P.join(": ..., ")+": ...}":"{key: someKey}";if(!Le[U+ve]){var br=P.length>0?"{"+P.join(": ..., ")+": ...}":"{}";x(`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} />`,fe,W,dr,W),Ie[W+fe]=!0}}return e===x?sr(f):ir(f),f}}function lr(e,r,t){return We(e,r,t,!0)}function cr(e,r,t){return We(e,r,t,!1)}var ur=cr,fr=lr;J.Fragment=x,J.jsx=ur,J.jsxs=fr}()),J}process.env.NODE_ENV==="production"?ee.exports=Le():ee.exports=Ye();var s=ee.exports;const ze=()=>{const[L,P]=b.useState(!1),[k,x]=b.useState("idle"),[Y,z]=b.useState(""),[T,w]=b.useState(null),[d,N]=b.useState(""),[p,R]=b.useState(""),[j,M]=b.useState(null),[K,re]=b.useState(null),te="http://136.113.197.77:5000/predict/size-from-chart";function D(){var S;let l=0,_=0;const g=["pant","jeans","trouser","skirt","short","legging","jogger","bottom","denim","cargo"],C=["shirt","top","tee","blouse","jacket","coat","hoodie","sweater","vest","cardigan","dress","t-shirt"],O=(document.title+" "+(((S=document.querySelector("h1"))==null?void 0:S.innerText)||"")).toLowerCase();return g.forEach(y=>{O.includes(y)&&(_+=2)}),C.forEach(y=>{O.includes(y)&&(l+=2)}),_>l?"bottom":"top"}function v(){const l={chart_type:"none",chart_content:null,available_sizes:[]},_=document.querySelector("table");if(_&&/chest|waist|bust|hip|size/i.test(_.innerText))return l.chart_type="html_table",l.chart_content=_.outerHTML,l;const g=document.querySelectorAll("img");for(let S of g){const y=S.src.toLowerCase(),H=(S.alt||"").toLowerCase();if(y.includes("size")&&y.includes("chart")||H.includes("size")&&H.includes("guide"))return l.chart_type="image_url",l.chart_content=S.src,l}const C=document.querySelector('.size-guide, #size-chart, .measurement-guide, [class*="SizeGuide"]');return C?(l.chart_type="raw_text",l.chart_content=C.innerText,l):(document.querySelectorAll("button, span, li").forEach(S=>{const y=S.innerText.trim();/^(XS|S|M|L|XL|XXL|[0-9]{2})$/i.test(y)&&y.length<4&&(l.available_sizes.includes(y)||l.available_sizes.push(y))}),l)}const ne=async()=>{if(!j||!K||!d||!p){alert("Please fill all fields.");return}x("loading");const l=D(),_=v(),g=new FormData;g.append("front_image",j),g.append("side_image",K),g.append("height",d),g.append("weight",p),g.append("product_type",l),g.append("chart_type",_.chart_type),g.append("chart_content",_.chart_content),g.append("available_sizes",JSON.stringify(_.available_sizes));try{const O=await(await fetch(te,{method:"POST",body:g})).json();if(O.error)throw new Error(O.error);w(O),x("success")}catch(C){z(C.message),x("error")}};return s.jsxs("div",{className:"fixed bottom-6 right-6 z-[999999]",children:[s.jsx("button",{onClick:()=>P(!L),className:"bg-black text-white px-7 py-3.5 rounded-full shadow-xl font-bold text-sm hover:opacity-80 transition-opacity",children:"Styllar"}),L&&s.jsxs("div",{className:"absolute bottom-20 right-0 w-[330px] bg-white rounded-2xl p-6 shadow-2xl border border-gray-100 text-black",children:[s.jsxs("div",{className:"flex justify-between items-center mb-4",children:[s.jsx("h3",{className:"m-0 text-lg font-bold",children:"Smart Fit Assistant"}),s.jsx("button",{onClick:()=>P(!1),className:"text-gray-400 hover:text-black text-2xl leading-none",children:"×"})]}),k==="loading"&&s.jsxs("div",{className:"flex flex-col items-center justify-center py-8",children:[s.jsx("div",{className:"w-8 h-8 border-4 border-gray-200 border-t-black rounded-full animate-spin mb-4"}),s.jsx("p",{className:"text-sm text-gray-600",children:"Analyzing body & page data..."})]}),k==="success"&&T&&s.jsxs("div",{className:"text-center py-6",children:[s.jsx("div",{className:"text-sm text-green-600 font-bold tracking-wider",children:"MATCH FOUND"}),s.jsx("div",{className:"text-5xl font-black my-4 text-black",children:T.recommended_size}),s.jsxs("div",{className:"text-xs text-gray-500 mb-6",children:["Confidence: ",T.confidence]}),s.jsx("button",{onClick:()=>{x("idle"),w(null)},className:"text-blue-600 text-sm underline hover:text-blue-800",children:"Run New Scan"})]}),k==="error"&&s.jsxs("div",{className:"py-4",children:[s.jsxs("p",{className:"text-red-500 text-sm mb-4",children:["Error: ",Y]}),s.jsx("button",{onClick:()=>x("idle"),className:"w-full bg-black text-white py-3 rounded-xl font-bold text-sm",children:"Try Again"})]}),k==="idle"&&s.jsxs("div",{children:[s.jsx("p",{className:"text-sm text-gray-600 mb-5 leading-relaxed",children:"Upload photos for a precision body scan."}),s.jsxs("div",{className:"flex gap-3 mb-4",children:[s.jsx("input",{type:"number",placeholder:"Height (cm)",value:d,onChange:l=>N(l.target.value),className:"w-1/2 p-2.5 border border-gray-300 rounded-lg outline-none focus:border-black text-sm"}),s.jsx("input",{type:"number",placeholder:"Weight (kg)",value:p,onChange:l=>R(l.target.value),className:"w-1/2 p-2.5 border border-gray-300 rounded-lg outline-none focus:border-black text-sm"})]}),s.jsxs("div",{className:"mb-3",children:[s.jsx("label",{className:"text-[11px] font-bold text-gray-400 uppercase block mb-1",children:"Front Image"}),s.jsx("input",{type:"file",accept:"image/*",onChange:l=>M(l.target.files[0]),className:"w-full text-xs file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:bg-gray-100 file:text-black hover:file:bg-gray-200"})]}),s.jsxs("div",{className:"mb-5",children:[s.jsx("label",{className:"text-[11px] font-bold text-gray-400 uppercase block mb-1",children:"Side Image"}),s.jsx("input",{type:"file",accept:"image/*",onChange:l=>re(l.target.files[0]),className:"w-full text-xs file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:bg-gray-100 file:text-black hover:file:bg-gray-200"})]}),s.jsx("button",{onClick:ne,className:"w-full bg-black text-white py-3.5 rounded-xl font-bold text-sm hover:opacity-80 transition-opacity",children:"Run Body Scan"})]})]})]})};A.StyllarPlugin=ze,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});
+  <%s key={someKey} {...props} />`,ve,U,br,U),Le[U+ve]=!0}}return e===g?pr(m):dr(m),m}}function vr(e,r,t){return We(e,r,t,!0)}function mr(e,r,t){return We(e,r,t,!1)}var gr=mr,hr=vr;K.Fragment=g,K.jsx=gr,K.jsxs=hr}()),K}process.env.NODE_ENV==="production"?re.exports=Me():re.exports=Ue();var a=re.exports;const Ye="StyllarDB",M="user_profile",te=()=>new Promise((j,E)=>{const f=indexedDB.open(Ye,1);f.onupgradeneeded=g=>g.target.result.createObjectStore(M),f.onsuccess=()=>j(f.result),f.onerror=()=>E(f.error)}),Be=async j=>{const E=await te();return new Promise((f,g)=>{const N=E.transaction(M,"readwrite").objectStore(M).put(j,"userData");N.onsuccess=()=>f(),N.onerror=()=>g(N.error)})},Ve=async()=>{const j=await te();return new Promise((E,f)=>{const S=j.transaction(M,"readonly").objectStore(M).get("userData");S.onsuccess=()=>E(S.result),S.onerror=()=>f(S.error)})},Je=async()=>{const j=await te();return new Promise((E,f)=>{const S=j.transaction(M,"readwrite").objectStore(M).delete("userData");S.onsuccess=()=>E(),S.onerror=()=>f(S.error)})},Ke=()=>{const[j,E]=_.useState(!1),[f,g]=_.useState("idle"),[S,N]=_.useState(""),[I,D]=_.useState(null),[y,A]=_.useState(!1),[h,C]=_.useState(""),[k,z]=_.useState(""),[Y,X]=_.useState(null),[G,F]=_.useState(null),x="http://136.113.197.77:5000/predict/size-from-chart";_.useEffect(()=>{(async()=>{try{const u=await Ve();u&&u.frontImage&&u.sideImage&&(C(u.height),z(u.weight),X(u.frontImage),F(u.sideImage),A(!0),console.log("Styllar: Loaded user profile from memory."))}catch(u){console.error("Styllar: Failed to load profile",u)}})()},[]);const ne=i=>{if(!i)return;const u=()=>{const p=document.querySelectorAll('button, .size-swatch, .size-option, li[role="radio"], div[data-value]');for(let T of p){const w=T.innerText.trim().toUpperCase(),v=String(i).trim().toUpperCase();if(w===v||w===`SIZE ${v}`)return T.click(),!0}return!1};if(!u()){let p=0;const T=setInterval(()=>{p++,(u()||p>10)&&clearInterval(T)},500)}};function ae(){var v;let i=0,u=0;const p=["pant","jeans","trouser","skirt","short","legging","jogger","bottom","denim","cargo"],T=["shirt","top","tee","blouse","jacket","coat","hoodie","sweater","vest","cardigan","dress","t-shirt"],w=(document.title+" "+(((v=document.querySelector("h1"))==null?void 0:v.innerText)||"")).toLowerCase();return p.forEach(b=>{w.includes(b)&&(u+=2)}),T.forEach(b=>{w.includes(b)&&(i+=2)}),u>i?"bottom":"top"}function oe(){const i={chart_type:"none",chart_content:null,available_sizes:[]},u=document.querySelector("table");if(u&&/chest|waist|bust|hip|size/i.test(u.innerText))return i.chart_type="html_table",i.chart_content=u.outerHTML,i;const p=document.querySelectorAll("img");for(let v of p){const b=v.src.toLowerCase(),L=(v.alt||"").toLowerCase();if(b.includes("size")&&b.includes("chart")||L.includes("size")&&L.includes("guide"))return i.chart_type="image_url",i.chart_content=v.src,i}const T=document.querySelector('.size-guide, #size-chart, .measurement-guide, [class*="SizeGuide"]');return T?(i.chart_type="raw_text",i.chart_content=T.innerText,i):(document.querySelectorAll("button, span, li").forEach(v=>{const b=v.innerText.trim();/^(XS|S|M|L|XL|XXL|[0-9]{2})$/i.test(b)&&b.length<4&&(i.available_sizes.includes(b)||i.available_sizes.push(b))}),i)}const q=async()=>{if(!Y||!G||!h||!k){alert("Please fill all fields.");return}g("loading"),await Be({height:h,weight:k,frontImage:Y,sideImage:G}),A(!0);const i=ae(),u=oe(),p=new FormData;p.append("front_image",Y),p.append("side_image",G),p.append("height",h),p.append("weight",k),p.append("product_type",i),p.append("chart_type",u.chart_type),p.append("chart_content",u.chart_content),p.append("available_sizes",JSON.stringify(u.available_sizes));try{const w=await(await fetch(x,{method:"POST",body:p})).json();if(w.error)throw new Error(w.error);D(w),g("success"),w.recommended_size&&ne(w.recommended_size)}catch(T){N(T.message),g("error")}},se=async()=>{await Je(),C(""),z(""),X(null),F(null),A(!1),D(null),g("idle")};return a.jsxs("div",{className:"fixed bottom-6 right-6 z-[999999]",children:[a.jsx("button",{onClick:()=>E(!j),className:"bg-black text-white px-7 py-3.5 rounded-full shadow-xl font-bold text-sm hover:opacity-80 transition-opacity",children:"Styllar"}),j&&a.jsxs("div",{className:"absolute bottom-20 right-0 w-[330px] bg-white rounded-2xl p-6 shadow-2xl border border-gray-100 text-black",children:[a.jsxs("div",{className:"flex justify-between items-center mb-4",children:[a.jsx("h3",{className:"m-0 text-lg font-bold",children:"Smart Fit Assistant"}),a.jsx("button",{onClick:()=>E(!1),className:"text-gray-400 hover:text-black text-2xl leading-none",children:"×"})]}),f==="loading"&&a.jsxs("div",{className:"flex flex-col items-center justify-center py-8",children:[a.jsx("div",{className:"w-8 h-8 border-4 border-gray-200 border-t-black rounded-full animate-spin mb-4"}),a.jsx("p",{className:"text-sm text-gray-600",children:"Analyzing body & page data..."})]}),f==="success"&&I&&a.jsxs("div",{className:"text-center py-6",children:[a.jsx("div",{className:"text-sm text-green-600 font-bold tracking-wider",children:"MATCH FOUND"}),a.jsx("div",{className:"text-5xl font-black my-4 text-black",children:I.recommended_size}),a.jsxs("div",{className:"text-xs text-gray-500 mb-6",children:["Confidence: ",I.confidence]}),a.jsx("button",{onClick:()=>{g("idle"),D(null)},className:"text-blue-600 text-sm underline hover:text-blue-800",children:"Scan Another Product"})]}),f==="error"&&a.jsxs("div",{className:"py-4",children:[a.jsxs("p",{className:"text-red-500 text-sm mb-4",children:["Error: ",S]}),a.jsx("button",{onClick:()=>g("idle"),className:"w-full bg-black text-white py-3 rounded-xl font-bold text-sm",children:"Try Again"})]}),f==="idle"&&y&&a.jsxs("div",{className:"py-4",children:[a.jsxs("div",{className:"bg-gray-50 border border-gray-200 rounded-xl p-4 mb-5 text-center",children:[a.jsx("span",{className:"block text-xl mb-2",children:"👤"}),a.jsx("h4",{className:"font-bold text-sm mb-1",children:"Body Profile Saved"}),a.jsxs("p",{className:"text-xs text-gray-500",children:[h,"cm | ",k,"kg"]})]}),a.jsx("button",{onClick:q,className:"w-full bg-black text-white py-3.5 rounded-xl font-bold text-sm hover:opacity-80 transition-opacity mb-3",children:"⚡ Auto-Scan This Product"}),a.jsx("button",{onClick:se,className:"w-full text-gray-500 text-xs underline hover:text-black",children:"Edit Profile / Upload New Photos"})]}),f==="idle"&&!y&&a.jsxs("div",{children:[a.jsx("p",{className:"text-sm text-gray-600 mb-5 leading-relaxed",children:"Upload photos for a precision body scan."}),a.jsxs("div",{className:"flex gap-3 mb-4",children:[a.jsx("input",{type:"number",placeholder:"Height (cm)",value:h,onChange:i=>C(i.target.value),className:"w-1/2 p-2.5 border border-gray-300 rounded-lg outline-none focus:border-black text-sm"}),a.jsx("input",{type:"number",placeholder:"Weight (kg)",value:k,onChange:i=>z(i.target.value),className:"w-1/2 p-2.5 border border-gray-300 rounded-lg outline-none focus:border-black text-sm"})]}),a.jsxs("div",{className:"mb-3",children:[a.jsx("label",{className:"text-[11px] font-bold text-gray-400 uppercase block mb-1",children:"Front Image"}),a.jsx("input",{type:"file",accept:"image/*",onChange:i=>X(i.target.files[0]),className:"w-full text-xs file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:bg-gray-100 file:text-black hover:file:bg-gray-200"})]}),a.jsxs("div",{className:"mb-5",children:[a.jsx("label",{className:"text-[11px] font-bold text-gray-400 uppercase block mb-1",children:"Side Image"}),a.jsx("input",{type:"file",accept:"image/*",onChange:i=>F(i.target.files[0]),className:"w-full text-xs file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:bg-gray-100 file:text-black hover:file:bg-gray-200"})]}),a.jsx("button",{onClick:q,className:"w-full bg-black text-white py-3.5 rounded-xl font-bold text-sm hover:opacity-80 transition-opacity",children:"Save Profile & Scan"})]})]})]})};W.StyllarPlugin=Ke,Object.defineProperty(W,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "styllar-react-plugin",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "type": "module",
   "main": "dist/styllar-react-plugin.umd.cjs",
   "module": "dist/styllar-react-plugin.js",
@@ -35,4 +35,4 @@
     "tailwindcss": "^4.2.0",
     "vite": "^5.4.10"
   }
-}
+}

package/src/StyllarPlugin.jsx

@@ -1,13 +1,56 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
+// --- 1. INDEXED-DB HELPERS (For storing large image files safely) ---
+const DB_NAME = 'StyllarDB';
+const STORE_NAME = 'user_profile';
+
+const openDB = () => {
+    return new Promise((resolve, reject) => {
+        const request = indexedDB.open(DB_NAME, 1);
+        request.onupgradeneeded = (e) => e.target.result.createObjectStore(STORE_NAME);
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+};
+
+const saveProfileToDB = async (profileData) => {
+    const db = await openDB();
+    return new Promise((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, 'readwrite');
+        const request = tx.objectStore(STORE_NAME).put(profileData, 'userData');
+        request.onsuccess = () => resolve();
+        request.onerror = () => reject(request.error);
+    });
+};
+
+const getProfileFromDB = async () => {
+    const db = await openDB();
+    return new Promise((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, 'readonly');
+        const request = tx.objectStore(STORE_NAME).get('userData');
+        request.onsuccess = () => resolve(request.result);
+        request.onerror = () => reject(request.error);
+    });
+};
+
+const clearProfileFromDB = async () => {
+    const db = await openDB();
+    return new Promise((resolve, reject) => {
+        const tx = db.transaction(STORE_NAME, 'readwrite');
+        const request = tx.objectStore(STORE_NAME).delete('userData');
+        request.onsuccess = () => resolve();
+        request.onerror = () => reject(request.error);
+    });
+};
+
+// --- MAIN COMPONENT ---
 const StyllarPlugin = () => {
-    // --- 1. REACT STATE MANAGEMENT ---
     const [isOpen, setIsOpen] = useState(false);
-    const [status, setStatus] = useState('idle'); // 'idle' | 'loading' | 'success' | 'error'
+    const [status, setStatus] = useState('idle'); 
     const [errorMsg, setErrorMsg] = useState('');
     const [result, setResult] = useState(null);
+    const [hasSavedProfile, setHasSavedProfile] = useState(false);
 
-    // Form states
     const [height, setHeight] = useState('');
     const [weight, setWeight] = useState('');
     const [frontImage, setFrontImage] = useState(null);
@@ -15,7 +58,52 @@ const StyllarPlugin = () => {
 
     const API_ENDPOINT = "http://136.113.197.77:5000/predict/size-from-chart";
 
-    // --- 2. INTELLIGENCE & SCRAPING (Unchanged logic) ---
+    // --- 2. LOAD SAVED PROFILE ON MOUNT ---
+    useEffect(() => {
+        const loadUserData = async () => {
+            try {
+                const savedData = await getProfileFromDB();
+                if (savedData && savedData.frontImage && savedData.sideImage) {
+                    setHeight(savedData.height);
+                    setWeight(savedData.weight);
+                    setFrontImage(savedData.frontImage);
+                    setSideImage(savedData.sideImage);
+                    setHasSavedProfile(true);
+                    console.log("Styllar: Loaded user profile from memory.");
+                }
+            } catch (err) {
+                console.error("Styllar: Failed to load profile", err);
+            }
+        };
+        loadUserData();
+    }, []);
+
+    // --- 3. AUTO-SELECT FUNCTION ---
+    const autoSelectSize = (targetSize) => {
+        if (!targetSize) return;
+        const trySelect = () => {
+            const sizeElements = document.querySelectorAll('button, .size-swatch, .size-option, li[role="radio"], div[data-value]');
+            for (let el of sizeElements) {
+                const text = el.innerText.trim().toUpperCase();
+                const recommended = String(targetSize).trim().toUpperCase();
+                if (text === recommended || text === `SIZE ${recommended}`) {
+                    el.click();
+                    return true;
+                }
+            }
+            return false;
+        };
+
+        if (!trySelect()) {
+            let attempts = 0;
+            const interval = setInterval(() => {
+                attempts++;
+                if (trySelect() || attempts > 10) clearInterval(interval);
+            }, 500);
+        }
+    };
+
+    // --- 4. SCRAPING LOGIC ---
     function detectProductCategory() {
         let scoreTop = 0; let scoreBottom = 0;
         const bottomKeywords = ['pant', 'jeans', 'trouser', 'skirt', 'short', 'legging', 'jogger', 'bottom', 'denim', 'cargo'];
@@ -30,28 +118,19 @@ const StyllarPlugin = () => {
         const data = { chart_type: 'none', chart_content: null, available_sizes: [] }; 
         const table = document.querySelector('table');
         if (table && /chest|waist|bust|hip|size/i.test(table.innerText)) {
-            data.chart_type = 'html_table';
-            data.chart_content = table.outerHTML;
-            return data;
+            data.chart_type = 'html_table'; data.chart_content = table.outerHTML; return data;
         }
         const allImages = document.querySelectorAll('img'); 
         for (let img of allImages) {
-            const src = img.src.toLowerCase();
-            const alt = (img.alt || "").toLowerCase();
+            const src = img.src.toLowerCase(); const alt = (img.alt || "").toLowerCase();
             if ((src.includes('size') && src.includes('chart')) || (alt.includes('size') && alt.includes('guide'))) {
-                data.chart_type = 'image_url';
-                data.chart_content = img.src;
-                return data;
+                data.chart_type = 'image_url'; data.chart_content = img.src; return data;
             }
         }
-        
         const sizeGuideDiv = document.querySelector('.size-guide, #size-chart, .measurement-guide, [class*="SizeGuide"]');
         if (sizeGuideDiv) {
-            data.chart_type = 'raw_text';
-            data.chart_content = sizeGuideDiv.innerText;
-            return data;
+            data.chart_type = 'raw_text'; data.chart_content = sizeGuideDiv.innerText; return data;
         }
-        
         const buttons = document.querySelectorAll('button, span, li');
         buttons.forEach(el => {
             const txt = el.innerText.trim();
@@ -62,14 +141,18 @@ const StyllarPlugin = () => {
         return data;
     }
 
-    // --- 3. SUBMIT HANDLER ---
+    // --- 5. SUBMIT HANDLER ---
     const runBodyScan = async () => {
         if (!frontImage || !sideImage || !height || !weight) {
-            alert("Please fill all fields.");
-            return;
+            alert("Please fill all fields."); return;
         }
 
         setStatus('loading');
+
+        // Save profile to IndexedDB so they don't have to enter it again on the next page
+        await saveProfileToDB({ height, weight, frontImage, sideImage });
+        setHasSavedProfile(true);
+
         const category = detectProductCategory();
         const pageData = scanPageForSizeData();
         
@@ -90,16 +173,27 @@ const StyllarPlugin = () => {
 
             setResult(data);
             setStatus('success');
+
+            if (data.recommended_size) {
+                autoSelectSize(data.recommended_size);
+            }
         } catch (e) {
             setErrorMsg(e.message);
             setStatus('error');
         }
     };
 
-    // --- 4. REACT JSX UI (Using Tailwind CSS for styling) ---
+    const handleClearProfile = async () => {
+        await clearProfileFromDB();
+        setHeight(''); setWeight(''); setFrontImage(null); setSideImage(null);
+        setHasSavedProfile(false);
+        setResult(null);
+        setStatus('idle');
+    };
+
+    // --- 6. UI RENDER ---
     return (
         <div className="fixed bottom-6 right-6 z-[999999]">
-            {/* The Trigger Button */}
             <button 
                 onClick={() => setIsOpen(!isOpen)} 
                 className="bg-black text-white px-7 py-3.5 rounded-full shadow-xl font-bold text-sm hover:opacity-80 transition-opacity"
@@ -107,17 +201,14 @@ const StyllarPlugin = () => {
                 Styllar 
             </button>
 
-            {/* The Modal Window */}
             {isOpen && (
                 <div className="absolute bottom-20 right-0 w-[330px] bg-white rounded-2xl p-6 shadow-2xl border border-gray-100 text-black">
                     
-                    {/* Header */}
                     <div className="flex justify-between items-center mb-4">
                         <h3 className="m-0 text-lg font-bold">Smart Fit Assistant</h3>
                         <button onClick={() => setIsOpen(false)} className="text-gray-400 hover:text-black text-2xl leading-none">&times;</button>
                     </div>
 
-                    {/* Loading State */}
                     {status === 'loading' && (
                         <div className="flex flex-col items-center justify-center py-8">
                             <div className="w-8 h-8 border-4 border-gray-200 border-t-black rounded-full animate-spin mb-4"></div>
@@ -125,7 +216,6 @@ const StyllarPlugin = () => {
                         </div>
                     )}
 
-                    {/* Success State */}
                     {status === 'success' && result && (
                         <div className="text-center py-6">
                             <div className="text-sm text-green-600 font-bold tracking-wider">MATCH FOUND</div>
@@ -135,12 +225,11 @@ const StyllarPlugin = () => {
                                 onClick={() => { setStatus('idle'); setResult(null); }} 
                                 className="text-blue-600 text-sm underline hover:text-blue-800"
                             >
-                                Run New Scan
+                                Scan Another Product
                             </button>
                         </div>
                     )}
 
-                    {/* Error State */}
                     {status === 'error' && (
                         <div className="py-4">
                             <p className="text-red-500 text-sm mb-4">Error: {errorMsg}</p>
@@ -153,8 +242,35 @@ const StyllarPlugin = () => {
                         </div>
                     )}
 
-                    {/* Input Form State */}
-                    {status === 'idle' && (
+                    {/* NEW: Display this if they have a saved profile */}
+                    {status === 'idle' && hasSavedProfile && (
+                        <div className="py-4">
+                            <div className="bg-gray-50 border border-gray-200 rounded-xl p-4 mb-5 text-center">
+                                <span className="block text-xl mb-2">👤</span>
+                                <h4 className="font-bold text-sm mb-1">Body Profile Saved</h4>
+                                <p className="text-xs text-gray-500">
+                                    {height}cm | {weight}kg
+                                </p>
+                            </div>
+                            
+                            <button 
+                                onClick={runBodyScan} 
+                                className="w-full bg-black text-white py-3.5 rounded-xl font-bold text-sm hover:opacity-80 transition-opacity mb-3"
+                            >
+                                ⚡ Auto-Scan This Product
+                            </button>
+
+                            <button 
+                                onClick={handleClearProfile}
+                                className="w-full text-gray-500 text-xs underline hover:text-black"
+                            >
+                                Edit Profile / Upload New Photos
+                            </button>
+                        </div>
+                    )}
+
+                    {/* Original form, only visible if NO saved profile exists */}
+                    {status === 'idle' && !hasSavedProfile && (
                         <div>
                             <p className="text-sm text-gray-600 mb-5 leading-relaxed">
                                 Upload photos for a precision body scan.
@@ -162,16 +278,12 @@ const StyllarPlugin = () => {
                             
                             <div className="flex gap-3 mb-4">
                                 <input 
-                                    type="number" 
-                                    placeholder="Height (cm)" 
-                                    value={height}
+                                    type="number" placeholder="Height (cm)" value={height}
                                     onChange={(e) => setHeight(e.target.value)}
                                     className="w-1/2 p-2.5 border border-gray-300 rounded-lg outline-none focus:border-black text-sm"
                                 />
                                 <input 
-                                    type="number" 
-                                    placeholder="Weight (kg)" 
-                                    value={weight}
+                                    type="number" placeholder="Weight (kg)" value={weight}
                                     onChange={(e) => setWeight(e.target.value)}
                                     className="w-1/2 p-2.5 border border-gray-300 rounded-lg outline-none focus:border-black text-sm"
                                 />
@@ -180,9 +292,7 @@ const StyllarPlugin = () => {
                             <div className="mb-3">
                                 <label className="text-[11px] font-bold text-gray-400 uppercase block mb-1">Front Image</label>
                                 <input 
-                                    type="file" 
-                                    accept="image/*" 
-                                    onChange={(e) => setFrontImage(e.target.files[0])}
+                                    type="file" accept="image/*" onChange={(e) => setFrontImage(e.target.files[0])}
                                     className="w-full text-xs file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:bg-gray-100 file:text-black hover:file:bg-gray-200"
                                 />
                             </div>
@@ -190,9 +300,7 @@ const StyllarPlugin = () => {
                             <div className="mb-5">
                                 <label className="text-[11px] font-bold text-gray-400 uppercase block mb-1">Side Image</label>
                                 <input 
-                                    type="file" 
-                                    accept="image/*" 
-                                    onChange={(e) => setSideImage(e.target.files[0])}
+                                    type="file" accept="image/*" onChange={(e) => setSideImage(e.target.files[0])}
                                     className="w-full text-xs file:mr-3 file:py-1.5 file:px-3 file:rounded-md file:border-0 file:text-xs file:bg-gray-100 file:text-black hover:file:bg-gray-200"
                                 />
                             </div>
@@ -201,7 +309,7 @@ const StyllarPlugin = () => {
                                 onClick={runBodyScan} 
                                 className="w-full bg-black text-white py-3.5 rounded-xl font-bold text-sm hover:opacity-80 transition-opacity"
                             >
-                                Run Body Scan
+                                Save Profile & Scan
                             </button>
                         </div>
                     )}