camox 0.52.2 → 0.53.1

package/dist/core/editing/createEditableBlock.js

@@ -14,12 +14,12 @@ import { markdownToReactNodes } from "../lib/lexicalReact.js";
 import { resolveReference, resolveReferenceList } from "../lib/reference.js";
 import { referencePickerFocus } from "../../features/preview/referencePickerFocus.js";
 import { selectionBlockId } from "../../features/preview/previewStore.js";
+import { overlayFieldId, recordPlacementId } from "../../features/preview/overlayMessages.js";
 import { useIsEditable } from "../hooks/useIsEditable.js";
 import { CanvasWorkspaceContext } from "../../features/canvas/canvasZoom.js";
 import { PreviewEditingOwnerContext, usePreviewSelection, usePreviewTargetSelection } from "../../features/preview/previewSelection.js";
 import { useApplyContentEdit } from "./contentEdits.js";
 import { useFrame } from "../../features/preview/components/Frame.js";
-import { overlayFieldId, recordPlacementId } from "../../features/preview/overlayMessages.js";
 import { useLatestRecord } from "./useLatestRecord.js";
 import { registerRepeatableItem } from "../../features/preview/repeatableItemTargets.js";
 import { revealScrollDelta } from "../../features/preview/selectionReveal.js";

package/dist/features/canvas/CamoxCanvas.js

@@ -41,6 +41,16 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { createStore as createStore$1 } from "@xstate/store";
 
 //#region src/features/canvas/CamoxCanvas.tsx
+/**
+* The Canvas spans the studio under its sidebars, the Canvas sidebar on its left and the chat on
+* its right: the camera frames and snaps Pages between them, and above the studio's bottom edge.
+*/
+const CANVAS_INSETS = {
+	top: 0,
+	right: 265,
+	bottom: 8,
+	left: 265
+};
 function usePreparationFailure(error, t0) {
 	const $ = c(5);
 	const selected = t0 === void 0 ? true : t0;
@@ -448,18 +458,32 @@ function CanvasPageFrameLoader(t0) {
 	} else t2 = $[22];
 	return t2;
 }
-const SNAP_FLASH_KEYFRAMES = [
-	{ opacity: 0 },
-	{
-		opacity: 1,
-		offset: .15
-	},
-	{ opacity: 0 }
+/**
+* How far a sidebar's scrim fades, in px: from this far inside the sidebar, to the edge of a
+* snapped Page, past it by the page fit's padding.
+*/
+const SCRIM_FADE_INSIDE = 48;
+/** How opaque the scrim gets at most: what's under it always shows through, faintly. */
+const SCRIM_MAX_OPACITY = .8;
+/** Opacity along the fade, relative to the most, eased so it leaves no visible edge where it ends. */
+const SCRIM_EASING = [
+	1,
+	.92,
+	.78,
+	.6,
+	.42,
+	.26,
+	.13,
+	.05,
+	0
 ];
-const SNAP_FLASH_TIMING = {
-	duration: 600,
-	easing: "ease-out"
-};
+/** Fades what the Canvas shows around a sidebar into the Canvas's background, toward the sidebar. */
+function scrimGradient(towards, inset) {
+	const from = inset - SCRIM_FADE_INSIDE;
+	const length = SCRIM_FADE_INSIDE + 16;
+	const stops = SCRIM_EASING.map((alpha, index) => `color-mix(in oklab, var(--color-muted) ${alpha * SCRIM_MAX_OPACITY * 100}%, transparent) ${from + length * index / (SCRIM_EASING.length - 1)}px`);
+	return `linear-gradient(to ${towards === "left" ? "right" : "left"}, ${stops.join(", ")})`;
+}
 /** A frame header above an item's slot, at a constant on-screen height. */
 function CanvasHeaderSlot(t0) {
 	const $ = c(10);
@@ -775,7 +799,7 @@ function useWorkspaceThumbnails(workspaceKey) {
 	return thumbnails;
 }
 function CanvasWorkspace(t0) {
-	const $ = c(44);
+	const $ = c(42);
 	const { ref, pages, selectedPage, previewedPage, intendedPageKey, runtimeBasePath, viewport, onActivate, onSelectionIntent } = t0;
 	const { apiUrl, projectUuid } = useAuthContext();
 	const renamePage = useRenamePage();
@@ -865,8 +889,6 @@ function CanvasWorkspace(t0) {
 	const pageSlots = new Map(items.map(t6));
 	const framed = viewport.width < CANVAS_SLOT_WIDTH;
 	const snapTargets = canvasSnapTargets(items);
-	const snapRingRef = React.useRef(null);
-	const snapFlash = React.useRef(null);
 	let t7;
 	if ($[21] !== selectedPage?.key) {
 		t7 = (t8) => {
@@ -898,10 +920,7 @@ function CanvasWorkspace(t0) {
 		},
 		selected: intendedPageKey && pageSlots.has(intendedPageKey) ? intendedPageKey : null,
 		onDeselect: t8,
-		onSnap: () => {
-			snapFlash.current = snapRingRef.current?.animate(SNAP_FLASH_KEYFRAMES, SNAP_FLASH_TIMING) ?? null;
-		},
-		onSnapStretched: () => snapFlash.current?.cancel(),
+		insets: CANVAS_INSETS,
 		onEditorMove: t9
 	});
 	let t10;
@@ -973,39 +992,56 @@ function CanvasWorkspace(t0) {
 		};
 		$[36] = t14;
 	} else t14 = $[36];
-	let t17;
+	const t17 = [...pageSlots.values()].map((t16) => {
+		const { page: page_1, pathname: pathname_4, left: left_0 } = t16;
+		return /* @__PURE__ */ jsx(CanvasHeaderSlot, {
+			itemKey: page_1.key,
+			left: left_0,
+			children: /* @__PURE__ */ jsx(CanvasPageHeader, {
+				page: page_1,
+				pathname: pathname_4,
+				onRename: page_1.kind === "curated" ? (nickname) => renamePage(page_1.pageId, nickname) : void 0,
+				selected: page_1.key === selectedPage?.key,
+				onHoverChange: (hovered) => hover.send({
+					type: "set",
+					pageKey: hovered ? page_1.key : null
+				}),
+				onSelect: () => {
+					if (!pathname_4) return;
+					selectPage(pathname_4);
+				},
+				onChange: (path) => {
+					const inLocale = localized(path);
+					setPreviewPathnames((current) => ({
+						...current,
+						[page_1.key]: inLocale
+					}));
+					selectPage(inLocale);
+				}
+			})
+		}, page_1.key);
+	});
+	let t18;
 	if ($[37] !== pages.length) {
-		t17 = !pages.length && /* @__PURE__ */ jsx(CanvasMessage, { children: "No pages to preview yet." });
+		t18 = !pages.length && /* @__PURE__ */ jsx(CanvasMessage, { children: "No pages to preview yet." });
 		$[37] = pages.length;
-		$[38] = t17;
-	} else t17 = $[38];
-	let t18;
+		$[38] = t18;
+	} else t18 = $[38];
+	let t19;
 	if ($[39] !== instructionsId) {
-		t18 = /* @__PURE__ */ jsx("p", {
+		t19 = /* @__PURE__ */ jsx("p", {
 			id: instructionsId,
 			className: "sr-only",
 			children: "Scroll, or hold Space and drag, to pan. Pinch or Ctrl/⌘ + scroll to zoom. Click a page to edit it. Focus the canvas and use plus or minus to zoom, arrow keys to pan, 0 for 100%, or Home / Shift+1 to fit all pages."
 		});
 		$[39] = instructionsId;
-		$[40] = t18;
-	} else t18 = $[40];
-	let t19;
-	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
-		t19 = { zIndex: 2 };
-		$[41] = t19;
-	} else t19 = $[41];
+		$[40] = t19;
+	} else t19 = $[40];
 	let t20;
-	if ($[42] !== snapRingRef) {
-		t20 = /* @__PURE__ */ jsx("div", {
-			ref: snapRingRef,
-			"aria-hidden": true,
-			"data-canvas-snap-ring": true,
-			className: "ring-primary pointer-events-none absolute inset-0 opacity-0 ring-3 ring-inset",
-			style: t19
-		});
-		$[42] = snapRingRef;
-		$[43] = t20;
-	} else t20 = $[43];
+	if ($[41] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = ["left", "right"].map(_temp3);
+		$[41] = t20;
+	} else t20 = $[41];
 	return /* @__PURE__ */ jsxs("div", {
 		ref: viewportRef,
 		role: "region",
@@ -1046,48 +1082,32 @@ function CanvasWorkspace(t0) {
 					})
 				})
 			}),
-			[...pageSlots.values()].map((t16) => {
-				const { page: page_1, pathname: pathname_4, left: left_0 } = t16;
-				return /* @__PURE__ */ jsx(CanvasHeaderSlot, {
-					itemKey: page_1.key,
-					left: left_0,
-					children: /* @__PURE__ */ jsx(CanvasPageHeader, {
-						page: page_1,
-						pathname: pathname_4,
-						onRename: page_1.kind === "curated" ? (nickname) => renamePage(page_1.pageId, nickname) : void 0,
-						selected: page_1.key === selectedPage?.key,
-						onHoverChange: (hovered) => hover.send({
-							type: "set",
-							pageKey: hovered ? page_1.key : null
-						}),
-						onSelect: () => {
-							if (!pathname_4) return;
-							selectPage(pathname_4);
-						},
-						onChange: (path) => {
-							const inLocale = localized(path);
-							setPreviewPathnames((current) => ({
-								...current,
-								[page_1.key]: inLocale
-							}));
-							selectPage(inLocale);
-						}
-					})
-				}, page_1.key);
-			}),
 			t17,
 			t18,
+			t19,
 			t20
 		]
 	});
 }
+function _temp3(side) {
+	return /* @__PURE__ */ jsx("div", {
+		"aria-hidden": true,
+		"data-canvas-scrim": side,
+		className: "pointer-events-none absolute inset-y-0",
+		style: {
+			[side]: 0,
+			width: CANVAS_INSETS[side] + 16,
+			background: scrimGradient(side, CANVAS_INSETS[side]),
+			zIndex: 2
+		}
+	}, side);
+}
 function CamoxCanvas(t0) {
 	const $ = c(68);
 	const { runtimeBasePath } = t0;
 	const layouts = useRoutableLayouts();
-	const renamePage = useRenamePage();
 	const location = useLocation();
-	const viewportMode = useSelector(previewStore, _temp3);
+	const viewportMode = useSelector(previewStore, _temp4);
 	const viewport = CANVAS_DEVICES[viewportMode === "full" ? "desktop" : viewportMode];
 	const [activeFrame, setActiveFrame] = React.useState(null);
 	const selectedPath = location.pathname;
@@ -1117,7 +1137,7 @@ function CamoxCanvas(t0) {
 		t3 = [];
 		$[4] = t3;
 	} else t3 = $[4];
-	React.useEffect(_temp5, t3);
+	React.useEffect(_temp6, t3);
 	const projectUuid = useProjectUuid();
 	let t4;
 	if ($[5] !== projectUuid) {
@@ -1284,19 +1304,19 @@ function CamoxCanvas(t0) {
 		$[37] = t17;
 	} else t17 = $[37];
 	let t18;
-	if ($[38] !== editingOwner || $[39] !== intendedPage || $[40] !== pageRecord || $[41] !== renamePage || $[42] !== t16) {
+	if ($[38] !== editingOwner || $[39] !== intendedPage || $[40] !== pageRecord || $[41] !== runtimeBasePath || $[42] !== t16) {
 		t18 = /* @__PURE__ */ jsx(CanvasSidebar, {
 			page: intendedPage,
 			navigator: t16,
 			onShowWholeCanvas: t17,
-			onRenamePage: renamePage,
 			owner: editingOwner,
-			pageRecord
+			pageRecord,
+			runtimeBasePath
 		});
 		$[38] = editingOwner;
 		$[39] = intendedPage;
 		$[40] = pageRecord;
-		$[41] = renamePage;
+		$[41] = runtimeBasePath;
 		$[42] = t16;
 		$[43] = t18;
 	} else t18 = $[43];
@@ -1372,7 +1392,7 @@ function CamoxCanvas(t0) {
 	let t25;
 	if ($[64] !== t13 || $[65] !== t20 || $[66] !== t24) {
 		t25 = /* @__PURE__ */ jsxs("div", {
-			className: "flex min-h-0 flex-1 overflow-hidden",
+			className: "relative flex min-h-0 flex-1 overflow-hidden",
 			children: [
 				t13,
 				t20,
@@ -1386,14 +1406,14 @@ function CamoxCanvas(t0) {
 	} else t25 = $[67];
 	return t25;
 }
-function _temp5() {
+function _temp6() {
 	previewStore.send({ type: "clearSelection" });
-	return _temp4;
+	return _temp5;
 }
-function _temp4() {
+function _temp5() {
 	previewStore.send({ type: "clearSelection" });
 }
-function _temp3(state) {
+function _temp4(state) {
 	return state.context.viewportMode;
 }
 

package/dist/features/canvas/CanvasPageFrame.js

@@ -1,8 +1,8 @@
 import { ArtifactsRunContext } from "../../core/hooks/useArtifactHost.js";
+import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
 import { EditableSurfaceContext } from "../../core/hooks/useIsEditable.js";
 import { PreviewEditingOwnerContext } from "../preview/previewSelection.js";
 import { RendererSlot, useRendererHost } from "../renderer/RendererFrames.js";
-import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
 import { PreviewDocumentContext } from "../runtime/PreviewDocumentContext.js";
 import { PreviewPreparationContext } from "../preview/previewPreparation.js";
 import { canvasPageHref, measureCanvasDocument } from "./canvasFrameDocument.js";

package/dist/features/canvas/CanvasPreviewPageSlot.js

@@ -1,5 +1,5 @@
-import { CanvasWorkspaceContext } from "./canvasZoom.js";
 import { useEditingFrameClaim, useEditingOwner } from "../preview/editingFrame.js";
+import { CanvasWorkspaceContext } from "./canvasZoom.js";
 import { ViewportContinuityContext } from "../preview/viewportContinuity.js";
 import { usePreviewPageFrame } from "../preview/previewPageFrame.js";
 import { PreviewPreparationContext } from "../preview/previewPreparation.js";

package/dist/features/canvas/canvasCamera.js

@@ -16,7 +16,7 @@ function findCanvasSnapTarget(camera, viewport, targets) {
 }
 const CANVAS_PADDING = 64;
 /** Screen-space inset of a Page snapped to fit the viewport's width. */
-const CANVAS_PAGE_FIT_PADDING = 24;
+const CANVAS_PAGE_FIT_PADDING = 16;
 const MAX_CANVAS_ZOOM = 2;
 /**
 * Below this, Pages are too small to read while every frame comes near the
@@ -142,11 +142,11 @@ function canvasVerticalRail(delta, time, previous) {
 }
 /** Start at the selected page's top, fitting its width rather than the whole site. */
 function fitCanvasPage(viewport, page) {
-	const padding = Math.min(24, viewport.width / 4);
+	const padding = Math.min(16, viewport.width / 4);
 	const scale = Math.max(Number.EPSILON, Math.min(2, (viewport.width - padding * 2) / Math.max(1, page.width)));
 	return {
 		x: (viewport.width - page.width * scale) / 2 - page.left * scale,
-		y: Math.min(76, viewport.height / 3),
+		y: Math.min(68, viewport.height / 3),
 		scale
 	};
 }

package/dist/features/canvas/sidebar/CanvasInspector.js

@@ -1,151 +1,15 @@
-import { formatShortcut } from "../../../lib/shortcuts.js";
-import "../../preview/components/PageNicknameField.js";
-import { SHOW_WHOLE_CANVAS_SHORTCUT } from "../../preview/previewConstants.js";
+import { SidebarStackHeader } from "../../preview/components/SidebarStack.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Button } from "@camox/ui/button";
-import { Minimize } from "lucide-react";
-import { toast } from "@camox/ui/toaster";
-import * as Tooltip$1 from "@camox/ui/tooltip";
+import { jsx } from "react/jsx-runtime";
 import { Skeleton } from "@camox/ui/skeleton";
 
 //#region src/features/canvas/sidebar/CanvasInspector.tsx
-/**
-* A page nickname that reads as the header's title, and shows it can be edited on hover.
-* Its border and padding are always there, transparent until hovered or focused, so they
-* never move the text. Saves on Enter or blur; Escape puts the nickname back.
-*/
-function PageNicknameInput(t0) {
-	const $ = c(11);
-	const { nickname, onRename } = t0;
-	let t1;
-	if ($[0] !== nickname || $[1] !== onRename) {
-		t1 = async (input) => {
-			const next = input.value.trim();
-			if (next === nickname) return;
-			if (!next) {
-				toast.error("Page nickname is required");
-				input.value = nickname;
-				return;
-			}
-			try {
-				await onRename(next);
-			} catch {
-				toast.error("Could not update page");
-				input.value = nickname;
-			}
-		};
-		$[0] = nickname;
-		$[1] = onRename;
-		$[2] = t1;
-	} else t1 = $[2];
-	const save = t1;
-	let t2;
-	if ($[3] !== save) {
-		t2 = (event) => void save(event.currentTarget);
-		$[3] = save;
-		$[4] = t2;
-	} else t2 = $[4];
-	let t3;
-	if ($[5] !== nickname) {
-		t3 = (event_0) => {
-			event_0.stopPropagation();
-			if (event_0.key === "Enter") {
-				event_0.preventDefault();
-				event_0.currentTarget.blur();
-			}
-			if (event_0.key === "Escape") {
-				event_0.currentTarget.value = nickname;
-				event_0.currentTarget.blur();
-			}
-		};
-		$[5] = nickname;
-		$[6] = t3;
-	} else t3 = $[6];
-	let t4;
-	if ($[7] !== nickname || $[8] !== t2 || $[9] !== t3) {
-		t4 = /* @__PURE__ */ jsx("input", {
-			"aria-label": "Page nickname",
-			defaultValue: nickname,
-			title: nickname,
-			maxLength: 80,
-			className: "hover:border-input focus-visible:border-ring focus-visible:ring-ring/50 -mx-1.5 h-8 w-full min-w-0 truncate rounded-md border border-transparent bg-transparent px-1.5 text-sm font-medium transition-[color,box-shadow,border-color] outline-none hover:shadow-xs focus-visible:ring-3",
-			onBlur: t2,
-			onKeyDown: t3
-		}, nickname);
-		$[7] = nickname;
-		$[8] = t2;
-		$[9] = t3;
-		$[10] = t4;
-	} else t4 = $[10];
-	return t4;
-}
-const HEADER_CLASS_NAME = "border-border flex min-w-0 items-center gap-2.5 border-b p-2";
-/** The item's name, beside a button that leaves the selection and zooms out to the whole Canvas. */
-function CanvasInspectorHeader(t0) {
-	const $ = c(11);
-	const { onBack, children } = t0;
-	let t1;
-	if ($[0] !== onBack) {
-		t1 = /* @__PURE__ */ jsx(Button, {
-			type: "button",
-			variant: "outline",
-			size: "icon-sm",
-			"aria-label": "Show whole canvas",
-			onClick: onBack
-		});
-		$[0] = onBack;
-		$[1] = t1;
-	} else t1 = $[1];
-	let t2;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t2 = /* @__PURE__ */ jsx(Minimize, { className: "text-muted-foreground" });
-		$[2] = t2;
-	} else t2 = $[2];
-	let t3;
-	if ($[3] !== t1) {
-		t3 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
-			render: t1,
-			children: t2
-		});
-		$[3] = t1;
-		$[4] = t3;
-	} else t3 = $[4];
-	let t4;
-	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsxs(Tooltip$1.TooltipContent, {
-			side: "bottom",
-			children: ["Show whole canvas ", formatShortcut(SHOW_WHOLE_CANVAS_SHORTCUT)]
-		});
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== t3) {
-		t5 = /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t3, t4] });
-		$[6] = t3;
-		$[7] = t5;
-	} else t5 = $[7];
-	let t6;
-	if ($[8] !== children || $[9] !== t5) {
-		t6 = /* @__PURE__ */ jsxs("header", {
-			className: HEADER_CLASS_NAME,
-			children: [t5, children]
-		});
-		$[8] = children;
-		$[9] = t5;
-		$[10] = t6;
-	} else t6 = $[10];
-	return t6;
-}
 /** Stands in for the header while the item loads, in its layout, so nothing shifts. */
 function CanvasInspectorHeaderSkeleton() {
 	const $ = c(1);
 	let t0;
 	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-		t0 = /* @__PURE__ */ jsxs("header", {
-			className: HEADER_CLASS_NAME,
-			children: [/* @__PURE__ */ jsx(Skeleton, { className: "size-8" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" })]
-		});
+		t0 = /* @__PURE__ */ jsx(SidebarStackHeader, { children: /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-28" }) });
 		$[0] = t0;
 	} else t0 = $[0];
 	return t0;
@@ -164,25 +28,6 @@ function CanvasInspectorTitle(t0) {
 	} else t1 = $[1];
 	return t1;
 }
-/** A curated page's nickname as the title, which can be renamed in place. */
-function CanvasInspectorNicknameTitle(t0) {
-	const $ = c(3);
-	const { nickname, onRename } = t0;
-	let t1;
-	if ($[0] !== nickname || $[1] !== onRename) {
-		t1 = /* @__PURE__ */ jsx("h2", {
-			className: "flex min-w-0 flex-1",
-			children: /* @__PURE__ */ jsx(PageNicknameInput, {
-				nickname,
-				onRename
-			})
-		});
-		$[0] = nickname;
-		$[1] = onRename;
-		$[2] = t1;
-	} else t1 = $[2];
-	return t1;
-}
 function CanvasInspectorBody(t0) {
 	const $ = c(2);
 	const { children } = t0;
@@ -199,4 +44,4 @@ function CanvasInspectorBody(t0) {
 }
 
 //#endregion
-export { CanvasInspectorBody, CanvasInspectorHeader, CanvasInspectorHeaderSkeleton, CanvasInspectorNicknameTitle, CanvasInspectorTitle };
+export { CanvasInspectorBody, CanvasInspectorHeaderSkeleton, CanvasInspectorTitle };