camox 0.44.0 → 0.46.0

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,123 @@
+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
+/**
+* An element's place in the Canvas row, in world space. Its own offset is only
+* relative to its nearest positioned ancestor, such as its Page, so the offsets
+* add up to the row.
+*/
+function canvasRowOffset(element, row) {
+	let left = 0;
+	let top = 0;
+	let current = element;
+	while (current && current !== row) {
+		left += current.offsetLeft;
+		top += current.offsetTop;
+		current = current.offsetParent;
+	}
+	return {
+		left,
+		top
+	};
+}
+/**
+* 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, 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]");
+		const row = element?.closest("[data-canvas-items]");
+		if (!frame || !element || !viewport || !row) return;
+		const { left, top } = canvasRowOffset(element, row);
+		const next = {
+			viewport,
+			left,
+			top,
+			width,
+			viewportHeight,
+			mode,
+			selected,
+			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, canvasRowOffset };

package/dist/features/canvas/DerivedPagePathInput.js

@@ -0,0 +1,238 @@
+import { parseLocalePath } from "../../lib/locale-path.js";
+import { useViewLocale } from "../../lib/view-locale-context.js";
+import { useCamoxApp } from "../provider/components/CamoxAppContext.js";
+import { matchDerivedLayout, routeSegments } from "../../core/derivedRoutes.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "@camox/ui/button";
+import { InputGroup, InputGroupAddon, InputGroupInput, InputGroupText } from "@camox/ui/input-group";
+
+//#region src/features/canvas/DerivedPagePathInput.tsx
+function DerivedPagePathInput(props) {
+	const $ = c(6);
+	let t0;
+	if ($[0] !== props.page.layoutId || $[1] !== props.pathname) {
+		t0 = JSON.stringify([props.page.layoutId, props.pathname]);
+		$[0] = props.page.layoutId;
+		$[1] = props.pathname;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== props || $[4] !== t0) {
+		t1 = /* @__PURE__ */ jsx(PagePathForm, { ...props }, t0);
+		$[3] = props;
+		$[4] = t0;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+}
+function PagePathForm(t0) {
+	const $ = c(46);
+	const { page, pathname, onChange } = t0;
+	const app = useCamoxApp();
+	const { locales } = useViewLocale();
+	let t1;
+	if ($[0] !== app || $[1] !== locales || $[2] !== page.layoutId || $[3] !== pathname) {
+		t1 = () => {
+			if (!pathname || /[?#]/.test(pathname)) return {};
+			const match = matchDerivedLayout(app.getLayouts(), parseLocalePath(pathname, locales).path);
+			return match && match.layout._internal.id === page.layoutId ? match.params : {};
+		};
+		$[0] = app;
+		$[1] = locales;
+		$[2] = page.layoutId;
+		$[3] = pathname;
+		$[4] = t1;
+	} else t1 = $[4];
+	const [values, setValues] = React.useState(t1);
+	const [invalid, setInvalid] = React.useState(false);
+	const errorId = React.useId();
+	let params;
+	let path;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[5] !== app || $[6] !== errorId || $[7] !== invalid || $[8] !== onChange || $[9] !== page.layoutId || $[10] !== page.title || $[11] !== values) {
+		const segments = routeSegments(page.layoutId);
+		params = [...new Set(segments.filter(_temp).map(_temp2))];
+		let t7;
+		if ($[19] !== values) {
+			t7 = (segment_1) => segment_1.startsWith("$") ? encodeURIComponent(values[segment_1.slice(1)]?.trim() ?? "") : encodeURIComponent(segment_1);
+			$[19] = values;
+			$[20] = t7;
+		} else t7 = $[20];
+		const resolved = segments.map(t7);
+		path = `/${resolved.join("/")}`;
+		const validParams = params.every((param) => {
+			const value = values[param]?.trim();
+			return value && !value.includes("/") && value !== "." && value !== "..";
+		});
+		let t8;
+		if ($[21] !== app || $[22] !== page.layoutId || $[23] !== path || $[24] !== validParams) {
+			t8 = validParams && !/[?#]/.test(path) && matchDerivedLayout(app.getLayouts(), path)?.layout._internal.id === page.layoutId;
+			$[21] = app;
+			$[22] = page.layoutId;
+			$[23] = path;
+			$[24] = validParams;
+			$[25] = t8;
+		} else t8 = $[25];
+		const matches = t8;
+		t2 = `Page path for ${page.title}`;
+		t3 = "flex min-w-0 flex-1 flex-wrap items-center gap-1";
+		t4 = true;
+		if ($[26] !== matches || $[27] !== onChange || $[28] !== path) {
+			t5 = (event) => {
+				event.preventDefault();
+				setInvalid(!matches);
+				if (!matches) return;
+				onChange(path);
+			};
+			$[26] = matches;
+			$[27] = onChange;
+			$[28] = path;
+			$[29] = t5;
+		} else t5 = $[29];
+		t6 = params.map((param_0) => {
+			const index = segments.indexOf(`$${param_0}`);
+			const prefix = resolved.slice(0, index).join("/");
+			const suffix = segments.slice(index + 1).every(_temp3) ? resolved.slice(index + 1).join("/") : "";
+			return /* @__PURE__ */ jsxs(InputGroup, {
+				className: "bg-background/80 h-7 min-w-0 flex-1 basis-48",
+				children: [
+					/* @__PURE__ */ jsx(InputGroupAddon, {
+						className: "max-w-1/2 overflow-hidden",
+						children: /* @__PURE__ */ jsxs(InputGroupText, {
+							className: "truncate font-mono text-xs",
+							children: ["/", prefix && `${prefix}/`]
+						})
+					}),
+					/* @__PURE__ */ jsx(InputGroupInput, {
+						"aria-label": `${param_0} for ${page.title}`,
+						"aria-invalid": invalid,
+						"aria-describedby": invalid ? errorId : void 0,
+						className: "h-7 min-w-0 px-1 text-xs",
+						placeholder: param_0,
+						required: true,
+						value: values[param_0] ?? "",
+						onChange: (event_0) => {
+							setValues((previous) => ({
+								...previous,
+								[param_0]: event_0.target.value
+							}));
+							setInvalid(false);
+						}
+					}),
+					suffix && /* @__PURE__ */ jsx(InputGroupAddon, {
+						align: "inline-end",
+						children: /* @__PURE__ */ jsxs(InputGroupText, {
+							className: "font-mono text-xs",
+							children: ["/", suffix]
+						})
+					})
+				]
+			}, param_0);
+		});
+		$[5] = app;
+		$[6] = errorId;
+		$[7] = invalid;
+		$[8] = onChange;
+		$[9] = page.layoutId;
+		$[10] = page.title;
+		$[11] = values;
+		$[12] = params;
+		$[13] = path;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+	} else {
+		params = $[12];
+		path = $[13];
+		t2 = $[14];
+		t3 = $[15];
+		t4 = $[16];
+		t5 = $[17];
+		t6 = $[18];
+	}
+	let t7;
+	if ($[30] !== params.length || $[31] !== path) {
+		t7 = params.length === 0 && /* @__PURE__ */ jsx(InputGroup, {
+			className: "bg-background/80 h-7 min-w-0 flex-1",
+			children: /* @__PURE__ */ jsx(InputGroupAddon, { children: /* @__PURE__ */ jsx(InputGroupText, {
+				className: "font-mono text-xs",
+				children: path
+			}) })
+		});
+		$[30] = params.length;
+		$[31] = path;
+		$[32] = t7;
+	} else t7 = $[32];
+	let t8;
+	if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ jsx(Button, {
+			type: "submit",
+			variant: "outline",
+			size: "sm",
+			className: "h-7 text-xs",
+			children: "View"
+		});
+		$[33] = t8;
+	} else t8 = $[33];
+	let t9;
+	if ($[34] !== errorId || $[35] !== invalid || $[36] !== page.pattern) {
+		t9 = invalid && /* @__PURE__ */ jsxs("span", {
+			id: errorId,
+			role: "alert",
+			className: "text-destructive basis-full text-xs",
+			children: [
+				"Enter values matching ",
+				page.pattern,
+				"."
+			]
+		});
+		$[34] = errorId;
+		$[35] = invalid;
+		$[36] = page.pattern;
+		$[37] = t9;
+	} else t9 = $[37];
+	let t10;
+	if ($[38] !== t2 || $[39] !== t3 || $[40] !== t4 || $[41] !== t5 || $[42] !== t6 || $[43] !== t7 || $[44] !== t9) {
+		t10 = /* @__PURE__ */ jsxs("form", {
+			"aria-label": t2,
+			className: t3,
+			noValidate: t4,
+			onSubmit: t5,
+			children: [
+				t6,
+				t7,
+				t8,
+				t9
+			]
+		});
+		$[38] = t2;
+		$[39] = t3;
+		$[40] = t4;
+		$[41] = t5;
+		$[42] = t6;
+		$[43] = t7;
+		$[44] = t9;
+		$[45] = t10;
+	} else t10 = $[45];
+	return t10;
+}
+function _temp3(segment_2) {
+	return !segment_2.startsWith("$");
+}
+function _temp2(segment_0) {
+	return segment_0.slice(1);
+}
+function _temp(segment) {
+	return segment.startsWith("$");
+}
+
+//#endregion
+export { DerivedPagePathInput };