@makeswift/runtime 0.29.0-canary.24 → 0.29.0-canary.26

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.24"
+      "makeswift-runtime-version": "0.29.0-canary.26"
     });
   }
   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.24"
+      "makeswift-runtime-version": "0.29.0-canary.26"
     });
     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.24",
+    version: "0.29.0-canary.26",
     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/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/cjs/runtimes/react/components/preview-switcher/preview-toolbar.js

@@ -23,48 +23,203 @@ __export(preview_toolbar_exports, {
 module.exports = __toCommonJS(preview_toolbar_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-const makeswiftIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC";
 const styles = `
-.exit-preview-container {
+.floating {
   position: fixed;
   bottom: 16px;
   right: 16px;
   z-index: 2147483647;
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: #0f1225;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  box-shadow: 0 4px 12px 0 rgba(5, 12, 46, 0.15);
 }
 
-.exit-preview-button {
-  background: #2e2e2e;
-  padding: 10px 18px 10px 14px;
-  border: 0px;
-  border-radius: 32px;
-  color: #efefef;
-  box-shadow:
-    0 11px 40px 0 rgba(0, 0, 0, 0.25),
-    0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  transition: 150ms;
-  text-decoration: none;
+.preview-toolbar {
+  left: 16px;
+  gap: 24px;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 8px 8px 8px 16px;
 
   font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji';
-  font-size: 14px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateY(15px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-24px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(24px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-out-to-right {
+  to {
+    transform: translateX(24px);
+    opacity: 0;
+  }
+}
+
+.preview-toolbar.show {
+  animation: slide-in 200ms ease-out;
+}
+
+.preview-toolbar.expand {
+  animation: slide-in-from-right 200ms ease-out;
+}
+
+.preview-toolbar.collapse {
+  animation: slide-out-to-right 150ms ease-in forwards;
+}
+
+.preview-toolbar-collapsed {
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  padding: 0;
   cursor: pointer;
+  animation: slide-in-from-left 200ms ease-out;
+  transition: background 150ms;
+}
 
+.preview-toolbar-collapsed.show {
+  animation: slide-in 200ms ease-out;
+}
+
+.preview-toolbar-collapsed:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: 2px;
+}
+
+.message {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  color: #f2f3f8;
+}
+
+.message > .label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.actions {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 4px;
 }
 
-.exit-preview-button > .label {
-  transform: translateY(-1px);
+.toolbar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  border-radius: 6px;
+  transition: background 150ms;
+}
+
+.toolbar-button:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: -2px;
 }
 
-.exit-preview-container:hover > .exit-preview-button {
-  transform: translateY(-2px);
-  box-shadow:
-    0 15px 40px 0 rgba(0, 0, 0, 0.3),
-    0 6px 10px 0 rgba(0, 0, 0, 0.15);
+.preview-toolbar-collapsed:hover,
+.toolbar-button:hover {
+  background: #272a3b;
+}
+
+.view-live {
+  padding: 0 10px;
+  color: #ffffff;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.collapse-button {
+  width: 30px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.icon {
+  flex-shrink: 0;
 }
 `;
+function MakeswiftLogoIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className: "icon", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M17.9572 15.9364L19.8563 8.8487C20.1257 7.84225 19.839 6.76861 19.1033 6.03157L13.942 0.857616C13.2036 0.117245 12.126 -0.171453 11.1162 0.100615L4.05907 2.00044C3.05328 2.27117 2.26768 3.05744 1.99827 4.0639L0.0997811 11.151C-0.169626 12.1574 0.117076 13.2311 0.852791 13.9681L6.0141 19.1421C6.75248 19.8824 7.83011 20.1711 8.83989 19.8991L15.897 17.9992C16.9028 17.7285 17.6884 16.9422 17.9578 15.9358L17.9572 15.9364Z",
+        fill: "#EA3BAA"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "path",
+      {
+        d: "M12.8923 4.30537L11.1754 6.84777H12.4193C12.6981 6.84777 12.8697 7.15177 12.7253 7.39058L9.69999 12.3982C9.63546 12.5053 9.51905 12.5712 9.39399 12.5712H8.9523C8.79531 12.5712 8.68156 12.4228 8.72214 12.2712L9.59622 8.99438H8.49131C8.25517 8.99438 8.08421 8.77021 8.14607 8.54271L9.35807 4.09982C9.41462 3.89228 9.60287 3.74859 9.8184 3.74859H12.5963C12.883 3.74859 13.0533 4.06922 12.893 4.3067L12.8923 4.30537ZM9.71063 14.0014H8.15273C7.93587 14.0014 7.74562 14.1477 7.69107 14.3579L7.27931 15.9378C7.22011 16.1646 7.39107 16.3855 7.62522 16.3855H9.17913C9.39599 16.3855 9.58557 16.2391 9.64012 16.0296L10.0552 14.4491C10.1151 14.2222 9.94345 14.0007 9.7093 14.0007L9.71063 14.0014Z",
+        fill: "white"
+      }
+    )
+  ] });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: "icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "path",
+    {
+      d: "M3 3L9 9M9 3L3 9",
+      stroke: "#B8BAC7",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+const toolbarAnimationClassName = {
+  shown: "show",
+  collapsing: "collapse",
+  expanding: "expand"
+};
+const SHOWN_STORAGE_KEY = "makeswift-preview-toolbar-shown";
+function readStoredShown() {
+  try {
+    return window.sessionStorage.getItem(SHOWN_STORAGE_KEY) !== "false";
+  } catch {
+    return true;
+  }
+}
+function writeStoredShown(shown) {
+  try {
+    window.sessionStorage.setItem(SHOWN_STORAGE_KEY, String(shown));
+  } catch {
+  }
+}
 function PreviewToolbar() {
   const redirectLiveUrl = (0, import_react.useMemo)(() => {
     const currentUrl = new URL(window.location.href);
@@ -72,12 +227,66 @@ function PreviewToolbar() {
     currentUrl.searchParams.set("makeswift-redirect-live", encodeURIComponent(destination));
     return currentUrl.toString();
   }, []);
+  const [animationState, setAnimationState] = (0, import_react.useState)(
+    () => readStoredShown() ? "shown" : "initial-collapsed"
+  );
+  const expandButtonRef = (0, import_react.useRef)(null);
+  const collapseButtonRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (animationState === "collapsed")
+      expandButtonRef.current?.focus();
+    if (animationState === "expanding")
+      collapseButtonRef.current?.focus();
+  }, [animationState]);
+  const setShown = (shouldShow) => {
+    writeStoredShown(shouldShow);
+    setAnimationState(shouldShow ? "expanding" : "collapsing");
+  };
+  const handleAnimationEnd = () => {
+    if (animationState === "collapsing")
+      setAnimationState("collapsed");
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: styles } }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "exit-preview-container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", { className: "exit-preview-button", href: redirectLiveUrl, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: makeswiftIcon, alt: "Makeswift Logo", width: 18, height: 18 }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "Exit preview" })
-    ] }) })
+    animationState === "initial-collapsed" || animationState === "collapsed" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        ref: expandButtonRef,
+        type: "button",
+        className: `floating preview-toolbar-collapsed ${animationState === "initial-collapsed" ? "show" : ""}`,
+        "aria-label": "Expand preview toolbar",
+        onClick: () => setShown(true),
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MakeswiftLogoIcon, {})
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        className: `floating preview-toolbar ${toolbarAnimationClassName[animationState]}`,
+        role: "region",
+        "aria-label": "Preview mode",
+        onAnimationEnd: handleAnimationEnd,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "message", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MakeswiftLogoIcon, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "label", children: "You are in preview mode" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { className: "toolbar-button view-live", href: redirectLiveUrl, children: "View live" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                ref: collapseButtonRef,
+                type: "button",
+                className: "toolbar-button collapse-button",
+                "aria-label": "Collapse preview toolbar",
+                onClick: () => setShown(false),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
+              }
+            )
+          ] })
+        ]
+      }
+    )
   ] });
 }
 // Annotate the CommonJS export names for ESM import in node:

package/dist/cjs/runtimes/react/components/preview-switcher/preview-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nconst makeswiftIcon =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC'\n\nconst styles = `\n.exit-preview-container {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  z-index: 2147483647;\n}\n\n.exit-preview-button {\n  background: #2e2e2e;\n  padding: 10px 18px 10px 14px;\n  border: 0px;\n  border-radius: 32px;\n  color: #efefef;\n  box-shadow:\n    0 11px 40px 0 rgba(0, 0, 0, 0.25),\n    0 2px 10px 0 rgba(0, 0, 0, 0.12);\n  transition: 150ms;\n  text-decoration: none;\n\n  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n    'Segoe UI Emoji';\n  font-size: 14px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.exit-preview-button > .label {\n  transform: translateY(-1px);\n}\n\n.exit-preview-container:hover > .exit-preview-button {\n  transform: translateY(-2px);\n  box-shadow:\n    0 15px 40px 0 rgba(0, 0, 0, 0.3),\n    0 6px 10px 0 rgba(0, 0, 0, 0.15);\n}\n`\n\nexport function PreviewToolbar() {\n  const redirectLiveUrl = useMemo(() => {\n    const currentUrl = new URL(window.location.href)\n    const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`\n    currentUrl.searchParams.set('makeswift-redirect-live', encodeURIComponent(destination))\n    return currentUrl.toString()\n  }, [])\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: styles }} />\n      <div className=\"exit-preview-container\">\n        <a className=\"exit-preview-button\" href={redirectLiveUrl}>\n          <img src={makeswiftIcon} alt=\"Makeswift Logo\" width={18} height={18} />\n          <span className=\"label\">Exit preview</span>\n        </a>\n      </div>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAwDI;AAxDJ,mBAAwB;AAExB,MAAM,gBACJ;AAEF,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CR,SAAS,iBAAiB;AAC/B,QAAM,sBAAkB,sBAAQ,MAAM;AACpC,UAAM,aAAa,IAAI,IAAI,OAAO,SAAS,IAAI;AAC/C,UAAM,cAAc,GAAG,WAAW,QAAQ,GAAG,WAAW,MAAM,GAAG,WAAW,IAAI;AAChF,eAAW,aAAa,IAAI,2BAA2B,mBAAmB,WAAW,CAAC;AACtF,WAAO,WAAW,SAAS;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,SACE,4EACE;AAAA,gDAAC,WAAM,yBAAyB,EAAE,QAAQ,OAAO,GAAG;AAAA,IACpD,4CAAC,SAAI,WAAU,0BACb,uDAAC,OAAE,WAAU,uBAAsB,MAAM,iBACvC;AAAA,kDAAC,SAAI,KAAK,eAAe,KAAI,kBAAiB,OAAO,IAAI,QAAQ,IAAI;AAAA,MACrE,4CAAC,UAAK,WAAU,SAAQ,0BAAY;AAAA,OACtC,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nconst styles = `\n.floating {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  z-index: 2147483647;\n\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background: #0f1225;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 12px;\n  box-shadow: 0 4px 12px 0 rgba(5, 12, 46, 0.15);\n}\n\n.preview-toolbar {\n  left: 16px;\n  gap: 24px;\n  max-width: 600px;\n  margin: 0 auto;\n  padding: 8px 8px 8px 16px;\n\n  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n    'Segoe UI Emoji';\n  font-size: 13px;\n  line-height: 22px;\n}\n\n@keyframes slide-in {\n  from {\n    transform: translateY(15px);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-in-from-left {\n  from {\n    transform: translateX(-24px);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-in-from-right {\n  from {\n    transform: translateX(24px);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-out-to-right {\n  to {\n    transform: translateX(24px);\n    opacity: 0;\n  }\n}\n\n.preview-toolbar.show {\n  animation: slide-in 200ms ease-out;\n}\n\n.preview-toolbar.expand {\n  animation: slide-in-from-right 200ms ease-out;\n}\n\n.preview-toolbar.collapse {\n  animation: slide-out-to-right 150ms ease-in forwards;\n}\n\n.preview-toolbar-collapsed {\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  padding: 0;\n  cursor: pointer;\n  animation: slide-in-from-left 200ms ease-out;\n  transition: background 150ms;\n}\n\n.preview-toolbar-collapsed.show {\n  animation: slide-in 200ms ease-out;\n}\n\n.preview-toolbar-collapsed:focus-visible {\n  outline: 2px solid #ffffff;\n  outline-offset: 2px;\n}\n\n.message {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: #f2f3f8;\n}\n\n.message > .label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.actions {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 30px;\n  border-radius: 6px;\n  transition: background 150ms;\n}\n\n.toolbar-button:focus-visible {\n  outline: 2px solid #ffffff;\n  outline-offset: -2px;\n}\n\n.preview-toolbar-collapsed:hover,\n.toolbar-button:hover {\n  background: #272a3b;\n}\n\n.view-live {\n  padding: 0 10px;\n  color: #ffffff;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.collapse-button {\n  width: 30px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n}\n\n.icon {\n  flex-shrink: 0;\n}\n`\n\nfunction MakeswiftLogoIcon() {\n  return (\n    <svg className=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M17.9572 15.9364L19.8563 8.8487C20.1257 7.84225 19.839 6.76861 19.1033 6.03157L13.942 0.857616C13.2036 0.117245 12.126 -0.171453 11.1162 0.100615L4.05907 2.00044C3.05328 2.27117 2.26768 3.05744 1.99827 4.0639L0.0997811 11.151C-0.169626 12.1574 0.117076 13.2311 0.852791 13.9681L6.0141 19.1421C6.75248 19.8824 7.83011 20.1711 8.83989 19.8991L15.897 17.9992C16.9028 17.7285 17.6884 16.9422 17.9578 15.9358L17.9572 15.9364Z\"\n        fill=\"#EA3BAA\"\n      />\n      <path\n        d=\"M12.8923 4.30537L11.1754 6.84777H12.4193C12.6981 6.84777 12.8697 7.15177 12.7253 7.39058L9.69999 12.3982C9.63546 12.5053 9.51905 12.5712 9.39399 12.5712H8.9523C8.79531 12.5712 8.68156 12.4228 8.72214 12.2712L9.59622 8.99438H8.49131C8.25517 8.99438 8.08421 8.77021 8.14607 8.54271L9.35807 4.09982C9.41462 3.89228 9.60287 3.74859 9.8184 3.74859H12.5963C12.883 3.74859 13.0533 4.06922 12.893 4.3067L12.8923 4.30537ZM9.71063 14.0014H8.15273C7.93587 14.0014 7.74562 14.1477 7.69107 14.3579L7.27931 15.9378C7.22011 16.1646 7.39107 16.3855 7.62522 16.3855H9.17913C9.39599 16.3855 9.58557 16.2391 9.64012 16.0296L10.0552 14.4491C10.1151 14.2222 9.94345 14.0007 9.7093 14.0007L9.71063 14.0014Z\"\n        fill=\"white\"\n      />\n    </svg>\n  )\n}\n\nfunction CloseIcon() {\n  return (\n    <svg className=\"icon\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M3 3L9 9M9 3L3 9\"\n        stroke=\"#B8BAC7\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\ntype AnimationState = 'shown' | 'initial-collapsed' | 'collapsing' | 'collapsed' | 'expanding'\n\nconst toolbarAnimationClassName: Record<\n  Exclude<AnimationState, 'initial-collapsed' | 'collapsed'>,\n  string\n> = {\n  shown: 'show',\n  collapsing: 'collapse',\n  expanding: 'expand',\n}\n\nconst SHOWN_STORAGE_KEY = 'makeswift-preview-toolbar-shown'\n\nfunction readStoredShown(): boolean {\n  try {\n    // Throws a SecurityError if session storage is disabled\n    return window.sessionStorage.getItem(SHOWN_STORAGE_KEY) !== 'false'\n  } catch {\n    return true\n  }\n}\n\nfunction writeStoredShown(shown: boolean) {\n  try {\n    // Throws a SecurityError if session storage is disabled\n    window.sessionStorage.setItem(SHOWN_STORAGE_KEY, String(shown))\n  } catch {}\n}\n\nexport function PreviewToolbar() {\n  const redirectLiveUrl = useMemo(() => {\n    const currentUrl = new URL(window.location.href)\n    const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`\n    currentUrl.searchParams.set('makeswift-redirect-live', encodeURIComponent(destination))\n    return currentUrl.toString()\n  }, [])\n\n  const [animationState, setAnimationState] = useState<AnimationState>(() =>\n    readStoredShown() ? 'shown' : 'initial-collapsed',\n  )\n\n  const expandButtonRef = useRef<HTMLButtonElement>(null)\n  const collapseButtonRef = useRef<HTMLButtonElement>(null)\n\n  // Keep keyboard focus on the control that toggles back to the previous state.\n  useEffect(() => {\n    if (animationState === 'collapsed') expandButtonRef.current?.focus()\n    if (animationState === 'expanding') collapseButtonRef.current?.focus()\n  }, [animationState])\n\n  const setShown = (shouldShow: boolean) => {\n    writeStoredShown(shouldShow)\n    setAnimationState(shouldShow ? 'expanding' : 'collapsing')\n  }\n\n  const handleAnimationEnd = () => {\n    if (animationState === 'collapsing') setAnimationState('collapsed')\n  }\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: styles }} />\n      {animationState === 'initial-collapsed' || animationState === 'collapsed' ? (\n        <button\n          ref={expandButtonRef}\n          type=\"button\"\n          className={`floating preview-toolbar-collapsed ${animationState === 'initial-collapsed' ? 'show' : ''}`}\n          aria-label=\"Expand preview toolbar\"\n          onClick={() => setShown(true)}\n        >\n          <MakeswiftLogoIcon />\n        </button>\n      ) : (\n        <div\n          className={`floating preview-toolbar ${toolbarAnimationClassName[animationState]}`}\n          role=\"region\"\n          aria-label=\"Preview mode\"\n          onAnimationEnd={handleAnimationEnd}\n        >\n          <div className=\"message\">\n            <MakeswiftLogoIcon />\n            <span className=\"label\">You are in preview mode</span>\n          </div>\n          <div className=\"actions\">\n            <a className=\"toolbar-button view-live\" href={redirectLiveUrl}>\n              View live\n            </a>\n            <button\n              ref={collapseButtonRef}\n              type=\"button\"\n              className=\"toolbar-button collapse-button\"\n              aria-label=\"Collapse preview toolbar\"\n              onClick={() => setShown(false)}\n            >\n              <CloseIcon />\n            </button>\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n"],"mappings":"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","names":[]}

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.24"
+      "makeswift-runtime-version": "0.29.0-canary.26"
     });
   }
   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.24"
+      "makeswift-runtime-version": "0.29.0-canary.26"
     });
     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.24",
+    version: "0.29.0-canary.26",
     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/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/esm/runtimes/react/components/preview-switcher/preview-toolbar.js

@@ -1,47 +1,202 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
-const makeswiftIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC";
+import { useEffect, useMemo, useRef, useState } from "react";
 const styles = `
-.exit-preview-container {
+.floating {
   position: fixed;
   bottom: 16px;
   right: 16px;
   z-index: 2147483647;
+
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  background: #0f1225;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: 12px;
+  box-shadow: 0 4px 12px 0 rgba(5, 12, 46, 0.15);
 }
 
-.exit-preview-button {
-  background: #2e2e2e;
-  padding: 10px 18px 10px 14px;
-  border: 0px;
-  border-radius: 32px;
-  color: #efefef;
-  box-shadow:
-    0 11px 40px 0 rgba(0, 0, 0, 0.25),
-    0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  transition: 150ms;
-  text-decoration: none;
+.preview-toolbar {
+  left: 16px;
+  gap: 24px;
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 8px 8px 8px 16px;
 
   font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
     'Segoe UI Emoji';
-  font-size: 14px;
+  font-size: 13px;
+  line-height: 22px;
+}
+
+@keyframes slide-in {
+  from {
+    transform: translateY(15px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-24px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(24px);
+    opacity: 0;
+  }
+}
+
+@keyframes slide-out-to-right {
+  to {
+    transform: translateX(24px);
+    opacity: 0;
+  }
+}
+
+.preview-toolbar.show {
+  animation: slide-in 200ms ease-out;
+}
+
+.preview-toolbar.expand {
+  animation: slide-in-from-right 200ms ease-out;
+}
+
+.preview-toolbar.collapse {
+  animation: slide-out-to-right 150ms ease-in forwards;
+}
+
+.preview-toolbar-collapsed {
+  justify-content: center;
+  width: 48px;
+  height: 48px;
+  padding: 0;
   cursor: pointer;
+  animation: slide-in-from-left 200ms ease-out;
+  transition: background 150ms;
+}
+
+.preview-toolbar-collapsed.show {
+  animation: slide-in 200ms ease-out;
+}
+
+.preview-toolbar-collapsed:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: 2px;
+}
 
+.message {
+  flex: 1;
+  min-width: 0;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 12px;
+  color: #f2f3f8;
 }
 
-.exit-preview-button > .label {
-  transform: translateY(-1px);
+.message > .label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.exit-preview-container:hover > .exit-preview-button {
-  transform: translateY(-2px);
-  box-shadow:
-    0 15px 40px 0 rgba(0, 0, 0, 0.3),
-    0 6px 10px 0 rgba(0, 0, 0, 0.15);
+.actions {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.toolbar-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  border-radius: 6px;
+  transition: background 150ms;
+}
+
+.toolbar-button:focus-visible {
+  outline: 2px solid #ffffff;
+  outline-offset: -2px;
+}
+
+.preview-toolbar-collapsed:hover,
+.toolbar-button:hover {
+  background: #272a3b;
+}
+
+.view-live {
+  padding: 0 10px;
+  color: #ffffff;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.collapse-button {
+  width: 30px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+}
+
+.icon {
+  flex-shrink: 0;
 }
 `;
+function MakeswiftLogoIcon() {
+  return /* @__PURE__ */ jsxs("svg", { className: "icon", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M17.9572 15.9364L19.8563 8.8487C20.1257 7.84225 19.839 6.76861 19.1033 6.03157L13.942 0.857616C13.2036 0.117245 12.126 -0.171453 11.1162 0.100615L4.05907 2.00044C3.05328 2.27117 2.26768 3.05744 1.99827 4.0639L0.0997811 11.151C-0.169626 12.1574 0.117076 13.2311 0.852791 13.9681L6.0141 19.1421C6.75248 19.8824 7.83011 20.1711 8.83989 19.8991L15.897 17.9992C16.9028 17.7285 17.6884 16.9422 17.9578 15.9358L17.9572 15.9364Z",
+        fill: "#EA3BAA"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12.8923 4.30537L11.1754 6.84777H12.4193C12.6981 6.84777 12.8697 7.15177 12.7253 7.39058L9.69999 12.3982C9.63546 12.5053 9.51905 12.5712 9.39399 12.5712H8.9523C8.79531 12.5712 8.68156 12.4228 8.72214 12.2712L9.59622 8.99438H8.49131C8.25517 8.99438 8.08421 8.77021 8.14607 8.54271L9.35807 4.09982C9.41462 3.89228 9.60287 3.74859 9.8184 3.74859H12.5963C12.883 3.74859 13.0533 4.06922 12.893 4.3067L12.8923 4.30537ZM9.71063 14.0014H8.15273C7.93587 14.0014 7.74562 14.1477 7.69107 14.3579L7.27931 15.9378C7.22011 16.1646 7.39107 16.3855 7.62522 16.3855H9.17913C9.39599 16.3855 9.58557 16.2391 9.64012 16.0296L10.0552 14.4491C10.1151 14.2222 9.94345 14.0007 9.7093 14.0007L9.71063 14.0014Z",
+        fill: "white"
+      }
+    )
+  ] });
+}
+function CloseIcon() {
+  return /* @__PURE__ */ jsx("svg", { className: "icon", width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M3 3L9 9M9 3L3 9",
+      stroke: "#B8BAC7",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+const toolbarAnimationClassName = {
+  shown: "show",
+  collapsing: "collapse",
+  expanding: "expand"
+};
+const SHOWN_STORAGE_KEY = "makeswift-preview-toolbar-shown";
+function readStoredShown() {
+  try {
+    return window.sessionStorage.getItem(SHOWN_STORAGE_KEY) !== "false";
+  } catch {
+    return true;
+  }
+}
+function writeStoredShown(shown) {
+  try {
+    window.sessionStorage.setItem(SHOWN_STORAGE_KEY, String(shown));
+  } catch {
+  }
+}
 function PreviewToolbar() {
   const redirectLiveUrl = useMemo(() => {
     const currentUrl = new URL(window.location.href);
@@ -49,12 +204,66 @@ function PreviewToolbar() {
     currentUrl.searchParams.set("makeswift-redirect-live", encodeURIComponent(destination));
     return currentUrl.toString();
   }, []);
+  const [animationState, setAnimationState] = useState(
+    () => readStoredShown() ? "shown" : "initial-collapsed"
+  );
+  const expandButtonRef = useRef(null);
+  const collapseButtonRef = useRef(null);
+  useEffect(() => {
+    if (animationState === "collapsed")
+      expandButtonRef.current?.focus();
+    if (animationState === "expanding")
+      collapseButtonRef.current?.focus();
+  }, [animationState]);
+  const setShown = (shouldShow) => {
+    writeStoredShown(shouldShow);
+    setAnimationState(shouldShow ? "expanding" : "collapsing");
+  };
+  const handleAnimationEnd = () => {
+    if (animationState === "collapsing")
+      setAnimationState("collapsed");
+  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { dangerouslySetInnerHTML: { __html: styles } }),
-    /* @__PURE__ */ jsx("div", { className: "exit-preview-container", children: /* @__PURE__ */ jsxs("a", { className: "exit-preview-button", href: redirectLiveUrl, children: [
-      /* @__PURE__ */ jsx("img", { src: makeswiftIcon, alt: "Makeswift Logo", width: 18, height: 18 }),
-      /* @__PURE__ */ jsx("span", { className: "label", children: "Exit preview" })
-    ] }) })
+    animationState === "initial-collapsed" || animationState === "collapsed" ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: expandButtonRef,
+        type: "button",
+        className: `floating preview-toolbar-collapsed ${animationState === "initial-collapsed" ? "show" : ""}`,
+        "aria-label": "Expand preview toolbar",
+        onClick: () => setShown(true),
+        children: /* @__PURE__ */ jsx(MakeswiftLogoIcon, {})
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `floating preview-toolbar ${toolbarAnimationClassName[animationState]}`,
+        role: "region",
+        "aria-label": "Preview mode",
+        onAnimationEnd: handleAnimationEnd,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "message", children: [
+            /* @__PURE__ */ jsx(MakeswiftLogoIcon, {}),
+            /* @__PURE__ */ jsx("span", { className: "label", children: "You are in preview mode" })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "actions", children: [
+            /* @__PURE__ */ jsx("a", { className: "toolbar-button view-live", href: redirectLiveUrl, children: "View live" }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: collapseButtonRef,
+                type: "button",
+                className: "toolbar-button collapse-button",
+                "aria-label": "Collapse preview toolbar",
+                onClick: () => setShown(false),
+                children: /* @__PURE__ */ jsx(CloseIcon, {})
+              }
+            )
+          ] })
+        ]
+      }
+    )
   ] });
 }
 export {

package/dist/esm/runtimes/react/components/preview-switcher/preview-toolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"sourcesContent":["import { useMemo } from 'react'\n\nconst makeswiftIcon =\n  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABcRAAAXEQHKJvM/AAABjElEQVRYhc2XzU3EMBCFB8TddAAXn6EE6GCpgNABZ1/IXnymBOgAOmA7YM8+ABVsXEHQQFaKQryeN3Yk3ilKJtEnv/nLUd/3pFG0riGi88yrnQn+UfJ5FUi0riWiB2H4nQn+KRd0DFP8agXEfkqCYJBoHdtxIQxfm+DfFgEhoith3NYE30o/qgGR2BJB+xY7kdYEL8oNFUi0jiFMJuxVWrJqEMFxsyUNCsE6AeNztvBp7aJ143vXksoRnwhYtmNdSoIQa6RlO9YXEWW7KgoCleOgxgTf1QZBT+RZ2lXFING6UxCCq+ceeUE8fYdknY599v9sJvzGBP+yCEgC7GPmETc0OJ+0awAlkhe2pAbIXAeFZ8xe2g2Nk3c3ub0xwWt6zY9qbmiqGVMbZK21ZC/YmhlbeBMTzZNDQqcvDb1kM1x32iqZSt1HaqukfKvq34BAOTLsrH+ETNmUkKHHA+428RgeclPVWozeSyAI2EdWB34jtqXNTAySOY3i/KgFIlqOa4GkFmBegorzg4joG07he/M7zl6jAAAAAElFTkSuQmCC'\n\nconst styles = `\n.exit-preview-container {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  z-index: 2147483647;\n}\n\n.exit-preview-button {\n  background: #2e2e2e;\n  padding: 10px 18px 10px 14px;\n  border: 0px;\n  border-radius: 32px;\n  color: #efefef;\n  box-shadow:\n    0 11px 40px 0 rgba(0, 0, 0, 0.25),\n    0 2px 10px 0 rgba(0, 0, 0, 0.12);\n  transition: 150ms;\n  text-decoration: none;\n\n  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n    'Segoe UI Emoji';\n  font-size: 14px;\n  cursor: pointer;\n\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n\n.exit-preview-button > .label {\n  transform: translateY(-1px);\n}\n\n.exit-preview-container:hover > .exit-preview-button {\n  transform: translateY(-2px);\n  box-shadow:\n    0 15px 40px 0 rgba(0, 0, 0, 0.3),\n    0 6px 10px 0 rgba(0, 0, 0, 0.15);\n}\n`\n\nexport function PreviewToolbar() {\n  const redirectLiveUrl = useMemo(() => {\n    const currentUrl = new URL(window.location.href)\n    const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`\n    currentUrl.searchParams.set('makeswift-redirect-live', encodeURIComponent(destination))\n    return currentUrl.toString()\n  }, [])\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: styles }} />\n      <div className=\"exit-preview-container\">\n        <a className=\"exit-preview-button\" href={redirectLiveUrl}>\n          <img src={makeswiftIcon} alt=\"Makeswift Logo\" width={18} height={18} />\n          <span className=\"label\">Exit preview</span>\n        </a>\n      </div>\n    </>\n  )\n}\n"],"mappings":"AAwDI,mBACE,KAEE,YAHJ;AAxDJ,SAAS,eAAe;AAExB,MAAM,gBACJ;AAEF,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CR,SAAS,iBAAiB;AAC/B,QAAM,kBAAkB,QAAQ,MAAM;AACpC,UAAM,aAAa,IAAI,IAAI,OAAO,SAAS,IAAI;AAC/C,UAAM,cAAc,GAAG,WAAW,QAAQ,GAAG,WAAW,MAAM,GAAG,WAAW,IAAI;AAChF,eAAW,aAAa,IAAI,2BAA2B,mBAAmB,WAAW,CAAC;AACtF,WAAO,WAAW,SAAS;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,SACE,iCACE;AAAA,wBAAC,WAAM,yBAAyB,EAAE,QAAQ,OAAO,GAAG;AAAA,IACpD,oBAAC,SAAI,WAAU,0BACb,+BAAC,OAAE,WAAU,uBAAsB,MAAM,iBACvC;AAAA,0BAAC,SAAI,KAAK,eAAe,KAAI,kBAAiB,OAAO,IAAI,QAAQ,IAAI;AAAA,MACrE,oBAAC,UAAK,WAAU,SAAQ,0BAAY;AAAA,OACtC,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef, useState } from 'react'\n\nconst styles = `\n.floating {\n  position: fixed;\n  bottom: 16px;\n  right: 16px;\n  z-index: 2147483647;\n\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  background: #0f1225;\n  border: 1px solid rgba(255, 255, 255, 0.15);\n  border-radius: 12px;\n  box-shadow: 0 4px 12px 0 rgba(5, 12, 46, 0.15);\n}\n\n.preview-toolbar {\n  left: 16px;\n  gap: 24px;\n  max-width: 600px;\n  margin: 0 auto;\n  padding: 8px 8px 8px 16px;\n\n  font-family: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',\n    'Segoe UI Emoji';\n  font-size: 13px;\n  line-height: 22px;\n}\n\n@keyframes slide-in {\n  from {\n    transform: translateY(15px);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-in-from-left {\n  from {\n    transform: translateX(-24px);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-in-from-right {\n  from {\n    transform: translateX(24px);\n    opacity: 0;\n  }\n}\n\n@keyframes slide-out-to-right {\n  to {\n    transform: translateX(24px);\n    opacity: 0;\n  }\n}\n\n.preview-toolbar.show {\n  animation: slide-in 200ms ease-out;\n}\n\n.preview-toolbar.expand {\n  animation: slide-in-from-right 200ms ease-out;\n}\n\n.preview-toolbar.collapse {\n  animation: slide-out-to-right 150ms ease-in forwards;\n}\n\n.preview-toolbar-collapsed {\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  padding: 0;\n  cursor: pointer;\n  animation: slide-in-from-left 200ms ease-out;\n  transition: background 150ms;\n}\n\n.preview-toolbar-collapsed.show {\n  animation: slide-in 200ms ease-out;\n}\n\n.preview-toolbar-collapsed:focus-visible {\n  outline: 2px solid #ffffff;\n  outline-offset: 2px;\n}\n\n.message {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  color: #f2f3f8;\n}\n\n.message > .label {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.actions {\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.toolbar-button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 30px;\n  border-radius: 6px;\n  transition: background 150ms;\n}\n\n.toolbar-button:focus-visible {\n  outline: 2px solid #ffffff;\n  outline-offset: -2px;\n}\n\n.preview-toolbar-collapsed:hover,\n.toolbar-button:hover {\n  background: #272a3b;\n}\n\n.view-live {\n  padding: 0 10px;\n  color: #ffffff;\n  font-weight: 600;\n  text-decoration: none;\n}\n\n.collapse-button {\n  width: 30px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  cursor: pointer;\n}\n\n.icon {\n  flex-shrink: 0;\n}\n`\n\nfunction MakeswiftLogoIcon() {\n  return (\n    <svg className=\"icon\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M17.9572 15.9364L19.8563 8.8487C20.1257 7.84225 19.839 6.76861 19.1033 6.03157L13.942 0.857616C13.2036 0.117245 12.126 -0.171453 11.1162 0.100615L4.05907 2.00044C3.05328 2.27117 2.26768 3.05744 1.99827 4.0639L0.0997811 11.151C-0.169626 12.1574 0.117076 13.2311 0.852791 13.9681L6.0141 19.1421C6.75248 19.8824 7.83011 20.1711 8.83989 19.8991L15.897 17.9992C16.9028 17.7285 17.6884 16.9422 17.9578 15.9358L17.9572 15.9364Z\"\n        fill=\"#EA3BAA\"\n      />\n      <path\n        d=\"M12.8923 4.30537L11.1754 6.84777H12.4193C12.6981 6.84777 12.8697 7.15177 12.7253 7.39058L9.69999 12.3982C9.63546 12.5053 9.51905 12.5712 9.39399 12.5712H8.9523C8.79531 12.5712 8.68156 12.4228 8.72214 12.2712L9.59622 8.99438H8.49131C8.25517 8.99438 8.08421 8.77021 8.14607 8.54271L9.35807 4.09982C9.41462 3.89228 9.60287 3.74859 9.8184 3.74859H12.5963C12.883 3.74859 13.0533 4.06922 12.893 4.3067L12.8923 4.30537ZM9.71063 14.0014H8.15273C7.93587 14.0014 7.74562 14.1477 7.69107 14.3579L7.27931 15.9378C7.22011 16.1646 7.39107 16.3855 7.62522 16.3855H9.17913C9.39599 16.3855 9.58557 16.2391 9.64012 16.0296L10.0552 14.4491C10.1151 14.2222 9.94345 14.0007 9.7093 14.0007L9.71063 14.0014Z\"\n        fill=\"white\"\n      />\n    </svg>\n  )\n}\n\nfunction CloseIcon() {\n  return (\n    <svg className=\"icon\" width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n      <path\n        d=\"M3 3L9 9M9 3L3 9\"\n        stroke=\"#B8BAC7\"\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\ntype AnimationState = 'shown' | 'initial-collapsed' | 'collapsing' | 'collapsed' | 'expanding'\n\nconst toolbarAnimationClassName: Record<\n  Exclude<AnimationState, 'initial-collapsed' | 'collapsed'>,\n  string\n> = {\n  shown: 'show',\n  collapsing: 'collapse',\n  expanding: 'expand',\n}\n\nconst SHOWN_STORAGE_KEY = 'makeswift-preview-toolbar-shown'\n\nfunction readStoredShown(): boolean {\n  try {\n    // Throws a SecurityError if session storage is disabled\n    return window.sessionStorage.getItem(SHOWN_STORAGE_KEY) !== 'false'\n  } catch {\n    return true\n  }\n}\n\nfunction writeStoredShown(shown: boolean) {\n  try {\n    // Throws a SecurityError if session storage is disabled\n    window.sessionStorage.setItem(SHOWN_STORAGE_KEY, String(shown))\n  } catch {}\n}\n\nexport function PreviewToolbar() {\n  const redirectLiveUrl = useMemo(() => {\n    const currentUrl = new URL(window.location.href)\n    const destination = `${currentUrl.pathname}${currentUrl.search}${currentUrl.hash}`\n    currentUrl.searchParams.set('makeswift-redirect-live', encodeURIComponent(destination))\n    return currentUrl.toString()\n  }, [])\n\n  const [animationState, setAnimationState] = useState<AnimationState>(() =>\n    readStoredShown() ? 'shown' : 'initial-collapsed',\n  )\n\n  const expandButtonRef = useRef<HTMLButtonElement>(null)\n  const collapseButtonRef = useRef<HTMLButtonElement>(null)\n\n  // Keep keyboard focus on the control that toggles back to the previous state.\n  useEffect(() => {\n    if (animationState === 'collapsed') expandButtonRef.current?.focus()\n    if (animationState === 'expanding') collapseButtonRef.current?.focus()\n  }, [animationState])\n\n  const setShown = (shouldShow: boolean) => {\n    writeStoredShown(shouldShow)\n    setAnimationState(shouldShow ? 'expanding' : 'collapsing')\n  }\n\n  const handleAnimationEnd = () => {\n    if (animationState === 'collapsing') setAnimationState('collapsed')\n  }\n\n  return (\n    <>\n      <style dangerouslySetInnerHTML={{ __html: styles }} />\n      {animationState === 'initial-collapsed' || animationState === 'collapsed' ? (\n        <button\n          ref={expandButtonRef}\n          type=\"button\"\n          className={`floating preview-toolbar-collapsed ${animationState === 'initial-collapsed' ? 'show' : ''}`}\n          aria-label=\"Expand preview toolbar\"\n          onClick={() => setShown(true)}\n        >\n          <MakeswiftLogoIcon />\n        </button>\n      ) : (\n        <div\n          className={`floating preview-toolbar ${toolbarAnimationClassName[animationState]}`}\n          role=\"region\"\n          aria-label=\"Preview mode\"\n          onAnimationEnd={handleAnimationEnd}\n        >\n          <div className=\"message\">\n            <MakeswiftLogoIcon />\n            <span className=\"label\">You are in preview mode</span>\n          </div>\n          <div className=\"actions\">\n            <a className=\"toolbar-button view-live\" href={redirectLiveUrl}>\n              View live\n            </a>\n            <button\n              ref={collapseButtonRef}\n              type=\"button\"\n              className=\"toolbar-button collapse-button\"\n              aria-label=\"Collapse preview toolbar\"\n              onClick={() => setShown(false)}\n            >\n              <CloseIcon />\n            </button>\n          </div>\n        </div>\n      )}\n    </>\n  )\n}\n"],"mappings":"AAyJI,SAuFA,UAtFE,KADF;AAzJJ,SAAS,WAAW,SAAS,QAAQ,gBAAgB;AAErD,MAAM,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqJf,SAAS,oBAAoB;AAC3B,SACE,qBAAC,SAAI,WAAU,QAAO,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACvF;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC,GAAE;AAAA,QACF,MAAK;AAAA;AAAA,IACP;AAAA,KACF;AAEJ;AAEA,SAAS,YAAY;AACnB,SACE,oBAAC,SAAI,WAAU,QAAO,OAAM,MAAK,QAAO,MAAK,SAAQ,aAAY,MAAK,QAAO,eAAY,QACvF;AAAA,IAAC;AAAA;AAAA,MACC,GAAE;AAAA,MACF,QAAO;AAAA,MACP,aAAY;AAAA,MACZ,eAAc;AAAA,MACd,gBAAe;AAAA;AAAA,EACjB,GACF;AAEJ;AAIA,MAAM,4BAGF;AAAA,EACF,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,WAAW;AACb;AAEA,MAAM,oBAAoB;AAE1B,SAAS,kBAA2B;AAClC,MAAI;AAEF,WAAO,OAAO,eAAe,QAAQ,iBAAiB,MAAM;AAAA,EAC9D,QAAQ;AACN,WAAO;AAAA,EACT;AACF;AAEA,SAAS,iBAAiB,OAAgB;AACxC,MAAI;AAEF,WAAO,eAAe,QAAQ,mBAAmB,OAAO,KAAK,CAAC;AAAA,EAChE,QAAQ;AAAA,EAAC;AACX;AAEO,SAAS,iBAAiB;AAC/B,QAAM,kBAAkB,QAAQ,MAAM;AACpC,UAAM,aAAa,IAAI,IAAI,OAAO,SAAS,IAAI;AAC/C,UAAM,cAAc,GAAG,WAAW,QAAQ,GAAG,WAAW,MAAM,GAAG,WAAW,IAAI;AAChF,eAAW,aAAa,IAAI,2BAA2B,mBAAmB,WAAW,CAAC;AACtF,WAAO,WAAW,SAAS;AAAA,EAC7B,GAAG,CAAC,CAAC;AAEL,QAAM,CAAC,gBAAgB,iBAAiB,IAAI;AAAA,IAAyB,MACnE,gBAAgB,IAAI,UAAU;AAAA,EAChC;AAEA,QAAM,kBAAkB,OAA0B,IAAI;AACtD,QAAM,oBAAoB,OAA0B,IAAI;AAGxD,YAAU,MAAM;AACd,QAAI,mBAAmB;AAAa,sBAAgB,SAAS,MAAM;AACnE,QAAI,mBAAmB;AAAa,wBAAkB,SAAS,MAAM;AAAA,EACvE,GAAG,CAAC,cAAc,CAAC;AAEnB,QAAM,WAAW,CAAC,eAAwB;AACxC,qBAAiB,UAAU;AAC3B,sBAAkB,aAAa,cAAc,YAAY;AAAA,EAC3D;AAEA,QAAM,qBAAqB,MAAM;AAC/B,QAAI,mBAAmB;AAAc,wBAAkB,WAAW;AAAA,EACpE;AAEA,SACE,iCACE;AAAA,wBAAC,WAAM,yBAAyB,EAAE,QAAQ,OAAO,GAAG;AAAA,IACnD,mBAAmB,uBAAuB,mBAAmB,cAC5D;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,MAAK;AAAA,QACL,WAAW,sCAAsC,mBAAmB,sBAAsB,SAAS,EAAE;AAAA,QACrG,cAAW;AAAA,QACX,SAAS,MAAM,SAAS,IAAI;AAAA,QAE5B,8BAAC,qBAAkB;AAAA;AAAA,IACrB,IAEA;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,4BAA4B,0BAA0B,cAAc,CAAC;AAAA,QAChF,MAAK;AAAA,QACL,cAAW;AAAA,QACX,gBAAgB;AAAA,QAEhB;AAAA,+BAAC,SAAI,WAAU,WACb;AAAA,gCAAC,qBAAkB;AAAA,YACnB,oBAAC,UAAK,WAAU,SAAQ,qCAAuB;AAAA,aACjD;AAAA,UACA,qBAAC,SAAI,WAAU,WACb;AAAA,gCAAC,OAAE,WAAU,4BAA2B,MAAM,iBAAiB,uBAE/D;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,KAAK;AAAA,gBACL,MAAK;AAAA,gBACL,WAAU;AAAA,gBACV,cAAW;AAAA,gBACX,SAAS,MAAM,SAAS,KAAK;AAAA,gBAE7B,8BAAC,aAAU;AAAA;AAAA,YACb;AAAA,aACF;AAAA;AAAA;AAAA,IACF;AAAA,KAEJ;AAEJ;","names":[]}

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/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/dist/types/runtimes/react/components/preview-switcher/preview-toolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preview-toolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"names":[],"mappings":"AA+CA,wBAAgB,cAAc,4CAmB7B"}
+{"version":3,"file":"preview-toolbar.d.ts","sourceRoot":"","sources":["../../../../../../src/runtimes/react/components/preview-switcher/preview-toolbar.tsx"],"names":[],"mappings":"AAiNA,wBAAgB,cAAc,4CAwE7B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@makeswift/runtime",
-  "version": "0.29.0-canary.24",
+  "version": "0.29.0-canary.26",
   "license": "MIT",
   "repository": {
     "url": "makeswift/makeswift",