@povio/ui 5.0.0-rc.10 → 5.0.0-rc.12

package/dist/{AppCanvasPage-BEER5hHp.js → AppCanvasPage-DCjiFfQW.js}

@@ -1,42 +1,19 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { a as getBoxHighlights, d as Pin, f as Moon, l as useUIConfiguration, o as HighlightOverlay, r as inspectElement, s as InspectorDetails, t as UIConfigurationModal, u as Sun } from "./UIConfigurator-CTlq-hrG.js";
+import { a as inspectElement, c as HighlightOverlay, d as emptyConfiguration, f as useUIConfiguration, g as Moon, h as Pin, i as saveThemeCss, l as InspectorDetails, m as Plus, p as Sun, r as getThemeWriter, s as getBoxHighlights, t as UIConfigurationModal } from "./UIConfigurator-CBU0G6rb.js";
 import { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
 import { i as Search } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as Upload } from "./upload-CXU83BJ4.js";
 import { t as X } from "./x-B6vfz8Ps.js";
-import { memo, useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, n as $f2ff30fde7b014be$export$3ddf2d174ce01153 } from "./Dialog-CKLkS00H.js";
+import { t as $2ec61d1d4f780267$export$a8a3e93435678ff9 } from "./Heading-nI1_VOaE.js";
+import { t as Select } from "./Select-CgIhoWgk.js";
+import { t as ThemeContext } from "./theme.context-B3wQDJ-i.js";
+import { c as isEditableToken, i as exportCss, v as parseThemeCss } from "./theme-model-DtTsIxou.js";
+import { t as componentArtboards } from "./groups-oQmSeqXn.js";
+import { Suspense, lazy, memo, useCallback, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/code-xml.mjs
-/**
-* @license lucide-react v1.43.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
-const __iconData$9 = {
-	name: "code-xml",
-	size: 24,
-	node: [
-		["path", {
-			d: "m18 16 4-4-4-4",
-			key: "1inbqp"
-		}],
-		["path", {
-			d: "m6 8-4 4 4 4",
-			key: "15zrgr"
-		}],
-		["path", {
-			d: "m14.5 4-5 16",
-			key: "e7oirm"
-		}]
-	],
-	aliases: ["code-2"]
-};
-__iconData$9.node;
-const CodeXml = createLucideIcon(__iconData$9);
-//#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/download.mjs
 /**
 * @license lucide-react v1.43.0 - ISC
@@ -44,7 +21,7 @@ const CodeXml = createLucideIcon(__iconData$9);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$8 = {
+const __iconData$10 = {
 	name: "download",
 	size: 24,
 	node: [
@@ -62,8 +39,8 @@ const __iconData$8 = {
 		}]
 	]
 };
-__iconData$8.node;
-const Download = createLucideIcon(__iconData$8);
+__iconData$10.node;
+const Download = createLucideIcon(__iconData$10);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/frame.mjs
 /**
@@ -72,7 +49,7 @@ const Download = createLucideIcon(__iconData$8);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$7 = {
+const __iconData$9 = {
 	name: "frame",
 	size: 24,
 	node: [
@@ -106,8 +83,8 @@ const __iconData$7 = {
 		}]
 	]
 };
-__iconData$7.node;
-const Frame = createLucideIcon(__iconData$7);
+__iconData$9.node;
+const Frame = createLucideIcon(__iconData$9);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/hand.mjs
 /**
@@ -116,7 +93,7 @@ const Frame = createLucideIcon(__iconData$7);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$6 = {
+const __iconData$8 = {
 	name: "hand",
 	size: 24,
 	node: [
@@ -138,8 +115,8 @@ const __iconData$6 = {
 		}]
 	]
 };
-__iconData$6.node;
-const Hand = createLucideIcon(__iconData$6);
+__iconData$8.node;
+const Hand = createLucideIcon(__iconData$8);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.mjs
 /**
@@ -148,7 +125,7 @@ const Hand = createLucideIcon(__iconData$6);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$5 = {
+const __iconData$7 = {
 	name: "monitor",
 	size: 24,
 	node: [
@@ -176,8 +153,8 @@ const __iconData$5 = {
 		}]
 	]
 };
-__iconData$5.node;
-const Monitor = createLucideIcon(__iconData$5);
+__iconData$7.node;
+const Monitor = createLucideIcon(__iconData$7);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.mjs
 /**
@@ -186,7 +163,7 @@ const Monitor = createLucideIcon(__iconData$5);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$4 = {
+const __iconData$6 = {
 	name: "mouse-pointer-2",
 	size: 24,
 	node: [["path", {
@@ -194,8 +171,8 @@ const __iconData$4 = {
 		key: "edeuup"
 	}]]
 };
-__iconData$4.node;
-const MousePointer2 = createLucideIcon(__iconData$4);
+__iconData$6.node;
+const MousePointer2 = createLucideIcon(__iconData$6);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-left.mjs
 /**
@@ -204,7 +181,7 @@ const MousePointer2 = createLucideIcon(__iconData$4);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$3 = {
+const __iconData$5 = {
 	name: "panel-left",
 	size: 24,
 	node: [["rect", {
@@ -220,8 +197,8 @@ const __iconData$3 = {
 	}]],
 	aliases: ["sidebar"]
 };
-__iconData$3.node;
-const PanelLeft = createLucideIcon(__iconData$3);
+__iconData$5.node;
+const PanelLeft = createLucideIcon(__iconData$5);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panels-top-left.mjs
 /**
@@ -230,7 +207,7 @@ const PanelLeft = createLucideIcon(__iconData$3);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$2 = {
+const __iconData$4 = {
 	name: "panels-top-left",
 	size: 24,
 	node: [
@@ -253,8 +230,29 @@ const __iconData$2 = {
 	],
 	aliases: ["layout"]
 };
-__iconData$2.node;
-const PanelsTopLeft = createLucideIcon(__iconData$2);
+__iconData$4.node;
+const PanelsTopLeft = createLucideIcon(__iconData$4);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/pencil.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData$3 = {
+	name: "pencil",
+	size: 24,
+	node: [["path", {
+		d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z",
+		key: "1a8usu"
+	}], ["path", {
+		d: "m15 5 4 4",
+		key: "1mk7zo"
+	}]]
+};
+__iconData$3.node;
+const Pencil = createLucideIcon(__iconData$3);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/scan-line.mjs
 /**
@@ -263,7 +261,7 @@ const PanelsTopLeft = createLucideIcon(__iconData$2);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$1 = {
+const __iconData$2 = {
 	name: "scan-line",
 	size: 24,
 	node: [
@@ -289,8 +287,8 @@ const __iconData$1 = {
 		}]
 	]
 };
-__iconData$1.node;
-const ScanLine = createLucideIcon(__iconData$1);
+__iconData$2.node;
+const ScanLine = createLucideIcon(__iconData$2);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/settings-2.mjs
 /**
@@ -299,7 +297,7 @@ const ScanLine = createLucideIcon(__iconData$1);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData = {
+const __iconData$1 = {
 	name: "settings-2",
 	size: 24,
 	node: [
@@ -325,8 +323,937 @@ const __iconData = {
 		}]
 	]
 };
+__iconData$1.node;
+const Settings2 = createLucideIcon(__iconData$1);
+//#endregion
+//#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/trash.mjs
+/**
+* @license lucide-react v1.43.0 - ISC
+*
+* This source code is licensed under the ISC license.
+* See the LICENSE file in the root directory of this source tree.
+*/
+const __iconData = {
+	name: "trash",
+	size: 24,
+	node: [
+		["path", {
+			d: "M10 11v6",
+			key: "nco0om"
+		}],
+		["path", {
+			d: "M14 11v6",
+			key: "outv1u"
+		}],
+		["path", {
+			d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6",
+			key: "miytrc"
+		}],
+		["path", {
+			d: "M3 6h18",
+			key: "d0wm0j"
+		}],
+		["path", {
+			d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+			key: "e791ji"
+		}]
+	],
+	aliases: ["trash-2"]
+};
 __iconData.node;
-const Settings2 = createLucideIcon(__iconData);
+const Trash = createLucideIcon(__iconData);
+//#endregion
+//#region src/app-canvas/useWorkspaceConfiguration.ts
+function useWorkspaceConfiguration(workspace, ready, generation, setManifest) {
+	const $ = c(15);
+	const { currentConfiguration, replaceConfiguration, defaults } = useUIConfiguration();
+	const loaded = useRef(null);
+	const t0 = workspace.id;
+	let t1;
+	if ($[0] !== defaults) {
+		t1 = JSON.stringify(defaults);
+		$[0] = defaults;
+		$[1] = t1;
+	} else t1 = $[1];
+	const key = `${generation}:${t0}:${t1}`;
+	let t2;
+	if ($[2] !== workspace.configuration) {
+		t2 = JSON.stringify(workspace.configuration);
+		$[2] = workspace.configuration;
+		$[3] = t2;
+	} else t2 = $[3];
+	const saved = t2;
+	let t3;
+	let t4;
+	if ($[4] !== currentConfiguration || $[5] !== defaults || $[6] !== key || $[7] !== ready || $[8] !== replaceConfiguration || $[9] !== saved || $[10] !== setManifest || $[11] !== workspace.configuration || $[12] !== workspace.id) {
+		t3 = () => {
+			if (!ready) return;
+			if (!loaded.current || loaded.current.key !== key || loaded.current.saved !== saved) {
+				const value = workspace.configuration ?? (loaded.current ? emptyConfiguration() : currentConfiguration);
+				const switchingWorkspace = !!loaded.current && loaded.current.workspaceId !== workspace.id;
+				loaded.current = {
+					key,
+					workspaceId: workspace.id,
+					saved
+				};
+				replaceConfiguration({
+					...value,
+					theme: {
+						light: Object.fromEntries(Object.entries(value.theme.light).filter((t5) => {
+							const [name, value_0] = t5;
+							return value_0 !== defaults.light[name];
+						})),
+						dark: Object.fromEntries(Object.entries(value.theme.dark).filter((t6) => {
+							const [name_0, value_1] = t6;
+							return value_1 !== defaults.dark[name_0];
+						})),
+						theme: Object.fromEntries(Object.entries(value.theme.theme).filter((t7) => {
+							const [name_1, value_2] = t7;
+							return value_2 !== defaults.theme[name_1];
+						}))
+					}
+				}, switchingWorkspace);
+				return;
+			}
+			const snapshot = {
+				...currentConfiguration,
+				theme: {
+					light: {
+						...defaults.light,
+						...currentConfiguration.theme.light
+					},
+					dark: {
+						...defaults.dark,
+						...currentConfiguration.theme.dark
+					},
+					theme: {
+						...defaults.theme,
+						...currentConfiguration.theme.theme
+					}
+				}
+			};
+			const serialized = JSON.stringify(snapshot);
+			if (serialized === saved) return;
+			loaded.current.saved = serialized;
+			setManifest((current) => ({
+				...current,
+				workspaces: current.workspaces.map((item) => item.id === workspace.id ? {
+					...item,
+					configuration: structuredClone(snapshot)
+				} : item)
+			}));
+		};
+		t4 = [
+			defaults,
+			key,
+			saved,
+			workspace.id,
+			workspace.configuration,
+			ready,
+			currentConfiguration,
+			replaceConfiguration,
+			setManifest
+		];
+		$[4] = currentConfiguration;
+		$[5] = defaults;
+		$[6] = key;
+		$[7] = ready;
+		$[8] = replaceConfiguration;
+		$[9] = saved;
+		$[10] = setManifest;
+		$[11] = workspace.configuration;
+		$[12] = workspace.id;
+		$[13] = t3;
+		$[14] = t4;
+	} else {
+		t3 = $[13];
+		t4 = $[14];
+	}
+	useLayoutEffect(t3, t4);
+}
+//#endregion
+//#region src/app-canvas/SaveCanvasTheme.tsx
+/** Uses the same development-only writer as the configurator's CSS export. */
+function SaveCanvasTheme() {
+	const { active, defaults } = useUIConfiguration();
+	const [writer, setWriter] = useState(null);
+	const [saving, setSaving] = useState(false);
+	const [message, setMessage] = useState("");
+	const [savedTheme, setSavedTheme] = useState(defaults);
+	useEffect(() => setWriter(getThemeWriter()), []);
+	useEffect(() => setSavedTheme(defaults), [defaults]);
+	const css = exportCss(active.theme, defaults);
+	const exported = parseThemeCss(css);
+	const currentTheme = {
+		light: {
+			...defaults.light,
+			...exported.light
+		},
+		dark: {
+			...defaults.dark,
+			...exported.dark
+		},
+		theme: {
+			...defaults.theme,
+			...exported.theme
+		}
+	};
+	const hasChanges = [
+		"light",
+		"dark",
+		"theme"
+	].some((mode) => {
+		return [.../* @__PURE__ */ new Set([...Object.keys(currentTheme[mode]), ...Object.keys(savedTheme[mode])])].some((key) => currentTheme[mode][key]?.trim() !== savedTheme[mode][key]?.trim());
+	});
+	useEffect(() => setMessage(""), [active.theme]);
+	if (!writer || !hasChanges && !saving) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "povio-canvas-save-theme",
+		children: [/* @__PURE__ */ jsx("button", {
+			disabled: saving,
+			title: `Save current CSS settings to ${writer.file}`,
+			onClick: async () => {
+				setSaving(true);
+				setMessage("");
+				try {
+					await saveThemeCss(writer, css);
+					setSavedTheme(currentTheme);
+					setMessage(`Saved CSS to ${writer.file}.`);
+				} catch (error) {
+					setMessage(error instanceof Error ? error.message : "Could not save CSS settings.");
+				} finally {
+					setSaving(false);
+				}
+			},
+			children: saving ? "Saving theme…" : "Save theme to repo"
+		}), message && /* @__PURE__ */ jsx("p", {
+			role: "status",
+			children: message
+		})]
+	});
+}
+//#endregion
+//#region src/app-canvas/manifest.ts
+function createCanvasWorkspace(name, id) {
+	return {
+		id,
+		name: name.trim() || "Workspace",
+		enabledPages: null,
+		positions: {}
+	};
+}
+function createCanvasManifest() {
+	return {
+		version: 2,
+		workspaces: [createCanvasWorkspace("All pages", "default")],
+		activeWorkspaceId: "default",
+		examples: {},
+		breakpoint: "desktop"
+	};
+}
+function isRecord(value) {
+	return value !== null && typeof value === "object" && !Array.isArray(value);
+}
+function isJSON(value, ancestors = /* @__PURE__ */ new Set(), depth = 0) {
+	if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+	if (typeof value === "number") return Number.isFinite(value);
+	if (typeof value !== "object" || depth > 30 || ancestors.has(value)) return false;
+	ancestors.add(value);
+	const valid = Object.values(value).every((child) => isJSON(child, ancestors, depth + 1));
+	ancestors.delete(value);
+	return valid;
+}
+function safeJSON(value, ancestors = /* @__PURE__ */ new Set(), depth = 0) {
+	if (value === null || typeof value === "string" || typeof value === "boolean") return true;
+	if (typeof value === "number") return Number.isFinite(value);
+	if (typeof value !== "object" || depth > 30 || ancestors.has(value)) return false;
+	if (!Array.isArray(value) && Object.getPrototypeOf(value) !== Object.prototype && Object.getPrototypeOf(value) !== null) return false;
+	ancestors.add(value);
+	const valid = Object.entries(value).every(([key, child]) => ![
+		"__proto__",
+		"prototype",
+		"constructor"
+	].includes(key) && safeJSON(child, ancestors, depth + 1));
+	ancestors.delete(value);
+	return valid;
+}
+const stringMap = (value) => isRecord(value) && Object.values(value).every((item) => typeof item === "string");
+const variantValue = (value) => value === null || typeof value === "string" || typeof value === "boolean";
+function validCvaEdits(value) {
+	return isRecord(value) && Object.entries(value).every(([slot, definition]) => {
+		if (!/^[a-zA-Z][a-zA-Z0-9]*\.[a-zA-Z][a-zA-Z0-9]*$/.test(slot) || !isRecord(definition) || !Array.isArray(definition.base) || !definition.base.every((item) => typeof item === "string") || !isRecord(definition.config)) return false;
+		const config = definition.config;
+		return isRecord(config.variants) && Object.values(config.variants).every(stringMap) && isRecord(config.defaultVariants) && Object.values(config.defaultVariants).every(variantValue) && Array.isArray(config.compoundVariants) && config.compoundVariants.every((compound) => isRecord(compound) && Object.values(compound).every((item) => variantValue(item) || Array.isArray(item) && (item.every((part) => typeof part === "string") || item.every((part) => typeof part === "boolean"))));
+	});
+}
+/** Returns an independent JSON configuration, or undefined for invalid/unset overrides. */
+function parseCanvasConfiguration(value) {
+	if (!isRecord(value) || !safeJSON(value) || !isRecord(value.theme) || ![
+		"light",
+		"dark",
+		"theme"
+	].every((key) => stringMap(value.theme && value.theme[key])) || !isRecord(value.config) || value.overrides !== void 0 && !validCvaEdits(value.overrides)) return void 0;
+	return JSON.parse(JSON.stringify(value));
+}
+function parsePositions(input) {
+	return Object.fromEntries(Object.entries(isRecord(input) ? input : {}).flatMap(([breakpoint, entries]) => {
+		if (!isRecord(entries)) return [];
+		return [[breakpoint, Object.fromEntries(Object.entries(entries).flatMap(([id, point]) => isRecord(point) && typeof point.x === "number" && Number.isFinite(point.x) && typeof point.y === "number" && Number.isFinite(point.y) ? [[id, {
+			x: point.x,
+			y: point.y
+		}]] : []))]];
+	}));
+}
+/** Sanitize either stored JSON text or an imported value, migrating v1 positions into the default workspace. */
+function parseCanvasManifest(input) {
+	const fallback = createCanvasManifest();
+	let value = input;
+	if (typeof value === "string") try {
+		value = JSON.parse(value);
+	} catch {
+		return fallback;
+	}
+	if (!isRecord(value) || value.version !== 1 && value.version !== 2) return fallback;
+	const examples = Object.fromEntries(Object.entries(isRecord(value.examples) ? value.examples : {}).flatMap(([id, example]) => {
+		if (!isRecord(example)) return [];
+		const clean = {};
+		if (typeof example.title === "string") clean.title = example.title;
+		if (isRecord(example.params)) clean.params = Object.fromEntries(Object.entries(example.params).filter((entry) => typeof entry[1] === "string"));
+		if (isRecord(example.search)) clean.search = Object.fromEntries(Object.entries(example.search).filter(([, item]) => isJSON(item)));
+		return [[id, clean]];
+	}));
+	const workspaces = [];
+	const ids = /* @__PURE__ */ new Set();
+	if (value.version === 1) workspaces.push({
+		...createCanvasWorkspace("All pages", "default"),
+		positions: parsePositions(value.positions)
+	});
+	else if (Array.isArray(value.workspaces)) for (const entry of value.workspaces) {
+		if (!isRecord(entry) || typeof entry.id !== "string" || !entry.id.trim() || ids.has(entry.id)) continue;
+		ids.add(entry.id);
+		const configuration = parseCanvasConfiguration(entry.configuration);
+		workspaces.push({
+			id: entry.id,
+			name: typeof entry.name === "string" && entry.name.trim() ? entry.name.trim() : "Workspace",
+			enabledPages: Array.isArray(entry.enabledPages) ? [...new Set(entry.enabledPages.filter((id) => typeof id === "string" && id.length > 0))] : null,
+			positions: parsePositions(entry.positions),
+			...configuration ? { configuration } : {}
+		});
+	}
+	if (!workspaces.length) workspaces.push(createCanvasWorkspace("All pages", "default"));
+	return {
+		version: 2,
+		workspaces,
+		activeWorkspaceId: typeof value.activeWorkspaceId === "string" && workspaces.some((workspace) => workspace.id === value.activeWorkspaceId) ? value.activeWorkspaceId : workspaces[0].id,
+		examples,
+		breakpoint: typeof value.breakpoint === "string" && value.breakpoint.length > 0 ? value.breakpoint : fallback.breakpoint
+	};
+}
+//#endregion
+//#region src/app-canvas/WorkspaceControls.tsx
+function WorkspaceControls(t0) {
+	const $ = c(81);
+	const { manifest, setManifest, pages, disabled } = t0;
+	const createTrigger = useRef(null);
+	const pagesTrigger = useRef(null);
+	const editTrigger = useRef(null);
+	let t1;
+	if ($[0] !== manifest.activeWorkspaceId) {
+		t1 = (item) => item.id === manifest.activeWorkspaceId;
+		$[0] = manifest.activeWorkspaceId;
+		$[1] = t1;
+	} else t1 = $[1];
+	const workspace = manifest.workspaces.find(t1);
+	const [action, setAction] = useState(null);
+	const [name, setName] = useState("");
+	const [draftPages, setDraftPages] = useState(null);
+	const [query, setQuery] = useState("");
+	let t2;
+	if ($[2] !== setAction) {
+		t2 = () => {
+			setAction(null);
+		};
+		$[2] = setAction;
+		$[3] = t2;
+	} else t2 = $[3];
+	useEffect(t2, [workspace.id]);
+	let t3;
+	if ($[4] !== disabled || $[5] !== setAction) {
+		t3 = () => {
+			if (disabled) setAction(null);
+		};
+		$[4] = disabled;
+		$[5] = setAction;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== disabled) {
+		t4 = [disabled];
+		$[7] = disabled;
+		$[8] = t4;
+	} else t4 = $[8];
+	useEffect(t3, t4);
+	const open = (next) => {
+		setName(next === "create" ? "" : workspace.name);
+		setDraftPages(next === "create" ? [] : workspace.enabledPages);
+		setQuery("");
+		setAction(next);
+	};
+	let t5;
+	if ($[9] !== draftPages) {
+		t5 = (id) => draftPages === null || draftPages.includes(id);
+		$[9] = draftPages;
+		$[10] = t5;
+	} else t5 = $[10];
+	const enabled = t5;
+	const title = action === "create" ? "Create workspace" : action === "rename" ? "Edit workspace" : action === "delete" ? "Delete workspace?" : "Manage pages";
+	const save = () => {
+		if (disabled || !action) return;
+		if ((action === "create" || action === "rename") && !name.trim()) return;
+		const created = action === "create" ? {
+			...createCanvasWorkspace(name.trim(), crypto.randomUUID()),
+			enabledPages: draftPages
+		} : null;
+		setManifest((current) => {
+			if (created) return {
+				...current,
+				workspaces: [...current.workspaces, created],
+				activeWorkspaceId: created.id
+			};
+			if (action === "delete") {
+				if (current.workspaces.length < 2) return current;
+				const remaining = current.workspaces.filter((item_0) => item_0.id !== workspace.id);
+				return {
+					...current,
+					workspaces: remaining,
+					activeWorkspaceId: remaining[0].id
+				};
+			}
+			return {
+				...current,
+				workspaces: current.workspaces.map((item_1) => item_1.id === workspace.id ? {
+					...item_1,
+					...action === "rename" ? { name: name.trim() } : { enabledPages: draftPages }
+				} : item_1)
+			};
+		});
+		setAction(null);
+	};
+	let t6;
+	if ($[11] !== query) {
+		t6 = (page) => `${page.title} ${page.path}`.toLowerCase().includes(query.toLowerCase());
+		$[11] = query;
+		$[12] = t6;
+	} else t6 = $[12];
+	const visiblePages = pages.filter(t6);
+	const t7 = workspace.id;
+	let t8;
+	if ($[13] !== manifest.workspaces) {
+		t8 = manifest.workspaces.map(_temp);
+		$[13] = manifest.workspaces;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== setManifest) {
+		t9 = (id_0) => {
+			if (id_0 !== null) setManifest((current_0) => ({
+				...current_0,
+				activeWorkspaceId: String(id_0)
+			}));
+		};
+		$[15] = setManifest;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== open) {
+		t10 = () => open("create");
+		$[17] = open;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+		t11 = /* @__PURE__ */ jsx(Plus, { size: 15 });
+		$[19] = t11;
+	} else t11 = $[19];
+	let t12;
+	if ($[20] !== t10) {
+		t12 = /* @__PURE__ */ jsx("button", {
+			ref: createTrigger,
+			"aria-label": "Add workspace",
+			title: "Add workspace",
+			onClick: t10,
+			children: t11
+		});
+		$[20] = t10;
+		$[21] = t12;
+	} else t12 = $[21];
+	let t13;
+	if ($[22] !== open) {
+		t13 = () => open("rename");
+		$[22] = open;
+		$[23] = t13;
+	} else t13 = $[23];
+	let t14;
+	if ($[24] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ jsx(Pencil, { size: 14 });
+		$[24] = t14;
+	} else t14 = $[24];
+	let t15;
+	if ($[25] !== t13) {
+		t15 = /* @__PURE__ */ jsx("button", {
+			ref: editTrigger,
+			"aria-label": "Rename workspace",
+			title: "Edit workspace",
+			onClick: t13,
+			children: t14
+		});
+		$[25] = t13;
+		$[26] = t15;
+	} else t15 = $[26];
+	let t16;
+	if ($[27] !== open) {
+		t16 = () => open("pages");
+		$[27] = open;
+		$[28] = t16;
+	} else t16 = $[28];
+	const t17 = pages.filter((page_0) => workspace.enabledPages === null || workspace.enabledPages.includes(page_0.id));
+	let t18;
+	if ($[29] !== pages.length || $[30] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("span", { children: [
+			t17.length,
+			"/",
+			pages.length
+		] });
+		$[29] = pages.length;
+		$[30] = t17;
+		$[31] = t18;
+	} else t18 = $[31];
+	let t19;
+	if ($[32] !== t16 || $[33] !== t18) {
+		t19 = /* @__PURE__ */ jsx("div", {
+			className: "povio-canvas-workspace-actions",
+			children: /* @__PURE__ */ jsxs("button", {
+				ref: pagesTrigger,
+				onClick: t16,
+				children: [
+					"Manage pages",
+					" ",
+					t18
+				]
+			})
+		});
+		$[32] = t16;
+		$[33] = t18;
+		$[34] = t19;
+	} else t19 = $[34];
+	const T0 = $542a13ca2fa5b484$export$5b6b19405a83ff9d;
+	const t20 = action === "create" ? createTrigger : action === "pages" ? pagesTrigger : editTrigger;
+	const t21 = "bottom start";
+	const t22 = 6;
+	const t23 = "povio-canvas-workspace-popover";
+	const t24 = action !== null;
+	let t25;
+	if ($[35] !== setAction) {
+		t25 = (isOpen) => {
+			if (!isOpen) setAction(null);
+		};
+		$[35] = setAction;
+		$[36] = t25;
+	} else t25 = $[36];
+	const T1 = $f2ff30fde7b014be$export$3ddf2d174ce01153;
+	const t26 = action === "delete" ? "alertdialog" : "dialog";
+	let t27;
+	if ($[37] !== save) {
+		t27 = (event) => {
+			event.preventDefault();
+			save();
+		};
+		$[37] = save;
+		$[38] = t27;
+	} else t27 = $[38];
+	let t28;
+	if ($[39] !== title) {
+		t28 = /* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+			slot: "title",
+			children: title
+		});
+		$[39] = title;
+		$[40] = t28;
+	} else t28 = $[40];
+	let t29;
+	if ($[41] !== setAction) {
+		t29 = () => setAction(null);
+		$[41] = setAction;
+		$[42] = t29;
+	} else t29 = $[42];
+	let t30;
+	if ($[43] === Symbol.for("react.memo_cache_sentinel")) {
+		t30 = /* @__PURE__ */ jsx(X, { size: 12 });
+		$[43] = t30;
+	} else t30 = $[43];
+	let t31;
+	if ($[44] !== t29) {
+		t31 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": "Close workspace dialog",
+			onClick: t29,
+			children: t30
+		});
+		$[44] = t29;
+		$[45] = t31;
+	} else t31 = $[45];
+	let t32;
+	if ($[46] !== t28 || $[47] !== t31) {
+		t32 = /* @__PURE__ */ jsxs("header", {
+			className: "povio-canvas-workspace-popover-heading",
+			children: [t28, t31]
+		});
+		$[46] = t28;
+		$[47] = t31;
+		$[48] = t32;
+	} else t32 = $[48];
+	const t33 = action === "delete" ? /* @__PURE__ */ jsxs("p", { children: [
+		"Delete “",
+		workspace.name,
+		"” and its saved layout and theme?"
+	] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [(action === "create" || action === "rename") && /* @__PURE__ */ jsxs("label", { children: ["Workspace name", /* @__PURE__ */ jsx("input", {
+		autoFocus: true,
+		value: name,
+		maxLength: 80,
+		placeholder: "Workspace name",
+		onChange: (event_0) => setName(event_0.target.value),
+		required: true
+	})] }), (action === "create" || action === "pages") && /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"aria-label": "Enabled pages",
+		className: "povio-canvas-popover-pages",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "povio-canvas-popover-page-tools",
+				children: [
+					/* @__PURE__ */ jsxs("span", { children: [
+						pages.filter((page_1) => enabled(page_1.id)).length,
+						"/",
+						pages.length,
+						" pages"
+					] }),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setDraftPages(null),
+						children: "Enable all"
+					}),
+					/* @__PURE__ */ jsx("button", {
+						type: "button",
+						onClick: () => setDraftPages([]),
+						children: "Disable all"
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("label", {
+				className: "povio-canvas-popover-search",
+				children: [/* @__PURE__ */ jsx(Search, { size: 12 }), /* @__PURE__ */ jsx("input", {
+					"aria-label": "Find workspace pages",
+					placeholder: "Find pages…",
+					value: query,
+					onChange: (event_1) => setQuery(event_1.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "povio-canvas-popover-page-list",
+				children: [visiblePages.map((page_2) => /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("input", {
+					type: "checkbox",
+					checked: enabled(page_2.id),
+					onChange: (event_2) => {
+						const ids = draftPages ?? pages.map(_temp2);
+						setDraftPages(event_2.target.checked ? [.../* @__PURE__ */ new Set([...ids, page_2.id])] : ids.filter((id_1) => id_1 !== page_2.id));
+					}
+				}), /* @__PURE__ */ jsx("span", { children: page_2.title })] }, page_2.id)), !visiblePages.length && /* @__PURE__ */ jsx("p", { children: "No matching pages." })]
+			})
+		]
+	})] });
+	let t34;
+	if ($[49] !== action || $[50] !== manifest.workspaces.length || $[51] !== setAction) {
+		t34 = action === "rename" ? /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "povio-canvas-workspace-delete",
+			disabled: manifest.workspaces.length < 2,
+			onClick: () => setAction("delete"),
+			children: [/* @__PURE__ */ jsx(Trash, { size: 12 }), " Delete workspace"]
+		}) : /* @__PURE__ */ jsx("button", {
+			type: "button",
+			autoFocus: action === "delete",
+			onClick: () => action === "delete" ? setAction("rename") : setAction(null),
+			children: action === "delete" ? "Back" : "Cancel"
+		});
+		$[49] = action;
+		$[50] = manifest.workspaces.length;
+		$[51] = setAction;
+		$[52] = t34;
+	} else t34 = $[52];
+	const t35 = action === "delete" ? "is-danger" : "is-primary";
+	let t36;
+	if ($[53] !== action || $[54] !== disabled || $[55] !== name) {
+		t36 = disabled || (action === "create" || action === "rename") && !name.trim();
+		$[53] = action;
+		$[54] = disabled;
+		$[55] = name;
+		$[56] = t36;
+	} else t36 = $[56];
+	const t37 = action === "create" ? "Create workspace" : action === "rename" ? "Save name" : action === "delete" ? "Delete" : "Save pages";
+	let t38;
+	if ($[57] !== t35 || $[58] !== t36 || $[59] !== t37) {
+		t38 = /* @__PURE__ */ jsx("button", {
+			type: "submit",
+			className: t35,
+			disabled: t36,
+			children: t37
+		});
+		$[57] = t35;
+		$[58] = t36;
+		$[59] = t37;
+		$[60] = t38;
+	} else t38 = $[60];
+	let t39;
+	if ($[61] !== t34 || $[62] !== t38) {
+		t39 = /* @__PURE__ */ jsxs("div", {
+			className: "povio-canvas-workspace-popover-actions",
+			children: [t34, t38]
+		});
+		$[61] = t34;
+		$[62] = t38;
+		$[63] = t39;
+	} else t39 = $[63];
+	let t40;
+	if ($[64] !== t27 || $[65] !== t32 || $[66] !== t33 || $[67] !== t39) {
+		t40 = /* @__PURE__ */ jsxs("form", {
+			onSubmit: t27,
+			children: [
+				t32,
+				t33,
+				t39
+			]
+		});
+		$[64] = t27;
+		$[65] = t32;
+		$[66] = t33;
+		$[67] = t39;
+		$[68] = t40;
+	} else t40 = $[68];
+	let t41;
+	if ($[69] !== T1 || $[70] !== action || $[71] !== t26 || $[72] !== t40 || $[73] !== title) {
+		t41 = /* @__PURE__ */ jsx(T1, {
+			"aria-label": title,
+			role: t26,
+			children: t40
+		}, action);
+		$[69] = T1;
+		$[70] = action;
+		$[71] = t26;
+		$[72] = t40;
+		$[73] = title;
+		$[74] = t41;
+	} else t41 = $[74];
+	let t42;
+	if ($[75] !== T0 || $[76] !== t20 || $[77] !== t24 || $[78] !== t25 || $[79] !== t41) {
+		t42 = /* @__PURE__ */ jsx(T0, {
+			triggerRef: t20,
+			placement: t21,
+			offset: t22,
+			className: t23,
+			isOpen: t24,
+			onOpenChange: t25,
+			children: t41
+		});
+		$[75] = T0;
+		$[76] = t20;
+		$[77] = t24;
+		$[78] = t25;
+		$[79] = t41;
+		$[80] = t42;
+	} else t42 = $[80];
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsxs("fieldset", {
+		className: "povio-canvas-workspaces",
+		disabled,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "povio-canvas-workspace-picker",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "povio-canvas-workspace-select",
+					children: /* @__PURE__ */ jsx(Select, {
+						label: "Workspace",
+						hideLabel: true,
+						size: "small",
+						variant: "outlined",
+						as: "default",
+						className: "povio-canvas-workspace-input",
+						selectionMode: "single",
+						isClearable: false,
+						isDisabled: disabled,
+						renderStaticInput: false,
+						value: t7,
+						items: t8,
+						onChange: t9
+					})
+				}),
+				t12,
+				t15
+			]
+		}), t19]
+	}), t42] });
+}
+function _temp2(item_3) {
+	return item_3.id;
+}
+function _temp(item_2) {
+	return {
+		id: item_2.id,
+		label: item_2.name
+	};
+}
+const canvasStorageTokenHeader = "x-povio-canvas-token";
+//#endregion
+//#region src/app-canvas/useCanvasStorage.ts
+function connectionFromDocument() {
+	if (typeof document === "undefined") return null;
+	try {
+		const value = JSON.parse(document.querySelector(`meta[name="povio-ui-canvas-storage"]`)?.content ?? "null");
+		return value && typeof value.endpoint === "string" && value.endpoint.startsWith("/") && !value.endpoint.startsWith("//") && typeof value.token === "string" && typeof value.file === "string" ? value : null;
+	} catch {
+		return null;
+	}
+}
+function localManifest(key) {
+	try {
+		return parseCanvasManifest(localStorage.getItem(key));
+	} catch {
+		return createCanvasManifest();
+	}
+}
+/** Repo is authoritative when connected; local storage remains an offline draft cache. */
+function useCanvasStorage(key, enabled = true) {
+	const [connection] = useState(() => enabled ? connectionFromDocument() : null);
+	const [manifest, setManifest] = useState(() => localManifest(key));
+	const [ready, setReady] = useState(!connection);
+	const [status, setStatus] = useState(connection ? "Loading workspace…" : "Saved in this browser");
+	const [error, setError] = useState("");
+	const latest = useRef(manifest);
+	latest.current = manifest;
+	const revision = useRef(null);
+	const saved = useRef("");
+	const busy = useRef(false);
+	const paused = useRef(false);
+	const alive = useRef(true);
+	const loadGeneration = useRef(0);
+	useEffect(() => {
+		alive.current = true;
+		return () => {
+			alive.current = false;
+		};
+	}, []);
+	const load = useCallback(async () => {
+		if (!connection) return;
+		const generation = ++loadGeneration.current;
+		setReady(false);
+		setError("");
+		setStatus("Loading workspace…");
+		paused.current = false;
+		try {
+			const response = await fetch(connection.endpoint, {
+				headers: { [canvasStorageTokenHeader]: connection.token },
+				cache: "no-store"
+			});
+			const result = await response.json();
+			if (!response.ok) throw new Error(result.error ?? "Could not read workspace configuration.");
+			if (!alive.current || generation !== loadGeneration.current) return;
+			revision.current = result.revision;
+			if (result.manifest) {
+				const next = parseCanvasManifest(result.manifest);
+				saved.current = JSON.stringify(next);
+				latest.current = next;
+				setManifest(next);
+			} else saved.current = "";
+			setStatus(`Saved to ${connection.file}`);
+			setReady(true);
+		} catch (cause) {
+			if (!alive.current || generation !== loadGeneration.current) return;
+			paused.current = true;
+			setError(cause instanceof Error ? cause.message : "Could not load repository settings.");
+			setStatus("Repository unavailable");
+			setReady(true);
+		}
+	}, [connection]);
+	useEffect(() => {
+		load();
+	}, [load]);
+	const save = useCallback(async () => {
+		if (!connection || busy.current || paused.current || !ready) return;
+		busy.current = true;
+		try {
+			while (alive.current && !paused.current) {
+				const value = latest.current;
+				const serialized = JSON.stringify(value);
+				if (serialized === saved.current) break;
+				setStatus("Saving to repository…");
+				const response_0 = await fetch(connection.endpoint, {
+					method: "POST",
+					headers: {
+						"Content-Type": "application/json",
+						[canvasStorageTokenHeader]: connection.token
+					},
+					body: JSON.stringify({
+						manifest: value,
+						revision: revision.current
+					})
+				});
+				const result_0 = await response_0.json();
+				if (!response_0.ok) throw new Error(response_0.status === 409 ? "Workspace file changed elsewhere. Export your draft, then reload repository settings." : result_0.error ?? "Could not save workspace settings.");
+				revision.current = result_0.revision;
+				saved.current = serialized;
+			}
+			if (alive.current) {
+				setError("");
+				setStatus(`Saved to ${connection.file}`);
+			}
+		} catch (cause_0) {
+			paused.current = true;
+			if (alive.current) {
+				setError(cause_0 instanceof Error ? cause_0.message : "Could not save workspace settings.");
+				setStatus("Workspace not saved to repository");
+			}
+		} finally {
+			busy.current = false;
+		}
+	}, [connection, ready]);
+	useEffect(() => {
+		if (!ready) return;
+		try {
+			localStorage.setItem(key, JSON.stringify(manifest));
+		} catch {
+			if (!connection) setStatus("Browser storage unavailable — export your layout");
+		}
+		if (!connection || paused.current || JSON.stringify(manifest) === saved.current) return;
+		setStatus("Saving to repository…");
+		const timer = setTimeout(() => {
+			save();
+		}, 350);
+		return () => clearTimeout(timer);
+	}, [
+		manifest,
+		key,
+		connection,
+		ready,
+		save
+	]);
+	return {
+		manifest,
+		setManifest,
+		ready,
+		status,
+		error,
+		repositoryFile: connection?.file,
+		reload: load
+	};
+}
 //#endregion
 //#region src/app-canvas/useFrameStartup.ts
 /** Bound concurrent bootstraps, without unloading any admitted page. */
@@ -406,7 +1333,7 @@ function labelOf(element) {
 	return (element.getAttribute("aria-label") || element.getAttribute("alt") || (!element.children.length ? element.textContent?.trim().replace(/\s+/g, " ") : ""))?.slice(0, 48) || (element.id ? `#${element.id}` : "");
 }
 /** Only expanded branches are read and rendered; large pages do not create a second full DOM tree. */
-function PageLayers({ frame, title, selected, onSelect }) {
+function PageLayers({ frame, title, selected, onSelect, onHover }) {
 	const [root, setRoot] = useState(null);
 	const [, refresh] = useReducer((value) => value + 1, 0);
 	const expanded = useRef(/* @__PURE__ */ new WeakSet());
@@ -488,7 +1415,13 @@ function PageLayers({ frame, title, selected, onSelect }) {
 			"aria-expanded": children.length ? open_0 : void 0,
 			children: [/* @__PURE__ */ jsxs("div", {
 				className: "povio-canvas-layer-row",
-				style: { paddingLeft: 8 + depth * 12 },
+				onMouseEnter: () => onHover(element_1),
+				onMouseLeave: () => onHover(null),
+				onFocus: () => onHover(element_1),
+				onBlur: (event) => {
+					if (!event.currentTarget.contains(event.relatedTarget)) onHover(null);
+				},
+				style: { paddingLeft: 4 + depth * 10 },
 				children: [children.length ? /* @__PURE__ */ jsx("button", {
 					className: "povio-canvas-layer-toggle",
 					"aria-label": `${open_0 ? "Collapse" : "Expand"} ${element_1.localName}${label ? ` ${label}` : ""}`,
@@ -498,13 +1431,13 @@ function PageLayers({ frame, title, selected, onSelect }) {
 					className: "povio-canvas-layer-select",
 					title: `${element_1.localName}${label ? ` · ${label}` : ""}`,
 					onClick: () => onSelect(element_1),
-					onKeyDown: (event) => {
-						if (event.key === "ArrowRight" && children.length && !open_0) {
-							event.preventDefault();
+					onKeyDown: (event_0) => {
+						if (event_0.key === "ArrowRight" && children.length && !open_0) {
+							event_0.preventDefault();
 							toggle(element_1, false);
 						}
-						if (event.key === "ArrowLeft" && open_0) {
-							event.preventDefault();
+						if (event_0.key === "ArrowLeft" && open_0) {
+							event_0.preventDefault();
 							toggle(element_1, true);
 						}
 					},
@@ -521,11 +1454,6 @@ function PageLayers({ frame, title, selected, onSelect }) {
 		className: "povio-canvas-layers",
 		"aria-label": `Layers for ${title}`,
 		children: [
-			/* @__PURE__ */ jsxs("header", { children: [
-				/* @__PURE__ */ jsx(CodeXml, { size: 14 }),
-				/* @__PURE__ */ jsx("strong", { children: "Layers" }),
-				/* @__PURE__ */ jsx("span", { children: title })
-			] }),
 			/* @__PURE__ */ jsx("div", {
 				role: "tree",
 				"aria-label": "HTML layers",
@@ -542,10 +1470,8 @@ function PageLayers({ frame, title, selected, onSelect }) {
 }
 //#endregion
 //#region src/app-canvas/CanvasInspector.tsx
-const unknownToken = () => false;
-const readOnly = () => {};
 /** Inspect the live iframe DOM using its own, unscaled viewport coordinates. */
-function useCanvasInspector(enabled, generation) {
+function useCanvasInspector(enabled, generation, isKnown) {
 	const [selection, setSelection] = useState(null);
 	const [measurement, setMeasurement] = useState(null);
 	const [pinned, setPinned] = useState(false);
@@ -632,7 +1558,7 @@ function useCanvasInspector(enabled, generation) {
 				return;
 			}
 			const rect = element_0.getBoundingClientRect();
-			const snapshot = inspectElement(element_0, unknownToken);
+			const snapshot = inspectElement(element_0, isKnown);
 			const details = highlightKey ? getBoxHighlights(element_0, highlightKey) : null;
 			const spacing = highlightKey ? [] : [
 				"padding.top",
@@ -726,7 +1652,8 @@ function useCanvasInspector(enabled, generation) {
 		enabled,
 		selection,
 		highlightKey,
-		clear
+		clear,
+		isKnown
 	]);
 	return {
 		selection,
@@ -748,8 +1675,8 @@ function useCanvasInspector(enabled, generation) {
 	};
 }
 function CanvasInspectorPanel(t0) {
-	const $ = c(21);
-	const { inspector, onClose } = t0;
+	const $ = c(22);
+	const { inspector, onClose, onSelectToken } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx("strong", { children: "Inspector view" });
@@ -812,10 +1739,10 @@ function CanvasInspectorPanel(t0) {
 		$[13] = t9;
 	} else t9 = $[13];
 	let t10;
-	if ($[14] !== inspector.highlight || $[15] !== inspector.measurement) {
+	if ($[14] !== inspector.highlight || $[15] !== inspector.measurement || $[16] !== onSelectToken) {
 		t10 = inspector.measurement ? /* @__PURE__ */ jsx(InspectorDetails, {
 			snapshot: inspector.measurement.snapshot,
-			onSelect: readOnly,
+			onSelect: onSelectToken,
 			onHighlight: inspector.highlight
 		}) : /* @__PURE__ */ jsx("p", {
 			className: "povio-canvas-inspect-hint",
@@ -823,10 +1750,11 @@ function CanvasInspectorPanel(t0) {
 		});
 		$[14] = inspector.highlight;
 		$[15] = inspector.measurement;
-		$[16] = t10;
-	} else t10 = $[16];
+		$[16] = onSelectToken;
+		$[17] = t10;
+	} else t10 = $[17];
 	let t11;
-	if ($[17] !== t10 || $[18] !== t7 || $[19] !== t9) {
+	if ($[18] !== t10 || $[19] !== t7 || $[20] !== t9) {
 		t11 = /* @__PURE__ */ jsxs("aside", {
 			className: "studio-inspector-panel povio-canvas-inspector",
 			"aria-label": "Inspector view",
@@ -836,11 +1764,11 @@ function CanvasInspectorPanel(t0) {
 				t10
 			]
 		});
-		$[17] = t10;
-		$[18] = t7;
-		$[19] = t9;
-		$[20] = t11;
-	} else t11 = $[20];
+		$[18] = t10;
+		$[19] = t7;
+		$[20] = t9;
+		$[21] = t11;
+	} else t11 = $[21];
 	return t11;
 }
 function CanvasInspectionOverlay(t0) {
@@ -892,6 +1820,64 @@ function CanvasInspectionOverlay(t0) {
 	} else t3 = $[8];
 	return t3;
 }
+/** Temporary layer hover never replaces the pinned inspector selection. */
+function CanvasLayerHighlight(t0) {
+	const $ = c(5);
+	const { element } = t0;
+	const [bounds, setBounds] = useState(null);
+	let t1;
+	let t2;
+	if ($[0] !== element) {
+		t1 = () => {
+			const owner = element.ownerDocument.defaultView;
+			const measure = () => {
+				if (!element.isConnected) {
+					setBounds(null);
+					return;
+				}
+				const rect = element.getBoundingClientRect();
+				setBounds({
+					left: rect.left,
+					top: rect.top,
+					width: rect.width,
+					height: rect.height
+				});
+			};
+			measure();
+			const observer = new ResizeObserver(measure);
+			observer.observe(element);
+			owner?.addEventListener("scroll", measure, true);
+			owner?.addEventListener("resize", measure);
+			return () => {
+				observer.disconnect();
+				owner?.removeEventListener("scroll", measure, true);
+				owner?.removeEventListener("resize", measure);
+			};
+		};
+		t2 = [element];
+		$[0] = element;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useLayoutEffect(t1, t2);
+	let t3;
+	if ($[3] !== bounds) {
+		t3 = bounds ? /* @__PURE__ */ jsx("div", {
+			className: "povio-canvas-inspection-overlay povio-canvas-layer-highlight",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "studio-hover-outline",
+				style: bounds
+			})
+		}) : null;
+		$[3] = bounds;
+		$[4] = t3;
+	} else t3 = $[4];
+	return t3;
+}
 //#endregion
 //#region src/app-canvas/route-model.ts
 function joinPath(parent, path) {
@@ -1070,68 +2056,6 @@ function validConfiguration(value) {
 	}) && !!config.config && typeof config.config === "object";
 }
 //#endregion
-//#region src/app-canvas/manifest.ts
-function createCanvasManifest() {
-	return {
-		version: 1,
-		positions: {},
-		examples: {},
-		manualEdges: [],
-		hiddenEdges: [],
-		breakpoint: "desktop"
-	};
-}
-function isRecord(value) {
-	return value !== null && typeof value === "object" && !Array.isArray(value);
-}
-function isJSON(value, ancestors = /* @__PURE__ */ new Set(), depth = 0) {
-	if (value === null || typeof value === "string" || typeof value === "boolean") return true;
-	if (typeof value === "number") return Number.isFinite(value);
-	if (typeof value !== "object" || depth > 30 || ancestors.has(value)) return false;
-	ancestors.add(value);
-	const valid = Object.values(value).every((child) => isJSON(child, ancestors, depth + 1));
-	ancestors.delete(value);
-	return valid;
-}
-/** Sanitize either stored JSON text or an imported value, retaining valid v1 entries. */
-function parseCanvasManifest(input) {
-	const fallback = createCanvasManifest();
-	let value = input;
-	if (typeof value === "string") try {
-		value = JSON.parse(value);
-	} catch {
-		return fallback;
-	}
-	if (!isRecord(value) || value.version !== 1) return fallback;
-	const positions = Object.fromEntries(Object.entries(isRecord(value.positions) ? value.positions : {}).flatMap(([breakpoint, entries]) => {
-		if (!isRecord(entries)) return [];
-		return [[breakpoint, Object.fromEntries(Object.entries(entries).flatMap(([id, point]) => isRecord(point) && typeof point.x === "number" && Number.isFinite(point.x) && typeof point.y === "number" && Number.isFinite(point.y) ? [[id, {
-			x: point.x,
-			y: point.y
-		}]] : []))]];
-	}));
-	const examples = Object.fromEntries(Object.entries(isRecord(value.examples) ? value.examples : {}).flatMap(([id, example]) => {
-		if (!isRecord(example)) return [];
-		const clean = {};
-		if (typeof example.title === "string") clean.title = example.title;
-		if (isRecord(example.params)) clean.params = Object.fromEntries(Object.entries(example.params).filter((entry) => typeof entry[1] === "string"));
-		if (isRecord(example.search)) clean.search = Object.fromEntries(Object.entries(example.search).filter(([, item]) => isJSON(item)));
-		return [[id, clean]];
-	}));
-	const manualEdges = (Array.isArray(value.manualEdges) ? value.manualEdges : []).flatMap((edge) => isRecord(edge) && typeof edge.from === "string" && edge.from.length > 0 && typeof edge.to === "string" && edge.to.length > 0 ? [{
-		from: edge.from,
-		to: edge.to
-	}] : []);
-	return {
-		version: 1,
-		positions,
-		examples,
-		manualEdges: [...new Map(manualEdges.map((edge) => [JSON.stringify(edge), edge])).values()],
-		hiddenEdges: [...new Set((Array.isArray(value.hiddenEdges) ? value.hiddenEdges : []).filter((edge) => typeof edge === "string"))],
-		breakpoint: typeof value.breakpoint === "string" && value.breakpoint.length > 0 ? value.breakpoint : fallback.breakpoint
-	};
-}
-//#endregion
 //#region src/app-canvas/AppCanvas.tsx
 const defaultCanvasBreakpoints = [
 	{
@@ -1155,14 +2079,9 @@ const defaultCanvasBreakpoints = [
 ];
 const emptyExamples = {};
 const emptyExclude = [];
-function readManifest(key) {
-	if (typeof window === "undefined") return createCanvasManifest();
-	try {
-		return parseCanvasManifest(localStorage.getItem(key));
-	} catch {
-		return createCanvasManifest();
-	}
-}
+/** Zoom per wheel pixel, and the largest delta one wheel event may contribute. */
+const ZOOM_SENSITIVITY = .006;
+const ZOOM_DELTA_LIMIT = 40;
 const PageFrame = memo(function PageFrame(t0) {
 	const $ = c(16);
 	const { id, src, width, height, name, interact, inspect, onLoad, register } = t0;
@@ -1211,19 +2130,33 @@ const PageFrame = memo(function PageFrame(t0) {
 	return t6;
 });
 /** Live route artboards. The camera transforms only the canvas, never the iframe viewport width. */
-function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, excludePaths = emptyExclude, breakpoints = defaultCanvasBreakpoints, storageKey = "povio-app-canvas", frameUrl }) {
+function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, excludePaths = emptyExclude, breakpoints = defaultCanvasBreakpoints, storageKey = "povio-app-canvas", frameUrl, componentsHref, repositoryStorage = true }) {
 	const configuration = useUIConfiguration();
-	const [manifest, setManifest] = useState(() => readManifest(storageKey));
+	const storage = useCanvasStorage(storageKey, repositoryStorage);
+	const { manifest, setManifest } = storage;
+	const workspace = manifest.workspaces.find((item) => item.id === manifest.activeWorkspaceId);
 	const [runtime, setRuntime] = useState({});
+	const [hoveredLayer, setHoveredLayer] = useState(null);
 	const [selected, setSelected] = useState(null);
 	const [interact, setInteract] = useState(false);
 	const [inspectMode, setInspectMode] = useState(false);
 	const [dark, setDark] = useState(false);
+	/** The canvas shows either the app's pages or the component gallery's sections, as artboards either way. */
+	const [content, setContent] = useState("pages");
 	const [mobilePanel, setMobilePanel] = useState(null);
 	const [query, setQuery] = useState("");
 	const [notice, setNotice] = useState("");
 	const [documentGeneration, setDocumentGeneration] = useState(0);
+	useWorkspaceConfiguration(workspace, storage.ready, documentGeneration, setManifest);
 	const [reload, setReload] = useState({});
+	const [showLayers, setShowLayers] = useState(true);
+	useEffect(() => setHoveredLayer(null), [
+		selected,
+		showLayers,
+		manifest.activeWorkspaceId,
+		manifest.breakpoint,
+		documentGeneration
+	]);
 	const zoomOutput = useRef(null);
 	const importInput = useRef(null);
 	const viewport = useRef(null), world = useRef(null);
@@ -1236,9 +2169,12 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	}), pendingCamera = useRef(null);
 	const pointer = useRef(null);
 	const cameraRevision = useRef(0);
-	const bp = breakpoints.find((item) => item.id === manifest.breakpoint) ?? breakpoints[breakpoints.length - 1] ?? defaultCanvasBreakpoints[2];
-	const inspector = useCanvasInspector(inspectMode, `${bp.id}:${documentGeneration}:${JSON.stringify(reload)}`);
-	const catalog = useMemo(() => discoverCanvasPages(router, {
+	const bp = breakpoints.find((item_0) => item_0.id === manifest.breakpoint) ?? breakpoints[breakpoints.length - 1] ?? defaultCanvasBreakpoints[2];
+	const isKnownToken = useCallback((name) => isEditableToken(name, configuration.defaults), [configuration.defaults]);
+	const { hostComponents } = configuration;
+	useEffect(() => hostComponents(), [hostComponents]);
+	const inspector = useCanvasInspector(inspectMode, `${manifest.activeWorkspaceId}:${content}:${bp.id}:${documentGeneration}:${JSON.stringify(reload)}`, isKnownToken);
+	const allPages = useMemo(() => discoverCanvasPages(router, {
 		examples: {
 			...examples,
 			...manifest.examples
@@ -1252,7 +2188,21 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		exclude,
 		excludePaths
 	]);
-	const startupKeys = useMemo(() => new Map(catalog.filter((page) => page.href).map((page_0) => [page_0.id, `${documentGeneration}:${bp.id}:${page_0.id}:${page_0.href}:${reload[page_0.id] ?? 0}`])), [
+	const pageCatalog = useMemo(() => storage.ready ? allPages.filter((page) => workspace.enabledPages === null || workspace.enabledPages.includes(page.id)) : [], [
+		allPages,
+		workspace.enabledPages,
+		storage.ready
+	]);
+	const componentCatalog = useMemo(() => componentsHref ? componentArtboards.map((group) => ({
+		id: `components:${group.toLowerCase()}`,
+		title: group,
+		path: group,
+		href: componentsHref(group),
+		missingParams: [],
+		kind: "page"
+	})) : [], [componentsHref]);
+	const catalog = content === "components" && componentCatalog.length ? componentCatalog : pageCatalog;
+	const startupKeys = useMemo(() => new Map(catalog.filter((page_0) => page_0.href).map((page_1) => [page_1.id, `${documentGeneration}:${bp.id}:${page_1.id}:${page_1.href}:${reload[page_1.id] ?? 0}`])), [
 		catalog,
 		documentGeneration,
 		bp.id,
@@ -1267,18 +2217,37 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		keys: startupKeys,
 		complete: startup.complete
 	};
-	const heights = useMemo(() => Object.fromEntries(catalog.map((page_1) => [page_1.id, runtime[`${bp.id}:${page_1.id}:${page_1.href ?? ""}`]?.height ?? bp.height])), [
+	const heights = useMemo(() => Object.fromEntries(catalog.map((page_2) => [page_2.id, runtime[`${bp.id}:${page_2.id}:${page_2.href ?? ""}`]?.height ?? bp.height])), [
 		catalog,
 		runtime,
 		bp
 	]);
-	const nodes = useMemo(() => layoutCanvasPages(catalog, bp.width, heights, manifest.positions[bp.id] ?? {}), [
+	const nodes = useMemo(() => layoutCanvasPages(catalog, bp.width, heights, workspace.positions[bp.id] ?? {}), [
 		catalog,
 		bp,
 		heights,
-		manifest.positions
+		workspace.positions
 	]);
 	const nodeMap = useMemo(() => new Map(nodes.map((node) => [node.id, node])), [nodes]);
+	useLayoutEffect(() => {
+		const gesture = pointer.current;
+		if (gesture && viewport.current?.hasPointerCapture(gesture.id)) viewport.current.releasePointerCapture(gesture.id);
+		pointer.current = null;
+		setSelected(null);
+		setQuery("");
+		camera.current = {
+			x: 40,
+			y: 40,
+			zoom: .25
+		};
+	}, [manifest.activeWorkspaceId]);
+	useEffect(() => {
+		if (selected && !nodeMap.has(selected)) setSelected(null);
+	}, [selected, nodeMap]);
+	useEffect(() => {
+		const valid = new Set(catalog.map((page_3) => `${bp.id}:${page_3.id}:${page_3.href ?? ""}`));
+		setRuntime((current) => Object.keys(current).some((key_0) => !valid.has(key_0)) ? Object.fromEntries(Object.entries(current).filter(([key]) => valid.has(key))) : current);
+	}, [catalog, bp.id]);
 	const latest = useRef({
 		configuration: configuration.active,
 		dark,
@@ -1300,11 +2269,18 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		else frames.current.delete(id);
 	}, []);
 	const paint = useCallback(() => {
-		if (world.current) world.current.style.transform = `translate3d(${camera.current.x}px,${camera.current.y}px,0) scale(${camera.current.zoom})`;
+		if (world.current) {
+			world.current.style.transform = `translate3d(${camera.current.x}px,${camera.current.y}px,0) scale(${camera.current.zoom})`;
+			const zoom = String(camera.current.zoom);
+			if (world.current.style.getPropertyValue("--canvas-zoom") !== zoom) world.current.style.setProperty("--canvas-zoom", zoom);
+		}
 		if (zoomOutput.current) zoomOutput.current.textContent = `${Math.round(camera.current.zoom * 1e3) / 10}%`;
 		const canvas = viewport.current?.closest(".povio-app-canvas");
 		if (canvas) canvas.setAttribute("data-camera-revision", String(++cameraRevision.current));
 	}, []);
+	useLayoutEffect(() => {
+		paint();
+	}, [manifest.activeWorkspaceId, paint]);
 	const schedulePaint = useCallback(() => {
 		if (pendingCamera.current !== null) return;
 		pendingCamera.current = requestAnimationFrame(() => {
@@ -1315,18 +2291,18 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	const send = useCallback((id_0, type = "configuration") => {
 		const frame_0 = frames.current.get(id_0);
 		if (!frame_0?.contentWindow) return;
-		const current = latest.current;
+		const current_0 = latest.current;
 		try {
 			frame_0.contentWindow.postMessage({
 				protocol: canvasProtocol,
 				id: id_0,
 				token,
-				viewportHeight: current.bp.height,
+				viewportHeight: current_0.bp.height,
 				type,
-				configuration: current.configuration,
+				configuration: current_0.configuration,
 				revision: revision.current,
-				dark: current.dark,
-				interact: current.interact
+				dark: current_0.dark,
+				interact: current_0.interact
 			}, new URL(frame_0.src).origin);
 		} catch {
 			setNotice("This configuration could not be sent to the page. Check for non-serializable values.");
@@ -1336,7 +2312,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		const node_0 = nodeMap.get(id_1), view = viewport.current;
 		if (!node_0 || !view) return;
 		setSelected(id_1);
-		camera.current.zoom = Math.min(1, Math.max(.08, (view.clientWidth - 100) / node_0.width));
+		setShowLayers(true);
+		camera.current.zoom = Math.min(1, Math.max(.005, (view.clientWidth - 80) / node_0.width));
 		camera.current.x = 40 - node_0.x * camera.current.zoom;
 		camera.current.y = 40 - node_0.y * camera.current.zoom;
 		paint();
@@ -1351,18 +2328,18 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 			batch = 0;
 			const changes = Array.from(queue);
 			queue.clear();
-			setRuntime((current_0) => {
-				const next = { ...current_0 };
+			setRuntime((current_1) => {
+				const next = { ...current_1 };
 				let changed = false;
-				for (const [key, item_0] of changes) {
-					if (frames.current.get(item_0.id) !== item_0.frame || item_0.frame.contentWindow !== item_0.source) continue;
-					next[key] = {
-						...next[key],
-						...item_0.change
+				for (const [key_1, item_1] of changes) {
+					if (frames.current.get(item_1.id) !== item_1.frame || item_1.frame.contentWindow !== item_1.source) continue;
+					next[key_1] = {
+						...next[key_1],
+						...item_1.change
 					};
 					changed = true;
 				}
-				return changed ? next : current_0;
+				return changed ? next : current_1;
 			});
 		};
 		const receive = (event) => {
@@ -1370,7 +2347,7 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 			if (packet?.protocol !== "povio-app-canvas-v1" || packet.token !== token || typeof packet.id !== "string") return;
 			const frame_1 = frames.current.get(packet.id);
 			if (!frame_1 || event.source !== frame_1.contentWindow || event.origin !== new URL(frame_1.src).origin) return;
-			const key_0 = `${latest.current.bp.id}:${packet.id}:${latest.current.catalog.find((page_2) => page_2.id === packet.id)?.href ?? ""}`;
+			const key_2 = `${latest.current.bp.id}:${packet.id}:${latest.current.catalog.find((page_4) => page_4.id === packet.id)?.href ?? ""}`;
 			let change = {};
 			if (packet.type === "ready") {
 				startupRef.current.complete(startupRef.current.keys.get(packet.id));
@@ -1392,9 +2369,9 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 				return;
 			}
 			if (!Object.keys(change).length) return;
-			const pending = queue.get(key_0);
+			const pending = queue.get(key_2);
 			const previous = pending?.frame === frame_1 && pending.source === event.source ? pending.change : {};
-			queue.set(key_0, {
+			queue.set(key_2, {
 				id: packet.id,
 				frame: frame_1,
 				source: event.source,
@@ -1429,25 +2406,20 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	useEffect(() => {
 		for (const id_3 of frames.current.keys()) send(id_3, "mode");
 	}, [interact, send]);
-	useEffect(() => {
-		try {
-			localStorage.setItem(storageKey, JSON.stringify(manifest));
-		} catch {
-			setNotice("Browser storage is unavailable; use Export layout to save this canvas.");
-		}
-	}, [manifest, storageKey]);
 	useEffect(() => {
 		paint();
 		const element = viewport.current;
 		if (!element) return;
 		const wheel = (event_0) => {
 			event_0.preventDefault();
+			if (pointer.current) return;
 			if (event_0.ctrlKey || event_0.metaKey) {
 				const box = element.getBoundingClientRect();
 				const x = event_0.clientX - box.left, y = event_0.clientY - box.top;
 				const previous_0 = camera.current.zoom;
 				const unit = event_0.deltaMode === 1 ? 16 : event_0.deltaMode === 2 ? element.clientHeight : 1;
-				const next_0 = Math.max(.005, Math.min(2, previous_0 * Math.exp(-event_0.deltaY * unit * .01)));
+				const delta = Math.max(-40, Math.min(ZOOM_DELTA_LIMIT, event_0.deltaY * unit));
+				const next_0 = Math.max(.005, Math.min(2, previous_0 * Math.exp(-delta * ZOOM_SENSITIVITY)));
 				camera.current.x = x - (x - camera.current.x) * next_0 / previous_0;
 				camera.current.y = y - (y - camera.current.y) * next_0 / previous_0;
 				camera.current.zoom = next_0;
@@ -1457,9 +2429,14 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 			}
 			schedulePaint();
 		};
+		const unscroll = () => {
+			if (element.scrollTop || element.scrollLeft) element.scrollTo(0, 0);
+		};
 		element.addEventListener("wheel", wheel, { passive: false });
+		element.addEventListener("scroll", unscroll);
 		return () => {
 			element.removeEventListener("wheel", wheel);
+			element.removeEventListener("scroll", unscroll);
 			if (pendingCamera.current !== null) cancelAnimationFrame(pendingCamera.current);
 			pendingCamera.current = null;
 		};
@@ -1473,13 +2450,22 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		camera.current.y = 40 - top * camera.current.zoom;
 		paint();
 	};
+	const fitRef = useRef(fit);
+	fitRef.current = fit;
+	const switchContent = (next_1) => {
+		if (next_1 === content) return;
+		setContent(next_1);
+		setSelected(null);
+		setQuery("");
+		requestAnimationFrame(() => fitRef.current());
+	};
 	const zoomTo = (value) => {
 		const view_0 = viewport.current;
 		if (!view_0) return;
-		const previous_1 = camera.current.zoom, next_1 = Math.max(.005, Math.min(2, value));
-		camera.current.x = view_0.clientWidth / 2 - (view_0.clientWidth / 2 - camera.current.x) * next_1 / previous_1;
-		camera.current.y = view_0.clientHeight / 2 - (view_0.clientHeight / 2 - camera.current.y) * next_1 / previous_1;
-		camera.current.zoom = next_1;
+		const previous_1 = camera.current.zoom, next_2 = Math.max(.005, Math.min(2, value));
+		camera.current.x = view_0.clientWidth / 2 - (view_0.clientWidth / 2 - camera.current.x) * next_2 / previous_1;
+		camera.current.y = view_0.clientHeight / 2 - (view_0.clientHeight / 2 - camera.current.y) * next_2 / previous_1;
+		camera.current.zoom = next_2;
 		paint();
 	};
 	const stepZoom = (direction) => {
@@ -1496,58 +2482,74 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 			1.5,
 			2
 		];
-		const current_1 = camera.current.zoom;
-		const next_2 = direction === 1 ? stops.find((value_0) => value_0 > current_1 + 1e-4) : [...stops].reverse().find((value_1) => value_1 < current_1 - 1e-4);
-		if (next_2 !== void 0) zoomTo(next_2);
+		const current_2 = camera.current.zoom;
+		const next_3 = direction === 1 ? stops.find((value_0) => value_0 > current_2 + 1e-4) : [...stops].reverse().find((value_1) => value_1 < current_2 - 1e-4);
+		if (next_3 !== void 0) zoomTo(next_3);
 	};
 	const startPan = (event_1) => {
 		if (inspectMode && event_1.target.closest(".povio-canvas-frame-cover")) return;
 		if (event_1.button !== 0 || event_1.target.closest("button:not(.povio-canvas-frame-cover),input,select,.povio-canvas-node-header")) return;
+		event_1.preventDefault();
 		event_1.currentTarget.setPointerCapture(event_1.pointerId);
 		pointer.current = {
 			id: event_1.pointerId,
 			x: event_1.clientX,
 			y: event_1.clientY,
+			lastX: event_1.clientX,
+			lastY: event_1.clientY,
 			startX: camera.current.x,
 			startY: camera.current.y
 		};
 	};
 	const move = (event_2) => {
-		const current_2 = pointer.current;
-		if (!current_2 || current_2.id !== event_2.pointerId) return;
-		const dx = event_2.clientX - current_2.x, dy = event_2.clientY - current_2.y;
-		if (current_2.node) {
-			const element_0 = world.current?.querySelector(`[data-node-index="${nodes.findIndex((n_3) => n_3.id === current_2.node)}"]`);
+		const current_3 = pointer.current;
+		if (!current_3 || current_3.id !== event_2.pointerId) return;
+		if (event_2.buttons === 0) {
+			end(event_2, true);
+			return;
+		}
+		current_3.lastX = event_2.clientX;
+		current_3.lastY = event_2.clientY;
+		const dx = event_2.clientX - current_3.x, dy = event_2.clientY - current_3.y;
+		if (current_3.node) {
+			const element_0 = world.current?.querySelector(`[data-node-index="${nodes.findIndex((n_3) => n_3.id === current_3.node)}"]`);
 			if (element_0) {
-				element_0.style.left = `${current_2.nodeX + dx / camera.current.zoom}px`;
-				element_0.style.top = `${current_2.nodeY + dy / camera.current.zoom}px`;
+				element_0.style.left = `${current_3.nodeX + dx / camera.current.zoom}px`;
+				element_0.style.top = `${current_3.nodeY + dy / camera.current.zoom}px`;
 			}
 		} else {
-			camera.current.x = current_2.startX + dx;
-			camera.current.y = current_2.startY + dy;
+			camera.current.x = current_3.startX + dx;
+			camera.current.y = current_3.startY + dy;
 			schedulePaint();
 		}
 	};
-	const end = (event_3) => {
-		const current_3 = pointer.current;
-		if (!current_3 || current_3.id !== event_3.pointerId) return;
-		if (current_3.node) {
+	const end = (event_3, useLastPosition = false) => {
+		const current_4 = pointer.current;
+		if (!current_4 || current_4.id !== event_3.pointerId) return;
+		pointer.current = null;
+		if (current_4.node) {
 			const position = {
-				x: current_3.nodeX + (event_3.clientX - current_3.x) / camera.current.zoom,
-				y: current_3.nodeY + (event_3.clientY - current_3.y) / camera.current.zoom
+				x: current_4.nodeX + ((useLastPosition ? current_4.lastX : event_3.clientX) - current_4.x) / camera.current.zoom,
+				y: current_4.nodeY + ((useLastPosition ? current_4.lastY : event_3.clientY) - current_4.y) / camera.current.zoom
 			};
 			setManifest((m) => ({
 				...m,
-				positions: {
-					...m.positions,
-					[bp.id]: {
-						...m.positions[bp.id],
-						[current_3.node]: position
+				workspaces: m.workspaces.map((item_2) => item_2.id === m.activeWorkspaceId ? {
+					...item_2,
+					positions: {
+						...item_2.positions,
+						[bp.id]: {
+							...item_2.positions[bp.id],
+							...Object.fromEntries(nodes.map((node_1) => [node_1.id, {
+								x: node_1.x,
+								y: node_1.y
+							}])),
+							[current_4.node]: position
+						}
 					}
-				}
+				} : item_2)
 			}));
 		}
-		pointer.current = null;
 		if (event_3.currentTarget.hasPointerCapture(event_3.pointerId)) event_3.currentTarget.releasePointerCapture(event_3.pointerId);
 	};
 	const onLoad = useCallback((id_4, frame_3) => {
@@ -1557,16 +2559,16 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		send(id_4, "mode");
 	}, [send]);
 	useEffect(() => {
-		const timer = setTimeout(() => setRuntime((current_4) => {
-			const next_3 = { ...current_4 };
-			for (const page_3 of latest.current.catalog) {
-				const key_1 = `${latest.current.bp.id}:${page_3.id}:${page_3.href ?? ""}`;
-				if (page_3.href && frames.current.has(page_3.id) && !next_3[key_1]?.ready) next_3[key_1] = {
-					...next_3[key_1],
+		const timer = setTimeout(() => setRuntime((current_5) => {
+			const next_4 = { ...current_5 };
+			for (const page_5 of latest.current.catalog) {
+				const key_3 = `${latest.current.bp.id}:${page_5.id}:${page_5.href ?? ""}`;
+				if (page_5.href && frames.current.has(page_5.id) && !next_4[key_3]?.ready) next_4[key_3] = {
+					...next_4[key_3],
 					timedOut: true
 				};
 			}
-			return next_3;
+			return next_4;
 		}), 15e3);
 		return () => clearTimeout(timer);
 	}, [
@@ -1606,13 +2608,13 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 					if (!file) return;
 					try {
 						const raw = JSON.parse(await file.text());
-						if (raw?.version !== 1) throw new Error("version");
+						if (raw?.version !== 1 && raw?.version !== 2) throw new Error("version");
 						setManifest(parseCanvasManifest(raw));
 						setRuntime({});
 						setDocumentGeneration((value_2) => value_2 + 1);
 						setNotice("Layout imported.");
 					} catch {
-						setNotice("Choose a valid version 1 canvas layout JSON file.");
+						setNotice("Choose a valid canvas workspace JSON file.");
 					}
 				}
 			}),
@@ -1623,11 +2625,30 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 						className: "povio-canvas-catalog",
 						"aria-label": "Page catalog",
 						children: [
+							/* @__PURE__ */ jsx(WorkspaceControls, {
+								manifest,
+								setManifest,
+								pages: allPages,
+								disabled: !storage.ready
+							}),
 							/* @__PURE__ */ jsxs("div", {
-								className: "povio-canvas-brand",
-								children: [/* @__PURE__ */ jsx("strong", { children: "Pages" }), /* @__PURE__ */ jsx("span", {
-									className: "povio-canvas-page-count",
-									children: nodes.length
+								className: "povio-canvas-brand povio-canvas-content-switch",
+								role: "group",
+								"aria-label": "Canvas content",
+								children: [/* @__PURE__ */ jsxs("button", {
+									"aria-pressed": content === "pages",
+									onClick: () => switchContent("pages"),
+									children: ["Pages", /* @__PURE__ */ jsx("span", {
+										className: "povio-canvas-page-count",
+										children: pageCatalog.length
+									})]
+								}), !!componentCatalog.length && /* @__PURE__ */ jsxs("button", {
+									"aria-pressed": content === "components",
+									onClick: () => switchContent("components"),
+									children: ["Components", /* @__PURE__ */ jsx("span", {
+										className: "povio-canvas-page-count",
+										children: componentCatalog.length
+									})]
 								})]
 							}),
 							/* @__PURE__ */ jsxs("div", {
@@ -1635,8 +2656,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 								children: [
 									/* @__PURE__ */ jsx(Search, { size: 14 }),
 									/* @__PURE__ */ jsx("input", {
-										"aria-label": "Find page",
-										placeholder: "Find page…",
+										"aria-label": content === "components" ? "Find component section" : "Find page",
+										placeholder: content === "components" ? "Find section…" : "Find page…",
 										value: query,
 										onChange: (event_5) => setQuery(event_5.target.value)
 									}),
@@ -1648,37 +2669,49 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 									})
 								]
 							}),
-							/* @__PURE__ */ jsxs("div", {
+							/* @__PURE__ */ jsx("div", {
 								className: "povio-canvas-page-list",
-								children: [nodes.filter((node_1) => `${node_1.title} ${node_1.path}`.toLowerCase().includes(query.toLowerCase())).map((node_2) => /* @__PURE__ */ jsxs("button", {
-									"aria-pressed": selected === node_2.id,
-									onClick: () => {
-										focusPage(node_2.id);
-										setMobilePanel(null);
-									},
-									children: [/* @__PURE__ */ jsx(Frame, { size: 15 }), /* @__PURE__ */ jsxs("span", {
-										className: "povio-canvas-page-label",
-										children: [/* @__PURE__ */ jsx("strong", { children: node_2.title }), node_2.kind === "unresolved" && /* @__PURE__ */ jsx("small", { children: "Needs parameters" })]
+								children: nodes.filter((node_2) => `${node_2.title} ${node_2.path}`.toLowerCase().includes(query.toLowerCase())).map((node_3) => /* @__PURE__ */ jsxs("div", {
+									className: "povio-canvas-page-entry",
+									children: [/* @__PURE__ */ jsxs("button", {
+										"aria-expanded": node_3.href ? selected === node_3.id && showLayers : void 0,
+										"aria-pressed": selected === node_3.id,
+										onClick: () => {
+											if (selected === node_3.id && showLayers) setShowLayers(false);
+											else focusPage(node_3.id);
+										},
+										children: [node_3.href ? selected === node_3.id && showLayers ? /* @__PURE__ */ jsx(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx(ChevronRight, { size: 12 }) : /* @__PURE__ */ jsx(Frame, { size: 15 }), /* @__PURE__ */ jsxs("span", {
+											className: "povio-canvas-page-label",
+											children: [/* @__PURE__ */ jsx("strong", { children: node_3.title }), node_3.kind === "unresolved" && /* @__PURE__ */ jsx("small", { children: "Needs parameters" })]
+										})]
+									}), showLayers && selected === node_3.id && node_3.href && /* @__PURE__ */ jsx("div", {
+										className: "povio-canvas-inline-layers",
+										children: /* @__PURE__ */ jsx(PageLayers, {
+											frame: frames.current.get(selected) ?? null,
+											title: nodeMap.get(selected).title,
+											selected: inspector.selection?.pageId === selected ? inspector.selection.element : void 0,
+											onHover: (element_1) => setHoveredLayer(element_1 ? {
+												pageId: node_3.id,
+												element: element_1
+											} : null),
+											onSelect: (element_2) => {
+												setInteract(false);
+												setInspectMode(true);
+												inspector.selectElement(selected, element_2);
+												setMobilePanel(null);
+												requestAnimationFrame(() => {
+													const node_4 = nodeMap.get(selected), view_1 = viewport.current;
+													if (!node_4 || !view_1 || !element_2.isConnected) return;
+													const rect = element_2.getBoundingClientRect();
+													camera.current.zoom = Math.min(camera.current.zoom, Math.max(.005, (view_1.clientWidth - 80) / node_4.width));
+													camera.current.x = 40 - node_4.x * camera.current.zoom;
+													camera.current.y = view_1.clientHeight / 2 - (node_4.y + 48 + rect.top + rect.height / 2) * camera.current.zoom;
+													paint();
+												});
+											}
+										}, `${bp.id}:${documentGeneration}:${reload[selected] ?? 0}:${selected}:${nodeMap.get(selected)?.href}`)
 									})]
-								}, node_2.id)), selected && nodeMap.get(selected)?.href && /* @__PURE__ */ jsx(PageLayers, {
-									frame: frames.current.get(selected) ?? null,
-									title: nodeMap.get(selected).title,
-									selected: inspector.selection?.pageId === selected ? inspector.selection.element : void 0,
-									onSelect: (element_1) => {
-										setInteract(false);
-										setInspectMode(true);
-										inspector.selectElement(selected, element_1);
-										setMobilePanel(null);
-										requestAnimationFrame(() => {
-											const node_3 = nodeMap.get(selected), view_1 = viewport.current;
-											if (!node_3 || !view_1 || !element_1.isConnected) return;
-											const rect = element_1.getBoundingClientRect();
-											camera.current.x = view_1.clientWidth / 2 - (node_3.x + rect.left + rect.width / 2) * camera.current.zoom;
-											camera.current.y = view_1.clientHeight / 2 - (node_3.y + 48 + rect.top + rect.height / 2) * camera.current.zoom;
-											paint();
-										});
-									}
-								}, `${bp.id}:${documentGeneration}:${reload[selected] ?? 0}:${selected}:${nodeMap.get(selected)?.href}`)]
+								}, node_3.id))
 							}),
 							/* @__PURE__ */ jsxs("div", {
 								className: "povio-canvas-sidebar-actions",
@@ -1705,10 +2738,28 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 											ready,
 											"/",
 											nodes.length,
-											" pages ready"
+											" ",
+											content === "components" ? "sections" : "pages",
+											" ready"
 										]
 									})
 								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "povio-canvas-storage-status",
+								role: "status",
+								children: [
+									storage.status,
+									/* @__PURE__ */ jsx(SaveCanvasTheme, {}),
+									storage.error && /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("p", { children: storage.error }), /* @__PURE__ */ jsx("button", {
+										onClick: () => {
+											setRuntime({});
+											setDocumentGeneration((value_3) => value_3 + 1);
+											storage.reload();
+										},
+										children: "Reload repository settings"
+									})] })
+								]
 							})
 						]
 					}),
@@ -1724,18 +2775,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 						onPointerDown: startPan,
 						onPointerMove: move,
 						onPointerUp: end,
-						onPointerCancel: (event_7) => {
-							const current_5 = pointer.current;
-							if (current_5?.node) {
-								const element_2 = world.current?.querySelector(`[data-node-index="${nodes.findIndex((node_4) => node_4.id === current_5.node)}"]`);
-								if (element_2) {
-									element_2.style.left = `${current_5.nodeX}px`;
-									element_2.style.top = `${current_5.nodeY}px`;
-								}
-							}
-							pointer.current = null;
-							if (event_7.currentTarget.hasPointerCapture(event_7.pointerId)) event_7.currentTarget.releasePointerCapture(event_7.pointerId);
-						},
+						onPointerCancel: (event_7) => end(event_7, true),
+						onLostPointerCapture: (event_8) => end(event_8, true),
 						children: [
 							/* @__PURE__ */ jsx("div", {
 								className: "povio-canvas-mobile-tools",
@@ -1781,14 +2822,18 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 										children: [
 											/* @__PURE__ */ jsxs("header", {
 												className: "povio-canvas-node-header",
-												onPointerDown: (event_8) => {
-													if (event_8.button !== 0 || event_8.target.closest("button")) return;
-													event_8.stopPropagation();
-													viewport.current?.setPointerCapture(event_8.pointerId);
+												onDragStart: (event_9) => event_9.preventDefault(),
+												onPointerDown: (event_10) => {
+													if (event_10.button !== 0 || event_10.target.closest("button")) return;
+													event_10.preventDefault();
+													event_10.stopPropagation();
+													viewport.current?.setPointerCapture(event_10.pointerId);
 													pointer.current = {
-														id: event_8.pointerId,
-														x: event_8.clientX,
-														y: event_8.clientY,
+														id: event_10.pointerId,
+														x: event_10.clientX,
+														y: event_10.clientY,
+														lastX: event_10.clientX,
+														lastY: event_10.clientY,
 														startX: 0,
 														startY: 0,
 														node: node_5.id,
@@ -1827,12 +2872,12 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 											}),
 											!node_5.href ? /* @__PURE__ */ jsxs("form", {
 												className: "povio-canvas-unresolved",
-												onSubmit: (event_9) => {
-													event_9.preventDefault();
-													const form = new FormData(event_9.currentTarget);
-													const enteredParams = Object.fromEntries(node_5.missingParams.map((key_2) => {
-														const value_3 = form.get(key_2);
-														return [key_2, typeof value_3 === "string" ? value_3 : ""];
+												onSubmit: (event_11) => {
+													event_11.preventDefault();
+													const form = new FormData(event_11.currentTarget);
+													const enteredParams = Object.fromEntries(node_5.missingParams.map((key_4) => {
+														const value_4 = form.get(key_4);
+														return [key_4, typeof value_4 === "string" ? value_4 : ""];
 													}));
 													setManifest((m_0) => ({
 														...m_0,
@@ -1853,10 +2898,10 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 												children: [
 													/* @__PURE__ */ jsx("strong", { children: "Route needs parameters" }),
 													/* @__PURE__ */ jsx("code", { children: node_5.path }),
-													node_5.missingParams.map((key_3) => /* @__PURE__ */ jsxs("label", { children: [key_3, /* @__PURE__ */ jsx("input", {
-														name: key_3,
+													node_5.missingParams.map((key_5) => /* @__PURE__ */ jsxs("label", { children: [key_5, /* @__PURE__ */ jsx("input", {
+														name: key_5,
 														required: true
-													})] }, key_3)),
+													})] }, key_5)),
 													/* @__PURE__ */ jsx("button", { children: "Render page" })
 												]
 											}) : originError ? /* @__PURE__ */ jsx("p", {
@@ -1887,25 +2932,26 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 													className: "povio-canvas-frame-cover",
 													tabIndex: 0,
 													"aria-label": `Select ${node_5.title}`,
-													onKeyDown: (event_10) => {
-														if (event_10.key === "Enter" || event_10.key === " ") {
-															event_10.preventDefault();
+													onKeyDown: (event_12) => {
+														if (event_12.key === "Enter" || event_12.key === " ") {
+															event_12.preventDefault();
 															setSelected(node_5.id);
 														}
 													},
-													onPointerMove: (event_11) => {
+													onPointerMove: (event_13) => {
 														const frame_4 = frames.current.get(node_5.id);
-														if (frame_4) inspector.hover(node_5.id, frame_4, event_11.clientX, event_11.clientY);
+														if (frame_4) inspector.hover(node_5.id, frame_4, event_13.clientX, event_13.clientY);
 													},
-													onPointerDown: (event_12) => {
+													onPointerDown: (event_14) => {
 														setSelected(node_5.id);
 														if (inspectMode) {
 															const frame_5 = frames.current.get(node_5.id);
-															if (frame_5) inspector.select(node_5.id, frame_5, event_12.clientX, event_12.clientY);
+															if (frame_5) inspector.select(node_5.id, frame_5, event_14.clientX, event_14.clientY);
 														}
 													},
 													onClick: () => setSelected(node_5.id)
 												}),
+												hoveredLayer?.pageId === node_5.id && /* @__PURE__ */ jsx(CanvasLayerHighlight, { element: hoveredLayer.element }),
 												inspectMode && inspector.selection?.pageId === node_5.id && inspector.measurement && /* @__PURE__ */ jsx(CanvasInspectionOverlay, {
 													measurement: inspector.measurement,
 													width: node_5.width
@@ -1923,6 +2969,10 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 									}, node_5.id);
 								})
 							}),
+							!nodes.length && /* @__PURE__ */ jsx("div", {
+								className: "povio-canvas-empty",
+								children: storage.ready ? "Enable pages in this workspace to start arranging your canvas." : "Loading workspace…"
+							}),
 							/* @__PURE__ */ jsxs("div", {
 								className: "povio-canvas-tool-dock",
 								children: [
@@ -1968,10 +3018,13 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 										"aria-label": "Auto layout",
 										onClick: () => setManifest((m_1) => ({
 											...m_1,
-											positions: {
-												...m_1.positions,
-												[bp.id]: {}
-											}
+											workspaces: m_1.workspaces.map((item_3) => item_3.id === m_1.activeWorkspaceId ? {
+												...item_3,
+												positions: {
+													...item_3.positions,
+													[bp.id]: {}
+												}
+											} : item_3)
 										})),
 										children: [/* @__PURE__ */ jsx(PanelsTopLeft, { size: 17 }), /* @__PURE__ */ jsx("span", { children: "Auto layout" })]
 									})
@@ -1995,29 +3048,33 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 										title: "Toggle page theme",
 										children: dark ? /* @__PURE__ */ jsx(Moon, { size: 16 }) : /* @__PURE__ */ jsx(Sun, { size: 16 })
 									}),
-									/* @__PURE__ */ jsxs("div", {
-										className: "povio-canvas-breakpoint",
-										children: [/* @__PURE__ */ jsx(Monitor, { size: 15 }), /* @__PURE__ */ jsx("select", {
-											"aria-label": "Canvas breakpoint",
+									/* @__PURE__ */ jsx("div", {
+										className: "povio-canvas-breakpoint povio-canvas-workspace-select",
+										children: /* @__PURE__ */ jsx(Select, {
+											label: "Canvas breakpoint",
+											hideLabel: true,
+											size: "small",
+											variant: "outlined",
+											as: "default",
+											className: "povio-canvas-workspace-input",
+											selectionMode: "single",
+											isClearable: false,
+											renderStaticInput: false,
+											leadingContent: /* @__PURE__ */ jsx(Monitor, { size: 15 }),
 											value: bp.id,
-											onChange: (e) => {
-												if (e.target.value === bp.id) return;
+											items: breakpoints.map((item_4) => ({
+												id: item_4.id,
+												label: `${item_4.label} · ${item_4.width}px`
+											})),
+											onChange: (id_5) => {
+												if (id_5 === null || id_5 === bp.id) return;
 												setRuntime({});
 												setManifest((m_2) => ({
 													...m_2,
-													breakpoint: e.target.value
+													breakpoint: String(id_5)
 												}));
-											},
-											children: breakpoints.map((item_1) => /* @__PURE__ */ jsxs("option", {
-												value: item_1.id,
-												children: [
-													item_1.label,
-													" · ",
-													item_1.width,
-													"px"
-												]
-											}, item_1.id))
-										})]
+											}
+										})
 									}),
 									/* @__PURE__ */ jsx("span", { className: "povio-canvas-dock-divider" }),
 									/* @__PURE__ */ jsx("button", {
@@ -2050,7 +3107,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 					}),
 					inspectMode && /* @__PURE__ */ jsx(CanvasInspectorPanel, {
 						inspector,
-						onClose: () => setInspectMode(false)
+						onClose: () => setInspectMode(false),
+						onSelectToken: configuration.revealToken
 					})
 				]
 			}),
@@ -2351,9 +3409,12 @@ function AppCanvasFrameBridge({ href }) {
 //#endregion
 //#region src/app-canvas/AppCanvasPage.tsx
 const APP_CANVAS_PATH = "/_canvas";
+/** Must match `componentsFrameParam`; kept inline so the canvas page does not load the gallery eagerly. */
+const componentsParam = "povio-components";
+const CanvasComponentsFrame = lazy(() => import("./CanvasComponentsFrame-CZXY0Dxi.js"));
 /** Ready-made route page. Mount beneath the app's UIConfigurationProvider. */
 function AppCanvasPage(t0) {
-	const $ = c(17);
+	const $ = c(24);
 	let excludePaths;
 	let props;
 	let t1;
@@ -2369,53 +3430,88 @@ function AppCanvasPage(t0) {
 		t1 = $[3];
 	}
 	const canvasPath = t1 === void 0 ? APP_CANVAS_PATH : t1;
+	const updateTheme = ThemeContext.useTheme()?.updateTheme;
 	let t2;
-	if ($[4] !== excludePaths) {
-		t2 = excludePaths ?? [];
-		$[4] = excludePaths;
-		$[5] = t2;
-	} else t2 = $[5];
 	let t3;
-	if ($[6] !== canvasPath || $[7] !== t2) {
-		t3 = /* @__PURE__ */ new Set([...t2, canvasPath]);
-		$[6] = canvasPath;
-		$[7] = t2;
-		$[8] = t3;
-	} else t3 = $[8];
+	if ($[4] !== updateTheme) {
+		t2 = () => {
+			if (!isAppCanvasFrame()) updateTheme?.("light");
+		};
+		t3 = [updateTheme];
+		$[4] = updateTheme;
+		$[5] = t2;
+		$[6] = t3;
+	} else {
+		t2 = $[5];
+		t3 = $[6];
+	}
+	useEffect(t2, t3);
 	let t4;
-	if ($[9] !== t3) {
-		t4 = [...t3];
-		$[9] = t3;
-		$[10] = t4;
-	} else t4 = $[10];
-	const exclusions = t4;
-	if (isAppCanvasFrame()) return null;
+	if ($[7] !== excludePaths) {
+		t4 = excludePaths ?? [];
+		$[7] = excludePaths;
+		$[8] = t4;
+	} else t4 = $[8];
 	let t5;
-	if ($[11] !== exclusions || $[12] !== props) {
-		t5 = /* @__PURE__ */ jsx(AppCanvas, {
-			...props,
-			excludePaths: exclusions
-		});
-		$[11] = exclusions;
-		$[12] = props;
-		$[13] = t5;
-	} else t5 = $[13];
+	if ($[9] !== canvasPath || $[10] !== t4) {
+		t5 = /* @__PURE__ */ new Set([...t4, canvasPath]);
+		$[9] = canvasPath;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
 	let t6;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(UIConfigurationModal, {});
-		$[14] = t6;
-	} else t6 = $[14];
+	if ($[12] !== t5) {
+		t6 = [...t5];
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	const exclusions = t6;
+	if (isAppCanvasFrame()) {
+		let t7;
+		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+			const group = new URLSearchParams(window.location.search).get(componentsParam);
+			t7 = group ? /* @__PURE__ */ jsx(Suspense, {
+				fallback: null,
+				children: /* @__PURE__ */ jsx(CanvasComponentsFrame, { group })
+			}) : null;
+			$[14] = t7;
+		} else t7 = $[14];
+		return t7;
+	}
 	let t7;
-	if ($[15] !== t5) {
-		t7 = /* @__PURE__ */ jsxs("div", {
+	if ($[15] !== canvasPath) {
+		t7 = (group_0) => `${canvasPath}?${componentsParam}=${encodeURIComponent(group_0)}`;
+		$[15] = canvasPath;
+		$[16] = t7;
+	} else t7 = $[16];
+	let t8;
+	if ($[17] !== exclusions || $[18] !== props || $[19] !== t7) {
+		t8 = /* @__PURE__ */ jsx(AppCanvas, {
+			...props,
+			excludePaths: exclusions,
+			componentsHref: t7
+		});
+		$[17] = exclusions;
+		$[18] = props;
+		$[19] = t7;
+		$[20] = t8;
+	} else t8 = $[20];
+	let t9;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(UIConfigurationModal, {});
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== t8) {
+		t10 = /* @__PURE__ */ jsxs("div", {
 			className: "povio-app-canvas-page",
 			"aria-label": "App canvas page",
-			children: [t5, t6]
+			children: [t8, t9]
 		});
-		$[15] = t5;
-		$[16] = t7;
-	} else t7 = $[16];
-	return t7;
+		$[22] = t8;
+		$[23] = t10;
+	} else t10 = $[23];
+	return t10;
 }
 //#endregion
 export { defaultCanvasBreakpoints as a, layoutCanvasPages as c, AppCanvas as i, AppCanvasPage as n, isAppCanvasFrame as o, AppCanvasFrameBridge as r, discoverCanvasPages as s, APP_CANVAS_PATH as t };