@webstudio-is/react-sdk 0.36.0 → 0.41.0

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

@@ -5,7 +5,7 @@ const isAbsoluteUrl = (href) => {
   try {
     new URL(href);
     return true;
-  } catch (e) {
+  } catch {
     return false;
   }
 };
@@ -15,7 +15,7 @@ const wrapLinkComponent = (BaseLink) => {
     const isAbsolute = isAbsoluteUrl(href);
     const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
     if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
-      return /* @__PURE__ */ jsx("a", {
+      return /* @__PURE__ */ jsx(BaseLink, {
         ...props,
         href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
         ref

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

@@ -28,7 +28,7 @@ const isAbsoluteUrl = (href) => {
   try {
     new URL(href);
     return true;
-  } catch (e) {
+  } catch {
     return false;
   }
 };
@@ -38,7 +38,7 @@ const wrapLinkComponent = (BaseLink) => {
     const isAbsolute = isAbsoluteUrl(href);
     const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
     if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, {
         ...props,
         href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
         ref

package/lib/cjs/components/__generated__/blockquote.props.cjs

@@ -120,7 +120,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -383,7 +383,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/body.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/bold.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/box.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/button.props.cjs

@@ -136,7 +136,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -399,7 +399,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/code.props.cjs

@@ -120,7 +120,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["inline", "list", "none", "both"]
   },
@@ -383,7 +383,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/form.props.cjs

@@ -127,7 +127,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -390,7 +390,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/heading.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

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

@@ -160,7 +160,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -423,7 +423,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/input.props.cjs

@@ -157,7 +157,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -420,7 +420,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/italic.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/link.props.cjs

@@ -31,7 +31,13 @@ const props = {
   media: { required: false, control: "text", type: "string" },
   ping: { required: false, control: "text", type: "string" },
   rel: { required: false, control: "text", type: "string" },
-  target: { required: false, control: "text", type: "string" },
+  target: {
+    required: false,
+    control: "select",
+    type: "string",
+    defaultValue: "self",
+    options: ["self", "blank", "parent", "top"]
+  },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,
@@ -143,7 +149,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -406,7 +412,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },
@@ -433,5 +439,11 @@ const props = {
     required: false,
     control: "text",
     type: "string"
+  },
+  prefetch: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["none", "intent", "render"]
   }
 };

package/lib/cjs/components/__generated__/list-item.props.cjs

@@ -120,7 +120,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -383,7 +383,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/list.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },
@@ -414,7 +414,7 @@ const props = {
   start: { required: false, control: "number", type: "number" },
   type: {
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["a", "i", "1", "A", "I"]
   },

package/lib/cjs/components/__generated__/paragraph.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/rich-text-link.props.cjs

@@ -26,12 +26,17 @@ const props = {
   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: "" },
+  href: { 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" },
-  target: { required: false, control: "text", type: "string" },
+  target: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["self", "blank", "parent", "top"]
+  },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,
@@ -143,7 +148,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -406,7 +411,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },
@@ -433,5 +438,11 @@ const props = {
     required: false,
     control: "text",
     type: "string"
+  },
+  prefetch: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["none", "intent", "render"]
   }
 };

package/lib/cjs/components/__generated__/separator.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/span.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/subscript.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/__generated__/superscript.props.cjs

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

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

@@ -119,7 +119,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -382,7 +382,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

package/lib/cjs/components/link.cjs

@@ -24,10 +24,13 @@ 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) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
-    ...props,
-    href,
-    ref
-  })
+  ({ href = "", target = "self", ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+      ...props,
+      target: `_${target}`,
+      href,
+      ref
+    });
+  }
 );
 Link.displayName = "Link";

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

@@ -44,5 +44,5 @@ const meta = {
 };
 const propsMeta = {
   props: import_link.props,
-  initialProps: ["href"]
+  initialProps: ["href", "target", "prefetch"]
 };

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

@@ -23,11 +23,9 @@ __export(rich_text_link_exports, {
 module.exports = __toCommonJS(rich_text_link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-const RichTextLink = (0, import_react.forwardRef)(
-  ({ href = "", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
-    ...props,
-    href,
-    ref
-  })
-);
+var import_link = require("./link");
+const RichTextLink = (0, import_react.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.Link, {
+  ...props,
+  ref
+}));
 RichTextLink.displayName = "RichTextLink";

package/lib/cjs/tree/root.cjs

@@ -28,7 +28,7 @@ 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 denormalizeTree = (instances, rootInstanceId) => {
   const convertTree = (instance) => {
     const legacyInstance = {
       type: "instance",
@@ -48,7 +48,11 @@ const denormalizeTree = (instances) => {
     }
     return legacyInstance;
   };
-  return convertTree(Array.from(instances.values())[0]);
+  const rootInstance = instances.get(rootInstanceId);
+  if (rootInstance === void 0) {
+    return void 0;
+  }
+  return convertTree(rootInstance);
 };
 const InstanceRoot = ({
   data,
@@ -56,15 +60,19 @@ const InstanceRoot = ({
   customComponents = import_custom_components.customComponents,
   getComponent
 }) => {
-  if (data.tree === null) {
-    throw new Error("Tree is null");
-  }
   (0, import_params.setParams)(data.params ?? null);
   (0, import_components.registerComponents)(customComponents);
+  const instance = denormalizeTree(
+    new Map(data.build.instances),
+    data.page.rootInstanceId
+  );
+  if (instance === void 0) {
+    return null;
+  }
   return (0, import_create_elements_tree.createElementsTree)({
-    instance: denormalizeTree(new Map(data.tree.instances)),
+    instance,
     propsByInstanceIdStore: (0, import_nanostores.atom)(
-      (0, import_props.getPropsByInstanceId)(new Map(data.tree.props))
+      (0, import_props.getPropsByInstanceId)(new Map(data.build.props))
     ),
     assetsStore: (0, import_nanostores.atom)(new Map(data.assets.map((asset) => [asset.id, asset]))),
     Component: Component ?? import_webstudio_component.WebstudioComponent,

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

@@ -97,7 +97,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -360,7 +360,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

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

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },

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

@@ -96,7 +96,7 @@ const props = {
   "aria-autocomplete": {
     description: "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["list", "none", "inline", "both"]
   },
@@ -359,7 +359,7 @@ const props = {
   "aria-sort": {
     description: "Indicates if items in a table or grid are sorted in ascending or descending order.",
     required: false,
-    control: "radio",
+    control: "select",
     type: "string",
     options: ["none", "ascending", "descending", "other"]
   },