@weaverse/react 0.6.17 → 0.6.20

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { WeaverseType, Weaverse, WeaverseItemStore } from '@weaverse/core';
+import { ReactElement, ReactNode } from 'react';
+import { WeaverseType, Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
 export * from '@weaverse/core';
 
 declare let createRootContext: (configs: WeaverseType) => Weaverse;
@@ -7,17 +8,85 @@ declare let WeaverseContext: react.Context<Weaverse>;
 declare let WeaverseContextProvider: react.Provider<Weaverse>;
 declare let WeaverseContextConsumer: react.Consumer<Weaverse>;
 
-interface WeaverseElementProps {
-    children?: React.ReactNode;
+interface WeaverseElementProps extends ReactElement {
+    css?: ElementCSS;
+    children?: ReactElement | ReactElement[] | ReactNode | ReactNode[];
 }
 declare type WeaverseRootPropsType = {
     context: Weaverse;
 };
-declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
 declare type ItemComponentProps = {
     instance: InstanceType<typeof WeaverseItemStore>;
 };
+interface PlaceholderProps extends WeaverseElementProps {
+    element: string;
+}
+interface ButtonElementProps extends WeaverseElementProps {
+    value: string;
+    openInNewTab: boolean;
+    target: string;
+    type: 'button' | 'submit' | 'reset';
+}
+interface ContainerElementProps extends WeaverseElementProps {
+    [key: string]: any;
+}
+interface ImageElementProps extends WeaverseElementProps {
+    src: string;
+    alt: string;
+}
+interface LayoutElementProps extends WeaverseElementProps {
+    gridSize: number;
+    rows: number;
+    columns: number;
+    gap: number;
+    rowSize: number;
+}
+interface MapElementProps extends WeaverseElementProps {
+    place: string;
+    zoom: number;
+}
+interface TextElementProps extends WeaverseElementProps {
+    value: string;
+}
+interface VideoElementProps extends WeaverseElementProps {
+    src: string;
+    poster: string;
+    loop: boolean;
+    type: string;
+    controls: boolean;
+    autoPlay: boolean;
+    muted: boolean;
+}
+declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
+interface CountdownElementProps extends WeaverseElementProps {
+    timerType: 'fixed-time' | 'evergreen';
+    startTime: number;
+    endTime: number;
+    periods: number;
+    redirectUrl: string;
+    openInNewTab: boolean;
+    showLabel: boolean;
+    showColon: boolean;
+}
+declare type TimerBlockProps = {
+    label: string;
+    value: number;
+};
+interface InstagramElementProps extends WeaverseElementProps {
+    token: string;
+    username: string;
+    numberOfImages: number;
+    imagesPerRow: number;
+    gap: number;
+}
+declare type InstagramMedia = {
+    id: string;
+    media_type: 'IMAGE' | 'CAROUSEL_ALBUM';
+    media_url: string;
+    permalink: string;
+    caption: string;
+};
 
 declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
 
-export { CountdownTimeKey, ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };
+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,12 +62,12 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
 var Button = React.forwardRef((props, ref) => {
-  const _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
+  let _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
   if (target) {
     return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
       href: target,
@@ -102,9 +102,10 @@ var button_default = Button;
 // src/elements/container.tsx
 var import_react = __toESM(require("react"));
 var Container = (0, import_react.forwardRef)((props, ref) => {
+  let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
   return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({
     ref
-  }, props));
+  }, rest), children);
 });
 Container.defaultProps = {
   css: {
@@ -178,7 +179,7 @@ var Countdown = (0, import_react3.forwardRef)((props, ref) => {
   }
   (0, import_react3.useEffect)(() => {
     const flag = setInterval(() => {
-      const remainingTime = Math.max((timerType === "specific" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
+      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");
       }
@@ -203,7 +204,7 @@ var Countdown = (0, import_react3.forwardRef)((props, ref) => {
   }));
 });
 Countdown.defaultProps = {
-  timerType: "specific",
+  timerType: "fixed-time",
   startTime: Date.now(),
   endTime: 1661140528e3,
   periods: 90,
@@ -240,10 +241,10 @@ 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, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
-  return /* @__PURE__ */ import_react4.default.createElement("img", __spreadProps(__spreadValues({
+  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
+  return /* @__PURE__ */ import_react4.default.createElement("div", __spreadValues({
     ref
-  }, rest), {
+  }, rest), /* @__PURE__ */ import_react4.default.createElement("img", {
     alt,
     src
   }));
@@ -253,12 +254,11 @@ Image.defaultProps = {
   alt: "weaverse image element",
   css: {
     "@desktop": {
-      width: "100%",
-      height: "100%",
-      objectFit: "cover"
-    },
-    "@mobile": {
-      display: "block"
+      img: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      }
     }
   }
 };
@@ -268,17 +268,19 @@ var image_default = Image;
 var import_react5 = __toESM(require("react"));
 var Layout = (0, import_react5.forwardRef)((props, ref) => {
   let _a = props, { children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["children", "rows", "gap", "rowSize", "columns", "gridSize"]);
-  return /* @__PURE__ */ import_react5.default.createElement("section", __spreadValues({
-    ref,
-    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))"
-    }
-  }, rest), /* @__PURE__ */ import_react5.default.createElement("div", {
+  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__ */ import_react5.default.createElement("section", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), /* @__PURE__ */ import_react5.default.createElement("div", {
     "data-layout-content": true
   }, children));
 });
@@ -317,7 +319,7 @@ var layout_default = Layout;
 // src/elements/map.tsx
 var import_react6 = __toESM(require("react"));
 var Map = (0, import_react6.forwardRef)((props, ref) => {
-  const _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
+  let _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
   return /* @__PURE__ */ import_react6.default.createElement("div", __spreadValues({
     ref
   }, rest), /* @__PURE__ */ import_react6.default.createElement("iframe", {
@@ -327,19 +329,12 @@ var Map = (0, import_react6.forwardRef)((props, ref) => {
     height: "100%",
     title: "map",
     src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
-    style: {
-      pointerEvents: "none"
-    }
+    style: { pointerEvents: "none" }
   }));
 });
 Map.defaultProps = {
   place: "Hanoi",
-  zoom: 14,
-  css: {
-    "@desktop": {
-      gridArea: "1 / 1 / 11 / 13"
-    }
-  }
+  zoom: 14
 };
 var map_default = Map;
 
@@ -359,8 +354,7 @@ Text.defaultProps = {
     "@desktop": {
       width: "100%",
       height: "fit-content",
-      padding: 0,
-      margin: 0,
+      padding: "20px",
       outline: "none",
       wordBreak: "break-word",
       overflowWrap: "break-word",
@@ -373,23 +367,24 @@ var text_default = Text;
 // src/elements/video.tsx
 var import_react7 = __toESM(require("react"));
 var Video = (0, import_react7.forwardRef)((props, ref) => {
-  const { isDesignMode } = (0, import_react7.useContext)(WeaverseContext);
+  let { isDesignMode } = (0, import_react7.useContext)(WeaverseContext);
   let _a = props, { src, type, controls, poster, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "poster", "autoPlay", "loop", "muted"]);
-  return /* @__PURE__ */ import_react7.default.createElement("video", __spreadValues({
-    ref,
+  return /* @__PURE__ */ import_react7.default.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ import_react7.default.createElement("video", {
     controls: isDesignMode ? false : controls,
     autoPlay: isDesignMode ? false : autoPlay,
     loop,
     muted: true,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, rest), /* @__PURE__ */ import_react7.default.createElement("source", {
+  }, /* @__PURE__ */ import_react7.default.createElement("source", {
     src,
     type: type || "video/mp4"
-  }));
+  }), "Your browser does not support the video tag."));
 });
 Video.defaultProps = {
-  src: "https://ucarecdn.com/7cae0dab-8966-4484-9998-602728c360ca/IMG_0048.MOV",
+  src: "https://youtu.be/wM-NT6hcw48",
   poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
   loop: false,
   type: "video/mp4",
@@ -398,64 +393,113 @@ Video.defaultProps = {
   muted: true,
   css: {
     "@desktop": {
-      height: "fit-content",
-      margin: 0,
-      outline: "none",
-      overflowWrap: "break-word",
-      padding: 0,
-      whitespace: "break-spaces",
-      width: "100%",
-      wordBreak: "break-word"
+      video: {
+        height: "100%",
+        width: "100%",
+        aspectRatio: "16 / 9"
+      }
     }
   }
 };
 var video_default = Video;
 
 // src/elements/instagram.tsx
+var import_react9 = __toESM(require("react"));
+
+// src/elements/shared/Placeholder.tsx
 var import_react8 = __toESM(require("react"));
-var Instagram = (0, import_react8.forwardRef)((props, ref) => {
-  const { stitchesInstance } = (0, import_react8.useContext)(WeaverseContext);
-  const _a = props, { token, numberOfImages, imagesPerRow, className } = _a, rest = __objRest(_a, ["token", "numberOfImages", "imagesPerRow", "className"]);
-  const [media, setMedia] = (0, import_react8.useState)([]);
-  (0, import_react8.useEffect)(() => {
-    const url = `https://graph.instagram.com/me/media?fields=id,media_type,caption,media_url&access_token=${token}`;
-    fetch(url).then((res) => res.json()).then((res) => {
-      setMedia(res.data);
-    });
-  }, [token]);
-  const css = {
-    gridTemplateColumns: `repeat(${imagesPerRow[0] || 1}, 1fr)`
+var Placeholder = (0, import_react8.forwardRef)((props, ref) => {
+  let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
+  let style = {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#374151"
   };
-  const { className: instagramClass = "" } = stitchesInstance.css(css)();
   return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
-    className: `${className} ${instagramClass}`,
+    style,
     ref
-  }, rest), !token ? "Token is empty" : media.map((item, key) => {
-    return /* @__PURE__ */ import_react8.default.createElement("div", {
-      key,
-      className: "wv-instagram-item"
-    }, /* @__PURE__ */ import_react8.default.createElement("img", {
-      width: "100%",
-      height: "100%",
+  }, rest), /* @__PURE__ */ import_react8.default.createElement("div", {
+    style: { fontWeight: 600, marginBottom: "10px" }
+  }, element), /* @__PURE__ */ import_react8.default.createElement("div", null, children));
+});
+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);
+  (0, import_react9.useEffect)(() => {
+    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__ */ import_react9.default.createElement("div", __spreadValues({
+      ref
+    }, rest), /* @__PURE__ */ import_react9.default.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
+  };
+  return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), /* @__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
     }));
-  }));
+  })));
 });
 Instagram.defaultProps = {
   token: "",
-  numberOfImages: [12],
-  imagesPerRow: [4],
+  username: "",
+  numberOfImages: 8,
+  imagesPerRow: 4,
+  gap: 0,
   css: {
     "@desktop": {
-      display: "grid",
-      gridTemplateColumns: "repeat(4, 1fr)",
-      "& .wv-instagram-item": {
-        width: "100%",
-        height: "100%",
-        backgroundColor: "red",
-        "& img": {
-          objectFit: "contain"
+      ".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"
         }
       }
     }
@@ -512,13 +556,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react9.createContext)({});
+var WeaverseContext = (0, import_react10.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -546,9 +590,9 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = (0, import_react10.useState)(context.projectData);
-  let rootRef = (0, import_react10.useRef)();
-  (0, import_react10.useEffect)(() => {
+  let [, setData] = (0, import_react11.useState)(context.projectData);
+  let rootRef = (0, import_react11.useRef)();
+  (0, import_react11.useEffect)(() => {
     let update = () => setData({});
     context.subscribe(update);
     if (context.projectData) {
@@ -561,21 +605,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_react10.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react11.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react10.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react10.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react10.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react11.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react11.useState)(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     var _a2;
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
@@ -595,12 +639,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react10.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react11.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -608,15 +652,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react10.useContext)(WeaverseContext);
+  let context = (0, import_react11.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react10.default.createElement("div", {
+    return /* @__PURE__ */ import_react11.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react10.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react11.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -37,7 +37,7 @@ import { createContext } from "react";
 // src/elements/button.tsx
 import * as React from "react";
 var Button = React.forwardRef((props, ref) => {
-  const _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
+  let _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
   if (target) {
     return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
       href: target,
@@ -72,9 +72,10 @@ var button_default = Button;
 // src/elements/container.tsx
 import React2, { forwardRef as forwardRef2 } from "react";
 var Container = forwardRef2((props, ref) => {
+  let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
   return /* @__PURE__ */ React2.createElement("div", __spreadValues({
     ref
-  }, props));
+  }, rest), children);
 });
 Container.defaultProps = {
   css: {
@@ -148,7 +149,7 @@ var Countdown = forwardRef3((props, ref) => {
   }
   useEffect(() => {
     const flag = setInterval(() => {
-      const remainingTime = Math.max((timerType === "specific" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
+      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");
       }
@@ -173,7 +174,7 @@ var Countdown = forwardRef3((props, ref) => {
   }));
 });
 Countdown.defaultProps = {
-  timerType: "specific",
+  timerType: "fixed-time",
   startTime: Date.now(),
   endTime: 1661140528e3,
   periods: 90,
@@ -210,10 +211,10 @@ var countdown_default = Countdown;
 // src/elements/image.tsx
 import React5 from "react";
 var Image = React5.forwardRef((props, ref) => {
-  let _a = props, { src, alt, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
-  return /* @__PURE__ */ React5.createElement("img", __spreadProps(__spreadValues({
+  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
+  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
     ref
-  }, rest), {
+  }, rest), /* @__PURE__ */ React5.createElement("img", {
     alt,
     src
   }));
@@ -223,12 +224,11 @@ Image.defaultProps = {
   alt: "weaverse image element",
   css: {
     "@desktop": {
-      width: "100%",
-      height: "100%",
-      objectFit: "cover"
-    },
-    "@mobile": {
-      display: "block"
+      img: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      }
     }
   }
 };
@@ -238,17 +238,19 @@ var image_default = Image;
 import React6, { forwardRef as forwardRef4 } from "react";
 var Layout = forwardRef4((props, ref) => {
   let _a = props, { children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["children", "rows", "gap", "rowSize", "columns", "gridSize"]);
-  return /* @__PURE__ */ React6.createElement("section", __spreadValues({
-    ref,
-    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))"
-    }
-  }, rest), /* @__PURE__ */ React6.createElement("div", {
+  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", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), /* @__PURE__ */ React6.createElement("div", {
     "data-layout-content": true
   }, children));
 });
@@ -287,7 +289,7 @@ var layout_default = Layout;
 // src/elements/map.tsx
 import React7, { forwardRef as forwardRef5 } from "react";
 var Map = forwardRef5((props, ref) => {
-  const _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
+  let _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
   return /* @__PURE__ */ React7.createElement("div", __spreadValues({
     ref
   }, rest), /* @__PURE__ */ React7.createElement("iframe", {
@@ -297,19 +299,12 @@ var Map = forwardRef5((props, ref) => {
     height: "100%",
     title: "map",
     src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
-    style: {
-      pointerEvents: "none"
-    }
+    style: { pointerEvents: "none" }
   }));
 });
 Map.defaultProps = {
   place: "Hanoi",
-  zoom: 14,
-  css: {
-    "@desktop": {
-      gridArea: "1 / 1 / 11 / 13"
-    }
-  }
+  zoom: 14
 };
 var map_default = Map;
 
@@ -329,8 +324,7 @@ Text.defaultProps = {
     "@desktop": {
       width: "100%",
       height: "fit-content",
-      padding: 0,
-      margin: 0,
+      padding: "20px",
       outline: "none",
       wordBreak: "break-word",
       overflowWrap: "break-word",
@@ -343,23 +337,24 @@ var text_default = Text;
 // src/elements/video.tsx
 import React9, { forwardRef as forwardRef7, useContext as useContext2 } from "react";
 var Video = forwardRef7((props, ref) => {
-  const { isDesignMode } = useContext2(WeaverseContext);
+  let { isDesignMode } = useContext2(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("video", __spreadValues({
-    ref,
+  return /* @__PURE__ */ React9.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ React9.createElement("video", {
     controls: isDesignMode ? false : controls,
     autoPlay: isDesignMode ? false : autoPlay,
     loop,
     muted: true,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, rest), /* @__PURE__ */ React9.createElement("source", {
+  }, /* @__PURE__ */ React9.createElement("source", {
     src,
     type: type || "video/mp4"
-  }));
+  }), "Your browser does not support the video tag."));
 });
 Video.defaultProps = {
-  src: "https://ucarecdn.com/7cae0dab-8966-4484-9998-602728c360ca/IMG_0048.MOV",
+  src: "https://youtu.be/wM-NT6hcw48",
   poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
   loop: false,
   type: "video/mp4",
@@ -368,64 +363,113 @@ Video.defaultProps = {
   muted: true,
   css: {
     "@desktop": {
-      height: "fit-content",
-      margin: 0,
-      outline: "none",
-      overflowWrap: "break-word",
-      padding: 0,
-      whitespace: "break-spaces",
-      width: "100%",
-      wordBreak: "break-word"
+      video: {
+        height: "100%",
+        width: "100%",
+        aspectRatio: "16 / 9"
+      }
     }
   }
 };
 var video_default = Video;
 
 // src/elements/instagram.tsx
-import React10, { forwardRef as forwardRef8, useContext as useContext3, useEffect as useEffect2, useState } from "react";
-var Instagram = forwardRef8((props, ref) => {
-  const { stitchesInstance } = useContext3(WeaverseContext);
-  const _a = props, { token, numberOfImages, imagesPerRow, className } = _a, rest = __objRest(_a, ["token", "numberOfImages", "imagesPerRow", "className"]);
+import React11, { forwardRef as forwardRef9, useContext as useContext3, 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 = {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    color: "#374151"
+  };
+  return /* @__PURE__ */ React10.createElement("div", __spreadValues({
+    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) => {
+  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);
   useEffect2(() => {
-    const url = `https://graph.instagram.com/me/media?fields=id,media_type,caption,media_url&access_token=${token}`;
-    fetch(url).then((res) => res.json()).then((res) => {
-      setMedia(res.data);
-    });
+    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]);
-  const css = {
-    gridTemplateColumns: `repeat(${imagesPerRow[0] || 1}, 1fr)`
+  if (!token || error) {
+    return /* @__PURE__ */ React11.createElement("div", __spreadValues({
+      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
   };
-  const { className: instagramClass = "" } = stitchesInstance.css(css)();
-  return /* @__PURE__ */ React10.createElement("div", __spreadValues({
-    className: `${className} ${instagramClass}`,
+  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
     ref
-  }, rest), !token ? "Token is empty" : media.map((item, key) => {
-    return /* @__PURE__ */ React10.createElement("div", {
-      key,
-      className: "wv-instagram-item"
-    }, /* @__PURE__ */ React10.createElement("img", {
-      width: "100%",
-      height: "100%",
+  }, rest), {
+    style
+  }), /* @__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
     }));
-  }));
+  })));
 });
 Instagram.defaultProps = {
   token: "",
-  numberOfImages: [12],
-  imagesPerRow: [4],
+  username: "",
+  numberOfImages: 8,
+  imagesPerRow: 4,
+  gap: 0,
   css: {
     "@desktop": {
-      display: "grid",
-      gridTemplateColumns: "repeat(4, 1fr)",
-      "& .wv-instagram-item": {
-        width: "100%",
-        height: "100%",
-        backgroundColor: "red",
-        "& img": {
-          objectFit: "contain"
+      ".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"
         }
       }
     }
@@ -488,7 +532,7 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React11, { useContext as useContext4, 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
 var shortCssObject = (css) => {
@@ -531,13 +575,13 @@ 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__ */ React11.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React12.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ React11.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React11.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React12.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
@@ -565,12 +609,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React11.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ React12.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ React11.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ React12.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -582,11 +626,11 @@ var ItemInstance = ({ id }) => {
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React11.createElement("div", {
+    return /* @__PURE__ */ React12.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React11.createElement(ItemComponent, {
+  return /* @__PURE__ */ React12.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.17",
+  "version": "0.6.20",
   "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.17"
+    "@weaverse/core": "0.6.20"
   }
 }