@driftime/sanity-plugin-icon 0.1.0 → 0.2.0

package/dist/index.js

@@ -61,6 +61,66 @@ function Cell(t0) {
 		...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;
 }
+function Library(t0) {
+	let $ = c(27), activeCell, activeIndex, icons, onClearSearch, onSelect, props, rows, search, selected;
+	$[0] === t0 ? (activeCell = $[1], activeIndex = $[2], icons = $[3], onClearSearch = $[4], onSelect = $[5], props = $[6], rows = $[7], search = $[8], selected = $[9]) : ({icons, rows, selected, activeIndex, activeCell, search, onSelect, onClearSearch, ...props} = t0, $[0] = t0, $[1] = activeCell, $[2] = activeIndex, $[3] = icons, $[4] = onClearSearch, $[5] = onSelect, $[6] = props, $[7] = rows, $[8] = search, $[9] = selected);
+	let { totalRows, firstRow, lastRow } = rows, t1;
+	if ($[10] !== activeCell || $[11] !== activeIndex || $[12] !== firstRow || $[13] !== icons || $[14] !== lastRow || $[15] !== onClearSearch || $[16] !== onSelect || $[17] !== props || $[18] !== search || $[19] !== selected || $[20] !== totalRows) {
+		let visible = icons.slice(firstRow * 8, lastRow * 8), t2;
+		$[22] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
+			height: 348,
+			overflowY: "auto"
+		}, $[22] = t2) : t2 = $[22];
+		let t3;
+		$[23] !== icons.length || $[24] !== onClearSearch || $[25] !== search ? (t3 = icons.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: onClearSearch
+			})]
+		}), $[23] = icons.length, $[24] = onClearSearch, $[25] = search, $[26] = t3) : t3 = $[26], 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
+					}, icon.name);
+				})
+			})]
+		}), $[10] = activeCell, $[11] = activeIndex, $[12] = firstRow, $[13] = icons, $[14] = lastRow, $[15] = onClearSearch, $[16] = onSelect, $[17] = props, $[18] = search, $[19] = selected, $[20] = totalRows, $[21] = t1;
+	} else t1 = $[21];
+	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);
@@ -169,6 +229,22 @@ function normaliseTerms(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.
 *
@@ -218,6 +294,53 @@ 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 byName - Every icon the library offers, keyed by the name it goes by.
+* @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(byName, scrolling) {
+	let $ = c(12), [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] !== byName || $[5] !== hovered || $[6] !== scrolling ? (t3 = function handleHover(event) {
+		if (scrolling) return;
+		let target = event.target instanceof Element ? event.target.closest("[data-icon]") : void 0, cell = target instanceof HTMLElement ? target : void 0;
+		if (cell === hovered?.element) return;
+		let name = cell?.dataset.icon, icon = isDefined(name) ? byName.get(name) : void 0;
+		if (isDefined(hoverStart.current) && clearTimeout(hoverStart.current), !isDefined(icon) || !isDefined(cell)) {
+			setHovered(void 0);
+			return;
+		}
+		if (isDefined(hovered)) {
+			setHovered({
+				icon,
+				element: cell
+			});
+			return;
+		}
+		hoverStart.current = setTimeout(() => {
+			setHovered({
+				icon,
+				element: cell
+			});
+		}, 200);
+	}, $[4] = byName, $[5] = hovered, $[6] = scrolling, $[7] = t3) : t3 = $[7];
+	let handleHover = t3, t4;
+	return $[8] !== clearHover || $[9] !== handleHover || $[10] !== hovered ? (t4 = {
+		hovered,
+		handleHover,
+		clearHover
+	}, $[8] = clearHover, $[9] = handleHover, $[10] = hovered, $[11] = t4) : t4 = $[11], 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 +429,61 @@ 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 getCentredScrollTop(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), focusActiveCell = useRef(!1), scrollFrame = useRef(void 0), scrollStop = useRef(void 0), query = normaliseTerms(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(byName, 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);
-	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);
-	let t5;
-	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
+		isDefined(element) && selectedIndex !== -1 && (element.scrollTop = getCentredScrollTop(selectedIndex));
+	}, [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;
+	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
 		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) {
+	}, $[7] = t3) : t3 = $[7];
+	let t4;
+	$[8] === activeIndex ? t4 = $[9] : (t4 = [activeIndex], $[8] = activeIndex, $[9] = t4), useEffect(t3, t4);
+	let t5;
+	$[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 +492,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);
 		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, { ...defaultIconProps }), $[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-GB"),
+						")"
+					]
+				})
+			}),
+			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,
+				onClearSearch: clearSearch,
+				onScroll: handleScroll,
+				onMouseOver: handleHover,
+				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,15 +577,15 @@ 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,
@@ -434,77 +594,8 @@ function Picker(t0) {
 					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
 			]
 		})
 	});
@@ -514,84 +605,78 @@ function _temp(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.
+* Creates the input an icon field is drawn with, holding the icons the plugin was configured with so
+* a field naming its own replaces them rather than adding to them.
 *
-* @param value - The stored icon.
-* @returns The media component, or undefined when nothing readable was stored.
-* @public
+* @param icons - Icons every field offers, or nothing to offer them all.
+* @returns The input component.
 */
-function createIconPreview(value) {
-	let node = resolveIconNode(value?.node);
-	if (isDefined(node)) return function IconPreview() {
-		return /* @__PURE__ */ jsx(Drawing, {
-			node,
+function createInput(icons) {
+	function Input(t0) {
+		let $ = c(29), { id, schemaType, value, onChange, readOnly } = t0, { name, node } = value ?? {}, [open, setOpen] = useState(!1), allowed = schemaType.options?.icons ?? icons, 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] !== allowed || $[18] !== handleSelect || $[19] !== id || $[20] !== name || $[21] !== open || $[22] !== setOpen ? (t11 = open && /* @__PURE__ */ jsx(Picker, {
+			id: `${id}-library`,
+			allowed,
+			selected: name,
+			onSelect: handleSelect,
+			onClose: () => {
+				setOpen(!1);
+			},
+			onClickOutside: () => {
+				setOpen(!1);
+			}
+		}), $[17] = allowed, $[18] = handleSelect, $[19] = id, $[20] = name, $[21] = open, $[22] = setOpen, $[23] = t11) : t11 = $[23];
+		let t12;
+		return $[24] !== T0 || $[25] !== t10 || $[26] !== t11 || $[27] !== t9 ? (t12 = /* @__PURE__ */ jsxs(T0, {
+			gap: 2,
+			children: [
+				t9,
+				t10,
+				t11
+			]
+		}), $[24] = T0, $[25] = t10, $[26] = t11, $[27] = t9, $[28] = t12) : t12 = $[28], t12;
+	}
+	return Input;
 }
 function SquareDashedIcon(props) {
 	let $ = c(14), t0, t1, t10, t11, t2, t3, t4, t5, t6, t7, t8, t9;
@@ -641,45 +726,87 @@ function createSanityIcon(icon, props) {
 	}
 	return SanityIcon;
 }
-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 icons - Icons every field offers, or nothing to offer them all.
+* @returns An object type definition for a stored icon.
+*/
+function createIconType(icons) {
+	return defineType({
+		name: iconTypeName,
+		type: "object",
+		icon: createSanityIcon(SquareDashedIcon),
+		description: "Icon chosen from the Lucide library.",
+		components: {
+			field: Field,
+			input: createInput(icons)
 		},
-		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({
-	name: "@driftime/sanity-plugin-icon",
-	schema: { types: [iconType] }
+		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."
+		})]
+	});
+}
+/** The plugin as Sanity defines it, wrapped below so that its configuration can genuinely be left out. */
+const plugin = definePlugin((config) => {
+	let { icons } = config;
+	return {
+		name: "@driftime/sanity-plugin-icon",
+		schema: { types: [createIconType(icons)] }
+	};
 });
+/**
+* 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