@bettercms-ai/kit 0.1.1 → 2.0.0

package/dist/controls/link.js

@@ -0,0 +1,1186 @@
+import { cn } from "../lib/cn.js";
+import { useKitEnv, useKitServices } from "../context.js";
+import { isObj } from "../lib/path.js";
+import { Button, IconButton } from "../ui/button.js";
+import { Switch } from "../ui/controls.js";
+import { Menu, MenuContent, MenuItem, MenuTrigger, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Tooltip } from "../ui/overlay.js";
+import { Input } from "../ui/input.js";
+import { Select } from "../ui/select.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { IconAdjustmentsHorizontal, IconArrowUpRight, IconAt, IconCheck, IconChevronDown, IconExternalLink, IconFile, IconFileDatabase, IconFolderOpen, IconHash, IconLink, IconMail, IconPaperclip, IconPhone, IconWorld, IconX } from "@tabler/icons-react";
+//#region src/controls/link.tsx
+/**
+* LINK — the ONE link element of the product (V2 HEAD kit/controls/link.tsx, DESIGN §8.7, CPO D43 · D48 · D57).
+*
+*  - <LinkForm>        Type (Page · CMS item · URL · Email · Phone · Section · File) → the target for that type (search over
+*                      the host's pages and CMS items, paste detection, URL / email / phone / #anchor validation; File =
+*                      the host's media library) → Section on the picked page → options (new tab · rel · email subject).
+*  - <LinkPopoverBody> the link panel: what it links to now + LinkForm + Remove link · Cancel · Apply.
+*  - <LinkField>       a link at rest (one bordered row): click edits in place (quick edit), the sliders icon opens the panel.
+*  - <LinkPicker>      the target input inside all of the above.
+*  - <LinkLine>        how a link READS at rest: page icon + title + path · external icon + domain · mail / phone.
+*
+* Where the targets come from. The kit never fetches: the host hands its own link-target query in as a React hook,
+* `KitServices.useLinkTargets` (KitLinkServices below), and the media library as `KitServices.MediaPicker`. With no hook a
+* page link is typed as a path and the list says so in words; with no media picker the File type is not offered.
+* Section anchors come from the host that knows the page (SectionAnchorsProvider); without one a section is typed (#faq).
+*
+* Stored shape (prod `link`, adapters/values.ts linkToProd / linkFromProd). The kit value is what the field already
+* stores: a STRING href stays a string (legacy fields and the sites that read `href={link}`), an object stays an object.
+* An empty field takes `field.valueShape` and, with none, the string (prod LinkField's default). In the string shape the
+* options (new tab, rel) need the object, so they hide — V2's `valueShape="string"`. An object never carries `target`
+* (derived from newTab), `rel: "follow"` (follow = no rel) or `newTab: false`, so it reads back exactly as written.
+*
+* Deviations from V2, each because prod has no source for it: no "From this entry" {{token}} targets (no binding store
+* behind them), no seeded page anchors, no fabricated CDN address for a file (a file without a public url is refused).
+*/
+var NO_TARGETS = [];
+var useNoTargets = () => ({
+	targets: NO_TARGETS,
+	loading: false,
+	error: void 0
+});
+/** The host's pages, CMS items (and files, when it lists them). */
+function useLinkTargets() {
+	const svc = useKitServices();
+	const r = (svc.useLinkTargets ?? useNoTargets)();
+	return {
+		targets: r.targets ?? NO_TARGETS,
+		loading: !!r.loading,
+		error: r.error,
+		unavailable: !svc.useLinkTargets
+	};
+}
+var SectionAnchorsCtx = React.createContext(null);
+/** The host that knows the page being edited lists its section anchors, so the Section type is a pick. */
+function SectionAnchorsProvider({ anchors, children }) {
+	return /* @__PURE__ */ jsx(SectionAnchorsCtx.Provider, {
+		value: anchors,
+		children
+	});
+}
+function useSectionTargets() {
+	const anchors = React.useContext(SectionAnchorsCtx);
+	return React.useMemo(() => (anchors ?? []).map((a) => ({
+		id: `section:${a.anchor}`,
+		title: a.label,
+		href: a.anchor.startsWith("#") ? a.anchor : `#${a.anchor}`,
+		kind: "section",
+		group: "On this page",
+		onChoose: a.ensure
+	})), [anchors]);
+}
+/** A file from the media library as a link target, or the reason it can't be one. */
+function fileTarget(a) {
+	if (!a.url || a.url.startsWith("blob:")) return { problem: "This file has no public address yet. Wait for the upload to finish, then pick it again." };
+	const name = a.name || fileName(a.url);
+	return {
+		id: a.id,
+		title: name,
+		href: a.url,
+		kind: "file",
+		meta: name.split(".").pop()?.toUpperCase(),
+		group: "Files"
+	};
+}
+var normLink = (v) => {
+	const o = typeof v === "string" ? { href: v } : isObj(v) ? {
+		...v,
+		href: typeof v.href === "string" ? v.href : ""
+	} : { href: "" };
+	if (o.newTab === void 0 && o.target === "_blank") o.newTab = true;
+	if (!o.type) o.type = detectType(o.href);
+	return o;
+};
+function detectType(raw) {
+	const s = raw.trim();
+	if (!s) return "page";
+	if (s.startsWith("#")) return "section";
+	if (/^mailto:/i.test(s) || /^[^\s@/]+@[^\s@]+\.[^\s@]+$/.test(s)) return "email";
+	if (/^tel:/i.test(s) || /^\+?[\d\s().-]{7,}$/.test(s)) return "phone";
+	if (/\.(pdf|zip|docx?|csv)$/i.test(s)) return "file";
+	if (/^https?:\/\//i.test(s) || /^www\./i.test(s) || /^[a-z0-9-]+(\.[a-z0-9-]+)+(\/|$)/i.test(s)) return "url";
+	return "page";
+}
+var LINK_TYPES = [
+	{
+		type: "page",
+		label: "Page",
+		icon: /* @__PURE__ */ jsx(IconFile, { stroke: 1.5 }),
+		placeholder: "Search pages and CMS items, or paste a link",
+		target: "Page"
+	},
+	{
+		type: "entry",
+		label: "CMS item",
+		icon: /* @__PURE__ */ jsx(IconFileDatabase, { stroke: 1.5 }),
+		placeholder: "Search CMS items",
+		target: "CMS item"
+	},
+	{
+		type: "url",
+		label: "URL",
+		icon: /* @__PURE__ */ jsx(IconWorld, { stroke: 1.5 }),
+		placeholder: "https://example.com",
+		target: "Address"
+	},
+	{
+		type: "email",
+		label: "Email",
+		icon: /* @__PURE__ */ jsx(IconAt, { stroke: 1.5 }),
+		placeholder: "name@company.com",
+		target: "Email address"
+	},
+	{
+		type: "phone",
+		label: "Phone",
+		icon: /* @__PURE__ */ jsx(IconPhone, { stroke: 1.5 }),
+		placeholder: "+1 541 555 0182",
+		target: "Phone number"
+	},
+	{
+		type: "section",
+		label: "Section",
+		icon: /* @__PURE__ */ jsx(IconHash, { stroke: 1.5 }),
+		placeholder: "#section-on-this-page",
+		target: "Section on this page"
+	},
+	{
+		type: "file",
+		label: "File",
+		icon: /* @__PURE__ */ jsx(IconPaperclip, { stroke: 1.5 }),
+		placeholder: "Search files",
+		target: "File"
+	}
+];
+var typeMeta = (t) => LINK_TYPES.find((x) => x.type === t) ?? LINK_TYPES[0];
+/** The target a value points at: by id first, then by an exact path ("/about" typed by hand still reads as About). */
+function findTarget(targets, v) {
+	const byId = targets.find((t) => v.pageId && t.id === v.pageId || v.entryId && t.id === v.entryId || v.assetId && t.id === v.assetId);
+	if (byId) return byId;
+	if (v.type === "section") return v.href ? targets.find((t) => t.kind === "section" && t.href === (v.href.startsWith("#") ? v.href : `#${v.href}`)) : void 0;
+	if (!v.href || v.type !== "page" && v.type !== "entry" && v.type !== "file") return void 0;
+	if (v.type === "file") return targets.find((t) => t.kind === "file" && t.href === v.href) ?? (v.title ? {
+		id: v.assetId ?? v.href,
+		title: v.title,
+		href: v.href,
+		kind: "file",
+		group: "Files"
+	} : void 0);
+	const path = v.href.replace(/[?#].*$/, "").replace(/\/$/, "") || "/";
+	return targets.find((t) => t.kind !== "file" && t.kind !== "section" && t.href === path);
+}
+/** The final href for a link value. */
+function hrefOf(v) {
+	switch (v.type) {
+		case "email": {
+			const addr = (v.email ?? v.href).replace(/^mailto:/i, "").replace(/\?.*$/, "");
+			return addr ? `mailto:${addr}${v.subject ? `?subject=${encodeURIComponent(v.subject)}` : ""}` : "";
+		}
+		case "phone": {
+			const n = (v.phone ?? v.href).replace(/^tel:/i, "").replace(/[^\d+]/g, "");
+			return n ? `tel:${n}` : "";
+		}
+		case "section": return v.href.startsWith("#") ? v.href : v.href ? `#${v.href}` : "";
+		default: return `${v.anchor !== void 0 ? v.href.replace(/#.*$/, "") : v.href}${v.anchor && v.anchor !== "none" ? v.anchor : ""}`;
+	}
+}
+var BAD_URL = "Enter a full address, like https://example.com.";
+/** Why a link can't be saved yet, in plain words. Undefined when it is fine (or empty). */
+function linkProblem(v) {
+	if (!hasLink(v)) return void 0;
+	const raw = (v.type === "email" ? v.email ?? v.href : v.type === "phone" ? v.phone ?? v.href : v.href).trim();
+	if (/^(javascript|data|vbscript):/i.test(raw.replace(/[\u0000- ]/g, ""))) return "Script links aren't allowed.";
+	switch (v.type) {
+		case "url":
+			if (raw.startsWith("/") || raw.startsWith("#")) return void 0;
+			try {
+				const u = new URL(/^[a-z][a-z0-9+.-]*:/i.test(raw) ? raw : `https://${raw}`);
+				if (!/^https?:$/.test(u.protocol)) return BAD_URL;
+				return /\.[a-z]{2,}$/i.test(u.hostname) || u.hostname === "localhost" ? void 0 : BAD_URL;
+			} catch {
+				return BAD_URL;
+			}
+		case "email": return /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(raw.replace(/^mailto:/i, "").replace(/\?.*$/, "")) ? void 0 : "Enter an email address, like name@company.com.";
+		case "phone": return raw.replace(/^tel:/i, "").replace(/\D/g, "").length >= 7 ? void 0 : "Enter a phone number with at least 7 digits.";
+		case "section": return /^#?[A-Za-z][\w-]*$/.test(raw) ? void 0 : "Use letters, numbers and dashes, like #faq.";
+		case "page":
+		case "entry": return raw.startsWith("/") || raw.startsWith("#") || v.pageId || v.entryId ? void 0 : "Pick a page, or start a path with /, like /about.";
+		default: return;
+	}
+}
+/** One list for every link editor (dropdown, never a segmented row — D40). */
+var REL_ITEMS = [
+	{
+		value: "follow",
+		label: "Do-follow",
+		description: "Normal link. Search engines follow it."
+	},
+	{
+		value: "nofollow",
+		label: "No-follow",
+		description: "Search engines don't follow or credit it."
+	},
+	{
+		value: "sponsored",
+		label: "Sponsored",
+		description: "Paid, affiliate or ad link."
+	},
+	{
+		value: "ugc",
+		label: "UGC",
+		description: "Link added by users, e.g. comments."
+	}
+];
+var hasLink = (v) => !!(v.href || v.email || v.phone);
+var TARGET_KEYS = {
+	title: void 0,
+	pageId: void 0,
+	entryId: void 0,
+	assetId: void 0,
+	anchor: void 0
+};
+/** The value a picked target produces (keeps label, style and options). */
+function withTarget(v, t) {
+	return {
+		...v,
+		...TARGET_KEYS,
+		email: void 0,
+		phone: void 0,
+		subject: void 0,
+		type: t.kind === "file" ? "file" : t.kind === "entry" ? "entry" : t.kind === "section" ? "section" : "page",
+		href: t.href,
+		title: t.title,
+		pageId: t.kind === "page" ? t.id : void 0,
+		entryId: t.kind === "entry" ? t.id : void 0,
+		assetId: t.kind === "file" ? t.id : void 0
+	};
+}
+/** The value typed text produces (auto-detects URL / email / phone / #section unless the type was chosen). */
+function withText(v, s, type) {
+	const t = type ?? detectType(s);
+	const n = {
+		...v,
+		...TARGET_KEYS,
+		type: t,
+		email: void 0,
+		phone: void 0
+	};
+	if (t === "email") Object.assign(n, {
+		email: s.replace(/^mailto:/i, ""),
+		href: s
+	});
+	else if (t === "phone") Object.assign(n, {
+		phone: s.replace(/^tel:/i, ""),
+		href: s
+	});
+	else n.href = s;
+	return n;
+}
+/** Clean a value before it is stored: add https:// to bare domains, refuse script URLs, store the href the site renders. */
+function finalizeLink(v) {
+	const out = { ...v };
+	if (/^(javascript|data|vbscript):/i.test(out.href.replace(/[\u0000- ]/g, ""))) return null;
+	if (out.type === "url" && out.href && !/^(https?:|\/|#)/.test(out.href)) out.href = `https://${out.href.replace(/^\/+/, "")}`;
+	if (hasLink(out)) out.href = hrefOf(out);
+	return out;
+}
+/**
+* The object as prod stores it, keyed like the value it replaces (`original`), so an edit changes only what was edited:
+* no undefined keys; no `rel: "follow"` (follow is no rel: the backend normalises it away and a button refuses it); no
+* `newTab: false` and no `target` unless the stored value had that key (a stored `target` is kept in sync with newTab,
+* and is then the one that carries it).
+*/
+function storedLink(v, original) {
+	const had = (k) => isObj(original) && k in original;
+	const out = {};
+	for (const [k, x] of Object.entries(v)) {
+		if (x === void 0 || k === "target") continue;
+		if (k === "rel" && x === "follow") continue;
+		if (k === "newTab" && !had("newTab") && (x === false || had("target"))) continue;
+		out[k] = x;
+	}
+	if (had("target")) out.target = v.newTab ? "_blank" : "_self";
+	return out;
+}
+/** Text the picker's input shows for a value that has no picked target. */
+var inputText = (v) => v.type === "email" ? v.email ?? v.href.replace(/^mailto:/i, "") : v.type === "phone" ? v.phone ?? v.href.replace(/^tel:/i, "") : v.href;
+var STATUS_LABEL = {
+	draft: "Draft",
+	changed: "Edited",
+	scheduled: "Scheduled",
+	review: "In review",
+	archived: "Archived"
+};
+function linkIcon(v, target) {
+	if (!hasLink(v)) return /* @__PURE__ */ jsx(IconLink, { stroke: 1.5 });
+	if (target) return target.kind === "entry" ? /* @__PURE__ */ jsx(IconFileDatabase, { stroke: 1.5 }) : target.kind === "file" ? /* @__PURE__ */ jsx(IconPaperclip, { stroke: 1.5 }) : target.kind === "section" ? /* @__PURE__ */ jsx(IconHash, { stroke: 1.5 }) : /* @__PURE__ */ jsx(IconFile, { stroke: 1.5 });
+	switch (v.type) {
+		case "url": return /* @__PURE__ */ jsx(IconExternalLink, { stroke: 1.5 });
+		case "email": return /* @__PURE__ */ jsx(IconMail, { stroke: 1.5 });
+		case "phone": return /* @__PURE__ */ jsx(IconPhone, { stroke: 1.5 });
+		case "section": return /* @__PURE__ */ jsx(IconHash, { stroke: 1.5 });
+		case "file": return /* @__PURE__ */ jsx(IconPaperclip, { stroke: 1.5 });
+		case "entry": return /* @__PURE__ */ jsx(IconFileDatabase, { stroke: 1.5 });
+		default: return /* @__PURE__ */ jsx(IconFile, { stroke: 1.5 });
+	}
+}
+/** Primary + secondary text: page title + path · domain + rest of the URL · address · number. */
+function describeLink(v, target) {
+	if (!hasLink(v)) return { primary: "" };
+	const anchor = v.anchor && v.anchor !== "none" ? v.anchor : "";
+	if (target) return {
+		primary: target.title,
+		secondary: target.kind === "section" ? `${target.href} on this page` : target.kind === "file" ? fileKind(target) : `${target.href}${anchor}`
+	};
+	switch (v.type) {
+		case "url": try {
+			const u = new URL(/^https?:/i.test(v.href) ? v.href : `https://${v.href}`);
+			const rest = `${u.pathname === "/" ? "" : u.pathname}${u.search}${u.hash}`;
+			return {
+				primary: u.hostname.replace(/^www\./, ""),
+				secondary: rest || void 0
+			};
+		} catch {
+			return { primary: v.href };
+		}
+		case "email": return {
+			primary: v.email ?? v.href.replace(/^mailto:/i, "").replace(/\?.*$/, ""),
+			secondary: v.subject ? `Subject: ${v.subject}` : void 0
+		};
+		case "phone": return { primary: v.phone ?? v.href.replace(/^tel:/i, "") };
+		case "section": return {
+			primary: v.href,
+			secondary: "On this page"
+		};
+		default: return {
+			primary: v.title || v.href,
+			secondary: v.title ? v.href : void 0
+		};
+	}
+}
+/** "PDF file": the name is already the title */
+var fileKind = (t) => `${t.meta ?? (fileName(t.href).split(".").pop() ?? "").toUpperCase()} file`.trim();
+function fileName(href) {
+	const last = href.replace(/[?#].*$/, "").split("/").pop() ?? href;
+	try {
+		return decodeURIComponent(last);
+	} catch {
+		return last;
+	}
+}
+/** What a person reads for a link (one string — menus, aria labels, history). */
+var linkText = (v) => hasLink(v) ? v.title || describeLink(v).primary : "";
+/** A link at rest: icon · title (fg) · path (fg-3) · new-tab mark. Empty → "Add link". */
+function LinkLine({ v, target, placeholder = "Add link", className }) {
+	const d = describeLink(v, target);
+	const empty = !hasLink(v);
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn("flex min-w-0 flex-1 items-center gap-2", className),
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("flex shrink-0 [&_svg]:size-4", empty ? "text-kit-fg-3" : "text-kit-fg-2"),
+				"aria-hidden": true,
+				children: linkIcon(v, target)
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: cn("min-w-0 shrink truncate text-kit-sm", empty ? "text-kit-fg-3" : "text-kit-fg"),
+				children: empty ? placeholder : d.primary
+			}),
+			d.secondary ? /* @__PURE__ */ jsx("span", {
+				className: "min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3",
+				children: d.secondary
+			}) : /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+			!empty && v.newTab ? /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex shrink-0 items-center gap-0.5 text-kit-2xs text-kit-fg-3",
+				children: [/* @__PURE__ */ jsx(IconArrowUpRight, {
+					className: "size-3",
+					stroke: 1.5,
+					"aria-hidden": true
+				}), "New tab"]
+			}) : null
+		]
+	});
+}
+/** While the media library is open from a picker, focus sits in its dialog: a quick edit must not close under it. */
+var libraryOpen = false;
+/** Marks the floating results list, so a quick edit losing focus to it is not "focus left the editor". */
+var LIST_ATTR = "data-kit-link-list";
+function LinkPicker({ value, onChange, onPick, onEnter, onEscape, autoFocus, startSearching, id, "aria-label": ariaLabel = "Link to", size = "md", bare, lockedType, inlineList, types, invalid, "aria-describedby": describedBy, className }) {
+	const v = normLink(value);
+	const host = useLinkTargets();
+	const sections = useSectionTargets();
+	const { MediaPicker } = useKitServices();
+	const targets = React.useMemo(() => [...host.targets, ...sections], [host.targets, sections]);
+	const picked = findTarget(targets, v);
+	const [library, setLibraryState] = React.useState(false);
+	const setLibrary = (o) => {
+		libraryOpen = o;
+		setLibraryState(o);
+	};
+	React.useEffect(() => () => void (libraryOpen = false), []);
+	const [fileProblem, setFileProblem] = React.useState();
+	const [searching, setSearching] = React.useState(!!startSearching || !picked);
+	const [text, setText] = React.useState(() => picked ? "" : inputText(v));
+	const [manualTypeState, setManualType] = React.useState(null);
+	const manualType = lockedType ?? manualTypeState;
+	const [open, setOpen] = React.useState(false);
+	const [active, setActive] = React.useState(-1);
+	const inputRef = React.useRef(null);
+	const wrapRef = React.useRef(null);
+	const listId = React.useId();
+	const type = manualType ?? v.type ?? "page";
+	const meta = typeMeta(manualType ?? (searching && !text ? "page" : v.type));
+	const showChip = !!picked && !searching;
+	React.useEffect(() => {
+		if (autoFocus) requestAnimationFrame(() => {
+			inputRef.current?.focus({ preventScroll: true });
+			inputRef.current?.select();
+		});
+	}, [autoFocus]);
+	const q = text.trim().toLowerCase().replace(/^[/#]/, "");
+	const searchable = type === "page" || type === "entry" || type === "file" || type === "section" && sections.length > 0;
+	const urlish = type !== "section" && (/^(https?:|www\.|mailto:|tel:|#)/i.test(text.trim()) || text.trim() !== "" && detectType(text) !== "page" && !manualType);
+	const rows = React.useMemo(() => {
+		if (!searchable || urlish) return [];
+		const pool = targets.filter((t) => type === "file" ? t.kind === "file" : type === "entry" ? t.kind === "entry" : type === "section" ? t.kind === "section" : t.kind === "page" || t.kind === "entry");
+		const hit = (t) => !q || t.title.toLowerCase().includes(q) || t.href.toLowerCase().includes(q) || (t.meta ?? "").toLowerCase().includes(q);
+		const out = [];
+		const perGroup = /* @__PURE__ */ new Map();
+		const cap = q ? 6 : type === "page" ? 4 : 6;
+		for (const t of pool) {
+			if (!hit(t)) continue;
+			const n = perGroup.get(t.group) ?? 0;
+			if (n >= cap) continue;
+			perGroup.set(t.group, n + 1);
+			out.push({
+				key: `${t.kind}:${t.id}`,
+				group: t.group,
+				target: t
+			});
+		}
+		const order = [...new Set(out.map((r) => r.group))];
+		return out.sort((a, b) => order.indexOf(a.group) - order.indexOf(b.group)).slice(0, 24);
+	}, [
+		targets,
+		type,
+		q,
+		searchable,
+		urlish
+	]);
+	const note = (() => {
+		if (!searchable || urlish || rows.length) return void 0;
+		if (type === "section") return void 0;
+		if (type === "file") return MediaPicker ? "Choose a file from the library with the folder button." : void 0;
+		if (host.unavailable) return "Page search isn't available here. Type a path, like /about.";
+		if (host.error) return `${host.error.replace(/\.?$/, ".")} Type a path, like /about.`;
+		if (host.loading) return "Loading pages…";
+		return q ? `Nothing matches “${text.trim()}”. Type a path, like /about.` : type === "entry" ? "No CMS items yet." : "No pages yet. Type a path, like /about.";
+	})();
+	const listOpen = open && searching && (rows.length > 0 || !!note);
+	React.useEffect(() => {
+		if (!listOpen) return;
+		const onKey = (e) => {
+			if (e.key !== "Escape" || !wrapRef.current?.contains(document.activeElement)) return;
+			e.preventDefault();
+			e.stopPropagation();
+			setOpen(false);
+		};
+		window.addEventListener("keydown", onKey, true);
+		return () => window.removeEventListener("keydown", onKey, true);
+	}, [listOpen]);
+	const choose = (t) => {
+		t.onChoose?.();
+		const n = withTarget(v, t);
+		setText("");
+		setManualType(null);
+		setSearching(false);
+		setOpen(false);
+		setFileProblem(void 0);
+		onChange(n);
+		onPick?.(n);
+	};
+	const type_ = (s) => {
+		setText(s);
+		setOpen(true);
+		setActive(s.trim() ? 0 : -1);
+		onChange(withText(v, s, manualType ?? void 0));
+	};
+	const clear = () => {
+		setText("");
+		setManualType(null);
+		setSearching(true);
+		onChange({
+			...withText(v, ""),
+			href: ""
+		});
+		requestAnimationFrame(() => inputRef.current?.focus());
+	};
+	const setType = (t) => {
+		setManualType(t);
+		setText("");
+		setSearching(true);
+		onChange({
+			...withText(v, "", t),
+			href: ""
+		});
+		setOpen(true);
+		requestAnimationFrame(() => inputRef.current?.focus());
+	};
+	const h = size === "sm" ? "h-8" : "h-9";
+	const list = /* @__PURE__ */ jsxs("div", {
+		id: listId,
+		role: "listbox",
+		"aria-label": type === "file" ? "Files" : type === "section" ? "Sections on this page" : "Pages and CMS items",
+		className: "max-h-72 overflow-y-auto overscroll-contain",
+		children: [rows.map((r, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [i === 0 || rows[i - 1].group !== r.group ? /* @__PURE__ */ jsx("div", {
+			role: "presentation",
+			className: "px-2 pb-1 pt-2 text-kit-xs font-medium text-kit-fg-3 first:pt-1",
+			children: r.group
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			id: `${listId}-${i}`,
+			role: "option",
+			"aria-selected": i === active,
+			onMouseEnter: () => setActive(i),
+			onClick: () => choose(r.target),
+			className: cn("flex h-8 cursor-pointer items-center gap-2 rounded-kit-md px-2 text-kit-sm", i === active && "bg-kit-hover"),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: "flex shrink-0 text-kit-fg-3 [&_svg]:size-4",
+					"aria-hidden": true,
+					children: linkIcon({
+						href: r.target.href,
+						type: r.target.kind
+					}, r.target)
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 shrink truncate text-kit-fg",
+					children: r.target.title
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3",
+					children: r.target.kind === "file" ? fileName(r.target.href) : r.target.href
+				}),
+				r.target.status && STATUS_LABEL[r.target.status] ? /* @__PURE__ */ jsx("span", {
+					className: "shrink-0 text-kit-2xs text-kit-fg-3",
+					children: STATUS_LABEL[r.target.status]
+				}) : null
+			]
+		})] }, r.key)), !rows.length && note ? /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "px-2 py-1.5 text-kit-xs text-kit-fg-3",
+			children: note
+		}) : rows.length && host.error && type !== "file" && type !== "section" ? /* @__PURE__ */ jsx("p", {
+			role: "status",
+			className: "px-2 py-1.5 text-kit-xs text-kit-fg-3",
+			children: host.error.replace(/\.?$/, ".")
+		}) : null]
+	});
+	const allowed = LINK_TYPES.filter((t) => (!types || types.includes(t.type)) && (t.type !== "file" || MediaPicker || v.type === "file"));
+	const typeMenu = /* @__PURE__ */ jsxs(Menu, { children: [/* @__PURE__ */ jsxs(MenuTrigger, {
+		render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			"aria-label": `Link type: ${meta.label}`,
+			className: "ml-0.5 flex h-7 shrink-0 items-center gap-0.5 rounded-kit-md px-1.5 text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg data-[popup-open]:bg-kit-hover [&_svg]:size-3.5"
+		}),
+		children: [meta.icon, /* @__PURE__ */ jsx(IconChevronDown, {
+			className: "!size-3",
+			stroke: 1.5
+		})]
+	}), /* @__PURE__ */ jsx(MenuContent, {
+		className: "min-w-48",
+		children: allowed.map((t) => /* @__PURE__ */ jsx(MenuItem, {
+			icon: t.icon,
+			onClick: () => setType(t.type),
+			children: /* @__PURE__ */ jsxs("span", {
+				className: "flex w-full items-center justify-between gap-3",
+				children: [t.label, t.type === type ? /* @__PURE__ */ jsx(IconCheck, {
+					className: "size-3.5 text-kit-fg-2",
+					stroke: 2
+				}) : null]
+			})
+		}, t.type))
+	})] });
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col gap-1", className),
+		children: [
+			/* @__PURE__ */ jsxs(Popover, {
+				open: listOpen && !inlineList,
+				onOpenChange: (o) => !o && setOpen(false),
+				children: [/* @__PURE__ */ jsx("div", {
+					ref: wrapRef,
+					className: "min-w-0",
+					children: /* @__PURE__ */ jsx(PopoverAnchor, {
+						className: cn("flex min-w-0 items-center", bare ? "bg-transparent" : "rounded-kit-md border border-kit-field-border bg-kit-field-bg shadow-kit-field transition-colors hover:border-kit-field-border-hover focus-within:border-kit-field-border-focus", !bare && invalid && "border-[var(--kit-field-invalid)] hover:border-[var(--kit-field-invalid)]", h),
+						children: showChip ? /* @__PURE__ */ jsxs(Fragment, { children: [
+							/* @__PURE__ */ jsx("span", {
+								className: "ml-2 flex shrink-0 text-kit-fg-2 [&_svg]:size-4",
+								"aria-hidden": true,
+								children: linkIcon(v, picked)
+							}),
+							/* @__PURE__ */ jsxs("button", {
+								id,
+								type: "button",
+								onClick: () => {
+									setSearching(true);
+									setOpen(true);
+									requestAnimationFrame(() => inputRef.current?.focus());
+								},
+								"aria-label": `${ariaLabel}: ${picked.title}, ${picked.href}. Change`,
+								className: "flex h-full min-w-0 flex-1 items-center gap-2 px-2 text-left outline-none",
+								children: [/* @__PURE__ */ jsx("span", {
+									className: "min-w-0 shrink truncate text-kit-sm text-kit-fg",
+									children: picked.title
+								}), /* @__PURE__ */ jsx("span", {
+									className: "min-w-0 flex-1 truncate text-kit-xs text-kit-fg-3",
+									children: describeLink(v, picked).secondary
+								})]
+							}),
+							/* @__PURE__ */ jsx(IconButton, {
+								label: "Clear link",
+								size: "xs",
+								className: "mr-1",
+								onClick: clear,
+								children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
+							})
+						] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+							lockedType !== void 0 || inlineList ? /* @__PURE__ */ jsx("span", {
+								className: "ml-2.5 flex shrink-0 text-kit-fg-3 [&_svg]:size-4",
+								"aria-hidden": true,
+								children: meta.icon
+							}) : typeMenu,
+							/* @__PURE__ */ jsx("input", {
+								ref: inputRef,
+								id,
+								role: "combobox",
+								"aria-label": ariaLabel,
+								"aria-invalid": invalid || void 0,
+								"aria-describedby": describedBy,
+								"aria-expanded": listOpen,
+								"aria-controls": listOpen ? listId : void 0,
+								"aria-autocomplete": "list",
+								"aria-activedescendant": listOpen && active >= 0 && rows[active] ? `${listId}-${active}` : void 0,
+								value: text,
+								onChange: (e) => type_(e.target.value),
+								onFocus: () => setOpen(true),
+								onBlur: (e) => {
+									if (wrapRef.current?.contains(e.relatedTarget)) return;
+									if (inlineList) setOpen(false);
+									if (picked && !text) setSearching(false);
+								},
+								onKeyDown: (e) => {
+									if (e.key === "ArrowDown" && rows.length) {
+										e.preventDefault();
+										setOpen(true);
+										setActive((a) => (a + 1) % rows.length);
+									} else if (e.key === "ArrowUp" && rows.length) {
+										e.preventDefault();
+										setActive((a) => a <= 0 ? rows.length - 1 : a - 1);
+									} else if (e.key === "Enter") {
+										e.preventDefault();
+										if (listOpen && active >= 0 && rows[active]) choose(rows[active].target);
+										else onEnter?.(withText(v, text, manualType ?? void 0));
+									} else if (e.key === "Escape") {
+										if (listOpen) {
+											e.preventDefault();
+											e.stopPropagation();
+											setOpen(false);
+										} else if (picked && !text && !startSearching) {
+											e.preventDefault();
+											e.stopPropagation();
+											setSearching(false);
+										} else if (onEscape) {
+											e.preventDefault();
+											e.stopPropagation();
+											onEscape();
+										}
+									}
+								},
+								placeholder: picked && !text ? picked.title : meta.placeholder,
+								autoComplete: "off",
+								spellCheck: false,
+								className: "h-full min-w-0 flex-1 bg-transparent px-2 text-kit-sm text-kit-fg outline-none placeholder:text-kit-fg-3"
+							}),
+							text ? /* @__PURE__ */ jsx(IconButton, {
+								label: "Clear",
+								size: "xs",
+								className: "mr-1",
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: clear,
+								children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
+							}) : null,
+							type === "file" && MediaPicker ? /* @__PURE__ */ jsx(IconButton, {
+								label: "Choose or upload a file",
+								size: "xs",
+								className: "mr-1 text-kit-fg-3",
+								onMouseDown: (e) => e.preventDefault(),
+								onClick: () => {
+									setOpen(false);
+									setLibrary(true);
+								},
+								children: /* @__PURE__ */ jsx(IconFolderOpen, { stroke: 1.5 })
+							}) : null
+						] })
+					})
+				}), /* @__PURE__ */ jsx(PopoverContent, {
+					keepFocus: true,
+					align: "start",
+					side: "bottom",
+					sideOffset: 4,
+					"data-kit-link-list": "",
+					className: "w-[max(var(--anchor-width),280px)] max-w-[min(420px,calc(100vw-24px))] !bg-kit-surface p-1 shadow-kit-lg",
+					children: list
+				})]
+			}),
+			inlineList && listOpen ? /* @__PURE__ */ jsx("div", {
+				className: "rounded-kit-md border border-kit-line bg-kit-surface p-1 [&_[role=listbox]]:max-h-56",
+				onMouseDown: (e) => e.preventDefault(),
+				children: list
+			}) : null,
+			fileProblem ? /* @__PURE__ */ jsx("p", {
+				role: "alert",
+				className: "text-kit-xs text-kit-danger-fg",
+				children: fileProblem
+			}) : null,
+			library && MediaPicker ? /* @__PURE__ */ jsx(MediaPicker, {
+				open: true,
+				accept: ["file"],
+				onOpenChange: (o) => !o && setLibrary(false),
+				onPick: (a) => {
+					if (!a[0]) return;
+					const t = fileTarget(a[0]);
+					if ("problem" in t) setFileProblem(t.problem);
+					else choose(t);
+				}
+			}) : null
+		]
+	});
+}
+function LinkOptions({ v, onChange, compact, disabled }) {
+	const tabId = React.useId();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex flex-col", compact ? "gap-2" : "gap-2.5"),
+		children: [
+			v.type === "email" ? /* @__PURE__ */ jsxs("label", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-2",
+					children: "Subject"
+				}), /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					value: v.subject ?? "",
+					onChange: (e) => onChange({
+						...v,
+						subject: e.target.value
+					}),
+					placeholder: "Wholesale inquiry",
+					className: "max-w-52"
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs("label", {
+				htmlFor: tabId,
+				className: "flex min-h-7 items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-2",
+					children: "Open in new tab"
+				}), /* @__PURE__ */ jsx(Switch, {
+					disabled,
+					id: tabId,
+					size: "sm",
+					checked: !!v.newTab,
+					onCheckedChange: (c) => onChange({
+						...v,
+						newTab: c,
+						target: void 0
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-2",
+					children: "Rel"
+				}), /* @__PURE__ */ jsx(Select, {
+					disabled,
+					"aria-label": "Rel",
+					size: "sm",
+					className: "w-[168px]",
+					value: v.rel ?? "follow",
+					onValueChange: (r) => onChange({
+						...v,
+						rel: r
+					}),
+					options: REL_ITEMS
+				})]
+			})
+		]
+	});
+}
+function LinkForm({ value, onChange, onEnter, hideOptions, types, autoFocus, readOnly, className }) {
+	const v = normLink(value);
+	const { MediaPicker } = useKitServices();
+	const allowed = LINK_TYPES.filter((t) => (!types || types.includes(t.type)) && (t.type !== "file" || MediaPicker || v.type === "file"));
+	const [kind, setKind] = React.useState(() => {
+		const k = v.type === "entry" && hasLink(v) ? "page" : v.type ?? "page";
+		return allowed.some((t) => t.type === k) ? k : allowed[0]?.type ?? "page";
+	});
+	const [resetKey, setResetKey] = React.useState(0);
+	const [touched, setTouched] = React.useState(false);
+	const { targets } = useLinkTargets();
+	const anchors = findTarget(targets, v)?.anchors;
+	const typeId = React.useId();
+	const targetId = React.useId();
+	const errId = React.useId();
+	const problem = touched ? linkProblem(v) : void 0;
+	const shownType = kind === "page" && hasLink(v) ? v.type ?? "page" : kind;
+	React.useEffect(() => {
+		if (autoFocus) requestAnimationFrame(() => document.getElementById(typeId)?.focus({ preventScroll: true }));
+	}, [autoFocus, typeId]);
+	const changeType = (t) => {
+		setKind(t);
+		setTouched(false);
+		onChange({
+			...withText(v, "", t === "page" ? void 0 : t),
+			href: "",
+			type: t,
+			anchor: void 0
+		});
+		setResetKey((k) => k + 1);
+		requestAnimationFrame(() => document.getElementById(targetId)?.focus());
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col gap-3", className),
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: typeId,
+					className: "text-kit-xs text-kit-fg-2",
+					children: "Type"
+				}), /* @__PURE__ */ jsx(Select, {
+					disabled: readOnly,
+					id: typeId,
+					size: "sm",
+					className: "w-[180px]",
+					value: shownType,
+					onValueChange: (t) => changeType(t),
+					options: allowed.map((t) => ({
+						value: t.type,
+						label: t.label,
+						icon: t.icon
+					}))
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				onBlur: (e) => {
+					if (!e.currentTarget.contains(e.relatedTarget)) setTouched(true);
+				},
+				children: [
+					/* @__PURE__ */ jsx("label", {
+						htmlFor: targetId,
+						className: "text-kit-xs text-kit-fg-2",
+						children: typeMeta(kind).target
+					}),
+					/* @__PURE__ */ jsx(LinkPicker, {
+						id: targetId,
+						size: "sm",
+						value: v,
+						onChange,
+						onPick: () => setTouched(true),
+						onEnter: (n) => {
+							setTouched(true);
+							if (!linkProblem(n)) onEnter?.(n);
+						},
+						lockedType: kind === "page" ? void 0 : kind,
+						inlineList: true,
+						types,
+						invalid: !!problem,
+						"aria-describedby": problem ? errId : void 0,
+						"aria-label": typeMeta(kind).target
+					}, resetKey),
+					problem ? /* @__PURE__ */ jsx("p", {
+						id: errId,
+						role: "alert",
+						className: "text-kit-xs text-kit-danger-fg",
+						children: problem
+					}) : null
+				]
+			}),
+			anchors?.length ? /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-2",
+					children: "Section"
+				}), /* @__PURE__ */ jsx(Select, {
+					disabled: readOnly,
+					"aria-label": "Section",
+					size: "sm",
+					className: "w-[180px]",
+					value: v.anchor ?? "none",
+					onValueChange: (a) => onChange({
+						...v,
+						anchor: a
+					}),
+					options: [{
+						value: "none",
+						label: "Top of page"
+					}, ...anchors.map((a) => ({
+						value: a,
+						label: a
+					}))]
+				})]
+			}) : null,
+			hideOptions ? null : /* @__PURE__ */ jsx(LinkOptions, {
+				v,
+				onChange,
+				compact: true,
+				disabled: readOnly
+			})
+		]
+	});
+}
+function LinkPopoverBody({ initial, onSave, onDetach, onCancel, hideOptions, types }) {
+	const start = normLink(initial);
+	const [v, setV] = React.useState(start);
+	const { targets } = useLinkTargets();
+	const startTarget = findTarget(targets, start);
+	const fin = (x) => {
+		const f = finalizeLink(x);
+		return f ? JSON.stringify(storedLink(f)) : "";
+	};
+	const changed = fin(v) !== fin(start);
+	const ok = hasLink(v) && !linkProblem(v);
+	const apply = (n = v) => {
+		const out = finalizeLink(n);
+		if (out && hasLink(out) && !linkProblem(out)) onSave(out);
+	};
+	return /* @__PURE__ */ jsxs("form", {
+		className: "flex flex-col gap-3",
+		onSubmit: (e) => {
+			e.preventDefault();
+			e.stopPropagation();
+			apply();
+		},
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-col gap-1",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "text-kit-sm font-medium text-kit-fg",
+					children: "Link"
+				}), hasLink(start) ? /* @__PURE__ */ jsx("span", {
+					className: "flex min-w-0 text-kit-fg-2",
+					children: /* @__PURE__ */ jsx(LinkLine, {
+						v: start,
+						target: startTarget
+					})
+				}) : /* @__PURE__ */ jsx("span", {
+					className: "text-kit-xs text-kit-fg-3",
+					children: "No link yet"
+				})]
+			}),
+			/* @__PURE__ */ jsx(LinkForm, {
+				value: v,
+				onChange: setV,
+				onEnter: (n) => apply(n),
+				hideOptions,
+				types,
+				autoFocus: true
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-t border-kit-line pt-2.5",
+				children: [
+					onDetach ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "xs",
+						variant: "danger-ghost",
+						onClick: onDetach,
+						children: "Remove link"
+					}) : null,
+					/* @__PURE__ */ jsx("span", { className: "flex-1" }),
+					onCancel ? /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						size: "xs",
+						variant: "ghost",
+						onClick: onCancel,
+						children: "Cancel"
+					}) : null,
+					/* @__PURE__ */ jsx(Button, {
+						type: "submit",
+						size: "xs",
+						variant: "primary",
+						disabled: !changed || !ok,
+						children: "Apply"
+					})
+				]
+			})
+		]
+	});
+}
+function LinkQuickEdit({ value, onCommit, onDone, ariaLabel, size, bare, types }) {
+	const [draft, setDraft] = React.useState(value);
+	const [problem, setProblem] = React.useState();
+	const done = React.useRef(false);
+	const ref = React.useRef(null);
+	const errId = React.useId();
+	const commit = (n, strict = true) => {
+		if (done.current) return;
+		if (hasLink(n) && strict && linkProblem(n)) return setProblem(linkProblem(n));
+		done.current = true;
+		if (!hasLink(n)) onCommit(null);
+		else {
+			const out = finalizeLink(n);
+			if (out) onCommit(out);
+		}
+		onDone();
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: "flex min-w-0 flex-col gap-1",
+		onBlur: (e) => {
+			const next = e.relatedTarget;
+			if (libraryOpen || next && (ref.current?.contains(next) || next.closest?.(`[${LIST_ATTR}],[role=menu]`))) return;
+			window.setTimeout(() => {
+				if (libraryOpen || done.current || ref.current?.contains(document.activeElement)) return;
+				if (hrefOf(draft) === hrefOf(value) && draft.pageId === value.pageId && draft.entryId === value.entryId) {
+					done.current = true;
+					onDone();
+				} else commit(draft, false);
+			}, 0);
+		},
+		children: [/* @__PURE__ */ jsx(LinkPicker, {
+			value: draft,
+			onChange: (n) => {
+				setDraft(n);
+				setProblem(void 0);
+			},
+			onPick: (n) => commit(n),
+			onEnter: (n) => commit(n),
+			onEscape: () => {
+				done.current = true;
+				onDone();
+			},
+			autoFocus: true,
+			startSearching: true,
+			"aria-label": ariaLabel,
+			size,
+			bare,
+			types,
+			invalid: !!problem,
+			"aria-describedby": problem ? errId : void 0
+		}), problem ? /* @__PURE__ */ jsx("p", {
+			id: errId,
+			role: "alert",
+			className: cn("text-kit-xs text-kit-danger-fg", bare && "px-2.5 pb-1.5"),
+			children: problem
+		}) : null]
+	});
+}
+function LinkField({ value, onChange: write, valueShape, id: idProp, "aria-label": label, readOnly, size = "sm", types, invalid, placeholder, className }) {
+	const v = normLink(value);
+	const stringOnly = valueShape === "string";
+	const onChange = (n) => write(stringOnly ? n ? hrefOf(n) : "" : n ? storedLink(n, value) : null);
+	const autoId = React.useId();
+	const id = idProp ?? autoId;
+	const [editing, setEditing] = React.useState(false);
+	const [open, setOpen] = React.useState(false);
+	const { targets } = useLinkTargets();
+	const target = findTarget(targets, v);
+	const has = hasLink(v);
+	if (editing && !readOnly) return /* @__PURE__ */ jsx(LinkQuickEdit, {
+		value: v,
+		ariaLabel: label,
+		size,
+		types,
+		onCommit: onChange,
+		onDone: () => {
+			setEditing(false);
+			requestAnimationFrame(() => document.getElementById(id)?.focus({ preventScroll: true }));
+		}
+	});
+	return /* @__PURE__ */ jsxs(Popover, {
+		open,
+		onOpenChange: setOpen,
+		children: [/* @__PURE__ */ jsxs(PopoverAnchor, {
+			"data-kit-link-field": "",
+			className: cn("group/link relative flex min-w-0 items-center rounded-kit-md border border-kit-field-border bg-kit-field-bg shadow-kit-field transition-colors hover:border-kit-field-border-hover", size === "md" ? "h-9" : "h-8", readOnly && "hover:border-kit-field-border", invalid && "border-[var(--kit-field-invalid)]", className),
+			children: [/* @__PURE__ */ jsx("button", {
+				id,
+				type: "button",
+				disabled: readOnly,
+				onClick: () => setEditing(true),
+				"aria-label": has ? `${label}: ${linkText(v)}. Edit link` : `Add ${label.toLowerCase()}`,
+				"aria-invalid": invalid || void 0,
+				className: "flex h-full min-w-0 flex-1 items-center px-2.5 text-left outline-none disabled:cursor-default",
+				children: /* @__PURE__ */ jsx(LinkLine, {
+					v,
+					target,
+					placeholder
+				})
+			}), readOnly ? null : /* @__PURE__ */ jsxs("span", {
+				className: "mr-1 flex shrink-0 items-center gap-0.5",
+				children: [/* @__PURE__ */ jsx(Tooltip, {
+					content: "Link options",
+					children: /* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx(IconButton, {
+						label: "Link options",
+						tooltip: false,
+						size: "xs",
+						className: "text-kit-fg-3",
+						children: /* @__PURE__ */ jsx(IconAdjustmentsHorizontal, { stroke: 1.5 })
+					}) })
+				}), has ? /* @__PURE__ */ jsx(IconButton, {
+					label: `Clear ${label.toLowerCase()}`,
+					size: "xs",
+					className: "hidden text-kit-fg-3 group-hover/link:inline-flex group-focus-within/link:inline-flex [@media(pointer:coarse)]:inline-flex",
+					onClick: () => onChange(null),
+					children: /* @__PURE__ */ jsx(IconX, { stroke: 1.5 })
+				}) : null]
+			})]
+		}), /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-[340px] p-3",
+			align: "start",
+			children: /* @__PURE__ */ jsx(LinkPopoverBody, {
+				initial: v,
+				hideOptions: stringOnly,
+				types,
+				onSave: (n) => {
+					onChange(n);
+					setOpen(false);
+				},
+				onDetach: has ? () => {
+					onChange(null);
+					setOpen(false);
+				} : void 0,
+				onCancel: () => setOpen(false)
+			})
+		})]
+	});
+}
+/**
+* The shape a link field writes: the shape its value already has (a string stays a string, an object an object), and
+* for an empty field `field.valueShape`, else the string prod stores by default.
+*/
+function linkShapeOf(value, valueShape) {
+	if (isObj(value)) return "object";
+	if (typeof value === "string" && value !== "") return "string";
+	return valueShape ?? "string";
+}
+/** The Block Kit `link` field: the LinkField above, sized for the form it sits in. */
+function LinkControl({ value, onChange, readOnly, id, field, invalid }) {
+	const { variant } = useKitEnv();
+	return /* @__PURE__ */ jsx(LinkField, {
+		id,
+		value,
+		onChange,
+		valueShape: linkShapeOf(value, field.valueShape),
+		"aria-label": field.title,
+		readOnly,
+		size: variant === "document" ? "md" : "sm",
+		invalid
+	});
+}
+//#endregion
+export { LINK_TYPES, LinkControl, LinkField, LinkForm, LinkLine, LinkOptions, LinkPicker, LinkPopoverBody, LinkQuickEdit, REL_ITEMS, SectionAnchorsProvider, TARGET_KEYS, describeLink, detectType, fileTarget, finalizeLink, findTarget, hasLink, hrefOf, linkIcon, linkProblem, linkShapeOf, linkText, normLink, storedLink, useLinkTargets, withTarget, withText };
+
+//# sourceMappingURL=link.js.map