styllar-react-plugin 1.0.0

package/README.md

@@ -0,0 +1,8 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh

package/dist/styllar-react-plugin.js

@@ -0,0 +1,784 @@
+import $e, { useState as F } from "react";
+var ue = { exports: {} }, B = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Ae;
+function fr() {
+  if (Ae) return B;
+  Ae = 1;
+  var $ = $e, O = Symbol.for("react.element"), k = Symbol.for("react.fragment"), y = Object.prototype.hasOwnProperty, W = $.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, L = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function S(w, d, P) {
+    var v, E = {}, j = null, Y = null;
+    P !== void 0 && (j = "" + P), d.key !== void 0 && (j = "" + d.key), d.ref !== void 0 && (Y = d.ref);
+    for (v in d) y.call(d, v) && !L.hasOwnProperty(v) && (E[v] = d[v]);
+    if (w && w.defaultProps) for (v in d = w.defaultProps, d) E[v] === void 0 && (E[v] = d[v]);
+    return { $$typeof: O, type: w, key: j, ref: Y, props: E, _owner: W.current };
+  }
+  return B.Fragment = k, B.jsx = S, B.jsxs = S, B;
+}
+var J = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var Ie;
+function dr() {
+  return Ie || (Ie = 1, process.env.NODE_ENV !== "production" && function() {
+    var $ = $e, O = Symbol.for("react.element"), k = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), W = Symbol.for("react.strict_mode"), L = Symbol.for("react.profiler"), S = Symbol.for("react.provider"), w = Symbol.for("react.context"), d = Symbol.for("react.forward_ref"), P = Symbol.for("react.suspense"), v = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), j = Symbol.for("react.lazy"), Y = Symbol.for("react.offscreen"), U = Symbol.iterator, Q = "@@iterator";
+    function ee(e) {
+      if (e === null || typeof e != "object")
+        return null;
+      var r = U && e[U] || e[Q];
+      return typeof r == "function" ? r : null;
+    }
+    var N = $.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function p(e) {
+      {
+        for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
+          t[n - 1] = arguments[n];
+        re("error", e, t);
+      }
+    }
+    function re(e, r, t) {
+      {
+        var n = N.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, x = !1, g = !1, T = !1, C = !1, R;
+    R = Symbol.for("react.module.reference");
+    function b(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === y || e === L || C || e === W || e === P || e === v || T || e === Y || l || x || g || typeof e == "object" && e !== null && (e.$$typeof === j || e.$$typeof === E || e.$$typeof === S || e.$$typeof === w || e.$$typeof === d || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      e.$$typeof === R || e.getModuleId !== void 0));
+    }
+    function K(e, r, t) {
+      var n = e.displayName;
+      if (n)
+        return n;
+      var i = r.displayName || r.name || "";
+      return i !== "" ? t + "(" + i + ")" : t;
+    }
+    function fe(e) {
+      return e.displayName || "Context";
+    }
+    function D(e) {
+      if (e == null)
+        return null;
+      if (typeof e.tag == "number" && p("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 y:
+          return "Fragment";
+        case k:
+          return "Portal";
+        case L:
+          return "Profiler";
+        case W:
+          return "StrictMode";
+        case P:
+          return "Suspense";
+        case v:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case w:
+            var r = e;
+            return fe(r) + ".Consumer";
+          case S:
+            var t = e;
+            return fe(t._context) + ".Provider";
+          case d:
+            return K(e, e.render, "ForwardRef");
+          case E:
+            var n = e.displayName || null;
+            return n !== null ? n : D(e.type) || "Memo";
+          case j: {
+            var i = e, c = i._payload, o = i._init;
+            try {
+              return D(o(c));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var A = Object.assign, V = 0, de, ve, pe, ge, he, me, be;
+    function ye() {
+    }
+    ye.__reactDisabledLog = !0;
+    function We() {
+      {
+        if (V === 0) {
+          de = console.log, ve = console.info, pe = console.warn, ge = console.error, he = console.group, me = console.groupCollapsed, be = console.groupEnd;
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            value: ye,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: e,
+            log: e,
+            warn: e,
+            error: e,
+            group: e,
+            groupCollapsed: e,
+            groupEnd: e
+          });
+        }
+        V++;
+      }
+    }
+    function Le() {
+      {
+        if (V--, V === 0) {
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: A({}, e, {
+              value: de
+            }),
+            info: A({}, e, {
+              value: ve
+            }),
+            warn: A({}, e, {
+              value: pe
+            }),
+            error: A({}, e, {
+              value: ge
+            }),
+            group: A({}, e, {
+              value: he
+            }),
+            groupCollapsed: A({}, e, {
+              value: me
+            }),
+            groupEnd: A({}, e, {
+              value: be
+            })
+          });
+        }
+        V < 0 && p("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var te = N.ReactCurrentDispatcher, ne;
+    function X(e, r, t) {
+      {
+        if (ne === void 0)
+          try {
+            throw Error();
+          } catch (i) {
+            var n = i.stack.trim().match(/\n( *(at )?)/);
+            ne = n && n[1] || "";
+          }
+        return `
+` + ne + e;
+      }
+    }
+    var ae = !1, G;
+    {
+      var Ye = typeof WeakMap == "function" ? WeakMap : Map;
+      G = new Ye();
+    }
+    function xe(e, r) {
+      if (!e || ae)
+        return "";
+      {
+        var t = G.get(e);
+        if (t !== void 0)
+          return t;
+      }
+      var n;
+      ae = !0;
+      var i = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var c;
+      c = te.current, te.current = null, We();
+      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 _ = `
+` + a[u].replace(" at new ", " at ");
+                    return e.displayName && _.includes("<anonymous>") && (_ = _.replace("<anonymous>", e.displayName)), typeof e == "function" && G.set(e, _), _;
+                  }
+                while (u >= 1 && f >= 0);
+              break;
+            }
+        }
+      } finally {
+        ae = !1, te.current = c, Le(), Error.prepareStackTrace = i;
+      }
+      var M = e ? e.displayName || e.name : "", I = M ? X(M) : "";
+      return typeof e == "function" && G.set(e, I), I;
+    }
+    function ze(e, r, t) {
+      return xe(e, !1);
+    }
+    function Me(e) {
+      var r = e.prototype;
+      return !!(r && r.isReactComponent);
+    }
+    function H(e, r, t) {
+      if (e == null)
+        return "";
+      if (typeof e == "function")
+        return xe(e, Me(e));
+      if (typeof e == "string")
+        return X(e);
+      switch (e) {
+        case P:
+          return X("Suspense");
+        case v:
+          return X("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case d:
+            return ze(e.render);
+          case E:
+            return H(e.type, r, t);
+          case j: {
+            var n = e, i = n._payload, c = n._init;
+            try {
+              return H(c(i), r, t);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var q = Object.prototype.hasOwnProperty, _e = {}, Ee = N.ReactDebugCurrentFrame;
+    function Z(e) {
+      if (e) {
+        var r = e._owner, t = H(e.type, e._source, r ? r.type : null);
+        Ee.setExtraStackFrame(t);
+      } else
+        Ee.setExtraStackFrame(null);
+    }
+    function Ue(e, r, t, n, i) {
+      {
+        var c = Function.call.bind(q);
+        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) && (Z(i), p("%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), Z(null)), a instanceof Error && !(a.message in _e) && (_e[a.message] = !0, Z(i), p("Failed %s type: %s", t, a.message), Z(null));
+          }
+      }
+    }
+    var Ve = Array.isArray;
+    function oe(e) {
+      return Ve(e);
+    }
+    function qe(e) {
+      {
+        var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t;
+      }
+    }
+    function Be(e) {
+      try {
+        return Re(e), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Re(e) {
+      return "" + e;
+    }
+    function we(e) {
+      if (Be(e))
+        return p("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", qe(e)), Re(e);
+    }
+    var je = N.ReactCurrentOwner, Je = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, Se, Te;
+    function Ke(e) {
+      if (q.call(e, "ref")) {
+        var r = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.ref !== void 0;
+    }
+    function Xe(e) {
+      if (q.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function Ge(e, r) {
+      typeof e.ref == "string" && je.current;
+    }
+    function He(e, r) {
+      {
+        var t = function() {
+          Se || (Se = !0, p("%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 Ze(e, r) {
+      {
+        var t = function() {
+          Te || (Te = !0, p("%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 Qe = function(e, r, t, n, i, c, o) {
+      var a = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: O,
+        // Built-in properties that belong on the element
+        type: e,
+        key: r,
+        ref: t,
+        props: o,
+        // Record the component responsible for creating this element.
+        _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 er(e, r, t, n, i) {
+      {
+        var c, o = {}, a = null, h = null;
+        t !== void 0 && (we(t), a = "" + t), Xe(r) && (we(r.key), a = "" + r.key), Ke(r) && (h = r.ref, Ge(r, i));
+        for (c in r)
+          q.call(r, c) && !Je.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 && He(o, f), h && Ze(o, f);
+        }
+        return Qe(e, a, h, i, n, je.current, o);
+      }
+    }
+    var ie = N.ReactCurrentOwner, Ce = N.ReactDebugCurrentFrame;
+    function z(e) {
+      if (e) {
+        var r = e._owner, t = H(e.type, e._source, r ? r.type : null);
+        Ce.setExtraStackFrame(t);
+      } else
+        Ce.setExtraStackFrame(null);
+    }
+    var se;
+    se = !1;
+    function le(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === O;
+    }
+    function Oe() {
+      {
+        if (ie.current) {
+          var e = D(ie.current.type);
+          if (e)
+            return `
+
+Check the render method of \`` + e + "`.";
+        }
+        return "";
+      }
+    }
+    function rr(e) {
+      return "";
+    }
+    var ke = {};
+    function tr(e) {
+      {
+        var r = Oe();
+        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 Pe(e, r) {
+      {
+        if (!e._store || e._store.validated || e.key != null)
+          return;
+        e._store.validated = !0;
+        var t = tr(r);
+        if (ke[t])
+          return;
+        ke[t] = !0;
+        var n = "";
+        e && e._owner && e._owner !== ie.current && (n = " It was passed a child from " + D(e._owner.type) + "."), z(e), p('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), z(null);
+      }
+    }
+    function Ne(e, r) {
+      {
+        if (typeof e != "object")
+          return;
+        if (oe(e))
+          for (var t = 0; t < e.length; t++) {
+            var n = e[t];
+            le(n) && Pe(n, r);
+          }
+        else if (le(e))
+          e._store && (e._store.validated = !0);
+        else if (e) {
+          var i = ee(e);
+          if (typeof i == "function" && i !== e.entries)
+            for (var c = i.call(e), o; !(o = c.next()).done; )
+              le(o.value) && Pe(o.value, r);
+        }
+      }
+    }
+    function nr(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 || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        r.$$typeof === E))
+          t = r.propTypes;
+        else
+          return;
+        if (t) {
+          var n = D(r);
+          Ue(t, e.props, "prop", n, e);
+        } else if (r.PropTypes !== void 0 && !se) {
+          se = !0;
+          var i = D(r);
+          p("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", i || "Unknown");
+        }
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && p("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function ar(e) {
+      {
+        for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
+          var n = r[t];
+          if (n !== "children" && n !== "key") {
+            z(e), p("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), z(null);
+            break;
+          }
+        }
+        e.ref !== null && (z(e), p("Invalid attribute `ref` supplied to `React.Fragment`."), z(null));
+      }
+    }
+    var De = {};
+    function Fe(e, r, t, n, i, c) {
+      {
+        var o = b(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 = rr();
+          h ? a += h : a += Oe();
+          var u;
+          e === null ? u = "null" : oe(e) ? u = "array" : e !== void 0 && e.$$typeof === O ? (u = "<" + (D(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : u = typeof e, p("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 = er(e, r, t, i, c);
+        if (f == null)
+          return f;
+        if (o) {
+          var _ = r.children;
+          if (_ !== void 0)
+            if (n)
+              if (oe(_)) {
+                for (var M = 0; M < _.length; M++)
+                  Ne(_[M], e);
+                Object.freeze && Object.freeze(_);
+              } else
+                p("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
+              Ne(_, e);
+        }
+        if (q.call(r, "key")) {
+          var I = D(e), m = Object.keys(r).filter(function(ur) {
+            return ur !== "key";
+          }), ce = m.length > 0 ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!De[I + ce]) {
+            var cr = m.length > 0 ? "{" + m.join(": ..., ") + ": ...}" : "{}";
+            p(`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} />`, ce, I, cr, I), De[I + ce] = !0;
+          }
+        }
+        return e === y ? ar(f) : nr(f), f;
+      }
+    }
+    function or(e, r, t) {
+      return Fe(e, r, t, !0);
+    }
+    function ir(e, r, t) {
+      return Fe(e, r, t, !1);
+    }
+    var sr = ir, lr = or;
+    J.Fragment = y, J.jsx = sr, J.jsxs = lr;
+  }()), J;
+}
+process.env.NODE_ENV === "production" ? ue.exports = fr() : ue.exports = dr();
+var s = ue.exports;
+const pr = () => {
+  const [$, O] = F(!1), [k, y] = F("idle"), [W, L] = F(""), [S, w] = F(null), [d, P] = F(""), [v, E] = F(""), [j, Y] = F(null), [U, Q] = F(null), ee = "http://136.113.197.77:5000/predict/size-from-chart";
+  function N() {
+    var R;
+    let l = 0, x = 0;
+    const g = ["pant", "jeans", "trouser", "skirt", "short", "legging", "jogger", "bottom", "denim", "cargo"], T = ["shirt", "top", "tee", "blouse", "jacket", "coat", "hoodie", "sweater", "vest", "cardigan", "dress", "t-shirt"], C = (document.title + " " + (((R = document.querySelector("h1")) == null ? void 0 : R.innerText) || "")).toLowerCase();
+    return g.forEach((b) => {
+      C.includes(b) && (x += 2);
+    }), T.forEach((b) => {
+      C.includes(b) && (l += 2);
+    }), x > l ? "bottom" : "top";
+  }
+  function p() {
+    const l = { chart_type: "none", chart_content: null, available_sizes: [] }, x = document.querySelector("table");
+    if (x && /chest|waist|bust|hip|size/i.test(x.innerText))
+      return l.chart_type = "html_table", l.chart_content = x.outerHTML, l;
+    const g = document.querySelectorAll("img");
+    for (let R of g) {
+      const b = R.src.toLowerCase(), K = (R.alt || "").toLowerCase();
+      if (b.includes("size") && b.includes("chart") || K.includes("size") && K.includes("guide"))
+        return l.chart_type = "image_url", l.chart_content = R.src, l;
+    }
+    const T = document.querySelector('.size-guide, #size-chart, .measurement-guide, [class*="SizeGuide"]');
+    return T ? (l.chart_type = "raw_text", l.chart_content = T.innerText, l) : (document.querySelectorAll("button, span, li").forEach((R) => {
+      const b = R.innerText.trim();
+      /^(XS|S|M|L|XL|XXL|[0-9]{2})$/i.test(b) && b.length < 4 && (l.available_sizes.includes(b) || l.available_sizes.push(b));
+    }), l);
+  }
+  const re = async () => {
+    if (!j || !U || !d || !v) {
+      alert("Please fill all fields.");
+      return;
+    }
+    y("loading");
+    const l = N(), x = p(), g = new FormData();
+    g.append("front_image", j), g.append("side_image", U), g.append("height", d), g.append("weight", v), g.append("product_type", l), g.append("chart_type", x.chart_type), g.append("chart_content", x.chart_content), g.append("available_sizes", JSON.stringify(x.available_sizes));
+    try {
+      const C = await (await fetch(ee, { method: "POST", body: g })).json();
+      if (C.error) throw new Error(C.error);
+      w(C), y("success");
+    } catch (T) {
+      L(T.message), y("error");
+    }
+  };
+  return /* @__PURE__ */ s.jsxs("div", { className: "fixed bottom-6 right-6 z-[999999]", children: [
+    /* @__PURE__ */ s.jsx(
+      "button",
+      {
+        onClick: () => O(!$),
+        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"
+      }
+    ),
+    $ && /* @__PURE__ */ 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: [
+      /* @__PURE__ */ s.jsxs("div", { className: "flex justify-between items-center mb-4", children: [
+        /* @__PURE__ */ s.jsx("h3", { className: "m-0 text-lg font-bold", children: "Smart Fit Assistant" }),
+        /* @__PURE__ */ s.jsx("button", { onClick: () => O(!1), className: "text-gray-400 hover:text-black text-2xl leading-none", children: "×" })
+      ] }),
+      k === "loading" && /* @__PURE__ */ s.jsxs("div", { className: "flex flex-col items-center justify-center py-8", children: [
+        /* @__PURE__ */ s.jsx("div", { className: "w-8 h-8 border-4 border-gray-200 border-t-black rounded-full animate-spin mb-4" }),
+        /* @__PURE__ */ s.jsx("p", { className: "text-sm text-gray-600", children: "Analyzing body & page data..." })
+      ] }),
+      k === "success" && S && /* @__PURE__ */ s.jsxs("div", { className: "text-center py-6", children: [
+        /* @__PURE__ */ s.jsx("div", { className: "text-sm text-green-600 font-bold tracking-wider", children: "MATCH FOUND" }),
+        /* @__PURE__ */ s.jsx("div", { className: "text-5xl font-black my-4 text-black", children: S.recommended_size }),
+        /* @__PURE__ */ s.jsxs("div", { className: "text-xs text-gray-500 mb-6", children: [
+          "Confidence: ",
+          S.confidence
+        ] }),
+        /* @__PURE__ */ s.jsx(
+          "button",
+          {
+            onClick: () => {
+              y("idle"), w(null);
+            },
+            className: "text-blue-600 text-sm underline hover:text-blue-800",
+            children: "Run New Scan"
+          }
+        )
+      ] }),
+      k === "error" && /* @__PURE__ */ s.jsxs("div", { className: "py-4", children: [
+        /* @__PURE__ */ s.jsxs("p", { className: "text-red-500 text-sm mb-4", children: [
+          "Error: ",
+          W
+        ] }),
+        /* @__PURE__ */ s.jsx(
+          "button",
+          {
+            onClick: () => y("idle"),
+            className: "w-full bg-black text-white py-3 rounded-xl font-bold text-sm",
+            children: "Try Again"
+          }
+        )
+      ] }),
+      k === "idle" && /* @__PURE__ */ s.jsxs("div", { children: [
+        /* @__PURE__ */ s.jsx("p", { className: "text-sm text-gray-600 mb-5 leading-relaxed", children: "Upload photos for a precision body scan." }),
+        /* @__PURE__ */ s.jsxs("div", { className: "flex gap-3 mb-4", children: [
+          /* @__PURE__ */ s.jsx(
+            "input",
+            {
+              type: "number",
+              placeholder: "Height (cm)",
+              value: d,
+              onChange: (l) => P(l.target.value),
+              className: "w-1/2 p-2.5 border border-gray-300 rounded-lg outline-none focus:border-black text-sm"
+            }
+          ),
+          /* @__PURE__ */ s.jsx(
+            "input",
+            {
+              type: "number",
+              placeholder: "Weight (kg)",
+              value: v,
+              onChange: (l) => E(l.target.value),
+              className: "w-1/2 p-2.5 border border-gray-300 rounded-lg outline-none focus:border-black text-sm"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s.jsxs("div", { className: "mb-3", children: [
+          /* @__PURE__ */ s.jsx("label", { className: "text-[11px] font-bold text-gray-400 uppercase block mb-1", children: "Front Image" }),
+          /* @__PURE__ */ s.jsx(
+            "input",
+            {
+              type: "file",
+              accept: "image/*",
+              onChange: (l) => Y(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"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s.jsxs("div", { className: "mb-5", children: [
+          /* @__PURE__ */ s.jsx("label", { className: "text-[11px] font-bold text-gray-400 uppercase block mb-1", children: "Side Image" }),
+          /* @__PURE__ */ s.jsx(
+            "input",
+            {
+              type: "file",
+              accept: "image/*",
+              onChange: (l) => Q(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"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ s.jsx(
+          "button",
+          {
+            onClick: re,
+            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"
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+export {
+  pr as StyllarPlugin
+};

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

@@ -0,0 +1,30 @@
+(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={};/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * 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={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * 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`
+
+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 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:
+  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"})});

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "styllar-react-plugin",
+  "version": "1.0.0",
+  "type": "module",
+  "main": "dist/styllar-react-plugin.umd.cjs",
+  "module": "dist/styllar-react-plugin.js",
+  "exports": {
+    ".": {
+      "import": "./dist/styllar-react-plugin.js",
+      "require": "./dist/styllar-react-plugin.umd.cjs"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.13.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "autoprefixer": "^10.4.24",
+    "eslint": "^9.13.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "globals": "^15.11.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.2.0",
+    "vite": "^5.4.10"
+  }
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+    plugins: {
+      tailwindcss: {},
+      autoprefixer: {},
+    },
+  }

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/StyllarPlugin.jsx

@@ -0,0 +1,214 @@
+import React, { useState } from 'react';
+
+const StyllarPlugin = () => {
+    // --- 1. REACT STATE MANAGEMENT ---
+    const [isOpen, setIsOpen] = useState(false);
+    const [status, setStatus] = useState('idle'); // 'idle' | 'loading' | 'success' | 'error'
+    const [errorMsg, setErrorMsg] = useState('');
+    const [result, setResult] = useState(null);
+
+    // Form states
+    const [height, setHeight] = useState('');
+    const [weight, setWeight] = useState('');
+    const [frontImage, setFrontImage] = useState(null);
+    const [sideImage, setSideImage] = useState(null);
+
+    const API_ENDPOINT = "http://136.113.197.77:5000/predict/size-from-chart";
+
+    // --- 2. INTELLIGENCE & SCRAPING (Unchanged logic) ---
+    function detectProductCategory() {
+        let scoreTop = 0; let scoreBottom = 0;
+        const bottomKeywords = ['pant', 'jeans', 'trouser', 'skirt', 'short', 'legging', 'jogger', 'bottom', 'denim', 'cargo'];
+        const topKeywords = ['shirt', 'top', 'tee', 'blouse', 'jacket', 'coat', 'hoodie', 'sweater', 'vest', 'cardigan', 'dress', 't-shirt'];
+        const textToScan = (document.title + " " + (document.querySelector('h1')?.innerText || "")).toLowerCase();
+        bottomKeywords.forEach(word => { if(textToScan.includes(word)) scoreBottom += 2; });
+        topKeywords.forEach(word => { if(textToScan.includes(word)) scoreTop += 2; });
+        return (scoreBottom > scoreTop) ? 'bottom' : 'top';
+    }
+
+    function scanPageForSizeData() {
+        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;
+        }
+        const allImages = document.querySelectorAll('img'); 
+        for (let img of allImages) {
+            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;
+            }
+        }
+        
+        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;
+        }
+        
+        const buttons = document.querySelectorAll('button, span, li');
+        buttons.forEach(el => {
+            const txt = el.innerText.trim();
+            if (/^(XS|S|M|L|XL|XXL|[0-9]{2})$/i.test(txt) && txt.length < 4) {
+                if (!data.available_sizes.includes(txt)) data.available_sizes.push(txt);
+            }
+        });
+        return data;
+    }
+
+    // --- 3. SUBMIT HANDLER ---
+    const runBodyScan = async () => {
+        if (!frontImage || !sideImage || !height || !weight) {
+            alert("Please fill all fields.");
+            return;
+        }
+
+        setStatus('loading');
+        const category = detectProductCategory();
+        const pageData = scanPageForSizeData();
+        
+        const fd = new FormData();
+        fd.append('front_image', frontImage);
+        fd.append('side_image', sideImage);
+        fd.append('height', height);
+        fd.append('weight', weight);
+        fd.append('product_type', category);
+        fd.append('chart_type', pageData.chart_type);
+        fd.append('chart_content', pageData.chart_content);
+        fd.append('available_sizes', JSON.stringify(pageData.available_sizes));
+
+        try {
+            const res = await fetch(API_ENDPOINT, { method: 'POST', body: fd });
+            const data = await res.json();
+            if(data.error) throw new Error(data.error);
+
+            setResult(data);
+            setStatus('success');
+        } catch (e) {
+            setErrorMsg(e.message);
+            setStatus('error');
+        }
+    };
+
+    // --- 4. REACT JSX UI (Using Tailwind CSS for styling) ---
+    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"
+            >
+                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>
+                            <p className="text-sm text-gray-600">Analyzing body & page data...</p>
+                        </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>
+                            <div className="text-5xl font-black my-4 text-black">{result.recommended_size}</div>
+                            <div className="text-xs text-gray-500 mb-6">Confidence: {result.confidence}</div>
+                            <button 
+                                onClick={() => { setStatus('idle'); setResult(null); }} 
+                                className="text-blue-600 text-sm underline hover:text-blue-800"
+                            >
+                                Run New Scan
+                            </button>
+                        </div>
+                    )}
+
+                    {/* Error State */}
+                    {status === 'error' && (
+                        <div className="py-4">
+                            <p className="text-red-500 text-sm mb-4">Error: {errorMsg}</p>
+                            <button 
+                                onClick={() => setStatus('idle')} 
+                                className="w-full bg-black text-white py-3 rounded-xl font-bold text-sm"
+                            >
+                                Try Again
+                            </button>
+                        </div>
+                    )}
+
+                    {/* Input Form State */}
+                    {status === 'idle' && (
+                        <div>
+                            <p className="text-sm text-gray-600 mb-5 leading-relaxed">
+                                Upload photos for a precision body scan.
+                            </p>
+                            
+                            <div className="flex gap-3 mb-4">
+                                <input 
+                                    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}
+                                    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"
+                                />
+                            </div>
+
+                            <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])}
+                                    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>
+
+                            <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])}
+                                    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>
+
+                            <button 
+                                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
+                            </button>
+                        </div>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default StyllarPlugin;

package/src/assets/react.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>

package/src/index.js

@@ -0,0 +1 @@
+export { default as StyllarPlugin } from './StyllarPlugin';

package/tailwind.config.js

@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+    content: [
+      "./src/**/*.{js,jsx,ts,tsx}",
+    ],
+    theme: {
+      extend: {},
+    },
+    plugins: [],
+  }

package/vite.config.js

@@ -0,0 +1,25 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    lib: {
+      // This tells the bundler where your "front door" is
+      entry: resolve(__dirname, 'src/index.js'),
+      name: 'StyllarReactPlugin',
+      fileName: 'styllar-react-plugin'
+    },
+    rollupOptions: {
+      // Make sure it doesn't bundle React itself, since the client already has React!
+      external: ['react', 'react-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM'
+        }
+      }
+    }
+  }
+})