@wordpress/boot 0.15.0 → 0.15.1

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+## 0.15.1 (2026-06-16)
+
+## 0.15.0 (2026-06-10)
+
+### Code Quality
+
+-   Add missing `@types/react` dependency. [#78882](https://github.com/WordPress/gutenberg/pull/78882).

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='c8750e18d1']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='c51646152c']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "c8750e18d1");
-  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:#fff9}.interface-interface-skeleton__header{margin-top:0!important}"));
+  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}"));
   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='c8750e18d1']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"c8750e18d1\");\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:#fff9}.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,2xCAA2xC,CAAC;AACt0C,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='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;",
   "names": []
 }

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

@@ -7,7 +7,7 @@ import DrilldownItem from "./drilldown-item/index.mjs";
 import DropdownItem from "./dropdown-item/index.mjs";
 import NavigationScreen from "./navigation-screen/index.mjs";
 import { useSidebarParent } from "./use-sidebar-parent.mjs";
-import { Fragment, jsx } from "react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 function Navigation() {
   const backButtonRef = useRef(null);
   const [animationDirection, setAnimationDirection] = useState(null);
@@ -51,7 +51,7 @@ function Navigation() {
       animationDirection: animationDirection || void 0,
       navigationKey,
       onNavigate: handleNavigate,
-      content: /* @__PURE__ */ jsx(Fragment, { children: items.map((item) => {
+      content: /* @__PURE__ */ jsx("div", { role: "list", children: items.map((item) => {
         if (item.parent_type === "dropdown") {
           return /* @__PURE__ */ jsx(
             DropdownItem,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/navigation/index.tsx"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { STORE_NAME } from '../../store';\nimport NavigationItem from './navigation-item';\nimport DrilldownItem from './drilldown-item';\nimport DropdownItem from './dropdown-item';\nimport NavigationScreen from './navigation-screen';\nimport { useSidebarParent } from './use-sidebar-parent';\nimport type { MenuItem } from '../../store/types';\n\nfunction Navigation() {\n\tconst backButtonRef = useRef< HTMLButtonElement >( null );\n\tconst [ animationDirection, setAnimationDirection ] = useState<\n\t\t'forward' | 'backward' | null\n\t>( null );\n\tconst [ parentId, setParentId, parentDropdownId, setParentDropdownId ] =\n\t\tuseSidebarParent();\n\tconst menuItems = useSelect(\n\t\t( select ) =>\n\t\t\t// @ts-ignore\n\t\t\tselect( STORE_NAME ).getMenuItems() as MenuItem[],\n\t\t[]\n\t);\n\tconst parent = useMemo(\n\t\t() => menuItems.find( ( item ) => item.id === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\t// Create a unique key for the current navigation state\n\t// The sidebar will animate when the key changes.\n\tconst navigationKey = parent ? `drilldown-${ parent.id }` : 'root';\n\n\t// We use transitions to handle navigation clicks\n\t// This allows smooth animations and non blocking navigation.\n\tconst handleNavigate = ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => {\n\t\tsetAnimationDirection( direction );\n\t\tsetParentId( id );\n\t};\n\n\tconst handleDropdownToggle = ( dropdownId: string ) => {\n\t\tsetParentDropdownId(\n\t\t\tparentDropdownId === dropdownId ? undefined : dropdownId\n\t\t);\n\t};\n\n\tconst items = useMemo(\n\t\t() => menuItems.filter( ( item ) => item.parent === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\n\tconst hasRealIcons = items.some( ( item ) => !! item.icon );\n\n\treturn (\n\t\t<NavigationScreen\n\t\t\tisRoot={ ! parent }\n\t\t\ttitle={ parent ? parent.label : '' }\n\t\t\tbackMenuItem={ parent?.parent }\n\t\t\tbackButtonRef={ backButtonRef }\n\t\t\tanimationDirection={ animationDirection || undefined }\n\t\t\tnavigationKey={ navigationKey }\n\t\t\tonNavigate={ handleNavigate }\n\t\t\tcontent={\n\t\t\t\t<>\n\t\t\t\t\t{ items.map( ( item: MenuItem ) => {\n\t\t\t\t\t\tif ( item.parent_type === 'dropdown' ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DropdownItem\n\t\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\t\tid={ item.id }\n\t\t\t\t\t\t\t\t\tclassName=\"boot-navigation-item\"\n\t\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t\t\tisExpanded={ parentDropdownId === item.id }\n\t\t\t\t\t\t\t\t\tonToggle={ () =>\n\t\t\t\t\t\t\t\t\t\thandleDropdownToggle( item.id )\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{ item.label }\n\t\t\t\t\t\t\t\t</DropdownItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.parent_type === 'drilldown' ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DrilldownItem\n\t\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\t\tid={ item.id }\n\t\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t\t\tonNavigate={ handleNavigate }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t</DrilldownItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigationItem\n\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\tto={ item.to }\n\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t</NavigationItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</>\n\t\t\t}\n\t\t/>\n\t);\n}\n\nexport default Navigation;\n"],
-  "mappings": ";AAGA,SAAS,UAAU,SAAS,cAAc;AAC1C,SAAS,iBAAiB;AAK1B,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,SAAS,wBAAwB;AA4D7B,mBAII,WAJJ;AAzDJ,SAAS,aAAa;AACrB,QAAM,gBAAgB,OAA6B,IAAK;AACxD,QAAM,CAAE,oBAAoB,qBAAsB,IAAI,SAEnD,IAAK;AACR,QAAM,CAAE,UAAU,aAAa,kBAAkB,mBAAoB,IACpE,iBAAiB;AAClB,QAAM,YAAY;AAAA,IACjB,CAAE;AAAA;AAAA,MAED,OAAQ,UAAW,EAAE,aAAa;AAAA;AAAA,IACnC,CAAC;AAAA,EACF;AACA,QAAM,SAAS;AAAA,IACd,MAAM,UAAU,KAAM,CAAE,SAAU,KAAK,OAAO,QAAS;AAAA,IACvD,CAAE,WAAW,QAAS;AAAA,EACvB;AAGA,QAAM,gBAAgB,SAAS,aAAc,OAAO,EAAG,KAAK;AAI5D,QAAM,iBAAiB,CAAE;AAAA,IACxB;AAAA,IACA;AAAA,EACD,MAGO;AACN,0BAAuB,SAAU;AACjC,gBAAa,EAAG;AAAA,EACjB;AAEA,QAAM,uBAAuB,CAAE,eAAwB;AACtD;AAAA,MACC,qBAAqB,aAAa,SAAY;AAAA,IAC/C;AAAA,EACD;AAEA,QAAM,QAAQ;AAAA,IACb,MAAM,UAAU,OAAQ,CAAE,SAAU,KAAK,WAAW,QAAS;AAAA,IAC7D,CAAE,WAAW,QAAS;AAAA,EACvB;AAEA,QAAM,eAAe,MAAM,KAAM,CAAE,SAAU,CAAC,CAAE,KAAK,IAAK;AAE1D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS,CAAE;AAAA,MACX,OAAQ,SAAS,OAAO,QAAQ;AAAA,MAChC,cAAe,QAAQ;AAAA,MACvB;AAAA,MACA,oBAAqB,sBAAsB;AAAA,MAC3C;AAAA,MACA,YAAa;AAAA,MACb,SACC,gCACG,gBAAM,IAAK,CAAE,SAAoB;AAClC,YAAK,KAAK,gBAAgB,YAAa;AACtC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,IAAK,KAAK;AAAA,cACV,WAAU;AAAA,cACV,MAAO,KAAK;AAAA,cACZ,uBAAwB;AAAA,cACxB,YAAa,qBAAqB,KAAK;AAAA,cACvC,UAAW,MACV,qBAAsB,KAAK,EAAG;AAAA,cAG7B,eAAK;AAAA;AAAA,YAVD,KAAK;AAAA,UAWZ;AAAA,QAEF;AAEA,YAAK,KAAK,gBAAgB,aAAc;AACvC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,IAAK,KAAK;AAAA,cACV,MAAO,KAAK;AAAA,cACZ,uBAAwB;AAAA,cACxB,YAAa;AAAA,cAEX,eAAK;AAAA;AAAA,YAND,KAAK;AAAA,UAOZ;AAAA,QAEF;AAEA,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,IAAK,KAAK;AAAA,YACV,MAAO,KAAK;AAAA,YACZ,uBAAwB;AAAA,YAEtB,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEF,CAAE,GACH;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,qBAAQ;",
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useMemo, useRef } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { STORE_NAME } from '../../store';\nimport NavigationItem from './navigation-item';\nimport DrilldownItem from './drilldown-item';\nimport DropdownItem from './dropdown-item';\nimport NavigationScreen from './navigation-screen';\nimport { useSidebarParent } from './use-sidebar-parent';\nimport type { MenuItem } from '../../store/types';\n\nfunction Navigation() {\n\tconst backButtonRef = useRef< HTMLButtonElement >( null );\n\tconst [ animationDirection, setAnimationDirection ] = useState<\n\t\t'forward' | 'backward' | null\n\t>( null );\n\tconst [ parentId, setParentId, parentDropdownId, setParentDropdownId ] =\n\t\tuseSidebarParent();\n\tconst menuItems = useSelect(\n\t\t( select ) =>\n\t\t\t// @ts-ignore\n\t\t\tselect( STORE_NAME ).getMenuItems() as MenuItem[],\n\t\t[]\n\t);\n\tconst parent = useMemo(\n\t\t() => menuItems.find( ( item ) => item.id === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\t// Create a unique key for the current navigation state\n\t// The sidebar will animate when the key changes.\n\tconst navigationKey = parent ? `drilldown-${ parent.id }` : 'root';\n\n\t// We use transitions to handle navigation clicks\n\t// This allows smooth animations and non blocking navigation.\n\tconst handleNavigate = ( {\n\t\tid,\n\t\tdirection,\n\t}: {\n\t\tid?: string;\n\t\tdirection: 'forward' | 'backward';\n\t} ) => {\n\t\tsetAnimationDirection( direction );\n\t\tsetParentId( id );\n\t};\n\n\tconst handleDropdownToggle = ( dropdownId: string ) => {\n\t\tsetParentDropdownId(\n\t\t\tparentDropdownId === dropdownId ? undefined : dropdownId\n\t\t);\n\t};\n\n\tconst items = useMemo(\n\t\t() => menuItems.filter( ( item ) => item.parent === parentId ),\n\t\t[ menuItems, parentId ]\n\t);\n\n\tconst hasRealIcons = items.some( ( item ) => !! item.icon );\n\n\treturn (\n\t\t<NavigationScreen\n\t\t\tisRoot={ ! parent }\n\t\t\ttitle={ parent ? parent.label : '' }\n\t\t\tbackMenuItem={ parent?.parent }\n\t\t\tbackButtonRef={ backButtonRef }\n\t\t\tanimationDirection={ animationDirection || undefined }\n\t\t\tnavigationKey={ navigationKey }\n\t\t\tonNavigate={ handleNavigate }\n\t\t\tcontent={\n\t\t\t\t<div role=\"list\">\n\t\t\t\t\t{ items.map( ( item: MenuItem ) => {\n\t\t\t\t\t\tif ( item.parent_type === 'dropdown' ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DropdownItem\n\t\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\t\tid={ item.id }\n\t\t\t\t\t\t\t\t\tclassName=\"boot-navigation-item\"\n\t\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t\t\tisExpanded={ parentDropdownId === item.id }\n\t\t\t\t\t\t\t\t\tonToggle={ () =>\n\t\t\t\t\t\t\t\t\t\thandleDropdownToggle( item.id )\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{ item.label }\n\t\t\t\t\t\t\t\t</DropdownItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.parent_type === 'drilldown' ) {\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<DrilldownItem\n\t\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\t\tid={ item.id }\n\t\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t\t\tonNavigate={ handleNavigate }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t\t</DrilldownItem>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigationItem\n\t\t\t\t\t\t\t\tkey={ item.id }\n\t\t\t\t\t\t\t\tto={ item.to }\n\t\t\t\t\t\t\t\ticon={ item.icon }\n\t\t\t\t\t\t\t\tshouldShowPlaceholder={ hasRealIcons }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ item.label }\n\t\t\t\t\t\t\t</NavigationItem>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</div>\n\t\t\t}\n\t\t/>\n\t);\n}\n\nexport default Navigation;\n"],
+  "mappings": ";AAGA,SAAS,UAAU,SAAS,cAAc;AAC1C,SAAS,iBAAiB;AAK1B,SAAS,kBAAkB;AAC3B,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,OAAO,kBAAkB;AACzB,OAAO,sBAAsB;AAC7B,SAAS,wBAAwB;AAgEzB;AA7DR,SAAS,aAAa;AACrB,QAAM,gBAAgB,OAA6B,IAAK;AACxD,QAAM,CAAE,oBAAoB,qBAAsB,IAAI,SAEnD,IAAK;AACR,QAAM,CAAE,UAAU,aAAa,kBAAkB,mBAAoB,IACpE,iBAAiB;AAClB,QAAM,YAAY;AAAA,IACjB,CAAE;AAAA;AAAA,MAED,OAAQ,UAAW,EAAE,aAAa;AAAA;AAAA,IACnC,CAAC;AAAA,EACF;AACA,QAAM,SAAS;AAAA,IACd,MAAM,UAAU,KAAM,CAAE,SAAU,KAAK,OAAO,QAAS;AAAA,IACvD,CAAE,WAAW,QAAS;AAAA,EACvB;AAGA,QAAM,gBAAgB,SAAS,aAAc,OAAO,EAAG,KAAK;AAI5D,QAAM,iBAAiB,CAAE;AAAA,IACxB;AAAA,IACA;AAAA,EACD,MAGO;AACN,0BAAuB,SAAU;AACjC,gBAAa,EAAG;AAAA,EACjB;AAEA,QAAM,uBAAuB,CAAE,eAAwB;AACtD;AAAA,MACC,qBAAqB,aAAa,SAAY;AAAA,IAC/C;AAAA,EACD;AAEA,QAAM,QAAQ;AAAA,IACb,MAAM,UAAU,OAAQ,CAAE,SAAU,KAAK,WAAW,QAAS;AAAA,IAC7D,CAAE,WAAW,QAAS;AAAA,EACvB;AAEA,QAAM,eAAe,MAAM,KAAM,CAAE,SAAU,CAAC,CAAE,KAAK,IAAK;AAE1D,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS,CAAE;AAAA,MACX,OAAQ,SAAS,OAAO,QAAQ;AAAA,MAChC,cAAe,QAAQ;AAAA,MACvB;AAAA,MACA,oBAAqB,sBAAsB;AAAA,MAC3C;AAAA,MACA,YAAa;AAAA,MACb,SACC,oBAAC,SAAI,MAAK,QACP,gBAAM,IAAK,CAAE,SAAoB;AAClC,YAAK,KAAK,gBAAgB,YAAa;AACtC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,IAAK,KAAK;AAAA,cACV,WAAU;AAAA,cACV,MAAO,KAAK;AAAA,cACZ,uBAAwB;AAAA,cACxB,YAAa,qBAAqB,KAAK;AAAA,cACvC,UAAW,MACV,qBAAsB,KAAK,EAAG;AAAA,cAG7B,eAAK;AAAA;AAAA,YAVD,KAAK;AAAA,UAWZ;AAAA,QAEF;AAEA,YAAK,KAAK,gBAAgB,aAAc;AACvC,iBACC;AAAA,YAAC;AAAA;AAAA,cAEA,IAAK,KAAK;AAAA,cACV,MAAO,KAAK;AAAA,cACZ,uBAAwB;AAAA,cACxB,YAAa;AAAA,cAEX,eAAK;AAAA;AAAA,YAND,KAAK;AAAA,UAOZ;AAAA,QAEF;AAEA,eACC;AAAA,UAAC;AAAA;AAAA,YAEA,IAAK,KAAK;AAAA,YACV,MAAO,KAAK;AAAA,YACZ,uBAAwB;AAAA,YAEtB,eAAK;AAAA;AAAA,UALD,KAAK;AAAA,QAMZ;AAAA,MAEF,CAAE,GACH;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,qBAAQ;",
   "names": []
 }

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

@@ -10,9 +10,11 @@ import {
   SlotFillProvider
 } from "@wordpress/components";
 import { menu } from "@wordpress/icons";
-import { useState, useEffect } from "@wordpress/element";
+import { useState, useEffect, useMemo } from "@wordpress/element";
 import { __ } from "@wordpress/i18n";
-import { Page } from "@wordpress/admin-ui";
+import { Page, getAdminThemeColors } from "@wordpress/admin-ui";
+import { Tooltip } from "@wordpress/ui";
+import { privateApis as themePrivateApis } from "@wordpress/theme";
 import Sidebar from "../sidebar/index.mjs";
 import SavePanel from "../save-panel/index.mjs";
 import CanvasRenderer from "../canvas-renderer/index.mjs";
@@ -20,17 +22,17 @@ 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='be0c278a6c']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='80382f1901']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "be0c278a6c");
-  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:#00000080;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 #0003;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,#e4e4e4);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,#e4e4e4);border-radius:0;bottom:0;box-shadow:0 1px 3px #0000001a;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", "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}}"));
   document.head.appendChild(style);
 }
 
 // packages/boot/src/components/root/index.tsx
-import { UserThemeProvider } from "../user-theme-provider/index.mjs";
 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();
@@ -45,105 +47,124 @@ function Root() {
   useEffect(() => {
     setIsMobileSidebarOpen(false);
   }, [location.pathname, isMobileViewport]);
-  return /* @__PURE__ */ jsx(SlotFillProvider, { children: /* @__PURE__ */ jsx(UserThemeProvider, { isRoot: true, color: { bg: "#f8f8f8" }, children: /* @__PURE__ */ jsx(UserThemeProvider, { color: { bg: "#1d2327" }, children: /* @__PURE__ */ jsxs(
-    "div",
+  const themeColors = useMemo(getAdminThemeColors, []);
+  return /* @__PURE__ */ jsx(SlotFillProvider, { children: /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsx(
+    ThemeProvider,
     {
-      className: clsx("boot-layout", {
-        "has-canvas": !!canvas || canvas === null,
-        "has-full-canvas": isFullScreen
-      }),
-      children: [
-        /* @__PURE__ */ jsx(SavePanel, {}),
-        /* @__PURE__ */ jsx(SnackbarNotices, { className: "boot-notices__snackbar" }),
-        isMobileViewport && /* @__PURE__ */ jsx(Page.SidebarToggleFill, { children: /* @__PURE__ */ jsx(
-          Button,
-          {
-            icon: menu,
-            onClick: () => setIsMobileSidebarOpen(true),
-            label: __("Open navigation panel"),
-            size: "compact"
-          }
-        ) }),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: isMobileViewport && isMobileSidebarOpen && !isFullScreen && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            initial: { opacity: 0 },
-            animate: { opacity: 1 },
-            exit: { opacity: 0 },
-            transition: {
-              type: "tween",
-              duration: disableMotion ? 0 : 0.2,
-              ease: "easeOut"
-            },
-            className: "boot-layout__sidebar-backdrop",
-            onClick: () => setIsMobileSidebarOpen(false),
-            onKeyDown: (event) => {
-              if (event.key === "Escape") {
-                setIsMobileSidebarOpen(false);
+      isRoot: true,
+      color: { ...themeColors, background: "#f8f8f8" },
+      children: /* @__PURE__ */ jsx(ThemeProvider, { color: themeColors, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx("boot-layout", {
+            "has-canvas": !!canvas || canvas === null,
+            "has-full-canvas": isFullScreen
+          }),
+          children: [
+            /* @__PURE__ */ jsx(SavePanel, {}),
+            /* @__PURE__ */ jsx(SnackbarNotices, { className: "boot-notices__snackbar" }),
+            isMobileViewport && /* @__PURE__ */ jsx(Page.SidebarToggleFill, { children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                icon: menu,
+                onClick: () => setIsMobileSidebarOpen(true),
+                label: __("Open navigation panel"),
+                size: "compact"
               }
-            },
-            role: "button",
-            tabIndex: -1,
-            "aria-label": __(
-              "Close navigation panel"
-            )
-          }
-        ) }),
-        /* @__PURE__ */ jsx(AnimatePresence, { children: isMobileViewport && isMobileSidebarOpen && !isFullScreen && /* @__PURE__ */ jsx(
-          motion.div,
-          {
-            initial: { x: "-100%" },
-            animate: { x: 0 },
-            exit: { x: "-100%" },
-            transition: {
-              type: "tween",
-              duration: disableMotion ? 0 : 0.2,
-              ease: "easeOut"
-            },
-            className: "boot-layout__sidebar is-mobile",
-            children: /* @__PURE__ */ jsx(Sidebar, {})
-          }
-        ) }),
-        !isMobileViewport && !isFullScreen && /* @__PURE__ */ jsx("div", { className: "boot-layout__sidebar", children: /* @__PURE__ */ jsx(Sidebar, {}) }),
-        /* @__PURE__ */ jsx("div", { className: "boot-layout__surfaces", children: /* @__PURE__ */ jsxs(UserThemeProvider, { color: { bg: "#ffffff" }, children: [
-          /* @__PURE__ */ jsx(Outlet, {}),
-          (canvas || canvas === null) && /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: clsx(
-                "boot-layout__canvas",
-                {
-                  "has-mobile-drawer": canvas?.isPreview && isMobileViewport
-                }
-              ),
-              children: [
-                canvas?.isPreview && isMobileViewport && /* @__PURE__ */ jsx("div", { className: "boot-layout__mobile-sidebar-drawer", children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    icon: menu,
-                    onClick: () => setIsMobileSidebarOpen(
-                      true
-                    ),
-                    label: __(
-                      "Open navigation panel"
-                    ),
-                    size: "compact"
-                  }
-                ) }),
-                /* @__PURE__ */ jsx(
-                  CanvasRenderer,
-                  {
-                    canvas,
-                    routeContentModule
+            ) }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: isMobileViewport && isMobileSidebarOpen && !isFullScreen && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: {
+                  type: "tween",
+                  duration: disableMotion ? 0 : 0.2,
+                  ease: "easeOut"
+                },
+                className: "boot-layout__sidebar-backdrop",
+                onClick: () => setIsMobileSidebarOpen(false),
+                onKeyDown: (event) => {
+                  if (event.key === "Escape") {
+                    setIsMobileSidebarOpen(
+                      false
+                    );
                   }
+                },
+                role: "button",
+                tabIndex: -1,
+                "aria-label": __(
+                  "Close navigation panel"
                 )
-              ]
-            }
-          )
-        ] }) })
-      ]
+              }
+            ) }),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: isMobileViewport && isMobileSidebarOpen && !isFullScreen && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: { x: "-100%" },
+                animate: { x: 0 },
+                exit: { x: "-100%" },
+                transition: {
+                  type: "tween",
+                  duration: disableMotion ? 0 : 0.2,
+                  ease: "easeOut"
+                },
+                className: "boot-layout__sidebar is-mobile",
+                children: /* @__PURE__ */ jsx(Sidebar, {})
+              }
+            ) }),
+            !isMobileViewport && !isFullScreen && /* @__PURE__ */ jsx("div", { className: "boot-layout__sidebar", children: /* @__PURE__ */ jsx(Sidebar, {}) }),
+            /* @__PURE__ */ jsx("div", { className: "boot-layout__surfaces", children: /* @__PURE__ */ jsxs(
+              ThemeProvider,
+              {
+                color: {
+                  ...themeColors,
+                  background: "#ffffff"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Outlet, {}),
+                  (canvas || canvas === null) && /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: clsx(
+                        "boot-layout__canvas",
+                        {
+                          "has-mobile-drawer": canvas?.isPreview && isMobileViewport
+                        }
+                      ),
+                      children: [
+                        canvas?.isPreview && isMobileViewport && /* @__PURE__ */ jsx("div", { className: "boot-layout__mobile-sidebar-drawer", children: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            icon: menu,
+                            onClick: () => setIsMobileSidebarOpen(
+                              true
+                            ),
+                            label: __(
+                              "Open navigation panel"
+                            ),
+                            size: "compact"
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx(
+                          CanvasRenderer,
+                          {
+                            canvas,
+                            routeContentModule
+                          }
+                        )
+                      ]
+                    }
+                  )
+                ]
+              }
+            ) })
+          ]
+        }
+      ) })
     }
-  ) }) }) });
+  ) }) });
 }
 export {
   Root as default

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 } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { Page } from '@wordpress/admin-ui';\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';\nimport { UserThemeProvider } from '../user-theme-provider';\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\treturn (\n\t\t<SlotFillProvider>\n\t\t\t<UserThemeProvider isRoot color={ { bg: '#f8f8f8' } }>\n\t\t\t\t<UserThemeProvider color={ { bg: '#1d2327' } }>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx( 'boot-layout', {\n\t\t\t\t\t\t\t'has-canvas': !! canvas || canvas === null,\n\t\t\t\t\t\t\t'has-full-canvas': isFullScreen,\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{ isMobileViewport && (\n\t\t\t\t\t\t\t<Page.SidebarToggleFill>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\ticon={ menu }\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( true )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tlabel={ __( 'Open navigation panel' ) }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</Page.SidebarToggleFill>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ /* Mobile Sidebar Backdrop */ }\n\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\tanimate={ { opacity: 1 } }\n\t\t\t\t\t\t\t\t\t\texit={ { opacity: 0 } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion ? 0 : 0.2,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\t\tclassName=\"boot-layout__sidebar-backdrop\"\n\t\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t\tsetIsMobileSidebarOpen( false )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\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\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} }\n\t\t\t\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\t\t\t\ttabIndex={ -1 }\n\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\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) }\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</AnimatePresence>\n\t\t\t\t\t\t{ /* Mobile Sidebar */ }\n\t\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t\t{ isMobileViewport &&\n\t\t\t\t\t\t\t\tisMobileSidebarOpen &&\n\t\t\t\t\t\t\t\t! isFullScreen && (\n\t\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\t\tinitial={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\tanimate={ { x: 0 } }\n\t\t\t\t\t\t\t\t\t\texit={ { x: '-100%' } }\n\t\t\t\t\t\t\t\t\t\ttransition={ {\n\t\t\t\t\t\t\t\t\t\t\ttype: 'tween',\n\t\t\t\t\t\t\t\t\t\t\tduration: disableMotion ? 0 : 0.2,\n\t\t\t\t\t\t\t\t\t\t\tease: 'easeOut',\n\t\t\t\t\t\t\t\t\t\t} }\n\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>\n\t\t\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t\t{ /* Desktop Sidebar */ }\n\t\t\t\t\t\t{ ! isMobileViewport && ! isFullScreen && (\n\t\t\t\t\t\t\t<div className=\"boot-layout__sidebar\">\n\t\t\t\t\t\t\t\t<Sidebar />\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<div className=\"boot-layout__surfaces\">\n\t\t\t\t\t\t\t<UserThemeProvider color={ { bg: '#ffffff' } }>\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\n\t\t\t\t\t\t\t\t\t\tclassName={ clsx(\n\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{\n\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\tcanvas?.isPreview &&\n\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}\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\t\t\t{ canvas?.isPreview &&\n\t\t\t\t\t\t\t\t\t\t\tisMobileViewport && (\n\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<Button\n\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\tonClick={ () =>\n\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\ttrue\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}\n\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'Open navigation panel'\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\tsize=\"compact\"\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</div>\n\t\t\t\t\t\t\t\t\t\t\t) }\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</UserThemeProvider>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</UserThemeProvider>\n\t\t\t</UserThemeProvider>\n\t\t</SlotFillProvider>\n\t);\n}\n", "if (typeof document !== 'undefined' && process.env.NODE_ENV !== 'test' && !document.head.querySelector(\"style[data-wp-hash='be0c278a6c']\")) {\n\tconst style = document.createElement(\"style\");\n\tstyle.setAttribute(\"data-wp-hash\", \"be0c278a6c\");\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:#00000080;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 #0003;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,#e4e4e4);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,#e4e4e4);border-radius:0;bottom:0;box-shadow:0 1px 3px #0000001a;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,kBAAkB,wBAAwB;AACnD;AAAA,EACC,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,EAC7B;AAAA,EACA;AAAA,OACM;AACP,SAAS,YAAY;AACrB,SAAS,UAAU,iBAAiB;AACpC,SAAS,UAAU;AACnB,SAAS,YAAY;AAKrB,OAAO,aAAa;AACpB,OAAO,eAAe;AACtB,OAAO,oBAAoB;AAC3B,OAAO,mBAAmB;AAC1B,SAAS,cAAc;;;AC7BvB,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,8/GAA8/G,CAAC;AACziH,WAAS,KAAK,YAAY,KAAK;AAChC;;;AD2BA,SAAS,yBAAyB;AAqC5B,cA4EG,YA5EH;AAnCN,IAAM,EAAE,aAAa,YAAY,OAAO,IAAI,OAAQ,gBAAiB;AAEtD,SAAR,OAAwB;AAC9B,QAAM,UAAU,WAAW;AAC3B,QAAM,WAAW,YAAY;AAC7B,QAAM,eAAe,QAAS,QAAQ,SAAS,CAAE;AACjD,QAAM,SAAW,cAAc,YAAqB;AAIpD,QAAM,qBAAuB,cAAc,YACxC;AACH,QAAM,eAAe,UAAU,CAAE,OAAO;AAExC,gBAAc;AAGd,QAAM,mBAAmB,iBAAkB,UAAU,GAAI;AACzD,QAAM,CAAE,qBAAqB,sBAAuB,IAAI,SAAU,KAAM;AACxE,QAAM,gBAAgB,iBAAiB;AAEvC,YAAW,MAAM;AAChB,2BAAwB,KAAM;AAAA,EAC/B,GAAG,CAAE,SAAS,UAAU,gBAAiB,CAAE;AAE3C,SACC,oBAAC,oBACA,8BAAC,qBAAkB,QAAM,MAAC,OAAQ,EAAE,IAAI,UAAU,GACjD,8BAAC,qBAAkB,OAAQ,EAAE,IAAI,UAAU,GAC1C;AAAA,IAAC;AAAA;AAAA,MACA,WAAY,KAAM,eAAe;AAAA,QAChC,cAAc,CAAC,CAAE,UAAU,WAAW;AAAA,QACtC,mBAAmB;AAAA,MACpB,CAAE;AAAA,MAEF;AAAA,4BAAC,aAAU;AAAA,QACX,oBAAC,mBAAgB,WAAU,0BAAyB;AAAA,QAClD,oBACD,oBAAC,KAAK,mBAAL,EACA;AAAA,UAAC;AAAA;AAAA,YACA,MAAO;AAAA,YACP,SAAU,MACT,uBAAwB,IAAK;AAAA,YAE9B,OAAQ,GAAI,uBAAwB;AAAA,YACpC,MAAK;AAAA;AAAA,QACN,GACD;AAAA,QAGD,oBAAC,mBACE,8BACD,uBACA,CAAE,gBACD;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,SAAU,EAAE,SAAS,EAAE;AAAA,YACvB,SAAU,EAAE,SAAS,EAAE;AAAA,YACvB,MAAO,EAAE,SAAS,EAAE;AAAA,YACpB,YAAa;AAAA,cACZ,MAAM;AAAA,cACN,UAAU,gBAAgB,IAAI;AAAA,cAC9B,MAAM;AAAA,YACP;AAAA,YACA,WAAU;AAAA,YACV,SAAU,MACT,uBAAwB,KAAM;AAAA,YAE/B,WAAY,CAAE,UAAW;AACxB,kBAAK,MAAM,QAAQ,UAAW;AAC7B,uCAAwB,KAAM;AAAA,cAC/B;AAAA,YACD;AAAA,YACA,MAAK;AAAA,YACL,UAAW;AAAA,YACX,cAAa;AAAA,cACZ;AAAA,YACD;AAAA;AAAA,QACD,GAEH;AAAA,QAEA,oBAAC,mBACE,8BACD,uBACA,CAAE,gBACD;AAAA,UAAC,OAAO;AAAA,UAAP;AAAA,YACA,SAAU,EAAE,GAAG,QAAQ;AAAA,YACvB,SAAU,EAAE,GAAG,EAAE;AAAA,YACjB,MAAO,EAAE,GAAG,QAAQ;AAAA,YACpB,YAAa;AAAA,cACZ,MAAM;AAAA,cACN,UAAU,gBAAgB,IAAI;AAAA,cAC9B,MAAM;AAAA,YACP;AAAA,YACA,WAAU;AAAA,YAEV,8BAAC,WAAQ;AAAA;AAAA,QACV,GAEH;AAAA,QAEE,CAAE,oBAAoB,CAAE,gBACzB,oBAAC,SAAI,WAAU,wBACd,8BAAC,WAAQ,GACV;AAAA,QAED,oBAAC,SAAI,WAAU,yBACd,+BAAC,qBAAkB,OAAQ,EAAE,IAAI,UAAU,GAC1C;AAAA,8BAAC,UAAO;AAAA,WAEJ,UAAU,WAAW,SACxB;AAAA,YAAC;AAAA;AAAA,cACA,WAAY;AAAA,gBACX;AAAA,gBACA;AAAA,kBACC,qBACC,QAAQ,aACR;AAAA,gBACF;AAAA,cACD;AAAA,cAEE;AAAA,wBAAQ,aACT,oBACC,oBAAC,SAAI,WAAU,sCACd;AAAA,kBAAC;AAAA;AAAA,oBACA,MAAO;AAAA,oBACP,SAAU,MACT;AAAA,sBACC;AAAA,oBACD;AAAA,oBAED,OAAQ;AAAA,sBACP;AAAA,oBACD;AAAA,oBACA,MAAK;AAAA;AAAA,gBACN,GACD;AAAA,gBAEF;AAAA,kBAAC;AAAA;AAAA,oBACA;AAAA,oBACA;AAAA;AAAA,gBAGD;AAAA;AAAA;AAAA,UACD;AAAA,WAEF,GACD;AAAA;AAAA;AAAA,EACD,GACD,GACD,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 { 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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",
   "names": []
 }

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

@@ -3,23 +3,26 @@ import clsx from "clsx";
 import { privateApis as routePrivateApis } from "@wordpress/route";
 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 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='be0c278a6c']")) {
+if (typeof document !== "undefined" && process.env.NODE_ENV !== "test" && !document.head.querySelector("style[data-wp-hash='80382f1901']")) {
   const style = document.createElement("style");
-  style.setAttribute("data-wp-hash", "be0c278a6c");
-  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:#00000080;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 #0003;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,#e4e4e4);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,#e4e4e4);border-radius:0;bottom:0;box-shadow:0 1px 3px #0000001a;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", "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}}"));
   document.head.appendChild(style);
 }
 
 // packages/boot/src/components/root/single-page.tsx
 import useRouteTitle from "../app/use-route-title.mjs";
-import { UserThemeProvider } from "../user-theme-provider/index.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];
@@ -27,32 +30,49 @@ function RootSinglePage() {
   const routeContentModule = currentMatch?.loaderData?.routeContentModule;
   const isFullScreen = canvas && !canvas.isPreview;
   useRouteTitle();
-  return /* @__PURE__ */ jsx(SlotFillProvider, { children: /* @__PURE__ */ jsx(UserThemeProvider, { isRoot: true, color: { bg: "#f8f8f8" }, children: /* @__PURE__ */ jsx(UserThemeProvider, { color: { bg: "#1d2327" }, children: /* @__PURE__ */ jsxs(
-    "div",
+  const themeColors = useMemo(getAdminThemeColors, []);
+  return /* @__PURE__ */ jsx(SlotFillProvider, { children: /* @__PURE__ */ jsx(
+    ThemeProvider,
     {
-      className: clsx(
-        "boot-layout boot-layout--single-page",
+      isRoot: true,
+      color: { ...themeColors, background: "#f8f8f8" },
+      children: /* @__PURE__ */ jsx(ThemeProvider, { color: themeColors, children: /* @__PURE__ */ jsxs(
+        "div",
         {
-          "has-canvas": !!canvas || canvas === null,
-          "has-full-canvas": isFullScreen
-        }
-      ),
-      children: [
-        /* @__PURE__ */ jsx(SavePanel, {}),
-        /* @__PURE__ */ jsx(SnackbarNotices, { className: "boot-notices__snackbar" }),
-        /* @__PURE__ */ jsx("div", { className: "boot-layout__surfaces", children: /* @__PURE__ */ jsxs(UserThemeProvider, { color: { bg: "#ffffff" }, children: [
-          /* @__PURE__ */ jsx(Outlet, {}),
-          (canvas || canvas === null) && /* @__PURE__ */ jsx("div", { className: "boot-layout__canvas", children: /* @__PURE__ */ jsx(
-            CanvasRenderer,
+          className: clsx(
+            "boot-layout boot-layout--single-page",
             {
-              canvas,
-              routeContentModule
+              "has-canvas": !!canvas || canvas === null,
+              "has-full-canvas": isFullScreen
             }
-          ) })
-        ] }) })
-      ]
+          ),
+          children: [
+            /* @__PURE__ */ jsx(SavePanel, {}),
+            /* @__PURE__ */ jsx(SnackbarNotices, { className: "boot-notices__snackbar" }),
+            /* @__PURE__ */ jsx("div", { className: "boot-layout__surfaces", children: /* @__PURE__ */ jsxs(
+              ThemeProvider,
+              {
+                color: {
+                  ...themeColors,
+                  background: "#ffffff"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(Outlet, {}),
+                  (canvas || canvas === null) && /* @__PURE__ */ jsx("div", { className: "boot-layout__canvas", children: /* @__PURE__ */ jsx(
+                    CanvasRenderer,
+                    {
+                      canvas,
+                      routeContentModule
+                    }
+                  ) })
+                ]
+              }
+            ) })
+          ]
+        }
+      ) })
     }
-  ) }) }) });
+  ) });
 }
 export {
   RootSinglePage as default