camox 0.67.0 → 0.69.0

package/dist/core/editing/createEditableBlock.js

@@ -714,7 +714,8 @@ function createEditableBlock(options) {
 			$[5] = t2;
 		} else t2 = $[5];
 		const isHoveredFromSidebar = useOverlayMessage(iframeWindow, isContentEditable, "CAMOX_HOVER_FIELD", "CAMOX_HOVER_FIELD_END", t2);
-		const overlayState = useOverlayState(isHovered || isHoveredFromSidebar);
+		const isFocused = useFieldSelection(blockId, fieldName, "Artifact", itemId);
+		const overlayState = useOverlayState(isHovered || isHoveredFromSidebar, isFocused);
 		let t3;
 		if ($[6] !== blockId || $[7] !== fieldName || $[8] !== itemId || $[9] !== selectTarget) {
 			t3 = () => {

package/dist/features/canvas/canvasFrameDocument.js

@@ -1,5 +1,5 @@
 import { PREVIEW_PAUSED_ATTRIBUTE } from "../../core/lib/previewPaused.js";
-import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle } from "../preview/components/previewStyles.js";
+import { EMPTY_PREVIEW_DOCUMENT, isSiteStyle, restyle } from "../preview/components/previewStyles.js";
 
 //#region src/features/canvas/canvasFrameDocument.ts
 /** Freezes CSS animations, including ones that start while the frame is paused. */
@@ -167,6 +167,29 @@ function createCanvasDocument(previewDocument, href) {
 	return `<!doctype html>${doc.documentElement.outerHTML}`;
 }
 /**
+* Brings the document a Canvas frame loaded up to `canvasDocument`, which `createCanvasDocument`
+* built for the same frame since, without loading it again: the frame keeps showing its page
+* while another draft or locale's takes its place. Its links resolve against the new base, and
+* it takes the new stylesheets, language and direction.
+*/
+function refreshCanvasDocument(frame, canvasDocument) {
+	const doc = frame.document;
+	const next = new DOMParser().parseFromString(canvasDocument, "text/html");
+	const href = next.querySelector("base")?.getAttribute("href");
+	const base = doc.querySelector("base");
+	if (href && base && base.getAttribute("href") !== href) base.setAttribute("href", href);
+	syncAttributes(doc.documentElement, next.documentElement);
+	syncAttributes(doc.body, next.body);
+	restyle(frame, canvasDocument);
+}
+/** Attributes of a Canvas frame's root and body the Canvas writes while it shows the frame. */
+const CANVAS_ATTRIBUTES = /* @__PURE__ */ new Set(["style", PREVIEW_PAUSED_ATTRIBUTE]);
+/** Gives `element` the attributes of `from`, but those the Canvas writes. */
+function syncAttributes(element, from) {
+	for (const name of element.getAttributeNames()) if (!CANVAS_ATTRIBUTES.has(name) && !from.hasAttribute(name)) element.removeAttribute(name);
+	for (const { name, value } of from.attributes) if (!CANVAS_ATTRIBUTES.has(name) && element.getAttribute(name) !== value) element.setAttribute(name, value);
+}
+/**
 * Give a loaded document what `createCanvasDocument` builds into a Canvas frame's,
 * for as long as it shows in the Canvas: no swipe navigation, CSS animations that
 * pause with the frame, and a page as tall as its content. Returns how to undo
@@ -367,4 +390,4 @@ function observeCanvasDocument(iframe, root, viewportHeight, suspended = () => f
 }
 
 //#endregion
-export { adaptCanvasStyleSheets, adoptCanvasDocument, canvasPageHref, canvasSeamCover, createCanvasDocument, logicalViewportValue, measureCanvasDocument, observeCanvasDocument, pauseCanvasDocument };
+export { adaptCanvasStyleSheets, adoptCanvasDocument, canvasPageHref, canvasSeamCover, createCanvasDocument, logicalViewportValue, measureCanvasDocument, observeCanvasDocument, pauseCanvasDocument, refreshCanvasDocument };

package/dist/features/canvas/useCanvasFrame.js

@@ -1,6 +1,6 @@
 import { NavigationProvider } from "../navigation/navigation.js";
 import { FrameContext } from "../preview/components/Frame.js";
-import { createCanvasDocument, observeCanvasDocument, pauseCanvasDocument } from "./canvasFrameDocument.js";
+import { createCanvasDocument, observeCanvasDocument, pauseCanvasDocument, refreshCanvasDocument } from "./canvasFrameDocument.js";
 import { useCanvasFrameInput } from "./useCanvasFrameInput.js";
 import { c } from "react/compiler-runtime";
 import * as React from "react";
@@ -28,9 +28,12 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, mode })
 	const [failure, setFailure] = React.useState(null);
 	const live = mode === "live";
 	const resting = mode === "resting";
+	const frameWindow = React.useRef(null);
 	React.useEffect(() => {
 		try {
-			setSrcDoc(createCanvasDocument(previewDocument, href));
+			const built = createCanvasDocument(previewDocument, href);
+			if (frameWindow.current && previewDocument) return refreshCanvasDocument(frameWindow.current, built);
+			setSrcDoc(built);
 		} catch (error) {
 			setFailure(toError(error));
 		}
@@ -75,6 +78,7 @@ function useCanvasFrame({ previewDocument, href, width, viewportHeight, mode })
 					if (!root) throw new Error("The page preview document has no content root.");
 					if (root === mount) return;
 					root.replaceChildren();
+					frameWindow.current = root.ownerDocument.defaultView;
 					setMount(root);
 					setIframe(loaded);
 				} catch (error) {

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

@@ -3,6 +3,7 @@ import { formatShortcut } from "../../../lib/shortcuts.js";
 import { TOGGLE_CANVAS_SHORTCUT } from "../previewConstants.js";
 import { prefetchCanvas } from "./CanvasPreview.js";
 import { DeviceSelector } from "../../../components/DeviceSelector.js";
+import { DraftBar } from "../../studio/components/DraftBar.js";
 import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@xstate/store-react";
@@ -15,55 +16,60 @@ import { FloatingToolbar } from "@camox/ui/floating-toolbar";
 
 //#region src/features/preview/components/PreviewToolbar.tsx
 const PreviewToolbar = () => {
-	const $ = c(21);
+	const $ = c(22);
 	const isCanvasShown = useSelector(previewStore, selectIsCanvasShown);
 	const isToolbarHidden = useSelector(previewStore, _temp);
 	const viewportMode = useSelector(previewStore, _temp2);
 	if (isToolbarHidden) return null;
 	let t0;
-	if ($[0] !== isCanvasShown) {
-		t0 = /* @__PURE__ */ jsx(Switch, {
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t0 = /* @__PURE__ */ jsx(DraftBar, { stacked: true });
+		$[0] = t0;
+	} else t0 = $[0];
+	let t1;
+	if ($[1] !== isCanvasShown) {
+		t1 = /* @__PURE__ */ jsx(Switch, {
 			id: "show-canvas",
 			checked: isCanvasShown,
 			onCheckedChange: _temp3
 		});
-		$[0] = isCanvasShown;
-		$[1] = t0;
-	} else t0 = $[1];
-	let t1;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t1 = /* @__PURE__ */ jsxs(Label, {
+		$[1] = isCanvasShown;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = /* @__PURE__ */ jsxs(Label, {
 			htmlFor: "show-canvas",
 			className: "flex items-center gap-2",
 			children: ["Show canvas ", formatShortcut(TOGGLE_CANVAS_SHORTCUT)]
 		});
-		$[2] = t1;
-	} else t1 = $[2];
-	let t2;
-	if ($[3] !== t0) {
-		t2 = /* @__PURE__ */ jsxs("div", {
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== t1) {
+		t3 = /* @__PURE__ */ jsxs("div", {
 			className: "flex shrink-0 items-center gap-2 px-2",
 			onPointerEnter: prefetchCanvas,
 			onFocus: prefetchCanvas,
-			children: [t0, t1]
+			children: [t1, t2]
 		});
-		$[3] = t0;
-		$[4] = t2;
-	} else t2 = $[4];
-	const t3 = viewportMode === "full" ? "desktop" : viewportMode;
-	let t4;
-	if ($[5] !== t3) {
-		t4 = /* @__PURE__ */ jsx(DeviceSelector, {
-			value: t3,
+		$[4] = t1;
+		$[5] = t3;
+	} else t3 = $[5];
+	const t4 = viewportMode === "full" ? "desktop" : viewportMode;
+	let t5;
+	if ($[6] !== t4) {
+		t5 = /* @__PURE__ */ jsx(DeviceSelector, {
+			value: t4,
 			desktopLabel: "Full view",
 			onValueChange: _temp4
 		});
-		$[5] = t3;
 		$[6] = t4;
-	} else t4 = $[6];
-	let t5;
-	if ($[7] !== isCanvasShown) {
-		t5 = /* @__PURE__ */ jsx(Button, {
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== isCanvasShown) {
+		t6 = /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			variant: "ghost",
 			size: "icon",
@@ -72,58 +78,61 @@ const PreviewToolbar = () => {
 			"aria-label": "Hide toolbar",
 			className: "text-muted-foreground"
 		});
-		$[7] = isCanvasShown;
-		$[8] = t5;
-	} else t5 = $[8];
-	let t6;
-	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
-		t6 = /* @__PURE__ */ jsx(X, {});
+		$[8] = isCanvasShown;
 		$[9] = t6;
 	} else t6 = $[9];
 	let t7;
-	if ($[10] !== t5) {
-		t7 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
-			render: t5,
-			children: t6
-		});
-		$[10] = t5;
-		$[11] = t7;
-	} else t7 = $[11];
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(X, {});
+		$[10] = t7;
+	} else t7 = $[10];
 	let t8;
-	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
+	if ($[11] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Tooltip$1.TooltipTrigger, {
+			render: t6,
+			children: t7
+		});
+		$[11] = t6;
 		$[12] = t8;
 	} else t8 = $[12];
 	let t9;
-	if ($[13] !== t7) {
-		t9 = /* @__PURE__ */ jsx("div", {
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(Tooltip$1.TooltipContent, { children: "Hide toolbar" });
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== t8) {
+		t10 = /* @__PURE__ */ jsx("div", {
 			className: "-ml-2 flex items-center gap-2",
-			children: /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t7, t8] })
+			children: /* @__PURE__ */ jsxs(Tooltip$1.Tooltip, { children: [t8, t9] })
 		});
-		$[13] = t7;
-		$[14] = t9;
-	} else t9 = $[14];
-	let t10;
-	if ($[15] !== t4 || $[16] !== t9) {
-		t10 = /* @__PURE__ */ jsxs("div", {
+		$[14] = t8;
+		$[15] = t10;
+	} else t10 = $[15];
+	let t11;
+	if ($[16] !== t10 || $[17] !== t5) {
+		t11 = /* @__PURE__ */ jsxs("div", {
 			className: "flex shrink-0 items-center gap-6 self-stretch",
-			children: [t4, t9]
+			children: [t5, t10]
 		});
-		$[15] = t4;
-		$[16] = t9;
-		$[17] = t10;
-	} else t10 = $[17];
-	let t11;
-	if ($[18] !== t10 || $[19] !== t2) {
-		t11 = /* @__PURE__ */ jsxs(FloatingToolbar, {
-			className: "fixed bottom-2 w-max justify-between gap-6 transition-none",
-			children: [t2, t10]
+		$[16] = t10;
+		$[17] = t5;
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] !== t11 || $[20] !== t3) {
+		t12 = /* @__PURE__ */ jsxs("div", {
+			className: "pointer-events-none fixed bottom-2 left-1/2 z-30 flex -translate-x-1/2 flex-col items-center gap-2",
+			children: [t0, /* @__PURE__ */ jsxs(FloatingToolbar, {
+				className: "pointer-events-auto relative left-auto w-max translate-x-0 justify-between gap-6 transition-none",
+				children: [t3, t11]
+			})]
 		});
-		$[18] = t10;
-		$[19] = t2;
-		$[20] = t11;
-	} else t11 = $[20];
-	return t11;
+		$[19] = t11;
+		$[20] = t3;
+		$[21] = t12;
+	} else t12 = $[21];
+	return t12;
 };
 function _temp(state) {
 	return state.context.isToolbarHidden;

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

@@ -13,14 +13,23 @@ const EMPTY_PREVIEW_DOCUMENT = "<!doctype html><html><head></head><body><div id=
 */
 const SITE_STYLESHEETS = "link[rel~=\"stylesheet\"], style";
 const siteStylesheetsOf = (head) => Array.from(head.querySelectorAll(SITE_STYLESHEETS)).filter((element) => element.parentElement === head && isSiteStyle(element) && !element.hasAttribute("data-precedence"));
+/** The attributes of a site document's root that say how its page reads: its language and direction. */
+const ROOT_ATTRIBUTES = ["lang", "dir"];
 /**
 * Gives a frame's document the site stylesheets of `html`, a site document: the ones it no
-* longer has go, and its new ones are added, the rest of the frame left as it is.
+* longer has go, and its new ones are added, the rest of the frame left as it is. Its root takes
+* the document's language and direction, as a page in another locale has its own.
 */
 function restyle(frame, html) {
 	const doc = frame.document;
 	const { DOMParser } = frame;
-	const wanted = siteStylesheetsOf(new DOMParser().parseFromString(html, "text/html").head);
+	const parsed = new DOMParser().parseFromString(html, "text/html");
+	for (const name of ROOT_ATTRIBUTES) {
+		const value = parsed.documentElement.getAttribute(name);
+		if (value === null) doc.documentElement.removeAttribute(name);
+		else if (doc.documentElement.getAttribute(name) !== value) doc.documentElement.setAttribute(name, value);
+	}
+	const wanted = siteStylesheetsOf(parsed.head);
 	const held = siteStylesheetsOf(doc.head);
 	const wantedMarkup = new Set(wanted.map((element) => element.outerHTML));
 	const heldMarkup = new Set(held.map((element) => element.outerHTML));

package/dist/features/preview/repeatableItemTargets.js

@@ -1,14 +1,20 @@
 //#region src/features/preview/repeatableItemTargets.ts
-const registries = /* @__PURE__ */ new WeakMap();
+/**
+* The registry lives on the document, not in this module: the renderer document
+* registers items with its own copy of the SDK, and the studio's copy observes them.
+* `Symbol.for` resolves to the same symbol in every realm.
+*/
+const REGISTRY = Symbol.for("camox.repeatableItems");
+function existingRegistry(document) {
+	return document[REGISTRY];
+}
 function registryOf(document) {
-	let registry = registries.get(document);
-	if (registry) return registry;
-	registry = {
+	const owner = document;
+	owner[REGISTRY] ??= {
 		items: /* @__PURE__ */ new Set(),
 		listeners: /* @__PURE__ */ new Set()
 	};
-	registries.set(document, registry);
-	return registry;
+	return owner[REGISTRY];
 }
 function notify(registry, kind) {
 	for (const listener of registry.listeners) listener(kind);
@@ -41,7 +47,7 @@ function fragmentsOf(element) {
 /** Each registered item with its first-level elements, in document order. */
 function repeatableItemElements(document) {
 	const result = /* @__PURE__ */ new Map();
-	const items = registries.get(document)?.items;
+	const items = existingRegistry(document)?.items;
 	if (!items?.size) return result;
 	for (const item of items) result.set(item, []);
 	for (const element of document.querySelectorAll("*")) {

package/dist/features/provider/AuthenticatedCamoxProvider.js

@@ -1,11 +1,12 @@
 import { useDraftScope } from "../../lib/draft-scope.js";
-import { AuthContext, useAuthActions } from "../../lib/auth.js";
+import { AuthContext, signedInUserId, useAuthActions } from "../../lib/auth.js";
 import { reads, useReadQuery, useStudioCache } from "../../lib/studio-reads.js";
 import { RevisionsContext, createRevisions } from "../../lib/revisions.js";
 import { useAdminShortcuts } from "./useAdminShortcuts.js";
 import { useApplyTheme, useThemeActions } from "../studio/useTheme.js";
 import { usePreviewPagesActions, useShowCanvasAction } from "../preview/CamoxPreview.js";
 import { useProjectRoom } from "../../lib/use-project-room.js";
+import { useLeaveDraft } from "../studio/viewSwitch.js";
 import { useNavbarActions } from "../studio/components/Navbar.js";
 import { draftNoticeMessage } from "../studio/draftNotice.js";
 import { CommandPalette, useCommandPaletteActions } from "./components/CommandPalette.js";
@@ -17,7 +18,7 @@ import studioCssUrl from "virtual:camox-studio-css";
 
 //#region src/features/provider/AuthenticatedCamoxProvider.tsx
 function AuthenticatedCamoxProvider(t0) {
-	const $ = c(18);
+	const $ = c(20);
 	const { children } = t0;
 	useAdminShortcuts();
 	useCommandPaletteActions();
@@ -26,7 +27,7 @@ function AuthenticatedCamoxProvider(t0) {
 	useNavbarActions();
 	usePreviewPagesActions();
 	useShowCanvasAction();
-	const { apiUrl, projectUuid } = React.useContext(AuthContext);
+	const { apiUrl, projectUuid, authClient } = React.useContext(AuthContext);
 	let t1;
 	if ($[0] !== projectUuid) {
 		t1 = reads.project({ projectUuid });
@@ -50,49 +51,53 @@ function AuthenticatedCamoxProvider(t0) {
 	}
 	React.useEffect(t2, t3);
 	const [revisions] = React.useState(createRevisions);
+	const leaveDraft = useLeaveDraft();
 	let t4;
-	if ($[5] !== draftScope || $[6] !== revisions) {
+	if ($[5] !== authClient || $[6] !== draftScope || $[7] !== leaveDraft || $[8] !== revisions) {
 		let t5;
-		if ($[8] !== revisions) {
+		if ($[10] !== revisions) {
 			t5 = (revision) => revisions.announce(revision);
-			$[8] = revisions;
-			$[9] = t5;
-		} else t5 = $[9];
+			$[10] = revisions;
+			$[11] = t5;
+		} else t5 = $[11];
 		t4 = {
 			onDraftEnded(ended) {
 				if (ended.draftId !== draftScope.current()) return;
+				if (ended.endedBy.id === signedInUserId(authClient)) return leaveDraft(ended);
 				draftScope.leave(ended, { notice: true });
 			},
 			onRevision: t5
 		};
-		$[5] = draftScope;
-		$[6] = revisions;
-		$[7] = t4;
-	} else t4 = $[7];
+		$[5] = authClient;
+		$[6] = draftScope;
+		$[7] = leaveDraft;
+		$[8] = revisions;
+		$[9] = t4;
+	} else t4 = $[9];
 	useProjectRoom(apiUrl, project?.id, studioCache, t4);
 	const { resolvedTheme } = useApplyTheme();
 	let t5;
-	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = /* @__PURE__ */ jsx("link", {
 			rel: "stylesheet",
 			href: studioCssUrl,
 			"data-camox-studio": true
 		});
-		$[10] = t5;
-	} else t5 = $[10];
+		$[12] = t5;
+	} else t5 = $[12];
 	let t6;
-	if ($[11] !== resolvedTheme) {
+	if ($[13] !== resolvedTheme) {
 		t6 = /* @__PURE__ */ jsx(Toaster, { theme: resolvedTheme });
-		$[11] = resolvedTheme;
-		$[12] = t6;
-	} else t6 = $[12];
+		$[13] = resolvedTheme;
+		$[14] = t6;
+	} else t6 = $[14];
 	let t7;
-	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
 		t7 = /* @__PURE__ */ jsx(CommandPalette, {});
-		$[13] = t7;
-	} else t7 = $[13];
+		$[15] = t7;
+	} else t7 = $[15];
 	let t8;
-	if ($[14] !== children || $[15] !== revisions || $[16] !== t6) {
+	if ($[16] !== children || $[17] !== revisions || $[18] !== t6) {
 		t8 = /* @__PURE__ */ jsxs(RevisionsContext, {
 			value: revisions,
 			children: [
@@ -102,11 +107,11 @@ function AuthenticatedCamoxProvider(t0) {
 				t7
 			]
 		});
-		$[14] = children;
-		$[15] = revisions;
-		$[16] = t6;
-		$[17] = t8;
-	} else t8 = $[17];
+		$[16] = children;
+		$[17] = revisions;
+		$[18] = t6;
+		$[19] = t8;
+	} else t8 = $[19];
 	return t8;
 }
 function _temp(notice) {