@weaverse/react 0.6.28 → 0.7.0

package/dist/index.mjs

@@ -0,0 +1,949 @@
+// src/context.ts
+import { Weaverse } from "@weaverse/core";
+import { createContext as createContext3 } from "react";
+
+// src/elements/button.tsx
+import * as React from "react";
+var Button = React.forwardRef((props, ref) => {
+  let { openInNewTab, target, value, ...rest } = props;
+  if (target) {
+    return /* @__PURE__ */ React.createElement("a", {
+      href: target,
+      target: openInNewTab ? "_blank" : "_self",
+      rel: "noreferrer",
+      ...rest,
+      ref
+    }, value);
+  }
+  return /* @__PURE__ */ React.createElement("button", {
+    ref,
+    ...rest
+  }, value);
+});
+Button.defaultProps = {
+  value: "Shop now",
+  openInNewTab: false,
+  target: "",
+  type: "button",
+  css: {
+    "@desktop": {
+      borderRadius: "72px",
+      border: "none",
+      backgroundColor: "#0F71FF",
+      color: "#fff",
+      fontSize: "13px",
+      padding: "10px 20px"
+    }
+  }
+};
+var button_default = Button;
+
+// src/elements/container.tsx
+import React2, { forwardRef as forwardRef2 } from "react";
+var Container = forwardRef2(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ React2.createElement("div", {
+      ref,
+      ...rest
+    }, children);
+  }
+);
+Container.defaultProps = {
+  css: {
+    "@desktop": {
+      alignItems: "flex-start",
+      backgroundColor: "rgba(248,203,203,0.38)",
+      display: "flex",
+      flexDirection: "column",
+      gridArea: "1 / 1 / 3 / 6",
+      height: "fit-content",
+      justifyContent: "flex-start",
+      overflow: "hidden",
+      textAlign: "left",
+      width: "100%"
+    }
+  }
+};
+var container_default = Container;
+
+// src/elements/countdown/index.tsx
+import React4, { forwardRef as forwardRef3, useContext, useEffect } from "react";
+
+// src/elements/countdown/timer-block.tsx
+import React3 from "react";
+function TimerBlock({ value, label }) {
+  return /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", {
+    className: "wv-countdown-number"
+  }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ React3.createElement("div", {
+    className: "wv-countdown-label"
+  }, label));
+}
+
+// src/elements/countdown/utils.ts
+var times = ["days", "hours", "minutes", "seconds"];
+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(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE
+  );
+  const seconds = Math.floor(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3
+  );
+  return { days, hours, minutes, seconds };
+}
+
+// src/elements/countdown/index.tsx
+var Countdown = forwardRef3(
+  (props, ref) => {
+    const { isDesignMode } = useContext(WeaverseContext);
+    let {
+      timerType,
+      startTime,
+      endTime,
+      periods,
+      redirectUrl,
+      openInNewTab,
+      showColon,
+      showLabel,
+      ...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");
+        }
+        setRemaining(remainingTime);
+      }, 1e3);
+      return () => {
+        clearInterval(flag);
+      };
+    }, [startTime, endTime, periods, timerType]);
+    const timer = getTime(remaining);
+    return /* @__PURE__ */ React4.createElement("div", {
+      ref,
+      ...rest
+    }, times.map((time) => {
+      return /* @__PURE__ */ React4.createElement(React4.Fragment, {
+        key: time
+      }, /* @__PURE__ */ React4.createElement(TimerBlock, {
+        label: showLabel ? time : "",
+        value: timer[time]
+      }), time !== "seconds" && /* @__PURE__ */ React4.createElement("span", {
+        className: `wv-countdown-number ${showColon ? "" : "hidden"}`
+      }, ":"));
+    }));
+  }
+);
+Countdown.defaultProps = {
+  timerType: "fixed-time",
+  startTime: Date.now(),
+  endTime: 1661140528e3,
+  periods: 90,
+  redirectUrl: "https://myshop.com",
+  openInNewTab: false,
+  showLabel: true,
+  showColon: true,
+  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"
+      }
+    }
+  }
+};
+var countdown_default = Countdown;
+
+// src/elements/image.tsx
+import React5, { useContext as useContext2 } from "react";
+var Image = React5.forwardRef(
+  (props, ref) => {
+    let { isDesignMode } = useContext2(WeaverseContext);
+    let {
+      src,
+      alt,
+      objectFit,
+      objectPosition,
+      onClickAction,
+      openLinkInNewTab,
+      ...rest
+    } = props;
+    let style = {
+      "--wv-img-object-fit": objectFit,
+      "--wv-img-object-position": objectPosition
+    };
+    let handleClick = () => {
+      if (isDesignMode) {
+        return console.log("Click action:", onClickAction);
+      }
+      if (onClickAction) {
+        console.log("TODO: click action:", onClickAction);
+      }
+    };
+    return /* @__PURE__ */ React5.createElement("div", {
+      ref,
+      ...rest,
+      style,
+      onClick: handleClick
+    }, /* @__PURE__ */ React5.createElement("img", {
+      alt,
+      src
+    }));
+  }
+);
+Image.defaultProps = {
+  src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
+  alt: "Image alt text",
+  objectFit: "cover",
+  objectPosition: "center",
+  onClickAction: "open-lightbox",
+  openLinkInNewTab: false,
+  css: {
+    "@desktop": {
+      img: {
+        width: "100%",
+        height: "100%",
+        objectFit: "var(--wv-img-object-fit, cover)",
+        objectPosition: "var(--wv-img-object-position, center)"
+      }
+    }
+  }
+};
+var image_default = Image;
+
+// src/elements/layout.tsx
+import React6, { forwardRef as forwardRef4 } from "react";
+var Layout = forwardRef4((props, ref) => {
+  let { children, rows, gap, rowSize, columns, gridSize, ...rest } = props;
+  let style = {
+    "--grid-size": gridSize + "px",
+    "--rows": rows,
+    "--columns": columns,
+    "--gap": gap + "px",
+    "--row-size": rowSize + "px",
+    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
+  };
+  return /* @__PURE__ */ React6.createElement("section", {
+    ref,
+    ...rest,
+    style
+  }, /* @__PURE__ */ React6.createElement("div", {
+    "data-layout-content": true
+  }, children));
+});
+Layout.defaultProps = {
+  gridSize: 1224,
+  rows: 12,
+  columns: 12,
+  gap: 16,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      paddingTop: "16px",
+      paddingBottom: "16px",
+      paddingLeft: "var(--gap)",
+      paddingRight: "var(--gap)",
+      "> [data-layout-content]": {
+        margin: "0 auto",
+        display: "grid !important",
+        gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+        gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+        gap: "var(--gap)",
+        maxWidth: "var(--grid-size)"
+      }
+    },
+    "@mobile": {
+      padding: "0 16px",
+      "> [data-layout-content]": {
+        display: "flex !important",
+        flexDirection: "column"
+      }
+    }
+  }
+};
+var layout_default = Layout;
+
+// src/elements/map.tsx
+import React7, { forwardRef as forwardRef5 } from "react";
+var Map = forwardRef5((props, ref) => {
+  let { place, zoom, ...rest } = props;
+  return /* @__PURE__ */ React7.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ React7.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 map_default = Map;
+
+// src/elements/text.tsx
+import * as React8 from "react";
+var Text = React8.forwardRef(
+  (props, ref) => {
+    let { children, value, ...rest } = props;
+    return /* @__PURE__ */ React8.createElement("div", {
+      ref,
+      ...rest,
+      dangerouslySetInnerHTML: { __html: value }
+    });
+  }
+);
+Text.defaultProps = {
+  value: "The quick brown fox jumps over the lazy dog",
+  css: {
+    "@desktop": {
+      width: "100%",
+      height: "fit-content",
+      padding: "20px",
+      outline: "none",
+      wordBreak: "break-word",
+      overflowWrap: "break-word",
+      whiteSpace: "break-spaces"
+    }
+  }
+};
+var text_default = Text;
+
+// src/elements/video.tsx
+import React9, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
+var Video = forwardRef7((props, ref) => {
+  let { isDesignMode } = useContext3(WeaverseContext);
+  let { src, type, controls, poster, autoPlay, loop, muted, ...rest } = props;
+  return /* @__PURE__ */ React9.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ React9.createElement("video", {
+    controls: isDesignMode ? false : controls,
+    autoPlay: isDesignMode ? false : autoPlay,
+    loop,
+    muted: true,
+    controlsList: "nodownload",
+    disablePictureInPicture: true
+  }, /* @__PURE__ */ React9.createElement("source", {
+    src,
+    type: type || "video/mp4"
+  }), "Your browser does not support the video tag."));
+});
+Video.defaultProps = {
+  src: "https://youtu.be/wM-NT6hcw48",
+  poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  loop: false,
+  type: "video/mp4",
+  controls: false,
+  autoPlay: true,
+  muted: true,
+  css: {
+    "@desktop": {
+      video: {
+        height: "100%",
+        width: "100%",
+        aspectRatio: "16 / 9"
+      }
+    }
+  }
+};
+var video_default = Video;
+
+// src/elements/instagram.tsx
+import React11, { forwardRef as forwardRef9, useEffect as useEffect2, useState } from "react";
+
+// src/elements/shared/Placeholder.tsx
+import React10, { forwardRef as forwardRef8 } from "react";
+var Placeholder = forwardRef8(
+  (props, ref) => {
+    let { element, children, ...rest } = props;
+    let style = {
+      position: "absolute",
+      height: "100%",
+      width: "100%",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      color: "#374151",
+      pointerEvents: "none",
+      zIndex: 1
+    };
+    return /* @__PURE__ */ React10.createElement("div", {
+      style,
+      ref,
+      ...rest
+    }, /* @__PURE__ */ React10.createElement("div", {
+      style: { fontWeight: 600, marginBottom: "10px" }
+    }, element), /* @__PURE__ */ React10.createElement("div", null, children));
+  }
+);
+var Placeholder_default = Placeholder;
+
+// src/elements/instagram.tsx
+var INSTAGRAM_API = "https://graph.instagram.com";
+var Instagram = forwardRef9(
+  (props, ref) => {
+    let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
+    let [media, setMedia] = useState([]);
+    let [error, setError] = useState(null);
+    useEffect2(() => {
+      if (token) {
+        let params = new URLSearchParams({
+          access_token: token,
+          fields: "id,media_type,caption,media_url,permalink"
+        });
+        fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
+          if (res.error) {
+            setError(res);
+          } else {
+            setError(null);
+            setMedia([...res.data]);
+          }
+        }).catch(setError);
+      }
+    }, [token]);
+    if (!token || error) {
+      return /* @__PURE__ */ React11.createElement("div", {
+        ref,
+        ...rest
+      }, /* @__PURE__ */ React11.createElement(Placeholder_default, {
+        element: "Instagram"
+      }, !token ? "Connect your Instagram account to display photos on your site." : "Invalid or expired token!"));
+    }
+    let style = {
+      "--wv-ig-images-per-row": imagesPerRow,
+      "--wv-ig-images-gap": gap + "px"
+    };
+    return /* @__PURE__ */ React11.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, /* @__PURE__ */ React11.createElement("div", {
+      className: "wv-ig-media-container"
+    }, media.slice(0, numberOfImages).map((item) => {
+      let { id, permalink, caption, media_url } = item;
+      return /* @__PURE__ */ React11.createElement("a", {
+        key: id,
+        href: permalink,
+        target: "_blank",
+        rel: "noreferrer"
+      }, /* @__PURE__ */ React11.createElement("img", {
+        alt: caption,
+        src: media_url
+      }));
+    })));
+  }
+);
+Instagram.defaultProps = {
+  token: "",
+  username: "",
+  numberOfImages: 8,
+  imagesPerRow: 4,
+  gap: 0,
+  css: {
+    "@desktop": {
+      ".wv-ig-media-container": {
+        overflow: "hidden",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        display: "grid",
+        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%",
+          objectFit: "cover"
+        }
+      }
+    }
+  }
+};
+var instagram_default = Instagram;
+
+// src/elements/accordion/index.tsx
+import React12, { createContext, forwardRef as forwardRef10, useState as useState2 } from "react";
+var AccordionContext = createContext({
+  active: null,
+  setActive: () => {
+  }
+});
+var Accordion = forwardRef10(
+  (props, ref) => {
+    const { items, children, ...rest } = props;
+    const [active, setActive] = useState2(null);
+    const setOpenAccordion = (id) => {
+      if (id === active) {
+        setActive(null);
+      } else {
+        setActive(id);
+      }
+    };
+    return /* @__PURE__ */ React12.createElement("div", {
+      ref,
+      ...rest
+    }, /* @__PURE__ */ React12.createElement(AccordionContext.Provider, {
+      value: { active, setActive: setOpenAccordion }
+    }, children));
+  }
+);
+Accordion.defaultProps = {
+  items: [
+    {
+      id: 1,
+      headerText: "Header 1",
+      childrenId: true
+    },
+    {
+      id: 2,
+      headerText: "Header 2"
+    }
+  ],
+  css: {
+    "@desktop": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      ".wv-accordion-header": {
+        borderRadius: 4,
+        padding: 12,
+        marginBottom: 4,
+        border: "1px solid #76A9FA",
+        "&.active": {
+          color: "blue"
+        },
+        '&.active + [data-wv-type="accordion.content"]': {
+          maxHeight: "var(--max-height, inherit)"
+        }
+      }
+    }
+  }
+};
+var accordion_default = Accordion;
+
+// src/elements/accordion/AccordionWrapper.tsx
+import React13, { forwardRef as forwardRef11, useContext as useContext4 } from "react";
+var AccordionWrapper = forwardRef11((props, ref) => {
+  const { ["data-wv-id"]: wvId, headerText, children, ...rest } = props;
+  const { active, setActive } = useContext4(AccordionContext);
+  return /* @__PURE__ */ React13.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ React13.createElement("div", {
+    onClick: () => setActive(wvId),
+    className: `wv-accordion-header ${active === wvId ? "active" : ""}`
+  }, headerText), children);
+});
+AccordionWrapper.defaultProps = {
+  headerText: "Header text",
+  css: {
+    "@desktop": {
+      maxHeight: "100%"
+    }
+  }
+};
+var AccordionWrapper_default = AccordionWrapper;
+
+// src/elements/accordion/AccordionContent.tsx
+import React14, { forwardRef as forwardRef12 } from "react";
+var AccordionContent = forwardRef12((props, ref) => {
+  const { rows, columns, gap, rowSize, children, ...rest } = props;
+  let style = {
+    "--rows": rows,
+    "--columns": columns,
+    "--gap": gap + "px",
+    "--row-size": rowSize + "px",
+    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
+    "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
+  };
+  return /* @__PURE__ */ React14.createElement("div", {
+    ref,
+    ...rest,
+    style
+  }, React14.Children.count(children) > 0 ? children : /* @__PURE__ */ React14.createElement(Placeholder_default, {
+    element: "Accordion"
+  }, "Item Content"));
+});
+AccordionContent.defaultProps = {
+  rows: 2,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      maxWidth: "var(--grid-size)",
+      display: "grid",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      overflow: "hidden",
+      maxHeight: 0,
+      transition: "all var(--transition-duration, 0.3s) ease-in-out",
+      borderRadius: 4
+    }
+  }
+};
+var AccordionContent_default = AccordionContent;
+
+// src/elements/tab/index.tsx
+import React16, { createContext as createContext2, forwardRef as forwardRef13, useState as useState4 } from "react";
+
+// src/elements/tab/TabHeaderWrapper.tsx
+import React15, { useContext as useContext5, useEffect as useEffect3, useState as useState3 } from "react";
+function TabHeader(props) {
+  const { wvId } = props;
+  const { active, setActive } = useContext5(TabContext);
+  const { itemInstances } = useContext5(WeaverseContext);
+  const instance = itemInstances.get(wvId);
+  let [data, setData] = useState3(instance.data);
+  useEffect3(() => {
+    let update = (data2) => setData({ ...data2 });
+    instance.subscribe(update);
+  }, []);
+  const text = data.headerText;
+  return /* @__PURE__ */ React15.createElement("div", {
+    onClick: () => setActive(wvId),
+    className: `wv-tab-header${active === wvId ? " active" : ""}`
+  }, text);
+}
+function TabHeaderWrapper(props) {
+  const { itemInstances } = useContext5(WeaverseContext);
+  const instance = itemInstances.get(props.wvId);
+  const data = instance.data;
+  const childIds = data.childIds;
+  return /* @__PURE__ */ React15.createElement("div", {
+    className: "wv-tab-headerWrapper"
+  }, childIds.map((id) => /* @__PURE__ */ React15.createElement(TabHeader, {
+    key: id,
+    wvId: id
+  })));
+}
+
+// src/elements/tab/index.tsx
+var TabContext = createContext2({
+  active: null,
+  setActive: () => {
+  }
+});
+var Tab = forwardRef13((props, ref) => {
+  var _a, _b, _c;
+  const wvId = props["data-wv-id"];
+  const { items, children, ...rest } = props;
+  const defaultActive = (_c = (_b = (_a = React16.Children.toArray(children)) == null ? void 0 : _a[0]) == null ? void 0 : _b.props) == null ? void 0 : _c.id;
+  const [active, setActive] = useState4(defaultActive);
+  const setOpenTab = (id) => {
+    if (id === active) {
+      setActive(null);
+    } else {
+      setActive(id);
+    }
+  };
+  return /* @__PURE__ */ React16.createElement("div", {
+    ref,
+    ...rest
+  }, /* @__PURE__ */ React16.createElement(TabContext.Provider, {
+    value: { active, setActive: setOpenTab }
+  }, /* @__PURE__ */ React16.createElement(TabHeaderWrapper, {
+    wvId
+  }), children));
+});
+Tab.defaultProps = {
+  items: [
+    {
+      headerText: "Header 1"
+    },
+    {
+      headerText: "Header 2"
+    },
+    {
+      headerText: "Header 2"
+    }
+  ],
+  css: {
+    "@desktop": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      "& .wv-tab-headerWrapper": {
+        width: "100%",
+        display: "flex",
+        marginBottom: 10
+      },
+      "& .wv-tab-header": {
+        backgroundColor: "#f0f2f3",
+        padding: "10px 16px",
+        cursor: "pointer",
+        "&.active": {
+          backgroundColor: "#0F71FF",
+          color: "#fff"
+        }
+      }
+    }
+  }
+};
+var tab_default = Tab;
+
+// src/elements/tab/TabContent.tsx
+import React17, { forwardRef as forwardRef14, useContext as useContext6 } from "react";
+var TabContent = forwardRef14(
+  (props, ref) => {
+    const { active } = useContext6(TabContext);
+    const wvId = props["data-wv-id"];
+    const { rows, columns, gap, rowSize, children, ...rest } = props;
+    let style = {
+      "--rows": rows,
+      "--columns": columns,
+      "--gap": gap + "px",
+      "--row-size": rowSize + "px",
+      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
+      "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
+      "--content-active": active === wvId ? "grid" : "none"
+    };
+    return /* @__PURE__ */ React17.createElement("div", {
+      ref,
+      ...rest,
+      style
+    }, React17.Children.count(children) > 0 ? children : /* @__PURE__ */ React17.createElement(Placeholder_default, {
+      element: "Tab"
+    }, "Item Content"));
+  }
+);
+TabContent.defaultProps = {
+  rows: 2,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      maxWidth: "var(--grid-size)",
+      display: "var(--content-active, none)",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      borderRadius: 4
+    }
+  }
+};
+var TabContent_default = TabContent;
+
+// src/elements/index.ts
+var elements = {
+  Countdown: {
+    Component: countdown_default,
+    type: "countdown"
+  },
+  Button: {
+    Component: button_default,
+    type: "button"
+  },
+  Container: {
+    Component: container_default,
+    type: "container"
+  },
+  Image: {
+    Component: image_default,
+    type: "image"
+  },
+  Instagram: {
+    Component: instagram_default,
+    type: "instagram"
+  },
+  Layout: {
+    Component: layout_default,
+    type: "layout"
+  },
+  Map: {
+    Component: map_default,
+    type: "map"
+  },
+  Text: {
+    Component: text_default,
+    type: "text"
+  },
+  Video: {
+    Component: video_default,
+    type: "video"
+  },
+  Accordion: {
+    Component: accordion_default,
+    type: "accordion"
+  },
+  AccordionWrapper: {
+    Component: AccordionWrapper_default,
+    type: "accordion.wrapper"
+  },
+  AccordionContent: {
+    Component: AccordionContent_default,
+    type: "accordion.content"
+  },
+  Tab: {
+    Component: tab_default,
+    type: "tab"
+  },
+  TabContent: {
+    Component: TabContent_default,
+    type: "tab.content"
+  }
+};
+var elements_default = elements;
+
+// src/context.ts
+var createRootContext = (configs) => {
+  let rootContext = new Weaverse(configs);
+  Object.keys(elements_default).forEach((key) => {
+    rootContext.registerElement(elements_default[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = createContext3({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
+
+// src/renderer.tsx
+import { isBrowser } from "@weaverse/core";
+import React18, { useContext as useContext7, useEffect as useEffect4, useRef, useState as useState5 } from "react";
+
+// src/utils/index.ts
+var shortCssObject = (css) => {
+  return {
+    "@desktop": css["@desktop"],
+    "@mobile": css["@mobile"]
+  };
+};
+function generateItemClass(instance, stitchesInstance) {
+  var _a, _b, _c, _d;
+  let { css, className: cls = "" } = instance.data;
+  let defaultCss = ((_c = (_b = (_a = instance.Element) == null ? void 0 : _a.Component) == null ? void 0 : _b.defaultProps) == null ? void 0 : _c.css) || {};
+  let className = "";
+  if (css || defaultCss) {
+    let formattedCss = shortCssObject(css || defaultCss);
+    let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
+    let { stitchesClass } = instance;
+    let otherClass = (((_d = instance.ref.current) == null ? void 0 : _d.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
+    className = `${cls} ${newClass} ${otherClass}`.trim();
+    instance.stitchesClass = newClass;
+  }
+  return className;
+}
+
+// src/renderer.tsx
+var WeaverseRoot = ({ context }) => {
+  var _a, _b;
+  let [, setData] = useState5(context.projectData);
+  let rootRef = useRef();
+  let update = () => setData({});
+  useEffect4(() => {
+    context.subscribe(update);
+    context.contentRootElement = rootRef.current;
+    return () => {
+      context.unsubscribe(update);
+    };
+  }, []);
+  let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
+  let themeClass = context.stitchesInstance.theme.className;
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ React18.createElement("div", {
+    className: `weaverse-content-root ${themeClass}`,
+    ...eventHandlers,
+    ref: rootRef
+  }, /* @__PURE__ */ React18.createElement(WeaverseContextProvider, {
+    value: context
+  }, /* @__PURE__ */ React18.createElement(ItemInstance, {
+    id: context.projectData.rootId
+  }))) : null;
+};
+var ItemComponent = ({ instance }) => {
+  let { stitchesInstance, elementInstances } = useContext7(WeaverseContext);
+  let [data, setData] = useState5(instance.data);
+  let { id, type, childIds = [], css, className, ...rest } = data;
+  useEffect4(() => {
+    var _a;
+    let update = (data2) => setData({ ...data2 });
+    instance.subscribe(update);
+    if (isBrowser && !instance.ref.current) {
+      Object.assign(instance.ref, {
+        current: document.querySelector(`[data-wv-id="${id}"]`)
+      });
+    }
+    (_a = instance.ref.current) == null ? void 0 : _a.removeAttribute("css");
+    return () => {
+      instance.unsubscribe(update);
+    };
+  }, []);
+  let Element = elementInstances.get(type);
+  if (Element == null ? void 0 : Element.Component) {
+    let Component = Element.Component;
+    if (Component.$$typeof === Symbol.for("react.forward_ref")) {
+      rest.ref = instance.ref;
+    }
+    return /* @__PURE__ */ React18.createElement(Component, {
+      key: id,
+      "data-wv-type": type,
+      "data-wv-id": id,
+      className: generateItemClass(instance, stitchesInstance),
+      ...rest
+    }, childIds.map((id2) => /* @__PURE__ */ React18.createElement(ItemInstance, {
+      key: id2,
+      id: id2
+    })));
+  }
+  return null;
+};
+var ItemInstance = ({ id }) => {
+  let context = useContext7(WeaverseContext);
+  let { itemInstances } = context;
+  let instance = itemInstances.get(id);
+  if (!instance) {
+    return /* @__PURE__ */ React18.createElement("div", {
+      style: { display: "none" }
+    }, "Item instance ", id, " not found");
+  }
+  return /* @__PURE__ */ React18.createElement(ItemComponent, {
+    instance
+  });
+};
+
+// src/index.ts
+export * from "@weaverse/core";
+export {
+  WeaverseContext,
+  WeaverseContextConsumer,
+  WeaverseContextProvider,
+  WeaverseRoot,
+  createRootContext
+};