@webstudio-is/react-sdk 0.50.0 → 0.52.0

package/lib/cjs/tree/{webstudio-component.cjs → webstudio-component.js}

@@ -45,6 +45,7 @@ const renderWebstudioComponentChildren = (children) => {
 };
 const WebstudioComponent = ({
   instance,
+  instanceSelector,
   children,
   getComponent,
   ...rest

package/lib/components/__generated__/link-block.props.js

@@ -2,18 +2,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
-  download: { required: false, control: "text", type: "string" },
   href: { required: false, control: "text", type: "string" },
-  hrefLang: { required: false, control: "text", type: "string" },
-  media: { required: false, control: "text", type: "string" },
-  ping: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { required: false, control: "text", type: "string" },
+  hrefLang: { required: false, control: "text", type: "string" },
+  media: { required: false, control: "text", type: "string" },
+  ping: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

package/lib/components/__generated__/link.props.js

@@ -2,18 +2,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
-  download: { required: false, control: "text", type: "string" },
-  href: { required: false, control: "text", type: "string", defaultValue: "" },
-  hrefLang: { required: false, control: "text", type: "string" },
-  media: { required: false, control: "text", type: "string" },
-  ping: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
+  href: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { required: false, control: "text", type: "string" },
+  hrefLang: { required: false, control: "text", type: "string" },
+  media: { required: false, control: "text", type: "string" },
+  ping: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -2,18 +2,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
-  download: { required: false, control: "text", type: "string" },
   href: { required: false, control: "text", type: "string" },
-  hrefLang: { required: false, control: "text", type: "string" },
-  media: { required: false, control: "text", type: "string" },
-  ping: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { required: false, control: "text", type: "string" },
+  hrefLang: { required: false, control: "text", type: "string" },
+  media: { required: false, control: "text", type: "string" },
+  ping: { required: false, control: "text", type: "string" },
+  rel: { required: false, control: "text", type: "string" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

package/lib/components/blockquote.js

@@ -10,5 +10,6 @@ const Blockquote = forwardRef(
 );
 Blockquote.displayName = "Blockquote";
 export {
-  Blockquote
+  Blockquote,
+  defaultTag
 };

package/lib/components/blockquote.ws.js

@@ -1,41 +1,63 @@
 import { BlockquoteIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/blockquote.props";
 const presetStyle = {
-  margin: {
-    type: "keyword",
-    value: "0"
-  },
-  marginBottom: {
-    type: "keyword",
-    value: "10px"
-  },
-  paddingTop: {
-    type: "keyword",
-    value: "10px"
-  },
-  paddingBottom: {
-    type: "keyword",
-    value: "10px"
-  },
-  paddingLeft: {
-    type: "keyword",
-    value: "20px"
-  },
-  paddingRight: {
-    type: "keyword",
-    value: "20px"
-  },
-  borderLeftWidth: {
-    type: "keyword",
-    value: "5px"
-  },
-  borderLeftStyle: {
-    type: "keyword",
-    value: "solid"
-  },
-  borderLeftColor: {
-    type: "keyword",
-    value: "#e2e2e2"
+  blockquote: {
+    marginTop: {
+      type: "unit",
+      value: 0,
+      unit: "number"
+    },
+    marginRight: {
+      type: "unit",
+      value: 0,
+      unit: "number"
+    },
+    marginBottom: {
+      type: "unit",
+      value: 10,
+      unit: "px"
+    },
+    marginLeft: {
+      type: "unit",
+      value: 0,
+      unit: "number"
+    },
+    paddingTop: {
+      type: "unit",
+      value: 10,
+      unit: "px"
+    },
+    paddingBottom: {
+      type: "unit",
+      value: 10,
+      unit: "px"
+    },
+    paddingLeft: {
+      type: "unit",
+      value: 20,
+      unit: "px"
+    },
+    paddingRight: {
+      type: "unit",
+      value: 20,
+      unit: "px"
+    },
+    borderLeftWidth: {
+      type: "unit",
+      value: 5,
+      unit: "px"
+    },
+    borderLeftStyle: {
+      type: "keyword",
+      value: "solid"
+    },
+    borderLeftColor: {
+      type: "rgb",
+      r: 226,
+      g: 226,
+      b: 226,
+      alpha: 1
+    }
   }
 };
 const meta = {

package/lib/components/body.js

@@ -4,5 +4,6 @@ const defaultTag = "body";
 const Body = forwardRef((props, ref) => /* @__PURE__ */ jsx("body", { ...props, ref }));
 Body.displayName = "Body";
 export {
-  Body
+  Body,
+  defaultTag
 };

package/lib/components/body.ws.js

@@ -1,52 +1,36 @@
 import { BodyIcon } from "@webstudio-is/icons";
+import { body } from "../css/normalize";
 import { props } from "./__generated__/body.props";
 const presetStyle = {
-  marginTop: {
-    type: "unit",
-    unit: "px",
-    value: 0
-  },
-  marginRight: {
-    type: "unit",
-    unit: "px",
-    value: 0
-  },
-  marginBottom: {
-    type: "unit",
-    unit: "px",
-    value: 0
-  },
-  marginLeft: {
-    type: "unit",
-    unit: "px",
-    value: 0
-  },
-  minHeight: {
-    type: "unit",
-    unit: "%",
-    value: 100
-  },
-  backgroundColor: {
-    type: "keyword",
-    value: "white"
-  },
-  fontFamily: {
-    type: "keyword",
-    value: "Arial"
-  },
-  fontSize: {
-    type: "unit",
-    unit: "px",
-    value: 14
-  },
-  lineHeight: {
-    type: "unit",
-    unit: "number",
-    value: 1.5
-  },
-  color: {
-    type: "keyword",
-    value: "#232323"
+  body: {
+    ...body,
+    minHeight: {
+      type: "unit",
+      unit: "%",
+      value: 100
+    },
+    backgroundColor: {
+      type: "keyword",
+      value: "white"
+    },
+    fontFamily: {
+      type: "keyword",
+      value: "Arial"
+    },
+    fontSize: {
+      type: "unit",
+      unit: "px",
+      value: 14
+    },
+    lineHeight: {
+      type: "unit",
+      unit: "number",
+      value: 1.5
+    },
+    color: {
+      type: "keyword",
+      value: "#232323"
+    }
   }
 };
 const meta = {

package/lib/components/bold.js

@@ -4,5 +4,6 @@ const defaultTag = "b";
 const Bold = forwardRef((props, ref) => /* @__PURE__ */ jsx("b", { ...props, ref }));
 Bold.displayName = "Bold";
 export {
-  Bold
+  Bold,
+  defaultTag
 };

package/lib/components/bold.ws.js

@@ -1,9 +1,14 @@
-import { FontBoldIcon } from "@webstudio-is/icons";
+import { BoldIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/bold.props";
+import { b } from "../css/normalize";
+const presetStyle = {
+  b
+};
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
-  Icon: FontBoldIcon
+  Icon: BoldIcon,
+  presetStyle
 };
 const propsMeta = {
   props

package/lib/components/box.ws.js

@@ -1,10 +1,28 @@
 import { BoxIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/box.props";
+import {
+  div,
+  address,
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section
+} from "../css/normalize";
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
-  }
+  div,
+  address,
+  article,
+  aside,
+  figure,
+  footer,
+  header,
+  main,
+  nav,
+  section
 };
 const meta = {
   category: "general",

package/lib/components/button.js

@@ -11,5 +11,6 @@ const Button = forwardRef(
 );
 Button.displayName = "Button";
 export {
-  Button
+  Button,
+  defaultTag
 };

package/lib/components/button.ws.js

@@ -1,10 +1,15 @@
-import { ButtonIcon } from "@webstudio-is/icons";
+import { ButtonElementIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/button.props";
+import { button } from "../css/normalize";
+const presetStyle = {
+  button
+};
 const meta = {
   category: "forms",
   type: "container",
   label: "Button",
-  Icon: ButtonIcon
+  Icon: ButtonElementIcon,
+  presetStyle
 };
 const propsMeta = {
   props,

package/lib/components/code.js

@@ -17,5 +17,6 @@ const Code = forwardRef(
 Code.displayName = "Code";
 export {
   Code,
+  defaultTag,
   displayVarNamespace
 };

package/lib/components/code.ws.js

@@ -1,32 +1,38 @@
 import { CodeIcon } from "@webstudio-is/icons";
 import { displayVarNamespace } from "./code";
 import { props } from "./__generated__/code.props";
+import { code } from "../css/normalize";
+const display = {
+  type: "var",
+  value: displayVarNamespace,
+  fallbacks: [
+    {
+      type: "keyword",
+      value: "inline-block"
+    }
+  ]
+};
 const presetStyle = {
-  display: {
-    type: "var",
-    value: displayVarNamespace,
-    fallbacks: [
-      {
-        type: "keyword",
-        value: "inline-block"
-      }
-    ]
-  },
-  paddingLeft: {
-    type: "keyword",
-    value: "0.2em"
-  },
-  paddingRight: {
-    type: "keyword",
-    value: "0.2em"
-  },
-  backgroundColor: {
-    type: "keyword",
-    value: "#eee"
-  },
-  fontFamily: {
-    type: "keyword",
-    value: "monospace"
+  code: {
+    ...code,
+    display,
+    paddingLeft: {
+      type: "unit",
+      value: 0.2,
+      unit: "em"
+    },
+    paddingRight: {
+      type: "unit",
+      value: 0.2,
+      unit: "em"
+    },
+    backgroundColor: {
+      type: "rgb",
+      r: 238,
+      g: 238,
+      b: 238,
+      alpha: 1
+    }
   }
 };
 const meta = {

package/lib/components/form.js

@@ -4,5 +4,6 @@ const defaultTag = "form";
 const Form = forwardRef((props, ref) => /* @__PURE__ */ jsx("form", { ...props, ref }));
 Form.displayName = "Form";
 export {
-  Form
+  Form,
+  defaultTag
 };

package/lib/components/form.ws.js

@@ -1,14 +1,14 @@
 import { FormIcon } from "@webstudio-is/icons";
+import { form } from "../css/normalize";
 import { props } from "./__generated__/form.props";
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "px",
-    value: 20
-  },
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
+  form: {
+    ...form,
+    minHeight: {
+      type: "unit",
+      unit: "px",
+      value: 20
+    }
   }
 };
 const meta = {

package/lib/components/heading.ws.js

@@ -1,11 +1,21 @@
 import { HeadingIcon } from "@webstudio-is/icons";
+import { h1, h2, h3, h4, h5, h6 } from "../css/normalize";
 import { props } from "./__generated__/heading.props";
+const presetStyle = {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6
+};
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: HeadingIcon,
-  children: ["Heading you can edit"]
+  children: ["Heading you can edit"],
+  presetStyle
 };
 const propsMeta = {
   props,

package/lib/components/image.js

@@ -44,5 +44,6 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   />
 </svg>`)}`;
 export {
-  Image
+  Image,
+  defaultTag
 };

package/lib/components/image.ws.js

@@ -1,17 +1,21 @@
 import { ImageIcon } from "@webstudio-is/icons";
+import { img } from "../css/normalize";
 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"
+  img: {
+    ...img,
+    // 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 = {

package/lib/components/input.js

@@ -4,5 +4,6 @@ const defaultTag = "input";
 const Input = forwardRef(({ children: _children, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, ref }));
 Input.displayName = "Input";
 export {
-  Input
+  Input,
+  defaultTag
 };

package/lib/components/input.ws.js

@@ -1,10 +1,15 @@
-import { InputIcon } from "@webstudio-is/icons";
+import { FormTextFieldIcon } from "@webstudio-is/icons";
+import { input } from "../css/normalize";
 import { props } from "./__generated__/input.props";
+const presetStyle = {
+  input
+};
 const meta = {
   category: "forms",
   type: "control",
   label: "Input",
-  Icon: InputIcon
+  Icon: FormTextFieldIcon,
+  presetStyle
 };
 const propsMeta = {
   props

package/lib/components/italic.js

@@ -4,5 +4,6 @@ const defaultTag = "i";
 const Italic = forwardRef((props, ref) => /* @__PURE__ */ jsx("i", { ...props, ref }));
 Italic.displayName = "Italic";
 export {
-  Italic
+  Italic,
+  defaultTag
 };

package/lib/components/italic.ws.js

@@ -1,15 +1,19 @@
-import { FontItalicIcon } from "@webstudio-is/icons";
+import { TextItalicIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/italic.props";
+import { i } from "../css/normalize";
 const presetStyle = {
-  fontStyle: {
-    type: "keyword",
-    value: "italic"
+  i: {
+    ...i,
+    fontStyle: {
+      type: "keyword",
+      value: "italic"
+    }
   }
 };
 const meta = {
   type: "rich-text-child",
   label: "Italic Text",
-  Icon: FontItalicIcon,
+  Icon: TextItalicIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/components/link-block.js

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

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

@@ -1,13 +1,14 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/link-block.props";
+import { propsMeta as linkPropsMeta } from "./link.ws";
+import { a } from "../css/normalize";
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
-  },
-  display: {
-    type: "keyword",
-    value: "inline-block"
+  a: {
+    ...a,
+    display: {
+      type: "keyword",
+      value: "inline-block"
+    }
   }
 };
 const meta = {
@@ -18,8 +19,11 @@ const meta = {
   presetStyle
 };
 const propsMeta = {
-  props,
-  initialProps: ["href", "target", "prefetch"]
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href
+  },
+  initialProps: linkPropsMeta.initialProps
 };
 export {
   meta,