camox 0.44.0 → 0.45.0

package/dist/features/canvas/CanvasShelfMarker.js

@@ -0,0 +1,255 @@
+import "../preview/previewPageFrame.js";
+import "./canvasItems.js";
+import { canvasScreenAbove, canvasScreenLength, canvasScreenX } from "./canvasScreenSpace.js";
+import { c } from "react/compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/features/canvas/CanvasShelfMarker.tsx
+const BAR_SIZE = 24;
+const CANVAS_SHELF_MARKER_OVERHANG = 12;
+const MIN_BAR_SEPARATION = 8;
+const OVERHANG = `clamp(0px, ${canvasScreenLength(480)} / 2 - ${MIN_BAR_SEPARATION / 2}px, ${12}px)`;
+const LABEL_CLASS_NAME = "text-muted-foreground text-xs font-medium tracking-wider whitespace-nowrap uppercase";
+const BAR_CLASS_NAME = "bg-foreground/10 hover:bg-foreground/15 focus-visible:ring-ring absolute top-0 left-0 cursor-pointer rounded-sm outline-none focus-visible:ring-2";
+/**
+* Each marker's bar, from its area's on-screen extent. A collapsed bar keeps its
+* thickness at every zoom, so when it no longer fits in the gap next to its
+* area, it moves right, after the previous bar.
+*/
+function getCanvasShelfMarkerBars(markers) {
+	let previousRight;
+	return markers.map((marker) => {
+		const start = canvasScreenX(marker.start);
+		const ownLeft = marker.collapsed ? `calc(${start} - ${BAR_SIZE / 2}px)` : `calc(${start} - ${OVERHANG})`;
+		const left = previousRight ? `max(${ownLeft}, calc(${previousRight} + ${MIN_BAR_SEPARATION}px))` : ownLeft;
+		const right = marker.collapsed ? `calc(${left} + ${BAR_SIZE}px)` : `max(calc(${canvasScreenX(marker.end)} + ${OVERHANG}), ${left})`;
+		previousRight = right;
+		return {
+			left,
+			right
+		};
+	});
+}
+/** The Shelf Markers of the Canvas row, in row order. */
+function CanvasShelfMarkers({ markers, onToggle }) {
+	const bars = getCanvasShelfMarkerBars(markers);
+	return markers.map((marker, index) => /* @__PURE__ */ jsx(CanvasShelfMarker, {
+		marker,
+		bar: bars[index],
+		onToggle: () => onToggle(marker)
+	}, marker.key));
+}
+/**
+* A labelled bar naming an area of the Canvas. Clicking it collapses or expands the area.
+*
+* Expanded, it is a horizontal bar above the Page headers. The bar follows world
+* space horizontally, so it spans its area's items at every zoom, but keeps a
+* constant on-screen height, like Page headers. The label sticks near the
+* viewport's left edge while the area is in view, at the inset of a snapped
+* Page so it lines up with that Page's header, and the end of the area pushes it out.
+*
+* Collapsed, the area's items are hidden and the bar turns vertical in their
+* place, running from the header row to the bottom of the viewport. It is the
+* horizontal bar rotated, so its label reads upwards and sits at the top.
+*/
+function CanvasShelfMarker(t0) {
+	const $ = c(47);
+	const { marker, bar, onToggle } = t0;
+	let t1;
+	if ($[0] !== marker.start) {
+		t1 = canvasScreenX(marker.start);
+		$[0] = marker.start;
+		$[1] = t1;
+	} else t1 = $[1];
+	const start = t1;
+	let t2;
+	if ($[2] !== marker.end) {
+		t2 = canvasScreenX(marker.end);
+		$[2] = marker.end;
+		$[3] = t2;
+	} else t2 = $[3];
+	const end = t2;
+	let t3;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = canvasScreenAbove(52 + 32);
+		$[4] = t3;
+	} else t3 = $[4];
+	const y = t3;
+	const t4 = !marker.collapsed;
+	const t5 = `${marker.collapsed ? "Expand" : "Collapse"} ${marker.label}`;
+	const t6 = marker.count === 0;
+	let t7;
+	if ($[5] !== marker.key || $[6] !== onToggle || $[7] !== t4 || $[8] !== t5 || $[9] !== t6) {
+		t7 = {
+			"data-canvas-shelf-marker": marker.key,
+			"aria-expanded": t4,
+			"aria-label": t5,
+			disabled: t6,
+			onClick: onToggle
+		};
+		$[5] = marker.key;
+		$[6] = onToggle;
+		$[7] = t4;
+		$[8] = t5;
+		$[9] = t6;
+		$[10] = t7;
+	} else t7 = $[10];
+	const button = t7;
+	if (marker.collapsed) {
+		const t8 = `translate(${bar.left}, ${y})`;
+		let t9;
+		if ($[11] !== t8) {
+			t9 = {
+				width: BAR_SIZE,
+				height: `calc(100% - ${y})`,
+				transform: t8,
+				willChange: "transform",
+				zIndex: 2
+			};
+			$[11] = t8;
+			$[12] = t9;
+		} else t9 = $[12];
+		let t10;
+		if ($[13] !== button || $[14] !== t9) {
+			t10 = /* @__PURE__ */ jsx("button", {
+				type: "button",
+				...button,
+				className: BAR_CLASS_NAME,
+				style: t9
+			});
+			$[13] = button;
+			$[14] = t9;
+			$[15] = t10;
+		} else t10 = $[15];
+		const t11 = `translate(${bar.left}, max(${y}, 0px))`;
+		let t12;
+		if ($[16] !== t11) {
+			t12 = {
+				width: BAR_SIZE,
+				transform: t11,
+				willChange: "transform",
+				zIndex: 2
+			};
+			$[16] = t11;
+			$[17] = t12;
+		} else t12 = $[17];
+		let t13;
+		if ($[18] !== marker.count || $[19] !== marker.label) {
+			t13 = /* @__PURE__ */ jsxs("span", {
+				className: `${LABEL_CLASS_NAME} rotate-180 [writing-mode:vertical-rl]`,
+				children: [
+					marker.label,
+					" (",
+					marker.count,
+					")"
+				]
+			});
+			$[18] = marker.count;
+			$[19] = marker.label;
+			$[20] = t13;
+		} else t13 = $[20];
+		let t14;
+		if ($[21] !== marker.key || $[22] !== t12 || $[23] !== t13) {
+			t14 = /* @__PURE__ */ jsx("div", {
+				"data-canvas-shelf-marker-label": marker.key,
+				className: "pointer-events-none absolute top-0 left-0 flex justify-center pt-3",
+				style: t12,
+				children: t13
+			});
+			$[21] = marker.key;
+			$[22] = t12;
+			$[23] = t13;
+			$[24] = t14;
+		} else t14 = $[24];
+		let t15;
+		if ($[25] !== t10 || $[26] !== t14) {
+			t15 = /* @__PURE__ */ jsxs(Fragment, { children: [t10, t14] });
+			$[25] = t10;
+			$[26] = t14;
+			$[27] = t15;
+		} else t15 = $[27];
+		return t15;
+	}
+	const labelStart = `max(${start}, calc(${bar.left} + ${12}px), ${24}px)`;
+	const t8 = `calc(${bar.right} - ${bar.left})`;
+	const t9 = `translate(${bar.left}, ${y})`;
+	let t10;
+	if ($[28] !== t8 || $[29] !== t9) {
+		t10 = {
+			height: BAR_SIZE,
+			width: t8,
+			transform: t9,
+			willChange: "transform",
+			zIndex: 2
+		};
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = t10;
+	} else t10 = $[30];
+	let t11;
+	if ($[31] !== button || $[32] !== t10) {
+		t11 = /* @__PURE__ */ jsx("button", {
+			type: "button",
+			...button,
+			className: BAR_CLASS_NAME,
+			style: t10
+		});
+		$[31] = button;
+		$[32] = t10;
+		$[33] = t11;
+	} else t11 = $[33];
+	const t12 = `max(0px, calc(${end} - ${labelStart}))`;
+	const t13 = `translate(${labelStart}, ${y})`;
+	let t14;
+	if ($[34] !== t12 || $[35] !== t13) {
+		t14 = {
+			height: BAR_SIZE,
+			width: t12,
+			transform: t13,
+			willChange: "transform",
+			zIndex: 2
+		};
+		$[34] = t12;
+		$[35] = t13;
+		$[36] = t14;
+	} else t14 = $[36];
+	let t15;
+	if ($[37] !== marker.count || $[38] !== marker.label) {
+		t15 = /* @__PURE__ */ jsxs("span", {
+			className: LABEL_CLASS_NAME,
+			children: [
+				marker.label,
+				" (",
+				marker.count,
+				")"
+			]
+		});
+		$[37] = marker.count;
+		$[38] = marker.label;
+		$[39] = t15;
+	} else t15 = $[39];
+	let t16;
+	if ($[40] !== marker.key || $[41] !== t14 || $[42] !== t15) {
+		t16 = /* @__PURE__ */ jsx("div", {
+			"data-canvas-shelf-marker-label": marker.key,
+			className: "pointer-events-none absolute top-0 left-0 flex items-center overflow-hidden",
+			style: t14,
+			children: t15
+		});
+		$[40] = marker.key;
+		$[41] = t14;
+		$[42] = t15;
+		$[43] = t16;
+	} else t16 = $[43];
+	let t17;
+	if ($[44] !== t11 || $[45] !== t16) {
+		t17 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t16] });
+		$[44] = t11;
+		$[45] = t16;
+		$[46] = t17;
+	} else t17 = $[46];
+	return t17;
+}
+
+//#endregion
+export { CanvasShelfMarkers };

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 };