@povio/ui 5.0.0-rc.11 → 5.0.0-rc.13

package/dist/{AppCanvasPage-BsQrZ8q7.js → AppCanvasPage-DtWEvs_Y.js}

@@ -1,44 +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-C_2kgJtm.js";
+import { _ as Moon, a as inspectElement, c as HighlightOverlay, d as useUIConfiguration, f as Trash, g as Pencil, h as Pin, l as InspectorDetails, m as Plus, p as Sun, r as useRepositoryStorage, s as getBoxHighlights, t as UIConfigurationModal } from "./UIConfigurator-DekPXjv9.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 { 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 } from "./theme-model-DtTsIxou.js";
 import { t as componentArtboards } from "./groups-oQmSeqXn.js";
-import { Suspense, lazy, memo, useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+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
@@ -330,6 +305,674 @@ const __iconData = {
 __iconData.node;
 const Settings2 = createLucideIcon(__iconData);
 //#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 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);
+		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)
+		});
+	}
+	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(125);
+	const { manifest, setManifest, pages, disabled } = t0;
+	const createTrigger = useRef(null);
+	const editTrigger = useRef(null);
+	let t1;
+	if ($[0] !== manifest.activeWorkspaceId || $[1] !== manifest.workspaces) {
+		let t2;
+		if ($[3] !== manifest.activeWorkspaceId) {
+			t2 = (item) => item.id === manifest.activeWorkspaceId;
+			$[3] = manifest.activeWorkspaceId;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = manifest.workspaces.find(t2);
+		$[0] = manifest.activeWorkspaceId;
+		$[1] = manifest.workspaces;
+		$[2] = t1;
+	} else t1 = $[2];
+	const workspace = t1;
+	const [action, setAction] = useState(null);
+	const [name, setName] = useState("");
+	const [draftPages, setDraftPages] = useState(null);
+	const [query, setQuery] = useState("");
+	let t2;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			setAction(null);
+		};
+		$[5] = t2;
+	} else t2 = $[5];
+	let t3;
+	if ($[6] !== workspace.id) {
+		t3 = [workspace.id];
+		$[6] = workspace.id;
+		$[7] = t3;
+	} else t3 = $[7];
+	useEffect(t2, t3);
+	let t4;
+	let t5;
+	if ($[8] !== disabled) {
+		t4 = () => {
+			if (disabled) setAction(null);
+		};
+		t5 = [disabled];
+		$[8] = disabled;
+		$[9] = t4;
+		$[10] = t5;
+	} else {
+		t4 = $[9];
+		t5 = $[10];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[11] !== workspace.enabledPages || $[12] !== workspace.name) {
+		t6 = (next) => {
+			setName(next === "create" ? "" : workspace.name);
+			setDraftPages(next === "create" ? [] : workspace.enabledPages);
+			setQuery("");
+			setAction(next);
+		};
+		$[11] = workspace.enabledPages;
+		$[12] = workspace.name;
+		$[13] = t6;
+	} else t6 = $[13];
+	const open = t6;
+	let t7;
+	if ($[14] !== draftPages) {
+		t7 = (id) => draftPages === null || draftPages.includes(id);
+		$[14] = draftPages;
+		$[15] = t7;
+	} else t7 = $[15];
+	const enabled = t7;
+	const title = action === "create" ? "Create workspace" : action === "delete" ? "Delete workspace?" : "Edit workspace";
+	let t8;
+	if ($[16] !== action || $[17] !== disabled || $[18] !== draftPages || $[19] !== name || $[20] !== setManifest || $[21] !== workspace.id) {
+		t8 = () => {
+			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);
+		};
+		$[16] = action;
+		$[17] = disabled;
+		$[18] = draftPages;
+		$[19] = name;
+		$[20] = setManifest;
+		$[21] = workspace.id;
+		$[22] = t8;
+	} else t8 = $[22];
+	const save = t8;
+	let T0;
+	let T1;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	let t16;
+	let t17;
+	let t18;
+	let t19;
+	let t20;
+	let t21;
+	let t9;
+	if ($[23] !== action || $[24] !== disabled || $[25] !== draftPages || $[26] !== enabled || $[27] !== manifest.workspaces || $[28] !== name || $[29] !== open || $[30] !== pages || $[31] !== query || $[32] !== save || $[33] !== setManifest || $[34] !== title || $[35] !== workspace.id || $[36] !== workspace.name) {
+		let t22;
+		if ($[52] !== query) {
+			t22 = (page) => `${page.title} ${page.path}`.toLowerCase().includes(query.toLowerCase());
+			$[52] = query;
+			$[53] = t22;
+		} else t22 = $[53];
+		const visiblePages = pages.filter(t22);
+		const t23 = workspace.id;
+		let t24;
+		if ($[54] !== manifest.workspaces) {
+			t24 = manifest.workspaces.map(_temp);
+			$[54] = manifest.workspaces;
+			$[55] = t24;
+		} else t24 = $[55];
+		let t25;
+		if ($[56] !== setManifest) {
+			t25 = (id_0) => {
+				if (id_0 !== null) setManifest((current_0) => ({
+					...current_0,
+					activeWorkspaceId: String(id_0)
+				}));
+			};
+			$[56] = setManifest;
+			$[57] = t25;
+		} else t25 = $[57];
+		let t26;
+		if ($[58] !== disabled || $[59] !== t24 || $[60] !== t25 || $[61] !== workspace.id) {
+			t26 = /* @__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: t23,
+					items: t24,
+					onChange: t25
+				})
+			});
+			$[58] = disabled;
+			$[59] = t24;
+			$[60] = t25;
+			$[61] = workspace.id;
+			$[62] = t26;
+		} else t26 = $[62];
+		let t27;
+		if ($[63] !== open) {
+			t27 = () => open("create");
+			$[63] = open;
+			$[64] = t27;
+		} else t27 = $[64];
+		let t28;
+		if ($[65] === Symbol.for("react.memo_cache_sentinel")) {
+			t28 = /* @__PURE__ */ jsx(Plus, { size: 15 });
+			$[65] = t28;
+		} else t28 = $[65];
+		let t29;
+		if ($[66] !== t27) {
+			t29 = /* @__PURE__ */ jsx("button", {
+				ref: createTrigger,
+				"aria-label": "Add workspace",
+				title: "Add workspace",
+				onClick: t27,
+				children: t28
+			});
+			$[66] = t27;
+			$[67] = t29;
+		} else t29 = $[67];
+		let t30;
+		if ($[68] !== open) {
+			t30 = () => open("rename");
+			$[68] = open;
+			$[69] = t30;
+		} else t30 = $[69];
+		let t31;
+		if ($[70] === Symbol.for("react.memo_cache_sentinel")) {
+			t31 = /* @__PURE__ */ jsx(Pencil, { size: 14 });
+			$[70] = t31;
+		} else t31 = $[70];
+		let t32;
+		if ($[71] !== t30) {
+			t32 = /* @__PURE__ */ jsx("button", {
+				ref: editTrigger,
+				"aria-label": "Rename workspace",
+				title: "Edit workspace",
+				onClick: t30,
+				children: t31
+			});
+			$[71] = t30;
+			$[72] = t32;
+		} else t32 = $[72];
+		let t33;
+		if ($[73] !== t26 || $[74] !== t29 || $[75] !== t32) {
+			t33 = /* @__PURE__ */ jsxs("div", {
+				className: "povio-canvas-workspace-picker",
+				children: [
+					t26,
+					t29,
+					t32
+				]
+			});
+			$[73] = t26;
+			$[74] = t29;
+			$[75] = t32;
+			$[76] = t33;
+		} else t33 = $[76];
+		if ($[77] !== disabled || $[78] !== t33) {
+			t21 = /* @__PURE__ */ jsx("fieldset", {
+				className: "povio-canvas-workspaces",
+				disabled,
+				children: t33
+			});
+			$[77] = disabled;
+			$[78] = t33;
+			$[79] = t21;
+		} else t21 = $[79];
+		T1 = $542a13ca2fa5b484$export$5b6b19405a83ff9d;
+		t15 = action === "create" ? createTrigger : editTrigger;
+		t16 = "bottom start";
+		t17 = 6;
+		t18 = "povio-canvas-workspace-popover";
+		t19 = action !== null;
+		if ($[80] === Symbol.for("react.memo_cache_sentinel")) {
+			t20 = (isOpen) => {
+				if (!isOpen) setAction(null);
+			};
+			$[80] = t20;
+		} else t20 = $[80];
+		T0 = $f2ff30fde7b014be$export$3ddf2d174ce01153;
+		t12 = action;
+		t13 = title;
+		t14 = action === "delete" ? "alertdialog" : "dialog";
+		if ($[81] !== save) {
+			t9 = (event) => {
+				event.preventDefault();
+				save();
+			};
+			$[81] = save;
+			$[82] = t9;
+		} else t9 = $[82];
+		let t34;
+		if ($[83] !== title) {
+			t34 = /* @__PURE__ */ jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, {
+				slot: "title",
+				children: title
+			});
+			$[83] = title;
+			$[84] = t34;
+		} else t34 = $[84];
+		let t35;
+		if ($[85] === Symbol.for("react.memo_cache_sentinel")) {
+			t35 = /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Close workspace dialog",
+				onClick: () => setAction(null),
+				children: /* @__PURE__ */ jsx(X, { size: 12 })
+			});
+			$[85] = t35;
+		} else t35 = $[85];
+		if ($[86] !== t34) {
+			t10 = /* @__PURE__ */ jsxs("header", {
+				className: "povio-canvas-workspace-popover-heading",
+				children: [t34, t35]
+			});
+			$[86] = t34;
+			$[87] = t10;
+		} else t10 = $[87];
+		t11 = 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 === "rename") && /* @__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_0) => enabled(page_0.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_1) => /* @__PURE__ */ jsxs("label", { children: [/* @__PURE__ */ jsx("input", {
+						type: "checkbox",
+						checked: enabled(page_1.id),
+						onChange: (event_2) => {
+							const ids = draftPages ?? pages.map(_temp2);
+							setDraftPages(event_2.target.checked ? [.../* @__PURE__ */ new Set([...ids, page_1.id])] : ids.filter((id_1) => id_1 !== page_1.id));
+						}
+					}), /* @__PURE__ */ jsx("span", { children: page_1.title })] }, page_1.id)), !visiblePages.length && /* @__PURE__ */ jsx("p", { children: "No matching pages." })]
+				})
+			]
+		})] });
+		$[23] = action;
+		$[24] = disabled;
+		$[25] = draftPages;
+		$[26] = enabled;
+		$[27] = manifest.workspaces;
+		$[28] = name;
+		$[29] = open;
+		$[30] = pages;
+		$[31] = query;
+		$[32] = save;
+		$[33] = setManifest;
+		$[34] = title;
+		$[35] = workspace.id;
+		$[36] = workspace.name;
+		$[37] = T0;
+		$[38] = T1;
+		$[39] = t10;
+		$[40] = t11;
+		$[41] = t12;
+		$[42] = t13;
+		$[43] = t14;
+		$[44] = t15;
+		$[45] = t16;
+		$[46] = t17;
+		$[47] = t18;
+		$[48] = t19;
+		$[49] = t20;
+		$[50] = t21;
+		$[51] = t9;
+	} else {
+		T0 = $[37];
+		T1 = $[38];
+		t10 = $[39];
+		t11 = $[40];
+		t12 = $[41];
+		t13 = $[42];
+		t14 = $[43];
+		t15 = $[44];
+		t16 = $[45];
+		t17 = $[46];
+		t18 = $[47];
+		t19 = $[48];
+		t20 = $[49];
+		t21 = $[50];
+		t9 = $[51];
+	}
+	let t22;
+	if ($[88] !== action || $[89] !== manifest.workspaces.length) {
+		t22 = 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"
+		});
+		$[88] = action;
+		$[89] = manifest.workspaces.length;
+		$[90] = t22;
+	} else t22 = $[90];
+	const t23 = action === "delete" ? "is-danger" : "is-primary";
+	let t24;
+	if ($[91] !== action || $[92] !== disabled || $[93] !== name) {
+		t24 = disabled || (action === "create" || action === "rename") && !name.trim();
+		$[91] = action;
+		$[92] = disabled;
+		$[93] = name;
+		$[94] = t24;
+	} else t24 = $[94];
+	const t25 = action === "create" ? "Create workspace" : action === "delete" ? "Delete" : "Save";
+	let t26;
+	if ($[95] !== t23 || $[96] !== t24 || $[97] !== t25) {
+		t26 = /* @__PURE__ */ jsx("button", {
+			type: "submit",
+			className: t23,
+			disabled: t24,
+			children: t25
+		});
+		$[95] = t23;
+		$[96] = t24;
+		$[97] = t25;
+		$[98] = t26;
+	} else t26 = $[98];
+	let t27;
+	if ($[99] !== t22 || $[100] !== t26) {
+		t27 = /* @__PURE__ */ jsxs("div", {
+			className: "povio-canvas-workspace-popover-actions",
+			children: [t22, t26]
+		});
+		$[99] = t22;
+		$[100] = t26;
+		$[101] = t27;
+	} else t27 = $[101];
+	let t28;
+	if ($[102] !== t10 || $[103] !== t11 || $[104] !== t27 || $[105] !== t9) {
+		t28 = /* @__PURE__ */ jsxs("form", {
+			onSubmit: t9,
+			children: [
+				t10,
+				t11,
+				t27
+			]
+		});
+		$[102] = t10;
+		$[103] = t11;
+		$[104] = t27;
+		$[105] = t9;
+		$[106] = t28;
+	} else t28 = $[106];
+	let t29;
+	if ($[107] !== T0 || $[108] !== t12 || $[109] !== t13 || $[110] !== t14 || $[111] !== t28) {
+		t29 = /* @__PURE__ */ jsx(T0, {
+			"aria-label": t13,
+			role: t14,
+			children: t28
+		}, t12);
+		$[107] = T0;
+		$[108] = t12;
+		$[109] = t13;
+		$[110] = t14;
+		$[111] = t28;
+		$[112] = t29;
+	} else t29 = $[112];
+	let t30;
+	if ($[113] !== T1 || $[114] !== t15 || $[115] !== t16 || $[116] !== t17 || $[117] !== t18 || $[118] !== t19 || $[119] !== t20 || $[120] !== t29) {
+		t30 = /* @__PURE__ */ jsx(T1, {
+			triggerRef: t15,
+			placement: t16,
+			offset: t17,
+			className: t18,
+			isOpen: t19,
+			onOpenChange: t20,
+			children: t29
+		});
+		$[113] = T1;
+		$[114] = t15;
+		$[115] = t16;
+		$[116] = t17;
+		$[117] = t18;
+		$[118] = t19;
+		$[119] = t20;
+		$[120] = t29;
+		$[121] = t30;
+	} else t30 = $[121];
+	let t31;
+	if ($[122] !== t21 || $[123] !== t30) {
+		t31 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t21, t30] });
+		$[122] = t21;
+		$[123] = t30;
+		$[124] = t31;
+	} else t31 = $[124];
+	return t31;
+}
+function _temp2(item_3) {
+	return item_3.id;
+}
+function _temp(item_2) {
+	return {
+		id: item_2.id,
+		label: item_2.name
+	};
+}
+//#endregion
+//#region src/app-canvas/storage-protocol.ts
+const canvasStorageMetaName = "povio-ui-canvas-storage";
+//#endregion
+//#region src/app-canvas/useCanvasStorage.ts
+/** Canvas workspaces in `povio.canvas.json` when connected, otherwise in this browser. */
+function useCanvasStorage(key, t0) {
+	const $ = c(11);
+	const enabled = t0 === void 0 ? true : t0;
+	let t1;
+	if ($[0] !== enabled || $[1] !== key) {
+		t1 = {
+			key,
+			metaName: canvasStorageMetaName,
+			field: "manifest",
+			parse: parseCanvasManifest,
+			noun: "workspace",
+			enabled
+		};
+		$[0] = enabled;
+		$[1] = key;
+		$[2] = t1;
+	} else t1 = $[2];
+	const t2 = useRepositoryStorage(t1);
+	let setValue;
+	let storage;
+	let value;
+	if ($[3] !== t2) {
+		({value, setValue, ...storage} = t2);
+		$[3] = t2;
+		$[4] = setValue;
+		$[5] = storage;
+		$[6] = value;
+	} else {
+		setValue = $[4];
+		storage = $[5];
+		value = $[6];
+	}
+	let t3;
+	if ($[7] !== setValue || $[8] !== storage || $[9] !== value) {
+		t3 = {
+			manifest: value,
+			setManifest: setValue,
+			...storage
+		};
+		$[7] = setValue;
+		$[8] = storage;
+		$[9] = value;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
+}
+//#endregion
 //#region src/app-canvas/useFrameStartup.ts
 /** Bound concurrent bootstraps, without unloading any admitted page. */
 function useFrameStartup(keys, concurrency = 2) {
@@ -408,7 +1051,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());
@@ -490,7 +1133,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}` : ""}`,
@@ -500,13 +1149,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);
 						}
 					},
@@ -523,11 +1172,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",
@@ -894,6 +1538,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) {
@@ -1072,68 +1774,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 = [
 	{
@@ -1160,14 +1800,6 @@ const emptyExclude = [];
 /** Zoom per wheel pixel, and the largest delta one wheel event may contribute. */
 const ZOOM_SENSITIVITY = .006;
 const ZOOM_DELTA_LIMIT = 40;
-function readManifest(key) {
-	if (typeof window === "undefined") return createCanvasManifest();
-	try {
-		return parseCanvasManifest(localStorage.getItem(key));
-	} catch {
-		return createCanvasManifest();
-	}
-}
 const PageFrame = memo(function PageFrame(t0) {
 	const $ = c(16);
 	const { id, src, width, height, name, interact, inspect, onLoad, register } = t0;
@@ -1216,10 +1848,13 @@ 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, componentsHref }) {
+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);
@@ -1231,6 +1866,14 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	const [notice, setNotice] = useState("");
 	const [documentGeneration, setDocumentGeneration] = useState(0);
 	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);
@@ -1243,12 +1886,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 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, `${content}:${bp.id}:${documentGeneration}:${JSON.stringify(reload)}`, isKnownToken);
-	const pageCatalog = useMemo(() => discoverCanvasPages(router, {
+	const inspector = useCanvasInspector(inspectMode, `${manifest.activeWorkspaceId}:${content}:${bp.id}:${documentGeneration}:${JSON.stringify(reload)}`, isKnownToken);
+	const allPages = useMemo(() => discoverCanvasPages(router, {
 		examples: {
 			...examples,
 			...manifest.examples
@@ -1262,6 +1905,11 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		exclude,
 		excludePaths
 	]);
+	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,
@@ -1271,7 +1919,7 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		kind: "page"
 	})) : [], [componentsHref]);
 	const catalog = content === "components" && componentCatalog.length ? componentCatalog : pageCatalog;
-	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 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,
@@ -1286,18 +1934,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,
@@ -1328,6 +1995,9 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		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(() => {
@@ -1338,18 +2008,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.");
@@ -1359,7 +2029,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();
@@ -1374,18 +2045,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) => {
@@ -1393,7 +2064,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));
@@ -1415,9 +2086,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,
@@ -1452,19 +2123,13 @@ 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;
@@ -1534,58 +2199,74 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 			1.5,
 			2
 		];
-		const current_1 = camera.current.zoom;
-		const next_3 = direction === 1 ? stops.find((value_0) => value_0 > current_1 + 1e-4) : [...stops].reverse().find((value_1) => value_1 < current_1 - 1e-4);
+		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) => {
@@ -1595,12 +2276,12 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		send(id_4, "mode");
 	}, [send]);
 	useEffect(() => {
-		const timer = setTimeout(() => setRuntime((current_4) => {
-			const next_4 = { ...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_4[key_1]?.ready) next_4[key_1] = {
-					...next_4[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
 				};
 			}
@@ -1644,13 +2325,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.");
 					}
 				}
 			}),
@@ -1681,6 +2362,12 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 									})]
 								})]
 							}),
+							/* @__PURE__ */ jsx(WorkspaceControls, {
+								manifest,
+								setManifest,
+								pages: allPages,
+								disabled: !storage.ready
+							}),
 							/* @__PURE__ */ jsxs("div", {
 								className: "povio-canvas-search",
 								children: [
@@ -1699,37 +2386,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",
@@ -1762,6 +2461,18 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 										]
 									})
 								]
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "povio-canvas-storage-status",
+								role: "status",
+								children: [storage.status, 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"
+								})] })]
 							})
 						]
 					}),
@@ -1777,18 +2488,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",
@@ -1834,14 +2535,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,
@@ -1880,12 +2585,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,
@@ -1906,10 +2611,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", {
@@ -1940,25 +2645,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
@@ -1976,6 +2682,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: [
@@ -2021,10 +2731,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" })]
 									})
@@ -2048,29 +2761,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", {
@@ -2312,6 +3029,19 @@ function startCanvasDocument(doc, options) {
 	win.addEventListener("resize", schedule);
 	doc.addEventListener("load", schedule, true);
 	doc.fonts?.ready.then(schedule);
+	const focusDescriptor = Object.getOwnPropertyDescriptor(win.HTMLElement.prototype, "focus");
+	const elementFocus = focusDescriptor.value;
+	const windowFocusDescriptor = Object.getOwnPropertyDescriptor(win, "focus");
+	const windowFocus = windowFocusDescriptor?.value;
+	Object.defineProperty(win.HTMLElement.prototype, "focus", {
+		...focusDescriptor,
+		value(focusOptions) {
+			if (doc.hasFocus()) elementFocus.call(this, focusOptions);
+		}
+	});
+	win.focus = () => {
+		if (doc.hasFocus()) windowFocus?.call(win);
+	};
 	refresh();
 	return {
 		refresh,
@@ -2327,6 +3057,9 @@ function startCanvasDocument(doc, options) {
 			win.removeEventListener("submit", submit, true);
 			win.removeEventListener("resize", schedule);
 			doc.removeEventListener("load", schedule, true);
+			Object.defineProperty(win.HTMLElement.prototype, "focus", focusDescriptor);
+			if (windowFocusDescriptor) Object.defineProperty(win, "focus", windowFocusDescriptor);
+			else Reflect.deleteProperty(win, "focus");
 			for (const [media, value] of mediaOriginals) media.mediaText = value;
 			for (const [style, values] of originals) for (const [property, [value, priority]] of values) if (value) style.setProperty(property, value, priority);
 			else style.removeProperty(property);
@@ -2407,10 +3140,10 @@ function AppCanvasFrameBridge({ href }) {
 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-C0Sf9RcC.js"));
+const CanvasComponentsFrame = lazy(() => import("./CanvasComponentsFrame-CbgJJv-3.js"));
 /** Ready-made route page. Mount beneath the app's UIConfigurationProvider. */
 function AppCanvasPage(t0) {
-	const $ = c(21);
+	const $ = c(24);
 	let excludePaths;
 	let props;
 	let t1;
@@ -2426,72 +3159,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;
+	if ($[7] !== excludePaths) {
+		t4 = excludePaths ?? [];
+		$[7] = excludePaths;
+		$[8] = t4;
+	} else t4 = $[8];
+	let t5;
+	if ($[9] !== canvasPath || $[10] !== t4) {
+		t5 = /* @__PURE__ */ new Set([...t4, canvasPath]);
+		$[9] = canvasPath;
 		$[10] = t4;
-	} else t4 = $[10];
-	const exclusions = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	let t6;
+	if ($[12] !== t5) {
+		t6 = [...t5];
+		$[12] = t5;
+		$[13] = t6;
+	} else t6 = $[13];
+	const exclusions = t6;
 	if (isAppCanvasFrame()) {
-		let t5;
-		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		let t7;
+		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
 			const group = new URLSearchParams(window.location.search).get(componentsParam);
-			t5 = group ? /* @__PURE__ */ jsx(Suspense, {
+			t7 = group ? /* @__PURE__ */ jsx(Suspense, {
 				fallback: null,
 				children: /* @__PURE__ */ jsx(CanvasComponentsFrame, { group })
 			}) : null;
-			$[11] = t5;
-		} else t5 = $[11];
-		return t5;
+			$[14] = t7;
+		} else t7 = $[14];
+		return t7;
 	}
-	let t5;
-	if ($[12] !== canvasPath) {
-		t5 = (group_0) => `${canvasPath}?${componentsParam}=${encodeURIComponent(group_0)}`;
-		$[12] = canvasPath;
-		$[13] = t5;
-	} else t5 = $[13];
-	let t6;
-	if ($[14] !== exclusions || $[15] !== props || $[16] !== t5) {
-		t6 = /* @__PURE__ */ jsx(AppCanvas, {
+	let t7;
+	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: t5
+			componentsHref: t7
 		});
-		$[14] = exclusions;
-		$[15] = props;
-		$[16] = t5;
-		$[17] = t6;
-	} else t6 = $[17];
-	let t7;
-	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = /* @__PURE__ */ jsx(UIConfigurationModal, {});
-		$[18] = t7;
-	} else t7 = $[18];
-	let t8;
-	if ($[19] !== t6) {
-		t8 = /* @__PURE__ */ jsxs("div", {
+		$[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: [t6, t7]
+			children: [t8, t9]
 		});
-		$[19] = t6;
-		$[20] = t8;
-	} else t8 = $[20];
-	return t8;
+		$[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 };