@bison-lab/payload-blocks 3.3.0 → 3.4.0

package/README.md

@@ -23,8 +23,8 @@ Payload site already has).
 | --- | --- | --- |
 | `@bison-lab/payload-blocks` | Block configs, field builders, row types, `resolveMedia` | Node. This is what `payload.config.ts` imports, and it touches no React. |
 | `@bison-lab/payload-blocks/react` | Renderers, `RenderBlocks`, the image and link seams, the rendering types | Client (`"use client"`). |
-| `@bison-lab/payload-blocks/rich-text` | The `richText` renderer, alone | Client. Split out because it is the only thing that needs `@payloadcms/richtext-lexical`. |
-| `@bison-lab/payload-blocks/admin` | `MinRowsArrayField`, the admin field the configs reference by path | Client, inside the Payload admin. Resolved through the site's import map, never imported by hand. |
+| `@bison-lab/payload-blocks/rich-text` | The `richText` renderer, and `richTextBlockRenderer()` to build one that resolves internal links | Client. Split out because it is the only thing that needs `@payloadcms/richtext-lexical`. |
+| `@bison-lab/payload-blocks/admin` | `MinRowsArrayField` and `LinkField`, the admin fields the configs reference by path | Client, inside the Payload admin. Resolved through the site's import map, never imported by hand. |
 
 The renderers are client components because the blocks they render are: every
 `@bison-lab/ui` export is a client reference, and these blocks are interactive
@@ -69,14 +69,16 @@ export const Pages: CollectionConfig = {
 Then `payload generate:types`, `payload generate:importmap` and
 `payload migrate:create`.
 
-The import map step is what wires the admin field. Every array in this package
-with a `minRows` opens with that many empty rows and names
-`@bison-lab/payload-blocks/admin#MinRowsArrayField` as its field component,
-which refuses to remove a row once the count is down to the minimum (Payload
-gates Add on `maxRows` but never Remove on `minRows`). Until the import map
-has the entry Payload logs the miss and renders its stock array field, so an
-upgrade that forgets the step degrades to the old behaviour rather than
-breaking. A site can put the same field on its own arrays:
+The import map step is what wires the admin fields, and it is not optional:
+for a field whose custom component is missing from the import map, Payload
+logs the miss and renders the field as nothing (an empty element stands in
+for the component; the stock field does not come back). Two fields need it.
+
+Every array in this package with a `minRows` opens with that many empty rows
+and names `@bison-lab/payload-blocks/admin#MinRowsArrayField` as its field
+component, which refuses to remove a row once the count is down to the
+minimum (Payload gates Add on `maxRows` but never Remove on `minRows`). A site
+can put the same field on its own arrays:
 
 ```ts
 import { MIN_ROWS_ARRAY_FIELD, emptyRows } from '@bison-lab/payload-blocks'
@@ -91,6 +93,23 @@ import { MIN_ROWS_ARRAY_FIELD, emptyRows } from '@bison-lab/payload-blocks'
 }
 ```
 
+Every link a block asks for names `@bison-lab/payload-blocks/admin#LinkField`
+on the row that holds its `type`, `page` and `href`, and the picker replaces
+those three inputs with one box: type to search the pages collection by its
+title field (published pages only, filtered by the server on every keystroke,
+each result shown with its path), or paste anything that can only be a
+destination — `http`, `mailto:`, `tel:`, or a site path starting with `/` —
+and the one offer is to link to it. The chosen state is a Page or External
+chip with a clear button; a page that was unpublished or deleted after it was
+picked shows a warning there, and Payload refuses to publish the document
+until it is picked again or republished, since the relationship only accepts
+published rows. The picker writes the same three fields the stock inputs
+would, so the REST API, `generate:types` and a site that reaches the row
+without the picker all see one shape: `page` shows for `type: page`, `href`
+for `type: external`, and `required` binds whichever is active. A site's own
+block takes the same field through `linkFields()` or `linkField()`, and can
+point it at another collection with `pagesCollection`.
+
 **2. Own the registry.**
 
 The registry is a parameter, not an export, so the compile-time layout lock
@@ -140,6 +159,15 @@ renderer. Never widen that type to get past the error; add the entry.
 band wrapper and resets the library block's own `max-w-*` / `px-*` so the two
 cannot fight.
 
+Every block renders inside an unstyled `<div data-better-editor-id={row.id}>`
+(`BLOCK_ID_ATTRIBUTE`). That is the hook
+[payload-better-editor](https://www.npmjs.com/package/payload-better-editor)
+needs to turn a click in its preview iframe into the clicked row's fields, so a
+site adopting that editor has nothing to add per block. A row without an `id`
+gets no attribute. It also means each band sits one level below the render root:
+a test or a stylesheet that reaches the root's direct children (`container.children`,
+`:scope > section`) meets the wrapper, not the band.
+
 `imageComponent` is how images get optimised. The package has no `next`
 dependency — `next/image` needs per-site configuration this package cannot
 supply — so a Next site writes one adapter and passes it once:
@@ -160,9 +188,10 @@ Uploads are served from `/api/media/file/…`, so widen `next.config.ts`
 renders.
 
 `linkComponent` is the same seam for links. No renderer writes an `<a>`
-itself: every `href` a block emits — a hero call to action, a showcase panel's
-corner action, a NAP `tel:` link, a menu — goes through the component you pass,
-so a Next site's navigation stays client-side. `newTab` arrives as a flag
+itself (one rich-text node excepted, below): every `href` a block emits — a hero call to action, a showcase panel's
+corner action, a NAP `tel:` link, a menu, a link typed into a `richText`
+section — goes through the component you pass, so a Next site's navigation
+stays client-side. `newTab` arrives as a flag
 **and** as `target`/`rel` already expanded from it, so the adapter only has to
 drop the flag before spreading:
 
@@ -177,6 +206,74 @@ export const NextBlockLink: BlockLinkComponent = ({ newTab, ...props }) => <Link
 Without one, `DefaultBlockLink` renders a plain anchor and sets `target` and
 `rel` together whenever `newTab` is on.
 
+`resolveLink` is how a page link becomes a path. Every link a block asks for
+(`linkFields()`: a hero call to action, the testimonial link, the FAQ call to
+action, a menu link) is stored as `type` (`page` or `external`), `page` (a
+relationship into the site's pages collection, published rows only) and
+`href`. A `depth: 1` page read populates `page`, and the renderer hands the
+link to `resolveLink` for its `href`. The default makes it `/<slug>`; a site
+whose routes differ passes its own, exported from a client module like the
+adapters above (a Server Component cannot hand a closure across the boundary):
+
+```tsx
+'use client'
+import { resolveLink, type ResolveLink } from '@bison-lab/payload-blocks/react'
+import { pagePath } from '@/lib/routes' // your site's route helper
+
+export const resolveSiteLink: ResolveLink = (link) =>
+  link.type === 'page' && typeof link.page === 'object' && link.page?.slug
+    ? pagePath(link.page.slug)
+    : resolveLink(link)
+```
+
+A page link whose page is missing or unpublished resolves to `null`, and the
+renderer shows the label as text rather than an anchor that points nowhere
+(Payload hands the public read the bare id when the reader may not see the
+page, which is what unpublished looks like from the site). A menu drops such a
+link instead: an item that goes nowhere is worse than one fewer item. An
+external link's `href` is never rewritten. A row saved before links had a
+`type` carries only an `href`, and every reader (`resolveLink`, the stock
+fields' conditions, the picker) takes that as an external link: the site keeps
+rendering it and the admin shows it as an External chip. A site's migration to
+`type: external` only makes the stored row say so.
+
+Links in a `richText` section go through `linkComponent` too, the ones Lexical
+auto-detects included. One kind needs more: a link an editor makes to another
+*document* has no URL, only the document, and the route is the site's to know.
+That is the same knowledge `resolveLink` carries, but Lexical hands the
+renderer a link *node* rather than one of the link rows above, so it is a
+separate resolver taking a separate shape. Build that site's renderer with
+`richTextBlockRenderer({ internalDocToHref })` and register it in place of
+`RichTextBlockRenderer`. Do it in a `'use client'` module, like the adapters
+above: the `/rich-text` entry carries the client banner, so the factory is a
+client reference a Server Component can pass along but cannot call, and the
+resolver is a closure that could not cross the boundary as a prop.
+
+```tsx
+'use client'
+import { richTextBlockRenderer } from '@bison-lab/payload-blocks/rich-text'
+
+export const SiteRichText = richTextBlockRenderer({
+  internalDocToHref: ({ linkNode }) => {
+    const doc = linkNode.fields.doc
+    if (!doc) return '#'
+    // `value` is the related document when the page was fetched deep enough
+    // to populate it, otherwise its id. Fetch pages at depth 1 or more.
+    const slug = typeof doc.value === 'object' ? doc.value.slug : doc.value
+    return doc.relationTo === 'pages' ? `/${slug}` : `/${doc.relationTo}/${slug}`
+  },
+})
+```
+
+Without a resolver an internal link still renders through the adapter, at `#`,
+with a console error naming the option. A site whose editors link between
+documents should not ship that way.
+
+One rich-text node still bypasses both seams: an *upload* an editor drops into
+the prose renders through Payload's own converter, a file as a bare `<a>` and
+an image as a raw `<img>`, until BIS-76 routes them through `linkComponent`
+and `imageComponent`.
+
 ### The seam
 
 One block floats across the join between two bands: the stats band with
@@ -299,7 +396,7 @@ renders nothing, and `headerItemsFromBlocks` drops it.
 | Slug | Renders | Notes |
 | --- | --- | --- |
 | `hero` | plain markup | No `@bison-lab/ui` counterpart. Override this entry with your own. |
-| `richText` | `RichText` (Lexical) | From `/rich-text`. |
+| `richText` | `RichText` (Lexical) | From `/rich-text`. Links go through `linkComponent`; a link to another document needs `richTextBlockRenderer({ internalDocToHref })`. Uploads dropped into the prose do not use the seams yet (BIS-76). |
 | `showcasePanels` | `ShowcasePanelsBlock` | 3–6 panels, each with a required image. Opens with three. |
 | `processSteps` | `ProcessStepsBlock` | 3–6 ordered steps, numbered by position; advances on a timer. Opens with three. |
 | `faqColumns` | `FAQColumnsBlock` | Answers are plain text, not Lexical — see the config for why. |
@@ -366,10 +463,14 @@ renderer's is here.
   bundler, in `migrate`, `generate:types` and the admin server. An admin
   component is referenced from a config by its import-map string
   (`MIN_ROWS_ARRAY_FIELD`), never imported.
-- **`src/admin.tsx` is the only entry that loads `@payloadcms/ui`.** It wraps
-  Payload's stock fields rather than re-implementing them, so an upgrade
-  carries every upstream behaviour along. Editor-facing copy, accessible names
-  and control text are not config fields: the `@bison-lab/ui` defaults stand.
+- **`src/admin.tsx` is the only entry that loads `@payloadcms/ui`.** Where a
+  stock field does most of the job it is wrapped, not re-implemented
+  (`MinRowsArrayField`), so an upgrade carries every upstream behaviour along.
+  A control Payload has no stock form of (`LinkField`) is written against
+  Payload's hooks and theme variables and nothing else, so it reads in both
+  admin themes without a stylesheet of its own. Editor-facing copy, accessible
+  names and control text are not config fields: the `@bison-lab/ui` defaults
+  stand.
 - **`cn()` is off limits.** It is a client-only export of `@bison-lab/ui`; use
   the local `cx()`.
 - **Changing a field is a schema change in every consuming site.** Update

package/dist/admin.d.mts

@@ -1,6 +1,9 @@
 
-import { ArrayFieldClientComponent } from "payload";
+import { ArrayFieldClientComponent, RowFieldClientComponent } from "payload";
 
+//#region src/admin/link-field.d.ts
+declare const LinkField: RowFieldClientComponent;
+//#endregion
 //#region src/admin/min-rows-array-field.d.ts
 /**
  * Payload's array field, with *Remove* refused once the rows are down to
@@ -23,5 +26,5 @@ import { ArrayFieldClientComponent } from "payload";
  */
 declare const MinRowsArrayField: ArrayFieldClientComponent;
 //#endregion
-export { MinRowsArrayField };
+export { LinkField, MinRowsArrayField };
 //# sourceMappingURL=admin.d.mts.map

package/dist/admin.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"admin.d.mts","names":[],"sources":["../src/admin/min-rows-array-field.tsx"],"mappings":";;;;;;AAuBA;;;;;;;;;;;;;;;;;cAAa,iBAAA,EAAmB,yBAAA"}
+{"version":3,"file":"admin.d.mts","names":[],"sources":["../src/admin/link-field.tsx","../src/admin/min-rows-array-field.tsx"],"mappings":";;;;cAuEa,SAAA,EAAW,uBAAA;;;;;AAAxB;;;;;;;;AChDA;;;;;;;;;cAAa,iBAAA,EAAmB,yBAAA"}

package/dist/admin.mjs

@@ -1,7 +1,365 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { ArrayField, toast, useField, useTranslation } from "@payloadcms/ui";
-import { useCallback, useRef } from "react";
+import { t as linkTypeOf } from "./link-CnwLtm47.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ArrayField, FieldDescription, FieldError, FieldLabel, toast, useConfig, useField, useFieldPath, useTranslation } from "@payloadcms/ui";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+//#region src/admin/link-field.tsx
+/**
+* The link picker: one box in place of a link's `type`, `page` and `href`.
+*
+* Type to search the pages collection by its title field; each result shows
+* its path. Paste anything that can only be a destination (`http`, `mailto:`,
+* `tel:`, or a site path starting with `/`) and the one offer is to link to
+* it. Choosing writes the stored shape through Payload's `useField`, so the
+* document saves exactly what the stock fields would have saved, and the
+* chosen state shows a Page or External chip with a clear button.
+*
+* The search asks the collection's REST endpoint for `_status: published`
+* rows, so the draft rule is the server's and is applied on every keystroke.
+* A stored page is fetched by id without that filter, which is how the
+* picker knows to warn that a page chosen earlier has since been unpublished
+* or deleted.
+*
+* Painted with Payload's own theme variables and nothing else, so it reads
+* in both admin themes without a stylesheet of its own; the rules ride along
+* in a `<style href precedence>`, which React 19 hoists into the head and
+* dedupes across instances. Payload 3's admin is React 19 (`@payloadcms/ui`
+* peers `react ^19`), so that is the only React this entry runs under.
+*/
+const LABEL = "Goes to";
+const PLACEHOLDER = "Search pages, or paste a URL";
+const DESCRIPTION = "Published pages only. Paste a URL, or a path like /find-a-doctor, to link anywhere else.";
+const NO_MATCH = "No published page matches. Paste a URL to link outside the site.";
+const UNPUBLISHED = "This page is no longer published. The site shows this link as plain text, and this document cannot be published until you pick another page or publish that one again.";
+const MISSING = "This page no longer exists. Pick another page or paste a URL before publishing.";
+const SEARCH_DELAY_MS = 200;
+const SEARCH_LIMIT = 8;
+/** Text an editor could only mean as a destination, never as a page title. */
+const URL_LIKE = /^(https?:\/\/|mailto:|tel:|\/)/i;
+/**
+* A row has no name, so its `path` ends in `_index-N` and its fields sit at
+* the parent's level, the way Payload's `getFieldPaths` places them.
+*/
+function siblingPaths(rowPath) {
+	const base = rowPath.split(".").filter((segment) => !segment.startsWith("_index-")).join(".");
+	const at = (name) => base ? `${base}.${name}` : name;
+	return {
+		type: at("type"),
+		page: at("page"),
+		href: at("href")
+	};
+}
+function pagePath(page) {
+	return page.slug ? `/${page.slug}` : "";
+}
+const LinkField = ({ field, path, readOnly }) => {
+	const rowPath = useFieldPath() ?? path;
+	const paths = useMemo(() => siblingPaths(rowPath), [rowPath]);
+	const type = useField({ path: paths.type });
+	const page = useField({ path: paths.page });
+	const href = useField({ path: paths.href });
+	const pageField = field.fields.find((f) => f.type === "relationship" && f.name === "page");
+	const collection = typeof pageField?.relationTo === "string" ? pageField.relationTo : "pages";
+	const required = Boolean(pageField?.required);
+	const { config } = useConfig();
+	const titleKey = config.collections.find((c) => c.slug === collection)?.admin?.useAsTitle ?? "id";
+	const endpoint = `${config.serverURL}${config.routes.api}/${collection}`;
+	const id = useId();
+	const inputId = `${id}-input`;
+	const listId = `${id}-list`;
+	const inputRef = useRef(null);
+	const [query, setQuery] = useState("");
+	const [open, setOpen] = useState(false);
+	const [loading, setLoading] = useState(false);
+	const [results, setResults] = useState([]);
+	const [active, setActive] = useState(-1);
+	const [focusNext, setFocusNext] = useState(false);
+	/** The stored page, looked up; `missing` when the id no longer answers. */
+	const [stored, setStored] = useState(null);
+	/** Pages seen in search results, so choosing one needs no second request. */
+	const known = useRef(/* @__PURE__ */ new Map());
+	const searchSeq = useRef(0);
+	const linkType = linkTypeOf({
+		type: type.value,
+		page: page.value,
+		href: href.value
+	});
+	const kind = linkType === "external" ? href.value ? "external" : null : page.value ? "page" : null;
+	const pageValue = page.value;
+	const pageId = pageValue && typeof pageValue === "object" ? null : pageValue;
+	useEffect(() => {
+		if (kind !== "page") {
+			setStored(null);
+			return;
+		}
+		if (pageValue && typeof pageValue === "object") {
+			setStored({
+				doc: pageValue,
+				missing: false
+			});
+			return;
+		}
+		const cached = known.current.get(String(pageId));
+		if (cached) {
+			setStored({
+				doc: cached,
+				missing: false
+			});
+			return;
+		}
+		let cancelled = false;
+		fetch(`${endpoint}/${pageId}?depth=0`, { credentials: "include" }).then(async (response) => {
+			if (cancelled) return;
+			if (!response.ok) {
+				setStored({
+					doc: null,
+					missing: true
+				});
+				return;
+			}
+			const doc = await response.json();
+			known.current.set(String(doc.id), doc);
+			if (!cancelled) setStored({
+				doc,
+				missing: false
+			});
+		}).catch(() => {
+			if (!cancelled) setStored({
+				doc: null,
+				missing: true
+			});
+		});
+		return () => {
+			cancelled = true;
+		};
+	}, [
+		kind,
+		pageValue,
+		pageId,
+		endpoint
+	]);
+	const trimmed = query.trim();
+	const urlLike = URL_LIKE.test(trimmed);
+	useEffect(() => {
+		if (!open || urlLike) return;
+		const seq = searchSeq.current += 1;
+		setLoading(true);
+		const timer = setTimeout(() => {
+			const params = new URLSearchParams({
+				depth: "0",
+				limit: String(SEARCH_LIMIT),
+				sort: titleKey,
+				"where[_status][equals]": "published"
+			});
+			if (trimmed) params.set(`where[${titleKey}][like]`, trimmed);
+			fetch(`${endpoint}?${params.toString()}`, { credentials: "include" }).then((response) => response.ok ? response.json() : { docs: [] }).then((body) => {
+				if (seq !== searchSeq.current) return;
+				const docs = body.docs ?? [];
+				for (const doc of docs) known.current.set(String(doc.id), doc);
+				setResults(docs);
+				setLoading(false);
+			}).catch(() => {
+				if (seq !== searchSeq.current) return;
+				setResults([]);
+				setLoading(false);
+			});
+		}, SEARCH_DELAY_MS);
+		return () => clearTimeout(timer);
+	}, [
+		open,
+		urlLike,
+		trimmed,
+		endpoint,
+		titleKey
+	]);
+	useEffect(() => {
+		if (focusNext && inputRef.current) {
+			inputRef.current.focus();
+			setFocusNext(false);
+		}
+	}, [focusNext, kind]);
+	const options = urlLike ? [{
+		kind: "url",
+		href: trimmed
+	}] : results.map((doc) => ({
+		kind: "page",
+		page: doc
+	}));
+	function choose(option) {
+		if (option.kind === "page") {
+			known.current.set(String(option.page.id), option.page);
+			type.setValue("page");
+			page.setValue(option.page.id);
+			href.setValue(null);
+		} else {
+			type.setValue("external");
+			href.setValue(option.href);
+			page.setValue(null);
+		}
+		setQuery("");
+		setOpen(false);
+		setActive(-1);
+	}
+	function clear() {
+		type.setValue("page");
+		page.setValue(null);
+		href.setValue(null);
+		setStored(null);
+		setFocusNext(true);
+	}
+	function onKeyDown(event) {
+		if (event.key === "ArrowDown") {
+			event.preventDefault();
+			if (!open) {
+				setOpen(true);
+				return;
+			}
+			setActive((i) => options.length ? (i + 1) % options.length : -1);
+		} else if (event.key === "ArrowUp") {
+			event.preventDefault();
+			setActive((i) => options.length ? i <= 0 ? options.length - 1 : i - 1 : -1);
+		} else if (event.key === "Enter") {
+			if (!open) return;
+			event.preventDefault();
+			const pick = options[active] ?? options[0];
+			if (pick) choose(pick);
+		} else if (event.key === "Escape") {
+			if (!open) return;
+			event.preventDefault();
+			event.stopPropagation();
+			setOpen(false);
+			setActive(-1);
+		}
+	}
+	const error = linkType === "external" ? href : page;
+	const activeId = active >= 0 && open ? `${id}-option-${active}` : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "field-type bl-link-field",
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "bl-link-field",
+				precedence: "default",
+				children: CSS
+			}),
+			/* @__PURE__ */ jsx(FieldLabel, {
+				htmlFor: inputId,
+				label: LABEL,
+				required
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bl-link-field__control",
+				children: [
+					kind === "page" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "bl-link-field__kind",
+						children: "Page"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "bl-link-field__value",
+						children: stored?.doc ? /* @__PURE__ */ jsxs(Fragment, { children: [String(stored.doc[titleKey] ?? stored.doc.id), /* @__PURE__ */ jsx("span", {
+							className: "bl-link-field__path",
+							children: pagePath(stored.doc)
+						})] }) : stored?.missing ? `Page ${String(pageId)}` : "…"
+					})] }) : kind === "external" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+						className: "bl-link-field__kind",
+						children: "External"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "bl-link-field__value",
+						children: href.value
+					})] }) : /* @__PURE__ */ jsx("input", {
+						ref: inputRef,
+						id: inputId,
+						type: "text",
+						role: "combobox",
+						className: "bl-link-field__input",
+						placeholder: PLACEHOLDER,
+						autoComplete: "off",
+						disabled: readOnly,
+						value: query,
+						"aria-expanded": open,
+						"aria-controls": listId,
+						"aria-autocomplete": "list",
+						"aria-activedescendant": activeId,
+						onChange: (event) => {
+							setQuery(event.target.value);
+							setActive(-1);
+							setOpen(true);
+						},
+						onFocus: () => setOpen(true),
+						onBlur: () => setOpen(false),
+						onKeyDown
+					}),
+					kind && !readOnly ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						className: "bl-link-field__clear",
+						"aria-label": "Clear",
+						onClick: clear,
+						children: "×"
+					}) : null,
+					open && !kind ? /* @__PURE__ */ jsxs("ul", {
+						id: listId,
+						role: "listbox",
+						className: "bl-link-field__menu",
+						children: [options.map((option, i) => /* @__PURE__ */ jsx("li", {
+							id: `${id}-option-${i}`,
+							role: "option",
+							"aria-selected": i === active,
+							className: "bl-link-field__option",
+							onMouseDown: (event) => {
+								event.preventDefault();
+								choose(option);
+							},
+							onMouseEnter: () => setActive(i),
+							children: option.kind === "page" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: String(option.page[titleKey] ?? option.page.id) }), /* @__PURE__ */ jsx("span", {
+								className: "bl-link-field__path",
+								children: pagePath(option.page)
+							})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: "Link to this URL" }), /* @__PURE__ */ jsx("span", {
+								className: "bl-link-field__path",
+								children: option.href
+							})] })
+						}, option.kind === "page" ? String(option.page.id) : option.href)), options.length === 0 && !loading ? /* @__PURE__ */ jsx("li", {
+							role: "presentation",
+							className: "bl-link-field__empty",
+							children: NO_MATCH
+						}) : null]
+					}) : null
+				]
+			}),
+			kind === "page" && stored && (stored.missing || stored.doc?._status === "draft") ? /* @__PURE__ */ jsx("div", {
+				role: "status",
+				className: "bl-link-field__warning",
+				children: stored.missing ? MISSING : UNPUBLISHED
+			}) : null,
+			/* @__PURE__ */ jsx(FieldDescription, {
+				description: DESCRIPTION,
+				path: paths.page
+			}),
+			/* @__PURE__ */ jsx(FieldError, {
+				path: error.path,
+				showError: error.showError,
+				message: error.errorMessage
+			})
+		]
+	});
+};
+/** Theme variables only: a literal colour would be right in one theme and wrong in the other. */
+const CSS = `
+.bl-link-field__control{position:relative;display:flex;align-items:center;gap:calc(var(--base) * .4);min-height:calc(var(--base) * 2);padding:calc(var(--base) * .25) calc(var(--base) * .6);border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-input-bg);color:var(--theme-elevation-800);font-family:var(--font-body)}
+.bl-link-field__control:focus-within{border-color:var(--theme-elevation-400);box-shadow:0 0 0 1px var(--theme-elevation-400)}
+.bl-link-field__input{flex:1;min-width:0;border:0;background:transparent;color:inherit;font:inherit;outline:none}
+.bl-link-field__input::placeholder{color:var(--theme-elevation-400)}
+.bl-link-field__input:disabled{color:var(--theme-elevation-400)}
+.bl-link-field__kind{flex:none;padding:2px 6px;border-radius:var(--style-radius-s);background:var(--theme-elevation-100);color:var(--theme-elevation-600);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase}
+.bl-link-field__value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
+.bl-link-field__path{margin-left:calc(var(--base) * .4);color:var(--theme-elevation-500);font-family:var(--font-mono);font-size:11.5px;font-weight:400}
+.bl-link-field__clear{flex:none;width:calc(var(--base) * 1.2);height:calc(var(--base) * 1.2);border:0;border-radius:var(--style-radius-s);background:transparent;color:var(--theme-elevation-500);font-size:18px;line-height:1;cursor:pointer}
+.bl-link-field__clear:hover,.bl-link-field__clear:focus-visible{background:var(--theme-elevation-100);color:var(--theme-elevation-800);outline:none}
+.bl-link-field__menu{position:absolute;left:-1px;right:-1px;top:calc(100% + 4px);z-index:10;margin:0;padding:calc(var(--base) * .2) 0;list-style:none;border:1px solid var(--theme-elevation-150);border-radius:var(--style-radius-s);background:var(--theme-elevation-0);box-shadow:0 8px 24px var(--theme-overlay)}
+.bl-link-field__option{display:flex;justify-content:space-between;gap:calc(var(--base) * .6);padding:calc(var(--base) * .35) calc(var(--base) * .6);cursor:pointer}
+.bl-link-field__option[aria-selected="true"]{background:var(--theme-elevation-100)}
+.bl-link-field__empty{padding:calc(var(--base) * .5) calc(var(--base) * .6);color:var(--theme-elevation-500)}
+.bl-link-field__warning{display:flex;align-items:baseline;gap:calc(var(--base) * .3);margin-top:calc(var(--base) * .3);color:var(--theme-warning-600);font-size:12px}
+.bl-link-field__warning::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--theme-warning-500);transform:translateY(-1px)}
+`;
+//#endregion
 //#region src/admin/min-rows-array-field.tsx
 /**
 * Payload's array field, with *Remove* refused once the rows are down to
@@ -77,6 +435,6 @@ function staticLabel(label, language) {
 	}
 }
 //#endregion
-export { MinRowsArrayField };
+export { LinkField, MinRowsArrayField };
 
 //# sourceMappingURL=admin.mjs.map