@webstudio-is/react-sdk 0.48.0 → 0.50.0

package/lib/components/form.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "form";
-const Form = forwardRef((props, ref) => /* @__PURE__ */ jsx("form", {
-  ...props,
-  ref
-}));
+const Form = forwardRef((props, ref) => /* @__PURE__ */ jsx("form", { ...props, ref }));
 Form.displayName = "Form";
 export {
   Form

package/lib/components/form.ws.js

@@ -12,6 +12,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "forms",
   type: "container",
   label: "Form",
   Icon: FormIcon,

package/lib/components/fragment.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Fragment = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx("div", { ...props, ref, style: { display: "contents" } });
+});
+Fragment.displayName = "Fragment";
+export {
+  Fragment
+};

package/lib/components/fragment.ws.js

@@ -0,0 +1,12 @@
+const meta = {
+  type: "container",
+  label: "Fragment",
+  Icon: () => null
+};
+const propsMeta = {
+  props: {}
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/heading.ws.js

@@ -1,6 +1,7 @@
 import { HeadingIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/heading.props";
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,

package/lib/components/image.js

@@ -3,11 +3,14 @@ import { forwardRef } from "react";
 const defaultTag = "img";
 const Image = forwardRef(
   (imageProps, ref) => {
-    return /* @__PURE__ */ jsx("img", {
-      ...imageProps,
-      src: imageProps.src || imagePlaceholderSvg,
-      ref
-    });
+    return /* @__PURE__ */ jsx(
+      "img",
+      {
+        ...imageProps,
+        src: imageProps.src || imagePlaceholderSvg,
+        ref
+      }
+    );
   }
 );
 Image.defaultProps = {

package/lib/components/image.ws.js

@@ -1,17 +1,21 @@
 import { ImageIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/image.props";
 const presetStyle = {
+  // Otherwise on new image insert onto canvas it can overfit screen size multiple times
   maxWidth: {
     type: "unit",
     unit: "%",
     value: 100
   },
+  // inline | inline-block is not suitable because without line-height: 0 on the parent you get unsuitable spaces/margins
+  // see https://stackoverflow.com/questions/24771194/is-the-margin-of-inline-block-4px-is-static-for-all-browsers
   display: {
     type: "keyword",
     value: "block"
   }
 };
 const meta = {
+  category: "media",
   type: "embed",
   label: "Image",
   Icon: ImageIcon,

package/lib/components/index.js

@@ -1,4 +1,6 @@
 import { PropMeta } from "@webstudio-is/generate-arg-types";
+import { meta as SlotMeta } from "./slot.ws";
+import { meta as FragmentMeta } from "./fragment.ws";
 import { meta as BodyMeta } from "./body.ws";
 import { meta as BoxMeta } from "./box.ws";
 import { meta as TextBlockMeta } from "./text-block.ws";
@@ -21,6 +23,8 @@ import { meta as ListMeta } from "./list.ws";
 import { meta as ListItemMeta } from "./list-item.ws";
 import { meta as SeparatorMeta } from "./separator.ws";
 import { meta as CodeMeta } from "./code.ws";
+import { propsMeta as SlotMetaPropsMeta } from "./slot.ws";
+import { propsMeta as FragmentMetaPropsMeta } from "./fragment.ws";
 import { propsMeta as BodyMetaPropsMeta } from "./body.ws";
 import { propsMeta as BoxMetaPropsMeta } from "./box.ws";
 import { propsMeta as TextBlockMetaPropsMeta } from "./text-block.ws";
@@ -44,6 +48,8 @@ import { propsMeta as ListItemPropsMeta } from "./list-item.ws";
 import { propsMeta as SeparatorPropsMeta } from "./separator.ws";
 import { propsMeta as CodePropsMeta } from "./code.ws";
 const defaultMetas = {
+  Slot: SlotMeta,
+  Fragment: FragmentMeta,
   Box: BoxMeta,
   Body: BodyMeta,
   TextBlock: TextBlockMeta,
@@ -79,6 +85,8 @@ const registerComponentMetas = (overrides) => {
   currentMetas = result;
 };
 const defaultPropsMetasRaw = {
+  Slot: SlotMetaPropsMeta,
+  Fragment: FragmentMetaPropsMeta,
   Box: BoxMetaPropsMeta,
   Body: BodyMetaPropsMeta,
   TextBlock: TextBlockMetaPropsMeta,

package/lib/components/input.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "input";
-const Input = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", {
-  ...props,
-  ref
-}));
+const Input = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, ref }));
 Input.displayName = "Input";
 export {
   Input

package/lib/components/input.ws.js

@@ -1,6 +1,7 @@
 import { InputIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/input.props";
 const meta = {
+  category: "forms",
   type: "control",
   label: "Input",
   Icon: InputIcon

package/lib/components/italic.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "i";
-const Italic = forwardRef((props, ref) => /* @__PURE__ */ jsx("i", {
-  ...props,
-  ref
-}));
+const Italic = forwardRef((props, ref) => /* @__PURE__ */ jsx("i", { ...props, ref }));
 Italic.displayName = "Italic";
 export {
   Italic

package/lib/components/link-block.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Link } from "./link";
-const LinkBlock = forwardRef((props, ref) => /* @__PURE__ */ jsx(Link, {
-  ...props,
-  ref
-}));
+const LinkBlock = forwardRef((props, ref) => /* @__PURE__ */ jsx(Link, { ...props, ref }));
 LinkBlock.displayName = "LinkBlock";
 export {
   LinkBlock

package/lib/components/link-block.ws.js

@@ -11,6 +11,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "container",
   label: "Link Block",
   Icon: BoxLinkIcon,

package/lib/components/link.js

@@ -2,11 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const Link = forwardRef(
   ({ href = "", ...props }, ref) => {
-    return /* @__PURE__ */ jsx("a", {
-      ...props,
-      href,
-      ref
-    });
+    return /* @__PURE__ */ jsx("a", { ...props, href, ref });
   }
 );
 Link.displayName = "Link";

package/lib/components/link.ws.js

@@ -12,6 +12,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "rich-text",
   label: "Link Text",
   Icon: Link2Icon,

package/lib/components/list-item.ws.js

@@ -1,6 +1,7 @@
 import { ListItemIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/list-item.props";
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: ListItemIcon,

package/lib/components/list.ws.js

@@ -15,6 +15,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "container",
   label: "List",
   Icon: ListIcon,

package/lib/components/paragraph.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "p";
-const Paragraph = forwardRef((props, ref) => /* @__PURE__ */ jsx("p", {
-  ...props,
-  ref
-}));
+const Paragraph = forwardRef((props, ref) => /* @__PURE__ */ jsx("p", { ...props, ref }));
 Paragraph.displayName = "Paragraph";
 export {
   Paragraph

package/lib/components/paragraph.ws.js

@@ -1,6 +1,7 @@
 import { TextAlignLeftIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/paragraph.props";
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Paragraph",
   Icon: TextAlignLeftIcon,

package/lib/components/rich-text-link.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Link } from "./link";
-const RichTextLink = forwardRef((props, ref) => /* @__PURE__ */ jsx(Link, {
-  ...props,
-  ref
-}));
+const RichTextLink = forwardRef((props, ref) => /* @__PURE__ */ jsx(Link, { ...props, ref }));
 RichTextLink.displayName = "RichTextLink";
 export {
   RichTextLink

package/lib/components/rich-text-link.ws.js

@@ -1,7 +1,8 @@
 import { props } from "./__generated__/rich-text-link.props";
 import { meta as linkMeta, propsMeta as propsLinkMeta } from "./link.ws";
+const { category, ...linkMetaRest } = linkMeta;
 const meta = {
-  ...linkMeta,
+  ...linkMetaRest,
   type: "rich-text-child",
   children: []
 };

package/lib/components/separator.ws.js

@@ -15,6 +15,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "general",
   type: "embed",
   label: "Separator",
   Icon: DashIcon,

package/lib/components/slot.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const Slot = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      ref,
+      style: { display: props.children ? "contents" : "block" }
+    }
+  );
+});
+Slot.displayName = "Slot";
+export {
+  Slot
+};

package/lib/components/slot.ws.js

@@ -0,0 +1,14 @@
+import { SlotComponentIcon } from "@webstudio-is/icons";
+const meta = {
+  category: "general",
+  type: "container",
+  label: "Slot",
+  Icon: SlotComponentIcon
+};
+const propsMeta = {
+  props: {}
+};
+export {
+  meta,
+  propsMeta
+};

package/lib/components/span.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "span";
-const Span = forwardRef((props, ref) => /* @__PURE__ */ jsx("span", {
-  ...props,
-  ref
-}));
+const Span = forwardRef((props, ref) => /* @__PURE__ */ jsx("span", { ...props, ref }));
 Span.displayName = "Span";
 export {
   Span

package/lib/components/subscript.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "sub";
-const Subscript = forwardRef((props, ref) => /* @__PURE__ */ jsx("sub", {
-  ...props,
-  ref
-}));
+const Subscript = forwardRef((props, ref) => /* @__PURE__ */ jsx("sub", { ...props, ref }));
 Subscript.displayName = "Subscript";
 export {
   Subscript

package/lib/components/superscript.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "sup";
-const Superscript = forwardRef((props, ref) => /* @__PURE__ */ jsx("sup", {
-  ...props,
-  ref
-}));
+const Superscript = forwardRef((props, ref) => /* @__PURE__ */ jsx("sup", { ...props, ref }));
 Superscript.displayName = "Bold";
 export {
   Superscript

package/lib/components/text-block.js

@@ -1,10 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 const defaultTag = "div";
-const TextBlock = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", {
-  ...props,
-  ref
-}));
+const TextBlock = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", { ...props, ref }));
 TextBlock.displayName = "TextBlock";
 export {
   TextBlock

package/lib/components/text-block.ws.js

@@ -8,6 +8,7 @@ const presetStyle = {
   }
 };
 const meta = {
+  category: "typography",
   type: "rich-text",
   label: "Text Block",
   Icon: TextIcon,

package/lib/css/categories.js

@@ -1,10 +1,13 @@
 const layout = [
   "display",
+  // Flex
   "flexDirection",
   "flexWrap",
+  // Flex or grid
   "alignItems",
   "justifyContent",
   "alignContent",
+  // Grid
   "justifyItems",
   "rowGap",
   "columnGap",
@@ -85,6 +88,7 @@ const typography = [
   "direction",
   "whiteSpace",
   "textShadow",
+  // More
   "fontSizeAdjust",
   "fontStretch",
   "fontVariant",
@@ -125,6 +129,7 @@ const borders = [
   "borderRightWidth",
   "borderBottomWidth",
   "borderLeftWidth",
+  // More
   "borderImageSlice",
   "borderImageWidth",
   "borderImageOutset",
@@ -143,6 +148,7 @@ const effects = [
   "filter",
   "backdropFilter",
   "cursor",
+  // More
   "animationDelay",
   "animationDirection",
   "animationDuration",

package/lib/index.js

@@ -10,7 +10,11 @@ import {
   customComponentMetas,
   customComponentPropsMetas
 } from "./app/custom-components";
+import {
+  componentCategories
+} from "./components/component-meta";
 export {
+  componentCategories,
   customComponentMetas,
   customComponentPropsMetas,
   customComponents

package/lib/pubsub/create.js

@@ -14,10 +14,16 @@ const createPubsub = () => {
     );
   }
   return {
+    /**
+     * To publish a postMessage event on the current window and parent window from the iframe.
+     */
     publish(action) {
       window.parent.postMessage(action, "*");
       window.postMessage(action, "*");
     },
+    /**
+     * To publish a postMessage event on the iframe and parent window from the parent window.
+     */
     usePublish() {
       const iframeRef = useRef(null);
       const publishCallback = useCallback(
@@ -33,6 +39,9 @@ const createPubsub = () => {
       );
       return [publishCallback, iframeRef];
     },
+    /**
+     * To subscribe a message event on the current window.
+     */
     useSubscribe(type, onAction) {
       useEffect(() => {
         emitter.on(type, onAction);

package/lib/tree/create-elements-tree.js

@@ -11,32 +11,31 @@ const createElementsTree = ({
   Component,
   getComponent
 }) => {
+  const rootInstanceSelector = [instance.id];
   const children = createInstanceChildrenElements({
+    instanceSelector: rootInstanceSelector,
     Component,
     children: instance.children,
     getComponent
   });
-  const body = createInstanceElement({
+  const root = createInstanceElement({
     Component,
     instance,
+    instanceSelector: rootInstanceSelector,
     children: [
-      /* @__PURE__ */ jsxs(Fragment, {
-        children: [
-          children,
-          sandbox && /* @__PURE__ */ jsx(SessionStoragePolyfill, {}),
-          /* @__PURE__ */ jsx(ScrollRestoration, {}),
-          /* @__PURE__ */ jsx(Scripts, {})
-        ]
-      }, "children")
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        sandbox && /* @__PURE__ */ jsx(SessionStoragePolyfill, {}),
+        /* @__PURE__ */ jsx(ScrollRestoration, {}),
+        /* @__PURE__ */ jsx(Scripts, {})
+      ] }, "children")
     ],
     getComponent
   });
-  return /* @__PURE__ */ jsx(ReactSdkContext.Provider, {
-    value: { propsByInstanceIdStore, assetsStore },
-    children: body
-  });
+  return /* @__PURE__ */ jsx(ReactSdkContext.Provider, { value: { propsByInstanceIdStore, assetsStore }, children: root });
 };
 const createInstanceChildrenElements = ({
+  instanceSelector,
   children,
   Component,
   getComponent
@@ -47,13 +46,16 @@ const createInstanceChildrenElements = ({
       elements.push(child.value);
       continue;
     }
+    const childInstanceSelector = [child.id, ...instanceSelector];
     const children2 = createInstanceChildrenElements({
+      instanceSelector: childInstanceSelector,
       children: child.children,
       Component,
       getComponent
     });
     const element = createInstanceElement({
       instance: child,
+      instanceSelector: childInstanceSelector,
       Component,
       children: children2,
       getComponent
@@ -65,18 +67,20 @@ const createInstanceChildrenElements = ({
 const createInstanceElement = ({
   Component,
   instance,
+  instanceSelector,
   children = [],
   getComponent
 }) => {
-  const props = {
-    instance,
-    children,
-    key: instance.id,
-    getComponent
-  };
-  return /* @__PURE__ */ jsx(Component, {
-    ...props
-  });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      instance,
+      instanceSelector,
+      getComponent,
+      children
+    },
+    instance.id
+  );
 };
 export {
   createElementsTree

package/lib/tree/session-storage-polyfill.js

@@ -33,10 +33,13 @@ const polyfill = function() {
     });
   }
 }.toString();
-const SessionStoragePolyfill = () => /* @__PURE__ */ jsx("script", {
-  dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
-  suppressHydrationWarning: true
-});
+const SessionStoragePolyfill = () => /* @__PURE__ */ jsx(
+  "script",
+  {
+    dangerouslySetInnerHTML: { __html: `(${polyfill})()` },
+    suppressHydrationWarning: true
+  }
+);
 export {
   SessionStoragePolyfill
 };

package/lib/tree/webstudio-component.js

@@ -3,12 +3,10 @@ import { Fragment as Fragment2 } from "react";
 import { useInstanceProps } from "../props";
 const renderText = (text) => {
   const lines = text.split("\n");
-  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment2, {
-    children: [
-      line,
-      index < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
-    ]
-  }, index));
+  return lines.map((line, index) => /* @__PURE__ */ jsxs(Fragment2, { children: [
+    line,
+    index < lines.length - 1 ? /* @__PURE__ */ jsx("br", {}) : null
+  ] }, index));
 };
 const renderWebstudioComponentChildren = (children) => {
   if (children === void 0 || children.length === 0) {
@@ -35,10 +33,7 @@ const WebstudioComponent = ({
   if (Component === void 0) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
-  return /* @__PURE__ */ jsx(Component, {
-    ...props,
-    children: renderWebstudioComponentChildren(children)
-  });
+  return /* @__PURE__ */ jsx(Component, { ...props, children: renderWebstudioComponentChildren(children) });
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";

package/package.json

@@ -1,28 +1,24 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.48.0",
+  "version": "0.50.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
   "type": "module",
   "devDependencies": {
     "@babel/core": "^7.21.0",
-    "@esbuild-kit/esm-loader": "^2.4.2",
     "@jest/globals": "^29.3.1",
-    "@remix-run/node": "1.12.0",
-    "@remix-run/react": "1.12.0",
-    "@remix-run/server-runtime": "1.12.0",
+    "@remix-run/node": "1.14.3",
+    "@remix-run/react": "1.14.3",
+    "@remix-run/server-runtime": "1.14.3",
     "@storybook/react": "^6.5.16",
     "@types/node": "^18.11.18",
     "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
-    "esbuild": "^0.14.25",
-    "esbuild-node-externals": "^1.4.1",
     "jest": "^29.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "remix-utils": "^4.1.0",
-    "tsx": "^3.9.0",
     "typescript": "4.9.5",
     "zod": "^3.19.1",
     "@webstudio-is/jest-config": "^1.0.2",
@@ -44,14 +40,14 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.48.0",
-    "@webstudio-is/css-data": "^0.48.0",
-    "@webstudio-is/css-vars": "^0.48.0",
-    "@webstudio-is/generate-arg-types": "^0.48.0",
-    "@webstudio-is/icons": "^0.48.0",
-    "@webstudio-is/image": "^0.48.0",
-    "@webstudio-is/prisma-client": "^0.48.0",
-    "@webstudio-is/project-build": "^0.48.0"
+    "@webstudio-is/asset-uploader": "^0.50.0",
+    "@webstudio-is/css-data": "^0.50.0",
+    "@webstudio-is/generate-arg-types": "^0.50.0",
+    "@webstudio-is/css-vars": "^0.50.0",
+    "@webstudio-is/icons": "^0.50.0",
+    "@webstudio-is/image": "^0.50.0",
+    "@webstudio-is/prisma-client": "^0.50.0",
+    "@webstudio-is/project-build": "^0.50.0"
   },
   "exports": {
     ".": {