camox 0.52.3 → 0.54.0

package/dist/features/canvas/useCanvasCamera.js

@@ -45,6 +45,12 @@ function isTextEntry(target) {
 function rescaleY(camera, scale) {
 	return camera.y > 0 ? camera.y : camera.y * scale / camera.scale;
 }
+const NO_INSETS = {
+	top: 0,
+	right: 0,
+	bottom: 0,
+	left: 0
+};
 /** Animate only the camera's CSS properties; page trees never rerender on pan/zoom. */
 function useCanvasCamera(workspaceKey, initialTarget, row) {
 	const continuity = React.useContext(ViewportContinuityContext);
@@ -102,20 +108,22 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			capture: true,
 			passive: false
 		});
-		let viewportSize = {
-			width: viewport.clientWidth,
-			height: viewport.clientHeight
+		let insets = rowRef.current?.insets ?? NO_INSETS;
+		const measureViewport = () => {
+			insets = rowRef.current?.insets ?? NO_INSETS;
+			return {
+				width: Math.max(0, viewport.clientWidth - insets.left - insets.right),
+				height: Math.max(0, viewport.clientHeight - insets.top - insets.bottom)
+			};
 		};
+		let viewportSize = measureViewport();
 		const measureContent = () => ({
 			width: rowRef.current?.width ?? content.offsetWidth,
 			height: content.offsetHeight
 		});
 		let contentSize = measureContent();
 		let minimumScale = canvasMinimumScale(viewportSize, contentSize);
-		const updateGeometry = (nextViewport = {
-			width: viewport.clientWidth,
-			height: viewport.clientHeight
-		}, nextContent = measureContent()) => {
+		const updateGeometry = (nextViewport = measureViewport(), nextContent = measureContent()) => {
 			viewportSize = nextViewport;
 			contentSize = nextContent;
 			minimumScale = canvasMinimumScale(viewportSize, contentSize);
@@ -128,7 +136,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		const targetOf = (key) => key == null ? void 0 : targets().find((candidate) => candidate.key === key);
 		let stretch;
 		let zoomEnd = 0;
-		let landing;
 		const constrain = (next, stretched = !!stretch) => constrainCanvasCamera(next, viewportSize, contentSize, canvasMaximumScale(viewportSize, targets(), minimumScale), stretched);
 		const saved = canvasStore.getSnapshot().context.views[workspaceKey];
 		const savedCamera = saved && !saved.fitted ? saved.camera : void 0;
@@ -194,16 +201,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				y: anchored.y + translation.y
 			};
 			if (!candidate || !fit || !isCanvasPageScale(snapped, fit.scale)) return next;
-			const entered = selection !== candidate.key;
-			if (entered) landing = {
-				key: candidate.key,
-				stretched
-			};
-			else if (stretched && landing && !landing.stretched) {
-				landing.stretched = true;
-				rowRef.current?.onSnapStretched?.();
-			}
-			if (entered && !stretched) rowRef.current?.onSnap?.();
 			select(candidate.key);
 			return {
 				...next,
@@ -236,7 +233,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			if (!candidate || !fit || fit.scale < minimumScale) return intended;
 			const held = isCanvasCameraSnapped(base, viewportSize, candidate);
 			if (!isInCanvasSnapWindow(intended, viewportSize, candidate, held)) return intended;
-			if (selection !== candidate.key) rowRef.current?.onSnap?.();
 			select(candidate.key);
 			gesture.intendedX += (candidate.left + candidate.width / 2) * (intended.scale - fit.scale);
 			return constrain({
@@ -254,8 +250,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				markMoving();
 				applyCamera(next);
 			}
-			if (landing?.stretched && landing.key === selection) rowRef.current?.onSnap?.();
-			landing = void 0;
 		};
 		const pointers = /* @__PURE__ */ new Map();
 		let spaceHeld = false;
@@ -317,8 +311,8 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			if (!wasMoving) setMoving(true);
 		};
 		const paintElement = (element) => {
-			element.style.setProperty("--canvas-x", `${camera.x}px`);
-			element.style.setProperty("--canvas-y", `${camera.y}px`);
+			element.style.setProperty("--canvas-x", `${camera.x + insets.left}px`);
+			element.style.setProperty("--canvas-y", `${camera.y + insets.top}px`);
 			element.style.setProperty("--canvas-zoom", String(camera.scale));
 			element.style.setProperty("--canvas-pixel-ratio", String(ownerWindow.devicePixelRatio));
 		};
@@ -413,7 +407,6 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 			gesture = void 0;
 			ownerWindow.clearTimeout(zoomEnd);
 			stretch = void 0;
-			landing = void 0;
 			updateGeometry();
 			camera = constrain(camera, true);
 			target = constrain(destinationCamera());
@@ -435,7 +428,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				const frame = element.ownerDocument.defaultView?.frameElement;
 				if (!frame || flight && !flight.pan || pointers.size) return;
 				const rect = element.getBoundingClientRect();
-				const worldTop = (frame.getBoundingClientRect().top - viewport.getBoundingClientRect().top + rect.top * camera.scale - camera.y) / camera.scale;
+				const worldTop = (frame.getBoundingClientRect().top - viewport.getBoundingClientRect().top - insets.top + rect.top * camera.scale - camera.y) / camera.scale;
 				const delta = revealScrollDelta({
 					top: target.y + worldTop * target.scale,
 					bottom: target.y + (worldTop + rect.height) * target.scale
@@ -483,7 +476,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				const held = flight ? void 0 : targetOf(selection);
 				const element = held && Array.from(content.querySelectorAll("[data-canvas-page]")).find((element) => element.dataset.canvasPage === held.key);
 				const doc = element ? canvasPageIframe(element)?.contentDocument : void 0;
-				const anchor = doc && element ? captureViewportAnchor(doc, Math.max(0, (viewport.getBoundingClientRect().top - element.getBoundingClientRect().top) / camera.scale)) : void 0;
+				const anchor = doc && element ? captureViewportAnchor(doc, Math.max(0, (viewport.getBoundingClientRect().top + insets.top - element.getBoundingClientRect().top) / camera.scale)) : void 0;
 				return {
 					camera: { ...camera },
 					pathname: element ? element.dataset.canvasPathname : void 0,
@@ -505,7 +498,7 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				} : fit;
 				if (anchor && doc) {
 					const y = resolveViewportAnchor(doc, anchor);
-					const frameOffsetY = page ? (page.getBoundingClientRect().top - viewport.getBoundingClientRect().top - camera.y) / camera.scale : 0;
+					const frameOffsetY = page ? (page.getBoundingClientRect().top - viewport.getBoundingClientRect().top - insets.top - camera.y) / camera.scale : 0;
 					next = placeCanvasPageAnchor(viewportSize, destination, y, fit.scale, frameOffsetY);
 				}
 				fittingInitialPage = false;
@@ -515,12 +508,10 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		};
 		if (continuity) continuity.canvas = continuityBinding;
 		const resize = new ResizeObserver(() => {
-			const nextViewport = {
-				width: viewport.clientWidth,
-				height: viewport.clientHeight
-			};
+			const previousInsets = insets;
+			const nextViewport = measureViewport();
 			const nextContent = measureContent();
-			if (nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height) return;
+			if (insets.left === previousInsets.left && insets.top === previousInsets.top && nextViewport.width === viewportSize.width && nextViewport.height === viewportSize.height && nextContent.width === contentSize.width && nextContent.height === contentSize.height) return;
 			const wasFitted = isOverview(target);
 			gesture = void 0;
 			const held = nextViewport.width !== viewportSize.width && !flight && !fittingInitialPage ? targetOf(selection) : void 0;
@@ -559,14 +550,14 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		const localPoint = (x, y) => {
 			const rect = viewport.getBoundingClientRect();
 			return {
-				x: x - rect.left,
-				y: y - rect.top
+				x: x - rect.left - insets.left,
+				y: y - rect.top - insets.top
 			};
 		};
 		const onWheel = (event) => {
 			event.preventDefault();
-			const dx = canvasWheelDelta(event.deltaX, event.deltaMode, viewport.clientWidth);
-			const dy = canvasWheelDelta(event.deltaY, event.deltaMode, viewport.clientHeight);
+			const dx = canvasWheelDelta(event.deltaX, event.deltaMode, viewportSize.width);
+			const dy = canvasWheelDelta(event.deltaY, event.deltaMode, viewportSize.height);
 			if (!dx && !dy) return;
 			rowRef.current?.onEditorMove?.();
 			cancelCameraFlight();
@@ -664,7 +655,13 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 		const onFocusIn = (event) => {
 			if (!isControl(event.target)) return;
 			const rect = event.target.getBoundingClientRect();
-			const bounds = viewport.getBoundingClientRect();
+			const viewportRect = viewport.getBoundingClientRect();
+			const bounds = {
+				left: viewportRect.left + insets.left,
+				top: viewportRect.top + insets.top,
+				right: viewportRect.left + insets.left + viewportSize.width,
+				bottom: viewportRect.top + insets.top + viewportSize.height
+			};
 			const dx = Math.max(0, bounds.left + 16 - rect.left) - Math.max(0, rect.right - bounds.right + 16);
 			const dy = Math.max(0, bounds.top + 16 - rect.top) - Math.max(0, rect.bottom - bounds.bottom + 16);
 			if (!dx && !dy) return;
@@ -689,8 +686,8 @@ function useCanvasCamera(workspaceKey, initialTarget, row) {
 				"ArrowDown"
 			].includes(event.key) || event.shiftKey && event.code === "Digit1") cancelCameraFlight();
 			const center = {
-				x: viewport.clientWidth / 2,
-				y: viewport.clientHeight / 2
+				x: viewportSize.width / 2,
+				y: viewportSize.height / 2
 			};
 			const factor = event.key === "+" || event.key === "=" ? 1.25 : event.key === "-" ? .8 : event.key === "0" ? 1 / target.scale : void 0;
 			if (factor) {

package/dist/features/og/documentFonts.js

@@ -0,0 +1,49 @@
+//#region src/features/og/documentFonts.ts
+const GOOGLE_FONTS_CSS2 = "https://fonts.googleapis.com/css2";
+/**
+* The Google Fonts families the document's stylesheet links load, in link order, so page images
+* render in the site's fonts. Other stylesheets are ignored.
+*/
+function documentGoogleFonts(document) {
+	return (Array.isArray(document.link) ? document.link : []).flatMap((link) => {
+		if (typeof link !== "object" || link === null) return [];
+		const { rel, href } = link;
+		if (rel !== "stylesheet" || typeof href !== "string") return [];
+		const url = URL.parse(href);
+		if (!url || `${url.origin}${url.pathname}` !== GOOGLE_FONTS_CSS2) return [];
+		return url.searchParams.getAll("family").map(parseFamily);
+	});
+}
+/**
+* One css2 `family` parameter: `Inter`, or a name with its axes and their values, such as
+* `Archivo:ital,wght@0,100..900;1,100..900` (one `;`-separated tuple per face).
+*/
+function parseFamily(param) {
+	const [name = "", spec] = param.split(":");
+	if (!spec) return { name };
+	const [axisList = "", tupleList = ""] = spec.split("@");
+	const axes = axisList.split(",");
+	const tuples = tupleList.split(";").map((tuple) => tuple.split(","));
+	const valuesOf = (axis) => {
+		const index = axes.indexOf(axis);
+		return index < 0 ? [] : [...new Set(tuples.map((tuple) => tuple[index] ?? ""))];
+	};
+	const weights = valuesOf("wght");
+	const weightRange = weights.find(isRange);
+	const otherAxes = Object.fromEntries(axes.filter((axis) => axis !== "wght" && axis !== "ital").map((axis) => {
+		const [value = ""] = valuesOf(axis);
+		return [axis, isRange(value) ? value : Number(value)];
+	}));
+	return {
+		name,
+		...weights.length > 0 && { weight: weightRange ?? weights.map(Number) },
+		...axes.includes("ital") && { style: valuesOf("ital").map((ital) => ital === "1" ? "italic" : "normal") },
+		...Object.keys(otherAxes).length > 0 && { axes: otherAxes }
+	};
+}
+function isRange(value) {
+	return value.includes("..");
+}
+
+//#endregion
+export { documentGoogleFonts };

package/dist/features/og/imageResponse.d.ts

@@ -1,8 +1,17 @@
-import { ReactNode } from "react";
-import { ImageResponse as ImageResponse$1, ImageResponseOptions } from "@takumi-rs/image-response";
+import { ReactElement } from "react";
+import { GoogleFontFamily } from "takumi-js/helpers";
+import { ImageResponse } from "takumi-js/response";
 //#region src/features/og/imageResponse.d.ts
-export declare class ImageResponse extends ImageResponse$1 {
-  constructor(component: ReactNode, options?: ImageResponseOptions);
+export interface ImageStyle {
+  /** The site's compiled stylesheet, which the image's `className`s match. */
+  css?: string;
+  /** The Google Fonts families the site loads, in fallback order. */
+  fonts: GoogleFontFamily[];
 }
+/** Renders `element` as a PNG response, styled like the site. */
+export declare function createImageResponse(element: ReactElement, size: {
+  width: number;
+  height: number;
+}, { css, fonts }: ImageStyle): Promise<Response>;
 //#endregion
-export type { ImageResponseOptions };
+export { ImageResponse };

package/dist/features/og/imageResponse.js

@@ -1,26 +1,25 @@
-import { DEFAULT_FONTS } from "./defaultFonts.js";
-import { ImageResponse as ImageResponse$1 } from "@takumi-rs/image-response";
+import { googleFonts } from "takumi-js/helpers";
+import { ImageResponse } from "takumi-js/response";
 
 //#region src/features/og/imageResponse.ts
-/**
-* OG image renderer for the Worker.
-*
-* Under the `workerd` export condition, `@takumi-rs/image-response` picks Takumi's wasm
-* backend, which imports the wasm binary itself. The Cloudflare Vite plugin turns that
-* `.wasm` import into a `WebAssembly.Module`, and Takumi lazy-inits it inside the
-* response stream.
-*
-* Geist is bundled in `./defaultFonts` to compensate for the wasm renderer shipping with
-* no embedded fonts.
-*/
-var ImageResponse = class extends ImageResponse$1 {
-	constructor(component, options) {
-		super(component, {
-			...options,
-			fonts: options?.fonts ?? DEFAULT_FONTS
-		});
+/** Renders `element` as a PNG response, styled like the site. */
+async function createImageResponse(element, size, { css, fonts }) {
+	return new ImageResponse(element, {
+		...size,
+		css,
+		fonts: await loadFonts(fonts)
+	});
+}
+/** The families' font files, loaded lazily. Without them, the image falls back to Geist. */
+async function loadFonts(families) {
+	if (families.length === 0) return [];
+	try {
+		return await googleFonts(families);
+	} catch (error) {
+		console.warn("[camox] Page image fonts failed to load; rendering with Geist.", error);
+		return [];
 	}
-};
+}
 
 //#endregion
-export { ImageResponse };
+export { ImageResponse, createImageResponse };

package/dist/features/og/pageImage.js

@@ -78,11 +78,14 @@ function DefaultPageImage(t0) {
 	} else t5 = $[8];
 	return t5;
 }
-/** Renders a page image as a PNG response. Server only. */
-async function renderPageImage(element) {
+/**
+* Renders a page image as a PNG response, styled like the site: its elements' `className`s match
+* the site's compiled stylesheet, and its text uses the site's fonts. Server only.
+*/
+async function renderPageImage(element, style) {
 	if (import.meta.env?.SSR === false) throw new Error("OG images can only be rendered on the server.");
-	const { ImageResponse } = await import("camox/_internal/imageResponse");
-	return new ImageResponse(element, PAGE_IMAGE_SIZE);
+	const { createImageResponse } = await import("camox/_internal/imageResponse");
+	return createImageResponse(element, PAGE_IMAGE_SIZE, style);
 }
 
 //#endregion

package/dist/features/preview/CamoxPreview.js

@@ -12,10 +12,10 @@ import { usePageDestinations } from "../../hooks/use-page-destinations.js";
 import { useLocalePath, useLocalizedPath } from "../../lib/view-locale.js";
 import { CanvasLoadingScreen } from "../canvas/CanvasLoadingScreen.js";
 import { canvasStore } from "../canvas/canvasStore.js";
+import { previewStore, selectIsCanvasShown } from "./previewStore.js";
 import { SHOW_WHOLE_CANVAS_SHORTCUT, TOGGLE_CANVAS_SHORTCUT } from "./previewConstants.js";
 import { CanvasSidebarSkeleton } from "../canvas/sidebar/CanvasSidebarSkeleton.js";
 import { takeShowCanvasRequest } from "../provider/signInShortcut.js";
-import { previewStore, selectIsCanvasShown } from "./previewStore.js";
 import { PreviewEditingOwnerContext } from "./previewSelection.js";
 import { RendererFramesProvider, RendererSlot, useRendererHost, useRendererStatus } from "../renderer/RendererFrames.js";
 import { STUDIO_CANVAS_PATH } from "../studio/routes.js";

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

@@ -1,8 +1,8 @@
 import { actionsStore } from "../../provider/actionsStore.js";
 import { usePageBlocks } from "../../../lib/normalized-data.js";
 import { blockMutations, repeatableItemMutations } from "../../../lib/queries.js";
-import { formatShortcut } from "../../../lib/shortcuts.js";
 import { isBlockSelection, previewStore, selectionForPage, selectionItemId } from "../previewStore.js";
+import { formatShortcut } from "../../../lib/shortcuts.js";
 import { entityName } from "../entityName.js";
 import { useUpdateBlockPosition } from "./useUpdateBlockPosition.js";
 import { usePreviewedPage } from "../CamoxPreview.js";
@@ -14,8 +14,8 @@ import { useMutation } from "@tanstack/react-query";
 import { Copy, Trash2 } from "lucide-react";
 import { toast } from "@camox/ui/toaster";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@camox/ui/alert-dialog";
-import { Command as Command$1, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@camox/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { Command as Command$1, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@camox/ui/command";
 
 //#region src/features/preview/components/BlockActionsPopover.tsx
 const BlockActionsPopover = ({ block, children, open, onOpenChange, align = "start", isLayoutBlock, layoutSlot }) => {

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

@@ -1,6 +1,6 @@
 import { cn } from "../../../lib/utils.js";
-import { useRendererHost } from "../../renderer/RendererFrames.js";
 import { useEditingFrame } from "../editingFrame.js";
+import { useRendererHost } from "../../renderer/RendererFrames.js";
 import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "./previewStyles.js";
 import { FrameContext } from "./Frame.js";
 import { c } from "react/compiler-runtime";

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

@@ -203,7 +203,7 @@ function CanvasPreview({ enabled, pathname, pagePathname, runtimeBasePath, place
 					className: "relative flex min-h-0 flex-1",
 					"data-preview-surface": true,
 					children: [
-						enabled && phase !== "failed" && placeholder,
+						enabled && phase === "preparing" && placeholder,
 						/* @__PURE__ */ jsxs("div", {
 							className: "relative flex min-h-0 min-w-0 flex-1 flex-col",
 							"data-read-only-preview": true,

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

@@ -4,9 +4,9 @@ import { reads, useReadQuery } from "../../../lib/studio-reads.js";
 import { pageMutations } from "../../../lib/queries.js";
 import { useLayoutDefinitions } from "../../../lib/studio-definitions.js";
 import { useLocalizedPath } from "../../../lib/view-locale.js";
-import { PageNicknameField } from "./PageNicknameField.js";
 import { previewStore } from "../previewStore.js";
 import { PageLocationFieldset } from "./PageLocationFieldset.js";
+import { PageNicknameField } from "./PageNicknameField.js";
 import { c } from "react/compiler-runtime";
 import { useEffect } from "react";
 import { useSelector } from "@xstate/store-react";

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

@@ -5,9 +5,9 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@camox/ui/button";
 import { ChevronsUpDown, SearchIcon } from "lucide-react";
 import { Combobox } from "@base-ui/react/combobox";
+import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { commandFilter } from "@camox/ui/command";
 import { InputGroup, InputGroupAddon, InputGroupInput } from "@camox/ui/input-group";
-import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
 import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 
 //#region src/features/preview/components/IconFieldEditor.tsx

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

@@ -5,8 +5,8 @@ import { DrillRow } from "./DrillRow.js";
 import { ReferenceFieldEditor } from "./ReferenceFieldEditor.js";
 import { ReferenceListFieldEditor } from "./ReferenceListFieldEditor.js";
 import { previewStore } from "../previewStore.js";
-import { PreviewEditingOwnerContext } from "../previewSelection.js";
 import { overlayFieldId, recordPlacementId } from "../overlayMessages.js";
+import { PreviewEditingOwnerContext } from "../previewSelection.js";
 import { SidebarLexicalEditor } from "../../../core/components/lexical/SidebarLexicalEditor.js";
 import { IconFieldEditor } from "./IconFieldEditor.js";
 import { RepeatableItemsList } from "./RepeatableItemsList.js";

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

@@ -10,8 +10,8 @@ import { Input } from "@camox/ui/input";
 import { Label } from "@camox/ui/label";
 import { Switch } from "@camox/ui/switch";
 import { Check, ChevronsUpDown } from "lucide-react";
-import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@camox/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@camox/ui/popover";
+import { Command as Command$1, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@camox/ui/command";
 import { Tabs, TabsList, TabsTrigger } from "@camox/ui/tabs";
 
 //#region src/features/preview/components/LinkFieldEditor.tsx

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

@@ -1,5 +1,5 @@
-import { useFrame } from "./Frame.js";
 import { isOverlayMessage } from "../overlayMessages.js";
+import { useFrame } from "./Frame.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";