@webstudio-is/react-sdk 0.67.0 → 0.69.0

package/lib/cjs/components/__generated__/image.props.js

@@ -25,7 +25,7 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
-  alt: { required: false, control: "text", type: "string", defaultValue: "" },
+  alt: { required: false, control: "text", type: "string" },
   crossOrigin: {
     required: false,
     control: "radio",
@@ -62,7 +62,7 @@ const props = {
     ]
   },
   sizes: { required: false, control: "text", type: "string" },
-  src: { required: false, control: "text", type: "string", defaultValue: "" },
+  src: { required: false, control: "text", type: "string" },
   srcSet: { required: false, control: "text", type: "string" },
   useMap: { required: false, control: "text", type: "string" },
   width: { required: false, control: "number", type: "number" },
@@ -455,5 +455,8 @@ const props = {
     required: false,
     control: "text",
     type: "string"
-  }
+  },
+  quality: { required: false, control: "number", type: "number" },
+  loader: { required: true, control: "text", type: "string" },
+  optimize: { required: false, control: "boolean", type: "boolean" }
 };

package/lib/cjs/components/__generated__/text-block.props.js

@@ -414,5 +414,12 @@ const props = {
     required: false,
     control: "text",
     type: "string"
+  },
+  tag: {
+    required: false,
+    control: "radio",
+    type: "string",
+    defaultValue: "div",
+    options: ["div", "figcaption", "span"]
   }
 };

package/lib/cjs/components/blockquote.ws.js

@@ -74,13 +74,20 @@ const presetStyle = {
   ]
 };
 const meta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Blockquote",
   icon: import_svg.BlockquoteIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
-  children: [{ type: "text", value: "Blockquote you can edit" }]
+  template: [
+    {
+      type: "instance",
+      component: "Blockquote",
+      children: [{ type: "text", value: "Blockquote you can edit" }]
+    }
+  ],
+  order: 3
 };
 const propsMeta = {
   props: import_blockquote.props

package/lib/cjs/components/box.ws.js

@@ -44,7 +44,8 @@ const meta = {
   label: "Box",
   icon: import_svg.BoxIcon,
   states: import_component_meta.defaultStates,
-  presetStyle
+  presetStyle,
+  order: 0
 };
 const propsMeta = {
   props: import_box.props,

package/lib/cjs/components/button.ws.js

@@ -32,6 +32,7 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "container",
+  invalidAncestors: ["Button"],
   label: "Button",
   icon: import_svg.ButtonElementIcon,
   presetStyle,
@@ -39,7 +40,8 @@ const meta = {
     ...import_component_meta.defaultStates,
     { selector: ":disabled", label: "Disabled" },
     { selector: ":enabled", label: "Enabled" }
-  ]
+  ],
+  order: 1
 };
 const propsMeta = {
   props: import_button.props,

package/lib/cjs/components/checkbox-field.ws.js

@@ -39,14 +39,20 @@ const meta = {
   icon: import_svg.CheckboxCheckedIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
-  children: [
-    { type: "instance", component: "Checkbox", props: [], children: [] },
+  template: [
     {
       type: "instance",
-      component: "TextBlock",
-      label: "Checkbox Label",
-      props: [],
-      children: [{ type: "text", value: "Checkbox" }]
+      component: "CheckboxField",
+      children: [
+        { type: "instance", component: "Checkbox", children: [] },
+        {
+          type: "instance",
+          component: "TextBlock",
+          label: "Checkbox Label",
+          props: [],
+          children: [{ type: "text", value: "Checkbox" }]
+        }
+      ]
     }
   ]
 };

package/lib/cjs/components/checkbox.ws.js

@@ -40,6 +40,7 @@ const meta = {
   label: "Checkbox Input",
   icon: import_svg.CheckboxCheckedIcon,
   presetStyle,
+  order: 6,
   states: [
     ...import_component_meta.defaultStates,
     { selector: ":checked", label: "Checked" },

package/lib/cjs/components/code-text.ws.js

@@ -59,7 +59,14 @@ const meta = {
   icon: import_svg.CodeTextIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
-  children: [{ type: "text", value: "Code you can edit" }]
+  template: [
+    {
+      type: "instance",
+      component: "CodeText",
+      children: [{ type: "text", value: "Code you can edit" }]
+    }
+  ],
+  order: 8
 };
 const propsMeta = {
   props: import_code_text2.props,

package/lib/cjs/components/component-meta.js

@@ -33,7 +33,7 @@ const WsComponentPropsMeta = import_zod.z.object({
 });
 const componentCategories = [
   "general",
-  "typography",
+  "text",
   "media",
   "forms"
 ];
@@ -64,10 +64,13 @@ const WsComponentMeta = import_zod.z.object({
     "rich-text",
     "rich-text-child"
   ]),
-  acceptedParents: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
+  requiredAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
+  invalidAncestors: import_zod.z.optional(import_zod.z.array(import_zod.z.string())),
+  stylable: import_zod.z.optional(import_zod.z.boolean()),
   label: import_zod.z.string(),
   icon: import_zod.z.string(),
   presetStyle: import_zod.z.optional(import_zod.z.record(import_zod.z.string(), import_embed_template.EmbedTemplateStyleDecl)),
   states: import_zod.z.optional(import_zod.z.array(ComponentState)),
-  children: import_zod.z.optional(import_embed_template.WsEmbedTemplate)
+  template: import_zod.z.optional(import_embed_template.WsEmbedTemplate),
+  order: import_zod.z.number().optional()
 });

package/lib/cjs/components/components-utils.js

@@ -1,14 +1,8 @@
 "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 __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))
@@ -17,28 +11,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var components_utils_exports = {};
-__export(components_utils_exports, {
-  createGetComponent: () => createGetComponent,
-  getComponent: () => getComponent
-});
 module.exports = __toCommonJS(components_utils_exports);
-var components = __toESM(require("./components"), 1);
-var import_index = require("./index");
-const getComponent = (name) => {
-  return import_index.registeredComponents != null && name in import_index.registeredComponents ? import_index.registeredComponents[name] : components[name];
-};
-const createGetComponent = (comps) => {
-  return (name) => {
-    return import_index.registeredComponents != null && name in import_index.registeredComponents ? import_index.registeredComponents[name] : comps[name];
-  };
-};

package/lib/cjs/components/form.ws.js

@@ -39,33 +39,40 @@ const meta = {
   icon: import_svg.FormIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
-  children: [
+  order: 0,
+  template: [
     {
       type: "instance",
-      component: "Label",
-      children: [{ type: "text", value: "Name" }]
-    },
-    {
-      type: "instance",
-      component: "Input",
-      props: [{ type: "string", name: "name", value: "name" }],
-      children: []
-    },
-    {
-      type: "instance",
-      component: "Label",
-      children: [{ type: "text", value: "Email" }]
-    },
-    {
-      type: "instance",
-      component: "Input",
-      props: [{ type: "string", name: "name", value: "email" }],
-      children: []
-    },
-    {
-      type: "instance",
-      component: "Button",
-      children: [{ type: "text", value: "Submit" }]
+      component: "Form",
+      children: [
+        {
+          type: "instance",
+          component: "Label",
+          children: [{ type: "text", value: "Name" }]
+        },
+        {
+          type: "instance",
+          component: "Input",
+          props: [{ type: "string", name: "name", value: "name" }],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Label",
+          children: [{ type: "text", value: "Email" }]
+        },
+        {
+          type: "instance",
+          component: "Input",
+          props: [{ type: "string", name: "name", value: "email" }],
+          children: []
+        },
+        {
+          type: "instance",
+          component: "Button",
+          children: [{ type: "text", value: "Submit" }]
+        }
+      ]
     }
   ]
 };

package/lib/cjs/components/fragment.ws.js

@@ -25,7 +25,8 @@ module.exports = __toCommonJS(fragment_ws_exports);
 const meta = {
   type: "container",
   label: "Fragment",
-  icon: ""
+  icon: "",
+  stylable: false
 };
 const propsMeta = {
   props: {}

package/lib/cjs/components/heading.ws.js

@@ -35,13 +35,20 @@ const presetStyle = {
   h6: import_normalize.h6
 };
 const meta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Heading",
   icon: import_svg.HeadingIcon,
-  children: [{ type: "text", value: "Heading you can edit" }],
   states: import_component_meta.defaultStates,
-  presetStyle
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Heading",
+      children: [{ type: "text", value: "Heading you can edit" }]
+    }
+  ],
+  order: 1
 };
 const propsMeta = {
   props: import_heading.props,

package/lib/cjs/components/html-embed.ws.js

@@ -28,7 +28,9 @@ const meta = {
   category: "general",
   type: "embed",
   label: "HTML Embed",
-  icon: import_svg.EmbedIcon
+  icon: import_svg.EmbedIcon,
+  stylable: false,
+  order: 7
 };
 const propsMeta = {
   props: {

package/lib/cjs/components/image.js

@@ -24,26 +24,10 @@ __export(image_exports, {
 module.exports = __toCommonJS(image_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
+var import_image = require("@webstudio-is/image");
+var import_props = require("../props");
+var import_params = require("../app/params");
 const defaultTag = "img";
-const Image = (0, import_react.forwardRef)(
-  (imageProps, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "img",
-      {
-        ...imageProps,
-        src: imageProps.src || imagePlaceholderSvg,
-        ref
-      }
-    );
-  }
-);
-Image.defaultProps = {
-  src: "",
-  width: "",
-  height: "",
-  alt: ""
-};
-Image.displayName = "Image";
 const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   width="140"
   height="140"
@@ -67,3 +51,27 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
     fill="#A2A2A2"
   />
 </svg>`)}`;
+const Image = (0, import_react.forwardRef)(
+  (props, ref) => {
+    const asset = (0, import_props.usePropAsset)((0, import_props.getInstanceIdFromComponentProps)(props), "src");
+    const loader = (0, import_react.useMemo)(() => {
+      const params = (0, import_params.getParams)();
+      return (0, import_image.createImageLoader)({ imageBaseUrl: params.imageBaseUrl });
+    }, []);
+    const src = asset?.name ?? props.src;
+    if (asset == null || loader == null) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { ...props, src: src || imagePlaceholderSvg, ref }, src);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_image.Image,
+      {
+        ...props,
+        loader,
+        src,
+        ref
+      },
+      src
+    );
+  }
+);
+Image.displayName = "Image";

package/lib/cjs/components/image.ws.js

@@ -48,11 +48,13 @@ const meta = {
   label: "Image",
   icon: import_svg.ImageIcon,
   states: import_component_meta.defaultStates,
-  presetStyle
+  presetStyle,
+  order: 0
 };
+const { loader, ...publicProps } = import_image.props;
 const propsMeta = {
   props: {
-    ...import_image.props,
+    ...publicProps,
     src: {
       type: "string",
       control: "file",

package/lib/cjs/components/index.js

@@ -18,13 +18,8 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var components_exports = {};
 __export(components_exports, {
-  canAcceptComponent: () => canAcceptComponent,
   defaultMetas: () => defaultMetas,
-  defaultPropsMetas: () => defaultPropsMetas,
-  getComponentMeta: () => getComponentMeta,
-  registerComponentMetas: () => registerComponentMetas,
-  registerComponents: () => registerComponents,
-  registeredComponents: () => registeredComponents
+  defaultPropsMetas: () => defaultPropsMetas
 });
 module.exports = __toCommonJS(components_exports);
 var import_slot = require("./slot.ws");
@@ -128,17 +123,6 @@ const defaultMetas = {
   CheckboxField: import_checkbox_field.meta,
   Checkbox: import_checkbox.meta
 };
-let currentMetas = defaultMetas;
-const getComponentMeta = (name) => {
-  return currentMetas[name];
-};
-const registerComponentMetas = (overrides) => {
-  const result = {};
-  for (const name of Object.keys(defaultMetas)) {
-    result[name] = { ...defaultMetas[name], ...overrides[name] };
-  }
-  currentMetas = result;
-};
 const defaultPropsMetas = {
   Slot: import_slot2.propsMeta,
   Fragment: import_fragment2.propsMeta,
@@ -174,15 +158,3 @@ const defaultPropsMetas = {
   CheckboxField: import_checkbox_field2.propsMeta,
   Checkbox: import_checkbox2.propsMeta
 };
-let registeredComponents;
-const registerComponents = (components) => {
-  registeredComponents = components;
-};
-const canAcceptComponent = (parentComponent, childComponent) => {
-  const parentMeta = getComponentMeta(parentComponent);
-  const childMeta = getComponentMeta(childComponent);
-  if (parentMeta?.type !== "container" || childMeta === void 0) {
-    return false;
-  }
-  return childMeta.acceptedParents === void 0 || childMeta.acceptedParents.includes(parentComponent);
-};

package/lib/cjs/components/input.ws.js

@@ -35,6 +35,7 @@ const meta = {
   label: "Text Input",
   icon: import_svg.FormTextFieldIcon,
   presetStyle,
+  order: 3,
   states: [
     ...import_component_meta.defaultStates,
     { selector: "::placeholder", label: "Placeholder" },

package/lib/cjs/components/label.ws.js

@@ -39,7 +39,14 @@ const meta = {
   icon: import_svg.TextBlockIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
-  children: [{ type: "text", value: "Form Label" }]
+  order: 2,
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      children: [{ type: "text", value: "Form Label" }]
+    }
+  ]
 };
 const propsMeta = {
   props: {

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

@@ -41,7 +41,8 @@ const meta = {
   label: "Link Block",
   icon: import_svg.LinkBlockIcon,
   states: import_link.meta.states,
-  presetStyle
+  presetStyle,
+  order: 2
 };
 const propsMeta = {
   props: {

package/lib/cjs/components/link.ws.js

@@ -45,6 +45,7 @@ const meta = {
   label: "Link Text",
   icon: import_svg.LinkIcon,
   presetStyle,
+  order: 1,
   states: [
     ...import_component_meta.defaultStates,
     {
@@ -57,7 +58,13 @@ const meta = {
       label: "Current page"
     }
   ],
-  children: [{ type: "text", value: "Link text you can edit" }]
+  template: [
+    {
+      type: "instance",
+      component: "Link",
+      children: [{ type: "text", value: "Link text you can edit" }]
+    }
+  ]
 };
 const propsMeta = {
   props: {

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

@@ -30,14 +30,21 @@ const presetStyle = {
   li: import_normalize.li
 };
 const meta = {
-  category: "typography",
+  category: "general",
   type: "rich-text",
-  acceptedParents: ["List"],
+  requiredAncestors: ["List"],
   label: "List Item",
   icon: import_svg.ListItemIcon,
-  children: [{ type: "text", value: "List Item you can edit" }],
   states: import_component_meta.defaultStates,
-  presetStyle
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "ListItem",
+      children: [{ type: "text", value: "List Item you can edit" }]
+    }
+  ],
+  order: 4
 };
 const propsMeta = {
   props: import_list_item.props

package/lib/cjs/components/list.ws.js

@@ -59,13 +59,13 @@ const presetStyle = {
   ]
 };
 const meta = {
-  category: "typography",
+  category: "general",
   type: "container",
   label: "List",
   icon: import_svg.ListIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
-  children: []
+  order: 3
 };
 const propsMeta = {
   props: import_list.props,

package/lib/cjs/components/paragraph.ws.js

@@ -30,13 +30,20 @@ const presetStyle = {
   p: import_normalize.p
 };
 const meta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Paragraph",
   icon: import_svg.TextAlignLeftIcon,
-  children: [{ type: "text", value: "Pragraph you can edit" }],
   states: import_component_meta.defaultStates,
-  presetStyle
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Paragraph",
+      children: [{ type: "text", value: "Pragraph you can edit" }]
+    }
+  ],
+  order: 2
 };
 const propsMeta = {
   props: import_paragraph.props

package/lib/cjs/components/radio-button-field.ws.js

@@ -39,14 +39,20 @@ const meta = {
   icon: import_svg.RadioCheckedIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
-  children: [
-    { type: "instance", component: "RadioButton", props: [], children: [] },
+  template: [
     {
       type: "instance",
-      component: "TextBlock",
-      label: "Radio Label",
-      props: [],
-      children: [{ type: "text", value: "Radio" }]
+      component: "RadioButtonField",
+      children: [
+        { type: "instance", component: "RadioButton", props: [], children: [] },
+        {
+          type: "instance",
+          component: "TextBlock",
+          label: "Radio Label",
+          props: [],
+          children: [{ type: "text", value: "Radio" }]
+        }
+      ]
     }
   ]
 };

package/lib/cjs/components/radio-button.ws.js

@@ -40,6 +40,7 @@ const meta = {
   label: "Radio Input",
   icon: import_svg.RadioCheckedIcon,
   presetStyle,
+  order: 5,
   states: [
     ...import_component_meta.defaultStates,
     { selector: ":checked", label: "Checked" },

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

@@ -28,7 +28,7 @@ const { category, ...linkMetaRest } = import_link.meta;
 const meta = {
   ...linkMetaRest,
   type: "rich-text-child",
-  children: []
+  template: []
 };
 const propsMeta = {
   initialProps: import_link.propsMeta.initialProps,

package/lib/cjs/components/separator.ws.js

@@ -62,7 +62,7 @@ const meta = {
   icon: import_svg.DashIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
-  children: []
+  order: 5
 };
 const propsMeta = {
   props: import_separator.props,

package/lib/cjs/components/slot.ws.js

@@ -27,7 +27,9 @@ const meta = {
   category: "general",
   type: "container",
   label: "Slot",
-  icon: import_svg.SlotComponentIcon
+  icon: import_svg.SlotComponentIcon,
+  stylable: false,
+  order: 6
 };
 const propsMeta = {
   props: {}