@weaverse/react 0.7.26 → 0.7.28

package/dist/index.js

@@ -27,8 +27,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  Components: () => Components,
   Elements: () => Elements,
-  SharedComponents: () => SharedComponents,
   WeaverseContext: () => WeaverseContext,
   WeaverseContextConsumer: () => WeaverseContextConsumer,
   WeaverseContextProvider: () => WeaverseContextProvider,
@@ -36,28 +36,17 @@ __export(src_exports, {
   createRootContext: () => createRootContext
 });
 module.exports = __toCommonJS(src_exports);
-
-// src/elements/button.tsx
-var React = __toESM(require("react"));
-var import_react2 = require("react");
+__reExport(src_exports, require("@weaverse/core"), module.exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react = require("react");
-var createRootContext = (configs) => {
-  let rootContext = new import_core.Weaverse(configs);
-  Object.keys(Elements).forEach((key) => {
-    rootContext.registerElement(Elements[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = (0, import_react.createContext)({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
+var import_react14 = require("react");
 
-// src/elements/button.tsx
+// src/elements/Button.tsx
+var React = __toESM(require("react"));
+var import_react = require("react");
 var Button = React.forwardRef((props, ref) => {
-  let { isDesignMode } = (0, import_react2.useContext)(WeaverseContext);
+  let { isDesignMode } = (0, import_react.useContext)(WeaverseContext);
   let { text, clickAction, linkTo, openInNewTab, ...rest } = props;
   if (clickAction && linkTo) {
     return /* @__PURE__ */ React.createElement("a", {
@@ -91,14 +80,14 @@ var css = {
     textDecoration: "none"
   }
 };
-var button_default = Button;
+var Button_default = Button;
 
-// src/elements/container.tsx
-var import_react3 = __toESM(require("react"));
-var Container = (0, import_react3.forwardRef)(
+// src/elements/Container.tsx
+var import_react2 = __toESM(require("react"));
+var Container = (0, import_react2.forwardRef)(
   (props, ref) => {
     let { children, ...rest } = props;
-    return /* @__PURE__ */ import_react3.default.createElement("div", {
+    return /* @__PURE__ */ import_react2.default.createElement("div", {
       ref,
       ...rest
     }, children);
@@ -119,45 +108,92 @@ var css2 = {
   }
 };
 Container.defaultProps = {};
-var container_default = Container;
-
-// src/elements/countdown/index.tsx
-var import_react5 = __toESM(require("react"));
+var Container_default = Container;
 
-// src/elements/countdown/timer-block.tsx
+// src/elements/Countdown/index.tsx
 var import_react4 = __toESM(require("react"));
-function TimerBlock({ value, label }) {
-  return /* @__PURE__ */ import_react4.default.createElement("div", {
-    className: "wv-cd-block"
-  }, /* @__PURE__ */ import_react4.default.createElement("div", {
-    className: "wv-cd-number"
-  }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react4.default.createElement("div", {
-    className: "wv-cd-label"
-  }, label));
+
+// src/constant/index.ts
+var TIMES = ["days", "hours", "minutes", "seconds"];
+var COUNTDOWN_KEY = "wv-cd-evergreen-start";
+var INSTAGRAM_API = "https://graph.instagram.com";
+
+// src/utils/css.ts
+function shortCssObject(css10) {
+  return {
+    "@desktop": css10["@desktop"],
+    "@mobile": css10["@mobile"]
+  };
+}
+var permanentClasses = {};
+function generateItemClass(instance, stitchesInstance) {
+  let { css: css10, type, className: cls = "" } = instance.data;
+  let className = "";
+  let permanentClass = "";
+  let perCss = instance.Element?.permanentCss;
+  if (perCss) {
+    if (type in permanentClasses) {
+      permanentClass = permanentClasses[type];
+    } else {
+      let { className: perCls } = stitchesInstance.css(perCss)();
+      Object.assign(permanentClasses, { [type]: perCls });
+      permanentClass = perCls;
+    }
+  }
+  className = permanentClass;
+  if (css10) {
+    let formattedCss = shortCssObject(css10);
+    let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
+    let { stitchesClass } = instance;
+    let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
+    className = `${permanentClass} ${cls} ${newClass} ${otherClass}`.trim();
+    instance.stitchesClass = newClass;
+  }
+  return className;
 }
 
-// src/elements/countdown/utils.ts
-var times = ["days", "hours", "minutes", "seconds"];
+// src/utils/index.ts
 function getTime(_seconds) {
-  const ONE_MINUTE = 60 * 1e3;
-  const ONE_HOUR = 60 * ONE_MINUTE;
-  const ONE_DAY = 24 * ONE_HOUR;
-  const days = Math.floor(_seconds / ONE_DAY);
-  const hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
-  const minutes = Math.floor(
+  let ONE_MINUTE = 60 * 1e3;
+  let ONE_HOUR = 60 * ONE_MINUTE;
+  let ONE_DAY = 24 * ONE_HOUR;
+  let days = Math.floor(_seconds / ONE_DAY);
+  let hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
+  let minutes = Math.floor(
     (_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE
   );
-  const seconds = Math.floor(
+  let seconds = Math.floor(
     (_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3
   );
   return { days, hours, minutes, seconds };
 }
+function getYoutubeEmbedId(url) {
+  const match = url.match(
+    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/
+  );
+  return match ? match[1] : null;
+}
+function getVimeoId(url) {
+  const match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);
+  return match ? match[1] : null;
+}
 
-// src/elements/countdown/index.tsx
-var countdownKey = "wv-cd-evergreen-start";
-var Countdown = (0, import_react5.forwardRef)(
+// src/elements/Countdown/TimerBlock.tsx
+var import_react3 = __toESM(require("react"));
+function TimerBlock({ value, label }) {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "wv-cd-block"
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "wv-cd-number"
+  }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "wv-cd-label"
+  }, label));
+}
+
+// src/elements/Countdown/index.tsx
+var Countdown = (0, import_react4.forwardRef)(
   (props, ref) => {
-    const { isDesignMode } = (0, import_react5.useContext)(WeaverseContext);
+    const { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
     let {
       timerType,
       startTime: startTimeProp,
@@ -169,7 +205,7 @@ var Countdown = (0, import_react5.forwardRef)(
       showLabel,
       ...rest
     } = props;
-    const [remaining, setRemaining] = import_react5.default.useState(0);
+    const [remaining, setRemaining] = import_react4.default.useState(0);
     let periods = periodsProp * 60 * 1e3;
     const handleEnd = () => {
       if (!isDesignMode && redirectUrl)
@@ -178,16 +214,16 @@ var Countdown = (0, import_react5.forwardRef)(
     const getStartTime = () => {
       let startTime = startTimeProp;
       if (timerType === "evergreen") {
-        const start = localStorage.getItem(countdownKey);
+        const start = localStorage.getItem(COUNTDOWN_KEY);
         if (start) {
           startTime = Number.parseInt(start);
           if (startTime + periods < Date.now()) {
             startTime = Date.now();
-            localStorage.setItem(countdownKey, startTime.toString());
+            localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
           }
         } else {
           startTime = Date.now();
-          localStorage.setItem(countdownKey, startTime.toString());
+          localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
         }
       }
       return startTime;
@@ -203,7 +239,7 @@ var Countdown = (0, import_react5.forwardRef)(
       }
       setRemaining(remainingTime);
     };
-    (0, import_react5.useEffect)(() => {
+    (0, import_react4.useEffect)(() => {
       let intervalFlag = setInterval(
         handleRemaining,
         1e3
@@ -213,16 +249,16 @@ var Countdown = (0, import_react5.forwardRef)(
       };
     }, [startTimeProp, endTimeProp, periods, timerType]);
     const timer = getTime(remaining);
-    return /* @__PURE__ */ import_react5.default.createElement("div", {
+    return /* @__PURE__ */ import_react4.default.createElement("div", {
       ref,
       ...rest
-    }, times.map((time) => {
-      return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, {
+    }, TIMES.map((time) => {
+      return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, {
         key: time
-      }, /* @__PURE__ */ import_react5.default.createElement(TimerBlock, {
+      }, /* @__PURE__ */ import_react4.default.createElement(TimerBlock, {
         label: showLabel ? time : "",
         value: remaining === 0 ? "--" : timer[time]
-      }), time !== "seconds" && /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("span", {
+      }), time !== "seconds" && /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement("span", {
         className: `wv-cd-number ${showColon ? "" : "hidden"}`
       }, ":")));
     }));
@@ -264,11 +300,11 @@ Countdown.defaultProps = {
   showLabel: true,
   showColon: true
 };
-var countdown_default = Countdown;
+var Countdown_default = Countdown;
 
-// src/elements/image.tsx
-var import_react6 = __toESM(require("react"));
-var Image = import_react6.default.forwardRef(
+// src/elements/Image.tsx
+var import_react5 = __toESM(require("react"));
+var Image = import_react5.default.forwardRef(
   (props, ref) => {
     let {
       src,
@@ -284,18 +320,18 @@ var Image = import_react6.default.forwardRef(
       "--wv-img-object-fit": objectFit,
       "--wv-img-object-position": objectPosition
     };
-    let content = /* @__PURE__ */ import_react6.default.createElement("img", {
+    let content = /* @__PURE__ */ import_react5.default.createElement("img", {
       alt,
       "data-blink-src": src
     });
     if (onClickAction === "open-link" && linkTo) {
       let target = openLinkInNewTab ? "_blank" : "_self";
-      content = /* @__PURE__ */ import_react6.default.createElement("a", {
+      content = /* @__PURE__ */ import_react5.default.createElement("a", {
         href: linkTo,
         target
       }, content);
     }
-    return /* @__PURE__ */ import_react6.default.createElement("div", {
+    return /* @__PURE__ */ import_react5.default.createElement("div", {
       ref,
       ...rest,
       style
@@ -324,11 +360,11 @@ Image.defaultProps = {
   openLinkInNewTab: false,
   linkTo: ""
 };
-var image_default = Image;
+var Image_default = Image;
 
-// src/elements/layout.tsx
-var import_react7 = __toESM(require("react"));
-var Layout = (0, import_react7.forwardRef)((props, ref) => {
+// src/elements/Layout.tsx
+var import_react6 = __toESM(require("react"));
+var Layout = (0, import_react6.forwardRef)((props, ref) => {
   let {
     children,
     rows,
@@ -349,15 +385,15 @@ var Layout = (0, import_react7.forwardRef)((props, ref) => {
     "--row-size": rowSize + "px",
     "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
   };
-  return /* @__PURE__ */ import_react7.default.createElement("section", {
+  return /* @__PURE__ */ import_react6.default.createElement("section", {
     ref,
     ...rest,
     style
-  }, /* @__PURE__ */ import_react7.default.createElement(LayoutBackground, {
+  }, /* @__PURE__ */ import_react6.default.createElement(LayoutBackground, {
     imgUrl: backgroundImage,
     bgColor: backgroundColor,
     objectFit
-  }), /* @__PURE__ */ import_react7.default.createElement("div", {
+  }), /* @__PURE__ */ import_react6.default.createElement("div", {
     "data-layout-content": true
   }, children));
 });
@@ -367,10 +403,10 @@ var LayoutBackground = (props) => {
     ["--bg-color"]: bgColor,
     ["--object-fit"]: objectFit
   };
-  return imgUrl || bgColor ? /* @__PURE__ */ import_react7.default.createElement("div", {
+  return imgUrl || bgColor ? /* @__PURE__ */ import_react6.default.createElement("div", {
     "data-wv-bg": true,
     style
-  }, imgUrl && /* @__PURE__ */ import_react7.default.createElement("img", {
+  }, imgUrl && /* @__PURE__ */ import_react6.default.createElement("img", {
     width: "100%",
     height: "100%",
     "data-blink-src": imgUrl,
@@ -419,16 +455,16 @@ Layout.defaultProps = {
   gap: 16,
   rowSize: 48
 };
-var layout_default = Layout;
+var Layout_default = Layout;
 
-// src/elements/map.tsx
-var import_react8 = __toESM(require("react"));
-var Map = (0, import_react8.forwardRef)((props, ref) => {
+// src/elements/Map.tsx
+var import_react7 = __toESM(require("react"));
+var Map = (0, import_react7.forwardRef)((props, ref) => {
   let { place, zoom, ...rest } = props;
-  return /* @__PURE__ */ import_react8.default.createElement("div", {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
     ref,
     ...rest
-  }, /* @__PURE__ */ import_react8.default.createElement("iframe", {
+  }, /* @__PURE__ */ import_react7.default.createElement("iframe", {
     loading: "lazy",
     scrolling: "no",
     width: "100%",
@@ -443,9 +479,9 @@ Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
 };
-var map_default = Map;
+var Map_default = Map;
 
-// src/elements/text.tsx
+// src/elements/Text.tsx
 var React8 = __toESM(require("react"));
 var Text = React8.forwardRef(
   (props, ref) => {
@@ -468,30 +504,102 @@ var css7 = {
 Text.defaultProps = {
   value: "The quick brown fox jumps over the lazy dog"
 };
-var text_default = Text;
+var Text_default = Text;
 
-// src/elements/video.tsx
-var import_react9 = __toESM(require("react"));
-var Video = (0, import_react9.forwardRef)((props, ref) => {
-  let { isDesignMode } = (0, import_react9.useContext)(WeaverseContext);
-  let { src, type, controls, poster, autoPlay, loop, muted, ...rest } = props;
-  return /* @__PURE__ */ import_react9.default.createElement("div", {
-    ref,
-    ...rest
-  }, /* @__PURE__ */ import_react9.default.createElement("video", {
-    controls: isDesignMode ? false : controls,
-    autoPlay: isDesignMode ? false : autoPlay,
+// src/elements/Video/index.tsx
+var import_react11 = __toESM(require("react"));
+
+// src/elements/Video/HTMLVideo.tsx
+var import_react8 = __toESM(require("react"));
+function HTMLVideo(props) {
+  let { src, type, controls, autoPlay, loop, muted } = props;
+  return /* @__PURE__ */ import_react8.default.createElement("video", {
+    controls,
+    autoPlay,
     loop,
-    muted: true,
+    muted,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, /* @__PURE__ */ import_react9.default.createElement("source", {
+  }, /* @__PURE__ */ import_react8.default.createElement("source", {
     src,
     type: type || "video/mp4"
-  }), /* @__PURE__ */ import_react9.default.createElement("source", {
+  }), /* @__PURE__ */ import_react8.default.createElement("source", {
     src,
     type: "video/ogg"
-  }), "Your browser does not support the video tag."));
+  }), "Your browser does not support the video tag.");
+}
+
+// src/elements/Video/Vimeo.tsx
+var import_react9 = __toESM(require("react"));
+function Vimeo(props) {
+  let { vimeoId, controls, autoPlay, loop, muted } = props;
+  let params = `autoplay=${autoPlay}&loop=${loop}&controls=${controls}&muted=${muted}`;
+  let vimeoSrc = `https://player.vimeo.com/video/${vimeoId}?${params}`;
+  return /* @__PURE__ */ import_react9.default.createElement("iframe", {
+    src: vimeoSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true
+  });
+}
+
+// src/elements/Video/Youtube.tsx
+var import_react10 = __toESM(require("react"));
+function Youtube(props) {
+  let { youtubeId, controls, autoPlay, loop, muted } = props;
+  let params = new URLSearchParams({
+    autoplay: autoPlay ? "1" : "0",
+    controls: controls ? "1" : "0",
+    loop: loop ? "1" : "0",
+    mute: muted ? "1" : "0"
+  });
+  let youtubeSrc = `https://www.youtube.com/embed/${youtubeId}?${params.toString()}`;
+  let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
+  return /* @__PURE__ */ import_react10.default.createElement("iframe", {
+    src: youtubeSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true,
+    allow
+  });
+}
+
+// src/elements/Video/index.tsx
+var Video = (0, import_react11.forwardRef)((props, ref) => {
+  let { isDesignMode } = (0, import_react11.useContext)(WeaverseContext);
+  let {
+    src,
+    controls,
+    poster,
+    autoPlay: originAutoPlay,
+    loop,
+    muted,
+    ...rest
+  } = props;
+  let autoPlay = !isDesignMode && originAutoPlay;
+  let videoProps = { src, controls, poster, autoPlay, loop, muted };
+  let content;
+  let youtubeId = getYoutubeEmbedId(src);
+  let vimeoId = getVimeoId(src);
+  if (youtubeId) {
+    content = /* @__PURE__ */ import_react11.default.createElement(Youtube, {
+      ...videoProps,
+      youtubeId
+    });
+  } else if (vimeoId) {
+    content = /* @__PURE__ */ import_react11.default.createElement(Vimeo, {
+      ...videoProps,
+      vimeoId
+    });
+  } else {
+    content = /* @__PURE__ */ import_react11.default.createElement(HTMLVideo, {
+      ...videoProps
+    });
+  }
+  return /* @__PURE__ */ import_react11.default.createElement("div", {
+    ref,
+    ...rest
+  }, content);
 });
 var css8 = {
   "@desktop": {
@@ -506,40 +614,38 @@ Video.defaultProps = {
   src: "https://youtu.be/wM-NT6hcw48",
   poster: "https://ucarecdn.com/c413b8fe-ceec-4948-9c42-a0434c4ca920/-/preview/-/quality/smart/-/format/auto/",
   loop: false,
-  type: "video/mp4",
   controls: false,
   autoPlay: true,
   muted: true
 };
-var video_default = Video;
+var Video_default = Video;
 
-// src/elements/instagram.tsx
-var import_react11 = __toESM(require("react"));
+// src/elements/Instagram.tsx
+var import_react13 = __toESM(require("react"));
 
-// src/elements/shared/Placeholder.tsx
-var import_react10 = __toESM(require("react"));
-var Placeholder = (0, import_react10.forwardRef)(
+// src/components/Placeholder.tsx
+var import_react12 = __toESM(require("react"));
+var Placeholder = (0, import_react12.forwardRef)(
   (props, ref) => {
     let { element, children, ...rest } = props;
-    return /* @__PURE__ */ import_react10.default.createElement("div", {
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
       "data-wv-placeholder": true,
       ref,
       ...rest
-    }, /* @__PURE__ */ import_react10.default.createElement("div", {
+    }, /* @__PURE__ */ import_react12.default.createElement("div", {
       style: { fontWeight: 600, marginBottom: "10px" }
-    }, element), /* @__PURE__ */ import_react10.default.createElement("div", null, children));
+    }, element), /* @__PURE__ */ import_react12.default.createElement("div", null, children));
   }
 );
 var Placeholder_default = Placeholder;
 
-// src/elements/instagram.tsx
-var INSTAGRAM_API = "https://graph.instagram.com";
-var Instagram = (0, import_react11.forwardRef)(
+// src/elements/Instagram.tsx
+var Instagram = (0, import_react13.forwardRef)(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = (0, import_react11.useState)([]);
-    let [error, setError] = (0, import_react11.useState)(null);
-    (0, import_react11.useEffect)(() => {
+    let [media, setMedia] = (0, import_react13.useState)([]);
+    let [error, setError] = (0, import_react13.useState)(null);
+    (0, import_react13.useEffect)(() => {
       if (token) {
         let params = new URLSearchParams({
           access_token: token,
@@ -556,10 +662,10 @@ var Instagram = (0, import_react11.forwardRef)(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ import_react11.default.createElement("div", {
+      return /* @__PURE__ */ import_react13.default.createElement("div", {
         ref,
         ...rest
-      }, /* @__PURE__ */ import_react11.default.createElement(Placeholder_default, {
+      }, /* @__PURE__ */ import_react13.default.createElement(Placeholder_default, {
         element: "Instagram"
       }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
@@ -567,27 +673,28 @@ var Instagram = (0, import_react11.forwardRef)(
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ import_react11.default.createElement("div", {
+    return /* @__PURE__ */ import_react13.default.createElement("div", {
       ref,
       ...rest,
       style
-    }, /* @__PURE__ */ import_react11.default.createElement("div", {
+    }, /* @__PURE__ */ import_react13.default.createElement("div", {
       className: "wv-ig-media-container"
     }, media.slice(0, numberOfImages).map((item) => {
       let { id, permalink, caption, media_url } = item;
-      return /* @__PURE__ */ import_react11.default.createElement("a", {
+      return /* @__PURE__ */ import_react13.default.createElement("a", {
         key: id,
         href: permalink,
         target: "_blank",
         rel: "noreferrer"
-      }, /* @__PURE__ */ import_react11.default.createElement("img", {
+      }, /* @__PURE__ */ import_react13.default.createElement("img", {
         alt: caption,
         src: media_url
       }));
     })));
   }
 );
-var css9 = {
+var css9 = {};
+var permanentCss2 = {
   "@desktop": {
     ".wv-ig-media-container": {
       overflow: "hidden",
@@ -597,12 +704,24 @@ var css9 = {
       gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
       gap: "var(--wv-ig-images-gap, 0px)",
       img: {
-        aspectRatio: "1 / 1",
-        width: "100%",
-        height: "100%",
+        maxWidth: "100%",
+        maxHeight: "100%",
         objectFit: "cover"
       }
     }
+  },
+  "@mobile": {
+    ".wv-ig-media-container": {
+      overflowX: "auto",
+      display: "flex",
+      scrollSnapType: "x mandatory"
+    },
+    ".wv-ig-media-container a": {
+      scrollSnapAlign: "start",
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: "100%"
+    }
   }
 };
 Instagram.defaultProps = {
@@ -612,105 +731,176 @@ Instagram.defaultProps = {
   imagesPerRow: 4,
   gap: 0
 };
-var instagram_default = Instagram;
+var Instagram_default = Instagram;
 
 // src/elements/index.ts
-var SharedComponents = {
-  Placeholder: Placeholder_default
-};
 var Elements = {
   Countdown: {
-    Component: countdown_default,
+    Component: Countdown_default,
     type: "countdown",
     defaultCss: css3
   },
   Button: {
-    Component: button_default,
+    Component: Button_default,
     type: "button",
     defaultCss: css
   },
   Container: {
-    Component: container_default,
+    Component: Container_default,
     type: "container",
     defaultCss: css2
   },
   Image: {
-    Component: image_default,
+    Component: Image_default,
     type: "image",
     defaultCss: css4
   },
   Instagram: {
-    Component: instagram_default,
+    Component: Instagram_default,
     type: "instagram",
-    defaultCss: css9
+    defaultCss: css9,
+    permanentCss: permanentCss2
   },
   Layout: {
-    Component: layout_default,
+    Component: Layout_default,
     type: "layout",
     defaultCss: css5,
     permanentCss
   },
   Map: {
-    Component: map_default,
+    Component: Map_default,
     type: "map",
     defaultCss: css6
   },
   Text: {
-    Component: text_default,
+    Component: Text_default,
     type: "text",
     defaultCss: css7
   },
   Video: {
-    Component: video_default,
+    Component: Video_default,
     type: "video",
     defaultCss: css8
   }
 };
 
-// src/renderer.tsx
-var import_core2 = require("@weaverse/core");
-var import_react12 = __toESM(require("react"));
+// src/context.ts
+var createRootContext = (configs) => {
+  let rootContext = new import_core.Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = (0, import_react14.createContext)({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
 
-// src/utils/index.ts
-function shortCssObject(css10) {
-  return {
-    "@desktop": css10["@desktop"],
-    "@mobile": css10["@mobile"]
-  };
-}
-var permanentClasses = {};
-function generateItemClass(instance, stitchesInstance) {
-  let { css: css10, type, className: cls = "" } = instance.data;
-  let className = "";
-  let permanentClass = "";
-  let perCss = instance.Element?.permanentCss;
-  if (perCss) {
-    if (type in permanentClasses) {
-      permanentClass = permanentClasses[type];
-    } else {
-      let { className: perCls } = stitchesInstance.css(perCss)();
-      Object.assign(permanentClasses, { [type]: perCls });
-      permanentClass = perCls;
-    }
-  }
-  className = permanentClass;
-  if (css10) {
-    let formattedCss = shortCssObject(css10);
-    let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
-    let { stitchesClass } = instance;
-    let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
-    className = `${permanentClass} ${cls} ${newClass} ${otherClass}`.trim();
-    instance.stitchesClass = newClass;
+// src/components/Modal.tsx
+var Modal_exports = {};
+__export(Modal_exports, {
+  Modal: () => Modal,
+  ModalClose: () => ModalClose,
+  ModalContent: () => ModalContent,
+  ModalHeader: () => ModalHeader,
+  ModalTrigger: () => ModalTrigger
+});
+var import_react15 = __toESM(require("react"));
+var import_react_dialog = require("@radix-ui/react-dialog");
+var import_react16 = require("@stitches/react");
+var Modal = import_react_dialog.Root;
+var ModalTrigger = import_react_dialog.Trigger;
+var ModalHeader = (0, import_react16.styled)(import_react_dialog.Title, {
+  margin: 0,
+  fontWeight: 500,
+  color: "#ededef",
+  fontSize: 17
+});
+var ModalContent = (0, import_react15.forwardRef)(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ import_react15.default.createElement(import_react_dialog.Portal, null, /* @__PURE__ */ import_react15.default.createElement(StyledOverlay, null), /* @__PURE__ */ import_react15.default.createElement(StyledContent, {
+      ...rest,
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      ref
+    }, /* @__PURE__ */ import_react15.default.createElement("div", null, /* @__PURE__ */ import_react15.default.createElement(ModalClose, null), /* @__PURE__ */ import_react15.default.createElement("div", null, children))));
   }
-  return className;
+);
+var ModalClose = import_react_dialog.Close;
+ModalClose.defaultProps = {
+  asChild: true
+};
+var overlayShow = (0, import_react16.keyframes)({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 }
+});
+var contentShow = (0, import_react16.keyframes)({
+  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
+});
+var StyledOverlay = (0, import_react16.styled)(import_react_dialog.Overlay, {
+  backgroundColor: "#707070",
+  position: "fixed",
+  zIndex: 9999,
+  inset: 0,
+  animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
+});
+var StyledContent = (0, import_react16.styled)(import_react_dialog.Content, {
+  backgroundColor: "white",
+  borderRadius: 6,
+  boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90vw",
+  maxWidth: "450px",
+  maxHeight: "85vh",
+  padding: 25,
+  animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+  "&:focus": { outline: "none" },
+  zIndex: 9999
+});
+
+// src/components/Spinner.tsx
+var import_react17 = __toESM(require("react"));
+function Spinner() {
+  return /* @__PURE__ */ import_react17.default.createElement("span", {
+    className: "wv-spinner-wrapper"
+  }, /* @__PURE__ */ import_react17.default.createElement("svg", {
+    className: "wv-spinner",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, /* @__PURE__ */ import_react17.default.createElement("circle", {
+    style: { opacity: ".25" },
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "4"
+  }), /* @__PURE__ */ import_react17.default.createElement("path", {
+    style: { opacity: ".75" },
+    fill: "currentColor",
+    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  })));
 }
 
+// src/components/index.ts
+var Components = {
+  Placeholder: Placeholder_default,
+  Spinner,
+  ModalComponents: Modal_exports
+};
+
 // src/renderer.tsx
+var import_core2 = require("@weaverse/core");
+var import_react18 = __toESM(require("react"));
 var WeaverseRoot = ({ context }) => {
-  let [, setData] = (0, import_react12.useState)(context.projectData);
-  let rootRef = (0, import_react12.useRef)();
+  let [, setData] = (0, import_react18.useState)(context.projectData);
+  let rootRef = (0, import_react18.useRef)();
   let renderRoot = () => setData({});
-  (0, import_react12.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -720,23 +910,23 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
+    return /* @__PURE__ */ import_react18.default.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ import_react12.default.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ import_react18.default.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ import_react12.default.createElement(ItemInstance, {
+    }, /* @__PURE__ */ import_react18.default.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react12.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react12.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react18.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react18.useState)(instance.data);
   let { id, type, childIds = [], css: css10, className, ...rest } = data;
-  (0, import_react12.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -752,13 +942,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react12.default.createElement(Component, {
+    return /* @__PURE__ */ import_react18.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react12.default.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ import_react18.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -768,26 +958,23 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react12.useContext)(WeaverseContext);
+  let context = (0, import_react18.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react12.default.createElement("div", {
+    return /* @__PURE__ */ import_react18.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react12.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react18.default.createElement(ItemComponent, {
     key: id,
     instance
   });
 };
-
-// src/index.ts
-__reExport(src_exports, require("@weaverse/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Components,
   Elements,
-  SharedComponents,
   WeaverseContext,
   WeaverseContextConsumer,
   WeaverseContextProvider,