@povio/ui 5.0.0-rc.14 → 5.0.0-rc.15

package/dist/{AppCanvasPage-vta1j5YQ.js → AppCanvasPage-BnyCHO3I.js}

@@ -1,5 +1,5 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.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-CjAW1SJY.js";
+import { a as UIConfigurationModal, d as Trash, f as Sun, h as Moon, i as useCanvasInspector, m as Pencil, n as CanvasInspectorPanel, p as Plus, r as CanvasLayerHighlight, s as useRepositoryStorage, t as CanvasInspectionOverlay, u as useUIConfiguration } from "./CanvasInspector-DdP3mHUY.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";
@@ -7,10 +7,9 @@ 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 Select } from "./Select-tNlFSbAC.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, useLayoutEffect, useMemo, useReducer, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
@@ -1186,415 +1185,58 @@ function PageLayers({ frame, title, selected, onSelect, onHover }) {
 		]
 	});
 }
-//#endregion
-//#region src/app-canvas/CanvasInspector.tsx
-/** Inspect the live iframe DOM using its own, unscaled viewport coordinates. */
-function useCanvasInspector(enabled, generation, isKnown) {
-	const [selection, setSelection] = useState(null);
-	const [measurement, setMeasurement] = useState(null);
-	const [pinned, setPinned] = useState(false);
-	const [highlightKey, setHighlightKey] = useState(null);
-	const hoverFrame = useRef(null);
-	const pending = useRef(null);
-	const clear = useCallback(() => {
-		if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
-		hoverFrame.current = null;
-		pending.current = null;
-		setSelection(null);
-		setMeasurement(null);
-		setPinned(false);
-		setHighlightKey(null);
-	}, []);
-	useEffect(() => {
-		if (!enabled) clear();
-	}, [enabled, clear]);
-	useEffect(() => {
-		clear();
-	}, [generation, clear]);
-	useEffect(() => () => {
-		if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
-	}, []);
-	const pick = useCallback((pageId, frame, clientX, clientY, pin) => {
-		if (!enabled || pinned && !pin) return;
-		const bounds = frame.getBoundingClientRect();
-		if (!bounds.width || !bounds.height) return;
-		try {
-			const doc = frame.contentDocument;
-			if (!doc) return;
-			const x = (clientX - bounds.left) * frame.clientWidth / bounds.width;
-			const y = (clientY - bounds.top) * frame.clientHeight / bounds.height;
-			const hit = doc.elementFromPoint(x, y);
-			const element = hit?.closest("button,input,textarea,select,a,label,[role],h1,h2,h3,h4,h5,h6,p") ?? hit;
-			if (!element || element === doc.documentElement || element === doc.body || element.namespaceURI !== "http://www.w3.org/1999/xhtml") return;
-			const target = element;
-			setSelection((current) => current?.element === target ? current : {
-				pageId,
-				element: target
-			});
-			setHighlightKey(null);
-			if (pin) setPinned((current_0) => !(current_0 && selection?.element === target));
-		} catch {
-			clear();
-		}
-	}, [
-		enabled,
-		pinned,
-		selection,
-		clear
-	]);
-	const hover = useCallback((pageId_0, frame_0, x_0, y_0) => {
-		if (!enabled || pinned) return;
-		pending.current = () => pick(pageId_0, frame_0, x_0, y_0, false);
-		if (hoverFrame.current !== null) return;
-		hoverFrame.current = requestAnimationFrame(() => {
-			hoverFrame.current = null;
-			pending.current?.();
-			pending.current = null;
+const gap = 64;
+const header = 48;
+const titleSpace = 72;
+const sectionGap = 192;
+/**
+* Lays component artboards out by section: a title, then rows of up to four columns. Saved positions win, so
+* artboards a person dragged stay where they put them.
+*/
+function layoutComponentArtboards(pages, heights, positions = {}) {
+	const rowWidth = 1872;
+	const nodes = [];
+	const sections = [];
+	const order = [...new Set(pages.map((page) => page.section))];
+	let y = 0;
+	for (const section of order) {
+		sections.push({
+			title: section,
+			x: 0,
+			y: y + titleSpace - 12
 		});
-	}, [
-		enabled,
-		pinned,
-		pick
-	]);
-	const select = useCallback((pageId_1, frame_1, x_1, y_1) => {
-		if (hoverFrame.current !== null) cancelAnimationFrame(hoverFrame.current);
-		hoverFrame.current = null;
-		pending.current = null;
-		pick(pageId_1, frame_1, x_1, y_1, true);
-	}, [pick]);
-	useEffect(() => {
-		if (!enabled || !selection) return;
-		const { element: element_0 } = selection;
-		const doc_0 = element_0.ownerDocument;
-		const owner = doc_0.defaultView;
-		if (!owner) return;
-		let scheduled = null;
-		const measure = () => {
-			scheduled = null;
-			if (!element_0.isConnected) {
-				clear();
-				return;
-			}
-			const rect = element_0.getBoundingClientRect();
-			const snapshot = inspectElement(element_0, isKnown);
-			const details = highlightKey ? getBoxHighlights(element_0, highlightKey) : null;
-			const spacing = highlightKey ? [] : [
-				"padding.top",
-				"padding.right",
-				"padding.bottom",
-				"padding.left",
-				"margin.top",
-				"margin.right",
-				"margin.bottom",
-				"margin.left",
-				"gap.row",
-				"gap.column"
-			].flatMap((key) => {
-				const [kind, side] = key.split(".");
-				const raw = kind === "padding" ? snapshot.box.padding[side] : kind === "margin" ? snapshot.box.margin[side] : snapshot.box.gap[side];
-				if (!(Math.abs(Number.parseFloat(raw)) > 0)) return [];
-				const details_0 = getBoxHighlights(element_0, key);
-				const regions = details_0.regions.filter((region) => region.width > 0 && region.height > 0);
-				return regions.length ? [{
-					key,
-					label: details_0.label,
-					regions
-				}] : [];
-			});
-			if (!highlightKey) {
-				const seen = new Set(spacing.flatMap((item) => item.regions.map((region_0) => `${item.key}:${region_0.left}:${region_0.top}:${region_0.width}:${region_0.height}`)));
-				for (const child of Array.from(element_0.children).slice(0, 80)) {
-					if (child.namespaceURI !== "http://www.w3.org/1999/xhtml" || !child.getClientRects().length) continue;
-					const style = owner.getComputedStyle(child);
-					if (style.display === "none" || style.visibility === "hidden" || /^(absolute|fixed)$/.test(style.position)) continue;
-					for (const side_0 of [
-						"top",
-						"right",
-						"bottom",
-						"left"
-					]) {
-						if (!(Math.abs(Number.parseFloat(style.getPropertyValue(`margin-${side_0}`))) > 0)) continue;
-						const key_0 = `margin.${side_0}`;
-						const details_1 = getBoxHighlights(child, key_0);
-						const regions_0 = details_1.regions.filter((region_1) => {
-							const id = `${key_0}:${region_1.left}:${region_1.top}:${region_1.width}:${region_1.height}`;
-							if (seen.has(id)) return false;
-							seen.add(id);
-							return region_1.width > 0 && region_1.height > 0;
-						});
-						if (regions_0.length) spacing.push({
-							key: key_0,
-							label: details_1.label,
-							regions: regions_0
-						});
-					}
-				}
+		y += titleSpace;
+		let x = 0;
+		let rowHeight = 0;
+		for (const page of pages.filter((item) => item.section === section)) {
+			const width = page.wide ? 904 : 420;
+			if (x > 0 && x + width > rowWidth) {
+				y += rowHeight + gap;
+				x = 0;
+				rowHeight = 0;
 			}
-			const next = {
-				snapshot,
-				spacing,
-				outline: {
-					left: rect.left,
-					top: rect.top,
-					width: rect.width,
-					height: rect.height
-				},
-				highlight: details && highlightKey ? {
-					key: highlightKey,
-					...details
-				} : null
+			const measured = heights[page.id];
+			const height = Number.isFinite(measured) && measured > 0 ? measured : 240;
+			const saved = positions[page.id];
+			const position = saved && Number.isFinite(saved.x) && Number.isFinite(saved.y) ? saved : {
+				x,
+				y
 			};
-			setMeasurement((current_1) => JSON.stringify(current_1) === JSON.stringify(next) ? current_1 : next);
-		};
-		const schedule = () => {
-			if (scheduled === null) scheduled = requestAnimationFrame(measure);
-		};
-		const mutations = new MutationObserver(schedule);
-		mutations.observe(doc_0.documentElement, {
-			subtree: true,
-			childList: true,
-			attributes: true,
-			characterData: true
-		});
-		const resize = new ResizeObserver(schedule);
-		resize.observe(element_0);
-		owner.addEventListener("scroll", schedule, true);
-		measure();
-		return () => {
-			mutations.disconnect();
-			resize.disconnect();
-			owner.removeEventListener("scroll", schedule, true);
-			if (scheduled !== null) cancelAnimationFrame(scheduled);
-		};
-	}, [
-		enabled,
-		selection,
-		highlightKey,
-		clear,
-		isKnown
-	]);
-	return {
-		selection,
-		selectElement: (pageId_2, element_1) => {
-			setSelection({
-				pageId: pageId_2,
-				element: element_1
+			nodes.push({
+				...page,
+				...position,
+				width,
+				height
 			});
-			setPinned(true);
-			setHighlightKey(null);
-		},
-		measurement,
-		pinned,
-		hover,
-		select,
-		clear,
-		highlight: setHighlightKey,
-		togglePin: () => setPinned((value) => !value)
-	};
-}
-function CanvasInspectorPanel(t0) {
-	const $ = c(22);
-	const { inspector, onClose, onSelectToken } = t0;
-	let t1;
-	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsx("strong", { children: "Inspector view" });
-		$[0] = t1;
-	} else t1 = $[0];
-	const t2 = !inspector.selection;
-	let t3;
-	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-		t3 = /* @__PURE__ */ jsx(Pin, { size: 14 });
-		$[1] = t3;
-	} else t3 = $[1];
-	let t4;
-	if ($[2] !== inspector.pinned || $[3] !== inspector.togglePin || $[4] !== t2) {
-		t4 = /* @__PURE__ */ jsx("button", {
-			"aria-label": "Pin inspected element",
-			"aria-pressed": inspector.pinned,
-			disabled: t2,
-			onClick: inspector.togglePin,
-			children: t3
-		});
-		$[2] = inspector.pinned;
-		$[3] = inspector.togglePin;
-		$[4] = t2;
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(X, { size: 15 });
-		$[6] = t5;
-	} else t5 = $[6];
-	let t6;
-	if ($[7] !== onClose) {
-		t6 = /* @__PURE__ */ jsx("button", {
-			"aria-label": "Close inspector view",
-			onClick: onClose,
-			children: t5
-		});
-		$[7] = onClose;
-		$[8] = t6;
-	} else t6 = $[8];
-	let t7;
-	if ($[9] !== t4 || $[10] !== t6) {
-		t7 = /* @__PURE__ */ jsxs("header", { children: [
-			t1,
-			t4,
-			t6
-		] });
-		$[9] = t4;
-		$[10] = t6;
-		$[11] = t7;
-	} else t7 = $[11];
-	const t8 = inspector.pinned ? "Selection pinned · click it again to unpin" : "Hover a component · click to pin";
-	let t9;
-	if ($[12] !== t8) {
-		t9 = /* @__PURE__ */ jsx("p", {
-			className: "povio-canvas-inspect-hint",
-			children: t8
-		});
-		$[12] = t8;
-		$[13] = t9;
-	} else t9 = $[13];
-	let t10;
-	if ($[14] !== inspector.highlight || $[15] !== inspector.measurement || $[16] !== onSelectToken) {
-		t10 = inspector.measurement ? /* @__PURE__ */ jsx(InspectorDetails, {
-			snapshot: inspector.measurement.snapshot,
-			onSelect: onSelectToken,
-			onHighlight: inspector.highlight
-		}) : /* @__PURE__ */ jsx("p", {
-			className: "povio-canvas-inspect-hint",
-			children: "Inspect a live page to see its padding, margins, borders, radii and gaps."
-		});
-		$[14] = inspector.highlight;
-		$[15] = inspector.measurement;
-		$[16] = onSelectToken;
-		$[17] = t10;
-	} else t10 = $[17];
-	let t11;
-	if ($[18] !== t10 || $[19] !== t7 || $[20] !== t9) {
-		t11 = /* @__PURE__ */ jsxs("aside", {
-			className: "studio-inspector-panel povio-canvas-inspector",
-			"aria-label": "Inspector view",
-			children: [
-				t7,
-				t9,
-				t10
-			]
-		});
-		$[18] = t10;
-		$[19] = t7;
-		$[20] = t9;
-		$[21] = t11;
-	} else t11 = $[21];
-	return t11;
-}
-function CanvasInspectionOverlay(t0) {
-	const $ = c(9);
-	const { measurement, width } = t0;
-	let t1;
-	if ($[0] !== measurement.outline) {
-		t1 = /* @__PURE__ */ jsx("div", {
-			className: "studio-hover-outline",
-			style: measurement.outline
-		});
-		$[0] = measurement.outline;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] !== measurement.highlight || $[3] !== measurement.spacing || $[4] !== width) {
-		t2 = measurement.highlight ? /* @__PURE__ */ jsx(HighlightOverlay, {
-			highlight: measurement.highlight,
-			width
-		}) : measurement.spacing.map((highlight) => /* @__PURE__ */ jsxs("div", {
-			className: "povio-canvas-auto-spacing",
-			children: [/* @__PURE__ */ jsx(HighlightOverlay, {
-				highlight,
-				width
-			}), highlight.regions.map((region) => /* @__PURE__ */ jsx("span", {
-				className: "povio-canvas-spacing-value",
-				style: {
-					left: region.left + region.width / 2,
-					top: region.top + region.height / 2
-				},
-				children: highlight.label.split(": ")[1]
-			}, `${region.left}:${region.top}:${region.width}:${region.height}`))]
-		}, `${highlight.key}:${highlight.label}:${highlight.regions[0]?.left}:${highlight.regions[0]?.top}`));
-		$[2] = measurement.highlight;
-		$[3] = measurement.spacing;
-		$[4] = width;
-		$[5] = t2;
-	} else t2 = $[5];
-	let t3;
-	if ($[6] !== t1 || $[7] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			className: "povio-canvas-inspection-overlay",
-			"aria-hidden": "true",
-			children: [t1, t2]
-		});
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-	} 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];
+			x += width + gap;
+			rowHeight = Math.max(rowHeight, header + height);
+		}
+		y += rowHeight + sectionGap;
 	}
-	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;
+	return {
+		nodes,
+		sections
+	};
 }
 //#endregion
 //#region src/app-canvas/route-model.ts
@@ -1861,6 +1503,23 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	const [dark, setDark] = useState(false);
 	/** The canvas shows either the app's pages or the component gallery's sections, as artboards either way. */
 	const [content, setContent] = useState("pages");
+	/** Gallery components (names and sections only); the demos themselves render inside their frames. */
+	const [componentList, setComponentList] = useState([]);
+	useEffect(() => {
+		if (!componentsHref) return;
+		let cancelled = false;
+		import("./demos-DIwj5vc0.js").then((n) => n.n).then(({ demos }) => {
+			if (!cancelled) setComponentList(demos.map(({ id, title, group, wide }) => ({
+				id,
+				title,
+				section: group,
+				wide
+			})));
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [componentsHref]);
 	const [mobilePanel, setMobilePanel] = useState(null);
 	const [query, setQuery] = useState("");
 	const [notice, setNotice] = useState("");
@@ -1910,15 +1569,20 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		workspace.enabledPages,
 		storage.ready
 	]);
-	const componentCatalog = useMemo(() => componentsHref ? componentArtboards.map((group) => ({
-		id: `components:${group.toLowerCase()}`,
-		title: group,
-		path: group,
-		href: componentsHref(group),
+	const componentCatalog = useMemo(() => componentsHref ? componentList.map((component) => ({
+		id: `component:${component.id}`,
+		title: component.title,
+		path: component.section,
+		section: component.section,
+		wide: component.wide,
+		href: componentsHref(component.id),
 		missingParams: [],
 		kind: "page"
-	})) : [], [componentsHref]);
-	const catalog = content === "components" && componentCatalog.length ? componentCatalog : pageCatalog;
+	})) : [], [componentsHref, componentList]);
+	const showingComponents = content === "components" && componentCatalog.length > 0;
+	const catalog = showingComponents ? componentCatalog : pageCatalog;
+	/** Components are measured from a short frame; pages start at the breakpoint's viewport height. */
+	const frameViewportHeight = showingComponents ? 240 : bp.height;
 	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,
@@ -1934,12 +1598,21 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		keys: startupKeys,
 		complete: startup.complete
 	};
-	const heights = useMemo(() => Object.fromEntries(catalog.map((page_2) => [page_2.id, runtime[`${bp.id}:${page_2.id}:${page_2.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 ?? frameViewportHeight])), [
 		catalog,
 		runtime,
-		bp
+		bp,
+		frameViewportHeight
 	]);
-	const nodes = useMemo(() => layoutCanvasPages(catalog, bp.width, heights, workspace.positions[bp.id] ?? {}), [
+	const { nodes, sections } = useMemo(() => {
+		const positions = workspace.positions[bp.id] ?? {};
+		return showingComponents ? layoutComponentArtboards(componentCatalog, heights, positions) : {
+			nodes: layoutCanvasPages(catalog, bp.width, heights, positions),
+			sections: []
+		};
+	}, [
+		showingComponents,
+		componentCatalog,
 		catalog,
 		bp,
 		heights,
@@ -1965,25 +1638,28 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		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 frameInteract = interact || showingComponents && !inspectMode;
 	const latest = useRef({
 		configuration: configuration.active,
 		dark,
-		interact,
+		interact: frameInteract,
 		bp,
 		catalog,
-		frameUrl
+		frameUrl,
+		viewportHeight: frameViewportHeight
 	});
 	latest.current = {
 		configuration: configuration.active,
 		dark,
-		interact,
+		interact: frameInteract,
 		bp,
 		catalog,
-		frameUrl
+		frameUrl,
+		viewportHeight: frameViewportHeight
 	};
-	const register = useCallback((id, frame) => {
-		if (frame) frames.current.set(id, frame);
-		else frames.current.delete(id);
+	const register = useCallback((id_0, frame) => {
+		if (frame) frames.current.set(id_0, frame);
+		else frames.current.delete(id_0);
 	}, []);
 	const paint = useCallback(() => {
 		if (world.current) {
@@ -2005,16 +1681,16 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 			paint();
 		});
 	}, [paint]);
-	const send = useCallback((id_0, type = "configuration") => {
-		const frame_0 = frames.current.get(id_0);
+	const send = useCallback((id_1, type = "configuration") => {
+		const frame_0 = frames.current.get(id_1);
 		if (!frame_0?.contentWindow) return;
 		const current_0 = latest.current;
 		try {
 			frame_0.contentWindow.postMessage({
 				protocol: canvasProtocol,
-				id: id_0,
+				id: id_1,
 				token,
-				viewportHeight: current_0.bp.height,
+				viewportHeight: current_0.viewportHeight,
 				type,
 				configuration: current_0.configuration,
 				revision: revision.current,
@@ -2025,10 +1701,10 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 			setNotice("This configuration could not be sent to the page. Check for non-serializable values.");
 		}
 	}, [token]);
-	const focusPage = useCallback((id_1) => {
-		const node_0 = nodeMap.get(id_1), view = viewport.current;
+	const focusPage = useCallback((id_2) => {
+		const node_0 = nodeMap.get(id_2), view = viewport.current;
 		if (!node_0 || !view) return;
-		setSelected(id_1);
+		setSelected(id_2);
 		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;
@@ -2112,7 +1788,7 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	useEffect(() => {
 		const frame_2 = requestAnimationFrame(() => {
 			revision.current++;
-			for (const id_2 of frames.current.keys()) send(id_2);
+			for (const id_3 of frames.current.keys()) send(id_3);
 		});
 		return () => cancelAnimationFrame(frame_2);
 	}, [
@@ -2121,8 +1797,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		send
 	]);
 	useEffect(() => {
-		for (const id_3 of frames.current.keys()) send(id_3, "mode");
-	}, [interact, send]);
+		for (const id_4 of frames.current.keys()) send(id_4, "mode");
+	}, [frameInteract, send]);
 	useEffect(() => {
 		paint();
 		const element = viewport.current;
@@ -2269,11 +1945,11 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		}
 		if (event_3.currentTarget.hasPointerCapture(event_3.pointerId)) event_3.currentTarget.releasePointerCapture(event_3.pointerId);
 	};
-	const onLoad = useCallback((id_4, frame_3) => {
-		if (frames.current.get(id_4) !== frame_3) return;
-		startupRef.current.complete(startupRef.current.keys.get(id_4));
-		send(id_4);
-		send(id_4, "mode");
+	const onLoad = useCallback((id_5, frame_3) => {
+		if (frames.current.get(id_5) !== frame_3) return;
+		startupRef.current.complete(startupRef.current.keys.get(id_5));
+		send(id_5);
+		send(id_5, "mode");
 	}, [send]);
 	useEffect(() => {
 		const timer = setTimeout(() => setRuntime((current_5) => {
@@ -2456,7 +2132,7 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 											"/",
 											nodes.length,
 											" ",
-											content === "components" ? "sections" : "pages",
+											content === "components" ? "components" : "pages",
 											" ready"
 										]
 									})
@@ -2500,14 +2176,21 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 									children: /* @__PURE__ */ jsx(PanelLeft, { size: 18 })
 								})
 							}),
-							/* @__PURE__ */ jsx("div", {
+							/* @__PURE__ */ jsxs("div", {
 								ref: world,
 								className: "povio-canvas-world",
 								style: {
 									width: width_0,
 									height: height_0
 								},
-								children: nodes.map((node_5, index) => {
+								children: [sections.map((section) => /* @__PURE__ */ jsx("h2", {
+									className: "povio-canvas-section-title",
+									style: {
+										left: section.x,
+										top: section.y
+									},
+									children: section.title
+								}, section.title)), nodes.map((node_5, index) => {
 									const state = runtime[`${bp.id}:${node_5.id}:${node_5.href ?? ""}`] ?? {};
 									let source = "";
 									let originError = false;
@@ -2558,7 +2241,7 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 												children: [
 													/* @__PURE__ */ jsx("strong", { children: node_5.title }),
 													/* @__PURE__ */ jsxs("span", { children: [
-														bp.width,
+														node_5.width,
 														" × ",
 														Math.round(node_5.height).toLocaleString()
 													] }),
@@ -2627,20 +2310,20 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 											}) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
 												/* @__PURE__ */ jsx(PageFrame, {
 													id: node_5.id,
-													interact,
+													interact: frameInteract,
 													inspect: inspectMode,
 													src: source,
-													width: bp.width,
+													width: node_5.width,
 													height: node_5.height,
 													name: `${canvasProtocol}:${JSON.stringify({
 														id: node_5.id,
 														token,
-														viewportHeight: bp.height
+														viewportHeight: frameViewportHeight
 													})}`,
 													onLoad,
 													register
 												}, `${documentGeneration}:${bp.id}:${source}:${reload[node_5.id] ?? 0}`),
-												!interact && /* @__PURE__ */ jsx("button", {
+												!frameInteract && /* @__PURE__ */ jsx("button", {
 													type: "button",
 													className: "povio-canvas-frame-cover",
 													tabIndex: 0,
@@ -2680,7 +2363,7 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 											})
 										]
 									}, node_5.id);
-								})
+								})]
 							}),
 							!nodes.length && /* @__PURE__ */ jsx("div", {
 								className: "povio-canvas-empty",
@@ -2779,12 +2462,12 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 												id: item_4.id,
 												label: `${item_4.label} · ${item_4.width}px`
 											})),
-											onChange: (id_5) => {
-												if (id_5 === null || id_5 === bp.id) return;
+											onChange: (id_6) => {
+												if (id_6 === null || id_6 === bp.id) return;
 												setRuntime({});
 												setManifest((m_2) => ({
 													...m_2,
-													breakpoint: String(id_5)
+													breakpoint: String(id_6)
 												}));
 											}
 										})
@@ -3147,7 +2830,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-D6Mh_G3q.js"));
+const CanvasComponentsFrame = lazy(() => import("./CanvasComponentsFrame-Dp0oDDoH.js"));
 /** Ready-made route page. Mount beneath the app's UIConfigurationProvider. */
 function AppCanvasPage(t0) {
 	const $ = c(24);
@@ -3205,10 +2888,10 @@ function AppCanvasPage(t0) {
 	if (isAppCanvasFrame()) {
 		let t7;
 		if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-			const group = new URLSearchParams(window.location.search).get(componentsParam);
-			t7 = group ? /* @__PURE__ */ jsx(Suspense, {
+			const component = new URLSearchParams(window.location.search).get(componentsParam);
+			t7 = component ? /* @__PURE__ */ jsx(Suspense, {
 				fallback: null,
-				children: /* @__PURE__ */ jsx(CanvasComponentsFrame, { group })
+				children: /* @__PURE__ */ jsx(CanvasComponentsFrame, { id: component })
 			}) : null;
 			$[14] = t7;
 		} else t7 = $[14];
@@ -3216,7 +2899,7 @@ function AppCanvasPage(t0) {
 	}
 	let t7;
 	if ($[15] !== canvasPath) {
-		t7 = (group_0) => `${canvasPath}?${componentsParam}=${encodeURIComponent(group_0)}`;
+		t7 = (component_0) => `${canvasPath}?${componentsParam}=${encodeURIComponent(component_0)}`;
 		$[15] = canvasPath;
 		$[16] = t7;
 	} else t7 = $[16];