@abinnovision/payloadcms-viewfinder 1.0.0-beta.1

package/dist/admin/row-button.mjs

@@ -0,0 +1,90 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+//#region src/admin/row-button.tsx
+/**
+* Sized and shaped like Payload's own row controls, which it sits beside:
+* `base(1.2)` square with a pill radius, filling with `--theme-elevation-0`
+* on hover the way `.array-actions__button` does. Everything visual comes
+* from Payload's variables, so it follows the active theme rather than
+* sitting on top of it.
+*/ const BUTTON = {
+	pointerEvents: "auto",
+	position: "relative",
+	zIndex: 1,
+	order: -1,
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flex: "0 0 auto",
+	width: "calc(var(--base) * 1.2)",
+	height: "calc(var(--base) * 1.2)",
+	padding: 0,
+	border: 0,
+	borderRadius: "100px",
+	background: "transparent",
+	color: "currentcolor",
+	cursor: "pointer",
+	transition: "opacity 100ms linear, background-color 100ms linear"
+};
+/**
+* The admin's half of the addressing UI: one button per block row, which
+* sends the preview to that block.
+*
+* Portalled into Payload's own row controls, beside the row menu and the
+* collapse chevron, rather than registered as the block's `Label` component.
+* That slot replaces the whole header fragment, including the block-name
+* input, and only reaches blocks that live in `config.blocks` — inline blocks
+* passed through `blockReferences` would silently get nothing.
+*/ const RowButton = (props) => {
+	const [hovered, setHovered] = useState(false);
+	const [keyboardFocus, setKeyboardFocus] = useState(false);
+	return /*#__PURE__*/ jsx("button", {
+		"aria-label": props.label,
+		onBlur: () => {
+			setKeyboardFocus(false);
+		},
+		onClick: (event) => {
+			event.preventDefault();
+			event.stopPropagation();
+			props.onSelect();
+		},
+		onFocus: (event) => {
+			setKeyboardFocus(event.currentTarget.matches(":focus-visible"));
+		},
+		onMouseEnter: () => {
+			setHovered(true);
+		},
+		onMouseLeave: () => {
+			setHovered(false);
+		},
+		style: {
+			...BUTTON,
+			opacity: hovered || keyboardFocus ? 1 : .5,
+			background: hovered || keyboardFocus ? "var(--theme-elevation-0)" : "transparent",
+			outline: keyboardFocus ? "var(--accessibility-outline)" : "none",
+			outlineOffset: "var(--accessibility-outline-offset)"
+		},
+		title: props.label,
+		type: "button",
+		children: /*#__PURE__*/ jsxs("svg", {
+			"aria-hidden": true,
+			fill: "none",
+			height: "14",
+			stroke: "currentColor",
+			strokeWidth: "1.6",
+			viewBox: "0 0 16 16",
+			width: "14",
+			children: [/*#__PURE__*/ jsx("circle", {
+				cx: "8",
+				cy: "8",
+				r: "3.2"
+			}), /*#__PURE__*/ jsx("path", {
+				d: "M8 1v2.2M8 12.8V15M1 8h2.2M12.8 8H15",
+				strokeLinecap: "round"
+			})]
+		})
+	});
+};
+//#endregion
+export { RowButton };

package/dist/admin/rows.mjs

@@ -0,0 +1,59 @@
+import { blockRowElementId } from "./element-id.mjs";
+//#region src/admin/rows.ts
+const BLOCK_TYPE_SUFFIX = ".blockType";
+const COLLAPSIBLE = ".collapsible";
+const ACTIONS_WRAP = ".collapsible__actions-wrap";
+/** Every block path the form knows about, whether rendered or not. */ const blockPaths = (formState) => Object.keys(formState).filter((key) => key.endsWith(BLOCK_TYPE_SUFFIX)).map((key) => key.slice(0, -10)).sort();
+/**
+* Maps each currently rendered block row to its element.
+*
+* A collapsed row still renders its own header but none of its contents, so
+* the rows a form has and the rows it is showing are different sets, and this
+* is the second one.
+*/ const findRows = (doc, formState) => {
+	const rows = /* @__PURE__ */ new Map();
+	for (const path of blockPaths(formState)) {
+		const id = blockRowElementId(path);
+		const row = id === void 0 ? null : doc.getElementById(id);
+		if (row) rows.set(path, row);
+	}
+	return rows;
+};
+/**
+* The controls cluster at the right of a row's header, alongside Payload's
+* own row menu and collapse chevron, which is where the locate button goes.
+*
+* Payload puts the row id on a bare wrapper whose only child is the
+* collapsible, so the row element is not itself `.collapsible`. Resolving
+* that child first is what keeps this from returning a nested row's cluster.
+*/ const rowControls = (row) => {
+	const collapsible = row.querySelector(`:scope > ${COLLAPSIBLE}`);
+	if (!collapsible) return null;
+	for (const controls of collapsible.querySelectorAll(ACTIONS_WRAP)) if (controls.closest(COLLAPSIBLE) === collapsible) return controls;
+	return null;
+};
+/**
+* The path of the innermost row containing `target`, if any.
+*
+* Walking up from the pointer's target is what makes the whole row hoverable
+* rather than just its header, and it resolves nesting for free: a hero
+* inside a section wrapper is found before the wrapper is, because it is
+* reached first.
+*/ const rowPathAt = (rows, target) => {
+	for (let node = target; node !== null; node = node.parentElement) {
+		const path = rows.get(node);
+		if (path !== void 0) return path;
+	}
+};
+/**
+* Whether two scans found the same rows in the same elements.
+*
+* Portalling the buttons mutates the DOM, which wakes the observer that
+* triggered the scan. Without this check that loop never settles.
+*/ const sameRows = (a, b) => {
+	if (a.size !== b.size) return false;
+	for (const [path, element] of a) if (b.get(path) !== element) return false;
+	return true;
+};
+//#endregion
+export { blockPaths, findRows, rowControls, rowPathAt, sameRows };

package/dist/attributes.d.mts

@@ -0,0 +1,35 @@
+//#region src/attributes.d.ts
+/**
+ * The rendered page carries no field paths. It carries the Payload row `id`
+ * that every block already has, and the admin resolves that back to a path
+ * against its own form state. That is what keeps the frontend free of a
+ * content source map and the API unchanged.
+ */
+declare const BLOCK_ID_ATTRIBUTE = "data-vf-id";
+/** Advisory only: the admin addresses blocks by id, never by type. */
+declare const BLOCK_TYPE_ATTRIBUTE = "data-vf-type";
+/** Resolved against the nearest marked block ancestor, so it stays index-free. */
+declare const FIELD_ATTRIBUTE = "data-vf-field";
+interface BlockMarkerAttributes {
+  readonly [BLOCK_ID_ATTRIBUTE]: string;
+  readonly [BLOCK_TYPE_ATTRIBUTE]?: string;
+}
+interface FieldMarkerAttributes {
+  readonly [FIELD_ATTRIBUTE]: string;
+}
+/**
+ * Attributes identifying one block in the rendered output. Spread onto a
+ * block's own root element to skip the `<Marked>` wrapper, which is worth
+ * doing wherever the block already renders a stable element: a real element
+ * has a real box, so the highlight overlay does not have to infer geometry
+ * from children.
+ */
+declare const markBlock: (id: string, blockType?: string) => BlockMarkerAttributes;
+/**
+ * Attributes identifying one field within the enclosing block. `field` is
+ * relative to that block (`"heading"`, or `"items.0.label"` for something
+ * nested), never an absolute document path.
+ */
+declare const markField: (field: string) => FieldMarkerAttributes;
+//#endregion
+export { BLOCK_ID_ATTRIBUTE, BLOCK_TYPE_ATTRIBUTE, BlockMarkerAttributes, FIELD_ATTRIBUTE, FieldMarkerAttributes, markBlock, markField };

package/dist/attributes.mjs

@@ -0,0 +1,26 @@
+//#region src/attributes.ts
+/**
+* The rendered page carries no field paths. It carries the Payload row `id`
+* that every block already has, and the admin resolves that back to a path
+* against its own form state. That is what keeps the frontend free of a
+* content source map and the API unchanged.
+*/ const BLOCK_ID_ATTRIBUTE = "data-vf-id";
+/** Advisory only: the admin addresses blocks by id, never by type. */ const BLOCK_TYPE_ATTRIBUTE = "data-vf-type";
+/** Resolved against the nearest marked block ancestor, so it stays index-free. */ const FIELD_ATTRIBUTE = "data-vf-field";
+/**
+* Attributes identifying one block in the rendered output. Spread onto a
+* block's own root element to skip the `<Marked>` wrapper, which is worth
+* doing wherever the block already renders a stable element: a real element
+* has a real box, so the highlight overlay does not have to infer geometry
+* from children.
+*/ const markBlock = (id, blockType) => blockType === void 0 ? { [BLOCK_ID_ATTRIBUTE]: id } : {
+	[BLOCK_ID_ATTRIBUTE]: id,
+	[BLOCK_TYPE_ATTRIBUTE]: blockType
+};
+/**
+* Attributes identifying one field within the enclosing block. `field` is
+* relative to that block (`"heading"`, or `"items.0.label"` for something
+* nested), never an absolute document path.
+*/ const markField = (field) => ({ [FIELD_ATTRIBUTE]: field });
+//#endregion
+export { BLOCK_ID_ATTRIBUTE, BLOCK_TYPE_ATTRIBUTE, FIELD_ATTRIBUTE, markBlock, markField };

package/dist/client/bridge.d.mts

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+//#region src/client/bridge.d.ts
+interface ViewfinderBridgeProps {
+  /**
+   * Origin of the Payload admin, e.g. `https://cms.example.com`. Required
+   * rather than defaulting to `"*"`: this window posts the ids of everything
+   * it renders, and validates what it is told to highlight.
+   */
+  adminOrigin: string;
+}
+/**
+ * Connects the rendered page to the Payload admin that is previewing it.
+ * Mount once, near the root of the app.
+ *
+ * Hovering a block outlines it and names it; clicking anywhere inside it
+ * selects it. The whole block is the target, so there is nothing to aim at.
+ *
+ * Does nothing at all when the page is not framed, so the same tree can be
+ * served to real visitors without a second code path.
+ */
+declare const ViewfinderBridge: (props: ViewfinderBridgeProps) => ReactNode;
+//#endregion
+export { ViewfinderBridge, ViewfinderBridgeProps };

package/dist/client/bridge.mjs

@@ -0,0 +1,119 @@
+"use client";
+import { BLOCK_ID_ATTRIBUTE } from "../attributes.mjs";
+import { isAdminMessage, previewMessage } from "../protocol.mjs";
+import { measureElement, scrollBoxIntoView } from "./geometry.mjs";
+import { Overlay } from "./overlay.mjs";
+import { resolveTarget } from "./target.mjs";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+//#region src/client/bridge.tsx
+const findBlock = (id) => document.querySelector(`[${BLOCK_ID_ATTRIBUTE}="${CSS.escape(id)}"]`);
+const labelFor = (address) => address.field === void 0 ? address.blockType ?? "block" : `${address.blockType ?? "block"} · ${address.field}`;
+/**
+* Connects the rendered page to the Payload admin that is previewing it.
+* Mount once, near the root of the app.
+*
+* Hovering a block outlines it and names it; clicking anywhere inside it
+* selects it. The whole block is the target, so there is nothing to aim at.
+*
+* Does nothing at all when the page is not framed, so the same tree can be
+* served to real visitors without a second code path.
+*/ const ViewfinderBridge = (props) => {
+	const { adminOrigin } = props;
+	const [active, setActive] = useState(null);
+	const [box, setBox] = useState(void 0);
+	useEffect(() => {
+		if (window.parent === window) return;
+		const post = (message) => {
+			window.parent.postMessage(message, adminOrigin);
+		};
+		let hovered = null;
+		const postHover = (address) => {
+			const id = address?.id ?? null;
+			if (id === hovered) return;
+			hovered = id;
+			post(address ? previewMessage.hover(address) : previewMessage.leave());
+		};
+		const onPointerOver = (event) => {
+			const resolved = resolveTarget(event.target);
+			if (!resolved) {
+				setActive(null);
+				postHover(null);
+				return;
+			}
+			setActive({
+				element: resolved.element,
+				address: resolved.address
+			});
+			postHover(resolved.address);
+		};
+		const onClick = (event) => {
+			if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+			const resolved = resolveTarget(event.target);
+			if (!resolved) return;
+			event.preventDefault();
+			event.stopPropagation();
+			setActive({
+				element: resolved.element,
+				address: resolved.address
+			});
+			post(previewMessage.select(resolved.address));
+		};
+		const onMessage = (event) => {
+			if (event.origin !== adminOrigin || event.source !== window.parent) return;
+			if (!isAdminMessage(event.data)) return;
+			if (event.data.type === "clear") {
+				setActive(null);
+				return;
+			}
+			const element = findBlock(event.data.address.id);
+			if (!element) return;
+			setActive({
+				element,
+				address: event.data.address
+			});
+			if (event.data.type === "scrollTo") {
+				const measured = measureElement(element);
+				if (measured) scrollBoxIntoView(window, measured);
+			}
+		};
+		document.addEventListener("pointerover", onPointerOver, { passive: true });
+		document.addEventListener("click", onClick, { capture: true });
+		window.addEventListener("message", onMessage);
+		post(previewMessage.ready());
+		return () => {
+			document.removeEventListener("pointerover", onPointerOver);
+			document.removeEventListener("click", onClick, { capture: true });
+			window.removeEventListener("message", onMessage);
+		};
+	}, [adminOrigin]);
+	useEffect(() => {
+		if (!active) {
+			setBox(void 0);
+			return;
+		}
+		const measure = () => {
+			setBox(measureElement(active.element));
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(active.element);
+		observer.observe(document.documentElement);
+		window.addEventListener("scroll", measure, {
+			capture: true,
+			passive: true
+		});
+		window.addEventListener("resize", measure, { passive: true });
+		return () => {
+			observer.disconnect();
+			window.removeEventListener("scroll", measure, { capture: true });
+			window.removeEventListener("resize", measure);
+		};
+	}, [active]);
+	return /*#__PURE__*/ jsx(Overlay, {
+		box,
+		label: active ? labelFor(active.address) : void 0
+	});
+};
+//#endregion
+export { ViewfinderBridge };

package/dist/client/geometry.mjs

@@ -0,0 +1,41 @@
+//#region src/client/geometry.ts
+const isEmpty = (rect) => rect.width === 0 && rect.height === 0;
+/**
+* Viewport-relative box for a marked element.
+*
+* `<Marked>` wraps blocks in a `display: contents` element so that layout is
+* untouched, and such an element generates no box of its own — its rect is
+* all zeroes. A `Range` over its contents measures what it actually renders,
+* covering element and text children alike, which is why this is a range
+* rather than a walk over `children`.
+*/ const measureElement = (element) => {
+	const own = element.getBoundingClientRect();
+	const rect = isEmpty(own) ? rangeRect(element) : own;
+	if (!rect || isEmpty(rect)) return;
+	return {
+		top: rect.top,
+		left: rect.left,
+		width: rect.width,
+		height: rect.height
+	};
+};
+const rangeRect = (element) => {
+	const range = element.ownerDocument.createRange();
+	range.selectNodeContents(element);
+	return range.getBoundingClientRect();
+};
+/**
+* Centres a measured box in the viewport.
+*
+* Not `Element.scrollIntoView`: a `display: contents` wrapper has no box for
+* the browser to scroll to, so the already-measured box is scrolled to
+* instead. That keeps wrapped and self-marked blocks behaving identically.
+*/ const scrollBoxIntoView = (view, box) => {
+	const top = view.scrollY + box.top - (view.innerHeight - box.height) / 2;
+	view.scrollTo({
+		top: Math.max(0, top),
+		behavior: "smooth"
+	});
+};
+//#endregion
+export { measureElement, scrollBoxIntoView };

package/dist/client/index.d.mts

@@ -0,0 +1,5 @@
+import { ViewfinderBridge, ViewfinderBridgeProps } from "./bridge.mjs";
+import { Marked, MarkedProps } from "./marked.mjs";
+import { BlockMarkerAttributes, FieldMarkerAttributes, markBlock, markField } from "../attributes.mjs";
+import { BlockAddress } from "../protocol.mjs";
+export { type BlockAddress, type BlockMarkerAttributes, type FieldMarkerAttributes, Marked, type MarkedProps, ViewfinderBridge, type ViewfinderBridgeProps, markBlock, markField };

package/dist/client/index.mjs

@@ -0,0 +1,5 @@
+"use client";
+import { markBlock, markField } from "../attributes.mjs";
+import { ViewfinderBridge } from "./bridge.mjs";
+import { Marked } from "./marked.mjs";
+export { Marked, ViewfinderBridge, markBlock, markField };

package/dist/client/marked.d.mts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+//#region src/client/marked.d.ts
+interface MarkedProps {
+  /** The Payload row id of this block. */
+  id: string;
+  /**
+   * Shown in the preview overlay so editors can tell blocks apart.
+   *
+   * Explicitly `| undefined` so that under `exactOptionalPropertyTypes` a
+   * caller can forward a possibly-absent value straight through, which is
+   * what a generic wrapper around a block registry has to do.
+   */
+  blockType?: string | undefined;
+  /**
+   * Gate this on your own preview flag. When false the children render
+   * untouched, with no wrapper and no attributes, so production output is
+   * unaffected by having viewfinder installed.
+   */
+  enabled?: boolean | undefined;
+  children: ReactNode;
+}
+/**
+ * Makes one block addressable from the admin.
+ *
+ * Marks the block's own root element where there is one, and falls back to a
+ * `display: contents` wrapper where there is not. The wrapper preserves
+ * layout but is still an element in the tree: it breaks `>` and
+ * `:nth-child()` selectors aimed at the block, the HTML parser reparents it
+ * out of a table or a paragraph, and it has no box, so the overlay measures a
+ * range over its children rather than a rect.
+ *
+ * A block can also spread `markBlock()` onto its own element and skip this
+ * component altogether. That is the same outcome as the marked branch here,
+ * stated by the block rather than inferred.
+ */
+declare const Marked: (props: MarkedProps) => ReactNode;
+//#endregion
+export { Marked, MarkedProps };

package/dist/client/marked.mjs

@@ -0,0 +1,44 @@
+"use client";
+import { markBlock } from "../attributes.mjs";
+import { jsx } from "react/jsx-runtime";
+import { cloneElement, isValidElement } from "react";
+//#region src/client/marked.tsx
+/**
+* `display: contents` removes the wrapper from layout entirely, so marking a
+* block cannot change how it renders. The cost is that the wrapper has no box
+* of its own; `measureElement` handles that.
+*/ const CONTENTS = { display: "contents" };
+/**
+* Whether this is a DOM element, as opposed to a component element, a
+* fragment, a promise or text.
+*
+* `typeof type === "string"` is what makes marking it safe: a host element
+* puts every unknown prop into the markup, so the attributes are certain to
+* land. A component element might forward them to its root or drop them, and
+* there is no way to tell which from here.
+*/ const isHostElement = (node) => /*#__PURE__*/ isValidElement(node) && typeof node.type === "string";
+/**
+* Makes one block addressable from the admin.
+*
+* Marks the block's own root element where there is one, and falls back to a
+* `display: contents` wrapper where there is not. The wrapper preserves
+* layout but is still an element in the tree: it breaks `>` and
+* `:nth-child()` selectors aimed at the block, the HTML parser reparents it
+* out of a table or a paragraph, and it has no box, so the overlay measures a
+* range over its children rather than a rect.
+*
+* A block can also spread `markBlock()` onto its own element and skip this
+* component altogether. That is the same outcome as the marked branch here,
+* stated by the block rather than inferred.
+*/ const Marked = (props) => {
+	if (props.enabled === false || props.id.length === 0) return props.children;
+	const attributes = markBlock(props.id, props.blockType);
+	if (isHostElement(props.children)) return props.children.props["data-vf-id"] === void 0 ? /*#__PURE__*/ cloneElement(props.children, { ...attributes }) : props.children;
+	return /*#__PURE__*/ jsx("div", {
+		style: CONTENTS,
+		...attributes,
+		children: props.children
+	});
+};
+//#endregion
+export { Marked };

package/dist/client/overlay.mjs

@@ -0,0 +1,58 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+//#region src/client/overlay.tsx
+/** Lets the bridge tell its own chrome apart from the page underneath. */ const OVERLAY_ATTRIBUTE = "data-vf-overlay";
+const ACCENT = "#2d81ff";
+const FRAME = {
+	position: "fixed",
+	pointerEvents: "none",
+	zIndex: 2147483647,
+	outline: `2px solid ${ACCENT}`,
+	outlineOffset: "1px",
+	borderRadius: "2px",
+	background: "rgba(45, 129, 255, 0.08)",
+	transition: "top 80ms linear, left 80ms linear, width 80ms linear, height 80ms linear"
+};
+/**
+* Names the block being pointed at. Inert on purpose: the block itself is the
+* click target, so a badge that took pointer events would only carve a dead
+* spot out of it.
+*/ const BADGE = {
+	position: "absolute",
+	top: "-1.65em",
+	left: 0,
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "0.35em",
+	padding: "0 0.45em",
+	borderRadius: "2px",
+	background: ACCENT,
+	color: "#fff",
+	font: "500 11px/1.5em ui-sans-serif, system-ui, sans-serif",
+	whiteSpace: "nowrap"
+};
+/**
+* Portalled to `document.body` so a transformed or clipping ancestor cannot
+* shift the frame away from the block it is outlining — `position: fixed`
+* resolves against the nearest transformed ancestor, not the viewport.
+*/ const Overlay = (props) => {
+	if (!props.box || typeof document === "undefined") return null;
+	const { top, left, width, height } = props.box;
+	return /*#__PURE__*/ createPortal(/*#__PURE__*/ jsx("div", {
+		[OVERLAY_ATTRIBUTE]: "",
+		style: {
+			...FRAME,
+			top,
+			left,
+			width,
+			height
+		},
+		children: /*#__PURE__*/ jsx("span", {
+			style: BADGE,
+			children: props.label ?? "block"
+		})
+	}), document.body);
+};
+//#endregion
+export { OVERLAY_ATTRIBUTE, Overlay };

package/dist/client/target.mjs

@@ -0,0 +1,33 @@
+import { BLOCK_ID_ATTRIBUTE, BLOCK_TYPE_ATTRIBUTE, FIELD_ATTRIBUTE } from "../attributes.mjs";
+//#region src/client/target.ts
+const BLOCK_SELECTOR = `[${BLOCK_ID_ATTRIBUTE}]`;
+const FIELD_SELECTOR = `[${FIELD_ATTRIBUTE}]`;
+/**
+* Walks up from an event target to the block it belongs to, and to the field
+* inside that block when one is marked.
+*
+* A field marker only counts when its own nearest block is this block. A
+* block nested inside a marked field of its parent would otherwise report the
+* parent's field name as its own.
+*
+* Generic over the concrete element type so callers get their own `Element`
+* back; `closest` is declared as returning the structural type, so the one
+* narrowing cast lives here rather than at every call site.
+*/ const resolveTarget = (target) => {
+	const element = target?.closest(BLOCK_SELECTOR) ?? null;
+	const id = element?.getAttribute(BLOCK_ID_ATTRIBUTE);
+	if (!element || id === null || id === void 0 || id.length === 0) return;
+	const blockType = element.getAttribute(BLOCK_TYPE_ATTRIBUTE);
+	const fieldElement = target?.closest(FIELD_SELECTOR) ?? null;
+	const field = fieldElement?.closest(BLOCK_SELECTOR) === element ? fieldElement.getAttribute(FIELD_ATTRIBUTE) : null;
+	return {
+		element,
+		address: {
+			id,
+			...blockType === null ? {} : { blockType },
+			...field === null ? {} : { field }
+		}
+	};
+};
+//#endregion
+export { resolveTarget };

package/dist/config/index.d.mts

@@ -0,0 +1,2 @@
+import { ViewfinderPluginArgs, viewfinderPlugin } from "./plugin.mjs";
+export { type ViewfinderPluginArgs, viewfinderPlugin };

package/dist/config/index.mjs

@@ -0,0 +1,2 @@
+import { viewfinderPlugin } from "./plugin.mjs";
+export { viewfinderPlugin };

package/dist/config/plugin.d.mts

@@ -0,0 +1,18 @@
+import { Plugin } from "payload";
+//#region src/config/plugin.d.ts
+interface ViewfinderPluginArgs {
+  /** Collection slugs to make addressable. Defaults to every collection. */
+  collections?: string[] | undefined;
+  /** Global slugs to make addressable. Defaults to every global. */
+  globals?: string[] | undefined;
+}
+/**
+ * Makes documents addressable from their live preview.
+ *
+ * The bridge it mounts is inert until a framed page announces itself, so
+ * enabling it for a collection that has no live preview configured costs
+ * nothing beyond the component itself.
+ */
+declare const viewfinderPlugin: (args?: ViewfinderPluginArgs) => Plugin;
+//#endregion
+export { ViewfinderPluginArgs, viewfinderPlugin };