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

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

@@ -1,5 +1,5 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.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 { _ 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";
@@ -9,7 +9,7 @@ import { c as $542a13ca2fa5b484$export$5b6b19405a83ff9d, n as $f2ff30fde7b014be$
 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 { c as isEditableToken } 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";
@@ -21,7 +21,7 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$10 = {
+const __iconData$8 = {
 	name: "download",
 	size: 24,
 	node: [
@@ -39,8 +39,8 @@ const __iconData$10 = {
 		}]
 	]
 };
-__iconData$10.node;
-const Download = createLucideIcon(__iconData$10);
+__iconData$8.node;
+const Download = createLucideIcon(__iconData$8);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/frame.mjs
 /**
@@ -49,7 +49,7 @@ const Download = createLucideIcon(__iconData$10);
 * This source code is licensed under the ISC license.
 * See the LICENSE file in the root directory of this source tree.
 */
-const __iconData$9 = {
+const __iconData$7 = {
 	name: "frame",
 	size: 24,
 	node: [
@@ -83,8 +83,8 @@ const __iconData$9 = {
 		}]
 	]
 };
-__iconData$9.node;
-const Frame = createLucideIcon(__iconData$9);
+__iconData$7.node;
+const Frame = createLucideIcon(__iconData$7);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/hand.mjs
 /**
@@ -93,7 +93,7 @@ const Frame = 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$6 = {
 	name: "hand",
 	size: 24,
 	node: [
@@ -115,8 +115,8 @@ const __iconData$8 = {
 		}]
 	]
 };
-__iconData$8.node;
-const Hand = createLucideIcon(__iconData$8);
+__iconData$6.node;
+const Hand = createLucideIcon(__iconData$6);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/monitor.mjs
 /**
@@ -125,7 +125,7 @@ const Hand = 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$5 = {
 	name: "monitor",
 	size: 24,
 	node: [
@@ -153,8 +153,8 @@ const __iconData$7 = {
 		}]
 	]
 };
-__iconData$7.node;
-const Monitor = createLucideIcon(__iconData$7);
+__iconData$5.node;
+const Monitor = createLucideIcon(__iconData$5);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/mouse-pointer-2.mjs
 /**
@@ -163,7 +163,7 @@ const Monitor = 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$4 = {
 	name: "mouse-pointer-2",
 	size: 24,
 	node: [["path", {
@@ -171,8 +171,8 @@ const __iconData$6 = {
 		key: "edeuup"
 	}]]
 };
-__iconData$6.node;
-const MousePointer2 = createLucideIcon(__iconData$6);
+__iconData$4.node;
+const MousePointer2 = createLucideIcon(__iconData$4);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panel-left.mjs
 /**
@@ -181,7 +181,7 @@ const MousePointer2 = 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$3 = {
 	name: "panel-left",
 	size: 24,
 	node: [["rect", {
@@ -197,8 +197,8 @@ const __iconData$5 = {
 	}]],
 	aliases: ["sidebar"]
 };
-__iconData$5.node;
-const PanelLeft = createLucideIcon(__iconData$5);
+__iconData$3.node;
+const PanelLeft = createLucideIcon(__iconData$3);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/panels-top-left.mjs
 /**
@@ -207,7 +207,7 @@ const PanelLeft = 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$2 = {
 	name: "panels-top-left",
 	size: 24,
 	node: [
@@ -230,29 +230,8 @@ const __iconData$4 = {
 	],
 	aliases: ["layout"]
 };
-__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);
+__iconData$2.node;
+const PanelsTopLeft = createLucideIcon(__iconData$2);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/scan-line.mjs
 /**
@@ -261,7 +240,7 @@ const Pencil = 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$1 = {
 	name: "scan-line",
 	size: 24,
 	node: [
@@ -287,8 +266,8 @@ const __iconData$2 = {
 		}]
 	]
 };
-__iconData$2.node;
-const ScanLine = createLucideIcon(__iconData$2);
+__iconData$1.node;
+const ScanLine = createLucideIcon(__iconData$1);
 //#endregion
 //#region ../../node_modules/.bun/lucide-react@1.43.0+83d5fd7b249dbeef/node_modules/lucide-react/dist/esm/icons/settings-2.mjs
 /**
@@ -297,7 +276,7 @@ const ScanLine = 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 = {
 	name: "settings-2",
 	size: 24,
 	node: [
@@ -323,215 +302,8 @@ const __iconData$1 = {
 		}]
 	]
 };
-__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 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
-		})]
-	});
-}
+const Settings2 = createLucideIcon(__iconData);
 //#endregion
 //#region src/app-canvas/manifest.ts
 function createCanvasWorkspace(name, id) {
@@ -563,38 +335,6 @@ function isJSON(value, ancestors = /* @__PURE__ */ new Set(), depth = 0) {
 	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 [];
@@ -631,13 +371,11 @@ function parseCanvasManifest(input) {
 	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 } : {}
+			positions: parsePositions(entry.positions)
 		});
 	}
 	if (!workspaces.length) workspaces.push(createCanvasWorkspace("All pages", "default"));
@@ -652,328 +390,419 @@ function parseCanvasManifest(input) {
 //#endregion
 //#region src/app-canvas/WorkspaceControls.tsx
 function WorkspaceControls(t0) {
-	const $ = c(81);
+	const $ = c(125);
 	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;
+	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] = t1;
-	} else t1 = $[1];
-	const workspace = manifest.workspaces.find(t1);
+		$[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 ($[2] !== setAction) {
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
 		t2 = () => {
 			setAction(null);
 		};
-		$[2] = setAction;
-		$[3] = t2;
-	} else t2 = $[3];
-	useEffect(t2, [workspace.id]);
+		$[5] = t2;
+	} else t2 = $[5];
 	let t3;
-	if ($[4] !== disabled || $[5] !== setAction) {
-		t3 = () => {
-			if (disabled) setAction(null);
-		};
-		$[4] = disabled;
-		$[5] = setAction;
-		$[6] = t3;
-	} else t3 = $[6];
+	if ($[6] !== workspace.id) {
+		t3 = [workspace.id];
+		$[6] = workspace.id;
+		$[7] = t3;
+	} else t3 = $[7];
+	useEffect(t2, t3);
 	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;
+	if ($[8] !== disabled) {
+		t4 = () => {
+			if (disabled) setAction(null);
+		};
+		t5 = [disabled];
+		$[8] = disabled;
+		$[9] = t4;
 		$[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);
+	} 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: remaining,
-					activeWorkspaceId: remaining[0].id
+					workspaces: current.workspaces.map((item_1) => item_1.id === workspace.id ? {
+						...item_1,
+						...action === "rename" && { name: name.trim() },
+						enabledPages: draftPages
+					} : item_1)
 				};
-			}
-			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)
-			}));
+			});
+			setAction(null);
 		};
-		$[15] = setManifest;
-		$[16] = t9;
-	} else t9 = $[16];
+		$[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;
-	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 t17;
 	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",
+	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: [
-					/* @__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"
-					})
+					t26,
+					t29,
+					t32
 				]
-			}),
-			/* @__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", {
+			});
+			$[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,
@@ -985,121 +814,102 @@ function WorkspaceControls(t0) {
 			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", {
+		$[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: t35,
-			disabled: t36,
-			children: t37
+			className: t23,
+			disabled: t24,
+			children: t25
 		});
-		$[57] = t35;
-		$[58] = t36;
-		$[59] = t37;
-		$[60] = t38;
-	} else t38 = $[60];
-	let t39;
-	if ($[61] !== t34 || $[62] !== t38) {
-		t39 = /* @__PURE__ */ jsxs("div", {
+		$[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: [t34, t38]
+			children: [t22, t26]
 		});
-		$[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,
+		$[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: [
-				t32,
-				t33,
-				t39
+				t10,
+				t11,
+				t27
 			]
 		});
-		$[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
+		$[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
 		});
-		$[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] });
+		$[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;
@@ -1110,149 +920,57 @@ function _temp(item_2) {
 		label: item_2.name
 	};
 }
-const canvasStorageTokenHeader = "x-povio-canvas-token";
+//#endregion
+//#region src/app-canvas/storage-protocol.ts
+const canvasStorageMetaName = "povio-ui-canvas-storage";
 //#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();
+/** 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];
 	}
-}
-/** 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;
+	let t3;
+	if ($[7] !== setValue || $[8] !== storage || $[9] !== value) {
+		t3 = {
+			manifest: value,
+			setManifest: setValue,
+			...storage
 		};
-	}, []);
-	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
-	};
+		$[7] = setValue;
+		$[8] = storage;
+		$[9] = value;
+		$[10] = t3;
+	} else t3 = $[10];
+	return t3;
 }
 //#endregion
 //#region src/app-canvas/useFrameStartup.ts
@@ -2147,7 +1865,6 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	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), [
@@ -2625,12 +2342,6 @@ 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 povio-canvas-content-switch",
 								role: "group",
@@ -2651,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: [
@@ -2748,18 +2465,14 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 							/* @__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"
-									})] })
-								]
+								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"
+								})] })]
 							})
 						]
 					}),
@@ -3316,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,
@@ -3331,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);
@@ -3411,7 +3140,7 @@ 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-CZXY0Dxi.js"));
+const CanvasComponentsFrame = lazy(() => import("./CanvasComponentsFrame-CbgJJv-3.js"));
 /** Ready-made route page. Mount beneath the app's UIConfigurationProvider. */
 function AppCanvasPage(t0) {
 	const $ = c(24);