camox 0.76.0 → 0.77.0

package/dist/features/canvas/useCanvasFrame.js

@@ -1,7 +1,7 @@
 import { NavigationProvider } from "../navigation/navigation.js";
+import { FrameContext } from "../preview/components/Frame.js";
 import { createCanvasDocument, observeCanvasDocument, pauseCanvasDocument, refreshCanvasDocument } from "./canvasFrameDocument.js";
 import { useCanvasFrameInput } from "./useCanvasFrameInput.js";
-import { FrameContext } from "../preview/components/Frame.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/features/page/DerivedPageContent.js

@@ -1,7 +1,6 @@
 import { useViewLocale } from "../../lib/view-locale-context.js";
 import { usePageBlocks } from "../../lib/normalized-data.js";
-import { asCollectionItem, recordPageValues } from "../../core/recordItem.js";
-import { buildLayoutContext } from "../../core/layoutContext.js";
+import { layoutPageContext } from "../../core/layoutContext.js";
 import { SharedLayoutContent } from "./SharedLayoutContent.js";
 import { c } from "react/compiler-runtime";
 import { jsx } from "react/jsx-runtime";
@@ -30,15 +29,12 @@ function DerivedPageContent(t0) {
 		if (!layout) throw new Error(`Unknown derived layout: ${derived.layoutId}`);
 		const { page, result: t3 } = derived;
 		result = t3;
-		const record = asCollectionItem(result);
-		const collection = record && camoxApp.getCollectionById(record.collectionId);
-		t2 = buildLayoutContext(layout._internal, {
+		t2 = layoutPageContext(camoxApp, layout._internal, {
 			path: page?.path ?? "",
 			locale: locale.tag,
 			projectName: page?.projectName ?? "",
-			data: result?.data,
 			params: page?.params,
-			record: record && collection ? recordPageValues(collection, record) : void 0
+			result
 		});
 		$[2] = camoxApp;
 		$[3] = derived;
@@ -51,7 +47,7 @@ function DerivedPageContent(t0) {
 		result = $[6];
 		t2 = $[7];
 	}
-	const context = t2;
+	const { context } = t2;
 	let t3;
 	if ($[8] !== afterBlocks || $[9] !== beforeBlocks) {
 		t3 = [...beforeBlocks, ...afterBlocks];

package/dist/features/preview/components/AssetLightbox.js

@@ -6,6 +6,7 @@ import { getApiUrl, getContentWriteHeaders } from "../../../lib/api-client.js";
 import { fileMutations } from "../../../lib/queries.js";
 import { DebouncedFieldEditor } from "./DebouncedFieldEditor.js";
 import { Metadata, MetadataRow, formatRelativeTime } from "./Metadata.js";
+import { ZoomableImage } from "./ZoomableImage.js";
 import { c } from "react/compiler-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -195,19 +196,7 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 	const { data: usageCount } = useReadQuery(reads.fileUsageCount(fileId));
 	const [uploadState, setUploadState] = useState(null);
 	const replaceInputRef = useRef(null);
-	const containerRef = useRef(null);
-	const [zoomed, setZoomed] = useState(false);
-	const [zoomedWidth, setZoomedWidth] = useState(null);
-	const clickFractionRef = useRef(null);
 	const [deliveredSizes, setDeliveredSizes] = useState(null);
-	const [previousOpen, setPreviousOpen] = useState(open);
-	if (open !== previousOpen) {
-		setPreviousOpen(open);
-		if (!open) {
-			setZoomed(false);
-			setZoomedWidth(null);
-		}
-	}
 	const isImage = file?.mimeType?.startsWith("image/") ?? false;
 	const isVideo = file?.mimeType?.startsWith("video/") ?? false;
 	const canUseAiMetadata = isRasterImage(file?.mimeType);
@@ -256,19 +245,6 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 		fileMimeType,
 		fileSize
 	]);
-	useEffect(() => {
-		if (!zoomed || !zoomedWidth || !containerRef.current || !clickFractionRef.current) return;
-		const container = containerRef.current;
-		const img = container.querySelector("img");
-		if (!img) return;
-		requestAnimationFrame(() => {
-			const frac = clickFractionRef.current;
-			const scrollX = img.offsetLeft + img.width * frac.x - container.clientWidth / 2;
-			const scrollY = img.offsetTop + img.height * frac.y - container.clientHeight / 2;
-			container.scrollTo(scrollX, scrollY);
-			clickFractionRef.current = null;
-		});
-	}, [zoomed, zoomedWidth]);
 	const handleReplaceDrop = useCallback(async (files) => {
 		const droppedFile = files[0];
 		if (!droppedFile) return;
@@ -366,46 +342,11 @@ const AssetLightbox = ({ open, onOpenChange, fileId }) => {
 						label: "Drop file to replace",
 						onDrop: handleReplaceDrop,
 						className: "h-full min-w-0 flex-1",
-						children: [isImage ? /* @__PURE__ */ jsx("div", {
-							ref: containerRef,
-							className: `checkered absolute inset-0 ${zoomed ? "overflow-auto" : "flex items-center justify-center overflow-hidden p-6"}`,
-							onClick: (e) => {
-								const img = containerRef.current?.querySelector("img");
-								if (!img) return;
-								if (!zoomed) {
-									const rect = img.getBoundingClientRect();
-									clickFractionRef.current = {
-										x: (e.clientX - rect.left) / rect.width,
-										y: (e.clientY - rect.top) / rect.height
-									};
-									const container = containerRef.current;
-									const scaleForWidth = container.clientWidth * 2.5 / img.clientWidth;
-									const scaleForHeight = container.clientHeight * 2.5 / img.clientHeight;
-									setZoomedWidth(img.clientWidth * Math.max(scaleForWidth, scaleForHeight));
-									setZoomed(true);
-								} else {
-									setZoomed(false);
-									setZoomedWidth(null);
-									containerRef.current?.scrollTo(0, 0);
-								}
-							},
-							children: zoomed ? /* @__PURE__ */ jsx("div", {
-								className: "flex min-h-full items-center justify-center",
-								children: /* @__PURE__ */ jsx("img", {
-									src: file.url,
-									alt: file.alt || file.filename || "",
-									className: "cursor-zoom-out",
-									style: { width: zoomedWidth ?? void 0 },
-									draggable: false
-								})
-							}) : /* @__PURE__ */ jsx("img", {
-								src: file.url,
-								alt: file.alt || file.filename || "",
-								className: "max-h-full max-w-full cursor-zoom-in object-contain shadow-lg",
-								draggable: false
-							})
-						}) : isVideo ? /* @__PURE__ */ jsx("div", {
-							className: "checkered absolute inset-0 flex items-center justify-center p-6",
+						children: [isImage ? open && /* @__PURE__ */ jsx(ZoomableImage, {
+							src: file.url,
+							alt: file.alt || file.filename || ""
+						}, file.url) : isVideo ? /* @__PURE__ */ jsx("div", {
+							className: "absolute inset-0 flex items-center justify-center p-6",
 							children: open && /* @__PURE__ */ jsx("video", {
 								src: file.url,
 								controls: true,

package/dist/features/preview/components/CanvasPreview.js

@@ -1,8 +1,8 @@
 import { CanvasLoadingScreen } from "../../canvas/CanvasLoadingScreen.js";
-import { PreviewPageFrame, PreviewPageFrameContext } from "../previewPageFrame.js";
-import { PreviewPreparationContext } from "../previewPreparation.js";
 import { ViewportContinuity, ViewportContinuityContext } from "../viewportContinuity.js";
 import { PreviewActivationContext } from "./PreviewActivation.js";
+import { PreviewPageFrame, PreviewPageFrameContext } from "../previewPageFrame.js";
+import { PreviewPreparationContext } from "../previewPreparation.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/features/preview/components/Frame.js

@@ -1,11 +1,11 @@
 import { useLocation, useNavigate } from "../../navigation/navigation.js";
 import { cn } from "../../../lib/utils.js";
-import { ViewportContinuityContext, capturePreviewAnchor, restorePreviewAnchor } from "../viewportContinuity.js";
-import { PreviewActivationContext } from "./PreviewActivation.js";
-import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle, restyle } from "./previewStyles.js";
 import { listenForLinkIntent } from "../../runtime/linkPrefetch.js";
 import { PageViewportContext } from "../../runtime/pageViewport.js";
 import { PreviewDocumentContext } from "../../runtime/PreviewDocumentContext.js";
+import { ViewportContinuityContext, capturePreviewAnchor, restorePreviewAnchor } from "../viewportContinuity.js";
+import { PreviewActivationContext } from "./PreviewActivation.js";
+import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle, restyle } from "./previewStyles.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";