@wordpress/boot 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 0.16.0 (2026-06-24)
+
+### Enhancements
+
+-   `initSinglePage` now accepts an `initModules` option and runs page init modules before rendering, matching `init`.
+
 ## 0.15.1 (2026-06-16)
 
 ## 0.15.0 (2026-06-10)

package/README.md

@@ -0,0 +1,78 @@
+# Boot
+
+Minimal boot package for WordPress admin pages.
+It renders a single-page React application into an admin screen
+and wires up its routes, menu items, and startup modules.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/boot --save
+```
+
+## Usage
+
+The package exposes two entry points, one per admin page layout.
+A page's generated PHP imports `@wordpress/boot` and calls the matching
+function with the page configuration.
+The pages themselves are declared through the [`@wordpress/build` pages configuration](https://github.com/WordPress/gutenberg/tree/HEAD/packages/wp-build/README.md).
+
+### `init`
+
+Boots a full-screen application that takes over the admin screen with its own sidebar navigation. Used by pages generated in full-page mode (`page.php`).
+
+```js
+import { init } from '@wordpress/boot';
+
+init( {
+	mountId: 'my-page-app',
+	menuItems,
+	routes,
+	initModules,
+	dashboardLink,
+} );
+```
+
+### `initSinglePage`
+
+Boots an application embedded inside the standard wp-admin chrome, without the full-screen sidebar. Used by pages generated in wp-admin mode (`page-wp-admin.php`).
+
+```js
+import { initSinglePage } from '@wordpress/boot';
+
+initSinglePage( {
+	mountId: 'my-page-app',
+	routes,
+	initModules,
+} );
+```
+
+Both functions follow the same startup sequence:
+
+1. Register the page's `menuItems` and `routes` in the store.
+2. Run the page's init modules (see below).
+3. Render the application into `mountId`.
+
+## Init modules
+
+Init modules are script modules that run a one-time setup step at page startup, after menu items and routes are registered and before the app renders. They are useful for tasks that cannot be expressed in the page's static PHP configuration, such as assigning menu-item icons or registering core-data entities.
+
+Pass them as the `initModules` array. Each module must export an async `init` function:
+
+```js
+export async function init() {
+	// One-time startup work.
+}
+```
+
+Init modules are declared per page through the `wpPlugin.pages[].init` build configuration, which loads them as static dependencies and forwards their IDs to `init` and `initSinglePage`. See the [`@wordpress/build` init modules documentation](https://github.com/WordPress/gutenberg/tree/HEAD/packages/wp-build/README.md) for the configuration details.
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

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

@@ -9,6 +9,12 @@ function App({ rootComponent }) {
   const routes = useSelect((select) => select(store).getRoutes(), []);
   return /* @__PURE__ */ jsx(Router, { routes, rootComponent });
 }
+async function runInitModules(initModules) {
+  for (const moduleId of initModules ?? []) {
+    const module = await import(moduleId);
+    await module.init();
+  }
+}
 async function init({
   mountId,
   menuItems,
@@ -25,10 +31,7 @@ async function init({
   if (dashboardLink) {
     dispatch(store).setDashboardLink(dashboardLink);
   }
-  for (const moduleId of initModules ?? []) {
-    const module = await import(moduleId);
-    await module.init();
-  }
+  await runInitModules(initModules);
   const rootElement = document.getElementById(mountId);
   if (rootElement) {
     const root = createRoot(rootElement);
@@ -39,11 +42,13 @@ async function init({
 }
 async function initSinglePage({
   mountId,
-  routes
+  routes,
+  initModules
 }) {
   (routes ?? []).forEach((route) => {
     dispatch(store).registerRoute(route);
   });
+  await runInitModules(initModules);
   const rootElement = document.getElementById(mountId);
   if (rootElement) {
     const root = createRoot(rootElement);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/app/index.tsx"],
-  "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\tinitModules,\n\tdashboardLink,\n}: {\n\tmountId: string;\n\tmenuItems?: MenuItem[];\n\troutes?: Route[];\n\tinitModules?: string[];\n\tdashboardLink?: string;\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\tif ( dashboardLink ) {\n\t\tdispatch( store ).setDashboardLink( dashboardLink );\n\t}\n\n\tfor ( const moduleId of initModules ?? [] ) {\n\t\tconst module = await import( moduleId );\n\t\tawait module.init();\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;AAAA,EACA;AAAA,EACA;AACD,GAMI;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;AAEF,MAAK,eAAgB;AACpB,aAAU,KAAM,EAAE,iBAAkB,aAAc;AAAA,EACnD;AAEA,aAAY,YAAY,eAAe,CAAC,GAAI;AAC3C,UAAM,SAAS,MAAM,OAAQ;AAC7B,UAAM,OAAO,KAAK;AAAA,EACnB;AAGA,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;",
+  "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\ninterface AppProps {\n\trootComponent?: ComponentType;\n}\n\nfunction App( { rootComponent }: AppProps ) {\n\tconst routes = useSelect( ( select ) => select( store ).getRoutes(), [] );\n\n\treturn <Router routes={ routes } rootComponent={ rootComponent } />;\n}\n\n/*\n * Import and run page init modules.\n * Each module must export an async `init` function,\n * awaited before the app renders so startup tasks finish first.\n */\nasync function runInitModules( initModules?: string[] ) {\n\tfor ( const moduleId of initModules ?? [] ) {\n\t\tconst module = await import( moduleId );\n\t\tawait module.init();\n\t}\n}\n\ninterface InitProps {\n\tmountId: string;\n\tmenuItems?: MenuItem[];\n\troutes?: Route[];\n\tinitModules?: string[];\n\tdashboardLink?: string;\n}\n\nexport async function init( {\n\tmountId,\n\tmenuItems,\n\troutes,\n\tinitModules,\n\tdashboardLink,\n}: InitProps ) {\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\tif ( dashboardLink ) {\n\t\tdispatch( store ).setDashboardLink( dashboardLink );\n\t}\n\n\tawait runInitModules( initModules );\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\ninterface InitSinglePageProps {\n\tmountId: string;\n\troutes?: Route[];\n\tinitModules?: string[];\n}\n\nexport async function initSinglePage( {\n\tmountId,\n\troutes,\n\tinitModules,\n}: InitSinglePageProps ) {\n\t( routes ?? [] ).forEach( ( route ) => {\n\t\tdispatch( store ).registerRoute( route );\n\t} );\n\n\tawait runInitModules( initModules );\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;AAUd;AAHR,SAAS,IAAK,EAAE,cAAc,GAAc;AAC3C,QAAM,SAAS,UAAW,CAAE,WAAY,OAAQ,KAAM,EAAE,UAAU,GAAG,CAAC,CAAE;AAExE,SAAO,oBAAC,UAAO,QAAkB,eAAgC;AAClE;AAOA,eAAe,eAAgB,aAAyB;AACvD,aAAY,YAAY,eAAe,CAAC,GAAI;AAC3C,UAAM,SAAS,MAAM,OAAQ;AAC7B,UAAM,OAAO,KAAK;AAAA,EACnB;AACD;AAUA,eAAsB,KAAM;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAe;AACd,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;AAEF,MAAK,eAAgB;AACpB,aAAU,KAAM,EAAE,iBAAkB,aAAc;AAAA,EACnD;AAEA,QAAM,eAAgB,WAAY;AAGlC,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;AAQA,eAAsB,eAAgB;AAAA,EACrC;AAAA,EACA;AAAA,EACA;AACD,GAAyB;AACxB,GAAE,UAAU,CAAC,GAAI,QAAS,CAAE,UAAW;AACtC,aAAU,KAAM,EAAE,cAAe,KAAM;AAAA,EACxC,CAAE;AAEF,QAAM,eAAgB,WAAY;AAGlC,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/use-route-title.mjs

@@ -33,7 +33,7 @@ function useRouteTitle() {
       const decodedSiteTitle = decodeEntities(siteTitle);
       const formattedTitle = sprintf(
         /* translators: Admin document title. 1: Admin screen name, 2: Site name. */
-        __("%1$s \u2039 %2$s \u2014 WordPress"),
+        __("%1$s ‹ %2$s — WordPress"),
         decodedRouteTitle,
         decodedSiteTitle
       );

package/build-module/components/app/use-route-title.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/app/use-route-title.ts"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore, type UnstableBase } from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { privateApis as routePrivateApis } from '@wordpress/route';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useLocation, useMatches } = unlock( routePrivateApis );\n\n/**\n * Hook that manages document title updates based on route changes.\n * Formats titles with WordPress conventions and announces them to screen readers.\n *\n * This hook should be called from the Root component to ensure it runs on every route.\n */\nexport default function useRouteTitle() {\n\tconst location = useLocation();\n\tconst matches = useMatches();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst routeTitle = ( currentMatch?.loaderData as any )?.title as\n\t\t| string\n\t\t| undefined;\n\n\tconst siteTitle = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecord< UnstableBase >(\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase'\n\t\t\t)?.name,\n\t\t[]\n\t);\n\n\tconst isInitialLocationRef = useRef( true );\n\n\tuseEffect( () => {\n\t\tisInitialLocationRef.current = false;\n\t}, [ location ] );\n\n\tuseEffect( () => {\n\t\t// Don't update or announce the title for initial page load.\n\t\tif ( isInitialLocationRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\trouteTitle &&\n\t\t\ttypeof routeTitle === 'string' &&\n\t\t\tsiteTitle &&\n\t\t\ttypeof siteTitle === 'string'\n\t\t) {\n\t\t\t// Decode entities for display\n\t\t\tconst decodedRouteTitle = decodeEntities( routeTitle );\n\t\t\tconst decodedSiteTitle = decodeEntities( siteTitle );\n\n\t\t\t// Format title following WordPress admin conventions\n\t\t\tconst formattedTitle = sprintf(\n\t\t\t\t/* translators: Admin document title. 1: Admin screen name, 2: Site name. */\n\t\t\t\t__( '%1$s \u2039 %2$s \u2014 WordPress' ),\n\t\t\t\tdecodedRouteTitle,\n\t\t\t\tdecodedSiteTitle\n\t\t\t);\n\n\t\t\tdocument.title = formattedTitle;\n\n\t\t\t// Announce title on route change for screen readers.\n\t\t\tif ( decodedRouteTitle ) {\n\t\t\t\tspeak( decodedRouteTitle, 'assertive' );\n\t\t\t}\n\t\t}\n\t}, [ routeTitle, siteTitle, location ] );\n}\n"],
-  "mappings": ";AAGA,SAAS,WAAW,cAAc;AAClC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAoC;AACtD,SAAS,IAAI,eAAe;AAC5B,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAC/B,SAAS,eAAe,wBAAwB;AAKhD,SAAS,cAAc;AAEvB,IAAM,EAAE,aAAa,WAAW,IAAI,OAAQ,gBAAiB;AAQ9C,SAAR,gBAAiC;AACvC,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,WAAW;AAC3B,QAAM,eAAe,QAAS,QAAQ,SAAS,CAAE;AACjD,QAAM,aAAe,cAAc,YAAqB;AAIxD,QAAM,YAAY;AAAA,IACjB,CAAE,WACD,OAAQ,SAAU,EAAE;AAAA,MACnB;AAAA,MACA;AAAA,IACD,GAAG;AAAA,IACJ,CAAC;AAAA,EACF;AAEA,QAAM,uBAAuB,OAAQ,IAAK;AAE1C,YAAW,MAAM;AAChB,yBAAqB,UAAU;AAAA,EAChC,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAEhB,QAAK,qBAAqB,SAAU;AACnC;AAAA,IACD;AAEA,QACC,cACA,OAAO,eAAe,YACtB,aACA,OAAO,cAAc,UACpB;AAED,YAAM,oBAAoB,eAAgB,UAAW;AACrD,YAAM,mBAAmB,eAAgB,SAAU;AAGnD,YAAM,iBAAiB;AAAA;AAAA,QAEtB,GAAI,mCAA0B;AAAA,QAC9B;AAAA,QACA;AAAA,MACD;AAEA,eAAS,QAAQ;AAGjB,UAAK,mBAAoB;AACxB,cAAO,mBAAmB,WAAY;AAAA,MACvC;AAAA,IACD;AAAA,EACD,GAAG,CAAE,YAAY,WAAW,QAAS,CAAE;AACxC;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore, type UnstableBase } from '@wordpress/core-data';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { speak } from '@wordpress/a11y';\nimport { decodeEntities } from '@wordpress/html-entities';\nimport { privateApis as routePrivateApis } from '@wordpress/route';\n\n/**\n * Internal dependencies\n */\nimport { unlock } from '../../lock-unlock';\n\nconst { useLocation, useMatches } = unlock( routePrivateApis );\n\n/**\n * Hook that manages document title updates based on route changes.\n * Formats titles with WordPress conventions and announces them to screen readers.\n *\n * This hook should be called from the Root component to ensure it runs on every route.\n */\nexport default function useRouteTitle() {\n\tconst location = useLocation();\n\tconst matches = useMatches();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst routeTitle = ( currentMatch?.loaderData as any )?.title as\n\t\t| string\n\t\t| undefined;\n\n\tconst siteTitle = useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecord< UnstableBase >(\n\t\t\t\t'root',\n\t\t\t\t'__unstableBase'\n\t\t\t)?.name,\n\t\t[]\n\t);\n\n\tconst isInitialLocationRef = useRef( true );\n\n\tuseEffect( () => {\n\t\tisInitialLocationRef.current = false;\n\t}, [ location ] );\n\n\tuseEffect( () => {\n\t\t// Don't update or announce the title for initial page load.\n\t\tif ( isInitialLocationRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif (\n\t\t\trouteTitle &&\n\t\t\ttypeof routeTitle === 'string' &&\n\t\t\tsiteTitle &&\n\t\t\ttypeof siteTitle === 'string'\n\t\t) {\n\t\t\t// Decode entities for display\n\t\t\tconst decodedRouteTitle = decodeEntities( routeTitle );\n\t\t\tconst decodedSiteTitle = decodeEntities( siteTitle );\n\n\t\t\t// Format title following WordPress admin conventions\n\t\t\tconst formattedTitle = sprintf(\n\t\t\t\t/* translators: Admin document title. 1: Admin screen name, 2: Site name. */\n\t\t\t\t__( '%1$s ‹ %2$s — WordPress' ),\n\t\t\t\tdecodedRouteTitle,\n\t\t\t\tdecodedSiteTitle\n\t\t\t);\n\n\t\t\tdocument.title = formattedTitle;\n\n\t\t\t// Announce title on route change for screen readers.\n\t\t\tif ( decodedRouteTitle ) {\n\t\t\t\tspeak( decodedRouteTitle, 'assertive' );\n\t\t\t}\n\t\t}\n\t}, [ routeTitle, siteTitle, location ] );\n}\n"],
+  "mappings": ";AAGA,SAAS,WAAW,cAAc;AAClC,SAAS,iBAAiB;AAC1B,SAAS,SAAS,iBAAoC;AACtD,SAAS,IAAI,eAAe;AAC5B,SAAS,aAAa;AACtB,SAAS,sBAAsB;AAC/B,SAAS,eAAe,wBAAwB;AAKhD,SAAS,cAAc;AAEvB,IAAM,EAAE,aAAa,WAAW,IAAI,OAAQ,gBAAiB;AAQ9C,SAAR,gBAAiC;AACvC,QAAM,WAAW,YAAY;AAC7B,QAAM,UAAU,WAAW;AAC3B,QAAM,eAAe,QAAS,QAAQ,SAAS,CAAE;AACjD,QAAM,aAAe,cAAc,YAAqB;AAIxD,QAAM,YAAY;AAAA,IACjB,CAAE,WACD,OAAQ,SAAU,EAAE;AAAA,MACnB;AAAA,MACA;AAAA,IACD,GAAG;AAAA,IACJ,CAAC;AAAA,EACF;AAEA,QAAM,uBAAuB,OAAQ,IAAK;AAE1C,YAAW,MAAM;AAChB,yBAAqB,UAAU;AAAA,EAChC,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAEhB,QAAK,qBAAqB,SAAU;AACnC;AAAA,IACD;AAEA,QACC,cACA,OAAO,eAAe,YACtB,aACA,OAAO,cAAc,UACpB;AAED,YAAM,oBAAoB,eAAgB,UAAW;AACrD,YAAM,mBAAmB,eAAgB,SAAU;AAGnD,YAAM,iBAAiB;AAAA;AAAA,QAEtB,GAAI,yBAA0B;AAAA,QAC9B;AAAA,QACA;AAAA,MACD;AAEA,eAAS,QAAQ;AAGjB,UAAK,mBAAoB;AACxB,cAAO,mBAAmB,WAAY;AAAA,MACvC;AAAA,IACD;AAAA,EACD,GAAG,CAAE,YAAY,WAAW,QAAS,CAAE;AACxC;",
   "names": []
 }

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

@@ -10,10 +10,10 @@ import { __, isRTL } from "@wordpress/i18n";
 import SiteIcon from "../site-icon/index.mjs";
 
 // packages/boot/src/components/canvas/back-button.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='c51646152c']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='2e0c99a4a7']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "c51646152c");
-  style.appendChild(document.createTextNode(".boot-canvas-back-button{height:64px;left:0;position:absolute;top:0;width:64px;z-index:100}.boot-canvas-back-button__container{height:100%;position:relative;width:100%}.boot-canvas-back-button__link.components-button{align-items:center;background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);border-radius:0;display:inline-flex;height:64px;justify-content:center;padding:0;text-decoration:none;width:64px}@media not (prefers-reduced-motion){.boot-canvas-back-button__link.components-button{transition:outline .1s ease-out}}.boot-canvas-back-button__link.components-button:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}.boot-canvas-back-button__icon{align-items:center;background-color:#ccc;display:flex;height:64px;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:64px}.boot-canvas-back-button__icon svg{fill:currentColor}.boot-canvas-back-button__icon.has-site-icon{-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px);background-color:hsla(0,0%,100%,.6)}.interface-interface-skeleton__header{margin-top:0!important}"));
+  style.setAttribute("data-wp-hash", "2e0c99a4a7");
+  style.appendChild(document.createTextNode(".boot-canvas-back-button{height:64px;left:0;position:absolute;top:0;width:64px;z-index:100}.boot-canvas-back-button__container{height:100%;position:relative;width:100%}.boot-canvas-back-button__link.components-button{align-items:center;background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);border-radius:0;display:inline-flex;height:64px;justify-content:center;padding:0;text-decoration:none;width:64px}@media not (prefers-reduced-motion){.boot-canvas-back-button__link.components-button{transition:outline .1s ease-out}}.boot-canvas-back-button__link.components-button:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}.boot-canvas-back-button__icon{align-items:center;background-color:#ccc;display:flex;height:64px;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:64px}.boot-canvas-back-button__icon svg{fill:currentColor}.boot-canvas-back-button__icon.has-site-icon{-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px);background-color:hsla(0,0%,100%,.6)}.interface-interface-skeleton__header{margin-top:0!important}"));
   document.head.appendChild(style);
 }
 

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

@@ -1,7 +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 as WCIcon,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { arrowUpLeft, arrowUpRight } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __, isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport SiteIcon from '../site-icon';\nimport './back-button.scss';\n\ndeclare global {\n\tinterface Window {\n\t\t__experimentalAdminBarInEditor?: boolean;\n\t}\n}\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\tconst hasAdminBarInEditor = window.__experimentalAdminBarInEditor;\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\tconst arrowIcon = isRTL() ? arrowUpRight : arrowUpLeft;\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{ ! hasAdminBarInEditor && <SiteIcon /> }\n\t\t\t</Button>\n\n\t\t\t{ hasAdminBarInEditor ? (\n\t\t\t\t<div className=\"boot-canvas-back-button__icon\">\n\t\t\t\t\t<WCIcon icon={ arrowIcon } />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t/* Overlay arrow that appears on hover */\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"boot-canvas-back-button__icon\"\n\t\t\t\t\tvariants={ toggleHomeIconVariants }\n\t\t\t\t>\n\t\t\t\t\t<WCIcon icon={ arrowIcon } />\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</motion.div>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='c51646152c']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"c51646152c\");\n\tstyle.appendChild(document.createTextNode(\".boot-canvas-back-button{height:64px;left:0;position:absolute;top:0;width:64px;z-index:100}.boot-canvas-back-button__container{height:100%;position:relative;width:100%}.boot-canvas-back-button__link.components-button{align-items:center;background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);border-radius:0;display:inline-flex;height:64px;justify-content:center;padding:0;text-decoration:none;width:64px}@media not (prefers-reduced-motion){.boot-canvas-back-button__link.components-button{transition:outline .1s ease-out}}.boot-canvas-back-button__link.components-button:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus-brand,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}.boot-canvas-back-button__icon{align-items:center;background-color:#ccc;display:flex;height:64px;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:64px}.boot-canvas-back-button__icon svg{fill:currentColor}.boot-canvas-back-button__icon.has-site-icon{-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px);background-color:hsla(0,0%,100%,.6)}.interface-interface-skeleton__header{margin-top:0!important}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,OACd;AACP,SAAS,aAAa,oBAAoB;AAC1C,SAAS,wBAAwB;AACjC,SAAS,IAAI,aAAa;AAK1B,OAAO,cAAc;;;ACfrB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,wyCAAwyC,CAAC;AACn1C,WAAS,KAAK,YAAY,KAAK;AAChC;;;AD+DE,SAc6B,KAd7B;AAxCF,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;AACvC,QAAM,sBAAsB,OAAO;AAEnC,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,QAAM,YAAY,MAAM,IAAI,eAAe;AAE3C,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,YAEnB,WAAE,uBAAuB,oBAAC,YAAS;AAAA;AAAA,QACtC;AAAA,QAEE,sBACD,oBAAC,SAAI,WAAU,iCACd,8BAAC,UAAO,MAAO,WAAY,GAC5B;AAAA;AAAA,UAGA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACA,WAAU;AAAA,cACV,UAAW;AAAA,cAEX,8BAAC,UAAO,MAAO,WAAY;AAAA;AAAA,UAC5B;AAAA;AAAA;AAAA;AAAA,EAEF;AAEF;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tIcon as WCIcon,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { arrowUpLeft, arrowUpRight } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\nimport { __, isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport SiteIcon from '../site-icon';\nimport './back-button.scss';\n\ndeclare global {\n\tinterface Window {\n\t\t__experimentalAdminBarInEditor?: boolean;\n\t}\n}\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\tconst hasAdminBarInEditor = window.__experimentalAdminBarInEditor;\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\tconst arrowIcon = isRTL() ? arrowUpRight : arrowUpLeft;\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{ ! hasAdminBarInEditor && <SiteIcon /> }\n\t\t\t</Button>\n\n\t\t\t{ hasAdminBarInEditor ? (\n\t\t\t\t<div className=\"boot-canvas-back-button__icon\">\n\t\t\t\t\t<WCIcon icon={ arrowIcon } />\n\t\t\t\t</div>\n\t\t\t) : (\n\t\t\t\t/* Overlay arrow that appears on hover */\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"boot-canvas-back-button__icon\"\n\t\t\t\t\tvariants={ toggleHomeIconVariants }\n\t\t\t\t>\n\t\t\t\t\t<WCIcon icon={ arrowIcon } />\n\t\t\t\t</motion.div>\n\t\t\t) }\n\t\t</motion.div>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='2e0c99a4a7']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"2e0c99a4a7\");\n\tstyle.appendChild(document.createTextNode(\".boot-canvas-back-button{height:64px;left:0;position:absolute;top:0;width:64px;z-index:100}.boot-canvas-back-button__container{height:100%;position:relative;width:100%}.boot-canvas-back-button__link.components-button{align-items:center;background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);border-radius:0;display:inline-flex;height:64px;justify-content:center;padding:0;text-decoration:none;width:64px}@media not (prefers-reduced-motion){.boot-canvas-back-button__link.components-button{transition:outline .1s ease-out}}.boot-canvas-back-button__link.components-button:focus:not(:active){outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:calc(var(--wpds-border-width-focus, var(--wp-admin-border-width-focus, 2px))*-1)}.boot-canvas-back-button__icon{align-items:center;background-color:#ccc;display:flex;height:64px;justify-content:center;left:0;pointer-events:none;position:absolute;top:0;width:64px}.boot-canvas-back-button__icon svg{fill:currentColor}.boot-canvas-back-button__icon.has-site-icon{-webkit-backdrop-filter:saturate(180%) blur(15px);backdrop-filter:saturate(180%) blur(15px);background-color:hsla(0,0%,100%,.6)}.interface-interface-skeleton__header{margin-top:0!important}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": ";AAGA;AAAA,EACC;AAAA,EACA,QAAQ;AAAA,EACR,oBAAoB;AAAA,OACd;AACP,SAAS,aAAa,oBAAoB;AAC1C,SAAS,wBAAwB;AACjC,SAAS,IAAI,aAAa;AAK1B,OAAO,cAAc;;;ACfrB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,0yCAA0yC,CAAC;AACr1C,WAAS,KAAK,YAAY,KAAK;AAChC;;;AD+DE,SAc6B,KAd7B;AAxCF,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;AACvC,QAAM,sBAAsB,OAAO;AAEnC,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,QAAM,YAAY,MAAM,IAAI,eAAe;AAE3C,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,YAEnB,WAAE,uBAAuB,oBAAC,YAAS;AAAA;AAAA,QACtC;AAAA,QAEE,sBACD,oBAAC,SAAI,WAAU,iCACd,8BAAC,UAAO,MAAO,WAAY,GAC5B;AAAA;AAAA,UAGA;AAAA,YAAC,OAAO;AAAA,YAAP;AAAA,cACA,WAAU;AAAA,cACV,UAAW;AAAA,cAEX,8BAAC,UAAO,MAAO,WAAY;AAAA;AAAA,UAC5B;AAAA;AAAA;AAAA;AAAA,EAEF;AAEF;",
   "names": []
 }

package/build-module/components/navigation/navigation-item/index.mjs

@@ -9,10 +9,10 @@ import RouterLinkItem from "../router-link-item.mjs";
 import { wrapIcon } from "../items.mjs";
 
 // packages/boot/src/components/navigation/navigation-item/style.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='26b8e27d3f']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='4ccd27ec79']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "26b8e27d3f");
-  style.appendChild(document.createTextNode('.boot-navigation-item.components-item{align-items:center;border:none;color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);display:flex;font-family:-apple-system,"system-ui",Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;font-weight:400;line-height:20px;margin-block-end:4px;margin-inline:12px;min-height:32px;padding-block:0;padding-inline:4px;width:calc(100% - 24px)}.boot-dropdown-item__children .boot-navigation-item.components-item{min-height:24px}.boot-navigation-item.components-item{border-radius:var(--wpds-border-radius-sm,2px)}.boot-navigation-item.components-item.active,.boot-navigation-item.components-item:focus,.boot-navigation-item.components-item:hover,.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-fg-interactive-brand-active,var(--wp-admin-theme-color,#3858e9))}.boot-navigation-item.components-item.active{font-weight:499}.boot-navigation-item.components-item svg:last-child{padding:4px}.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-fg-interactive-brand-active,var(--wp-admin-theme-color,#3858e9));font-weight:499}.boot-navigation-item.components-item:focus-visible{transform:translateZ(0)}.boot-navigation-item.components-item.with-suffix{padding-right:16px}'));
+  style.setAttribute("data-wp-hash", "4ccd27ec79");
+  style.appendChild(document.createTextNode('.boot-navigation-item.components-item{align-items:center;border:none;color:var(--wpds-color-foreground-interactive-neutral,#1e1e1e);display:flex;font-family:-apple-system,"system-ui",Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;font-weight:400;line-height:20px;margin-block-end:4px;margin-inline:12px;min-height:32px;padding-block:0;padding-inline:4px;width:calc(100% - 24px)}.boot-dropdown-item__children .boot-navigation-item.components-item{min-height:24px}.boot-navigation-item.components-item{border-radius:var(--wpds-border-radius-sm,2px)}.boot-navigation-item.components-item.active,.boot-navigation-item.components-item:focus,.boot-navigation-item.components-item:hover,.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000))}.boot-navigation-item.components-item.active{font-weight:499}.boot-navigation-item.components-item svg:last-child{padding:4px}.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000));font-weight:499}.boot-navigation-item.components-item:focus-visible{transform:translateZ(0)}.boot-navigation-item.components-item.with-suffix{padding-right:16px}'));
   document.head.appendChild(style);
 }
 

package/build-module/components/navigation/navigation-item/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/navigation/navigation-item/index.tsx", "../../../../src/components/navigation/navigation-item/style.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlexBlock,\n\t__experimentalItem as Item,\n\t// @ts-ignore\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport RouterLinkItem from '../router-link-item';\nimport { wrapIcon } from '../items';\nimport type { IconType } from '../../../store/types';\nimport './style.scss';\n\ninterface NavigationItemProps {\n\t/**\n\t * Optional CSS class name.\n\t */\n\tclassName?: string;\n\t/**\n\t * Icon to display with the navigation item.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Whether to show placeholder icons for alignment.\n\t */\n\tshouldShowPlaceholder?: boolean;\n\t/**\n\t * Content to display inside the navigation item.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The path to navigate to.\n\t */\n\tto: string;\n}\n\nexport default function NavigationItem( {\n\tclassName,\n\ticon,\n\tshouldShowPlaceholder = true,\n\tchildren,\n\tto,\n}: NavigationItemProps ) {\n\t// Check if the 'to' prop is an external URL\n\tconst isExternal = ! String(\n\t\tnew URL( to, window.location.origin )\n\t).startsWith( window.location.origin );\n\n\tconst content = (\n\t\t<HStack justify=\"flex-start\" spacing={ 2 } style={ { flexGrow: '1' } }>\n\t\t\t{ wrapIcon( icon, shouldShowPlaceholder ) }\n\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t</HStack>\n\t);\n\n\tif ( isExternal ) {\n\t\t// Render as a regular anchor tag for external URLs\n\t\treturn (\n\t\t\t<Item\n\t\t\t\tas=\"a\"\n\t\t\t\thref={ to }\n\t\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t</Item>\n\t\t);\n\t}\n\n\treturn (\n\t\t<RouterLinkItem\n\t\t\tto={ to }\n\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t>\n\t\t\t{ content }\n\t\t</RouterLinkItem>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='26b8e27d3f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"26b8e27d3f\");\n\tstyle.appendChild(document.createTextNode(\".boot-navigation-item.components-item{align-items:center;border:none;color:var(--wpds-color-fg-interactive-neutral,#1e1e1e);display:flex;font-family:-apple-system,\\\"system-ui\\\",Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;font-weight:400;line-height:20px;margin-block-end:4px;margin-inline:12px;min-height:32px;padding-block:0;padding-inline:4px;width:calc(100% - 24px)}.boot-dropdown-item__children .boot-navigation-item.components-item{min-height:24px}.boot-navigation-item.components-item{border-radius:var(--wpds-border-radius-sm,2px)}.boot-navigation-item.components-item.active,.boot-navigation-item.components-item:focus,.boot-navigation-item.components-item:hover,.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-fg-interactive-brand-active,var(--wp-admin-theme-color,#3858e9))}.boot-navigation-item.components-item.active{font-weight:499}.boot-navigation-item.components-item svg:last-child{padding:4px}.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-fg-interactive-brand-active,var(--wp-admin-theme-color,#3858e9));font-weight:499}.boot-navigation-item.components-item:focus-visible{transform:translateZ(0)}.boot-navigation-item.components-item.with-suffix{padding-right:16px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAMjB;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EAEtB,wBAAwB;AAAA,OAClB;AAKP,OAAO,oBAAoB;AAC3B,SAAS,gBAAgB;;;ACpBzB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,0wCAA4wC,CAAC;AACvzC,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuDE,SAEC,KAFD;AAba,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB;AAAA,EACA;AACD,GAAyB;AAExB,QAAM,aAAa,CAAE;AAAA,IACpB,IAAI,IAAK,IAAI,OAAO,SAAS,MAAO;AAAA,EACrC,EAAE,WAAY,OAAO,SAAS,MAAO;AAErC,QAAM,UACL,qBAAC,UAAO,SAAQ,cAAa,SAAU,GAAI,OAAQ,EAAE,UAAU,IAAI,GAChE;AAAA,aAAU,MAAM,qBAAsB;AAAA,IACxC,oBAAC,aAAY,UAAU;AAAA,KACxB;AAGD,MAAK,YAAa;AAEjB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAG;AAAA,QACH,MAAO;AAAA,QACP,WAAY,KAAM,wBAAwB,SAAU;AAAA,QAElD;AAAA;AAAA,IACH;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAY,KAAM,wBAAwB,SAAU;AAAA,MAElD;AAAA;AAAA,EACH;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tFlexBlock,\n\t__experimentalItem as Item,\n\t// @ts-ignore\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport RouterLinkItem from '../router-link-item';\nimport { wrapIcon } from '../items';\nimport type { IconType } from '../../../store/types';\nimport './style.scss';\n\ninterface NavigationItemProps {\n\t/**\n\t * Optional CSS class name.\n\t */\n\tclassName?: string;\n\t/**\n\t * Icon to display with the navigation item.\n\t */\n\ticon?: IconType;\n\t/**\n\t * Whether to show placeholder icons for alignment.\n\t */\n\tshouldShowPlaceholder?: boolean;\n\t/**\n\t * Content to display inside the navigation item.\n\t */\n\tchildren: ReactNode;\n\t/**\n\t * The path to navigate to.\n\t */\n\tto: string;\n}\n\nexport default function NavigationItem( {\n\tclassName,\n\ticon,\n\tshouldShowPlaceholder = true,\n\tchildren,\n\tto,\n}: NavigationItemProps ) {\n\t// Check if the 'to' prop is an external URL\n\tconst isExternal = ! String(\n\t\tnew URL( to, window.location.origin )\n\t).startsWith( window.location.origin );\n\n\tconst content = (\n\t\t<HStack justify=\"flex-start\" spacing={ 2 } style={ { flexGrow: '1' } }>\n\t\t\t{ wrapIcon( icon, shouldShowPlaceholder ) }\n\t\t\t<FlexBlock>{ children }</FlexBlock>\n\t\t</HStack>\n\t);\n\n\tif ( isExternal ) {\n\t\t// Render as a regular anchor tag for external URLs\n\t\treturn (\n\t\t\t<Item\n\t\t\t\tas=\"a\"\n\t\t\t\thref={ to }\n\t\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t\t>\n\t\t\t\t{ content }\n\t\t\t</Item>\n\t\t);\n\t}\n\n\treturn (\n\t\t<RouterLinkItem\n\t\t\tto={ to }\n\t\t\tclassName={ clsx( 'boot-navigation-item', className ) }\n\t\t>\n\t\t\t{ content }\n\t\t</RouterLinkItem>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='4ccd27ec79']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"4ccd27ec79\");\n\tstyle.appendChild(document.createTextNode(\".boot-navigation-item.components-item{align-items:center;border:none;color:var(--wpds-color-foreground-interactive-neutral,#1e1e1e);display:flex;font-family:-apple-system,\\\"system-ui\\\",Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;font-size:13px;font-weight:400;line-height:20px;margin-block-end:4px;margin-inline:12px;min-height:32px;padding-block:0;padding-inline:4px;width:calc(100% - 24px)}.boot-dropdown-item__children .boot-navigation-item.components-item{min-height:24px}.boot-navigation-item.components-item{border-radius:var(--wpds-border-radius-sm,2px)}.boot-navigation-item.components-item.active,.boot-navigation-item.components-item:focus,.boot-navigation-item.components-item:hover,.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000))}.boot-navigation-item.components-item.active{font-weight:499}.boot-navigation-item.components-item svg:last-child{padding:4px}.boot-navigation-item.components-item[aria-current=true]{color:var(--wpds-color-foreground-interactive-brand-active,color-mix(in oklch,var(--wp-admin-theme-color,#3858e9) 52%,#000));font-weight:499}.boot-navigation-item.components-item:focus-visible{transform:translateZ(0)}.boot-navigation-item.components-item.with-suffix{padding-right:16px}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAMjB;AAAA,EACC;AAAA,EACA,sBAAsB;AAAA,EAEtB,wBAAwB;AAAA,OAClB;AAKP,OAAO,oBAAoB;AAC3B,SAAS,gBAAgB;;;ACpBzB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,41CAA81C,CAAC;AACz4C,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADuDE,SAEC,KAFD;AAba,SAAR,eAAiC;AAAA,EACvC;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB;AAAA,EACA;AACD,GAAyB;AAExB,QAAM,aAAa,CAAE;AAAA,IACpB,IAAI,IAAK,IAAI,OAAO,SAAS,MAAO;AAAA,EACrC,EAAE,WAAY,OAAO,SAAS,MAAO;AAErC,QAAM,UACL,qBAAC,UAAO,SAAQ,cAAa,SAAU,GAAI,OAAQ,EAAE,UAAU,IAAI,GAChE;AAAA,aAAU,MAAM,qBAAsB;AAAA,IACxC,oBAAC,aAAY,UAAU;AAAA,KACxB;AAGD,MAAK,YAAa;AAEjB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,IAAG;AAAA,QACH,MAAO;AAAA,QACP,WAAY,KAAM,wBAAwB,SAAU;AAAA,QAElD;AAAA;AAAA,IACH;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAY,KAAM,wBAAwB,SAAU;AAAA,MAElD;AAAA;AAAA,EACH;AAEF;",
   "names": []
 }

package/build-module/components/navigation/navigation-screen/index.mjs

@@ -11,10 +11,10 @@ import { chevronRight, chevronLeft } from "@wordpress/icons";
 import { useReducedMotion } from "@wordpress/compose";
 
 // packages/boot/src/components/navigation/navigation-screen/style.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='c5e42e1495']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='db54ac7e93']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "c5e42e1495");
-  style.appendChild(document.createTextNode(".boot-navigation-screen{padding-block-end:4px}.boot-navigation-screen .components-text{color:var(--wpds-color-fg-content-neutral,#1e1e1e)}.boot-navigation-screen__title-icon{padding:12px 16px 8px;position:sticky;top:0}.boot-navigation-screen__title{flex-grow:1;overflow-wrap:break-word}.boot-navigation-screen__title.boot-navigation-screen__title,.boot-navigation-screen__title.boot-navigation-screen__title .boot-navigation-screen__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);line-height:32px}.boot-navigation-screen__actions{display:flex;flex-shrink:0}"));
+  style.setAttribute("data-wp-hash", "db54ac7e93");
+  style.appendChild(document.createTextNode(".boot-navigation-screen{padding-block-end:4px}.boot-navigation-screen .components-text{color:var(--wpds-color-foreground-content-neutral,#1e1e1e)}.boot-navigation-screen__title-icon{padding:12px 16px 8px;position:sticky;top:0}.boot-navigation-screen__title{flex-grow:1;overflow-wrap:break-word}.boot-navigation-screen__title.boot-navigation-screen__title,.boot-navigation-screen__title.boot-navigation-screen__title .boot-navigation-screen__title{color:var(--wpds-color-foreground-content-neutral,#1e1e1e);line-height:32px}.boot-navigation-screen__actions{display:flex;flex-shrink:0}"));
   document.head.appendChild(style);
 }
 

package/build-module/components/navigation/navigation-screen/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/components/navigation/navigation-screen/index.tsx", "../../../../src/components/navigation/navigation-screen/style.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\tButton,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport './style.scss';\n\nconst ANIMATION_DURATION = 0.3;\nconst slideVariants = {\n\tinitial: ( direction: 'forward' | 'backward' ) => ( {\n\t\tx: direction === 'forward' ? 100 : -100,\n\t\topacity: 0,\n\t} ),\n\tanimate: {\n\t\tx: 0,\n\t\topacity: 1,\n\t},\n\texit: ( direction: 'forward' | 'backward' ) => ( {\n\t\tx: direction === 'forward' ? 100 : -100,\n\t\topacity: 0,\n\t} ),\n};\n\nexport default function NavigationScreen( {\n\tisRoot,\n\ttitle,\n\tactions,\n\tcontent,\n\tdescription,\n\tanimationDirection,\n\tbackMenuItem,\n\tbackButtonRef,\n\tnavigationKey,\n\tonNavigate,\n}: {\n\tisRoot?: boolean;\n\ttitle: string;\n\tactions?: ReactNode;\n\tcontent: ReactNode;\n\tdescription?: ReactNode;\n\tbackMenuItem?: string;\n\tbackButtonRef?: RefObject< HTMLButtonElement | null >;\n\tanimationDirection?: 'forward' | 'backward';\n\tnavigationKey?: string;\n\tonNavigate: ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => void;\n} ) {\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\tconst disableMotion = useReducedMotion();\n\n\tconst handleBackClick = ( e: React.MouseEvent ) => {\n\t\te.preventDefault();\n\t\tonNavigate( { id: backMenuItem, direction: 'backward' } );\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"boot-navigation-screen\"\n\t\t\tstyle={ {\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tposition: 'relative',\n\t\t\t\tdisplay: 'grid',\n\t\t\t\tgridTemplateColumns: '1fr',\n\t\t\t\tgridTemplateRows: '1fr',\n\t\t\t} }\n\t\t>\n\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ navigationKey }\n\t\t\t\t\tcustom={ animationDirection }\n\t\t\t\t\tvariants={ slideVariants }\n\t\t\t\t\tinitial=\"initial\"\n\t\t\t\t\tanimate=\"animate\"\n\t\t\t\t\texit=\"exit\"\n\t\t\t\t\ttransition={ {\n\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\t\t\t\t\tease: [ 0.33, 0, 0, 1 ],\n\t\t\t\t\t} }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tgridColumn: '1',\n\t\t\t\t\t\tgridRow: '1',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\tclassName=\"boot-navigation-screen__title-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isRoot && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ backButtonRef }\n\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\tonClick={ handleBackClick }\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\tclassName=\"boot-navigation-screen__title\"\n\t\t\t\t\t\t\tlevel={ 1 }\n\t\t\t\t\t\t\tsize=\"15px\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t{ actions && (\n\t\t\t\t\t\t\t<div className=\"boot-navigation-screen__actions\">\n\t\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\n\t\t\t\t\t{ description && (\n\t\t\t\t\t\t<div className=\"boot-navigation-screen__description\">\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ content }\n\t\t\t\t</motion.div>\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='c5e42e1495']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"c5e42e1495\");\n\tstyle.appendChild(document.createTextNode(\".boot-navigation-screen{padding-block-end:4px}.boot-navigation-screen .components-text{color:var(--wpds-color-fg-content-neutral,#1e1e1e)}.boot-navigation-screen__title-icon{padding:12px 16px 8px;position:sticky;top:0}.boot-navigation-screen__title{flex-grow:1;overflow-wrap:break-word}.boot-navigation-screen__title.boot-navigation-screen__title,.boot-navigation-screen__title.boot-navigation-screen__title .boot-navigation-screen__title{color:var(--wpds-color-fg-content-neutral,#1e1e1e);line-height:32px}.boot-navigation-screen__actions{display:flex;flex-shrink:0}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";AAQA;AAAA,EACC,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,EAC7B;AAAA,EACA,wBAAwB;AAAA,OAClB;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,wBAAwB;;;ACjBjC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,yjBAAyjB,CAAC;AACpmB,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADsGK,SAKE,KALF;AAnFL,IAAM,qBAAqB;AAC3B,IAAM,gBAAgB;AAAA,EACrB,SAAS,CAAE,eAAyC;AAAA,IACnD,GAAG,cAAc,YAAY,MAAM;AAAA,IACnC,SAAS;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACR,GAAG;AAAA,IACH,SAAS;AAAA,EACV;AAAA,EACA,MAAM,CAAE,eAAyC;AAAA,IAChD,GAAG,cAAc,YAAY,MAAM;AAAA,IACnC,SAAS;AAAA,EACV;AACD;AAEe,SAAR,iBAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAiBI;AACH,QAAM,OAAO,MAAM,IAAI,eAAe;AACtC,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,kBAAkB,CAAE,MAAyB;AAClD,MAAE,eAAe;AACjB,eAAY,EAAE,IAAI,cAAc,WAAW,WAAW,CAAE;AAAA,EACzD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,kBAAkB;AAAA,MACnB;AAAA,MAEA,8BAAC,mBAAgB,SAAU,OAC1B;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEA,QAAS;AAAA,UACT,UAAW;AAAA,UACX,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,YAAa;AAAA,YACZ,MAAM;AAAA,YACN,UAAU,gBAAgB,IAAI;AAAA,YAC9B,MAAM,CAAE,MAAM,GAAG,GAAG,CAAE;AAAA,UACvB;AAAA,UACA,OAAQ;AAAA,YACP,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,SAAS;AAAA,UACV;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,SAAU;AAAA,gBACV,WAAU;AAAA,gBAER;AAAA,mBAAE,UACH;AAAA,oBAAC;AAAA;AAAA,sBACA,KAAM;AAAA,sBACN;AAAA,sBACA,SAAU;AAAA,sBACV,OAAQ,GAAI,MAAO;AAAA,sBACnB,MAAK;AAAA,sBACL,SAAQ;AAAA;AAAA,kBACT;AAAA,kBAED;AAAA,oBAAC;AAAA;AAAA,sBACA,WAAU;AAAA,sBACV,OAAQ;AAAA,sBACR,MAAK;AAAA,sBAEH;AAAA;AAAA,kBACH;AAAA,kBACE,WACD,oBAAC,SAAI,WAAU,mCACZ,mBACH;AAAA;AAAA;AAAA,YAEF;AAAA,YAEE,eACD,oBAAC,SAAI,WAAU,uCACZ,uBACH;AAAA,YAGC;AAAA;AAAA;AAAA,QAnDI;AAAA,MAoDP,GACD;AAAA;AAAA,EACD;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactNode, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\t__experimentalHeading as Heading,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\tButton,\n\t__experimentalHStack as HStack,\n} from '@wordpress/components';\nimport { isRTL, __ } from '@wordpress/i18n';\nimport { chevronRight, chevronLeft } from '@wordpress/icons';\nimport { useReducedMotion } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport './style.scss';\n\nconst ANIMATION_DURATION = 0.3;\nconst slideVariants = {\n\tinitial: ( direction: 'forward' | 'backward' ) => ( {\n\t\tx: direction === 'forward' ? 100 : -100,\n\t\topacity: 0,\n\t} ),\n\tanimate: {\n\t\tx: 0,\n\t\topacity: 1,\n\t},\n\texit: ( direction: 'forward' | 'backward' ) => ( {\n\t\tx: direction === 'forward' ? 100 : -100,\n\t\topacity: 0,\n\t} ),\n};\n\nexport default function NavigationScreen( {\n\tisRoot,\n\ttitle,\n\tactions,\n\tcontent,\n\tdescription,\n\tanimationDirection,\n\tbackMenuItem,\n\tbackButtonRef,\n\tnavigationKey,\n\tonNavigate,\n}: {\n\tisRoot?: boolean;\n\ttitle: string;\n\tactions?: ReactNode;\n\tcontent: ReactNode;\n\tdescription?: ReactNode;\n\tbackMenuItem?: string;\n\tbackButtonRef?: RefObject< HTMLButtonElement | null >;\n\tanimationDirection?: 'forward' | 'backward';\n\tnavigationKey?: string;\n\tonNavigate: ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => void;\n} ) {\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\tconst disableMotion = useReducedMotion();\n\n\tconst handleBackClick = ( e: React.MouseEvent ) => {\n\t\te.preventDefault();\n\t\tonNavigate( { id: backMenuItem, direction: 'backward' } );\n\t};\n\n\treturn (\n\t\t<div\n\t\t\tclassName=\"boot-navigation-screen\"\n\t\t\tstyle={ {\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tposition: 'relative',\n\t\t\t\tdisplay: 'grid',\n\t\t\t\tgridTemplateColumns: '1fr',\n\t\t\t\tgridTemplateRows: '1fr',\n\t\t\t} }\n\t\t>\n\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t<motion.div\n\t\t\t\t\tkey={ navigationKey }\n\t\t\t\t\tcustom={ animationDirection }\n\t\t\t\t\tvariants={ slideVariants }\n\t\t\t\t\tinitial=\"initial\"\n\t\t\t\t\tanimate=\"animate\"\n\t\t\t\t\texit=\"exit\"\n\t\t\t\t\ttransition={ {\n\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\t\t\t\t\tease: [ 0.33, 0, 0, 1 ],\n\t\t\t\t\t} }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tgridColumn: '1',\n\t\t\t\t\t\tgridRow: '1',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<HStack\n\t\t\t\t\t\tspacing={ 2 }\n\t\t\t\t\t\tclassName=\"boot-navigation-screen__title-icon\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! isRoot && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\tref={ backButtonRef }\n\t\t\t\t\t\t\t\ticon={ icon }\n\t\t\t\t\t\t\t\tonClick={ handleBackClick }\n\t\t\t\t\t\t\t\tlabel={ __( 'Back' ) }\n\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<Heading\n\t\t\t\t\t\t\tclassName=\"boot-navigation-screen__title\"\n\t\t\t\t\t\t\tlevel={ 1 }\n\t\t\t\t\t\t\tsize=\"15px\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t</Heading>\n\t\t\t\t\t\t{ actions && (\n\t\t\t\t\t\t\t<div className=\"boot-navigation-screen__actions\">\n\t\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</HStack>\n\n\t\t\t\t\t{ description && (\n\t\t\t\t\t\t<div className=\"boot-navigation-screen__description\">\n\t\t\t\t\t\t\t{ description }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\n\t\t\t\t\t{ content }\n\t\t\t\t</motion.div>\n\t\t\t</AnimatePresence>\n\t\t</div>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='db54ac7e93']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"db54ac7e93\");\n\tstyle.appendChild(document.createTextNode(\".boot-navigation-screen{padding-block-end:4px}.boot-navigation-screen .components-text{color:var(--wpds-color-foreground-content-neutral,#1e1e1e)}.boot-navigation-screen__title-icon{padding:12px 16px 8px;position:sticky;top:0}.boot-navigation-screen__title{flex-grow:1;overflow-wrap:break-word}.boot-navigation-screen__title.boot-navigation-screen__title,.boot-navigation-screen__title.boot-navigation-screen__title .boot-navigation-screen__title{color:var(--wpds-color-foreground-content-neutral,#1e1e1e);line-height:32px}.boot-navigation-screen__actions{display:flex;flex-shrink:0}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": ";AAQA;AAAA,EACC,yBAAyB;AAAA,EACzB,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,EAC7B;AAAA,EACA,wBAAwB;AAAA,OAClB;AACP,SAAS,OAAO,UAAU;AAC1B,SAAS,cAAc,mBAAmB;AAC1C,SAAS,wBAAwB;;;ACjBjC,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ykBAAykB,CAAC;AACpnB,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADsGK,SAKE,KALF;AAnFL,IAAM,qBAAqB;AAC3B,IAAM,gBAAgB;AAAA,EACrB,SAAS,CAAE,eAAyC;AAAA,IACnD,GAAG,cAAc,YAAY,MAAM;AAAA,IACnC,SAAS;AAAA,EACV;AAAA,EACA,SAAS;AAAA,IACR,GAAG;AAAA,IACH,SAAS;AAAA,EACV;AAAA,EACA,MAAM,CAAE,eAAyC;AAAA,IAChD,GAAG,cAAc,YAAY,MAAM;AAAA,IACnC,SAAS;AAAA,EACV;AACD;AAEe,SAAR,iBAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAiBI;AACH,QAAM,OAAO,MAAM,IAAI,eAAe;AACtC,QAAM,gBAAgB,iBAAiB;AAEvC,QAAM,kBAAkB,CAAE,MAAyB;AAClD,MAAE,eAAe;AACjB,eAAY,EAAE,IAAI,cAAc,WAAW,WAAW,CAAE;AAAA,EACzD;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,OAAQ;AAAA,QACP,UAAU;AAAA,QACV,UAAU;AAAA,QACV,SAAS;AAAA,QACT,qBAAqB;AAAA,QACrB,kBAAkB;AAAA,MACnB;AAAA,MAEA,8BAAC,mBAAgB,SAAU,OAC1B;AAAA,QAAC,OAAO;AAAA,QAAP;AAAA,UAEA,QAAS;AAAA,UACT,UAAW;AAAA,UACX,SAAQ;AAAA,UACR,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,YAAa;AAAA,YACZ,MAAM;AAAA,YACN,UAAU,gBAAgB,IAAI;AAAA,YAC9B,MAAM,CAAE,MAAM,GAAG,GAAG,CAAE;AAAA,UACvB;AAAA,UACA,OAAQ;AAAA,YACP,OAAO;AAAA,YACP,YAAY;AAAA,YACZ,SAAS;AAAA,UACV;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACA,SAAU;AAAA,gBACV,WAAU;AAAA,gBAER;AAAA,mBAAE,UACH;AAAA,oBAAC;AAAA;AAAA,sBACA,KAAM;AAAA,sBACN;AAAA,sBACA,SAAU;AAAA,sBACV,OAAQ,GAAI,MAAO;AAAA,sBACnB,MAAK;AAAA,sBACL,SAAQ;AAAA;AAAA,kBACT;AAAA,kBAED;AAAA,oBAAC;AAAA;AAAA,sBACA,WAAU;AAAA,sBACV,OAAQ;AAAA,sBACR,MAAK;AAAA,sBAEH;AAAA;AAAA,kBACH;AAAA,kBACE,WACD,oBAAC,SAAI,WAAU,mCACZ,mBACH;AAAA;AAAA;AAAA,YAEF;AAAA,YAEE,eACD,oBAAC,SAAI,WAAU,uCACZ,uBACH;AAAA,YAGC;AAAA;AAAA;AAAA,QAnDI;AAAA,MAoDP,GACD;AAAA;AAAA,EACD;AAEF;",
   "names": []
 }

package/build-module/components/root/index.mjs

@@ -14,7 +14,7 @@ import { useState, useEffect, useMemo } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
 import { Page, getAdminThemeColors } from "@wordpress/admin-ui";
 import { Tooltip } from "@wordpress/ui";
-import { privateApis as themePrivateApis } from "@wordpress/theme";
+import { ThemeProvider } from "@wordpress/theme";
 import Sidebar from "../sidebar/index.mjs";
 import SavePanel from "../save-panel/index.mjs";
 import CanvasRenderer from "../canvas-renderer/index.mjs";
@@ -22,17 +22,16 @@ import useRouteTitle from "../app/use-route-title.mjs";
 import { unlock } from "../../lock-unlock.mjs";
 
 // packages/boot/src/components/root/style.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='80382f1901']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='a66cc68f6f']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "80382f1901");
-  style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:row;height:100%;isolation:isolate;width:100%}.boot-layout__sidebar-backdrop{background-color:rgba(0,0,0,.5);bottom:0;cursor:var(--wpds-cursor-control,pointer);left:0;position:fixed;right:0;top:0;z-index:100002}.boot-layout__sidebar{flex-shrink:0;height:100%;overflow:hidden;position:relative;width:240px}.boot-layout__sidebar.is-mobile{background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);bottom:0;box-shadow:2px 0 8px rgba(0,0,0,.2);inset-inline-start:0;max-width:85vw;position:fixed;top:0;width:300px;z-index:100003}.boot-layout__mobile-sidebar-drawer{left:0;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout__mobile-sidebar-drawer{top:46px}.boot-layout__mobile-sidebar-drawer{align-items:center;background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);display:flex;justify-content:flex-start;padding:16px;z-index:3}.boot-layout__canvas.has-mobile-drawer{padding-top:65px;position:relative}.boot-layout__surfaces{display:flex;flex-grow:1;gap:8px;margin:0}@media (min-width:782px){.boot-layout__surfaces{margin:8px}.boot-layout--single-page .boot-layout__surfaces{margin-top:0;margin-inline-start:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__inspector,.boot-layout__stage{border-radius:8px;height:auto;margin:0;position:static;width:auto}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:auto}}.boot-layout__stage{z-index:2}@media (min-width:782px){.boot-layout__stage{z-index:auto}}.boot-layout__inspector{z-index:3}@media (min-width:782px){.boot-layout__inspector{z-index:auto}}.boot-layout__canvas{background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);border-radius:0;bottom:0;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--wpds-color-fg-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw;z-index:1}.boot-layout--single-page .boot-layout__canvas{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__canvas{border-radius:8px;height:auto;position:static;width:auto;z-index:auto}.boot-layout--single-page .boot-layout__canvas{height:auto}.boot-layout.has-canvas .boot-layout__stage,.boot-layout__inspector{max-width:400px}}.boot-layout__canvas .interface-interface-skeleton{height:100%;left:0!important;position:relative;top:0!important}.boot-layout.has-full-canvas .boot-layout__surfaces{gap:0;margin:0}.boot-layout.has-full-canvas .boot-layout__inspector,.boot-layout.has-full-canvas .boot-layout__stage{display:none}.boot-layout.has-full-canvas .boot-layout__canvas{border:none;border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:none;overflow:hidden;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:46px}@media (min-width:782px){.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:32px}}"));
+  style.setAttribute("data-wp-hash", "a66cc68f6f");
+  style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);display:flex;flex-direction:row;height:100%;isolation:isolate;width:100%}.boot-layout__sidebar-backdrop{background-color:rgba(0,0,0,.5);bottom:0;cursor:var(--wpds-cursor-control,pointer);left:0;position:fixed;right:0;top:0;z-index:100002}.boot-layout__sidebar{flex-shrink:0;height:100%;overflow:hidden;position:relative;width:240px}.boot-layout__sidebar.is-mobile{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);bottom:0;box-shadow:2px 0 8px rgba(0,0,0,.2);inset-inline-start:0;max-width:85vw;position:fixed;top:0;width:300px;z-index:100003}.boot-layout__mobile-sidebar-drawer{left:0;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout__mobile-sidebar-drawer{top:46px}.boot-layout__mobile-sidebar-drawer{align-items:center;background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);display:flex;justify-content:flex-start;padding:16px;z-index:3}.boot-layout__canvas.has-mobile-drawer{padding-top:65px;position:relative}.boot-layout__surfaces{display:flex;flex-grow:1;gap:8px;margin:0}@media (min-width:782px){.boot-layout__surfaces{margin:8px}.boot-layout--single-page .boot-layout__surfaces{margin-top:0;margin-inline-start:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__inspector,.boot-layout__stage{border-radius:var(--wpds-border-radius-xl,12px);height:auto;margin:0;position:static;width:auto}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:auto}}.boot-layout__stage{z-index:2}@media (min-width:782px){.boot-layout__stage{z-index:auto}}.boot-layout__inspector{z-index:3}@media (min-width:782px){.boot-layout__inspector{z-index:auto}}.boot-layout__canvas{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);border-radius:0;bottom:0;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw;z-index:1}.boot-layout--single-page .boot-layout__canvas{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__canvas{border-radius:var(--wpds-border-radius-xl,12px);height:auto;position:static;width:auto;z-index:auto}.boot-layout--single-page .boot-layout__canvas{height:auto}.boot-layout.has-canvas .boot-layout__stage,.boot-layout__inspector{max-width:400px}}.boot-layout__canvas .interface-interface-skeleton{height:100%;left:0!important;position:relative;top:0!important}.boot-layout.has-full-canvas .boot-layout__surfaces{gap:0;margin:0}.boot-layout.has-full-canvas .boot-layout__inspector,.boot-layout.has-full-canvas .boot-layout__stage{display:none}.boot-layout.has-full-canvas .boot-layout__canvas{border:none;border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:none;overflow:hidden;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:46px}@media (min-width:782px){.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:32px}}"));
   document.head.appendChild(style);
 }
 
 // packages/boot/src/components/root/index.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 var { useLocation, useMatches, Outlet } = unlock(routePrivateApis);
-var { ThemeProvider } = unlock(themePrivateApis);
 function Root() {
   const matches = useMatches();
   const location = useLocation();

package/build-module/components/root/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/root/index.tsx", "../../../src/components/root/style.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as routePrivateApis } from '@wordpress/route';\nimport { SnackbarNotices } from '@wordpress/notices';\nimport { useViewportMatch, useReducedMotion } from '@wordpress/compose';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\tButton,\n\tSlotFillProvider,\n} from '@wordpress/components';\nimport { menu } from '@wordpress/icons';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Page, getAdminThemeColors } from '@wordpress/admin-ui';\n// eslint-disable-next-line @wordpress/use-recommended-components -- `Tooltip` is not yet on the recommended `@wordpress/ui` allow-list; landing as a migration step ahead of the wider rollout.\nimport { Tooltip } from '@wordpress/ui';\nimport { privateApis as themePrivateApis } from '@wordpress/theme';\n\n/**\n * Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport SavePanel from '../save-panel';\nimport CanvasRenderer from '../canvas-renderer';\nimport useRouteTitle from '../app/use-route-title';\nimport { unlock } from '../../lock-unlock';\nimport type { CanvasData } from '../../store/types';\nimport './style.scss';\n\nconst { useLocation, useMatches, Outlet } = unlock( routePrivateApis );\nconst { ThemeProvider } = unlock( themePrivateApis );\n\nexport default function Root() {\n\tconst matches = useMatches();\n\tconst location = useLocation();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst canvas = ( currentMatch?.loaderData as any )?.canvas as\n\t\t| CanvasData\n\t\t| null\n\t\t| undefined;\n\tconst routeContentModule = ( currentMatch?.loaderData as any )\n\t\t?.routeContentModule as string | undefined;\n\tconst isFullScreen = canvas && ! canvas.isPreview;\n\n\tuseRouteTitle();\n\n\t// Mobile sidebar state\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ isMobileSidebarOpen, setIsMobileSidebarOpen ] = useState( false );\n\tconst disableMotion = useReducedMotion();\n\t// Close mobile sidebar on viewport resize and path change\n\tuseEffect( () => {\n\t\tsetIsMobileSidebarOpen( false );\n\t}, [ location.pathname, isMobileViewport ] );\n\n\tconst themeColors = useMemo( getAdminThemeColors, [] );\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<Tooltip.Provider>\n\t\t\t\t<ThemeProvider\n\t\t\t\t\tisRoot\n\t\t\t\t\tcolor={ { ...themeColors, background: '#f8f8f8' } }\n\t\t\t\t>\n\t\t\t\t\t<ThemeProvider color={ themeColors }>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ clsx( 'boot-layout', {\n\t\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SavePanel />\n\t\t\t\t\t\t\t<SnackbarNotices className=\"boot-notices__snackbar\" />\n\t\t\t\t\t\t\t{ isMobileViewport && (\n\t\t\t\t\t\t\t\t<Page.SidebarToggleFill>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( true )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Open navigation panel' ) }\n\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Page.SidebarToggleFill>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ /* Mobile Sidebar Backdrop */ }\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar-backdrop\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( false )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif ( event.key === 'Escape' ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Close navigation panel'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t{ /* Mobile Sidebar */ }\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\tinitial={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\t\tanimate={ { x: 0 } }\n\t\t\t\t\t\t\t\t\t\t\texit={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar is-mobile\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t{ /* Desktop Sidebar */ }\n\t\t\t\t\t\t\t{ ! isMobileViewport && ! isFullScreen && (\n\t\t\t\t\t\t\t\t<div className=\"boot-layout__sidebar\">\n\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t\t<ThemeProvider\n\t\t\t\t\t\t\t\t\tcolor={ {\n\t\t\t\t\t\t\t\t\t\t...themeColors,\n\t\t\t\t\t\t\t\t\t\tbackground: '#ffffff',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Outlet />\n\t\t\t\t\t\t\t\t\t{ /* Render Canvas in Root to prevent remounting on route changes */ }\n\t\t\t\t\t\t\t\t\t{ ( canvas || canvas === null ) && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t\t'boot-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t'has-mobile-drawer':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcanvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport,\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ canvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"boot-layout__mobile-sidebar-drawer\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Open navigation panel'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t<CanvasRenderer\n\t\t\t\t\t\t\t\t\t\t\t\tcanvas={ canvas }\n\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule={\n\t\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ThemeProvider>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</ThemeProvider>\n\t\t\t</Tooltip.Provider>\n\t\t</SlotFillProvider>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='80382f1901']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"80382f1901\");\n\tstyle.appendChild(document.createTextNode(\".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:row;height:100%;isolation:isolate;width:100%}.boot-layout__sidebar-backdrop{background-color:rgba(0,0,0,.5);bottom:0;cursor:var(--wpds-cursor-control,pointer);left:0;position:fixed;right:0;top:0;z-index:100002}.boot-layout__sidebar{flex-shrink:0;height:100%;overflow:hidden;position:relative;width:240px}.boot-layout__sidebar.is-mobile{background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);bottom:0;box-shadow:2px 0 8px rgba(0,0,0,.2);inset-inline-start:0;max-width:85vw;position:fixed;top:0;width:300px;z-index:100003}.boot-layout__mobile-sidebar-drawer{left:0;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout__mobile-sidebar-drawer{top:46px}.boot-layout__mobile-sidebar-drawer{align-items:center;background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);display:flex;justify-content:flex-start;padding:16px;z-index:3}.boot-layout__canvas.has-mobile-drawer{padding-top:65px;position:relative}.boot-layout__surfaces{display:flex;flex-grow:1;gap:8px;margin:0}@media (min-width:782px){.boot-layout__surfaces{margin:8px}.boot-layout--single-page .boot-layout__surfaces{margin-top:0;margin-inline-start:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__inspector,.boot-layout__stage{border-radius:8px;height:auto;margin:0;position:static;width:auto}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:auto}}.boot-layout__stage{z-index:2}@media (min-width:782px){.boot-layout__stage{z-index:auto}}.boot-layout__inspector{z-index:3}@media (min-width:782px){.boot-layout__inspector{z-index:auto}}.boot-layout__canvas{background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);border-radius:0;bottom:0;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--wpds-color-fg-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw;z-index:1}.boot-layout--single-page .boot-layout__canvas{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__canvas{border-radius:8px;height:auto;position:static;width:auto;z-index:auto}.boot-layout--single-page .boot-layout__canvas{height:auto}.boot-layout.has-canvas .boot-layout__stage,.boot-layout__inspector{max-width:400px}}.boot-layout__canvas .interface-interface-skeleton{height:100%;left:0!important;position:relative;top:0!important}.boot-layout.has-full-canvas .boot-layout__surfaces{gap:0;margin:0}.boot-layout.has-full-canvas .boot-layout__inspector,.boot-layout.has-full-canvas .boot-layout__stage{display:none}.boot-layout.has-full-canvas .boot-layout__canvas{border:none;border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:none;overflow:hidden;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:46px}@media (min-width:782px){.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:32px}}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as routePrivateApis } from '@wordpress/route';\nimport { SnackbarNotices } from '@wordpress/notices';\nimport { useViewportMatch, useReducedMotion } from '@wordpress/compose';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n\tButton,\n\tSlotFillProvider,\n} from '@wordpress/components';\nimport { menu } from '@wordpress/icons';\nimport { useState, useEffect, useMemo } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Page, getAdminThemeColors } from '@wordpress/admin-ui';\nimport { Tooltip } from '@wordpress/ui';\nimport { ThemeProvider } from '@wordpress/theme';\n\n/**\n * Internal dependencies\n */\nimport Sidebar from '../sidebar';\nimport SavePanel from '../save-panel';\nimport CanvasRenderer from '../canvas-renderer';\nimport useRouteTitle from '../app/use-route-title';\nimport { unlock } from '../../lock-unlock';\nimport type { CanvasData } from '../../store/types';\nimport './style.scss';\n\nconst { useLocation, useMatches, Outlet } = unlock( routePrivateApis );\n\nexport default function Root() {\n\tconst matches = useMatches();\n\tconst location = useLocation();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst canvas = ( currentMatch?.loaderData as any )?.canvas as\n\t\t| CanvasData\n\t\t| null\n\t\t| undefined;\n\tconst routeContentModule = ( currentMatch?.loaderData as any )\n\t\t?.routeContentModule as string | undefined;\n\tconst isFullScreen = canvas && ! canvas.isPreview;\n\n\tuseRouteTitle();\n\n\t// Mobile sidebar state\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst [ isMobileSidebarOpen, setIsMobileSidebarOpen ] = useState( false );\n\tconst disableMotion = useReducedMotion();\n\t// Close mobile sidebar on viewport resize and path change\n\tuseEffect( () => {\n\t\tsetIsMobileSidebarOpen( false );\n\t}, [ location.pathname, isMobileViewport ] );\n\n\tconst themeColors = useMemo( getAdminThemeColors, [] );\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<Tooltip.Provider>\n\t\t\t\t<ThemeProvider\n\t\t\t\t\tisRoot\n\t\t\t\t\tcolor={ { ...themeColors, background: '#f8f8f8' } }\n\t\t\t\t>\n\t\t\t\t\t<ThemeProvider color={ themeColors }>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={ clsx( 'boot-layout', {\n\t\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\n\t\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<SavePanel />\n\t\t\t\t\t\t\t<SnackbarNotices className=\"boot-notices__snackbar\" />\n\t\t\t\t\t\t\t{ isMobileViewport && (\n\t\t\t\t\t\t\t\t<Page.SidebarToggleFill>\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( true )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={ __( 'Open navigation panel' ) }\n\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</Page.SidebarToggleFill>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t{ /* Mobile Sidebar Backdrop */ }\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar-backdrop\"\n\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( false )\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\t\t\t\tif ( event.key === 'Escape' ) {\n\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tfalse\n\t\t\t\t\t\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Close navigation panel'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t{ /* Mobile Sidebar */ }\n\t\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\t\tinitial={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\t\tanimate={ { x: 0 } }\n\t\t\t\t\t\t\t\t\t\t\texit={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion\n\t\t\t\t\t\t\t\t\t\t\t\t\t? 0\n\t\t\t\t\t\t\t\t\t\t\t\t\t: 0.2,\n\t\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar is-mobile\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t\t{ /* Desktop Sidebar */ }\n\t\t\t\t\t\t\t{ ! isMobileViewport && ! isFullScreen && (\n\t\t\t\t\t\t\t\t<div className=\"boot-layout__sidebar\">\n\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t\t<ThemeProvider\n\t\t\t\t\t\t\t\t\tcolor={ {\n\t\t\t\t\t\t\t\t\t\t...themeColors,\n\t\t\t\t\t\t\t\t\t\tbackground: '#ffffff',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Outlet />\n\t\t\t\t\t\t\t\t\t{ /* Render Canvas in Root to prevent remounting on route changes */ }\n\t\t\t\t\t\t\t\t\t{ ( canvas || canvas === null ) && (\n\t\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t\t\t\t\t\t'boot-layout__canvas',\n\t\t\t\t\t\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t\t\t\t\t\t'has-mobile-drawer':\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tcanvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport,\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ canvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\t\tisMobileViewport && (\n\t\t\t\t\t\t\t\t\t\t\t\t\t<div className=\"boot-layout__mobile-sidebar-drawer\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\ttrue\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tlabel={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t'Open navigation panel'\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t\t<CanvasRenderer\n\t\t\t\t\t\t\t\t\t\t\t\tcanvas={ canvas }\n\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule={\n\t\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule\n\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</ThemeProvider>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</ThemeProvider>\n\t\t\t\t</ThemeProvider>\n\t\t\t</Tooltip.Provider>\n\t\t</SlotFillProvider>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='a66cc68f6f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"a66cc68f6f\");\n\tstyle.appendChild(document.createTextNode(\".boot-layout{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);display:flex;flex-direction:row;height:100%;isolation:isolate;width:100%}.boot-layout__sidebar-backdrop{background-color:rgba(0,0,0,.5);bottom:0;cursor:var(--wpds-cursor-control,pointer);left:0;position:fixed;right:0;top:0;z-index:100002}.boot-layout__sidebar{flex-shrink:0;height:100%;overflow:hidden;position:relative;width:240px}.boot-layout__sidebar.is-mobile{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);bottom:0;box-shadow:2px 0 8px rgba(0,0,0,.2);inset-inline-start:0;max-width:85vw;position:fixed;top:0;width:300px;z-index:100003}.boot-layout__mobile-sidebar-drawer{left:0;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout__mobile-sidebar-drawer{top:46px}.boot-layout__mobile-sidebar-drawer{align-items:center;background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);display:flex;justify-content:flex-start;padding:16px;z-index:3}.boot-layout__canvas.has-mobile-drawer{padding-top:65px;position:relative}.boot-layout__surfaces{display:flex;flex-grow:1;gap:8px;margin:0}@media (min-width:782px){.boot-layout__surfaces{margin:8px}.boot-layout--single-page .boot-layout__surfaces{margin-top:0;margin-inline-start:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__inspector,.boot-layout__stage{border-radius:var(--wpds-border-radius-xl,12px);height:auto;margin:0;position:static;width:auto}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:auto}}.boot-layout__stage{z-index:2}@media (min-width:782px){.boot-layout__stage{z-index:auto}}.boot-layout__inspector{z-index:3}@media (min-width:782px){.boot-layout__inspector{z-index:auto}}.boot-layout__canvas{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);border-radius:0;bottom:0;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw;z-index:1}.boot-layout--single-page .boot-layout__canvas{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__canvas{border-radius:var(--wpds-border-radius-xl,12px);height:auto;position:static;width:auto;z-index:auto}.boot-layout--single-page .boot-layout__canvas{height:auto}.boot-layout.has-canvas .boot-layout__stage,.boot-layout__inspector{max-width:400px}}.boot-layout__canvas .interface-interface-skeleton{height:100%;left:0!important;position:relative;top:0!important}.boot-layout.has-full-canvas .boot-layout__surfaces{gap:0;margin:0}.boot-layout.has-full-canvas .boot-layout__inspector,.boot-layout.has-full-canvas .boot-layout__stage{display:none}.boot-layout.has-full-canvas .boot-layout__canvas{border:none;border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:none;overflow:hidden;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:46px}@media (min-width:782px){.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:32px}}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/components/root/single-page.mjs

@@ -5,16 +5,16 @@ import { SnackbarNotices } from "@wordpress/notices";
 import { SlotFillProvider } from "@wordpress/components";
 import { useMemo } from "@wordpress/element";
 import { getAdminThemeColors } from "@wordpress/admin-ui";
-import { privateApis as themePrivateApis } from "@wordpress/theme";
+import { ThemeProvider } from "@wordpress/theme";
 import SavePanel from "../save-panel/index.mjs";
 import CanvasRenderer from "../canvas-renderer/index.mjs";
 import { unlock } from "../../lock-unlock.mjs";
 
 // packages/boot/src/components/root/style.scss
-if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='80382f1901']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='a66cc68f6f']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "80382f1901");
-  style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:row;height:100%;isolation:isolate;width:100%}.boot-layout__sidebar-backdrop{background-color:rgba(0,0,0,.5);bottom:0;cursor:var(--wpds-cursor-control,pointer);left:0;position:fixed;right:0;top:0;z-index:100002}.boot-layout__sidebar{flex-shrink:0;height:100%;overflow:hidden;position:relative;width:240px}.boot-layout__sidebar.is-mobile{background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);bottom:0;box-shadow:2px 0 8px rgba(0,0,0,.2);inset-inline-start:0;max-width:85vw;position:fixed;top:0;width:300px;z-index:100003}.boot-layout__mobile-sidebar-drawer{left:0;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout__mobile-sidebar-drawer{top:46px}.boot-layout__mobile-sidebar-drawer{align-items:center;background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);display:flex;justify-content:flex-start;padding:16px;z-index:3}.boot-layout__canvas.has-mobile-drawer{padding-top:65px;position:relative}.boot-layout__surfaces{display:flex;flex-grow:1;gap:8px;margin:0}@media (min-width:782px){.boot-layout__surfaces{margin:8px}.boot-layout--single-page .boot-layout__surfaces{margin-top:0;margin-inline-start:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__inspector,.boot-layout__stage{border-radius:8px;height:auto;margin:0;position:static;width:auto}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:auto}}.boot-layout__stage{z-index:2}@media (min-width:782px){.boot-layout__stage{z-index:auto}}.boot-layout__inspector{z-index:3}@media (min-width:782px){.boot-layout__inspector{z-index:auto}}.boot-layout__canvas{background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);border-radius:0;bottom:0;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--wpds-color-fg-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw;z-index:1}.boot-layout--single-page .boot-layout__canvas{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__canvas{border-radius:8px;height:auto;position:static;width:auto;z-index:auto}.boot-layout--single-page .boot-layout__canvas{height:auto}.boot-layout.has-canvas .boot-layout__stage,.boot-layout__inspector{max-width:400px}}.boot-layout__canvas .interface-interface-skeleton{height:100%;left:0!important;position:relative;top:0!important}.boot-layout.has-full-canvas .boot-layout__surfaces{gap:0;margin:0}.boot-layout.has-full-canvas .boot-layout__inspector,.boot-layout.has-full-canvas .boot-layout__stage{display:none}.boot-layout.has-full-canvas .boot-layout__canvas{border:none;border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:none;overflow:hidden;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:46px}@media (min-width:782px){.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:32px}}"));
+  style.setAttribute("data-wp-hash", "a66cc68f6f");
+  style.appendChild(document.createTextNode(".boot-layout{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);display:flex;flex-direction:row;height:100%;isolation:isolate;width:100%}.boot-layout__sidebar-backdrop{background-color:rgba(0,0,0,.5);bottom:0;cursor:var(--wpds-cursor-control,pointer);left:0;position:fixed;right:0;top:0;z-index:100002}.boot-layout__sidebar{flex-shrink:0;height:100%;overflow:hidden;position:relative;width:240px}.boot-layout__sidebar.is-mobile{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);bottom:0;box-shadow:2px 0 8px rgba(0,0,0,.2);inset-inline-start:0;max-width:85vw;position:fixed;top:0;width:300px;z-index:100003}.boot-layout__mobile-sidebar-drawer{left:0;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout__mobile-sidebar-drawer{top:46px}.boot-layout__mobile-sidebar-drawer{align-items:center;background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);display:flex;justify-content:flex-start;padding:16px;z-index:3}.boot-layout__canvas.has-mobile-drawer{padding-top:65px;position:relative}.boot-layout__surfaces{display:flex;flex-grow:1;gap:8px;margin:0}@media (min-width:782px){.boot-layout__surfaces{margin:8px}.boot-layout--single-page .boot-layout__surfaces{margin-top:0;margin-inline-start:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__inspector,.boot-layout__stage{border-radius:var(--wpds-border-radius-xl,12px);height:auto;margin:0;position:static;width:auto}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:auto}}.boot-layout__stage{z-index:2}@media (min-width:782px){.boot-layout__stage{z-index:auto}}.boot-layout__inspector{z-index:3}@media (min-width:782px){.boot-layout__inspector{z-index:auto}}.boot-layout__canvas{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);border-radius:0;bottom:0;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw;z-index:1}.boot-layout--single-page .boot-layout__canvas{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__canvas{border-radius:var(--wpds-border-radius-xl,12px);height:auto;position:static;width:auto;z-index:auto}.boot-layout--single-page .boot-layout__canvas{height:auto}.boot-layout.has-canvas .boot-layout__stage,.boot-layout__inspector{max-width:400px}}.boot-layout__canvas .interface-interface-skeleton{height:100%;left:0!important;position:relative;top:0!important}.boot-layout.has-full-canvas .boot-layout__surfaces{gap:0;margin:0}.boot-layout.has-full-canvas .boot-layout__inspector,.boot-layout.has-full-canvas .boot-layout__stage{display:none}.boot-layout.has-full-canvas .boot-layout__canvas{border:none;border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:none;overflow:hidden;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:46px}@media (min-width:782px){.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:32px}}"));
   document.head.appendChild(style);
 }
 
@@ -22,7 +22,6 @@ if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !docum
 import useRouteTitle from "../app/use-route-title.mjs";
 import { jsx, jsxs } from "react/jsx-runtime";
 var { useMatches, Outlet } = unlock(routePrivateApis);
-var { ThemeProvider } = unlock(themePrivateApis);
 function RootSinglePage() {
   const matches = useMatches();
   const currentMatch = matches[matches.length - 1];

package/build-module/components/root/single-page.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/root/single-page.tsx", "../../../src/components/root/style.scss"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as routePrivateApis } from '@wordpress/route';\nimport { SnackbarNotices } from '@wordpress/notices';\nimport { SlotFillProvider } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { getAdminThemeColors } from '@wordpress/admin-ui';\nimport { privateApis as themePrivateApis } from '@wordpress/theme';\n\n/**\n * Internal dependencies\n */\nimport SavePanel from '../save-panel';\nimport CanvasRenderer from '../canvas-renderer';\nimport { unlock } from '../../lock-unlock';\nimport type { CanvasData } from '../../store/types';\nimport './style.scss';\nimport useRouteTitle from '../app/use-route-title';\n\nconst { useMatches, Outlet } = unlock( routePrivateApis );\nconst { ThemeProvider } = unlock( themePrivateApis );\n\n/**\n * Root component for single page mode (no sidebar).\n * Used when rendering pages within wp-admin without taking over the full page.\n */\nexport default function RootSinglePage() {\n\tconst matches = useMatches();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst canvas = ( currentMatch?.loaderData as any )?.canvas as\n\t\t| CanvasData\n\t\t| null\n\t\t| undefined;\n\tconst routeContentModule = ( currentMatch?.loaderData as any )\n\t\t?.routeContentModule as string | undefined;\n\tconst isFullScreen = canvas && ! canvas.isPreview;\n\n\tuseRouteTitle();\n\n\tconst themeColors = useMemo( getAdminThemeColors, [] );\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<ThemeProvider\n\t\t\t\tisRoot\n\t\t\t\tcolor={ { ...themeColors, background: '#f8f8f8' } }\n\t\t\t>\n\t\t\t\t<ThemeProvider color={ themeColors }>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'boot-layout boot-layout--single-page',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<SavePanel />\n\t\t\t\t\t\t<SnackbarNotices className=\"boot-notices__snackbar\" />\n\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t<ThemeProvider\n\t\t\t\t\t\t\t\tcolor={ {\n\t\t\t\t\t\t\t\t\t...themeColors,\n\t\t\t\t\t\t\t\t\tbackground: '#ffffff',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Outlet />\n\t\t\t\t\t\t\t\t{ /* Render Canvas in Root to prevent remounting on route changes */ }\n\t\t\t\t\t\t\t\t{ ( canvas || canvas === null ) && (\n\t\t\t\t\t\t\t\t\t<div className=\"boot-layout__canvas\">\n\t\t\t\t\t\t\t\t\t\t<CanvasRenderer\n\t\t\t\t\t\t\t\t\t\t\tcanvas={ canvas }\n\t\t\t\t\t\t\t\t\t\t\trouteContentModule={\n\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</ThemeProvider>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</ThemeProvider>\n\t\t\t</ThemeProvider>\n\t\t</SlotFillProvider>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='80382f1901']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"80382f1901\");\n\tstyle.appendChild(document.createTextNode(\".boot-layout{background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-fg-content-neutral,#1e1e1e);display:flex;flex-direction:row;height:100%;isolation:isolate;width:100%}.boot-layout__sidebar-backdrop{background-color:rgba(0,0,0,.5);bottom:0;cursor:var(--wpds-cursor-control,pointer);left:0;position:fixed;right:0;top:0;z-index:100002}.boot-layout__sidebar{flex-shrink:0;height:100%;overflow:hidden;position:relative;width:240px}.boot-layout__sidebar.is-mobile{background:var(--wpds-color-bg-surface-neutral-weak,#f4f4f4);bottom:0;box-shadow:2px 0 8px rgba(0,0,0,.2);inset-inline-start:0;max-width:85vw;position:fixed;top:0;width:300px;z-index:100003}.boot-layout__mobile-sidebar-drawer{left:0;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout__mobile-sidebar-drawer{top:46px}.boot-layout__mobile-sidebar-drawer{align-items:center;background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);display:flex;justify-content:flex-start;padding:16px;z-index:3}.boot-layout__canvas.has-mobile-drawer{padding-top:65px;position:relative}.boot-layout__surfaces{display:flex;flex-grow:1;gap:8px;margin:0}@media (min-width:782px){.boot-layout__surfaces{margin:8px}.boot-layout--single-page .boot-layout__surfaces{margin-top:0;margin-inline-start:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-fg-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__inspector,.boot-layout__stage{border-radius:8px;height:auto;margin:0;position:static;width:auto}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:auto}}.boot-layout__stage{z-index:2}@media (min-width:782px){.boot-layout__stage{z-index:auto}}.boot-layout__inspector{z-index:3}@media (min-width:782px){.boot-layout__inspector{z-index:auto}}.boot-layout__canvas{background:var(--wpds-color-bg-surface-neutral,#fcfcfc);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);border-radius:0;bottom:0;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--wpds-color-fg-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw;z-index:1}.boot-layout--single-page .boot-layout__canvas{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__canvas{border-radius:8px;height:auto;position:static;width:auto;z-index:auto}.boot-layout--single-page .boot-layout__canvas{height:auto}.boot-layout.has-canvas .boot-layout__stage,.boot-layout__inspector{max-width:400px}}.boot-layout__canvas .interface-interface-skeleton{height:100%;left:0!important;position:relative;top:0!important}.boot-layout.has-full-canvas .boot-layout__surfaces{gap:0;margin:0}.boot-layout.has-full-canvas .boot-layout__inspector,.boot-layout.has-full-canvas .boot-layout__stage{display:none}.boot-layout.has-full-canvas .boot-layout__canvas{border:none;border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:none;overflow:hidden;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:46px}@media (min-width:782px){.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:32px}}\"));\n\tdocument.head.appendChild(style);\n}\n"],
-  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe,wBAAwB;AAChD,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,2BAA2B;AACpC,SAAS,eAAe,wBAAwB;AAKhD,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAC3B,SAAS,cAAc;;;ACpBvB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,ihHAAihH,CAAC;AAC5jH,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADkBA,OAAO,mBAAmB;AAwCpB,cAGC,YAHD;AAtCN,IAAM,EAAE,YAAY,OAAO,IAAI,OAAQ,gBAAiB;AACxD,IAAM,EAAE,cAAc,IAAI,OAAQ,gBAAiB;AAMpC,SAAR,iBAAkC;AACxC,QAAM,UAAU,WAAW;AAC3B,QAAM,eAAe,QAAS,QAAQ,SAAS,CAAE;AACjD,QAAM,SAAW,cAAc,YAAqB;AAIpD,QAAM,qBAAuB,cAAc,YACxC;AACH,QAAM,eAAe,UAAU,CAAE,OAAO;AAExC,gBAAc;AAEd,QAAM,cAAc,QAAS,qBAAqB,CAAC,CAAE;AAErD,SACC,oBAAC,oBACA;AAAA,IAAC;AAAA;AAAA,MACA,QAAM;AAAA,MACN,OAAQ,EAAE,GAAG,aAAa,YAAY,UAAU;AAAA,MAEhD,8BAAC,iBAAc,OAAQ,aACtB;AAAA,QAAC;AAAA;AAAA,UACA,WAAY;AAAA,YACX;AAAA,YACA;AAAA,cACC,cAAc,CAAC,CAAE,UAAU,WAAW;AAAA,cACtC,mBAAmB;AAAA,YACpB;AAAA,UACD;AAAA,UAEA;AAAA,gCAAC,aAAU;AAAA,YACX,oBAAC,mBAAgB,WAAU,0BAAyB;AAAA,YACpD,oBAAC,SAAI,WAAU,yBACd;AAAA,cAAC;AAAA;AAAA,gBACA,OAAQ;AAAA,kBACP,GAAG;AAAA,kBACH,YAAY;AAAA,gBACb;AAAA,gBAEA;AAAA,sCAAC,UAAO;AAAA,mBAEJ,UAAU,WAAW,SACxB,oBAAC,SAAI,WAAU,uBACd;AAAA,oBAAC;AAAA;AAAA,sBACA;AAAA,sBACA;AAAA;AAAA,kBAGD,GACD;AAAA;AAAA;AAAA,YAEF,GACD;AAAA;AAAA;AAAA,MACD,GACD;AAAA;AAAA,EACD,GACD;AAEF;",
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { privateApis as routePrivateApis } from '@wordpress/route';\nimport { SnackbarNotices } from '@wordpress/notices';\nimport { SlotFillProvider } from '@wordpress/components';\nimport { useMemo } from '@wordpress/element';\nimport { getAdminThemeColors } from '@wordpress/admin-ui';\nimport { ThemeProvider } from '@wordpress/theme';\n\n/**\n * Internal dependencies\n */\nimport SavePanel from '../save-panel';\nimport CanvasRenderer from '../canvas-renderer';\nimport { unlock } from '../../lock-unlock';\nimport type { CanvasData } from '../../store/types';\nimport './style.scss';\nimport useRouteTitle from '../app/use-route-title';\n\nconst { useMatches, Outlet } = unlock( routePrivateApis );\n\n/**\n * Root component for single page mode (no sidebar).\n * Used when rendering pages within wp-admin without taking over the full page.\n */\nexport default function RootSinglePage() {\n\tconst matches = useMatches();\n\tconst currentMatch = matches[ matches.length - 1 ];\n\tconst canvas = ( currentMatch?.loaderData as any )?.canvas as\n\t\t| CanvasData\n\t\t| null\n\t\t| undefined;\n\tconst routeContentModule = ( currentMatch?.loaderData as any )\n\t\t?.routeContentModule as string | undefined;\n\tconst isFullScreen = canvas && ! canvas.isPreview;\n\n\tuseRouteTitle();\n\n\tconst themeColors = useMemo( getAdminThemeColors, [] );\n\n\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<ThemeProvider\n\t\t\t\tisRoot\n\t\t\t\tcolor={ { ...themeColors, background: '#f8f8f8' } }\n\t\t\t>\n\t\t\t\t<ThemeProvider color={ themeColors }>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'boot-layout boot-layout--single-page',\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<SavePanel />\n\t\t\t\t\t\t<SnackbarNotices className=\"boot-notices__snackbar\" />\n\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t<ThemeProvider\n\t\t\t\t\t\t\t\tcolor={ {\n\t\t\t\t\t\t\t\t\t...themeColors,\n\t\t\t\t\t\t\t\t\tbackground: '#ffffff',\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Outlet />\n\t\t\t\t\t\t\t\t{ /* Render Canvas in Root to prevent remounting on route changes */ }\n\t\t\t\t\t\t\t\t{ ( canvas || canvas === null ) && (\n\t\t\t\t\t\t\t\t\t<div className=\"boot-layout__canvas\">\n\t\t\t\t\t\t\t\t\t\t<CanvasRenderer\n\t\t\t\t\t\t\t\t\t\t\tcanvas={ canvas }\n\t\t\t\t\t\t\t\t\t\t\trouteContentModule={\n\t\t\t\t\t\t\t\t\t\t\t\trouteContentModule\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</ThemeProvider>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</ThemeProvider>\n\t\t\t</ThemeProvider>\n\t\t</SlotFillProvider>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='a66cc68f6f']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"a66cc68f6f\");\n\tstyle.appendChild(document.createTextNode(\".boot-layout{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);display:flex;flex-direction:row;height:100%;isolation:isolate;width:100%}.boot-layout__sidebar-backdrop{background-color:rgba(0,0,0,.5);bottom:0;cursor:var(--wpds-cursor-control,pointer);left:0;position:fixed;right:0;top:0;z-index:100002}.boot-layout__sidebar{flex-shrink:0;height:100%;overflow:hidden;position:relative;width:240px}.boot-layout__sidebar.is-mobile{background:var(--wpds-color-background-surface-neutral-weak,#f4f4f4);bottom:0;box-shadow:2px 0 8px rgba(0,0,0,.2);inset-inline-start:0;max-width:85vw;position:fixed;top:0;width:300px;z-index:100003}.boot-layout__mobile-sidebar-drawer{left:0;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout__mobile-sidebar-drawer{top:46px}.boot-layout__mobile-sidebar-drawer{align-items:center;background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-bottom:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);display:flex;justify-content:flex-start;padding:16px;z-index:3}.boot-layout__canvas.has-mobile-drawer{padding-top:65px;position:relative}.boot-layout__surfaces{display:flex;flex-grow:1;gap:8px;margin:0}@media (min-width:782px){.boot-layout__surfaces{margin:8px}.boot-layout--single-page .boot-layout__surfaces{margin-top:0;margin-inline-start:0}}.boot-layout__inspector,.boot-layout__stage{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border-radius:0;bottom:0;color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__inspector,.boot-layout__stage{border-radius:var(--wpds-border-radius-xl,12px);height:auto;margin:0;position:static;width:auto}.boot-layout--single-page .boot-layout__inspector,.boot-layout--single-page .boot-layout__stage{height:auto}}.boot-layout__stage{z-index:2}@media (min-width:782px){.boot-layout__stage{z-index:auto}}.boot-layout__inspector{z-index:3}@media (min-width:782px){.boot-layout__inspector{z-index:auto}}.boot-layout__canvas{background:var(--wpds-color-background-surface-neutral,#fcfcfc);border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);border-radius:0;bottom:0;box-shadow:0 1px 3px rgba(0,0,0,.1);color:var(--wpds-color-foreground-content-neutral,#1e1e1e);flex:1;height:100vh;left:0;margin:0;overflow-y:auto;position:relative;position:fixed;right:0;top:0;width:100vw;z-index:1}.boot-layout--single-page .boot-layout__canvas{height:calc(100vh - 46px);top:46px}@media (min-width:782px){.boot-layout__canvas{border-radius:var(--wpds-border-radius-xl,12px);height:auto;position:static;width:auto;z-index:auto}.boot-layout--single-page .boot-layout__canvas{height:auto}.boot-layout.has-canvas .boot-layout__stage,.boot-layout__inspector{max-width:400px}}.boot-layout__canvas .interface-interface-skeleton{height:100%;left:0!important;position:relative;top:0!important}.boot-layout.has-full-canvas .boot-layout__surfaces{gap:0;margin:0}.boot-layout.has-full-canvas .boot-layout__inspector,.boot-layout.has-full-canvas .boot-layout__stage{display:none}.boot-layout.has-full-canvas .boot-layout__canvas{border:none;border-radius:0;bottom:0;box-shadow:none;left:0;margin:0;max-width:none;overflow:hidden;position:fixed;right:0;top:0}.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:46px}@media (min-width:782px){.boot-layout--single-page .boot-layout.has-full-canvas .boot-layout__canvas{top:32px}}\"));\n\tdocument.head.appendChild(style);\n}\n"],
+  "mappings": ";AAGA,OAAO,UAAU;AAKjB,SAAS,eAAe,wBAAwB;AAChD,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,eAAe;AACxB,SAAS,2BAA2B;AACpC,SAAS,qBAAqB;AAK9B,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAC3B,SAAS,cAAc;;;ACpBvB,IAAI,OAAO,aAAa,eAAe,QAAQ,IAAI,aAAa,UAAU,CAAC,SAAS,KAAK,cAAc,kCAAkC,GAAG;AAC3I,QAAM,QAAQ,SAAS,cAAc,OAAO;AAC5C,QAAM,aAAa,gBAAgB,YAAY;AAC/C,QAAM,YAAY,SAAS,eAAe,6oHAA6oH,CAAC;AACxrH,WAAS,KAAK,YAAY,KAAK;AAChC;;;ADkBA,OAAO,mBAAmB;AAuCpB,cAGC,YAHD;AArCN,IAAM,EAAE,YAAY,OAAO,IAAI,OAAQ,gBAAiB;AAMzC,SAAR,iBAAkC;AACxC,QAAM,UAAU,WAAW;AAC3B,QAAM,eAAe,QAAS,QAAQ,SAAS,CAAE;AACjD,QAAM,SAAW,cAAc,YAAqB;AAIpD,QAAM,qBAAuB,cAAc,YACxC;AACH,QAAM,eAAe,UAAU,CAAE,OAAO;AAExC,gBAAc;AAEd,QAAM,cAAc,QAAS,qBAAqB,CAAC,CAAE;AAErD,SACC,oBAAC,oBACA;AAAA,IAAC;AAAA;AAAA,MACA,QAAM;AAAA,MACN,OAAQ,EAAE,GAAG,aAAa,YAAY,UAAU;AAAA,MAEhD,8BAAC,iBAAc,OAAQ,aACtB;AAAA,QAAC;AAAA;AAAA,UACA,WAAY;AAAA,YACX;AAAA,YACA;AAAA,cACC,cAAc,CAAC,CAAE,UAAU,WAAW;AAAA,cACtC,mBAAmB;AAAA,YACpB;AAAA,UACD;AAAA,UAEA;AAAA,gCAAC,aAAU;AAAA,YACX,oBAAC,mBAAgB,WAAU,0BAAyB;AAAA,YACpD,oBAAC,SAAI,WAAU,yBACd;AAAA,cAAC;AAAA;AAAA,gBACA,OAAQ;AAAA,kBACP,GAAG;AAAA,kBACH,YAAY;AAAA,gBACb;AAAA,gBAEA;AAAA,sCAAC,UAAO;AAAA,mBAEJ,UAAU,WAAW,SACxB,oBAAC,SAAI,WAAU,uBACd;AAAA,oBAAC;AAAA;AAAA,sBACA;AAAA,sBACA;AAAA;AAAA,kBAGD,GACD;AAAA;AAAA;AAAA,YAEF,GACD;AAAA;AAAA;AAAA,MACD,GACD;AAAA;AAAA,EACD,GACD;AAEF;",
   "names": []
 }