@weaverse/react 0.6.10 → 0.6.15

package/dist/index.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react5 = require("react");
+var import_react9 = require("react");
 
 // src/elements/base.tsx
 var import_react = __toESM(require("react"));
@@ -78,6 +78,7 @@ BaseElement.defaultProps = {
 };
 var schema = {
   type: "base",
+  parentType: "container",
   title: "Base",
   settings: []
 };
@@ -100,11 +101,12 @@ var Button = React2.forwardRef((props, ref) => {
   }, rest), props.value);
 });
 Button.defaultProps = {
-  value: "Click me"
+  value: "Shop now"
 };
 var schema2 = {
   title: "Button",
   type: "button",
+  parentType: "container",
   styles: [
     {
       type: "dimensions"
@@ -140,13 +142,19 @@ var schema2 = {
   data: {
     css: {
       "@desktop": {
-        borderRadius: "9999px",
+        borderRadius: "72px",
+        border: "none",
+        backgroundColor: "#0F71FF",
+        color: "#fff",
         fontSize: "13px",
-        padding: "10px 15px"
+        padding: "10px 20px"
       }
     },
     target: "",
     openInNewTab: false
+  },
+  flags: {
+    draggable: true
   }
 };
 var button_default = Button;
@@ -161,6 +169,7 @@ var Container = (0, import_react2.forwardRef)((props, ref) => {
 var schema3 = {
   title: "Container",
   type: "container",
+  parentType: "layout",
   data: {
     css: {
       "@desktop": {
@@ -171,13 +180,17 @@ var schema3 = {
         justifyContent: "flex-start",
         textAlign: "left",
         gridArea: "1 / 1 / 3 / 6",
-        overflow: "hidden",
         width: "100%",
         height: "fit-content"
       }
     }
   },
-  settings: []
+  settings: [],
+  flags: {
+    draggable: true,
+    resizable: true,
+    sortable: true
+  }
 };
 var container_default = Container;
 
@@ -202,6 +215,7 @@ var Layout = (0, import_react3.forwardRef)((props, ref) => {
 var schema4 = {
   title: "Layout",
   type: "layout",
+  parentType: "root",
   data: {
     css: {
       "@desktop": {
@@ -219,7 +233,7 @@ var schema4 = {
         }
       },
       "@mobile": {
-        padding: "0",
+        padding: "0 16px",
         "> [data-layout-content]": {
           display: "flex !important",
           flexDirection: "column"
@@ -251,6 +265,7 @@ Text.defaultProps = {
 };
 var schema5 = {
   type: "text",
+  parentType: "container",
   title: "Text",
   settings: [],
   data: {
@@ -263,7 +278,7 @@ var schema5 = {
         outline: "none",
         wordBreak: "break-word",
         overflowWrap: "break-word",
-        whitespace: "break-spaces"
+        whiteSpace: "break-spaces"
       }
     }
   }
@@ -282,12 +297,13 @@ var Image = import_react4.default.forwardRef(function Image2(props, ref) {
   }));
 });
 Image.defaultProps = {
-  src: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
   alt: "weaverse image element"
 };
 var schema6 = {
   settings: [],
   type: "image",
+  parentType: "layout",
   title: "Image",
   data: {
     css: {
@@ -295,12 +311,261 @@ var schema6 = {
         width: "100%",
         height: "100%",
         objectFit: "cover"
+      },
+      "@mobile": {
+        display: "block"
       }
     }
+  },
+  flags: {
+    resizable: true,
+    draggable: true,
+    sortable: true
   }
 };
 var image_default = Image;
 
+// src/elements/video.tsx
+var import_react5 = __toESM(require("react"));
+var Video = (0, import_react5.forwardRef)((props, ref) => {
+  const { isDesignMode } = (0, import_react5.useContext)(WeaverseContext);
+  let _a = props, { src, type, controls, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "autoPlay", "loop", "muted"]);
+  if (isDesignMode) {
+    controls = false;
+    autoPlay = false;
+  }
+  console.info("9779 props", props, isDesignMode);
+  return /* @__PURE__ */ import_react5.default.createElement("video", __spreadValues({
+    ref,
+    controls,
+    autoPlay,
+    loop,
+    muted: true
+  }, rest), /* @__PURE__ */ import_react5.default.createElement("source", {
+    src,
+    type: type || "video/mp4",
+    controlsList: "nodownload",
+    disablePictureInPicture: true
+  }));
+});
+Video.defaultProps = {
+  src: "https://ucarecdn.com/7cae0dab-8966-4484-9998-602728c360ca/IMG_0048.MOV",
+  poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  loop: false,
+  type: "video/mp4",
+  controls: false,
+  autoPlay: true,
+  muted: true,
+  width: "100%",
+  height: "auto"
+};
+var schema7 = {
+  title: "Video",
+  type: "video",
+  parentType: "layout",
+  toolbar: [
+    {
+      type: "delete"
+    },
+    {
+      type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
+    }
+  ],
+  flags: {
+    resizable: true,
+    draggable: true,
+    sortable: true
+  }
+};
+var video_default = Video;
+
+// src/elements/map.tsx
+var import_react6 = __toESM(require("react"));
+var Map = (0, import_react6.forwardRef)((props, ref) => {
+  const { place, zoom } = props;
+  console.info("9779 props", props);
+  return /* @__PURE__ */ import_react6.default.createElement("div", __spreadValues({
+    ref
+  }, props), /* @__PURE__ */ import_react6.default.createElement("iframe", {
+    loading: "lazy",
+    scrolling: "no",
+    width: "100%",
+    height: "100%",
+    title: "map",
+    src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
+    style: {
+      pointerEvents: "none"
+    }
+  }));
+});
+Map.defaultProps = {
+  place: "Hanoi",
+  zoom: 14
+};
+var schema8 = {
+  title: "Map",
+  type: "map",
+  parentType: "layout",
+  toolbar: [
+    {
+      type: "delete"
+    },
+    {
+      type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
+    }
+  ],
+  data: {
+    css: {
+      "@desktop": {
+        gridArea: "1 / 1 / 11 / 13"
+      }
+    }
+  },
+  flags: {
+    resizable: true,
+    draggable: true,
+    sortable: true
+  }
+};
+var map_default = Map;
+
+// src/elements/countdown/index.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/elements/countdown/utils.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 mins = Math.floor((seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE);
+  const secs = Math.floor((seconds - days * ONE_DAY - hours * ONE_HOUR - mins * ONE_MINUTE) / 1e3);
+  return { days, hours, mins, secs };
+}
+
+// src/elements/countdown/timer-block.tsx
+var import_react7 = __toESM(require("react"));
+var TimerBlock = (props) => {
+  return /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("div", null, props.value.toString().padStart(2, "0")), props.label && /* @__PURE__ */ import_react7.default.createElement("div", {
+    className: "wv-countdown-label"
+  }, props.label));
+};
+var timer_block_default = TimerBlock;
+
+// src/elements/countdown/index.tsx
+var Countdown = (0, import_react8.forwardRef)((props, ref) => {
+  const { isDesignMode } = (0, import_react8.useContext)(WeaverseContext);
+  let { type, startTime, endTime, periods, redirectUrl, openInNewTab, showColon, showLabel } = props;
+  const [remaining, setRemaining] = import_react8.default.useState(0);
+  if (typeof endTime !== "number") {
+    endTime = Number.parseInt(endTime);
+  }
+  (0, import_react8.useEffect)(() => {
+    const flag = setInterval(() => {
+      const remainingTime = Math.max((type === "specific" ? new Date(endTime).getTime() : new Date(startTime) + periods * 60 * 1e3) - Date.now(), 0);
+      if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
+        window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
+      }
+      setRemaining(remainingTime);
+    }, 1e3);
+    return () => {
+      clearInterval(flag);
+    };
+  }, [startTime, endTime, periods, type]);
+  const timer = getTime(remaining);
+  return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
+    ref
+  }, props), /* @__PURE__ */ import_react8.default.createElement(timer_block_default, {
+    value: timer.days,
+    label: showLabel && "days"
+  }), /* @__PURE__ */ import_react8.default.createElement("span", {
+    className: !showColon && "hidden"
+  }, ":"), /* @__PURE__ */ import_react8.default.createElement(timer_block_default, {
+    value: timer.hours,
+    label: showLabel && "hours"
+  }), /* @__PURE__ */ import_react8.default.createElement("span", {
+    className: !showColon && "hidden"
+  }, ":"), /* @__PURE__ */ import_react8.default.createElement(timer_block_default, {
+    value: timer.mins,
+    label: showLabel && "minutes"
+  }), /* @__PURE__ */ import_react8.default.createElement("span", {
+    className: !showColon && "hidden"
+  }, ":"), /* @__PURE__ */ import_react8.default.createElement(timer_block_default, {
+    value: timer.secs,
+    label: showLabel && "seconds"
+  }));
+});
+Countdown.defaultProps = {
+  type: "specific",
+  startTime: Date.now(),
+  endTime: 1661140528e3,
+  redirectUrl: "",
+  openInNewTab: false,
+  showLabel: true,
+  showColon: true
+};
+var schema9 = {
+  title: "Countdown",
+  type: "countdown",
+  parentType: "container",
+  toolbar: [
+    {
+      type: "delete"
+    },
+    {
+      type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
+    }
+  ],
+  data: {
+    css: {
+      "@desktop": {
+        fontFamily: "Inter",
+        fontSize: 36,
+        fontWeight: 500,
+        display: "grid",
+        gridAutoFlow: "column",
+        gap: 10,
+        "& > div": {
+          width: 48,
+          textAlign: "center"
+        },
+        "& .wv-countdown-label": {
+          fontSize: 10
+        },
+        "& > span": {
+          lineHeight: "100%"
+        },
+        "& .hidden": {
+          visibility: "hidden"
+        }
+      }
+    }
+  },
+  flags: {
+    draggable: true
+  }
+};
+var countdown_default = Countdown;
+
 // src/elements/index.ts
 var elements = {
   Button: {
@@ -326,6 +591,18 @@ var elements = {
   Image: {
     Component: image_default,
     schema: schema6
+  },
+  Video: {
+    Component: video_default,
+    schema: schema7
+  },
+  Map: {
+    Component: map_default,
+    schema: schema8
+  },
+  Countdown: {
+    Component: countdown_default,
+    schema: schema9
   }
 };
 var elements_default = elements;
@@ -338,13 +615,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react5.createContext)({});
+var WeaverseContext = (0, import_react9.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react6 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -371,9 +648,9 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = (0, import_react6.useState)(context.projectData);
-  let rootRef = (0, import_react6.useRef)();
-  (0, import_react6.useEffect)(() => {
+  let [, setData] = (0, import_react10.useState)(context.projectData);
+  let rootRef = (0, import_react10.useRef)();
+  (0, import_react10.useEffect)(() => {
     let update = () => setData({});
     context.subscribe(update);
     if (context.projectData) {
@@ -386,21 +663,21 @@ var WeaverseRoot = ({ context }) => {
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ import_react6.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react10.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react6.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react10.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react6.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react6.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react6.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react10.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react10.useState)(instance.data);
   let _a = data, { id, type, childIds = [], css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -418,12 +695,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react6.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react10.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react6.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -431,15 +708,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react6.useContext)(WeaverseContext);
+  let context = (0, import_react10.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react6.default.createElement("div", {
+    return /* @__PURE__ */ import_react10.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react6.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react10.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -48,6 +48,7 @@ BaseElement.defaultProps = {
 };
 var schema = {
   type: "base",
+  parentType: "container",
   title: "Base",
   settings: []
 };
@@ -70,11 +71,12 @@ var Button = React2.forwardRef((props, ref) => {
   }, rest), props.value);
 });
 Button.defaultProps = {
-  value: "Click me"
+  value: "Shop now"
 };
 var schema2 = {
   title: "Button",
   type: "button",
+  parentType: "container",
   styles: [
     {
       type: "dimensions"
@@ -110,13 +112,19 @@ var schema2 = {
   data: {
     css: {
       "@desktop": {
-        borderRadius: "9999px",
+        borderRadius: "72px",
+        border: "none",
+        backgroundColor: "#0F71FF",
+        color: "#fff",
         fontSize: "13px",
-        padding: "10px 15px"
+        padding: "10px 20px"
       }
     },
     target: "",
     openInNewTab: false
+  },
+  flags: {
+    draggable: true
   }
 };
 var button_default = Button;
@@ -131,6 +139,7 @@ var Container = forwardRef2((props, ref) => {
 var schema3 = {
   title: "Container",
   type: "container",
+  parentType: "layout",
   data: {
     css: {
       "@desktop": {
@@ -141,13 +150,17 @@ var schema3 = {
         justifyContent: "flex-start",
         textAlign: "left",
         gridArea: "1 / 1 / 3 / 6",
-        overflow: "hidden",
         width: "100%",
         height: "fit-content"
       }
     }
   },
-  settings: []
+  settings: [],
+  flags: {
+    draggable: true,
+    resizable: true,
+    sortable: true
+  }
 };
 var container_default = Container;
 
@@ -172,6 +185,7 @@ var Layout = forwardRef3((props, ref) => {
 var schema4 = {
   title: "Layout",
   type: "layout",
+  parentType: "root",
   data: {
     css: {
       "@desktop": {
@@ -189,7 +203,7 @@ var schema4 = {
         }
       },
       "@mobile": {
-        padding: "0",
+        padding: "0 16px",
         "> [data-layout-content]": {
           display: "flex !important",
           flexDirection: "column"
@@ -221,6 +235,7 @@ Text.defaultProps = {
 };
 var schema5 = {
   type: "text",
+  parentType: "container",
   title: "Text",
   settings: [],
   data: {
@@ -233,7 +248,7 @@ var schema5 = {
         outline: "none",
         wordBreak: "break-word",
         overflowWrap: "break-word",
-        whitespace: "break-spaces"
+        whiteSpace: "break-spaces"
       }
     }
   }
@@ -252,12 +267,13 @@ var Image = React6.forwardRef(function Image2(props, ref) {
   }));
 });
 Image.defaultProps = {
-  src: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
   alt: "weaverse image element"
 };
 var schema6 = {
   settings: [],
   type: "image",
+  parentType: "layout",
   title: "Image",
   data: {
     css: {
@@ -265,12 +281,261 @@ var schema6 = {
         width: "100%",
         height: "100%",
         objectFit: "cover"
+      },
+      "@mobile": {
+        display: "block"
       }
     }
+  },
+  flags: {
+    resizable: true,
+    draggable: true,
+    sortable: true
   }
 };
 var image_default = Image;
 
+// src/elements/video.tsx
+import React7, { forwardRef as forwardRef5, useContext } from "react";
+var Video = forwardRef5((props, ref) => {
+  const { isDesignMode } = useContext(WeaverseContext);
+  let _a = props, { src, type, controls, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "autoPlay", "loop", "muted"]);
+  if (isDesignMode) {
+    controls = false;
+    autoPlay = false;
+  }
+  console.info("9779 props", props, isDesignMode);
+  return /* @__PURE__ */ React7.createElement("video", __spreadValues({
+    ref,
+    controls,
+    autoPlay,
+    loop,
+    muted: true
+  }, rest), /* @__PURE__ */ React7.createElement("source", {
+    src,
+    type: type || "video/mp4",
+    controlsList: "nodownload",
+    disablePictureInPicture: true
+  }));
+});
+Video.defaultProps = {
+  src: "https://ucarecdn.com/7cae0dab-8966-4484-9998-602728c360ca/IMG_0048.MOV",
+  poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  loop: false,
+  type: "video/mp4",
+  controls: false,
+  autoPlay: true,
+  muted: true,
+  width: "100%",
+  height: "auto"
+};
+var schema7 = {
+  title: "Video",
+  type: "video",
+  parentType: "layout",
+  toolbar: [
+    {
+      type: "delete"
+    },
+    {
+      type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
+    }
+  ],
+  flags: {
+    resizable: true,
+    draggable: true,
+    sortable: true
+  }
+};
+var video_default = Video;
+
+// src/elements/map.tsx
+import React8, { forwardRef as forwardRef6 } from "react";
+var Map = forwardRef6((props, ref) => {
+  const { place, zoom } = props;
+  console.info("9779 props", props);
+  return /* @__PURE__ */ React8.createElement("div", __spreadValues({
+    ref
+  }, props), /* @__PURE__ */ React8.createElement("iframe", {
+    loading: "lazy",
+    scrolling: "no",
+    width: "100%",
+    height: "100%",
+    title: "map",
+    src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
+    style: {
+      pointerEvents: "none"
+    }
+  }));
+});
+Map.defaultProps = {
+  place: "Hanoi",
+  zoom: 14
+};
+var schema8 = {
+  title: "Map",
+  type: "map",
+  parentType: "layout",
+  toolbar: [
+    {
+      type: "delete"
+    },
+    {
+      type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
+    }
+  ],
+  data: {
+    css: {
+      "@desktop": {
+        gridArea: "1 / 1 / 11 / 13"
+      }
+    }
+  },
+  flags: {
+    resizable: true,
+    draggable: true,
+    sortable: true
+  }
+};
+var map_default = Map;
+
+// src/elements/countdown/index.tsx
+import React10, { forwardRef as forwardRef7, useContext as useContext2, useEffect } from "react";
+
+// src/elements/countdown/utils.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 mins = Math.floor((seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE);
+  const secs = Math.floor((seconds - days * ONE_DAY - hours * ONE_HOUR - mins * ONE_MINUTE) / 1e3);
+  return { days, hours, mins, secs };
+}
+
+// src/elements/countdown/timer-block.tsx
+import React9 from "react";
+var TimerBlock = (props) => {
+  return /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement("div", null, props.value.toString().padStart(2, "0")), props.label && /* @__PURE__ */ React9.createElement("div", {
+    className: "wv-countdown-label"
+  }, props.label));
+};
+var timer_block_default = TimerBlock;
+
+// src/elements/countdown/index.tsx
+var Countdown = forwardRef7((props, ref) => {
+  const { isDesignMode } = useContext2(WeaverseContext);
+  let { type, startTime, endTime, periods, redirectUrl, openInNewTab, showColon, showLabel } = props;
+  const [remaining, setRemaining] = React10.useState(0);
+  if (typeof endTime !== "number") {
+    endTime = Number.parseInt(endTime);
+  }
+  useEffect(() => {
+    const flag = setInterval(() => {
+      const remainingTime = Math.max((type === "specific" ? new Date(endTime).getTime() : new Date(startTime) + periods * 60 * 1e3) - Date.now(), 0);
+      if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
+        window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
+      }
+      setRemaining(remainingTime);
+    }, 1e3);
+    return () => {
+      clearInterval(flag);
+    };
+  }, [startTime, endTime, periods, type]);
+  const timer = getTime(remaining);
+  return /* @__PURE__ */ React10.createElement("div", __spreadValues({
+    ref
+  }, props), /* @__PURE__ */ React10.createElement(timer_block_default, {
+    value: timer.days,
+    label: showLabel && "days"
+  }), /* @__PURE__ */ React10.createElement("span", {
+    className: !showColon && "hidden"
+  }, ":"), /* @__PURE__ */ React10.createElement(timer_block_default, {
+    value: timer.hours,
+    label: showLabel && "hours"
+  }), /* @__PURE__ */ React10.createElement("span", {
+    className: !showColon && "hidden"
+  }, ":"), /* @__PURE__ */ React10.createElement(timer_block_default, {
+    value: timer.mins,
+    label: showLabel && "minutes"
+  }), /* @__PURE__ */ React10.createElement("span", {
+    className: !showColon && "hidden"
+  }, ":"), /* @__PURE__ */ React10.createElement(timer_block_default, {
+    value: timer.secs,
+    label: showLabel && "seconds"
+  }));
+});
+Countdown.defaultProps = {
+  type: "specific",
+  startTime: Date.now(),
+  endTime: 1661140528e3,
+  redirectUrl: "",
+  openInNewTab: false,
+  showLabel: true,
+  showColon: true
+};
+var schema9 = {
+  title: "Countdown",
+  type: "countdown",
+  parentType: "container",
+  toolbar: [
+    {
+      type: "delete"
+    },
+    {
+      type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
+    }
+  ],
+  data: {
+    css: {
+      "@desktop": {
+        fontFamily: "Inter",
+        fontSize: 36,
+        fontWeight: 500,
+        display: "grid",
+        gridAutoFlow: "column",
+        gap: 10,
+        "& > div": {
+          width: 48,
+          textAlign: "center"
+        },
+        "& .wv-countdown-label": {
+          fontSize: 10
+        },
+        "& > span": {
+          lineHeight: "100%"
+        },
+        "& .hidden": {
+          visibility: "hidden"
+        }
+      }
+    }
+  },
+  flags: {
+    draggable: true
+  }
+};
+var countdown_default = Countdown;
+
 // src/elements/index.ts
 var elements = {
   Button: {
@@ -296,6 +561,18 @@ var elements = {
   Image: {
     Component: image_default,
     schema: schema6
+  },
+  Video: {
+    Component: video_default,
+    schema: schema7
+  },
+  Map: {
+    Component: map_default,
+    schema: schema8
+  },
+  Countdown: {
+    Component: countdown_default,
+    schema: schema9
   }
 };
 var elements_default = elements;
@@ -314,7 +591,7 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React7, { useContext, useEffect, useRef, useState } from "react";
+import React11, { useContext as useContext3, useEffect as useEffect2, useRef, useState } from "react";
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -343,7 +620,7 @@ var WeaverseRoot = ({ context }) => {
   var _a;
   let [, setData] = useState(context.projectData);
   let rootRef = useRef();
-  useEffect(() => {
+  useEffect2(() => {
     let update = () => setData({});
     context.subscribe(update);
     if (context.projectData) {
@@ -356,21 +633,21 @@ var WeaverseRoot = ({ context }) => {
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ React7.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ React7.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ React11.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React7.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React11.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext(WeaverseContext);
+  let { stitchesInstance, elementInstances } = useContext3(WeaverseContext);
   let [data, setData] = useState(instance.data);
   let _a = data, { id, type, childIds = [], css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  useEffect(() => {
+  useEffect2(() => {
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
     if (isBrowser && !instance.ref.current) {
@@ -388,12 +665,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React7.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ React11.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ React7.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ React11.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -401,15 +678,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext(WeaverseContext);
+  let context = useContext3(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React7.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React7.createElement(ItemComponent, {
+  return /* @__PURE__ */ React11.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.10",
+  "version": "0.6.15",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,6 +31,6 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.6.10"
+    "@weaverse/core": "0.6.15"
   }
 }