@makeswift/runtime 0.29.0-canary.23 → 0.29.0-canary.25

package/dist/cjs/api/graphql-api-client.js

@@ -27,7 +27,7 @@ class MakeswiftGraphQLApiClient {
   graphqlClient;
   constructor({ endpoint }) {
     this.graphqlClient = new import_client.GraphQLClient(endpoint, {
-      "makeswift-runtime-version": "0.29.0-canary.23"
+      "makeswift-runtime-version": "0.29.0-canary.25"
     });
   }
   async getUnversionedResources({

package/dist/cjs/api/rest-api-client.js

@@ -223,7 +223,7 @@ class MakeswiftRestAPIClient {
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.29.0-canary.23"
+      "makeswift-runtime-version": "0.29.0-canary.25"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

package/dist/cjs/api-handler/handlers/manifest.js

@@ -28,7 +28,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return import_request_response.ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return import_request_response.ApiResponse.json({
-    version: "0.29.0-canary.23",
+    version: "0.29.0-canary.25",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/cjs/components/shared/ErrorBoundary.js

@@ -24,14 +24,14 @@ module.exports = __toCommonJS(ErrorBoundary_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 class ErrorBoundary extends import_react.Component {
-  static getDerivedStateFromError() {
-    return { hasError: true };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, details: error.message };
   }
   state = { hasError: false };
   render() {
     const { FallbackComponent } = this.props;
     if (this.state.hasError)
-      return FallbackComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackComponent, {}) : null;
+      return FallbackComponent ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FallbackComponent, { details: this.state.details }) : null;
     return this.props.children;
   }
 }

package/dist/cjs/components/shared/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/shared/ErrorBoundary.tsx"],"sourcesContent":["import { Component, ElementType, ReactNode } from 'react'\n\ntype ErrorProps = {\n  FallbackComponent: ElementType\n  children: ReactNode\n}\n\ntype State = {\n  hasError: boolean\n}\n\nexport class ErrorBoundary extends Component<ErrorProps, State> {\n  static getDerivedStateFromError() {\n    return { hasError: true }\n  }\n\n  state = { hasError: false }\n\n  render() {\n    const { FallbackComponent } = this.props\n\n    if (this.state.hasError) return FallbackComponent ? <FallbackComponent /> : null\n\n    return this.props.children\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBwD;AArBxD,mBAAkD;AAW3C,MAAM,sBAAsB,uBAA6B;AAAA,EAC9D,OAAO,2BAA2B;AAChC,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAAA,EAEA,QAAQ,EAAE,UAAU,MAAM;AAAA,EAE1B,SAAS;AACP,UAAM,EAAE,kBAAkB,IAAI,KAAK;AAEnC,QAAI,KAAK,MAAM;AAAU,aAAO,oBAAoB,4CAAC,qBAAkB,IAAK;AAE5E,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/shared/ErrorBoundary.tsx"],"sourcesContent":["import { Component, type ElementType, type ReactNode } from 'react'\n\ntype ErrorProps = {\n  FallbackComponent: ElementType<{ details: string }>\n  children: ReactNode\n}\n\ntype State =\n  | {\n      hasError: false\n    }\n  | {\n      hasError: true\n      details: string\n    }\n\nexport class ErrorBoundary extends Component<ErrorProps, State> {\n  static getDerivedStateFromError(error: Error): State {\n    return { hasError: true, details: error.message }\n  }\n\n  state: State = { hasError: false }\n\n  render() {\n    const { FallbackComponent } = this.props\n\n    if (this.state.hasError)\n      return FallbackComponent ? <FallbackComponent details={this.state.details} /> : null\n\n    return this.props.children\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2BiC;AA3BjC,mBAA4D;AAgBrD,MAAM,sBAAsB,uBAA6B;AAAA,EAC9D,OAAO,yBAAyB,OAAqB;AACnD,WAAO,EAAE,UAAU,MAAM,SAAS,MAAM,QAAQ;AAAA,EAClD;AAAA,EAEA,QAAe,EAAE,UAAU,MAAM;AAAA,EAEjC,SAAS;AACP,UAAM,EAAE,kBAAkB,IAAI,KAAK;AAEnC,QAAI,KAAK,MAAM;AACb,aAAO,oBAAoB,4CAAC,qBAAkB,SAAS,KAAK,MAAM,SAAS,IAAK;AAElF,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}

package/dist/cjs/components/shared/FallbackComponent/FallbackComponent.js

@@ -24,34 +24,54 @@ module.exports = __toCommonJS(FallbackComponent_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_Warning20 = require("../../icons/Warning20");
-var import_use_style = require("../../../runtimes/react/css-runtime/hooks/use-style");
 const FallbackComponent = (0, import_react.forwardRef)(function FallbackComponent2({ text, details }, ref) {
-  const { className: outerClassName, styleElement: outerStyleElement } = (0, import_use_style.useStyle)({
-    width: "100%",
-    height: 54,
-    backgroundColor: "#fcedf2",
-    borderRadius: 6,
-    padding: 16,
-    display: "flex",
-    alignItems: "center",
-    gap: 8,
-    color: "#c73e6d",
-    fill: "currentColor",
-    fontFamily: "Heebo, sans-serif",
-    fontSize: 16
-  });
-  const { className: noDisplayClassName, styleElement: noDisplayStyleElement } = (0, import_use_style.useStyle)({
-    display: "none"
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    outerStyleElement,
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref, className: outerClassName, children: [
-      noDisplayStyleElement,
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Warning20.Warning20, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: text }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: noDisplayClassName, children: details })
-    ] })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      ref,
+      style: {
+        width: "100%",
+        height: 54,
+        backgroundColor: "#fcedf2",
+        borderRadius: 6,
+        padding: 16,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        color: "#c73e6d"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_Warning20.Warning20,
+          {
+            style: {
+              fill: "currentColor"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              color: "currentColor",
+              fontFamily: "Heebo, sans-serif",
+              fontSize: 16
+            },
+            children: text
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              display: "none"
+            },
+            children: details
+          }
+        )
+      ]
+    }
+  );
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/components/shared/FallbackComponent/FallbackComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { Warning20 } from '../../icons/Warning20'\nimport { useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  text: string\n  details?: string\n}\n\nexport const FallbackComponent = forwardRef(function FallbackComponent(\n  { text, details }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const { className: outerClassName, styleElement: outerStyleElement } = useStyle({\n    width: '100%',\n    height: 54,\n    backgroundColor: '#fcedf2',\n    borderRadius: 6,\n    padding: 16,\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    color: '#c73e6d',\n    fill: 'currentColor',\n    fontFamily: 'Heebo, sans-serif',\n    fontSize: 16,\n  })\n  const { className: noDisplayClassName, styleElement: noDisplayStyleElement } = useStyle({\n    display: 'none',\n  })\n  return (\n    <>\n      {outerStyleElement}\n      <div ref={ref} className={outerClassName}>\n        {noDisplayStyleElement}\n        <Warning20 />\n        <span>{text}</span>\n        <span className={noDisplayClassName}>{details}</span>\n      </div>\n    </>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA+BI;AA/BJ,mBAAgC;AAChC,uBAA0B;AAC1B,uBAAyB;AAOlB,MAAM,wBAAoB,yBAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AACA,QAAM,EAAE,WAAW,gBAAgB,cAAc,kBAAkB,QAAI,2BAAS;AAAA,IAC9E,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,EAAE,WAAW,oBAAoB,cAAc,sBAAsB,QAAI,2BAAS;AAAA,IACtF,SAAS;AAAA,EACX,CAAC;AACD,SACE,4EACG;AAAA;AAAA,IACD,6CAAC,SAAI,KAAU,WAAW,gBACvB;AAAA;AAAA,MACD,4CAAC,8BAAU;AAAA,MACX,4CAAC,UAAM,gBAAK;AAAA,MACZ,4CAAC,UAAK,WAAW,oBAAqB,mBAAQ;AAAA,OAChD;AAAA,KACF;AAEJ,CAAC;","names":["FallbackComponent"]}
+{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { Warning20 } from '../../icons/Warning20'\n\ntype Props = {\n  text: string\n  details?: string\n}\n\nexport const FallbackComponent = forwardRef(function FallbackComponent(\n  { text, details }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  // Intentionally use inline styles so that the fallback doesn't access the style\n  // context, the absence of which may be the exact error we're trying to report\n  return (\n    <div\n      ref={ref}\n      style={{\n        width: '100%',\n        height: 54,\n        backgroundColor: '#fcedf2',\n        borderRadius: 6,\n        padding: 16,\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        color: '#c73e6d',\n      }}\n    >\n      <Warning20\n        style={{\n          fill: 'currentColor',\n        }}\n      />\n      <span\n        style={{\n          color: 'currentColor',\n          fontFamily: 'Heebo, sans-serif',\n          fontSize: 16,\n        }}\n      >\n        {text}\n      </span>\n      <span\n        style={{\n          display: 'none',\n        }}\n      >\n        {details}\n      </span>\n    </div>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAfJ,mBAAgC;AAChC,uBAA0B;AAOnB,MAAM,wBAAoB,yBAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,SAAS;AAAA,QACT,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,UAAU;AAAA,YACZ;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,YACX;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["FallbackComponent"]}

package/dist/cjs/runtimes/react/components/Element.js

@@ -49,6 +49,17 @@ const Element = (0, import_react.memo)(
     const { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef } = useElementImperativeHandle(ref);
     const isRegisterElementDisabled = (0, import_use_disable_register_element.useIsRegisterElementDisabled)();
     const ElementRegistration = (0, import_use_is_read_only.useIsReadOnly)() || isRegisterElementDisabled ? NoOp : BuilderElementRegistration;
+    const ErrorFallback = (0, import_react.useCallback)(
+      ({ details }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_FallbackComponent.FallbackComponent,
+        {
+          text: `Error rendering component`,
+          details: `Error rendering component '${element.type}':
+${details}`
+        }
+      ),
+      [element.type]
+    );
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       ElementRegistration,
       {
@@ -85,9 +96,6 @@ function useElementImperativeHandle(ref) {
 function NoOp({ children }) {
   return children;
 }
-function ErrorFallback() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_FallbackComponent.FallbackComponent, { text: `Error rendering component` });
-}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Element

package/dist/cjs/runtimes/react/components/Element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ReactNode,\n  type Ref,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  lazy,\n} from 'react'\n\nimport {\n  isElementReference,\n  type Element as ElementDataOrRef,\n} from '../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\nimport { useIsReadOnly } from '../hooks/use-is-read-only'\nimport { useIsRegisterElementDisabled } from '../hooks/use-disable-register-element'\n\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\n\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\n\nconst BuilderElementRegistration = lazy(() => import('./ElementRegistration'))\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode | null {\n    const { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef } =\n      useElementImperativeHandle(ref)\n\n    const isRegisterElementDisabled = useIsRegisterElementDisabled()\n    const ElementRegistration =\n      useIsReadOnly() || isRegisterElementDisabled ? NoOp : BuilderElementRegistration\n\n    return (\n      <ElementRegistration\n        componentHandle={imperativeHandleRef.current}\n        elementKey={element.key}\n        componentType={element.type}\n      >\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\n/**\n * Creates an `ElementImperativeHandle` instance that reports the element's DOM location to\n * the builder.\n *\n * Uses the element's attached ref when available; otherwise, falls back to React's\n * `findDOMNode` to locate the rendered DOM node.\n */\nfunction useElementImperativeHandle(ref: Ref<ElementImperativeHandle>) {\n  const useFindDomNodeRef = useRef(true)\n  const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n  const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n    if (useFindDomNodeRef.current === true) {\n      imperativeHandleRef.current.callback(() => current?.() ?? null)\n    }\n  }, [])\n\n  const elementCallbackRef = useCallback((current: unknown | null) => {\n    useFindDomNodeRef.current = false\n\n    imperativeHandleRef.current.callback(() => current)\n  }, [])\n\n  useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n  return { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef }\n}\n\nfunction NoOp({ children }: PropsWithChildren) {\n  return children\n}\n\nfunction ErrorFallback() {\n  return <FallbackComponent text={`Error rendering component`} />\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0Dc;AAxDd,mBAUO;AAEP,6BAGO;AAEP,+BAAkC;AAClC,2BAA8B;AAE9B,8BAA8B;AAC9B,0CAA6C;AAE7C,uCAAwC;AACxC,2BAA4B;AAE5B,8BAAiC;AACjC,yBAA4B;AAE5B,MAAM,iCAA6B,mBAAK,MAAM,6CAAO,uBAAuB,GAAC;AAMtE,MAAM,cAAU;AAAA,MACrB,yBAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACkB;AAClB,UAAM,EAAE,qBAAqB,wBAAwB,mBAAmB,IACtE,2BAA2B,GAAG;AAEhC,UAAM,gCAA4B,kEAA6B;AAC/D,UAAM,0BACJ,uCAAc,KAAK,4BAA4B,OAAO;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAiB,oBAAoB;AAAA,QACrC,YAAY,QAAQ;AAAA,QACpB,eAAe,QAAQ;AAAA,QAEvB,sDAAC,oCAAY,KAAK,wBAChB,sDAAC,sCAAc,mBAAmB,eAC/B,yDAAmB,OAAO,IACzB;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK;AAAA,YACL,kBAAkB;AAAA;AAAA,UAFb,QAAQ;AAAA,QAGf,IAEA,4CAAC,kCAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AASA,SAAS,2BAA2B,KAAmC;AACrE,QAAM,wBAAoB,qBAAO,IAAI;AACrC,QAAM,0BAAsB,qBAAO,IAAI,yDAAwB,CAAC;AAEhE,QAAM,6BAAyB,0BAAY,CAAC,YAAkD;AAC5F,QAAI,kBAAkB,YAAY,MAAM;AACtC,0BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAqB,0BAAY,CAAC,YAA4B;AAClE,sBAAkB,UAAU;AAE5B,wBAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,EACpD,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,SAAO,EAAE,qBAAqB,wBAAwB,mBAAmB;AAC3E;AAEA,SAAS,KAAK,EAAE,SAAS,GAAsB;AAC7C,SAAO;AACT;AAEA,SAAS,gBAAgB;AACvB,SAAO,4CAAC,8CAAkB,MAAM,6BAA6B;AAC/D;","names":["Element"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ReactNode,\n  type Ref,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  lazy,\n} from 'react'\n\nimport {\n  isElementReference,\n  type Element as ElementDataOrRef,\n} from '../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\nimport { useIsReadOnly } from '../hooks/use-is-read-only'\nimport { useIsRegisterElementDisabled } from '../hooks/use-disable-register-element'\n\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\n\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\n\nconst BuilderElementRegistration = lazy(() => import('./ElementRegistration'))\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode | null {\n    const { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef } =\n      useElementImperativeHandle(ref)\n\n    const isRegisterElementDisabled = useIsRegisterElementDisabled()\n    const ElementRegistration =\n      useIsReadOnly() || isRegisterElementDisabled ? NoOp : BuilderElementRegistration\n\n    const ErrorFallback = useCallback(\n      ({ details }: { details: string }) => (\n        <FallbackComponent\n          text={`Error rendering component`}\n          details={`Error rendering component '${element.type}':\\n${details}`}\n        />\n      ),\n      [element.type],\n    )\n\n    return (\n      <ElementRegistration\n        componentHandle={imperativeHandleRef.current}\n        elementKey={element.key}\n        componentType={element.type}\n      >\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\n/**\n * Creates an `ElementImperativeHandle` instance that reports the element's DOM location to\n * the builder.\n *\n * Uses the element's attached ref when available; otherwise, falls back to React's\n * `findDOMNode` to locate the rendered DOM node.\n */\nfunction useElementImperativeHandle(ref: Ref<ElementImperativeHandle>) {\n  const useFindDomNodeRef = useRef(true)\n  const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n  const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n    if (useFindDomNodeRef.current === true) {\n      imperativeHandleRef.current.callback(() => current?.() ?? null)\n    }\n  }, [])\n\n  const elementCallbackRef = useCallback((current: unknown | null) => {\n    useFindDomNodeRef.current = false\n\n    imperativeHandleRef.current.callback(() => current)\n  }, [])\n\n  useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n  return { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef }\n}\n\nfunction NoOp({ children }: PropsWithChildren) {\n  return children\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAmDQ;AAjDR,mBAUO;AAEP,6BAGO;AAEP,+BAAkC;AAClC,2BAA8B;AAE9B,8BAA8B;AAC9B,0CAA6C;AAE7C,uCAAwC;AACxC,2BAA4B;AAE5B,8BAAiC;AACjC,yBAA4B;AAE5B,MAAM,iCAA6B,mBAAK,MAAM,6CAAO,uBAAuB,GAAC;AAMtE,MAAM,cAAU;AAAA,MACrB,yBAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACkB;AAClB,UAAM,EAAE,qBAAqB,wBAAwB,mBAAmB,IACtE,2BAA2B,GAAG;AAEhC,UAAM,gCAA4B,kEAA6B;AAC/D,UAAM,0BACJ,uCAAc,KAAK,4BAA4B,OAAO;AAExD,UAAM,oBAAgB;AAAA,MACpB,CAAC,EAAE,QAAQ,MACT;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,8BAA8B,QAAQ,IAAI;AAAA,EAAO,OAAO;AAAA;AAAA,MACnE;AAAA,MAEF,CAAC,QAAQ,IAAI;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAiB,oBAAoB;AAAA,QACrC,YAAY,QAAQ;AAAA,QACpB,eAAe,QAAQ;AAAA,QAEvB,sDAAC,oCAAY,KAAK,wBAChB,sDAAC,sCAAc,mBAAmB,eAC/B,yDAAmB,OAAO,IACzB;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK;AAAA,YACL,kBAAkB;AAAA;AAAA,UAFb,QAAQ;AAAA,QAGf,IAEA,4CAAC,kCAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AASA,SAAS,2BAA2B,KAAmC;AACrE,QAAM,wBAAoB,qBAAO,IAAI;AACrC,QAAM,0BAAsB,qBAAO,IAAI,yDAAwB,CAAC;AAEhE,QAAM,6BAAyB,0BAAY,CAAC,YAAkD;AAC5F,QAAI,kBAAkB,YAAY,MAAM;AACtC,0BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,yBAAqB,0BAAY,CAAC,YAA4B;AAClE,sBAAkB,UAAU;AAE5B,wBAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,EACpD,GAAG,CAAC,CAAC;AAEL,wCAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,SAAO,EAAE,qBAAqB,wBAAwB,mBAAmB;AAC3E;AAEA,SAAS,KAAK,EAAE,SAAS,GAAsB;AAC7C,SAAO;AACT;","names":["Element"]}

package/dist/esm/api/graphql-api-client.js

@@ -4,7 +4,7 @@ class MakeswiftGraphQLApiClient {
   graphqlClient;
   constructor({ endpoint }) {
     this.graphqlClient = new GraphQLClient(endpoint, {
-      "makeswift-runtime-version": "0.29.0-canary.23"
+      "makeswift-runtime-version": "0.29.0-canary.25"
     });
   }
   async getUnversionedResources({

package/dist/esm/api/rest-api-client.js

@@ -188,7 +188,7 @@ class MakeswiftRestAPIClient {
     const requestHeaders = new Headers({
       "x-api-key": this.apiKey,
       "makeswift-site-api-key": this.apiKey,
-      "makeswift-runtime-version": "0.29.0-canary.23"
+      "makeswift-runtime-version": "0.29.0-canary.25"
     });
     if (siteVersion?.token) {
       requestUrl.searchParams.set("version", siteVersion.version);

package/dist/esm/api-handler/handlers/manifest.js

@@ -8,7 +8,7 @@ async function manifestHandler(req, { apiKey, manifest }) {
     return ApiResponse.json({ message: "Unauthorized" }, { status: 401 });
   }
   return ApiResponse.json({
-    version: "0.29.0-canary.23",
+    version: "0.29.0-canary.25",
     interactionMode: true,
     clientSideNavigation: false,
     elementFromPoint: false,

package/dist/esm/components/shared/ErrorBoundary.js

@@ -1,14 +1,14 @@
 import { jsx } from "react/jsx-runtime";
 import { Component } from "react";
 class ErrorBoundary extends Component {
-  static getDerivedStateFromError() {
-    return { hasError: true };
+  static getDerivedStateFromError(error) {
+    return { hasError: true, details: error.message };
   }
   state = { hasError: false };
   render() {
     const { FallbackComponent } = this.props;
     if (this.state.hasError)
-      return FallbackComponent ? /* @__PURE__ */ jsx(FallbackComponent, {}) : null;
+      return FallbackComponent ? /* @__PURE__ */ jsx(FallbackComponent, { details: this.state.details }) : null;
     return this.props.children;
   }
 }

package/dist/esm/components/shared/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/shared/ErrorBoundary.tsx"],"sourcesContent":["import { Component, ElementType, ReactNode } from 'react'\n\ntype ErrorProps = {\n  FallbackComponent: ElementType\n  children: ReactNode\n}\n\ntype State = {\n  hasError: boolean\n}\n\nexport class ErrorBoundary extends Component<ErrorProps, State> {\n  static getDerivedStateFromError() {\n    return { hasError: true }\n  }\n\n  state = { hasError: false }\n\n  render() {\n    const { FallbackComponent } = this.props\n\n    if (this.state.hasError) return FallbackComponent ? <FallbackComponent /> : null\n\n    return this.props.children\n  }\n}\n"],"mappings":"AAqBwD;AArBxD,SAAS,iBAAyC;AAW3C,MAAM,sBAAsB,UAA6B;AAAA,EAC9D,OAAO,2BAA2B;AAChC,WAAO,EAAE,UAAU,KAAK;AAAA,EAC1B;AAAA,EAEA,QAAQ,EAAE,UAAU,MAAM;AAAA,EAE1B,SAAS;AACP,UAAM,EAAE,kBAAkB,IAAI,KAAK;AAEnC,QAAI,KAAK,MAAM;AAAU,aAAO,oBAAoB,oBAAC,qBAAkB,IAAK;AAE5E,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}
+{"version":3,"sources":["../../../../src/components/shared/ErrorBoundary.tsx"],"sourcesContent":["import { Component, type ElementType, type ReactNode } from 'react'\n\ntype ErrorProps = {\n  FallbackComponent: ElementType<{ details: string }>\n  children: ReactNode\n}\n\ntype State =\n  | {\n      hasError: false\n    }\n  | {\n      hasError: true\n      details: string\n    }\n\nexport class ErrorBoundary extends Component<ErrorProps, State> {\n  static getDerivedStateFromError(error: Error): State {\n    return { hasError: true, details: error.message }\n  }\n\n  state: State = { hasError: false }\n\n  render() {\n    const { FallbackComponent } = this.props\n\n    if (this.state.hasError)\n      return FallbackComponent ? <FallbackComponent details={this.state.details} /> : null\n\n    return this.props.children\n  }\n}\n"],"mappings":"AA2BiC;AA3BjC,SAAS,iBAAmD;AAgBrD,MAAM,sBAAsB,UAA6B;AAAA,EAC9D,OAAO,yBAAyB,OAAqB;AACnD,WAAO,EAAE,UAAU,MAAM,SAAS,MAAM,QAAQ;AAAA,EAClD;AAAA,EAEA,QAAe,EAAE,UAAU,MAAM;AAAA,EAEjC,SAAS;AACP,UAAM,EAAE,kBAAkB,IAAI,KAAK;AAEnC,QAAI,KAAK,MAAM;AACb,aAAO,oBAAoB,oBAAC,qBAAkB,SAAS,KAAK,MAAM,SAAS,IAAK;AAElF,WAAO,KAAK,MAAM;AAAA,EACpB;AACF;","names":[]}

package/dist/esm/components/shared/FallbackComponent/FallbackComponent.js

@@ -1,34 +1,54 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { Warning20 } from "../../icons/Warning20";
-import { useStyle } from "../../../runtimes/react/css-runtime/hooks/use-style";
 const FallbackComponent = forwardRef(function FallbackComponent2({ text, details }, ref) {
-  const { className: outerClassName, styleElement: outerStyleElement } = useStyle({
-    width: "100%",
-    height: 54,
-    backgroundColor: "#fcedf2",
-    borderRadius: 6,
-    padding: 16,
-    display: "flex",
-    alignItems: "center",
-    gap: 8,
-    color: "#c73e6d",
-    fill: "currentColor",
-    fontFamily: "Heebo, sans-serif",
-    fontSize: 16
-  });
-  const { className: noDisplayClassName, styleElement: noDisplayStyleElement } = useStyle({
-    display: "none"
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    outerStyleElement,
-    /* @__PURE__ */ jsxs("div", { ref, className: outerClassName, children: [
-      noDisplayStyleElement,
-      /* @__PURE__ */ jsx(Warning20, {}),
-      /* @__PURE__ */ jsx("span", { children: text }),
-      /* @__PURE__ */ jsx("span", { className: noDisplayClassName, children: details })
-    ] })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      style: {
+        width: "100%",
+        height: 54,
+        backgroundColor: "#fcedf2",
+        borderRadius: 6,
+        padding: 16,
+        display: "flex",
+        alignItems: "center",
+        gap: 8,
+        color: "#c73e6d"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Warning20,
+          {
+            style: {
+              fill: "currentColor"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              color: "currentColor",
+              fontFamily: "Heebo, sans-serif",
+              fontSize: 16
+            },
+            children: text
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              display: "none"
+            },
+            children: details
+          }
+        )
+      ]
+    }
+  );
 });
 export {
   FallbackComponent

package/dist/esm/components/shared/FallbackComponent/FallbackComponent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { Warning20 } from '../../icons/Warning20'\nimport { useStyle } from '../../../runtimes/react/css-runtime/hooks/use-style'\n\ntype Props = {\n  text: string\n  details?: string\n}\n\nexport const FallbackComponent = forwardRef(function FallbackComponent(\n  { text, details }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  const { className: outerClassName, styleElement: outerStyleElement } = useStyle({\n    width: '100%',\n    height: 54,\n    backgroundColor: '#fcedf2',\n    borderRadius: 6,\n    padding: 16,\n    display: 'flex',\n    alignItems: 'center',\n    gap: 8,\n    color: '#c73e6d',\n    fill: 'currentColor',\n    fontFamily: 'Heebo, sans-serif',\n    fontSize: 16,\n  })\n  const { className: noDisplayClassName, styleElement: noDisplayStyleElement } = useStyle({\n    display: 'none',\n  })\n  return (\n    <>\n      {outerStyleElement}\n      <div ref={ref} className={outerClassName}>\n        {noDisplayStyleElement}\n        <Warning20 />\n        <span>{text}</span>\n        <span className={noDisplayClassName}>{details}</span>\n      </div>\n    </>\n  )\n})\n"],"mappings":"AA+BI,mBAII,KAFF,YAFF;AA/BJ,SAAS,kBAAuB;AAChC,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAOlB,MAAM,oBAAoB,WAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AACA,QAAM,EAAE,WAAW,gBAAgB,cAAc,kBAAkB,IAAI,SAAS;AAAA,IAC9E,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,iBAAiB;AAAA,IACjB,cAAc;AAAA,IACd,SAAS;AAAA,IACT,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,KAAK;AAAA,IACL,OAAO;AAAA,IACP,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,UAAU;AAAA,EACZ,CAAC;AACD,QAAM,EAAE,WAAW,oBAAoB,cAAc,sBAAsB,IAAI,SAAS;AAAA,IACtF,SAAS;AAAA,EACX,CAAC;AACD,SACE,iCACG;AAAA;AAAA,IACD,qBAAC,SAAI,KAAU,WAAW,gBACvB;AAAA;AAAA,MACD,oBAAC,aAAU;AAAA,MACX,oBAAC,UAAM,gBAAK;AAAA,MACZ,oBAAC,UAAK,WAAW,oBAAqB,mBAAQ;AAAA,OAChD;AAAA,KACF;AAEJ,CAAC;","names":["FallbackComponent"]}
+{"version":3,"sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"sourcesContent":["import { forwardRef, Ref } from 'react'\nimport { Warning20 } from '../../icons/Warning20'\n\ntype Props = {\n  text: string\n  details?: string\n}\n\nexport const FallbackComponent = forwardRef(function FallbackComponent(\n  { text, details }: Props,\n  ref: Ref<HTMLDivElement>,\n) {\n  // Intentionally use inline styles so that the fallback doesn't access the style\n  // context, the absence of which may be the exact error we're trying to report\n  return (\n    <div\n      ref={ref}\n      style={{\n        width: '100%',\n        height: 54,\n        backgroundColor: '#fcedf2',\n        borderRadius: 6,\n        padding: 16,\n        display: 'flex',\n        alignItems: 'center',\n        gap: 8,\n        color: '#c73e6d',\n      }}\n    >\n      <Warning20\n        style={{\n          fill: 'currentColor',\n        }}\n      />\n      <span\n        style={{\n          color: 'currentColor',\n          fontFamily: 'Heebo, sans-serif',\n          fontSize: 16,\n        }}\n      >\n        {text}\n      </span>\n      <span\n        style={{\n          display: 'none',\n        }}\n      >\n        {details}\n      </span>\n    </div>\n  )\n})\n"],"mappings":"AAeI,SAcE,KAdF;AAfJ,SAAS,kBAAuB;AAChC,SAAS,iBAAiB;AAOnB,MAAM,oBAAoB,WAAW,SAASA,mBACnD,EAAE,MAAM,QAAQ,GAChB,KACA;AAGA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,SAAS;AAAA,QACT,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,KAAK;AAAA,QACL,OAAO;AAAA,MACT;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,MAAM;AAAA,YACR;AAAA;AAAA,QACF;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,OAAO;AAAA,cACP,YAAY;AAAA,cACZ,UAAU;AAAA,YACZ;AAAA,YAEC;AAAA;AAAA,QACH;AAAA,QACA;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,cACL,SAAS;AAAA,YACX;AAAA,YAEC;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;","names":["FallbackComponent"]}

package/dist/esm/runtimes/react/components/Element.js

@@ -25,6 +25,17 @@ const Element = memo(
     const { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef } = useElementImperativeHandle(ref);
     const isRegisterElementDisabled = useIsRegisterElementDisabled();
     const ElementRegistration = useIsReadOnly() || isRegisterElementDisabled ? NoOp : BuilderElementRegistration;
+    const ErrorFallback = useCallback(
+      ({ details }) => /* @__PURE__ */ jsx(
+        FallbackComponent,
+        {
+          text: `Error rendering component`,
+          details: `Error rendering component '${element.type}':
+${details}`
+        }
+      ),
+      [element.type]
+    );
     return /* @__PURE__ */ jsx(
       ElementRegistration,
       {
@@ -61,9 +72,6 @@ function useElementImperativeHandle(ref) {
 function NoOp({ children }) {
   return children;
 }
-function ErrorFallback() {
-  return /* @__PURE__ */ jsx(FallbackComponent, { text: `Error rendering component` });
-}
 export {
   Element
 };

package/dist/esm/runtimes/react/components/Element.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ReactNode,\n  type Ref,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  lazy,\n} from 'react'\n\nimport {\n  isElementReference,\n  type Element as ElementDataOrRef,\n} from '../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\nimport { useIsReadOnly } from '../hooks/use-is-read-only'\nimport { useIsRegisterElementDisabled } from '../hooks/use-disable-register-element'\n\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\n\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\n\nconst BuilderElementRegistration = lazy(() => import('./ElementRegistration'))\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode | null {\n    const { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef } =\n      useElementImperativeHandle(ref)\n\n    const isRegisterElementDisabled = useIsRegisterElementDisabled()\n    const ElementRegistration =\n      useIsReadOnly() || isRegisterElementDisabled ? NoOp : BuilderElementRegistration\n\n    return (\n      <ElementRegistration\n        componentHandle={imperativeHandleRef.current}\n        elementKey={element.key}\n        componentType={element.type}\n      >\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\n/**\n * Creates an `ElementImperativeHandle` instance that reports the element's DOM location to\n * the builder.\n *\n * Uses the element's attached ref when available; otherwise, falls back to React's\n * `findDOMNode` to locate the rendered DOM node.\n */\nfunction useElementImperativeHandle(ref: Ref<ElementImperativeHandle>) {\n  const useFindDomNodeRef = useRef(true)\n  const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n  const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n    if (useFindDomNodeRef.current === true) {\n      imperativeHandleRef.current.callback(() => current?.() ?? null)\n    }\n  }, [])\n\n  const elementCallbackRef = useCallback((current: unknown | null) => {\n    useFindDomNodeRef.current = false\n\n    imperativeHandleRef.current.callback(() => current)\n  }, [])\n\n  useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n  return { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef }\n}\n\nfunction NoOp({ children }: PropsWithChildren) {\n  return children\n}\n\nfunction ErrorFallback() {\n  return <FallbackComponent text={`Error rendering component`} />\n}\n"],"mappings":";AA0Dc;AAxDd;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAE9B,SAAS,qBAAqB;AAC9B,SAAS,oCAAoC;AAE7C,SAAS,+BAA+B;AACxC,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAE5B,MAAM,6BAA6B,KAAK,MAAM,OAAO,uBAAuB,CAAC;AAMtE,MAAM,UAAU;AAAA,EACrB,WAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACkB;AAClB,UAAM,EAAE,qBAAqB,wBAAwB,mBAAmB,IACtE,2BAA2B,GAAG;AAEhC,UAAM,4BAA4B,6BAA6B;AAC/D,UAAM,sBACJ,cAAc,KAAK,4BAA4B,OAAO;AAExD,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAiB,oBAAoB;AAAA,QACrC,YAAY,QAAQ;AAAA,QACpB,eAAe,QAAQ;AAAA,QAEvB,8BAAC,eAAY,KAAK,wBAChB,8BAAC,iBAAc,mBAAmB,eAC/B,6BAAmB,OAAO,IACzB;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK;AAAA,YACL,kBAAkB;AAAA;AAAA,UAFb,QAAQ;AAAA,QAGf,IAEA,oBAAC,eAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AASA,SAAS,2BAA2B,KAAmC;AACrE,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,sBAAsB,OAAO,IAAI,wBAAwB,CAAC;AAEhE,QAAM,yBAAyB,YAAY,CAAC,YAAkD;AAC5F,QAAI,kBAAkB,YAAY,MAAM;AACtC,0BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,CAAC,YAA4B;AAClE,sBAAkB,UAAU;AAE5B,wBAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,EACpD,GAAG,CAAC,CAAC;AAEL,sBAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,SAAO,EAAE,qBAAqB,wBAAwB,mBAAmB;AAC3E;AAEA,SAAS,KAAK,EAAE,SAAS,GAAsB;AAC7C,SAAO;AACT;AAEA,SAAS,gBAAgB;AACvB,SAAO,oBAAC,qBAAkB,MAAM,6BAA6B;AAC/D;","names":["Element"]}
+{"version":3,"sources":["../../../../../src/runtimes/react/components/Element.tsx"],"sourcesContent":["'use client'\n\nimport {\n  type ReactNode,\n  type Ref,\n  type PropsWithChildren,\n  forwardRef,\n  memo,\n  useCallback,\n  useImperativeHandle,\n  useRef,\n  lazy,\n} from 'react'\n\nimport {\n  isElementReference,\n  type Element as ElementDataOrRef,\n} from '../../../state/read-only-state'\n\nimport { FallbackComponent } from '../../../components/shared/FallbackComponent'\nimport { ErrorBoundary } from '../../../components/shared/ErrorBoundary'\n\nimport { useIsReadOnly } from '../hooks/use-is-read-only'\nimport { useIsRegisterElementDisabled } from '../hooks/use-disable-register-element'\n\nimport { ElementImperativeHandle } from '../element-imperative-handle'\nimport { FindDomNode } from '../find-dom-node'\n\nimport { ElementReference } from './ElementReference'\nimport { ElementData } from './ElementData'\n\nconst BuilderElementRegistration = lazy(() => import('./ElementRegistration'))\n\ntype Props = {\n  element: ElementDataOrRef\n}\n\nexport const Element = memo(\n  forwardRef(function Element(\n    { element }: Props,\n    ref: Ref<ElementImperativeHandle>,\n  ): ReactNode | null {\n    const { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef } =\n      useElementImperativeHandle(ref)\n\n    const isRegisterElementDisabled = useIsRegisterElementDisabled()\n    const ElementRegistration =\n      useIsReadOnly() || isRegisterElementDisabled ? NoOp : BuilderElementRegistration\n\n    const ErrorFallback = useCallback(\n      ({ details }: { details: string }) => (\n        <FallbackComponent\n          text={`Error rendering component`}\n          details={`Error rendering component '${element.type}':\\n${details}`}\n        />\n      ),\n      [element.type],\n    )\n\n    return (\n      <ElementRegistration\n        componentHandle={imperativeHandleRef.current}\n        elementKey={element.key}\n        componentType={element.type}\n      >\n        <FindDomNode ref={findDomNodeCallbackRef}>\n          <ErrorBoundary FallbackComponent={ErrorFallback}>\n            {isElementReference(element) ? (\n              <ElementReference\n                key={element.key}\n                ref={elementCallbackRef}\n                elementReference={element}\n              />\n            ) : (\n              <ElementData key={element.key} ref={elementCallbackRef} elementData={element} />\n            )}\n          </ErrorBoundary>\n        </FindDomNode>\n      </ElementRegistration>\n    )\n  }),\n)\n\n/**\n * Creates an `ElementImperativeHandle` instance that reports the element's DOM location to\n * the builder.\n *\n * Uses the element's attached ref when available; otherwise, falls back to React's\n * `findDOMNode` to locate the rendered DOM node.\n */\nfunction useElementImperativeHandle(ref: Ref<ElementImperativeHandle>) {\n  const useFindDomNodeRef = useRef(true)\n  const imperativeHandleRef = useRef(new ElementImperativeHandle())\n\n  const findDomNodeCallbackRef = useCallback((current: (() => Element | Text | null) | null) => {\n    if (useFindDomNodeRef.current === true) {\n      imperativeHandleRef.current.callback(() => current?.() ?? null)\n    }\n  }, [])\n\n  const elementCallbackRef = useCallback((current: unknown | null) => {\n    useFindDomNodeRef.current = false\n\n    imperativeHandleRef.current.callback(() => current)\n  }, [])\n\n  useImperativeHandle(ref, () => imperativeHandleRef.current, [])\n\n  return { imperativeHandleRef, findDomNodeCallbackRef, elementCallbackRef }\n}\n\nfunction NoOp({ children }: PropsWithChildren) {\n  return children\n}\n"],"mappings":";AAmDQ;AAjDR;AAAA,EAIE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP;AAAA,EACE;AAAA,OAEK;AAEP,SAAS,yBAAyB;AAClC,SAAS,qBAAqB;AAE9B,SAAS,qBAAqB;AAC9B,SAAS,oCAAoC;AAE7C,SAAS,+BAA+B;AACxC,SAAS,mBAAmB;AAE5B,SAAS,wBAAwB;AACjC,SAAS,mBAAmB;AAE5B,MAAM,6BAA6B,KAAK,MAAM,OAAO,uBAAuB,CAAC;AAMtE,MAAM,UAAU;AAAA,EACrB,WAAW,SAASA,SAClB,EAAE,QAAQ,GACV,KACkB;AAClB,UAAM,EAAE,qBAAqB,wBAAwB,mBAAmB,IACtE,2BAA2B,GAAG;AAEhC,UAAM,4BAA4B,6BAA6B;AAC/D,UAAM,sBACJ,cAAc,KAAK,4BAA4B,OAAO;AAExD,UAAM,gBAAgB;AAAA,MACpB,CAAC,EAAE,QAAQ,MACT;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,SAAS,8BAA8B,QAAQ,IAAI;AAAA,EAAO,OAAO;AAAA;AAAA,MACnE;AAAA,MAEF,CAAC,QAAQ,IAAI;AAAA,IACf;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,iBAAiB,oBAAoB;AAAA,QACrC,YAAY,QAAQ;AAAA,QACpB,eAAe,QAAQ;AAAA,QAEvB,8BAAC,eAAY,KAAK,wBAChB,8BAAC,iBAAc,mBAAmB,eAC/B,6BAAmB,OAAO,IACzB;AAAA,UAAC;AAAA;AAAA,YAEC,KAAK;AAAA,YACL,kBAAkB;AAAA;AAAA,UAFb,QAAQ;AAAA,QAGf,IAEA,oBAAC,eAA8B,KAAK,oBAAoB,aAAa,WAAnD,QAAQ,GAAoD,GAElF,GACF;AAAA;AAAA,IACF;AAAA,EAEJ,CAAC;AACH;AASA,SAAS,2BAA2B,KAAmC;AACrE,QAAM,oBAAoB,OAAO,IAAI;AACrC,QAAM,sBAAsB,OAAO,IAAI,wBAAwB,CAAC;AAEhE,QAAM,yBAAyB,YAAY,CAAC,YAAkD;AAC5F,QAAI,kBAAkB,YAAY,MAAM;AACtC,0BAAoB,QAAQ,SAAS,MAAM,UAAU,KAAK,IAAI;AAAA,IAChE;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,qBAAqB,YAAY,CAAC,YAA4B;AAClE,sBAAkB,UAAU;AAE5B,wBAAoB,QAAQ,SAAS,MAAM,OAAO;AAAA,EACpD,GAAG,CAAC,CAAC;AAEL,sBAAoB,KAAK,MAAM,oBAAoB,SAAS,CAAC,CAAC;AAE9D,SAAO,EAAE,qBAAqB,wBAAwB,mBAAmB;AAC3E;AAEA,SAAS,KAAK,EAAE,SAAS,GAAsB;AAC7C,SAAO;AACT;","names":["Element"]}

package/dist/types/components/shared/ErrorBoundary.d.ts

@@ -1,18 +1,19 @@
-import { Component, ElementType, ReactNode } from 'react';
+import { Component, type ElementType, type ReactNode } from 'react';
 type ErrorProps = {
-    FallbackComponent: ElementType;
+    FallbackComponent: ElementType<{
+        details: string;
+    }>;
     children: ReactNode;
 };
 type State = {
-    hasError: boolean;
+    hasError: false;
+} | {
+    hasError: true;
+    details: string;
 };
 export declare class ErrorBoundary extends Component<ErrorProps, State> {
-    static getDerivedStateFromError(): {
-        hasError: boolean;
-    };
-    state: {
-        hasError: boolean;
-    };
+    static getDerivedStateFromError(error: Error): State;
+    state: State;
     render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
 }
 export {};

package/dist/types/components/shared/ErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEzD,KAAK,UAAU,GAAG;IAChB,iBAAiB,EAAE,WAAW,CAAA;IAC9B,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,KAAK,KAAK,GAAG;IACX,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC;IAC7D,MAAM,CAAC,wBAAwB;;;IAI/B,KAAK;;MAAsB;IAE3B,MAAM;CAOP"}
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/components/shared/ErrorBoundary.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAA;AAEnE,KAAK,UAAU,GAAG;IAChB,iBAAiB,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACnD,QAAQ,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,KAAK,KAAK,GACN;IACE,QAAQ,EAAE,KAAK,CAAA;CAChB,GACD;IACE,QAAQ,EAAE,IAAI,CAAA;IACd,OAAO,EAAE,MAAM,CAAA;CAChB,CAAA;AAEL,qBAAa,aAAc,SAAQ,SAAS,CAAC,UAAU,EAAE,KAAK,CAAC;IAC7D,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAIpD,KAAK,EAAE,KAAK,CAAsB;IAElC,MAAM;CAQP"}

package/dist/types/components/shared/FallbackComponent/FallbackComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FallbackComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"names":[],"mappings":"AAIA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,iBAAiB,kGAgC5B,CAAA"}
+{"version":3,"file":"FallbackComponent.d.ts","sourceRoot":"","sources":["../../../../../src/components/shared/FallbackComponent/FallbackComponent.tsx"],"names":[],"mappings":"AAGA,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,iBAAiB,kGA4C5B,CAAA"}

package/dist/types/runtimes/react/components/Element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Element.d.ts","sourceRoot":"","sources":["../../../../../src/runtimes/react/components/Element.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,KAAK,OAAO,IAAI,gBAAgB,EACjC,MAAM,gCAAgC,CAAA;AAQvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAQtE,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,gBAAgB,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,OAAO,2KAkCnB,CAAA"}
+{"version":3,"file":"Element.d.ts","sourceRoot":"","sources":["../../../../../src/runtimes/react/components/Element.tsx"],"names":[],"mappings":"AAcA,OAAO,EAEL,KAAK,OAAO,IAAI,gBAAgB,EACjC,MAAM,gCAAgC,CAAA;AAQvC,OAAO,EAAE,uBAAuB,EAAE,MAAM,8BAA8B,CAAA;AAQtE,KAAK,KAAK,GAAG;IACX,OAAO,EAAE,gBAAgB,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,OAAO,2KA4CnB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makeswift/runtime",
-  "version": "0.29.0-canary.23",
+  "version": "0.29.0-canary.25",
   "license": "MIT",
   "repository": {
     "url": "makeswift/makeswift",
@@ -242,9 +242,9 @@
     "use-sync-external-store": "^1.5.0",
     "uuid": "^9.0.0",
     "zod": "^3.21.4",
+    "@makeswift/controls": "0.1.22-canary.6",
     "@makeswift/next-plugin": "0.6.1",
-    "@makeswift/prop-controllers": "0.4.16-canary.6",
-    "@makeswift/controls": "0.1.22-canary.6"
+    "@makeswift/prop-controllers": "0.4.16-canary.6"
   },
   "devDependencies": {
     "@graphql-codegen/add": "^3.1.0",