@driftime/sanity-plugin-icon 0.3.0 → 0.4.1

package/dist/index.js

@@ -1,37 +1,42 @@
-import { a as convertCase, i as serializeIconNode, n as parseIconNode, o as isDefined, r as resolveIconNode, t as Drawing } from "./drawing-BThiR2bN.js";
+import { r as pluginName, t as parseIconSet } from "./sets-kepuObH8.js";
+import { n as isDefined, t as convertCase } from "./utils-COPacfAq.js";
+import { a as resolveIconDrawing, o as serializeIconDrawing } from "./nodes-DAzj56Xn.js";
+import { t as Drawing } from "./drawing-ByrcBbWB.js";
+import { t as getIconSetKey } from "./registry-BEEpqK3z.js";
 import { ChangeIndicator, FieldActionsProvider, FieldActionsResolver, FormField, defineField, definePlugin, defineType, getPublishedId, set, setIfMissing, unset, useFormValue } from "sanity";
 import { c } from "react/compiler-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 { Box, Button, Card, Dialog, Flex, Grid, Spinner, Stack, Text, TextInput } from "@sanity/ui";
 import { SearchIcon } from "@sanity/icons/Search";
+import { WarningOutlineIcon } from "@sanity/icons/WarningOutline";
 import { Popover } from "@sanity/ui/popover";
+import { iconRegistry } from "@driftime/sanity-plugin-icon/sets";
 /**
-* Checks whether a form node holds members of its own, as an object or an array of objects does.
+* Checks whether a form node has members, as objects and arrays of objects do.
 *
 * @param node - The form node to check.
-* @returns True if the node holds members.
+* @returns True if the node has members.
 */
 function hasMembers(node) {
 	return "members" in node;
 }
 /**
-* Gathers the validation reported on a form node and on anything inside it.
+* Collects the validation on a form node and everything inside it.
 *
-* @param node - The form node to gather validation from.
-* @returns Every validation reported on the node or within it.
+* @param node - The form node.
+* @returns Every validation result on the node or inside 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.
+* Collects the validation anywhere inside a field's members. The form only passes a field the
+* validation at its own path, so a field that hides its members would otherwise show none of theirs.
 *
-* @param members - The members to gather validation from.
-* @returns Every validation reported on a member or within one.
+* @param members - The members.
+* @returns Every validation result on the members or inside them.
 */
 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) : []);
@@ -86,21 +91,18 @@ function Field(t0) {
 	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.
-*/
+/** Default props for the plugin's own icons. Icons from `@sanity/icons` already match the Studio. */
 const defaultIconProps = {
 	width: "1em",
 	height: "1em",
 	strokeWidth: 1.5
 };
 /**
-* Creates a Sanity Studio icon component from an SVG icon.
+* Wraps an SVG icon component for use in the Studio.
 *
-* @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 icon - The icon to wrap.
+* @param props - Props that override the Studio icon defaults.
+* @returns An icon component.
 */
 function createSanityIcon(icon, props) {
 	let Icon = icon;
@@ -112,7 +114,7 @@ function createSanityIcon(icon, props) {
 	}
 	return SanityIcon;
 }
-/** Space between rows, in pixels. */
+/** Gap between rows in pixels. */
 const gridLayoutStyle = {
 	justifyItems: "center",
 	rowGap: 4
@@ -126,12 +128,11 @@ function Cell(t0) {
 		height: 40
 	}, $[9] = t2) : t2 = $[9];
 	let t3;
-	$[10] === icon.node ? t3 = $[11] : (t3 = /* @__PURE__ */ jsx(Drawing, {
-		node: icon.node,
+	$[10] === icon.drawing ? t3 = $[11] : (t3 = /* @__PURE__ */ jsx(Drawing, {
+		drawing: icon.drawing,
 		width: "1.25em",
-		height: "1.25em",
-		strokeWidth: 1.5
-	}), $[10] = icon.node, $[11] = t3);
+		height: "1.25em"
+	}), $[10] = icon.drawing, $[11] = t3);
 	let t4;
 	$[12] !== icon || $[13] !== onSelect ? (t4 = () => {
 		onSelect(icon);
@@ -160,22 +161,21 @@ function Cell(t0) {
 	}), $[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;
+	let $ = c(44), 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;
+	let { totalRows, firstRow, lastRow } = rows, T0, t1, t2, t3, t4, t5, t6;
 	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 = {
+		let visible = icons.slice(firstRow * 8, lastRow * 8);
+		T0 = Box, t1 = "listbox", t2 = "Icon library", $[30] === icons ? t3 = $[31] : (t3 = isDefined(icons) ? {
 			height: 348,
 			overflowY: "auto"
-		}, $[24] = t2) : t2 = $[24];
-		let t3;
-		$[25] !== icons.length || $[26] !== onClearSearch || $[27] !== search ? (t3 = icons.length === 0 && /* @__PURE__ */ jsxs(Flex, {
+		} : void 0, $[30] = icons, $[31] = t3), t4 = props, $[32] !== icons || $[33] !== onClearSearch || $[34] !== search ? (t5 = !isDefined(icons) && /* @__PURE__ */ jsxs(Flex, {
 			align: "center",
 			justify: "center",
 			direction: "column",
 			gap: 3,
-			style: { height: 348 },
+			paddingTop: 5,
+			paddingBottom: 6,
 			children: [/* @__PURE__ */ jsx(Text, {
 				size: 1,
 				muted: !0,
@@ -186,35 +186,91 @@ function Library(t0) {
 				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;
+		}), $[32] = icons, $[33] = onClearSearch, $[34] = search, $[35] = t5) : t5 = $[35], t6 = isDefined(icons) && /* @__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] = T0, $[24] = t1, $[25] = t2, $[26] = t3, $[27] = t4, $[28] = t5, $[29] = t6;
+	} else T0 = $[23], t1 = $[24], t2 = $[25], t3 = $[26], t4 = $[27], t5 = $[28], t6 = $[29];
+	let t7;
+	return $[36] !== T0 || $[37] !== t1 || $[38] !== t2 || $[39] !== t3 || $[40] !== t4 || $[41] !== t5 || $[42] !== t6 ? (t7 = /* @__PURE__ */ jsxs(T0, {
+		role: t1,
+		"aria-label": t2,
+		style: t3,
+		...t4,
+		children: [t5, t6]
+	}), $[36] = T0, $[37] = t1, $[38] = t2, $[39] = t3, $[40] = t4, $[41] = t5, $[42] = t6, $[43] = t7) : t7 = $[43], t7;
+}
+function CodeText(t0) {
+	let $ = c(10), props, text;
+	$[0] === t0 ? (props = $[1], text = $[2]) : ({text, ...props} = t0, $[0] = t0, $[1] = props, $[2] = text);
+	let t1, t2;
+	if ($[3] !== props || $[4] !== text) {
+		let parts = text.split("`");
+		t1 = props, t2 = parts.map((part, index) => {
+			let start = parts.slice(0, index).join("`").length;
+			return index % 2 == 1 ? /* @__PURE__ */ jsx("code", { children: part }, start) : part;
+		}), $[3] = props, $[4] = text, $[5] = t1, $[6] = t2;
+	} else t1 = $[5], t2 = $[6];
+	let t3;
+	return $[7] !== t1 || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx("span", {
+		...t1,
+		children: t2
+	}), $[7] = t1, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
+}
+function Problem(t0) {
+	let $ = c(14), problem, props;
+	$[0] === t0 ? (problem = $[1], props = $[2]) : ({problem, ...props} = t0, $[0] = t0, $[1] = problem, $[2] = props);
+	let t1;
+	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: /* @__PURE__ */ jsx(WarningOutlineIcon, {})
+	}), $[3] = t1) : t1 = $[3];
+	let t2;
+	$[4] === problem.title ? t2 = $[5] : (t2 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		children: /* @__PURE__ */ jsx(CodeText, { text: problem.title })
+	}), $[4] = problem.title, $[5] = t2);
+	let t3;
+	$[6] === problem.description ? t3 = $[7] : (t3 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		muted: !0,
+		children: /* @__PURE__ */ jsx(CodeText, { text: problem.description })
+	}), $[6] = problem.description, $[7] = t3);
+	let t4;
+	$[8] !== t2 || $[9] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Flex, {
+		gap: 3,
+		children: [t1, /* @__PURE__ */ jsxs(Stack, {
+			gap: 3,
+			children: [t2, t3]
+		})]
+	}), $[8] = t2, $[9] = t3, $[10] = t4) : t4 = $[10];
+	let t5;
+	return $[11] !== props || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsx(Card, {
+		tone: "caution",
+		padding: 4,
+		radius: 2,
+		border: !0,
+		...props,
+		children: t4
+	}), $[11] = props, $[12] = t4, $[13] = t5) : t5 = $[13], t5;
 }
 function Recent(t0) {
 	let $ = c(26), icons, onForget, onHover, onSelect, props, selected;
@@ -238,7 +294,7 @@ function Recent(t0) {
 			padding: 2,
 			text: "Clear",
 			onClick: onForget,
-			"aria-label": "Forget the recently used icons"
+			"aria-label": "Clear recent icons"
 		})]
 	}), $[8] = onForget, $[9] = t2);
 	let t3;
@@ -270,38 +326,202 @@ function Recent(t0) {
 	}), $[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.
+* Normalises text for search, so hyphenated names and multi-word keywords match the same way.
+*
+* @param value - The text.
+* @returns The normalised text.
+*/
+function normalizeTerms(value) {
+	return value.toLowerCase().replaceAll(/[\s-]+/gu, " ").trim();
+}
+/**
+* Splits text into the parts a search matches and the parts it doesn't, matching the way search does: ignoring case,
+* and treating spaces and hyphens alike.
+*
+* @param text - The text to split.
+* @param query - The normalised search.
+* @returns The parts in order, each with where it starts in the text and whether it matches.
+*/
+function splitMatches(text, query) {
+	if (!isDefined(query)) return [{
+		text,
+		start: 0,
+		match: !1
+	}];
+	let pattern = query.split(" ").map((word) => word.replaceAll(/[$()*+.?[\\\]^{|}]/gu, String.raw`\$&`)).join(String.raw`[\s-]+`), parts = text.split(RegExp(`(${pattern})`, "giu"));
+	return parts.map((part, index) => ({
+		text: part,
+		start: parts.slice(0, index).join("").length,
+		match: index % 2 == 1
+	}));
+}
+/**
+* Narrows the library to the named icons, in the order given. Unknown names are skipped, so a list keeps working
+* across library releases.
+*
+* @param library - Every icon in the library.
+* @param names - The icons to offer, or undefined for all of them.
+* @returns The icons to 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] : [];
+	});
+}
+/**
+* Lists identifiers as inline code, separated by commas.
+*
+* @param identifiers - The identifiers.
+* @returns The list.
+*/
+function formatList(identifiers) {
+	return identifiers.map((identifier) => `\`${identifier}\``).join(", ");
+}
+/**
+* Describes why a library the project hasn't installed can't be shown, and what to add.
+*
+* @param label - Readable name of the library.
+* @param packageName - Package the library is read from, or an example of one for a family of packages.
+* @param family - Whether the library is a family of packages, one per style.
+* @param listed - Whether the project's `package.json` lists the package.
+* @param sitePackage - Another package of the library the project lists, or undefined when there's none.
+* @returns The problem.
+*/
+function describeMissingLibrary(label, packageName, family, listed, sitePackage) {
+	return listed ? {
+		title: `${label} isn't installed yet`,
+		description: `\`${packageName}\` is in \`package.json\` but not in \`node_modules\`. Reinstall the project's dependencies.`
+	} : isDefined(sitePackage) ? {
+		title: `${label} needs \`${packageName}\``,
+		description: `The Studio reads ${label} from \`${packageName}\`, not \`${sitePackage}\`. Add it as a dev dependency.`
+	} : {
+		title: `${label} isn't installed`,
+		description: family ? `Install a ${label} style package, such as \`${packageName}\`.` : `Install \`${packageName}\` in the project.`
+	};
+}
+/**
+* Loads one library style from the sets the build step converted.
+*
+* @param library - Identifier of the library, or undefined when none is set.
+* @param style - Identifier of the style, or undefined for the library's default.
+* @returns The icons, or why they can't be shown.
+*/
+async function readLibrary(library, style) {
+	if (!isDefined(library)) return { problem: {
+		title: "No icon library set",
+		description: "Set `library` in the icon plugin's configuration or in the field's options."
+	} };
+	if (!iconRegistry.ready) return { problem: {
+		title: "Icons aren't set up",
+		description: "Add `withIcons()` to the Studio's build configuration, then restart the Studio."
+	} };
+	let info = iconRegistry.libraries[library];
+	if (!isDefined(info)) return { problem: {
+		title: "Unknown icon library",
+		description: `There's no icon library called \`${library}\`. Use one of: ${formatList(Object.keys(iconRegistry.libraries))}.`
+	} };
+	let { label, packageName, packagePrefix, styles, listed, installed, sitePackage } = info;
+	if (!installed) return { problem: describeMissingLibrary(label, packageName, isDefined(packagePrefix), listed, sitePackage) };
+	let resolvedStyle = style ?? styles[0] ?? "", loader = iconRegistry.sets[getIconSetKey(library, resolvedStyle)];
+	if (!isDefined(loader)) return { problem: isDefined(packagePrefix) ? {
+		title: `${label} style \`${resolvedStyle}\` isn't installed`,
+		description: `Install \`${packagePrefix}${resolvedStyle}\` in the project.`
+	} : {
+		title: `Unknown ${label} style`,
+		description: `${label} has no \`${resolvedStyle}\` style. Use one of: ${formatList(styles)}.`
+	} };
+	let module = await loader(), set = parseIconSet(module.default);
+	return isDefined(set) ? { icons: set.icons.map(({ name, keywords, node, root }) => ({
+		name,
+		label: convertCase(name, "title"),
+		tags: keywords.join(", "),
+		drawing: {
+			root: root ?? set.root,
+			node
+		},
+		terms: normalizeTerms([name, ...keywords].join(" "))
+	})) } : { problem: {
+		title: `Couldn't load ${label}`,
+		description: "Restart the Studio and try again."
+	} };
+}
+/** Library requests shared by every field in the session, keyed by library and style, since the data never changes. */
+const libraryRequests = /* @__PURE__ */ new Map();
+/**
+* Loads a library style, reusing a request already in progress.
+*
+* @param library - Identifier of the library, or undefined when none is set.
+* @param style - Identifier of the style, or undefined for the library's default.
+* @returns The icons, or why they can't be shown.
+*/
+async function requestLibrary(library, style) {
+	let key = getIconSetKey(library ?? "", style ?? ""), request = libraryRequests.get(key);
+	return isDefined(request) || (request = readLibrary(library, style), libraryRequests.set(key, request)), await request;
+}
+/**
+* Gap between the tooltip and its cell, set through margins because `@sanity/ui` offers no other way.
+* Only the top is set, since the tooltip always appears above the cell.
 */
 const tooltipMargins = [
 	-4,
 	0,
 	0,
 	0
-];
+], matchStyle = {
+	background: "none",
+	color: "inherit",
+	textDecorationLine: "underline",
+	textUnderlineOffset: "0.2em"
+};
+function Highlight(t0) {
+	let $ = c(10), props, query, text;
+	$[0] === t0 ? (props = $[1], query = $[2], text = $[3]) : ({text, query, ...props} = t0, $[0] = t0, $[1] = props, $[2] = query, $[3] = text);
+	let t1;
+	$[4] !== query || $[5] !== text ? (t1 = splitMatches(text, query).map(_temp$1), $[4] = query, $[5] = text, $[6] = t1) : t1 = $[6];
+	let t2;
+	return $[7] !== props || $[8] !== t1 ? (t2 = /* @__PURE__ */ jsx("span", {
+		...props,
+		children: t1
+	}), $[7] = props, $[8] = t1, $[9] = t2) : t2 = $[9], t2;
+}
+function _temp$1(part) {
+	return part.match ? /* @__PURE__ */ jsx("mark", {
+		style: matchStyle,
+		children: part.text
+	}, part.start) : part.text;
+}
 function Tooltip(t0) {
-	let $ = c(13), hovered, props;
-	$[0] === t0 ? (hovered = $[1], props = $[2]) : ({hovered, ...props} = t0, $[0] = t0, $[1] = hovered, $[2] = props);
+	let $ = c(15), hovered, props, query;
+	$[0] === t0 ? (hovered = $[1], props = $[2], query = $[3]) : ({hovered, query, ...props} = t0, $[0] = t0, $[1] = hovered, $[2] = props, $[3] = query);
 	let t1;
-	$[3] === hovered ? t1 = $[4] : (t1 = isDefined(hovered), $[3] = hovered, $[4] = t1);
+	$[4] === hovered ? t1 = $[5] : (t1 = isDefined(hovered), $[4] = hovered, $[5] = t1);
 	let t2 = hovered?.element ?? null, t3;
-	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t3 = { pointerEvents: "none" }, $[5] = t3) : t3 = $[5];
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t3 = { pointerEvents: "none" }, $[6] = t3) : t3 = $[6];
 	let t4;
-	$[6] === hovered ? t4 = $[7] : (t4 = isDefined(hovered) && /* @__PURE__ */ jsxs(Stack, {
+	$[7] !== hovered || $[8] !== query ? (t4 = isDefined(hovered) && /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
 		style: { maxWidth: "16rem" },
 		children: [/* @__PURE__ */ jsx(Text, {
 			size: 1,
 			weight: "medium",
-			children: hovered.icon.label
+			children: /* @__PURE__ */ jsx(Highlight, {
+				text: hovered.icon.label,
+				query
+			})
 		}), isDefined(hovered.icon.tags) && /* @__PURE__ */ jsx(Text, {
 			size: 1,
 			muted: !0,
-			children: hovered.icon.tags
+			children: /* @__PURE__ */ jsx(Highlight, {
+				text: hovered.icon.tags,
+				query
+			})
 		})]
-	}), $[6] = hovered, $[7] = t4);
+	}), $[7] = hovered, $[8] = query, $[9] = t4) : t4 = $[9];
 	let t5;
-	return $[8] !== props || $[9] !== t1 || $[10] !== t2 || $[11] !== t4 ? (t5 = /* @__PURE__ */ jsx(Popover, {
+	return $[10] !== props || $[11] !== t1 || $[12] !== t2 || $[13] !== t4 ? (t5 = /* @__PURE__ */ jsx(Popover, {
 		open: t1,
 		referenceElement: t2,
 		placement: "top",
@@ -311,104 +531,60 @@ function Tooltip(t0) {
 		style: t3,
 		content: t4,
 		...props
-	}), $[8] = props, $[9] = t1, $[10] = t2, $[11] = t4, $[12] = t5) : t5 = $[12], t5;
-}
-/**
-* Flattens text into the form a search compares against, so a hyphenated icon name and a multi-word
-* tag are matched the same way.
-*
-* @param value - The text to flatten.
-* @returns The text in comparable form.
-*/
-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] : [];
-	});
+	}), $[10] = props, $[11] = t1, $[12] = t2, $[13] = t4, $[14] = t5) : t5 = $[14], t5;
 }
 /**
-* 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.
+* Loads an icon library style. Only an open picker calls this, so a Studio that never opens one never loads it.
 *
-* @returns Every icon the library offers.
+* @param library - Identifier of the library, or undefined when none is set.
+* @param style - Identifier of the style, or undefined for the library's default.
+* @returns The icons or why they can't be shown, or undefined while loading.
 */
-async function readLibrary() {
-	let [drawings, tags] = await Promise.all([import("lucide-static/icon-nodes.json"), import("lucide-static/tags.json")]), nodes = drawings.default, terms = tags.default;
-	return Object.keys(nodes).flatMap((name) => {
-		let node = parseIconNode(nodes[name]);
-		if (!isDefined(node)) return [];
-		let iconTags = terms[name] ?? [];
-		return [{
-			name,
-			label: convertCase(name, "sentence"),
-			tags: iconTags.join(", "),
-			node,
-			terms: normalizeTerms([name, ...iconTags].join(" "))
-		}];
-	});
-}
-/**
-* 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, waiting on whatever request is already under way.
-*
-* @returns Every icon the library offers.
-*/
-async function requestLibrary() {
-	return libraryRequest ??= readLibrary(), await libraryRequest;
-}
-/**
-* 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.
-*/
-function useIconLibrary() {
-	let $ = c(2), [library, setLibrary] = useState(), t0, t1;
-	return $[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
+function useIconLibrary(library, style) {
+	let $ = c(4), [result, setResult] = useState(), t0, t1;
+	return $[0] !== library || $[1] !== style ? (t0 = () => {
 		let active = !0;
 		return (async function load() {
-			let loaded = await requestLibrary();
-			active && setLibrary(loaded);
+			let loaded = await requestLibrary(library, style);
+			active && setResult(loaded);
 		})(), () => {
 			active = !1;
 		};
-	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1), library;
+	}, t1 = [library, style], $[0] = library, $[1] = style, $[2] = t0, $[3] = t1) : (t0 = $[2], t1 = $[3]), useEffect(t0, t1), result;
 }
 /**
-* Tracks which icon the cursor rests on, holding a tooltip back until it has settled somewhere.
+* Tracks the icon under the cursor, showing its tooltip after a short delay. Tooltips are held back while the grid
+* scrolls, and the icon left under the cursor gets its tooltip once scrolling stops.
 *
-* @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.
+* @param scrolling - Whether the grid is scrolling.
+* @returns The hovered icon, and functions to update and clear it.
 */
 function useIconTooltip(scrolling) {
-	let $ = c(11), [hovered, setHovered] = useState(), hoverStart = useRef(void 0), t0, t1;
+	let $ = c(14), [hovered, setHovered] = useState(), hoverStart = useRef(void 0), scrolledOnto = 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() {
+	let t2, t3;
+	$[2] === scrolling ? (t2 = $[3], t3 = $[4]) : (t2 = () => {
+		let landed = scrolledOnto.current;
+		!scrolling && isDefined(landed) && (scrolledOnto.current = void 0, landed.element.isConnected && landed.element.matches(":hover") && (hoverStart.current = setTimeout(() => {
+			setHovered(landed);
+		}, 200)));
+	}, t3 = [scrolling], $[2] = scrolling, $[3] = t2, $[4] = t3), useEffect(t2, t3);
+	let t4;
+	$[5] === hovered ? t4 = $[6] : (t4 = 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)) {
+	}, $[5] = hovered, $[6] = t4);
+	let clearHover = t4, t5;
+	$[7] !== hovered || $[8] !== scrolling ? (t5 = function handleHover(icon, element) {
+		if (scrolling) {
+			scrolledOnto.current = {
+				icon,
+				element
+			};
+			return;
+		}
+		if (element !== hovered?.element) {
 			if (isDefined(hoverStart.current) && clearTimeout(hoverStart.current), isDefined(hovered)) {
 				setHovered({
 					icon,
@@ -423,77 +599,93 @@ function useIconTooltip(scrolling) {
 				});
 			}, 200);
 		}
-	}, $[4] = hovered, $[5] = scrolling, $[6] = t3) : t3 = $[6];
-	let handleHover = t3, t4;
-	return $[7] !== clearHover || $[8] !== handleHover || $[9] !== hovered ? (t4 = {
+	}, $[7] = hovered, $[8] = scrolling, $[9] = t5) : t5 = $[9];
+	let handleHover = t5, t6;
+	return $[10] !== clearHover || $[11] !== handleHover || $[12] !== hovered ? (t6 = {
 		hovered,
 		handleHover,
 		clearHover
-	}, $[7] = clearHover, $[8] = handleHover, $[9] = hovered, $[10] = t4) : t4 = $[10], t4;
+	}, $[10] = clearHover, $[11] = handleHover, $[12] = hovered, $[13] = t6) : t6 = $[13], t6;
 }
-/** Where the icons an author reached for last are kept, in the browser rather than the dataset. */
-const storageKey = "driftime:sanity-plugin-icon:recent";
 /**
-* Reads the icons an author reached for last.
+* Builds the storage key for one library style.
 *
-* @returns Names of the remembered icons, most recent first.
+* @param scope - The library and style, such as `phosphor/bold`.
+* @returns The storage key.
 */
-function readRecent() {
+function getStorageKey(scope) {
+	return `driftime:sanity-plugin-icon:recent:${scope}`;
+}
+/**
+* Reads the recently chosen icons.
+*
+* @param scope - The library and style, such as `phosphor/bold`.
+* @returns The icon names, most recent first.
+*/
+function readRecent(scope) {
 	try {
-		let stored = JSON.parse(globalThis.localStorage.getItem(storageKey) ?? "[]");
+		let stored = JSON.parse(globalThis.localStorage.getItem(getStorageKey(scope)) ?? "[]");
 		return Array.isArray(stored) ? stored.filter((entry) => typeof entry == "string") : [];
 	} catch {
 		return [];
 	}
 }
 /**
-* Remembers an icon as the one reached for most recently.
+* Adds an icon to the front of the recent list.
 *
-* @param name - Name of the chosen icon.
-* @returns Names of the remembered icons, most recent first.
+* @param scope - The library and style, such as `phosphor/bold`.
+* @param name - The chosen icon's name.
+* @returns The updated icon names, most recent first.
 */
-function writeRecent(name) {
-	let updated = [name, ...readRecent().filter((entry) => entry !== name)].slice(0, 8);
+function writeRecent(scope, name) {
+	let updated = [name, ...readRecent(scope).filter((entry) => entry !== name)].slice(0, 8);
 	try {
-		globalThis.localStorage.setItem(storageKey, JSON.stringify(updated));
+		globalThis.localStorage.setItem(getStorageKey(scope), JSON.stringify(updated));
 	} catch {}
 	return updated;
 }
-/** Forgets every icon reached for so far. */
-function clearRecent() {
+/**
+* Clears the recent icons.
+*
+* @param scope - The library and style, such as `phosphor/bold`.
+*/
+function clearRecent(scope) {
 	try {
-		globalThis.localStorage.removeItem(storageKey);
+		globalThis.localStorage.removeItem(getStorageKey(scope));
 	} catch {}
 }
 /**
-* Tracks the icons an author reached for last, keeping what is remembered and what is drawn in step.
-* The stored list is read as the picker mounts, so another tab choosing an icon is picked up too.
+* Tracks the icons an author chose most recently from one library style. The list is read when the picker opens, so
+* choices made in another tab are included.
 *
-* @returns The remembered names, most recent first, alongside ways to add to and empty them.
+* @param scope - The library and style, such as `phosphor/bold`.
+* @returns The recent icon names, most recent first, and functions to add to and clear them.
 */
-function useRecentIcons() {
-	let $ = c(4), [recent, setRecent] = useState(readRecent), t0;
-	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = function remember(name) {
-		setRecent(writeRecent(name));
-	}, $[0] = t0) : t0 = $[0];
-	let remember = t0, t1;
-	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = function forget() {
-		clearRecent(), setRecent([]);
-	}, $[1] = t1) : t1 = $[1];
-	let forget = t1, t2;
-	return $[2] === recent ? t2 = $[3] : (t2 = {
+function useRecentIcons(scope) {
+	let $ = c(10), t0;
+	$[0] === scope ? t0 = $[1] : (t0 = () => readRecent(scope), $[0] = scope, $[1] = t0);
+	let [recent, setRecent] = useState(t0), t1;
+	$[2] === scope ? t1 = $[3] : (t1 = function remember(name) {
+		setRecent(writeRecent(scope, name));
+	}, $[2] = scope, $[3] = t1);
+	let remember = t1, t2;
+	$[4] === scope ? t2 = $[5] : (t2 = function forget() {
+		clearRecent(scope), setRecent([]);
+	}, $[4] = scope, $[5] = t2);
+	let forget = t2, t3;
+	return $[6] !== forget || $[7] !== recent || $[8] !== remember ? (t3 = {
 		recent,
 		remember,
 		forget
-	}, $[2] = recent, $[3] = t2), t2;
+	}, $[6] = forget, $[7] = recent, $[8] = remember, $[9] = t3) : t3 = $[9], t3;
 }
 /**
-* Works out which icon a key press moves to, so the library can be walked without a mouse.
+* Works out which icon a key press moves to.
 *
 * @param key - The key pressed.
-* @param current - Index of the icon the grid is on.
-* @param last - Index of the final icon in the results.
-* @returns The index moved to, or undefined when the key does not move.
+* @param current - Index of the current icon.
+* @param last - Index of the last icon.
+* @returns The new index, or undefined when the key doesn't move.
 */
 function getNextIndex(key, current, last) {
 	if (key === "ArrowRight") return current + 1;
@@ -504,12 +696,12 @@ function getNextIndex(key, current, last) {
 	if (key === "End") return last;
 }
 /**
-* Works out which rows the grid builds for a given scroll position, so only the icons near the
-* viewport are mounted. The rows above and below stand in as padding, keeping the scrollbar honest.
+* Works out which rows to render at a scroll position, so only icons near the viewport are mounted.
+* Padding replaces the other rows, so the scrollbar stays the right size.
 *
-* @param scrollRow - Row the scrolling area has reached.
+* @param scrollRow - The row scrolled to.
 * @param count - Number of icons in the results.
-* @returns The row the grid starts building at, the row it stops at, and the row count in total.
+* @returns The first and last rows to render, and the total number of rows.
 */
 function getVisibleRows(scrollRow, count) {
 	let totalRows = Math.ceil(count / 8), firstRow = Math.max(0, scrollRow - 8);
@@ -520,32 +712,32 @@ function getVisibleRows(scrollRow, count) {
 	};
 }
 /**
-* Works out where the scrolling area sits to show a given icon in the middle, for opening on the
-* icon already chosen.
+* Works out the scroll position that centres an icon, for opening on the selected icon.
 *
-* @param index - Index of the icon to show.
-* @returns The position to scroll to.
+* @param index - Index of the icon.
+* @returns The scroll position.
 */
 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.
+* Works out the scroll position that brings an icon into view, keeping the current one if it's
+* already visible. It uses the index because Home and End can move to rows that aren't mounted.
 *
-* @param index - Index of the icon to reveal.
-* @param scrollTop - Position the scrolling area has reached.
-* @returns The position to scroll to.
+* @param index - Index of the icon.
+* @param scrollTop - The current scroll position.
+* @returns The scroll position.
 */
 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(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 $ = c(39), allowed, iconStyle, libraryName, onSelect, props, selected;
+	$[0] === t0 ? (allowed = $[1], iconStyle = $[2], libraryName = $[3], onSelect = $[4], props = $[5], selected = $[6]) : ({library: libraryName, iconStyle, allowed, selected, onSelect, ...props} = t0, $[0] = t0, $[1] = allowed, $[2] = iconStyle, $[3] = libraryName, $[4] = onSelect, $[5] = props, $[6] = selected);
+	let result = useIconLibrary(libraryName, iconStyle), library = result?.icons, icons = selectIcons(library ?? [], allowed), t1 = libraryName ?? "", t2 = iconStyle ?? "default", t3;
+	$[7] !== t1 || $[8] !== t2 ? (t3 = getIconSetKey(t1, t2), $[7] = t1, $[8] = t2, $[9] = t3) : t3 = $[9];
+	let { recent, remember, forget } = useRecentIcons(t3), [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] : [];
 	}), { 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);
@@ -553,23 +745,23 @@ function Picker(t0) {
 		let element = scroller.current;
 		isDefined(element) && selectedIndex !== -1 && (element.scrollTop = getCenteredScrollTop(selectedIndex));
 	}, [scroller, selectedIndex]);
-	let t1, t2;
-	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => () => {
+	let t4, t5;
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => () => {
 		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] === activeIndex ? (t3 = $[8], t4 = $[9]) : (t3 = () => {
+	}, t5 = [], $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]), useEffect(t4, t5);
+	let t6, t7;
+	$[12] === activeIndex ? (t6 = $[13], t7 = $[14]) : (t6 = () => {
 		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;
-	$[10] !== onSelect || $[11] !== remember ? (t5 = function handleSelect(icon_3) {
+	}, t7 = [activeIndex], $[12] = activeIndex, $[13] = t6, $[14] = t7), useEffect(t6, t7);
+	let t8;
+	$[15] !== onSelect || $[16] !== remember ? (t8 = function handleSelect(icon_3) {
 		remember(icon_3.name), onSelect(icon_3);
-	}, $[10] = onSelect, $[11] = remember, $[12] = t5) : t5 = $[12];
-	let handleSelect = t5, t6;
-	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t6 = function clearSearch() {
+	}, $[15] = onSelect, $[16] = remember, $[17] = t8) : t8 = $[17];
+	let handleSelect = t8, t9;
+	$[18] === Symbol.for("react.memo_cache_sentinel") ? (t9 = function clearSearch() {
 		setSearch(""), setMovedIndex(void 0);
-	}, $[13] = t6) : t6 = $[13];
-	let clearSearch = t6, handleSearch = function handleSearch(event) {
+	}, $[18] = t9) : t9 = $[18];
+	let clearSearch = t9, handleSearch = function handleSearch(event) {
 		setSearch(event.currentTarget.value), setMovedIndex(void 0), isDefined(scroller.current) && (scroller.current.scrollTop = 0);
 	}, selectActive = function selectActive() {
 		let icon_4 = results[activeIndex];
@@ -602,17 +794,32 @@ function Picker(t0) {
 		focusIndex.current = index, setMovedIndex(index);
 		let element_1 = scroller.current;
 		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, {
+	}, T0 = Dialog, T1 = Stack, t14 = !isDefined(result?.problem) && /* @__PURE__ */ jsx(TextInput, {
+		type: "search",
+		icon: /* @__PURE__ */ jsx(SearchIcon, {}),
+		placeholder: "Search by name or keyword",
+		value: search,
+		onChange: handleSearch,
+		onKeyDown: handleSearchKeyDown,
+		disabled: !isDefined(library) || !isDefined(icons),
+		"aria-label": "Search the icon library"
+	}), t15;
+	$[19] === result ? t15 = $[20] : (t15 = !isDefined(result) && /* @__PURE__ */ jsx(Flex, {
 		align: "center",
 		justify: "center",
 		style: { height: 348 },
 		children: /* @__PURE__ */ jsx(Spinner, { muted: !0 })
-	}), $[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, {
+	}), $[19] = result, $[20] = t15);
+	let t16;
+	$[21] === result ? t16 = $[22] : (t16 = isDefined(result?.problem) && /* @__PURE__ */ jsx(Problem, { problem: result.problem }), $[21] = result, $[22] = t16);
+	let t17 = isDefined(recentIcons) && /* @__PURE__ */ jsx(Recent, {
+		icons: recentIcons,
+		selected,
+		onSelect: handleSelect,
+		onHover: handleHover,
+		onForget: forget,
+		onMouseLeave: clearHover
+	}), t18 = isDefined(library) && /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
 		children: [
 			/* @__PURE__ */ jsx(Box, {
@@ -628,17 +835,18 @@ function Picker(t0) {
 					]
 				})
 			}),
-			icons.length === 0 && /* @__PURE__ */ jsx(Flex, {
+			!isDefined(icons) && /* @__PURE__ */ jsx(Flex, {
 				align: "center",
 				justify: "center",
-				style: { height: 348 },
+				paddingTop: 5,
+				paddingBottom: 6,
 				children: /* @__PURE__ */ jsx(Text, {
 					size: 1,
 					muted: !0,
-					children: "No icons are available to choose from."
+					children: "No icons available."
 				})
 			}),
-			icons.length > 0 && /* @__PURE__ */ jsx(Library, {
+			isDefined(icons) && /* @__PURE__ */ jsx(Library, {
 				ref: scroller,
 				icons: results,
 				rows,
@@ -654,39 +862,31 @@ function Picker(t0) {
 				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, {
+	}), t19 = hovered?.icon.name, t20;
+	$[23] !== hovered || $[24] !== query || $[25] !== t19 ? (t20 = /* @__PURE__ */ jsx(Tooltip, {
+		hovered,
+		query
+	}, t19), $[23] = hovered, $[24] = query, $[25] = t19, $[26] = t20) : t20 = $[26];
+	let t21;
+	$[27] !== T1 || $[28] !== t14 || $[29] !== t15 || $[30] !== t16 || $[31] !== t17 || $[32] !== t18 || $[33] !== t20 ? (t21 = /* @__PURE__ */ jsxs(T1, {
+		gap: 4,
+		padding: 4,
+		children: [
+			t14,
+			t15,
+			t16,
+			t17,
+			t18,
+			t20
+		]
+	}), $[27] = T1, $[28] = t14, $[29] = t15, $[30] = t16, $[31] = t17, $[32] = t18, $[33] = t20, $[34] = t21) : t21 = $[34];
+	let t22;
+	return $[35] !== T0 || $[36] !== props || $[37] !== t21 ? (t22 = /* @__PURE__ */ jsx(T0, {
 		header: "Select icon",
 		width: 1,
 		...props,
-		children: /* @__PURE__ */ jsxs(Stack, {
-			gap: 4,
-			padding: 4,
-			children: [
-				/* @__PURE__ */ jsx(TextInput, {
-					icon: t7,
-					placeholder: "Search by name or by what the icon depicts",
-					value: search,
-					onChange: handleSearch,
-					onKeyDown: handleSearchKeyDown,
-					disabled: !isDefined(library) || icons.length === 0,
-					"aria-label": "Search the icon library"
-				}),
-				t8,
-				isDefined(recentIcons) && /* @__PURE__ */ jsx(Recent, {
-					icons: recentIcons,
-					selected,
-					onSelect: handleSelect,
-					onHover: handleHover,
-					onForget: forget,
-					onMouseLeave: clearHover
-				}),
-				t9,
-				t11
-			]
-		})
-	});
+		children: t21
+	}), $[35] = T0, $[36] = props, $[37] = t21, $[38] = t22) : t22 = $[38], t22;
 }
 function _temp(icon_0) {
 	return [icon_0.name, icon_0];
@@ -723,46 +923,54 @@ function SquareDashedIcon(props) {
 	}), $[12] = props, $[13] = t12), t12;
 }
 /**
-* 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.
+* Resolves the library, style, and icons a field offers. A field that names a library replaces all three of the
+* plugin's, and one that doesn't uses the plugin's.
 *
-* @param options - Options the field itself was given.
-* @param config - Configuration the plugin was given.
-* @returns The settings the field runs on.
+* @param options - The field's options.
+* @param config - The plugin configuration.
+* @returns The field's settings, whose library is undefined when neither the field nor the plugin names one.
 */
 function resolveIconOptions(options, config) {
-	return { icons: options?.icons ?? config.icons };
+	let { library, style, icons } = (isDefined(options?.library) ? options : config) ?? {};
+	return {
+		library,
+		style,
+		icons
+	};
 }
-/** Type name of the icon object. */
+/** Schema 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.
+* Creates the icon field input, bound to the plugin's configuration. A field's own icons replace the
+* plugin's rather than adding to them.
 *
-* @param config - Configuration every field falls back to.
+* @param config - The plugin configuration.
 * @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;
+		let $ = c(35), { id, schemaType, value, onChange, readOnly } = t0, { library: storedLibrary, 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) {
+		let { library, style, icons } = t1, selectedDrawing = resolveIconDrawing(node), selectedName = storedLibrary === library ? name : void 0, selectedLabel = isDefined(name) ? convertCase(name, "title") : void 0, t2;
+		$[2] !== library || $[3] !== onChange || $[4] !== setOpen || $[5] !== style ? (t2 = function handleSelect(icon) {
 			onChange([
 				setIfMissing({ _type: iconTypeName }),
+				isDefined(library) ? set(library, ["library"]) : unset(["library"]),
+				isDefined(style) ? set(style, ["style"]) : unset(["style"]),
 				set(icon.name, ["name"]),
-				set(serializeIconNode(icon.node), ["node"])
+				set(serializeIconDrawing(icon.drawing), ["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
+		}, $[2] = library, $[3] = onChange, $[4] = setOpen, $[5] = style, $[6] = t2) : t2 = $[6];
+		let handleSelect = t2, T0 = Flex, T1 = Button, t6 = isDefined(selectedDrawing) ? /* @__PURE__ */ jsx(Drawing, {
+			drawing: selectedDrawing,
+			width: "1em",
+			height: "1em"
 		}) : /* @__PURE__ */ jsx(SquareDashedIcon, { ...defaultIconProps }), t7 = selectedLabel ?? "Select icon", t8;
-		$[5] === setOpen ? t8 = $[6] : (t8 = () => {
+		$[7] === setOpen ? t8 = $[8] : (t8 = () => {
 			setOpen(!0);
-		}, $[5] = setOpen, $[6] = t8);
+		}, $[7] = setOpen, $[8] = 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, {
+		$[9] !== T1 || $[10] !== id || $[11] !== readOnly || $[12] !== t6 || $[13] !== t7 || $[14] !== t8 || $[15] !== t9 ? (t10 = /* @__PURE__ */ jsx(T1, {
 			id,
 			type: "button",
 			mode: "ghost",
@@ -771,9 +979,9 @@ function createInput(config) {
 			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];
+		}), $[9] = T1, $[10] = id, $[11] = readOnly, $[12] = t6, $[13] = t7, $[14] = t8, $[15] = t9, $[16] = t10) : t10 = $[16];
 		let t11;
-		$[15] !== onChange || $[16] !== readOnly || $[17] !== value ? (t11 = isDefined(value) && /* @__PURE__ */ jsx(Button, {
+		$[17] !== onChange || $[18] !== readOnly || $[19] !== value ? (t11 = isDefined(value) && /* @__PURE__ */ jsx(Button, {
 			type: "button",
 			mode: "ghost",
 			tone: "critical",
@@ -783,13 +991,15 @@ function createInput(config) {
 			onClick: () => {
 				onChange(unset());
 			},
-			"aria-label": "Clear the currently selected icon"
-		}), $[15] = onChange, $[16] = readOnly, $[17] = value, $[18] = t11) : t11 = $[18];
+			"aria-label": "Clear the selected icon"
+		}), $[17] = onChange, $[18] = readOnly, $[19] = value, $[20] = t11) : t11 = $[20];
 		let t12;
-		$[19] !== handleSelect || $[20] !== icons || $[21] !== id || $[22] !== name || $[23] !== open || $[24] !== setOpen ? (t12 = open && /* @__PURE__ */ jsx(Picker, {
+		$[21] !== handleSelect || $[22] !== icons || $[23] !== id || $[24] !== library || $[25] !== open || $[26] !== selectedName || $[27] !== setOpen || $[28] !== style ? (t12 = open && /* @__PURE__ */ jsx(Picker, {
 			id: `${id}-library`,
+			library,
+			iconStyle: style,
 			allowed: icons,
-			selected: name,
+			selected: selectedName,
 			onSelect: handleSelect,
 			onClose: () => {
 				setOpen(!1);
@@ -797,54 +1007,53 @@ function createInput(config) {
 			onClickOutside: () => {
 				setOpen(!1);
 			}
-		}), $[19] = handleSelect, $[20] = icons, $[21] = id, $[22] = name, $[23] = open, $[24] = setOpen, $[25] = t12) : t12 = $[25];
+		}), $[21] = handleSelect, $[22] = icons, $[23] = id, $[24] = library, $[25] = open, $[26] = selectedName, $[27] = setOpen, $[28] = style, $[29] = t12) : t12 = $[29];
 		let t13;
-		return $[26] !== T0 || $[27] !== t10 || $[28] !== t11 || $[29] !== t12 ? (t13 = /* @__PURE__ */ jsxs(T0, {
+		return $[30] !== T0 || $[31] !== t10 || $[32] !== t11 || $[33] !== t12 ? (t13 = /* @__PURE__ */ jsxs(T0, {
 			gap: 2,
 			children: [
 				t10,
 				t11,
 				t12
 			]
-		}), $[26] = T0, $[27] = t10, $[28] = t11, $[29] = t12, $[30] = t13) : t13 = $[30], t13;
+		}), $[30] = T0, $[31] = t10, $[32] = t11, $[33] = t12, $[34] = t13) : t13 = $[34], t13;
 	}
 	return Input;
 }
 /**
-* 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 preview media for a stored icon, so each document shows its own icon instead of a placeholder.
 *
 * @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() {
+	let drawing = resolveIconDrawing(value?.node);
+	if (isDefined(drawing)) return function IconPreview() {
 		return createElement(Drawing, {
-			node,
-			...defaultIconProps
+			drawing,
+			width: "1em",
+			height: "1em"
 		});
 	};
 }
 /**
-* Creates the object type an icon is stored as, offering the icons it is given to every field that
-* does not name its own.
+* Creates the icon object type, offering the plugin's icons to fields that don't set their own.
 *
-* @param config - Configuration every field falls back to.
-* @returns An object type definition for a stored icon.
+* @param config - The plugin configuration.
+* @returns The icon type.
 */
 function createIconType(config) {
 	return defineType({
 		name: iconTypeName,
 		type: "object",
 		icon: createSanityIcon(SquareDashedIcon),
-		description: "Icon chosen from the Lucide library.",
+		description: "Icon chosen from an icon library.",
 		components: {
 			field: Field,
 			input: createInput(config)
 		},
-		validation: (rule) => rule.custom((value) => !isDefined(value?.name) || isDefined(value.node) ? !0 : "Select the icon again so its drawing is stored."),
+		validation: (rule) => rule.custom((value) => !isDefined(value?.name) || isDefined(value.node) ? !0 : "Select the icon again to save its drawing."),
 		preview: {
 			select: {
 				name: "name",
@@ -853,7 +1062,7 @@ function createIconType(config) {
 			prepare(selection) {
 				let { name, node } = selection;
 				return {
-					title: isDefined(name) ? convertCase(name, "sentence") : "No icon",
+					title: isDefined(name) ? convertCase(name, "title") : "No icon",
 					media: createIconPreview({
 						_type: iconTypeName,
 						name,
@@ -862,30 +1071,43 @@ function createIconType(config) {
 				};
 			}
 		},
-		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."
-		})]
+		fields: [
+			defineField({
+				name: "library",
+				type: "string",
+				description: "Identifier of the library the icon came from."
+			}),
+			defineField({
+				name: "style",
+				type: "string",
+				description: "Identifier of the library style the icon came from."
+			}),
+			defineField({
+				name: "name",
+				type: "string",
+				description: "Name of the icon in its library."
+			}),
+			defineField({
+				name: "node",
+				type: "text",
+				description: "Shapes the icon is drawn from, saved when it's chosen."
+			})
+		]
 	});
 }
 const plugin = definePlugin((config) => ({
-	name: "@driftime/sanity-plugin-icon",
+	name: pluginName,
 	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.
+* Adds an icon field type to Sanity Studio, with a searchable picker for the installed icon libraries that
+* stores the chosen icon's drawing.
 *
-* @param config - Plugin configuration.
-* @returns Sanity plugin definition.
+* @param config - The plugin configuration.
+* @returns The plugin.
 * @public
 */
-function iconPlugin(config = {}) {
+function iconPlugin(config) {
 	return plugin(config);
 }
 export { createIconPreview, iconPlugin };