@sanity/themer 0.6.1 → 0.7.1

package/dist/tool.js

@@ -4,8 +4,8 @@ import { c } from "react/compiler-runtime";
 import { definePlugin, useColorSchemeValue } from "sanity";
 import { Badge, Box, Button, Card, Dialog, Flex, Layer, Stack, Text, TextInput, ThemeProvider, useMediaIndex, useRootTheme, useTheme_v2 } from "@sanity/ui";
 import { useActor, useSelector } from "@xstate/react";
-import { Activity, ViewTransition, addTransitionType, createContext, startTransition, useContext, useEffect, useRef, useState } from "react";
-import { assign, not, setup, stateIn } from "xstate";
+import { Activity, ViewTransition, addTransitionType, createContext, startTransition, useContext, useDeferredValue, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { assign, not, or, setup, stateIn } from "xstate";
 import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
 import { CloseIcon } from "@sanity/icons/Close";
 import { CodeBlockIcon } from "@sanity/icons/CodeBlock";
@@ -19,6 +19,7 @@ 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 { ClipboardIcon } from "@sanity/icons/Clipboard";
 import { RestoreIcon } from "@sanity/icons/Restore";
 import { MotionConfig, Reorder, useDragControls } from "motion/react";
 import { ArrowDownIcon } from "@sanity/icons/ArrowDown";
@@ -26,9 +27,9 @@ import { ArrowUpIcon } from "@sanity/icons/ArrowUp";
 import { CopyIcon } from "@sanity/icons/Copy";
 import { EditIcon } from "@sanity/icons/Edit";
 import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
+import { ShareIcon } from "@sanity/icons/Share";
 import { Menu, MenuButton, MenuDivider, MenuItem } from "@sanity/ui/menu";
 import scrollIntoView from "scroll-into-view-if-needed";
-import { ClipboardIcon } from "@sanity/icons/Clipboard";
 import { Code } from "@sanity/ui/code";
 import { registerLanguage } from "react-refractor";
 import typescript from "refractor/typescript";
@@ -41,951 +42,1300 @@ function useThemer() {
 	if (!context) throw Error("useThemer must be used within the `themerTool` plugin");
 	return context;
 }
+/** @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
+		]
+	}]
+];
 /**
-* Reduces theme options to the minimal object that recreates them through
-* `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.
+* 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 minimizeOptions(options) {
-	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);
+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 Object.keys(minimized).length === 0 ? null : minimized;
+	return palette.dominant = candidates.reduce((most, candidate) => candidate.population > most.population ? candidate : most).hex, palette;
 }
 /**
-* Whether two sets of theme options generate the same theme, comparing their
-* resolved forms so that derived and explicit values (and hex casing) don't
-* matter.
-*
-* @internal
+* 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 sameOptions(a, b) {
-	let left = resolveThemeOptions(a), right = resolveThemeOptions(b);
-	return SCHEMES.every((scheme) => sameScheme(left[scheme], right[scheme]));
+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 sameScheme(a, b) {
-	return a.accent === b.accent && a.text === b.text && a.background === b.background && a.contrast === b.contrast;
+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];
 }
-/** The slug of the theme the Studio config was generated from @internal */
-const initialThemerState = {
-	active: null,
-	custom: [],
-	removed: [],
-	order: []
-};
-/**
-* 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 — rearranged into the order the user dragged them into,
-* with themes that order does not know about kept in that default order after
-* the ones it does. 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 position = new Map(state.order.map((slug, index) => [slug, index])), rank = (theme) => position.get(theme.slug) ?? state.order.length;
-	all.sort((a, b) => rank(a) - rank(b));
-	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
-	};
+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);
 }
-/**
-* Creates a custom theme with a slug that cannot collide with the presets or
-* the configured theme.
-*
-* @internal
-*/
-function createCustomTheme(title, options, palette) {
+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 {
-		slug: `custom-${randomId()}`,
-		title,
-		options,
-		...palette ? { palette } : {}
+		saturation: delta === 0 ? 0 : lightness > .5 ? delta / (2 - max - min) : delta / (max + min),
+		lightness
 	};
 }
-/** 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 rgbToHex(r, g, b) {
+	return `#${[
+		r,
+		g,
+		b
+	].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
 }
-function randomId() {
-	return typeof crypto < "u" && typeof crypto.randomUUID == "function" ? crypto.randomUUID() : `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 10)}`;
+/** 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)
+	];
 }
-function themesOf(context) {
-	return resolveThemes(context, context.baseOptions);
+/** 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);
 }
 /**
-* 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.
+* 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
 */
-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) })),
-		reorder: assign(({ context }, params) => {
-			let listed = new Set(themesOf(context).themes.map((theme) => theme.slug)), order = params.order.filter((slug) => listed.has(slug));
-			return { order: [...order, ...context.order.filter((slug) => !order.includes(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",
-					"sidebar.close": "single",
-					"sidebar.toggle": {
-						guard: stateIn({ sidebar: "open" }),
-						target: "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 })
-				} },
-				"theme.reorder": { actions: {
-					type: "reorder",
-					params: ({ event }) => ({ order: event.order })
-				} },
-				"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"
-				} }
-			}
-		}
+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
+		});
 	}
-});
-/** The part of the machine context that is persisted between sessions @internal */
-function selectStoredState(snapshot) {
-	let { active, custom, removed, order } = snapshot.context;
-	return {
-		active,
-		custom,
-		removed,
-		order
-	};
+	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);
 }
-var root$2 = "_1o50s7t0";
-const ScrollAreaInsetContext = createContext({
-	left: 0,
-	right: 0,
-	bottom: 0
-});
-/**
-* The gutter the last scroll area measured. It is the same for every scroll
-* area (the reserved gutter does not depend on the content), so the next one
-* starts out with the right padding instead of shifting after its first
-* measurement — which would also throw off anything scrolling into view as
-* the content mounts.
-*/
-let lastGutter = 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.
+* 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 ScrollArea(props) {
-	let $ = c(15), { children, padding } = props, { space } = useTheme_v2(), ref = useRef(null), [gutter, setGutter] = useState(_temp$7), t0, t1;
-	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
-		let element = ref.current;
-		if (!element) return;
-		let measure = () => {
-			lastGutter = element.offsetWidth - element.clientWidth, setGutter(lastGutter);
-		};
-		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(Box, {
-		className: root$2,
-		flex: 1,
-		overflow: "auto",
-		padding,
-		ref,
-		style: t6,
-		children: t7
-	}), $[11] = padding, $[12] = t6, $[13] = t7, $[14] = t8) : t8 = $[14], t8;
+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 _temp$7() {
-	return lastGutter;
+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;
 }
 /**
-* 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.
+* 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 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;
+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;
 }
-var avatar = "_1aa9huuh", body = "_1aa9huui", button = "_1aa9huuq", colors = {
-	bg: "var(--_1aa9huu0)",
-	fg: "var(--_1aa9huu1)",
-	mutedFg: "var(--_1aa9huu2)",
-	border: "var(--_1aa9huu3)",
-	accent: "var(--_1aa9huu4)",
-	avatar: "var(--_1aa9huu5)",
-	selectedBg: "var(--_1aa9huu6)",
-	selectedFg: "var(--_1aa9huu7)",
-	inputBg: "var(--_1aa9huu8)",
-	inputBorder: "var(--_1aa9huu9)"
-}, field = "_1aa9huun", footer = "_1aa9huup", form = "_1aa9huum", input = "_1aa9huuo", line = {
-	fg: "_1aa9huus _1aa9huur",
-	muted: "_1aa9huut _1aa9huur",
-	selected: "_1aa9huuu _1aa9huur"
-}, list = "_1aa9huuj", listRow = "_1aa9huuk", logo = "_1aa9huuf", navbar = "_1aa9huue", pane = "_1aa9huul", root$1 = "_1aa9huua", spacer = "_1aa9huug", studio = {
-	light: "_1aa9huub",
-	dark: "_1aa9huud _1aa9huub"
-};
-/** The document rows in the list pane — the widths of their title lines */
-const 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.
+* 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 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, { scheme: "light" }), $[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, { scheme: "dark" }), $[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("div", {
-		"aria-hidden": !0,
-		className: root$1,
-		children: [t2, t4]
-	}), $[8] = t2, $[9] = t4, $[10] = t5) : t5 = $[10], t5;
-}
-function MockStudio(props) {
-	let $ = c(19), { scheme } = props, { color } = useTheme_v2(), selected = color.selectable.default.selected, inputColor = color.input.default.enabled, t0 = studio[scheme], t1;
-	$[0] !== color.avatar.blue.bg || $[1] !== color.bg || $[2] !== color.border || $[3] !== color.button.default.primary.enabled.bg || $[4] !== color.fg || $[5] !== color.muted.fg || $[6] !== inputColor.bg || $[7] !== inputColor.border || $[8] !== selected.bg || $[9] !== selected.fg ? (t1 = assignInlineVars({
-		[colors.bg]: color.bg,
-		[colors.fg]: color.fg,
-		[colors.mutedFg]: color.muted.fg,
-		[colors.border]: color.border,
-		[colors.accent]: color.button.default.primary.enabled.bg,
-		[colors.avatar]: color.avatar.blue.bg,
-		[colors.selectedBg]: selected.bg,
-		[colors.selectedFg]: selected.fg,
-		[colors.inputBg]: inputColor.bg,
-		[colors.inputBorder]: inputColor.border
-	}), $[0] = color.avatar.blue.bg, $[1] = color.bg, $[2] = color.border, $[3] = color.button.default.primary.enabled.bg, $[4] = color.fg, $[5] = color.muted.fg, $[6] = inputColor.bg, $[7] = inputColor.border, $[8] = selected.bg, $[9] = selected.fg, $[10] = t1) : t1 = $[10];
-	let t2;
-	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx("div", { className: logo }), $[11] = t2) : t2 = $[11];
-	let t3;
-	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsxs("div", {
-		className: navbar,
-		children: [
-			t2,
-			/* @__PURE__ */ jsx("div", {
-				className: line.fg,
-				style: { width: "22%" }
-			}),
-			/* @__PURE__ */ jsx("div", { className: spacer }),
-			/* @__PURE__ */ jsx("div", { className: avatar })
-		]
-	}), $[12] = t3) : t3 = $[12];
-	let t4;
-	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx("div", {
-		className: list,
-		children: LIST_ROWS.map(_temp$6)
-	}), $[13] = t4) : t4 = $[13];
-	let t5;
-	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsxs("div", {
-		className: form,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: line.fg,
-			style: { width: "45%" }
-		}), FIELDS.map(_temp2)]
-	}), $[14] = t5) : t5 = $[14];
-	let t6;
-	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t6 = /* @__PURE__ */ jsxs("div", {
-		className: body,
-		children: [t4, /* @__PURE__ */ jsxs("div", {
-			className: pane,
-			children: [t5, /* @__PURE__ */ jsx("div", {
-				className: footer,
-				children: /* @__PURE__ */ jsx("div", { className: button })
-			})]
-		})]
-	}), $[15] = t6) : t6 = $[15];
-	let t7;
-	return $[16] !== t0 || $[17] !== t1 ? (t7 = /* @__PURE__ */ jsxs("div", {
-		className: t0,
-		style: t1,
-		children: [t3, t6]
-	}), $[16] = t0, $[17] = t1, $[18] = t7) : t7 = $[18], t7;
-}
-function _temp2(width_0) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: field,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: line.muted,
-			style: { width: width_0 }
-		}), /* @__PURE__ */ jsx("div", { className: input })]
-	}, width_0);
-}
-function _temp$6(width, index) {
-	let isSelected = index === 1;
-	return /* @__PURE__ */ jsx("div", {
-		className: listRow,
-		"data-selected": isSelected,
-		children: /* @__PURE__ */ jsx("div", {
-			className: isSelected ? line.selected : line.muted,
-			style: { width }
-		})
-	}, width);
+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;
 }
 /**
-* 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
+* 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 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;
+function interest(hex) {
+	let { s, l } = hexToHsl(hex);
+	return .1 + .55 * s + .35 * (1 - Math.abs(l - .5) * 2);
 }
-var removedThumbnail = "_1vdkp0v0";
 /**
-* 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.
+* 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 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, {
-					className: removedThumbnail,
-					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;
+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";
 }
-/** @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.
+* Reduces theme options to the minimal object that recreates them through
+* `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 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));
+function minimizeOptions(options) {
+	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 palette.dominant = candidates.reduce((most, candidate) => candidate.population > most.population ? candidate : most).hex, palette;
+	return Object.keys(minimized).length === 0 ? null : minimized;
 }
 /**
-* 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.
+* Whether two sets of theme options generate the same theme, comparing their
+* resolved forms so that derived and explicit values (and hex casing) don't
+* matter.
+*
+* @internal
 */
-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 sameOptions(a, b) {
+	let left = resolveThemeOptions(a), right = resolveThemeOptions(b);
+	return SCHEMES.every((scheme) => sameScheme(left[scheme], right[scheme]));
 }
-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 sameScheme(a, b) {
+	return a.accent === b.accent && a.text === b.text && a.background === b.background && a.contrast === b.contrast;
 }
-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;
+/** The slug of the theme the Studio config was generated from @internal */
+const initialThemerState = {
+	active: null,
+	custom: [],
+	removed: [],
+	order: []
+};
+/**
+* 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 — rearranged into the order the user dragged them into,
+* with themes that order does not know about kept in that default order after
+* the ones it does. 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 position = new Map(state.order.map((slug, index) => [slug, index])), rank = (theme) => position.get(theme.slug) ?? state.order.length;
+	all.sort((a, b) => rank(a) - rank(b));
+	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)}`;
+}
+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 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 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++;
+	}
+	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 order = [], rawOrder = Reflect.get(value, "order");
+	if (Array.isArray(rawOrder)) for (let slug of rawOrder) typeof slug == "string" && (slug === "config" || presets.some((preset) => preset.slug === slug) || custom.some((theme) => theme.slug === slug)) && !order.includes(slug) && order.push(slug);
+	let rawActive = Reflect.get(value, "active");
+	return {
+		active: typeof rawActive == "string" ? rawActive : null,
+		custom,
+		removed,
+		order
+	};
+}
+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: [],
+		order: []
+	};
+}
+/**
+* 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 readStoredState() {
+	try {
+		if (typeof localStorage > "u") return initialThemerState;
+		let raw = localStorage.getItem(STORAGE_KEY);
+		return raw ? sanitizeState(JSON.parse(raw)) : readLegacyState() ?? initialThemerState;
+	} catch {
+		return initialThemerState;
+	}
+}
+/** @internal */
+function writeStoredState(state) {
+	try {
+		if (typeof localStorage > "u") return;
+		localStorage.setItem(STORAGE_KEY, JSON.stringify(state)), localStorage.removeItem(LEGACY_STORAGE_KEY);
+	} catch {}
+}
+/**
+* How long the layout's motions — the panel's and the split preview's, and
+* the cross-fade to another theme — are taken to last when the layout never
+* says: it reports every view transition it starts, so this only ends a
+* motion that has none (reduced motion, a browser without view transitions),
+* where the `moving` and `switching` tags have nothing to affect. Generous,
+* so that it never runs out before a slow deferred commit starts the real one.
+*
+* @internal
+*/
+const MOTION_DURATION = 2e3;
+function themesOf(context) {
+	return resolveThemes(context, context.baseOptions);
+}
+function revokeObjectUrl(url) {
+	typeof URL < "u" && typeof URL.revokeObjectURL == "function" && URL.revokeObjectURL(url);
+}
+/**
+* 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.
+*
+* The sidebar and the preview pass through `opening`/`closing` and
+* `splitting`/`unsplitting` on their way, states tagged for the UI: `panel`
+* and `split` say what shows (the panel from `opening` on, the split copy from
+* `splitting` on), `moving` that the Studio is about to give way or take room
+* — which is when, and only when, the layout lets a view transition animate
+* it. A fourth region, `theme`, is `switching` (its tag) right after an event
+* that applies another theme — picking one, adding, duplicating, importing or
+* editing one, removing or deleting the applied one — when the layout
+* cross-fades to it; edits to the applied theme's colors are not switches,
+* they follow the pointer. These states last until the layout reports its
+* transition under way — every boundary reports, the panel's and the copy's
+* entering and leaving as much as the Studio's morphing — or for
+* `MOTION_DURATION` when nothing animates.
+*
+* 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,
+		sidebarShown: or([stateIn({ sidebar: "opening" }), stateIn({ sidebar: "open" })]),
+		isAnotherTheme: ({ context }, params) => params.slug !== (context.active ?? "config"),
+		isAppliedTheme: ({ context }, params) => params.slug === context.active,
+		hasOptions: (_, params) => params.options !== void 0
+	},
+	actions: {
+		persist: ({ context }) => {
+			let { active, custom, removed, order } = context;
+			writeStoredState({
+				active,
+				custom,
+				removed,
+				order
+			});
+		},
+		revokeImage: (_, params) => {
+			params.url && revokeObjectUrl(params.url);
+		},
+		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
+			};
+		}),
+		import: assign(({ context }, params) => {
+			let theme = createCustomTheme(params.title, params.options);
+			return {
+				active: theme.slug,
+				custom: [...context.custom, theme]
+			};
+		}),
+		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) })),
+		reorder: assign(({ context }, params) => {
+			let listed = new Set(themesOf(context).themes.map((theme) => theme.slug)), order = params.order.filter((slug) => listed.has(slug));
+			return { order: [...order, ...context.order.filter((slug) => !order.includes(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: {}
+	}),
+	entry: "persist",
+	type: "parallel",
+	states: {
+		sidebar: {
+			initial: "closed",
+			states: {
+				closed: { on: { "sidebar.toggle": "opening" } },
+				opening: {
+					tags: ["panel", "moving"],
+					after: { [MOTION_DURATION]: "open" },
+					on: {
+						"layout.transitioned": "open",
+						"sidebar.toggle": "closing",
+						"sidebar.close": "closing"
+					}
+				},
+				open: {
+					tags: ["panel"],
+					on: {
+						"sidebar.toggle": "closing",
+						"sidebar.close": "closing"
+					}
+				},
+				closing: {
+					tags: ["moving"],
+					after: { [MOTION_DURATION]: "closed" },
+					on: {
+						"layout.transitioned": "closed",
+						"sidebar.toggle": "opening"
+					}
+				}
+			}
+		},
+		preview: {
+			initial: "single",
+			states: {
+				single: { on: { "preview.toggle": "splitting" } },
+				splitting: {
+					tags: ["split", "moving"],
+					after: { [MOTION_DURATION]: "split" },
+					on: {
+						"layout.transitioned": "split",
+						"preview.toggle": "unsplitting",
+						"sidebar.close": "unsplitting",
+						"sidebar.toggle": {
+							guard: "sidebarShown",
+							target: "unsplitting"
+						}
+					}
+				},
+				split: {
+					tags: ["split"],
+					on: {
+						"preview.toggle": "unsplitting",
+						"sidebar.close": "unsplitting",
+						"sidebar.toggle": {
+							guard: "sidebarShown",
+							target: "unsplitting"
+						}
+					}
+				},
+				unsplitting: {
+					tags: ["moving"],
+					after: { [MOTION_DURATION]: "single" },
+					on: {
+						"layout.transitioned": "single",
+						"preview.toggle": "splitting"
+					}
+				}
+			}
+		},
+		theme: {
+			initial: "applied",
+			states: {
+				applied: { on: {
+					"theme.pick": {
+						guard: {
+							type: "isAnotherTheme",
+							params: ({ event }) => ({ slug: event.slug })
+						},
+						target: "switching"
+					},
+					"theme.edit": {
+						guard: {
+							type: "isAnotherTheme",
+							params: ({ event }) => ({ slug: event.slug })
+						},
+						target: "switching"
+					},
+					"theme.duplicate": {
+						guard: {
+							type: "isAnotherTheme",
+							params: ({ event }) => ({ slug: event.slug })
+						},
+						target: "switching"
+					},
+					"theme.remove": {
+						guard: {
+							type: "isAppliedTheme",
+							params: ({ event }) => ({ slug: event.slug })
+						},
+						target: "switching"
+					},
+					"theme.delete": {
+						guard: {
+							type: "isAppliedTheme",
+							params: ({ event }) => ({ slug: event.slug })
+						},
+						target: "switching"
+					},
+					"theme.add": {
+						guard: {
+							type: "hasOptions",
+							params: ({ event }) => ({ options: event.options })
+						},
+						target: "switching"
+					},
+					"theme.import": "switching"
+				} },
+				switching: {
+					tags: ["switching"],
+					after: { [MOTION_DURATION]: "applied" },
+					on: {
+						"layout.transitioned": "applied",
+						"theme.pick": {
+							guard: {
+								type: "isAnotherTheme",
+								params: ({ event }) => ({ slug: event.slug })
+							},
+							target: "switching",
+							reenter: !0
+						},
+						"theme.edit": {
+							guard: {
+								type: "isAnotherTheme",
+								params: ({ event }) => ({ slug: event.slug })
+							},
+							target: "switching",
+							reenter: !0
+						},
+						"theme.duplicate": {
+							guard: {
+								type: "isAnotherTheme",
+								params: ({ event }) => ({ slug: event.slug })
+							},
+							target: "switching",
+							reenter: !0
+						},
+						"theme.remove": {
+							guard: {
+								type: "isAppliedTheme",
+								params: ({ event }) => ({ slug: event.slug })
+							},
+							target: "switching",
+							reenter: !0
+						},
+						"theme.delete": {
+							guard: {
+								type: "isAppliedTheme",
+								params: ({ event }) => ({ slug: event.slug })
+							},
+							target: "switching",
+							reenter: !0
+						},
+						"theme.add": {
+							guard: {
+								type: "hasOptions",
+								params: ({ event }) => ({ options: event.options })
+							},
+							target: "switching",
+							reenter: !0
+						},
+						"theme.import": {
+							target: "switching",
+							reenter: !0
+						}
+					}
+				}
+			}
+		},
+		flow: {
+			initial: "list",
+			on: {
+				"theme.pick": { actions: [{
+					type: "pick",
+					params: ({ event }) => ({ slug: event.slug })
+				}, "persist"] },
+				"theme.add": {
+					target: ".edit",
+					actions: [{
+						type: "add",
+						params: ({ event }) => ({
+							title: event.title,
+							options: event.options,
+							palette: event.palette,
+							imageUrl: event.imageUrl
+						})
+					}, "persist"]
+				},
+				"theme.duplicate": {
+					target: ".edit",
+					actions: [{
+						type: "duplicate",
+						params: ({ event }) => ({ slug: event.slug })
+					}, "persist"]
+				},
+				"theme.edit": {
+					target: ".edit",
+					guard: {
+						type: "isCustomTheme",
+						params: ({ event }) => ({ slug: event.slug })
+					},
+					actions: [{
+						type: "startEditing",
+						params: ({ event }) => ({ slug: event.slug })
+					}, "persist"]
+				},
+				"theme.update": { actions: [
+					{
+						type: "revokeImage",
+						params: ({ context, event }) => ({ url: event.imageUrl ? context.images[event.slug] : void 0 })
+					},
+					{
+						type: "update",
+						params: ({ event }) => ({
+							slug: event.slug,
+							title: event.title,
+							options: event.options,
+							palette: event.palette,
+							imageUrl: event.imageUrl
+						})
+					},
+					"persist"
+				] },
+				"theme.remove": { actions: [{
+					type: "remove",
+					params: ({ event }) => ({ slug: event.slug })
+				}, "persist"] },
+				"theme.restore": { actions: [{
+					type: "restore",
+					params: ({ event }) => ({ slug: event.slug })
+				}, "persist"] },
+				"theme.delete": { actions: [
+					{
+						type: "revokeImage",
+						params: ({ context, event }) => ({ url: context.images[event.slug] })
+					},
+					{
+						type: "delete",
+						params: ({ event }) => ({ slug: event.slug })
+					},
+					"persist"
+				] },
+				"theme.reorder": { actions: [{
+					type: "reorder",
+					params: ({ event }) => ({ order: event.order })
+				}, "persist"] },
+				"theme.import": { actions: [{
+					type: "import",
+					params: ({ event }) => ({
+						title: event.title,
+						options: event.options
+					})
+				}, "persist"] },
+				"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, order } = snapshot.context;
 	return {
-		saturation: delta === 0 ? 0 : lightness > .5 ? delta / (2 - max - min) : delta / (max + min),
-		lightness
+		active,
+		custom,
+		removed,
+		order
 	};
 }
-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));
+var root$2 = "_1o50s7t0";
+const ScrollAreaInsetContext = createContext({
+	left: 0,
+	right: 0,
+	bottom: 0
+});
+/**
+* The gutter the last scroll area measured. It is the same for every scroll
+* area (the reserved gutter does not depend on the content), so the next one
+* starts out with the right padding instead of shifting after its first
+* measurement — which would also throw off anything scrolling into view as
+* the content mounts.
+*/
+let lastGutter = 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(_temp$8), t0, t1;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => {
+		let element = ref.current;
+		if (!element) return;
+		let measure = () => {
+			lastGutter = element.offsetWidth - element.clientWidth, setGutter(lastGutter);
+		};
+		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(Box, {
+		className: root$2,
+		flex: 1,
+		overflow: "auto",
+		padding,
+		ref,
+		style: t6,
+		children: t7
+	}), $[11] = padding, $[12] = t6, $[13] = t7, $[14] = t8) : t8 = $[14], t8;
 }
-/** 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);
+function _temp$8() {
+	return lastGutter;
 }
 /**
-* 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.
+* 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 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);
+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;
 }
+var avatar = "_1aa9huuh", body = "_1aa9huui", button = "_1aa9huuq", colors = {
+	bg: "var(--_1aa9huu0)",
+	fg: "var(--_1aa9huu1)",
+	mutedFg: "var(--_1aa9huu2)",
+	border: "var(--_1aa9huu3)",
+	accent: "var(--_1aa9huu4)",
+	avatar: "var(--_1aa9huu5)",
+	selectedBg: "var(--_1aa9huu6)",
+	selectedFg: "var(--_1aa9huu7)",
+	inputBg: "var(--_1aa9huu8)",
+	inputBorder: "var(--_1aa9huu9)"
+}, field = "_1aa9huun", footer = "_1aa9huup", form = "_1aa9huum", input = "_1aa9huuo", line = {
+	fg: "_1aa9huus _1aa9huur",
+	muted: "_1aa9huut _1aa9huur",
+	selected: "_1aa9huuu _1aa9huur"
+}, list = "_1aa9huuj", listRow = "_1aa9huuk", logo = "_1aa9huuf", navbar = "_1aa9huue", pane = "_1aa9huul", root$1 = "_1aa9huua", spacer = "_1aa9huug", studio = {
+	light: "_1aa9huub",
+	dark: "_1aa9huud _1aa9huub"
+};
+/** The document rows in the list pane — the widths of their title lines */
+const LIST_ROWS = [
+	"62%",
+	"46%",
+	"70%",
+	"52%"
+], FIELDS$1 = ["32%", "24%"];
 /**
-* 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.
+* 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 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 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, { scheme: "light" }), $[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, { scheme: "dark" }), $[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("div", {
+		"aria-hidden": !0,
+		className: root$1,
+		children: [t2, t4]
+	}), $[8] = t2, $[9] = t4, $[10] = t5) : t5 = $[10], t5;
+}
+function MockStudio(props) {
+	let $ = c(19), { scheme } = props, { color } = useTheme_v2(), selected = color.selectable.default.selected, inputColor = color.input.default.enabled, t0 = studio[scheme], t1;
+	$[0] !== color.avatar.blue.bg || $[1] !== color.bg || $[2] !== color.border || $[3] !== color.button.default.primary.enabled.bg || $[4] !== color.fg || $[5] !== color.muted.fg || $[6] !== inputColor.bg || $[7] !== inputColor.border || $[8] !== selected.bg || $[9] !== selected.fg ? (t1 = assignInlineVars({
+		[colors.bg]: color.bg,
+		[colors.fg]: color.fg,
+		[colors.mutedFg]: color.muted.fg,
+		[colors.border]: color.border,
+		[colors.accent]: color.button.default.primary.enabled.bg,
+		[colors.avatar]: color.avatar.blue.bg,
+		[colors.selectedBg]: selected.bg,
+		[colors.selectedFg]: selected.fg,
+		[colors.inputBg]: inputColor.bg,
+		[colors.inputBorder]: inputColor.border
+	}), $[0] = color.avatar.blue.bg, $[1] = color.bg, $[2] = color.border, $[3] = color.button.default.primary.enabled.bg, $[4] = color.fg, $[5] = color.muted.fg, $[6] = inputColor.bg, $[7] = inputColor.border, $[8] = selected.bg, $[9] = selected.fg, $[10] = t1) : t1 = $[10];
+	let t2;
+	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t2 = /* @__PURE__ */ jsx("div", { className: logo }), $[11] = t2) : t2 = $[11];
+	let t3;
+	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t3 = /* @__PURE__ */ jsxs("div", {
+		className: navbar,
+		children: [
+			t2,
+			/* @__PURE__ */ jsx("div", {
+				className: line.fg,
+				style: { width: "22%" }
+			}),
+			/* @__PURE__ */ jsx("div", { className: spacer }),
+			/* @__PURE__ */ jsx("div", { className: avatar })
+		]
+	}), $[12] = t3) : t3 = $[12];
+	let t4;
+	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx("div", {
+		className: list,
+		children: LIST_ROWS.map(_temp$7)
+	}), $[13] = t4) : t4 = $[13];
+	let t5;
+	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsxs("div", {
+		className: form,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: line.fg,
+			style: { width: "45%" }
+		}), FIELDS$1.map(_temp2)]
+	}), $[14] = t5) : t5 = $[14];
+	let t6;
+	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t6 = /* @__PURE__ */ jsxs("div", {
+		className: body,
+		children: [t4, /* @__PURE__ */ jsxs("div", {
+			className: pane,
+			children: [t5, /* @__PURE__ */ jsx("div", {
+				className: footer,
+				children: /* @__PURE__ */ jsx("div", { className: button })
+			})]
+		})]
+	}), $[15] = t6) : t6 = $[15];
+	let t7;
+	return $[16] !== t0 || $[17] !== t1 ? (t7 = /* @__PURE__ */ jsxs("div", {
+		className: t0,
+		style: t1,
+		children: [t3, t6]
+	}), $[16] = t0, $[17] = t1, $[18] = t7) : t7 = $[18], t7;
 }
-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;
+function _temp2(width_0) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: field,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: line.muted,
+			style: { width: width_0 }
+		}), /* @__PURE__ */ jsx("div", { className: input })]
+	}, width_0);
 }
-/**
-* 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;
+function _temp$7(width, index) {
+	let isSelected = index === 1;
+	return /* @__PURE__ */ jsx("div", {
+		className: listRow,
+		"data-selected": isSelected,
+		children: /* @__PURE__ */ jsx("div", {
+			className: isSelected ? line.selected : line.muted,
+			style: { width }
+		})
+	}, width);
 }
 /**
-* 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.
+* 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 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);
+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;
 }
+var removedThumbnail = "_1vdkp0v0";
 /**
-* 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.
+* 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 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";
+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, {
+					className: removedThumbnail,
+					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, {
+						mode: "ghost",
+						onClick: () => send({
+							type: "theme.restore",
+							slug: theme.slug
+						}),
+						padding: 2,
+						text: "Restore"
+					}), theme.source === "custom" && /* @__PURE__ */ jsx(Button, {
+						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;
 }
 /**
-* A button with an animated tooltip instead of a `title` attribute. Icon-only
-* buttons take the tooltip as their accessible name.
+* A button with an animated tooltip instead of a `title` attribute, sized like
+* the Studio's own buttons (`padding` and `gap` of 2). Icon-only buttons take
+* the tooltip as their accessible name.
 *
 * @internal
 */
@@ -1000,6 +1350,8 @@ function TooltipButton(props) {
 	let t1 = buttonProps.text === void 0 ? tooltip : void 0, t2;
 	$[5] !== buttonProps || $[6] !== t1 ? (t2 = /* @__PURE__ */ jsx(Button, {
 		"aria-label": t1,
+		gap: 2,
+		padding: 2,
 		...buttonProps
 	}), $[5] = buttonProps, $[6] = t1, $[7] = t2) : t2 = $[7];
 	let t3;
@@ -1099,7 +1451,7 @@ function useImagePalette(onPalette) {
 		setBusy(!0);
 		let isCurrent = () => mountedRef.current && latestPickRef.current === pick, extract = async () => {
 			let palette = extractImagePalette(await readImagePixels(file));
-			isCurrent() && (Object.values(palette).every(_temp$5) ? toast.push({
+			isCurrent() && (Object.values(palette).every(_temp$6) ? toast.push({
 				status: "warning",
 				title: "Found no colors in that image"
 			}) : onPaletteRef.current(palette, file));
@@ -1119,7 +1471,7 @@ function useImagePalette(onPalette) {
 		pickImage
 	}, $[7] = busy, $[8] = pickImage, $[9] = t5) : t5 = $[9], t5;
 }
-function _temp$5(swatch) {
+function _temp$6(swatch) {
 	return swatch === null;
 }
 var paletteGrid = "_17s80v42", tile = "_17s80v44", variantButton = "_17s80v46", variantFrame = "_17s80v47", variantRow = "_17s80v45", variantScale = "var(--_17s80v41)", variantScaleBox = "_17s80v48", variantWidth = "var(--_17s80v40)";
@@ -1310,7 +1662,7 @@ function ImagePaletteSection(props) {
 		border: !0,
 		onDragEnter: t4,
 		onDragLeave: t5,
-		onDragOver: _temp$4,
+		onDragOver: _temp$5,
 		onDrop: t6,
 		padding: 3,
 		radius: 3,
@@ -1318,7 +1670,7 @@ function ImagePaletteSection(props) {
 		children: t12
 	}), $[34] = t12, $[35] = t6, $[36] = t7, $[37] = t13) : t13 = $[37], t13;
 }
-function _temp$4(event_0) {
+function _temp$5(event_0) {
 	event_0.preventDefault();
 }
 var colorRowText = "os3rj2", range = "os3rj1", swatch = "os3rj0";
@@ -1442,7 +1794,7 @@ function ThemeEditorForm(props) {
 	}), $[9] = t4) : t4 = $[9];
 	let t5;
 	$[10] === onTitleChange ? t5 = $[11] : (t5 = (event) => onTitleChange(event.currentTarget.value), $[10] = onTitleChange, $[11] = t5);
-	let t6 = focusTitle ? _temp$3 : void 0, t7;
+	let t6 = focusTitle ? _temp$4 : void 0, t7;
 	$[12] !== focusTitle || $[13] !== t5 || $[14] !== t6 || $[15] !== title ? (t7 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 2,
 		children: [t4, /* @__PURE__ */ jsx(TextInput, {
@@ -1505,6 +1857,7 @@ function ThemeEditorForm(props) {
 	$[42] === onDone ? t14 = $[43] : (t14 = /* @__PURE__ */ jsx(Button, {
 		mode: "ghost",
 		onClick: onDone,
+		padding: 2,
 		text: "Done"
 	}), $[42] = onDone, $[43] = t14);
 	let t15;
@@ -1523,7 +1876,7 @@ function ThemeEditorForm(props) {
 	let t16;
 	return $[47] !== t11 || $[48] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t15] }), $[47] = t11, $[48] = t15, $[49] = t16) : t16 = $[49], t16;
 }
-function _temp$3(event_0) {
+function _temp$4(event_0) {
 	return event_0.currentTarget.select();
 }
 /**
@@ -1675,59 +2028,350 @@ function SchemeCard(props) {
 		})
 	}), $[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(23), { 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);
+/** One color of a scheme: a swatch with its value and an optional reset button */
+function ColorRow(props) {
+	let $ = c(23), { 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("input", {
+		"aria-label": label,
+		className: swatch,
+		onChange: t1,
+		type: "color",
+		value
+	}), $[2] = label, $[3] = t1, $[4] = value, $[5] = t2) : t2 = $[5];
+	let t3;
+	$[6] === title ? t3 = $[7] : (t3 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: title
+	}), $[6] = title, $[7] = t3);
+	let t4 = adjusted !== void 0 && adjusted !== value ? ` → ${adjusted}` : "", t5 = auto ? ` · ${autoLabel}` : "", t6;
+	$[8] !== t4 || $[9] !== t5 || $[10] !== value ? (t6 = /* @__PURE__ */ jsxs(Text, {
+		muted: !0,
+		size: 0,
+		textOverflow: "ellipsis",
+		children: [
+			value,
+			t4,
+			t5
+		]
+	}), $[8] = t4, $[9] = t5, $[10] = value, $[11] = t6) : t6 = $[11];
+	let t7;
+	$[12] !== t3 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Stack, {
+		className: colorRowText,
+		flex: 1,
+		gap: 2,
+		children: [t3, t6]
+	}), $[12] = t3, $[13] = t6, $[14] = t7) : t7 = $[14];
+	let t8;
+	$[15] !== auto || $[16] !== autoLabel || $[17] !== onClear ? (t8 = onClear && !auto && /* @__PURE__ */ jsx(TooltipButton, {
+		icon: ResetIcon,
+		mode: "bleed",
+		onClick: onClear,
+		padding: 2,
+		tooltip: `Reset to ${autoLabel}`
+	}), $[15] = auto, $[16] = autoLabel, $[17] = onClear, $[18] = t8) : t8 = $[18];
+	let t9;
+	return $[19] !== t2 || $[20] !== t7 || $[21] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Flex, {
+		align: "center",
+		gap: 2,
+		children: [
+			t2,
+			t7,
+			t8
+		]
+	}), $[19] = t2, $[20] = t7, $[21] = t8, $[22] = t9) : t9 = $[22], t9;
+}
+/**
+* The version of the code format, the first byte of every code — bumped if
+* the layout below ever changes, so older codes can still be told apart
+*/
+const FIELDS = [
+	"accent",
+	"text",
+	"background",
+	"contrast"
+];
+/**
+* Turns a theme into a short code to share in a message: `title`, and the
+* colors and contrasts of both schemes, packed into bytes — one flag byte says
+* which of the eight fields are set, each color is its three RGB bytes and a
+* contrast one byte, and the title takes up the rest — then base64url'd, so
+* it is one word without padding, safe in URLs and chat. A theme setting
+* everything comes to about 30 bytes plus its title.
+*
+* @internal
+*/
+function encodeTheme(theme) {
+	let bytes = [1, 0], flags = 0;
+	return SCHEMES.forEach((scheme, schemeIndex) => {
+		let options = theme.options[scheme] ?? {};
+		FIELDS.forEach((field, fieldIndex) => {
+			let value = options[field];
+			if (value !== void 0) {
+				if (field === "contrast") {
+					if (typeof value != "number" || !Number.isFinite(value)) return;
+					bytes.push(Math.round(Math.min(100, Math.max(15, value))));
+				} else {
+					if (typeof value != "string" || !isColor(value)) return;
+					bytes.push(...rgbBytes(value));
+				}
+				flags |= 1 << schemeIndex * FIELDS.length + fieldIndex;
+			}
+		});
+	}), bytes[1] = flags, bytes.push(...new TextEncoder().encode(theme.title.trim())), toBase64Url(Uint8Array.from(bytes));
+}
+/**
+* Reads a theme back out of a code — as pasted, so surrounding whitespace and
+* words around the code are fine: the first word that is a code counts. `null`
+* when nothing in the text is one.
+*
+* @internal
+*/
+function decodeTheme(text) {
+	for (let word of text.trim().split(/\s+/)) {
+		let theme = decodeCode(word);
+		if (theme) return theme;
+	}
+	return null;
+}
+function decodeCode(code) {
+	let bytes = fromBase64Url(code);
+	if (!bytes || bytes.length < 2 || bytes[0] !== 1) return null;
+	let flags = bytes[1], options = {}, offset = 2;
+	for (let [schemeIndex, scheme] of SCHEMES.entries()) {
+		let schemeOptions = {};
+		for (let [fieldIndex, field] of FIELDS.entries()) if (flags & 1 << schemeIndex * FIELDS.length + fieldIndex) {
+			if (field === "contrast") {
+				if (offset + 1 > bytes.length) return null;
+				schemeOptions.contrast = Math.min(100, Math.max(15, bytes[offset])), offset += 1;
+			} else {
+				if (offset + 3 > bytes.length) return null;
+				schemeOptions[field] = hexColor(bytes.subarray(offset, offset + 3)), offset += 3;
+			}
+		}
+		Object.keys(schemeOptions).length > 0 && (options[scheme] = schemeOptions);
+	}
+	let title;
+	try {
+		title = new TextDecoder("utf-8", { fatal: !0 }).decode(bytes.subarray(offset));
+	} catch {
+		return null;
+	}
+	return {
+		title: displayTitle(title),
+		options
+	};
+}
+/** The three RGB bytes of a `#rgb` or `#rrggbb` color */
+function rgbBytes(color) {
+	let hex = color.length === 4 ? color.slice(1).replaceAll(/./g, "$&$&") : color.slice(1);
+	return [
+		0,
+		2,
+		4
+	].map((start) => parseInt(hex.slice(start, start + 2), 16));
+}
+function hexColor(rgb) {
+	return `#${[...rgb].map((byte) => byte.toString(16).padStart(2, "0")).join("")}`;
+}
+function toBase64Url(bytes) {
+	let binary = "";
+	for (let byte of bytes) binary += String.fromCharCode(byte);
+	return btoa(binary).replaceAll("+", "-").replaceAll("/", "_").replace(/=+$/, "");
+}
+function fromBase64Url(code) {
+	if (!/^[A-Za-z0-9_-]+$/.test(code)) return null;
+	let base64 = code.replaceAll("-", "+").replaceAll("_", "/");
+	try {
+		return Uint8Array.from(atob(base64.padEnd(Math.ceil(base64.length / 4) * 4, "=")), (char) => char.charCodeAt(0));
+	} catch {
+		return null;
+	}
+}
+/**
+* Copying a theme as a code to share, and adding a theme from a code someone
+* shared — with toasts telling how it went.
+*
+* @internal
+*/
+function useThemeCodes() {
+	let $ = c(11), { send } = useThemer(), toast = useToast(), t0;
+	$[0] === toast ? t0 = $[1] : (t0 = async (theme) => {
+		let title = displayTitle(theme.title);
+		try {
+			await navigator.clipboard.writeText(encodeTheme(theme)), toast.push({
+				status: "success",
+				title: `Copied ${title} as a code`,
+				description: "Paste it in the themer of another Studio to add the theme there"
+			});
+		} catch {
+			toast.push({
+				status: "error",
+				title: `Could not copy ${title}`
+			});
+		}
+	}, $[0] = toast, $[1] = t0);
+	let copyTheme = t0, t1;
+	$[2] !== send || $[3] !== toast ? (t1 = (text) => {
+		let theme_0 = decodeTheme(text);
+		return theme_0 ? (send({
+			type: "theme.import",
+			title: theme_0.title,
+			options: theme_0.options
+		}), toast.push({
+			status: "success",
+			title: `Added ${theme_0.title}`
+		}), !0) : !1;
+	}, $[2] = send, $[3] = toast, $[4] = t1) : t1 = $[4];
+	let addThemeFromText = t1, t2;
+	$[5] === addThemeFromText ? t2 = $[6] : (t2 = async () => {
+		let text_0;
+		try {
+			text_0 = await navigator.clipboard.readText();
+		} catch {
+			return "no-clipboard";
+		}
+		return addThemeFromText(text_0) ? "added" : "no-theme";
+	}, $[5] = addThemeFromText, $[6] = t2);
+	let addThemeFromClipboard = t2, t3;
+	return $[7] !== addThemeFromClipboard || $[8] !== addThemeFromText || $[9] !== copyTheme ? (t3 = {
+		copyTheme,
+		addThemeFromText,
+		addThemeFromClipboard
+	}, $[7] = addThemeFromClipboard, $[8] = addThemeFromText, $[9] = copyTheme, $[10] = t3) : t3 = $[10], t3;
+}
+/**
+* Adds a theme pasted anywhere in the Studio while the themer's list is
+* showing — pastes into inputs and other editable things are theirs.
+*
+* @internal
+*/
+function usePasteThemeCodes() {
+	let $ = c(5), { open, send } = useThemer(), toast = useToast(), t0, t1;
+	$[0] !== open || $[1] !== send || $[2] !== toast ? (t0 = () => {
+		if (!open) return;
+		let handlePaste = (event) => {
+			if (isEditable(event.target)) return;
+			let theme = decodeTheme(event.clipboardData?.getData("text/plain") ?? "");
+			theme && (event.preventDefault(), send({
+				type: "theme.import",
+				title: theme.title,
+				options: theme.options
+			}), toast.push({
+				status: "success",
+				title: `Added ${theme.title}`
+			}));
+		};
+		return document.addEventListener("paste", handlePaste), () => document.removeEventListener("paste", handlePaste);
+	}, t1 = [
+		open,
+		send,
+		toast
+	], $[0] = open, $[1] = send, $[2] = toast, $[3] = t0, $[4] = t1) : (t0 = $[3], t1 = $[4]), useEffect(t0, t1);
+}
+function isEditable(target) {
+	return target instanceof HTMLElement && (target.isContentEditable || target.matches("input, textarea, select"));
+}
+/**
+* Where a theme code someone shared gets pasted by hand — for browsers that
+* do not hand the clipboard over, and for codes that are not on it.
+*
+* @internal
+*/
+function PasteThemeDialog(props) {
+	let $ = c(35), { onClose } = props, { addThemeFromText } = useThemeCodes(), [text, setText] = useState(""), [invalid, setInvalid] = useState(!1), t0;
+	$[0] !== addThemeFromText || $[1] !== onClose || $[2] !== text ? (t0 = () => {
+		addThemeFromText(text) ? onClose() : setInvalid(!0);
+	}, $[0] = addThemeFromText, $[1] = onClose, $[2] = text, $[3] = t0) : t0 = $[3];
+	let add = t0, t1;
+	$[4] === onClose ? t1 = $[5] : (t1 = /* @__PURE__ */ jsx(Button, {
+		mode: "ghost",
+		onClick: onClose,
+		padding: 2,
+		text: "Cancel"
+	}), $[4] = onClose, $[5] = t1);
 	let t2;
-	$[2] !== label || $[3] !== t1 || $[4] !== value ? (t2 = /* @__PURE__ */ jsx("input", {
-		"aria-label": label,
-		className: swatch,
-		onChange: t1,
-		type: "color",
-		value
-	}), $[2] = label, $[3] = t1, $[4] = value, $[5] = t2) : t2 = $[5];
-	let t3;
-	$[6] === title ? t3 = $[7] : (t3 = /* @__PURE__ */ jsx(Text, {
-		size: 1,
-		children: title
-	}), $[6] = title, $[7] = t3);
-	let t4 = adjusted !== void 0 && adjusted !== value ? ` → ${adjusted}` : "", t5 = auto ? ` · ${autoLabel}` : "", t6;
-	$[8] !== t4 || $[9] !== t5 || $[10] !== value ? (t6 = /* @__PURE__ */ jsxs(Text, {
-		muted: !0,
-		size: 0,
-		textOverflow: "ellipsis",
-		children: [
-			value,
-			t4,
-			t5
-		]
-	}), $[8] = t4, $[9] = t5, $[10] = value, $[11] = t6) : t6 = $[11];
-	let t7;
-	$[12] !== t3 || $[13] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Stack, {
-		className: colorRowText,
-		flex: 1,
-		gap: 2,
-		children: [t3, t6]
-	}), $[12] = t3, $[13] = t6, $[14] = t7) : t7 = $[14];
-	let t8;
-	$[15] !== auto || $[16] !== autoLabel || $[17] !== onClear ? (t8 = onClear && !auto && /* @__PURE__ */ jsx(TooltipButton, {
-		icon: ResetIcon,
-		mode: "bleed",
-		onClick: onClear,
+	$[6] === text ? t2 = $[7] : (t2 = text.trim(), $[6] = text, $[7] = t2);
+	let t3 = t2 === "", t4;
+	$[8] !== add || $[9] !== t3 ? (t4 = /* @__PURE__ */ jsx(Button, {
+		disabled: t3,
+		onClick: add,
 		padding: 2,
-		tooltip: `Reset to ${autoLabel}`
-	}), $[15] = auto, $[16] = autoLabel, $[17] = onClear, $[18] = t8) : t8 = $[18];
-	let t9;
-	return $[19] !== t2 || $[20] !== t7 || $[21] !== t8 ? (t9 = /* @__PURE__ */ jsxs(Flex, {
-		align: "center",
+		text: "Add theme",
+		tone: "primary"
+	}), $[8] = add, $[9] = t3, $[10] = t4) : t4 = $[10];
+	let t5;
+	$[11] !== t1 || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Flex, {
 		gap: 2,
+		justify: "flex-end",
+		padding: 3,
+		children: [t1, t4]
+	}), $[11] = t1, $[12] = t4, $[13] = t5) : t5 = $[13];
+	let t6;
+	$[14] === add ? t6 = $[15] : (t6 = (event) => {
+		event.preventDefault(), add();
+	}, $[14] = add, $[15] = t6);
+	let t7;
+	$[16] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx(Text, {
+		muted: !0,
+		size: 1,
+		children: "Paste the code someone copied from their themer — the theme is added to your list and applied."
+	}), $[16] = t7) : t7 = $[16];
+	let t8 = invalid ? "themer-paste-error" : void 0, t9 = invalid ? "That is not a theme code" : void 0, t10;
+	$[17] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (event_0) => {
+		setText(event_0.currentTarget.value), setInvalid(!1);
+	}, $[17] = t10) : t10 = $[17];
+	let t11;
+	$[18] !== invalid || $[19] !== t8 || $[20] !== t9 || $[21] !== text ? (t11 = /* @__PURE__ */ jsx(TextInput, {
+		"aria-describedby": t8,
+		"aria-invalid": invalid,
+		"aria-label": "Theme code",
+		autoFocus: !0,
+		customValidity: t9,
+		fontSize: 1,
+		onChange: t10,
+		placeholder: "AQ…",
+		value: text
+	}), $[18] = invalid, $[19] = t8, $[20] = t9, $[21] = text, $[22] = t11) : t11 = $[22];
+	let t12;
+	$[23] === invalid ? t12 = $[24] : (t12 = invalid && /* @__PURE__ */ jsx(Card, {
+		id: "themer-paste-error",
+		padding: 3,
+		radius: 2,
+		role: "alert",
+		tone: "critical",
+		children: /* @__PURE__ */ jsx(Text, {
+			size: 1,
+			children: "That is not a theme code — codes are one word, copied from a theme's menu."
+		})
+	}), $[23] = invalid, $[24] = t12);
+	let t13;
+	$[25] !== t11 || $[26] !== t12 ? (t13 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		padding: 4,
 		children: [
-			t2,
 			t7,
-			t8
+			t11,
+			t12
 		]
-	}), $[19] = t2, $[20] = t7, $[21] = t8, $[22] = t9) : t9 = $[22], t9;
+	}), $[25] = t11, $[26] = t12, $[27] = t13) : t13 = $[27];
+	let t14;
+	$[28] !== t13 || $[29] !== t6 ? (t14 = /* @__PURE__ */ jsx("form", {
+		onSubmit: t6,
+		children: t13
+	}), $[28] = t13, $[29] = t6, $[30] = t14) : t14 = $[30];
+	let t15;
+	return $[31] !== onClose || $[32] !== t14 || $[33] !== t5 ? (t15 = /* @__PURE__ */ jsx(Dialog, {
+		animate: !0,
+		footer: t5,
+		header: "Add a shared theme",
+		id: "themer-paste",
+		onClickOutside: onClose,
+		onClose,
+		width: 0,
+		children: t14
+	}), $[31] = onClose, $[32] = t14, $[33] = t5, $[34] = t15) : t15 = $[34], t15;
 }
 var frame$1 = "_1wsn7882", menuCard = "_1wsn7884", menuSlot = "_1wsn7883", pickButton = "_1wsn7881", root = "_1wsn7880";
 /**
@@ -1751,13 +2395,13 @@ function scrollRefIntoViewIfNeeded(node) {
 * @internal
 */
 function ThemeCard(props) {
-	let $ = c(81), { active, theme } = props, { themes, send } = useThemer(), { scheme } = useRootTheme(), [menuOpen, setMenuOpen] = useState(!1), dragControls = useDragControls(), dragged = useRef(!1), t0;
+	let $ = c(85), { active, theme } = props, { themes, send } = useThemer(), { copyTheme } = useThemeCodes(), { scheme } = useRootTheme(), [menuOpen, setMenuOpen] = useState(!1), dragControls = useDragControls(), dragged = useRef(!1), t0;
 	$[0] === theme.title ? t0 = $[1] : (t0 = displayTitle(theme.title), $[0] = theme.title, $[1] = t0);
 	let title = t0, t1;
 	$[2] === theme.slug ? t1 = $[3] : (t1 = (candidate) => candidate.slug === theme.slug, $[2] = theme.slug, $[3] = t1);
 	let index = themes.findIndex(t1), t2;
 	$[4] !== index || $[5] !== send || $[6] !== themes ? (t2 = (to) => {
-		let order = themes.map(_temp$2);
+		let order = themes.map(_temp$3);
 		order.splice(to, 0, ...order.splice(index, 1)), send({
 			type: "theme.reorder",
 			order
@@ -1868,7 +2512,13 @@ function ThemeCard(props) {
 		text: t26
 	}), $[50] = t25, $[51] = t26, $[52] = t27) : t27 = $[52];
 	let t28;
-	$[53] !== send || $[54] !== theme.slug || $[55] !== theme.source ? (t28 = theme.source !== "config" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuDivider, {}), /* @__PURE__ */ jsx(MenuItem, {
+	$[53] !== copyTheme || $[54] !== theme ? (t28 = /* @__PURE__ */ jsx(MenuItem, {
+		icon: ShareIcon,
+		onClick: () => void copyTheme(theme),
+		text: "Copy to share"
+	}), $[53] = copyTheme, $[54] = theme, $[55] = t28) : t28 = $[55];
+	let t29;
+	$[56] !== send || $[57] !== theme.slug || $[58] !== theme.source ? (t29 = theme.source !== "config" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuDivider, {}), /* @__PURE__ */ jsx(MenuItem, {
 		icon: TrashIcon,
 		onClick: () => send({
 			type: "theme.remove",
@@ -1876,27 +2526,28 @@ function ThemeCard(props) {
 		}),
 		text: "Remove",
 		tone: "critical"
-	})] }), $[53] = send, $[54] = theme.slug, $[55] = theme.source, $[56] = t28) : t28 = $[56];
-	let t29;
-	$[57] !== t19 || $[58] !== t22 || $[59] !== t24 || $[60] !== t27 || $[61] !== t28 ? (t29 = /* @__PURE__ */ jsxs(Menu, { children: [
+	})] }), $[56] = send, $[57] = theme.slug, $[58] = theme.source, $[59] = t29) : t29 = $[59];
+	let t30;
+	$[60] !== t19 || $[61] !== t22 || $[62] !== t24 || $[63] !== t27 || $[64] !== t28 || $[65] !== t29 ? (t30 = /* @__PURE__ */ jsxs(Menu, { children: [
 		t19,
 		t22,
 		t23,
 		t24,
 		t27,
-		t28
-	] }), $[57] = t19, $[58] = t22, $[59] = t24, $[60] = t27, $[61] = t28, $[62] = t29) : t29 = $[62];
-	let t30, t31;
-	$[63] === Symbol.for("react.memo_cache_sentinel") ? (t30 = () => setMenuOpen(!1), t31 = () => setMenuOpen(!0), $[63] = t30, $[64] = t31) : (t30 = $[63], t31 = $[64]);
-	let t32;
-	$[65] === scheme ? t32 = $[66] : (t32 = {
+		t28,
+		t29
+	] }), $[60] = t19, $[61] = t22, $[62] = t24, $[63] = t27, $[64] = t28, $[65] = t29, $[66] = t30) : t30 = $[66];
+	let t31, t32;
+	$[67] === Symbol.for("react.memo_cache_sentinel") ? (t31 = () => setMenuOpen(!1), t32 = () => setMenuOpen(!0), $[67] = t31, $[68] = t32) : (t31 = $[67], t32 = $[68]);
+	let t33;
+	$[69] === scheme ? t33 = $[70] : (t33 = {
 		animate: !0,
 		placement: "bottom-end",
 		portal: !0,
 		scheme
-	}, $[65] = scheme, $[66] = t32);
-	let t33;
-	$[67] !== t15 || $[68] !== t16 || $[69] !== t29 || $[70] !== t32 ? (t33 = /* @__PURE__ */ jsx(Tooltip, {
+	}, $[69] = scheme, $[70] = t33);
+	let t34;
+	$[71] !== t15 || $[72] !== t16 || $[73] !== t30 || $[74] !== t33 ? (t34 = /* @__PURE__ */ jsx(Tooltip, {
 		animate: !0,
 		content: t13,
 		placement: "bottom",
@@ -1908,21 +2559,21 @@ function ThemeCard(props) {
 			children: /* @__PURE__ */ jsx(MenuButton, {
 				button: t15,
 				id: t16,
-				menu: t29,
-				onClose: t30,
-				onOpen: t31,
-				popover: t32
+				menu: t30,
+				onClose: t31,
+				onOpen: t32,
+				popover: t33
 			})
 		})
-	}), $[67] = t15, $[68] = t16, $[69] = t29, $[70] = t32, $[71] = t33) : t33 = $[71];
-	let t34;
-	$[72] !== menuOpen || $[73] !== t33 ? (t34 = /* @__PURE__ */ jsx("div", {
+	}), $[71] = t15, $[72] = t16, $[73] = t30, $[74] = t33, $[75] = t34) : t34 = $[75];
+	let t35;
+	$[76] !== menuOpen || $[77] !== t34 ? (t35 = /* @__PURE__ */ jsx("div", {
 		className: menuSlot,
 		"data-visible": menuOpen,
-		children: t33
-	}), $[72] = menuOpen, $[73] = t33, $[74] = t34) : t34 = $[74];
-	let t35;
-	return $[75] !== dragControls || $[76] !== t12 || $[77] !== t34 || $[78] !== t5 || $[79] !== theme.slug ? (t35 = /* @__PURE__ */ jsxs(Reorder.Item, {
+		children: t34
+	}), $[76] = menuOpen, $[77] = t34, $[78] = t35) : t35 = $[78];
+	let t36;
+	return $[79] !== dragControls || $[80] !== t12 || $[81] !== t35 || $[82] !== t5 || $[83] !== theme.slug ? (t36 = /* @__PURE__ */ jsxs(Reorder.Item, {
 		as: "div",
 		className: root,
 		dragControls,
@@ -1932,10 +2583,10 @@ function ThemeCard(props) {
 		ref: t5,
 		value: theme.slug,
 		whileDrag: t6,
-		children: [t12, t34]
-	}), $[75] = dragControls, $[76] = t12, $[77] = t34, $[78] = t5, $[79] = theme.slug, $[80] = t35) : t35 = $[80], t35;
+		children: [t12, t35]
+	}), $[79] = dragControls, $[80] = t12, $[81] = t35, $[82] = t5, $[83] = theme.slug, $[84] = t36) : t36 = $[84], t36;
 }
-function _temp$2(candidate_0) {
+function _temp$3(candidate_0) {
 	return candidate_0.slug;
 }
 var cardGrid = "twjqgh0";
@@ -1946,12 +2597,15 @@ var cardGrid = "twjqgh0";
 /**
 * The flow for picking a theme: a grid of theme cards — the configured theme,
 * the presets and the user's own themes — that drag into the order the user
-* wants, with the entry points to the add and restore flows below.
+* wants, with the entry points to the add and restore flows below. A theme
+* code someone shared pastes right into the list, or through the paste button.
 *
 * @internal
 */
 function ThemeList() {
-	let $ = c(32), { themes, removed, active, send } = useThemer(), t0;
+	let $ = c(38), { themes, removed, active, send } = useThemer(), { addThemeFromClipboard } = useThemeCodes(), [pasting, setPasting] = useState(!1);
+	usePasteThemeCodes();
+	let t0;
 	$[0] === send ? t0 = $[1] : (t0 = (palette, file) => send({
 		type: "theme.add",
 		title: titleFromFileName(file.name),
@@ -1965,7 +2619,7 @@ function ThemeList() {
 		order
 	}), $[2] = send, $[3] = t1);
 	let t2;
-	$[4] === themes ? t2 = $[5] : (t2 = themes.map(_temp$1), $[4] = themes, $[5] = t2);
+	$[4] === themes ? t2 = $[5] : (t2 = themes.map(_temp$2), $[4] = themes, $[5] = t2);
 	let t3;
 	if ($[6] !== active || $[7] !== themes) {
 		let t4;
@@ -1987,9 +2641,11 @@ function ThemeList() {
 	}), $[11] = t1, $[12] = t2, $[13] = t3, $[14] = t4) : t4 = $[14];
 	let t5;
 	$[15] !== removed.length || $[16] !== send ? (t5 = removed.length > 0 && /* @__PURE__ */ jsx(Button, {
+		gap: 2,
 		icon: RestoreIcon,
 		mode: "bleed",
 		onClick: () => send({ type: "flow.removed" }),
+		padding: 2,
 		text: `Show removed (${removed.length})`,
 		width: "fill"
 	}), $[15] = removed.length, $[16] = send, $[17] = t5) : t5 = $[17];
@@ -2021,18 +2677,37 @@ function ThemeList() {
 		tooltip: "Add a theme from the colors of an image"
 	}), $[23] = busy, $[24] = pickImage, $[25] = t8) : t8 = $[25];
 	let t9;
-	$[26] !== t7 || $[27] !== t8 ? (t9 = /* @__PURE__ */ jsx(Card, {
+	$[26] === addThemeFromClipboard ? t9 = $[27] : (t9 = /* @__PURE__ */ jsx(TooltipButton, {
+		icon: ClipboardIcon,
+		mode: "ghost",
+		onClick: async () => {
+			await addThemeFromClipboard() !== "added" && setPasting(!0);
+		},
+		tooltip: "Add a theme from a code someone shared"
+	}), $[26] = addThemeFromClipboard, $[27] = t9);
+	let t10;
+	$[28] !== t7 || $[29] !== t8 || $[30] !== t9 ? (t10 = /* @__PURE__ */ jsx(Card, {
 		borderTop: !0,
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Flex, {
 			gap: 2,
-			children: [t7, t8]
+			children: [
+				t7,
+				t8,
+				t9
+			]
 		})
-	}), $[26] = t7, $[27] = t8, $[28] = t9) : t9 = $[28];
-	let t10;
-	return $[29] !== t6 || $[30] !== t9 ? (t10 = /* @__PURE__ */ jsxs(Fragment, { children: [t6, t9] }), $[29] = t6, $[30] = t9, $[31] = t10) : t10 = $[31], t10;
+	}), $[28] = t7, $[29] = t8, $[30] = t9, $[31] = t10) : t10 = $[31];
+	let t11;
+	$[32] === pasting ? t11 = $[33] : (t11 = pasting && /* @__PURE__ */ jsx(PasteThemeDialog, { onClose: () => setPasting(!1) }), $[32] = pasting, $[33] = t11);
+	let t12;
+	return $[34] !== t10 || $[35] !== t11 || $[36] !== t6 ? (t12 = /* @__PURE__ */ jsxs(Fragment, { children: [
+		t6,
+		t10,
+		t11
+	] }), $[34] = t10, $[35] = t11, $[36] = t6, $[37] = t12) : t12 = $[37], t12;
 }
-function _temp$1(theme) {
+function _temp$2(theme) {
 	return theme.slug;
 }
 /**
@@ -2092,9 +2767,11 @@ function ThemeSnippetDialog(props) {
 		justify: "flex-end",
 		padding: 3,
 		children: /* @__PURE__ */ jsx(Button, {
+			gap: 2,
 			icon: ClipboardIcon,
 			mode: "ghost",
 			onClick: () => void handleCopy(),
+			padding: 2,
 			text: "Copy"
 		})
 	}), $[5] = handleCopy, $[6] = t2);
@@ -2367,129 +3044,25 @@ function ResizableSidebar(props) {
 		children: t10
 	}), $[20] = overlay, $[21] = t10, $[22] = t6, $[23] = t11) : t11 = $[23], t11;
 }
-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 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 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++;
-	}
-	return swatches > 0 ? palette : null;
+const QUERY = "(prefers-reduced-motion: reduce)";
+function subscribe(onChange) {
+	let media = matchMedia(QUERY);
+	return media.addEventListener("change", onChange), () => media.removeEventListener("change", onChange);
 }
-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 order = [], rawOrder = Reflect.get(value, "order");
-	if (Array.isArray(rawOrder)) for (let slug of rawOrder) typeof slug == "string" && (slug === "config" || presets.some((preset) => preset.slug === slug) || custom.some((theme) => theme.slug === slug)) && !order.includes(slug) && order.push(slug);
-	let rawActive = Reflect.get(value, "active");
-	return {
-		active: typeof rawActive == "string" ? rawActive : null,
-		custom,
-		removed,
-		order
-	};
+function getSnapshot() {
+	return matchMedia(QUERY).matches;
 }
-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: [],
-		order: []
-	};
+function getServerSnapshot() {
+	return !1;
 }
 /**
-* 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.
+* Whether the user prefers reduced motion — live, so that turning the
+* setting on while the Studio is open takes effect right away.
 *
 * @internal
 */
-function readStoredState() {
-	try {
-		if (typeof localStorage > "u") return initialThemerState;
-		let raw = localStorage.getItem(STORAGE_KEY);
-		return raw ? sanitizeState(JSON.parse(raw)) : readLegacyState() ?? initialThemerState;
-	} catch {
-		return initialThemerState;
-	}
-}
-/** @internal */
-function writeStoredState(state) {
-	try {
-		if (typeof localStorage > "u") return;
-		localStorage.setItem(STORAGE_KEY, JSON.stringify(state)), localStorage.removeItem(LEGACY_STORAGE_KEY);
-	} catch {}
+function usePrefersReducedMotion() {
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 }
 /**
 * The height of the Studio navbar inside the given element, in pixels — kept
@@ -2519,18 +3092,54 @@ function useStudioNavbarHeight(ref) {
 		};
 	}, t1 = [ref], $[0] = ref, $[1] = t0, $[2] = t1), useEffect(t0, t1), height;
 }
-var PANEL_TRANSITION = "_1yq4ar71", SPLIT_TRANSITION = "_1yq4ar70", layout = "_1yq4ar79", panelTransitionClasses = {
-	slideIn: "_1yq4ar77",
-	slideOut: "_1yq4ar78"
+/**
+* `useDeferredValue` with a transition type: the returned value lags behind
+* `value` like a deferred one — rendered in a transition, which React
+* animates — and the view transition React starts for it carries the given
+* type (`document.startViewTransition({types})`), so a stylesheet tells it
+* from any other transition on the page through
+* `:active-view-transition-type()`.
+*
+* React only takes types from `startTransition`, and a deferred render is
+* not one. So while the deferred value lags, a transition of the type joins
+* it, with a state update of its own for the type to belong to: React renders
+* every pending transition in one go, and the commit — the view transition
+* — carries the types of all of them. The value itself stays with
+* `useDeferredValue`, which reads the latest `value` as the deferred render
+* runs: should `value` change back before that render commits, nothing
+* changes and nothing animates — a queued state update would commit the
+* stale value and animate it, only to animate back.
+*
+* @internal
+*/
+function useTypedDeferredValue(value, type) {
+	let $ = c(5), deferred = useDeferredValue(value), [, setTransitions] = useState(0), t0, t1;
+	return $[0] !== deferred || $[1] !== type || $[2] !== value ? (t0 = () => {
+		Object.is(deferred, value) || startTransition(() => {
+			addTransitionType(type), setTransitions(_temp$1);
+		});
+	}, t1 = [
+		deferred,
+		type,
+		value
+	], $[0] = deferred, $[1] = type, $[2] = value, $[3] = t0, $[4] = t1) : (t0 = $[3], t1 = $[4]), useEffect(t0, t1), deferred;
+}
+function _temp$1(count) {
+	return count + 1;
+}
+var layout = "_1yq4ar78", layoutTransitionType = "sanity-themer", panelTransitionClasses = {
+	slideIn: "_1yq4ar76",
+	slideOut: "_1yq4ar77"
 }, splitTransitionClasses = {
-	resize: "_1yq4ar72",
-	slideIn: "_1yq4ar73",
-	slideOut: "_1yq4ar74",
-	dropIn: "_1yq4ar75",
-	dropOut: "_1yq4ar76"
+	resize: "_1yq4ar70",
+	crossfade: "_1yq4ar71",
+	slideIn: "_1yq4ar72",
+	slideOut: "_1yq4ar73",
+	dropIn: "_1yq4ar74",
+	dropOut: "_1yq4ar75"
 }, studioScheme = {
-	light: "_1yq4ar7a",
-	dark: "_1yq4ar7b"
+	light: "_1yq4ar79",
+	dark: "_1yq4ar7a"
 };
 function sameStoredState(a, b) {
 	return a.active === b.active && a.custom === b.custom && a.removed === b.removed && a.order === b.order;
@@ -2561,10 +3170,21 @@ function sameView(a, b) {
 * or on top, on small screens — through React's view transitions (React
 * 19.3), styled in `ThemerLayout.css.ts`.
 *
+* The machine says what shows and when the layout is in motion (its `panel`,
+* `split` and `moving` tags); the layout defers what shows, which puts the
+* panel's and the copy's mounts in a transition — what lets React animate
+* them — and picks the view transition classes from the tags.
+*
+* Whatever else on the page has a `view-transition-name` — an avatar the
+* Studio names so it moves as one piece — comes along in step: every
+* transition the layout starts carries `layoutTransitionType`, which the
+* stylesheet keys on to move every group in the layout's time (see
+* `ThemerLayout.css.ts`).
+*
 * @internal
 */
 function ThemerLayout(props) {
-	let $ = c(87), { baseOptions, ...layoutProps } = props, t0;
+	let $ = c(85), { baseOptions, ...layoutProps } = props, t0;
 	$[0] === baseOptions ? t0 = $[1] : (t0 = () => ({
 		baseOptions,
 		stored: readStoredState()
@@ -2572,68 +3192,34 @@ function ThemerLayout(props) {
 	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);
+	$[4] === snapshot ? t2 = $[5] : (t2 = snapshot.hasTag("panel"), $[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, mobile = useMediaIndex() <= 1, studioRef = useRef(null), navbarHeight = useStudioNavbarHeight(studioRef), t4;
-	$[8] !== open || $[9] !== split ? (t4 = {
-		open,
-		split
-	}, $[8] = open, $[9] = split, $[10] = t4) : t4 = $[10];
-	let [shown, setShown] = useState(t4), [resizing, setResizing] = useState(!1), t5;
-	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => setResizing(!1), $[11] = t5) : t5 = $[11];
-	let stopResizing = t5, t6;
-	$[12] !== open || $[13] !== shown.open || $[14] !== shown.split || $[15] !== split ? (t6 = () => {
-		(shown.open !== open || shown.split !== split) && startTransition(() => {
-			shown.open !== open && addTransitionType(PANEL_TRANSITION), shown.split !== split && addTransitionType(SPLIT_TRANSITION), setShown({
-				open,
-				split
-			}), setResizing(!0);
-		});
-	}, $[12] = open, $[13] = shown.open, $[14] = shown.split, $[15] = split, $[16] = t6) : t6 = $[16];
-	let t7;
-	$[17] !== open || $[18] !== shown || $[19] !== split ? (t7 = [
-		open,
-		shown,
-		split
-	], $[17] = open, $[18] = shown, $[19] = split, $[20] = t7) : t7 = $[20], useEffect(t6, t7);
-	let t8;
-	$[21] === resizing ? t8 = $[22] : (t8 = () => {
-		if (!resizing) return;
-		let timer = setTimeout(() => setResizing(!1), 500);
-		return () => clearTimeout(timer);
-	}, $[21] = resizing, $[22] = t8);
-	let t9;
-	$[23] !== resizing || $[24] !== shown ? (t9 = [resizing, shown], $[23] = resizing, $[24] = shown, $[25] = t9) : t9 = $[25], useEffect(t8, t9);
-	let t10, t11;
-	$[26] === stored ? (t10 = $[27], t11 = $[28]) : (t10 = () => writeStoredState(stored), t11 = [stored], $[26] = stored, $[27] = t10, $[28] = t11), useEffect(t10, t11);
-	let previousImages = useRef(images), t12, t13;
-	$[29] === images ? (t12 = $[30], t13 = $[31]) : (t12 = () => {
-		let current = new Set(Object.values(images));
-		for (let url of Object.values(previousImages.current)) current.has(url) || URL.revokeObjectURL(url);
-		previousImages.current = images;
-	}, t13 = [images], $[29] = images, $[30] = t12, $[31] = t13), useEffect(t12, t13);
-	let t14, t15;
-	$[32] === Symbol.for("react.memo_cache_sentinel") ? (t14 = () => () => {
-		for (let url_0 of Object.values(previousImages.current)) URL.revokeObjectURL(url_0);
-	}, t15 = [], $[32] = t14, $[33] = t15) : (t14 = $[32], t15 = $[33]), useEffect(t14, t15);
-	let t16;
-	$[34] !== baseOptions || $[35] !== stored ? (t16 = resolveThemes(stored, baseOptions), $[34] = baseOptions, $[35] = stored, $[36] = t16) : t16 = $[36];
-	let { themes, removed, active } = t16, activeOptions = active.source === "config" ? null : active.options, t17;
-	$[37] === activeOptions ? t17 = $[38] : (t17 = activeOptions === null ? null : buildTheme(activeOptions), $[37] = activeOptions, $[38] = t17);
-	let theme = t17, scheme = useColorSchemeValue(), oppositeScheme = scheme === "dark" ? "light" : "dark", t18;
-	$[39] !== scheme || $[40] !== theme?.v2?.color ? (t18 = () => {
-		let background = theme?.v2?.color[scheme].default.bg;
+	$[6] === snapshot ? t3 = $[7] : (t3 = snapshot.hasTag("split"), $[6] = snapshot, $[7] = t3);
+	let split = t3, t4;
+	$[8] === snapshot ? t4 = $[9] : (t4 = snapshot.hasTag("moving"), $[8] = snapshot, $[9] = t4);
+	let moving = t4, t5;
+	$[10] === snapshot ? t5 = $[11] : (t5 = snapshot.hasTag("switching"), $[10] = snapshot, $[11] = t5);
+	let switching = t5, { images } = snapshot.context, mobile = useMediaIndex() <= 1, studioRef = useRef(null), navbarHeight = useStudioNavbarHeight(studioRef), reduceMotion = usePrefersReducedMotion(), deferredOpen = useTypedDeferredValue(reduceMotion ? null : open, layoutTransitionType), deferredSplit = useTypedDeferredValue(reduceMotion ? null : split, layoutTransitionType), shownOpen = deferredOpen ?? open, shownSplit = deferredSplit ?? split, t6;
+	$[12] !== baseOptions || $[13] !== stored ? (t6 = resolveThemes(stored, baseOptions), $[12] = baseOptions, $[13] = stored, $[14] = t6) : t6 = $[14];
+	let { themes, removed, active } = t6, activeOptions = active.source === "config" ? null : active.options, t7;
+	$[15] === activeOptions ? t7 = $[16] : (t7 = activeOptions === null ? null : buildTheme(activeOptions), $[15] = activeOptions, $[16] = t7);
+	let theme = t7, deferredTheme = useTypedDeferredValue(reduceMotion ? void 0 : theme, layoutTransitionType), shownTheme = deferredTheme === void 0 ? theme : deferredTheme, scheme = useColorSchemeValue(), oppositeScheme = scheme === "dark" ? "light" : "dark", t8;
+	$[17] !== scheme || $[18] !== shownTheme?.v2?.color ? (t8 = () => {
+		let background = shownTheme?.v2?.color[scheme].default.bg;
 		if (background === void 0) return;
 		let { style } = document.body, previous = style.backgroundColor;
 		return style.backgroundColor = background, () => {
 			style.backgroundColor = previous;
 		};
-	}, $[39] = scheme, $[40] = theme?.v2?.color, $[41] = t18) : t18 = $[41];
-	let t19;
-	$[42] !== scheme || $[43] !== theme ? (t19 = [scheme, theme], $[42] = scheme, $[43] = theme, $[44] = t19) : t19 = $[44], useEffect(t18, t19);
-	let t20;
-	$[45] !== active || $[46] !== baseOptions || $[47] !== images || $[48] !== mobile || $[49] !== navbarHeight || $[50] !== open || $[51] !== removed || $[52] !== send || $[53] !== split || $[54] !== themes || $[55] !== view ? (t20 = {
+	}, $[17] = scheme, $[18] = shownTheme?.v2?.color, $[19] = t8) : t8 = $[19];
+	let t9;
+	$[20] !== scheme || $[21] !== shownTheme ? (t9 = [scheme, shownTheme], $[20] = scheme, $[21] = shownTheme, $[22] = t9) : t9 = $[22], useEffect(t8, t9);
+	let t10, t11;
+	$[23] === actorRef ? (t10 = $[24], t11 = $[25]) : (t10 = () => () => {
+		for (let url of Object.values(actorRef.getSnapshot().context.images)) URL.revokeObjectURL(url);
+	}, t11 = [actorRef], $[23] = actorRef, $[24] = t10, $[25] = t11), useEffect(t10, t11);
+	let t12;
+	$[26] !== active || $[27] !== baseOptions || $[28] !== images || $[29] !== mobile || $[30] !== navbarHeight || $[31] !== open || $[32] !== removed || $[33] !== send || $[34] !== split || $[35] !== themes || $[36] !== view ? (t12 = {
 		baseOptions,
 		themes,
 		removed,
@@ -2645,69 +3231,95 @@ function ThemerLayout(props) {
 		mobile,
 		navbarHeight,
 		send
-	}, $[45] = active, $[46] = baseOptions, $[47] = images, $[48] = mobile, $[49] = navbarHeight, $[50] = open, $[51] = removed, $[52] = send, $[53] = split, $[54] = themes, $[55] = view, $[56] = t20) : t20 = $[56];
-	let context = t20, studio = layoutProps.renderDefault(layoutProps), t21 = mobile ? "column" : "row", t22;
-	$[57] !== mobile || $[58] !== oppositeScheme || $[59] !== shown.open || $[60] !== shown.split || $[61] !== studio || $[62] !== theme ? (t22 = shown.open && /* @__PURE__ */ jsx(Activity, {
-		mode: shown.split ? "visible" : "hidden",
+	}, $[26] = active, $[27] = baseOptions, $[28] = images, $[29] = mobile, $[30] = navbarHeight, $[31] = open, $[32] = removed, $[33] = send, $[34] = split, $[35] = themes, $[36] = view, $[37] = t12) : t12 = $[37];
+	let context = t12, studio = layoutProps.renderDefault(layoutProps), t13;
+	$[38] === send ? t13 = $[39] : (t13 = () => send({ type: "layout.transitioned" }), $[38] = send, $[39] = t13);
+	let transitioned = t13, t14;
+	$[40] !== mobile || $[41] !== moving || $[42] !== reduceMotion || $[43] !== switching ? (t14 = reduceMotion ? {
+		copyEnter: "none",
+		copyExit: "none",
+		panelEnter: "none",
+		panelExit: "none",
+		update: "none",
+		studioUpdate: "none"
+	} : {
+		copyEnter: mobile ? splitTransitionClasses.dropIn : splitTransitionClasses.slideIn,
+		copyExit: mobile ? splitTransitionClasses.dropOut : splitTransitionClasses.slideOut,
+		panelEnter: panelTransitionClasses.slideIn,
+		panelExit: panelTransitionClasses.slideOut,
+		update: switching ? splitTransitionClasses.crossfade : "none",
+		studioUpdate: moving ? splitTransitionClasses.resize : switching ? splitTransitionClasses.crossfade : "none"
+	}, $[40] = mobile, $[41] = moving, $[42] = reduceMotion, $[43] = switching, $[44] = t14) : t14 = $[44];
+	let classes = t14, t15 = mobile ? "column" : "row", t16;
+	$[45] !== classes.copyEnter || $[46] !== classes.copyExit || $[47] !== classes.update || $[48] !== mobile || $[49] !== oppositeScheme || $[50] !== shownOpen || $[51] !== shownSplit || $[52] !== shownTheme || $[53] !== studio || $[54] !== transitioned ? (t16 = shownOpen && /* @__PURE__ */ jsx(Activity, {
+		mode: shownSplit ? "visible" : "hidden",
 		children: /* @__PURE__ */ jsx(ViewTransition, {
-			enter: mobile ? splitTransitionClasses.dropIn : splitTransitionClasses.slideIn,
-			exit: mobile ? splitTransitionClasses.dropOut : splitTransitionClasses.slideOut,
-			update: "none",
+			enter: classes.copyEnter,
+			exit: classes.copyExit,
+			onEnter: transitioned,
+			onExit: transitioned,
+			onUpdate: transitioned,
+			update: classes.update,
 			children: /* @__PURE__ */ jsx(StudioPreview, {
 				borderBottom: mobile,
 				borderRight: !mobile,
 				scheme: oppositeScheme,
-				theme,
+				theme: shownTheme,
 				children: studio
 			})
 		}, "opposite")
-	}), $[57] = mobile, $[58] = oppositeScheme, $[59] = shown.open, $[60] = shown.split, $[61] = studio, $[62] = theme, $[63] = t22) : t22 = $[63];
-	let t23 = resizing ? splitTransitionClasses.resize : "none", t24;
-	$[64] !== studio || $[65] !== theme ? (t24 = /* @__PURE__ */ jsx(StudioPreview, {
+	}), $[45] = classes.copyEnter, $[46] = classes.copyExit, $[47] = classes.update, $[48] = mobile, $[49] = oppositeScheme, $[50] = shownOpen, $[51] = shownSplit, $[52] = shownTheme, $[53] = studio, $[54] = transitioned, $[55] = t16) : t16 = $[55];
+	let t17;
+	$[56] !== shownTheme || $[57] !== studio ? (t17 = /* @__PURE__ */ jsx(StudioPreview, {
 		ref: studioRef,
-		theme,
+		theme: shownTheme,
 		children: studio
-	}), $[64] = studio, $[65] = theme, $[66] = t24) : t24 = $[66];
+	}), $[56] = shownTheme, $[57] = studio, $[58] = t17) : t17 = $[58];
+	let t18;
+	$[59] !== classes.studioUpdate || $[60] !== t17 || $[61] !== transitioned ? (t18 = /* @__PURE__ */ jsx(ViewTransition, {
+		onUpdate: transitioned,
+		update: classes.studioUpdate,
+		children: t17
+	}, "primary"), $[59] = classes.studioUpdate, $[60] = t17, $[61] = transitioned, $[62] = t18) : t18 = $[62];
+	let t19 = shownOpen ? "visible" : "hidden", t20 = shownTheme ?? void 0, t21;
+	$[63] === mobile ? t21 = $[64] : (t21 = /* @__PURE__ */ jsx(ResizableSidebar, { overlay: mobile }), $[63] = mobile, $[64] = t21);
+	let t22;
+	$[65] !== t20 || $[66] !== t21 ? (t22 = /* @__PURE__ */ jsx(ThemeProvider, {
+		theme: t20,
+		children: t21
+	}), $[65] = t20, $[66] = t21, $[67] = t22) : t22 = $[67];
+	let t23;
+	$[68] !== classes.panelEnter || $[69] !== classes.panelExit || $[70] !== classes.update || $[71] !== t22 || $[72] !== transitioned ? (t23 = /* @__PURE__ */ jsx(ViewTransition, {
+		enter: classes.panelEnter,
+		exit: classes.panelExit,
+		onEnter: transitioned,
+		onExit: transitioned,
+		onUpdate: transitioned,
+		update: classes.update,
+		children: t22
+	}, "panel"), $[68] = classes.panelEnter, $[69] = classes.panelExit, $[70] = classes.update, $[71] = t22, $[72] = transitioned, $[73] = t23) : t23 = $[73];
+	let t24;
+	$[74] !== t19 || $[75] !== t23 ? (t24 = /* @__PURE__ */ jsx(Activity, {
+		mode: t19,
+		children: t23
+	}), $[74] = t19, $[75] = t23, $[76] = t24) : t24 = $[76];
 	let t25;
-	$[67] !== stopResizing || $[68] !== t23 || $[69] !== t24 ? (t25 = /* @__PURE__ */ jsx(ViewTransition, {
-		onUpdate: stopResizing,
-		update: t23,
-		children: t24
-	}, "primary"), $[67] = stopResizing, $[68] = t23, $[69] = t24, $[70] = t25) : t25 = $[70];
-	let t26 = shown.open ? "visible" : "hidden", t27 = theme ?? void 0, t28;
-	$[71] === mobile ? t28 = $[72] : (t28 = /* @__PURE__ */ jsx(ResizableSidebar, { overlay: mobile }), $[71] = mobile, $[72] = t28);
-	let t29;
-	$[73] !== t27 || $[74] !== t28 ? (t29 = /* @__PURE__ */ jsx(ViewTransition, {
-		enter: panelTransitionClasses.slideIn,
-		exit: panelTransitionClasses.slideOut,
-		update: "none",
-		children: /* @__PURE__ */ jsx(ThemeProvider, {
-			theme: t27,
-			children: t28
-		})
-	}, "panel"), $[73] = t27, $[74] = t28, $[75] = t29) : t29 = $[75];
-	let t30;
-	$[76] !== t26 || $[77] !== t29 ? (t30 = /* @__PURE__ */ jsx(Activity, {
-		mode: t26,
-		children: t29
-	}), $[76] = t26, $[77] = t29, $[78] = t30) : t30 = $[78];
-	let t31;
-	$[79] !== t21 || $[80] !== t22 || $[81] !== t25 || $[82] !== t30 ? (t31 = /* @__PURE__ */ jsxs(Flex, {
+	$[77] !== t15 || $[78] !== t16 || $[79] !== t18 || $[80] !== t24 ? (t25 = /* @__PURE__ */ jsxs(Flex, {
 		className: layout,
-		direction: t21,
+		direction: t15,
 		height: "fill",
 		sizing: "border",
 		children: [
-			t22,
-			t25,
-			t30
+			t16,
+			t18,
+			t24
 		]
-	}), $[79] = t21, $[80] = t22, $[81] = t25, $[82] = t30, $[83] = t31) : t31 = $[83];
-	let t32;
-	return $[84] !== context || $[85] !== t31 ? (t32 = /* @__PURE__ */ jsx(ThemerContext.Provider, {
+	}), $[77] = t15, $[78] = t16, $[79] = t18, $[80] = t24, $[81] = t25) : t25 = $[81];
+	let t26;
+	return $[82] !== context || $[83] !== t25 ? (t26 = /* @__PURE__ */ jsx(ThemerContext.Provider, {
 		value: context,
-		children: t31
-	}), $[84] = context, $[85] = t31, $[86] = t32) : t32 = $[86], t32;
+		children: t25
+	}), $[82] = context, $[83] = t25, $[84] = t26) : t26 = $[84], t26;
 }
 /**
 * One copy of the Studio, in the given color scheme — or, without one, in the