@sanity/themer 0.8.1 → 0.10.0

package/dist/{ResizableSidebar-DD787kQr.js → ResizableSidebar-C1nr3Ls2.js}

@@ -1,32 +1,34 @@
-import { c as resolveThemeOptions, l as isColor, n as buildTheme, o as SCHEMES, r as buildPalette } from "./presets-CqBgS3A-.js";
-import { _ as titleFromFileName, c as minimizeOptions, d as IMAGE_PALETTE_VARIANTS, f as applyImagePalette, g as pickLuckyVariant, h as optionsFromImagePalette, i as displayTitle, m as extractImagePalette, p as currentImageVariant, u as IMAGE_PALETTE_TITLES, y as useThemer } from "./ResizableSidebar.css.ts.vanilla-M9EuPu-q.js";
+import { a as DEFAULT_BACKGROUND, c as resolveThemeOptions, d as hslToHex, f as relativeLuminance, i as DEFAULT_ACCENT, l as isColor, n as buildTheme, o as SCHEMES, r as buildPalette, s as deriveTextColor, u as hexToHsl } from "./presets-CqBgS3A-.js";
+import { a as displayTitle, c as resolveThemes, l as addThemerTransitionType, n as CONFIG_TITLE, t as CONFIG_SLUG } from "./themes-au1BLKmY.js";
 import { c } from "react/compiler-runtime";
 import { useColorSchemeValue } from "sanity";
-import { Badge, Box, Button, Card, Dialog, Flex, Layer, Stack, Text, TextInput, ThemeProvider, useRootTheme, useTheme_v2 } from "@sanity/ui";
-import { createContext, useContext, useEffect, useRef, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Badge, BoundaryElementProvider, Box, Button, Card, Dialog, Flex, Layer, Stack, Text, TextInput, ThemeProvider, useMediaIndex, useRootTheme, useTheme_v2 } from "@sanity/ui";
 import { Tooltip } from "@sanity/ui/tooltip";
+import { Activity, createContext, startTransition, useContext, useEffect, useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { dequal } from "dequal/lite";
+import { useSelector } from "@xstate/react";
 import { MotionConfig, Reorder, useDragControls } from "motion/react";
-import { ArrowLeftIcon } from "@sanity/icons/ArrowLeft";
 import { CloseIcon } from "@sanity/icons/Close";
-import { CodeBlockIcon } from "@sanity/icons/CodeBlock";
 import { SplitVerticalIcon } from "@sanity/icons/SplitVertical";
+import { CheckmarkIcon } from "@sanity/icons/Checkmark";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
 import { ResetIcon } from "@sanity/icons/Reset";
 import { TrashIcon } from "@sanity/icons/Trash";
+import { Menu, MenuButton, MenuDivider, MenuItem } from "@sanity/ui/menu";
 import { SparklesIcon } from "@sanity/icons/Sparkles";
 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 { CodeBlockIcon } from "@sanity/icons/CodeBlock";
+import { CopyIcon } from "@sanity/icons/Copy";
+import { EditIcon } from "@sanity/icons/Edit";
 import { RestoreIcon } from "@sanity/icons/Restore";
 import { ArrowDownIcon } from "@sanity/icons/ArrowDown";
 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 { Code } from "@sanity/ui/code";
 import { registerLanguage } from "react-refractor";
@@ -55,7 +57,7 @@ let lastGutter = 0;
 * @internal
 */
 function ScrollArea(props) {
-	let $ = c(15), { children, padding } = props, { space } = useTheme_v2(), ref = useRef(null), [gutter, setGutter] = useState(_temp$6), t0, t1;
+	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;
@@ -75,7 +77,7 @@ function ScrollArea(props) {
 	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, {
+	$[8] !== children || $[9] !== inset ? (t7 = /* @__PURE__ */ jsx(ScrollAreaInsetContext, {
 		value: inset,
 		children
 	}), $[8] = children, $[9] = inset, $[10] = t7) : t7 = $[10];
@@ -90,7 +92,7 @@ function ScrollArea(props) {
 		children: t7
 	}), $[11] = padding, $[12] = t6, $[13] = t7, $[14] = t8) : t8 = $[14], t8;
 }
-function _temp$6() {
+function _temp$8() {
 	return lastGutter;
 }
 /**
@@ -210,7 +212,7 @@ function MockStudio(props) {
 	let t4;
 	$[13] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsx("div", {
 		className: list,
-		children: LIST_ROWS.map(_temp$5)
+		children: LIST_ROWS.map(_temp$7)
 	}), $[13] = t4) : t4 = $[13];
 	let t5;
 	$[14] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsxs("div", {
@@ -218,7 +220,7 @@ function MockStudio(props) {
 		children: [/* @__PURE__ */ jsx("div", {
 			className: line.fg,
 			style: { width: "45%" }
-		}), FIELDS$1.map(_temp2)]
+		}), FIELDS$1.map(_temp2$1)]
 	}), $[14] = t5) : t5 = $[14];
 	let t6;
 	$[15] === Symbol.for("react.memo_cache_sentinel") ? (t6 = /* @__PURE__ */ jsxs("div", {
@@ -238,7 +240,7 @@ function MockStudio(props) {
 		children: [t3, t6]
 	}), $[16] = t0, $[17] = t1, $[18] = t7) : t7 = $[18], t7;
 }
-function _temp2(width_0) {
+function _temp2$1(width_0) {
 	return /* @__PURE__ */ jsxs("div", {
 		className: field,
 		children: [/* @__PURE__ */ jsx("div", {
@@ -247,7 +249,7 @@ function _temp2(width_0) {
 		}), /* @__PURE__ */ jsx("div", { className: input })]
 	}, width_0);
 }
-function _temp$5(width, index) {
+function _temp$7(width, index) {
 	let isSelected = index === 1;
 	return /* @__PURE__ */ jsx("div", {
 		className: listRow,
@@ -277,16 +279,17 @@ 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.
+* custom themes, one to delete it for good. The footer leads back to the
+* list, and the machine leaves the flow on its own once the last theme is
+* gone.
 *
 * @internal
 */
-function RemovedThemes() {
-	let $ = c(7), { removed, send } = useThemer(), t0;
-	if ($[0] !== removed || $[1] !== send) {
-		let t1;
-		$[3] === send ? t1 = $[4] : (t1 = (theme) => /* @__PURE__ */ jsxs(Stack, {
+function RemovedThemes(t0) {
+	let $ = c(12), { actorRef, removed } = t0, t1;
+	if ($[0] !== actorRef || $[1] !== removed) {
+		let t2;
+		$[3] === actorRef ? t2 = $[4] : (t2 = (theme) => /* @__PURE__ */ jsxs(Stack, {
 			gap: 3,
 			children: [
 				/* @__PURE__ */ jsx(Box, {
@@ -304,7 +307,7 @@ function RemovedThemes() {
 					justify: "center",
 					children: [/* @__PURE__ */ jsx(Button, {
 						mode: "ghost",
-						onClick: () => send({
+						onClick: () => actorRef.send({
 							type: "theme.restore",
 							slug: theme.slug
 						}),
@@ -312,7 +315,7 @@ function RemovedThemes() {
 						text: "Restore"
 					}), theme.source === "custom" && /* @__PURE__ */ jsx(Button, {
 						mode: "ghost",
-						onClick: () => send({
+						onClick: () => actorRef.send({
 							type: "theme.delete",
 							slug: theme.slug
 						}),
@@ -322,16 +325,331 @@ function RemovedThemes() {
 					})]
 				})
 			]
-		}, 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, {
+		}, theme.slug), $[3] = actorRef, $[4] = t2), t1 = removed.map(t2), $[0] = actorRef, $[1] = removed, $[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	$[5] === t1 ? t2 = $[6] : (t2 = /* @__PURE__ */ jsx(ScrollArea, {
 		padding: 3,
 		children: /* @__PURE__ */ jsx(Stack, {
 			gap: 5,
-			children: t0
+			children: t1
+		})
+	}), $[5] = t1, $[6] = t2);
+	let t3;
+	$[7] === actorRef ? t3 = $[8] : (t3 = /* @__PURE__ */ jsx(Card, {
+		borderTop: !0,
+		padding: 3,
+		children: /* @__PURE__ */ jsx(Flex, {
+			justify: "flex-end",
+			children: /* @__PURE__ */ jsx(Button, {
+				gap: 2,
+				icon: CheckmarkIcon,
+				onClick: () => actorRef.send({ type: "flow.list" }),
+				padding: 2,
+				text: "Done",
+				mode: "ghost"
+			})
 		})
-	}), $[5] = t0, $[6] = t1), t1;
+	}), $[7] = actorRef, $[8] = t3);
+	let t4;
+	return $[9] !== t2 || $[10] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Fragment, { children: [t2, t3] }), $[9] = t2, $[10] = t3, $[11] = t4) : t4 = $[11], t4;
+}
+/** The variants in the order the tool offers them @internal */
+const IMAGE_PALETTE_VARIANTS = [
+	"muted",
+	"vibrant",
+	"lightMuted",
+	"lightVibrant",
+	"darkMuted",
+	"darkVibrant"
+], IMAGE_PALETTE_TITLES = {
+	dominant: "Dominant",
+	vibrant: "Vibrant",
+	lightVibrant: "Light vibrant",
+	darkVibrant: "Dark vibrant",
+	muted: "Muted",
+	lightMuted: "Light muted",
+	darkMuted: "Dark muted"
+}, TARGETS = [
+	["vibrant", {
+		lightness: [
+			.5,
+			.3,
+			.7
+		],
+		saturation: [
+			1,
+			.35,
+			1
+		]
+	}],
+	["lightVibrant", {
+		lightness: [
+			.74,
+			.55,
+			1
+		],
+		saturation: [
+			1,
+			.35,
+			1
+		]
+	}],
+	["darkVibrant", {
+		lightness: [
+			.26,
+			0,
+			.45
+		],
+		saturation: [
+			1,
+			.35,
+			1
+		]
+	}],
+	["muted", {
+		lightness: [
+			.5,
+			.3,
+			.7
+		],
+		saturation: [
+			.3,
+			0,
+			.4
+		]
+	}],
+	["lightMuted", {
+		lightness: [
+			.74,
+			.55,
+			1
+		],
+		saturation: [
+			.3,
+			0,
+			.4
+		]
+	}],
+	["darkMuted", {
+		lightness: [
+			.26,
+			0,
+			.45
+		],
+		saturation: [
+			.3,
+			0,
+			.4
+		]
+	}]
+];
+/**
+* Extracts the color palette of an image from its pixels, the way the Vibrant
+* algorithm does: the colors are quantized into a coarse histogram, and each
+* swatch claims the color that comes closest to its target lightness and
+* saturation — weighted by how much of the image it covers — that no other
+* swatch has claimed yet. The dominant swatch is simply the most common
+* color. Runs anywhere pixels come from, so it can run on device.
+*
+* @internal
+*/
+function extractImagePalette(pixels) {
+	let candidates = quantize(pixels), palette = {
+		dominant: null,
+		vibrant: null,
+		lightVibrant: null,
+		darkVibrant: null,
+		muted: null,
+		lightMuted: null,
+		darkMuted: null
+	};
+	if (candidates.length === 0) return palette;
+	let maximumPopulation = Math.max(...candidates.map((candidate) => candidate.population)), claimed = /* @__PURE__ */ new Set();
+	for (let [key, target] of TARGETS) {
+		let best = null, bestScore = -Infinity;
+		for (let candidate of candidates) {
+			if (claimed.has(candidate.hex) || !matchesTarget(candidate, target)) continue;
+			let score = scoreCandidate(candidate, target, maximumPopulation);
+			score > bestScore && (best = candidate, bestScore = score);
+		}
+		best && (palette[key] = best.hex, claimed.add(best.hex));
+	}
+	return palette.dominant = candidates.reduce((most, candidate) => candidate.population > most.population ? candidate : most).hex, palette;
+}
+/**
+* Turns the pixels into a histogram of quantized colors, each averaged over
+* the pixels it stands for, leaving out transparent pixels and the near-black
+* and near-white ones that are backdrop rather than color.
+*/
+function quantize(pixels) {
+	let { data } = pixels, buckets = /* @__PURE__ */ new Map(), length = Math.min(data.length, pixels.width * pixels.height * 4);
+	for (let offset = 0; offset + 3 < length; offset += 4) {
+		let r = data[offset], g = data[offset + 1], b = data[offset + 2];
+		if (data[offset + 3] < 125) continue;
+		let lightness = (Math.max(r, g, b) + Math.min(r, g, b)) / 510;
+		if (lightness < .05 || lightness > .95) continue;
+		let key = r >> 3 << 10 | g >> 3 << 5 | b >> 3, bucket = buckets.get(key);
+		bucket ? (bucket.count++, bucket.r += r, bucket.g += g, bucket.b += b) : buckets.set(key, {
+			count: 1,
+			r,
+			g,
+			b
+		});
+	}
+	let candidates = [];
+	for (let bucket of buckets.values()) {
+		let r = Math.round(bucket.r / bucket.count), g = Math.round(bucket.g / bucket.count), b = Math.round(bucket.b / bucket.count), { saturation, lightness } = saturationAndLightness(r, g, b);
+		candidates.push({
+			hex: rgbToHex(r, g, b),
+			population: bucket.count,
+			saturation,
+			lightness
+		});
+	}
+	return candidates;
+}
+function matchesTarget(candidate, target) {
+	return candidate.lightness >= target.lightness[1] && candidate.lightness <= target.lightness[2] && candidate.saturation >= target.saturation[1] && candidate.saturation <= target.saturation[2];
+}
+function scoreCandidate(candidate, target, maximumPopulation) {
+	return 3 * (1 - Math.abs(candidate.saturation - target.saturation[0])) + 6.5 * (1 - Math.abs(candidate.lightness - target.lightness[0])) + .5 * (candidate.population / maximumPopulation);
+}
+function saturationAndLightness(r, g, b) {
+	let max = Math.max(r, g, b) / 255, min = Math.min(r, g, b) / 255, lightness = (max + min) / 2, delta = max - min;
+	return {
+		saturation: delta === 0 ? 0 : lightness > .5 ? delta / (2 - max - min) : delta / (max + min),
+		lightness
+	};
+}
+function rgbToHex(r, g, b) {
+	return `#${[
+		r,
+		g,
+		b
+	].map((channel) => channel.toString(16).padStart(2, "0")).join("")}`;
+}
+/** Reads `#rgb` and `#rrggbb` alike — stored palettes may hold either */
+function hexToRgb(hex) {
+	let expanded = hex.length === 4 ? `${hex[1]}${hex[1]}${hex[2]}${hex[2]}${hex[3]}${hex[3]}` : hex.slice(1);
+	return [
+		parseInt(expanded.slice(0, 2), 16),
+		parseInt(expanded.slice(2, 4), 16),
+		parseInt(expanded.slice(4, 6), 16)
+	];
+}
+/** Mixes `amount` of `color` into `base` */
+function tint(base, color, amount) {
+	let [r1, g1, b1] = hexToRgb(base), [r2, g2, b2] = hexToRgb(color);
+	return rgbToHex(Math.round(r1 + (r2 - r1) * amount), Math.round(g1 + (g2 - g1) * amount), Math.round(b1 + (b2 - b1) * amount));
+}
+/** How much of the palette tints each scheme's stock background */
+const BACKGROUND_TINT = {
+	light: .08,
+	dark: .3
+}, BUTTON_LABEL = {
+	light: "#ffffff",
+	dark: "#000000"
+}, ACCENT_LIGHTNESS_STEP = .01;
+function contrastRatio(a, b) {
+	let [lighter, darker] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x);
+	return (lighter + .05) / (darker + .05);
+}
+/**
+* Makes an accent readable as a button in the given scheme: a light scheme
+* accent is darkened until white text on it reaches AA contrast, a dark
+* scheme accent lightened until black text does — as far as the accent's
+* hue and saturation allow. Accents that already pass come back untouched.
+*
+* @internal
+*/
+function readableAccent(hex, scheme) {
+	let label = BUTTON_LABEL[scheme], { h, s } = hexToHsl(hex), { l } = hexToHsl(hex), current = hex;
+	for (; contrastRatio(current, label) < 4.5;) {
+		let next = scheme === "light" ? l - ACCENT_LIGHTNESS_STEP : l + ACCENT_LIGHTNESS_STEP;
+		if (next < 0 || next > 1) break;
+		l = next, current = hslToHex({
+			h,
+			s,
+			l
+		});
+	}
+	return current;
+}
+/** The accent a variant gives a scheme, made readable on a button */
+function variantAccent(palette, variant, scheme) {
+	let swatch = (variant ? palette[variant] : null) ?? palette.vibrant ?? (scheme === "light" ? palette.darkVibrant : palette.lightVibrant) ?? palette.dominant;
+	return swatch === null ? null : readableAccent(swatch, scheme);
+}
+/**
+* Derives theme options from an image palette: the accent of both schemes is
+* the swatch of the chosen variant — or, without one, the vibrant swatch,
+* each scheme falling back to the vibrant swatch of its own end of the scale —
+* adjusted until it is readable as a button. The muted swatch becomes the text color, and the light and dark muted
+* swatches tint the stock backgrounds of their scheme — enough to carry the
+* image's tone without giving up a usable canvas. Whatever the palette lacks
+* stays at the theme defaults.
+*
+* @internal
+*/
+function optionsFromImagePalette(palette, variant) {
+	let options = {}, light = schemeFromPalette(variantAccent(palette, variant ?? null, "light"), palette.muted ?? palette.darkMuted, palette.lightMuted ?? palette.muted ?? palette.lightVibrant, "light"), dark = schemeFromPalette(variantAccent(palette, variant ?? null, "dark"), palette.muted ?? palette.lightMuted, palette.darkMuted ?? palette.muted ?? palette.darkVibrant, "dark");
+	return light && (options.light = light), dark && (options.dark = dark), options;
+}
+function schemeFromPalette(accent, text, backgroundTint, scheme) {
+	let options = {};
+	return accent && (options.accent = accent), text && (options.text = text), backgroundTint && (options.background = tint(DEFAULT_BACKGROUND[scheme], backgroundTint, BACKGROUND_TINT[scheme])), Object.keys(options).length > 0 ? options : null;
+}
+/**
+* Applies an image palette to existing theme options: the colors the palette
+* provides replace the current ones scheme by scheme, and whatever it does
+* not touch — like the contrast — stays as it is.
+*
+* @internal
+*/
+function applyImagePalette(options, palette, variant) {
+	let derived = optionsFromImagePalette(palette, variant), next = { ...options };
+	for (let scheme of SCHEMES) derived[scheme] && (next[scheme] = {
+		...options[scheme],
+		...derived[scheme]
+	});
+	return next;
+}
+/**
+* The variant a theme is built around: the one whose swatch is the theme's
+* accent, or `null` when the accent comes from somewhere else.
+*
+* @internal
+*/
+function currentImageVariant(options, palette) {
+	let accent = options.light?.accent;
+	return accent ? IMAGE_PALETTE_VARIANTS.find((variant) => palette[variant] !== null && variantAccent(palette, variant, "light") === accent) ?? null : null;
+}
+/**
+* How much a swatch has going for it as an accent: saturation first, then
+* closeness to mid lightness — the range where an accent reads best.
+*/
+function interest(hex) {
+	let { s, l } = hexToHsl(hex);
+	return .1 + .55 * s + .35 * (1 - Math.abs(l - .5) * 2);
+}
+/**
+* Picks a variant for the "I'm feeling lucky" button: a random one, weighted
+* by how interesting its swatch is as an accent, and never the one the theme
+* already uses while there are others to pick from.
+*
+* @internal
+*/
+function pickLuckyVariant(palette, options = {}) {
+	let { exclude = null, random = Math.random } = options, candidates = IMAGE_PALETTE_VARIANTS.filter((variant) => palette[variant] !== null);
+	if (candidates.length > 1 && (candidates = candidates.filter((variant) => variant !== exclude)), candidates.length === 0) return null;
+	let weights = candidates.map((variant) => interest(palette[variant])), total = weights.reduce((sum, weight) => sum + weight, 0), pick = random() * total;
+	for (let [index, variant] of candidates.entries()) if (pick -= weights[index], pick < 0) return variant;
+	return candidates.at(-1) ?? null;
+}
+/** A theme title for the image a palette came from, e.g. `sunset-beach.jpg` → `sunset beach` @internal */
+function titleFromFileName(name) {
+	return name.replace(/\.[^.]+$/, "").replace(/[-_]+/g, " ").trim() || "Image theme";
 }
 /**
 * A button with an animated tooltip instead of a `title` attribute, sized like
@@ -365,8 +683,30 @@ function TooltipButton(props) {
 	}), $[8] = t0, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
 }
 /**
+* The file picker for an image, as a hidden file input that a button or menu
+* item clicks: the chosen file goes to `onFile`, and nowhere else — nothing
+* is uploaded.
+*
+* @internal
+*/
+function ImageFileInput(t0) {
+	let $ = c(5), { onFile, ref } = t0, t1;
+	$[0] === onFile ? t1 = $[1] : (t1 = (event) => {
+		let file = event.currentTarget.files?.[0];
+		event.currentTarget.value = "", file && onFile(file);
+	}, $[0] = onFile, $[1] = t1);
+	let t2;
+	return $[2] !== ref || $[3] !== t1 ? (t2 = /* @__PURE__ */ jsx("input", {
+		accept: "image/*",
+		hidden: !0,
+		onChange: t1,
+		ref,
+		type: "file"
+	}), $[2] = ref, $[3] = t1, $[4] = t2) : t2 = $[4], t2;
+}
+/**
 * A button that opens the file picker for an image, and hands the chosen file
-* over — the picker is a hidden file input, so nothing is uploaded anywhere.
+* over.
 *
 * @internal
 */
@@ -382,15 +722,9 @@ function ImageFileButton(props) {
 		onClick: t0
 	}), $[4] = buttonProps, $[5] = t1);
 	let t2;
-	$[6] === onFile ? t2 = $[7] : (t2 = /* @__PURE__ */ jsx("input", {
-		accept: "image/*",
-		hidden: !0,
-		onChange: (event) => {
-			let file = event.currentTarget.files?.[0];
-			event.currentTarget.value = "", file && onFile(file);
-		},
-		ref: inputRef,
-		type: "file"
+	$[6] === onFile ? t2 = $[7] : (t2 = /* @__PURE__ */ jsx(ImageFileInput, {
+		onFile,
+		ref: inputRef
 	}), $[6] = onFile, $[7] = t2);
 	let t3;
 	return $[8] !== t1 || $[9] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Fragment, { children: [t1, t2] }), $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
@@ -438,21 +772,17 @@ async function decodeImage(file) {
 * @internal
 */
 function useImagePalette(onPalette) {
-	let $ = c(10), toast = useToast(), [busy, setBusy] = useState(!1), onPaletteRef = useRef(onPalette), mountedRef = useRef(!0), latestPickRef = useRef(0), t0, t1;
+	let $ = c(8), toast = useToast(), [busy, setBusy] = useState(!1), onPaletteRef = useRef(onPalette), latestPickRef = useRef(0), t0, t1;
 	$[0] === onPalette ? (t0 = $[1], t1 = $[2]) : (t0 = () => {
 		onPaletteRef.current = onPalette;
 	}, t1 = [onPalette], $[0] = onPalette, $[1] = t0, $[2] = t1), useEffect(t0, t1);
-	let t2, t3;
-	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t2 = () => (mountedRef.current = !0, () => {
-		mountedRef.current = !1;
-	}), t3 = [], $[3] = t2, $[4] = t3) : (t2 = $[3], t3 = $[4]), useEffect(t2, t3);
-	let t4;
-	$[5] === toast ? t4 = $[6] : (t4 = (file) => {
+	let t2;
+	$[3] === toast ? t2 = $[4] : (t2 = (file) => {
 		let pick = latestPickRef.current += 1;
 		setBusy(!0);
-		let isCurrent = () => mountedRef.current && latestPickRef.current === pick, extract = async () => {
+		let isCurrent = () => latestPickRef.current === pick, extract = async () => {
 			let palette = extractImagePalette(await readImagePixels(file));
-			isCurrent() && (Object.values(palette).every(_temp$4) ? toast.push({
+			isCurrent() && (Object.values(palette).every(_temp$6) ? toast.push({
 				status: "warning",
 				title: "Found no colors in that image"
 			}) : onPaletteRef.current(palette, file));
@@ -465,14 +795,14 @@ function useImagePalette(onPalette) {
 		}).finally(() => {
 			isCurrent() && setBusy(!1);
 		});
-	}, $[5] = toast, $[6] = t4);
-	let pickImage = t4, t5;
-	return $[7] !== busy || $[8] !== pickImage ? (t5 = {
+	}, $[3] = toast, $[4] = t2);
+	let pickImage = t2, t3;
+	return $[5] !== busy || $[6] !== pickImage ? (t3 = {
 		busy,
 		pickImage
-	}, $[7] = busy, $[8] = pickImage, $[9] = t5) : t5 = $[9], t5;
+	}, $[5] = busy, $[6] = pickImage, $[7] = t3) : t3 = $[7], t3;
 }
-function _temp$4(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)";
@@ -663,7 +993,7 @@ function ImagePaletteSection(props) {
 		border: !0,
 		onDragEnter: t4,
 		onDragLeave: t5,
-		onDragOver: _temp$3,
+		onDragOver: _temp$5,
 		onDrop: t6,
 		padding: 3,
 		radius: 3,
@@ -671,7 +1001,7 @@ function ImagePaletteSection(props) {
 		children: t12
 	}), $[34] = t12, $[35] = t6, $[36] = t7, $[37] = t13) : t13 = $[37], t13;
 }
-function _temp$3(event_0) {
+function _temp$5(event_0) {
 	event_0.preventDefault();
 }
 var colorRowText = "os3rj2", range = "os3rj1", swatch = "os3rj0";
@@ -684,8 +1014,8 @@ const SCHEME_TITLES = {
 * to the sidebar (or at the bottom, stacked on small screens), the other one
 * takes the far side
 */
-function splitHint(own, mobile) {
-	return mobile ? own ? "Shown at the bottom" : "Shown at the top" : own ? "Shown on the right, next to the themer" : "Shown on the left";
+function splitHint(own) {
+	return own ? "Shown on the right, next to the themer" : "Shown on the left";
 }
 const SCHEME_OPTION_KEYS = [
 	"accent",
@@ -707,71 +1037,73 @@ const SCHEME_OPTION_KEYS = [
 *
 * @internal
 */
-function ThemeEditor(props) {
-	let $ = c(42), { focusTitle, slug } = props, { themes, images, split, mobile, send } = useThemer(), t0;
+function ThemeEditor(t0) {
+	let $ = c(41), { actorRef, focusTitle, slug, split, themes } = t0, images = useSelector(actorRef, _temp$4), t1;
 	if ($[0] !== slug || $[1] !== themes) {
-		let t1;
-		$[3] === slug ? t1 = $[4] : (t1 = (candidate) => candidate.slug === slug && candidate.source === "custom", $[3] = slug, $[4] = t1), t0 = themes.find(t1), $[0] = slug, $[1] = themes, $[2] = t0;
-	} else t0 = $[2];
-	let theme = t0;
+		let t2;
+		$[3] === slug ? t2 = $[4] : (t2 = (candidate) => candidate.slug === slug && candidate.source === "custom", $[3] = slug, $[4] = t2), t1 = themes.find(t2), $[0] = slug, $[1] = themes, $[2] = t1;
+	} else t1 = $[2];
+	let theme = t1;
 	if (!theme) return null;
-	let t1;
-	$[5] !== send || $[6] !== slug || $[7] !== theme.options || $[8] !== theme.palette ? (t1 = (variant) => {
-		theme.palette && variant !== null && send({
+	let t2;
+	$[5] !== actorRef || $[6] !== slug || $[7] !== theme.options || $[8] !== theme.palette ? (t2 = (variant) => {
+		theme.palette && variant !== null && actorRef.send({
 			type: "theme.update",
 			slug,
 			options: applyImagePalette(theme.options, theme.palette, variant)
 		});
-	}, $[5] = send, $[6] = slug, $[7] = theme.options, $[8] = theme.palette, $[9] = t1) : t1 = $[9];
-	let applyVariant = t1, t2 = images[slug], t3;
-	$[10] === send ? t3 = $[11] : (t3 = () => send({ type: "flow.list" }), $[10] = send, $[11] = t3);
-	let t4;
-	$[12] !== applyVariant || $[13] !== theme.options || $[14] !== theme.palette ? (t4 = () => {
-		theme.palette && applyVariant(pickLuckyVariant(theme.palette, { exclude: currentImageVariant(theme.options, theme.palette) }));
-	}, $[12] = applyVariant, $[13] = theme.options, $[14] = theme.palette, $[15] = t4) : t4 = $[15];
+	}, $[5] = actorRef, $[6] = slug, $[7] = theme.options, $[8] = theme.palette, $[9] = t2) : t2 = $[9];
+	let applyVariant = t2, t3 = images[slug], t4;
+	$[10] === actorRef ? t4 = $[11] : (t4 = () => actorRef.send({ type: "flow.list" }), $[10] = actorRef, $[11] = t4);
 	let t5;
-	$[16] !== send || $[17] !== slug ? (t5 = (options) => send({
+	$[12] !== applyVariant || $[13] !== theme.options || $[14] !== theme.palette ? (t5 = () => {
+		theme.palette && applyVariant(pickLuckyVariant(theme.palette, { exclude: currentImageVariant(theme.options, theme.palette) }));
+	}, $[12] = applyVariant, $[13] = theme.options, $[14] = theme.palette, $[15] = t5) : t5 = $[15];
+	let t6;
+	$[16] !== actorRef || $[17] !== slug ? (t6 = (options) => actorRef.send({
 		type: "theme.update",
 		slug,
 		options
-	}), $[16] = send, $[17] = slug, $[18] = t5) : t5 = $[18];
-	let t6;
-	$[19] !== send || $[20] !== slug || $[21] !== theme.options ? (t6 = (palette, file) => send({
+	}), $[16] = actorRef, $[17] = slug, $[18] = t6) : t6 = $[18];
+	let t7;
+	$[19] !== actorRef || $[20] !== slug || $[21] !== theme.options ? (t7 = (palette, file) => actorRef.send({
 		type: "theme.update",
 		slug,
 		options: applyImagePalette(theme.options, palette),
 		palette,
 		imageUrl: URL.createObjectURL(file)
-	}), $[19] = send, $[20] = slug, $[21] = theme.options, $[22] = t6) : t6 = $[22];
-	let t7, t8;
-	$[23] !== send || $[24] !== slug ? (t7 = () => send({
+	}), $[19] = actorRef, $[20] = slug, $[21] = theme.options, $[22] = t7) : t7 = $[22];
+	let t8, t9;
+	$[23] !== actorRef || $[24] !== slug ? (t8 = () => actorRef.send({
 		type: "theme.remove",
 		slug
-	}), t8 = (title) => send({
+	}), t9 = (title) => actorRef.send({
 		type: "theme.update",
 		slug,
 		title
-	}), $[23] = send, $[24] = slug, $[25] = t7, $[26] = t8) : (t7 = $[25], t8 = $[26]);
-	let t9;
-	return $[27] !== applyVariant || $[28] !== focusTitle || $[29] !== mobile || $[30] !== split || $[31] !== t2 || $[32] !== t3 || $[33] !== t4 || $[34] !== t5 || $[35] !== t6 || $[36] !== t7 || $[37] !== t8 || $[38] !== theme.options || $[39] !== theme.palette || $[40] !== theme.title ? (t9 = /* @__PURE__ */ jsx(ThemeEditorForm, {
+	}), $[23] = actorRef, $[24] = slug, $[25] = t8, $[26] = t9) : (t8 = $[25], t9 = $[26]);
+	let t10;
+	return $[27] !== applyVariant || $[28] !== focusTitle || $[29] !== split || $[30] !== t3 || $[31] !== t4 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7 || $[35] !== t8 || $[36] !== t9 || $[37] !== theme.options || $[38] !== theme.palette || $[39] !== theme.title ? (t10 = /* @__PURE__ */ jsx(ThemeEditorForm, {
 		focusTitle,
-		imageUrl: t2,
-		onDone: t3,
-		onLucky: t4,
-		onOptionsChange: t5,
-		onPalette: t6,
-		onRemove: t7,
-		onTitleChange: t8,
+		imageUrl: t3,
+		onDone: t4,
+		onLucky: t5,
+		onOptionsChange: t6,
+		onPalette: t7,
+		onRemove: t8,
+		onTitleChange: t9,
 		onVariant: applyVariant,
 		options: theme.options,
 		palette: theme.palette,
 		split,
-		mobile,
 		title: theme.title
-	}), $[27] = applyVariant, $[28] = focusTitle, $[29] = mobile, $[30] = split, $[31] = t2, $[32] = t3, $[33] = t4, $[34] = t5, $[35] = t6, $[36] = t7, $[37] = t8, $[38] = theme.options, $[39] = theme.palette, $[40] = theme.title, $[41] = t9) : t9 = $[41], t9;
+	}), $[27] = applyVariant, $[28] = focusTitle, $[29] = split, $[30] = t3, $[31] = t4, $[32] = t5, $[33] = t6, $[34] = t7, $[35] = t8, $[36] = t9, $[37] = theme.options, $[38] = theme.palette, $[39] = theme.title, $[40] = t10) : t10 = $[40], t10;
+}
+function _temp$4(snapshot) {
+	return snapshot.context.images;
 }
 function ThemeEditorForm(props) {
-	let $ = c(50), { focusTitle, imageUrl, onDone, onLucky, onOptionsChange, onPalette, onRemove, onTitleChange, onVariant, options, palette, split, mobile, title } = props, studioScheme = useColorSchemeValue(), t0;
+	let $ = c(53), { focusTitle, imageUrl, onDone, onLucky, onOptionsChange, onPalette, onRemove, onTitleChange, onVariant, options, palette, split, title } = props, studioScheme = useColorSchemeValue(), actionsId = useId(), t0;
 	$[0] === options ? t0 = $[1] : (t0 = resolveThemeOptions(options), $[0] = options, $[1] = t0);
 	let resolved = t0, t1;
 	$[2] === options ? t1 = $[3] : (t1 = buildPalette(options), $[2] = options, $[3] = t1);
@@ -795,7 +1127,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$2 : void 0, t7;
+	let t6 = focusTitle ? _temp2 : void 0, t7;
 	$[12] !== focusTitle || $[13] !== t5 || $[14] !== t6 || $[15] !== title ? (t7 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 2,
 		children: [t4, /* @__PURE__ */ jsx(TextInput, {
@@ -818,7 +1150,7 @@ function ThemeEditorForm(props) {
 		palette
 	}), $[17] = imageUrl, $[18] = onLucky, $[19] = onPalette, $[20] = onVariant, $[21] = options, $[22] = palette, $[23] = t8) : t8 = $[23];
 	let t9;
-	$[24] !== mobile || $[25] !== options || $[26] !== palettes || $[27] !== patchScheme || $[28] !== resolved || $[29] !== split || $[30] !== studioScheme ? (t9 = SCHEMES.map((scheme_0) => /* @__PURE__ */ jsx(SchemeCard, {
+	$[24] !== options || $[25] !== palettes || $[26] !== patchScheme || $[27] !== resolved || $[28] !== split || $[29] !== studioScheme ? (t9 = SCHEMES.map((scheme_0) => /* @__PURE__ */ jsx(SchemeCard, {
 		active: split || scheme_0 === studioScheme,
 		onChange: (changes_0) => patchScheme(scheme_0, changes_0),
 		options: options[scheme_0] ?? {},
@@ -826,12 +1158,12 @@ function ThemeEditorForm(props) {
 		resolved: resolved[scheme_0],
 		scheme: scheme_0,
 		split,
-		splitHint: splitHint(scheme_0 === studioScheme, mobile)
-	}, scheme_0)), $[24] = mobile, $[25] = options, $[26] = palettes, $[27] = patchScheme, $[28] = resolved, $[29] = split, $[30] = studioScheme, $[31] = t9) : t9 = $[31];
+		splitHint: splitHint(scheme_0 === studioScheme)
+	}, scheme_0)), $[24] = options, $[25] = palettes, $[26] = patchScheme, $[27] = resolved, $[28] = split, $[29] = studioScheme, $[30] = t9) : t9 = $[30];
 	let t10;
-	$[32] === t9 ? t10 = $[33] : (t10 = /* @__PURE__ */ jsx(ScrollAreaBleed, { children: t9 }), $[32] = t9, $[33] = t10);
+	$[31] === t9 ? t10 = $[32] : (t10 = /* @__PURE__ */ jsx(ScrollAreaBleed, { children: t9 }), $[31] = t9, $[32] = t10);
 	let t11;
-	$[34] !== t10 || $[35] !== t3 || $[36] !== t7 || $[37] !== t8 ? (t11 = /* @__PURE__ */ jsx(ScrollArea, {
+	$[33] !== t10 || $[34] !== t3 || $[35] !== t7 || $[36] !== t8 ? (t11 = /* @__PURE__ */ jsx(ScrollArea, {
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Stack, {
 			gap: 4,
@@ -842,42 +1174,58 @@ function ThemeEditorForm(props) {
 				t10
 			]
 		})
-	}), $[34] = t10, $[35] = t3, $[36] = t7, $[37] = t8, $[38] = t11) : t11 = $[38];
+	}), $[33] = t10, $[34] = t3, $[35] = t7, $[36] = t8, $[37] = t11) : t11 = $[37];
 	let t12;
-	$[39] === onRemove ? t12 = $[40] : (t12 = /* @__PURE__ */ jsx(TooltipButton, {
+	$[38] === onDone ? t12 = $[39] : (t12 = /* @__PURE__ */ jsx(Button, {
+		gap: 2,
+		icon: CheckmarkIcon,
+		onClick: onDone,
+		padding: 2,
+		text: "Done",
+		mode: "ghost"
+	}), $[38] = onDone, $[39] = t12);
+	let t13;
+	$[40] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(Button, {
+		"aria-label": "More actions",
+		icon: EllipsisHorizontalIcon,
+		mode: "bleed",
+		padding: 2
+	}), $[40] = t13) : t13 = $[40];
+	let t14;
+	$[41] === onRemove ? t14 = $[42] : (t14 = /* @__PURE__ */ jsx(Menu, { children: /* @__PURE__ */ jsx(MenuItem, {
 		icon: TrashIcon,
-		mode: "ghost",
 		onClick: onRemove,
 		text: "Remove",
-		tone: "critical",
-		tooltip: "Remove the theme — it can be restored until it is deleted"
-	}), $[39] = onRemove, $[40] = t12);
-	let t13;
-	$[41] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(Box, { flex: 1 }), $[41] = t13) : t13 = $[41];
-	let t14;
-	$[42] === onDone ? t14 = $[43] : (t14 = /* @__PURE__ */ jsx(Button, {
-		mode: "ghost",
-		onClick: onDone,
-		padding: 2,
-		text: "Done"
-	}), $[42] = onDone, $[43] = t14);
+		tone: "critical"
+	}) }), $[41] = onRemove, $[42] = t14);
 	let t15;
-	$[44] !== t12 || $[45] !== t14 ? (t15 = /* @__PURE__ */ jsx(Card, {
+	$[43] === Symbol.for("react.memo_cache_sentinel") ? (t15 = {
+		animate: !0,
+		placement: "top-end",
+		portal: !0
+	}, $[43] = t15) : t15 = $[43];
+	let t16;
+	$[44] !== actionsId || $[45] !== t14 ? (t16 = /* @__PURE__ */ jsx(MenuButton, {
+		button: t13,
+		id: actionsId,
+		menu: t14,
+		popover: t15
+	}), $[44] = actionsId, $[45] = t14, $[46] = t16) : t16 = $[46];
+	let t17;
+	$[47] !== t12 || $[48] !== t16 ? (t17 = /* @__PURE__ */ jsx(Card, {
 		borderTop: !0,
 		padding: 3,
 		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
 			gap: 2,
-			children: [
-				t12,
-				t13,
-				t14
-			]
+			justify: "flex-end",
+			children: [t12, t16]
 		})
-	}), $[44] = t12, $[45] = t14, $[46] = t15) : t15 = $[46];
-	let t16;
-	return $[47] !== t11 || $[48] !== t15 ? (t16 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t15] }), $[47] = t11, $[48] = t15, $[49] = t16) : t16 = $[49], t16;
+	}), $[47] = t12, $[48] = t16, $[49] = t17) : t17 = $[49];
+	let t18;
+	return $[50] !== t11 || $[51] !== t17 ? (t18 = /* @__PURE__ */ jsxs(Fragment, { children: [t11, t17] }), $[50] = t11, $[51] = t17, $[52] = t18) : t18 = $[52], t18;
 }
-function _temp$2(event_0) {
+function _temp2(event_0) {
 	return event_0.currentTarget.select();
 }
 /**
@@ -1196,9 +1544,9 @@ function fromBase64Url(code) {
 *
 * @internal
 */
-function useThemeCodes() {
-	let $ = c(11), { send } = useThemer(), toast = useToast(), t0;
-	$[0] === toast ? t0 = $[1] : (t0 = async (theme) => {
+function useThemeCodes(t0) {
+	let $ = c(11), { actorRef } = t0, toast = useToast(), t1;
+	$[0] === toast ? t1 = $[1] : (t1 = async (theme) => {
 		let title = displayTitle(theme.title);
 		try {
 			await navigator.clipboard.writeText(encodeTheme(theme)), toast.push({
@@ -1212,11 +1560,11 @@ function useThemeCodes() {
 				title: `Could not copy ${title}`
 			});
 		}
-	}, $[0] = toast, $[1] = t0);
-	let copyTheme = t0, t1;
-	$[2] !== send || $[3] !== toast ? (t1 = (text) => {
+	}, $[0] = toast, $[1] = t1);
+	let copyTheme = t1, t2;
+	$[2] !== actorRef || $[3] !== toast ? (t2 = (text) => {
 		let theme_0 = decodeTheme(text);
-		return theme_0 ? (send({
+		return theme_0 ? (actorRef.send({
 			type: "theme.import",
 			title: theme_0.title,
 			options: theme_0.options
@@ -1224,9 +1572,9 @@ function useThemeCodes() {
 			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 () => {
+	}, $[2] = actorRef, $[3] = toast, $[4] = t2) : t2 = $[4];
+	let addThemeFromText = t2, t3;
+	$[5] === addThemeFromText ? t3 = $[6] : (t3 = async () => {
 		let text_0;
 		try {
 			text_0 = await navigator.clipboard.readText();
@@ -1234,13 +1582,13 @@ function useThemeCodes() {
 			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 = {
+	}, $[5] = addThemeFromText, $[6] = t3);
+	let addThemeFromClipboard = t3, t4;
+	return $[7] !== addThemeFromClipboard || $[8] !== addThemeFromText || $[9] !== copyTheme ? (t4 = {
 		copyTheme,
 		addThemeFromText,
 		addThemeFromClipboard
-	}, $[7] = addThemeFromClipboard, $[8] = addThemeFromText, $[9] = copyTheme, $[10] = t3) : t3 = $[10], t3;
+	}, $[7] = addThemeFromClipboard, $[8] = addThemeFromText, $[9] = copyTheme, $[10] = t4) : t4 = $[10], t4;
 }
 /**
 * Adds a theme pasted anywhere in the Studio while the themer's list is
@@ -1248,14 +1596,13 @@ function useThemeCodes() {
 *
 * @internal
 */
-function usePasteThemeCodes() {
-	let $ = c(5), { open, send } = useThemer(), toast = useToast(), t0, t1;
-	$[0] !== open || $[1] !== send || $[2] !== toast ? (t0 = () => {
-		if (!open) return;
+function usePasteThemeCodes(t0) {
+	let $ = c(4), { actorRef } = t0, toast = useToast(), t1, t2;
+	$[0] !== actorRef || $[1] !== toast ? (t1 = () => {
 		let handlePaste = (event) => {
 			if (isEditable(event.target)) return;
 			let theme = decodeTheme(event.clipboardData?.getData("text/plain") ?? "");
-			theme && (event.preventDefault(), send({
+			theme && (event.preventDefault(), actorRef.send({
 				type: "theme.import",
 				title: theme.title,
 				options: theme.options
@@ -1265,11 +1612,7 @@ function usePasteThemeCodes() {
 			}));
 		};
 		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);
+	}, t2 = [actorRef, toast], $[0] = actorRef, $[1] = toast, $[2] = t1, $[3] = t2) : (t1 = $[2], t2 = $[3]), useEffect(t1, t2);
 }
 function isEditable(target) {
 	return target instanceof HTMLElement && (target.isContentEditable || target.matches("input, textarea, select"));
@@ -1281,63 +1624,65 @@ function isEditable(target) {
 * @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 = () => {
+	let $ = c(39), { actorRef, onClose } = props, t0;
+	$[0] === actorRef ? t0 = $[1] : (t0 = { actorRef }, $[0] = actorRef, $[1] = t0);
+	let { addThemeFromText } = useThemeCodes(t0), [text, setText] = useState(""), [invalid, setInvalid] = useState(!1), id = useId(), errorId = `${id}-error`, t1;
+	$[2] !== addThemeFromText || $[3] !== onClose || $[4] !== text ? (t1 = () => {
 		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, {
+	}, $[2] = addThemeFromText, $[3] = onClose, $[4] = text, $[5] = t1) : t1 = $[5];
+	let add = t1, t2;
+	$[6] === onClose ? t2 = $[7] : (t2 = /* @__PURE__ */ jsx(Button, {
 		mode: "ghost",
 		onClick: onClose,
 		padding: 2,
 		text: "Cancel"
-	}), $[4] = onClose, $[5] = t1);
-	let t2;
-	$[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,
+	}), $[6] = onClose, $[7] = t2);
+	let t3;
+	$[8] === text ? t3 = $[9] : (t3 = text.trim(), $[8] = text, $[9] = t3);
+	let t4 = t3 === "", t5;
+	$[10] !== add || $[11] !== t4 ? (t5 = /* @__PURE__ */ jsx(Button, {
+		disabled: t4,
 		onClick: add,
 		padding: 2,
 		text: "Add theme",
 		tone: "primary"
-	}), $[8] = add, $[9] = t3, $[10] = t4) : t4 = $[10];
-	let t5;
-	$[11] !== t1 || $[12] !== t4 ? (t5 = /* @__PURE__ */ jsxs(Flex, {
+	}), $[10] = add, $[11] = t4, $[12] = t5) : t5 = $[12];
+	let t6;
+	$[13] !== t2 || $[14] !== t5 ? (t6 = /* @__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);
+		children: [t2, t5]
+	}), $[13] = t2, $[14] = t5, $[15] = t6) : t6 = $[15];
 	let t7;
-	$[16] === Symbol.for("react.memo_cache_sentinel") ? (t7 = /* @__PURE__ */ jsx(Text, {
+	$[16] === add ? t7 = $[17] : (t7 = (event) => {
+		event.preventDefault(), add();
+	}, $[16] = add, $[17] = t7);
+	let t8;
+	$[18] === Symbol.for("react.memo_cache_sentinel") ? (t8 = /* @__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) => {
+	}), $[18] = t8) : t8 = $[18];
+	let t9 = invalid ? errorId : void 0, t10 = invalid ? "That is not a theme code" : void 0, t11;
+	$[19] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (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,
+	}, $[19] = t11) : t11 = $[19];
+	let t12;
+	$[20] !== invalid || $[21] !== t10 || $[22] !== t9 || $[23] !== text ? (t12 = /* @__PURE__ */ jsx(TextInput, {
+		"aria-describedby": t9,
 		"aria-invalid": invalid,
 		"aria-label": "Theme code",
 		autoFocus: !0,
-		customValidity: t9,
+		customValidity: t10,
 		fontSize: 1,
-		onChange: t10,
+		onChange: t11,
 		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",
+	}), $[20] = invalid, $[21] = t10, $[22] = t9, $[23] = text, $[24] = t12) : t12 = $[24];
+	let t13;
+	$[25] !== errorId || $[26] !== invalid ? (t13 = invalid && /* @__PURE__ */ jsx(Card, {
+		id: errorId,
 		padding: 3,
 		radius: 2,
 		role: "alert",
@@ -1346,33 +1691,33 @@ function PasteThemeDialog(props) {
 			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, {
+	}), $[25] = errorId, $[26] = invalid, $[27] = t13) : t13 = $[27];
+	let t14;
+	$[28] !== t12 || $[29] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Stack, {
 		gap: 3,
 		padding: 4,
 		children: [
-			t7,
-			t11,
-			t12
+			t8,
+			t12,
+			t13
 		]
-	}), $[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];
+	}), $[28] = t12, $[29] = t13, $[30] = t14) : t14 = $[30];
 	let t15;
-	return $[31] !== onClose || $[32] !== t14 || $[33] !== t5 ? (t15 = /* @__PURE__ */ jsx(Dialog, {
+	$[31] !== t14 || $[32] !== t7 ? (t15 = /* @__PURE__ */ jsx("form", {
+		onSubmit: t7,
+		children: t14
+	}), $[31] = t14, $[32] = t7, $[33] = t15) : t15 = $[33];
+	let t16;
+	return $[34] !== id || $[35] !== onClose || $[36] !== t15 || $[37] !== t6 ? (t16 = /* @__PURE__ */ jsx(Dialog, {
 		animate: !0,
-		footer: t5,
+		footer: t6,
 		header: "Add a shared theme",
-		id: "themer-paste",
+		id,
 		onClickOutside: onClose,
 		onClose,
 		width: 0,
-		children: t14
-	}), $[31] = onClose, $[32] = t14, $[33] = t5, $[34] = t15) : t15 = $[34], t15;
+		children: t15
+	}), $[34] = id, $[35] = onClose, $[36] = t15, $[37] = t6, $[38] = t16) : t16 = $[38], t16;
 }
 var frame$1 = "_1wsn7882", menuCard = "_1wsn7884", menuSlot = "_1wsn7883", pickButton = "_1wsn7881", root = "_1wsn7880";
 /**
@@ -1395,47 +1740,49 @@ function scrollRefIntoViewIfNeeded(node) {
 *
 * @internal
 */
-function ThemeCard(props) {
-	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$1);
-		order.splice(to, 0, ...order.splice(index, 1)), send({
+function ThemeCard(t0) {
+	let $ = c(79), { actorRef, active, theme, themes } = t0, t1;
+	$[0] === actorRef ? t1 = $[1] : (t1 = { actorRef }, $[0] = actorRef, $[1] = t1);
+	let { copyTheme } = useThemeCodes(t1), { scheme } = useRootTheme(), [menuOpen, setMenuOpen] = useState(!1), dragControls = useDragControls(), menuId = useId(), dragged = useRef(!1), t2;
+	$[2] === theme.title ? t2 = $[3] : (t2 = displayTitle(theme.title), $[2] = theme.title, $[3] = t2);
+	let title = t2, t3;
+	$[4] === theme.slug ? t3 = $[5] : (t3 = (candidate) => candidate.slug === theme.slug, $[4] = theme.slug, $[5] = t3);
+	let index = themes.findIndex(t3), listed = index !== -1, t4;
+	$[6] !== actorRef || $[7] !== index || $[8] !== themes ? (t4 = (to) => {
+		let order = themes.map(_temp$3);
+		order.splice(to, 0, ...order.splice(index, 1)), actorRef.send({
 			type: "theme.reorder",
 			order
 		});
-	}, $[4] = index, $[5] = send, $[6] = themes, $[7] = t2) : t2 = $[7];
-	let moveTo = t2, t3, t4;
-	$[8] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => {
+	}, $[6] = actorRef, $[7] = index, $[8] = themes, $[9] = t4) : t4 = $[9];
+	let moveTo = t4, t5, t6;
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = () => {
 		requestAnimationFrame(() => {
 			dragged.current = !1;
 		});
-	}, t4 = () => {
+	}, t6 = () => {
 		dragged.current = !0;
-	}, $[8] = t3, $[9] = t4) : (t3 = $[8], t4 = $[9]);
-	let t5 = active ? scrollRefIntoViewIfNeeded : void 0, t6;
-	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t6 = { scale: 1.04 }, $[10] = t6) : t6 = $[10];
-	let t7;
-	$[11] !== send || $[12] !== theme.slug ? (t7 = () => {
-		dragged.current || send({
+	}, $[10] = t5, $[11] = t6) : (t5 = $[10], t6 = $[11]);
+	let t7 = active ? scrollRefIntoViewIfNeeded : void 0, t8;
+	$[12] === Symbol.for("react.memo_cache_sentinel") ? (t8 = { scale: 1.04 }, $[12] = t8) : t8 = $[12];
+	let t9;
+	$[13] !== actorRef || $[14] !== theme.slug ? (t9 = () => {
+		dragged.current || actorRef.send({
 			type: "theme.pick",
 			slug: theme.slug
 		});
-	}, $[11] = send, $[12] = theme.slug, $[13] = t7) : t7 = $[13];
-	let t8;
-	$[14] === dragControls ? t8 = $[15] : (t8 = (event) => {
-		event.pointerType !== "touch" && dragControls.start(event);
-	}, $[14] = dragControls, $[15] = t8);
-	let t9;
-	$[16] === theme.options ? t9 = $[17] : (t9 = /* @__PURE__ */ jsx("span", {
+	}, $[13] = actorRef, $[14] = theme.slug, $[15] = t9) : t9 = $[15];
+	let t10;
+	$[16] !== dragControls || $[17] !== listed ? (t10 = (event) => {
+		listed && event.pointerType !== "touch" && dragControls.start(event);
+	}, $[16] = dragControls, $[17] = listed, $[18] = t10) : t10 = $[18];
+	let t11;
+	$[19] === theme.options ? t11 = $[20] : (t11 = /* @__PURE__ */ jsx("span", {
 		className: frame$1,
 		children: /* @__PURE__ */ jsx(ThemeThumbnail, { options: theme.options })
-	}), $[16] = theme.options, $[17] = t9);
-	let t10 = active ? "medium" : "regular", t11;
-	$[18] !== t10 || $[19] !== title ? (t11 = /* @__PURE__ */ jsx(Box, {
+	}), $[19] = theme.options, $[20] = t11);
+	let t12 = active ? "medium" : "regular", t13;
+	$[21] !== t12 || $[22] !== title ? (t13 = /* @__PURE__ */ jsx(Box, {
 		as: "span",
 		display: "block",
 		paddingTop: 2,
@@ -1445,112 +1792,106 @@ function ThemeCard(props) {
 			as: "span",
 			size: 1,
 			textOverflow: "ellipsis",
-			weight: t10,
+			weight: t12,
 			children: title
 		})
-	}), $[18] = t10, $[19] = title, $[20] = t11) : t11 = $[20];
-	let t12;
-	$[21] !== active || $[22] !== t11 || $[23] !== t7 || $[24] !== t8 || $[25] !== t9 ? (t12 = /* @__PURE__ */ jsxs("button", {
+	}), $[21] = t12, $[22] = title, $[23] = t13) : t13 = $[23];
+	let t14;
+	$[24] !== active || $[25] !== t10 || $[26] !== t11 || $[27] !== t13 || $[28] !== t9 ? (t14 = /* @__PURE__ */ jsxs("button", {
 		"aria-pressed": active,
 		className: pickButton,
-		onClick: t7,
-		onPointerDown: t8,
+		onClick: t9,
+		onPointerDown: t10,
 		type: "button",
-		children: [t9, t11]
-	}), $[21] = active, $[22] = t11, $[23] = t7, $[24] = t8, $[25] = t9, $[26] = t12) : t12 = $[26];
-	let t13;
-	$[27] === Symbol.for("react.memo_cache_sentinel") ? (t13 = /* @__PURE__ */ jsx(Text, {
+		children: [t11, t13]
+	}), $[24] = active, $[25] = t10, $[26] = t11, $[27] = t13, $[28] = t9, $[29] = t14) : t14 = $[29];
+	let t15;
+	$[30] === Symbol.for("react.memo_cache_sentinel") ? (t15 = /* @__PURE__ */ jsx(Text, {
 		size: 1,
 		children: "Show more"
-	}), $[27] = t13) : t13 = $[27];
-	let t14 = `Show more for ${title}`, t15;
-	$[28] === t14 ? t15 = $[29] : (t15 = /* @__PURE__ */ jsx(Button, {
-		"aria-label": t14,
+	}), $[30] = t15) : t15 = $[30];
+	let t16 = `Show more for ${title}`, t17;
+	$[31] === t16 ? t17 = $[32] : (t17 = /* @__PURE__ */ jsx(Button, {
+		"aria-label": t16,
 		fontSize: 1,
 		icon: EllipsisHorizontalIcon,
 		mode: "ghost",
 		padding: 1,
 		radius: 2
-	}), $[28] = t14, $[29] = t15);
-	let t16 = `themer-theme-${theme.slug}`, t17 = index <= 0, t18;
-	$[30] !== index || $[31] !== moveTo ? (t18 = () => moveTo(index - 1), $[30] = index, $[31] = moveTo, $[32] = t18) : t18 = $[32];
+	}), $[31] = t16, $[32] = t17);
+	let t18;
+	$[33] !== index || $[34] !== listed || $[35] !== moveTo || $[36] !== themes.length ? (t18 = listed && /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx(MenuItem, {
+			disabled: index <= 0,
+			icon: ArrowUpIcon,
+			onClick: () => moveTo(index - 1),
+			text: "Move up"
+		}),
+		/* @__PURE__ */ jsx(MenuItem, {
+			disabled: index >= themes.length - 1,
+			icon: ArrowDownIcon,
+			onClick: () => moveTo(index + 1),
+			text: "Move down"
+		}),
+		/* @__PURE__ */ jsx(MenuDivider, {})
+	] }), $[33] = index, $[34] = listed, $[35] = moveTo, $[36] = themes.length, $[37] = t18) : t18 = $[37];
 	let t19;
-	$[33] !== t17 || $[34] !== t18 ? (t19 = /* @__PURE__ */ jsx(MenuItem, {
-		disabled: t17,
-		icon: ArrowUpIcon,
-		onClick: t18,
-		text: "Move up"
-	}), $[33] = t17, $[34] = t18, $[35] = t19) : t19 = $[35];
-	let t20 = index >= themes.length - 1, t21;
-	$[36] !== index || $[37] !== moveTo ? (t21 = () => moveTo(index + 1), $[36] = index, $[37] = moveTo, $[38] = t21) : t21 = $[38];
-	let t22;
-	$[39] !== t20 || $[40] !== t21 ? (t22 = /* @__PURE__ */ jsx(MenuItem, {
-		disabled: t20,
-		icon: ArrowDownIcon,
-		onClick: t21,
-		text: "Move down"
-	}), $[39] = t20, $[40] = t21, $[41] = t22) : t22 = $[41];
-	let t23;
-	$[42] === Symbol.for("react.memo_cache_sentinel") ? (t23 = /* @__PURE__ */ jsx(MenuDivider, {}), $[42] = t23) : t23 = $[42];
-	let t24;
-	$[43] !== send || $[44] !== theme.slug || $[45] !== theme.source ? (t24 = theme.source === "custom" && /* @__PURE__ */ jsx(MenuItem, {
+	$[38] !== actorRef || $[39] !== theme.slug || $[40] !== theme.source ? (t19 = theme.source === "custom" && /* @__PURE__ */ jsx(MenuItem, {
 		icon: EditIcon,
-		onClick: () => send({
+		onClick: () => actorRef.send({
 			type: "theme.edit",
 			slug: theme.slug
 		}),
 		text: "Edit"
-	}), $[43] = send, $[44] = theme.slug, $[45] = theme.source, $[46] = t24) : t24 = $[46];
-	let t25;
-	$[47] !== send || $[48] !== theme.slug ? (t25 = () => send({
+	}), $[38] = actorRef, $[39] = theme.slug, $[40] = theme.source, $[41] = t19) : t19 = $[41];
+	let t20;
+	$[42] !== actorRef || $[43] !== theme.slug ? (t20 = () => actorRef.send({
 		type: "theme.duplicate",
 		slug: theme.slug
-	}), $[47] = send, $[48] = theme.slug, $[49] = t25) : t25 = $[49];
-	let t26 = theme.source === "custom" ? "Duplicate" : "Duplicate to edit", t27;
-	$[50] !== t25 || $[51] !== t26 ? (t27 = /* @__PURE__ */ jsx(MenuItem, {
+	}), $[42] = actorRef, $[43] = theme.slug, $[44] = t20) : t20 = $[44];
+	let t21 = theme.source === "custom" ? "Duplicate" : "Duplicate to edit", t22;
+	$[45] !== t20 || $[46] !== t21 ? (t22 = /* @__PURE__ */ jsx(MenuItem, {
 		icon: CopyIcon,
-		onClick: t25,
-		text: t26
-	}), $[50] = t25, $[51] = t26, $[52] = t27) : t27 = $[52];
-	let t28;
-	$[53] !== copyTheme || $[54] !== theme ? (t28 = /* @__PURE__ */ jsx(MenuItem, {
+		onClick: t20,
+		text: t21
+	}), $[45] = t20, $[46] = t21, $[47] = t22) : t22 = $[47];
+	let t23;
+	$[48] !== copyTheme || $[49] !== theme ? (t23 = /* @__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, {
+	}), $[48] = copyTheme, $[49] = theme, $[50] = t23) : t23 = $[50];
+	let t24;
+	$[51] !== actorRef || $[52] !== theme.slug || $[53] !== theme.source ? (t24 = theme.source !== "config" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuDivider, {}), /* @__PURE__ */ jsx(MenuItem, {
 		icon: TrashIcon,
-		onClick: () => send({
+		onClick: () => actorRef.send({
 			type: "theme.remove",
 			slug: theme.slug
 		}),
 		text: "Remove",
 		tone: "critical"
-	})] }), $[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: [
+	})] }), $[51] = actorRef, $[52] = theme.slug, $[53] = theme.source, $[54] = t24) : t24 = $[54];
+	let t25;
+	$[55] !== t18 || $[56] !== t19 || $[57] !== t22 || $[58] !== t23 || $[59] !== t24 ? (t25 = /* @__PURE__ */ jsxs(Menu, { children: [
+		t18,
 		t19,
 		t22,
 		t23,
-		t24,
-		t27,
-		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 = {
+		t24
+	] }), $[55] = t18, $[56] = t19, $[57] = t22, $[58] = t23, $[59] = t24, $[60] = t25) : t25 = $[60];
+	let t26, t27;
+	$[61] === Symbol.for("react.memo_cache_sentinel") ? (t26 = () => setMenuOpen(!1), t27 = () => setMenuOpen(!0), $[61] = t26, $[62] = t27) : (t26 = $[61], t27 = $[62]);
+	let t28;
+	$[63] === scheme ? t28 = $[64] : (t28 = {
 		animate: !0,
 		placement: "bottom-end",
 		portal: !0,
 		scheme
-	}, $[69] = scheme, $[70] = t33);
-	let t34;
-	$[71] !== t15 || $[72] !== t16 || $[73] !== t30 || $[74] !== t33 ? (t34 = /* @__PURE__ */ jsx(Tooltip, {
+	}, $[63] = scheme, $[64] = t28);
+	let t29;
+	$[65] !== menuId || $[66] !== t17 || $[67] !== t25 || $[68] !== t28 ? (t29 = /* @__PURE__ */ jsx(Tooltip, {
 		animate: !0,
-		content: t13,
+		content: t15,
 		placement: "bottom",
 		portal: !0,
 		children: /* @__PURE__ */ jsx(Card, {
@@ -1558,158 +1899,55 @@ function ThemeCard(props) {
 			radius: 2,
 			scheme: "dark",
 			children: /* @__PURE__ */ jsx(MenuButton, {
-				button: t15,
-				id: t16,
-				menu: t30,
-				onClose: t31,
-				onOpen: t32,
-				popover: t33
+				button: t17,
+				id: menuId,
+				menu: t25,
+				onClose: t26,
+				onOpen: t27,
+				popover: t28
 			})
 		})
-	}), $[71] = t15, $[72] = t16, $[73] = t30, $[74] = t33, $[75] = t34) : t34 = $[75];
-	let t35;
-	$[76] !== menuOpen || $[77] !== t34 ? (t35 = /* @__PURE__ */ jsx("div", {
+	}), $[65] = menuId, $[66] = t17, $[67] = t25, $[68] = t28, $[69] = t29) : t29 = $[69];
+	let t30;
+	$[70] !== menuOpen || $[71] !== t29 ? (t30 = /* @__PURE__ */ jsx("div", {
 		className: menuSlot,
 		"data-visible": menuOpen,
-		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, {
+		children: t29
+	}), $[70] = menuOpen, $[71] = t29, $[72] = t30) : t30 = $[72];
+	let t31;
+	return $[73] !== dragControls || $[74] !== t14 || $[75] !== t30 || $[76] !== t7 || $[77] !== theme.slug ? (t31 = /* @__PURE__ */ jsxs(Reorder.Item, {
 		as: "div",
 		className: root,
 		dragControls,
 		dragListener: !1,
-		onDragEnd: t3,
-		onDragStart: t4,
-		ref: t5,
+		onDragEnd: t5,
+		onDragStart: t6,
+		ref: t7,
 		value: theme.slug,
-		whileDrag: t6,
-		children: [t12, t35]
-	}), $[79] = dragControls, $[80] = t12, $[81] = t35, $[82] = t5, $[83] = theme.slug, $[84] = t36) : t36 = $[84], t36;
+		whileDrag: t8,
+		children: [t14, t30]
+	}), $[73] = dragControls, $[74] = t14, $[75] = t30, $[76] = t7, $[77] = theme.slug, $[78] = t31) : t31 = $[78], t31;
 }
-function _temp$1(candidate_0) {
+function _temp$3(candidate_0) {
 	return candidate_0.slug;
 }
-var cardGrid = "twjqgh0";
-/**
-* One column at the sidebar's default width; wider sidebars — and the
-* overlay on small screens — fit more cards per row
-*/
 /**
-* 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. A theme
-* code someone shared pastes right into the list, or through the paste button.
+* 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 ThemeList() {
-	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),
-		options: optionsFromImagePalette(palette),
-		palette,
-		imageUrl: URL.createObjectURL(file)
-	}), $[0] = send, $[1] = t0);
-	let { busy, pickImage } = useImagePalette(t0), t1;
-	$[2] === send ? t1 = $[3] : (t1 = (order) => send({
-		type: "theme.reorder",
-		order
-	}), $[2] = send, $[3] = t1);
-	let t2;
-	$[4] === themes ? t2 = $[5] : (t2 = themes.map(_temp), $[4] = themes, $[5] = t2);
-	let t3;
-	if ($[6] !== active || $[7] !== themes) {
-		let t4;
-		$[9] === active ? t4 = $[10] : (t4 = (theme_0) => /* @__PURE__ */ jsx(ThemeCard, {
-			active: theme_0.slug === active.slug,
-			theme: theme_0
-		}, theme_0.slug), $[9] = active, $[10] = t4), t3 = themes.map(t4), $[6] = active, $[7] = themes, $[8] = t3;
-	} else t3 = $[8];
-	let t4;
-	$[11] !== t1 || $[12] !== t2 || $[13] !== t3 ? (t4 = /* @__PURE__ */ jsx(MotionConfig, {
-		reducedMotion: "user",
-		children: /* @__PURE__ */ jsx(Reorder.Group, {
-			as: "div",
-			className: cardGrid,
-			onReorder: t1,
-			values: t2,
-			children: t3
-		})
-	}), $[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];
-	let t6;
-	$[18] !== t4 || $[19] !== t5 ? (t6 = /* @__PURE__ */ jsx(ScrollArea, {
-		padding: 3,
-		children: /* @__PURE__ */ jsxs(Stack, {
-			gap: 4,
-			children: [t4, t5]
-		})
-	}), $[18] = t4, $[19] = t5, $[20] = t6) : t6 = $[20];
-	let t7;
-	$[21] === send ? t7 = $[22] : (t7 = /* @__PURE__ */ jsx(Box, {
-		flex: 1,
-		children: /* @__PURE__ */ jsx(TooltipButton, {
-			icon: AddIcon,
-			mode: "ghost",
-			onClick: () => send({ type: "theme.add" }),
-			text: "Add theme",
-			tooltip: "Add a theme based on the applied one",
-			width: "fill"
-		})
-	}), $[21] = send, $[22] = t7);
-	let t8;
-	$[23] !== busy || $[24] !== pickImage ? (t8 = /* @__PURE__ */ jsx(ImageFileButton, {
-		loading: busy,
-		mode: "ghost",
-		onFile: pickImage,
-		tooltip: "Add a theme from the colors of an image"
-	}), $[23] = busy, $[24] = pickImage, $[25] = t8) : t8 = $[25];
-	let t9;
-	$[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,
-				t9
-			]
-		})
-	}), $[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(theme) {
-	return theme.slug;
+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 Object.keys(minimized).length === 0 ? null : minimized;
 }
 /**
 * Serializes theme options into the `buildTheme` call to paste into
@@ -1746,7 +1984,7 @@ registerLanguage(typescript);
 * @internal
 */
 function ThemeSnippetDialog(props) {
-	let $ = c(23), { onClose, theme } = props, toast = useToast(), t0;
+	let $ = c(24), { onClose, theme } = props, toast = useToast(), id = useId(), t0;
 	$[0] === theme.options ? t0 = $[1] : (t0 = createThemeSnippet(theme.options), $[0] = theme.options, $[1] = t0);
 	let snippet = t0, t1;
 	$[2] !== snippet || $[3] !== toast ? (t1 = async () => {
@@ -1823,16 +2061,219 @@ function ThemeSnippetDialog(props) {
 		})
 	}), $[16] = t7, $[17] = t8, $[18] = t9) : t9 = $[18];
 	let t10;
-	return $[19] !== onClose || $[20] !== t2 || $[21] !== t9 ? (t10 = /* @__PURE__ */ jsx(Dialog, {
+	return $[19] !== id || $[20] !== onClose || $[21] !== t2 || $[22] !== t9 ? (t10 = /* @__PURE__ */ jsx(Dialog, {
 		animate: !0,
 		footer: t2,
 		header: "Add to your config",
-		id: "themer-snippet",
+		id,
 		onClickOutside: onClose,
 		onClose,
 		width: 1,
 		children: t9
-	}), $[19] = onClose, $[20] = t2, $[21] = t9, $[22] = t10) : t10 = $[22], t10;
+	}), $[19] = id, $[20] = onClose, $[21] = t2, $[22] = t9, $[23] = t10) : t10 = $[23], t10;
+}
+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 point to the restore flow below. The footer takes the
+* applied theme on to the editor — a copy of it, for a preset or the
+* configured theme — and keeps the ways to add a theme and the applied
+* theme's code behind its menu. A theme code someone shared pastes right into
+* the list too.
+*
+* @internal
+*/
+function ThemeList(t0) {
+	let $ = c(71), { actorRef, themes, removed, active } = t0, t1;
+	$[0] === actorRef ? t1 = $[1] : (t1 = { actorRef }, $[0] = actorRef, $[1] = t1);
+	let { addThemeFromClipboard } = useThemeCodes(t1), dialog = useSelector(actorRef, selectDialog), imageInputRef = useRef(null), actionsId = useId(), t2;
+	$[2] === actorRef ? t2 = $[3] : (t2 = { actorRef }, $[2] = actorRef, $[3] = t2), usePasteThemeCodes(t2);
+	let t3;
+	$[4] === actorRef ? t3 = $[5] : (t3 = (palette, file) => actorRef.send({
+		type: "theme.add",
+		title: titleFromFileName(file.name),
+		options: optionsFromImagePalette(palette),
+		palette,
+		imageUrl: URL.createObjectURL(file)
+	}), $[4] = actorRef, $[5] = t3);
+	let { busy, pickImage } = useImagePalette(t3), t4;
+	$[6] === actorRef ? t4 = $[7] : (t4 = (order) => actorRef.send({
+		type: "theme.reorder",
+		order
+	}), $[6] = actorRef, $[7] = t4);
+	let t5;
+	$[8] === themes ? t5 = $[9] : (t5 = themes.map(_temp$2), $[8] = themes, $[9] = t5);
+	let t6 = !active, t7;
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t7 = {
+		slug: CONFIG_SLUG,
+		title: CONFIG_TITLE,
+		options: {},
+		source: "config"
+	}, $[10] = t7) : t7 = $[10];
+	let t8;
+	$[11] !== actorRef || $[12] !== t6 || $[13] !== themes ? (t8 = /* @__PURE__ */ jsx(ThemeCard, {
+		actorRef,
+		active: t6,
+		theme: t7,
+		themes
+	}), $[11] = actorRef, $[12] = t6, $[13] = themes, $[14] = t8) : t8 = $[14];
+	let t9;
+	$[15] !== active?.slug || $[16] !== actorRef || $[17] !== themes ? (t9 = themes.map((theme_0) => /* @__PURE__ */ jsx(ThemeCard, {
+		actorRef,
+		active: theme_0.slug === active?.slug,
+		theme: theme_0,
+		themes
+	}, theme_0.slug)), $[15] = active?.slug, $[16] = actorRef, $[17] = themes, $[18] = t9) : t9 = $[18];
+	let t10;
+	$[19] !== t4 || $[20] !== t5 || $[21] !== t8 || $[22] !== t9 ? (t10 = /* @__PURE__ */ jsx(MotionConfig, {
+		reducedMotion: "user",
+		children: /* @__PURE__ */ jsxs(Reorder.Group, {
+			as: "div",
+			className: cardGrid,
+			onReorder: t4,
+			values: t5,
+			children: [t8, t9]
+		})
+	}), $[19] = t4, $[20] = t5, $[21] = t8, $[22] = t9, $[23] = t10) : t10 = $[23];
+	let t11;
+	$[24] !== actorRef || $[25] !== removed.length ? (t11 = removed.length > 0 && /* @__PURE__ */ jsx(Button, {
+		gap: 2,
+		icon: RestoreIcon,
+		mode: "bleed",
+		onClick: () => actorRef.send({ type: "flow.removed" }),
+		padding: 2,
+		text: `Show removed (${removed.length})`,
+		width: "fill"
+	}), $[24] = actorRef, $[25] = removed.length, $[26] = t11) : t11 = $[26];
+	let t12;
+	$[27] !== t10 || $[28] !== t11 ? (t12 = /* @__PURE__ */ jsx(ScrollArea, {
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Stack, {
+			gap: 4,
+			children: [t10, t11]
+		})
+	}), $[27] = t10, $[28] = t11, $[29] = t12) : t12 = $[29];
+	let t13;
+	$[30] !== active || $[31] !== actorRef ? (t13 = active?.source === "custom" ? /* @__PURE__ */ jsx(Button, {
+		gap: 2,
+		icon: EditIcon,
+		onClick: () => actorRef.send({
+			type: "theme.edit",
+			slug: active.slug
+		}),
+		padding: 2,
+		text: "Edit",
+		mode: "ghost"
+	}) : /* @__PURE__ */ jsx(Button, {
+		gap: 2,
+		icon: CopyIcon,
+		onClick: () => actorRef.send({
+			type: "theme.duplicate",
+			slug: active?.slug ?? "config"
+		}),
+		padding: 2,
+		text: "Duplicate & Edit",
+		mode: "ghost"
+	}), $[30] = active, $[31] = actorRef, $[32] = t13) : t13 = $[32];
+	let t14;
+	$[33] === busy ? t14 = $[34] : (t14 = /* @__PURE__ */ jsx(Button, {
+		"aria-label": "More actions",
+		icon: EllipsisHorizontalIcon,
+		loading: busy,
+		mode: "bleed",
+		padding: 2
+	}), $[33] = busy, $[34] = t14);
+	let t15;
+	$[35] === actorRef ? t15 = $[36] : (t15 = /* @__PURE__ */ jsx(MenuItem, {
+		icon: AddIcon,
+		onClick: () => actorRef.send({ type: "theme.add" }),
+		text: "Add theme"
+	}), $[35] = actorRef, $[36] = t15);
+	let t16;
+	$[37] === Symbol.for("react.memo_cache_sentinel") ? (t16 = /* @__PURE__ */ jsx(MenuItem, {
+		icon: ImageIcon,
+		onClick: () => imageInputRef.current?.click(),
+		text: "Add from image"
+	}), $[37] = t16) : t16 = $[37];
+	let t17;
+	$[38] !== actorRef || $[39] !== addThemeFromClipboard ? (t17 = /* @__PURE__ */ jsx(MenuItem, {
+		icon: ClipboardIcon,
+		onClick: async () => {
+			await addThemeFromClipboard() !== "added" && actorRef.send({ type: "dialog.paste" });
+		},
+		text: "Add from code"
+	}), $[38] = actorRef, $[39] = addThemeFromClipboard, $[40] = t17) : t17 = $[40];
+	let t18;
+	$[41] !== active || $[42] !== actorRef ? (t18 = active && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MenuDivider, {}), /* @__PURE__ */ jsx(MenuItem, {
+		icon: CodeBlockIcon,
+		onClick: () => actorRef.send({ type: "dialog.snippet" }),
+		text: "Show theme code"
+	})] }), $[41] = active, $[42] = actorRef, $[43] = t18) : t18 = $[43];
+	let t19;
+	$[44] !== t15 || $[45] !== t17 || $[46] !== t18 ? (t19 = /* @__PURE__ */ jsxs(Menu, { children: [
+		t15,
+		t16,
+		t17,
+		t18
+	] }), $[44] = t15, $[45] = t17, $[46] = t18, $[47] = t19) : t19 = $[47];
+	let t20;
+	$[48] === Symbol.for("react.memo_cache_sentinel") ? (t20 = {
+		animate: !0,
+		placement: "top-end",
+		portal: !0
+	}, $[48] = t20) : t20 = $[48];
+	let t21;
+	$[49] !== actionsId || $[50] !== t14 || $[51] !== t19 ? (t21 = /* @__PURE__ */ jsx(MenuButton, {
+		button: t14,
+		id: actionsId,
+		menu: t19,
+		popover: t20
+	}), $[49] = actionsId, $[50] = t14, $[51] = t19, $[52] = t21) : t21 = $[52];
+	let t22;
+	$[53] !== t13 || $[54] !== t21 ? (t22 = /* @__PURE__ */ jsx(Card, {
+		borderTop: !0,
+		padding: 3,
+		children: /* @__PURE__ */ jsxs(Flex, {
+			align: "center",
+			gap: 2,
+			justify: "flex-end",
+			children: [t13, t21]
+		})
+	}), $[53] = t13, $[54] = t21, $[55] = t22) : t22 = $[55];
+	let t23;
+	$[56] === pickImage ? t23 = $[57] : (t23 = /* @__PURE__ */ jsx(ImageFileInput, {
+		onFile: pickImage,
+		ref: imageInputRef
+	}), $[56] = pickImage, $[57] = t23);
+	let t24;
+	$[58] !== actorRef || $[59] !== dialog ? (t24 = dialog === "paste" && /* @__PURE__ */ jsx(PasteThemeDialog, {
+		actorRef,
+		onClose: () => actorRef.send({ type: "dialog.close" })
+	}), $[58] = actorRef, $[59] = dialog, $[60] = t24) : t24 = $[60];
+	let t25;
+	$[61] !== active || $[62] !== actorRef || $[63] !== dialog ? (t25 = dialog === "snippet" && active && /* @__PURE__ */ jsx(ThemeSnippetDialog, {
+		onClose: () => actorRef.send({ type: "dialog.close" }),
+		theme: active
+	}), $[61] = active, $[62] = actorRef, $[63] = dialog, $[64] = t25) : t25 = $[64];
+	let t26;
+	return $[65] !== t12 || $[66] !== t22 || $[67] !== t23 || $[68] !== t24 || $[69] !== t25 ? (t26 = /* @__PURE__ */ jsxs(Fragment, { children: [
+		t12,
+		t22,
+		t23,
+		t24,
+		t25
+	] }), $[65] = t12, $[66] = t22, $[67] = t23, $[68] = t24, $[69] = t25, $[70] = t26) : t26 = $[70], t26;
+}
+function _temp$2(theme) {
+	return theme.slug;
+}
+/** The dialog the list has open, if any — a state of the machine's list flow */
+function selectDialog(snapshot) {
+	return snapshot.matches({ flow: { list: "pasting" } }) ? "paste" : snapshot.matches({ flow: { list: "snippet" } }) ? "snippet" : null;
+}
+function useIsTooSmallForSplitScreen() {
+	return useMediaIndex() <= 3;
 }
 var title = "c2pqej0";
 const VIEW_TITLES = {
@@ -1841,26 +2282,20 @@ const VIEW_TITLES = {
 	removed: "Removed themes"
 };
 /**
-* The themer sidebar: a header that navigates between the flows and toggles
-* the split preview, the flow itself — picking a theme, editing one, or
-* restoring removed ones — and the dialog with the `buildTheme` snippet of
-* the applied theme.
+* The themer sidebar: a header with the flow's title, the split preview
+* toggle and the close button, and the flow itself — picking a theme, editing
+* one, or restoring removed ones. Each flow ends in a footer like the
+* Studio's document footer: one primary action, with the rest of its actions
+* behind a menu button, and the way back to the list where the flow is not
+* the list.
 *
 * @internal
 */
-function ThemerSidebar() {
-	let $ = c(42), { active, split, view, navbarHeight, send } = useThemer(), [snippetOpen, setSnippetOpen] = useState(!1), inList = view.name === "list", t0;
-	$[0] === navbarHeight ? t0 = $[1] : (t0 = navbarHeight === null ? void 0 : { height: navbarHeight }, $[0] = navbarHeight, $[1] = t0);
-	let t1;
-	$[2] !== inList || $[3] !== send ? (t1 = !inList && /* @__PURE__ */ jsx(TooltipButton, {
-		icon: ArrowLeftIcon,
-		mode: "bleed",
-		onClick: () => send({ type: "flow.list" }),
-		padding: 2,
-		tooltip: "Back to the themes"
-	}), $[2] = inList, $[3] = send, $[4] = t1) : t1 = $[4];
+function ThemerSidebar(t0) {
+	let $ = c(46), { actorRef, dispatch, navbarHeight, split } = t0, view = useSelector(actorRef, selectView, sameView), isTooSmallForSplitScreen = useIsTooSmallForSplitScreen(), { themes, removed, active } = useSelector(actorRef, _temp$1, dequal), t1;
+	$[0] === navbarHeight ? t1 = $[1] : (t1 = navbarHeight === null ? void 0 : { height: navbarHeight }, $[0] = navbarHeight, $[1] = t1);
 	let t2 = VIEW_TITLES[view.name], t3;
-	$[5] === t2 ? t3 = $[6] : (t3 = /* @__PURE__ */ jsx(Box, {
+	$[2] === t2 ? t3 = $[3] : (t3 = /* @__PURE__ */ jsx(Box, {
 		className: title,
 		flex: 1,
 		children: /* @__PURE__ */ jsx(Text, {
@@ -1869,84 +2304,110 @@ function ThemerSidebar() {
 			weight: "semibold",
 			children: t2
 		})
-	}), $[5] = t2, $[6] = t3);
+	}), $[2] = t2, $[3] = t3);
 	let t4;
-	$[7] !== send || $[8] !== split || $[9] !== view.name ? (t4 = view.name !== "removed" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TooltipButton, {
+	$[4] !== dispatch || $[5] !== isTooSmallForSplitScreen || $[6] !== split ? (t4 = !isTooSmallForSplitScreen && /* @__PURE__ */ jsx(TooltipButton, {
 		"aria-pressed": split,
 		icon: SplitVerticalIcon,
 		mode: "bleed",
-		onClick: () => send({ type: "preview.toggle" }),
+		onClick: () => startTransition(() => {
+			let type = split ? "split-screen:close" : "split-screen:open";
+			addThemerTransitionType(type), dispatch({ type });
+		}),
+		onMouseEnter: () => startTransition(() => {
+			dispatch({ type: "split-screen:prerender" });
+		}),
 		padding: 2,
 		selected: split,
 		tooltip: "Show light and dark side by side"
-	}), /* @__PURE__ */ jsx(TooltipButton, {
-		icon: CodeBlockIcon,
-		mode: "bleed",
-		onClick: () => setSnippetOpen(!0),
-		padding: 2,
-		tooltip: "Show the code for the applied theme"
-	})] }), $[7] = send, $[8] = split, $[9] = view.name, $[10] = t4) : t4 = $[10];
+	}), $[4] = dispatch, $[5] = isTooSmallForSplitScreen, $[6] = split, $[7] = t4) : t4 = $[7];
 	let t5;
-	$[11] === send ? t5 = $[12] : (t5 = /* @__PURE__ */ jsx(TooltipButton, {
+	$[8] !== dispatch || $[9] !== split ? (t5 = /* @__PURE__ */ jsx(TooltipButton, {
 		icon: CloseIcon,
 		mode: "bleed",
-		onClick: () => send({ type: "sidebar.close" }),
+		onClick: () => startTransition(() => {
+			split && addThemerTransitionType("split-screen:close"), addThemerTransitionType("close"), dispatch({ type: "close" });
+		}),
 		padding: 2,
 		tooltip: "Close themer"
-	}), $[11] = send, $[12] = t5);
+	}), $[8] = dispatch, $[9] = split, $[10] = t5) : t5 = $[10];
 	let t6;
-	$[13] !== t4 || $[14] !== t5 ? (t6 = /* @__PURE__ */ jsxs(Flex, { children: [t4, t5] }), $[13] = t4, $[14] = t5, $[15] = t6) : t6 = $[15];
+	$[11] !== t4 || $[12] !== t5 ? (t6 = /* @__PURE__ */ jsxs(Flex, { children: [t4, t5] }), $[11] = t4, $[12] = t5, $[13] = t6) : t6 = $[13];
 	let t7;
-	$[16] !== t1 || $[17] !== t3 || $[18] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Flex, {
+	$[14] !== t3 || $[15] !== t6 ? (t7 = /* @__PURE__ */ jsxs(Flex, {
 		align: "center",
 		gap: 1,
 		height: "fill",
-		children: [
-			t1,
-			t3,
-			t6
-		]
-	}), $[16] = t1, $[17] = t3, $[18] = t6, $[19] = t7) : t7 = $[19];
+		children: [t3, t6]
+	}), $[14] = t3, $[15] = t6, $[16] = t7) : t7 = $[16];
 	let t8;
-	$[20] !== t0 || $[21] !== t7 ? (t8 = /* @__PURE__ */ jsx(Card, {
+	$[17] !== t1 || $[18] !== t7 ? (t8 = /* @__PURE__ */ jsx(Card, {
 		borderBottom: !0,
 		padding: 3,
 		sizing: "border",
-		style: t0,
+		style: t1,
 		children: t7
-	}), $[20] = t0, $[21] = t7, $[22] = t8) : t8 = $[22];
-	let t9;
-	$[23] === view.name ? t9 = $[24] : (t9 = view.name === "list" && /* @__PURE__ */ jsx(ThemeList, {}), $[23] = view.name, $[24] = t9);
-	let t10;
-	$[25] !== view.focusTitle || $[26] !== view.name || $[27] !== view.slug ? (t10 = view.name === "edit" && /* @__PURE__ */ jsx(ThemeEditor, {
-		focusTitle: view.focusTitle,
-		slug: view.slug
-	}), $[25] = view.focusTitle, $[26] = view.name, $[27] = view.slug, $[28] = t10) : t10 = $[28];
+	}), $[17] = t1, $[18] = t7, $[19] = t8) : t8 = $[19];
+	let t9 = view.name === "list" ? "visible" : "hidden", t10;
+	$[20] !== active || $[21] !== actorRef || $[22] !== removed || $[23] !== themes ? (t10 = /* @__PURE__ */ jsx(ThemeList, {
+		actorRef,
+		active,
+		removed,
+		themes
+	}), $[20] = active, $[21] = actorRef, $[22] = removed, $[23] = themes, $[24] = t10) : t10 = $[24];
 	let t11;
-	$[29] === view.name ? t11 = $[30] : (t11 = view.name === "removed" && /* @__PURE__ */ jsx(RemovedThemes, {}), $[29] = view.name, $[30] = t11);
+	$[25] !== t10 || $[26] !== t9 ? (t11 = /* @__PURE__ */ jsx(Activity, {
+		mode: t9,
+		children: t10
+	}, "list"), $[25] = t10, $[26] = t9, $[27] = t11) : t11 = $[27];
 	let t12;
-	$[31] !== t10 || $[32] !== t11 || $[33] !== t8 || $[34] !== t9 ? (t12 = /* @__PURE__ */ jsxs(Flex, {
-		direction: "column",
-		height: "fill",
-		children: [
-			t8,
-			t9,
-			t10,
-			t11
-		]
-	}), $[31] = t10, $[32] = t11, $[33] = t8, $[34] = t9, $[35] = t12) : t12 = $[35];
-	let t13;
-	$[36] !== active || $[37] !== snippetOpen ? (t13 = snippetOpen && /* @__PURE__ */ jsx(ThemeSnippetDialog, {
-		onClose: () => setSnippetOpen(!1),
-		theme: active
-	}), $[36] = active, $[37] = snippetOpen, $[38] = t13) : t13 = $[38];
-	let t14;
-	return $[39] !== t12 || $[40] !== t13 ? (t14 = /* @__PURE__ */ jsxs(Card, {
+	$[28] !== actorRef || $[29] !== split || $[30] !== themes || $[31] !== view.focusTitle || $[32] !== view.name || $[33] !== view.slug ? (t12 = view.name === "edit" && /* @__PURE__ */ jsx(ThemeEditor, {
+		actorRef,
+		focusTitle: view.focusTitle,
+		slug: view.slug,
+		split,
+		themes
+	}), $[28] = actorRef, $[29] = split, $[30] = themes, $[31] = view.focusTitle, $[32] = view.name, $[33] = view.slug, $[34] = t12) : t12 = $[34];
+	let t13 = view.name === "removed" ? "visible" : "hidden", t14;
+	$[35] !== actorRef || $[36] !== removed ? (t14 = /* @__PURE__ */ jsx(RemovedThemes, {
+		actorRef,
+		removed
+	}), $[35] = actorRef, $[36] = removed, $[37] = t14) : t14 = $[37];
+	let t15;
+	$[38] !== t13 || $[39] !== t14 ? (t15 = /* @__PURE__ */ jsx(Activity, {
+		mode: t13,
+		children: t14
+	}, "removed"), $[38] = t13, $[39] = t14, $[40] = t15) : t15 = $[40];
+	let t16;
+	return $[41] !== t11 || $[42] !== t12 || $[43] !== t15 || $[44] !== t8 ? (t16 = /* @__PURE__ */ jsx(Card, {
 		height: "fill",
-		children: [t12, t13]
-	}), $[39] = t12, $[40] = t13, $[41] = t14) : t14 = $[41], t14;
+		children: /* @__PURE__ */ jsxs(Flex, {
+			direction: "column",
+			height: "fill",
+			children: [
+				t8,
+				t11,
+				t12,
+				t15
+			]
+		})
+	}), $[41] = t11, $[42] = t12, $[43] = t15, $[44] = t8, $[45] = t16) : t16 = $[45], t16;
+}
+function _temp$1(snapshot) {
+	return resolveThemes(snapshot.context);
+}
+function selectView(snapshot) {
+	let { editing } = snapshot.context;
+	return snapshot.matches({ flow: "edit" }) && editing ? {
+		name: "edit",
+		slug: editing.slug,
+		focusTitle: editing.focusTitle
+	} : snapshot.matches({ flow: "removed" }) ? { name: "removed" } : { name: "list" };
+}
+function sameView(a, b) {
+	return a.name === b.name ? a.name !== "edit" || b.name !== "edit" || a.slug === b.slug && a.focusTitle === b.focusTitle : !1;
 }
-var content = "bgn4np4", frame = "bgn4np3", sidebar = "bgn4np2";
+var content = "bgn4np3", frame = "bgn4np2", resizeHandle = "bgn4np4", sidebar = "bgn4np1";
 /** How far one arrow key press resizes the sidebar */
 const WIDTH_STORAGE_KEY = "sanityStudio:themer:width";
 function clampWidth(width) {
@@ -1973,27 +2434,27 @@ function writeStoredWidth(width) {
 *
 * @internal
 */
-function ResizableSidebar(props) {
-	let $ = c(24), { overlay } = props, [width, setWidth] = useState(readStoredWidth), [dragging, setDragging] = useState(!1), drag = useRef(null), t0, t1;
-	$[0] === width ? (t0 = $[1], t1 = $[2]) : (t0 = () => writeStoredWidth(width), t1 = [width], $[0] = width, $[1] = t0, $[2] = t1), useEffect(t0, t1);
-	let t2;
-	$[3] === width ? t2 = $[4] : (t2 = (event) => {
+function ResizableSidebar(t0) {
+	let $ = c(30), { actorRef, dispatch, navbarHeight, split } = t0, [width, setWidth] = useState(readStoredWidth), [dragging, setDragging] = useState(!1), drag = useRef(null), t1, t2;
+	$[0] === width ? (t1 = $[1], t2 = $[2]) : (t1 = () => writeStoredWidth(width), t2 = [width], $[0] = width, $[1] = t1, $[2] = t2), useEffect(t1, t2);
+	let t3;
+	$[3] === width ? t3 = $[4] : (t3 = (event) => {
 		event.button === 0 && (event.preventDefault(), event.currentTarget.setPointerCapture(event.pointerId), drag.current = {
 			pointerId: event.pointerId,
 			startX: event.clientX,
 			startWidth: width
 		}, setDragging(!0));
-	}, $[3] = width, $[4] = t2);
-	let handlePointerDown = t2, t3;
-	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t3 = (event_0) => {
+	}, $[3] = width, $[4] = t3);
+	let handlePointerDown = t3, t4;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event_0) => {
 		drag.current && drag.current.pointerId === event_0.pointerId && setWidth(clampWidth(drag.current.startWidth - (event_0.clientX - drag.current.startX)));
-	}, $[5] = t3) : t3 = $[5];
-	let handlePointerMove = t3, t4;
-	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t4 = (event_1) => {
+	}, $[5] = t4) : t4 = $[5];
+	let handlePointerMove = t4, t5;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (event_1) => {
 		drag.current && drag.current.pointerId === event_1.pointerId && (drag.current = null, setDragging(!1));
-	}, $[6] = t4) : t4 = $[6];
-	let handlePointerUp = t4, t5;
-	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t5 = (event_2) => {
+	}, $[6] = t5) : t5 = $[6];
+	let handlePointerUp = t5, t6;
+	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t6 = (event_2) => {
 		let step = {
 			ArrowLeft: 16,
 			ArrowRight: -16,
@@ -2001,19 +2462,23 @@ function ResizableSidebar(props) {
 			End: -400
 		}[event_2.key];
 		step !== void 0 && (event_2.preventDefault(), setWidth((current) => clampWidth(current + step)));
-	}, $[7] = t5) : t5 = $[7];
-	let handleKeyDown = t5, t6;
-	$[8] !== overlay || $[9] !== width ? (t6 = overlay ? void 0 : { width }, $[8] = overlay, $[9] = width, $[10] = t6) : t6 = $[10];
-	let t7 = !overlay, t8;
-	$[11] !== dragging || $[12] !== handlePointerDown || $[13] !== overlay || $[14] !== width ? (t8 = !overlay && /* @__PURE__ */ jsx("div", {
+	}, $[7] = t6) : t6 = $[7];
+	let handleKeyDown = t6, [boundaryElement, setBoundaryElement] = useState(null), t7;
+	$[8] === width ? t7 = $[9] : (t7 = { width }, $[8] = width, $[9] = t7);
+	let t8;
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t8 = (boundaryElement_0) => (startTransition(() => setBoundaryElement(boundaryElement_0)), _temp), $[10] = t8) : t8 = $[10];
+	let t9;
+	$[11] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => setWidth(200), $[11] = t9) : t9 = $[11];
+	let t10;
+	$[12] !== dragging || $[13] !== handlePointerDown || $[14] !== width ? (t10 = /* @__PURE__ */ jsx("div", {
 		"aria-label": "Resize the themer",
-		className: "bgn4np5",
+		className: resizeHandle,
 		"aria-orientation": "vertical",
 		"aria-valuemax": 400,
 		"aria-valuemin": 200,
 		"aria-valuenow": width,
 		"data-dragging": dragging,
-		onDoubleClick: () => setWidth(200),
+		onDoubleClick: t9,
 		onKeyDown: handleKeyDown,
 		onPointerCancel: handlePointerUp,
 		onPointerDown: handlePointerDown,
@@ -2021,30 +2486,41 @@ function ResizableSidebar(props) {
 		onPointerUp: handlePointerUp,
 		role: "separator",
 		tabIndex: 0
-	}), $[11] = dragging, $[12] = handlePointerDown, $[13] = overlay, $[14] = width, $[15] = t8) : t8 = $[15];
-	let t9;
-	$[16] === Symbol.for("react.memo_cache_sentinel") ? (t9 = /* @__PURE__ */ jsx(Box, {
+	}), $[12] = dragging, $[13] = handlePointerDown, $[14] = width, $[15] = t10) : t10 = $[15];
+	let t11;
+	$[16] !== actorRef || $[17] !== dispatch || $[18] !== navbarHeight || $[19] !== split ? (t11 = /* @__PURE__ */ jsx(ThemerSidebar, {
+		split,
+		navbarHeight,
+		actorRef,
+		dispatch
+	}), $[16] = actorRef, $[17] = dispatch, $[18] = navbarHeight, $[19] = split, $[20] = t11) : t11 = $[20];
+	let t12;
+	$[21] !== boundaryElement || $[22] !== t11 ? (t12 = /* @__PURE__ */ jsx(Box, {
 		className: content,
 		height: "fill",
 		overflow: "hidden",
-		children: /* @__PURE__ */ jsx(ThemerSidebar, {})
-	}), $[16] = t9) : t9 = $[16];
-	let t10;
-	$[17] !== t7 || $[18] !== t8 ? (t10 = /* @__PURE__ */ jsxs(Card, {
-		borderLeft: t7,
+		children: /* @__PURE__ */ jsx(BoundaryElementProvider, {
+			element: boundaryElement,
+			children: t11
+		})
+	}), $[21] = boundaryElement, $[22] = t11, $[23] = t12) : t12 = $[23];
+	let t13;
+	$[24] !== t10 || $[25] !== t12 ? (t13 = /* @__PURE__ */ jsxs(Card, {
+		borderLeft: !0,
 		className: frame,
 		height: "fill",
-		children: [t8, t9]
-	}), $[17] = t7, $[18] = t8, $[19] = t10) : t10 = $[19];
-	let t11;
-	return $[20] !== overlay || $[21] !== t10 || $[22] !== t6 ? (t11 = /* @__PURE__ */ jsx(Layer, {
+		ref: t8,
+		children: [t10, t12]
+	}), $[24] = t10, $[25] = t12, $[26] = t13) : t13 = $[26];
+	let t14;
+	return $[27] !== t13 || $[28] !== t7 ? (t14 = /* @__PURE__ */ jsx(Layer, {
 		className: sidebar,
-		"data-overlay": overlay,
-		style: t6,
+		style: t7,
 		zOffset: 100,
-		children: t10
-	}), $[20] = overlay, $[21] = t10, $[22] = t6, $[23] = t11) : t11 = $[23], t11;
+		children: t13
+	}), $[27] = t13, $[28] = t7, $[29] = t14) : t14 = $[29], t14;
 }
+function _temp() {}
 export { ResizableSidebar as default };
 
-//# sourceMappingURL=ResizableSidebar-DD787kQr.js.map
+//# sourceMappingURL=ResizableSidebar-C1nr3Ls2.js.map