camox 0.44.0 → 0.45.0

package/dist/features/canvas/CanvasPageEdge.js

@@ -0,0 +1,87 @@
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/features/canvas/CanvasPageEdge.tsx
+/**
+* A device pixel, in the CSS pixels of the Canvas world the camera scales. It follows the zoom
+* the camera last rested at: following each step of a zoom would repaint every item each frame.
+*/
+const DEVICE_PIXEL = "calc(1px / (var(--canvas-rest-zoom, var(--canvas-zoom, 1)) * var(--canvas-pixel-ratio, 1)))";
+/**
+* The edge of a Page or block frame in the Canvas, drawn over the frame. Where
+* the edge falls partway through a screen pixel, the blocks and the site's
+* background under them each cover only part of that pixel, and the background
+* shows through as a light line. One opaque band, from a device pixel outside the
+* edge to one inside, covers that pixel whole, in the colors of the ring and
+* Canvas around the frame.
+*/
+function CanvasPageEdge(t0) {
+	const $ = c(14);
+	const { shaded } = t0;
+	const band = _temp;
+	const t1 = shaded && "color-mix(in oklab, var(--color-foreground) 5%, transparent)";
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] !== t1) {
+		const layers = [
+			"rgb(0 0 0 / 0.1)",
+			t1,
+			"var(--color-muted)"
+		].filter(_temp2);
+		t4 = true;
+		t5 = true;
+		t6 = "pointer-events-none absolute";
+		t3 = `calc(-1 * ${DEVICE_PIXEL})`;
+		t2 = layers.map(band);
+		$[0] = t1;
+		$[1] = t2;
+		$[2] = t3;
+		$[3] = t4;
+		$[4] = t5;
+		$[5] = t6;
+	} else {
+		t2 = $[1];
+		t3 = $[2];
+		t4 = $[3];
+		t5 = $[4];
+		t6 = $[5];
+	}
+	const t7 = t2.join(", ");
+	let t8;
+	if ($[6] !== t3 || $[7] !== t7) {
+		t8 = {
+			inset: t3,
+			boxShadow: t7
+		};
+		$[6] = t3;
+		$[7] = t7;
+		$[8] = t8;
+	} else t8 = $[8];
+	let t9;
+	if ($[9] !== t4 || $[10] !== t5 || $[11] !== t6 || $[12] !== t8) {
+		t9 = /* @__PURE__ */ jsx("div", {
+			"aria-hidden": t4,
+			"data-canvas-page-edge": t5,
+			className: t6,
+			style: t8
+		});
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t8;
+		$[13] = t9;
+	} else t9 = $[13];
+	return t9;
+}
+function _temp2(color_0) {
+	return !!color_0;
+}
+function _temp(color) {
+	return `inset 0 0 0 calc(2 * ${DEVICE_PIXEL}) ${color}`;
+}
+
+//#endregion
+export { CanvasPageEdge };

package/dist/features/canvas/CanvasPageFrame.js

@@ -0,0 +1,335 @@
+import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
+import { ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
+import { DerivedPageContent } from "../page/DerivedPageContent.js";
+import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
+import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
+import { PreviewPreparationContext } from "../preview/previewPreparation.js";
+import { EditableSurfaceContext } from "../../core/hooks/useIsEditable.js";
+import { canvasPageHref, measureCanvasDocument } from "./canvasFrameDocument.js";
+import { PreviewEditingOwnerContext } from "../preview/previewSelection.js";
+import { Overlays } from "../preview/components/Overlays.js";
+import { PreviewFrameEffects } from "../preview/components/PreviewPanel.js";
+import { PageContent } from "../preview/CamoxPreview.js";
+import { CanvasFrameProviders, preventLinkNavigation, useCanvasFrame } from "./useCanvasFrame.js";
+import { CanvasOverlays } from "./CanvasOverlays.js";
+import "../preview/EditablePageContent.js";
+import { useFrameSettled } from "./canvasThumbnails.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { HydrationBoundary } from "@tanstack/react-query";
+import { createPortal } from "react-dom";
+import overlayStyles from "virtual:camox-overlay-css";
+
+//#region src/features/canvas/CanvasPageFrame.tsx
+function PageContentCommitted(t0) {
+	const $ = c(9);
+	const { selected, frame, viewportHeight, onCommitted } = t0;
+	const preparation = React.useContext(PreviewPreparationContext);
+	const committed = React.useEffectEvent(onCommitted);
+	let t1;
+	if ($[0] !== committed) {
+		t1 = () => committed();
+		$[0] = committed;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = [];
+		$[2] = t2;
+	} else t2 = $[2];
+	React.useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[3] !== frame || $[4] !== preparation || $[5] !== selected || $[6] !== viewportHeight) {
+		t3 = () => {
+			if (!selected) return;
+			const iframe = frame.current;
+			const root = iframe?.contentDocument?.querySelector("[data-camox-preview-root]");
+			if (iframe && root) measureCanvasDocument(iframe, root, viewportHeight);
+			preparation?.ready();
+		};
+		t4 = [
+			selected,
+			preparation,
+			frame,
+			viewportHeight
+		];
+		$[3] = frame;
+		$[4] = preparation;
+		$[5] = selected;
+		$[6] = viewportHeight;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		t3 = $[7];
+		t4 = $[8];
+	}
+	React.useEffect(t3, t4);
+	return null;
+}
+/**
+* Parent owns /_camox/data loading and the per-card error boundary. Documents are
+* isolated, but their cache and editing runtime are shared with the studio.
+*/
+function CanvasPageFrame(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(PageFrame, { ...props }, props.input.pathname);
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function PageFrame(t0) {
+	const $ = c(67);
+	const { input, width, viewportHeight, pageId, selected: t1, hovered: t2, mode: t3, onActivate, onSettled } = t0;
+	const selected = t1 === void 0 ? false : t1;
+	const hovered = t2 === void 0 ? false : t2;
+	const mode = t3 === void 0 ? "live" : t3;
+	const camoxApp = useCamoxApp();
+	let t4;
+	if ($[0] !== input) {
+		t4 = canvasPageHref(input);
+		$[0] = input;
+		$[1] = t4;
+	} else t4 = $[1];
+	const href = t4;
+	const t5 = input.derived?.layout.layoutId;
+	let t6;
+	if ($[2] !== pageId || $[3] !== t5) {
+		t6 = {
+			pageId,
+			layoutId: t5
+		};
+		$[2] = pageId;
+		$[3] = t5;
+		$[4] = t6;
+	} else t6 = $[4];
+	const owner = useEditingOwner(t6);
+	let t7;
+	if ($[5] !== href || $[6] !== input.previewDocument || $[7] !== mode || $[8] !== viewportHeight || $[9] !== width) {
+		t7 = {
+			previewDocument: input.previewDocument,
+			href,
+			width,
+			viewportHeight,
+			fit: "page",
+			subject: "page",
+			mode
+		};
+		$[5] = href;
+		$[6] = input.previewDocument;
+		$[7] = mode;
+		$[8] = viewportHeight;
+		$[9] = width;
+		$[10] = t7;
+	} else t7 = $[10];
+	const { iframeRef, iframe, mount, iframeProps } = useCanvasFrame(t7);
+	const claim = useEditingFrameClaim(iframe, owner);
+	const [committed, setCommitted] = React.useState(false);
+	useFrameSettled(committed ? iframe : null, mount, onSettled);
+	let t8;
+	if ($[11] !== claim || $[12] !== onActivate || $[13] !== owner) {
+		t8 = (source) => {
+			if (!owner) return;
+			onActivate(owner, source, claim());
+		};
+		$[11] = claim;
+		$[12] = onActivate;
+		$[13] = owner;
+		$[14] = t8;
+	} else t8 = $[14];
+	const activateOwner = t8;
+	let t9;
+	if ($[15] !== activateOwner) {
+		t9 = () => activateOwner("interaction");
+		$[15] = activateOwner;
+		$[16] = t9;
+	} else t9 = $[16];
+	const activate = t9;
+	let t10;
+	if ($[17] !== activateOwner) {
+		t10 = () => activateOwner("selection");
+		$[17] = activateOwner;
+		$[18] = t10;
+	} else t10 = $[18];
+	const activateSelected = React.useEffectEvent(t10);
+	let t11;
+	if ($[19] !== activateSelected || $[20] !== mount || $[21] !== owner || $[22] !== selected) {
+		t11 = () => {
+			if (!selected || !mount || !owner) return;
+			activateSelected();
+		};
+		$[19] = activateSelected;
+		$[20] = mount;
+		$[21] = owner;
+		$[22] = selected;
+		$[23] = t11;
+	} else t11 = $[23];
+	let t12;
+	if ($[24] !== mount || $[25] !== owner || $[26] !== selected) {
+		t12 = [
+			selected,
+			mount,
+			owner
+		];
+		$[24] = mount;
+		$[25] = owner;
+		$[26] = selected;
+		$[27] = t12;
+	} else t12 = $[27];
+	React.useEffect(t11, t12);
+	const t13 = input.dehydratedState;
+	const t14 = mount?.ownerDocument ?? null;
+	const t15 = owner?.kind === "page";
+	let t16;
+	if ($[28] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = /* @__PURE__ */ jsx("style", { children: overlayStyles });
+		$[28] = t16;
+	} else t16 = $[28];
+	let t17;
+	if ($[29] !== iframeProps || $[30] !== input.pathname || $[31] !== viewportHeight || $[32] !== width) {
+		t17 = iframeProps.srcDoc && /* @__PURE__ */ jsx("iframe", {
+			...iframeProps,
+			title: `Page preview: ${input.pathname}`,
+			style: {
+				display: "block",
+				width,
+				height: viewportHeight,
+				border: 0
+			}
+		});
+		$[29] = iframeProps;
+		$[30] = input.pathname;
+		$[31] = viewportHeight;
+		$[32] = width;
+		$[33] = t17;
+	} else t17 = $[33];
+	let t18;
+	if ($[34] !== activate || $[35] !== camoxApp || $[36] !== iframe || $[37] !== iframeRef || $[38] !== input.derived || $[39] !== mode || $[40] !== mount || $[41] !== owner || $[42] !== selected || $[43] !== viewportHeight) {
+		t18 = mount && createPortal(/* @__PURE__ */ jsx(React.Activity, {
+			mode: mode === "resting" ? "hidden" : "visible",
+			children: /* @__PURE__ */ jsx(React.Suspense, {
+				fallback: /* @__PURE__ */ jsx("div", {
+					role: "status",
+					children: "Loading page…"
+				}),
+				children: /* @__PURE__ */ jsx(ArtifactsRunContext, {
+					value: selected,
+					children: /* @__PURE__ */ jsx(EditableSurfaceContext, {
+						value: selected,
+						children: /* @__PURE__ */ jsxs("div", {
+							style: { display: "contents" },
+							onPointerDownCapture: activate,
+							onFocusCapture: activate,
+							onClickCapture: activate,
+							onClick: preventLinkNavigation,
+							children: [
+								input.derived ? /* @__PURE__ */ jsx(DerivedPageContent, {
+									camoxApp,
+									derived: input.derived
+								}) : /* @__PURE__ */ jsx(PageContent, {}),
+								/* @__PURE__ */ jsx(PreviewFrameEffects, {}),
+								/* @__PURE__ */ jsx(Overlays, {
+									frame: iframe,
+									owner,
+									canAddBlocks: owner?.kind === "page"
+								}),
+								/* @__PURE__ */ jsx(PageContentCommitted, {
+									selected,
+									frame: iframeRef,
+									viewportHeight,
+									onCommitted: () => setCommitted(true)
+								})
+							]
+						})
+					})
+				})
+			})
+		}), mount);
+		$[34] = activate;
+		$[35] = camoxApp;
+		$[36] = iframe;
+		$[37] = iframeRef;
+		$[38] = input.derived;
+		$[39] = mode;
+		$[40] = mount;
+		$[41] = owner;
+		$[42] = selected;
+		$[43] = viewportHeight;
+		$[44] = t18;
+	} else t18 = $[44];
+	let t19;
+	if ($[45] !== activate || $[46] !== hovered || $[47] !== t14 || $[48] !== t15 || $[49] !== t17 || $[50] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(CanvasOverlays, {
+			document: t14,
+			activate,
+			pageHovered: hovered,
+			canAddBlocks: t15,
+			children: [
+				t16,
+				t17,
+				t18
+			]
+		});
+		$[45] = activate;
+		$[46] = hovered;
+		$[47] = t14;
+		$[48] = t15;
+		$[49] = t17;
+		$[50] = t18;
+		$[51] = t19;
+	} else t19 = $[51];
+	let t20;
+	if ($[52] !== input.previewDocument || $[53] !== t19) {
+		t20 = /* @__PURE__ */ jsx(PreviewDocumentContext.Provider, {
+			value: input.previewDocument,
+			children: t19
+		});
+		$[52] = input.previewDocument;
+		$[53] = t19;
+		$[54] = t20;
+	} else t20 = $[54];
+	let t21;
+	if ($[55] !== href || $[56] !== iframe || $[57] !== input.pathname || $[58] !== mount || $[59] !== t20) {
+		t21 = /* @__PURE__ */ jsx(CanvasFrameProviders, {
+			pathname: input.pathname,
+			href,
+			mount,
+			iframe,
+			children: t20
+		});
+		$[55] = href;
+		$[56] = iframe;
+		$[57] = input.pathname;
+		$[58] = mount;
+		$[59] = t20;
+		$[60] = t21;
+	} else t21 = $[60];
+	let t22;
+	if ($[61] !== t13 || $[62] !== t21) {
+		t22 = /* @__PURE__ */ jsx(HydrationBoundary, {
+			state: t13,
+			children: t21
+		});
+		$[61] = t13;
+		$[62] = t21;
+		$[63] = t22;
+	} else t22 = $[63];
+	let t23;
+	if ($[64] !== owner || $[65] !== t22) {
+		t23 = /* @__PURE__ */ jsx(PreviewEditingOwnerContext, {
+			value: owner,
+			children: t22
+		});
+		$[64] = owner;
+		$[65] = t22;
+		$[66] = t23;
+	} else t23 = $[66];
+	return t23;
+}
+
+//#endregion
+export { CanvasPageFrame };

package/dist/features/canvas/CanvasPageHeader.js

@@ -0,0 +1,125 @@
+import "../preview/components/PageNicknameField.js";
+import { DerivedPagePathInput } from "./DerivedPagePathInput.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { toast } from "@camox/ui/toaster";
+import { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from "@camox/ui/popover";
+
+//#region src/features/canvas/CanvasPageHeader.tsx
+function CanvasPageHeader({ page, pathname, selected, onSelect, onHoverChange, onChange, onRename }) {
+	const [open, setOpen] = React.useState(false);
+	const [draft, setDraft] = React.useState(null);
+	const [saving, setSaving] = React.useState(false);
+	const finishing = React.useRef(false);
+	const focusInput = React.useCallback((input) => {
+		input?.focus();
+		input?.select();
+	}, []);
+	const save = async () => {
+		if (finishing.current || draft === null || !onRename) return;
+		const nickname = draft.trim();
+		if (!nickname) {
+			toast.error("Page nickname is required");
+			return;
+		}
+		finishing.current = true;
+		if (nickname === page.title) {
+			setDraft(null);
+			return;
+		}
+		setSaving(true);
+		try {
+			await onRename(nickname);
+			setDraft(null);
+		} catch {
+			finishing.current = false;
+			toast.error("Could not update page");
+		} finally {
+			setSaving(false);
+		}
+	};
+	const path = pathname ?? (page.kind === "derived" ? page.pattern : void 0);
+	const pathClassName = "text-muted-foreground w-full min-w-0 truncate text-left text-xs font-normal";
+	const focusClassName = "focus-visible:ring-ring outline-none focus-visible:ring-2";
+	const name = draft !== null ? /* @__PURE__ */ jsx("input", {
+		"aria-label": "Page nickname",
+		className: `bg-background min-w-0 flex-1 rounded px-1 text-sm font-medium ${focusClassName}`,
+		value: draft,
+		maxLength: 80,
+		readOnly: saving,
+		ref: focusInput,
+		onChange: (event) => setDraft(event.target.value),
+		onBlur: () => void save(),
+		onKeyDown: (event) => {
+			event.stopPropagation();
+			if (event.key === "Enter") {
+				event.preventDefault();
+				save();
+			}
+			if (event.key === "Escape" && !saving) {
+				finishing.current = true;
+				setDraft(null);
+			}
+		}
+	}) : /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: `min-w-0 truncate text-left text-sm font-medium ${focusClassName}`,
+		title: page.title,
+		"aria-pressed": selected,
+		disabled: !pathname,
+		onDoubleClick: () => {
+			if (!onRename) return;
+			finishing.current = false;
+			setDraft(page.title);
+		},
+		onClick: onSelect,
+		onMouseEnter: () => onHoverChange?.(true),
+		onMouseLeave: () => onHoverChange?.(false),
+		children: page.title
+	});
+	const nameRow = /* @__PURE__ */ jsx("span", {
+		className: "flex w-full min-w-0 items-center gap-3",
+		children: /* @__PURE__ */ jsx("span", {
+			className: `flex min-w-0 items-center gap-1.5 ${draft !== null ? "flex-1" : ""}`,
+			children: name
+		})
+	});
+	const headerClassName = "text-foreground flex h-10 w-full min-w-0 flex-col items-start justify-center gap-1 text-left";
+	if (page.kind !== "derived") return /* @__PURE__ */ jsxs("h2", {
+		className: headerClassName,
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-canvas-path": true,
+			className: pathClassName,
+			title: path,
+			children: path
+		}), nameRow]
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs("h2", {
+			className: headerClassName,
+			children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+				"data-canvas-path": true,
+				"aria-label": `Edit page path for ${page.title}`,
+				className: `${pathClassName} ${focusClassName}`,
+				title: path,
+				children: path
+			}), nameRow]
+		}), /* @__PURE__ */ jsxs(PopoverContent, {
+			className: "w-96 max-w-[calc(100vw-2rem)]",
+			align: "start",
+			children: [/* @__PURE__ */ jsxs(PopoverTitle, { children: ["Preview ", page.title] }), /* @__PURE__ */ jsx(DerivedPagePathInput, {
+				page,
+				pathname,
+				onChange: (path) => {
+					onChange(path);
+					setOpen(false);
+				}
+			})]
+		})]
+	});
+}
+
+//#endregion
+export { CanvasPageHeader };

package/dist/features/canvas/CanvasPreviewPageSlot.js

@@ -0,0 +1,103 @@
+import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
+import { ViewportContinuityContext } from "../preview/viewportContinuity.js";
+import { usePreviewPageFrame } from "../preview/previewPageFrame.js";
+import { PreviewPreparationContext } from "../preview/previewPreparation.js";
+import { CanvasWorkspaceContext } from "./canvasZoom.js";
+import { useCanvasFrameMode } from "./canvasFrameMode.js";
+import { CanvasOverlays } from "./CanvasOverlays.js";
+import { CanvasPageEdge } from "./CanvasPageEdge.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import overlayStyles from "virtual:camox-overlay-css";
+
+//#region src/features/canvas/CanvasPreviewPageSlot.tsx
+/**
+* The selected Page's place in the Canvas row, where the Preview's own page
+* frame shows instead of a frame of the Canvas. Toggling the Canvas then never remounts
+* the page, and neither does deselecting it, which keeps it in the frame. The slot takes the frame's height, and draws the Canvas overlays
+* over it.
+*/
+function CanvasPreviewPageSlot({ pageId, layoutId, width, viewportHeight, selected, hovered, hidden = false, shaded = false, onActivate }) {
+	const ref = React.useRef(null);
+	const owner = useEditingOwner({
+		pageId,
+		layoutId
+	});
+	const workspace = React.use(CanvasWorkspaceContext);
+	const preparation = React.use(PreviewPreparationContext);
+	const continuity = React.use(ViewportContinuityContext);
+	const { frame, slot, inCanvas, height, overlays, iframe } = usePreviewPageFrame();
+	const mode = useCanvasFrameMode({
+		near: true,
+		selected
+	});
+	const claim = useEditingFrameClaim(iframe, owner);
+	const activateOwner = React.useEffectEvent((source) => {
+		if (!owner) return;
+		onActivate(owner, source, claim());
+	});
+	const onInteract = React.useCallback(() => activateOwner("interaction"), []);
+	React.useLayoutEffect(() => {
+		const element = ref.current;
+		const viewport = element?.closest("[data-camox-canvas]");
+		if (!frame || !element || !viewport) return;
+		const next = {
+			viewport,
+			left: element.offsetLeft,
+			top: element.offsetTop,
+			width,
+			viewportHeight,
+			mode,
+			selected,
+			hidden,
+			workspace,
+			onInteract
+		};
+		const current = frame.getSnapshot().slot;
+		if (!(current && Object.keys(next).every((key) => current[key] === next[key]))) frame.setSlot(next);
+	});
+	React.useLayoutEffect(() => {
+		if (!frame) return;
+		return () => frame.setSlot(null);
+	}, [frame]);
+	const laidOut = slot !== null;
+	React.useEffect(() => {
+		if (laidOut) preparation?.ready({ restore: false });
+	}, [laidOut, preparation]);
+	const placed = inCanvas && height > 0;
+	React.useLayoutEffect(() => {
+		if (placed) continuity?.restoreCanvas();
+	}, [placed, continuity]);
+	React.useEffect(() => {
+		if (!placed || !owner || !selected) return;
+		activateOwner("selection");
+	}, [
+		placed,
+		owner,
+		selected
+	]);
+	const document = placed ? iframe?.contentDocument ?? null : null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		"data-canvas-preview-page-slot": true,
+		style: {
+			width,
+			height: placed ? height : void 0,
+			minHeight: viewportHeight
+		},
+		children: [overlays && document && createPortal(/* @__PURE__ */ jsxs(CanvasOverlays, {
+			document,
+			activate: onInteract,
+			pageHovered: hovered,
+			canAddBlocks: owner?.kind === "page",
+			children: [/* @__PURE__ */ jsx("style", { children: overlayStyles }), /* @__PURE__ */ jsx("div", { style: {
+				width,
+				height
+			} })]
+		}), overlays), overlays && placed && createPortal(/* @__PURE__ */ jsx(CanvasPageEdge, { shaded }), overlays)]
+	});
+}
+
+//#endregion
+export { CanvasPreviewPageSlot };