@driftime/sanity-plugin-icon 0.1.0 → 0.3.0

package/dist/index.js

@@ -1,22 +1,116 @@
-import { a as convertCase, i as serialiseIconNode, n as parseIconNode, o as isDefined, r as resolveIconNode, t as Drawing } from "./drawing-Bo0HTICv.js";
-import { FormField, defineField, definePlugin, defineType, set, setIfMissing, unset } from "sanity";
+import { a as convertCase, i as serializeIconNode, n as parseIconNode, o as isDefined, r as resolveIconNode, t as Drawing } from "./drawing-BThiR2bN.js";
+import { ChangeIndicator, FieldActionsProvider, FieldActionsResolver, FormField, defineField, definePlugin, defineType, getPublishedId, set, setIfMissing, unset, useFormValue } from "sanity";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { createElement, useEffect, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CloseIcon } from "@sanity/icons/Close";
 import { Box, Button, Dialog, Flex, Grid, Spinner, Stack, Text, TextInput } from "@sanity/ui";
-import { createElement, useEffect, useRef, useState } from "react";
 import { SearchIcon } from "@sanity/icons/Search";
 import { Popover } from "@sanity/ui/popover";
+/**
+* Checks whether a form node holds members of its own, as an object or an array of objects does.
+*
+* @param node - The form node to check.
+* @returns True if the node holds members.
+*/
+function hasMembers(node) {
+	return "members" in node;
+}
+/**
+* Gathers the validation reported on a form node and on anything inside it.
+*
+* @param node - The form node to gather validation from.
+* @returns Every validation reported on the node or within it.
+*/
+function collectNodeValidation(node) {
+	return [...node.validation, ...hasMembers(node) ? collectMemberValidation(node.members) : []];
+}
+/**
+* Gathers the validation reported anywhere inside a field's members. The form hands a field only what
+* is reported at its own path, which suits a frame drawing its members inline but leaves one that
+* hides them showing nothing they report.
+*
+* @param members - The members to gather validation from.
+* @returns Every validation reported on a member or within one.
+*/
+function collectMemberValidation(members) {
+	return members.flatMap((member) => member.kind === "field" ? collectNodeValidation(member.field) : member.kind === "fieldSet" ? collectMemberValidation(member.fieldSet.members) : member.kind === "item" ? collectNodeValidation(member.item) : []);
+}
 function Field(t0) {
-	let $ = c(7), { title, description, inputId, validation, path, children } = t0, t1;
-	return $[0] !== children || $[1] !== description || $[2] !== inputId || $[3] !== path || $[4] !== title || $[5] !== validation ? (t1 = /* @__PURE__ */ jsx(FormField, {
-		title,
+	let $ = c(40), { actions, schemaType, title, description, presence, validation, level, inputId, path, changed, children, inputProps } = t0, t1;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
+	let [headerActions, setHeaderActions] = useState(t1), t2;
+	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t2 = ["_id"], $[1] = t2) : t2 = $[1];
+	let documentId = useFormValue(t2), fieldValidation, focused, t3;
+	if ($[2] !== actions || $[3] !== documentId || $[4] !== inputProps.focused || $[5] !== inputProps.members || $[6] !== path || $[7] !== schemaType || $[8] !== validation) {
+		let publishedId = typeof documentId == "string" ? getPublishedId(documentId) : void 0;
+		focused = inputProps.focused === !0;
+		let t4;
+		$[12] !== inputProps.members || $[13] !== validation ? (t4 = [...validation, ...collectMemberValidation(inputProps.members)], $[12] = inputProps.members, $[13] = validation, $[14] = t4) : t4 = $[14], fieldValidation = t4, t3 = isDefined(publishedId) && isDefined(actions) && /* @__PURE__ */ jsx(FieldActionsResolver, {
+			actions,
+			documentId: publishedId,
+			documentType: schemaType.name,
+			onActions: setHeaderActions,
+			path,
+			schemaType
+		}), $[2] = actions, $[3] = documentId, $[4] = inputProps.focused, $[5] = inputProps.members, $[6] = path, $[7] = schemaType, $[8] = validation, $[9] = fieldValidation, $[10] = focused, $[11] = t3;
+	} else fieldValidation = $[9], focused = $[10], t3 = $[11];
+	let t4;
+	$[15] !== changed || $[16] !== children || $[17] !== focused || $[18] !== path ? (t4 = /* @__PURE__ */ jsx(ChangeIndicator, {
+		path,
+		hasFocus: focused,
+		isChanged: changed,
+		children
+	}), $[15] = changed, $[16] = children, $[17] = focused, $[18] = path, $[19] = t4) : t4 = $[19];
+	let t5;
+	$[20] !== description || $[21] !== fieldValidation || $[22] !== headerActions || $[23] !== inputId || $[24] !== inputProps.readOnly || $[25] !== level || $[26] !== path || $[27] !== presence || $[28] !== schemaType.deprecated || $[29] !== t4 || $[30] !== title ? (t5 = /* @__PURE__ */ jsx(FormField, {
+		__unstable_headerActions: headerActions,
+		__unstable_presence: presence,
 		description,
 		inputId,
-		validation,
+		level,
+		title,
+		validation: fieldValidation,
+		deprecated: schemaType.deprecated,
 		path,
-		children
-	}), $[0] = children, $[1] = description, $[2] = inputId, $[3] = path, $[4] = title, $[5] = validation, $[6] = t1) : t1 = $[6], t1;
+		readOnly: inputProps.readOnly,
+		children: t4
+	}), $[20] = description, $[21] = fieldValidation, $[22] = headerActions, $[23] = inputId, $[24] = inputProps.readOnly, $[25] = level, $[26] = path, $[27] = presence, $[28] = schemaType.deprecated, $[29] = t4, $[30] = title, $[31] = t5) : t5 = $[31];
+	let t6;
+	$[32] !== focused || $[33] !== headerActions || $[34] !== path || $[35] !== t5 ? (t6 = /* @__PURE__ */ jsx(FieldActionsProvider, {
+		actions: headerActions,
+		focused,
+		path,
+		children: t5
+	}), $[32] = focused, $[33] = headerActions, $[34] = path, $[35] = t5, $[36] = t6) : t6 = $[36];
+	let t7;
+	return $[37] !== t3 || $[38] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t6] }), $[37] = t3, $[38] = t6, $[39] = t7) : t7 = $[39], t7;
+}
+/**
+* Properties the plugin's own icons are drawn with. Icons taken from `@sanity/icons` are left alone,
+* since they already carry the sizing and stroke the rest of the Studio uses.
+*/
+const defaultIconProps = {
+	width: "1em",
+	height: "1em",
+	strokeWidth: 1.5
+};
+/**
+* Creates a Sanity Studio icon component from an SVG icon.
+*
+* @param icon - The icon component to wrap.
+* @param props - Additional props merged over the default properties a Studio icon is drawn with.
+* @returns A Studio icon component.
+*/
+function createSanityIcon(icon, props) {
+	let Icon = icon;
+	function SanityIcon() {
+		return createElement(Icon, {
+			...defaultIconProps,
+			...props
+		});
+	}
+	return SanityIcon;
 }
 /** Space between rows, in pixels. */
 const gridLayoutStyle = {
@@ -24,26 +118,30 @@ const gridLayoutStyle = {
 	rowGap: 4
 };
 function Cell(t0) {
-	let $ = c(24), focusable, icon, onSelect, position, props, selected, total;
-	$[0] === t0 ? (focusable = $[1], icon = $[2], onSelect = $[3], position = $[4], props = $[5], selected = $[6], total = $[7]) : ({icon, selected, focusable, position, total, onSelect, ...props} = t0, $[0] = t0, $[1] = focusable, $[2] = icon, $[3] = onSelect, $[4] = position, $[5] = props, $[6] = selected, $[7] = total);
+	let $ = c(28), focusable, icon, onHover, onSelect, position, props, selected, total;
+	$[0] === t0 ? (focusable = $[1], icon = $[2], onHover = $[3], onSelect = $[4], position = $[5], props = $[6], selected = $[7], total = $[8]) : ({icon, selected, focusable, position, total, onSelect, onHover, ...props} = t0, $[0] = t0, $[1] = focusable, $[2] = icon, $[3] = onHover, $[4] = onSelect, $[5] = position, $[6] = props, $[7] = selected, $[8] = total);
 	let t1 = focusable ? 0 : -1, t2;
-	$[8] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
 		width: 40,
 		height: 40
-	}, $[8] = t2) : t2 = $[8];
+	}, $[9] = t2) : t2 = $[9];
 	let t3;
-	$[9] === icon.node ? t3 = $[10] : (t3 = /* @__PURE__ */ jsx(Drawing, {
+	$[10] === icon.node ? t3 = $[11] : (t3 = /* @__PURE__ */ jsx(Drawing, {
 		node: icon.node,
 		width: "1.25em",
 		height: "1.25em",
 		strokeWidth: 1.5
-	}), $[9] = icon.node, $[10] = t3);
+	}), $[10] = icon.node, $[11] = t3);
 	let t4;
-	$[11] !== icon || $[12] !== onSelect ? (t4 = () => {
+	$[12] !== icon || $[13] !== onSelect ? (t4 = () => {
 		onSelect(icon);
-	}, $[11] = icon, $[12] = onSelect, $[13] = t4) : t4 = $[13];
+	}, $[12] = icon, $[13] = onSelect, $[14] = t4) : t4 = $[14];
 	let t5;
-	return $[14] !== icon.label || $[15] !== icon.name || $[16] !== position || $[17] !== props || $[18] !== selected || $[19] !== t1 || $[20] !== t3 || $[21] !== t4 || $[22] !== total ? (t5 = /* @__PURE__ */ jsx(Button, {
+	$[15] !== icon || $[16] !== onHover ? (t5 = (event) => {
+		onHover(icon, event.currentTarget);
+	}, $[15] = icon, $[16] = onHover, $[17] = t5) : t5 = $[17];
+	let t6;
+	return $[18] !== icon.label || $[19] !== position || $[20] !== props || $[21] !== selected || $[22] !== t1 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 || $[26] !== total ? (t6 = /* @__PURE__ */ jsx(Button, {
 		type: "button",
 		role: "option",
 		"aria-selected": selected,
@@ -56,23 +154,80 @@ function Cell(t0) {
 		style: t2,
 		icon: t3,
 		"aria-label": icon.label,
-		"data-icon": icon.name,
 		onClick: t4,
+		onMouseEnter: t5,
 		...props
-	}), $[14] = icon.label, $[15] = icon.name, $[16] = position, $[17] = props, $[18] = selected, $[19] = t1, $[20] = t3, $[21] = t4, $[22] = total, $[23] = t5) : t5 = $[23], t5;
+	}), $[18] = icon.label, $[19] = position, $[20] = props, $[21] = selected, $[22] = t1, $[23] = t3, $[24] = t4, $[25] = t5, $[26] = total, $[27] = t6) : t6 = $[27], t6;
+}
+function Library(t0) {
+	let $ = c(29), activeCell, activeIndex, icons, onClearSearch, onHover, onSelect, props, rows, search, selected;
+	$[0] === t0 ? (activeCell = $[1], activeIndex = $[2], icons = $[3], onClearSearch = $[4], onHover = $[5], onSelect = $[6], props = $[7], rows = $[8], search = $[9], selected = $[10]) : ({icons, rows, selected, activeIndex, activeCell, search, onSelect, onHover, onClearSearch, ...props} = t0, $[0] = t0, $[1] = activeCell, $[2] = activeIndex, $[3] = icons, $[4] = onClearSearch, $[5] = onHover, $[6] = onSelect, $[7] = props, $[8] = rows, $[9] = search, $[10] = selected);
+	let { totalRows, firstRow, lastRow } = rows, t1;
+	if ($[11] !== activeCell || $[12] !== activeIndex || $[13] !== firstRow || $[14] !== icons || $[15] !== lastRow || $[16] !== onClearSearch || $[17] !== onHover || $[18] !== onSelect || $[19] !== props || $[20] !== search || $[21] !== selected || $[22] !== totalRows) {
+		let visible = icons.slice(firstRow * 8, lastRow * 8), t2;
+		$[24] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
+			height: 348,
+			overflowY: "auto"
+		}, $[24] = t2) : t2 = $[24];
+		let t3;
+		$[25] !== icons.length || $[26] !== onClearSearch || $[27] !== search ? (t3 = icons.length === 0 && /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			justify: "center",
+			direction: "column",
+			gap: 3,
+			style: { height: 348 },
+			children: [/* @__PURE__ */ jsx(Text, {
+				size: 1,
+				muted: !0,
+				children: `Nothing matches "${search}".`
+			}), /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				mode: "ghost",
+				text: "Clear search",
+				onClick: onClearSearch
+			})]
+		}), $[25] = icons.length, $[26] = onClearSearch, $[27] = search, $[28] = t3) : t3 = $[28], t1 = /* @__PURE__ */ jsxs(Box, {
+			role: "listbox",
+			"aria-label": "Icon library",
+			style: t2,
+			...props,
+			children: [t3, icons.length > 0 && /* @__PURE__ */ jsx(Grid, {
+				gridTemplateColumns: 8,
+				style: {
+					...gridLayoutStyle,
+					paddingTop: firstRow * 44,
+					paddingBottom: (totalRows - lastRow) * 44
+				},
+				children: visible.map((icon, offset) => {
+					let index = firstRow * 8 + offset;
+					return /* @__PURE__ */ jsx(Cell, {
+						ref: index === activeIndex ? activeCell : void 0,
+						icon,
+						selected: icon.name === selected,
+						focusable: index === activeIndex,
+						position: index + 1,
+						total: icons.length,
+						onSelect,
+						onHover
+					}, icon.name);
+				})
+			})]
+		}), $[11] = activeCell, $[12] = activeIndex, $[13] = firstRow, $[14] = icons, $[15] = lastRow, $[16] = onClearSearch, $[17] = onHover, $[18] = onSelect, $[19] = props, $[20] = search, $[21] = selected, $[22] = totalRows, $[23] = t1;
+	} else t1 = $[23];
+	return t1;
 }
 function Recent(t0) {
-	let $ = c(23), icons, onForget, onSelect, props, selected;
-	$[0] === t0 ? (icons = $[1], onForget = $[2], onSelect = $[3], props = $[4], selected = $[5]) : ({icons, selected, onSelect, onForget, ...props} = t0, $[0] = t0, $[1] = icons, $[2] = onForget, $[3] = onSelect, $[4] = props, $[5] = selected);
+	let $ = c(26), icons, onForget, onHover, onSelect, props, selected;
+	$[0] === t0 ? (icons = $[1], onForget = $[2], onHover = $[3], onSelect = $[4], props = $[5], selected = $[6]) : ({icons, selected, onSelect, onHover, onForget, ...props} = t0, $[0] = t0, $[1] = icons, $[2] = onForget, $[3] = onHover, $[4] = onSelect, $[5] = props, $[6] = selected);
 	let t1;
-	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(Text, {
+	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
 		weight: "medium",
 		muted: !0,
 		children: "Recent icons"
-	}), $[6] = t1) : t1 = $[6];
+	}), $[7] = t1) : t1 = $[7];
 	let t2;
-	$[7] === onForget ? t2 = $[8] : (t2 = /* @__PURE__ */ jsxs(Flex, {
+	$[8] === onForget ? t2 = $[9] : (t2 = /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
 		justify: "space-between",
 		gap: 2,
@@ -83,50 +238,56 @@ function Recent(t0) {
 			padding: 2,
 			text: "Clear",
 			onClick: onForget,
-			"aria-label": "Forget the recently used icons."
+			"aria-label": "Forget the recently used icons"
 		})]
-	}), $[7] = onForget, $[8] = t2);
+	}), $[8] = onForget, $[9] = t2);
 	let t3;
-	if ($[9] !== icons || $[10] !== onSelect || $[11] !== selected) {
+	if ($[10] !== icons || $[11] !== onHover || $[12] !== onSelect || $[13] !== selected) {
 		let t4;
-		$[13] !== icons.length || $[14] !== onSelect || $[15] !== selected ? (t4 = (icon, index) => /* @__PURE__ */ jsx(Cell, {
+		$[15] !== icons.length || $[16] !== onHover || $[17] !== onSelect || $[18] !== selected ? (t4 = (icon, index) => /* @__PURE__ */ jsx(Cell, {
 			icon,
 			selected: icon.name === selected,
 			focusable: !0,
 			position: index + 1,
 			total: icons.length,
-			onSelect
-		}, icon.name), $[13] = icons.length, $[14] = onSelect, $[15] = selected, $[16] = t4) : t4 = $[16], t3 = icons.map(t4), $[9] = icons, $[10] = onSelect, $[11] = selected, $[12] = t3;
-	} else t3 = $[12];
+			onSelect,
+			onHover
+		}, icon.name), $[15] = icons.length, $[16] = onHover, $[17] = onSelect, $[18] = selected, $[19] = t4) : t4 = $[19], t3 = icons.map(t4), $[10] = icons, $[11] = onHover, $[12] = onSelect, $[13] = selected, $[14] = t3;
+	} else t3 = $[14];
 	let t4;
-	$[17] === t3 ? t4 = $[18] : (t4 = /* @__PURE__ */ jsx(Grid, {
+	$[20] === t3 ? t4 = $[21] : (t4 = /* @__PURE__ */ jsx(Grid, {
 		role: "listbox",
 		"aria-label": "Recent icons",
 		gridTemplateColumns: 8,
 		style: gridLayoutStyle,
 		children: t3
-	}), $[17] = t3, $[18] = t4);
+	}), $[20] = t3, $[21] = t4);
 	let t5;
-	return $[19] !== props || $[20] !== t2 || $[21] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Stack, {
+	return $[22] !== props || $[23] !== t2 || $[24] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
 		...props,
 		children: [t2, t4]
-	}), $[19] = props, $[20] = t2, $[21] = t4, $[22] = t5) : t5 = $[22], t5;
+	}), $[22] = props, $[23] = t2, $[24] = t4, $[25] = t5) : t5 = $[25], t5;
 }
+/**
+* Gap between a tooltip and the cell it points at, given as margins because that is the only lever
+* `@sanity/ui` offers for it. Top only, since a tooltip always sits above.
+*/
+const tooltipMargins = [
+	-4,
+	0,
+	0,
+	0
+];
 function Tooltip(t0) {
-	let $ = c(14), hovered, props;
+	let $ = c(13), hovered, props;
 	$[0] === t0 ? (hovered = $[1], props = $[2]) : ({hovered, ...props} = t0, $[0] = t0, $[1] = hovered, $[2] = props);
 	let t1;
 	$[3] === hovered ? t1 = $[4] : (t1 = isDefined(hovered), $[3] = hovered, $[4] = t1);
-	let t2 = hovered?.element ?? null, t3, t4;
-	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [
-		-4,
-		0,
-		0,
-		0
-	], t4 = { pointerEvents: "none" }, $[5] = t3, $[6] = t4) : (t3 = $[5], t4 = $[6]);
-	let t5;
-	$[7] === hovered ? t5 = $[8] : (t5 = isDefined(hovered) && /* @__PURE__ */ jsxs(Stack, {
+	let t2 = hovered?.element ?? null, t3;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t3 = { pointerEvents: "none" }, $[5] = t3) : t3 = $[5];
+	let t4;
+	$[6] === hovered ? t4 = $[7] : (t4 = isDefined(hovered) && /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
 		style: { maxWidth: "16rem" },
 		children: [/* @__PURE__ */ jsx(Text, {
@@ -138,26 +299,20 @@ function Tooltip(t0) {
 			muted: !0,
 			children: hovered.icon.tags
 		})]
-	}), $[7] = hovered, $[8] = t5);
-	let t6;
-	return $[9] !== props || $[10] !== t1 || $[11] !== t2 || $[12] !== t5 ? (t6 = /* @__PURE__ */ jsx(Popover, {
+	}), $[6] = hovered, $[7] = t4);
+	let t5;
+	return $[8] !== props || $[9] !== t1 || $[10] !== t2 || $[11] !== t4 ? (t5 = /* @__PURE__ */ jsx(Popover, {
 		open: t1,
 		referenceElement: t2,
 		placement: "top",
 		portal: !0,
 		padding: 3,
-		__unstable_margins: t3,
-		style: t4,
-		content: t5,
+		__unstable_margins: tooltipMargins,
+		style: t3,
+		content: t4,
 		...props
-	}), $[9] = props, $[10] = t1, $[11] = t2, $[12] = t5, $[13] = t6) : t6 = $[13], t6;
+	}), $[8] = props, $[9] = t1, $[10] = t2, $[11] = t4, $[12] = t5) : t5 = $[12], t5;
 }
-/** Properties every icon the Studio draws is rendered with. */
-const defaultIconProps = {
-	width: "1em",
-	height: "1em",
-	strokeWidth: 1.5
-};
 /**
 * Flattens text into the form a search compares against, so a hyphenated icon name and a multi-word
 * tag are matched the same way.
@@ -165,10 +320,26 @@ const defaultIconProps = {
 * @param value - The text to flatten.
 * @returns The text in comparable form.
 */
-function normaliseTerms(value) {
+function normalizeTerms(value) {
 	return value.toLowerCase().replaceAll(/[\s-]+/gu, " ").trim();
 }
 /**
+* Narrows the library to a chosen set of icons, in the order they were named. A name the library does
+* not recognise is skipped, so a set outlives the release it was written against.
+*
+* @param library - Every icon the library offers.
+* @param names - Names of the icons to offer, or nothing to offer them all.
+* @returns The icons on offer.
+*/
+function selectIcons(library, names) {
+	if (!isDefined(names)) return library;
+	let byName = new Map(library.map((icon) => [icon.name, icon]));
+	return [...new Set(names)].flatMap((name) => {
+		let icon = byName.get(name);
+		return isDefined(icon) ? [icon] : [];
+	});
+}
+/**
 * Reads the icon library, pairing each drawing with the terms it can be found by. Both files come
 * from the same release as the icons themselves, so the drawings and their terms never disagree.
 *
@@ -185,15 +356,17 @@ async function readLibrary() {
 			label: convertCase(name, "sentence"),
 			tags: iconTags.join(", "),
 			node,
-			terms: normaliseTerms([name, ...iconTags].join(" "))
+			terms: normalizeTerms([name, ...iconTags].join(" "))
 		}];
 	});
 }
-/** The library once asked for, held so every field in a Studio session shares the one request. */
+/**
+* The library once asked for, held so every field in a Studio session shares the one request. It is a
+* megabyte of data that never changes within a release, so asking twice only ever costs.
+*/
 let libraryRequest;
 /**
-* Reads the icon library, sharing a single request across every field opened in the session. The
-* library is a megabyte of data that never changes within a release, so asking twice only ever costs.
+* Reads the icon library, waiting on whatever request is already under way.
 *
 * @returns Every icon the library offers.
 */
@@ -201,8 +374,8 @@ async function requestLibrary() {
 	return libraryRequest ??= readLibrary(), await libraryRequest;
 }
 /**
-* Reads the icon library, sharing one request with every other field in the session. Callers mount
-* only while a picker is open, so a Studio that never opens one never pays the megabyte it costs.
+* Reads the icon library. Callers mount only while a picker is open, so a Studio that never opens one
+* never pays what it costs to read.
 *
 * @returns Every icon the library offers, or undefined while it is still being read.
 */
@@ -218,6 +391,46 @@ function useIconLibrary() {
 		};
 	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1), library;
 }
+/**
+* Tracks which icon the cursor rests on, holding a tooltip back until it has settled somewhere.
+*
+* @param scrolling - Whether the grid is currently moving under the cursor.
+* @returns The icon being hovered, alongside ways to follow the cursor and to dismiss it.
+*/
+function useIconTooltip(scrolling) {
+	let $ = c(11), [hovered, setHovered] = useState(), hoverStart = useRef(void 0), t0, t1;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => () => {
+		isDefined(hoverStart.current) && clearTimeout(hoverStart.current);
+	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1);
+	let t2;
+	$[2] === hovered ? t2 = $[3] : (t2 = function clearHover() {
+		isDefined(hoverStart.current) && clearTimeout(hoverStart.current), isDefined(hovered) && setHovered(void 0);
+	}, $[2] = hovered, $[3] = t2);
+	let clearHover = t2, t3;
+	$[4] !== hovered || $[5] !== scrolling ? (t3 = function handleHover(icon, element) {
+		if (!(scrolling || element === hovered?.element)) {
+			if (isDefined(hoverStart.current) && clearTimeout(hoverStart.current), isDefined(hovered)) {
+				setHovered({
+					icon,
+					element
+				});
+				return;
+			}
+			hoverStart.current = setTimeout(() => {
+				setHovered({
+					icon,
+					element
+				});
+			}, 200);
+		}
+	}, $[4] = hovered, $[5] = scrolling, $[6] = t3) : t3 = $[6];
+	let handleHover = t3, t4;
+	return $[7] !== clearHover || $[8] !== handleHover || $[9] !== hovered ? (t4 = {
+		hovered,
+		handleHover,
+		clearHover
+	}, $[7] = clearHover, $[8] = handleHover, $[9] = hovered, $[10] = t4) : t4 = $[10], t4;
+}
 /** Where the icons an author reached for last are kept, in the browser rather than the dataset. */
 const storageKey = "driftime:sanity-plugin-icon:recent";
 /**
@@ -306,36 +519,59 @@ function getVisibleRows(scrollRow, count) {
 		lastRow: Math.min(totalRows, firstRow + 8 + 16)
 	};
 }
+/**
+* Works out where the scrolling area sits to show a given icon in the middle, for opening on the
+* icon already chosen.
+*
+* @param index - Index of the icon to show.
+* @returns The position to scroll to.
+*/
+function getCenteredScrollTop(index) {
+	return Math.max(0, Math.floor(index / 8) * 44 - 174);
+}
+/**
+* Works out where the scrolling area moves to bring a given icon into view, staying put when the
+* icon already shows. Taken from the index rather than the icon's own cell, since Home and End can
+* land outside the rows that are mounted.
+*
+* @param index - Index of the icon to reveal.
+* @param scrollTop - Position the scrolling area has reached.
+* @returns The position to scroll to.
+*/
+function getRevealedScrollTop(index, scrollTop) {
+	let top = Math.floor(index / 8) * 44;
+	return top < scrollTop ? top : top + 44 > scrollTop + 348 ? top + 44 - 348 : scrollTop;
+}
 function Picker(t0) {
-	let $ = c(28), onSelect, props, selected;
-	$[0] === t0 ? (onSelect = $[1], props = $[2], selected = $[3]) : ({selected, onSelect, ...props} = t0, $[0] = t0, $[1] = onSelect, $[2] = props, $[3] = selected);
-	let library = useIconLibrary(), { recent, remember, forget } = useRecentIcons(), [search, setSearch] = useState(""), [scrollRow, setScrollRow] = useState(0), [movedIndex, setMovedIndex] = useState(), [hovered, setHovered] = useState(), [scrolling, setScrolling] = useState(!1), scroller = useRef(null), activeCell = useRef(null), focusActiveCell = useRef(!1), scrollFrame = useRef(void 0), scrollStop = useRef(void 0), hoverStart = useRef(void 0), query = normaliseTerms(search), searching = isDefined(query), results = (library ?? []).filter((icon) => !searching || icon.terms.includes(query)), byName = new Map((library ?? []).map(_temp)), recentIcons = searching ? [] : recent.flatMap((entry) => {
+	let $ = c(35), allowed, onSelect, props, selected;
+	$[0] === t0 ? (allowed = $[1], onSelect = $[2], props = $[3], selected = $[4]) : ({allowed, selected, onSelect, ...props} = t0, $[0] = t0, $[1] = allowed, $[2] = onSelect, $[3] = props, $[4] = selected);
+	let library = useIconLibrary(), icons = selectIcons(library ?? [], allowed), { recent, remember, forget } = useRecentIcons(), [search, setSearch] = useState(""), [scrollRow, setScrollRow] = useState(0), [movedIndex, setMovedIndex] = useState(), [scrolling, setScrolling] = useState(!1), scroller = useRef(null), activeCell = useRef(null), focusIndex = useRef(void 0), scrollFrame = useRef(void 0), scrollStop = useRef(void 0), query = normalizeTerms(search), searching = isDefined(query), results = icons.filter((icon) => !searching || icon.terms.includes(query)), byName = new Map(icons.map(_temp)), recentIcons = searching ? [] : recent.flatMap((entry) => {
 		let icon_1 = byName.get(entry);
 		return isDefined(icon_1) ? [icon_1] : [];
-	}), { totalRows, firstRow, lastRow } = getVisibleRows(scrollRow, results.length), visible = results.slice(firstRow * 8, lastRow * 8), selectedIndex = searching || !isDefined(library) || !isDefined(selected) ? -1 : library.findIndex((icon_2) => icon_2.name === selected), activeIndex = movedIndex ?? Math.max(0, selectedIndex), t1, t2;
-	$[4] === selectedIndex ? (t1 = $[5], t2 = $[6]) : (t1 = () => {
+	}), { hovered, handleHover, clearHover } = useIconTooltip(scrolling), rows = getVisibleRows(scrollRow, results.length), selectedIndex = searching || !isDefined(selected) ? -1 : icons.findIndex((icon_2) => icon_2.name === selected), activeIndex = movedIndex ?? Math.max(0, selectedIndex);
+	useEffect(() => {
 		let element = scroller.current;
-		isDefined(element) && selectedIndex !== -1 && (element.scrollTop = Math.max(0, Math.floor(selectedIndex / 8) * 44 - 174));
-	}, t2 = [selectedIndex], $[4] = selectedIndex, $[5] = t1, $[6] = t2), useEffect(t1, t2);
+		isDefined(element) && selectedIndex !== -1 && (element.scrollTop = getCenteredScrollTop(selectedIndex));
+	}, [scroller, selectedIndex]);
+	let t1, t2;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => () => {
+		isDefined(scrollFrame.current) && cancelAnimationFrame(scrollFrame.current), isDefined(scrollStop.current) && clearTimeout(scrollStop.current);
+	}, t2 = [], $[5] = t1, $[6] = t2) : (t1 = $[5], t2 = $[6]), useEffect(t1, t2);
 	let t3, t4;
-	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => () => {
-		isDefined(scrollFrame.current) && cancelAnimationFrame(scrollFrame.current), isDefined(scrollStop.current) && clearTimeout(scrollStop.current), isDefined(hoverStart.current) && clearTimeout(hoverStart.current);
-	}, t4 = [], $[7] = t3, $[8] = t4) : (t3 = $[7], t4 = $[8]), useEffect(t3, t4);
+	$[7] === activeIndex ? (t3 = $[8], t4 = $[9]) : (t3 = () => {
+		focusIndex.current === activeIndex && (focusIndex.current = void 0, isDefined(activeCell.current) && activeCell.current.focus());
+	}, t4 = [activeIndex], $[7] = activeIndex, $[8] = t3, $[9] = t4), useEffect(t3, t4);
 	let t5;
-	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
-		focusActiveCell.current && (focusActiveCell.current = !1, isDefined(activeCell.current) && activeCell.current.focus());
-	}, $[9] = t5) : t5 = $[9];
-	let t6;
-	$[10] === activeIndex ? t6 = $[11] : (t6 = [activeIndex], $[10] = activeIndex, $[11] = t6), useEffect(t5, t6);
-	let t7;
-	$[12] !== onSelect || $[13] !== remember ? (t7 = function handleSelect(icon_3) {
+	$[10] !== onSelect || $[11] !== remember ? (t5 = function handleSelect(icon_3) {
 		remember(icon_3.name), onSelect(icon_3);
-	}, $[12] = onSelect, $[13] = remember, $[14] = t7) : t7 = $[14];
-	let handleSelect = t7, t8;
-	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t8 = function handleSearch(event) {
+	}, $[10] = onSelect, $[11] = remember, $[12] = t5) : t5 = $[12];
+	let handleSelect = t5, t6;
+	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t6 = function clearSearch() {
+		setSearch(""), setMovedIndex(void 0);
+	}, $[13] = t6) : t6 = $[13];
+	let clearSearch = t6, handleSearch = function handleSearch(event) {
 		setSearch(event.currentTarget.value), setMovedIndex(void 0), isDefined(scroller.current) && (scroller.current.scrollTop = 0);
-	}, $[15] = t8) : t8 = $[15];
-	let handleSearch = t8, selectActive = function selectActive() {
+	}, selectActive = function selectActive() {
 		let icon_4 = results[activeIndex];
 		isDefined(icon_4) && handleSelect(icon_4);
 	}, handleSearchKeyDown = function handleSearchKeyDown(event_0) {
@@ -344,71 +580,83 @@ function Picker(t0) {
 			return;
 		}
 		event_0.key === "ArrowDown" && (event_0.preventDefault(), isDefined(activeCell.current) && activeCell.current.focus());
-	}, t9;
-	$[16] === scrolling ? t9 = $[17] : (t9 = function handleScroll() {
-		isDefined(hoverStart.current) && clearTimeout(hoverStart.current), setHovered(void 0), scrolling || setScrolling(!0), isDefined(scrollStop.current) && clearTimeout(scrollStop.current), scrollStop.current = setTimeout(() => {
+	}, handleScroll = function handleScroll() {
+		clearHover(), scrolling || setScrolling(!0), isDefined(scrollStop.current) && clearTimeout(scrollStop.current), scrollStop.current = setTimeout(() => {
 			setScrolling(!1);
 		}, 150), !isDefined(scrollFrame.current) && (scrollFrame.current = requestAnimationFrame(() => {
 			scrollFrame.current = void 0;
 			let element_0 = scroller.current;
 			isDefined(element_0) && setScrollRow(Math.floor(element_0.scrollTop / 44));
 		}));
-	}, $[16] = scrolling, $[17] = t9);
-	let handleScroll = t9, handleHover = function handleHover(event_1) {
-		if (scrolling) return;
-		let target = event_1.target instanceof Element ? event_1.target.closest("[data-icon]") : void 0, cell = target instanceof HTMLElement ? target : void 0;
-		if (cell === hovered?.element) return;
-		let name = cell?.dataset.icon, icon_5 = isDefined(name) ? byName.get(name) : void 0;
-		if (isDefined(hoverStart.current) && clearTimeout(hoverStart.current), !isDefined(icon_5) || !isDefined(cell)) {
-			setHovered(void 0);
-			return;
-		}
-		if (isDefined(hovered)) {
-			setHovered({
-				icon: icon_5,
-				element: cell
-			});
-			return;
-		}
-		hoverStart.current = setTimeout(() => {
-			setHovered({
-				icon: icon_5,
-				element: cell
-			});
-		}, 200);
-	}, t10;
-	$[18] === hovered ? t10 = $[19] : (t10 = function clearHover() {
-		isDefined(hoverStart.current) && clearTimeout(hoverStart.current), isDefined(hovered) && setHovered(void 0);
-	}, $[18] = hovered, $[19] = t10);
-	let clearHover = t10, handleGridKeyDown = function handleGridKeyDown(event_2) {
+	}, handleGridKeyDown = function handleGridKeyDown(event_1) {
 		let last = results.length - 1;
 		if (last < 0) return;
-		if (event_2.key === "Enter" || event_2.key === " ") {
-			event_2.preventDefault(), selectActive();
+		if (event_1.key === "Enter" || event_1.key === " ") {
+			event_1.preventDefault(), selectActive();
 			return;
 		}
-		let next = getNextIndex(event_2.key, activeIndex, last);
+		let next = getNextIndex(event_1.key, activeIndex, last);
 		if (!isDefined(next)) return;
-		event_2.preventDefault();
+		event_1.preventDefault();
 		let index = Math.min(Math.max(next, 0), last);
-		focusActiveCell.current = !0, setMovedIndex(index);
+		focusIndex.current = index, setMovedIndex(index);
 		let element_1 = scroller.current;
-		if (!isDefined(element_1)) return;
-		let top = Math.floor(index / 8) * 44;
-		top < element_1.scrollTop ? element_1.scrollTop = top : top + 44 > element_1.scrollTop + 348 && (element_1.scrollTop = top + 44 - 348);
-	}, t11;
-	$[20] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsx(SearchIcon, { ...defaultIconProps }), $[20] = t11) : t11 = $[20];
-	let t12;
-	$[21] === library ? t12 = $[22] : (t12 = isDefined(library), $[21] = library, $[22] = t12);
-	let t13;
-	$[23] === library ? t13 = $[24] : (t13 = !isDefined(library) && /* @__PURE__ */ jsx(Flex, {
+		isDefined(element_1) && (element_1.scrollTop = getRevealedScrollTop(index, element_1.scrollTop));
+	}, t7;
+	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx(SearchIcon, {}), $[14] = t7) : t7 = $[14];
+	let t8;
+	$[15] === library ? t8 = $[16] : (t8 = !isDefined(library) && /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
 		style: { height: 348 },
 		children: /* @__PURE__ */ jsx(Spinner, { muted: !0 })
-	}), $[23] = library, $[24] = t13);
-	let t14 = hovered?.icon.name, t15;
-	return $[25] !== hovered || $[26] !== t14 ? (t15 = /* @__PURE__ */ jsx(Tooltip, { hovered }, t14), $[25] = hovered, $[26] = t14, $[27] = t15) : t15 = $[27], /* @__PURE__ */ jsx(Dialog, {
+	}), $[15] = library, $[16] = t8);
+	let t9;
+	$[17] !== activeIndex || $[18] !== clearHover || $[19] !== clearSearch || $[20] !== handleGridKeyDown || $[21] !== handleHover || $[22] !== handleScroll || $[23] !== handleSelect || $[24] !== icons || $[25] !== library || $[26] !== results || $[27] !== rows || $[28] !== scroller || $[29] !== search || $[30] !== selected ? (t9 = isDefined(library) && /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [
+			/* @__PURE__ */ jsx(Box, {
+				paddingY: 2,
+				children: /* @__PURE__ */ jsxs(Text, {
+					size: 1,
+					weight: "medium",
+					muted: !0,
+					children: [
+						"All icons (",
+						results.length.toLocaleString("en-US"),
+						")"
+					]
+				})
+			}),
+			icons.length === 0 && /* @__PURE__ */ jsx(Flex, {
+				align: "center",
+				justify: "center",
+				style: { height: 348 },
+				children: /* @__PURE__ */ jsx(Text, {
+					size: 1,
+					muted: !0,
+					children: "No icons are available to choose from."
+				})
+			}),
+			icons.length > 0 && /* @__PURE__ */ jsx(Library, {
+				ref: scroller,
+				icons: results,
+				rows,
+				selected,
+				activeIndex,
+				activeCell,
+				search,
+				onSelect: handleSelect,
+				onHover: handleHover,
+				onClearSearch: clearSearch,
+				onScroll: handleScroll,
+				onMouseLeave: clearHover,
+				onKeyDown: handleGridKeyDown
+			})
+		]
+	}), $[17] = activeIndex, $[18] = clearHover, $[19] = clearSearch, $[20] = handleGridKeyDown, $[21] = handleHover, $[22] = handleScroll, $[23] = handleSelect, $[24] = icons, $[25] = library, $[26] = results, $[27] = rows, $[28] = scroller, $[29] = search, $[30] = selected, $[31] = t9) : t9 = $[31];
+	let t10 = hovered?.icon.name, t11;
+	return $[32] !== hovered || $[33] !== t10 ? (t11 = /* @__PURE__ */ jsx(Tooltip, { hovered }, t10), $[32] = hovered, $[33] = t10, $[34] = t11) : t11 = $[34], /* @__PURE__ */ jsx(Dialog, {
 		header: "Select icon",
 		width: 1,
 		...props,
@@ -417,94 +665,25 @@ function Picker(t0) {
 			padding: 4,
 			children: [
 				/* @__PURE__ */ jsx(TextInput, {
-					icon: t11,
+					icon: t7,
 					placeholder: "Search by name or by what the icon depicts",
 					value: search,
 					onChange: handleSearch,
 					onKeyDown: handleSearchKeyDown,
-					disabled: !t12,
+					disabled: !isDefined(library) || icons.length === 0,
 					"aria-label": "Search the icon library"
 				}),
-				t13,
+				t8,
 				isDefined(recentIcons) && /* @__PURE__ */ jsx(Recent, {
 					icons: recentIcons,
 					selected,
 					onSelect: handleSelect,
+					onHover: handleHover,
 					onForget: forget,
-					onMouseOver: handleHover,
 					onMouseLeave: clearHover
 				}),
-				isDefined(library) && /* @__PURE__ */ jsxs(Stack, {
-					gap: 3,
-					children: [/* @__PURE__ */ jsx(Box, {
-						paddingY: 2,
-						children: /* @__PURE__ */ jsxs(Text, {
-							size: 1,
-							weight: "medium",
-							muted: !0,
-							children: [
-								"All icons (",
-								results.length.toLocaleString("en-GB"),
-								")"
-							]
-						})
-					}), /* @__PURE__ */ jsxs(Box, {
-						ref: scroller,
-						role: "listbox",
-						"aria-label": "Icon library",
-						onScroll: handleScroll,
-						onMouseOver: handleHover,
-						onMouseLeave: clearHover,
-						onKeyDown: handleGridKeyDown,
-						style: {
-							height: 348,
-							overflowY: "auto"
-						},
-						children: [results.length === 0 && /* @__PURE__ */ jsxs(Flex, {
-							align: "center",
-							justify: "center",
-							direction: "column",
-							gap: 3,
-							style: { height: 348 },
-							children: [/* @__PURE__ */ jsxs(Text, {
-								size: 1,
-								muted: !0,
-								children: [
-									"Nothing matches “",
-									search,
-									"”."
-								]
-							}), /* @__PURE__ */ jsx(Button, {
-								type: "button",
-								mode: "ghost",
-								text: "Clear search",
-								onClick: () => {
-									setSearch(""), setMovedIndex(void 0);
-								}
-							})]
-						}), results.length > 0 && /* @__PURE__ */ jsx(Grid, {
-							gridTemplateColumns: 8,
-							style: {
-								...gridLayoutStyle,
-								paddingTop: firstRow * 44,
-								paddingBottom: (totalRows - lastRow) * 44
-							},
-							children: visible.map((icon_6, offset) => {
-								let index_0 = firstRow * 8 + offset;
-								return /* @__PURE__ */ jsx(Cell, {
-									ref: index_0 === activeIndex ? activeCell : void 0,
-									icon: icon_6,
-									selected: icon_6.name === selected,
-									focusable: index_0 === activeIndex,
-									position: index_0 + 1,
-									total: results.length,
-									onSelect: handleSelect
-								}, icon_6.name);
-							})
-						})]
-					})]
-				}),
-				t15
+				t9,
+				t11
 			]
 		})
 	});
@@ -512,87 +691,6 @@ function Picker(t0) {
 function _temp(icon_0) {
 	return [icon_0.name, icon_0];
 }
-/** Type name of the icon object. */
-const iconTypeName = "icon";
-function Input(t0) {
-	let $ = c(28), { id, value, onChange, readOnly } = t0, { name, node } = value ?? {}, [open, setOpen] = useState(!1), selectedNode = resolveIconNode(node), selectedLabel = isDefined(name) ? convertCase(name, "sentence") : void 0, t1;
-	$[0] !== onChange || $[1] !== setOpen ? (t1 = function handleSelect(icon) {
-		onChange([
-			setIfMissing({ _type: iconTypeName }),
-			set(icon.name, ["name"]),
-			set(serialiseIconNode(icon.node), ["node"])
-		]), setOpen(!1);
-	}, $[0] = onChange, $[1] = setOpen, $[2] = t1) : t1 = $[2];
-	let handleSelect = t1, T0 = Flex, T1 = Button, t5 = isDefined(selectedNode) ? /* @__PURE__ */ jsx(Drawing, {
-		node: selectedNode,
-		...defaultIconProps
-	}) : void 0, t6 = selectedLabel ?? "Select icon", t7;
-	$[3] === setOpen ? t7 = $[4] : (t7 = () => {
-		setOpen(!0);
-	}, $[3] = setOpen, $[4] = t7);
-	let t8 = isDefined(selectedLabel) ? `${selectedLabel} currently selected` : "Select icon", t9;
-	$[5] !== T1 || $[6] !== id || $[7] !== readOnly || $[8] !== t5 || $[9] !== t6 || $[10] !== t7 || $[11] !== t8 ? (t9 = /* @__PURE__ */ jsx(T1, {
-		id,
-		type: "button",
-		mode: "ghost",
-		icon: t5,
-		text: t6,
-		disabled: readOnly,
-		onClick: t7,
-		"aria-label": t8
-	}), $[5] = T1, $[6] = id, $[7] = readOnly, $[8] = t5, $[9] = t6, $[10] = t7, $[11] = t8, $[12] = t9) : t9 = $[12];
-	let t10;
-	$[13] !== onChange || $[14] !== readOnly || $[15] !== value ? (t10 = isDefined(value) && /* @__PURE__ */ jsx(Button, {
-		type: "button",
-		mode: "ghost",
-		tone: "critical",
-		icon: /* @__PURE__ */ jsx(CloseIcon, { ...defaultIconProps }),
-		text: "Clear",
-		disabled: readOnly,
-		onClick: () => {
-			onChange(unset());
-		},
-		"aria-label": "Clear the currently selected icon."
-	}), $[13] = onChange, $[14] = readOnly, $[15] = value, $[16] = t10) : t10 = $[16];
-	let t11;
-	$[17] !== handleSelect || $[18] !== id || $[19] !== name || $[20] !== open || $[21] !== setOpen ? (t11 = open && /* @__PURE__ */ jsx(Picker, {
-		id: `${id}-library`,
-		selected: name,
-		onSelect: handleSelect,
-		onClose: () => {
-			setOpen(!1);
-		},
-		onClickOutside: () => {
-			setOpen(!1);
-		}
-	}), $[17] = handleSelect, $[18] = id, $[19] = name, $[20] = open, $[21] = setOpen, $[22] = t11) : t11 = $[22];
-	let t12;
-	return $[23] !== T0 || $[24] !== t10 || $[25] !== t11 || $[26] !== t9 ? (t12 = /* @__PURE__ */ jsxs(T0, {
-		gap: 2,
-		children: [
-			t9,
-			t10,
-			t11
-		]
-	}), $[23] = T0, $[24] = t10, $[25] = t11, $[26] = t9, $[27] = t12) : t12 = $[27], t12;
-}
-/**
-* Builds the media a stored icon previews with, so a document lists the drawing an author chose
-* rather than one placeholder standing in for every icon alike.
-*
-* @param value - The stored icon.
-* @returns The media component, or undefined when nothing readable was stored.
-* @public
-*/
-function createIconPreview(value) {
-	let node = resolveIconNode(value?.node);
-	if (isDefined(node)) return function IconPreview() {
-		return /* @__PURE__ */ jsx(Drawing, {
-			node,
-			...defaultIconProps
-		});
-	};
-}
 function SquareDashedIcon(props) {
 	let $ = c(14), t0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx("path", { d: "M5 3a2 2 0 0 0-2 2" }), t1 = /* @__PURE__ */ jsx("path", { d: "M19 3a2 2 0 0 1 2 2" }), t2 = /* @__PURE__ */ jsx("path", { d: "M21 19a2 2 0 0 1-2 2" }), t3 = /* @__PURE__ */ jsx("path", { d: "M5 21a2 2 0 0 1-2-2" }), t4 = /* @__PURE__ */ jsx("path", { d: "M9 3h1" }), t5 = /* @__PURE__ */ jsx("path", { d: "M9 21h1" }), t6 = /* @__PURE__ */ jsx("path", { d: "M14 3h1" }), t7 = /* @__PURE__ */ jsx("path", { d: "M14 21h1" }), t8 = /* @__PURE__ */ jsx("path", { d: "M3 9v1" }), t9 = /* @__PURE__ */ jsx("path", { d: "M21 9v1" }), t10 = /* @__PURE__ */ jsx("path", { d: "M3 14v1" }), t11 = /* @__PURE__ */ jsx("path", { d: "M21 14v1" }), $[0] = t0, $[1] = t1, $[2] = t10, $[3] = t11, $[4] = t2, $[5] = t3, $[6] = t4, $[7] = t5, $[8] = t6, $[9] = t7, $[10] = t8, $[11] = t9) : (t0 = $[0], t1 = $[1], t10 = $[2], t11 = $[3], t2 = $[4], t3 = $[5], t4 = $[6], t5 = $[7], t6 = $[8], t7 = $[9], t8 = $[10], t9 = $[11]);
@@ -625,61 +723,171 @@ function SquareDashedIcon(props) {
 	}), $[12] = props, $[13] = t12), t12;
 }
 /**
-* Creates a Sanity Studio icon component from an SVG icon.
+* Settles what an icon field offers. The list says what is on and replaces whatever the plugin was
+* given, so one line tells you the whole answer.
 *
-* @param icon - The icon component to wrap.
-* @param props - Additional props merged over the default properties a Studio icon is drawn with.
-* @returns A Studio icon component.
+* @param options - Options the field itself was given.
+* @param config - Configuration the plugin was given.
+* @returns The settings the field runs on.
 */
-function createSanityIcon(icon, props) {
-	let Icon = icon;
-	function SanityIcon() {
-		return createElement(Icon, {
-			...defaultIconProps,
-			...props
-		});
+function resolveIconOptions(options, config) {
+	return { icons: options?.icons ?? config.icons };
+}
+/** Type name of the icon object. */
+const iconTypeName = "icon";
+/**
+* Creates the input an icon field is drawn with, holding the configuration the plugin was given so a
+* field naming its own icons replaces them rather than adding to them.
+*
+* @param config - Configuration every field falls back to.
+* @returns The input component.
+*/
+function createInput(config) {
+	function Input(t0) {
+		let $ = c(31), { id, schemaType, value, onChange, readOnly } = t0, { name, node } = value ?? {}, [open, setOpen] = useState(!1), t1;
+		$[0] === schemaType.options ? t1 = $[1] : (t1 = resolveIconOptions(schemaType.options, config), $[0] = schemaType.options, $[1] = t1);
+		let { icons } = t1, selectedNode = resolveIconNode(node), selectedLabel = isDefined(name) ? convertCase(name, "sentence") : void 0, t2;
+		$[2] !== onChange || $[3] !== setOpen ? (t2 = function handleSelect(icon) {
+			onChange([
+				setIfMissing({ _type: iconTypeName }),
+				set(icon.name, ["name"]),
+				set(serializeIconNode(icon.node), ["node"])
+			]), setOpen(!1);
+		}, $[2] = onChange, $[3] = setOpen, $[4] = t2) : t2 = $[4];
+		let handleSelect = t2, T0 = Flex, T1 = Button, t6 = isDefined(selectedNode) ? /* @__PURE__ */ jsx(Drawing, {
+			node: selectedNode,
+			...defaultIconProps
+		}) : /* @__PURE__ */ jsx(SquareDashedIcon, { ...defaultIconProps }), t7 = selectedLabel ?? "Select icon", t8;
+		$[5] === setOpen ? t8 = $[6] : (t8 = () => {
+			setOpen(!0);
+		}, $[5] = setOpen, $[6] = t8);
+		let t9 = isDefined(selectedLabel) ? `${selectedLabel} currently selected` : "Select icon", t10;
+		$[7] !== T1 || $[8] !== id || $[9] !== readOnly || $[10] !== t6 || $[11] !== t7 || $[12] !== t8 || $[13] !== t9 ? (t10 = /* @__PURE__ */ jsx(T1, {
+			id,
+			type: "button",
+			mode: "ghost",
+			icon: t6,
+			text: t7,
+			disabled: readOnly,
+			onClick: t8,
+			"aria-label": t9
+		}), $[7] = T1, $[8] = id, $[9] = readOnly, $[10] = t6, $[11] = t7, $[12] = t8, $[13] = t9, $[14] = t10) : t10 = $[14];
+		let t11;
+		$[15] !== onChange || $[16] !== readOnly || $[17] !== value ? (t11 = isDefined(value) && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			mode: "ghost",
+			tone: "critical",
+			icon: /* @__PURE__ */ jsx(CloseIcon, {}),
+			text: "Clear",
+			disabled: readOnly,
+			onClick: () => {
+				onChange(unset());
+			},
+			"aria-label": "Clear the currently selected icon"
+		}), $[15] = onChange, $[16] = readOnly, $[17] = value, $[18] = t11) : t11 = $[18];
+		let t12;
+		$[19] !== handleSelect || $[20] !== icons || $[21] !== id || $[22] !== name || $[23] !== open || $[24] !== setOpen ? (t12 = open && /* @__PURE__ */ jsx(Picker, {
+			id: `${id}-library`,
+			allowed: icons,
+			selected: name,
+			onSelect: handleSelect,
+			onClose: () => {
+				setOpen(!1);
+			},
+			onClickOutside: () => {
+				setOpen(!1);
+			}
+		}), $[19] = handleSelect, $[20] = icons, $[21] = id, $[22] = name, $[23] = open, $[24] = setOpen, $[25] = t12) : t12 = $[25];
+		let t13;
+		return $[26] !== T0 || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 ? (t13 = /* @__PURE__ */ jsxs(T0, {
+			gap: 2,
+			children: [
+				t10,
+				t11,
+				t12
+			]
+		}), $[26] = T0, $[27] = t10, $[28] = t11, $[29] = t12, $[30] = t13) : t13 = $[30], t13;
 	}
-	return SanityIcon;
+	return Input;
 }
-const iconType = defineType({
-	name: iconTypeName,
-	type: "object",
-	icon: createSanityIcon(SquareDashedIcon),
-	description: "Icon chosen from the Lucide library.",
-	components: {
-		field: Field,
-		input: Input
-	},
-	preview: {
-		select: {
-			name: "name",
-			node: "node"
+/**
+* Builds the media a stored icon previews with, so a document lists the drawing an author chose
+* rather than one placeholder standing in for every icon alike.
+*
+* @param value - The stored icon.
+* @returns The media component, or undefined when nothing readable was stored.
+* @public
+*/
+function createIconPreview(value) {
+	let node = resolveIconNode(value?.node);
+	if (isDefined(node)) return function IconPreview() {
+		return createElement(Drawing, {
+			node,
+			...defaultIconProps
+		});
+	};
+}
+/**
+* Creates the object type an icon is stored as, offering the icons it is given to every field that
+* does not name its own.
+*
+* @param config - Configuration every field falls back to.
+* @returns An object type definition for a stored icon.
+*/
+function createIconType(config) {
+	return defineType({
+		name: iconTypeName,
+		type: "object",
+		icon: createSanityIcon(SquareDashedIcon),
+		description: "Icon chosen from the Lucide library.",
+		components: {
+			field: Field,
+			input: createInput(config)
 		},
-		prepare(selection) {
-			let { name, node } = selection;
-			return {
-				title: isDefined(name) ? convertCase(name, "sentence") : "No icon",
-				media: createIconPreview({
-					_type: iconTypeName,
-					name,
-					node
-				})
-			};
-		}
-	},
-	fields: [defineField({
-		name: "name",
-		type: "string",
-		description: "Name of the chosen icon in the library it was taken from."
-	}), defineField({
-		name: "node",
-		type: "text",
-		description: "Shapes the icon is drawn from, written when the icon is chosen."
-	})]
-}), iconPlugin = definePlugin({
+		validation: (rule) => rule.custom((value) => !isDefined(value?.name) || isDefined(value.node) ? !0 : "Select the icon again so its drawing is stored."),
+		preview: {
+			select: {
+				name: "name",
+				node: "node"
+			},
+			prepare(selection) {
+				let { name, node } = selection;
+				return {
+					title: isDefined(name) ? convertCase(name, "sentence") : "No icon",
+					media: createIconPreview({
+						_type: iconTypeName,
+						name,
+						node
+					})
+				};
+			}
+		},
+		fields: [defineField({
+			name: "name",
+			type: "string",
+			description: "Name of the chosen icon in the library it was taken from."
+		}), defineField({
+			name: "node",
+			type: "text",
+			description: "Shapes the icon is drawn from, written when the icon is chosen."
+		})]
+	});
+}
+const plugin = definePlugin((config) => ({
 	name: "@driftime/sanity-plugin-icon",
-	schema: { types: [iconType] }
-});
+	schema: { types: [createIconType(config)] }
+}));
+/**
+* Creates the icon field type for Sanity Studio, offering the Lucide library through a searchable
+* picker and storing the chosen drawing ready to render.
+*
+* @param config - Plugin configuration.
+* @returns Sanity plugin definition.
+* @public
+*/
+function iconPlugin(config = {}) {
+	return plugin(config);
+}
 export { createIconPreview, iconPlugin };
 
 //# sourceMappingURL=index.js.map