camox 0.48.0 → 0.52.1

package/dist/features/canvas/useDiscoveredPreviewPaths.js

@@ -1,19 +1,24 @@
 import { useProjectUuid } from "../../lib/auth.js";
-import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
 import { reads, useReadQueries } from "../../lib/studio-reads.js";
+import { useLayoutDefinitions } from "../../lib/studio-definitions.js";
+import { routeSegments } from "../../core/derivedRoutes.js";
 import { c } from "react/compiler-runtime";
 
 //#region src/features/canvas/useDiscoveredPreviewPaths.ts
-/** Each derived layout's first discovered page, keyed by layout id. */
+/**
+* Each derived layout's first discovered page, keyed by layout id. Only a layout with params
+* needs one. Whether it discovers pages is its code's to say: the runtime runs it, and answers
+* no page for a layout without routes.
+*/
 function useDiscoveredPreviewPaths(runtimeBasePath) {
 	const $ = c(11);
 	const projectUuid = useProjectUuid();
-	const t0 = useCamoxApp();
+	const t0 = useLayoutDefinitions();
 	let ids;
 	let t1;
 	let t2;
 	if ($[0] !== projectUuid || $[1] !== runtimeBasePath || $[2] !== t0) {
-		ids = t0.getLayouts().filter(_temp).map(_temp2);
+		ids = t0.filter(_temp2).map(_temp3);
 		t1 = useReadQueries;
 		let t3;
 		if ($[6] !== projectUuid || $[7] !== runtimeBasePath) {
@@ -49,13 +54,15 @@ function useDiscoveredPreviewPaths(runtimeBasePath) {
 	} else t3 = $[10];
 	return t1(t2, t3);
 }
-function _temp2(t0) {
-	const { _internal: t1 } = t0;
-	const { id } = t1;
+function _temp3(t0) {
+	const { id } = t0;
 	return id;
 }
-function _temp(layout) {
-	return layout._internal.kind === "derived" && layout._internal.routes;
+function _temp2(layout) {
+	return layout.kind === "derived" && routeSegments(layout.id).some(_temp);
+}
+function _temp(segment) {
+	return segment.startsWith("$");
 }
 
 //#endregion

package/dist/features/content/ContentAssets.js

@@ -1,6 +1,5 @@
 import { useProjectUuid } from "../../lib/auth.js";
 import { reads, useReadQuery } from "../../lib/studio-reads.js";
-import { checkIfInputFocused } from "../../lib/utils.js";
 import { UploadDropZone } from "./components/UploadDropZone.js";
 import { UploadProgressDrawer } from "./components/UploadProgressDrawer.js";
 import { useFileUpload } from "../../hooks/use-file-upload.js";
@@ -10,12 +9,13 @@ import { AssetCard } from "./components/AssetCard.js";
 import { useMarqueeSelection } from "../../hooks/use-marquee-selection.js";
 import { AssetCardSkeleton } from "./components/AssetCardSkeleton.js";
 import { c } from "react/compiler-runtime";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMutation } from "@tanstack/react-query";
 import { Button } from "@camox/ui/button";
 import { PanelContent } from "@camox/ui/panel";
 import { ImageIcon, UploadIcon } from "lucide-react";
+import { useHotkey } from "@tanstack/react-hotkeys";
 import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 
 //#region src/features/content/ContentAssets.tsx
@@ -74,31 +74,27 @@ const ContentAssets = () => {
 		$[10] = t8;
 	} else t8 = $[10];
 	const { selectionRect, didDragRef, handlers } = useMarqueeSelection(containerRef, t8);
-	let t10;
 	let t9;
-	if ($[11] !== lightboxFileId) {
-		t9 = () => {
-			const handleKeyDown = (event) => {
-				if (event.key !== "Escape") return;
-				if (lightboxFileId !== null) return;
-				if (checkIfInputFocused()) return;
-				setSelectedIds(_temp);
-			};
-			document.addEventListener("keydown", handleKeyDown);
-			return () => document.removeEventListener("keydown", handleKeyDown);
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = () => setSelectedIds(_temp);
+		$[11] = t9;
+	} else t9 = $[11];
+	const t10 = lightboxFileId === null;
+	let t11;
+	if ($[12] !== t10) {
+		t11 = {
+			enabled: t10,
+			ignoreInputs: true,
+			preventDefault: false,
+			stopPropagation: false
 		};
-		t10 = [lightboxFileId];
-		$[11] = lightboxFileId;
 		$[12] = t10;
-		$[13] = t9;
-	} else {
-		t10 = $[12];
-		t9 = $[13];
-	}
-	useEffect(t9, t10);
-	let t11;
+		$[13] = t11;
+	} else t11 = $[13];
+	useHotkey("Escape", t9, t11);
+	let t12;
 	if ($[14] !== didDragRef) {
-		t11 = () => {
+		t12 = () => {
 			if (didDragRef.current) {
 				didDragRef.current = false;
 				return;
@@ -106,20 +102,20 @@ const ContentAssets = () => {
 			setSelectedIds(/* @__PURE__ */ new Set());
 		};
 		$[14] = didDragRef;
-		$[15] = t11;
-	} else t11 = $[15];
-	let t12;
+		$[15] = t12;
+	} else t12 = $[15];
+	let t13;
 	if ($[16] !== files) {
-		t12 = files === void 0 && /* @__PURE__ */ jsx("div", {
+		t13 = files === void 0 && /* @__PURE__ */ jsx("div", {
 			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
 			children: Array.from({ length: 12 }, _temp2)
 		});
 		$[16] = files;
-		$[17] = t12;
-	} else t12 = $[17];
-	let t13;
+		$[17] = t13;
+	} else t13 = $[17];
+	let t14;
 	if ($[18] !== files?.length || $[19] !== uploadFiles) {
-		t13 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
+		t14 = files?.length === 0 && /* @__PURE__ */ jsx("div", {
 			className: "flex h-full items-center justify-center",
 			children: /* @__PURE__ */ jsxs("div", {
 				className: "flex max-w-sm flex-col items-center gap-2 text-center",
@@ -150,9 +146,9 @@ const ContentAssets = () => {
 								type: "file",
 								className: "sr-only",
 								multiple: true,
-								onChange: (event_0) => {
-									if (event_0.target.files) uploadFiles(event_0.target.files);
-									event_0.target.value = "";
+								onChange: (event) => {
+									if (event.target.files) uploadFiles(event.target.files);
+									event.target.value = "";
 								}
 							})
 						]
@@ -162,11 +158,11 @@ const ContentAssets = () => {
 		});
 		$[18] = files?.length;
 		$[19] = uploadFiles;
-		$[20] = t13;
-	} else t13 = $[20];
-	let t14;
+		$[20] = t14;
+	} else t14 = $[20];
+	let t15;
 	if ($[21] !== files || $[22] !== selectedIds) {
-		t14 = files && files.length > 0 && /* @__PURE__ */ jsx("div", {
+		t15 = files && files.length > 0 && /* @__PURE__ */ jsx("div", {
 			className: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-4",
 			children: files.map((file) => /* @__PURE__ */ jsx(AssetCard, {
 				file,
@@ -184,11 +180,11 @@ const ContentAssets = () => {
 		});
 		$[21] = files;
 		$[22] = selectedIds;
-		$[23] = t14;
-	} else t14 = $[23];
-	let t15;
+		$[23] = t15;
+	} else t15 = $[23];
+	let t16;
 	if ($[24] !== selectionRect) {
-		t15 = selectionRect && /* @__PURE__ */ jsx("div", {
+		t16 = selectionRect && /* @__PURE__ */ jsx("div", {
 			className: "border-primary bg-primary/10 pointer-events-none absolute z-50 border",
 			style: {
 				left: selectionRect.left,
@@ -198,61 +194,61 @@ const ContentAssets = () => {
 			}
 		});
 		$[24] = selectionRect;
-		$[25] = t15;
-	} else t15 = $[25];
-	let t16;
-	if ($[26] !== handlers.onPointerDown || $[27] !== handlers.onPointerMove || $[28] !== handlers.onPointerUp || $[29] !== t11 || $[30] !== t12 || $[31] !== t13 || $[32] !== t14 || $[33] !== t15) {
-		t16 = /* @__PURE__ */ jsxs(PanelContent, {
+		$[25] = t16;
+	} else t16 = $[25];
+	let t17;
+	if ($[26] !== handlers.onPointerDown || $[27] !== handlers.onPointerMove || $[28] !== handlers.onPointerUp || $[29] !== t12 || $[30] !== t13 || $[31] !== t14 || $[32] !== t15 || $[33] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(PanelContent, {
 			ref: containerRef,
 			className: "relative p-4 select-none",
-			onClick: t11,
+			onClick: t12,
 			onPointerDown: handlers.onPointerDown,
 			onPointerMove: handlers.onPointerMove,
 			onPointerUp: handlers.onPointerUp,
 			children: [
-				t12,
 				t13,
 				t14,
-				t15
+				t15,
+				t16
 			]
 		});
 		$[26] = handlers.onPointerDown;
 		$[27] = handlers.onPointerMove;
 		$[28] = handlers.onPointerUp;
-		$[29] = t11;
-		$[30] = t12;
-		$[31] = t13;
-		$[32] = t14;
-		$[33] = t15;
-		$[34] = t16;
-	} else t16 = $[34];
-	let t17;
-	if ($[35] !== t16 || $[36] !== uploadFiles) {
-		t17 = /* @__PURE__ */ jsx("div", {
+		$[29] = t12;
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t15;
+		$[33] = t16;
+		$[34] = t17;
+	} else t17 = $[34];
+	let t18;
+	if ($[35] !== t17 || $[36] !== uploadFiles) {
+		t18 = /* @__PURE__ */ jsx("div", {
 			className: "flex min-h-0 min-w-0 flex-1 flex-col",
 			children: /* @__PURE__ */ jsx(UploadDropZone, {
 				onDrop: uploadFiles,
 				className: "flex min-h-0 flex-1 flex-col",
-				children: t16
+				children: t17
 			})
 		});
-		$[35] = t16;
+		$[35] = t17;
 		$[36] = uploadFiles;
-		$[37] = t17;
-	} else t17 = $[37];
-	let t18;
+		$[37] = t18;
+	} else t18 = $[37];
+	let t19;
 	if ($[38] !== clearAll || $[39] !== uploads) {
-		t18 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
+		t19 = /* @__PURE__ */ jsx(UploadProgressDrawer, {
 			uploads,
 			onClose: clearAll
 		});
 		$[38] = clearAll;
 		$[39] = uploads;
-		$[40] = t18;
-	} else t18 = $[40];
-	let t19;
+		$[40] = t19;
+	} else t19 = $[40];
+	let t20;
 	if ($[41] !== deleteFiles || $[42] !== selectedIds) {
-		t19 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
+		t20 = selectedIds.size > 0 && /* @__PURE__ */ jsxs(FloatingToolbar, {
 			className: "bottom-4 min-w-xs justify-between gap-4 pl-3",
 			children: [/* @__PURE__ */ jsxs("span", {
 				className: "text-muted-foreground",
@@ -274,11 +270,11 @@ const ContentAssets = () => {
 		});
 		$[41] = deleteFiles;
 		$[42] = selectedIds;
-		$[43] = t19;
-	} else t19 = $[43];
-	let t20;
+		$[43] = t20;
+	} else t20 = $[43];
+	let t21;
 	if ($[44] !== lightboxFileId) {
-		t20 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
+		t21 = lightboxFileId && /* @__PURE__ */ jsx(AssetLightbox, {
 			open: true,
 			onOpenChange: (open) => {
 				if (!open) setLightboxFileId(null);
@@ -286,23 +282,23 @@ const ContentAssets = () => {
 			fileId: lightboxFileId
 		});
 		$[44] = lightboxFileId;
-		$[45] = t20;
-	} else t20 = $[45];
-	let t21;
-	if ($[46] !== t17 || $[47] !== t18 || $[48] !== t19 || $[49] !== t20) {
-		t21 = /* @__PURE__ */ jsxs(Fragment, { children: [
-			t17,
+		$[45] = t21;
+	} else t21 = $[45];
+	let t22;
+	if ($[46] !== t18 || $[47] !== t19 || $[48] !== t20 || $[49] !== t21) {
+		t22 = /* @__PURE__ */ jsxs(Fragment, { children: [
 			t18,
 			t19,
-			t20
+			t20,
+			t21
 		] });
-		$[46] = t17;
-		$[47] = t18;
-		$[48] = t19;
-		$[49] = t20;
-		$[50] = t21;
-	} else t21 = $[50];
-	return t21;
+		$[46] = t18;
+		$[47] = t19;
+		$[48] = t20;
+		$[49] = t21;
+		$[50] = t22;
+	} else t22 = $[50];
+	return t22;
 };
 function _temp(prev) {
 	return prev.size === 0 ? prev : /* @__PURE__ */ new Set();

package/dist/features/page/CuratedPageContent.js

@@ -4,8 +4,8 @@ import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
 import { NormalizedDataProvider, usePageBlocks } from "../../lib/normalized-data.js";
 import { reads, useRead } from "../../lib/studio-reads.js";
 import { BlockErrorBoundary } from "../preview/components/BlockErrorBoundary.js";
-import { curatedLayoutContext } from "../../core/layoutContext.js";
 import { useLocalePath } from "../../lib/view-locale.js";
+import { curatedLayoutContext } from "../../core/layoutContext.js";
 import { SharedLayoutContent } from "./SharedLayoutContent.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";

package/dist/features/preview/CamoxPreview.d.ts

@@ -6,15 +6,17 @@ import * as React from "react";
 //#region src/features/preview/CamoxPreview.d.ts
 /** The page the Preview shows: as the server rendered it, then following edits. */
 export declare function usePreviewedPage(): PageStructure;
-export declare const PageContent: () => React.JSX.Element;
-export declare const CamoxPreview: ({ children, runtimeBasePath, derived, canvasOnly }: {
-  children: React.ReactNode;
+/**
+ * The signed-in Website Section. The studio never renders the page itself: the renderer frame,
+ * which runs the shown draft's code, renders it into the Preview's slot.
+ */
+export declare const CamoxPreview: ({ runtimeBasePath, derived, canvasOnly }: {
   runtimeBasePath?: string;
   derived?: PageRenderInput["derived"];
   canvasOnly?: PageRenderInput["canvasOnly"];
 }) => React.JSX.Element;
 /** Studio chrome is shared; only curated previews require a Camox page record. */
-export declare const PreviewShell: ({ children, pageData, derivedLayout, pageLocation, canvasOnly, runtimeBasePath }: {
+export declare const PreviewShell: ({ children, pageData, derivedLayout, pageLocation, canvasOnly, runtimeBasePath, pageShown }: {
   children: React.ReactNode;
   pageData?: ReturnType<typeof usePreviewedPage>;
   derivedLayout?: LayoutStructure;
@@ -22,6 +24,8 @@ export declare const PreviewShell: ({ children, pageData, derivedLayout, pageLoc
   pageLocation?: LocationState;
   canvasOnly?: PageRenderInput["canvasOnly"];
   runtimeBasePath?: string;
+  /** Whether the Preview's page showed: until then, a loading screen covers the Preview. */
+  pageShown?: boolean;
 }) => React.JSX.Element;
 /** Zooms out to the whole Canvas, from anywhere in the site or the Studio. */
 export declare function useShowCanvasAction(): void;