@phtngyn/cms 0.2.0-beta.4 → 0.2.0-beta.6

package/src/runtime/preview/controller.js

@@ -1,38 +1,22 @@
-import { a as EditorNodeId, l as RevisionNumber, r as DocumentId } from "../../scalars-B2lgGUnj.js";
-import { Et as RequestId } from "../../models-ChRxBChy.js";
-import { r as PreviewIntentId } from "../../models-C9kF9JlQ.js";
+import { a as EditorNodeId, c as RevisionNumber, r as DocumentId } from "../../scalars-CVZqT3L0.js";
+import { st as RequestId } from "../../models-VmGmG19-.js";
+import { r as PreviewIntentId } from "../../models-5j67LMqW.js";
 import { mountPreviewOverlay } from "./overlay.js";
-import { clearPreviewTargets, decoratePreviewTargets, findPreviewNodeId, nearestPreviewElement, resolvePreviewTarget } from "./targets.js";
-import { Crypto, Effect, PlatformError, Schema } from "effect";
+import { mountPreviewRegions } from "./regions.js";
+import { Schema } from "effect";
 
 //#region src/runtime/preview/controller.ts
-const browserCrypto = Crypto.make({
-	digest: (algorithm, data) => Effect.tryPromise({
-		catch: (cause) => PlatformError.systemError({
-			_tag: unknownSystemErrorTag,
-			cause,
-			description: "Could not compute digest",
-			method: "digest",
-			module: "Crypto"
-		}),
-		try: () => globalThis.crypto.subtle.digest(algorithm, Uint8Array.from(data)).then((digest) => new Uint8Array(digest))
-	}),
-	randomBytes: (size) => globalThis.crypto.getRandomValues(new Uint8Array(size))
-});
-const unknownSystemErrorTag = "Unknown";
-const randomUuid = () => Effect.runSync(browserCrypto.randomUUIDv4.pipe(Effect.orDie));
 function mountPreviewController(options) {
 	const { bridge, root, store, view } = options;
 	const selection = mountPreviewOverlay(root, view);
 	const hover = mountPreviewOverlay(root, view, "hover");
+	const regions = mountPreviewRegions(root, view);
 	let active = false;
 	let desiredFocus;
 	let fallbacks = {};
-	let hoveredElements = [];
 	let mode = "edit";
 	let renderSequence = 0;
 	let revision = RevisionNumber.make(0);
-	let selectedElements = [];
 	let lastApplied = "";
 	let revealedIntentId = "";
 	const sendManifest = () => {
@@ -43,9 +27,6 @@ function mountPreviewController(options) {
 		});
 	};
 	const stopManifest = store.subscribe(sendManifest);
-	const clearElements = (elements, attribute) => {
-		for (const element of elements) element.removeAttribute(attribute);
-	};
 	const sendApplied = (result) => {
 		if (!desiredFocus) return;
 		const signature = `${desiredFocus.id}:${result}`;
@@ -64,54 +45,54 @@ function mountPreviewController(options) {
 	};
 	const documentRoot = (documentId) => [...root.querySelectorAll("[data-cms-document]")].find((element) => element.getAttribute("data-cms-document") === documentId) ?? root;
 	const applyFocus = (reveal = false) => {
-		clearElements(selectedElements, "data-cms-selected");
-		selectedElements = [];
-		if (!active || mode !== "edit") {
-			selection.set([]);
+		if (!active && mode === "edit") {
+			selection.setPending(true);
+			return;
+		}
+		selection.setPending(false);
+		if (mode !== "edit") {
+			selection.show([]);
 			return;
 		}
 		const intent = desiredFocus;
 		const nodeId = intent?.nodeId;
 		if (!intent || !nodeId) {
-			selection.set([]);
+			selection.show([]);
 			sendApplied("exact");
 			return;
 		}
 		const scope = documentRoot(intent.documentId);
-		decoratePreviewTargets(scope);
-		const target = resolvePreviewTarget(scope, nodeId, fallbacks);
-		selectedElements = target.elements;
-		selection.set(selectedElements);
-		for (const element of selectedElements) element.setAttribute("data-cms-selected", "");
-		const result = !target.resolvedNodeId ? "missing" : target.resolvedNodeId === nodeId ? "exact" : "fallback";
+		const target = regions.locate(nodeId, fallbacks, scope);
+		const result = !target.nodeId ? "missing" : target.nodeId === nodeId ? "exact" : "fallback";
+		selection.show(target.geometries, {
+			label: intent.label,
+			match: result === "missing" ? void 0 : result,
+			reveal
+		});
 		if (reveal && result !== "missing" && revealedIntentId !== intent.id) {
 			revealedIntentId = intent.id;
-			revealElement(nearestPreviewElement(selectedElements), view);
+			revealElement(regions.nearest(target.geometries), view);
 		}
 		sendApplied(result);
 	};
-	const hoverElements = (target) => {
-		clearElements(hoveredElements, "data-cms-hovered");
-		hoveredElements = [];
-		if (!active || mode !== "edit" || !target) {
-			hover.set([]);
+	const hoverElements = (target, x, y) => {
+		if (!active || mode !== "edit" || !target || x === void 0 || y === void 0) {
+			hover.show([]);
 			return;
 		}
 		const scope = target.closest("[data-cms-document]") ?? root;
-		const nodeId = findPreviewNodeId(scope, target);
+		const nodeId = regions.hitTest(x, y, scope);
 		if (!nodeId) {
-			hover.set([]);
+			hover.show([]);
 			return;
 		}
-		hoveredElements = resolvePreviewTarget(scope, nodeId, fallbacks).elements;
-		for (const element of hoveredElements) element.setAttribute("data-cms-hovered", "");
-		hover.set(hoveredElements);
+		hover.show(regions.locate(nodeId, fallbacks, scope).geometries);
 	};
 	const settleRender = (sequence) => {
 		view.requestAnimationFrame(() => view.requestAnimationFrame(() => {
 			if (sequence !== renderSequence) return;
 			active = true;
-			decoratePreviewTargets(root);
+			regions.decorate();
 			bridge.send({
 				revision,
 				type: "preview:rendered"
@@ -122,8 +103,8 @@ function mountPreviewController(options) {
 	const stopBridge = bridge.subscribe((message) => {
 		if (message.type === "studio:connect") {
 			active = true;
-			clearPreviewTargets(root);
-			decoratePreviewTargets(root);
+			regions.clear();
+			regions.decorate();
 			sendManifest();
 			return;
 		}
@@ -131,11 +112,11 @@ function mountPreviewController(options) {
 			mode = message.mode;
 			if (mode === "browse") {
 				hoverElements();
-				clearElements(selectedElements, "data-cms-selected");
-				selectedElements = [];
-				selection.set([]);
+				selection.setPending(false);
+				selection.show([]);
+				regions.clear();
 			} else {
-				decoratePreviewTargets(root);
+				regions.decorate();
 				applyFocus();
 			}
 			return;
@@ -153,6 +134,7 @@ function mountPreviewController(options) {
 		if (message.type !== "studio:patch" || message.revision < revision) return;
 		revision = message.revision;
 		active = false;
+		selection.setPending(true);
 		desiredFocus = message.focus;
 		lastApplied = "";
 		const sequence = ++renderSequence;
@@ -184,12 +166,11 @@ function mountPreviewController(options) {
 		if (!target || !scope || !Schema.is(DocumentId)(documentIdValue)) return;
 		event.preventDefault();
 		event.stopPropagation();
-		const nodeIdValue = findPreviewNodeId(scope, target);
+		const nodeIdValue = regions.hitTest(event.clientX, event.clientY, scope);
 		const nodeId = Schema.is(EditorNodeId)(nodeIdValue) ? nodeIdValue : void 0;
-		const field = target.closest("[data-cms-field]")?.getAttribute("data-cms-field") || void 0;
 		const activationFocus = {
 			documentId: documentIdValue,
-			id: PreviewIntentId.make(randomUuid()),
+			id: PreviewIntentId.make(globalThis.crypto.randomUUID()),
 			origin: "preview",
 			reveal: false,
 			revision
@@ -201,29 +182,38 @@ function mountPreviewController(options) {
 		lastApplied = "";
 		const activation = {
 			documentId: desiredFocus.documentId,
-			requestId: RequestId.make(randomUuid()),
+			requestId: RequestId.make(globalThis.crypto.randomUUID()),
 			revision,
 			type: "preview:activate"
 		};
-		if (field && nodeId) bridge.send({
-			...activation,
-			field,
-			nodeId
-		});
-		else if (field) bridge.send({
-			...activation,
-			field
-		});
-		else if (nodeId) bridge.send({
+		if (nodeId) bridge.send({
 			...activation,
 			nodeId
 		});
 		else bridge.send(activation);
 		applyFocus();
 	};
-	const handlePointerOver = (event) => hoverElements(event.target instanceof Element ? event.target : void 0);
+	let hoverFrame = 0;
+	let hoverPointer;
+	const handlePointerMove = (event) => {
+		if (!(event.target instanceof Element)) return;
+		hoverPointer = {
+			target: event.target,
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (hoverFrame) return;
+		hoverFrame = view.requestAnimationFrame(() => {
+			hoverFrame = 0;
+			const pointer = hoverPointer;
+			if (pointer) hoverElements(pointer.target, pointer.x, pointer.y);
+		});
+	};
 	const handlePointerOut = (event) => {
-		if (!(event.relatedTarget instanceof Element)) hoverElements();
+		if (!(event.relatedTarget instanceof Element)) {
+			hoverPointer = void 0;
+			hoverElements();
+		}
 	};
 	let mutationQueued = false;
 	const observer = new MutationObserver((records) => {
@@ -234,12 +224,12 @@ function mountPreviewController(options) {
 			mutationQueued = false;
 			if (!active) return;
 			hoverElements();
-			decoratePreviewTargets(root);
+			regions.decorate();
 			if (desiredFocus) applyFocus(false);
 		});
 	});
 	root.addEventListener("click", handleClick, true);
-	root.addEventListener("pointerover", handlePointerOver, true);
+	root.addEventListener("pointermove", handlePointerMove, true);
 	root.addEventListener("pointerout", handlePointerOut, true);
 	observer.observe(root.documentElement, {
 		childList: true,
@@ -249,12 +239,13 @@ function mountPreviewController(options) {
 		stopBridge();
 		stopManifest();
 		observer.disconnect();
+		if (hoverFrame) view.cancelAnimationFrame(hoverFrame);
 		selection.destroy();
 		hover.destroy();
 		root.removeEventListener("click", handleClick, true);
-		root.removeEventListener("pointerover", handlePointerOver, true);
+		root.removeEventListener("pointermove", handlePointerMove, true);
 		root.removeEventListener("pointerout", handlePointerOut, true);
-		clearPreviewTargets(root);
+		regions.clear();
 	};
 }
 function revealElement(element, view) {

package/src/runtime/preview/controller.js.map

@@ -1 +1 @@
-{"version":3,"file":"controller.js","names":[],"sources":["../../../../../src/runtime/preview/controller.ts"],"sourcesContent":["import type { DocumentPreviewFocusIntent, PreviewSiteBridge, StudioPreviewPayload } from '@internal/protocol/Preview'\nimport type { StudioPreviewStore } from './store'\nimport { DocumentId, EditorNodeId, RevisionNumber } from '@internal/protocol/Documents'\nimport { RequestId } from '@internal/protocol/Identity'\nimport { PreviewIntentId } from '@internal/protocol/Preview'\nimport { Crypto, Effect, PlatformError, Schema } from 'effect'\nimport { mountPreviewOverlay } from './overlay'\nimport {\n  clearPreviewTargets,\n  decoratePreviewTargets,\n  findPreviewNodeId,\n  nearestPreviewElement,\n  resolvePreviewTarget,\n} from './targets'\n\nconst browserCrypto = Crypto.make({\n  digest: (algorithm, data) =>\n    Effect.tryPromise({\n      catch: (cause) =>\n        PlatformError.systemError({\n          _tag: unknownSystemErrorTag,\n          cause,\n          description: 'Could not compute digest',\n          method: 'digest',\n          module: 'Crypto',\n        }),\n      try: () =>\n        globalThis.crypto.subtle.digest(algorithm, Uint8Array.from(data)).then((digest) => new Uint8Array(digest)),\n    }),\n  randomBytes: (size) => globalThis.crypto.getRandomValues(new Uint8Array(size)),\n})\n\nconst unknownSystemErrorTag: PlatformError.SystemErrorTag = 'Unknown'\n\nconst randomUuid = (): string => Effect.runSync(browserCrypto.randomUUIDv4.pipe(Effect.orDie))\n\nexport function mountPreviewController(options: {\n  readonly bridge: PreviewSiteBridge\n  readonly navigate: (path: string) => Promise<void> | void\n  readonly onPatchError: (message: string | null) => void\n  readonly root: Document\n  readonly store: StudioPreviewStore\n  readonly view: Window\n}): () => void {\n  type PreviewFallbacks = Extract<StudioPreviewPayload, { readonly type: 'studio:patch' }>['fallbacks']\n\n  const { bridge, root, store, view } = options\n  const selection = mountPreviewOverlay(root, view)\n  const hover = mountPreviewOverlay(root, view, 'hover')\n  let active = false\n  let desiredFocus: DocumentPreviewFocusIntent | undefined\n  let fallbacks: PreviewFallbacks = {}\n  let hoveredElements: ReadonlyArray<Element> = []\n  let mode: 'browse' | 'edit' = 'edit'\n  let renderSequence = 0\n  let revision = RevisionNumber.make(0)\n  let selectedElements: ReadonlyArray<Element> = []\n  let lastApplied = ''\n  let revealedIntentId = ''\n\n  const sendManifest = (): void => {\n    bridge.send({ manifest: store.manifest(), revision, type: 'preview:manifest' })\n  }\n\n  const stopManifest = store.subscribe(sendManifest)\n\n  const clearElements = (elements: ReadonlyArray<Element>, attribute: string): void => {\n    for (const element of elements) element.removeAttribute(attribute)\n  }\n\n  const sendApplied = (result: 'exact' | 'fallback' | 'missing'): void => {\n    if (!desiredFocus) return\n    const signature = `${desiredFocus.id}:${result}`\n\n    if (signature === lastApplied) return\n    lastApplied = signature\n\n    const applied = {\n      intentId: desiredFocus.id,\n      result,\n      revision,\n      type: 'preview:applied',\n    } as const\n\n    bridge.send(desiredFocus.nodeId ? { ...applied, nodeId: desiredFocus.nodeId } : applied)\n  }\n\n  const documentRoot = (documentId: string): ParentNode =>\n    [...root.querySelectorAll('[data-cms-document]')].find(\n      (element) => element.getAttribute('data-cms-document') === documentId,\n    ) ?? root\n\n  const applyFocus = (reveal = false): void => {\n    clearElements(selectedElements, 'data-cms-selected')\n    selectedElements = []\n\n    if (!active || mode !== 'edit') {\n      selection.set([])\n\n      return\n    }\n\n    const intent = desiredFocus\n    const nodeId = intent?.nodeId\n\n    if (!intent || !nodeId) {\n      selection.set([])\n      sendApplied('exact')\n\n      return\n    }\n\n    const scope = documentRoot(intent.documentId)\n    decoratePreviewTargets(scope)\n    const target = resolvePreviewTarget(scope, nodeId, fallbacks)\n    selectedElements = target.elements\n    selection.set(selectedElements)\n\n    for (const element of selectedElements) element.setAttribute('data-cms-selected', '')\n    const result = !target.resolvedNodeId ? 'missing' : target.resolvedNodeId === nodeId ? 'exact' : 'fallback'\n\n    if (reveal && result !== 'missing' && revealedIntentId !== intent.id) {\n      revealedIntentId = intent.id\n      revealElement(nearestPreviewElement(selectedElements), view)\n    }\n\n    sendApplied(result)\n  }\n\n  const hoverElements = (target?: Element): void => {\n    clearElements(hoveredElements, 'data-cms-hovered')\n    hoveredElements = []\n\n    if (!active || mode !== 'edit' || !target) {\n      hover.set([])\n\n      return\n    }\n\n    const scope = target.closest('[data-cms-document]') ?? root\n    const nodeId = findPreviewNodeId(scope, target)\n\n    if (!nodeId) {\n      hover.set([])\n\n      return\n    }\n\n    hoveredElements = resolvePreviewTarget(scope, nodeId, fallbacks).elements\n\n    for (const element of hoveredElements) element.setAttribute('data-cms-hovered', '')\n    hover.set(hoveredElements)\n  }\n\n  const settleRender = (sequence: number): void => {\n    view.requestAnimationFrame(() =>\n      view.requestAnimationFrame(() => {\n        if (sequence !== renderSequence) return\n        active = true\n        decoratePreviewTargets(root)\n        bridge.send({ revision, type: 'preview:rendered' })\n        applyFocus(desiredFocus?.reveal)\n      }),\n    )\n  }\n\n  const stopBridge = bridge.subscribe((message) => {\n    if (message.type === 'studio:connect') {\n      active = true\n      clearPreviewTargets(root)\n      decoratePreviewTargets(root)\n      sendManifest()\n\n      return\n    }\n\n    if (message.type === 'studio:mode') {\n      mode = message.mode\n\n      if (mode === 'browse') {\n        hoverElements()\n        clearElements(selectedElements, 'data-cms-selected')\n        selectedElements = []\n        selection.set([])\n      } else {\n        decoratePreviewTargets(root)\n        applyFocus()\n      }\n\n      return\n    }\n\n    if (message.type === 'studio:navigate') {\n      void options.navigate(message.path)\n\n      return\n    }\n\n    if (message.type === 'studio:focus') {\n      if (message.focus.revision !== revision) return\n      desiredFocus = message.focus\n      applyFocus(desiredFocus.reveal)\n\n      return\n    }\n\n    if (message.type !== 'studio:patch' || message.revision < revision) return\n    revision = message.revision\n    active = false\n    desiredFocus = message.focus\n    lastApplied = ''\n    const sequence = ++renderSequence\n    void store.patch(message.document).then(\n      (localFallbacks) => {\n        if (sequence !== renderSequence) return\n        options.onPatchError(null)\n        fallbacks = Object.assign({}, message.fallbacks, localFallbacks)\n        settleRender(sequence)\n      },\n      () => {\n        if (sequence !== renderSequence) return\n        options.onPatchError('Preview could not apply this update.')\n      },\n    )\n  })\n\n  const handleClick = (event: MouseEvent) => {\n    if (!active) return\n    const target = event.target instanceof Element ? event.target : null\n\n    if (mode === 'browse') {\n      const link = target?.closest('a[href]')\n\n      if (\n        !(link instanceof HTMLAnchorElement) ||\n        link.target ||\n        link.hasAttribute('download') ||\n        event.metaKey ||\n        event.ctrlKey ||\n        event.shiftKey ||\n        event.altKey\n      )\n        return\n      const destination = new URL(link.href, view.location.href)\n\n      if (destination.origin !== view.location.origin) return\n      event.preventDefault()\n      event.stopPropagation()\n      void options.navigate(`${destination.pathname}${destination.search}${destination.hash}`)\n\n      return\n    }\n\n    const scope = target?.closest('[data-cms-document]')\n    const documentIdValue = scope?.getAttribute('data-cms-document')\n\n    if (!target || !scope || !Schema.is(DocumentId)(documentIdValue)) return\n    event.preventDefault()\n    event.stopPropagation()\n    const nodeIdValue = findPreviewNodeId(scope, target)\n    const nodeId = Schema.is(EditorNodeId)(nodeIdValue) ? nodeIdValue : undefined\n    const field = target.closest('[data-cms-field]')?.getAttribute('data-cms-field') || undefined\n\n    const activationFocus = {\n      documentId: documentIdValue,\n      id: PreviewIntentId.make(randomUuid()),\n      origin: 'preview',\n      reveal: false,\n      revision,\n    } as const\n\n    desiredFocus = nodeId ? { ...activationFocus, nodeId } : activationFocus\n    lastApplied = ''\n\n    const activation = {\n      documentId: desiredFocus.documentId,\n      requestId: RequestId.make(randomUuid()),\n      revision,\n      type: 'preview:activate',\n    } as const\n\n    if (field && nodeId) bridge.send({ ...activation, field, nodeId })\n    else if (field) bridge.send({ ...activation, field })\n    else if (nodeId) bridge.send({ ...activation, nodeId })\n    else bridge.send(activation)\n    applyFocus()\n  }\n\n  const handlePointerOver = (event: PointerEvent) =>\n    hoverElements(event.target instanceof Element ? event.target : undefined)\n\n  const handlePointerOut = (event: PointerEvent) => {\n    if (!(event.relatedTarget instanceof Element)) hoverElements()\n  }\n\n  let mutationQueued = false\n\n  const observer = new MutationObserver((records) => {\n    if (\n      records.every((record) => record.target instanceof Element && record.target.closest('[data-cms-preview-overlay]'))\n    )\n      return\n\n    if (mutationQueued) return\n    mutationQueued = true\n    queueMicrotask(() => {\n      mutationQueued = false\n\n      if (!active) return\n      hoverElements()\n      decoratePreviewTargets(root)\n\n      if (desiredFocus) applyFocus(false)\n    })\n  })\n\n  root.addEventListener('click', handleClick, true)\n  root.addEventListener('pointerover', handlePointerOver, true)\n  root.addEventListener('pointerout', handlePointerOut, true)\n  observer.observe(root.documentElement, { childList: true, subtree: true })\n\n  return () => {\n    stopBridge()\n    stopManifest()\n    observer.disconnect()\n    selection.destroy()\n    hover.destroy()\n    root.removeEventListener('click', handleClick, true)\n    root.removeEventListener('pointerover', handlePointerOver, true)\n    root.removeEventListener('pointerout', handlePointerOut, true)\n    clearPreviewTargets(root)\n  }\n}\n\nfunction revealElement(element: Element | undefined, view: Window): void {\n  if (!element) return\n  const rect = element.getBoundingClientRect()\n\n  if (rect.bottom > 0 && rect.top < view.innerHeight && rect.right > 0 && rect.left < view.innerWidth) return\n  element.scrollIntoView({\n    behavior: 'instant',\n    block: 'center',\n    inline: 'nearest',\n  })\n}\n"],"mappings":"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"}
+{"version":3,"file":"controller.js","names":[],"sources":["../../../../../src/runtime/preview/controller.ts"],"sourcesContent":["import type { DocumentPreviewFocusIntent, PreviewSiteBridge, StudioPreviewPayload } from '@internal/protocol/Preview'\nimport type { StudioPreviewStore } from './store'\nimport { DocumentId, EditorNodeId, RevisionNumber } from '@internal/protocol/Documents'\nimport { RequestId } from '@internal/protocol/Identity'\nimport { PreviewIntentId } from '@internal/protocol/Preview'\nimport { Schema } from 'effect'\nimport { mountPreviewOverlay } from './overlay'\nimport { mountPreviewRegions } from './regions'\n\nexport function mountPreviewController(options: {\n  readonly bridge: PreviewSiteBridge\n  readonly navigate: (path: string) => Promise<void> | void\n  readonly onPatchError: (message: string | null) => void\n  readonly root: Document\n  readonly store: StudioPreviewStore\n  readonly view: Window\n}): () => void {\n  type PreviewFallbacks = Extract<StudioPreviewPayload, { readonly type: 'studio:patch' }>['fallbacks']\n\n  const { bridge, root, store, view } = options\n  const selection = mountPreviewOverlay(root, view)\n  const hover = mountPreviewOverlay(root, view, 'hover')\n  const regions = mountPreviewRegions(root, view)\n  let active = false\n  let desiredFocus: DocumentPreviewFocusIntent | undefined\n  let fallbacks: PreviewFallbacks = {}\n  let mode: 'browse' | 'edit' = 'edit'\n  let renderSequence = 0\n  let revision = RevisionNumber.make(0)\n  let lastApplied = ''\n  let revealedIntentId = ''\n\n  const sendManifest = (): void => {\n    bridge.send({ manifest: store.manifest(), revision, type: 'preview:manifest' })\n  }\n\n  const stopManifest = store.subscribe(sendManifest)\n\n  const sendApplied = (result: 'exact' | 'fallback' | 'missing'): void => {\n    if (!desiredFocus) return\n    const signature = `${desiredFocus.id}:${result}`\n\n    if (signature === lastApplied) return\n    lastApplied = signature\n\n    const applied = {\n      intentId: desiredFocus.id,\n      result,\n      revision,\n      type: 'preview:applied',\n    } as const\n\n    bridge.send(desiredFocus.nodeId ? { ...applied, nodeId: desiredFocus.nodeId } : applied)\n  }\n\n  const documentRoot = (documentId: string): ParentNode =>\n    [...root.querySelectorAll('[data-cms-document]')].find(\n      (element) => element.getAttribute('data-cms-document') === documentId,\n    ) ?? root\n\n  const applyFocus = (reveal = false): void => {\n    if (!active && mode === 'edit') {\n      selection.setPending(true)\n\n      return\n    }\n\n    selection.setPending(false)\n\n    if (mode !== 'edit') {\n      selection.show([])\n\n      return\n    }\n\n    const intent = desiredFocus\n    const nodeId = intent?.nodeId\n\n    if (!intent || !nodeId) {\n      selection.show([])\n      sendApplied('exact')\n\n      return\n    }\n\n    const scope = documentRoot(intent.documentId)\n    const target = regions.locate(nodeId, fallbacks, scope)\n    const result = !target.nodeId ? 'missing' : target.nodeId === nodeId ? 'exact' : 'fallback'\n\n    selection.show(target.geometries, {\n      label: intent.label,\n      match: result === 'missing' ? undefined : result,\n      reveal,\n    })\n\n    if (reveal && result !== 'missing' && revealedIntentId !== intent.id) {\n      revealedIntentId = intent.id\n      revealElement(regions.nearest(target.geometries), view)\n    }\n\n    sendApplied(result)\n  }\n\n  const hoverElements = (target?: Element, x?: number, y?: number): void => {\n    if (!active || mode !== 'edit' || !target || x === undefined || y === undefined) {\n      hover.show([])\n\n      return\n    }\n\n    const scope = target.closest('[data-cms-document]') ?? root\n    const nodeId = regions.hitTest(x, y, scope)\n\n    if (!nodeId) {\n      hover.show([])\n\n      return\n    }\n\n    hover.show(regions.locate(nodeId, fallbacks, scope).geometries)\n  }\n\n  const settleRender = (sequence: number): void => {\n    view.requestAnimationFrame(() =>\n      view.requestAnimationFrame(() => {\n        if (sequence !== renderSequence) return\n        active = true\n        regions.decorate()\n        bridge.send({ revision, type: 'preview:rendered' })\n        applyFocus(desiredFocus?.reveal)\n      }),\n    )\n  }\n\n  const stopBridge = bridge.subscribe((message) => {\n    if (message.type === 'studio:connect') {\n      active = true\n      regions.clear()\n      regions.decorate()\n      sendManifest()\n\n      return\n    }\n\n    if (message.type === 'studio:mode') {\n      mode = message.mode\n\n      if (mode === 'browse') {\n        hoverElements()\n        selection.setPending(false)\n        selection.show([])\n        regions.clear()\n      } else {\n        regions.decorate()\n        applyFocus()\n      }\n\n      return\n    }\n\n    if (message.type === 'studio:navigate') {\n      void options.navigate(message.path)\n\n      return\n    }\n\n    if (message.type === 'studio:focus') {\n      if (message.focus.revision !== revision) return\n      desiredFocus = message.focus\n      applyFocus(desiredFocus.reveal)\n\n      return\n    }\n\n    if (message.type !== 'studio:patch' || message.revision < revision) return\n    revision = message.revision\n    active = false\n    selection.setPending(true)\n    desiredFocus = message.focus\n    lastApplied = ''\n    const sequence = ++renderSequence\n    void store.patch(message.document).then(\n      (localFallbacks) => {\n        if (sequence !== renderSequence) return\n        options.onPatchError(null)\n        fallbacks = Object.assign({}, message.fallbacks, localFallbacks)\n        settleRender(sequence)\n      },\n      () => {\n        if (sequence !== renderSequence) return\n        options.onPatchError('Preview could not apply this update.')\n      },\n    )\n  })\n\n  const handleClick = (event: MouseEvent) => {\n    if (!active) return\n    const target = event.target instanceof Element ? event.target : null\n\n    if (mode === 'browse') {\n      const link = target?.closest('a[href]')\n\n      if (\n        !(link instanceof HTMLAnchorElement) ||\n        link.target ||\n        link.hasAttribute('download') ||\n        event.metaKey ||\n        event.ctrlKey ||\n        event.shiftKey ||\n        event.altKey\n      )\n        return\n      const destination = new URL(link.href, view.location.href)\n\n      if (destination.origin !== view.location.origin) return\n      event.preventDefault()\n      event.stopPropagation()\n      void options.navigate(`${destination.pathname}${destination.search}${destination.hash}`)\n\n      return\n    }\n\n    const scope = target?.closest('[data-cms-document]')\n    const documentIdValue = scope?.getAttribute('data-cms-document')\n\n    if (!target || !scope || !Schema.is(DocumentId)(documentIdValue)) return\n    event.preventDefault()\n    event.stopPropagation()\n    const nodeIdValue = regions.hitTest(event.clientX, event.clientY, scope)\n    const nodeId = Schema.is(EditorNodeId)(nodeIdValue) ? nodeIdValue : undefined\n\n    const activationFocus = {\n      documentId: documentIdValue,\n      // oxlint-disable-next-line effecttsgo/crypto-random-uuid -- Browser interactions use the native Web Crypto host API.\n      id: PreviewIntentId.make(globalThis.crypto.randomUUID()),\n      origin: 'preview',\n      reveal: false,\n      revision,\n    } as const\n\n    desiredFocus = nodeId ? { ...activationFocus, nodeId } : activationFocus\n    lastApplied = ''\n\n    const activation = {\n      documentId: desiredFocus.documentId,\n      // oxlint-disable-next-line effecttsgo/crypto-random-uuid -- Browser interactions use the native Web Crypto host API.\n      requestId: RequestId.make(globalThis.crypto.randomUUID()),\n      revision,\n      type: 'preview:activate',\n    } as const\n\n    if (nodeId) bridge.send({ ...activation, nodeId })\n    else bridge.send(activation)\n    applyFocus()\n  }\n\n  let hoverFrame = 0\n  let hoverPointer: { readonly target: Element; readonly x: number; readonly y: number } | undefined\n\n  const handlePointerMove = (event: PointerEvent) => {\n    if (!(event.target instanceof Element)) return\n    hoverPointer = { target: event.target, x: event.clientX, y: event.clientY }\n\n    if (hoverFrame) return\n    hoverFrame = view.requestAnimationFrame(() => {\n      hoverFrame = 0\n      const pointer = hoverPointer\n\n      if (pointer) hoverElements(pointer.target, pointer.x, pointer.y)\n    })\n  }\n\n  const handlePointerOut = (event: PointerEvent) => {\n    if (!(event.relatedTarget instanceof Element)) {\n      hoverPointer = undefined\n      hoverElements()\n    }\n  }\n\n  let mutationQueued = false\n\n  const observer = new MutationObserver((records) => {\n    if (\n      records.every((record) => record.target instanceof Element && record.target.closest('[data-cms-preview-overlay]'))\n    )\n      return\n\n    if (mutationQueued) return\n    mutationQueued = true\n    queueMicrotask(() => {\n      mutationQueued = false\n\n      if (!active) return\n      hoverElements()\n      regions.decorate()\n\n      if (desiredFocus) applyFocus(false)\n    })\n  })\n\n  root.addEventListener('click', handleClick, true)\n  root.addEventListener('pointermove', handlePointerMove, true)\n  root.addEventListener('pointerout', handlePointerOut, true)\n  observer.observe(root.documentElement, { childList: true, subtree: true })\n\n  return () => {\n    stopBridge()\n    stopManifest()\n    observer.disconnect()\n\n    if (hoverFrame) view.cancelAnimationFrame(hoverFrame)\n    selection.destroy()\n    hover.destroy()\n    root.removeEventListener('click', handleClick, true)\n    root.removeEventListener('pointermove', handlePointerMove, true)\n    root.removeEventListener('pointerout', handlePointerOut, true)\n    regions.clear()\n  }\n}\n\nfunction revealElement(element: Element | undefined, view: Window): void {\n  if (!element) return\n  const rect = element.getBoundingClientRect()\n\n  if (rect.bottom > 0 && rect.top < view.innerHeight && rect.right > 0 && rect.left < view.innerWidth) return\n  element.scrollIntoView({\n    behavior: 'instant',\n    block: 'center',\n    inline: 'nearest',\n  })\n}\n"],"mappings":";;;;;;;;AASA,SAAgB,uBAAuB,SAOxB;CAGb,MAAM,EAAE,QAAQ,MAAM,OAAO,SAAS;CACtC,MAAM,YAAY,oBAAoB,MAAM,IAAI;CAChD,MAAM,QAAQ,oBAAoB,MAAM,MAAM,OAAO;CACrD,MAAM,UAAU,oBAAoB,MAAM,IAAI;CAC9C,IAAI,SAAS;CACb,IAAI;CACJ,IAAI,YAA8B,CAAC;CACnC,IAAI,OAA0B;CAC9B,IAAI,iBAAiB;CACrB,IAAI,WAAW,eAAe,KAAK,CAAC;CACpC,IAAI,cAAc;CAClB,IAAI,mBAAmB;CAEvB,MAAM,qBAA2B;EAC/B,OAAO,KAAK;GAAE,UAAU,MAAM,SAAS;GAAG;GAAU,MAAM;EAAmB,CAAC;CAChF;CAEA,MAAM,eAAe,MAAM,UAAU,YAAY;CAEjD,MAAM,eAAe,WAAmD;EACtE,IAAI,CAAC,cAAc;EACnB,MAAM,YAAY,GAAG,aAAa,GAAG,GAAG;EAExC,IAAI,cAAc,aAAa;EAC/B,cAAc;EAEd,MAAM,UAAU;GACd,UAAU,aAAa;GACvB;GACA;GACA,MAAM;EACR;EAEA,OAAO,KAAK,aAAa,SAAS;GAAE,GAAG;GAAS,QAAQ,aAAa;EAAO,IAAI,OAAO;CACzF;CAEA,MAAM,gBAAgB,eACpB,CAAC,GAAG,KAAK,iBAAiB,qBAAqB,CAAC,CAAC,CAAC,MAC/C,YAAY,QAAQ,aAAa,mBAAmB,MAAM,UAC7D,KAAK;CAEP,MAAM,cAAc,SAAS,UAAgB;EAC3C,IAAI,CAAC,UAAU,SAAS,QAAQ;GAC9B,UAAU,WAAW,IAAI;GAEzB;EACF;EAEA,UAAU,WAAW,KAAK;EAE1B,IAAI,SAAS,QAAQ;GACnB,UAAU,KAAK,CAAC,CAAC;GAEjB;EACF;EAEA,MAAM,SAAS;EACf,MAAM,SAAS,QAAQ;EAEvB,IAAI,CAAC,UAAU,CAAC,QAAQ;GACtB,UAAU,KAAK,CAAC,CAAC;GACjB,YAAY,OAAO;GAEnB;EACF;EAEA,MAAM,QAAQ,aAAa,OAAO,UAAU;EAC5C,MAAM,SAAS,QAAQ,OAAO,QAAQ,WAAW,KAAK;EACtD,MAAM,SAAS,CAAC,OAAO,SAAS,YAAY,OAAO,WAAW,SAAS,UAAU;EAEjF,UAAU,KAAK,OAAO,YAAY;GAChC,OAAO,OAAO;GACd,OAAO,WAAW,YAAY,SAAY;GAC1C;EACF,CAAC;EAED,IAAI,UAAU,WAAW,aAAa,qBAAqB,OAAO,IAAI;GACpE,mBAAmB,OAAO;GAC1B,cAAc,QAAQ,QAAQ,OAAO,UAAU,GAAG,IAAI;EACxD;EAEA,YAAY,MAAM;CACpB;CAEA,MAAM,iBAAiB,QAAkB,GAAY,MAAqB;EACxE,IAAI,CAAC,UAAU,SAAS,UAAU,CAAC,UAAU,MAAM,UAAa,MAAM,QAAW;GAC/E,MAAM,KAAK,CAAC,CAAC;GAEb;EACF;EAEA,MAAM,QAAQ,OAAO,QAAQ,qBAAqB,KAAK;EACvD,MAAM,SAAS,QAAQ,QAAQ,GAAG,GAAG,KAAK;EAE1C,IAAI,CAAC,QAAQ;GACX,MAAM,KAAK,CAAC,CAAC;GAEb;EACF;EAEA,MAAM,KAAK,QAAQ,OAAO,QAAQ,WAAW,KAAK,CAAC,CAAC,UAAU;CAChE;CAEA,MAAM,gBAAgB,aAA2B;EAC/C,KAAK,4BACH,KAAK,4BAA4B;GAC/B,IAAI,aAAa,gBAAgB;GACjC,SAAS;GACT,QAAQ,SAAS;GACjB,OAAO,KAAK;IAAE;IAAU,MAAM;GAAmB,CAAC;GAClD,WAAW,cAAc,MAAM;EACjC,CAAC,CACH;CACF;CAEA,MAAM,aAAa,OAAO,WAAW,YAAY;EAC/C,IAAI,QAAQ,SAAS,kBAAkB;GACrC,SAAS;GACT,QAAQ,MAAM;GACd,QAAQ,SAAS;GACjB,aAAa;GAEb;EACF;EAEA,IAAI,QAAQ,SAAS,eAAe;GAClC,OAAO,QAAQ;GAEf,IAAI,SAAS,UAAU;IACrB,cAAc;IACd,UAAU,WAAW,KAAK;IAC1B,UAAU,KAAK,CAAC,CAAC;IACjB,QAAQ,MAAM;GAChB,OAAO;IACL,QAAQ,SAAS;IACjB,WAAW;GACb;GAEA;EACF;EAEA,IAAI,QAAQ,SAAS,mBAAmB;GACtC,AAAK,QAAQ,SAAS,QAAQ,IAAI;GAElC;EACF;EAEA,IAAI,QAAQ,SAAS,gBAAgB;GACnC,IAAI,QAAQ,MAAM,aAAa,UAAU;GACzC,eAAe,QAAQ;GACvB,WAAW,aAAa,MAAM;GAE9B;EACF;EAEA,IAAI,QAAQ,SAAS,kBAAkB,QAAQ,WAAW,UAAU;EACpE,WAAW,QAAQ;EACnB,SAAS;EACT,UAAU,WAAW,IAAI;EACzB,eAAe,QAAQ;EACvB,cAAc;EACd,MAAM,WAAW,EAAE;EACnB,AAAK,MAAM,MAAM,QAAQ,QAAQ,CAAC,CAAC,MAChC,mBAAmB;GAClB,IAAI,aAAa,gBAAgB;GACjC,QAAQ,aAAa,IAAI;GACzB,YAAY,OAAO,OAAO,CAAC,GAAG,QAAQ,WAAW,cAAc;GAC/D,aAAa,QAAQ;EACvB,SACM;GACJ,IAAI,aAAa,gBAAgB;GACjC,QAAQ,aAAa,sCAAsC;EAC7D,CACF;CACF,CAAC;CAED,MAAM,eAAe,UAAsB;EACzC,IAAI,CAAC,QAAQ;EACb,MAAM,SAAS,MAAM,kBAAkB,UAAU,MAAM,SAAS;EAEhE,IAAI,SAAS,UAAU;GACrB,MAAM,OAAO,QAAQ,QAAQ,SAAS;GAEtC,IACE,EAAE,gBAAgB,sBAClB,KAAK,UACL,KAAK,aAAa,UAAU,KAC5B,MAAM,WACN,MAAM,WACN,MAAM,YACN,MAAM,QAEN;GACF,MAAM,cAAc,IAAI,IAAI,KAAK,MAAM,KAAK,SAAS,IAAI;GAEzD,IAAI,YAAY,WAAW,KAAK,SAAS,QAAQ;GACjD,MAAM,eAAe;GACrB,MAAM,gBAAgB;GACtB,AAAK,QAAQ,SAAS,GAAG,YAAY,WAAW,YAAY,SAAS,YAAY,MAAM;GAEvF;EACF;EAEA,MAAM,QAAQ,QAAQ,QAAQ,qBAAqB;EACnD,MAAM,kBAAkB,OAAO,aAAa,mBAAmB;EAE/D,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,eAAe,GAAG;EAClE,MAAM,eAAe;EACrB,MAAM,gBAAgB;EACtB,MAAM,cAAc,QAAQ,QAAQ,MAAM,SAAS,MAAM,SAAS,KAAK;EACvE,MAAM,SAAS,OAAO,GAAG,YAAY,CAAC,CAAC,WAAW,IAAI,cAAc;EAEpE,MAAM,kBAAkB;GACtB,YAAY;GAEZ,IAAI,gBAAgB,KAAK,WAAW,OAAO,WAAW,CAAC;GACvD,QAAQ;GACR,QAAQ;GACR;EACF;EAEA,eAAe,SAAS;GAAE,GAAG;GAAiB;EAAO,IAAI;EACzD,cAAc;EAEd,MAAM,aAAa;GACjB,YAAY,aAAa;GAEzB,WAAW,UAAU,KAAK,WAAW,OAAO,WAAW,CAAC;GACxD;GACA,MAAM;EACR;EAEA,IAAI,QAAQ,OAAO,KAAK;GAAE,GAAG;GAAY;EAAO,CAAC;OAC5C,OAAO,KAAK,UAAU;EAC3B,WAAW;CACb;CAEA,IAAI,aAAa;CACjB,IAAI;CAEJ,MAAM,qBAAqB,UAAwB;EACjD,IAAI,EAAE,MAAM,kBAAkB,UAAU;EACxC,eAAe;GAAE,QAAQ,MAAM;GAAQ,GAAG,MAAM;GAAS,GAAG,MAAM;EAAQ;EAE1E,IAAI,YAAY;EAChB,aAAa,KAAK,4BAA4B;GAC5C,aAAa;GACb,MAAM,UAAU;GAEhB,IAAI,SAAS,cAAc,QAAQ,QAAQ,QAAQ,GAAG,QAAQ,CAAC;EACjE,CAAC;CACH;CAEA,MAAM,oBAAoB,UAAwB;EAChD,IAAI,EAAE,MAAM,yBAAyB,UAAU;GAC7C,eAAe;GACf,cAAc;EAChB;CACF;CAEA,IAAI,iBAAiB;CAErB,MAAM,WAAW,IAAI,kBAAkB,YAAY;EACjD,IACE,QAAQ,OAAO,WAAW,OAAO,kBAAkB,WAAW,OAAO,OAAO,QAAQ,4BAA4B,CAAC,GAEjH;EAEF,IAAI,gBAAgB;EACpB,iBAAiB;EACjB,qBAAqB;GACnB,iBAAiB;GAEjB,IAAI,CAAC,QAAQ;GACb,cAAc;GACd,QAAQ,SAAS;GAEjB,IAAI,cAAc,WAAW,KAAK;EACpC,CAAC;CACH,CAAC;CAED,KAAK,iBAAiB,SAAS,aAAa,IAAI;CAChD,KAAK,iBAAiB,eAAe,mBAAmB,IAAI;CAC5D,KAAK,iBAAiB,cAAc,kBAAkB,IAAI;CAC1D,SAAS,QAAQ,KAAK,iBAAiB;EAAE,WAAW;EAAM,SAAS;CAAK,CAAC;CAEzE,aAAa;EACX,WAAW;EACX,aAAa;EACb,SAAS,WAAW;EAEpB,IAAI,YAAY,KAAK,qBAAqB,UAAU;EACpD,UAAU,QAAQ;EAClB,MAAM,QAAQ;EACd,KAAK,oBAAoB,SAAS,aAAa,IAAI;EACnD,KAAK,oBAAoB,eAAe,mBAAmB,IAAI;EAC/D,KAAK,oBAAoB,cAAc,kBAAkB,IAAI;EAC7D,QAAQ,MAAM;CAChB;AACF;AAEA,SAAS,cAAc,SAA8B,MAAoB;CACvE,IAAI,CAAC,SAAS;CACd,MAAM,OAAO,QAAQ,sBAAsB;CAE3C,IAAI,KAAK,SAAS,KAAK,KAAK,MAAM,KAAK,eAAe,KAAK,QAAQ,KAAK,KAAK,OAAO,KAAK,YAAY;CACrG,QAAQ,eAAe;EACrB,UAAU;EACV,OAAO;EACP,QAAQ;CACV,CAAC;AACH"}

package/src/runtime/preview/overlay.js

@@ -2,63 +2,120 @@
 /** Preview-only chrome stays separate from the website's layout and element styles. */
 function mountPreviewOverlay(root, view, kind = "selection") {
 	const host = root.createElement("div");
+	const targetAttribute = kind === "selection" ? "data-cms-selected" : "data-cms-hovered";
 	host.setAttribute("data-cms-preview-overlay", "");
 	host.setAttribute("aria-hidden", "true");
 	root.documentElement.append(host);
+	let markedElements = /* @__PURE__ */ new Set();
 	let targets = [];
 	let outlines = [];
 	let frame = 0;
+	let isPending = false;
+	let revealFrame = 0;
+	const markTargets = (geometries) => {
+		for (const element of markedElements) element.removeAttribute(targetAttribute);
+		markedElements = new Set(geometries.flatMap((geometry) => geometry.element() ?? []));
+		for (const element of markedElements) element.setAttribute(targetAttribute, "");
+	};
+	const setLabelVisibility = (outline, visible, labelled) => {
+		const showLabel = kind === "selection" && visible && !labelled;
+		outline.toggleAttribute("data-cms-selection-label", showLabel);
+		return labelled || showLabel;
+	};
 	const position = () => {
 		let labelled = false;
-		for (const [index, element] of targets.entries()) {
+		for (const [index, target] of targets.entries()) {
 			const outline = outlines[index];
 			if (!outline) continue;
-			const rect = element.getBoundingClientRect();
-			const visible = element.isConnected && (kind !== "hover" || !element.hasAttribute("data-cms-selected")) && rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.top < view.innerHeight && rect.right > 0 && rect.left < view.innerWidth;
-			outline.hidden = !visible;
-			outline.toggleAttribute("data-cms-selection-label", kind === "selection" && visible && !labelled);
-			if (!visible) continue;
-			labelled = true;
+			const element = target.element();
+			const rect = geometryBounds(target);
+			if (!(rect !== void 0 && (kind !== "hover" || !element?.hasAttribute("data-cms-selected")) && rect.width > 0 && rect.height > 0 && rect.bottom > 0 && rect.top < view.innerHeight && rect.right > 0 && rect.left < view.innerWidth)) {
+				const retainPosition = isPending && outline.hasAttribute("data-cms-positioned");
+				outline.hidden = !retainPosition;
+				labelled = setLabelVisibility(outline, retainPosition, labelled);
+				continue;
+			}
+			outline.hidden = false;
+			outline.setAttribute("data-cms-positioned", "");
+			labelled = setLabelVisibility(outline, true, labelled);
 			const left = Math.max(2, rect.left - 3);
 			const right = Math.min(view.innerWidth - 2, rect.right + 3);
 			outline.style.left = `${left}px`;
 			outline.style.top = `${rect.top - 3}px`;
 			outline.style.width = `${Math.max(0, right - left)}px`;
 			outline.style.height = `${rect.height + 6}px`;
-			outline.style.setProperty("--cms-label-left", `${Math.max(0, Math.min(view.innerWidth - 76, left) - left)}px`);
+			const labelWidth = outline.querySelector("[data-cms-selection-label-content]")?.offsetWidth ?? 0;
+			const labelLeft = Math.max(4 - left, Math.min(0, view.innerWidth - 4 - labelWidth - left));
+			outline.style.setProperty("--cms-label-left", `${labelLeft}px`);
 			outline.style.setProperty("--cms-label-top", `${Math.max(4 - rect.top, rect.top >= 30 ? -26 : 4)}px`);
 		}
 		frame = targets.length ? view.requestAnimationFrame(position) : 0;
 	};
 	return {
-		set(elements) {
-			if (elements.length === targets.length && elements.every((element, index) => element === targets[index])) return;
-			if (frame) view.cancelAnimationFrame(frame);
-			targets = elements;
-			outlines = elements.map(() => {
-				const outline = root.createElement("div");
-				outline.setAttribute(kind === "selection" ? "data-cms-selection-outline" : "data-cms-hover-outline", "");
-				if (kind === "hover") for (const corner of [
-					"top-left",
-					"top-right",
-					"bottom-right",
-					"bottom-left"
-				]) {
-					const mark = root.createElement("span");
-					mark.setAttribute("data-cms-hover-corner", corner);
-					outline.append(mark);
-				}
-				return outline;
+		setPending(value) {
+			isPending = value;
+			host.toggleAttribute("data-cms-pending", value);
+		},
+		show(geometries, presentation = {}) {
+			const targetsChanged = geometries.length !== targets.length || geometries.some((geometry, index) => geometry !== targets[index]);
+			const labelText = presentation.match === "fallback" ? `Nearest · ${presentation.label ?? "selected content"}` : presentation.label ?? "Selected";
+			if (targetsChanged) {
+				if (frame) view.cancelAnimationFrame(frame);
+				targets = geometries;
+				outlines = geometries.map(() => {
+					const outline = root.createElement("div");
+					outline.setAttribute(kind === "selection" ? "data-cms-selection-outline" : "data-cms-hover-outline", "");
+					if (kind === "selection") {
+						const label = root.createElement("span");
+						label.setAttribute("data-cms-selection-label-content", "");
+						outline.append(label);
+					}
+					return outline;
+				});
+				host.replaceChildren(...outlines);
+				position();
+			}
+			markTargets(targets);
+			for (const outline of outlines) {
+				const label = outline.querySelector("[data-cms-selection-label-content]");
+				if (label) label.textContent = labelText;
+				if (presentation.match) outline.setAttribute("data-cms-match", presentation.match);
+				else outline.removeAttribute("data-cms-match");
+				outline.toggleAttribute("data-cms-reveal", presentation.reveal === true);
+			}
+			if (!presentation.reveal || !outlines.length) return;
+			if (revealFrame) view.cancelAnimationFrame(revealFrame);
+			revealFrame = view.requestAnimationFrame(() => {
+				revealFrame = view.requestAnimationFrame(() => {
+					for (const outline of outlines) outline.removeAttribute("data-cms-reveal");
+					revealFrame = 0;
+				});
 			});
-			host.replaceChildren(...outlines);
-			position();
 		},
 		destroy() {
 			if (frame) view.cancelAnimationFrame(frame);
+			if (revealFrame) view.cancelAnimationFrame(revealFrame);
+			markTargets([]);
 			host.remove();
 		}
 	};
 }
+function geometryBounds(geometry) {
+	const rectangles = geometry.rects();
+	if (!rectangles.length) return void 0;
+	const left = Math.min(...rectangles.map((rectangle) => rectangle.left));
+	const top = Math.min(...rectangles.map((rectangle) => rectangle.top));
+	const right = Math.max(...rectangles.map((rectangle) => rectangle.right));
+	const bottom = Math.max(...rectangles.map((rectangle) => rectangle.bottom));
+	return {
+		bottom,
+		height: bottom - top,
+		left,
+		right,
+		top,
+		width: right - left
+	};
+}
 
 //#endregion
 export { mountPreviewOverlay };

package/src/runtime/preview/overlay.js.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../src/runtime/preview/overlay.ts"],"sourcesContent":["/** Preview-only chrome stays separate from the website's layout and element styles. */\nexport function mountPreviewOverlay(root: Document, view: Window, kind: 'selection' | 'hover' = 'selection') {\n  const host = root.createElement('div')\n  host.setAttribute('data-cms-preview-overlay', '')\n  host.setAttribute('aria-hidden', 'true')\n  root.documentElement.append(host)\n  let targets: ReadonlyArray<Element> = []\n  let outlines: Array<HTMLElement> = []\n  let frame = 0\n\n  const position = (): void => {\n    let labelled = false\n\n    for (const [index, element] of targets.entries()) {\n      const outline = outlines[index]\n\n      if (!outline) continue\n      const rect = element.getBoundingClientRect()\n\n      const visible =\n        element.isConnected &&\n        (kind !== 'hover' || !element.hasAttribute('data-cms-selected')) &&\n        rect.width > 0 &&\n        rect.height > 0 &&\n        rect.bottom > 0 &&\n        rect.top < view.innerHeight &&\n        rect.right > 0 &&\n        rect.left < view.innerWidth\n\n      outline.hidden = !visible\n      outline.toggleAttribute('data-cms-selection-label', kind === 'selection' && visible && !labelled)\n\n      if (!visible) continue\n      labelled = true\n      const left = Math.max(2, rect.left - 3)\n      const right = Math.min(view.innerWidth - 2, rect.right + 3)\n      outline.style.left = `${left}px`\n      outline.style.top = `${rect.top - 3}px`\n      outline.style.width = `${Math.max(0, right - left)}px`\n      outline.style.height = `${rect.height + 6}px`\n      outline.style.setProperty('--cms-label-left', `${Math.max(0, Math.min(view.innerWidth - 76, left) - left)}px`)\n      outline.style.setProperty('--cms-label-top', `${Math.max(4 - rect.top, rect.top >= 30 ? -26 : 4)}px`)\n    }\n\n    frame = targets.length ? view.requestAnimationFrame(position) : 0\n  }\n\n  return {\n    set(elements: ReadonlyArray<Element>): void {\n      if (elements.length === targets.length && elements.every((element, index) => element === targets[index])) return\n\n      if (frame) view.cancelAnimationFrame(frame)\n      targets = elements\n      outlines = elements.map(() => {\n        const outline = root.createElement('div')\n        outline.setAttribute(kind === 'selection' ? 'data-cms-selection-outline' : 'data-cms-hover-outline', '')\n\n        if (kind === 'hover') {\n          for (const corner of ['top-left', 'top-right', 'bottom-right', 'bottom-left']) {\n            const mark = root.createElement('span')\n            mark.setAttribute('data-cms-hover-corner', corner)\n            outline.append(mark)\n          }\n        }\n\n        return outline\n      })\n      host.replaceChildren(...outlines)\n      position()\n    },\n    destroy(): void {\n      if (frame) view.cancelAnimationFrame(frame)\n      host.remove()\n    },\n  }\n}\n"],"mappings":";;AACA,SAAgB,oBAAoB,MAAgB,MAAc,OAA8B,aAAa;CAC3G,MAAM,OAAO,KAAK,cAAc,KAAK;CACrC,KAAK,aAAa,4BAA4B,EAAE;CAChD,KAAK,aAAa,eAAe,MAAM;CACvC,KAAK,gBAAgB,OAAO,IAAI;CAChC,IAAI,UAAkC,CAAC;CACvC,IAAI,WAA+B,CAAC;CACpC,IAAI,QAAQ;CAEZ,MAAM,iBAAuB;EAC3B,IAAI,WAAW;EAEf,KAAK,MAAM,CAAC,OAAO,YAAY,QAAQ,QAAQ,GAAG;GAChD,MAAM,UAAU,SAAS;GAEzB,IAAI,CAAC,SAAS;GACd,MAAM,OAAO,QAAQ,sBAAsB;GAE3C,MAAM,UACJ,QAAQ,gBACP,SAAS,WAAW,CAAC,QAAQ,aAAa,mBAAmB,MAC9D,KAAK,QAAQ,KACb,KAAK,SAAS,KACd,KAAK,SAAS,KACd,KAAK,MAAM,KAAK,eAChB,KAAK,QAAQ,KACb,KAAK,OAAO,KAAK;GAEnB,QAAQ,SAAS,CAAC;GAClB,QAAQ,gBAAgB,4BAA4B,SAAS,eAAe,WAAW,CAAC,QAAQ;GAEhG,IAAI,CAAC,SAAS;GACd,WAAW;GACX,MAAM,OAAO,KAAK,IAAI,GAAG,KAAK,OAAO,CAAC;GACtC,MAAM,QAAQ,KAAK,IAAI,KAAK,aAAa,GAAG,KAAK,QAAQ,CAAC;GAC1D,QAAQ,MAAM,OAAO,GAAG,KAAK;GAC7B,QAAQ,MAAM,MAAM,GAAG,KAAK,MAAM,EAAE;GACpC,QAAQ,MAAM,QAAQ,GAAG,KAAK,IAAI,GAAG,QAAQ,IAAI,EAAE;GACnD,QAAQ,MAAM,SAAS,GAAG,KAAK,SAAS,EAAE;GAC1C,QAAQ,MAAM,YAAY,oBAAoB,GAAG,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,aAAa,IAAI,IAAI,IAAI,IAAI,EAAE,GAAG;GAC7G,QAAQ,MAAM,YAAY,mBAAmB,GAAG,KAAK,IAAI,IAAI,KAAK,KAAK,KAAK,OAAO,KAAK,MAAM,CAAC,EAAE,GAAG;EACtG;EAEA,QAAQ,QAAQ,SAAS,KAAK,sBAAsB,QAAQ,IAAI;CAClE;CAEA,OAAO;EACL,IAAI,UAAwC;GAC1C,IAAI,SAAS,WAAW,QAAQ,UAAU,SAAS,OAAO,SAAS,UAAU,YAAY,QAAQ,MAAM,GAAG;GAE1G,IAAI,OAAO,KAAK,qBAAqB,KAAK;GAC1C,UAAU;GACV,WAAW,SAAS,UAAU;IAC5B,MAAM,UAAU,KAAK,cAAc,KAAK;IACxC,QAAQ,aAAa,SAAS,cAAc,+BAA+B,0BAA0B,EAAE;IAEvG,IAAI,SAAS,SACX,KAAK,MAAM,UAAU;KAAC;KAAY;KAAa;KAAgB;IAAa,GAAG;KAC7E,MAAM,OAAO,KAAK,cAAc,MAAM;KACtC,KAAK,aAAa,yBAAyB,MAAM;KACjD,QAAQ,OAAO,IAAI;IACrB;IAGF,OAAO;GACT,CAAC;GACD,KAAK,gBAAgB,GAAG,QAAQ;GAChC,SAAS;EACX;EACA,UAAgB;GACd,IAAI,OAAO,KAAK,qBAAqB,KAAK;GAC1C,KAAK,OAAO;EACd;CACF;AACF"}
+{"version":3,"file":"overlay.js","names":[],"sources":["../../../../../src/runtime/preview/overlay.ts"],"sourcesContent":["import type { PreviewRegionGeometry } from './regions'\n\ninterface PreviewOverlayPresentation {\n  readonly label?: string\n  readonly match?: 'exact' | 'fallback'\n  readonly reveal?: boolean\n}\n\n/** Preview-only chrome stays separate from the website's layout and element styles. */\nexport function mountPreviewOverlay(root: Document, view: Window, kind: 'selection' | 'hover' = 'selection') {\n  const host = root.createElement('div')\n  const targetAttribute = kind === 'selection' ? 'data-cms-selected' : 'data-cms-hovered'\n  host.setAttribute('data-cms-preview-overlay', '')\n  host.setAttribute('aria-hidden', 'true')\n  root.documentElement.append(host)\n  let markedElements = new Set<Element>()\n  let targets: ReadonlyArray<PreviewRegionGeometry> = []\n  let outlines: Array<HTMLElement> = []\n  let frame = 0\n  let isPending = false\n  let revealFrame = 0\n\n  const markTargets = (geometries: ReadonlyArray<PreviewRegionGeometry>): void => {\n    for (const element of markedElements) element.removeAttribute(targetAttribute)\n    markedElements = new Set(geometries.flatMap((geometry) => geometry.element() ?? []))\n\n    for (const element of markedElements) element.setAttribute(targetAttribute, '')\n  }\n\n  const setLabelVisibility = (outline: HTMLElement, visible: boolean, labelled: boolean): boolean => {\n    const showLabel = kind === 'selection' && visible && !labelled\n\n    outline.toggleAttribute('data-cms-selection-label', showLabel)\n\n    return labelled || showLabel\n  }\n\n  const position = (): void => {\n    let labelled = false\n\n    for (const [index, target] of targets.entries()) {\n      const outline = outlines[index]\n\n      if (!outline) continue\n      const element = target.element()\n      const rect = geometryBounds(target)\n\n      const visible =\n        rect !== undefined &&\n        (kind !== 'hover' || !element?.hasAttribute('data-cms-selected')) &&\n        rect.width > 0 &&\n        rect.height > 0 &&\n        rect.bottom > 0 &&\n        rect.top < view.innerHeight &&\n        rect.right > 0 &&\n        rect.left < view.innerWidth\n\n      if (!visible) {\n        const retainPosition = isPending && outline.hasAttribute('data-cms-positioned')\n\n        outline.hidden = !retainPosition\n        labelled = setLabelVisibility(outline, retainPosition, labelled)\n\n        continue\n      }\n\n      outline.hidden = false\n      outline.setAttribute('data-cms-positioned', '')\n      labelled = setLabelVisibility(outline, true, labelled)\n      const left = Math.max(2, rect.left - 3)\n      const right = Math.min(view.innerWidth - 2, rect.right + 3)\n      outline.style.left = `${left}px`\n      outline.style.top = `${rect.top - 3}px`\n      outline.style.width = `${Math.max(0, right - left)}px`\n      outline.style.height = `${rect.height + 6}px`\n      const labelWidth = outline.querySelector<HTMLElement>('[data-cms-selection-label-content]')?.offsetWidth ?? 0\n      const labelLeft = Math.max(4 - left, Math.min(0, view.innerWidth - 4 - labelWidth - left))\n\n      outline.style.setProperty('--cms-label-left', `${labelLeft}px`)\n      outline.style.setProperty('--cms-label-top', `${Math.max(4 - rect.top, rect.top >= 30 ? -26 : 4)}px`)\n    }\n\n    frame = targets.length ? view.requestAnimationFrame(position) : 0\n  }\n\n  return {\n    setPending(value: boolean): void {\n      isPending = value\n      host.toggleAttribute('data-cms-pending', value)\n    },\n    show(geometries: ReadonlyArray<PreviewRegionGeometry>, presentation: PreviewOverlayPresentation = {}): void {\n      const targetsChanged =\n        geometries.length !== targets.length || geometries.some((geometry, index) => geometry !== targets[index])\n\n      const labelText =\n        presentation.match === 'fallback'\n          ? `Nearest · ${presentation.label ?? 'selected content'}`\n          : (presentation.label ?? 'Selected')\n\n      if (targetsChanged) {\n        if (frame) view.cancelAnimationFrame(frame)\n        targets = geometries\n        outlines = geometries.map(() => {\n          const outline = root.createElement('div')\n          outline.setAttribute(kind === 'selection' ? 'data-cms-selection-outline' : 'data-cms-hover-outline', '')\n\n          if (kind === 'selection') {\n            const label = root.createElement('span')\n            label.setAttribute('data-cms-selection-label-content', '')\n            outline.append(label)\n          }\n\n          return outline\n        })\n        host.replaceChildren(...outlines)\n        position()\n      }\n\n      markTargets(targets)\n\n      for (const outline of outlines) {\n        const label = outline.querySelector<HTMLElement>('[data-cms-selection-label-content]')\n\n        if (label) label.textContent = labelText\n\n        if (presentation.match) outline.setAttribute('data-cms-match', presentation.match)\n        else outline.removeAttribute('data-cms-match')\n\n        outline.toggleAttribute('data-cms-reveal', presentation.reveal === true)\n      }\n\n      if (!presentation.reveal || !outlines.length) return\n\n      if (revealFrame) view.cancelAnimationFrame(revealFrame)\n      revealFrame = view.requestAnimationFrame(() => {\n        revealFrame = view.requestAnimationFrame(() => {\n          for (const outline of outlines) outline.removeAttribute('data-cms-reveal')\n          revealFrame = 0\n        })\n      })\n    },\n    destroy(): void {\n      if (frame) view.cancelAnimationFrame(frame)\n\n      if (revealFrame) view.cancelAnimationFrame(revealFrame)\n      markTargets([])\n      host.remove()\n    },\n  }\n}\n\nfunction geometryBounds(geometry: PreviewRegionGeometry):\n  | {\n      readonly bottom: number\n      readonly height: number\n      readonly left: number\n      readonly right: number\n      readonly top: number\n      readonly width: number\n    }\n  | undefined {\n  const rectangles = geometry.rects()\n\n  if (!rectangles.length) return undefined\n  const left = Math.min(...rectangles.map((rectangle) => rectangle.left))\n  const top = Math.min(...rectangles.map((rectangle) => rectangle.top))\n  const right = Math.max(...rectangles.map((rectangle) => rectangle.right))\n  const bottom = Math.max(...rectangles.map((rectangle) => rectangle.bottom))\n\n  return { bottom, height: bottom - top, left, right, top, width: right - left }\n}\n"],"mappings":"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"}

package/src/runtime/preview/plugin.client.js

@@ -1,10 +1,10 @@
-import { o as PublicPath } from "../../scalars-B2lgGUnj.js";
-import { t as openSitePreviewConnection } from "../../connection-D5S9Iph-.js";
-import { n as readPreviewLocation, r as withPreviewLocation } from "../../location-CPX7oj0o.js";
+import { o as PublicPath } from "../../scalars-CVZqT3L0.js";
+import { t as openSitePreviewConnection } from "../../connection-BP80q4d-.js";
+import { n as readPreviewLocation, r as withPreviewLocation } from "../../location-CMNGO3lU.js";
 import { formComponentsKey } from "../delivery/blocks.js";
 import { documentPreviewStoreKey } from "../delivery/preview.js";
 import { mountPreviewController } from "./controller.js";
-import { t as createStudioPreviewStore } from "../../store-CCsjHaZm.js";
+import { t as createStudioPreviewStore } from "../../store-PKKB8xa2.js";
 import { Result, Schema } from "effect";
 import { inject, watch } from "vue";
 import { defineNuxtPlugin, navigateTo, onNuxtReady, useNuxtApp, useState } from "nuxt/app";