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

package/dist/{AppCanvasPage-BIFYeEeS.d.ts → AppCanvasPage-BTmt8poT.d.ts}

@@ -64,9 +64,11 @@ interface AppCanvasProps {
   breakpoints?: CanvasBreakpoint[];
   storageKey?: string;
   frameUrl?: (page: CanvasPage) => string;
+  /** URL of a frame that renders one component gallery section; enables the Components artboards. */
+  componentsHref?: (group: string) => string;
 }
 /** Live route artboards. The camera transforms only the canvas, never the iframe viewport width. */
-declare function AppCanvas({ router, examples, exclude, excludePaths, breakpoints, storageKey, frameUrl }: AppCanvasProps): import("react").JSX.Element;
+declare function AppCanvas({ router, examples, exclude, excludePaths, breakpoints, storageKey, frameUrl, componentsHref }: AppCanvasProps): import("react").JSX.Element;
 //#endregion
 //#region src/app-canvas/AppCanvasPage.d.ts
 declare const APP_CANVAS_PATH = "/_canvas";

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

@@ -1,11 +1,13 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { a as getBoxHighlights, d as Pin, f as Moon, l as useUIConfiguration, o as HighlightOverlay, r as inspectElement, s as InspectorDetails, t as UIConfigurationModal, u as Sun } from "./UIConfigurator-CTlq-hrG.js";
+import { a as 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 { t as ChevronDown } from "./chevron-down-B4Pr8bD3.js";
 import { t as ChevronRight } from "./chevron-right-3nKJR5Bb.js";
 import { i as Search } from "./selectDesktop.cva-CHAMxhfO.js";
 import { t as Upload } from "./upload-CXU83BJ4.js";
 import { t as X } from "./x-B6vfz8Ps.js";
-import { memo, useCallback, useEffect, useMemo, useReducer, useRef, useState } from "react";
+import { c as 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 { 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
@@ -542,10 +544,8 @@ function PageLayers({ frame, title, selected, onSelect }) {
 }
 //#endregion
 //#region src/app-canvas/CanvasInspector.tsx
-const unknownToken = () => false;
-const readOnly = () => {};
 /** Inspect the live iframe DOM using its own, unscaled viewport coordinates. */
-function useCanvasInspector(enabled, generation) {
+function useCanvasInspector(enabled, generation, isKnown) {
 	const [selection, setSelection] = useState(null);
 	const [measurement, setMeasurement] = useState(null);
 	const [pinned, setPinned] = useState(false);
@@ -632,7 +632,7 @@ function useCanvasInspector(enabled, generation) {
 				return;
 			}
 			const rect = element_0.getBoundingClientRect();
-			const snapshot = inspectElement(element_0, unknownToken);
+			const snapshot = inspectElement(element_0, isKnown);
 			const details = highlightKey ? getBoxHighlights(element_0, highlightKey) : null;
 			const spacing = highlightKey ? [] : [
 				"padding.top",
@@ -726,7 +726,8 @@ function useCanvasInspector(enabled, generation) {
 		enabled,
 		selection,
 		highlightKey,
-		clear
+		clear,
+		isKnown
 	]);
 	return {
 		selection,
@@ -748,8 +749,8 @@ function useCanvasInspector(enabled, generation) {
 	};
 }
 function CanvasInspectorPanel(t0) {
-	const $ = c(21);
-	const { inspector, onClose } = t0;
+	const $ = c(22);
+	const { inspector, onClose, onSelectToken } = t0;
 	let t1;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = /* @__PURE__ */ jsx("strong", { children: "Inspector view" });
@@ -812,10 +813,10 @@ function CanvasInspectorPanel(t0) {
 		$[13] = t9;
 	} else t9 = $[13];
 	let t10;
-	if ($[14] !== inspector.highlight || $[15] !== inspector.measurement) {
+	if ($[14] !== inspector.highlight || $[15] !== inspector.measurement || $[16] !== onSelectToken) {
 		t10 = inspector.measurement ? /* @__PURE__ */ jsx(InspectorDetails, {
 			snapshot: inspector.measurement.snapshot,
-			onSelect: readOnly,
+			onSelect: onSelectToken,
 			onHighlight: inspector.highlight
 		}) : /* @__PURE__ */ jsx("p", {
 			className: "povio-canvas-inspect-hint",
@@ -823,10 +824,11 @@ function CanvasInspectorPanel(t0) {
 		});
 		$[14] = inspector.highlight;
 		$[15] = inspector.measurement;
-		$[16] = t10;
-	} else t10 = $[16];
+		$[16] = onSelectToken;
+		$[17] = t10;
+	} else t10 = $[17];
 	let t11;
-	if ($[17] !== t10 || $[18] !== t7 || $[19] !== t9) {
+	if ($[18] !== t10 || $[19] !== t7 || $[20] !== t9) {
 		t11 = /* @__PURE__ */ jsxs("aside", {
 			className: "studio-inspector-panel povio-canvas-inspector",
 			"aria-label": "Inspector view",
@@ -836,11 +838,11 @@ function CanvasInspectorPanel(t0) {
 				t10
 			]
 		});
-		$[17] = t10;
-		$[18] = t7;
-		$[19] = t9;
-		$[20] = t11;
-	} else t11 = $[20];
+		$[18] = t10;
+		$[19] = t7;
+		$[20] = t9;
+		$[21] = t11;
+	} else t11 = $[21];
 	return t11;
 }
 function CanvasInspectionOverlay(t0) {
@@ -1155,6 +1157,9 @@ const defaultCanvasBreakpoints = [
 ];
 const emptyExamples = {};
 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 {
@@ -1211,7 +1216,7 @@ const PageFrame = memo(function PageFrame(t0) {
 	return t6;
 });
 /** Live route artboards. The camera transforms only the canvas, never the iframe viewport width. */
-function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, excludePaths = emptyExclude, breakpoints = defaultCanvasBreakpoints, storageKey = "povio-app-canvas", frameUrl }) {
+function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, excludePaths = emptyExclude, breakpoints = defaultCanvasBreakpoints, storageKey = "povio-app-canvas", frameUrl, componentsHref }) {
 	const configuration = useUIConfiguration();
 	const [manifest, setManifest] = useState(() => readManifest(storageKey));
 	const [runtime, setRuntime] = useState({});
@@ -1219,6 +1224,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	const [interact, setInteract] = useState(false);
 	const [inspectMode, setInspectMode] = useState(false);
 	const [dark, setDark] = useState(false);
+	/** The canvas shows either the app's pages or the component gallery's sections, as artboards either way. */
+	const [content, setContent] = useState("pages");
 	const [mobilePanel, setMobilePanel] = useState(null);
 	const [query, setQuery] = useState("");
 	const [notice, setNotice] = useState("");
@@ -1237,8 +1244,11 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	const pointer = useRef(null);
 	const cameraRevision = useRef(0);
 	const bp = breakpoints.find((item) => item.id === manifest.breakpoint) ?? breakpoints[breakpoints.length - 1] ?? defaultCanvasBreakpoints[2];
-	const inspector = useCanvasInspector(inspectMode, `${bp.id}:${documentGeneration}:${JSON.stringify(reload)}`);
-	const catalog = useMemo(() => discoverCanvasPages(router, {
+	const 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, {
 		examples: {
 			...examples,
 			...manifest.examples
@@ -1252,6 +1262,15 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		exclude,
 		excludePaths
 	]);
+	const componentCatalog = useMemo(() => componentsHref ? componentArtboards.map((group) => ({
+		id: `components:${group.toLowerCase()}`,
+		title: group,
+		path: group,
+		href: componentsHref(group),
+		missingParams: [],
+		kind: "page"
+	})) : [], [componentsHref]);
+	const catalog = content === "components" && componentCatalog.length ? componentCatalog : pageCatalog;
 	const startupKeys = useMemo(() => new Map(catalog.filter((page) => page.href).map((page_0) => [page_0.id, `${documentGeneration}:${bp.id}:${page_0.id}:${page_0.href}:${reload[page_0.id] ?? 0}`])), [
 		catalog,
 		documentGeneration,
@@ -1300,7 +1319,11 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		else frames.current.delete(id);
 	}, []);
 	const paint = useCallback(() => {
-		if (world.current) world.current.style.transform = `translate3d(${camera.current.x}px,${camera.current.y}px,0) scale(${camera.current.zoom})`;
+		if (world.current) {
+			world.current.style.transform = `translate3d(${camera.current.x}px,${camera.current.y}px,0) scale(${camera.current.zoom})`;
+			const zoom = String(camera.current.zoom);
+			if (world.current.style.getPropertyValue("--canvas-zoom") !== zoom) world.current.style.setProperty("--canvas-zoom", zoom);
+		}
 		if (zoomOutput.current) zoomOutput.current.textContent = `${Math.round(camera.current.zoom * 1e3) / 10}%`;
 		const canvas = viewport.current?.closest(".povio-app-canvas");
 		if (canvas) canvas.setAttribute("data-camera-revision", String(++cameraRevision.current));
@@ -1447,7 +1470,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 				const x = event_0.clientX - box.left, y = event_0.clientY - box.top;
 				const previous_0 = camera.current.zoom;
 				const unit = event_0.deltaMode === 1 ? 16 : event_0.deltaMode === 2 ? element.clientHeight : 1;
-				const next_0 = Math.max(.005, Math.min(2, previous_0 * Math.exp(-event_0.deltaY * unit * .01)));
+				const delta = Math.max(-40, Math.min(ZOOM_DELTA_LIMIT, event_0.deltaY * unit));
+				const next_0 = Math.max(.005, Math.min(2, previous_0 * Math.exp(-delta * ZOOM_SENSITIVITY)));
 				camera.current.x = x - (x - camera.current.x) * next_0 / previous_0;
 				camera.current.y = y - (y - camera.current.y) * next_0 / previous_0;
 				camera.current.zoom = next_0;
@@ -1457,9 +1481,14 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 			}
 			schedulePaint();
 		};
+		const unscroll = () => {
+			if (element.scrollTop || element.scrollLeft) element.scrollTo(0, 0);
+		};
 		element.addEventListener("wheel", wheel, { passive: false });
+		element.addEventListener("scroll", unscroll);
 		return () => {
 			element.removeEventListener("wheel", wheel);
+			element.removeEventListener("scroll", unscroll);
 			if (pendingCamera.current !== null) cancelAnimationFrame(pendingCamera.current);
 			pendingCamera.current = null;
 		};
@@ -1473,13 +1502,22 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 		camera.current.y = 40 - top * camera.current.zoom;
 		paint();
 	};
+	const fitRef = useRef(fit);
+	fitRef.current = fit;
+	const switchContent = (next_1) => {
+		if (next_1 === content) return;
+		setContent(next_1);
+		setSelected(null);
+		setQuery("");
+		requestAnimationFrame(() => fitRef.current());
+	};
 	const zoomTo = (value) => {
 		const view_0 = viewport.current;
 		if (!view_0) return;
-		const previous_1 = camera.current.zoom, next_1 = Math.max(.005, Math.min(2, value));
-		camera.current.x = view_0.clientWidth / 2 - (view_0.clientWidth / 2 - camera.current.x) * next_1 / previous_1;
-		camera.current.y = view_0.clientHeight / 2 - (view_0.clientHeight / 2 - camera.current.y) * next_1 / previous_1;
-		camera.current.zoom = next_1;
+		const previous_1 = camera.current.zoom, next_2 = Math.max(.005, Math.min(2, value));
+		camera.current.x = view_0.clientWidth / 2 - (view_0.clientWidth / 2 - camera.current.x) * next_2 / previous_1;
+		camera.current.y = view_0.clientHeight / 2 - (view_0.clientHeight / 2 - camera.current.y) * next_2 / previous_1;
+		camera.current.zoom = next_2;
 		paint();
 	};
 	const stepZoom = (direction) => {
@@ -1497,8 +1535,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 			2
 		];
 		const current_1 = camera.current.zoom;
-		const next_2 = direction === 1 ? stops.find((value_0) => value_0 > current_1 + 1e-4) : [...stops].reverse().find((value_1) => value_1 < current_1 - 1e-4);
-		if (next_2 !== void 0) zoomTo(next_2);
+		const 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);
+		if (next_3 !== void 0) zoomTo(next_3);
 	};
 	const startPan = (event_1) => {
 		if (inspectMode && event_1.target.closest(".povio-canvas-frame-cover")) return;
@@ -1558,15 +1596,15 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 	}, [send]);
 	useEffect(() => {
 		const timer = setTimeout(() => setRuntime((current_4) => {
-			const next_3 = { ...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_3[key_1]?.ready) next_3[key_1] = {
-					...next_3[key_1],
+				if (page_3.href && frames.current.has(page_3.id) && !next_4[key_1]?.ready) next_4[key_1] = {
+					...next_4[key_1],
 					timedOut: true
 				};
 			}
-			return next_3;
+			return next_4;
 		}), 15e3);
 		return () => clearTimeout(timer);
 	}, [
@@ -1624,10 +1662,23 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 						"aria-label": "Page catalog",
 						children: [
 							/* @__PURE__ */ jsxs("div", {
-								className: "povio-canvas-brand",
-								children: [/* @__PURE__ */ jsx("strong", { children: "Pages" }), /* @__PURE__ */ jsx("span", {
-									className: "povio-canvas-page-count",
-									children: nodes.length
+								className: "povio-canvas-brand povio-canvas-content-switch",
+								role: "group",
+								"aria-label": "Canvas content",
+								children: [/* @__PURE__ */ jsxs("button", {
+									"aria-pressed": content === "pages",
+									onClick: () => switchContent("pages"),
+									children: ["Pages", /* @__PURE__ */ jsx("span", {
+										className: "povio-canvas-page-count",
+										children: pageCatalog.length
+									})]
+								}), !!componentCatalog.length && /* @__PURE__ */ jsxs("button", {
+									"aria-pressed": content === "components",
+									onClick: () => switchContent("components"),
+									children: ["Components", /* @__PURE__ */ jsx("span", {
+										className: "povio-canvas-page-count",
+										children: componentCatalog.length
+									})]
 								})]
 							}),
 							/* @__PURE__ */ jsxs("div", {
@@ -1635,8 +1686,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 								children: [
 									/* @__PURE__ */ jsx(Search, { size: 14 }),
 									/* @__PURE__ */ jsx("input", {
-										"aria-label": "Find page",
-										placeholder: "Find page…",
+										"aria-label": content === "components" ? "Find component section" : "Find page",
+										placeholder: content === "components" ? "Find section…" : "Find page…",
 										value: query,
 										onChange: (event_5) => setQuery(event_5.target.value)
 									}),
@@ -1705,7 +1756,9 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 											ready,
 											"/",
 											nodes.length,
-											" pages ready"
+											" ",
+											content === "components" ? "sections" : "pages",
+											" ready"
 										]
 									})
 								]
@@ -2050,7 +2103,8 @@ function AppCanvas({ router, examples = emptyExamples, exclude = emptyExclude, e
 					}),
 					inspectMode && /* @__PURE__ */ jsx(CanvasInspectorPanel, {
 						inspector,
-						onClose: () => setInspectMode(false)
+						onClose: () => setInspectMode(false),
+						onSelectToken: configuration.revealToken
 					})
 				]
 			}),
@@ -2351,9 +2405,12 @@ function AppCanvasFrameBridge({ href }) {
 //#endregion
 //#region src/app-canvas/AppCanvasPage.tsx
 const APP_CANVAS_PATH = "/_canvas";
+/** Must match `componentsFrameParam`; kept inline so the canvas page does not load the gallery eagerly. */
+const componentsParam = "povio-components";
+const CanvasComponentsFrame = lazy(() => import("./CanvasComponentsFrame-C0Sf9RcC.js"));
 /** Ready-made route page. Mount beneath the app's UIConfigurationProvider. */
 function AppCanvasPage(t0) {
-	const $ = c(17);
+	const $ = c(21);
 	let excludePaths;
 	let props;
 	let t1;
@@ -2389,33 +2446,52 @@ function AppCanvasPage(t0) {
 		$[10] = t4;
 	} else t4 = $[10];
 	const exclusions = t4;
-	if (isAppCanvasFrame()) return null;
+	if (isAppCanvasFrame()) {
+		let t5;
+		if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+			const group = new URLSearchParams(window.location.search).get(componentsParam);
+			t5 = group ? /* @__PURE__ */ jsx(Suspense, {
+				fallback: null,
+				children: /* @__PURE__ */ jsx(CanvasComponentsFrame, { group })
+			}) : null;
+			$[11] = t5;
+		} else t5 = $[11];
+		return t5;
+	}
 	let t5;
-	if ($[11] !== exclusions || $[12] !== props) {
-		t5 = /* @__PURE__ */ jsx(AppCanvas, {
-			...props,
-			excludePaths: exclusions
-		});
-		$[11] = exclusions;
-		$[12] = props;
+	if ($[12] !== canvasPath) {
+		t5 = (group_0) => `${canvasPath}?${componentsParam}=${encodeURIComponent(group_0)}`;
+		$[12] = canvasPath;
 		$[13] = t5;
 	} else t5 = $[13];
 	let t6;
-	if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(UIConfigurationModal, {});
-		$[14] = t6;
-	} else t6 = $[14];
+	if ($[14] !== exclusions || $[15] !== props || $[16] !== t5) {
+		t6 = /* @__PURE__ */ jsx(AppCanvas, {
+			...props,
+			excludePaths: exclusions,
+			componentsHref: t5
+		});
+		$[14] = exclusions;
+		$[15] = props;
+		$[16] = t5;
+		$[17] = t6;
+	} else t6 = $[17];
 	let t7;
-	if ($[15] !== t5) {
-		t7 = /* @__PURE__ */ jsxs("div", {
+	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", {
 			className: "povio-app-canvas-page",
 			"aria-label": "App canvas page",
-			children: [t5, t6]
+			children: [t6, t7]
 		});
-		$[15] = t5;
-		$[16] = t7;
-	} else t7 = $[16];
-	return t7;
+		$[19] = t6;
+		$[20] = t8;
+	} else t8 = $[20];
+	return t8;
 }
 //#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 };

package/dist/CanvasComponentsFrame-C0Sf9RcC.js

@@ -0,0 +1,21 @@
+import { ComponentArtboard } from "./ComponentGallery-DDSqnm9f.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+//#region src/app-canvas/CanvasComponentsFrame.tsx
+/** The document of a Components artboard: one gallery section, themed by the configuration the canvas sends. */
+function CanvasComponentsFrame(t0) {
+	const $ = c(2);
+	const { group } = t0;
+	let t1;
+	if ($[0] !== group) {
+		t1 = /* @__PURE__ */ jsx("main", {
+			className: "studio-sample povio-canvas-components-frame",
+			children: /* @__PURE__ */ jsx(ComponentArtboard, { group })
+		});
+		$[0] = group;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+//#endregion
+export { CanvasComponentsFrame as default };

package/dist/{ComponentGallery-CMFrbwEN.js → ComponentGallery-DDSqnm9f.js}

@@ -1,5 +1,5 @@
 import { t as createLucideIcon } from "./createLucideIcon-LcezOE4z.js";
-import { i as inspectTokens } from "./UIConfigurator-CTlq-hrG.js";
+import { i as inspectTokens } from "./UIConfigurator-C_2kgJtm.js";
 import { n as ArrowLeft } from "./DropdownMenu-5jmtgLXd.js";
 import { i as ArrowRight } from "./DropdownMenuDesktop-Cl9gZVq0.js";
 import { n as Italic, r as Bold, t as Underline } from "./underline-66hmELxa.js";
@@ -49,6 +49,7 @@ import { t as Toast } from "./Toast-DtG3pA61.js";
 import { t as Table } from "./Table-BN2_J_Ne.js";
 import { Link } from "./components/link.js";
 import { Badge } from "./components/badge.js";
+import { n as galleryGroups } from "./groups-oQmSeqXn.js";
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -526,17 +527,6 @@ function InspectLabel(t0) {
 }
 //#endregion
 //#region src/configurator/gallery/demos.tsx
-const galleryGroups = [
-	"Buttons",
-	"Inputs",
-	"Selection",
-	"Files",
-	"Feedback",
-	"Text",
-	"Navigation",
-	"Overlays",
-	"Data"
-];
 const noop = () => {};
 const menuItems = [
 	{
@@ -2249,7 +2239,7 @@ function DashboardScreen() {
 	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
 		t3 = /* @__PURE__ */ jsx("div", {
 			className: "studio-layout-stats",
-			children: stats.map(_temp)
+			children: stats.map(_temp$1)
 		});
 		t4 = /* @__PURE__ */ jsx(Table, {
 			items: projects,
@@ -2295,7 +2285,7 @@ function DashboardScreen() {
 	return t6;
 }
 /** A sign-in screen: centered form with email, password, remember me, a primary and a secondary action. */
-function _temp(t0) {
+function _temp$1(t0) {
 	const { label, value, trend } = t0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "studio-layout-stat",
@@ -3400,6 +3390,77 @@ function ZoomedDemo(t0) {
 	} else t10 = $[21];
 	return t10;
 }
+/** One gallery section on its own, live and uninspected, for an App Canvas artboard. */
+function ComponentArtboard(t0) {
+	const $ = c(13);
+	const { group } = t0;
+	if (group === "Layouts") {
+		let t1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1 = /* @__PURE__ */ jsx(LayoutPreview, {});
+			$[0] = t1;
+		} else t1 = $[0];
+		return t1;
+	}
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[1] !== group) {
+		const items = demos.filter((demo) => demo.group === group);
+		t3 = "studio-gallery-group";
+		t4 = group;
+		t1 = "studio-gallery-grid";
+		t2 = items.map(_temp);
+		$[1] = group;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+	}
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: t1,
+			children: t2
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t5;
+	} else t5 = $[8];
+	let t6;
+	if ($[9] !== t3 || $[10] !== t4 || $[11] !== t5) {
+		t6 = /* @__PURE__ */ jsx("section", {
+			className: t3,
+			"aria-label": t4,
+			children: t5
+		});
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+		$[12] = t6;
+	} else t6 = $[12];
+	return t6;
+}
+function _temp(demo_0) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: `studio-gallery-card ${demo_0.wide ? "is-wide" : ""}`,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "studio-gallery-card-title",
+			children: demo_0.title
+		}), /* @__PURE__ */ jsx(PortalHere, { children: (portalRef) => /* @__PURE__ */ jsx("div", {
+			ref: portalRef,
+			className: "studio-gallery-demo",
+			"data-inspector-name": demo_0.title,
+			children: demo_0.render()
+		}) })]
+	}, demo_0.id);
+}
 /** Every Povio UI component in one scrollable list; clicking a card zooms it into the token inspector. */
 function ComponentGallery(t0) {
 	const $ = c(14);
@@ -3510,4 +3571,4 @@ function ComponentGallery(t0) {
 	return t7;
 }
 //#endregion
-export { ComponentGallery as default };
+export { ComponentArtboard, ComponentGallery as default };