@sanity/themer 0.0.0 → 0.1.0

package/dist/tool.js

@@ -1,12 +1,17 @@
-import { t as isColor } from "./_chunks/mix.js";
-import { n as createTheme, t as presets } from "./_chunks/presets.js";
-import { color } from "@sanity/color";
+import { a as parseHuesFromUrl, c as isColor, i as createTheme, l as applyHues, o as createTonesFromHues, s as presets, t as hues } from "./defaults-DJtuhI2W.js";
+import { COLOR_TINTS } from "@sanity/color";
+import { c } from "react-compiler-runtime";
 import { definePlugin } from "sanity";
-import { Box, Button, Card, Code, Flex, Layer, Select, Stack, Text, ThemeProvider, useToast } from "@sanity/ui";
-import { createContext, useContext, useEffect, useMemo, useState } from "react";
+import { Box, Button, Card, Code, Flex, Grid, Layer, Select, Stack, Text, TextInput, ThemeProvider, Tooltip, useToast } from "@sanity/ui";
+import { createContext, useContext, useEffect, useState } from "react";
+import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
+import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
 import { ClipboardIcon } from "@sanity/icons/Clipboard";
 import { CloseIcon } from "@sanity/icons/Close";
 import { ResetIcon } from "@sanity/icons/Reset";
+import { registerLanguage } from "react-refractor";
+import typescript from "refractor/typescript";
+import { styled } from "styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ColorWheelIcon } from "@sanity/icons/ColorWheel";
 /** @internal */
@@ -17,93 +22,193 @@ function useThemer() {
 	if (!context) throw Error("useThemer must be used within the `themerTool` plugin");
 	return context;
 }
-/** @internal */
-const THEMER_FIELDS = [
+/**
+* The six hues in the order the hosted Themer service listed them, used for
+* the sidebar's editors and the generated snippet alike.
+*
+* @internal
+*/
+const HUE_KEYS = [
+	"default",
+	"primary",
+	"transparent",
+	"positive",
+	"caution",
+	"critical"
+], HUE_FIELDS = [
+	{
+		key: "default",
+		title: "Default",
+		description: "Text, icons and most surfaces"
+	},
 	{
 		key: "primary",
 		title: "Primary",
-		description: "Buttons, focus rings and links",
-		defaultValue: color.blue[500].hex
+		description: "Focus rings, links and primary buttons"
 	},
 	{
-		key: "gray",
-		title: "Gray",
-		description: "Neutral surfaces, borders and text",
-		defaultValue: color.gray[500].hex
+		key: "transparent",
+		title: "Transparent",
+		description: "The backdrop behind panes"
 	},
 	{
 		key: "positive",
 		title: "Positive",
-		description: "Success accents",
-		defaultValue: color.green[500].hex
+		description: "Success badges and prompts"
 	},
 	{
 		key: "caution",
 		title: "Caution",
-		description: "Warning accents",
-		defaultValue: color.yellow[500].hex
+		description: "Warnings and draft indicators"
 	},
 	{
 		key: "critical",
 		title: "Critical",
-		description: "Errors and destructive actions",
-		defaultValue: color.red[500].hex
-	},
-	{
-		key: "lightest",
-		title: "Lightest",
-		description: "Light mode background",
-		defaultValue: color.white.hex
-	},
-	{
-		key: "darkest",
-		title: "Darkest",
-		description: "Dark mode background",
-		defaultValue: color.black.hex
+		description: "Errors and destructive actions"
 	}
+], MID_POINTS = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900,
+	950
+], HUE_PROPERTIES = [
+	"mid",
+	"midPoint",
+	"lightest",
+	"darkest"
 ];
+/** @internal */
+function sameHues(a, b) {
+	return HUE_KEYS.every((key) => HUE_PROPERTIES.every((property) => {
+		let left = a[key][property], right = b[key][property];
+		return typeof left == "string" && typeof right == "string" ? left.toLowerCase() === right.toLowerCase() : left === right;
+	}));
+}
 /**
-* Serializes colors into the `createTheme` call to paste into
-* `sanity.config.ts`.
+* Reduces resolved hues to the minimal `PartialHues` that recreates them
+* through the legacy `createTheme`. The subtlety is `applyHues`' quirk of
+* resetting a customized `mid`'s mid point to 500: whenever `mid` is included,
+* the baseline for `midPoint` is 500 rather than the hue's default.
 *
 * @internal
 */
-function createThemeSnippet(colors) {
-	let entries = THEMER_FIELDS.filter(({ key }) => colors[key]).map(({ key }) => `  ${key}: '${colors[key]}',`);
-	return `import {createTheme} from '@sanity/themer'\n\nexport const theme = ${entries.length === 0 ? "createTheme()" : `createTheme({\n${entries.join("\n")}\n})`}\n`;
+function diffHues(hues$1) {
+	let diff = {};
+	for (let key of HUE_KEYS) {
+		let hue = hues$1[key], base = hues[key], patch = {};
+		hue.mid.toLowerCase() !== base.mid && (patch.mid = hue.mid.toLowerCase());
+		let impliedMidPoint = patch.mid === void 0 ? base.midPoint : 500;
+		hue.midPoint !== impliedMidPoint && (patch.midPoint = hue.midPoint), hue.lightest.toLowerCase() !== base.lightest && (patch.lightest = hue.lightest.toLowerCase()), hue.darkest.toLowerCase() !== base.darkest && (patch.darkest = hue.darkest.toLowerCase()), Object.keys(patch).length > 0 && (diff[key] = patch);
+	}
+	return diff;
 }
-const swatchStyle = {
-	width: 33,
-	height: 33,
-	padding: 0,
-	border: "1px solid var(--card-border-color)",
-	borderRadius: 6,
-	background: "transparent",
-	cursor: "pointer",
-	flex: "none"
-};
-function sameColors(a, b) {
-	return THEMER_FIELDS.every(({ key }) => (a[key]?.toLowerCase() ?? void 0) === (b[key]?.toLowerCase() ?? void 0));
+function serializeHue(hue) {
+	let parts = [];
+	return hue.mid !== void 0 && parts.push(`mid: '${hue.mid}'`), hue.midPoint !== void 0 && parts.push(`midPoint: ${hue.midPoint}`), hue.lightest !== void 0 && parts.push(`lightest: '${hue.lightest}'`), hue.darkest !== void 0 && parts.push(`darkest: '${hue.darkest}'`), `{${parts.join(", ")}}`;
 }
+/**
+* Serializes hues into the `createTheme` call to paste into
+* `sanity.config.ts`, keeping only what differs from the default hues.
+*
+* Hues that match the defaults entirely are the stock Studio theme, which
+* needs nothing from this package — so they serialize to a bare `buildTheme()`
+* instead.
+*
+* @internal
+*/
+function createThemeSnippet(hues) {
+	let diff = diffHues(hues), entries = [];
+	for (let key of HUE_KEYS) {
+		let patch = diff[key];
+		patch && entries.push(`  ${key}: ${serializeHue(patch)},`);
+	}
+	return entries.length === 0 ? "import {buildTheme} from '@sanity/ui/theme'\n\nexport const theme = buildTheme()\n" : `import {createTheme} from '@sanity/themer/legacy'\n\nexport const theme = createTheme({\n${entries.join("\n")}\n})\n`;
+}
+registerLanguage(typescript);
+/**
+* The tool's take on the hosted service's presets: Tailwind Cyan is hidden and
+* the default "Studio v3" preset reads just "Studio". The legacy `presets`
+* export itself keeps both untouched, for parity with
+* `https://themer.sanity.build/api/hues`.
+*/
+const TOOL_PRESETS = [];
+for (let preset of presets) preset.slug !== "tw-cyan" && TOOL_PRESETS.push(preset.slug === "default" ? {
+	...preset,
+	title: "Studio"
+} : preset);
+/**
+* `<input type="color">` paints the color into a shadow-DOM swatch that brings
+* its own border and padding, which then sits inside ours as a second border.
+* Stripping that chrome leaves the themed border as the only one.
+*/
+const Swatch = styled.input.withConfig({
+	displayName: "Swatch",
+	componentId: "sc-g4qzjc-0"
+})`box-sizing:border-box;flex:none;width:33px;height:33px;padding:0;border:1px solid var(--card-border-color);border-radius:4px;background:none;cursor:pointer;&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-color-swatch{border:none;border-radius:3px;}&::-moz-color-swatch{border:none;border-radius:3px;}`;
 /** Expands `#abc` to `#aabbcc`, which is the only format `<input type="color">` accepts */
 function expandHex(hex) {
 	return hex.length === 4 ? `#${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex;
 }
+/** Prefixes bare query strings so `parseHuesFromUrl` accepts them too */
+function normalizeImportUrl(input) {
+	let trimmed = input.trim();
+	return trimmed.startsWith("http") || trimmed.startsWith("?") ? trimmed : `?${trimmed}`;
+}
 /**
-* The themer sidebar: a preset picker and a handful of color pickers that
-* generate the previewed theme, plus the `createTheme` snippet to make it
-* permanent.
+* The themer sidebar: presets, a themer.sanity.build URL importer and the
+* per-hue editors of the hosted Themer service — mid color, mid point,
+* lightest and darkest — that generate the previewed legacy theme, plus the
+* `createTheme` snippet to make it permanent.
 *
 * @internal
 */
 function ThemerSidebar() {
-	let { baseColors, colors, setColors, setOpen } = useThemer(), toast = useToast(), active = colors ?? baseColors, activePresetSlug = presets.find((preset) => sameColors(preset.colors, active))?.slug ?? "", snippet = createThemeSnippet(active), handleFieldChange = (key, value) => {
-		let next = { ...active };
-		value === void 0 ? delete next[key] : next[key] = value, setColors(next);
-	}, handlePresetChange = (slug) => {
-		let preset = presets.find((candidate) => candidate.slug === slug);
-		preset && setColors({ ...preset.colors });
-	}, handleCopy = async () => {
+	let $ = c(71), { baseHues, hues, setHues, setOpen } = useThemer(), toast = useToast(), [expandedHue, setExpandedHue] = useState(null), [importUrl, setImportUrl] = useState(""), active = hues ?? baseHues, t0;
+	$[0] === active ? t0 = $[1] : (t0 = createTonesFromHues(active), $[0] = active, $[1] = t0);
+	let tones = t0, t1;
+	$[2] === active ? t1 = $[3] : (t1 = TOOL_PRESETS.find((preset) => sameHues(preset.hues, active))?.slug ?? "", $[2] = active, $[3] = t1);
+	let activePresetSlug = t1, t2;
+	$[4] === active ? t2 = $[5] : (t2 = createThemeSnippet(active), $[4] = active, $[5] = t2);
+	let snippet = t2, t3;
+	$[6] !== active || $[7] !== setHues ? (t3 = (key, patch) => {
+		setHues({
+			...active,
+			[key]: {
+				...active[key],
+				...patch
+			}
+		});
+	}, $[6] = active, $[7] = setHues, $[8] = t3) : t3 = $[8];
+	let handleHueChange = t3, t4;
+	$[9] === setHues ? t4 = $[10] : (t4 = (slug) => {
+		let preset_0 = TOOL_PRESETS.find((candidate) => candidate.slug === slug);
+		preset_0 && setHues(preset_0.hues);
+	}, $[9] = setHues, $[10] = t4);
+	let handlePresetChange = t4, t5;
+	$[11] !== importUrl || $[12] !== setHues || $[13] !== toast ? (t5 = () => {
+		if (importUrl.trim()) try {
+			setHues(parseHuesFromUrl(normalizeImportUrl(importUrl))), setImportUrl(""), toast.push({
+				status: "success",
+				title: "Imported theme from URL"
+			});
+		} catch (t6) {
+			let error = t6;
+			toast.push({
+				status: "error",
+				title: "Could not import the URL",
+				description: error instanceof Error ? error.message : String(error)
+			});
+		}
+	}, $[11] = importUrl, $[12] = setHues, $[13] = toast, $[14] = t5) : t5 = $[14];
+	let handleImport = t5, t6;
+	$[15] !== snippet || $[16] !== toast ? (t6 = async () => {
 		try {
 			await navigator.clipboard.writeText(snippet), toast.push({
 				status: "success",
@@ -115,149 +220,419 @@ function ThemerSidebar() {
 				title: "Could not copy the theme"
 			});
 		}
-	};
-	return /* @__PURE__ */ jsx(Card, {
+	}, $[15] = snippet, $[16] = toast, $[17] = t6) : t6 = $[17];
+	let handleCopy = t6, t7;
+	$[18] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		paddingLeft: 1,
+		children: /* @__PURE__ */ jsx(Text, {
+			size: 1,
+			weight: "semibold",
+			children: "Themer"
+		})
+	}), $[18] = t7) : t7 = $[18];
+	let t8;
+	$[19] === setOpen ? t8 = $[20] : (t8 = /* @__PURE__ */ jsx(Card, {
+		borderBottom: !0,
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: 2,
+			children: [t7, /* @__PURE__ */ jsx(Button, {
+				icon: CloseIcon,
+				mode: "bleed",
+				onClick: () => setOpen(!1),
+				padding: 2,
+				title: "Close themer"
+			})]
+		})
+	}), $[19] = setOpen, $[20] = t8);
+	let t9;
+	$[21] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		children: "Presets"
+	}), $[21] = t9) : t9 = $[21];
+	let t10;
+	$[22] !== activePresetSlug || $[23] !== handlePresetChange ? (t10 = TOOL_PRESETS.map((preset_1) => /* @__PURE__ */ jsx(PresetButton, {
+		active: preset_1.slug === activePresetSlug,
+		onClick: handlePresetChange,
+		preset: preset_1
+	}, preset_1.slug)), $[22] = activePresetSlug, $[23] = handlePresetChange, $[24] = t10) : t10 = $[24];
+	let t11;
+	$[25] === t10 ? t11 = $[26] : (t11 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [t9, /* @__PURE__ */ jsx(Grid, {
+			gap: 2,
+			gridTemplateColumns: 2,
+			children: t10
+		})]
+	}), $[25] = t10, $[26] = t11);
+	let t12;
+	$[27] === Symbol.for("react.memo_cache_sentinel") ? (t12 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		children: "Import"
+	}), $[27] = t12) : t12 = $[27];
+	let t13;
+	$[28] === handleImport ? t13 = $[29] : (t13 = (event) => {
+		event.preventDefault(), handleImport();
+	}, $[28] = handleImport, $[29] = t13);
+	let t14;
+	$[30] === Symbol.for("react.memo_cache_sentinel") ? (t14 = (event_0) => setImportUrl(event_0.currentTarget.value), $[30] = t14) : t14 = $[30];
+	let t15;
+	$[31] === importUrl ? t15 = $[32] : (t15 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		children: /* @__PURE__ */ jsx(TextInput, {
+			"aria-label": "Hosted Themer URL",
+			fontSize: 1,
+			onChange: t14,
+			padding: 2,
+			placeholder: "themer.sanity.build URL",
+			value: importUrl
+		})
+	}), $[31] = importUrl, $[32] = t15);
+	let t16;
+	$[33] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx(Button, {
+		mode: "ghost",
+		padding: 2,
+		text: "Import",
+		type: "submit"
+	}), $[33] = t16) : t16 = $[33];
+	let t17;
+	$[34] === t15 ? t17 = $[35] : (t17 = /* @__PURE__ */ jsxs(Flex, {
+		gap: 2,
+		children: [t15, t16]
+	}), $[34] = t15, $[35] = t17);
+	let t18;
+	$[36] !== t13 || $[37] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [t12, /* @__PURE__ */ jsx("form", {
+			onSubmit: t13,
+			children: t17
+		})]
+	}), $[36] = t13, $[37] = t17, $[38] = t18) : t18 = $[38];
+	let t19;
+	$[39] === Symbol.for("react.memo_cache_sentinel") ? (t19 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		children: "Hues"
+	}), $[39] = t19) : t19 = $[39];
+	let t20;
+	$[40] !== active || $[41] !== expandedHue || $[42] !== handleHueChange || $[43] !== tones ? (t20 = HUE_FIELDS.map((field) => /* @__PURE__ */ jsx(HueSection, {
+		expanded: expandedHue === field.key,
+		field,
+		hue: active[field.key],
+		onChange: handleHueChange,
+		onToggle: () => setExpandedHue(expandedHue === field.key ? null : field.key),
+		tints: tones[field.key]
+	}, field.key)), $[40] = active, $[41] = expandedHue, $[42] = handleHueChange, $[43] = tones, $[44] = t20) : t20 = $[44];
+	let t21;
+	$[45] === t20 ? t21 = $[46] : (t21 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [t19, /* @__PURE__ */ jsx(Stack, {
+			gap: 1,
+			children: t20
+		})]
+	}), $[45] = t20, $[46] = t21);
+	let t22;
+	$[47] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		children: "Add to your config"
+	}), $[47] = t22) : t22 = $[47];
+	let t23;
+	$[48] === snippet ? t23 = $[49] : (t23 = /* @__PURE__ */ jsx(Card, {
+		border: !0,
+		overflow: "auto",
+		padding: 2,
+		radius: 2,
+		tone: "transparent",
+		children: /* @__PURE__ */ jsx(Code, {
+			language: "ts",
+			size: 0,
+			children: snippet
+		})
+	}), $[48] = snippet, $[49] = t23);
+	let t24;
+	$[50] === handleCopy ? t24 = $[51] : (t24 = /* @__PURE__ */ jsx(Button, {
+		icon: ClipboardIcon,
+		mode: "ghost",
+		onClick: () => void handleCopy(),
+		text: "Copy"
+	}), $[50] = handleCopy, $[51] = t24);
+	let t25 = hues === null, t26;
+	$[52] === setHues ? t26 = $[53] : (t26 = () => setHues(null), $[52] = setHues, $[53] = t26);
+	let t27;
+	$[54] !== t25 || $[55] !== t26 ? (t27 = /* @__PURE__ */ jsx(Button, {
+		disabled: t25,
+		icon: ResetIcon,
+		mode: "ghost",
+		onClick: t26,
+		text: "Reset",
+		tone: "critical"
+	}), $[54] = t25, $[55] = t26, $[56] = t27) : t27 = $[56];
+	let t28;
+	$[57] !== t24 || $[58] !== t27 ? (t28 = /* @__PURE__ */ jsxs(Flex, {
+		gap: 2,
+		children: [t24, t27]
+	}), $[57] = t24, $[58] = t27, $[59] = t28) : t28 = $[59];
+	let t29;
+	$[60] !== t23 || $[61] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [
+			t22,
+			t23,
+			t28
+		]
+	}), $[60] = t23, $[61] = t28, $[62] = t29) : t29 = $[62];
+	let t30;
+	$[63] !== t11 || $[64] !== t18 || $[65] !== t21 || $[66] !== t29 ? (t30 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		overflow: "auto",
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [
+				t11,
+				t18,
+				t21,
+				t29
+			]
+		})
+	}), $[63] = t11, $[64] = t18, $[65] = t21, $[66] = t29, $[67] = t30) : t30 = $[67];
+	let t31;
+	return $[68] !== t30 || $[69] !== t8 ? (t31 = /* @__PURE__ */ jsx(Card, {
 		height: "fill",
 		children: /* @__PURE__ */ jsxs(Flex, {
 			direction: "column",
 			height: "fill",
-			children: [/* @__PURE__ */ jsx(Card, {
-				borderBottom: !0,
-				padding: 3,
-				children: /* @__PURE__ */ jsxs(Flex, {
-					align: "center",
-					gap: 2,
-					children: [/* @__PURE__ */ jsx(Box, {
-						flex: 1,
-						paddingLeft: 1,
-						children: /* @__PURE__ */ jsx(Text, {
-							size: 1,
-							weight: "semibold",
-							children: "Themer"
-						})
-					}), /* @__PURE__ */ jsx(Button, {
-						icon: CloseIcon,
-						mode: "bleed",
-						onClick: () => setOpen(!1),
-						padding: 2,
-						title: "Close themer"
-					})]
-				})
-			}), /* @__PURE__ */ jsx(Box, {
-				flex: 1,
-				overflow: "auto",
-				padding: 4,
-				children: /* @__PURE__ */ jsxs(Stack, {
-					gap: 5,
-					children: [
-						/* @__PURE__ */ jsxs(Stack, {
-							gap: 3,
-							children: [/* @__PURE__ */ jsx(Text, {
-								size: 1,
-								weight: "medium",
-								children: "Preset"
-							}), /* @__PURE__ */ jsxs(Select, {
-								onChange: (event) => handlePresetChange(event.currentTarget.value),
-								value: activePresetSlug,
-								children: [activePresetSlug === "" && /* @__PURE__ */ jsx("option", {
-									value: "",
-									children: "Custom"
-								}), presets.map((preset) => /* @__PURE__ */ jsx("option", {
-									value: preset.slug,
-									children: preset.title
-								}, preset.slug))]
-							})]
-						}),
-						/* @__PURE__ */ jsx(Stack, {
-							gap: 4,
-							children: THEMER_FIELDS.map((field) => /* @__PURE__ */ jsx(ColorField, {
-								field,
-								onChange: handleFieldChange,
-								value: active[field.key]
-							}, field.key))
-						}),
-						/* @__PURE__ */ jsxs(Stack, {
-							gap: 3,
-							children: [
-								/* @__PURE__ */ jsx(Text, {
-									size: 1,
-									weight: "medium",
-									children: "Add to your config"
-								}),
-								/* @__PURE__ */ jsx(Card, {
-									border: !0,
-									overflow: "auto",
-									padding: 3,
-									radius: 2,
-									tone: "transparent",
-									children: /* @__PURE__ */ jsx(Code, {
-										language: "ts",
-										size: 0,
-										children: snippet
-									})
-								}),
-								/* @__PURE__ */ jsxs(Flex, {
-									gap: 2,
-									children: [/* @__PURE__ */ jsx(Button, {
-										icon: ClipboardIcon,
-										mode: "ghost",
-										onClick: () => void handleCopy(),
-										text: "Copy"
-									}), /* @__PURE__ */ jsx(Button, {
-										disabled: colors === null,
-										icon: ResetIcon,
-										mode: "ghost",
-										onClick: () => setColors(null),
-										text: "Reset",
-										tone: "critical"
-									})]
-								})
-							]
-						})
-					]
-				})
-			})]
+			children: [t8, t30]
 		})
-	});
+	}), $[68] = t30, $[69] = t8, $[70] = t31) : t31 = $[70], t31;
+}
+const paletteStyle = {
+	display: "flex",
+	gap: 1,
+	background: "var(--card-border-color)",
+	height: 21,
+	borderRadius: 3,
+	overflow: "hidden",
+	boxShadow: "inset 0 0 0 1px var(--card-border-color)"
+};
+/** A little color palette of the hue mid colors a preset would apply */
+function PresetButton(props) {
+	let $ = c(17), { active, onClick, preset } = props, t0;
+	$[0] !== onClick || $[1] !== preset.slug ? (t0 = () => onClick(preset.slug), $[0] = onClick, $[1] = preset.slug, $[2] = t0) : t0 = $[2];
+	let t1 = preset.title, t2;
+	$[3] === preset.hues ? t2 = $[4] : (t2 = HUE_KEYS.map((key) => /* @__PURE__ */ jsx("span", { style: {
+		flex: 1,
+		background: preset.hues[key].mid
+	} }, key)), $[3] = preset.hues, $[4] = t2);
+	let t3;
+	$[5] === t2 ? t3 = $[6] : (t3 = /* @__PURE__ */ jsx("span", {
+		style: paletteStyle,
+		children: t2
+	}), $[5] = t2, $[6] = t3);
+	let t4;
+	$[7] === preset.title ? t4 = $[8] : (t4 = /* @__PURE__ */ jsx(Text, {
+		align: "left",
+		size: 1,
+		textOverflow: "ellipsis",
+		children: preset.title
+	}), $[7] = preset.title, $[8] = t4);
+	let t5;
+	$[9] !== t3 || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Stack, {
+		as: "span",
+		gap: 2,
+		children: [t3, t4]
+	}), $[9] = t3, $[10] = t4, $[11] = t5) : t5 = $[11];
+	let t6;
+	return $[12] !== active || $[13] !== preset.title || $[14] !== t0 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsx(Button, {
+		mode: "ghost",
+		onClick: t0,
+		padding: 2,
+		selected: active,
+		title: t1,
+		children: t5
+	}), $[12] = active, $[13] = preset.title, $[14] = t0, $[15] = t5, $[16] = t6) : t6 = $[16], t6;
 }
-function ColorField(props) {
-	let { field, value, onChange } = props;
-	return /* @__PURE__ */ jsxs(Flex, {
+const rampStyle = {
+	...paletteStyle,
+	height: 13,
+	borderRadius: 2
+};
+/** One hue of the theme: a collapsible header with the generated tint ramp */
+function HueSection(props) {
+	let $ = c(35), { expanded, field, hue, onChange, onToggle, tints } = props, t0 = expanded ? "transparent" : void 0, t1 = expanded ? 3 : 0, t2 = expanded ? 3 : 0, t3 = field.description, t4;
+	$[0] === expanded ? t4 = $[1] : (t4 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: jsx(expanded ? ChevronDownIcon : ChevronRightIcon, {})
+	}), $[0] = expanded, $[1] = t4);
+	let t5;
+	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t5 = { width: 76 }, $[2] = t5) : t5 = $[2];
+	let t6;
+	$[3] === field.title ? t6 = $[4] : (t6 = /* @__PURE__ */ jsx(Box, {
+		as: "span",
+		style: t5,
+		children: /* @__PURE__ */ jsx(Text, {
+			size: 1,
+			textOverflow: "ellipsis",
+			weight: "medium",
+			children: field.title
+		})
+	}), $[3] = field.title, $[4] = t6);
+	let t7;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t7 = {
+		...rampStyle,
+		flex: 1
+	}, $[5] = t7) : t7 = $[5];
+	let t8;
+	$[6] === tints ? t8 = $[7] : (t8 = COLOR_TINTS.map((tint) => /* @__PURE__ */ jsx("span", { style: {
+		flex: 1,
+		background: tints[tint].hex
+	} }, tint)), $[6] = tints, $[7] = t8);
+	let t9;
+	$[8] === t8 ? t9 = $[9] : (t9 = /* @__PURE__ */ jsx("span", {
+		style: t7,
+		children: t8
+	}), $[8] = t8, $[9] = t9);
+	let t10;
+	$[10] !== t4 || $[11] !== t6 || $[12] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
+		as: "span",
+		gap: 2,
+		children: [
+			t4,
+			t6,
+			t9
+		]
+	}), $[10] = t4, $[11] = t6, $[12] = t9, $[13] = t10) : t10 = $[13];
+	let t11;
+	$[14] !== expanded || $[15] !== field.description || $[16] !== onToggle || $[17] !== t10 ? (t11 = /* @__PURE__ */ jsx(Button, {
+		"aria-expanded": expanded,
+		mode: "bleed",
+		onClick: onToggle,
+		padding: 2,
+		title: t3,
+		children: t10
+	}), $[14] = expanded, $[15] = field.description, $[16] = onToggle, $[17] = t10, $[18] = t11) : t11 = $[18];
+	let t12;
+	$[19] !== expanded || $[20] !== field.description || $[21] !== field.key || $[22] !== field.title || $[23] !== hue || $[24] !== onChange ? (t12 = expanded && /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
+		paddingX: 3,
 		children: [
-			/* @__PURE__ */ jsxs(Stack, {
-				flex: 1,
+			/* @__PURE__ */ jsx(Text, {
+				muted: !0,
+				size: 0,
+				children: field.description
+			}),
+			/* @__PURE__ */ jsx(ColorRow, {
+				onChange: (mid) => onChange(field.key, { mid }),
+				title: "Mid",
+				value: hue.mid
+			}),
+			/* @__PURE__ */ jsxs(Flex, {
+				align: "center",
 				gap: 2,
-				children: [/* @__PURE__ */ jsx(Text, {
-					size: 1,
-					weight: "medium",
-					children: field.title
-				}), /* @__PURE__ */ jsx(Text, {
-					muted: !0,
-					size: 0,
-					children: value ?? field.description
+				children: [/* @__PURE__ */ jsxs(Stack, {
+					flex: 1,
+					gap: 2,
+					children: [/* @__PURE__ */ jsx(Text, {
+						size: 1,
+						children: "Mid point"
+					}), /* @__PURE__ */ jsx(Text, {
+						muted: !0,
+						size: 0,
+						children: "The tint the mid color sits at"
+					})]
+				}), /* @__PURE__ */ jsx(Select, {
+					"aria-label": `${field.title} mid point`,
+					fontSize: 1,
+					onChange: (event) => {
+						let value = Number(event.currentTarget.value), midPoint = MID_POINTS.find((candidate) => candidate === value);
+						midPoint !== void 0 && onChange(field.key, { midPoint });
+					},
+					padding: 2,
+					value: hue.midPoint,
+					children: MID_POINTS.map(_temp$1)
 				})]
 			}),
-			value !== void 0 && /* @__PURE__ */ jsx(Button, {
-				icon: CloseIcon,
-				mode: "bleed",
-				onClick: () => onChange(field.key, void 0),
-				padding: 2,
-				title: `Reset ${field.title}`
+			/* @__PURE__ */ jsx(ColorRow, {
+				onChange: (lightest) => onChange(field.key, { lightest }),
+				title: "Lightest",
+				value: hue.lightest
 			}),
-			/* @__PURE__ */ jsx("input", {
-				"aria-label": `${field.title} color`,
-				onChange: (event) => onChange(field.key, event.currentTarget.value),
-				style: swatchStyle,
-				type: "color",
-				value: expandHex(value ?? field.defaultValue)
+			/* @__PURE__ */ jsx(ColorRow, {
+				onChange: (darkest) => onChange(field.key, { darkest }),
+				title: "Darkest",
+				value: hue.darkest
 			})
 		]
-	});
+	}), $[19] = expanded, $[20] = field.description, $[21] = field.key, $[22] = field.title, $[23] = hue, $[24] = onChange, $[25] = t12) : t12 = $[25];
+	let t13;
+	$[26] !== t1 || $[27] !== t11 || $[28] !== t12 || $[29] !== t2 ? (t13 = /* @__PURE__ */ jsxs(Stack, {
+		gap: t1,
+		paddingBottom: t2,
+		children: [t11, t12]
+	}), $[26] = t1, $[27] = t11, $[28] = t12, $[29] = t2, $[30] = t13) : t13 = $[30];
+	let t14;
+	return $[31] !== expanded || $[32] !== t0 || $[33] !== t13 ? (t14 = /* @__PURE__ */ jsx(Card, {
+		border: expanded,
+		radius: 2,
+		tone: t0,
+		children: t13
+	}), $[31] = expanded, $[32] = t0, $[33] = t13, $[34] = t14) : t14 = $[34], t14;
+}
+function _temp$1(midPoint_0) {
+	return /* @__PURE__ */ jsx("option", {
+		value: midPoint_0,
+		children: midPoint_0
+	}, midPoint_0);
+}
+function ColorRow(props) {
+	let $ = c(18), { onChange, title, value } = props, t0;
+	$[0] === title ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: title
+	}), $[0] = title, $[1] = t0);
+	let t1;
+	$[2] === value ? t1 = $[3] : (t1 = /* @__PURE__ */ jsx(Text, {
+		muted: !0,
+		size: 0,
+		children: value
+	}), $[2] = value, $[3] = t1);
+	let t2;
+	$[4] !== t0 || $[5] !== t1 ? (t2 = /* @__PURE__ */ jsxs(Stack, {
+		flex: 1,
+		gap: 2,
+		children: [t0, t1]
+	}), $[4] = t0, $[5] = t1, $[6] = t2) : t2 = $[6];
+	let t3 = `${title} color`, t4;
+	$[7] === onChange ? t4 = $[8] : (t4 = (event) => onChange(event.currentTarget.value), $[7] = onChange, $[8] = t4);
+	let t5;
+	$[9] === value ? t5 = $[10] : (t5 = expandHex(value), $[9] = value, $[10] = t5);
+	let t6;
+	$[11] !== t3 || $[12] !== t4 || $[13] !== t5 ? (t6 = /* @__PURE__ */ jsx(Swatch, {
+		"aria-label": t3,
+		onChange: t4,
+		type: "color",
+		value: t5
+	}), $[11] = t3, $[12] = t4, $[13] = t5, $[14] = t6) : t6 = $[14];
+	let t7;
+	return $[15] !== t2 || $[16] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: 2,
+		children: [t2, t6]
+	}), $[15] = t2, $[16] = t6, $[17] = t7) : t7 = $[17], t7;
 }
+/**
+* Narrow enough to leave the studio preview as much room as possible: it fits
+* the widest picker label next to its swatch, and the code snippet scrolls
+* horizontally rather than widening the sidebar.
+*/
 const sidebarStyle = {
-	width: 360,
+	width: 240,
 	flex: "none",
 	borderLeft: "1px solid var(--card-border-color)",
 	boxSizing: "border-box",
@@ -270,52 +645,69 @@ const sidebarStyle = {
 * @internal
 */
 function ThemerActiveToolLayout(props) {
-	let { open } = useThemer();
-	return /* @__PURE__ */ jsxs(Flex, {
+	let $ = c(9), { open } = useThemer(), t0;
+	$[0] === props ? t0 = $[1] : (t0 = props.renderDefault(props), $[0] = props, $[1] = t0);
+	let t1;
+	$[2] === t0 ? t1 = $[3] : (t1 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		height: "fill",
+		overflow: "auto",
+		children: t0
+	}), $[2] = t0, $[3] = t1);
+	let t2;
+	$[4] === open ? t2 = $[5] : (t2 = open && /* @__PURE__ */ jsx(Layer, {
+		height: "fill",
+		style: sidebarStyle,
+		zOffset: 100,
+		children: /* @__PURE__ */ jsx(ThemerSidebar, {})
+	}), $[4] = open, $[5] = t2);
+	let t3;
+	return $[6] !== t1 || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Flex, {
 		height: "fill",
 		sizing: "border",
-		children: [/* @__PURE__ */ jsx(Box, {
-			flex: 1,
-			height: "fill",
-			overflow: "auto",
-			children: props.renderDefault(props)
-		}), open && /* @__PURE__ */ jsx(Layer, {
-			height: "fill",
-			style: sidebarStyle,
-			zOffset: 100,
-			children: /* @__PURE__ */ jsx(ThemerSidebar, {})
-		})]
-	});
+		children: [t1, t2]
+	}), $[6] = t1, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
+}
+const STORAGE_KEY = "sanityStudio:themer:hues";
+function sanitizeHue(value) {
+	if (!value || typeof value != "object") return null;
+	let mid = Reflect.get(value, "mid"), midPoint = Reflect.get(value, "midPoint"), lightest = Reflect.get(value, "lightest"), darkest = Reflect.get(value, "darkest");
+	return typeof mid != "string" || !isColor(mid) || typeof lightest != "string" || !isColor(lightest) || typeof darkest != "string" || !isColor(darkest) || typeof midPoint != "number" || !MID_POINTS.includes(midPoint) ? null : {
+		mid: mid.toLowerCase(),
+		midPoint,
+		lightest: lightest.toLowerCase(),
+		darkest: darkest.toLowerCase()
+	};
 }
-const STORAGE_KEY = "sanityStudio:themer:colors";
 /**
-* Restores draft colors from localStorage, so theme drafts survive studio
+* Restores draft hues from localStorage, so theme drafts survive studio
 * reloads.
 *
 * @internal
 */
-function readStoredColors() {
+function readStoredHues() {
 	try {
 		if (typeof localStorage > "u") return null;
 		let raw = localStorage.getItem(STORAGE_KEY);
 		if (!raw) return null;
 		let parsed = JSON.parse(raw);
 		if (!parsed || typeof parsed != "object") return null;
-		let colors = {};
-		for (let { key } of THEMER_FIELDS) {
-			let value = Reflect.get(parsed, key);
-			typeof value == "string" && isColor(value) && (colors[key] = value);
+		let hues = {};
+		for (let key of HUE_KEYS) {
+			let hue = sanitizeHue(Reflect.get(parsed, key));
+			if (!hue) return null;
+			hues[key] = hue;
 		}
-		return colors;
+		return hues;
 	} catch {
 		return null;
 	}
 }
 /** @internal */
-function writeStoredColors(colors) {
+function writeStoredHues(hues) {
 	try {
 		if (typeof localStorage > "u") return;
-		colors === null ? localStorage.removeItem(STORAGE_KEY) : localStorage.setItem(STORAGE_KEY, JSON.stringify(colors));
+		hues === null ? localStorage.removeItem(STORAGE_KEY) : localStorage.setItem(STORAGE_KEY, JSON.stringify(hues));
 	} catch {}
 }
 /**
@@ -330,56 +722,92 @@ function writeStoredColors(colors) {
 * @internal
 */
 function ThemerLayout(props) {
-	let { baseColors, ...layoutProps } = props, [open, setOpen] = useState(!1), [colors, setColors] = useState(readStoredColors);
-	useEffect(() => writeStoredColors(colors), [colors]);
-	let theme = useMemo(() => colors === null ? null : createTheme({
-		...baseColors,
-		...colors
-	}), [baseColors, colors]), context = useMemo(() => ({
-		baseColors,
-		colors,
-		setColors,
+	let $ = c(13), { baseHues, ...layoutProps } = props, [open, setOpen] = useState(!1), [hues, setHues] = useState(readStoredHues), t0, t1;
+	$[0] === hues ? (t0 = $[1], t1 = $[2]) : (t0 = () => writeStoredHues(hues), t1 = [hues], $[0] = hues, $[1] = t0, $[2] = t1), useEffect(t0, t1);
+	let t2;
+	$[3] === hues ? t2 = $[4] : (t2 = hues === null ? null : createTheme(hues), $[3] = hues, $[4] = t2);
+	let theme = t2, t3;
+	$[5] !== baseHues || $[6] !== hues || $[7] !== open ? (t3 = {
+		baseHues,
+		hues,
+		setHues,
 		open,
 		setOpen
-	}), [
-		baseColors,
-		colors,
-		open
-	]);
-	return /* @__PURE__ */ jsx(ThemerContext.Provider, {
+	}, $[5] = baseHues, $[6] = hues, $[7] = open, $[8] = t3) : t3 = $[8];
+	let context = t3, t4 = ThemerContext, t5 = theme === null ? layoutProps.renderDefault(layoutProps) : /* @__PURE__ */ jsx(ThemeProvider, {
+		theme,
+		children: layoutProps.renderDefault(layoutProps)
+	}), t6;
+	return $[9] !== context || $[10] !== t4.Provider || $[11] !== t5 ? (t6 = /* @__PURE__ */ jsx(t4.Provider, {
 		value: context,
-		children: theme === null ? layoutProps.renderDefault(layoutProps) : /* @__PURE__ */ jsx(ThemeProvider, {
-			theme,
-			children: layoutProps.renderDefault(layoutProps)
+		children: t5
+	}), $[9] = context, $[10] = t4.Provider, $[11] = t5, $[12] = t6) : t6 = $[12], t6;
+}
+function ThemerNavbarButton() {
+	let $ = c(7), { open, setOpen } = useThemer(), t0;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: "Themer"
+	}), $[0] = t0) : t0 = $[0];
+	let t1;
+	$[1] !== open || $[2] !== setOpen ? (t1 = () => setOpen(!open), $[1] = open, $[2] = setOpen, $[3] = t1) : t1 = $[3];
+	let t2;
+	return $[4] !== open || $[5] !== t1 ? (t2 = /* @__PURE__ */ jsx(Tooltip, {
+		content: t0,
+		portal: !0,
+		children: /* @__PURE__ */ jsx(Button, {
+			"aria-label": "Themer",
+			icon: ColorWheelIcon,
+			mode: "bleed",
+			onClick: t1,
+			padding: 2,
+			selected: open
 		})
-	});
+	}), $[4] = open, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
 }
 /**
 * Adds the toggle that opens and closes the themer sidebar to the Studio
-* navbar.
+* navbar — an icon button with a tooltip in the top bar (like the Tasks
+* toggle), and a regular titled action in the narrow-screen sidebar menu.
 *
 * @internal
 */
 function ThemerNavbar(props) {
-	let { open, setOpen } = useThemer();
-	return props.renderDefault({
-		...props,
-		__internal_actions: [...props.__internal_actions ?? [], {
-			icon: ColorWheelIcon,
-			location: "topbar",
-			name: "themer",
-			onAction: () => setOpen(!open),
-			selected: open,
-			title: "Themer"
-		}]
-	});
+	let $ = c(7), { open, setOpen } = useThemer(), t0;
+	if ($[0] !== open || $[1] !== props || $[2] !== setOpen) {
+		let t1;
+		$[4] !== open || $[5] !== setOpen ? (t1 = () => setOpen(!open), $[4] = open, $[5] = setOpen, $[6] = t1) : t1 = $[6], t0 = props.renderDefault({
+			...props,
+			__internal_actions: [
+				...props.__internal_actions ?? [],
+				{
+					location: "topbar",
+					name: "themer-topbar",
+					render: _temp
+				},
+				{
+					icon: ColorWheelIcon,
+					location: "sidebar",
+					name: "themer-sidebar",
+					onAction: t1,
+					selected: open,
+					title: "Themer"
+				}
+			]
+		}), $[0] = open, $[1] = props, $[2] = setOpen, $[3] = t0;
+	} else t0 = $[3];
+	return t0;
+}
+function _temp() {
+	return /* @__PURE__ */ jsx(ThemerNavbarButton, {});
 }
 /**
-* A Studio plugin that adds a themer sidebar for generating Studio themes:
-* a navbar toggle opens the sidebar next to the active tool, where presets
-* and color pickers preview a `createTheme` theme live on the whole Studio
-* while you browse around. Toggle between light and dark mode with the
-* regular appearance menu — the preview follows it.
+* A Studio plugin that adds a themer sidebar for the legacy Themer themes:
+* a navbar toggle opens the sidebar next to the active tool, where presets,
+* per-hue editors and pasted themer.sanity.build URLs preview a legacy
+* `createTheme` theme live on the whole Studio while you browse around.
+* Toggle between light and dark mode with the regular appearance menu — the
+* preview follows it.
 *
 * ```ts
 * import {themerTool} from '@sanity/themer/tool'
@@ -391,15 +819,19 @@ function ThemerNavbar(props) {
 * })
 * ```
 *
-* @public
+* This is experimental and may change or be removed in any release without
+* notice — use at your own risk.
+*
+* @alpha
 */
 const themerTool = definePlugin((options) => {
-	let baseColors = options?.colors ?? {};
+	let baseHues = applyHues(options?.hues ?? {});
 	function ThemerLayoutWithOptions(props) {
-		return /* @__PURE__ */ jsx(ThemerLayout, {
+		let $ = c(2), t0;
+		return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(ThemerLayout, {
 			...props,
-			baseColors
-		});
+			baseHues
+		}), $[0] = props, $[1] = t0), t0;
 	}
 	return {
 		name: "@sanity/themer/tool",