@webstudio-is/react-sdk 0.34.0 → 0.36.0

package/lib/cjs/components/list.cjs

@@ -0,0 +1,31 @@
+"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 list_exports = {};
+__export(list_exports, {
+  List: () => List
+});
+module.exports = __toCommonJS(list_exports);
+var import_react = require("react");
+const unorderedTag = "ul";
+const orderedTag = "ol";
+const List = (0, import_react.forwardRef)(({ ordered = false, ...props }, ref) => {
+  const tag = ordered ? orderedTag : unorderedTag;
+  return (0, import_react.createElement)(tag, { ...props, ref });
+});
+List.displayName = "List";

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

@@ -0,0 +1,51 @@
+"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 list_ws_exports = {};
+__export(list_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(list_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_list = require("./__generated__/list.props");
+const presetStyle = {
+  marginTop: {
+    type: "keyword",
+    value: "0"
+  },
+  marginBottom: {
+    type: "keyword",
+    value: "10px"
+  },
+  paddingLeft: {
+    type: "keyword",
+    value: "40px"
+  }
+};
+const meta = {
+  type: "container",
+  label: "List",
+  Icon: import_icons.ListIcon,
+  presetStyle,
+  children: []
+};
+const propsMeta = {
+  props: import_list.props,
+  initialProps: ["ordered", "type", "starts", "reversed"]
+};

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

@@ -1,9 +1,7 @@
 "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)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var paragraph_ws_exports = {};
 __export(paragraph_ws_exports, {
@@ -29,7 +23,7 @@ __export(paragraph_ws_exports, {
 });
 module.exports = __toCommonJS(paragraph_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_paragraph_props = __toESM(require("./__generated__/paragraph.props.json"), 1);
+var import_paragraph = require("./__generated__/paragraph.props");
 const meta = {
   type: "rich-text",
   label: "Paragraph",
@@ -37,5 +31,5 @@ const meta = {
   children: ["Pragraph you can edit"]
 };
 const propsMeta = {
-  props: import_paragraph_props.default
+  props: import_paragraph.props
 };

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

@@ -1,9 +1,7 @@
 "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)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var rich_text_link_ws_exports = {};
 __export(rich_text_link_ws_exports, {
@@ -29,12 +23,12 @@ __export(rich_text_link_ws_exports, {
 });
 module.exports = __toCommonJS(rich_text_link_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_rich_text_link_props = __toESM(require("./__generated__/rich-text-link.props.json"), 1);
+var import_rich_text_link = require("./__generated__/rich-text-link.props");
 const meta = {
   type: "rich-text-child",
   label: "Link",
   Icon: import_icons.Link2Icon
 };
 const propsMeta = {
-  props: import_rich_text_link_props.default
+  props: import_rich_text_link.props
 };

package/lib/cjs/components/separator.cjs

@@ -0,0 +1,31 @@
+"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 separator_exports = {};
+__export(separator_exports, {
+  Separator: () => Separator
+});
+module.exports = __toCommonJS(separator_exports);
+var import_react = require("react");
+const defaultTag = "hr";
+const Separator = (0, import_react.forwardRef)(
+  (props, ref) => {
+    return (0, import_react.createElement)(defaultTag, { ...props, ref });
+  }
+);
+Separator.displayName = "Separator";

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

@@ -0,0 +1,51 @@
+"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 separator_ws_exports = {};
+__export(separator_ws_exports, {
+  meta: () => meta,
+  propsMeta: () => propsMeta
+});
+module.exports = __toCommonJS(separator_ws_exports);
+var import_icons = require("@webstudio-is/icons");
+var import_separator = require("./__generated__/separator.props");
+const presetStyle = {
+  height: {
+    type: "keyword",
+    value: "1px"
+  },
+  backgroundColor: {
+    type: "keyword",
+    value: "gray"
+  },
+  border: {
+    type: "keyword",
+    value: "none"
+  }
+};
+const meta = {
+  type: "embed",
+  label: "Separator",
+  Icon: import_icons.DashIcon,
+  presetStyle,
+  children: []
+};
+const propsMeta = {
+  props: import_separator.props,
+  initialProps: []
+};

package/lib/cjs/components/span.ws.cjs

@@ -1,9 +1,7 @@
 "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)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var span_ws_exports = {};
 __export(span_ws_exports, {
@@ -29,12 +23,12 @@ __export(span_ws_exports, {
 });
 module.exports = __toCommonJS(span_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_span_props = __toESM(require("./__generated__/span.props.json"), 1);
+var import_span = require("./__generated__/span.props");
 const meta = {
   type: "rich-text-child",
   label: "Styled Text",
   Icon: import_icons.BrushIcon
 };
 const propsMeta = {
-  props: import_span_props.default
+  props: import_span.props
 };

package/lib/cjs/components/subscript.ws.cjs

@@ -1,9 +1,7 @@
 "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)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var subscript_ws_exports = {};
 __export(subscript_ws_exports, {
@@ -29,12 +23,12 @@ __export(subscript_ws_exports, {
 });
 module.exports = __toCommonJS(subscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_subscript_props = __toESM(require("./__generated__/subscript.props.json"), 1);
+var import_subscript = require("./__generated__/subscript.props");
 const meta = {
   type: "rich-text-child",
   label: "Subscript Text",
   Icon: import_icons.SubscriptIcon
 };
 const propsMeta = {
-  props: import_subscript_props.default
+  props: import_subscript.props
 };

package/lib/cjs/components/superscript.ws.cjs

@@ -1,9 +1,7 @@
 "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)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var superscript_ws_exports = {};
 __export(superscript_ws_exports, {
@@ -29,12 +23,12 @@ __export(superscript_ws_exports, {
 });
 module.exports = __toCommonJS(superscript_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_superscript_props = __toESM(require("./__generated__/superscript.props.json"), 1);
+var import_superscript = require("./__generated__/superscript.props");
 const meta = {
   type: "rich-text-child",
   label: "Superscript Text",
   Icon: import_icons.SuperscriptIcon
 };
 const propsMeta = {
-  props: import_superscript_props.default
+  props: import_superscript.props
 };

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

@@ -1,9 +1,7 @@
 "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)
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var text_block_ws_exports = {};
 __export(text_block_ws_exports, {
@@ -29,7 +23,7 @@ __export(text_block_ws_exports, {
 });
 module.exports = __toCommonJS(text_block_ws_exports);
 var import_icons = require("@webstudio-is/icons");
-var import_text_block_props = __toESM(require("./__generated__/text-block.props.json"), 1);
+var import_text_block = require("./__generated__/text-block.props");
 const presetStyle = {
   minHeight: {
     type: "unit",
@@ -45,5 +39,5 @@ const meta = {
   children: ["Block of text you can edit"]
 };
 const propsMeta = {
-  props: import_text_block_props.default
+  props: import_text_block.props
 };

package/lib/cjs/css/get-browser-style.cjs

@@ -23,7 +23,8 @@ __export(get_browser_style_exports, {
 module.exports = __toCommonJS(get_browser_style_exports);
 var import_detect_font = require("detect-font");
 var import_css_data = require("@webstudio-is/css-data");
-const unitsList = Object.values(import_css_data.units).flat();
+var import_css_data2 = require("@webstudio-is/css-data");
+const unitsList = Object.values(import_css_data2.units).flat();
 const unitRegex = new RegExp(`${unitsList.join("|")}`);
 const parseValue = (property, value) => {
   const number = Number.parseFloat(value);
@@ -32,13 +33,20 @@ const parseValue = (property, value) => {
     value = "transparent";
   }
   if (Number.isNaN(number)) {
+    const values = import_css_data.keywordValues[property];
+    if (values?.includes(value)) {
+      return {
+        type: "keyword",
+        value
+      };
+    }
     return {
-      type: "keyword",
+      type: "unparsed",
       value
     };
   }
-  if (number === 0 && property in import_css_data.properties) {
-    return import_css_data.properties[property].initial;
+  if (number === 0 && property in import_css_data2.properties) {
+    return import_css_data2.properties[property].initial;
   }
   if (parsedUnit === null) {
     return {
@@ -60,7 +68,7 @@ const getBrowserStyle = (element) => {
   }
   let knownProperty;
   const computedStyle = getComputedStyle(element);
-  for (knownProperty in import_css_data.properties) {
+  for (knownProperty in import_css_data2.properties) {
     if (knownProperty in computedStyle === false) {
       continue;
     }

package/lib/cjs/css/index.cjs

@@ -17,4 +17,3 @@ 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("./breakpoints"), module.exports);

package/lib/cjs/index.cjs

@@ -29,4 +29,6 @@ __reExport(src_exports, require("./tree"), module.exports);
 __reExport(src_exports, require("./components"), module.exports);
 __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");

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

@@ -32,12 +32,12 @@ const createElementsTree = ({
   propsByInstanceIdStore,
   assetsStore,
   Component,
-  onChangeChildren
+  getComponent
 }) => {
   const children = createInstanceChildrenElements({
     Component,
     children: instance.children,
-    onChangeChildren
+    getComponent
   });
   const body = createInstanceElement({
     Component,
@@ -51,7 +51,8 @@ const createElementsTree = ({
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Scripts, {})
         ]
       }, "children")
-    ]
+    ],
+    getComponent
   });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.ReactSdkContext.Provider, {
     value: { propsByInstanceIdStore, assetsStore },
@@ -61,7 +62,7 @@ const createElementsTree = ({
 const createInstanceChildrenElements = ({
   children,
   Component,
-  onChangeChildren
+  getComponent
 }) => {
   const elements = [];
   for (const child of children) {
@@ -72,13 +73,13 @@ const createInstanceChildrenElements = ({
     const children2 = createInstanceChildrenElements({
       children: child.children,
       Component,
-      onChangeChildren
+      getComponent
     });
     const element = createInstanceElement({
       instance: child,
       Component,
-      onChangeChildren,
-      children: children2
+      children: children2,
+      getComponent
     });
     elements.push(element);
   }
@@ -88,13 +89,13 @@ const createInstanceElement = ({
   Component,
   instance,
   children = [],
-  onChangeChildren
+  getComponent
 }) => {
   const props = {
     instance,
     children,
     key: instance.id,
-    onChangeChildren
+    getComponent
   };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
     ...props

package/lib/cjs/tree/index.cjs

@@ -17,4 +17,4 @@ var tree_exports = {};
 module.exports = __toCommonJS(tree_exports);
 __reExport(tree_exports, require("./create-elements-tree"), module.exports);
 __reExport(tree_exports, require("./root"), module.exports);
-__reExport(tree_exports, require("./wrapper-component"), module.exports);
+__reExport(tree_exports, require("./webstudio-component"), module.exports);

package/lib/cjs/tree/root.cjs

@@ -23,15 +23,38 @@ __export(root_exports, {
 module.exports = __toCommonJS(root_exports);
 var import_nanostores = require("nanostores");
 var import_create_elements_tree = require("./create-elements-tree");
-var import_wrapper_component = require("./wrapper-component");
+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 denormalizeTree = (instances) => {
+  const convertTree = (instance) => {
+    const legacyInstance = {
+      type: "instance",
+      id: instance.id,
+      component: instance.component,
+      children: []
+    };
+    for (const child of instance.children) {
+      if (child.type === "id") {
+        const childInstance = instances.get(child.value);
+        if (childInstance) {
+          legacyInstance.children.push(convertTree(childInstance));
+        }
+      } else {
+        legacyInstance.children.push(child);
+      }
+    }
+    return legacyInstance;
+  };
+  return convertTree(Array.from(instances.values())[0]);
+};
 const InstanceRoot = ({
   data,
   Component,
-  customComponents = import_custom_components.customComponents
+  customComponents = import_custom_components.customComponents,
+  getComponent
 }) => {
   if (data.tree === null) {
     throw new Error("Tree is null");
@@ -39,11 +62,12 @@ const InstanceRoot = ({
   (0, import_params.setParams)(data.params ?? null);
   (0, import_components.registerComponents)(customComponents);
   return (0, import_create_elements_tree.createElementsTree)({
-    instance: data.tree.root,
+    instance: denormalizeTree(new Map(data.tree.instances)),
     propsByInstanceIdStore: (0, import_nanostores.atom)(
       (0, import_props.getPropsByInstanceId)(new Map(data.tree.props))
     ),
     assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
-    Component: Component ?? import_wrapper_component.WrapperComponent
+    Component: Component ?? import_webstudio_component.WebstudioComponent,
+    getComponent
   });
 };

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

@@ -16,17 +16,17 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var wrapper_component_exports = {};
-__export(wrapper_component_exports, {
-  WrapperComponent: () => WrapperComponent,
+var webstudio_component_exports = {};
+__export(webstudio_component_exports, {
+  WebstudioComponent: () => WebstudioComponent,
+  collapsedAttribute: () => collapsedAttribute,
   componentAttribute: () => componentAttribute,
   idAttribute: () => idAttribute,
-  renderWrapperComponentChildren: () => renderWrapperComponentChildren
+  renderWebstudioComponentChildren: () => renderWebstudioComponentChildren
 });
-module.exports = __toCommonJS(wrapper_component_exports);
+module.exports = __toCommonJS(webstudio_component_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_components = require("../components");
 var import_props = require("../props");
 const renderText = (text) => {
   const lines = text.split("\n");
@@ -37,7 +37,7 @@ const renderText = (text) => {
     ]
   }, index));
 };
-const renderWrapperComponentChildren = (children) => {
+const renderWebstudioComponentChildren = (children) => {
   if (children === void 0 || children.length === 0) {
     return;
   }
@@ -45,10 +45,10 @@ const renderWrapperComponentChildren = (children) => {
     return typeof child === "string" ? renderText(child) : child;
   });
 };
-const WrapperComponent = ({
+const WebstudioComponent = ({
   instance,
-  onChangeChildren,
   children,
+  getComponent,
   ...rest
 }) => {
   const instanceProps = (0, import_props.useInstanceProps)(instance.id);
@@ -58,14 +58,15 @@ const WrapperComponent = ({
     [idAttribute]: instance.id,
     [componentAttribute]: instance.component
   };
-  const Component = (0, import_components.getComponent)(instance.component);
+  const Component = getComponent(instance.component);
   if (Component === void 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, {
     ...props,
-    children: renderWrapperComponentChildren(children)
+    children: renderWebstudioComponentChildren(children)
   });
 };
 const idAttribute = "data-ws-id";
 const componentAttribute = "data-ws-component";
+const collapsedAttribute = "data-ws-collapsed";