@webstudio-is/react-sdk 0.50.0 → 0.52.0

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

@@ -24,16 +24,20 @@ __export(italic_ws_exports, {
 module.exports = __toCommonJS(italic_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_italic = require("./__generated__/italic.props");
+var import_normalize = require("../css/normalize");
 const presetStyle = {
-  fontStyle: {
-    type: "keyword",
-    value: "italic"
+  i: {
+    ...import_normalize.i,
+    fontStyle: {
+      type: "keyword",
+      value: "italic"
+    }
   }
 };
 const meta = {
   type: "rich-text-child",
   label: "Italic Text",
-  Icon: import_icons.FontItalicIcon,
+  Icon: import_icons.TextItalicIcon,
   presetStyle
 };
 const propsMeta = {

package/lib/cjs/components/{link-block.cjs → link-block.js}

@@ -18,11 +18,13 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var link_block_exports = {};
 __export(link_block_exports, {
-  LinkBlock: () => LinkBlock
+  LinkBlock: () => LinkBlock,
+  defaultTag: () => import_link2.defaultTag
 });
 module.exports = __toCommonJS(link_block_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_link = require("./link");
+var import_link2 = require("./link");
 const LinkBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, { ...props, ref }));
 LinkBlock.displayName = "LinkBlock";

package/lib/cjs/components/{link-block.ws.cjs → link-block.ws.js}

@@ -24,14 +24,15 @@ __export(link_block_ws_exports, {
 module.exports = __toCommonJS(link_block_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_link_block = require("./__generated__/link-block.props");
+var import_link = require("./link.ws");
+var import_normalize = require("../css/normalize");
 const presetStyle = {
-  boxSizing: {
-    type: "keyword",
-    value: "border-box"
-  },
-  display: {
-    type: "keyword",
-    value: "inline-block"
+  a: {
+    ...import_normalize.a,
+    display: {
+      type: "keyword",
+      value: "inline-block"
+    }
   }
 };
 const meta = {
@@ -42,6 +43,9 @@ const meta = {
   presetStyle
 };
 const propsMeta = {
-  props: import_link_block.props,
-  initialProps: ["href", "target", "prefetch"]
+  props: {
+    ...import_link_block.props,
+    href: import_link.propsMeta.props.href
+  },
+  initialProps: import_link.propsMeta.initialProps
 };

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

@@ -18,14 +18,23 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var link_exports = {};
 __export(link_exports, {
-  Link: () => Link
+  Link: () => Link,
+  defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-const Link = (0, import_react.forwardRef)(
-  ({ href = "", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, href, ref });
-  }
-);
+var import_props = require("../props");
+const defaultTag = "a";
+const Link = (0, import_react.forwardRef)((props, ref) => {
+  const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "a",
+    {
+      ...props,
+      href: typeof href === "string" ? href : href?.path,
+      ref
+    }
+  );
+});
 Link.displayName = "Link";

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

@@ -23,27 +23,38 @@ __export(link_ws_exports, {
 });
 module.exports = __toCommonJS(link_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_link = require("./__generated__/link.props");
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "em",
-    value: 1
-  },
-  display: {
-    type: "keyword",
-    value: "inline-block"
+  a: {
+    ...import_normalize.a,
+    minHeight: {
+      type: "unit",
+      unit: "em",
+      value: 1
+    },
+    display: {
+      type: "keyword",
+      value: "inline-block"
+    }
   }
 };
 const meta = {
   category: "general",
   type: "rich-text",
   label: "Link Text",
-  Icon: import_icons.Link2Icon,
+  Icon: import_icons.LinkIcon,
   presetStyle,
   children: ["Link text you can edit"]
 };
 const propsMeta = {
-  props: import_link.props,
+  props: {
+    ...import_link.props,
+    href: {
+      type: "string",
+      control: "url",
+      required: false
+    }
+  },
   initialProps: ["href", "target", "prefetch"]
 };

package/lib/cjs/components/{list-item.cjs → list-item.js}

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

package/lib/cjs/components/{list-item.ws.cjs → list-item.ws.js}

@@ -23,13 +23,18 @@ __export(list_item_ws_exports, {
 });
 module.exports = __toCommonJS(list_item_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_list_item = require("./__generated__/list-item.props");
+const presetStyle = {
+  li: import_normalize.li
+};
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "List Item",
   Icon: import_icons.ListItemIcon,
-  children: ["List Item you can edit"]
+  children: ["List Item you can edit"],
+  presetStyle
 };
 const propsMeta = {
   props: import_list_item.props

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

@@ -24,18 +24,37 @@ __export(list_ws_exports, {
 module.exports = __toCommonJS(list_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_list = require("./__generated__/list.props");
+var import_normalize = require("../css/normalize");
 const presetStyle = {
-  marginTop: {
-    type: "keyword",
-    value: "0"
+  ol: {
+    ...import_normalize.ol,
+    marginTop: {
+      type: "keyword",
+      value: "0"
+    },
+    marginBottom: {
+      type: "keyword",
+      value: "10px"
+    },
+    paddingLeft: {
+      type: "keyword",
+      value: "40px"
+    }
   },
-  marginBottom: {
-    type: "keyword",
-    value: "10px"
-  },
-  paddingLeft: {
-    type: "keyword",
-    value: "40px"
+  ul: {
+    ...import_normalize.ul,
+    marginTop: {
+      type: "keyword",
+      value: "0"
+    },
+    marginBottom: {
+      type: "keyword",
+      value: "10px"
+    },
+    paddingLeft: {
+      type: "keyword",
+      value: "40px"
+    }
   }
 };
 const meta = {

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

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

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

@@ -23,13 +23,18 @@ __export(paragraph_ws_exports, {
 });
 module.exports = __toCommonJS(paragraph_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_paragraph = require("./__generated__/paragraph.props");
+const presetStyle = {
+  p: import_normalize.p
+};
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "Paragraph",
   Icon: import_icons.TextAlignLeftIcon,
-  children: ["Pragraph you can edit"]
+  children: ["Pragraph you can edit"],
+  presetStyle
 };
 const propsMeta = {
   props: import_paragraph.props

package/lib/cjs/components/{rich-text-link.ws.cjs → rich-text-link.ws.js}

@@ -31,6 +31,9 @@ const meta = {
   children: []
 };
 const propsMeta = {
-  ...import_link.propsMeta,
-  props: import_rich_text_link.props
+  initialProps: import_link.propsMeta.initialProps,
+  props: {
+    ...import_rich_text_link.props,
+    href: import_link.propsMeta.props.href
+  }
 };

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

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

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

@@ -24,18 +24,34 @@ __export(separator_ws_exports, {
 module.exports = __toCommonJS(separator_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_separator = require("./__generated__/separator.props");
+var import_normalize = require("../css/normalize");
 const presetStyle = {
-  height: {
-    type: "keyword",
-    value: "1px"
-  },
-  backgroundColor: {
-    type: "keyword",
-    value: "gray"
-  },
-  border: {
-    type: "keyword",
-    value: "none"
+  hr: {
+    ...import_normalize.hr,
+    height: {
+      type: "keyword",
+      value: "1px"
+    },
+    backgroundColor: {
+      type: "keyword",
+      value: "gray"
+    },
+    borderTopStyle: {
+      type: "keyword",
+      value: "none"
+    },
+    borderRightStyle: {
+      type: "keyword",
+      value: "none"
+    },
+    borderLeftStyle: {
+      type: "keyword",
+      value: "none"
+    },
+    borderBottomStyle: {
+      type: "keyword",
+      value: "none"
+    }
   }
 };
 const meta = {

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

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

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

@@ -23,11 +23,16 @@ __export(span_ws_exports, {
 });
 module.exports = __toCommonJS(span_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_span = require("./__generated__/span.props");
+const presetStyle = {
+  span: import_normalize.span
+};
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",
-  Icon: import_icons.BrushIcon
+  Icon: import_icons.PaintBrushIcon,
+  presetStyle
 };
 const propsMeta = {
   props: import_span.props

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

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

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

@@ -23,11 +23,16 @@ __export(subscript_ws_exports, {
 });
 module.exports = __toCommonJS(subscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_subscript = require("./__generated__/subscript.props");
+const presetStyle = {
+  sub: import_normalize.sub
+};
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
-  Icon: import_icons.SubscriptIcon
+  Icon: import_icons.SubscriptIcon,
+  presetStyle
 };
 const propsMeta = {
   props: import_subscript.props

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

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

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

@@ -23,11 +23,16 @@ __export(superscript_ws_exports, {
 });
 module.exports = __toCommonJS(superscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
+var import_normalize = require("../css/normalize");
 var import_superscript = require("./__generated__/superscript.props");
+const presetStyle = {
+  sup: import_normalize.sup
+};
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
-  Icon: import_icons.SuperscriptIcon
+  Icon: import_icons.SuperscriptIcon,
+  presetStyle
 };
 const propsMeta = {
   props: import_superscript.props

package/lib/cjs/components/{text-block.cjs → text-block.js}

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

package/lib/cjs/components/{text-block.ws.cjs → text-block.ws.js}

@@ -24,18 +24,22 @@ __export(text_block_ws_exports, {
 module.exports = __toCommonJS(text_block_ws_exports);
 var import_icons = require("@webstudio-is/icons");
 var import_text_block = require("./__generated__/text-block.props");
+var import_normalize = require("../css/normalize");
 const presetStyle = {
-  minHeight: {
-    type: "unit",
-    unit: "em",
-    value: 1
+  div: {
+    ...import_normalize.div,
+    minHeight: {
+      type: "unit",
+      unit: "em",
+      value: 1
+    }
   }
 };
 const meta = {
   category: "typography",
   type: "rich-text",
   label: "Text Block",
-  Icon: import_icons.TextIcon,
+  Icon: import_icons.TextBlockIcon,
   presetStyle,
   children: ["Block of text you can edit"]
 };

package/lib/cjs/{context.cjs → context.js}

@@ -25,5 +25,6 @@ var import_nanostores = require("nanostores");
 var import_react = require("react");
 const ReactSdkContext = (0, import_react.createContext)({
   propsByInstanceIdStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
-  assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map())
+  assetsStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map()),
+  pagesStore: (0, import_nanostores.atom)(/* @__PURE__ */ new Map())
 });

package/lib/cjs/css/css.js

@@ -0,0 +1,64 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var css_exports = {};
+__export(css_exports, {
+  generateCssText: () => generateCssText
+});
+module.exports = __toCommonJS(css_exports);
+var import_css_engine = require("@webstudio-is/css-engine");
+var import_components_utils = require("../components/components-utils");
+var import_components = require("../components");
+var import_tree = require("../tree");
+var import_global_rules = require("./global-rules");
+var import_style_rules = require("./style-rules");
+const generateCssText = (data) => {
+  const assets = new Map(
+    data.assets.map((asset) => [asset.id, asset])
+  );
+  const breakpoints = new Map(data.breakpoints);
+  const styles = new Map(data.styles);
+  const styleSourceSelections = new Map(data.styleSourceSelections);
+  const engine = (0, import_css_engine.createCssEngine)({ name: "ssr" });
+  (0, import_global_rules.addGlobalRules)(engine, { assets });
+  for (const breakpoint of breakpoints.values()) {
+    engine.addMediaRule(breakpoint.id, breakpoint);
+  }
+  for (const component of (0, import_components_utils.getComponentNames)()) {
+    const meta = (0, import_components.getComponentMeta)(component);
+    const presetStyle = meta?.presetStyle;
+    if (presetStyle !== void 0) {
+      for (const [tag, style] of Object.entries(presetStyle)) {
+        engine.addStyleRule(
+          `${tag}:where([${import_tree.componentAttribute}=${component}])`,
+          {
+            style
+          }
+        );
+      }
+    }
+  }
+  const styleRules = (0, import_style_rules.getStyleRules)(styles, styleSourceSelections);
+  for (const { breakpointId, instanceId, style } of styleRules) {
+    engine.addStyleRule(`[${import_tree.idAttribute}="${instanceId}"]`, {
+      breakpoint: breakpointId,
+      style
+    });
+  }
+  return engine.cssText;
+};

package/lib/cjs/css/global-rules.js

@@ -0,0 +1,37 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var global_rules_exports = {};
+__export(global_rules_exports, {
+  addGlobalRules: () => addGlobalRules
+});
+module.exports = __toCommonJS(global_rules_exports);
+var import_fonts = require("@webstudio-is/fonts");
+const addGlobalRules = (engine, { assets }) => {
+  engine.addPlaintextRule("html {margin: 0; height: 100%}");
+  const fontAssets = [];
+  for (const asset of assets.values()) {
+    if (asset && import_fonts.FONT_FORMATS.has(asset.format)) {
+      fontAssets.push(asset);
+    }
+  }
+  const fontFaces = (0, import_fonts.getFontFaces)(fontAssets);
+  for (const fontFace of fontFaces) {
+    engine.addFontFaceRule(fontFace);
+  }
+};

package/lib/cjs/css/{index.cjs → index.js}

@@ -16,4 +16,6 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var css_exports = {};
 module.exports = __toCommonJS(css_exports);
 __reExport(css_exports, require("./get-browser-style"), module.exports);
-__reExport(css_exports, require("./categories"), module.exports);
+__reExport(css_exports, require("./global-rules"), module.exports);
+__reExport(css_exports, require("./style-rules"), module.exports);
+__reExport(css_exports, require("./css"), module.exports);

package/lib/cjs/css/normalize-type-check.js

@@ -0,0 +1,26 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var normalize = __toESM(require("./normalize"), 1);
+const normalizeWithKeyof = { ...normalize };
+normalizeWithKeyof;