@weaverse/react 0.6.3 → 0.6.6

package/dist/index.d.ts

@@ -1,10 +1,18 @@
 import { WeaverseType, Weaverse } from '@weaverse/core';
 export * from '@weaverse/core';
+import React$1 from 'react';
 
 declare const createRootContext: (configs: WeaverseType) => Weaverse;
+declare let WeaverseContext: React$1.Context<Weaverse>;
+declare let WeaverseContextProvider: React$1.Provider<Weaverse>;
+declare let WeaverseContextConsumer: React$1.Consumer<Weaverse>;
 declare type WeaverseRootPropsType = {
     context: Weaverse;
 };
 declare const WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
 
-export { WeaverseRoot, WeaverseRootPropsType, createRootContext };
+interface WeaverseElementProps {
+    children?: React.ReactNode;
+}
+
+export { WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.js

@@ -52,6 +52,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  WeaverseContext: () => WeaverseContext,
+  WeaverseContextConsumer: () => WeaverseContextConsumer,
+  WeaverseContextProvider: () => WeaverseContextProvider,
   WeaverseRoot: () => WeaverseRoot,
   createRootContext: () => createRootContext
 });
@@ -79,7 +82,15 @@ var base_default = BaseElement;
 // src/elements/button.tsx
 var React2 = __toESM(require("react"));
 var Button = React2.forwardRef((props, ref) => {
-  const _a = props, { buttonType, css } = _a, rest = __objRest(_a, ["buttonType", "css"]);
+  const _a = props, { buttonType, css, openInNewTab = false, target = "" } = _a, rest = __objRest(_a, ["buttonType", "css", "openInNewTab", "target"]);
+  if (target) {
+    return /* @__PURE__ */ React2.createElement("a", {
+      href: target,
+      target: openInNewTab ? "_blank" : "_self"
+    }, /* @__PURE__ */ React2.createElement("button", __spreadValues({
+      ref
+    }, rest), props.value));
+  }
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
     ref
   }, rest), props.value);
@@ -108,7 +119,20 @@ var schema2 = {
     }
   ],
   settings: [],
-  toolbar: [],
+  toolbar: [
+    {
+      type: "delete"
+    },
+    {
+      type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
+    }
+  ],
   data: {
     css: {
       "@desktop": {
@@ -116,7 +140,9 @@ var schema2 = {
         fontSize: "13px",
         padding: "10px 15px"
       }
-    }
+    },
+    target: "",
+    openInNewTab: false
   }
 };
 var button_default = Button;
@@ -138,7 +164,7 @@ var schema3 = {
         backgroundColor: "rgba(248,203,203,0.38)",
         flexDirection: "column",
         alignItems: "flex-start",
-        justifyContent: "center",
+        justifyContent: "flex-start",
         textAlign: "left",
         gridArea: "1 / 1 / 3 / 6",
         overflow: "hidden",
@@ -154,11 +180,20 @@ var container_default = Container;
 // src/elements/layout.tsx
 var import_react3 = __toESM(require("react"));
 var Layout = (0, import_react3.forwardRef)((props, ref) => {
-  return /* @__PURE__ */ import_react3.default.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, props), {
-    children: props.children || "Layout Placeholder"
-  }));
+  const _a = props, { css, children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["css", "children", "rows", "gap", "rowSize", "columns", "gridSize"]);
+  return /* @__PURE__ */ import_react3.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_react3.default.createElement("div", {
+    "data-layout-content": true
+  }, children));
 });
 var schema4 = {
   title: "Layout",
@@ -166,20 +201,30 @@ var schema4 = {
   data: {
     css: {
       "@desktop": {
-        display: "grid !important",
-        gridTemplateRows: "repeat(auto-fill, $rowSize)",
-        gridTemplateColumns: "repeat($columns, 1fr)",
-        gridAutoRows: "$sizes$rowSize",
-        gridGap: "$gap",
-        minHeight: "104px",
-        width: "100%",
-        margin: "0 auto"
+        overflow: "hidden",
+        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)))",
+          gridGap: "var(--gap)",
+          maxWidth: "var(--grid-size)"
+        }
       },
       "@mobile": {
         display: "flex !important",
         flexDirection: "column"
       }
-    }
+    },
+    gridSize: 1224,
+    rows: 12,
+    columns: 12,
+    gap: 16,
+    rowSize: 48
   },
   settings: []
 };
@@ -200,7 +245,7 @@ Text.defaultProps = {
 };
 var schema5 = {
   type: "text",
-  title: "Text Settings",
+  title: "Text",
   settings: [],
   data: {
     css: {
@@ -219,6 +264,35 @@ var schema5 = {
 };
 var text_default = Text;
 
+// src/elements/image.tsx
+var import_react4 = __toESM(require("react"));
+var Image = import_react4.default.forwardRef(function Image2(props, ref) {
+  let _a = props, { src, alt, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
+  return /* @__PURE__ */ import_react4.default.createElement("img", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    alt,
+    src
+  }));
+});
+Image.defaultProps = {
+  src: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  alt: "weaverse image element"
+};
+var schema6 = {
+  settings: [],
+  type: "image",
+  title: "Image",
+  data: {
+    css: {
+      "@desktop": {
+        padding: "10px"
+      }
+    }
+  }
+};
+var image_default = Image;
+
 // src/elements/index.ts
 var elements = {
   Button: {
@@ -240,6 +314,10 @@ var elements = {
   Container: {
     Component: container_default,
     schema: schema3
+  },
+  Image: {
+    Component: image_default,
+    schema: schema6
   }
 };
 var elements_default = elements;
@@ -254,7 +332,7 @@ var shortCssObject = (css) => {
 
 // src/renderer.tsx
 var import_core = require("@weaverse/core");
-var React6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var createRootContext = (configs) => {
   const rootContext = new import_core.Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
@@ -262,10 +340,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
+var WeaverseContext = (0, import_react5.createContext)({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = React6.useState(context.projectData);
-  React6.useEffect(() => {
+  let [, setData] = (0, import_react5.useState)(context.projectData);
+  (0, import_react5.useEffect)(() => {
     let handleUpdate = () => {
       setData({});
     };
@@ -277,19 +358,21 @@ var WeaverseRoot = ({ context }) => {
       context.unsubscribe(handleUpdate);
     };
   }, []);
-  let handleProps = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.handleProps) || {};
+  let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ React6.createElement("div", __spreadValues({
+  return /* @__PURE__ */ import_react5.default.createElement("div", __spreadValues({
     className: `weaverse-content-root ${themeClass}`
-  }, handleProps), /* @__PURE__ */ React6.createElement(RenderItem, {
-    itemId: context.projectData.rootId || 0,
-    context
-  }));
+  }, eventHandlers), /* @__PURE__ */ import_react5.default.createElement(WeaverseContextProvider, {
+    value: context
+  }, /* @__PURE__ */ import_react5.default.createElement(RenderItem, {
+    itemId: context.projectData.rootId || 0
+  })));
 };
-var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React6.useState(itemInstance.data);
-  let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React6.useEffect(() => {
+var Item = ({ itemInstance, elementInstances }) => {
+  var _b;
+  let [data, setData] = (0, import_react5.useState)(itemInstance.data);
+  let _a = data, { id, type, childIds, css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
+  (0, import_react5.useEffect)(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
@@ -303,11 +386,15 @@ var Item = ({ itemInstance, elementInstances, context }) => {
       itemInstance.unsubscribe(handleUpdate);
     };
   }, []);
-  let realClassName = className;
+  let context = (0, import_react5.useContext)(WeaverseContext);
+  let className = "";
   if (css) {
     let formattedCss = shortCssObject(css);
-    let selector = context.stitchesInstance.css(formattedCss)().className;
-    realClassName = realClassName ? `${selector} ${realClassName}` : selector;
+    let { className: newClass = "" } = context.stitchesInstance.css(formattedCss)();
+    let { stitchesClass } = itemInstance;
+    let otherClass = (((_b = itemInstance.ref.current) == null ? void 0 : _b.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
+    className = `${cls} ${newClass} ${otherClass}`.trim();
+    itemInstance.stitchesClass = newClass;
   }
   let element = elementInstances.get(type) || elementInstances.get("base");
   if (element == null ? void 0 : element.Component) {
@@ -315,41 +402,42 @@ var Item = ({ itemInstance, elementInstances, context }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React6.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ import_react5.default.createElement(Component, __spreadProps(__spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id
     }, rest), {
-      className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React6.createElement(RenderItem, {
+      className
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ import_react5.default.createElement(RenderItem, {
       key: childId,
-      itemId: childId,
-      context
+      itemId: childId
     })));
   }
   return null;
 };
 var RenderItem = ({
-  itemId,
-  context
+  itemId
 }) => {
+  let context = (0, import_react5.useContext)(WeaverseContext);
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React6.createElement(Item, {
+    return /* @__PURE__ */ import_react5.default.createElement(Item, {
       itemInstance,
-      elementInstances,
-      context
+      elementInstances
     });
   }
   console.warn(`Item instance ${itemId} not found`);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null);
 };
 
 // src/index.ts
 __reExport(src_exports, require("@weaverse/core"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  WeaverseContext,
+  WeaverseContextConsumer,
+  WeaverseContextProvider,
   WeaverseRoot,
   createRootContext
 });

package/dist/index.mjs

@@ -52,7 +52,15 @@ var base_default = BaseElement;
 // src/elements/button.tsx
 import * as React2 from "react";
 var Button = React2.forwardRef((props, ref) => {
-  const _a = props, { buttonType, css } = _a, rest = __objRest(_a, ["buttonType", "css"]);
+  const _a = props, { buttonType, css, openInNewTab = false, target = "" } = _a, rest = __objRest(_a, ["buttonType", "css", "openInNewTab", "target"]);
+  if (target) {
+    return /* @__PURE__ */ React2.createElement("a", {
+      href: target,
+      target: openInNewTab ? "_blank" : "_self"
+    }, /* @__PURE__ */ React2.createElement("button", __spreadValues({
+      ref
+    }, rest), props.value));
+  }
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
     ref
   }, rest), props.value);
@@ -81,7 +89,20 @@ var schema2 = {
     }
   ],
   settings: [],
-  toolbar: [],
+  toolbar: [
+    {
+      type: "delete"
+    },
+    {
+      type: "duplicate"
+    },
+    {
+      type: "link"
+    },
+    {
+      type: "color"
+    }
+  ],
   data: {
     css: {
       "@desktop": {
@@ -89,7 +110,9 @@ var schema2 = {
         fontSize: "13px",
         padding: "10px 15px"
       }
-    }
+    },
+    target: "",
+    openInNewTab: false
   }
 };
 var button_default = Button;
@@ -111,7 +134,7 @@ var schema3 = {
         backgroundColor: "rgba(248,203,203,0.38)",
         flexDirection: "column",
         alignItems: "flex-start",
-        justifyContent: "center",
+        justifyContent: "flex-start",
         textAlign: "left",
         gridArea: "1 / 1 / 3 / 6",
         overflow: "hidden",
@@ -127,11 +150,20 @@ var container_default = Container;
 // src/elements/layout.tsx
 import React4, { forwardRef as forwardRef3 } from "react";
 var Layout = forwardRef3((props, ref) => {
-  return /* @__PURE__ */ React4.createElement("div", __spreadProps(__spreadValues({
-    ref
-  }, props), {
-    children: props.children || "Layout Placeholder"
-  }));
+  const _a = props, { css, children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["css", "children", "rows", "gap", "rowSize", "columns", "gridSize"]);
+  return /* @__PURE__ */ React4.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__ */ React4.createElement("div", {
+    "data-layout-content": true
+  }, children));
 });
 var schema4 = {
   title: "Layout",
@@ -139,20 +171,30 @@ var schema4 = {
   data: {
     css: {
       "@desktop": {
-        display: "grid !important",
-        gridTemplateRows: "repeat(auto-fill, $rowSize)",
-        gridTemplateColumns: "repeat($columns, 1fr)",
-        gridAutoRows: "$sizes$rowSize",
-        gridGap: "$gap",
-        minHeight: "104px",
-        width: "100%",
-        margin: "0 auto"
+        overflow: "hidden",
+        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)))",
+          gridGap: "var(--gap)",
+          maxWidth: "var(--grid-size)"
+        }
       },
       "@mobile": {
         display: "flex !important",
         flexDirection: "column"
       }
-    }
+    },
+    gridSize: 1224,
+    rows: 12,
+    columns: 12,
+    gap: 16,
+    rowSize: 48
   },
   settings: []
 };
@@ -173,7 +215,7 @@ Text.defaultProps = {
 };
 var schema5 = {
   type: "text",
-  title: "Text Settings",
+  title: "Text",
   settings: [],
   data: {
     css: {
@@ -192,6 +234,35 @@ var schema5 = {
 };
 var text_default = Text;
 
+// src/elements/image.tsx
+import React6 from "react";
+var Image = React6.forwardRef(function Image2(props, ref) {
+  let _a = props, { src, alt, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
+  return /* @__PURE__ */ React6.createElement("img", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    alt,
+    src
+  }));
+});
+Image.defaultProps = {
+  src: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  alt: "weaverse image element"
+};
+var schema6 = {
+  settings: [],
+  type: "image",
+  title: "Image",
+  data: {
+    css: {
+      "@desktop": {
+        padding: "10px"
+      }
+    }
+  }
+};
+var image_default = Image;
+
 // src/elements/index.ts
 var elements = {
   Button: {
@@ -213,6 +284,10 @@ var elements = {
   Container: {
     Component: container_default,
     schema: schema3
+  },
+  Image: {
+    Component: image_default,
+    schema: schema6
   }
 };
 var elements_default = elements;
@@ -226,11 +301,8 @@ var shortCssObject = (css) => {
 };
 
 // src/renderer.tsx
-import {
-  isBrowser,
-  Weaverse
-} from "@weaverse/core";
-import * as React6 from "react";
+import { isBrowser, Weaverse } from "@weaverse/core";
+import React7, { createContext, useContext, useEffect, useState } from "react";
 var createRootContext = (configs) => {
   const rootContext = new Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
@@ -238,10 +310,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
+var WeaverseContext = createContext({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = React6.useState(context.projectData);
-  React6.useEffect(() => {
+  let [, setData] = useState(context.projectData);
+  useEffect(() => {
     let handleUpdate = () => {
       setData({});
     };
@@ -253,19 +328,21 @@ var WeaverseRoot = ({ context }) => {
       context.unsubscribe(handleUpdate);
     };
   }, []);
-  let handleProps = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.handleProps) || {};
+  let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ React6.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React7.createElement("div", __spreadValues({
     className: `weaverse-content-root ${themeClass}`
-  }, handleProps), /* @__PURE__ */ React6.createElement(RenderItem, {
-    itemId: context.projectData.rootId || 0,
-    context
-  }));
+  }, eventHandlers), /* @__PURE__ */ React7.createElement(WeaverseContextProvider, {
+    value: context
+  }, /* @__PURE__ */ React7.createElement(RenderItem, {
+    itemId: context.projectData.rootId || 0
+  })));
 };
-var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React6.useState(itemInstance.data);
-  let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React6.useEffect(() => {
+var Item = ({ itemInstance, elementInstances }) => {
+  var _b;
+  let [data, setData] = useState(itemInstance.data);
+  let _a = data, { id, type, childIds, css, className: cls = "" } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
+  useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
@@ -279,11 +356,15 @@ var Item = ({ itemInstance, elementInstances, context }) => {
       itemInstance.unsubscribe(handleUpdate);
     };
   }, []);
-  let realClassName = className;
+  let context = useContext(WeaverseContext);
+  let className = "";
   if (css) {
     let formattedCss = shortCssObject(css);
-    let selector = context.stitchesInstance.css(formattedCss)().className;
-    realClassName = realClassName ? `${selector} ${realClassName}` : selector;
+    let { className: newClass = "" } = context.stitchesInstance.css(formattedCss)();
+    let { stitchesClass } = itemInstance;
+    let otherClass = (((_b = itemInstance.ref.current) == null ? void 0 : _b.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
+    className = `${cls} ${newClass} ${otherClass}`.trim();
+    itemInstance.stitchesClass = newClass;
   }
   let element = elementInstances.get(type) || elementInstances.get("base");
   if (element == null ? void 0 : element.Component) {
@@ -291,40 +372,41 @@ var Item = ({ itemInstance, elementInstances, context }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React6.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React7.createElement(Component, __spreadProps(__spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id
     }, rest), {
-      className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React6.createElement(RenderItem, {
+      className
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React7.createElement(RenderItem, {
       key: childId,
-      itemId: childId,
-      context
+      itemId: childId
     })));
   }
   return null;
 };
 var RenderItem = ({
-  itemId,
-  context
+  itemId
 }) => {
+  let context = useContext(WeaverseContext);
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React6.createElement(Item, {
+    return /* @__PURE__ */ React7.createElement(Item, {
       itemInstance,
-      elementInstances,
-      context
+      elementInstances
     });
   }
   console.warn(`Item instance ${itemId} not found`);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null);
 };
 
 // src/index.ts
 export * from "@weaverse/core";
 export {
+  WeaverseContext,
+  WeaverseContextConsumer,
+  WeaverseContextProvider,
   WeaverseRoot,
   createRootContext
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.3",
+  "version": "0.6.6",
   "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.3"
+    "@weaverse/core": "0.6.6"
   }
 }