@webstudio-is/react-sdk 0.50.0 → 0.51.0

package/lib/app/custom-components/image.js

@@ -5,14 +5,12 @@ import {
 } from "react";
 import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
-import { usePropAsset } from "../../props";
-import { idAttribute } from "../../tree/webstudio-component";
+import { usePropAsset, getInstanceIdFromComponentProps } from "../../props";
 import { getParams } from "../params";
 const defaultTag = "img";
 const Image = forwardRef(
   (props, ref) => {
-    const componentId = props[idAttribute];
-    const asset = usePropAsset(componentId, "src");
+    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
     const params = getParams();
     const loader = useMemo(() => {
       if (asset === void 0) {

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

@@ -1,30 +1,14 @@
 import { jsx } from "react/jsx-runtime";
-import { Link } from "@remix-run/react";
+import { Link as RemixLink } from "@remix-run/react";
 import { forwardRef } from "react";
-const isAbsoluteUrl = (href) => {
-  try {
-    new URL(href);
-    return true;
-  } catch {
-    return false;
-  }
-};
-const isAbsoluteUrlRemix = (href) => /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
+import { usePropUrl, getInstanceIdFromComponentProps } from "../../../props";
 const wrapLinkComponent = (BaseLink) => {
-  const Component = forwardRef(({ href = "", ...props }, ref) => {
-    const isAbsolute = isAbsoluteUrl(href);
-    const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
-    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
-      return /* @__PURE__ */ jsx(
-        BaseLink,
-        {
-          ...props,
-          href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
-          ref
-        }
-      );
+  const Component = forwardRef((props, ref) => {
+    const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+    if (typeof href === "string" || href === void 0) {
+      return /* @__PURE__ */ jsx(BaseLink, { ...props, ref });
     }
-    return /* @__PURE__ */ jsx(Link, { ...props, to: href, ref });
+    return /* @__PURE__ */ jsx(RemixLink, { ...props, to: href.path, ref });
   });
   Component.displayName = BaseLink.displayName;
   return Component;

package/lib/cjs/app/custom-components/image.cjs

@@ -26,13 +26,11 @@ var import_react = require("react");
 var import_image = require("@webstudio-is/image");
 var import_image2 = require("../../components/image");
 var import_props = require("../../props");
-var import_webstudio_component = require("../../tree/webstudio-component");
 var import_params = require("../params");
 const defaultTag = "img";
 const Image = (0, import_react.forwardRef)(
   (props, ref) => {
-    const componentId = props[import_webstudio_component.idAttribute];
-    const asset = (0, import_props.usePropAsset)(componentId, "src");
+    const asset = (0, import_props.usePropAsset)((0, import_props.getInstanceIdFromComponentProps)(props), "src");
     const params = (0, import_params.getParams)();
     const loader = (0, import_react.useMemo)(() => {
       if (asset === void 0) {

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

@@ -24,30 +24,14 @@ module.exports = __toCommonJS(remix_link_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("@remix-run/react");
 var import_react2 = require("react");
-const isAbsoluteUrl = (href) => {
-  try {
-    new URL(href);
-    return true;
-  } catch {
-    return false;
-  }
-};
-const isAbsoluteUrlRemix = (href) => /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
+var import_props = require("../../../props");
 const wrapLinkComponent = (BaseLink) => {
-  const Component = (0, import_react2.forwardRef)(({ href = "", ...props }, ref) => {
-    const isAbsolute = isAbsoluteUrl(href);
-    const willRemixTryToTreatAsAbsoluteAndCrash = isAbsolute === false && isAbsoluteUrlRemix(href);
-    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        BaseLink,
-        {
-          ...props,
-          href: willRemixTryToTreatAsAbsoluteAndCrash ? "" : href,
-          ref
-        }
-      );
+  const Component = (0, import_react2.forwardRef)((props, ref) => {
+    const href = (0, import_props.usePropUrl)((0, import_props.getInstanceIdFromComponentProps)(props), "href");
+    if (typeof href === "string" || href === void 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BaseLink, { ...props, ref });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to: href, ref });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react.Link, { ...props, to: href.path, ref });
   });
   Component.displayName = BaseLink.displayName;
   return Component;

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

@@ -25,18 +25,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   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" },
-  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: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -25,18 +25,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   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: "" },
-  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" },
+  href: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -25,18 +25,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   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" },
-  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: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -24,6 +24,7 @@ __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");
 const presetStyle = {
   boxSizing: {
     type: "keyword",
@@ -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

@@ -23,9 +23,16 @@ __export(link_exports, {
 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 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

@@ -44,6 +44,13 @@ const meta = {
   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/rich-text-link.ws.cjs

@@ -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/context.cjs

@@ -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/props.cjs

@@ -18,15 +18,19 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var props_exports = {};
 __export(props_exports, {
+  getInstanceIdFromComponentProps: () => getInstanceIdFromComponentProps,
   getPropsByInstanceId: () => getPropsByInstanceId,
+  resolveUrlProp: () => resolveUrlProp,
   useInstanceProps: () => useInstanceProps,
-  usePropAsset: () => usePropAsset
+  usePropAsset: () => usePropAsset,
+  usePropUrl: () => usePropUrl
 });
 module.exports = __toCommonJS(props_exports);
 var import_react = require("react");
 var import_nanostores = require("nanostores");
 var import_react2 = require("@nanostores/react");
 var import_context = require("./context");
+var import_webstudio_component = require("./tree/webstudio-component");
 const getPropsByInstanceId = (props) => {
   const propsByInstanceId = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
@@ -61,7 +65,7 @@ const usePropAsset = (instanceId, name) => {
       (propsByInstanceId, assets) => {
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === void 0) {
-          return void 0;
+          return;
         }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
@@ -75,3 +79,40 @@ const usePropAsset = (instanceId, name) => {
   const asset = (0, import_react2.useStore)(assetStore);
   return asset;
 };
+const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
+  const instanceProps = propsByInstanceId.get(instanceId);
+  if (instanceProps === void 0) {
+    return;
+  }
+  for (const prop of instanceProps) {
+    if (prop.name !== name) {
+      continue;
+    }
+    if (prop.type === "page") {
+      return pages.get(prop.value);
+    }
+    if (prop.type === "string") {
+      for (const page of pages.values()) {
+        if (page.path === prop.value) {
+          return page;
+        }
+      }
+      return prop.value;
+    }
+    return;
+  }
+};
+const usePropUrl = (instanceId, name) => {
+  const { propsByInstanceIdStore, pagesStore } = (0, import_react.useContext)(import_context.ReactSdkContext);
+  const pageStore = (0, import_react.useMemo)(
+    () => (0, import_nanostores.computed)(
+      [propsByInstanceIdStore, pagesStore],
+      (propsByInstanceId, pages) => resolveUrlProp(instanceId, name, propsByInstanceId, pages)
+    ),
+    [propsByInstanceIdStore, pagesStore, instanceId, name]
+  );
+  return (0, import_react2.useStore)(pageStore);
+};
+const getInstanceIdFromComponentProps = (props) => {
+  return props[import_webstudio_component.idAttribute];
+};

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

@@ -31,6 +31,7 @@ const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
+  pagesStore,
   Component,
   getComponent
 }) => {
@@ -55,7 +56,13 @@ const createElementsTree = ({
     ],
     getComponent
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.ReactSdkContext.Provider, { value: { propsByInstanceIdStore, assetsStore }, children: root });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_context.ReactSdkContext.Provider,
+    {
+      value: { propsByInstanceIdStore, assetsStore, pagesStore },
+      children: root
+    }
+  );
 };
 const createInstanceChildrenElements = ({
   instanceSelector,

package/lib/cjs/tree/root.cjs

@@ -75,6 +75,7 @@ const InstanceRoot = ({
       (0, import_props.getPropsByInstanceId)(new Map(data.build.props))
     ),
     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
   });

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

@@ -2,18 +2,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   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" },
-  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: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -2,18 +2,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   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: "" },
-  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" },
+  href: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -2,18 +2,18 @@ const props = {
   slot: { required: false, control: "text", type: "string" },
   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" },
-  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: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"]
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

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

@@ -1,5 +1,6 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
 import { props } from "./__generated__/link-block.props";
+import { propsMeta as linkPropsMeta } from "./link.ws";
 const presetStyle = {
   boxSizing: {
     type: "keyword",
@@ -18,8 +19,11 @@ const meta = {
   presetStyle
 };
 const propsMeta = {
-  props,
-  initialProps: ["href", "target", "prefetch"]
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href
+  },
+  initialProps: linkPropsMeta.initialProps
 };
 export {
   meta,

package/lib/components/link.js

@@ -1,10 +1,17 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-const Link = forwardRef(
-  ({ href = "", ...props }, ref) => {
-    return /* @__PURE__ */ jsx("a", { ...props, href, ref });
-  }
-);
+import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
+const Link = forwardRef((props, ref) => {
+  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      href: typeof href === "string" ? href : href?.path,
+      ref
+    }
+  );
+});
 Link.displayName = "Link";
 export {
   Link

package/lib/components/link.ws.js

@@ -20,7 +20,14 @@ const meta = {
   children: ["Link text you can edit"]
 };
 const propsMeta = {
-  props,
+  props: {
+    ...props,
+    href: {
+      type: "string",
+      control: "url",
+      required: false
+    }
+  },
   initialProps: ["href", "target", "prefetch"]
 };
 export {

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

@@ -1,5 +1,5 @@
 import { props } from "./__generated__/rich-text-link.props";
-import { meta as linkMeta, propsMeta as propsLinkMeta } from "./link.ws";
+import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 const { category, ...linkMetaRest } = linkMeta;
 const meta = {
   ...linkMetaRest,
@@ -7,8 +7,11 @@ const meta = {
   children: []
 };
 const propsMeta = {
-  ...propsLinkMeta,
-  props
+  initialProps: linkPropsMeta.initialProps,
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href
+  }
 };
 export {
   meta,

package/lib/context.js

@@ -2,7 +2,8 @@ import { atom } from "nanostores";
 import { createContext } from "react";
 const ReactSdkContext = createContext({
   propsByInstanceIdStore: atom(/* @__PURE__ */ new Map()),
-  assetsStore: atom(/* @__PURE__ */ new Map())
+  assetsStore: atom(/* @__PURE__ */ new Map()),
+  pagesStore: atom(/* @__PURE__ */ new Map())
 });
 export {
   ReactSdkContext

package/lib/props.js

@@ -2,6 +2,7 @@ import { useContext, useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
 import { ReactSdkContext } from "./context";
+import { idAttribute } from "./tree/webstudio-component";
 const getPropsByInstanceId = (props) => {
   const propsByInstanceId = /* @__PURE__ */ new Map();
   for (const prop of props.values()) {
@@ -36,7 +37,7 @@ const usePropAsset = (instanceId, name) => {
       (propsByInstanceId, assets) => {
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === void 0) {
-          return void 0;
+          return;
         }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
@@ -50,8 +51,48 @@ const usePropAsset = (instanceId, name) => {
   const asset = useStore(assetStore);
   return asset;
 };
+const resolveUrlProp = (instanceId, name, propsByInstanceId, pages) => {
+  const instanceProps = propsByInstanceId.get(instanceId);
+  if (instanceProps === void 0) {
+    return;
+  }
+  for (const prop of instanceProps) {
+    if (prop.name !== name) {
+      continue;
+    }
+    if (prop.type === "page") {
+      return pages.get(prop.value);
+    }
+    if (prop.type === "string") {
+      for (const page of pages.values()) {
+        if (page.path === prop.value) {
+          return page;
+        }
+      }
+      return prop.value;
+    }
+    return;
+  }
+};
+const usePropUrl = (instanceId, name) => {
+  const { propsByInstanceIdStore, pagesStore } = useContext(ReactSdkContext);
+  const pageStore = useMemo(
+    () => computed(
+      [propsByInstanceIdStore, pagesStore],
+      (propsByInstanceId, pages) => resolveUrlProp(instanceId, name, propsByInstanceId, pages)
+    ),
+    [propsByInstanceIdStore, pagesStore, instanceId, name]
+  );
+  return useStore(pageStore);
+};
+const getInstanceIdFromComponentProps = (props) => {
+  return props[idAttribute];
+};
 export {
+  getInstanceIdFromComponentProps,
   getPropsByInstanceId,
+  resolveUrlProp,
   useInstanceProps,
-  usePropAsset
+  usePropAsset,
+  usePropUrl
 };

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

@@ -8,6 +8,7 @@ const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
+  pagesStore,
   Component,
   getComponent
 }) => {
@@ -32,7 +33,13 @@ const createElementsTree = ({
     ],
     getComponent
   });
-  return /* @__PURE__ */ jsx(ReactSdkContext.Provider, { value: { propsByInstanceIdStore, assetsStore }, children: root });
+  return /* @__PURE__ */ jsx(
+    ReactSdkContext.Provider,
+    {
+      value: { propsByInstanceIdStore, assetsStore, pagesStore },
+      children: root
+    }
+  );
 };
 const createInstanceChildrenElements = ({
   instanceSelector,

package/lib/tree/root.js

@@ -52,6 +52,7 @@ const InstanceRoot = ({
       getPropsByInstanceId(new Map(data.build.props))
     ),
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
+    pagesStore: atom(new Map(data.pages.map((page) => [page.id, page]))),
     Component: Component ?? WebstudioComponent,
     getComponent
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.50.0",
+  "version": "0.51.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -40,14 +40,14 @@
     "mitt": "^3.0.0",
     "nanostores": "^0.7.1",
     "warn-once": "^0.1.1",
-    "@webstudio-is/asset-uploader": "^0.50.0",
-    "@webstudio-is/css-data": "^0.50.0",
-    "@webstudio-is/generate-arg-types": "^0.50.0",
-    "@webstudio-is/css-vars": "^0.50.0",
-    "@webstudio-is/icons": "^0.50.0",
-    "@webstudio-is/image": "^0.50.0",
-    "@webstudio-is/prisma-client": "^0.50.0",
-    "@webstudio-is/project-build": "^0.50.0"
+    "@webstudio-is/asset-uploader": "^0.51.0",
+    "@webstudio-is/css-data": "^0.51.0",
+    "@webstudio-is/css-vars": "^0.51.0",
+    "@webstudio-is/generate-arg-types": "^0.51.0",
+    "@webstudio-is/icons": "^0.51.0",
+    "@webstudio-is/image": "^0.51.0",
+    "@webstudio-is/prisma-client": "^0.51.0",
+    "@webstudio-is/project-build": "^0.51.0"
   },
   "exports": {
     ".": {

package/src/app/custom-components/image.tsx

@@ -1,24 +1,21 @@
 import {
   forwardRef,
   useMemo,
-  type ComponentProps,
+  type ComponentPropsWithoutRef,
   type ElementRef,
 } from "react";
 import { Image as WebstudioImage, loaders } from "@webstudio-is/image";
 import { Image as SdkImage } from "../../components/image";
-import { usePropAsset } from "../../props";
-import { idAttribute } from "../../tree/webstudio-component";
+import { usePropAsset, getInstanceIdFromComponentProps } from "../../props";
 import { getParams } from "../params";
 
 const defaultTag = "img";
 
-type Props = ComponentProps<typeof WebstudioImage> & { [idAttribute]: string };
+type Props = ComponentPropsWithoutRef<typeof WebstudioImage>;
 
 export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
   (props, ref) => {
-    const componentId = props[idAttribute] as string;
-
-    const asset = usePropAsset(componentId, "src");
+    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
     const params = getParams();
 
     const loader = useMemo(() => {

package/src/app/custom-components/shared/remix-link.tsx

@@ -1,59 +1,23 @@
-import { Link } from "@remix-run/react";
-import type {
-  ElementRef,
-  ComponentProps,
-  RefAttributes,
-  ForwardRefExoticComponent,
-} from "react";
+import { Link as RemixLink } from "@remix-run/react";
+import type { ComponentPropsWithoutRef } from "react";
 import { forwardRef } from "react";
-import type { Link as BaseLink } from "../../../components/link";
+import type { Link } from "../../../components/link";
+import { usePropUrl, getInstanceIdFromComponentProps } from "../../../props";
 
-const isAbsoluteUrl = (href: string) => {
-  try {
-    new URL(href);
-    return true;
-  } catch {
-    return false;
-  }
-};
-
-// Remix's check for absolute URL copied from here:
-// https://github.com/remix-run/react-router/blob/react-router-dom%406.8.0/packages/react-router-dom/index.tsx#L423-L424
-const isAbsoluteUrlRemix = (href: string) =>
-  /^[a-z+]+:\/\//i.test(href) || href.startsWith("//");
-
-type Props = ComponentProps<typeof BaseLink>;
-
-type Ref = ElementRef<"a">;
-
-export const wrapLinkComponent = (
-  BaseLink: ForwardRefExoticComponent<Props & RefAttributes<Ref>>
-) => {
-  // We're not actually wrapping BaseLink (no way to wrap with Remix's Link),
-  // but this is still useful because we're making sure that props/ref types are compatible
-  const Component = forwardRef<Ref, Props>(({ href = "", ...props }, ref) => {
-    const isAbsolute = isAbsoluteUrl(href);
+type LinkComponent = typeof Link;
+type LinkProps = ComponentPropsWithoutRef<LinkComponent>;
 
-    // This is a workaround for a bug in Remix: https://github.com/remix-run/remix/issues/5440
-    // It has a buggy absolute URL detection, which gives false positives on value like "//" or "http://"
-    // and causes entire app to crash
-    const willRemixTryToTreatAsAbsoluteAndCrash =
-      isAbsolute === false && isAbsoluteUrlRemix(href);
+export const wrapLinkComponent = (BaseLink: LinkComponent) => {
+  const Component: LinkComponent = forwardRef((props: LinkProps, ref) => {
+    const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
 
-    if (isAbsolute || willRemixTryToTreatAsAbsoluteAndCrash) {
-      return (
-        <BaseLink
-          {...props}
-          href={willRemixTryToTreatAsAbsoluteAndCrash ? "" : href}
-          ref={ref}
-        />
-      );
+    if (typeof href === "string" || href === undefined) {
+      return <BaseLink {...props} ref={ref} />;
     }
 
-    return <Link {...props} to={href} ref={ref} />;
+    return <RemixLink {...props} to={href.path} ref={ref} />;
   });
 
-  // This is the only part that we use from BaseLink at runtime
   Component.displayName = BaseLink.displayName;
 
   return Component;

package/src/components/__generated__/link-block.props.ts

@@ -4,18 +4,18 @@ export const props: Record<string, PropMeta> = {
   slot: { required: false, control: "text", type: "string" },
   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" },
-  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: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"],
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

package/src/components/__generated__/link.props.ts

@@ -4,18 +4,18 @@ export const props: Record<string, PropMeta> = {
   slot: { required: false, control: "text", type: "string" },
   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: "" },
-  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" },
+  href: { required: false, control: "text", type: "string" },
   target: {
     required: false,
     control: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"],
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

package/src/components/__generated__/rich-text-link.props.ts

@@ -4,18 +4,18 @@ export const props: Record<string, PropMeta> = {
   slot: { required: false, control: "text", type: "string" },
   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" },
-  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: "select",
     type: "string",
     options: ["_self", "_blank", "_parent", "_top"],
   },
+  download: { 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" },
   type: { required: false, control: "text", type: "string" },
   referrerPolicy: {
     required: false,

package/src/components/link-block.ws.tsx

@@ -1,6 +1,7 @@
 import { BoxLinkIcon } from "@webstudio-is/icons";
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/link-block.props";
+import { propsMeta as linkPropsMeta } from "./link.ws";
 
 const presetStyle = {
   boxSizing: {
@@ -22,6 +23,9 @@ export const meta: WsComponentMeta = {
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["href", "target", "prefetch"],
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href,
+  },
+  initialProps: linkPropsMeta.initialProps,
 };

package/src/components/link.tsx

@@ -1,4 +1,5 @@
-import { forwardRef, type ElementRef, type ComponentProps } from "react";
+import { forwardRef, type ComponentProps } from "react";
+import { usePropUrl, getInstanceIdFromComponentProps } from "../props";
 
 // @todo props that come from remix link, shouldn't be here at all
 // - prefetch should be only on remix component and it already is
@@ -10,10 +11,15 @@ type Props = Omit<ComponentProps<"a">, "href" | "target"> & {
   prefetch?: "none" | "intent" | "render";
 };
 
-export const Link = forwardRef<ElementRef<"a">, Props>(
-  ({ href = "", ...props }, ref) => {
-    return <a {...props} href={href} ref={ref} />;
-  }
-);
+export const Link = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
+  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
+  return (
+    <a
+      {...props}
+      href={typeof href === "string" ? href : href?.path}
+      ref={ref}
+    />
+  );
+});
 
 Link.displayName = "Link";

package/src/components/link.ws.tsx

@@ -24,6 +24,13 @@ export const meta: WsComponentMeta = {
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  props,
+  props: {
+    ...props,
+    href: {
+      type: "string",
+      control: "url",
+      required: false,
+    },
+  },
   initialProps: ["href", "target", "prefetch"],
 };

package/src/components/rich-text-link.ws.tsx

@@ -1,6 +1,6 @@
 import type { WsComponentMeta, WsComponentPropsMeta } from "./component-meta";
 import { props } from "./__generated__/rich-text-link.props";
-import { meta as linkMeta, propsMeta as propsLinkMeta } from "./link.ws";
+import { meta as linkMeta, propsMeta as linkPropsMeta } from "./link.ws";
 
 const { category, ...linkMetaRest } = linkMeta;
 
@@ -11,6 +11,9 @@ export const meta: WsComponentMeta = {
 };
 
 export const propsMeta: WsComponentPropsMeta = {
-  ...propsLinkMeta,
-  props,
+  initialProps: linkPropsMeta.initialProps,
+  props: {
+    ...props,
+    href: linkPropsMeta.props.href,
+  },
 };

package/src/context.tsx

@@ -1,11 +1,13 @@
 import { type ReadableAtom, atom } from "nanostores";
 import { createContext } from "react";
-import type { Assets, PropsByInstanceId } from "./props";
+import type { Assets, Pages, PropsByInstanceId } from "./props";
 
 export const ReactSdkContext = createContext<{
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
+  pagesStore: ReadableAtom<Pages>;
 }>({
   propsByInstanceIdStore: atom(new Map()),
   assetsStore: atom(new Map()),
+  pagesStore: atom(new Map()),
 });

package/src/props.test.ts

@@ -0,0 +1,95 @@
+import { describe, test, expect } from "@jest/globals";
+import { resolveUrlProp, type Pages, type PropsByInstanceId } from "./props";
+import type { Page, Prop } from "@webstudio-is/project-build";
+
+const unique = () => Math.random().toString();
+
+describe("resolveUrlProp", () => {
+  const instanceId = unique();
+
+  const page1: Page = {
+    id: unique(),
+    path: `/${unique()}`,
+    name: "",
+    title: "",
+    meta: {},
+    rootInstanceId: "0",
+  };
+
+  const page2: Page = {
+    id: unique(),
+    path: `/${unique()}`,
+    name: "",
+    title: "",
+    meta: {},
+    rootInstanceId: "0",
+  };
+
+  const pageByIdProp: Prop = {
+    type: "page",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: page1.id,
+  };
+
+  const pageByPathProp: Prop = {
+    type: "string",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: page2.path,
+  };
+
+  const arbitraryUrlProp: Prop = {
+    type: "string",
+    id: unique(),
+    instanceId,
+    name: unique(),
+    value: unique(),
+  };
+
+  const propsByInstanceId: PropsByInstanceId = new Map([
+    [instanceId, [pageByIdProp, pageByPathProp, arbitraryUrlProp]],
+  ]);
+
+  const pages: Pages = new Map([
+    [page1.id, page1],
+    [page2.id, page2],
+  ]);
+
+  test("if instanceId is unknown returns undefined", () => {
+    expect(
+      resolveUrlProp("unknown", pageByIdProp.name, propsByInstanceId, pages)
+    ).toBeUndefined();
+  });
+
+  test("if prop name is unknown returns undefined", () => {
+    expect(
+      resolveUrlProp(instanceId, "unknown", propsByInstanceId, pages)
+    ).toBeUndefined();
+  });
+
+  test("page by id", () => {
+    expect(
+      resolveUrlProp(instanceId, pageByIdProp.name, propsByInstanceId, pages)
+    ).toBe(page1);
+  });
+
+  test("page by path", () => {
+    expect(
+      resolveUrlProp(instanceId, pageByPathProp.name, propsByInstanceId, pages)
+    ).toBe(page2);
+  });
+
+  test("arbitrary url", () => {
+    expect(
+      resolveUrlProp(
+        instanceId,
+        arbitraryUrlProp.name,
+        propsByInstanceId,
+        pages
+      )
+    ).toBe(arbitraryUrlProp.value);
+  });
+});

package/src/props.ts

@@ -1,13 +1,15 @@
 import { useContext, useMemo } from "react";
 import { computed } from "nanostores";
 import { useStore } from "@nanostores/react";
-import type { Instance, Prop, Props } from "@webstudio-is/project-build";
+import type { Instance, Page, Prop, Props } from "@webstudio-is/project-build";
 import type { Asset } from "@webstudio-is/asset-uploader";
 import { ReactSdkContext } from "./context";
+import { idAttribute } from "./tree/webstudio-component";
 
 export type PropsByInstanceId = Map<Instance["id"], Prop[]>;
 
 export type Assets = Map<Asset["id"], Asset>;
+export type Pages = Map<Page["id"], Page>;
 
 export const getPropsByInstanceId = (props: Props) => {
   const propsByInstanceId: PropsByInstanceId = new Map();
@@ -39,7 +41,7 @@ export const useInstanceProps = (instanceId: Instance["id"]) => {
   return instancePropsObject;
 };
 
-// this utility is be used for image component in both builder and preview
+// this utility is used for image component in both builder and preview
 // so need to optimize rerenders with computed
 export const usePropAsset = (instanceId: Instance["id"], name: string) => {
   const { propsByInstanceIdStore, assetsStore } = useContext(ReactSdkContext);
@@ -49,7 +51,7 @@ export const usePropAsset = (instanceId: Instance["id"], name: string) => {
       (propsByInstanceId, assets) => {
         const instanceProps = propsByInstanceId.get(instanceId);
         if (instanceProps === undefined) {
-          return undefined;
+          return;
         }
         for (const prop of instanceProps) {
           if (prop.type === "asset" && prop.name === name) {
@@ -63,3 +65,57 @@ export const usePropAsset = (instanceId: Instance["id"], name: string) => {
   const asset = useStore(assetStore);
   return asset;
 };
+
+export const resolveUrlProp = (
+  instanceId: Instance["id"],
+  name: string,
+  propsByInstanceId: PropsByInstanceId,
+  pages: Pages
+): Page | string | undefined => {
+  const instanceProps = propsByInstanceId.get(instanceId);
+  if (instanceProps === undefined) {
+    return;
+  }
+  for (const prop of instanceProps) {
+    if (prop.name !== name) {
+      continue;
+    }
+
+    if (prop.type === "page") {
+      return pages.get(prop.value);
+    }
+
+    if (prop.type === "string") {
+      for (const page of pages.values()) {
+        if (page.path === prop.value) {
+          return page;
+        }
+      }
+      return prop.value;
+    }
+
+    return;
+  }
+};
+
+// this utility is used for link component in both builder and preview
+// so need to optimize rerenders with computed
+export const usePropUrl = (instanceId: Instance["id"], name: string) => {
+  const { propsByInstanceIdStore, pagesStore } = useContext(ReactSdkContext);
+  const pageStore = useMemo(
+    () =>
+      computed(
+        [propsByInstanceIdStore, pagesStore],
+        (propsByInstanceId, pages) =>
+          resolveUrlProp(instanceId, name, propsByInstanceId, pages)
+      ),
+    [propsByInstanceIdStore, pagesStore, instanceId, name]
+  );
+  return useStore(pageStore);
+};
+
+export const getInstanceIdFromComponentProps = (
+  props: Record<string, unknown>
+) => {
+  return props[idAttribute] as string;
+};

package/src/tree/create-elements-tree.tsx

@@ -4,7 +4,7 @@ import { Scripts, ScrollRestoration } from "@remix-run/react";
 import type { Instance } from "@webstudio-is/project-build";
 import type { GetComponent } from "../components/components-utils";
 import { ReactSdkContext } from "../context";
-import type { Assets, PropsByInstanceId } from "../props";
+import type { Assets, Pages, PropsByInstanceId } from "../props";
 import type { WebstudioComponent } from "./webstudio-component";
 import { SessionStoragePolyfill } from "./session-storage-polyfill";
 
@@ -15,6 +15,7 @@ export const createElementsTree = ({
   instance,
   propsByInstanceIdStore,
   assetsStore,
+  pagesStore,
   Component,
   getComponent,
 }: {
@@ -22,6 +23,7 @@ export const createElementsTree = ({
   instance: Instance;
   propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
   assetsStore: ReadableAtom<Assets>;
+  pagesStore: ReadableAtom<Pages>;
   Component: (props: ComponentProps<typeof WebstudioComponent>) => JSX.Element;
   getComponent: GetComponent;
 }) => {
@@ -47,7 +49,9 @@ export const createElementsTree = ({
     getComponent,
   });
   return (
-    <ReactSdkContext.Provider value={{ propsByInstanceIdStore, assetsStore }}>
+    <ReactSdkContext.Provider
+      value={{ propsByInstanceIdStore, assetsStore, pagesStore }}
+    >
       {root}
     </ReactSdkContext.Provider>
   );

package/src/tree/root.ts

@@ -18,6 +18,7 @@ import type { GetComponent } from "../components/components-utils";
 
 export type Data = {
   page: Page;
+  pages: Array<Page>;
   build: Build;
   assets: Array<Asset>;
   params?: Params;
@@ -86,6 +87,7 @@ export const InstanceRoot = ({
       getPropsByInstanceId(new Map(data.build.props))
     ),
     assetsStore: atom(new Map(data.assets.map((asset) => [asset.id, asset]))),
+    pagesStore: atom(new Map(data.pages.map((page) => [page.id, page]))),
     Component: Component ?? WebstudioComponent,
     getComponent,
   });