@webstudio-is/react-sdk 0.50.0 → 0.52.0

package/lib/app/custom-components/image.js

@@ -5,14 +5,12 @@ import {
 } from "react";
 import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
-import { usePropAsset } from "../../props";
-import { idAttribute } from "../../tree/webstudio-component";
+import { usePropAsset, getInstanceIdFromComponentProps } from "../../props";
 import { getParams } from "../params";
 const defaultTag = "img";
 const Image = forwardRef(
   (props, ref) => {
-    const componentId = props[idAttribute];
-    const asset = usePropAsset(componentId, "src");
+    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
     const params = getParams();
     const loader = useMemo(() => {
       if (asset === void 0) {

package/lib/app/custom-components/shared/remix-link.js

@@ -1,30 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { Link } from "@remix-run/react";
+import { Link as RemixLink } from "@remix-run/react";
 import { forwardRef } from "react";
-const isAbsoluteUrl = (href) => {
-  try {
-    new URL(href);
-    return true;
-  } catch {
-    return false;
-  }
-};
-const isAbsoluteUrlRemix = (href) => /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
+import { usePropUrl, getInstanceIdFromComponentProps } from "../../../props";
 const wrapLinkComponent = (BaseLink) => {
-  const Component = forwardRef(({ href = "", ...props }, ref) => {
-    const isAbsolute = isAbsoluteUrl(href);
-    const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
-    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
-      return /* @__PURE__ */ jsx(
-        BaseLink,
-        {
-          ...props,
-          href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
-          ref
-        }
-      );
+  const Component = forwardRef((props, ref) => {
+    const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+    if (typeof href === "string" || href === void 0) {
+      return /* @__PURE__ */ jsx(BaseLink, { ...props, ref });
     }
-    return /* @__PURE__ */ jsx(Link, { ...props, to: href, ref });
+    return /* @__PURE__ */ jsx(RemixLink, { ...props, to: href.path, ref });
   });
   Component.displayName = BaseLink.displayName;
   return Component;

package/lib/cjs/app/custom-components/{image.cjs → image.js}

@@ -26,13 +26,11 @@ var import_react = require("react");
 var import_image = require("@webstudio-is/image");
 var import_image2 = require("../../components/image");
 var import_props = require("../../props");
-var import_webstudio_component = require("../../tree/webstudio-component");
 var import_params = require("../params");
 const defaultTag = "img";
 const Image = (0, import_react.forwardRef)(
   (props, ref) => {
-    const componentId = props[import_webstudio_component.idAttribute];
-    const asset = (0, import_props.usePropAsset)(componentId, "src");
+    const asset = (0, import_props.usePropAsset)((0, import_props.getInstanceIdFromComponentProps)(props), "src");
     const params = (0, import_params.getParams)();
     const loader = (0, import_react.useMemo)(() => {
       if (asset === void 0) {

package/lib/cjs/app/custom-components/shared/{remix-link.cjs → remix-link.js}

@@ -24,30 +24,14 @@ module.exports = __toCommonJS(remix_link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("@remix-run/react");
 var import_react2 = require("react");
-const isAbsoluteUrl = (href) => {
-  try {
-    new URL(href);
-    return true;
-  } catch {
-    return false;
-  }
-};
-const isAbsoluteUrlRemix = (href) => /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
+var import_props = require("../../../props");
 const wrapLinkComponent = (BaseLink) => {
-  const Component = (0, import_react2.forwardRef)(({ href = "", ...props }, ref) => {
-    const isAbsolute = isAbsoluteUrl(href);
-    const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
-    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        BaseLink,
-        {
-          ...props,
-          href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
-          ref
-        }
-      );
+  const Component = (0, import_react2.forwardRef)((props, ref) => {
+    const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
+    if (typeof href === "string" || href === void 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, { ...props, ref });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to: href, ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to: href.path, ref });
   });
   Component.displayName = BaseLink.displayName;
   return Component;

package/lib/cjs/components/__generated__/{link.props.cjs → link.props.js}

@@ -25,18 +25,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/cjs/components/{blockquote.cjs → blockquote.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var blockquote_exports = {};
 __export(blockquote_exports, {
-  Blockquote: () => Blockquote
+  Blockquote: () => Blockquote,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(blockquote_exports);
 var import_react = require("react");

package/lib/cjs/components/{blockquote.ws.cjs → blockquote.ws.js}

@@ -25,41 +25,63 @@ module.exports = __toCommonJS(blockquote_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_blockquote = require("./__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/cjs/components/{body.cjs → body.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var body_exports = {};
 __export(body_exports, {
-  Body: () => Body
+  Body: () => Body,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(body_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{body.ws.cjs → body.ws.js}

@@ -23,54 +23,38 @@ __export(body_ws_exports, {
 });
 module.exports = __toCommonJS(body_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_body = require("./__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: {
+    ...import_normalize.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/cjs/components/{bold.cjs → bold.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var bold_exports = {};
 __export(bold_exports, {
-  Bold: () => Bold
+  Bold: () => Bold,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(bold_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{bold.ws.cjs → bold.ws.js}

@@ -24,10 +24,15 @@ __export(bold_ws_exports, {
 module.exports = __toCommonJS(bold_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_bold = require("./__generated__/bold.props");
+var import_normalize = require("../css/normalize");
+const presetStyle = {
+  b: import_normalize.b
+};
 const meta = {
   type: "rich-text-child",
   label: "Bold Text",
-  Icon: import_icons.FontBoldIcon
+  Icon: import_icons.BoldIcon,
+  presetStyle
 };
 const propsMeta = {
   props: import_bold.props

package/lib/cjs/components/{box.ws.cjs → box.ws.js}

@@ -24,11 +24,18 @@ __export(box_ws_exports, {
 module.exports = __toCommonJS(box_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_box = require("./__generated__/box.props");
+var import_normalize = require("../css/normalize");
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
-  }
+  div: import_normalize.div,
+  address: import_normalize.address,
+  article: import_normalize.article,
+  aside: import_normalize.aside,
+  figure: import_normalize.figure,
+  footer: import_normalize.footer,
+  header: import_normalize.header,
+  main: import_normalize.main,
+  nav: import_normalize.nav,
+  section: import_normalize.section
 };
 const meta = {
   category: "general",

package/lib/cjs/components/{button.cjs → button.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var button_exports = {};
 __export(button_exports, {
-  Button: () => Button
+  Button: () => Button,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(button_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{button.ws.cjs → button.ws.js}

@@ -24,11 +24,16 @@ __export(button_ws_exports, {
 module.exports = __toCommonJS(button_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_button = require("./__generated__/button.props");
+var import_normalize = require("../css/normalize");
+const presetStyle = {
+  button: import_normalize.button
+};
 const meta = {
   category: "forms",
   type: "container",
   label: "Button",
-  Icon: import_icons.ButtonIcon
+  Icon: import_icons.ButtonElementIcon,
+  presetStyle
 };
 const propsMeta = {
   props: import_button.props,

package/lib/cjs/components/{code.cjs → code.js}

@@ -19,6 +19,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var code_exports = {};
 __export(code_exports, {
   Code: () => Code,
+  defaultTag: () => defaultTag,
   displayVarNamespace: () => displayVarNamespace
 });
 module.exports = __toCommonJS(code_exports);

package/lib/cjs/components/{code.ws.cjs → code.ws.js}

@@ -25,32 +25,38 @@ module.exports = __toCommonJS(code_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_code = require("./code");
 var import_code2 = require("./__generated__/code.props");
+var import_normalize = require("../css/normalize");
+const display = {
+  type: "var",
+  value: import_code.displayVarNamespace,
+  fallbacks: [
+    {
+      type: "keyword",
+      value: "inline-block"
+    }
+  ]
+};
 const presetStyle = {
-  display: {
-    type: "var",
-    value: import_code.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: {
+    ...import_normalize.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/cjs/components/{form.cjs → form.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var form_exports = {};
 __export(form_exports, {
-  Form: () => Form
+  Form: () => Form,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(form_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{form.ws.cjs → form.ws.js}

@@ -23,16 +23,16 @@ __export(form_ws_exports, {
 });
 module.exports = __toCommonJS(form_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_form = require("./__generated__/form.props");
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "px",
-    value: 20
-  },
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
+  form: {
+    ...import_normalize.form,
+    minHeight: {
+      type: "unit",
+      unit: "px",
+      value: 20
+    }
   }
 };
 const meta = {

package/lib/cjs/components/{heading.ws.cjs → heading.ws.js}

@@ -23,13 +23,23 @@ __export(heading_ws_exports, {
 });
 module.exports = __toCommonJS(heading_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_heading = require("./__generated__/heading.props");
+const presetStyle = {
+  h1: import_normalize.h1,
+  h2: import_normalize.h2,
+  h3: import_normalize.h3,
+  h4: import_normalize.h4,
+  h5: import_normalize.h5,
+  h6: import_normalize.h6
+};
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "Heading",
   Icon: import_icons.HeadingIcon,
-  children: ["Heading you can edit"]
+  children: ["Heading you can edit"],
+  presetStyle
 };
 const propsMeta = {
   props: import_heading.props,

package/lib/cjs/components/{image.cjs → image.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var image_exports = {};
 __export(image_exports, {
-  Image: () => Image
+  Image: () => Image,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(image_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{image.ws.cjs → image.ws.js}

@@ -23,19 +23,23 @@ __export(image_ws_exports, {
 });
 module.exports = __toCommonJS(image_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_image = require("./__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: {
+    ...import_normalize.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/cjs/components/{input.cjs → input.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var input_exports = {};
 __export(input_exports, {
-  Input: () => Input
+  Input: () => Input,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(input_exports);
 var import_jsx_runtime = require("react/jsx-runtime");

package/lib/cjs/components/{input.ws.cjs → input.ws.js}

@@ -23,12 +23,17 @@ __export(input_ws_exports, {
 });
 module.exports = __toCommonJS(input_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_input = require("./__generated__/input.props");
+const presetStyle = {
+  input: import_normalize.input
+};
 const meta = {
   category: "forms",
   type: "control",
   label: "Input",
-  Icon: import_icons.InputIcon
+  Icon: import_icons.FormTextFieldIcon,
+  presetStyle
 };
 const propsMeta = {
   props: import_input.props

package/lib/cjs/components/{italic.cjs → italic.js}

@@ -18,7 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var italic_exports = {};
 __export(italic_exports, {
-  Italic: () => Italic
+  Italic: () => Italic,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(italic_exports);
 var import_jsx_runtime = require("react/jsx-runtime");