@weaverse/hydrogen 1.0.35 → 1.0.37

package/dist/index.mjs

@@ -1,30 +1,6 @@
-// src/utils.ts
-import { isIframe, loadScript } from "@weaverse/core";
-import { useEffect } from "react";
-var useStudio = (weaverseCore) => {
-  useEffect(() => {
-    if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
-      window.weaverseStudioInitialized = true;
-      let host = weaverseCore.weaverseHost;
-      let version = weaverseCore.weaverseVersion || Date.now();
-      loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
-        () => {
-          window?.createWeaverseStudioBridge(weaverseCore);
-          setTimeout(() => {
-            weaverseCore.triggerUpdate();
-          }, 2e3);
-        }
-      );
-    }
-    setTimeout(() => {
-      window.__weaverse = weaverseCore;
-    }, 1);
-  }, []);
-};
-
 // src/index.tsx
-import React, { memo } from "react";
 import { WeaverseRoot } from "@weaverse/react";
+import React, { memo } from "react";
 
 // src/context.ts
 import { createRootContext, isBrowser } from "@weaverse/react";
@@ -34,23 +10,16 @@ var createCachedWeaverseContext = (init) => {
     if (!window.__weaverses[init.pageId]) {
       window.__weaverses[init.pageId] = createRootContext(init);
     }
-    console.log("createRootContext cached", window.__weaverses[init.pageId]);
     return window.__weaverses[init.pageId];
   }
-  console.log("createRootContext not cached");
   return createRootContext(init);
 };
-var createWeaverseHydrogenContext = ({
-  weaverseData: { pageData, config } = {
-    pageData: {},
-    config: {}
-  }
-}, components) => {
+var createWeaverseHydrogenContext = ({ weaverseData }, components) => {
+  let { pageData = {}, config = {} } = weaverseData || {};
   let weaverse = createCachedWeaverseContext({
     ...config,
     data: pageData,
     pageId: pageData?.id,
-    isDesignMode: true,
     platformType: "shopify-hydrogen"
   });
   Object.entries(components).forEach(([key, component]) => {
@@ -65,11 +34,694 @@ var createWeaverseHydrogenContext = ({
   return weaverse;
 };
 
+// ../../node_modules/@stitches/core/dist/index.mjs
+var t = "colors";
+var n = "sizes";
+var r = "space";
+var i = { gap: r, gridGap: r, columnGap: r, gridColumnGap: r, rowGap: r, gridRowGap: r, inset: r, insetBlock: r, insetBlockEnd: r, insetBlockStart: r, insetInline: r, insetInlineEnd: r, insetInlineStart: r, margin: r, marginTop: r, marginRight: r, marginBottom: r, marginLeft: r, marginBlock: r, marginBlockEnd: r, marginBlockStart: r, marginInline: r, marginInlineEnd: r, marginInlineStart: r, padding: r, paddingTop: r, paddingRight: r, paddingBottom: r, paddingLeft: r, paddingBlock: r, paddingBlockEnd: r, paddingBlockStart: r, paddingInline: r, paddingInlineEnd: r, paddingInlineStart: r, top: r, right: r, bottom: r, left: r, scrollMargin: r, scrollMarginTop: r, scrollMarginRight: r, scrollMarginBottom: r, scrollMarginLeft: r, scrollMarginX: r, scrollMarginY: r, scrollMarginBlock: r, scrollMarginBlockEnd: r, scrollMarginBlockStart: r, scrollMarginInline: r, scrollMarginInlineEnd: r, scrollMarginInlineStart: r, scrollPadding: r, scrollPaddingTop: r, scrollPaddingRight: r, scrollPaddingBottom: r, scrollPaddingLeft: r, scrollPaddingX: r, scrollPaddingY: r, scrollPaddingBlock: r, scrollPaddingBlockEnd: r, scrollPaddingBlockStart: r, scrollPaddingInline: r, scrollPaddingInlineEnd: r, scrollPaddingInlineStart: r, fontSize: "fontSizes", background: t, backgroundColor: t, backgroundImage: t, borderImage: t, border: t, borderBlock: t, borderBlockEnd: t, borderBlockStart: t, borderBottom: t, borderBottomColor: t, borderColor: t, borderInline: t, borderInlineEnd: t, borderInlineStart: t, borderLeft: t, borderLeftColor: t, borderRight: t, borderRightColor: t, borderTop: t, borderTopColor: t, caretColor: t, color: t, columnRuleColor: t, fill: t, outline: t, outlineColor: t, stroke: t, textDecorationColor: t, fontFamily: "fonts", fontWeight: "fontWeights", lineHeight: "lineHeights", letterSpacing: "letterSpacings", blockSize: n, minBlockSize: n, maxBlockSize: n, inlineSize: n, minInlineSize: n, maxInlineSize: n, width: n, minWidth: n, maxWidth: n, height: n, minHeight: n, maxHeight: n, flexBasis: n, gridTemplateColumns: n, gridTemplateRows: n, borderWidth: "borderWidths", borderTopWidth: "borderWidths", borderRightWidth: "borderWidths", borderBottomWidth: "borderWidths", borderLeftWidth: "borderWidths", borderStyle: "borderStyles", borderTopStyle: "borderStyles", borderRightStyle: "borderStyles", borderBottomStyle: "borderStyles", borderLeftStyle: "borderStyles", borderRadius: "radii", borderTopLeftRadius: "radii", borderTopRightRadius: "radii", borderBottomRightRadius: "radii", borderBottomLeftRadius: "radii", boxShadow: "shadows", textShadow: "shadows", transition: "transitions", zIndex: "zIndices" };
+var o = (e, t2) => "function" == typeof t2 ? { "()": Function.prototype.toString.call(t2) } : t2;
+var l = () => {
+  const e = /* @__PURE__ */ Object.create(null);
+  return (t2, n2, ...r2) => {
+    const i2 = ((e2) => JSON.stringify(e2, o))(t2);
+    return i2 in e ? e[i2] : e[i2] = n2(t2, ...r2);
+  };
+};
+var s = Symbol.for("sxs.internal");
+var a = (e, t2) => Object.defineProperties(e, Object.getOwnPropertyDescriptors(t2));
+var c = (e) => {
+  for (const t2 in e)
+    return true;
+  return false;
+};
+var { hasOwnProperty: d } = Object.prototype;
+var g = (e) => e.includes("-") ? e : e.replace(/[A-Z]/g, (e2) => "-" + e2.toLowerCase());
+var p = /\s+(?![^()]*\))/;
+var u = (e) => (t2) => e(..."string" == typeof t2 ? String(t2).split(p) : [t2]);
+var h = { appearance: (e) => ({ WebkitAppearance: e, appearance: e }), backfaceVisibility: (e) => ({ WebkitBackfaceVisibility: e, backfaceVisibility: e }), backdropFilter: (e) => ({ WebkitBackdropFilter: e, backdropFilter: e }), backgroundClip: (e) => ({ WebkitBackgroundClip: e, backgroundClip: e }), boxDecorationBreak: (e) => ({ WebkitBoxDecorationBreak: e, boxDecorationBreak: e }), clipPath: (e) => ({ WebkitClipPath: e, clipPath: e }), content: (e) => ({ content: e.includes('"') || e.includes("'") || /^([A-Za-z]+\([^]*|[^]*-quote|inherit|initial|none|normal|revert|unset)$/.test(e) ? e : `"${e}"` }), hyphens: (e) => ({ WebkitHyphens: e, hyphens: e }), maskImage: (e) => ({ WebkitMaskImage: e, maskImage: e }), maskSize: (e) => ({ WebkitMaskSize: e, maskSize: e }), tabSize: (e) => ({ MozTabSize: e, tabSize: e }), textSizeAdjust: (e) => ({ WebkitTextSizeAdjust: e, textSizeAdjust: e }), userSelect: (e) => ({ WebkitUserSelect: e, userSelect: e }), marginBlock: u((e, t2) => ({ marginBlockStart: e, marginBlockEnd: t2 || e })), marginInline: u((e, t2) => ({ marginInlineStart: e, marginInlineEnd: t2 || e })), maxSize: u((e, t2) => ({ maxBlockSize: e, maxInlineSize: t2 || e })), minSize: u((e, t2) => ({ minBlockSize: e, minInlineSize: t2 || e })), paddingBlock: u((e, t2) => ({ paddingBlockStart: e, paddingBlockEnd: t2 || e })), paddingInline: u((e, t2) => ({ paddingInlineStart: e, paddingInlineEnd: t2 || e })) };
+var f = /([\d.]+)([^]*)/;
+var m = (e, t2) => e.length ? e.reduce((e2, n2) => (e2.push(...t2.map((e3) => e3.includes("&") ? e3.replace(/&/g, /[ +>|~]/.test(n2) && /&.*&/.test(e3) ? `:is(${n2})` : n2) : n2 + " " + e3)), e2), []) : t2;
+var b = (e, t2) => e in S && "string" == typeof t2 ? t2.replace(/^((?:[^]*[^\w-])?)(fit-content|stretch)((?:[^\w-][^]*)?)$/, (t3, n2, r2, i2) => n2 + ("stretch" === r2 ? `-moz-available${i2};${g(e)}:${n2}-webkit-fill-available` : `-moz-fit-content${i2};${g(e)}:${n2}fit-content`) + i2) : String(t2);
+var S = { blockSize: 1, height: 1, inlineSize: 1, maxBlockSize: 1, maxHeight: 1, maxInlineSize: 1, maxWidth: 1, minBlockSize: 1, minHeight: 1, minInlineSize: 1, minWidth: 1, width: 1 };
+var k = (e) => e ? e + "-" : "";
+var y = (e, t2, n2) => e.replace(/([+-])?((?:\d+(?:\.\d*)?|\.\d+)(?:[Ee][+-]?\d+)?)?(\$|--)([$\w-]+)/g, (e2, r2, i2, o2, l2) => "$" == o2 == !!i2 ? e2 : (r2 || "--" == o2 ? "calc(" : "") + "var(--" + ("$" === o2 ? k(t2) + (l2.includes("$") ? "" : k(n2)) + l2.replace(/\$/g, "-") : l2) + ")" + (r2 || "--" == o2 ? "*" + (r2 || "") + (i2 || "1") + ")" : ""));
+var B = /\s*,\s*(?![^()]*\))/;
+var $ = Object.prototype.toString;
+var x = (e, t2, n2, r2, i2) => {
+  let o2, l2, s2;
+  const a2 = (e2, t3, n3) => {
+    let c2, d2;
+    const p2 = (e3) => {
+      for (c2 in e3) {
+        const x2 = 64 === c2.charCodeAt(0), z2 = x2 && Array.isArray(e3[c2]) ? e3[c2] : [e3[c2]];
+        for (d2 of z2) {
+          const e4 = /[A-Z]/.test(S2 = c2) ? S2 : S2.replace(/-[^]/g, (e5) => e5[1].toUpperCase()), z3 = "object" == typeof d2 && d2 && d2.toString === $ && (!r2.utils[e4] || !t3.length);
+          if (e4 in r2.utils && !z3) {
+            const t4 = r2.utils[e4];
+            if (t4 !== l2) {
+              l2 = t4, p2(t4(d2)), l2 = null;
+              continue;
+            }
+          } else if (e4 in h) {
+            const t4 = h[e4];
+            if (t4 !== s2) {
+              s2 = t4, p2(t4(d2)), s2 = null;
+              continue;
+            }
+          }
+          if (x2 && (u2 = c2.slice(1) in r2.media ? "@media " + r2.media[c2.slice(1)] : c2, c2 = u2.replace(/\(\s*([\w-]+)\s*(=|<|<=|>|>=)\s*([\w-]+)\s*(?:(<|<=|>|>=)\s*([\w-]+)\s*)?\)/g, (e5, t4, n4, r3, i3, o3) => {
+            const l3 = f.test(t4), s3 = 0.0625 * (l3 ? -1 : 1), [a3, c3] = l3 ? [r3, t4] : [t4, r3];
+            return "(" + ("=" === n4[0] ? "" : ">" === n4[0] === l3 ? "max-" : "min-") + a3 + ":" + ("=" !== n4[0] && 1 === n4.length ? c3.replace(f, (e6, t5, r4) => Number(t5) + s3 * (">" === n4 ? 1 : -1) + r4) : c3) + (i3 ? ") and (" + (">" === i3[0] ? "min-" : "max-") + a3 + ":" + (1 === i3.length ? o3.replace(f, (e6, t5, n5) => Number(t5) + s3 * (">" === i3 ? -1 : 1) + n5) : o3) : "") + ")";
+          })), z3) {
+            const e5 = x2 ? n3.concat(c2) : [...n3], r3 = x2 ? [...t3] : m(t3, c2.split(B));
+            void 0 !== o2 && i2(I(...o2)), o2 = void 0, a2(d2, r3, e5);
+          } else
+            void 0 === o2 && (o2 = [[], t3, n3]), c2 = x2 || 36 !== c2.charCodeAt(0) ? c2 : `--${k(r2.prefix)}${c2.slice(1).replace(/\$/g, "-")}`, d2 = z3 ? d2 : "number" == typeof d2 ? d2 && e4 in R ? String(d2) + "px" : String(d2) : y(b(e4, null == d2 ? "" : d2), r2.prefix, r2.themeMap[e4]), o2[0].push(`${x2 ? `${c2} ` : `${g(c2)}:`}${d2}`);
+        }
+      }
+      var u2, S2;
+    };
+    p2(e2), void 0 !== o2 && i2(I(...o2)), o2 = void 0;
+  };
+  a2(e, t2, n2);
+};
+var I = (e, t2, n2) => `${n2.map((e2) => `${e2}{`).join("")}${t2.length ? `${t2.join(",")}{` : ""}${e.join(";")}${t2.length ? "}" : ""}${Array(n2.length ? n2.length + 1 : 0).join("}")}`;
+var R = { animationDelay: 1, animationDuration: 1, backgroundSize: 1, blockSize: 1, border: 1, borderBlock: 1, borderBlockEnd: 1, borderBlockEndWidth: 1, borderBlockStart: 1, borderBlockStartWidth: 1, borderBlockWidth: 1, borderBottom: 1, borderBottomLeftRadius: 1, borderBottomRightRadius: 1, borderBottomWidth: 1, borderEndEndRadius: 1, borderEndStartRadius: 1, borderInlineEnd: 1, borderInlineEndWidth: 1, borderInlineStart: 1, borderInlineStartWidth: 1, borderInlineWidth: 1, borderLeft: 1, borderLeftWidth: 1, borderRadius: 1, borderRight: 1, borderRightWidth: 1, borderSpacing: 1, borderStartEndRadius: 1, borderStartStartRadius: 1, borderTop: 1, borderTopLeftRadius: 1, borderTopRightRadius: 1, borderTopWidth: 1, borderWidth: 1, bottom: 1, columnGap: 1, columnRule: 1, columnRuleWidth: 1, columnWidth: 1, containIntrinsicSize: 1, flexBasis: 1, fontSize: 1, gap: 1, gridAutoColumns: 1, gridAutoRows: 1, gridTemplateColumns: 1, gridTemplateRows: 1, height: 1, inlineSize: 1, inset: 1, insetBlock: 1, insetBlockEnd: 1, insetBlockStart: 1, insetInline: 1, insetInlineEnd: 1, insetInlineStart: 1, left: 1, letterSpacing: 1, margin: 1, marginBlock: 1, marginBlockEnd: 1, marginBlockStart: 1, marginBottom: 1, marginInline: 1, marginInlineEnd: 1, marginInlineStart: 1, marginLeft: 1, marginRight: 1, marginTop: 1, maxBlockSize: 1, maxHeight: 1, maxInlineSize: 1, maxWidth: 1, minBlockSize: 1, minHeight: 1, minInlineSize: 1, minWidth: 1, offsetDistance: 1, offsetRotate: 1, outline: 1, outlineOffset: 1, outlineWidth: 1, overflowClipMargin: 1, padding: 1, paddingBlock: 1, paddingBlockEnd: 1, paddingBlockStart: 1, paddingBottom: 1, paddingInline: 1, paddingInlineEnd: 1, paddingInlineStart: 1, paddingLeft: 1, paddingRight: 1, paddingTop: 1, perspective: 1, right: 1, rowGap: 1, scrollMargin: 1, scrollMarginBlock: 1, scrollMarginBlockEnd: 1, scrollMarginBlockStart: 1, scrollMarginBottom: 1, scrollMarginInline: 1, scrollMarginInlineEnd: 1, scrollMarginInlineStart: 1, scrollMarginLeft: 1, scrollMarginRight: 1, scrollMarginTop: 1, scrollPadding: 1, scrollPaddingBlock: 1, scrollPaddingBlockEnd: 1, scrollPaddingBlockStart: 1, scrollPaddingBottom: 1, scrollPaddingInline: 1, scrollPaddingInlineEnd: 1, scrollPaddingInlineStart: 1, scrollPaddingLeft: 1, scrollPaddingRight: 1, scrollPaddingTop: 1, shapeMargin: 1, textDecoration: 1, textDecorationThickness: 1, textIndent: 1, textUnderlineOffset: 1, top: 1, transitionDelay: 1, transitionDuration: 1, verticalAlign: 1, width: 1, wordSpacing: 1 };
+var z = (e) => String.fromCharCode(e + (e > 25 ? 39 : 97));
+var W = (e) => ((e2) => {
+  let t2, n2 = "";
+  for (t2 = Math.abs(e2); t2 > 52; t2 = t2 / 52 | 0)
+    n2 = z(t2 % 52) + n2;
+  return z(t2 % 52) + n2;
+})(((e2, t2) => {
+  let n2 = t2.length;
+  for (; n2; )
+    e2 = 33 * e2 ^ t2.charCodeAt(--n2);
+  return e2;
+})(5381, JSON.stringify(e)) >>> 0);
+var j = ["themed", "global", "styled", "onevar", "resonevar", "allvar", "inline"];
+var E = (e) => {
+  if (e.href && !e.href.startsWith(location.origin))
+    return false;
+  try {
+    return !!e.cssRules;
+  } catch (e2) {
+    return false;
+  }
+};
+var T = (e) => {
+  let t2;
+  const n2 = () => {
+    const { cssRules: e2 } = t2.sheet;
+    return [].map.call(e2, (n3, r3) => {
+      const { cssText: i2 } = n3;
+      let o2 = "";
+      if (i2.startsWith("--sxs"))
+        return "";
+      if (e2[r3 - 1] && (o2 = e2[r3 - 1].cssText).startsWith("--sxs")) {
+        if (!n3.cssRules.length)
+          return "";
+        for (const e3 in t2.rules)
+          if (t2.rules[e3].group === n3)
+            return `--sxs{--sxs:${[...t2.rules[e3].cache].join(" ")}}${i2}`;
+        return n3.cssRules.length ? `${o2}${i2}` : "";
+      }
+      return i2;
+    }).join("");
+  }, r2 = () => {
+    if (t2) {
+      const { rules: e2, sheet: n3 } = t2;
+      if (!n3.deleteRule) {
+        for (; 3 === Object(Object(n3.cssRules)[0]).type; )
+          n3.cssRules.splice(0, 1);
+        n3.cssRules = [];
+      }
+      for (const t3 in e2)
+        delete e2[t3];
+    }
+    const i2 = Object(e).styleSheets || [];
+    for (const e2 of i2)
+      if (E(e2)) {
+        for (let i3 = 0, o3 = e2.cssRules; o3[i3]; ++i3) {
+          const l3 = Object(o3[i3]);
+          if (1 !== l3.type)
+            continue;
+          const s2 = Object(o3[i3 + 1]);
+          if (4 !== s2.type)
+            continue;
+          ++i3;
+          const { cssText: a2 } = l3;
+          if (!a2.startsWith("--sxs"))
+            continue;
+          const c2 = a2.slice(14, -3).trim().split(/\s+/), d2 = j[c2[0]];
+          d2 && (t2 || (t2 = { sheet: e2, reset: r2, rules: {}, toString: n2 }), t2.rules[d2] = { group: s2, index: i3, cache: new Set(c2) });
+        }
+        if (t2)
+          break;
+      }
+    if (!t2) {
+      const i3 = (e2, t3) => ({ type: t3, cssRules: [], insertRule(e3, t4) {
+        this.cssRules.splice(t4, 0, i3(e3, { import: 3, undefined: 1 }[(e3.toLowerCase().match(/^@([a-z]+)/) || [])[1]] || 4));
+      }, get cssText() {
+        return "@media{}" === e2 ? `@media{${[].map.call(this.cssRules, (e3) => e3.cssText).join("")}}` : e2;
+      } });
+      t2 = { sheet: e ? (e.head || e).appendChild(document.createElement("style")).sheet : i3("", "text/css"), rules: {}, reset: r2, toString: n2 };
+    }
+    const { sheet: o2, rules: l2 } = t2;
+    for (let e2 = j.length - 1; e2 >= 0; --e2) {
+      const t3 = j[e2];
+      if (!l2[t3]) {
+        const n3 = j[e2 + 1], r3 = l2[n3] ? l2[n3].index : o2.cssRules.length;
+        o2.insertRule("@media{}", r3), o2.insertRule(`--sxs{--sxs:${e2}}`, r3), l2[t3] = { group: o2.cssRules[r3 + 1], index: r3, cache: /* @__PURE__ */ new Set([e2]) };
+      }
+      v(l2[t3]);
+    }
+  };
+  return r2(), t2;
+};
+var v = (e) => {
+  const t2 = e.group;
+  let n2 = t2.cssRules.length;
+  e.apply = (e2) => {
+    try {
+      t2.insertRule(e2, n2), ++n2;
+    } catch (e3) {
+    }
+  };
+};
+var M = Symbol();
+var w = l();
+var C = (e, t2) => w(e, () => (...n2) => {
+  let r2 = { type: null, composers: /* @__PURE__ */ new Set() };
+  for (const t3 of n2)
+    if (null != t3)
+      if (t3[s]) {
+        null == r2.type && (r2.type = t3[s].type);
+        for (const e2 of t3[s].composers)
+          r2.composers.add(e2);
+      } else
+        t3.constructor !== Object || t3.$$typeof ? null == r2.type && (r2.type = t3) : r2.composers.add(P(t3, e));
+  return null == r2.type && (r2.type = "span"), r2.composers.size || r2.composers.add(["PJLV", {}, [], [], {}, []]), L(e, r2, t2);
+});
+var P = ({ variants: e, compoundVariants: t2, defaultVariants: n2, ...r2 }, i2) => {
+  const o2 = `${k(i2.prefix)}c-${W(r2)}`, l2 = [], s2 = [], a2 = /* @__PURE__ */ Object.create(null), g2 = [];
+  for (const e2 in n2)
+    a2[e2] = String(n2[e2]);
+  if ("object" == typeof e && e)
+    for (const t3 in e) {
+      p2 = a2, u2 = t3, d.call(p2, u2) || (a2[t3] = "undefined");
+      const n3 = e[t3];
+      for (const e2 in n3) {
+        const r3 = { [t3]: String(e2) };
+        "undefined" === String(e2) && g2.push(t3);
+        const i3 = n3[e2], o3 = [r3, i3, !c(i3)];
+        l2.push(o3);
+      }
+    }
+  var p2, u2;
+  if ("object" == typeof t2 && t2)
+    for (const e2 of t2) {
+      let { css: t3, ...n3 } = e2;
+      t3 = "object" == typeof t3 && t3 || {};
+      for (const e3 in n3)
+        n3[e3] = String(n3[e3]);
+      const r3 = [n3, t3, !c(t3)];
+      s2.push(r3);
+    }
+  return [o2, r2, l2, s2, a2, g2];
+};
+var L = (e, t2, n2) => {
+  const [r2, i2, o2, l2] = O(t2.composers), c2 = "function" == typeof t2.type || t2.type.$$typeof ? ((e2) => {
+    function t3() {
+      for (let n3 = 0; n3 < t3[M].length; n3++) {
+        const [r3, i3] = t3[M][n3];
+        e2.rules[r3].apply(i3);
+      }
+      return t3[M] = [], null;
+    }
+    return t3[M] = [], t3.rules = {}, j.forEach((e3) => t3.rules[e3] = { apply: (n3) => t3[M].push([e3, n3]) }), t3;
+  })(n2) : null, d2 = (c2 || n2).rules, g2 = `.${r2}${i2.length > 1 ? `:where(.${i2.slice(1).join(".")})` : ""}`, p2 = (s2) => {
+    s2 = "object" == typeof s2 && s2 || D;
+    const { css: a2, ...p3 } = s2, u2 = {};
+    for (const e2 in o2)
+      if (delete p3[e2], e2 in s2) {
+        let t3 = s2[e2];
+        "object" == typeof t3 && t3 ? u2[e2] = { "@initial": o2[e2], ...t3 } : (t3 = String(t3), u2[e2] = "undefined" !== t3 || l2.has(e2) ? t3 : o2[e2]);
+      } else
+        u2[e2] = o2[e2];
+    const h2 = /* @__PURE__ */ new Set([...i2]);
+    for (const [r3, i3, o3, l3] of t2.composers) {
+      n2.rules.styled.cache.has(r3) || (n2.rules.styled.cache.add(r3), x(i3, [`.${r3}`], [], e, (e2) => {
+        d2.styled.apply(e2);
+      }));
+      const t3 = A(o3, u2, e.media), s3 = A(l3, u2, e.media, true);
+      for (const i4 of t3)
+        if (void 0 !== i4)
+          for (const [t4, o4, l4] of i4) {
+            const i5 = `${r3}-${W(o4)}-${t4}`;
+            h2.add(i5);
+            const s4 = (l4 ? n2.rules.resonevar : n2.rules.onevar).cache, a3 = l4 ? d2.resonevar : d2.onevar;
+            s4.has(i5) || (s4.add(i5), x(o4, [`.${i5}`], [], e, (e2) => {
+              a3.apply(e2);
+            }));
+          }
+      for (const t4 of s3)
+        if (void 0 !== t4)
+          for (const [i4, o4] of t4) {
+            const t5 = `${r3}-${W(o4)}-${i4}`;
+            h2.add(t5), n2.rules.allvar.cache.has(t5) || (n2.rules.allvar.cache.add(t5), x(o4, [`.${t5}`], [], e, (e2) => {
+              d2.allvar.apply(e2);
+            }));
+          }
+    }
+    if ("object" == typeof a2 && a2) {
+      const t3 = `${r2}-i${W(a2)}-css`;
+      h2.add(t3), n2.rules.inline.cache.has(t3) || (n2.rules.inline.cache.add(t3), x(a2, [`.${t3}`], [], e, (e2) => {
+        d2.inline.apply(e2);
+      }));
+    }
+    for (const e2 of String(s2.className || "").trim().split(/\s+/))
+      e2 && h2.add(e2);
+    const f2 = p3.className = [...h2].join(" ");
+    return { type: t2.type, className: f2, selector: g2, props: p3, toString: () => f2, deferredInjector: c2 };
+  };
+  return a(p2, { className: r2, selector: g2, [s]: t2, toString: () => (n2.rules.styled.cache.has(r2) || p2(), r2) });
+};
+var O = (e) => {
+  let t2 = "";
+  const n2 = [], r2 = {}, i2 = [];
+  for (const [o2, , , , l2, s2] of e) {
+    "" === t2 && (t2 = o2), n2.push(o2), i2.push(...s2);
+    for (const e2 in l2) {
+      const t3 = l2[e2];
+      (void 0 === r2[e2] || "undefined" !== t3 || s2.includes(t3)) && (r2[e2] = t3);
+    }
+  }
+  return [t2, n2, r2, new Set(i2)];
+};
+var A = (e, t2, n2, r2) => {
+  const i2 = [];
+  e:
+    for (let [o2, l2, s2] of e) {
+      if (s2)
+        continue;
+      let e2, a2 = 0, c2 = false;
+      for (e2 in o2) {
+        const r3 = o2[e2];
+        let i3 = t2[e2];
+        if (i3 !== r3) {
+          if ("object" != typeof i3 || !i3)
+            continue e;
+          {
+            let e3, t3, o3 = 0;
+            for (const l3 in i3) {
+              if (r3 === String(i3[l3])) {
+                if ("@initial" !== l3) {
+                  const e4 = l3.slice(1);
+                  (t3 = t3 || []).push(e4 in n2 ? n2[e4] : l3.replace(/^@media ?/, "")), c2 = true;
+                }
+                a2 += o3, e3 = true;
+              }
+              ++o3;
+            }
+            if (t3 && t3.length && (l2 = { ["@media " + t3.join(", ")]: l2 }), !e3)
+              continue e;
+          }
+        }
+      }
+      (i2[a2] = i2[a2] || []).push([r2 ? "cv" : `${e2}-${o2[e2]}`, l2, c2]);
+    }
+  return i2;
+};
+var D = {};
+var H = l();
+var N = (e, t2) => H(e, () => (...n2) => {
+  const r2 = () => {
+    for (let r3 of n2) {
+      r3 = "object" == typeof r3 && r3 || {};
+      let n3 = W(r3);
+      if (!t2.rules.global.cache.has(n3)) {
+        if (t2.rules.global.cache.add(n3), "@import" in r3) {
+          let e2 = [].indexOf.call(t2.sheet.cssRules, t2.rules.themed.group) - 1;
+          for (let n4 of [].concat(r3["@import"]))
+            n4 = n4.includes('"') || n4.includes("'") ? n4 : `"${n4}"`, t2.sheet.insertRule(`@import ${n4};`, e2++);
+          delete r3["@import"];
+        }
+        x(r3, [], [], e, (e2) => {
+          t2.rules.global.apply(e2);
+        });
+      }
+    }
+    return "";
+  };
+  return a(r2, { toString: r2 });
+});
+var V = l();
+var G = (e, t2) => V(e, () => (n2) => {
+  const r2 = `${k(e.prefix)}k-${W(n2)}`, i2 = () => {
+    if (!t2.rules.global.cache.has(r2)) {
+      t2.rules.global.cache.add(r2);
+      const i3 = [];
+      x(n2, [], [], e, (e2) => i3.push(e2));
+      const o2 = `@keyframes ${r2}{${i3.join("")}}`;
+      t2.rules.global.apply(o2);
+    }
+    return r2;
+  };
+  return a(i2, { get name() {
+    return i2();
+  }, toString: i2 });
+});
+var F = class {
+  constructor(e, t2, n2, r2) {
+    this.token = null == e ? "" : String(e), this.value = null == t2 ? "" : String(t2), this.scale = null == n2 ? "" : String(n2), this.prefix = null == r2 ? "" : String(r2);
+  }
+  get computedValue() {
+    return "var(" + this.variable + ")";
+  }
+  get variable() {
+    return "--" + k(this.prefix) + k(this.scale) + this.token;
+  }
+  toString() {
+    return this.computedValue;
+  }
+};
+var J = l();
+var U = (e, t2) => J(e, () => (n2, r2) => {
+  r2 = "object" == typeof n2 && n2 || Object(r2);
+  const i2 = `.${n2 = (n2 = "string" == typeof n2 ? n2 : "") || `${k(e.prefix)}t-${W(r2)}`}`, o2 = {}, l2 = [];
+  for (const t3 in r2) {
+    o2[t3] = {};
+    for (const n3 in r2[t3]) {
+      const i3 = `--${k(e.prefix)}${t3}-${n3}`, s3 = y(String(r2[t3][n3]), e.prefix, t3);
+      o2[t3][n3] = new F(n3, s3, t3, e.prefix), l2.push(`${i3}:${s3}`);
+    }
+  }
+  const s2 = () => {
+    if (l2.length && !t2.rules.themed.cache.has(n2)) {
+      t2.rules.themed.cache.add(n2);
+      const i3 = `${r2 === e.theme ? ":root," : ""}.${n2}{${l2.join(";")}}`;
+      t2.rules.themed.apply(i3);
+    }
+    return n2;
+  };
+  return { ...o2, get className() {
+    return s2();
+  }, selector: i2, toString: s2 };
+});
+var Z = l();
+var X = (e) => {
+  let t2 = false;
+  const n2 = Z(e, (e2) => {
+    t2 = true;
+    const n3 = "prefix" in (e2 = "object" == typeof e2 && e2 || {}) ? String(e2.prefix) : "", r2 = "object" == typeof e2.media && e2.media || {}, o2 = "object" == typeof e2.root ? e2.root || null : globalThis.document || null, l2 = "object" == typeof e2.theme && e2.theme || {}, s2 = { prefix: n3, media: r2, theme: l2, themeMap: "object" == typeof e2.themeMap && e2.themeMap || { ...i }, utils: "object" == typeof e2.utils && e2.utils || {} }, a2 = T(o2), c2 = { css: C(s2, a2), globalCss: N(s2, a2), keyframes: G(s2, a2), createTheme: U(s2, a2), reset() {
+      a2.reset(), c2.theme.toString();
+    }, theme: {}, sheet: a2, config: s2, prefix: n3, getCssText: a2.toString, toString: a2.toString };
+    return String(c2.theme = c2.createTheme(l2)), c2;
+  });
+  return t2 || n2.reset(), n2;
+};
+
+// ../core/dist/index.mjs
+var loadScript = (src) => {
+  return new Promise((resolve, reject) => {
+    let script = document.createElement("script");
+    script.src = src;
+    script.onload = resolve;
+    script.onerror = reject;
+    script.defer = true;
+    document.body.appendChild(script);
+  });
+};
+var isReactNative = typeof navigator === "object" && navigator.product === "ReactNative";
+var isBrowser2 = typeof window !== "undefined" && !isReactNative;
+var isIframe = isBrowser2 && window.top !== window.self;
+function merge(target, source) {
+  let t2 = { ...target || {} };
+  for (let key of Object.keys(source)) {
+    if (source[key] instanceof Object && !Array.isArray(source[key])) {
+      Object.assign(source[key], merge(t2[key], source[key]));
+    }
+  }
+  Object.assign(t2 || {}, source);
+  return t2;
+}
+var stitchesUtils = {
+  // Abbreviated margin properties
+  m: (value) => ({
+    margin: value
+  }),
+  mt: (value) => ({
+    marginTop: value
+  }),
+  mr: (value) => ({
+    marginRight: value
+  }),
+  mb: (value) => ({
+    marginBottom: value
+  }),
+  ml: (value) => ({
+    marginLeft: value
+  }),
+  mx: (value) => ({
+    marginLeft: value,
+    marginRight: value
+  }),
+  my: (value) => ({
+    marginTop: value,
+    marginBottom: value
+  }),
+  // A property for applying width/height together
+  size: (value) => ({
+    width: value,
+    height: value
+  }),
+  // Abbreviated padding properties
+  px: (value) => ({
+    paddingLeft: value,
+    paddingRight: value
+  }),
+  py: (value) => ({
+    paddingTop: value,
+    paddingBottom: value
+  })
+};
+var WeaverseItemStore = class {
+  constructor(itemData, weaverse) {
+    this.listeners = /* @__PURE__ */ new Set();
+    this.ref = {
+      current: null
+    };
+    this.stitchesClass = "";
+    this._data = { id: "", type: "" };
+    this.setData = (data) => {
+      this.data = Object.assign(this.data, data);
+      this.triggerUpdate();
+      return this.data;
+    };
+    this.subscribe = (fn) => {
+      this.listeners.add(fn);
+    };
+    this.unsubscribe = (fn) => {
+      this.listeners.delete(fn);
+    };
+    this.triggerUpdate = () => {
+      this.listeners.forEach((fn) => {
+        return fn(this.data);
+      });
+    };
+    let { type, id } = itemData;
+    this.weaverse = weaverse;
+    if (id && type) {
+      weaverse.itemInstances.set(id, this);
+      this.data = { ...itemData };
+    }
+  }
+  get _id() {
+    return this._data.id;
+  }
+  get _element() {
+    return this.ref.current;
+  }
+  get _flags() {
+    return this.Element?.schema?.flags || {};
+  }
+  get Element() {
+    return this.weaverse.elementInstances.get(this._data.type);
+  }
+  set data(data) {
+    this._data = { ...this.data, ...data };
+  }
+  get data() {
+    let defaultCss = this.Element?.defaultCss || {};
+    let currentCss = this._data.css || {};
+    let css = merge(defaultCss, currentCss);
+    let defaultData = { ...this.Element?.Component?.defaultProps };
+    return { ...defaultData, ...this._data, css };
+  }
+};
+var Weaverse = class {
+  /**
+   * constructor
+   * @param weaverseHost {string} Weaverse base URL that can provide by user/developer. for local development, use localhost:3000
+   * @param projectId {string} Weaverse project key to access project data via API
+   * @param data {WeaverseProjectDataType} Weaverse project data, by default, user can provide project data via React Component.
+   * @param mediaBreakPoints {object} Pass down custom media query breakpoints or just use the default.
+   * @param isDesignMode {boolean} check whether the sdk is isDesignMode or not
+   * @param ssrMode {boolean} Use in element to optionally render special HTML for hydration
+   * @param elementSchemas {Array<ElementSchema>} List of element schemas
+   * @param platformType {PlatformTypeEnum} Check the platform, shopify-section or react-ssr(hydrogen)
+   */
+  constructor({
+    weaverseHost,
+    weaverseVersion,
+    projectId,
+    data,
+    mediaBreakPoints,
+    isDesignMode,
+    ssrMode,
+    elementSchemas,
+    platformType,
+    pageId
+  } = {}) {
+    this.elementInstances = /* @__PURE__ */ new Map();
+    this.itemInstances = /* @__PURE__ */ new Map();
+    this.weaverseHost = "https://studio.weaverse.io";
+    this.weaverseVersion = "";
+    this.projectId = "";
+    this.pageId = "";
+    this.data = {
+      rootId: "",
+      items: [],
+      script: { css: "", js: "" }
+    };
+    this.listeners = /* @__PURE__ */ new Set();
+    this.isDesignMode = false;
+    this.platformType = "shopify-section";
+    this.isPreviewMode = false;
+    this.ssrMode = false;
+    this.mediaBreakPoints = {
+      desktop: "all",
+      // max-width need to subtract 0.02px to prevent bug https://getbootstrap.com/docs/5.1/layout/breakpoints/#max-width
+      // tablet: "(max-width: 1023.98px)", // to set css for tablet, {'@tablet' : { // css }},
+      mobile: "(max-width: 767.98px)"
+    };
+    this.initStitches = (externalConfig = {}) => {
+      this.stitchesInstance = this.stitchesInstance || X({
+        prefix: "weaverse",
+        media: this.mediaBreakPoints,
+        utils: stitchesUtils,
+        ...externalConfig
+      });
+    };
+    this.init({
+      weaverseHost,
+      weaverseVersion,
+      projectId,
+      data,
+      platformType,
+      mediaBreakPoints,
+      isDesignMode,
+      ssrMode,
+      elementSchemas,
+      pageId
+    });
+  }
+  init({
+    weaverseHost,
+    weaverseVersion,
+    elementSchemas,
+    platformType,
+    projectId,
+    data,
+    mediaBreakPoints,
+    isDesignMode,
+    ssrMode,
+    pageId
+  } = {}) {
+    this.elementSchemas = elementSchemas || this.elementSchemas;
+    this.weaverseHost = weaverseHost || this.weaverseHost;
+    this.weaverseVersion = weaverseVersion || this.weaverseVersion;
+    this.projectId = projectId || this.projectId;
+    this.pageId = pageId || this.pageId;
+    this.mediaBreakPoints = mediaBreakPoints || this.mediaBreakPoints;
+    this.isDesignMode = isDesignMode || this.isDesignMode;
+    this.ssrMode = ssrMode || this.ssrMode;
+    this.platformType = platformType || this.platformType;
+    this.data = data || this.data;
+    this.initProjectItemData();
+    this.initStitches();
+  }
+  /**
+   * Register the custom React Component to Weaverse, store it into Weaverse.elementInstances
+   * @param element {WeaverseElement} custom React Component
+   */
+  registerElement(element) {
+    if (element?.type) {
+      if (!this.elementInstances.has(element.type)) {
+        this.elementInstances.set(element?.type, element);
+      }
+    } else {
+      console.error("Weaverse: registerElement: `type` is required");
+    }
+  }
+  subscribe(fn) {
+    this.listeners.add(fn);
+  }
+  unsubscribe(fn) {
+    this.listeners.delete(fn);
+  }
+  triggerUpdate() {
+    this.listeners.forEach((fn) => fn());
+  }
+  refreshAllItems() {
+    this.itemInstances.forEach((item) => {
+      item.triggerUpdate();
+    });
+  }
+  setProjectData(data) {
+    this.data = data;
+    this.initProjectItemData();
+    this.triggerUpdate();
+  }
+  initProjectItemData() {
+    const data = this.data;
+    if (data?.items) {
+      data.items.forEach((item) => {
+        if (!this.itemInstances.get(item.id)) {
+          new WeaverseItemStore(item, this);
+        }
+      });
+    }
+  }
+};
+Weaverse.WeaverseItemStore = WeaverseItemStore;
+
+// src/utils.ts
+import { useEffect } from "react";
+var useStudio = (weaverseCore) => {
+  useEffect(() => {
+    if (weaverseCore.isDesignMode && isIframe && !window.weaverseStudioInitialized) {
+      window.weaverseStudioInitialized = true;
+      let host = weaverseCore.weaverseHost;
+      let version = Date.now();
+      loadScript(`${host}/assets/studio/studio-bridge.js?v=${version}`).then(
+        () => {
+          window?.createWeaverseStudioBridge(weaverseCore);
+          setTimeout(() => {
+            weaverseCore.triggerUpdate();
+          }, 2e3);
+        }
+      );
+    }
+    setTimeout(() => {
+      window.__weaverse = weaverseCore;
+    }, 1);
+  }, []);
+};
+
 // src/weaverse-loader.ts
-import {
-  CacheShort,
-  generateCacheControlHeader
-} from "@shopify/hydrogen";
+import { CacheShort, generateCacheControlHeader } from "@shopify/hydrogen";
 function hashKey(queryKey) {
   const rawKeys = Array.isArray(queryKey) ? queryKey : [queryKey];
   let hash = "";
@@ -88,6 +740,7 @@ function hashKey(queryKey) {
   }
   return hash;
 }
+var cacheControl = generateCacheControlHeader(CacheShort());
 var fetchWithServerCache = async ({
   url,
   options = {},
@@ -99,10 +752,6 @@ var fetchWithServerCache = async ({
   const cacheKey = new Request(cacheUrl.toString());
   let response = await storefront.cache.match(cacheKey);
   if (!response) {
-    let cacheControl = generateCacheControlHeader({
-      ...CacheShort()
-    });
-    console.log("fetchWithServerCache", cacheControl);
     response = await fetch(url, {
       ...options,
       headers: {
@@ -114,12 +763,23 @@ var fetchWithServerCache = async ({
   }
   return response;
 };
+function getRequestQueries(request) {
+  let url = new URL(request.url);
+  return Array.from(url.searchParams.entries()).reduce(
+    (q, [k2, v2]) => {
+      q[k2] = v2 === "true" ? true : v2 === "false" ? false : v2;
+      return q;
+    },
+    {}
+  );
+}
 async function weaverseLoader({
   request,
   context: { env, storefront, waitUntil },
   context,
   params
 }, components) {
+  let queries = getRequestQueries(request);
   let projectId = env?.WEAVERSE_PROJECT_ID;
   let weaverseHost = env?.WEAVERSE_HOST;
   if (!projectId || !weaverseHost) {
@@ -128,11 +788,8 @@ async function weaverseLoader({
   }
   let config = {
     projectId,
-    weaverseHost
-  };
-  let fetchBody = {
-    projectId,
-    url: request.url
+    weaverseHost,
+    ...queries
   };
   try {
     let pageData = await fetchWithServerCache({
@@ -142,12 +799,15 @@ async function weaverseLoader({
         headers: {
           "Content-Type": "application/json"
         },
-        body: JSON.stringify(fetchBody)
+        body: JSON.stringify({
+          projectId,
+          url: request.url
+        })
       },
       storefront,
       waitUntil
-    }).then((r) => r.json()).catch((err) => {
-      console.error(err);
+    }).then((r2) => r2.json()).catch((err) => {
+      console.log(`\u274C Error fetching page data: ${err?.toString()}`);
       return {};
     });
     if (pageData?.items) {
@@ -183,22 +843,19 @@ async function weaverseLoader({
 }
 
 // src/index.tsx
-var WeaverseHydrogenRoot = memo(
-  ({
-    components,
-    data
-  }) => {
-    let weaverse = createWeaverseHydrogenContext(data, components);
-    useStudio(weaverse);
-    if (!weaverse?.data) {
-      return /* @__PURE__ */ React.createElement("div", null, "404");
-    }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse }), weaverse.isDesignMode ? null : /* @__PURE__ */ React.createElement(StitchesStyle, { weaverse }));
+var WeaverseHydrogenRoot = ({
+  components,
+  data
+}) => {
+  let weaverse = createWeaverseHydrogenContext(data, components);
+  useStudio(weaverse);
+  if (!weaverse?.data) {
+    return /* @__PURE__ */ React.createElement("div", null, "404");
   }
-);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(WeaverseRoot, { context: weaverse }), weaverse.isDesignMode ? null : /* @__PURE__ */ React.createElement(StitchesStyle, { weaverse }));
+};
 var StitchesStyle = memo(
   ({ weaverse }) => {
-    console.log("stitches", weaverse.stitchesInstance?.getCssText());
     return /* @__PURE__ */ React.createElement(
       "style",
       {
@@ -216,6 +873,7 @@ var StitchesStyle = memo(
 export {
   WeaverseHydrogenRoot,
   fetchWithServerCache,
+  getRequestQueries,
   hashKey,
   useStudio,
   weaverseLoader