@makeswift/runtime 0.1.3 → 0.1.6

package/dist/index.cjs3.js

@@ -40,16 +40,6 @@ function _interopDefaultLegacy(e) {
 }
 var scrollIntoView__default = /* @__PURE__ */ _interopDefaultLegacy(scrollIntoView);
 var NextLink__default = /* @__PURE__ */ _interopDefaultLegacy(NextLink);
-function usePage(pageId) {
-  const { error, data = {} } = next.useQuery(next.PAGE_PATHNAMES_BY_ID, {
-    skip: pageId == null,
-    variables: { ids: [pageId] }
-  });
-  if (pageId == null || error != null)
-    return null;
-  const { pagePathnamesById: [page] = [] } = data;
-  return page;
-}
 const Link = React.forwardRef(function Link2(_a, ref) {
   var _b = _a, {
     link,
@@ -60,7 +50,7 @@ const Link = React.forwardRef(function Link2(_a, ref) {
     "onClick"
   ]);
   var _a2;
-  const page = usePage(link && link.type === "OPEN_PAGE" ? link.payload.pageId : null);
+  const page = next.usePage(link && link.type === "OPEN_PAGE" ? link.payload.pageId : null);
   const elementKey = (link == null ? void 0 : link.type) === "SCROLL_TO_ELEMENT" ? (_a2 = link.payload.elementIdConfig) == null ? void 0 : _a2.elementKey : null;
   const elementId = next.useElementId(elementKey);
   let href = "#";
@@ -137,5 +127,4 @@ const Link = React.forwardRef(function Link2(_a, ref) {
   });
 });
 exports.Link = Link;
-exports.usePage = usePage;
 //# sourceMappingURL=index.cjs3.js.map

package/dist/index.cjs3.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs3.js","sources":["../src/components/hooks/usePage.ts","../src/components/shared/Link/index.tsx"],"sourcesContent":["import { useQuery } from '../../api/react'\nimport { PAGE_PATHNAMES_BY_ID } from '../utils/queries'\n\ntype Page = {\n  id: string\n  pathname: string\n}\n\nexport function usePage(pageId: string | null | undefined): Page | null | undefined {\n  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {\n    skip: pageId == null,\n    variables: { ids: [pageId] },\n  })\n\n  if (pageId == null || error != null) return null\n\n  const { pagePathnamesById: [page] = [] } = data\n\n  return page\n}\n","import { ComponentPropsWithoutRef, forwardRef, MouseEvent } from 'react'\nimport scrollIntoView from 'scroll-into-view-if-needed'\nimport NextLink from 'next/link'\n\nimport { LinkValue as LinkPropControllerValue } from '../../../prop-controllers/descriptors'\nimport { usePage } from '../../hooks'\nimport { useElementId } from '../../../runtimes/react'\n\ntype BaseProps = {\n  link?: LinkPropControllerValue\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'a'>, keyof BaseProps>\n\nexport const Link = forwardRef<HTMLAnchorElement, Props>(function Link(\n  { link, onClick = () => {}, ...restOfProps }: Props,\n  ref,\n) {\n  const page = usePage(link && link.type === 'OPEN_PAGE' ? link.payload.pageId : null)\n  const elementKey =\n    link?.type === 'SCROLL_TO_ELEMENT' ? link.payload.elementIdConfig?.elementKey : null\n  const elementId = useElementId(elementKey)\n\n  let href = '#'\n  let target: '_blank' | '_self' | undefined\n  let block: 'start' | 'center' | 'end' | undefined\n\n  if (link) {\n    switch (link.type) {\n      case 'OPEN_PAGE': {\n        if (page) href = `/${page.pathname}`\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'OPEN_URL': {\n        href = link.payload.url\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'SEND_EMAIL': {\n        const { to, subject = '', body = '' } = link.payload\n\n        if (to != null) href = `mailto:${to}?subject=${subject}&body=${body}`\n\n        break\n      }\n\n      case 'CALL_PHONE': {\n        href = `tel:${link.payload.phoneNumber}`\n\n        break\n      }\n\n      case 'SCROLL_TO_ELEMENT': {\n        href = `#${elementId ?? ''}`\n        block = link.payload.block\n\n        break\n      }\n\n      default:\n        throw new RangeError(`Invalid link type \"${(link as any).type}.\"`)\n    }\n  }\n\n  function handleClick(event: MouseEvent<HTMLAnchorElement>) {\n    onClick(event)\n\n    if (event.defaultPrevented) return\n\n    /**\n     * When we introduced `next/link` instead of just `a` element slate no longer prevented link from navigating within\n     * content mode. This is a hack to compensate for what would be expected as slate's default behavior.\n     * On upgrade of slate this can be reevaluated.\n     */\n    if (event.currentTarget.isContentEditable) return event.preventDefault()\n\n    if (link && link.type === 'SCROLL_TO_ELEMENT') {\n      let hash: string | undefined\n\n      try {\n        hash = new URL(`http://www.example.com/${href}`).hash\n      } catch (error) {\n        console.error(`Link received invalid href: ${href}`, error)\n      }\n\n      if (href != null && href === hash) {\n        event.preventDefault()\n        const view = event.view as unknown as Window\n\n        scrollIntoView(view.document.querySelector(hash)!, {\n          behavior: 'smooth',\n          block,\n        })\n\n        if (view.location.hash !== hash) view.history.pushState({}, '', hash)\n      }\n    }\n  }\n\n  return (\n    <NextLink href={href}>\n      {/* eslint-disable-next-line */}\n      <a {...restOfProps} ref={ref} target={target} onClick={handleClick} />\n    </NextLink>\n  )\n})\n"],"names":["useQuery","PAGE_PATHNAMES_BY_ID","Link","forwardRef","ref","link","onClick","restOfProps","page","usePage","type","payload","pageId","elementKey","elementIdConfig","elementId","useElementId","href","target","block","pathname","openInNewTab","url","to","subject","body","phoneNumber","RangeError","handleClick","event","defaultPrevented","currentTarget","isContentEditable","preventDefault","hash","URL","error","view","scrollIntoView","document","querySelector","behavior","location","history","pushState","NextLink"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQO,iBAAiB,QAA4D;AAClF,QAAM,EAAE,OAAO,OAAO,CAAC,MAAMA,KAAAA,SAASC,KAAAA,sBAAsB;AAAA,IAC1D,MAAM,UAAU;AAAA,IAChB,WAAW,EAAE,KAAK,CAAC,MAAM,EAAE;AAAA,EAAA,CAC5B;AAEG,MAAA,UAAU,QAAQ,SAAS;AAAa,WAAA;AAE5C,QAAM,EAAE,mBAAmB,CAAC,QAAQ,CAAO,MAAA;AAEpC,SAAA;AACT;ACJaC,MAAAA,OAAOC,MAAAA,WAAqC,eACvD,IACAC,KACA;AAFA,eAAEC;AAAAA;AAAAA,IAAMC,UAAU,MAAM;AAAA,IAAE;AAAA,MAA1B,IAA+BC,wBAA/B,IAA+BA;AAAAA,IAA7BF;AAAAA,IAAMC;AAAAA;;AAGFE,QAAAA,OAAOC,QAAQJ,QAAQA,KAAKK,SAAS,cAAcL,KAAKM,QAAQC,SAAS,IAA3D;AACpB,QAAMC,aACJR,8BAAMK,UAAS,sBAAsBL,YAAKM,QAAQG,oBAAbT,oBAA8BQ,aAAa;AAC5EE,QAAAA,YAAYC,kBAAaH,UAAD;AAE1BI,MAAAA,OAAO;AACPC,MAAAA;AACAC,MAAAA;AAEJ,MAAId,MAAM;AACAA,YAAAA,KAAKK;AAAAA,WACN,aAAa;AACZF,YAAAA;AAAMS,iBAAQ,IAAGT,KAAKY;AAEjBf,iBAAAA,KAAKM,QAAQU,eAAe,WAAW;AAEhD;AAAA,MACD;AAAA,WAEI,YAAY;AACfJ,eAAOZ,KAAKM,QAAQW;AAEXjB,iBAAAA,KAAKM,QAAQU,eAAe,WAAW;AAEhD;AAAA,MACD;AAAA,WAEI,cAAc;AACX,cAAA;AAAA,UAAEE;AAAAA,UAAIC,UAAU;AAAA,UAAIC,OAAO;AAAA,YAAOpB,KAAKM;AAE7C,YAAIY,MAAM;AAAc,iBAAA,UAASA,cAAcC,gBAAgBC;AAE/D;AAAA,MACD;AAAA,WAEI,cAAc;AACT,eAAA,OAAMpB,KAAKM,QAAQe;AAE3B;AAAA,MACD;AAAA,WAEI,qBAAqB;AACxBT,eAAQ,IAAGF,gCAAa;AACxBI,gBAAQd,KAAKM,QAAQQ;AAErB;AAAA,MACD;AAAA;AAGO,cAAA,IAAIQ,WAAY,sBAAsBtB,KAAaK,QAAnD;AAAA;AAAA,EAEX;AAEQkB,uBAAYC,OAAsC;AACzDvB,YAAQuB,KAAD;AAEHA,QAAAA,MAAMC;AAAkB;AAOxBD,QAAAA,MAAME,cAAcC;AAAmB,aAAOH,MAAMI;AAEpD5B,QAAAA,QAAQA,KAAKK,SAAS,qBAAqB;AACzCwB,UAAAA;AAEA,UAAA;AACFA,eAAO,IAAIC,IAAK,0BAAyBlB,MAAlC,EAA0CiB;AAAAA,eAC1CE;AACCA,gBAAAA,MAAO,+BAA8BnB,QAAQmB,KAArD;AAAA,MACD;AAEGnB,UAAAA,QAAQ,QAAQA,SAASiB,MAAM;AACjCL,cAAMI,eAAN;AACMI,cAAAA,OAAOR,MAAMQ;AAEnBC,gCAAAA,WAAeD,KAAKE,SAASC,cAAcN,IAA5B,GAAoC;AAAA,UACjDO,UAAU;AAAA,UACVtB;AAAAA,QAAAA,CAFY;AAKVkB,YAAAA,KAAKK,SAASR,SAASA;AAAMG,eAAKM,QAAQC,UAAU,IAAI,IAAIV,IAA/B;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAED,wCACGW,kBAAAA,YAAD;AAAA,IAAU;AAAA,IAAV,+EAEStC;MAAa;AAAA,MAAU;AAAA,MAAgB,SAASqB;AAAAA,IAAAA,EAAvD;AAAA,EAAA,CAHJ;AAMD,CAlG6B;;;"}
+{"version":3,"file":"index.cjs3.js","sources":["../src/components/shared/Link/index.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEvent } from 'react'\nimport scrollIntoView from 'scroll-into-view-if-needed'\nimport NextLink from 'next/link'\n\nimport { LinkValue as LinkPropControllerValue } from '../../../prop-controllers/descriptors'\nimport { usePage } from '../../hooks'\nimport { useElementId } from '../../../runtimes/react'\n\ntype BaseProps = {\n  link?: LinkPropControllerValue\n  onClick?: (event: MouseEvent<HTMLAnchorElement>) => unknown\n}\n\ntype Props = BaseProps & Omit<ComponentPropsWithoutRef<'a'>, keyof BaseProps>\n\nexport const Link = forwardRef<HTMLAnchorElement, Props>(function Link(\n  { link, onClick = () => {}, ...restOfProps }: Props,\n  ref,\n) {\n  const page = usePage(link && link.type === 'OPEN_PAGE' ? link.payload.pageId : null)\n  const elementKey =\n    link?.type === 'SCROLL_TO_ELEMENT' ? link.payload.elementIdConfig?.elementKey : null\n  const elementId = useElementId(elementKey)\n\n  let href = '#'\n  let target: '_blank' | '_self' | undefined\n  let block: 'start' | 'center' | 'end' | undefined\n\n  if (link) {\n    switch (link.type) {\n      case 'OPEN_PAGE': {\n        if (page) href = `/${page.pathname}`\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'OPEN_URL': {\n        href = link.payload.url\n\n        target = link.payload.openInNewTab ? '_blank' : '_self'\n\n        break\n      }\n\n      case 'SEND_EMAIL': {\n        const { to, subject = '', body = '' } = link.payload\n\n        if (to != null) href = `mailto:${to}?subject=${subject}&body=${body}`\n\n        break\n      }\n\n      case 'CALL_PHONE': {\n        href = `tel:${link.payload.phoneNumber}`\n\n        break\n      }\n\n      case 'SCROLL_TO_ELEMENT': {\n        href = `#${elementId ?? ''}`\n        block = link.payload.block\n\n        break\n      }\n\n      default:\n        throw new RangeError(`Invalid link type \"${(link as any).type}.\"`)\n    }\n  }\n\n  function handleClick(event: MouseEvent<HTMLAnchorElement>) {\n    onClick(event)\n\n    if (event.defaultPrevented) return\n\n    /**\n     * When we introduced `next/link` instead of just `a` element slate no longer prevented link from navigating within\n     * content mode. This is a hack to compensate for what would be expected as slate's default behavior.\n     * On upgrade of slate this can be reevaluated.\n     */\n    if (event.currentTarget.isContentEditable) return event.preventDefault()\n\n    if (link && link.type === 'SCROLL_TO_ELEMENT') {\n      let hash: string | undefined\n\n      try {\n        hash = new URL(`http://www.example.com/${href}`).hash\n      } catch (error) {\n        console.error(`Link received invalid href: ${href}`, error)\n      }\n\n      if (href != null && href === hash) {\n        event.preventDefault()\n        const view = event.view as unknown as Window\n\n        scrollIntoView(view.document.querySelector(hash)!, {\n          behavior: 'smooth',\n          block,\n        })\n\n        if (view.location.hash !== hash) view.history.pushState({}, '', hash)\n      }\n    }\n  }\n\n  return (\n    <NextLink href={href}>\n      {/* eslint-disable-next-line */}\n      <a {...restOfProps} ref={ref} target={target} onClick={handleClick} />\n    </NextLink>\n  )\n})\n"],"names":["Link","forwardRef","ref","link","onClick","restOfProps","page","usePage","type","payload","pageId","elementKey","elementIdConfig","elementId","useElementId","href","target","block","pathname","openInNewTab","url","to","subject","body","phoneNumber","RangeError","handleClick","event","defaultPrevented","currentTarget","isContentEditable","preventDefault","hash","URL","error","view","scrollIntoView","document","querySelector","behavior","location","history","pushState","NextLink"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAeaA,MAAAA,OAAOC,MAAAA,WAAqC,eACvD,IACAC,KACA;AAFA,eAAEC;AAAAA;AAAAA,IAAMC,UAAU,MAAM;AAAA,IAAE;AAAA,MAA1B,IAA+BC,wBAA/B,IAA+BA;AAAAA,IAA7BF;AAAAA,IAAMC;AAAAA;;AAGFE,QAAAA,OAAOC,KAAAA,QAAQJ,QAAQA,KAAKK,SAAS,cAAcL,KAAKM,QAAQC,SAAS,IAA3D;AACpB,QAAMC,aACJR,8BAAMK,UAAS,sBAAsBL,YAAKM,QAAQG,oBAAbT,oBAA8BQ,aAAa;AAC5EE,QAAAA,YAAYC,kBAAaH,UAAD;AAE1BI,MAAAA,OAAO;AACPC,MAAAA;AACAC,MAAAA;AAEJ,MAAId,MAAM;AACAA,YAAAA,KAAKK;AAAAA,WACN,aAAa;AACZF,YAAAA;AAAMS,iBAAQ,IAAGT,KAAKY;AAEjBf,iBAAAA,KAAKM,QAAQU,eAAe,WAAW;AAEhD;AAAA,MACD;AAAA,WAEI,YAAY;AACfJ,eAAOZ,KAAKM,QAAQW;AAEXjB,iBAAAA,KAAKM,QAAQU,eAAe,WAAW;AAEhD;AAAA,MACD;AAAA,WAEI,cAAc;AACX,cAAA;AAAA,UAAEE;AAAAA,UAAIC,UAAU;AAAA,UAAIC,OAAO;AAAA,YAAOpB,KAAKM;AAE7C,YAAIY,MAAM;AAAc,iBAAA,UAASA,cAAcC,gBAAgBC;AAE/D;AAAA,MACD;AAAA,WAEI,cAAc;AACT,eAAA,OAAMpB,KAAKM,QAAQe;AAE3B;AAAA,MACD;AAAA,WAEI,qBAAqB;AACxBT,eAAQ,IAAGF,gCAAa;AACxBI,gBAAQd,KAAKM,QAAQQ;AAErB;AAAA,MACD;AAAA;AAGO,cAAA,IAAIQ,WAAY,sBAAsBtB,KAAaK,QAAnD;AAAA;AAAA,EAEX;AAEQkB,uBAAYC,OAAsC;AACzDvB,YAAQuB,KAAD;AAEHA,QAAAA,MAAMC;AAAkB;AAOxBD,QAAAA,MAAME,cAAcC;AAAmB,aAAOH,MAAMI;AAEpD5B,QAAAA,QAAQA,KAAKK,SAAS,qBAAqB;AACzCwB,UAAAA;AAEA,UAAA;AACFA,eAAO,IAAIC,IAAK,0BAAyBlB,MAAlC,EAA0CiB;AAAAA,eAC1CE;AACCA,gBAAAA,MAAO,+BAA8BnB,QAAQmB,KAArD;AAAA,MACD;AAEGnB,UAAAA,QAAQ,QAAQA,SAASiB,MAAM;AACjCL,cAAMI,eAAN;AACMI,cAAAA,OAAOR,MAAMQ;AAEnBC,gCAAAA,WAAeD,KAAKE,SAASC,cAAcN,IAA5B,GAAoC;AAAA,UACjDO,UAAU;AAAA,UACVtB;AAAAA,QAAAA,CAFY;AAKVkB,YAAAA,KAAKK,SAASR,SAASA;AAAMG,eAAKM,QAAQC,UAAU,IAAI,IAAIV,IAA/B;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAED,wCACGW,kBAAAA,YAAD;AAAA,IAAU;AAAA,IAAV,+EAEStC;MAAa;AAAA,MAAU;AAAA,MAAgB,SAASqB;AAAAA,IAAAA,EAAvD;AAAA,EAAA,CAHJ;AAMD,CAlG6B;;"}

package/dist/index.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 };
 var _e;
 import * as React from "react";
-import { createContext, useContext, useEffect, useState, useMemo, useRef, Children, createElement, forwardRef, useLayoutEffect, Component, memo, useImperativeHandle } from "react";
+import { createContext, useContext, useEffect, useState, useMemo, useRef, Children, createElement, forwardRef, useLayoutEffect, useCallback, Component, memo, useImperativeHandle } from "react";
 import { useSyncExternalStoreWithSelector } from "use-sync-external-store/shim/with-selector";
 import { g as getPropControllerDescriptors, i as isElementReference, a as getElementSwatchIds, b as getFileIds, d as getTypographyIds, e as getTableIds, f as getPageIds, h as getElementChildren, j as createDocumentReference, k as getComponentPropControllerDescriptors, l as configureStore, m as getDocument, n as getElementId, o as getIsInBuilder, p as getReactComponent, c as createDocument } from "./react-page.es.js";
 import { f as registerComponentHandleEffect, g as mountComponentEffect, h as registerComponentEffect, j as registerReactComponentEffect, k as registerDocumentEffect } from "./actions.es.js";
@@ -51,12 +51,13 @@ import { BatchHttpLink } from "@apollo/client/link/batch-http";
 import { P as PagePathnameSliceFragmentDoc } from "./graphql.es.js";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { T as Types, E as ElementID, B as Backgrounds, W as Width, R as ResponsiveIconRadioGroup, M as Margin, P as Padding, a as Border, b as BorderRadius, S as Shadows, G as GapY, c as GapX, e as ResponsiveSelect, f as ResponsiveNumber, C as Checkbox, g as Grid, h as TextInput, L as Link, i as ResponsiveColor, j as TextStyle, I as Images, N as Number, D as Date$1, F as Font, k as ResponsiveLength, l as TextArea, m as Table, n as TableFormFields, o as Image, p as ResponsiveOpacity, q as NavigationLinks, r as SocialLinks, s as RichText, V as Video, t as WidthControlValueFormats } from "./descriptors.es.js";
-import { S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
+import { L as LinkControlType, S as SelectControlType, T as TextAreaControlType, a as TextInputControlType, N as NumberControlType, C as CheckboxControlType } from "./text-input.es.js";
 import { C as ColorControlType } from "./color.es.js";
 import { S as ShapeControlType, L as ListControlType, C as ComboboxControlType } from "./shape.es.js";
 import { a as ImageControlValueFormat, I as ImageControlType } from "./image.es.js";
 import { a as StyleControlProperty, S as StyleControlType } from "./style.es.js";
 import ColorHelper from "color";
+import scrollIntoView from "scroll-into-view-if-needed";
 import { findDOMNode } from "react-dom";
 import parse from "html-react-parser";
 import Head from "next/head";
@@ -447,6 +448,8 @@ class MakeswiftClient {
       variables: introspectionData
     });
     res.data.pagePathnamesById.forEach((pagePathnameSlice) => {
+      if (pagePathnameSlice == null)
+        return;
       const id = Buffer.from(`Page:${pagePathnameSlice.id}`).toString("base64");
       this.apolloClient.cache.writeFragment({
         fragment: PagePathnameSliceFragmentDoc,
@@ -772,13 +775,13 @@ function Page$1({
           content: socialImage.publicUrl
         }), /* @__PURE__ */ jsx("meta", {
           property: "og:image:type",
-          content: socialImage.publicUrl
+          content: socialImage.mimetype
         }), /* @__PURE__ */ jsx("meta", {
           name: "twitter:image",
           content: socialImage.publicUrl
         }), /* @__PURE__ */ jsx("meta", {
           name: "twitter:card",
-          content: socialImage.publicUrl
+          content: "summary_large_image"
         }), /* @__PURE__ */ jsx("meta", {
           itemProp: "image",
           content: socialImage.publicUrl
@@ -2131,6 +2134,16 @@ function useFile(fileId) {
 }
 const isSSR = typeof window === "undefined" || /ServerSideRendering/.test(window.navigator && window.navigator.userAgent);
 const useIsomorphicLayoutEffect = isSSR ? useEffect : useLayoutEffect;
+function usePage(pageId) {
+  const { error, data = {} } = useQuery(PAGE_PATHNAMES_BY_ID, {
+    skip: pageId == null,
+    variables: { ids: [pageId] }
+  });
+  if (pageId == null || error != null)
+    return null;
+  const { pagePathnamesById: [page] = [] } = data;
+  return page;
+}
 function responsiveStyle(responsiveValues, join$1, strategy) {
   return join(responsiveValues, join$1, strategy).reduce((acc, { deviceId, value }) => {
     const device = getDevice(deviceId);
@@ -2541,6 +2554,71 @@ function useImageControlValue(data, definition) {
     dimensions: { width: file.dimensions.width, height: file.dimensions.height }
   };
 }
+function useLinkControlValue(link, _definition) {
+  var _a;
+  const page = usePage(link && link.type === "OPEN_PAGE" ? link.payload.pageId : null);
+  const elementKey = (link == null ? void 0 : link.type) === "SCROLL_TO_ELEMENT" ? (_a = link.payload.elementIdConfig) == null ? void 0 : _a.elementKey : null;
+  const elementId = useElementId(elementKey);
+  let href = "#";
+  let target;
+  let block;
+  if (link) {
+    switch (link.type) {
+      case "OPEN_PAGE": {
+        if (page)
+          href = `/${page.pathname}`;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "OPEN_URL": {
+        href = link.payload.url;
+        target = link.payload.openInNewTab ? "_blank" : "_self";
+        break;
+      }
+      case "SEND_EMAIL": {
+        const { to, subject = "", body = "" } = link.payload;
+        if (to != null)
+          href = `mailto:${to}?subject=${subject}&body=${body}`;
+        break;
+      }
+      case "CALL_PHONE": {
+        href = `tel:${link.payload.phoneNumber}`;
+        break;
+      }
+      case "SCROLL_TO_ELEMENT": {
+        href = `#${elementId != null ? elementId : ""}`;
+        block = link.payload.block;
+        break;
+      }
+      default:
+        throw new RangeError(`Invalid link type "${link.type}."`);
+    }
+  }
+  const handleClick = useCallback((event) => {
+    if (event.defaultPrevented)
+      return;
+    if (link && link.type === "SCROLL_TO_ELEMENT") {
+      let hash;
+      try {
+        hash = new URL(`http://www.example.com/${href}`).hash;
+      } catch (error) {
+        console.error(`Link received invalid href: ${href}`, error);
+      }
+      if (href != null && href === hash) {
+        event.preventDefault();
+        const view = event.view;
+        scrollIntoView(view.document.querySelector(hash), {
+          behavior: "smooth",
+          block
+        });
+        if (view.location.hash !== hash)
+          view.history.pushState({}, "", hash);
+      }
+    }
+  }, [link, href, block]);
+  const res = useMemo(() => ({ href, target, onClick: handleClick }), [href, target, handleClick]);
+  return res;
+}
 function ListControlValue({
   definition,
   data,
@@ -2625,6 +2703,12 @@ function ControlValue({
         parameters: [data, definition],
         children: (value) => children(value)
       }, definition.type);
+    case LinkControlType:
+      return /* @__PURE__ */ jsx(RenderHook, {
+        hook: useLinkControlValue,
+        parameters: [data, definition],
+        children: (value) => children(value)
+      }, definition.type);
     case ComboboxControlType:
       return /* @__PURE__ */ jsx(RenderHook, {
         hook: useComboboxControlValue,
@@ -2675,6 +2759,7 @@ function PropsValue({
       case ComboboxControlType:
       case ShapeControlType:
       case ListControlType:
+      case LinkControlType:
         return /* @__PURE__ */ jsx(ControlValue, {
           definition: descriptor,
           data: props[propName],
@@ -2890,7 +2975,7 @@ const ElementData = memo(forwardRef(function ElementData2({
   suppressRefWarning(`\`ForwardRef(${ElementData2.name})\``);
   if (Component2 == null) {
     return /* @__PURE__ */ jsx(FallbackComponent, {
-      ref,
+      ref: setHandle,
       text: "Component not found"
     });
   }
@@ -2996,5 +3081,5 @@ const DocumentReference = memo(forwardRef(function DocumentReference2({
     document: document2
   });
 }));
-export { Alignments as A, TYPOGRAPHIES_BY_ID as B, Contrasts as C, DocumentReference as D, Element as E, SWATCHES_BY_ID as F, shallowMergeFallbacks as G, join as H, getDevice as I, getDeviceMediaQuery as J, isNonNullable as K, FILES_BY_ID as L, PAGE_PATHNAMES_BY_ID as M, useElementId as N, deepEqual as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, Document$1 as U, getServerSideProps as V, getStaticProps as W, getStaticPaths as X, Page as Y, forwardNextDynamicRef as Z, ReactRuntime as a, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useResponsiveColor as k, useFile as l, PAGE_SNIPPETS_QUERY as m, Page$1 as n, colorToString as o, useIsomorphicLayoutEffect as p, Shapes as q, responsiveWidth as r, Sizes as s, useFormContext as t, useIsInBuilder as u, useQuery as v, useMutation as w, Provider as x, DEVICES as y, findDeviceOverride as z };
+export { Alignments as A, findDeviceOverride as B, Contrasts as C, DocumentReference as D, Element as E, TYPOGRAPHIES_BY_ID as F, SWATCHES_BY_ID as G, shallowMergeFallbacks as H, join as I, getDevice as J, getDeviceMediaQuery as K, isNonNullable as L, FILES_BY_ID as M, useElementId as N, deepEqual as O, PageProvider as P, MakeswiftClient as Q, RuntimeProvider as R, SITE_FONTS_QUERY as S, TABLE_BY_ID as T, Document$1 as U, getServerSideProps as V, getStaticProps as W, getStaticPaths as X, Page as Y, forwardNextDynamicRef as Z, ReactRuntime as a, usePageId as b, DEFAULT_BOX_ANIMATE_TYPE as c, DEFAULT_BOX_ANIMATE_DELAY as d, DEFAULT_BOX_ANIMATE_DURATION as e, DEFAULT_ITEM_ANIMATE_TYPE as f, DEFAULT_ITEM_ANIMATE_DELAY as g, DEFAULT_ITEM_ANIMATE_DURATION as h, DEFAULT_ITEM_STAGGER_DURATION as i, useBorder as j, useResponsiveColor as k, useFile as l, usePage as m, PAGE_SNIPPETS_QUERY as n, Page$1 as o, colorToString as p, useIsomorphicLayoutEffect as q, responsiveWidth as r, Shapes as s, Sizes as t, useIsInBuilder as u, useFormContext as v, useQuery as w, useMutation as x, Provider as y, DEVICES as z };
 //# sourceMappingURL=index.es.js.map