@wordpress/boot 0.1.1-next.2f1c7c01b.0 → 0.2.0

package/build-module/components/app/index.js

@@ -2,13 +2,15 @@
 import { createRoot, StrictMode } from "@wordpress/element";
 import { dispatch, useSelect } from "@wordpress/data";
 import Router from "./router";
+import RootSinglePage from "../root/single-page";
 import { store } from "../../store";
 import { jsx } from "react/jsx-runtime";
-function App() {
+function App({ rootComponent }) {
   const routes = useSelect((select) => select(store).getRoutes(), []);
-  return /* @__PURE__ */ jsx(Router, { routes });
+  return /* @__PURE__ */ jsx(Router, { routes, rootComponent });
 }
 async function init({
+  mountId,
   menuItems,
   routes
 }) {
@@ -18,7 +20,7 @@ async function init({
   (routes ?? []).forEach((route) => {
     dispatch(store).registerRoute(route);
   });
-  const rootElement = document.getElementById("gutenberg-boot-app");
+  const rootElement = document.getElementById(mountId);
   if (rootElement) {
     const root = createRoot(rootElement);
     root.render(
@@ -26,7 +28,23 @@ async function init({
     );
   }
 }
+async function initSinglePage({
+  mountId,
+  routes
+}) {
+  (routes ?? []).forEach((route) => {
+    dispatch(store).registerRoute(route);
+  });
+  const rootElement = document.getElementById(mountId);
+  if (rootElement) {
+    const root = createRoot(rootElement);
+    root.render(
+      /* @__PURE__ */ jsx(StrictMode, { children: /* @__PURE__ */ jsx(App, { rootComponent: RootSinglePage }) })
+    );
+  }
+}
 export {
-  init
+  init,
+  initSinglePage
 };
 //# sourceMappingURL=index.js.map

package/build-module/components/app/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/app/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createRoot, StrictMode } from '@wordpress/element';\nimport { dispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport Router from './router';\nimport { store } from '../../store';\nimport type { MenuItem, Route } from '../../store/types';\n\nfunction App() {\n\tconst routes = useSelect( ( select ) => select( store ).getRoutes(), [] );\n\n\treturn <Router routes={ routes } />;\n}\n\nexport async function init( {\n\tmenuItems,\n\troutes,\n}: {\n\tmenuItems?: MenuItem[];\n\troutes?: Route[];\n} ) {\n\t( menuItems ?? [] ).forEach( ( menuItem ) => {\n\t\tdispatch( store ).registerMenuItem( menuItem.id, menuItem );\n\t} );\n\n\t( routes ?? [] ).forEach( ( route ) => {\n\t\tdispatch( store ).registerRoute( route );\n\t} );\n\n\t// Render the app\n\tconst rootElement = document.getElementById( 'gutenberg-boot-app' );\n\tif ( rootElement ) {\n\t\tconst root = createRoot( rootElement );\n\t\troot.render(\n\t\t\t<StrictMode>\n\t\t\t\t<App />\n\t\t\t</StrictMode>\n\t\t);\n\t}\n}\n"],
-  "mappings": ";AAGA,SAAS,YAAY,kBAAkB;AACvC,SAAS,UAAU,iBAAiB;AAKpC,OAAO,YAAY;AACnB,SAAS,aAAa;AAMd;AAHR,SAAS,MAAM;AACd,QAAM,SAAS,UAAW,CAAE,WAAY,OAAQ,KAAM,EAAE,UAAU,GAAG,CAAC,CAAE;AAExE,SAAO,oBAAC,UAAO,QAAkB;AAClC;AAEA,eAAsB,KAAM;AAAA,EAC3B;AAAA,EACA;AACD,GAGI;AACH,GAAE,aAAa,CAAC,GAAI,QAAS,CAAE,aAAc;AAC5C,aAAU,KAAM,EAAE,iBAAkB,SAAS,IAAI,QAAS;AAAA,EAC3D,CAAE;AAEF,GAAE,UAAU,CAAC,GAAI,QAAS,CAAE,UAAW;AACtC,aAAU,KAAM,EAAE,cAAe,KAAM;AAAA,EACxC,CAAE;AAGF,QAAM,cAAc,SAAS,eAAgB,oBAAqB;AAClE,MAAK,aAAc;AAClB,UAAM,OAAO,WAAY,WAAY;AACrC,SAAK;AAAA,MACJ,oBAAC,cACA,8BAAC,OAAI,GACN;AAAA,IACD;AAAA,EACD;AACD;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createRoot, StrictMode, type ComponentType } from '@wordpress/element';\nimport { dispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport Router from './router';\nimport RootSinglePage from '../root/single-page';\nimport { store } from '../../store';\nimport type { MenuItem, Route } from '../../store/types';\n\nfunction App( { rootComponent }: { rootComponent?: ComponentType } ) {\n\tconst routes = useSelect( ( select ) => select( store ).getRoutes(), [] );\n\n\treturn <Router routes={ routes } rootComponent={ rootComponent } />;\n}\n\nexport async function init( {\n\tmountId,\n\tmenuItems,\n\troutes,\n}: {\n\tmountId: string;\n\tmenuItems?: MenuItem[];\n\troutes?: Route[];\n} ) {\n\t( menuItems ?? [] ).forEach( ( menuItem ) => {\n\t\tdispatch( store ).registerMenuItem( menuItem.id, menuItem );\n\t} );\n\n\t( routes ?? [] ).forEach( ( route ) => {\n\t\tdispatch( store ).registerRoute( route );\n\t} );\n\n\t// Render the app\n\tconst rootElement = document.getElementById( mountId );\n\tif ( rootElement ) {\n\t\tconst root = createRoot( rootElement );\n\t\troot.render(\n\t\t\t<StrictMode>\n\t\t\t\t<App />\n\t\t\t</StrictMode>\n\t\t);\n\t}\n}\n\nexport async function initSinglePage( {\n\tmountId,\n\troutes,\n}: {\n\tmountId: string;\n\troutes?: Route[];\n} ) {\n\t( routes ?? [] ).forEach( ( route ) => {\n\t\tdispatch( store ).registerRoute( route );\n\t} );\n\n\t// Render the app without sidebar\n\tconst rootElement = document.getElementById( mountId );\n\tif ( rootElement ) {\n\t\tconst root = createRoot( rootElement );\n\t\troot.render(\n\t\t\t<StrictMode>\n\t\t\t\t<App rootComponent={ RootSinglePage } />\n\t\t\t</StrictMode>\n\t\t);\n\t}\n}\n"],
+  "mappings": ";AAGA,SAAS,YAAY,kBAAsC;AAC3D,SAAS,UAAU,iBAAiB;AAKpC,OAAO,YAAY;AACnB,OAAO,oBAAoB;AAC3B,SAAS,aAAa;AAMd;AAHR,SAAS,IAAK,EAAE,cAAc,GAAuC;AACpE,QAAM,SAAS,UAAW,CAAE,WAAY,OAAQ,KAAM,EAAE,UAAU,GAAG,CAAC,CAAE;AAExE,SAAO,oBAAC,UAAO,QAAkB,eAAgC;AAClE;AAEA,eAAsB,KAAM;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACD,GAII;AACH,GAAE,aAAa,CAAC,GAAI,QAAS,CAAE,aAAc;AAC5C,aAAU,KAAM,EAAE,iBAAkB,SAAS,IAAI,QAAS;AAAA,EAC3D,CAAE;AAEF,GAAE,UAAU,CAAC,GAAI,QAAS,CAAE,UAAW;AACtC,aAAU,KAAM,EAAE,cAAe,KAAM;AAAA,EACxC,CAAE;AAGF,QAAM,cAAc,SAAS,eAAgB,OAAQ;AACrD,MAAK,aAAc;AAClB,UAAM,OAAO,WAAY,WAAY;AACrC,SAAK;AAAA,MACJ,oBAAC,cACA,8BAAC,OAAI,GACN;AAAA,IACD;AAAA,EACD;AACD;AAEA,eAAsB,eAAgB;AAAA,EACrC;AAAA,EACA;AACD,GAGI;AACH,GAAE,UAAU,CAAC,GAAI,QAAS,CAAE,UAAW;AACtC,aAAU,KAAM,EAAE,cAAe,KAAM;AAAA,EACxC,CAAE;AAGF,QAAM,cAAc,SAAS,eAAgB,OAAQ;AACrD,MAAK,aAAc;AAClB,UAAM,OAAO,WAAY,WAAY;AACrC,SAAK;AAAA,MACJ,oBAAC,cACA,8BAAC,OAAI,eAAgB,gBAAiB,GACvC;AAAA,IACD;AAAA,EACD;AACD;",
   "names": []
 }

package/build-module/components/app/router.js

@@ -4,7 +4,8 @@ import {
   createRootRoute,
   createRoute,
   RouterProvider,
-  createBrowserHistory
+  createBrowserHistory,
+  redirect
 } from "@tanstack/react-router";
 import { parseHref } from "@tanstack/history";
 import { __ } from "@wordpress/i18n";
@@ -45,26 +46,32 @@ async function createRouteFromDefinition(route, parentRoute) {
   return createRoute({
     getParentRoute: () => parentRoute,
     path: route.path,
-    beforeLoad: routeConfig.beforeLoad ? async (opts) => {
+    beforeLoad: routeConfig.beforeLoad ? (opts) => routeConfig.beforeLoad({
+      params: opts.params || {},
+      search: opts.search || {},
+      redirect
+    }) : void 0,
+    loader: async (opts) => {
       const context = {
         params: opts.params || {},
-        search: opts.search || {}
+        search: opts.deps || {}
       };
-      await routeConfig.beforeLoad(context);
-    } : void 0,
-    loader: routeConfig.loader ? async (opts) => {
-      const context = {
-        params: opts.params || {},
-        search: opts.search || {}
+      const [loaderData, canvasData] = await Promise.all([
+        routeConfig.loader ? routeConfig.loader(context) : Promise.resolve(void 0),
+        routeConfig.canvas ? routeConfig.canvas(context) : Promise.resolve(void 0)
+      ]);
+      return {
+        ...loaderData,
+        canvas: canvasData
       };
-      return await routeConfig.loader(context);
-    } : void 0,
+    },
+    loaderDeps: (opts) => opts.search,
     component: SurfacesModule
   });
 }
-async function createRouteTree(routes) {
+async function createRouteTree(routes, rootComponent = Root) {
   const rootRoute = createRootRoute({
-    component: Root,
+    component: rootComponent,
     context: () => ({})
   });
   const dynamicRoutes = await Promise.all(
@@ -87,13 +94,16 @@ function createPathHistory() {
     }
   });
 }
-function Router({ routes }) {
+function Router({
+  routes,
+  rootComponent = Root
+}) {
   const [router, setRouter] = useState(null);
   useEffect(() => {
     let cancelled = false;
     async function initializeRouter() {
       const history = createPathHistory();
-      const routeTree = await createRouteTree(routes);
+      const routeTree = await createRouteTree(routes, rootComponent);
       if (!cancelled) {
         const newRouter = createRouter({
           history,
@@ -107,7 +117,7 @@ function Router({ routes }) {
     return () => {
       cancelled = true;
     };
-  }, [routes]);
+  }, [routes, rootComponent]);
   if (!router) {
     return /* @__PURE__ */ jsx("div", { children: "Loading routes..." });
   }

package/build-module/components/app/router.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/app/router.tsx"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tcreateRouter,\n\tcreateRootRoute,\n\tcreateRoute,\n\tRouterProvider,\n\tcreateBrowserHistory,\n\ttype AnyRoute,\n} from '@tanstack/react-router';\nimport { parseHref } from '@tanstack/history';\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { lazy, useState, useEffect } from '@wordpress/element';\nimport { Page } from '@wordpress/admin-ui';\n\n/**\n * Internal dependencies\n */\nimport Root from '../root';\nimport type { Route, RouteLoaderContext } from '../../store/types';\n\n// Not found component\nfunction NotFoundComponent() {\n\treturn (\n\t\t<div className=\"boot-layout__stage\">\n\t\t\t<Page title={ __( 'Route not found' ) } hasPadding>\n\t\t\t\t{ __( \"The page you're looking for does not exist\" ) }\n\t\t\t</Page>\n\t\t</div>\n\t);\n}\n\nfunction RouteComponent( {\n\tstage: Stage,\n\tinspector: Inspector,\n}: {\n\tstage?: ComponentType;\n\tinspector?: ComponentType;\n} ) {\n\treturn (\n\t\t<>\n\t\t\t{ Stage && (\n\t\t\t\t<div className=\"boot-layout__stage\">\n\t\t\t\t\t<Stage />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ Inspector && (\n\t\t\t\t<div className=\"boot-layout__inspector\">\n\t\t\t\t\t<Inspector />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Creates a TanStack route from a Route definition.\n *\n * @param route       Route configuration\n * @param parentRoute Parent route.\n * @return Tanstack Route.\n */\nasync function createRouteFromDefinition(\n\troute: Route,\n\tparentRoute: AnyRoute\n) {\n\t// Create lazy components for stage and inspector surfaces\n\tconst SurfacesModule = route.content_module\n\t\t? lazy( async () => {\n\t\t\t\tconst module = await import( route.content_module! );\n\t\t\t\t// Return a component that renders the surfaces\n\t\t\t\treturn {\n\t\t\t\t\tdefault: () => (\n\t\t\t\t\t\t<RouteComponent\n\t\t\t\t\t\t\tstage={ module.stage }\n\t\t\t\t\t\t\tinspector={ module.inspector }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t  } )\n\t\t: () => null;\n\n\t// Load route module for lifecycle functions if specified\n\tlet routeConfig: {\n\t\tbeforeLoad?: ( context: RouteLoaderContext ) => void | Promise< void >;\n\t\tloader?: ( context: RouteLoaderContext ) => Promise< unknown >;\n\t} = {};\n\n\tif ( route.route_module ) {\n\t\tconst module = await import( route.route_module );\n\t\trouteConfig = module.route || {};\n\t}\n\n\treturn createRoute( {\n\t\tgetParentRoute: () => parentRoute,\n\t\tpath: route.path,\n\t\tbeforeLoad: routeConfig.beforeLoad\n\t\t\t? async ( opts: any ) => {\n\t\t\t\t\tconst context: RouteLoaderContext = {\n\t\t\t\t\t\tparams: opts.params || {},\n\t\t\t\t\t\tsearch: opts.search || {},\n\t\t\t\t\t};\n\t\t\t\t\tawait routeConfig.beforeLoad!( context );\n\t\t\t  }\n\t\t\t: undefined,\n\t\tloader: routeConfig.loader\n\t\t\t? async ( opts: any ) => {\n\t\t\t\t\tconst context: RouteLoaderContext = {\n\t\t\t\t\t\tparams: opts.params || {},\n\t\t\t\t\t\tsearch: opts.search || {},\n\t\t\t\t\t};\n\t\t\t\t\treturn await routeConfig.loader!( context );\n\t\t\t  }\n\t\t\t: undefined,\n\t\tcomponent: SurfacesModule,\n\t} );\n}\n\n/**\n * Creates a route tree from route definitions.\n *\n * @param routes Routes definition.\n * @return Router tree.\n */\nasync function createRouteTree( routes: Route[] ) {\n\tconst rootRoute = createRootRoute( {\n\t\tcomponent: Root,\n\t\tcontext: () => ( {} ),\n\t} );\n\n\t// Create routes from definitions\n\tconst dynamicRoutes = await Promise.all(\n\t\troutes.map( ( route ) => createRouteFromDefinition( route, rootRoute ) )\n\t);\n\n\treturn rootRoute.addChildren( dynamicRoutes );\n}\n\n// Create custom history that parses ?p= query parameter\nfunction createPathHistory() {\n\treturn createBrowserHistory( {\n\t\tparseLocation: () => {\n\t\t\tconst url = new URL( window.location.href );\n\t\t\tconst path = url.searchParams.get( 'p' ) || '/';\n\t\t\tconst pathHref = `${ path }${ url.hash }`;\n\t\t\treturn parseHref( pathHref, window.history.state );\n\t\t},\n\t\tcreateHref: ( href ) => {\n\t\t\tconst searchParams = new URLSearchParams( window.location.search );\n\t\t\tsearchParams.set( 'p', href );\n\t\t\treturn `${ window.location.pathname }?${ searchParams }`;\n\t\t},\n\t} );\n}\n\ninterface RouterProps {\n\troutes: Route[];\n}\n\nexport default function Router( { routes }: RouterProps ) {\n\tconst [ router, setRouter ] = useState< any >( null );\n\n\tuseEffect( () => {\n\t\tlet cancelled = false;\n\n\t\tasync function initializeRouter() {\n\t\t\tconst history = createPathHistory();\n\t\t\tconst routeTree = await createRouteTree( routes );\n\n\t\t\tif ( ! cancelled ) {\n\t\t\t\tconst newRouter = createRouter( {\n\t\t\t\t\thistory,\n\t\t\t\t\trouteTree,\n\t\t\t\t\tdefaultNotFoundComponent: NotFoundComponent,\n\t\t\t\t} );\n\t\t\t\tsetRouter( newRouter );\n\t\t\t}\n\t\t}\n\n\t\tinitializeRouter();\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [ routes ] );\n\n\tif ( ! router ) {\n\t\treturn <div>Loading routes...</div>;\n\t}\n\n\treturn <RouterProvider router={ router } />;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport {\n\tcreateRouter,\n\tcreateRootRoute,\n\tcreateRoute,\n\tRouterProvider,\n\tcreateBrowserHistory,\n\ttype AnyRoute,\n\tredirect,\n} from '@tanstack/react-router';\nimport { parseHref } from '@tanstack/history';\nimport type { ComponentType } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { lazy, useState, useEffect } from '@wordpress/element';\nimport { Page } from '@wordpress/admin-ui';\n\n/**\n * Internal dependencies\n */\nimport Root from '../root';\nimport type { Route, RouteLoaderContext } from '../../store/types';\n\n// Not found component\nfunction NotFoundComponent() {\n\treturn (\n\t\t<div className=\"boot-layout__stage\">\n\t\t\t<Page title={ __( 'Route not found' ) } hasPadding>\n\t\t\t\t{ __( \"The page you're looking for does not exist\" ) }\n\t\t\t</Page>\n\t\t</div>\n\t);\n}\n\nfunction RouteComponent( {\n\tstage: Stage,\n\tinspector: Inspector,\n}: {\n\tstage?: ComponentType;\n\tinspector?: ComponentType;\n} ) {\n\treturn (\n\t\t<>\n\t\t\t{ Stage && (\n\t\t\t\t<div className=\"boot-layout__stage\">\n\t\t\t\t\t<Stage />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t\t{ Inspector && (\n\t\t\t\t<div className=\"boot-layout__inspector\">\n\t\t\t\t\t<Inspector />\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</>\n\t);\n}\n\n/**\n * Creates a TanStack route from a Route definition.\n *\n * @param route       Route configuration\n * @param parentRoute Parent route.\n * @return Tanstack Route.\n */\nasync function createRouteFromDefinition(\n\troute: Route,\n\tparentRoute: AnyRoute\n) {\n\t// Create lazy components for stage and inspector surfaces\n\tconst SurfacesModule = route.content_module\n\t\t? lazy( async () => {\n\t\t\t\tconst module = await import( route.content_module! );\n\t\t\t\t// Return a component that renders the surfaces\n\t\t\t\treturn {\n\t\t\t\t\tdefault: () => (\n\t\t\t\t\t\t<RouteComponent\n\t\t\t\t\t\t\tstage={ module.stage }\n\t\t\t\t\t\t\tinspector={ module.inspector }\n\t\t\t\t\t\t/>\n\t\t\t\t\t),\n\t\t\t\t};\n\t\t  } )\n\t\t: () => null;\n\n\t// Load route module for lifecycle functions if specified\n\tlet routeConfig: {\n\t\tbeforeLoad?: (\n\t\t\tcontext: RouteLoaderContext & { redirect: Function }\n\t\t) => void | Promise< void >;\n\t\tloader?: ( context: RouteLoaderContext ) => Promise< unknown >;\n\t\tcanvas?: ( context: RouteLoaderContext ) => Promise< any >;\n\t} = {};\n\n\tif ( route.route_module ) {\n\t\tconst module = await import( route.route_module );\n\t\trouteConfig = module.route || {};\n\t}\n\n\treturn createRoute( {\n\t\tgetParentRoute: () => parentRoute,\n\t\tpath: route.path,\n\t\tbeforeLoad: routeConfig.beforeLoad\n\t\t\t? ( opts: any ) =>\n\t\t\t\t\trouteConfig.beforeLoad!( {\n\t\t\t\t\t\tparams: opts.params || {},\n\t\t\t\t\t\tsearch: opts.search || {},\n\t\t\t\t\t\tredirect,\n\t\t\t\t\t} )\n\t\t\t: undefined,\n\t\tloader: async ( opts: any ) => {\n\t\t\tconst context: RouteLoaderContext = {\n\t\t\t\tparams: opts.params || {},\n\t\t\t\tsearch: opts.deps || {},\n\t\t\t};\n\n\t\t\t// Call both loader and canvas functions if they exist\n\t\t\tconst [ loaderData, canvasData ] = await Promise.all( [\n\t\t\t\trouteConfig.loader\n\t\t\t\t\t? routeConfig.loader( context )\n\t\t\t\t\t: Promise.resolve( undefined ),\n\t\t\t\trouteConfig.canvas\n\t\t\t\t\t? routeConfig.canvas( context )\n\t\t\t\t\t: Promise.resolve( undefined ),\n\t\t\t] );\n\n\t\t\treturn {\n\t\t\t\t...( loaderData as any ),\n\t\t\t\tcanvas: canvasData,\n\t\t\t};\n\t\t},\n\t\tloaderDeps: ( opts: any ) => opts.search,\n\t\tcomponent: SurfacesModule,\n\t} );\n}\n\n/**\n * Creates a route tree from route definitions.\n *\n * @param routes        Routes definition.\n * @param rootComponent Root component to use for the router.\n * @return Router tree.\n */\nasync function createRouteTree(\n\troutes: Route[],\n\trootComponent: ComponentType = Root\n) {\n\tconst rootRoute = createRootRoute( {\n\t\tcomponent: rootComponent as any,\n\t\tcontext: () => ( {} ),\n\t} );\n\n\t// Create routes from definitions\n\tconst dynamicRoutes = await Promise.all(\n\t\troutes.map( ( route ) => createRouteFromDefinition( route, rootRoute ) )\n\t);\n\n\treturn rootRoute.addChildren( dynamicRoutes );\n}\n\n// Create custom history that parses ?p= query parameter\nfunction createPathHistory() {\n\treturn createBrowserHistory( {\n\t\tparseLocation: () => {\n\t\t\tconst url = new URL( window.location.href );\n\t\t\tconst path = url.searchParams.get( 'p' ) || '/';\n\t\t\tconst pathHref = `${ path }${ url.hash }`;\n\t\t\treturn parseHref( pathHref, window.history.state );\n\t\t},\n\t\tcreateHref: ( href ) => {\n\t\t\tconst searchParams = new URLSearchParams( window.location.search );\n\t\t\tsearchParams.set( 'p', href );\n\t\t\treturn `${ window.location.pathname }?${ searchParams }`;\n\t\t},\n\t} );\n}\n\ninterface RouterProps {\n\troutes: Route[];\n\trootComponent?: ComponentType;\n}\n\nexport default function Router( {\n\troutes,\n\trootComponent = Root,\n}: RouterProps ) {\n\tconst [ router, setRouter ] = useState< any >( null );\n\n\tuseEffect( () => {\n\t\tlet cancelled = false;\n\n\t\tasync function initializeRouter() {\n\t\t\tconst history = createPathHistory();\n\t\t\tconst routeTree = await createRouteTree( routes, rootComponent );\n\n\t\t\tif ( ! cancelled ) {\n\t\t\t\tconst newRouter = createRouter( {\n\t\t\t\t\thistory,\n\t\t\t\t\trouteTree,\n\t\t\t\t\tdefaultNotFoundComponent: NotFoundComponent,\n\t\t\t\t} );\n\t\t\t\tsetRouter( newRouter );\n\t\t\t}\n\t\t}\n\n\t\tinitializeRouter();\n\n\t\treturn () => {\n\t\t\tcancelled = true;\n\t\t};\n\t}, [ routes, rootComponent ] );\n\n\tif ( ! router ) {\n\t\treturn <div>Loading routes...</div>;\n\t}\n\n\treturn <RouterProvider router={ router } />;\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/canvas/back-button.js

@@ -0,0 +1,176 @@
+// packages/boot/src/components/canvas/back-button.tsx
+import {
+  Button,
+  Icon,
+  __unstableMotion as motion
+} from "@wordpress/components";
+import { arrowUpLeft } from "@wordpress/icons";
+import { useReducedMotion } from "@wordpress/compose";
+import { __ } from "@wordpress/i18n";
+import SiteIcon from "../site-icon";
+
+// packages/boot/src/components/canvas/back-button.scss
+var css = `/**
+ * SCSS Variables.
+ *
+ * Please use variables from this sheet to ensure consistency across the UI.
+ * Don't add to this sheet unless you're pretty sure the value will be reused in many places.
+ * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
+ */
+/**
+ * Colors
+ */
+/**
+ * Fonts & basic variables.
+ */
+/**
+ * Typography
+ */
+/**
+ * Grid System.
+ * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/
+ */
+/**
+ * Radius scale.
+ */
+/**
+ * Elevation scale.
+ */
+/**
+ * Dimensions.
+ */
+/**
+ * Mobile specific styles
+ */
+/**
+ * Editor styles.
+ */
+/**
+ * Block & Editor UI.
+ */
+/**
+ * Block paddings.
+ */
+/**
+ * React Native specific.
+ * These variables do not appear to be used anywhere else.
+ */
+.boot-canvas-back-button {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 64px;
+  width: 64px;
+  z-index: 100;
+}
+
+.boot-canvas-back-button__container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.boot-canvas-back-button__link.components-button {
+  width: 64px;
+  height: 64px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--wpds-color-bg-surface-neutral-weak);
+  text-decoration: none;
+  padding: 0;
+  border-radius: 0;
+}
+@media not (prefers-reduced-motion) {
+  .boot-canvas-back-button__link.components-button {
+    transition: outline 0.1s ease-out;
+  }
+}
+.boot-canvas-back-button__link.components-button:focus:not(:active) {
+  outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);
+  outline-offset: calc(-1 * var(--wpds-border-width-focus));
+}
+
+.boot-canvas-back-button__icon {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 64px;
+  height: 64px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: hsl(0, 0%, 80%);
+  pointer-events: none;
+}
+.boot-canvas-back-button__icon svg {
+  fill: currentColor;
+}
+.boot-canvas-back-button__icon.has-site-icon {
+  background-color: hsla(0, 0%, 100%, 0.6);
+  -webkit-backdrop-filter: saturate(180%) blur(15px);
+  backdrop-filter: saturate(180%) blur(15px);
+}
+/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZ3V0ZW5iZXJnL2d1dGVuYmVyZy9wdWJsaXNoL3BhY2thZ2VzL2Jvb3Qvc3JjL2NvbXBvbmVudHMvY2FudmFzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9ub2RlX21vZHVsZXMvQHdvcmRwcmVzcy9iYXNlLXN0eWxlcy9fdmFyaWFibGVzLnNjc3MiLCIuLi8uLi8uLi8uLi8uLi9ub2RlX21vZHVsZXMvQHdvcmRwcmVzcy9iYXNlLXN0eWxlcy9fY29sb3JzLnNjc3MiLCJiYWNrLWJ1dHRvbi5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FDQUE7QUFBQTtBQUFBO0FEVUE7QUFBQTtBQUFBO0FBT0E7QUFBQTtBQUFBO0FBNkJBO0FBQUE7QUFBQTtBQUFBO0FBaUJBO0FBQUE7QUFBQTtBQVdBO0FBQUE7QUFBQTtBQWdCQTtBQUFBO0FBQUE7QUF3QkE7QUFBQTtBQUFBO0FBS0E7QUFBQTtBQUFBO0FBZUE7QUFBQTtBQUFBO0FBbUJBO0FBQUE7QUFBQTtBQVNBO0FBQUE7QUFBQTtBQUFBO0FFaEtBO0VBQ0M7RUFDQTtFQUNBO0VBQ0EsUUY2RmU7RUU1RmYsT0Y0RmU7RUUzRmY7OztBQUdEO0VBQ0M7RUFDQTtFQUNBOzs7QUFHRDtFQUNDLE9GaUZlO0VFaEZmLFFGZ0ZlO0VFL0VmO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBWEQ7SUFZRTs7O0FBR0Q7RUFDQyxTQUNDO0VBRUQ7OztBQUlGO0VBQ0M7RUFDQTtFQUNBO0VBQ0EsT0Z1RGU7RUV0RGYsUUZzRGU7RUVyRGY7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNDOztBQUdEO0VBQ0M7RUFDQTtFQUNBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBTQ1NTIFZhcmlhYmxlcy5cbiAqXG4gKiBQbGVhc2UgdXNlIHZhcmlhYmxlcyBmcm9tIHRoaXMgc2hlZXQgdG8gZW5zdXJlIGNvbnNpc3RlbmN5IGFjcm9zcyB0aGUgVUkuXG4gKiBEb24ndCBhZGQgdG8gdGhpcyBzaGVldCB1bmxlc3MgeW91J3JlIHByZXR0eSBzdXJlIHRoZSB2YWx1ZSB3aWxsIGJlIHJldXNlZCBpbiBtYW55IHBsYWNlcy5cbiAqIEZvciBleGFtcGxlLCBkb24ndCBhZGQgcnVsZXMgdG8gdGhpcyBzaGVldCB0aGF0IGFmZmVjdCBibG9jayB2aXN1YWxzLiBJdCdzIHB1cmVseSBmb3IgVUkuXG4gKi9cblxuQHVzZSBcIi4vY29sb3JzXCI7XG5cbi8qKlxuICogRm9udHMgJiBiYXNpYyB2YXJpYWJsZXMuXG4gKi9cblxuJGRlZmF1bHQtZm9udDogLWFwcGxlLXN5c3RlbSwgQmxpbmtNYWNTeXN0ZW1Gb250LFwiU2Vnb2UgVUlcIiwgUm9ib3RvLCBPeHlnZW4tU2FucywgVWJ1bnR1LCBDYW50YXJlbGwsXCJIZWx2ZXRpY2EgTmV1ZVwiLCBzYW5zLXNlcmlmOyAvLyBUb2RvOiBkZXByZWNhdGUgaW4gZmF2b3Igb2YgJGZhbWlseSB2YXJpYWJsZXNcbiRkZWZhdWx0LWxpbmUtaGVpZ2h0OiAxLjQ7IC8vIFRvZG86IGRlcHJlY2F0ZSBpbiBmYXZvciBvZiAkbGluZS1oZWlnaHQgdG9rZW5zXG5cbi8qKlxuICogVHlwb2dyYXBoeVxuICovXG5cbi8vIFNpemVzXG4kZm9udC1zaXplLXgtc21hbGw6IDExcHg7XG4kZm9udC1zaXplLXNtYWxsOiAxMnB4O1xuJGZvbnQtc2l6ZS1tZWRpdW06IDEzcHg7XG4kZm9udC1zaXplLWxhcmdlOiAxNXB4O1xuJGZvbnQtc2l6ZS14LWxhcmdlOiAyMHB4O1xuJGZvbnQtc2l6ZS0yeC1sYXJnZTogMzJweDtcblxuLy8gTGluZSBoZWlnaHRzXG4kZm9udC1saW5lLWhlaWdodC14LXNtYWxsOiAxNnB4O1xuJGZvbnQtbGluZS1oZWlnaHQtc21hbGw6IDIwcHg7XG4kZm9udC1saW5lLWhlaWdodC1tZWRpdW06IDI0cHg7XG4kZm9udC1saW5lLWhlaWdodC1sYXJnZTogMjhweDtcbiRmb250LWxpbmUtaGVpZ2h0LXgtbGFyZ2U6IDMycHg7XG4kZm9udC1saW5lLWhlaWdodC0yeC1sYXJnZTogNDBweDtcblxuLy8gV2VpZ2h0c1xuJGZvbnQtd2VpZ2h0LXJlZ3VsYXI6IDQwMDtcbiRmb250LXdlaWdodC1tZWRpdW06IDQ5OTsgLy8gZW5zdXJlcyBmYWxsYmFjayB0byA0MDAgKGluc3RlYWQgb2YgNjAwKVxuXG4vLyBGYW1pbGllc1xuJGZvbnQtZmFtaWx5LWhlYWRpbmdzOiAtYXBwbGUtc3lzdGVtLCBcInN5c3RlbS11aVwiLCBcIlNlZ29lIFVJXCIsIFJvYm90bywgT3h5Z2VuLVNhbnMsIFVidW50dSwgQ2FudGFyZWxsLCBcIkhlbHZldGljYSBOZXVlXCIsIHNhbnMtc2VyaWY7XG4kZm9udC1mYW1pbHktYm9keTogLWFwcGxlLXN5c3RlbSwgXCJzeXN0ZW0tdWlcIiwgXCJTZWdvZSBVSVwiLCBSb2JvdG8sIE94eWdlbi1TYW5zLCBVYnVudHUsIENhbnRhcmVsbCwgXCJIZWx2ZXRpY2EgTmV1ZVwiLCBzYW5zLXNlcmlmO1xuJGZvbnQtZmFtaWx5LW1vbm86IE1lbmxvLCBDb25zb2xhcywgbW9uYWNvLCBtb25vc3BhY2U7XG5cbi8qKlxuICogR3JpZCBTeXN0ZW0uXG4gKiBodHRwczovL21ha2Uud29yZHByZXNzLm9yZy9kZXNpZ24vMjAxOS8xMC8zMS9wcm9wb3NhbC1hLWNvbnNpc3RlbnQtc3BhY2luZy1zeXN0ZW0tZm9yLXdvcmRwcmVzcy9cbiAqL1xuXG4kZ3JpZC11bml0OiA4cHg7XG4kZ3JpZC11bml0LTA1OiAwLjUgKiAkZ3JpZC11bml0O1x0Ly8gNHB4XG4kZ3JpZC11bml0LTEwOiAxICogJGdyaWQtdW5pdDtcdFx0Ly8gOHB4XG4kZ3JpZC11bml0LTE1OiAxLjUgKiAkZ3JpZC11bml0O1x0Ly8gMTJweFxuJGdyaWQtdW5pdC0yMDogMiAqICRncmlkLXVuaXQ7XHRcdC8vIDE2cHhcbiRncmlkLXVuaXQtMzA6IDMgKiAkZ3JpZC11bml0O1x0XHQvLyAyNHB4XG4kZ3JpZC11bml0LTQwOiA0ICogJGdyaWQtdW5pdDtcdFx0Ly8gMzJweFxuJGdyaWQtdW5pdC01MDogNSAqICRncmlkLXVuaXQ7XHRcdC8vIDQwcHhcbiRncmlkLXVuaXQtNjA6IDYgKiAkZ3JpZC11bml0O1x0XHQvLyA0OHB4XG4kZ3JpZC11bml0LTcwOiA3ICogJGdyaWQtdW5pdDtcdFx0Ly8gNTZweFxuJGdyaWQtdW5pdC04MDogOCAqICRncmlkLXVuaXQ7XHRcdC8vIDY0cHhcblxuLyoqXG4gKiBSYWRpdXMgc2NhbGUuXG4gKi9cblxuJHJhZGl1cy14LXNtYWxsOiAxcHg7ICAgLy8gQXBwbGllZCB0byBlbGVtZW50cyBsaWtlIGJ1dHRvbnMgbmVzdGVkIHdpdGhpbiBwcmltaXRpdmVzIGxpa2UgaW5wdXRzLlxuJHJhZGl1cy1zbWFsbDogMnB4OyAgICAgLy8gQXBwbGllZCB0byBtb3N0IHByaW1pdGl2ZXMuXG4kcmFkaXVzLW1lZGl1bTogNHB4OyAgICAvLyBBcHBsaWVkIHRvIGNvbnRhaW5lcnMgd2l0aCBzbWFsbGVyIHBhZGRpbmcuXG4kcmFkaXVzLWxhcmdlOiA4cHg7ICAgICAvLyBBcHBsaWVkIHRvIGNvbnRhaW5lcnMgd2l0aCBsYXJnZXIgcGFkZGluZy5cbiRyYWRpdXMtZnVsbDogOTk5OXB4OyAgIC8vIEZvciBwaWxscy5cbiRyYWRpdXMtcm91bmQ6IDUwJTsgICAgIC8vIEZvciBjaXJjbGVzIGFuZCBvdmFscy5cblxuLyoqXG4gKiBFbGV2YXRpb24gc2NhbGUuXG4gKi9cblxuLy8gRm9yIHNlY3Rpb25zIGFuZCBjb250YWluZXJzIHRoYXQgZ3JvdXAgcmVsYXRlZCBjb250ZW50IGFuZCBjb250cm9scywgd2hpY2ggbWF5IG92ZXJsYXAgb3RoZXIgY29udGVudC4gRXhhbXBsZTogUHJldmlldyBGcmFtZS5cbiRlbGV2YXRpb24teC1zbWFsbDogMCAxcHggMXB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMyksIDAgMXB4IDJweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDIpLCAwIDNweCAzcHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAyKSwgMCA0cHggNHB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMSk7XG5cbi8vIEZvciBjb21wb25lbnRzIHRoYXQgcHJvdmlkZSBjb250ZXh0dWFsIGZlZWRiYWNrIHdpdGhvdXQgYmVpbmcgaW50cnVzaXZlLiBHZW5lcmFsbHkgbm9uLWludGVycnVwdGl2ZS4gRXhhbXBsZTogVG9vbHRpcHMsIFNuYWNrYmFyLlxuJGVsZXZhdGlvbi1zbWFsbDogMCAxcHggMnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNSksIDAgMnB4IDNweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDQpLCAwIDZweCA2cHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAzKSwgMCA4cHggOHB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMik7XG5cbi8vIEZvciBjb21wb25lbnRzIHRoYXQgb2ZmZXIgYWRkaXRpb25hbCBhY3Rpb25zLiBFeGFtcGxlOiBNZW51cywgQ29tbWFuZCBQYWxldHRlXG4kZWxldmF0aW9uLW1lZGl1bTogMCAycHggM3B4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNSksIDAgNHB4IDVweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDQpLCAwIDEycHggMTJweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDMpLCAwIDE2cHggMTZweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDIpO1xuXG4vLyBGb3IgY29tcG9uZW50cyB0aGF0IGNvbmZpcm0gZGVjaXNpb25zIG9yIGhhbmRsZSBuZWNlc3NhcnkgaW50ZXJydXB0aW9ucy4gRXhhbXBsZTogTW9kYWxzLlxuJGVsZXZhdGlvbi1sYXJnZTogMCA1cHggMTVweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDgpLCAwIDE1cHggMjdweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDcpLCAwIDMwcHggMzZweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDQpLCAwIDUwcHggNDNweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDIpO1xuXG4vKipcbiAqIERpbWVuc2lvbnMuXG4gKi9cblxuJGljb24tc2l6ZTogMjRweDtcbiRidXR0b24tc2l6ZTogMzZweDtcbiRidXR0b24tc2l6ZS1uZXh0LWRlZmF1bHQtNDBweDogNDBweDsgLy8gdHJhbnNpdGlvbmFyeSB2YXJpYWJsZSBmb3IgbmV4dCBkZWZhdWx0IGJ1dHRvbiBzaXplXG4kYnV0dG9uLXNpemUtc21hbGw6IDI0cHg7XG4kYnV0dG9uLXNpemUtY29tcGFjdDogMzJweDtcbiRoZWFkZXItaGVpZ2h0OiA2NHB4O1xuJHBhbmVsLWhlYWRlci1oZWlnaHQ6ICRncmlkLXVuaXQtNjA7XG4kbmF2LXNpZGViYXItd2lkdGg6IDMwMHB4O1xuJGFkbWluLWJhci1oZWlnaHQ6IDMycHg7XG4kYWRtaW4tYmFyLWhlaWdodC1iaWc6IDQ2cHg7XG4kYWRtaW4tc2lkZWJhci13aWR0aDogMTYwcHg7XG4kYWRtaW4tc2lkZWJhci13aWR0aC1iaWc6IDE5MHB4O1xuJGFkbWluLXNpZGViYXItd2lkdGgtY29sbGFwc2VkOiAzNnB4O1xuJG1vZGFsLW1pbi13aWR0aDogMzUwcHg7XG4kbW9kYWwtd2lkdGgtc21hbGw6IDM4NHB4O1xuJG1vZGFsLXdpZHRoLW1lZGl1bTogNTEycHg7XG4kbW9kYWwtd2lkdGgtbGFyZ2U6IDg0MHB4O1xuJHNwaW5uZXItc2l6ZTogMTZweDtcbiRjYW52YXMtcGFkZGluZzogJGdyaWQtdW5pdC0yMDtcblxuLyoqXG4gKiBNb2JpbGUgc3BlY2lmaWMgc3R5bGVzXG4gKi9cbiRtb2JpbGUtdGV4dC1taW4tZm9udC1zaXplOiAxNnB4OyAvLyBBbnkgZm9udCBzaXplIGJlbG93IDE2cHggd2lsbCBjYXVzZSBNb2JpbGUgU2FmYXJpIHRvIFwiem9vbSBpblwiLlxuXG4vKipcbiAqIEVkaXRvciBzdHlsZXMuXG4gKi9cblxuJHNpZGViYXItd2lkdGg6IDI4MHB4O1xuJGNvbnRlbnQtd2lkdGg6IDg0MHB4O1xuJHdpZGUtY29udGVudC13aWR0aDogMTEwMHB4O1xuJHdpZGdldC1hcmVhLXdpZHRoOiA3MDBweDtcbiRzZWNvbmRhcnktc2lkZWJhci13aWR0aDogMzUwcHg7XG4kZWRpdG9yLWZvbnQtc2l6ZTogMTZweDtcbiRkZWZhdWx0LWJsb2NrLW1hcmdpbjogMjhweDsgLy8gVGhpcyB2YWx1ZSBwcm92aWRlcyBhIGNvbnNpc3RlbnQsIGNvbnRpZ3VvdXMgc3BhY2luZyBiZXR3ZWVuIGJsb2Nrcy5cbiR0ZXh0LWVkaXRvci1mb250LXNpemU6IDE1cHg7XG4kZWRpdG9yLWxpbmUtaGVpZ2h0OiAxLjg7XG4kZWRpdG9yLWh0bWwtZm9udDogJGZvbnQtZmFtaWx5LW1vbm87XG5cbi8qKlxuICogQmxvY2sgJiBFZGl0b3IgVUkuXG4gKi9cblxuJGJsb2NrLXRvb2xiYXItaGVpZ2h0OiAkZ3JpZC11bml0LTYwO1xuJGJvcmRlci13aWR0aDogMXB4O1xuJGJvcmRlci13aWR0aC1mb2N1cy1mYWxsYmFjazogMnB4OyAvLyBUaGlzIGV4aXN0cyBhcyBhIGZhbGxiYWNrLCBhbmQgaXMgaWRlYWxseSBvdmVycmlkZGVuIGJ5IHZhcigtLXdwLWFkbWluLWJvcmRlci13aWR0aC1mb2N1cykgdW5sZXNzIGluIHNvbWUgU0FTUyBtYXRoIGNhc2VzLlxuJGJvcmRlci13aWR0aC10YWI6IDEuNXB4O1xuJGhlbHB0ZXh0LWZvbnQtc2l6ZTogMTJweDtcbiRyYWRpby1pbnB1dC1zaXplOiAxNnB4O1xuJHJhZGlvLWlucHV0LXNpemUtc206IDI0cHg7IC8vIFdpZHRoICYgaGVpZ2h0IGZvciBzbWFsbCB2aWV3cG9ydHMuXG5cbi8vIERlcHJlY2F0ZWQsIHBsZWFzZSBhdm9pZCB1c2luZyB0aGVzZS5cbiRibG9jay1wYWRkaW5nOiAxNHB4OyAvLyBVc2VkIHRvIGRlZmluZSBzcGFjZSBiZXR3ZWVuIGJsb2NrIGZvb3RwcmludCBhbmQgc3Vycm91bmRpbmcgYm9yZGVycy5cbiRyYWRpdXMtYmxvY2stdWk6ICRyYWRpdXMtc21hbGw7XG4kc2hhZG93LXBvcG92ZXI6ICRlbGV2YXRpb24teC1zbWFsbDtcbiRzaGFkb3ctbW9kYWw6ICRlbGV2YXRpb24tbGFyZ2U7XG4kZGVmYXVsdC1mb250LXNpemU6ICRmb250LXNpemUtbWVkaXVtO1xuXG4vKipcbiAqIEJsb2NrIHBhZGRpbmdzLlxuICovXG5cbi8vIFBhZGRpbmcgZm9yIGJsb2NrcyB3aXRoIGEgYmFja2dyb3VuZCBjb2xvciAoZS5nLiBwYXJhZ3JhcGggb3IgZ3JvdXApLlxuJGJsb2NrLWJnLXBhZGRpbmctLXY6IDEuMjVlbTtcbiRibG9jay1iZy1wYWRkaW5nLS1oOiAyLjM3NWVtO1xuXG5cbi8qKlxuICogUmVhY3QgTmF0aXZlIHNwZWNpZmljLlxuICogVGhlc2UgdmFyaWFibGVzIGRvIG5vdCBhcHBlYXIgdG8gYmUgdXNlZCBhbnl3aGVyZSBlbHNlLlxuICovXG5cbi8vIERpbWVuc2lvbnMuXG4kbW9iaWxlLWhlYWRlci10b29sYmFyLWhlaWdodDogNDRweDtcbiRtb2JpbGUtaGVhZGVyLXRvb2xiYXItZXhwYW5kZWQtaGVpZ2h0OiA1MnB4O1xuJG1vYmlsZS1mbG9hdGluZy10b29sYmFyLWhlaWdodDogNDRweDtcbiRtb2JpbGUtZmxvYXRpbmctdG9vbGJhci1tYXJnaW46IDhweDtcbiRtb2JpbGUtY29sb3Itc3dhdGNoOiA0OHB4O1xuXG4vLyBCbG9jayBVSS5cbiRtb2JpbGUtYmxvY2stdG9vbGJhci1oZWlnaHQ6IDQ0cHg7XG4kZGltbWVkLW9wYWNpdHk6IDE7XG4kYmxvY2stZWRnZS10by1jb250ZW50OiAxNnB4O1xuJHNvbGlkLWJvcmRlci1zcGFjZTogMTJweDtcbiRkYXNoZWQtYm9yZGVyLXNwYWNlOiA2cHg7XG4kYmxvY2stc2VsZWN0ZWQtbWFyZ2luOiAzcHg7XG4kYmxvY2stc2VsZWN0ZWQtYm9yZGVyLXdpZHRoOiAxcHg7XG4kYmxvY2stc2VsZWN0ZWQtcGFkZGluZzogMDtcbiRibG9jay1zZWxlY3RlZC1jaGlsZC1tYXJnaW46IDVweDtcbiRibG9jay1zZWxlY3RlZC10by1jb250ZW50OiAkYmxvY2stZWRnZS10by1jb250ZW50IC0gJGJsb2NrLXNlbGVjdGVkLW1hcmdpbiAtICRibG9jay1zZWxlY3RlZC1ib3JkZXItd2lkdGg7XG4iLCIvKipcbiAqIENvbG9yc1xuICovXG5cbi8vIFdvcmRQcmVzcyBncmF5cy5cbiRibGFjazogIzAwMDtcdFx0XHQvLyBVc2Ugb25seSB3aGVuIHlvdSB0cnVseSBuZWVkIHB1cmUgYmxhY2suIEZvciBVSSwgdXNlICRncmF5LTkwMC5cbiRncmF5LTkwMDogIzFlMWUxZTtcbiRncmF5LTgwMDogIzJmMmYyZjtcbiRncmF5LTcwMDogIzc1NzU3NTtcdFx0Ly8gTWVldHMgNC42OjEgKDQuNToxIGlzIG1pbmltdW0pIHRleHQgY29udHJhc3QgYWdhaW5zdCB3aGl0ZS5cbiRncmF5LTYwMDogIzk0OTQ5NDtcdFx0Ly8gTWVldHMgMzoxIFVJIG9yIGxhcmdlIHRleHQgY29udHJhc3QgYWdhaW5zdCB3aGl0ZS5cbiRncmF5LTQwMDogI2NjYztcbiRncmF5LTMwMDogI2RkZDtcdFx0Ly8gVXNlZCBmb3IgbW9zdCBib3JkZXJzLlxuJGdyYXktMjAwOiAjZTBlMGUwO1x0XHQvLyBVc2VkIHNwYXJpbmdseSBmb3IgbGlnaHQgYm9yZGVycy5cbiRncmF5LTEwMDogI2YwZjBmMDtcdFx0Ly8gVXNlZCBmb3IgbGlnaHQgZ3JheSBiYWNrZ3JvdW5kcy5cbiR3aGl0ZTogI2ZmZjtcblxuLy8gT3BhY2l0aWVzICYgYWRkaXRpb25hbCBjb2xvcnMuXG4kZGFyay1ncmF5LXBsYWNlaG9sZGVyOiByZ2JhKCRncmF5LTkwMCwgMC42Mik7XG4kbWVkaXVtLWdyYXktcGxhY2Vob2xkZXI6IHJnYmEoJGdyYXktOTAwLCAwLjU1KTtcbiRsaWdodC1ncmF5LXBsYWNlaG9sZGVyOiByZ2JhKCR3aGl0ZSwgMC42NSk7XG5cbi8vIEFsZXJ0IGNvbG9ycy5cbiRhbGVydC15ZWxsb3c6ICNmMGI4NDk7XG4kYWxlcnQtcmVkOiAjY2MxODE4O1xuJGFsZXJ0LWdyZWVuOiAjNGFiODY2O1xuXG4vLyBEZXByZWNhdGVkLCBwbGVhc2UgYXZvaWQgdXNpbmcgdGhlc2UuXG4kZGFyay10aGVtZS1mb2N1czogJHdoaXRlO1x0Ly8gRm9jdXMgY29sb3Igd2hlbiB0aGUgdGhlbWUgaXMgZGFyay5cbiIsIkB1c2UgXCJAd29yZHByZXNzL2Jhc2Utc3R5bGVzL3ZhcmlhYmxlc1wiO1xuXG4uYm9vdC1jYW52YXMtYmFjay1idXR0b24ge1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0bGVmdDogMDtcblx0aGVpZ2h0OiB2YXJpYWJsZXMuJGhlYWRlci1oZWlnaHQ7XG5cdHdpZHRoOiB2YXJpYWJsZXMuJGhlYWRlci1oZWlnaHQ7XG5cdHotaW5kZXg6IDEwMDtcbn1cblxuLmJvb3QtY2FudmFzLWJhY2stYnV0dG9uX19jb250YWluZXIge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG59XG5cbi5ib290LWNhbnZhcy1iYWNrLWJ1dHRvbl9fbGluay5jb21wb25lbnRzLWJ1dHRvbiB7XG5cdHdpZHRoOiB2YXJpYWJsZXMuJGhlYWRlci1oZWlnaHQ7XG5cdGhlaWdodDogdmFyaWFibGVzLiRoZWFkZXItaGVpZ2h0O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGJhY2tncm91bmQ6IHZhcigtLXdwZHMtY29sb3ItYmctc3VyZmFjZS1uZXV0cmFsLXdlYWspO1xuXHR0ZXh0LWRlY29yYXRpb246IG5vbmU7XG5cdHBhZGRpbmc6IDA7XG5cdGJvcmRlci1yYWRpdXM6IDA7XG5cblx0QG1lZGlhIG5vdCAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbikge1xuXHRcdHRyYW5zaXRpb246IG91dGxpbmUgMC4xcyBlYXNlLW91dDtcblx0fVxuXG5cdCY6Zm9jdXM6bm90KDphY3RpdmUpIHtcblx0XHRvdXRsaW5lOlxuXHRcdFx0dmFyKC0td3Bkcy1ib3JkZXItd2lkdGgtZm9jdXMpIHNvbGlkXG5cdFx0XHR2YXIoLS13cGRzLWNvbG9yLXN0cm9rZS1mb2N1cy1icmFuZCk7XG5cdFx0b3V0bGluZS1vZmZzZXQ6IGNhbGMoLTEgKiB2YXIoLS13cGRzLWJvcmRlci13aWR0aC1mb2N1cykpO1xuXHR9XG59XG5cbi5ib290LWNhbnZhcy1iYWNrLWJ1dHRvbl9faWNvbiB7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXHRsZWZ0OiAwO1xuXHR3aWR0aDogdmFyaWFibGVzLiRoZWFkZXItaGVpZ2h0O1xuXHRoZWlnaHQ6IHZhcmlhYmxlcy4kaGVhZGVyLWhlaWdodDtcblx0ZGlzcGxheTogZmxleDtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGJhY2tncm91bmQtY29sb3I6IGhzbGEoMCwgMCUsIDgwJSk7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG5cdHN2ZyB7XG5cdFx0ZmlsbDogY3VycmVudENvbG9yO1xuXHR9XG5cblx0Ji5oYXMtc2l0ZS1pY29uIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiBoc2xhKDAsIDAlLCAxMDAlLCAwLjYpO1xuXHRcdC13ZWJraXQtYmFja2Ryb3AtZmlsdGVyOiBzYXR1cmF0ZSgxODAlKSBibHVyKDE1cHgpO1xuXHRcdGJhY2tkcm9wLWZpbHRlcjogc2F0dXJhdGUoMTgwJSkgYmx1cigxNXB4KTtcblx0fVxufVxuIl19 */`;
+document.head.appendChild(document.createElement("style")).appendChild(document.createTextNode(css));
+
+// packages/boot/src/components/canvas/back-button.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var toggleHomeIconVariants = {
+  edit: {
+    opacity: 0,
+    scale: 0.2
+  },
+  hover: {
+    opacity: 1,
+    scale: 1,
+    clipPath: "inset( 22% round 2px )"
+  }
+};
+function BootBackButton({ length }) {
+  const disableMotion = useReducedMotion();
+  const handleBack = () => {
+    window.history.back();
+  };
+  if (length > 1) {
+    return null;
+  }
+  const transition = {
+    duration: disableMotion ? 0 : 0.3
+  };
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: "boot-canvas-back-button",
+      animate: "edit",
+      initial: "edit",
+      whileHover: "hover",
+      whileTap: "tap",
+      transition,
+      children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            className: "boot-canvas-back-button__link",
+            onClick: handleBack,
+            "aria-label": __("Go back"),
+            __next40pxDefaultSize: true,
+            children: /* @__PURE__ */ jsx(SiteIcon, {})
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: "boot-canvas-back-button__icon",
+            variants: toggleHomeIconVariants,
+            children: /* @__PURE__ */ jsx(Icon, { icon: arrowUpLeft })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  BootBackButton as default
+};
+//# sourceMappingURL=back-button.js.map

package/build-module/components/canvas/back-button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/canvas/back-button.tsx", "../../../src/components/canvas/back-button.scss"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { arrowUpLeft } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport SiteIcon from '../site-icon';\nimport './back-button.scss';\n\n/**\n * Overlay arrow animation that appears on hover.\n * Matches next-admin implementation with clip-path.\n */\nconst toggleHomeIconVariants = {\n\tedit: {\n\t\topacity: 0,\n\t\tscale: 0.2,\n\t},\n\thover: {\n\t\topacity: 1,\n\t\tscale: 1,\n\t\tclipPath: 'inset( 22% round 2px )',\n\t},\n};\n\n/**\n * Back button component that appears in full-screen canvas mode.\n * Matches next-admin's SiteIconBackButton design.\n *\n * @param {Object} props        Component props\n * @param {number} props.length Number of BackButton fills (from Slot)\n * @return Back button with slide and hover animations\n */\nexport default function BootBackButton( { length }: { length: number } ) {\n\tconst disableMotion = useReducedMotion();\n\n\tconst handleBack = () => {\n\t\twindow.history.back();\n\t};\n\n\t// Only render if this is the only back button\n\tif ( length > 1 ) {\n\t\treturn null;\n\t}\n\n\tconst transition = {\n\t\tduration: disableMotion ? 0 : 0.3,\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tclassName=\"boot-canvas-back-button\"\n\t\t\tanimate=\"edit\"\n\t\t\tinitial=\"edit\"\n\t\t\twhileHover=\"hover\"\n\t\t\twhileTap=\"tap\"\n\t\t\ttransition={ transition }\n\t\t>\n\t\t\t<Button\n\t\t\t\tclassName=\"boot-canvas-back-button__link\"\n\t\t\t\tonClick={ handleBack }\n\t\t\t\taria-label={ __( 'Go back' ) }\n\t\t\t\t__next40pxDefaultSize\n\t\t\t>\n\t\t\t\t<SiteIcon />\n\t\t\t</Button>\n\n\t\t\t{ /* Overlay arrow that appears on hover */ }\n\t\t\t<motion.div\n\t\t\t\tclassName=\"boot-canvas-back-button__icon\"\n\t\t\t\tvariants={ toggleHomeIconVariants }\n\t\t\t>\n\t\t\t\t<Icon icon={ arrowUpLeft } />\n\t\t\t</motion.div>\n\t\t</motion.div>\n\t);\n}\n", "const css = `/**\n * SCSS Variables.\n *\n * Please use variables from this sheet to ensure consistency across the UI.\n * Don't add to this sheet unless you're pretty sure the value will be reused in many places.\n * For example, don't add rules to this sheet that affect block visuals. It's purely for UI.\n */\n/**\n * Colors\n */\n/**\n * Fonts & basic variables.\n */\n/**\n * Typography\n */\n/**\n * Grid System.\n * https://make.wordpress.org/design/2019/10/31/proposal-a-consistent-spacing-system-for-wordpress/\n */\n/**\n * Radius scale.\n */\n/**\n * Elevation scale.\n */\n/**\n * Dimensions.\n */\n/**\n * Mobile specific styles\n */\n/**\n * Editor styles.\n */\n/**\n * Block & Editor UI.\n */\n/**\n * Block paddings.\n */\n/**\n * React Native specific.\n * These variables do not appear to be used anywhere else.\n */\n.boot-canvas-back-button {\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 64px;\n  width: 64px;\n  z-index: 100;\n}\n\n.boot-canvas-back-button__container {\n  position: relative;\n  width: 100%;\n  height: 100%;\n}\n\n.boot-canvas-back-button__link.components-button {\n  width: 64px;\n  height: 64px;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--wpds-color-bg-surface-neutral-weak);\n  text-decoration: none;\n  padding: 0;\n  border-radius: 0;\n}\n@media not (prefers-reduced-motion) {\n  .boot-canvas-back-button__link.components-button {\n    transition: outline 0.1s ease-out;\n  }\n}\n.boot-canvas-back-button__link.components-button:focus:not(:active) {\n  outline: var(--wpds-border-width-focus) solid var(--wpds-color-stroke-focus-brand);\n  outline-offset: calc(-1 * var(--wpds-border-width-focus));\n}\n\n.boot-canvas-back-button__icon {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 64px;\n  height: 64px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: hsl(0, 0%, 80%);\n  pointer-events: none;\n}\n.boot-canvas-back-button__icon svg {\n  fill: currentColor;\n}\n.boot-canvas-back-button__icon.has-site-icon {\n  background-color: hsla(0, 0%, 100%, 0.6);\n  -webkit-backdrop-filter: saturate(180%) blur(15px);\n  backdrop-filter: saturate(180%) blur(15px);\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL2hvbWUvcnVubmVyL3dvcmsvZ3V0ZW5iZXJnL2d1dGVuYmVyZy9wdWJsaXNoL3BhY2thZ2VzL2Jvb3Qvc3JjL2NvbXBvbmVudHMvY2FudmFzIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9ub2RlX21vZHVsZXMvQHdvcmRwcmVzcy9iYXNlLXN0eWxlcy9fdmFyaWFibGVzLnNjc3MiLCIuLi8uLi8uLi8uLi8uLi9ub2RlX21vZHVsZXMvQHdvcmRwcmVzcy9iYXNlLXN0eWxlcy9fY29sb3JzLnNjc3MiLCJiYWNrLWJ1dHRvbi5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQTtBQUFBO0FDQUE7QUFBQTtBQUFBO0FEVUE7QUFBQTtBQUFBO0FBT0E7QUFBQTtBQUFBO0FBNkJBO0FBQUE7QUFBQTtBQUFBO0FBaUJBO0FBQUE7QUFBQTtBQVdBO0FBQUE7QUFBQTtBQWdCQTtBQUFBO0FBQUE7QUF3QkE7QUFBQTtBQUFBO0FBS0E7QUFBQTtBQUFBO0FBZUE7QUFBQTtBQUFBO0FBbUJBO0FBQUE7QUFBQTtBQVNBO0FBQUE7QUFBQTtBQUFBO0FFaEtBO0VBQ0M7RUFDQTtFQUNBO0VBQ0EsUUY2RmU7RUU1RmYsT0Y0RmU7RUUzRmY7OztBQUdEO0VBQ0M7RUFDQTtFQUNBOzs7QUFHRDtFQUNDLE9GaUZlO0VFaEZmLFFGZ0ZlO0VFL0VmO0VBQ0E7RUFDQTtFQUNBO0VBQ0E7RUFDQTtFQUNBOztBQUVBO0VBWEQ7SUFZRTs7O0FBR0Q7RUFDQyxTQUNDO0VBRUQ7OztBQUlGO0VBQ0M7RUFDQTtFQUNBO0VBQ0EsT0Z1RGU7RUV0RGYsUUZzRGU7RUVyRGY7RUFDQTtFQUNBO0VBQ0E7RUFDQTs7QUFFQTtFQUNDOztBQUdEO0VBQ0M7RUFDQTtFQUNBIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBTQ1NTIFZhcmlhYmxlcy5cbiAqXG4gKiBQbGVhc2UgdXNlIHZhcmlhYmxlcyBmcm9tIHRoaXMgc2hlZXQgdG8gZW5zdXJlIGNvbnNpc3RlbmN5IGFjcm9zcyB0aGUgVUkuXG4gKiBEb24ndCBhZGQgdG8gdGhpcyBzaGVldCB1bmxlc3MgeW91J3JlIHByZXR0eSBzdXJlIHRoZSB2YWx1ZSB3aWxsIGJlIHJldXNlZCBpbiBtYW55IHBsYWNlcy5cbiAqIEZvciBleGFtcGxlLCBkb24ndCBhZGQgcnVsZXMgdG8gdGhpcyBzaGVldCB0aGF0IGFmZmVjdCBibG9jayB2aXN1YWxzLiBJdCdzIHB1cmVseSBmb3IgVUkuXG4gKi9cblxuQHVzZSBcIi4vY29sb3JzXCI7XG5cbi8qKlxuICogRm9udHMgJiBiYXNpYyB2YXJpYWJsZXMuXG4gKi9cblxuJGRlZmF1bHQtZm9udDogLWFwcGxlLXN5c3RlbSwgQmxpbmtNYWNTeXN0ZW1Gb250LFwiU2Vnb2UgVUlcIiwgUm9ib3RvLCBPeHlnZW4tU2FucywgVWJ1bnR1LCBDYW50YXJlbGwsXCJIZWx2ZXRpY2EgTmV1ZVwiLCBzYW5zLXNlcmlmOyAvLyBUb2RvOiBkZXByZWNhdGUgaW4gZmF2b3Igb2YgJGZhbWlseSB2YXJpYWJsZXNcbiRkZWZhdWx0LWxpbmUtaGVpZ2h0OiAxLjQ7IC8vIFRvZG86IGRlcHJlY2F0ZSBpbiBmYXZvciBvZiAkbGluZS1oZWlnaHQgdG9rZW5zXG5cbi8qKlxuICogVHlwb2dyYXBoeVxuICovXG5cbi8vIFNpemVzXG4kZm9udC1zaXplLXgtc21hbGw6IDExcHg7XG4kZm9udC1zaXplLXNtYWxsOiAxMnB4O1xuJGZvbnQtc2l6ZS1tZWRpdW06IDEzcHg7XG4kZm9udC1zaXplLWxhcmdlOiAxNXB4O1xuJGZvbnQtc2l6ZS14LWxhcmdlOiAyMHB4O1xuJGZvbnQtc2l6ZS0yeC1sYXJnZTogMzJweDtcblxuLy8gTGluZSBoZWlnaHRzXG4kZm9udC1saW5lLWhlaWdodC14LXNtYWxsOiAxNnB4O1xuJGZvbnQtbGluZS1oZWlnaHQtc21hbGw6IDIwcHg7XG4kZm9udC1saW5lLWhlaWdodC1tZWRpdW06IDI0cHg7XG4kZm9udC1saW5lLWhlaWdodC1sYXJnZTogMjhweDtcbiRmb250LWxpbmUtaGVpZ2h0LXgtbGFyZ2U6IDMycHg7XG4kZm9udC1saW5lLWhlaWdodC0yeC1sYXJnZTogNDBweDtcblxuLy8gV2VpZ2h0c1xuJGZvbnQtd2VpZ2h0LXJlZ3VsYXI6IDQwMDtcbiRmb250LXdlaWdodC1tZWRpdW06IDQ5OTsgLy8gZW5zdXJlcyBmYWxsYmFjayB0byA0MDAgKGluc3RlYWQgb2YgNjAwKVxuXG4vLyBGYW1pbGllc1xuJGZvbnQtZmFtaWx5LWhlYWRpbmdzOiAtYXBwbGUtc3lzdGVtLCBcInN5c3RlbS11aVwiLCBcIlNlZ29lIFVJXCIsIFJvYm90bywgT3h5Z2VuLVNhbnMsIFVidW50dSwgQ2FudGFyZWxsLCBcIkhlbHZldGljYSBOZXVlXCIsIHNhbnMtc2VyaWY7XG4kZm9udC1mYW1pbHktYm9keTogLWFwcGxlLXN5c3RlbSwgXCJzeXN0ZW0tdWlcIiwgXCJTZWdvZSBVSVwiLCBSb2JvdG8sIE94eWdlbi1TYW5zLCBVYnVudHUsIENhbnRhcmVsbCwgXCJIZWx2ZXRpY2EgTmV1ZVwiLCBzYW5zLXNlcmlmO1xuJGZvbnQtZmFtaWx5LW1vbm86IE1lbmxvLCBDb25zb2xhcywgbW9uYWNvLCBtb25vc3BhY2U7XG5cbi8qKlxuICogR3JpZCBTeXN0ZW0uXG4gKiBodHRwczovL21ha2Uud29yZHByZXNzLm9yZy9kZXNpZ24vMjAxOS8xMC8zMS9wcm9wb3NhbC1hLWNvbnNpc3RlbnQtc3BhY2luZy1zeXN0ZW0tZm9yLXdvcmRwcmVzcy9cbiAqL1xuXG4kZ3JpZC11bml0OiA4cHg7XG4kZ3JpZC11bml0LTA1OiAwLjUgKiAkZ3JpZC11bml0O1x0Ly8gNHB4XG4kZ3JpZC11bml0LTEwOiAxICogJGdyaWQtdW5pdDtcdFx0Ly8gOHB4XG4kZ3JpZC11bml0LTE1OiAxLjUgKiAkZ3JpZC11bml0O1x0Ly8gMTJweFxuJGdyaWQtdW5pdC0yMDogMiAqICRncmlkLXVuaXQ7XHRcdC8vIDE2cHhcbiRncmlkLXVuaXQtMzA6IDMgKiAkZ3JpZC11bml0O1x0XHQvLyAyNHB4XG4kZ3JpZC11bml0LTQwOiA0ICogJGdyaWQtdW5pdDtcdFx0Ly8gMzJweFxuJGdyaWQtdW5pdC01MDogNSAqICRncmlkLXVuaXQ7XHRcdC8vIDQwcHhcbiRncmlkLXVuaXQtNjA6IDYgKiAkZ3JpZC11bml0O1x0XHQvLyA0OHB4XG4kZ3JpZC11bml0LTcwOiA3ICogJGdyaWQtdW5pdDtcdFx0Ly8gNTZweFxuJGdyaWQtdW5pdC04MDogOCAqICRncmlkLXVuaXQ7XHRcdC8vIDY0cHhcblxuLyoqXG4gKiBSYWRpdXMgc2NhbGUuXG4gKi9cblxuJHJhZGl1cy14LXNtYWxsOiAxcHg7ICAgLy8gQXBwbGllZCB0byBlbGVtZW50cyBsaWtlIGJ1dHRvbnMgbmVzdGVkIHdpdGhpbiBwcmltaXRpdmVzIGxpa2UgaW5wdXRzLlxuJHJhZGl1cy1zbWFsbDogMnB4OyAgICAgLy8gQXBwbGllZCB0byBtb3N0IHByaW1pdGl2ZXMuXG4kcmFkaXVzLW1lZGl1bTogNHB4OyAgICAvLyBBcHBsaWVkIHRvIGNvbnRhaW5lcnMgd2l0aCBzbWFsbGVyIHBhZGRpbmcuXG4kcmFkaXVzLWxhcmdlOiA4cHg7ICAgICAvLyBBcHBsaWVkIHRvIGNvbnRhaW5lcnMgd2l0aCBsYXJnZXIgcGFkZGluZy5cbiRyYWRpdXMtZnVsbDogOTk5OXB4OyAgIC8vIEZvciBwaWxscy5cbiRyYWRpdXMtcm91bmQ6IDUwJTsgICAgIC8vIEZvciBjaXJjbGVzIGFuZCBvdmFscy5cblxuLyoqXG4gKiBFbGV2YXRpb24gc2NhbGUuXG4gKi9cblxuLy8gRm9yIHNlY3Rpb25zIGFuZCBjb250YWluZXJzIHRoYXQgZ3JvdXAgcmVsYXRlZCBjb250ZW50IGFuZCBjb250cm9scywgd2hpY2ggbWF5IG92ZXJsYXAgb3RoZXIgY29udGVudC4gRXhhbXBsZTogUHJldmlldyBGcmFtZS5cbiRlbGV2YXRpb24teC1zbWFsbDogMCAxcHggMXB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMyksIDAgMXB4IDJweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDIpLCAwIDNweCAzcHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAyKSwgMCA0cHggNHB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMSk7XG5cbi8vIEZvciBjb21wb25lbnRzIHRoYXQgcHJvdmlkZSBjb250ZXh0dWFsIGZlZWRiYWNrIHdpdGhvdXQgYmVpbmcgaW50cnVzaXZlLiBHZW5lcmFsbHkgbm9uLWludGVycnVwdGl2ZS4gRXhhbXBsZTogVG9vbHRpcHMsIFNuYWNrYmFyLlxuJGVsZXZhdGlvbi1zbWFsbDogMCAxcHggMnB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNSksIDAgMnB4IDNweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDQpLCAwIDZweCA2cHggcmdiYShjb2xvcnMuJGJsYWNrLCAwLjAzKSwgMCA4cHggOHB4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wMik7XG5cbi8vIEZvciBjb21wb25lbnRzIHRoYXQgb2ZmZXIgYWRkaXRpb25hbCBhY3Rpb25zLiBFeGFtcGxlOiBNZW51cywgQ29tbWFuZCBQYWxldHRlXG4kZWxldmF0aW9uLW1lZGl1bTogMCAycHggM3B4IHJnYmEoY29sb3JzLiRibGFjaywgMC4wNSksIDAgNHB4IDVweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDQpLCAwIDEycHggMTJweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDMpLCAwIDE2cHggMTZweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDIpO1xuXG4vLyBGb3IgY29tcG9uZW50cyB0aGF0IGNvbmZpcm0gZGVjaXNpb25zIG9yIGhhbmRsZSBuZWNlc3NhcnkgaW50ZXJydXB0aW9ucy4gRXhhbXBsZTogTW9kYWxzLlxuJGVsZXZhdGlvbi1sYXJnZTogMCA1cHggMTVweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDgpLCAwIDE1cHggMjdweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDcpLCAwIDMwcHggMzZweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDQpLCAwIDUwcHggNDNweCByZ2JhKGNvbG9ycy4kYmxhY2ssIDAuMDIpO1xuXG4vKipcbiAqIERpbWVuc2lvbnMuXG4gKi9cblxuJGljb24tc2l6ZTogMjRweDtcbiRidXR0b24tc2l6ZTogMzZweDtcbiRidXR0b24tc2l6ZS1uZXh0LWRlZmF1bHQtNDBweDogNDBweDsgLy8gdHJhbnNpdGlvbmFyeSB2YXJpYWJsZSBmb3IgbmV4dCBkZWZhdWx0IGJ1dHRvbiBzaXplXG4kYnV0dG9uLXNpemUtc21hbGw6IDI0cHg7XG4kYnV0dG9uLXNpemUtY29tcGFjdDogMzJweDtcbiRoZWFkZXItaGVpZ2h0OiA2NHB4O1xuJHBhbmVsLWhlYWRlci1oZWlnaHQ6ICRncmlkLXVuaXQtNjA7XG4kbmF2LXNpZGViYXItd2lkdGg6IDMwMHB4O1xuJGFkbWluLWJhci1oZWlnaHQ6IDMycHg7XG4kYWRtaW4tYmFyLWhlaWdodC1iaWc6IDQ2cHg7XG4kYWRtaW4tc2lkZWJhci13aWR0aDogMTYwcHg7XG4kYWRtaW4tc2lkZWJhci13aWR0aC1iaWc6IDE5MHB4O1xuJGFkbWluLXNpZGViYXItd2lkdGgtY29sbGFwc2VkOiAzNnB4O1xuJG1vZGFsLW1pbi13aWR0aDogMzUwcHg7XG4kbW9kYWwtd2lkdGgtc21hbGw6IDM4NHB4O1xuJG1vZGFsLXdpZHRoLW1lZGl1bTogNTEycHg7XG4kbW9kYWwtd2lkdGgtbGFyZ2U6IDg0MHB4O1xuJHNwaW5uZXItc2l6ZTogMTZweDtcbiRjYW52YXMtcGFkZGluZzogJGdyaWQtdW5pdC0yMDtcblxuLyoqXG4gKiBNb2JpbGUgc3BlY2lmaWMgc3R5bGVzXG4gKi9cbiRtb2JpbGUtdGV4dC1taW4tZm9udC1zaXplOiAxNnB4OyAvLyBBbnkgZm9udCBzaXplIGJlbG93IDE2cHggd2lsbCBjYXVzZSBNb2JpbGUgU2FmYXJpIHRvIFwiem9vbSBpblwiLlxuXG4vKipcbiAqIEVkaXRvciBzdHlsZXMuXG4gKi9cblxuJHNpZGViYXItd2lkdGg6IDI4MHB4O1xuJGNvbnRlbnQtd2lkdGg6IDg0MHB4O1xuJHdpZGUtY29udGVudC13aWR0aDogMTEwMHB4O1xuJHdpZGdldC1hcmVhLXdpZHRoOiA3MDBweDtcbiRzZWNvbmRhcnktc2lkZWJhci13aWR0aDogMzUwcHg7XG4kZWRpdG9yLWZvbnQtc2l6ZTogMTZweDtcbiRkZWZhdWx0LWJsb2NrLW1hcmdpbjogMjhweDsgLy8gVGhpcyB2YWx1ZSBwcm92aWRlcyBhIGNvbnNpc3RlbnQsIGNvbnRpZ3VvdXMgc3BhY2luZyBiZXR3ZWVuIGJsb2Nrcy5cbiR0ZXh0LWVkaXRvci1mb250LXNpemU6IDE1cHg7XG4kZWRpdG9yLWxpbmUtaGVpZ2h0OiAxLjg7XG4kZWRpdG9yLWh0bWwtZm9udDogJGZvbnQtZmFtaWx5LW1vbm87XG5cbi8qKlxuICogQmxvY2sgJiBFZGl0b3IgVUkuXG4gKi9cblxuJGJsb2NrLXRvb2xiYXItaGVpZ2h0OiAkZ3JpZC11bml0LTYwO1xuJGJvcmRlci13aWR0aDogMXB4O1xuJGJvcmRlci13aWR0aC1mb2N1cy1mYWxsYmFjazogMnB4OyAvLyBUaGlzIGV4aXN0cyBhcyBhIGZhbGxiYWNrLCBhbmQgaXMgaWRlYWxseSBvdmVycmlkZGVuIGJ5IHZhcigtLXdwLWFkbWluLWJvcmRlci13aWR0aC1mb2N1cykgdW5sZXNzIGluIHNvbWUgU0FTUyBtYXRoIGNhc2VzLlxuJGJvcmRlci13aWR0aC10YWI6IDEuNXB4O1xuJGhlbHB0ZXh0LWZvbnQtc2l6ZTogMTJweDtcbiRyYWRpby1pbnB1dC1zaXplOiAxNnB4O1xuJHJhZGlvLWlucHV0LXNpemUtc206IDI0cHg7IC8vIFdpZHRoICYgaGVpZ2h0IGZvciBzbWFsbCB2aWV3cG9ydHMuXG5cbi8vIERlcHJlY2F0ZWQsIHBsZWFzZSBhdm9pZCB1c2luZyB0aGVzZS5cbiRibG9jay1wYWRkaW5nOiAxNHB4OyAvLyBVc2VkIHRvIGRlZmluZSBzcGFjZSBiZXR3ZWVuIGJsb2NrIGZvb3RwcmludCBhbmQgc3Vycm91bmRpbmcgYm9yZGVycy5cbiRyYWRpdXMtYmxvY2stdWk6ICRyYWRpdXMtc21hbGw7XG4kc2hhZG93LXBvcG92ZXI6ICRlbGV2YXRpb24teC1zbWFsbDtcbiRzaGFkb3ctbW9kYWw6ICRlbGV2YXRpb24tbGFyZ2U7XG4kZGVmYXVsdC1mb250LXNpemU6ICRmb250LXNpemUtbWVkaXVtO1xuXG4vKipcbiAqIEJsb2NrIHBhZGRpbmdzLlxuICovXG5cbi8vIFBhZGRpbmcgZm9yIGJsb2NrcyB3aXRoIGEgYmFja2dyb3VuZCBjb2xvciAoZS5nLiBwYXJhZ3JhcGggb3IgZ3JvdXApLlxuJGJsb2NrLWJnLXBhZGRpbmctLXY6IDEuMjVlbTtcbiRibG9jay1iZy1wYWRkaW5nLS1oOiAyLjM3NWVtO1xuXG5cbi8qKlxuICogUmVhY3QgTmF0aXZlIHNwZWNpZmljLlxuICogVGhlc2UgdmFyaWFibGVzIGRvIG5vdCBhcHBlYXIgdG8gYmUgdXNlZCBhbnl3aGVyZSBlbHNlLlxuICovXG5cbi8vIERpbWVuc2lvbnMuXG4kbW9iaWxlLWhlYWRlci10b29sYmFyLWhlaWdodDogNDRweDtcbiRtb2JpbGUtaGVhZGVyLXRvb2xiYXItZXhwYW5kZWQtaGVpZ2h0OiA1MnB4O1xuJG1vYmlsZS1mbG9hdGluZy10b29sYmFyLWhlaWdodDogNDRweDtcbiRtb2JpbGUtZmxvYXRpbmctdG9vbGJhci1tYXJnaW46IDhweDtcbiRtb2JpbGUtY29sb3Itc3dhdGNoOiA0OHB4O1xuXG4vLyBCbG9jayBVSS5cbiRtb2JpbGUtYmxvY2stdG9vbGJhci1oZWlnaHQ6IDQ0cHg7XG4kZGltbWVkLW9wYWNpdHk6IDE7XG4kYmxvY2stZWRnZS10by1jb250ZW50OiAxNnB4O1xuJHNvbGlkLWJvcmRlci1zcGFjZTogMTJweDtcbiRkYXNoZWQtYm9yZGVyLXNwYWNlOiA2cHg7XG4kYmxvY2stc2VsZWN0ZWQtbWFyZ2luOiAzcHg7XG4kYmxvY2stc2VsZWN0ZWQtYm9yZGVyLXdpZHRoOiAxcHg7XG4kYmxvY2stc2VsZWN0ZWQtcGFkZGluZzogMDtcbiRibG9jay1zZWxlY3RlZC1jaGlsZC1tYXJnaW46IDVweDtcbiRibG9jay1zZWxlY3RlZC10by1jb250ZW50OiAkYmxvY2stZWRnZS10by1jb250ZW50IC0gJGJsb2NrLXNlbGVjdGVkLW1hcmdpbiAtICRibG9jay1zZWxlY3RlZC1ib3JkZXItd2lkdGg7XG4iLCIvKipcbiAqIENvbG9yc1xuICovXG5cbi8vIFdvcmRQcmVzcyBncmF5cy5cbiRibGFjazogIzAwMDtcdFx0XHQvLyBVc2Ugb25seSB3aGVuIHlvdSB0cnVseSBuZWVkIHB1cmUgYmxhY2suIEZvciBVSSwgdXNlICRncmF5LTkwMC5cbiRncmF5LTkwMDogIzFlMWUxZTtcbiRncmF5LTgwMDogIzJmMmYyZjtcbiRncmF5LTcwMDogIzc1NzU3NTtcdFx0Ly8gTWVldHMgNC42OjEgKDQuNToxIGlzIG1pbmltdW0pIHRleHQgY29udHJhc3QgYWdhaW5zdCB3aGl0ZS5cbiRncmF5LTYwMDogIzk0OTQ5NDtcdFx0Ly8gTWVldHMgMzoxIFVJIG9yIGxhcmdlIHRleHQgY29udHJhc3QgYWdhaW5zdCB3aGl0ZS5cbiRncmF5LTQwMDogI2NjYztcbiRncmF5LTMwMDogI2RkZDtcdFx0Ly8gVXNlZCBmb3IgbW9zdCBib3JkZXJzLlxuJGdyYXktMjAwOiAjZTBlMGUwO1x0XHQvLyBVc2VkIHNwYXJpbmdseSBmb3IgbGlnaHQgYm9yZGVycy5cbiRncmF5LTEwMDogI2YwZjBmMDtcdFx0Ly8gVXNlZCBmb3IgbGlnaHQgZ3JheSBiYWNrZ3JvdW5kcy5cbiR3aGl0ZTogI2ZmZjtcblxuLy8gT3BhY2l0aWVzICYgYWRkaXRpb25hbCBjb2xvcnMuXG4kZGFyay1ncmF5LXBsYWNlaG9sZGVyOiByZ2JhKCRncmF5LTkwMCwgMC42Mik7XG4kbWVkaXVtLWdyYXktcGxhY2Vob2xkZXI6IHJnYmEoJGdyYXktOTAwLCAwLjU1KTtcbiRsaWdodC1ncmF5LXBsYWNlaG9sZGVyOiByZ2JhKCR3aGl0ZSwgMC42NSk7XG5cbi8vIEFsZXJ0IGNvbG9ycy5cbiRhbGVydC15ZWxsb3c6ICNmMGI4NDk7XG4kYWxlcnQtcmVkOiAjY2MxODE4O1xuJGFsZXJ0LWdyZWVuOiAjNGFiODY2O1xuXG4vLyBEZXByZWNhdGVkLCBwbGVhc2UgYXZvaWQgdXNpbmcgdGhlc2UuXG4kZGFyay10aGVtZS1mb2N1czogJHdoaXRlO1x0Ly8gRm9jdXMgY29sb3Igd2hlbiB0aGUgdGhlbWUgaXMgZGFyay5cbiIsIkB1c2UgXCJAd29yZHByZXNzL2Jhc2Utc3R5bGVzL3ZhcmlhYmxlc1wiO1xuXG4uYm9vdC1jYW52YXMtYmFjay1idXR0b24ge1xuXHRwb3NpdGlvbjogYWJzb2x1dGU7XG5cdHRvcDogMDtcblx0bGVmdDogMDtcblx0aGVpZ2h0OiB2YXJpYWJsZXMuJGhlYWRlci1oZWlnaHQ7XG5cdHdpZHRoOiB2YXJpYWJsZXMuJGhlYWRlci1oZWlnaHQ7XG5cdHotaW5kZXg6IDEwMDtcbn1cblxuLmJvb3QtY2FudmFzLWJhY2stYnV0dG9uX19jb250YWluZXIge1xuXHRwb3NpdGlvbjogcmVsYXRpdmU7XG5cdHdpZHRoOiAxMDAlO1xuXHRoZWlnaHQ6IDEwMCU7XG59XG5cbi5ib290LWNhbnZhcy1iYWNrLWJ1dHRvbl9fbGluay5jb21wb25lbnRzLWJ1dHRvbiB7XG5cdHdpZHRoOiB2YXJpYWJsZXMuJGhlYWRlci1oZWlnaHQ7XG5cdGhlaWdodDogdmFyaWFibGVzLiRoZWFkZXItaGVpZ2h0O1xuXHRkaXNwbGF5OiBpbmxpbmUtZmxleDtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGJhY2tncm91bmQ6IHZhcigtLXdwZHMtY29sb3ItYmctc3VyZmFjZS1uZXV0cmFsLXdlYWspO1xuXHR0ZXh0LWRlY29yYXRpb246IG5vbmU7XG5cdHBhZGRpbmc6IDA7XG5cdGJvcmRlci1yYWRpdXM6IDA7XG5cblx0QG1lZGlhIG5vdCAocHJlZmVycy1yZWR1Y2VkLW1vdGlvbikge1xuXHRcdHRyYW5zaXRpb246IG91dGxpbmUgMC4xcyBlYXNlLW91dDtcblx0fVxuXG5cdCY6Zm9jdXM6bm90KDphY3RpdmUpIHtcblx0XHRvdXRsaW5lOlxuXHRcdFx0dmFyKC0td3Bkcy1ib3JkZXItd2lkdGgtZm9jdXMpIHNvbGlkXG5cdFx0XHR2YXIoLS13cGRzLWNvbG9yLXN0cm9rZS1mb2N1cy1icmFuZCk7XG5cdFx0b3V0bGluZS1vZmZzZXQ6IGNhbGMoLTEgKiB2YXIoLS13cGRzLWJvcmRlci13aWR0aC1mb2N1cykpO1xuXHR9XG59XG5cbi5ib290LWNhbnZhcy1iYWNrLWJ1dHRvbl9faWNvbiB7XG5cdHBvc2l0aW9uOiBhYnNvbHV0ZTtcblx0dG9wOiAwO1xuXHRsZWZ0OiAwO1xuXHR3aWR0aDogdmFyaWFibGVzLiRoZWFkZXItaGVpZ2h0O1xuXHRoZWlnaHQ6IHZhcmlhYmxlcy4kaGVhZGVyLWhlaWdodDtcblx0ZGlzcGxheTogZmxleDtcblx0YWxpZ24taXRlbXM6IGNlbnRlcjtcblx0anVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG5cdGJhY2tncm91bmQtY29sb3I6IGhzbGEoMCwgMCUsIDgwJSk7XG5cdHBvaW50ZXItZXZlbnRzOiBub25lO1xuXG5cdHN2ZyB7XG5cdFx0ZmlsbDogY3VycmVudENvbG9yO1xuXHR9XG5cblx0Ji5oYXMtc2l0ZS1pY29uIHtcblx0XHRiYWNrZ3JvdW5kLWNvbG9yOiBoc2xhKDAsIDAlLCAxMDAlLCAwLjYpO1xuXHRcdC13ZWJraXQtYmFja2Ryb3AtZmlsdGVyOiBzYXR1cmF0ZSgxODAlKSBibHVyKDE1cHgpO1xuXHRcdGJhY2tkcm9wLWZpbHRlcjogc2F0dXJhdGUoMTgwJSkgYmx1cigxNXB4KTtcblx0fVxufVxuIl19 */`;\ndocument.head\n    .appendChild(document.createElement(\"style\"))\n    .appendChild(document.createTextNode(css));\nexport {css};\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,OACd;AACP,SAAS,mBAAmB;AAC5B,SAAS,wBAAwB;AACjC,SAAS,UAAU;AAKnB,OAAO,cAAc;;;ACfrB,IAAM,MAAM;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;AAsGZ,SAAS,KACJ,YAAY,SAAS,cAAc,OAAO,CAAC,EAC3C,YAAY,SAAS,eAAe,GAAG,CAAC;;;AD7C3C,SAcE,KAdF;AArCF,IAAM,yBAAyB;AAAA,EAC9B,MAAM;AAAA,IACL,SAAS;AAAA,IACT,OAAO;AAAA,EACR;AAAA,EACA,OAAO;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,EACX;AACD;AAUe,SAAR,eAAiC,EAAE,OAAO,GAAwB;AACxE,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,aAAa,MAAM;AACxB,WAAO,QAAQ,KAAK;AAAA,EACrB;AAGA,MAAK,SAAS,GAAI;AACjB,WAAO;AAAA,EACR;AAEA,QAAM,aAAa;AAAA,IAClB,UAAU,gBAAgB,IAAI;AAAA,EAC/B;AAEA,SACC;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA,WAAU;AAAA,MACV,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,YAAW;AAAA,MACX,UAAS;AAAA,MACT;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,SAAU;AAAA,YACV,cAAa,GAAI,SAAU;AAAA,YAC3B,uBAAqB;AAAA,YAErB,8BAAC,YAAS;AAAA;AAAA,QACX;AAAA,QAGA;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,WAAU;AAAA,YACV,UAAW;AAAA,YAEX,8BAAC,QAAK,MAAO,aAAc;AAAA;AAAA,QAC5B;AAAA;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}

package/build-module/components/canvas/index.js

@@ -0,0 +1,51 @@
+// packages/boot/src/components/canvas/index.tsx
+import { useState, useEffect } from "@wordpress/element";
+import { Spinner } from "@wordpress/components";
+import BootBackButton from "./back-button";
+import { jsx } from "react/jsx-runtime";
+function Canvas({ canvas }) {
+  const [Editor, setEditor] = useState(null);
+  useEffect(() => {
+    import("@wordpress/lazy-editor").then((module) => {
+      setEditor(() => module.Editor);
+    }).catch((error) => {
+      console.error("Failed to load lazy editor:", error);
+    });
+  }, []);
+  if (!Editor) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100%",
+          padding: "2rem"
+        },
+        children: /* @__PURE__ */ jsx(Spinner, {})
+      }
+    );
+  }
+  const backButton = !canvas.isPreview ? ({ length }) => /* @__PURE__ */ jsx(BootBackButton, { length }) : void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { height: "100%" },
+      inert: canvas.isPreview ? "true" : void 0,
+      children: /* @__PURE__ */ jsx(
+        Editor,
+        {
+          postType: canvas.postType,
+          postId: canvas.postId,
+          settings: { isPreviewMode: canvas.isPreview },
+          backButton
+        }
+      )
+    }
+  );
+}
+export {
+  Canvas as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/components/canvas/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/canvas/index.tsx"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useEffect } from '@wordpress/element';\nimport { Spinner } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport type { CanvasData } from '../../store/types';\nimport BootBackButton from './back-button';\n\ninterface CanvasProps {\n\tcanvas: CanvasData;\n}\n\n/**\n * Canvas component that dynamically loads and renders the lazy editor.\n *\n * @param {Object} props        - Component props\n * @param {Object} props.canvas - Canvas data containing postType and postId\n * @return Canvas surface with editor\n */\nexport default function Canvas( { canvas }: CanvasProps ) {\n\tconst [ Editor, setEditor ] = useState< any >( null );\n\n\tuseEffect( () => {\n\t\t// Dynamically import the lazy-editor module\n\t\timport( '@wordpress/lazy-editor' )\n\t\t\t.then( ( module ) => {\n\t\t\t\tsetEditor( () => module.Editor );\n\t\t\t} )\n\t\t\t.catch( ( error ) => {\n\t\t\t\t// eslint-disable-next-line no-console\n\t\t\t\tconsole.error( 'Failed to load lazy editor:', error );\n\t\t\t} );\n\t}, [] );\n\n\t// Show spinner while loading the editor module\n\tif ( ! Editor ) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tstyle={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tjustifyContent: 'center',\n\t\t\t\t\talignItems: 'center',\n\t\t\t\t\theight: '100%',\n\t\t\t\t\tpadding: '2rem',\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<Spinner />\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Render back button in full-screen mode (when not preview)\n\t// Uses render prop pattern to receive fillProps from Slot\n\tconst backButton = ! canvas.isPreview\n\t\t? ( { length }: { length: number } ) => (\n\t\t\t\t<BootBackButton length={ length } />\n\t\t  )\n\t\t: undefined;\n\n\t// Render the editor with canvas data\n\treturn (\n\t\t<div\n\t\t\tstyle={ { height: '100%' } }\n\t\t\t// @ts-expect-error inert untyped properly.\n\t\t\tinert={ canvas.isPreview ? 'true' : undefined }\n\t\t>\n\t\t\t<Editor\n\t\t\t\tpostType={ canvas.postType }\n\t\t\t\tpostId={ canvas.postId }\n\t\t\t\tsettings={ { isPreviewMode: canvas.isPreview } }\n\t\t\t\tbackButton={ backButton }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n"],
+  "mappings": ";AAGA,SAAS,UAAU,iBAAiB;AACpC,SAAS,eAAe;AAMxB,OAAO,oBAAoB;AAwCvB;AA3BW,SAAR,OAAyB,EAAE,OAAO,GAAiB;AACzD,QAAM,CAAE,QAAQ,SAAU,IAAI,SAAiB,IAAK;AAEpD,YAAW,MAAM;AAEhB,WAAQ,wBAAyB,EAC/B,KAAM,CAAE,WAAY;AACpB,gBAAW,MAAM,OAAO,MAAO;AAAA,IAChC,CAAE,EACD,MAAO,CAAE,UAAW;AAEpB,cAAQ,MAAO,+BAA+B,KAAM;AAAA,IACrD,CAAE;AAAA,EACJ,GAAG,CAAC,CAAE;AAGN,MAAK,CAAE,QAAS;AACf,WACC;AAAA,MAAC;AAAA;AAAA,QACA,OAAQ;AAAA,UACP,SAAS;AAAA,UACT,gBAAgB;AAAA,UAChB,YAAY;AAAA,UACZ,QAAQ;AAAA,UACR,SAAS;AAAA,QACV;AAAA,QAEA,8BAAC,WAAQ;AAAA;AAAA,IACV;AAAA,EAEF;AAIA,QAAM,aAAa,CAAE,OAAO,YACzB,CAAE,EAAE,OAAO,MACX,oBAAC,kBAAe,QAAkB,IAElC;AAGH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,OAAQ,EAAE,QAAQ,OAAO;AAAA,MAEzB,OAAQ,OAAO,YAAY,SAAS;AAAA,MAEpC;AAAA,QAAC;AAAA;AAAA,UACA,UAAW,OAAO;AAAA,UAClB,QAAS,OAAO;AAAA,UAChB,UAAW,EAAE,eAAe,OAAO,UAAU;AAAA,UAC7C;AAAA;AAAA,MACD;AAAA;AAAA,EACD;AAEF;",
+  "names": []
+}