@weaverse/react 0.7.19 → 0.7.21

package/dist/index.d.ts

@@ -93,7 +93,7 @@ interface CountdownElementProps extends WeaverseElementProps {
 }
 declare type TimerBlockProps = {
     label: string;
-    value: number;
+    value: string | number;
 };
 interface InstagramElementProps extends WeaverseElementProps {
     token: string;

package/dist/index.js

@@ -39,11 +39,29 @@ module.exports = __toCommonJS(src_exports);
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
+var import_react2 = require("react");
+
+// 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;
+
+// src/elements/button.tsx
 var Button = React.forwardRef((props, ref) => {
+  let { isDesignMode } = (0, import_react2.useContext)(WeaverseContext);
   let { text, clickAction, linkTo, openInNewTab, ...rest } = props;
   if (clickAction && linkTo) {
     return /* @__PURE__ */ React.createElement("a", {
-      href: linkTo,
+      href: !isDesignMode ? linkTo : void 0,
       target: openInNewTab ? "_blank" : "_self",
       rel: "noreferrer",
       ...rest,
@@ -76,11 +94,11 @@ var css = {
 var button_default = Button;
 
 // src/elements/container.tsx
-var import_react = __toESM(require("react"));
-var Container = (0, import_react.forwardRef)(
+var import_react3 = __toESM(require("react"));
+var Container = (0, import_react3.forwardRef)(
   (props, ref) => {
     let { children, ...rest } = props;
-    return /* @__PURE__ */ import_react.default.createElement("div", {
+    return /* @__PURE__ */ import_react3.default.createElement("div", {
       ref,
       ...rest
     }, children);
@@ -104,30 +122,16 @@ Container.defaultProps = {};
 var container_default = Container;
 
 // src/elements/countdown/index.tsx
-var import_react4 = __toESM(require("react"));
-
-// src/context.ts
-var import_core = require("@weaverse/core");
-var import_react2 = 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_react2.createContext)({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
+var import_react5 = __toESM(require("react"));
 
 // src/elements/countdown/timer-block.tsx
-var import_react3 = __toESM(require("react"));
+var import_react4 = __toESM(require("react"));
 function TimerBlock({ value, label }) {
-  return /* @__PURE__ */ import_react3.default.createElement("div", {
+  return /* @__PURE__ */ import_react4.default.createElement("div", {
     className: "wv-cd-block"
-  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+  }, /* @__PURE__ */ import_react4.default.createElement("div", {
     className: "wv-cd-number"
-  }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react3.default.createElement("div", {
+  }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ import_react4.default.createElement("div", {
     className: "wv-cd-label"
   }, label));
 }
@@ -150,51 +154,75 @@ function getTime(_seconds) {
 }
 
 // src/elements/countdown/index.tsx
-var Countdown = (0, import_react4.forwardRef)(
+var countdownKey = "wv-cd-evergreen-start";
+var Countdown = (0, import_react5.forwardRef)(
   (props, ref) => {
-    const { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
+    const { isDesignMode } = (0, import_react5.useContext)(WeaverseContext);
     let {
       timerType,
-      startTime,
-      endTime,
-      periods,
+      startTime: startTimeProp,
+      endTime: endTimeProp,
+      periods: periodsProp,
       redirectUrl,
       openInNewTab,
       showColon,
       showLabel,
       ...rest
     } = props;
-    const [remaining, setRemaining] = import_react4.default.useState(0);
-    if (typeof endTime !== "number") {
-      endTime = Number.parseInt(endTime);
-    }
-    (0, import_react4.useEffect)(() => {
-      const flag = setInterval(() => {
-        const remainingTime = Math.max(
-          (timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(),
-          0
-        );
-        if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
-          window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
-          clearInterval(flag);
+    const [remaining, setRemaining] = import_react5.default.useState(0);
+    let periods = periodsProp * 60 * 1e3;
+    const handleEnd = () => {
+      if (!isDesignMode && redirectUrl)
+        window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
+    };
+    const getStartTime = () => {
+      let startTime = startTimeProp;
+      if (timerType === "evergreen") {
+        const start = localStorage.getItem(countdownKey);
+        if (start) {
+          startTime = Number.parseInt(start);
+          if (startTime + periods < Date.now()) {
+            startTime = Date.now();
+            localStorage.setItem(countdownKey, startTime.toString());
+          }
+        } else {
+          startTime = Date.now();
+          localStorage.setItem(countdownKey, startTime.toString());
         }
-        setRemaining(remainingTime);
-      }, 1e3);
+      }
+      return startTime;
+    };
+    const checkActive = (startTime) => startTime < Date.now() && endTimeProp > Date.now();
+    const handleRemaining = () => {
+      let startTime = getStartTime();
+      let endTime = timerType === "fixed-time" ? endTimeProp : startTime + periods;
+      let isActive = checkActive(startTime);
+      const remainingTime = isActive ? Math.max(endTime - Date.now(), 0) : 0;
+      if (remainingTime > 0 && remainingTime < 1e3) {
+        handleEnd();
+      }
+      setRemaining(remainingTime);
+    };
+    (0, import_react5.useEffect)(() => {
+      let intervalFlag = setInterval(
+        handleRemaining,
+        1e3
+      );
       return () => {
-        clearInterval(flag);
+        clearInterval(intervalFlag);
       };
-    }, [startTime, endTime, periods, timerType]);
+    }, [startTimeProp, endTimeProp, periods, timerType]);
     const timer = getTime(remaining);
-    return /* @__PURE__ */ import_react4.default.createElement("div", {
+    return /* @__PURE__ */ import_react5.default.createElement("div", {
       ref,
       ...rest
     }, times.map((time) => {
-      return /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, {
+      return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, {
         key: time
-      }, /* @__PURE__ */ import_react4.default.createElement(TimerBlock, {
+      }, /* @__PURE__ */ import_react5.default.createElement(TimerBlock, {
         label: showLabel ? time : "",
-        value: timer[time]
-      }), time !== "seconds" && /* @__PURE__ */ import_react4.default.createElement("div", null, /* @__PURE__ */ import_react4.default.createElement("span", {
+        value: remaining === 0 ? "--" : timer[time]
+      }), time !== "seconds" && /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("span", {
         className: `wv-cd-number ${showColon ? "" : "hidden"}`
       }, ":")));
     }));
@@ -203,10 +231,12 @@ var Countdown = (0, import_react4.forwardRef)(
 var css3 = {
   "@desktop": {
     fontFamily: "Inter",
-    fontSize: 36,
+    fontSize: "36px",
     fontWeight: 500,
-    display: "grid",
-    gridAutoFlow: "column",
+    display: "flex",
+    alignItems: "center",
+    overflow: "hidden",
+    justifyContent: "center",
     gap: 10,
     lineHeight: "initial",
     ".wv-cd-block": {
@@ -227,9 +257,9 @@ var css3 = {
 Countdown.defaultProps = {
   timerType: "fixed-time",
   startTime: Date.now(),
-  endTime: 1666756528e3,
+  endTime: Date.now() + 1e3 * 60 * 60 * 24,
   periods: 90,
-  redirectUrl: "https://myshop.com",
+  redirectUrl: "",
   openInNewTab: false,
   showLabel: true,
   showColon: true
@@ -237,8 +267,8 @@ Countdown.defaultProps = {
 var countdown_default = Countdown;
 
 // src/elements/image.tsx
-var import_react5 = __toESM(require("react"));
-var Image = import_react5.default.forwardRef(
+var import_react6 = __toESM(require("react"));
+var Image = import_react6.default.forwardRef(
   (props, ref) => {
     let {
       src,
@@ -254,18 +284,18 @@ var Image = import_react5.default.forwardRef(
       "--wv-img-object-fit": objectFit,
       "--wv-img-object-position": objectPosition
     };
-    let content = /* @__PURE__ */ import_react5.default.createElement("img", {
+    let content = /* @__PURE__ */ import_react6.default.createElement("img", {
       alt,
       "data-blink-src": src
     });
     if (onClickAction === "open-link" && linkTo) {
       let target = openLinkInNewTab ? "_blank" : "_self";
-      content = /* @__PURE__ */ import_react5.default.createElement("a", {
+      content = /* @__PURE__ */ import_react6.default.createElement("a", {
         href: linkTo,
         target
       }, content);
     }
-    return /* @__PURE__ */ import_react5.default.createElement("div", {
+    return /* @__PURE__ */ import_react6.default.createElement("div", {
       ref,
       ...rest,
       style
@@ -297,8 +327,8 @@ Image.defaultProps = {
 var image_default = Image;
 
 // src/elements/layout.tsx
-var import_react6 = __toESM(require("react"));
-var Layout = (0, import_react6.forwardRef)((props, ref) => {
+var import_react7 = __toESM(require("react"));
+var Layout = (0, import_react7.forwardRef)((props, ref) => {
   let {
     children,
     rows,
@@ -319,15 +349,15 @@ var Layout = (0, import_react6.forwardRef)((props, ref) => {
     "--row-size": rowSize + "px",
     "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
   };
-  return /* @__PURE__ */ import_react6.default.createElement("section", {
+  return /* @__PURE__ */ import_react7.default.createElement("section", {
     ref,
     ...rest,
     style
-  }, /* @__PURE__ */ import_react6.default.createElement(LayoutBackground, {
+  }, /* @__PURE__ */ import_react7.default.createElement(LayoutBackground, {
     imgUrl: backgroundImage,
     bgColor: backgroundColor,
     objectFit
-  }), /* @__PURE__ */ import_react6.default.createElement("div", {
+  }), /* @__PURE__ */ import_react7.default.createElement("div", {
     "data-layout-content": true
   }, children));
 });
@@ -337,10 +367,10 @@ var LayoutBackground = (props) => {
     ["--bg-color"]: bgColor,
     ["--object-fit"]: objectFit
   };
-  return imgUrl || bgColor ? /* @__PURE__ */ import_react6.default.createElement("div", {
+  return imgUrl || bgColor ? /* @__PURE__ */ import_react7.default.createElement("div", {
     "data-wv-bg": true,
     style
-  }, imgUrl && /* @__PURE__ */ import_react6.default.createElement("img", {
+  }, imgUrl && /* @__PURE__ */ import_react7.default.createElement("img", {
     width: "100%",
     height: "100%",
     "data-blink-src": imgUrl,
@@ -392,13 +422,13 @@ Layout.defaultProps = {
 var layout_default = Layout;
 
 // src/elements/map.tsx
-var import_react7 = __toESM(require("react"));
-var Map = (0, import_react7.forwardRef)((props, ref) => {
+var import_react8 = __toESM(require("react"));
+var Map = (0, import_react8.forwardRef)((props, ref) => {
   let { place, zoom, ...rest } = props;
-  return /* @__PURE__ */ import_react7.default.createElement("div", {
+  return /* @__PURE__ */ import_react8.default.createElement("div", {
     ref,
     ...rest
-  }, /* @__PURE__ */ import_react7.default.createElement("iframe", {
+  }, /* @__PURE__ */ import_react8.default.createElement("iframe", {
     loading: "lazy",
     scrolling: "no",
     width: "100%",
@@ -441,24 +471,24 @@ Text.defaultProps = {
 var text_default = Text;
 
 // src/elements/video.tsx
-var import_react8 = __toESM(require("react"));
-var Video = (0, import_react8.forwardRef)((props, ref) => {
-  let { isDesignMode } = (0, import_react8.useContext)(WeaverseContext);
+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_react8.default.createElement("div", {
+  return /* @__PURE__ */ import_react9.default.createElement("div", {
     ref,
     ...rest
-  }, /* @__PURE__ */ import_react8.default.createElement("video", {
+  }, /* @__PURE__ */ import_react9.default.createElement("video", {
     controls: isDesignMode ? false : controls,
     autoPlay: isDesignMode ? false : autoPlay,
     loop,
     muted: true,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, /* @__PURE__ */ import_react8.default.createElement("source", {
+  }, /* @__PURE__ */ import_react9.default.createElement("source", {
     src,
     type: type || "video/mp4"
-  }), /* @__PURE__ */ import_react8.default.createElement("source", {
+  }), /* @__PURE__ */ import_react9.default.createElement("source", {
     src,
     type: "video/ogg"
   }), "Your browser does not support the video tag."));
@@ -484,33 +514,33 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/elements/shared/Placeholder.tsx
-var import_react9 = __toESM(require("react"));
-var Placeholder = (0, import_react9.forwardRef)(
+var import_react10 = __toESM(require("react"));
+var Placeholder = (0, import_react10.forwardRef)(
   (props, ref) => {
     let { element, children, ...rest } = props;
-    return /* @__PURE__ */ import_react9.default.createElement("div", {
+    return /* @__PURE__ */ import_react10.default.createElement("div", {
       "data-wv-placeholder": true,
       style: { display: "none" },
       ref,
       ...rest
-    }, /* @__PURE__ */ import_react9.default.createElement("div", {
+    }, /* @__PURE__ */ import_react10.default.createElement("div", {
       style: { fontWeight: 600, marginBottom: "10px" }
-    }, element), /* @__PURE__ */ import_react9.default.createElement("div", null, children));
+    }, element), /* @__PURE__ */ import_react10.default.createElement("div", null, children));
   }
 );
 var Placeholder_default = Placeholder;
 
 // src/elements/instagram.tsx
 var INSTAGRAM_API = "https://graph.instagram.com";
-var Instagram = (0, import_react10.forwardRef)(
+var Instagram = (0, import_react11.forwardRef)(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
-    let [media, setMedia] = (0, import_react10.useState)([]);
-    let [error, setError] = (0, import_react10.useState)(null);
-    (0, import_react10.useEffect)(() => {
+    let [media, setMedia] = (0, import_react11.useState)([]);
+    let [error, setError] = (0, import_react11.useState)(null);
+    (0, import_react11.useEffect)(() => {
       if (token) {
         let params = new URLSearchParams({
           access_token: token,
@@ -527,10 +557,10 @@ var Instagram = (0, import_react10.forwardRef)(
       }
     }, [token]);
     if (!token || error) {
-      return /* @__PURE__ */ import_react10.default.createElement("div", {
+      return /* @__PURE__ */ import_react11.default.createElement("div", {
         ref,
         ...rest
-      }, /* @__PURE__ */ import_react10.default.createElement(Placeholder_default, {
+      }, /* @__PURE__ */ import_react11.default.createElement(Placeholder_default, {
         element: "Instagram"
       }, !token ? "Connect to Instagram to display photos on your site." : "Invalid or expired token!"));
     }
@@ -538,20 +568,20 @@ var Instagram = (0, import_react10.forwardRef)(
       "--wv-ig-images-per-row": imagesPerRow,
       "--wv-ig-images-gap": gap + "px"
     };
-    return /* @__PURE__ */ import_react10.default.createElement("div", {
+    return /* @__PURE__ */ import_react11.default.createElement("div", {
       ref,
       ...rest,
       style
-    }, /* @__PURE__ */ import_react10.default.createElement("div", {
+    }, /* @__PURE__ */ import_react11.default.createElement("div", {
       className: "wv-ig-media-container"
     }, media.slice(0, numberOfImages).map((item) => {
       let { id, permalink, caption, media_url } = item;
-      return /* @__PURE__ */ import_react10.default.createElement("a", {
+      return /* @__PURE__ */ import_react11.default.createElement("a", {
         key: id,
         href: permalink,
         target: "_blank",
         rel: "noreferrer"
-      }, /* @__PURE__ */ import_react10.default.createElement("img", {
+      }, /* @__PURE__ */ import_react11.default.createElement("img", {
         alt: caption,
         src: media_url
       }));
@@ -640,7 +670,7 @@ var Elements = {
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react11 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 
 // src/utils/index.ts
 function shortCssObject(css10) {
@@ -680,10 +710,10 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a, _b;
-  let [, setData] = (0, import_react11.useState)(context.projectData);
-  let rootRef = (0, import_react11.useRef)();
+  let [, setData] = (0, import_react12.useState)(context.projectData);
+  let rootRef = (0, import_react12.useRef)();
   let renderRoot = () => setData({});
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     context.subscribe(renderRoot);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -693,23 +723,23 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
   if ((_b = context.projectData) == null ? void 0 : _b.rootId) {
-    return /* @__PURE__ */ import_react11.default.createElement("div", {
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ import_react12.default.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+    }, /* @__PURE__ */ import_react12.default.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react11.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react11.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react12.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react12.useState)(instance.data);
   let { id, type, childIds = [], css: css10, className, ...rest } = data;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     let render = (data2) => setData({ ...data2 });
     instance.subscribe(render);
     if (import_core2.isBrowser && !instance.ref.current) {
@@ -725,13 +755,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react11.default.createElement(Component, {
+    return /* @__PURE__ */ import_react12.default.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ import_react12.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -741,15 +771,15 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react11.useContext)(WeaverseContext);
+  let context = (0, import_react12.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react11.default.createElement("div", {
+    return /* @__PURE__ */ import_react12.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react11.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react12.default.createElement(ItemComponent, {
     key: id,
     instance
   });

package/dist/index.mjs

@@ -1,10 +1,28 @@
 // src/elements/button.tsx
 import * as React from "react";
+import { useContext } from "react";
+
+// src/context.ts
+import { Weaverse } from "@weaverse/core";
+import { createContext } from "react";
+var createRootContext = (configs) => {
+  let rootContext = new Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = createContext({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
+
+// src/elements/button.tsx
 var Button = React.forwardRef((props, ref) => {
+  let { isDesignMode } = useContext(WeaverseContext);
   let { text, clickAction, linkTo, openInNewTab, ...rest } = props;
   if (clickAction && linkTo) {
     return /* @__PURE__ */ React.createElement("a", {
-      href: linkTo,
+      href: !isDesignMode ? linkTo : void 0,
       target: openInNewTab ? "_blank" : "_self",
       rel: "noreferrer",
       ...rest,
@@ -65,21 +83,7 @@ Container.defaultProps = {};
 var container_default = Container;
 
 // src/elements/countdown/index.tsx
-import React4, { forwardRef as forwardRef3, useContext, useEffect } from "react";
-
-// src/context.ts
-import { Weaverse } from "@weaverse/core";
-import { createContext } from "react";
-var createRootContext = (configs) => {
-  let rootContext = new Weaverse(configs);
-  Object.keys(Elements).forEach((key) => {
-    rootContext.registerElement(Elements[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = createContext({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
+import React4, { forwardRef as forwardRef3, useContext as useContext2, useEffect } from "react";
 
 // src/elements/countdown/timer-block.tsx
 import React3 from "react";
@@ -88,7 +92,7 @@ function TimerBlock({ value, label }) {
     className: "wv-cd-block"
   }, /* @__PURE__ */ React3.createElement("div", {
     className: "wv-cd-number"
-  }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ React3.createElement("div", {
+  }, typeof value === "string" ? value : value.toString().padStart(2, "0")), label && /* @__PURE__ */ React3.createElement("div", {
     className: "wv-cd-label"
   }, label));
 }
@@ -111,14 +115,15 @@ function getTime(_seconds) {
 }
 
 // src/elements/countdown/index.tsx
+var countdownKey = "wv-cd-evergreen-start";
 var Countdown = forwardRef3(
   (props, ref) => {
-    const { isDesignMode } = useContext(WeaverseContext);
+    const { isDesignMode } = useContext2(WeaverseContext);
     let {
       timerType,
-      startTime,
-      endTime,
-      periods,
+      startTime: startTimeProp,
+      endTime: endTimeProp,
+      periods: periodsProp,
       redirectUrl,
       openInNewTab,
       showColon,
@@ -126,25 +131,48 @@ var Countdown = forwardRef3(
       ...rest
     } = props;
     const [remaining, setRemaining] = React4.useState(0);
-    if (typeof endTime !== "number") {
-      endTime = Number.parseInt(endTime);
-    }
-    useEffect(() => {
-      const flag = setInterval(() => {
-        const remainingTime = Math.max(
-          (timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(),
-          0
-        );
-        if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
-          window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
-          clearInterval(flag);
+    let periods = periodsProp * 60 * 1e3;
+    const handleEnd = () => {
+      if (!isDesignMode && redirectUrl)
+        window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
+    };
+    const getStartTime = () => {
+      let startTime = startTimeProp;
+      if (timerType === "evergreen") {
+        const start = localStorage.getItem(countdownKey);
+        if (start) {
+          startTime = Number.parseInt(start);
+          if (startTime + periods < Date.now()) {
+            startTime = Date.now();
+            localStorage.setItem(countdownKey, startTime.toString());
+          }
+        } else {
+          startTime = Date.now();
+          localStorage.setItem(countdownKey, startTime.toString());
         }
-        setRemaining(remainingTime);
-      }, 1e3);
+      }
+      return startTime;
+    };
+    const checkActive = (startTime) => startTime < Date.now() && endTimeProp > Date.now();
+    const handleRemaining = () => {
+      let startTime = getStartTime();
+      let endTime = timerType === "fixed-time" ? endTimeProp : startTime + periods;
+      let isActive = checkActive(startTime);
+      const remainingTime = isActive ? Math.max(endTime - Date.now(), 0) : 0;
+      if (remainingTime > 0 && remainingTime < 1e3) {
+        handleEnd();
+      }
+      setRemaining(remainingTime);
+    };
+    useEffect(() => {
+      let intervalFlag = setInterval(
+        handleRemaining,
+        1e3
+      );
       return () => {
-        clearInterval(flag);
+        clearInterval(intervalFlag);
       };
-    }, [startTime, endTime, periods, timerType]);
+    }, [startTimeProp, endTimeProp, periods, timerType]);
     const timer = getTime(remaining);
     return /* @__PURE__ */ React4.createElement("div", {
       ref,
@@ -154,7 +182,7 @@ var Countdown = forwardRef3(
         key: time
       }, /* @__PURE__ */ React4.createElement(TimerBlock, {
         label: showLabel ? time : "",
-        value: timer[time]
+        value: remaining === 0 ? "--" : timer[time]
       }), time !== "seconds" && /* @__PURE__ */ React4.createElement("div", null, /* @__PURE__ */ React4.createElement("span", {
         className: `wv-cd-number ${showColon ? "" : "hidden"}`
       }, ":")));
@@ -164,10 +192,12 @@ var Countdown = forwardRef3(
 var css3 = {
   "@desktop": {
     fontFamily: "Inter",
-    fontSize: 36,
+    fontSize: "36px",
     fontWeight: 500,
-    display: "grid",
-    gridAutoFlow: "column",
+    display: "flex",
+    alignItems: "center",
+    overflow: "hidden",
+    justifyContent: "center",
     gap: 10,
     lineHeight: "initial",
     ".wv-cd-block": {
@@ -188,9 +218,9 @@ var css3 = {
 Countdown.defaultProps = {
   timerType: "fixed-time",
   startTime: Date.now(),
-  endTime: 1666756528e3,
+  endTime: Date.now() + 1e3 * 60 * 60 * 24,
   periods: 90,
-  redirectUrl: "https://myshop.com",
+  redirectUrl: "",
   openInNewTab: false,
   showLabel: true,
   showColon: true
@@ -402,9 +432,9 @@ Text.defaultProps = {
 var text_default = Text;
 
 // src/elements/video.tsx
-import React9, { forwardRef as forwardRef7, useContext as useContext2 } from "react";
+import React9, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
 var Video = forwardRef7((props, ref) => {
-  let { isDesignMode } = useContext2(WeaverseContext);
+  let { isDesignMode } = useContext3(WeaverseContext);
   let { src, type, controls, poster, autoPlay, loop, muted, ...rest } = props;
   return /* @__PURE__ */ React9.createElement("div", {
     ref,
@@ -601,7 +631,7 @@ var Elements = {
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React12, { useContext as useContext3, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import React12, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
 
 // src/utils/index.ts
 function shortCssObject(css10) {
@@ -667,7 +697,7 @@ var WeaverseRoot = ({ context }) => {
   return null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext3(WeaverseContext);
+  let { stitchesInstance, elementInstances } = useContext4(WeaverseContext);
   let [data, setData] = useState2(instance.data);
   let { id, type, childIds = [], css: css10, className, ...rest } = data;
   useEffect3(() => {
@@ -702,7 +732,7 @@ var ItemComponent = ({ instance }) => {
   }
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext3(WeaverseContext);
+  let context = useContext4(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.7.19",
+  "version": "0.7.21",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,7 +31,7 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.7.19",
+    "@weaverse/core": "0.7.21",
     "nuka-carousel": "^5.4.0"
   }
 }