@sanity/themer 0.3.16 → 0.5.0

package/dist/tool.js

@@ -1,20 +1,33 @@
-import { a as DEFAULT_BACKGROUND_DARK, c as resolveThemeOptions, i as DEFAULT_ACCENT, l as isColor, n as buildTheme, o as DEFAULT_BACKGROUND_LIGHT, r as buildPalette, s as deriveTextColor, t as presets } from "./presets-By3s-D-S.js";
-import { COLOR_TINTS } from "@sanity/color";
+import { a as DEFAULT_BACKGROUND, c as resolveThemeOptions, d as hslToHex, f as relativeLuminance, i as DEFAULT_ACCENT, l as isColor, n as buildTheme, o as SCHEMES, r as buildPalette, s as deriveTextColor, t as presets, u as hexToHsl } from "./presets-CqBgS3A-.js";
 import { c } from "react-compiler-runtime";
-import { definePlugin } from "sanity";
-import { Box, Button, Card, Flex, Grid, Layer, Stack, Text, ThemeProvider } from "@sanity/ui";
-import { createContext, useContext, useEffect, useState } from "react";
-import { ClipboardIcon } from "@sanity/icons/Clipboard";
+import { definePlugin, useColorSchemeValue } from "sanity";
+import { Badge, Box, Button, Card, Dialog, Flex, Layer, Stack, Text, TextInput, ThemeProvider, useRootTheme, useTheme_v2 } from "@sanity/ui";
+import { useActor, useSelector } from "@xstate/react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { assign, not, setup } from "xstate";
+import { styled } from "styled-components";
+import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
 import { CloseIcon } from "@sanity/icons/Close";
+import { CodeBlockIcon } from "@sanity/icons/CodeBlock";
+import { SplitVerticalIcon } from "@sanity/icons/SplitVertical";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { ResetIcon } from "@sanity/icons/Reset";
-import { Code } from "@sanity/ui/code";
+import { TrashIcon } from "@sanity/icons/Trash";
+import { SparklesIcon } from "@sanity/icons/Sparkles";
+import { Tooltip } from "@sanity/ui/tooltip";
+import { ImageIcon } from "@sanity/icons/Image";
 import { useToast } from "@sanity/ui/toast";
+import { AddIcon } from "@sanity/icons/Add";
+import { RestoreIcon } from "@sanity/icons/Restore";
+import { CopyIcon } from "@sanity/icons/Copy";
+import { EditIcon } from "@sanity/icons/Edit";
+import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
+import { Menu, MenuButton, MenuDivider, MenuItem } from "@sanity/ui/menu";
+import { ClipboardIcon } from "@sanity/icons/Clipboard";
+import { Code } from "@sanity/ui/code";
 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";
-import { Tooltip } from "@sanity/ui/tooltip";
 /** @internal */
 const ThemerContext = createContext(null);
 /** @internal */
@@ -25,18 +38,21 @@ function useThemer() {
 }
 /**
 * Reduces theme options to the minimal object that recreates them through
-* `buildTheme`: the text color is dropped when it matches the one derived
-* from the accent, and backgrounds and contrast are dropped when they match
-* the defaults. Options that boil down to the stock Studio theme reduce to
-* `null` — they need nothing from this package.
+* `buildTheme`: in each scheme the accent is dropped when it is the stock
+* one, the text color when it matches the one derived from the accent, and
+* the background and contrast when they match the defaults — and a scheme
+* with nothing left is dropped altogether. Options that boil down to the
+* stock Studio theme reduce to `null` — they need nothing from this package.
 *
 * @internal
 */
 function minimizeOptions(options) {
-	let resolved = resolveThemeOptions(options), minimized = { accent: resolved.accent };
-	resolved.text !== deriveTextColor(resolved.accent) && (minimized.text = resolved.text);
-	let dark = resolved.background.dark === DEFAULT_BACKGROUND_DARK ? null : resolved.background.dark, light = resolved.background.light === DEFAULT_BACKGROUND_LIGHT ? null : resolved.background.light;
-	return (dark !== null || light !== null) && (minimized.background = {}, dark !== null && (minimized.background.dark = dark), light !== null && (minimized.background.light = light)), resolved.contrast !== 85 && (minimized.contrast = resolved.contrast), minimized.accent === DEFAULT_ACCENT && Object.keys(minimized).length === 1 ? null : minimized;
+	let resolved = resolveThemeOptions(options), minimized = {};
+	for (let scheme of SCHEMES) {
+		let values = resolved[scheme], kept = {};
+		values.accent !== DEFAULT_ACCENT && (kept.accent = values.accent), values.text !== deriveTextColor(values.accent) && (kept.text = values.text), values.background !== DEFAULT_BACKGROUND[scheme] && (kept.background = values.background), values.contrast !== 85 && (kept.contrast = values.contrast), Object.keys(kept).length > 0 && (minimized[scheme] = kept);
+	}
+	return Object.keys(minimized).length === 0 ? null : minimized;
 }
 /**
 * Whether two sets of theme options generate the same theme, comparing their
@@ -47,11 +63,1922 @@ function minimizeOptions(options) {
 */
 function sameOptions(a, b) {
 	let left = resolveThemeOptions(a), right = resolveThemeOptions(b);
-	return left.accent === right.accent && left.text === right.text && left.background.dark === right.background.dark && left.background.light === right.background.light && left.contrast === right.contrast;
+	return SCHEMES.every((scheme) => sameScheme(left[scheme], right[scheme]));
+}
+function sameScheme(a, b) {
+	return a.accent === b.accent && a.text === b.text && a.background === b.background && a.contrast === b.contrast;
+}
+/** The slug of the theme the Studio config was generated from @internal */
+const initialThemerState = {
+	active: null,
+	custom: [],
+	removed: []
+};
+/**
+* Resolves the list of themes: the configured theme first, then the presets
+* (minus the ones that would only repeat the configured theme), then the
+* user's own themes. Removed themes are set aside so they can be restored,
+* and the active theme falls back to the configured one when its slug no
+* longer resolves.
+*
+* @internal
+*/
+function resolveThemes(state, baseOptions) {
+	let config = {
+		slug: "config",
+		title: "Studio config",
+		options: baseOptions,
+		source: "config"
+	}, all = [config];
+	for (let preset of presets) sameOptions(preset.options, baseOptions) || all.push({
+		slug: preset.slug,
+		title: preset.title,
+		options: preset.options,
+		source: "preset"
+	});
+	for (let theme of state.custom) all.push({
+		slug: theme.slug,
+		title: theme.title,
+		options: theme.options,
+		source: "custom",
+		...theme.palette ? { palette: theme.palette } : {}
+	});
+	let removedSlugs = new Set(state.removed), themes = all.filter((theme) => !removedSlugs.has(theme.slug));
+	return {
+		themes,
+		removed: all.filter((theme) => removedSlugs.has(theme.slug)),
+		active: themes.find((theme) => theme.slug === state.active) ?? config
+	};
+}
+/**
+* Creates a custom theme with a slug that cannot collide with the presets or
+* the configured theme.
+*
+* @internal
+*/
+function createCustomTheme(title, options, palette) {
+	return {
+		slug: `custom-${randomId()}`,
+		title,
+		options,
+		...palette ? { palette } : {}
+	};
+}
+/** The title of a duplicated theme @internal */
+function duplicateTitle(title) {
+	return `${displayTitle(title)} copy`;
+}
+/** The title to show for a theme, falling back when the user cleared it @internal */
+function displayTitle(title) {
+	return title.trim() || "Untitled theme";
+}
+function randomId() {
+	return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
+}
+function themesOf(context) {
+	return resolveThemes(context, context.baseOptions);
+}
+/**
+* The state of the themer tool: three parallel regions, whether the
+* `sidebar` is open, which `flow` it is in — picking a theme from the `list`,
+* `edit`ing one of the user's own themes, or restoring `removed` ones — and
+* whether the `preview` shows the Studio once (`single`) or in light and dark
+* side by side (`split`). The context carries the persisted state (the
+* applied theme, the user's themes and what was removed) alongside what the
+* flows need.
+*
+* Theme operations are handled in every flow, and the flows leave on their
+* own when they lose their subject: the editor when its theme is removed or
+* deleted, and the removed view when its last theme is restored or deleted.
+*
+* @internal
+*/
+const themerMachine = setup({
+	types: {
+		context: {},
+		events: {},
+		input: {}
+	},
+	guards: {
+		isCustomTheme: ({ context }, params) => themesOf(context).themes.some((theme) => theme.slug === params.slug && theme.source === "custom"),
+		isEditingListedTheme: ({ context }) => context.editing !== null && themesOf(context).themes.some((theme) => theme.slug === context.editing?.slug && theme.source === "custom"),
+		hasRemovedThemes: ({ context }) => themesOf(context).removed.length > 0
+	},
+	actions: {
+		pick: assign((_, params) => ({ active: params.slug === "config" ? null : params.slug })),
+		add: assign(({ context }, params) => {
+			let theme = createCustomTheme(params.title ?? "Untitled theme", params.options ?? themesOf(context).active.options, params.palette);
+			return {
+				active: theme.slug,
+				custom: [...context.custom, theme],
+				editing: {
+					slug: theme.slug,
+					focusTitle: params.title === void 0
+				},
+				images: params.imageUrl ? {
+					...context.images,
+					[theme.slug]: params.imageUrl
+				} : context.images
+			};
+		}),
+		duplicate: assign(({ context }, params) => {
+			let { themes, removed } = themesOf(context), source = [...themes, ...removed].find((theme) => theme.slug === params.slug);
+			if (!source) return {};
+			let theme = createCustomTheme(duplicateTitle(source.title), source.options, source.palette);
+			return {
+				active: theme.slug,
+				custom: [...context.custom, theme],
+				editing: {
+					slug: theme.slug,
+					focusTitle: !0
+				}
+			};
+		}),
+		startEditing: assign((_, params) => ({
+			active: params.slug,
+			editing: {
+				slug: params.slug,
+				focusTitle: !1
+			}
+		})),
+		stopEditing: assign({ editing: null }),
+		update: assign(({ context }, params) => ({
+			custom: context.custom.map((theme) => theme.slug === params.slug ? {
+				...theme,
+				title: params.title ?? theme.title,
+				options: params.options ?? theme.options,
+				...params.palette ? { palette: params.palette } : {}
+			} : theme),
+			images: params.imageUrl && context.custom.some((theme) => theme.slug === params.slug) ? {
+				...context.images,
+				[params.slug]: params.imageUrl
+			} : context.images
+		})),
+		remove: assign(({ context }, params) => params.slug === "config" || context.removed.includes(params.slug) ? {} : {
+			active: context.active === params.slug ? null : context.active,
+			removed: [...context.removed, params.slug]
+		}),
+		restore: assign(({ context }, params) => ({ removed: context.removed.filter((slug) => slug !== params.slug) })),
+		delete: assign(({ context }, params) => {
+			if (!context.custom.some((theme) => theme.slug === params.slug)) return {};
+			let { [params.slug]: _deleted, ...images } = context.images;
+			return {
+				active: context.active === params.slug ? null : context.active,
+				custom: context.custom.filter((theme) => theme.slug !== params.slug),
+				removed: context.removed.filter((slug) => slug !== params.slug),
+				images
+			};
+		})
+	}
+}).createMachine({
+	id: "themer",
+	context: ({ input }) => ({
+		...input.stored,
+		baseOptions: input.baseOptions,
+		editing: null,
+		images: {}
+	}),
+	type: "parallel",
+	states: {
+		sidebar: {
+			initial: "closed",
+			states: {
+				closed: { on: { "sidebar.toggle": "open" } },
+				open: { on: {
+					"sidebar.toggle": "closed",
+					"sidebar.close": "closed"
+				} }
+			}
+		},
+		preview: {
+			initial: "single",
+			states: {
+				single: { on: { "preview.toggle": "split" } },
+				split: { on: { "preview.toggle": "single" } }
+			}
+		},
+		flow: {
+			initial: "list",
+			on: {
+				"theme.pick": { actions: {
+					type: "pick",
+					params: ({ event }) => ({ slug: event.slug })
+				} },
+				"theme.add": {
+					target: ".edit",
+					actions: {
+						type: "add",
+						params: ({ event }) => ({
+							title: event.title,
+							options: event.options,
+							palette: event.palette,
+							imageUrl: event.imageUrl
+						})
+					}
+				},
+				"theme.duplicate": {
+					target: ".edit",
+					actions: {
+						type: "duplicate",
+						params: ({ event }) => ({ slug: event.slug })
+					}
+				},
+				"theme.edit": {
+					target: ".edit",
+					guard: {
+						type: "isCustomTheme",
+						params: ({ event }) => ({ slug: event.slug })
+					},
+					actions: {
+						type: "startEditing",
+						params: ({ event }) => ({ slug: event.slug })
+					}
+				},
+				"theme.update": { actions: {
+					type: "update",
+					params: ({ event }) => ({
+						slug: event.slug,
+						title: event.title,
+						options: event.options,
+						palette: event.palette,
+						imageUrl: event.imageUrl
+					})
+				} },
+				"theme.remove": { actions: {
+					type: "remove",
+					params: ({ event }) => ({ slug: event.slug })
+				} },
+				"theme.restore": { actions: {
+					type: "restore",
+					params: ({ event }) => ({ slug: event.slug })
+				} },
+				"theme.delete": { actions: {
+					type: "delete",
+					params: ({ event }) => ({ slug: event.slug })
+				} },
+				"flow.list": ".list",
+				"flow.removed": {
+					target: ".removed",
+					guard: "hasRemovedThemes"
+				}
+			},
+			states: {
+				list: {},
+				edit: {
+					exit: "stopEditing",
+					always: {
+						guard: not("isEditingListedTheme"),
+						target: "list"
+					}
+				},
+				removed: { always: {
+					guard: not("hasRemovedThemes"),
+					target: "list"
+				} }
+			}
+		}
+	}
+});
+/** The part of the machine context that is persisted between sessions @internal */
+function selectStoredState(snapshot) {
+	let { active, custom, removed } = snapshot.context;
+	return {
+		active,
+		custom,
+		removed
+	};
+}
+const Root$2 = styled(Box).withConfig({
+	displayName: "Root",
+	componentId: "sc-6lslk9-0"
+})`scrollbar-gutter:stable;`, ScrollAreaInsetContext = createContext({
+	left: 0,
+	right: 0,
+	bottom: 0
+});
+/**
+* The scrolling body of a sidebar flow. It always reserves the scrollbar's
+* space, so the content does not shift when the list grows or shrinks past
+* the point where it needs to scroll — and it takes that space out of its
+* right padding, so the content stays centered rather than hugging the left.
+* With overlay scrollbars there is no gutter and the padding stays even.
+*
+* @internal
+*/
+function ScrollArea(props) {
+	let $ = c(15), { children, padding } = props, { space } = useTheme_v2(), ref = useRef(null), [gutter, setGutter] = useState(0), t0, t1;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
+		let element = ref.current;
+		if (!element) return;
+		let measure = () => setGutter(element.offsetWidth - element.clientWidth);
+		measure();
+		let observer = new ResizeObserver(measure);
+		return observer.observe(element), () => observer.disconnect();
+	}, t1 = [], $[0] = t0, $[1] = t1) : (t0 = $[0], t1 = $[1]), useEffect(t0, t1);
+	let t2 = space[padding], t3 = Math.max(0, space[padding] - gutter), t4 = space[padding], t5;
+	$[2] !== t2 || $[3] !== t3 || $[4] !== t4 ? (t5 = {
+		left: t2,
+		right: t3,
+		bottom: t4
+	}, $[2] = t2, $[3] = t3, $[4] = t4, $[5] = t5) : t5 = $[5];
+	let inset = t5, t6;
+	$[6] === inset.right ? t6 = $[7] : (t6 = { paddingRight: inset.right }, $[6] = inset.right, $[7] = t6);
+	let t7;
+	$[8] !== children || $[9] !== inset ? (t7 = /* @__PURE__ */ jsx(ScrollAreaInsetContext.Provider, {
+		value: inset,
+		children
+	}), $[8] = children, $[9] = inset, $[10] = t7) : t7 = $[10];
+	let t8;
+	return $[11] !== padding || $[12] !== t6 || $[13] !== t7 ? (t8 = /* @__PURE__ */ jsx(Root$2, {
+		flex: 1,
+		overflow: "auto",
+		padding,
+		ref,
+		style: t6,
+		children: t7
+	}), $[11] = padding, $[12] = t6, $[13] = t7, $[14] = t8) : t8 = $[14], t8;
+}
+/**
+* Content that runs edge to edge in a scroll area — up to the scrollbar —
+* instead of sitting inside its padding. It goes last: it runs down to the
+* bottom edge too.
+*
+* @internal
+*/
+function ScrollAreaBleed(props) {
+	let $ = c(7), { left, right, bottom } = useContext(ScrollAreaInsetContext), t0 = -left, t1 = -right, t2 = -bottom, t3;
+	$[0] !== t0 || $[1] !== t1 || $[2] !== t2 ? (t3 = {
+		marginLeft: t0,
+		marginRight: t1,
+		marginBottom: t2
+	}, $[0] = t0, $[1] = t1, $[2] = t2, $[3] = t3) : t3 = $[3];
+	let t4;
+	return $[4] !== props.children || $[5] !== t3 ? (t4 = /* @__PURE__ */ jsx("div", {
+		style: t3,
+		children: props.children
+	}), $[4] = props.children, $[5] = t3, $[6] = t4) : t4 = $[6], t4;
+}
+/**
+* The dark scheme covers the right side of the preview behind a diagonal cut,
+* like the "Auto" appearance preview in macOS System Settings shows both
+* schemes at once.
+*/
+const Root$1 = styled.div.withConfig({
+	displayName: "Root",
+	componentId: "sc-w55yz9-0"
+})`position:relative;aspect-ratio:16 / 9;overflow:hidden;`, LIST_ROWS = [
+	"62%",
+	"46%",
+	"70%",
+	"52%"
+], FIELDS = ["32%", "24%"];
+/**
+* A tiny, lo-fi mockup of a Studio in the given theme — the navbar over the
+* structure tool with a list of documents on the left and a document form on
+* the right — in both color schemes at once: the light scheme on the left and
+* the dark scheme on the right, split diagonally. It only paints colors the
+* theme options change (backgrounds, text, borders, the accent) so that a
+* glance shows what the theme does to the Studio — with few and bold enough
+* elements to still read when scaled down to a thumbnail.
+*
+* @internal
+*/
+function ThemePreview(props) {
+	let $ = c(11), { options } = props, t0;
+	$[0] === options ? t0 = $[1] : (t0 = buildTheme(options), $[0] = options, $[1] = t0);
+	let theme = t0, t1;
+	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(MockStudio, {}), $[2] = t1) : t1 = $[2];
+	let t2;
+	$[3] === theme ? t2 = $[4] : (t2 = /* @__PURE__ */ jsx(ThemeProvider, {
+		scheme: "light",
+		theme,
+		tone: "default",
+		children: t1
+	}), $[3] = theme, $[4] = t2);
+	let t3;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsx(MockStudio, { style: { clipPath: "polygon(58% 0, 100% 0, 100% 100%, 42% 100%)" } }), $[5] = t3) : t3 = $[5];
+	let t4;
+	$[6] === theme ? t4 = $[7] : (t4 = /* @__PURE__ */ jsx(ThemeProvider, {
+		scheme: "dark",
+		theme,
+		tone: "default",
+		children: t3
+	}), $[6] = theme, $[7] = t4);
+	let t5;
+	return $[8] !== t2 || $[9] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Root$1, {
+		"aria-hidden": !0,
+		children: [t2, t4]
+	}), $[8] = t2, $[9] = t4, $[10] = t5) : t5 = $[10], t5;
+}
+function MockStudio(props) {
+	let $ = c(53), { color } = useTheme_v2(), primary = color.button.default.primary.enabled, selected = color.selectable.default.selected, input = color.input.default.enabled, border = `1px solid ${color.border}`, line = _temp$4, t0;
+	$[0] !== color.bg || $[1] !== props.style ? (t0 = {
+		position: "absolute",
+		inset: 0,
+		display: "flex",
+		flexDirection: "column",
+		background: color.bg,
+		...props.style
+	}, $[0] = color.bg, $[1] = props.style, $[2] = t0) : t0 = $[2];
+	let t1;
+	$[3] === border ? t1 = $[4] : (t1 = {
+		flex: "none",
+		display: "flex",
+		alignItems: "center",
+		gap: 5,
+		height: "18%",
+		padding: "0 5%",
+		borderBottom: border
+	}, $[3] = border, $[4] = t1);
+	let t2;
+	$[5] === primary.bg ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx("div", { style: {
+		flex: "none",
+		width: 8,
+		height: 8,
+		borderRadius: 2,
+		background: primary.bg
+	} }), $[5] = primary.bg, $[6] = t2);
+	let t3;
+	$[7] === color.fg ? t3 = $[8] : (t3 = /* @__PURE__ */ jsx("div", { style: line("22%", color.fg) }), $[7] = color.fg, $[8] = t3);
+	let t4;
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx("div", { style: { flex: 1 } }), $[9] = t4) : t4 = $[9];
+	let t5;
+	$[10] === color.avatar.blue.bg ? t5 = $[11] : (t5 = /* @__PURE__ */ jsx("div", { style: {
+		flex: "none",
+		width: 8,
+		height: 8,
+		borderRadius: "50%",
+		background: color.avatar.blue.bg
+	} }), $[10] = color.avatar.blue.bg, $[11] = t5);
+	let t6;
+	$[12] !== t1 || $[13] !== t2 || $[14] !== t3 || $[15] !== t5 ? (t6 = /* @__PURE__ */ jsxs("div", {
+		style: t1,
+		children: [
+			t2,
+			t3,
+			t4,
+			t5
+		]
+	}), $[12] = t1, $[13] = t2, $[14] = t3, $[15] = t5, $[16] = t6) : t6 = $[16];
+	let t7;
+	$[17] === Symbol.for("react.memo_cache_sentinel") ? (t7 = {
+		flex: 1,
+		display: "flex",
+		minHeight: 0
+	}, $[17] = t7) : t7 = $[17];
+	let t8;
+	$[18] === border ? t8 = $[19] : (t8 = {
+		flex: "none",
+		display: "flex",
+		flexDirection: "column",
+		width: "36%",
+		borderRight: border
+	}, $[18] = border, $[19] = t8);
+	let t9;
+	$[20] !== color.muted || $[21] !== selected ? (t9 = LIST_ROWS.map((width_0, index) => {
+		let isSelected = index === 1;
+		return /* @__PURE__ */ jsx("div", {
+			style: {
+				flex: "none",
+				display: "flex",
+				alignItems: "center",
+				height: "18%",
+				padding: "0 9%",
+				background: isSelected ? selected.bg : void 0
+			},
+			children: /* @__PURE__ */ jsx("div", { style: line(width_0, isSelected ? selected.fg : color.muted.fg) })
+		}, width_0);
+	}), $[20] = color.muted, $[21] = selected, $[22] = t9) : t9 = $[22];
+	let t10;
+	$[23] !== t8 || $[24] !== t9 ? (t10 = /* @__PURE__ */ jsx("div", {
+		style: t8,
+		children: t9
+	}), $[23] = t8, $[24] = t9, $[25] = t10) : t10 = $[25];
+	let t11, t12;
+	$[26] === Symbol.for("react.memo_cache_sentinel") ? (t11 = {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		minWidth: 0
+	}, t12 = {
+		flex: 1,
+		display: "flex",
+		flexDirection: "column",
+		gap: 7,
+		padding: "9% 8% 0",
+		minHeight: 0,
+		overflow: "hidden"
+	}, $[26] = t11, $[27] = t12) : (t11 = $[26], t12 = $[27]);
+	let t13;
+	$[28] === color.fg ? t13 = $[29] : (t13 = /* @__PURE__ */ jsx("div", { style: line("45%", color.fg) }), $[28] = color.fg, $[29] = t13);
+	let t14;
+	$[30] !== color.muted || $[31] !== input ? (t14 = FIELDS.map((width_1) => /* @__PURE__ */ jsxs("div", {
+		style: {
+			flex: "none",
+			display: "flex",
+			flexDirection: "column",
+			gap: 3
+		},
+		children: [/* @__PURE__ */ jsx("div", { style: line(width_1, color.muted.fg) }), /* @__PURE__ */ jsx("div", { style: {
+			height: 12,
+			borderRadius: 3,
+			background: input.bg,
+			boxShadow: `inset 0 0 0 1px ${input.border}`
+		} })]
+	}, width_1)), $[30] = color.muted, $[31] = input, $[32] = t14) : t14 = $[32];
+	let t15;
+	$[33] !== t13 || $[34] !== t14 ? (t15 = /* @__PURE__ */ jsxs("div", {
+		style: t12,
+		children: [t13, t14]
+	}), $[33] = t13, $[34] = t14, $[35] = t15) : t15 = $[35];
+	let t16;
+	$[36] === border ? t16 = $[37] : (t16 = {
+		flex: "none",
+		display: "flex",
+		alignItems: "center",
+		justifyContent: "flex-end",
+		height: "20%",
+		padding: "0 8%",
+		borderTop: border
+	}, $[36] = border, $[37] = t16);
+	let t17;
+	$[38] === primary.bg ? t17 = $[39] : (t17 = /* @__PURE__ */ jsx("div", { style: {
+		width: "32%",
+		height: "50%",
+		borderRadius: 3,
+		background: primary.bg
+	} }), $[38] = primary.bg, $[39] = t17);
+	let t18;
+	$[40] !== t16 || $[41] !== t17 ? (t18 = /* @__PURE__ */ jsx("div", {
+		style: t16,
+		children: t17
+	}), $[40] = t16, $[41] = t17, $[42] = t18) : t18 = $[42];
+	let t19;
+	$[43] !== t15 || $[44] !== t18 ? (t19 = /* @__PURE__ */ jsxs("div", {
+		style: t11,
+		children: [t15, t18]
+	}), $[43] = t15, $[44] = t18, $[45] = t19) : t19 = $[45];
+	let t20;
+	$[46] !== t10 || $[47] !== t19 ? (t20 = /* @__PURE__ */ jsxs("div", {
+		style: t7,
+		children: [t10, t19]
+	}), $[46] = t10, $[47] = t19, $[48] = t20) : t20 = $[48];
+	let t21;
+	return $[49] !== t0 || $[50] !== t20 || $[51] !== t6 ? (t21 = /* @__PURE__ */ jsxs("div", {
+		style: t0,
+		children: [t6, t20]
+	}), $[49] = t0, $[50] = t20, $[51] = t6, $[52] = t21) : t21 = $[52], t21;
+}
+function _temp$4(width, background) {
+	return {
+		flex: "none",
+		width,
+		height: 4,
+		borderRadius: 2,
+		background
+	};
+}
+/**
+* The floating preview card of a theme: the lo-fi studio mockup on a raised,
+* rounded card, like the appearance previews in macOS System Settings.
+*
+* @internal
+*/
+function ThemeThumbnail(props) {
+	let $ = c(2), t0;
+	return $[0] === props.options ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Card, {
+		overflow: "hidden",
+		radius: 3,
+		shadow: 1,
+		children: /* @__PURE__ */ jsx(ThemePreview, { options: props.options })
+	}), $[0] = props.options, $[1] = t0), t0;
+}
+/**
+* The flow for restoring removed themes: the presets and custom themes the
+* user took out of the list, each with a button to put it back — and, for
+* custom themes, one to delete it for good. The machine leaves the flow once
+* the last one is gone.
+*
+* @internal
+*/
+function RemovedThemes() {
+	let $ = c(7), { removed, send } = useThemer(), t0;
+	if ($[0] !== removed || $[1] !== send) {
+		let t1;
+		$[3] === send ? t1 = $[4] : (t1 = (theme) => /* @__PURE__ */ jsxs(Stack, {
+			gap: 3,
+			children: [
+				/* @__PURE__ */ jsx(Box, {
+					style: { opacity: .6 },
+					children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: theme.options })
+				}),
+				/* @__PURE__ */ jsx(Text, {
+					align: "center",
+					size: 1,
+					textOverflow: "ellipsis",
+					children: displayTitle(theme.title)
+				}),
+				/* @__PURE__ */ jsxs(Flex, {
+					gap: 2,
+					justify: "center",
+					children: [/* @__PURE__ */ jsx(Button, {
+						fontSize: 1,
+						mode: "ghost",
+						onClick: () => send({
+							type: "theme.restore",
+							slug: theme.slug
+						}),
+						padding: 2,
+						text: "Restore"
+					}), theme.source === "custom" && /* @__PURE__ */ jsx(Button, {
+						fontSize: 1,
+						mode: "ghost",
+						onClick: () => send({
+							type: "theme.delete",
+							slug: theme.slug
+						}),
+						padding: 2,
+						text: "Delete",
+						tone: "critical"
+					})]
+				})
+			]
+		}, theme.slug), $[3] = send, $[4] = t1), t0 = removed.map(t1), $[0] = removed, $[1] = send, $[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	return $[5] === t0 ? t1 = $[6] : (t1 = /* @__PURE__ */ jsx(ScrollArea, {
+		padding: 3,
+		children: /* @__PURE__ */ jsx(Stack, {
+			gap: 5,
+			children: t0
+		})
+	}), $[5] = t0, $[6] = t1), t1;
+}
+/** @internal */
+const IMAGE_PALETTE_KEYS = [
+	"vibrant",
+	"lightVibrant",
+	"darkVibrant",
+	"muted",
+	"lightMuted",
+	"darkMuted",
+	"dominant"
+], IMAGE_PALETTE_VARIANTS = [
+	"muted",
+	"vibrant",
+	"lightMuted",
+	"lightVibrant",
+	"darkMuted",
+	"darkVibrant"
+], IMAGE_PALETTE_TITLES = {
+	dominant: "Dominant",
+	vibrant: "Vibrant",
+	lightVibrant: "Light vibrant",
+	darkVibrant: "Dark vibrant",
+	muted: "Muted",
+	lightMuted: "Light muted",
+	darkMuted: "Dark muted"
+}, TARGETS = [
+	["vibrant", {
+		lightness: [
+			.5,
+			.3,
+			.7
+		],
+		saturation: [
+			1,
+			.35,
+			1
+		]
+	}],
+	["lightVibrant", {
+		lightness: [
+			.74,
+			.55,
+			1
+		],
+		saturation: [
+			1,
+			.35,
+			1
+		]
+	}],
+	["darkVibrant", {
+		lightness: [
+			.26,
+			0,
+			.45
+		],
+		saturation: [
+			1,
+			.35,
+			1
+		]
+	}],
+	["muted", {
+		lightness: [
+			.5,
+			.3,
+			.7
+		],
+		saturation: [
+			.3,
+			0,
+			.4
+		]
+	}],
+	["lightMuted", {
+		lightness: [
+			.74,
+			.55,
+			1
+		],
+		saturation: [
+			.3,
+			0,
+			.4
+		]
+	}],
+	["darkMuted", {
+		lightness: [
+			.26,
+			0,
+			.45
+		],
+		saturation: [
+			.3,
+			0,
+			.4
+		]
+	}]
+];
+/**
+* Extracts the color palette of an image from its pixels, the way the Vibrant
+* algorithm does: the colors are quantized into a coarse histogram, and each
+* swatch claims the color that comes closest to its target lightness and
+* saturation — weighted by how much of the image it covers — that no other
+* swatch has claimed yet. The dominant swatch is simply the most common
+* color. Runs anywhere pixels come from, so it can run on device.
+*
+* @internal
+*/
+function extractImagePalette(pixels) {
+	let candidates = quantize(pixels), palette = {
+		dominant: null,
+		vibrant: null,
+		lightVibrant: null,
+		darkVibrant: null,
+		muted: null,
+		lightMuted: null,
+		darkMuted: null
+	};
+	if (candidates.length === 0) return palette;
+	let maximumPopulation = Math.max(...candidates.map((candidate) => candidate.population)), claimed = /* @__PURE__ */ new Set();
+	for (let [key, target] of TARGETS) {
+		let best = null, bestScore = -Infinity;
+		for (let candidate of candidates) {
+			if (claimed.has(candidate.hex) || !matchesTarget(candidate, target)) continue;
+			let score = scoreCandidate(candidate, target, maximumPopulation);
+			score > bestScore && (best = candidate, bestScore = score);
+		}
+		best && (palette[key] = best.hex, claimed.add(best.hex));
+	}
+	return palette.dominant = candidates.reduce((most, candidate) => candidate.population > most.population ? candidate : most).hex, palette;
+}
+/**
+* Turns the pixels into a histogram of quantized colors, each averaged over
+* the pixels it stands for, leaving out transparent pixels and the near-black
+* and near-white ones that are backdrop rather than color.
+*/
+function quantize(pixels) {
+	let { data } = pixels, buckets = /* @__PURE__ */ new Map(), length = Math.min(data.length, pixels.width * pixels.height * 4);
+	for (let offset = 0; offset + 3 < length; offset += 4) {
+		let r = data[offset], g = data[offset + 1], b = data[offset + 2];
+		if (data[offset + 3] < 125) continue;
+		let lightness = (Math.max(r, g, b) + Math.min(r, g, b)) / 510;
+		if (lightness < .05 || lightness > .95) continue;
+		let key = r >> 3 << 10 | g >> 3 << 5 | b >> 3, bucket = buckets.get(key);
+		bucket ? (bucket.count++, bucket.r += r, bucket.g += g, bucket.b += b) : buckets.set(key, {
+			count: 1,
+			r,
+			g,
+			b
+		});
+	}
+	let candidates = [];
+	for (let bucket of buckets.values()) {
+		let r = Math.round(bucket.r / bucket.count), g = Math.round(bucket.g / bucket.count), b = Math.round(bucket.b / bucket.count), { saturation, lightness } = saturationAndLightness(r, g, b);
+		candidates.push({
+			hex: rgbToHex(r, g, b),
+			population: bucket.count,
+			saturation,
+			lightness
+		});
+	}
+	return candidates;
+}
+function matchesTarget(candidate, target) {
+	return candidate.lightness >= target.lightness[1] && candidate.lightness <= target.lightness[2] && candidate.saturation >= target.saturation[1] && candidate.saturation <= target.saturation[2];
+}
+function scoreCandidate(candidate, target, maximumPopulation) {
+	return 3 * (1 - Math.abs(candidate.saturation - target.saturation[0])) + 6.5 * (1 - Math.abs(candidate.lightness - target.lightness[0])) + .5 * (candidate.population / maximumPopulation);
+}
+function saturationAndLightness(r, g, b) {
+	let max = Math.max(r, g, b) / 255, min = Math.min(r, g, b) / 255, lightness = (max + min) / 2, delta = max - min;
+	return {
+		saturation: delta === 0 ? 0 : lightness > .5 ? delta / (2 - max - min) : delta / (max + min),
+		lightness
+	};
+}
+function rgbToHex(r, g, b) {
+	return `#${[
+		r,
+		g,
+		b
+	].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+}
+/** Reads `#rgb` and `#rrggbb` alike — stored palettes may hold either */
+function hexToRgb(hex) {
+	let expanded = hex.length === 4 ? `${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex.slice(1);
+	return [
+		parseInt(expanded.slice(0, 2), 16),
+		parseInt(expanded.slice(2, 4), 16),
+		parseInt(expanded.slice(4, 6), 16)
+	];
+}
+/** Mixes `amount` of `color` into `base` */
+function tint(base, color, amount) {
+	let [r1, g1, b1] = hexToRgb(base), [r2, g2, b2] = hexToRgb(color);
+	return rgbToHex(Math.round(r1 + (r2 - r1) * amount), Math.round(g1 + (g2 - g1) * amount), Math.round(b1 + (b2 - b1) * amount));
+}
+/** How much of the palette tints each scheme's stock background */
+const BACKGROUND_TINT = {
+	light: .08,
+	dark: .3
+}, BUTTON_LABEL = {
+	light: "#ffffff",
+	dark: "#000000"
+}, ACCENT_LIGHTNESS_STEP = .01;
+function contrastRatio(a, b) {
+	let [lighter, darker] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x);
+	return (lighter + .05) / (darker + .05);
+}
+/**
+* Makes an accent readable as a button in the given scheme: a light scheme
+* accent is darkened until white text on it reaches AA contrast, a dark
+* scheme accent lightened until black text does — as far as the accent's
+* hue and saturation allow. Accents that already pass come back untouched.
+*
+* @internal
+*/
+function readableAccent(hex, scheme) {
+	let label = BUTTON_LABEL[scheme], { h, s } = hexToHsl(hex), { l } = hexToHsl(hex), current = hex;
+	for (; contrastRatio(current, label) < 4.5;) {
+		let next = scheme === "light" ? l - ACCENT_LIGHTNESS_STEP : l + ACCENT_LIGHTNESS_STEP;
+		if (next < 0 || next > 1) break;
+		l = next, current = hslToHex({
+			h,
+			s,
+			l
+		});
+	}
+	return current;
+}
+/** The accent a variant gives a scheme, made readable on a button */
+function variantAccent(palette, variant, scheme) {
+	let swatch = (variant ? palette[variant] : null) ?? palette.vibrant ?? (scheme === "light" ? palette.darkVibrant : palette.lightVibrant) ?? palette.dominant;
+	return swatch === null ? null : readableAccent(swatch, scheme);
+}
+/**
+* Derives theme options from an image palette: the accent of both schemes is
+* the swatch of the chosen variant — or, without one, the vibrant swatch,
+* each scheme falling back to the vibrant swatch of its own end of the scale —
+* adjusted until it is readable as a button. The muted swatch becomes the text color, and the light and dark muted
+* swatches tint the stock backgrounds of their scheme — enough to carry the
+* image's tone without giving up a usable canvas. Whatever the palette lacks
+* stays at the theme defaults.
+*
+* @internal
+*/
+function optionsFromImagePalette(palette, variant) {
+	let options = {}, light = schemeFromPalette(variantAccent(palette, variant ?? null, "light"), palette.muted ?? palette.darkMuted, palette.lightMuted ?? palette.muted ?? palette.lightVibrant, "light"), dark = schemeFromPalette(variantAccent(palette, variant ?? null, "dark"), palette.muted ?? palette.lightMuted, palette.darkMuted ?? palette.muted ?? palette.darkVibrant, "dark");
+	return light && (options.light = light), dark && (options.dark = dark), options;
+}
+function schemeFromPalette(accent, text, backgroundTint, scheme) {
+	let options = {};
+	return accent && (options.accent = accent), text && (options.text = text), backgroundTint && (options.background = tint(DEFAULT_BACKGROUND[scheme], backgroundTint, BACKGROUND_TINT[scheme])), Object.keys(options).length > 0 ? options : null;
+}
+/**
+* Applies an image palette to existing theme options: the colors the palette
+* provides replace the current ones scheme by scheme, and whatever it does
+* not touch — like the contrast — stays as it is.
+*
+* @internal
+*/
+function applyImagePalette(options, palette, variant) {
+	let derived = optionsFromImagePalette(palette, variant), next = { ...options };
+	for (let scheme of SCHEMES) derived[scheme] && (next[scheme] = {
+		...options[scheme],
+		...derived[scheme]
+	});
+	return next;
+}
+/**
+* The variant a theme is built around: the one whose swatch is the theme's
+* accent, or `null` when the accent comes from somewhere else.
+*
+* @internal
+*/
+function currentImageVariant(options, palette) {
+	let accent = options.light?.accent;
+	return accent ? IMAGE_PALETTE_VARIANTS.find((variant) => palette[variant] !== null && variantAccent(palette, variant, "light") === accent) ?? null : null;
+}
+/**
+* How much a swatch has going for it as an accent: saturation first, then
+* closeness to mid lightness — the range where an accent reads best.
+*/
+function interest(hex) {
+	let { s, l } = hexToHsl(hex);
+	return .1 + .55 * s + .35 * (1 - Math.abs(l - .5) * 2);
+}
+/**
+* Picks a variant for the "I'm feeling lucky" button: a random one, weighted
+* by how interesting its swatch is as an accent, and never the one the theme
+* already uses while there are others to pick from.
+*
+* @internal
+*/
+function pickLuckyVariant(palette, options = {}) {
+	let { exclude = null, random = Math.random } = options, candidates = IMAGE_PALETTE_VARIANTS.filter((variant) => palette[variant] !== null);
+	if (candidates.length > 1 && (candidates = candidates.filter((variant) => variant !== exclude)), candidates.length === 0) return null;
+	let weights = candidates.map((variant) => interest(palette[variant])), total = weights.reduce((sum, weight) => sum + weight, 0), pick = random() * total;
+	for (let [index, variant] of candidates.entries()) if (pick -= weights[index], pick < 0) return variant;
+	return candidates.at(-1) ?? null;
+}
+/** A theme title for the image a palette came from, e.g. `sunset-beach.jpg` → `sunset beach` @internal */
+function titleFromFileName(name) {
+	return name.replace(/\.[^.]+$/, "").replace(/[-_]+/g, " ").trim() || "Image theme";
+}
+/**
+* A button with an animated tooltip instead of a `title` attribute. Icon-only
+* buttons take the tooltip as their accessible name.
+*
+* @internal
+*/
+function TooltipButton(props) {
+	let $ = c(11), buttonProps, tooltip;
+	$[0] === props ? (buttonProps = $[1], tooltip = $[2]) : ({tooltip, ...buttonProps} = props, $[0] = props, $[1] = buttonProps, $[2] = tooltip);
+	let t0;
+	$[3] === tooltip ? t0 = $[4] : (t0 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: tooltip
+	}), $[3] = tooltip, $[4] = t0);
+	let t1 = buttonProps.text === void 0 ? tooltip : void 0, t2;
+	$[5] !== buttonProps || $[6] !== t1 ? (t2 = /* @__PURE__ */ jsx(Button, {
+		"aria-label": t1,
+		...buttonProps
+	}), $[5] = buttonProps, $[6] = t1, $[7] = t2) : t2 = $[7];
+	let t3;
+	return $[8] !== t0 || $[9] !== t2 ? (t3 = /* @__PURE__ */ jsx(Tooltip, {
+		animate: !0,
+		content: t0,
+		placement: "bottom",
+		portal: !0,
+		children: t2
+	}), $[8] = t0, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
+}
+/**
+* A button that opens the file picker for an image, and hands the chosen file
+* over — the picker is a hidden file input, so nothing is uploaded anywhere.
+*
+* @internal
+*/
+function ImageFileButton(props) {
+	let $ = c(11), buttonProps, onFile;
+	$[0] === props ? (buttonProps = $[1], onFile = $[2]) : ({onFile, ...buttonProps} = props, $[0] = props, $[1] = buttonProps, $[2] = onFile);
+	let inputRef = useRef(null), t0;
+	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => inputRef.current?.click(), $[3] = t0) : t0 = $[3];
+	let t1;
+	$[4] === buttonProps ? t1 = $[5] : (t1 = /* @__PURE__ */ jsx(TooltipButton, {
+		...buttonProps,
+		icon: ImageIcon,
+		onClick: t0
+	}), $[4] = buttonProps, $[5] = t1);
+	let t2;
+	$[6] === onFile ? t2 = $[7] : (t2 = /* @__PURE__ */ jsx("input", {
+		accept: "image/*",
+		hidden: !0,
+		onChange: (event) => {
+			let file = event.currentTarget.files?.[0];
+			event.currentTarget.value = "", file && onFile(file);
+		},
+		ref: inputRef,
+		type: "file"
+	}), $[6] = onFile, $[7] = t2);
+	let t3;
+	return $[8] !== t1 || $[9] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] }), $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
+}
+/**
+* Reads the pixels of an image file on device: the image is decoded, drawn
+* onto a small canvas and read back, so nothing leaves the browser.
+*
+* @internal
+*/
+async function readImagePixels(file) {
+	let image = await decodeImage(file);
+	try {
+		let scale = Math.min(1, 96 / Math.max(image.width, image.height)), width = Math.max(1, Math.round(image.width * scale)), height = Math.max(1, Math.round(image.height * scale)), canvas = document.createElement("canvas");
+		canvas.width = width, canvas.height = height;
+		let context = canvas.getContext("2d", { willReadFrequently: !0 });
+		if (!context) throw Error("Could not draw the image");
+		return context.drawImage(image, 0, 0, width, height), {
+			data: context.getImageData(0, 0, width, height).data,
+			width,
+			height
+		};
+	} finally {
+		typeof ImageBitmap < "u" && image instanceof ImageBitmap && image.close();
+	}
+}
+async function decodeImage(file) {
+	if (typeof createImageBitmap == "function") try {
+		return await createImageBitmap(file);
+	} catch {}
+	let url = URL.createObjectURL(file);
+	try {
+		return await new Promise((resolve, reject) => {
+			let image = new Image();
+			image.addEventListener("load", () => resolve(image), { once: !0 }), image.addEventListener("error", () => reject(/* @__PURE__ */ Error("Could not decode the image")), { once: !0 }), image.src = url;
+		});
+	} finally {
+		URL.revokeObjectURL(url);
+	}
+}
+/**
+* Extracts the palette of image files on device and hands it to `onPalette`,
+* along with the file it came from. Failures end up as a toast.
+*
+* @internal
+*/
+function useImagePalette(onPalette) {
+	let $ = c(10), toast = useToast(), [busy, setBusy] = useState(!1), onPaletteRef = useRef(onPalette), mountedRef = useRef(!0), latestPickRef = useRef(0), t0, t1;
+	$[0] === onPalette ? (t0 = $[1], t1 = $[2]) : (t0 = () => {
+		onPaletteRef.current = onPalette;
+	}, t1 = [onPalette], $[0] = onPalette, $[1] = t0, $[2] = t1), useEffect(t0, t1);
+	let t2, t3;
+	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => (mountedRef.current = !0, () => {
+		mountedRef.current = !1;
+	}), t3 = [], $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), useEffect(t2, t3);
+	let t4;
+	$[5] === toast ? t4 = $[6] : (t4 = (file) => {
+		let pick = latestPickRef.current += 1;
+		setBusy(!0);
+		let isCurrent = () => mountedRef.current && latestPickRef.current === pick, extract = async () => {
+			let palette = extractImagePalette(await readImagePixels(file));
+			isCurrent() && (Object.values(palette).every(_temp$3) ? toast.push({
+				status: "warning",
+				title: "Found no colors in that image"
+			}) : onPaletteRef.current(palette, file));
+		};
+		extract().catch(() => {
+			isCurrent() && toast.push({
+				status: "error",
+				title: "Could not read that image"
+			});
+		}).finally(() => {
+			isCurrent() && setBusy(!1);
+		});
+	}, $[5] = toast, $[6] = t4);
+	let pickImage = t4, t5;
+	return $[7] !== busy || $[8] !== pickImage ? (t5 = {
+		busy,
+		pickImage
+	}, $[7] = busy, $[8] = pickImage, $[9] = t5) : t5 = $[9], t5;
+}
+function _temp$3(swatch) {
+	return swatch === null;
+}
+/** The swatches on display: the vibrant family over the muted one */
+const TILES = [
+	"vibrant",
+	"lightVibrant",
+	"darkVibrant",
+	"muted",
+	"lightMuted",
+	"darkMuted"
+], PaletteGrid = styled.div.withConfig({
+	displayName: "PaletteGrid",
+	componentId: "sc-j2tqre-0"
+})`display:grid;grid-template-columns:repeat(3,${24}px);grid-auto-rows:${24}px;gap:${4}px;&[data-with-image='true']{grid-template-columns:${52}px repeat(3,${24}px);}`, ImageTile = styled.img.withConfig({
+	displayName: "ImageTile",
+	componentId: "sc-j2tqre-1"
+})`display:block;grid-row:span 2;width:${52}px;height:${52}px;border-radius:3px;object-fit:cover;box-shadow:inset 0 0 0 1px var(--card-border-color);`, Tile = styled.span.withConfig({
+	displayName: "Tile",
+	componentId: "sc-j2tqre-2"
+})`display:block;border-radius:3px;box-shadow:inset 0 0 0 1px var(--card-border-color);&[data-empty='true']{background:repeating-linear-gradient( -45deg,transparent 0 3px,var(--card-border-color) 3px 4px );}`, VariantRow = styled.div.withConfig({
+	displayName: "VariantRow",
+	componentId: "sc-j2tqre-3"
+})`display:flex;gap:${8}px;margin:0 -${12}px;padding:0 ${12}px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:${12}px;scrollbar-width:thin;`, VariantButton = styled.button.withConfig({
+	displayName: "VariantButton",
+	componentId: "sc-j2tqre-4"
+})`appearance:none;flex:none;display:block;box-sizing:border-box;width:calc(var(--variant-width) + 8px);margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;scroll-snap-align:start;&:focus{outline:none;}`, VariantFrame = styled.span.withConfig({
+	displayName: "VariantFrame",
+	componentId: "sc-j2tqre-5"
+})`display:block;box-sizing:border-box;width:calc(var(--variant-width) + 8px);height:calc(var(--variant-width) * 9 / 16 + 8px);padding:4px;border-radius:7px;overflow:hidden;transition:box-shadow 100ms;${VariantButton}:hover &{box-shadow:inset 0 0 0 2px var(--card-border-color);}${VariantButton}[aria-pressed='true'] &{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color);}${VariantButton}:focus-visible &{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px;}`, VariantScale = styled.span.withConfig({
+	displayName: "VariantScale",
+	componentId: "sc-j2tqre-6"
+})`display:block;width:${144}px;transform:scale(var(--variant-scale));transform-origin:top left;`;
+/**
+* Takes the colors of a theme from an image, on device: the image is read
+* into a canvas and its palette extracted right there — nothing is uploaded.
+* Shows the image (while the session lasts) next to its palette, offers a
+* theme variant built around each swatch as a small preview, and a lucky
+* button that picks an interesting one.
+*
+* @internal
+*/
+function ImagePaletteSection(props) {
+	let $ = c(38), { imageUrl, onPalette, onVariant, onLucky, options, palette } = props, { busy, pickImage } = useImagePalette(onPalette), [dragging, setDragging] = useState(!1), dragDepth = useRef(0), t0;
+	$[0] !== options || $[1] !== palette ? (t0 = palette ? currentImageVariant(options, palette) : null, $[0] = options, $[1] = palette, $[2] = t0) : t0 = $[2];
+	let current = t0, rowRef = useRef(null), [variantWidth, setVariantWidth] = useState(58), t1;
+	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => {
+		let row = rowRef.current;
+		if (!row) return;
+		let measure = () => {
+			let visible = row.clientWidth - 12 - 16;
+			setVariantWidth(Math.max(24, Math.floor(visible / 2.5) - 8));
+		};
+		measure();
+		let observer = new ResizeObserver(measure);
+		return observer.observe(row), () => observer.disconnect();
+	}, $[3] = t1) : t1 = $[3];
+	let t2;
+	$[4] === palette ? t2 = $[5] : (t2 = [palette], $[4] = palette, $[5] = t2), useEffect(t1, t2);
+	let t3;
+	bb0: {
+		if (!palette) {
+			let t4;
+			$[6] === Symbol.for("react.memo_cache_sentinel") ? (t4 = [], $[6] = t4) : t4 = $[6], t3 = t4;
+			break bb0;
+		}
+		let t4;
+		$[7] !== options || $[8] !== palette ? (t4 = IMAGE_PALETTE_VARIANTS.flatMap((variant) => palette[variant] === null ? [] : [{
+			variant,
+			options: applyImagePalette(options, palette, variant)
+		}]), $[7] = options, $[8] = palette, $[9] = t4) : t4 = $[9], t3 = t4;
+	}
+	let variants = t3, t4, t5;
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event) => {
+		event.preventDefault(), dragDepth.current += 1, setDragging(!0);
+	}, t5 = () => {
+		dragDepth.current = Math.max(0, dragDepth.current - 1), dragDepth.current === 0 && setDragging(!1);
+	}, $[10] = t4, $[11] = t5) : (t4 = $[10], t5 = $[11]);
+	let t6;
+	$[12] === pickImage ? t6 = $[13] : (t6 = (event_1) => {
+		event_1.preventDefault(), dragDepth.current = 0, setDragging(!1);
+		let file = event_1.dataTransfer.files[0];
+		file && pickImage(file);
+	}, $[12] = pickImage, $[13] = t6);
+	let t7 = dragging ? "primary" : "default", t8;
+	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t8 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		children: /* @__PURE__ */ jsx(Text, {
+			size: 1,
+			weight: "medium",
+			children: "Image palette"
+		})
+	}), $[14] = t8) : t8 = $[14];
+	let t9;
+	$[15] !== busy || $[16] !== palette || $[17] !== pickImage ? (t9 = palette && /* @__PURE__ */ jsx(ImageFileButton, {
+		loading: busy,
+		mode: "bleed",
+		onFile: pickImage,
+		padding: 2,
+		tooltip: "Pick another image"
+	}), $[15] = busy, $[16] = palette, $[17] = pickImage, $[18] = t9) : t9 = $[18];
+	let t10;
+	$[19] === t9 ? t10 = $[20] : (t10 = /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: 2,
+		children: [t8, t9]
+	}), $[19] = t9, $[20] = t10);
+	let t11;
+	$[21] !== busy || $[22] !== current || $[23] !== imageUrl || $[24] !== onLucky || $[25] !== onVariant || $[26] !== palette || $[27] !== pickImage || $[28] !== variantWidth || $[29] !== variants ? (t11 = palette ? /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsxs(PaletteGrid, {
+			"data-with-image": imageUrl !== void 0,
+			children: [imageUrl && /* @__PURE__ */ jsx(ImageTile, {
+				alt: "",
+				src: imageUrl
+			}), TILES.map((key) => {
+				let hex = palette[key], title = IMAGE_PALETTE_TITLES[key];
+				return /* @__PURE__ */ jsx(Tooltip, {
+					animate: !0,
+					content: /* @__PURE__ */ jsx(Text, {
+						size: 1,
+						children: hex ? `${title} · ${hex}` : `No ${title.toLowerCase()} color`
+					}),
+					placement: "bottom",
+					portal: !0,
+					children: /* @__PURE__ */ jsx(Tile, {
+						"data-empty": hex === null,
+						style: { background: hex ?? void 0 }
+					})
+				}, key);
+			})]
+		}),
+		/* @__PURE__ */ jsxs(Stack, {
+			gap: 2,
+			children: [/* @__PURE__ */ jsx(Text, {
+				muted: !0,
+				size: 0,
+				children: "Pick the swatch to build the theme around"
+			}), /* @__PURE__ */ jsx(VariantRow, {
+				ref: rowRef,
+				style: {
+					"--variant-width": `${variantWidth}px`,
+					"--variant-scale": variantWidth / 144
+				},
+				children: variants.map((t12) => {
+					let { variant: variant_0, options: variantOptions } = t12;
+					return /* @__PURE__ */ jsxs(VariantButton, {
+						"aria-pressed": variant_0 === current,
+						onClick: () => onVariant(variant_0),
+						type: "button",
+						children: [/* @__PURE__ */ jsx(VariantFrame, { children: /* @__PURE__ */ jsx(VariantScale, { children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: variantOptions }) }) }), /* @__PURE__ */ jsx(Box, {
+							paddingTop: 1,
+							children: /* @__PURE__ */ jsx(Text, {
+								align: "center",
+								size: 0,
+								textOverflow: "ellipsis",
+								weight: variant_0 === current ? "medium" : "regular",
+								children: IMAGE_PALETTE_TITLES[variant_0]
+							})
+						})]
+					}, variant_0);
+				})
+			})]
+		}),
+		/* @__PURE__ */ jsx(TooltipButton, {
+			icon: SparklesIcon,
+			mode: "ghost",
+			onClick: onLucky,
+			text: "I'm feeling lucky",
+			tooltip: "Build the theme around a swatch that looks interesting",
+			width: "fill"
+		})
+	] }) : /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [/* @__PURE__ */ jsx(Text, {
+			muted: !0,
+			size: 0,
+			children: "Take the accent, text and background colors from an image — read on device, nothing is uploaded."
+		}), /* @__PURE__ */ jsx(ImageFileButton, {
+			loading: busy,
+			mode: "ghost",
+			onFile: pickImage,
+			text: "Pick an image",
+			tooltip: "Take the colors from an image on your device",
+			width: "fill"
+		})]
+	}), $[21] = busy, $[22] = current, $[23] = imageUrl, $[24] = onLucky, $[25] = onVariant, $[26] = palette, $[27] = pickImage, $[28] = variantWidth, $[29] = variants, $[30] = t11) : t11 = $[30];
+	let t12;
+	$[31] !== t10 || $[32] !== t11 ? (t12 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [t10, t11]
+	}), $[31] = t10, $[32] = t11, $[33] = t12) : t12 = $[33];
+	let t13;
+	return $[34] !== t12 || $[35] !== t6 || $[36] !== t7 ? (t13 = /* @__PURE__ */ jsx(Card, {
+		border: !0,
+		onDragEnter: t4,
+		onDragLeave: t5,
+		onDragOver: _temp$2,
+		onDrop: t6,
+		padding: 3,
+		radius: 3,
+		tone: t7,
+		children: t12
+	}), $[34] = t12, $[35] = t6, $[36] = t7, $[37] = t13) : t13 = $[37], t13;
+}
+function _temp$2(event_0) {
+	event_0.preventDefault();
+}
+const SCHEME_TITLES = {
+	dark: "Dark mode",
+	light: "Light mode"
+}, SPLIT_HINTS = {
+	dark: "Shown on the right",
+	light: "Shown on the left"
+}, SCHEME_OPTION_KEYS = [
+	"accent",
+	"text",
+	"background",
+	"contrast"
+], Swatch = styled.input.withConfig({
+	displayName: "Swatch",
+	componentId: "sc-rahyxu-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;}`, Range = styled.input.withConfig({
+	displayName: "Range",
+	componentId: "sc-rahyxu-1"
+})`display:block;width:100%;margin:0;accent-color:var(--card-focus-ring-color);`;
+/**
+* The flow for editing one of the user's own themes: its title, a live
+* preview, and a card per color scheme with the accent/text/background
+* pickers and the contrast slider of that scheme. Every change applies to the
+* whole Studio right away — in the scheme the Studio is showing, or in both
+* side by side in the split preview.
+*
+* @internal
+*/
+function ThemeEditor(props) {
+	let $ = c(41), { focusTitle, slug } = props, { themes, images, split, send } = useThemer(), t0;
+	if ($[0] !== slug || $[1] !== themes) {
+		let t1;
+		$[3] === slug ? t1 = $[4] : (t1 = (candidate) => candidate.slug === slug && candidate.source === "custom", $[3] = slug, $[4] = t1), t0 = themes.find(t1), $[0] = slug, $[1] = themes, $[2] = t0;
+	} else t0 = $[2];
+	let theme = t0;
+	if (!theme) return null;
+	let t1;
+	$[5] !== send || $[6] !== slug || $[7] !== theme.options || $[8] !== theme.palette ? (t1 = (variant) => {
+		theme.palette && variant !== null && send({
+			type: "theme.update",
+			slug,
+			options: applyImagePalette(theme.options, theme.palette, variant)
+		});
+	}, $[5] = send, $[6] = slug, $[7] = theme.options, $[8] = theme.palette, $[9] = t1) : t1 = $[9];
+	let applyVariant = t1, t2 = images[slug], t3;
+	$[10] === send ? t3 = $[11] : (t3 = () => send({ type: "flow.list" }), $[10] = send, $[11] = t3);
+	let t4;
+	$[12] !== applyVariant || $[13] !== theme.options || $[14] !== theme.palette ? (t4 = () => {
+		theme.palette && applyVariant(pickLuckyVariant(theme.palette, { exclude: currentImageVariant(theme.options, theme.palette) }));
+	}, $[12] = applyVariant, $[13] = theme.options, $[14] = theme.palette, $[15] = t4) : t4 = $[15];
+	let t5;
+	$[16] !== send || $[17] !== slug ? (t5 = (options) => send({
+		type: "theme.update",
+		slug,
+		options
+	}), $[16] = send, $[17] = slug, $[18] = t5) : t5 = $[18];
+	let t6;
+	$[19] !== send || $[20] !== slug || $[21] !== theme.options ? (t6 = (palette, file) => send({
+		type: "theme.update",
+		slug,
+		options: applyImagePalette(theme.options, palette),
+		palette,
+		imageUrl: URL.createObjectURL(file)
+	}), $[19] = send, $[20] = slug, $[21] = theme.options, $[22] = t6) : t6 = $[22];
+	let t7, t8;
+	$[23] !== send || $[24] !== slug ? (t7 = () => send({
+		type: "theme.remove",
+		slug
+	}), t8 = (title) => send({
+		type: "theme.update",
+		slug,
+		title
+	}), $[23] = send, $[24] = slug, $[25] = t7, $[26] = t8) : (t7 = $[25], t8 = $[26]);
+	let t9;
+	return $[27] !== applyVariant || $[28] !== focusTitle || $[29] !== split || $[30] !== t2 || $[31] !== t3 || $[32] !== t4 || $[33] !== t5 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 || $[37] !== theme.options || $[38] !== theme.palette || $[39] !== theme.title ? (t9 = /* @__PURE__ */ jsx(ThemeEditorForm, {
+		focusTitle,
+		imageUrl: t2,
+		onDone: t3,
+		onLucky: t4,
+		onOptionsChange: t5,
+		onPalette: t6,
+		onRemove: t7,
+		onTitleChange: t8,
+		onVariant: applyVariant,
+		options: theme.options,
+		palette: theme.palette,
+		split,
+		title: theme.title
+	}), $[27] = applyVariant, $[28] = focusTitle, $[29] = split, $[30] = t2, $[31] = t3, $[32] = t4, $[33] = t5, $[34] = t6, $[35] = t7, $[36] = t8, $[37] = theme.options, $[38] = theme.palette, $[39] = theme.title, $[40] = t9) : t9 = $[40], t9;
+}
+function ThemeEditorForm(props) {
+	let $ = c(49), { focusTitle, imageUrl, onDone, onLucky, onOptionsChange, onPalette, onRemove, onTitleChange, onVariant, options, palette, split, title } = props, studioScheme = useColorSchemeValue(), t0;
+	$[0] === options ? t0 = $[1] : (t0 = resolveThemeOptions(options), $[0] = options, $[1] = t0);
+	let resolved = t0, t1;
+	$[2] === options ? t1 = $[3] : (t1 = buildPalette(options), $[2] = options, $[3] = t1);
+	let palettes = t1, t2;
+	$[4] !== onOptionsChange || $[5] !== options ? (t2 = (scheme, changes) => {
+		let values = {
+			...options[scheme],
+			...changes
+		};
+		for (let key of SCHEME_OPTION_KEYS) values[key] === void 0 && delete values[key];
+		let next = { ...options };
+		Object.keys(values).length === 0 ? delete next[scheme] : next[scheme] = values, onOptionsChange(next);
+	}, $[4] = onOptionsChange, $[5] = options, $[6] = t2) : t2 = $[6];
+	let patchScheme = t2, t3;
+	$[7] === options ? t3 = $[8] : (t3 = /* @__PURE__ */ jsx(ThemeThumbnail, { options }), $[7] = options, $[8] = t3);
+	let t4;
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		weight: "medium",
+		children: "Title"
+	}), $[9] = t4) : t4 = $[9];
+	let t5;
+	$[10] === onTitleChange ? t5 = $[11] : (t5 = (event) => onTitleChange(event.currentTarget.value), $[10] = onTitleChange, $[11] = t5);
+	let t6 = focusTitle ? _temp$1 : void 0, t7;
+	$[12] !== focusTitle || $[13] !== t5 || $[14] !== t6 || $[15] !== title ? (t7 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 2,
+		children: [t4, /* @__PURE__ */ jsx(TextInput, {
+			autoFocus: focusTitle,
+			fontSize: 1,
+			onChange: t5,
+			onFocus: t6,
+			padding: 2,
+			placeholder: "Untitled theme",
+			value: title
+		})]
+	}), $[12] = focusTitle, $[13] = t5, $[14] = t6, $[15] = title, $[16] = t7) : t7 = $[16];
+	let t8;
+	$[17] !== imageUrl || $[18] !== onLucky || $[19] !== onPalette || $[20] !== onVariant || $[21] !== options || $[22] !== palette ? (t8 = /* @__PURE__ */ jsx(ImagePaletteSection, {
+		imageUrl,
+		onLucky,
+		onPalette,
+		onVariant,
+		options,
+		palette
+	}), $[17] = imageUrl, $[18] = onLucky, $[19] = onPalette, $[20] = onVariant, $[21] = options, $[22] = palette, $[23] = t8) : t8 = $[23];
+	let t9;
+	$[24] !== options || $[25] !== palettes || $[26] !== patchScheme || $[27] !== resolved || $[28] !== split || $[29] !== studioScheme ? (t9 = SCHEMES.map((scheme_0) => /* @__PURE__ */ jsx(SchemeCard, {
+		active: split || scheme_0 === studioScheme,
+		onChange: (changes_0) => patchScheme(scheme_0, changes_0),
+		options: options[scheme_0] ?? {},
+		palette: palettes[scheme_0],
+		resolved: resolved[scheme_0],
+		scheme: scheme_0,
+		split
+	}, scheme_0)), $[24] = options, $[25] = palettes, $[26] = patchScheme, $[27] = resolved, $[28] = split, $[29] = studioScheme, $[30] = t9) : t9 = $[30];
+	let t10;
+	$[31] === t9 ? t10 = $[32] : (t10 = /* @__PURE__ */ jsx(ScrollAreaBleed, { children: t9 }), $[31] = t9, $[32] = t10);
+	let t11;
+	$[33] !== t10 || $[34] !== t3 || $[35] !== t7 || $[36] !== t8 ? (t11 = /* @__PURE__ */ jsx(ScrollArea, {
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [
+				t3,
+				t7,
+				t8,
+				t10
+			]
+		})
+	}), $[33] = t10, $[34] = t3, $[35] = t7, $[36] = t8, $[37] = t11) : t11 = $[37];
+	let t12;
+	$[38] === onRemove ? t12 = $[39] : (t12 = /* @__PURE__ */ jsx(TooltipButton, {
+		icon: TrashIcon,
+		mode: "ghost",
+		onClick: onRemove,
+		text: "Remove",
+		tone: "critical",
+		tooltip: "Remove the theme — it can be restored until it is deleted"
+	}), $[38] = onRemove, $[39] = t12);
+	let t13;
+	$[40] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(Box, { flex: 1 }), $[40] = t13) : t13 = $[40];
+	let t14;
+	$[41] === onDone ? t14 = $[42] : (t14 = /* @__PURE__ */ jsx(Button, {
+		mode: "ghost",
+		onClick: onDone,
+		text: "Done"
+	}), $[41] = onDone, $[42] = t14);
+	let t15;
+	$[43] !== t12 || $[44] !== t14 ? (t15 = /* @__PURE__ */ jsx(Card, {
+		borderTop: !0,
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			gap: 2,
+			children: [
+				t12,
+				t13,
+				t14
+			]
+		})
+	}), $[43] = t12, $[44] = t14, $[45] = t15) : t15 = $[45];
+	let t16;
+	return $[46] !== t11 || $[47] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t15] }), $[46] = t11, $[47] = t15, $[48] = t16) : t16 = $[48], t16;
+}
+function _temp$1(event_0) {
+	return event_0.currentTarget.select();
+}
+/**
+* The colors of one scheme. The cards span the sidebar edge to edge, one
+* after the other with a border between them, in the sidebar's own scheme —
+* the swatches show the colors they edit. The scheme the Studio is showing is
+* marked as active: its changes show up in the Studio right away, the other
+* scheme's only once the appearance setting switches to it — or both are
+* active, in the split preview.
+*/
+function SchemeCard(props) {
+	let $ = c(66), { active, onChange, options, palette, resolved, scheme, split } = props, name = SCHEME_TITLES[scheme], t0;
+	$[0] === name ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		children: /* @__PURE__ */ jsx(Text, {
+			size: 1,
+			weight: "medium",
+			children: name
+		})
+	}), $[0] = name, $[1] = t0);
+	let t1;
+	$[2] === active ? t1 = $[3] : (t1 = active && /* @__PURE__ */ jsx(Badge, {
+		fontSize: 0,
+		tone: "primary",
+		children: "Active"
+	}), $[2] = active, $[3] = t1);
+	let t2;
+	$[4] !== t0 || $[5] !== t1 ? (t2 = /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: 2,
+		children: [t0, t1]
+	}), $[4] = t0, $[5] = t1, $[6] = t2) : t2 = $[6];
+	let t3 = split ? SPLIT_HINTS[scheme] : active ? "Shown in the Studio right now" : `Shown once the Studio appearance is ${scheme}`, t4;
+	$[7] === t3 ? t4 = $[8] : (t4 = /* @__PURE__ */ jsx(Text, {
+		muted: !0,
+		size: 0,
+		children: t3
+	}), $[7] = t3, $[8] = t4);
+	let t5;
+	$[9] !== t2 || $[10] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 2,
+		children: [t2, t4]
+	}), $[9] = t2, $[10] = t4, $[11] = t5) : t5 = $[11];
+	let t6 = options.accent === void 0, t7 = `${name} accent`, t8, t9;
+	$[12] === onChange ? (t8 = $[13], t9 = $[14]) : (t8 = (accent) => onChange({ accent }), t9 = () => onChange({ accent: void 0 }), $[12] = onChange, $[13] = t8, $[14] = t9);
+	let t10;
+	$[15] !== resolved.accent || $[16] !== t6 || $[17] !== t7 || $[18] !== t8 || $[19] !== t9 ? (t10 = /* @__PURE__ */ jsx(ColorRow, {
+		auto: t6,
+		autoLabel: "default",
+		label: t7,
+		onChange: t8,
+		onClear: t9,
+		title: "Accent",
+		value: resolved.accent
+	}), $[15] = resolved.accent, $[16] = t6, $[17] = t7, $[18] = t8, $[19] = t9, $[20] = t10) : t10 = $[20];
+	let t11 = options.text === void 0, t12 = `${name} text`, t13, t14;
+	$[21] === onChange ? (t13 = $[22], t14 = $[23]) : (t13 = (text) => onChange({ text }), t14 = () => onChange({ text: void 0 }), $[21] = onChange, $[22] = t13, $[23] = t14);
+	let t15;
+	$[24] !== resolved.text || $[25] !== t11 || $[26] !== t12 || $[27] !== t13 || $[28] !== t14 ? (t15 = /* @__PURE__ */ jsx(ColorRow, {
+		auto: t11,
+		label: t12,
+		onChange: t13,
+		onClear: t14,
+		title: "Text",
+		value: resolved.text
+	}), $[24] = resolved.text, $[25] = t11, $[26] = t12, $[27] = t13, $[28] = t14, $[29] = t15) : t15 = $[29];
+	let t16 = scheme === "dark" ? palette.black : palette.white, t17 = options.background === void 0, t18 = `${name} background`, t19, t20;
+	$[30] === onChange ? (t19 = $[31], t20 = $[32]) : (t19 = (background) => onChange({ background }), t20 = () => onChange({ background: void 0 }), $[30] = onChange, $[31] = t19, $[32] = t20);
+	let t21;
+	$[33] !== resolved.background || $[34] !== t16 || $[35] !== t17 || $[36] !== t18 || $[37] !== t19 || $[38] !== t20 ? (t21 = /* @__PURE__ */ jsx(ColorRow, {
+		adjusted: t16,
+		auto: t17,
+		label: t18,
+		onChange: t19,
+		onClear: t20,
+		title: "Background",
+		value: resolved.background
+	}), $[33] = resolved.background, $[34] = t16, $[35] = t17, $[36] = t18, $[37] = t19, $[38] = t20, $[39] = t21) : t21 = $[39];
+	let t22;
+	$[40] === Symbol.for("react.memo_cache_sentinel") ? (t22 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: "Contrast"
+	}), $[40] = t22) : t22 = $[40];
+	let t23 = options.contrast === void 0 ? " · auto" : "", t24;
+	$[41] !== resolved.contrast || $[42] !== t23 ? (t24 = /* @__PURE__ */ jsxs(Stack, {
+		flex: 1,
+		gap: 2,
+		children: [t22, /* @__PURE__ */ jsxs(Text, {
+			muted: !0,
+			size: 0,
+			children: [resolved.contrast, t23]
+		})]
+	}), $[41] = resolved.contrast, $[42] = t23, $[43] = t24) : t24 = $[43];
+	let t25;
+	$[44] !== onChange || $[45] !== options.contrast ? (t25 = options.contrast !== void 0 && /* @__PURE__ */ jsx(TooltipButton, {
+		icon: ResetIcon,
+		mode: "bleed",
+		onClick: () => onChange({ contrast: void 0 }),
+		padding: 2,
+		tooltip: "Reset to auto"
+	}), $[44] = onChange, $[45] = options.contrast, $[46] = t25) : t25 = $[46];
+	let t26;
+	$[47] !== t24 || $[48] !== t25 ? (t26 = /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: 2,
+		children: [t24, t25]
+	}), $[47] = t24, $[48] = t25, $[49] = t26) : t26 = $[49];
+	let t27 = `${name} contrast`, t28;
+	$[50] === onChange ? t28 = $[51] : (t28 = (event) => onChange({ contrast: Number(event.currentTarget.value) }), $[50] = onChange, $[51] = t28);
+	let t29;
+	$[52] !== resolved.contrast || $[53] !== t27 || $[54] !== t28 ? (t29 = /* @__PURE__ */ jsx(Range, {
+		"aria-label": t27,
+		max: 100,
+		min: 15,
+		onChange: t28,
+		step: 1,
+		type: "range",
+		value: resolved.contrast
+	}), $[52] = resolved.contrast, $[53] = t27, $[54] = t28, $[55] = t29) : t29 = $[55];
+	let t30;
+	$[56] === Symbol.for("react.memo_cache_sentinel") ? (t30 = /* @__PURE__ */ jsx(Text, {
+		muted: !0,
+		size: 0,
+		children: "100 keeps text and borders neutral — lower values blend in the accent"
+	}), $[56] = t30) : t30 = $[56];
+	let t31;
+	$[57] !== t26 || $[58] !== t29 ? (t31 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		children: [
+			t26,
+			t29,
+			t30
+		]
+	}), $[57] = t26, $[58] = t29, $[59] = t31) : t31 = $[59];
+	let t32;
+	return $[60] !== t10 || $[61] !== t15 || $[62] !== t21 || $[63] !== t31 || $[64] !== t5 ? (t32 = /* @__PURE__ */ jsx(Card, {
+		borderTop: !0,
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [
+				t5,
+				t10,
+				t15,
+				t21,
+				t31
+			]
+		})
+	}), $[60] = t10, $[61] = t15, $[62] = t21, $[63] = t31, $[64] = t5, $[65] = t32) : t32 = $[65], t32;
+}
+/** One color of a scheme: a swatch with its value and an optional reset button */
+function ColorRow(props) {
+	let $ = c(24), { adjusted, auto, autoLabel: t0, label, onChange, onClear, title, value } = props, autoLabel = t0 === void 0 ? "auto" : t0, t1;
+	$[0] === onChange ? t1 = $[1] : (t1 = (event) => onChange(event.currentTarget.value), $[0] = onChange, $[1] = t1);
+	let t2;
+	$[2] !== label || $[3] !== t1 || $[4] !== value ? (t2 = /* @__PURE__ */ jsx(Swatch, {
+		"aria-label": label,
+		onChange: t1,
+		type: "color",
+		value
+	}), $[2] = label, $[3] = t1, $[4] = value, $[5] = t2) : t2 = $[5];
+	let t3;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t3 = { minWidth: 0 }, $[6] = t3) : t3 = $[6];
+	let t4;
+	$[7] === title ? t4 = $[8] : (t4 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: title
+	}), $[7] = title, $[8] = t4);
+	let t5 = adjusted !== void 0 && adjusted !== value ? ` → ${adjusted}` : "", t6 = auto ? ` · ${autoLabel}` : "", t7;
+	$[9] !== t5 || $[10] !== t6 || $[11] !== value ? (t7 = /* @__PURE__ */ jsxs(Text, {
+		muted: !0,
+		size: 0,
+		textOverflow: "ellipsis",
+		children: [
+			value,
+			t5,
+			t6
+		]
+	}), $[9] = t5, $[10] = t6, $[11] = value, $[12] = t7) : t7 = $[12];
+	let t8;
+	$[13] !== t4 || $[14] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Stack, {
+		flex: 1,
+		gap: 2,
+		style: t3,
+		children: [t4, t7]
+	}), $[13] = t4, $[14] = t7, $[15] = t8) : t8 = $[15];
+	let t9;
+	$[16] !== auto || $[17] !== autoLabel || $[18] !== onClear ? (t9 = onClear && !auto && /* @__PURE__ */ jsx(TooltipButton, {
+		icon: ResetIcon,
+		mode: "bleed",
+		onClick: onClear,
+		padding: 2,
+		tooltip: `Reset to ${autoLabel}`
+	}), $[16] = auto, $[17] = autoLabel, $[18] = onClear, $[19] = t9) : t9 = $[19];
+	let t10;
+	return $[20] !== t2 || $[21] !== t8 || $[22] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: 2,
+		children: [
+			t2,
+			t8,
+			t9
+		]
+	}), $[20] = t2, $[21] = t8, $[22] = t9, $[23] = t10) : t10 = $[23], t10;
+}
+const Root = styled.div.withConfig({
+	displayName: "Root",
+	componentId: "sc-krwbzw-0"
+})`position:relative;`, PickButton = styled.button.withConfig({
+	displayName: "PickButton",
+	componentId: "sc-krwbzw-1"
+})`appearance:none;display:block;box-sizing:border-box;width:100%;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:center;cursor:pointer;&:focus{outline:none;}`, Frame$1 = styled.span.withConfig({
+	displayName: "Frame",
+	componentId: "sc-krwbzw-2"
+})`display:block;padding:4px;border-radius:10px;transition:box-shadow 100ms;${PickButton}:hover &{box-shadow:inset 0 0 0 2px var(--card-border-color);}${PickButton}[aria-pressed='true'] &{box-shadow:inset 0 0 0 2px var(--card-focus-ring-color);}${PickButton}:focus-visible &{outline:2px solid var(--card-focus-ring-color);outline-offset:-2px;}`, MenuSlot = styled.div.withConfig({
+	displayName: "MenuSlot",
+	componentId: "sc-krwbzw-3"
+})`position:absolute;top:10px;right:10px;opacity:0;transition:opacity 100ms;${Root}:hover &,${Root}:focus-within &,&[data-visible='true']{opacity:1;}`;
+/**
+* One theme in the list: the floating preview with the title below it, like
+* an appearance option in macOS System Settings. Clicking it applies the
+* theme to the whole Studio; its menu holds the edit, duplicate and remove
+* flows that apply to the theme.
+*
+* @internal
+*/
+function ThemeCard(props) {
+	let $ = c(52), { active, theme } = props, { send } = useThemer(), { scheme } = useRootTheme(), [menuOpen, setMenuOpen] = useState(!1), t0;
+	$[0] === theme.title ? t0 = $[1] : (t0 = displayTitle(theme.title), $[0] = theme.title, $[1] = t0);
+	let title = t0, t1;
+	$[2] !== send || $[3] !== theme.slug ? (t1 = () => send({
+		type: "theme.pick",
+		slug: theme.slug
+	}), $[2] = send, $[3] = theme.slug, $[4] = t1) : t1 = $[4];
+	let t2;
+	$[5] === theme.options ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(Frame$1, { children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: theme.options }) }), $[5] = theme.options, $[6] = t2);
+	let t3 = active ? "medium" : "regular", t4;
+	$[7] !== t3 || $[8] !== title ? (t4 = /* @__PURE__ */ jsx(Box, {
+		as: "span",
+		display: "block",
+		paddingTop: 2,
+		paddingX: 2,
+		children: /* @__PURE__ */ jsx(Text, {
+			align: "center",
+			as: "span",
+			size: 1,
+			textOverflow: "ellipsis",
+			weight: t3,
+			children: title
+		})
+	}), $[7] = t3, $[8] = title, $[9] = t4) : t4 = $[9];
+	let t5;
+	$[10] !== active || $[11] !== t1 || $[12] !== t2 || $[13] !== t4 ? (t5 = /* @__PURE__ */ jsxs(PickButton, {
+		"aria-pressed": active,
+		onClick: t1,
+		type: "button",
+		children: [t2, t4]
+	}), $[10] = active, $[11] = t1, $[12] = t2, $[13] = t4, $[14] = t5) : t5 = $[14];
+	let t6;
+	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t6 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: "Show more"
+	}), $[15] = t6) : t6 = $[15];
+	let t7;
+	$[16] === Symbol.for("react.memo_cache_sentinel") ? (t7 = { display: "inline-block" }, $[16] = t7) : t7 = $[16];
+	let t8 = `Show more for ${title}`, t9;
+	$[17] === t8 ? t9 = $[18] : (t9 = /* @__PURE__ */ jsx(Button, {
+		"aria-label": t8,
+		fontSize: 1,
+		icon: EllipsisHorizontalIcon,
+		mode: "ghost",
+		padding: 1,
+		radius: 2
+	}), $[17] = t8, $[18] = t9);
+	let t10 = `themer-theme-${theme.slug}`, t11;
+	$[19] !== send || $[20] !== theme.slug || $[21] !== theme.source ? (t11 = theme.source === "custom" && /* @__PURE__ */ jsx(MenuItem, {
+		icon: EditIcon,
+		onClick: () => send({
+			type: "theme.edit",
+			slug: theme.slug
+		}),
+		text: "Edit"
+	}), $[19] = send, $[20] = theme.slug, $[21] = theme.source, $[22] = t11) : t11 = $[22];
+	let t12;
+	$[23] !== send || $[24] !== theme.slug ? (t12 = () => send({
+		type: "theme.duplicate",
+		slug: theme.slug
+	}), $[23] = send, $[24] = theme.slug, $[25] = t12) : t12 = $[25];
+	let t13 = theme.source === "custom" ? "Duplicate" : "Duplicate to edit", t14;
+	$[26] !== t12 || $[27] !== t13 ? (t14 = /* @__PURE__ */ jsx(MenuItem, {
+		icon: CopyIcon,
+		onClick: t12,
+		text: t13
+	}), $[26] = t12, $[27] = t13, $[28] = t14) : t14 = $[28];
+	let t15;
+	$[29] !== send || $[30] !== theme.slug || $[31] !== theme.source ? (t15 = theme.source !== "config" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuDivider, {}), /* @__PURE__ */ jsx(MenuItem, {
+		icon: TrashIcon,
+		onClick: () => send({
+			type: "theme.remove",
+			slug: theme.slug
+		}),
+		text: "Remove",
+		tone: "critical"
+	})] }), $[29] = send, $[30] = theme.slug, $[31] = theme.source, $[32] = t15) : t15 = $[32];
+	let t16;
+	$[33] !== t11 || $[34] !== t14 || $[35] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Menu, { children: [
+		t11,
+		t14,
+		t15
+	] }), $[33] = t11, $[34] = t14, $[35] = t15, $[36] = t16) : t16 = $[36];
+	let t17, t18;
+	$[37] === Symbol.for("react.memo_cache_sentinel") ? (t17 = () => setMenuOpen(!1), t18 = () => setMenuOpen(!0), $[37] = t17, $[38] = t18) : (t17 = $[37], t18 = $[38]);
+	let t19;
+	$[39] === scheme ? t19 = $[40] : (t19 = {
+		animate: !0,
+		placement: "bottom-end",
+		portal: !0,
+		scheme
+	}, $[39] = scheme, $[40] = t19);
+	let t20;
+	$[41] !== t10 || $[42] !== t16 || $[43] !== t19 || $[44] !== t9 ? (t20 = /* @__PURE__ */ jsx(Tooltip, {
+		animate: !0,
+		content: t6,
+		placement: "bottom",
+		portal: !0,
+		children: /* @__PURE__ */ jsx(Card, {
+			radius: 2,
+			scheme: "dark",
+			style: t7,
+			children: /* @__PURE__ */ jsx(MenuButton, {
+				button: t9,
+				id: t10,
+				menu: t16,
+				onClose: t17,
+				onOpen: t18,
+				popover: t19
+			})
+		})
+	}), $[41] = t10, $[42] = t16, $[43] = t19, $[44] = t9, $[45] = t20) : t20 = $[45];
+	let t21;
+	$[46] !== menuOpen || $[47] !== t20 ? (t21 = /* @__PURE__ */ jsx(MenuSlot, {
+		"data-visible": menuOpen,
+		children: t20
+	}), $[46] = menuOpen, $[47] = t20, $[48] = t21) : t21 = $[48];
+	let t22;
+	return $[49] !== t21 || $[50] !== t5 ? (t22 = /* @__PURE__ */ jsxs(Root, { children: [t5, t21] }), $[49] = t21, $[50] = t5, $[51] = t22) : t22 = $[51], t22;
+}
+/**
+* The flow for picking a theme: one column of theme cards — the configured
+* theme, the presets and the user's own themes — with the entry points to
+* the add and restore flows below.
+*
+* @internal
+*/
+function ThemeList() {
+	let $ = c(24), { themes, removed, active, send } = useThemer(), t0;
+	$[0] === send ? t0 = $[1] : (t0 = (palette, file) => send({
+		type: "theme.add",
+		title: titleFromFileName(file.name),
+		options: optionsFromImagePalette(palette),
+		palette,
+		imageUrl: URL.createObjectURL(file)
+	}), $[0] = send, $[1] = t0);
+	let { busy, pickImage } = useImagePalette(t0), t1;
+	if ($[2] !== active || $[3] !== themes) {
+		let t2;
+		$[5] === active ? t2 = $[6] : (t2 = (theme) => /* @__PURE__ */ jsx(ThemeCard, {
+			active: theme.slug === active.slug,
+			theme
+		}, theme.slug), $[5] = active, $[6] = t2), t1 = themes.map(t2), $[2] = active, $[3] = themes, $[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	$[7] !== removed.length || $[8] !== send ? (t2 = removed.length > 0 && /* @__PURE__ */ jsx(Button, {
+		icon: RestoreIcon,
+		mode: "bleed",
+		onClick: () => send({ type: "flow.removed" }),
+		text: `Show removed (${removed.length})`,
+		width: "fill"
+	}), $[7] = removed.length, $[8] = send, $[9] = t2) : t2 = $[9];
+	let t3;
+	$[10] !== t1 || $[11] !== t2 ? (t3 = /* @__PURE__ */ jsx(ScrollArea, {
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [t1, t2]
+		})
+	}), $[10] = t1, $[11] = t2, $[12] = t3) : t3 = $[12];
+	let t4;
+	$[13] === send ? t4 = $[14] : (t4 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		children: /* @__PURE__ */ jsx(TooltipButton, {
+			icon: AddIcon,
+			mode: "ghost",
+			onClick: () => send({ type: "theme.add" }),
+			text: "Add theme",
+			tooltip: "Add a theme based on the applied one",
+			width: "fill"
+		})
+	}), $[13] = send, $[14] = t4);
+	let t5;
+	$[15] !== busy || $[16] !== pickImage ? (t5 = /* @__PURE__ */ jsx(ImageFileButton, {
+		loading: busy,
+		mode: "ghost",
+		onFile: pickImage,
+		tooltip: "Add a theme from the colors of an image"
+	}), $[15] = busy, $[16] = pickImage, $[17] = t5) : t5 = $[17];
+	let t6;
+	$[18] !== t4 || $[19] !== t5 ? (t6 = /* @__PURE__ */ jsx(Card, {
+		borderTop: !0,
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			gap: 2,
+			children: [t4, t5]
+		})
+	}), $[18] = t4, $[19] = t5, $[20] = t6) : t6 = $[20];
+	let t7;
+	return $[21] !== t3 || $[22] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Fragment, { children: [t3, t6] }), $[21] = t3, $[22] = t6, $[23] = t7) : t7 = $[23], t7;
 }
 /**
 * Serializes theme options into the `buildTheme` call to paste into
-* `sanity.config.ts`, keeping only what differs from the derived defaults.
+* `sanity.config.ts`, keeping only what differs from the derived defaults in
+* each scheme.
 *
 * Options that boil down to the stock Studio theme need nothing from this
 * package — so they serialize to a bare `buildTheme()` from `@sanity/ui/theme`
@@ -62,77 +1989,35 @@ function sameOptions(a, b) {
 function createThemeSnippet(options) {
 	let minimized = minimizeOptions(options);
 	if (minimized === null) return "import {buildTheme} from '@sanity/ui/theme'\n\nexport const theme = buildTheme()\n";
-	let entries = [`  accent: '${minimized.accent}',`];
-	if (minimized.text !== void 0 && entries.push(`  text: '${minimized.text}',`), minimized.background) {
-		let parts = [];
-		minimized.background.dark !== void 0 && parts.push(`dark: '${minimized.background.dark}'`), minimized.background.light !== void 0 && parts.push(`light: '${minimized.background.light}'`), entries.push(`  background: {${parts.join(", ")}},`);
+	let lines = [];
+	for (let scheme of SCHEMES) {
+		let values = minimized[scheme];
+		values && lines.push(serializeScheme(scheme, values));
 	}
-	return minimized.contrast !== void 0 && entries.push(`  contrast: ${minimized.contrast},`), `import {buildTheme} from '@sanity/themer'\n\nexport const theme = buildTheme({\n${entries.join("\n")}\n})\n`;
+	return `import {buildTheme} from '@sanity/themer'\n\nexport const theme = buildTheme({\n${lines.join("\n")}\n})\n`;
+}
+/** A scheme with up to two options fits on one line, more spread out */
+function serializeScheme(scheme, values) {
+	let entries = [];
+	return values.accent !== void 0 && entries.push(`accent: '${values.accent}'`), values.text !== void 0 && entries.push(`text: '${values.text}'`), values.background !== void 0 && entries.push(`background: '${values.background}'`), values.contrast !== void 0 && entries.push(`contrast: ${values.contrast}`), entries.length <= 2 ? `  ${scheme}: {${entries.join(", ")}},` : `  ${scheme}: {\n${entries.map((entry) => `    ${entry},`).join("\n")}\n  },`;
 }
 registerLanguage(typescript);
 /**
-* `<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-7kf8xr-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;}`, Range = styled.input.withConfig({
-	displayName: "Range",
-	componentId: "sc-7kf8xr-1"
-})`display:block;width:100%;margin:0;accent-color:var(--card-focus-ring-color);`;
-/**
-* The themer sidebar: presets, the accent/text/background pickers and the
-* contrast slider that generate the previewed `buildTheme` theme, plus the
-* `buildTheme` snippet to make it permanent.
+* Shows the `buildTheme` snippet that makes a theme permanent, in a dialog so
+* that it does not take up sidebar space or make the sidebar scroll as the
+* snippet changes shape with the theme.
 *
 * @internal
 */
-function ThemerSidebar() {
-	let $ = c(117), { baseOptions, options, setOptions, setOpen } = useThemer(), toast = useToast(), active = options ?? baseOptions, t0;
-	$[0] === active ? t0 = $[1] : (t0 = resolveThemeOptions(active), $[0] = active, $[1] = t0);
-	let resolved = t0, t1;
-	$[2] === active ? t1 = $[3] : (t1 = buildPalette(active), $[2] = active, $[3] = t1);
-	let palette = t1, t2;
-	$[4] === active ? t2 = $[5] : (t2 = presets.find((preset) => sameOptions(preset.options, active))?.slug ?? "", $[4] = active, $[5] = t2);
-	let activePresetSlug = t2, t3;
-	$[6] === active ? t3 = $[7] : (t3 = createThemeSnippet(active), $[6] = active, $[7] = t3);
-	let snippet = t3, t4;
-	$[8] !== active || $[9] !== setOptions ? (t4 = (changes) => {
-		setOptions({
-			...active,
-			...changes
-		});
-	}, $[8] = active, $[9] = setOptions, $[10] = t4) : t4 = $[10];
-	let patch = t4, t5;
-	$[11] !== active || $[12] !== setOptions ? (t5 = (changes_0) => {
-		setOptions({
-			...active,
-			background: {
-				...active.background,
-				...changes_0
-			}
-		});
-	}, $[11] = active, $[12] = setOptions, $[13] = t5) : t5 = $[13];
-	let patchBackground = t5, t6;
-	$[14] !== active || $[15] !== setOptions ? (t6 = (field) => {
-		let next = { ...active };
-		delete next[field], setOptions(next);
-	}, $[14] = active, $[15] = setOptions, $[16] = t6) : t6 = $[16];
-	let clearField = t6, t7;
-	$[17] !== active || $[18] !== setOptions ? (t7 = (key) => {
-		let background = { ...active.background };
-		delete background[key];
-		let next_0 = { ...active };
-		background.dark === void 0 && background.light === void 0 ? delete next_0.background : next_0.background = background, setOptions(next_0);
-	}, $[17] = active, $[18] = setOptions, $[19] = t7) : t7 = $[19];
-	let clearBackground = t7, t8;
-	$[20] !== snippet || $[21] !== toast ? (t8 = async () => {
+function ThemeSnippetDialog(props) {
+	let $ = c(23), { onClose, theme } = props, toast = useToast(), t0;
+	$[0] === theme.options ? t0 = $[1] : (t0 = createThemeSnippet(theme.options), $[0] = theme.options, $[1] = t0);
+	let snippet = t0, t1;
+	$[2] !== snippet || $[3] !== toast ? (t1 = async () => {
 		try {
 			await navigator.clipboard.writeText(snippet), toast.push({
 				status: "success",
-				title: "Copied theme to the clipboard"
+				title: "Copied the theme to the clipboard"
 			});
 		} catch {
 			toast.push({
@@ -140,515 +2025,567 @@ function ThemerSidebar() {
 				title: "Could not copy the theme"
 			});
 		}
-	}, $[20] = snippet, $[21] = toast, $[22] = t8) : t8 = $[22];
-	let handleCopy = t8, t9;
-	$[23] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(Box, {
-		flex: 1,
-		paddingLeft: 1,
-		children: /* @__PURE__ */ jsx(Text, {
-			size: 1,
-			weight: "semibold",
-			children: "Themer"
-		})
-	}), $[23] = t9) : t9 = $[23];
-	let t10;
-	$[24] === setOpen ? t10 = $[25] : (t10 = /* @__PURE__ */ jsx(Card, {
-		borderBottom: !0,
+	}, $[2] = snippet, $[3] = toast, $[4] = t1) : t1 = $[4];
+	let handleCopy = t1, t2;
+	$[5] === handleCopy ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(Flex, {
+		gap: 2,
+		justify: "flex-end",
 		padding: 3,
-		children: /* @__PURE__ */ jsxs(Flex, {
-			align: "center",
-			gap: 2,
-			children: [t9, /* @__PURE__ */ jsx(Button, {
-				icon: CloseIcon,
-				mode: "bleed",
-				onClick: () => setOpen(!1),
-				padding: 2,
-				title: "Close themer"
-			})]
+		children: /* @__PURE__ */ jsx(Button, {
+			icon: ClipboardIcon,
+			mode: "ghost",
+			onClick: () => void handleCopy(),
+			text: "Copy"
 		})
-	}), $[24] = setOpen, $[25] = t10);
-	let t11;
-	$[26] === Symbol.for("react.memo_cache_sentinel") ? (t11 = /* @__PURE__ */ jsx(Text, {
-		size: 1,
-		weight: "medium",
-		children: "Presets"
-	}), $[26] = t11) : t11 = $[26];
-	let t12;
-	$[27] !== activePresetSlug || $[28] !== setOptions ? (t12 = presets.map((preset_0) => /* @__PURE__ */ jsx(PresetButton, {
-		active: preset_0.slug === activePresetSlug,
-		onClick: () => setOptions(preset_0.options),
-		preset: preset_0
-	}, preset_0.slug)), $[27] = activePresetSlug, $[28] = setOptions, $[29] = t12) : t12 = $[29];
-	let t13;
-	$[30] === t12 ? t13 = $[31] : (t13 = /* @__PURE__ */ jsxs(Stack, {
-		gap: 3,
-		children: [t11, /* @__PURE__ */ jsx(Grid, {
-			gap: 2,
-			gridTemplateColumns: 2,
-			children: t12
-		})]
-	}), $[30] = t12, $[31] = t13);
-	let t14;
-	$[32] === Symbol.for("react.memo_cache_sentinel") ? (t14 = /* @__PURE__ */ jsx(Text, {
-		size: 1,
-		weight: "medium",
-		children: "Colors"
-	}), $[32] = t14) : t14 = $[32];
-	let t15;
-	$[33] === patch ? t15 = $[34] : (t15 = (accent) => patch({ accent }), $[33] = patch, $[34] = t15);
-	let t16;
-	$[35] !== palette.blue || $[36] !== resolved.accent || $[37] !== t15 ? (t16 = /* @__PURE__ */ jsx(ColorRow, {
-		onChange: t15,
-		tints: palette.blue,
-		title: "Accent",
-		value: resolved.accent
-	}), $[35] = palette.blue, $[36] = resolved.accent, $[37] = t15, $[38] = t16) : t16 = $[38];
-	let t17 = active.text === void 0, t18;
-	$[39] === patch ? t18 = $[40] : (t18 = (text) => patch({ text }), $[39] = patch, $[40] = t18);
-	let t19;
-	$[41] === clearField ? t19 = $[42] : (t19 = () => clearField("text"), $[41] = clearField, $[42] = t19);
-	let t20;
-	$[43] !== palette.gray || $[44] !== resolved.text || $[45] !== t17 || $[46] !== t18 || $[47] !== t19 ? (t20 = /* @__PURE__ */ jsx(ColorRow, {
-		auto: t17,
-		onChange: t18,
-		onClear: t19,
-		tints: palette.gray,
-		title: "Text",
-		value: resolved.text
-	}), $[43] = palette.gray, $[44] = resolved.text, $[45] = t17, $[46] = t18, $[47] = t19, $[48] = t20) : t20 = $[48];
-	let t21 = active.background?.dark === void 0, t22;
-	$[49] === patchBackground ? t22 = $[50] : (t22 = (dark) => patchBackground({ dark }), $[49] = patchBackground, $[50] = t22);
-	let t23;
-	$[51] === clearBackground ? t23 = $[52] : (t23 = () => clearBackground("dark"), $[51] = clearBackground, $[52] = t23);
-	let t24;
-	$[53] !== palette.black || $[54] !== resolved.background.dark || $[55] !== t21 || $[56] !== t22 || $[57] !== t23 ? (t24 = /* @__PURE__ */ jsx(ColorRow, {
-		adjusted: palette.black,
-		auto: t21,
-		onChange: t22,
-		onClear: t23,
-		title: "Background · dark",
-		value: resolved.background.dark
-	}), $[53] = palette.black, $[54] = resolved.background.dark, $[55] = t21, $[56] = t22, $[57] = t23, $[58] = t24) : t24 = $[58];
-	let t25 = active.background?.light === void 0, t26;
-	$[59] === patchBackground ? t26 = $[60] : (t26 = (light) => patchBackground({ light }), $[59] = patchBackground, $[60] = t26);
-	let t27;
-	$[61] === clearBackground ? t27 = $[62] : (t27 = () => clearBackground("light"), $[61] = clearBackground, $[62] = t27);
-	let t28;
-	$[63] !== palette.white || $[64] !== resolved.background.light || $[65] !== t25 || $[66] !== t26 || $[67] !== t27 ? (t28 = /* @__PURE__ */ jsx(ColorRow, {
-		adjusted: palette.white,
-		auto: t25,
-		onChange: t26,
-		onClear: t27,
-		title: "Background · light",
-		value: resolved.background.light
-	}), $[63] = palette.white, $[64] = resolved.background.light, $[65] = t25, $[66] = t26, $[67] = t27, $[68] = t28) : t28 = $[68];
-	let t29;
-	$[69] !== t16 || $[70] !== t20 || $[71] !== t24 || $[72] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Stack, {
-		gap: 3,
-		children: [t14, /* @__PURE__ */ jsxs(Stack, {
-			gap: 4,
-			children: [
-				t16,
-				t20,
-				t24,
-				t28
-			]
-		})]
-	}), $[69] = t16, $[70] = t20, $[71] = t24, $[72] = t28, $[73] = t29) : t29 = $[73];
-	let t30;
-	$[74] === Symbol.for("react.memo_cache_sentinel") ? (t30 = /* @__PURE__ */ jsx(Text, {
-		size: 1,
-		weight: "medium",
-		children: "Contrast"
-	}), $[74] = t30) : t30 = $[74];
-	let t31 = active.contrast === void 0 ? " · auto" : "", t32;
-	$[75] !== resolved.contrast || $[76] !== t31 ? (t32 = /* @__PURE__ */ jsxs(Stack, {
-		flex: 1,
-		gap: 2,
-		children: [t30, /* @__PURE__ */ jsxs(Text, {
-			muted: !0,
-			size: 0,
-			children: [resolved.contrast, t31]
-		})]
-	}), $[75] = resolved.contrast, $[76] = t31, $[77] = t32) : t32 = $[77];
-	let t33;
-	$[78] !== active.contrast || $[79] !== clearField ? (t33 = active.contrast !== void 0 && /* @__PURE__ */ jsx(Button, {
-		icon: ResetIcon,
-		mode: "bleed",
-		onClick: () => clearField("contrast"),
-		padding: 2,
-		title: "Reset to auto"
-	}), $[78] = active.contrast, $[79] = clearField, $[80] = t33) : t33 = $[80];
-	let t34;
-	$[81] !== t32 || $[82] !== t33 ? (t34 = /* @__PURE__ */ jsxs(Flex, {
-		align: "center",
-		gap: 2,
-		children: [t32, t33]
-	}), $[81] = t32, $[82] = t33, $[83] = t34) : t34 = $[83];
-	let t35;
-	$[84] === patch ? t35 = $[85] : (t35 = (event) => patch({ contrast: Number(event.currentTarget.value) }), $[84] = patch, $[85] = t35);
-	let t36;
-	$[86] !== resolved.contrast || $[87] !== t35 ? (t36 = /* @__PURE__ */ jsx(Range, {
-		"aria-label": "Contrast",
-		max: 100,
-		min: 15,
-		onChange: t35,
-		step: 1,
-		type: "range",
-		value: resolved.contrast
-	}), $[86] = resolved.contrast, $[87] = t35, $[88] = t36) : t36 = $[88];
-	let t37;
-	$[89] === Symbol.for("react.memo_cache_sentinel") ? (t37 = /* @__PURE__ */ jsx(Text, {
+	}), $[5] = handleCopy, $[6] = t2);
+	let t3;
+	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsx("code", { children: "sanity.config.ts" }), $[7] = t3) : t3 = $[7];
+	let t4;
+	$[8] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx("code", { children: "theme" }), $[8] = t4) : t4 = $[8];
+	let t5;
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsx("code", { children: "defineConfig" }), $[9] = t5) : t5 = $[9];
+	let t6;
+	$[10] === theme.title ? t6 = $[11] : (t6 = displayTitle(theme.title), $[10] = theme.title, $[11] = t6);
+	let t7;
+	$[12] === t6 ? t7 = $[13] : (t7 = /* @__PURE__ */ jsxs(Text, {
 		muted: !0,
-		size: 0,
-		children: "100 keeps text and borders neutral — lower values blend in the accent"
-	}), $[89] = t37) : t37 = $[89];
-	let t38;
-	$[90] !== t34 || $[91] !== t36 ? (t38 = /* @__PURE__ */ jsxs(Stack, {
-		gap: 3,
+		size: 1,
 		children: [
-			t34,
-			t36,
-			t37
+			"Export this from ",
+			t3,
+			" and pass it as the ",
+			t4,
+			" of",
+			" ",
+			t5,
+			" to make “",
+			t6,
+			"” the Studio theme without this tool."
 		]
-	}), $[90] = t34, $[91] = t36, $[92] = t38) : t38 = $[92];
-	let t39;
-	$[93] === Symbol.for("react.memo_cache_sentinel") ? (t39 = /* @__PURE__ */ jsx(Text, {
-		size: 1,
-		weight: "medium",
-		children: "Add to your config"
-	}), $[93] = t39) : t39 = $[93];
-	let t40;
-	$[94] === snippet ? t40 = $[95] : (t40 = /* @__PURE__ */ jsx(Card, {
+	}), $[12] = t6, $[13] = t7);
+	let t8;
+	$[14] === snippet ? t8 = $[15] : (t8 = /* @__PURE__ */ jsx(Card, {
 		border: !0,
 		overflow: "auto",
-		padding: 2,
+		padding: 3,
 		radius: 2,
 		tone: "transparent",
 		children: /* @__PURE__ */ jsx(Code, {
 			language: "ts",
-			size: 0,
+			size: 1,
 			children: snippet
 		})
-	}), $[94] = snippet, $[95] = t40);
-	let t41;
-	$[96] === handleCopy ? t41 = $[97] : (t41 = /* @__PURE__ */ jsx(Button, {
-		icon: ClipboardIcon,
-		mode: "ghost",
-		onClick: () => void handleCopy(),
-		text: "Copy"
-	}), $[96] = handleCopy, $[97] = t41);
-	let t42 = options === null, t43;
-	$[98] === setOptions ? t43 = $[99] : (t43 = () => setOptions(null), $[98] = setOptions, $[99] = t43);
-	let t44;
-	$[100] !== t42 || $[101] !== t43 ? (t44 = /* @__PURE__ */ jsx(Button, {
-		disabled: t42,
-		icon: ResetIcon,
-		mode: "ghost",
-		onClick: t43,
-		text: "Reset",
-		tone: "critical"
-	}), $[100] = t42, $[101] = t43, $[102] = t44) : t44 = $[102];
-	let t45;
-	$[103] !== t41 || $[104] !== t44 ? (t45 = /* @__PURE__ */ jsxs(Flex, {
-		gap: 2,
-		children: [t41, t44]
-	}), $[103] = t41, $[104] = t44, $[105] = t45) : t45 = $[105];
-	let t46;
-	$[106] !== t40 || $[107] !== t45 ? (t46 = /* @__PURE__ */ jsxs(Stack, {
-		gap: 3,
-		children: [
-			t39,
-			t40,
-			t45
-		]
-	}), $[106] = t40, $[107] = t45, $[108] = t46) : t46 = $[108];
-	let t47;
-	$[109] !== t13 || $[110] !== t29 || $[111] !== t38 || $[112] !== t46 ? (t47 = /* @__PURE__ */ jsx(Box, {
-		flex: 1,
-		overflow: "auto",
-		padding: 3,
+	}), $[14] = snippet, $[15] = t8);
+	let t9;
+	$[16] !== t7 || $[17] !== t8 ? (t9 = /* @__PURE__ */ jsx(Box, {
+		padding: 4,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			gap: 4,
-			children: [
-				t13,
-				t29,
-				t38,
-				t46
-			]
-		})
-	}), $[109] = t13, $[110] = t29, $[111] = t38, $[112] = t46, $[113] = t47) : t47 = $[113];
-	let t48;
-	return $[114] !== t10 || $[115] !== t47 ? (t48 = /* @__PURE__ */ jsx(Card, {
-		height: "fill",
-		children: /* @__PURE__ */ jsxs(Flex, {
-			direction: "column",
-			height: "fill",
-			children: [t10, t47]
+			children: [t7, t8]
 		})
-	}), $[114] = t10, $[115] = t47, $[116] = t48) : t48 = $[116], t48;
-}
-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 palette of the colors a preset would apply */
-function PresetButton(props) {
-	let $ = c(27), { active, onClick, preset } = props, t0;
-	$[0] === preset.options ? t0 = $[1] : (t0 = resolveThemeOptions(preset.options), $[0] = preset.options, $[1] = t0);
-	let resolved = t0, t1;
-	$[2] === resolved.accent ? t1 = $[3] : (t1 = ["accent", resolved.accent], $[2] = resolved.accent, $[3] = t1);
-	let t2;
-	$[4] === resolved.text ? t2 = $[5] : (t2 = ["text", resolved.text], $[4] = resolved.text, $[5] = t2);
-	let t3;
-	$[6] === resolved.background.dark ? t3 = $[7] : (t3 = ["dark", resolved.background.dark], $[6] = resolved.background.dark, $[7] = t3);
-	let t4;
-	$[8] === resolved.background.light ? t4 = $[9] : (t4 = ["light", resolved.background.light], $[8] = resolved.background.light, $[9] = t4);
-	let t5;
-	$[10] !== t1 || $[11] !== t2 || $[12] !== t3 || $[13] !== t4 ? (t5 = [
-		t1,
-		t2,
-		t3,
-		t4
-	], $[10] = t1, $[11] = t2, $[12] = t3, $[13] = t4, $[14] = t5) : t5 = $[14];
-	let swatches = t5, t6;
-	$[15] === swatches ? t6 = $[16] : (t6 = /* @__PURE__ */ jsx("span", {
-		style: paletteStyle,
-		children: swatches.map(_temp$1)
-	}), $[15] = swatches, $[16] = t6);
-	let t7;
-	$[17] === preset.title ? t7 = $[18] : (t7 = /* @__PURE__ */ jsx(Text, {
-		align: "left",
-		size: 1,
-		textOverflow: "ellipsis",
-		children: preset.title
-	}), $[17] = preset.title, $[18] = t7);
-	let t8;
-	$[19] !== t6 || $[20] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Stack, {
-		as: "span",
-		gap: 2,
-		children: [t6, t7]
-	}), $[19] = t6, $[20] = t7, $[21] = t8) : t8 = $[21];
-	let t9;
-	return $[22] !== active || $[23] !== onClick || $[24] !== preset.title || $[25] !== t8 ? (t9 = /* @__PURE__ */ jsx(Button, {
-		mode: "ghost",
-		onClick,
-		padding: 2,
-		selected: active,
-		title: preset.title,
-		children: t8
-	}), $[22] = active, $[23] = onClick, $[24] = preset.title, $[25] = t8, $[26] = t9) : t9 = $[26], t9;
-}
-function _temp$1(t0) {
-	let [key, background] = t0;
-	return /* @__PURE__ */ jsx("span", { style: {
-		flex: 1,
-		background
-	} }, key);
+	}), $[16] = t7, $[17] = t8, $[18] = t9) : t9 = $[18];
+	let t10;
+	return $[19] !== onClose || $[20] !== t2 || $[21] !== t9 ? (t10 = /* @__PURE__ */ jsx(Dialog, {
+		animate: !0,
+		footer: t2,
+		header: "Add to your config",
+		id: "themer-snippet",
+		onClickOutside: onClose,
+		onClose,
+		width: 1,
+		children: t9
+	}), $[19] = onClose, $[20] = t2, $[21] = t9, $[22] = t10) : t10 = $[22], t10;
 }
-const rampStyle = {
-	...paletteStyle,
-	height: 13,
-	borderRadius: 2
+const VIEW_TITLES = {
+	list: "Themer",
+	edit: "Edit theme",
+	removed: "Removed themes"
 };
 /**
-* One color of the theme: a swatch with its value, an optional reset-to-auto
-* button, and the generated 50–950 tint ramp for the scales it anchors.
+* The themer sidebar: a header that navigates between the flows and toggles
+* the split preview, the flow itself — picking a theme, editing one, or
+* restoring removed ones — and the dialog with the `buildTheme` snippet of
+* the applied theme.
+*
+* @internal
 */
-function ColorRow(props) {
-	let $ = c(27), { adjusted, auto, onChange, onClear, tints, title, value } = props, t0;
-	$[0] === title ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Text, {
+function ThemerSidebar() {
+	let $ = c(41), { active, split, view, send } = useThemer(), [snippetOpen, setSnippetOpen] = useState(!1), inList = view.name === "list", t0;
+	$[0] !== inList || $[1] !== send ? (t0 = !inList && /* @__PURE__ */ jsx(TooltipButton, {
+		icon: ArrowLeftIcon,
+		mode: "bleed",
+		onClick: () => send({ type: "flow.list" }),
+		padding: 2,
+		tooltip: "Back to the themes"
+	}), $[0] = inList, $[1] = send, $[2] = t0) : t0 = $[2];
+	let t1 = +!!inList, t2;
+	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t2 = { minWidth: 0 }, $[3] = t2) : t2 = $[3];
+	let t3 = VIEW_TITLES[view.name], t4;
+	$[4] === t3 ? t4 = $[5] : (t4 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
-		children: title
-	}), $[0] = title, $[1] = t0);
-	let t1 = adjusted !== void 0 && adjusted !== value ? ` → ${adjusted}` : "", t2 = auto ? " · auto" : "", t3;
-	$[2] !== t1 || $[3] !== t2 || $[4] !== value ? (t3 = /* @__PURE__ */ jsxs(Text, {
-		muted: !0,
-		size: 0,
 		textOverflow: "ellipsis",
-		children: [
-			value,
-			t1,
-			t2
-		]
-	}), $[2] = t1, $[3] = t2, $[4] = value, $[5] = t3) : t3 = $[5];
-	let t4;
-	$[6] !== t0 || $[7] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Stack, {
-		flex: 1,
-		gap: 2,
-		children: [t0, t3]
-	}), $[6] = t0, $[7] = t3, $[8] = t4) : t4 = $[8];
+		weight: "semibold",
+		children: t3
+	}), $[4] = t3, $[5] = t4);
 	let t5;
-	$[9] !== auto || $[10] !== onClear ? (t5 = onClear && !auto && /* @__PURE__ */ jsx(Button, {
-		icon: ResetIcon,
+	$[6] !== t1 || $[7] !== t4 ? (t5 = /* @__PURE__ */ jsx(Box, {
+		flex: 1,
+		paddingLeft: t1,
+		style: t2,
+		children: t4
+	}), $[6] = t1, $[7] = t4, $[8] = t5) : t5 = $[8];
+	let t6;
+	$[9] !== send || $[10] !== split || $[11] !== view.name ? (t6 = view.name !== "removed" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TooltipButton, {
+		"aria-pressed": split,
+		icon: SplitVerticalIcon,
 		mode: "bleed",
-		onClick: onClear,
+		onClick: () => send({ type: "preview.toggle" }),
+		padding: 2,
+		selected: split,
+		tooltip: "Show light and dark side by side"
+	}), /* @__PURE__ */ jsx(TooltipButton, {
+		icon: CodeBlockIcon,
+		mode: "bleed",
+		onClick: () => setSnippetOpen(!0),
+		padding: 2,
+		tooltip: "Show the code for the applied theme"
+	})] }), $[9] = send, $[10] = split, $[11] = view.name, $[12] = t6) : t6 = $[12];
+	let t7;
+	$[13] === send ? t7 = $[14] : (t7 = /* @__PURE__ */ jsx(TooltipButton, {
+		icon: CloseIcon,
+		mode: "bleed",
+		onClick: () => send({ type: "sidebar.close" }),
 		padding: 2,
-		title: "Reset to auto"
-	}), $[9] = auto, $[10] = onClear, $[11] = t5) : t5 = $[11];
-	let t6 = `${title} color`, t7;
-	$[12] === onChange ? t7 = $[13] : (t7 = (event) => onChange(event.currentTarget.value), $[12] = onChange, $[13] = t7);
+		tooltip: "Close themer"
+	}), $[13] = send, $[14] = t7);
 	let t8;
-	$[14] !== t6 || $[15] !== t7 || $[16] !== value ? (t8 = /* @__PURE__ */ jsx(Swatch, {
-		"aria-label": t6,
-		onChange: t7,
-		type: "color",
-		value
-	}), $[14] = t6, $[15] = t7, $[16] = value, $[17] = t8) : t8 = $[17];
+	$[15] !== t6 || $[16] !== t7 ? (t8 = /* @__PURE__ */ jsxs(Flex, { children: [t6, t7] }), $[15] = t6, $[16] = t7, $[17] = t8) : t8 = $[17];
 	let t9;
-	$[18] !== t4 || $[19] !== t5 || $[20] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Flex, {
-		align: "center",
-		gap: 2,
-		children: [
-			t4,
-			t5,
-			t8
-		]
-	}), $[18] = t4, $[19] = t5, $[20] = t8, $[21] = t9) : t9 = $[21];
+	$[18] !== t0 || $[19] !== t5 || $[20] !== t8 ? (t9 = /* @__PURE__ */ jsx(Card, {
+		padding: 2,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: 1,
+			children: [
+				t0,
+				t5,
+				t8
+			]
+		})
+	}), $[18] = t0, $[19] = t5, $[20] = t8, $[21] = t9) : t9 = $[21];
 	let t10;
-	$[22] === tints ? t10 = $[23] : (t10 = tints && /* @__PURE__ */ jsx("span", {
-		style: rampStyle,
-		children: COLOR_TINTS.map((tint) => /* @__PURE__ */ jsx("span", { style: {
-			flex: 1,
-			background: tints[tint]
-		} }, tint))
-	}), $[22] = tints, $[23] = t10);
+	$[22] === view.name ? t10 = $[23] : (t10 = view.name === "list" && /* @__PURE__ */ jsx(ThemeList, {}), $[22] = view.name, $[23] = t10);
 	let t11;
-	return $[24] !== t10 || $[25] !== t9 ? (t11 = /* @__PURE__ */ jsxs(Stack, {
-		gap: 2,
-		children: [t9, t10]
-	}), $[24] = t10, $[25] = t9, $[26] = t11) : t11 = $[26], t11;
+	$[24] !== view.focusTitle || $[25] !== view.name || $[26] !== view.slug ? (t11 = view.name === "edit" && /* @__PURE__ */ jsx(ThemeEditor, {
+		focusTitle: view.focusTitle,
+		slug: view.slug
+	}), $[24] = view.focusTitle, $[25] = view.name, $[26] = view.slug, $[27] = t11) : t11 = $[27];
+	let t12;
+	$[28] === view.name ? t12 = $[29] : (t12 = view.name === "removed" && /* @__PURE__ */ jsx(RemovedThemes, {}), $[28] = view.name, $[29] = t12);
+	let t13;
+	$[30] !== t10 || $[31] !== t11 || $[32] !== t12 || $[33] !== t9 ? (t13 = /* @__PURE__ */ jsxs(Flex, {
+		direction: "column",
+		height: "fill",
+		children: [
+			t9,
+			t10,
+			t11,
+			t12
+		]
+	}), $[30] = t10, $[31] = t11, $[32] = t12, $[33] = t9, $[34] = t13) : t13 = $[34];
+	let t14;
+	$[35] !== active || $[36] !== snippetOpen ? (t14 = snippetOpen && /* @__PURE__ */ jsx(ThemeSnippetDialog, {
+		onClose: () => setSnippetOpen(!1),
+		theme: active
+	}), $[35] = active, $[36] = snippetOpen, $[37] = t14) : t14 = $[37];
+	let t15;
+	return $[38] !== t13 || $[39] !== t14 ? (t15 = /* @__PURE__ */ jsxs(Card, {
+		height: "fill",
+		children: [t13, t14]
+	}), $[38] = t13, $[39] = t14, $[40] = t15) : t15 = $[40], t15;
 }
 /**
-* 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.
+* The narrowest the sidebar goes — and its default: narrow enough to leave the
+* studio preview as much room as possible, while the themes stack in a single
+* column of preview cards and the editor fits a swatch next to its label.
 */
-const sidebarStyle = {
-	width: 240,
-	flex: "none",
-	borderLeft: "1px solid var(--card-border-color)",
-	boxSizing: "border-box",
-	overflow: "hidden"
-};
+const WIDTH_STORAGE_KEY = "sanityStudio:themer:width";
+function clampWidth(width) {
+	return Math.min(400, Math.max(200, Math.round(width)));
+}
+function readStoredWidth() {
+	try {
+		let stored = Number(localStorage.getItem(WIDTH_STORAGE_KEY));
+		return Number.isFinite(stored) && stored > 0 ? clampWidth(stored) : 200;
+	} catch {
+		return 200;
+	}
+}
+function writeStoredWidth(width) {
+	try {
+		width === 200 ? localStorage.removeItem(WIDTH_STORAGE_KEY) : localStorage.setItem(WIDTH_STORAGE_KEY, String(width));
+	} catch {}
+}
+const Sidebar = styled(Layer).withConfig({
+	displayName: "Sidebar",
+	componentId: "sc-ryrt6y-0"
+})`flex:none;`, Frame = styled(Card).withConfig({
+	displayName: "Frame",
+	componentId: "sc-ryrt6y-1"
+})`position:relative;`, ResizeHandle = styled.div.withConfig({
+	displayName: "ResizeHandle",
+	componentId: "sc-ryrt6y-2"
+})`position:absolute;top:0;bottom:0;left:-3px;z-index:1;width:7px;cursor:col-resize;touch-action:none;&::after{content:'';position:absolute;top:0;bottom:0;left:2px;width:3px;background:var(--card-focus-ring-color);opacity:0;transition:opacity 100ms;}&:hover::after,&:focus-visible::after,&[data-dragging='true']::after{opacity:1;}&:focus{outline:none;}`;
 /**
-* Renders the themer sidebar next to the active tool, so the user can browse
-* around their own studio while tweaking the theme.
+* The themer sidebar, in a layer along the right edge of the Studio. Its left
+* edge drags (or arrow-keys) it wider, up to twice its default width — the
+* width sticks between sessions.
 *
 * @internal
 */
-function ThemerActiveToolLayout(props) {
-	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);
+function ResizableSidebar() {
+	let $ = c(21), [width, setWidth] = useState(readStoredWidth), [dragging, setDragging] = useState(!1), drag = useRef(null), t0, t1;
+	$[0] === width ? (t0 = $[1], t1 = $[2]) : (t0 = () => writeStoredWidth(width), t1 = [width], $[0] = width, $[1] = t0, $[2] = t1), useEffect(t0, t1);
 	let t2;
-	$[4] === open ? t2 = $[5] : (t2 = open && /* @__PURE__ */ jsx(Layer, {
+	$[3] === width ? t2 = $[4] : (t2 = (event) => {
+		event.button === 0 && (event.preventDefault(), event.currentTarget.setPointerCapture(event.pointerId), drag.current = {
+			pointerId: event.pointerId,
+			startX: event.clientX,
+			startWidth: width
+		}, setDragging(!0));
+	}, $[3] = width, $[4] = t2);
+	let handlePointerDown = t2, t3;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t3 = (event_0) => {
+		drag.current && drag.current.pointerId === event_0.pointerId && setWidth(clampWidth(drag.current.startWidth - (event_0.clientX - drag.current.startX)));
+	}, $[5] = t3) : t3 = $[5];
+	let handlePointerMove = t3, t4;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event_1) => {
+		drag.current && drag.current.pointerId === event_1.pointerId && (drag.current = null, setDragging(!1));
+	}, $[6] = t4) : t4 = $[6];
+	let handlePointerUp = t4, t5;
+	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (event_2) => {
+		let step = {
+			ArrowLeft: 16,
+			ArrowRight: -16,
+			Home: 400,
+			End: -400
+		}[event_2.key];
+		step !== void 0 && (event_2.preventDefault(), setWidth((current) => clampWidth(current + step)));
+	}, $[7] = t5) : t5 = $[7];
+	let handleKeyDown = t5, t6;
+	$[8] === width ? t6 = $[9] : (t6 = { width }, $[8] = width, $[9] = t6);
+	let t7;
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t7 = () => setWidth(200), $[10] = t7) : t7 = $[10];
+	let t8;
+	$[11] !== dragging || $[12] !== handlePointerDown || $[13] !== width ? (t8 = /* @__PURE__ */ jsx(ResizeHandle, {
+		"aria-label": "Resize the themer",
+		"aria-orientation": "vertical",
+		"aria-valuemax": 400,
+		"aria-valuemin": 200,
+		"aria-valuenow": width,
+		"data-dragging": dragging,
+		onDoubleClick: t7,
+		onKeyDown: handleKeyDown,
+		onPointerCancel: handlePointerUp,
+		onPointerDown: handlePointerDown,
+		onPointerMove: handlePointerMove,
+		onPointerUp: handlePointerUp,
+		role: "separator",
+		tabIndex: 0
+	}), $[11] = dragging, $[12] = handlePointerDown, $[13] = width, $[14] = t8) : t8 = $[14];
+	let t9;
+	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(Box, {
 		height: "fill",
-		style: sidebarStyle,
-		zOffset: 100,
+		overflow: "hidden",
 		children: /* @__PURE__ */ jsx(ThemerSidebar, {})
-	}), $[4] = open, $[5] = t2);
-	let t3;
-	return $[6] !== t1 || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Flex, {
+	}), $[15] = t9) : t9 = $[15];
+	let t10;
+	$[16] === t8 ? t10 = $[17] : (t10 = /* @__PURE__ */ jsxs(Frame, {
+		borderLeft: !0,
 		height: "fill",
-		sizing: "border",
-		children: [t1, t2]
-	}), $[6] = t1, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
+		children: [t8, t9]
+	}), $[16] = t8, $[17] = t10);
+	let t11;
+	return $[18] !== t10 || $[19] !== t6 ? (t11 = /* @__PURE__ */ jsx(Sidebar, {
+		style: t6,
+		zOffset: 100,
+		children: t10
+	}), $[18] = t10, $[19] = t6, $[20] = t11) : t11 = $[20], t11;
 }
-const STORAGE_KEY = "sanityStudio:themer:options";
+const STORAGE_KEY = "sanityStudio:themer:state", LEGACY_STORAGE_KEY = "sanityStudio:themer:options";
 function sanitizeColor(value) {
 	return typeof value == "string" && isColor(value) ? value.toLowerCase() : null;
 }
-function sanitizeOptions(value) {
-	if (!value || typeof value != "object") return null;
+function sanitizeContrast(value) {
+	return typeof value == "number" && Number.isFinite(value) ? Math.min(100, Math.max(15, value)) : null;
+}
+function sanitizeSchemeOptions(value) {
+	let options = {};
+	if (!value || typeof value != "object") return options;
+	let accent = sanitizeColor(Reflect.get(value, "accent")), text = sanitizeColor(Reflect.get(value, "text")), background = sanitizeColor(Reflect.get(value, "background")), contrast = sanitizeContrast(Reflect.get(value, "contrast"));
+	return accent && (options.accent = accent), text && (options.text = text), background && (options.background = background), contrast !== null && (options.contrast = contrast), options;
+}
+/**
+* Options from before they were grouped by scheme: one accent, text color and
+* contrast for both schemes, and a background per scheme. Both schemes get
+* the shared colors, so the theme keeps looking the same.
+*/
+function sanitizeFlatOptions(value) {
 	let accent = sanitizeColor(Reflect.get(value, "accent"));
 	if (!accent) return null;
-	let options = { accent }, text = sanitizeColor(Reflect.get(value, "text"));
-	text && (options.text = text);
-	let background = Reflect.get(value, "background");
-	if (background && typeof background == "object") {
-		let dark = sanitizeColor(Reflect.get(background, "dark")), light = sanitizeColor(Reflect.get(background, "light"));
-		(dark || light) && (options.background = {}, dark && (options.background.dark = dark), light && (options.background.light = light));
+	let shared = { accent }, text = sanitizeColor(Reflect.get(value, "text")), contrast = sanitizeContrast(Reflect.get(value, "contrast"));
+	text && (shared.text = text), contrast !== null && (shared.contrast = contrast);
+	let backgrounds = Reflect.get(value, "background"), options = {};
+	for (let scheme of SCHEMES) {
+		let background = backgrounds && typeof backgrounds == "object" ? sanitizeColor(Reflect.get(backgrounds, scheme)) : null;
+		options[scheme] = background ? {
+			...shared,
+			background
+		} : { ...shared };
+	}
+	return options;
+}
+function sanitizeOptions(value) {
+	if (!value || typeof value != "object") return null;
+	if ("accent" in value) return sanitizeFlatOptions(value);
+	let options = {};
+	for (let scheme of SCHEMES) {
+		let schemeOptions = sanitizeSchemeOptions(Reflect.get(value, scheme));
+		Object.keys(schemeOptions).length > 0 && (options[scheme] = schemeOptions);
+	}
+	return options;
+}
+function isReservedSlug(slug) {
+	return slug === "config" || presets.some((preset) => preset.slug === slug);
+}
+function sanitizeCustomTheme(value) {
+	if (!value || typeof value != "object") return null;
+	let slug = Reflect.get(value, "slug");
+	if (typeof slug != "string" || !slug || isReservedSlug(slug)) return null;
+	let options = sanitizeOptions(Reflect.get(value, "options"));
+	if (!options) return null;
+	let title = Reflect.get(value, "title"), palette = sanitizePalette(Reflect.get(value, "palette"));
+	return {
+		slug,
+		title: displayTitle(typeof title == "string" ? title : ""),
+		options,
+		...palette ? { palette } : {}
+	};
+}
+function sanitizePalette(value) {
+	if (!value || typeof value != "object") return null;
+	let palette = {}, swatches = 0;
+	for (let key of IMAGE_PALETTE_KEYS) {
+		let swatch = sanitizeColor(Reflect.get(value, key));
+		palette[key] = swatch, swatch && swatches++;
 	}
-	let contrast = Reflect.get(value, "contrast");
-	return typeof contrast == "number" && Number.isFinite(contrast) && (options.contrast = Math.min(100, Math.max(15, contrast))), options;
+	return swatches > 0 ? palette : null;
+}
+function sanitizeState(value) {
+	if (!value || typeof value != "object") return initialThemerState;
+	let custom = [], rawCustom = Reflect.get(value, "custom");
+	if (Array.isArray(rawCustom)) for (let item of rawCustom) {
+		let theme = sanitizeCustomTheme(item);
+		theme && !custom.some((existing) => existing.slug === theme.slug) && custom.push(theme);
+	}
+	let removed = [], rawRemoved = Reflect.get(value, "removed");
+	if (Array.isArray(rawRemoved)) for (let slug of rawRemoved) typeof slug == "string" && slug !== "config" && (presets.some((preset) => preset.slug === slug) || custom.some((theme) => theme.slug === slug)) && !removed.includes(slug) && removed.push(slug);
+	let rawActive = Reflect.get(value, "active");
+	return {
+		active: typeof rawActive == "string" ? rawActive : null,
+		custom,
+		removed
+	};
+}
+function readLegacyState() {
+	let raw = localStorage.getItem(LEGACY_STORAGE_KEY);
+	if (!raw) return null;
+	let options = sanitizeOptions(JSON.parse(raw));
+	if (!options) return null;
+	let theme = createCustomTheme("Draft theme", options);
+	return {
+		active: theme.slug,
+		custom: [theme],
+		removed: []
+	};
 }
 /**
-* Restores draft theme options from localStorage, so theme drafts survive
-* studio reloads.
+* Restores the themer state from localStorage, so the user's themes survive
+* studio reloads. Falls back to the initial state when nothing usable is
+* stored.
 *
 * @internal
 */
-function readStoredOptions() {
+function readStoredState() {
 	try {
-		if (typeof localStorage > "u") return null;
+		if (typeof localStorage > "u") return initialThemerState;
 		let raw = localStorage.getItem(STORAGE_KEY);
-		return raw ? sanitizeOptions(JSON.parse(raw)) : null;
+		return raw ? sanitizeState(JSON.parse(raw)) : readLegacyState() ?? initialThemerState;
 	} catch {
-		return null;
+		return initialThemerState;
 	}
 }
 /** @internal */
-function writeStoredOptions(options) {
+function writeStoredState(state) {
 	try {
 		if (typeof localStorage > "u") return;
-		options === null ? localStorage.removeItem(STORAGE_KEY) : localStorage.setItem(STORAGE_KEY, JSON.stringify(options));
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(state)), localStorage.removeItem(LEGACY_STORAGE_KEY);
 	} catch {}
 }
+function sameStoredState(a, b) {
+	return a.active === b.active && a.custom === b.custom && a.removed === b.removed;
+}
+function selectView(snapshot) {
+	let { editing } = snapshot.context;
+	return snapshot.matches({ flow: "edit" }) && editing ? {
+		name: "edit",
+		slug: editing.slug,
+		focusTitle: editing.focusTitle
+	} : snapshot.matches({ flow: "removed" }) ? { name: "removed" } : { name: "list" };
+}
+function sameView(a, b) {
+	return a.name === b.name ? a.name !== "edit" || b.name !== "edit" || a.slug === b.slug && a.focusTitle === b.focusTitle : !1;
+}
 /**
-* Wraps the whole Studio so that draft themes generated by the themer sidebar
-* apply everywhere while the user browses around, and hosts the state that the
-* navbar toggle and the sidebar share.
+* Wraps the whole Studio so that the theme picked in the themer sidebar
+* applies everywhere while the user browses around, runs the themer machine
+* that the navbar toggle and the sidebar share — the user's themes, which one
+* is applied, which flow the sidebar is in and how the Studio is previewed —
+* and renders the sidebar next to the Studio. The sidebar sits at the
+* `layout` level rather than in `activeToolLayout` because the split preview
+* renders the Studio twice, and the sidebar must not come along.
 *
-* The draft theme provider inherits the color scheme from the Studio, so the
-* preview follows the appearance setting (light/dark/system) like any other
-* theme.
+* The single preview inherits the color scheme from the Studio, so it follows
+* the appearance setting (light/dark/system) like any other theme.
 *
 * @internal
 */
 function ThemerLayout(props) {
-	let $ = c(13), { baseOptions, ...layoutProps } = props, [open, setOpen] = useState(!1), [options, setOptions] = useState(readStoredOptions), t0, t1;
-	$[0] === options ? (t0 = $[1], t1 = $[2]) : (t0 = () => writeStoredOptions(options), t1 = [options], $[0] = options, $[1] = t0, $[2] = t1), useEffect(t0, t1);
-	let t2;
-	$[3] === options ? t2 = $[4] : (t2 = options === null ? null : buildTheme(options), $[3] = options, $[4] = t2);
-	let theme = t2, t3;
-	$[5] !== baseOptions || $[6] !== open || $[7] !== options ? (t3 = {
+	let $ = c(55), { baseOptions, ...layoutProps } = props, t0;
+	$[0] === baseOptions ? t0 = $[1] : (t0 = () => ({
 		baseOptions,
-		options,
-		setOptions,
+		stored: readStoredState()
+	}), $[0] = baseOptions, $[1] = t0);
+	let [input] = useState(t0), t1;
+	$[2] === input ? t1 = $[3] : (t1 = { input }, $[2] = input, $[3] = t1);
+	let [snapshot, send, actorRef] = useActor(themerMachine, t1), stored = useSelector(actorRef, selectStoredState, sameStoredState), view = useSelector(actorRef, selectView, sameView), t2;
+	$[4] === snapshot ? t2 = $[5] : (t2 = snapshot.matches({ sidebar: "open" }), $[4] = snapshot, $[5] = t2);
+	let open = t2, t3;
+	$[6] === snapshot ? t3 = $[7] : (t3 = snapshot.matches({ preview: "split" }), $[6] = snapshot, $[7] = t3);
+	let split = t3, { images } = snapshot.context, t4, t5;
+	$[8] === stored ? (t4 = $[9], t5 = $[10]) : (t4 = () => writeStoredState(stored), t5 = [stored], $[8] = stored, $[9] = t4, $[10] = t5), useEffect(t4, t5);
+	let previousImages = useRef(images), t6, t7;
+	$[11] === images ? (t6 = $[12], t7 = $[13]) : (t6 = () => {
+		let current = new Set(Object.values(images));
+		for (let url of Object.values(previousImages.current)) current.has(url) || URL.revokeObjectURL(url);
+		previousImages.current = images;
+	}, t7 = [images], $[11] = images, $[12] = t6, $[13] = t7), useEffect(t6, t7);
+	let t8, t9;
+	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t8 = () => () => {
+		for (let url_0 of Object.values(previousImages.current)) URL.revokeObjectURL(url_0);
+	}, t9 = [], $[14] = t8, $[15] = t9) : (t8 = $[14], t9 = $[15]), useEffect(t8, t9);
+	let t10;
+	$[16] !== baseOptions || $[17] !== stored ? (t10 = resolveThemes(stored, baseOptions), $[16] = baseOptions, $[17] = stored, $[18] = t10) : t10 = $[18];
+	let { themes, removed, active } = t10, activeOptions = active.source === "config" ? null : active.options, t11;
+	$[19] === activeOptions ? t11 = $[20] : (t11 = activeOptions === null ? null : buildTheme(activeOptions), $[19] = activeOptions, $[20] = t11);
+	let theme = t11, scheme = useColorSchemeValue(), t12;
+	$[21] !== scheme || $[22] !== theme?.v2?.color ? (t12 = () => {
+		let background = theme?.v2?.color[scheme].default.bg;
+		if (background === void 0) return;
+		let { style } = document.body, previous = style.backgroundColor;
+		return style.backgroundColor = background, () => {
+			style.backgroundColor = previous;
+		};
+	}, $[21] = scheme, $[22] = theme?.v2?.color, $[23] = t12) : t12 = $[23];
+	let t13;
+	$[24] !== scheme || $[25] !== theme ? (t13 = [scheme, theme], $[24] = scheme, $[25] = theme, $[26] = t13) : t13 = $[26], useEffect(t12, t13);
+	let t14;
+	$[27] !== active || $[28] !== baseOptions || $[29] !== images || $[30] !== open || $[31] !== removed || $[32] !== send || $[33] !== split || $[34] !== themes || $[35] !== view ? (t14 = {
+		baseOptions,
+		themes,
+		removed,
+		active,
+		images,
+		view,
 		open,
-		setOpen
-	}, $[5] = baseOptions, $[6] = open, $[7] = options, $[8] = t3) : t3 = $[8];
-	let context = t3, t4 = ThemerContext, t5 = theme === null ? layoutProps.renderDefault(layoutProps) : /* @__PURE__ */ jsx(ThemeProvider, {
+		split,
+		send
+	}, $[27] = active, $[28] = baseOptions, $[29] = images, $[30] = open, $[31] = removed, $[32] = send, $[33] = split, $[34] = themes, $[35] = view, $[36] = t14) : t14 = $[36];
+	let context = t14, studio = layoutProps.renderDefault(layoutProps), t15 = split ? "light" : void 0, t16;
+	$[37] !== studio || $[38] !== t15 || $[39] !== theme ? (t16 = /* @__PURE__ */ jsx(StudioPreview, {
+		scheme: t15,
 		theme,
-		children: layoutProps.renderDefault(layoutProps)
-	}), t6;
-	return $[9] !== context || $[10] !== t4.Provider || $[11] !== t5 ? (t6 = /* @__PURE__ */ jsx(t4.Provider, {
+		children: studio
+	}), $[37] = studio, $[38] = t15, $[39] = theme, $[40] = t16) : t16 = $[40];
+	let t17;
+	$[41] !== split || $[42] !== studio || $[43] !== theme ? (t17 = split && /* @__PURE__ */ jsx(StudioPreview, {
+		borderLeft: !0,
+		scheme: "dark",
+		theme,
+		children: studio
+	}), $[41] = split, $[42] = studio, $[43] = theme, $[44] = t17) : t17 = $[44];
+	let t18;
+	$[45] !== open || $[46] !== theme ? (t18 = open && /* @__PURE__ */ jsx(ThemeProvider, {
+		theme: theme ?? void 0,
+		children: /* @__PURE__ */ jsx(ResizableSidebar, {})
+	}), $[45] = open, $[46] = theme, $[47] = t18) : t18 = $[47];
+	let t19;
+	$[48] !== t16 || $[49] !== t17 || $[50] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Flex, {
+		height: "fill",
+		sizing: "border",
+		children: [
+			t16,
+			t17,
+			t18
+		]
+	}), $[48] = t16, $[49] = t17, $[50] = t18, $[51] = t19) : t19 = $[51];
+	let t20;
+	return $[52] !== context || $[53] !== t19 ? (t20 = /* @__PURE__ */ jsx(ThemerContext.Provider, {
 		value: context,
-		children: t5
-	}), $[9] = context, $[10] = t4.Provider, $[11] = t5, $[12] = t6) : t6 = $[12], t6;
+		children: t19
+	}), $[52] = context, $[53] = t19, $[54] = t20) : t20 = $[54], t20;
+}
+/**
+* One copy of the Studio, in the given color scheme — or, without one, in the
+* scheme the Studio is showing. The configured theme (`null`) goes through
+* the provider too, inheriting the Studio's, so picking a theme swaps it
+* instead of remounting the Studio under a new provider.
+*
+* The two copies of the split preview share the router, the document store
+* and every other provider above the layout — only the scheme differs — so
+* they stay in sync while navigating. The `color-scheme` of a forced scheme
+* keeps native form controls and scrollbars in step with it.
+*/
+function StudioPreview(props) {
+	let $ = c(10), { borderLeft, children, scheme, theme } = props, t0 = theme ?? void 0, t1;
+	$[0] === scheme ? t1 = $[1] : (t1 = scheme ? { colorScheme: scheme } : void 0, $[0] = scheme, $[1] = t1);
+	let t2;
+	$[2] !== borderLeft || $[3] !== children || $[4] !== t1 ? (t2 = /* @__PURE__ */ jsx(Card, {
+		borderLeft,
+		flex: 1,
+		height: "fill",
+		overflow: "hidden",
+		style: t1,
+		children
+	}), $[2] = borderLeft, $[3] = children, $[4] = t1, $[5] = t2) : t2 = $[5];
+	let t3;
+	return $[6] !== scheme || $[7] !== t0 || $[8] !== t2 ? (t3 = /* @__PURE__ */ jsx(ThemeProvider, {
+		scheme,
+		theme: t0,
+		children: t2
+	}), $[6] = scheme, $[7] = t0, $[8] = t2, $[9] = t3) : t3 = $[9], t3;
 }
 function ThemerNavbarButton() {
-	let $ = c(7), { open, setOpen } = useThemer(), t0;
+	let $ = c(6), { open, send } = 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];
+	$[1] === send ? t1 = $[2] : (t1 = () => send({ type: "sidebar.toggle" }), $[1] = send, $[2] = t1);
 	let t2;
-	return $[4] !== open || $[5] !== t1 ? (t2 = /* @__PURE__ */ jsx(Tooltip, {
+	return $[3] !== open || $[4] !== t1 ? (t2 = /* @__PURE__ */ jsx(Tooltip, {
+		animate: !0,
 		content: t0,
 		portal: !0,
 		children: /* @__PURE__ */ jsx(Button, {
@@ -659,22 +2596,25 @@ function ThemerNavbarButton() {
 			padding: 2,
 			selected: open
 		})
-	}), $[4] = open, $[5] = t1, $[6] = t2) : t2 = $[6], t2;
+	}), $[3] = open, $[4] = t1, $[5] = t2) : t2 = $[5], t2;
 }
 /**
 * Adds the toggle that opens and closes the themer sidebar to the Studio
 * 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.
 *
+* In the split preview every Studio copy renders its own navbar, so the
+* toggle shows up in both — they drive the same sidebar.
+*
 * @internal
 */
 function ThemerNavbar(props) {
-	let $ = c(10), { open, setOpen } = useThemer(), t0;
+	let $ = c(9), { open, send } = useThemer(), t0;
 	$[0] === props.__internal_actions ? t0 = $[1] : (t0 = props.__internal_actions ?? [], $[0] = props.__internal_actions, $[1] = t0);
 	let t1;
-	if ($[2] !== open || $[3] !== props || $[4] !== setOpen || $[5] !== t0) {
+	if ($[2] !== open || $[3] !== props || $[4] !== send || $[5] !== t0) {
 		let t2;
-		$[7] !== open || $[8] !== setOpen ? (t2 = () => setOpen(!open), $[7] = open, $[8] = setOpen, $[9] = t2) : t2 = $[9], t1 = props.renderDefault({
+		$[7] === send ? t2 = $[8] : (t2 = () => send({ type: "sidebar.toggle" }), $[7] = send, $[8] = t2), t1 = props.renderDefault({
 			...props,
 			__internal_actions: [
 				...t0,
@@ -692,7 +2632,7 @@ function ThemerNavbar(props) {
 					title: "Themer"
 				}
 			]
-		}), $[2] = open, $[3] = props, $[4] = setOpen, $[5] = t0, $[6] = t1;
+		}), $[2] = open, $[3] = props, $[4] = send, $[5] = t0, $[6] = t1;
 	} else t1 = $[6];
 	return t1;
 }
@@ -701,11 +2641,16 @@ function _temp() {
 }
 /**
 * A Studio plugin that adds a themer sidebar for `buildTheme` themes: a
-* navbar toggle opens the sidebar next to the active tool, where presets, the
-* accent/text/background pickers and the contrast slider preview a
-* `buildTheme` 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.
+* navbar toggle opens the sidebar next to the Studio, with a list of themes —
+* the configured theme, the presets and your own — each previewed as a tiny
+* Studio in both color schemes. Picking one applies it live to the whole
+* Studio while you browse around; your own themes can be edited with
+* accent/text/background pickers and a contrast slider per scheme, added,
+* duplicated, given the colors of an image (its palette is read on device),
+* removed and restored, and a dialog shows the `buildTheme` snippet that
+* makes the applied theme permanent. Toggle between light and dark mode with
+* the regular appearance menu — the preview follows it — or split the
+* preview to see the whole Studio in light and dark side by side.
 *
 * ```ts
 * import {themerTool} from '@sanity/themer/tool'
@@ -723,7 +2668,7 @@ function _temp() {
 * @alpha
 */
 const themerTool = definePlugin((options) => {
-	let baseOptions = options?.config ?? { accent: DEFAULT_ACCENT };
+	let baseOptions = options?.config ?? {};
 	function ThemerLayoutWithOptions(props) {
 		let $ = c(2), t0;
 		return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(ThemerLayout, {
@@ -735,8 +2680,7 @@ const themerTool = definePlugin((options) => {
 		name: "@sanity/themer/tool",
 		studio: { components: {
 			layout: ThemerLayoutWithOptions,
-			navbar: ThemerNavbar,
-			activeToolLayout: ThemerActiveToolLayout
+			navbar: ThemerNavbar
 		} }
 	};
 });