@webstudio-is/react-sdk 0.67.0 → 0.69.0

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

@@ -22,8 +22,11 @@ __export(text_block_exports, {
   defaultTag: () => defaultTag
 });
 module.exports = __toCommonJS(text_block_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 const defaultTag = "div";
-const TextBlock = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props, ref }));
+const TextBlock = (0, import_react.forwardRef)(
+  ({ tag = defaultTag, ...props }, ref) => {
+    return (0, import_react.createElement)(tag, { ...props, ref });
+  }
+);
 TextBlock.displayName = "TextBlock";

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

@@ -36,14 +36,22 @@ const presetStyle = {
   ]
 };
 const meta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Text Block",
   icon: import_svg.TextBlockIcon,
   states: import_component_meta.defaultStates,
   presetStyle,
-  children: [{ type: "text", value: "Block of text you can edit" }]
+  template: [
+    {
+      type: "instance",
+      component: "TextBlock",
+      children: [{ type: "text", value: "Block of text you can edit" }]
+    }
+  ],
+  order: 0
 };
 const propsMeta = {
-  props: import_text_block.props
+  props: import_text_block.props,
+  initialProps: ["tag"]
 };

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

@@ -39,6 +39,7 @@ const meta = {
   label: "Text Area",
   icon: import_svg.FormTextAreaIcon,
   presetStyle,
+  order: 4,
   states: [
     ...import_component_meta.defaultStates,
     { selector: "::placeholder", label: "Placeholder" },

package/lib/cjs/embed-template.js

@@ -53,11 +53,12 @@ const EmbedTemplateProp = import_zod.z.union([
     value: import_zod.z.array(import_zod.z.string())
   })
 ]);
-const EmbedTemplateStyleDecl = import_zod.z.object({
+const EmbedTemplateStyleDeclRaw = import_zod.z.object({
   state: import_zod.z.optional(import_zod.z.string()),
   property: import_zod.z.string(),
   value: import_css_data.StyleValue
 });
+const EmbedTemplateStyleDecl = EmbedTemplateStyleDeclRaw;
 const EmbedTemplateInstance = import_zod.z.lazy(
   () => import_zod.z.object({
     type: import_zod.z.literal("instance"),

package/lib/cjs/index.js

@@ -20,10 +20,9 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   componentCategories: () => import_component_meta.componentCategories,
-  customComponentMetas: () => import_custom_components.customComponentMetas,
-  customComponentPropsMetas: () => import_custom_components.customComponentPropsMetas,
-  customComponents: () => import_custom_components.customComponents,
-  stateCategories: () => import_component_meta.stateCategories
+  getInstanceIdFromComponentProps: () => import_props.getInstanceIdFromComponentProps,
+  stateCategories: () => import_component_meta.stateCategories,
+  usePropUrl: () => import_props.usePropUrl
 });
 module.exports = __toCommonJS(src_exports);
 __reExport(src_exports, require("./css"), module.exports);
@@ -33,6 +32,6 @@ __reExport(src_exports, require("./pubsub"), module.exports);
 __reExport(src_exports, require("./app"), module.exports);
 __reExport(src_exports, require("./components/components"), module.exports);
 __reExport(src_exports, require("./components/components-utils"), module.exports);
-var import_custom_components = require("./app/custom-components");
 var import_component_meta = require("./components/component-meta");
 __reExport(src_exports, require("./embed-template"), module.exports);
+var import_props = require("./props");

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

@@ -33,7 +33,7 @@ const createElementsTree = ({
   assetsStore,
   pagesStore,
   Component,
-  getComponent
+  components
 }) => {
   const rootInstance = instances.get(rootInstanceId);
   if (rootInstance === void 0) {
@@ -45,7 +45,7 @@ const createElementsTree = ({
     instanceSelector: rootInstanceSelector,
     Component,
     children: rootInstance.children,
-    getComponent
+    components
   });
   const root = createInstanceElement({
     Component,
@@ -58,7 +58,7 @@ const createElementsTree = ({
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Scripts, {})
       ] }, "children")
     ],
-    getComponent
+    components
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_context.ReactSdkContext.Provider,
@@ -73,7 +73,7 @@ const createInstanceChildrenElements = ({
   instanceSelector,
   children,
   Component,
-  getComponent
+  components
 }) => {
   const elements = [];
   for (const child of children) {
@@ -91,14 +91,14 @@ const createInstanceChildrenElements = ({
       instanceSelector: childInstanceSelector,
       children: childInstance.children,
       Component,
-      getComponent
+      components
     });
     const element = createInstanceElement({
       instance: childInstance,
       instanceSelector: childInstanceSelector,
       Component,
       children: children2,
-      getComponent
+      components
     });
     elements.push(element);
   }
@@ -109,14 +109,14 @@ const createInstanceElement = ({
   instance,
   instanceSelector,
   children = [],
-  getComponent
+  components
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Component,
     {
       instance,
       instanceSelector,
-      getComponent,
+      components,
       children
     },
     instance.id

package/lib/cjs/tree/root.js

@@ -24,18 +24,14 @@ module.exports = __toCommonJS(root_exports);
 var import_nanostores = require("nanostores");
 var import_create_elements_tree = require("./create-elements-tree");
 var import_webstudio_component = require("./webstudio-component");
-var import_components = require("../components");
-var import_custom_components = require("../app/custom-components");
 var import_params = require("../app/params");
 var import_props = require("../props");
 const InstanceRoot = ({
   data,
   Component,
-  customComponents = import_custom_components.customComponents,
-  getComponent
+  components
 }) => {
   (0, import_params.setParams)(data.params);
-  (0, import_components.registerComponents)(customComponents);
   return (0, import_create_elements_tree.createElementsTree)({
     instances: new Map(data.build.instances),
     rootInstanceId: data.page.rootInstanceId,
@@ -45,6 +41,6 @@ const InstanceRoot = ({
     assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
     pagesStore: (0, import_nanostores.atom)(new Map(data.pages.map((page) => [page.id, page]))),
     Component: Component ?? import_webstudio_component.WebstudioComponent,
-    getComponent
+    components
   });
 };

package/lib/cjs/tree/webstudio-component.js

@@ -47,7 +47,7 @@ const WebstudioComponent = ({
   instance,
   instanceSelector,
   children,
-  getComponent,
+  components,
   ...rest
 }) => {
   const instanceProps = (0, import_props.useInstanceProps)(instance.id);
@@ -57,7 +57,7 @@ const WebstudioComponent = ({
     [idAttribute]: instance.id,
     [componentAttribute]: instance.component
   };
-  const Component = getComponent(instance.component);
+  const Component = components.get(instance.component);
   if (Component === void 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
   }

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

@@ -2,7 +2,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",
@@ -39,7 +39,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" },
@@ -432,7 +432,10 @@ 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" }
 };
 export {
   props

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

@@ -391,6 +391,13 @@ const props = {
     required: false,
     control: "text",
     type: "string"
+  },
+  tag: {
+    required: false,
+    control: "radio",
+    type: "string",
+    defaultValue: "div",
+    options: ["div", "figcaption", "span"]
   }
 };
 export {

package/lib/components/blockquote.ws.js

@@ -52,13 +52,20 @@ const presetStyle = {
   ]
 };
 const meta = {
-  category: "typography",
+  category: "text",
   type: "rich-text",
   label: "Blockquote",
   icon: BlockquoteIcon,
   states: 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

package/lib/components/box.ws.js

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

package/lib/components/button.ws.js

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

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

@@ -17,14 +17,20 @@ const meta = {
   icon: CheckboxCheckedIcon,
   states: 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/components/checkbox.ws.js

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

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

@@ -37,7 +37,14 @@ const meta = {
   icon: CodeTextIcon,
   states: 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,

package/lib/components/component-meta.js

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

package/lib/components/components-utils.js

@@ -1,14 +0,0 @@
-import * as components from "./components";
-import { registeredComponents } from "./index";
-const getComponent = (name) => {
-  return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : components[name];
-};
-const createGetComponent = (comps) => {
-  return (name) => {
-    return registeredComponents != null && name in registeredComponents ? registeredComponents[name] : comps[name];
-  };
-};
-export {
-  createGetComponent,
-  getComponent
-};

package/lib/components/form.ws.js

@@ -17,33 +17,40 @@ const meta = {
   icon: FormIcon,
   states: 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/components/fragment.ws.js

@@ -1,7 +1,8 @@
 const meta = {
   type: "container",
   label: "Fragment",
-  icon: ""
+  icon: "",
+  stylable: false
 };
 const propsMeta = {
   props: {}

package/lib/components/heading.ws.js

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

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

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

package/lib/components/image.js

@@ -1,25 +1,15 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import {
+  forwardRef,
+  useMemo
+} from "react";
+import {
+  Image as WebstudioImage,
+  createImageLoader
+} from "@webstudio-is/image";
+import { usePropAsset, getInstanceIdFromComponentProps } from "../props";
+import { getParams } from "../app/params";
 const defaultTag = "img";
-const Image = forwardRef(
-  (imageProps, ref) => {
-    return /* @__PURE__ */ 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"
@@ -43,6 +33,30 @@ const imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
     fill="#A2A2A2"
   />
 </svg>`)}`;
+const Image = forwardRef(
+  (props, ref) => {
+    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
+    const loader = useMemo(() => {
+      const params = getParams();
+      return createImageLoader({ imageBaseUrl: params.imageBaseUrl });
+    }, []);
+    const src = asset?.name ?? props.src;
+    if (asset == null || loader == null) {
+      return /* @__PURE__ */ jsx("img", { ...props, src: src || imagePlaceholderSvg, ref }, src);
+    }
+    return /* @__PURE__ */ jsx(
+      WebstudioImage,
+      {
+        ...props,
+        loader,
+        src,
+        ref
+      },
+      src
+    );
+  }
+);
+Image.displayName = "Image";
 export {
   Image,
   defaultTag

package/lib/components/image.ws.js

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

package/lib/components/index.js

@@ -99,17 +99,6 @@ const defaultMetas = {
   CheckboxField: CheckboxFieldMeta,
   Checkbox: CheckboxMeta
 };
-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: SlotMetaPropsMeta,
   Fragment: FragmentMetaPropsMeta,
@@ -145,24 +134,7 @@ const defaultPropsMetas = {
   CheckboxField: CheckboxFieldPropsMeta,
   Checkbox: CheckboxPropsMeta
 };
-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);
-};
 export {
-  canAcceptComponent,
   defaultMetas,
-  defaultPropsMetas,
-  getComponentMeta,
-  registerComponentMetas,
-  registerComponents,
-  registeredComponents
+  defaultPropsMetas
 };

package/lib/components/input.ws.js

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

package/lib/components/label.ws.js

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