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

package/build-types/components/app/index.d.ts

@@ -1,6 +1,11 @@
 import type { MenuItem, Route } from '../../store/types';
-export declare function init({ menuItems, routes, }: {
+export declare function init({ mountId, menuItems, routes, }: {
+    mountId: string;
     menuItems?: MenuItem[];
     routes?: Route[];
 }): Promise<void>;
+export declare function initSinglePage({ mountId, routes, }: {
+    mountId: string;
+    routes?: Route[];
+}): Promise<void>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/components/app/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAQzD,wBAAsB,IAAI,CAAE,EAC3B,SAAS,EACT,MAAM,GACN,EAAE;IACF,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CACjB,iBAmBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/app/index.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAQzD,wBAAsB,IAAI,CAAE,EAC3B,OAAO,EACP,SAAS,EACT,MAAM,GACN,EAAE;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CACjB,iBAmBA;AAED,wBAAsB,cAAc,CAAE,EACrC,OAAO,EACP,MAAM,GACN,EAAE;IACF,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,EAAE,CAAC;CACjB,iBAeA"}

package/build-types/components/app/router.d.ts

@@ -1,7 +1,9 @@
+import type { ComponentType } from 'react';
 import type { Route } from '../../store/types';
 interface RouterProps {
     routes: Route[];
+    rootComponent?: ComponentType;
 }
-export default function Router({ routes }: RouterProps): import("react").JSX.Element;
+export default function Router({ routes, rootComponent, }: RouterProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=router.d.ts.map

package/build-types/components/app/router.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/app/router.tsx"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAE,KAAK,EAAsB,MAAM,mBAAmB,CAAC;AAwInE,UAAU,WAAW;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;CAChB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAAE,MAAM,EAAE,EAAE,WAAW,+BAgCtD"}
+{"version":3,"file":"router.d.ts","sourceRoot":"","sources":["../../../src/components/app/router.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAa3C,OAAO,KAAK,EAAE,KAAK,EAAsB,MAAM,mBAAmB,CAAC;AA2JnE,UAAU,WAAW;IACpB,MAAM,EAAE,KAAK,EAAE,CAAC;IAChB,aAAa,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAC/B,MAAM,EACN,aAAoB,GACpB,EAAE,WAAW,+BAgCb"}

package/build-types/components/canvas/back-button.d.ts

@@ -0,0 +1,13 @@
+import './back-button.scss';
+/**
+ * Back button component that appears in full-screen canvas mode.
+ * Matches next-admin's SiteIconBackButton design.
+ *
+ * @param {Object} props        Component props
+ * @param {number} props.length Number of BackButton fills (from Slot)
+ * @return Back button with slide and hover animations
+ */
+export default function BootBackButton({ length }: {
+    length: number;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=back-button.d.ts.map

package/build-types/components/canvas/back-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"back-button.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/back-button.tsx"],"names":[],"mappings":"AAgBA,OAAO,oBAAoB,CAAC;AAkB5B;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAAE,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,sCA2CrE"}

package/build-types/components/canvas/index.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Internal dependencies
+ */
+import type { CanvasData } from '../../store/types';
+interface CanvasProps {
+    canvas: CanvasData;
+}
+/**
+ * Canvas component that dynamically loads and renders the lazy editor.
+ *
+ * @param {Object} props        - Component props
+ * @param {Object} props.canvas - Canvas data containing postType and postId
+ * @return Canvas surface with editor
+ */
+export default function Canvas({ canvas }: CanvasProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/canvas/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/canvas/index.tsx"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGpD,UAAU,WAAW;IACpB,MAAM,EAAE,UAAU,CAAC;CACnB;AAED;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAE,EAAE,MAAM,EAAE,EAAE,WAAW,+BAuDtD"}

package/build-types/components/navigation/path-matching.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"path-matching.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/path-matching.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAqClD;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,gBAClB,MAAM,aACR,QAAQ,EAAE,KACnB,QAAQ,GAAG,IAyBb,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,OAC3B,MAAM,GAAG,SAAS,aACX,QAAQ,EAAE,KACnB,MAAM,GAAG,SA0BX,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,OAC1B,MAAM,GAAG,SAAS,aACX,QAAQ,EAAE,KACnB,MAAM,GAAG,SAsBX,CAAC"}
+{"version":3,"file":"path-matching.d.ts","sourceRoot":"","sources":["../../../src/components/navigation/path-matching.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAqClD;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,GAC/B,aAAa,MAAM,EACnB,WAAW,QAAQ,EAAE,KACnB,QAAQ,GAAG,IAyBb,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,GAC/B,IAAI,MAAM,GAAG,SAAS,EACtB,WAAW,QAAQ,EAAE,KACnB,MAAM,GAAG,SA0BX,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,GAC9B,IAAI,MAAM,GAAG,SAAS,EACtB,WAAW,QAAQ,EAAE,KACnB,MAAM,GAAG,SAsBX,CAAC"}

package/build-types/components/root/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/root/index.tsx"],"names":[],"mappings":"AAiBA,OAAO,cAAc,CAAC;AAItB,MAAM,CAAC,OAAO,UAAU,IAAI,gCAoB3B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/root/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,cAAc,CAAC;AAItB,MAAM,CAAC,OAAO,UAAU,IAAI,gCAwC3B"}

package/build-types/components/root/single-page.d.ts

@@ -0,0 +1,7 @@
+import './style.scss';
+/**
+ * Root component for single page mode (no sidebar).
+ * Used when rendering pages within wp-admin without taking over the full page.
+ */
+export default function RootSinglePage(): import("react").JSX.Element;
+//# sourceMappingURL=single-page.d.ts.map

package/build-types/components/root/single-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"single-page.d.ts","sourceRoot":"","sources":["../../../src/components/root/single-page.tsx"],"names":[],"mappings":"AAoBA,OAAO,cAAc,CAAC;AAItB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,gCAmCrC"}

package/build-types/components/save-panel/index.d.ts

@@ -0,0 +1,2 @@
+export default function SavePanel(): false | import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/build-types/components/save-panel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/save-panel/index.tsx"],"names":[],"mappings":"AAaA,MAAM,CAAC,OAAO,UAAU,SAAS,wCAqBhC"}

package/build-types/components/save-panel/use-save-shortcut.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Register the save keyboard shortcut in view mode.
+ *
+ * @param param0               Object containing the function to open the save panel.
+ * @param param0.openSavePanel Function to open the save panel.
+ */
+export default function useSaveShortcut({ openSavePanel, }: {
+    openSavePanel: () => void;
+}): void;
+//# sourceMappingURL=use-save-shortcut.d.ts.map

package/build-types/components/save-panel/use-save-shortcut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-save-shortcut.d.ts","sourceRoot":"","sources":["../../../src/components/save-panel/use-save-shortcut.ts"],"names":[],"mappings":"AAgBA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAE,EACxC,aAAa,GACb,EAAE;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC1B,QAwCA"}

package/build-types/index.d.ts

@@ -2,5 +2,5 @@
  * Internal dependencies
  */
 import './style.scss';
-export { init } from './components/app';
+export { init, initSinglePage } from './components/app';
 //# sourceMappingURL=index.d.ts.map

package/build-types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,cAAc,CAAC;AACtB,OAAO,EAAE,IAAI,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC"}

package/build-types/store/types.d.ts

@@ -33,6 +33,14 @@ export interface RouteLoaderContext {
     params: Record<string, string>;
     search: Record<string, unknown>;
 }
+/**
+ * Canvas data returned by route's canvas function.
+ */
+export interface CanvasData {
+    postType: string;
+    postId: string;
+    isPreview?: boolean;
+}
 /**
  * Route configuration interface.
  * Routes specify content_module for surfaces and optionally route_module for lifecycle functions.
@@ -53,6 +61,7 @@ export interface Route {
      * The module should export a named export `route` containing:
      * - beforeLoad?: Pre-navigation hook (authentication, validation, redirects)
      * - loader?: Data preloading function
+     * - canvas?: Function that returns canvas data for rendering an editor
      */
     route_module?: string;
 }

package/build-types/store/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/store/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;AAExD,MAAM,WAAW,QAAQ;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;CACvC;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,CAAC;IACjC,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;CAClC;AAED;;;GAGG;AACH,MAAM,WAAW,KAAK;IACrB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,KAAK;IACrB,SAAS,EAAE,MAAM,CAAE,MAAM,EAAE,QAAQ,CAAE,CAAC;IACtC,MAAM,EAAE,KAAK,EAAE,CAAC;CAChB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/store/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtD;;;;;;GAMG;AACH,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,GAAG,CAAC,OAAO,GAAG,SAAS,CAAC;AAExD,MAAM,WAAW,QAAQ;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;CACvC;AAED;;;GAGG;AACH,MAAM,WAAW,aAAa;IAC7B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,aAAa,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,MAAM,CAAE,CAAC;IACjC,MAAM,EAAE,MAAM,CAAE,MAAM,EAAE,OAAO,CAAE,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,UAAU;IAC1B,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;GAGG;AACH,MAAM,WAAW,KAAK;IACrB;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;;;;;OAMG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,MAAM,WAAW,KAAK;IACrB,SAAS,EAAE,MAAM,CAAE,MAAM,EAAE,QAAQ,CAAE,CAAC;IACtC,MAAM,EAAE,KAAK,EAAE,CAAC;CAChB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/boot",
-	"version": "0.1.1-next.2f1c7c01b.0",
+	"version": "0.2.0",
 	"description": "Minimal boot package for WordPress admin pages.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -36,21 +36,24 @@
 	"dependencies": {
 		"@tanstack/history": "^1.133.28",
 		"@tanstack/react-router": "^1.120.5",
-		"@wordpress/admin-ui": "^1.2.1-next.2f1c7c01b.0",
-		"@wordpress/commands": "^1.34.1-next.2f1c7c01b.0",
-		"@wordpress/components": "^30.7.2-next.2f1c7c01b.0",
-		"@wordpress/compose": "^7.34.1-next.2f1c7c01b.0",
-		"@wordpress/core-data": "^7.34.1-next.2f1c7c01b.0",
-		"@wordpress/data": "^10.34.1-next.2f1c7c01b.0",
-		"@wordpress/element": "^6.34.1-next.2f1c7c01b.0",
-		"@wordpress/html-entities": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/i18n": "^6.7.1-next.2f1c7c01b.0",
-		"@wordpress/icons": "^11.1.1-next.2f1c7c01b.0",
-		"@wordpress/keycodes": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/primitives": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/private-apis": "^1.34.1-next.2f1c7c01b.0",
-		"@wordpress/theme": "^0.1.1-next.2f1c7c01b.0",
-		"@wordpress/url": "^4.34.1-next.2f1c7c01b.0",
+		"@wordpress/admin-ui": "^1.3.0",
+		"@wordpress/commands": "^1.35.0",
+		"@wordpress/components": "^30.8.0",
+		"@wordpress/compose": "^7.35.0",
+		"@wordpress/core-data": "^7.35.0",
+		"@wordpress/data": "^10.35.0",
+		"@wordpress/editor": "^14.35.0",
+		"@wordpress/element": "^6.35.0",
+		"@wordpress/html-entities": "^4.35.0",
+		"@wordpress/i18n": "^6.8.0",
+		"@wordpress/icons": "^11.2.0",
+		"@wordpress/keyboard-shortcuts": "^5.35.0",
+		"@wordpress/keycodes": "^4.35.0",
+		"@wordpress/lazy-editor": "^1.1.0",
+		"@wordpress/primitives": "^4.35.0",
+		"@wordpress/private-apis": "^1.35.0",
+		"@wordpress/theme": "^0.2.0",
+		"@wordpress/url": "^4.35.0",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -60,5 +63,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c6ddcdf455bc02567a2c9e03de6862a2061b85e8"
+	"gitHead": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
 }

package/src/components/app/index.tsx

@@ -1,26 +1,29 @@
 /**
  * WordPress dependencies
  */
-import { createRoot, StrictMode } from '@wordpress/element';
+import { createRoot, StrictMode, type ComponentType } from '@wordpress/element';
 import { dispatch, useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import Router from './router';
+import RootSinglePage from '../root/single-page';
 import { store } from '../../store';
 import type { MenuItem, Route } from '../../store/types';
 
-function App() {
+function App( { rootComponent }: { rootComponent?: ComponentType } ) {
 	const routes = useSelect( ( select ) => select( store ).getRoutes(), [] );
 
-	return <Router routes={ routes } />;
+	return <Router routes={ routes } rootComponent={ rootComponent } />;
 }
 
 export async function init( {
+	mountId,
 	menuItems,
 	routes,
 }: {
+	mountId: string;
 	menuItems?: MenuItem[];
 	routes?: Route[];
 } ) {
@@ -33,7 +36,7 @@ export async function init( {
 	} );
 
 	// Render the app
-	const rootElement = document.getElementById( 'gutenberg-boot-app' );
+	const rootElement = document.getElementById( mountId );
 	if ( rootElement ) {
 		const root = createRoot( rootElement );
 		root.render(
@@ -43,3 +46,26 @@ export async function init( {
 		);
 	}
 }
+
+export async function initSinglePage( {
+	mountId,
+	routes,
+}: {
+	mountId: string;
+	routes?: Route[];
+} ) {
+	( routes ?? [] ).forEach( ( route ) => {
+		dispatch( store ).registerRoute( route );
+	} );
+
+	// Render the app without sidebar
+	const rootElement = document.getElementById( mountId );
+	if ( rootElement ) {
+		const root = createRoot( rootElement );
+		root.render(
+			<StrictMode>
+				<App rootComponent={ RootSinglePage } />
+			</StrictMode>
+		);
+	}
+}

package/src/components/app/router.tsx

@@ -8,6 +8,7 @@ import {
 	RouterProvider,
 	createBrowserHistory,
 	type AnyRoute,
+	redirect,
 } from '@tanstack/react-router';
 import { parseHref } from '@tanstack/history';
 import type { ComponentType } from 'react';
@@ -88,8 +89,11 @@ async function createRouteFromDefinition(
 
 	// Load route module for lifecycle functions if specified
 	let routeConfig: {
-		beforeLoad?: ( context: RouteLoaderContext ) => void | Promise< void >;
+		beforeLoad?: (
+			context: RouteLoaderContext & { redirect: Function }
+		) => void | Promise< void >;
 		loader?: ( context: RouteLoaderContext ) => Promise< unknown >;
+		canvas?: ( context: RouteLoaderContext ) => Promise< any >;
 	} = {};
 
 	if ( route.route_module ) {
@@ -101,23 +105,35 @@ async function createRouteFromDefinition(
 		getParentRoute: () => parentRoute,
 		path: route.path,
 		beforeLoad: routeConfig.beforeLoad
-			? async ( opts: any ) => {
-					const context: RouteLoaderContext = {
+			? ( opts: any ) =>
+					routeConfig.beforeLoad!( {
 						params: opts.params || {},
 						search: opts.search || {},
-					};
-					await routeConfig.beforeLoad!( context );
-			  }
-			: undefined,
-		loader: routeConfig.loader
-			? async ( opts: any ) => {
-					const context: RouteLoaderContext = {
-						params: opts.params || {},
-						search: opts.search || {},
-					};
-					return await routeConfig.loader!( context );
-			  }
+						redirect,
+					} )
 			: undefined,
+		loader: async ( opts: any ) => {
+			const context: RouteLoaderContext = {
+				params: opts.params || {},
+				search: opts.deps || {},
+			};
+
+			// Call both loader and canvas functions if they exist
+			const [ loaderData, canvasData ] = await Promise.all( [
+				routeConfig.loader
+					? routeConfig.loader( context )
+					: Promise.resolve( undefined ),
+				routeConfig.canvas
+					? routeConfig.canvas( context )
+					: Promise.resolve( undefined ),
+			] );
+
+			return {
+				...( loaderData as any ),
+				canvas: canvasData,
+			};
+		},
+		loaderDeps: ( opts: any ) => opts.search,
 		component: SurfacesModule,
 	} );
 }
@@ -125,12 +141,16 @@ async function createRouteFromDefinition(
 /**
  * Creates a route tree from route definitions.
  *
- * @param routes Routes definition.
+ * @param routes        Routes definition.
+ * @param rootComponent Root component to use for the router.
  * @return Router tree.
  */
-async function createRouteTree( routes: Route[] ) {
+async function createRouteTree(
+	routes: Route[],
+	rootComponent: ComponentType = Root
+) {
 	const rootRoute = createRootRoute( {
-		component: Root,
+		component: rootComponent as any,
 		context: () => ( {} ),
 	} );
 
@@ -161,9 +181,13 @@ function createPathHistory() {
 
 interface RouterProps {
 	routes: Route[];
+	rootComponent?: ComponentType;
 }
 
-export default function Router( { routes }: RouterProps ) {
+export default function Router( {
+	routes,
+	rootComponent = Root,
+}: RouterProps ) {
 	const [ router, setRouter ] = useState< any >( null );
 
 	useEffect( () => {
@@ -171,7 +195,7 @@ export default function Router( { routes }: RouterProps ) {
 
 		async function initializeRouter() {
 			const history = createPathHistory();
-			const routeTree = await createRouteTree( routes );
+			const routeTree = await createRouteTree( routes, rootComponent );
 
 			if ( ! cancelled ) {
 				const newRouter = createRouter( {
@@ -188,7 +212,7 @@ export default function Router( { routes }: RouterProps ) {
 		return () => {
 			cancelled = true;
 		};
-	}, [ routes ] );
+	}, [ routes, rootComponent ] );
 
 	if ( ! router ) {
 		return <div>Loading routes...</div>;

package/src/components/canvas/back-button.scss

@@ -0,0 +1,62 @@
+@use "@wordpress/base-styles/variables";
+
+.boot-canvas-back-button {
+	position: absolute;
+	top: 0;
+	left: 0;
+	height: variables.$header-height;
+	width: variables.$header-height;
+	z-index: 100;
+}
+
+.boot-canvas-back-button__container {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+
+.boot-canvas-back-button__link.components-button {
+	width: variables.$header-height;
+	height: variables.$header-height;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--wpds-color-bg-surface-neutral-weak);
+	text-decoration: none;
+	padding: 0;
+	border-radius: 0;
+
+	@media not (prefers-reduced-motion) {
+		transition: outline 0.1s ease-out;
+	}
+
+	&:focus:not(:active) {
+		outline:
+			var(--wpds-border-width-focus) solid
+			var(--wpds-color-stroke-focus-brand);
+		outline-offset: calc(-1 * var(--wpds-border-width-focus));
+	}
+}
+
+.boot-canvas-back-button__icon {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: variables.$header-height;
+	height: variables.$header-height;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-color: hsla(0, 0%, 80%);
+	pointer-events: none;
+
+	svg {
+		fill: currentColor;
+	}
+
+	&.has-site-icon {
+		background-color: hsla(0, 0%, 100%, 0.6);
+		-webkit-backdrop-filter: saturate(180%) blur(15px);
+		backdrop-filter: saturate(180%) blur(15px);
+	}
+}

package/src/components/canvas/back-button.tsx

@@ -0,0 +1,86 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Button,
+	Icon,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+import { arrowUpLeft } from '@wordpress/icons';
+import { useReducedMotion } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import SiteIcon from '../site-icon';
+import './back-button.scss';
+
+/**
+ * Overlay arrow animation that appears on hover.
+ * Matches next-admin implementation with clip-path.
+ */
+const toggleHomeIconVariants = {
+	edit: {
+		opacity: 0,
+		scale: 0.2,
+	},
+	hover: {
+		opacity: 1,
+		scale: 1,
+		clipPath: 'inset( 22% round 2px )',
+	},
+};
+
+/**
+ * Back button component that appears in full-screen canvas mode.
+ * Matches next-admin's SiteIconBackButton design.
+ *
+ * @param {Object} props        Component props
+ * @param {number} props.length Number of BackButton fills (from Slot)
+ * @return Back button with slide and hover animations
+ */
+export default function BootBackButton( { length }: { length: number } ) {
+	const disableMotion = useReducedMotion();
+
+	const handleBack = () => {
+		window.history.back();
+	};
+
+	// Only render if this is the only back button
+	if ( length > 1 ) {
+		return null;
+	}
+
+	const transition = {
+		duration: disableMotion ? 0 : 0.3,
+	};
+
+	return (
+		<motion.div
+			className="boot-canvas-back-button"
+			animate="edit"
+			initial="edit"
+			whileHover="hover"
+			whileTap="tap"
+			transition={ transition }
+		>
+			<Button
+				className="boot-canvas-back-button__link"
+				onClick={ handleBack }
+				aria-label={ __( 'Go back' ) }
+				__next40pxDefaultSize
+			>
+				<SiteIcon />
+			</Button>
+
+			{ /* Overlay arrow that appears on hover */ }
+			<motion.div
+				className="boot-canvas-back-button__icon"
+				variants={ toggleHomeIconVariants }
+			>
+				<Icon icon={ arrowUpLeft } />
+			</motion.div>
+		</motion.div>
+	);
+}

package/src/components/canvas/index.tsx

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { Spinner } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { CanvasData } from '../../store/types';
+import BootBackButton from './back-button';
+
+interface CanvasProps {
+	canvas: CanvasData;
+}
+
+/**
+ * Canvas component that dynamically loads and renders the lazy editor.
+ *
+ * @param {Object} props        - Component props
+ * @param {Object} props.canvas - Canvas data containing postType and postId
+ * @return Canvas surface with editor
+ */
+export default function Canvas( { canvas }: CanvasProps ) {
+	const [ Editor, setEditor ] = useState< any >( null );
+
+	useEffect( () => {
+		// Dynamically import the lazy-editor module
+		import( '@wordpress/lazy-editor' )
+			.then( ( module ) => {
+				setEditor( () => module.Editor );
+			} )
+			.catch( ( error ) => {
+				// eslint-disable-next-line no-console
+				console.error( 'Failed to load lazy editor:', error );
+			} );
+	}, [] );
+
+	// Show spinner while loading the editor module
+	if ( ! Editor ) {
+		return (
+			<div
+				style={ {
+					display: 'flex',
+					justifyContent: 'center',
+					alignItems: 'center',
+					height: '100%',
+					padding: '2rem',
+				} }
+			>
+				<Spinner />
+			</div>
+		);
+	}
+
+	// Render back button in full-screen mode (when not preview)
+	// Uses render prop pattern to receive fillProps from Slot
+	const backButton = ! canvas.isPreview
+		? ( { length }: { length: number } ) => (
+				<BootBackButton length={ length } />
+		  )
+		: undefined;
+
+	// Render the editor with canvas data
+	return (
+		<div
+			style={ { height: '100%' } }
+			// @ts-expect-error inert untyped properly.
+			inert={ canvas.isPreview ? 'true' : undefined }
+		>
+			<Editor
+				postType={ canvas.postType }
+				postId={ canvas.postId }
+				settings={ { isPreviewMode: canvas.isPreview } }
+				backButton={ backButton }
+			/>
+		</div>
+	);
+}