@weaverse/react 0.6.22 → 0.6.26

package/dist/index.d.ts

@@ -18,8 +18,9 @@ declare type WeaverseRootPropsType = {
 declare type ItemComponentProps = {
     instance: InstanceType<typeof WeaverseItemStore>;
 };
-interface PlaceholderProps extends WeaverseElementProps {
+interface PlaceholderProps {
     element: string;
+    children: ReactElement | ReactElement[] | ReactNode | ReactNode[];
 }
 interface ButtonElementProps extends WeaverseElementProps {
     value: string;
@@ -33,6 +34,11 @@ interface ContainerElementProps extends WeaverseElementProps {
 interface ImageElementProps extends WeaverseElementProps {
     src: string;
     alt: string;
+    objectFit: 'contain' | 'cover';
+    objectPosition: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'center left' | 'center right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+    onClickAction: 'none' | 'open-lightbox' | 'open-link';
+    linkTo?: string;
+    openLinkInNewTab?: boolean;
 }
 interface LayoutElementProps extends WeaverseElementProps {
     gridSize: number;
@@ -87,6 +93,6 @@ declare type InstagramMedia = {
     caption: string;
 };
 
-declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
+declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
 
 export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react10 = require("react");
+var import_react13 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -224,7 +224,7 @@ Countdown.defaultProps = {
         width: 48,
         textAlign: "center"
       },
-      "& .wv-countdown-label": {
+      ".wv-countdown-label": {
         fontSize: 10
       },
       "& > span": {
@@ -241,23 +241,58 @@ var countdown_default = Countdown;
 // src/elements/image.tsx
 var import_react4 = __toESM(require("react"));
 var Image = import_react4.default.forwardRef((props, ref) => {
-  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
-  return /* @__PURE__ */ import_react4.default.createElement("div", __spreadValues({
+  let { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
+  let _a = props, {
+    src,
+    alt,
+    objectFit,
+    objectPosition,
+    onClickAction,
+    openLinkInNewTab
+  } = _a, rest = __objRest(_a, [
+    "src",
+    "alt",
+    "objectFit",
+    "objectPosition",
+    "onClickAction",
+    "openLinkInNewTab"
+  ]);
+  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__ */ import_react4.default.createElement("div", __spreadProps(__spreadValues({
     ref
-  }, rest), /* @__PURE__ */ import_react4.default.createElement("img", {
+  }, rest), {
+    style,
+    onClick: handleClick
+  }), /* @__PURE__ */ import_react4.default.createElement("img", {
     alt,
     src
   }));
 });
 Image.defaultProps = {
   src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
-  alt: "weaverse image element",
+  alt: "Image alt text",
+  objectFit: "cover",
+  objectPosition: "center",
+  onClickAction: "open-lightbox",
+  openLinkInNewTab: false,
   css: {
     "@desktop": {
       img: {
         width: "100%",
         height: "100%",
-        objectFit: "cover"
+        objectFit: "var(--wv-img-object-fit, cover)",
+        objectPosition: "var(--wv-img-object-position, center)"
       }
     }
   }
@@ -411,12 +446,16 @@ var import_react8 = __toESM(require("react"));
 var Placeholder = (0, import_react8.forwardRef)((props, ref) => {
   let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
   let style = {
+    position: "absolute",
     height: "100%",
+    width: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    color: "#374151"
+    color: "#374151",
+    pointerEvents: "none",
+    zIndex: 1
   };
   return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
     style,
@@ -430,10 +469,9 @@ var Placeholder_default = Placeholder;
 // src/elements/instagram.tsx
 var INSTAGRAM_API = "https://graph.instagram.com";
 var Instagram = (0, import_react9.forwardRef)((props, ref) => {
-  const _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
-  const [media, setMedia] = (0, import_react9.useState)([]);
-  const [error, setError] = (0, import_react9.useState)(null);
-  let { isDesignMode } = (0, import_react9.useContext)(WeaverseContext);
+  let _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
+  let [media, setMedia] = (0, import_react9.useState)([]);
+  let [error, setError] = (0, import_react9.useState)(null);
   (0, import_react9.useEffect)(() => {
     if (token) {
       let params = new URLSearchParams({
@@ -459,7 +497,7 @@ var Instagram = (0, import_react9.forwardRef)((props, ref) => {
   }
   let style = {
     "--wv-ig-images-per-row": imagesPerRow,
-    "--wv-ig-images-gap": gap
+    "--wv-ig-images-gap": gap + "px"
   };
   return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({
     ref
@@ -468,15 +506,15 @@ var Instagram = (0, import_react9.forwardRef)((props, ref) => {
   }), /* @__PURE__ */ import_react9.default.createElement("div", {
     className: "wv-ig-media-container"
   }, media.slice(0, numberOfImages).map((item) => {
-    let linkProps;
-    if (!isDesignMode) {
-      linkProps = { href: item.permalink, target: "_blank" };
-    }
-    return /* @__PURE__ */ import_react9.default.createElement("a", __spreadValues({
-      key: item.id
-    }, linkProps), /* @__PURE__ */ import_react9.default.createElement("img", {
-      alt: item.caption,
-      src: item.media_url
+    let { id, permalink, caption, media_url } = item;
+    return /* @__PURE__ */ import_react9.default.createElement("a", {
+      key: id,
+      href: permalink,
+      target: "_blank",
+      rel: "noreferrer"
+    }, /* @__PURE__ */ import_react9.default.createElement("img", {
+      alt: caption,
+      src: media_url
     }));
   })));
 });
@@ -507,6 +545,126 @@ Instagram.defaultProps = {
 };
 var instagram_default = Instagram;
 
+// src/elements/accordion/index.tsx
+var import_react10 = __toESM(require("react"));
+var AccordionContext = (0, import_react10.createContext)({
+  active: null,
+  setActive: () => {
+  }
+});
+var Accordion = (0, import_react10.forwardRef)((props, ref) => {
+  const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
+  const [active, setActive] = (0, import_react10.useState)(null);
+  const setOpenAccordion = (id) => {
+    if (id === active) {
+      setActive(null);
+    } else {
+      setActive(id);
+    }
+  };
+  console.info("9779 active", active);
+  return /* @__PURE__ */ import_react10.default.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ import_react10.default.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: 4,
+        marginBottom: 4,
+        backgroundColor: "#aaa",
+        "&.active": {
+          color: "blue"
+        },
+        '&.active + [data-wv-type="accordion.content"]': {
+          display: "grid"
+        }
+      }
+    }
+  }
+};
+var accordion_default = Accordion;
+
+// src/elements/accordion/AccordionWrapper.tsx
+var import_react11 = __toESM(require("react"));
+var AccordionWrapper = (0, import_react11.forwardRef)((props, ref) => {
+  const _a = props, { wrapperId, headerText, children } = _a, rest = __objRest(_a, ["wrapperId", "headerText", "children"]);
+  const { active, setActive } = (0, import_react11.useContext)(AccordionContext);
+  return /* @__PURE__ */ import_react11.default.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ import_react11.default.createElement("div", {
+    onClick: () => setActive(wrapperId),
+    className: `wv-accordion-header ${active === wrapperId ? "active" : ""}`
+  }, headerText, " #", wrapperId), children);
+});
+AccordionWrapper.defaultProps = {
+  wrapperId: 1,
+  headerText: "Header 1",
+  css: {
+    "@desktop": {
+      maxHeight: "100%"
+    }
+  }
+};
+var AccordionWrapper_default = AccordionWrapper;
+
+// src/elements/accordion/AccordionContent.tsx
+var import_react12 = __toESM(require("react"));
+var AccordionContent = (0, import_react12.forwardRef)((props, ref) => {
+  const _a = props, { rows, columns, gap, rowSize, children } = _a, rest = __objRest(_a, ["rows", "columns", "gap", "rowSize", "children"]);
+  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))"
+  };
+  return /* @__PURE__ */ import_react12.default.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), import_react12.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react12.default.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)",
+      backgroundColor: "#DDD",
+      display: "none",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      borderRadius: 4
+    }
+  }
+};
+var AccordionContent_default = AccordionContent;
+
 // src/elements/index.ts
 var elements = {
   Countdown: {
@@ -544,6 +702,18 @@ var elements = {
   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"
   }
 };
 var elements_default = elements;
@@ -556,13 +726,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react10.createContext)({});
+var WeaverseContext = (0, import_react13.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react11 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -589,10 +759,10 @@ function generateItemClass(instance, stitchesInstance) {
 
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
-  var _a;
-  let [, setData] = (0, import_react11.useState)(context.projectData);
-  let rootRef = (0, import_react11.useRef)();
-  (0, import_react11.useEffect)(() => {
+  var _a, _b;
+  let [, setData] = (0, import_react14.useState)(context.projectData);
+  let rootRef = (0, import_react14.useRef)();
+  (0, import_react14.useEffect)(() => {
     let update = () => setData({});
     context.subscribe(update);
     if (context.projectData) {
@@ -605,21 +775,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_react11.default.createElement("div", __spreadProps(__spreadValues({
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react14.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react14.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
-    id: context.projectData.rootId || 0
-  })));
+  }, /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
+    id: context.projectData.rootId
+  }))) : 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_react14.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react14.useState)(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     var _a2;
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
@@ -639,12 +809,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react11.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react14.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -652,15 +822,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react11.useContext)(WeaverseContext);
+  let context = (0, import_react14.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react11.default.createElement("div", {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react11.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react14.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 
 // src/context.ts
 import { Weaverse } from "@weaverse/core";
-import { createContext } from "react";
+import { createContext as createContext2 } from "react";
 
 // src/elements/button.tsx
 import * as React from "react";
@@ -194,7 +194,7 @@ Countdown.defaultProps = {
         width: 48,
         textAlign: "center"
       },
-      "& .wv-countdown-label": {
+      ".wv-countdown-label": {
         fontSize: 10
       },
       "& > span": {
@@ -209,25 +209,60 @@ Countdown.defaultProps = {
 var countdown_default = Countdown;
 
 // src/elements/image.tsx
-import React5 from "react";
+import React5, { useContext as useContext2 } from "react";
 var Image = React5.forwardRef((props, ref) => {
-  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
-  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
+  let { isDesignMode } = useContext2(WeaverseContext);
+  let _a = props, {
+    src,
+    alt,
+    objectFit,
+    objectPosition,
+    onClickAction,
+    openLinkInNewTab
+  } = _a, rest = __objRest(_a, [
+    "src",
+    "alt",
+    "objectFit",
+    "objectPosition",
+    "onClickAction",
+    "openLinkInNewTab"
+  ]);
+  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", __spreadProps(__spreadValues({
     ref
-  }, rest), /* @__PURE__ */ React5.createElement("img", {
+  }, rest), {
+    style,
+    onClick: handleClick
+  }), /* @__PURE__ */ React5.createElement("img", {
     alt,
     src
   }));
 });
 Image.defaultProps = {
   src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
-  alt: "weaverse image element",
+  alt: "Image alt text",
+  objectFit: "cover",
+  objectPosition: "center",
+  onClickAction: "open-lightbox",
+  openLinkInNewTab: false,
   css: {
     "@desktop": {
       img: {
         width: "100%",
         height: "100%",
-        objectFit: "cover"
+        objectFit: "var(--wv-img-object-fit, cover)",
+        objectPosition: "var(--wv-img-object-position, center)"
       }
     }
   }
@@ -335,9 +370,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 _a = props, { src, type, controls, poster, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "poster", "autoPlay", "loop", "muted"]);
   return /* @__PURE__ */ React9.createElement("div", __spreadValues({
     ref
@@ -374,19 +409,23 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-import React11, { forwardRef as forwardRef9, useContext as useContext3, useEffect as useEffect2, useState } from "react";
+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 _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
   let style = {
+    position: "absolute",
     height: "100%",
+    width: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    color: "#374151"
+    color: "#374151",
+    pointerEvents: "none",
+    zIndex: 1
   };
   return /* @__PURE__ */ React10.createElement("div", __spreadValues({
     style,
@@ -400,10 +439,9 @@ var Placeholder_default = Placeholder;
 // src/elements/instagram.tsx
 var INSTAGRAM_API = "https://graph.instagram.com";
 var Instagram = forwardRef9((props, ref) => {
-  const _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
-  const [media, setMedia] = useState([]);
-  const [error, setError] = useState(null);
-  let { isDesignMode } = useContext3(WeaverseContext);
+  let _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
+  let [media, setMedia] = useState([]);
+  let [error, setError] = useState(null);
   useEffect2(() => {
     if (token) {
       let params = new URLSearchParams({
@@ -429,7 +467,7 @@ var Instagram = forwardRef9((props, ref) => {
   }
   let style = {
     "--wv-ig-images-per-row": imagesPerRow,
-    "--wv-ig-images-gap": gap
+    "--wv-ig-images-gap": gap + "px"
   };
   return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
     ref
@@ -438,15 +476,15 @@ var Instagram = forwardRef9((props, ref) => {
   }), /* @__PURE__ */ React11.createElement("div", {
     className: "wv-ig-media-container"
   }, media.slice(0, numberOfImages).map((item) => {
-    let linkProps;
-    if (!isDesignMode) {
-      linkProps = { href: item.permalink, target: "_blank" };
-    }
-    return /* @__PURE__ */ React11.createElement("a", __spreadValues({
-      key: item.id
-    }, linkProps), /* @__PURE__ */ React11.createElement("img", {
-      alt: item.caption,
-      src: item.media_url
+    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
     }));
   })));
 });
@@ -477,6 +515,126 @@ Instagram.defaultProps = {
 };
 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 _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
+  const [active, setActive] = useState2(null);
+  const setOpenAccordion = (id) => {
+    if (id === active) {
+      setActive(null);
+    } else {
+      setActive(id);
+    }
+  };
+  console.info("9779 active", active);
+  return /* @__PURE__ */ React12.createElement("div", __spreadValues({
+    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: 4,
+        marginBottom: 4,
+        backgroundColor: "#aaa",
+        "&.active": {
+          color: "blue"
+        },
+        '&.active + [data-wv-type="accordion.content"]': {
+          display: "grid"
+        }
+      }
+    }
+  }
+};
+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 _a = props, { wrapperId, headerText, children } = _a, rest = __objRest(_a, ["wrapperId", "headerText", "children"]);
+  const { active, setActive } = useContext4(AccordionContext);
+  return /* @__PURE__ */ React13.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ React13.createElement("div", {
+    onClick: () => setActive(wrapperId),
+    className: `wv-accordion-header ${active === wrapperId ? "active" : ""}`
+  }, headerText, " #", wrapperId), children);
+});
+AccordionWrapper.defaultProps = {
+  wrapperId: 1,
+  headerText: "Header 1",
+  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 _a = props, { rows, columns, gap, rowSize, children } = _a, rest = __objRest(_a, ["rows", "columns", "gap", "rowSize", "children"]);
+  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))"
+  };
+  return /* @__PURE__ */ React14.createElement("div", __spreadProps(__spreadValues({
+    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)",
+      backgroundColor: "#DDD",
+      display: "none",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      borderRadius: 4
+    }
+  }
+};
+var AccordionContent_default = AccordionContent;
+
 // src/elements/index.ts
 var elements = {
   Countdown: {
@@ -514,6 +672,18 @@ var elements = {
   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"
   }
 };
 var elements_default = elements;
@@ -526,13 +696,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = createContext({});
+var WeaverseContext = createContext2({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React12, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import React15, { useContext as useContext5, useEffect as useEffect3, useRef, useState as useState3 } from "react";
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -559,8 +729,8 @@ function generateItemClass(instance, stitchesInstance) {
 
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
-  var _a;
-  let [, setData] = useState2(context.projectData);
+  var _a, _b;
+  let [, setData] = useState3(context.projectData);
   let rootRef = useRef();
   useEffect3(() => {
     let update = () => setData({});
@@ -575,19 +745,19 @@ 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__ */ React12.createElement("div", __spreadProps(__spreadValues({
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ React15.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ React15.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React12.createElement(ItemInstance, {
-    id: context.projectData.rootId || 0
-  })));
+  }, /* @__PURE__ */ React15.createElement(ItemInstance, {
+    id: context.projectData.rootId
+  }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext4(WeaverseContext);
-  let [data, setData] = useState2(instance.data);
+  let { stitchesInstance, elementInstances } = useContext5(WeaverseContext);
+  let [data, setData] = useState3(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
   useEffect3(() => {
     var _a2;
@@ -609,12 +779,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React12.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ React15.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ React12.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ React15.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -622,15 +792,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext4(WeaverseContext);
+  let context = useContext5(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React15.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React12.createElement(ItemComponent, {
+  return /* @__PURE__ */ React15.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.22",
+  "version": "0.6.26",
   "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.22"
+    "@weaverse/core": "0.6.26"
   }
 }